/* ─────────────────────────────────────────────────────────────
   Complexity → Clarity · deck v2
   Pixel-gradient field, eight-palette deck
   ───────────────────────────────────────────────────────────── */

:root{
  --ground:#f7f7f9;
  --ink:#111016;
  --ink-2:#4a4854;
  --ink-3:#7c7986;
  --line:rgba(17,16,22,.13);
  --veil:rgba(249,249,251,.74);
  --accent:#dc4f42;

  --pad:clamp(20px,3.6vw,56px);
  --edge:clamp(14px,1.3vw,20px);   /* header and footer sit on the edge */
  --gutter:calc(var(--pad) + clamp(54px,5.4vw,78px));
  --r:14px;

  --t:.30s cubic-bezier(.22,.61,.36,1);
  --t-slide:.60s cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:clamp(15px,1.02vw,17px);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow:hidden;
  overscroll-behavior:none;
  touch-action:pan-y;
}

/* ── field ───────────────────────────────────────────────── */
#field{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}
#veil{
  position:fixed;inset:0;z-index:1;background:var(--veil);
  opacity:0;pointer-events:none;transition:opacity var(--t-slide);
}
body[data-slide]:not([data-slide="0"]) #veil{opacity:1}

/* ── chrome ──────────────────────────────────────────────── */
.chrome{
  position:fixed;z-index:20;left:var(--pad);right:var(--pad);
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;pointer-events:none;
}
.chrome>*{pointer-events:auto}
.chrome-top{top:var(--edge)}
.chrome-bot{bottom:var(--edge)}

/* the name is the way home — it goes back to the cover */
.wordmark{
  margin:0;font-weight:600;letter-spacing:-.015em;
  font-size:clamp(13px,1.05vw,16px);
  border:0;background:none;padding:0;
  font-family:inherit;color:var(--ink);
  cursor:pointer;transition:opacity var(--t);
}
.wordmark:hover{opacity:.55}
.wordmark:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:2px}
/* already home: nothing to go back to */
body[data-slide="0"] .wordmark{cursor:default}
body[data-slide="0"] .wordmark:hover{opacity:1}
.role{
  margin:0;color:var(--ink-2);text-align:right;
  font-size:clamp(11px,.82vw,13px);letter-spacing:.02em;
}
.counter b{color:var(--ink);font-weight:600}
.counter i{font-style:normal}

/* the page number opens the map of the deck */
.counter{
  border:0;background:none;padding:4px 8px;margin-left:-8px;
  font:inherit;cursor:pointer;border-radius:4px;
  font-variant-numeric:tabular-nums;font-style:normal;
  font-size:12px;letter-spacing:.14em;color:var(--ink-3);
}
.counter:hover{background:rgba(17,16,22,.05);color:var(--ink-2)}
.counter:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.counter[aria-expanded="true"]{background:rgba(17,16,22,.07);color:var(--ink)}

/* how much is behind you, how much is left */
.progress{
  flex:1 1 auto;max-width:min(46vw,560px);height:2px;
  background:rgba(17,16,22,.17);margin:0 clamp(16px,3vw,44px);
  border-radius:2px;position:relative;overflow:hidden;
}
.progress span{
  position:absolute;inset:0 auto 0 0;width:3.3%;
  background:var(--ink);border-radius:2px;
  transition:width .6s cubic-bezier(.22,.61,.36,1);
}

.dots{
  position:absolute;left:0;right:0;bottom:calc(100% + 16px);
  display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:center;
}
/* a class selector outranks the browser's own [hidden] rule, so the
   map would never have closed without this */
