/* Saora Studio — the gallery's back room.
   Light throughout (paintings read truer on a light wall); only the camera viewfinder runs dark.
   Gold = selected / active / primary. Red dot = sold, always with the word. */

:root,
[data-theme='light'] {
  --bg: #f5f5f5;
  --raised: #ebebeb;
  --raised-2: #e2e2e2;
  --ink: #1d1c19;
  --muted: #5c574e;
  --faint: #6e685d;
  --line: #e0e0e0;
  --line-strong: #cacaca;
  --brass: #c9a24d;
  --brass-text: #86651f;
  --on-brass: #16140f;
  --sold: #b3392a;
  --veil: rgba(29, 28, 25, 0.32);
  --shadow: 0 18px 50px -20px rgba(29, 28, 25, 0.35);
  color-scheme: light;
}
[data-theme='dark'] {
  --bg: #0f0f0e;
  --raised: #191916;
  --raised-2: #22211d;
  --ink: #ece7dc;
  --muted: #a8a294;
  --faint: #9d978a;
  --line: #2a2924;
  --line-strong: #3a3831;
  --brass: #c9a24d;
  --brass-text: #c9a24d;
  --on-brass: #16140f;
  --sold: #d14a36;
  --veil: rgba(0, 0, 0, 0.5);
  --shadow: 0 18px 50px -20px rgba(0, 0, 0, 0.7);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 Lato, 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.25s, color 0.25s;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.serif { font-family: 'Playfair Display', Georgia, serif; font-weight: 400; }
.micro {
  font-family: Lato, 'Helvetica Neue', sans-serif;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 400;
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 99; background: var(--ink); color: var(--bg); padding: 8px 12px; }
.skip:focus { left: 8px; }
.ico { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; flex: none; }
[hidden] { display: none !important; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 18px;
  border: 1px solid var(--line-strong); border-radius: 2px;
  background: none; color: var(--ink); text-decoration: none; font-size: 14px; white-space: nowrap;
  transition: border-color 0.2s, background 0.2s, opacity 0.2s;
}
.btn:hover { border-color: var(--ink); }
.btn.outline { padding: 0 16px 0 12px; }
.btn .plus { color: var(--brass-text); display: flex; }
.btn.fill { background: var(--brass); border-color: var(--brass); color: var(--on-brass); font-weight: 700; }
.btn.fill:hover { filter: brightness(1.05); }
.btn.big { height: 52px; font-size: 15px; }
.btn:disabled { opacity: 0.45; cursor: default; }
.textbtn {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 4px;
  background: none; border: 0; font-size: 14px; color: var(--ink);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line-strong);
}
.textbtn:hover { text-decoration-color: var(--ink); }
.textbtn.danger { color: var(--sold); text-decoration: none; }
.iconbtn {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; color: var(--muted); padding: 0;
}
.iconbtn .ico { width: 20px; height: 20px; }

