/* Bauer Arts — pitch site for Terry Bauer (mummysboy.com/bauerarts/).
   The studio at night for the first screen (the film, the name, the one red button), then a clean
   gallery (owner, 2026-11-08): the art first, on uniform cards on a white ground, with the gallery
   wall label and the red dot for sold works. Charcoal header and footer.
   Syne (display, labels, nav, buttons) + Newsreader (text; italic for artwork titles).

   Contrast (node pitch/tools/contrast.mjs), WCAG 2.1:
     bone   #EEE8DC on wall   #151311  15.19:1  text
     bone   #EEE8DC on wall-2 #1F1C19  13.90:1  text
     bone   #EEE8DC on foot   #0F0E0C  15.81:1  text
     muted  #A69E92 on wall   #151311   7.00:1  text
     muted  #A69E92 on wall-2 #1F1C19   6.40:1  text
     muted  #A69E92 on foot   #0F0E0C   7.28:1  text
     white  #FFFFFF on dot    #C9372C   5.16:1  text (the filled button, the bag's count dot)
     white  #FFFFFF on dot-dk #A92C22   6.84:1  text (button hover, ::selection)
     tint   #F08A7E on wall   #151311   7.63:1  text (form errors, notice eyebrow)
     tint   #F08A7E on wall-2 #1F1C19   6.98:1  text
     dot    #C9372C on wall   #151311   3.59:1  UI only (the sold dot, bullets: never text)
   The white gallery (ground paper #FBFAF6, card mats plaster #EFEBE4; both checked here and below):
     g-ink         #1A1714 on plaster  15.02:1  text
     g-muted       #5C554B on plaster   6.19:1  text
     g-line-strong #7A7266 on plaster   3.99:1  UI (the format options' borders)
     dot           #C9372C on plaster   4.35:1  UI (the red dot, the button's edge)
   Checkout (paper #FBFAF6, white fields):
     dot-dk  #A92C22 on paper   6.55:1  text (field errors)
     g-muted #5C554B on paper   7.04:1  text
     white   #FFFFFF on g-muted 7.35:1  text (the quantity badge)
     g-line-strong #7A7266 on white 4.74:1  UI (field borders; the card form's sample text)
   Form popouts (--pk-*, picker.css): the inquiry list is the dark field (bone 13.90:1 and
   muted 6.40:1 on wall-2; hover wall on bone 15.19:1; chosen white on dot 5.16:1; the tick,
   dot on wall-2, 3.28:1 UI). The checkout list is the white field (g-ink on white, g-muted
   on white 7.35:1, hover g-ink on plaster 15.02:1, chosen white on dot 5.16:1, the tick dot
   on white 5.16:1).
   Demo notice (--pd-*): a wall .96 sheet with bone, muted and tint on it as above; its filled
   button is the site's (white on dot, 5.16:1), its ghost button bone on the sheet.
   Over the hero: bone on the paint under a local scrim (≤ .5) and a soft shadow; the name is
   display size (large text, 3:1). */

:root {
  --wall: #151311;
  --wall-2: #1F1C19;
  --foot-bg: #0F0E0C;
  --bone: #EEE8DC;
  --muted: #A69E92;
  --white: #FFFFFF;
  --dot: #C9372C;
  --dot-dk: #A92C22;
  --tint: #F08A7E;
  --line: rgba(238, 232, 220, .18);
  --line-strong: rgba(238, 232, 220, .42);
  --scrim: rgba(12, 10, 9, .5);
  --scrim-0: rgba(12, 10, 9, 0);
  --shade: rgba(0, 0, 0, .6);
  --backdrop: rgba(10, 9, 8, .8);
  --focus: 2px solid var(--bone);
  --print-ink: #000000;
  --print-muted: #333333;
  /* The shop's white gallery (contrast in the table above). */
  --plaster: #EFEBE4;
  --paper: #FBFAF6;
  --g-ink: #1A1714;
  --g-muted: #5C554B;
  --g-line: rgba(26, 23, 20, .14);
  --g-line-strong: #7A7266;
  --g-shade: rgba(48, 38, 28, .22);
  --xpay-bg: #000000;
  --xpay-ink: #FFFFFF;

  --display: "Syne", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --text: "Newsreader", "Iowan Old Style", Georgia, serif;

  --fs-hero: clamp(3.6rem, 18vw, 13.5rem);
  --fs-h1: clamp(1.9rem, 1.3rem + 2.8vw, 3.6rem);
  --fs-h2: clamp(1.45rem, 1.1rem + 1.5vw, 2.3rem);
  --fs-close: var(--fs-h2);
  --fs-h3: clamp(1.25rem, 1.6vw + .9rem, 1.6rem);
  --fs-body: clamp(1.0625rem, .35vw + .98rem, 1.1875rem);
  --fs-lead: clamp(1.3rem, 1vw + 1.05rem, 1.65rem);
  --fs-title: 1.0625rem;
  --fs-label: .78rem;
  --fs-small: .875rem;
  --fs-nav: .95rem;
  --fs-btn: .8rem;

  --gutter: clamp(18px, 5vw, 56px);
  --wide: 1400px;
  --read: 38rem;
  --measure: 65ch;
  --s1: 8px;
  --s2: 14px;
  --s3: 22px;
  --s4: 36px;
  --s5: clamp(56px, 8vw, 96px);
  --s6: clamp(80px, 12vw, 168px);
  --top-h: 64px;

  --hair: 1px;
  --rule: 1.5px;
  --radius: 0;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-hover: 160ms;
  --t-btn: 200ms;

  /* The demo notice (scripts/pitch-demo.js) in the site's own clothes (styles.md §12). */
  --pd-bg: rgba(21, 19, 17, .96);
  --pd-ink: var(--bone);
  --pd-muted: var(--muted);
  --pd-note: var(--bone);
  --pd-accent: var(--tint);
  --pd-accent-line: var(--dot);
  --pd-rule: var(--line-strong);
  --pd-rule-height: 1px;
  --pd-sans: var(--display);
  --pd-serif: var(--text);
  --pd-label-font: var(--display);
  --pd-label-stretch: 100%;
  --pd-label-weight: 600;
  --pd-title-font: var(--display);
  --pd-title-weight: 800;
  --pd-title-stretch: 100%;
  --pd-title-size: clamp(1.8rem, 5vw, 2.6rem);
  --pd-title-leading: 1;
  --pd-title-tracking: -.015em;
  --pd-title-case: none;
  --pd-title: var(--bone);
  --pd-em: var(--bone);
  --pd-em-style: normal;
  --pd-strong-weight: 700;
  --pd-radius: 0;
  --pd-btn-font: var(--display);
  --pd-btn-stretch: 100%;
  --pd-btn-weight: 600;
  --pd-btn-tracking: .09em;
  --pd-btn-border: 1.5px;
  --pd-btn-pad: 24px;
  --pd-btn-bg: var(--dot);
  --pd-btn-ink: var(--white);
  --pd-btn-hover: var(--dot-dk);
  --pd-ghost-line: var(--line-strong);
  --pd-ghost-ink: var(--bone);
  --pd-ghost-hover-line: var(--bone);
  --pd-ghost-hover: var(--bone);
  --pd-ghost-hover-ink: var(--wall);
  --pd-focus: 2px solid var(--bone);
  --pd-link: var(--bone);
  --pd-link-line: var(--dot);
  /* The form popouts (assets/picker.js) wear the form they open from: styles.md §12.
     The inquiry form's dark field here; the checkout's white one under .co below. */
  --pk-bg: var(--wall-2);
  --pk-ink: var(--bone);
  --pk-muted: var(--muted);
  --pk-line: var(--line-strong);
  --pk-radius: var(--radius);
  --pk-shadow: 0 14px 32px var(--shade);
  --pk-font: var(--text);
  --pk-size: 1.0625rem;
  --pk-label-font: var(--display);
  --pk-label-size: var(--fs-label);
  --pk-label-weight: 600;
  --pk-label-tracking: .08em;
  --pk-label-case: uppercase;
  --pk-row-h: 48px;
  --pk-hover-bg: var(--bone);
  --pk-hover-ink: var(--wall);
  --pk-sel-bg: var(--dot);
  --pk-sel-ink: var(--white);
  --pk-accent: var(--dot);
  --pk-focus: var(--focus);
  --pk-placeholder: var(--muted);
  --pk-speed: var(--t-hover);
  --pk-ease: var(--ease);

  color-scheme: dark;
}

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: none; }
::view-transition-new(root) { animation: page-enter 450ms ease-out both; }
@keyframes page-enter { from { opacity: 0; } to { opacity: 1; } }

