/* Linen and Loom. Concept: fashion magazine. Spreads, running heads and folios, numbered looks with captions beside
   the photos, big Bodoni Moda headlines set at full optical size so the hairlines stay thin. */

/* ---------- tokens ---------- */
:root {
  --paper: #F4F4F2;
  --ink: #1F1F1F;
  --ink-2: #5B5852;          /* secondary text, 6.6:1 on paper */
  --indigo: #273A8C;
  --indigo-2: #1C2B6B;
  --stone: #A8A39A;          /* rules and swatch borders only, never text */
  --rule: rgba(31, 31, 31, .16);
  --white: #FFFFFF;
  --photo: #DCDCD7;          /* empty photo frame */

  --serif: 'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, serif;
  --sans: 'Karla', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* type scale */
  --t-cover: clamp(46px, min(7.7vw, 12vh), 132px);
  --t-1: clamp(40px, 5.9vw, 96px);
  --t-2: clamp(30px, 3.3vw, 52px);
  --t-3: clamp(21px, 1.7vw, 27px);
  --t-num: clamp(96px, 16vw, 260px);
  --t-lead: clamp(18px, 1.35vw, 21px);
  --t-body: 17px;
  --t-small: 15px;
  --t-cap: 14px;

  /* spacing and grid */
  --m: clamp(20px, 3.3vw, 56px);       /* page margin */
  --g: clamp(12px, 1.5vw, 24px);       /* gutter */
  --sec: clamp(80px, 9vw, 144px);      /* one section spacing for the whole site */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 40px; --s5: 64px;
  --hd: 64px;
  --maxw: 1760px;
  --ease: cubic-bezier(.7, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}
@media (max-width: 720px) {
  :root { --hd: 56px; --t-body: 16px; --t-small: 15px; --sec: 72px; }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hd) + 16px); }
body { margin: 0; background: var(--paper); font: 400 var(--t-body)/1.55 var(--sans); overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, p, figure, ol, ul, dl, dd { margin: 0; }
ol, ul { padding: 0; list-style: none; }
::selection { background: var(--indigo); color: var(--paper); }
:focus-visible { outline: 2px solid var(--indigo); outline-offset: 3px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 300; background: var(--ink); color: var(--paper); padding: 12px 16px; text-decoration: none; }
.skip:focus { top: 12px; }

.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); padding-inline: var(--m); max-width: var(--maxw); margin-inline: auto; }
.span { grid-column: 1 / -1; }
.sec { padding-block: var(--sec); }
.sec:not(.band) + .sec:not(.band) { padding-top: 0; }
@media (max-width: 720px) { .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* headings: Bodoni Moda at large optical size */
.h1, .h2, .cover-h, .pdp-name, .lk-t, .end-h, .lk-num, .card-name, .ix-t, .brand, .ft-brand {
  font-family: var(--serif); font-weight: 400; font-optical-sizing: auto; text-wrap: balance;
}
.h1 { font-size: var(--t-1); line-height: .96; letter-spacing: -.022em; }
.h2 { font-size: var(--t-1); line-height: .96; letter-spacing: -.022em; }
.h3 { font: 600 var(--t-small)/1.35 var(--sans); letter-spacing: 0; margin-bottom: 10px; }
p { text-wrap: pretty; }
/* figures inside display headlines: a smaller optical size keeps the hairline of the 4 visible */
.fig { font-variation-settings: 'opsz' 18; font-weight: 500; letter-spacing: 0; }

/* running head and folio, as at the top of a magazine page */
.rh { display: flex; justify-content: space-between; gap: var(--s2); border-top: 1px solid currentColor; padding-top: 10px;
  font-size: var(--t-cap); line-height: 1.3; margin-bottom: clamp(32px, 4.4vw, 72px); }
.rh > span:first-child { font-weight: 600; }
.rh-mid { color: var(--ink-2); }
@media (max-width: 720px) { .rh-mid { display: none; } }

/* links and buttons */
.tl { display: inline-block; padding: 11px 0; line-height: 1.3; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: .32em; background: none; border: 0; padding: 0; cursor: pointer; transition: color .2s; }
.tl:hover { color: var(--indigo); text-decoration-thickness: 2px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 24px; border: 1px solid var(--ink);
  background: transparent; color: var(--ink); font: 600 15px/1 var(--sans); text-decoration: none; border-radius: 0; transition: background .25s, color .25s, border-color .25s; }
.btn:hover { background: var(--ink); color: var(--paper); }
.btn-pri { background: var(--indigo); border-color: var(--indigo); color: var(--white); }
.btn-pri:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn-light { border-color: var(--paper); color: var(--paper); }
.btn-light:hover { background: var(--paper); color: var(--ink); }
.btn-wide { width: 100%; }

select { appearance: none; -webkit-appearance: none; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%231F1F1F' stroke-width='1.3'/%3E%3C/svg%3E") no-repeat right 2px center;
  border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; padding: 8px 18px 6px 0; min-height: 40px; cursor: pointer; font-size: var(--t-small); }
.region { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-small); }
.region-l { color: var(--ink-2); white-space: nowrap; }

