/* Paul Oman Fine Art – styles.  Palette & fonts are CSS variables below. */
@font-face { font-family: "Allura Local"; src: url("../assets/fonts/Allura-Regular.ttf") format("truetype"); font-display: swap; }
:root {
  /* --- Dark theme palette (sampled from Tommy's colour reference image) --- */
  --main: #393837;          /* main colour: page, header, footer, dropdowns */
  --sub: #413F3D;           /* sub colour: panels, cards, alternate sections */
  --line: #585655;          /* hairlines / borders (sampled from the reference) */
  --text: #ECEAE6;          /* off-white text */
  --text-strong: #D5D6D6;   /* secondary light text */
  --muted: #A6A29C;         /* muted labels (AA on --main) */
  --muted-sub: #BAB7B1;     /* muted text on --sub panels (AA) */
  --field-line: #8E8B86;    /* form-field borders (3:1) */
  --gold: #C5A059;          /* accent: buttons, rules, highlights */
  --gold-light: #D8B978;    /* accent for small text / hovers (AA on dark) */
  --danger: #E48B7B;
  /* legacy names kept so older rules keep working */
  --gold-dark: var(--gold-light);
  --charcoal: var(--text);
  --ink: var(--text);
  --cream: var(--sub);
  --forest: var(--gold);
  --forest-dark: var(--gold-light);
  --birch: var(--muted);
  --serif: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --sans: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --script: "Mrs Saint Delafield", "Allura", "Allura Local", "Brush Script MT", cursive;
  --header-h: 84px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--sans); font-size: 16px; line-height: 1.7; color: var(--text); background: var(--main); -webkit-font-smoothing: antialiased; }
body.no-scroll { overflow: hidden; }
img { max-width: 100%; display: block; }
a { color: var(--gold-light); text-decoration-color: rgba(197,160,89,.6); text-underline-offset: 3px; }
a:hover { color: #fff; }
:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; color: var(--text); line-height: 1.15; margin: 0 0 .5em; }
h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
h3 { font-size: 1.45rem; }
p { margin: 0 0 1.1em; }
.container { width: min(1180px, 92%); margin: 0 auto; }
.narrow { width: min(780px, 92%); margin: 0 auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.eyebrow { font-family: var(--serif); text-transform: uppercase; letter-spacing: .28em; font-size: .85rem; color: var(--gold-light); font-weight: 600; margin-bottom: .8rem; display: block; }
.section { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.section.alt { background: var(--sub); }
.section-head { text-align: center; margin-bottom: 2.5rem; }
.section-head .rule { display: block; width: 56px; height: 1px; background: var(--gold); margin: 1rem auto 0; }
.ph-text em, .ph { font-style: normal; background: rgba(197,160,89,.22); padding: 0 .3em; border-radius: 2px; }
.placeholder-note { border-left: 3px solid var(--gold); background: var(--sub); padding: .8rem 1.1rem; font-size: .9rem; color: var(--muted-sub); margin: 0 0 2rem; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 100; background: var(--main); border-bottom: 1px solid var(--line); }
.header-inner { width: min(1320px, 94%); margin: 0 auto; min-height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.logo { text-decoration: none; display: inline-flex; flex-direction: column; line-height: 1; color: var(--text); }
.logo:hover { color: var(--text); }
.logo-img { width: 210px; height: auto; display: block; }
.logo-sub { font-family: var(--sans); font-size: .6rem; letter-spacing: .5em; text-transform: uppercase; margin-top: -.5rem; padding-left: 1.5rem; position: relative; color: var(--text); }
.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2.1rem; }
.main-nav > ul > li { position: relative; }
.main-nav a { font-size: .86rem; letter-spacing: .04em; color: var(--text); text-decoration: none; padding: 1.9rem 0; display: inline-block; position: relative; font-weight: 500; }
.main-nav > ul > li > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 1.35rem; height: 1px; background: var(--gold); transform: scaleX(0); transition: transform .25s; transform-origin: left; }
.main-nav > ul > li:hover > a::after, .main-nav > ul > li.active > a::after { transform: scaleX(1); }
.main-nav a:hover { color: var(--gold-light); }
.has-sub > a::before { content: ""; position: absolute; right: -.95rem; top: 50%; width: 5px; height: 5px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-70%) rotate(45deg); opacity: .6; }
.has-sub { margin-right: .5rem; }
.sub-toggle { display: none; }
.dropdown { position: absolute; top: 100%; left: -1.2rem; min-width: 235px; background: var(--main); border: 1px solid var(--line); border-top: 2px solid var(--gold); box-shadow: 0 14px 30px rgba(0,0,0,.35); padding: .5rem 0 !important; display: block !important; opacity: 0; visibility: hidden; transform: translateY(6px); transition: all .2s; z-index: 5; }
.has-sub:hover > .dropdown, .has-sub:focus-within > .dropdown { opacity: 1; visibility: visible; transform: none; }
.dropdown a { display: block; padding: .6rem 1.4rem; font-weight: 400; }
.dropdown a::after { display: none; }
.dropdown a:hover, .dropdown a[aria-current] { background: var(--sub); color: var(--gold-light); }
.dropdown a.accent { color: var(--gold-light); border-top: 1px solid var(--line); margin-top: .35rem; padding-top: .8rem; font-weight: 500; }
@media (min-width: 961px) { .main-nav > ul > li:last-child > .dropdown { left: auto; right: -1.2rem; } }
.nav-toggle { display: none; background: none; border: 0; width: 44px; height: 44px; padding: 10px; cursor: pointer; }
.nav-toggle span { display: block; height: 2px; background: var(--text); margin: 6px 0; transition: .25s; }

