/* ==========================================================================
   WorldOfMercek – "Editorial" theme layer. Loaded after site.css; markup is unchanged.
   The writer's site reads like a well-set magazine: an optical-size serif (Fraunces) for everything
   you read, IBM Plex Sans for everything you click, small caps instead of tracked mono labels,
   hairline lists instead of boxed cards. The Lab keeps its own instrument look (mono stays there).
   Remove this one <link> to return to the previous look.
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
    --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
    --bg: #121110; --bg2: #191816; --bg3: #22201D;
    --line: rgba(237,230,217,.09); --line2: rgba(237,230,217,.18);
    --ink: #EDE6D9; --ink2: #B3AB9D; --ink3: #807869;
    --accent: #FF8A00; --accent2: #FFA53D; --soft: rgba(255,138,0,.10);
    --glass: #191816; --edge: none;
    --maxw: 1240px;
    --h1: clamp(44px, 6.4vw, 96px); --h2: clamp(34px, 4.2vw, 60px);
    --r-card: 10px;
}
[data-mtheme="light"] {
    --bg: #F7F5F0; --bg2: #FFFFFF; --bg3: #EFECE5;
    --line: rgba(22,21,18,.10); --line2: rgba(22,21,18,.20);
    --ink: #161512; --ink2: #57524A; --ink3: #857F74;
    --accent: #E87A00; --accent2: #FF8A00; --soft: rgba(232,122,0,.10);
    --glass: #FFFFFF;
}
/* outside the Lab the "mono" token becomes the UI sans; the Lab keeps its instruments */
body:not(.page-lab):not(.page-lab-tool) { --f-mono: 'IBM Plex Sans', system-ui, sans-serif; }
body { background: var(--bg); }

/* 2. Small caps labels (replaces tracked monospace) --------------------------- */
body:not(.page-lab):not(.page-lab-tool) :is(.kicker, .pill, .hdr-tag, .post-mini-meta, .post-row-meta, .blog-featured-meta, .home-about-facts i:first-child,
    .newsletter-form label, .tool-card-cta, .partner-card-no, .partner-card-cta, .partner-tile-no, .link-accent, .blog-featured-cta, .ftr-top p, .ftr-head,
    .ftr-legal, .crumbs, .chip, .home-hero-caption i, .post-meta, .pv-meta) {
    font-family: 'IBM Plex Sans', system-ui, sans-serif; font-variant-caps: all-small-caps; letter-spacing: .07em; font-weight: 600;
}
.kicker { font-size: 16px; color: var(--accent); }
.sec-head .kicker, .newsletter-copy .kicker { letter-spacing: .07em; }
.pill { gap: 10px; padding: 0; background: none; border: 0; border-radius: 0; font-size: 15px; color: var(--ink2); }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--soft); }
.post-mini-meta, .post-row-meta, .blog-featured-meta { font-size: 13px; }
.link-accent, .blog-featured-cta, .partner-card-cta { font-size: 15px; letter-spacing: .05em; }
.chip { font-size: 13px; }
.hdr-tag { font-size: 11px; letter-spacing: .1em; }
.ftr-top p { font-size: 13px; line-height: 1.7; letter-spacing: .08em; }

/* 3. Serif for everything you read ----------------------------------------- */
.home-hero-text h1, .partners-band h1, .page-band h1, .contact-band h1, .post-head h1, .partner-hero h1, .status-inner h1,
.sec-head h2, .home-partners-intro h2, .cta-band h2, .newsletter-copy h2, .ftr-top h2, .related h2, .related-head h2, .about-story h2,
.blog-featured h2, .post-feature h3, .post-row h3, .post-mini h4, .principles h3, .partner-card h3, .related-card h4,
.home-about-lede, .post-article h2, .post-article h3, .post-article h4, .post-article .post-thesis, .partner-h2, .partner-story h2,
.partner-story h3, .partner-story blockquote, .contact-card h2, .contact-form h2, .links-bio, .author-name {
    font-family: var(--serif); font-optical-sizing: auto; font-weight: 400; letter-spacing: -.02em;
}
/* the one loud moment: the hero headline */
.home-hero-text h1 { font-size: clamp(46px, 7.2vw, 112px); line-height: .94; letter-spacing: -.035em; font-weight: 400; }
.partners-band h1, .page-band h1, .contact-band h1 { font-size: var(--h1); line-height: .98; letter-spacing: -.03em; }
.post-head h1, .partner-hero h1 { font-size: clamp(36px, 4.8vw, 68px); line-height: 1.02; letter-spacing: -.028em; }
.sec-head h2, .home-partners-intro h2 { font-size: var(--h2); line-height: 1.02; letter-spacing: -.028em; }
.cta-band h2 { font-size: clamp(34px, 4.6vw, 68px); line-height: 1; max-width: 18ch; letter-spacing: -.03em; }
.ftr-top h2 { font-size: clamp(38px, 5.6vw, 88px); line-height: .98; letter-spacing: -.032em; color: #EDE6D9; }
.newsletter-copy h2 { font-size: clamp(28px, 3.2vw, 42px); line-height: 1.05; }
.blog-featured h2 { font-size: clamp(28px, 3.2vw, 44px); line-height: 1.04; }
.post-feature h3 { font-size: clamp(26px, 2.8vw, 38px); line-height: 1.06; }
.post-row h3 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.15; font-weight: 450; }
.post-mini h4 { font-size: 21px; line-height: 1.2; font-weight: 450; }
.principles h3 { font-size: clamp(22px, 2vw, 26px); line-height: 1.15; font-weight: 450; }
.partner-card h3 { font-size: 22px; font-weight: 450; }
.home-about-lede { font-size: clamp(24px, 2.6vw, 36px); line-height: 1.22; letter-spacing: -.02em; }
.partners-band p, .home-hero-intro p { font-size: clamp(17px, 1.3vw, 20px); line-height: 1.6; }