/* ---------- header ---------- */
.hd { position: sticky; top: 0; z-index: 60; background: var(--paper); height: var(--hd); border-bottom: 1px solid transparent; transition: border-color .3s; view-transition-name: hd; }
.hd.scrolled { border-bottom-color: var(--rule); }
.hd-in { height: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s3); padding-inline: var(--m); max-width: var(--maxw); margin-inline: auto; }
.brand { font-size: 25px; line-height: 1; letter-spacing: -.01em; text-decoration: none; white-space: nowrap; font-weight: 500; }
.brand i, .ft-brand i { font-style: italic; font-weight: 400; }
.nav ul { display: flex; gap: clamp(16px, 2.2vw, 36px); justify-content: center; }
.nav a { text-decoration: none; font-size: var(--t-small); padding: 10px 0; background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px; transition: background-size .35s var(--ease-out); }
.nav a:hover, .nav a[aria-current] { background-size: 100% 1px; }
.hd-tools { display: flex; align-items: center; gap: var(--s3); }
.hd-region select { max-width: 210px; }
.cart-btn, .menu-btn { min-height: 44px; min-width: 44px; padding: 0 2px; border: 0; background: none; font-size: var(--t-small); font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.cart-n { font: 600 15px/1 var(--sans); min-width: 22px; height: 22px; display: inline-grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-variant-numeric: tabular-nums; }
.cart-n.bump { animation: bump .5s var(--ease-out); }
@keyframes bump { 30% { transform: translateY(-5px); } }
.menu-btn { display: none; }
@media (max-width: 1100px) { .hd-region .region-l { display: none; } .hd-region select { max-width: 160px; } }
@media (max-width: 900px) {
  .nav, .hd-region { display: none; }
  .menu-btn { display: inline-flex; }
  .hd-in { grid-template-columns: 1fr auto; }
  .brand { font-size: 22px; }
}
.menu { position: fixed; inset: var(--hd) 0 0 0; z-index: 59; background: var(--paper); padding: var(--s4) var(--m) 100px; display: flex; flex-direction: column; justify-content: space-between; overflow-y: auto; }
.menu[hidden] { display: none; }
.menu ul li { border-top: 1px solid var(--rule); }
.menu ul a { display: block; padding: 12px 0; font: 400 clamp(34px, 9vw, 52px)/1.05 var(--serif); text-decoration: none; letter-spacing: -.02em; }
.menu-foot { display: grid; gap: var(--s2); padding-top: var(--s4); color: var(--ink-2); font-size: var(--t-small); }
.menu-foot .region { color: var(--ink); }

/* ---------- cover (home hero) ---------- */
.cover { display: grid; grid-template-columns: 1fr 1fr; height: calc(100svh - var(--hd)); min-height: 600px; max-height: 1080px; position: relative; }
.cover-photo { grid-column: 1; grid-row: 1; position: relative; overflow: hidden; background: var(--photo); }
.cover-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 47% 50%; }
/* a soft shade where the white half of the headline sits on the photo; above the WebGL canvas */
.cover-photo::after { content: ''; position: absolute; inset: 0; z-index: 7; pointer-events: none;
  background: linear-gradient(to left, rgba(20, 22, 18, .34), rgba(20, 22, 18, .1) 30%, rgba(20, 22, 18, 0) 46%); transition: opacity 1.2s .6s; }
.js.motion .cover-photo:not(.shade)::after { opacity: 0; }
.cover-page { --pl: calc(var(--g) * 1.6); --over: 12.5vw; grid-column: 2; grid-row: 1; display: flex; flex-direction: column; padding: 14px var(--m) 24px var(--pl); min-width: 0; }
.cover-rh { margin-bottom: 0; }
.cover-title { position: relative; margin: auto 0 0 calc(-1 * (var(--over) + var(--pl))); padding-top: var(--s3); z-index: 7; }
.cover-h { font-size: var(--t-cover); line-height: .93; letter-spacing: -.028em; max-width: 9.2em; }
.cover-h-over { position: absolute; inset: var(--s3) 0 auto 0; color: var(--white); pointer-events: none; clip-path: inset(-20px calc(100% - var(--over)) -20px -20px); }
.cover-body { margin-top: clamp(18px, 3vh, 34px); max-width: 34em; }
.cover-lead { font-size: var(--t-lead); line-height: 1.45; }
.cover-btns { display: flex; align-items: center; gap: var(--s3); margin-top: clamp(16px, 2.4vh, 26px); flex-wrap: wrap; }
.cover-foot { margin-top: auto; padding-top: clamp(16px, 2.6vh, 32px); display: grid; gap: 10px; }
.cover-cap { font-size: var(--t-cap); color: var(--ink-2); line-height: 1.4; }
.cap-k { color: var(--ink); font-weight: 600; }
.cover-lines { border-top: 1px solid var(--ink); font-size: var(--t-cap); display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--g); }
.cover-lines a { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--rule); text-decoration: none; }
.cover-lines a:hover span:first-child { color: var(--indigo); text-decoration: underline; text-underline-offset: .25em; }
.pg { font: italic 400 17px/1 var(--serif); }
@media (max-height: 800px) and (min-width: 721px) { .cover-cap { display: none; } }
@media (max-width: 1100px) and (min-width: 721px) { .cover-page { --over: 9vw; } .cover-cap { display: none; } .cover-lines { grid-template-columns: 1fr; } }
@media (max-width: 720px) {
  .cover { grid-template-columns: 1fr; height: auto; min-height: 0; max-height: none; }
  .cover-photo { grid-column: 1; grid-row: 1; height: 45svh; min-height: 330px; }
  .cover-photo img { object-position: 46% 40%; }
  .cover-photo::after { background: linear-gradient(to top, rgba(20, 22, 18, .34), rgba(20, 22, 18, 0) 30%); }
  .cover-page { grid-column: 1; grid-row: 2; --over: 0px; padding: 0 var(--m) 32px; }
  .cover-rh { display: none; }
  .cover-title { --overY: 1.02em; font-size: clamp(42px, 12.4vw, 56px); margin: calc(-1 * var(--overY)) 0 0; padding-top: 0; }
  .cover-h { font-size: 1em; line-height: .94; max-width: none; }
  .cover-h-over { inset: 0; clip-path: inset(-20px -20px calc(100% - var(--overY)) -20px); }
  .cover-body { margin-top: 16px; }
  .cover-lead { font-size: 16px; }
  .cover-btns { margin-top: 14px; }
  .cover-lines { grid-template-columns: 1fr; }
  .cover-foot { grid-template-columns: 1fr; padding-top: 28px; }
  .cover-cap { display: block; }
}

/* ---------- lookbook ---------- */
.lb { position: relative; padding-top: var(--sec); }
.lb-head { align-items: end; margin-bottom: clamp(24px, 3vw, 48px); }
.lb-h { grid-column: 1 / 9; }
.lb-intro { grid-column: 9 / 13; font-size: var(--t-small); color: var(--ink-2); }
.lb-track { display: block; }
.spread { padding: 0 var(--m) var(--sec); max-width: var(--maxw); margin-inline: auto; }
.spread .rh { margin-bottom: clamp(16px, 2vw, 28px); }
.sp-body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); position: relative; align-items: start; }
.lk-f { position: relative; overflow: hidden; background: var(--photo); }
.lk-f img { width: 100%; height: 100%; object-fit: cover; }
.lk-num { font: italic 400 var(--t-num)/.8 var(--serif); letter-spacing: -.04em; color: var(--indigo); grid-row: 1; }
.lk-cap { grid-row: 1; align-self: end; font-size: var(--t-small); line-height: 1.5; max-width: 30em; position: relative; z-index: 7; }
.lk-k { font-weight: 600; margin-bottom: 6px; }
.lk-t { font-size: var(--t-2); line-height: 1.02; letter-spacing: -.018em; margin-bottom: 14px; }
.lk-x { color: var(--ink-2); }
.lk-p { margin-top: 6px; }
.lk-place { margin-top: 6px; font-size: var(--t-cap); color: var(--ink-2); font-style: italic; }