.dots[hidden]{display:none}
.dot{width:20px;height:22px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.dot::after{
  content:"";width:6px;height:6px;border-radius:1px;background:var(--ink);opacity:.2;
  transition:opacity var(--t),width var(--t);
}
.dot:hover::after{opacity:.5}
.dot[aria-current="true"]::after{opacity:1;width:16px;background:var(--ink)}
.dot:focus-visible{outline:2px solid var(--ink);outline-offset:1px;border-radius:5px}

.hint{margin:0;font-size:11px;letter-spacing:.08em;color:var(--ink-3);text-align:right;transition:opacity var(--t)}
body[data-slide]:not([data-slide="0"]) .hint{opacity:0}

/* ── arrows ──────────────────────────────────────────────
   Down at the foot beside the counter and the rule, rather than
   floating over the work: two bare chevrons, no dish behind them. */
.nav{display:flex;align-items:center;gap:2px}
.arrow{
  width:30px;height:30px;padding:0;
  border:0;border-radius:0;background:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  color:var(--ink-3);display:grid;place-items:center;cursor:pointer;
  transition:color var(--t),opacity var(--t);
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.arrow svg{width:15px;height:15px;display:block}
.arrow:hover{color:var(--ink)}
.arrow:active{color:var(--accent)}
.arrow:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.arrow[disabled]{opacity:.22;cursor:default}
.arrow[disabled]:hover{color:var(--ink-3)}

/* the arrows say it now */
.hint{display:none}

/* ── deck ────────────────────────────────────────────────── */
.deck{position:fixed;inset:0;z-index:10}
.slide{
  position:absolute;inset:0;
  display:grid;align-content:center;
  padding:calc(var(--pad)*3) var(--gutter);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity var(--t-slide),transform var(--t-slide),visibility 0s linear .6s;
}
.slide.is-active{opacity:1;visibility:visible;transform:none;
  transition:opacity var(--t-slide),transform var(--t-slide),visibility 0s}
.slide-inner{width:100%;margin:0 auto}

/* cover */
.slide-cover{place-content:end center;text-align:center;pointer-events:none}
.slide-cover .slide-inner{padding-bottom:clamp(8px,4vh,40px)}
.cover-line{
  margin:0 auto;max-width:min(100%,58ch);color:var(--ink-2);
  font-size:clamp(14px,1.15vw,18px);
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* type */
.eyebrow{
  margin:0 0 clamp(12px,1.4vw,18px);font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);
}
h1,h2{
  margin:0 0 clamp(14px,1.5vw,22px);font-weight:600;
  letter-spacing:-.032em;line-height:1.05;
  font-size:clamp(28px,4.2vw,56px);text-wrap:balance;
}
.lede{
  margin:0 0 clamp(24px,2.8vw,38px);max-width:min(100%,74ch);
  font-size:clamp(15px,1.28vw,20px);line-height:1.5;color:var(--ink-2);
}

/* four-up */
.quad{
  display:grid;gap:clamp(14px,1.8vw,28px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
  margin:0;padding:0;list-style:none;
}
.quad > li{
  border-top:1px solid var(--line);padding-top:clamp(12px,1.2vw,16px);
}
.quad b{
  display:block;font-size:11px;letter-spacing:.14em;color:var(--ink-3);
  font-weight:500;margin-bottom:10px;font-variant-numeric:tabular-nums;
}
.quad h3{margin:0 0 6px;font-size:clamp(16px,1.3vw,20px);font-weight:600;letter-spacing:-.022em}
.quad p{margin:0;font-size:clamp(13px,.95vw,14.5px);color:var(--ink-2);line-height:1.5}


/* ── about ───────────────────────────────────────────────── */
/* the field stays visible here — the big name is white and needs
   the pastel patch under it */
body[data-slide="1"] #veil{opacity:.34}

.slide-about{
  align-content:center;
}
.about{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
  gap:clamp(28px,5vw,86px);
  align-items:center;
  width:100%;
  margin:0 auto;
}
.hello{
  margin:0 0 clamp(22px,3.4vw,52px);
  font-size:clamp(19px,1.75vw,26px);
  font-weight:600;letter-spacing:-.022em;line-height:1.2;
}
.about-text{max-width:min(100%,58ch)}
.about-text p{
  margin:0;font-size:clamp(13.5px,1.02vw,16px);
  line-height:1.62;color:var(--ink-2);
}
.about-text p + p{margin-top:.95em}

.portrait{
  position:relative;margin:0;justify-self:end;
  width:100%;max-width:min(70vh,560px);aspect-ratio:1;
}
.portrait img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;display:block;
}
#portrait-photo{visibility:hidden}          /* the canvas draws it */
.portrait canvas{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:0;transition:opacity .3s;
}
.portrait.is-live canvas{opacity:1}
.portrait.is-live #portrait-mosaic{visibility:hidden}

/* every two-column layout stacks before it gets cramped */
@media (max-width:900px){
  .split{grid-template-columns:1fr;gap:clamp(20px,4vw,32px)}
  .split.flip .split-copy{order:0}          /* copy first once stacked */
  .shot.tall{--cap:38vh}
  .slide-inner.two{grid-template-columns:1fr;gap:clamp(18px,3vw,28px)}
  .opener-copy{max-width:none}
  .type-opener .slide-inner,
  .type-full .slide-inner{grid-template-rows:auto auto;gap:clamp(14px,2.4vw,24px)}
  .shot.bleed{--cap:44vh;height:auto}
}

@media (max-width:860px){
  .about{grid-template-columns:1fr;gap:clamp(22px,4vw,34px)}
  .portrait{justify-self:start;max-width:min(62vw,320px)}
}

/* ── small screens ───────────────────────────────────────── */
@media (max-width:760px){
  :root{--gutter:var(--pad)}
  .role{display:none}
  /* the footer used to be lifted clear of the side arrows and the dots;
     the arrows live in it now, so it sits on the edge like the header */
  .progress{max-width:none;margin:0 12px}
  .slide{padding:calc(var(--pad)*3.2) var(--pad) calc(var(--pad)*5.5)}
}
@media (max-height:560px) and (orientation:landscape){
  .slide{padding-block:calc(var(--pad)*2)}
  .chrome-bot{bottom:calc(var(--pad) - 6px)}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important}
}

/* ═══════════════════════════════════════════════════════════
   Deck layouts
   ═══════════════════════════════════════════════════════════ */

/* the field is the identity layer only — it is covered everywhere else */
#veil{background:var(--ground);opacity:0}
body[data-slide] #veil{opacity:1}
body[data-slide="0"] #veil{opacity:0}
/* the field carries across the about page, the principle and the
   journey — quietening a step at a time as the pages get busier */
body[data-slide="1"] #veil{opacity:.72}
body[data-slide="2"] #veil{opacity:.77}
body[data-slide="3"] #veil{opacity:.80}

/* ── the rail, at the left edge ──────────────────────────── */
.rail{
  position:absolute;left:calc(var(--pad) * .42);top:50%;translate:0 -50%;
  writing-mode:vertical-rl;transform:rotate(180deg);
  display:flex;align-items:center;gap:18px;
  font-size:11px;letter-spacing:.1em;color:var(--ink-3);
  pointer-events:none;
}
.rail i{font-style:normal;font-variant-numeric:tabular-nums;opacity:.7}
.rail::after{content:"";position:absolute;left:50%;top:-30px;width:1px;height:20px;background:var(--line)}
@media (max-width:860px){ .rail{display:none} }

/* ── display heading, with the ghost echo behind it ──────── */
.dh{
  position:relative;margin:0 0 clamp(16px,1.8vw,26px);
  font-weight:600;letter-spacing:-.034em;line-height:1.02;
  font-size:clamp(28px,4vw,54px);text-wrap:balance;
}
.dh > span{position:relative;display:block}
.dh .ghost{
  position:absolute;left:-.055em;top:-.42em;
  color:rgba(17,16,22,.055);
  pointer-events:none;user-select:none;white-space:nowrap;overflow:hidden;
  font-size:1.62em;letter-spacing:-.045em;
}
@media (max-width:860px){ .dh .ghost{display:none} }

.body p, .lede p{
  margin:0;max-width:min(100%,74ch);color:var(--ink-2);
  font-size:clamp(13.5px,1.02vw,16px);line-height:1.62;
}
.body p + p, .lede p + p{margin-top:.9em}
.lede{margin-bottom:clamp(22px,3vw,44px)}
.kicker{
  margin:0 0 14px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);font-weight:500;
}
.tag{margin:14px 0 0;font-size:12px;letter-spacing:.06em;color:var(--ink-3)}

