/* =============================================================
   Myles Holman — Portfolio
   Shared design system. Used across all pages.
   ============================================================= */

:root{
  --ink:#0a0a0a;
  --ink-2:#1a1a1a;
  --paper:#f3efe7;
  --paper-2:#ebe5d9;
  --mute:#6b6660;
  --rule:rgba(10,10,10,.12);
  --rule-soft:rgba(10,10,10,.06);
  --accent:#ff002e;
  --accent-2:#f5d44a;
  --serif:"Playfair Display",ui-serif,Georgia,serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --maxw:1480px;
  --gutter:clamp(20px,4vw,56px);
  --ease:cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-font-smoothing:antialiased}
html,body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-weight:400;font-size:16px;line-height:1.5;overflow-x:hidden}
body{
  background-image:
    radial-gradient(1200px 600px at 110% -10%,rgba(255,0,46,.05),transparent 60%),
    radial-gradient(1000px 600px at -10% 30%,rgba(245,212,74,.08),transparent 60%);
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1000;opacity:.06;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button{font:inherit;background:none;border:0;color:inherit;cursor:pointer}
::selection{background:var(--ink);color:var(--paper)}

/* ---------- Heading weight normaliser (Playfair Display, medium 500) ---------- */
h1,h2,h3,h4,h5,h6{font-weight:500;font-style:normal}
.section__title,.case-hero__title,.case-section__title,.case-next__title,
.about-hero__title,.cta__title,.arch-era__year,.arch-era__title,.case__name,
.case-section__num,.foot__sig,.lede,.case-pull,.case-hero__lede,.case__title,
.quote__body{font-weight:500!important}
.section__title .italic,.case-hero__title .italic,.case-section__title .italic,
.case-next__title .italic,.about-hero__title .italic,.cta__title .italic,
.arch-era__year .italic,.arch-era__title .italic,.case__name .italic,
.case-pull em,.italic{font-style:italic;font-weight:500}

/* ---------- Layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.wrap-narrow{max-width:1080px;margin:0 auto;padding:0 var(--gutter)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.rule{height:1px;background:var(--rule);width:100%}
.rule-soft{height:1px;background:var(--rule-soft);width:100%}
.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}
.mt-48{margin-top:48px}.mt-64{margin-top:64px}.mt-80{margin-top:80px}.mt-120{margin-top:120px}
.pt-0{padding-top:0!important}

/* ---------- Type ---------- */
.eyebrow{font:500 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.display{font-family:var(--serif);font-weight:500;line-height:.92;letter-spacing:-.02em}
.italic{font-style:italic}
.kicker{font:500 13px/1.3 var(--sans);letter-spacing:.02em;color:var(--ink)}
.lede{font-family:var(--serif);font-size:clamp(22px,2.6vw,34px);line-height:1.2;letter-spacing:-.005em;color:var(--ink)}
.body{font-size:17px;line-height:1.6;color:var(--ink)}
.body p+p{margin-top:18px}
.body em{font-style:italic;color:var(--accent)}
.mute{color:var(--mute)}
.accent{color:var(--accent)}
.handwrite{font-family:var(--serif);font-style:italic;color:var(--accent)}
.dot-divider{display:inline-block;width:4px;height:4px;background:var(--ink);border-radius:50%;margin:0 12px;vertical-align:middle}

/* ---------- Nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;backdrop-filter:saturate(140%) blur(10px);background:rgba(243,239,231,.78);border-bottom:1px solid var(--rule-soft)}
.nav__inner{display:flex;align-items:center;padding:16px var(--gutter);max-width:var(--maxw);margin:0 auto;gap:0}
.brand{display:flex;align-items:center;gap:2px;font:600 14px/1 var(--sans);letter-spacing:.01em;opacity:0;pointer-events:none;max-width:0;overflow:hidden;transition:opacity .45s var(--ease),max-width .45s var(--ease)}
.nav.is-scrolled .brand{opacity:1;pointer-events:auto;max-width:240px}
.brand__wordmark{display:block;height:32px;width:auto}
.brand__leaf{display:inline-block;font-size:24px;line-height:1;transform-origin:50% 92%;animation:leaf-sway 4.8s var(--ease) infinite}
.brand:hover .brand__leaf{animation-duration:1.8s}
@keyframes leaf-sway{0%,100%{transform:rotate(-4deg) scale(1)}25%{transform:rotate(3deg) scale(1.04)}50%{transform:rotate(7deg) scale(1)}75%{transform:rotate(-1deg) scale(1.02)}}

/* legacy two-column hero scaffolding kept available but suppressed; superseded by .hero__composition */
/* Links sit left-flush at rest; on scroll, brand expands beside them and ctas push right via margin-left:auto, which centres the links visually */
.nav__links{display:flex;gap:32px;font:500 16px/1 var(--sans);color:var(--ink);margin-left:24px;margin-right:auto;transition:font-size .3s var(--ease),gap .3s var(--ease),margin .45s var(--ease)}
.nav.is-scrolled .nav__links{font-size:13px;gap:28px;margin-left:48px}
.nav__links a{position:relative;padding:6px 2px}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav__links a:hover::after,.nav__links a.is-active::after{transform:scaleX(1)}
.nav__ctas{display:flex;align-items:center;gap:10px;margin-left:auto}
.nav__cta{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border:1px solid var(--ink);border-radius:999px;font:500 15px/1 var(--sans);letter-spacing:.005em;transition:all .3s var(--ease),padding .3s var(--ease),font-size .3s var(--ease);white-space:nowrap}
.nav.is-scrolled .nav__cta{padding:10px 16px;font-size:13px}
.nav__cta--primary{background:var(--accent);border-color:var(--accent);color:var(--paper)}
.nav__cta--primary:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.nav__cta--ghost{background:transparent;color:var(--ink)}
.nav__cta--ghost:hover{background:var(--ink);color:var(--paper)}
.nav__cta svg{width:14px;height:14px;flex-shrink:0}
.nav__cta .pulse{width:6px;height:6px;border-radius:50%;background:var(--accent)}
@media(max-width:1040px){.nav__links{display:none}}
@media(max-width:720px){.nav__cta--ghost{display:none}}

/* ---------- Cursor ---------- */
.cursor{position:fixed;top:0;left:0;width:8px;height:8px;background:var(--ink);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:transform .15s var(--ease),background .25s var(--ease),width .25s var(--ease),height .25s var(--ease)}
.cursor.is-hover{width:48px;height:48px;background:rgba(255,0,46,.16);border:1px solid var(--accent)}
@media(hover:none){.cursor{display:none}}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:12px;padding:18px 28px;border-radius:999px;font:500 14px/1 var(--sans);border:1px solid var(--ink);transition:all .35s var(--ease)}
.btn--solid{background:var(--ink);color:var(--paper)}
.btn--solid:hover{background:var(--accent);border-color:var(--accent)}
.btn--ghost:hover{background:var(--ink);color:var(--paper)}
.btn--sm{padding:12px 20px;font-size:13px}

/* ---------- Button FX (hover magic) ---------- */
.fx-btn{--fx-sweep:var(--accent);position:relative;overflow:hidden;isolation:isolate}
.fx-btn::before{content:"";position:absolute;inset:0;background:var(--fx-sweep);transform:translateX(-101%);transition:transform .55s cubic-bezier(.65,0,.35,1);z-index:-1}
.fx-btn:hover::before{transform:translateX(0)}
.fx-label{position:relative;display:inline-block;overflow:hidden;line-height:1.05;vertical-align:middle}
.fx-label > span{display:inline-block;transition:transform .5s cubic-bezier(.65,0,.35,1)}
.fx-label > span::after{content:attr(data-text);position:absolute;left:0;top:100%;white-space:nowrap}
.fx-btn:hover .fx-label > span{transform:translateY(-105%)}
.fx-arrow{position:relative;display:inline-flex;align-items:center;justify-content:center;width:1em;height:1em;overflow:hidden;flex-shrink:0}
.fx-arrow > *{position:absolute;inset:0;display:inline-flex;align-items:center;justify-content:center;transition:transform .42s cubic-bezier(.65,0,.35,1)}
.fx-arrow > *:nth-child(2){transform:translateX(-130%)}
.fx-btn:hover .fx-arrow > *:first-child{transform:translateX(130%)}
.fx-btn:hover .fx-arrow > *:nth-child(2){transform:translateX(0)}
.case__cta.fx-btn:hover{background:var(--ink);border-color:var(--ink)}
.btn--solid.fx-btn:hover{background:var(--ink);border-color:var(--ink)}
.hero__cta.fx-btn{--fx-sweep:var(--ink)}
.hero__cta.fx-btn:hover{background:var(--accent);border-color:var(--accent)}
.btn--ghost.fx-btn{--fx-sweep:var(--ink)}
.btn--ghost.fx-btn:hover{background:transparent}
.hero__cta .fx-arrow{width:1.25em;height:1.25em}

/* ---------- Section header ---------- */
.section{padding:120px 0;position:relative}
.section--dark{background:var(--ink);color:var(--paper)}
.section--dark .rule,.section--dark .rule-soft{background:rgba(243,239,231,.14)}
.section--dark .eyebrow{color:rgba(243,239,231,.55)}
.section--dark .mute{color:rgba(243,239,231,.7)}
.section__head{display:grid;grid-template-columns:1fr 1.4fr;gap:48px;align-items:end;margin-bottom:80px}
@media(max-width:900px){.section__head{grid-template-columns:1fr;gap:24px;margin-bottom:48px}}
.section__title{font-family:var(--serif);font-size:clamp(34px,4vw,56px);line-height:1.12;letter-spacing:-.02em;padding-bottom:.06em}
.section__title .italic{font-style:italic;color:var(--accent)}
.section__intro{font-size:18px;line-height:1.5;color:var(--mute);max-width:54ch}
.section--dark .section__intro{color:rgba(243,239,231,.7)}

/* ---------- Hero (homepage) — see v3 block below ---------- */
@keyframes rise{from{transform:translateY(110%)} to{transform:translateY(0)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px rgba(255,0,46,.18)} 50%{box-shadow:0 0 0 7px rgba(255,0,46,0)}}
.hero__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;border-top:1px solid var(--rule);padding-top:24px}
.stat__n{font-family:var(--serif);font-size:clamp(40px,5vw,72px);line-height:1;letter-spacing:-.02em}
.stat__l{font:500 11px/1.3 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--mute);margin-top:8px}