/* static layouts (no JS, reduced motion, and the base for the pinned version) */
.sp-a .lk-f1 { grid-column: 4 / 13; grid-row: 1; aspect-ratio: 3 / 2; }
.sp-a .lk-num { grid-column: 1 / 4; align-self: start; }
.sp-a .lk-cap { grid-column: 1 / 4; }
.sp-b .lk-f1 { grid-column: 1 / 6; grid-row: 1; aspect-ratio: 4 / 5; }
.sp-b .lk-f2 { grid-column: 8 / 13; grid-row: 1; aspect-ratio: 3 / 2; align-self: start; }
.sp-b .lk-num { grid-column: 6 / 8; align-self: start; font-size: clamp(64px, 9vw, 150px); padding-left: 4px; }
.sp-b .lk-cap { grid-column: 8 / 12; }
.sp-c .lk-f1 { grid-column: 1 / 13; grid-row: 1; aspect-ratio: 16 / 9; }
.sp-c .lk-num { grid-column: 1 / 5; align-self: start; padding: clamp(16px, 2vw, 32px) 0 0 clamp(16px, 2vw, 32px); position: relative; z-index: 7; color: var(--ink); }
.sp-c .lk-cap { grid-column: 9 / 13; align-self: start; padding-top: clamp(16px, 2vw, 32px); padding-right: clamp(16px, 2vw, 32px); }
.sp-c .lk-x, .sp-c .lk-place { color: var(--ink); }
.sp-d .lk-num { grid-column: 1 / 5; align-self: start; }
.sp-d .lk-f1 { grid-column: 5 / 10; grid-row: 1; aspect-ratio: 4 / 5; }
.sp-d .lk-cap { grid-column: 10 / 13; }
.sp-e .lk-f1 { grid-column: 8 / 13; grid-row: 1; aspect-ratio: 4 / 5; }
.sp-e .lk-num { grid-column: 1 / 5; align-self: start; }
.sp-e .lk-cap { grid-column: 3 / 7; }
.sp-end .sp-body { align-content: center; }
.end-h { grid-column: 1 / 8; font-size: var(--t-1); line-height: .96; letter-spacing: -.022em; }
.ix { grid-column: 8 / 13; border-top: 1px solid var(--ink); align-self: end; }
.ix a { display: grid; grid-template-columns: 40px 56px 1fr auto; gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--rule); text-decoration: none; }
.ix a:hover .ix-t { color: var(--indigo); }
.ix-n { font: italic 400 18px/1 var(--serif); }
.ix-i { width: 56px; height: 70px; object-fit: cover; background: var(--photo); }
.ix-t { font-size: var(--t-3); line-height: 1.15; }
.ix-p { font-size: var(--t-small); }
.sp-end .btn { grid-column: 8 / 13; margin-top: var(--s4); justify-self: start; }
.lb-prog { display: none; }

/* pinned horizontal version (added by site.js) */
.lb.lb-on .lb-pin { height: 100svh; overflow: hidden; position: relative; z-index: 7; }
.lb.lb-on .lb-track { display: flex; height: 100%; width: max-content; will-change: transform; }
.lb.lb-on .spread { flex: 0 0 100vw; width: 100vw; max-width: none; height: 100%; padding: calc(var(--hd) + 12px) var(--m) 34px; display: flex; flex-direction: column; margin: 0; }
.lb.lb-on .sp-body { flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr); align-items: stretch; }
.lb.lb-on .lk-f { aspect-ratio: auto; height: 100%; min-height: 0; }
.lb.lb-on .sp-a .lk-f1 { align-self: center; height: auto; aspect-ratio: 3 / 2; max-height: 100%; }
.lb.lb-on .sp-b .lk-f2 { height: auto; aspect-ratio: 3 / 2; }
.lb.lb-on .sp-c .lk-f1 { grid-column: 1 / 13; margin-inline: calc(-1 * var(--m)); }
.lb.lb-on .sp-end .sp-body { align-content: center; grid-template-rows: auto auto; }
.lb.lb-on .sp-end .end-h { grid-row: 1 / 3; align-self: center; }
.lb.lb-on .lk-num, .lb.lb-on .lk-cap { align-self: start; }
.lb.lb-on .sp-a .lk-cap, .lb.lb-on .sp-b .lk-cap, .lb.lb-on .sp-d .lk-cap, .lb.lb-on .sp-e .lk-cap { align-self: end; }
.lb.lb-on .lb-prog { display: block; position: absolute; left: var(--m); right: var(--m); bottom: 16px; height: 1px; background: var(--rule); z-index: 8; }
.lb.lb-on .lb-prog i { display: block; height: 100%; width: 100%; background: var(--ink); transform-origin: 0 50%; transform: scaleX(0); }

