/* =========================================================================
   Oliver Hauser Couture — the homepage experience
   Chapters: 00 Entrance · 01 Manifesto · 02 Discover · 03 Blueprint · 04 Lab · 05 Join
   ========================================================================= */

.xk{ font-size:11px; letter-spacing:.3em; text-transform:uppercase; font-weight:600; opacity:.65; margin:0 0 28px; }

/* ---------------------------------- intro ---------------------------------- */
.intro{ animation: introOut .9s cubic-bezier(.7,0,.2,1) 2.7s forwards; }
.in-count{
  position:absolute; left:var(--gutter); bottom:clamp(18px,4vh,44px); display:flex; align-items:baseline; gap:6px;
  font-family:var(--font-display); font-weight:800; font-size:clamp(64px,13vw,200px); line-height:.8; letter-spacing:-.04em; color:var(--paper);
  font-variant-numeric:tabular-nums; opacity:.92;
}
.in-count i{ font-style:normal; font-size:.28em; letter-spacing:.1em; opacity:.6; }

/* ---------------------------------- hero ----------------------------------- */
.xh{
  position:relative; min-height:100svh; background:var(--paper); overflow:hidden; display:flex; align-items:flex-end;
  --mx:0; --my:0;
}
.xh-grid{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.xh-frame{ position:absolute; inset:14px; border:1px solid rgba(17,17,16,.16); pointer-events:none; z-index:1; }
.xh-frame::before, .xh-frame::after{ content:""; position:absolute; width:14px; height:14px; border:1px solid var(--ink); }
.xh-frame::before{ top:-1px; left:-1px; border-right:0; border-bottom:0; }
.xh-frame::after{ bottom:-1px; right:-1px; border-left:0; border-top:0; }
.xh-hud{ position:absolute; z-index:2; margin:0; font-size:10.5px; line-height:1.7; letter-spacing:.24em; text-transform:uppercase; font-weight:600; color:var(--ink); opacity:.7; font-variant-numeric:tabular-nums; }
.xh-tl{ top:calc(var(--nav-h) + 20px); left:calc(var(--gutter) + 6px); }
.xh-tr{ top:calc(var(--nav-h) + 20px); right:calc(var(--gutter) + 6px); text-align:right; }
.xh-bl{ left:30px; top:50%; writing-mode:vertical-rl; transform:rotate(180deg) translateY(50%); }

.xh-float{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.xh-obj{
  position:absolute; width:clamp(90px,13vw,210px); color:var(--ink); --d:0; --r:0deg;
  transform: translate3d(calc(var(--mx) * var(--d) * 1px), calc(var(--my) * var(--d) * 1px + var(--sy,0) * var(--d) * -.25px), 0) rotate(var(--r));
  will-change:transform;
}
.xh-obj svg{ display:block; width:100%; aspect-ratio:1; overflow:visible; }
.xh-obj{ display:flex; flex-direction:column-reverse; }
.xh-obj span{ display:block; margin-bottom:8px; text-align:center; font-size:10px; letter-spacing:.26em; text-transform:uppercase; font-weight:600; }
.xh-o1{ right:2.2vw; top:24%; --r:6deg; }
.xh-o2{ right:24vw; top:12%; --r:-5deg; width:clamp(70px,8vw,130px); }
.xh-o3{ left:5vw; top:30%; --r:-12deg; width:clamp(70px,10vw,160px); }
.xh-o4{ right:2.5vw; bottom:22%; --r:10deg; width:clamp(60px,8vw,130px); }

.xh-body{ position:relative; z-index:2; padding-top:calc(var(--nav-h) + 90px); padding-bottom:clamp(28px,5vh,56px); }
.xh-title{
  margin:0; display:flex; flex-direction:column; font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(64px, min(20.5vw, 27svh), 340px); line-height:.8; letter-spacing:-.045em; color:var(--ink);
}
.xh-line{ display:block; white-space:nowrap; }
.xh-line .ch{ display:inline-block; transition:font-weight .12s linear; }
.xh-couture{
  display:block; font-family:var(--font-serif); font-style:italic; font-weight:400; text-transform:none; letter-spacing:-.02em;
  font-size:.52em; line-height:1; margin:-.06em 0 0 .06em; color:var(--accent);
}
.xh-foot{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-top:clamp(20px,4vh,44px); padding-top:20px; border-top:1px solid rgba(17,17,16,.25); }
.xh-sub{ margin:0; font-family:var(--font-serif); font-style:italic; font-size:clamp(18px,2vw,28px); }
.xh-cta{ min-width:150px; justify-content:space-between; }

/* -------------------------------- ticker ----------------------------------- */
.xt{ background:var(--ink); color:var(--paper); overflow:hidden; padding:20px 0; border-top:1px solid var(--ink); }
.xt-track{ display:flex; width:max-content; animation: xtScroll 34s linear infinite; }
.xt-track span{ font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:clamp(22px,3.4vw,46px); letter-spacing:-.01em; white-space:pre; padding-right:.3em; }
.xt-track i{ font-style:normal; color:var(--accent); margin:0 .35em; }
@keyframes xtScroll{ to{ transform:translateX(-50%); } }

/* ------------------------------- manifesto --------------------------------- */
.xm{ background:var(--ink); color:var(--paper); padding:clamp(110px,22vh,240px) 0; position:relative; }
.xm-text{ margin:0; font-family:var(--font-display); font-weight:700; letter-spacing:-.025em; line-height:1.02; font-size:clamp(30px,5.4vw,88px); max-width:1200px; text-wrap:balance; }
.xm-text .w{ opacity:var(--o,.16); transition:opacity .25s linear; display:inline; }
.xm-text .w.hl{ font-family:var(--font-serif); font-style:italic; font-weight:400; color:var(--accent); }
.xm-cite{ margin:44px 0 0; font-size:11px; letter-spacing:.26em; text-transform:uppercase; opacity:.55; }

/* ------------------------- discover (pinned gallery) ----------------------- */
.xg{ background:var(--paper); position:relative; }
.xg-pin{ padding:clamp(64px,10vh,110px) 0 40px; }
.xg-head{ margin-bottom:clamp(20px,4vh,40px); }
.xg-title{ margin:0; font-family:var(--font-display); font-weight:800; text-transform:uppercase; letter-spacing:-.03em; line-height:.92; font-size:clamp(34px,6vw,96px); }
.xg-title .accent-serif{ text-transform:none; color:var(--accent); }
.xg-viewport{ overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding:0 var(--gutter); }
.xg-viewport::-webkit-scrollbar{ display:none; }
.xg-track{ display:flex; gap:clamp(14px,2vw,30px); width:max-content; }
.xg-card{ flex:0 0 auto; width:clamp(240px,74vw,440px); aspect-ratio:3/4; scroll-snap-align:start; position:relative; }
.xg-card .plate{ position:absolute; inset:0; }
.xg-meta{ display:none; }
/* desktop, motion allowed: pin and scrub */
.xg-on .xg-pin{ position:sticky; top:0; height:100svh; padding:calc(var(--nav-h) + 12px) 0 60px; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; }
.xg-on .xg-viewport{ overflow:visible; scroll-snap-type:none; flex:1; display:flex; align-items:center; min-height:0; }
.xg-on .xg-track{ will-change:transform; }
.xg-on .xg-card{ height:min(54svh,600px); width:auto; }
.xg-on .xg-meta{ display:flex; align-items:center; gap:20px; font-size:10.5px; letter-spacing:.26em; text-transform:uppercase; font-weight:600; }
.xg-count{ font-variant-numeric:tabular-nums; min-width:5em; }
.xg-bar{ flex:1; height:1px; background:rgba(17,17,16,.2); position:relative; }
.xg-bar i{ position:absolute; left:0; top:-1px; height:3px; width:100%; background:var(--ink); transform-origin:left; transform:scaleX(0); }

/* --------------------------------- facts ----------------------------------- */
.xn{ background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:clamp(48px,9vh,96px) 0; }
.xn-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,3vw,48px); }
.xn-grid > div{ border-left:1px solid var(--ink); padding-left:18px; }
.xn-num{ margin:0; font-family:var(--font-display); font-weight:800; letter-spacing:-.04em; line-height:.9; font-size:clamp(44px,8vw,128px); font-variant-numeric:tabular-nums; }
.xn-lbl{ margin:14px 0 0; font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--mute); font-weight:600; }
@media (max-width:760px){ .xn-grid{ grid-template-columns:1fr 1fr; row-gap:36px; } }

/* ------------------------------- blueprint --------------------------------- */
.xb{ background:var(--ink); color:var(--paper); padding:clamp(80px,14vh,160px) 0; position:relative; }
.xb-head{ margin-bottom:clamp(28px,5vh,56px); }
.xb-head .display-2{ color:var(--paper); margin:0; }
.xb-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,5vw,80px); align-items:center; }
.xb-stage{
  position:relative; aspect-ratio:1/1; width:100%; max-width:660px;
  background-image:linear-gradient(rgba(242,239,233,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(242,239,233,.07) 1px,transparent 1px);
  background-size:10% 10%; border:1px solid rgba(242,239,233,.28);
}
.xb-stage::before, .xb-stage::after{ content:""; position:absolute; width:16px; height:16px; border:1px solid var(--paper); }
.xb-stage::before{ top:-1px; left:-1px; border-right:0; border-bottom:0; }
.xb-stage::after{ bottom:-1px; right:-1px; border-left:0; border-top:0; }
.xb-art{ position:absolute; inset:9%; width:82%; height:82%; color:var(--paper); overflow:visible; transition:opacity .25s ease, transform .5s cubic-bezier(.2,.8,.2,1); }
.xb-art.swap{ opacity:0; transform:scale(.96); }
.xb-cap{ position:absolute; left:14px; bottom:12px; margin:0; font-size:10px; letter-spacing:.26em; text-transform:uppercase; opacity:.5; }
.xb-dot{
  position:absolute; width:32px; height:32px; margin:-16px 0 0 -16px; border-radius:50%; border:1px solid var(--paper); background:var(--ink); color:var(--paper);
  font:600 11px/1 var(--font-sans); letter-spacing:.04em; cursor:pointer; display:grid; place-items:center; padding:0;
  transition:background .2s, color .2s, transform .2s;
}
.xb-dot::after{ content:""; position:absolute; inset:-7px; border:1px solid rgba(242,239,233,.45); border-radius:50%; animation:dotPulse 2.4s ease-out infinite; }
.xb-dot:hover{ transform:scale(1.12); }
.xb-dot.on{ background:var(--accent); border-color:var(--accent); }
.xb-dot:focus-visible{ outline:2px solid var(--paper); outline-offset:6px; }
@keyframes dotPulse{ 0%{ transform:scale(.7); opacity:.9; } 100%{ transform:scale(1.5); opacity:0; } }
.xb-side .chips{ margin:0 0 30px; }
.xb-list{ list-style:none; margin:0; padding:0; counter-reset:xb; }
.xb-list li{
  display:grid; grid-template-columns:44px 1fr; gap:6px 12px; padding:22px 0; border-top:1px solid rgba(242,239,233,.2); cursor:pointer; opacity:.4; transition:opacity .25s;
}
.xb-list li:last-child{ border-bottom:1px solid rgba(242,239,233,.2); }
.xb-list li.on, .xb-list li:hover{ opacity:1; }
.xb-list b{ font-family:var(--font-serif); font-style:italic; font-weight:400; font-size:22px; color:var(--accent); grid-row:span 2; }
.xb-list h3{ margin:0; font-size:12px; letter-spacing:.24em; text-transform:uppercase; }
.xb-list p{ margin:0; font-family:var(--font-serif); font-size:clamp(20px,2.2vw,28px); line-height:1.2; }
@media (max-width:900px){ .xb-grid{ grid-template-columns:1fr; } }

/* ---------------------------------- lab ------------------------------------ */
.xl{ background:var(--accent); color:var(--paper); padding:clamp(80px,14vh,160px) 0; overflow:hidden; }
.xl-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(24px,5vw,80px); align-items:center; }
.xl-title{ margin:0 0 40px; font-family:var(--font-display); font-weight:800; text-transform:uppercase; letter-spacing:-.035em; line-height:.9; font-size:clamp(48px,10vw,168px); }
.xl-title .accent-serif{ text-transform:none; }
.xl-cta{ border-color:var(--paper); color:var(--paper); }
.xl-cta:hover{ background:var(--paper); color:var(--accent); }
.xl-stage{ position:relative; aspect-ratio:4/5; width:min(100%,440px); margin-left:auto; transform:rotate(3deg); box-shadow:0 50px 80px -40px rgba(0,0,0,.55); }
.xl-stage .plate{ position:absolute; inset:0; }
@media (max-width:900px){ .xl-grid{ grid-template-columns:1fr; } .xl-stage{ margin:0 auto; } }

