/*
Theme Name: Gareth Puckey 2
Theme URI: https://garethpuckey.co.uk
Author: Gareth Puckey
Description: Graphite, coat yellow and Hanken Grotesk. Topic pages built as modules, journal with topic filter, his own photography.
Version: 2.3.12
Requires at least: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gareth-puckey
*/
/* Gareth Puckey: graphite, coat yellow, Hanken Grotesk */
:root{
  --bg:#18191b;--surface:#222427;--s2:#2c2f33;--ink:#eff0f1;--muted:#a7a9ae;--accent:#f2b705;--accent-hover:#ffc928;--accent-ink:#18191b;
  --m:clamp(16px,2.8vw,40px);--col:24px;--gap:clamp(88px,11vw,160px);
  --step-small:.875rem;
  --step-body:clamp(1.0625rem,1rem + .25vw,1.1875rem);
  --step-lead:clamp(1.25rem,1.1rem + .7vw,1.625rem);
  --step-head:clamp(2rem,1.4rem + 1.9vw,3rem);
  --step-display:clamp(3.25rem,1rem + 7.4vw,8.25rem);
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:var(--step-body);line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body::before{content:"";display:block;height:6px;background:var(--accent)}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:.07em}
h1,h2,h3{font-weight:500;letter-spacing:-.04em;line-height:.95;text-wrap:balance}
h3{letter-spacing:-.02em;line-height:1.15}
p,li,dd{text-wrap:pretty}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
::selection{background:var(--accent);color:var(--accent-ink)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:var(--m);top:-60px;z-index:100;background:var(--accent);color:var(--accent-ink);padding:10px 16px;font-weight:600}
.skip:focus{top:12px}
.wrap{padding-left:var(--m);padding-right:var(--m)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col)}
.muted{color:var(--muted)}

.btn{display:inline-flex;align-items:center;min-height:48px;padding:0 24px;border-radius:2px;background:var(--accent);color:var(--accent-ink);font-weight:600;text-decoration:none;transition:background-color .18s ease,transform .14s var(--ease)}
.btn:active{transform:scale(.97)}
button{font:inherit}
button.btn{border:0;cursor:pointer}
.arrow{font-weight:500;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px}
@media (hover:hover){.btn:hover{background:var(--accent-hover)}.arrow:hover{color:var(--accent)}}

/* site header */
.site-head{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:clamp(16px,2.4vw,40px);padding:12px var(--m);background:var(--bg);transition:transform .35s var(--ease),background-color .25s ease}
.site-head.is-compact,.site-head.panel-open{background:var(--surface)}
.site-head .word{display:flex;color:var(--ink);text-decoration:none;margin-right:auto;padding:10px 0}
.mark{display:block;width:44px;height:30px}
.mark path{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.mark circle{fill:var(--accent)} /* the ridge and the yellow coat on top */
.primary .links{display:flex;align-items:center;gap:4px;list-style:none;padding:0}
.primary a,.topics-btn{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 14px;font:inherit;font-weight:500;color:var(--ink);text-decoration:none;background:none;border:0;cursor:pointer}
.primary a::after,.topics-btn::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:left center;transition:transform .35s var(--ease)}
.primary a[aria-current]::after,.topics-btn[aria-expanded="true"]::after{transform:scaleX(1)}
.topics-btn svg{width:11px;height:11px;transition:transform .35s var(--ease)}
.topics-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.head-cta{min-height:44px;padding:0 20px;background:var(--s2);color:var(--ink)}
.menu-btn{display:none;align-items:center;gap:10px;min-height:44px;padding:0 4px;font:inherit;font-weight:600;color:var(--ink);background:none;border:0;cursor:pointer}
.progress{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:left center}
@media (hover:hover){.primary a:hover::after,.topics-btn:hover::after{transform:scaleX(1)}.head-cta:hover{background:var(--accent);color:var(--accent-ink)}}

/* topics panel (desktop) */
.topics-panel{position:absolute;left:0;right:0;top:100%;background:var(--surface);padding:clamp(28px,3vw,48px) var(--m) clamp(32px,3.4vw,52px)}
.topics-panel[hidden]{display:none}
.tp-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col);align-items:start}
.tp-list{grid-column:1/9;list-style:none;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:4px var(--col);margin:0 -20px}
.tp-list a{display:grid;gap:6px;padding:16px 20px 18px;text-decoration:none;transition:background-color .2s ease}
.tp-list b{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font-size:var(--step-lead);font-weight:500;letter-spacing:-.025em;line-height:1.1;transition:color .2s ease}
.tp-list b small{font-size:var(--step-small);font-weight:500;letter-spacing:0;color:var(--muted);white-space:nowrap}
.tp-list span{color:var(--muted);line-height:1.4}
.tp-list a[aria-current]{background:var(--s2)}
.tp-feature{grid-column:9/13;display:grid;gap:14px;text-decoration:none}
.tp-feature figure{overflow:hidden;margin:0}
.tp-feature img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .6s var(--ease)}
.tp-feature .tp-title{font-size:var(--step-lead);font-weight:500;letter-spacing:-.025em;line-height:1.15;text-wrap:balance;transition:color .2s ease}
.tp-foot{grid-column:1/9;margin-top:24px}
@media (hover:hover){.tp-list a:hover{background:var(--s2)}.tp-list a:hover b{color:var(--accent)}.tp-feature:hover img{transform:scale(1.04)}.tp-feature:hover .tp-title{color:var(--accent)}}
.scrim{position:fixed;inset:0;z-index:45;background:rgba(10,11,12,.62)}
.scrim[hidden]{display:none}