/* ---------- Buttons ---------- */
.btn { display: inline-block; font-family: var(--sans); font-size: .76rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; padding: 1.05rem 1.9rem; border: 1px solid transparent; cursor: pointer; transition: all .25s; line-height: 1.2; border-radius: 0; }
.btn-gold { background: var(--gold); color: #111; border-color: var(--gold); }
.btn-gold:hover { background: var(--gold-light); border-color: var(--gold-light); color: #111; }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.9); }
.btn-ghost:hover { background: #fff; color: #111; }
.btn-dark { background: var(--gold); color: #111; border-color: var(--gold); }
.btn-dark:hover { background: var(--gold-light); border-color: var(--gold-light); color: #111; }
.btn-outline { background: transparent; color: var(--text); border-color: var(--text); }
.btn-outline:hover { background: var(--text); color: var(--main); }
.btn-sm { padding: .7rem 1.1rem; font-size: .68rem; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero { background: var(--sub); text-align: center; padding: clamp(2.6rem, 6vw, 4.2rem) 0 clamp(2rem, 4vw, 3rem); border-bottom: 1px solid var(--line); }
.page-hero h1 { margin-bottom: .4rem; }
.page-hero p { max-width: 60ch; margin: 0 auto; color: var(--muted-sub); }
.breadcrumb { font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted-sub); margin-bottom: .8rem; display: block; }

/* ---------- Gallery ---------- */
.cat-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 2rem; margin: 0 0 2.2rem; }
.cat-tabs a { font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; color: var(--muted); padding: .4rem 0; border-bottom: 1px solid transparent; }
.cat-tabs a.current, .cat-tabs a:hover { color: var(--text); border-bottom-color: var(--gold); }
.tryon-cta { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; background: var(--sub); color: var(--text); border: 1px solid var(--line); border-left: 3px solid var(--gold); padding: 1.2rem 1.6rem; margin-bottom: 2.4rem; }
.tryon-cta p { margin: 0; }
.tryon-cta strong { font-family: var(--serif); font-size: 1.35rem; font-weight: 500; display: block; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2.6rem 2rem; align-items: start; }
.work-card { margin: 0; }
/* ---------- Painting "mat" (matches the matted presentation on evansenartstudio.com) ----------
   Measured from Andy Evansen's baked-in mat images (1050 px wide): warm off-white mat (#F7F3F0 - #FBF7F4),
   equal on all four sides = 75 px = 7.1 % of the image width (= 8.3 % of the painting's long side), and a crisp, flat
   cut where the mat meets the painting: no bevel strip.  Tommy asked for a subtle, visible inside edge, so ours adds a 2-3 px neutral
   darker-gray line (--bevel, colour --edge-color) where the mat meets the painting.  Pure CSS – the painting files are untouched. */
:root { --mat-color: #FAF7F3; --mat-text: #3a3836; --edge-color: #B8B3AB; --mat-k: .0833; }
.work-thumb { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1 / 1; cursor: zoom-in; container-type: inline-size; }
.thumb-open { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: none; cursor: zoom-in; }
.mat { --pad: 2.2cqw; --L: calc((100cqw - 2 * var(--pad)) / 1.1667); --mat: calc(var(--L) * var(--mat-k)); --bevel: 2px;
  display: block; max-width: 100%; max-height: 100%; padding: var(--mat); background: var(--mat-color);
  box-shadow: 0 0 0 1px #151413, 0 10px 24px rgba(0,0,0,.45); transition: box-shadow .25s; }
.mat-in { position: relative; display: block; line-height: 0; background: var(--edge-color); box-shadow: 0 0 0 var(--bevel) var(--edge-color); }
.work-thumb img { display: block; width: auto; height: auto; max-width: var(--L); max-height: var(--L); transition: opacity .2s linear; }
/* Hover / keyboard-focus "haze": ONE even, translucent dark-gray tint over the WHOLE card (painting + mat) – no gradient – fading in on
   hover / keyboard focus, with the name (serif, larger), size and price left-aligned at the bottom-left.  The painting stays visible through it.
   Absolutely positioned inside the mat, so nothing shifts.  Touch devices have no hover – captions stay visible and a tap opens the lightbox.
   Contrast (checked over a pure-white painting): tint rgba(36,35,34,.65) + a soft text-shadow keeps the text >= AA (see README). */
.mat { position: relative; }
.mat-hover { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; text-align: left; container-type: inline-size; padding: 6% 6% 11.5% 11.5%;
  background: rgba(36,35,34,.65); color: #FFFFFF; text-shadow: 0 1px 2px rgba(0,0,0,.75), 0 0 8px rgba(0,0,0,.55);
  line-height: 1.3; opacity: 0; transition: opacity .25s ease; pointer-events: none; overflow: hidden; }
/* "View on your wall →" inside the haze, bottom-right: same inset (11.5 % of card width) from the right and bottom edges, text size = 2.7 % of the card width
   (floor 10 px), white letter-spaced small caps with a white arrow (WCAG AA over a white painting). Clickable only while the haze is visible. */
.mh-actions { position: absolute; inset: 0; z-index: 4; display: flex; justify-content: flex-end; align-items: flex-end; container-type: inline-size; opacity: 0; transition: opacity .25s ease; pointer-events: none; }
.mh-wall { pointer-events: none; margin: 0 11.5% 11.5% 0; font-family: var(--sans, inherit); font-size: max(11px, 3.04cqw); line-height: 1.2; font-weight: 500; white-space: nowrap;
  font-variant-caps: all-small-caps; text-transform: lowercase; letter-spacing: .16em;   /* letter-spaced small caps, no pill / border / background */
  color: #FFFFFF; text-decoration: none; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.mh-arrow { display: inline-block; margin-left: .4em; font-size: 1.15em; line-height: 1; letter-spacing: 0; color: inherit; }   /* same white as the text, slightly larger */
.mh-wall:hover { color: #FFFFFF; }
.mh-wall:focus-visible { pointer-events: auto; outline: 2px solid #fff; outline-offset: 2px; }
/* text + inset scale with the card width (cqw = 1% of the haze CONTENT width = 83% of the card width, hence 4.41cqw = 3.66% of the card) so carousel and grid match proportionally; floors keep it legible on phones */
/* optical bottom inset: pull the last line down by its descender/half-leading space so the glyph-to-bottom gap equals the glyph-to-left gap */
.mat-hover > :last-child { margin-bottom: -.17em; }
/* Oct 5 (Tommy approved): title = same font (Montserrat) and size as the size / price lines, BOLD (700) – nothing else bold; all haze text ~12.5 % bigger
   (was: serif title 4.41cqw, size / price 3.735cqw floor 11px, price 600, "View on your wall" 2.7cqw floor 10px) */
.mh-title { font-family: var(--sans); font-size: max(12.5px, 4.2cqw); font-weight: 700; line-height: 1.3; letter-spacing: .04em; }
.mh-meta { font-size: max(12.5px, 4.2cqw); font-weight: 400; letter-spacing: .04em; }
.mh-price { font-size: max(12.5px, 4.2cqw); font-weight: 400; letter-spacing: .04em; color: #FFFFFF; }
.mh-price.is-sold { color: #FFFFFF; text-transform: uppercase; letter-spacing: .14em; font-size: max(12px, 4.07cqw); }
.work-thumb:has(:focus-visible) .mat-hover, .work-thumb:has(:focus-visible) .mh-actions { opacity: 1; }
.thumb-open:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 6px; }
/* Oct 9: hover haze only for real hover pointers (mouse / trackpad); html.mouse-hover (js) covers hybrids whose primary pointer is touch */
@media (hover: hover) and (pointer: fine) {
  .work-thumb:hover .mat-hover, .work-thumb:hover .mh-actions { opacity: 1; }
  .work-thumb:hover .mh-wall { pointer-events: auto; }
  .work-thumb:hover .mat { box-shadow: 0 0 0 1px #151413, 0 14px 30px rgba(0,0,0,.55); }
}
html.mouse-hover .work-thumb:hover .mat-hover, html.mouse-hover .work-thumb:hover .mh-actions { opacity: 1; }
html.mouse-hover .work-thumb:hover .mh-wall { pointer-events: auto; }
html.mouse-hover .work-thumb:hover .mat { box-shadow: 0 0 0 1px #151413, 0 14px 30px rgba(0,0,0,.55); }
.badge { position: absolute; top: 10px; left: 10px; z-index: 2; background: rgba(57,56,55,.94); color: var(--gold-light); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; padding: .25rem .55rem; border: 1px solid var(--gold); }
.work-card figcaption { padding-top: .9rem; font-size: .88rem; line-height: 1.5; color: var(--muted); }
.work-card figcaption strong { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; color: var(--text); }
.section.alt .work-card figcaption, .section.alt .work-card .work-status.sold { color: var(--muted-sub); }
.tryon-link { display: block; margin-top: .45rem; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-light); text-decoration: none; font-weight: 600; }
.tryon-link:hover { color: #fff; }


/* ---------- Homepage: compact Welcome + New Arrivals peek carousel ---------- */
.h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
/* Other home sections keep normal section padding; welcome + recent override below (must beat this). */
body[data-page="home"] .section { padding-top: clamp(2rem, 4vw, 3rem); padding-bottom: clamp(2rem, 4vw, 3rem); }
/* Welcome sits first under the header – one centered line only (logo in header). Bigger type, tight band (no extra blank).
   Use .section.welcome-band so this beats body[data-page=home] .section (equal specificity would otherwise leave 2–3rem padding). */
body[data-page="home"] .section.welcome-band { padding-top: .35rem; padding-bottom: .35rem; }
body[data-page="home"] .welcome-band .narrow-intro { display: flex; flex-direction: column; align-items: center; text-align: center; }
body[data-page="home"] .welcome-band h2 { font-family: var(--serif); font-size: clamp(1.45rem, 2.6vw, 1.85rem); font-weight: 500; letter-spacing: .02em; margin: 0; line-height: 1.2; color: var(--text); text-align: center; }
body[data-page="home"] .section.recent { padding-top: clamp(.45rem, 1.1vh, .75rem); padding-bottom: clamp(.7rem, 1.8vh, 1.2rem); }
.section.recent .section-head { margin-bottom: clamp(.3rem, .9vh, .55rem); }
.section.recent .section-head .eyebrow { margin-bottom: .2rem; font-size: .75rem; }
.section.recent .section-head h1 { font-size: clamp(1.25rem, 2.1vw, 1.65rem); margin: 0; }
.section.recent .recent-lead { margin: .22rem 0 0; font-size: .84rem; line-height: 1.35; color: var(--muted); font-weight: 400; letter-spacing: .03em; }
/* --slide ~34% + --peek-scale .85: both side peeks fully on-screen on ~1280–1920 and snug to the
   centre (≈7–8px mat gaps). Keep width:auto / sizeCarousel + vertical budget (large centre).
   Wide / short viewports: lower --slide so slots do not outgrow height-capped mats (charcoal voids). */
.carousel { --car-w: 100%; --slide: 34%; --car-gap: .45rem; --car-fixed: 320px; --btn: 38px; --agap: 12px; --pw: 600px; --pcy: 40%; --peek-scale: .85; --active-scale: 1.15; position: relative; width: 100%; outline-offset: -2px; }
/* Wide desktops: keep the same hug; short+wide media below trims further when height-capped */
@media (min-width: 1500px) {
  .carousel { --slide: 34%; --car-gap: .45rem; }
}
@media (min-width: 1800px) {
  .carousel { --slide: 34%; --car-gap: .45rem; }
}
.recent-works { position: relative; width: var(--car-w); max-width: 100%; margin: 0 auto; display: flex; align-items: center; gap: var(--car-gap); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  /* Pad so a slide can centre; content width ≈ --slide of the track; cards are flex-basis 100% of that. Gap sits between slides.
     padding-block must fit scale(--active-scale): overflow-x:auto also clips Y, which was shaving top/bottom cream so mats looked wider on the sides. */
  padding-block: calc((var(--active-scale) - 1) * 340px + 0.4rem); padding-inline: calc((100% - var(--slide)) / 2); scroll-padding-inline: calc((100% - var(--slide)) / 2);
  scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.recent-works::-webkit-scrollbar { display: none; }
.recent-works.jumping .work-card { scroll-snap-stop: normal; }
.recent-works .work-card { flex: 0 0 100%; min-width: 0; scroll-snap-align: center; scroll-snap-stop: always; text-align: center; margin: 0;
  /* Uniform scale (origin center) – equal cream on all 4 sides only if .recent-works padding-block fits active growth (see above). */
  transform: scale(var(--peek-scale)); transform-origin: center center; transition: transform .35s ease; will-change: transform; }
.recent-works .work-card.is-active { transform: scale(var(--active-scale)); z-index: 2; }
.recent-works .work-thumb { aspect-ratio: auto; container-type: inline-size; width: 100%; margin: 0 auto; display: flex; align-items: center; justify-content: center; }
/* Soft gray haze over side (non-active) mats; active painting stays clear */
.recent-works .work-card .mat-in { position: relative; z-index: 0; }
.recent-works .work-card .mat::after { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(200,200,200,.52); opacity: 1; transition: opacity .3s ease; pointer-events: none; }
.recent-works .work-card.is-active .mat::after { opacity: 0; }
/* Side peeks: gray haze is the treatment – suppress the dark info hover haze on non-active cards */
@media (hover: hover) and (pointer: fine) {
  .recent-works .work-card:not(.is-active) .work-thumb:hover .mat-hover,
  .recent-works .work-card:not(.is-active) .work-thumb:hover .mh-actions { opacity: 0; }
}
html.mouse-hover .recent-works .work-card:not(.is-active) .work-thumb:hover .mat-hover,
html.mouse-hover .recent-works .work-card:not(.is-active) .work-thumb:hover .mh-actions { opacity: 0; }
/* Mat hugs the painting (fit-content) – no oversized empty cream filling the slide slot. 8.3 % long-side via fitMat(). */
.recent-works .mat { --mat: 24px; --bevel: 3px; width: fit-content; max-width: 100%; margin: 0 auto; box-sizing: border-box; }
/* Scale to the slide slot + viewport height budget WITHOUT stretching: width/height auto with
   max constraints (fitMat() also sets proportional px so small source files still display large). */
.recent-works .work-thumb img {
  --img-max-w: calc(100cqw / 1.1667);
  --img-max-h: calc(min(560px, max(140px, 100svh - var(--header-h) - var(--car-fixed))) / 1.1667);
  width: auto; height: auto;
  max-width: var(--img-max-w); max-height: var(--img-max-h);
  object-fit: contain;
}
/* touch devices have no hover: paintings are clean; the first tap sets .is-tapped (js) which shows that one painting's haze, a second tap opens the lightbox */
.work-card.is-tapped .mat-hover, .work-card.is-tapped .mh-actions { opacity: 1; }
.work-card.is-tapped .mh-wall { pointer-events: auto; }
.car-btn { position: absolute; top: var(--pcy); z-index: 5; transform: translateY(-50%); width: var(--btn-w, 30px); height: var(--btn-h, 76px); border-radius: 0; border: 0; background: transparent; color: var(--text); font-size: 2.2rem; text-shadow: 0 1px 3px rgba(0,0,0,.45); line-height: 1; padding: 0 0 .15em; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s, color .2s; }
.car-btn:hover { background: transparent; color: var(--gold-light); }
.car-btn:disabled { opacity: .3; cursor: default; }
.car-btn:disabled:hover { background: transparent; color: var(--text); }
/* Arrows: tall slim pills (Tommy, Oct 6) so they fit the narrow gap beside the centre mat.
   FIXED arrow spot (never moves between slides): just outside the widest ACTIVE mat among the New Arrivals
   (after --active-scale), vertically centred on the track. placeArrows() in site.js sets --prev-x / --next-x / --pcy
   (px, relative to .carousel) only on resize / image load. Phones (no room beside the near-full-width mat): arrows flank
   the thumbnail row instead, or sit just below the widest mat at the viewport edges (--ainset) – never over the painting.
   The calc() values are only a pre-JS fallback (--pw = widest active mat). No left/top transition – nothing to glide. */
.car-prev { left: var(--prev-x, calc(50% - var(--pw) / 2 - var(--btn-w, 30px) - var(--agap))); }
.car-next { left: var(--next-x, calc(50% + var(--pw) / 2 + var(--agap))); }
.carousel { --ainset: 6px; }
.car-btn:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }
.car-meta { display: flex; align-items: center; justify-content: center; margin-top: .15rem; }
/* thumbnail row = indicator + navigation (replaces the old counter and dots) */
.car-thumbs { --tl: 64px; display: flex; align-items: center; justify-content: center; gap: .55rem; flex-wrap: nowrap; }
.car-thumb { position: relative; display: flex; align-items: center; justify-content: center; width: var(--tl); height: var(--tl); padding: 0; margin: 0; border: 0; background: none; cursor: pointer; }
.ct-mat { position: relative; display: block; line-height: 0; padding: calc(var(--tl) * .0714); background: var(--mat-color); box-shadow: 0 0 0 1px #151413, 0 3px 8px rgba(0,0,0,.4); }
.ct-mat img { display: block; width: auto; height: auto; max-width: calc(var(--tl) / 1.1667); max-height: calc(var(--tl) / 1.1667); box-shadow: 0 0 0 1px var(--edge-color); }
.ct-mat::after { content: ""; position: absolute; inset: 0; background: rgba(200,200,200,.42); transition: opacity .25s ease; }   /* light grey haze on the 4 others */
.car-thumb[aria-current="true"] .ct-mat::after { opacity: 0; }
.car-thumb:hover .ct-mat::after { opacity: .5; }
.car-thumb[aria-current="true"]:hover .ct-mat::after { opacity: 0; }
.car-thumb:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }
.recent-more { text-align: center; margin: clamp(.65rem, 1.6vh, 1.15rem) 0 0; }
/* short laptop screens: smaller thumbs + tighter Welcome so painting+thumbs still fit.
   Keep --slide hugging the (now larger) height-capped mats so peeks stay close; wide+short tighter below. */
@media (max-height: 800px) and (min-width: 601px) {
  .car-thumbs { --tl: 44px; }
  .carousel { --car-fixed: 260px; --active-scale: 1.12; --slide: 34%; --peek-scale: .85; --car-gap: .45rem; }
  body[data-page="home"] .section.welcome-band { padding-top: .25rem; padding-bottom: .25rem; }
  body[data-page="home"] .welcome-band h2 { font-size: 1.35rem; }
  body[data-page="home"] .section.recent { padding-top: .35rem; padding-bottom: .5rem; }
  .section.recent .section-head { margin-bottom: .3rem; }
  .recent-more { margin-top: .5rem; }
}
@media (max-height: 800px) and (min-width: 1500px) {
  /* 32%: hug height-capped mats closely enough to hide a 4th-slide sliver at the edges */
  .carousel { --slide: 32%; --car-gap: .4rem; }
}
@media (max-height: 800px) and (min-width: 1800px) {
  .carousel { --slide: 32%; --car-gap: .4rem; }
}
/* phones: thicker centre slide (larger painting); both peeks via infinite loop */
@media (max-width: 600px) {
  .car-thumbs { --tl: 48px; gap: .35rem; }
  .carousel { --car-fixed: 230px; --btn: 32px; --agap: 6px; --slide: 82%; --car-gap: .45rem; --car-w: 100%; --peek-scale: .85; --active-scale: 1.14; }
  .car-btn { font-size: 1.9rem; }
  .carousel { --btn-w: 26px; --btn-h: 60px; }
  .car-btn { border-radius: 0; }
  .section.recent .recent-lead { font-size: .78rem; }
  body[data-page="home"] .section.welcome-band { padding-top: .3rem; padding-bottom: .3rem; }
  body[data-page="home"] .welcome-band h2 { font-size: 1.35rem; }
}
@media (prefers-reduced-motion: reduce) {
  .recent-works { scroll-behavior: auto; }
  .recent-works .work-card { transition: none; }
  .recent-works .work-card .mat::after { transition: none; }
}
.narrow-intro { width: min(760px, 92%); text-align: center; }
/* ---------- New arrivals / prices (legacy grid rules, kept for reuse) ---------- */
.new-arrivals { grid-template-columns: repeat(4, 1fr); }
.new-arrivals[data-count="3"] { grid-template-columns: repeat(3, 1fr); max-width: 900px; margin: 0 auto; }
.new-arrivals[data-count="5"] { grid-template-columns: repeat(5, 1fr); gap: 2rem 1.2rem; }
@media (max-width: 1000px) { .new-arrivals, .new-arrivals[data-count="5"] { grid-template-columns: repeat(2, 1fr); } .new-arrivals[data-count="3"] { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .new-arrivals, .new-arrivals[data-count] { grid-template-columns: 1fr; } }
.work-status { display: block; margin-top: .25rem; font-size: .8rem; letter-spacing: .06em; color: var(--gold-light); font-weight: 600; }
.work-status.sold { color: var(--danger); text-transform: uppercase; letter-spacing: .16em; font-size: .7rem; }
.badge-sold { background: #9a3b2e; color: #fff; border-color: #9a3b2e; }
.price-note { text-align: center; font-size: .82rem; color: var(--muted); margin: 0 0 1.6rem; }

/* ---------- Lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(28,27,26,.95); display: flex; align-items: center; justify-content: center; padding: 3rem 4rem; }
.lightbox[hidden] { display: none; }
.lightbox figure { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; color: var(--text); }
.lb-mat { --mat: clamp(14px, 4.4vmin, 44px); --bevel: 3px; display: block; padding: var(--mat); background: var(--mat-color); box-shadow: 0 0 0 1px #151413, 0 14px 60px rgba(0,0,0,.65); max-width: 100%; }
/* height budget (Oct 5, 4-line caption): viewport - 6rem padding - ~9rem caption, divided by the mat factor (a landscape mat adds up to ~25 % in height) */
.lightbox img { display: block; max-width: calc((100vw - 8rem) / 1.1667); max-height: max(140px, min(74vh / 1.1667, (100vh - 15rem) / 1.25)); width: auto; height: auto; }
.lightbox { overflow-y: auto; align-items: safe center; }   /* very short screens (phone landscape): the caption can be scrolled to instead of being cut off */
/* Oct 5: caption = 4 lines – "Title — Medium" / size / price / View on your wall →.  Title same font + size as the other lines, bold (700) only; all ~13 % bigger */
.lightbox figcaption { margin-top: 1rem; font-size: 1.04rem; line-height: 1.6; text-align: center; max-width: 70ch; }
.lightbox figcaption strong { font-family: var(--sans); font-size: 1em; font-weight: 700; }
.lb-line { display: block; }
.lightbox .work-status { margin-top: 0; font-size: 1em; font-weight: 400; letter-spacing: 0; }
.lb-close, .lb-prev, .lb-next { position: absolute; background: none; border: 0; color: #fff; cursor: pointer; font-size: 2.8rem; line-height: 1; width: 56px; height: 56px; opacity: .8; }
.lb-close:hover, .lb-prev:hover, .lb-next:hover { opacity: 1; color: var(--gold-light); }
.lb-close { top: 10px; right: 14px; font-size: 3rem; }
.lb-prev { left: 8px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 8px; top: 50%; transform: translateY(-50%); }
.lightbox .work-status:not(.sold) { color: var(--text); }   /* price = same off-white as title / medium / size (the Sold badge keeps its own salmon, 6.6:1) */
.lb-tryon:hover { text-decoration: underline; text-underline-offset: .25em; }
.badge-inline { display: block; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-light); margin-top: .3rem; }
.lb-tryon { display: block; margin-top: .7rem; color: var(--text); text-decoration: none; font-size: .88rem; letter-spacing: .14em; text-transform: uppercase; }

/* ---------- Home sections ---------- */
.intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.intro-img { aspect-ratio: 4/3; background: url("../assets/img/works/golden-hour-glory.jpg") center / cover; border: 1px solid var(--line); position: relative; }
.intro-img span { position: absolute; left: 10px; bottom: 10px; background: rgba(57,56,55,.92); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; padding: .25rem .55rem; color: var(--text); }
.feature-band { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.feature-tile { background: var(--main); border: 1px solid var(--line); padding: 2rem 1.7rem; text-align: center; }
.feature-tile h3 { margin-bottom: .6rem; }
.feature-tile p { color: var(--muted); font-size: .92rem; }
.tryon-band { background: var(--sub); color: var(--text); text-align: center; }
.tryon-band h2 { color: #fff; }
.tryon-band p { max-width: 58ch; margin-left: auto; margin-right: auto; color: var(--text-strong); }

/* ---------- Generic content ---------- */
.prose h2 { margin-top: 2rem; }
.card-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.6rem; }
.card-list-single { grid-template-columns: minmax(0, 640px); justify-content: center; }   /* one card (Exhibits): centred, not stretched */
.info-card { border: 1px solid var(--line); background: var(--sub); padding: 1.7rem; }
.info-card .when { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-light); font-weight: 600; display: block; margin-bottom: .5rem; }
.info-card h3 { margin-bottom: .5rem; }
.media-box { aspect-ratio: 16/9; background: repeating-linear-gradient(45deg, var(--sub), var(--sub) 12px, #484644 12px, #484644 24px); border: 1px dashed var(--muted); display: flex; align-items: center; justify-content: center; text-align: center; padding: 1rem; color: var(--text-strong); font-size: .85rem; margin-bottom: .9rem; }
.contact-grid { grid-template-columns: 1fr 1fr !important; }
.about-grid { display: grid; grid-template-columns: 340px 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.portrait-ph { aspect-ratio: 3/4; background: repeating-linear-gradient(45deg, var(--sub), var(--sub) 12px, #484644 12px, #484644 24px); border: 1px dashed var(--muted); display: flex; align-items: center; justify-content: center; text-align: center; color: var(--text-strong); padding: 1rem; font-size: .85rem; }
.newsletter-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.newsletter-list li { display: grid; grid-template-columns: 210px 1fr; gap: 1rem; padding: 1.1rem .2rem; border-bottom: 1px solid var(--line); align-items: baseline; }
.nl-date { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.nl-title { font-family: var(--serif); font-size: 1.35rem; }
.nl-title a { text-decoration: none; } .nl-title a:hover { text-decoration: underline; }
.soon { font-family: var(--sans); font-size: .75rem; color: var(--muted); }
.signup-box { background: var(--sub); border: 1px solid var(--line); padding: 2rem; margin-top: 3rem; text-align: center; }
.signup-form { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }
.signup-form input { flex: 1 1 220px; min-width: 0; padding: .85rem 1rem; border: 1px solid var(--field-line); font: inherit; font-size: .9rem; background: var(--main); color: var(--text); }
.signup-box .signup-form input { background: var(--main); }
.form-msg { font-size: .82rem; color: var(--gold-light); margin: .6rem 0 0; min-height: 1.2em; }
.form-grid { display: grid; gap: 1.1rem; }
.form-grid label { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; display: block; margin-bottom: .3rem; color: var(--muted); }
.form-grid [aria-invalid="true"] { border-color: #f0b4a8; }
.form-grid input, .form-grid textarea, .form-grid select { width: 100%; padding: .8rem 1rem; border: 1px solid var(--field-line); font: inherit; font-size: .95rem; background: var(--sub); color: var(--text); }
input::placeholder, textarea::placeholder { color: var(--muted-sub); opacity: 1; }
.form-grid input:focus, .form-grid textarea:focus, .form-grid select:focus, .signup-form input:focus { outline: 2px solid var(--gold-light); outline-offset: 1px; border-color: var(--gold-light); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.product-card { text-align: center; }
.product-card .media-box { aspect-ratio: 4/5; }

/* ---------- See It On Your Wall (AR) ---------- */
.ar-wrap { width: min(860px, 94%); margin: 0 auto; text-align: center; }
.ar-stage { position: relative; background: radial-gradient(circle at 50% 35%, #4a4846, var(--sub) 72%); border: 1px solid var(--line); }
model-viewer { width: 100%; height: min(62vh, 520px); --poster-color: transparent; background: transparent; display: block; }
.ar-btn { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); white-space: nowrap; box-shadow: 0 8px 22px rgba(0,0,0,.45); }
.btn-big { font-size: .95rem; padding: 1.3rem 2.4rem; }
.ar-caption { margin: 1.1rem 0 .2rem; font-size: .95rem; color: var(--muted); }
.ar-caption strong { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; color: var(--text); display: block; }
.ar-true { font-size: .8rem; color: var(--muted); margin: 0 0 1.2rem; }
.ar-nav { display: flex; align-items: center; justify-content: center; gap: .8rem; margin: 0 0 .5rem; }
.ar-arrow { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--text); background: var(--main); font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0 0 3px; color: var(--text); }
.ar-arrow:hover { background: var(--text); color: var(--main); }
.ar-picker { display: flex; gap: .5rem; overflow-x: auto; padding: .4rem .2rem; max-width: min(520px, 70vw); scrollbar-width: thin; }
.ar-pick { flex: none; width: 52px; height: 52px; border: 2px solid transparent; background: var(--mat-color); padding: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.ar-pick img { max-width: 100%; max-height: 100%; outline: 2px solid var(--edge-color); }
.ar-pick.sel { border-color: var(--gold); }
.ar-fallback { margin: 1.6rem auto 0; max-width: 520px; background: var(--sub); border: 1px solid var(--line); padding: 1.5rem; }
.ar-fallback[hidden] { display: none; }
.ar-fallback h3 { margin-bottom: .4rem; }
.ar-fallback p { color: var(--text); font-size: .92rem; margin-bottom: .8rem; }
.ar-qr { display: inline-block; background: #fff; padding: 10px; border: 1px solid var(--line); margin-bottom: .6rem; }
.ar-qr img { width: 160px; height: 160px; image-rendering: pixelated; }
.ar-url { font-size: .78rem; word-break: break-all; color: var(--muted-sub); display: block; margin-bottom: .6rem; }
.ar-help { max-width: 560px; margin: 1.6rem auto 0; font-size: .82rem; color: var(--muted); }

/* ---------- Footer ---------- */
.site-footer { background: var(--main); color: var(--text-strong); margin-top: 0; border-top: 1px solid var(--line); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1.5fr; gap: 2rem; padding: 3.5rem 0 2.5rem; }
.site-footer h4 { color: var(--text); font-family: var(--sans); font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 600; margin-bottom: 1rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .45rem; }
.site-footer a { color: var(--text-strong); text-decoration: none; font-size: .88rem; }
.site-footer a:hover { color: var(--gold-light); }
.site-footer p { font-size: .88rem; }
.site-footer .logo { color: var(--text); margin-bottom: 1rem; } .site-footer .logo-img { width: 230px; } .site-footer .logo-sub { color: var(--text); }
.site-footer .ph-text em { background: rgba(197,160,89,.22); }
.socials { display: flex; gap: 1.1rem; }
.footer-news .signup-form input { flex-basis: 150px; background: var(--sub); }
.footer-news .btn { padding: .8rem 1.1rem; }
.footer-news .form-msg { color: var(--gold-light); }
.footer-bottom { border-top: 1px solid var(--line); background: var(--sub); font-size: .75rem; letter-spacing: .05em; color: var(--muted-sub); }
.footer-bottom .container { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; padding: 1.1rem 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer-brand, .footer-news { grid-column: span 3; }
  .main-nav ul { gap: 1.4rem; }
}
@media (max-width: 960px) {
  :root { --header-h: 72px; }
  .nav-toggle { display: block; }
  .main-nav { position: absolute; top: 100%; left: 0; right: 0; background: var(--main); border-bottom: 1px solid var(--line); box-shadow: 0 16px 24px rgba(0,0,0,.4); max-height: 0; overflow: hidden; visibility: hidden; transition: max-height .35s; }
  .main-nav.open { max-height: 80vh; overflow: auto; visibility: visible; }
  .main-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: .5rem 5% 1rem; }
  .main-nav > ul > li { border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; margin: 0; }
  .main-nav a { padding: 1rem 0; flex: 1; font-size: .95rem; }
  .main-nav > ul > li > a::after, .has-sub > a::before { display: none; }
  .main-nav > ul > li.active > a { color: var(--gold-light); }   /* current section highlighted in the mobile menu */
  .sub-toggle { display: block; background: none; border: 0; width: 48px; height: 48px; cursor: pointer; position: relative; }
  .sub-toggle span { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; border-right: 1.5px solid var(--text); border-bottom: 1.5px solid var(--text); transform: translate(-50%, -70%) rotate(45deg); transition: transform .2s; }
  li.open > .sub-toggle span { transform: translate(-50%, -30%) rotate(-135deg); }
  .dropdown { position: static; flex-basis: 100%; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; border-left: 2px solid var(--gold); margin: 0 0 .8rem .3rem; min-width: 0; max-height: 0; overflow: hidden; padding: 0 !important; transition: max-height .3s; }
  li.open > .dropdown { max-height: 400px; }
  .has-sub:hover > .dropdown { max-height: 0; } li.open:hover > .dropdown { max-height: 400px; }
  .dropdown a { padding: .7rem 1rem; }
  .intro-grid, .about-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr !important; }
  .about-grid .portrait-ph { max-width: 300px; }
  .feature-band { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .logo-img { width: 168px; }
  .logo-sub { padding-left: .9rem; font-size: .56rem; }
  .newsletter-list li { grid-template-columns: 1fr; gap: .2rem; }
  .two-col { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand, .footer-news { grid-column: span 2; }
  .lightbox { padding: 3.2rem .6rem 1rem; }
  .lightbox img { max-width: calc((100vw - 1.2rem) / 1.1667); }
  .lb-prev, .lb-next { top: auto; bottom: 8px; transform: none; }
  .gallery-grid { grid-template-columns: 1fr 1fr; gap: 1.6rem 1rem; }
  .work-card figcaption { font-size: .78rem; }
  .work-card figcaption strong { font-size: 1.05rem; }
  model-viewer { height: 56vh; }
  .ar-btn { padding: 1.1rem 1.6rem; font-size: .85rem; }
}
@media (max-width: 420px) { .gallery-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* contact lines (footer + Contact page) */
.contact-lines { margin: 0 0 1rem; line-height: 1.8; }
.contact-lines a { color: var(--gold-light); text-decoration: underline; text-underline-offset: 3px; }
.contact-lines a:hover { color: #fff; }
.contact-lines strong { display: inline-block; min-width: 4.5rem; font-weight: 500; color: var(--text-strong); }

/* ---------- Painting list pages (All / Watercolors / Acrylics / Oils / Archives): compact header so the first row of paintings is high on screen ---------- */
body[data-category] .page-hero { padding: clamp(.75rem, 1.7vh, 1rem) 0; }   /* Oct 6: even top/bottom now that the eyebrow is gone */
.page-hero .breadcrumb { display: none; }   /* Oct 6: eyebrow above page titles removed on every page (markup gone too) */
body[data-category] .page-hero h1 { font-size: clamp(1.55rem, 2.4vw, 2rem); margin: 0; line-height: 1.1; }
body[data-category] main > .section { padding-top: clamp(.8rem, 1.8vh, 1.2rem); padding-bottom: clamp(2rem, 4vw, 3rem); }
body[data-category] .cat-tabs { margin: 0 0 .7rem; gap: .2rem 1.6rem; }
body[data-category] .price-note { font-size: .78rem; line-height: 1.5; margin: 0 0 1.1rem; }
/* Oct 5: every other page gets the same compact title band (small label + smaller title, tight padding) and a shorter gap before the first content */
body:not([data-category]) .page-hero { padding: clamp(.9rem, 2vh, 1.15rem) 0; }
body:not([data-category]) .page-hero h1 { font-size: clamp(1.55rem, 2.4vw, 2rem); margin: 0; line-height: 1.1; }
body:not([data-category]) .page-hero p { margin-top: .35rem; font-size: .9rem; line-height: 1.5; }
body:not([data-category]) main > .page-hero + .section { padding-top: clamp(1.3rem, 2.8vw, 2.1rem); }
@media (max-width: 600px) { body[data-category] .cat-tabs { gap: .1rem .85rem; flex-wrap: nowrap; } body[data-category] .cat-tabs a { font-size: .66rem; letter-spacing: .09em; white-space: nowrap; } }

/* ---------- Imported content pages (About, Workshops, Exhibits, Demonstrations, Media, Contact) ---------- */
.content-intro { max-width: 70ch; margin: 0 auto 2.5rem; }
.content-intro p { color: var(--text); }
.content-h { text-align: center; margin: 3rem 0 1.6rem; }
.section > .container > .content-h:first-child { margin-top: 0; }
.content-note { text-align: center; color: var(--muted); font-size: .92rem; margin: 2rem 0 0; }
.content-cta { text-align: center; margin: 2.2rem 0 0; }
.card-venue { color: var(--muted-sub); font-size: .9rem; }
.info-card p:last-child { margin-bottom: 0; }
.info-card .btn { margin-top: .4rem; }
.vitae-list { list-style: none; margin: 0; padding: 0; }
.vitae-list li { padding: .55rem 0; border-bottom: 1px solid var(--line); font-size: .92rem; line-height: 1.55; color: var(--text); }
.vitae-list li:last-child { border-bottom: 0; }
.vitae-list strong { color: var(--gold-light); font-weight: 600; margin-right: .25rem; }
.info-card .vitae-list li { color: var(--muted-sub); }
.info-card .vitae-list strong { color: var(--gold-light); }
.vitae-cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); }
.two-col-list { columns: 2 340px; column-gap: 3rem; }
.two-col-list li { break-inside: avoid; }
.skills-list { list-style: none; margin: 0 auto; padding: 0; columns: 2 300px; column-gap: 3rem; max-width: 980px; }
.skills-list li { break-inside: avoid; padding: .5rem 0 .5rem 1.4rem; position: relative; color: var(--text); font-size: .95rem; }
.skills-list li::before { content: ""; position: absolute; left: 0; top: 1.05rem; width: .6rem; height: 1px; background: var(--gold); }
.pull-quote { max-width: 62ch; margin: 2.6rem auto 0; padding: 0 0 0 1.4rem; border-left: 2px solid var(--gold); font-family: var(--serif); font-size: 1.3rem; line-height: 1.5; font-style: italic; color: var(--text-strong); }
.about-figure { margin: 0; }
.about-figure img { display: block; width: 100%; height: auto; }
.about-figure figcaption { margin-top: .6rem; font-size: .8rem; letter-spacing: .06em; color: var(--muted); }
.video-link { display: block; position: relative; margin-bottom: .9rem; background: #000; }
.video-link img { display: block; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; opacity: .9; transition: opacity .2s; }
.video-link:hover img, .video-link:focus-visible img { opacity: 1; }
.video-link .play { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(20,20,20,.72); border: 1px solid var(--gold); }
.video-link .play::after { content: ""; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%); border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent #fff; }
.social-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; }
@media (max-width: 960px) { .about-grid .about-figure { max-width: 420px; } }

/* ---------- "Sold" badge: top-left corner of the painting + mat (grid cards, homepage, lightbox) ---------- */
.mat > .badge { top: 12px; left: 12px; z-index: 3; pointer-events: none; line-height: 1.2; }   /* above the hover haze; clicks pass through to the painting */
.lb-mat { position: relative; }
.lb-mat > .lb-badge { top: 12px; left: 12px; font-size: .68rem; line-height: 1.2; pointer-events: none; }
.lb-mat > .lb-badge[hidden] { display: none; }
@media (max-width: 600px) { .mat > .badge { top: 8px; left: 8px; font-size: .56rem; padding: .2rem .45rem; letter-spacing: .14em; } .lb-mat > .lb-badge { top: 8px; left: 8px; } }   /* equal top/left inset from the mat's corner: 12px desktop, 8px phones */

/* ---------- Selected Works: sort icon + compact menu (top-left of the grid) ---------- */
.work-sort { position: relative; display: flex; align-items: center; gap: .55rem; margin: 0 0 1.1rem; min-height: 36px; }
.ws-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; background: transparent; color: var(--muted); border: 1px solid var(--line); border-radius: 0; cursor: pointer; transition: color .2s, border-color .2s, background .2s; }
.ws-btn:hover, .work-sort.is-open .ws-btn { color: var(--text); border-color: var(--field-line); background: var(--sub); }
.work-sort.is-sorted .ws-btn { color: var(--gold-light); border-color: rgba(197,160,89,.55); }
.ws-btn:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }
.ws-current { font-size: .72rem; letter-spacing: .08em; color: var(--muted); }
.ws-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; list-style: none; margin: 0; padding: .35rem 0; min-width: 220px; background: var(--main); border: 1px solid var(--line); border-top: 2px solid var(--gold); box-shadow: 0 14px 30px rgba(0,0,0,.45); }
.ws-menu[hidden] { display: none; }
.ws-menu button { display: flex; align-items: center; width: 100%; padding: .6rem 1rem .6rem 2.1rem; background: none; border: 0; color: var(--text-strong); font: inherit; font-size: .85rem; text-align: left; cursor: pointer; position: relative; }
.ws-menu button:hover, .ws-menu button:focus-visible { background: var(--sub); color: var(--gold-light); outline: none; }
.ws-menu button[aria-checked="true"] { color: var(--gold-light); }
.ws-menu button[aria-checked="true"]::before { content: ""; position: absolute; left: .95rem; top: 50%; width: .55rem; height: .3rem; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-70%) rotate(-45deg); }
@media (max-width: 600px) { .work-sort { margin-bottom: .9rem; } .ws-menu { min-width: 210px; } }
/* Oct 5: zero-height sort bar – the icon overlays the left end of the note line above the grid, so it no longer pushes the paintings down.
   The note keeps symmetric side padding so its centred text never runs under the icon. */
.work-sort.ws-inline { height: 0; min-height: 0; margin: 0; display: block; z-index: 5; }
.work-sort.ws-inline .ws-btn { position: absolute; left: 0; top: calc(.585rem - 18px); }       /* vertically centred on the note's first line (line box ≈ 1.17rem) */
.work-sort.ws-inline .ws-current { position: absolute; left: 46px; top: .2rem; white-space: nowrap; line-height: 1.2; }
.work-sort.ws-inline .ws-menu { top: calc(.585rem + 24px); }
body[data-category] .price-note.has-sort { padding: 0 46px; min-height: 1.17rem; }
@media (max-width: 999px) { .work-sort.ws-inline .ws-current { display: none; } }   /* narrow screens: the gold icon + the checked menu item show the active sort */

/* footer newsletter links + 5-item main nav */
.footer-news-links { margin-top: .9rem; font-size: .85rem; color: var(--muted); }
@media (min-width: 961px) and (max-width: 1300px) { .main-nav ul { gap: 1.1rem; } }
@media (min-width: 961px) and (max-width: 1100px) { .main-nav ul { gap: .95rem; } .main-nav a { font-size: .8rem; letter-spacing: .01em; } .has-sub { margin-right: .65rem; } .logo-img { width: 160px; } }   /* 7 top-level items (with Giclée Prints) still fit on one line down to 961px */
@media (min-width: 961px) { .main-nav > ul > li:nth-last-child(3) > .dropdown { left: auto; right: -1.2rem; } }   /* Newsletter dropdown (3rd from the end, before About and Contact) opens leftwards so it never pokes past the right edge */
/* Sold badge size (+18 %, Oct 5): grid / carousel 11.3px text (phones 10.6px), lightbox 12.8px; padding scaled by the same factor. Insets unchanged (12px / 8px). */
.mat > .badge { font-size: .708rem; padding: .295rem .65rem; }
.lb-mat > .lb-badge { font-size: .8rem; padding: .295rem .65rem; }
@media (max-width: 600px) { .mat > .badge { font-size: .66rem; padding: .236rem .53rem; } }
/* Sold badge text weight: bold 700 (Tommy chose option B on sold-badge-bold.html, Oct 5). Montserrat 700 is loaded in every page's font link. */
.mat > .badge, .lb-mat > .lb-badge { font-weight: 700; }

/* ---------- Newsletter signup band (above the footer on every public page, built in js/site.js) ---------- */
.nl-band { background: var(--sub); border-top: 1px solid var(--line); }
.nl-band-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 470px); gap: .8rem 3rem; align-items: center; padding: 1.25rem 0; }   /* Oct 5: tighter (was 2.6rem top/bottom) */
.nl-band h2 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); margin: 0; }
.nl-band-text p { margin: 0; color: var(--muted-sub); font-size: .95rem; }
.nl-band .signup-form { justify-content: flex-start; flex-wrap: nowrap; }
.nl-band .signup-form input { background: var(--main); }
.nl-band .form-msg { margin-top: .6rem; font-size: .84rem; color: var(--text-strong); min-height: 0; }
.nl-band .form-msg:empty { display: none; }
.nl-band .form-msg a, .signup-box .form-msg a, .form-grid .form-msg a { color: var(--gold-light); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) {
  .nl-band-inner { grid-template-columns: minmax(0, 1fr); padding: 1.1rem 0 1.2rem; text-align: center; }   /* was 2.1rem */
  .nl-band .signup-form { justify-content: center; }
  .nl-band .signup-form input { flex: 1 1 0; min-width: 0; }
}
@media (max-width: 380px) { .nl-band .signup-form { flex-wrap: wrap; } .nl-band .signup-form .btn { flex: 1 1 100%; } }
@media (max-width: 360px) { body[data-category] .cat-tabs { gap: .1rem .6rem; } body[data-category] .cat-tabs a { font-size: .62rem; letter-spacing: .06em; } }   /* very narrow phones (320 px): the one-line category tabs never poke past the edge */

/* ---------- Giclée Prints page ---------- */
.print-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2.4rem 2rem; }
.print-card { display: flex; flex-direction: column; border: 1px solid var(--line); background: var(--sub); min-width: 0; }
.print-body { display: flex; flex-direction: column; flex: 1; padding: 1.4rem 1.5rem 1.6rem; }
.print-body h2 { font-family: var(--serif); font-size: 1.55rem; font-weight: 600; line-height: 1.2; margin: 0 0 1rem; color: var(--text); }
.print-body .btn { margin-top: auto; align-self: flex-start; }
@media (max-width: 600px) {
  .print-grid { grid-template-columns: 1fr; gap: 1.8rem; }
  .print-body { padding: 1.2rem 1.1rem 1.4rem; }
      }

/* ---------- Site search (top right of the header) ---------- */
.header-inner > .logo { margin-right: auto; }   /* nav + search sit together on the right */
.site-search { display: flex; align-items: center; margin-left: 1.3rem; }
.search-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; background: none; border: 1px solid transparent; border-radius: 50%; color: var(--text); cursor: pointer; transition: color .2s, border-color .2s; }
.search-toggle:hover, .site-search.is-open .search-toggle { color: var(--gold-light); border-color: var(--line); }
.search-toggle:focus-visible, .search-close:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }
.search-panel { position: absolute; top: 100%; right: max(3%, calc((100% - 1320px) / 2)); width: min(480px, 94%); background: var(--main); border: 1px solid var(--line); border-top: 2px solid var(--gold); box-shadow: 0 16px 34px rgba(0,0,0,.45); z-index: 120; padding: .9rem; }
.search-panel[hidden] { display: none; }
.search-field { display: flex; align-items: center; gap: .55rem; background: var(--sub); border: 1px solid var(--field-line); padding: 0 .4rem 0 .75rem; }
.search-field:focus-within { border-color: var(--gold-light); }
.search-field > svg { flex: none; color: var(--muted-sub); }
.search-field input { flex: 1; min-width: 0; background: none; border: 0; color: var(--text); font: 500 .95rem var(--sans); padding: .75rem 0; outline: none; -webkit-appearance: none; appearance: none; }
.search-field input::placeholder { color: var(--muted-sub); }
.search-field input::-webkit-search-cancel-button { display: none; }
.search-close { flex: none; width: 34px; height: 34px; background: none; border: 0; color: var(--muted-sub); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.search-close:hover { color: var(--gold-light); }
.search-hint { margin: .7rem .2rem .1rem; font-size: .8rem; color: var(--muted); }
.search-hint em { font-style: normal; color: var(--text-strong); }
.search-results { list-style: none; margin: 0; padding: 0; max-height: min(62vh, 520px); overflow-y: auto; overscroll-behavior: contain; }
.search-panel.has-results .search-results { margin-top: .6rem; }
.search-results a { display: flex; align-items: center; gap: .75rem; padding: .55rem .6rem; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--line); }
.search-results li:last-child a { border-bottom: 0; }
.search-results [aria-selected="true"] a, .search-results a:hover { background: var(--sub); }
.search-results [aria-selected="true"] a { box-shadow: inset 2px 0 0 var(--gold); }
.search-results img, .search-results .sr-ico { flex: none; width: 44px; height: 44px; object-fit: cover; background: var(--sub); border: 1px solid var(--line); }
.search-results .sr-ico { display: flex; align-items: center; justify-content: center; color: var(--gold-light); font-size: 1rem; }
.sr-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.sr-title { font-family: var(--serif); font-size: 1.12rem; font-weight: 600; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-sub { font-size: .74rem; line-height: 1.4; color: var(--muted-sub); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sr-type { flex: none; align-self: flex-start; margin-top: .2rem; font-size: .6rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-light); border: 1px solid var(--line); padding: .15rem .4rem; }
.search-results mark { background: rgba(197,160,89,.28); color: inherit; padding: 0; }
.sr-none { padding: .9rem .4rem .4rem; font-size: .85rem; color: var(--muted); }
@media (min-width: 961px) and (max-width: 1100px) { .site-search { margin-left: .55rem; } .search-toggle { width: 36px; height: 36px; } }
@media (max-width: 960px) {
  .header-inner { justify-content: flex-start; }
  .header-inner > .logo { margin-right: auto; }
  .site-search { order: 2; margin-left: 0; margin-right: .2rem; }
  .nav-toggle { order: 3; }
  .search-toggle { width: 44px; height: 44px; }
  .search-panel { left: 0; right: 0; width: auto; border-left: 0; border-right: 0; padding: .8rem 4%; }
  .search-results { max-height: calc(100vh - var(--header-h) - 110px); max-height: calc(100dvh - var(--header-h) - 110px); }
}
@media (max-width: 600px) {   /* type label moves above the title; 16px input avoids iOS zoom */
  .search-results a { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: .75rem; row-gap: .2rem; align-items: center; }
  .search-results img, .search-results .sr-ico { grid-row: 1 / 3; grid-column: 1; }
  .sr-type { grid-row: 1; grid-column: 2; justify-self: start; margin: 0; font-size: .55rem; padding: .1rem .35rem; }
  .sr-txt { grid-row: 2; grid-column: 2; }
  .search-field input { font-size: 1rem; }
}   /* 16px input: no iOS zoom */
/* search targets: prints (#slug) clear the sticky header and get a brief gold outline */
.print-card { scroll-margin-top: calc(var(--header-h) + 1.2rem); }
.print-card:target { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---------- Drawn To The Word ghost link (was in the header until Oct 5; style kept for the test pages) ---------- */
.dtw-link { display: inline-flex; align-items: center; font-family: var(--sans); font-size: .58rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; line-height: 1;
  color: var(--muted-sub); text-decoration: none; border: 1px solid var(--line); padding: .36rem .62rem; background: transparent; white-space: nowrap; transition: color .2s, border-color .2s; }
.dtw-link:hover, .dtw-link:focus-visible { color: var(--gold-light); border-color: var(--gold-light); }
.dtw-link:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }
.dtw-ext { font-size: .9em; margin-left: .3em; opacity: .75; }
.nav-dtw { display: none; }
/* Oct 5: the DTW link was removed from the header – header back to 84px, no extra top padding, no phone-menu row */
.header-inner > .dtw-link, .nav-dtw { display: none; }
/* soft outline button (used for the Drawn To The Word link on Demonstrations) */
.btn-soft { background: transparent; color: var(--gold-light); border-color: rgba(197,160,89,.5); }
.btn-soft:hover, .btn-soft:focus-visible { color: var(--gold-light); border-color: var(--gold-light); background: rgba(197,160,89,.08); }

/* ---------- Newsletter prompt (scroll-triggered; bottom-right card on desktop, slide-up bar on phones) ---------- */
.nl-prompt { position: fixed; right: 20px; bottom: 20px; z-index: 90; width: min(340px, calc(100vw - 40px)); background: var(--main); border: 1px solid var(--line); border-top: 2px solid var(--gold);
  box-shadow: 0 14px 34px rgba(0,0,0,.45); padding: 1.1rem 1.15rem 1rem; opacity: 0; transform: translateY(16px); transition: opacity .35s ease, transform .35s ease; }
.nl-prompt[hidden] { display: none; }
.nl-prompt.is-in { opacity: 1; transform: none; }
.nl-prompt.is-in.is-tucked { opacity: 0; transform: translateY(16px); pointer-events: none; }
.nl-prompt h2 { font-size: 1.3rem; margin: 0 1.8rem .75rem 0; line-height: 1.2; }
.nl-prompt .signup-form { flex-wrap: nowrap; justify-content: flex-start; gap: .4rem; }
.nl-prompt .signup-form input { flex: 1 1 auto; padding: .62rem .75rem; font-size: .84rem; background: var(--sub); }
.nl-prompt .btn { padding: .62rem .85rem; font-size: .64rem; letter-spacing: .12em; flex: none; }
.nl-prompt .form-msg { font-size: .78rem; color: var(--text-strong); margin: .55rem 0 0; min-height: 0; line-height: 1.45; }
.nl-prompt .form-msg:empty { display: none; }
.nl-prompt .form-msg a { color: var(--gold-light); text-decoration: underline; text-underline-offset: 3px; }
.nlp-close { position: absolute; top: .35rem; right: .35rem; width: 32px; height: 32px; background: none; border: 0; color: var(--muted-sub); font-size: 1.35rem; line-height: 1; cursor: pointer; }
.nlp-close:hover { color: var(--gold-light); }
.nlp-close:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 1px; }
@media (max-width: 600px) {
  .nl-prompt { left: 0; right: 0; bottom: 0; width: auto; border-left: 0; border-right: 0; border-bottom: 0; padding: .65rem 4% calc(.7rem + env(safe-area-inset-bottom)); transform: translateY(100%); opacity: 1; box-shadow: 0 -10px 26px rgba(0,0,0,.4); }
  .nl-prompt.is-in.is-tucked { transform: translateY(100%); opacity: 1; }
  .nl-prompt h2 { font-family: var(--sans); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; margin: .15rem 2.2rem .5rem 0; color: var(--text); }
  .nlp-close { top: .15rem; right: 2%; width: 40px; height: 40px; }
  .nl-prompt .signup-form input { font-size: 1rem; padding: .55rem .7rem; }   /* 16px: no iOS zoom */
  .nl-prompt .btn { padding: .55rem .8rem; }
}
/* Mailchimp signup results (footer band, popup, newsletter.html) – Oct 6 */
.signup-form + .form-msg.is-success { color: var(--gold-light); }
.signup-form + .form-msg.is-error { color: #f0b4a8; }
.signup-form button[disabled] { opacity: .65; cursor: progress; }
@media (max-width: 760px) { .signup-form input { font-size: 1rem; } }   /* 16px on phones: iOS Safari doesn't zoom into the field */
@media (prefers-reduced-motion: reduce) { .nl-prompt { transition: none; } }

/* About – Artist Vitae (from Paul's CV PDF): location line under the heading; long lists keep the year column readable */
.vitae-loc { margin: .2rem 0 0; color: var(--muted-sub); font-size: .9rem; letter-spacing: .04em; }
.vitae-cards .info-card h3 { margin-bottom: .6rem; }

/* Giclée prints: the SAME mat as the paintings (.work-thumb > .mat > .mat-in – cream #FAF7F3, equal sides 8.3 % of the long side,
   2px #B8B3AB inner edge), just without the zoom/lightbox */
.print-media { padding: 1.5rem; background: var(--main); border-bottom: 1px solid var(--line); }
.print-thumb, .print-thumb img { cursor: zoom-in; }   /* Oct 7: the photo opens the lightbox */
/* size picker + quantity + buy */
.print-order { display: flex; flex-direction: column; flex: 1; }
/* Size dropdown (Oct 6 – replaces the size radio list) */
.po-field { margin: 0 0 .9rem; }
.po-field > label { display: block; font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-sub); font-weight: 600; margin-bottom: .4rem; }
.po-select { position: relative; }
.po-select::after { content: ""; position: absolute; right: 1rem; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(45deg); pointer-events: none; }
.po-size { -webkit-appearance: none; appearance: none; display: block; width: 100%; min-height: 48px; padding: .7rem 2.6rem .7rem .9rem; background: var(--main); color: var(--text); border: 1px solid var(--field-line); border-radius: 0; font: inherit; font-size: 1rem; line-height: 1.3; cursor: pointer; }
.po-size:hover { border-color: rgba(197,160,89,.6); }
.po-size:focus { outline: 2px solid var(--gold-light); outline-offset: 1px; border-color: var(--gold-light); }
.po-size option { background: var(--main); color: var(--text); }
.po-meta { font-size: .76rem; color: var(--muted-sub); margin: .45rem 0 0; }
.po-meta:empty { display: none; }
.po-row { display: flex; align-items: center; gap: .6rem; margin: 0 0 1rem; font-size: .84rem; }
.po-row label { color: var(--muted-sub); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; }
.po-qty { width: 4.6rem; min-height: 44px; padding: .45rem .6rem; background: var(--main); color: var(--text); border: 1px solid var(--field-line); font: inherit; font-size: 1rem; }   /* 16px: no iOS zoom */
.po-qty:focus { outline: 2px solid var(--gold-light); outline-offset: 1px; border-color: var(--gold-light); }
.po-total { margin-left: auto; color: var(--text); font-weight: 600; }
.print-order .po-add { align-self: stretch; text-align: center; margin-top: auto; cursor: pointer; white-space: nowrap; padding-left: .6rem; padding-right: .6rem; transition: background .2s, border-color .2s, color .2s; }
.print-order .po-add.is-added { background: transparent; color: var(--gold-light); border-color: var(--gold); }
.po-added { font-size: .74rem; color: var(--muted-sub); margin: .5rem 0 0; min-height: 1.1rem; opacity: 0; transition: opacity .3s; }
.po-added.is-on { opacity: 1; }
.po-view { background: none; border: 0; padding: 0; font: inherit; color: var(--gold-light); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.po-notice { border: 1px solid rgba(197,160,89,.5); border-left: 3px solid var(--gold); background: var(--sub); padding: .9rem 1.2rem; margin: 0 0 2rem; font-size: .9rem; color: var(--text-strong); }
.po-notice strong { color: var(--gold-light); }
.po-thanks { border: 1px solid var(--gold); background: rgba(197,160,89,.12); padding: .9rem 1.2rem; margin: 0 0 2rem; color: var(--text); text-align: center; }
@media (max-width: 600px) {
  .print-media { padding: 1.1rem; }
}

/* ---------- Footer: Drawn To The Word line (option D, Oct 5) – centred, just above the bottom strip; small muted text + the soft outline button ---------- */
.dtwf { font-size: .78rem; line-height: 1.5; color: var(--muted-sub); letter-spacing: .02em; }
.dtwf-strip { border-top: 1px solid var(--line); }
.dtwf-strip .container { display: flex; align-items: center; justify-content: center; gap: .6rem 1rem; flex-wrap: wrap; padding: .95rem 0; text-align: center; }
.site-footer .dtwf-strip .dtw-link { font-size: .6rem; color: var(--muted-sub); text-decoration: none; }
.site-footer .dtwf-strip .dtw-link:hover, .site-footer .dtwf-strip .dtw-link:focus-visible { color: var(--gold-light); }

/* ---------- Contact form (Formspree) ---------- */
.hp-field { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }   /* spam honeypot (_gotcha) – hidden from people */
.contact-form .form-msg { color: var(--text-strong); font-size: .88rem; line-height: 1.5; }
.contact-form .form-msg.is-success { color: var(--text); border-left: 3px solid var(--gold); background: var(--sub); padding: .7rem .9rem; }
.contact-form .form-msg.is-error { color: #f0b4a8; }
.contact-form .form-msg:focus { outline: none; }
.contact-form button[disabled] { opacity: .65; cursor: progress; }
.form-note[hidden] { display: none; }

/* ---------- Giclée Prints: free-shipping line + cart (Oct 6 – giclee-prints.html only) ---------- */
.po-promo { display: inline-block; margin: .55rem auto 0 !important; padding: .3rem 0 0; border-top: 1px solid rgba(197,160,89,.55);
  font-size: .68rem !important; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-light) !important; font-weight: 600; }
.po-thanks strong { color: var(--gold-light); }
.po-thanks:focus { outline: none; }

/* Bag button (Oct 6, later): solid gold floating button bottom-right on every width, always visible; lifts above the newsletter
   popup/bar while that is on screen (--nlp-h is set by setupNewsletterPrompt()). */
.cart-fab { position: fixed; z-index: 95; right: 24px;
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; padding: 0; cursor: pointer;
  background: #C5A059; color: #1f1e1c; border: 0; box-shadow: 0 6px 16px rgba(0,0,0,.38), 0 1px 3px rgba(0,0,0,.3);
  transition: background .2s, box-shadow .2s, transform .2s, bottom .3s ease; }
.cart-fab svg { width: 25px; height: 25px; }
.cart-fab:hover { background: var(--gold-light); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,.45), 0 2px 4px rgba(0,0,0,.3); }
.cart-fab:active { transform: translateY(0); }
.cart-fab:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.cart-count { position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #1f1e1c; color: #fff;
  border: 2px solid #C5A059; font-family: var(--sans); font-size: .68rem; font-weight: 700; line-height: 18px; text-align: center; }
.cart-count:empty { display: none; }
.cart-fab.is-bump { animation: cartBump .45s ease; }
@keyframes cartBump { 40% { transform: scale(1.12); } }

.cart-overlay { position: fixed; inset: 0; z-index: 110; background: rgba(0,0,0,.5); opacity: 0; transition: opacity .3s; }
.cart-overlay.is-open { opacity: 1; }
.cart-panel { position: fixed; z-index: 120; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); display: flex; flex-direction: column;
  background: var(--main); border-left: 1px solid var(--line); box-shadow: -18px 0 40px rgba(0,0,0,.4); transform: translateX(100%); transition: transform .32s ease; }
.cart-panel.is-open { transform: none; }
.cart-panel[hidden], .cart-overlay[hidden] { display: none; }
body.cart-is-open { overflow: hidden; }
.cart-head { display: flex; align-items: center; justify-content: space-between; padding: 1.15rem 1.4rem 1rem; border-bottom: 1px solid var(--line); }
.cart-head h2 { font-size: 1.45rem; margin: 0; }
.cart-close { width: 40px; height: 40px; margin-right: -.6rem; background: none; border: 0; color: var(--muted-sub); font-size: 1.6rem; line-height: 1; cursor: pointer; }
.cart-close:hover { color: var(--gold-light); }
.cart-close:focus-visible, .cart-panel button:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }
.cart-body { flex: 1; overflow-y: auto; padding: .4rem 1.4rem; overscroll-behavior: contain; }
.cart-lines { list-style: none; margin: 0; padding: 0; }
.cart-line { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: .9rem; align-items: start; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.cl-thumb { width: 64px; height: 64px; display: grid; place-items: center; background: #f4f1ea; padding: 5px; box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.cl-thumb img { max-width: 54px; max-height: 54px; width: auto; height: auto; object-fit: contain; display: block; }
.cl-title { font-family: var(--serif); font-size: 1.12rem; line-height: 1.2; margin: 0 0 .15rem; color: var(--text); }
.cl-size { font-size: .76rem; color: var(--muted-sub); margin: 0 0 .5rem; }
.cl-qty { display: inline-flex; align-items: center; border: 1px solid var(--field-line); }
.cl-step { width: 34px; height: 34px; background: none; border: 0; color: var(--text); font-size: 1.05rem; line-height: 1; cursor: pointer; }
.cl-step:hover:not([disabled]) { color: var(--gold-light); }
.cl-step[disabled] { opacity: .3; cursor: default; }
.cl-n { min-width: 1.8rem; text-align: center; font-size: .9rem; }
.cl-right { display: flex; flex-direction: column; align-items: flex-end; gap: .55rem; }
.cl-price { font-weight: 600; font-size: .92rem; color: var(--text); white-space: nowrap; }
.cl-remove { background: none; border: 0; padding: 0; font: inherit; font-size: .72rem; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cl-remove:hover { color: var(--gold-light); }
.cart-empty { color: var(--muted-sub); font-size: .92rem; padding: 1.4rem 0; margin: 0; }
.cart-foot { border-top: 1px solid var(--line); padding: 1rem 1.4rem calc(1.2rem + env(safe-area-inset-bottom)); background: var(--sub); }
.cart-foot[hidden] { display: none; }
.cart-row { display: flex; justify-content: space-between; font-size: .95rem; margin: 0 0 .35rem; }
.cart-row > span:last-child { font-weight: 600; }
.cart-shiprow { align-items: baseline; gap: .8rem; }
.cart-ship-rule { font-size: .74rem; color: var(--muted-sub); font-weight: 400; white-space: nowrap; }
.cart-row .cart-ship-val { font-weight: 400; font-size: .8rem; color: var(--muted-sub); text-align: right; }
.cart-row .cart-ship-val.is-free { font-weight: 600; font-size: .95rem; color: var(--gold-light); }
.cart-freenote { font-size: .78rem; color: var(--gold-light); margin: .2rem 0 .2rem; }
.cart-freenote:empty { display: none; }
.cart-note { font-size: .74rem; color: var(--muted-sub); margin: .2rem 0 .9rem; }
.cart-checkout { width: 100%; cursor: pointer; }
.cart-checkout[disabled] { opacity: .7; cursor: progress; }
.cart-msg { font-size: .76rem; line-height: 1.5; color: var(--text-strong); margin: .7rem 0 0; }
.cart-msg:empty { display: none; }
.cart-msg a { color: var(--gold-light); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 760px) {
  .cart-fab { right: 14px; width: 52px; height: 52px; }
  .cart-panel { top: auto; left: 0; width: 100%; max-height: 88vh; max-height: 88dvh; border-left: 0; border-top: 2px solid var(--gold);
    box-shadow: 0 -14px 34px rgba(0,0,0,.45); transform: translateY(100%); }
  .cart-head { padding: .9rem 1.1rem .8rem; }
  .cart-body { padding: .2rem 1.1rem; }
  .cart-foot { padding: .9rem 1.1rem calc(1rem + env(safe-area-inset-bottom)); }
  .cl-step { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) { .cart-panel, .cart-overlay, .cart-fab { transition: none; } .cart-fab.is-bump { animation: none; } }
/* Oct 7: removed the 80px extra padding under the prints-page footer bar (it was room for the OLD bottom-right bag button; the button now
   sits top-right) – the bottom bar is the same height on every page, like /workshops. */

/* Arrows (Tommy, Oct 6): thin white chevrons beside the thumbnail row on every screen; hover = slightly thicker white. */
.carousel { --agap: 16px; }
.car-btn { font-size: 0; text-shadow: none; color: #fff; }
.car-btn::before { content: ""; display: block; width: 16px; height: 16px; border-style: solid; border-color: currentColor; border-width: 1.5px 0 0 1.5px; transition: border-width .15s ease; }
.car-prev::before { transform: translateX(3px) rotate(-45deg); }
.car-next::before { transform: translateX(-3px) rotate(135deg); }
.car-btn:hover, .car-btn:disabled:hover { color: #fff; }
.car-btn:hover::before { border-width: 2.75px 0 0 2.75px; }
@media (max-width: 600px) {
  .carousel { --agap: 10px; }
  .car-btn::before { width: 13px; height: 13px; }
}
/* No light seam between painting and gray edge (Tommy, Oct 6): the backing behind every painting is the edge gray, and
   the carousel image fills its box (cover) so sub-pixel rounding / fractional zoom can never show the cream mat inside the edge. */
.recent-works .work-thumb img { object-fit: cover; }
.ct-mat img, .ar-pick img { background: var(--edge-color); }
/* See It On Your Wall (Tommy, Oct 7): sub-line on one line; on narrow phones it wraps into two even lines. */
body[data-page="tryon"] .page-hero p { max-width: none; white-space: nowrap; }
@media (max-width: 700px) { body[data-page="tryon"] .page-hero p { white-space: normal; text-wrap: balance; max-width: 34ch; } }

/* ---------- See It On Your Wall: "Try a frame" picker (Oct 7) ---------- */
.ar-stage.ar-building::after { content: ""; position: absolute; top: 14px; right: 14px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(216,185,120,.35); border-top-color: var(--gold-light); animation: fr-spin .8s linear infinite; pointer-events: none; }
@keyframes fr-spin { to { transform: rotate(360deg); } }
.fr { max-width: 720px; margin: .9rem auto .8rem; background: var(--sub); border: 1px solid var(--line); text-align: left; }
.fr-tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); }
.fr-tabs [role="tab"] { appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: .8rem .6rem .7rem; color: var(--muted); font: 600 .7rem/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase; cursor: pointer; display: flex; align-items: baseline; justify-content: center; gap: .55rem; min-height: 44px; }
.fr-tabs [role="tab"][aria-selected="true"] { color: var(--text); border-bottom-color: var(--gold); }
.fr-tabs [role="tab"]:hover { color: var(--text); }
.fr-cur { font: 500 .78rem/1.2 var(--sans); letter-spacing: .02em; text-transform: none; color: var(--gold-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 9.5em; }
.fr-panel { padding: .9rem .9rem .5rem; }
.fr-panel[hidden] { display: none; }
.fr-swatches { display: grid; gap: .35rem; }
.fr-frames { grid-template-columns: repeat(8, 1fr); }
.fr-mats { grid-template-columns: repeat(5, 1fr); max-width: 470px; margin: 0 auto; }
.fr-swatch { appearance: none; background: none; border: 1px solid transparent; padding: .4rem .15rem .35rem; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: .35rem; color: var(--muted); min-height: 44px; -webkit-tap-highlight-color: transparent; }
.fr-swatch:hover { color: var(--text); border-color: var(--line); }
.fr-swatch[aria-pressed="true"] { color: var(--text); border-color: var(--gold); background: rgba(197,160,89,.08); }
.fr-look { position: relative; display: block; width: 46px; height: 38px; box-shadow: 0 2px 5px rgba(0,0,0,.4); }
.fr-look i { position: absolute; inset: 7px; background: linear-gradient(180deg, #b9cdd6 0%, #e6dfc9 52%, #8ba07f 100%); box-shadow: inset 0 0 0 1px rgba(0,0,0,.35); }
.fr-matlook i { inset: 9px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 0 0 1px rgba(0,0,0,.18); }
.fr-swatch[data-k="black-metal"] .fr-look i { inset: 4px; }
.fr-swatch[data-k="gold"] .fr-look i { inset: 9px; }
.fr-none { background: linear-gradient(180deg, #b9cdd6 0%, #e6dfc9 52%, #8ba07f 100%); box-shadow: 0 2px 5px rgba(0,0,0,.4); }
.fr-none::after { content: ""; position: absolute; left: 50%; top: -4px; bottom: -4px; width: 2px; background: var(--muted); transform: rotate(50deg); }
.fr-name { font-size: .68rem; line-height: 1.2; letter-spacing: .02em; text-align: center; }
.fr-hint { margin: .6rem 0 .35rem; font-size: .76rem; color: var(--muted); text-align: center; }
.fr-hint[hidden], .fr-cust[hidden], .fr-row[hidden] { display: none; }
.fr-cust { margin-top: .55rem; border-top: 1px solid var(--line); }
.fr-cust summary { cursor: pointer; list-style: none; padding: .7rem 0 .55rem; font: 600 .68rem/1.2 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-light); text-align: center; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: .5rem; }
.fr-cust summary::-webkit-details-marker { display: none; }
.fr-cust summary::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.fr-cust[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.fr-row { display: grid; grid-template-columns: 4.6rem 1fr auto; align-items: center; gap: .4rem .7rem; padding: .3rem 0 .45rem; max-width: 560px; margin: 0 auto; }
.fr-row-top { align-items: start; }
.fr-row-top .fr-lab { padding-top: .45rem; }
.fr-lab { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.fr-out { font-size: .82rem; color: var(--text); min-width: 3.2em; text-align: right; font-variant-numeric: tabular-nums; }
.fr-row input[type="range"] { width: 100%; accent-color: var(--gold); height: 28px; margin: 0; }
.fr-dots { display: flex; flex-wrap: wrap; gap: .35rem; grid-column: 2 / -1; }
.fr-row-top .fr-dots { grid-column: 2; }
.fr-row-top .fr-dots:last-child { grid-column: 2 / -1; }
.fr-dot { appearance: none; width: 32px; height: 32px; padding: 3px; border-radius: 50%; border: 1px solid transparent; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.fr-dot span { display: block; width: 100%; height: 100%; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 1px 3px rgba(0,0,0,.45); }
.fr-dot[aria-pressed="true"] { border-color: var(--gold-light); box-shadow: 0 0 0 1px var(--gold-light); }
.fr-picker { position: relative; display: inline-flex; align-items: center; gap: .55rem; grid-column: 2 / -1; font-size: .78rem; color: var(--muted); cursor: pointer; min-height: 36px; }
.fr-picker input[type="color"] { width: 32px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: conic-gradient(#e44, #ec4, #4c6, #4ce, #46e, #c4e, #e44); cursor: pointer; overflow: hidden; -webkit-appearance: none; appearance: none; }
.fr-picker input[type="color"]::-webkit-color-swatch-wrapper { padding: 6px; }
.fr-picker input[type="color"]::-webkit-color-swatch { border: 1px solid rgba(0,0,0,.4); border-radius: 50%; }
.fr-picker input[type="color"]::-moz-color-swatch { border: 1px solid rgba(0,0,0,.4); border-radius: 50%; }
.fr-picker.on input[type="color"] { box-shadow: 0 0 0 2px var(--sub), 0 0 0 3px var(--gold-light); }
.fr-picker.on span { color: var(--gold-light); }
.fr-picker-sm { grid-column: auto; min-height: 32px; }
.fr-toggle { appearance: none; grid-column: 2 / -1; justify-self: start; display: inline-flex; align-items: center; gap: .6rem; background: none; border: 0; padding: .3rem 0; color: var(--text); font: 400 .82rem/1.3 var(--sans); cursor: pointer; text-align: left; min-height: 36px; }
.fr-knob { position: relative; flex: none; width: 36px; height: 20px; border-radius: 10px; background: var(--line); transition: background .2s; }
.fr-knob::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--text); transition: transform .2s; }
.fr-toggle[aria-pressed="true"] .fr-knob { background: var(--gold); }
.fr-toggle[aria-pressed="true"] .fr-knob::after { transform: translateX(16px); background: #111; }
@media (max-width: 640px) {
  .fr { margin-left: -1px; margin-right: -1px; }
  .fr-panel { padding: .7rem .5rem .4rem; }
  .fr-frames { grid-template-columns: repeat(4, 1fr); }
  .fr-mats { gap: .2rem; }
  .fr-look { width: 42px; height: 34px; }
  .fr-row { grid-template-columns: 3.9rem 1fr auto; gap: .35rem .55rem; }
  .fr-tabs [role="tab"] { gap: .4rem; letter-spacing: .16em; }
  .fr-cur { max-width: 9em; }
  .fr-tabs [role="tab"] { padding-left: .3rem; padding-right: .3rem; }
}
/* Frame finishes on ONE line (Tommy, Oct 7): 12 finishes share the row evenly; dots shrink on narrow phones instead of wrapping. */
#fr-ffin { display: grid; grid-template-columns: repeat(12, minmax(0, 32px)); gap: .3rem; grid-column: 2 / -1; }
#fr-ffin .fr-dot { width: 100%; height: auto; aspect-ratio: 1; padding: 2px; }
@media (max-width: 600px) { #fr-ffin { gap: 2px; } #fr-ffin .fr-dot { padding: 1px; } }
/* Workshops page (Tommy, Oct 7): one workshop per full-width row in a thin black box – date block left, details right; stacks on phones. */
.ws-list { display: flex; flex-direction: column; gap: 1.4rem; }
.ws-row { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 0; border: 1px solid #000; background: var(--sub); padding: 0; }
.ws-date { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; padding: 1.5rem 1rem; border-right: 1px solid #000; }
.ws-date time { display: flex; flex-direction: column; align-items: center; line-height: 1.05; }
.ws-mon { font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-light); font-weight: 600; }
.ws-days { font-family: var(--serif); font-size: 2.6rem; font-weight: 500; color: var(--text); margin: .35rem 0 .45rem; white-space: nowrap; }
.ws-year { font-size: .82rem; letter-spacing: .14em; color: var(--text-strong); }
.ws-time { margin-top: .8rem; font-size: .76rem; color: var(--muted-sub); letter-spacing: .04em; }
.ws-body { padding: 1.5rem 1.8rem 1.6rem; }
.ws-body h3 { margin-bottom: .4rem; }
.ws-body p:last-of-type { margin-bottom: 1.2rem; }
@media (max-width: 640px) {
  .ws-list { gap: 1.1rem; }
  .ws-row { grid-template-columns: minmax(0, 1fr); }
  .ws-date { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: baseline; gap: .2rem .9rem; text-align: left; padding: .8rem 1.1rem; border-right: 0; border-bottom: 1px solid #000; }
  .ws-date time { flex-direction: row; align-items: baseline; gap: .4rem; }
  .ws-days { font-size: 1.7rem; margin: 0; }
  .ws-time { margin-top: 0; }
  .ws-body { padding: 1.1rem 1.1rem 1.2rem; }
}
/* Workshops page: supply-list PDF button under the last upcoming workshop; wider combined hero description. */
/* Oct 10: optional workshop painting (WORKSHOPS img= in gen_pages.py) – cream mat like the gallery, floated right of the text on
   desktop; full width under the venue on phones. */
.ws-fig { float: right; width: min(42%, 380px); margin: .3rem 0 1rem 1.8rem; }
.ws-fig-mat { display: block; padding: 12px; background: var(--mat-color); box-shadow: 0 8px 22px rgba(0,0,0,.35); }
.ws-fig img { display: block; width: 100%; height: auto; outline: 1px solid var(--edge-color); }
.ws-body::after { content: ""; display: block; clear: both; }
@media (max-width: 640px) { .ws-fig { float: none; width: 100%; margin: .2rem 0 1.1rem; } .ws-fig-mat { padding: 9px; } }
.ws-supplies { text-align: center; margin: 1.6rem 0 0; }
@media (max-width: 640px) { .ws-supplies .btn { white-space: normal; letter-spacing: .1em; } }
body[data-page="workshops"] .page-hero p { max-width: 70ch; }
/* Oct 12 (Tommy): a bit more air between "Workshops" and the intro (~10px) and ~5px more below the intro */
body[data-page="workshops"] .page-hero p { margin-top: calc(.65rem + 5px); }   /* wsgap3: ~15px heading→text */
body[data-page="workshops"] .page-hero { padding-bottom: calc(clamp(.9rem, 2vh, 1.15rem) + 10px); }   /* wsgap3: original bottom gap + ~10px (~30px) */
@media (min-width: 900px) { body[data-page="workshops"] .page-hero p { max-width: min(100%, 72rem); } }   /* Oct 12: 3 lines at 1280 (was 5) */
@media (max-width: 640px) { body[data-page="workshops"] .page-hero p { width: 92%; } }

/* ---- On-site checkout (Oct 7): checkout.html (/checkout, Stripe EMBEDDED Checkout) + order-complete.html – js/checkout.js ---- */
.co-wrap { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 600px); justify-content: center; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; max-width: 1040px; margin: 0 auto; }
.co-summary { background: var(--sub); border: 1px solid var(--line); border-top: 2px solid var(--gold); padding: 1.3rem 1.4rem 1.2rem; position: sticky; top: calc(var(--header-h) + 1rem); }
.co-summary-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .9rem; }
.co-summary-head h2 { font-size: 1.55rem; margin: 0; }
.co-back { font-size: .8rem; white-space: nowrap; }
.co-lines { list-style: none; margin: 0 0 1rem; padding: 0; }
.co-line { display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; gap: .85rem; align-items: center; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.co-line:first-child { padding-top: 0; }
.co-thumb { width: 60px; height: 60px; display: grid; place-items: center; background: #f4f1ea; padding: 5px; box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.co-thumb img { max-width: 50px; max-height: 50px; width: auto; height: auto; object-fit: contain; }
.co-title { font-family: var(--serif); font-size: 1.15rem; line-height: 1.2; margin: 0 0 .15rem; color: var(--text); }
.co-meta { margin: 0; font-size: .78rem; line-height: 1.45; color: var(--muted-sub); }
.co-price { font-weight: 600; font-size: .92rem; }
.co-row { display: flex; justify-content: space-between; font-size: .92rem; margin: 0 0 .3rem; }
.co-row .is-free { color: var(--gold-light); font-weight: 600; }
.co-total { border-top: 1px solid var(--line); margin-top: .6rem; padding-top: .6rem; font-weight: 600; font-size: 1rem; }
.co-shipnote { margin: .7rem 0 0; font-size: .78rem; line-height: 1.5; color: var(--muted-sub); }
/* Stripe renders its form on white: frame it as a deliberate light card on the dark page */
.co-panel { background: #fff; color: #30302e; border-top: 3px solid var(--gold); padding: clamp(.6rem, 2vw, 1.6rem); min-height: 460px; box-shadow: 0 14px 40px rgba(0,0,0,.35); }
.co-panel.is-mounted { min-height: 0; }
.co-status { padding: 3.5rem 1rem; text-align: center; }
.co-status[hidden] { display: none; }
.co-loading { margin: 0; color: #6b6964; font-size: .9rem; display: inline-flex; align-items: center; gap: .7rem; }
.co-spinner { width: 18px; height: 18px; border: 2px solid #e2ddd2; border-top-color: var(--gold); border-radius: 50%; animation: co-spin .8s linear infinite; }
@keyframes co-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .co-spinner { animation-duration: 2.4s; } }
.co-panel.is-fallback .co-status { padding: 2.2rem clamp(.5rem, 3vw, 2rem); }
.co-fallback-h { font-family: var(--serif); font-size: 1.6rem; color: #222; margin: 0 0 .6rem; line-height: 1.2; }
.co-panel p { max-width: 48ch; margin-left: auto; margin-right: auto; }
.co-panel a:not(.btn) { color: #7a5a1c; }
.co-panel a:not(.btn):hover { color: #222; }
.co-fallback-alt { font-size: .85rem; color: #6b6964; }
.co-empty { max-width: 560px; margin: 0 auto; text-align: center; background: var(--sub); border: 1px solid var(--line); border-top: 2px solid var(--gold); padding: 2.4rem 1.5rem; }
.co-empty[hidden], .co-wrap[hidden] { display: none; }
@media (max-width: 860px) {
  .co-wrap { grid-template-columns: minmax(0, 1fr); gap: 1.3rem; }
  .co-summary { position: static; padding: 1.1rem 1.1rem 1rem; }
  .co-panel { padding: .35rem; min-height: 380px; margin: 0 -2vw; }
}
.oc-box { text-align: center; background: var(--sub); border: 1px solid var(--line); border-top: 2px solid var(--gold); padding: clamp(1.8rem, 5vw, 3rem) clamp(1.1rem, 4vw, 2.5rem); }
.oc-box [hidden] { display: none; }
.oc-check { display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; border: 1px solid var(--gold); color: var(--gold-light); font-size: 1.5rem; margin-bottom: 1rem; }
.oc-box h2 { font-size: clamp(1.6rem, 3.6vw, 2.1rem); }
.oc-thanks p, .oc-open p { color: var(--text-strong); max-width: 46ch; margin-left: auto; margin-right: auto; }
.oc-links { margin: 1.6rem 0 0; display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; }
.oc-help { margin: 1.4rem 0 0; font-size: .85rem; color: var(--muted-sub); }

/* Checkout shipping note: two lines, same size, second in gold (Oct 7) */
.co-shipnote { font-size: min(.72rem, 2.9vw); }
.co-shipnote span { display: block; white-space: nowrap; }
.co-shipnote .co-ship-l2 { color: var(--gold-light); }
.cart-note:empty { display: none; }

/* ---------- See It On Your Wall: help inside WebXR AR (Oct 7) ----------
   .ar-xr-help = "? Help" pill that enlarges into a big step list, shown only while model-viewer presents in WebXR AR (Android Chrome,
   DOM overlay).  (The on-page "How to use" card was removed on Tommy's request.) */
/* inside WebXR AR (Android Chrome): shown only while model-viewer presents in AR */
.ar-xr-help { display: none; position: absolute; top: max(16px, env(safe-area-inset-top)); left: 16px; right: 72px; z-index: 10; text-align: left; pointer-events: none; }
#mv[ar-status="session-started"] .ar-xr-help, #mv[ar-status="object-placed"] .ar-xr-help { display: block; }
.ar-xr-help button { pointer-events: auto; cursor: pointer; }
.ar-xr-btn { display: inline-flex; align-items: center; gap: .65rem; min-height: 54px; padding: .45rem 1.1rem .45rem .45rem; border-radius: 999px; border: 2px solid var(--gold); background: rgba(30,29,28,.88); color: #fff; font: 500 .95rem/1.25 var(--sans); text-align: left; }
.ar-xr-q { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--gold); color: #111; font: 700 1.4rem/40px var(--serif); text-align: center; }
.ar-xr-btxt strong { display: block; color: var(--gold-light); font-size: 1.1rem; font-weight: 700; }
.ar-xr-btn[hidden], .ar-xr-panel[hidden] { display: none; }
.ar-xr-panel { display: block; width: 100%; max-width: 540px; text-align: left; background: rgba(30,29,28,.95); border: 2px solid var(--gold); border-radius: 14px; color: #fff; padding: 1rem 1.15rem; font: 500 1.2rem/1.4 var(--sans); }
.ar-xr-h { display: block; font: 600 1.6rem/1.2 var(--serif); margin-bottom: .45rem; color: var(--gold-light); }
.ar-xr-li { display: flex; gap: .7rem; margin: .5rem 0; }
.ar-xr-li b { flex: none; width: 1.8em; height: 1.8em; border-radius: 50%; background: var(--gold); color: #111; display: flex; align-items: center; justify-content: center; font-size: .9em; }
.ar-xr-shrink { display: block; text-align: center; margin-top: .7rem; color: var(--gold-light); font-size: 1rem; }

/* ---------- "Photo of your wall" try-on (See It On Your Wall, js/photo-wall.js) ---------- */
.pw { max-width: 900px; margin: 1rem auto 1.4rem; background: var(--sub); border: 1px solid var(--line); border-top: 3px solid var(--gold); padding: 1.6rem 1.4rem 1.4rem; text-align: center; }
.pw [hidden] { display: none !important; }
.pw-title { font-size: clamp(1.9rem, 4.6vw, 2.5rem); margin-bottom: .35rem; }
.pw-lead { font-size: 1.12rem; line-height: 1.5; color: var(--text); margin: 0 auto 1.2rem; max-width: 34em; }
.pw-big { display: inline-flex; align-items: center; justify-content: center; gap: .7rem; min-height: 64px; padding: 1rem 2rem; font-size: 1rem; letter-spacing: .1em; box-shadow: 0 8px 22px rgba(0,0,0,.35); }
#pw-pick, #ar-go { width: 100%; font-size: 1.02rem; min-height: 72px; }
.pw-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: .8rem 1.4rem; font-size: .85rem; letter-spacing: .1em; }
.btn-outline.pw-btn { color: var(--gold-light); border-color: var(--gold); }
.btn-outline.pw-btn:hover, .btn-outline.pw-btn:focus-visible { background: rgba(197,160,89,.12); color: var(--gold-light); }
.pw-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); pointer-events: none; }
.pw-hint { font-size: 1.02rem; line-height: 1.5; color: var(--text-strong); margin: 1rem auto .6rem; max-width: 30em; }
.pw-link { appearance: none; background: none; border: 0; cursor: pointer; min-height: 48px; padding: .5rem .8rem; color: var(--gold-light); font: 500 1.02rem/1.3 var(--sans); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(216,185,120,.55); }
.pw-link:hover { text-decoration-color: var(--gold-light); }
.pw-private { display: flex; align-items: center; justify-content: center; gap: .45rem; margin: .5rem 0 0; font-size: .88rem; color: var(--muted-sub); }
.pw-private svg { flex: none; color: var(--gold-light); }
.pw-msg { margin: .6rem 0 0; color: var(--danger); font-size: 1rem; line-height: 1.45; }
.pw-msg:empty { display: none; }
.pw-step { font-size: 1.75rem; margin: 0 0 .35rem; scroll-margin-top: calc(var(--header-h) + 14px); outline: none; }
.pw-step span { display: block; font: 600 .74rem/1.4 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-light); margin-bottom: .2rem; }
.pw-inst { font-size: 1.06rem; line-height: 1.5; color: var(--text); margin: 0 auto .8rem; max-width: 34em; }
.pw-inst strong { color: var(--gold-light); }
.pw-refs { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: .5rem; margin: 0 0 .9rem; }
.pw-ref { appearance: none; min-height: 64px; padding: .6rem .5rem; border: 2px solid var(--line); background: var(--main); color: var(--text); cursor: pointer; font: 600 .98rem/1.25 var(--sans); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; -webkit-tap-highlight-color: transparent; }
.pw-ref small { font-size: .82rem; font-weight: 400; color: var(--muted); }
.pw-ref:hover { border-color: var(--field-line); }
.pw-ref[aria-pressed="true"] { border-color: var(--gold); background: rgba(197,160,89,.14); }
.pw-ref[aria-pressed="true"] small { color: var(--gold-light); }
.pw-other { font-size: 1.05rem; margin: -.2rem 0 .9rem; display: flex; align-items: center; justify-content: center; gap: .6rem; flex-wrap: wrap; }
.pw-other input { width: 6.5em; min-height: 52px; font: 600 1.15rem/1 var(--sans); padding: .3rem .7rem; background: var(--main); color: var(--text); border: 2px solid var(--gold); text-align: center; }
.pw-stagewrap { margin: .4rem -.4rem .4rem; text-align: center; }
.pw-stage { position: relative; display: inline-block; max-width: 100%; vertical-align: top; line-height: 0; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.pw-canvas { display: block; max-width: 100%; max-height: 76vh; width: auto; height: auto; touch-action: none; cursor: crosshair; box-shadow: 0 6px 24px rgba(0,0,0,.4); }
.pw-placing .pw-canvas { cursor: grab; }
.pw-dragging .pw-canvas { cursor: grabbing; }
.pw-canvas:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 3px; }
.pw-line { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.pw-line line { stroke: var(--gold-light); stroke-width: 3; stroke-dasharray: 8 6; filter: drop-shadow(0 0 2px rgba(0,0,0,.9)); }
.pw-len { position: absolute; transform: translate(14px, -50%); background: rgba(20,20,20,.82); color: var(--gold-light); font: 700 .95rem/1 var(--sans); padding: .4rem .55rem; border-radius: 4px; pointer-events: none; white-space: nowrap; }
.pw-mark { position: absolute; width: 56px; height: 56px; margin: -28px 0 0 -28px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent; z-index: 2; }
.pw-mark::before { content: ""; position: absolute; inset: 11px; border-radius: 50%; border: 3px solid var(--gold-light); background: rgba(197,160,89,.18); box-shadow: 0 0 0 2px rgba(0,0,0,.55), inset 0 0 0 1px rgba(0,0,0,.4); }
.pw-mark::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1.5px #111; }
.pw-mark.pw-active { cursor: grabbing; }
.pw-mark.pw-active::before { border-color: #fff; background: rgba(197,160,89,.3); }
.pw-mark:focus-visible { outline: 3px solid #fff; outline-offset: 0; }
.pw-tag { position: absolute; right: calc(100% - 4px); top: 50%; transform: translateY(-50%); background: var(--gold); color: #111; font: 700 .8rem/1 var(--sans); letter-spacing: .06em; padding: .35rem .5rem; border-radius: 3px; white-space: nowrap; pointer-events: none; }
.pw-loupe { position: absolute; width: 150px; height: 150px; transform: translate(-50%, -50%); border-radius: 50%; border: 3px solid var(--gold-light); box-shadow: 0 6px 18px rgba(0,0,0,.6); pointer-events: none; z-index: 3; }
.pw-badge { position: absolute; top: 10px; left: 10px; background: rgba(20,20,20,.75); color: var(--gold-light); font: 600 .72rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; padding: .45rem .6rem; pointer-events: none; }
.pw-size { font-size: 1rem; line-height: 1.45; color: var(--text); margin: .5rem auto .2rem; max-width: 36em; }
.pw-size:empty { display: none; }
/* phones: "Shown at true size:" on its own line, painting name + size on the next */
@media (max-width: 600px) { .pw-size-work { display: block; } }
.pw-actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin: .9rem 0 .2rem; }
.pw-done { min-width: 220px; }
.pw-note { font-size: .86rem; color: var(--muted-sub); margin: .9rem auto 0; max-width: 36em; line-height: 1.5; }
/* the 3D preview / live AR becomes a secondary section below the photo try-on */
.ar-live { margin: 1.2rem auto 0; }
.ar-live-title { font-size: 1.6rem; margin-bottom: .3rem; }
.ar-live-note { font-size: .95rem; color: var(--muted); margin: 0 auto .9rem; max-width: 34em; line-height: 1.5; }
.ar-live model-viewer { height: min(46vh, 400px); }
.btn.ar-btn-live { background: rgba(30,29,28,.86); color: var(--gold-light); border-color: var(--gold); font-size: .8rem; letter-spacing: .1em; padding: .9rem 1.4rem; min-height: 48px; }
.btn.ar-btn-live:hover, .btn.ar-btn-live:focus-visible { background: rgba(30,29,28,.95); color: #fff; border-color: var(--gold-light); }
@media (max-width: 600px) {
  .pw { padding: 1.3rem .8rem 1.1rem; margin-left: -1px; margin-right: -1px; }
  .pw-big { width: 100%; }
  .pw-refs { grid-template-columns: 1fr 1fr; }
  .pw-refs .pw-ref:last-child { grid-column: 1 / -1; }
  .pw-actions .pw-btn { flex: 1 1 40%; }
  .pw-canvas { max-height: 70vh; }
  .ar-live model-viewer { height: min(44vh, 360px); }
  .btn.ar-btn-live { font-size: .8rem; padding: .85rem 1.1rem; }
}
.pw-inst { scroll-margin-top: calc(var(--header-h) + 10px); }
#pw-m1 .pw-tag { transform: translateY(-92%); }
#pw-m2 .pw-tag { transform: translateY(-8%); }
.pw-mark.pw-r .pw-tag { right: auto; left: calc(100% - 4px); }
.pw-len.pw-far { transform: translate(92px, -50%); }
.pw-len.pw-l { transform: translate(calc(-100% - 92px), -50%); }

/* two equal ways to try it (Oct 7): "Photo of your wall" and "Live on your wall" cards */
.tw { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: stretch; margin-top: .3rem; }
.tw-card { display: flex; flex-direction: column; align-items: center; background: var(--main); border: 1px solid var(--line); padding: 1.4rem 1.2rem 1.2rem; min-width: 0; }
.tw-h { font-size: 1.65rem; margin: 0 0 .3rem; }
.tw-desc { font-size: 1.08rem; line-height: 1.45; color: var(--text); margin: 0 0 1rem; min-height: 3.1em; max-width: 22em; }
.tw-card .pw-hint { font-size: .98rem; margin: .9rem auto .4rem; }
.tw-card .pw-private { font-size: .85rem; }
.tw-busy { opacity: .82; cursor: progress; }
.tw-card .ar-fallback { margin: 0; max-width: none; background: none; border: 0; padding: 0; }
.tw-card .ar-fallback p { font-size: .98rem; line-height: 1.5; margin-bottom: .8rem; color: var(--text-strong); }
.tw-card .ar-qr { margin-bottom: .5rem; }
.tw-card .ar-qr img { width: 140px; height: 140px; }
.tw-card .ar-url { font-size: .76rem; margin-bottom: .7rem; }
.tw-card .pw-msg { max-width: 24em; }
@media (max-width: 760px) {
  .tw { grid-template-columns: 1fr; gap: .9rem; }
  .tw-desc { min-height: 0; }
  .tw-card { padding: 1.2rem .9rem 1.1rem; }
}

/* tidy (Oct 7): no panel heading, one-line card descriptions on desktop, gold button and QR code on the same line, 3D preview right below the cards */
.pw { padding-top: 1.3rem; }
.pw-s1 > .pw-lead { margin-bottom: 1rem; }
.tw-card { padding: 1.3rem 1rem 1.2rem; }
.tw-desc { font-size: .94rem; min-height: 0; max-width: none; margin-bottom: 1rem; }
.tw-card .ar-qr { margin: 0 0 .7rem; vertical-align: top; }
.tw-card .ar-fallback p { margin-bottom: .6rem; }
@media (min-width: 980px) { .tw-desc { white-space: nowrap; } }
@media (max-width: 760px) { .tw-desc { font-size: 1.05rem; } .tw-card { padding: 1.2rem .9rem 1.1rem; } }
body.pw-on #ar-live { display: none; }   /* while the photo try-on is open, the photo itself shows the painting */

/* Oct 7: gold "Use a photo of your wall" button vertically CENTERED on the QR code's white square (cards side by side, desktop QR shown).
   .tw-act is as tall as the .ar-qr box = image 140px + 2 x 10px padding + 2 x 1px border = 162px (keep in sync with .tw-card .ar-qr img). */
.tw-act { width: 100%; display: flex; align-items: center; justify-content: center; }
@media (min-width: 761px) { .tw:has(#ar-fallback:not([hidden])) .tw-act { min-height: 162px; } }

/* ---------- Homepage below New Arrivals (Oct 7): About (short) / Next Workshop / See Paul's Work in Person ---------- */
body[data-page="home"] .home-head { margin-bottom: clamp(1.3rem, 2.4vw, 1.9rem); }
body[data-page="home"] .home-head h2 { font-size: clamp(1.65rem, 2.8vw, 2.2rem); margin: 0; }
body[data-page="home"] .home-head .rule { margin-top: .8rem; }
/* About (short) – photo beside text on desktop, stacked on mobile. Photo path: PAUL_PORTRAIT in gen_pages.py */
.ha-grid { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; max-width: 1000px; margin: 0 auto; }
.ha-photo { margin: 0; position: relative; aspect-ratio: 4 / 5; background: var(--main); border: 1px solid var(--line); padding: 10px; box-shadow: 0 14px 34px rgba(0,0,0,.35); }
.ha-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ha-text .eyebrow { margin-bottom: .5rem; }
.ha-text h2 { font-size: clamp(1.9rem, 3.2vw, 2.5rem); margin-bottom: .7rem; }
.ha-text p { color: var(--text-strong); font-size: 1rem; line-height: 1.75; max-width: 60ch; }
.ha-text p:last-of-type { margin-bottom: 1.5rem; }
.btn.ha-more { color: var(--gold-light); border-color: var(--gold); }
.btn.ha-more:hover, .btn.ha-more:focus-visible { background: rgba(197,160,89,.12); color: var(--gold-light); }
/* Next Workshop – slim card (data: data/workshops.js, picked in js/site.js renderNextWorkshop) */
.nws-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0; max-width: 980px; margin: 0 auto; background: var(--sub); border: 1px solid var(--line); border-left: 3px solid var(--gold); }
.nws-date { align-self: stretch; display: flex; align-items: center; justify-content: center; padding: 1rem 1.5rem; border-right: 1px solid var(--line); min-width: 120px; }
.nws-date time { display: flex; flex-direction: column; align-items: center; line-height: 1.05; text-align: center; }
.nws-days { font-family: var(--serif); font-size: 2.1rem; font-weight: 500; color: var(--text); margin: .25rem 0 .3rem; white-space: nowrap; }
.nws-info { padding: 1.05rem 1.5rem; min-width: 0; }
.nws-title { font-size: 1.4rem; margin: 0 0 .3rem; line-height: 1.2; font-family: var(--serif); font-weight: 500; color: var(--text); }
.nws-title a { color: var(--text); text-decoration: none; }
.nws-title a:hover { color: var(--gold-light); }
.nws-meta { margin: 0; font-size: .88rem; color: var(--muted-sub); display: flex; flex-wrap: wrap; gap: .15rem 1.1rem; }
.nws-time { white-space: nowrap; }
.nws-actions { display: flex; flex-direction: column; align-items: center; gap: .55rem; padding: 1rem 1.5rem; }
.nws-actions .btn { white-space: nowrap; }
.nws-all { font-size: .82rem; letter-spacing: .04em; color: var(--gold-light); white-space: nowrap; }
.nws-empty { grid-template-columns: minmax(0, 1fr) auto; }
/* See Paul's Work in Person */
.ip-grid { display: grid; grid-template-columns: minmax(0, 720px); justify-content: center; gap: 1.4rem; }
.ip-grid.ip-multi { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); max-width: 1000px; margin: 0 auto; }
.ip-card { background: var(--main); border: 1px solid var(--line); padding: 1.6rem 1.8rem; text-align: center; }
.ip-card h3 { margin-bottom: .2rem; }
.ip-card .card-venue { margin-bottom: .8rem; }
.ip-card p { color: var(--text-strong); font-size: .95rem; }
.ip-kicker { display: block; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-light); font-weight: 600; margin-bottom: .55rem; }
.ip-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin: 1.1rem 0 0; }
.ip-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 2rem; margin: 1.3rem 0 0; font-size: .88rem; }
@media (max-width: 860px) {
  .ha-grid { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
  .ha-photo { width: min(280px, 78%); margin: 0 auto; }
  .ha-text { text-align: center; }
  .ha-text p { margin-left: auto; margin-right: auto; }
  .nws-card { grid-template-columns: minmax(0, 1fr); border-left-width: 1px; border-top: 3px solid var(--gold); }
  .nws-date { border-right: 0; border-bottom: 1px solid var(--line); padding: .7rem 1rem; justify-content: center; }
  .nws-date time { flex-direction: row; align-items: baseline; gap: .45rem; }
  .nws-days { font-size: 1.6rem; margin: 0; }
  .nws-info { padding: 1rem 1.1rem .4rem; text-align: center; }
  .nws-title { font-size: 1.3rem; }
  .nws-meta { justify-content: center; flex-direction: column; align-items: center; gap: .1rem; }
  .nws-actions { padding: .7rem 1.1rem 1.2rem; }
  .nws-actions .btn { width: 100%; max-width: 320px; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; }
  .nws-empty .nws-info { padding-bottom: .4rem; }
  .ip-card { padding: 1.3rem 1.1rem; }
  .ip-actions .btn { flex: 1 1 100%; max-width: 320px; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; }
  .ip-links { flex-direction: column; align-items: center; gap: .6rem; }
}
.ip-actions .btn-outline { color: var(--gold-light); border-color: var(--gold); }
.ip-actions .btn-outline:hover, .ip-actions .btn-outline:focus-visible { background: rgba(197,160,89,.12); color: var(--gold-light); }
@media (max-width: 860px) {
  .nws-card { border-left-color: var(--line); }
  .ha-text p { text-align: left; }
}
/* Oct 7 (short About text): narrower portrait + tighter grid so the 2-sentence text sits balanced, vertically centred beside it */
.ha-grid { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); max-width: 860px; gap: clamp(2rem, 4.5vw, 3.5rem); }
.ha-text p { font-size: 1.08rem; line-height: 1.75; max-width: 46ch; }
@media (max-width: 860px) {
  .ha-grid { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
  .ha-photo { width: min(240px, 70%); }
  .ha-text p { text-align: center; max-width: 34ch; font-size: 1.04rem; }
}

/* Oct 7 reorder (See It On Your Wall): hero > preview box (title + medium/size inside, then the 3D painting) > Mat/Frame > true-size line
   > "Two ways to try it". Painting thumbnail strip removed (painting = ?work=<id>). */
.ar-wrap > .ar-live { margin-top: 0; }
.ar-stage .ar-caption { margin: 0; padding: 1rem 1.2rem .1rem; position: relative; z-index: 1; line-height: 1.45; }
.ar-stage .ar-caption strong { margin-bottom: .1rem; line-height: 1.15; }
.ar-wrap > .ar-true { margin: 0 auto .4rem; max-width: 720px; }
.ar-wrap > .fr { margin-bottom: .7rem; }
@media (max-width: 600px) {
  .ar-stage .ar-caption { padding: .8rem .9rem 0; }
  .ar-stage .ar-caption strong { font-size: 1.35rem; }
  .ar-live model-viewer { height: min(38vh, 300px); }
}
/* photo try-on open: the 3D preview + true-size line hide (the photo shows the painting) and the Mat/Frame picker moves BELOW the photo,
   matching the step 3 text "Try frames and mats below". */
body.pw-on .ar-wrap { display: flex; flex-direction: column; }
body.pw-on .ar-wrap > * { width: 100%; }
body.pw-on .ar-wrap > #fr { order: 1; margin-top: .2rem; }
body.pw-on #ar-true { display: none; }

/* Oct 7: portrait C – homepage slot framing + About page portrait beside the opening bio */
.ha-photo img { object-position: 50% 22%; }
.about-has-portrait { grid-template-columns: 300px minmax(0, 1fr); grid-template-areas: "photo text" "art text"; row-gap: 2rem; align-items: start; }
.about-has-portrait > .about-portrait { grid-area: photo; }
.about-has-portrait > .about-figure { grid-area: art; }
.about-has-portrait > .prose { grid-area: text; }
.about-has-portrait > .prose > h2:first-child { margin-top: 0; }
.about-portrait { margin: 0; aspect-ratio: 4 / 5; background: var(--sub); border: 1px solid var(--line); padding: 10px; box-shadow: 0 14px 34px rgba(0,0,0,.35); }
.about-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; }
@media (max-width: 960px) {
  .about-has-portrait { grid-template-columns: minmax(0, 1fr); grid-template-areas: "photo" "text" "art"; row-gap: 1.8rem; }
  .about-has-portrait > .about-portrait { width: min(300px, 80%); justify-self: center; }
  .about-has-portrait > .about-figure { justify-self: center; }
}

/* Oct 7: checkout summary – Remove + quantity −/+ per line (js/checkout.js) */
.co-line { grid-template-columns: 60px minmax(0, 1fr) auto; align-items: start; }
.co-qtyrow { display: flex; align-items: center; gap: .55rem; margin-top: .4rem; }
.co-qty { display: inline-flex; align-items: center; border: 1px solid var(--field-line); }
.co-step { width: 32px; height: 32px; background: none; border: 0; color: var(--text); font-size: 1.05rem; line-height: 1; cursor: pointer; padding: 0; }
.co-step:hover:not([disabled]), .co-step:focus-visible { color: var(--gold-light); }
.co-step[disabled] { opacity: .3; cursor: default; }
.co-n { min-width: 1.7rem; text-align: center; font-size: .88rem; font-variant-numeric: tabular-nums; }
.co-each { font-size: .76rem; color: var(--muted-sub); white-space: nowrap; }
.co-right { display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; }
.co-price { white-space: nowrap; }
.co-remove { appearance: none; background: none; border: 0; padding: .35rem 0 .35rem .6rem; margin-right: 0; min-height: 32px; font: 500 .74rem/1.2 var(--sans); letter-spacing: .02em; color: var(--muted-sub); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(186,183,177,.5); cursor: pointer; }
.co-remove:hover, .co-remove:focus-visible { color: var(--gold-light); text-decoration-color: var(--gold-light); }
@media (max-width: 860px), (pointer: coarse) {
  .co-step { width: 40px; height: 40px; }
  .co-remove { min-height: 40px; min-width: 64px; padding: .5rem 0 .5rem .6rem; font-size: .78rem; text-align: right; }
}

/* Oct 7: cart-line thumbnails (checkout summary + prints-page cart drawer): the print with a thin, EQUAL white border on all sides
   (≈ 1 in of white on that print size – px computed per line in thumbHTML(), js/site.js + js/checkout.js). The box follows the
   painting's aspect ratio; no letterboxing. */
.co-thumb, .cl-thumb { background: none; padding: 0; box-shadow: none; display: grid; place-items: center; align-self: start; }
.co-thumb { width: 60px; height: 62px; }
.cl-thumb { width: 64px; height: 66px; }
.co-thumb img.thumb-b, .cl-thumb img.thumb-b { box-sizing: content-box; max-width: none; max-height: none; background: #fff; object-fit: cover; display: block; box-shadow: 0 2px 7px rgba(0,0,0,.35); }

/* Oct 7: Newsletter Archives empty state (archive cleared for a fresh start) */
.nl-empty h2 { margin-bottom: .35rem; }
.nl-empty .nl-empty-sub { color: var(--muted); margin: 0 0 1.2rem; }
.nl-empty[hidden], .newsletter-list[hidden] { display: none; }

/* Oct 7 (later): bag button back in the BOTTOM-RIGHT corner, still the bigger size (64px desktop / 54px phones) with its count badge.
   Desktop: horizontally centred in the gap between the content column's right edge and the window edge – js/site.js placeFab() measures
   the real layout and sets --fab-right; when the gap is too narrow for 64px + 12px each side the default 20px corner offset is used.
   Vertical: 28px up (phones: 16px + the iPhone home-indicator inset). It rises above the newsletter popup (--nlp-h) and – only when it
   would sit on the footer bar's text – above the footer bar while that's in view (--fab-lift). No extra padding under the footer bar. */
.cart-fab { right: var(--fab-right, 20px);
  width: 64px; height: 64px; transition: background .2s, box-shadow .2s, transform .2s; }
.cart-fab svg { width: 30px; height: 30px; }
.cart-count { top: -5px; right: -5px; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 13px; font-size: .78rem; line-height: 22px; }
.po-promo { max-width: none !important; }
@media (max-width: 760px) {
  .cart-fab { right: max(16px, calc(env(safe-area-inset-right) + 10px));
    width: 54px; height: 54px; }
  .cart-fab svg { width: 27px; height: 27px; }
  body[data-page="prints"] .page-hero h1, body[data-page="prints"] .page-hero p:not(.po-promo) { text-wrap: balance; }
}
/* cart drawer: quiet "Keep shopping" link under Checkout (closes the drawer) – ported from the cart-demo */
.cart-keep { display: block; margin: .55rem auto 0; background: none; border: 0; padding: .55rem .8rem; font: inherit; font-size: .78rem; letter-spacing: .06em;
  color: var(--text-strong); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cart-keep:hover { color: var(--gold-light); }
.cart-keep:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }
/* print photos open the lightbox (same .thumb-open zoom-in button as the Selected Works cards) */
.print-thumb .thumb-open:focus-visible { outline-offset: 4px; }

/* Oct 7 (batch): About bio text bigger so the text column roughly matches the portrait + painting column beside it.
   ≥1200px: 20px / 1.85 (text ends ~20px above the painting caption at 1280–1440); 961–1199px: 18px; stacked layout (phones): 17px. */
.about-has-portrait > .prose p { font-size: 1.0625rem; line-height: 1.7; }
@media (min-width: 961px) { .about-has-portrait > .prose p { font-size: 1.125rem; line-height: 1.75; } }
@media (min-width: 1200px) { .about-has-portrait > .prose p { font-size: 1.25rem; line-height: 1.85; } }

/* Oct 7 (batch): Drawn To The Word footer line BIGGER and clearly visible on every page – larger question text and a real
   outlined gold button (≥44px tall). */
.dtwf-strip .container { gap: .8rem 1.4rem; padding: 1.5rem 0; }
.dtwf { font-size: 1.05rem; color: var(--text-strong); letter-spacing: .01em; }
.site-footer .dtwf-strip .dtw-link { font-size: .82rem; letter-spacing: .16em; color: var(--gold-light); border: 1px solid var(--gold); padding: .95rem 1.4rem; min-height: 46px; box-sizing: border-box; }
.site-footer .dtwf-strip .dtw-link:hover, .site-footer .dtwf-strip .dtw-link:focus-visible { color: #1f1e1c; background: var(--gold); border-color: var(--gold); }
.site-footer .dtwf-strip .dtw-ext { margin-left: .45em; font-size: 1.05em; }
@media (max-width: 600px) {
  .dtwf-strip .container { flex-direction: column; padding: 1.4rem 0; }
  .dtwf { font-size: 1rem; }
  .site-footer .dtwf-strip .dtw-link { font-size: .8rem; padding: .95rem 1.3rem; }
}

/* Oct 7 (batch): shipping note now says "to the lower 48" – order summary a little wider on desktop and the note slightly smaller so
   each of its two lines (same size) still fits on ONE line; on phones the two lines may wrap (readable size instead of tiny text). */
@media (min-width: 961px) {
  .co-wrap { grid-template-columns: minmax(300px, 430px) minmax(0, 600px); max-width: 1100px; }
  .co-shipnote { font-size: .66rem; }
}
@media (max-width: 960px) {
  .co-shipnote { font-size: .74rem; }
  .co-shipnote span { white-space: normal; }
}
@media (max-width: 760px) { .po-promo { text-wrap: balance; } }

/* Oct 7 (Alaska/Hawaii shipping): shipping-address step inside the white checkout panel, before Stripe's payment form.
   Light fields like Stripe's own form; 16px inputs (no iOS zoom), 46px+ tall; State + ZIP side by side. */
.co-addr[hidden], .co-shipto[hidden] { display: none; }
.co-addr { max-width: 540px; margin: 0 auto; padding: clamp(.4rem, 1.6vw, 1rem) clamp(.4rem, 1.5vw, .8rem); color: #30302e; }
.co-panel .co-addr p, .co-panel .co-shipto p { max-width: none; margin-left: 0; margin-right: 0; }
.co-addr-h { font-family: var(--serif); font-weight: 500; color: #2a2927; font-size: 1.65rem; line-height: 1.15; margin: 0 0 .25rem; }
.co-panel .co-addr .co-addr-sub { color: #6b6964; font-size: .86rem; margin: 0 0 1.1rem; }
.co-f { display: flex; flex-direction: column; gap: .32rem; margin: 0 0 .85rem; min-width: 0; }
.co-f label { font: 600 .74rem/1.2 var(--sans); letter-spacing: .04em; color: #4a4844; }
.co-f .co-opt { font-weight: 400; color: #8a877f; }
.co-f input, .co-f select { width: 100%; box-sizing: border-box; min-height: 46px; padding: .66rem .8rem; font: 400 1rem/1.3 var(--sans); color: #222;
  background-color: #fff; border: 1px solid #cfccc4; border-radius: 6px; box-shadow: 0 1px 2px rgba(0,0,0,.05); transition: border-color .15s, box-shadow .15s; }
.co-f select { appearance: none; -webkit-appearance: none; padding-right: 2.2rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23705a2a' stroke-width='1.8'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .85rem center; }
.co-f input:focus, .co-f select:focus { outline: none; border-color: #b08a3e; box-shadow: 0 0 0 3px rgba(197,160,89,.28); }
.co-f [aria-invalid="true"] { border-color: #b3261e; box-shadow: 0 0 0 3px rgba(179,38,30,.15); }
.co-frow { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: .8rem; }
.co-panel .co-addr .co-addr-err { color: #b3261e; font-size: .86rem; margin: -.2rem 0 .8rem; }
.co-addr-err:empty { display: none; }
.co-addr-go { width: 100%; margin-top: .25rem; min-height: 48px; cursor: pointer; }
/* Oct 9: APO/FPO/territory note under "Continue to payment" removed (server still rejects those); a little room under the button instead. */
.co-panel .co-addr { padding-bottom: .5rem; }
@media (max-width: 760px) { .co-panel .co-addr { padding-bottom: 1rem; } }
.co-shipto { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; max-width: 540px; margin: 0 auto .9rem; padding: .75rem .95rem;
  border: 1px solid #e3e0d8; border-radius: 6px; background: #faf9f6; color: #30302e; font-size: .88rem; line-height: 1.45; }
.co-shipto-k { display: block; margin-bottom: .15rem; font: 600 .66rem/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #7a5a1c; }
.co-shipto-edit { flex: none; min-height: 40px; padding: .3rem .5rem; margin: -.3rem -.4rem 0 0; background: none; border: 0; color: #7a5a1c;
  font: 600 .82rem var(--sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.co-shipto-edit:hover { color: #222; }
.co-shipto-edit:focus-visible { outline: 2px solid #b08a3e; outline-offset: 2px; }
.co-panel.is-mounted .co-shipto { margin-top: .2rem; }
.co-shipto { scroll-margin-top: calc(var(--header-h) + 12px); }

/* ---------- Gift cards (gift-card branch, Oct 9) ---------- */
/* Prints hero tile: absolutely placed top-right of the hero on wide screens (the title block stays centered); under the hero text,
   centered, below 1100px. */
.gc-tile { display: flex; align-items: center; gap: .85rem; text-align: left; background: rgba(0,0,0,.18); border: 1px solid rgba(197,160,89,.45);
  border-radius: 6px; padding: .6rem .8rem .6rem .6rem; width: max-content; max-width: 100%; margin: .9rem auto 0; }
.gc-tile-img { flex: none; display: block; line-height: 0; }
.gc-tile-img img { width: 104px; height: 65px; object-fit: cover; border-radius: 4px; box-shadow: 0 3px 10px rgba(0,0,0,.35); }
.page-hero .gc-tile p { margin: 0; max-width: none; }
.gc-tile-body { display: flex; flex-direction: column; align-items: flex-start; }
.page-hero .gc-tile .gc-tile-h { font-family: var(--serif); font-size: 1.15rem; line-height: 1.1; color: var(--text); font-weight: 600; letter-spacing: .02em; }
.page-hero .gc-tile .gc-tile-from { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-light); font-weight: 600; margin-top: .15rem; }
.gc-tile-btn { margin-top: .45rem; padding: .38rem .8rem !important; font-size: .7rem !important; }
@media (min-width: 1200px) {   /* below 1200 the centered hero text needs the room → tile sits under it (as on phones) */
  body[data-page="prints"] .page-hero .container { position: relative; }
  body[data-page="prints"] .gc-tile { position: absolute; right: var(--gc-right, 0px); top: 50%; transform: translateY(-50%); margin: 0; gap: .7rem; padding: .5rem .7rem .5rem .5rem; }
  body[data-page="prints"] .gc-tile-img img { width: 84px; height: 53px; }
  body[data-page="prints"] .page-hero .gc-tile .gc-tile-h { font-size: 1.05rem; }
}
/* Gift card page */
.gc-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(1.5rem, 4vw, 3.2rem); align-items: start; max-width: 1060px; margin: 0 auto; }
.gc-card { position: relative; line-height: 0; border-radius: 10px; overflow: hidden; box-shadow: 0 14px 34px rgba(0,0,0,.45); }
.gc-card img { width: 100%; height: auto; display: block; }
.gc-card-amt { position: absolute; right: 6%; bottom: 8%; font-family: var(--serif); font-size: clamp(1.6rem, 3.6vw, 2.5rem); line-height: 1; color: #fff; font-weight: 600; text-shadow: 0 2px 8px rgba(0,0,0,.6); }
.gc-terms { margin: 1.1rem 0 1.05rem; font-family: var(--serif); font-size: 1.3rem; line-height: 1.4; color: var(--text); text-align: center; text-wrap: balance; font-weight: 600; }   /* 600 = a weight Cormorant Garamond actually loads (400/500/600) → true bold, not synthesized */
@media (min-width: 768px) { .gc-terms { font-size: 1.5rem; line-height: 1.35; margin-bottom: 1.25rem; } }
.gc-points { margin: 0; padding-left: 1.1rem; color: var(--muted-sub, #cfcac2); font-size: .9rem; }
.gc-points li { margin: .2rem 0; }
.gc-panel { background: var(--sub); border: 1px solid var(--line); border-radius: 8px; padding: clamp(1rem, 2.6vw, 1.6rem); }
.gc-amts { border: 0; margin: 0 0 1rem; padding: 0; }
.gc-amts legend, .gc-f label { display: block; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-light); font-weight: 600; margin-bottom: .4rem; padding: 0; }
.gc-amt-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; }
.gc-amt { position: relative; cursor: pointer; }
.gc-amt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.gc-amt span { display: block; text-align: center; padding: .6rem .2rem; border: 1px solid rgba(197,160,89,.5); border-radius: 5px; font-weight: 600; font-size: 1rem; color: var(--text); transition: background .15s, color .15s; }
.gc-amt input:checked + span { background: var(--gold); color: #1d1b19; border-color: var(--gold); }
.gc-amt input:focus-visible + span { outline: 2px solid var(--gold-light); outline-offset: 2px; }
.gc-custom { margin-top: .8rem; }
.gc-dollar { display: flex; align-items: center; gap: .4rem; max-width: 12rem; }
.gc-dollar span { font-weight: 600; color: var(--gold-light); }
.gc-f { margin-bottom: .85rem; }
.gc-f input, .gc-f textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 1rem; padding: .6rem .7rem; border-radius: 4px; border: 1px solid var(--line); background: var(--main); color: var(--text); }
.gc-f input[aria-invalid], .gc-f textarea[aria-invalid] { border-color: #e0806b; }
.gc-hint { margin: .3rem 0 0; font-size: .78rem; color: var(--muted-sub, #cfcac2); line-height: 1.4; }
.gc-sub { font-size: 1.15rem; margin: 1.2rem 0 .7rem; }
.gc-err { color: #f0b4a8; min-height: 0; margin: 0 0 .6rem; font-size: .9rem; }
.gc-err:empty { display: none; }
.gc-go { width: 100%; }
.gc-summary[hidden], .gc-status[hidden], .gc-form[hidden] { display: none !important; }
.co-gcnote { margin: .9rem 0 0; font-size: .82rem; color: var(--muted-sub, #cfcac2); line-height: 1.45; }
@media (max-width: 860px) {
  .gc-wrap { grid-template-columns: 1fr; }
  .gc-visual { max-width: 460px; margin: 0 auto; width: 100%; }
}
@media (max-width: 420px) { .gc-amt-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Order complete: gift card */
.oc-gift { text-align: center; }
.oc-gift-card { width: min(340px, 100%); height: auto; border-radius: 8px; box-shadow: 0 10px 26px rgba(0,0,0,.45); margin: 0 auto 1.1rem; display: block; }
.oc-gift-codebox { display: inline-block; margin: .6rem auto 1rem; padding: .9rem 1.4rem; border: 1px dashed var(--gold); border-radius: 6px; background: rgba(0,0,0,.15); }
.oc-gift-k { display: block; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-light); font-weight: 600; }
.oc-gift-code { margin: .3rem 0 .1rem; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: clamp(1.35rem, 5.4vw, 1.9rem); letter-spacing: .08em; color: var(--text); font-weight: 700; }
.oc-gift-code.is-pending { font-family: inherit; font-size: 1rem; letter-spacing: 0; font-weight: 400; max-width: 34ch; }
.oc-gift-amt { margin: 0; font-size: .9rem; color: var(--muted-sub, #cfcac2); }
.oc-gift-msg { font-family: var(--serif); font-style: italic; font-size: 1.1rem; }
.oc-gift-terms { font-size: .85rem; color: var(--muted-sub, #cfcac2); max-width: calc(60ch + 32px); text-wrap: pretty; margin: 1rem auto 0; line-height: 1.5; }
.oc-gift-actions .btn { margin: .25rem .15rem; }
@media print { .site-header, header, footer, .oc-links, .oc-help, .oc-gift-actions, .cart-fab { display: none !important; } }
.gc-f label .co-opt { text-transform: none; letter-spacing: .02em; font-weight: 400; color: #b9b4ab; }
/* Gift card code on the checkout address step (running-balance gift cards, gift-card branch) */
.co-gc { margin: .3rem 0 .9rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.co-gc label { display: block; margin-bottom: .3rem; }
.co-gc-row { display: flex; gap: .5rem; }
.co-gc-row input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: .06em; }
.co-gc-row .btn { flex: none; }
.co-gc-msg { margin: .4rem 0 0; font-size: .85rem; color: var(--gold-light); }
.co-gc-msg:empty { display: none; }
.co-gc-msg.is-bad { color: #f0b4a8; }
.co-gc-remove { background: none; border: 0; padding: 0; color: var(--text); text-decoration: underline; cursor: pointer; font: inherit; }
.co-gc-note { margin: 0 0 .8rem; padding: .6rem .8rem; border-left: 3px solid #e0806b; background: rgba(0,0,0,.15); font-size: .9rem; }
.co-giftrow .co-gift { color: var(--gold-light); }
/* Oct 13: Remove on applied codes in the summary + "Use a different code" on the payment step */
.co-promorow, .co-giftrow { align-items: baseline; gap: .6rem; }
.co-codel { min-width: 0; }
.co-codel .co-code-remove { display: block; margin-top: .05rem; }
.co-code-remove, .co-code-other { appearance: none; background: none; border: 0; padding: .3rem .15rem; min-height: 32px; font: 500 .8rem/1.2 var(--sans); color: var(--muted-sub); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; white-space: nowrap; }
.co-code-remove:hover, .co-code-remove:focus-visible, .co-code-other:hover, .co-code-other:focus-visible { color: var(--gold-light); }
.co-codeswap { margin: -.1rem 0 .4rem; }
.co-code-other { padding-left: 0; }
@media (max-width: 600px) { .co-code-remove, .co-code-other { min-height: 40px; font-size: .84rem; } }
.oc-gc-applied { font-weight: 600; color: var(--gold-light); }
/* Gift card page: hero subtitle on ONE line from 768px up (Oct 9). Phones keep wrapping: ~88 characters cannot fit 390px even at 13px. */
@media (min-width: 768px) { body[data-page="gift-card"] .page-hero p { max-width: none; white-space: nowrap; } }

/* Oct 9: gift card banner – slim centred gift card strip between the prints hero and the first row of cards (replaces the hero tile); soft white border + white outline button, nothing gold.
   Space above = the section's top padding; the same space below, so it sits evenly in the gap. */
.gc-banner { display: flex; align-items: center; gap: 1.1rem; max-width: 880px; margin: 0 auto 2.1rem; padding: .7rem 1.1rem .7rem .8rem;
  background: var(--sub); border: 1px solid rgba(255,255,255,.45); border-radius: 8px;   /* same as .page-hero */ box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.gc-banner-img { flex: none; display: block; line-height: 0; }
.gc-banner-img img { width: 96px; height: 60px; object-fit: cover; border-radius: 4px; box-shadow: 0 3px 10px rgba(0,0,0,.35); }
.gc-banner-text { flex: 1; min-width: 0; }
.gc-banner-h { margin: 0; font-family: var(--serif); font-size: 1.45rem; font-weight: 600; line-height: 1.15; color: var(--text); }
.gc-banner-from { font-weight: 500; color: #f3efe8; white-space: nowrap; }
.gc-banner-sub { margin: .2rem 0 0; font-size: .84rem; color: var(--muted-sub, #cfcac2); line-height: 1.4; }
.gc-banner-btn { flex: none; white-space: nowrap; background: transparent !important; color: #fff !important; border: 1px solid rgba(255,255,255,.85) !important; box-shadow: none !important;
  transition: background .2s, color .2s, border-color .2s; }
.gc-banner-btn:hover, .gc-banner-btn:focus-visible { background: #fff !important; color: #2b2a28 !important; border-color: #fff !important; }
.gc-banner-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 760px) {
  .gc-banner { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .65rem .85rem; margin-bottom: 1.4rem; padding: .75rem; }
  .gc-banner-img img { width: 76px; height: 48px; }
  .gc-banner-h { font-size: 1.22rem; }
  .gc-banner-sub { font-size: .78rem; margin-top: .15rem; }
  .gc-banner-btn { grid-column: 1 / -1; width: 100%; text-align: center; }
}
@media print { .gc-banner { display: none !important; } }

/* Oct 9: checkout fallback – retry button + small error code (for diagnosing "Online checkout isn't available right now") */
.co-retry { background: none; border: 0; padding: .3rem 0; font: inherit; font-size: .85rem; color: var(--gold-light); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.co-fallback-code { font-size: .7rem; color: #8a877f; margin-top: .6rem; }

/* Oct 9 (later): bag button moved to the TOP-RIGHT, fixed just below the sticky header (--fab-top set by placeFab()); same size,
   same horizontal rule. Replaces the bottom-right placement and its footer/newsletter offsets. Tucks away while over a print control.
   --fab-gap (set by placeFab(), Oct 9 bagcenter): distance below the header so the button starts centred in the title band. */
.cart-fab { top: calc(var(--fab-top, var(--header-h)) + var(--fab-gap, 14px)); bottom: auto; right: var(--fab-right, 20px);
  transition: background .2s, box-shadow .2s, transform .2s, opacity .18s, visibility .18s; }
.cart-fab.is-tucked { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-6px); }
@media (max-width: 760px) {
  .cart-fab { top: calc(var(--fab-top, 72px) + var(--fab-gap, 10px)); bottom: auto; right: calc(env(safe-area-inset-right) + 10px);
    width: 50px; height: 50px; }   /* Oct 9 (bagcorner): 10 px from the right edge = 10 px below the header (placeFab), a bit smaller */
  .cart-fab svg { width: 25px; height: 25px; }
}
@media (prefers-reduced-motion: reduce) { .cart-fab { transition: none; } }

/* Oct 9 (promo): "Gift card or discount code" field – applied codes listed one per line, error line in red */
.co-gc-msg .co-gc-ok, .co-gc-msg .co-gc-bad { display: block; }
.co-gc-msg .co-gc-ok + .co-gc-ok { margin-top: .25rem; }
.co-gc-msg .co-gc-bad { color: #f0b4a8; margin-bottom: .25rem; }
.co-promo { color: var(--gold-light); }

/* Oct 9 (bagphone): phones – the bag button sits 16 px below the header (= its gap from the right edge). Only when the title band's
   text would run under it (js/site.js placeFab() measures; e.g. 360 px wide, not 390) does the text get equal side padding. */
@media (max-width: 760px) {
  body[data-page="prints"] .page-hero.fab-clear .container { padding-left: 64px; padding-right: 64px; box-sizing: border-box; }
}
/* the address step sits on the WHITE checkout panel: readable Apply button + message colours there */
.co-panel .co-gc-apply { color: #30302e; border-color: #30302e; }
.co-panel .co-gc-apply:hover, .co-panel .co-gc-apply:focus-visible { background: #30302e; color: #fff; }
.co-panel .co-gc-msg { color: #6e5418; }
.co-panel .co-gc-msg.is-bad, .co-panel .co-gc-msg .co-gc-bad { color: #b3261e; }
.co-panel .co-gc-remove { color: #30302e; }
.co-gc-row input::placeholder { text-transform: none; letter-spacing: normal; }

/* ---------- Proportional mats (Oct 9, "propmat") – ONLY when <html class="mat-prop"> (MAT_MODE in js/site.js, or ?mats=proportional) ----------
   A true 2.5 in mat (--mat-in) at each painting's real size: card scale = available square / (long side + 2 x 2.5 in), so the matted
   painting fills the card's long side like before, but a small 11x15 gets a relatively thicker mat (and a smaller picture) than a 22x30.
   --win / --hin / --lin (inches) are set inline by card() / showLB() from data/works.js. Without the class nothing here applies. */
html.mat-prop .gallery-grid .mat[style*="--lin"] {
  --L: calc((100cqw - 2 * var(--pad)) * var(--lin) / (var(--lin) + 2 * var(--mat-in)));
  --mat: calc(var(--L) * var(--mat-in) / var(--lin)); }
html.mat-prop .lb-mat.lb-prop img {
  max-width: calc((100vw - 8rem) * var(--win) / (var(--win) + 2 * var(--mat-in)));
  max-height: max(140px, calc(min(74vh, 100vh - 15rem) * var(--hin) / (var(--hin) + 2 * var(--mat-in)))); }
@media (max-width: 600px) {
  html.mat-prop .lb-mat.lb-prop img { max-width: calc((100vw - 1.2rem) * var(--win) / (var(--win) + 2 * var(--mat-in))); }
}
/* Oct 12 (Tommy): Demonstrations sub-heading on ONE line at every width – never wraps; font scales down with the viewport on narrow
   screens (the 88-character line is ≈46.5× its font size wide; 2.6rem = container side padding + margin) and caps at the normal .9rem on desktop. */
body[data-page="demonstrations"] .page-hero p { max-width: none; white-space: nowrap; font-size: min(.9rem, calc((100vw - 2.6rem) / 46.5)); }

/* Oct 12: contact.html?workshop=… – "Workshop: <name>" line above the contact form (js/site.js setupContactForm) */
.ws-reg-note { border: 1px solid rgba(197,160,89,.55); border-left: 3px solid var(--gold); background: rgba(197,160,89,.08); padding: .8rem 1rem; margin: 0 0 1.2rem; line-height: 1.5; }
.ws-reg-note strong { color: var(--gold-light); font-weight: 600; }
.ws-reg-note span { font-size: .88rem; color: var(--muted-sub); }

/* ===== HOME HERO (D3) – Oct 12, Tommy-approved. Markup: gen_pages.py home block; behaviour: js/site.js setupHomeHero(). Classes hd/hd2/hd3
   come from the preview variants (D2 = faded painting, D3 = painting behind the transparent header + Welcome to up top). ===== */

.hd{position:relative;overflow:hidden;isolation:isolate;border-bottom:1px solid var(--line);background:radial-gradient(110% 120% at 20% 30%,#4a4846 0%,#393837 55%,#2f2e2d 100%);padding:clamp(1.1rem,2.4vw,1.7rem) 0 clamp(1.1rem,2.2vw,1.6rem)}
.hd .container{position:relative;z-index:2;display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem 2rem;flex-wrap:wrap}
.hd-brand{margin:0;line-height:1;text-align:left}
.hd-welcome{display:block;font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(1.15rem,1.9vw,1.55rem);color:var(--text-strong);margin:0 0 .15rem .2rem;letter-spacing:.02em}
.hd-logo{display:block;width:min(52vw,600px)}
.hd-logo img{display:block;width:100%;height:auto;max-width:none}
.hd-sub{display:block;font-family:var(--sans);font-size:clamp(.66rem,1.05vw,.85rem);letter-spacing:.55em;text-transform:uppercase;color:var(--text);margin:-.35rem 0 0 clamp(1.6rem,4.4vw,3.6rem)}
.hd-cta{display:flex;gap:.6rem;margin:0 0 .4rem}
.hd-cta .btn{min-width:10.5rem;padding-top:.75rem;padding-bottom:.75rem}
.hd-ghost{background:rgba(20,19,18,.35)}
.hd + #new-arrivals-section{padding-top:clamp(1rem,2.2vw,1.5rem)}
/* logo swap: the header logo is hidden while the big hero logo is on screen, and fades back in once it scrolls away */
body.hd-home .site-header .logo{transition:opacity .35s ease,transform .35s ease}
body.hd-home:not(.hd-out) .site-header .logo{opacity:0;transform:translateY(4px);pointer-events:none}
.hd-brand{transition:opacity .25s ease}
body.hd-out .hd-brand{opacity:.0}
@media (max-width:600px){
 .hd{padding:.9rem 0 1rem}
 .hd .container{gap:.8rem}
 .hd-logo{width:84vw}
 .hd-welcome{font-size:1.05rem}
 .hd-sub{font-size:.62rem;margin-left:9vw}
 .hd-cta{width:100%;margin:0}.hd-cta .btn{flex:1 1 50%;min-width:0;padding:.66rem .4rem;font-size:.66rem;letter-spacing:.12em}
}

.hd2{background:#2c2b2a}
.hd2 .hd-bg{position:absolute;inset:-20px;z-index:0;background:url(../assets/img/hero-golden-hour-glory.jpg) center 42%/cover no-repeat;filter:blur(3px) saturate(.9);opacity:.5}
.hd2::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(30,29,28,.82) 0%,rgba(30,29,28,.45) 60%,rgba(30,29,28,.6) 100%),linear-gradient(180deg,transparent 60%,rgba(57,56,55,.9))}
.hd2 .hd-logo{filter:drop-shadow(0 3px 14px rgba(0,0,0,.5))}

/* D3: painting continues up behind a transparent header at the top; header turns solid (with small logo) once the big logo scrolls away */
.hd3{margin-top:calc(-1 * var(--header-h) - 1px);padding-top:calc(var(--header-h) + .2rem)}
.hd3::after{background:linear-gradient(180deg,rgba(26,25,24,.72) 0%,rgba(26,25,24,.35) calc(var(--header-h) + 10px),transparent calc(var(--header-h) + 40px)),linear-gradient(90deg,rgba(30,29,28,.8) 0%,rgba(30,29,28,.42) 60%,rgba(30,29,28,.6) 100%),linear-gradient(180deg,transparent 60%,rgba(57,56,55,.9))}
.hd3 .hd-welcome{position:absolute;top:calc(-1 * var(--header-h) / 2 - .2rem);left:0;transform:translateY(-50%);margin:0;font-size:clamp(1.7rem,2.7vw,2.3rem);white-space:nowrap;text-shadow:0 2px 12px rgba(0,0,0,.55)}
.hd3 .hd-brand{position:relative}
.hd3 .container{padding-top:.1rem}
body.hd-home .site-header{transition:background-color .35s ease,border-color .35s ease,box-shadow .35s ease,backdrop-filter .35s ease}
body.hd-home:not(.hd-out) .site-header:not(:has(.main-nav.open)):not(:has(.nav-toggle[aria-expanded="true"])):not(:has(.is-open)){background:transparent;border-bottom-color:transparent;box-shadow:none}
body.hd-home:not(.hd-out) .site-header .main-nav > ul > li > a{text-shadow:0 1px 8px rgba(0,0,0,.65)}
@media (max-width:600px){.hd3 .hd-welcome{font-size:1.45rem}}
/* FINE ART = header-logo proportions: font 4.571% of script width (9.6/210), tracking .5em, text starts 11.43% in (24/210), top 4.29% above the image bottom */
.hd3 .hd-logo{position:relative;container-type:inline-size}
.hd3 .hd-logo::after{content:"";display:block;height:1.6cqw}   /* room for the part of FINE ART below the script (child of the container, so cqw = logo width) */
.hd3 .hd-logo .hd-sub{position:absolute;left:11.43cqw;top:16.35cqw;   /* calibrated so the text box sits 4.29% of the width above the script bottom, exactly like the header logo */margin:0;padding:0;font-family:var(--sans);font-size:4.571cqw;line-height:1;letter-spacing:.5em;white-space:nowrap}

body[data-page="home"] #new-arrivals-h{font-size:clamp(1.5rem,2.4vw,1.9rem)}
.hd-cta .btn{justify-content:center;text-align:center}
/* Oct 12 (Tommy): more blank space under "View all Selected Works" at the end of the home New Arrivals section (+36px desktop, +24px phones).
   Undo: delete these two lines (or restore scratch/home-rework-bak/style.css.pre-nagap). */
body[data-page="home"] .recent-more { margin-bottom: 36px; }
@media (max-width: 600px) { body[data-page="home"] .recent-more { margin-bottom: 24px; } }
/* Oct 12 (Tommy): purchase line under "Original paintings by Paul Oman" (home New Arrivals) – subtle, matches the lead */
.section.recent .recent-buy { margin: .2rem auto 0; max-width: 46ch; font-size: .8rem; line-height: 1.45; color: var(--muted); letter-spacing: .02em; text-wrap: balance; }
.section.recent .recent-buy a { color: var(--gold-light); text-decoration: underline; text-decoration-color: rgba(197,160,89,.45); text-underline-offset: 2px; }
.section.recent .recent-buy a:hover, .section.recent .recent-buy a:focus-visible { text-decoration-color: currentColor; }
@media (min-width: 700px) { .section.recent .recent-buy { max-width: none; } }

/* Oct 12 (Tommy chose "long fade"): hero painting fades over ~120px into the page colour and continues ~60px under the New Arrivals
   heading (hero padding +60px, margin-bottom -60px); no border line. Undo: delete this block or restore style.css.pre-fadelong. */
.hd{border-bottom:0;padding-bottom:calc(clamp(1.1rem,2.2vw,1.6rem) + 60px);margin-bottom:-60px}
.hd3::after{background:linear-gradient(180deg,transparent calc(100% - 120px),rgba(57,56,55,.75) calc(100% - 45px),#393837 100%),linear-gradient(180deg,rgba(26,25,24,.72) 0%,rgba(26,25,24,.35) calc(var(--header-h) + 10px),transparent calc(var(--header-h) + 40px)),linear-gradient(90deg,rgba(30,29,28,.8) 0%,rgba(30,29,28,.42) 60%,rgba(30,29,28,.6) 100%)}
.hd + #new-arrivals-section{position:relative;z-index:1}
/* Oct 12 (Tommy): New Arrivals subline tucked up under the heading; the freed space goes between the subline and the purchase line.
   Undo: delete these lines (or restore style.css.pre-nasub). */
body[data-page="home"] .section.recent .section-head h2 { margin-bottom: 0; }
body[data-page="home"] .section.recent .recent-lead { margin-top: var(--na-lead-mt, 0px); }
body[data-page="home"] .section.recent .recent-buy { margin-top: var(--na-buy-mt, .2rem); }
body[data-page="home"] .section.recent { --na-lead-mt: 4px; --na-buy-mt: 14px; }
@media (max-width: 600px) { body[data-page="home"] .section.recent { --na-lead-mt: 5px; --na-buy-mt: 10px; } }
/* Oct 12 (Tommy): phones – purchase line breaks after "contact Paul." (one sentence per line, no dangling "To"). Desktop: one line. */
@media (max-width: 600px) { .section.recent .recent-buy .rb-s { display: block; white-space: nowrap; } }
/* Oct 12: with 7 New Arrivals the thumbnail row was ~6px wider than a 360px phone (sideways scroll) – thumbs shrink to fit on narrow phones */
@media (max-width: 420px) { .car-thumbs { --tl: min(48px, calc((100vw - 2rem - 2.1rem) / 7)); } }
/* Oct 12 (Tommy): lock icon inline right before "Your photo stays…" (flex had detached it to the far left when the text wraps) */
.pw-private { display: block; text-align: center; }
.pw-private svg { display: inline-block; vertical-align: -.17em; width: 1.05em; height: 1.05em; margin-right: .35em; }
/* Oct 12: home "Get new originals by email" bar under New Arrivals (gen_pages.py home block; Mailchimp JSONP via data-mailchimp) */
.na-alert { border-top: 1px solid rgba(197,160,89,.4); border-bottom: 1px solid rgba(197,160,89,.4); background: rgba(197,160,89,.06); margin: clamp(1.4rem, 3vw, 2rem) 0 0; }
.na-alert .container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .6rem 1rem; padding: .8rem 0; }
.na-alert-text { margin: 0; font-size: .84rem; color: var(--text-strong); }
.na-alert-bell { color: var(--gold-light); vertical-align: -.15em; }
.na-alert-form { display: flex; gap: .5rem; flex: 0 1 380px; margin: 0; }
.na-alert-form input[type=email] { flex: 1; min-width: 0; padding: .6rem .7rem; background: var(--main); border: 1px solid var(--field-line, #6b6864); color: var(--text); font: inherit; font-size: .86rem; }
.na-alert-form .btn { white-space: nowrap; }
.na-alert-msg { flex-basis: 100%; text-align: center; margin: 0; font-size: .82rem; }
.na-alert-msg:empty { display: none; }
@media (max-width: 600px) { .na-alert .container { flex-direction: column; align-items: stretch; text-align: center; padding: .8rem 0; } .na-alert-form { flex: auto; flex-direction: column; } .na-alert-form .btn { width: 100%; } }
.na-alert-msg.is-success { color: var(--gold-light); } .na-alert-msg.is-error { color: #f0b4a8; }
/* Oct 12 (alertbar): alerts bar vertically centered between the View All button and the New Arrivals section bottom (equal gaps; total kept) */
body[data-page="home"] .recent-more { margin-bottom: 0; }
body[data-page="home"] .na-alert { margin-top: 22px; }
body[data-page="home"] .section.recent { padding-bottom: 22px; }
@media (max-width: 600px) { body[data-page="home"] .na-alert { margin-top: 18px; } body[data-page="home"] .section.recent { padding-bottom: 18px; } }
.oc-gift-received { margin: .35rem 0 0; font-size: .95rem; color: var(--text); }

/* Oct 13: gift card delivery choice (shown only when /api/gift-card-config says emailing is on) */
.gc-send { border: 1px solid var(--line); border-radius: 6px; padding: .8rem .9rem .3rem; margin: 0 0 .95rem; }
.gc-send legend { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-light); font-weight: 600; padding: 0 .3rem; }
.gc-send-opt { display: flex; gap: .65rem; align-items: flex-start; padding: .55rem .2rem; cursor: pointer; }
.gc-send-opt input { accent-color: var(--gold); margin-top: .25rem; width: 1.05rem; height: 1.05rem; flex: none; }
.gc-send-opt strong { display: block; font-weight: 600; color: var(--text); }
.gc-send-opt small { display: block; font-size: .8rem; color: var(--muted-sub, #cfcac2); line-height: 1.4; }
.gc-send-extra { margin: 0 0 .4rem; }
.gc-form .gc-sub { margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }   /* Oct 13: recipient section below the buyer section */   /* Oct 13: now below the recipient fields (was inside the delivery box) */
.gc-remail-f[hidden] { display: none; }
.gc-send-extra[hidden] { display: none; }
.gc-check { display: flex; gap: .5rem; align-items: center; font-size: .9rem; margin-bottom: .7rem; cursor: pointer; }
.gc-check input { accent-color: var(--gold); width: 1rem; height: 1rem; }
.oc-gift-delivery[hidden], .oc-gift-receipt[hidden], .oc-gift-received[hidden] { display: none; }
.oc-gift-delivery { margin: .2rem auto .6rem; max-width: 52ch; font-size: 1rem; }
.oc-gift-delivery.is-sent { color: var(--gold-light); }
.oc-gift-delivery.is-warn { color: #f0b9a8; }

/* Oct 13: New Originals subtext removed (approved live-nosub mockup); carousel pulled up */
body[data-page="home"] #new-arrivals-carousel{margin-top:-15px}
@media (max-width:600px){body[data-page="home"] #new-arrivals-carousel{margin-top:-31px}}

/* Oct 13: "Check your balance" on /gift-card (left column, under the points) */
.gc-bal { margin-top: 1.4rem; padding: 1rem 1.1rem 1.05rem; background: var(--sub); border: 1px solid var(--line); border-radius: 8px; }
.gc-bal-h { font-size: 1.15rem; margin: 0 0 .6rem; }
.gc-bal-form label { display: block; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-light); font-weight: 600; margin-bottom: .35rem; }
.gc-bal-form input { width: 100%; box-sizing: border-box; font: inherit; font-size: 1rem; padding: .55rem .7rem; border-radius: 4px; border: 1px solid var(--line); background: rgba(0,0,0,.2); color: var(--text); }
.gc-bal-msg { margin: .5rem 0 0; font-size: .92rem; color: var(--gold-light); }
.gc-bal-msg:empty { display: none; }
.gc-bal-msg.is-bad { color: #f0b4a8; }
.gc-bal-msg strong { font-size: 1.15rem; color: var(--text); }
.gc-bal .co-gc-row { flex-wrap: wrap; }
.gc-bal .co-gc-row input { flex: 1 1 13rem; }
@media (max-width: 480px) { .gc-bal .co-gc-row .btn { flex: 1 1 100%; } }
.gc-f textarea { display: block; vertical-align: top; margin: 0; }   /* Oct 13: no inline baseline gap, so the hint under Message sits like the others */

/* Oct 13: "Order notes" on the print checkout (address step) – same look as the inputs, hint 4.8px under the box like the gift card form */
.co-f textarea { display: block; width: 100%; box-sizing: border-box; min-height: 92px; padding: .66rem .8rem; font: 400 1rem/1.4 var(--sans); color: #222; background: #fff; border: 1px solid #cfcac0; border-radius: 6px; resize: vertical; margin: 0; }
.co-f textarea:focus { outline: none; border-color: #b08a3e; box-shadow: 0 0 0 3px rgba(197,160,89,.28); }
.co-f .co-hint { margin: -.02rem 0 0; font-size: .78rem; line-height: 1.4; color: #6b6862; }