@media (max-width: 720px) {
  .lb-h, .lb-intro { grid-column: 1 / -1; }
  .lb-intro { margin-top: 14px; }
  .sp-body { display: flex; flex-direction: column; gap: 14px; }
  .sp-body .lk-num { display: none; }
  .sp-a .lk-f1, .sp-c .lk-f1 { aspect-ratio: 4 / 5; }
  .sp-b .sp-body { display: grid; grid-template-columns: 1.35fr 1fr; gap: 10px; }
  .sp-b .lk-f1 { grid-column: 1; aspect-ratio: 3 / 4; }
  .sp-b .lk-f2 { grid-column: 2; aspect-ratio: 3 / 4; align-self: stretch; }
  .sp-b .lk-cap { grid-column: 1 / -1; grid-row: 2; }
  .lk-t { font-size: 30px; }
  .lk-k { margin-bottom: 2px; }
  .sp-c .lk-cap { padding: 0; }
  .ix { margin-top: 24px; }
  .end-h { font-size: 40px; }
  .lb.lb-on .spread { padding: calc(var(--hd) + 10px) var(--m) 30px; }
  .lb.lb-on .sp-body { display: flex; flex-direction: column; gap: 14px; }
  .lb.lb-on .lk-f { flex: 1 1 auto; height: auto; min-height: 0; aspect-ratio: auto; }
  .lb.lb-on .sp-a .lk-f1, .lb.lb-on .sp-b .lk-f2 { aspect-ratio: auto; max-height: none; }
  .lb.lb-on .sp-b .sp-body { display: grid; grid-template-columns: 1.35fr 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .lb.lb-on .sp-b .lk-f1, .lb.lb-on .sp-b .lk-f2 { height: 100%; }
  .lb.lb-on .sp-c .lk-f1 { margin-inline: 0; }
  .lb.lb-on .lk-cap { flex: none; }
  .lb.lb-on .sp-end .sp-body { justify-content: center; }
}

/* ---------- home: pieces ---------- */
.pieces-h { grid-column: 1 / 9; }
.pieces-intro { grid-column: 9 / 13; align-self: end; font-size: var(--t-small); color: var(--ink-2); }
.trip { margin-top: clamp(40px, 5vw, 80px); align-items: start; }
.tp { grid-column: span 4; }
.tp2 { margin-top: clamp(32px, 6vw, 110px); }
.tp3 { margin-top: clamp(16px, 2.5vw, 44px); }
.tp-img, .ff-img, .card-img, .pg-frame, .pg-f, .ln-f { display: block; position: relative; overflow: hidden; background: var(--photo); }
.tp-img img, .ff-img img, .card-img img, .pg-frame img, .pg-f img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
figcaption { font-size: var(--t-cap); line-height: 1.45; }
.tp figcaption, .ft-f figcaption { display: flex; gap: 12px; padding-top: 12px; align-items: baseline; }
.tp-n { font: italic 400 20px/1 var(--serif); flex: none; min-width: 26px; }
.tp-t a, .ff-t a { font-weight: 600; text-decoration: none; }
.tp-t a:hover, .ff-t a:hover { text-decoration: underline; text-underline-offset: .25em; color: var(--indigo); }
.trip-note { margin-top: var(--s4); font-size: var(--t-cap); color: var(--ink-2); }
.trip-note span { grid-column: 5 / 9; }
.feat { margin-top: clamp(56px, 7vw, 120px); row-gap: clamp(48px, 6vw, 96px); align-items: start; }
.ff1 { grid-column: 1 / 8; display: grid; grid-template-columns: 5fr 2fr; gap: var(--g); align-items: end; }
.ff1 figcaption, .ff4 figcaption { flex-direction: column; gap: 8px; padding: 0; }
.ff2 { grid-column: 9 / 13; margin-top: clamp(40px, 9vw, 160px); }
.ff3 { grid-column: 2 / 6; }
.ff4 { grid-column: 7 / 13; display: grid; grid-template-columns: 2fr 4fr; gap: var(--g); align-items: end; margin-top: clamp(24px, 5vw, 90px); }
.ff4 .ff-img { order: 2; }
.ff4 figcaption { order: 1; }
.ft-f figcaption { color: var(--ink-2); }
.ft-f figcaption a { color: var(--ink); }
.ff-p { color: var(--ink); white-space: nowrap; }
.ff2 figcaption, .ff3 figcaption { flex-wrap: wrap; }

.pieces-end { margin-top: clamp(48px, 6vw, 96px); }
.pieces-end > * { grid-column: auto; }
.pieces-end { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; }
@media (max-width: 720px) {
  .pieces-h, .pieces-intro { grid-column: 1 / -1; }
  .pieces-intro { margin-top: 16px; }
  .trip { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 28px; }
  .tp1 { grid-column: 1 / -1; }
  .tp2 { grid-column: 1 / 4; margin-top: 0; }
  .tp3 { grid-column: 4 / 7; margin-top: 40px; }
  .trip-note span { grid-column: 1 / -1; }
  .ff1, .ff4 { grid-column: 1 / -1; grid-template-columns: 1fr; }
  .ff4 .ff-img { order: 0; }
  .ff1 figcaption, .ff4 figcaption { flex-direction: row; padding-top: 12px; flex-wrap: wrap; }
  .ff2 { grid-column: 1 / 4; margin-top: 0; }
  .ff3 { grid-column: 4 / 7; margin-top: 56px; }
  .ff4 { margin-top: 0; }
  .feat { row-gap: 40px; }
}

/* ---------- home: our linen ---------- */
.linen-h { grid-column: 1 / 10; margin-bottom: clamp(40px, 5vw, 80px); }
.ln-f { margin: 0; }
.ln-f img { width: 100%; object-fit: cover; }
.ln-f figcaption { padding-top: 12px; color: var(--ink-2); background: var(--paper); }
.ln-f1 { grid-column: 1 / 7; overflow: visible; background: none; }
.ln-f1 img { aspect-ratio: 4 / 3; background: var(--photo); }
.ln-text { grid-column: 8 / 13; align-self: start; font-size: var(--t-lead); line-height: 1.5; }
.ln-text p + p { margin-top: 1em; }
.dropcap::first-letter { float: left; font: 400 5.3em/.8 var(--serif); margin: .06em .1em 0 -.04em; color: var(--indigo); }
.ln-f2 { grid-column: 1 / 4; margin-top: clamp(40px, 5vw, 80px); overflow: visible; background: none; }
.ln-f3 { grid-column: 4 / 7; margin-top: clamp(100px, 11vw, 190px); overflow: visible; background: none; }
.ln-f2 img, .ln-f3 img { aspect-ratio: 4 / 5; background: var(--photo); }
.ln-steps { grid-column: 8 / 13; margin-top: clamp(40px, 5vw, 80px); align-self: start; }
.ln-steps ol { border-top: 1px solid var(--ink); }
.ln-steps li, .ret-steps li { display: grid; grid-template-columns: 52px 1fr; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.st-n { font: italic 400 26px/1 var(--serif); color: var(--indigo); }
.care { margin-top: var(--s3); font-size: var(--t-small); color: var(--ink-2); }
.care-k { color: var(--ink); font-weight: 600; margin-right: 6px; }
@media (max-width: 720px) {
  .linen-h, .ln-f1, .ln-text, .ln-steps { grid-column: 1 / -1; }
  .ln-text { margin-top: 32px; font-size: 17px; }
  .ln-f2 { grid-column: 1 / 4; }
  .ln-f3 { grid-column: 4 / 7; margin-top: 96px; }
}

/* ---------- home: delivery (indigo) ---------- */
.deliv { background: var(--indigo); color: var(--paper); }
.deliv .rh-mid { color: rgba(244, 244, 242, .75); }
.deliv-h { grid-column: 1 / 10; margin-bottom: clamp(40px, 5vw, 72px); }
.deliv-intro { grid-column: 1 / 5; font-size: var(--t-small); display: grid; gap: var(--s3); align-content: start; }
.deliv .region-l { color: rgba(244, 244, 242, .8); }
.deliv select { border-bottom-color: var(--paper); color: var(--paper); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23F4F4F2' stroke-width='1.3'/%3E%3C/svg%3E"); }
.deliv select option { color: var(--ink); }
.deliv-now { font: 400 var(--t-3)/1.3 var(--serif); }
.deliv-table { grid-column: 6 / 13; overflow-x: auto; }
.deliv-ret { grid-column: 6 / 13; margin-top: clamp(40px, 5vw, 72px); columns: 2; column-gap: var(--g); font-size: var(--t-small); }
.deliv-ret .h3 { column-span: all; }
.deliv-ret p { margin-bottom: 12px; break-inside: avoid; }
.deliv :focus-visible { outline-color: var(--paper); }
.dtable { width: 100%; border-collapse: collapse; font-size: var(--t-small); border-top: 1px solid currentColor; }
.dtable th, .dtable td { text-align: left; padding: 13px 12px 13px 0; border-bottom: 1px solid rgba(244, 244, 242, .28); vertical-align: top; font-weight: 400; }
.dtable thead th { font-size: var(--t-cap); font-weight: 600; }
.dtable tbody th { font-weight: 600; }
.dtable tr.cur th::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; margin: 0 8px 1px 0; }
.dtable tr.cur th, .dtable tr.cur td { font-weight: 700; }
@media (max-width: 900px) {
  .deliv-intro, .deliv-table, .deliv-ret, .deliv-h { grid-column: 1 / -1; }
  .deliv-table { margin-top: var(--s4); }
  .deliv-ret { columns: 1; }
}
@media (max-width: 720px) {
  .dtable thead { display: none; }
  .dtable, .dtable tbody, .dtable tr, .dtable th, .dtable td { display: block; }
  .dtable tr { display: grid; grid-template-columns: 1fr auto; padding: 14px 0; border-bottom: 1px solid rgba(127, 127, 127, .35); }
  .dtable th, .dtable td { border: 0; padding: 2px 0; }
  .dtable td:nth-of-type(2) { text-align: right; }
  .dtable td:nth-of-type(3), .dtable td:nth-of-type(4) { grid-column: 1 / -1; color: inherit; opacity: .85; }
  .dtable td:nth-of-type(1) { text-align: right; }
}

/* ---------- footer ---------- */
.ft { background: var(--ink); color: var(--paper); padding: var(--sec) 0 110px; font-size: var(--t-small); }
.ft a { text-decoration: none; }
.ft a:hover { text-decoration: underline; text-underline-offset: .25em; }
.ft :focus-visible { outline-color: var(--paper); }
.ft-top { row-gap: var(--s4); }
.ft-news { grid-column: 1 / 6; }
.ft-news > p { color: rgba(244, 244, 242, .78); max-width: 30em; }
.ft-h { font: 600 var(--t-small)/1.3 var(--sans); margin-bottom: 12px; }
.ft-news .ft-h { font: 400 var(--t-2)/1.05 var(--serif); letter-spacing: -.015em; margin-bottom: 14px; }
.news { display: flex; gap: 10px; margin-top: var(--s3); max-width: 480px; }
.news input { flex: 1; min-width: 0; min-height: 50px; background: transparent; border: 0; border-bottom: 1px solid var(--paper); color: var(--paper); padding: 0 2px; }
.news input::placeholder { color: rgba(244, 244, 242, .6); }
.news-msg { margin-top: 12px; font-size: var(--t-cap); color: rgba(244, 244, 242, .72); }
.ft-c1 { grid-column: 7 / 9; }
.ft-c2 { grid-column: 9 / 11; }
.ft-c3 { grid-column: 11 / 13; }
.ft-col li { padding: 4px 0; }
.ft-col p { color: rgba(244, 244, 242, .78); margin-bottom: 12px; }
.ft-col p a { color: var(--paper); }
.ft-bot { margin-top: var(--sec); border-top: 1px solid rgba(244, 244, 242, .3); padding-top: var(--s3); align-items: start; row-gap: var(--s3); }
.ft-brand { grid-column: 1 / 4; font-size: 30px; line-height: 1; }
.ft-cred { grid-column: 4 / 10; color: rgba(244, 244, 242, .78); font-size: var(--t-cap); }
.ft-cred summary { cursor: pointer; color: var(--paper); min-height: 32px; }
.ft-cred p { margin-top: 10px; max-width: 60em; }
.ft-small { grid-column: 10 / 13; text-align: right; font-size: var(--t-cap); color: rgba(244, 244, 242, .72); }
@media (max-width: 900px) {
  .ft-news { grid-column: 1 / -1; }
  .ft-c1, .ft-c2 { grid-column: span 3; }
  .ft-c3 { grid-column: 1 / -1; }
  .ft-brand, .ft-cred, .ft-small { grid-column: 1 / -1; text-align: left; }
}

/* ---------- drawers (cart, size guide) ---------- */
.drawer, .sg { position: fixed; inset: 0; z-index: 120; }
.drawer[hidden], .sg[hidden] { display: none; }
.drawer-bg { position: absolute; inset: 0; background: rgba(20, 20, 20, .38); opacity: 0; transition: opacity .4s; }
.drawer-panel, .sg-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(460px, 100vw); background: var(--paper); display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .55s var(--ease-out); overflow: hidden; }
.sg-panel { width: min(560px, 100vw); overflow-y: auto; padding: 0 var(--m) 48px; display: block; }
.drawer.open .drawer-bg, .sg.open .drawer-bg { opacity: 1; }
.drawer.open .drawer-panel, .sg.open .sg-panel { transform: none; }
.dr-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 0 14px; border-bottom: 1px solid var(--ink); }
.drawer .dr-head { margin: 0 var(--s3); }
.dr-head h2 { font: 400 32px/1 var(--serif); letter-spacing: -.015em; }
.dr-close { border: 0; background: none; min-height: 44px; padding: 0 2px; font-weight: 600; text-decoration: underline; text-underline-offset: .3em; }
.free { padding: 14px var(--s3) 16px; font-size: var(--t-cap); }
.cart-sum .free { padding: 18px 0; }
.free-bar { height: 2px; background: var(--rule); margin-top: 10px; overflow: hidden; }
.free-bar i { display: block; height: 100%; background: var(--indigo); width: 0; transition: width .6s var(--ease-out); }
.dr-lines { flex: 1; overflow-y: auto; padding: 0 var(--s3); overscroll-behavior: contain; }
.dr-empty { padding: 40px 0; }
.dr-empty p { font: 400 26px/1.15 var(--serif); margin-bottom: 18px; }
.dr-foot { border-top: 1px solid var(--ink); padding: 14px var(--s3) 20px; }
.sum { display: grid; gap: 6px; font-size: var(--t-small); }
.sum > div { display: flex; justify-content: space-between; gap: 12px; }
.sum dt { color: var(--ink-2); }
.sum .sum-t { border-top: 1px solid var(--ink); padding-top: 10px; margin-top: 6px; font-size: 19px; font-weight: 600; }
.sum .sum-t dt { color: var(--ink); }
.dr-note { margin-top: 10px; font-size: var(--t-cap); color: var(--ink-2); }
.dr-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.co-msg { font-size: var(--t-cap); margin-top: 10px; min-height: 0; }
.co-msg:not(:empty) { padding: 10px 0 0; border-top: 1px solid var(--rule); color: var(--ink); font-weight: 600; }

