/* =============================================================================
   ARDEN NOVIK - fm-elianvalen. Original stylesheet (likeness rebuild).
   Gallery-white fashion storefront: 60px fixed white header with a hairline-free
   edge, 100vh shell hero with a cut-out model group standing over a full-bleed
   ghost wordmark, 478/802 two-column product rail, full-width four-up product
   rows broken by lifestyle wells, full-bleed two-up collection band, three-column
   information rows, a full-bleed campaign band and a black footer whose wordmark
   fills the rail.
   Fonts: Afacad (display 400/600) + Sarabun (body 400/500/600), self-hosted.
   ============================================================================= */

/* ---------- fonts ---------- */
@font-face {
  font-family: "Afacad";
  src: url("../fonts/afacad-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: "Sarabun";
  src: url("../fonts/sarabun-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: "Sarabun";
  src: url("../fonts/sarabun-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: "Sarabun";
  src: url("../fonts/sarabun-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: optional;
}

/* ---------- tokens ---------- */
:root {
  /* palette: neutral monochrome, no chromatic accent (the reference has none) */
  --ink: #12110f;          /* Studio Ink   - all type, fills, footer canvas */
  --ink-soft: #63625e;     /* Slate Ash    - body copy on light */
  --ink-kicker: #57554f;   /* Kicker Ash   - 10/11px uppercase labels */
  --paper: #ffffff;        /* Page White   */
  --shell: #f5f4f0;        /* Shell        - hero band, collection wells */
  --bone: #f1f0ec;         /* Bone         - product wells, panels */
  --fog: #dcdad3;          /* Fog          - hairlines, control borders */
  --fog-soft: #e7e5de;     /* Fog Soft     - inner dividers */
  --on-ink: #ffffff;       /* type on ink  */
  --on-ink-soft: #efeee9;  /* links on ink */
  --on-ink-mute: #b7b5ac;  /* placeholder on ink */

  --rad-chip: 4px;
  --rad-panel: 8px;
  --rad-pill: 999px;

  --rail: 1440px;          /* 1280 content inside 80px gutters */
  --pad-x: 80px;

  --fs-display: 46.5px;    /* = Inter 40 cap height in Afacad */
  --lh-display: 44px;
  --fs-h4: 30px;           /* = Inter 26 */
  --lh-h4: 28.6px;
  --fs-h5: 28px;           /* = Inter 24 */
  --lh-h5: 26.4px;
  --fs-sub: 25.5px;        /* = Inter 22 */
  --lh-sub: 30.8px;

  --rev-dur: 900ms;
  --rev-ease: cubic-bezier(.22, 1, .36, 1);
  --hov-dur: 600ms;
  --hov-ease: cubic-bezier(.2, .7, .3, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Sarabun", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 22.4px;
  letter-spacing: -.02em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: 0; background: none; }
input { font: inherit; }
h1, h2, h3, h4, h5, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.sr {
  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: 12px; top: -60px; z-index: 60;
  background: var(--ink); color: var(--on-ink); padding: 10px 16px;
  font-size: 13px; transition: top 160ms ease-out;
}
.skip:focus { top: 12px; }

/* ---------- shared type classes ---------- */
.disp {
  font-family: "Afacad", "Sarabun", sans-serif;
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: -.02em;
  color: var(--ink);
}
.disp-h4 { font-family: "Afacad", sans-serif; font-weight: 400; font-size: var(--fs-h4); line-height: var(--lh-h4); letter-spacing: -.04em; }
.disp-h5 { font-family: "Afacad", sans-serif; font-weight: 400; font-size: var(--fs-h5); line-height: var(--lh-h5); letter-spacing: -.04em; }
.disp-sub { font-family: "Afacad", sans-serif; font-weight: 400; font-size: var(--fs-sub); line-height: var(--lh-sub); letter-spacing: -.01em; }
.lede { font-size: 16px; line-height: 22.4px; color: var(--ink-soft); }
.kicker {
  font-size: 11px; font-weight: 500; line-height: 15.4px;
  letter-spacing: .11em; text-transform: uppercase; color: var(--ink-kicker);
}
.kicker-sm { font-size: 10px; font-weight: 500; line-height: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-kicker); }

/* ---------- text link with the wipe underline ---------- */
.tl {
  position: relative; display: inline-block; align-self: start;
  padding-bottom: 10px; overflow: hidden;
  font-size: 16px; line-height: 22.4px; letter-spacing: -.01em; color: var(--ink);
}
.tl::before, .tl::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: currentColor;
  transition: transform var(--hov-dur) var(--hov-ease);
}
.tl::after { transform: translateX(-101%); }
.tl:hover::before, .tl:focus-visible::before { transform: translateX(101%); }
.tl:hover::after, .tl:focus-visible::after { transform: translateX(0); }
.tl--light { color: var(--on-ink); }

/* ---------- header ---------- */
.hdr {
  position: fixed; inset: 0 0 auto; z-index: 40;
  height: 60px; background: var(--paper);
  display: flex; align-items: center;
  padding: 0 var(--pad-x);
}
.hdr__mark {
  flex: 0 0 auto;
  font-family: "Afacad", sans-serif; font-weight: 600; font-size: 20px;
  line-height: 1; letter-spacing: -.04em; color: var(--ink);
}
.hdr__nav { display: flex; align-items: center; gap: 32px; margin-left: 53px; }
.hdr__link {
  position: relative; font-size: 14px; line-height: 16.8px; letter-spacing: -.02em;
  padding-left: 16px;
}
.hdr__link::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 4px; height: 4px; margin-top: -2px; background: var(--ink);
  transform: rotate(45deg) translate(-8px, 0); opacity: 0;
  transition: opacity 260ms var(--hov-ease), transform 260ms var(--hov-ease);
}
.hdr__link:hover::before, .hdr__link:focus-visible::before { opacity: 1; transform: rotate(45deg) translate(0, 0); }
.hdr__right { margin-left: auto; display: flex; align-items: center; gap: 42px; }
.chip {
  display: inline-flex; align-items: center; gap: 10px;
  height: 39px; padding: 0 11px; border: 1px solid var(--fog);
  border-radius: var(--rad-chip); background: var(--paper);
  font-size: 14px; letter-spacing: 0; color: var(--ink);
}
.chip__flag { width: 21px; height: 16px; flex: 0 0 auto; }
.chip__caret { width: 14px; height: 14px; color: var(--ink-soft); }
.cart--top { display: none; }
.cart { font-size: 14px; line-height: 16.8px; letter-spacing: -.02em; white-space: nowrap; }
.cart b { font-weight: 400; }
.hdr__burger { display: none; }

/* ---------- hero ---------- */
.hero {
  position: relative; overflow: hidden;
  min-height: 100vh; background: var(--shell);
  /* the reference hero block takes half of any viewport height past 900 */
  padding: max(168px, calc(168px + (100vh - 900px) / 2)) var(--pad-x) 0;
}
.hero__grid {
  position: relative; z-index: 2;
  max-width: 1340px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 193px; gap: 40px; align-items: start;
  pointer-events: none;
}
.hero__grid > * { pointer-events: auto; }
.hero h1 { width: 300px; }
.hero__note { font-size: 14px; line-height: 19.6px; letter-spacing: -.02em; color: var(--ink-soft); }
.hero__cta { margin-top: 70px; }
.hero__cast {
  position: absolute; z-index: 1; top: 0; bottom: 0; left: 50%;
  width: min(60.2%, max(804px, calc(867px - (100vw - 1440px) * 0.0563))); transform: translateX(-50%);
  pointer-events: none;
}
.hero__cast img { width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.hero__ghost {
  position: absolute; z-index: 0; left: 0; right: 0;
  bottom: max(88px, calc(88px + (100vh - 900px) / 2));
  max-width: 1500px; margin-inline: auto;
  pointer-events: none;
}

/* the ghost wordmark: ink at 8% with a top-heavy fade, exactly rail-wide */
.ghost { display: block; width: 100%; height: auto; }
.ghost text { fill: var(--ink); font-family: "Afacad", sans-serif; font-weight: 600; }
.ghost--hero {
  opacity: .08;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .95), rgba(0, 0, 0, .18));
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .95), rgba(0, 0, 0, .18));
}