/* ── two-column statement ────────────────────────────────── */
.slide-inner.two{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,5vw,80px);align-items:start;
}

/* messy → ordered, drawn from the grid itself */
.order{
  display:grid;grid-template-columns:repeat(22,1fr);gap:5px;
  margin-top:clamp(26px,3.4vw,44px);max-width:min(100%,44vw);
}
.order i{display:block;aspect-ratio:1;background:var(--accent);border-radius:1px}

/* ── split: copy one side, one tall picture the other ────── */
.split{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(28px,5vw,80px);align-items:center;
  width:100%;margin:0 auto;
}
.split.flip .split-copy{order:2}
.steps{
  display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 0;padding:0;list-style:none;
  counter-reset:s;
}
.steps li{
  font-size:12px;letter-spacing:.04em;color:var(--ink-2);
  border:1px solid var(--line);border-radius:999px;padding:6px 14px;
}

/* ── picture slots ───────────────────────────────────────── */
/* Nothing is cropped anywhere in this deck. Every picture is fitted
   whole inside its slot, so the slot takes the picture's proportions
   rather than the other way round, and the near-white ground shows
   around it instead of a grey box. */
.shot{
  position:relative;margin:0;
  display:flex;align-items:center;justify-content:center;
  --cap:46vh;
}
.shot img{
  display:block;margin:0 auto;
  width:auto;height:auto;
  max-width:100%;max-height:var(--cap);
  object-fit:contain;
}
.shot.is-empty{min-height:min(var(--cap),190px);width:100%}

.shot.tall{--cap:70vh;width:100%}
.shot.thumb{--cap:62px;height:62px;margin-bottom:12px;justify-content:flex-start}
.shot.thumb.is-empty{min-height:62px}
.shot.cardshot{--cap:150px;height:150px;margin-bottom:16px}
.shot.cardshot.is-empty{min-height:150px}

.shots{display:grid;gap:clamp(14px,1.8vw,30px);align-items:center}
.shots.three{grid-template-columns:repeat(3,1fr)}
.shots.three .shot{--cap:44vh}
.shots.six{grid-template-columns:repeat(6,1fr)}
.shots.six .shot{--cap:22vh}
@media (max-width:860px){
  .shots.three{grid-template-columns:repeat(2,1fr)}
  .shots.three .shot{--cap:30vh}
  .shots.six{grid-template-columns:repeat(3,1fr)}
}

/* the empty state, and the drop target */
.drop{
  position:absolute;inset:0;display:none;
  align-items:center;justify-content:center;gap:8px;flex-direction:column;
  font-size:11px;letter-spacing:.06em;color:var(--ink-3);text-align:center;
  border:1px dashed rgba(17,16,22,.22);border-radius:3px;
  background:rgba(255,255,255,.5);
}
.drop b{font-size:19px;font-weight:400;line-height:1}
/* Nothing can be dropped any more — edit.js is not loaded — so an
   empty slot holds its space quietly instead of offering to take a
   file it cannot accept. */
.shot.is-empty .drop,
body.is-editing .shot .drop{display:none}
body.is-editing .shot .drop{background:rgba(255,255,255,.72);opacity:0;transition:opacity .2s}
body.is-editing .shot:hover .drop{opacity:1}
.shot.is-empty .drop{opacity:1}
.shot.is-over .drop{
  opacity:1;border-color:var(--accent);color:var(--accent);
  background:rgba(255,255,255,.9);
}
body.is-editing .shot{cursor:pointer}

/* ── section openers and the one full-page picture ───────
   With nothing cropped there is no room for type over a bleed, so the
   copy sits above the picture on the ground instead of on top of it. */
.type-opener,.type-full{align-content:stretch}
.type-opener .slide-inner,
.type-full .slide-inner{
  display:grid;grid-template-rows:auto 1fr;gap:clamp(18px,2.6vw,38px);
  height:100%;width:100%;
}
.opener-copy{max-width:min(100%,92ch)}
.opener-copy .dh{margin-bottom:0}
.opener-copy .body{margin-top:14px}
.shot.bleed{--cap:100%;width:100%;height:100%;min-height:0}
.shot.bleed img{max-height:100%}

/* ── the journey, centred on its own rule ────────────────
   One lead picture above each era, the year sitting on the line, two
   more beneath. Every slot starts empty and takes a dropped file. */
.type-timeline{align-content:center}
.sheet{width:100%}
.eras{
  display:grid;grid-template-columns:repeat(7,1fr);
  gap:clamp(8px,1.1vw,18px);
  margin:0;padding:0;list-style:none;align-items:stretch;
}
.era{display:flex;flex-direction:column;position:relative}
/* every other era sits on a soft white band, so the columns read as
   separate periods rather than one continuous run */
