/* ═══════════════════════════════════════════════════════════════════
   A PROJECT · V2 EDITORIAL
   Paper, ink, one gold. Asymmetric grid, oversized condensed display.
   Motion personality: crisp, fast, hard-edged. clip-path wipes, 560ms.
   Nothing fades in. Everything is uncovered.
   ═══════════════════════════════════════════════════════════════════ */

@font-face{font-family:Shoulders;src:url(assets/fonts/bigshoulders-bold.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Shoulders;src:url(assets/fonts/bigshoulders.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Instrument;src:url(assets/fonts/instrument.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Instrument;src:url(assets/fonts/instrument-bold.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:InstrumentSerif;src:url(assets/fonts/instrumentserif-italic.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap}

:root{
  --paper:#F2EDE4;
  --paper-2:#E6DED0;
  --ink:#14120F;
  --ink-2:#3B362F;
  --ink-soft:#5E574F;
  --gold:#D0AB6E;
  --rule:#14120F;

  --ease-crisp:cubic-bezier(.66,0,.18,1);
  --gut:20px;
  --bay:clamp(76px,11vh,140px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:Instrument,'Helvetica Neue',Arial,sans-serif;
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::after{content:"";position:fixed;inset:0;z-index:60;pointer-events:none;
  background:url(assets/grain.png) repeat;background-size:128px 128px;opacity:.028}
img{max-width:100%;display:block}
h1,h2,h3{margin:0;font-weight:700;text-wrap:balance}
p{margin:0}
p,li,dd{text-wrap:pretty}
ul{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--ink);color:var(--paper);
  padding:12px 18px;font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.skip:focus{left:10px;top:10px}

/* ── the wipe: nothing fades, everything is uncovered ─────────────
   The clip sits on .w__in, never on .w. A clip-path collapses the
   element's intersection rect to zero, so an observed .w would never
   report as visible and the reveal would never fire. .w stays clean
   as the observation target. */
.w__in{display:block;clip-path:inset(0 100% 0 0);transform:translate3d(-6%,0,0);
  transition:clip-path .62s var(--ease-crisp),transform .62s var(--ease-crisp)}
.w.in .w__in{clip-path:inset(0 0 0 0);transform:none}

/* ── masthead ──────────────────────────────────────────────────── */
.mast{
  position:sticky;top:0;z-index:50;background:var(--ink);color:var(--paper);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:10px var(--gut);border-bottom:1px solid var(--gold);
}
.mast__id img{width:64px;height:auto}
.mast__strip{display:none;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:#B8B1A6}
.mast__strip i{color:var(--gold);font-style:normal;padding:0 6px}
.mast__nav{display:flex;gap:18px;font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.mast__nav a{display:inline-flex;align-items:center;min-height:44px;
  border-bottom:1px solid transparent;transition:border-color .25s var(--ease-crisp)}
.mast__nav a:hover{border-color:var(--gold)}

/* ── hero ──────────────────────────────────────────────────────── */
.hero{padding:clamp(30px,6vh,64px) var(--gut) var(--bay)}
.hero__type{
  font-family:Shoulders,'Arial Narrow',sans-serif;font-weight:700;
  font-size:clamp(4.6rem,22vw,12rem);line-height:.8;letter-spacing:-.005em;
  text-transform:uppercase;
}
.hero__type .w{display:block}
/* stacked on a phone so the gold block never runs off the edge */
.hero__row{display:block}
.hero__block{width:max-content;max-width:100%}
.hero__block .w__in{background:var(--gold);padding:0 .1em .06em}
.hero__foot{margin-top:clamp(28px,5vh,58px);display:grid;gap:18px}
.hero__stand{font-size:clamp(17px,4.6vw,21px);line-height:1.42;max-width:34ch}
.hero__meta{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}

/* ── pull quote ────────────────────────────────────────────────── */
.quote{padding:var(--bay) var(--gut);border-top:1px solid var(--rule)}
.quote__text{
  font-family:InstrumentSerif,Georgia,serif;font-style:italic;
  font-size:clamp(30px,8.6vw,74px);line-height:1.08;letter-spacing:-.015em;
  max-width:18ch;
}

/* ── the spread ────────────────────────────────────────────────── */
.work{padding:var(--bay) var(--gut);border-top:1px solid var(--rule);background:var(--paper-2)}
.work__head{display:flex;flex-direction:column;gap:6px;margin-bottom:clamp(26px,4vh,46px)}
.eyebrow{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}
.work__title{font-family:Shoulders,'Arial Narrow',sans-serif;
  font-size:clamp(48px,15vw,140px);line-height:.86;text-transform:uppercase}

/* ── the spread: two facing pages, both images complete ────────── */
.spread-wrap{margin:0}
.spread{
  --sh:min(74vh,720px);
  display:grid;grid-template-columns:1fr 1fr;margin-inline:auto;overflow:hidden;
  width:min(100%,calc(var(--sh) * 1.006));aspect-ratio:820/815;background:var(--ink);
  clip-path:inset(0 0 0 0);transition:clip-path .2s var(--ease-crisp);
}
.spread.wiping{clip-path:inset(0 0 0 100%)}
/* a single page: taller frame, one image, still nothing cropped */
.spread[data-mode="before"],.spread[data-mode="after"]{
  grid-template-columns:1fr;aspect-ratio:410/815;
  width:min(100%,calc(var(--sh) * .503));
}
.spread[data-mode="before"] .page--a,
.spread[data-mode="after"] .page--b{display:none}
.page{position:relative;overflow:hidden;min-width:0}
.page picture{display:block;height:100%}
.page img{width:100%;height:100%;object-fit:cover;
  -webkit-user-drag:none;user-select:none;-webkit-user-select:none}
.page--a{border-left:2px solid var(--gold)}
.spread:not([data-mode="both"]) .page--a{border-left:0}
.page__folio{position:absolute;left:10px;bottom:8px;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--paper);text-shadow:0 1px 6px rgba(0,0,0,.9)}

.modes{display:flex;gap:0;margin-top:14px;border:1px solid var(--ink);width:max-content}
.mode{
  appearance:none;background:none;border:0;border-right:1px solid var(--ink);
  min-height:44px;padding:0 16px;cursor:pointer;color:var(--ink);
  font-family:inherit;font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;transition:background-color .2s var(--ease-crisp);
}
.mode:last-child{border-right:0}
.mode:hover{background:rgba(20,18,15,.08)}
.mode.is-on{background:var(--ink);color:var(--paper)}

.spread__caps{display:grid;gap:8px;margin-top:16px}
.cap{font-size:13px;line-height:1.4;color:var(--ink-soft);max-width:34ch}
.cap b{font-weight:700;color:var(--ink);letter-spacing:.1em;text-transform:uppercase;
  font-size:11px;margin-right:8px}

/* ── section titles ────────────────────────────────────────────── */
.sec-title{font-family:Shoulders,'Arial Narrow',sans-serif;
  font-size:clamp(44px,14vw,128px);line-height:.86;text-transform:uppercase}
.sec-title--sm{font-size:clamp(34px,9vw,74px)}

/* ── capability ────────────────────────────────────────────────── */
.cap-sec{padding:var(--bay) var(--gut);border-top:1px solid var(--rule)}
.cap-grid{margin-top:clamp(30px,5vh,58px);display:grid;gap:0}
.cap-item{border-top:1px solid rgba(20,18,15,.18);padding:20px 0}
.cap-item:first-child{border-top:0}
.cap-item h3{font-family:Shoulders,'Arial Narrow',sans-serif;
  font-size:clamp(30px,8vw,52px);line-height:.9;text-transform:uppercase}
.cap-item p{margin-top:7px;color:var(--ink-soft);font-size:15px;max-width:40ch}

/* ── type plates (the four slots) ──────────────────────────────── */
.slots{padding:var(--bay) var(--gut);border-top:1px solid var(--rule)}
.slots__grid{margin-top:clamp(30px,5vh,58px);display:grid;gap:14px}
.plate{position:relative;overflow:hidden;aspect-ratio:5/6}
/* the panel colour rides on .w__in so the whole plate wipes in as one */
.plate .w__in{display:flex;flex-direction:column;height:100%;
  justify-content:space-between;padding:20px}
.plate img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.plate--has-image .w__in{position:relative;z-index:2;background:none}
.plate--has-image::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(20,18,15,.15),rgba(20,18,15,.78))}
.plate--has-image .plate__type,
.plate--has-image .plate__folio,.plate--has-image .plate__note{color:var(--paper)}
.plate__folio{font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:.72}
.plate__type{font-family:Shoulders,'Arial Narrow',sans-serif;
  font-size:clamp(64px,13vw,190px);line-height:.8;text-transform:uppercase;
  white-space:nowrap;margin:auto 0 0;letter-spacing:-.01em}
.plate__note{margin-top:10px;font-size:13px;line-height:1.42;max-width:32ch;opacity:.8}
.plate--ink .w__in{background:var(--ink);color:var(--paper)}
.plate--gold .w__in{background:var(--gold);color:var(--ink)}
.plate--paper .w__in{background:var(--paper-2);color:var(--ink);
  outline:1px solid var(--ink);outline-offset:-1px}
.plate--alt .plate__type{color:var(--gold)}

/* ── studio ────────────────────────────────────────────────────── */
.studio{padding:var(--bay) var(--gut);border-top:1px solid var(--rule)}
.studio__cols{margin-top:26px;display:grid;gap:18px;color:var(--ink-soft);font-size:16px}
.studio__lead{color:var(--ink);font-size:clamp(21px,5.6vw,30px);line-height:1.24;
  letter-spacing:-.012em;max-width:26ch}
.studio__lead .w__in::first-letter{
  font-family:Shoulders,'Arial Narrow',sans-serif;float:left;
  font-size:3.1em;line-height:.76;padding:.04em .12em 0 0;color:var(--gold);
}

/* ── contact ───────────────────────────────────────────────────── */
.contact{background:var(--ink);color:var(--paper);padding:var(--bay) var(--gut)}
.contact__type{font-family:Shoulders,'Arial Narrow',sans-serif;
  font-size:clamp(72px,26vw,17rem);line-height:.78;text-transform:uppercase;color:var(--gold)}
.contact__body{margin-top:clamp(26px,4vh,48px);display:grid;gap:24px;max-width:38ch}
.contact__body p{font-size:clamp(16px,4.2vw,19px);color:#CFC8BC}
.btn{display:inline-flex;align-items:center;justify-content:center;justify-self:start;
  min-height:54px;padding:0 30px;background:var(--gold);color:var(--ink);
  font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  transition:transform .3s var(--ease-crisp)}
.btn:hover{transform:translate3d(0,-3px,0)}
.contact__tel{justify-self:start;font-size:13px;letter-spacing:.14em;color:#CFC8BC;
  border-bottom:1px solid rgba(208,171,110,.5);padding-bottom:2px}

/* ── footer ────────────────────────────────────────────────────── */
.foot{background:var(--ink);color:#8D867C;padding:0 var(--gut) 30px}
.foot__bar{border-top:1px solid rgba(242,237,228,.15);padding-top:26px;
  display:grid;gap:18px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;line-height:1.8}
.foot__bar img{width:58px;height:auto}

/* ═══ 620px ═══════════════════════════════════════════════════════ */
@media (min-width:620px){
  :root{--gut:34px}
  .slots__grid{grid-template-columns:1fr 1fr}
  .spread__caps{grid-template-columns:1fr 1fr;gap:26px}
  .foot__bar{grid-template-columns:repeat(4,auto);justify-content:space-between;align-items:end}
}

/* ═══ 860px ═══════════════════════════════════════════════════════ */
@media (min-width:860px){
  :root{--gut:52px}
  body{font-size:17px}
  .mast__strip{display:block}
  .mast__id img{width:76px}
  /* the asymmetry is an indent, not a flex row: a row of "IN LONDON"
     at this size cannot be guaranteed to fit the measure */
  .hero__row{margin-left:9%}
  /* asymmetry lives here: nothing sits in a plain centred column */
  .hero__foot{grid-template-columns:repeat(12,1fr);align-items:end}
  .hero__stand{grid-column:6 / 11}
  .hero__meta{grid-column:11 / 13;text-align:right}
  .quote__text{margin-left:34%}
  .cap-grid{grid-template-columns:1fr 1fr;column-gap:clamp(30px,5vw,70px)}
  .cap-item:nth-child(2){border-top:0}
  .studio__cols{grid-template-columns:repeat(12,1fr);gap:clamp(24px,3vw,44px)}
  .studio__lead{grid-column:1 / 7}
  .studio__cols p:nth-of-type(2){grid-column:8 / 13}
  .studio__cols p:nth-of-type(3){grid-column:8 / 12}
  .contact{display:grid;grid-template-columns:repeat(12,1fr);align-items:end;
    padding-block:clamp(100px,15vh,180px)}
  .contact__type{grid-column:1 / 7}
  .contact__body{grid-column:8 / 13;margin-top:0}
  .slots__grid{gap:20px}
  .plate{padding:28px}
}

/* ═══ 1180px ══════════════════════════════════════════════════════ */
@media (min-width:1180px){
  :root{--gut:74px}
  /* giant type left, standfirst set as a column bottom right */
  .hero{display:grid;grid-template-columns:minmax(0,1fr) 340px;
    gap:0 clamp(30px,4vw,72px);align-items:end;
    padding-bottom:clamp(56px,9vh,110px)}
  .hero__type{grid-column:1}
  .hero__foot{grid-column:2;display:block;margin-top:0;padding-bottom:.1em}
  .hero__stand{font-size:19px}
  .hero__meta{margin-top:20px;text-align:left}
  .work{display:grid;grid-template-columns:repeat(12,1fr);
    column-gap:clamp(24px,2.4vw,44px);align-items:start}
  .work__head{grid-column:1 / 4;margin-bottom:0;position:sticky;top:96px}
  .spread-wrap{grid-column:4 / 13}
  .spread{margin-inline:0}
  .spread__caps{max-width:calc(var(--sh) * 1.006)}
  .slots__grid{grid-template-columns:repeat(4,1fr)}
  .plate:nth-child(even){transform:translate3d(0,42px,0)}
}

/* ── reduced motion ────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .w__in{clip-path:none;transform:none}
  .plate:nth-child(even){transform:none}
}