/* ---------- top bar ---------- */
.top {
  position: sticky; top: 0; z-index: 20;
  background: var(--bg);
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: 'brand right' 'tabs tabs';
  padding: 0 20px;
}
.brand { grid-area: brand; display: flex; align-items: baseline; gap: 8px; height: 56px; align-self: center; padding-top: 18px; }
.brand-name { font-family: 'Playfair Display', Georgia, serif; font-size: 19px; }
.top-right { grid-area: right; display: flex; align-items: center; gap: 20px; }
.viewsite { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-size: 14px; color: var(--muted); text-decoration: none; }
.viewsite:hover { color: var(--ink); }
/* Studio language: EN · ES */
.langsw { display: inline-flex; align-items: center; gap: 2px; }
.langsw button { min-width: 36px; min-height: 44px; padding: 0 6px; border: 0; background: none; font-size: 12px; letter-spacing: 0.08em; color: var(--faint); }
.langsw button[aria-pressed='true'] { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--brass); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.langsw button:hover { color: var(--ink); }
.viewsite { white-space: nowrap; }
@media (max-width: 420px) {
  .top-right { gap: 10px; }
  .langsw button { min-width: 30px; padding: 0 4px; }
}
/* Very narrow phones: just the language you can switch to */
@media (max-width: 380px) { .langsw button[aria-pressed='true'] { display: none; } }
.lang-nudge { margin: 12px 0 0; padding: 10px 14px; border-left: 2px solid var(--brass); background: var(--raised); font-size: 14px; line-height: 1.5; color: var(--ink); }
.tabs { grid-area: tabs; display: flex; gap: 28px; border-bottom: 1px solid var(--line); margin: 0 -20px; padding: 0 20px; }
.tab {
  display: flex; align-items: center; height: 46px; font-size: 15px; text-decoration: none;
  color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab[aria-current='page'] { color: var(--ink); border-bottom-color: var(--brass); }
.desk-only { display: none; }
body.add-mode .top, body.add-mode .pubbar { display: none !important; }

/* ---------- page head ---------- */
.main { padding: 0 20px 140px; outline: none; }
.head { padding: 28px 0 20px; display: flex; flex-direction: column; gap: 8px; }
.head h1 { margin: 0; font-family: 'Playfair Display', Georgia, serif; font-weight: 400; font-size: 36px; line-height: 1.1; }
.head p { margin: 0; font-size: 15px; color: var(--muted); max-width: 52ch; }
.head .row-end { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.toolbar .left { display: flex; align-items: center; gap: 6px; }
.viewtoggle { display: flex; gap: 2px; }
.viewtoggle button {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  background: none; border: 0; border-bottom: 1px solid transparent; color: var(--faint); padding: 0;
}
.viewtoggle button[aria-pressed='true'] { color: var(--ink); border-bottom-color: var(--brass); }
.viewtoggle .ico { width: 18px; height: 18px; }
.rehang-btn { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 8px; background: none; border: 0; font-size: 14px; color: var(--ink); }
.rehang-btn .ico { color: var(--faint); stroke-width: 1.8; }

/* ---------- grid ---------- */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; row-gap: 30px; padding-top: 22px; }
.card { position: relative; display: flex; flex-direction: column; gap: 12px; }
.card > .open { display: flex; flex-direction: column; gap: 12px; background: none; border: 0; padding: 0; text-align: left; color: inherit; }
.frame {
  height: 196px; background: var(--raised); border: 1px solid transparent;
  padding: 8px; display: flex; align-items: center; justify-content: center; position: relative;
  transition: background 0.2s;
}
.frame img { max-width: 100%; max-height: 100%; object-fit: contain; }
.card.draft .frame { border-color: var(--brass); }
.card.is-hidden .frame img { opacity: 0.35; }
.card .open:hover .frame { background: var(--raised-2); }
.cap { display: flex; flex-direction: column; gap: 4px; }
.cap .t { font-family: 'Playfair Display', Georgia, serif; font-size: 16px; line-height: 1.25; }
.cap .m { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tag-draft { color: var(--brass-text); }
.sold { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.sold::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--sold); display: inline-block; }
.card .grip {
  position: absolute; top: 8px; left: 8px; width: 44px; height: 44px; z-index: 2;
  display: none; align-items: center; justify-content: center; padding: 0;
  background: color-mix(in srgb, var(--bg) 92%, transparent); border: 1px solid var(--line-strong); border-radius: 2px; color: var(--ink);
  cursor: grab; touch-action: none;
}
.card .grip .ico { width: 20px; height: 20px; stroke-width: 2; }
.card .grip-hint {
  position: absolute; top: 19px; left: 60px; z-index: 2; display: none; padding: 4px 7px;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
}

/* ---------- list ---------- */
.list { padding-top: 18px; }
.list-head { display: flex; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid var(--line-strong); }
.row { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.row > .open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 16px; background: none; border: 0; padding: 0; text-align: left; color: inherit; }
.mini {
  width: 52px; height: 64px; flex: none; background: var(--raised); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; padding: 3px;
}
.mini img { max-width: 100%; max-height: 100%; }
.row.draft .mini { border-color: var(--brass); }
.row.is-hidden .mini img { opacity: 0.35; }
.rmain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.rt { font-family: 'Playfair Display', Georgia, serif; font-size: 17px; line-height: 1.2; }
.rend { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.rend .p { font-size: 15px; font-variant-numeric: tabular-nums; }
.rend .st { font-size: 13px; color: var(--faint); }
.row .grip {
  width: 48px; height: 48px; flex: none; display: flex; align-items: center; justify-content: center; padding: 0;
  background: none; border: 1px solid var(--line-strong); border-radius: 2px; color: var(--ink); cursor: grab; touch-action: none;
}
.row .grip .ico { width: 20px; height: 20px; stroke-width: 2; }
/* List view handle (desktop): quiet until the row is hovered. Phones rehang on their own screen. */
.row .grip.lgrip { display: none; width: 32px; height: 48px; margin-left: -8px; border: 0; color: var(--faint); transition: color 0.15s; }
.rehang .row.dragging, .row.moving {
  background: var(--raised); border: 1px solid var(--brass); border-radius: 2px; margin: 6px -12px; padding: 12px 8px 12px 12px;
}
.rehang .row.dragging .grip { border-color: var(--brass); }
.moving-lbl { color: var(--brass-text); }
.rehang-list { border-top: 1px solid var(--line-strong); }
.ghost { position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; opacity: 0.92; box-shadow: var(--shadow); background: var(--bg); }
.dragging { opacity: 0.35; }
.rehang .dragging { opacity: 1; }
/* Works page: the dragged item becomes the drop slot, a muted block the neighbours slide around. */
.works-page .dragging { opacity: 1; background: var(--raised-2); border-radius: 2px; border-bottom-color: transparent; }
.works-page .dragging > * { visibility: hidden; }
body.reordering { user-select: none; -webkit-user-select: none; cursor: grabbing; }

/* ---------- empty ---------- */
.empty { padding: 44px 4px 0; display: flex; flex-direction: column; gap: 12px; }
.empty h1 { margin: 0; font-family: 'Playfair Display', Georgia, serif; font-weight: 400; font-size: 38px; line-height: 1.1; }
.empty p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--muted); max-width: 40ch; }
.empty-frames { margin: 28px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.empty-frames span { height: 190px; border: 1px solid var(--line); }
.empty-frames span:first-child { border-color: var(--line-strong); background: var(--raised); }
.empty .btn.first { height: 64px; font-size: 17px; gap: 12px; margin-top: 24px; }
.empty .btn.first .ico { width: 24px; height: 24px; stroke-width: 1.6; }
.empty .note { text-align: center; font-size: 15px; }

/* ---------- publish bar ---------- */
.pubbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: #e5e5e5; border-top: 1px solid var(--line);
  padding: 14px 20px calc(18px + env(safe-area-inset-bottom));
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  transition: transform 0.35s ease, opacity 0.35s;
}
.pubbar.leaving { transform: translateY(100%); opacity: 0; }
.pubbar .txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pubbar .txt .micro { color: var(--muted); }
.pubbar .line { font-size: 14px; line-height: 1.45; }
.pubbar .acts { display: flex; align-items: center; gap: 16px; flex: none; }
@media (min-width: 1080px) { .pubbar .acts { gap: 24px; } }
.pubbar .progress { position: absolute; left: 0; top: -1px; height: 2px; width: 100%; background: var(--brass); transform-origin: left; animation: pub 1.8s ease-out forwards; }
@keyframes pub { from { transform: scaleX(0.05); } to { transform: scaleX(0.92); } }
.pubbar .done { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.pubbar .done .ico { width: 20px; height: 20px; color: var(--brass-text); stroke-width: 1.8; }

/* ---------- drawer ---------- */
.veil { position: fixed; inset: 0; z-index: 40; background: var(--veil); }
.drawer {
  position: fixed; left: 0; right: 0; top: 60px; bottom: 0; z-index: 50;
  background: var(--raised); border-top: 1px solid var(--line-strong); border-radius: 3px 3px 0 0;
  overflow-y: auto; overscroll-behavior: contain;
  padding-bottom: calc(40px + env(safe-area-inset-bottom));
  animation: up 0.28s ease-out;
}
@keyframes up { from { transform: translateY(40px); opacity: 0; } }
.dhandle { display: flex; justify-content: center; padding-top: 10px; }
.dhandle span { width: 36px; height: 3px; border-radius: 2px; background: var(--line-strong); }
.dhead { display: flex; align-items: center; justify-content: space-between; padding: 2px 8px 0 20px; }
.dhead .micro { color: var(--muted); }
.dnote { margin: 0 20px 12px; font-size: 14px; color: var(--muted); }
.dimg { margin: 0 20px; height: 272px; background: var(--bg); display: flex; align-items: center; justify-content: center; padding: 11px; }
.dimg img { max-width: 100%; max-height: 100%; object-fit: contain; }
.dimg-acts { padding: 4px 20px 0; }
.dimg-acts .ico { width: 18px; height: 18px; color: var(--muted); }
.fields { padding: 6px 20px 0; }
.frow { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.frow.tall { align-items: flex-start; padding: 14px 0; }
.frow label, .frow .flab { width: 92px; flex: none; color: var(--muted); }
.frow.tall label { padding-top: 3px; }
.frow input, .frow select, .frow textarea { flex: 1; min-width: 0; background: none; border: 0; padding: 0; outline: none; color: var(--ink); }
.frow input { height: 40px; font-size: 15px; }
@media (max-width: 1079px) { .frow input, .frow select, .frow textarea { font-size: 16px; } }
.frow input.title { font-family: 'Playfair Display', Georgia, serif; font-size: 21px; }
.frow input:focus-visible, .frow select:focus-visible, .frow textarea:focus-visible { outline: none; box-shadow: 0 1px 0 var(--brass); }
.frow textarea { resize: none; font-size: 15px; line-height: 1.5; min-height: 3em; padding-top: 2px; }
.frow input::placeholder, .frow textarea::placeholder { color: var(--faint); opacity: 1; }
.money { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.money .box { display: flex; align-items: center; gap: 6px; height: 40px; border-bottom: 1px solid var(--line-strong); }
.money.changed .box { border-bottom-color: var(--brass); }
.money .cur { font-size: 17px; color: var(--muted); }
.money input { font-size: 17px; font-variant-numeric: tabular-nums; height: auto; }
.money .was { font-size: 14px; color: var(--muted); }
.frow.price { align-items: flex-start; padding: 12px 0; }
.frow.price label { padding-top: 12px; }
.selwrap { flex: 1; min-width: 0; position: relative; display: flex; align-items: center; }
.selwrap select { appearance: none; -webkit-appearance: none; width: 100%; height: 44px; padding-right: 32px; font-size: 15px; cursor: pointer; }
.selwrap option { color: #1d1c19; background: #fff; }
.selwrap .chev { position: absolute; right: 0; pointer-events: none; color: var(--muted); width: 20px; height: 20px; stroke-width: 1.5; }
.soldrow { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; }
.soldrow .h { font-size: 15px; }
.soldrow .n { font-size: 14px; color: var(--muted); }
.nfsrow { padding-top: 0; }
.switch { width: 56px; height: 44px; background: none; border: 0; padding: 0; display: flex; align-items: center; justify-content: center; }
.switch .track { position: relative; display: block; width: 46px; height: 26px; border-radius: 13px; border: 1px solid var(--line-strong); transition: border-color 0.2s; }
.switch .knob { position: absolute; top: 5px; left: 5px; width: 14px; height: 14px; border-radius: 50%; background: var(--muted); transition: left 0.2s, background 0.2s; }
.switch[aria-checked='true'] .track { border-color: var(--sold); }
.switch[aria-checked='true'] .knob { left: 25px; background: var(--sold); }
.danger-zone { margin-top: 8px; padding: 20px 0 8px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; }
.danger-zone .acts { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.danger-zone .n { font-size: 14px; color: var(--muted); }
.confirm { border: 1px solid var(--sold); border-radius: 2px; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.confirm .h { font-size: 15px; }
.confirm .n { font-size: 14px; color: var(--muted); }
.confirm .acts { display: flex; gap: 10px; }
.btn.danger { border-color: var(--sold); color: var(--sold); font-weight: 700; }
.newseries { display: flex; flex-direction: column; align-items: stretch; gap: 12px; flex: 1; min-width: 0; padding: 4px 0 8px; }
.newseries input { border-bottom: 1px solid var(--brass) !important; }
/* Two targets, clearly apart: a real button to confirm, a quiet text button to back out */
.ns-acts { display: flex; align-items: center; gap: 28px; }
.ns-acts .btn { height: 44px; padding: 0 18px; }

/* ---------- add a work ---------- */
.add { max-width: 520px; margin: 0 auto; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.add-top { display: flex; align-items: center; justify-content: space-between; padding: 10px 10px 0; }
.steps { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.steps .micro { color: var(--ink); }
.steps .bars { display: flex; gap: 6px; }
.steps .bars span { width: 18px; height: 1px; background: var(--line-strong); }
.steps .bars span.on { background: var(--brass); }
.add-top .iconbtn { color: var(--ink); }
.add-body { padding: 26px 20px 0; flex: 1; }
.add-foot { padding: 20px 20px calc(40px + env(safe-area-inset-bottom)); display: flex; gap: 12px; }
.add-foot .btn { flex: 1; }
.add-foot .btn.fill { flex: 2; }
.stage { height: min(470px, 56svh); background: var(--raised); display: flex; align-items: center; justify-content: center; padding: 18px; }
.stage img { max-width: 100%; max-height: 100%; object-fit: contain; }
.stage.failed img { opacity: 0.45; }
/* ---------- crop to the painting (js/crop.js) ---------- */
.crop-body { padding-top: 14px; }
.crop-seg { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--line-strong); border-radius: 2px; margin: 0 0 14px; }
.crop-seg button { flex: 1; min-height: 40px; border: 0; border-radius: 1px; background: none; color: var(--muted); font-size: 14px; }
.crop-seg button[aria-pressed='true'] { background: var(--ink); color: var(--bg); }
/* Dark, neutral ground so a painting on a pale wall still shows its edges */
.crop-stage { position: relative; height: max(300px, calc(100svh - 300px)); max-height: 680px; background: #242321; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.crop-stage img { position: absolute; max-width: none; pointer-events: none; }
.crop-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.crop-dim { fill: rgba(0, 0, 0, 0.55); }
.crop-line { fill: none; stroke: var(--brass); stroke-width: 2; }
.crop-grid { fill: none; stroke: rgba(255, 255, 255, 0.3); stroke-width: 1; transition: stroke 0.15s; }
.crop-stage.is-dragging .crop-grid { stroke: rgba(255, 255, 255, 0.6); }
.crop-guide { display: none; stroke: #fff; stroke-width: 1; stroke-dasharray: 5 4; }
.crop-guide.on { display: inline; }
.crop-stage.whole .crop-svg { display: none; }
.crop-h { position: absolute; width: 48px; height: 48px; margin: -24px 0 0 -24px; padding: 0; border: 0; background: none; display: flex; align-items: center; justify-content: center; cursor: grab; touch-action: none; }
.crop-h span { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 2px solid var(--brass); box-shadow: 0 1px 5px rgba(0, 0, 0, 0.45); transition: transform 0.15s; }
.crop-h:focus-visible { outline: none; }
.crop-h:focus-visible span { box-shadow: 0 0 0 3px var(--brass), 0 1px 5px rgba(0, 0, 0, 0.45); }
.crop-stage.is-dragging .crop-h span { transform: scale(0.8); }
.crop-stage.is-dragging { cursor: grabbing; }
.crop-loupe { position: absolute; width: 96px; height: 96px; border-radius: 50%; overflow: hidden; border: 2px solid #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5); pointer-events: none; z-index: 2; }
.crop-loupe canvas { width: 100%; height: 100%; display: block; }
.crop-hint { margin: 12px 4px 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.crop-modal { min-height: 100%; display: flex; flex-direction: column; }
.crop-modal-body { flex: 1; width: 100%; max-width: 760px; margin: 0 auto; padding: 16px 20px 0; }
.crop-modal .crop-stage { height: max(300px, calc(100svh - 290px)); }
.crop-modal-foot { width: 100%; max-width: 760px; margin: 0 auto; }
.dimg-acts { display: flex; flex-wrap: wrap; gap: 0 20px; }
.add h1 { margin: 28px 4px 0; font-family: 'Playfair Display', Georgia, serif; font-weight: 400; font-size: 28px; }
.okline { margin: 10px 4px 0; display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--muted); }
.okline .ico { color: var(--brass-text); stroke-width: 1.8; }
.alert { margin: 24px 0 0; padding: 16px; border: 1px solid var(--line-strong); border-radius: 2px; display: flex; gap: 12px; align-items: flex-start; }
.alert .ico { width: 22px; height: 22px; color: var(--sold); stroke-width: 1.6; }
.alert p { margin: 0; font-size: 15px; line-height: 1.55; }
.draftcard { display: flex; gap: 18px; align-items: flex-end; }
.draftcard .mini { width: 88px; height: 110px; padding: 4px; border-color: var(--brass); }
.draftcard .n { font-size: 14px; color: var(--muted); line-height: 1.5; }
.bigfields { padding: 26px 4px 0; display: flex; flex-direction: column; gap: 30px; }
.bigfield { display: flex; flex-direction: column; gap: 10px; }
.bigfield input { background: none; border: 0; outline: none; padding: 0 0 10px; border-bottom: 1px solid var(--line-strong); color: var(--ink); }
.bigfield input:focus { border-bottom-color: var(--brass); }
.bigfield .t { font-family: 'Playfair Display', Georgia, serif; font-size: 26px; }
.bigfield .pricebox { display: flex; align-items: baseline; gap: 6px; border-bottom: 1px solid var(--line-strong); padding-bottom: 10px; }
.bigfield .pricebox:focus-within { border-bottom-color: var(--brass); }
.bigfield .pricebox span { font-size: 22px; color: var(--muted); }
.bigfield .pricebox input { border: 0; padding: 0; font-size: 22px; font-variant-numeric: tabular-nums; flex: 1; min-width: 0; }
.add .hint { font-size: 14px; line-height: 1.6; color: var(--faint); margin: 0; }
/* Add a work, step 3: optional details under the title + price */
.add-more { margin-top: 44px; }
.add-more .more-head { display: flex; flex-direction: column; gap: 6px; padding: 0 4px 12px; border-bottom: 1px solid var(--line-strong); }
.add-more .more-head h2 { margin: 0; color: var(--ink); }
.add-more .more-head p { margin: 0; font-size: 14px; color: var(--muted); }
.add-more .fields { padding: 0 4px; }
.frow.has-chips { flex-wrap: wrap; }
.frow.has-chips .chips { flex-basis: 100%; display: flex; gap: 8px; padding: 2px 0 10px 104px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.frow.has-chips .chips::-webkit-scrollbar { display: none; }
.chip { flex: none; white-space: nowrap; min-height: 40px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: none; color: var(--ink); font-size: 14px; }
.chip:hover { border-color: var(--ink); }
.chip[hidden] { display: none; }
/* Save stays reachable however far down they scroll */
.add-save { position: sticky; bottom: 0; z-index: 5; margin: 28px -20px 0; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid var(--line); }

/* camera (always dark: it's a viewfinder) */
.cam { position: fixed; inset: 0; z-index: 70; background: #000; color: #ece7dc; }
.cam .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cam .shade-t { position: absolute; left: 0; right: 0; top: 0; height: 130px; background: linear-gradient(rgba(10,10,9,.7), rgba(10,10,9,0)); }
.cam .shade-b { position: absolute; left: 0; right: 0; bottom: 0; height: 260px; background: linear-gradient(rgba(10,10,9,0), rgba(10,10,9,.85)); }
.cam .corners { position: absolute; left: 20%; right: 20%; top: 27%; bottom: 35%; border: 1px solid rgba(201,162,77,.7); background: rgba(201,162,77,.06); }
.cam .corners i { position: absolute; width: 18px; height: 18px; border: 2.5px solid #c9a24d; }
.cam .corners i:nth-child(1) { left: -2px; top: -2px; border-right: 0; border-bottom: 0; }
.cam .corners i:nth-child(2) { right: -2px; top: -2px; border-left: 0; border-bottom: 0; }
.cam .corners i:nth-child(3) { right: -2px; bottom: -2px; border-left: 0; border-top: 0; }
.cam .corners i:nth-child(4) { left: -2px; bottom: -2px; border-right: 0; border-top: 0; }
.cam .add-top { position: relative; }
.cam .steps .micro, .cam .add-top .iconbtn { color: #ece7dc; }
.cam .steps .bars span { background: #3a3831; }
.cam .steps .bars span.on { background: #c9a24d; }
.cam .found { position: absolute; left: 0; right: 0; bottom: 200px; display: flex; justify-content: center; }
.cam .found span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; background: rgba(15,15,14,.78); border: 1px solid rgba(201,162,77,.5); border-radius: 2px; font-size: 13px; }
.cam .found .ico { color: #c9a24d; stroke-width: 1.8; }
.cam .shutter-row { position: absolute; left: 0; right: 0; bottom: calc(44px + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; padding: 0 28px; }
.cam .side { width: 72px; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; color: #ece7dc; background: none; border: 0; padding: 6px 0; text-align: center; line-height: 1.4; }
.cam .side .ico { width: 22px; height: 22px; }
.cam .side.muted { color: #a8a294; }
.shutter { width: 76px; height: 76px; border-radius: 50%; border: 2px solid #ece7dc; background: none; display: flex; align-items: center; justify-content: center; padding: 0; }
.shutter span { width: 60px; height: 60px; border-radius: 50%; background: #ece7dc; transition: transform 0.15s; }
.shutter:active span { transform: scale(0.92); }
.cam.drop-over .corners { border-color: #c9a24d; background: rgba(201,162,77,.16); }

/* ---------- appearance ---------- */
/* ---------- Sign in ---------- */
.signin { max-width: 520px; }
.si-form { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.si-form .btn { margin-top: 8px; }
.si-sent { margin: 18px 0 0; padding: 18px; border: 1px solid var(--line-strong); font-size: 16px; line-height: 1.55; }
.ab-signout { margin: 48px 0 0; font-size: 14px; color: var(--faint); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }

/* ---------- About tab ---------- */
.about-page { max-width: 720px; }
.ab-sec { padding-top: 32px; display: flex; flex-direction: column; gap: 8px; }
.ab-sec > .micro, .ab-sec h2.micro { margin: 0; color: var(--muted); }
.ab-hint { margin: 0; font-size: 14px; line-height: 1.5; color: var(--faint); }
.ab-hint.warn { color: var(--sold); }
.ab-field { width: 100%; margin-top: 4px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 2px; background: var(--bg); color: var(--ink); font-size: 16px; line-height: 1.55; resize: none; outline: none; }
.ab-field:focus { border-color: var(--brass); }
textarea.ab-field { min-height: 3.2em; overflow: hidden; }
.ab-lead { font-family: 'Playfair Display', Georgia, serif; font-size: 20px; line-height: 1.35; }
.ab-sec .fields { padding: 0; border-top: 1px solid var(--line); }
.ab-sec input[aria-invalid='true'] { box-shadow: 0 1px 0 var(--sold); }
.ig { flex: 1; min-width: 0; display: flex; align-items: center; gap: 2px; }
.ig > span { color: var(--faint); font-size: 16px; }
.ab-exh-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ab-exh-head .btn .ico { width: 16px; height: 16px; }
.ab-empty { margin: 8px 0 0; padding: 18px; border: 1px dashed var(--line-strong); font-size: 15px; color: var(--muted); }
.ex-list { margin-top: 6px; border-top: 1px solid var(--line-strong); }
.ex { border-bottom: 1px solid var(--line); }
.ex-sum { width: 100%; min-height: 64px; display: flex; align-items: center; gap: 16px; padding: 12px 0; background: none; border: 0; text-align: left; color: inherit; }
.ex-sum .y { width: 44px; flex: none; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ex-sum .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ex-sum .t { font-family: 'Playfair Display', Georgia, serif; font-size: 17px; line-height: 1.25; }
.ex-sum .t .ph { color: var(--faint); }
.ex-sum .m { font-size: 13px; color: var(--muted); }
.ex-sum .chev { width: 18px; height: 18px; color: var(--faint); flex: none; transition: transform 0.2s; }
.ex.open .ex-sum .chev { transform: rotate(180deg); }
.ex.open { background: var(--raised); margin: 0 -14px; padding: 0 14px; border-bottom-color: transparent; }
.ex-ed { padding-bottom: 16px; }
.ex-ed .fields { border-top: 1px solid var(--line-strong); }
.ex-type { flex: 1; margin: 6px 0; }
.ex-acts { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 12px; }
.ex-acts .ex-q { flex-basis: 100%; font-size: 15px; }
.ex-acts .btn { height: 44px; }
.ap-intro p.lede { font-size: 16px; line-height: 1.5; color: var(--muted); }
.pv-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 10px; }
.pv-head .sum { font-size: 14px; color: var(--faint); text-align: right; }
.pv { border: 1px solid var(--line-strong); }
.pv-chrome { height: 22px; border-bottom: 1px solid var(--line-strong); display: flex; align-items: center; padding: 0 10px; background: var(--raised); font-size: 10px; color: var(--faint); }
/* Live preview: the real site in a frame, scaled to fit */
.pv-mob { margin-top: 4px; }
.pv-live .pv-box { position: relative; height: min(68svh, 620px); overflow: hidden; background: var(--raised); }
.pv-box iframe { position: absolute; top: 0; left: 0; border: 0; transform-origin: 0 0; background: #fff; }
.pv-box.is-phone { background: var(--raised-2); }
.pv-box.is-phone iframe { box-shadow: 0 0 0 1px var(--line-strong), 0 12px 30px -12px rgba(0, 0, 0, 0.35); }
.pv-dev { max-width: 240px; margin: 0 0 12px; }
.pv-note { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--faint); }
@media (min-width: 1080px) { .pv-live .pv-box { height: calc(100vh - 300px); min-height: 420px; } }
.ap-sec { padding-top: 34px; display: flex; flex-direction: column; gap: 14px; }
.ap-sec h2 { margin: 0; color: var(--muted); }
.cards2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.opt {
  position: relative; background: var(--raised); border: 1px solid var(--line); border-radius: 2px;
  color: var(--ink); text-align: left; padding: 0; overflow: hidden; display: flex; flex-direction: column;
}
.opt[aria-pressed='true'] { border-color: var(--brass); }
.opt:hover { border-color: var(--line-strong); }
.opt[aria-pressed='true']:hover { border-color: var(--brass); }
.opt .tag { min-height: 14px; color: var(--faint); }
.opt[aria-pressed='true'] .tag { color: var(--brass-text); }
.opt.type { min-height: 172px; padding: 14px 16px 16px; justify-content: space-between; gap: 10px; }
.opt.type .aa { font-size: 46px; line-height: 1; }
.opt.type .nm { font-size: 15px; }
.opt.type .fn { color: var(--faint); line-height: 1.4; }
/* Palette = its colours as one flush strip: walls, text, accent. */
.opt.pal .strip { height: 86px; display: flex; }
.opt.pal .strip i { flex: 1; }
.opt.pal .strip i:first-child { flex: 2; } /* the wall colour is half the strip */
.opt.pal .tag:empty { display: none; }
.opt.pal .tag { position: absolute; top: 10px; right: 10px; padding: 3px 6px; background: color-mix(in srgb, var(--bg) 85%, transparent); }
.opt.pal .body { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 14px; }
.opt.pal .nm { font-size: 15px; }
.opt.pal .ds { color: var(--faint); }
.opt.custom { grid-column: 1 / -1; }
.custom-note { margin: 0; font-size: 14px; line-height: 1.55; color: var(--faint); grid-column: 1 / -1; }
.ap-foot { margin: 30px 0 0; font-size: 14px; color: var(--faint); }


/* ---------- site preview (miniature home page; scales with its box) ---------- */
.pv-site { container-type: inline-size; transition: background 0.3s, color 0.3s; line-height: 1.45; }
.pv-site > * { padding-left: 5cqi; padding-right: 5cqi; }
.pv-nav { display: flex; justify-content: space-between; align-items: center; gap: 3cqi; padding-top: 3.2cqi; padding-bottom: 3.2cqi; border-bottom: 1px solid var(--rule); }
.pv-nav .n { font-size: max(12px, 3.6cqi); line-height: 1.1; }
.pv-nav .l { display: flex; gap: 2.8cqi; font-size: max(7px, 1.5cqi); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.pv-nav .l .on { color: inherit; }
.pv-hero { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 5cqi; align-items: center; padding-top: 6cqi; padding-bottom: 6cqi; }
.pv-hero .lab { display: block; font-size: max(7px, 1.5cqi); letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 2cqi; }
.pv-hero h2 { margin: 0 0 2.4cqi; font-size: max(15px, 5.2cqi); line-height: 1.08; }
.pv-hero p { margin: 0 0 3.2cqi; font-size: max(8px, 1.9cqi); color: var(--muted); max-width: 46ch; }
.pv-hero .cta { display: flex; align-items: center; gap: 3cqi; flex-wrap: wrap; }
.pv-hero .btn-f { font-size: max(7px, 1.6cqi); padding: 1.4cqi 2.6cqi; letter-spacing: 0.06em; }
.pv-hero .lnk { font-size: max(7px, 1.6cqi); border-bottom: 1px solid var(--acc); padding-bottom: 1px; }
.pv-hero .fe { margin: 0; }
.pv-hero .fe img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.pv-hero figcaption, .pv-works .w { display: flex; flex-direction: column; gap: 0.3cqi; }
.pv-hero figcaption { margin-top: 1.4cqi; font-size: max(8px, 1.7cqi); }
.mu { color: var(--muted); font-size: max(7px, 1.5cqi); }
.pv-sec { display: flex; justify-content: space-between; align-items: baseline; padding-top: 4cqi; padding-bottom: 2.6cqi; border-top: 1px solid var(--rule); }
.pv-sec .h3 { font-size: max(12px, 3cqi); }
.pv-sec .all { font-size: max(7px, 1.5cqi); color: var(--acc); }
.pv-works { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3.2cqi 2.4cqi; padding-bottom: 5cqi; }
.pv-works .im { margin-bottom: 1cqi; }
.pv-works .im img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.pv-works .t { font-size: max(8px, 1.8cqi); line-height: 1.25; }
.pv-works .pr { font-size: max(7px, 1.5cqi); font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 0.8cqi; }
.pv-works .sd { width: max(4px, 0.9cqi); height: max(4px, 0.9cqi); border-radius: 50%; display: inline-block; }
.pv-foot { display: flex; justify-content: space-between; align-items: center; padding-top: 3cqi; padding-bottom: 3cqi; border-top: 1px solid var(--rule); font-size: max(7px, 1.4cqi); color: var(--muted); }
.pv-foot .enq { color: var(--acc); letter-spacing: 0.14em; text-transform: uppercase; }
@container (max-width: 480px) {
  .pv-hero { grid-template-columns: 1fr; }
  .pv-hero .fe { display: none; }
  .pv-hero h2 { font-size: 22px; } .pv-hero p { font-size: 12px; } .pv-hero .lab, .pv-nav .l, .mu, .pv-foot, .pv-sec .all { font-size: 10px; }
  .pv-hero .btn-f, .pv-hero .lnk { font-size: 11px; } .pv-nav .n, .pv-sec .h3 { font-size: 17px; }
  .pv-works { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pv-works .t { font-size: 13px; } .pv-works .pr { font-size: 11px; }
  .pv-nav .l span:not(.on):nth-child(n+3) { display: none; }
}
.wall-site { min-height: calc(100vh - 61px); }
/* side-panel preview behaves like a browser window: scroll inside it, the chrome bar stays put */
@media (min-width: 1080px) {
  .pv-col .pv { display: flex; flex-direction: column; max-height: calc(100vh - 260px); }
  .pv-col .pv-site { overflow-y: auto; overscroll-behavior: contain; }
}
.pv { overflow: hidden; }
@media (max-width: 1079px) {
  .pv { display: flex; flex-direction: column; max-height: 460px; }
  .pv .pv-site { overflow-y: auto; overscroll-behavior: contain; }
}

/* ---------- preview modal ---------- */
.modal { position: fixed; inset: 0; z-index: 80; overflow-y: auto; }
.wall-bar { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; padding: 8px 12px 8px 20px; background: var(--raised); border-bottom: 1px solid var(--line); color: var(--ink); }

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 110px; z-index: 90; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 2px; font-size: 14px; transition: 0.25s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- desktop ---------- */
@media (min-width: 1080px) {
  .top { grid-template-columns: auto 1fr auto; grid-template-areas: 'brand tabs right'; align-items: center; height: 72px; padding: 0 48px; border-bottom: 1px solid var(--line); gap: 64px; }
  .brand { padding-top: 0; height: auto; gap: 10px; }
  .brand-name { font-size: 24px; }
  .tabs { border: 0; margin: 0; padding: 0; gap: 36px; height: 72px; }
  .tab { height: 72px; }
  .desk-only { display: inline-flex; }
  .mob-only { display: none !important; }
  .main { padding: 0 48px 140px; transition: margin-right 0.25s; }
  .head { padding: 40px 0 28px; }
  .head h1 { font-size: 46px; }
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 24px; row-gap: 40px; }
  .frame { height: 236px; }
  .cap .t { font-size: 17px; }
  .card:hover .grip, .card:focus-within .grip { display: flex; }
  .card:hover .grip-hint { display: block; }
  .row .grip.lgrip { display: flex; }
  .row:hover .grip.lgrip, .row .grip.lgrip:focus-visible { color: var(--ink); }
  .list:not(.rehang-list) .list-head span:first-child { padding-left: 40px; }
  .pubbar { padding: 16px 48px; }
  body.drawer-open .main { margin-right: 440px; }
  body.drawer-open .pubbar { right: 440px; }
  .veil { display: none; }
  .drawer { left: auto; top: 72px; width: 440px; border-top: 0; border-left: 1px solid var(--line); border-radius: 0; animation: slide 0.25s ease-out; }
  @keyframes slide { from { transform: translateX(30px); opacity: 0; } }
  .dhandle { display: none; }
  .dhead { padding: 14px 16px 0 32px; }
  .dnote { margin: 0 32px 12px; }
  .dimg { margin: 0 32px; height: 300px; padding: 13px; }
  .dimg-acts, .fields { padding-left: 32px; padding-right: 32px; }
  .ap-wrap { display: grid; grid-template-columns: 3fr 5fr; gap: 64px; align-items: start; }
  .ap-wrap .pv-col { position: sticky; top: 100px; padding-top: 40px; }
  .rehang-list { max-width: 720px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}