.era::before{
  content:"";position:absolute;z-index:0;
  left:calc(-1 * clamp(4px,.55vw,9px));right:calc(-1 * clamp(4px,.55vw,9px));
  top:-30px;bottom:-26px;
  background:linear-gradient(180deg,
    rgba(255,255,255,0) 0%, #fff 16%, #fff 84%, rgba(255,255,255,0) 100%);
  opacity:0;pointer-events:none;
}
.era:nth-child(even)::before{opacity:1}
.era > *{position:relative;z-index:1}

/* above the line */
.shot.lead{--cap:20vh;align-items:flex-end;margin-bottom:12px;flex:1 1 auto}
.shot.lead.is-empty{min-height:clamp(84px,14vh,150px)}

/* the anchor: a dot, not a timeline axis */
.mark{
  position:relative;padding-top:15px;margin-bottom:12px;
}
.mark::before{
  content:"";position:absolute;top:0;left:0;
  width:7px;height:7px;background:var(--accent);border-radius:50%;
  translate:0 -50%;
}
/* a theme, not a date: it wraps to two lines where it needs to */
.mark b{
  display:block;font-size:12px;font-weight:600;letter-spacing:.01em;
  line-height:1.25;text-wrap:balance;margin-bottom:3px;
}
.mark span{display:block;font-size:10.5px;line-height:1.35;color:var(--ink-3)}

/* below the line */
/* two across, as many rows as there are pictures */
.unders{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.shot.under{--cap:9vh}
.shot.under.is-empty{min-height:clamp(40px,5.6vh,62px)}
.shot.under .drop b{font-size:14px}
.shot.under .drop{font-size:0}

@media (max-width:1100px){
  .eras{grid-template-columns:repeat(4,1fr);row-gap:28px}
}
@media (max-width:640px){
  .eras{grid-template-columns:repeat(2,1fr)}
  .shot.lead{--cap:16vh}
}

/* ── selected-work cards ─────────────────────────────────── */
.wcards{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
  gap:clamp(16px,2.1vw,34px);
  margin:0;padding:0;list-style:none;align-items:start;
}
/* every thumbnail on the same grid: one width, one 4:3 box, the
   picture fitted whole inside it */
.cardshot{
  --cap:100%;
  width:100%;aspect-ratio:4/3;
  background:rgba(17,16,22,.032);border-radius:3px;
  margin-bottom:clamp(14px,1.6vw,22px);
  overflow:hidden;            /* the box holds its size; the picture grows inside it */
}
.cardshot.is-empty{min-height:0}
.cardshot img{
  /* Sized by the box rather than by the file, so the slot has a real
     rectangle even before the picture has decoded — the flight needs
     somewhere definite to aim. `contain` still crops nothing. */
  width:100%;height:100%;object-fit:contain;max-width:none;max-height:none;
  /* both properties in one shorthand: re-declaring `transition` in a
     more specific rule replaces this outright, which is what was
     making the hover jump instead of ease */
  transition:transform .62s cubic-bezier(.22,.61,.36,1),
             opacity .35s ease;
  will-change:transform;
  backface-visibility:hidden;
}

/* the whole card is the target: the picture pushes in, and the card's
   own three lines take the accent */
.wcard:hover .cardshot img,
.wcard:focus-within .cardshot img{transform:scale(1.075)}
.wcard:hover b,  .wcard:focus-within b,
.wcard:hover h3, .wcard:focus-within h3,
.wcard:hover p,  .wcard:focus-within p{color:var(--accent)}
.wcard b, .wcard h3, .wcard p{transition:color .3s ease}

@media (prefers-reduced-motion:reduce){
  .cardshot img{transition:none}
  .wcard:hover .cardshot img{transform:none}
}
.wcards b{
  display:block;font-size:clamp(10.5px,.72vw,12px);letter-spacing:.16em;
  color:var(--ink-3);font-weight:500;margin-bottom:clamp(8px,.9vw,12px);
  font-variant-numeric:tabular-nums;
}
.wcards h3{
  margin:0 0 clamp(4px,.5vw,8px);
  font-size:clamp(17px,1.5vw,24px);font-weight:600;letter-spacing:-.026em;
}
.wcards p{margin:0;font-size:clamp(13px,.98vw,16px);color:var(--ink-2);line-height:1.45}

@media (max-width:1024px){
  .wcards{grid-template-columns:repeat(2,1fr);gap:clamp(18px,3vw,30px)}
}
@media (max-width:540px){
  .wcards{grid-template-columns:1fr;gap:22px}
  .cardshot{aspect-ratio:16/10}
}

/* ── big figures ─────────────────────────────────────────── */
.figures{display:flex;gap:clamp(30px,6vw,110px);margin:0 0 clamp(26px,3vw,44px);padding:0;list-style:none}
.figures b{
  display:block;font-weight:500;letter-spacing:-.05em;line-height:.9;
  font-size:clamp(52px,9vw,150px);
  font-family:Poppins,Inter,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
}
.figures span{display:block;margin-top:10px;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3)}
.close{
  margin:0;max-width:min(100%,64ch);padding-top:clamp(18px,2vw,26px);
  border-top:1px solid var(--line);
  font-size:clamp(15px,1.3vw,20px);line-height:1.45;color:var(--ink);
  letter-spacing:-.015em;
}

/* ── insight cards ───────────────────────────────────────── */
.quad.insight li > b{margin-bottom:12px}
.quad.insight h3{margin:0 0 6px}

/* ── heading, a note beside it, the work underneath ───────
   The project sheets are wide: a full-width picture needs its
   heading out of the way rather than beside it, so the top row
   carries the heading and one short note, and the picture takes
   the whole measure below. */
.type-note{align-content:center}
/* these headings run long and sit beside a note — the ghost echo
   behind them lands on the note instead of behind the heading */
.type-note .dh .ghost{display:none}
.notehead{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(28px,5vw,80px);align-items:start;
  margin:0 0 clamp(22px,3vw,44px);
}
.notehead.solo{grid-template-columns:1fr}
.notehead .dh{margin:0}
.note{
  margin:0;max-width:min(100%,62ch);align-self:center;
  font-size:clamp(13.5px,1.02vw,16px);line-height:1.62;color:var(--ink-2);
}
@media (max-width:900px){
  .notehead{grid-template-columns:1fr;gap:clamp(14px,2.4vw,22px)}
}

/* one picture, as wide as the slide allows and as tall as fits */
.shot.wide{--cap:56vh;width:100%}
.shot.wide.is-empty{min-height:clamp(140px,30vh,320px)}

/* the five deck pages sit three across, the remainder on one more row */
.shots.panelgrid{grid-template-columns:repeat(3,1fr);align-items:start}
.shots.panelgrid .shot{--cap:26vh}
@media (max-width:860px){
  .shots.panelgrid{grid-template-columns:repeat(2,1fr)}
}

/* ── the work cards are the way in ───────────────────────── */
.wcard{position:relative}
.wgo{
  position:absolute;inset:0;z-index:3;
  border:0;background:none;padding:0;cursor:pointer;
  border-radius:4px;
}
.wgo:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
/* in edit mode the card belongs to the picture again */
body.is-editing .wgo{display:none}

/* ── and the way back out ────────────────────────────────── */
/* on a project page the header is just the way back */
body.in-project .wordmark,
body.in-project .role{display:none}
body.in-project .backwork{top:var(--edge)}
/* the space the name gave up goes to the work: the top pad only has
   to clear the back pill now, not a whole header line */
body.in-project .slide{
  padding-block:calc(var(--pad) + 44px) calc(var(--pad) * 1.8);
}

.backwork{
  position:fixed;z-index:25;
  left:var(--pad);top:calc(var(--edge) + clamp(26px,2.6vw,34px));
  display:flex;align-items:center;gap:8px;
  border:1px solid var(--line);border-radius:999px;
  background:rgba(255,255,255,.78);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  font:inherit;font-size:11.5px;letter-spacing:.06em;color:var(--ink-2);
  padding:7px 15px;cursor:pointer;
  transition:color var(--t),border-color var(--t),background var(--t);
}
/* display:flex above would otherwise beat [hidden]'s display:none */
.backwork[hidden]{display:none}
.backwork:hover{color:var(--ink);border-color:rgba(17,16,22,.3);background:#fff}
.backwork:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media (max-width:860px){
  /* it used to move to the bottom, which put it under the footer bar
     and — because body.in-project also sets top — stretched it down
     the whole screen. It stays on the top edge on every size. */
  .backwork{top:var(--edge);bottom:auto;left:var(--pad);padding:6px 12px;font-size:11px}
}

/* ── the clickable prototype ──────────────────────────────
   The screen is the affordance: it fills the space left under the
   heading, scrolls inside its own frame for the tall pages, and a
   click anywhere on it takes the next step. */
/* every level of the stack has to give up its natural height, or the
   screen frame grows to the picture and pushes the steps off the page */
.type-proto{align-content:stretch;grid-template-rows:minmax(0,1fr)}
.type-proto .slide-inner{
  display:grid;grid-template-rows:auto minmax(0,1fr);
  gap:clamp(14px,2vw,26px);height:100%;min-height:0;
}
.type-proto .notehead{margin:0}
.type-proto .dh .ghost{display:none}

.proto{display:grid;grid-template-rows:auto 1fr auto;gap:clamp(10px,1.2vw,16px);min-height:0}

/* the product's own four sections, as the way in */
.proto-tabs{display:flex;flex-wrap:wrap;gap:6px}
.proto-tab{
  border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.7);
  font:inherit;font-size:12px;letter-spacing:.04em;color:var(--ink-2);
  padding:7px 16px;cursor:pointer;
  transition:color var(--t),background var(--t),border-color var(--t);
}
.proto-tab:hover{color:var(--ink);border-color:rgba(17,16,22,.28)}
.proto-tab[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.proto-tab:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* the frame — a window onto a page that may be taller than it */
.proto-stage{
  position:relative;min-height:0;overflow:auto;overscroll-behavior:contain;
  border:1px solid var(--line);border-radius:5px;background:#fff;
  box-shadow:0 1px 2px rgba(17,16,22,.05), 0 14px 34px rgba(17,16,22,.07);
  cursor:pointer;
}
.proto-screen{margin:0;display:block}
.proto-screen img{display:block;width:100%;height:auto}

/* the steps inside the section, and where you are in them */
.proto-foot{
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(12px,2vw,28px);flex-wrap:wrap;
}
.proto-steps{display:flex;flex-wrap:wrap;gap:5px}
.proto-step{
  display:flex;align-items:center;gap:7px;
  border:0;border-radius:999px;background:none;
  font:inherit;font-size:11.5px;letter-spacing:.03em;color:var(--ink-3);
  padding:5px 11px;cursor:pointer;transition:color var(--t),background var(--t);
}
.proto-step i{
  font-style:normal;font-size:9.5px;font-variant-numeric:tabular-nums;
  width:15px;height:15px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line);color:var(--ink-3);
}
.proto-step:hover{color:var(--ink);background:rgba(17,16,22,.05)}
.proto-step[aria-current="true"]{color:var(--ink);background:rgba(17,16,22,.06)}
.proto-step[aria-current="true"] i{background:var(--accent);border-color:var(--accent);color:#fff}
.proto-step:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.proto-caption{
  margin:0;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);white-space:nowrap;
}
@media (max-width:860px){
  .proto-caption{display:none}
}

/* ── the screens, on their own ────────────────────────────
   Nothing is cropped anywhere in this deck and least of all here:
   each screen is fitted whole to the height available, so the tall
   pages simply take less width than the short ones. */
.type-collage{align-content:center}
.collage{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(10px,1.4vw,26px);width:100%;
}
.shot.plate{
  --cap:88vh;flex:0 1 auto;min-width:0;
  align-items:center;
}
.shot.plate img{
  max-height:var(--cap);width:auto;max-width:100%;
  border-radius:3px;
  box-shadow:0 1px 2px rgba(17,16,22,.06), 0 10px 28px rgba(17,16,22,.07);
}
.shot.plate.is-empty{min-height:clamp(160px,34vh,340px);width:100%}
@media (max-width:860px){
  .collage{flex-wrap:wrap}
  .shot.plate{--cap:38vh}
}

/* ── a prototype, and a film ──────────────────────────────
   Both fill whatever the heading leaves, and neither is cropped. */
.type-embed,.type-film{align-content:stretch}
.type-embed .slide-inner,.type-film .slide-inner{
  display:grid;grid-template-rows:auto minmax(0,1fr);
  gap:clamp(14px,2vw,26px);height:100%;min-height:0;
}
.type-embed .notehead,.type-film .notehead{margin:0}
.type-embed .dh .ghost,.type-film .dh .ghost{display:none}

.frame{
  position:relative;min-height:0;display:grid;
  grid-template-rows:minmax(0,1fr) auto;gap:10px;
}
.frame iframe{
  width:100%;height:100%;border:1px solid var(--line);border-radius:5px;
  background:#fff;box-shadow:0 1px 2px rgba(17,16,22,.05),0 14px 34px rgba(17,16,22,.07);
}
.frame-note{
  margin:0;font-size:11px;letter-spacing:.06em;color:var(--ink-3);text-align:right;
}
.frame-note a{color:var(--ink-2)}
.frame-note a:hover{color:var(--accent)}

.frame.film{grid-template-rows:minmax(0,1fr)}
.frame.film video{
  width:100%;height:100%;min-height:0;display:block;
  object-fit:contain;background:#111016;border-radius:5px;
  box-shadow:0 1px 2px rgba(17,16,22,.05),0 14px 34px rgba(17,16,22,.09);
}

/* ── Selected Archive ─────────────────────────────────────
   Breadth at pace. Alignment and margins hold steady across the
   section; only the composition changes, so it reads as a curated
   wall rather than a run of identical cards. No boxes, no rounded
   rectangles — the pictures, the type and the gaps do the work. */
.type-arc{align-content:center}
.type-arc .slide-inner{display:grid;grid-template-rows:auto 1fr;gap:clamp(18px,2.4vw,34px)}
.arc-head{
  display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);
  gap:clamp(20px,4vw,64px);align-items:baseline;
}
.arc-head .dh{margin:0;font-size:clamp(24px,2.9vw,42px)}
.arc-head .dh .ghost{display:none}
.line{
  margin:0;max-width:min(100%,64ch);color:var(--ink-2);
  font-size:clamp(13px,.98vw,15.5px);line-height:1.6;
}
@media (max-width:900px){
  .arc-head{grid-template-columns:1fr;gap:10px}
}

