/* =====================================================================
   NOTTE & NOIR — the house
   Black and white. Burgundy is the only colour, and it is used sparingly:
   the hero veils, the cities band, small numbers and emphasised words.
   ===================================================================== */

:root{
  --ink:#0a0a0a;
  --ink-2:#141414;
  --paper:#f6f4f1;
  --white:#fff;
  --grey:#8d8a86;
  --line-dark:rgba(255,255,255,.14);
  --line-light:rgba(10,10,10,.14);

  --bordo:#6b1424;          /* the accent */
  --bordo-deep:#3d0a14;
  --bordo-light:#b4475a;    /* burgundy that still reads on black */

  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  --pad:clamp(1.15rem,4vw,3.5rem);
  --maxw:1440px;
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0; background:var(--ink); color:var(--white);
  font-family:var(--sans); font-weight:300; font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
body.is-locked{ overflow:hidden; }
img,video{ display:block; max-width:100%; }
a{ color:inherit; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
:focus-visible{ outline:2px solid var(--bordo-light); outline-offset:4px; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.mono{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.12em;
  text-transform:uppercase; font-weight:400;
}
.eyebrow{ display:inline-flex; align-items:center; gap:.6rem; margin:0; opacity:.62; }
.eyebrow i{ width:7px; height:7px; background:var(--bordo-light); display:block; }
.display{
  font-family:var(--serif); font-weight:300; margin:0;
  font-size:clamp(2.2rem,5.2vw,4.8rem); line-height:1; letter-spacing:-.015em;
}
.display em{ font-style:italic; }

/* =====================================================================
   HEADER
   ===================================================================== */
.head{
  position:fixed; inset:0 0 auto; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  height:calc(68px + env(safe-area-inset-top,0px)); padding-inline:var(--pad);
  padding-top:env(safe-area-inset-top,0px);
  transition:background .5s var(--ease),border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.head.is-solid{ background:rgba(10,10,10,.92); border-color:var(--line-dark); backdrop-filter:blur(10px); }
.mark{ display:inline-flex; align-items:center; gap:.7rem; text-decoration:none; }
.mark svg{ width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:6; }
.mark span{ font-size:.74rem; letter-spacing:.32em; text-transform:uppercase; font-weight:400; }
.mark b{ font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:0; font-size:1rem; color:var(--bordo-light); }
.nav{ display:flex; gap:clamp(1rem,2.4vw,2.2rem); }
.nav a{
  font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; text-decoration:none;
  opacity:.78; transition:opacity .3s;
}
.nav a:hover{ opacity:1; }
.nav a[aria-current="page"]{ opacity:1; box-shadow:inset 0 -1px 0 var(--bordo-light); padding-bottom:.35rem; }
.menu a[aria-current="page"]{ color:var(--bordo-light); font-style:italic; }
.nav{ align-items:center; }
.nav .nav__cta{
  opacity:1; padding:.65rem 1rem; border:1px solid var(--bordo-light);
  transition:background .35s var(--ease),border-color .35s var(--ease);
}
.nav .nav__cta:hover{ background:var(--bordo); border-color:var(--bordo); }
.menu .menu__cta{ margin-top:1rem; font-family:var(--mono); font-size:.8rem; letter-spacing:.16em; text-transform:uppercase;
  align-self:flex-start; padding:1rem 1.4rem; background:var(--bordo); }
.burger{ display:none; width:34px; height:34px; position:relative; }
.burger span{ position:absolute; left:6px; right:6px; height:1px; background:currentColor; transition:transform .4s var(--ease); }
.burger span:first-child{ top:13px; }
.burger span:last-child{ top:20px; }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(3.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.5px) rotate(-45deg); }
.menu{
  position:fixed; inset:0; z-index:40; background:var(--ink);
  display:flex; flex-direction:column; justify-content:center; gap:1.2rem; padding:var(--pad);
  opacity:0; visibility:hidden; transition:opacity .4s var(--ease),visibility 0s .4s;
}
.menu.is-open{ opacity:1; visibility:visible; transition:opacity .4s var(--ease); }
.menu a{ font-family:var(--serif); font-size:2.4rem; font-weight:300; text-decoration:none; }
@media (max-width:1000px){   /* seven links + the CTA need room */
  .nav{ display:none; }
  .burger{ display:block; }
}

/* =====================================================================
   HERO — collage film under burgundy veils
   ===================================================================== */
.hero{
  position:relative; height:100svh; min-height:560px; overflow:hidden; background:var(--ink);
}
.hero__film{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.05);
}
.hero::after{          /* keeps the header and the foot legible over bright tiles */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,0,0,.45),transparent 18%,transparent 78%,rgba(0,0,0,.5));
}

/* Five frosted strips. JS animates each strip's clip-path; the blur comes
   from backdrop-filter, so whatever is under a strip stays in motion. */
.veil{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.veil i{
  position:absolute; top:0; bottom:0; width:calc(20% + 1px);
  background:linear-gradient(180deg,rgba(107,20,36,.74),rgba(61,10,20,.82));
  -webkit-backdrop-filter:blur(20px) saturate(.6);
  backdrop-filter:blur(20px) saturate(.6);
  box-shadow:inset 1px 0 0 rgba(255,255,255,.07);
  clip-path:inset(0 0 100% 0);
  will-change:clip-path;
}
.veil i:nth-child(1){ left:0; }
.veil i:nth-child(2){ left:20%; }
.veil i:nth-child(3){ left:40%; }
.veil i:nth-child(4){ left:60%; }
.veil i:nth-child(5){ left:80%; }

.slogan{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  display:flex; flex-direction:column; justify-content:center; gap:1.2rem;
  padding:0 var(--pad);
}
.slogan[data-align="center"]{ align-items:center; text-align:center; }
.slogan[data-align="left"]{ align-items:flex-start; text-align:left; padding-right:44%; }
.slogan[data-align="right"]{ align-items:flex-end; text-align:right; padding-left:44%; }
.slogan__count{ margin:0; color:rgba(255,255,255,.7); opacity:0; }
.slogan__line{
  margin:0; max-width:15ch;
  font-family:var(--serif); font-weight:300; color:#fff;
  font-size:clamp(2.5rem,6.6vw,6.8rem); line-height:.98; letter-spacing:-.02em;
}
.slogan__line em{ font-style:italic; }
.js .slogan:not(.is-ready) .slogan__line{ visibility:hidden; }   /* until JS has split it into words */
.slogan .w{ display:inline-block; opacity:0; will-change:opacity,filter,transform; }
@media (max-width:700px){
  .slogan[data-align]{ align-items:center; text-align:center; padding-inline:var(--pad); }
}

.hero__foot{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:0 var(--pad) 1.6rem; color:rgba(255,255,255,.74);
}
.hero__cue{ display:inline-flex; align-items:center; gap:.6rem; text-decoration:none; }
.hero__cue i{ width:1px; height:28px; background:currentColor; position:relative; overflow:hidden; }
.hero__cue i::after{
  content:""; position:absolute; left:0; width:1px; height:40%; background:var(--bordo-light);
  animation:cue 2.2s var(--ease) infinite;
}
@keyframes cue{ from{ top:-40%; } to{ top:100%; } }
@media (max-width:560px){ .hero__foot > span:first-child{ display:none; } }

/* =====================================================================
   HOME INTRO — one wide line, two sentences beside it
   ===================================================================== */
.intro{ background:var(--paper); color:var(--ink); padding-block:clamp(4.5rem,14vh,8.5rem); }
.intro .eyebrow i{ background:var(--bordo); }
.intro__grid{
  display:grid; grid-template-columns:minmax(0,2.2fr) minmax(0,1fr);
  column-gap:clamp(2rem,6vw,6rem); row-gap:1.6rem; align-items:end;
}
.intro__grid .eyebrow{ grid-column:1 / -1; }
.intro__line{
  margin:0; font-family:var(--serif); font-weight:300; text-wrap:balance;
  font-size:clamp(2.2rem,5.4vw,5.2rem); line-height:1.02; letter-spacing:-.02em;
  will-change:transform;
}
.intro__line em{ font-style:italic; color:var(--bordo); }
.intro__side{ display:grid; gap:1.4rem; justify-items:start; padding-bottom:.6rem; }
.intro__side p{ margin:0; color:#3f3d3a; font-size:1.02rem; line-height:1.75; max-width:36ch; }
@media (max-width:860px){ .intro__grid{ grid-template-columns:1fr; } }

.link{
  text-decoration:none; display:inline-flex; gap:.5rem; align-items:center;
  padding-bottom:.3rem; border-bottom:1px solid currentColor;
  transition:color .3s var(--ease),gap .4s var(--ease);
}
.link:hover{ color:var(--bordo); gap:.9rem; }

/* =====================================================================
   MANIFESTO  (BYQ · Scroll Blur Reveal)
   ===================================================================== */
.manifesto{
  background:var(--paper); color:var(--ink);
  padding:clamp(5rem,18vh,11rem) var(--pad);
  display:flex; flex-direction:column; align-items:center; gap:2.4rem;
}
.manifesto .eyebrow i{ background:var(--bordo); }
.manifesto__text{
  margin:0; max-width:34ch; text-align:center; text-wrap:balance;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.9rem,1rem + 3vw,3.8rem); line-height:1.18; letter-spacing:-.01em;
  will-change:transform;
}
.manifesto__text em{ font-style:italic; color:var(--bordo); }
.sbr-word{ display:inline-block; will-change:opacity,filter,transform; }

/* =====================================================================
   VISION + MISSION — two statements side by side
   ===================================================================== */
.vm{ background:var(--paper); color:var(--ink); padding-bottom:clamp(4.5rem,14vh,8.5rem); }
.vm__grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(2.5rem,6vw,6rem); border-top:1px solid var(--line-light); padding-top:clamp(2.5rem,7vh,4rem); }
.vm .eyebrow i{ background:var(--bordo); }
.vm__item{ display:grid; gap:1.2rem; align-content:start; }
.vm__text{ margin:0; font-family:var(--serif); font-weight:300; text-wrap:balance;
  font-size:clamp(1.7rem,2.9vw,2.6rem); line-height:1.14; letter-spacing:-.01em; }
