/* Larica Schnell — public site. "Lamplight" direction: colours from her paintings
   (espresso, oxblood, brick, amber lamplight, powder blue), with cream as the accent. */
:root {
  --espresso: #1a0a07; --oxblood: #3b100c; --brick: #8f2418; --vermilion: #e2432c; --amber: #f2a53a;
  --lamp: #ffd98c; --cream: #f5e7cf; --powder: #b4cbdc;
  --line: rgba(245, 231, 207, .16);
  --serif: "Gloock", Georgia, serif;
  --text: "Newsreader", Georgia, serif;
  --mono: "Martian Mono", ui-monospace, monospace;
  --gutter: clamp(16px, 4vw, 56px);
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 .82 0 0 0 0 .55 0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
/* Each section's colour, shared by its menu band, its page header and the sticky header. */
[data-section=home]    { --band: var(--oxblood);  --band-ink: var(--cream);    --band-cap: var(--lamp); }
[data-section=about]   { --band: var(--espresso); --band-ink: var(--cream);    --band-cap: var(--lamp); }
[data-section=gallery] { --band: var(--oxblood);  --band-ink: var(--cream);    --band-cap: var(--lamp); }
[data-section=shop]    { --band: var(--brick);    --band-ink: var(--cream);    --band-cap: var(--lamp); }
[data-section=press]   { --band: var(--powder);   --band-ink: var(--espresso); --band-cap: var(--oxblood); }
[data-section=contact] { --band: var(--amber);    --band-ink: var(--espresso); --band-cap: var(--oxblood); }
* { box-sizing: border-box; margin: 0; }
[hidden] { display: none !important; } /* the hidden attribute always wins over display rules */
html { background: var(--espresso); color: var(--cream); -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; font: 400 1.125rem/1.55 var(--text); display: flex; flex-direction: column; }
body::before { content: ""; position: fixed; inset: 0; background: var(--grain); opacity: .07; pointer-events: none; z-index: 0; }
body.home::before { display: none; }
main { flex: 1; position: relative; z-index: 1; }
a { color: inherit; }
img, video { display: block; max-width: 100%; }
::selection { background: var(--cream); color: var(--espresso); }
:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }
.mono { font-family: var(--mono); font-weight: 300; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Header ---------- */
.site-head { position: fixed; top: 0; left: 0; right: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between;
  padding: clamp(18px, 3.5vh, 36px) var(--gutter); pointer-events: none; transition: padding .3s, background-color .3s, color .3s;
  color: var(--band-ink, var(--cream)); } /* dark text over the light Press/Contact headers */
/* Scrolled down: the name and Menu stay pinned at the top in a slim band of the page's colour. */
body.scrolled .site-head { background: var(--band, var(--espresso)); color: var(--band-ink, var(--cream)); padding-top: 14px; padding-bottom: 14px;
  box-shadow: 0 1px 0 rgba(0,0,0,.12); pointer-events: auto; }
body.menu-open .site-head { background: none; box-shadow: none; color: var(--cream); }
.site-head > * { pointer-events: auto; }
.wordmark { font: 400 1.35rem/1 var(--serif); text-decoration: none; letter-spacing: -.01em; }
/* The same quiet grow as the menu comparison's option C: a small lift, no outline. */
.wordmark { display: inline-block; transform-origin: 0 60%; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.wordmark:hover { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) { .wordmark { transition: none; } }
.head-links { display: flex; align-items: center; gap: 22px; }
.head-btn { background: none; border: 0; color: inherit; cursor: pointer; padding: 6px 0; text-decoration: none;
  font: 500 12px/1 var(--mono); letter-spacing: .3em; text-transform: uppercase; border-bottom: 1px solid var(--cream); }
.head-btn:hover { opacity: .7; }
.cart-link[hidden] { display: none; }
body.menu-open .wordmark, body.menu-open .cart-link { visibility: hidden; }

/* ---------- Menu: four bands dealt down onto the table ---------- */
.menu { position: fixed; inset: 0; z-index: 20; overflow: hidden; display: flex; flex-direction: column; pointer-events: none; }
body.menu-open .menu { pointer-events: auto; }
.menu a { flex: 1; position: relative; display: flex; align-items: center; gap: clamp(14px, 2.4vw, 36px); padding: 0 var(--gutter);
  text-decoration: none; transform: translateY(-105vh); transition: transform .5s cubic-bezier(.65,0,.25,1); will-change: transform; }
.menu a::before { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: .1; pointer-events: none; }
.menu a { background: var(--band); color: var(--band-ink); min-height: 0; overflow: hidden; } /* always fit the window, so closed bands sit fully off-screen */
.menu a:nth-child(1) { z-index: 5; } .menu a:nth-child(2) { z-index: 4; } .menu a:nth-child(3) { z-index: 3; }
.menu a:nth-child(4) { z-index: 2; } .menu a:nth-child(5) { z-index: 1; }
body.menu-open .menu a { transform: none; }
body.menu-open .menu a:nth-child(1) { transition-delay: .2s; } body.menu-open .menu a:nth-child(2) { transition-delay: .15s; }
body.menu-open .menu a:nth-child(3) { transition-delay: .1s; } body.menu-open .menu a:nth-child(4) { transition-delay: .05s; }
.menu a:first-child { padding-top: clamp(40px, 6vh, 64px); }
.menu b { font: 400 clamp(2.4rem, 10vh, 7rem)/.9 var(--serif); letter-spacing: -.015em; }
.menu i { font: 300 11px/1 var(--mono); font-style: normal; letter-spacing: .24em; text-transform: uppercase; opacity: .75; }
.menu i { color: var(--band-cap); }
.menu a[aria-current] i::before { content: "● "; color: var(--cream); }
/* Hover turns the word into a thin cream outline (Larica's pick over green, text-colour, or a subtle grow). */
.menu a:hover b { color: transparent; -webkit-text-stroke: 1.5px var(--cream); }
/* Choosing a page: the menu turns into that page's header (see site.js). */
.menu.leaving { background: var(--espresso); }
.menu.leaving a b { color: inherit !important; -webkit-text-stroke: 0 !important; }
.menu.leaving a::before { display: none; }
body.menu-leaving .wordmark { visibility: visible; }
/* Arriving from the menu, the page content rises in under the header. */
html.from-menu main > :not(.band), html.from-menu .site-foot { animation: rise .55s .05s both cubic-bezier(.2,.7,.2,1); }
@keyframes rise { from { opacity: 0; transform: translateY(28px); } }
@media (max-aspect-ratio: 1/1) {
  .menu a { flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px; }
  .menu b { padding-bottom: .15em; }
  .menu b { font-size: min(9vh, 17vw); }
}

/* ---------- Page header band (matches the menu band you came from) ---------- */
.band { position: relative; padding: clamp(110px, 18vh, 170px) var(--gutter) clamp(36px, 6vh, 64px); }
.band::before { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: .1; pointer-events: none; }
/* Gloock's descenders (p, y, g) reach ~.15em below a .9 line box, so big titles reserve that space and
   captions then sit a fixed gap beneath — the same in the menu and in every page header. */
.band h1 { position: relative; font: 400 clamp(3.4rem, 13vw, 10rem)/.9 var(--serif); letter-spacing: -.015em; padding-bottom: .15em; }
.band p { position: relative; margin-top: 10px; }
.band { background: var(--band); color: var(--band-ink); }
.band p { color: var(--band-cap); }
.section { padding: clamp(32px, 6vh, 72px) var(--gutter); }

/* ---------- Home ---------- */
.home-film { position: fixed; inset: 0; }
.home-film video { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.08) contrast(1.01); } /* a touch more colour: option B of the 2026-10-27 comparison */
/* Only the edges are darkened (so the name and Menu stay readable); the film keeps its own colours. */
.home-film::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(130% 100% at 60% 35%, transparent 50%, rgba(26,10,7,.45) 85%, rgba(26,10,7,.7) 100%),
    linear-gradient(to top, rgba(26,10,7,.7), transparent 35%); }
