/* ═══════════════════════════════════════════════════════════════
   Borg Watch Faces — site styles
   Palette is taken from the dials themselves: near-black ground,
   warm gold, bone text. Nothing here is decorative for its own sake.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --void:    #08070a;
  --ink:     #101015;
  --raise:   #17161c;
  --edge:    #262229;
  --gold:    #c9973f;
  --gold-hi: #e8c877;
  --bone:    #e8e4dc;
  --mute:    #8a8175;

  --display: "Bodoni MT", "Didot", ui-serif, Georgia, serif;
  --body:    "Neue Haas Grotesk Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --data:    ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;

  --measure: 34rem;
  --gutter:  clamp(1.25rem, 4vw, 3rem);
}

:root[data-theme="light"] {
  --void: #f1ede5; --ink: #e7e2d7; --raise: #ded8ca; --edge: #cdc5b5;
  --gold: #87621e; --gold-hi: #a67c2c; --bone: #17150f; --mute: #6c6455;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --void: #f1ede5; --ink: #e7e2d7; --raise: #ded8ca; --edge: #cdc5b5;
    --gold: #87621e; --gold-hi: #a67c2c; --bone: #17150f; --mute: #6c6455;
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--void);
  color: var(--bone);
  font-family: var(--body);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--gold); color: var(--void); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; }

.wrap { width: min(100% - var(--gutter) * 2, 74rem); margin-inline: auto; }

/* ── type ─────────────────────────────────────────────── */
h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 7vw, 5.2rem); line-height: .98; letter-spacing: -.02em; }
h2 { font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.06; letter-spacing: -.015em; }
h3 { font-size: 1.28rem; line-height: 1.22; }
p  { margin: 0; max-width: var(--measure); }

.eyebrow {
  font-family: var(--data); font-size: .68rem; letter-spacing: .24em;
  text-transform: uppercase; color: var(--gold); margin: 0;
}
.lede { font-size: 1.06rem; color: var(--mute); }
.small { font-size: .86rem; color: var(--mute); }

