/* ============================================================
   judithvanmourik | interior architecture — homepage
   ============================================================ */

:root{
  --ink:      #0b0b0b;
  --ink-2:    #121212;
  --paper:    #f1eee8;
  --bone:     #d8d2c7;
  --white:    #ffffff;

  --fg:       #f4f2ee;
  --fg-mute:  rgba(244,242,238,.52);
  --line:     rgba(244,242,238,.16);

  --dark-fg:      #14110d;
  --dark-fg-mute: rgba(20,17,13,.56);
  --dark-line:    rgba(20,17,13,.16);

  --display: "Bodoni Moda", "Didot", "Times New Roman", serif;
  --sans:    "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(20px, 5vw, 80px);
  --ease:   cubic-bezier(.22,.61,.36,1);
  --slow:   1.1s var(--ease);
}

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }

body{
  margin:0;
  background:var(--ink);
  color:var(--fg);
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(15px,1.05vw,17px);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{ display:block; max-width:100%; height:auto }
a{ color:inherit; text-decoration:none }
h1,h2,h3{ margin:0; font-weight:400 }
p{ margin:0 0 1.2em }
p:last-child{ margin-bottom:0 }

.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;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--paper); color:var(--ink); padding:.8rem 1.2rem;
}
.skip:focus{ left:0 }

:focus-visible{ outline:1px solid var(--fg); outline-offset:4px }

/* ── shared bits ───────────────────────────────────────────── */

.label{
  font-size:.66rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--fg-mute);
  margin:0 0 1.4rem;
  font-weight:400;
}
.label--light{ color:rgba(255,255,255,.78) }
.label--dark{ color:var(--dark-fg-mute) }

.arrow{
  display:inline-block;
  font-size:.68rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  padding-bottom:.45em;
  border-bottom:1px solid var(--line);
  transition:border-color .5s var(--ease), color .5s var(--ease);
}
.arrow:hover{ border-color:currentColor }

.btn{
  display:inline-block;
  font-size:.68rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  padding:1.15em 2.4em;
  border:1px solid var(--line);
  transition:background .6s var(--ease), color .6s var(--ease), border-color .6s var(--ease);
}
.btn:hover{ background:var(--fg); color:var(--ink); border-color:var(--fg) }

em{ font-style:italic }

/* reveal on scroll */
.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity 1.1s var(--ease), transform 1.1s var(--ease);
}
.reveal.is-in{ opacity:1; transform:none }

/* ============================================================
   NAV
   ============================================================ */

.nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  gap:2rem;
  padding:clamp(18px,2.4vw,30px) var(--gutter);
  transition:padding .6s var(--ease), background .6s var(--ease);
}
.nav::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to bottom, rgba(6,6,6,.62), rgba(6,6,6,0));
  opacity:1; transition:opacity .6s var(--ease);
}
.nav.is-stuck{
  padding-top:clamp(12px,1.6vw,18px);
  padding-bottom:clamp(12px,1.6vw,18px);
  /* solid instead of backdrop-filter: re-blurring the page behind a fixed bar
     on every scroll frame made scrolling stutter on Retina screens */
  background:rgba(11,11,11,.95);
}
.nav.is-stuck::before{ opacity:0 }

.nav__logo{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(.92rem,1.15vw,1.08rem);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:#fff;
}

.nav__links{ display:none; gap:2.2rem }
.nav__links a{
  font-size:.66rem; letter-spacing:.22em; text-transform:uppercase;
  color:#fff; opacity:.72; transition:opacity .4s var(--ease);
}
.nav__links a:hover{ opacity:1 }

.nav__toggle{
  display:flex; align-items:center; gap:.85rem;
  background:none; border:0; padding:.4rem 0; cursor:pointer;
  font-family:var(--sans); font-size:.66rem; letter-spacing:.22em;
  text-transform:uppercase; color:#fff;
}
.nav__bars{ display:block; width:26px }
.nav__bars i{
  display:block; height:1px; background:#fff; margin:6px 0;
  transition:transform .5s var(--ease), opacity .4s var(--ease);
}
.nav__toggle[aria-expanded="true"] .nav__bars i:first-child{ transform:translateY(3.5px) rotate(11deg) }
.nav__toggle[aria-expanded="true"] .nav__bars i:last-child{ transform:translateY(-3.5px) rotate(-11deg) }

/* ── menu overlay ─────────────────────────────────────────── */

.menu{
  position:fixed; inset:0; z-index:55;
  background:var(--ink);
  opacity:0; pointer-events:none;
  transition:opacity .7s var(--ease);
}
.menu.is-open{ opacity:1; pointer-events:auto }

.menu__inner{
  height:100%;
  display:flex; flex-direction:column; justify-content:flex-end; gap:3rem;
  padding:8rem var(--gutter) clamp(32px,6vh,64px);
}

.menu__nav{ display:flex; flex-direction:column }
.menu__nav a{
  position:relative;
  font-family:var(--display);
  font-size:clamp(2.4rem,8vw,5.6rem);
  line-height:1.06;
  letter-spacing:-.01em;
  padding:.1em 0;
  opacity:0; transform:translateY(24px);
  transition:opacity .8s var(--ease), transform .8s var(--ease), color .4s var(--ease);
}
.menu.is-open .menu__nav a{ opacity:1; transform:none }
.menu.is-open .menu__nav a:nth-child(1){ transition-delay:.06s }
.menu.is-open .menu__nav a:nth-child(2){ transition-delay:.12s }
.menu.is-open .menu__nav a:nth-child(3){ transition-delay:.18s }
.menu.is-open .menu__nav a:nth-child(4){ transition-delay:.24s }
.menu.is-open .menu__nav a:nth-child(5){ transition-delay:.30s }
.menu__nav a:hover{ font-style:italic }
.menu__nav a span{
  font-family:var(--sans); font-size:.6rem; letter-spacing:.24em;
  color:var(--fg-mute); vertical-align:super; margin-right:1.2rem;
}

.menu__meta{ font-size:.82rem; color:var(--fg-mute); line-height:1.9 }
.menu__meta address{ font-style:normal; margin-bottom:.8rem }
.menu__meta a{ display:block; transition:color .4s var(--ease) }
.menu__meta a:hover{ color:var(--fg) }

/* ============================================================
   HERO
   ============================================================ */

.hero{
  position:relative;
  height:100svh; min-height:560px;
  overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:0 var(--gutter) clamp(28px,5vh,56px);
}

