/* The Starter Labs — shared shell for the blog and case study pages.
   Same palette, type and masthead language as the v5 pages, but standalone so a
   post doesn't have to carry the 200KB component runtime the main pages use. */

@font-face { font-family:'Clash Display'; font-weight:500; font-display:swap; src:url('https://cdn.fontshare.com/wf/2GQIT54GKQY3JRFTSHS4ARTRNRQISSAA/3CIP5EBHRRHE5FVQU3VFROPUERNDSTDF/JTSL5QESUXATU47LCPUNHZQBDDIWDOSW.woff2') format('woff2'); }
@font-face { font-family:'Clash Display'; font-weight:600; font-display:swap; src:url('https://cdn.fontshare.com/wf/FPDAZ2S6SW4QMSRIIKNNGTPM6VIXYMKO/5HNPQ453FRLIQWV2FNOBUU3FKTDZQVSG/Z3MGHFHX6DCTLQ55LJYRJ5MDCZPMFZU6.woff2') format('woff2'); }
@font-face { font-family:'Clash Display'; font-weight:700; font-display:swap; src:url('https://cdn.fontshare.com/wf/BFBSY7LX5W2U2EROCLVVTQP4VS7S4PC3/IIUX4FGTMD2LK2VWD3RVTAS4SSMUN7B5/53RZKGODFYDW3QHTIL7IPOWTBCSUEZK7.woff2') format('woff2'); }

:root{
  --ink:#070707; --panel:#0B0A09; --paper:#FAF7EF; --orange:#F5851F;
  --muted:rgba(250,247,239,0.62); --faint:rgba(250,247,239,0.12);
  --gutter:clamp(24px,6vw,88px); --measure:1560px; --read:min(100%,720px);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--ink); color:var(--paper);
  font-family:'Switzer',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px; line-height:1.6; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

.clash{ font-family:'Clash Display','Switzer',sans-serif; font-weight:600; letter-spacing:-0.025em; }
.mono{ font-family:'JetBrains Mono',ui-monospace,monospace; font-weight:500; text-transform:uppercase; letter-spacing:0.12em; font-size:12px; }
.wrap{ width:100%; max-width:var(--measure); margin-inline:auto; padding-inline:var(--gutter); }
.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:16px; top:16px; z-index:99; background:var(--orange); color:#14110F; padding:10px 16px; border-radius:8px; }

/* ---------- nav ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; height:72px; z-index:60; display:flex;
  align-items:center; justify-content:space-between;
  padding:0 clamp(24px,6vw,88px);
  background:rgba(7,7,7,0.72); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(250,247,239,0.10);
}
.nav__logo{ display:flex; align-items:center; gap:14px; text-decoration:none; min-height:44px; }
.nav__logo b{ font-family:'Clash Display','Switzer',sans-serif; font-size:21px; font-weight:600; letter-spacing:-0.025em; line-height:1; white-space:nowrap; }
.nav__part{ color:rgba(250,247,239,0.4); font-size:9px; line-height:1.4; letter-spacing:0.16em;
  border-left:1px solid rgba(250,247,239,0.14); padding-left:12px; font-family:'JetBrains Mono',monospace; text-transform:uppercase; }
.nav__links{ display:flex; align-items:center; gap:4px; }
.nav__links a{ padding:8px 16px; font-size:14px; text-decoration:none; white-space:nowrap; color:#FAF7EF; transition:color .25s ease; }
.nav__links a:hover, .nav__links a[aria-current]{ color:var(--orange); }

/* hamburger toggle */
.nav__burger{ display:none; width:44px; height:44px; background:none; border:none; cursor:pointer;
  position:relative; z-index:62; padding:0; flex-shrink:0; }
.nav__burger span{ display:block; width:22px; height:2px; background:var(--paper);
  margin:5px auto; border-radius:2px; transition:transform .3s ease, opacity .3s ease; }
.nav__burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* mobile drawer */
.nav__drawer{ display:none; position:fixed; inset:72px 0 0 0; z-index:59;
  background:rgba(7,7,7,0.96); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  flex-direction:column; align-items:center; justify-content:center; gap:8px;
  padding:32px 24px; opacity:0; transform:translateY(-10px);
  transition:opacity .3s ease, transform .3s ease; }
.nav__drawer.open{ display:flex; opacity:1; transform:translateY(0); }
.nav__drawer a{ font-family:'Clash Display',sans-serif; font-size:22px; font-weight:600;
  color:#FAF7EF; text-decoration:none; padding:14px 24px; letter-spacing:-0.02em;
  transition:color .25s ease; }
.nav__drawer a:hover, .nav__drawer a[aria-current]{ color:var(--orange); }

/* ---------- masthead ---------- */
.hd{ padding:clamp(28px,4vw,56px) 0 clamp(20px,2.6vw,34px);
  border-top:1px solid rgba(250,247,239,0.14); border-bottom:1px solid rgba(250,247,239,0.14); }