/* ---------- Marquee strip ---------- */
.strip{
  border-top:1px solid var(--rule);
  border-bottom:0;
  padding:40px 0;
  margin-top:0;
  overflow:hidden;
  background:rgba(10,10,10,.02);
  /* inside .hero: anchored to the bottom of the first-load fold */
  width:100%;
}
.strip__track{
  display:flex;
  gap:clamp(56px, 7vw, 110px);
  width:max-content;
  animation:scroll 50s linear infinite;
  align-items:center;
}
.strip__logo{
  display:block;
  height:clamp(22px, 2.4vh, 34px);
  width:auto;
  flex:none;
  opacity:.72;
  filter:grayscale(1) contrast(1.05);
  transition:opacity .25s var(--ease), filter .25s var(--ease);
}
.strip__logo:hover{opacity:1; filter:grayscale(0) contrast(1)}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ---------- Work cards (homepage) ---------- */
.work{display:grid;gap:80px}
.case{display:grid;grid-template-columns:5fr 7fr;gap:48px;align-items:center}
.case:nth-child(even){grid-template-columns:7fr 5fr}
.case:nth-child(even) .case__copy{order:2}
@media(max-width:900px){.case,.case:nth-child(even){grid-template-columns:1fr}.case:nth-child(even) .case__copy{order:0}}
.case__num{font:500 12px/1 var(--mono);letter-spacing:.15em;color:var(--mute)}
.case__sector{margin-top:24px;font:500 12px/1 var(--mono);text-transform:uppercase;letter-spacing:.18em;color:var(--accent)}
.case__name{font-family:var(--serif);font-size:clamp(40px,4.8vw,72px);line-height:1.14;letter-spacing:-.02em;margin-top:12px;padding-bottom:.06em}
.case__name .italic{font-style:italic}
.case__desc{font-size:17px;line-height:1.55;margin-top:20px;color:var(--mute);max-width:48ch}
.case__tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.tag{font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:8px 12px;border:1px solid var(--rule);border-radius:999px;color:var(--ink)}
.case__cta{margin-top:32px;display:inline-flex;align-items:center;gap:12px;padding:14px 24px;border-radius:999px;background:var(--ink);color:var(--paper);border:1px solid var(--ink);font:500 14px/1 var(--sans);transition:background .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease),gap .35s var(--ease),transform .35s var(--ease)}
.case__cta:hover{background:var(--accent);border-color:var(--accent);color:var(--paper);gap:18px;transform:translateY(-1px)}
.case__visual{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:4/3;background:var(--paper-2);border:1px solid var(--rule);box-shadow:0 1px 0 rgba(0,0,0,.03),0 30px 60px -30px rgba(0,0,0,.18);transition:transform .6s var(--ease)}
.case__visual::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent 60%,rgba(10,10,10,.04));pointer-events:none;z-index:1}
.case__visual svg{position:absolute;inset:0;width:100%;height:100%}
.viz-bg{position:absolute;inset:0}
@media (hover:none){.case__thumb{opacity:.92;transform:none}}
@media (max-width:900px){.case__thumb{width:57%;right:14px;bottom:14px}}