*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--wall);
  -webkit-text-size-adjust: 100%;
  scroll-padding-block-start: calc(var(--top-h) + 16px);
}
body {
  margin: 0;
  background: var(--wall);
  color: var(--bone);
  font: 400 var(--fs-body)/1.6 var(--text);
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a[href^="tel:"] { white-space: nowrap; font-variant-numeric: tabular-nums; }
.prose a, .foot a, .inq__aside a, .form__status a, .form__done a { overflow-wrap: anywhere; }
p, ul, figure, h1, h2, h3 { margin: 0; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.02; text-wrap: balance; }
p { text-wrap: pretty; }
i, em { font-style: italic; }
::selection { background: var(--dot-dk); color: var(--white); }
:focus-visible { outline: var(--focus); outline-offset: 3px; }
.wrap {
  width: 100%;
  max-width: var(--wide);
  margin-inline: auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
}
.skip {
  position: absolute; left: var(--gutter); top: -60px; z-index: 100;
  background: var(--bone); color: var(--wall); padding: 12px 16px;
  font: 600 var(--fs-small)/1 var(--display);
}
.skip:focus { top: 12px; }
.is-locked, .is-locked body { overflow: hidden; }

/* ---------------------------------------------------------------- header */
.top {
  position: sticky; top: 0; z-index: 40;
  background: var(--wall);
  border-bottom: var(--hair) solid var(--line);
  padding-top: env(safe-area-inset-top);
  view-transition-name: top;
}
.top__bar { display: flex; align-items: center; gap: clamp(10px, 3.6vw, 14px); min-height: var(--top-h); }
.mark {
  display: inline-flex; align-items: baseline; gap: .32em;
  min-height: 44px; align-items: center;
  font: 800 clamp(.9rem, 4.4vw, 1.08rem)/1 var(--display); letter-spacing: .01em; text-transform: uppercase;
  text-decoration: none; color: var(--bone);
}
.mark span { font-weight: 500; letter-spacing: .14em; }
.top__nav { display: none; }
.top .top__act { display: none; flex: none; white-space: nowrap; }
.mark { margin-right: auto; }
.menu-btn {
  display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px;
  background: none; border: 0; color: var(--bone); cursor: pointer; padding: 0;
}
.menu-btn svg { width: 24px; height: 14px; fill: currentColor; }
.menu-btn:active { opacity: .7; }
/* The bag: an outline bag; its count sits in a red dot, the gallery's mark for a work spoken for. */
.bag-btn {
  position: relative; display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px;
  background: none; border: 0; padding: 0; color: var(--bone); cursor: pointer;
}
.bag-btn svg { width: 24px; height: 24px; }
.bag-btn:active { opacity: .7; }
.bag-btn__n {
  position: absolute; top: 4px; right: 1px; min-width: 19px; height: 19px; padding-inline: 5px;
  display: none; place-items: center; border-radius: 10px;
  background: var(--dot); color: var(--white); font: 700 .7rem/1 var(--display); font-variant-numeric: tabular-nums;
}
.bag-btn.has-items .bag-btn__n { display: grid; }
/* From 600px there's room for Shop in the row; on phones it's in the menu, the hero and the home page. */
@media (min-width: 600px) { .top .top__act { display: inline-flex; } }

/* On the home page the header sits on the paint until the hero scrolls away. */
.top--over { position: fixed; left: 0; right: 0; background: transparent; border-bottom-color: transparent; transition: background var(--t-btn) ease, border-color var(--t-btn) ease; }
.top--over.is-solid { background: var(--wall); border-bottom-color: var(--line); }
/* The hero carries the one button; the header's copy of it appears once the hero is gone. */
.top--over .top__act { transition: opacity var(--t-btn) ease, visibility var(--t-btn) ease; }
html.js .top--over:not(.is-solid) .top__act { opacity: 0; visibility: hidden; }

@media (min-width: 900px) {
  :root { --top-h: 76px; }
  .top__nav { display: flex; gap: clamp(20px, 2.4vw, 36px); margin-left: auto; }
  .top__nav a {
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px;
    font: 500 var(--fs-nav)/1 var(--display); text-decoration: none; color: var(--bone);
    border-bottom: var(--rule) solid transparent; transition: border-color var(--t-hover) ease;
  }
  .top__nav a[aria-current="page"] { border-bottom-color: var(--dot); }
  .top__act { margin-left: clamp(16px, 2vw, 28px); }
  .mark { margin-right: 0; }
  .bag-btn { margin-left: 4px; margin-right: -10px; }
  .menu-btn { display: none; }
  .mark { font-size: 1.2rem; }
}

/* The language switcher: in the footer and the menu sheet. */
.langs { display: flex; flex-wrap: wrap; gap: 0 var(--s2); margin-top: var(--s1); font: 500 var(--fs-small)/1 var(--display); }
.langs a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; text-decoration: none; border-bottom: var(--rule) solid transparent; }
.langs a[aria-current="true"] { border-bottom-color: var(--dot); }
@media (hover: hover) { .langs a:hover { text-decoration: underline; text-underline-offset: .25em; } }

/* ---------------------------------------------------------------- buttons, links */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 48px; padding-inline: 24px;
  font: 600 var(--fs-btn)/1 var(--display); letter-spacing: .09em; text-transform: uppercase;
  text-decoration: none; border-radius: var(--radius); cursor: pointer;
  transition: background-color var(--t-btn) ease, color var(--t-btn) ease, border-color var(--t-btn) ease;
}
.btn--dot { background: var(--dot); color: var(--white); border: 0; }
.btn--dot:active { background: var(--dot-dk); }
.btn--line { min-height: 44px; padding-inline: 16px; color: var(--bone); border: var(--rule) solid var(--line-strong); background: transparent; }
.btn--line:active { border-color: var(--bone); }
.btn:disabled { cursor: progress; background: var(--wall-2); color: var(--muted); border: var(--rule) solid var(--line-strong); }
.more {
  display: inline-flex; align-items: center; gap: .7em; min-height: 44px;
  font: 600 var(--fs-btn)/1 var(--display); letter-spacing: .09em; text-transform: uppercase;
  text-decoration: none; color: var(--bone);
}
.more::after { content: ""; width: 28px; height: var(--rule); background: var(--dot); transition: width var(--t-hover) ease; }
@media (hover: hover) {
  .btn--dot:hover { background: var(--dot-dk); }
  .btn--line:hover { border-color: var(--bone); }
  .more:hover::after { width: 44px; }
  .top__nav a:hover { border-bottom-color: var(--line-strong); }
  .mark:hover span { color: var(--muted); }
}