/* ---------- generic section rail ---------- */
.rail { max-width: var(--rail); margin: 0 auto; padding: 0 var(--pad-x); }
.sec { padding: 100px 0 0; }
.sec--flush { padding: 0; }

/* ---------- two-column product rail (home) ---------- */
.prail { display: grid; grid-template-columns: 478px 802px; row-gap: 12px; }
.prail__row { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; }
.prail__copy { max-width: 390px; }
.prail__copy h2 { width: 390px; }
.prail__copy .lede { margin-top: 60px; max-width: 300px; }
.prail__row--tight .lede { max-width: 150px; }
.prail__copy .tl { margin-top: 65px; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.well, .pcard__well, .life__well, .jcard__well, .jfeat__well, .chero__well, .gal__main,
.pcard__name, .pcard__price { display: block; }
.well { position: relative; overflow: hidden; background: var(--shell); }
.well img { width: 100%; height: 100%; object-fit: cover; }
.well--bone { background: var(--bone); }
.pair .well { aspect-ratio: 395 / 540; }
.feature { display: flex; justify-content: center; }
.feature .well { width: 553px; aspect-ratio: 553 / 830; }

/* ---------- product cards ---------- */
.pgrid { display: grid; gap: 20px; }
.pgrid--2 { grid-template-columns: repeat(2, 1fr); }
.pgrid--4 { grid-template-columns: repeat(4, 1fr); }
.pcard { display: block; }
.pcard__well { position: relative; overflow: hidden; background: var(--bone); aspect-ratio: 305 / 449; }
.pcard--tall .pcard__well { aspect-ratio: 391 / 449; }
.pcard__well img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--hov-dur) var(--hov-ease);
}
.pcard:hover .pcard__well img, .pcard:focus-visible .pcard__well img { transform: scale(1.04); }
.pcard__name { margin-top: 16px; font-size: 16px; line-height: 20.8px; letter-spacing: -.04em; }
.pcard__price {
  margin-top: 4px; font-size: 12px; font-weight: 600; line-height: 17px;
  letter-spacing: 0; font-variant-numeric: tabular-nums;
}

