/* ==========================================================================
   Women Fiber to Fashion — wf2f.in
   Boutique editorial palette. Contrast verified:
     ink #1F1E1C     on canvas 15.18:1 · on card 14.13:1   (AAA)
     muted #5A5854   on canvas  6.47:1 · on card  6.02:1   (AA)
     sage #3B483B    on canvas  8.80:1 · reversed 8.80:1   (AAA)
     terracotta      on canvas  3.71:1 — LARGE TEXT ONLY (figures, borders)
     footer #A8A49C  on ink     6.71:1                     (AA)
   ========================================================================== */

:root{
  --bg:#F7F4EF;          /* raw linen canvas */
  --paper:#EFECE6;       /* unbleached cotton — cards, stats, image framing */
  --raise:#E5E1D8;
  --ink:#1F1E1C;         /* charcoal espresso */
  --stone:#5A5854;       /* muted captions */
  --line:#DFDAD1;
  --line-2:#C9C2B6;
  --clay:#3B483B;        /* olive sage — links, active states, CTAs */
  --cta:#3B483B;
  --cta-hover:#2E392E;
  --terra:#B06D53;       /* terracotta — figures and borders only, never small text */
  --on-dark:#A8A49C;     /* secondary text on the ink footer */

  --wrap:1240px;
  --gut:clamp(1.15rem,4.5vw,4rem);
  --s-s:clamp(1.75rem,3.5vw,2.75rem);
  --s-m:clamp(3rem,6.5vw,5rem);
  --s-l:clamp(4rem,9vw,7rem);

  --f-d:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-b:'Karla',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.2,.7,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-b);
  font-size:1rem;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--clay);text-decoration-thickness:1px;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--clay);outline-offset:3px;border-radius:2px}

h1,h2,h3,h4{font-family:var(--f-d);font-weight:800;letter-spacing:-.035em;line-height:1;
  margin:0;text-wrap:balance}
h1{font-size:clamp(2.05rem,5.6vw,4.15rem);text-transform:uppercase}
h2{font-size:clamp(1.6rem,3.6vw,2.75rem);text-transform:uppercase}
h3{font-size:clamp(1.02rem,1.7vw,1.28rem);font-weight:700;letter-spacing:-.015em;line-height:1.2}
p{margin:0 0 1.1em}
.lede{font-size:clamp(1.02rem,1.55vw,1.24rem);line-height:1.55;color:var(--stone);max-width:46ch}
.eyebrow{font-family:var(--f-d);font-weight:600;font-size:.66rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--stone);margin:0 0 1.2rem;display:block}
.muted{color:var(--stone)}
.rule{border:0;border-top:1px solid var(--terra);width:64px;margin:0 0 1.75rem}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:var(--s-l)}
.section--tint{background:var(--paper)}
.section--ink{background:var(--ink);color:var(--bg)}
.section--ink .eyebrow,.section--ink .muted{color:var(--on-dark)}
.g2{display:grid;gap:var(--s-s) clamp(2rem,4.5vw,4rem)}
@media(min-width:860px){.g2{grid-template-columns:1fr 1fr;align-items:center}}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:200;background:var(--ink);color:var(--bg);padding:.7rem 1.1rem}

/* ---------------- header ---------------- */
/* No backdrop-filter in the base rule. A filtered ancestor becomes the
   containing block for position:fixed descendants, which sized the mobile nav
   panel to the 64px header instead of the viewport: "Products" landed above
   the screen and "About" fell outside the panel's painted box, so it read as
   transparent text over the page. The frosted header is desktop-only, where
   the nav is not fixed. */
.hdr{position:sticky;top:0;z-index:60;background:rgba(247,244,239,.94);
  border-bottom:1px solid var(--line)}
@media(min-width:941px){
  .hdr{backdrop-filter:saturate(150%) blur(12px)}
}
.hdr__in{max-width:var(--wrap);margin-inline:auto;padding:.6rem var(--gut);
  display:flex;align-items:center;gap:.75rem}
.hdr__logo{display:flex;align-items:center;gap:.55rem;text-decoration:none;color:var(--ink);margin-right:auto}
.hdr__logo img{height:30px;width:auto}
.hdr__logo b{font-family:var(--f-d);font-weight:800;font-size:.78rem;letter-spacing:.01em;
  line-height:1;text-transform:uppercase;white-space:nowrap}