/* ---------------------------------------------------------------- the wall label */
.lbl { display: grid; gap: 3px; max-width: 30rem; }
.lbl__t { font: 400 var(--fs-title)/1.3 var(--text); color: var(--bone); }
.lbl__meta { font: 500 var(--fs-label)/1.45 var(--display); color: var(--muted); letter-spacing: .01em; }
.lbl__st {
  display: inline-flex; align-items: center; gap: .5em; margin-top: 2px;
  font: 600 var(--fs-label)/1.3 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--bone);
  font-variant-numeric: tabular-nums;
}
.lbl__st--nfs, .lbl__st--proof { color: var(--muted); }
.lbl__st--price { letter-spacing: .02em; font-size: .9rem; }
.lbl__note { font: 400 .98rem/1.5 var(--text); color: var(--muted); margin-top: 4px; }
.lbl__buy a {
  display: inline-flex; align-items: center; min-height: 44px;
  font: 600 var(--fs-label)/1.7 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--bone);
  text-decoration: underline; text-decoration-color: var(--dot); text-decoration-thickness: 1.5px; text-underline-offset: .28em;
}
/* The one-line caption the home page uses under a work. */
.cap { display: block; font: 400 var(--fs-title)/1.3 var(--text); color: var(--bone); }
.dot { display: inline-block; flex: none; width: .78em; height: .78em; border-radius: 50%; background: var(--dot); }

/* ---------------------------------------------------------------- home: the hero */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  height: 100vh; height: 100svh; min-height: 520px;
  background: var(--wall);
}
.hero__media, .hero__slide { position: absolute; inset: 0; }
.hero__slide { opacity: 0; }
.hero__slide:first-child { opacity: 1; }
.hero__still, .hero__still img, .hero__film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__slide picture, .hero__slide img { width: 100%; height: 100%; }
.hero__slide img { object-fit: cover; transform-origin: 30% 30%; }
.hero__slide--br img { transform-origin: 70% 70%; }
.hero__slide--tr img { transform-origin: 75% 25%; }
.hero::before {
  content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: 0;
  height: calc(var(--top-h) + 72px + env(safe-area-inset-top));
  background: linear-gradient(to bottom, var(--scrim), var(--scrim-0));
  pointer-events: none;
}
.hero__scrim {
  position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 62%;
  background: linear-gradient(to top, var(--scrim) 0%, var(--scrim) 22%, var(--scrim-0) 100%);
  pointer-events: none;
}
.hero__stack {
  position: absolute; z-index: 2; left: 0; right: 0;
  bottom: calc(env(safe-area-inset-bottom) + clamp(28px, 6vh, 64px));
  display: grid; justify-items: start; gap: clamp(18px, 3vh, 30px);
}
.hero__name {
  font: 800 var(--fs-hero)/.84 var(--display); letter-spacing: -.025em; color: var(--bone);
  text-shadow: 0 2px 28px var(--shade), 0 1px 3px var(--shade);
}
.hero__name span { display: block; }
.hero__pause {
  position: absolute; z-index: 3;
  right: max(var(--gutter), env(safe-area-inset-right));
  bottom: calc(env(safe-area-inset-bottom) + clamp(28px, 6vh, 64px));
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; padding: 0; cursor: pointer;
  background: var(--scrim); color: var(--bone); border: var(--rule) solid var(--line-strong);
}
.hero__pause svg { width: 14px; height: 14px; fill: currentColor; }
.hero__pause .i-play, .hero__pause.is-paused .i-pause { display: none; }
.hero__pause.is-paused .i-play { display: block; }

/* The film (site.js 3) fades up over its first frame. The slides below are its fallback, for a
   content document without the film. The slow push: 14 s a work, a 2 s crossfade, ≤ 6% scale; only with .is-moving (site.js
   adds it unless Reduce Motion or Save-Data), paused with .is-paused. */
@keyframes hero-fade { 0% { opacity: 0; } 4.76% { opacity: 1; } 33.33% { opacity: 1; } 38.1% { opacity: 0; } 100% { opacity: 0; } }
@keyframes hero-push { 0% { transform: scale(1); } 38.1% { transform: scale(1.06); } 100% { transform: scale(1.06); } }
.hero.is-moving .hero__slide { animation: hero-fade 42s linear infinite; }
.hero.is-moving .hero__slide img { animation: hero-push 42s linear infinite; }
.hero.is-moving .hero__slide:nth-child(1), .hero.is-moving .hero__slide:nth-child(1) img { animation-delay: -2s; }
.hero.is-moving .hero__slide:nth-child(2), .hero.is-moving .hero__slide:nth-child(2) img { animation-delay: 12s; }
.hero.is-moving .hero__slide:nth-child(3), .hero.is-moving .hero__slide:nth-child(3) img { animation-delay: 26s; }
.hero.is-paused .hero__slide, .hero.is-paused .hero__slide img { animation-play-state: paused; }

@media (min-width: 900px) {
  .hero__stack { bottom: clamp(40px, 8vh, 88px); }
  .hero__name { font-size: clamp(7rem, 14.5vw, 13.5rem); }
  .hero__scrim { width: 72%; height: 70%; right: auto; background: linear-gradient(to top right, var(--scrim) 0%, var(--scrim) 18%, var(--scrim-0) 70%); }
}

/* ---------------------------------------------------------------- home: works on the wall */
.hang {
  display: grid; gap: var(--s4);
  max-width: var(--wide); margin-inline: auto;
  padding-block: var(--s5) 0;
  padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
}
.hang__work { display: grid; gap: var(--s2); }
.hang__line { display: grid; gap: var(--s3); justify-items: start; }
.hang__line h2 { font-size: var(--fs-h2); font-weight: 700; letter-spacing: -.015em; max-width: 16ch; }
@media (min-width: 900px) {
  .hang { gap: clamp(40px, 5vw, 88px); align-items: end; }
  .hang--left { grid-template-columns: 7fr 5fr; }
  .hang--right { grid-template-columns: 5fr 6fr; align-items: start; }
  .hang--right .hang__work { grid-column: 2; grid-row: 1; }
  .hang--right .hang__line { order: 0; grid-column: 1; grid-row: 1; padding-top: clamp(40px, 8vw, 140px); justify-self: end; }
  .hang--right .hang__line h2 { text-align: left; }
  .hang--detail .hang__line { padding-top: clamp(24px, 4vw, 64px); }
}

.close { padding-block: var(--s5); }
.close__in { display: grid; gap: var(--s4); justify-items: start; }
.close h2 { font-size: var(--fs-close); font-weight: 700; line-height: 1.05; letter-spacing: -.015em; }

/* ---------------------------------------------------------------- inner pages */
.page-head { padding-block: clamp(24px, 4vw, 56px) var(--s3); }
.page-head + .series { padding-top: var(--s3); }
.page-head h1 { font-size: var(--fs-h1); font-weight: 700; line-height: 1.02; letter-spacing: -.02em; }
.page-head h1 span { display: block; }
.page-head__line { margin-top: var(--s3); font-size: var(--fs-lead); line-height: 1.4; color: var(--muted); max-width: 34rem; }
.page-head .more { margin-top: var(--s3); }
.jump {
  display: flex; flex-wrap: wrap; gap: 4px var(--s3); margin-top: var(--s2);
}
.jump a {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px;
  font: 600 var(--fs-btn)/1 var(--display); letter-spacing: .09em; text-transform: uppercase; text-decoration: none;
}
.jump a { border-bottom: var(--rule) solid transparent; }
.jump a[aria-current="true"] { border-bottom-color: var(--dot); }
@media (hover: hover) { .jump a:hover { color: var(--muted); } }

/* The cards (owner, 2026-11-08): every work on the same mat, whole and uncropped, then its label.
   Two columns on a phone (one under 340px), more as they fit, four from 1040. */