body.home .wordmark { visibility: hidden; }
body.home.scrolled .wordmark { visibility: visible; } /* the pinned bar takes over once the block reaches the top */
.home-name h1 { font: 400 var(--name-size)/var(--name-lh) var(--serif); letter-spacing: var(--name-ls); }
.home-name h1 span { display: table; } /* one word per line, each as wide as its word */
.home-name .name-last { padding-left: .55em; }
/* The film fills the first screen. The name is sticky: it waits in the bottom corner over the film
   while its place in the page (just inside the top of the oxblood block) is still below the screen,
   then rides up with the block. The browser does all of this as it scrolls, so it stays smooth. */
.home-stage { position: relative; --name-size: clamp(2.6rem, 7vw, 6.2rem); --name-lh: .95; --name-ls: .02em; /* line and letter spacing of the name: option B of the 2026-10-27 comparison (was .86 / -.01em) */ --name-h: calc(var(--name-size) * 2 * var(--name-lh));
  --name-gap: 40px; --name-bottom: clamp(28px, 6vh, 64px); }
.home-spacer { height: calc(100vh + var(--name-gap)); height: calc(100svh + var(--name-gap)); }
.home-name { position: sticky; bottom: var(--name-bottom); z-index: 2; height: var(--name-h); padding-left: var(--gutter); color: var(--cream); transition: color .3s; }
/* Once the block has picked the name up, it takes the block's text colour (dark on a light block). */
.home-name.on-block { color: var(--band-ink); }
/* The block's colour is set in the dashboard (Site → Home); text inside follows it so it stays readable. */
.home-block { position: relative; z-index: 1; background: var(--band); color: var(--band-ink); min-height: 70vh;
  margin-top: calc(-1 * (var(--name-h) + var(--name-gap)));
  padding: calc(var(--name-h) + var(--name-gap) + max(48px, 8vh)) var(--gutter) clamp(56px, 9vh, 110px); }
