/* =========================================================================
   CIVARA — site stylesheet
   Sceptre Red carries the house. Bone and Midnight are the accents.
   Everything on this site is centred, paired, or evenly divided.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&family=IBM+Plex+Sans+Arabic:wght@300;400;500&display=swap');

/* ---------- 1. Tokens ------------------------------------------------- */

:root{
  /* The three. Sceptre Red is the ground of the house. */
  --red:#4D0E12;
  --bone:#E6E0D6;
  --midnight:#101722;

  /* Tonal steps of Sceptre Red — the same colour, carried deeper or lifted.
     No fourth hue is introduced anywhere on this site.
     --red-deep is the ground the whole site is laid on; --red itself is kept
     for the accent, where the colour is read against Bone rather than under
     photography. --red-sink exists only so the stuck nav still reads as a bar
     against that ground. */
  --red-deep:#330D10;
  --red-lift:#571B1F;
  --red-sink:#1F080A;

  --bone-08:rgba(230,224,214,.08);
  --bone-14:rgba(230,224,214,.14);
  --bone-22:rgba(230,224,214,.22);
  --bone-34:rgba(230,224,214,.34);
  --bone-52:rgba(230,224,214,.52);
  --bone-70:rgba(230,224,214,.70);

  --mid-12:rgba(16,23,34,.12);
  --mid-40:rgba(16,23,34,.40);
  --mid-58:rgba(16,23,34,.58);

  --display:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'IBM Plex Sans Arabic','Helvetica Neue',Arial,sans-serif;

  --gut:clamp(20px,4vw,64px);
  --shell:1440px;

  --ease:cubic-bezier(.22,1,.36,1);
  --slow:1.1s;
}

*,*::before,*::after{box-sizing:border-box}

/* The canvas, not the page. Anything the browser paints outside the document
   — an overscroll past the end, or the gap under a page too short to fill the
   window — takes this colour. Every page finishes on the sunk-red footer, so
   it is that same red; left to inherit from the body it flashed the lighter
   red ground underneath the footer. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--red-sink)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--red-deep);
  color:var(--bone);
  font-family:var(--sans);
  font-weight:300;
  font-size:16px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--bone);color:var(--red)}

/* Grain. Keeps a large red field from reading as flat digital ink. */
body::after{
  content:"";position:fixed;inset:-120px;z-index:9000;pointer-events:none;
  opacity:.055;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='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 2. Type --------------------------------------------------- */

.d1,.d2,.d3{font-family:var(--display);font-weight:300;margin:0;text-wrap:balance}
.d1{font-size:clamp(44px,6.6vw,104px);line-height:1.02;letter-spacing:.015em}
.d2{font-size:clamp(32px,4vw,62px);line-height:1.08;letter-spacing:.014em}
.d3{font-size:clamp(23px,2.2vw,34px);line-height:1.2;letter-spacing:.012em}
.d1 em,.d2 em,.d3 em{font-style:italic;font-weight:400}

.lede{font-size:clamp(16px,1.2vw,18.5px);line-height:1.74;color:var(--bone-70);margin:0}
.small{font-size:13.5px;line-height:1.68;color:var(--bone-52)}

/* 11px caps at .18em — the label, used at one size only. */
.lab{
  font-family:var(--sans);font-weight:500;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;line-height:1;margin:0;
}
.num{font-variant-numeric:tabular-nums;letter-spacing:.02em}
.price{font-weight:400;font-size:14px;font-variant-numeric:tabular-nums;letter-spacing:.04em}

/* ---------- 3. Layout ------------------------------------------------- */

.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gut)}
.shell--wide{max-width:1680px}
.shell--tight{max-width:1080px}

.sheet{position:relative;padding-block:clamp(84px,10vw,160px)}
.sheet--deep{background:var(--red-deep)}
.sheet--lift{background:var(--red-lift)}
.sheet--mid{background:var(--midnight)}
.sheet--bone{background:var(--bone);color:var(--midnight)}
.sheet--tight{padding-block:clamp(60px,7vw,104px)}

/* Every section head is centred. */
.head{text-align:center;max-width:74ch;margin-inline:auto;margin-bottom:clamp(48px,6vw,88px)}
.head .lede{margin-inline:auto;max-width:56ch;margin-top:20px}