.arc-grid{display:grid;gap:clamp(12px,1.6vw,26px);align-items:center;min-height:0}
.arc .shot{--cap:100%}
.arc .shot img{max-height:56vh}
/* .shot is a flex row, so a caption inside it lands beside the
   picture unless the box is told to stack */
.arc .shot:has(.cap){flex-direction:column}
/* the drop zone covers the figure, so on a captioned empty slot it
   has to stop short of the name underneath */
.arc .shot.is-empty:has(.cap) .drop{bottom:28px}
.cap{
  margin-top:8px;font-size:10.5px;letter-spacing:.06em;
  color:var(--ink-3);text-align:center;width:100%;
}

/* one dominant piece, the rest gathered beside it */
.arc-hero{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
  gap:clamp(16px,2.4vw,40px);align-items:center;min-height:0}
.arc-hero > .shot.lead img{max-height:64vh}
.arc-hero .arc-grid{grid-template-columns:repeat(2,1fr)}
.arc-hero .arc-grid .shot img{max-height:26vh}
@media (max-width:900px){ .arc-hero{grid-template-columns:1fr} }

/* an editorial wall: six columns, pieces given the room they earn */
.arc-wall .arc-grid{grid-template-columns:repeat(6,1fr)}
.arc-wall .span-2{grid-column:span 2}
.arc-wall .span-3{grid-column:span 3}
.arc-wall .shot img{max-height:34vh}
@media (max-width:900px){
  .arc-wall .arc-grid{grid-template-columns:repeat(2,1fr)}
  .arc-wall .span-2,.arc-wall .span-3{grid-column:span 1}
}

