/* ==========================================================================
   The Designory — Nicola Goodwin
   Direction v2. Rounded panel over dark ground, frosted pill nav,
   gradient hero, typographic project index.
   ========================================================================== */

:root{
  --paper:      #F4EEE8;
  --paper-deep: #EAE1D8;
  --shell-bg:   #17130F;   /* dark ground the panel sits on */
  --ink:        #1C1814;
  --ink-soft:   #6E645A;
  --ink-faint:  #9D9287;
  --rule:       #D9CEC2;
  --accent:     #8A4032;
  --accent-lt:  #D98A6A;

  --display: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:    "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --measure: 32rem;
  --gutter: clamp(1.25rem, 5vw, 5.5rem);
  --max: 82rem;
  --radius: clamp(14px, 2.2vw, 30px);
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; background:var(--paper) }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:1rem; line-height:1.62;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

img{ max-width:100%; display:block }
a{ color:inherit }

/* ---------- gradient header panel ---------- */
.heropanel,.band.lead{
  position:relative;
  margin:clamp(.4rem,.9vw,.85rem);
  border-radius:var(--radius);
  overflow:hidden;
  isolation:isolate;
  color:var(--paper);
  background:
    radial-gradient(at 16% 20%, #D9754F 0px, transparent 52%),
    radial-gradient(at 80% 10%, #E8A76B 0px, transparent 48%),
    radial-gradient(at 90% 66%, #C97B84 0px, transparent 52%),
    radial-gradient(at 32% 86%, #8A4032 0px, transparent 54%),
    radial-gradient(at 58% 46%, #A84A2F 0px, transparent 58%),
    #5B2233;
}
/* ---------- living mesh ----------
   Six soft colour fields drifting over a plum ground. Drawn by the browser,
   not decoded from a file, so there is no block structure and nothing to
   download. Every layer moves by transform only — GPU, no repaint.
   Dials: --mesh-speed scales all six durations. */
.mesh{
  position:absolute; inset:0; z-index:0; overflow:hidden;
  pointer-events:none; border-radius:inherit; isolation:isolate;
}
.b{
  position:absolute; display:block; border-radius:50%;
  mix-blend-mode:screen; will-change:transform;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
  animation-direction:alternate;
}
/* each field: its own colour, size, corner and tempo */
.b1{ width:86%; padding-bottom:86%; left:-18%; top:-26%;
  background:radial-gradient(circle at 50% 50%, rgba(232,167,107,.46) 0%, rgba(232,167,107,.20) 36%, rgba(232,167,107,0) 68%);
  animation-name:m1; animation-duration:calc(1.4s * var(--mesh-speed,1)); animation-delay:.00s }
.b2{ width:98%; padding-bottom:98%; right:-30%; top:-34%;
  background:radial-gradient(circle at 50% 50%, rgba(217,117,79,.42) 0%, rgba(217,117,79,.18) 38%, rgba(217,117,79,0) 70%);
  animation-name:m2; animation-duration:calc(1.9s * var(--mesh-speed,1)); animation-delay:-.7s }
.b3{ width:66%; padding-bottom:66%; left:16%; top:22%;
  background:radial-gradient(circle at 50% 50%, rgba(168,74,47,.34) 0%, rgba(168,74,47,.15) 40%, rgba(168,74,47,0) 72%);
  animation-name:m3; animation-duration:calc(2.4s * var(--mesh-speed,1)); animation-delay:-1.3s }
.b4{ width:92%; padding-bottom:92%; right:-22%; bottom:-38%;
  background:radial-gradient(circle at 50% 50%, rgba(201,123,132,.40) 0%, rgba(201,123,132,.17) 38%, rgba(201,123,132,0) 70%);
  animation-name:m4; animation-duration:calc(1.6s * var(--mesh-speed,1)); animation-delay:-.4s }
.b5{ width:76%; padding-bottom:76%; left:-22%; bottom:-28%;
  background:radial-gradient(circle at 50% 50%, rgba(138,64,50,.44) 0%, rgba(138,64,50,.19) 40%, rgba(138,64,50,0) 74%);
  animation-name:m5; animation-duration:calc(2.1s * var(--mesh-speed,1)); animation-delay:-1.6s }
.b6{ width:52%; padding-bottom:52%; left:48%; bottom:-22%;
  background:radial-gradient(circle at 50% 50%, rgba(240,196,138,.26) 0%, rgba(240,196,138,.10) 34%, rgba(240,196,138,0) 66%);
  animation-name:m6; animation-duration:calc(2.9s * var(--mesh-speed,1)); animation-delay:-.9s }

@keyframes m1{ from{ transform:translate3d(-14%,-10%,0) scale(.86); opacity:.72 }
               to  { transform:translate3d(46%,38%,0)  scale(1.42); opacity:1 } }
@keyframes m2{ from{ transform:translate3d(16%,-8%,0)  scale(1.34); opacity:1 }
               to  { transform:translate3d(-42%,42%,0) scale(.8);  opacity:.7 } }
@keyframes m3{ from{ transform:translate3d(-34%,22%,0) scale(.82); opacity:.72 }
               to  { transform:translate3d(40%,-34%,0) scale(1.4);  opacity:1 } }
@keyframes m4{ from{ transform:translate3d(14%,14%,0)  scale(.88); opacity:1 }
               to  { transform:translate3d(-50%,-40%,0) scale(1.38); opacity:.72 } }
@keyframes m5{ from{ transform:translate3d(-10%,16%,0) scale(1.36); opacity:.78 }
               to  { transform:translate3d(54%,-42%,0) scale(.82);  opacity:1 } }
@keyframes m6{ from{ transform:translate3d(-38%,18%,0) scale(.84); opacity:1 }
               to  { transform:translate3d(46%,-36%,0) scale(1.5);  opacity:.66 } }

/* depth: darker at the top so the headline holds, plum-deep at the foot */
.mesh::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg,
      rgba(23,19,15,var(--scrim-top,.34)) 0%,
      rgba(23,19,15,0) 44%,
      rgba(91,34,51,var(--scrim-bot,.46)) 100%),
    radial-gradient(120% 95% at 72% 6%,
      rgba(91,34,51,0) 40%, rgba(91,34,51,.40) 100%);
  mix-blend-mode:multiply;
}
@media (prefers-reduced-motion:reduce){ .b{ animation:none !important } }

/* grain */
.heropanel::after,.band.lead::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  opacity:.11; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}
.heropanel > .wrap{ position:relative; z-index:2 }

.wrap{ max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter) }
.narrow{ max-width:var(--measure) }

.label{
  font-size:.6875rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-faint); margin:0; font-weight:500;
}

/* ---------- header: name left, menu right ---------- */
/* just words at the very top. Once the page scrolls under them, each word sits on a flat
   label in the page colour: invisible over the page, there over images and dark bands */
:root{ --hdr-x:clamp(1.25rem,3vw,2.25rem); --hdr-px:.6rem }
.pillnav,.markhome{
  position:fixed; top:clamp(.9rem,2vw,1.5rem); z-index:60;
  transform:translateY(0);
  transition:transform .5s cubic-bezier(.22,1,.36,1), opacity .4s, background .3s, color .3s;
}
/* the words line up with the page edges; the labels grow out past them */
.pillnav{ right:calc(var(--hdr-x) - var(--hdr-px)); display:flex; align-items:center; gap:calc(clamp(2rem,7vw,7.5rem) - 2 * var(--hdr-px)) }
.markhome{ left:calc(var(--hdr-x) - var(--hdr-px)) }
.pillnav a,.markhome{
  font-family:var(--sans); font-size:.8125rem; line-height:1; letter-spacing:0; font-weight:700;
  text-decoration:none; padding:.5rem var(--hdr-px); border-radius:999px; background:transparent;
}
.pillnav a{ text-transform:capitalize; color:rgba(244,238,232,.72); transition:color .2s, background .3s }
.pillnav a:hover,.pillnav a[aria-current="page"]{ color:#F4EEE8 }
.pillnav.light a{ color:var(--ink-soft) }
.pillnav.light a:hover,.pillnav.light a[aria-current="page"]{ color:var(--ink) }
.pillnav.solid a,.markhome.solid{ background:var(--paper) }
.pillnav.tucked,.markhome.tucked{ transform:translateY(-160%); opacity:0 }
.markhome{ color:#F4EEE8 }
.markhome.dark{ color:var(--ink) }

@media (max-width:640px){
  :root{ --hdr-px:.5rem }
  .pillnav{ gap:clamp(.25rem,3vw,.85rem) }
  .pillnav a,.markhome{ font-size:.75rem; padding-block:.45rem }
}

/* ---------- hero ---------- */
.hero{
  position:relative;
  padding-block:clamp(5.5rem,16vh,9.5rem) clamp(3.5rem,10vh,6.5rem);
}

.hero > *{ position:relative; z-index:1 }

.hero h1{
  font-family:var(--display); font-weight:400;
  font-size:clamp(2.1rem,6vw,4.9rem); line-height:1.02;
  letter-spacing:-.014em; margin:0; max-width:17ch;
}
.hero h1 em{ font-style:italic }

/* stepped headline — indent per line, inline rule, italic payoff */
.hero h1.stair{
  max-width:none; display:flex; flex-direction:column;
  align-items:stretch; gap:.015em;
}
.hl{ display:flex; align-items:center; gap:.26em; white-space:nowrap }
.hl.i1{ padding-left:7%; padding-right:19% }
.hl.i2{ padding-left:16% }
.hl.pay{
  justify-content:flex-end; font-style:italic;
  font-size:1.06em; padding-right:1.5%; margin-top:.05em;
}
.rule{
  flex:1 1 4rem; min-width:2.5rem; height:.045em; min-height:2px;
  background:currentColor; opacity:.55;
  margin-left:.45em; align-self:center;
  transform:scaleX(0); transform-origin:left center;
  animation:ruleIn 1.15s cubic-bezier(.19,1,.32,1) both;
}
@keyframes ruleIn{ to{ transform:scaleX(1) } }

/* particle word */
.pw{ position:relative }
.pw.on{ overflow:visible }
.pw.on > span{ color:transparent }
.pwcanvas{ position:absolute; z-index:2; pointer-events:none }
@media (hover:none){ .pw.on > span{ color:inherit } .pwcanvas{ display:none } }

@media (max-width:760px){
  .hero h1.stair{ font-size:clamp(1.7rem,7.6vw,3.1rem) }
  .hl{ gap:.22em }
  .hl.i1{ padding-left:4% }
  .hl.i2{ padding-left:9% }
  .hl.pay{ font-size:1.05em; padding-right:0 }
  .rule{ flex-basis:2rem; min-width:1.5rem }
}


/* word-by-word reveal: mask + rise + rotate + blur */
.w{ display:inline-block; overflow:hidden; vertical-align:bottom; padding:.14em .1em .2em 0; margin:-.14em -.1em -.2em 0 }   /* the mask is bigger than the line so caps, accents, commas and italic overhang all clear it */
.w > span{
  display:inline-block;
  transform:translateY(112%) rotate(6deg);
  filter:blur(9px); opacity:0;
  animation:wordIn 1.05s cubic-bezier(.19,1,.32,1) forwards;
}
@keyframes wordIn{
  60%{ filter:blur(0); opacity:1 }
  to{ transform:translateY(0) rotate(0deg); filter:blur(0); opacity:1 }
}

/* panel settles in */
.heropanel{ animation:panelIn 1.2s cubic-bezier(.19,1,.32,1) both }
@keyframes panelIn{
  from{ transform:scale(.985); opacity:.55; border-radius:calc(var(--radius) * 2) }
  to{ transform:none; opacity:1; border-radius:var(--radius) }
}

.hero .standfirst{
  margin:clamp(1.75rem,4vw,2.75rem) 0 0; max-width:var(--measure);
  font-size:clamp(.9375rem,1.4vw,1.0625rem); color:rgba(244,238,232,.82);
  opacity:0; animation:fadeUp .9s ease .62s forwards;
}
@keyframes fadeUp{ from{ opacity:0; transform:translateY(12px) } to{ opacity:1; transform:none } }

.herofoot{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:2rem clamp(2rem,8vw,6rem); flex-wrap:wrap;
}
.scrollcue{
  margin:0 0 .25rem; color:rgba(244,238,232,.55); white-space:nowrap;
  opacity:0; animation:fadeUp .9s ease .85s forwards;
}
@media (max-width:760px){ .herofoot{ display:block } .scrollcue{ margin-top:clamp(2rem,6vh,3rem) } }

/* ---------- work: offset typographic collage ---------- */
.works-sec{ padding-block:clamp(4rem,12vh,8rem); overflow-x:hidden; overflow-x:clip }
#work{ scroll-margin-top:calc(-1 * clamp(2rem,6vh,4rem)) }   /* Work in the menu lands with the whole list in view */   /* rows waiting off-screen to slide in mustn't widen the page */
.works-head{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:1.5rem; margin-bottom:clamp(3rem,9vw,6rem);
}

.works{ position:relative }

/* the work itself sits behind the names, KJ-style — each drifting at its own
   pace as you scroll; hovering a project brings its image forward and lets the
   others fall back */
.slot{
  position:absolute; z-index:0; margin:0; overflow:hidden; border-radius:4px;
  background:var(--paper-deep);
  transform:translate3d(0,var(--py,0px),0); will-change:transform;
  transition:opacity .5s ease, filter .5s ease;
  display:block;
}
.slot img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.1s cubic-bezier(.22,1,.36,1) }
/* the small tags get a soft paper halo so they still read where an image runs under them */
.work .tag,.work .num{ text-shadow:0 0 2px var(--paper), 0 0 6px var(--paper), 0 0 12px var(--paper) }
/* hovering a project, by its name or its image, keeps its image and lets the others fall back */
.works:has(.work:hover) .slot,
.works:has(.slot:hover) .slot{ opacity:.22; filter:saturate(.6) }
.works:has(.work[data-k="cl"]:hover) .slot.k-cl,
.works:has(.slot.k-cl:hover) .slot.k-cl,
.works:has(.work[data-k="ot"]:hover) .slot.k-ot,
.works:has(.slot.k-ot:hover) .slot.k-ot,
.works:has(.work[data-k="mo"]:hover) .slot.k-mo,
.works:has(.slot.k-mo:hover) .slot.k-mo,
.works:has(.work[data-k="gs"]:hover) .slot.k-gs,
.works:has(.slot.k-gs:hover) .slot.k-gs{ opacity:1; filter:none }
.works:has(.work[data-k="cl"]:hover) .slot.k-cl img,
.works:has(.slot.k-cl:hover) .slot.k-cl img,
.works:has(.work[data-k="ot"]:hover) .slot.k-ot img,
.works:has(.slot.k-ot:hover) .slot.k-ot img,
.works:has(.work[data-k="mo"]:hover) .slot.k-mo img,
.works:has(.slot.k-mo:hover) .slot.k-mo img,
.works:has(.work[data-k="gs"]:hover) .slot.k-gs img,
.works:has(.slot.k-gs:hover) .slot.k-gs img{ transform:scale(1.04) }
.works:has(.slot.k-cl:hover) .work[data-k="cl"] .name,
.works:has(.slot.k-ot:hover) .work[data-k="ot"] .name,
.works:has(.slot.k-mo:hover) .work[data-k="mo"] .name,
.works:has(.slot.k-gs:hover) .work[data-k="gs"] .name{ color:var(--accent) }
.works:has(.slot.k-cl:hover) .work[data-k="cl"] .tag,
.works:has(.slot.k-ot:hover) .work[data-k="ot"] .tag,
.works:has(.slot.k-mo:hover) .work[data-k="mo"] .tag,
.works:has(.slot.k-gs:hover) .work[data-k="gs"] .tag{ color:var(--accent) }
@media (max-width:900px){ .slot{ display:none } }

.work{
  position:relative; z-index:1;
  display:flex; align-items:flex-start; justify-content:center;
  /* only the name and its label are the link, not the whole line */
  width:fit-content; margin-inline:auto; left:var(--off,0%);
  gap:clamp(.9rem,2.4vw,2rem);
  text-decoration:none;
  transform:translateX(var(--slide,0px));
  opacity:var(--wo,1);
  will-change:transform,opacity;
  padding-block:clamp(.15rem,.6vw,.5rem);
}

.work .tag{
  flex:0 0 auto; width:clamp(5.5rem,10vw,9.5rem);
  padding-top:1.2em;
  font-size:.625rem; letter-spacing:.14em; line-height:1.5;
  text-transform:uppercase; color:var(--ink-faint);
  transition:color .3s;
}
.work.tl .tag{ order:0; text-align:right }
.work.tr .tag{ order:2; text-align:left }

.work .name{
  order:1;
  font-family:var(--display); font-weight:400; font-style:italic;
  font-size:clamp(2rem,7.4vw,5.75rem); line-height:1.02;
  letter-spacing:-.018em; color:var(--ink);
  white-space:nowrap;
  transition:color .35s, transform .55s cubic-bezier(.22,1,.36,1);
}
.work .num{
  position:absolute; top:.6em; left:50%; transform:translateX(-50%);
  font-size:.5625rem; letter-spacing:.2em; color:var(--ink-faint);
  opacity:0; transition:opacity .35s;
}
.work:hover .name{ color:var(--accent); transform:translateY(-3px) }
.work:hover .tag{ color:var(--accent) }
.work:hover .num{ opacity:1 }

@media (max-width:760px){
  .work{ flex-direction:column; align-items:flex-start; gap:.15rem; transform:none; padding-block:1rem; width:auto; margin-inline:0; left:0 }
  .work .tag{ order:2 !important; text-align:left !important; width:auto; padding-top:.25rem }
  .work .name{ white-space:normal; font-size:clamp(1.75rem,9vw,2.75rem) }
  .work .num{ position:static; transform:none; opacity:1; display:block; margin-bottom:.15rem }
}

/* ---------- statement band ---------- */
.band{
  background:var(--shell-bg); color:var(--paper); border-radius:var(--radius);
  /* held inside the page's gutters, with air above and before the footer */
  --band-side:calc((var(--gutter) + clamp(.4rem,.9vw,.85rem)) / 2);
  width:calc(100% - 2 * var(--band-side));
  margin:clamp(2.5rem,6vh,4rem) auto clamp(2.75rem,6.5vh,4.5rem);
}
.band .wrap{ padding-block:clamp(3.5rem,10vh,6.5rem); padding-inline:clamp(1.5rem,5vw,4.5rem) }
.band .label{ color:rgba(244,238,232,.45) }
.band .lede{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.5rem,3.6vw,2.75rem); line-height:1.18;
  max-width:24ch; margin:1.5rem 0 2rem;
}
.band .lede em{ font-style:italic; color:var(--accent-lt) }
.band .pill{ color:var(--paper); border-bottom-color:rgba(244,238,232,.4) }