/* Eyebrow: a centred label between two equal rules. */
.eyebrow{
  display:flex;align-items:center;justify-content:center;gap:20px;
  margin:0 0 26px;color:var(--bone-52);
}
.eyebrow::before,.eyebrow::after{
  content:"";width:clamp(26px,4vw,62px);height:1px;background:currentColor;opacity:.5;
}
.sheet--bone .eyebrow{color:var(--mid-40)}

hr.rule{border:0;height:1px;background:var(--bone-14);margin:0}
.sheet--bone hr.rule{background:var(--mid-12)}

/* ---------- 4. Nav — links split evenly either side of the mark -------- */

.nav{
  position:fixed;top:0;left:0;right:0;z-index:600;
  background:transparent;transition:background .7s var(--ease),box-shadow .7s var(--ease);
}
.nav.is-stuck{background:var(--red-sink);box-shadow:0 1px 0 var(--bone-14)}

.nav__in{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  height:88px;gap:20px;transition:height .6s var(--ease);
}
.nav.is-stuck .nav__in{height:70px}

.nav__side{display:flex;align-items:center;gap:clamp(18px,2.4vw,38px)}
.nav__side--r{justify-content:flex-end}

.nav__mark{display:block;width:clamp(118px,10vw,158px);justify-self:center}
.nav__mark img{width:100%}

.nav__l{
  position:relative;font-size:11px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;padding-block:7px;white-space:nowrap;
}
.nav__l::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;
  transform:scaleX(0);transition:transform .6s var(--ease);
}
.nav__l:hover::after,.nav__l[aria-current]::after{transform:scaleX(1)}

.nav__burger{display:none;width:24px;height:11px;position:relative;flex:none}
.nav__burger i{position:absolute;left:0;right:0;height:1px;background:currentColor}
.nav__burger i:first-child{top:0}
.nav__burger i:last-child{bottom:0}

/* ---------- 5. Cartouche — the one enclosure the house owns ------------ */

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:54px;padding:0 38px;border-radius:999px;
  font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  border:1px solid var(--bone-34);color:var(--bone);
  transition:background .6s var(--ease),color .6s var(--ease),border-color .6s var(--ease);
}
.btn:hover{background:var(--bone);color:var(--red);border-color:var(--bone)}
.btn--solid{background:var(--bone);color:var(--red);border-color:var(--bone)}
.btn--solid:hover{background:transparent;color:var(--bone);border-color:var(--bone-34)}
.btn--wide{width:100%}
.sheet--bone .btn{border-color:var(--mid-40);color:var(--midnight)}
.sheet--bone .btn:hover{background:var(--red);color:var(--bone);border-color:var(--red)}

.tag{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--bone-22);border-radius:999px;padding:6px 16px;
  font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-70);
}
.tag i{width:4px;height:4px;border-radius:50%;background:currentColor;font-style:normal}

.ul{position:relative;display:inline-block;padding-bottom:4px}
.ul::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;
  opacity:.5;transform:scaleX(1);transition:opacity .5s var(--ease);
}
.ul:hover::after{opacity:1}

/* ---------- 6. Hero — centred, full-bleed, red-carried ---------------- */

.hero{
  position:relative;min-height:100svh;display:grid;place-items:center;
  text-align:center;overflow:hidden;padding:132px var(--gut) clamp(56px,7vw,92px);
}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__media img{
  width:100%;height:100%;object-fit:cover;object-position:50% 32%;
  filter:grayscale(1) contrast(1.04) brightness(1.16);
}
/* Sceptre Red carried across the photograph as a duotone, not a tint.
   The garment is itself Sceptre Red, so the multiply is held back far
   enough for the knit to stay legible inside the field. */
.hero__media::after{
  content:"";position:absolute;inset:0;background:var(--red-deep);
  mix-blend-mode:multiply;opacity:.74;
}
.hero__media::before{
  content:"";position:absolute;inset:0;z-index:2;
  background:radial-gradient(ellipse at 50% 40%,rgba(51,13,16,0) 46%,var(--red-deep) 100%);
}

.hero__in{position:relative;z-index:3;max-width:60ch}

