/* ==========================================================================
   AMIRAL STUDIO — design system
   Paper, ink, stone, tobacco. Newsreader / Instrument Sans / IBM Plex Mono.
   ========================================================================== */

/* ---------- tokens ---------- */
:root{
  /* colour */
  --paper:#F2EEE7;
  --paper-hi:#FAF8F4;
  --paper-lo:#E9E3D8;
  --ink:#16130F;
  --ink-80:#3B352D;
  --ink-60:#6B6357;
  --ink-40:#736B5E;
  --line:rgba(22,19,15,.16);
  --line-soft:rgba(22,19,15,.09);
  --tobacco:#7B5535;
  --dark-bg:#16130F;
  --dark-fg:#EDE7DC;
  --dark-fg-60:rgba(237,231,220,.62);
  --dark-line:rgba(237,231,220,.18);

  /* type */
  --serif:'Newsreader',ui-serif,Georgia,'Times New Roman',serif;
  --sans:'Instrument Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --t-hero:clamp(2.6rem,6.4vw,6.15rem);
  --t-display:clamp(2.2rem,5.2vw,4.75rem);
  --t-h2:clamp(1.9rem,3.9vw,3.5rem);
  --t-h3:clamp(1.25rem,1.9vw,1.75rem);
  --t-lead:clamp(1.0625rem,1.35vw,1.375rem);
  --t-body:clamp(1rem,1.02vw,1.0625rem);
  --t-small:.875rem;
  --t-label:.6875rem;
  --t-mono:.6875rem;

  /* layout */
  --gutter:clamp(20px,4.6vw,84px);
  --maxw:1560px;
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px;
  --s6:64px; --s7:96px; --s8:clamp(80px,11vw,160px); --s9:clamp(112px,16vw,232px);

  /* motion */
  --ease:cubic-bezier(.16,1,.3,1);
  --dur:.9s;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:var(--t-body);line-height:1.6;
  font-weight:400;letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:1.5px solid var(--tobacco);outline-offset:3px}

/* ---------- layout ---------- */
.shell{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(16px,2.2vw,32px);row-gap:clamp(36px,4.4vw,60px)}
.section{padding-block:clamp(72px,9.6vw,142px)}
.section--tight{padding-block:var(--s7)}
.rule{height:1px;background:var(--line);border:0;margin:0}
.grid--end{align-items:end}
.grid--center{align-items:center}
.grid--start{align-items:start}

/* ---------- type ---------- */
.serif{font-family:var(--serif);font-optical-sizing:auto}
.display,.h1,.h2{
  font-family:var(--serif);font-optical-sizing:auto;font-weight:300;
  letter-spacing:-.021em;text-wrap:balance;
}
.h1{font-size:var(--t-hero);line-height:.96}
.display{font-size:var(--t-display);line-height:1.0}
.h2{font-size:var(--t-h2);line-height:1.06}
.h1 em,.h2 em,.display em{font-style:italic;font-weight:300}
.h3{font-family:var(--sans);font-size:var(--t-h3);font-weight:500;letter-spacing:-.018em;line-height:1.24}
.lead{font-size:var(--t-lead);line-height:1.48;letter-spacing:-.012em;color:var(--ink-80)}
.body{font-size:var(--t-body);line-height:1.68;color:var(--ink-80)}
.body + .body{margin-top:1.05em}
.small{font-size:var(--t-small);line-height:1.55;color:var(--ink-60)}
.label{
  font-family:var(--sans);font-size:var(--t-label);font-weight:500;
  text-transform:uppercase;letter-spacing:.155em;color:var(--ink-60);
}
.mono{font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-40)}
.measure{max-width:34em}
.measure-s{max-width:26em}

/* section head */
.sechead{display:flex;align-items:baseline;gap:var(--s3);padding-bottom:var(--s3);border-bottom:1px solid var(--line);margin-bottom:var(--s6)}
.sechead .idx{font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.1em;color:var(--ink-40)}
.sechead .ttl{font-family:var(--sans);font-size:var(--t-label);font-weight:500;text-transform:uppercase;letter-spacing:.155em}