.series { padding-block: var(--s4) 0; scroll-margin-top: calc(var(--top-h) + 8px); }
.page-head + .series { padding-top: 0; }
.series__head { display: grid; gap: 4px; margin-bottom: var(--s3); }
.series__head h2 { font-size: var(--fs-h2); letter-spacing: -.015em; }
.series__head p { color: var(--muted); max-width: 36rem; }
.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(148px, 100%), 1fr)); gap: var(--s4) clamp(14px, 2vw, 24px); }
.card { display: grid; align-content: start; gap: var(--s2); min-width: 0; scroll-margin-top: calc(var(--top-h) + 16px); }
.card__a { display: grid; gap: var(--s2); color: inherit; text-decoration: none; }
.card__pic {
  position: relative; display: block; aspect-ratio: 4 / 5; width: 100%; padding: 0;
  background: var(--plaster); border: 0; cursor: pointer; color: inherit; overflow: hidden;
}
.card__pic img { position: absolute; left: 7%; top: 7%; width: 86%; height: 86%; max-width: none; object-fit: contain; transition: transform var(--t-hover) ease; }
.card .tag { width: 100%; }
@media (hover: hover) {
  .card__a:hover .card__pic img, .dish-thumb:hover img { transform: scale(1.02); }
  .card__a:hover .tag__t { text-decoration: underline; text-decoration-color: var(--dot); text-decoration-thickness: 1.5px; text-underline-offset: .18em; }
}
.card__a:focus-visible { outline-offset: 6px; }
.tag > .tag__st { display: inline-flex; align-items: center; gap: .5em; margin-top: 4px; font: 600 var(--fs-label)/1.3 var(--display); letter-spacing: .08em; text-transform: uppercase; }
@media (min-width: 1040px) { .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Home, after the hero. */
.sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px var(--s3); margin-bottom: var(--s3); }
.sec-head h2 { font-size: var(--fs-h2); letter-spacing: -.015em; }
.picks { padding-block: var(--s5) var(--s5); }
.meet { padding-block: var(--s5); border-top: var(--hair) solid var(--line); }
.meet__grid { display: grid; gap: var(--s4); }
.meet__pic { display: grid; gap: var(--s2); }
.meet__pic img { width: 100%; }
.meet__text { display: grid; gap: var(--s3); justify-items: start; align-content: start; }
.meet__text h2 { font-size: var(--fs-h2); letter-spacing: -.015em; }
.quote { margin: 0; display: grid; gap: 4px; padding-left: var(--s2); border-left: var(--rule) solid var(--dot); }
.quote p { font: italic 400 var(--fs-lead)/1.3 var(--text); }
.quote footer { font: 500 var(--fs-label)/1.4 var(--display); color: var(--muted); }
.clip { display: grid; gap: var(--s1); min-width: 0; }
.clip video { width: 100%; height: auto; background: var(--wall); }
.clip--tall video { aspect-ratio: 9 / 16; max-height: 78vh; max-height: 78svh; width: auto; max-width: 100%; }
.cap--clip { display: grid; gap: 2px; }
.clip__meta { font: 500 var(--fs-label)/1.4 var(--display); color: var(--muted); }
.ask { padding-block: var(--s5); background: var(--plaster); }
.ask__in { display: grid; gap: var(--s3); justify-items: start; }
.ask h2 { font-size: var(--fs-h2); letter-spacing: -.015em; margin-bottom: 6px; }
.ask p { color: var(--muted); max-width: 36rem; }
@media (min-width: 900px) {
  .meet__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 4fr) minmax(0, 3fr); gap: clamp(32px, 4vw, 64px); align-items: start; }
  .ask__in, .close__in { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}

/* About: the story, chapter by chapter, and Terry's own reels. */
.story { padding-block: var(--s5) 0; }
.story h2, .reels h2 { font-size: var(--fs-h2); letter-spacing: -.015em; margin-bottom: var(--s3); }
.story__list { list-style: none; margin: 0; padding: 0; display: grid; }
.chap { display: grid; gap: var(--s2); padding-block: var(--s4); border-top: var(--hair) solid var(--line); }
.chap__y { font: 600 var(--fs-small)/1.6 var(--display); font-variant-numeric: tabular-nums; color: var(--muted); }
.chap__t { display: grid; gap: var(--s1); max-width: 34rem; }
.chap__t h3 { font-size: var(--fs-h3); letter-spacing: -.01em; }
.chap__pic { display: grid; gap: var(--s1); max-width: 460px; }
.chap__pic img { width: 100%; }
.reels { padding-block: var(--s5) 0; }
.reels__grid { display: grid; gap: var(--s4); align-items: start; justify-items: start; }
@media (min-width: 900px) {
  .chap { grid-template-columns: minmax(0, 1fr) minmax(0, 5fr) minmax(0, 3fr); gap: clamp(32px, 4vw, 64px); align-items: start; }
  .reels__grid { grid-template-columns: repeat(2, minmax(0, 28rem)); }
}
@media (min-width: 600px) and (max-width: 899px) {
  .chap { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--s3); }
  .chap__y { grid-column: 1 / -1; }
}

/* The popout: a bottom sheet on phones, a centred card wider up. */
.dish {
  margin: auto 0 0; width: 100%; max-width: 100%; max-height: 92vh; max-height: 92dvh;
  padding: 0; border: 0; border-radius: var(--radius); overflow: auto; overscroll-behavior: contain;
  background: var(--wall-2); color: var(--bone);
}
.dish::backdrop { background: var(--backdrop); }
.dish__in { position: relative; display: grid; }
.dish__close {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 44px; height: 44px; display: grid; place-items: center; padding: 0; cursor: pointer;
  background: var(--wall-2); color: var(--bone); border: 0;
}
.dish__close svg { width: 16px; height: 16px; }
.dish__pic { background: var(--wall); display: grid; place-items: center; padding: var(--s3); padding-top: 52px; }
.dish__pic img { width: auto; max-width: 100%; max-height: 62vh; max-height: 62dvh; object-fit: contain; }
.dish__lbl { display: grid; gap: var(--s2); justify-items: start; padding: var(--s3) var(--gutter) calc(var(--s4) + env(safe-area-inset-bottom)); }
.dish__t { font: 400 clamp(1.5rem, 3vw, 2.1rem)/1.15 var(--text); }
.dish__body { display: grid; gap: 4px; }
.dish__body .lbl__t, .dish__body .lbl__buy { display: none; }
.dish__ask { margin-top: var(--s1); }
@media (min-width: 900px) {
  .dish { margin: auto; width: min(1180px, 92vw); max-height: 90vh; }
  .dish__in { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .dish__pic { padding: var(--s4); min-height: 60vh; }
  .dish__pic img { max-height: 78vh; }
  .dish__lbl { align-content: end; padding: var(--s5) var(--s4) var(--s4); }
}

/* About */
.bio__grid { display: grid; gap: var(--s4); }
.bio__pic { display: grid; gap: var(--s2); max-width: 560px; }
.bio__lead { font-size: var(--fs-lead); line-height: 1.35; }
.prose { display: grid; gap: 1em; max-width: var(--read); }
@media (min-width: 600px) {
  .bio__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(48px, 6vw, 112px); align-items: start; }
  .bio__text { padding-top: var(--s4); }
}
.cv { padding-block: var(--s5) 0; }
.cv__grid { display: grid; gap: var(--s3); }
.cv h2 { font-size: var(--fs-h2); letter-spacing: -.015em; }
.cv__list { list-style: none; padding: 0; }
.cv__list li { display: grid; grid-template-columns: 5.2rem 1fr; gap: var(--s2); padding-block: var(--s2); border-top: var(--hair) solid var(--line); }
.cv__list li:last-child { border-bottom: var(--hair) solid var(--line); }
.cv__y { font: 600 var(--fs-small)/1.6 var(--display); font-variant-numeric: tabular-nums; color: var(--muted); }
.cv__w { color: var(--muted); }
.cv__w b { display: block; font: 600 1.02rem/1.35 var(--display); color: var(--bone); margin-bottom: 2px; }
@media (min-width: 900px) { .cv__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(48px, 6vw, 112px); } }