/* phone menu */
.menu-sheet{position:fixed;inset:0;z-index:48;overflow-y:auto;overscroll-behavior:contain;background:var(--bg);padding:calc(var(--head-h,68px) + 28px) var(--m) 32px;display:flex;flex-direction:column;gap:44px}
.menu-sheet[hidden]{display:none}
#menu-sheet{position:fixed} /* WordPress.com sets [role=region]{position:relative} for logged-in visitors */
.ms-main{list-style:none;padding:0;display:grid;gap:2px}
.ms-main a{display:block;padding:4px 0;font-size:clamp(2.5rem,12vw,3.75rem);font-weight:500;letter-spacing:-.05em;line-height:1.02;text-decoration:none}
.ms-main a[aria-current]{color:var(--accent)}
.ms-topics .ms-label{font-size:var(--step-body);font-weight:600;letter-spacing:0;line-height:1.2;color:var(--muted);margin-bottom:8px}
.ms-topics ul{list-style:none;padding:0;display:grid}
.ms-topics a{display:grid;gap:2px;padding:12px 0;text-decoration:none}
.ms-topics li+li a{box-shadow:inset 0 2px 0 var(--surface)} /* taste-skill-ignore: solid bar, no blur */
.ms-topics b{font-size:var(--step-lead);font-weight:500;letter-spacing:-.02em;line-height:1.15}
.ms-topics span{font-size:var(--step-small);color:var(--muted)}
.ms-topics a[aria-current] b{color:var(--accent)}
.ms-foot{margin-top:auto;display:grid;gap:14px;align-items:start;justify-items:start}
.ms-foot .btn{width:100%;justify-content:center}
.ms-foot p{font-size:var(--step-small);color:var(--muted)}
.ms-foot p a{color:var(--ink)}
.menu-open .site-head{background:var(--bg);transform:none!important}

@media (max-width:960px){
  .primary,.head-cta{display:none}
  .menu-btn{display:inline-flex}
}

/* home: hero */
.hero{min-height:calc(100svh - var(--head-h,72px) - 6px);padding-left:var(--m)}
.hero-copy{grid-column:1/8;display:flex;flex-direction:column;padding:clamp(24px,6vh,72px) 24px 40px 0}
.thesis{font-size:var(--step-head);line-height:1.02;letter-spacing:-.035em;font-weight:500;max-width:24ch;margin-top:clamp(24px,4vh,40px);text-wrap:balance}
.hero h1{font-size:var(--step-display);line-height:.88;letter-spacing:-.055em}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.hero h1 .ln>span{display:block}
.lede{font-size:var(--step-body);line-height:1.5;max-width:44ch;margin-top:20px;color:var(--muted)}
.acts{display:flex;align-items:center;gap:28px;margin-top:32px;flex-wrap:wrap}
.figs{margin-top:auto;padding:48px 24px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.figs dt{font-size:var(--step-head);font-weight:500;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.figs dd{margin:8px 0 0;font-size:var(--step-small);line-height:1.35;color:var(--muted)}
.cred{margin-top:auto;padding-top:48px;font-size:var(--step-small);color:var(--muted)}
.portrait{grid-column:8/13;position:relative;margin:0;overflow:hidden}
.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%}
.portrait figcaption{position:absolute;left:20px;bottom:18px;font-size:var(--step-small);color:#fff}

/* home: topics as a poster */
.poster{padding-top:var(--gap);padding-bottom:var(--gap)}
.poster ul{list-style:none;padding:0}
.poster li a{display:flex;justify-content:space-between;align-items:baseline;gap:24px;text-decoration:none}
.poster li b{font-weight:500;font-size:clamp(2.75rem,1rem + 5.2vw,6rem);line-height:1;letter-spacing:-.05em;transition:color .2s ease} /* sized so the longest topic name holds one line on desktop */
.poster li span{font-size:var(--step-body);color:var(--muted);text-align:right;max-width:24ch;transition:color .2s ease}
@media (hover:hover){.poster li a:hover b,.poster li a:hover span{color:var(--accent)}}
.poster .after{margin-top:56px;display:flex;gap:28px;align-items:center;flex-wrap:wrap}
.poster .after p{max-width:46ch}

/* home: trust */
.trust{background:var(--surface);padding-top:var(--gap);padding-bottom:var(--gap)}
.trust h2{grid-column:1/5;font-size:var(--step-head)}
.trust .list{grid-column:6/13}
.trust .list>*+*{margin-top:1.1em}
.trust h3{font-size:var(--step-lead);margin-bottom:8px}
.trust p{color:var(--muted)}

/* home: latest writing */
.latest{padding-top:var(--gap);padding-bottom:var(--gap)}
.latest h2{grid-column:1/-1;font-size:var(--step-head);margin-bottom:48px}
.lead-post{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);column-gap:var(--col);row-gap:20px;align-items:end;text-decoration:none;background:var(--surface);padding:clamp(28px,3.4vw,56px);transition:background-color .2s ease}
.lead-post h3{grid-column:1/-1;font-size:var(--step-head);letter-spacing:-.04em;line-height:1}
.lead-post p{max-width:52ch;color:var(--muted)}
.lead-post .meta{text-align:right}
@media (hover:hover){.lead-post:hover{background:var(--s2)}.lead-post:hover h3{color:var(--accent)}}
.rows{grid-column:1/-1;list-style:none;padding:0;margin-top:8px}
.rows a{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);column-gap:var(--col);align-items:baseline;padding:24px 0;text-decoration:none}
.rows li+li a{box-shadow:inset 0 2px 0 var(--surface)} /* taste-skill-ignore: solid bar, no blur */
.rows h3{font-size:var(--step-lead);letter-spacing:-.02em;transition:color .2s ease}
.rows .meta{text-align:right}
@media (hover:hover){.rows a:hover h3{color:var(--accent)}}
.meta{font-size:var(--step-small);color:var(--muted)}
.meta b{color:var(--ink);font-weight:500}
.latest .all{grid-column:1/-1;margin-top:32px}

