/* Kyle Thornton — blog pages. Tokens mirror index.html. */
:root{--code-bg:#14130f;--code-fg:#f0ede5;--paper:#f0ede5;--paper-2:#e7e3d7;--ink:#14130f;--ink-2:#2a2823;--muted:#6a6760;--hairline:#1a1a18;--hairline-soft:rgba(20,19,15,0.12);--accent:#d94814;--accent-ink:#f0ede5;--field:#f7f5ee;--maxw:1600px;--gutter:clamp(20px,4vw,72px);--measure:720px;--content:calc(var(--maxw) - 2 * var(--gutter))}
body.dark{--paper:#0e0e0d;--paper-2:#1a1a18;--ink:#f0ede5;--ink-2:#d8d4c8;--muted:#807d75;--hairline:rgba(240,237,229,0.18);--hairline-soft:rgba(240,237,229,0.10);--accent-ink:#0e0e0d;--field:#1a1a18}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--paper);color:var(--ink);font-family:"Inter Tight",-apple-system,system-ui,sans-serif;font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--accent);color:var(--accent-ink)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.page-pad{padding-left:var(--gutter);padding-right:var(--gutter)}

/* NAV — matches main site */
.nav{view-transition-name:site-nav;position:sticky;top:0;z-index:50;border-bottom:2px solid var(--hairline);background:color-mix(in oklab,var(--paper) 92%,transparent);backdrop-filter:saturate(140%) blur(10px);-webkit-backdrop-filter:saturate(140%) blur(10px)}
.nav-inner{max-width:var(--maxw);margin:0 auto;padding:16px var(--gutter);display:flex;justify-content:space-between;align-items:center}
.brand{view-transition-name:nav-brand;display:inline-flex;align-items:center;gap:6px;font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:22px;letter-spacing:-0.04em;white-space:nowrap;line-height:1}
.brand .star{color:var(--accent);font-size:16px;line-height:1;letter-spacing:-0.9px;display:inline-block;transform:translateY(2px)}
.brand .brand-text{display:inline-block;line-height:1}
/* Collapsed to "K T" until the page title scrolls out (see .expanded below).
   clip-path masks the text; max-width drives layout. Negative top/bottom
   insets so descenders (y, p) don't clip. */
.brand .ext{display:inline-block;max-width:0;opacity:0;vertical-align:baseline;line-height:1;clip-path:inset(-0.3em 100% -0.3em 0);transition:max-width .55s cubic-bezier(.4,0,.2,1),clip-path .55s cubic-bezier(.4,0,.2,1),opacity .35s ease .05s}
.brand .sp{display:inline-block;width:0;vertical-align:baseline;line-height:1;clip-path:inset(-0.3em 100% -0.3em 0);transition:width .55s cubic-bezier(.4,0,.2,1),clip-path .55s cubic-bezier(.4,0,.2,1)}
.brand.expanded .ext{max-width:6.5em;opacity:1;clip-path:inset(-0.3em 0 -0.3em 0)}
.brand.expanded .sp{width:0.32em;clip-path:inset(-0.3em 0 -0.3em 0)}
.nav-links{view-transition-name:nav-links;display:flex;gap:6px;flex-wrap:wrap}
.nav-links a{display:inline-flex;align-items:center;padding:7px 14px;border:1px solid var(--hairline);border-radius:999px;font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:0.06em;color:var(--ink);text-transform:uppercase;transition:background .15s ease,color .15s ease,border-color .15s ease}
.nav-links a:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.nav-links a[aria-current="page"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.theme-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:999px;border:1px solid var(--hairline);margin-left:4px;transition:background .15s ease,color .15s ease}
.theme-btn:hover{background:var(--ink);color:var(--paper)}
.theme-btn svg{width:14px;height:14px}
.menu-btn{display:none;align-items:center;justify-content:center;width:34px;height:34px;border-radius:999px;border:1px solid var(--hairline);transition:background .15s ease,color .15s ease}
.menu-btn:hover{background:var(--ink);color:var(--paper)}
.menu-btn .bars{display:inline-block;width:14px;height:10px;position:relative}
.menu-btn .bars::before,.menu-btn .bars::after,.menu-btn .bars i{content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .25s ease,opacity .2s ease,top .25s ease}
.menu-btn .bars::before{top:0}
.menu-btn .bars i{top:4.25px}
.menu-btn .bars::after{top:8.5px}
.menu-btn[aria-expanded="true"] .bars::before{top:4.25px;transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] .bars i{opacity:0}
.menu-btn[aria-expanded="true"] .bars::after{top:4.25px;transform:rotate(-45deg)}

/* MOBILE DRAWER */
.menu-drawer{position:fixed;top:0;left:0;right:0;bottom:0;z-index:49;background:var(--paper);display:flex;flex-direction:column;padding:80px var(--gutter) 32px;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .28s ease,transform .28s ease,visibility 0s linear .28s}
.menu-drawer[data-open="true"]{opacity:1;visibility:visible;transform:translateY(0);transition:opacity .28s ease,transform .28s ease,visibility 0s linear 0s}
.menu-drawer .menu-list{display:flex;flex-direction:column;border-top:2px solid var(--hairline)}
.menu-drawer .menu-list a{display:grid;grid-template-columns:70px 1fr auto;align-items:baseline;gap:16px;padding:22px 0;border-bottom:2px solid var(--hairline);font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:clamp(28px,8vw,44px);letter-spacing:-0.035em;color:var(--ink);text-transform:uppercase;transition:color .15s ease,padding-left .25s ease}
.menu-drawer .menu-list a:hover,.menu-drawer .menu-list a:focus-visible{color:var(--accent);padding-left:8px;outline:0}
.menu-drawer .menu-list a .num{font-family:"JetBrains Mono",monospace;font-weight:500;font-size:12px;letter-spacing:0.18em;color:var(--muted);align-self:center}
.menu-drawer .menu-foot{margin-top:auto;padding-top:24px;font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);display:flex;flex-direction:column;gap:8px}
body.menu-open{overflow:hidden}
@media(max-width:960px){.nav-links a:not(.theme-btn):not(.menu-btn){display:none}.menu-btn{display:inline-flex}}

/* BACK TO TOP */
.to-top-fab{position:fixed;right:clamp(16px,3vw,32px);bottom:clamp(16px,3vw,32px);z-index:45;width:46px;height:46px;display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--hairline);border-radius:999px;background:var(--paper);color:var(--ink);opacity:0;visibility:hidden;transform:translateY(10px) scale(.9);transition:opacity .25s ease,transform .25s cubic-bezier(.34,1.3,.5,1),visibility 0s linear .25s,background .15s ease,color .15s ease,border-color .15s ease}
.to-top-fab[data-show="true"]{opacity:1;visibility:visible;transform:none;transition:opacity .25s ease,transform .25s cubic-bezier(.34,1.3,.5,1),visibility 0s linear 0s,background .15s ease,color .15s ease,border-color .15s ease}
.to-top-fab:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);transform:translateY(-3px)}
.to-top-fab svg{width:16px;height:16px}