/* ---------- Timeline ---------- */
.timeline{margin-top:24px;position:relative;padding:48px 0}
.timeline__rail{height:1px;background:var(--rule);position:relative}
.timeline__scroll{display:flex;gap:48px;overflow-x:auto;scroll-snap-type:x mandatory;padding:32px 0 16px;scrollbar-width:none}
.timeline__scroll::-webkit-scrollbar{display:none}
.t-item{min-width:280px;max-width:320px;scroll-snap-align:start;position:relative;padding-top:32px}
.t-item::before{content:"";position:absolute;top:0;left:0;width:10px;height:10px;background:var(--paper);border:1.5px solid var(--ink);border-radius:50%}
.t-item.is-accent::before{background:var(--accent);border-color:var(--accent)}
.t-year{font:500 11px/1 var(--mono);letter-spacing:.18em;color:var(--mute);text-transform:uppercase}
.t-title{font-family:var(--serif);font-size:32px;line-height:1.05;letter-spacing:-.01em;margin-top:10px}
.t-role{font-size:13px;color:var(--mute);margin-top:8px}
.t-note{font-size:14px;line-height:1.5;margin-top:14px;color:var(--ink)}
.section--dark .t-item::before{background:var(--ink);border-color:var(--paper)}
.section--dark .t-item.is-accent::before{background:var(--accent);border-color:var(--accent)}
.section--dark .t-role{color:rgba(243,239,231,.55)}
.section--dark .t-note{color:rgba(243,239,231,.85)}