.pill{
  display:inline-block; font-size:.6875rem; letter-spacing:.16em;
  text-transform:uppercase; text-decoration:none; font-weight:500;
  border-bottom:1px solid var(--ink); padding-bottom:4px;
  transition:opacity .2s;
}
.pill:hover{ opacity:.6 }


/* a project whose page isn't built yet: same weight in the index, no dead link */
.work.soon{ cursor:default }
.work.soon .name{ color:var(--ink-soft) }
.work.soon:hover .name{ color:var(--ink-soft); transform:none }
.work.soon .tag::after{
  content:" — in progress"; color:var(--ink-faint); font-style:italic;
}

/* ---------- case study ---------- */
.case-head{ padding-block:clamp(7rem,20vh,12rem) clamp(3rem,8vh,5rem) }
.case-head .label{ margin-bottom:1.5rem; color:rgba(244,238,232,.6) }
.case-head h1{
  font-family:var(--display); font-weight:400;
  font-size:clamp(2rem,5.4vw,4.25rem); line-height:1.04; letter-spacing:-.012em;
  margin:0 0 clamp(2rem,5vw,3rem); max-width:18ch; text-wrap:balance;
}
.case-head h1 em{ font-style:italic }

.meta{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));
  gap:1.25rem 2rem; list-style:none; margin:0; padding:1.5rem 0 0;
  border-top:1px solid rgba(244,238,232,.28);
}
.meta div span{ display:block }
.meta .k{ font-size:.625rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(244,238,232,.55); margin-bottom:.35rem }
.meta .v{ font-size:.9375rem; color:rgba(244,238,232,.95) }

.case-body{ max-width:var(--measure); padding-block:clamp(1rem,3vh,2rem) }
.case-body h2{
  font-family:var(--display); font-weight:400; font-style:italic;
  font-size:clamp(1.375rem,2.6vw,1.875rem); line-height:1.2;
  margin:clamp(2.75rem,6vw,4rem) 0 1rem;
}
.case-body p{ margin:0 0 1.35rem }

blockquote.pull{
  font-family:var(--display); font-weight:400; font-style:italic;
  font-size:clamp(1.5rem,3.2vw,2.25rem); line-height:1.22;
  margin:clamp(3rem,7vw,4.5rem) 0; padding:0; max-width:22ch; color:var(--accent);
}

/* ---------- figures ---------- */
.figure{ margin:clamp(2.5rem,6vw,4.5rem) 0 }
.figure .frame{
  background:var(--paper-deep); border:1px solid var(--rule);
  display:grid; place-items:center; overflow:hidden; border-radius:4px;
}
.figure .frame img{ width:100%; height:100%; object-fit:cover; display:block }
.figure .fig-pair figure,.fig-pair figure{ margin:0 }
.figure .ph{
  font-size:.625rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-faint); text-align:center; padding:2rem 1rem;
}
.figure figcaption{
  font-size:.8125rem; color:var(--ink-faint); margin:.9rem auto 0;
  max-width:var(--measure);
}
/* a bleed figure's caption still belongs in the text column */
.figure.bleed figcaption{ padding-inline:var(--gutter) }
.fig-note{
  font-size:.8125rem; color:var(--ink-faint);
  max-width:var(--measure); margin:.9rem auto 0;
}
.figure.bleed{ margin-inline:calc(var(--gutter) * -1) }
/* a bleed figure that is its own .wrap runs edge to edge — negative margins on a
   max-width box pushed it off the left and short of the right */
.wrap.figure.bleed{ max-width:none; margin-inline:0; padding-inline:0 }
.figure.bleed .frame{ border-inline:0; border-radius:0 }
.fig-pair{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(.75rem,2vw,1.5rem) }
.fig-offset{ display:grid; grid-template-columns:1.55fr 1fr; gap:clamp(.75rem,2vw,1.5rem); align-items:end }
@media (max-width:760px){ .fig-pair,.fig-offset{ grid-template-columns:1fr } }

/* ---------- site footer (KJ pattern) ---------- */
.sitefoot{
  position:relative; display:flex; align-items:stretch;
  background:var(--shell-bg); color:var(--paper);
  border-radius:0; margin:0;   /* a straight block, edge to edge — against the rounded Leading band above */
  overflow:hidden; min-height:clamp(24rem,60vh,38rem);
}

.footmain{ flex:1 1 auto; display:flex; flex-direction:column; min-width:0 }
.foottop{
  display:grid; grid-template-columns:auto auto 1fr; gap:clamp(1.5rem,5vw,4rem);
  padding:clamp(2rem,5vw,3.5rem) clamp(1.5rem,4vw,3.5rem) 0;
}
.footnav{ display:flex; flex-direction:column; gap:.75rem }
.footnav a{
  font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; font-weight:500;
  text-decoration:none; color:var(--paper); opacity:.85; transition:opacity .2s;
}
.footnav a:hover{ opacity:1 }
.footbio{
  justify-self:end; text-align:right; max-width:26rem;
  font-family:var(--display); font-size:clamp(.9375rem,1.5vw,1.125rem);
  line-height:1.5; color:rgba(244,238,232,.8);
}
.footbio a{ color:inherit }

.footbottom{ margin-top:auto; width:100%; overflow:hidden }
.footstrap{
  display:flex; justify-content:space-between; gap:2rem;
  padding:0 clamp(1.5rem,4vw,3.5rem) clamp(.5rem,1.5vw,1rem);
  font-size:.6875rem; letter-spacing:.1em; text-transform:uppercase; font-weight:500;
  color:rgba(244,238,232,.9);
}
.footstrap span{ max-width:14rem; line-height:1.45 }
.footstrap span:last-child{ text-align:right }

.footname{
  display:block; margin:0; padding:0 .01em;
  font-family:var(--display); font-weight:400; font-style:normal;
  font-size:calc(10.3vw - 3px); font-weight:300;   /* sized so the name runs the full width */
  line-height:.82; letter-spacing:-.022em;
  white-space:nowrap; color:var(--paper);
  transform:translateY(.1em);
}

/* the vertical band on the right */
.footband{
  flex:0 0 auto; width:clamp(54px,5.4vw,92px);
  background:var(--paper); color:var(--ink);
  display:flex; flex-direction:column; align-items:center;
  justify-content:space-between; padding-block:clamp(1.25rem,3vw,2.25rem);
  text-decoration:none;
}
.footband .vert{
  writing-mode:vertical-rl; text-orientation:mixed;
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.5rem,3.2vw,2.75rem); letter-spacing:.02em;
  line-height:1; margin-top:clamp(.5rem,2vw,1.5rem);
}
.footband .cta,.footband .totop{
  font-size:.625rem; letter-spacing:.12em; text-transform:uppercase; font-weight:500;
  text-align:center; line-height:1.5; text-decoration:none; color:var(--ink);
  transition:opacity .2s;
}
.footband .cta:hover,.footband .totop:hover{ opacity:.78 }