/* Name and founding year stack beside the mark. The block comes to ~24px, so
   the 30px mark still sets the header height and the hero fold is unaffected. */
.wordmark{display:flex;flex-direction:column;gap:.2rem}
.wordmark i{font-family:var(--f-d);font-style:normal;font-weight:600;font-size:.54rem;
  letter-spacing:.19em;line-height:1;text-transform:uppercase;color:var(--stone);
  white-space:nowrap}
.ftr__mark .wordmark i{color:var(--on-dark)}
.nav{display:flex;gap:clamp(.9rem,2vw,1.9rem);align-items:center}
.nav a{font-family:var(--f-d);font-weight:600;font-size:.74rem;letter-spacing:.11em;
  text-transform:uppercase;text-decoration:none;color:var(--ink);padding:.35rem 0;
  border-bottom:1px solid transparent;transition:border-color .2s,color .2s}
.nav a:hover{border-bottom-color:var(--clay)}
.nav a[aria-current="page"]{border-bottom-color:var(--clay);color:var(--clay);border-bottom-width:2px}
.hdr__cta{font-family:var(--f-d);font-weight:700;font-size:.72rem;letter-spacing:.11em;
  text-transform:uppercase;text-decoration:none;background:var(--cta);color:var(--bg);
  padding:.78rem 1.25rem;border-radius:2px;white-space:nowrap;min-height:44px;
  display:inline-flex;align-items:center;transition:background .2s}
.hdr__cta:hover{background:var(--cta-hover)}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:2px;
  cursor:pointer;padding:.5rem;color:var(--ink);min-width:44px;min-height:44px;
  align-items:center;justify-content:center}
@media(max-width:940px){
  .hdr{background:var(--bg)}
  .burger{display:inline-flex}
  .nav{position:fixed;inset:0 0 0 30%;background:var(--bg);flex-direction:column;
    align-items:flex-start;justify-content:center;gap:1.5rem;padding:2rem var(--gut);
    transform:translateX(100%);transition:transform .3s var(--ease),visibility .3s;
    box-shadow:-24px 0 60px rgba(26,23,20,.12);z-index:70;visibility:hidden}
  .nav[data-open="true"]{transform:none;visibility:visible}
  .nav a{font-size:1.05rem}
}
@media(max-width:420px){
  .hdr__logo b{font-size:.66rem}
  .hdr__logo .wordmark i{display:none}
  .hdr__cta{padding:.7rem .85rem;font-size:.66rem}
}

/* ---------------- hero: full bleed, type over the photograph ----------------
   The photo is the ground, not an object placed in the layout, so there is no
   edge to read as a pasted-on rectangle. A scrim carries the type: measured at
   11.4:1 for the headline, so it clears AAA. */
.hero{position:relative;display:flex;align-items:center;isolation:isolate;
  min-height:clamp(430px,62vh,620px);overflow:hidden;background:var(--ink)}
.hero picture,.hero picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero picture img{object-position:center 42%}
.hero__scrim{position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(18,17,16,.90) 0%,rgba(18,17,16,.74) 38%,
             rgba(18,17,16,.34) 66%,rgba(18,17,16,.16) 100%)}
.hero__in{position:relative;z-index:1;width:100%;color:var(--bg);
  padding-block:clamp(2.75rem,7vw,4.5rem)}