/* ---------- header ---------- */
.header{
  position:fixed;inset:0 0 auto 0;z-index:60;
  padding-block:clamp(16px,1.7vw,26px);
  transition:transform .5s var(--ease),background-color .35s ease,border-color .35s ease;
  border-bottom:1px solid transparent;
}
.header::before{
  content:"";position:absolute;inset:0;background:var(--paper);
  opacity:0;transition:opacity .35s ease;pointer-events:none;
}
.header.is-solid::before{opacity:.94;backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
.header.is-solid{border-bottom-color:var(--line-soft)}
.header.is-hidden{transform:translateY(-102%)}
.header .shell{position:relative;display:flex;align-items:center;justify-content:space-between;gap:var(--s4)}

.wordmark{display:inline-flex;align-items:baseline;gap:.5em;line-height:1}
.wordmark .m{
  font-family:var(--sans);font-weight:600;font-size:clamp(.95rem,1.15vw,1.0625rem);
  letter-spacing:.185em;text-transform:uppercase;
}
.wordmark .s{
  font-family:var(--sans);font-weight:400;font-size:clamp(.56rem,.68vw,.625rem);
  letter-spacing:.28em;text-transform:uppercase;color:var(--ink-60);
  transform:translateY(-.05em);
}

.nav{display:flex;align-items:center;gap:clamp(20px,2.4vw,40px)}
.nav a{
  font-size:var(--t-label);font-weight:500;text-transform:uppercase;letter-spacing:.155em;
  position:relative;padding-block:4px;color:var(--ink-80);
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);
}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--ink)}

.burger{
  display:none;background:none;border:0;padding:8px 0 8px 8px;cursor:pointer;
  font-size:var(--t-label);font-weight:500;text-transform:uppercase;letter-spacing:.155em;
}
@media (max-width:860px){
  .nav{display:none}
  .burger{display:block}
}

/* mobile menu */
.menu{
  position:fixed;inset:0;z-index:70;background:var(--paper);
  display:flex;flex-direction:column;
  opacity:0;transform:translateY(-8px);
  transition:opacity .45s var(--ease),transform .55s var(--ease),visibility .45s;
  visibility:hidden;
}
.menu.is-open{opacity:1;transform:none;visibility:visible}
.menu__top{display:flex;align-items:center;justify-content:space-between;padding-block:clamp(16px,1.7vw,26px)}
.menu__body{flex:1;display:flex;flex-direction:column;justify-content:center;gap:var(--s2)}
.menu__body a{
  font-family:var(--serif);font-optical-sizing:auto;font-weight:300;
  font-size:clamp(2.4rem,11vw,4rem);line-height:1.06;letter-spacing:-.02em;
  display:flex;align-items:baseline;gap:.6em;
  opacity:0;transform:translateY(16px);
}
.menu.is-open .menu__body a{animation:mIn .7s var(--ease) forwards}
.menu.is-open .menu__body a:nth-child(1){animation-delay:.10s}
.menu.is-open .menu__body a:nth-child(2){animation-delay:.16s}
.menu.is-open .menu__body a:nth-child(3){animation-delay:.22s}
.menu.is-open .menu__body a:nth-child(4){animation-delay:.28s}
.menu.is-open .menu__body a:nth-child(5){animation-delay:.34s}
.menu.is-open .menu__body a:nth-child(6){animation-delay:.40s}
.menu__body a span{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;color:var(--ink-40)}
@keyframes mIn{to{opacity:1;transform:none}}
.menu__foot{padding-bottom:var(--s5)}

