/* Classical — design-system tokens and component classes. This file is the source of truth for the system's look; retune it here and see readme.md. */
@import url('assets/fonts.css');

:root {
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201f1d;
  --color-accent: #b68235;
  --color-accent-2: #ac803e;
  --color-divider: color-mix(in srgb, #201f1d 16%, transparent);

  /* Tonal ramps — generated in OKLCH on one shared lightness scale, so the
     same step of any role matches the others in visual value. */
  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  --color-accent-100: #fff3e4;
  --color-accent-200: #ffe3bf;
  --color-accent-300: #facb8d;
  --color-accent-400: #e1ad66;
  --color-accent-500: #c28d41;
  --color-accent-600: #a06f24;
  --color-accent-700: #7d5411;
  --color-accent-800: #5a3b0a;
  --color-accent-900: #3a270d;

  --color-accent-2-100: #fff3e4;
  --color-accent-2-200: #ffe3be;
  --color-accent-2-300: #f5cd96;
  --color-accent-2-400: #dbaf70;
  --color-accent-2-500: #bc8f4e;
  --color-accent-2-600: #9b7232;
  --color-accent-2-700: #79561f;
  --color-accent-2-800: #573d14;
  --color-accent-2-900: #382810;

  --font-heading: "Cormorant Garamond", system-ui, sans-serif;
  --font-heading-weight: 600; /* review round 3: bold retired — semibold is the
     interface headings' ceiling (they need the weight at small sizes); display
     text goes lighter still, to the normal cut (see the deck) */
  --font-body: "Lora", system-ui, sans-serif;

  --space-1: 4.6px;
  --space-2: 9.2px;
  --space-3: 13.8px;
  --space-4: 18.4px;
  --space-6: 27.6px;
  --space-8: 36.8px;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 7px;

  /* Elevation — derived from the ground: soft ink-tinted shadows on a
     light theme, a hairline edge + ambient darkness on a dark one. */
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }

.plate{filter:sepia(0.22) saturate(0.82) contrast(1.05);box-sizing:border-box;
  border:6px solid var(--color-surface);outline:1px solid var(--color-divider)}
/* A grid item stretched to the row height *and* carrying an aspect-ratio has
   its width derived from that height, so it pushes past its own track — the
   trap in readme.md § Implementation notes 4. The bespoke pair is the one
   place a plate is a grid item itself rather than sitting inside a figure. */
[style*="grid-template-columns:1fr 1fr; gap:20px"] > .plate{align-self:start}
/* Homepage hero: the framed shot should fill its column, so its caption sits at
   the foot of the column and the inset plate has clear artwork to overlap. Left
   to itself the figure hugs its content and the caption floats mid-column,
   right where the inset plate lands. */
[style*="position:relative; min-height:0; display:flex; flex-direction:column"] > figure{flex:1}

/* ══════════════════════════════════════════════════════════════════════════
   Components — built with the tokens above. Plain CSS
   on plain HTML: no JavaScript, no build step. Each class is documented in
   readme.md and demonstrated in foundations/ and components/.
   ══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; }
h6 { letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption {
  font-size: 11px; margin-top: var(--space-1);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* — rules — */
.hr {
  height: 1px; border: 0; margin: var(--space-4) 0;
  background: var(--color-divider);
}

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text); /* matches the .input's 14px —
     the pair sits side by side in sign-up rows */
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { color: var(--color-accent); border-color: var(--color-accent); }
.btn-primary:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.btn-primary:active { background: color-mix(in srgb, var(--color-accent) 22%, transparent); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); }

/* — forms — */
.field > label {
  display: block; font-size: 12px; margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: transparent;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }
.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.radio input, .seg-opt input {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.radio .dot {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--color-divider);
}
.radio:hover .dot { border-color: var(--color-accent); }
.radio input:checked + .dot {
  border-color: var(--color-accent); background: var(--color-accent);
  box-shadow: inset 0 0 0 4px var(--color-bg);
}
.radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.seg {
  display: inline-flex; overflow: hidden;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.seg-opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; font-size: 13px; cursor: pointer;
}
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg-opt:has(input:checked) { color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
.seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* — cards — */
.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3); border-radius: var(--radius-md); background: transparent; border: 1px solid var(--color-divider);
}
.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.card-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 17px; line-height: 1.2;
}
.card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; }
.card-meta {
  display: flex; align-items: center; gap: 6px; font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

/* — tags — */
.tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: 0.02em; padding: 3px 10px;
  border-radius: calc(var(--radius-md) * 0.75);
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

/* — navigation — */
.nav {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-divider);
}
.nav-brand {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18px; margin-right: auto;
}
.nav a { color: inherit; text-decoration: none; font-size: 14px; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); }