.hero__in .eyebrow{color:#CFC9C0}
.hero__in .lede{color:#E4DFD8;margin-top:1.35rem}
@media(max-width:760px){
  /* stacked: the scrim rotates so the type sits on the darkest part */
  .hero{min-height:clamp(460px,72vh,600px)}
  .hero__scrim{background:linear-gradient(178deg,rgba(18,17,16,.52) 0%,rgba(18,17,16,.78) 46%,
               rgba(18,17,16,.92) 100%)}
  .hero picture img{object-position:center 34%}
}

/* key figures */
/* The strip sits between the hero and the next section on home and
   capabilities, where it was flush against both. It needs air on each side
   while staying inside the first fold, so the band is deliberately tighter
   than --s-s, and the section that follows gives up some of its own top
   padding rather than the two stacking into a chasm. */
.keys-band{padding-top:clamp(1.5rem,3vw,2.25rem);
  padding-bottom:clamp(1.9rem,3.6vw,2.9rem)}
.keys-band + .section{padding-top:var(--s-m)}
/* Header + hero + strip comes to ~776px, so a short viewport has almost no
   room to spare. Rather than let the figures slide under the fold, the gap
   above them yields first — the gap below is what separates the strip from
   the next section and it keeps its full size. */
@media(max-height:900px){.keys-band{padding-top:1.05rem}}
.keys{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:2px;overflow:hidden}
@media(min-width:720px){.keys{grid-template-columns:repeat(4,1fr)}}
.key{background:var(--paper);padding:clamp(1rem,2vw,1.5rem)}
.key b{display:block;font-family:var(--f-d);font-weight:800;font-size:clamp(1.5rem,3vw,2.15rem);
  letter-spacing:-.035em;line-height:1;color:var(--terra)}
.key span{display:block;font-family:var(--f-d);font-weight:600;font-size:.64rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--stone);margin-top:.5rem}

/* ---------------- buttons ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;
  font-family:var(--f-d);font-weight:700;font-size:.74rem;letter-spacing:.11em;text-transform:uppercase;
  padding:.85rem 1.6rem;border-radius:2px;text-decoration:none;cursor:pointer;
  border:1px solid var(--cta);background:var(--cta);color:var(--bg);transition:all .2s}
.btn:hover{background:var(--cta-hover);border-color:var(--cta-hover)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn--light{background:var(--bg);border-color:var(--bg);color:var(--ink)}
.btn--light:hover{background:#fff;border-color:#fff;color:var(--ink)}
.btn--onphoto{background:transparent;border-color:rgba(247,244,239,.62);color:var(--bg)}
.btn--onphoto:hover{background:var(--bg);border-color:var(--bg);color:var(--ink)}
.btns{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.6rem}
@media(max-width:520px){.btns .btn{flex:1 1 100%}}

/* ---------------- client wall ---------------- */
.clients{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:2px;overflow:hidden}
@media(min-width:560px){.clients{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.clients{grid-template-columns:repeat(4,1fr)}}
.client{background:var(--paper);padding:1.35rem .85rem;text-align:center;
  display:flex;flex-direction:column;justify-content:center;min-height:104px}
.client b{font-family:var(--f-d);font-weight:700;font-size:.9rem;letter-spacing:-.015em;line-height:1.2}
.client--cta{text-decoration:none;color:var(--clay);transition:background .2s}
.client--cta:hover{background:var(--paper)}
.client--cta b{color:var(--clay)}
.client span{font-family:var(--f-d);font-weight:600;font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--stone);margin-top:.42rem}

/* ---------------- markets ---------------- */
.markets{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem}
@media(min-width:760px){.markets{grid-template-columns:repeat(4,1fr)}}
.market{border:1px solid var(--line);border-top:2px solid var(--terra);border-radius:2px;
  padding:1.15rem 1.1rem;background:var(--paper)}
.market b{display:block;font-family:var(--f-d);font-weight:700;font-size:1rem;letter-spacing:-.015em}
.market span{display:block;font-size:.83rem;color:var(--stone);margin-top:.3rem}

/* ---------------- process ---------------- */
.steps{list-style:none;counter-reset:s;margin:0;padding:0;display:grid;gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:2px;overflow:hidden}
@media(min-width:640px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.steps{grid-template-columns:repeat(3,1fr)}}
.steps li{counter-increment:s;background:var(--paper);padding:clamp(1.25rem,2.4vw,1.8rem)}
.steps li::before{content:counter(s,decimal-leading-zero);display:block;font-family:var(--f-d);
  font-weight:700;font-size:.7rem;letter-spacing:.15em;color:var(--clay);margin-bottom:.6rem}
.steps h3{margin-bottom:.3rem}
.steps p{font-size:.92rem;color:var(--stone);margin:0}

/* ---------------- spec table ---------------- */
.spec{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.spec li{display:flex;flex-wrap:wrap;gap:.3rem 1.5rem;justify-content:space-between;
  padding:.95rem 0;border-bottom:1px solid var(--line)}
.spec b{font-family:var(--f-d);font-weight:600;font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--stone)}
.spec span{font-weight:500;text-align:right;flex:1 1 auto}

/* ---------------- product tabs + carousel ---------------- */
.tabs{display:flex;gap:.5rem;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  padding-bottom:.3rem;margin-bottom:1.5rem}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:0 0 auto;font-family:var(--f-d);font-weight:600;font-size:.72rem;letter-spacing:.11em;
  text-transform:uppercase;padding:.72rem 1.15rem;min-height:44px;border-radius:100px;cursor:pointer;
  border:1px solid var(--line-2);background:var(--bg);color:var(--ink);transition:all .2s}