/* cart lines (drawer and cart page) */
.ln { display: grid; grid-template-columns: 84px 1fr auto; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--rule); align-items: start; }
.ln-img { display: block; background: var(--photo); }
.ln-img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.ln-name { font: 400 20px/1.15 var(--serif); text-decoration: none; display: block; margin-bottom: 6px; }
.ln-name:hover { color: var(--indigo); }
.ln-opts { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: var(--t-cap); }
.ln-opts label { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); }
.ln-opts select { font-size: var(--t-cap); min-height: 36px; color: var(--ink); }
.ln-row { display: flex; align-items: center; gap: 16px; margin-top: 8px; }
.ln-price { font-size: var(--t-small); font-weight: 600; white-space: nowrap; }
.ln-rm { border: 0; background: none; padding: 0; min-height: 44px; font-size: var(--t-cap); text-decoration: underline; text-underline-offset: .3em; color: var(--ink-2); }
.ln-rm:hover { color: var(--indigo); }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--ink); height: 44px; }
.qty button { width: 40px; height: 100%; border: 0; background: none; font-size: 18px; }
.qty button:hover { background: var(--ink); color: var(--paper); }
.qty output { min-width: 28px; text-align: center; font-weight: 600; }
.ln .qty { height: 40px; }
.ln .qty button { width: 38px; }