.home-block::before { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: .1; pointer-events: none; }
.see-more { position: relative; text-align: center; margin-top: clamp(40px, 6vh, 72px); }
.see-more a { display: inline-block; font: 400 clamp(1.5rem, 2.6vw, 2.2rem)/1 var(--serif); text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 6px; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.see-more a:hover { transform: scale(1.05); }
.featured { position: relative; display: grid; gap: clamp(28px, 3vw, 44px); align-items: start; }
@media (min-width: 720px) { .featured { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.featured .work { margin: 0; }
body.home .site-foot { background: var(--band); color: var(--band-cap); border-top-color: color-mix(in srgb, var(--band-ink) 14%, transparent); }
.home-block .work .cap span { color: var(--band-cap); }
/* Over the film, the Menu button stays cream whatever the block colour. */
body.home:not(.scrolled):not(.menu-open) .site-head { color: var(--cream); }
body.home .head-btn { text-shadow: 0 1px 10px rgba(26,10,7,.7); }

body.menu-open .home-name { visibility: hidden; }

/* Larica's handwritten name (Site Builder → Home, on unless switched off): her signature used as a stencil filled with the
   text colour, so it changes colour exactly as the typed name does. Big on Home (30% larger than the typed name, chosen
   2026-11-02: option C, solid, +30%; the page's spacing grows with it) and in the pinned bar on every page. The typed
   name stays in the page, hidden, for screen readers and search engines. */
body.hand-name .home-stage { --name-h: calc(var(--name-size) * 2 * var(--name-lh) * 1.3); }
body.hand-name .home-name h1 { position: relative; height: var(--name-h); width: calc(var(--name-h) * 2.689); max-width: calc(100vw - 2 * var(--gutter)); }
body.hand-name .home-name h1 > span { opacity: 0; }
body.hand-name .home-name h1::before { content: ""; position: absolute; inset: 0; }
body.hand-name .home-name h1::before, body.hand-name .wordmark { background: currentColor;
  -webkit-mask: url(/assets/signature.png) no-repeat left center / contain; mask: url(/assets/signature.png) no-repeat left center / contain; }
body.hand-name .wordmark { --h: 2rem; width: calc(var(--h) * 2.689); height: var(--h); overflow: hidden; text-indent: -9999px; white-space: nowrap; }
@media (min-width: 720px) { body.hand-name .wordmark { --h: 2.6rem; } }

/* ---------- Gallery ---------- */
.works { columns: 3 300px; column-gap: clamp(16px, 2.5vw, 36px); }
/* site.js re-lays the works into real columns so the order reads left to right. */
.works.laid { columns: auto; display: flex; gap: clamp(16px, 2.5vw, 36px); align-items: flex-start; }
.works.laid .col { flex: 1; min-width: 0; }
.work { break-inside: avoid; margin-bottom: clamp(28px, 4vw, 48px); }
.work a { text-decoration: none; display: block; }
.work .frame { position: relative; background: var(--oxblood); overflow: hidden; }
.work .frame img, .work .frame video { width: 100%; height: auto; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.work a:hover .frame img, .work a:hover .frame video { transform: scale(1.02); }
.work .play { position: absolute; left: 12px; bottom: 12px; padding: 6px 10px 5px; background: rgba(26,10,7,.75); color: var(--cream); }
.work .cap { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; align-items: baseline; } /* a long title wraps; the price stays on the right */
.work .cap b { min-width: 0; }
.work .cap b { font: 400 1.25rem/1.2 var(--serif); }
.work a:hover .cap b { text-decoration: underline; text-decoration-color: var(--cream); text-underline-offset: 4px; text-decoration-thickness: 1px; }
.work .cap span { color: var(--lamp); opacity: .8; white-space: nowrap; }
.press-group + .press-group { margin-top: clamp(48px, 7vw, 88px); }
.press-heading { font: 400 clamp(1.8rem, 4vw, 3rem)/1 var(--serif); letter-spacing: -.01em; margin-bottom: 18px; } /* like the Gallery's series names */
.press-list ul { list-style: none; padding: 0; border-top: 1px solid var(--line); max-width: 1100px; }
.press-list li { border-bottom: 1px solid var(--line); }
.press-list a { display: flex; align-items: center; gap: clamp(16px, 2.5vw, 32px); padding: 22px 0; text-decoration: none; }
.press-list img { width: clamp(72px, 9vw, 120px); aspect-ratio: 4 / 3; object-fit: cover; flex: none; background: var(--oxblood); }
.press-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.press-list a b { font: 400 clamp(1.35rem, 2.6vw, 2.1rem)/1.15 var(--serif); transform-origin: 0 60%; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.press-desc { color: var(--cream); opacity: .75; font-size: 1rem; }
.press-host { color: var(--lamp); white-space: nowrap; }
.press-list a:hover b { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .press-list a b { transition: none; } }
@media (max-width: 600px) { .press-list a { flex-wrap: wrap; } .press-host { width: 100%; } }
.empty { color: var(--lamp); opacity: .8; }

/* Gallery by series */
.series-block + .series-block { padding-top: 0; }
/* Jumping to a series (e.g. from an artwork's "From the series" link) lands its title below the pinned bar, same place every time. */
.series-title { scroll-margin-top: clamp(84px, 12vh, 112px); }
.series-title { font: 400 clamp(2rem, 5vw, 3.6rem)/1 var(--serif); letter-spacing: -.01em; margin-bottom: 14px; }
.series-desc { max-width: 42em; color: var(--cream); opacity: .85; margin-bottom: clamp(24px, 4vh, 40px); }
.series-desc p + p { margin-top: .8em; }
.from-series { margin-top: 14px; color: var(--lamp); }
.from-series a { color: var(--cream); text-transform: none; letter-spacing: 0; font: 400 1.05rem var(--serif); }

/* ---------- Single work ---------- */
/* The first picture, then the details and buy box, then the other pictures (on a phone the buy box isn't below them all).
   Side by side on a wide screen: the pictures on the left, the details beside them. */
.piece { display: grid; gap: clamp(28px, 5vw, 72px); padding: clamp(100px, 15vh, 140px) var(--gutter) 64px; grid-template-areas: "first" "info" "rest"; }
.piece > .media { grid-area: first; }
.piece > .media-rest { grid-area: rest; }
.piece > .info { grid-area: info; }
.piece:not(:has(.media-rest)) { grid-template-areas: "first" "info"; }
@media (min-width: 900px) {
  .piece { grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "first info" "rest info";
    row-gap: 20px; align-items: start; }
  .piece:not(:has(.media-rest)) { grid-template-areas: "first info" "first info"; }
}
.piece .media { display: flex; flex-direction: column; gap: 20px; }
.piece .media img, .piece .media video { width: 100%; height: auto; background: var(--oxblood); }
.piece .embed { position: relative; aspect-ratio: 16 / 9; background: var(--oxblood); }
.piece .embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (min-width: 900px) { .piece .info { position: sticky; top: 32px; } } /* beside the pictures as they scroll */
.piece h1 { font: 400 clamp(1.85rem, 3.6vw, 3.4rem)/1.05 var(--serif); letter-spacing: -.01em; } /* a title like “Have a seat at my table” fits one line on a phone */
.piece .meta { margin-top: 16px; color: var(--lamp); display: flex; flex-direction: column; gap: 8px; }
.piece .desc { margin-top: 28px; }
.piece .desc p + p { margin-top: 1em; }
.back { display: inline-block; margin-bottom: 26px; text-decoration: none; color: var(--lamp); }
.back:hover { color: var(--cream); }

/* ---------- Buying ---------- */
.buy { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); }
.options { border: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.options legend { margin-bottom: 12px; color: var(--lamp); }
.opt { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 14px 16px; border: 1px solid var(--line); cursor: pointer; }
.opt input { position: absolute; opacity: 0; }
.opt b { font: 400 1.15rem/1.2 var(--serif); }
.opt span { font: 400 13px/1 var(--mono); }
.opt:has(input:checked) { border-color: var(--cream); background: rgba(245,231,207,.06); }
.opt:has(input:checked):has(+ .opt-more) { border-bottom-color: transparent; transition: border-bottom-color .2s; }
.opt:has(input:disabled) { opacity: .4; cursor: not-allowed; }
.opt small { display: block; margin-top: 4px; color: var(--lamp); }
.opt small.opt-size { font-size: 10px; letter-spacing: .16em; margin-top: 5px; } /* a print's size, under what it is */
.opt .on-request { text-transform: uppercase; } /* "Price on request": the same type and colour as a price */
/* A print's details: closed under its option, sliding open (attached to it) while it's selected. */
.opt-more { display: grid; grid-template-rows: 0fr; opacity: 0; margin-top: -8px; /* no gap from its option */
  transition: grid-template-rows .45s cubic-bezier(.4, 0, .2, 1), opacity .35s ease; }
.opt-more > div { overflow: hidden; min-height: 0; }
.opt:has(input:checked) + .opt-more { grid-template-rows: 1fr; opacity: 1; }
.print-details { margin: 0; padding: 2px 16px 14px 32px; list-style: disc; border: 1px solid var(--cream); border-top: 0;
  background: rgba(245,231,207,.06); color: var(--lamp); font: 400 12px/1.5 var(--text); }
.print-details li + li { margin-top: 2px; }
.print-details li::marker { color: var(--lamp); }
@media (prefers-reduced-motion: reduce) { .opt-more { transition: none; } }
.qty[hidden] { display: none; }
.buy-row { display: flex; gap: 10px; margin-top: 16px; }
.qty { width: 74px; background: none; border: 1px solid var(--line); color: var(--cream); font: 400 15px var(--mono); text-align: center; }
.btn { flex: 1; display: inline-flex; justify-content: center; align-items: center; gap: 10px; padding: 16px 22px; border: 0; cursor: pointer;
  background: var(--amber); color: var(--espresso); font: 500 12px/1 var(--mono); letter-spacing: .24em; text-transform: uppercase; text-decoration: none; }
.btn:hover { background: var(--cream); }
.btn:disabled { opacity: .45; cursor: not-allowed; background: var(--amber); }
.buy .btn, .buy .btn:disabled, .cart [data-checkout] { background: var(--buy-bg, var(--amber)); color: var(--buy-ink, var(--espresso)); }
.buy .btn:hover:not(:disabled), .cart [data-checkout]:hover:not(:disabled) { background: var(--cream); color: var(--espresso); }
.btn.ghost { background: none; color: var(--cream); border: 1px solid var(--line); }
.btn.ghost:hover { border-color: var(--cream); color: var(--cream); }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 160%); z-index: 40; background: var(--cream); color: var(--espresso);
  width: max-content; max-width: calc(100vw - 32px); padding: 14px 18px; display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center;
  transition: transform .35s cubic-bezier(.2,.7,.2,1); font: 400 13px/1.4 var(--mono); box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.toast.show { transform: translate(-50%, 0); }
.toast a { font-weight: 500; white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; padding: 6px 0; }

/* ---------- Shop ---------- */
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: clamp(24px, 3vw, 44px) clamp(16px, 2.5vw, 36px); }
.shop-grid .work { margin: 0; }
.shop-grid .frame img { aspect-ratio: 4 / 5; object-fit: cover; }
.sold { position: absolute; top: 12px; left: 12px; padding: 6px 10px 5px; background: rgba(26, 10, 7, .86); color: var(--cream); } /* dark, so it reads on light paintings */

/* ---------- Cart ---------- */
.cart { max-width: 860px; }
.cart-lines { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.cart-line { display: grid; grid-template-columns: 84px 1fr auto; gap: 18px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); }
.cart-line img { width: 84px; height: 105px; object-fit: cover; background: var(--oxblood); }
.cart-line b { font: 400 1.25rem/1.2 var(--serif); display: block; }
.cart-line .opt-name { color: var(--lamp); margin-top: 6px; display: block; }
.cart-line .opt-size, .order-summary .opt-size { color: var(--lamp); margin-top: 4px; display: block; font-size: 10px; letter-spacing: .16em; }
.order-summary .opt-name { color: var(--lamp); margin-top: 4px; display: block; }
.cart-line .ctrl { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.cart-line .ctrl button { width: 30px; height: 30px; background: none; border: 1px solid var(--line); color: var(--cream); cursor: pointer; font: 400 14px var(--mono); }
.cart-line .ctrl .rm { width: auto; padding: 0 10px; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; }
.cart-line .price { font: 400 14px var(--mono); }
.cart-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
/* Shipping to: the address, then the live shipping choices for it. */
/* Folded into one line ("Shipping · Enter your address") until a suggestion or "Enter address manually" is chosen; then the rest slides open. */
.ship-address { padding: 12px 0; border-bottom: 1px solid var(--line); }
.ship-line { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ship-line > label { flex: none; cursor: text; }
.ship-line input { flex: 1; min-width: 0; max-width: 380px; box-sizing: border-box; background: none; color: var(--cream); border: 1px solid var(--line);
  padding: 9px 10px; font: 400 1rem var(--text); }
.ship-line input::placeholder { color: var(--lamp); opacity: .8; }
.ship-line input:focus { border-color: var(--lamp); outline: none; }
.ship-line input.invalid { border-color: var(--amber); }
.ship-line .address-list { left: auto; width: min(100%, 380px); }
.ship-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.ship-more > div { overflow: hidden; min-height: 0; padding: 0 2px; margin: 0 -2px; }
.ship-more.open { grid-template-rows: 1fr; }
.ship-more .ship-grid { padding-top: 12px; }
/* Open: "Shipping" above, the address box on its own line at full width (like the apartment line below it). */
.ship-address.open .ship-line { flex-wrap: wrap; row-gap: 8px; }
.ship-address.open .ship-line > label { flex-basis: 100%; }
.ship-address.open .ship-line input { flex-basis: 100%; max-width: none; }
.ship-address.open .ship-line .address-list { width: 100%; }
@media (prefers-reduced-motion: reduce) { .ship-more { transition: none; } }
@media (max-width: 520px) { .ship-line input { max-width: none; } .ship-line .address-list { width: 100%; } }
.ship-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.ship-grid .wide { grid-column: 1 / -1; }
.ship-grid label { display: grid; gap: 6px; min-width: 0; }
.ship-grid label[hidden] { display: none; }
.ship-grid .mono { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--lamp); }
.ship-grid input, .ship-grid select { width: 100%; box-sizing: border-box; background: none; color: var(--cream); border: 1px solid var(--line); padding: 10px; font: 400 1rem var(--text); }
.ship-grid select option { color: #1a0a07; }
@media (max-width: 520px) { .ship-grid { grid-template-columns: 1fr; } }
.ship-address [data-get-rates] { margin-top: 16px; }
/* Address suggestions under the street field (Google, through the site), and an address that wasn't found. */
.address-find { position: relative; }
.address-find label { display: grid; gap: 6px; }
.address-list { position: absolute; z-index: 5; left: 0; right: 0; top: 100%; margin: 2px 0 0; padding: 0; list-style: none; background: var(--espresso);
  border: 1px solid var(--lamp); max-height: 280px; overflow-y: auto; }
.address-list[hidden] { display: none; }
.address-list li { padding: 10px 12px; cursor: pointer; border-top: 1px solid var(--line); line-height: 1.35; }
.address-list li:first-child { border-top: 0; }
.address-list li span { color: var(--lamp); font-size: .9em; }
.address-list li.manual { font-size: 10px; letter-spacing: .18em; color: var(--lamp); }
.address-list li[aria-selected="true"], .address-list li:hover { background: rgba(242, 165, 58, .14); }
.ship-grid input.invalid { border-color: var(--amber); }
.address-problem { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--amber); }
.address-problem[hidden] { display: none; }
.address-problem p { margin: 0; } .address-problem p + p { margin-top: 10px; }
.address-problem .btn { margin-left: 8px; padding: 6px 12px; font-size: 11px; }
.link-button { background: none; border: 0; padding: 0; color: var(--cream); text-decoration: underline; cursor: pointer; font: inherit; }
.ship-options { border: 0; padding: 0; margin: 16px 0 0; }
.ship-options legend { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--lamp); margin-bottom: 8px; }
.ship-option { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px 10px; border: 1px solid var(--line); margin-top: -1px; cursor: pointer; }
.ship-option:has(input:checked) { border-color: var(--amber); }
/* The choice's own circle, in the site's colours (the browser's blue radio button doesn't belong here). */
.ship-option input { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin: 0; border: 1px solid var(--lamp); border-radius: 50%;
  display: grid; place-content: center; cursor: pointer; }
.ship-option input::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--amber); transform: scale(0); transition: transform .12s ease; }
.ship-option input:checked { border-color: var(--amber); }
.ship-option input:checked::before { transform: scale(1); }
.ship-option input:focus-visible { outline: 1px solid var(--cream); outline-offset: 3px; }
.ship-option:hover { border-color: var(--lamp); }
.ship-option:has(input:checked):hover { border-color: var(--amber); }
.ship-option b { font: 400 14px var(--mono); }
.cart [data-checkout]:disabled { opacity: .5; cursor: not-allowed; }
.policy p:has(> strong:only-child) { margin-top: 1.6em; font-family: var(--serif); font-size: 1.4em; }
.policy p:first-child { margin-top: 0; }
.cart-total { display: flex; justify-content: space-between; align-items: baseline; padding: 24px 0; }
.cart-total b { font: 400 2rem/1 var(--serif); }
.note { color: var(--lamp); margin-top: 14px; }
.final-note { margin-top: 6px; } .final-note a { color: inherit; }

/* ---------- About ---------- */
.about-grid { display: grid; gap: clamp(28px, 5vw, 72px); }
@media (min-width: 900px) { .about-grid.has-portrait { grid-template-columns: minmax(260px, 1fr) minmax(0, 1.4fr); align-items: start; } }
.about-grid img { width: 100%; height: auto; }
/* Larica's initials as a sign-off under the bio (Site Builder → About, on unless switched off; chosen 2026-11-02: solid,
   centred): a stencil filled with the text colour, like the handwritten name. */
.signoff { display: block; height: clamp(3.4rem, 6vw, 4.6rem); aspect-ratio: 1.252; margin: clamp(18px, 3vw, 28px) auto 0; background: currentColor;
  -webkit-mask: url(/assets/initials.png) no-repeat center / contain; mask: url(/assets/initials.png) no-repeat center / contain; }
.prose { max-width: 40em; font-size: clamp(1.15rem, 1.6vw, 1.35rem); }
.prose p + p { margin-top: 1.1em; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; gap: clamp(28px, 5vw, 72px); }
@media (min-width: 900px) { .contact-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); } }
.contact-ig { margin-top: 24px; }
/* On phones the footer's Instagram link sits just below, so the page doesn't repeat it. */
@media (max-width: 899px) { .contact-ig { display: none; } }
.form { display: flex; flex-direction: column; gap: 26px; max-width: 640px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { color: var(--lamp); }
.field input, .field textarea { background: none; border: 0; border-bottom: 1px solid var(--line); color: var(--cream); padding: 10px 0;
  font: 400 1.2rem/1.4 var(--text); border-radius: 0; }
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--cream); }
.field textarea { resize: vertical; min-height: 160px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.flash { padding: 16px 18px; border: 1px solid var(--cream); color: var(--cream); }
.flash.err { border-color: var(--vermilion); }

/* ---------- Footer ---------- */
/* Phones: a centred stack (Instagram, the policy links, then ©). Wider: © left, Instagram centred, policy links right. */
.site-foot { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px;
  padding: 28px var(--gutter) 32px; border-top: 1px solid var(--line); color: var(--lamp); }
.foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 24px; order: 1; }
.foot-policy { order: 2; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.foot-copy { order: 3; }
@media (min-width: 720px) {
  .site-foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 24px; text-align: left; }
  .foot-copy, .foot-links, .foot-policy { order: 0; }
  .foot-policy { justify-self: end; flex-direction: row; align-items: baseline; gap: 24px; text-align: right; }
}
.site-foot a { text-decoration: none; }
.site-foot a:hover { color: var(--cream); }