/* ---------- Capabilities / Cards grid ---------- */
.caps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:900px){.caps{grid-template-columns:1fr}}
.cap{border:1px solid var(--rule);border-radius:16px;padding:32px;background:rgba(255,255,255,.4);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.cap:hover{transform:translateY(-4px);box-shadow:0 30px 60px -30px rgba(0,0,0,.2)}
details.cap{padding:0}
details.cap > summary{padding:32px;list-style:none;cursor:pointer;display:block;outline:none}
details.cap > summary::-webkit-details-marker{display:none}
details.cap > summary::marker{display:none}
.cap__icon{width:44px;height:44px;border-radius:12px;background:var(--ink);color:var(--paper);display:grid;place-items:center;margin-bottom:24px}
.cap__title{font-family:var(--serif);font-size:32px;line-height:1.05;margin-bottom:12px}
.cap__desc{color:var(--mute);font-size:15px;line-height:1.55;margin-bottom:32px}
.cap__cue{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-top:24px;padding:7px 12px 7px 14px;border-radius:999px;background:rgba(255,0,46,.08);color:var(--accent);transition:background .25s var(--ease)}
.cap__cue-label{font:500 10px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase}
.cap__cue svg{transition:transform .35s var(--ease)}
details.cap[open] .cap__cue{background:rgba(255,0,46,.15)}
details.cap[open] .cap__cue svg{transform:rotate(180deg)}
details.cap[open] > summary .cap__cue span::after{content:" closed";display:none}
.cap__list{margin:0 32px 32px;padding-top:24px;border-top:1px solid var(--rule);display:grid;gap:6px;font:500 12px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--ink);cursor:pointer}
.cap__list li{list-style:none;display:flex;align-items:center;gap:10px}
.cap__list li::before{content:"";width:14px;height:1px;background:var(--accent)}
.section--dark .cap{background:rgba(255,255,255,.04);border-color:rgba(243,239,231,.1)}
.section--dark .cap__icon{background:var(--accent);color:var(--ink)}
.section--dark .cap__desc{color:rgba(243,239,231,.7)}
.section--dark .cap__list{color:rgba(243,239,231,.9)}

/* ---------- Quotes ---------- */
.quotes{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
@media(max-width:900px){.quotes{grid-template-columns:1fr}}
.quote{padding:40px;border:1px solid var(--rule);border-radius:16px;background:rgba(255,255,255,.4);position:relative}
.quote__mark{position:absolute;top:24px;right:32px;font-family:var(--serif);font-size:80px;line-height:1;color:var(--accent);opacity:.4}
.quote__body{font-family:var(--serif);font-size:22px;line-height:1.35;color:var(--ink);letter-spacing:-.005em}
.quote__by{display:flex;align-items:center;justify-content:space-between;margin-top:24px;padding-top:24px;border-top:1px solid var(--rule);flex-wrap:wrap;gap:12px}
.quote__who{display:flex;flex-direction:column;gap:2px}
.quote__name{font:600 14px/1 var(--sans)}
.quote__role{font:400 13px/1.3 var(--mono);color:var(--mute);letter-spacing:.02em}

/* ---------- Numbers band ---------- */
.numbers{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;border-top:1px solid rgba(243,239,231,.14);border-bottom:1px solid rgba(243,239,231,.14);padding:64px 0}
@media(max-width:900px){.numbers{grid-template-columns:repeat(2,1fr)}}
.num__n{font-family:var(--serif);font-size:clamp(48px,7vw,96px);line-height:1;letter-spacing:-.02em;color:var(--paper)}
.num__n .accent{color:var(--accent)}
.num__l{font:500 11px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:rgba(243,239,231,.55);margin-top:12px;max-width:24ch}

/* ---------- Roster table ---------- */
.now{border-top:1px solid var(--rule)}
.now__row{display:grid;grid-template-columns:repeat(12,1fr);align-items:center;gap:24px;padding:20px 0;border-bottom:1px solid var(--rule)}
.now__y{grid-column:span 2;font:500 12px/1.4 var(--mono);color:var(--mute);letter-spacing:.1em}
.now__r{grid-column:span 4;font-size:15px}
.now__s{grid-column:span 3;font-size:15px;color:var(--mute)}
.now__c{grid-column:span 3;font-family:var(--serif);font-size:22px;letter-spacing:-.01em}
.now__c.is-current::after{content:"●";color:var(--accent);font-size:10px;vertical-align:middle;margin-left:10px}
@media(max-width:900px){
  .now__y,.now__r,.now__s,.now__c{grid-column:span 12;padding:6px 0}
  .now__row > *{border:0}
  .now__row{display:grid;grid-template-columns:repeat(12,1fr);padding:18px 0;border-bottom:1px solid var(--rule)}
  .now__y{grid-column:span 12}
  .now__r{grid-column:span 8}
  .now__s{grid-column:span 4;text-align:right}
  .now__c{grid-column:span 12;margin-top:6px}
}

/* ---------- CTA panel ---------- */
.cta{padding:140px 0;text-align:left;position:relative}
.cta__title{font-family:var(--serif);font-size:clamp(44px,6.4vw,104px);line-height:1.14;letter-spacing:-.025em;max-width:18ch;padding-bottom:.06em}
.cta__title .italic{font-style:italic;color:var(--accent)}
.cta__row{display:flex;gap:24px;align-items:center;margin-top:48px;flex-wrap:wrap}

/* ---------- Footer ---------- */
.foot{padding:64px 0 32px;border-top:1px solid var(--rule)}
.foot__top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;align-items:start}
@media(max-width:900px){.foot__top{grid-template-columns:1fr 1fr}}
.foot__col h5{font:500 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-bottom:16px}
.foot__col a,.foot__col p{display:block;font-size:14px;line-height:1.7;color:var(--ink)}
.foot__col a:hover{color:var(--accent)}
.foot__bot{display:flex;justify-content:space-between;align-items:center;margin-top:48px;padding-top:24px;border-top:1px solid var(--rule);font:500 12px/1 var(--mono);color:var(--mute);letter-spacing:.05em;gap:16px;flex-wrap:wrap}
.foot__sig{font-family:var(--serif);font-size:48px;line-height:1;letter-spacing:-.02em;font-style:italic}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
.reveal.delay-1{transition-delay:.06s}
.reveal.delay-2{transition-delay:.12s}
.reveal.delay-3{transition-delay:.18s}
.reveal.delay-4{transition-delay:.24s}