.hero h1{margin:0 auto}
.hero .lede{margin:clamp(24px,3vw,34px) auto 0;max-width:44ch}
.hero__cta{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:clamp(32px,4vw,46px)}

.hero__foot{
  position:absolute;left:0;right:0;bottom:clamp(26px,3.4vw,44px);z-index:3;
  display:flex;justify-content:center;
}
.hero__foot .lab{color:var(--bone-34)}

/* ---------- 7. Even fact row ------------------------------------------ */

.facts{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--bone-14);border-bottom:1px solid var(--bone-14);
}
.facts>div{
  text-align:center;padding:clamp(26px,3.4vw,44px) 18px;
  border-right:1px solid var(--bone-14);
}
.facts>div:last-child{border-right:0}
.facts b{
  display:block;font-family:var(--display);font-weight:300;
  font-size:clamp(30px,3.6vw,52px);line-height:1;margin-bottom:12px;font-variant-numeric:tabular-nums;
}
.facts .lab{color:var(--bone-52)}

/* ---------- 8. Even grids --------------------------------------------- */

.g2{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.4vw,40px)}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,40px)}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,1.8vw,30px)}

/* Paired block: two equal columns, optically centred against each other. */
.pair{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(34px,5vw,88px);align-items:center}
.pair--text{text-align:center}

/* ---------- 9. Product cards — all identical, all aligned ------------- */

.card{display:block;text-align:center}
.card__fig{
  position:relative;overflow:hidden;aspect-ratio:3/4;
  border:1px solid var(--bone-14);background:var(--red-deep);
}
.card__fig img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.6s var(--ease);
}
.card:hover .card__fig img{transform:scale(1.05)}
.card__flag{position:absolute;left:50%;top:14px;transform:translateX(-50%);z-index:2;background:var(--red-deep)}

.card__meta{padding-top:20px}
.card__meta h3{
  font-family:var(--display);font-weight:400;font-size:21px;line-height:1.3;
  margin:0;letter-spacing:.015em;
}
.card__cloth{margin:7px 0 0;font-size:12.5px;color:var(--bone-52);letter-spacing:.03em}
.card__price{margin:11px 0 0;font-size:13.5px;font-variant-numeric:tabular-nums;letter-spacing:.06em;color:var(--bone-70)}

.sheet--bone .card__fig{border-color:var(--mid-12);background:rgba(16,23,34,.04)}
.sheet--bone .card__cloth{color:var(--mid-40)}
.sheet--bone .card__price{color:var(--mid-58)}
.sheet--bone .card__flag{background:var(--bone);border-color:var(--mid-12);color:var(--mid-58)}

/* ---------- 10. Strip — full-bleed band of tall frames ----------------- */

/* One garment, many angles. The band runs edge to edge and is the only
   full-bleed photography on the site. */
.strip{display:grid;grid-template-columns:repeat(6,1fr);gap:2px;background:var(--red-deep)}
.strip figure{margin:0;overflow:hidden}
/* 3:4, the ratio the photography is shot at. A taller cell would take the
   head and the shoes off a standing figure. */
.strip img{width:100%;aspect-ratio:3/4;object-fit:cover}

.strip__cap{text-align:center;padding:clamp(36px,4.4vw,60px) var(--gut) 0}
.strip__cap .lab{color:var(--bone-52);margin-bottom:20px}
.strip__cap .d2{max-width:24ch;margin-inline:auto}

/* Framed figure used inside paired blocks and grids. */
.frame{border:1px solid var(--bone-14);overflow:hidden}
.frame img{width:100%;aspect-ratio:4/5;object-fit:cover}
.frame--wide img{aspect-ratio:3/2}
.frame--tall img{aspect-ratio:3/4}
.frame--sq img{aspect-ratio:1/1}
.sheet--bone .frame{border-color:var(--mid-12)}

/* A look, not a product: framed photograph over a single label. */
.look{margin:0;text-align:center}
.look figcaption{margin-top:16px;color:var(--bone-52)}

/* ---------- 11. Single piece ------------------------------------------- */

/* The house sells one garment. Its card sits alone and centred rather than
   pretending to be the first cell of a grid. */