.hero__slides{ position:absolute; inset:0 }
.hero__slide{
  position:absolute; inset:0; margin:0;
  opacity:0;
  transition:opacity 2.2s var(--ease);
}
.hero__slide.is-active{ opacity:1 }
.hero__slide img{
  width:100%; height:100%; object-fit:cover;
  /* a slide can set --pos to keep its subject in frame (portrait photos) */
  object-position:var(--pos, 50% 50%);
  transform:scale(1.04);
  filter:brightness(.92) saturate(.94);
}
.hero__slide.is-active img{
  animation:drift 11s linear forwards;
}
/* portrait screens (phones) only show a narrow strip of a wide photo:
   --pos-m on a slide picks which strip */
@media (max-aspect-ratio:3/4){
  .hero__slide img{ object-position:var(--pos-m, var(--pos, 50% 50%)) }
}
@keyframes drift{
  from{ transform:scale(1.02) }
  to  { transform:scale(1.11) }
}

/* a wide shot that stays zoomed out */
.hero__slide--wide img{ transform:none }
.hero__slide--wide.is-active img{ animation-name:drift-soft }
@keyframes drift-soft{
  from{ transform:scale(1) }
  to  { transform:scale(1.04) }
}

/* project pages on phones: the opening photos are mostly landscape shots, and a
   full-height portrait crop shows only a narrow strip, enlarged until it goes soft.
   A lower hero that keeps still shows more of each photo, at full sharpness. */
@media (max-width:699px){
  .hero--project{ height:64svh; min-height:460px }
  .hero--project .hero__slide img,
  .hero--project .hero__slide.is-active img{ transform:none; animation:none }
}

.hero__veil{
  position:absolute; inset:0;
  background:
    linear-gradient(to right,  rgba(6,6,6,.74) 0%,  rgba(6,6,6,.38) 40%, rgba(6,6,6,.04) 76%),
    linear-gradient(to bottom, rgba(6,6,6,.58) 0%,  rgba(6,6,6,.06) 26%, rgba(6,6,6,.14) 54%, rgba(6,6,6,.82) 100%);
}

.hero__body{
  position:relative; z-index:2;
  padding-bottom:clamp(30px,6vh,68px);
}
.hero__body .label{ margin-bottom:clamp(14px,2.4vh,28px) }
.hero__title{
  font-family:var(--display);
  font-size:clamp(3rem,9.6vw,9rem);
  line-height:.9;
  letter-spacing:-.03em;
  color:#fff;
}
.hero__title span{ display:block }
.hero__title em{ font-style:italic; font-weight:400 }

.hero__line{
  margin-top:clamp(16px,2.4vh,28px);
  max-width:28ch;
  font-size:clamp(.95rem,1.2vw,1.1rem);
  color:rgba(255,255,255,.82);
}

.hero__foot{
  position:relative; z-index:2;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:end;
  gap:1rem 2rem;
  padding-top:2rem;
  border-top:1px solid rgba(255,255,255,.18);
}
.hero__caption{
  margin:0;
  font-size:.66rem; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(255,255,255,.72);
  transition:opacity .5s var(--ease);
}
.hero__caption.is-fading{ opacity:0 }

.hero__dots{ display:flex; gap:.55rem; grid-column:2; grid-row:1 }
.hero__dots button{
  width:26px; height:2px; padding:0; border:0; cursor:pointer;
  background:rgba(255,255,255,.28);
  transition:background .5s var(--ease);
}
.hero__dots button[aria-selected="true"]{ background:#fff }

.hero__scroll{
  grid-column:1 / -1;
  display:none;
  align-items:center; gap:.7rem;
  font-size:.62rem; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(255,255,255,.6);
}
.hero__scroll i{
  width:1px; height:34px; background:currentColor; display:block;
  animation:cue 2.4s var(--ease) infinite;
  transform-origin:top;
}
@keyframes cue{
  0%,100%{ transform:scaleY(.3); opacity:.4 }
  50%    { transform:scaleY(1);  opacity:1 }
}

/* ============================================================
   STATEMENT / STUDIO
   ============================================================ */

.statement{
  padding:clamp(88px,15vh,190px) var(--gutter) clamp(64px,10vh,130px);
}
.statement__head{
  font-family:var(--display);
  font-size:clamp(2.9rem,9.5vw,9rem);
  line-height:.94;
  letter-spacing:-.025em;
  margin-bottom:clamp(48px,8vh,110px);
}
.statement__head em{ font-style:italic; color:var(--fg-mute) }

.statement__grid{
  display:grid;
  gap:clamp(36px,5vw,80px);
}
.statement__figure{ margin:0 }
.statement__figure img{
  width:100%; aspect-ratio:3/4; object-fit:cover;
  filter:grayscale(.15);
}
.statement__figure figcaption{
  margin-top:.9rem;
  font-size:.62rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--fg-mute);
}
.statement__text .lead{
  font-family:var(--display);
  font-size:clamp(1.25rem,2.1vw,1.72rem);
  line-height:1.42;
  margin-bottom:1.6em;
}
.statement__text p{ color:var(--fg-mute); max-width:56ch }
.statement__text .arrow{ margin-top:1.4rem; margin-right:1.6rem; color:var(--fg) }

/* ── album (about page) ───────────────────────────────────── */

.album{ padding:0 var(--gutter) clamp(88px,15vh,190px) }
.album__item{ margin:0 auto; max-width:560px }
.album__item img{
  width:100%; height:auto;
  filter:grayscale(.15);
}
.album__item figcaption{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:.6rem 1.4rem;
  margin-top:.9rem;
  font-size:.62rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--fg-mute);
}
.album__item figcaption .arrow{ color:var(--fg); font-size:.62rem }

/* Project photographs — full-width landscapes alternating with portrait pairs. */
.project-gallery{
  width:calc(100% - 2 * var(--gutter));
  max-width:1000px;
  margin:0 auto clamp(64px,10vh,120px);
  display:grid;
  gap:10px;
}
.project-gallery__row{ display:flex; gap:10px; align-items:flex-start }
.project-gallery__item{ flex:var(--photo-ratio) 1 0%; min-width:0; margin:0 }
.project-gallery__item img{ display:block; width:100%; height:auto }
.project-gallery__row--portrait{ width:calc((100% - 10px) / 2); margin-inline:auto }
/* a lone portrait fills its half-width row (a flex-grow below 1 would leave it short and off-centre) */
.project-gallery__row--portrait .project-gallery__item{ flex-grow:1 }
@media(max-width:600px){
  .project-gallery{ gap:8px }
  .project-gallery__row{ flex-direction:column; gap:8px }
  .project-gallery__item{ flex:none; width:100% }
  .project-gallery__row--portrait{ width:100% }
}