/* ---------- shop ---------- */
.shop-top { padding-top: clamp(28px, 4vw, 56px); }
.shop-h { grid-column: 1 / 9; }
.shop-intro { grid-column: 9 / 13; align-self: end; font-size: var(--t-small); color: var(--ink-2); }
.shop-bar { position: sticky; top: var(--hd); z-index: 40; background: var(--paper); margin-top: clamp(32px, 4vw, 56px); padding-block: 10px; align-items: center; border-bottom: 1px solid var(--ink); }
.chips { grid-column: 1 / 9; display: flex; flex-wrap: wrap; gap: 4px 22px; }
.chips button { border: 0; background: none; padding: 0; min-height: 44px; font-size: var(--t-small); color: var(--ink-2); display: inline-flex; gap: 6px; align-items: baseline; }
.chips button span { font: italic 400 15px/1 var(--serif); }
.chips button[aria-pressed="true"] { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: .45em; text-decoration-thickness: 2px; }
.chips button:hover { color: var(--indigo); }
.count { grid-column: 9 / 11; font-size: var(--t-cap); color: var(--ink-2); text-align: right; }
.sort { grid-column: 11 / 13; justify-self: end; display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-small); }
.sort span { color: var(--ink-2); white-space: nowrap; }
.shop-grid-wrap { padding-top: clamp(40px, 5vw, 80px); }
.shop-grid { row-gap: clamp(48px, 6vw, 96px); align-items: start; }
.card { position: relative; min-width: 0; }
.card.hide { display: none; }
.card[data-slot="0"] { grid-column: 1 / 6; }
.card[data-slot="1"] { grid-column: 7 / 10; margin-top: clamp(40px, 9vw, 150px); }
.card[data-slot="2"] { grid-column: 10 / 13; margin-top: clamp(16px, 3vw, 52px); }
.card[data-slot="3"] { grid-column: 1 / 4; margin-top: clamp(16px, 3vw, 52px); }
.card[data-slot="4"] { grid-column: 4 / 7; margin-top: clamp(40px, 10vw, 170px); }
.card[data-slot="5"] { grid-column: 8 / 13; }
.card-cap { padding-top: 12px; }
.card-no { font-size: var(--t-cap); color: var(--ink-2); }
.card-name { font-size: var(--t-3); line-height: 1.12; letter-spacing: -.012em; margin: 4px 0 4px; }
.card[data-slot="0"] .card-name, .card[data-slot="5"] .card-name { font-size: var(--t-2); line-height: 1.02; }
.card-name a { text-decoration: none; }
.card-name a:hover { color: var(--indigo); }
.card-meta { display: flex; gap: 14px; font-size: var(--t-small); align-items: baseline; }
.card-meta .pr { font-weight: 600; }
.card-cols { color: var(--ink-2); font-size: var(--t-cap); }
.qa { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; margin-top: 8px; font-size: var(--t-cap); }
.qa-l { color: var(--ink-2); margin-right: 6px; }
.qa button { min-width: 40px; min-height: 40px; padding: 0 8px; border: 1px solid transparent; background: none; font-size: var(--t-cap); font-weight: 600; }
.qa button:hover { border-color: var(--ink); }
.qa button.added { background: var(--indigo); color: var(--white); border-color: var(--indigo); }
.qa-open { display: none; }
@media (hover: hover) and (pointer: fine) {
  .card .qa { opacity: .0; transform: translateY(4px); transition: opacity .3s, transform .3s; }
  .card:hover .qa, .card:focus-within .qa, .card-rel .qa { opacity: 1; transform: none; }
}
.card-rel .qa { display: none; }
.tile { align-self: start; border-top: 1px solid var(--ink); padding-top: 14px; }
.tile-q { font: italic 400 var(--t-3)/1.25 var(--serif); letter-spacing: -.005em; margin-bottom: 8px; }
.card.tile[data-slot="4"], .card.tile[data-slot="1"] { margin-top: clamp(40px, 9vw, 150px); }
.shop-help .help-h { grid-column: 1 / -1; margin-bottom: var(--s4); }
.help-c { grid-column: span 4; font-size: var(--t-small); border-top: 1px solid var(--ink); padding-top: 14px; }
.help-c p { color: var(--ink-2); }
@media (max-width: 900px) {
  .chips { grid-column: 1 / -1; }
  .count { grid-column: 1 / 7; text-align: left; }
  .sort { grid-column: 7 / 13; }
}
@media (max-width: 720px) {
  .shop-h, .shop-intro { grid-column: 1 / -1; }
  .shop-intro { margin-top: 16px; }
  .chips { gap: 0 16px; }
  .shop-bar { position: static; }
  .count { grid-column: 1 / 4; }
  .sort { grid-column: 4 / 7; }
  .sort span { display: none; }
  .shop-grid { row-gap: 40px; }
  .card[data-slot] { grid-column: span 3; margin-top: 0; }
  .card[data-slot="0"], .card[data-slot="5"] { grid-column: 1 / -1; }
  .card[data-slot="2"], .card[data-slot="4"] { margin-top: 36px; }
  .card[data-slot="0"] .card-name, .card[data-slot="5"] .card-name { font-size: 32px; }
  .card-name { font-size: 21px; }
  .card-meta { flex-wrap: wrap; gap: 2px 10px; }
  .qa { display: none; }
  .qa-open { display: inline-flex; margin-top: 6px; min-height: 44px; }
  .card.qa-on .qa { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .card.qa-on .qa-l { grid-column: 1 / -1; }
  .card.qa-on .qa button { min-height: 44px; border-color: var(--ink); }
  .card[data-slot="0"].qa-on .qa, .card[data-slot="5"].qa-on .qa { grid-template-columns: repeat(5, 1fr); }
  .help-c { grid-column: 1 / -1; margin-bottom: 24px; }
  .shop-help .help-h { grid-column: 1 / -1; }
}

/* ---------- product page ---------- */
.pdp-top { padding-top: clamp(20px, 3vw, 44px); align-items: start; }
.pdp-gal { grid-column: 1 / 8; }
.pg-main { margin: 0; }
.pg-main figcaption, .pg-f figcaption { padding-top: 10px; color: var(--ink-2); }
.pg-more { display: grid; grid-template-columns: 1fr 1fr; gap: var(--g); margin-top: var(--g); }
.pg-more:empty { display: none; }
.pg-fab { margin: var(--g) 0 0; }
.pg-fab-i { position: relative; overflow: hidden; background: var(--photo); }
.pg-fab-i img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.pg-fab figcaption { padding-top: 10px; color: var(--ink-2); }
.pg-f { margin: 0; }
.pg-more .pg-f:only-child { grid-column: 1 / -1; }
.pg-more .pg-f:only-child img { aspect-ratio: 16 / 10; }
.pdp-info { grid-column: 9 / 13; position: sticky; top: calc(var(--hd) + 20px); }
.crumbs { display: flex; gap: 8px; font-size: var(--t-cap); color: var(--ink-2); }
.crumbs a { text-decoration: none; min-height: 32px; display: inline-flex; align-items: center; }
.crumbs a:hover { text-decoration: underline; color: var(--ink); }
.pdp-no { font-size: var(--t-cap); color: var(--ink-2); margin-top: 18px; }
.pdp-name { font-size: clamp(40px, 4.4vw, 72px); line-height: .98; letter-spacing: -.022em; margin: 6px 0 14px; }
.pdp-price { font-size: 21px; font-weight: 600; }
.pdp-lead { margin-top: 14px; color: var(--ink); }
.opt { margin-top: 24px; border-top: 1px solid var(--rule); padding-top: 14px; }
.opt-row { display: flex; justify-content: space-between; align-items: center; }
.opt-l { font-size: var(--t-small); color: var(--ink-2); }
.opt-l b { color: var(--ink); font-weight: 600; margin-left: 4px; }
.swatches { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.swatch { width: 44px; height: 44px; border-radius: 50%; border: 1px solid transparent; background: none; padding: 5px; display: grid; place-items: center; }
.swatch::before { content: ''; width: 100%; height: 100%; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(31, 31, 31, .18); }
.swatch[aria-pressed="true"] { border-color: var(--ink); }
.swatch:hover { border-color: var(--stone); }
.sw-note { font-size: var(--t-cap); color: var(--ink-2); margin-top: 6px; }
.sizes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 10px; }
.sizes button { min-height: 50px; border: 1px solid var(--rule); background: none; font-weight: 600; font-size: var(--t-small); }
.sizes button:hover { border-color: var(--ink); }
.sizes button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.sizes.need button { border-color: var(--indigo); }
.one-size { margin-top: 6px; font-weight: 600; }
.sg-btn { min-height: 44px; font-size: var(--t-small); }
.buy { display: flex; gap: 10px; margin-top: 22px; }
.buy .qty { height: 50px; }
.btn-add { flex: 1; }
.buy-msg { font-size: var(--t-cap); margin-top: 10px; min-height: 1.4em; font-weight: 600; }
.pdp-ship { margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--rule); font-size: var(--t-cap); color: var(--ink-2); display: grid; gap: 8px; }
.pdp-ship .region { color: var(--ink); }
.pdp-notes { margin-top: var(--sec); }
.note { grid-column: span 3; font-size: var(--t-small); }
.note p { color: var(--ink-2); }
.note p + p { margin-top: 10px; }
.note ul li { padding: 6px 0; border-bottom: 1px solid var(--rule); color: var(--ink-2); }
.note .h3 { font: 400 var(--t-3)/1.1 var(--serif); letter-spacing: -.01em; margin-bottom: 12px; }
.rel-h { grid-column: 1 / -1; margin-bottom: var(--s4); font-size: var(--t-2); line-height: 1.02; }
.rel-grid .card { grid-column: span 4; }
.rel-grid .card-name { font-size: var(--t-3); }
@media (max-width: 900px) {
  .pdp-gal { grid-column: 1 / 8; }
  .pdp-info { grid-column: 8 / 13; }
  .note { grid-column: span 6; margin-bottom: 28px; }
}
@media (max-width: 720px) {
  .pdp-top { padding-top: 0; }
  .pdp-gal { grid-column: 1 / -1; margin-inline: calc(-1 * var(--m)); }
  .pg-main figcaption { padding-inline: var(--m); }
  .pg-more { padding-inline: var(--m); }
  .pdp-info { grid-column: 1 / -1; position: static; margin-top: 18px; }
  .pdp-name { font-size: 44px; }
  .note { grid-column: 1 / -1; }
  .rel-grid .card { grid-column: span 3; }
  .rel-grid .card:first-child { grid-column: 1 / -1; }
}