/* Inquire */
.inq { padding-block: var(--s3) var(--s6); }
.inq__grid { display: grid; gap: var(--s5); }
.form { display: grid; gap: var(--s3); max-width: 40rem; }
.field { display: grid; gap: var(--s1); }
.field label { font: 600 var(--fs-label)/1.3 var(--display); letter-spacing: .08em; text-transform: uppercase; }
.opt { font-weight: 500; letter-spacing: .02em; text-transform: none; color: var(--muted); }
.hint { font-size: var(--fs-small); color: var(--muted); }
input, select, textarea, .field .pk__btn {
  width: 100%; min-height: 50px; padding: 12px 14px;
  font: 400 1.0625rem/1.4 var(--text); color: var(--bone);
  background: var(--wall-2); border: var(--rule) solid var(--line-strong); border-radius: var(--radius);
  transition: border-color var(--t-hover) ease;
}
textarea { resize: vertical; min-height: 140px; }
select {
  appearance: none; padding-right: 44px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--bone) 50%), linear-gradient(135deg, var(--bone) 50%, transparent 50%);
  background-position: calc(100% - 22px) 52%, calc(100% - 16px) 52%;
  background-size: 6px 6px; background-repeat: no-repeat;
}
input:focus-visible, select:focus-visible, textarea:focus-visible, .field .pk__btn:focus-visible { outline: var(--focus); outline-offset: 1px; border-color: var(--bone); }
.field .pk.is-open .pk__btn { border-color: var(--bone); }
[aria-invalid="true"] { border-color: var(--tint); }
.form__err { font: 500 var(--fs-small)/1.4 var(--display); color: var(--tint); }
.form__send { justify-self: start; min-width: 10rem; }
.form__status { min-height: 1.5em; font-size: var(--fs-small); color: var(--muted); }
.form__status[data-state="error"] { color: var(--bone); padding-left: var(--s2); border-left: 3px solid var(--dot); }
.form__status a { color: var(--bone); }
.form__done { display: grid; gap: var(--s2); justify-items: start; max-width: 36rem; }
.form__done h2 { font-size: var(--fs-h2); letter-spacing: -.015em; }
.form__done h2:focus { outline: none; }
.inq__aside { display: grid; gap: var(--s2); align-content: start; color: var(--muted); padding-top: var(--s2); border-top: var(--hair) solid var(--line); max-width: 24rem; }
.inq__aside a { color: var(--bone); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (min-width: 900px) { .inq__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(48px, 6vw, 112px); } }

.thanks .page-head { min-height: 50vh; }

/* Articles */
.posts { padding-block: var(--s3) var(--s6); }
.posts__list { list-style: none; padding: 0; columns: 1; column-gap: clamp(24px, 4vw, 56px); }
.post { break-inside: avoid; margin-bottom: clamp(40px, 6vw, 72px); }
.post__link { display: grid; gap: var(--s2); text-decoration: none; }
.post__pic { display: block; }
.post__pic img { width: 100%; }
.post__t { font: 700 var(--fs-h3)/1.15 var(--display); letter-spacing: -.01em; text-wrap: balance; }
.post__d { color: var(--muted); font-size: 1rem; line-height: 1.5; }
@media (hover: hover) { .post__link:hover .post__t { text-decoration: underline; text-decoration-color: var(--dot); text-decoration-thickness: 2px; } }
@media (min-width: 600px) { .posts__list { columns: 2; } }
@media (min-width: 1040px) { .posts__list { columns: 3; } }

.article { padding-bottom: var(--s6); }
.article__head { padding-block: clamp(32px, 7vw, 96px) var(--s4); display: grid; gap: var(--s2); justify-items: start; }
.article__crumb a, .article__date { display: inline-flex; align-items: center; min-height: 44px; font: 600 var(--fs-label)/1 var(--display); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); text-decoration: none; }
.article__date { min-height: 0; }
.article__head h1 { font-size: clamp(2rem, 4.6vw, 3.8rem); font-weight: 700; line-height: 1; letter-spacing: -.02em; max-width: 20ch; }
.article__head h1 span { display: block; }
.article__pic { margin-bottom: var(--s5); }
.article__pic img { width: auto; max-width: 100%; max-height: min(80vh, 900px); }
.article__body { max-width: var(--measure); }
.article__body p, .article__body li { max-width: var(--measure); hyphens: auto; }
.article__body h2 { font-size: var(--fs-h3); letter-spacing: -.01em; margin-top: 1.4em; }
.article__body ul { list-style: none; padding: 0; display: grid; gap: .5em; }
.article__body li { position: relative; padding-left: 1.4em; }
.article__body li::before { content: ""; position: absolute; left: 0; top: .62em; width: .5em; height: .5em; border-radius: 50%; background: var(--dot); }
.article__body a { text-decoration-color: var(--dot); text-decoration-thickness: 1.5px; }
.article__foot { display: grid; gap: var(--s3); justify-items: start; margin-top: var(--s5); padding-top: var(--s4); border-top: var(--hair) solid var(--line); max-width: var(--measure); }
.article__next { color: var(--muted); }
.article__next a { color: var(--bone); }

/* ---------------------------------------------------------------- the shop: a white gallery */
/* Everything after the hero is a clean gallery (owner, 2026-11-08, after L'Original's clean look):
   white ground, the art on its mat, the charcoal header and footer around it. The bag lives in
   the browser (site.js 6). */
.gallery {
  /* Inside the gallery the text tokens turn dark: every rule that sets text in --bone or
     --muted reads correctly on the plaster without a second set of rules. */
  --bone: var(--g-ink);
  --muted: var(--g-muted);
  --line: var(--g-line);
  --line-strong: var(--g-line-strong);
  --focus: 2px solid var(--g-ink);
  --shade: var(--g-shade);
  --wall-2: var(--white);
  --pk-bg: var(--white); --pk-ink: var(--g-ink); --pk-muted: var(--g-muted); --pk-line: var(--g-line-strong);
  --pk-shadow: 0 14px 32px var(--g-shade); --pk-hover-bg: var(--plaster); --pk-hover-ink: var(--g-ink);
  --pk-placeholder: var(--g-muted); --pk-focus: 2px solid var(--g-ink);
  color: var(--g-ink); color-scheme: light;
  background-color: var(--paper);
}
.gallery .form__err { color: var(--dot-dk); }
.gallery [aria-invalid="true"] { border-color: var(--dot-dk); }
.if-js { display: none; }
html.js .if-js { display: inline; }
html.js .no-js { display: none; }
.shop-note { margin-top: var(--s2); font: 500 var(--fs-small)/1.5 var(--display); color: var(--muted); max-width: 40rem; }

/* A work on its own page: a canvas as it is; a print on its sheet of paper. */
.obj { position: relative; display: block; width: fit-content; max-width: 100%; margin-inline: auto; }
.obj img { display: block; }
.obj--paper { padding: clamp(9px, 5%, 30px); background: var(--plaster); }