/* BACK BUTTON */
.back-btn{display:inline-flex;align-items:center;gap:10px;font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);padding:8px 16px 8px 12px;border:1px solid var(--hairline-soft);border-radius:999px;margin-bottom:32px;transition:background .16s ease,color .16s ease,border-color .16s ease,transform .16s cubic-bezier(.4,1.3,.6,1)}
.back-btn:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);transform:translateX(-4px)}
.back-chev{width:7px;height:7px;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);display:block}

/* ARTICLE HEADER */
.wrap{max-width:var(--maxw);margin:0 auto}
.art-head{max-width:var(--measure);margin:0 auto;padding:clamp(48px,7vw,96px) 0 0}
.eyebrow{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);margin-bottom:28px;display:flex;flex-wrap:wrap;gap:10px}
.eyebrow .sep{color:var(--accent)}
.art-title{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:clamp(38px,6vw,76px);line-height:0.95;letter-spacing:-0.045em;margin:0 0 24px;text-wrap:pretty}
.art-dek{font-family:"Newsreader",Georgia,serif;font-style:italic;font-size:clamp(20px,2.4vw,28px);line-height:1.3;letter-spacing:-0.02em;color:var(--muted);margin:0 0 40px;max-width:34ch;text-wrap:pretty}
.art-rule{border:0;border-top:2px solid var(--hairline);margin:0 0 48px}
.art-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:40px}
.tag{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:0.08em;text-transform:uppercase;padding:5px 12px;border:1px solid var(--hairline-soft);border-radius:999px;color:var(--muted)}