@media (max-width:760px){
  .sitefoot{ min-height:0; flex-direction:column }
  .footband{
    width:auto; flex-direction:row; align-items:center; justify-content:space-between;
    padding:1rem clamp(1.25rem,4vw,2rem);
  }
  .footband .vert{ writing-mode:horizontal-tb; font-size:1.5rem; margin:0 }
  .foottop{ grid-template-columns:1fr 1fr; gap:1.5rem }
  .footbio{ grid-column:1 / -1; justify-self:start; text-align:left; margin-top:1rem }
  .footstrap{ flex-direction:column; gap:.5rem }
  .footstrap span:last-child{ text-align:left }
  .footname{ font-size:11.2vw }   /* footband drops below on phones, so the name gets the full width */
}

/* ---------- reveal ---------- */
.rv{ opacity:0; transform:translateY(16px); transition:opacity .8s ease, transform .8s cubic-bezier(.22,1,.36,1) }
.rv.in{ opacity:1; transform:none }

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important }
  .rv,.w > span,.hero .standfirst,.scrollcue,.heropanel{ opacity:1 !important; transform:none !important; filter:none !important }
  .rule{ transform:scaleX(1) !important; animation:none !important }
  .pwcanvas{ display:none !important }
  .pw.on > span{ color:inherit !important }
  html{ scroll-behavior:auto }
}

/* ================= work-page modules ================= */

/* discipline band — Juliet's slow marquee of what the work involved */
.tagband{
  overflow:hidden; border-block:1px solid var(--rule);
  margin-top:clamp(.4rem,.9vw,.85rem);
  padding-block:clamp(.85rem,1.8vw,1.3rem);
}
.tagtrack{
  display:flex; align-items:center; width:max-content;
  animation:tagroll var(--tag-speed,80s) linear infinite;
}
.tagtrack span{
  font-family:var(--display); font-size:clamp(1.45rem,3.2vw,2.6rem);
  line-height:1.05; white-space:nowrap; padding-inline:.55em; color:var(--ink);
}
.tagtrack i{
  flex:none; width:.42rem; height:.42rem; border-radius:50%;
  background:var(--accent); opacity:.85;
}
@keyframes tagroll{ to{ transform:translateX(-50%) } }

/* slow push-in on a still */
.kb{ overflow:hidden }
.kb img{
  transform-origin:var(--kb-o,62% 40%); will-change:transform;
  animation:kb var(--kb-t,15s) ease-in-out infinite alternate;
  animation-play-state:paused;
}
.kb.inview img{ animation-play-state:running }
@keyframes kb{
  from{ transform:scale(1) translate(0,0) }
  to{ transform:scale(var(--kb-s,1.08)) translate(var(--kb-x,-1.4%),var(--kb-y,-.9%)) }
}

/* flip — leafing through a document */
.flip{
  position:relative; overflow:hidden; cursor:pointer;
  background:var(--paper-deep); border:1px solid var(--rule); border-radius:4px;
}
.flip img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .14s linear;
}
.flip img.on{ opacity:1 }
.flipcount{
  display:inline-block; margin-right:.9rem;
  font-size:.625rem; letter-spacing:.16em; font-variant-numeric:tabular-nums;
  color:var(--ink-soft);
}

/* reel — Marian's drifting rows; full bleed, runs off both edges */
.reel{ --rh:clamp(180px,23vw,320px); margin-block:clamp(3rem,8vw,5.5rem) 0; overflow:hidden }
.reelrow{ overflow:hidden; padding-block:.35rem }
.reeltrack{
  display:flex; gap:clamp(.55rem,1.1vw,.95rem); width:max-content;
  will-change:transform;
}
.reeltrack figure{
  flex:none; margin:0; height:var(--rh);
  border:1px solid var(--rule); border-radius:4px; overflow:hidden;
  background:var(--paper-deep);
}
.reeltrack img{ height:100%; width:auto; display:block }
/* touch and reduced motion: the rows simply scroll */
.reel.native .reelrow{
  overflow-x:auto; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
  padding-inline:var(--gutter); scrollbar-width:none;
}
.reel.native .reelrow::-webkit-scrollbar{ display:none }
.reel.native figure{ scroll-snap-align:start }

/* how I work */
.services{ padding-block:clamp(4.5rem,11vh,8rem) clamp(3rem,8vh,5rem) }
.services .tagband{ margin:0 0 clamp(3rem,7vw,5rem) }
.svc-lede{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.9rem,4.4vw,3.5rem); line-height:1.06; letter-spacing:-.012em;
  max-width:18ch; margin:.9rem 0 clamp(2.5rem,6vw,4rem);
}
.svc-lede em{ font-style:italic }
.svc-grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.75rem,4vw,3.5rem);
}
.svc{ border-top:1px solid var(--rule); padding-top:1.25rem }
.svc .n{ font-size:.625rem; letter-spacing:.16em; color:var(--ink-faint) }
.svc h3{
  font-family:var(--display); font-weight:400; font-style:italic;
  font-size:clamp(1.35rem,2.2vw,1.75rem); line-height:1.15; margin:.55rem 0 .7rem;
}
.svc p{ margin:0; color:var(--ink-soft); max-width:32ch }
@media (max-width:760px){ .svc-grid{ grid-template-columns:1fr } }

@media (prefers-reduced-motion:reduce){
  .tagtrack{ animation:none; flex-wrap:wrap; width:auto; row-gap:.4rem }
  .kb img{ animation:none }
  .flip img{ transition:none }
}

/* ================= decks ================= */

.case-head .label a{ color:inherit; text-decoration:none; border-bottom:1px solid rgba(244,238,232,.35) }
.case-head .label a:hover{ border-bottom-color:currentColor }
.meta a.v{ text-decoration:none; width:max-content; border-bottom:1px solid rgba(244,238,232,.28); transition:border-color .2s }
.meta a.v:hover{ border-bottom-color:rgba(244,238,232,.9) }

.decks-intro{ padding-top:clamp(2.5rem,7vh,4.5rem) }
.decks-intro p:first-child{
  font-family:var(--display); font-size:clamp(1.3rem,2.3vw,1.7rem); line-height:1.32;
}
.decks-intro .fig-note{ margin:0 }

/* one occasion: a rule, a number, a name, a line of intent */
.deckgroup .cs-ev{ margin-bottom:clamp(2rem,4vw,3rem) }
.decks-how{ margin-top:clamp(1.5rem,3vw,2.25rem); margin-left:calc(-1 * clamp(.75rem,2vw,2rem)) }
.dg-head{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:.6rem clamp(2rem,6vw,5rem); align-items:end;
  border-top:1px solid var(--rule); padding-top:1.1rem;
  margin-bottom:clamp(2.25rem,5vw,3.75rem);
}
.dg-head .n{ grid-column:1 / -1; font-size:.625rem; letter-spacing:.16em; color:var(--ink-faint) }
.dg-head h2{
  font-family:var(--display); font-weight:400; font-style:italic;
  font-size:clamp(2.1rem,5.4vw,4.4rem); line-height:1; letter-spacing:-.016em; margin:0;
}
.dg-head p{ margin:0 0 .35rem; justify-self:end; max-width:31ch; color:var(--ink-soft) }

/* the featured deck gets the width, with a note beside it */
.deckfeature{
  display:grid; grid-template-columns:minmax(0,2.25fr) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,3.5rem); align-items:end;
  margin-bottom:clamp(3.5rem,8vw,6.5rem);
}
.decknote{ padding-bottom:3.4rem }
.decknote p:last-child{
  margin:.8rem 0 0; font-size:clamp(1rem,1.15vw,1.0625rem); line-height:1.66; max-width:30ch;
}

.deckgrid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(3rem,6vw,4.5rem) clamp(1.25rem,3.2vw,2.75rem); align-items:start;
}
.deck.lo{ margin-top:clamp(2rem,9vw,7.5rem) }
.deck{ margin:0 }

/* the card: a cover at rest, the deck underneath it */
.deckface{
  position:relative; display:block; isolation:isolate; border-radius:4px;
  text-decoration:none; color:inherit; -webkit-tap-highlight-color:transparent;
}
.deckface::before,.deckface::after{
  content:""; position:absolute; top:0; bottom:0; border-radius:4px;
  border:1px solid var(--rule); background:var(--paper-deep);
  transition:transform .6s cubic-bezier(.22,1,.36,1);
}
.deckface::before{ left:2.2%; right:2.2%; z-index:-1; transform:translateY(6px) }
.deckface::after{ left:4.6%; right:4.6%; z-index:-2; transform:translateY(12px); background:#E2D8CC }
.deckface:hover::before{ transform:translateY(9px) }
.deckface:hover::after{ transform:translateY(18px) }
.deckface:focus-visible{ outline:2px solid var(--accent); outline-offset:6px }

.deckpages{
  position:relative; display:block; aspect-ratio:16/9; overflow:hidden;
  border:1px solid var(--rule); border-radius:4px; background:var(--paper-deep);
  cursor:zoom-in;
}
.deckpages img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .12s linear;
}
.deckpages img.on{ opacity:1 }

/* captions match the case studies: a rule, the name, then the details in grey */
.deck figcaption{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.15rem .5rem;
  margin-top:1.5rem; padding-top:.65rem; border-top:1px solid var(--rule);
  font-size:.8125rem; line-height:1.5; color:var(--ink-faint);
}
.dname{ font-weight:500; color:var(--ink) }
.dmeta,.dlink,.dcount{ font-size:inherit; color:var(--ink-faint) }
.dlink{ color:var(--ink-soft); text-decoration:none; border-bottom:1px solid var(--rule); transition:color .2s, border-color .2s }
.dlink:hover{ color:var(--accent); border-bottom-color:currentColor }
.dcount{ margin-left:auto; font-variant-numeric:tabular-nums; color:var(--ink-soft); white-space:nowrap }

@media (max-width:760px){
  .dg-head,.deckfeature,.deckgrid{ grid-template-columns:1fr }
  .dg-head p{ justify-self:start }
  .deck.lo{ margin-top:0 }
  .decknote{ padding-bottom:0; order:-1 }
  .deckfeature{ gap:1.25rem }
}

/* ---------- the reader ---------- */
html.lock{ overflow:hidden; padding-right:var(--sbw,0px) }
html.lock .pillnav,html.lock .markhome{ opacity:0; pointer-events:none }
.viewer{
  --chrome:12.5rem;
  position:fixed; inset:0; z-index:100;
  display:grid; grid-template-rows:auto minmax(0,1fr) auto;
  background:rgba(23,19,15,.985); color:var(--paper);
  opacity:0; transition:opacity .28s ease;
  overscroll-behavior:contain;
}
.viewer[hidden]{ display:none }
.viewer.open{ opacity:1 }
.vw-bar{
  display:flex; align-items:baseline; gap:.5rem 1.75rem;
  padding:clamp(1rem,2.4vw,1.75rem) var(--gutter) .25rem;
}
.vw-title{ margin:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:.2rem 1rem; min-width:0 }
.vw-name{ font-family:var(--display); font-style:italic; font-size:clamp(1.3rem,2.3vw,1.85rem); line-height:1.1 }
.vw-meta{ font-size:.625rem; letter-spacing:.15em; text-transform:uppercase; font-weight:500; color:rgba(244,238,232,.55) }
.vw-count{
  margin:0 0 0 auto; white-space:nowrap;
  font-size:.6875rem; letter-spacing:.16em; font-variant-numeric:tabular-nums; color:rgba(244,238,232,.8);
}
.vw-close,.vw-prev,.vw-next,.vw-thumb{
  -webkit-appearance:none; appearance:none; font:inherit; color:inherit; cursor:pointer;
  background:none; border:0; padding:0;
}
.vw-close{
  font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase; font-weight:500;
  padding:.35rem 0; border-bottom:1px solid rgba(244,238,232,.4); white-space:nowrap;
}
.vw-close:hover{ border-bottom-color:var(--paper) }
.vw-stage{
  display:grid; grid-template-columns:clamp(2.75rem,6vw,5.5rem) minmax(0,1fr) clamp(2.75rem,6vw,5.5rem);
  align-items:center; min-height:0; padding-block:clamp(.75rem,2.5vh,1.5rem);
}
.vw-slide{ margin:0; display:flex; justify-content:center; align-items:center; min-width:0 }
.vw-slide img{
  display:block; width:auto; height:auto; max-width:100%;
  max-height:calc(100vh - var(--chrome)); max-height:calc(100dvh - var(--chrome));
  border-radius:3px; cursor:e-resize;
  opacity:0; transform:scale(.985);
  transition:opacity .3s ease, transform .55s cubic-bezier(.22,1,.36,1);
}
.viewer.ready .vw-slide img{ opacity:1; transform:none }
.vw-prev,.vw-next{
  align-self:stretch; display:grid; place-items:center;
  font-size:1.35rem; color:rgba(244,238,232,.5); transition:color .2s;
}
.vw-prev:hover,.vw-next:hover{ color:var(--paper) }
.vw-prev::before{ content:"\2190" }
.vw-next::before{ content:"\2192" }
.vw-thumbs{
  position:relative; display:flex; gap:.55rem; overflow-x:auto; scrollbar-width:none;
  padding:.6rem var(--gutter) clamp(1.1rem,2.6vw,1.9rem);
}
.vw-thumbs::-webkit-scrollbar{ display:none }
.vw-thumb{
  flex:none; width:clamp(60px,6.2vw,100px); aspect-ratio:16/9; border-radius:2px; overflow:hidden;
  background:#2B241E; opacity:.4; outline:1px solid transparent; outline-offset:3px;
  transition:opacity .2s, outline-color .2s;
}
.vw-thumb:first-child{ margin-left:auto }
.vw-thumb:last-child{ margin-right:auto }
.vw-thumb img{ width:100%; height:100%; object-fit:cover; display:block }
.vw-thumb:hover{ opacity:.8 }
.vw-thumb.on{ opacity:1; outline-color:rgba(244,238,232,.75) }
.viewer button:focus-visible{ outline:1px solid var(--paper); outline-offset:4px }