.one{max-width:430px;margin-inline:auto}

/* The catalogue. One product centres itself; a dozen fill the shell evenly,
   so the run can grow without the page needing a second layout. */
.shopgrid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,380px));
  gap:clamp(24px,3vw,46px);justify-content:center;
}
.shopgrid .card__fig img:not([src]){opacity:0}

/* ---------- 12. Product page ------------------------------------------ */

.pdp{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(32px,4.5vw,80px);align-items:start;padding-top:clamp(120px,12vw,168px)}
.pdp__gallery{display:grid;gap:clamp(10px,1.2vw,18px)}
.pdp__gallery figure{margin:0;border:1px solid var(--bone-14);overflow:hidden}
.pdp__gallery figure img{width:100%;aspect-ratio:3/4;object-fit:cover}
.pdp__gallery .duo{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(10px,1.2vw,18px)}
.pdp__gallery .duo figure img{aspect-ratio:1/1}

.pdp__panel{position:sticky;top:104px;text-align:center}
.crumb{display:flex;justify-content:center;gap:11px;font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-34);margin:0 0 26px}

.pdp__panel h1{margin:0}
.pdp__price{margin:18px 0 0;font-size:17px;font-variant-numeric:tabular-nums;letter-spacing:.06em;color:var(--bone-70)}
.pdp__note{font-size:15px;line-height:1.75;color:var(--bone-70);max-width:46ch;margin:26px auto 0}

.pdp__panel hr.rule{margin:clamp(30px,3.6vw,44px) 0}

.sizes{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin:16px 0 0}
.sizes button{
  min-width:56px;height:46px;padding:0 15px;border:1px solid var(--bone-22);border-radius:999px;
  font-size:12px;letter-spacing:.08em;font-variant-numeric:tabular-nums;color:var(--bone-70);
  transition:background .5s var(--ease),color .5s var(--ease),border-color .5s var(--ease);
}
.sizes button:hover:not(:disabled){border-color:var(--bone-52);color:var(--bone)}
.sizes button[aria-pressed="true"]{background:var(--bone);border-color:var(--bone);color:var(--red)}
.sizes button:disabled{opacity:.28;cursor:not-allowed;text-decoration:line-through}

/* Spec ledger — centred, evenly ruled. */
.spec{width:100%;border-collapse:collapse;margin-top:8px;text-align:center}
.spec tr{border-bottom:1px solid var(--bone-14)}
.spec tr:first-child{border-top:1px solid var(--bone-14)}
.spec th,.spec td{padding:16px 8px;font-weight:300;font-size:13.5px;text-align:center}
.spec th{
  font-weight:500;font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--bone-34);width:42%;
}
.spec td{color:var(--bone-70);font-variant-numeric:tabular-nums}

.acc{margin-top:clamp(28px,3.4vw,40px);border-top:1px solid var(--bone-14)}
.acc details{border-bottom:1px solid var(--bone-14)}
.acc summary{
  list-style:none;cursor:pointer;padding:19px 0;display:flex;justify-content:center;
  align-items:center;gap:14px;font-size:10.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
}
.acc summary::-webkit-details-marker{display:none}
.acc summary i{font-style:normal;position:relative;width:10px;height:10px;flex:none;opacity:.6}
.acc summary i::before,.acc summary i::after{content:"";position:absolute;background:currentColor}
.acc summary i::before{left:0;right:0;top:4.5px;height:1px}
.acc summary i::after{top:0;bottom:0;left:4.5px;width:1px;transition:transform .5s var(--ease)}
.acc details[open] summary i::after{transform:scaleY(0)}
.acc__body{padding:0 0 24px;font-size:14px;line-height:1.75;color:var(--bone-52);max-width:48ch;margin-inline:auto}
.acc__body p{margin:0}

/* ---------- 12b. Shirting — the fit finder ---------------------------- */