.vm__text em{ font-style:italic; color:var(--bordo); }
.vm__more{ margin:0; color:#3f3d3a; font-size:1.02rem; line-height:1.75; max-width:48ch; }
.vm--light{ padding-top:clamp(4.5rem,14vh,8.5rem); }
.vm--light .vm__grid{ border-top:0; padding-top:0; }
@media (max-width:760px){ .vm__grid{ grid-template-columns:1fr; } }

/* =====================================================================
   JOIN THE LIST — email sign-up (sent to Klaviyo by brand.js)
   ===================================================================== */
.join{ background:var(--ink); padding-block:clamp(4.5rem,14vh,8.5rem); border-top:1px solid var(--line-dark); }
.join__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(2rem,6vw,6rem); align-items:end; }
.join__head{ display:grid; gap:1.2rem; justify-items:start; }
.join__head .display em{ color:var(--bordo-light); }
.join__lede{ margin:0; color:rgba(255,255,255,.72); max-width:42ch; line-height:1.7; }
.join__form{ display:grid; gap:.9rem; min-width:0; }
.join__field{ display:flex; gap:.8rem; border-bottom:1px solid rgba(255,255,255,.4); padding-bottom:.8rem; }
.join__field:focus-within{ border-bottom-color:var(--bordo-light); }
.join__field input{
  flex:1 1 auto; min-width:0; font:inherit; font-size:1.15rem; color:#fff;
  background:transparent; border:0; padding:.6rem 0;
}
.join__field input::placeholder{ color:rgba(255,255,255,.45); }
.join__field input:focus{ outline:none; }
.join__field.is-invalid{ border-bottom-color:var(--bordo-light); }
.join__trap{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.join__fine{ margin:0; font-size:.78rem; color:rgba(255,255,255,.5); }
.join__note{ margin:0; min-height:1.4em; font-size:.95rem; color:#fff; }
.join__note.is-error{ color:#fff; background:rgba(180,71,90,.22); border-left:2px solid var(--bordo-light); padding:.75rem 1rem; font-size:1rem; }
.join__input.is-invalid::placeholder, .join__field.is-invalid input::placeholder{ color:var(--bordo-light); }
.join__input.is-invalid{ border-bottom-width:2px; }
.join__consent.is-invalid input{ border-width:2px; box-shadow:0 0 0 3px rgba(180,71,90,.35); }
.join__names{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; }
.join__input{
  width:100%; min-width:0; font:inherit; font-size:1.15rem; color:#fff; background:transparent;
  border:0; border-bottom:1px solid rgba(255,255,255,.4); border-radius:0; padding:.6rem 0 .9rem;
}
.join__input::placeholder{ color:rgba(255,255,255,.45); }
.join__input:focus{ outline:none; border-bottom-color:var(--bordo-light); }
.join__input.is-invalid{ border-bottom-color:var(--bordo-light); }
.join__consent{ display:grid; grid-template-columns:auto 1fr; gap:.8rem; align-items:start; cursor:pointer;
  font-size:.82rem; line-height:1.6; color:rgba(255,255,255,.6); margin-top:.3rem; }
.join__consent input{
  appearance:none; -webkit-appearance:none; width:1.05rem; height:1.05rem; margin:.2rem 0 0; flex:none;
  border:1px solid rgba(255,255,255,.55); background:transparent; display:grid; place-items:center; cursor:pointer;
}
.join__consent input::after{ content:''; width:.5rem; height:.5rem; background:var(--bordo-light); transform:scale(0); transition:transform .2s var(--ease); }
.join__consent input:checked{ border-color:var(--bordo-light); }
.join__consent input:checked::after{ transform:scale(1); }
.join__consent input:focus-visible{ outline:1px solid var(--bordo-light); outline-offset:3px; }
.join__consent.is-invalid input{ border-color:var(--bordo-light); }
.join__consent.is-invalid span{ color:#fff; }
.join__consent a{ color:#fff; text-underline-offset:3px; }
.join.is-done .join__field, .join.is-done .join__names, .join.is-done .join__consent{ display:none; }
@media (max-width:820px){ .join__grid{ grid-template-columns:1fr; } }
@media (max-width:460px){ .join__field{ flex-direction:column; } .join__field .btn{ width:100%; } .join__names{ grid-template-columns:1fr; gap:.4rem; } }

/* glass button over the hero film */
.btn.btn--glass{ background:rgba(107,20,36,.55); border-color:rgba(255,255,255,.35); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); text-decoration:none; }
.btn.btn--glass:hover{ background:var(--bordo); }

/* =====================================================================
   SUBPAGE HEAD
   ===================================================================== */
.page-head{ padding-top:calc(68px + env(safe-area-inset-top,0px) + clamp(3rem,10vh,6rem)); padding-bottom:clamp(3rem,10vh,6rem); }
.page-head__grid{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:clamp(2rem,6vw,6rem); align-items:end; }
.page-head__text{ display:grid; gap:1.6rem; }
.page-head--text .wrap{ display:grid; gap:1.6rem; }
.page-head__title{
  margin:0; font-family:var(--serif); font-weight:300; text-wrap:balance; max-width:16ch;
  font-size:clamp(2.8rem,8vw,7.4rem); line-height:.95; letter-spacing:-.025em;
}
.page-head__title em{ font-style:italic; color:var(--bordo-light); }
.page-head__lede{ margin:0; max-width:52ch; color:rgba(255,255,255,.72); font-size:1.05rem; line-height:1.75; }
.page-head__pic{ margin:0; aspect-ratio:3/4; overflow:hidden; }
.page-head__pic img{ width:100%; height:100%; object-fit:cover; object-position:50% 15%; filter:grayscale(1) contrast(1.05); }
@media (max-width:820px){ .page-head__grid{ grid-template-columns:1fr; } .page-head__pic{ aspect-ratio:4/3; } }

/* =====================================================================
   HOME ROOMS — expanding panels  (BYQ · Expanding Image Panels)
   ===================================================================== */
.rooms{ background:var(--ink); padding-block:clamp(4.5rem,14vh,8.5rem); }
.rooms__head{ display:grid; gap:1.4rem; margin-bottom:clamp(2rem,6vh,3.5rem); }
.rooms__head .display em{ color:var(--bordo-light); }
.panels{ list-style:none; margin:0; padding:0; display:flex; gap:.6rem; height:min(34rem,70vh); }
.panel{ position:relative; flex:1 1 0; min-width:0; overflow:hidden; transition:flex-grow .7s cubic-bezier(.16,1,.3,1); }
.panel.is-active,.panels:hover .panel:hover{ flex-grow:5.2; }
.panels:hover .panel.is-active:not(:hover){ flex-grow:1; }
.panel__btn{
  position:absolute; inset:0; display:block; width:100%; height:100%;
  border:1px solid var(--line-dark); background:var(--ink-2); overflow:hidden;
}
.panel__btn:focus-visible{ outline:2px solid var(--bordo-light); outline-offset:-4px; z-index:2; }
.panel__btn img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 20%;
  filter:grayscale(1) brightness(.72); transform:scale(1.06);
  transition:filter .7s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1);
}
.panel__scrim{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top,rgba(61,10,20,.85) 0%,rgba(10,10,10,.3) 38%,rgba(10,10,10,0) 64%);
  opacity:0; transition:opacity .6s cubic-bezier(.16,1,.3,1);
}
.panel__no{
  position:absolute; left:.9rem; bottom:1rem; writing-mode:vertical-rl; transform:rotate(180deg);
  opacity:.85; pointer-events:none; transition:opacity .4s ease;
}
.panel__cap{
  position:absolute; left:1.4rem; right:1.4rem; bottom:1.3rem; z-index:3;
  display:flex; flex-direction:column; gap:.35rem; text-decoration:none;
  opacity:0; transform:translateY(14px); pointer-events:none;
  transition:opacity .5s cubic-bezier(.16,1,.3,1) .08s,transform .6s cubic-bezier(.16,1,.3,1) .08s;
}
.panel__cap .mono:first-child{ color:var(--bordo-light); }
.panel__title{ font-family:var(--serif); font-weight:300; font-size:clamp(1.6rem,3vw,2.6rem); line-height:1.02; white-space:nowrap; }
.panel__go{ margin-top:.4rem; opacity:.85; }
.panel__cap:hover .panel__go{ color:#fff; text-decoration:underline; text-underline-offset:4px; }
/* open = active with the row at rest, or hovered */
.panels:not(:hover) .panel.is-active .panel__btn img,.panel:hover .panel__btn img{ filter:grayscale(1) brightness(.9); transform:scale(1); }
.panels:not(:hover) .panel.is-active .panel__scrim,.panel:hover .panel__scrim{ opacity:1; }
.panels:not(:hover) .panel.is-active .panel__no,.panel:hover .panel__no{ opacity:0; }
.panels:not(:hover) .panel.is-active .panel__cap,.panel:hover .panel__cap{ opacity:1; transform:none; pointer-events:auto; }
@media (max-width:34rem){
  .panels{ flex-direction:column; height:auto; }
  .panel{ flex:0 0 auto; height:4.6rem; transition:height .7s cubic-bezier(.16,1,.3,1); }
  .panel.is-active{ height:22rem; }
  .panels:hover .panel.is-active:not(:hover){ flex-grow:0; }
  .panel__no{ writing-mode:horizontal-tb; transform:none; left:1.1rem; top:50%; bottom:auto; translate:0 -50%; font-size:.74rem; }
  .panel__no::after{ content:"  ·  " attr(data-name); }   /* collapsed rows still say where they lead */
  .panel__title{ white-space:normal; }
  /* touch: only the tapped (active) panel opens, hover is ignored */
  .panel:hover:not(.is-active) .panel__cap{ opacity:0; pointer-events:none; }
}

/* =====================================================================
   ACCORDIONS  (BYQ · Kelvin FAQ 1, re-skinned)
   ===================================================================== */
.acc-sec{ --acc-fg:#fff; --acc-dim:rgba(255,255,255,.6); --acc-line:var(--line-dark); --acc-accent:var(--bordo-light);
  background:var(--ink); color:var(--acc-fg); padding-block:clamp(4.5rem,16vh,10rem); }
.acc-sec--light{ --acc-fg:var(--ink); --acc-dim:#57534f; --acc-line:var(--line-light); --acc-accent:var(--bordo); background:var(--paper); }
.acc{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); gap:4rem; align-items:start; }
.acc__head{ display:grid; gap:1.2rem; justify-items:start; }
.acc__head .eyebrow i{ background:var(--acc-accent); }
.acc__head .display{ font-size:clamp(2.2rem,4.6vw,4.2rem); }
.dim{ opacity:.5; }
.acc__list{ border-bottom:1px solid var(--acc-line); }
.acc__item{ border-top:1px solid var(--acc-line); }
.acc__q{
  display:flex; align-items:center; gap:1.2rem; width:100%; text-align:left;
  padding:1.8rem 0; color:var(--acc-fg);
  font-family:var(--serif); font-weight:400; font-size:clamp(1.3rem,2.2vw,1.75rem); line-height:1.2;
  transition:color .4s cubic-bezier(.22,1,.36,1);
}
.acc__q:hover{ color:var(--acc-accent); }
.acc__no{ color:var(--acc-accent); flex:none; width:2.2rem; }
.acc__icon{
  margin-left:auto; flex:none; font-family:var(--mono); font-size:1.4rem; font-weight:300; color:var(--acc-dim);
  transition:transform .4s cubic-bezier(.22,1,.36,1),color .4s;
}
.acc__q[aria-expanded="true"] .acc__icon{ transform:rotate(45deg); color:var(--acc-accent); }
.acc__a{ height:0; overflow:hidden; }
.acc__a.is-open{ height:auto; }
.acc__a.is-moving{ transition:height .5s cubic-bezier(.16,1,.3,1); }
.acc__a p{ margin:0; padding-bottom:1.8rem; max-width:60ch; color:var(--acc-dim); font-size:1.05rem; line-height:1.7; }
@media (max-width:991px){ .acc{ grid-template-columns:1fr; gap:2.5rem; } }

/* ---------- next-page link ---------- */
.next{ border-top:1px solid var(--line-dark); }
.next__link{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding-block:clamp(3rem,10vh,5.5rem); text-decoration:none; }
.next__title{ font-family:var(--serif); font-weight:300; font-size:clamp(2.4rem,7vw,6rem); line-height:1; letter-spacing:-.02em; }
.next__title em{ font-style:normal; color:var(--bordo-light); display:inline-block; transition:transform .5s var(--ease); }
.next__link:hover .next__title em{ transform:translateX(.3em); }

/* =====================================================================
   STORY + NUMBERS  (after BYQ · Nextwell intro-text-4)
   ===================================================================== */
.story{ background:var(--paper); color:var(--ink); padding-block:clamp(4.5rem,14vh,8.5rem) clamp(5rem,16vh,10rem); }
.story .eyebrow i{ background:var(--bordo); }
.story__grid{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem);
  align-items:start;
}
.story__head{ display:grid; gap:1.4rem; align-content:start; }
.story__head .display em{ color:var(--bordo); }
.story__copy{ display:grid; gap:1.2rem; align-content:start; color:#3f3d3a; font-size:1.02rem; line-height:1.8; max-width:56ch; }
.story__copy p{ margin:0; }
.stats{
  grid-column:1 / -1; margin:0;
  display:grid; grid-template-columns:repeat(3,1fr);
  border-block:1px solid var(--line-light);
}
.stats div{ padding:2.2rem 0; text-align:center; }
.stats div + div{ border-left:1px solid var(--line-light); }
.stats dd{
  margin:0; order:-1; font-family:var(--serif); font-weight:300; font-variant-numeric:lining-nums;
  font-size:clamp(3rem,7vw,6rem); line-height:1;
}
.stats div{ display:flex; flex-direction:column; gap:.8rem; }
.stats dt{ color:var(--grey); }
.story__pics{
  grid-column:1 / -1; display:grid; grid-template-columns:4fr 3fr; gap:clamp(.6rem,1.2vw,1.2rem);
}
.story__pics figure{ margin:0; overflow:hidden; aspect-ratio:3/4; }
.story__pics figure:first-child{ aspect-ratio:4/4.4; }
.story__pics img{ width:100%; height:100%; object-fit:cover; object-position:50% 12%; filter:grayscale(1) contrast(1.04); }
@media (max-width:820px){
  .story__grid{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:1fr; }
  .stats div + div{ border-left:0; border-top:1px solid var(--line-light); }
  .story__pics{ grid-template-columns:1fr 1fr; }
  .story__pics figure,.story__pics figure:first-child{ aspect-ratio:3/4; }
}

/* =====================================================================
   ATELIER  (BYQ · Sticky Media Swap)
   ===================================================================== */
.atelier{
  background:var(--ink);
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  column-gap:clamp(2rem,5vw,5rem);
  width:min(100%,var(--maxw)); margin-inline:auto; padding-inline:var(--pad);
}
.atelier__intro{ padding-top:clamp(5rem,16vh,9rem); display:grid; gap:1.4rem; }
.atelier__intro .display em{ color:var(--bordo-light); }
.step{ display:grid; align-items:center; min-height:100vh; }
.entry{
  display:grid; grid-template-columns:auto 1fr; column-gap:clamp(1rem,2.4vw,1.75rem);
  align-items:start; text-align:left; padding:.5rem 0;
  color:rgba(255,255,255,.28); transition:color .5s var(--ease);
}
.entry:hover{ color:rgba(255,255,255,.55); }
.entry.is-active{ color:#fff; }
.atelier:not(.is-live) .entry{ color:#fff; }   /* no GSAP: every principle stays readable */
.entry__no{ display:inline-block; padding-top:.9em; transition:color .4s var(--ease); backface-visibility:hidden; }
.entry.is-active .entry__no{ color:var(--bordo-light); animation:numflip .55s var(--ease); }
@keyframes numflip{ from{ transform:rotateX(-90deg); } to{ transform:rotateX(0); } }
.entry__title{
  display:block; font-family:var(--serif); font-weight:300;
  font-size:clamp(2.1rem,1.1rem + 3.6vw,4.1rem); line-height:1.02; letter-spacing:-.02em;
}
.entry__line{ display:block; margin-top:.9rem; max-width:34ch; font-size:.98rem; line-height:1.6; opacity:.75; }
.atelier__stage{ position:relative; min-height:100%; }
.frame{
  position:sticky; top:84px; height:calc(100vh - 108px);
  overflow:hidden; isolation:isolate; transform:translateZ(0); background:var(--ink-2);
}
.frame img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.05); will-change:transform,clip-path,opacity;
}
.frame img + img{ opacity:0; }
@media (max-width:768px){
  .atelier{ display:block; position:relative; }
  .atelier__steps{ position:relative; z-index:1; }
  .atelier__intro{ padding-bottom:2rem; }
  .step{ min-height:92vh; align-items:end; padding-bottom:9vh; }
  .atelier__stage{ position:absolute; inset:0; }
  .frame{ top:84px; height:46vh; }
  .frame::after{ content:""; position:absolute; inset:0; background:linear-gradient(transparent 55%,rgba(10,10,10,.9)); z-index:5; }
}

/* =====================================================================
   CITIES BAND — the one full burgundy moment below the hero
   ===================================================================== */
.cities{ background:var(--bordo); overflow:hidden; padding-block:1.6rem; }
.cities__track{
  display:flex; align-items:center; gap:2.2rem; width:max-content;
  animation:marquee 32s linear infinite;
  font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(2rem,5vw,4.2rem); line-height:1; white-space:nowrap;
}
.cities__track i{ width:8px; height:8px; border:1px solid rgba(255,255,255,.6); transform:rotate(45deg); }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* =====================================================================
   LOOKBOOK  (BYQ · Curtain Image Reveal)
   ===================================================================== */
.lookbook{ background:var(--paper); color:var(--ink); padding-block:clamp(5rem,16vh,10rem); }
.lookbook__head{ display:grid; gap:1.4rem; margin-bottom:clamp(3rem,10vh,6rem); }
.lookbook__head .eyebrow i{ background:var(--bordo); }
.lookbook__head .display em{ color:var(--bordo); }
.curtains{ display:flex; align-items:flex-start; gap:clamp(1.25rem,4vw,3.5rem); max-width:64rem; margin-inline:auto; }
.curtains__col{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:clamp(3.5rem,10vh,6.5rem); }
.curtains__col--offset{ margin-top:clamp(5rem,24vh,11rem); }
.cur{ margin:0; width:100%; }
.cur--narrow{ width:84%; }
.cur--end{ align-self:flex-end; }
.cur__frame{
  position:relative; overflow:hidden; aspect-ratio:var(--ar); background:#e4e0da;
  transform:translateZ(0);
  transition:clip-path .9s cubic-bezier(.16,1,.3,1) var(--d,0s);
}
.js .cur[data-wipe="lr"] .cur__frame{ clip-path:inset(0 100% 0 0); }
.js .cur[data-wipe="tb"] .cur__frame{ clip-path:inset(0 0 100% 0); }
.js .cur[data-wipe="rl"] .cur__frame{ clip-path:inset(0 0 0 100%); }
.cur img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.04);
  transform:scale(1.25);
  transition:transform 1.05s cubic-bezier(.16,1,.3,1) var(--d,0s),filter .8s var(--ease);
}
.cur figcaption{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin-top:.7rem;
  font-family:var(--mono); font-size:.72rem; line-height:1; letter-spacing:.08em; text-transform:uppercase;
  opacity:0; transform:translateY(8px);
  transition:opacity .45s ease calc(var(--d,0s) + .7s),transform .55s cubic-bezier(.16,1,.3,1) calc(var(--d,0s) + .7s);
}
.cur figcaption span:first-child{ color:var(--bordo); font-variant-numeric:tabular-nums; white-space:nowrap; }
.cur figcaption span:last-child{ color:var(--grey); text-align:right; }
.js .cur.is-revealed .cur__frame{ clip-path:inset(0 0 0 0); }
.cur.is-revealed img{ transform:scale(1); }
.cur.is-revealed figcaption{ opacity:1; transform:none; }
@media (hover:hover){ .cur:hover img{ filter:none; } }
@media (max-width:44rem){
  .curtains{ flex-direction:column; gap:3.25rem; }
  .curtains__col{ width:100%; gap:3.25rem; }
  .curtains__col--offset{ margin-top:0; }
}