/* ARTICLE BODY */
.art{max-width:var(--measure);margin:0 auto;padding-bottom:clamp(64px,9vw,120px);font-size:19px;line-height:1.68;color:var(--ink-2)}
.art>p{margin:0 0 26px;text-wrap:pretty}
.art>p:first-of-type::first-letter{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:3.4em;line-height:0.82;float:left;padding:0.06em 0.11em 0 0;color:var(--accent)}
.art h2{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:clamp(26px,3vw,38px);line-height:1.05;letter-spacing:-0.035em;color:var(--ink);margin:64px 0 20px}
.art h3{font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:21px;letter-spacing:-0.02em;color:var(--ink);margin:44px 0 14px}
.art a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.art a:hover{background:var(--accent);color:var(--accent-ink);text-decoration:none}
.art strong{font-weight:700;color:var(--ink)}
.art em{font-family:"Newsreader",Georgia,serif;font-style:italic}
.art ul,.art ol{margin:0 0 26px;padding-left:26px}
.art li{margin-bottom:12px;padding-left:6px}
.art ul li::marker{color:var(--accent);content:"— "}
.art ol li::marker{color:var(--accent);font-family:"JetBrains Mono",monospace;font-size:0.85em}
.art blockquote{margin:40px 0;padding:4px 0 4px 28px;border-left:3px solid var(--accent);font-family:"Newsreader",Georgia,serif;font-style:italic;font-size:25px;line-height:1.35;letter-spacing:-0.02em;color:var(--ink)}
.art blockquote p{margin:0}
.art code{font-family:"JetBrains Mono",monospace;font-size:0.86em;background:var(--paper-2);border:1px solid var(--hairline-soft);border-radius:4px;padding:2px 6px;color:var(--ink)}
.art pre{background:var(--code-bg);color:var(--code-fg);border-radius:0;border:2px solid var(--hairline);padding:24px;overflow-x:auto;margin:0 0 30px;font-size:14px;line-height:1.6}
.art pre code{background:none;border:0;padding:0;color:inherit;font-size:inherit}
.art hr{border:0;border-top:2px solid var(--hairline);margin:56px 0}
.art img{border:2px solid var(--hairline);margin:34px 0}
.art .note{border:2px solid var(--hairline);padding:22px 24px;margin:34px 0;font-size:16px;line-height:1.6;background:var(--paper-2)}

/* ARTICLE FOOTER */
/* padding-top only — a `padding` shorthand here would land after .page-pad and
   wipe out the gutter, putting the footer flush to the screen edge on mobile. */