/* ---------- buttons & links ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.85em;
  font-size:var(--t-label);font-weight:500;text-transform:uppercase;letter-spacing:.155em;
  border:1px solid var(--ink);border-radius:999px;
  padding:1.05em 1.75em;background:transparent;color:var(--ink);cursor:pointer;
  position:relative;overflow:hidden;isolation:isolate;white-space:nowrap;
  transition:color .45s var(--ease),border-color .45s var(--ease);
}
.btn::before{
  content:"";position:absolute;inset:0;background:var(--ink);z-index:-1;
  transform:translateY(101%);transition:transform .55s var(--ease);
}
.btn:hover{color:var(--paper)}
.btn:hover::before{transform:translateY(0)}
.btn .ar{transition:transform .5s var(--ease)}
.btn:hover .ar{transform:translateX(4px)}
.btn--solid{background:var(--ink);color:var(--paper)}
.btn--solid::before{background:var(--paper)}
.btn--solid:hover{color:var(--ink)}
.btn--light{border-color:var(--dark-line);color:var(--dark-fg)}
.btn--light::before{background:var(--dark-fg)}
.btn--light:hover{color:var(--dark-bg);border-color:var(--dark-fg)}

.alink{
  display:inline-flex;align-items:center;gap:.7em;position:relative;
  font-size:var(--t-label);font-weight:500;text-transform:uppercase;letter-spacing:.155em;
  padding-bottom:.5em;
}
.alink::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;
  transform-origin:left;transition:transform .55s var(--ease);
}
.alink:hover::after{transform:scaleX(0);transform-origin:right}
.alink .ar{transition:transform .5s var(--ease)}
.alink:hover .ar{transform:translateX(5px)}

/* ---------- hero ---------- */
.hero{position:relative;padding-top:clamp(120px,17vw,190px);padding-bottom:var(--s7)}
.hero__meta{display:flex;justify-content:space-between;gap:var(--s3);padding-bottom:clamp(28px,4vw,64px)}
.hero__grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(16px,2.2vw,32px);align-items:end}
.hero__type{grid-column:1 / span 7}
.hero h1{margin-bottom:clamp(32px,4.4vw,64px)}
.hero__foot{display:grid;grid-template-columns:repeat(9,1fr);column-gap:clamp(16px,2.2vw,32px);align-items:end;row-gap:var(--s4)}
.hero__lead{grid-column:1 / span 5}
.hero__cta{grid-column:6 / span 4;justify-self:start}
.hero__fig{grid-column:9 / span 4;position:relative;align-self:center;padding:2% 0 0}
.hero__fig img{width:100%;height:auto;display:block}
.hero__fig img{width:100%;aspect-ratio:3/4.15;object-fit:cover;object-position:center 46%}
.hero__fig figcaption{margin-top:var(--s2)}
@media (max-width:1100px){
  .hero__type{grid-column:1 / span 12}
  .hero__fig{grid-column:1 / span 12;margin-top:clamp(36px,5vw,64px);max-width:300px}
  .hero__foot{grid-template-columns:repeat(12,1fr)}
  .hero__lead{grid-column:1 / span 7}
  .hero__cta{grid-column:9 / span 4}
}
@media (max-width:760px){
  .hero__lead{grid-column:1 / span 12}
  .hero__cta{grid-column:1 / span 12}
  .hero__meta{flex-direction:row;flex-wrap:wrap;gap:var(--s2)}
}

/* ---------- strip ---------- */
.strip{border-block:1px solid var(--line);padding-block:var(--s3)}
.strip .shell{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);flex-wrap:wrap}
.strip__seq{display:flex;gap:clamp(14px,2vw,34px);align-items:center;flex-wrap:wrap}
.strip__seq span{font-size:var(--t-label);font-weight:500;text-transform:uppercase;letter-spacing:.155em}
.strip__seq i{width:14px;height:1px;background:var(--line);display:inline-block;font-style:normal}

/* ---------- editorial two-col ---------- */
.ed{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(16px,2.2vw,32px);row-gap:var(--s5)}
.ed__head{grid-column:1 / span 6}
.ed__a{grid-column:1 / span 5}
.ed__b{grid-column:7 / span 5}
@media (max-width:900px){
  .ed__head,.ed__a,.ed__b{grid-column:1 / span 12}
}