/* Project photographs placed as on the previous site: a collage that scales with the
   page on a desktop; on a phone landscapes full width, portraits and small ones two side by side. */
.collage{
  width:min(calc(100% - 2 * var(--gutter)), var(--collage-w));
  margin:0 auto clamp(64px,10vh,120px);
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-flow:row dense;
  gap:8px;
}
.collage__item{
  position:relative; margin:0; overflow:hidden;
  grid-column:span 2;
  aspect-ratio:var(--ar);
}
.collage__item--small{ grid-column:span 1 }
/* a pair of portraits: the same 2:3 frame, so the two line up */
.collage__item--portrait{ grid-column:span 1; aspect-ratio:2 / 3 }
/* a photo shown twice on the desktop collage: once is enough on a phone */
.collage__item--repeat{ display:none }
.collage__item img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:var(--pos, 50% 50%);
}
/* a spot that was a slideshow: one photograph at a time */
.collage__item[data-slides] img{ opacity:0; transition:opacity 1.4s var(--ease) }
.collage__item[data-slides] img.is-active{ opacity:1 }
@media (min-width:900px){
  .collage{ display:block; position:relative; aspect-ratio:var(--collage-ratio) }
  .collage__item--repeat{ display:block }
  .collage__item{
    position:absolute;
    left:var(--x); top:var(--y); width:var(--w); height:var(--h);
    aspect-ratio:auto;
  }
}

/* Project slideshow — one photograph at a time, swipe or use the arrows */
.project-slides{
  width:calc(100% - 2 * var(--gutter));
  max-width:1200px;
  margin:0 auto clamp(64px,10vh,120px);
}
.project-slides__track{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.project-slides__track::-webkit-scrollbar{ display:none }
.project-slides__track:focus-visible{ outline-offset:-1px }
.project-slides__item{
  flex:0 0 100%; margin:0;
  height:clamp(320px,78svh,860px);
  scroll-snap-align:center;
}
.project-slides__item img{ width:100%; height:100%; object-fit:contain }
.project-slides__nav{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  margin-top:1.2rem;
  font-size:.64rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--fg-mute);
}
.project-slides__nav p{ margin:0 }
.project-slides__nav span{ color:var(--fg) }
.project-slides__nav button{
  background:none; border:0; border-bottom:1px solid var(--line);
  padding:0 0 .45em; cursor:pointer;
  font-family:var(--sans); font-size:.68rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--fg);
  transition:border-color .5s var(--ease), opacity .5s var(--ease);
}
.project-slides__nav button:hover{ border-color:currentColor }
.project-slides__nav button:disabled{ opacity:.3; cursor:default }

/* ============================================================
   WORK — sticky stack
   ============================================================ */

.work__intro{ padding:clamp(48px,8vh,110px) var(--gutter) clamp(36px,6vh,70px) }
.work__head{
  font-family:var(--display);
  font-size:clamp(2.4rem,6.5vw,6rem);
  line-height:1;
  letter-spacing:-.02em;
}
.work__head em{ font-style:italic; color:var(--fg-mute) }

.stack{ position:relative }

.project{
  position:sticky; top:0;
  z-index:var(--z);
  height:100svh; min-height:540px;
  overflow:hidden;
  background:var(--ink);
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows:1fr;
}

.project__media{ position:relative; overflow:hidden }
.project__media img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.02);
  transition:transform 1.6s var(--ease);
}
.project:hover .project__media img{ transform:scale(1.055) }
.project__media--b{ display:none }

.project__scrim{
  position:absolute; inset:0; z-index:2;
  background:linear-gradient(to top, rgba(6,6,6,.82) 0%, rgba(6,6,6,.3) 38%, rgba(6,6,6,.05) 70%);
  pointer-events:none;
}

.project__body{
  position:absolute; z-index:3;
  left:var(--gutter); right:var(--gutter);
  bottom:clamp(36px,7vh,88px);
}
.project__meta{
  display:flex; align-items:baseline; gap:1.1rem;
  font-size:.64rem; letter-spacing:.26em; text-transform:uppercase;
  color:rgba(255,255,255,.66);
  margin-bottom:.9rem;
}
.project__meta span{
  font-family:var(--display); font-size:.9rem; letter-spacing:.06em;
  color:#fff;
}
.project__title{
  font-family:var(--display);
  font-size:clamp(2.7rem,9vw,8rem);
  line-height:.9;
  letter-spacing:-.025em;
  color:#fff;
  margin-bottom:1.1rem;
}
.project__note{
  font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.62);
  margin-bottom:1.1rem;
}
.project__body .arrow{ color:#fff; border-color:rgba(255,255,255,.4) }

.work__more{
  position:relative; z-index:20;
  background:var(--ink);
  padding:clamp(56px,10vh,130px) var(--gutter);
  text-align:center;
}

/* ============================================================
   THREE HOTELS — side by side (swipe row on phones)
   ============================================================ */

.hotels{
  padding:clamp(64px,10vh,140px) 0 clamp(24px,4vh,56px);
  border-top:1px solid var(--line);
}
.hotels__top{ padding:0 var(--gutter) clamp(36px,6vh,70px) }
.hotels__head{
  font-family:var(--display);
  font-size:clamp(2.4rem,6.5vw,6rem);
  line-height:1;
  letter-spacing:-.02em;
}
.hotels__head em{ font-style:italic; color:var(--fg-mute) }

.hotels__row{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:78%;
  gap:clamp(12px,1.6vw,28px);
  padding:0 var(--gutter);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-padding:0 var(--gutter);
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.hotels__row::-webkit-scrollbar{ display:none }

.hotel{ display:block; scroll-snap-align:start }
.hotel__media{ margin:0 0 1.3rem; overflow:hidden; background:var(--ink-2) }
.hotel__media img{
  width:100%; height:auto; aspect-ratio:3/4; object-fit:cover;
  filter:grayscale(.1);
  transition:transform 1.6s var(--ease), filter .8s var(--ease);
}
.hotel:hover .hotel__media img{ transform:scale(1.045); filter:none }
.hotel__meta{
  display:flex; align-items:baseline; gap:1rem;
  font-size:.62rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--fg-mute);
  margin-bottom:.7rem;
}
.hotel__meta span{
  font-family:var(--display); font-size:.9rem; letter-spacing:.06em;
  color:var(--fg);
}
.hotel__title{
  font-family:var(--display);
  font-size:clamp(1.7rem,2.8vw,2.6rem);
  line-height:1.02;
  letter-spacing:-.015em;
  margin-bottom:.6rem;
}
.hotel__note{
  font-size:.62rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--fg-mute);
  margin-bottom:1.1rem;
}
.hotel:hover .arrow{ border-color:currentColor }

