/* ============================================================
   Stomper Six Studio | shared blog styles
   Change the one --accent line below to recolour every blog page.
   ============================================================ */
:root{
  /* Warm house palette, aligned to s6.css (the session-document redesign,
     20 Aug 2026). Colour tokens only in that pass: layouts, radii and hovers
     stay as they were, so the blog keeps working while it waits for its own
     document-style pass. */
  --bg:#0A0908; --bg-2:#100E0D; --bg-3:#171412; --bg-card:#141110;
  --line:#292521; --line-2:#3D3833;
  /* Was #6c6c75, which failed WCAG AA at 3.44 to 3.83:1 against a 4.5:1 requirement.
     On these pages it hit the post date, the "You may also like" heading and, worst,
     "<- All posts", which is a navigation control rather than decoration.
     Must stay identical to index.html, 404.html and thankyou.html. See the long note
     on the token in index.html. */
  --fg:#F5EFDD; --fg-dim:#C4BFB5; --fg-mute:#8B877E;
  --accent:#E8B53A; --accent-ink:#0A0908; --accent-soft:rgba(232,181,58,.14);
  --font-display:'Anton',sans-serif;
  --font-body:'Hanken Grotesk',system-ui,sans-serif;
  --maxw:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --r:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--font-body);font-size:18px;line-height:1.65;overflow-x:hidden}
::selection{background:var(--accent);color:var(--accent-ink)}
a{color:inherit;text-decoration:none}
/* height:auto is REQUIRED, not cosmetic. Every img now carries width/height
   attributes so the browser can reserve the right box before the bytes arrive (that
   is the Cumulative Layout Shift fix). Those attributes act like a UA-stylesheet
   height, so without this rule they WIN wherever CSS sets a width but no height,
   and the image renders at its natural pixel height instead of the height the layout
   wanted. That is exactly what happened to .post img: a 150px gap opened under the
   third blog card. height:auto restores auto sizing, so the attributes keep giving
   the aspect ratio and CSS keeps deciding the box. */
img{display:block;max-width:100%;height:auto}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.wrap-narrow{max-width:760px;margin:0 auto;padding:0 28px}

/* film grain */
body::after{content:"";position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* header */
.site-head{position:sticky;top:0;z-index:100;background:rgba(10,9,8,.94);border-bottom:1px solid var(--line)}
.head-inner{display:flex;align-items:center;justify-content:space-between;height:74px}
.site-head .logo{display:flex;align-items:center;gap:10px}
.site-head .logo img{height:42px;width:auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
.site-head .logo-word{font-family:var(--font-display);text-transform:uppercase;font-size:18px;letter-spacing:.04em;color:var(--fg);line-height:1;white-space:nowrap}
.site-head nav{display:flex;align-items:center;gap:28px}
.site-head nav a{font-size:14px;font-weight:600;color:var(--fg-dim);letter-spacing:.02em;transition:color .2s}
.site-head nav a:hover{color:var(--fg)}
.site-head nav a.btn-primary,.site-head nav a.btn-primary:hover{color:var(--accent-ink)}
.site-head nav a.back-studio{display:inline-flex;align-items:center;gap:7px}
.site-head nav a.back-studio .ar{color:var(--accent);transition:transform .2s var(--ease)}
.site-head nav a.back-studio:hover{color:var(--fg)}
.site-head nav a.back-studio:hover .ar{transform:translateX(-4px)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-body);font-weight:700;font-size:14px;letter-spacing:.02em;
  cursor:pointer;border:none;padding:13px 22px;border-radius:10px;text-transform:uppercase;transition:transform .18s var(--ease),box-shadow .2s,background .2s,color .2s}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 40px -12px var(--accent)}