/* — tables — */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: var(--space-2); border-bottom: 1px solid var(--color-divider);
}
.table td {
  padding: var(--space-2);
  border-bottom: 1px solid var(--color-divider);
}
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }

/* — dialog — */
.dialog-backdrop {
  position: fixed; inset: 0; display: grid; place-items: center;
  padding: var(--space-4);
  background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
}
.dialog {
  width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4); border-radius: var(--radius-lg);
  background: var(--color-surface); box-shadow: var(--shadow-lg); border: 1px solid var(--color-divider);
}
.dialog-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 20px;
}
.dialog-body { font-size: 14px; opacity: 0.85; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }


/* ══════════════════════════════════════════════════════════════════════════
   Responsive layer — added after the handoff, which was desktop-only.

   The prototypes carry no classes: every box is an anonymous <div> with an
   inline style, and inline styles beat any stylesheet rule. So the only hook
   is the inline declaration itself, matched as a substring, and every override
   needs !important. The strings below are copied verbatim from the two .dc.html
   prototypes; build.py passes style attributes through untouched, so what
   matches there matches in site/.

   Edit a prototype's inline style and the matching rule here silently stops
   applying. tests/layout.mjs is what catches that: it checks overflow,
   clipping, overlap, images and tap targets on every page at 14 viewports.
   ══════════════════════════════════════════════════════════════════════ */

/* — below the 1280px wrap: tighten the gutters, unpack the two bars that
     assume a wide row, and drop the widest grids by one column — */