/* The museum label: title (italic when it's his), what it is, the price. */
.tag { position: relative; display: grid; gap: 2px; width: fit-content; max-width: 100%; color: var(--g-ink); }
.tag > span { display: block; }
.tag__t { font: 400 1.0625rem/1.3 var(--text); }
.tag__meta { font: 500 .76rem/1.45 var(--display); color: var(--g-muted); }
.tag__price { margin-top: 6px; font: 600 .9rem/1 var(--display); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.tag .tag__dot, .buy__price .tag__dot {
  display: none; width: .72em; height: .72em; margin-right: .5em; border-radius: 50%;
  background: var(--dot); vertical-align: .02em;
}
.tag.is-taken .tag__dot { display: inline-block; animation: dot-in 260ms cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes dot-in { from { transform: scale(0); } to { transform: scale(1); } }

/* A work's own page: the work lit on the wall, the label beside it, with the buying under it. */
.room { padding-block: clamp(8px, 2vw, 24px) var(--s5); overflow-x: clip; }
.crumb { display: flex; align-items: center; gap: 10px; font: 600 var(--fs-label)/1 var(--display); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.crumb a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; color: var(--muted); text-decoration: none; }
@media (hover: hover) { .crumb a:hover { color: var(--bone); } }
.room__wall { display: grid; gap: var(--s5); padding-top: var(--s4); }
.room__work .obj img { width: auto; max-width: 100%; max-height: 58vh; max-height: 58svh; }
.room__side { display: grid; gap: var(--s3); justify-items: start; }
.tag--buy { width: 100%; max-width: 25rem; gap: 4px; }
.tag--buy .tag__t { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem); line-height: 1.05; letter-spacing: -.01em; margin-bottom: 6px; }
.tag--buy .tag__meta { font-size: .8rem; }
.tag__story { margin-top: 6px; font: 400 1rem/1.5 var(--text); color: var(--g-muted); max-width: 22rem; }
.tag__note { margin-top: 12px; font: 500 .78rem/1.5 var(--display); color: var(--g-muted); }
/* A work's own page (work/<slug>/): the label without a price, then what to read about it. */
.tag--work .lbl__st { margin-top: 6px; }
.read { display: grid; gap: 2px; width: 100%; max-width: 25rem; padding-top: var(--s2); border-top: var(--hair) solid var(--line); }
.read__h { font: 600 var(--fs-label)/1.3 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.read ul { list-style: none; margin: 0; padding: 0; }
.read a {
  display: flex; align-items: center; min-height: 44px; padding-block: 6px;
  font: 400 1rem/1.35 var(--text); color: var(--bone);
  text-decoration: underline; text-decoration-color: var(--dot); text-decoration-thickness: 1.5px; text-underline-offset: .3em;
}
@media (hover: hover) { .read a:hover { text-decoration-thickness: 2.5px; } }
.buy { display: grid; gap: var(--s2); width: 100%; margin-top: 18px; padding-top: 18px; border-top: var(--hair) solid var(--g-line); }
.buy__price { display: flex; align-items: center; font: 700 clamp(1.4rem, 1.15rem + .9vw, 1.75rem)/1 var(--display); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.buy__add { width: 100%; }
.fmt { margin: 0; padding: 0; border: 0; display: grid; gap: 8px; min-width: 0; }
.fmt legend { padding: 0; margin-bottom: var(--s1); font: 600 var(--fs-label)/1.3 var(--display); letter-spacing: .08em; text-transform: uppercase; }
.fmt__opt {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  min-height: 50px; padding: 9px 14px; cursor: pointer; background: var(--paper);
  border: var(--hair) solid var(--g-line-strong); transition: border-color var(--t-hover) ease, box-shadow var(--t-hover) ease;
}
.fmt__opt input { width: 20px; height: 20px; min-height: 0; margin: 0; padding: 0; accent-color: var(--dot); cursor: pointer; }
.fmt__opt:has(input:checked) { border-color: var(--g-ink); box-shadow: inset 0 0 0 1px var(--g-ink); }
.fmt__opt:has(input:focus-visible) { outline: var(--focus); outline-offset: 2px; }
.fmt__opt input:focus-visible { outline: none; }
.fmt__l { font: 400 1.0625rem/1.3 var(--text); }
.fmt__p { font: 600 .9rem/1 var(--display); font-variant-numeric: tabular-nums; }
@media (hover: hover) { .fmt__opt:hover { border-color: var(--g-ink); } }
@media (min-width: 600px) {
  .room__wall { grid-template-columns: minmax(0, 1fr) minmax(16rem, 23rem); gap: clamp(40px, 6vw, 112px); align-items: center; }
}
@media (min-width: 900px) {
  .room__wall { min-height: calc(100vh - var(--top-h) - 120px); min-height: calc(100svh - var(--top-h) - 120px); }
  .room__work .obj img { max-height: min(70vh, 820px); }
}

/* More from the shop: one row that scrolls sideways. */
.also { padding-block: var(--s4) var(--s5); border-top: var(--hair) solid var(--g-line); }
.also h2 { font-size: var(--fs-h3); letter-spacing: -.01em; margin-bottom: var(--s3); }
.rail {
  list-style: none; margin: 0; padding: 8px 0 var(--s3); display: flex; align-items: flex-start; gap: var(--s3);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
  padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
  scroll-padding-inline: max(var(--gutter), env(safe-area-inset-left));
  max-width: var(--wide); margin-inline: auto; scrollbar-width: thin; scrollbar-color: var(--g-line-strong) transparent;
}
.rail .card { flex: none; width: clamp(170px, 20vw, 240px); scroll-snap-align: start; }

/* ---------------------------------------------------------------- checkout (a preview) */
/* Laid out like the checkouts people trust (Shopify's, Stripe's): a quiet header, the form on
   paper white, the order on the plaster beside it (above it, folded, on phones), Apple Pay and
   Google Pay first. Nothing leaves the page and the card form is a picture (site.js 8). */
.sr { position: absolute; left: 25%; font-size: 1rem; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.co-top { background: var(--wall); border-bottom: var(--hair) solid var(--line); padding-top: env(safe-area-inset-top); }
.co-top__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); min-height: var(--top-h); }
.co-top__back {
  display: inline-flex; align-items: center; min-height: 44px;
  font: 600 var(--fs-label)/1 var(--display); letter-spacing: .09em; text-transform: uppercase; color: var(--bone); text-decoration: none;
}
@media (hover: hover) { .co-top__back:hover { text-decoration: underline; text-decoration-color: var(--dot); text-underline-offset: .35em; } }
.co {
  background-color: var(--paper); background-image: none;
  --pk-bg: var(--white); --pk-ink: var(--g-ink); --pk-muted: var(--g-muted); --pk-line: var(--g-line-strong);
  --pk-shadow: 0 14px 32px var(--g-shade); --pk-hover-bg: var(--plaster); --pk-hover-ink: var(--g-ink);
  --pk-placeholder: var(--g-muted); --pk-focus: 2px solid var(--g-ink);
}
.co__grid { display: grid; }
.co__form, .co-done, .co-empty {
  display: grid; gap: var(--s4); align-content: start; width: 100%; max-width: 620px; margin-inline: auto;
  padding: var(--s4) max(var(--gutter), env(safe-area-inset-right)) var(--s5) max(var(--gutter), env(safe-area-inset-left));
}
.co-empty { justify-items: start; gap: var(--s2); min-height: 40vh; }
.co-empty h2, .co-done h2 { font-size: var(--fs-h2); letter-spacing: -.015em; }
.co input, .co select, .co .field .pk__btn { background-color: var(--white); border-width: var(--hair); border-color: var(--g-line-strong); }
.co input:focus-visible, .co select:focus-visible, .co .field .pk__btn:focus-visible, .co .field .pk.is-open .pk__btn { border-color: var(--g-ink); }
.co .form__err { color: var(--dot-dk); }
.co [aria-invalid="true"] { border-color: var(--dot-dk); box-shadow: inset 0 0 0 1px var(--dot-dk); }
.co-note {
  display: flex; gap: .6em; align-items: baseline;
  font: 500 var(--fs-small)/1.5 var(--display); color: var(--g-muted);
}
.co-note::before { content: ""; flex: none; width: .62em; height: .62em; border-radius: 50%; background: var(--dot); transform: translateY(-.05em); }

/* Express checkout: the wallets' own buttons, black, side by side. */
.co-express { display: grid; gap: 10px; }
.co-express__t { text-align: center; font: 600 var(--fs-label)/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--g-muted); }
.co-express__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.xpay {
  display: flex; align-items: center; justify-content: center; gap: 5px; height: 50px; padding: 0 12px;
  border: 0; border-radius: 6px; background: var(--xpay-bg); color: var(--xpay-ink); cursor: pointer;
  font: 500 1.2rem/1 -apple-system, BlinkMacSystemFont, "SF Pro Display", "Google Sans", "Roboto", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: -.01em; transition: opacity var(--t-hover) ease;
}
.xpay__logo { width: 19px; height: 19px; flex: none; }
.xpay--apple .xpay__logo { margin-top: -3px; }
.xpay--google { gap: 7px; }
.xpay:active { opacity: .8; }
.co .xpay:focus-visible { outline-offset: 3px; }
/* Safari draws Apple's own button. */
@supports (-webkit-appearance: -apple-pay-button) {
  .xpay--apple { -webkit-appearance: -apple-pay-button; -apple-pay-button-type: plain; -apple-pay-button-style: black; }
  .xpay--apple > * { display: none; }
}
.co-express__msg { font: 500 var(--fs-small)/1.5 var(--display); color: var(--g-ink); text-align: center; }
.co-express__msg:empty { display: none; }
.co-or { display: flex; align-items: center; gap: var(--s2); font: 600 var(--fs-label)/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--g-muted); }
.co-or::before, .co-or::after { content: ""; flex: 1; height: var(--hair); background: var(--g-line); }