/* home: about teaser */
.about-teaser{padding-bottom:var(--gap)}
.about-teaser figure{grid-column:1/6;overflow:hidden}
.about-teaser figure img{width:100%;aspect-ratio:4/5;object-fit:cover}
.about-teaser .body{grid-column:7/12;align-self:center}
.about-teaser h2{font-size:var(--step-head);margin-bottom:28px}
.about-teaser .lead{font-size:var(--step-lead);line-height:1.35;margin-bottom:20px}
.about-teaser .body p+p{margin-top:16px}

/* photo strip */
.strip{padding-top:var(--gap);padding-bottom:var(--gap);background:var(--surface)}
.strip-head{margin-bottom:40px}
.strip-head p{margin-top:16px}
.strip h2{font-size:var(--step-head)}
.strip-row{display:flex;gap:clamp(16px,2vw,28px);overflow-x:auto;scrollbar-width:none;padding:0 var(--m);scroll-padding-inline:var(--m);scroll-snap-type:x proximity;cursor:grab}
.strip-row::-webkit-scrollbar{display:none}
.strip-row figure{flex:0 0 clamp(220px,22vw,340px);scroll-snap-align:start;overflow:hidden}
.strip-row img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .6s var(--ease)}
.strip-row figcaption{font-size:var(--step-small);color:var(--muted);margin-top:10px}
@media (hover:hover){.strip-row figure:hover img{transform:scale(1.04)}}

/* footer */
.site-foot{padding-top:var(--gap);padding-bottom:40px}
.foot-call{grid-column:1/8}
.foot-call h2{font-size:var(--step-head);margin-bottom:16px}
.foot-call p{max-width:44ch;margin-bottom:24px}
.foot-call .mail{font-size:var(--step-lead);font-weight:500;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;word-break:break-word}
.foot-cols{grid-column:9/13;display:grid;grid-template-columns:1fr 1fr;gap:32px;align-content:start}
.foot-cols .foot-label{font-size:var(--step-small);font-weight:500;color:var(--muted);letter-spacing:0;line-height:1.2;margin-bottom:12px}
.foot-cols ul{list-style:none;padding:0;display:grid;gap:2px}
.foot-cols li a{display:inline-block;padding:6px 0}
.foot-cols a{text-decoration:none}
.foot-cols a:hover{color:var(--accent)}
.legal{grid-column:1/-1;margin-top:var(--gap);display:flex;flex-wrap:wrap;gap:12px 28px;font-size:var(--step-small);color:var(--muted)}
.legal a,.linkbtn{color:inherit;font:inherit;background:none;border:0;padding:0;cursor:pointer;text-decoration:underline}

/* breadcrumbs */
.crumbs{font-size:var(--step-small);color:var(--muted);margin-bottom:28px}
.crumbs ol{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.crumbs li+li::before{content:"/";margin-right:8px}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--accent)}