/* =============================================================
   Case study page styles
   ============================================================= */
.case-hero{padding:160px 0 80px;position:relative}
.case-hero__meta{display:flex;gap:32px;flex-wrap:wrap;margin-bottom:48px;font-size:13px;color:var(--mute)}
.case-hero__meta b{color:var(--ink);font-weight:600;margin-right:8px}
.case-hero__sector{font:500 12px/1 var(--mono);text-transform:uppercase;letter-spacing:.2em;color:var(--accent);margin-bottom:24px;display:block}
.case-hero__title{font-family:var(--serif);font-weight:500;font-size:clamp(40px,5.6vw,84px);line-height:1.14;letter-spacing:-.025em;max-width:20ch;padding-bottom:.06em}
.case-hero__title .italic{font-style:italic;color:var(--accent)}
.case-hero__lede{font-family:var(--serif);font-size:clamp(22px,2.4vw,32px);line-height:1.25;letter-spacing:-.005em;max-width:60ch;margin-top:48px;color:var(--ink)}
.case-hero__facts{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-top:80px;padding-top:32px;border-top:1px solid var(--rule)}
@media(max-width:900px){.case-hero__facts{grid-template-columns:repeat(2,1fr)}}
.fact h6{font:500 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-bottom:12px}
.fact p{font-size:15px;line-height:1.5}
.fact .accent{color:var(--accent);font-weight:500}

.case-hero__visual{margin-top:96px;border-radius:16px;overflow:hidden;aspect-ratio:16/10;border:1px solid var(--rule);background:var(--paper-2);position:relative;box-shadow:0 1px 0 rgba(0,0,0,.03),0 60px 100px -40px rgba(0,0,0,.25)}
.case-hero__visual svg{position:absolute;inset:0;width:100%;height:100%}

.case-section{padding:96px 0}
.case-section__head{display:grid;grid-template-columns:auto 1fr;gap:48px;align-items:baseline;margin-bottom:48px}
@media(max-width:700px){.case-section__head{grid-template-columns:1fr;gap:16px}}
.case-section__num{font-family:var(--serif);font-size:clamp(48px,5vw,80px);line-height:1.1;letter-spacing:-.02em;color:var(--accent);font-style:italic;padding-bottom:.05em}
.case-section__title{font-family:var(--serif);font-size:clamp(32px,3.6vw,52px);line-height:1.14;letter-spacing:-.02em;padding-bottom:.06em}
.case-section__intro{font-family:var(--serif);font-size:clamp(20px,2vw,28px);line-height:1.3;color:var(--ink);max-width:54ch;margin-top:24px}

.case-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:48px 64px;margin-top:48px}
@media(max-width:700px){.case-grid{grid-template-columns:1fr;gap:32px}}
.case-grid h4{font-family:var(--serif);font-size:28px;line-height:1.15;letter-spacing:-.01em;margin-bottom:12px}
.case-grid p{font-size:16px;line-height:1.6;color:var(--mute)}

.case-pull{padding:48px;margin:64px 0;border-left:2px solid var(--accent);font-family:var(--serif);font-size:clamp(28px,3.4vw,44px);line-height:1.2;letter-spacing:-.01em}
.case-pull cite{display:block;margin-top:16px;font-family:var(--sans);font-style:normal;font-size:13px;color:var(--mute);letter-spacing:.1em;text-transform:uppercase;font-weight:500}

.case-vis{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:16/9;border:1px solid var(--rule);background:var(--paper-2);margin-top:48px;box-shadow:0 30px 60px -30px rgba(0,0,0,.2)}
.case-vis svg{position:absolute;inset:0;width:100%;height:100%}
.case-vis__caption{margin-top:14px;font:500 12px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}

.case-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin:64px 0;padding:48px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
@media(max-width:900px){.case-stats{grid-template-columns:repeat(2,1fr)}}
.case-stats .n{font-family:var(--serif);font-size:clamp(48px,6vw,84px);line-height:1;letter-spacing:-.02em}
.case-stats .n .accent{color:var(--accent)}
.case-stats .l{font:500 11px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--mute);margin-top:8px;max-width:24ch}