/* ============================================================
   PRESS
   ============================================================ */

.press{
  position:relative; z-index:20;
  background:var(--ink);
  padding:clamp(64px,10vh,140px) 0 clamp(72px,12vh,160px);
  border-top:1px solid var(--line);
}
.press__top{ padding:0 var(--gutter) clamp(40px,6vh,72px) }
.press__head{
  font-family:var(--display);
  font-size:clamp(2.4rem,6.5vw,6rem);
  line-height:1;
  letter-spacing:-.02em;
  margin-bottom:1.4rem;
}
.press__head em{ font-style:italic; color:var(--fg-mute) }
.press__intro{ max-width:52ch; color:var(--fg-mute) }
.press__intro em{ color:var(--fg) }

/* ── award: the nomination on press.html and its pop-up (main.js) ── */

.nomination{
  display:grid; gap:1.6rem clamp(36px,5vw,80px);
  margin:0 var(--gutter) clamp(56px,9vh,110px);
  padding:clamp(32px,5vh,56px) 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.nomination[hidden]{ display:none }
.nomination__title{
  font-family:var(--display);
  font-size:clamp(2rem,4.6vw,4rem);
  line-height:1.02;
  letter-spacing:-.02em;
  margin:0;
}
.nomination__title em{ font-style:italic; color:var(--fg-mute) }
.nomination__text{ max-width:58ch }
.nomination__text p{ margin:0 0 1em; color:var(--fg-mute) }
.nomination__text p:first-child{
  font-family:var(--display);
  font-size:clamp(1.25rem,2.1vw,1.72rem);
  line-height:1.42;
  color:var(--fg);
}
.nomination__text .nomination__vote{ margin:1.8rem 0 }

.award{
  position:fixed; inset:0; z-index:90;
  display:flex; align-items:flex-end; justify-content:center;
}
.award[hidden]{ display:none }
.award__scrim{
  position:absolute; inset:0;
  background:rgba(6,6,6,.62);
  opacity:0; transition:opacity .7s var(--ease);
}
.award__panel{
  position:relative;
  width:100%; max-width:560px; max-height:100%; overflow-y:auto;
  padding:clamp(28px,5vw,48px);
  padding-bottom:calc(clamp(28px,5vw,48px) + env(safe-area-inset-bottom, 0px));
  background:var(--paper); color:var(--dark-fg);
  opacity:0; transform:translateY(24px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.award.is-open .award__scrim{ opacity:1 }
.award.is-open .award__panel{ opacity:1; transform:none }
.award__panel p{ margin:0 0 1em; color:var(--dark-fg-mute) }
.award__title{
  font-family:var(--display);
  font-size:clamp(1.9rem,4vw,2.8rem);
  line-height:1.04;
  letter-spacing:-.02em;
  margin:0 0 1.2rem;
  color:var(--dark-fg);
}
.award__title em{ font-style:italic; color:var(--dark-fg-mute) }
.award__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:1.2rem 2rem; margin-top:1.8rem }
.award .btn{ background:var(--dark-fg); color:var(--paper); border-color:var(--dark-fg) }
.award .btn:hover{ background:transparent; color:var(--dark-fg) }
.award .arrow{ border-color:var(--dark-line) }
.award .arrow:hover{ border-color:currentColor }
.award__close{
  position:absolute; top:clamp(14px,2.4vw,22px); right:clamp(16px,2.6vw,26px);
  background:none; border:0; padding:.4rem 0; cursor:pointer;
  font-family:var(--sans); font-size:.62rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--dark-fg-mute);
  transition:color .4s var(--ease);
}
.award__close:hover{ color:var(--dark-fg) }
.award :focus-visible{ outline-color:var(--dark-fg) }

@media (min-width:700px){
  .award{ align-items:center; padding:var(--gutter) }
  .award__panel{ padding-bottom:clamp(28px,5vw,48px) }
}
@media (min-width:1000px){
  .nomination{ grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); align-items:start }
}

.marquee{
  overflow:hidden;
  padding:clamp(20px,3vh,36px) 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.marquee__track{
  display:flex; align-items:center; gap:2.4rem;
  width:max-content;
  animation:slide 46s linear infinite;
}
.marquee__track span{
  font-family:var(--display);
  font-size:clamp(1.5rem,3.4vw,3.1rem);
  line-height:1.1;
  white-space:nowrap;
  color:var(--fg-mute);
}
@keyframes slide{ to{ transform:translateX(-50%) } }

.awards{
  list-style:none; margin:0;
  padding:clamp(40px,6vh,80px) var(--gutter) 0;
}
.awards li{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:.2rem 1.6rem;
  padding:1.5rem 0;
  border-bottom:1px solid var(--line);
}
.awards__year{
  font-family:var(--display); font-size:1.15rem;
  grid-row:1 / span 2;
}
.awards__name{ font-size:.98rem }
.awards__for{
  font-size:.62rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--fg-mute);
}

.press__more{ padding:clamp(32px,5vh,56px) var(--gutter) 0 }

.press--awards .awards{ padding-top:0 }

/* ── homepage: a magazine quote and the latest covers ─────── */

.quote{
  margin:0;
  padding:clamp(56px,10vh,120px) var(--gutter) 0;
}
.quote p{
  max-width:20ch;
  font-family:var(--display);
  font-size:clamp(1.9rem,4.4vw,4rem);
  line-height:1.08;
  letter-spacing:-.015em;
  margin-bottom:1.4rem;
}
.quote em{ color:var(--fg-mute) }
.quote cite{
  font-style:normal;
  font-size:.64rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--fg-mute);
}
.quote cite a{
  border-bottom:1px solid var(--line);
  padding-bottom:.35em;
  transition:border-color .5s var(--ease), color .5s var(--ease);
}
.quote cite a:hover{ color:var(--fg); border-color:currentColor }