/* topic page */
.t-hero{padding-top:clamp(40px,7vh,88px);padding-bottom:clamp(56px,9vh,112px)}
.t-hero .intro{grid-column:1/8}
.t-hero h1{font-size:var(--step-display);letter-spacing:-.055em;line-height:.9;margin-bottom:36px}
.t-hero .intro p.first{font-size:var(--step-lead);line-height:1.4;max-width:46ch}
.byline{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:32px;font-size:var(--step-small);color:var(--muted)}
.byline b{color:var(--ink);font-weight:500}
.glance{grid-column:8/13;align-self:end;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px var(--col);background:var(--surface);padding:clamp(24px,2.6vw,40px)}
.glance h2{grid-column:1/-1;font-size:var(--step-lead);letter-spacing:-.02em}
.glance dl{display:contents}
.glance dt{font-size:var(--step-head);font-weight:500;letter-spacing:-.04em;line-height:1}
.glance .mine dt{color:var(--accent)} /* yellow is kept for figures Gareth measured himself */
.glance dd{margin:6px 0 0;font-size:var(--step-small);line-height:1.4;color:var(--muted)}
.glance dd a{color:var(--muted)}
.t-nav{position:sticky;top:var(--head-h,64px);transition:top .35s var(--ease);z-index:40;background:var(--bg);box-shadow:0 2px 0 var(--surface)} /* taste-skill-ignore: solid bar, no blur */
.t-nav ul{list-style:none;padding:0;display:flex;gap:28px;overflow-x:auto;scrollbar-width:none;white-space:nowrap}
.t-nav ul::-webkit-scrollbar{display:none}
.t-nav li{white-space:nowrap} /* li carries text-wrap:pretty, which would otherwise wrap the labels */
.t-nav a{display:block;padding:14px 0;text-decoration:none;color:var(--muted);font-size:var(--step-small);font-weight:500;box-shadow:inset 0 -3px 0 transparent;transition:color .2s ease,box-shadow .2s ease} /* taste-skill-ignore: solid bar, no blur */
.t-nav a.on,.t-nav a:hover{color:var(--ink);box-shadow:inset 0 -3px 0 var(--accent)} /* taste-skill-ignore: solid bar, no blur */
.mod{padding-top:var(--gap);padding-bottom:var(--gap);scroll-margin-top:120px}
.mod>.grid>h2{grid-column:1/-1;font-size:var(--step-head);max-width:22ch;margin-bottom:clamp(40px,5vw,72px)}
.mod .prose{grid-column:1/9}
.sec-intro{grid-column:1/9;font-size:var(--step-lead);line-height:1.45;margin-bottom:clamp(40px,5vw,64px)}
.what-blocks{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:clamp(48px,5vw,72px) clamp(32px,4vw,64px);align-items:start}
.what-blocks h3{margin-top:0}
.what-blocks>.prose:has(.wp-block-table){grid-column:1/-1}
.what-blocks>.prose,.reasons .prose,.mistakes .prose{grid-column:auto;max-width:none;min-width:0}
.prose{max-width:68ch}
.prose>*+*{margin-top:1.1em}
.prose h3{font-size:var(--step-lead);margin-top:2em}
.prose h2{font-size:var(--step-head);margin-top:1.6em}
.prose a{text-decoration-color:color-mix(in srgb,var(--muted) 70%,transparent)}
.prose a:hover{color:var(--accent)}
.prose ul,.prose ol{padding-left:1.2em}
.prose li+li{margin-top:.5em}
.prose strong{font-weight:600}
.prose table{width:100%;border-collapse:collapse;font-size:var(--step-small);font-variant-numeric:tabular-nums}
.prose code{font-size:.88em;background:var(--s2);padding:.1em .35em;border-radius:2px}
.prose pre{margin:1.6em 0;padding:16px 20px;background:var(--surface);border-radius:4px;overflow-x:auto;font-size:var(--step-small);line-height:1.6}
.prose pre code{font-size:inherit;background:none;padding:0;border-radius:0}
.prose th,.prose td{text-align:left;padding:10px 12px;vertical-align:top}
.prose tr:nth-child(odd) td{background:var(--surface)}
.prose th{background:var(--s2);font-weight:600}
.view{font-size:var(--step-lead);line-height:1.4;padding:4px 0 4px 24px;box-shadow:inset 4px 0 0 var(--accent)} /* taste-skill-ignore: solid bar, no blur */
.view b{font-weight:600}
.view .view,.reasons .view .view{padding:0;box-shadow:none;font-size:inherit} /* a view paragraph inside a view callout draws one bar, not two */
.mod.alt{background:var(--surface)}
/* topic pages: tighter rhythm, one reading column for prose, edges kept on alternate sections */
.t-nav~.mod{padding-top:clamp(64px,7vw,104px);padding-bottom:clamp(64px,7vw,104px)}
.t-nav~#what .what-blocks,.t-nav~#faq .what-blocks{grid-column:1/9;grid-template-columns:minmax(0,1fr)}
.t-nav~#what .what-blocks>.prose,.t-nav~#faq .what-blocks>.prose{max-width:68ch}
.mod.alt .author{background:var(--s2)}
.mod.alt .guides li+li a{box-shadow:inset 0 2px 0 var(--bg)}
.col-main{grid-column:1/-1}
.stack>.sources,.stack>.author{grid-column:auto}
.stack{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--col);align-items:start}
.reasons{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:48px var(--col)}
.reasons>div{padding-top:20px;box-shadow:inset 0 2px 0 var(--s2)} /* taste-skill-ignore: solid bar, no blur */
.reasons h3{font-size:var(--step-lead);margin-bottom:12px}
.reasons p+p{margin-top:12px}
.reasons a{text-decoration-color:color-mix(in srgb,var(--muted) 70%,transparent)}
.reasons .view{grid-column:1/-1;box-shadow:inset 4px 0 0 var(--accent);padding-top:4px} /* taste-skill-ignore: solid bar, no blur */
.timeline{grid-column:1/-1;list-style:none;padding:0;display:grid;gap:56px}
.timeline>li{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col)}
.timeline .when{grid-column:1/3}
.after-view{grid-column:3/13;margin-top:56px}
.timeline>li>h3{grid-column:3/7}
.timeline>li>.prose{grid-column:7/13}
.timeline>li>.view-row{grid-column:3/13;font-size:var(--step-lead);line-height:1.4}
.timeline .when{color:var(--muted);font-weight:600;font-size:var(--step-small);padding-top:.35em}
.timeline h3{font-size:var(--step-lead)}
.mistakes{grid-column:1/-1;display:grid;gap:48px}
.mistakes>div{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--col)}
.mistakes>div>*:not(h3){grid-column:2}
.mistakes>.prose,.mistakes>.view{display:block}
.mistakes h3{font-size:var(--step-lead);margin-bottom:12px}
.mistakes p{color:var(--muted);max-width:68ch} /* keeps the measure readable on wide screens */
.mistakes a{color:var(--ink);text-decoration-color:color-mix(in srgb,var(--muted) 70%,transparent)}
.steps{grid-column:1/-1;list-style:none;padding:0;counter-reset:s;display:grid;grid-template-columns:1fr 1fr;gap:48px clamp(32px,4vw,64px)}
.steps>li{counter-increment:s;display:grid;grid-template-columns:clamp(64px,7vw,112px) minmax(0,1fr);column-gap:var(--col);align-items:start}
.steps>li::before{content:counter(s);font-size:var(--step-head);font-weight:500;letter-spacing:-.04em;line-height:.9;color:var(--muted)}
.steps strong{display:block;font-size:var(--step-lead);font-weight:500;letter-spacing:-.02em;margin-bottom:8px}
.steps a{text-decoration-color:color-mix(in srgb,var(--muted) 70%,transparent)}
@media (hover:hover){:is(.prose,.reasons,.mistakes,.steps) a:hover{text-decoration-color:var(--accent)}}
.guides{grid-column:1/-1;list-style:none;padding:0}
.guides a{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:24px;row-gap:6px;padding:24px 0;text-decoration:none}
.guides li+li a{box-shadow:inset 0 2px 0 var(--surface)} /* taste-skill-ignore: solid bar, no blur */
.guides h3{font-size:var(--step-lead);transition:color .2s ease}
.guides p{grid-column:1/-1;color:var(--muted);max-width:70ch}
@media (hover:hover){.guides a:hover h3{color:var(--accent)}}
.sources{grid-column:1/-1}
.sources summary{cursor:pointer;font-size:var(--step-lead);font-weight:500;list-style:none;display:flex;align-items:center;gap:14px}
.sources summary::-webkit-details-marker{display:none}
.sources summary::after{content:"+";color:var(--accent);font-size:1.2em;line-height:1}
.sources[open] summary::after{content:"\2212"}
.sources ol{margin-top:24px;padding-left:1.2em;display:grid;gap:8px;color:var(--muted);font-size:var(--step-small)}
.sources a{color:var(--ink)}
.author{background:var(--surface);padding:clamp(28px,3vw,48px);display:grid;grid-template-columns:clamp(96px,10vw,140px) minmax(0,1fr);gap:var(--col);align-items:center}
.author img{width:100%;aspect-ratio:1;object-fit:cover}
.author h2,.author h3{font-size:var(--step-lead);letter-spacing:-.02em;margin-bottom:6px}
.author p{color:var(--muted);max-width:60ch}
.author p+p{margin-top:8px}
.author a{color:var(--ink)}
.mod .author{grid-column:auto}