@media (prefers-reduced-motion: reduce) { .menu a, .toast, .work .frame img { transition: none; } html.from-menu main > *, html.from-menu .site-foot { animation: none; } }

/* Contact: Send waits for the spam check */
.form .btn:disabled { opacity: .45; cursor: default; }
[data-check-note] { display: block; margin-top: 10px; }

/* ---------- Newsletter band (above the footer, in the page's colour) ---------- */
.news-band { position: relative; z-index: 1; background: var(--band, var(--oxblood)); color: var(--band-ink, var(--cream)); padding: 16px var(--gutter); }
.news-form { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 22px; }
.news-form label { font: 400 1.05rem/1.3 var(--serif); }
.news-field { display: flex; align-items: stretch; border-bottom: 1px solid currentColor; }
.news-field input { background: none; border: 0; color: inherit; font: inherit; padding: 6px 2px; width: min(260px, 60vw); outline: none; }
.news-field input::placeholder { color: inherit; opacity: .6; }
.news-btn { background: none; border: 0; color: inherit; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; padding: 6px 2px 6px 14px; cursor: pointer; }
.news-btn:hover { opacity: .7; }
.news-btn:disabled { opacity: .4; cursor: default; }
.news-msg { flex-basis: 100%; text-align: center; font-size: 11px; letter-spacing: .1em; }
.news-done { text-align: center; font: 400 1.05rem/1.3 var(--serif); margin: 0; padding: 4px 0; }
body.home .news-band { border-bottom: 1px solid color-mix(in srgb, var(--band-ink) 14%, transparent); }