/* Contact, delivery, payment. */
.co-step { display: grid; gap: var(--s2); }
.co-step h2 { font: 700 1.3rem/1.1 var(--display); letter-spacing: -.01em; }
.co-step .field label { font-size: .72rem; }
.co-row { display: grid; gap: var(--s2); }
@media (min-width: 600px) {
  .co-row { grid-template-columns: 1fr 1fr; }
  .co-row--3 { grid-template-columns: 1.3fr 1fr 1fr; }
}
.co-sub { font: 500 var(--fs-small)/1.5 var(--display); color: var(--g-muted); margin-top: -6px; }
.co-hint { font: 500 .8rem/1.5 var(--display); color: var(--g-muted); }

/* A picture of Stripe's card form: the same fields, nothing to type in. */
.pe { display: grid; gap: 12px; padding: 16px; background: var(--white); border: var(--hair) solid var(--g-line-strong); }
.pe__tab {
  display: inline-flex; align-items: center; gap: 8px; width: fit-content; min-width: 7.5rem; padding: 10px 14px;
  border: var(--hair) solid var(--g-ink); box-shadow: inset 0 0 0 1px var(--g-ink);
  font: 600 .85rem/1 var(--display); color: var(--g-ink);
}
.pe__tab svg { width: 20px; height: 20px; color: var(--dot); }
.pe__f { display: grid; gap: 6px; }
.pe__l { font: 500 .8rem/1.2 var(--display); color: var(--g-muted); }
.pe__in {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 50px; padding: 0 12px;
  background: var(--white); border: var(--hair) solid var(--g-line-strong); box-shadow: 0 1px 2px var(--g-line);
}
.pe__ph { font: 400 1.0625rem/1 var(--text); color: var(--g-line-strong); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.pe__brands { display: flex; gap: 4px; }
.pe__brands svg { width: 30px; height: 19px; }
.pe__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.co-pay { width: 100%; min-height: 56px; font-size: .9rem; }
.co-pay.is-busy { cursor: progress; background: var(--dot-dk); color: var(--white); border: 0; }
.co-pay.is-busy::before {
  content: ""; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--white); border-right-color: transparent; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.co-status { min-height: 1.5em; font: 500 var(--fs-small)/1.5 var(--display); color: var(--g-muted); text-align: center; }

/* The order: on phones a fold above the form, on wide screens the right half, plaster. */
.co__sum { background: var(--plaster); border-bottom: var(--hair) solid var(--g-line); }
.co-sum { max-width: 620px; margin-inline: auto; }
.co-sum__bar {
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--s2); min-height: 60px; cursor: pointer;
  padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
  font: 600 .85rem/1 var(--display); color: var(--g-ink);
}
.co-sum__bar::-webkit-details-marker { display: none; }
.co-sum__show { display: inline-flex; align-items: center; gap: 10px; }
.co-sum__show::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform var(--t-hover) ease; }
.co-sum[open] .co-sum__show::after { transform: translateY(2px) rotate(-135deg); }
.co-sum__total { font: 700 1.05rem/1 var(--display); font-variant-numeric: tabular-nums; }
.co-sum__body { display: grid; gap: var(--s3); padding: var(--s1) max(var(--gutter), env(safe-area-inset-right)) var(--s4) max(var(--gutter), env(safe-area-inset-left)); }
.co-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.co-line { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.co-line__pic { position: relative; display: grid; place-items: center; width: 64px; height: 64px; background: var(--white); border: var(--hair) solid var(--g-line); }
.co-line__pic img { max-width: 56px; max-height: 56px; width: auto; height: auto; }
.co-line__q {
  position: absolute; top: -9px; right: -9px; min-width: 21px; height: 21px; padding-inline: 6px; border-radius: 11px;
  display: grid; place-items: center; background: var(--g-muted); color: var(--white);
  font: 700 .72rem/1 var(--display); font-variant-numeric: tabular-nums;
}
.co-line__info { display: grid; gap: 2px; min-width: 0; }
.co-line__name { font: 400 1rem/1.3 var(--text); }
.co-line__fmt { font: 500 .76rem/1.4 var(--display); color: var(--g-muted); }
.co-line__price { font: 600 .92rem/1 var(--display); font-variant-numeric: tabular-nums; }
.co-totals { margin: 0; display: grid; gap: 10px; padding-top: var(--s2); border-top: var(--hair) solid var(--g-line); }
.co-totals div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); }
.co-totals dt { font: 500 .9rem/1.3 var(--display); }
.co-totals dd { margin: 0; font: 600 .9rem/1.3 var(--display); font-variant-numeric: tabular-nums; text-align: right; }
.co-totals .co-muted { font-weight: 500; color: var(--g-muted); }
.co-totals__grand { padding-top: 6px; }
.co-totals__grand dt { font: 700 1.15rem/1 var(--display); }
.co-totals__grand dd { font: 700 1.45rem/1 var(--display); letter-spacing: -.01em; }
.co-cur { margin-right: 8px; font: 500 .75rem/1 var(--display); color: var(--g-muted); letter-spacing: .04em; }

/* The confirmation. */
.co-done { justify-items: start; gap: var(--s3); }
.co-done__mark { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--g-ink); color: var(--g-ink); }
.co-done__mark svg { width: 26px; height: 26px; }
.co-done h2:focus { outline: none; }

@media (min-width: 900px) {
  .co { background: linear-gradient(90deg, var(--paper) 0 54%, var(--plaster) 54% 100%); }
  .co__grid { grid-template-columns: minmax(0, 54fr) minmax(0, 46fr); min-height: calc(100vh - var(--top-h)); }
  .co__form, .co-done, .co-empty { grid-column: 1; grid-row: 1; justify-self: end; margin: 0; padding: var(--s5) clamp(32px, 4.5vw, 72px) var(--s5) var(--gutter); }
  .co__sum { grid-column: 2; grid-row: 1; background: none; border: 0; border-left: var(--hair) solid var(--g-line); }
  .co-sum { position: sticky; top: 0; max-width: 460px; margin: 0; padding: var(--s5) var(--gutter) var(--s5) clamp(32px, 4.5vw, 72px); }
  .co-sum__bar { display: none; }
  .co-sum__body { padding: 0; }
}
@media (prefers-reduced-motion: reduce) { .co-pay.is-busy::before { animation-duration: 2.4s; } }