/* post */
.p-hero{padding-top:clamp(40px,7vh,88px);padding-bottom:clamp(40px,6vh,72px)}
.p-hero .in{grid-column:1/11}
.p-hero h1{font-size:clamp(2.25rem,1.2rem + 3.6vw,5rem);line-height:.98;letter-spacing:-.05em}
.p-hero .desc{font-size:var(--step-lead);line-height:1.4;max-width:46ch;margin-top:28px}
.p-body{padding-bottom:var(--gap)}
.p-body .prose{grid-column:1/9;max-width:none}
.p-body .prose>*{max-width:42rem}
.prose h2{line-height:1.05}
.p-body .prose h2{font-size:var(--step-lead);font-weight:600;letter-spacing:-.02em;line-height:1.2}
.p-body .prose h3{font-size:var(--step-body);font-weight:600;letter-spacing:-.01em;margin-top:1.6em}
.p-side{grid-column:10/13;align-self:start;position:sticky;top:calc(var(--head-h,64px) + 32px);display:grid;gap:20px}
.p-side h2{font-size:var(--step-lead);letter-spacing:-.02em}
.toc{list-style:none;padding:0;display:grid;gap:10px;font-size:var(--step-small)}
.toc-m{display:none}
.toc a{color:var(--muted);text-decoration:none;display:block;padding-left:14px;box-shadow:inset 3px 0 0 var(--s2);transition:color .2s ease,box-shadow .2s ease} /* taste-skill-ignore: solid bar, no blur */
.toc a:hover,.toc a.on{color:var(--ink);box-shadow:inset 3px 0 0 var(--accent)} /* taste-skill-ignore: solid bar, no blur */
.p-side .meta a{color:var(--ink)}
.takeaways{border-top:1px solid var(--s2);padding-top:20px}
.takeaways p:first-child{font-size:var(--step-lead);font-weight:500;margin-bottom:12px}
.takeaways ul{padding-left:1.2em}
/* first-hand evidence: the post's peak, in the glance panel's vocabulary */
.evidence{background:var(--surface);padding:clamp(24px,3vw,44px);margin-top:2.2em}
.evidence>*+*{margin-top:1.1em}
.p-body .prose .evidence h2{margin-top:0}
:is(.evidence,.trust) .ev-meta{font-size:var(--step-small);color:var(--muted);font-variant-numeric:tabular-nums}
:is(.evidence,.trust) .ev-figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px var(--col);margin-top:24px;margin-bottom:8px}
:is(.evidence,.trust) .ev-figs dt{font-size:var(--step-head);font-weight:500;letter-spacing:-.04em;line-height:1;color:var(--accent);font-variant-numeric:tabular-nums}
:is(.evidence,.trust) .ev-figs dd{margin:6px 0 0;font-size:var(--step-small);line-height:1.4;color:var(--muted)}
.trust .ev-figs dd a{color:var(--muted)}
.p-body .sources,.p-body .author{max-width:none!important}
.p-body .sources{margin-top:3em}
.p-body .author{margin-top:2em}
.related{background:var(--surface);padding-top:var(--gap);padding-bottom:var(--gap)}
.related h2{grid-column:1/-1;font-size:var(--step-head);margin-bottom:24px}
.related .guides{grid-column:1/-1}
.related .guides li+li a{box-shadow:inset 0 2px 0 var(--bg)} /* taste-skill-ignore: solid bar, no blur */