.covers{
  list-style:none; margin:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(28px,5vh,48px) clamp(12px,1.6vw,28px);
  padding:clamp(48px,8vh,96px) var(--gutter) 0;
}
.cover a{ display:block }
.cover img{
  width:100%; height:auto; aspect-ratio:3/4;
  object-fit:contain; object-position:left bottom;
  margin-bottom:1rem;
}
.cover__pub{
  display:block;
  font-family:var(--display);
  font-size:clamp(1.15rem,1.7vw,1.5rem);
  line-height:1.1;
  margin-bottom:.4rem;
}
.cover__title{
  display:block;
  font-size:.6rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--fg-mute);
}

/* ── press clippings ──────────────────────────────────────── */

.clips{
  list-style:none; margin:0;
  display:grid;
  gap:clamp(40px,6vh,64px) clamp(16px,2vw,32px);
  padding:clamp(48px,8vh,110px) var(--gutter) 0;
}

/* phone: cover beside text — stacked from 700px up */
.clip{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1fr);
  gap:1.1rem;
  align-items:start;
  align-content:start;
}

/* covers stand whole on one baseline — never cropped */
.clip__cover{ margin:0; aspect-ratio:3/4; overflow:hidden }
.clip__cover img{
  width:100%; height:100%;
  object-fit:contain; object-position:left bottom;
  transform-origin:left bottom;
  transition:transform 1.6s var(--ease);
}
.clip:has(.clip__title a):hover .clip__cover img{ transform:scale(1.03) }

.clip__meta{
  display:flex; align-items:baseline; gap:.9rem;
  font-size:.6rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--fg-mute);
  margin-bottom:.7rem;
}
.clip__meta span{
  font-family:var(--display); font-size:.86rem; letter-spacing:.06em;
  color:var(--fg);
}

.clip__title{
  font-family:var(--display);
  font-size:clamp(1.4rem,2.1vw,1.9rem);
  line-height:1.05;
  letter-spacing:-.01em;
  margin-bottom:.6rem;
}
/* whole card is the hit area for the article link */
.clip__title a::after{ content:""; position:absolute; inset:0; z-index:1 }
.clip__title a:focus-visible{ outline:none }
.clip__title a:focus-visible::after{ outline:1px solid var(--fg); outline-offset:8px }

.clip__sub{
  font-size:.62rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--fg-mute);
  margin-bottom:.9rem;
}
.clip__text{
  font-size:.86rem; line-height:1.6;
  color:var(--fg-mute);
  max-width:40ch;
  margin-bottom:1.1rem;
}

.clip__links{ display:flex; flex-wrap:wrap; gap:.8rem 1.4rem; padding-top:.2rem }
.clip__links a{ position:relative; z-index:2 }
.clip:has(.clip__title a):hover .clip__links span.arrow{ border-color:currentColor }

/* ── press features: the spread, the cover laid on top, the quote ── */

.features{
  list-style:none; margin:0;
  display:grid;
  gap:clamp(72px,12vh,150px) clamp(28px,3.6vw,72px);
  padding:clamp(56px,9vh,120px) var(--gutter) 0;
}
.feature{ position:relative }

.feature__spread{ margin:0; overflow:hidden; background:var(--ink-2) }
.feature__spread img{ width:100%; height:auto; transition:transform 1.6s var(--ease) }
.feature:has(.feature__title a):hover .feature__spread img{ transform:scale(1.025) }

/* phone: cover beside the title, quote below */
.feature__body{
  display:grid;
  grid-template-columns:minmax(0,.5fr) minmax(0,1fr);
  grid-template-areas:"cover head" "text text";
  column-gap:clamp(16px,2.2vw,36px);
}
.feature__body--flat{ grid-template-columns:minmax(0,1fr); grid-template-areas:"head" "text" }

.feature__cover{
  grid-area:cover; align-self:start;
  position:relative; z-index:2;
  margin:calc(clamp(36px,4.6vw,76px) * -1) 0 0 clamp(12px,1.8vw,28px);
  box-shadow:0 30px 50px -18px rgba(0,0,0,.75);
}
.feature__cover img{ width:100% }
.feature__head{ grid-area:head; padding-top:1.4rem }
.feature__text{ grid-area:text; padding-top:1.3rem }

.feature__title{
  font-family:var(--display);
  font-size:clamp(1.7rem,2.7vw,2.6rem);
  line-height:1.02;
  letter-spacing:-.015em;
  margin-bottom:.6rem;
}
/* whole feature is the hit area for the article link */
.feature__title a::after{ content:""; position:absolute; inset:0; z-index:1 }
.feature__title a:focus-visible{ outline:none }
.feature__title a:focus-visible::after{ outline:1px solid var(--fg); outline-offset:8px }
.feature .clip__sub{ margin-bottom:0 }

.feature__quote{ margin:0 0 1.3rem }
.feature__quote p{
  font-family:var(--display);
  font-size:clamp(1.1rem,1.45vw,1.36rem);
  line-height:1.42;
  max-width:42ch;
}
.feature:has(.feature__title a):hover .clip__links span.arrow{ border-color:currentColor }

.press__top--more{ padding-top:clamp(96px,15vh,180px); padding-bottom:0 }
.press__top--more + .clips{ padding-top:clamp(12px,2vh,24px) }

/* ============================================================
   FEED
   ============================================================ */

.feed{
  position:relative; z-index:20;
  background:var(--ink);
  padding:clamp(64px,10vh,140px) 0 clamp(72px,12vh,150px);
  border-top:1px solid var(--line);
}
.feed__top{ padding:0 var(--gutter) clamp(36px,6vh,64px) }
.feed__head{
  font-family:var(--display);
  font-size:clamp(2.1rem,5.6vw,5rem);
  line-height:1.02;
  letter-spacing:-.02em;
  margin-bottom:1.4rem;
}
.feed__head em{ font-style:italic; color:var(--fg-mute) }

.feed__rail{ overflow:hidden; padding:.4rem 0 }
.feed__track{
  display:flex; gap:clamp(8px,1vw,16px);
  width:max-content;
  animation:slide 60s linear infinite;
}
.feed__rail[data-dir="-1"] .feed__track{ animation-direction:reverse }
.feed__track figure{ margin:0; flex:0 0 auto }
.feed__track img{
  width:clamp(180px,24vw,340px);
  aspect-ratio:1/1;
  object-fit:cover;
  filter:grayscale(.1);
  transition:filter .6s var(--ease);
}
.feed__rail:hover .feed__track{ animation-play-state:paused }
.feed__track img:hover{ filter:none }

/* ============================================================
   CONTACT
   ============================================================ */