.hd-title{ margin:0; font-weight:700; font-size:clamp(30px,7vw,96px); line-height:0.86;
  letter-spacing:-0.03em; text-transform:uppercase; }
.hd-line{ display:flex; align-items:center; gap:clamp(14px,3vw,40px); }
.hd-line span{ flex:0 1 auto; min-width:0; }
.hd-rule{ flex:1; min-width:14px; height:1px; background:var(--paper); }
.hd-sub{ padding:clamp(18px,2.4vw,30px) 0 0; display:flex; flex-wrap:wrap;
  align-items:baseline; justify-content:space-between; gap:12px 32px; }
.hd-sub p{ margin:0; font-size:clamp(16px,1.9vw,24px); line-height:1.2; max-width:40rem; }
.orange{ color:var(--orange); }

/* article headlines are sentences, not display words — they need their own scale */
.hd-title--post{ font-size:clamp(25px,3.2vw,50px); line-height:1.08; text-transform:none;
  letter-spacing:-0.025em; max-width:22ch; }
.hd-title--post .hd-rule{ display:none; }

/* an article sits on the same grid as the header: everything starts at the page
   gutter, and only the running text is capped so lines stay readable */
.article-page{ max-width:900px; }
.article-page .hd-title,
.article-page .hd-sub{ padding-inline:0; }
.article-page .hd-sub{ padding-top:clamp(16px,2vw,24px); }

/* ---------- listing grid ---------- */
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));
  gap:clamp(16px,2vw,28px); padding-block:clamp(28px,4vw,52px); }
.card{ display:flex; flex-direction:column; border-radius:18px; overflow:hidden;
  border:1px solid var(--faint); background:var(--panel); text-decoration:none;
  transition:border-color .35s ease, transform .35s ease; }
.card:hover{ border-color:rgba(245,133,31,0.55); transform:translateY(-4px); }
.card__media{ aspect-ratio:16/9; background:#14110F; overflow:hidden;
  display:grid; place-items:center; }
/* banners come in mixed shapes; contain keeps the artwork and any text on it
   whole rather than slicing the edges off with cover */
.card__media img{ width:100%; height:100%; object-fit:contain; transition:transform .5s ease; }
.card:hover .card__media img{ transform:scale(1.04); }
.card__media--none{ display:grid; place-items:center;
  background:radial-gradient(120% 120% at 30% 0%, rgba(245,133,31,0.28), rgba(11,10,9,1) 70%);
  border-bottom:1px solid var(--faint); }
.card__media--none span{ font-family:'Clash Display',sans-serif; font-weight:700; font-size:26px;
  letter-spacing:0.06em; color:rgba(245,133,31,0.65); }
.card__body{ display:flex; flex-direction:column; gap:10px; padding:clamp(16px,1.7vw,22px); flex:1; }
.card__meta{ color:var(--muted); font-size:11px; }
.card__title{ margin:0; font-size:clamp(17px,1.5vw,21px); line-height:1.2; }
.card__excerpt{ margin:0; font-size:14px; line-height:1.5; color:rgba(250,247,239,0.55); }
.card__more{ margin-top:auto; padding-top:6px; color:var(--orange); font-size:13px; font-weight:600; }

/* ---------- article ---------- */
.shots{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
  gap:clamp(12px,1.4vw,20px); margin:clamp(20px,2.6vw,34px) 0; }
.shots img{ width:100%; margin:0; max-height:none; max-width:none; border-radius:14px; border:1px solid var(--faint); }

/* One centred column. The old two-column split left a ~300px gutter empty for the
   whole length of an article — 2700px of dead space on a long post. Related links
   now sit under the piece instead of beside it. */
.post{ display:block; padding-block:clamp(28px,4vw,56px); }
/* copy runs the full column so both edges line up with the header */
.post__body > blockquote{ max-width:none; }
.post__body{ min-width:0; font-size:clamp(15px,1.06vw,17px); line-height:1.72; color:rgba(250,247,239,0.78); }
.post__body > *:first-child{ margin-top:0; }
.post__body p{ margin:0 0 1.15em; }
.post__body h2{ font-family:'Clash Display',sans-serif; font-weight:600; letter-spacing:-0.02em;
  color:var(--paper); font-size:clamp(21px,2.2vw,30px); line-height:1.15; margin:2em 0 .6em; }
.post__body h3{ font-family:'Clash Display',sans-serif; font-weight:600; letter-spacing:-0.02em;
  color:var(--paper); font-size:clamp(18px,1.7vw,23px); line-height:1.2; margin:1.7em 0 .5em; }