/* ---------- lifestyle wells ---------- */
.life { padding-top: 80px; }
.life .rail { display: flex; }
.life--right .rail { justify-content: flex-end; }
.life__well { overflow: hidden; width: 670px; background: var(--bone); }
.life__well img { width: 100%; height: 100%; object-fit: cover; }
.life--right .life__well { height: 440px; }
.life--left .life__well { height: 500px; }

/* ---------- full-bleed two-up band ---------- */
.duo { display: grid; grid-template-columns: 1fr 1fr; margin-top: 100px; }
.duo__tile {
  position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end;
  height: 326px; padding-bottom: 36px; overflow: hidden; color: var(--on-ink);
}
.duo__tile img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.duo__tile::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom, rgba(18, 17, 15, .04) 0%, rgba(18, 17, 15, .12) 34%, rgba(18, 17, 15, .44) 60%, rgba(18, 17, 15, .52) 100%);
}
.duo__tile > * { position: relative; z-index: 2; }
.duo__tile .disp-h4 { color: var(--on-ink); text-align: center; }
.duo__tile .tl { margin-top: 37px; align-self: center; }

/* ---------- information rows ---------- */
.info { padding: 266px 0; }
.info__row { display: grid; grid-template-columns: 643px 511px 126px; align-items: start; }
.info__row + .info__row { margin-top: 61px; }
.info__row h2 { width: 320px; }
.info__body { display: grid; gap: 20px; max-width: 341px; }
.info__link { justify-self: end; align-self: start; margin-top: 6px; }

/* ---------- full-bleed campaign band ---------- */
.media {
  position: relative; height: 900px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.media img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.media::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(70% 50% at 50% 50%, rgba(18, 17, 15, .50), rgba(18, 17, 15, .22) 70%, rgba(18, 17, 15, .10));
}
.media h2 {
  position: relative; z-index: 2; width: 438px; align-self: center;
  color: var(--on-ink); text-align: center;
}