.vh{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

.fit{max-width:720px;margin-inline:auto;text-align:center}
.fit__set{border:0;margin:0;padding:0}
.fit__set legend{color:var(--bone-34);margin-bottom:14px;padding:0}

/* Segmented choice, built from the same cartouche as every other control. */
.seg{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.seg button{
  min-height:46px;padding:0 24px;border-radius:999px;border:1px solid var(--bone-22);
  font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-52);
  transition:background .5s var(--ease),color .5s var(--ease),border-color .5s var(--ease);
}
.seg button:hover{color:var(--bone);border-color:var(--bone-52)}
.seg button[aria-pressed="true"]{background:var(--bone);border-color:var(--bone);color:var(--red-deep)}

.fit__grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:14px;
  max-width:520px;margin:clamp(26px,3vw,36px) auto 0;
}
.fit__f{display:flex;flex-direction:column;gap:10px;text-align:center}
.fit__f .lab{color:var(--bone-34)}
.fit__f input{
  height:52px;padding:0 18px;border-radius:999px;text-align:center;
  background:transparent;border:1px solid var(--bone-22);color:var(--bone);
  font-family:var(--sans);font-size:15px;font-weight:300;font-variant-numeric:tabular-nums;
  transition:border-color .5s var(--ease);
}
.fit__f input::placeholder{color:var(--bone-34)}
.fit__f input:focus{outline:none;border-color:var(--bone-70)}
.fit__f input.is-wrong{border-color:var(--bone-70)}

.fit__err{
  margin:16px 0 0;min-height:1.5em;font-size:13.5px;color:var(--bone-70);
}
.fit__err:empty{min-height:0}
.fit__go{margin-top:clamp(22px,2.6vw,30px)}

/* The answer. One number, given room, with the reasoning under it. */
.fit__out{
  max-width:720px;margin:clamp(34px,4vw,52px) auto 0;padding:clamp(28px,3.4vw,44px) var(--gut);
  border-top:1px solid var(--bone-14);border-bottom:1px solid var(--bone-14);text-align:center;
}
.fit__lead{color:var(--bone-34);margin:0}
.fit__size{
  font-family:var(--display);font-weight:300;font-size:clamp(64px,9vw,124px);
  line-height:1;letter-spacing:.03em;margin:18px 0 0;
}
.fit__why{margin:20px auto 0;max-width:44ch;font-size:15px;line-height:1.7;color:var(--bone-70)}
.fit__note{margin:14px auto 0;max-width:46ch;font-size:13.5px;line-height:1.65;color:var(--bone-52)}
.fit__out .btn{margin-top:clamp(24px,3vw,32px)}

/* Size chart */
.tablewrap{overflow-x:auto}
.sizetable{width:100%;border-collapse:collapse;text-align:center;min-width:520px}
.sizetable tr{border-bottom:1px solid var(--bone-14)}
.sizetable thead tr{border-bottom-color:var(--bone-22)}
.sizetable th,.sizetable td{padding:15px 10px;font-weight:300;font-size:14px;text-align:center}
.sizetable thead th{
  font-weight:500;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-34);
}
.sizetable tbody th{
  font-family:var(--display);font-weight:400;font-size:18px;letter-spacing:.05em;color:var(--bone);
}
.sizetable td{color:var(--bone-70);font-variant-numeric:tabular-nums}
.sizetable tbody tr[data-picked]{background:var(--bone-08)}

@media (max-width:720px){
  .fit__grid{grid-template-columns:1fr}
}

/* ---------- 13. Footer ------------------------------------------------- */

/* The footer is a colophon, not a second page. Every band is set on the
   tightest rhythm the type will carry, and the sign-up sits on one line
   beside its own sentence rather than under it. */
.foot{position:relative;background:var(--red-sink);color:var(--bone);padding-block:clamp(12px,1.4vw,16px) 10px;text-align:center}

/* The ground does not meet the footer on a seam — it is carried into it. The
   fade sits above the footer, inside the last section's bottom padding, so it
   dissolves the ground without ever touching type or photography. */
.foot::before{
  content:"";position:absolute;left:0;right:0;bottom:100%;
  height:clamp(64px,7vw,110px);pointer-events:none;
  background:linear-gradient(to bottom,rgba(31,8,10,0) 0%,rgba(31,8,10,.45) 55%,var(--red-sink) 100%);
}
.foot__cols{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.4vw,36px)}
.foot__cols h4{margin:0 0 9px;font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-34)}
.foot__cols ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.foot__cols a{font-size:13px;line-height:1.5;color:var(--bone-52);transition:color .5s var(--ease)}
.foot__cols a:hover{color:var(--bone)}