/* Certificate check: the page a Certificate of Authenticity's QR code opens */
.cert-check .cert-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 5vw, 64px); align-items: start; max-width: 1100px; }
.cert-check .cert-grid img { width: 100%; height: auto; display: block; }
.cert-check .cert-status { display: inline-block; padding: 6px 12px; border: 1px solid currentColor; margin-bottom: 18px; }
.cert-check .cert-status.ok { color: var(--lamp); }
.cert-check .cert-status.void { color: var(--vermilion); }
.cert-check .cert-lede { margin-bottom: 10px; }
.cert-check .cert-title { font: 400 clamp(1.8rem, 3.6vw, 2.8rem)/1.1 var(--serif); margin-bottom: 20px; }
.cert-check .cert-details { display: grid; grid-template-columns: auto 1fr; gap: 10px 20px; align-items: baseline; }
.cert-check .cert-details dt { opacity: .75; }
.cert-check .prose a { color: inherit; }
@media (max-width: 720px) { .cert-check .cert-grid { grid-template-columns: 1fr; } .cert-check .cert-details { grid-template-columns: 1fr; gap: 2px; } .cert-check .cert-details dd { margin-bottom: 10px; } }

/* Page not found */
.notfound .notfound-links { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 28px; }
.notfound .notfound-links a { color: inherit; }
.notfound .notfound-photo { display: block; margin-top: 40px; width: min(100%, 420px); height: auto; }