.contact{
  position:relative; z-index:20;
  background:var(--paper);
  color:var(--dark-fg);
  padding:clamp(56px,8vh,110px) var(--gutter) clamp(44px,6vh,80px);
}
.contact__head{
  font-family:var(--display);
  font-size:clamp(1.5rem,2.8vw,2.5rem);
  line-height:1.12;
  letter-spacing:-.02em;
  max-width:26ch;
  margin-bottom:clamp(32px,5vh,64px);
}
.contact__head em{ font-style:italic; color:var(--dark-fg-mute) }
/* on the contact page itself the line is the page headline, so it stays large */
.contact.page-top .contact__head{
  font-size:clamp(1.9rem,4.6vw,4.1rem);
  line-height:1.08;
  max-width:19ch;
  margin-bottom:clamp(48px,8vh,110px);
}

.contact__grid{
  display:grid;
  gap:clamp(40px,5vw,90px);
  padding-top:clamp(32px,5vh,56px);
  border-top:1px solid var(--dark-line);
}
.contact__block p{ color:var(--dark-fg-mute); max-width:40ch }
.contact__block address{ font-style:normal; line-height:1.9; color:var(--dark-fg-mute) }
.contact__links{ margin-top:1.1rem; line-height:2 }
.contact__links a{
  border-bottom:1px solid var(--dark-line);
  transition:border-color .4s var(--ease);
  color:var(--dark-fg);
}
.contact__links a:hover{ border-color:currentColor }

.signup{
  display:flex; flex-wrap:wrap; gap:.6rem;
  margin-top:1.6rem;
}
.signup input{
  flex:1 1 220px;
  min-height:52px;
  padding:.9rem 1.1rem;
  border:1px solid var(--dark-line);
  background:transparent;
  font-family:var(--sans); font-size:.92rem; color:var(--dark-fg);
  border-radius:0;
}
.signup input::placeholder{ color:rgba(20,17,13,.42) }
.signup input:focus{ outline:none; border-color:var(--dark-fg) }
.signup button{
  min-height:52px;
  padding:0 1.9rem;
  border:1px solid var(--dark-fg);
  background:var(--dark-fg); color:var(--paper);
  font-family:var(--sans); font-size:.68rem; letter-spacing:.22em;
  text-transform:uppercase; cursor:pointer;
  transition:background .5s var(--ease), color .5s var(--ease);
}
.signup button:hover{ background:transparent; color:var(--dark-fg) }
.signup__msg{
  flex:1 0 100%; margin:.3rem 0 0;
  font-size:.74rem; letter-spacing:.06em; color:var(--dark-fg-mute);
  min-height:1.2em;
}

.foot{
  position:relative; z-index:20;
  background:var(--paper);
  color:var(--dark-fg-mute);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.6rem 2rem;
  padding:0 var(--gutter) clamp(28px,4vh,48px);
  font-size:.64rem; letter-spacing:.2em; text-transform:uppercase;
}
.foot p{ margin:0 }

/* ============================================================
   SUBPAGES
   ============================================================ */

/* no hero behind the nav, so keep it solid from the start */
.page .nav{
  /* solid instead of backdrop-filter: re-blurring the page behind a fixed bar
     on every scroll frame made scrolling stutter on Retina screens */
  background:rgba(11,11,11,.95);
}
.page .nav::before{ opacity:0 }

.nav__links a[aria-current="page"]{
  opacity:1;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.7em;
}
.menu__nav a[aria-current="page"]{ font-style:italic }

/* first section of a subpage clears the fixed nav */
.page-top{
  padding-top:clamp(128px,20vh,220px);
  border-top:0;
}

.foot--dark{
  background:var(--ink);
  color:var(--fg-mute);
  padding-top:clamp(28px,4vh,48px);
  border-top:1px solid var(--line);
}

/* ============================================================
   SHOP
   ============================================================ */

.nav__bag{
  margin-left:auto;
  background:none; border:0; padding:.4rem 0; cursor:pointer;
  font-family:var(--sans); font-size:.66rem; letter-spacing:.22em;
  text-transform:uppercase; color:#fff;
  white-space:nowrap;
}
.nav__bag span{ font-family:var(--display); font-size:.86rem; letter-spacing:.06em; margin-left:.3em }

:where(button).btn{ font-family:var(--sans); background:none; color:inherit; cursor:pointer }
.btn--solid{ background:var(--fg); color:var(--ink); border-color:var(--fg) }
.btn--solid:hover{ background:transparent; color:var(--fg) }
.btn:disabled{ background:transparent; color:var(--fg-mute); border-color:var(--line); cursor:default; pointer-events:none }

/* ── filters ──────────────────────────────────────────────── */

.filters{ display:flex; flex-wrap:wrap; gap:.8rem 1.6rem; margin-top:1.8rem }
.filters button{
  background:none; border:0; border-bottom:1px solid transparent;
  padding:0 0 .45em; cursor:pointer;
  font-family:var(--sans); font-size:.68rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--fg-mute);
  transition:color .5s var(--ease), border-color .5s var(--ease);
}
.filters button:hover{ color:var(--fg) }
.filters button[aria-pressed="true"]{ color:var(--fg); border-color:currentColor }
.filters sup{ font-size:.52rem; letter-spacing:.1em; margin-left:.35em }

/* ── grid of pieces ───────────────────────────────────────── */

.shop-grid{
  list-style:none; margin:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(40px,6vh,72px) clamp(12px,2vw,32px);
  padding:0 var(--gutter);
}

/* the portfolio grid ends the section, so it carries the space below */
.folio-grid{ padding-bottom:clamp(88px,15vh,190px) }

.piece{ position:relative }
.piece[hidden]{ display:none }

.piece__media{
  position:relative;
  margin:0 0 1rem;
  aspect-ratio:3/4;
  overflow:hidden;
  background:var(--ink-2);
}
.piece__media img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(.15) brightness(.94);
  transition:transform 1.6s var(--ease), opacity .9s var(--ease), filter .8s var(--ease);
}
.piece__media img + img{ opacity:0 }
.piece:hover .piece__media img{ transform:scale(1.045); filter:none }
.piece:hover .piece__media img + img{ opacity:1 }

.piece__meta{
  display:flex; align-items:baseline; gap:.9rem;
  font-size:.6rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--fg-mute);
  margin-bottom:.6rem;
}
.piece__meta span{
  font-family:var(--display); font-size:.86rem; letter-spacing:.06em;
  color:var(--fg);
}
.piece__title{
  font-family:var(--display);
  font-size:clamp(1.3rem,2.1vw,1.9rem);
  line-height:1.05;
  letter-spacing:-.01em;
  margin:0;
}
/* whole card is the hit area */
.piece__title a::after{ content:""; position:absolute; inset:0; z-index:1 }
.piece__title a:focus-visible{ outline:none }
.piece__title a:focus-visible::after{ outline:1px solid var(--fg); outline-offset:8px }