.art-foot{border-top:2px solid var(--hairline);padding-top:48px;padding-bottom:0;margin-top:0}
.foot-inner{max-width:var(--measure);margin:0 auto;padding-bottom:clamp(56px,7vw,96px)}
/* index footer aligns to the post list, not the article measure */
.foot-inner.wide{max-width:var(--content)}
.foot-inner.wide .foot-links{margin-top:0}
.foot-eyebrow{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);margin-bottom:20px}
.next-card{display:block;border:2px solid var(--hairline);padding:28px;transition:transform .18s cubic-bezier(.4,1.3,.6,1),background .18s ease,color .18s ease}
.next-card:hover{transform:translateY(-3px);background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.next-meta{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;opacity:0.7;margin-bottom:14px}
.next-t{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:clamp(24px,3vw,34px);line-height:1.05;letter-spacing:-0.03em}
.foot-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.foot-links a{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:0.08em;text-transform:uppercase;padding:9px 16px;border:1px solid var(--hairline);border-radius:999px;transition:background .15s ease,color .15s ease,border-color .15s ease}
.foot-links a:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* INDEX PAGE */
/* --content, not --maxw: these sit inside a .page-pad <main>, so the gutter is
   already spent. index.html's .hero/.section pay it inside their own --maxw box,
   and the content columns only line up if this cap accounts for that. */
.idx-head{max-width:var(--content);margin:0 auto;padding:clamp(48px,7vw,104px) 0 clamp(36px,5vw,64px)}
.idx-title{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:clamp(56px,11vw,180px);line-height:0.85;letter-spacing:-0.055em;margin:0 0 24px}
.idx-title .dot{color:var(--accent)}
@media(prefers-reduced-motion:no-preference){
  .idx-title{animation:idx-enter .5s cubic-bezier(.2,.8,.2,1) both}
  .idx-sub{animation:idx-enter .5s cubic-bezier(.2,.8,.2,1) .07s both}
  .idx-list{animation:idx-enter .5s cubic-bezier(.2,.8,.2,1) .12s both}
}
@keyframes idx-enter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.idx-sub{font-family:"Newsreader",Georgia,serif;font-style:italic;font-size:clamp(20px,2.2vw,30px);line-height:1.25;color:var(--muted);max-width:30ch;margin:0}
.idx-list{max-width:var(--content);margin:0 auto;border-top:2px solid var(--hairline);padding-bottom:clamp(40px,5vw,72px)}
.idx-row{display:grid;grid-template-columns:88px 1fr 150px;gap:clamp(16px,3vw,48px);align-items:start;padding:34px 0;border-bottom:2px solid var(--hairline-soft);transition:padding-left .2s ease,color .18s ease}
.idx-row:hover{padding-left:10px}
.idx-row:hover .idx-t{color:var(--accent)}
.idx-n{font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:0.14em;color:var(--muted);padding-top:8px}
.idx-t{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:clamp(24px,3.4vw,44px);line-height:1.02;letter-spacing:-0.035em;margin:0 0 10px;transition:color .18s ease;text-wrap:balance}
.idx-e{font-size:16px;line-height:1.55;color:var(--muted);max-width:56ch;margin:0}
.idx-d{font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:0.08em;color:var(--muted);text-transform:uppercase;text-align:right;padding-top:8px}
@media(max-width:820px){.idx-row{grid-template-columns:1fr;gap:8px}.idx-d{text-align:left;padding-top:2px}.idx-n{padding-top:0}}

/* VIEW TRANSITIONS */
@view-transition{navigation:auto}
@media(prefers-reduced-motion:no-preference){
  /* default: title -> title. Similar sizes, so a quick confident morph. */
  ::view-transition-group(*){animation-duration:.74s;animation-timing-function:cubic-bezier(.4,.02,.16,1);z-index:20}
  ::view-transition-old(*){animation:vt-fade-out .46s cubic-bezier(.4,0,.6,1) both}
  ::view-transition-new(*){animation:vt-fade-in .44s ease .27s both}
  /* page body: understated so the title is the thing you watch */
  ::view-transition-group(root){animation-duration:.5s;z-index:0}
  ::view-transition-old(root){animation:vt-out .26s cubic-bezier(.55,0,1,.45) both}
  ::view-transition-new(root){animation:vt-in .5s cubic-bezier(.16,.84,.24,1) .1s both}
  /* nav holds still while the page changes underneath it */
  ::view-transition-group(site-nav){animation-duration:.3s;z-index:30}

  /* nav chips: the whole cluster morphs as one — width collapses, contents cross-fade */
  ::view-transition-old(site-nav),::view-transition-new(site-nav){animation:none}
  ::view-transition-group(nav-brand){animation-duration:.46s;animation-timing-function:cubic-bezier(.22,.72,.16,1);z-index:40}
  ::view-transition-old(nav-brand),::view-transition-new(nav-brand){width:100%;height:100%;object-fit:none;object-position:0 50%;overflow:visible}
  ::view-transition-old(nav-brand){animation:vt-fade-out .2s cubic-bezier(.4,0,.6,1) both}
  ::view-transition-new(nav-brand){animation:vt-fade-in .28s cubic-bezier(.4,0,.6,1) .14s both}
  ::view-transition-group(nav-links){animation-duration:.46s;animation-timing-function:cubic-bezier(.22,.72,.16,1);z-index:40}
  ::view-transition-old(nav-links),::view-transition-new(nav-links){width:100%;height:100%;object-fit:none;object-position:100% 50%;overflow:visible}
  ::view-transition-old(nav-links){animation:vt-fade-out .2s cubic-bezier(.4,0,.6,1) both}
  ::view-transition-new(nav-links){animation:vt-fade-in .28s cubic-bezier(.4,0,.6,1) .14s both}
}
@keyframes nav-chip-out{to{opacity:0;transform:translateX(10px) scale(.88)}}
@keyframes nav-chip-in{from{opacity:0;transform:translateX(-10px) scale(.88)}}

html:active-view-transition-type(back-from-words) .words-title{view-transition-name:none}
@keyframes vt-fade-out{to{opacity:0}}
@keyframes vt-fade-in{from{opacity:0}}
@keyframes vt-out{to{opacity:0;transform:translateY(-10px);filter:blur(3px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}