/* one composition, given the whole page: title above, the work
   beneath it, and at most one quiet line under that */
.arc-sheet .arc-hero{grid-template-columns:1fr;gap:0}
.arc-sheet .shot.lead img{max-height:62vh;width:auto;max-width:100%}
.arc-sheet .shot.lead.is-empty{min-height:40vh;width:100%}
.arc-foot{
  margin:clamp(14px,1.8vw,24px) 0 0;
  font-size:clamp(12.5px,.95vw,15px);color:var(--ink-2);letter-spacing:-.005em;
}

/* an even row */
.arc-row .arc-grid{grid-template-columns:repeat(3,1fr)}
.arc-row .shot img{max-height:52vh}
@media (max-width:760px){ .arc-row .arc-grid{grid-template-columns:1fr} }

/* the marks, on nothing but the ground */
.arc-logos .arc-grid{
  grid-template-columns:repeat(3,1fr);
  gap:clamp(22px,4vw,72px) clamp(20px,4vw,64px);
  align-items:center;justify-items:center;
}
.arc-logos .shot img{max-height:11vh;width:auto;max-width:82%}
.arc-logos .shot.is-empty{min-height:clamp(70px,12vh,120px);width:100%}
.arc-logos .cap{
  margin-top:14px;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-2);
}
@media (max-width:760px){ .arc-logos .arc-grid{grid-template-columns:repeat(2,1fr)} }

/* a labelled shelf inside a page, and a quiet figure line */
.arc-sub{margin-top:clamp(14px,2vw,26px)}
.arc-label{
  margin:0 0 10px;font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3);
}
.arc-grid.tight{grid-template-columns:repeat(9,1fr);gap:clamp(6px,.8vw,12px)}
.arc-grid.tight .shot img{max-height:9vh}
@media (max-width:760px){ .arc-grid.tight{grid-template-columns:repeat(5,1fr)} }
.arc-stats{
  margin:clamp(12px,1.6vw,20px) 0 0;font-size:11px;letter-spacing:.1em;
  color:var(--ink-3);font-variant-numeric:tabular-nums;
}

/* ── the section opener ───────────────────────────────────
   Type on the left, a sparse mosaic of crops on the right, and the
   pixel field left visible behind it all. */
.type-arcopen{align-content:center}
.arcopen{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(28px,5vw,86px);align-items:center;
}
.arcopen-sub{
  margin:0 0 clamp(14px,1.8vw,22px);
  font-size:clamp(15px,1.4vw,21px);color:var(--ink);letter-spacing:-.018em;
}
.arcopen .dh{font-size:clamp(30px,4.4vw,60px)}
/* what the section holds, one line each, on the same hairlines the
   contact page uses. Each line goes to its own page. */
.arclist{margin:0;padding:0;list-style:none}
.arclist li{border-top:1px solid var(--line)}
.arclist li:last-child{border-bottom:1px solid var(--line)}
.arclist button,.arclist > li > span{
  display:block;width:100%;text-align:left;
  border:0;background:none;padding:clamp(13px,1.5vw,20px) 0;
  font:inherit;font-size:clamp(15px,1.45vw,21px);
  letter-spacing:-.018em;color:var(--ink);
  transition:color var(--t),padding-left var(--t);
}
.arclist button{cursor:pointer}
.arclist button:hover{color:var(--accent);padding-left:10px}
.arclist button:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
@media (max-width:900px){ .arcopen{grid-template-columns:1fr} }