.case-next{padding:120px 0;border-top:1px solid var(--rule)}
.case-next__row{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end}
@media(max-width:700px){.case-next__row{grid-template-columns:1fr}}
.case-next__label{font:500 12px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-bottom:16px}
.case-next__title{font-family:var(--serif);font-size:clamp(40px,4.8vw,68px);line-height:1.14;letter-spacing:-.02em;padding-bottom:.06em}
.case-next__title:hover .arrow{margin-left:20px}
.case-next__title .arrow{display:inline-block;margin-left:8px;transition:margin-left .35s var(--ease)}

/* =============================================================
   Archive page styles
   ============================================================= */
.arch-hero{padding:160px 0 64px}
.arch-hero__sub{font-family:var(--serif);font-style:italic;font-size:clamp(20px,2vw,28px);color:var(--accent);margin-bottom:24px}
.arch-hero__intro{font-family:var(--serif);font-size:clamp(22px,2.4vw,32px);line-height:1.3;color:var(--ink);max-width:58ch;margin-top:48px}

.arch-era{padding:96px 0;border-top:1px solid var(--rule);position:relative}
.arch-era:first-of-type{border-top:0}
.arch-era__head{display:grid;grid-template-columns:1fr 1.6fr;gap:64px;align-items:start;margin-bottom:64px}
@media(max-width:900px){.arch-era__head{grid-template-columns:1fr;gap:24px}}
.arch-era__year{font-family:var(--serif);font-size:clamp(56px,7vw,112px);line-height:1.06;letter-spacing:-.03em;color:var(--ink);padding-bottom:.04em}
.arch-era__year .italic{font-style:italic;color:var(--accent)}
.arch-era__years{font:500 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-bottom:16px}
.arch-era__title{font-family:var(--serif);font-size:clamp(32px,3.6vw,52px);line-height:1.14;letter-spacing:-.01em;margin-bottom:24px;padding-bottom:.04em}
.arch-era__body{font-size:17px;line-height:1.6;color:var(--ink);max-width:60ch}
.arch-era__body p+p{margin-top:14px}