/* ------------------------------ chapter HUD -------------------------------- */
.hud{
  position:fixed; left:calc(var(--gutter) * .5 + 4px); right:calc(var(--gutter) * .5 + 4px); bottom:16px; z-index:500; pointer-events:none;
  display:flex; justify-content:space-between; font-size:10px; letter-spacing:.26em; text-transform:uppercase; font-weight:600;
  color:#fff; mix-blend-mode:difference; font-variant-numeric:tabular-nums;
}
.menu-open .hud, .pal-open .hud{ opacity:0; }
@media (max-width:760px){ .hud{ display:none; } }

/* ----------------------------- secrets & toast ----------------------------- */
html.neg{ filter:invert(1) hue-rotate(180deg); }
html.neg video, html.neg img{ filter:invert(1) hue-rotate(180deg); }
.xtoast{ position:fixed; left:50%; bottom:64px; transform:translate(-50%,20px); z-index:1300; background:var(--paper); color:var(--ink); padding:14px 22px; font-size:12px; letter-spacing:.2em; text-transform:uppercase; font-weight:700; opacity:0; pointer-events:none; transition:opacity .3s, transform .3s; box-shadow:0 20px 50px -20px rgba(0,0,0,.6); }
.xtoast.show{ opacity:1; transform:translate(-50%,0); }

/* ------------------------------- responsive -------------------------------- */
@media (max-width:760px){
  .xh-bl, .xh-tl{ display:none; }
  .xh-o1{ right:4vw; top:22%; } .xh-o2{ right:38vw; top:14%; } .xh-o3{ left:3vw; top:26%; } .xh-o4{ right:5vw; bottom:34%; }
  .xh-body{ padding-top:calc(var(--nav-h) + 40px); }
  .xh-foot{ flex-direction:column; align-items:flex-start; }
}
@media (prefers-reduced-motion: reduce){
  .xt-track{ animation:none; }
  .xm-text .w{ opacity:1 !important; transition:none; }
  .xb-dot::after{ animation:none; }
  .xh-obj{ transform:rotate(var(--r)); }
  .in-count{ display:none; }
}
.xg-head, .xg-meta{ width:100%; }

/* ============================ subpage hero variant ============================ */
.xh-page{ min-height:78svh; }
.xh-page .xh-title{ font-size:clamp(52px, min(15.5vw, 25svh), 260px); }
.xh-page .xh-body{ padding-top:calc(var(--nav-h) + 70px); }
.xh-page .xh-obj{ width:clamp(80px,11vw,190px); }
.xh-page .xh-o1{ right:6vw; top:26%; }
.xh-page .xh-o3{ left:4vw; top:34%; }
@media (max-width:760px){ .xh-page{ min-height:64svh; } .xh-page .xh-o1{ top:24%; right:4vw; } .xh-page .xh-o3{ display:none; } }
.xh-obj svg{ filter:drop-shadow(0 14px 12px rgba(0,0,0,.18)); }

/* ---------------------------------- looks ---------------------------------- */
.xl2{ background:var(--paper); padding:clamp(60px,10vh,120px) 0; }
.xk-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(10px,1.6vw,24px); }
.xk-look{ position:relative; aspect-ratio:3/4; background:var(--bg); color:var(--gc); overflow:hidden; isolation:isolate; display:flex; flex-direction:column; justify-content:flex-end; padding:clamp(14px,1.6vw,22px); }
.xk-look svg{ position:absolute; left:9%; top:14%; width:82%; height:62%; transition:transform .7s cubic-bezier(.2,.8,.2,1); filter:drop-shadow(0 22px 18px rgba(0,0,0,.3)); }
.xk-look:hover svg{ transform:translateY(-10px) scale(1.05) rotate(-1.5deg); }
.xk-ref, .xk-pill{ position:absolute; top:16px; font-size:10px; letter-spacing:.22em; text-transform:uppercase; font-weight:600; color:var(--tc); z-index:2; }
.xk-ref{ left:18px; opacity:.7; }
.xk-pill{ right:16px; border:1px solid currentColor; padding:4px 8px; border-radius:99px; font-size:9px; }
.xk-name{ margin:0; position:relative; z-index:2; font-family:var(--font-display); font-weight:800; font-size:clamp(22px,2.4vw,36px); letter-spacing:-.02em; color:var(--tc); }
.xk-cw{ margin:8px 0 0; position:relative; z-index:2; display:flex; align-items:center; gap:8px; font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--tc); opacity:.75; }
.xk-cw i{ width:12px; height:12px; border-radius:50%; border:1px solid var(--tc); display:inline-block; }
@media (max-width:980px){ .xk-grid{ grid-template-columns:1fr 1fr; } }