.pull{
  font-family:var(--serif);font-optical-sizing:auto;font-weight:300;font-style:italic;
  font-size:clamp(1.6rem,3.2vw,2.75rem);line-height:1.16;letter-spacing:-.02em;
  max-width:20ch;
}

/* ---------- what we do ---------- */
.ways{border-top:1px solid var(--line)}
.way{
  display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(16px,2.2vw,32px);
  padding-block:clamp(30px,3.6vw,52px);border-bottom:1px solid var(--line);row-gap:var(--s3);
  transition:background-color .5s var(--ease);
}
.way:hover{background:rgba(22,19,15,.022)}
.way__n{grid-column:1 / span 1;font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.1em;color:var(--ink-40);padding-top:.5em}
.way__t{grid-column:2 / span 4}
.way__t h3{font-family:var(--serif);font-optical-sizing:auto;font-weight:300;font-size:clamp(1.6rem,2.7vw,2.35rem);line-height:1.05;letter-spacing:-.02em}
.way__d{grid-column:7 / span 3}
.way__l{grid-column:10 / span 3}
.way__l li{font-size:var(--t-small);color:var(--ink-60);padding-block:.28em}
@media (max-width:900px){
  .way__n{grid-column:1 / span 12;padding-top:0}
  .way__t,.way__d,.way__l{grid-column:1 / span 12}
  .way__l{display:flex;flex-wrap:wrap;gap:.2em .9em}
  .way__l li{padding-block:0}
  .way__l li::after{content:"·";margin-left:.9em;color:var(--ink-40)}
  .way__l li:last-child::after{content:""}
}

/* ---------- dark band ---------- */
.dark{background:var(--dark-bg);color:var(--dark-fg)}
.dark .label,.dark .sechead .ttl{color:var(--dark-fg-60)}
.dark .sechead{border-bottom-color:var(--dark-line)}
.dark .sechead .idx,.dark .mono{color:rgba(237,231,220,.56)}
.dark .body,.dark .lead{color:var(--dark-fg-60)}
.dark .small{color:rgba(237,231,220,.5)}
.dark .rule{background:var(--dark-line)}
.dark ::selection{background:var(--dark-fg);color:var(--dark-bg)}

.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s5)}
.tags li{
  font-size:var(--t-label);font-weight:500;text-transform:uppercase;letter-spacing:.14em;
  border:1px solid var(--dark-line);border-radius:999px;padding:.7em 1.15em;color:var(--dark-fg-60);
}

/* ---------- things we notice ---------- */
.notice{position:relative}
.notice__stage{
  position:relative;min-height:clamp(220px,26vw,340px);
  display:flex;align-items:center;
}
.notice__item{
  position:absolute;inset:0;display:flex;align-items:center;
  opacity:0;transform:translateY(14px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
  pointer-events:none;
}
.notice__item.is-on{opacity:1;transform:none}
.notice__item p{
  font-family:var(--serif);font-optical-sizing:auto;font-weight:300;
  font-size:clamp(1.55rem,3.7vw,3.1rem);line-height:1.14;letter-spacing:-.022em;
  max-width:19ch;
}
.notice__bar{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s5)}
.notice__track{flex:1;height:1px;background:var(--dark-line);position:relative;overflow:hidden}
.notice__fill{position:absolute;inset:0;background:var(--dark-fg);transform-origin:left;transform:scaleX(0)}
.notice__count{font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.1em;color:rgba(237,231,220,.55);min-width:5.5ch}
.notice__ctrl{display:flex;gap:6px}
.notice__ctrl button{
  background:none;border:1px solid var(--dark-line);border-radius:999px;width:38px;height:38px;
  display:grid;place-items:center;cursor:pointer;color:var(--dark-fg);
  transition:background-color .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease);
}
.notice__ctrl button:hover{background:var(--dark-fg);color:var(--dark-bg);border-color:var(--dark-fg)}

/* ---------- figures & plates ---------- */
.fig{position:relative}
.fig img{width:100%;object-fit:cover}
.fig figcaption{margin-top:var(--s2);display:flex;justify-content:space-between;gap:var(--s2)}