/* ---------- three-up campaign band ---------- */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); }
.trio__tile {
  position: relative; height: 900px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.trio__tile img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.trio__tile::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom, rgba(18, 17, 15, .08), rgba(18, 17, 15, .42) 48%, rgba(18, 17, 15, .10));
}
.trio__tile h3, .trio__tile h4, .trio__tile .disp-h4 { position: relative; z-index: 2; color: var(--on-ink); }

/* ---------- footer ---------- */
.ftr { background: var(--ink); color: var(--on-ink); padding: 48px 24px 50px; }
.ftr__mark { opacity: 1; }
.ftr__mark text { fill: var(--on-ink); }
.ftr__news { margin-top: 12px; display: flex; align-items: center; gap: 16px; padding: 12px 12px 11px; border-bottom: 1px solid rgba(255, 255, 255, .45); }
.ftr__news input {
  flex: 1 1 auto; min-width: 0; height: 20px; padding: 0;
  border: 0; background: none; color: var(--on-ink);
  font-size: 14px; line-height: 20px; letter-spacing: -.01em;
}
.ftr__news input::placeholder { color: var(--on-ink-mute); opacity: 1; }
.ftr__send {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: var(--rad-pill);
  border: 1px solid rgba(255, 255, 255, .45); color: var(--on-ink);
  display: grid; place-items: center; cursor: pointer;
  transition: background-color 200ms ease-out, color 200ms ease-out;
}
.ftr__send svg { width: 13px; height: 13px; }
.ftr__send:hover { background: var(--on-ink); color: var(--ink); }
.ftr__msg { margin-top: 12px; font-size: 13px; line-height: 18px; color: var(--on-ink-soft); }
.ftr__msg[hidden] { display: none; }
.ftr__cols { margin-top: 16px; display: grid; grid-template-columns: repeat(4, 174px) 1fr; gap: 0; }
.ftr__cols h2 { font-family: "Sarabun", sans-serif; font-size: 16px; font-weight: 500; line-height: 19.2px; letter-spacing: -.01em; }
.ftr__cols li, .ftr__cols p { margin-top: 12px; font-size: 14px; line-height: 19.6px; letter-spacing: -.01em; }
.ftr__cols li { font-size: 16px; line-height: 20px; }
.ftr__cols a { color: var(--on-ink-soft); }
.ftr__cols a:hover { color: var(--on-ink); text-decoration: underline; text-underline-offset: 3px; }
.ftr__legal { justify-self: end; text-align: right; max-width: 340px; font-size: 12px; line-height: 17px; color: var(--on-ink-soft); }
.ftr__legal p + p { margin-top: 9px; }

/* =============================================================================
   inner pages
   ============================================================================= */