.btn-ghost{background:transparent;color:var(--fg);border:1px solid var(--line-2)}
.btn-ghost:hover{background:var(--fg);color:#0A0908}

/* type helpers */
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
.display{font-family:var(--font-display);text-transform:uppercase;line-height:.95;letter-spacing:.004em}

/* ===== INDEX ===== */
.blog-hero{padding:90px 0 50px;border-bottom:1px solid var(--line)}
.blog-hero .eyebrow{margin-bottom:18px;display:inline-block}
.blog-hero h1{font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:clamp(46px,8vw,104px);line-height:.9;margin-bottom:22px}
.blog-hero h1 .hl{color:var(--accent)}
.blog-hero p{font-size:clamp(17px,2vw,21px);color:var(--fg-dim);max-width:60ch;line-height:1.6}
.index-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;padding:60px 0 90px}
.card-post{display:flex;flex-direction:column;background:var(--bg-card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:border-color .25s,transform .25s var(--ease)}
.card-post:hover{border-color:var(--line-2);transform:translateY(-4px)}
.card-post .thumb{aspect-ratio:16/9;overflow:hidden;background:var(--bg-3);border-bottom:1px solid var(--line)}
.card-post .thumb img{width:100%;height:100%;object-fit:cover;filter:grayscale(.2) contrast(1.04);transition:transform .4s var(--ease)}
.card-post:hover .thumb img{transform:scale(1.04)}
.card-post .cbody{padding:26px 28px 30px;display:flex;flex-direction:column;flex:1}
.card-post .cat{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
/* Hanken 800, not Anton. Anton is an ultra-condensed DISPLAY face: its counters, the
   holes in a, e, o and R, are tiny by design, which is impact at 82px and mush at 25px,
   where they fill in and the vertical strokes merge. Long uppercase card titles were
   the worst case of it on the whole site.
   This is not a new decision, it is applying one that already existed twice over:
   .post-body h2 below uses exactly this treatment for headings at this size, and
   .post h4 in index.html already styles the HOMEPAGE blog cards in Hanken. Only these
   cards were still Anton, so the same content was set two different ways on two pages.
   text-transform:uppercase went with it. The markup already carries proper title case,
   and all-caps compounds the legibility problem on titles that run to two lines.
   Anton keeps everything at 32px and up, plus the brand wordmark. See CLAUDE.md. */
.card-post h2{font-family:var(--font-body);font-weight:800;font-size:24px;line-height:1.2;letter-spacing:-.01em;margin-bottom:12px}
.card-post p{font-size:15px;color:var(--fg-dim);line-height:1.55;margin-bottom:18px}
.card-post .more{margin-top:auto;font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--accent)}

/* ===== ARTICLE ===== */
.post{padding:56px 0 40px}
.post .back{display:inline-block;font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--fg-mute);margin-bottom:30px;transition:color .2s}
.post .back:hover{color:var(--accent)}
.post .eyebrow{display:block;margin-bottom:16px}
.post h1{font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:clamp(34px,5.4vw,62px);line-height:.98;letter-spacing:.004em;margin-bottom:20px}
.post-meta{font-size:14px;color:var(--fg-mute);letter-spacing:.04em;margin-bottom:38px}
.post-hero{width:100%;border-radius:var(--r);border:1px solid var(--line-2);margin-bottom:46px;aspect-ratio:16/9;object-fit:cover;filter:grayscale(.15) contrast(1.03)}

/* article body */
.post-body{font-size:18.5px;line-height:1.78;color:var(--fg-dim)}
.post-body>*+*{margin-top:24px}
.post-body h2{font-family:var(--font-body);font-weight:800;color:var(--fg);font-size:clamp(24px,3.2vw,32px);line-height:1.15;margin-top:48px;letter-spacing:-.01em}
.post-body h3{font-family:var(--font-body);font-weight:700;color:var(--fg);font-size:clamp(19px,2.4vw,23px);line-height:1.2;margin-top:38px}
.post-body p{color:var(--fg-dim)}
.post-body strong{color:var(--fg);font-weight:700}
.post-body em{color:var(--fg-dim)}
.post-body a{color:var(--accent);font-weight:600;border-bottom:1px solid transparent;transition:border-color .2s}
.post-body a:hover{border-color:var(--accent)}
.post-body ul,.post-body ol{padding-left:24px;color:var(--fg-dim)}
.post-body li{margin-top:12px;padding-left:6px;line-height:1.65}
.post-body li::marker{color:var(--accent)}
.post-body blockquote{border-left:4px solid var(--accent);padding:6px 0 6px 24px;margin:34px 0;font-size:clamp(20px,2.6vw,26px);
  line-height:1.4;color:var(--fg);font-style:italic;font-family:var(--font-body)}
.post-body img{border-radius:var(--r);border:1px solid var(--line);margin:32px 0}
.post-body hr{border:none;border-top:1px solid var(--line);margin:44px 0}
.post-body figure{margin:32px 0}
.post-body figcaption{font-size:13px;color:var(--fg-mute);margin-top:10px;text-align:center}

/* CTA */
.post-cta{margin:60px 0 20px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:38px 36px;text-align:center}
.post-cta h3{font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:30px;margin-bottom:12px}
.post-cta p{color:var(--fg-dim);font-size:16px;max-width:50ch;margin:0 auto 22px;line-height:1.6}

/* related */
.related{border-top:1px solid var(--line);padding:60px 0 20px;margin-top:50px}
.related h4{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-mute);margin-bottom:26px;font-weight:700}
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

/* footer */
.site-foot{border-top:1px solid var(--line);padding:50px 0;margin-top:60px}
.foot-inner{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;align-items:center;color:var(--fg-mute);font-size:13.5px}
.site-foot .tag{font-family:var(--font-body);font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--fg-dim)}
.site-foot a{color:var(--fg-mute);transition:color .2s}
.site-foot a:hover{color:var(--accent)}

@media(max-width:860px){
  .index-grid{grid-template-columns:1fr}
  .rel-grid{grid-template-columns:1fr}
  .site-head nav{gap:16px}
  .site-head nav a:not(.btn){display:none}
}