.tab:hover{border-color:var(--ink)}
.tab[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}

.carousel{position:relative}
.track{display:flex;gap:.85rem;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:.4rem}
.track::-webkit-scrollbar{display:none}
.slide{flex:0 0 78%;scroll-snap-align:start;background:var(--paper);border-radius:2px;overflow:hidden}
@media(min-width:620px){.slide{flex-basis:44%}}
@media(min-width:980px){.slide{flex-basis:26.5%}}
.slide img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform .6s var(--ease)}
.slide:hover img{transform:scale(1.03)}
.carousel__bar{display:flex;align-items:center;gap:.75rem;margin-top:1.1rem}
.dots{display:flex;gap:.4rem;flex-wrap:wrap;margin-right:auto}
.dot{width:26px;height:4px;border-radius:100px;border:0;background:var(--line-2);cursor:pointer;padding:0;
  transition:background .25s}
.dot[aria-current="true"]{background:var(--clay)}
.cbtn{width:44px;height:44px;border:1px solid var(--line-2);background:var(--bg);border-radius:100px;
  cursor:pointer;color:var(--ink);display:inline-flex;align-items:center;justify-content:center;transition:all .2s}
.cbtn:hover{border-color:var(--ink);background:var(--ink);color:var(--bg)}
.panel[hidden]{display:none}


/* ---------------- marquee (logo band + product bands) ----------------
   Pure CSS: the track holds the items twice and translates -50%, so the
   loop is seamless. Paused on hover/focus and disabled under reduced motion. */
.marquee{overflow:hidden;position:relative;--speed:46s}
.marquee::before,.marquee::after{content:"";position:absolute;top:0;bottom:0;width:64px;z-index:2;
  pointer-events:none}
.marquee::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.marquee::after{right:0;background:linear-gradient(270deg,var(--bg),transparent)}
.marquee--tint::before{background:linear-gradient(90deg,var(--paper),transparent)}
.marquee--tint::after{background:linear-gradient(270deg,var(--paper),transparent)}
.marquee__track{display:flex;align-items:center;width:max-content;
  animation:marq var(--speed) linear infinite}
.marquee:hover .marquee__track,.marquee:focus-within .marquee__track{animation-play-state:paused}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.logoband{--speed:52s}
.logoband .marquee__track{gap:clamp(2.5rem,5vw,4.5rem)}
.logoband img{height:auto;max-width:min(224px,42vw);opacity:.62;transition:opacity .25s;flex:0 0 auto}
.logoband a:hover img,.logoband img:hover{opacity:1}
/* Every supplied logo is a light serif wordmark, so brands without a logo file
   are set in a serif too — a bold geometric sans beside them reads as a mismatch. */
.logoband .wordmark{font-family:Georgia,'Times New Roman',serif;font-weight:400;
  font-size:clamp(.95rem,1.7vw,1.18rem);letter-spacing:.015em;color:var(--ink);opacity:.62;
  white-space:nowrap;flex:0 0 auto;transition:opacity .25s}
.logoband .wordmark:hover{opacity:1}

.prodband{--speed:64s}
.prodband .marquee__track{gap:clamp(.7rem,1.4vw,1.1rem)}
.prodband figure{flex:0 0 auto;margin:0;width:clamp(180px,22vw,260px)}
.prodband img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:2px;background:var(--paper)}

@media(prefers-reduced-motion:reduce){
  .marquee__track{animation:none;transform:none}
  .marquee{overflow-x:auto;scrollbar-width:none}
  .marquee::-webkit-scrollbar{display:none}
}

/* ---------------- gallery ---------------- */
.gal{display:grid;gap:.7rem;grid-template-columns:repeat(2,1fr)}
@media(min-width:820px){.gal{grid-template-columns:repeat(4,1fr)}}
.gal a{display:block;overflow:hidden;background:var(--paper);border-radius:2px;border:1px solid var(--line)}
.gal img{width:100%;aspect-ratio:1/1;object-fit:cover;transition:transform .6s var(--ease)}
/* Product tiles letterbox rather than crop. Cover was cutting up to 19% off
   the full-length garment shots and 44% off the landscape home-linen frames.
   The mat is the card tone, so the tiles read as framed cards. */