@media (max-width: 1100px) {
  [style*="max-width:var(--wrap)"] { padding-inline: 24px !important; }

  /* nav row: the ten category links can't share a line with the cart cluster,
     so they take a line of their own and scroll sideways within it */
  [style*="height:54px"], [style*="height:56px"],
  [style*="height:60px"], [style*="height:88px"] {
    height: auto !important; flex-wrap: wrap !important;
    padding-block: 8px !important; row-gap: 6px !important;
  }
  nav {
    flex: 1 1 100% !important; order: 2 !important; gap: 14px !important;
    overflow-x: auto !important; scrollbar-width: none;
  }
  nav::-webkit-scrollbar { display: none; }
  nav a { padding: 10px 6px !important; }  /* a 4-letter link still gets a 30px target */

  /* the gold-rate ticker scrolls rather than clipping its last rate */
  [style*="height:42px"][style*="white-space:nowrap"],
  [style*="height:44px"][style*="white-space:nowrap"] {
    height: auto !important; padding-block: 9px !important;
    overflow-x: auto !important; overflow-y: hidden !important;
    scrollbar-width: none;
  }

  [style*="grid-template-columns:repeat(5,1fr)"],
  [style*="grid-template-columns:repeat(var(--cols),1fr)"] {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* the nastaliq wordmark is set in fixed px per treatment (80/96/132/152) —
     make each one fluid against its own ceiling */
  [style*="font-size:clamp(56px, 5.2vw, 80px)"] { font-size: clamp(34px, 7vw, 80px) !important; }
  [style*="font-size:clamp(72px, 9vw, 132px)"] { font-size: clamp(38px, 9vw, 132px) !important; }
  [style*="font-size:96px"]  { font-size: clamp(36px, 9vw, 96px) !important; }
  [style*="font-size:152px"] { font-size: clamp(40px, 13vw, 152px) !important; }
  [style*="font-size:44px"]  { font-size: clamp(24px, 4.4vw, 44px) !important; }

  /* the inset plate on the homepage hero is pinned 52px off the bottom, which
     is inside the caption once the caption wraps to two lines — lift it clear */
  [style*="width:196px"] { bottom: 78px !important; }
}

/* — phone: one or two columns, the floating plates come inline, headings and
     gutters come down to size — */
@media (max-width: 760px) {
  [style*="max-width:var(--wrap)"] { padding-inline: 16px !important; }

  [style*="grid-template-columns:repeat(5,1fr)"],
  [style*="grid-template-columns:repeat(var(--cols),1fr)"],
  [style*="grid-template-columns:repeat(4,minmax(0,1fr))"],
  [style*="grid-template-columns:repeat(3,1fr); gap:46px 34px"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  [style*="grid-template-columns:minmax(0,1fr) 1.12fr"],
  [style*="grid-template-columns:minmax(0,1fr) minmax(0,1fr)"],
  [style*="grid-template-columns:minmax(0,1fr) minmax(0,1.24fr) minmax(0,1fr)"],
  [style*="grid-template-columns:230px 1fr"],
  [style*="max-width:var(--wrap)"][style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
  }
  [style*="grid-template-columns:1.3fr 1fr 1fr 1.1fr"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="columns:2; column-gap"] { columns: 1 !important; column-rule: 0 !important; }
  [style*="gap:64px"], [style*="gap:72px"], [style*="gap:56px"] { gap: 30px !important; }

  /* stacked columns don't need justified rag — it opens rivers at this width */
  [style*="text-align:justify"] { text-align: start !important; }
  /* any two-ended row (section head, price line, caption, colophon) folds */
  [style*="justify-content:space-between"] { flex-wrap: wrap !important; }
  /* the ticker stops scrolling and simply wraps: a phone shouldn't hide the
     third gold rate behind a swipe nobody knows is there. The hairlines that
     separated the rates on one line make no sense once they're on several. */
  [style*="height:42px"][style*="white-space:nowrap"],
  [style*="height:44px"][style*="white-space:nowrap"] {
    white-space: normal !important; overflow: visible !important;
    column-gap: 16px !important; row-gap: 2px !important;
  }
  [style*="width:1px; height:14px"], [style*="width:1px; height:13px"] { display: none !important; }
  [style*="display:flex; align-items:center; gap:22px"],
  [style*="display:flex; align-items:center; gap:20px"] { flex-wrap: wrap !important; }

  /* so does a call-to-action pair — the two labels don't share 320px */
  [style*="display:flex; gap:12px"],
  [style*="display:flex"][style*="justify-content:center"] { flex-wrap: wrap !important; }

  h1 { font-size: clamp(23px, 6.2vw, 32px) !important; line-height: 1.6 !important; }
  h2 { font-size: clamp(21px, 5.4vw, 27px) !important; }
  h3 { font-size: clamp(15px, 3.9vw, 17px) !important; }
  [style*="font-family:var(--nastaliq); font-size:40px"] { font-size: 30px !important; }

  /* homepage hero: the inset plate shrinks and tucks inside the frame instead
     of hanging 56px off the start edge, where it would leave the viewport */
  [style*="width:196px"] {
    width: 104px !important; inset-inline-start: 6px !important; bottom: 86px !important;
  }
  /* 1a: the 432px copy card stops floating over the plate and follows it */
  [style*="width:432px"] {
    position: static !important; width: auto !important;
    margin-top: 16px !important; padding: 22px 18px 20px !important;
  }
  /* 1a plate: 46vw is a letterbox on a phone — a ratio reads better. Never
     both a ratio and a height (see design/README.md § Implementation notes). */
  [style*="height:min(620px, 46vw)"] {
    height: auto !important; aspect-ratio: 4/5 !important; border-width: 6px !important;
  }
  [style*="margin-top:82px"] { margin-top: 26px !important; gap: 24px !important; flex-wrap: wrap !important; }
  [style*="position:sticky; top:32px"] { position: static !important; }

  /* 2a: the full-screen panel sizes to its content once the bars wrap */
  [style*="height:min(100vh, 1040px)"] { height: auto !important; min-height: 100svh !important; }
  [style*="padding:12px 12px 0"] { padding: 0 !important; }
  [style*="justify-content:center; text-align:center; padding:40px"] { padding: 34px 16px !important; }
  [style*="height:70px"] { height: auto !important; flex-wrap: wrap !important; padding-block: 12px !important; }
  [style*="gap:14px; white-space:nowrap"] { white-space: normal !important; flex-wrap: wrap !important; }
  [style*="padding:88px 40px 0"] { padding-top: 44px !important; }

  /* assurances: three bordered columns become three stacked, ruled rows */
  [style*="padding:44px"] { padding-block: 26px !important; padding-inline: 0 !important; }
  [style*="border-inline-start:1px solid var(--color-divider); border-inline-end"] {
    border-inline: 0 !important;
    border-block: 1px solid var(--color-divider) !important;
  }
  /* hero stat trio stays three across — just tighter */
  [style*="grid-template-columns:repeat(3,1fr); gap:24px"] { gap: 10px !important; }
  [style*="border-inline-start:1px solid var(--color-divider); padding-inline-start:24px"] {
    padding-inline-start: 10px !important;
  }
}

/* — the narrowest phones still in use: the footer's four menus go single file — */
@media (max-width: 400px) {
  [style*="grid-template-columns:1.3fr 1fr 1fr 1.1fr"] { grid-template-columns: 1fr !important; }
}

/* — landscape phones: a 100vh panel with a 680px floor is taller than the
     screen twice over; let it size to content instead — */
@media (max-height: 700px) {
  [style*="height:min(100vh, 1040px)"] { height: auto !important; min-height: 0 !important; }
}