@media (max-width:760px){
  .viewer{ --chrome:10.5rem }
  .vw-bar{ flex-wrap:wrap }
  .vw-title{ flex-basis:100%; order:-1 }
  .vw-count{ margin-left:0 }
  .vw-close{ margin-left:auto }
  .vw-stage{ grid-template-columns:2.25rem minmax(0,1fr) 2.25rem }
  .vw-thumb{ width:52px }
}

/* ---------- homepage: the second layer ---------- */
.browse{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:.5rem 1.15rem; margin-top:clamp(4rem,10vw,7rem); text-align:center;
}
.browse .label{ flex-basis:100%; margin-bottom:.5rem }
.browse a,.browse .soon{
  font-family:var(--display); font-style:italic; font-weight:400;
  font-size:clamp(1.6rem,3.4vw,2.6rem); line-height:1.1; text-decoration:none;
}
.browse a{
  color:var(--ink);
  background:linear-gradient(currentColor,currentColor) 0 100% / 100% 1px no-repeat;
  transition:color .3s;
}
.browse a:hover{ color:var(--accent) }
.browse .soon{ color:var(--ink-faint); cursor:default }
.browse .soon sup{
  font-family:var(--sans); font-style:normal; font-size:.5625rem; letter-spacing:.14em;
  text-transform:uppercase; margin-left:.35em; vertical-align:.9em;
}
.browse i{ flex:none; width:.36rem; height:.36rem; border-radius:50%; background:var(--accent); opacity:.8 }

@media (prefers-reduced-motion:reduce){
  .deckpages img,.vw-slide img,.viewer{ transition:none }
  .vw-slide img{ transform:none }
}

/* ================= identity modules (OneThread) ================= */

/* a cover built from the brand's own parts: pattern pushing in, mark held still */
.otcover{ position:relative }
.otcover .frame{ border-inline:0; border-radius:0 }
.otlogo{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:clamp(220px,40%,620px); height:auto; pointer-events:none;
}

/* the mark, coming apart into the flags it's made of */
.markbox{
  position:relative; aspect-ratio:16/9; overflow:hidden;
  border:1px solid var(--rule); border-radius:4px; background:#F2EBDD;
  display:grid; place-items:center;
}
.markbox .bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.9 }
.markbox.wide{ aspect-ratio:21/9 }
.markbox.wide .burst{ width:clamp(170px,26%,400px) }
@media (max-width:760px){ .markbox.wide{ aspect-ratio:4/3 } .markbox.wide .burst{ width:52% } }
.burst{ position:relative; width:clamp(160px,34%,420px); height:auto; overflow:visible }
.burst polygon{
  transform-box:fill-box; transform-origin:center;
  animation:burst 3.9s cubic-bezier(.65,0,.35,1) infinite alternate;
  animation-play-state:paused;
}
.markbox.inview .burst polygon{ animation-play-state:running }
@keyframes burst{
  0%,5%{ transform:none }   /* starts coming apart as soon as it's on screen */
  72%,100%{ transform:translate(var(--dx),var(--dy)) rotate(var(--r)) }   /* 2.6s to open, then about 2s held open in all before it closes */
}

/* a family of marks, one to a line */
.lockups{ border-top:1px solid var(--rule); margin-top:clamp(2.5rem,6vw,4.5rem) }
.lockup{
  display:grid; grid-template-columns:minmax(7rem,11rem) minmax(0,1fr); align-items:center;
  gap:1rem clamp(1.5rem,4vw,3rem); padding-block:clamp(1.6rem,3.6vw,2.8rem);
  border-bottom:1px solid var(--rule);
}
.lockup .k{ font-size:.625rem; letter-spacing:.16em; text-transform:uppercase; font-weight:500; color:var(--ink-faint) }
.lockup img{ width:auto; max-width:100% }
@media (max-width:760px){ .lockup{ grid-template-columns:1fr; gap:.9rem } }