/* journal */
.j-hero{padding-top:clamp(40px,7vh,88px);padding-bottom:48px}
.j-hero h1{grid-column:1/-1;font-size:var(--step-display);letter-spacing:-.055em;line-height:.9;margin-bottom:28px}
.j-hero p{grid-column:1/8;font-size:var(--step-lead);line-height:1.4;max-width:44ch}
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-top:40px;grid-column:1/-1}
.filters button{font:inherit;font-size:var(--step-small);font-weight:500;color:var(--ink);background:var(--surface);border:0;border-radius:2px;min-height:44px;padding:0 18px;cursor:pointer;transition:background-color .2s ease,color .2s ease}
.filters button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.j-list{padding-bottom:var(--gap)}
.j-list .rows a{grid-template-columns:minmax(0,7fr) minmax(0,3fr)}
.j-list .rows p.ex{color:var(--muted);margin-top:8px;max-width:66ch;font-size:var(--step-body)}
.j-list .rows li[hidden]{display:none}
.j-count{grid-column:1/-1;font-size:var(--step-small);color:var(--muted);margin-bottom:8px}
.by-topic{background:var(--surface);padding-top:var(--gap);padding-bottom:var(--gap)}
.by-topic h2{grid-column:1/-1;font-size:var(--step-head);margin-bottom:48px}
.by-topic ul{grid-column:1/-1;list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--col)}
.by-topic a{display:block;height:100%;background:var(--bg);padding:clamp(24px,2.6vw,40px);text-decoration:none;transition:background-color .2s ease}
.by-topic b{display:block;font-size:var(--step-lead);font-weight:500;letter-spacing:-.02em;margin-bottom:10px;transition:color .2s ease}
.by-topic span{color:var(--muted)}
@media (hover:hover){.by-topic a:hover{background:var(--s2)}.by-topic a:hover b{color:var(--accent)}}