/* ── header ───────────────────────────────────────────── */
.masthead {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--void) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease;
}
.masthead[data-stuck="true"] { border-bottom-color: var(--edge); }
.masthead .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding-block: 1.05rem;
}
.brand {
  font-family: var(--display); font-size: 1.02rem; letter-spacing: .3em;
  text-transform: uppercase; margin-right: -.3em; white-space: nowrap;
}
.nav { display: flex; gap: 1.9rem; align-items: center; }
.nav a {
  font-family: var(--data); font-size: .68rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--mute); transition: color .2s ease;
}
.nav a:hover { color: var(--bone); }
@media (max-width: 780px) { .nav a:not(.btn) { display: none; } }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--data); font-size: .68rem; letter-spacing: .16em;
  text-transform: uppercase; padding: .72rem 1.25rem;
  border: 1px solid var(--gold); color: var(--gold);
  background: transparent; cursor: pointer; white-space: nowrap;
  transition: background .2s ease, color .2s ease;
}
.btn:hover { background: var(--gold); color: var(--void); }
.btn--solid { background: var(--gold); color: #100b03; border-color: var(--gold); }
.btn--solid:hover { background: var(--gold-hi); border-color: var(--gold-hi); color: #100b03; }

/* ── hero ─────────────────────────────────────────────── */
.hero { padding-block: clamp(3rem, 8vh, 6rem) clamp(4rem, 10vh, 7rem); position: relative; }
.hero .wrap {
  display: grid; gap: clamp(2.5rem, 6vw, 5rem); align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) { .hero .wrap { grid-template-columns: 1fr 1fr; } }

.hero-copy { display: flex; flex-direction: column; gap: 1.5rem; align-items: flex-start; }
.hero-actions { display: flex; gap: .75rem; flex-wrap: wrap; }

.hero-stage {
  position: relative; width: 100%; max-width: 30rem;
  aspect-ratio: 1; margin-inline: auto;
}
.hero-stage img, .hero-stage canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border-radius: 50%;
}
.hero-stage::before {
  content: ""; position: absolute; inset: -12%; border-radius: 50%;
  background: radial-gradient(circle, rgba(201,151,63,.16) 0%, transparent 68%);
}

/* ── section scaffolding ──────────────────────────────── */
section { padding-block: clamp(4.5rem, 11vh, 8rem); }
.section-head { display: flex; flex-direction: column; gap: 1rem; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.rule { height: 1px; background: var(--edge); border: 0; margin: 0; }

/* ── the collection ───────────────────────────────────── */
.filters { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 2rem; }
.chip {
  font-family: var(--data); font-size: .64rem; letter-spacing: .16em;
  text-transform: uppercase; padding: .55rem 1rem;
  border: 1px solid var(--edge); background: transparent; color: var(--mute);
  cursor: pointer; transition: all .2s ease;
}
.chip:hover { color: var(--bone); border-color: var(--mute); }
.chip[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); }

.grid {
  display: grid; gap: clamp(1.25rem, 2.5vw, 2rem);
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

/* ── browsing ─────────────────────────────────────────────
   Colour leads, because it is what people decide on first.
   Everything else is a refinement of that choice. */
.browse {
  border: 1px solid var(--edge);
  background: color-mix(in srgb, var(--ink) 60%, transparent);
  padding: clamp(1.1rem, 2.5vw, 1.6rem);
  margin-bottom: 2rem;
  display: flex; flex-direction: column; gap: 1.15rem;
}

.facet { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.facet-label {
  font-family: var(--data); font-size: .62rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--mute);
  min-width: 6.5rem; flex-shrink: 0;
}
.facet-opts { display: flex; gap: .45rem; flex-wrap: wrap; align-items: center; }

/* colour swatches */
.sw {
  width: 1.85rem; height: 1.85rem; border-radius: 50%;
  border: 1px solid var(--edge); padding: 0; cursor: pointer;
  position: relative; transition: transform .15s ease, box-shadow .15s ease;
}
.sw:hover { transform: scale(1.12); }
.sw[aria-pressed="true"] {
  box-shadow: 0 0 0 2px var(--void), 0 0 0 3.5px var(--gold);
}
.sw span {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
}

/* text options */
.opt {
  font-family: var(--body); font-size: .82rem;
  padding: .4rem .8rem; cursor: pointer;
  border: 1px solid var(--edge); background: transparent; color: var(--mute);
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.opt:hover { color: var(--bone); border-color: var(--mute); }
.opt[aria-pressed="true"] {
  border-color: var(--gold); color: var(--void); background: var(--gold);
}

/* the summary line */
.browse-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  border-top: 1px solid var(--edge); padding-top: 1rem;
}
.count {
  font-family: var(--display); font-size: 1.15rem;
}
.count b { font-variant-numeric: tabular-nums; }
.count em { font-style: normal; color: var(--mute); font-family: var(--body); font-size: .88rem; }

.browse-actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.sortsel {
  font-family: var(--body); font-size: .82rem; padding: .4rem .7rem;
  background: transparent; color: var(--bone); border: 1px solid var(--edge);
}
.sortsel:focus { border-color: var(--gold); outline: none; }
.clearbtn {
  font-family: var(--data); font-size: .62rem; letter-spacing: .14em;
  text-transform: uppercase; padding: .45rem .8rem; cursor: pointer;
  background: transparent; border: 1px solid var(--edge); color: var(--mute);
}
.clearbtn:hover { color: var(--bone); border-color: var(--mute); }
.clearbtn[hidden] { display: none; }

@media (max-width: 640px) {
  .facet { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .facet-label { min-width: 0; }
}

.face-blurb { font-size: .82rem; color: var(--mute); line-height: 1.5; }

.face {
  border: 1px solid var(--edge); background: var(--ink);
  display: flex; flex-direction: column;
  transition: border-color .25s ease, transform .25s ease;
}
.face:hover { border-color: color-mix(in srgb, var(--gold) 45%, transparent); transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) { .face:hover { transform: none; } }

.face-img { position: relative; background: #000; aspect-ratio: 1; overflow: hidden; }
.face-img img { width: 100%; height: 100%; object-fit: cover; }
.face-flag {
  position: absolute; top: .7rem; left: .7rem;
  font-family: var(--data); font-size: .56rem; letter-spacing: .14em;
  text-transform: uppercase; padding: .3rem .55rem;
  background: color-mix(in srgb, var(--gold) 88%, transparent); color: #100b03;
}
.face-body { padding: 1.15rem 1.15rem 1.3rem; display: flex; flex-direction: column; gap: .45rem; flex: 1; }
.face-name { font-family: var(--display); font-size: 1.28rem; line-height: 1.15; }
.face-line { font-family: var(--data); font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; color: var(--mute); }
.face-foot {
  margin-top: auto; padding-top: .9rem; display: flex;
  align-items: center; justify-content: space-between; gap: .75rem;
}
.face-price { font-family: var(--display); font-size: 1.32rem; font-variant-numeric: tabular-nums; }
.face-btn {
  font-family: var(--data); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase;
  border: 1px solid var(--edge); background: transparent; color: var(--mute);
  padding: .5rem .85rem; cursor: pointer; transition: all .2s ease;
}
.face-btn:hover { border-color: var(--gold); color: var(--gold); }

.grid-empty { color: var(--mute); font-size: .92rem; padding: 2rem 0; }

/* ── steps ────────────────────────────────────────────── */
.steps { display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); background: var(--edge); border-block: 1px solid var(--edge); }
.step { background: var(--void); padding: 2.2rem 1.6rem; display: flex; flex-direction: column; gap: .6rem; }
.step-n { font-family: var(--data); font-size: .64rem; letter-spacing: .2em; color: var(--gold); }
.step h3 { font-size: 1.3rem; }
.step p { font-size: .89rem; color: var(--mute); }

/* ── pricing ──────────────────────────────────────────── */
.tiers { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); }
.tier {
  border: 1px solid var(--edge); background: var(--ink);
  padding: 2.2rem 1.7rem; display: flex; flex-direction: column; gap: 1rem;
  position: relative;
}
.tier[data-feature] { border-color: color-mix(in srgb, var(--gold) 55%, transparent); background: var(--raise); }
.tier-k { font-family: var(--data); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--mute); }
.tier[data-feature] .tier-k { color: var(--gold); }
.tier-price { font-family: var(--display); font-size: 2.7rem; line-height: 1; font-variant-numeric: tabular-nums; }
.tier-price sub { font-family: var(--body); font-size: .68rem; color: var(--mute); vertical-align: baseline; }
.tier p { font-size: .88rem; color: var(--mute); }
.tier ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .5rem; font-size: .86rem; color: var(--mute); }
.tier li { padding-left: 1.15rem; position: relative; }
.tier li::before { content: "—"; position: absolute; left: 0; color: var(--gold); }
.tier .btn { margin-top: auto; width: 100%; }