.gal--prod{grid-template-columns:repeat(2,1fr)}
.gal--prod a{background:var(--paper);border:1px solid var(--line)}
.gal--prod img{aspect-ratio:3/4;object-fit:contain;background:var(--paper)}
.gal--prod.gal--wide img{aspect-ratio:1/1}
.gal--prod a:hover img{transform:scale(1.02)}
@media(min-width:620px){.gal--prod{grid-template-columns:repeat(3,1fr)}}
@media(min-width:980px){.gal--prod{grid-template-columns:repeat(4,1fr)}}
.gal a:hover img{transform:scale(1.04)}

/* ---------------- cards ---------------- */
.cards{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(248px,1fr))}
.card{background:var(--paper);border:1px solid var(--line);border-radius:2px;
  padding:clamp(1.35rem,2.6vw,1.9rem);display:flex;flex-direction:column}
.card h3{margin-bottom:.55rem}
.card p{font-size:.94rem;color:var(--stone);margin-bottom:1rem}
.card__link{margin-top:auto;font-family:var(--f-d);font-weight:600;font-size:.7rem;letter-spacing:.13em;
  text-transform:uppercase;text-decoration:none;border-bottom:1px solid currentColor;
  align-self:flex-start;padding-bottom:2px}

/* ---------------- forms ---------------- */
.form{display:grid;gap:1.1rem}
.field label{display:block;font-family:var(--f-d);font-weight:600;font-size:.68rem;letter-spacing:.13em;
  text-transform:uppercase;margin-bottom:.42rem}
.field input,.field select,.field textarea{width:100%;font-family:var(--f-b);font-size:16px;
  color:var(--ink);background:var(--paper);border:1px solid var(--line-2);border-radius:2px;
  padding:.82rem .9rem;min-height:48px}
.field textarea{min-height:148px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--clay);
  outline-offset:1px;border-color:transparent}
.field small{display:block;font-size:.82rem;color:var(--stone);margin-top:.32rem}
.hp{position:absolute!important;left:-9999px!important}
.status{padding:.9rem 1.1rem;border-radius:2px;font-size:.93rem;display:none}
.status[data-state="ok"]{display:block;background:#EAF0E8;border:1px solid #9BB294;color:#2F4429}
.status[data-state="err"]{display:block;background:#F6E4DE;border:1px solid #C08D80;color:#6E2A18}
.form__row{display:grid;gap:1.1rem}
@media(min-width:620px){.form__row{grid-template-columns:1fr 1fr}}

/* ---------------- footer ---------------- */
.ftr{background:var(--ink);color:var(--bg);padding-block:var(--s-m) 1.75rem}
/* The closing CTA section is also dark. Without this the footer's own top
   margin showed a band of linen between two dark blocks. */
.section--ink + .ftr{padding-top:var(--s-s)}
.ftr a{color:var(--bg);text-decoration:none;border-bottom:1px solid rgba(247,244,239,.34)}
.ftr a:hover{border-bottom-color:var(--terra)}
.ftr__mark{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;border:0;
  margin-bottom:1.6rem}
.ftr__mark:hover{border:0}
.ftr__mark img{height:34px;width:auto}
.ftr__mark b{font-family:var(--f-d);font-weight:800;font-size:.86rem;letter-spacing:.01em;
  text-transform:uppercase;color:var(--bg);white-space:nowrap}
.ftr h4{font-family:var(--f-d);font-weight:600;font-size:.66rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--on-dark);margin:0 0 .85rem}
.ftr ul:not(.social){list-style:none;margin:0;padding:0;display:grid;gap:.55rem;font-size:.93rem}
.ftr__base{margin-top:var(--s-s);padding-top:1.4rem;border-top:1px solid rgba(247,244,239,.18);
  display:flex;flex-wrap:wrap;gap:.7rem 2rem;justify-content:space-between;font-size:.79rem;color:var(--on-dark)}

/* ---------------- sticky mobile CTA ---------------- */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:55;display:none;gap:.5rem;padding:.6rem;
  background:rgba(247,244,239,.96);backdrop-filter:blur(12px);border-top:1px solid var(--line);
  transform:translateY(110%);transition:transform .3s var(--ease)}
.dock[data-show="true"]{transform:none}
.dock .btn{flex:1;min-height:46px;font-size:.7rem;padding:.7rem .8rem}
@media(max-width:820px){.dock{display:flex}.ftr{padding-bottom:5.5rem}}