/* about */
.a-hero{min-height:calc(100svh - 70px);padding-left:var(--m)}
.a-hero .copy{grid-column:1/7;padding:clamp(40px,8vh,96px) 0 48px;display:flex;flex-direction:column}
.a-hero h1{font-size:var(--step-display);letter-spacing:-.055em;line-height:.88}
.a-hero .copy p{font-size:var(--step-lead);line-height:1.4;max-width:34ch;margin-top:36px}
.a-hero .copy p+p{margin-top:18px;font-size:var(--step-body);color:var(--muted);max-width:52ch}
.a-hero .figs{padding-right:0}
.a-hero figure{grid-column:8/13;position:relative;margin:0;overflow:hidden}
.a-hero figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.career ol{grid-column:1/-1;list-style:none;padding:0;display:grid;gap:40px}
.career li{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col);align-items:baseline}
.career .when{grid-column:1/3;color:var(--muted);font-weight:600;font-size:var(--step-small)}
.career h3{grid-column:3/8;font-size:var(--step-lead)}
.career li p{grid-column:8/13;color:var(--muted);max-width:56ch}
.cols2{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px var(--col)}
.cols2.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.cols2 h3{font-size:var(--step-lead);margin-bottom:10px}
.cols2 p{color:var(--muted)}

/* motion: hidden only when script runs */
.js [data-reveal]{opacity:0;transform:translateY(24px)}
@media (prefers-reduced-motion:reduce){.js [data-reveal]{opacity:1;transform:none}}

@media (max-width:960px){
  .hero .figs{grid-template-columns:1fr 1fr;row-gap:28px}
  .thesis{font-size:var(--step-lead);font-weight:600;letter-spacing:-.02em;line-height:1.15}
  .hero h1{margin-top:clamp(32px,6vh,64px)}
  .poster li a{flex-direction:column;gap:2px;padding:.25em 0}
  .poster li b{font-size:clamp(2.5rem,11vw,4.5rem)}
  .poster li span{text-align:left;max-width:none}
  .trust h2,.trust .list,.about-teaser figure,.about-teaser .body,.foot-call,.foot-cols{grid-column:1/-1}
  .trust h2{margin-bottom:40px}
  .trust .list{grid-column:1/-1}
  .lead-post{grid-template-columns:1fr;padding:22px}
  .lead-post .meta{text-align:left}
  .rows a,.j-list .rows a{grid-template-columns:1fr;row-gap:8px}
  .rows .meta{text-align:left}
  .about-teaser figure{margin-bottom:40px;width:80%}
  .foot-cols{margin-top:56px}
  .sec-intro,.col-main,.t-hero .intro,.glance,.mod>.grid>h2,.mod .prose,.reasons,.timeline,.mistakes,.steps,.guides,.sources,.mod .author,.related h2,.related .guides,.career ol,.cols2{grid-column:1/-1}
  .mod>.grid>h2{position:static;margin-bottom:40px}
  .reasons,.cols2,.cols2.four{grid-template-columns:1fr}
  .mistakes>div{grid-template-columns:1fr}
  .mistakes>div>*:not(h3){grid-column:1}
  .mistakes h3{margin-bottom:8px}
  .glance{grid-template-columns:1fr 1fr}
  .prose h2{font-size:var(--step-lead)}
  .lead-post h3{font-size:var(--step-lead)}
  .timeline>li,.career li{grid-template-columns:1fr}
  .after-view{grid-column:1/-1}
  .timeline .when,.timeline>li>h3,.timeline>li>.prose,.timeline>li>.view-row{grid-column:1}
  .timeline>li>h3{margin-bottom:12px}
  .what-blocks,.steps,.stack{grid-template-columns:1fr}
  .timeline .when,.career .when{padding:0 0 8px}
  .career .when,.career h3,.career li p{grid-column:1}
  .related h2{margin-bottom:24px}
  .p-hero .in,.p-body .prose{grid-column:1/-1}
  .p-side{display:none}
  .glance{margin-top:48px}
  .a-hero{padding-right:var(--m)}
  .a-hero .copy,.a-hero figure{grid-column:1/-1}
  .a-hero .copy{padding-top:28px}
  .a-hero figure{aspect-ratio:16/10;margin:0 calc(var(--m) * -1);order:-1} /* phones open on the photograph */
  .j-hero p{grid-column:1/-1}
}
@media (max-width:760px){
  .by-topic ul{grid-template-columns:1fr}
  .hero{padding-right:var(--m)}
  .hero-copy,.portrait{grid-column:1/-1}
  .hero-copy{padding-right:0;padding-top:0}
  .hero h1{margin-top:28px}
  .figs{grid-template-columns:1fr 1fr;padding-right:0;margin-top:48px;padding-top:0}
  .cred{padding-top:40px}
  .portrait{aspect-ratio:16/10;margin:0 calc(var(--m) * -1);order:-1} /* phones open on the photograph */
  .filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:calc(var(--m) * -1);padding-right:var(--m)}
  .filters::-webkit-scrollbar{display:none}
  .filters button{flex:0 0 auto}
}
@media (max-width:560px){
  .glance{grid-template-columns:1fr}
  .author{grid-template-columns:1fr}
  .author img{width:96px}
}