.post__body h4{ font-family:'Clash Display',sans-serif; color:var(--paper); font-size:17px; margin:1.5em 0 .4em; }
.post__body a{ color:var(--orange); text-underline-offset:3px; }
.post__body ul, .post__body ol{ margin:0 0 1.2em; padding-left:1.25em; }
.post__body li{ margin:0 0 .5em; }
.post__body li::marker{ color:var(--orange); }
.post__body img{ display:block; border-radius:14px; margin:1.4em auto; width:auto;
  max-width:100%; height:auto; max-height:min(52vh,470px); }
.post__body blockquote{ margin:1.5em 0; padding:16px 20px; border-left:2px solid var(--orange);
  background:rgba(245,133,31,0.06); border-radius:0 12px 12px 0; color:var(--paper); }
.post__body strong{ color:var(--paper); }
.post__body table{ width:100%; border-collapse:collapse; margin:1.4em 0; font-size:14px; display:block; overflow-x:auto; }
.post__body th, .post__body td{ border:1px solid var(--faint); padding:10px 12px; text-align:left; }
.post__body th{ background:rgba(245,133,31,0.10); color:var(--paper); }

.post__hero{ width:100%; margin-inline:0; border-radius:18px; overflow:hidden;
  border:1px solid var(--faint); margin-bottom:clamp(20px,2.6vw,34px); }
.post__hero img{ display:block; width:100%; height:auto; }
.post__meta{ display:flex; flex-wrap:wrap; gap:8px 20px; align-items:center; color:var(--muted);
  padding-block:clamp(14px,1.8vw,22px); }
.tag{ display:inline-block; border:1px solid rgba(245,133,31,0.45); color:var(--orange);
  border-radius:999px; padding:5px 13px; font-size:11px; }

.aside{ margin-top:clamp(32px,4vw,56px); padding-top:clamp(20px,2.4vw,30px);
  border-top:1px solid var(--faint); display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:2px clamp(20px,3vw,40px); }
.aside h2{ grid-column:1 / -1; margin:0 0 6px; font-size:13px; color:var(--muted); }
.aside a{ display:block; text-decoration:none; font-size:15px; line-height:1.35;
  padding:12px 0; border-bottom:1px solid var(--faint); color:rgba(250,247,239,0.78);
  transition:color .25s ease; }
.aside a:hover{ color:var(--orange); }
.aside .btn{ grid-column:1 / -1; justify-self:start; margin-top:18px; border-bottom:0;
  padding:13px 26px; }   /* .aside a was flattening the button padding */

.cta{ border:1px solid rgba(245,133,31,0.4); border-radius:20px; padding:clamp(22px,3vw,40px);
  background:linear-gradient(180deg,rgba(245,133,31,0.12),rgba(245,133,31,0.03));
  margin-block:clamp(28px,4vw,56px); text-align:center; }
.cta h2{ margin:0 0 10px; font-size:clamp(22px,3vw,38px); line-height:1.1; }
.cta p{ margin:0 0 20px; color:rgba(250,247,239,0.62); }
.btn{ display:inline-flex; align-items:center; gap:8px; border-radius:999px; background:var(--orange);
  color:#14110F; padding:13px 26px; font-size:15px; font-weight:600; text-decoration:none;
  font-family:'Clash Display',sans-serif; min-height:44px; }
.btn--ghost{ background:rgba(245,133,31,0.10); color:var(--orange); border:1px solid rgba(245,133,31,0.6); }

/* ---------- footer ---------- */
.foot{ border-top:1px solid var(--faint); padding-block:56px 28px; margin-top:clamp(28px,4vw,56px); }
.foot__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:40px; }
.foot__grid p.mono{ margin:0 0 16px; color:var(--muted); }
.foot__grid ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; font-size:14px; }
.foot__grid a{ text-decoration:none; min-height:36px; display:inline-flex; align-items:center; }
.foot__grid a:hover{ color:var(--orange); }
.foot__base{ margin-top:40px; padding-top:22px; border-top:1px solid var(--faint);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; color:var(--muted); }

/* six nav items plus the CTA stop fitting around 760-840px and push the button
   off the right edge; tighten the bar before that happens */
@media (max-width:1024px){
  .nav__part{ display:none; }
  .nav__links a{ padding:10px 11px; font-size:13px; }
  .nav__logo b{ font-size:19px; }
}

@media (max-width:900px){
  .aside{ grid-template-columns:1fr; }
  .foot__grid{ grid-template-columns:repeat(2,1fr); gap:32px; }
}
@media (max-width:760px){
  .nav__links{ display:none; }
  .nav__burger{ display:flex; align-items:center; justify-content:center; }
  .nav__part{ display:none; }
  .hd-title{ font-size:clamp(28px,9.5vw,64px); }
  .grid{ grid-template-columns:1fr; }
}

/* card scroll-reveal animation — works on all screen sizes */
.card{ opacity:0; transform:translateY(30px); transition:opacity .5s ease, transform .5s ease; }
.card.visible{ opacity:1; transform:translateY(0); }