/* =====================================================================
   CONTACT + FOOTER
   ===================================================================== */
.contact{ background:var(--ink); padding-bottom:clamp(4rem,12vh,7rem); }
.contact__grid{ display:grid; gap:clamp(3rem,8vh,5rem); }
.contact__cols{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2rem; border-top:1px solid var(--line-dark); padding-top:2rem; }
.contact__mail{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .9rem; }
.contact__mail span{ user-select:all; }
.copy{ border:1px solid var(--line-dark); padding:.35rem .6rem; transition:border-color .3s,color .3s; }
.copy:hover{ border-color:var(--bordo-light); color:var(--bordo-light); }

/* ---------- contact form ---------- */
.form{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.6rem 2rem; }
.form__row{ display:grid; gap:.6rem; min-width:0; }
.form__row--wide{ grid-column:1 / -1; }
.form label{ opacity:.6; }
.form input,.form select,.form textarea{
  width:100%; font:inherit; font-size:1rem; color:#fff; background:transparent;
  border:0; border-bottom:1px solid var(--line-dark); border-radius:0; padding:.7rem 0;
  transition:border-color .3s;
}
.form__label{ opacity:.6; }

/* ---------- custom dropdown (contact topic) ---------- */
.dd{ position:relative; }
.dd__btn{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  font-size:1rem; text-align:left; padding:.7rem 0; border-bottom:1px solid var(--line-dark);
  transition:border-color .3s;
}
.dd__btn:hover,.dd__btn[aria-expanded="true"]{ border-bottom-color:var(--bordo-light); }
.dd__btn:focus-visible{ outline:none; border-bottom-color:var(--bordo-light); }
.dd__chev{ width:8px; height:8px; border-right:1px solid currentColor; border-bottom:1px solid currentColor;
  transform:translateY(-3px) rotate(45deg); transition:transform .35s var(--ease); flex:none; opacity:.7; }