.shop__ask{
  font-family:var(--display);
  font-size:clamp(1.25rem,2.1vw,1.72rem);
  line-height:1.42;
  margin:0 auto 1.6rem;
  max-width:26ch;
}

/* ── product page ─────────────────────────────────────────── */

.product{
  display:grid;
  gap:clamp(32px,5vw,80px);
  padding-left:var(--gutter); padding-right:var(--gutter);
  padding-bottom:clamp(16px,3vh,40px);
}

/* phone: swipe through the photographs */
.product__gallery{
  display:flex; gap:10px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-padding:0 var(--gutter);
  margin:0 calc(var(--gutter) * -1);
  padding:0 var(--gutter);
  scrollbar-width:none;
}
.product__gallery::-webkit-scrollbar{ display:none }
.product__gallery figure{ margin:0; flex:0 0 86%; scroll-snap-align:start }
.product__gallery figure:only-child{ flex-basis:100% }
.product__gallery img{ width:100%; aspect-ratio:4/5; object-fit:cover }

.product__count{
  margin:.9rem 0 0;
  font-size:.62rem; letter-spacing:.24em;
  color:var(--fg-mute);
}
.product__count span{ color:var(--fg) }

.product__info .label a{ transition:color .4s var(--ease) }
.product__info .label a:hover{ color:var(--fg) }

.product__title{
  font-family:var(--display);
  font-size:clamp(2.5rem,5vw,4.6rem);
  line-height:.95;
  letter-spacing:-.025em;
  margin-bottom:1rem;
}
.product__kind{
  font-size:.66rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--fg-mute);
  margin-bottom:1.8rem;
}
.product__price{
  font-family:var(--display);
  font-size:clamp(1.4rem,2vw,1.8rem);
  margin-bottom:.2rem;
}
.product__stock{
  font-size:.62rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--fg-mute);
  margin-bottom:1.6rem;
}
.product__actions{ display:flex; flex-wrap:wrap; gap:10px }
.product__actions .btn{ flex:1 1 180px; text-align:center }

.product__text{ margin:clamp(36px,5vh,56px) 0 0 }
.product__text p{ color:var(--fg-mute); max-width:52ch }
.product__text .product__lead{
  font-family:var(--display);
  font-size:clamp(1.15rem,1.7vw,1.45rem);
  line-height:1.45;
  color:var(--fg);
}

/* folds: details, delivery, bespoke */
.folds{ margin-top:clamp(28px,4vh,44px); border-top:1px solid var(--line) }
.fold{ border-bottom:1px solid var(--line) }
.fold summary{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.05rem 0;
  list-style:none; cursor:pointer;
  font-size:.64rem; letter-spacing:.24em; text-transform:uppercase;
}
.fold summary::-webkit-details-marker{ display:none }
.fold summary::after{
  content:"+";
  font-family:var(--display); font-size:1.25rem; line-height:1; letter-spacing:0;
  transition:transform .5s var(--ease);
}
.fold[open] summary::after{ transform:rotate(45deg) }
.fold > p{ margin:0; padding-bottom:1.3rem; max-width:52ch; font-size:.9rem; color:var(--fg-mute) }

.specs{ margin:0; padding-bottom:1rem }
.specs div{
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);
  gap:1rem;
  padding:.45rem 0;
}
.specs dt{
  font-size:.6rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--fg-mute);
  padding-top:.25em;
}
.specs dd{ margin:0; font-size:.9rem }

/* ── story below a piece ──────────────────────────────────── */

.story{ padding-top:clamp(56px,10vh,130px) }
.story__chapter{ padding:0 var(--gutter) clamp(28px,5vh,56px) }
.story__head{
  font-family:var(--display);
  font-size:clamp(2.1rem,5.6vw,5rem);
  line-height:1.02;
  letter-spacing:-.02em;
  margin-bottom:1.2rem;
}
.story__head em{ font-style:italic; color:var(--fg-mute) }
.story__text{ max-width:44ch; color:var(--fg-mute) }

.story__wide{ margin:0 0 clamp(64px,11vh,150px) }
.story__wide img{ width:100%; aspect-ratio:4/5; object-fit:cover }

.story__pair{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(8px,1.4vw,24px);
  padding:0 var(--gutter);
  margin-bottom:clamp(64px,11vh,150px);
}
.story__pair figure{ margin:0 }
.story__pair img{ width:100%; aspect-ratio:3/4; object-fit:cover }

/* ── bag drawer ───────────────────────────────────────────── */

.bag{ position:fixed; inset:0; z-index:80 }
.bag__scrim{
  position:absolute; inset:0;
  background:rgba(6,6,6,.62);
  opacity:0; transition:opacity .6s var(--ease);
}
.bag__panel{
  position:absolute; top:0; right:0; bottom:0;
  width:min(460px,100%);
  display:flex; flex-direction:column;
  background:var(--paper); color:var(--dark-fg);
  transform:translateX(100%);
  transition:transform .7s var(--ease);
}
.bag.is-open .bag__scrim{ opacity:1 }
.bag.is-open .bag__panel{ transform:none }
.bag :focus-visible{ outline-color:var(--dark-fg) }

.bag__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:clamp(18px,2.4vw,30px) clamp(20px,2.6vw,36px);
  border-bottom:1px solid var(--dark-line);
}
.bag__head .label{ margin:0 }
.bag__close{
  background:none; border:0; padding:.4rem 0; cursor:pointer;
  font-family:var(--sans); font-size:.66rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--dark-fg);
}