/* An invoice link that has expired, or "Send a new link" */
.invoice-notice .notice-title { font: 400 clamp(1.8rem, 4vw, 2.6rem)/1.1 var(--serif); margin-bottom: 18px; }
.invoice-notice form { margin-top: 24px; max-width: 320px; display: flex; }
.invoice-notice a { color: inherit; }

/* Discounts: "10% off" / "$5 off" in the top-right corner of a picture, in the same dark box as "Sold out" (top-left).
   And the usual price, struck through, before a sale price. */
.sale-tag { position: absolute; top: 12px; right: 12px; z-index: 2; padding: 6px 10px 5px; background: rgba(26, 10, 7, .86); color: var(--cream); pointer-events: none; }
.piece .media { position: relative; }
s.was { opacity: .55; text-decoration-thickness: 1px; margin-right: 2px; }
.cart-line .price { text-align: right; } /* prices line up on the right, with or without a discount note under them */
.cart-line .was-line { display: block; margin-top: 4px; font-size: 10px; letter-spacing: .12em; opacity: .7; }
.cart-line > div { min-width: 0; }
/* On a phone: the price goes under the name, and the buttons are big enough to tap. */
@media (max-width: 600px) {
  .cart-line { grid-template-columns: 64px minmax(0, 1fr); gap: 8px 14px; align-items: start; }
  .cart-line img { width: 64px; height: 80px; }
  .cart-line .price { grid-column: 2; text-align: left; }
  .cart-line .ctrl button { width: 40px; height: 40px; }
  .cart-line .ctrl .rm { padding: 0 14px; }
}
.sale-tag { white-space: nowrap; }