/* -------------------------------- swatches --------------------------------- */
.xs{ margin-top:clamp(56px,9vh,110px); }
.xs .xk{ margin-bottom:18px; }
.xs-grid{ display:grid; grid-template-columns:repeat(5,1fr); }
.xs-tile{ margin:0; position:relative; aspect-ratio:1; overflow:hidden; }
.xs-tile svg{ width:100%; height:100%; display:block; transition:transform .9s cubic-bezier(.2,.8,.2,1); }
.xs-tile:hover svg{ transform:scale(1.14) rotate(1deg); }
.xs-tile figcaption{ position:absolute; left:12px; right:12px; bottom:10px; display:flex; flex-direction:column; color:#fff; mix-blend-mode:difference; }
.xs-tile b{ font-family:var(--font-display); font-weight:800; font-size:clamp(13px,1.4vw,20px); letter-spacing:-.01em; }
.xs-tile span{ font-size:9.5px; letter-spacing:.24em; text-transform:uppercase; }
@media (max-width:760px){ .xs-grid{ grid-template-columns:repeat(3,1fr); } }

/* ------------------------------- colorways --------------------------------- */
.xc{ background:var(--paper-2); color:var(--ink); padding:clamp(80px,14vh,160px) 0; --i:0; }
.xc-h{ margin:0; }
.xc-h .accent-serif{ color:var(--accent); }
.xc-stage{ position:relative; background:var(--bg); color:var(--tc); transition:background .7s ease, color .7s ease; padding:clamp(28px,5vw,72px) clamp(12px,3vw,48px) 0; margin:clamp(24px,4vh,48px) 0 22px; overflow:hidden; }
.xc-line{ display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(4px,1.4vw,24px); align-items:end; }
.xc-item{ position:relative; color:var(--gc); text-align:center; transition:color .7s ease, transform .5s cubic-bezier(.2,.8,.2,1); animation:xcFloat 6s ease-in-out infinite; }
.xc-item:nth-child(2){ animation-delay:-1.2s; } .xc-item:nth-child(3){ animation-delay:-2.4s; } .xc-item:nth-child(4){ animation-delay:-3.6s; } .xc-item:nth-child(5){ animation-delay:-4.8s; }
.xc-item svg{ width:100%; aspect-ratio:1; display:block; filter:drop-shadow(0 26px 20px rgba(0,0,0,.28)); }
.xc-form{ color:#cfc9bc; }
.xc-item span{ display:block; font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--tc); opacity:0; transition:opacity .3s; padding:6px 0 4px; }
.xc-item:hover{ animation-play-state:paused; transform:translateY(-14px); }
.xc-item:hover span{ opacity:.85; }
@keyframes xcFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }
.xc-name{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin:0; padding:20px 0 24px; border-top:1px solid currentColor; }
.xc-name span{ font-size:11px; letter-spacing:.26em; text-transform:uppercase; opacity:.7; }
.xc-name b{ font-family:var(--font-serif); font-style:italic; font-weight:400; font-size:clamp(28px,4vw,56px); }
.xc-chips{ margin-bottom:0; }
.xc-chips .chip span{ color:var(--ink); border-color:rgba(17,17,16,.35); }
.xc-chips .chip:hover span{ border-color:var(--ink); }
.xc-chips .chip input:checked + span{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

/* ----------------------------------- vote ---------------------------------- */
.xv{ background:var(--ink); color:var(--paper); padding:clamp(80px,14vh,160px) 0; position:relative; }
.xv-title{ margin:0; font-family:var(--font-display); font-weight:800; text-transform:uppercase; letter-spacing:-.035em; line-height:.9; font-size:clamp(44px,8.6vw,140px); }
.xv-title .accent-serif{ text-transform:none; color:var(--accent); }
.xv-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(10px,1.4vw,20px); margin:clamp(28px,5vh,56px) 0 28px; }
.xv-card{ position:relative; aspect-ratio:3/4; background:#242321; border:1px solid rgba(242,239,233,.2); color:var(--paper); cursor:pointer; display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start; padding:clamp(14px,1.6vw,22px); overflow:hidden; font:inherit; transition:background .35s, color .35s, border-color .35s, transform .35s; }
.xv-card svg{ position:absolute; left:10%; top:10%; width:80%; height:62%; color:#e6e0d2; transition:transform .6s cubic-bezier(.2,.8,.2,1), color .35s; filter:drop-shadow(0 20px 16px rgba(0,0,0,.45)); }
.xv-card:hover{ border-color:var(--paper); transform:translateY(-4px); }
.xv-card:hover svg{ transform:translateY(-8px) scale(1.05); }
.xv-card[aria-pressed="true"]{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.xv-card[aria-pressed="true"] svg{ color:#171716; filter:drop-shadow(0 20px 16px rgba(0,0,0,.25)); }
.xv-name{ font-family:var(--font-display); font-weight:800; font-size:clamp(16px,1.9vw,28px); letter-spacing:-.01em; position:relative; z-index:1; }
.xv-tick{ position:absolute; top:14px; right:16px; font-size:11px; opacity:.5; }
.xv-card[aria-pressed="true"] .xv-tick{ opacity:1; color:var(--accent); }
.xv-card:focus-visible{ outline:2px solid var(--paper); outline-offset:4px; }
.xv.voted .xv-card{ pointer-events:none; opacity:.4; }
.xv.voted .xv-card[aria-pressed="true"]{ opacity:1; }
.xv.voted .xv-card[aria-pressed="true"]::after{
  content:"VOTED"; position:absolute; right:14px; bottom:60px; font-family:var(--font-display); font-weight:800; font-size:clamp(20px,2.6vw,38px); letter-spacing:.06em;
  color:var(--accent); border:3px solid var(--accent); padding:4px 12px; transform:rotate(-12deg); animation:stamp .5s cubic-bezier(.2,1.4,.3,1);
}
@keyframes stamp{ 0%{ transform:rotate(-12deg) scale(2.2); opacity:0; } 100%{ transform:rotate(-12deg) scale(1); opacity:1; } }
.xv-bar{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.xv-go{ border-color:var(--paper); color:var(--paper); }
.xv-go:hover:not(:disabled){ background:var(--paper); color:var(--ink); }
.xv-go:disabled{ opacity:.35; cursor:not-allowed; }
.xv-msg{ margin:0; font-family:var(--font-serif); font-style:italic; font-size:clamp(18px,2vw,26px); }
.xv-note{ margin:28px 0 0; font-size:11px; letter-spacing:.14em; text-transform:uppercase; opacity:.5; max-width:640px; line-height:1.7; }
.xv-note a{ text-decoration:underline; text-underline-offset:3px; }
@media (max-width:760px){ .xv-grid{ grid-template-columns:1fr 1fr; } }

/* -------------------------------- about ------------------------------------ */
.xa{ background:var(--paper); padding:clamp(70px,12vh,140px) 0; }
.xa-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(24px,6vw,96px); align-items:center; }
.xa-photo{ position:relative; margin:0 0 40px; aspect-ratio:3/4; }
.xa-photo img{ width:100%; height:100%; object-fit:cover; object-position:center 70%; display:block; filter:grayscale(1) brightness(1) contrast(1.02); transition:filter .7s; }
.xa-photo:hover img{ filter:none; }
.xa-tape{ position:absolute; width:96px; height:26px; background:rgba(242,239,233,.78); box-shadow:0 1px 4px rgba(0,0,0,.25); z-index:2; }
.xa-tape.t1{ top:-11px; left:14%; transform:rotate(-6deg); } .xa-tape.t2{ bottom:-9px; right:12%; transform:rotate(5deg); }
.xa-photo figcaption, .xp figcaption{ margin-top:14px; display:flex; justify-content:space-between; gap:12px; font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--mute); }
.xa-photo figcaption{ position:absolute; left:0; right:0; top:100%; }
.xa-photo figcaption b, .xp figcaption b{ color:var(--ink); }
.xa-text .display-2{ margin:0 0 28px; }
.xa-text .body-lg{ max-width:520px; }
.xa-text .body{ max-width:520px; margin:14px 0 26px; }
@media (max-width:900px){ .xa-grid{ grid-template-columns:1fr; } }
.xr-sec{ background:var(--paper-2); padding:clamp(70px,12vh,140px) 0; border-top:1px solid var(--line); }
.xr-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,2vw,28px); }
.xr{ position:relative; background:var(--paper); border:1px solid var(--line); padding:clamp(20px,2.4vw,32px); display:flex; flex-direction:column; overflow:hidden; }
.xr-n{ font-family:var(--font-display); font-weight:800; font-size:clamp(40px,5vw,72px); letter-spacing:-.04em; line-height:1; color:var(--ink); }
.xr svg{ width:64%; aspect-ratio:1; align-self:center; margin:14px 0; filter:drop-shadow(0 18px 14px rgba(0,0,0,.22)); transition:transform .7s cubic-bezier(.2,.8,.2,1); }
.xr:hover svg{ transform:translateY(-10px) rotate(-2deg) scale(1.04); }
.xr h3{ margin:0 0 8px; font-size:12px; letter-spacing:.22em; text-transform:uppercase; }
.xr p{ margin:0; font-family:var(--font-serif); font-size:clamp(20px,2vw,26px); line-height:1.2; }
@media (max-width:900px){ .xr-grid{ grid-template-columns:1fr; } }

/* ------------------------------ founder photos ----------------------------- */
.xp{ background:var(--paper); padding:clamp(80px,14vh,160px) 0; }
.xp-grid{ display:grid; grid-template-columns:1.1fr .8fr 1fr; gap:clamp(16px,3vw,48px); align-items:center; }
.xp figure{ margin:0; }
.xp img{ width:100%; aspect-ratio:3/4; object-fit:cover; display:block; filter:grayscale(1) brightness(1) contrast(1.02); transition:filter .7s ease, transform .9s cubic-bezier(.2,.8,.2,1); }
.xp figure:hover img{ filter:none; }
.xp-b{ margin-top:clamp(60px,14vh,180px) !important; }
.xp-title{ margin:0 0 20px; font-family:var(--font-display); font-weight:800; text-transform:uppercase; letter-spacing:-.035em; line-height:.9; font-size:clamp(40px,6.2vw,104px); }
.xp-line{ margin:0 0 26px; font-family:var(--font-serif); font-style:italic; font-size:clamp(20px,2.2vw,32px); line-height:1.2; }
.xp-duo .xp-grid{ grid-template-columns:1fr 1fr; max-width:980px; margin:0 auto; }
@media (max-width:900px){ .xp-grid, .xp-duo .xp-grid{ grid-template-columns:1fr; } .xp-b{ margin-top:0 !important; } .xp img{ max-height:80svh; } }
@media (hover:none){ .xp img, .xa-photo img{ filter:none; } }
@media (prefers-reduced-motion: reduce){ .xc-item{ animation:none; } .xv.voted .xv-card[aria-pressed="true"]::after{ animation:none; } }
.xp img{ height:auto; }

.xp-grid.xp-two{ grid-template-columns:1fr 1fr; max-width:1000px; margin:0 auto; }
.xp-two .xp-b{ margin-top:0 !important; }
@media (max-width:900px){ .xp-grid.xp-two{ grid-template-columns:1fr; } }

/* ============================================================================
   Round 2 — motion, tape, conveyor, mission, fitting room
   ============================================================================ */

/* ---- headline split reveal ---- */
.sw{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.16em; margin-bottom:-.16em; }
.si{ display:inline-block; transform:translateY(112%); transition:transform .95s cubic-bezier(.2,.9,.2,1); transition-delay:var(--d,0s); }
.split-in .si{ transform:none; }

/* ---- hero entrance ---- */
.xh-line{ overflow:hidden; padding:.05em 0 .03em; margin:-.05em 0 -.03em; }
.xh-pre .xh-line .ch{ transform:translateY(112%); }
.xh-line .ch{ transition:font-weight .12s linear, transform 1s cubic-bezier(.2,.9,.2,1); transition-delay:0s, calc(var(--i,0) * 42ms); }
.xh-pre .xh-couture{ opacity:0; transform:translateY(24px); }
.xh-couture{ transition:opacity 1s ease .55s, transform 1s cubic-bezier(.2,.9,.2,1) .55s; }
.xh-pre .xh-hud, .xh-pre .xh-obj, .xh-pre .xh-foot, .xh-pre .xh-frame{ opacity:0; }
.xh-hud, .xh-foot, .xh-frame{ transition:opacity 1s ease .8s; }
.xh-obj{ transition:opacity 1s ease .9s; }

/* ---- tape bands (Off-White) ---- */
.tape{ position:relative; z-index:4; overflow:hidden; background:var(--ink); color:var(--paper); padding:11px 0; transform:rotate(-1.6deg) scale(1.04); margin:clamp(-20px,-2vw,-10px) 0; box-shadow:0 10px 30px -14px rgba(0,0,0,.5); border-top:2px solid var(--paper); border-bottom:2px solid var(--paper); }
.tape::before{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(-45deg, transparent 0 14px, rgba(242,239,233,.07) 14px 28px); pointer-events:none; }
.tape-track{ display:flex; width:max-content; animation:tapeGo 26s linear infinite reverse; }
.tape-track span{ white-space:pre; font-size:12px; letter-spacing:.34em; text-transform:uppercase; font-weight:700; padding-right:1.2em; }
.tape i{ font-style:normal; color:var(--accent); margin:0 .6em; }
.tape-rust{ background:var(--accent); color:var(--paper); transform:rotate(1.4deg) scale(1.04); border-color:var(--ink); }
.tape-rust i{ color:var(--ink); }
@keyframes tapeGo{ to{ transform:translateX(-50%); } }

/* ---- garment conveyor ---- */
.xq{ background:var(--paper); overflow:hidden; padding:clamp(40px,8vh,90px) 0; }
.xq-row{ overflow:hidden; }
.xq-row + .xq-row{ margin-top:clamp(10px,2vh,24px); }
.xq-track{ display:flex; width:max-content; gap:clamp(20px,3vw,48px); will-change:transform; }
.xq-it{ width:clamp(120px,14vw,200px); text-align:center; flex:0 0 auto; }
.xq-it svg{ width:100%; aspect-ratio:1; display:block; filter:drop-shadow(0 16px 12px rgba(0,0,0,.22)); }
.xq-it span{ display:block; font-size:10px; letter-spacing:.26em; text-transform:uppercase; font-weight:600; margin-top:4px; color:var(--mute); }

/* ---- mission teaser (home) ---- */
.xz{ background:var(--ink); color:var(--paper); padding:clamp(90px,16vh,190px) 0; }
.xz-title{ margin:0 0 clamp(30px,6vh,64px); font-family:var(--font-display); font-weight:800; text-transform:uppercase; letter-spacing:-.035em; line-height:.9; font-size:clamp(44px,9vw,150px); }
.xz-title .accent-serif{ text-transform:none; color:var(--accent); }
.xz-list{ list-style:none; margin:0 0 clamp(28px,5vh,56px); padding:0; border-top:1px solid rgba(242,239,233,.25); }
.xz-list li{ display:grid; grid-template-columns:70px minmax(0,1.1fr) minmax(0,1.4fr); gap:14px 24px; align-items:baseline; padding:24px 0; border-bottom:1px solid rgba(242,239,233,.25); transition:padding .4s cubic-bezier(.2,.8,.2,1), background .4s; }
.xz-list li:hover{ padding-left:18px; background:rgba(242,239,233,.05); }
.xz-list b{ font-family:var(--font-serif); font-style:italic; font-weight:400; font-size:28px; color:var(--accent); }
.xz-list span{ font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:clamp(20px,3vw,44px); letter-spacing:-.02em; }
.xz-list em{ font-style:normal; font-family:var(--font-serif); font-size:clamp(17px,1.8vw,24px); opacity:.75; }
.xz-cta{ border-color:var(--paper); color:var(--paper); }
.xz-cta:hover{ background:var(--paper); color:var(--ink); }
@media (max-width:760px){ .xz-list li{ grid-template-columns:44px 1fr; } .xz-list em{ grid-column:2; } }

/* ---- play teaser (home) ---- */
.xy{ background:var(--paper-2); padding:clamp(80px,14vh,160px) 0; overflow:hidden; }
.xy-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(24px,5vw,80px); align-items:center; }
.xy-title{ margin:0 0 40px; font-family:var(--font-display); font-weight:800; text-transform:uppercase; letter-spacing:-.035em; line-height:.9; font-size:clamp(48px,9vw,150px); }
.xy-title .accent-serif{ text-transform:none; color:var(--accent); }
.xy-stage{ position:relative; width:min(100%,420px); aspect-ratio:3/4; margin-left:auto; background:var(--paper); border:1px solid var(--line); overflow:hidden; }
.xy-fig{ position:absolute; inset:6% 12% 16%; animation:xySway 5s ease-in-out infinite; transform-origin:50% 100%; }
.xy-fig svg{ position:absolute; left:0; width:100%; aspect-ratio:1; }
.xy-form{ top:0; } .xy-top{ top:6%; width:92%; left:4%; transition:color .5s; } .xy-bot{ top:42%; width:84%; left:8%; transition:color .5s; }
.xy-fig svg{ filter:drop-shadow(0 14px 10px rgba(0,0,0,.2)); }
.xy-score{ position:absolute; left:16px; right:16px; bottom:14px; display:flex; justify-content:space-between; align-items:baseline; margin:0; font-size:10px; letter-spacing:.26em; text-transform:uppercase; font-weight:600; }
.xy-score b{ font-family:var(--font-display); font-weight:800; font-size:clamp(34px,5vw,64px); letter-spacing:-.03em; }
@keyframes xySway{ 0%,100%{ transform:rotate(-1.4deg); } 50%{ transform:rotate(1.4deg); } }
@media (max-width:900px){ .xy-grid{ grid-template-columns:1fr; } .xy-stage{ margin:0 auto; } }

