/* Art gallery app: shared styles, dark redesign. Version 2026-10-04 b. */

/* The two typefaces travel in the zip. Nothing is fetched from a font service. */
@font-face {
  font-family: "Playfair Display"; src: url("/fonts/playfair.woff2") format("woff2");
  font-weight: 400 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "DM Sans"; src: url("/fonts/dm-sans.woff2") format("woff2");
  font-weight: 100 1000; font-style: normal; font-display: swap;
}

:root {
  color-scheme: dark;
  --wall: #0c0b10;          /* the gallery wall at night */
  --panel: #17151d;         /* raised surfaces, mats */
  --panel-2: #1e1b26;
  --bar: #121018;           /* tab bar and contact bar */
  --ink: #f4f1ea;
  --soft: #d9d5e0;
  --muted: #a8a3b3;
  --line: #2a2733;
  --line-strong: #3a3645;
  --accent: #ffc247;        /* everything that can be tapped or should stand out */
  --on-accent: #14110b;
  --sold: #ff6b57;
  --good: #5ed3b8;
  --wait: #ffc247;
  --bad: #ff8a78;
  --focus: #ffc247;
  --spot: radial-gradient(120% 70% at 50% 0%, rgba(255, 255, 255, .11), rgba(255, 255, 255, 0) 62%);
  --shadow: 0 22px 30px -14px rgba(0, 0, 0, .95), 0 2px 0 rgba(255, 255, 255, .06);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --display: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --tabs: 4.75rem;
}

* { box-sizing: border-box; }
/* All text is a step larger than a browser's default. */
html { -webkit-text-size-adjust: 100%; background: var(--wall); font-size: 106.25%; }

/* The colour sets the artist chooses between in Settings. Each pairs an
   accent with a wall tone that suits it. Gold, the first, is the :root above. */
:root[data-theme="coral"] {
  --accent: #ff7a59; --focus: #ff7a59; --wait: #ffb38f;
  --sold: #c2bccb;   /* coral would be lost beside a coral accent */
}
:root[data-theme="turquoise"] {
  --wall: #080e14; --panel: #111b24; --panel-2: #16232e; --bar: #0c151d; --line: #1f2f3b; --line-strong: #30475a;
  --muted: #9fb1bf; --soft: #d3dde4;
  --accent: #3ddbc8; --focus: #3ddbc8; --wait: #9be9df;
}
:root[data-theme="lilac"] {
  --wall: #0e0a14; --panel: #1a1424; --panel-2: #221a2e; --bar: #130e1b; --line: #2c2338; --line-strong: #43355a;
  --muted: #ada2ba; --soft: #dcd4e6;
  --accent: #c9a7ff; --focus: #c9a7ff; --wait: #e0ccff;
}
:root[data-theme="leaf"] {
  --wall: #0a100c; --panel: #131c16; --panel-2: #19241d; --bar: #0e1611; --line: #223028; --line-strong: #35493c;
  --muted: #a3b3a8; --soft: #d5e0d8;
  --accent: #a8e063; --focus: #a8e063; --wait: #cdefa3;
}
:root[data-theme="rose"] {
  --wall: #120a0e; --panel: #1e131a; --panel-2: #271923; --bar: #170d13; --line: #33212b; --line-strong: #4d3240;
  --muted: #b9a5af; --soft: #e5d6dd;
  --accent: #ff8fb3; --focus: #ff8fb3; --wait: #ffc2d6;
  --sold: #c2bccb;   /* coral would be too close to a rose accent */
}
body {
  margin: 0;
  background: var(--wall);
  color: var(--ink);
  font: 1rem/1.55 var(--sans);
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 2.5rem);
  animation: fade .5s var(--ease) both;
}
body.has-tabs { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--tabs) + 1.5rem); }
body.has-contact { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 6.5rem); }
.wrap { max-width: 44rem; margin: 0 auto; padding: 1.25rem 1.25rem 0; }
.wrap.narrow { max-width: 34rem; }

[hidden] { display: none !important; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: -999rem; top: 0; z-index: 50;
  background: var(--accent); color: var(--on-accent); font-weight: 700;
  padding: .7rem 1rem; border-radius: 0 0 .8rem 0;
}
.skip:focus { left: 0; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
[tabindex="-1"]:focus { outline: none; }

a { color: var(--accent); text-underline-offset: .18em; }
p { margin: 0 0 1rem; }
.muted { color: var(--muted); }

h1 {
  margin: 0 0 .75rem;
  font: 700 clamp(2rem, 8.5vw, 2.9rem)/1.08 var(--display);
  letter-spacing: 0; overflow-wrap: anywhere; text-wrap: balance;
}
h2 { margin: 2rem 0 .75rem; font: 700 1.25rem/1.2 var(--display); }
.name { margin: 0 0 2rem; }
.lead { margin: 0 0 2rem; max-width: 34rem; color: var(--muted); }

footer { margin-top: 3rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: 1rem; font-size: .9rem; }
footer p { margin: 0; }
footer a { color: var(--muted); }

/* ----- Motion. All of it stops for anyone whose phone asks for less. ----- */
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes drift { from { transform: scale(1.02); } to { transform: scale(1.16) translate(-2%, -2.5%); } }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(20, 17, 11, .55); } 60% { box-shadow: 0 0 0 7px rgba(20, 17, 11, 0); } }
@keyframes sheen { 0%, 70% { transform: translateX(-140%) skewX(-18deg); } 100% { transform: translateX(340%) skewX(-18deg); } }
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
/* Motion, three ways.
   Full: the default. Everything above moves.
   Gentle: for a phone set to "reduce motion". The small effects stay (the
     light across a button, the pulse, fades) but nothing zooms or slides.
   Off: chosen with the Pause motion button at the foot of each page, which
     anyone can use and which is remembered on their phone. Turning motion
     back on from there gives the full version, whatever the phone says. */
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="on"]) .hero-media img { animation: none; }
  :root:not([data-motion="on"]) .reveal { transform: none; }
  :root:not([data-motion="on"]) .hero-body,
  :root:not([data-motion="on"]) .slide img,
  :root:not([data-motion="on"]) .toast { animation-name: fade; }
  :root:not([data-motion="on"]) * { scroll-behavior: auto !important; }
}
:root[data-motion="off"] *, :root[data-motion="off"] *::before, :root[data-motion="off"] *::after {
  animation: none !important; transition: none !important; scroll-behavior: auto !important;
}
:root[data-motion="off"] .reveal { opacity: 1; transform: none; }