/* ── faq ──────────────────────────────────────────────── */
.faq { display: grid; gap: 0; }
.qa { border-bottom: 1px solid var(--edge); }
.qa summary {
  cursor: pointer; list-style: none; padding: 1.35rem 2rem 1.35rem 0;
  font-family: var(--display); font-size: 1.15rem; position: relative;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: "+"; position: absolute; right: .25rem; top: 50%; transform: translateY(-50%);
  color: var(--gold); font-family: var(--body); font-size: 1.2rem;
}
.qa[open] summary::after { content: "\2212"; }
.qa p { padding-bottom: 1.4rem; font-size: .93rem; color: var(--mute); }

/* ── waitlist ─────────────────────────────────────────── */
.join-wrap { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.join-wrap p { margin-inline: auto; }
.join { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }
.join input {
  background: transparent; border: 1px solid var(--edge); color: var(--bone);
  font-family: var(--body); font-size: .93rem; padding: .82rem 1.1rem; width: min(21rem, 74vw);
}
.join input::placeholder { color: var(--mute); }
.join input:focus { border-color: var(--gold); outline: none; }
.status {
  font-family: var(--data); font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold); min-height: 1.3em;
}

/* ── footer ───────────────────────────────────────────── */
.foot { border-top: 1px solid var(--edge); padding-block: 2.5rem 3.5rem; }
.foot .wrap { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.foot span, .foot a {
  font-family: var(--data); font-size: .64rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--mute);
}
.foot a:hover { color: var(--bone); }

/* ── reveal ───────────────────────────────────────────── */
.rise { opacity: 0; transform: translateY(24px); transition: opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1); }
.rise.seen { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rise { opacity: 1; transform: none; transition: none; } }

/* Small utilities, so the markup carries no style attributes —
   the CSP in _headers is strict and forbids them. */
.pb-0 { padding-bottom: 0; }
.pl-0 { padding-left: 0; }
.bare { border: 0; }
.mb-block { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }

/* A card whose artwork has not been made yet. */
.face-img--soon {
  background: repeating-linear-gradient(135deg, #0d0c11 0 14px, #121118 14px 28px);
}
.face-price--soon {
  font-family: var(--data); font-size: .62rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--mute);
}

/* Off-screen but still read aloud. Used for form labels and the
   honeypot field — never `display:none`, which hides it from
   assistive technology and from the bots we want to catch. */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; white-space: nowrap;
  clip: rect(0 0 0 0); clip-path: inset(50%);
}

/* ── placeholder marker ───────────────────────────────── */
.ph {
  border: 1px dashed color-mix(in srgb, var(--gold) 45%, transparent);
  background: color-mix(in srgb, var(--gold) 6%, transparent);
  padding: .55rem .8rem; font-family: var(--data); font-size: .6rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold);
  display: inline-block;
}

/* ══════════════════════════════════════════════════════════════
   THE COLLECTION PAGE

   The card is the dial. No tile, no border, no filled box — a dial
   is round, and cropping it square leaves four dead corners that
   the eye reads as padding. Ninety of those is a spreadsheet.

   The container stays invisible until the card is lit, so the page
   reads as dials floating in space rather than a table of products.
   ══════════════════════════════════════════════════════════════ */

.collection-head { padding-bottom: 0; }
.collection-head .browse { margin-bottom: 0; }

.dial-grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 2.75rem);
  grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
  padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem);
}

.dial {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  transition: transform .45s cubic-bezier(.22,.7,.3,1);
}
.dial.is-lit { transform: translateY(-6px); }