/* ---- mission page ---- */
.xo{ background:var(--paper); padding:clamp(80px,14vh,160px) 0; }
.xo-h{ margin:0 0 20px; } .xo-h .accent-serif{ color:var(--accent); }
.xo-lead{ max-width:640px; font-size:clamp(16px,1.6vw,20px); line-height:1.6; color:var(--mute); margin:0 0 clamp(28px,5vh,52px); }
.xo-grid{ display:grid; gap:24px; }
.xo-stage{ position:relative; background:var(--ink); color:var(--paper); padding:clamp(24px,4vw,56px) clamp(16px,3vw,48px) 0; overflow:hidden; }
.xo-line{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(8px,2vw,32px); align-items:end; max-width:840px; margin:0 auto; }
.xo-item svg{ width:100%; aspect-ratio:1; display:block; filter:drop-shadow(0 24px 18px rgba(0,0,0,.5)); }
.xo-item{ animation:xcFloat 6s ease-in-out infinite; } .xo-item:nth-child(2){ animation-delay:-2s; } .xo-item:nth-child(3){ animation-delay:-4s; }
.xo-swap .xo-item{ animation:xoSwap .55s cubic-bezier(.2,.9,.2,1); }
.xo-swap .xo-item:nth-child(2){ animation-delay:.07s; } .xo-swap .xo-item:nth-child(3){ animation-delay:.14s; }
@keyframes xoSwap{ 0%{ transform:translateY(40px) scale(.9); opacity:0; } 100%{ transform:none; opacity:1; } }
.xo-cap{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin:0; padding:20px 0 24px; border-top:1px solid rgba(242,239,233,.3); }
.xo-cap b{ font-family:var(--font-display); font-weight:800; font-size:clamp(28px,5vw,72px); letter-spacing:-.03em; }
.xo-cap span{ font-family:var(--font-serif); font-style:italic; font-size:clamp(18px,2.2vw,30px); text-align:right; }
.xo-chips .chip span{ color:var(--ink); border-color:rgba(17,17,16,.35); }
.xo-chips .chip input:checked + span{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

.xs3{ background:var(--paper-2); padding:clamp(80px,14vh,160px) 0; border-top:1px solid var(--line); }
.xs3 .display-2{ margin:0 0 20px; } .xs3 .accent-serif{ color:var(--accent); }
.xpl{ margin-top:clamp(56px,10vh,120px); border-top:2px solid var(--ink); padding-top:24px; }
.xpl-head{ display:grid; grid-template-columns:auto 1fr; gap:4px 20px; align-items:baseline; margin-bottom:clamp(24px,4vh,44px); }
.xpl-n{ grid-row:span 2; font-family:var(--font-display); font-weight:800; font-size:clamp(56px,9vw,140px); letter-spacing:-.05em; line-height:.8; }
.xpl-head h3{ margin:0; font-family:var(--font-display); font-weight:800; text-transform:uppercase; letter-spacing:-.03em; font-size:clamp(28px,4.6vw,68px); line-height:1; }
.xpl-head p{ margin:0; font-family:var(--font-serif); font-style:italic; font-size:clamp(18px,2vw,28px); color:var(--mute); }
.xpl-body{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(20px,4vw,64px); align-items:start; }
.xgates{ list-style:none; margin:0; padding:0; counter-reset:g; }
.xgates li{ counter-increment:g; position:relative; padding:20px 0 20px 64px; border-top:1px solid var(--line); }
.xgates li:last-child{ border-bottom:1px solid var(--line); }
.xgates li::before{ content:counter(g,decimal-leading-zero); position:absolute; left:0; top:20px; font-family:var(--font-serif); font-style:italic; font-size:26px; color:var(--accent); }
.xgates b{ display:block; font-size:13px; letter-spacing:.2em; text-transform:uppercase; margin-bottom:6px; }
.xgates span{ font-size:15px; line-height:1.55; color:var(--mute); }
.js-anim .xgates li{ opacity:0; transform:translateX(-24px); transition:opacity .6s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.js-anim .xpl.in .xgates li{ opacity:1; transform:none; }
.xgates li:nth-child(2){ transition-delay:.15s !important; } .xgates li:nth-child(3){ transition-delay:.3s !important; } .xgates li:nth-child(4){ transition-delay:.45s !important; }

.xqc{ position:relative; background:var(--paper); border:1px solid var(--ink); padding:22px 22px 26px; box-shadow:10px 10px 0 var(--ink); transform:rotate(1.2deg); }
.xqc-h{ display:flex; justify-content:space-between; align-items:baseline; margin:0 0 14px; font-size:11px; letter-spacing:.24em; text-transform:uppercase; font-weight:700; }
.xqc-h em{ font-style:normal; opacity:.5; font-size:9px; }
.xqc dl{ margin:0; } .xqc dl > div{ display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-top:1px dashed var(--line); font-size:13px; }
.xqc dt{ letter-spacing:.14em; text-transform:uppercase; font-size:11px; color:var(--mute); } .xqc dd{ margin:0; font-weight:700; }
.xqc-stamp{ position:absolute; right:14px; bottom:14px; font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:30px; letter-spacing:.06em; color:var(--accent); border:3px solid var(--accent); padding:2px 12px; transform:rotate(-12deg) scale(1); opacity:.9; }
.js-anim .xqc-stamp{ opacity:0; transform:rotate(-12deg) scale(2.4); }
.js-anim .xpl.in .xqc-stamp{ opacity:.9; transform:rotate(-12deg) scale(1); transition:opacity .3s ease 1s, transform .5s cubic-bezier(.2,1.4,.3,1) 1s; }

.xcode{ background:var(--ink); color:var(--paper); padding:clamp(22px,3vw,40px); }
.xcode-h{ margin:0 0 18px; font-size:11px; letter-spacing:.26em; text-transform:uppercase; opacity:.7; }
.xcode ul{ list-style:none; margin:0; padding:0; }
.xcode li{ position:relative; padding:14px 0 14px 40px; border-top:1px solid rgba(242,239,233,.2); font-family:var(--font-serif); font-size:clamp(19px,2vw,26px); }
.xcode li::before{ content:""; position:absolute; left:0; top:50%; width:22px; height:22px; margin-top:-11px; border:1.5px solid var(--paper); }
.xcode li::after{ content:""; position:absolute; left:6px; top:50%; width:10px; height:5px; margin-top:-6px; border-left:2.5px solid var(--accent); border-bottom:2.5px solid var(--accent); transform:rotate(-45deg) scale(0); transition:transform .35s cubic-bezier(.2,1.6,.3,1); }
.xpl.in .xcode li::after{ transform:rotate(-45deg) scale(1); }
.xcode li:nth-child(1)::after{ transition-delay:.3s; } .xcode li:nth-child(2)::after{ transition-delay:.5s; } .xcode li:nth-child(3)::after{ transition-delay:.7s; } .xcode li:nth-child(4)::after{ transition-delay:.9s; } .xcode li:nth-child(5)::after{ transition-delay:1.1s; } .xcode li:nth-child(6)::after{ transition-delay:1.3s; }
.xcode-f{ margin:18px 0 0; font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--accent); font-weight:700; }
.xnote{ display:flex; flex-direction:column; gap:8px; padding:24px; border:1px solid var(--ink); }
.xnote b{ font-size:12px; letter-spacing:.22em; text-transform:uppercase; } .xnote span{ font-family:var(--font-serif); font-size:clamp(18px,1.9vw,24px); line-height:1.3; }

.xpass-body{ grid-template-columns:1.25fr .75fr; }
.xchain{ display:grid; grid-template-columns:repeat(6,1fr); gap:6px; position:relative; z-index:1; }
.xchain-node{ background:var(--paper); border:1px solid var(--ink); padding:12px 8px 10px; cursor:pointer; text-align:left; display:flex; flex-direction:column; gap:6px; font:inherit; color:var(--ink); transition:background .3s, color .3s, transform .3s; }
.xchain-node b{ font-family:var(--font-serif); font-style:italic; font-weight:400; font-size:18px; color:var(--accent); }
.xchain-node span{ font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; }
.xchain-node:hover{ transform:translateY(-4px); }
.xchain-node[aria-pressed="true"]{ background:var(--ink); color:var(--paper); }
.xchain-node:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.xchain-line{ height:3px; background:rgba(17,17,16,.15); margin:14px 0 24px; position:relative; overflow:hidden; }
.xchain-line i{ position:absolute; inset:0; background:var(--accent); transform-origin:left; transform:scaleX(.08); transition:transform .6s cubic-bezier(.2,.8,.2,1); }
.xpass-panel{ background:var(--paper); border:1px solid var(--line); padding:clamp(18px,2.4vw,32px); }
.xpass-t{ display:flex; align-items:baseline; gap:14px; margin:0 0 8px; }
.xpass-t span{ font-family:var(--font-serif); font-style:italic; font-size:26px; color:var(--accent); }
.xpass-t b{ font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:clamp(26px,3.4vw,46px); letter-spacing:-.02em; }
.xpass-w{ margin:0 0 20px; font-family:var(--font-serif); font-size:clamp(18px,1.9vw,24px); }
.xpass-f, .xpass-d{ display:flex; flex-direction:column; gap:4px; margin:0 0 14px; padding-top:12px; border-top:1px dashed var(--line); }
.xpass-f span, .xpass-d span{ font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--mute); }
.xpass-f b, .xpass-d b{ font-size:15px; }
.xpass-d b{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-weight:500; color:var(--accent); }
.xpass-panel.swap{ animation:xoSwap .4s cubic-bezier(.2,.9,.2,1); }
.xlabel{ position:relative; background:#111110; color:var(--paper); padding:26px 22px 22px; aspect-ratio:3/4; display:flex; flex-direction:column; align-items:center; justify-content:space-between; text-align:center; transform:rotate(-2deg); box-shadow:12px 14px 0 rgba(17,17,16,.18); background-image:repeating-linear-gradient(0deg, rgba(242,239,233,.05) 0 1px, transparent 1px 3px); }
.xlabel::before{ content:""; position:absolute; top:10px; left:50%; width:14px; height:14px; margin-left:-7px; border-radius:50%; background:var(--paper-2); }
.xlabel-a{ margin:26px 0 0; font-family:var(--font-serif); font-weight:700; letter-spacing:.02em; font-size:20px; line-height:1.1; } .xlabel-a i{ font-weight:400; font-size:15px; letter-spacing:.1em; }
.xpass-qr{ width:56%; background:var(--paper); color:#111110; padding:8px; }
.xlabel-b{ margin:0; font-family:var(--font-display); font-weight:800; letter-spacing:.06em; font-size:20px; }
.xlabel-c{ margin:0; font-size:9.5px; letter-spacing:.24em; text-transform:uppercase; opacity:.65; }
.xlabel-t{ position:absolute; right:-8px; top:24px; background:var(--accent); color:#fff; font-size:9px; letter-spacing:.2em; text-transform:uppercase; padding:4px 8px; transform:rotate(8deg); }
@media (max-width:900px){ .xpl-body, .xpass-body{ grid-template-columns:1fr; } .xlabel{ max-width:300px; } .xchain{ grid-template-columns:repeat(3,1fr); } }

.xrm{ background:var(--paper); padding:clamp(90px,15vh,170px) 0 clamp(60px,10vh,110px); }
.xrm .display-2{ margin:0 0 clamp(28px,5vh,52px); } .xrm .accent-serif{ color:var(--accent); }
.xrm-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:2px solid var(--ink); }
.xrm-list li{ position:relative; padding:24px 20px 28px 0; border-right:1px solid var(--line); padding-left:20px; }
.xrm-list li:first-child{ padding-left:0; } .xrm-list li:last-child{ border-right:0; }
.xrm-list b{ display:block; font-family:var(--font-display); font-weight:800; font-size:clamp(40px,5vw,72px); letter-spacing:-.04em; line-height:1; margin-bottom:14px; opacity:.25; }
.xrm-list .is-now b{ opacity:1; color:var(--accent); }
.xrm-list h3{ margin:0 0 8px; font-size:13px; letter-spacing:.2em; text-transform:uppercase; }
.xrm-list p{ margin:0; font-family:var(--font-serif); font-size:clamp(17px,1.7vw,22px); line-height:1.3; color:var(--mute); }
.xrm-list .is-now::before{ content:"We are here"; position:absolute; top:-12px; left:0; background:var(--accent); color:#fff; font-size:9px; letter-spacing:.2em; text-transform:uppercase; padding:3px 8px; }
.xrm-list li:not(:first-child).is-now::before{ left:20px; }
.xrm-note{ margin:28px 0 0; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); max-width:720px; line-height:1.7; }
.xrm-note a{ text-decoration:underline; text-underline-offset:3px; color:var(--ink); }
@media (max-width:900px){ .xrm-list{ grid-template-columns:1fr 1fr; } .xrm-list li{ border-bottom:1px solid var(--line); } }
@media (max-width:560px){ .xrm-list{ grid-template-columns:1fr; } .xrm-list li{ padding-left:0 !important; border-right:0; } .xrm-list .is-now::before{ left:0 !important; } }

/* ---- fitting room ---- */
.xf{ background:var(--paper); padding:clamp(50px,8vh,100px) 0 clamp(70px,12vh,140px); }
.xf-grid{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(20px,4vw,64px); align-items:start; }
.xf-stage{ position:sticky; top:calc(var(--nav-h) + 20px); background:var(--paper-2); border:1px solid var(--line); aspect-ratio:3/4; overflow:hidden; background-image:linear-gradient(rgba(17,17,16,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(17,17,16,.05) 1px,transparent 1px); background-size:10% 10%; }
.xf-occ{ position:absolute; top:16px; left:16px; right:16px; margin:0; z-index:3; display:flex; flex-direction:column; gap:2px; }
.xf-occ span{ font-size:10px; letter-spacing:.26em; text-transform:uppercase; opacity:.6; }
.xf-occ b{ font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:clamp(20px,2.8vw,36px); letter-spacing:-.02em; }
.xf-fig{ position:absolute; top:15%; bottom:1%; left:50%; height:84%; width:auto; aspect-ratio:200/420; transform:translateX(-50%); overflow:visible; }
.xf-sway{ transform-origin:50% 96%; animation:xfSway 5.5s ease-in-out infinite; }
@keyframes xfSway{ 0%,100%{ transform:rotate(-.7deg); } 50%{ transform:rotate(.7deg); } }
.pf-g{ filter:drop-shadow(0 6px 5px rgba(0,0,0,.28)); }
.pf-pop{ animation:pfPop .5s cubic-bezier(.2,1.3,.3,1); transform-box:fill-box; transform-origin:50% 40%; }
@keyframes pfPop{ 0%{ opacity:.2; scale:.9; } 100%{ opacity:1; scale:1; } }
.xf-stamp{ position:absolute; right:14px; bottom:26px; margin:0; font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:clamp(26px,4vw,52px); letter-spacing:.06em; color:var(--accent); border:4px solid var(--accent); padding:2px 14px; transform:rotate(-12deg) scale(2.6); opacity:0; z-index:4; pointer-events:none; }
.is-stamped .xf-stamp{ opacity:.92; transform:rotate(-12deg) scale(1); transition:opacity .2s, transform .45s cubic-bezier(.2,1.5,.3,1); }
.xf-x{ position:absolute; top:40%; z-index:5; font-weight:800; font-size:22px; animation:xfX 1.5s cubic-bezier(.2,.7,.3,1) forwards; pointer-events:none; }
@keyframes xfX{ 0%{ transform:translate(0,0) rotate(0); opacity:1; } 100%{ transform:translate(var(--dx),-220px) rotate(var(--r)); opacity:0; } }
.xf-panel .field.topic{ margin-bottom:26px; }
.xf-sw{ display:flex; flex-wrap:wrap; gap:12px; margin-top:16px; }
.xf-dot{ width:34px; height:34px; border-radius:50%; border:1.5px solid rgba(242,239,233,.45); cursor:pointer; padding:0; transition:transform .25s cubic-bezier(.2,1.4,.3,1), border-color .25s; }
.xf-dot:hover{ transform:scale(1.15); }
.xf-dot.on{ border-color:var(--paper); box-shadow:0 0 0 3px var(--ink), 0 0 0 4.5px var(--paper); transform:scale(1.08); }
.xf-dot:focus-visible{ outline:2px solid var(--paper); outline-offset:4px; }
.xf-actions{ display:flex; flex-wrap:wrap; gap:12px; margin:8px 0 26px; }
.contact-card .xf-actions .btn-fill{ width:auto; padding:16px 26px; letter-spacing:.16em; }
.xf-ghost{ border-color:rgba(242,239,233,.5); color:var(--paper); background:transparent; }
.xf-ghost:hover{ background:var(--paper); color:var(--ink); }
.xf-result{ border-top:1px solid rgba(242,239,233,.25); padding-top:20px; }
.xf-num{ display:flex; align-items:baseline; gap:10px; margin:0; }
.xf-num b{ font-family:var(--font-display); font-weight:800; font-size:clamp(64px,10vw,140px); letter-spacing:-.05em; line-height:.85; font-variant-numeric:tabular-nums; }
.xf-num span{ font-size:14px; letter-spacing:.2em; opacity:.6; }
.xf-verdict{ margin:14px 0 8px; font-family:var(--font-serif); font-style:italic; font-size:clamp(20px,2.4vw,32px); }
.xf-best{ margin:0; font-size:11px; letter-spacing:.22em; text-transform:uppercase; opacity:.65; }
@media (max-width:980px){ .xf-grid{ grid-template-columns:1fr; } .xf-stage{ position:relative; top:auto; max-width:420px; margin:0 auto; } }
@media (prefers-reduced-motion: reduce){
  .si{ transform:none; transition:none; } .xh-pre .xh-line .ch{ transform:none; } .tape-track, .xy-fig, .xf-sway, .xo-item{ animation:none; }
}

.contact-card .field.topic .xf-sw{ clear:both; }


/* ============================ abstract art + foil ============================ */
.xart{ position:absolute; pointer-events:none; width:var(--s,320px); aspect-ratio:1; height:auto; opacity:var(--o,1); z-index:0; }
.xart.spin{ animation:artSpin 90s linear infinite; }
.xart.float{ animation:artFloat 10s ease-in-out infinite; }
@keyframes artSpin{ to{ transform:rotate(360deg); } }
@keyframes artFloat{ 0%,100%{ transform:translateY(0) rotate(0); } 50%{ transform:translateY(-14px) rotate(2deg); } }
.xm, .xp, .xb, .xv, .xz, .xy, .xl, .xo{ position:relative; overflow:hidden; }
.xg{ position:relative; overflow:clip; }
.xm > .wrap, .xg-pin, .xp > .wrap, .xb > .wrap, .xv > .wrap, .xz > .wrap, .xy > .wrap{ position:relative; z-index:1; }
/* hero */
.xh-art1{ --s:min(78vmin,760px); left:50%; top:50%; margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2); --o:.16; z-index:0; }
.xh-art2{ --s:clamp(120px,17vw,260px); left:clamp(24px,4vw,70px); bottom:clamp(60px,14vh,150px); --o:.95; z-index:1; }
.xh-art3{ --s:clamp(90px,12vw,190px); right:clamp(30px,5vw,90px); bottom:clamp(70px,16vh,170px); --o:.9; z-index:1; }
.xh-pageart{ --s:clamp(110px,15vw,240px); right:clamp(36px,7vw,120px); bottom:clamp(40px,10vh,110px); --o:.9; z-index:1; }
.xh-title{ position:relative; z-index:2; }
/* chapters */
.xm-art{ --s:min(46vw,620px); right:-6vw; top:50%; margin-top:calc(var(--s) / -2); --o:.55; }
.xg-art{ --s:clamp(110px,15vw,230px); right:var(--gutter); top:calc(var(--nav-h) + 6px); --o:.9; z-index:0; }
.xg-pin{ position:relative; }
.xp-art{ --s:clamp(160px,22vw,340px); left:var(--gutter); bottom:clamp(20px,6vh,70px); --o:.95; }
.xb-art{ --s:clamp(120px,15vw,240px); right:var(--gutter); top:clamp(40px,8vh,90px); --o:.7; }
.xv-art{ --s:min(38vw,520px); right:-8vw; top:clamp(20px,5vh,60px); --o:.45; }
.xz-art{ --s:min(38vw,520px); right:-6vw; bottom:-9vw; --o:.5; }
.xy-art{ --s:clamp(140px,20vw,300px); left:var(--gutter); bottom:clamp(20px,6vh,70px); --o:.95; }
@media (max-width:760px){ .xm-art, .xv-art{ --o:.25; } .xz-art{ --o:.35; } .xh-art2{ display:none; } }
/* art band */
.xab{ background:var(--paper-2); overflow:hidden; padding:clamp(18px,3vh,36px) 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.xab-track{ display:flex; width:max-content; gap:clamp(10px,1.4vw,22px); animation:xabGo 60s linear infinite; }
.xab-it{ width:clamp(120px,15vw,210px); flex:0 0 auto; background:var(--paper); }
.xab-it svg{ width:100%; aspect-ratio:1; display:block; }
@keyframes xabGo{ to{ transform:translateX(-50%); } }
/* champagne foil (luxury detail) */
:root{ --foil:linear-gradient(110deg,#a8894a 0%,#f1e3bd 28%,#b99b5c 52%,#f7edd2 74%,#a8894a 100%); --champagne:#c9b48a; }
.foil{ background:var(--foil); background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:foilMove 7s linear infinite; }
@keyframes foilMove{ to{ background-position:-220% 0; } }
.xh-frame{ border-color:rgba(201,180,138,.45); }
.xh-frame::before, .xh-frame::after{ border-color:var(--champagne); }
.tape{ border-top-color:var(--champagne); border-bottom-color:var(--champagne); }
.xb-stage::before, .xb-stage::after{ border-color:var(--champagne); }
/* seal */
.seal{ display:block; width:var(--ss,120px); height:var(--ss,120px); overflow:visible; }
.seal .seal-ring{ transform-origin:100px 100px; animation:artSpin 40s linear infinite; }
.xh-seal{ position:absolute; z-index:3; left:calc(50% - var(--ss) / 2); top:calc(var(--nav-h) + 4px); --ss:clamp(84px,8vw,112px); }
.footer-seal{ --ss:110px; margin-left:auto; }
@media (max-width:760px){ .xh-seal{ display:none; } }
@media (prefers-reduced-motion: reduce){ .xart.spin, .xart.float, .xab-track, .seal .seal-ring, .foil{ animation:none; } }

/* ============================ inspired ============================ */
.xw{ background:var(--paper); padding:clamp(80px,14vh,160px) 0; }
.xw .display-2{ margin:0 0 clamp(28px,5vh,56px); } .xw .accent-serif{ color:var(--accent); }
.xw-list{ list-style:none; margin:0; padding:0; border-top:2px solid var(--ink); }
.xw-row{ display:grid; grid-template-columns:clamp(50px,8vw,120px) 1fr clamp(90px,14vw,190px); gap:clamp(12px,3vw,40px); align-items:center; padding:clamp(18px,3vh,30px) 0; border-bottom:1px solid var(--line); transition:padding .4s cubic-bezier(.2,.8,.2,1), background .4s; }
.xw-row:hover{ padding-left:14px; background:var(--paper-2); }
.xw-n{ font-family:var(--font-serif); font-style:italic; font-size:clamp(26px,4vw,56px); color:var(--accent); }
.xw-row h3{ margin:0 0 4px; font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:clamp(24px,4.4vw,64px); letter-spacing:-.03em; line-height:1; }
.xw-row p{ margin:0; font-family:var(--font-serif); font-size:clamp(17px,2vw,26px); color:var(--mute); }
.xw-art{ width:100%; aspect-ratio:1; transition:transform .8s cubic-bezier(.2,.8,.2,1); }
.xw-row:hover .xw-art{ transform:rotate(12deg) scale(1.08); }
.xqt{ background:var(--ink); color:var(--paper); padding:clamp(90px,16vh,190px) 0; position:relative; overflow:hidden; }
.xqt > .wrap{ position:relative; z-index:1; }
.xqt-art{ --s:min(40vw,520px); right:-6vw; bottom:-6vw; --o:.5; }
.xqt-fig{ margin:0 0 clamp(28px,5vh,56px); min-height:clamp(220px,34vh,380px); transition:opacity .5s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
.xqt-fig.out{ opacity:0; transform:translateY(18px); }
.xqt-text{ margin:0; font-family:var(--font-serif); font-weight:400; font-size:clamp(30px,5.6vw,92px); line-height:1.04; letter-spacing:-.02em; max-width:1100px; text-wrap:balance; }
.xqt-text::before{ content:"\201C"; color:var(--champagne); margin-right:.06em; }
.xqt-text::after{ content:"\201D"; color:var(--champagne); margin-left:.04em; }
.xqt-by{ margin-top:26px; font-size:12px; letter-spacing:.3em; text-transform:uppercase; font-weight:700; background:var(--foil); background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:foilMove 7s linear infinite; }
.xqt-nav{ display:flex; align-items:center; gap:18px; }
.xqt-b{ width:52px; height:52px; border:1px solid rgba(242,239,233,.5); background:none; color:var(--paper); font-size:20px; cursor:pointer; transition:background .25s, color .25s; }
.xqt-b:hover{ background:var(--paper); color:var(--ink); }
.xqt-count{ font-size:11px; letter-spacing:.26em; font-variant-numeric:tabular-nums; opacity:.7; }
.xqt-note{ margin:34px 0 0; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; opacity:.45; max-width:620px; line-height:1.7; }
.xgal{ background:var(--paper-2); padding:clamp(80px,14vh,160px) 0; }
.xgal .display-2{ margin:0 0 clamp(24px,4vh,48px); } .xgal .accent-serif{ color:var(--accent); }
.xgal-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(10px,1.6vw,24px); }
.xgal-it{ margin:0; background:var(--paper); padding:clamp(10px,1.2vw,16px); border:1px solid var(--line); transition:transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s; }
.xgal-it:hover{ transform:translateY(-8px) rotate(-.8deg); box-shadow:0 30px 40px -24px rgba(0,0,0,.45); }
.xgal-it svg{ width:100%; aspect-ratio:1; display:block; }
.xgal-it figcaption{ display:flex; justify-content:space-between; gap:8px; margin-top:12px; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--mute); }
.xgal-it b{ color:var(--ink); }
@media (max-width:900px){ .xgal-grid{ grid-template-columns:1fr 1fr; } .xw-row{ grid-template-columns:44px 1fr 74px; } }

/* ============================ conduct ============================ */
.xcc-sec{ background:var(--paper-2); padding:clamp(80px,14vh,160px) 0; }
.xcc-sec .display-2{ margin:0 0 clamp(28px,5vh,56px); } .xcc-sec .accent-serif{ color:var(--accent); }
.xcc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.8vw,26px); }
.xcc{ position:relative; background:var(--paper); border:1px solid var(--line); padding:clamp(18px,2vw,28px); display:flex; flex-direction:column; transition:transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s; }
.xcc:hover{ transform:translateY(-6px); box-shadow:0 26px 36px -26px rgba(0,0,0,.5); }
.xcc-tag{ position:absolute; top:16px; right:16px; font-size:9px; letter-spacing:.22em; text-transform:uppercase; font-weight:700; border:1px solid var(--ink); padding:3px 8px; border-radius:99px; background:var(--paper); z-index:2; }
.xcc svg{ width:70%; aspect-ratio:1; margin:8px 0 18px; align-self:flex-start; transition:transform .8s cubic-bezier(.2,.8,.2,1); }
.xcc:hover svg{ transform:rotate(-8deg) scale(1.06); }
.xcc h3{ margin:0 0 8px; font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:clamp(20px,2vw,28px); letter-spacing:-.02em; }
.xcc p{ margin:0; font-family:var(--font-serif); font-size:clamp(16px,1.5vw,19px); line-height:1.4; color:var(--mute); }
.xcc p a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
@media (max-width:980px){ .xcc-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:560px){ .xcc-grid{ grid-template-columns:1fr; } }

/* ============================ community board ============================ */
.xbd{ background:var(--paper); padding:clamp(40px,7vh,90px) 0 clamp(60px,10vh,120px); }
.xbd-bar{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:22px; }
.xbd-bar .chips{ margin:0; }
.xbd-bar .chip span{ color:var(--ink); border-color:rgba(17,17,16,.35); }
.xbd-bar .chip input:checked + span{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.xbd-board{
  position:relative; width:100%; min-height:520px; overflow:hidden;
  background-color:#fbf9f4; background-image:radial-gradient(rgba(17,17,16,.16) 1px, transparent 1.4px); background-size:26px 26px;
  border:2px solid var(--ink); box-shadow:inset 0 0 0 8px var(--paper), inset 0 0 0 9px rgba(201,180,138,.7), 12px 14px 0 rgba(17,17,16,.12);
}
.note{ position:absolute; width:clamp(190px,19vw,250px); padding:26px 18px 16px; color:#181816; transform:rotate(var(--r,0deg)); box-shadow:0 16px 22px -12px rgba(0,0,0,.45); cursor:grab; user-select:none; touch-action:none; transition:left .7s cubic-bezier(.2,.8,.2,1), top .7s cubic-bezier(.2,.8,.2,1), opacity .35s, transform .3s; }
.note.drag{ cursor:grabbing; transition:transform .2s, opacity .3s; box-shadow:0 30px 34px -14px rgba(0,0,0,.5); transform:rotate(0deg) scale(1.04); }
.note:hover{ transform:rotate(0deg) scale(1.03); }
.note-idea{ background:#efe7d0; } .note-wish{ background:#efc6b8; } .note-question{ background:#dfd2ac; }
.note::before{ content:""; position:absolute; top:9px; left:50%; width:12px; height:12px; margin-left:-6px; border-radius:50%; background:radial-gradient(circle at 35% 35%, #d96b52, #7f2c1b); box-shadow:0 3px 4px rgba(0,0,0,.35); }
.note-k{ font-size:9.5px; letter-spacing:.24em; text-transform:uppercase; font-weight:800; opacity:.6; margin:0 0 8px; display:flex; justify-content:space-between; }
.note-t{ margin:0; font-family:var(--font-serif); font-size:clamp(17px,1.5vw,20px); line-height:1.25; }
.note-n{ margin:12px 0 0; font-size:10px; letter-spacing:.2em; text-transform:uppercase; opacity:.55; }
.note-a{ display:none; margin:14px -18px -16px; padding:14px 18px 16px; background:#181816; color:var(--paper); font-family:var(--font-serif); font-size:16px; line-height:1.35; }
.note-a b{ display:block; font-family:var(--font-sans); font-size:9.5px; letter-spacing:.24em; text-transform:uppercase; margin-bottom:6px; background:var(--foil); background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; }
.note.open .note-a{ display:block; animation:xoSwap .4s cubic-bezier(.2,.9,.2,1); }
.note.has-a .note-k::after{ content:"✓ " attr(data-st); }
.note.pending{ outline:2px dashed rgba(17,17,16,.5); outline-offset:-8px; }
.note.pending .note-k::after{ content:attr(data-st); }
.note.dim{ opacity:.12; pointer-events:none; }
.xbd-hint{ margin:14px 0 0; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--mute); }
.xbd-form{ margin-top:clamp(28px,5vh,56px); max-width:760px; }
.xbd-form textarea{ min-height:96px; }
@media (max-width:760px){
  .xbd-board{ min-height:0 !important; height:auto !important; display:grid; gap:18px; padding:26px 18px; }
  .note{ position:relative; left:auto !important; top:auto !important; width:auto; transform:rotate(var(--r,0deg)); cursor:pointer; touch-action:auto; }
}
@media (prefers-reduced-motion: reduce){ .note{ transition:none; } .xqt-by, .note-a b{ animation:none; } }

/* language switch */
.lang-btn{ display:inline-flex; align-items:center; gap:0; background:none; border:1px solid var(--line); border-radius:6px; padding:5px 8px; margin-right:6px; cursor:pointer; font:600 10.5px/1 var(--font-sans); letter-spacing:.14em; color:var(--mute); transition:border-color .2s; }
.lang-btn:hover{ border-color:var(--ink); }
.lang-btn b{ color:var(--ink); } .lang-btn span{ opacity:.55; }
.lang-btn i{ font-style:normal; margin:0 4px; opacity:.4; }
.menu-open .lang-btn{ color:var(--paper); border-color:rgba(242,239,233,.3); } .menu-open .lang-btn b{ color:var(--paper); }

/* ============================ fabric viewer (look + feel) ============================ */
@media (max-width:900px){ .xfab-grid{ grid-template-columns:1fr; } }

/* ============================ fitting room v2 ============================ */
.xf-how{ list-style:none; margin:0 0 22px; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(10px,1.6vw,22px); }
.xf-how li{ display:flex; gap:14px; align-items:flex-start; padding:16px 18px; background:var(--paper-2); border:1px solid var(--line); }
.xf-how b{ font-family:var(--font-display); font-weight:800; font-size:34px; line-height:.9; color:var(--accent); }
.xf-how span{ font-size:14px; line-height:1.45; color:var(--mute); }
.xf-how em{ display:block; font-style:normal; font-family:var(--font-display); font-weight:800; text-transform:uppercase; letter-spacing:.06em; font-size:13px; color:var(--ink); margin-bottom:3px; }
.xf-modes{ display:inline-flex; border:1px solid var(--ink); margin-bottom:24px; }
.xf-mode{ background:none; border:0; padding:14px 22px; font:700 11px/1 var(--font-sans); letter-spacing:.2em; text-transform:uppercase; cursor:pointer; color:var(--ink); transition:background .25s, color .25s; }
.xf-mode.on{ background:var(--ink); color:var(--paper); }
.xf-occ em{ font-style:normal; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); font-weight:700; margin-top:4px; }
.xf-timer{ position:absolute; left:16px; right:16px; top:calc(100% - 26px); height:10px; z-index:4; background:rgba(17,17,16,.14); }
.xf-timer i{ position:absolute; inset:0; background:var(--accent); transform-origin:left; }
.xf-timer span{ position:absolute; right:0; bottom:16px; font-family:var(--font-display); font-weight:800; font-size:22px; font-variant-numeric:tabular-nums; }
.xf-dots{ list-style:none; margin:0; padding:0; position:absolute; left:16px; bottom:34px; display:flex; gap:6px; z-index:4; }
.xf-dots li{ width:12px; height:12px; border:1.5px solid var(--ink); border-radius:50%; }
.xf-dots li.done{ background:var(--ink); } .xf-dots li.now{ background:var(--accent); border-color:var(--accent); }
.xf-brief{ margin:-20px 0 26px; font-family:var(--font-serif); font-style:italic; font-size:clamp(17px,1.8vw,22px); color:rgba(242,239,233,.8); }
.xf-thumbs{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:14px; }
.xf-thumb{ background:rgba(242,239,233,.06); border:1px solid rgba(242,239,233,.28); color:var(--paper); padding:8px 8px 10px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:4px; transition:background .25s, border-color .25s, transform .25s; }
.xf-thumb svg{ width:100%; max-width:84px; aspect-ratio:1; transition:transform .4s cubic-bezier(.2,1.3,.3,1); filter:drop-shadow(0 8px 6px rgba(0,0,0,.4)); }
.xf-thumb span{ font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; font-weight:700; }
.xf-thumb:hover{ border-color:var(--paper); transform:translateY(-3px); } .xf-thumb:hover svg{ transform:scale(1.08) rotate(-3deg); }
.xf-thumb[aria-pressed="true"]{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.xf-layer{ margin-top:16px; } .xf-extras{ margin-top:12px; }
.xf-panel .chips + .chips{ margin-top:12px; }
.xf-meters{ margin:14px 0 6px; } .xf-meters p{ display:grid; grid-template-columns:130px 1fr 34px; gap:12px; align-items:center; margin:8px 0; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; }
.xf-meters i{ display:block; height:6px; background:rgba(242,239,233,.16); } .xf-meters u{ display:block; height:100%; width:0; background:var(--paper); text-decoration:none; }
.xf-meters p:nth-child(2) u{ background:var(--champagne); } .xf-meters p:nth-child(3) u{ background:var(--accent); }
.xf-meters b{ text-align:right; font-variant-numeric:tabular-nums; }
.xf-tip{ margin:0 0 12px; font-size:13px; letter-spacing:.04em; line-height:1.5; color:var(--champagne); min-height:1.2em; }
.xf-final{ margin-top:18px; padding:18px; border:1px solid var(--champagne); background:rgba(201,180,138,.08); }
.xf-rank{ display:flex; flex-direction:column; margin:0; } .xf-rank span{ font-size:10px; letter-spacing:.26em; text-transform:uppercase; opacity:.6; }
.xf-rank b{ font-family:var(--font-serif); font-style:italic; font-weight:400; font-size:clamp(34px,5vw,64px); color:var(--champagne); }
.xf-total{ margin:6px 0 14px; font-size:14px; letter-spacing:.2em; } .xf-total b{ font-family:var(--font-display); font-weight:800; font-size:44px; letter-spacing:-.02em; }
@media (max-width:760px){ .xf-how{ grid-template-columns:1fr; } .xf-meters p{ grid-template-columns:100px 1fr 30px; } }
.contact-card .field.topic .xf-thumbs, .contact-card .field.topic .xf-layer, .contact-card .field.topic .chips{ clear:both; }


/* ============================ sitemap + locations ============================ */
.xsm{ background:var(--paper); padding:clamp(60px,10vh,120px) 0; }
.xsm-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,2vw,30px); }
.xsm-col h3{ margin:0 0 14px; padding-bottom:12px; border-bottom:2px solid var(--ink); font-size:12px; letter-spacing:.26em; text-transform:uppercase; }
.xsm-col ul{ list-style:none; margin:0; padding:0; }
.xsm-col a{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:14px 0; border-bottom:1px solid var(--line); font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:clamp(16px,1.6vw,22px); letter-spacing:-.01em; transition:padding .35s cubic-bezier(.2,.8,.2,1), color .3s; }
.xsm-col a:hover{ padding-left:12px; color:var(--accent); } .xsm-col a i{ font-style:normal; opacity:.4; }
@media (max-width:980px){ .xsm-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:560px){ .xsm-grid{ grid-template-columns:1fr; } }
.xloc{ background:var(--paper-2); padding:clamp(80px,14vh,160px) 0; position:relative; overflow:hidden; }
.xloc > .wrap{ position:relative; z-index:1; }
.xloc-art{ --s:min(34vw,440px); right:-5vw; top:clamp(20px,4vh,60px); --o:.85; }
.xloc .display-2{ margin:0 0 clamp(28px,5vh,56px); } .xloc .accent-serif{ color:var(--accent); }
.xloc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,2vw,30px); max-width:1000px; }
.xloc-card{ position:relative; background:var(--paper); border:1px solid var(--line); padding:clamp(22px,2.6vw,36px); }
.xloc-soon{ background:var(--ink); color:var(--paper); border-color:var(--ink); box-shadow:10px 10px 0 rgba(166,60,38,.9); }
.xloc-pill{ display:inline-block; font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; font-weight:700; border:1px solid currentColor; border-radius:99px; padding:4px 10px; margin-bottom:18px; }
.xloc-pill.on{ color:#2f6b3a; }
.xloc-soon .xloc-pill{ color:var(--champagne); }
.xloc-card h3{ margin:0 0 12px; font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:clamp(22px,2.4vw,34px); letter-spacing:-.02em; }
.xloc-card p{ margin:0 0 14px; font-family:var(--font-serif); font-size:clamp(17px,1.6vw,20px); line-height:1.4; }
.xloc-card p b{ font-family:var(--font-sans); font-size:.8em; letter-spacing:.06em; text-transform:uppercase; }
.xloc-addr{ font-style:normal; font-family:var(--font-display); font-weight:800; font-size:clamp(20px,2.2vw,30px); line-height:1.15; margin:0 0 16px; }
.xloc-note{ font-size:10.5px !important; letter-spacing:.24em; text-transform:uppercase; font-family:var(--font-sans) !important; color:var(--champagne); }
.xloc-links{ display:flex; gap:18px; } .xloc-links a{ text-decoration:underline; text-underline-offset:3px; font-family:var(--font-sans); font-size:12px; letter-spacing:.18em; text-transform:uppercase; font-weight:700; }
@media (max-width:760px){ .xloc-grid{ grid-template-columns:1fr; } }

.xfab-note{ margin:clamp(28px,5vh,52px) 0 0; font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--mute); font-weight:600; }

.xtabs{ display:flex; gap:10px; }
.xtabs a{ border:1px solid var(--ink); padding:12px 20px; font-size:11px; letter-spacing:.2em; text-transform:uppercase; font-weight:700; transition:background .25s, color .25s; }
.xtabs a:hover{ background:var(--ink); color:var(--paper); }


/* ============================ luxury layer (motion) ============================ */
/* glint */
.glint-i{ position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .4s ease; z-index:3;
  background:radial-gradient(340px circle at var(--gx,50%) var(--gy,50%), rgba(241,227,189,.30), rgba(241,227,189,0) 62%); mix-blend-mode:soft-light; }
.plate:hover > .glint-i, .xk-look:hover > .glint-i, .xcc:hover > .glint-i, .xv-card:hover > .glint-i, .contact-card:hover > .glint-i,
.xloc-card:hover > .glint-i, .xr:hover > .glint-i, .xqc:hover > .glint-i, .xgal-it:hover > .glint-i{ opacity:1; }
.plate, .xgal-it, .xr, .xcc, .xloc-card{ position:relative; }
.plate{ position:relative; }
.product-media > .plate{ position:absolute; }
/* kicker hairline draws in */
.xk{ display:flex; align-items:center; gap:16px; }
.xk::after{ content:""; height:1px; flex:0 0 clamp(48px,9vw,140px); background:linear-gradient(90deg,#c9b48a,rgba(201,180,138,0)); transform:scaleX(0); transform-origin:left; transition:transform 1.3s cubic-bezier(.2,.8,.2,1) .25s; }
.xk.in::after{ transform:scaleX(1); }
/* hero frame draws itself, title gets one champagne light sweep */
.xh-frame{ animation:frameDraw 1.8s cubic-bezier(.7,0,.2,1) .35s both; }
@keyframes frameDraw{ from{ clip-path:inset(0 100% 100% 0); } to{ clip-path:inset(0 0 0 0); } }
.xh-title::after{ content:""; position:absolute; inset:-8% -6%; pointer-events:none; mix-blend-mode:screen; opacity:0;
  background:linear-gradient(105deg, transparent 38%, rgba(241,227,189,.75) 50%, transparent 62%); transform:translateX(-110%); }
.xh-shine .xh-title::after{ animation:titleShine 2.1s cubic-bezier(.55,0,.2,1) forwards; }
@keyframes titleShine{ 0%{ transform:translateX(-110%); opacity:1; } 100%{ transform:translateX(110%); opacity:1; } }
/* dark sections open like a curtain */
.um{ clip-path:inset(3.5vh 2.2vw 0 2.2vw round 26px); transition:clip-path 1.25s cubic-bezier(.2,.8,.2,1); }
.um.um-in{ clip-path:inset(0 0 0 0 round 0); }
/* photos: masked wipe + slow parallax */
.px{ position:relative; overflow:hidden; aspect-ratio:3/4; width:100%; clip-path:inset(100% 0 0 0); transition:clip-path 1.3s cubic-bezier(.2,.8,.2,1); background:var(--paper-2); }
.px.px-in{ clip-path:inset(0 0 0 0); }
.px img{ position:absolute; inset:0; width:100%; height:100% !important; aspect-ratio:auto !important; object-fit:cover; transform:translate3d(0,var(--py,0%),0) scale(1.16); transition:transform 1.6s cubic-bezier(.2,.8,.2,1), filter .7s ease; }
.px.px-in img{ transform:translate3d(0,var(--py,0%),0) scale(1.08); }
/* gallery cards lean with scroll velocity */
.xg-card{ transform:skewX(var(--sk,0deg)); transition:transform .18s linear; }
@media (prefers-reduced-motion: reduce){
  .um, .px{ clip-path:none !important; transition:none; } .px img{ transform:none !important; }
  .xh-frame{ animation:none; } .xh-title::after{ display:none; } .xk::after{ transform:none; transition:none; } .xg-card{ transform:none; }
}


/* foil numerals */
.xpl-n, .xr-n, .xn-num{ background:var(--foil); background-size:240% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:foilMove 9s linear infinite; }
.xn-num{ background-image:linear-gradient(110deg,#7c5f27 0%,#d9c48c 30%,#8a6d33 55%,#e6d6a8 78%,#7c5f27 100%); }
@media (prefers-reduced-motion: reduce){ .xpl-n, .xr-n, .xn-num{ animation:none; } }


/* ---- minimal pass: calmer foil, no leaning cards ---- */
.xpl-n, .xr-n, .xn-num{ animation:none !important; background-position:30% 0; }
.xg-card{ transform:none !important; }
.xh-frame{ border-color:rgba(201,180,138,.35); }


/* ============================ campaign hero (home) ============================ */
.xc-hero{ position:relative; min-height:100svh; background:#0d0d0c; color:var(--paper); overflow:hidden; display:flex; align-items:flex-end; }
.xc-photo{ position:absolute; top:0; bottom:0; right:clamp(0px,6vw,96px); width:min(46vw, calc(100svh * .75)); margin:0; overflow:hidden; clip-path:inset(0 0 100% 0); transition:clip-path 1.5s cubic-bezier(.75,0,.2,1) .2s; }
.xc-photo.in{ clip-path:inset(0 0 0 0); }
.xc-photo img{ width:100%; height:100%; object-fit:cover; object-position:center 42%; display:block; transform:translate3d(0,var(--py,0),0) scale(1.2); transition:transform 2.6s cubic-bezier(.2,.8,.2,1); }
.xc-photo.in img{ transform:translate3d(0,var(--py,0),0) scale(1.06); }
.xc-top{ position:absolute; z-index:3; top:calc(var(--nav-h) + 22px); left:var(--gutter); right:var(--gutter); display:flex; justify-content:space-between; margin:0; font-size:10.5px; letter-spacing:.28em; text-transform:uppercase; font-weight:600; color:rgba(242,239,233,.75); }
.xc-title{ position:relative; z-index:2; margin:0; width:100%; padding:0 var(--gutter) clamp(84px,14vh,150px); display:flex; flex-direction:column; font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(70px, min(19vw, 30svh), 360px); line-height:.8; letter-spacing:-.05em; color:#fff; mix-blend-mode:difference; }
.xc-title span{ display:block; overflow:hidden; padding:.04em 0; margin:-.04em 0; }
.xc-title .ch{ display:inline-block; transition:transform 1.1s cubic-bezier(.2,.9,.2,1); transition-delay:calc(var(--i,0) * 45ms); }
.xc-pre .xc-title .ch{ transform:translateY(112%); }
.xc-foot{ position:absolute; z-index:3; left:var(--gutter); right:var(--gutter); bottom:clamp(22px,4.5vh,44px); display:flex; align-items:baseline; gap:clamp(16px,3vw,40px); }
.xc-couture{ margin:0; font-family:var(--font-serif); font-style:italic; font-size:clamp(22px,2.8vw,40px); color:#d9c48c; }
.xc-couture .tm{ color:#d9c48c; }
.xc-note{ margin:0; margin-right:auto; font-size:10.5px; letter-spacing:.26em; text-transform:uppercase; color:rgba(242,239,233,.6); }
.xc-link{ font-size:11px; letter-spacing:.26em; text-transform:uppercase; font-weight:700; border-bottom:1px solid #d9c48c; padding-bottom:4px; transition:letter-spacing .4s ease; }
.xc-link:hover{ letter-spacing:.34em; }
.xc-top, .xc-foot{ opacity:1; transition:opacity 1s ease .9s; } .xc-pre .xc-top, .xc-pre .xc-foot{ opacity:0; }
@media (max-width:760px){
  .xc-photo{ right:0; left:0; width:auto; opacity:.6; }
  .xc-title{ font-size:clamp(60px,21vw,150px); padding-bottom:104px; }
  .xc-note{ display:none; } .xc-foot{ justify-content:space-between; }
}
@media (prefers-reduced-motion: reduce){ .xc-photo{ clip-path:none; transition:none; } .xc-photo img{ transform:none; transition:none; } .xc-pre .xc-title .ch{ transform:none; } .xc-pre .xc-top, .xc-pre .xc-foot{ opacity:1; } }

/* header sits transparent on the dark campaign hero */
.on-dark .site-header{ background:transparent !important; border-color:transparent !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
.on-dark .site-header .wordmark, .on-dark .site-header .wordmark *, .on-dark .site-header .burger, .on-dark .site-header .lang-btn, .on-dark .site-header .lang-btn b, .on-dark .site-header .kbd-btn{ color:var(--paper); }
.on-dark .site-header .lang-btn, .on-dark .site-header .kbd-btn{ border-color:rgba(242,239,233,.35); }
.on-dark .site-header .burger-lines span{ background:var(--paper); }
.xc-photo img{ filter:grayscale(1) contrast(1.06) brightness(1.02); }


/* campaign hero without a photo: one garment in the spotlight */
.xc-look{ background:radial-gradient(ellipse at 50% 44%, #34312b 0%, #171614 46%, #0d0d0c 78%); display:flex; align-items:center; justify-content:center; }
.xc-garment{ width:100%; max-width:none; aspect-ratio:1; flex:0 0 auto; filter:drop-shadow(0 46px 40px rgba(0,0,0,.65)); animation:xcFloat 9s ease-in-out infinite; }
@keyframes xcFloat{ 0%,100%{ transform:translateY(0) rotate(-.6deg); } 50%{ transform:translateY(-14px) rotate(.6deg); } }
.xc-look figcaption{ position:absolute; left:18px; bottom:clamp(78px,13vh,130px); font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:rgba(242,239,233,.55); }
.xc-title{ mix-blend-mode:normal; }
@media (max-width:760px){ .xc-garment{ width:100%; } .xc-look figcaption{ display:none; } }
@media (prefers-reduced-motion: reduce){ .xc-garment{ animation:none; } }