/* size guide */
.sg-panel > p { margin-top: 16px; font-size: var(--t-small); color: var(--ink-2); }
.unit { display: flex; gap: 0; margin-top: 18px; border: 1px solid var(--ink); width: max-content; }
.unit button { min-height: 44px; padding: 0 16px; border: 0; background: none; font-size: var(--t-small); font-weight: 600; }
.unit button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.sgt { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: var(--t-small); }
.sgt th, .sgt td { text-align: left; padding: 11px 8px 11px 0; border-bottom: 1px solid var(--rule); font-weight: 400; }
.sgt thead th { font-size: var(--t-cap); color: var(--ink-2); border-bottom-color: var(--ink); }
.sgt tbody th { font: 400 20px/1 var(--serif); }
.sg-h { font: 400 24px/1.1 var(--serif); margin-top: 28px; margin-bottom: 8px; }
.sg-how { list-style: decimal; padding-left: 20px; font-size: var(--t-small); color: var(--ink-2); }
.sg-how li { padding: 4px 0; }
.sg-how b { color: var(--ink); }
.sg-fit { font-weight: 600; color: var(--ink) !important; }

/* ---------- cart page ---------- */
.cart-top { padding-top: clamp(28px, 4vw, 56px); padding-bottom: var(--sec); }
.cart-h { grid-column: 1 / -1; margin-bottom: clamp(24px, 3vw, 48px); }
.cart-lines { grid-column: 1 / 8; border-top: 1px solid var(--ink); }
.cart-lines .ln { grid-template-columns: 132px 1fr auto; gap: 20px; padding: 22px 0; }
.cart-lines .ln-name { font-size: 26px; }
.cart-empty { padding: 32px 0; font: 400 28px/1.2 var(--serif); }
.cart-empty a { font: 600 var(--t-small) var(--sans); display: inline-block; margin-top: 8px; }
.sugg-l { font-size: var(--t-small); color: var(--ink-2); margin-top: 8px; }
.sugg { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--g); margin-top: 16px; }
.sugg a { text-decoration: none; display: block; }
.sugg img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--photo); }
.sugg b { display: block; font: 400 19px/1.15 var(--serif); margin-top: 10px; }
.sugg span { font-size: var(--t-cap); color: var(--ink-2); }
.sugg a:hover b { color: var(--indigo); }
.cart-sum { grid-column: 9 / 13; position: sticky; top: calc(var(--hd) + 20px); border-top: 1px solid var(--ink); padding-top: 16px; align-self: start; }
.cart-sum .region { margin-top: 8px; }
.cart-sum .btn-wide { margin-top: 18px; }
.sum-small { margin-top: 12px; font-size: var(--t-cap); color: var(--ink-2); }
.cart-deliv { background: var(--indigo); color: var(--paper); }
.cart-deliv .rh-mid { color: rgba(244, 244, 242, .75); }
.cart-deliv .h2 { grid-column: 1 / 9; margin-bottom: var(--s4); }
.cd-intro { grid-column: 1 / 5; font-size: var(--t-small); }
.cd-table { grid-column: 6 / 13; }
.cd-notes { grid-column: 6 / 13; margin-top: var(--s4); font-size: var(--t-small); display: grid; gap: 10px; color: rgba(244, 244, 242, .82); }
.cd-notes b { color: var(--paper); }
.cd-notes p.cur { color: var(--paper); }
.cart-deliv :focus-visible { outline-color: var(--paper); }
.cart-ret .h2 { grid-column: 1 / 9; margin-bottom: var(--s4); }
.cr-a { grid-column: 1 / 7; }
.cr-lead { font-size: var(--t-lead); margin-bottom: var(--s3); }
.ret-steps { border-top: 1px solid var(--ink); }
.ret-steps p { font-size: var(--t-small); }
.cr-b { grid-column: 8 / 13; font-size: var(--t-small); }
.cr-b .h3 { font: 400 var(--t-3)/1.1 var(--serif); margin: 0 0 8px; }
.cr-b p { color: var(--ink-2); margin-bottom: 26px; }
.cr-b p a { color: var(--ink); }
@media (max-width: 900px) {
  .cart-lines, .cart-sum, .cd-intro, .cd-table, .cd-notes, .cr-a, .cr-b, .cart-deliv .h2, .cart-ret .h2 { grid-column: 1 / -1; }
  .cart-sum { position: static; margin-top: var(--s4); }
  .cd-table { margin-top: var(--s4); }
  .cr-b { margin-top: var(--s4); }
}
@media (max-width: 720px) {
  .cart-lines .ln { grid-template-columns: 88px 1fr; gap: 14px; }
  .cart-lines .ln-price { grid-column: 2; }
  .cart-lines .ln-name { font-size: 22px; }
}

/* ---------- WebGL planes ---------- */
.sbgl-canvas { z-index: 6 !important; }
.sbgl-on img { transition: opacity .3s; }
.sbgl-on { background: transparent !important; }
.hd, .menu, .drawer, .sg { isolation: isolate; }

/* ---------- reveal motion (only with JS and motion allowed) ---------- */
.js.motion .rv { opacity: 0; transform: translateY(26px); }
.js.motion .rv.in { opacity: 1; transform: none; transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out); }
.split-line { overflow: clip; padding-bottom: .06em; margin-bottom: -.06em; }

/* ---------- page transition: the next page is laid over like a turned page ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: ll-out .7s var(--ease) both; }
::view-transition-new(root) { animation: ll-in .7s var(--ease) both; }
::view-transition-group(*) { animation-duration: .7s; animation-timing-function: var(--ease); }
@keyframes ll-out { to { transform: translateX(-9%); opacity: .55; filter: brightness(.94); } }
@keyframes ll-in { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  * { scroll-behavior: auto !important; }
}
html.noscroll { overflow: hidden; }