/* The bag: a sheet from the right, like the menu. */
.bag {
  margin: 0 0 0 auto; height: 100vh; height: 100dvh; max-height: none; width: min(100%, 440px); max-width: 100%;
  padding: 0; border: 0; background: var(--wall-2); color: var(--bone); overflow: hidden;
}
.bag::backdrop { background: var(--backdrop); }
.bag__in {
  display: flex; flex-direction: column; height: 100%;
  padding: calc(env(safe-area-inset-top) + 10px) max(var(--gutter), env(safe-area-inset-right)) calc(var(--s3) + env(safe-area-inset-bottom)) var(--gutter);
}
.bag__head { display: flex; align-items: center; justify-content: space-between; min-height: var(--top-h); flex: none; }
.bag__head h2 { font: 700 clamp(1.5rem, 5vw, 1.9rem)/1 var(--display); letter-spacing: -.01em; }
.bag__close { width: 44px; height: 44px; margin-right: -10px; display: grid; place-items: center; padding: 0; background: none; border: 0; color: var(--bone); cursor: pointer; }
.bag__close svg { width: 16px; height: 16px; }
.bag__said { display: flex; align-items: center; gap: .6em; flex: none; font: 500 var(--fs-small)/1.4 var(--display); color: var(--bone); padding-bottom: var(--s2); }
.bag__said::before { content: ""; flex: none; width: .7em; height: .7em; border-radius: 50%; background: var(--dot); }
.bag__said:empty { display: none; }
/* Quantity and remove are announced, not shown: the line itself shows the change. */
.bag__said.is-quiet { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; padding: 0; }
.bag__list { list-style: none; padding: 0; margin: 0 calc(-1 * var(--s1)); flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; border-top: var(--hair) solid var(--line); }
.bag__line { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: var(--s2); padding: var(--s3) var(--s1); border-bottom: var(--hair) solid var(--line); }
.bag__pic { display: grid; place-items: center; width: 72px; height: 72px; }
.bag__pic img { max-width: 72px; max-height: 72px; width: auto; height: auto; object-fit: contain; }
.bag__info { display: grid; gap: 2px; align-content: start; min-width: 0; }
.bag__name { font: 400 var(--fs-title)/1.3 var(--text); }
.bag__name a { text-decoration: none; }
.bag__fmt { font: 500 var(--fs-label)/1.45 var(--display); color: var(--muted); }
.bag__row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--s2); margin-top: 6px; }
.qty { display: inline-flex; align-items: center; border: var(--rule) solid var(--line-strong); }
.qty__b { width: 44px; height: 42px; display: grid; place-items: center; padding: 0; background: none; border: 0; color: var(--bone); font: 500 1.2rem/1 var(--display); cursor: pointer; }
.qty__b:disabled { color: var(--muted); cursor: default; opacity: .6; }
.qty__n { min-width: 1.6em; text-align: center; font: 600 .95rem/1 var(--display); font-variant-numeric: tabular-nums; }
.bag__rm {
  min-height: 44px; padding: 0; background: none; border: 0; cursor: pointer; color: var(--muted);
  font: 600 var(--fs-label)/1 var(--display); letter-spacing: .08em; text-transform: uppercase;
  text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: .35em;
}
.bag__price { font: 600 .95rem/1.3 var(--display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bag__empty { display: grid; gap: var(--s2); justify-items: start; padding-top: var(--s3); border-top: var(--hair) solid var(--line); color: var(--muted); }
.bag__empty[hidden], .bag__foot[hidden], .bag__list[hidden] { display: none; }
.bag__foot { flex: none; display: grid; gap: var(--s2); padding-top: var(--s3); }
.bag__sum { display: flex; justify-content: space-between; align-items: baseline; font: 700 1.15rem/1 var(--display); font-variant-numeric: tabular-nums; }
.bag__sum span:first-child { font: 600 var(--fs-label)/1 var(--display); letter-spacing: .09em; text-transform: uppercase; }
.bag__go { width: 100%; }
.bag__msg { font: 500 var(--fs-small)/1.5 var(--display); color: var(--muted); }
.bag__msg:empty { display: none; }
@media (hover: hover) {
  .qty__b:not(:disabled):hover, .bag__rm:hover { color: var(--bone); }
  .bag__name a:hover { text-decoration: underline; text-decoration-color: var(--dot); }
}

/* ---------------------------------------------------------------- menu sheet */
.sheet {
  margin: 0 0 0 auto; height: 100vh; height: 100dvh; max-height: none; width: min(100%, 420px); max-width: 100%;
  padding: 0; border: 0; background: var(--wall-2); color: var(--bone); overflow: auto; overscroll-behavior: contain;
}
.sheet::backdrop { background: var(--backdrop); }
.sheet__in { display: grid; gap: var(--s4); padding: calc(env(safe-area-inset-top) + 10px) max(var(--gutter), env(safe-area-inset-right)) calc(var(--s4) + env(safe-area-inset-bottom)) var(--gutter); }
.sheet__head { display: flex; align-items: center; justify-content: space-between; min-height: var(--top-h); }
.sheet__close { width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; color: var(--bone); cursor: pointer; }
.sheet__close svg { width: 16px; height: 16px; }
.sheet__list, .sheet__more { list-style: none; padding: 0; }
.sheet__list a { display: flex; align-items: center; min-height: 52px; font: 700 clamp(1.6rem, 7vw, 2.1rem)/1 var(--display); letter-spacing: -.01em; text-decoration: none; }
.sheet__list a[aria-current="page"] { color: var(--muted); }
.sheet__more { border-top: var(--hair) solid var(--line); padding-top: var(--s2); }
.sheet__more a { display: flex; align-items: center; min-height: 44px; font: 500 var(--fs-nav)/1.2 var(--display); text-decoration: none; color: var(--muted); }

/* ---------------------------------------------------------------- footer */
.foot { background: var(--foot-bg); color: var(--muted); padding-block: var(--s5) calc(var(--s4) + env(safe-area-inset-bottom)); margin-top: auto; }
.foot__grid { display: grid; gap: var(--s4); }
.foot__id { display: grid; gap: var(--s1); justify-items: start; }
.mark--foot { font-size: 1.5rem; }
.foot__contact { display: flex; flex-wrap: wrap; gap: 0 var(--s3); }
.foot__contact a, .foot ul a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; color: var(--bone); text-decoration: none; }
.foot h2 { font: 600 var(--fs-label)/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s1); }
.foot ul { list-style: none; padding: 0; }
.foot__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s1) var(--s3); padding-top: var(--s3); border-top: var(--hair) solid var(--line); font: 500 var(--fs-label)/1.5 var(--display); }
@media (hover: hover) { .foot a:hover { text-decoration: underline; text-decoration-color: var(--dot); } }
@media (min-width: 900px) {
  .foot__grid { grid-template-columns: 2fr 1fr 1fr; }
  .foot__base { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------- motion off, print */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-new(root) { animation: none; }
  .hero.is-moving .hero__slide, .hero.is-moving .hero__slide img { animation: none; }
  .card__pic img, .more::after { transition: none; }
  .tag.is-taken .tag__dot { animation: none; }
}
@media print {
  .top, .menu-btn, .sheet, .bag, .buy, .rail, .co-express, .pe, .co-pay, .hero__pause, .hero__media, .hero__scrim, .hero::before, .form, .foot nav { display: none; }
  body, html, .foot, .gallery { background: none; color: var(--print-ink); }
  .hero { height: auto; min-height: 0; }
  .hero__stack { position: static; }
  .hero__name, .lbl__t, .lbl__st { color: var(--print-ink); text-shadow: none; }
  .lbl__meta, .cv__w, .foot { color: var(--print-muted); }
  .wall { columns: 2; }
}

[hidden] { display: none; }