/* ============================================================
   NASH STUDIO — v3
   Built to the Website Updates brief, 9 Oct 2026.
   Newsreader for display, Montserrat for everything functional.
   ============================================================ */

@font-face{font-family:"Newsreader";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/newsreader-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400;font-display:swap;src:url("fonts/newsreader-latin-400-italic.woff2") format("woff2")}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/newsreader-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/montserrat-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/montserrat-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/montserrat-latin-600-normal.woff2") format("woff2")}

:root{
  /* Palette — exact, from the brief */
  --soft-white:#F7F6F2;   /* main background */
  --mushroom:#9A9083;     /* hero background */
  --charcoal:#302F2C;     /* dark sections, footer, primary text */
  --walnut:#675B4E;       /* buttons and warm accent */
  --pale-stone:#D8D3CB;   /* dividers and subtle backgrounds */
  --moss:#626A5E;         /* optional small accent only */

  /* Two tints off Soft White, for figure placeholders and panel fills.
     Nothing else is tinted — the brief asks for flat colour. */
  --stone-10:#F2F0EB;
  --stone-20:#E8E5DE;

  --ink:var(--charcoal);
  --ink-soft:#5A564F;

  --rule:rgba(48,47,44,.20);
  --rule-soft:rgba(48,47,44,.10);
  --rule-light:rgba(247,246,242,.28);

  --display:"Newsreader", "Times New Roman", Georgia, serif;
  --body:"Montserrat", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  --gut:clamp(22px, 5vw, 92px);
  /* Sections pad top and bottom, so this value lands twice between neighbours.
     Keep it near 100 so a boundary reads as ~200px, not ~300px. */
  --sec:clamp(56px, 6.4vw, 104px);
  --maxw:1400px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--soft-white);
  color:var(--ink);
  font-family:var(--body);
  font-weight:400;
  font-size:15px;
  line-height:1.85;          /* generous margins, per the font rules */
  letter-spacing:.022em;     /* wide kerning, per the font rules */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