.plate{
  position:relative;background:var(--paper-lo);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(16px,1.5vw,22px);overflow:hidden;
}
.plate::after{
  content:"";position:absolute;inset:clamp(9px,.9vw,13px);border:1px solid rgba(22,19,15,.13);pointer-events:none;
}
.plate__mark{
  position:relative;z-index:1;display:flex;justify-content:space-between;gap:var(--s2);
  font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-40);
}
.plate__spec{position:relative;z-index:1;max-width:30ch}
.plate__spec strong{
  display:block;font-family:var(--sans);font-weight:500;font-size:var(--t-label);
  text-transform:uppercase;letter-spacing:.15em;color:var(--ink-80);margin-bottom:.55em;
}
.plate__spec span{display:block;font-size:.75rem;line-height:1.5;color:var(--ink-60)}
.dark .plate{background:rgba(237,231,220,.055)}
.dark .plate::after{border-color:rgba(237,231,220,.16)}
.dark .plate__mark{color:rgba(237,231,220,.52)}
.dark .plate__spec strong{color:var(--dark-fg-60)}
.dark .plate__spec span{color:rgba(237,231,220,.52)}


/* ---------- technical drawings ----------
   Inline SVG. Hairline ink on paper, mono annotations, engineering conventions.
   Nothing here is decorative — each figure states something the copy also says. */
.dwgplate{
  --plate-bg:#F7F5F1;
  position:relative;background:var(--plate-bg);
  padding:clamp(18px,2vw,30px);overflow:hidden;
}
.dwgplate::after{
  content:"";position:absolute;inset:clamp(9px,.9vw,13px);
  border:1px solid rgba(22,19,15,.13);pointer-events:none;
}
.dwgplate--stone{--plate-bg:#E9E3D8}
.dark .dwgplate{--plate-bg:#211E1A}
.dark .dwgplate::after{border-color:rgba(237,231,220,.16)}
.dwg{display:block;width:100%;height:auto;color:var(--ink);overflow:visible}
.dwg .ln{fill:none;stroke:currentColor;stroke-width:1.15;stroke-linecap:square;stroke-linejoin:miter}
.dwg .thin{fill:none;stroke:currentColor;stroke-width:.85;opacity:.5}
.dwg .hatch{fill:none;stroke:currentColor;stroke-width:.85;opacity:.34}
.dwg .dash{stroke-dasharray:5 4}
.dwg .sheet{fill:var(--plate-bg);stroke:currentColor;stroke-width:.85;opacity:.6}
.dwg text{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.09em;
  text-transform:uppercase;fill:var(--ink-40);stroke:none;
}
.dwg text.lbl{fill:var(--ink-60)}
.dwg--wide text{font-size:10px}
.dark .dwg{color:var(--dark-fg)}
.dark .dwg text{fill:rgba(237,231,220,.56)}
.dark .dwg text.lbl{fill:rgba(237,231,220,.7)}
.dwgwrap{max-width:520px;margin-inline:auto}

/* ---------- line illustrations ----------
   Generated line art on an ivory ground. Multiply lets the ground vanish into the
   paper; on ink bands the image is inverted and screened so the line reads light. */
.il{display:block;width:100%;height:auto}
.dark .il{filter:invert(1) brightness(1.05);opacity:.9}

/* ---------- labelled diagram ---------- */
.diag{position:relative;padding-bottom:2.2em}
.diag__l{position:absolute;font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-60);white-space:nowrap;line-height:1}
.diag__l--gap{right:60%;top:20%;text-align:right;transform:translateY(-50%)}
.diag__l--now{left:4%;bottom:0}
.diag__l--could{right:2%;bottom:0}
.dark .diag__l{color:var(--dark-fg-60)}
@media (max-width:1100px){.diag__l--gap{right:60%}}

/* ---------- project ---------- */
.proj{border-top:1px solid var(--line);padding-top:var(--s6);margin-top:var(--s8)}
.proj:first-of-type{margin-top:0}
.proj__head{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(16px,2.2vw,32px);row-gap:var(--s3);align-items:end;margin-bottom:var(--s6)}
.proj__head h2{grid-column:1 / span 7}
.proj__head .meta{grid-column:9 / span 4;display:flex;flex-direction:column;gap:.4em}
.proj__media{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(16px,2.2vw,32px);row-gap:var(--s3);margin-bottom:var(--s6)}
.proj__body{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(16px,2.2vw,32px);row-gap:var(--s5)}
.blockq{grid-column:span 4}
.blockq h4{font-size:var(--t-label);font-weight:500;text-transform:uppercase;letter-spacing:.155em;color:var(--ink-60);margin:0 0 var(--s2);padding-bottom:var(--s2);border-bottom:1px solid var(--line)}
.blockq p{font-size:var(--t-small);line-height:1.62;color:var(--ink-80)}
.blockq ul li{font-size:var(--t-small);line-height:1.62;color:var(--ink-80);padding-block:.18em}
@media (max-width:900px){
  .proj__head h2,.proj__head .meta{grid-column:1 / span 12}
  .blockq{grid-column:span 12}
}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(16px,2.2vw,32px);row-gap:var(--s5)}
.card{grid-column:span 4;display:flex;flex-direction:column;gap:var(--s3)}
.card__img{overflow:hidden;background:var(--paper-lo)}
.card__img img,.card__img .plate{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform 1.1s var(--ease)}
.card:hover .card__img img{transform:scale(1.035)}
.card:hover .card__img img[src*='logo-']{transform:none}
.card h3{font-family:var(--serif);font-optical-sizing:auto;font-weight:300;font-size:clamp(1.35rem,2vw,1.85rem);letter-spacing:-.02em;line-height:1.1}
@media (max-width:860px){.card{grid-column:span 12}}