/* ----- Icons ----- */
.icon { display: inline-flex; flex: none; }
.icon svg { display: block; }

/* ----- Buttons ----- */
.button, button {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font: inherit; font-weight: 700; text-decoration: none; text-align: center;
  min-height: 3.1rem; padding: .7rem 1.35rem;
  color: var(--on-accent); background: var(--accent);
  border: 1.5px solid var(--accent); border-radius: 999px; cursor: pointer;
  transition: transform .15s var(--ease), background .2s, color .2s, border-color .2s;
}
.button:active, button:active { transform: scale(.97); }
button.quiet, .button.quiet { color: var(--ink); background: transparent; border-color: var(--line-strong); }
button.small, .button.small { min-height: 2.75rem; padding: .45rem 1rem; font-size: .92rem; }
button[disabled] { opacity: .5; cursor: default; }
.row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin: 0 0 1rem; }
.row.tight { gap: .5rem; margin: .6rem 0 .5rem; }

/* The main call to action catches the light now and then. */
.cta { position: relative; overflow: hidden; }
.cta::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 34%;
  background: rgba(255, 255, 255, .45); animation: sheen 4.5s ease-in-out infinite; pointer-events: none;
}

/* ----- Badges: words plus shape, never colour alone ----- */
.badge {
  display: inline-flex; align-items: center; gap: .4rem;
  margin: 0; padding: .3rem .75rem; border-radius: 999px;
  font-size: .82rem; font-weight: 700; line-height: 1.3; letter-spacing: .01em;
}
.badge.featured { background: var(--accent); color: var(--on-accent); }
.badge.featured .dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--on-accent); animation: pulse 2.2s ease-out infinite; }
.badge.reserved, .badge.available { background: var(--wall); color: var(--accent); border: 1.5px solid var(--accent); }
.badge.sold { background: var(--sold); color: var(--on-accent); }

/* ----- Notices ----- */
.notice {
  margin: 0 0 1.5rem; padding: 1rem 1.1rem;
  background: var(--panel); border: 1px solid var(--line-strong);
  border-left: .3rem solid var(--bad); border-radius: .9rem;
}
.notice.good { border-left-color: var(--good); }
.notice.wait { border-left-color: var(--wait); }
.notice p { margin: 0; }
.notice p + p { margin-top: .5rem; }
.notice ul { margin: .5rem 0 0; padding-left: 1.2rem; }

/* ----- Brand ----- */
.brand { display: flex; align-items: center; gap: .65rem; margin: 0; font: 700 1.2rem/1.2 var(--display); letter-spacing: 0; color: var(--ink); text-decoration: none; }
.mark {
  width: 2.15rem; height: 2.15rem; flex: none; border-radius: .65rem;
  background: var(--accent); color: var(--on-accent);
  display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
}
.mark img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mark.has-logo { background: #ffffff; }

/* ----- Gallery head: plain, or a featured piece filling the top ----- */
.head { max-width: 44rem; margin: 0 auto; padding: 1.1rem 1.25rem 0; }
.head.has-hero {
  position: relative; overflow: hidden; padding: 0;
  height: clamp(27rem, 68vh, 36rem);
  border-radius: 0 0 1.75rem 1.75rem;
  display: flex; flex-direction: column; justify-content: space-between;
}
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; animation: drift 16s ease-in-out infinite alternate; }
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  /* Dark enough behind the gallery name and the title that both stay
     readable even when the featured painting is very pale. */
  background: linear-gradient(180deg, rgba(12, 11, 16, .86) 0%, rgba(12, 11, 16, .62) 11%, rgba(12, 11, 16, 0) 27%, rgba(12, 11, 16, 0) 36%, rgba(12, 11, 16, .74) 58%, rgba(12, 11, 16, .96) 100%);
}
.head.has-hero .brand { position: relative; padding: 1.1rem 1.25rem; }
.hero-body {
  position: relative; padding: 0 1.25rem 1.6rem;
  display: flex; flex-direction: column; gap: .75rem; align-items: flex-start;
  animation: rise .9s var(--ease) both; animation-delay: .15s;
}
.hero-body h2 { margin: 0; font: 700 clamp(2rem, 9.5vw, 2.9rem)/1.06 var(--display); letter-spacing: 0; text-wrap: balance; overflow-wrap: anywhere; }
.hero-price { margin: 0; font-weight: 500; }