/* a site in a window: it scrolls itself top to bottom and back */
.webstage{
  background:var(--paper-deep); border:1px solid var(--rule); border-radius:4px;
  padding:clamp(1.25rem,5vw,4.5rem) clamp(1rem,7vw,6.5rem);
}
.browser{
  border-radius:10px; overflow:hidden; background:#fff; border:1px solid rgba(23,19,15,.12);
  box-shadow:0 40px 70px -40px rgba(23,19,15,.45), 0 2px 6px rgba(23,19,15,.06);
}
.browser-bar{
  display:flex; align-items:center; gap:.42rem; padding:.65rem .9rem;
  background:#F6F1EB; border-bottom:1px solid rgba(23,19,15,.08);
}
.browser-bar i{ width:.58rem; height:.58rem; border-radius:50%; background:#D8CCBF }
.browser-bar span{ margin-left:.8rem; font-size:.6875rem; letter-spacing:.04em; color:var(--ink-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.browser-view{ position:relative; aspect-ratio:16/10; overflow:hidden }
.browser-view img{
  width:100%; height:auto; display:block; will-change:transform;
  animation:webscroll var(--t,30s) cubic-bezier(.45,0,.55,1) infinite alternate;
  animation-play-state:paused;
}
.browser.inview .browser-view img{ animation-play-state:running }
.browser.inview:hover .browser-view img{ animation-play-state:paused }
@keyframes webscroll{
  0%,5%{ transform:translateY(0) }
  95%,100%{ transform:translateY(calc(-1 * var(--d,0px))) }
}
.browser.native .browser-view{ overflow-y:auto; -webkit-overflow-scrolling:touch }
.browser.native .browser-view img{ animation:none }

.figure figcaption a{ color:var(--ink-soft); text-decoration:none; border-bottom:1px solid var(--rule) }
.figure figcaption a:hover{ color:var(--accent); border-bottom-color:currentColor }

@media (prefers-reduced-motion:reduce){
  .burst polygon,.browser-view img{ animation:none }
}


/* ================= Newsreader ================= */
/* Large display settings run light; Newsreader's optical sizing does the rest */
.hero h1,.case-head h1,.work .name,.band .lede,.svc-lede,.dg-head h2,.footname,
blockquote.pull,.tagtrack span,.footband .vert,.decks-intro p:first-child{ font-weight:300 }
.hero h1 em,.case-head h1 em{ font-weight:300 }

/* ================= header: plain paper, the type does the work ================= */
/* Serif capitals for the sentence; the three places it has to work in sans,
   in colour — after Juliet. The last one builds itself out of the old gradient. */
.hero-clean{ padding-block:clamp(7rem,17vh,10.5rem) clamp(3.5rem,9vh,6rem) }
.hero-clean h1.caps{
  margin:0; display:flex; flex-direction:column; align-items:center; text-align:center;
  font-family:var(--display); font-weight:300; color:var(--ink);
  font-size:clamp(2rem,6.8vw,6.8rem); line-height:.94; letter-spacing:-.012em;
  text-transform:uppercase;
}
.hero-clean .hl{ display:flex; justify-content:center; align-items:baseline; gap:.22em; white-space:nowrap }
.hero-clean .sx{
  font-family:var(--sans); font-weight:600; letter-spacing:-.03em;
  font-size:.9em;                     /* sans capitals stand taller; this levels the cap heights */
}
.hero-clean .sx.c1{ color:#D9754F }   /* terracotta */
.hero-clean .sx.c2{ color:#8A4032 }   /* rust */
.hero-clean .pw > span{ color:#A84A2F }
.hero-clean .pw.on > span{ color:transparent }

.hc-foot{
  display:flex; justify-content:space-between; align-items:flex-end; gap:2rem clamp(2rem,8vw,6rem);
  margin-top:clamp(3rem,8vh,5.5rem); padding-top:1.4rem; border-top:1px solid var(--rule);
  opacity:0; animation:fadeUp .9s ease .7s forwards;
}
.hc-foot .standfirst{ margin:0; max-width:34rem; color:var(--ink-soft); font-size:clamp(.9375rem,1.25vw,1.0625rem) }
.hc-foot .scrollcue{ margin:0 0 .25rem; color:var(--ink-faint); opacity:1; animation:none }
@media (max-width:760px){
  .hero-clean{ padding-top:clamp(6rem,15vh,8rem) }
  .hero-clean h1.caps{ font-size:clamp(1.5rem,7.6vw,3rem); line-height:.98 }
  .hc-foot{ display:block } .hc-foot .scrollcue{ margin-top:2rem }
}
@media (prefers-reduced-motion:reduce){ .hc-foot{ opacity:1; animation:none } }


/* ================= the Leading band: the gradient lives here now ================= */
.band.lead{ --band-side:calc((var(--gutter) + clamp(.4rem,.9vw,.85rem)) / 2); width:calc(100% - 2 * var(--band-side)); margin:clamp(2.5rem,6vh,4rem) auto clamp(2.75rem,6.5vh,4.5rem) }
.band.lead > .wrap{ position:relative; z-index:2; padding-block:clamp(4.5rem,13vh,8.5rem) }
.band.lead .label{ color:rgba(244,238,232,.62) }
.band.lead .lede{ font-size:clamp(1.7rem,4vw,3.25rem); max-width:22ch }
.band.lead .lede em{ color:#FFE3C6 }
.band.lead .pill{ border-bottom-color:rgba(244,238,232,.6) }
@media (max-width:760px){ .band,.band.lead{ width:calc(100% - 1.5rem) } }

/* ================= page heads on paper (case studies, decks) ================= */
.pagehead{ position:relative; color:var(--ink) }
.pagehead .case-head .label{ color:var(--ink-faint) }
.pagehead .case-head .label a{ border-bottom-color:var(--rule) }
.pagehead .case-head h1 em{ color:var(--accent) }
.pagehead .meta{ border-top-color:var(--rule) }
.pagehead .meta .k{ color:var(--ink-faint) }
.pagehead .meta .v{ color:var(--ink) }
.pagehead .meta a.v{ border-bottom-color:var(--rule) }
.pagehead .meta a.v:hover{ border-bottom-color:var(--ink); color:var(--accent) }



/* ================= About & Leading ================= */
.case-body .intro{
  font-family:var(--display); font-weight:300;
  font-size:clamp(1.35rem,2.4vw,1.75rem); line-height:1.3; margin:0 0 .5rem;
}
.case-body .sec-k{
  margin:clamp(3rem,7vw,4.75rem) 0 0;
  font-size:.625rem; letter-spacing:.16em; text-transform:uppercase; font-weight:500;
  color:var(--ink-faint);
}
.case-body .sec-k + h2{ margin-top:.55rem }
.case-body p a{ color:var(--ink); text-decoration:none; border-bottom:1px solid var(--rule); transition:color .2s, border-color .2s; white-space:nowrap }
.case-body p a:hover{ color:var(--accent); border-bottom-color:currentColor }

.cvwrap{ max-width:calc(46rem + 2 * var(--gutter)); padding-block:clamp(3rem,8vh,5rem) 0 }
.cvwrap .label{ margin-bottom:1rem }
.cvwrap .cv-ed{ margin-top:clamp(2rem,5vw,3rem) }
.cv{ list-style:none; margin:0; padding:0; border-top:1px solid var(--rule) }
.cv li{
  display:grid; grid-template-columns:7.5rem minmax(0,1fr) minmax(0,1.2fr);
  gap:.25rem 1.5rem; align-items:baseline;
  padding:.95rem 0; border-bottom:1px solid var(--rule);
}
.cv .yr{ font-size:.6875rem; letter-spacing:.1em; color:var(--ink-faint); font-variant-numeric:tabular-nums }
.cv .org{ font-family:var(--display); font-size:clamp(1.15rem,1.8vw,1.35rem); line-height:1.2 }
.cv .role{ color:var(--ink-soft); font-size:.9375rem }
@media (max-width:640px){
  .cv li{ grid-template-columns:1fr; gap:.15rem }
}

/* ================= About v2: offset grid, big type, rules (v24) =================
   Twelve columns; each block names its own span with --c, so paragraphs can sit
   left, right or staggered instead of one thin column down the middle. */
.ab-grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:clamp(.75rem,2vw,2rem); align-items:start }
.ab-grid > *{ grid-column:var(--c,1/-1); min-width:0 }

/* head: the sentence set in staggered lines */
.ab-head h1.ab-h1{
  max-width:none; display:flex; flex-direction:column; text-wrap:initial;
  font-weight:300; font-size:clamp(2.3rem,6.6vw,6.4rem); line-height:.98; letter-spacing:-.022em;
  margin-bottom:clamp(2.75rem,7vw,5rem);
}
.ab-l{ display:block; white-space:nowrap }
.ab-l.i1{ padding-left:11% }
.ab-l.i2{ padding-left:3% }
.ab-l.i3{ padding-left:30% }

/* intro: one big sentence, pushed right */
.ab-intro{ padding-block:clamp(3.5rem,9vw,7rem) clamp(3rem,7vw,5.5rem) }
.ab-k{ padding-top:.75rem; margin-top:.55rem; border-top:1px solid var(--ink); max-width:9rem; color:var(--ink) }
.ab-lead{
  margin:0; font-family:var(--display); font-weight:300;
  font-size:clamp(1.55rem,3.1vw,2.75rem); line-height:1.14; letter-spacing:-.012em; text-wrap:pretty;
}
.ab-lead span{ color:var(--ink-faint) }

/* four numbers, boxed by hairlines */
.ab-stats{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:0; border-top:1px solid var(--ink); border-bottom:1px solid var(--rule) }
.ab-stats > div{ padding:clamp(1.25rem,2.4vw,1.9rem) clamp(1rem,2vw,1.75rem) clamp(1.5rem,3vw,2.4rem); border-left:1px solid var(--rule) }
.ab-stats > div:first-child{ border-left:0; padding-left:0 }
.ab-stats dt{ font-family:var(--display); font-weight:300; font-size:clamp(2.3rem,4.4vw,4.1rem); line-height:1; letter-spacing:-.02em; color:var(--accent); white-space:nowrap }
.ab-stats dd{ margin:1rem 0 0; font-size:.875rem; line-height:1.5; color:var(--ink-soft); max-width:22ch }

/* chapters: a ruled bar, then the type */
.ab-ch{ padding-top:clamp(5.5rem,13vw,10rem) }
.ab-bar{
  display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:clamp(.75rem,2vw,2rem);
  padding-top:.8rem; border-top:1px solid var(--rule); margin-bottom:clamp(2.25rem,5vw,3.75rem);
  font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase; font-weight:500; color:var(--ink-faint);
}
.ab-bar span:nth-child(1){ color:var(--ink) }
.ab-bar span:nth-child(3){ margin-left:auto; text-align:right }

.ab-h2{
  margin:0 0 clamp(2.75rem,6vw,4.75rem); font-family:var(--display); font-weight:300;
  font-size:clamp(2.2rem,5.4vw,5rem); line-height:1; letter-spacing:-.02em; text-wrap:balance;
}
.ab-h2 em,.ab-big em,.ab-state em{ font-style:italic; color:var(--accent) }

.ab-yrblock p:not(.label),.ab-p p,.ab-coast-copy p:not(.label),p.ab-p{ font-size:clamp(1rem,1.15vw,1.0625rem); line-height:1.66; margin:0 0 1.2rem }
.ab-yrblock p.ab-yr{
  margin:0 0 1.25rem; font-family:var(--display); font-weight:200;
  font-size:clamp(3.6rem,8.4vw,8rem); line-height:.8; letter-spacing:-.035em;
  color:var(--accent-lt);
}
.ab-yrblock p.ab-note,.ab-coast-copy p.ab-note{ color:var(--ink-faint); font-size:.875rem }
.ab-yrblock .label,.ab-coast-copy .label{ margin:0 0 1rem; padding-bottom:.75rem; border-bottom:1px solid var(--rule); color:var(--ink) }
.ab-drop{ margin-top:clamp(5rem,13vw,11rem) }
.ab-note a{ color:inherit; text-decoration:none; border-bottom:1px solid var(--rule) }
.ab-note a:hover{ color:var(--accent); border-bottom-color:currentColor }

/* 02 — the coaster, set big, with a real one */
.ab-big{
  margin:0; display:flex; flex-direction:column;
  font-family:var(--display); font-weight:300;
  font-size:clamp(3rem,10vw,9.5rem); line-height:.9; letter-spacing:-.035em;
}
.ab-big span{ display:block; white-space:nowrap }
.ab-big .in{ padding-left:24% }
.coaster{ margin:clamp(-4.5rem,-5vw,-1.5rem) 0 0; max-width:16rem }
.coaster svg{
  display:block; width:100%; height:auto; overflow:visible;
  transform:rotate(-10deg);
  transition:transform .7s cubic-bezier(.22,1,.36,1);
}
.coaster:hover svg{ transform:rotate(-3deg) translateY(-6px) }
.c-base{ fill:none }   /* no disc, no shadow: just the rings and the type */
.c-ring{ fill:none; stroke:var(--accent); stroke-width:.8 }
.c-ring.thin{ stroke-width:.4 }
.c-text{ font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.12em; fill:var(--accent) }
.c-spin{ transform-box:view-box; transform-origin:50% 50%; animation:cspin 60s linear infinite }
@keyframes cspin{ to{ transform:rotate(360deg) } }
.c-mid{ font-family:var(--display); font-style:italic; font-size:25px; fill:var(--ink); text-anchor:middle }
.c-sub{ font-family:var(--sans); font-size:7px; font-weight:600; letter-spacing:.24em; fill:var(--ink-soft); text-anchor:middle }
.ab-coast-copy{ margin-top:clamp(2rem,5vw,4rem) }

/* 03 — text and work, staggered */
.ab-us{ row-gap:clamp(2.5rem,5vw,4rem) }
.ab-us .ab-h2{ margin-bottom:0 }
.ab-us .ab-p{ margin-bottom:clamp(1rem,3vw,2rem) }
.ab-us .ab-p .pill{ margin-top:.4rem }
.ab-p2{ margin-top:clamp(3rem,7vw,6rem) }
.ab-fig{ margin:0 }
.ab-fig .frame{ overflow:hidden; border-radius:4px; background:var(--paper-deep) }
.ab-fig img{ width:100%; height:auto }
.ab-fig[data-drift] img{ transform:translateY(var(--dy,0%)) scale(1.1); will-change:transform }   /* room to drift without showing an edge */
.ab-fig figcaption{
  display:flex; justify-content:space-between; gap:1rem; align-items:baseline;
  margin-top:.75rem; padding-top:.65rem; border-top:1px solid var(--rule);
  font-size:.8125rem; color:var(--ink-faint);
}
.ab-fig figcaption b{ font-weight:500; color:var(--ink); margin-right:.45rem }
.ab-fig figcaption a{ color:var(--ink-soft); text-decoration:none; white-space:nowrap; border-bottom:1px solid var(--rule) }
.ab-fig figcaption a:hover{ color:var(--accent); border-bottom-color:currentColor }
.ab-fig.sm{ margin-top:clamp(5rem,14vw,12rem) }

/* 04 — ruled rows */
.ab-rows{ list-style:none; margin:0; padding:0; border-top:1px solid var(--ink) }
.ab-rows li{
  display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:clamp(.75rem,2vw,2rem);
  align-items:baseline; padding:clamp(1.4rem,3vw,2.25rem) 0; border-bottom:1px solid var(--rule);
}
.ab-rows .n{ grid-column:1/2; font-family:var(--display); font-style:italic; color:var(--ink-faint); font-size:1rem }
.ab-rows h3{
  grid-column:2/7; margin:0; font-family:var(--display); font-weight:300;
  font-size:clamp(1.5rem,2.7vw,2.4rem); line-height:1.08; letter-spacing:-.012em;
  transition:color .3s, transform .5s cubic-bezier(.22,1,.36,1);
}
.ab-rows li:hover h3{ color:var(--accent); transform:translateX(.35rem) }
.ab-rows p{ grid-column:7/13; margin:0; color:var(--ink-soft); max-width:34rem }

/* 05 — the ask, as a statement */
.ab-state{
  margin:0 0 clamp(2rem,5vw,3.25rem); max-width:19ch; text-wrap:balance;
  font-family:var(--display); font-weight:300;
  font-size:clamp(2.1rem,5.6vw,5.25rem); line-height:1.02; letter-spacing:-.022em;
}
.ab-aside{ color:var(--ink-soft); padding-top:.8rem; border-top:1px solid var(--rule) }

/* 06 — experience, full width */
.ab-side{ margin:0; font-family:var(--display); font-weight:300; font-size:clamp(1.5rem,2.4vw,2.1rem); line-height:1.1 }
.ab-cv .cv li{ grid-template-columns:7.5rem minmax(0,1fr) minmax(0,1.2fr) }
.ab-cv .ab-ed{ margin-top:clamp(3rem,6vw,4.5rem) }
.ab-cv + .band{ margin-top:clamp(5rem,12vw,8rem) }

@media (max-width:900px){
  .ab-stats{ grid-template-columns:1fr 1fr }
  .ab-stats > div:nth-child(3){ border-left:0; padding-left:0 }
  .ab-stats > div:nth-child(n+3){ border-top:1px solid var(--rule) }
  .ab-rows .n{ display:none }
  .ab-rows h3{ grid-column:1/6 }
}
@media (max-width:760px){
  .ab-grid > *{ grid-column:1/-1 }
  .ab-head h1.ab-h1{ font-size:clamp(2rem,9.2vw,3.4rem) }
  .ab-l.i1{ padding-left:7% } .ab-l.i2{ padding-left:0 } .ab-l.i3{ padding-left:16% }
  .ab-k{ margin-bottom:1.25rem }
  .ab-bar{ display:flex; flex-wrap:wrap; gap:.35rem 1.25rem }
  .ab-bar span:nth-child(3){ margin-left:auto }
  .ab-drop{ margin-top:3rem; margin-left:10% }
  .ab-big{ font-size:clamp(2.6rem,13vw,4.5rem) }
  .ab-big .in{ padding-left:18% }
  .coaster{ max-width:11.5rem; margin:2.5rem 0 0 auto }
  .ab-us{ row-gap:2.5rem }
  .ab-us .ab-p{ margin-bottom:0 }
  .ab-fig.sm{ width:66%; justify-self:end; margin-top:0 }
  .ab-p2{ margin-top:0 }
  .ab-rows li{ display:block }
  .ab-rows p{ margin-top:.7rem }
  .ab-aside{ margin-left:12% }
  .ab-side{ margin-bottom:1rem }
  .ab-cv .cv li{ grid-template-columns:1fr }
  .ab-cv .ab-ed{ margin-top:2.5rem }
  .ab-cv h2.ab-ed + .cv{ margin-top:0 }
}
@media (prefers-reduced-motion:reduce){
  .c-spin{ animation:none }
  .ab-fig img{ transform:none }
}

/* ================= Leading v2 (v25): same system as About ================= */
.ab-ch{ scroll-margin-top:1.5rem }
.ab-ch + .band{ margin-top:clamp(5rem,12vw,8rem) }
.ld-h1 .ab-l.i1{ padding-left:8% }
.ld-h1 .ab-l.i2{ padding-left:20% }
.ld-h1 .ab-l.i3{ padding-left:50% }

/* the five roles as a ruled index */
.ld-index{ padding-bottom:clamp(.5rem,2vw,1.5rem) }
.ld-index ol{ list-style:none; margin:0; padding:0; border-top:1px solid var(--ink) }
.ld-index li{ border-bottom:1px solid var(--rule) }
.ld-index a{
  display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:clamp(.75rem,2vw,2rem);
  align-items:baseline; padding:clamp(1rem,2vw,1.4rem) 0; text-decoration:none; color:var(--ink);
}
.ld-index .n{ grid-column:1/2; font-size:.6875rem; letter-spacing:.16em; color:var(--ink-faint); font-weight:500 }
.ld-index .o{
  grid-column:2/7; font-family:var(--display); font-weight:300;
  font-size:clamp(1.4rem,2.6vw,2.3rem); line-height:1.1; letter-spacing:-.01em;
  transition:color .3s, transform .5s cubic-bezier(.22,1,.36,1);
}
.ld-index .t{ grid-column:7/11; color:var(--ink-soft); font-size:.9375rem; line-height:1.4 }
.ld-index .y{ grid-column:11/13; text-align:right; font-size:.6875rem; letter-spacing:.14em; color:var(--ink-faint); font-variant-numeric:tabular-nums; white-space:nowrap }
.ld-index .y::after{ content:"\2193"; display:inline-block; margin-left:.6rem; transition:transform .4s cubic-bezier(.22,1,.36,1) }
.ld-index a:hover .o{ color:var(--accent); transform:translateX(.4rem) }
.ld-index a:hover .y::after{ transform:translateY(3px) }

/* 01 */
p.ld-open{ font-family:var(--display); font-weight:300; font-size:clamp(1.25rem,1.9vw,1.6rem); line-height:1.28; margin-top:.5rem }
.ld-after{ margin-top:1.4rem }
.ld-quote{ position:relative; margin:clamp(4rem,9vw,7rem) 0 0; padding:0 0 0 8.4% }
.ld-quote::before{
  content:"\201C"; position:absolute; left:0; top:-.06em;
  font-family:var(--display); font-weight:300; font-size:clamp(5rem,11vw,10.5rem); line-height:1; color:var(--accent-lt);
}
.ld-quote p{
  margin:0; max-width:17ch; text-wrap:balance;
  font-family:var(--display); font-weight:300;
  font-size:clamp(2.2rem,5.6vw,5.4rem); line-height:1.02; letter-spacing:-.025em;
}
.ld-quote em{ font-style:italic; color:var(--accent) }

/* 02 */
.ld-num{
  margin:0; font-family:var(--display); font-weight:200; color:var(--accent-lt);
  font-size:clamp(8rem,21vw,20rem); line-height:.76; letter-spacing:-.05em;
}
.ld-num.sm{ font-size:clamp(3.8rem,8.6vw,8.25rem); line-height:.86; letter-spacing:-.035em; white-space:nowrap }
.ld-cap{
  margin:1.2rem 0 0; padding-top:.75rem; border-top:1px solid var(--rule); max-width:17rem;
  font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase; font-weight:500; color:var(--ink);
}
.ld-one-copy{ margin-top:clamp(2rem,7vw,6rem) }
.ab-stats.three{ grid-template-columns:repeat(3,minmax(0,1fr)) }
.ld-words{ margin-top:clamp(3.5rem,8vw,6rem) }
.ld-words dt{ font-size:clamp(1.6rem,2.8vw,2.5rem); line-height:1.05; white-space:normal }
.ld-words dd{ max-width:30ch }

/* 03 */
.ld-count{ margin-top:.35rem }
.ld-count dt{ font-size:clamp(3rem,6vw,5.5rem) }
.ld-count dd{ max-width:16ch }
p.ld-state{
  margin:clamp(3.5rem,8vw,6rem) 0 1.4rem; max-width:27ch; text-wrap:balance;
  font-family:var(--display); font-weight:300;
  font-size:clamp(1.7rem,3.4vw,3.1rem); line-height:1.12; letter-spacing:-.015em;
}
.ld-state em{ font-style:italic; color:var(--accent) }

/* 04 */
.ld-ot{ position:relative; aspect-ratio:4/3 }
.ld-ot img.bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.ld-ot img.mark{ position:absolute; left:50%; top:50%; width:58%; height:auto; transform:translate(-50%,-50%) }
.ld-col2{ margin-top:clamp(5rem,14vw,12rem) }
.ld-colp{ margin:1.25rem 0 0; max-width:32rem; font-size:clamp(1rem,1.15vw,1.0625rem); line-height:1.66 }

/* 05 */
.ld-last{ margin-top:clamp(3rem,7vw,5.5rem) }
.ld-end .ld-links{ display:flex; flex-wrap:wrap; gap:1rem 2.25rem }

@media (max-width:900px){
  .ab-stats.three > div:nth-child(3){ border-left:1px solid var(--rule); padding-left:clamp(1rem,2vw,1.75rem) }
  .ab-stats.three > div:nth-child(n+3){ border-top:0 }
  .ld-index .o{ grid-column:2/8 }
  .ld-index .t{ grid-column:8/11 }
}
@media (max-width:760px){
  .ld-h1 .ab-l.i1{ padding-left:5% }
  .ld-h1 .ab-l.i2{ padding-left:12% }
  .ld-h1 .ab-l.i3{ padding-left:36% }
  .ld-index a{ grid-template-columns:2rem minmax(0,1fr) auto; row-gap:.3rem }
  .ld-index .n{ grid-column:1 }
  .ld-index .o{ grid-column:2 }
  .ld-index .y{ grid-column:3; grid-row:1 }
  .ld-index .t{ grid-column:2 / -1; grid-row:2; font-size:.875rem }
  .ld-quote{ padding:2.6rem 0 0 }
  .ld-quote::before{ top:-.12em; font-size:5.5rem }
  .ld-num{ font-size:10rem }
  .ld-one-copy{ margin-top:1.75rem }
  .ab-stats.ld-words{ grid-template-columns:1fr }
  .ab-stats.ld-words > div,.ab-stats.ld-words > div:nth-child(3){ border-left:0; padding-left:0 }
  .ab-stats.ld-words > div + div{ border-top:1px solid var(--rule) }
  .ld-last .ab-p{ margin-top:2rem }
  .ld-count{ margin-top:1.5rem }
  .ld-count > div{ padding-inline:.75rem }
  .ld-count > div:first-child{ padding-left:0 }
  .ld-col2{ margin-top:3rem; width:86%; justify-self:end }
  .ld-num.sm{ font-size:clamp(3.4rem,17vw,5rem) }
}
/* 05 — three report pages, the middle one dropped */
.ld-trio-row{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(.75rem,2vw,2rem); align-items:start }
.ld-trio-row .frame{ border:1px solid var(--rule) }
.ld-trio-row .frame:nth-child(2){ margin-top:clamp(2rem,6vw,5rem) }
.ld-trio figcaption{ margin-top:clamp(1rem,2vw,1.5rem) }
p.ab-note{ color:var(--ink-faint); font-size:.875rem }
@media (max-width:760px){
  .ld-trio-row{ grid-template-columns:1fr 1fr }
  .ld-trio-row .frame:nth-child(1){ grid-column:1 / -1 }
  .ld-trio-row .frame:nth-child(2){ margin-top:0 }
}

/* ================= About v3 (v27): About and Leading in one page ================= */
.ab-ch{ padding-top:clamp(4.5rem,10vw,8rem) }
.pagehead .meta .v a{ color:inherit; text-decoration:none; border-bottom:1px solid var(--rule); transition:color .2s, border-color .2s }
.pagehead .meta .v a:hover{ color:var(--accent); border-bottom-color:currentColor }
.ab-drop{ margin-top:clamp(4rem,10vw,8rem) }
.ab-big-in{ margin-top:clamp(4rem,9vw,7rem) }

/* three pieces of work, staggered */
.ab-collage{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:clamp(.75rem,2vw,2rem); align-items:start; margin-top:clamp(.5rem,2vw,1.5rem) }
.ab-collage .c1{ grid-column:1/7 }
.ab-collage .c2{ grid-column:7/10; margin-top:clamp(3rem,9vw,7.5rem) }
.ab-collage .c3{ grid-column:10/13; margin-top:clamp(1.5rem,4vw,3rem) }
.ab-collage figcaption{ flex-wrap:wrap; row-gap:.2rem }

/* 03 Leading: the quote, then three ruled rows with where each was learned */
.ab-leading .ld-quote{ margin-top:clamp(1rem,3vw,2rem) }
.ab-lead-intro{ margin:clamp(2.5rem,6vw,4rem) 0 clamp(1.5rem,3vw,2.25rem) }
.ab-lead-intro p.ab-p{ margin:0; color:var(--ink-soft) }
.ab-lrows h3{ grid-column:2/7; grid-row:1 }
.ab-lrows p{ grid-column:7/13; grid-row:1 / span 2 }
.ab-lrows .wh{
  grid-column:2/7; grid-row:2; margin-top:.75rem;
  font-size:.625rem; letter-spacing:.14em; text-transform:uppercase; font-weight:500; line-height:1.7;
  color:var(--ink-faint);
}
.ab-hands{ margin-top:1.4rem }
.ab-record{ margin-top:clamp(3.5rem,8vw,6rem) }
.ab-cv .cv li{ padding:.8rem 0 }

@media (max-width:900px){
  .ab-lrows h3,.ab-lrows .wh{ grid-column:1/6 }
  .ab-lrows p{ grid-column:6/13 }
}
@media (max-width:760px){
  .ab-collage{ grid-template-columns:1fr 1fr; row-gap:2rem }
  .ab-collage .c1{ grid-column:1 / -1 }
  .ab-collage .c2,.ab-collage .c3{ grid-column:auto; margin-top:0 }
  .ab-lrows .wh{ display:block; margin:.5rem 0 .2rem }
  .ab-big-in{ margin-top:3.5rem }
}

/* ================= 404 ================= */
.nf .case-head{ min-height:72vh; display:flex; flex-direction:column; justify-content:center }
.nf .meta .v a{ color:inherit; text-decoration:none; border-bottom:1px solid var(--rule) }
.nf .meta .v a:hover{ color:var(--accent); border-bottom-color:currentColor }
@media (max-width:760px){ .nf .ab-l{ white-space:normal } .nf .ab-l.i1{ padding-left:8% } }
.nf .meta .v{ overflow-wrap:anywhere }

/* ================= Case studies v29: on the About grid, the work first =================
   The text sits in columns of the twelve, beside the pictures rather than between them. */

/* fix: the side padding was counted inside the reading measure, so the old column got
   narrower as the screen got wider (OneThread still uses it) */
.wrap.case-body{ max-width:calc(var(--measure) + 2 * var(--gutter)) }

.cs-intro{ padding-block:clamp(2rem,6vw,4.25rem) clamp(1rem,3vw,2rem) }
/* no label beside it any more, so it steps one gutter to the left of its column */
.cs-lead{ margin-left:calc(-1 * clamp(.75rem,2vw,2rem)) }
.cs-ch{ padding-top:clamp(4.5rem,10vw,8rem) }
.cs-ch .ab-bar{ margin-bottom:clamp(1.75rem,4vw,3rem) }
.cs-ch .ab-bar span:nth-child(2){ margin-left:auto; text-align:right }   /* number left, label right */
.cs-rows{ row-gap:clamp(2.5rem,6vw,5rem) }

/* the solution: specific wins, two to a row, each under its own rule */
.cs-wins{ row-gap:clamp(3rem,6vw,4.75rem) }
.cs-wins > .cs-h2{ margin-bottom:clamp(-1.5rem,-2vw,-.5rem) }
.cs-win{ padding-top:clamp(1rem,1.6vw,1.35rem); border-top:1px solid var(--ink) }
.cs-win h3{
  margin:0 0 clamp(.9rem,1.6vw,1.25rem); font-family:var(--display); font-weight:300;
  font-size:clamp(1.55rem,2.3vw,2.1rem); line-height:1.08; letter-spacing:-.015em; text-wrap:balance;
}
.cs-win h3 em{ font-style:italic; color:var(--accent) }
.cs-win p{ font-size:clamp(1rem,1.15vw,1.0625rem); line-height:1.66; margin:0 0 1.1rem }
.cs-win p:last-child{ margin-bottom:0 }
.cs-win.cs-l{ margin-right:clamp(0rem,2vw,1.75rem) }
.cs-win.cs-r{ margin-left:clamp(0rem,2vw,1.75rem) }

/* a group of three: one large, two stacked beside it, edges flush */
.cs-groupwrap{ margin-top:clamp(4rem,9vw,7rem) }
.cs-group{
  display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); grid-template-rows:auto auto;
  gap:clamp(.75rem,2vw,2rem);
}
.cs-group .g-big{ grid-column:1/9; grid-row:1/3 }
.cs-group .g-top{ grid-column:9/13; grid-row:1 }
.cs-group .g-bot{ grid-column:9/13; grid-row:2 }
.cs-group .g-big .frame{ height:100% }
.cs-group .g-big .frame img{ height:100%; object-fit:cover }

.cs-h2{
  margin:0; font-family:var(--display); font-weight:300;
  font-size:clamp(2rem,4vw,3.6rem); line-height:1.02; letter-spacing:-.02em; text-wrap:balance;
}
.cs-h2 em{ font-style:italic; color:var(--accent) }
.cs-side .cs-h2{ font-size:clamp(1.65rem,2.6vw,2.4rem); line-height:1.06; margin-bottom:clamp(1.1rem,2.2vw,1.6rem) }
.cs-p p,.cs-side p{ font-size:clamp(1rem,1.15vw,1.0625rem); line-height:1.66; margin:0 0 1.2rem }
.cs-p p:last-child,.cs-side p:last-child{ margin-bottom:0 }
.cs-side{ align-self:center }
.cs-side.cs-r{ padding-left:clamp(0rem,3vw,3rem) }   /* a half-column of air between picture and text */
.cs-side.cs-l{ padding-right:clamp(0rem,3vw,3rem) }
.cs-end{ align-self:end }

.cs-fig{ margin:0 }
.wrap.cs-fig{ margin-inline:auto }                 /* a figure that is its own .wrap stays centred */
.cs-fig .frame{ overflow:hidden; border-radius:4px; background:var(--paper-deep); border:1px solid var(--rule) }
.cs-fig .frame img{ width:100%; height:auto; display:block }
.cs-cover{ margin-top:clamp(.5rem,2vw,1.5rem) }
.cs-wide{ margin-top:clamp(2.5rem,6vw,4.5rem) }
.cs-last{ margin-top:clamp(3.5rem,8vw,6.5rem) }

/* one-line captions that carry the story for anyone only looking at pictures */
.cs-cap{
  margin:.75rem 0 0; padding-top:.65rem; border-top:1px solid var(--rule);
  font-size:.8125rem; line-height:1.5; color:var(--ink-faint); text-wrap:pretty;
}
.cs-cap b{ font-weight:500; color:var(--ink); margin-right:.5rem }
.cs-end.cs-cap{ margin:0 }

.cs-pull{
  margin:clamp(2.25rem,5vw,4rem) 0 0; font-family:var(--display); font-weight:300; font-style:italic;
  font-size:clamp(2rem,5vw,4.4rem); line-height:1.05; letter-spacing:-.02em; color:var(--accent); text-wrap:balance;
}

/* a placeholder until the real image is in */
.cs-ph{ display:grid; place-items:center }
.cs-ph p{ margin:0; font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint) }

/* zoom: the picture starts inset and opens to the full grid as it reaches the middle of the
   screen, while the image inside settles from a slight push-in. --z runs 0 to 1 from site.js;
   without it (no script, reduced motion) the picture simply sits at full size. */
.zoom .frame{
  border:0;
  clip-path:inset(0 calc((1 - var(--z,1)) * 11%) round calc(4px + (1 - var(--z,1)) * 18px));
}
.zoom .frame img{ transform:scale(calc(1.1 - var(--z,1) * .1)); will-change:transform }
.zoom .frame.cs-ph{ background:var(--paper-deep) }

/* drift: report pages in two rows that move sideways, in opposite directions, as the page
   scrolls. Fewer and larger than the old reel; tied to scroll, not running on their own. */
.cs-drift{
  --pw:clamp(16rem,31vw,38rem); --pg:clamp(.75rem,1.4vw,1.25rem);
  display:grid; gap:var(--pg); overflow:hidden;
  margin-top:clamp(2rem,5vw,3.5rem);
}
.cs-row{ overflow:hidden }
.cs-track{ display:flex; gap:var(--pg); width:max-content; padding-inline:var(--gutter); will-change:transform }
.cs-track figure{
  flex:0 0 auto; width:var(--pw); aspect-ratio:1400/1082; margin:0; overflow:hidden;
  border:1px solid var(--rule); border-radius:4px; background:var(--paper-deep);
}
.cs-track img{ width:100%; height:100%; object-fit:cover; display:block }
/* touch and reduced motion: the rows are simply swipeable */
.cs-drift.native .cs-row{ overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch }
.cs-drift.native .cs-row::-webkit-scrollbar{ display:none }
.cs-drift.native .cs-track{ transform:none !important }
.cs-drift.native figure{ scroll-snap-align:start; scroll-margin-inline-start:var(--gutter) }

@media (max-width:760px){
  .cs-drift{ --pw:78vw }
  .cs-side,.cs-end{ align-self:start }
  .cs-side.cs-r,.cs-side.cs-l{ padding:0 }
  .cs-win.cs-l,.cs-win.cs-r{ margin-inline:0 }
  .cs-lead,.decks-how{ margin-left:0 }
  .cs-group .g-big{ grid-column:1/-1; grid-row:auto }
  .cs-group .g-top{ grid-column:1/7; grid-row:auto }
  .cs-group .g-bot{ grid-column:7/13; grid-row:auto }
  .cs-wins > .cs-h2{ margin-bottom:0 }
  .cs-ch .cs-wins{ row-gap:2.5rem }
  .cs-ch .ab-grid,.cs-last .ab-grid{ row-gap:1.5rem }
  .cs-rows{ row-gap:2rem }
}

/* ================= v31: About notes, and the footer full screen again ================= */

/* chapter bars as a line: number, then the label right beside it, detail at the far right */
.ab-bar{ display:flex; align-items:baseline; column-gap:clamp(1.75rem,3vw,2.75rem) }

/* the stats are gone, so the intro runs straight into chapter 01 */
/* the heading has no facts row under it now, so the intro sits with equal space above and below */
.ab-intro + .ab-ch{ padding-top:clamp(8rem, calc(6.9rem + 4.6vw), 11rem) }
.ab-fig a.frame{ display:block; transition:opacity .3s }
.ab-fig a.frame:hover{ opacity:.88 }

/* Leading rows: the "where" line sits close under its heading */
.ab-lrows li{ grid-template-rows:auto 1fr }
.ab-lrows .wh{ align-self:start; margin-top:.45rem }

/* footer: fills the screen; the name runs past the left, right and bottom edges */
.sitefoot{ min-height:100vh; min-height:100svh }
.footname{
  font-size:11.48vw; margin-left:-2.4vw;          /* ~5% wider than its column, overhanging both sides equally */
  line-height:.82; transform:translateY(.42em);   /* and about a quarter of the letters below the edge */
}
/* the cream bar: Work with me and Get in touch together at the top, Back to top at the foot */
.footband{ justify-content:flex-start }
.footband .cta{ margin-top:clamp(1.5rem,3vw,2.5rem) }
.footband .totop{ margin-top:auto }

@media (max-width:760px){
  .ab-bar{ column-gap:1.25rem }
  .footname{ font-size:12.2vw; margin-left:-2.5vw; transform:translateY(.3em) }
  .footband{ justify-content:space-between }
  .footband .cta,.footband .totop{ margin:0 }
}


/* ================= v34: ICBA — three identities, one block per event ================= */
/* the three key visuals side by side, each named underneath */
.cs-tri{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(.75rem,2vw,2rem); margin-top:clamp(1rem,3vw,2rem) }
.cs-tri .frame{ aspect-ratio:2080/1053 }
.cs-tri .frame img{ height:100%; object-fit:cover }
.cs-tag{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.2rem 1rem; align-items:baseline;
  margin-top:.75rem; padding-top:.65rem; border-top:1px solid var(--rule);
  font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase; font-weight:500; color:var(--ink-faint);
}
.cs-tag b{ font-weight:500; color:var(--ink) }

/* an event: name and place on the left under a rule, the story on the right */
.cs-ev{ margin-top:clamp(3rem,6vw,4.5rem); padding-top:clamp(1rem,1.6vw,1.35rem); border-top:1px solid var(--ink) }
.cs-ev-h h3,.cs-ev-h h2{
  margin:0 0 .6rem; font-family:var(--display); font-weight:300;
  font-size:clamp(1.9rem,3.2vw,2.9rem); line-height:1.02; letter-spacing:-.018em;
}
.cs-ev-h .label{ color:var(--accent) }
.cs-evwrap{ padding-top:clamp(4.5rem,9vw,7rem) }
.cs-evwrap .cs-ev{ margin-top:0 }
.cs-evimg{ margin-top:clamp(2rem,4vw,3rem) }
.cs-evimg .cs-rows{ margin-top:clamp(.75rem,2vw,2rem) }

/* two pictures side by side, the same gutter as the grid */
.cs-pair{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(.75rem,2vw,2rem); margin-top:clamp(.75rem,2vw,2rem) }

@media (max-width:760px){
  .cs-tri{ grid-template-columns:1fr; gap:1.25rem }
  .cs-ev .cs-p{ margin-top:1rem }
  .cs-pair{ grid-template-columns:1fr }
}

/* ================= v35: OneThread on the case-study grid ================= */
/* the cover: navy pattern with the reversed mark held still on top */
.otframe{ position:relative }
.cs-fig .otframe > img:first-child{ height:100%; object-fit:cover }
.cs-fig .frame .otlogo,.zoom .frame .otlogo{
  position:absolute; left:50%; top:50%; width:clamp(220px,40%,620px); height:auto;
  transform:translate(-50%,-50%); pointer-events:none;
}

/* portrait pages in the drifting rows */
.cs-drift.portrait{ --pw:clamp(10.5rem,22vw,26rem) }
.cs-drift.portrait .cs-track figure{ aspect-ratio:760/983 }

/* the palette as a ruled band under the marks, not a specimen */
.cs-palette{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); margin-top:clamp(1.5rem,3vw,2.25rem) }
.cs-palette span{ display:block; height:clamp(.55rem,.9vw,.75rem); background:var(--sw) }
.cs-palette i{
  display:block; padding-top:calc(clamp(.55rem,.9vw,.75rem) + .55rem); font-style:normal;
  font-size:.625rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint);
  font-variant-numeric:tabular-nums;
}

@media (max-width:760px){
  .cs-drift.portrait{ --pw:58vw }
  .cs-palette i{ font-size:.5625rem; letter-spacing:.08em }
}

/* ================= v36: Motimatic ================= */

/* drift rows of landscape pages (guidelines, slides) */
.cs-drift.wide{ --pw:clamp(17rem,34vw,40rem) }
.cs-drift.wide .cs-track figure{ aspect-ratio:16/9 }

/* light swatches need an edge on the paper */
.cs-palette span{ box-shadow:inset 0 0 0 1px rgba(23,19,15,.07) }

/* a page of the site in a window, without the self-scroll */
.cs-fig .browser > img{ width:100%; height:auto; display:block }
.cs-pair .browser{ box-shadow:0 30px 50px -36px rgba(23,19,15,.4), 0 1px 4px rgba(23,19,15,.05) }

/* the landing page, played through: a phone that scrolls the long home page down to the quiz
   and steps on through it, a tap mark where a student would press (click goes ahead, hover
   holds); beside it a second phone, the same tool in a college's brand */
.lpstage{
  display:flex; justify-content:center; align-items:flex-start; gap:clamp(1.5rem,9vw,9rem);
  background:var(--paper-deep); border:1px solid var(--rule); border-radius:4px;
  padding:clamp(1.5rem,5vw,4.5rem) clamp(1rem,4vw,4rem);
}
.lpstage .phone{ flex:0 0 auto; width:clamp(140px,21vw,300px) }
.lpstage .lp-alt{ margin-top:clamp(1.5rem,5vw,4rem) }
.lp-tap{ cursor:pointer; outline:none; -webkit-tap-highlight-color:transparent }
.lp-tap:focus-visible{ box-shadow:0 0 0 3px var(--accent) }

.lp-screens{ position:relative; overflow:hidden; background:#fff }
.lp-screens img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top;
  opacity:0; transform:translateX(7%);
  transition:opacity .3s ease, transform .45s cubic-bezier(.2,.7,.2,1), object-position 2.4s cubic-bezier(.65,0,.35,1);
}
.lp-screens img.on{ opacity:1; transform:none; z-index:1 }
.lp-screens img.was{ transform:translateX(-4%) }
/* an answer being picked: the same screen, swapped in place */
.lp-screens img.instant{ transform:none; transition:opacity .14s linear }

.phone{
  position:relative; padding:clamp(4px,.6vw,9px); border-radius:clamp(20px,3vw,42px);
  background:#17130F;
  box-shadow:0 50px 70px -40px rgba(23,19,15,.6), 0 2px 8px rgba(23,19,15,.12), inset 0 0 0 1px rgba(255,255,255,.08);
}
.phone .lp-screens{ aspect-ratio:393/850; border-radius:clamp(16px,2.45vw,34px) }

.tapdot{
  position:absolute; z-index:3; width:17%; aspect-ratio:1; border-radius:50%; pointer-events:none;
  background:rgba(28,24,20,.26); border:2px solid rgba(255,255,255,.9);
  box-shadow:0 0 0 1px rgba(28,24,20,.4), 0 4px 14px rgba(0,0,0,.25);
  transform:translate(-50%,-50%) scale(.6); opacity:0;
}
.tapping .tapdot{ animation:tap .95s cubic-bezier(.2,.7,.2,1) forwards }
@keyframes tap{
  0%{ opacity:0; transform:translate(-50%,-50%) scale(1.6) }
  32%{ opacity:1; transform:translate(-50%,-50%) scale(.9) }
  52%{ opacity:1; transform:translate(-50%,-50%) scale(.72) }
  100%{ opacity:0; transform:translate(-50%,-50%) scale(1.3) }
}
@media (prefers-reduced-motion:reduce){
  .lp-screens img{ transition:none; transform:none }
  .tapping .tapdot{ animation:none }
}

/* ================= v40: links inside captions ================= */
.cs-cap a{ color:var(--ink-soft); text-decoration:none; border-bottom:1px solid var(--rule); transition:color .2s, border-color .2s }
.cs-cap a:hover{ color:var(--accent); border-bottom-color:currentColor }

/* ================= v42: Global Spirits ================= */

/* drift rows of pieces in their own shapes: one height, natural widths */
.cs-drift.mixed{ --ph:clamp(13rem,24vw,25rem) }
.cs-drift.mixed .cs-track figure{ width:auto; height:var(--ph); aspect-ratio:auto }
.cs-drift.mixed .cs-track img{ width:auto; height:100%; object-fit:fill }

/* a row of pictures at one height: each column's share is its picture's width-to-height ratio */
.cs-fit{ display:grid; grid-template-columns:var(--cols); gap:clamp(.75rem,2vw,2rem) }
.cs-fit .frame img{ height:100%; object-fit:cover }
.cs-fit + .cs-fit,.cs-group + .cs-fit{ margin-top:clamp(.75rem,2vw,2rem) }

.cs-tri.r43 .frame{ aspect-ratio:4/3 }

@media (max-width:760px){
  .cs-drift.mixed{ --ph:58vw }
  .cs-fit{ gap:.6rem }
}

/* ================= v44: next project, as a card ================= */
/* The words keep the old band's padding, so the block stays the height it was; the next
   project's cover fills the right half at whatever height the words set. */
a.band.nx{ display:block; color:var(--paper); text-decoration:none; overflow:hidden }
.nx .lede{ margin:1.5rem 0 2rem }
.nx .pill{ display:inline-block }
a.band.nx:hover .pill{ border-bottom-color:currentColor }
.nx-a .nx-in{
  display:grid; grid-template-columns:minmax(0,7fr) minmax(0,6fr); align-items:stretch;
  gap:clamp(1.5rem,4vw,4rem); padding-right:clamp(.75rem,1.6vw,1.25rem);
}
.nx-a .nx-words{ padding-block:clamp(3.5rem,10vh,6.5rem); padding-left:clamp(1.5rem,5vw,4.5rem) }
.nx-img{ position:relative; overflow:hidden; border-radius:calc(var(--radius) * .55); background:#2a241e }
.nx-a .nx-img{ margin-block:clamp(.75rem,1.6vw,1.25rem) }
.nx-img img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 1.1s cubic-bezier(.2,.7,.2,1);
}
a.nx:hover .nx-img img{ transform:scale(1.045) }
@media (max-width:760px){
  .nx-a .nx-in{ grid-template-columns:1fr; gap:0; padding-right:0 }
  .nx-a .nx-words{ padding:2.75rem 1.5rem 1.75rem }
  .nx-a .nx-img{ aspect-ratio:2/1; margin:0 .75rem .75rem }
}
@media (prefers-reduced-motion:reduce){ .nx-img img{ transition:none } }

/* ================= v45: the website window scrolls from script ================= */
/* site.js now drives the scroll (start once in view, down, rest, back to top, rest), so the
   old CSS animation and its hover pause are switched off */
.browser-view img,.browser.inview .browser-view img{ animation:none }
.browser:not(.native) .browser-view img{ will-change:transform }

/* a site on a phone (v47): the browser window's self-scroll, in a phone body */
.phone.browser{ border:0 }
.phone .browser-view{ aspect-ratio:393/850; border-radius:clamp(16px,2.45vw,34px); background:#fff }

/* KLIK (v53): square ads in the drift, and a phone that plays a spot */
.cs-drift.square{ --pw:clamp(11rem,21vw,22rem) }
.cs-drift.square .cs-track figure{ aspect-ratio:1 }
.phonestage{
  display:flex; align-items:center; justify-content:center;
  background:var(--paper-deep); border:1px solid var(--rule); border-radius:4px;
}
.phonestage .phone{ width:clamp(118px,15vw,230px) }
.phone.vid .lp-screens{ aspect-ratio:9/16 }
.phone video{ display:block; width:100%; height:100%; object-fit:cover; background:#E3EDFB }
@media (max-width:760px){ .cs-drift.square{ --pw:56vw } }
/* links inside case study and About paragraphs: a quiet underline */
.cs-win p a,.cs-p a,.ab-p a{ color:inherit; text-decoration:none; border-bottom:1px solid var(--rule); transition:border-color .2s, color .2s }
.cs-win p a:hover,.cs-p a:hover,.ab-p a:hover{ color:var(--accent); border-bottom-color:currentColor }

/* KLIK cover (v54): the logo builds itself. The pattern of cursors drifts in, one cursor flies
   to the top of the last K and clicks, and the letters come up behind it. It ends exactly on the
   still logo image, plays when the cover comes into view, and stays still for reduced motion. */
.klogo{ display:block; width:100%; height:100%; background:#42007B }
.klogo .kp,.klogo .kl,.klogo .kc{ transform-box:fill-box; transform-origin:50% 50% }
.klogo .kc{ transform-origin:0 0 }
.klogo .kr{ opacity:0; transform-box:fill-box; transform-origin:50% 50% }
.klogo.play .kp{ animation:kp 1.3s cubic-bezier(.2,.7,.2,1) calc(.08s * var(--i)) both }
.klogo.play .kc{ animation:kc 2.1s cubic-bezier(.3,.1,.2,1) .35s both }
.klogo.play .kr{ animation:kr .8s cubic-bezier(.2,.7,.3,1) 1.75s }
.klogo.play .kl{ animation:kl .7s cubic-bezier(.2,.7,.2,1) calc(1.8s + .09s * var(--i)) both }
@keyframes kp{ from{ opacity:0; transform:translate(90px,120px) scale(.9) } to{ opacity:1; transform:none } }
@keyframes kc{
  0%  { opacity:0; transform:translate(1150px,330px) rotate(-14deg) scale(1.6) }
  12% { opacity:1 }
  62% { transform:translate(-12px,-10px) rotate(0) scale(1.04) }
  70% { transform:none }
  76% { transform:scale(.8) }
  86% { transform:scale(1.06) }
  100%{ opacity:1; transform:none }
}
@keyframes kr{ from{ opacity:.9; transform:scale(.2) } to{ opacity:0; transform:scale(2.6) } }
@keyframes kl{ from{ opacity:0; transform:translateY(60px) } to{ opacity:1; transform:none } }
@media (prefers-reduced-motion:reduce){ .klogo.play .kp,.klogo.play .kc,.klogo.play .kr,.klogo.play .kl{ animation:none } }
.klogo.pre .kp,.klogo.pre .kc,.klogo.pre .kl{ opacity:0 }
.zoom .frame .klogo{ transform:scale(calc(1.1 - var(--z,1) * .1)); will-change:transform }

/* v70: OneThread in use. Columns in the images' own ratios (1536x1024, 1338x1176) so both sit at one height */
.cs-pair.cs-inuse{ grid-template-columns:1.5fr 1.1378fr; margin-top:0 }
@media (max-width:760px){ .cs-pair.cs-inuse{ grid-template-columns:1fr } }

/* v70: on phones each project gets a low strip of its work above the name.
   Desktop keeps the drifting images behind the names, so the strips stay hidden there. */
.work .strip{ display:none }
@media (max-width:760px){
  .work .strip{
    display:block; order:-1; align-self:stretch; width:100%;
    aspect-ratio:8/3; max-height:230px; overflow:hidden;
    border-radius:4px; background:var(--paper-deep); margin-bottom:.8rem;
  }
  .work .strip img{ width:100%; height:100%; object-fit:cover; display:block }
  .works .work{ padding-block:1.25rem }
}

/* ================= v75: the Identity page ================= */
/* each brand: a rule, its name and role on the left, a few lines and a link on the right */
.idb{ margin-top:clamp(3.5rem,7vw,5.5rem) }
.idgroup .cs-ev{ margin-bottom:clamp(2.75rem,5.5vw,4.5rem) }
.idgroup .cs-ev + .idb{ margin-top:0 }
.idb-head{ border-top:1px solid var(--rule); padding-top:clamp(.9rem,1.4vw,1.15rem); row-gap:.75rem }
.idb-name h3{
  margin:0 0 .45rem; font-family:var(--display); font-weight:300;
  font-size:clamp(1.6rem,2.5vw,2.2rem); line-height:1.04; letter-spacing:-.015em;
}
.idb-name .label{ color:var(--ink-faint) }
.idb-head .cs-p .dlink{ font-size:.8125rem }
/* the pictures sit in a row at one height, each at its own shape, so nothing is cropped:
   every picture grows in proportion to its width-to-height ratio (--a) */
.idrow{ display:flex; gap:clamp(.6rem,1.4vw,1.1rem); margin-top:clamp(1.25rem,2.4vw,2rem) }
.idrow + .idrow{ margin-top:clamp(.6rem,1.4vw,1.1rem) }
.idrow > figure{ margin:0; flex:var(--a,1) 1 0; min-width:0 }
.idrow .frame{ aspect-ratio:var(--a,1); overflow:hidden; border-radius:4px; background:var(--paper-deep); border:1px solid var(--rule) }
.idrow .frame > img{ width:100%; height:100%; object-fit:cover; display:block }
/* a logo set on its own colour, over a pattern */
.idrow .plate{ position:relative }
.idrow .plate .mark{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:var(--mw,46%); height:auto; object-fit:contain }
@media (max-width:760px){
  .idrow{ flex-wrap:wrap }
  .idrow > figure{ flex:1 1 100% }
}

/* inSpring's seven steps as a stack of cards: every half second the front card slides forward and
   fades, the rest step up a place, and the next fades in at the back. Sizes are in container widths. */
.stepstack{
  --cw:52cqw;
  position:relative; aspect-ratio:1/1; overflow:hidden; border-radius:4px;
  background:#FAF7F2; border:1px solid var(--rule); container-type:inline-size;
}
.stepstack .ss-bg{ position:absolute; inset:0; width:100%; height:100%; display:block }
.ss-card{
  position:absolute; margin:0; width:var(--cw); aspect-ratio:800/972;
  left:calc(50cqw - var(--cw) * .365); top:calc(50cqw - var(--cw) * .4617);
  border-radius:14.4% / 11.85%; overflow:hidden; background:#fff;
  box-shadow:0 22px 44px -26px rgba(10,66,5,.28), 0 2px 6px rgba(10,66,5,.05);
  transition:transform .42s cubic-bezier(.45,0,.2,1), opacity .34s ease;
  will-change:transform,opacity;
}
.ss-card img{ width:100%; height:100%; display:block }
/* cards further back sink into the background under a thickening veil, rather than going see-through */
.ss-card::after{ content:""; position:absolute; inset:0; background:#FAF7F2; opacity:0; transition:opacity .42s ease }
.ss-card[data-slot="0"]   { transform:none;                 opacity:1; z-index:19 }
.ss-card[data-slot="1"]   { transform:translate(-9%,-8%);   opacity:1; z-index:18 }
.ss-card[data-slot="2"]   { transform:translate(-18%,-16%); opacity:1; z-index:17 }
.ss-card[data-slot="3"]   { transform:translate(-27%,-24%); opacity:1; z-index:16 }
.ss-card[data-slot="wait"]{ transform:translate(-36%,-32%); opacity:0; z-index:1 }
.ss-card[data-slot="out"] { transform:translate(9%,8%);     opacity:0; z-index:20 }
.ss-card[data-slot="1"]::after{ opacity:.22 }
.ss-card[data-slot="2"]::after{ opacity:.45 }
.ss-card[data-slot="3"]::after,.ss-card[data-slot="wait"]::after{ opacity:.66 }
@media (prefers-reduced-motion: reduce){ .ss-card,.ss-card::after{ transition:none } }

/* ================= v78: the Web page ================= */
/* each site sits on a stage: its window scrolls itself, with phones beside it where there
   are phone screens. The brand headers and the rows of stills are the Identity page's. */
.webrow{
  display:flex; align-items:center; justify-content:center; gap:clamp(1rem,3.5vw,3.5rem);
  margin-top:clamp(1.25rem,2.4vw,2rem);
  background:var(--paper-deep); border:1px solid var(--rule); border-radius:4px;
  padding:clamp(1.25rem,4.5vw,4rem) clamp(1rem,5vw,4.5rem);
}
.webrow .browser:not(.phone){ flex:1 1 0; min-width:0; max-width:900px }
.webrow .phone{ flex:0 0 auto; width:clamp(104px,14vw,200px) }
.webrow .phone + .phone{ margin-top:clamp(1.5rem,5vw,4rem) }
.webrow .shot{ margin:0; flex:1 1 0; min-width:0; max-width:900px }
.webrow .shot img{ width:100%; height:auto; display:block; border-radius:4px }
.webrow.phones{ gap:clamp(2rem,9vw,8rem) }
.webrow.phones .phone{ width:clamp(130px,19vw,270px) }
@media (max-width:760px){
  .webrow{ flex-wrap:wrap }
  .webrow .browser:not(.phone),.webrow .shot{ flex-basis:100% }
  .webrow .phone{ width:38% }
  .webrow .phone + .phone{ margin-top:0 }
  .webrow.phones .phone{ width:40% }
}