/* ---------- capabilities ---------- */
.caps{border-top:1px solid var(--line)}
.cap{
  display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(16px,2.2vw,32px);
  border-bottom:1px solid var(--line);padding-block:clamp(34px,4.2vw,64px);row-gap:var(--s3);
}
.cap__n{grid-column:1 / span 1;font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.1em;color:var(--ink-40);padding-top:.55em}
.cap__t{grid-column:2 / span 4}
.cap__t h3{font-family:var(--serif);font-optical-sizing:auto;font-weight:300;font-size:clamp(1.5rem,2.5vw,2.15rem);line-height:1.06;letter-spacing:-.02em;margin-bottom:var(--s2)}
.cap__t .q{font-size:var(--t-small);color:var(--ink-60);font-style:italic;font-family:var(--serif);font-size:1.0625rem}
.cap__d{grid-column:7 / span 3}
.cap__l{grid-column:10 / span 3;display:flex;flex-wrap:wrap;gap:.35em .8em;align-content:flex-start}
.cap__l li{font-size:.8125rem;color:var(--ink-60)}
.cap__l li::after{content:"·";margin-left:.8em;color:var(--ink-40)}
.cap__l li:last-child::after{content:""}
@media (max-width:900px){
  .cap__n{grid-column:1 / span 12;padding-top:0}
  .cap__t,.cap__d,.cap__l{grid-column:1 / span 12}
}

/* ---------- values / ruled rows ---------- */
.vrows{border-top:1px solid var(--line)}
.vrow{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(16px,2.2vw,32px);padding-block:clamp(22px,2.6vw,36px);border-bottom:1px solid var(--line);row-gap:var(--s2)}
.vrow__n{grid-column:1 / span 1;font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.1em;color:var(--ink-40);padding-top:.5em}
.vrow__t{grid-column:2 / span 4}
.vrow__t h3{font-family:var(--serif);font-optical-sizing:auto;font-weight:300;font-size:clamp(1.45rem,2.3vw,2rem);line-height:1.08;letter-spacing:-.02em}
.vrow__d{grid-column:7 / span 6}
.vrow__d p{font-size:var(--t-body);line-height:1.6;color:var(--ink-80)}
@media (max-width:900px){.vrow__n,.vrow__t,.vrow__d{grid-column:1 / span 12}.vrow__n{padding-top:0}}
.dark .vrows,.dark .vrow{border-color:var(--dark-line)}
.dark .vrow__d p{color:var(--dark-fg-60)}