.arch-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
@media(max-width:900px){.arch-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.arch-grid{grid-template-columns:1fr}}
.arch-card{border:1px solid var(--rule);border-radius:12px;padding:24px;background:rgba(255,255,255,.4);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.arch-card:hover{transform:translateY(-3px);box-shadow:0 30px 60px -30px rgba(0,0,0,.18)}
.arch-card__art{aspect-ratio:4/3;border-radius:8px;overflow:hidden;margin-bottom:20px;background:var(--paper-2);position:relative;border:1px solid var(--rule-soft)}
.arch-card__art svg{position:absolute;inset:0;width:100%;height:100%}
.arch-card__art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center}
.arch-card__tag{font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.arch-card__title{font-family:var(--serif);font-size:24px;line-height:1.1;letter-spacing:-.01em}
.arch-card__year{font:500 11px/1 var(--mono);color:var(--mute);margin-top:6px;letter-spacing:.1em}
.arch-card__desc{font-size:14px;line-height:1.55;color:var(--mute);margin-top:12px}

.arch-roster{margin-top:48px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:900px){.arch-roster{grid-template-columns:repeat(2,1fr)}}
.arch-pill{font:500 12px/1 var(--mono);letter-spacing:.06em;padding:14px 16px;border:1px solid var(--rule);border-radius:999px;color:var(--ink);background:rgba(255,255,255,.3);display:flex;align-items:center;justify-content:space-between;gap:8px;text-transform:uppercase}
.arch-pill span{color:var(--mute);font-size:10px;letter-spacing:.14em}

.arch-counter{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:48px;padding:32px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
@media(max-width:900px){.arch-counter{grid-template-columns:repeat(2,1fr)}}
.arch-counter .n{font-family:var(--serif);font-size:clamp(40px,4vw,64px);line-height:1;letter-spacing:-.02em}
.arch-counter .n .accent{color:var(--accent)}
.arch-counter .l{font:500 11px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--mute);margin-top:10px}

/* =============================================================
   About + Contact page styles
   ============================================================= */
.about-hero{padding:160px 0 64px}
.about-hero__title{font-family:var(--serif);font-weight:400!important;font-size:clamp(40px,5.4vw,88px);line-height:1.14;letter-spacing:-.022em;max-width:20ch;padding-bottom:.06em}
.about-hero__title .italic{font-weight:400!important}
.about-hero__title .italic{font-style:italic;color:var(--accent)}
.about-hero__lede{font-family:var(--serif);font-size:clamp(22px,2.4vw,30px);line-height:1.3;max-width:60ch;margin-top:40px}

.about-grid{display:grid;grid-template-columns:1fr 2fr;gap:64px;margin-top:96px}
@media(max-width:900px){.about-grid{grid-template-columns:1fr;gap:32px}}
.about-grid h4{font:500 12px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-bottom:16px}
.about-grid p{font-size:17px;line-height:1.65;margin-bottom:18px}
.ai-heatmap-section{margin-top:96px}
.ai-heatmap-label{font:500 12px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-bottom:32px}
.ai-heatmap-wrap{display:block;width:100%}
.ai-heatmap{width:100%;height:auto;display:block;overflow:visible}
.ai-heatmap__year{font:500 11px/1 var(--mono);letter-spacing:.1em;fill:rgba(10,10,10,.45);text-anchor:end}
.ai-heatmap__tick{font:500 11px/1 var(--mono);letter-spacing:.18em;fill:rgba(10,10,10,.5)}
.ai-heatmap rect{transition:fill .25s var(--ease)}

.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:64px}
@media(max-width:700px){.contact-form{grid-template-columns:1fr}}
.contact-form .full{grid-column:span 2}
@media(max-width:700px){.contact-form .full{grid-column:span 1}}
.contact-form label{display:block;font:500 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-bottom:10px}
.contact-form input,.contact-form textarea,.contact-form select{
  width:100%;padding:18px 20px;border:1px solid var(--rule);border-radius:12px;
  background:rgba(255,255,255,.5);font:400 16px/1.4 var(--sans);color:var(--ink);
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{
  outline:none;border-color:var(--ink);background:#fff;
}
.contact-form textarea{resize:vertical;min-height:160px}
.contact-channels{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:64px}
@media(max-width:700px){.contact-channels{grid-template-columns:1fr}}
.channel{padding:32px;border:1px solid var(--rule);border-radius:16px;background:rgba(255,255,255,.4);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.channel:hover{transform:translateY(-3px);box-shadow:0 30px 60px -30px rgba(0,0,0,.18)}
.channel h5{font:500 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-bottom:12px}
.channel a,.channel p{font-family:var(--serif);font-size:24px;line-height:1.15;letter-spacing:-.01em}

/* =============================================================
   Utilities
   ============================================================= */
.dark-bg{background:var(--ink);color:var(--paper)}
.dark-bg .rule{background:rgba(243,239,231,.14)}
.dark-bg .arch-card{background:rgba(255,255,255,.04);border-color:rgba(243,239,231,.1)}
.dark-bg .arch-card__desc{color:rgba(243,239,231,.7)}
.dark-bg .arch-card__title,.dark-bg .case-grid h4{color:var(--paper)}
.dark-bg .arch-pill{background:rgba(255,255,255,.04);border-color:rgba(243,239,231,.14);color:rgba(243,239,231,.92)}
.dark-bg .arch-pill span{color:rgba(243,239,231,.5)}

/* ===============================================================
   EDITORIAL HERO COMPOSITION v3 — full-bleed portrait, magazine cover
   =============================================================== */

/* ===========================================================
   HERO — composition mirrors mylesholman.com reference:
     LEFT  : eyebrow, myles wordmark, role label, lede, two text links
     RIGHT : large inked caricature, anchored to the bottom of the fold
   Rebuilt 2026-05-23 (round 3) after studying the live site directly.
   =========================================================== */

.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  /* wrap takes the full fold via flex:1; strip sits at the bottom of hero */
  overflow:hidden;
  padding:0;
}

.hero__wrap{
  position:relative;
  z-index:2;
  /* clear nav at top, NO bottom padding — portrait anchors to bottom of fold */
  padding-top:clamp(96px,12vh,140px);
  padding-bottom:0;
  display:flex;
  flex-direction:column;
  flex:1;
}

/* ---- 2-col grid: intro centred | portrait bottom-anchored, scales to fill ---- */
.hero__grid{
  display:grid;
  /* portrait gets the larger share, like the reference */
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap:clamp(32px,4vw,80px);
  /* per-cell alignment via align-self below; row stretches to fill .hero__wrap */
  align-items:stretch;
  flex:1;
}

/* ---- LEFT: editorial intro column, vertically centred within the row ---- */
.hero__intro{
  position:relative;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:clamp(18px,2.2vh,28px);
  /* The hero overflows the fold (portrait is taller than the viewport), so
     centring against the grid row pushes the intro low. Instead, pin the column
     to the visible fold height and centre within that — reads as middle-aligned
     against the on-screen portrait regardless of how tall the figure runs. */
  align-self:start;
  min-height:calc(100svh - clamp(96px,12vh,140px));
  justify-content:center;
}

/* every animated child starts hidden + slightly translated; data-anim drives reveal */
.hero__intro [data-anim]{
  opacity:0;
  transform:translateY(18px);
  animation:hero-reveal 1s var(--ease) forwards;
}
.hero__intro [data-anim="eyebrow"]   {animation-delay:.20s}
.hero__intro [data-anim="mark"]      {animation-delay:.32s}
.hero__intro [data-anim="manifesto"] {animation-delay:.55s}
.hero__intro [data-anim="lede"]      {animation-delay:.85s}
.hero__intro [data-anim="actions"]   {animation-delay:1.05s}

@keyframes hero-reveal{
  to{opacity:1;transform:translateY(0)}
}

/* eyebrow: small mono w/ red tick mark before it */
.hero__eyebrow{
  margin:0;
  padding-bottom:15px;
  display:inline-flex;align-items:center;gap:12px;
  font:500 12px/1 var(--mono);
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--mute);
}
.hero__eyebrow-mark{
  width:24px;height:1px;background:var(--accent);
  display:inline-block;
}

