/* ========================================================================== Winter — Dr Robert N. Winter Plain CSS. No build step. Sections: 1 Tokens 5 Masthead & nav 9 Listing pages 2 Reset & base 6 Home 10 Membership 3 Utilities 7 Essay 11 Footer 4 Koenig cards 8 Episode 12 Player dock Change a value in §1 and it changes everywhere. ========================================================================== */ /* ===== 1. TOKENS ========================================================= */ :root{ /* surfaces */ --c-paper:#fff1e5; --c-paper-2:#fff8f0; --c-rule:#e6d9ce; --c-rule-strong:#c9b8a8; --c-dark:#262a33; --c-dark-2:#3a3f4a; /* text */ --c-ink:#33302e; --c-ink-2:#4d4845; --c-ink-muted:#807973; --c-on-dark:#fff1e5; --c-on-dark-2:#b0aaa3; --c-on-dark-3:#c9c3bc; /* brand — teal */ --c-accent:#0d7680; /* fills, rules, decoration */ --c-accent-ink:#0a5c64; /* accent as small text — 6.9:1 on paper */ --c-accent-on-dark:#79c2c9; /* accent on dark — 7.1:1 on slate */ --c-accent-hover:#095057; /* tiers — meaning, not decoration */ --c-tier-free:#4d4845; --c-tier-commons:#0f5499; --c-tier-inner:#990f3d; --c-tier-inner-on-dark:#e8829f; --c-velvet:#593380; --c-white:#ffffff; /* families */ /* Ghost's typography settings override these when a font is chosen in admin. */ --f-serif:var(--gh-font-heading,"Newsreader",Georgia,"Times New Roman",serif); --f-sans:var(--gh-font-body,"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif); --f-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; /* type scale */ --fs-2xs:9.5px; --fs-xs:10.5px; --fs-sm:12px; --fs-base:13px; --fs-md:15.5px; --fs-lg:17.5px; --fs-xl:19.5px; --fs-2xl:22px; --fs-3xl:26px; --fs-4xl:clamp(25px,2.8vw,33px); --fs-5xl:clamp(28px,3.4vw,42px); --fs-6xl:clamp(33px,4.2vw,54px); /* leading / tracking / weight */ --lh-tight:1.05; --lh-snug:1.2; --lh-normal:1.45; --lh-prose:1.62; --ls-eyebrow:.16em; --ls-strap:.26em; --ls-tight:-.025em; --fw-normal:400; --fw-medium:500; --fw-semi:600; --fw-bold:700; /* spacing */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:22px; --sp-6:30px; --sp-7:44px; --sp-8:60px; /* layout */ --site:1280px; --measure:680px; --gutter:24px; /* borders */ --bd-hair:1px solid var(--c-rule); --bd-strong:2px solid var(--c-dark); --bd-accent:3px solid var(--c-accent); } /* ===== 2. RESET & BASE =================================================== */ *,*::before,*::after{box-sizing:border-box} body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,ul,ol{margin:0;padding:0} html{-webkit-text-size-adjust:100%} body{ background:var(--c-paper);color:var(--c-ink); font-family:var(--f-serif);font-optical-sizing:auto; line-height:var(--lh-normal); -webkit-font-smoothing:antialiased; transition:padding-bottom .2s ease; } body.has-dock{padding-bottom:80px} img,video{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--c-accent);outline-offset:3px} button{font:inherit} h1,h2,h3,h4{font-weight:var(--fw-medium);letter-spacing:var(--ls-tight);line-height:var(--lh-snug)} .skip{position:absolute;left:-9999px} .skip:focus{left:var(--gutter);top:var(--gutter);z-index:100;background:var(--c-dark);color:var(--c-paper);padding:10px 14px;font-family:var(--f-sans);font-size:var(--fs-base)} /* ===== 3. UTILITIES ====================================================== */ .wrap{max-width:var(--site);margin:0 auto;padding:0 var(--gutter)} .col{max-width:var(--measure);margin:0 auto;padding:0 var(--gutter)} .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .eyebrow{font-family:var(--f-sans);font-size:var(--fs-xs);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;font-weight:var(--fw-bold)} .eyebrow--accent{color:var(--c-accent-ink)} .meta{font-family:var(--f-sans);font-size:var(--fs-sm);color:var(--c-ink-muted)} .chip{font-family:var(--f-sans);font-size:var(--fs-xs);font-weight:var(--fw-bold);letter-spacing:.09em; text-transform:uppercase;padding:3px 7px;border:1px solid currentColor;white-space:nowrap;display:inline-block} .chip--free{color:var(--c-tier-free)} .chip--commons{color:var(--c-tier-commons)} .chip--inner{color:var(--c-tier-inner)} .btn{font-family:var(--f-sans);font-size:12.5px;font-weight:var(--fw-semi);padding:9px 16px; border:1px solid var(--c-dark);background:transparent;cursor:pointer; display:inline-flex;align-items:center;gap:7px;white-space:nowrap;color:inherit} .btn:hover{background:var(--c-dark);color:var(--c-paper)} .btn--accent{background:var(--c-accent);border-color:var(--c-accent);color:#fff} .btn--accent:hover{background:var(--c-accent-hover);border-color:var(--c-accent-hover);color:#fff} .btn--inner{background:var(--c-tier-inner);border-color:var(--c-tier-inner);color:#fff} .btn--inner:hover{background:#7a0c31;border-color:#7a0c31;color:#fff} .btn--ghost-dark{border-color:rgba(255,241,229,.4);color:var(--c-on-dark);background:transparent} .btn--ghost-dark:hover{background:var(--c-on-dark);color:var(--c-dark)} .btn svg{width:11px;height:11px;fill:currentColor} /* link hover — baseline rule at rest; a highlighter sweep grows left to right on hover, anchored to the left edge via background-size, with the rule strengthening at the same time rather than disappearing */ .ink-links a:not([class*="kg-"]):not([class*="btn"]):not(.chip){ color:var(--c-accent-ink); text-decoration:none; box-shadow:inset 0 -2px 0 0 color-mix(in oklab, var(--c-accent) 40%, transparent); background-image:linear-gradient(color-mix(in oklab, var(--c-accent) 22%, transparent), color-mix(in oklab, var(--c-accent) 22%, transparent)); background-repeat:no-repeat; background-position:0 0; background-size:0% 100%; transition:background-size .28s ease, box-shadow .2s ease; } .ink-links a:not([class*="kg-"]):not([class*="btn"]):not(.chip):hover{ background-size:100% 100%; box-shadow:inset 0 -2px 0 0 var(--c-accent); } .sechead{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-4); border-bottom:var(--bd-strong);padding-bottom:var(--sp-2);margin-bottom:var(--sp-5)} .sechead h2{font-family:var(--f-sans);font-size:var(--fs-base);font-weight:var(--fw-bold); letter-spacing:.15em;text-transform:uppercase} .sechead a{font-family:var(--f-sans);font-size:var(--fs-sm);font-weight:var(--fw-semi);color:var(--c-accent-ink);white-space:nowrap} .pager{display:flex;justify-content:center;gap:10px;padding:var(--sp-6) 0} .pager a,.pager span{font-family:var(--f-sans);font-size:var(--fs-base);font-weight:var(--fw-semi); padding:9px 15px;border:1px solid var(--c-rule-strong)} .pager .current{background:var(--c-dark);color:var(--c-paper);border-color:var(--c-dark)} /* ===== 4. KOENIG CARDS =================================================== */ .gh-content > *{margin-bottom:var(--sp-5)} .gh-content > :last-child{margin-bottom:0} .gh-content p{font-size:var(--fs-xl);line-height:var(--lh-prose);text-wrap:pretty} .gh-content h2{font-size:30px;margin-top:var(--sp-7);margin-bottom:18px;padding-top:20px;border-top:var(--bd-strong);line-height:1.15} .gh-content h3{font-size:var(--fs-3xl);margin-top:var(--sp-6);margin-bottom:var(--sp-3)} .gh-content ul,.gh-content ol{padding-left:1.4em} .gh-content li{font-size:var(--fs-xl);line-height:1.55;margin-bottom:var(--sp-2)} .gh-content strong{font-weight:var(--fw-semi)} .gh-content em{font-style:italic} .gh-content hr{border:0;border-top:var(--bd-hair);margin:var(--sp-7) 0} .gh-content blockquote{border-left:3px solid var(--c-accent);padding-left:22px;font-size:21px;line-height:1.5} .gh-content blockquote cite,.gh-content blockquote footer{display:block;font-family:var(--f-sans); font-size:12.5px;font-style:normal;color:var(--c-ink-muted);margin-top:10px} .gh-content .kg-blockquote-alt{border-left:0;padding:0;font-size:var(--fs-3xl);line-height:1.3; color:var(--c-accent-ink);text-align:left} /* captions — absent from the previous theme */ .kg-card-caption,.gh-content figcaption{ font-family:var(--f-sans);font-size:var(--fs-sm);color:var(--c-ink-muted); line-height:1.5;margin-top:9px;text-align:left} .kg-card-caption a{color:var(--c-accent-ink);text-decoration:underline;text-underline-offset:2px} /* image widths */ .kg-image-card img{width:100%} .kg-width-wide{max-width:1000px;margin-left:50%;transform:translateX(-50%)} .kg-width-full{max-width:100vw;margin-left:50%;transform:translateX(-50%)} .kg-width-full img{width:100vw} /* gallery — row and container were missing */ .kg-gallery-container{display:flex;flex-direction:column;gap:var(--sp-2);max-width:1000px; margin-left:50%;transform:translateX(-50%)} .kg-gallery-row{display:flex;flex-direction:row;justify-content:center;gap:var(--sp-2)} .kg-gallery-image img{width:100%;height:100%;object-fit:cover} /* callout — used for pull quotes and "a thought to sit with" */ /* toggle — the transcript. Internals were missing entirely. */ .kg-toggle-card .kg-toggle-heading{display:flex;align-items:center;justify-content:space-between; gap:var(--sp-3);padding:var(--sp-4) 0;cursor:pointer;width:100%} .kg-toggle-card .kg-toggle-heading-text{font-family:var(--f-sans);font-size:var(--fs-base); font-weight:var(--fw-semi);letter-spacing:0;margin:0} .kg-toggle-card .kg-toggle-card-icon{width:16px;height:16px;color:var(--c-accent-ink); transition:transform .2s ease;flex:none} .kg-toggle-card[data-kg-toggle-state="open"] .kg-toggle-card-icon{transform:rotate(180deg)} .kg-toggle-card .kg-toggle-content{padding:var(--sp-1) 0 var(--sp-5);font-size:16.5px; line-height:1.6;color:var(--c-ink-2)} .kg-toggle-card .kg-toggle-content p{font-size:16.5px;margin-bottom:var(--sp-4)} .kg-toggle-card .kg-toggle-content strong{font-family:var(--f-sans);font-size:var(--fs-sm); font-weight:var(--fw-bold);letter-spacing:.06em;text-transform:uppercase; color:var(--c-accent-ink);display:block;margin-bottom:var(--sp-1)} /* bookmark — the written companion. Internals were missing. */ .kg-bookmark-card{margin:0} .kg-bookmark-container{display:flex;border:1px solid var(--c-rule-strong);background:var(--c-paper-2); text-decoration:none;color:inherit;min-height:0} .kg-bookmark-container:hover{border-color:var(--c-accent)} .kg-bookmark-content{flex:1 1 auto;padding:var(--sp-5);display:flex;flex-direction:column;justify-content:center;min-width:0} .kg-bookmark-title{font-family:var(--f-serif);font-size:var(--fs-2xl);font-weight:var(--fw-medium); letter-spacing:-.015em;line-height:var(--lh-snug);color:var(--c-ink)} .kg-bookmark-description{font-size:var(--fs-md);color:var(--c-ink-2);line-height:1.5;margin-top:var(--sp-2); display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .kg-bookmark-metadata{display:flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-3); font-family:var(--f-sans);font-size:var(--fs-sm);color:var(--c-ink-muted);flex-wrap:wrap} .kg-bookmark-icon{width:16px;height:16px;flex:none} .kg-bookmark-author,.kg-bookmark-publisher{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .kg-bookmark-publisher::before{content:"·";margin-right:var(--sp-2)} .kg-bookmark-thumbnail{flex:0 0 33%;max-height:220px} .kg-bookmark-thumbnail img{width:100%;height:100%;object-fit:cover} /* embeds, code, buttons, files */ /* align-items:center sized a flex item to its own content by default — it never stretched it — so an iframe carrying its provider's native pixel width/height rendered at that native size, centered, regardless of the column it sat in. Fixed by shape of markup rather than by forcing the iframe's own sizing everywhere: where Ghost supplies its own responsive wrapper div (the standard oEmbed padding-box technique), that div is left to stretch to full width and the iframe's own inline width:100%;height:100% is untouched — overriding it broke interactivity in some embeds. Where no such wrapper exists and the iframe is a bare direct child, the theme supplies the responsive box itself via aspect-ratio + absolute fill. */ .kg-embed-card{display:flex;flex-direction:column;align-items:stretch} .kg-embed-card > div{width:100%} .kg-embed-card:has(> iframe){position:relative;aspect-ratio:16/9} .kg-embed-card > iframe{position:absolute;inset:0;width:100%;height:100%} .gh-content pre{background:var(--c-dark);color:var(--c-on-dark);padding:var(--sp-5);overflow-x:auto; font-family:var(--f-mono);font-size:14px;line-height:1.6} .gh-content :not(pre) > code{font-family:var(--f-mono);font-size:.86em;background:var(--c-paper-2); border:var(--bd-hair);padding:1px 5px} .kg-button-card .kg-btn{font-family:var(--f-sans);font-size:12.5px;font-weight:var(--fw-semi); padding:11px 20px;background:var(--c-accent);color:#fff;display:inline-block} .kg-button-card .kg-btn:hover{background:var(--c-accent-hover)} /* Ghost's own kg-card CSS loads after this file via {{ghost_head}}, so the container needs the two-class form to win — the earlier single-class rule was losing specificity on some elements, and the download icon had no theme rule at all, leaving it in Ghost's raw default grey box. */ .gh-content .kg-card.kg-file-card .kg-file-card-container{ display:flex;gap:var(--sp-4);align-items:center;border:1px solid var(--c-rule-strong); padding:var(--sp-4) var(--sp-5);background:var(--c-paper-2);text-decoration:none;color:inherit; border-radius:0;box-shadow:none} .gh-content .kg-card.kg-file-card .kg-file-card-container:hover{border-color:var(--c-accent)} .gh-content .kg-card.kg-file-card .kg-file-card-title{ font-family:var(--f-sans);font-weight:var(--fw-semi);font-size:var(--fs-md);color:var(--c-ink)} .gh-content .kg-card.kg-file-card .kg-file-card-caption{ font-family:var(--f-sans);font-size:var(--fs-sm);color:var(--c-ink-muted);margin-top:2px} .gh-content .kg-card.kg-file-card .kg-file-card-icon{ width:44px;height:44px;border-radius:50%;background:var(--c-paper); border:1px solid var(--c-rule-strong);display:flex;align-items:center;justify-content:center; flex:none;color:var(--c-accent)} .gh-content .kg-card.kg-file-card .kg-file-card-container:hover .kg-file-card-icon{ border-color:var(--c-accent);background:var(--c-accent);color:#fff} .gh-content .kg-card.kg-file-card .kg-file-card-icon svg{width:18px;height:18px} /* the essay audio card is hoisted into the strip and hidden in place */ .kg-audio-card{display:none} .no-js .kg-audio-card{display:block} /* Pandoc reference list */ .gh-content .csl-bib-body,.refs-body{margin-top:var(--sp-2)} .gh-content .csl-entry,.csl-entry{ font-size:var(--fs-md);line-height:1.5;color:var(--c-ink-2); padding-left:26px;text-indent:-26px;margin-bottom:var(--sp-3)} .gh-content .csl-entry:target,.csl-entry:target{background:var(--c-paper-2); box-shadow:-8px 0 0 var(--c-paper-2),8px 0 0 var(--c-paper-2)} a[href*="#ref-"]{color:var(--c-tier-commons)} /* citation popover */ .citepop{position:absolute;z-index:80;max-width:390px;background:var(--c-dark);color:var(--c-on-dark); padding:14px 16px 13px;font-family:var(--f-sans);font-size:var(--fs-base);line-height:1.55; box-shadow:0 10px 34px rgba(0,0,0,.3);opacity:0;pointer-events:none; transition:opacity .14s ease;border-top:2px solid var(--c-accent-on-dark)} .citepop[data-show]{opacity:1;pointer-events:auto} .citepop em{font-style:italic} .citepop .jump{display:inline-block;margin-top:9px;font-size:11px;font-weight:var(--fw-bold); letter-spacing:.12em;text-transform:uppercase;color:var(--c-accent-on-dark)} .citepop .jump:hover{text-decoration:underline;text-underline-offset:3px} /* ===== 5. MASTHEAD & NAV ================================================= */ .masthead{position:sticky;top:0;z-index:50;background:var(--c-paper);border-bottom:var(--bd-hair)} .mast-main{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5); flex-wrap:wrap;padding:var(--sp-5) 0 var(--sp-4);transition:padding .18s ease} .mast-actions{display:flex;gap:10px;align-items:center;flex:none} .wordmark{display:block;font-family:var(--f-serif);font-weight:var(--fw-medium); letter-spacing:var(--ls-tight);line-height:.95;font-size:clamp(23px,3.2vw,42px); white-space:nowrap;transition:font-size .18s ease} .strapline{display:block;font-family:var(--f-sans);font-size:var(--fs-xs);font-weight:var(--fw-semi); letter-spacing:var(--ls-strap);text-transform:uppercase;color:var(--c-accent-ink); margin-top:9px;white-space:nowrap} .broadrule{border-top:var(--bd-strong);border-bottom:1px solid var(--c-dark);height:5px;transition:height .18s ease} .nav-primary .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5)} .nav-primary ul{display:flex;list-style:none;overflow:visible;padding:0} .nav-primary a{display:block;padding:var(--sp-3) 0;margin-right:26px;font-family:var(--f-sans); font-size:var(--fs-base);font-weight:var(--fw-semi);white-space:nowrap; border-bottom:3px solid transparent;margin-bottom:-1px} .nav-primary a:hover{color:var(--c-accent-ink);border-bottom-color:var(--c-accent)} .nav-primary li.nav-current a{border-bottom-color:var(--c-accent)} .nav-sep{width:1px;height:16px;background:var(--c-rule);margin:0 26px 0 0;flex:none;align-self:center;display:block} .nav-search{font-family:var(--f-sans);font-size:var(--fs-sm);color:var(--c-ink-muted);flex:none; background:var(--c-paper-2);border:1px solid var(--c-rule-strong);cursor:pointer; padding:8px 14px;display:inline-flex;align-items:center;gap:8px;border-radius:2px} .nav-search::before{content:"";width:13px;height:13px;flex:none; background:none;border:1.6px solid currentColor;border-radius:50%; position:relative} .nav-search::after{content:"";position:relative;width:5px;height:1.6px;background:currentColor; transform:rotate(45deg) translate(3px,5px);display:inline-block} .nav-search:hover{border-color:var(--c-accent);color:var(--c-accent-ink);background:var(--c-paper)} .nav-search:hover{color:var(--c-accent-ink)} /* contents strip */ .contents{background:var(--c-paper-2);border-top:var(--bd-hair)} .contents .wrap{display:grid;grid-template-columns:auto repeat(3,1fr);align-items:stretch} .contents .stamp{display:flex;flex-direction:column;justify-content:center; padding:var(--sp-4) var(--sp-5) var(--sp-4) 0;border-right:var(--bd-hair)} .contents .stamp b{font-family:var(--f-sans);font-size:var(--fs-xs);letter-spacing:var(--ls-eyebrow); text-transform:uppercase;color:var(--c-accent-ink);font-weight:var(--fw-bold)} .contents .stamp time{font-family:var(--f-sans);font-size:11.5px;color:var(--c-ink-muted); margin-top:var(--sp-1);white-space:nowrap} .contents .item{padding:var(--sp-4) 20px;border-right:var(--bd-hair)} .contents .item:last-child{border-right:0} .contents .item .eyebrow{color:var(--c-ink-muted);display:block;margin-bottom:var(--sp-1);letter-spacing:.13em} .contents .item p{font-size:var(--fs-md);line-height:1.3} .contents .item a:hover p{color:var(--c-accent-ink)} /* breadcrumb — becomes the standing bar when scrolled */ .artcrumb{border-top:var(--bd-hair);background:var(--c-paper-2)} .artcrumb .wrap{display:flex;align-items:center;gap:var(--sp-3);padding:10px var(--gutter); flex-wrap:nowrap;font-family:var(--f-sans);font-size:var(--fs-sm);color:var(--c-ink-muted);min-height:42px} .artcrumb a{color:var(--c-accent-ink);font-weight:var(--fw-semi);white-space:nowrap} .artcrumb a:hover{text-decoration:underline;text-underline-offset:3px} .artcrumb .filed{display:flex;align-items:center;gap:9px;flex:none;white-space:nowrap} .artcrumb .crumb-home{display:none;font-family:var(--f-serif);font-size:var(--fs-md);color:var(--c-ink); font-weight:var(--fw-medium);white-space:nowrap;flex:none;letter-spacing:var(--ls-tight); padding-right:var(--sp-3);border-right:var(--bd-hair)} .artcrumb .crumb-title{display:none;font-family:var(--f-serif);font-size:16.5px;color:var(--c-ink); font-weight:var(--fw-medium);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; min-width:0;flex:1;letter-spacing:-.012em} /* Article pages replace the whole bar with the compact breadcrumb, so nav-primary is meant to disappear here too — this rule was written before the home page also used is-scrolled, and needs the article scope made explicit now that both pages share the class. Without it, this was also hiding the home page's own nav bar once scrolled, leaving nothing pinned at all. */ body[data-sticky="article"].is-scrolled .mast-main, body[data-sticky="article"].is-scrolled .nav-primary, body[data-sticky="article"].is-scrolled .broadrule, body[data-sticky="article"].is-scrolled .contents{display:none} body.is-scrolled .artcrumb{border-top:0;background:var(--c-paper)} body.is-scrolled .artcrumb .crumb-home, body.is-scrolled .artcrumb .crumb-title{display:block} body.is-scrolled .artcrumb .lead-label{display:none} .progress{position:absolute;left:0;bottom:-1px;height:2px;background:var(--c-accent);width:0;z-index:2} /* ===== 6. HOME =========================================================== */ .strands{display:grid;grid-template-columns:1fr 1fr;border-bottom:var(--bd-hair)} .strand{padding:var(--sp-7) 44px var(--sp-6);display:flex;flex-direction:column;min-height:480px} .strand__label{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap} .strand--read{border-right:var(--bd-hair)} .strand--read h1{font-size:var(--fs-6xl);line-height:var(--lh-tight);letter-spacing:-.028em;margin:var(--sp-3) 0 var(--sp-4)} .strand--read h1 a{background-image:none !important;text-decoration:none} .strand--read h1 a:hover{color:var(--c-accent)} .strand--read .standfirst{font-size:18.5px;line-height:1.5;color:var(--c-ink-2);max-width:50ch} .strand--read .body{margin:var(--sp-5) 0 auto} .byline{margin-top:var(--sp-5);padding-top:var(--sp-4);border-top:var(--bd-hair); display:flex;gap:var(--sp-3);flex-wrap:wrap;align-items:center} .byline .btn{margin-left:auto} .seriesnote{margin-top:var(--sp-4);padding-top:var(--sp-3);border-top:var(--bd-hair); display:flex;gap:10px;align-items:baseline;flex-wrap:wrap} .seriesnote .lbl{font-family:var(--f-sans);font-size:var(--fs-xs);letter-spacing:var(--ls-eyebrow); text-transform:uppercase;font-weight:var(--fw-bold);color:var(--c-accent-ink);flex:none} .seriesnote p{font-size:var(--fs-md);color:var(--c-ink-2)} .seriesnote a{color:var(--c-accent-ink);text-decoration:none; background-image:linear-gradient(to top,color-mix(in oklab, currentColor 45%, transparent) 0, color-mix(in oklab, currentColor 45%, transparent) 100%); background-size:0 2px;background-repeat:no-repeat;background-position:0 90%; transition:background-size .2s ease} .seriesnote a:hover{background-size:100% 2px;color:var(--c-accent)} .strand--listen{background:var(--c-dark);color:var(--c-on-dark)} .strand--listen .eyebrow{color:var(--c-accent-on-dark)} .strand--listen .top{margin-bottom:auto} .guestbill{margin:var(--sp-5) 0 var(--sp-4);padding-bottom:var(--sp-4);border-bottom:1px solid rgba(255,241,229,.2)} .guestbill .name{display:block;font-family:var(--f-serif);font-size:var(--fs-2xl); font-weight:var(--fw-medium);letter-spacing:-.02em;line-height:var(--lh-snug);color:var(--c-on-dark)} .guestbill .role{display:block;font-family:var(--f-sans);font-size:12.5px;color:var(--c-on-dark-2);margin-top:6px} .strand--listen h2{font-size:var(--fs-6xl);line-height:var(--lh-tight);letter-spacing:-.028em;margin:var(--sp-3) 0 var(--sp-4);color:var(--c-on-dark)} .strand--listen h2 a:hover{color:var(--c-accent-on-dark)} .strand--listen .dek{font-size:18.5px;color:var(--c-on-dark-3);line-height:1.5;max-width:50ch} .strand--listen .show{display:block;font-family:var(--f-sans);font-size:11px;letter-spacing:.1em; text-transform:uppercase;color:var(--c-on-dark-2);margin-top:var(--sp-3)} .player{padding-top:var(--sp-5);border-top:1px solid rgba(255,241,229,.2);margin-top:var(--sp-5)} .player .pl-row{display:flex;align-items:center;gap:var(--sp-4)} .play{width:52px;height:52px;border-radius:50%;background:var(--c-paper);color:var(--c-dark); border:0;display:grid;place-items:center;cursor:pointer;flex:none;transition:transform .15s ease} .play:hover{transform:scale(1.06)} .play svg{width:18px;height:18px;fill:currentColor;grid-area:1/1} .play .i-play{margin-left:3px} .play .i-pause{display:none} .play[data-playing] .i-play{display:none} .play[data-playing] .i-pause{display:block} .scrub{flex:1;min-width:0} .bar{height:3px;background:rgba(255,241,229,.22);position:relative;cursor:pointer} .bar i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--c-accent-on-dark)} .bar i::after{content:"";position:absolute;right:-4px;top:-2.5px;width:8px;height:8px; border-radius:50%;background:var(--c-accent-on-dark)} .times{display:flex;justify-content:space-between;font-family:var(--f-sans);font-size:11.5px; color:var(--c-on-dark-2);margin-top:7px} .follow{display:flex;gap:var(--sp-2);margin-top:var(--sp-4);flex-wrap:wrap;align-items:center} .follow .lbl{font-family:var(--f-sans);font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase; color:var(--c-on-dark-2);font-weight:var(--fw-bold);margin-right:var(--sp-1)} .follow a{font-family:var(--f-sans);font-size:11px;font-weight:var(--fw-semi);padding:6px 11px; border:1px solid rgba(255,241,229,.32);color:var(--c-on-dark)} .follow a:hover{background:var(--c-on-dark);color:var(--c-dark)} .argptr{border-bottom:var(--bd-hair);background:var(--c-paper-2)} .argptr .wrap{display:flex;align-items:center;gap:18px;padding:var(--sp-4) var(--gutter);flex-wrap:wrap} .argptr .eyebrow{color:var(--c-accent-ink);flex:none} .argptr p{font-size:var(--fs-md);color:var(--c-ink-2);flex:1;min-width:240px} .argptr .link{font-family:var(--f-sans);font-size:12.5px;font-weight:var(--fw-semi);color:var(--c-accent-ink);flex:none} .argptr .link:hover{text-decoration:underline;text-underline-offset:3px} /* series ladder */ .series-block{padding:var(--sp-7) 0 0} .series-block .head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px; flex-wrap:wrap;border-bottom:var(--bd-accent);padding-bottom:var(--sp-3)} .series-block h2{font-size:var(--fs-5xl)} .series-block .sub{font-size:16.5px;color:var(--c-ink-2);max-width:64ch;margin-top:var(--sp-2)} .ladder{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px; background:var(--c-rule);border-bottom:var(--bd-hair)} .rung{background:var(--c-paper);padding:19px 16px 17px;display:flex;flex-direction:column; gap:10px;min-height:176px} a.rung:hover{background:var(--c-paper-2)} .rung .n{font-family:var(--f-sans);font-size:11.5px;font-weight:var(--fw-bold);letter-spacing:.18em;color:var(--c-accent-ink)} .rung h4{font-size:18px;line-height:var(--lh-snug);flex:1} .rung .foot{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-2)} .rung[data-locked]{background:repeating-linear-gradient(135deg,var(--c-paper-2) 0 8px,var(--c-paper) 8px 16px)} .rung[data-locked] h4{color:var(--c-ink-muted)} .rung[data-current]{box-shadow:inset 3px 0 0 var(--c-accent)} /* broadcast band */ .broadcast{background:var(--c-dark);color:var(--c-on-dark);margin-top:var(--sp-8);padding:var(--sp-7) 0} .broadcast .head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--sp-5); flex-wrap:wrap;border-bottom:1px solid rgba(255,241,229,.2);padding-bottom:18px;margin-bottom:var(--sp-6)} .broadcast h2{font-size:var(--fs-5xl)} .broadcast .head .eyebrow{color:var(--c-accent-on-dark)} .broadcast .blurb{font-size:16.5px;color:var(--c-on-dark-3);max-width:56ch;margin-top:var(--sp-2)} .eps{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--sp-6)} .ep{display:flex;flex-direction:column;gap:var(--sp-3)} .ep .cover{aspect-ratio:1/1;background:var(--c-dark-2);overflow:hidden} .ep .cover img{width:100%;height:100%;object-fit:cover} .ep .guestname{font-family:var(--f-serif);font-size:var(--fs-2xl);font-weight:var(--fw-medium); letter-spacing:-.015em;line-height:var(--lh-snug);color:var(--c-accent-on-dark)} .ep .role{font-family:var(--f-sans);font-size:11.5px;color:var(--c-on-dark-2);margin-top:3px} .ep h3{font-size:var(--fs-lg);line-height:1.25;color:var(--c-on-dark)} .ep h3 a:hover{color:var(--c-accent-on-dark)} .ep p{font-size:var(--fs-md);color:var(--c-on-dark-2);line-height:var(--lh-normal)} .ep .num{font-family:var(--f-sans);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--c-on-dark-2)} .ep .ctl{display:flex;align-items:center;gap:var(--sp-3);margin-top:auto;padding-top:var(--sp-3); border-top:1px solid rgba(255,241,229,.16)} .play--sm{width:37px;height:37px} .play--sm svg{width:13px;height:13px} .ep .dur{font-family:var(--f-sans);font-size:var(--fs-sm);color:var(--c-on-dark-2)} .ep .notes{font-family:var(--f-sans);font-size:var(--fs-sm);color:var(--c-accent-on-dark);margin-left:auto} /* card grid */ .essays-block{padding:var(--sp-7) 0 0} .egrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--c-rule)} .card{background:var(--c-paper);padding:var(--sp-5);display:flex;flex-direction:column;gap:10px} .card .thumb{aspect-ratio:16/10;background:var(--c-rule);overflow:hidden;margin-bottom:var(--sp-1)} .card .thumb img{width:100%;height:100%;object-fit:cover} .card .cat{font-family:var(--f-sans);font-size:var(--fs-xs);font-weight:var(--fw-bold); letter-spacing:.13em;text-transform:uppercase;color:var(--c-accent-ink)} .card h3{font-size:21.5px;line-height:1.16} .card h3 a:hover{color:var(--c-accent-ink)} .card p{font-size:var(--fs-md);color:var(--c-ink-2);line-height:var(--lh-normal);flex:1} .card .foot{display:flex;gap:10px;align-items:center;padding-top:10px;border-top:var(--bd-hair);flex-wrap:wrap} /* ===== 7. ESSAY ========================================================== */ .arthead{padding:var(--sp-7) 0 var(--sp-6)} .arthead .kicker{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:var(--sp-4)} .arthead .cat{font-family:var(--f-sans);font-size:11px;font-weight:var(--fw-bold);letter-spacing:.13em; text-transform:uppercase;color:var(--c-accent-ink)} .arthead h1{font-size:clamp(34px,4.6vw,52px);line-height:1.04;letter-spacing:-.028em; margin-bottom:18px;text-wrap:balance} .arthead .standfirst{font-size:20.5px;line-height:1.5;color:var(--c-ink-2)} .artbyline{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-5); padding-top:var(--sp-4);border-top:var(--bd-hair)} .artbyline .author{font-family:var(--f-sans);font-size:13.5px;font-weight:var(--fw-semi)} .audiostrip{margin:var(--sp-5) auto 0;max-width:var(--measure);padding:0 var(--gutter)} .audiostrip .inner{background:var(--c-dark);color:var(--c-on-dark);display:flex;align-items:center; gap:var(--sp-3);padding:13px 16px} .audiostrip .k{font-family:var(--f-sans);font-size:var(--fs-xs);letter-spacing:var(--ls-eyebrow); text-transform:uppercase;color:var(--c-accent-on-dark);font-weight:var(--fw-bold)} .audiostrip .t{font-size:16px;margin-top:2px} .audiostrip .dur{font-family:var(--f-sans);font-size:var(--fs-sm);color:var(--c-on-dark-2);margin-left:auto;flex:none} .audiostrip .play{width:42px;height:42px} .audiostrip .play svg{width:15px;height:15px} .audiostrip[hidden]{display:none} .audiocta{margin:var(--sp-5) auto 0;max-width:var(--measure);padding:0 var(--gutter)} .audiocta .inner{border:1px solid var(--c-rule-strong);background:var(--c-paper-2);display:flex; align-items:center;gap:var(--sp-3);padding:14px 16px} .audiocta .ring{width:38px;height:38px;border-radius:50%;border:1px solid var(--c-rule-strong); display:grid;place-items:center;flex:none;color:var(--c-accent-ink)} .audiocta .ring svg{width:13px;height:13px;fill:currentColor;margin-left:2px} .audiocta .k{font-family:var(--f-sans);font-size:var(--fs-xs);letter-spacing:var(--ls-eyebrow); text-transform:uppercase;color:var(--c-accent-ink);font-weight:var(--fw-bold)} .audiocta .t{font-size:16px;margin-top:3px;line-height:1.4} .audiocta .t a{color:var(--c-accent-ink);text-decoration:underline;text-underline-offset:2px} .lead-fig{margin:var(--sp-6) auto 0;max-width:1000px;padding:0 var(--gutter)} .lead-fig img{width:100%;aspect-ratio:16/9;object-fit:cover} /* Option C — treated as a small aside rather than a caption, matching the left-rule language already used for callouts and the essay gate. */ .lead-fig figcaption{font-family:var(--f-sans);font-size:12.5px;color:var(--c-ink-muted); line-height:1.5;border-left:2px solid var(--c-rule-strong);padding:10px 16px;margin-top:14px} .article{padding:var(--sp-6) 0 0;position:relative} body[data-dropcap="true"] .article .gh-content > p:first-of-type::first-letter{ float:left;font-size:76px;line-height:.8;padding:8px 12px 0 0;font-weight:var(--fw-medium);color:var(--c-accent)} .gate{max-width:var(--measure);margin:0 auto;padding:0 var(--gutter)} .gate .inner{border-top:var(--bd-accent);padding:var(--sp-6) 0 var(--sp-2)} /* Commons gate: the same paper-2/left-rule idiom already used for callouts in the essay body, so this reads as the site's existing vocabulary rather than a bespoke component. Inner Circle keeps its plain dark panel — a claret rule there tested too low-contrast against slate to read at all. */ .gate--commons .inner{border-top:0;border:1px solid var(--c-rule);border-left:3px solid var(--c-accent); background:var(--c-paper-2);padding:var(--sp-6) var(--sp-5) var(--sp-5)} .gate h3{font-size:29px;margin:var(--sp-3) 0} .gate p{font-size:var(--fs-lg);color:var(--c-ink-2);line-height:1.55;margin-bottom:18px;max-width:56ch} .gate .acts{display:flex;gap:var(--sp-3);flex-wrap:wrap;align-items:center} .gate .fine{font-family:var(--f-sans);font-size:12.5px;color:var(--c-ink-muted);margin-top:var(--sp-4)} .gate--inner .inner{background:var(--c-dark);color:var(--c-on-dark);padding:var(--sp-6); border-top-color:var(--c-tier-inner)} .gate--inner p{color:var(--c-on-dark-3)} .gate--inner .fine{color:var(--c-on-dark-2)} .gate--inner .eyebrow{color:var(--c-tier-inner-on-dark)} .refs{max-width:var(--measure);margin:var(--sp-8) auto 0;padding:0 var(--gutter)} .refs h2{font-family:var(--f-sans);font-size:12.5px;font-weight:var(--fw-bold); letter-spacing:var(--ls-eyebrow);text-transform:uppercase;border-bottom:var(--bd-strong); padding-bottom:var(--sp-2);margin-bottom:18px} .argstrip{max-width:var(--measure);margin:var(--sp-7) auto 0;padding:0 var(--gutter)} .argstrip .inner{background:var(--c-paper-2);border:1px solid var(--c-rule-strong);padding:var(--sp-5)} .argstrip .eyebrow{color:var(--c-accent-ink)} .argstrip h3{font-size:23px;letter-spacing:-.015em;margin:9px 0 var(--sp-2)} .argstrip > .inner > p{font-size:16px;color:var(--c-ink-2);line-height:1.5;margin-bottom:var(--sp-3)} .argstrip ol{list-style:none;counter-reset:a;padding:0} .argstrip li{counter-increment:a;display:flex;gap:11px;align-items:baseline;padding:var(--sp-2) 0; border-top:var(--bd-hair);font-size:16.5px;line-height:1.3} .argstrip li::before{content:counter(a,upper-roman) ".";font-family:var(--f-sans);font-size:var(--fs-xs); font-weight:var(--fw-bold);color:var(--c-accent-ink);min-width:24px;flex:none} .argstrip li a{flex:1} .argstrip li a:hover{color:var(--c-accent-ink)} .argstrip li[aria-current] a{color:var(--c-ink-muted)} .argstrip li[aria-current]::after{content:"You are here";font-family:var(--f-sans);font-size:var(--fs-xs); letter-spacing:.1em;text-transform:uppercase;color:var(--c-ink-muted);flex:none} .adjacent{max-width:var(--measure);margin:var(--sp-6) auto 0;padding:0 var(--gutter)} .adjacent .inner{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--c-rule); border-top:var(--bd-hair);border-bottom:var(--bd-hair)} .adjacent a{background:var(--c-paper);padding:18px;display:flex;flex-direction:column;gap:7px} .adjacent a:hover{background:var(--c-paper-2)} .adjacent .dir{font-family:var(--f-sans);font-size:var(--fs-xs);letter-spacing:.14em; text-transform:uppercase;color:var(--c-accent-ink);font-weight:var(--fw-bold)} .adjacent .t{font-size:18px;font-weight:var(--fw-medium);line-height:var(--lh-snug)} .adjacent a.is-next{text-align:right;align-items:flex-end} .capture{margin-top:var(--sp-8);background:var(--c-dark);color:var(--c-on-dark);padding:var(--sp-7) 0} .capture .col{max-width:760px} .capture .eyebrow{color:var(--c-accent-on-dark)} .capture h2{font-size:var(--fs-5xl);margin:var(--sp-3) 0;text-wrap:balance} .capture p{font-size:var(--fs-lg);color:var(--c-on-dark-3);line-height:1.55;max-width:58ch} .capture form{display:flex;gap:10px;margin-top:var(--sp-5);flex-wrap:wrap;max-width:520px} .capture input[type=email]{flex:1;min-width:220px;font-family:var(--f-sans);font-size:14px; padding:12px 14px;border:1px solid rgba(255,241,229,.35);background:transparent;color:var(--c-on-dark)} .capture input::placeholder{color:var(--c-on-dark-2)} .capture .fine{font-family:var(--f-sans);font-size:var(--fs-sm);color:var(--c-on-dark-2);margin-top:var(--sp-3)} .capture .fine a{color:var(--c-accent-on-dark)} .capture .msg{font-family:var(--f-sans);font-size:var(--fs-base);margin-top:var(--sp-3);color:var(--c-accent-on-dark)} .related{padding:var(--sp-8) 0 0} /* ===== 8. EPISODE ======================================================== */ .ephero{background:var(--c-dark);color:var(--c-on-dark);padding:var(--sp-7) 0} .ephero .wrap{display:grid;grid-template-columns:280px 1fr;gap:var(--sp-7);align-items:center} .ephero .portrait{aspect-ratio:1/1;background:var(--c-dark-2);overflow:hidden} .ephero .portrait img{width:100%;height:100%;object-fit:cover} .ephero .kicker{font-family:var(--f-sans);font-size:11px;letter-spacing:.12em; text-transform:uppercase;color:var(--c-on-dark-2)} .ephero .guestname{display:block;font-family:var(--f-serif);font-size:clamp(32px,4.4vw,56px); font-weight:var(--fw-medium);line-height:1.02;letter-spacing:-.03em;margin:var(--sp-3) 0 var(--sp-2)} .ephero .role{font-family:var(--f-sans);font-size:13.5px;color:var(--c-accent-on-dark); padding-bottom:var(--sp-4);border-bottom:1px solid rgba(255,241,229,.22)} .ephero h1{font-size:clamp(22px,2.4vw,30px);line-height:var(--lh-snug);letter-spacing:-.018em; margin:var(--sp-4) 0 var(--sp-3)} .ephero .dek{font-size:17px;line-height:1.5;color:var(--c-on-dark-3);max-width:56ch} .bigplayer{margin-top:var(--sp-5);padding-top:var(--sp-5);border-top:1px solid rgba(255,241,229,.22)} .bigplayer .pl-row{display:flex;align-items:center;gap:var(--sp-4)} .bigplayer .play{width:62px;height:62px} .bigplayer .play svg{width:21px;height:21px} .bigplayer .bar{height:4px} /* show notes typography, driven by heading text */ .notes{padding:var(--sp-7) 0 0} .notes .gh-content h2{font-family:var(--f-sans);font-size:12.5px;font-weight:var(--fw-bold); letter-spacing:var(--ls-eyebrow);text-transform:uppercase;border-top:0; border-bottom:var(--bd-strong);padding-top:0;padding-bottom:var(--sp-2); margin-top:var(--sp-7);margin-bottom:18px} .notes .gh-content h2:first-child{margin-top:0} .notes .gh-content ul{list-style:none;padding-left:0} .notes .gh-content ul li{font-size:18px;line-height:1.5;padding:var(--sp-3) 0 var(--sp-3) 26px; border-bottom:var(--bd-hair);position:relative;margin-bottom:0} .notes .gh-content ul li::before{content:"";position:absolute;left:0;top:21px;width:12px;height:1px;background:var(--c-accent)} .guestblk{max-width:var(--measure);margin:var(--sp-7) auto 0;padding:0 var(--gutter)} .guestblk .inner{display:grid;grid-template-columns:96px 1fr;gap:20px;background:var(--c-paper-2); border:1px solid var(--c-rule-strong);padding:var(--sp-5)} .guestblk .portrait{aspect-ratio:1/1;background:var(--c-rule);overflow:hidden} .guestblk .portrait img{width:100%;height:100%;object-fit:cover} .guestblk .eyebrow{color:var(--c-accent-ink)} .guestblk h3{font-size:var(--fs-2xl);letter-spacing:-.015em;margin:var(--sp-2) 0} .guestblk p{font-size:var(--fs-md);color:var(--c-ink-2);line-height:1.5} .tie{max-width:var(--measure);margin:var(--sp-7) auto 0;padding:0 var(--gutter)} .tie .inner{border-top:var(--bd-accent);padding-top:var(--sp-5)} .tie .eyebrow{color:var(--c-accent-ink)} /* ===== 9. LISTING PAGES ================================================== */ .pagehead{padding:var(--sp-7) 0 var(--sp-5);border-bottom:var(--bd-strong)} .pagehead h1{font-size:clamp(34px,4.4vw,52px);line-height:1.03;letter-spacing:-.028em;margin:var(--sp-3) 0} .pagehead .lede{font-size:var(--fs-xl);line-height:1.55;color:var(--c-ink-2);max-width:64ch} .pagehead .count{font-family:var(--f-sans);font-size:12.5px;color:var(--c-ink-muted);margin-top:var(--sp-3)} .filters{display:flex;gap:var(--sp-2);flex-wrap:wrap;padding:18px 0;border-bottom:var(--bd-hair)} .filters a{font-family:var(--f-sans);font-size:var(--fs-sm);font-weight:var(--fw-semi); padding:7px 12px;border:1px solid var(--c-rule-strong);color:var(--c-ink-2)} .filters a:hover{border-color:var(--c-accent)} .filters a.is-current{background:var(--c-dark);color:var(--c-paper);border-color:var(--c-dark)} .leadrow{display:grid;grid-template-columns:1.3fr 1fr;gap:var(--sp-7);padding:var(--sp-6) 0; border-bottom:var(--bd-hair);align-items:center} .leadrow .thumb{aspect-ratio:16/10;background:var(--c-rule);overflow:hidden} .leadrow .thumb img{width:100%;height:100%;object-fit:cover} .leadrow h2{font-size:var(--fs-5xl);line-height:1.06;margin:var(--sp-3) 0} .leadrow h2 a:hover{color:var(--c-accent-ink)} .leadrow p{font-size:var(--fs-lg);color:var(--c-ink-2);line-height:1.5} .leadrow .foot{display:flex;gap:var(--sp-3);align-items:center;flex-wrap:wrap;margin-top:var(--sp-4)} .yeardiv{font-family:var(--f-sans);font-size:11px;font-weight:var(--fw-bold);letter-spacing:.18em; text-transform:uppercase;color:var(--c-accent-ink);padding:var(--sp-5) 0 10px;border-bottom:var(--bd-hair)} .row{display:grid;grid-template-columns:104px 1fr 150px;gap:var(--sp-5);padding:20px 0; border-bottom:var(--bd-hair);align-items:baseline} .row:hover{background:var(--c-paper-2)} .row .date{font-family:var(--f-sans);font-size:var(--fs-sm);color:var(--c-ink-muted);white-space:nowrap} .row h3{font-size:23px;line-height:1.16;letter-spacing:-.015em;margin-bottom:6px} .row h3 a:hover{color:var(--c-accent-ink)} .row p{font-size:var(--fs-md);color:var(--c-ink-2);line-height:var(--lh-normal);max-width:66ch} .row .tail{display:flex;flex-direction:column;gap:7px;align-items:flex-end;text-align:right} .row .cat{font-family:var(--f-sans);font-size:var(--fs-xs);font-weight:var(--fw-bold); letter-spacing:.11em;text-transform:uppercase;color:var(--c-accent-ink)} .arg{border-bottom:var(--bd-hair);padding:var(--sp-6) 0} .arg:first-of-type{border-top:var(--bd-hair)} .arg .hd{display:flex;align-items:baseline;gap:var(--sp-3);flex-wrap:wrap;margin-bottom:10px} .arg h2{font-size:var(--fs-4xl)} .arg .cnt{font-family:var(--f-sans);font-size:11px;color:var(--c-ink-muted);letter-spacing:.1em;text-transform:uppercase} .arg > p{font-size:var(--fs-lg);color:var(--c-ink-2);max-width:70ch;line-height:1.5;margin-bottom:20px} .arg ol{list-style:none;counter-reset:a;display:grid;grid-template-columns:1fr 1fr;gap:0 36px;padding:0} .arg li{counter-increment:a;padding:9px 0;border-bottom:var(--bd-hair);display:flex;gap:var(--sp-3);align-items:baseline} .arg li::before{content:counter(a,upper-roman) ".";font-family:var(--f-sans);font-size:var(--fs-xs); font-weight:var(--fw-bold);color:var(--c-accent-ink);flex:none;min-width:28px} .arg li a{font-size:16.5px;line-height:1.3;flex:1} .arg li a:hover{color:var(--c-accent-ink)} .arg--empty{background:var(--c-paper-2);margin:0 calc(var(--gutter) * -1);padding:var(--sp-6) var(--gutter)} .arg--empty .note{font-family:var(--f-sans);font-size:var(--fs-base);color:var(--c-ink-muted);margin-top:var(--sp-1)} .serieswrap{padding:var(--sp-6) 0;border-bottom:var(--bd-hair)} .serieswrap:first-of-type{border-top:var(--bd-hair)} .serieswrap .hd{display:flex;justify-content:space-between;align-items:flex-end;gap:18px; flex-wrap:wrap;margin-bottom:18px} .serieswrap h2{font-size:var(--fs-4xl)} .serieswrap .sub{font-size:16.5px;color:var(--c-ink-2);max-width:66ch;margin-top:7px;line-height:1.5} .serieswrap .ladder{border:var(--bd-hair)} .showhead{background:var(--c-dark);color:var(--c-on-dark);padding:var(--sp-7) 0} .showhead .wrap{display:grid;grid-template-columns:200px 1fr;gap:var(--sp-7);align-items:center} .showhead .cover{aspect-ratio:1/1;background:var(--c-dark-2);overflow:hidden} .showhead .cover img{width:100%;height:100%;object-fit:cover} .showhead h1{font-size:var(--fs-5xl);line-height:1.04;margin:10px 0 var(--sp-3)} .showhead p{font-size:var(--fs-lg);color:var(--c-on-dark-3);line-height:1.5;max-width:60ch} .eprow{display:grid;grid-template-columns:96px 1fr 130px;gap:var(--sp-5);padding:20px 0; border-bottom:var(--bd-hair);align-items:center} .eprow:hover{background:var(--c-paper-2)} .eprow .portrait{aspect-ratio:1/1;background:var(--c-rule);overflow:hidden} .eprow .portrait img{width:100%;height:100%;object-fit:cover} .eprow .gname{font-family:var(--f-serif);font-size:var(--fs-2xl);font-weight:var(--fw-medium); letter-spacing:-.015em;line-height:var(--lh-snug);display:block} .eprow .grole{font-family:var(--f-sans);font-size:11.5px;color:var(--c-ink-muted);margin-top:2px} .eprow h3{font-size:var(--fs-lg);line-height:1.25;margin:7px 0 5px} .eprow h3 a:hover{color:var(--c-accent-ink)} .eprow p{font-size:var(--fs-md);color:var(--c-ink-2);line-height:var(--lh-normal);max-width:62ch} .eprow .num{font-family:var(--f-sans);font-size:var(--fs-xs);letter-spacing:.13em; text-transform:uppercase;color:var(--c-ink-muted);margin-top:6px;display:block} .eprow .tail{display:flex;flex-direction:column;align-items:flex-end;gap:9px} .eprow .play{width:40px;height:40px;background:var(--c-dark);color:var(--c-paper)} .eprow .play svg{width:13px;height:13px} .authorhead{padding:var(--sp-7) 0 var(--sp-6);border-bottom:var(--bd-strong)} .authorhead .wrap{display:grid;grid-template-columns:170px 1fr;gap:var(--sp-6);align-items:start} .authorhead .portrait{aspect-ratio:1/1;background:var(--c-rule);overflow:hidden} .authorhead .portrait img{width:100%;height:100%;object-fit:cover} .authorhead h1{font-size:var(--fs-5xl);margin:10px 0 var(--sp-3)} .authorhead .bio{font-size:18px;color:var(--c-ink-2);line-height:1.55;max-width:62ch} .authorhead .bio p{margin-bottom:var(--sp-3);font-size:18px} .authorhead .links{display:flex;gap:var(--sp-3);margin-top:var(--sp-4);font-family:var(--f-sans); font-size:12.5px;font-weight:var(--fw-semi);flex-wrap:wrap} .authorhead .links a{color:var(--c-accent-ink)} .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1px; background:var(--c-rule);border:var(--bd-hair);margin-top:var(--sp-5)} .stats div{background:var(--c-paper);padding:var(--sp-4)} .stats b{display:block;font-size:27px;font-weight:var(--fw-medium);letter-spacing:-.02em} .stats span{font-family:var(--f-sans);font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--c-ink-muted)} /* ===== 10. MEMBERSHIP ==================================================== */ .tiers{margin-top:var(--sp-8);border-top:var(--bd-strong);padding-top:var(--sp-5)} .tiers .intro{max-width:62ch;margin-bottom:var(--sp-5)} .tiers h2{font-size:var(--fs-5xl);margin-bottom:10px} .tiers .intro p{font-size:var(--fs-lg);color:var(--c-ink-2)} /* Real gaps rather than a 1px rule showing through the seams — matches the left-rule idiom used for the Commons gate. Public gets a neutral rule (it needs no signup, so no accent colour to signal); Commons gets teal; Inner Circle is left exactly as it was, since a claret rule tested too low-contrast against its own dark background to read at all. */ .tgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--sp-4)} .tier{background:var(--c-paper-2);border:1px solid var(--c-rule);border-left:3px solid var(--c-rule-strong); padding:var(--sp-5) var(--sp-5) var(--sp-6);display:flex; flex-direction:column;gap:var(--sp-3)} .tier--commons{border-left-color:var(--c-accent)} .tier--inner{background:var(--c-dark);color:var(--c-on-dark);border-color:var(--c-dark)} .tier h3{font-size:25px} .tier .lede{font-size:var(--fs-md);color:var(--c-ink-2);line-height:1.5} .tier--inner .lede{color:var(--c-on-dark-3)} .tier ul{list-style:none;display:flex;flex-direction:column;gap:9px;font-family:var(--f-sans); font-size:13.5px;flex:1;margin-top:var(--sp-1);padding:0} .tier li{padding-left:18px;position:relative;line-height:1.4} .tier li::before{content:"—";position:absolute;left:0;color:var(--c-accent-ink)} .tier--inner li::before{color:var(--c-tier-inner-on-dark)} .tier .btn{margin-top:var(--sp-2);justify-content:center} /* ===== 11. FOOTER ======================================================== */ .site-footer{margin-top:var(--sp-8);border-top:var(--bd-hair);padding:var(--sp-7) 0 var(--sp-5)} .site-footer .top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:var(--sp-6); padding-bottom:var(--sp-5);border-bottom:var(--bd-hair)} .site-footer h4{font-family:var(--f-sans);font-size:var(--fs-xs);letter-spacing:var(--ls-eyebrow); text-transform:uppercase;color:var(--c-ink-muted);margin-bottom:var(--sp-3);font-weight:var(--fw-bold)} .site-footer ul{list-style:none;display:flex;flex-direction:column;gap:var(--sp-2); font-family:var(--f-sans);font-size:13.5px;padding:0} .site-footer a:hover{color:var(--c-accent-ink)} .site-footer .mark-f{font-size:25px;font-weight:var(--fw-medium)} .site-footer .mark-f p{font-size:var(--fs-md);color:var(--c-ink-2);margin-top:10px;max-width:34ch} .site-footer .base{padding-top:20px;font-family:var(--f-sans);font-size:11.5px;color:var(--c-ink-muted); display:flex;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap} .elsewhere li a{display:flex;align-items:center;gap:9px} .elsewhere svg{width:14px;height:14px;fill:currentColor;flex:none;opacity:.7} .elsewhere li a:hover svg{opacity:1} /* ===== 12. PLAYER DOCK =================================================== */ .dock{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--c-dark);color:var(--c-on-dark); border-top:2px solid var(--c-accent);transform:translateY(100%);transition:transform .24s ease} .dock[data-open]{transform:translateY(0)} .dock .inner{max-width:var(--site);margin:0 auto;padding:11px var(--gutter); display:flex;align-items:center;gap:var(--sp-4)} .dock .play{width:44px;height:44px} .dock .play svg{width:16px;height:16px} .transport{display:flex;align-items:center;gap:10px;flex:none} .iconbtn{background:transparent;border:0;color:var(--c-on-dark-2);cursor:pointer;padding:6px; display:grid;place-items:center;flex:none;font-family:var(--f-sans);font-size:11.5px;font-weight:var(--fw-bold)} .iconbtn:hover{color:var(--c-on-dark)} .iconbtn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .speed{min-width:38px;border:1px solid rgba(255,241,229,.3);padding:5px 7px;color:var(--c-on-dark)} .dock .now{min-width:0;flex:none;max-width:280px} .dock .now .k{font-family:var(--f-sans);font-size:var(--fs-2xs);letter-spacing:.18em; text-transform:uppercase;color:var(--c-accent-on-dark);font-weight:var(--fw-bold)} .dock .now .t{font-size:16.5px;font-weight:var(--fw-medium);white-space:nowrap;overflow:hidden; text-overflow:ellipsis;margin-top:3px} .dock .scrub{flex:1;min-width:70px} .dock .close{background:transparent;border:0;color:var(--c-on-dark-2);cursor:pointer; font-size:21px;line-height:1;padding:5px;flex:none} .dock .close:hover{color:var(--c-on-dark)} /* ===== RESPONSIVE ======================================================== */ @media (max-width:1180px){ .dock .links{display:none} } @media (max-width:1080px){ .strands{grid-template-columns:1fr} .strand--read{border-right:0;border-bottom:var(--bd-hair)} .strand{min-height:0} .contents .wrap{grid-template-columns:1fr 1fr} .contents .stamp{border-right:0;border-bottom:var(--bd-hair);padding:12px 0; flex-direction:row;gap:14px;align-items:baseline} .ephero .wrap{grid-template-columns:200px 1fr;gap:var(--sp-6)} .row{grid-template-columns:92px 1fr} .row .tail{grid-column:2;flex-direction:row;align-items:center;justify-content:flex-start; text-align:left;margin-top:8px} .arg ol{grid-template-columns:1fr} .leadrow{grid-template-columns:1fr;gap:20px} .showhead .wrap{grid-template-columns:150px 1fr;gap:26px} .site-footer .top{grid-template-columns:1fr 1fr} .kg-width-wide,.kg-gallery-container{margin-left:0;transform:none;max-width:100%} } @media (max-width:760px){ .mast-main{padding:18px 0 14px} .mast-actions{width:100%;justify-content:flex-start} .mast-actions .btn{flex:1;justify-content:center} .strapline{letter-spacing:.18em;font-size:9.5px} } @media (max-width:700px){ /* The double-rule broadsheet mark works at full desktop width; on a narrow phone canvas the same visual weight reads as disproportionately heavy relative to everything else on screen. One thinner line instead. */ .broadrule{height:2px;border-top:1px solid var(--c-dark);border-bottom:0} .strand{padding:var(--sp-6) 22px} .contents .wrap{grid-template-columns:1fr} .contents .item{border-right:0;border-bottom:var(--bd-hair)} /* The stacked mobile layout above is roughly four times the height of the desktop row, and the whole masthead — including this strip — is one sticky unit. Left as-is, that tall stack stays pinned for the entire scroll, leaving almost no reading area. Desktop already collapses the wordmark and rule past a scroll threshold; this extends the same collapse to the contents strip specifically on mobile, so scrolling leaves only the compact nav bar pinned. */ body[data-sticky="home"].is-scrolled .contents{display:none} .gh-content p,.gh-content li{font-size:18px} .adjacent .inner{grid-template-columns:1fr} .adjacent a.is-next{text-align:left;align-items:flex-start} /* filed/crumb-home are dropped for space, which leaves crumb-title as the only thing the breadcrumb can ever show on mobile — but it defaulted to hidden until scroll, same as desktop, so the bar was genuinely empty at rest rather than just quieter. Shown immediately here instead, since mobile has nothing else to fall back on. */ .artcrumb .filed,.artcrumb .crumb-home{display:none !important} .artcrumb .crumb-title{display:block !important} .ephero .wrap{grid-template-columns:1fr;gap:22px} .ephero .portrait{width:160px} .row{grid-template-columns:1fr;gap:6px} .row .date{order:-1} .eprow{grid-template-columns:72px 1fr;gap:16px} .eprow .tail{grid-column:2;flex-direction:row;align-items:center} .showhead .wrap,.authorhead .wrap{grid-template-columns:1fr} .showhead .cover,.authorhead .portrait{width:130px} .guestblk .inner{grid-template-columns:1fr} .guestblk .portrait{width:96px} .site-footer .top{grid-template-columns:1fr} .dock .scrub{display:none} .dock .now{max-width:none;flex:1} body[data-dropcap="true"] .article .gh-content > p:first-of-type::first-letter{font-size:60px} } @media (max-width:460px){ .dock .speed{display:none} } @media (prefers-reduced-motion:reduce){ *{transition:none !important;animation:none !important} } @media print{ .masthead,.dock,.capture,.related,.site-footer,.audiostrip,.audiocta,.gate{display:none} body{background:#fff;color:#000} .gh-content p{font-size:11pt} } /* ===== CARDS NOT USED ON THIS SITE ======================================= Declared so Ghost's validator is satisfied and so that a card pasted by accident degrades to something plain rather than something broken. */ .kg-product-card,.kg-nft-card{border:1px solid var(--c-rule-strong);background:var(--c-paper-2)} .kg-product-card-container,.kg-nft-card-container{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-5)} .kg-product-card-title,.kg-nft-title{font-family:var(--f-serif);font-size:var(--fs-2xl);font-weight:var(--fw-medium)} .kg-product-card-title-container{display:flex;align-items:baseline;gap:var(--sp-2)} .kg-product-card-description,.kg-nft-description{font-size:var(--fs-md);color:var(--c-ink-2)} .kg-product-card-image,.kg-nft-image{width:100%;height:auto} .kg-product-card-rating{display:flex;gap:2px;color:var(--c-rule-strong)} .kg-product-card-rating-active{color:var(--c-accent)} .kg-product-card-rating-star{width:16px;height:16px} .kg-product-card-button,.kg-product-card-btn-accent{font-family:var(--f-sans);font-size:12.5px; font-weight:var(--fw-semi);padding:9px 16px;background:var(--c-accent);color:#fff;display:inline-block} .kg-nft-header{display:flex;justify-content:space-between;gap:var(--sp-3)} .kg-nft-metadata{font-family:var(--f-sans);font-size:var(--fs-sm);color:var(--c-ink-muted)} .kg-nft-creator{font-family:var(--f-sans);font-size:var(--fs-sm);color:var(--c-ink-2)} .kg-nft-opensea-logo{width:20px;height:20px;opacity:.6} /* ===== 13. FIXES & ADDITIONS ============================================= */ /* The Koenig audio card is hoisted into the strip. Ghost's own card CSS loads from {{ghost_head}} after this file, so the override needs the extra weight. */ .gh-content .kg-audio-card{display:none !important} html.no-js .gh-content .kg-audio-card{display:block !important} /* whole-row targets: the title anchor is stretched over the row */ .row,.eprow{position:relative} .row__body{min-width:0} .row__link::after{content:"";position:absolute;inset:0;z-index:1} .row .taglist,.eprow .taglist,.row .tail,.eprow .tail{position:relative;z-index:2} /* tag lists */ .taglist{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-2)} .taglist a{font-family:var(--f-sans);font-size:var(--fs-xs);font-weight:var(--fw-semi); letter-spacing:.06em;text-transform:uppercase;color:var(--c-ink-muted); border:1px solid var(--c-rule);padding:3px 8px} .taglist a:hover{color:var(--c-accent-ink);border-color:var(--c-accent)} .taglist--head{margin-top:var(--sp-3)} .posttags{max-width:var(--measure);margin:var(--sp-6) auto 0;padding-top:var(--sp-4);border-top:var(--bd-hair)} .posttags .eyebrow{display:block;margin-bottom:var(--sp-2)} a.cat:hover,a.eyebrow:hover{color:var(--c-accent);text-decoration:underline;text-underline-offset:3px} /* comments */ .comments{max-width:var(--measure);margin:var(--sp-8) auto 0;padding:var(--sp-6) var(--gutter) 0; border-top:var(--bd-strong)} .comments .col{padding:0} /* footer policy strip */ .footer-policies{padding:var(--sp-4) 0 0;margin-top:var(--sp-4)} .footer-policies ul{list-style:none;display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5);padding:0; font-family:var(--f-sans);font-size:var(--fs-sm);color:var(--c-ink-muted)} .footer-policies a:hover{color:var(--c-accent-ink)} @media (max-width:900px){ .nav-aside{top:auto;bottom:0;transform:none;left:0;right:0;flex-direction:column;align-items:flex-start} .nav-aside__tab{writing-mode:horizontal-tb;padding:8px 14px;border-radius:3px 3px 0 0; margin-left:var(--gutter);order:2} .nav-aside__panel{order:1;width:100%;max-width:none;max-height:0;transition:max-height .22s ease,padding .22s ease} .nav-aside[data-open] .nav-aside__panel{max-height:320px;padding:var(--sp-4) var(--gutter)} body.has-dock .nav-aside{display:none} } @media (max-width:700px){ .row .tail,.eprow .tail{margin-top:var(--sp-2)} } /* ===== 14. LEFT DRAWER =================================================== */ .drawer[hidden]{display:none} .drawer{position:fixed;inset:0;z-index:70} .drawer__scrim{position:absolute;inset:0;background:rgba(38,42,51,.45);opacity:0;transition:opacity .24s ease} .drawer[data-open] .drawer__scrim{opacity:1} .drawer__panel{position:absolute;left:0;top:0;bottom:0;width:min(360px,86vw); background:var(--c-paper-2);border-right:1px solid var(--c-rule); display:flex;flex-direction:column;transform:translateX(-100%); transition:transform .26s ease;overflow-y:auto} .drawer[data-open] .drawer__panel{transform:translateX(0)} .drawer__head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3); padding:var(--sp-5) var(--sp-5) var(--sp-4);border-bottom:var(--bd-hair)} .drawer__search{display:flex;align-items:center;gap:10px;background:none;border:0;cursor:pointer; font-family:var(--f-sans);font-size:var(--fs-lg);font-weight:var(--fw-semi);color:var(--c-ink);padding:0} .drawer__search svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2} .drawer__search:hover{color:var(--c-accent-ink)} .drawer__close{background:none;border:0;cursor:pointer;color:var(--c-ink-muted);padding:4px} .drawer__close svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8} .drawer__close:hover{color:var(--c-ink)} .drawer__nav ul{list-style:none;padding:0;margin:0} .drawer__nav li{border-bottom:var(--bd-hair)} .drawer__nav a{display:block;padding:15px var(--sp-5);font-family:var(--f-sans); font-size:var(--fs-lg);color:var(--c-ink)} .drawer__nav a:hover{color:var(--c-accent-ink);background:var(--c-paper)} .drawer__nav--primary{display:none} .drawer__nav--secondary a{font-size:16px} .drawer__nav li.is-child a{padding-left:calc(var(--sp-5) + 18px);font-size:15px;color:var(--c-ink-2)} .drawer__foot{margin-top:auto;padding:var(--sp-5);border-top:var(--bd-hair); display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4)} .drawer__foot-label{font-family:var(--f-sans);font-size:var(--fs-base);font-weight:var(--fw-semi)} .drawer__social{display:flex;gap:var(--sp-3)} .drawer__social a{color:var(--c-ink-2)} .drawer__social svg{width:17px;height:17px;fill:currentColor} .drawer__social a:hover{color:var(--c-accent-ink)} /* ===== 15. PRIMARY NAV DROPDOWNS ========================================= */ .nav-primary li.has-children{position:relative} .nav-primary li.has-children > a::after{content:"";display:inline-block;width:5px;height:5px; margin-left:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor; transform:translateY(-2px) rotate(45deg);opacity:.6} .nav-primary .subnav{position:absolute;top:100%;left:0;min-width:210px;background:var(--c-paper); border:1px solid var(--c-rule-strong);box-shadow:0 10px 30px rgba(38,42,51,.13); list-style:none;padding:6px 0;margin:0;display:none;z-index:55} .nav-primary li.has-children:hover > .subnav, .nav-primary li.has-children:focus-within > .subnav, .nav-primary li.has-children[data-open] > .subnav{display:block} .nav-primary .subnav li{display:block} .nav-primary .subnav a{display:block;padding:9px 16px;margin:0;border-bottom:0; font-size:13px;font-weight:var(--fw-normal);white-space:nowrap} .nav-primary .subnav a:hover{background:var(--c-paper-2);color:var(--c-accent-ink);border-bottom-color:transparent} .nav-primary li.is-child{display:none} @media (max-width:900px){ .drawer__nav--primary{display:block} } /* ===== 16. CARD OVERRIDES ================================================ Ghost injects its own card CSS from {{ghost_head}}, which loads after this file. Every rule here therefore carries two classes so it wins on specificity rather than on order. ========================================================================= */ /* Ghost's own paywall CTA — the theme supplies its own gate instead. */ .gh-post-upgrade-cta, .gh-content .gh-post-upgrade-cta{display:none !important} /* Audio cards are always hoisted into the strip or the hero. */ .gh-content .kg-card.kg-audio-card{display:none !important} html.no-js .gh-content .kg-card.kg-audio-card{display:block !important} /* ---- Callout: an admonition, ported from the Gazette treatment ---- Neutral by default; the Koenig colour picker selects an FT hue, washed to 10% behind the text with the left rule at full strength. --------------- */ .gh-content .kg-card.kg-callout-card{ background:var(--c-paper-2); color:var(--c-ink); border:1px solid var(--c-rule); border-left:3px solid var(--c-rule-strong); border-radius:0; box-shadow:none; font-family:var(--f-serif); padding:1rem 1.2rem; display:block; } .gh-content .kg-card.kg-callout-card .kg-callout-text{ font-family:var(--f-serif); font-size:var(--fs-lg); color:var(--c-ink-2); line-height:1.55; } .gh-content .kg-card.kg-callout-card .kg-callout-text strong{ color:var(--c-ink); font-weight:var(--fw-bold); } .gh-content .kg-card.kg-callout-card .kg-callout-emoji{ width:1.9em;height:1.9em;display:inline-flex;align-items:center;justify-content:center; border-radius:999px;background:color-mix(in oklab, var(--c-rule-strong) 30%, transparent); margin-right:.6rem; } .gh-content .kg-card.kg-callout-card .kg-callout-text a{color:var(--c-accent)} /* colour variants — a restrained wash, rule at full strength */ .gh-content .kg-callout-card-blue{ border-left-color:var(--c-tier-commons) !important; background:color-mix(in oklab, var(--c-tier-commons) 10%, var(--c-paper-2)) !important} .gh-content .kg-callout-card-green{ border-left-color:var(--c-accent) !important; background:color-mix(in oklab, var(--c-accent) 10%, var(--c-paper-2)) !important} .gh-content .kg-callout-card-yellow{ border-left-color:#fcd0b1 !important; background:color-mix(in oklab, #fcd0b1 10%, var(--c-paper-2)) !important} .gh-content .kg-callout-card-pink{ border-left-color:var(--c-tier-inner) !important; background:color-mix(in oklab, var(--c-tier-inner) 8%, var(--c-paper-2)) !important} .gh-content .kg-callout-card-purple{ border-left-color:var(--c-velvet) !important; background:color-mix(in oklab, var(--c-velvet) 10%, var(--c-paper-2)) !important} .gh-content .kg-callout-card-red, .gh-content .kg-callout-card-accent{ border-left-color:var(--c-tier-inner) !important; background:color-mix(in oklab, var(--c-tier-inner) 10%, var(--c-paper-2)) !important} /* slate dirties faster, so it sits lower */ .gh-content .kg-callout-card-grey, .gh-content .kg-callout-card-gray{ border-left-color:var(--c-dark) !important; background:color-mix(in oklab, var(--c-dark) 8%, var(--c-paper-2)) !important} /* white is a clean card rather than a wash, so it takes a quiet rule */ .gh-content .kg-callout-card-white{ border-left-color:var(--c-rule-strong) !important; background:var(--c-white) !important} .gh-content .kg-callout-card-blue .kg-callout-emoji{background:color-mix(in oklab, var(--c-tier-commons) 15%, transparent)} .gh-content .kg-callout-card-green .kg-callout-emoji{background:color-mix(in oklab, var(--c-accent) 15%, transparent)} .gh-content .kg-callout-card-yellow .kg-callout-emoji{background:color-mix(in oklab, #fcd0b1 22%, transparent)} .gh-content .kg-callout-card-red .kg-callout-emoji, .gh-content .kg-callout-card-pink .kg-callout-emoji, .gh-content .kg-callout-card-accent .kg-callout-emoji{background:color-mix(in oklab, var(--c-tier-inner) 15%, transparent)} .gh-content .kg-callout-card-purple .kg-callout-emoji{background:color-mix(in oklab, var(--c-velvet) 15%, transparent)} .gh-content .kg-callout-card-white .kg-callout-emoji{background:color-mix(in oklab, var(--c-rule-strong) 35%, transparent)} .gh-content .kg-callout-card-grey .kg-callout-emoji, .gh-content .kg-callout-card-gray .kg-callout-emoji{background:color-mix(in oklab, var(--c-dark) 12%, transparent)} /* In show notes the callout carries "A thought to sit with" — rules, no box. */ .notes .gh-content .kg-card.kg-callout-card{ background:transparent;border:0;border-top:var(--bd-strong);border-bottom:1px solid var(--c-dark); padding:var(--sp-5) 0;margin:var(--sp-6) 0} .notes .gh-content .kg-card.kg-callout-card .kg-callout-emoji{display:none} .notes .gh-content .kg-card.kg-callout-card .kg-callout-text{ font-family:var(--f-serif);font-size:var(--fs-3xl);line-height:1.28;letter-spacing:-.018em; color:var(--c-accent);font-weight:var(--fw-medium);text-wrap:balance} .notes .gh-content .kg-card.kg-callout-card .kg-callout-text em{ font-style:normal;display:block;font-family:var(--f-sans);font-size:var(--fs-sm); color:var(--c-ink-muted);margin-top:var(--sp-3);letter-spacing:.02em} /* ---- Toggle: the transcript ---- */ .gh-content .kg-card.kg-toggle-card{ background:transparent;border:0;border-top:var(--bd-hair);border-bottom:var(--bd-hair); border-radius:0;box-shadow:none;padding:0;margin:var(--sp-6) 0} .gh-content .kg-card.kg-toggle-card .kg-toggle-heading{ display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3); padding:var(--sp-4) 0;cursor:pointer;margin:0} .gh-content .kg-card.kg-toggle-card .kg-toggle-heading-text{ font-family:var(--f-sans);font-size:var(--fs-base);font-weight:var(--fw-semi); letter-spacing:0;margin:0;color:var(--c-ink);border:0;padding:0} .gh-content .kg-card.kg-toggle-card .kg-toggle-card-icon{ width:18px;height:18px;color:var(--c-accent);transition:transform .2s ease;flex:none; background:none;border:0;padding:0;cursor:pointer} .gh-content .kg-card.kg-toggle-card[data-kg-toggle-state="close"] .kg-toggle-content{display:none} .gh-content .kg-card.kg-toggle-card[data-kg-toggle-state="open"] .kg-toggle-card-icon{transform:rotate(180deg)} .gh-content .kg-card.kg-toggle-card .kg-toggle-content{ padding:0 0 var(--sp-5);font-size:16.5px;line-height:1.6;color:var(--c-ink-2)} .gh-content .kg-card.kg-toggle-card .kg-toggle-content p{font-size:16.5px;margin-bottom:var(--sp-4)} .gh-content .kg-card.kg-toggle-card .kg-toggle-content strong{ font-family:var(--f-sans);font-size:var(--fs-sm);font-weight:var(--fw-bold);letter-spacing:.06em; text-transform:uppercase;color:var(--c-accent);display:block;margin-bottom:var(--sp-1)} /* ---- Bookmark ---- */ .gh-content .kg-card.kg-bookmark-card .kg-bookmark-container{border-radius:0;box-shadow:none} /* ===== 17. PLAYER, NAV AND FOOTER CORRECTIONS ============================ */ /* the play control no longer scales — it was jumping the layout on hover */ .play{transition:background .15s ease,color .15s ease} .play:hover{transform:none;background:var(--c-accent);color:#fff} .bigplayer,.bigplayer .pl-row{background:transparent} /* volume: slider on desktop, mute alone on small screens */ .vol{display:flex;align-items:center;flex:none;position:relative} .vol .slider{width:0;opacity:0;overflow:hidden; transition:width .18s ease,opacity .18s ease,margin .18s ease} .vol:hover .slider,.vol:focus-within .slider{width:78px;opacity:1;margin-left:var(--sp-2)} .vol input[type=range]{width:78px;height:3px;-webkit-appearance:none;appearance:none; background:rgba(255,241,229,.25);outline:none;cursor:pointer} .vol input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px; border-radius:50%;background:var(--c-accent-on-dark);cursor:pointer} .vol input[type=range]::-moz-range-thumb{width:11px;height:11px;border:0;border-radius:50%; background:var(--c-accent-on-dark);cursor:pointer} .vol.is-muted .iconbtn{color:var(--c-tier-inner-on-dark)} /* drawer trigger now lives in the nav bar */ .drawer-tab{position:static;transform:none;background:transparent;color:var(--c-ink); border:1px solid var(--c-rule-strong);border-radius:0;padding:8px 11px; display:inline-flex;align-items:center;gap:8px;flex:none} .drawer-tab:hover{background:var(--c-dark);color:var(--c-paper);border-color:var(--c-dark)} .drawer-tab__bars{display:flex;flex-direction:column;gap:3px;width:14px} .drawer-tab__bars i{display:block;height:1.5px;background:currentColor} .drawer-tab__bars i:nth-child(2){width:70%} .drawer-tab__text{font-family:var(--f-sans);font-size:var(--fs-sm);font-weight:var(--fw-semi)} .nav-primary .nav-tools{display:flex;align-items:center;gap:var(--sp-3);flex:none} /* drawer link treatment, following the Gazette pattern */ .drawer__nav a{padding:16px var(--sp-5);font-size:16px;font-weight:var(--fw-normal)} .drawer__nav li.has-children > a::after{content:"";width:6px;height:6px;float:right; margin-top:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor; transform:rotate(45deg);opacity:.5} /* footer policy strip: horizontal, and reset the column direction it inherits */ .footer-policies ul{flex-direction:row} @media (max-width:900px){ .nav-primary{display:flex} .nav-primary ul{display:none} /* With the link list hidden, .nav-tools is the only flex child left — space-between would push a lone child to the start (left) instead of keeping tools where they sit on desktop (right). flex-end keeps them consistent across breakpoints. */ .nav-primary .wrap{justify-content:flex-end} body.has-dock .drawer-tab{bottom:auto} } @media (max-width:520px){ .vol .slider{display:none} .nav-search,.drawer-tab{padding:8px} } /* ===== 18. REFINEMENTS =================================================== */ /* the drawer now opens from the same side as its trigger */ .drawer__panel{left:auto;right:0;border-right:0;border-left:1px solid var(--c-rule); transform:translateX(100%)} .drawer[data-open] .drawer__panel{transform:translateX(0)} /* buttons invert consistently: filled at rest, outlined on hover */ .btn--accent:hover{background:transparent;color:var(--c-accent);border-color:var(--c-accent)} .btn--inner:hover{background:transparent;color:var(--c-tier-inner);border-color:var(--c-tier-inner)} .gate--inner .btn--inner:hover{background:transparent;color:var(--c-tier-inner-on-dark); border-color:var(--c-tier-inner-on-dark)} .capture .btn--accent:hover{background:transparent;color:var(--c-accent-on-dark); border-color:var(--c-accent-on-dark)} /* fine-print links need an affordance too */ .capture .fine a,.gate .fine a{text-decoration:none; background-image:linear-gradient(to top,currentColor 0,currentColor 100%); background-size:0 1px;background-repeat:no-repeat;background-position:0 100%; transition:background-size .2s ease} .capture .fine a:hover,.gate .fine a:hover{background-size:100% 1px} /* play controls never resize on hover, in any context */ .play,.eprow .play,.ep .play,.player .play,.bigplayer .play,.audiostrip .play{ transform:none !important;aspect-ratio:1;flex:0 0 auto} .play:hover{background:var(--c-accent);color:#fff} .eprow .play:hover{background:var(--c-accent);color:#fff} /* listing rows: the hover bleeds to the container edge */ .row,.eprow{margin-left:calc(var(--gutter) * -1);margin-right:calc(var(--gutter) * -1); padding-left:var(--gutter);padding-right:var(--gutter)} /* the two hero strands carry a standing label */ .strand__label .eyebrow{color:var(--c-accent-ink)} .strand--listen .strand__label .eyebrow{color:var(--c-accent-on-dark)} .strand__stamp{font-family:var(--f-sans);font-size:var(--fs-xs);letter-spacing:var(--ls-eyebrow); text-transform:uppercase;font-weight:var(--fw-bold);color:var(--c-ink-muted)} .strand--listen .strand__stamp{color:var(--c-on-dark-2)} @media (max-width:1080px){ .egrid{grid-template-columns:1fr} } @media (min-width:1081px) and (max-width:1320px){ .egrid{grid-template-columns:repeat(3,1fr)} } /* ===== 19. INDEX BAND ==================================================== */ .idx-band{background:var(--c-paper-2);border-top:var(--bd-hair);border-bottom:var(--bd-hair);padding:var(--sp-7) 0} .idx-band .head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px; flex-wrap:wrap;margin-bottom:var(--sp-5)} .idx-band h2{font-size:var(--fs-4xl);font-weight:var(--fw-medium);letter-spacing:-.022em} .idx-band .sub{font-size:16px;color:var(--c-ink-2);max-width:62ch;margin-top:6px} .idx-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--c-rule)} .idx-cell{background:var(--c-paper);padding:16px 15px;display:flex;flex-direction:column;gap:6px;min-height:108px} a.idx-cell:hover{background:var(--c-paper-2)} .idx-cell .n{font-family:var(--f-sans);font-size:10px;font-weight:var(--fw-bold);letter-spacing:.16em;color:var(--c-accent)} .idx-cell h3{font-size:17px;font-weight:var(--fw-medium);line-height:1.2;letter-spacing:-.012em;flex:1} a.idx-cell:hover h3{color:var(--c-accent-ink)} .idx-cell .c{font-family:var(--f-sans);font-size:11px;color:var(--c-ink-muted)} .idx-cell--empty{background:repeating-linear-gradient(135deg,var(--c-paper-2) 0 8px,var(--c-paper) 8px 16px)} .idx-cell--empty h3{color:var(--c-ink-muted)} /* ===== 20. PULL QUOTE ==================================================== Koenig's alternate blockquote is the pull quote; the callout stays an admonition. Two distinct cards, two distinct jobs. */ .gh-content .kg-blockquote-alt{ border:0;padding:0 0 0 56px;margin:var(--sp-7) 0;position:relative;text-align:left; font-size:29px;line-height:1.24;letter-spacing:-.02em;font-weight:var(--fw-medium); color:var(--c-ink);text-wrap:balance} .gh-content .kg-blockquote-alt::before{ content:"\201C";position:absolute;left:0;top:-16px;font-size:86px;line-height:1; color:var(--c-accent);opacity:.28;font-family:var(--f-serif)} .gh-content .kg-blockquote-alt cite,.gh-content .kg-blockquote-alt footer{ display:block;font-family:var(--f-sans);font-size:var(--fs-sm);font-style:normal; color:var(--c-ink-muted);margin-top:var(--sp-3);letter-spacing:.02em;font-weight:var(--fw-normal)} /* the same treatment for "a thought to sit with" in show notes */ .notes .gh-content .kg-card.kg-callout-card, .notes .gh-content .kg-card.kg-callout-card[class*="kg-callout-card-"]{ border:0 !important;padding:0 0 0 56px;margin:var(--sp-7) 0;position:relative; background:transparent !important;font-family:var(--f-serif)} .notes .gh-content .kg-card.kg-callout-card::before{ content:"\201C";position:absolute;left:0;top:-16px;font-size:86px;line-height:1; color:var(--c-accent);opacity:.28;font-family:var(--f-serif)} .notes .gh-content .kg-card.kg-callout-card .kg-callout-text{ font-size:29px;line-height:1.24;letter-spacing:-.02em;color:var(--c-ink);font-weight:var(--fw-medium)} /* ===== 21. BOOKMARK CARD ================================================= */ .gh-content .kg-card.kg-bookmark-card a.kg-bookmark-container{ display:flex;border:1px solid var(--c-rule-strong);background:var(--c-paper-2); border-radius:0;box-shadow:none;color:inherit;text-decoration:none;min-height:0} .gh-content .kg-card.kg-bookmark-card a.kg-bookmark-container:hover{border-color:var(--c-accent)} .gh-content .kg-card.kg-bookmark-card .kg-bookmark-content{ flex:1 1 auto;padding:var(--sp-5);display:flex;flex-direction:column;justify-content:center;min-width:0} .gh-content .kg-card.kg-bookmark-card .kg-bookmark-title{ font-family:var(--f-serif);font-size:var(--fs-2xl);font-weight:var(--fw-medium); letter-spacing:-.015em;line-height:var(--lh-snug);color:var(--c-ink)} .gh-content .kg-card.kg-bookmark-card .kg-bookmark-description{ font-family:var(--f-serif);font-size:var(--fs-md);color:var(--c-ink-2);line-height:1.5;margin-top:var(--sp-2); display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .gh-content .kg-card.kg-bookmark-card .kg-bookmark-metadata{ display:flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-3); font-family:var(--f-sans);font-size:var(--fs-sm);color:var(--c-ink-muted);flex-wrap:wrap} .gh-content .kg-card.kg-bookmark-card .kg-bookmark-icon{width:16px;height:16px;flex:none} .gh-content .kg-card.kg-bookmark-card .kg-bookmark-thumbnail{flex:0 0 33%;max-height:200px} .gh-content .kg-card.kg-bookmark-card .kg-bookmark-thumbnail img{width:100%;height:100%;object-fit:cover} /* Portal's floating button — the theme provides its own membership pages */ #ghost-portal-root .gh-portal-triggerbtn-wrapper, .gh-portal-triggerbtn-wrapper{display:none !important} @media (max-width:1000px){ .idx-grid{grid-template-columns:repeat(2,1fr)} } @media (max-width:560px){ .idx-grid{grid-template-columns:1fr} .gh-content .kg-blockquote-alt, .notes .gh-content .kg-card.kg-callout-card{padding-left:40px;font-size:24px} .gh-content .kg-blockquote-alt::before, .notes .gh-content .kg-card.kg-callout-card::before{font-size:64px;top:-10px} } /* ===== 22. MEMBERSHIP PAGES ============================================== */ .mpage{max-width:560px;margin:0 auto;padding:var(--sp-8) var(--gutter) 80px} .mpage--wide{max-width:960px} .mpage-body{margin-top:var(--sp-7)} .mhead{text-align:center;margin-bottom:var(--sp-6)} .mhead .eyebrow{color:var(--c-accent-ink);display:block;margin-bottom:var(--sp-3)} .mhead h1{font-size:clamp(30px,3.6vw,44px);font-weight:var(--fw-medium);letter-spacing:-.026em; line-height:1.06;text-wrap:balance} .mhead p{font-size:var(--fs-lg);line-height:1.55;color:var(--c-ink-2);margin-top:var(--sp-3)} .field{display:flex;flex-direction:column;gap:7px;margin-bottom:var(--sp-4)} .field label{font-family:var(--f-sans);font-size:11px;font-weight:var(--fw-bold);letter-spacing:.13em; text-transform:uppercase;color:var(--c-ink-muted)} .field input{font-family:var(--f-sans);font-size:15px;padding:13px 14px;border:1px solid var(--c-rule-strong); background:var(--c-paper-2);color:var(--c-ink)} .field input:focus{outline:none;border-color:var(--c-accent);background:#fff} .btn--block{width:100%;justify-content:center} .formnote{font-family:var(--f-sans);font-size:12.5px;color:var(--c-ink-muted);line-height:1.5; margin-top:var(--sp-4);text-align:center} .formnote a{color:var(--c-accent-ink);text-decoration:underline;text-underline-offset:3px} .msg{font-family:var(--f-sans);font-size:var(--fs-base);margin-top:var(--sp-3);color:var(--c-accent-ink);text-align:center} .msg.is-error{color:var(--c-tier-inner)} .rule-or{display:flex;align-items:center;gap:var(--sp-4);margin:var(--sp-6) 0; font-family:var(--f-sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--c-ink-muted)} .rule-or::before,.rule-or::after{content:"";flex:1;height:1px;background:var(--c-rule)} form.is-loading{opacity:.6;pointer-events:none} .tiers2{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--c-rule);border:1px solid var(--c-rule)} .tcard{background:var(--c-paper);padding:var(--sp-6) 28px var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-3)} .tcard--inner{background:var(--c-dark);color:var(--c-on-dark)} .tcard h2{font-size:27px;font-weight:var(--fw-medium);letter-spacing:-.018em} .tcard .price{font-family:var(--f-serif);font-size:36px;font-weight:var(--fw-medium);letter-spacing:-.025em;line-height:1} .tcard .price small{font-family:var(--f-sans);font-size:12.5px;font-weight:var(--fw-semi); color:var(--c-ink-muted);letter-spacing:0} .tcard--inner .price small{color:var(--c-on-dark-2)} .tcard .lede{font-size:var(--fs-md);color:var(--c-ink-2);line-height:1.5} .tcard--inner .lede{color:var(--c-on-dark-3)} .tcard ul{list-style:none;display:flex;flex-direction:column;gap:9px;font-family:var(--f-sans); font-size:13.5px;flex:1;margin-top:2px;padding:0} .tcard li{padding-left:18px;position:relative;line-height:1.45} .tcard li::before{content:"\2014";position:absolute;left:0;color:var(--c-accent)} .tcard--inner li::before{color:var(--c-tier-inner-on-dark)} .tcard .foot{margin-top:6px} .tcard .handoff{font-family:var(--f-sans);font-size:11.5px;color:var(--c-on-dark-2); margin-top:10px;text-align:center;line-height:1.5} .inbox{text-align:center} .inbox .mark{width:64px;height:64px;border:2px solid var(--c-accent);border-radius:50%; display:grid;place-items:center;margin:0 auto var(--sp-5);color:var(--c-accent)} .inbox .mark svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7} .inbox .addr{font-family:var(--f-sans);font-weight:var(--fw-semi);color:var(--c-ink)} .acct-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-5); flex-wrap:wrap;border-bottom:var(--bd-strong);padding-bottom:var(--sp-5)} .acct-head h1{font-size:clamp(28px,3.2vw,40px);font-weight:var(--fw-medium);letter-spacing:-.026em} .acct-head .who{font-family:var(--f-sans);font-size:13.5px;color:var(--c-ink-muted);margin-top:var(--sp-2)} .agroup{font-family:var(--f-sans);font-size:11px;font-weight:var(--fw-bold);letter-spacing:var(--ls-eyebrow); text-transform:uppercase;color:var(--c-accent-ink);margin:var(--sp-7) 0 0;padding-bottom:10px; border-bottom:var(--bd-strong)} .arow{display:grid;grid-template-columns:200px 1fr auto;gap:var(--sp-5);align-items:center; padding:var(--sp-5) 0;border-bottom:var(--bd-hair)} .arow .k{font-family:var(--f-sans);font-size:11px;font-weight:var(--fw-bold);letter-spacing:.13em; text-transform:uppercase;color:var(--c-ink-muted)} .arow .v{font-size:17px} .arow .v small{display:block;font-family:var(--f-sans);font-size:12.5px;color:var(--c-ink-muted); margin-top:5px;line-height:1.5} .arow--quiet{padding-top:var(--sp-3)} .arow--quiet .v{font-size:15px} .arow--alert{background:#fdf0f4;margin:0 calc(var(--gutter) * -1);padding-left:var(--gutter); padding-right:var(--gutter);box-shadow:inset 3px 0 0 var(--c-tier-inner)} .abtn{font-family:var(--f-sans);font-size:12px;font-weight:var(--fw-semi);color:var(--c-accent-ink); background:none;border:0;cursor:pointer;padding:0;white-space:nowrap;display:inline-block} .abtn:hover{text-decoration:underline;text-underline-offset:3px} .abtn--warn{color:var(--c-tier-inner)} .abtn--muted{color:var(--c-ink-muted)} .feedurl{font-family:var(--f-mono);font-size:13.5px;background:var(--c-paper-2);border:1px solid var(--c-rule); padding:5px 9px;display:inline-block;color:var(--c-ink-2);word-break:break-all} .toggle{position:relative;width:44px;height:24px;background:var(--c-rule-strong);border:0;cursor:pointer;flex:none} .toggle::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;background:#fff;transition:left .16s ease} .toggle[aria-pressed="true"]{background:var(--c-accent)} .toggle[aria-pressed="true"]::after{left:23px} .acct-foot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding-top:var(--sp-5)} .danger{font-family:var(--f-sans);font-size:12px;color:var(--c-ink-muted);background:none;border:0;cursor:pointer} .danger:hover{color:var(--c-tier-inner);text-decoration:underline;text-underline-offset:3px} /* inline editing */ .arow[data-editable] .inlineinput, .arow[data-editable] [data-save], .arow[data-editable] [data-cancel]{display:none} .arow[data-editable][data-editing] [data-view], .arow[data-editable][data-editing] [data-edit]{display:none} .arow[data-editable][data-editing] .inlineinput{display:block} .arow[data-editable][data-editing] [data-save], .arow[data-editable][data-editing] [data-cancel]{display:inline-block;margin-right:var(--sp-3)} .inlineinput{font-family:var(--f-sans);font-size:15px;padding:10px 12px;border:1px solid var(--c-accent); background:#fff;color:var(--c-ink);width:100%;max-width:320px} @media (max-width:760px){ .tiers2{grid-template-columns:1fr} .arow{grid-template-columns:1fr;gap:10px} .arow .actions{justify-self:start} } /* ===== 23. CORRECTIONS ==================================================== */ /* the dock must not sit over the footer; body class is restored after Turbo swaps */ body.has-dock{padding-bottom:96px} /* home: collapse the wordmark on scroll, keep the nav and the week's contents */ body[data-sticky="home"].is-scrolled .mast-main, body[data-sticky="home"].is-scrolled .broadrule{display:none} body[data-sticky="home"].is-scrolled .contents{border-top:0} body[data-sticky="home"].is-scrolled .nav-primary{border-top:0} /* --- show notes: sections marked up by JS from their headings --- */ .notes .gh-content .ns-further-reading ul li::before, .notes .gh-content .ns-the-guest ul li::before{content:none} .notes .gh-content .ns-further-reading ul li{padding-left:0;border-bottom:1px solid var(--c-rule)} .notes .gh-content .guestblk{display:grid;grid-template-columns:120px 1fr;gap:var(--sp-5); background:var(--c-paper-2);border:1px solid var(--c-rule-strong);padding:var(--sp-5);margin-top:var(--sp-4)} .notes .gh-content .guestblk .portrait{aspect-ratio:1/1;overflow:hidden;background:var(--c-rule)} .notes .gh-content .guestblk .portrait img{width:100%;height:100%;object-fit:cover} .notes .gh-content .guestblk h3{font-size:var(--fs-2xl);margin:0 0 var(--sp-2);border:0;padding:0} .notes .gh-content .guestblk p{font-size:var(--fs-md);line-height:1.55;color:var(--c-ink-2);margin-bottom:var(--sp-2)} .notes .gh-content .guestblk .glinks{display:flex;gap:var(--sp-4);margin-top:var(--sp-3); font-family:var(--f-sans);font-size:12.5px;font-weight:var(--fw-semi)} .notes .gh-content .guestblk .glinks a{color:var(--c-accent)} /* --- written companion: the bookmark, restyled for episodes only --- */ .notes .gh-content .kg-card.kg-bookmark-card{ border-top:var(--bd-accent);padding-top:var(--sp-5);margin-top:var(--sp-7)} .notes .gh-content .kg-card.kg-bookmark-card::before{ content:"The written companion";display:block;font-family:var(--f-sans);font-size:var(--fs-xs); font-weight:var(--fw-bold);letter-spacing:var(--ls-eyebrow);text-transform:uppercase; color:var(--c-accent-ink);margin-bottom:var(--sp-3)} .notes .gh-content .kg-card.kg-bookmark-card a.kg-bookmark-container{ border:0;background:transparent;display:block} .notes .gh-content .kg-card.kg-bookmark-card a.kg-bookmark-container:hover{border:0} .notes .gh-content .kg-card.kg-bookmark-card .kg-bookmark-content{padding:0} .notes .gh-content .kg-card.kg-bookmark-card .kg-bookmark-title{ font-size:var(--fs-3xl);letter-spacing:-.018em;margin-bottom:10px} .notes .gh-content .kg-card.kg-bookmark-card a.kg-bookmark-container:hover .kg-bookmark-title{color:var(--c-accent)} .notes .gh-content .kg-card.kg-bookmark-card .kg-bookmark-description{ font-size:var(--fs-lg);color:var(--c-ink-2);-webkit-line-clamp:3;margin-top:0} .notes .gh-content .kg-card.kg-bookmark-card .kg-bookmark-metadata, .notes .gh-content .kg-card.kg-bookmark-card .kg-bookmark-thumbnail{display:none} .notes .gh-content .kg-card.kg-bookmark-card .kg-bookmark-content::after{ content:"Read the essay \2192";display:inline-block;margin-top:var(--sp-4); font-family:var(--f-sans);font-size:12.5px;font-weight:var(--fw-semi); padding:9px 16px;border:1px solid var(--c-dark);color:var(--c-ink)} .notes .gh-content .kg-card.kg-bookmark-card a.kg-bookmark-container:hover .kg-bookmark-content::after{ background:var(--c-dark);color:var(--c-paper)} /* ===== 24. THIS WEEK — tab on a rule ===================================== */ .strand__label{display:flex;align-items:center;gap:14px;flex-wrap:wrap; padding-bottom:12px;border-bottom:2px solid var(--c-accent);margin-bottom:var(--sp-2)} .strand__label .t{font-family:var(--f-sans);font-size:11px;letter-spacing:var(--ls-eyebrow); text-transform:uppercase;font-weight:var(--fw-bold);color:var(--c-accent-ink); background:var(--c-paper-2);border:1px solid var(--c-accent);padding:5px 11px} .strand__label .stamp{font-family:var(--f-sans);font-size:var(--fs-sm);color:var(--c-ink-muted);margin-left:auto} .strand--listen .strand__label{border-bottom-color:var(--c-accent-on-dark)} .strand--listen .strand__label .t{color:var(--c-dark);background:var(--c-accent-on-dark); border-color:var(--c-accent-on-dark)} .strand--listen .strand__label .stamp{color:var(--c-on-dark-2)} .strand__cat{display:block;font-family:var(--f-sans);font-size:10.5px;font-weight:var(--fw-bold); letter-spacing:.13em;text-transform:uppercase;color:var(--c-accent-ink);margin-top:var(--sp-3)} .strand__cat:hover{color:var(--c-accent);text-decoration:underline;text-underline-offset:3px} .strand--read .body{margin-top:var(--sp-4)} /* ===== 25. CORRECTIONS ==================================================== */ /* hover belongs to the control, not the panel around it */ .strand--listen .player .play{background:var(--c-paper);color:var(--c-dark)} .strand--listen .player .play:hover{background:var(--c-accent-on-dark);color:var(--c-dark)} .ep .ctl .play:hover{background:var(--c-accent-on-dark);color:var(--c-dark)} /* the episode index navigates rather than plays, so it shows a chevron */ .eprow .go{width:40px;height:40px;border:1px solid var(--c-rule-strong);display:grid;place-items:center; color:var(--c-ink-muted);flex:none} .eprow .go svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2; stroke-linecap:round;stroke-linejoin:round} .eprow:hover .go{border-color:var(--c-accent);color:var(--c-accent)} /* prose beneath a page heading on the routed pages */ .pagehead-body{max-width:66ch;margin-top:var(--sp-5)} .pagehead-body p{font-size:var(--fs-lg);line-height:1.6;color:var(--c-ink-2);margin-bottom:var(--sp-4)} /* ===== 26. FURTHER CORRECTIONS =========================================== */ /* the player's inner row is not a listing row and must not inherit its hover, grid or negative margins */ .player .pl-row,.bigplayer .pl-row{display:flex;align-items:center;gap:var(--sp-4); background:transparent;margin:0;padding:0;border:0} .player .pl-row:hover,.bigplayer .pl-row:hover{background:transparent} .eprow .play{background:var(--c-dark);color:var(--c-paper);border:0;border-radius:50%} .eprow .play:hover{background:var(--c-accent);color:#fff} .eprow .play svg{width:13px;height:13px} /* ===== 27. SHARE ========================================================== Two layouts, one markup. Above 1160px there is real margin to the left of the 680px measure once .article/.notes are given a wider box of their own (their inner .col stays 680px and centres identically, so body text never shifts) — the rail sits in that reserved space. Below 1160px there is no such margin, so the same three buttons collapse to a fixed bottom-right cluster instead. */ .share-rail{display:flex;gap:8px;z-index:20;position:fixed;right:20px;bottom:20px;flex-direction:row} .share-rail__btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--c-rule-strong); background:var(--c-paper);color:var(--c-ink-muted);display:flex;align-items:center;justify-content:center; cursor:pointer} .share-rail__btn:hover{border-color:var(--c-accent);color:var(--c-accent);background:var(--c-paper-2)} .share-rail__btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8; stroke-linecap:round;stroke-linejoin:round} .share-rail__btn[data-copied]{border-color:var(--c-accent);color:var(--c-accent);background:var(--c-paper-2)} .share-rail__btn[data-copied] svg{display:none} .share-rail__btn[data-copied]::after{ content:"";width:15px;height:15px; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; } /* on the collapsed mobile/tablet cluster, "Copied" also appears as a label since the button sits among others rather than alone in the margin */ @media (max-width:1159px){ .share-rail__btn{position:relative} .share-rail__btn[data-copied]::before{ content:"Copied";position:absolute;bottom:100%;left:50%;transform:translateX(-50%); margin-bottom:8px;background:var(--c-dark);color:var(--c-on-dark); font-family:var(--f-sans);font-size:11px;font-weight:var(--fw-semi); padding:4px 9px;white-space:nowrap;border-radius:3px} } @media (min-width:1160px){ .article,.notes{max-width:calc(var(--measure) + (var(--gutter) * 2) + 120px);margin:0 auto;position:relative} /* Explicitly clear right/bottom from the base rule — leaving them set meant an absolutely positioned box with all four edges pinned, which stretches to fill the span between them rather than sizing to its content. That silently expanded the rail into an invisible box covering most of .article, sitting above the content in stacking order, and blocking every click inside it. */ .share-rail{position:absolute;left:0;top:22px;right:auto;bottom:auto; width:auto;height:auto;flex-direction:column} } @media (max-width:1159px){ .share-rail{position:fixed;right:20px;bottom:20px;flex-direction:row; box-shadow:0 8px 24px rgba(38,42,51,.16);background:var(--c-paper);padding:6px;border-radius:26px; transition:bottom .2s ease} .share-rail__btn{border:0} body.has-dock .share-rail{bottom:100px} } /* ===== 28. INLINE TRANSPORT (home hero, episode hero) ==================== */ /* These carry the same control set as the dock: back-15, play, speed, scrub, volume. Heavier than the dock's single row, so they shed controls sooner. */ .player .transport,.bigplayer .transport{display:flex;align-items:center;gap:8px;flex:none} .player .vol,.bigplayer .vol{flex:none} @media (max-width:1300px){ .player .vol .slider,.bigplayer .vol .slider{display:none} } @media (max-width:640px){ .player .transport [data-transport-back], .bigplayer .transport [data-transport-back]{display:none} } /* ===== 29. TOPICS PAGE ===================================================== No new rules — page-topics.hbs reuses .serieswrap / .hd / .ladder / .rung from the series page verbatim, so the two pages stay visually consistent by construction rather than by two sets of CSS being kept in sync. */ /* ===== 30. OPINION PILL ================================================== Solid Oxford fill — deliberately unlike the outlined tier chip, so the two read as different kinds of thing at a glance, never as variants of the same badge. */ .pill--opinion{font-family:var(--f-sans);font-size:9.5px;font-weight:var(--fw-bold); letter-spacing:.1em;text-transform:uppercase;background:var(--c-tier-commons);color:#fff; padding:3px 8px;display:inline-block;line-height:1.3;vertical-align:middle} /* card / row / arthead wrappers introduced to hold the pill beside the tag */ .card .tagrow{display:flex;align-items:center;gap:8px;margin-bottom:8px} .strand__catrow{display:flex;align-items:center;gap:8px;margin-top:var(--sp-3)} .row__link + .pill--opinion{margin-left:12px;vertical-align:2px} .kicker .pill--opinion{margin-left:2px}