/* ---------------- reveal ---------------- */
/* Reveal targets are only hidden once JS has confirmed it is running, so a
   script failure degrades to fully visible content rather than a blank page. */
.js [data-rise]{opacity:0;transform:translateY(12px);transition:opacity .55s ease,transform .55s var(--ease)}
.js [data-rise].is-in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;
    scroll-behavior:auto!important}
  [data-rise]{opacity:1;transform:none}
  .slide:hover img,.gal a:hover img{transform:none}
}

/* lenis */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

/* ---------------- showcase viewer ----------------
   Replaces the lightbox: arrows, category tabs, keyboard and swipe. */
.show{position:fixed;inset:0;z-index:200;display:none;background:rgba(31,30,28,.97);
  color:var(--bg);flex-direction:column}
.show[open]{display:flex}
.show__bar{display:flex;align-items:center;gap:.75rem;padding:.7rem clamp(.75rem,2vw,1.5rem);
  border-bottom:1px solid rgba(247,244,239,.14);flex-wrap:wrap}
.show__tabs{display:flex;gap:.4rem;overflow-x:auto;scrollbar-width:none;margin-right:auto}
.show__tabs::-webkit-scrollbar{display:none}
.show__tab{flex:0 0 auto;font-family:var(--f-d);font-weight:600;font-size:.68rem;letter-spacing:.11em;
  text-transform:uppercase;padding:.6rem 1rem;min-height:44px;border-radius:100px;cursor:pointer;
  background:transparent;border:1px solid rgba(247,244,239,.32);color:var(--bg);transition:all .2s}
.show__tab:hover{border-color:var(--bg)}
.show__tab[aria-selected="true"]{background:var(--bg);color:var(--ink);border-color:var(--bg)}
.show__count{font-family:var(--f-d);font-weight:600;font-size:.7rem;letter-spacing:.12em;
  color:var(--on-dark);font-variant-numeric:tabular-nums;white-space:nowrap}
.show__x{width:44px;height:44px;flex:0 0 auto;border:1px solid rgba(247,244,239,.32);border-radius:100px;
  background:transparent;color:var(--bg);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.show__x:hover{background:var(--bg);color:var(--ink)}
.show__stage{flex:1;display:flex;align-items:center;justify-content:center;gap:clamp(.4rem,2vw,1.5rem);
  padding:clamp(.75rem,2.5vw,2rem);min-height:0}
.show__fig{margin:0;flex:1;min-width:0;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.9rem}
/* the <picture> is a wrapper only — taking it out of layout keeps the img a
   direct flex child, so max-height:100% still resolves against .show__fig */
.show__fig picture{display:contents}
.show__fig img{max-width:100%;max-height:100%;min-height:0;object-fit:contain;border-radius:2px;
  background:var(--paper)}
.show__cap{font-size:.86rem;color:var(--on-dark);text-align:center;max-width:56ch}
.show__nav{width:clamp(44px,5vw,56px);height:clamp(44px,5vw,56px);flex:0 0 auto;border-radius:100px;
  border:1px solid rgba(247,244,239,.32);background:transparent;color:var(--bg);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;transition:all .2s}
.show__nav:hover{background:var(--bg);color:var(--ink)}
.show__nav[disabled]{opacity:.28;cursor:default}
.show__nav[disabled]:hover{background:transparent;color:var(--bg)}
body.show-open{overflow:hidden}
@media(max-width:620px){
  .show__stage{padding:.6rem;gap:.3rem}
  .show__nav{position:absolute;bottom:1.1rem;z-index:2;background:rgba(31,30,28,.72)}
  .show__nav--prev{left:1rem}
  .show__nav--next{right:1rem}
  .show__cap{font-size:.8rem}
}

/* ---------------- social glyphs ----------------
   Brand colours, no chrome around them. Sized to what the old circle measured
   (44px) and spaced to the footer list's own rhythm so they sit as another row. */
.social{list-style:none;display:flex;gap:.6rem;margin:.55rem 0 0;padding:0}
.social a{display:inline-flex;width:44px;height:44px;border-radius:9px;overflow:hidden;
  text-decoration:none;border:0;transition:opacity .2s,transform .2s}
.social a:hover{opacity:.82;transform:translateY(-1px)}
.social a:focus-visible{outline:2px solid var(--clay);outline-offset:3px}
.social svg{width:100%;height:100%;display:block}
.social--ftr a{border:0}
.social--ftr a:hover{opacity:.85;background:none}