::selection{background:var(--walnut);color:var(--soft-white)}
:focus-visible{outline:2px solid var(--walnut);outline-offset:3px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---------- Type ----------
   Newsreader Regular carries every editorial headline, with Italic reserved
   for the emphasised second line. The brief asks for no extra tracking on
   headlines, so these sit at the font's own spacing.
   Montserrat does everything functional, using weight and caps for hierarchy. */
.d1{font-family:var(--display);font-weight:400;font-size:clamp(34px,4.6vw,64px);line-height:1.18;letter-spacing:0}
.d2{font-family:var(--display);font-weight:400;font-size:clamp(28px,3.4vw,46px);line-height:1.22;letter-spacing:0}
.d3{font-family:var(--display);font-weight:400;font-size:clamp(21px,1.9vw,28px);line-height:1.3;letter-spacing:0}
.it{font-style:italic}

/* Small section labels + captions: Montserrat SemiBold, all caps */
.label{
  font-family:var(--body);font-weight:600;
  font-size:10.5px;text-transform:uppercase;letter-spacing:.2em;
  color:var(--ink-soft);line-height:1.8;
}
.label--light{color:rgba(247,246,242,.78)}
.label--accent{color:var(--walnut)}

.lede{font-size:clamp(14.5px,1.05vw,16px);line-height:1.9;color:var(--ink-soft);max-width:58ch}
/* the hero lede breaks on its own <br>, so it needs room for the full first line */
.lede--hero{max-width:min(100%,1040px)}
.body{color:var(--ink-soft);max-width:60ch}
.body p + p{margin-top:1.4em}
.small{font-size:13.5px;line-height:1.85;color:var(--ink-soft)}
/* Captions move to SemiBold per the brief, so they drop a little in size and
   gain tracking — at 12.5px Regular the weight change alone reads as shouting. */
.caption{font-family:var(--body);font-weight:600;font-size:11px;letter-spacing:.07em;line-height:1.75;color:var(--ink-soft)}
.on-dark,.on-dark .body,.on-dark .lede,.on-dark .small{color:rgba(247,246,242,.82)}
.on-dark .caption{color:rgba(247,246,242,.7)}

/* ---------- Layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.section{padding-top:var(--sec);padding-bottom:var(--sec)}
.section--tight{padding-top:calc(var(--sec)*.7);padding-bottom:calc(var(--sec)*.7)}
/* The closing panel and the footer are both Jet, so their paddings would stack
   into one large void with no colour change to justify it. The footer owns the gap. */
.section--flush-bottom{padding-bottom:0}
.center{text-align:center}
.mx-auto{margin-left:auto;margin-right:auto}
.rule1{border:0;height:1px;background:var(--rule-soft);width:100%}
.p-mushroom{background:var(--mushroom)}
.p-charcoal{background:var(--charcoal)}
.p-stone{background:var(--pale-stone)}
/* v2 names kept as aliases so no markup has to change to stay in palette */
.p-ash{background:var(--mushroom)}
.p-ebony,.p-jet{background:var(--charcoal)}
.p-timber{background:var(--pale-stone)}

/* ---------- Buttons ----------
   Montserrat Medium, all caps, light tracking (brief: 0.04–0.07em).
   Three treatments, by what the button sits on:
     hero     — Soft White on Mushroom,  hover to Charcoal
     on light — Walnut,                  hover to Charcoal
     on dark  — Mushroom,                hover to Walnut */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  font-family:var(--body);font-weight:500;
  font-size:11px;text-transform:uppercase;letter-spacing:.055em;
  padding:17px 32px;border:1px solid transparent;cursor:pointer;
  width:fit-content;white-space:nowrap;
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.btn .ar{transition:transform .35s var(--ease)}
.btn:hover .ar{transform:translateX(4px)}

/* Hero button — sits on Mushroom */
.btn--hero,.btn--seasalt{background:var(--soft-white);color:var(--charcoal);border-color:var(--soft-white)}
.btn--hero:hover,.btn--hero:focus-visible,
.btn--seasalt:hover,.btn--seasalt:focus-visible{background:var(--charcoal);color:var(--soft-white);border-color:var(--charcoal)}

/* On light sections */
.btn--walnut,.btn--ebony,.btn--jet{background:var(--walnut);color:var(--soft-white);border-color:var(--walnut)}
.btn--walnut:hover,.btn--walnut:focus-visible,
.btn--ebony:hover,.btn--ebony:focus-visible,
.btn--jet:hover,.btn--jet:focus-visible{background:var(--charcoal);color:var(--soft-white);border-color:var(--charcoal)}

/* On dark sections */
.btn--mushroom,.btn--ash{background:var(--mushroom);color:var(--soft-white);border-color:var(--mushroom)}
.btn--mushroom:hover,.btn--mushroom:focus-visible,
.btn--ash:hover,.btn--ash:focus-visible{background:var(--walnut);color:var(--soft-white);border-color:var(--walnut)}

/* Outline variants keep their shape; only the colours move. */
.btn--outline{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn--outline:hover,.btn--outline:focus-visible{background:var(--walnut);color:var(--soft-white);border-color:var(--walnut)}
.btn--outline-light{background:transparent;color:var(--soft-white);border-color:rgba(247,246,242,.45)}
.btn--outline-light:hover,.btn--outline-light:focus-visible{background:var(--mushroom);color:var(--soft-white);border-color:var(--mushroom)}

/* Text link with rule beneath. Hover to Walnut on light, Soft White on dark. */
.tlink{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--body);font-weight:500;
  font-size:11px;text-transform:uppercase;letter-spacing:.055em;
  padding-bottom:7px;border-bottom:1px solid currentColor;
  width:fit-content;white-space:nowrap;
  transition:color .35s var(--ease),opacity .35s var(--ease);
}
.tlink:hover{color:var(--walnut)}
.on-dark .tlink,.tlink--light{color:rgba(247,246,242,.9)}
.on-dark .tlink:hover,.tlink--light:hover{color:var(--soft-white)}

/* ---------- Nav ---------- */
.nav{background:var(--soft-white);border-bottom:1px solid var(--rule-soft);position:sticky;top:0;z-index:60}
.nav__in{max-width:var(--maxw);margin:0 auto;padding:20px var(--gut);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px}
.nav__side{display:flex;gap:clamp(20px,3vw,48px);align-items:center}
.nav__side--r{justify-content:flex-end}
/* Montserrat Medium, all caps, 0.08–0.12em per the brief. Size nudged up a
   half point because the tighter tracking makes 10px read smaller than before. */
.navlink{
  font-family:var(--body);font-weight:500;
  font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--ink-soft);padding-bottom:3px;border-bottom:1px solid transparent;
  transition:color .35s var(--ease),border-color .35s var(--ease);
}
.navlink:hover,.navlink[aria-current="page"]{color:var(--charcoal);border-bottom-color:var(--walnut)}
/* NASH STUDIO in Newsreader Medium with modest spacing. */
.wordmark{
  font-family:var(--display);font-weight:500;
  font-size:clamp(18px,1.6vw,23px);text-transform:uppercase;letter-spacing:.14em;
  padding-left:.14em;color:var(--charcoal);white-space:nowrap;
}
/* the right-hand links are duplicated into the left group for the mobile drawer */
.nav__mobile-only{display:none}
.navtoggle{display:none;background:none;border:0;cursor:pointer;padding:8px;color:var(--charcoal);justify-self:end}
.navtoggle span{display:block;width:20px;height:1px;background:currentColor;margin:5px 0}