/* ---------- shop / collections index ---------- */
.idx { padding: 100px 0 0; }
.idx__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; }
.idx__head h1, .idx__head h2 { width: 420px; }
.idx__head .tl { margin-top: 5px; }
.idx__filters { margin-top: 40px; display: flex; align-items: center; gap: 12px; }
.pill {
  display: inline-flex; align-items: center; height: 34px; padding: 0 16px;
  border-radius: var(--rad-pill); background: var(--bone);
  font-size: 14px; font-weight: 500; line-height: 14px; letter-spacing: -.01em;
  color: var(--ink); cursor: pointer;
  transition: background-color 200ms ease-out, color 200ms ease-out;
}
.pill:hover { background: var(--fog-soft); }
.pill[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }
.idx__seg { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.seg {
  font-size: 14px; font-weight: 500; letter-spacing: -.01em; cursor: pointer;
  color: var(--ink-soft);
}
.seg[aria-pressed="true"] { color: var(--ink); }
.idx__grid { margin-top: 48px; }

/* ---------- collections split hero ---------- */
.chero { display: grid; grid-template-columns: 860px 1fr; align-items: end; gap: 40px; padding-top: 40px; }
.chero__well { height: 540px; overflow: hidden; background: var(--bone); }
.chero__well img { width: 100%; height: 100%; object-fit: cover; }
.chero__copy { max-width: 540px; padding-right: var(--pad-x); }
.chero__copy .lede { margin-top: 8px; }

/* ---------- editorial page (about) ---------- */
.edit { max-width: var(--rail); margin: 0 auto; padding: 120px var(--pad-x) 0; display: grid; grid-template-columns: 645px 635px; gap: 0; }
.edit__copy { max-width: 480px; display: grid; gap: 24px; }
.edit__copy h1 { margin-bottom: 20px; }
.edit__pair { display: flex; justify-content: flex-end; gap: 12px; align-items: flex-start; }
.edit__pair .well:first-child { width: 228px; height: 342px; }
.edit__pair .well:last-child { width: 367px; height: 551px; }

/* ---------- contact directory ---------- */
.dir { max-width: var(--rail); margin: 0 auto; padding: 80px var(--pad-x) 0; display: grid; grid-template-columns: 590px 690px; gap: 0; }
.dir__grid { display: grid; grid-template-columns: 260px 260px; column-gap: 60px; row-gap: 61px; align-content: start; }
.dir__item h2, .dir__item h3 { margin-bottom: 8px; }
.dir__item p, .dir__item a { display: block; font-size: 16px; line-height: 22.4px; color: var(--ink-soft); }
.dir__item p + p, .dir__item a + a, .dir__item p + a, .dir__item a + p { margin-top: 8px; }
.dir__item a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.dir__policy { margin-top: 64px; max-width: 560px; display: grid; gap: 12px; }
.dir__policy h2 { margin-bottom: 4px; }

/* ---------- journal ---------- */
.jrn { padding: 120px 0 0; }
.jrn__intro h1 { max-width: 590px; margin-top: 22px; }
.jrn__intro .lede { max-width: 560px; margin-top: 22px; }
.jfeat { margin-top: 68px; display: grid; grid-template-columns: 742px 1fr; gap: 48px; align-items: start; }
.jfeat__well { height: 500px; overflow: hidden; background: var(--bone); }
.jfeat__well img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--hov-dur) var(--hov-ease); }
.jfeat:hover .jfeat__well img { transform: scale(1.03); }
.jfeat__copy { max-width: 490px; padding-top: 48px; }
.jfeat__meta { display: flex; gap: 28px; }
.jfeat__copy h2 { margin-top: 34px; }
.jfeat__copy .lede { margin-top: 20px; }
.jfeat__copy .kicker-sm { display: inline-block; margin-top: 42px; }
.jlist { margin-top: 116px; }
.jlist__head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; }
.jcards { margin-top: 32px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.jcard__well { height: 420px; overflow: hidden; background: var(--bone); }
.jcard__well img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--hov-dur) var(--hov-ease); }
.jcard:hover .jcard__well img { transform: scale(1.04); }
.jcard .kicker { display: block; margin-top: 14px; }
.jcard h3 { margin-top: 6px; }
.jcard p { margin-top: 8px; font-size: 14px; line-height: 21.7px; color: var(--ink-soft); }