/* ── the stage: image, wash, hands, all in one circle ──────── */
.dial-stage {
  position: relative;
  width: 100%; aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  isolation: isolate;
  /* a faint ring so a dark dial does not dissolve into the page */
  box-shadow: 0 0 0 1px var(--edge), 0 18px 38px -22px rgba(0,0,0,.9);
  transition: box-shadow .45s ease;
}
.dial.is-lit .dial-stage {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent),
    0 0 34px -6px color-mix(in srgb, var(--accent) 40%, transparent),
    0 26px 46px -24px rgba(0,0,0,.95);
}

.dial-img,
.dial-hands {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}
.dial-img { object-fit: cover; z-index: 1; }
.dial-hands { z-index: 3; pointer-events: none; }

/* ── the wash ───────────────────────────────────────────────
   Dr. Cato asked for a splash of the dial's own colour running
   down the card in waves. Three ellipses, staggered, sweeping
   top to bottom in the accent colour. Blurred and blended so it
   reads as light moving over the dial rather than a coloured
   sheet laid on top of it. */
.dial-wash {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: soft-light;
  transition: opacity .3s ease;
  /* The waves are deliberately wider than the dial so the colour
     arrives from off-edge. The round stage clips them visually, but
     a box hanging outside its parent still inflates the page's
     scroll width — which showed up as 20px of sideways scroll on a
     phone. Clipping here too costs nothing and stops that. */
  overflow: hidden;
}
.dial.is-lit .dial-wash { opacity: 1; }

.dial-wave {
  position: absolute;
  left: -25%; width: 150%;
  height: 62%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%,
              color-mix(in srgb, var(--accent) 92%, transparent) 0%,
              color-mix(in srgb, var(--accent) 38%, transparent) 45%,
              transparent 72%);
  filter: blur(9px);
  transform: translateY(-120%);
}
.dial.is-lit .dial-wave { animation: washDown 2.1s cubic-bezier(.36,.15,.28,1) infinite; }
.dial.is-lit .dial-wave:nth-child(2) { animation-delay: .34s; opacity: .72; }
.dial.is-lit .dial-wave:nth-child(3) { animation-delay: .68s; opacity: .48; }

@keyframes washDown {
  0%   { transform: translateY(-120%) scaleX(.86); opacity: 0; }
  18%  { opacity: 1; }
  72%  { opacity: .85; }
  100% { transform: translateY(190%)  scaleX(1.08); opacity: 0; }
}

/* ── the caption ────────────────────────────────────────────── */
.dial-cap {
  display: flex; flex-direction: column; align-items: center; gap: .18rem;
  padding-top: 1.05rem;
}
.dial-name {
  font-family: var(--display); font-size: 1.22rem; line-height: 1.15;
  transition: color .3s ease;
}
.dial.is-lit .dial-name { color: var(--accent); }

.dial-price {
  font-family: var(--data); font-size: .7rem; letter-spacing: .12em;
  color: var(--mute); font-variant-numeric: tabular-nums;
}

/* Held back until the card is lit — ninety blurbs at once is noise,
   one blurb on the dial you are looking at is useful. */
.dial-blurb {
  font-size: .8rem; line-height: 1.45; color: var(--mute);
  margin: .35rem 0 0; max-width: 20rem;
  opacity: 0; transform: translateY(-4px);
  max-height: 0; overflow: hidden;
  transition: opacity .32s ease, transform .32s ease, max-height .32s ease;
}
.dial.is-lit .dial-blurb { opacity: 1; transform: none; max-height: 5rem; }

/* One link covering the whole card, so the circle and its caption
   are a single target rather than three fiddly ones. */
/* One target covering the whole card. It is a <button> rather than a
   link because it opens the detail view in place — it does not go
   anywhere, and a link that does not navigate is a lie to a screen
   reader and to anyone who middle-clicks it. */
.dial-hit {
  position: absolute; inset: 0; z-index: 4;
  border: 0; padding: 0; margin: 0;
  background: transparent; color: inherit; font: inherit;
  border-radius: 12px; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.dial-hit:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 6px; }

/* Touch screens have no hover, and a permanently animating grid on a
   phone is a battery complaint. Show the blurb, hold the dial still. */
@media (hover: none) {
  .dial-blurb { opacity: 1; transform: none; max-height: 5rem; }
}

/* ── phones ───────────────────────────────────────────────────
   Two dials to a row rather than one. Ninety dials one-per-screen
   is a very long thumb, and a pair still reads at this size because
   there is no tile around them competing for the eye.

   The blurb goes: at half width it wraps to four or five lines and
   pushes the next row off the screen. Name and price carry it. */