body.head-hidden .t-nav{top:0}

/* WordPress pieces */
.admin-bar .site-head{top:var(--wp-admin--admin-bar--height,0px)}
.admin-bar .t-nav{top:calc(var(--head-h,64px) + var(--wp-admin--admin-bar--height,0px))}
.admin-bar.head-hidden .t-nav{top:var(--wp-admin--admin-bar--height,0px)}
.rank-math-breadcrumb{font-size:var(--step-small);color:var(--muted);margin-bottom:28px}
.rank-math-breadcrumb p,.a-hero .copy .rank-math-breadcrumb p,.j-hero .rank-math-breadcrumb p{font-size:var(--step-small)!important;line-height:1.5!important;margin:0!important;max-width:none!important;color:var(--muted)!important}
.rank-math-breadcrumb a{text-decoration:none}
.rank-math-breadcrumb a:hover{color:var(--accent)}
.rank-math-breadcrumb .separator{font-size:0}
.rank-math-breadcrumb .separator::before{content:"/";font-size:var(--step-small);margin:0 8px}
.prose figure{margin:0}
.prose .wp-block-table{overflow-x:auto;margin:1.6em 0}
.prose .wp-block-table td,.prose .wp-block-table th{border:0} /* WordPress core draws a bright 1px grid */
/* a table wider than its column says so: the cut edge fades and the first column stays put */
.prose .wp-block-table.scrolls:not(.at-end){-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 56px),transparent)}
.prose .wp-block-table.scrolls figcaption{padding-right:56px}
.prose .wp-block-table.scrolls tr>:first-child{position:sticky;left:0;z-index:1;box-shadow:inset -1px 0 0 var(--s2)}
.prose .wp-block-table.scrolls tr>td:first-child{background:var(--bg)}
.prose .wp-block-table.scrolls tr:nth-child(odd)>td:first-child{background:var(--surface)}
.wp-block-table figcaption{margin-top:10px;font-size:var(--step-small);color:var(--muted)}
/* diagrams keep their drawn size and scroll sideways on phones, like wide tables */
.prose .diagram{margin:1.6em 0}
.diagram-scroll{overflow-x:auto}
.diagram svg{display:block;width:100%;min-width:672px;height:auto}
.diagram-scroll.scrolls:not(.at-end),.prose pre.scrolls:not(.at-end){-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 56px),transparent)}
.diagram figcaption{margin-top:10px;font-size:var(--step-small);color:var(--muted)}
.prose img{height:auto}
.made{font-size:var(--step-small);color:var(--muted)}
.page-body{padding-bottom:var(--gap)}
.page-body .prose{grid-column:1/9}
.empty{color:var(--muted)}
.navigation.pagination{grid-column:1/-1;margin-top:40px}
.nav-links{display:flex;gap:16px;flex-wrap:wrap}
.nav-links .page-numbers{text-decoration:none;padding:8px 4px}
.nav-links .current{color:var(--accent)}

/* cookie consent */
.consent{position:fixed;left:var(--m);right:var(--m);bottom:16px;z-index:60;max-width:920px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 24px;border-radius:2px;background:var(--ink);color:var(--bg)}
.consent[hidden]{display:none}
#consent{position:fixed} /* beats WordPress.com's logged-in [role="region"]{position:relative} */
.consent p{font-size:16px;line-height:1.45;max-width:56ch}
.consent a{color:inherit}
.consent-acts{display:flex;gap:12px;flex:none}
.consent .btn-d{background:var(--bg);color:var(--ink)}
@media (hover:hover){.consent .btn-d:hover{background:var(--surface)}}
@media (max-width:640px){.consent{flex-direction:column;align-items:stretch;bottom:12px}.consent-acts>.btn{flex:1;justify-content:center}}
@media (max-width:960px){.page-body .prose{grid-column:1/-1}}

blockquote.takeaways{margin:0}
.takeaways ul{margin:0}
.admin-bar .menu-sheet{padding-top:calc(var(--head-h,68px) + var(--wp-admin--admin-bar--height,0px) + 28px)}
.admin-bar .scrim{top:var(--wp-admin--admin-bar--height,0px)}

.takeaways h2,.p-body .prose .takeaways h2{font-size:var(--step-lead);font-weight:500;letter-spacing:-.02em;margin:0 0 12px}

/* posts on phones and tablets: the contents list folds in at the top of the article */
@media (max-width:960px){
  .toc-m{display:block;background:var(--surface);padding:14px 18px}
  .toc-m summary{font-size:var(--step-small);font-weight:600;cursor:pointer;padding:6px 0;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:14px}
  .toc-m summary::-webkit-details-marker{display:none}
  .toc-m summary::after{content:"+";color:var(--accent);font-size:1.4em;line-height:1}
  .toc-m[open] summary::after{content:"\2212"}
  .toc-m .toc{margin-top:10px;padding-bottom:6px}
}