.bag__items{
  list-style:none; margin:0;
  flex:1; overflow-y:auto; overscroll-behavior:contain;
  padding:0 clamp(20px,2.6vw,36px);
}
.bag__item{
  display:grid;
  grid-template-columns:72px minmax(0,1fr) auto;
  gap:1.1rem;
  padding:1.3rem 0;
  border-bottom:1px solid var(--dark-line);
}
.bag__item img{ width:72px; aspect-ratio:3/4; object-fit:cover }
.bag__name{
  font-family:var(--display); font-size:1.15rem; line-height:1.15;
  margin:0 0 .25rem;
}
.bag__kind{
  font-size:.56rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--dark-fg-mute);
  margin:0 0 .8rem;
}
.bag__qty{ display:inline-flex; align-items:center; border:1px solid var(--dark-line) }
.bag__qty button{
  width:32px; height:32px; padding:0;
  background:none; border:0; cursor:pointer;
  font-family:var(--sans); font-size:.9rem; color:var(--dark-fg);
}
.bag__qty button:disabled{ opacity:.28; cursor:default }
.bag__qty output{ min-width:22px; text-align:center; font-size:.82rem }
.bag__side{
  display:flex; flex-direction:column; align-items:flex-end; justify-content:space-between;
  gap:.8rem;
}
.bag__price{ margin:0; font-size:.9rem; white-space:nowrap }
.bag__remove{
  background:none; border:0; border-bottom:1px solid var(--dark-line);
  padding:0 0 .3em; cursor:pointer;
  font-family:var(--sans); font-size:.56rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--dark-fg-mute);
  transition:color .4s var(--ease), border-color .4s var(--ease);
}
.bag__remove:hover{ color:var(--dark-fg); border-color:currentColor }

.bag__empty{ flex:1; padding:2rem clamp(20px,2.6vw,36px) }
.bag__empty p{ color:var(--dark-fg-mute) }
.bag__empty .arrow{ border-color:var(--dark-line) }

.bag__foot{
  padding:1.4rem clamp(20px,2.6vw,36px) calc(1.4rem + env(safe-area-inset-bottom));
  border-top:1px solid var(--dark-line);
}
.bag__total{
  display:flex; justify-content:space-between; align-items:baseline;
  font-family:var(--display); font-size:1.35rem;
  margin-bottom:.2rem;
}
.bag__note{ font-size:.74rem; line-height:1.55; color:var(--dark-fg-mute); margin-bottom:1rem }
.bag__checkout{
  width:100%; min-height:56px;
  margin-bottom:1rem;
  border:1px solid var(--dark-fg);
  background:var(--dark-fg); color:var(--paper);
  font-family:var(--sans); font-size:.68rem; letter-spacing:.22em;
  text-transform:uppercase; cursor:pointer;
  transition:background .5s var(--ease), color .5s var(--ease);
}
.bag__checkout:hover{ background:transparent; color:var(--dark-fg) }

/* ============================================================
   BREAKPOINTS
   ============================================================ */

/* small phones: logo, bag and menu share one line — the menu keeps only its bars */
@media (max-width:479px){
  .nav:has(.nav__bag){ gap:1.25rem }
  .nav__bag ~ .nav__toggle .nav__toggle-label{
    position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
  }
}

@media (min-width:700px){
  .hero__foot{ grid-template-rows:auto auto }
  .statement__grid{ grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr) }
  .contact__grid{ grid-template-columns:1fr 1fr }
  .awards li{ grid-template-columns:auto minmax(0,1fr) auto; align-items:baseline }
  .awards__year{ grid-row:auto }
  .awards__for{ text-align:right }
  .clips{ grid-template-columns:repeat(4,minmax(0,1fr)) }
  .clip{ grid-template-columns:1fr; gap:1.3rem }

  .feature__body{
    grid-template-columns:minmax(0,.4fr) minmax(0,1fr);
    grid-template-areas:"cover head" "cover text";
  }
  .feature__body--flat{ grid-template-columns:minmax(0,1fr); grid-template-areas:"head" "text" }
  .feature__text{ padding-top:1.1rem }

  .hotels__row{ grid-auto-columns:44% }
  .covers{ grid-template-columns:repeat(4,minmax(0,1fr)) }

  .shop-grid{ grid-template-columns:repeat(3,minmax(0,1fr)) }
  .story__wide img{ aspect-ratio:16/9 }
}

@media (min-width:1000px){
  .nav__links{ display:flex; margin-left:auto }
  .nav__toggle{ display:none }
  .nav__bag{ margin-left:0 }

  .project{ grid-template-columns:minmax(0,1.32fr) minmax(0,1fr) }
  .project__media--b{ display:block }
  .project__scrim{
    right:auto; width:calc(100% / 2.32 * 1.32);
    background:linear-gradient(to top, rgba(6,6,6,.86) 0%, rgba(6,6,6,.28) 42%, rgba(6,6,6,0) 74%);
  }
  .project__body{ right:auto; max-width:min(52vw,760px) }

  .statement__figure{ position:sticky; top:14vh }

  .product{ grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); align-items:start }
  .product__gallery{ display:grid; gap:16px; overflow:visible; margin:0; padding:0 }
  .product__gallery img{ aspect-ratio:auto }
  .product__count{ display:none }

  .story__chapter{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:clamp(36px,5vw,80px);
    align-items:end;
  }
  .story__chapter .label{ grid-column:1 / -1 }
  .story__head{ margin:0 }

  /* all three hotels in one view */
  .hotels__row{
    grid-auto-flow:row;
    grid-template-columns:repeat(3,minmax(0,1fr));
    overflow:visible;
  }
  .hotel:nth-child(2){ transition-delay:.1s }
  .hotel:nth-child(3){ transition-delay:.2s }
  .cover:nth-child(2){ transition-delay:.08s }
  .cover:nth-child(3){ transition-delay:.16s }
  .cover:nth-child(4){ transition-delay:.24s }

  .features{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  /* the right-hand column steps down: a magazine rhythm, not a table */
  .feature:nth-child(even){ margin-top:clamp(96px,16vh,200px) }

  .clip:nth-child(4n+2){ transition-delay:.08s }
  .clip:nth-child(4n+3){ transition-delay:.16s }
  .clip:nth-child(4n+4){ transition-delay:.24s }

  /* portfolio: the 3 x 4 grid from Judith's brief (4 columns, 3 rows) */
  .folio-grid{ grid-template-columns:repeat(4,minmax(0,1fr)) }
  .folio-grid .piece:nth-child(4n+2){ transition-delay:.08s }
  .folio-grid .piece:nth-child(4n+3){ transition-delay:.16s }
  .folio-grid .piece:nth-child(4n+4){ transition-delay:.24s }
}

/* the details stay beside the photographs — only where they fit on screen */
@media (min-width:1000px) and (min-height:1000px){
  .product__info{ position:sticky; top:12vh }
}

/* ============================================================
   MOTION PREFERENCES
   ============================================================ */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none }
  .hero__slide.is-active img{ animation:none }
  .marquee__track,.feed__track{ animation:none; width:100%; overflow-x:auto }
  .project{ position:relative }
}