@media (max-width: 34rem) {
  .dial-grid,
  .dial-grid--featured {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.6rem 1rem;
  }
  .dial-name { font-size: 1.02rem; }
  .dial-blurb { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .dial, .dial-stage, .dial-wash, .dial-name, .dial-blurb { transition: none; }
  .dial.is-lit { transform: none; }
  .dial.is-lit .dial-wave { animation: none; }
  .dial-blurb { opacity: 1; transform: none; max-height: 5rem; }
}
/* The featured strip on the landing page — same cards, fewer of
   them, and a size that reads as a taste rather than a catalogue. */
.dial-grid--featured {
  grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
  padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.collection-more { text-align: center; margin: 0; }
/* ══════════════════════════════════════════════════════════════
   THE REVIEW QUEUE  (/admin)

   Utilitarian on purpose. This is a working tool, not a shop
   window, and the only thing that matters is that the reviewer can
   see the facts and act on them quickly. The rights panel is the
   loudest element on the page because it is the easiest to skip
   and the most expensive to skip.
   ══════════════════════════════════════════════════════════════ */

.admin-main { padding: clamp(1.5rem, 4vw, 3rem) 0 5rem; }
.admin-tag {
  font-family: var(--data); font-size: .62rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--mute);
}

/* ── sign in ─────────────────────────────────────────────────── */
.admin-gate { max-width: 26rem; }
.admin-login { display: flex; gap: .5rem; margin-top: 1.25rem; flex-wrap: wrap; }
.admin-login input {
  flex: 1 1 14rem; min-width: 0;
  font-family: var(--body); font-size: .95rem; padding: .6rem .8rem;
  background: var(--ink); color: var(--bone); border: 1px solid var(--edge);
}
.admin-login input:focus { border-color: var(--gold); outline: none; }

/* ── counters ────────────────────────────────────────────────── */
.admin-stats {
  display: grid; gap: .75rem; margin-bottom: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
}
.admin-stat {
  border: 1px solid var(--edge); padding: .85rem 1rem;
  display: flex; flex-direction: column; gap: .15rem;
}
.admin-stat--alert { border-color: var(--gold); }
.admin-stat--warn  { border-color: #b3541e; }
.admin-stat-n { font-family: var(--display); font-size: 1.9rem; line-height: 1; font-variant-numeric: tabular-nums; }
.admin-stat-k {
  font-family: var(--data); font-size: .58rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--mute);
}

/* ── filter bar ──────────────────────────────────────────────── */
.admin-bar {
  display: flex; gap: 1rem; align-items: center; justify-content: space-between;
  flex-wrap: wrap; margin-bottom: 1.25rem;
}
.admin-filters { display: flex; gap: .4rem; flex-wrap: wrap; }
.admin-search input {
  font-family: var(--body); font-size: .85rem; padding: .45rem .7rem; min-width: 15rem;
  background: transparent; color: var(--bone); border: 1px solid var(--edge);
}
.admin-search input:focus { border-color: var(--gold); outline: none; }

/* ── the list ────────────────────────────────────────────────── */
.admin-list { display: flex; flex-direction: column; gap: .5rem; }
.admin-row {
  display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between;
  width: 100%; text-align: left; cursor: pointer;
  background: transparent; color: inherit;
  border: 1px solid var(--edge); padding: .9rem 1.05rem;
  transition: border-color .15s ease, background .15s ease;
}
.admin-row:hover { border-color: var(--gold); background: color-mix(in srgb, var(--ink) 70%, transparent); }
.admin-row-main { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.admin-row-top { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.admin-ref { font-family: var(--data); font-size: .78rem; letter-spacing: .06em; color: var(--gold); }
.admin-row-name { font-family: var(--display); font-size: 1.1rem; }
.admin-row-sub { font-size: .78rem; color: var(--mute); overflow-wrap: anywhere; }
.admin-row-side { display: flex; flex-direction: column; align-items: flex-end; gap: .2rem; flex-shrink: 0; }
.admin-row-price { font-family: var(--data); font-size: .85rem; font-variant-numeric: tabular-nums; }
.admin-row-when { font-size: .72rem; color: var(--mute); white-space: nowrap; }

/* ── status chips ────────────────────────────────────────────── */
.admin-chip {
  font-family: var(--data); font-size: .58rem; letter-spacing: .14em;
  text-transform: uppercase; padding: .2rem .5rem;
  border: 1px solid var(--edge); color: var(--mute); white-space: nowrap;
}
.admin-chip--new            { border-color: var(--gold);  color: var(--gold); }
.admin-chip--reviewing      { border-color: #4a7fb5;      color: #7fb0dd; }
.admin-chip--needs_customer { border-color: #b3541e;      color: #dd8a4e; }
.admin-chip--approved       { border-color: #2f7d5a;      color: #5fc198; }
.admin-chip--delivered      { border-color: #2f7d5a;      color: #5fc198; }
.admin-chip--rejected       { border-color: #8f2b2b;      color: #d07575; }
.admin-chip--cancelled      { border-color: var(--edge);  color: var(--mute); }
.admin-chip--image          { border-color: #7a5bb5;      color: #b294e0; }

/* ── one order ───────────────────────────────────────────────── */
.admin-detail-head { display: flex; align-items: center; gap: .8rem; margin: 1.25rem 0 1rem; flex-wrap: wrap; }
.admin-detail-head h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); }
.admin-h2 { margin: 2rem 0 .75rem; font-size: 1.25rem; }

.admin-detail-grid {
  display: grid; gap: clamp(1.25rem, 3vw, 2.25rem);
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  align-items: start;
}

.admin-dl { display: grid; grid-template-columns: max-content 1fr; gap: .45rem 1rem; margin: 0; }
.admin-dl dt {
  font-family: var(--data); font-size: .58rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--mute); padding-top: .18rem;
}
.admin-dl dd { margin: 0; overflow-wrap: anywhere; }

/* The rights panel. Deliberately the loudest thing on the page. */
.admin-rights {
  border: 1px solid #7a5bb5; border-left-width: 4px;
  padding: 1rem 1.25rem; margin-bottom: 1.5rem;
  background: color-mix(in srgb, #7a5bb5 8%, transparent);
}
.admin-rights--bad {
  border-color: #b53b3b;
  background: color-mix(in srgb, #b53b3b 12%, transparent);
}
.admin-rights h2 { font-size: 1.1rem; margin-bottom: .4rem; }
.admin-rights-tick { font-weight: 600; margin: 0 0 .6rem; }
.admin-rights-label {
  font-family: var(--data); font-size: .58rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--mute); margin: 0 0 .3rem;
}
.admin-rights-quote {
  margin: 0 0 .75rem; padding-left: .9rem;
  border-left: 2px solid var(--edge); font-style: italic; overflow-wrap: anywhere;
}
.admin-rights-help { font-size: .8rem; color: var(--mute); margin: 0; line-height: 1.5; }

/* ── actions ─────────────────────────────────────────────────── */
.admin-actions h2 { font-size: 1.1rem; margin: 1.25rem 0 .5rem; }
.admin-actions h2:first-child { margin-top: 0; }
.admin-field { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .75rem; }
.admin-field label { font-size: .78rem; color: var(--mute); }
.admin-field textarea {
  font-family: var(--body); font-size: .88rem; padding: .55rem .7rem; resize: vertical;
  background: var(--ink); color: var(--bone); border: 1px solid var(--edge); width: 100%;
}
.admin-field textarea:focus { border-color: var(--gold); outline: none; }
.admin-btnrow { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .5rem; }
.btn--danger { border-color: #8f2b2b; color: #d07575; }
.btn--danger:hover { background: #8f2b2b; color: var(--bone); }
.admin-hint { font-size: .76rem; color: var(--mute); line-height: 1.5; margin: .3rem 0 0; }

/* ── history ─────────────────────────────────────────────────── */
.admin-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.admin-event { border-left: 2px solid var(--edge); padding: .5rem 0 .5rem .9rem; }
.admin-event--status      { border-left-color: var(--gold); }
.admin-event--message_out { border-left-color: #4a7fb5; }
.admin-event--note        { border-left-color: var(--mute); }
.admin-event-head { display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; }
.admin-event-actor {
  font-family: var(--data); font-size: .58rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold);
}
.admin-event-kind { font-size: .74rem; color: var(--mute); }
.admin-event-when { font-size: .7rem; color: var(--mute); margin-left: auto; white-space: nowrap; }
.admin-event-body { margin: .3rem 0 0; font-size: .88rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.admin-event-meta { margin: .2rem 0 0; font-size: .74rem; color: var(--mute); }

@media (max-width: 34rem) {
  .admin-row { flex-direction: column; gap: .5rem; }
  .admin-row-side { align-items: flex-start; }
  .admin-search input { min-width: 0; width: 100%; }
  .admin-dl { grid-template-columns: 1fr; gap: .15rem; }
  .admin-dl dd { margin-bottom: .5rem; }
}
/* ══════════════════════════════════════════════════════════════
   THE ATELIER  (/atelier)

   The page answers one question before anyone pays: what will my
   name actually look like on this? So the preview is the largest
   thing on it, and the form sits beside rather than above it.
   ══════════════════════════════════════════════════════════════ */

.atl { padding-bottom: clamp(3rem, 7vw, 5rem); }
.pt-0 { padding-top: 0; }

.atl-grid {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 62rem) {
  .atl-grid { grid-template-columns: 1.05fr .95fr; }
}

/* ── the dial ────────────────────────────────────────────────── */
.atl-preview { position: sticky; top: 6rem; }
@media (max-width: 62rem) { .atl-preview { position: static; } }

.atl-dial {
  position: relative; width: 100%; max-width: 32rem;
  aspect-ratio: 1; margin-inline: auto;
  border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 1px var(--edge), 0 26px 60px -30px rgba(0,0,0,.95);
}
.atl-dial::before {
  content: ""; position: absolute; inset: -10%; border-radius: 50%;
  background: radial-gradient(circle, rgba(201,151,63,.14) 0%, transparent 68%);
  pointer-events: none;
}
.atl-dial img, .atl-dial canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
}
.atl-dial canvas { pointer-events: none; }

.atl-caption {
  margin: 1.1rem auto 0; max-width: 26rem; text-align: center;
  font-size: .82rem; line-height: 1.55; color: var(--mute);
}

/* ── the form ────────────────────────────────────────────────── */
.atl-form { display: flex; flex-direction: column; gap: 1.5rem; }
.atl-form[hidden] { display: none; }

.atl-field {
  display: flex; flex-direction: column; gap: .45rem;
  border: 0; padding: 0; margin: 0; min-width: 0;
}
.atl-field > label, .atl-field > legend {
  font-family: var(--data); font-size: .62rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--mute); padding: 0;
}
.atl-opt { text-transform: none; letter-spacing: .04em; opacity: .7; }

.atl-field input {
  font-family: var(--body); font-size: 1.02rem; padding: .7rem .85rem;
  background: var(--ink); color: var(--bone); border: 1px solid var(--edge);
  width: 100%; min-width: 0;
}
.atl-field input:focus { border-color: var(--gold); outline: none; }
.atl-field input::placeholder { color: color-mix(in srgb, var(--mute) 70%, transparent); }

.atl-hint { font-size: .78rem; line-height: 1.5; color: var(--mute); margin: 0; }
.atl-hint--foot { margin-top: -.4rem; }

/* ── choosing a dial ─────────────────────────────────────────── */
.atl-swatches {
  display: grid; gap: .6rem;
  grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr));
}
.atl-swatch {
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  background: transparent; border: 0; padding: .2rem; cursor: pointer;
  color: var(--mute); font-family: var(--body); font-size: .68rem;
  transition: color .18s ease;
}
.atl-swatch img {
  width: 100%; aspect-ratio: 1; border-radius: 50%;
  box-shadow: 0 0 0 1px var(--edge);
  transition: box-shadow .18s ease, transform .18s ease;
}
.atl-swatch:hover { color: var(--bone); }
.atl-swatch:hover img { transform: scale(1.05); }
.atl-swatch[aria-pressed="true"] { color: var(--gold); }
.atl-swatch[aria-pressed="true"] img {
  box-shadow: 0 0 0 2px var(--void), 0 0 0 3.5px var(--gold);
}
.atl-chosen { font-size: .82rem; color: var(--mute); margin: .3rem 0 0; }
.atl-chosen b { color: var(--bone); font-weight: 400; }

/* ── price and submit ────────────────────────────────────────── */
.atl-price {
  display: flex; align-items: baseline; gap: .6rem;
  border-top: 1px solid var(--edge); padding-top: 1.1rem;
}
.atl-price-n { font-family: var(--display); font-size: 2.1rem; line-height: 1; }
.atl-price-k { font-size: .82rem; color: var(--mute); }
.atl-submit { align-self: flex-start; }

/* ── after ordering, and before opening ──────────────────────── */
.atl-done, .atl-empty {
  display: flex; flex-direction: column; gap: .9rem; align-items: flex-start;
  border: 1px solid var(--edge); padding: clamp(1.5rem, 4vw, 2.5rem);
}
.atl-done[hidden], .atl-empty[hidden] { display: none; }
.atl-done b { color: var(--gold); font-family: var(--data); letter-spacing: .08em; }
.atl-empty { max-width: 42rem; margin-bottom: 2rem; }
/* ══════════════════════════════════════════════════════════════
   LOOKING CLOSER — the dial detail view

   Clicking a dial should feel like being handed the watch rather
   than like following a link. The page dims and falls back; the
   dial comes forward standing on its own reflection, the way a
   watch sits on a polished counter under a shop light.
   ══════════════════════════════════════════════════════════════ */

.look {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
}
.look[hidden] { display: none; }

/* The page behind: darkened and pushed out of focus. */
.look-scrim {
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--void) 82%, transparent);
  backdrop-filter: blur(18px) saturate(.7);
  -webkit-backdrop-filter: blur(18px) saturate(.7);
  opacity: 0;
  transition: opacity .34s ease;
}
.look.is-open .look-scrim { opacity: 1; }

body.look-locked { overflow: hidden; }

.look-panel {
  position: relative; z-index: 1;
  display: grid; gap: clamp(1.5rem, 4vw, 3.5rem);
  grid-template-columns: 1fr;
  align-items: center;
  width: min(100%, 62rem);
  max-height: 100%;
  overflow-y: auto;
  opacity: 0;
  transform: translateY(18px) scale(.97);
  transition: opacity .34s ease, transform .34s cubic-bezier(.22,.7,.3,1);
}
.look.is-open .look-panel { opacity: 1; transform: none; }
@media (min-width: 54rem) {
  .look-panel { grid-template-columns: 1.05fr .95fr; }
}

.look-close {
  position: absolute; top: 0; right: 0; z-index: 3;
  width: 2.6rem; height: 2.6rem; line-height: 1;
  font-size: 1.6rem; font-family: var(--body);
  background: transparent; color: var(--mute);
  border: 1px solid var(--edge); cursor: pointer;
  transition: color .18s ease, border-color .18s ease;
}
.look-close:hover { color: var(--bone); border-color: var(--mute); }

/* ── the dial and the pool it stands in ──────────────────────── */
/* The padding reserves room for the reflection. Without it the pool
   is absolutely positioned past the panel's edge and forces a
   scrollbar — a decorative element should never do that. */
/* The stage is sized to hold the dial AND its reflection, so the
   layout accounts for both. Getting this wrong is what made a purely
   decorative reflection push a scrollbar into the panel: margins do
   not extend a scroll container's overflow, and absolutely positioned
   children do. Real height, everything inside it. */
.look-stage {
  position: relative;
  width: 100%; max-width: 23rem;
  margin-inline: auto;
  aspect-ratio: 1 / 1.34;      /* dial (1) + reflection (0.34) */
}

.look-disc {
  position: absolute; top: 0; left: 0; right: 0;
  aspect-ratio: 1;
  border-radius: 50%; overflow: hidden;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent),
    0 0 60px -12px color-mix(in srgb, var(--accent) 38%, transparent),
    0 30px 60px -30px rgba(0,0,0,.95);
}
.look-img, .look-hands {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
}
.look-hands { pointer-events: none; }

/* The reflection. A second copy, flipped, masked to fade out, and
   softened — it is a wet surface, not a mirror. It runs its own
   copy of the hands so the reflected seconds hand sweeps in step;
   a static reflection under a moving watch reads as wrong at once. */
/* Sits immediately under the dial (74.63% = 1 / 1.34) and is clipped
   to the part the mask actually shows, so it never overflows. Flipped
   as a whole, so the content nearest the dial is the dial's own lower
   edge — which is what a reflection shows first. */
.look-pool {
  position: absolute; left: 0; right: 0;
  top: 74.63%; height: 25.37%;
  overflow: hidden;
  transform: scaleY(-1);
  opacity: .30;
  filter: blur(2px) saturate(.75);
  -webkit-mask-image: linear-gradient(to top, transparent 2%, rgba(0,0,0,.9) 88%);
  mask-image: linear-gradient(to top, transparent 2%, rgba(0,0,0,.9) 88%);
  pointer-events: none;
}
/* Inside the clipped pool the dial keeps its full square size, so the
   reflection matches the dial above rather than being squashed. */
.look-pool .look-img,
.look-pool .look-hands {
  position: absolute; top: 0; left: 0;
  width: 100%; height: auto; inset: auto;
}

/* ── the words ───────────────────────────────────────────────── */
.look-side { display: flex; flex-direction: column; align-items: flex-start; gap: .85rem; }
.look-family { color: var(--accent); }
.look-name { font-size: clamp(2rem, 5vw, 3rem); line-height: 1.04; }
.look-blurb { font-size: 1.02rem; line-height: 1.6; color: var(--mute); max-width: 28rem; }

.look-facets {
  list-style: none; margin: .4rem 0 0; padding: 0;
  display: grid; gap: .4rem; width: 100%; max-width: 28rem;
}
.look-facets li {
  display: flex; gap: 1rem; align-items: baseline;
  border-bottom: 1px solid var(--edge); padding-bottom: .4rem;
}
.look-facet-k {
  font-family: var(--data); font-size: .58rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--mute); min-width: 5.5rem;
}
.look-facet-v { font-size: .9rem; text-transform: capitalize; }

.look-price {
  font-family: var(--display); font-size: 2rem; line-height: 1;
  margin-top: .5rem;
}
.look-buy { margin-top: .3rem; }

/* On a phone the reflection eats the screen, so it goes — and the
   stage stops reserving room for it, or the dial sits in 34% of dead
   space. */
@media (max-width: 54rem) {
  .look-pool { display: none; }
  .look-stage { aspect-ratio: 1; max-width: 19rem; }
  .look-panel { align-content: start; padding-top: 3rem; }
}

@media (prefers-reduced-motion: reduce) {
  .look-scrim, .look-panel { transition: none; }
  .look-panel { opacity: 1; transform: none; }
}
/* ── the brand mark ──────────────────────────────────────────────
   The logo replaces the old text wordmark. Two files rather than
   one: the artwork's wordmark is near-black, which is invisible on
   the dark theme, so a bone-ink version exists alongside it. Only
   one is ever shown. */
.brand {
  display: inline-flex; align-items: center;
  line-height: 0;
}
.brand-mark {
  width: auto; height: 2.35rem;
  max-width: 60vw;
  display: block;
}
@media (max-width: 30rem) { .brand-mark { height: 1.9rem; } }

/* Dark ink on the light theme, bone ink on the dark theme. */
.brand-mark--light { display: none; }
:root[data-theme="light"] .brand-mark--dark  { display: none; }
:root[data-theme="light"] .brand-mark--light { display: block; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .brand-mark--dark  { display: none; }
  :root:not([data-theme="dark"]) .brand-mark--light { display: block; }
}