/* After paying: what was bought */
.order-summary { margin-top: 32px; border-top: 1px solid var(--line); }
.order-summary .cart-row { font: 400 13px/1.4 var(--mono); }
.order-summary .cart-row span:first-child { min-width: 0; }
.order-summary .cart-total b { font-size: 1.6rem; }

.field small.hint { display: block; margin-top: 8px; color: var(--lamp); opacity: .8; font-size: 10px; letter-spacing: .14em; }
/* An option's price: when the usual price and the sale price wrap onto two lines (phones), some air between them, lined up on the right. */
.opt > span:last-child { line-height: 1.75; text-align: right; }
.opt > span:last-child s.was { white-space: nowrap; }
/* Paying for shipping quoted after purchase (/pay-shipping/<token>): the order summary, then the button and a small note. */
.order-summary .paid-note { color: var(--lamp); letter-spacing: .16em; text-transform: uppercase; font-size: 10px; }
.pay-ship { margin: 8px 0 0; }
.pay-ship .btn { background: var(--buy-bg, var(--amber)); color: var(--buy-ink, var(--espresso)); }
.pay-ship .btn:hover { background: var(--cream); color: var(--espresso); }
.pay-ship-note { margin-top: 14px; opacity: .8; }
.pay-ship-error { color: var(--amber); }
/* A bundle special in the cart: its saving, in the lamp colour like other discounts; and the nudge towards one. */
.bundle-row span:last-child { color: var(--lamp); }
.bundle-nudge { color: var(--lamp); margin: 10px 0 0; }
.bundle-note { color: var(--lamp); margin: 10px 0 0; font-size: 11px; letter-spacing: .16em; }