.sign{
  margin:clamp(14px,1.6vw,18px) auto 0;
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  column-gap:clamp(14px,2vw,26px);row-gap:10px;
}
.sign p{color:var(--bone-52);font-size:13px;margin:0}
.sign form{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.sign input{
  flex:0 1 240px;min-width:190px;height:44px;padding:0 20px;border-radius:999px;text-align:center;
  background:transparent;border:1px solid var(--bone-22);color:var(--bone);
  font-family:var(--sans);font-size:13px;font-weight:300;transition:border-color .5s var(--ease);
}
.sign input::placeholder{color:var(--bone-34)}
.sign input:focus{outline:none;border-color:var(--bone-52)}
.sign .btn{min-height:44px;padding:0 26px}
/* Only takes a line once there is something to say. */
.sign__said{flex-basis:100%;margin:0;min-height:0;font-size:13px;color:var(--bone-70)}
.sign__said:empty{display:none}

.foot__base{
  margin-top:clamp(12px,1.4vw,16px);padding-top:10px;border-top:1px solid var(--bone-08);
  font-size:11px;letter-spacing:.14em;color:var(--bone-34);
}
.foot__base p{margin:0}

/* ---------- 14. Reveal — uniform, symmetric --------------------------- */

[data-rise]{opacity:0;transform:translateY(26px);transition:opacity 1.05s var(--ease),transform 1.15s var(--ease)}
[data-rise].is-in{opacity:1;transform:none}

/* Images open from the centre outward — the only reveal used for photography. */
[data-open]{clip-path:inset(0 50% 0 50%);transition:clip-path 1.4s var(--ease)}
[data-open].is-in{clip-path:inset(0 0 0 0)}

.wipe{position:fixed;inset:0;z-index:8000;background:var(--red-deep);transform:scaleY(0);pointer-events:none}
.wipe.is-out{transform-origin:bottom;transform:scaleY(1);transition:transform .6s var(--ease)}
.wipe.is-in{transform-origin:top;transform:scaleY(1);animation:wipeup .8s var(--ease) forwards}
@keyframes wipeup{to{transform:scaleY(0)}}

/* ---------- 15. Responsive --------------------------------------------- */

@media (max-width:1080px){
  .pdp{grid-template-columns:1fr;gap:36px}
  .pdp__panel{position:static}
  .g4{grid-template-columns:repeat(2,1fr)}
  .strip{grid-template-columns:repeat(3,1fr)}
  .facts{grid-template-columns:repeat(2,1fr)}
  .facts>div:nth-child(2n){border-right:0}
  .facts>div:nth-child(-n+2){border-bottom:1px solid var(--bone-14)}
}

@media (max-width:860px){
  /* Both halves of the nav fold into the panel — the mark and the burger keep
     their cells on the first row, the two link groups stack under them. */
  .nav__in{height:72px}
  .nav__side{display:none}
  .nav__mark{grid-column:2;grid-row:1}
  .nav__burger{display:block;grid-column:3;grid-row:1;justify-self:end}

  .nav.is-open .nav__in{height:auto;padding-bottom:14px}
  .nav.is-open .nav__side{display:block;grid-column:1 / -1;text-align:center}
  .nav.is-open .nav__l{
    display:block;padding:16px 0;border-top:1px solid var(--bone-14);
  }
  .nav.is-open .nav__l::after{display:none}

  .g3,.pair{grid-template-columns:1fr}
  .g3{gap:28px}
}

@media (max-width:560px){
  .g2,.g4{grid-template-columns:1fr}
  .strip{grid-template-columns:repeat(2,1fr)}
  .facts{grid-template-columns:1fr}
  .facts>div{border-right:0;border-bottom:1px solid var(--bone-14)}
  .facts>div:last-child{border-bottom:0}
  .foot__cols{grid-template-columns:repeat(2,1fr);gap:32px}
}

/* ---------- 16. Reduced motion ----------------------------------------- */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  [data-rise]{opacity:1;transform:none}
  [data-open]{clip-path:none}
  .wipe{display:none}
}