/* ---------- product detail ---------- */
.pdp { max-width: var(--rail); margin: 0 auto; padding: 100px var(--pad-x) 52px; display: grid; grid-template-columns: 420px 1fr; gap: 16px; align-items: start; }
.pdp__col { display: block; }
.prail--pdp { grid-template-columns: 436px 844px; }
.prail--pdp .prail__copy, .prail--pdp .prail__copy h2 { width: 436px; max-width: 100%; }
.prail--pdp .pcard--tall .pcard__well { aspect-ratio: 412 / 589; }
.pdp__panel { border: 1px solid var(--fog); border-radius: var(--rad-panel); background: var(--bone); padding: 24px; }
.pdp__title { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.pdp__title h1 { font-weight: 500; }
.pdp__price { margin-top: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.pdp__desc { margin-top: 12px; font-size: 14px; line-height: 21px; color: var(--ink-soft); }
.pdp__row { margin-top: 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pdp__row .kicker-sm { color: var(--ink-soft); letter-spacing: .04em; }
.pdp__hr { margin-top: 20px; height: 1px; background: var(--fog); }
.pdp__field { margin-top: 20px; }
.pdp__field > span { display: block; font-size: 14px; letter-spacing: -.01em; }
.swatches { margin-top: 10px; display: flex; gap: 22px; }
.swatch { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; color: var(--ink-soft); }
.swatch i { width: 11px; height: 11px; border-radius: var(--rad-pill); border: 1px solid var(--fog); display: block; }
.swatch[aria-pressed="true"] { color: var(--ink); }
.swatch[aria-pressed="true"] i { box-shadow: inset 0 0 0 2px var(--bone); border-color: var(--ink); }
.sizes { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.size {
  width: 38px; height: 38px; border-radius: var(--rad-pill); display: grid; place-items: center;
  font-size: 14px; letter-spacing: -.01em; color: var(--ink-soft); cursor: pointer;
  transition: background-color 200ms ease-out, color 200ms ease-out;
}
.size:hover { background: var(--fog-soft); color: var(--ink); }
.size[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }
.qty { display: inline-flex; align-items: center; gap: 14px; height: 32px; padding: 0 10px; border: 1px solid var(--fog); border-radius: var(--rad-pill); background: var(--paper); }
.qty button { width: 22px; height: 22px; display: grid; place-items: center; cursor: pointer; color: var(--ink-soft); }
.qty button:hover { color: var(--ink); }
.qty span { min-width: 14px; text-align: center; font-size: 14px; font-variant-numeric: tabular-nums; }
.pdp__care { margin-top: 20px; display: inline-block; }
.btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: 44px; background: var(--ink); color: var(--on-ink);
  font-size: 16px; letter-spacing: -.02em; cursor: pointer;
  transition: background-color 200ms ease-out;
}
.btn:hover { background: #2a2823; }
.pdp__buy { margin-top: 16px; }
.pdp__added { margin-top: 12px; font-size: 14px; color: var(--ink-soft); }
.pdp__added[hidden] { display: none; }
.faq { margin-top: 32px; border: 1px solid var(--fog); border-radius: var(--rad-panel); }
.faq__item { border-top: 1px solid var(--fog); }
.faq__item:first-child { border-top: 0; }
.faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 24px; text-align: left; cursor: pointer;
  font-size: 16px; line-height: 25.6px; letter-spacing: -.02em;
}
.faq__q svg { width: 16px; height: 16px; flex: 0 0 auto; transition: transform 240ms var(--hov-ease); }
.faq__q[aria-expanded="true"] svg { transform: rotate(180deg); }
.faq__a { padding: 0 24px 20px; font-size: 14px; line-height: 22.4px; color: var(--ink-soft); }
.faq__a[hidden] { display: none; }
.gal { display: grid; grid-template-columns: 1fr 102px; gap: 13px; }
.gal__main { position: relative; overflow: hidden; background: var(--bone); aspect-ratio: 1 / 1; }
.gal__main img { width: 100%; height: 100%; object-fit: cover; }
.gal__thumbs { display: grid; gap: 9px; align-content: start; }
.gal__thumb { height: 77px; overflow: hidden; background: var(--bone); border: 1px solid transparent; cursor: pointer; padding: 0; }
.gal__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gal__thumb[aria-pressed="true"] { border-color: var(--ink); }

/* ---------- reveal system (word split, 40px rise) ---------- */
.rv > .w, .rv.rv--block {
  opacity: 0; transform: translateY(40px);
  transition: opacity var(--rev-dur) var(--rev-ease), transform var(--rev-dur) var(--rev-ease);
}
.rv .w { display: inline-block; white-space: pre; }
.rv.is-in > .w, .rv.rv--block.is-in { opacity: 1; transform: none; }
.no-js .rv > .w, .no-js .rv.rv--block { opacity: 1; transform: none; }

/* =============================================================================
   responsive
   ============================================================================= */
@media (max-width: 1439px) {
  :root { --rail: 100%; }
  .prail { grid-template-columns: 37.5% 1fr; }
  .prail--pdp { grid-template-columns: 34% 1fr; }
  .info__row { grid-template-columns: 50% 1fr 126px; }
  .chero { grid-template-columns: 60% 1fr; }
  .edit { grid-template-columns: 1fr 635px; }
  .dir { grid-template-columns: 1fr 690px; }
  .jfeat { grid-template-columns: 58% 1fr; }
  .life__well { width: 52%; }
}

@media (max-width: 1120px) {
  :root { --pad-x: 48px; --fs-display: 41px; --lh-display: 40px; }
  .hdr__nav { gap: 22px; margin-left: 32px; }
  .hdr__right { gap: 24px; }
  .prail__copy h2, .hero h1 { width: auto; }
  .prail--pdp .prail__copy, .prail--pdp .prail__copy h2 { width: auto; }
  .feature .well { width: 100%; }
  .pgrid--4 { grid-template-columns: repeat(2, 1fr); }
  .prail--pdp { grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
  .prail--pdp .prail__row { display: block; }
  .prail--pdp .prail__copy { margin-bottom: 48px; }
  .edit { grid-template-columns: 1fr 1fr; gap: 40px; }
  .edit__pair .well:first-child { width: 40%; height: 300px; }
  .edit__pair .well:last-child { width: 58%; height: 470px; }
  .dir { grid-template-columns: 1fr 1fr; gap: 40px; }
  .dir__grid { grid-template-columns: 1fr 1fr; column-gap: 32px; }
  .jfeat { grid-template-columns: 1fr; gap: 32px; }
  .jfeat__copy { padding-top: 0; max-width: 620px; }
  .jcards { grid-template-columns: 1fr 1fr; }
  .chero { grid-template-columns: 1fr; padding-top: 0; }
  .chero__well { height: 420px; }
  .chero__copy { padding: 0 var(--pad-x); max-width: 620px; }
  .gal { grid-template-columns: 1fr 84px; }
  .gal__thumb { height: 64px; }
  .info { padding: 160px 0; }
}

@media (max-width: 810px) {
  /* the header is 158px tall and fixed: inner pages clear it, the hero tucks under */
  main { padding-top: 158px; }
  .hero { margin-top: -158px; }
  :root {
    --pad-x: 20px;
    --fs-display: 37.2px; --lh-display: 35.2px;
    --fs-h4: 28px; --lh-h4: 26.4px;
    --fs-h5: 26px; --lh-h5: 24.4px;
    --fs-sub: 23px; --lh-sub: 28px;
  }
  /* header: three stacked rows */
  .hdr {
    height: auto; min-height: 158px; padding: 18px var(--pad-x) 16px;
    display: grid; grid-template-columns: 1fr auto; row-gap: 18px; align-items: center;
  }
  .hdr__mark { font-size: 19px; justify-self: start; }
  .hdr__nav { grid-column: 1 / -1; margin-left: 0; gap: 0; justify-content: space-between; }
  .hdr__link { padding-left: 0; }
  .hdr__link::before { display: none; }
  .hdr__right { grid-column: 1 / -1; grid-row: 3; margin-left: 0; }
  .hdr__right .cart { display: none; }
  .cart--top { display: block; grid-column: 2; grid-row: 1; }

  .hero { min-height: 830px; padding: 186px var(--pad-x) 0; }
  .hero__grid { grid-template-columns: 1fr; gap: 11px; }
  .hero__grid > div { display: contents; }
  .hero h1 { order: 1; }
  .hero__note { order: 2; max-width: 320px; }
  .hero__cta { order: 3; margin-top: 4px; justify-self: start; }
  .hero__cast { left: 0; width: 100%; transform: none; top: auto; bottom: 47px; height: 69%; }
  .hero__ghost { bottom: 34px; }

  .sec { padding: 64px 0 0; }
  .prail { grid-template-columns: minmax(0, 1fr); row-gap: 64px; }
  .prail__row { display: block; }
  .prail__copy { max-width: none; margin-bottom: 64px; }
  .prail__copy .lede { margin-top: 28px; max-width: none; }
  .prail__row--tight .lede { max-width: 150px; }
  .prail__copy .tl { margin-top: 34px; }
  .pair { grid-template-columns: 1fr; }
  .pair .well { aspect-ratio: 350 / 540; }
  .feature .well { aspect-ratio: 350 / 830; }
  .pgrid--2 { grid-template-columns: 1fr; }
  .pgrid--2 .pcard__well { aspect-ratio: 350 / 299; }
  .pgrid--4 { grid-template-columns: 1fr 1fr; }
  .pgrid--4 .pcard__well { aspect-ratio: 165 / 299; }
  .pcard--tall .pcard__well { aspect-ratio: 350 / 299; }

  .life { padding-top: 96px; }
  .life--right, .life--left { display: block; }
  .life .rail { display: block; }
  .life__well { width: 100%; }
  .life--right .life__well { height: 440px; }
  .life--left .life__well { height: 500px; }

  .duo { grid-template-columns: 1fr; margin-top: 96px; }
  .duo__tile { height: 420px; padding-bottom: 58px; }

  .info { padding: 64px 0 90px; }
  .info__row { grid-template-columns: 1fr; }
  .info__row h2 { width: auto; max-width: 320px; }
  .info__body { margin-top: 46px; max-width: none; }
  .info__row .info__link { justify-self: start; padding-top: 25px; }
  .info__row + .info__row { margin-top: 68px; }

  .media { height: 370px; }
  .media h2 { width: 350px; }
  .trio { grid-template-columns: 1fr; }
  .trio__tile { height: 240px; }

  .ftr { padding: 48px var(--pad-x) 40px; }
  .ftr__cols { grid-template-columns: 1fr; }
  .ftr__cols > * + * { margin-top: 48px; }
  .ftr__legal { justify-self: start; text-align: left; margin-top: 48px; max-width: none; }

  /* inner pages */
  .idx { padding: 64px 0 0; }
  .idx__head { flex-direction: column; gap: 22px; }
  .idx__head h1, .idx__head h2 { width: auto; }
  .idx__filters { flex-wrap: wrap; gap: 8px; margin-top: 28px; }
  .idx__seg { margin-left: 0; width: 100%; }
  .idx__grid { margin-top: 48px; }
  .edit { padding: 64px var(--pad-x) 0; grid-template-columns: 1fr; gap: 48px; }
  .edit__pair .well:first-child { width: 38%; height: 240px; }
  .edit__pair .well:last-child { width: 60%; height: 380px; }
  .dir { padding: 64px var(--pad-x) 0; grid-template-columns: 1fr; gap: 48px; }
  .dir__grid { grid-template-columns: 1fr; row-gap: 40px; }
  .jrn { padding: 40px 0 0; }
  .jcards { grid-template-columns: 1fr; gap: 40px; }
  .jcard__well { height: 320px; }
  .jlist__head { flex-direction: column; gap: 10px; }
  .pdp { grid-template-columns: 1fr; gap: 32px; padding: 40px var(--pad-x) 0; }
  .prail--pdp .pcard--tall .pcard__well { aspect-ratio: 350 / 299; }
  .gal { order: -1; grid-template-columns: 1fr; gap: 10px; }
  .gal__thumbs { grid-template-columns: repeat(3, 1fr); }
  .gal__thumb { height: 88px; }
}

@media (max-width: 420px) {
  .idx__filters .pill { padding: 0 13px; }
}

/* ---------- reduced motion: the static render is complete ---------- */
@media (prefers-reduced-motion: reduce) {
  .rv > .w, .rv.rv--block { opacity: 1 !important; transform: none !important; transition: none !important; }
  .tl::before, .tl::after, .pcard__well img, .jcard__well img, .jfeat__well img,
  .hdr__link::before, .faq__q svg, .skip { transition: none !important; }
  .tl::after { display: none; }
  .pcard:hover .pcard__well img, .jcard:hover .jcard__well img, .jfeat:hover .jfeat__well img { transform: none; }
}