/* big figures (vision) */
.figs{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(16px,2.2vw,32px);row-gap:var(--s5)}
.figs>div{grid-column:span 4;border-top:1px solid var(--line);padding-top:var(--s3)}
.figs .big{font-family:var(--serif);font-optical-sizing:auto;font-weight:300;font-size:clamp(2.4rem,5vw,4.6rem);line-height:1;letter-spacing:-.03em;margin:.35em 0 .3em}
.figs .big em{font-style:italic}
@media (max-width:860px){.figs>div{grid-column:span 12}}
.dark .figs>div{border-color:var(--dark-line)}

/* role card */
.role{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(16px,2.2vw,32px);row-gap:var(--s3);padding:clamp(28px,3.4vw,48px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);align-items:center;transition:background-color .5s var(--ease)}
.role:hover{background:rgba(22,19,15,.022)}
.role__t{grid-column:1 / span 6}
.role__t h3{font-family:var(--serif);font-optical-sizing:auto;font-weight:300;font-size:clamp(1.7rem,3vw,2.6rem);line-height:1.06;letter-spacing:-.02em}
.role__m{grid-column:7 / span 4;display:flex;flex-direction:column;gap:.4em}
.role__a{grid-column:11 / span 2;justify-self:end}
@media (max-width:900px){.role__t,.role__m{grid-column:1 / span 12}.role__a{grid-column:1 / span 12;justify-self:start}}

/* role page: meta bar + tag clusters */
.rolemeta{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);align-items:center}
.rolemeta div{display:flex;flex-direction:column;gap:.35em}
.cluster{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(16px,2.2vw,32px);row-gap:var(--s2);padding-block:clamp(20px,2.4vw,32px);border-top:1px solid var(--line)}
.cluster__t{grid-column:1 / span 4}
.cluster__t h4{font-family:var(--sans);font-weight:500;font-size:var(--t-label);text-transform:uppercase;letter-spacing:.155em;color:var(--ink-60)}
.cluster__l{grid-column:5 / span 8;display:flex;flex-wrap:wrap;gap:.45em .9em}
.cluster__l li{font-size:var(--t-small);color:var(--ink-80)}
.cluster__l li::after{content:"·";margin-left:.9em;color:var(--ink-40)}
.cluster__l li:last-child::after{content:""}
@media (max-width:760px){.cluster__t,.cluster__l{grid-column:1 / span 12}}
.tags--light li{border-color:var(--line);color:var(--ink-60)}
.dark .cluster{border-color:var(--dark-line)}
.dark .cluster__t h4{color:var(--dark-fg-60)}
.dark .cluster__l li{color:var(--dark-fg)}
.dark .cluster__l li::after{color:rgba(237,231,220,.4)}
.card .alink{align-self:flex-start}
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
@media (max-width:760px){.twocol{grid-template-columns:1fr}}
.twocol h4{font-family:var(--sans);font-weight:500;font-size:var(--t-label);text-transform:uppercase;letter-spacing:.155em;color:var(--ink-60);margin-bottom:var(--s2);padding-bottom:var(--s2);border-bottom:1px solid var(--line)}
.twocol li{font-family:var(--serif);font-optical-sizing:auto;font-weight:300;font-size:clamp(1.15rem,1.6vw,1.45rem);letter-spacing:-.015em;line-height:1.35;padding-block:.15em}
.dark .twocol h4{color:var(--dark-fg-60);border-color:var(--dark-line)}