/* wordmark — slightly larger than before; entrance scale gives it a snap */
.hero__mark{
  /* optical left-align: the cursive 'm' opens with a thin upstroke so its bounding
     box reads as indented vs the straight 'D' / eyebrow tick below. Nudge left so the
     visual mass lines up with the margin. */
  margin:0 0 0 clamp(-9px,-0.6vw,-5px);
  padding:6px 0 4px;
}
.hero__mark-img{
  display:block;
  width:clamp(240px, 24vw, 380px);
  height:auto;
  color:var(--ink);
}

/* manifesto: the new editorial statement */
.hero__manifesto{
  margin:0;
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(36px, 4.4vw, 64px);
  line-height:.98;
  letter-spacing:-.018em;
  color:var(--ink);
}
.hero__manifesto-line{
  display:block;
}
.hero__manifesto-line--tail{
  /* slight optical indent */
  padding-left:.08em;
}
.hero__manifesto em{
  font-style:italic;
  color:var(--accent);
  font-weight:500;
  /* reveal the accent word a beat later than its host line */
  display:inline-block;
  opacity:0;
  animation:fade-up .9s var(--ease) 1s forwards;
}
@keyframes fade-up{
  from{opacity:0;transform:translateY(10px)}
  to  {opacity:1;transform:translateY(0)}
}

/* lede */
.hero__lede{
  margin:0;
  max-width:44ch;
  font-family:var(--sans);
  font-size:clamp(15px, 1.05vw, 17px);
  line-height:1.55;
  color:var(--ink);
}

/* actions: one primary pill + two quieter text links beneath */
.hero__actions{
  display:flex;flex-direction:column;
  gap:18px;
  margin-top:clamp(8px,1vh,16px);
  align-items:flex-start;
}

/* PRIMARY CTA — bold, oxblood, large */
.hero__cta{
  display:inline-flex;align-items:center;gap:14px;
  padding:18px 28px;
  background:var(--accent);color:var(--paper);
  border:1px solid var(--accent);
  border-radius:999px;
  font:500 16px/1 var(--sans);letter-spacing:.005em;
  white-space:nowrap;
  transition:background .3s var(--ease), color .3s var(--ease),
             border-color .3s var(--ease), transform .3s var(--ease),
             box-shadow .3s var(--ease);
  box-shadow:0 8px 24px -10px rgba(255,0,46,.4);
  position:relative;
}
.hero__cta:hover{
  background:var(--ink);
  border-color:var(--ink);
  color:var(--paper);
  transform:translateY(-1px);
  box-shadow:0 12px 30px -10px rgba(10,10,10,.45);
}
.hero__cta-arrow{
  width:20px;height:20px;
  transition:transform .3s var(--ease);
}
.hero__cta:hover .hero__cta-arrow{transform:translateX(5px)}

/* ---- RIGHT: inked caricature with ink-bleed reveal + breathing + parallax ---- */
.hero__portrait{
  position:relative;
  margin:0;
  margin-right:calc(var(--gutter) * -1);
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  /* fill the full grid cell — strip is anchored at the bottom of .hero */
  height:100%;
  align-self:stretch;
  perspective:1200px;
}

/* tilt wrapper — JS sets --tx and --ty in degrees on mousemove */
.hero__portrait-tilt{
  width:100%;height:100%;
  display:flex;align-items:flex-end;justify-content:flex-end;
  transform:rotateY(var(--tx, 0deg)) rotateX(var(--ty, 0deg));
  transform-style:preserve-3d;
  transition:transform .8s var(--ease);
  will-change:transform;
}

/* stage — handles the breathing scale loop after entrance */
.hero__portrait-stage{
  height:100%;
  display:flex;align-items:flex-end;justify-content:flex-end;
  animation:portrait-breathe 9s ease-in-out 2.2s infinite;
  transform-origin:50% 90%;
}
@keyframes portrait-breathe{
  0%, 100% {transform:scale(1.000)}
  50%      {transform:scale(1.012)}
}

/* image — ink-bleed mask reveal entrance, then sits */
.hero__portrait-img{
  display:block;
  height:100%;
  width:auto;
  max-width:100%;
  object-fit:contain;
  object-position:right bottom;
  margin-left:auto;
  /* mask wipe: starts fully clipped from bottom, reveals upward */
  -webkit-mask-image:linear-gradient(to top,
    black 0%, black var(--reveal, 0%), transparent calc(var(--reveal, 0%) + 8%), transparent 100%);
          mask-image:linear-gradient(to top,
    black 0%, black var(--reveal, 0%), transparent calc(var(--reveal, 0%) + 8%), transparent 100%);
  -webkit-mask-repeat:no-repeat;
          mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;
          mask-size:100% 100%;
  animation:portrait-ink-bleed 1.8s cubic-bezier(.22,.61,.36,1) .35s forwards;
}
@keyframes portrait-ink-bleed{
  0%   {--reveal: 0%; opacity:0; filter:blur(3px) contrast(.92)}
  25%  {opacity:1}
  100% {--reveal:100%; opacity:1; filter:blur(0) contrast(1)}
}

/* register the custom property so it animates smoothly */
@property --reveal{
  syntax: '<percentage>';
  initial-value: 0%;
  inherits: false;
}