/* ----- Gallery switches ----- */
.wall-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0 0 1rem; }
.seg { display: inline-flex; gap: .25rem; padding: .25rem; border-radius: .9rem; background: var(--panel); }
.seg button {
  width: 2.75rem; min-height: 2.75rem; padding: 0; border: 0; border-radius: .65rem;
  background: transparent; color: var(--muted);
}
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.toggle {
  min-height: 3.25rem; padding: 0 1rem; border-radius: .9rem;
  background: transparent; color: var(--ink); border: 1.5px solid var(--line-strong); font-weight: 600; font-size: .92rem;
}
.toggle[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.count { margin: 0 0 0 auto; font-size: .85rem; color: var(--muted); }

/* ----- The wall ----- */
.wall {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1.4rem .9rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 40rem) { .wall { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tile a { display: block; color: inherit; text-decoration: none; }
.tile.wide { grid-column: 1 / -1; }
.mat {
  display: block; position: relative;
  aspect-ratio: 4 / 5; border-radius: 1rem;
  background: var(--spot), var(--panel);
  transition: transform .35s var(--ease);
}
.tile.wide .mat { aspect-ratio: 7 / 5; }
.tile a:hover .mat, .tile a:focus-visible .mat { transform: translateY(-4px); }
.tile a:active .mat { transform: scale(.98); }
/* The picture sits whole inside the mat, never cropped. */
.mat-inner { position: absolute; inset: 9%; display: flex; align-items: center; justify-content: center; }
.mat-inner img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; box-shadow: var(--shadow); }
.mat .badge { position: absolute; top: .6rem; left: .6rem; }
.tile-title { display: block; margin: .65rem 0 0; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.tile-price { display: block; color: var(--muted); font-size: .88rem; }
.tile-status { display: block; font-weight: 700; font-size: .88rem; color: var(--sold); }
.wall.single { grid-template-columns: minmax(0, 1fr); max-width: 40rem; gap: 2.2rem; }
.wall.single .mat, .wall.single .tile.wide .mat { aspect-ratio: auto; }
.wall.single .mat-inner { position: static; padding: 7%; }
.wall.single .mat-inner img { max-height: none; }

/* ----- Commission block ----- */
.commission-card {
  margin: 2.2rem 0 0; padding: 1.5rem 1.4rem 1.4rem; border-radius: 1.4rem;
  background: var(--accent); color: var(--on-accent);
  display: flex; flex-direction: column; gap: .85rem; align-items: flex-start;
}
.commission-card .mark { background: var(--on-accent); color: var(--accent); width: 2.75rem; height: 2.75rem; border-radius: .9rem; }
.commission-card h2 { margin: 0; font: 700 1.6rem/1.12 var(--display); }
.commission-card p { margin: 0; font-weight: 500; }
.commission-card .button { background: var(--on-accent); color: var(--ink); border-color: var(--on-accent); }

/* ----- Tab bar ----- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  background: var(--bar); border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.tabbar ul {
  list-style: none; margin: 0 auto; padding: 0 .5rem; max-width: 44rem; height: var(--tabs);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center;
}
.tabbar a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem;
  min-height: 3.5rem; color: var(--muted); text-decoration: none; font-size: .75rem; font-weight: 600; text-align: center;
  transition: color .2s, transform .15s var(--ease);
}
.tabbar a:active { transform: scale(.94); }
.tabbar a[aria-current="page"] { color: var(--accent); font-weight: 700; }

/* ----- Piece page: stage, photos, facts ----- */
.stage {
  position: relative; max-width: 44rem; margin: 0 auto;
  background: var(--spot), #14121a;
  border-radius: 0 0 1.75rem 1.75rem; overflow: hidden;
}
/* Sideways areas are swiped; no scroll bar is drawn. */
.no-bar { scrollbar-width: none; -ms-overflow-style: none; }
.no-bar::-webkit-scrollbar { display: none; width: 0; height: 0; }
.slides {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  height: clamp(22rem, 60vh, 32rem);
}
.slide {
  flex: 0 0 100%; scroll-snap-align: center; margin: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 4.2rem 2.2rem 2.6rem;
}
.slide img {
  display: block; max-width: 100%; max-height: 100%; width: auto; height: auto;
  box-shadow: var(--shadow); cursor: zoom-in; animation: rise .8s var(--ease) both;
}
.fab {
  position: absolute; top: 1rem; z-index: 2;
  width: 2.9rem; min-height: 2.9rem; padding: 0; border-radius: 50%;
  background: rgba(12, 11, 16, .72); color: var(--ink); border: 1px solid var(--line-strong);
  display: inline-flex; align-items: center; justify-content: center;
}
.fab.back { left: 1rem; }
.fab.full { right: 1rem; }
.dots { position: absolute; left: 0; right: 0; bottom: 1rem; display: flex; justify-content: center; gap: .45rem; }
.dots span { width: .45rem; height: .45rem; border-radius: 999px; background: #4a4556; transition: width .3s var(--ease), background .3s; }
.dots span.on { width: 1.4rem; background: var(--accent); }
.thumbs { display: flex; gap: .6rem; margin: 0 0 1.1rem; }
.thumbs button {
  width: 4rem; min-height: 4rem; height: 4rem; padding: 0; border-radius: .75rem; overflow: hidden;
  background: var(--panel); border: 2px solid transparent;
}
.thumbs button[aria-current="true"] { border-color: var(--accent); }
.thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.piece-title { margin: .7rem 0 .5rem; }
.price { margin: 0 0 1.1rem; display: flex; align-items: baseline; flex-wrap: wrap; gap: .6rem; font-size: 1.5rem; font-weight: 700; }
.price small { font-size: .95rem; font-weight: 400; color: var(--muted); }
.chips { list-style: none; margin: 0 0 1.1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.chips li { display: flex; align-items: center; gap: .6rem; padding: .6rem .9rem .6rem .75rem; border-radius: .9rem; background: var(--panel); font-weight: 600; font-size: .9rem; }
.chips .icon { color: var(--accent); }
.chips small { display: block; font-weight: 400; font-size: .78rem; color: var(--muted); }
.description { max-width: 34rem; white-space: pre-line; color: var(--soft); }
.card { margin: 1.5rem 0 0; padding: 1.1rem 1.15rem; border-radius: 1.1rem; background: var(--panel); }
.card h2 { margin: 0 0 .4rem; }
.card p { margin: 0 0 .4rem; }
.arrow-link { display: inline-flex; align-items: center; gap: .35rem; min-height: 2.75rem; font-weight: 700; text-decoration: none; }

/* More pieces: swiped sideways, or stepped with the two arrow buttons. */
.more { margin: 2rem -1.25rem 0 0; }
.more-head { display: flex; align-items: center; gap: .5rem; padding-right: 1.25rem; margin: 0 0 .9rem; }
.more-head h2 { margin: 0 auto 0 0; }
.more-head button { width: 2.75rem; min-height: 2.75rem; padding: 0; }
.scroller {
  list-style: none; margin: 0; padding: 0 1.25rem .5rem 0;
  display: flex; gap: .75rem; overflow-x: auto;
  scroll-snap-type: x proximity; scroll-behavior: smooth;
}
.scroller li { flex: 0 0 9.4rem; scroll-snap-align: start; }
.scroller a { display: block; color: inherit; text-decoration: none; }
.scroller .mat { aspect-ratio: 4 / 5; border-radius: .9rem; }

/* The contact bar stays at the bottom of the screen. */
.contactbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  background: var(--bar); border-top: 1px solid var(--line);
  padding: .8rem 1rem calc(env(safe-area-inset-bottom, 0px) + .9rem);
}
.contactbar > div { max-width: 42rem; margin: 0 auto; display: flex; gap: .6rem; align-items: center; }
.contactbar .button, .contactbar button { border-radius: 1rem; min-height: 3.25rem; }
.contactbar .primary { flex: 1 1 auto; }
.contactbar .round { width: 3.25rem; padding: 0; flex: none; background: transparent; color: var(--ink); border-color: var(--line-strong); }

/* Pop-up confirmations */
.toast {
  position: fixed; left: 1rem; right: 1rem; bottom: calc(env(safe-area-inset-bottom, 0px) + 6.2rem); z-index: 30;
  max-width: 30rem; margin: 0 auto; padding: .85rem 1rem; border-radius: 1rem;
  background: var(--ink); color: var(--on-accent); font-weight: 600; font-size: .92rem; line-height: 1.35;
  display: flex; align-items: center; gap: .65rem;
  box-shadow: 0 18px 40px -10px rgba(0, 0, 0, .9);
  animation: rise .35s var(--ease) both;
}
.toast .mark { width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--on-accent); color: var(--accent); }

/* ----- Full-screen viewer ----- */
.zoomable { cursor: zoom-in; }
.viewer {
  width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: #060509; color: var(--ink);
}
.viewer[open] { display: flex; flex-direction: column; }
.viewer::backdrop { background: #060509; }
.viewer-bar {
  display: flex; gap: .5rem; justify-content: flex-end; align-items: center;
  padding: calc(env(safe-area-inset-top, 0px) + .6rem) .75rem .6rem;
}
.viewer-stage {
  flex: 1 1 auto; min-height: 0; overflow: auto;
  display: flex; align-items: center; justify-content: center;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.viewer-stage img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; }
.viewer-stage.zoomed { display: block; }
.viewer-stage.zoomed img { max-width: none; max-height: none; height: auto; }

/* ----- How to pay, About ----- */
.pagehead { margin: 0 0 1.5rem; }
.method { margin: 0 0 1rem; padding: 1.2rem 1.15rem; border-radius: 1.1rem; background: var(--spot), var(--panel); }
.method h2 { margin: 0 0 .9rem; display: flex; align-items: center; gap: .6rem; }
.method h2 .icon { color: var(--accent); }
.method p { margin: 0 0 .6rem; }
.qr { display: block; width: 100%; max-width: 16rem; height: auto; background: #ffffff; padding: .7rem; border-radius: .9rem; margin: .4rem 0 .7rem; }
.portrait { margin: 0 0 1.4rem; border-radius: 1.2rem; overflow: hidden; background: var(--spot), var(--panel); }
.portrait img { display: block; width: 100%; height: auto; }

/* ----- Connection check ----- */
.parts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.part { display: grid; grid-template-columns: 1.5rem 1fr; column-gap: .75rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.part svg { width: 1.25rem; height: 1.25rem; margin-top: .2rem; }
.part-name { margin: 0; font-weight: 600; }
.part-state { font-weight: 700; }
.part-note { margin: .15rem 0 0; color: var(--muted); }
.part[data-state="ok"]   .part-state, .part[data-state="ok"]   svg { color: var(--good); }
.part[data-state="wait"] .part-state, .part[data-state="wait"] svg { color: var(--wait); }
.part[data-state="bad"]  .part-state, .part[data-state="bad"]  svg { color: var(--bad); }
.part[data-state="busy"] .part-state, .part[data-state="busy"] svg { color: var(--muted); }
.part button { margin-top: .6rem; }
.summary { margin: 1.25rem 0 0; font-weight: 700; }
.translated { margin: .6rem 0 0; padding: 0; list-style: none; }
.translated span { color: var(--muted); }
.grid { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 1.25rem 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 40rem) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.grid img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: .75rem; }
.grid h3 { margin: .6rem 0 0; font: 600 1rem/1.3 var(--sans); }
.grid p { margin: .1rem 0 0; color: var(--muted); }

/* ----- Editor ----- */
.settings { list-style: none; margin: 0 0 1rem; padding: 0; border-top: 1px solid var(--line); }
.settings li { display: grid; grid-template-columns: 1.5rem 1fr; column-gap: .75rem; padding: .8rem 0; border-bottom: 1px solid var(--line); }
.settings svg { width: 1.25rem; height: 1.25rem; margin-top: .2rem; }
.settings code { font: 600 .95rem/1.4 var(--mono); overflow-wrap: anywhere; }
.settings .state { font-weight: 700; }
.settings li[data-state="ok"] .state, .settings li[data-state="ok"] svg { color: var(--good); }
.settings li[data-state="wait"] .state, .settings li[data-state="wait"] svg { color: var(--wait); }
.address { display: block; margin: 0 0 .6rem; padding: .7rem .8rem; background: var(--panel); border: 1px solid var(--line-strong); border-radius: .75rem; font: .95rem/1.4 var(--mono); overflow-wrap: anywhere; }
.copied { color: var(--good); font-weight: 600; }
details { margin: 1.5rem 0 0; border-top: 1px solid var(--line); padding-top: 1rem; }
summary { cursor: pointer; font-weight: 600; min-height: 2.75rem; display: flex; align-items: center; }

.signed { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; margin: 0 0 1.5rem; padding: 0 0 1rem; border-bottom: 1px solid var(--line); }
.signed p { margin: 0; overflow-wrap: anywhere; }

.rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.rows li { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: .9rem; align-items: start; padding: .9rem; border-radius: 1.1rem; background: var(--panel); }
.rows img, .rows .no-photo { width: 4.5rem; height: 4.5rem; object-fit: cover; display: block; border-radius: .75rem; background: var(--panel-2); }
.rows .row-title { font-weight: 700; overflow-wrap: anywhere; }
.rows .row-sub { color: var(--muted); font-size: .9rem; }
.row-links { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.row-links a { display: inline-block; padding: .35rem 0; }
a.attention { font-weight: 700; }
.tag { display: inline-block; margin-left: .4rem; padding: .05rem .5rem; border-radius: 999px; border: 1.5px solid var(--muted); color: var(--muted); font-size: .75rem; font-weight: 700; vertical-align: .1em; }

.field { margin: 0 0 1.4rem; }
.field label, legend { display: block; font-weight: 600; margin: 0 0 .3rem; padding: 0; }
.hint { display: block; color: var(--muted); margin: 0 0 .4rem; font-size: .92rem; }
.field-error { display: block; color: var(--bad); font-weight: 700; margin: .35rem 0 0; }
input[type="text"], input[type="number"], textarea, select {
  width: 100%; font: inherit; color: var(--ink);
  min-height: 3.1rem; padding: .65rem .85rem;
  background: var(--panel); border: 1.5px solid var(--line-strong); border-radius: .9rem;
}
input[type="text"]:focus, textarea:focus, select:focus { border-color: var(--accent); }
::placeholder { color: #8a8596; }
textarea { min-height: 7rem; resize: vertical; }
[aria-invalid="true"] { border-color: var(--bad); border-width: 2px; }
fieldset { border: 0; margin: 0 0 1.4rem; padding: 0; min-width: 0; }
.cols { display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols label { font-weight: 400; color: var(--muted); }
.cols .wide { grid-column: 1 / -1; }
.status-select { margin-top: .5rem; max-width: 12rem; min-height: 2.75rem; padding: .4rem .7rem; }

.photo-slots { list-style: none; margin: 0 0 .75rem; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.photo-slots li { display: grid; grid-template-columns: 5.5rem 1fr; gap: .9rem; padding: .8rem; border-radius: 1rem; background: var(--panel); }
.photo-slots img { width: 5.5rem; height: 5.5rem; object-fit: cover; display: block; border-radius: .7rem; background: var(--panel-2); }
.photo-slots .slot-name { font-weight: 700; margin: 0 0 .4rem; }
.photo-slots label { font-weight: 400; color: var(--muted); }
.photo-slots button { margin-top: .6rem; }
.file-pick { position: relative; display: inline-block; }
.file-pick input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.file-pick input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 3px; }
.file-pick span {
  display: inline-flex; align-items: center; font-weight: 700;
  min-height: 3.1rem; padding: .7rem 1.35rem;
  color: var(--ink); border: 1.5px solid var(--line-strong); border-radius: 999px;
}
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 2rem 0 1rem; }
.actions button, .actions .button { flex: 1 1 10rem; }

.image-field { margin: 0 0 1.4rem; }
.image-label { font-weight: 600; margin: 0 0 .3rem; }
.image-preview { display: block; max-width: 12rem; max-height: 12rem; width: auto; height: auto; margin: 0 0 .75rem; padding: .4rem; background: #ffffff; border-radius: .75rem; }
.choice { margin: 1rem 0; }
.choice label { display: flex; align-items: center; gap: .6rem; min-height: 2.75rem; font-weight: 400; color: var(--ink); }
.choice input[type="radio"] { width: 1.3rem; height: 1.3rem; margin: 0; accent-color: var(--accent); }
.backup-files { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.backup-files li { margin: 0 0 .75rem; overflow-wrap: anywhere; }

.tr-item { margin: 0 0 1.25rem; padding: 1.1rem; border-radius: 1.1rem; background: var(--panel); }
.tr-item h2 { margin-top: 0; }
.tr-item input, .tr-item textarea { background: var(--wall); }
.tr-lang { margin: 0 0 .3rem; font-weight: 600; }
.tr-english { margin: 0 0 1.2rem; padding: .7rem .8rem; white-space: pre-line; background: var(--wall); border: 1px solid var(--line); border-radius: .75rem; color: var(--soft); }
.tr-state { margin: .35rem 0 0; }
.tr-state[data-state="stale"], .tr-state[data-state="missing"], .tr-state[data-state="outdated"] { color: var(--wait); font-weight: 700; }

/* ----- Prices: the amount leads, the currency code sits smaller beside it ----- */
.cur { font-size: .68em; font-weight: 600; letter-spacing: .05em; }
.price-alt { white-space: nowrap; }

/* ----- Settings: choosing the gallery's colour ----- */
.swatches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin: .4rem 0 0; }
.swatches label {
  display: flex; align-items: center; gap: .7rem; min-height: 3.4rem; padding: .5rem .8rem;
  border-radius: .9rem; border: 1.5px solid var(--line-strong); background: var(--panel);
  font-weight: 600; color: var(--ink); cursor: pointer;
}
.swatches input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.swatches .dot { flex: none; width: 1.7rem; height: 1.7rem; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .25); }
.swatches label:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.swatches label:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.swatches .picked { margin-left: auto; display: none; }
.swatches label:has(input:checked) .picked { display: inline-flex; }

/* =====================================================================
   Version k: squarer corners, slimmer buttons, and titles and prices
   given more presence.
   ===================================================================== */

/* ----- Corners and button height ----- */
.button, button, .file-pick span { border-radius: .3rem; min-height: 2.6rem; padding: .4rem 1.1rem; }
button.small, .button.small { min-height: 2.6rem; padding: .3rem .85rem; }
.contactbar .button, .contactbar button { border-radius: .3rem; min-height: 2.8rem; }
.badge, .tag { border-radius: .2rem; }
.seg { border-radius: .35rem; padding: .15rem; gap: .15rem; }
.seg button { border-radius: .25rem; width: 2.6rem; min-height: 2.6rem; }
.toggle { border-radius: .3rem; min-height: 2.9rem; }
.round-btn, .more-head button, .viewer-bar button { border-radius: .3rem; width: 2.6rem; min-height: 2.6rem; }
.thumbs button { border-radius: .3rem; }
.chips li { border-radius: .3rem; }
.commission-card .mark { border-radius: .3rem; }
.toast { border-radius: .4rem; }
.toast .mark { border-radius: .2rem; }
.mat, .scroller .mat { border-radius: .4rem; }
.card, .method, .rows li, .tr-item, .photo-slots li, .commission-card, .portrait, .notice, .demo-box { border-radius: .5rem; }
.head.has-hero, .stage { border-radius: 0 0 .6rem .6rem; }
.mark { border-radius: .3rem; }
.rows img, .rows .no-photo, .photo-slots img, .grid img, .image-preview, .qr, .address, .tr-english { border-radius: .3rem; }
input[type="text"], input[type="number"], textarea, select { border-radius: .35rem; min-height: 2.8rem; padding: .5rem .8rem; }
.swatches label { border-radius: .35rem; min-height: 3rem; }

/* ----- Titles and prices ----- */
/* On the wall: the title in the display lettering, then the price on its
   own ruled line, the local amount leading and the US amount beside it. */
.tile-title { margin: .75rem 0 0; font: 600 1.1rem/1.25 var(--display); letter-spacing: .005em; }
.tile-price {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: .1rem .55rem;
  margin: .4rem 0 0; padding: .4rem 0 0; border-top: 1px solid var(--line-strong);
  color: var(--ink); font-size: .98rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.price-pair { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: .1rem .55rem; }
.price-alt { color: var(--muted); font-weight: 500; font-size: .86em; white-space: nowrap; }
.cur { font: 600 .62em/1 var(--sans); letter-spacing: .1em; color: var(--muted); margin-right: .15em; }
.tile-status { margin: .4rem 0 0; padding: .4rem 0 0; border-top: 1px solid var(--line-strong); font-size: .9rem; letter-spacing: .04em; }
.scroller .tile-title { font-size: 1rem; }

/* On the featured piece. */
.hero-price { font: 700 1.3rem/1.2 var(--display); font-variant-numeric: tabular-nums; }
.hero-price .price-alt { font: 500 .95rem/1.2 var(--sans); color: #cfcad8; }
.hero-price .cur { color: #cfcad8; }

/* On a piece's own page: the price set large between two fine rules. */
.price {
  margin: .9rem 0 1.2rem; padding: .85rem 0; gap: .2rem 1rem;
  border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong);
  font: 700 2.15rem/1 var(--display); font-variant-numeric: tabular-nums;
}
.price .cur { font-size: .36em; letter-spacing: .14em; margin-right: .35em; vertical-align: .55em; }
.price small { margin-left: auto; font: 500 1.05rem/1 var(--sans); color: var(--muted); }
.price small .cur { font-size: .72em; vertical-align: baseline; }

/* ----- Pause motion, at the foot of each page ----- */
.motion-line { margin: 2.2rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--line); }
footer .motion-line, footer + .motion-line { margin-top: 1rem; border-top: 0; padding-top: 0; }
.linkish {
  min-height: 2.6rem; padding: 0; border: 0; border-radius: .2rem; background: transparent;
  color: var(--muted); font-weight: 600; font-size: .9rem; text-decoration: underline; text-underline-offset: .18em;
}

/* The contact bar's main button keeps its words on one line. */
.contactbar .primary { white-space: nowrap; min-width: 0; padding: .4rem .7rem; font-size: .95rem; gap: .45rem; }
.contactbar .round { width: 2.8rem; }
.contactbar > div { gap: .5rem; }

/* ----- Privacy note, and the line at the foot of visitors' pages ----- */
.prose p { max-width: 34rem; color: var(--soft); }
.prose h2 { margin-top: 1.8rem; }
.motion-line { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; align-items: center; }
a.linkish { display: inline-flex; align-items: center; }

.head.has-hero .brand, .hero-body h2, .hero-price { text-shadow: 0 1px 14px rgba(12, 11, 16, .75); }

/* ----- Version n: less to read ----- */
/* A long title on the wall is cut with an ellipsis, never wrapped. The
   full title is still what read-aloud speaks, and is on the piece's page. */
.tile a { min-width: 0; }
.tile-title, .scroller .tile-title {
  font-size: .98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.scroller .tile-title { font-size: .92rem; }
.wall.single .tile-title { font-size: 1.1rem; }
.card h2 { margin-bottom: .25rem; }

/* =====================================================================
   Version 2026-10-04 b: the editor's forms, made compact for a phone.
   Each label sits to the left of its field on one row, guidance is set
   small beneath the field, and nothing is taller than it needs to be.
   ===================================================================== */

.field.inline {
  display: grid; grid-template-columns: 5.4rem minmax(0, 1fr); column-gap: .7rem;
  align-items: center; margin: 0 0 .65rem;
}
.field.inline.top { align-items: start; }
.field.inline > label, .field.inline > .label {
  display: block; margin: 0; font-weight: 700; font-size: .9rem; line-height: 1.2; overflow-wrap: anywhere;
}
.field.inline.top > label, .field.inline.top > .label { padding-top: .75rem; }
.field.inline small, h2 small { display: block; font: 400 .7rem/1.3 var(--sans); color: var(--muted); letter-spacing: .02em; }
h2 small { display: inline; margin-left: .4rem; }
.control { min-width: 0; }
/* A row whose control has guidance under it lines its label up with the field, not the pair. */
.field.inline:has(.control > .hint:not([hidden])), .field.inline:has(.size-row) { align-items: start; }
.field.inline:has(.control > .hint:not([hidden])) > label,
.field.inline:has(.control > .hint:not([hidden])) > .label { padding-top: .75rem; }
.field.inline:has(.size-row) > .label { padding-top: 1.75rem; }

/* Guidance: small, and under the field it explains. */
.hint { display: block; margin: .25rem 0 0; font-size: .74rem; line-height: 1.35; color: var(--muted); }
p.hint { margin: .25rem 0 0; }
p.hint:empty { display: none; }
.field-error { font-size: .8rem; margin-top: .25rem; }

/* Fields: slimmer. */
input[type="text"], input[type="number"], textarea, select { min-height: 2.6rem; padding: .4rem .65rem; font-size: .95rem; }
textarea { min-height: 4.6rem; overflow: hidden; }
select { padding-right: 1.6rem; }

/* Size: width, height, depth and unit on one row, each with a small caption. */
.size-row { display: grid; grid-template-columns: 1fr 1fr 1fr 4.3rem; gap: .35rem; }
.size-row label { display: block; margin: 0 0 .1rem; font: 400 .7rem/1.3 var(--sans); color: var(--muted); }
.size-row input, .size-row select { padding-left: .5rem; padding-right: .3rem; }
/* Price: amount and currency on one row. */
.price-row { display: grid; grid-template-columns: minmax(0, 1fr) 5.2rem; gap: .35rem; }

/* Photos: each added photo is a tight row. */
.photo-slots { gap: .4rem; margin: 0 0 .4rem; }
.photo-slots:empty { display: none; }
.photo-slots li { grid-template-columns: 3.6rem 1fr; gap: .6rem; padding: .5rem; }
.photo-slots img { width: 3.6rem; height: 3.6rem; }
.photo-slots .slot-name { margin: 0 0 .25rem; font-size: .85rem; }
.photo-slots label { font-size: .74rem; }
.photo-slots button { margin-top: .4rem; }
.file-pick span { min-height: 2.6rem; padding: .35rem .9rem; font-size: .92rem; }

/* Settings: an image is a small preview with its buttons beside it. */
.image-field { margin: 0 0 .65rem; }
.image-row { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.image-row .image-preview { width: 2.6rem; height: 2.6rem; max-width: none; max-height: none; object-fit: contain; margin: 0; padding: .15rem; }
.image-row button { min-height: 2.6rem; padding: .3rem .8rem; font-size: .92rem; }

/* Settings: six colours as one row of dots. */
.swatches { display: flex; gap: .4rem; margin: 0; grid-template-columns: none; }
.swatches label {
  flex: 1 1 0; max-width: 2.6rem; min-height: 0; padding: 0; border: 0; background: transparent;
  display: block; border-radius: 50%; cursor: pointer;
}
.swatches .dot {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: auto; aspect-ratio: 1; border-radius: 50%;
  border: 2px solid transparent; color: transparent;
}
.swatches label:has(input:checked) { border: 0; box-shadow: none; }
.swatches label:has(input:checked) .dot { color: var(--on-accent); box-shadow: 0 0 0 2px var(--wall), 0 0 0 4px var(--ink); }
.swatches label:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 5px; }
#swatch-name { color: var(--ink); font-weight: 700; }

/* Tighter section headings and actions on the editor's pages. */
form h2 { margin: 1.5rem 0 .6rem; font-size: 1.15rem; }
form > h2:first-of-type, #form-heading { margin-top: .4rem; }
.actions { margin: 1.1rem 0 .6rem; }
.backup-files { margin: .4rem 0 0; }
.backup-files li { margin: 0 0 .4rem; font-size: .85rem; }
.control > button { margin-right: .35rem; }

/* The list of pieces: tighter rows. */
.rows { gap: .5rem; }
.rows li { grid-template-columns: 3.6rem minmax(0, 1fr); gap: .7rem; padding: .65rem; }
.rows img, .rows .no-photo { width: 3.6rem; height: 3.6rem; }
.rows .row-sub { font-size: .8rem; }
.status-select { margin-top: .35rem; }
.row-links { gap: .1rem 1.1rem; font-size: .88rem; }
.row-links a { padding: .25rem 0; }

/* Each added photo: its name and buttons on one line, the note beneath. */
.photo-slots li { align-items: start; }
.slot-head { display: flex; align-items: center; justify-content: space-between; gap: .4rem; flex-wrap: wrap; }
.photo-slots .slot-name { margin: 0; }
.slot-actions { display: flex; gap: .3rem; }
.photo-slots .slot-actions button { margin: 0; min-height: 2.6rem; padding: .2rem .55rem; font-size: .8rem; }
.photo-slots input[type="text"] { margin-top: .35rem; }
.price-row { grid-template-columns: minmax(0, 1fr) 5.8rem; }
.price-row select, .size-row select { padding-left: .55rem; padding-right: 1.4rem; }
.size-row { grid-template-columns: 1fr 1fr 1fr 4.6rem; }
/* Publish and Cancel share a row. */
.actions button, .actions .button { flex: 1 1 0; }

/* Added photos run the full width under the Add button, so each fits on one line. */
#fs-photos .photo-slots { grid-column: 1 / -1; margin: .5rem 0 0; }
.slot-head { flex-wrap: nowrap; }
.photo-slots .slot-actions button { white-space: nowrap; }

/* Translations: one row per language. */
.tr-item { padding: .75rem; margin: 0 0 .7rem; }
.tr-item h2 { margin: 0 0 .5rem; font-size: 1.05rem; }
.tr-item .field.inline { grid-template-columns: 4.2rem minmax(0, 1fr); margin-bottom: .5rem; }
.tr-item .field.inline:last-child { margin-bottom: 0; }
.tr-english { margin: 0; padding: .5rem .65rem; font-size: .95rem; }
.tr-foot { display: flex; align-items: center; justify-content: space-between; gap: .3rem .5rem; flex-wrap: wrap; margin-top: .25rem; }
.tr-foot .hint { margin: 0; }
.tr-actions { display: flex; gap: .3rem; flex-wrap: wrap; }
.tr-actions button { min-height: 2.6rem; padding: .2rem .6rem; font-size: .8rem; white-space: nowrap; }

/* With all three photos added there is no Add button, so the label and its note line up. */
#fs-photos:has(#pick[hidden]) > .label { padding-top: 0; }
#fs-photos:has(#pick[hidden]) .control > .hint { margin-top: .15rem; }