/* 4. Calmer components ------------------------------------------------------ */
.btn, .btn-follow, .btn-small, .btn-outline-mono { border-radius: 999px; }
.btn { height: 52px; padding: 0 26px; }
.btn-primary:hover, .btn-follow:hover, .btn-small:hover { transform: none; box-shadow: none; }
.btn-outline-mono { font-family: 'IBM Plex Sans', system-ui, sans-serif; letter-spacing: .02em; }
.card-glass { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bg2); }
.home-hero-card, .newsletter, .blog-featured, .post-feature, .partner-tiles, .home-about, .tool-card, .partner-card { border-radius: var(--r-card); }
.home-hero-card { border-color: var(--line2); box-shadow: none; }
.home-hero-sweep { display: none; }

/* principles: three columns between two hairlines, no box, no numbering (they are not a sequence).
   A solid ground keeps the page grid lines from running through the text; a short accent rule heads each one. */
.principles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; background: var(--bg); border: 0; border-top: 1px solid var(--line2); border-bottom: 1px solid var(--line2); border-radius: 0; overflow: visible; }
.principles > div { background: none; padding: clamp(28px, 3vw, 40px) clamp(20px, 2.6vw, 40px) clamp(30px, 3.2vw, 44px); }
.principles > div:first-child { padding-left: 0; }
.principles > div:last-child { padding-right: 0; }
.principles > div + div { border-left: 1px solid var(--line); }
.principles > div::before { content: ""; display: block; width: 28px; height: 2px; margin-bottom: 22px; background: var(--accent); }
.principles span { display: none; }
.principles h3 { margin: 0 0 12px; }
.principles p { max-width: 34ch; font-size: 16px; line-height: 1.6; }

/* latest writing: the side list becomes a contents list */
.post-mini-list { gap: 0; }
.post-mini { background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 20px 0; box-shadow: none; }
.post-mini:last-child { border-bottom: 1px solid var(--line); }
.post-mini:hover { transform: none; box-shadow: none; border-color: var(--line); }
.post-mini:hover h4, .post-row:hover h3, .post-feature:hover h3, .blog-featured:hover h2 { color: var(--accent); }
.post-feature:hover, .blog-featured:hover { border-color: var(--line2); }
.post-mini h4, .post-row h3, .post-feature h3, .blog-featured h2 { transition: color .2s ease; }

/* cards lift less, show focus by colour */
.tool-card:hover, .partner-card:hover, .partner-strip-card:hover { transform: none; box-shadow: none; border-color: var(--accent); }

/* about facts: numbers set in the serif */
.home-about-facts b { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 3.4vw, 48px); letter-spacing: -.03em; font-variant-numeric: lining-nums; }

/* 5. Reading: articles are set in the serif ------------------------------------ */
.post-article { font-family: var(--serif); font-optical-sizing: auto; font-size: clamp(18px, 1.3vw, 20px); line-height: 1.72; color: var(--ink); }
.post-article p { max-width: 66ch; }
.post-article > p:first-of-type::first-letter { float: left; font-family: var(--serif); font-weight: 400; font-size: 4.1em; line-height: .84; margin: .06em .1em 0 0; color: var(--accent); }
.post-article blockquote { font-style: italic; }
.post-article li { line-height: 1.65; }

/* about: the story is read, so it is set like an article */
.about-story p { font-family: var(--serif); font-optical-sizing: auto; font-size: clamp(17px, 1.25vw, 19px); line-height: 1.7; }

/* 6. Focus that is easy to see ---------------------------------------------------- */
:is(a, button, input, textarea, select):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

@media (max-width: 760px) {
    .home-hero-text h1 { font-size: clamp(42px, 12vw, 64px); }
    .principles { grid-template-columns: 1fr; }
    .principles > div { padding: 26px 0 28px; }
    .principles > div + div { border-left: 0; border-top: 1px solid var(--line); }
    .principles > div::before { margin-bottom: 16px; }
    .principles h3 { margin-bottom: 8px; font-size: 23px; }
    .principles p { max-width: none; font-size: 15.5px; }
}