.dd__btn[aria-expanded="true"] .dd__chev{ transform:translateY(2px) rotate(-135deg); }
.dd__list{
  position:absolute; left:0; right:0; top:calc(100% + .4rem); z-index:20;
  margin:0; padding:.4rem 0; list-style:none;
  background:var(--ink-2); border:1px solid var(--line-dark);
  box-shadow:0 18px 40px rgba(0,0,0,.55);
}
.dd__list:focus{ outline:none; }
.dd__list li{ padding:.75rem 1rem; cursor:pointer; font-size:.98rem; color:rgba(255,255,255,.82); display:flex; align-items:center; gap:.7rem; }
.dd__list li::before{ content:""; width:6px; height:6px; flex:none; background:transparent; }
.dd__list li[aria-selected="true"]{ color:#fff; }
.dd__list li[aria-selected="true"]::before{ background:var(--bordo-light); }
.dd__list li:hover,.dd__list li.is-focus{ background:rgba(107,20,36,.45); color:#fff; }
.form textarea{ resize:vertical; min-height:7rem; }
.form input:focus,.form select:focus,.form textarea:focus{ outline:none; border-bottom-color:var(--bordo-light); }
.form .is-invalid{ border-bottom-color:var(--bordo-light); }
.form__foot{ grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:1rem 2rem; }
.form__note{ margin:0; font-size:.92rem; color:rgba(255,255,255,.72); }
.btn{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  background:var(--bordo); color:#fff; padding:1.05rem 1.8rem; border:1px solid var(--bordo);
  transition:background .35s var(--ease),border-color .35s var(--ease);
}
.btn:hover{ background:transparent; border-color:#fff; }
@media (max-width:760px){ .form{ grid-template-columns:1fr; } }
.contact__cols p{ margin:0; }
.contact__cols .mono{ opacity:.55; margin-bottom:.8rem; }
.contact__cols a{ text-decoration:none; background:linear-gradient(var(--bordo-light),var(--bordo-light)) 0 100%/0 1px no-repeat; transition:background-size .4s var(--ease); }
.contact__cols a:hover{ background-size:100% 1px; }
@media (max-width:700px){ .contact__cols{ grid-template-columns:1fr; } }

.foot{
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding:1.6rem var(--pad); border-top:1px solid var(--line-dark);
  font-size:.74rem; color:rgba(255,255,255,.55);
}
.foot__nav{ display:flex; flex-wrap:wrap; gap:.4rem 1.6rem; }
.foot__nav a{ text-decoration:none; text-transform:uppercase; letter-spacing:.18em; font-size:.64rem; }
.foot__nav a:hover{ color:#fff; }

/* =====================================================================
   JOURNAL — index cards, filters and the article page
   ===================================================================== */
.jstart{ padding-bottom:clamp(3rem,8vh,5rem); }
.jstart .eyebrow,.related .eyebrow{ margin-bottom:1.6rem; }
.jall{ background:var(--paper); color:var(--ink); padding-block:clamp(3.5rem,10vh,6rem); }
.jall .eyebrow i{ background:var(--bordo); }

.jgrid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(1.4rem,2.4vw,2.4rem) clamp(1rem,1.6vw,1.6rem); }
.jgrid--pillars{ grid-template-columns:repeat(5,minmax(0,1fr)); }
.jgrid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:1100px){ .jgrid,.jgrid--pillars{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:760px){ .jgrid,.jgrid--pillars,.jgrid--3{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:440px){ .jgrid,.jgrid--pillars,.jgrid--3{ grid-template-columns:1fr; } }

.jcard{ display:grid; gap:.55rem; align-content:start; text-decoration:none; color:inherit; min-width:0; }
.jcard__img{ display:block; aspect-ratio:4/5; overflow:hidden; background:var(--ink-2); }
.jcard__img img{ width:100%; height:100%; object-fit:cover; object-position:50% 25%;
  filter:grayscale(1) contrast(1.04); transform:scale(1.02); transition:filter .7s var(--ease),transform 1.2s var(--ease); }
.jcard:hover .jcard__img img{ filter:none; transform:scale(1.06); }
.jcard__cat{ margin-top:.4rem; color:var(--bordo-light); }
.jall .jcard__cat{ color:var(--bordo); }
.jcard__title{ font-family:var(--serif); font-weight:400; font-size:clamp(1.25rem,1.6vw,1.5rem); line-height:1.15; text-wrap:balance; }
.jcard:hover .jcard__title{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; }
.jcard__ex{ font-size:.9rem; line-height:1.6; opacity:.72; }
.jcard__meta{ opacity:.55; }

.chips{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:clamp(2rem,6vh,3.5rem); }
.chip{ font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  padding:.65rem 1rem; border:1px solid var(--line-light); color:var(--ink); transition:background .3s,border-color .3s,color .3s; }
.chip:hover{ border-color:var(--bordo); }
.chip[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:#fff; }
.jcat + .jcat{ margin-top:clamp(3rem,8vh,5rem); }
.jcat__title{ margin:0 0 1.6rem; font-family:var(--serif); font-weight:300; font-size:clamp(1.8rem,3.4vw,2.8rem); line-height:1;
  padding-bottom:1rem; border-bottom:1px solid var(--line-light); }
.jcat[hidden]{ display:none; }

/* ---------- article ---------- */
.post-head{ padding-top:calc(68px + env(safe-area-inset-top,0px) + clamp(2.5rem,8vh,5rem)); padding-bottom:clamp(2rem,6vh,3.5rem); }
.post-head .wrap{ display:grid; gap:1.4rem; max-width:1100px; }
.crumbs{ display:flex; flex-wrap:wrap; gap:.6rem; opacity:.62; }
.crumbs a{ text-decoration:none; }
.crumbs a:hover{ color:var(--bordo-light); }
.post-head__title{ margin:0; font-family:var(--serif); font-weight:300; text-wrap:balance;
  font-size:clamp(2.4rem,6vw,5.4rem); line-height:1; letter-spacing:-.02em; }
.post-head__ex{ margin:0; max-width:60ch; font-size:1.1rem; line-height:1.7; color:rgba(255,255,255,.75); }
.post-head__meta{ margin:0; opacity:.55; }
.post-hero{ margin:0 auto; max-width:1100px; position:relative; z-index:1; }   /* sits over the top of the paper below */
.post-hero img{ width:100%; aspect-ratio:16/9; object-fit:cover; object-position:50% 22%; filter:grayscale(1) contrast(1.05); }
@media (max-width:700px){ .post-hero img{ aspect-ratio:4/5; } }
.post-body{ background:var(--paper); color:var(--ink); padding-block:clamp(3rem,8vh,5rem); margin-top:-8vw; padding-top:calc(8vw + clamp(3rem,8vh,5rem)); }
.post-layout{ display:grid; grid-template-columns:minmax(0,15rem) minmax(0,1fr); gap:clamp(2rem,5vw,5rem); max-width:1100px; align-items:start; }
.toc{ position:sticky; top:96px; display:grid; gap:.9rem; font-size:.9rem; }
.toc .mono{ margin:0; opacity:.6; }
.toc ol{ margin:0; padding:0; list-style:none; display:grid; gap:.55rem; counter-reset:toc; }
.toc li{ counter-increment:toc; display:grid; grid-template-columns:1.8rem 1fr; line-height:1.4; }
.toc li::before{ content:counter(toc,decimal-leading-zero); font-family:var(--mono); font-size:.68rem; color:var(--bordo); padding-top:.2em; }
.toc a{ text-decoration:none; color:#3f3d3a; }
.toc a:hover{ color:var(--bordo); }
@media (max-width:900px){
  .post-layout{ grid-template-columns:1fr; }
  .toc{ position:static; border:1px solid var(--line-light); padding:1.2rem; }
}

.prose{ max-width:68ch; font-size:1.08rem; line-height:1.85; color:#2b2927; }
.prose > *{ margin:0; }
.prose > * + *{ margin-top:1.15em; }
.prose h2{ margin-top:2.2em; font-family:var(--serif); font-weight:400; font-size:clamp(1.8rem,3vw,2.5rem); line-height:1.1; color:var(--ink); scroll-margin-top:96px; text-wrap:balance; }
.prose h3{ margin-top:1.8em; font-family:var(--serif); font-weight:500; font-size:clamp(1.3rem,2vw,1.6rem); line-height:1.2; color:var(--ink); scroll-margin-top:96px; }
.prose h2 + *,.prose h3 + *{ margin-top:.7em; }
.prose a{ color:var(--bordo); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.prose a:hover{ color:var(--ink); }
.prose a[target="_blank"]::after{ content:" ↗"; font-size:.8em; }
.prose strong{ font-weight:500; color:var(--ink); }
.prose ul,.prose ol{ padding-left:1.3rem; }
.prose li + li{ margin-top:.45em; }
.prose li::marker{ color:var(--bordo); }

.acc__h{ margin:0; font:inherit; }
.post-faq{ padding-top:0; }
.post-faq .acc{ max-width:1100px; }
.related{ padding-block:clamp(3.5rem,10vh,6rem); }

/* ---------- simple reveal for headings and copy ---------- */
.js .rv{ opacity:0; transform:translateY(18px); }
.js .rv.is-in{ opacity:1; transform:none; transition:opacity .9s var(--ease),transform .9s var(--ease); }

@media (prefers-reduced-motion:reduce){
  .js .rv{ opacity:1; transform:none; }
  .cities__track{ animation:none; }
  .js .cur[data-wipe] .cur__frame{ clip-path:inset(0 0 0 0); transition:none; }
  .cur img{ transform:none; transition:none; }
  .cur figcaption{ opacity:1; transform:none; transition:none; }
  .entry.is-active .entry__no{ animation:none; }
}

.notfound__links{ display:flex; flex-wrap:wrap; gap:1rem 2rem; margin:0; }

/* =====================================================================
   The collection — collection/ (grid on paper, each piece on black)
   Layout after the BYQ "buy" block: stage + thumbnails, sticky panel,
   size chips, one call to action, meta rows. Our type and colours.
   ===================================================================== */
.shop{ background:var(--paper); color:var(--ink); padding-block:clamp(3.5rem,10vh,6rem); }
.shop__grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1.5rem,4vw,3.5rem) clamp(1rem,3vw,2.5rem); }
.tile{ display:grid; gap:.45rem; color:inherit; text-decoration:none; align-content:start; }
.tile__pic{ margin:0 0 .5rem; aspect-ratio:3/4; overflow:hidden; background:#e9e4de; }
.tile__pic img{ width:100%; height:100%; object-fit:cover; object-position:50% 12%; transition:transform 1.2s var(--ease); }
.tile:hover .tile__pic img{ transform:scale(1.04); }
.tile__no{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--bordo); }
.tile__name{ font-family:var(--serif); font-size:clamp(1.35rem,2vw,1.7rem); line-height:1.15; }
.tile__meta{ font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; opacity:.6; }
.tile__meta em{ font-style:normal; opacity:1; color:var(--bordo); }
@media (max-width:820px){ .shop__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* one piece */
.piece{ background:var(--ink); color:#fff; padding-top:calc(68px + env(safe-area-inset-top,0px) + clamp(2rem,6vh,4rem)); padding-bottom:clamp(4rem,10vh,7rem); }
.piece__grid{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(2rem,5vw,5rem); align-items:start; }
.stage{ margin:0; aspect-ratio:4/5; overflow:hidden; background:#141414; position:relative; }
.stage img{ width:100%; height:100%; object-fit:cover; object-position:50% 8%; display:block; }
.thumbs{ display:flex; gap:.75rem; margin-top:1rem; flex-wrap:wrap; }
.thumb{ width:84px; height:84px; padding:0; border:1px solid rgba(255,255,255,.14); background:#0e0e11; cursor:pointer; opacity:.6; overflow:hidden; transition:opacity .4s var(--ease),border-color .4s var(--ease); }
.thumb img{ width:100%; height:100%; object-fit:cover; object-position:50% 10%; display:block; }
.thumb:hover{ opacity:1; }
.thumb[aria-pressed="true"]{ opacity:1; border-color:#fff; }
.buy{ position:sticky; top:calc(68px + 1.25rem); display:grid; gap:1.25rem; align-content:start; }
.buy .crumbs{ color:#fff; }
.buy .crumbs a:hover{ color:var(--bordo-light); }
.buy .eyebrow{ opacity:1; color:rgba(255,255,255,.6); }
.buy__title{ margin:0; font-family:var(--serif); font-weight:300; font-size:clamp(2.6rem,5vw,4.2rem); line-height:.98; letter-spacing:-.02em; text-wrap:balance; max-width:14ch; }
.buy__price{ display:flex; align-items:baseline; gap:.9rem; flex-wrap:wrap; }
.buy__price b{ font-family:var(--mono); font-weight:400; font-size:clamp(2rem,3.4vw,3.2rem); letter-spacing:-.04em; line-height:1; }
.buy__price span{ font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.6); }
.buy__lede{ margin:0; max-width:46ch; color:rgba(255,255,255,.72); line-height:1.65; }
.rule{ height:1px; background:rgba(255,255,255,.12); }
.opt{ display:flex; gap:.6rem; align-items:baseline; font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.6); }
.opt b{ font-weight:400; color:#fff; }
.opt a{ margin-left:auto; color:rgba(255,255,255,.6); text-underline-offset:3px; }
.opt a:hover{ color:#fff; }
.sizes{ border:0; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.6rem; }
.size{ position:relative; cursor:pointer; }
.size input{ position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; }
.size span{ display:block; min-width:3.6rem; padding:.65rem .8rem; text-align:center; border:1px solid rgba(255,255,255,.16); font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; color:rgba(255,255,255,.65); transition:border-color .4s var(--ease),color .4s var(--ease),background .4s var(--ease); }
.size:hover span{ color:#fff; border-color:rgba(255,255,255,.45); }
.size input:checked + span{ color:#fff; border-color:#fff; background:rgba(255,255,255,.06); }
.size input:focus-visible + span{ outline:1px solid var(--bordo-light); outline-offset:3px; }
.sizes.is-invalid span{ border-color:var(--bordo-light); }
.reserve{ display:grid; gap:1rem; }
.reserve .join__names{ gap:1.2rem; }
.reserve .join__field .btn{ flex:none; }
.reserve.is-done .sizes,.reserve.is-done .opt,.reserve.is-done .join__names,.reserve.is-done .join__field,.reserve.is-done .join__consent{ display:none; }
.meta{ display:grid; }
.meta__row{ display:flex; justify-content:space-between; align-items:baseline; gap:1.5rem; padding:1rem 0; border-top:1px solid rgba(255,255,255,.1); }
.meta__row span:first-child{ font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.6); white-space:nowrap; }
.meta__row span:last-child{ text-align:right; color:#fff; }

/* details on paper, under the piece */
.notes{ background:var(--paper); color:var(--ink); padding-block:clamp(3.5rem,9vh,6rem); }
.notes__grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(2rem,5vw,4rem); }
.notes h2{ margin:0 0 1rem; font-family:var(--serif); font-weight:400; font-size:1.6rem; }
.notes p{ margin:0 0 .9rem; color:#57534f; line-height:1.7; }
.notes ul{ margin:0; padding-left:1.1rem; color:#57534f; line-height:1.8; }
.sizetable{ width:100%; border-collapse:collapse; font-family:var(--mono); font-size:.76rem; }
.sizetable th{ text-align:left; font-weight:400; letter-spacing:.1em; text-transform:uppercase; color:var(--bordo); padding:.5rem 0; border-bottom:1px solid var(--line-light); }
.sizetable td{ padding:.5rem 0; border-bottom:1px solid var(--line-light); color:#2b2927; }
.pairs{ background:var(--paper); color:var(--ink); padding-block:clamp(2.5rem,7vh,4.5rem); border-top:1px solid var(--line-light); }
.pairs .eyebrow i{ background:var(--bordo); }
.pairs__grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1rem,3vw,2.5rem); margin-top:1.6rem; max-width:52rem; }

@media (max-width:900px){
  .piece__grid{ grid-template-columns:1fr; gap:2.5rem; }
  .buy{ position:static; }
  .notes__grid{ grid-template-columns:1fr; gap:2.2rem; }
}
@media (max-width:520px){
  .shop__grid{ grid-template-columns:1fr 1fr; gap:1.4rem .8rem; }
  .pairs__grid{ gap:.6rem; }
  .thumb{ width:64px; height:64px; }
  .size span{ min-width:3.1rem; padding:.6rem .5rem; }
}
/* lookbook photographs lead to the pieces */
a.cur__frame{ display:block; color:inherit; }
.cur figcaption a{ color:inherit; text-decoration:none; border-bottom:1px solid transparent; transition:color .3s,border-color .3s; }
.cur figcaption a:hover{ color:var(--bordo); border-bottom-color:var(--bordo); }
@media (max-width:520px){ .thumbs{ flex-wrap:nowrap; overflow-x:auto; padding-bottom:.3rem; scrollbar-width:none; } .thumbs::-webkit-scrollbar{ display:none; } .thumb{ flex:none; } }

/* =====================================================================
   The bag — a link in the header, a quiet page of its own (/bag)
   ===================================================================== */
.nav .nav__bag{ display:inline-flex; align-items:center; gap:.4rem; }
.nav__bag-n{ min-width:1.3rem; height:1.3rem; padding:0 .35rem; display:inline-grid; place-items:center; border:1px solid rgba(255,255,255,.4); border-radius:999px; font-family:var(--mono); font-size:.62rem; }
.nav__bag[hidden],.menu [data-bag][hidden]{ display:none !important; }
.size--stock span{ border-color:rgba(255,255,255,.5); color:#fff; }
.reserve.is-buy .join__names,.reserve.is-buy .join__consent,.reserve.is-buy .join__field input{ display:none; }
.reserve.is-buy .join__field{ border-bottom:0; padding-bottom:0; }
.reserve.is-buy .join__field .btn{ flex:1 1 auto; text-align:center; }
.reserve .join__note a{ color:#fff; text-underline-offset:3px; }

.bagpage{ background:var(--paper); color:var(--ink); min-height:70vh; padding-top:calc(68px + env(safe-area-inset-top,0px) + clamp(2rem,6vh,4rem)); padding-bottom:clamp(4rem,10vh,7rem); }
.bag__grid{ display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:clamp(2rem,5vw,5rem); align-items:start; }
.bag__title{ margin:0 0 2rem; font-family:var(--serif); font-weight:300; font-size:clamp(2.4rem,5vw,4rem); line-height:1; }
.bag__title em{ font-style:italic; color:var(--bordo); }
.bag__head{ display:grid; grid-template-columns:minmax(0,1fr) 7rem 6rem 2rem; gap:1rem; padding:0 0 .9rem; border-bottom:1px solid var(--line-light); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:#77736e; }
.bag__row{ display:grid; grid-template-columns:5.5rem minmax(0,1fr) 7rem 6rem 2rem; gap:1rem; align-items:center; padding:1.4rem 0; border-bottom:1px solid var(--line-light); }
.bag__pic{ display:block; aspect-ratio:3/4; background:#e9e4de; overflow:hidden; }
.bag__pic img{ width:100%; height:100%; object-fit:cover; object-position:50% 12%; display:block; }
.bag__what{ display:grid; gap:.3rem; }
.bag__name{ font-family:var(--serif); font-size:1.35rem; line-height:1.15; color:var(--ink); text-decoration:none; }
.bag__no{ font-family:var(--serif); font-style:italic; color:#57534f; }
.bag__size{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:#77736e; }
.bag__qty{ display:inline-flex; align-items:center; gap:.9rem; font-size:.85rem; }
.bag__qty button{ width:1.6rem; height:1.6rem; border:0; background:transparent; color:var(--ink); font:inherit; font-size:1rem; cursor:pointer; opacity:.6; }
.bag__qty button:hover{ opacity:1; }
.bag__price{ font-size:.85rem; text-align:right; }
.bag__remove{ border:0; background:transparent; font-size:1.3rem; line-height:1; color:#77736e; cursor:pointer; }
.bag__remove:hover{ color:var(--bordo); }
.bag__ship{ margin-top:3.5rem; }
.bag__ship h2,.bag__summary h2{ margin:0 0 1rem; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; font-weight:400; color:var(--ink); }
.bag__ship ul{ margin:0; padding-left:1.1rem; color:#57534f; line-height:1.9; font-size:1.02rem; }
.bag__summary{ background:#efebe6; padding:clamp(1.4rem,3vw,2.2rem); display:grid; gap:1.2rem; position:sticky; top:calc(68px + 1.25rem); }
.bag__fine{ margin:0; color:#77736e; font-size:.9rem; line-height:1.6; }
.bag__total{ display:flex; justify-content:space-between; align-items:baseline; padding:1.2rem 0; border-top:1px solid var(--line-light); border-bottom:1px solid var(--line-light); }
.bag__total .mono{ font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; }
.bag__total b{ font-family:var(--mono); font-weight:400; font-size:1.3rem; }
.bag__go{ text-align:center; }
.bag__go[aria-disabled="true"]{ opacity:.4; pointer-events:none; }
.bag__back{ color:var(--ink); font-size:.9rem; text-underline-offset:3px; }
.bag__closed,.bag__empty{ display:none; }
.bag__empty p,.bag__closed p{ margin:0 0 1.4rem; color:#57534f; font-size:1.1rem; line-height:1.7; }
.bag__closed a{ color:var(--bordo); }
.bagpage.is-closed .bag__closed{ display:block; }
.bagpage.is-closed .bag__table,.bagpage.is-closed .bag__summary,.bagpage.is-closed .bag__ship{ display:none; }
.bagpage.is-empty:not(.is-closed) .bag__empty{ display:block; }
.bagpage.is-empty .bag__table{ display:none; }
.bagpage.is-busy .bag__table{ opacity:.5; pointer-events:none; }
@media (max-width:900px){
  .bag__grid{ grid-template-columns:1fr; }
  .bag__summary{ position:static; }
  .bag__head{ display:none; }
  .bag__row{ grid-template-columns:4.5rem minmax(0,1fr) auto; grid-template-areas:"pic what remove" "pic qty price"; row-gap:.6rem; }
  .bag__pic{ grid-area:pic; } .bag__what{ grid-area:what; } .bag__qty{ grid-area:qty; } .bag__price{ grid-area:price; } .bag__remove{ grid-area:remove; justify-self:end; }
}


/* ============================================================
   the atelier films — a wall of silent loops, one page per film
   ============================================================ */
/* the atelier films */
.page-head--sub{ padding-top:clamp(4rem,10vh,6rem); }
.films{ background:var(--ink); color:#fff; padding-bottom:clamp(4rem,10vh,7rem); }
.films__grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.6rem; }
.filmtile{ position:relative; display:block; aspect-ratio:16/9; overflow:hidden; background:#111; color:#fff; text-decoration:none; outline-offset:3px; }
.filmtile video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.6s var(--ease); }
.filmtile:hover video{ transform:scale(1.04); }
.filmtile__cap{ position:absolute; inset:0; display:grid; place-content:center; justify-items:center; text-align:center; gap:.45rem; padding:1rem 1.4rem;
  background:rgba(10,10,10,.48); opacity:0; transition:opacity .55s var(--ease); }
.filmtile:hover .filmtile__cap, .filmtile:focus-visible .filmtile__cap{ opacity:1; }
.filmtile__cap .mono{ font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.72); }
.filmtile__t{ font-family:var(--serif); font-weight:300; font-size:clamp(1.35rem,2.1vw,1.9rem); line-height:1.12; }
.filmtile__t em{ font-style:italic; color:var(--bordo-light); }
@media (hover:none){ .filmtile__cap{ opacity:1; background:linear-gradient(to top, rgba(10,10,10,.7), rgba(10,10,10,.1)); align-content:end; } }
@media (max-width:900px){ .films__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .films__grid{ grid-template-columns:1fr; gap:.5rem; } }

/* one film */
.film{ background:var(--ink); color:#fff; padding-top:calc(68px + env(safe-area-inset-top,0px)); }
.film__stage{ position:relative; margin:0; background:#000; aspect-ratio:16/9; max-height:86vh; overflow:hidden; }
.film__stage video{ display:block; width:100%; height:100%; object-fit:cover; }
.film__pause{ position:absolute; right:clamp(.8rem,3vw,2rem); bottom:clamp(.8rem,3vw,2rem); padding:.55rem .9rem; font-size:.6rem; letter-spacing:.18em; text-transform:uppercase;
  color:#fff; background:rgba(10,10,10,.45); border:1px solid rgba(255,255,255,.45); cursor:pointer; backdrop-filter:blur(6px); transition:background .3s; }
.film__pause:hover{ background:rgba(10,10,10,.75); }
.film__head{ display:grid; gap:1.1rem; padding-top:clamp(2.2rem,6vh,4rem); padding-bottom:clamp(1.4rem,4vh,2.6rem); }
.film__head h1{ font-size:clamp(2.2rem,5vw,4.2rem); line-height:1.05; }
.film__head h1 em{ font-style:italic; color:var(--bordo-light); }
.film__body{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:clamp(2rem,6vw,6rem); align-items:start; padding-bottom:clamp(3rem,8vh,5rem); }
.film__text p{ margin:0 0 1.2rem; max-width:58ch; font-size:1.05rem; line-height:1.8; color:rgba(255,255,255,.8); }
.film__text p:first-child{ font-family:var(--serif); font-size:1.45rem; line-height:1.45; color:#fff; }
.film__piece{ display:grid; gap:.55rem; align-content:start; justify-items:start; max-width:300px; border-top:1px solid var(--line-dark); padding-top:1.2rem; }
.film__piece img{ width:100%; height:auto; aspect-ratio:548/694; object-fit:cover; object-position:50% 12%; display:block; }
.film__piece-k{ font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.55); margin:0; }
.film__piece-no{ font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--bordo-light); margin:.4rem 0 0; }
.film__piece-name{ font-family:var(--serif); font-weight:300; font-size:1.5rem; line-height:1.15; margin:0 0 .4rem; }
.film__piece-name a{ color:inherit; text-decoration:none; }
.film__piece-name a:hover{ text-decoration:underline; text-underline-offset:.2em; }
.film__nav{ display:flex; justify-content:space-between; align-items:center; gap:1rem; border-top:1px solid var(--line-dark); padding-top:1.4rem; padding-bottom:clamp(3rem,8vh,5rem); font-family:var(--serif); font-size:1.15rem; }
.film__nav a{ color:inherit; text-decoration:none; display:inline-flex; gap:.6rem; align-items:baseline; }
.film__nav a:hover{ text-decoration:underline; text-underline-offset:.2em; }
.film__nav .mono{ font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.6); }
@media (max-width:820px){
  .film__body{ grid-template-columns:1fr; }
  .film__piece{ max-width:none; grid-template-columns:120px 1fr; column-gap:1.2rem; }
  .film__piece img{ grid-row:1 / span 4; }
  .film__nav{ flex-wrap:wrap; font-size:1rem; }
}

/* the bag sits on paper: the header reads in ink until the page scrolls and the bar turns dark */
body[data-page="bag"] .head:not(.is-solid){ color:var(--ink); }
body[data-page="bag"] .head:not(.is-solid) .mark b{ color:var(--bordo); }
body[data-page="bag"] .head:not(.is-solid) .nav a[aria-current="page"]{ box-shadow:inset 0 -1px 0 var(--bordo); }
body[data-page="bag"] .head:not(.is-solid) .nav .nav__cta{ border-color:var(--bordo); color:var(--ink); }
body[data-page="bag"] .head:not(.is-solid) .nav .nav__cta:hover{ background:var(--bordo); color:#fff; }
body[data-page="bag"] .head:not(.is-solid) .nav__bag-n{ background:var(--bordo); color:#fff; }
/* buttons on paper: pressed state is an ink outline with ink text, never white on white */
.bagpage .btn:hover,.bagpage .btn:focus-visible,.bagpage .btn:active{ background:transparent; border-color:var(--ink); color:var(--ink); }