/* ---------- Hero ---------- */
.hero{background:var(--mushroom);color:var(--soft-white);text-align:center;padding:clamp(68px,7.6vw,124px) var(--gut)}
.hero .lede{color:rgba(247,246,242,.92);margin-left:auto;margin-right:auto}
.hero .label{color:rgba(247,246,242,.88)}
.hero .d1{color:var(--soft-white)}

/* ---------- Media ---------- */
.fig{overflow:hidden;background:var(--stone-20)}
.fig img{width:100%;height:100%;object-fit:cover;transition:transform 1.3s var(--ease)}
.fig--4x5{aspect-ratio:4/5}
.fig--3x4{aspect-ratio:3/4}
.fig--4x3{aspect-ratio:4/3}
.fig--3x2{aspect-ratio:3/2}
a:hover > .fig img,.fig-h:hover img{transform:scale(1.03)}

/* Overlapping photo pair, as drawn in the mockup */
.stack{position:relative;padding-bottom:clamp(48px,7vw,96px);padding-left:clamp(30px,6vw,80px)}
.stack__main{width:82%;margin-left:auto}
.stack__inset{position:absolute;left:0;bottom:0;width:46%;border:6px solid var(--soft-white)}

/* ---------- Selected work ---------- */
.work-lead{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(28px,4.5vw,72px);align-items:center}
.work-pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px)}
.work-card{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(18px,2.4vw,34px);align-items:center}
/* Both cards are inset equally, otherwise the divider's padding comes out of the
   first card alone and its image renders narrower than the second. */
.work-pair > *:first-child{padding-right:clamp(18px,3vw,48px);border-right:1px solid var(--rule-soft)}
.work-pair > *:last-child{padding-left:clamp(18px,3vw,48px)}

/* ---------- Services ---------- */
.svc-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.svc{padding:0 clamp(20px,3vw,48px)}
.svc + .svc{border-left:1px solid rgba(247,246,242,.22)}
.svc:first-child{padding-left:0}
.svc:last-child{padding-right:0}
.svc ul{list-style:none;margin-top:22px;display:flex;flex-direction:column;gap:9px}
.svc li{font-size:13.5px;color:rgba(247,246,242,.82)}

/* ---------- Stats ----------
   Statistics in Montserrat Regular, descriptions in SemiBold all caps. */
.stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.stat{padding:clamp(28px,3.4vw,48px) clamp(16px,2.4vw,36px);text-align:center}
.stat + .stat{border-left:1px solid var(--rule-soft)}
.stat__n{font-family:var(--body);font-weight:400;font-size:clamp(20px,1.9vw,27px);letter-spacing:.03em;color:var(--charcoal);line-height:1.3}
.stat__d{font-family:var(--body);font-weight:600;font-size:9.5px;text-transform:uppercase;letter-spacing:.2em;color:var(--ink-soft);margin-top:12px;line-height:1.7}

/* ---------- Footer ---------- */
.foot{background:var(--charcoal);color:var(--soft-white);padding:clamp(64px,6vw,96px) 0 30px}
/* equal outer columns so the nav sits on the true centre of the page */
.foot__top{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(22px,3vw,52px);align-items:start}
.foot__nav{display:flex;gap:clamp(16px,2.4vw,36px);flex-wrap:wrap;justify-content:center}
.foot__right{display:flex;gap:clamp(16px,2.4vw,30px);justify-content:flex-end;align-items:center}
.foot .navlink{color:rgba(247,246,242,.78)}
.foot .navlink:hover{color:var(--soft-white);border-bottom-color:var(--soft-white)}
.foot .wordmark{color:var(--soft-white)}
.foot__base{margin-top:clamp(34px,4vw,56px);padding-top:22px;border-top:1px solid var(--rule-light);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.ig{display:inline-flex;align-items:center;gap:9px}
.ig svg{width:15px;height:15px;flex-shrink:0}

/* ---------- Reveal ---------- */
.rv{opacity:0;transform:translateY(16px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ---------- Skip link ---------- */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--charcoal);color:var(--soft-white);padding:14px 22px;font-size:10.5px;text-transform:uppercase;letter-spacing:.2em;font-weight:600}
.skip:focus{left:0}

/* ---------- Utility ---------- */
.mt-xs{margin-top:10px}.mt-s{margin-top:18px}.mt-m{margin-top:30px}
.mt-l{margin-top:clamp(32px,3.4vw,52px)}.mt-xl{margin-top:clamp(44px,4.6vw,74px)}
.mb-m{margin-bottom:28px}.mb-l{margin-bottom:clamp(32px,3.4vw,52px)}
.maxw-sm{max-width:42ch}.maxw-md{max-width:54ch}
.flex{display:flex}.wrapf{flex-wrap:wrap}.gap-m{gap:clamp(16px,2vw,30px)}
.jc-c{justify-content:center}.ai-c{align-items:center}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,88px);align-items:center}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .work-lead,.work-pair,.split{grid-template-columns:1fr}
  .work-pair > *:first-child{padding-right:0;border-right:0;padding-bottom:clamp(28px,5vw,48px);border-bottom:1px solid var(--rule-soft)}
  .work-pair > *:last-child{padding-left:0}
  .svc-cols{grid-template-columns:1fr}
  .svc{padding:0}
  .svc + .svc{border-left:0;border-top:1px solid rgba(247,246,242,.22);margin-top:36px;padding-top:36px}
  .stats{grid-template-columns:1fr}
  .stat + .stat{border-left:0;border-top:1px solid var(--rule-soft)}
  .foot__top{grid-template-columns:1fr;text-align:center;justify-items:center}
  .foot__right{justify-content:center}
}
@media (max-width:860px){
  .nav__in{grid-template-columns:auto 1fr auto}
  .nav__side{display:none;position:absolute;top:100%;left:0;right:0;background:var(--soft-white);border-bottom:1px solid var(--rule-soft);flex-direction:column;align-items:center;gap:0;padding:8px var(--gut) 22px}
  .nav__side.open{display:flex}
  .nav__side a{padding:13px 0;width:100%;text-align:center}
  .nav__side--r{display:none !important}
  .nav__mobile-only{display:block}
  .navtoggle{display:block}
  .wordmark{justify-self:center}
  .work-card{grid-template-columns:1fr;gap:16px}
  .stack{padding-left:0}
  .stack__main{width:100%}
  .stack__inset{position:static;width:56%;margin-top:-14%;margin-left:0;border-width:5px}
}
@media (max-width:560px){
  .foot__base{justify-content:center;text-align:center}
}