/* ---------- form ---------- */
.form{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(16px,2.2vw,32px);row-gap:var(--s4)}
.field{grid-column:span 6;display:flex;flex-direction:column;gap:.6em}
.field--full{grid-column:span 12}
.field label{font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-40)}
.field input,.field textarea,.field select{
  background:transparent;border:0;border-bottom:1px solid var(--line);
  padding:.65em 0;font-size:1.0625rem;letter-spacing:-.01em;border-radius:0;
  transition:border-color .45s var(--ease);
}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-bottom-color:var(--ink)}
.field textarea{resize:vertical;min-height:5.5em;line-height:1.55}
.field select{appearance:none;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--ink-40) 50%),linear-gradient(135deg,var(--ink-40) 50%,transparent 50%);background-position:calc(100% - 9px) calc(50% + 1px),calc(100% - 4px) calc(50% + 1px);background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-40)}
@media (max-width:760px){.field{grid-column:span 12}}
.formnote{grid-column:span 12;display:flex;justify-content:space-between;align-items:center;gap:var(--s3);flex-wrap:wrap;padding-top:var(--s2)}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--line);padding-block:var(--s7) var(--s5)}
.footer__grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(16px,2.2vw,32px);row-gap:var(--s5)}
.footer__brand{grid-column:1 / span 4}
.footer__col{grid-column:span 2}
.footer__col h4{font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-40);margin-bottom:var(--s2)}
.footer__col li{padding-block:.22em}
.footer__col a{font-size:var(--t-small);color:var(--ink-80);position:relative}
.footer__col a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.footer__col a:hover::after{transform:scaleX(1)}
.footer__base{display:flex;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s7);padding-top:var(--s3);border-top:1px solid var(--line-soft)}
.footer__word{font-family:var(--sans);font-weight:600;font-size:clamp(2.1rem,10.2vw,8.6rem);line-height:1;letter-spacing:.16em;text-transform:uppercase;margin-top:var(--s7);color:var(--ink);opacity:.085;user-select:none;white-space:nowrap}
@media (max-width:900px){
  .footer__brand{grid-column:1 / span 12}
  .footer__col{grid-column:span 6}
}

/* ---------- reveal ----------
   Scoped to .js so the page renders fully when JavaScript is unavailable. */
.js .rv{opacity:0;transform:translateY(20px)}
.js .rv.is-in{opacity:1;transform:none;transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.js .rv-img{opacity:0}
.js .rv-img.is-in{opacity:1;transition:opacity 1.05s var(--ease)}
.js .rv-img img{transform:scale(1.05);transition:transform 1.4s var(--ease)}
.js .rv-img.is-in img{transform:none}
@media (prefers-reduced-motion:reduce){
  .js .rv,.js .rv-img{opacity:1!important;transform:none!important}
  .js .rv-img img{transform:none!important}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ---------- utilities ---------- */
.stack-1>*+*{margin-top:var(--s1)}
.stack-2>*+*{margin-top:var(--s2)}
.stack-3>*+*{margin-top:var(--s3)}
.stack-4>*+*{margin-top:var(--s4)}
.stack-5>*+*{margin-top:var(--s5)}
.stack-6>*+*{margin-top:var(--s6)}
.mt-3{margin-top:var(--s3)}.mt-4{margin-top:var(--s4)}.mt-5{margin-top:var(--s5)}.mt-6{margin-top:var(--s6)}.mt-7{margin-top:var(--s7)}
.col-12{grid-column-end:span 12}.col-8{grid-column-end:span 8}.col-7{grid-column-end:span 7}
.col-6{grid-column-end:span 6}.col-5{grid-column-end:span 5}.col-4{grid-column-end:span 4}.col-3{grid-column-end:span 3}
.start-6{grid-column-start:6}.start-7{grid-column-start:7}.start-8{grid-column-start:8}.start-9{grid-column-start:9}.start-10{grid-column-start:10}
@media (max-width:900px){
  .col-8,.col-7,.col-6,.col-5,.col-4,.col-3{grid-column-end:span 12}
  .start-6,.start-7,.start-8,.start-9,.start-10{grid-column-start:auto}
}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:var(--paper);padding:12px 18px}
.skip:focus{left:var(--gutter);top:12px}