/* ── the quiet statement slide ───────────────────────────── */
.slide-inner.quote{width:100%;max-width:none}
.slide-inner.quote .dh{font-size:clamp(30px,5vw,68px)}

/* ── closing ─────────────────────────────────────────────── */
.type-closing .name{margin:clamp(20px,3vw,40px) 0 4px;font-size:clamp(17px,1.5vw,22px);font-weight:600;letter-spacing:-.02em}
.type-closing .disciplines{margin:0 0 clamp(24px,3vw,40px);font-size:13px;color:var(--ink-3);letter-spacing:.02em}

/* ── the edit bar ────────────────────────────────────────── */
.editbar{
  position:fixed;right:var(--pad);bottom:calc(var(--pad) + 34px);z-index:60;
  display:flex;gap:4px;padding:4px;
  border:1px solid var(--line);border-radius:999px;
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.editbar button{
  border:0;background:none;cursor:pointer;
  font:inherit;font-size:11.5px;letter-spacing:.04em;color:var(--ink-2);
  padding:6px 12px;border-radius:999px;
}
.editbar button:hover{background:rgba(17,16,22,.06);color:var(--ink)}
.editbar button[aria-pressed="true"]{background:var(--ink);color:#fff}
.editbar button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media (max-width:860px){ .editbar{bottom:calc(var(--pad) + 62px);right:var(--pad)} }

body.is-editing [data-edit]{
  outline:1px dashed rgba(220,79,66,.5);outline-offset:3px;border-radius:2px;
}
body.is-editing [data-edit]:focus{outline:2px solid var(--accent);background:rgba(255,255,255,.7)}
body.is-editing .opener-copy [data-edit]{outline-color:rgba(255,255,255,.55)}

/* ── contact rows on the closing slide ───────────────────── */
.contact-list{margin:0;padding:0;list-style:none;max-width:min(100%,780px)}
.contact-list li{
  display:flex;gap:clamp(14px,2vw,28px);align-items:baseline;
  padding:12px 0;border-top:1px solid var(--line);
}
.contact-list li:last-child{border-bottom:1px solid var(--line)}
.contact-list .k{
  flex:0 0 clamp(64px,7vw,110px);
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
}
.contact-list a{
  font-size:clamp(15px,1.4vw,20px);font-weight:500;letter-spacing:-.02em;
  text-decoration:none;border-bottom:1px solid rgba(17,16,22,.2);padding-bottom:1px;
}
.contact-list a:hover{border-bottom-color:var(--ink)}

/* ── slide three: scattered, then ordered ────────────────── */
.type-postits{padding:0;align-content:stretch}
.slide.is-bare .rail{display:none}

.postits{
  position:relative;width:100%;height:100%;overflow:hidden;
  cursor:default;
}
.pt{
  position:absolute;top:0;left:0;display:block;
  border-radius:2px;
  box-shadow:0 1px 2px rgba(17,16,22,.07), 0 8px 18px rgba(17,16,22,.05);
  transition:transform .92s cubic-bezier(.22,.68,.32,1);
  will-change:transform;
}
.pt-title{
  position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:2;
  margin:0;width:min(62%,980px);text-align:center;
  font-weight:600;letter-spacing:-.032em;line-height:1.1;
  font-size:clamp(22px,2.9vw,42px);
  text-wrap:balance;
  opacity:0;transform:translateY(9px);
  transition:opacity .5s ease .34s, transform .6s cubic-bezier(.22,.68,.32,1) .34s;
  pointer-events:none;
}
.postits.is-ordered .pt-title{opacity:1;transform:none}

@media (max-width:860px){
  .pt-title{width:74%;font-size:clamp(19px,5vw,28px)}
}
@media (prefers-reduced-motion:reduce){
  .pt{transition:none}
  .pt-title{transition:none}
}
.postits.no-anim .pt,
.postits.no-anim .pt-title{transition:none}

/* remove a picture you have gone off — edit mode only, and only
   where there is something to remove */
.clear{
  position:absolute;top:8px;right:8px;z-index:2;display:none;
  width:26px;height:26px;padding:0;border:0;border-radius:50%;
  background:rgba(17,16,22,.72);color:#fff;
  font:400 15px/1 Inter,system-ui,sans-serif;cursor:pointer;
  place-items:center;
}
.clear:hover{background:var(--accent)}
.clear:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
body.is-editing .shot:not(.is-empty) .clear{display:grid}

/* ── the four projects carry through to the next page ────── */
.flightdeck{position:fixed;inset:0;z-index:50;pointer-events:none}
.flier{
  position:fixed;object-fit:contain;transform-origin:50% 50%;
  transition:transform 1.15s cubic-bezier(.25,.7,.25,1),
             opacity .34s ease;
  will-change:transform,opacity;
}
.flier.is-handing-over{opacity:0}

/* everything the journey does not carry forward steps back */
.type-timeline.is-departing .shot:not(.is-hero),
.type-timeline.is-departing .mark,
.type-timeline.is-departing .rail{
  opacity:0;transition:opacity .52s ease;
}
.type-timeline.is-departing .era::before{opacity:0;transition:opacity .52s ease}
/* left to right, so the timeline clears like a wave rather than a switch */
.type-timeline.is-departing .era:nth-child(1) *{transition-delay:0s}
.type-timeline.is-departing .era:nth-child(2) *{transition-delay:.03s}
.type-timeline.is-departing .era:nth-child(3) *{transition-delay:.06s}
.type-timeline.is-departing .era:nth-child(4) *{transition-delay:.09s}
.type-timeline.is-departing .era:nth-child(5) *{transition-delay:.12s}
.type-timeline.is-departing .era:nth-child(6) *{transition-delay:.15s}
.type-timeline.is-departing .era:nth-child(7) *{transition-delay:.18s}
.type-timeline.is-departing .era:nth-child(8) *{transition-delay:.21s}
.type-timeline.is-departing .shot.is-hero{opacity:0}   /* the flier has it now */

/* The card pictures stay hidden until the fliers land on them —
   anything else would show the same picture twice. */
/* The page normally rises 12px as it becomes active. During the
   flight that would mean measuring a target that is still moving, and
   landing the pictures 12px low — so the destination sits still. */
.type-cards.is-arriving{transform:none;transition:opacity var(--t-slide)}
.type-cards.is-arriving .cardshot img{opacity:0}
.type-cards.has-landed .cardshot img{opacity:1}

/* The words, though, arrive while the pictures are still arranging —
   staggered, so the page assembles rather than switching on. */
.type-cards.is-arriving .dh,
.type-cards.is-arriving .lede,
.type-cards.is-arriving .wcards b,
.type-cards.is-arriving .wcards h3,
.type-cards.is-arriving .wcards p{
  opacity:0;transform:translateY(14px);
}
.type-cards.is-settling .dh,
.type-cards.is-settling .lede,
.type-cards.is-settling .wcards b,
.type-cards.is-settling .wcards h3,
.type-cards.is-settling .wcards p{
  opacity:1;transform:none;
  transition:opacity .72s ease, transform .82s cubic-bezier(.22,.68,.32,1);
}
.type-cards.is-settling .dh        {transition-delay:.14s}
.type-cards.is-settling .lede      {transition-delay:.26s}
.type-cards.is-settling .wcards b  {transition-delay:.46s}
.type-cards.is-settling .wcards h3 {transition-delay:.54s}
.type-cards.is-settling .wcards p  {transition-delay:.62s}

/* ── the cover's field carries on, quieter, through 02–04 ── */
body[data-slide="1"] #veil{opacity:.58}
body[data-slide="2"] #veil{opacity:.66}
body[data-slide="3"] #veil{opacity:.74}


/* ═══════════════════════════════════════════════════════════
   Small screens, last word
   The footer bar and the back pill are fixed, so the work has to
   stop clear of both. These sit at the end of the file on purpose:
   body.in-project sets its own padding further up, and the later
   rule is the one that wins.
   ═══════════════════════════════════════════════════════════ */
@media (max-width:860px){
  .slide{
    padding-block:calc(var(--edge) + 26px) calc(var(--edge) + 58px);
  }
  body.in-project .slide{
    padding-block:calc(var(--edge) + 52px) calc(var(--edge) + 58px);
  }
  /* the rule between the counter and the arrows has little room left */
  .progress{margin:0 12px}
  .arrow{width:34px;height:34px}
  .arrow svg{width:17px;height:17px}
  .counter{font-size:11px;letter-spacing:.1em}
}
@media (max-width:420px){
  .arclist button,.arclist > li > span{font-size:15px;padding:11px 0}
  .arc-head .dh{font-size:22px}
}

@media (max-width:540px){
  /* one column made three cards taller than the screen; two fit.
     minmax(0,1fr) rather than 1fr: the card pictures carry
     max-width:none for the flight, which makes the track's
     min-content their intrinsic width and pushes the grid off-screen. */
  .wcards{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .cardshot{aspect-ratio:4/3;margin-bottom:8px}
  .wcards h3{font-size:14px;margin-bottom:2px}
  .wcards p{font-size:11.5px;line-height:1.35}
  .wcards b{font-size:9.5px;margin-bottom:5px}
}

@media (max-width:860px){
  /* Eight eras and forty pictures will not fit a phone at any size
     worth looking at, so the journey scrolls instead of being crushed.
     A vertical swipe already never changes slide — the swipe handler
     wants horizontal movement — so this costs the deck nothing. */
  .type-timeline{
    align-content:start;
    overflow-y:auto;overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  .type-timeline .sheet{padding-bottom:10px}
}

/* nothing inside a slide may be wider than the slide */
.slide-inner,.about,.split,.collage,.arc,.sheet{max-width:100%;min-width:0}

/* ── Selected work: bigger thumbnails ─────────────────────
   The pictures are 4:3 and sized by their column, so the only way to
   make them larger is to give the columns more width. The slide drops
   the wide gutter, and the title moves alongside the line beneath it
   rather than stacking above it, which returns the height that costs. */
.type-cards{padding-inline:var(--pad)}
.type-cards .slide-inner{
  display:grid;grid-template-rows:auto auto;
  gap:clamp(16px,2.2vw,34px);align-content:center;
}
.cards-head{
  display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);
  gap:clamp(20px,4vw,64px);align-items:baseline;
}
.cards-head .dh{margin:0}
.cards-head .lede{margin:0;align-self:center}
.type-cards .wcards{gap:clamp(14px,1.6vw,26px)}
@media (max-width:900px){
  .cards-head{grid-template-columns:1fr;gap:8px}
}

/* .shot.cardshot up at line 378 sets an explicit height, and an
   explicit height beats aspect-ratio — which is why these were locked
   at 150px tall however wide the column got. Height goes back to auto
   so the 4:3 box can do its job. */
.wcards .cardshot{height:auto;aspect-ratio:4/3;--cap:100%}
.wcards .cardshot.is-empty{min-height:0}
/* the line now sits beside the title, where the echo used to fall */
.cards-head .dh .ghost{display:none}

/* ── two pieces, matched in height ────────────────────────
   The poster and the poem belong together, so both are driven from
   the same height and each takes whatever width its own proportions
   ask for. The gap is deliberately tight — they read as one piece. */
.arc-pair .arc-grid{
  display:flex;align-items:stretch;justify-content:center;
  gap:clamp(8px,1vw,18px);height:100%;min-height:0;
}
.arc-pair .arc-grid .shot{
  flex:0 1 auto;min-width:0;height:100%;
  align-items:center;
}
.arc-pair .arc-grid .shot img{
  height:100%;width:auto;max-width:100%;max-height:60vh;
  object-fit:contain;
}
.type-arc.arc-pair-slide .slide-inner{grid-template-rows:auto minmax(0,1fr)}
@media (max-width:760px){
  .arc-pair .arc-grid{flex-wrap:wrap;height:auto}
  .arc-pair .arc-grid .shot{height:auto;flex:1 1 100%}
  .arc-pair .arc-grid .shot img{height:auto;width:100%;max-height:32vh}
}