/* ==========================================================================
   nown-plate.css — S.I.T.E.S Plate
   Design tokens, reset, the plate (root viewport), the breakpoint-free grid,
   and theming. This is the framework's single source of truth for values.
   Tiles (now-tiles.css) and any site override MUST use these tokens.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Colors — "Warm Paper & Brass".
     Warm cream papers, brass, aubergine, violet and olive-navy rules: the style of the NownCard
     product site, adopted here as the framework DEFAULT so a customer site starts from it rather
     than from a generic grey. Every value is a token, so all of it is re-themable from the content
     file or the admin.

     Three conventions, carried over deliberately because they are why that palette holds up:
       - THE BRASS IS SPLIT. `--color-accent` is a FILL — 1.7:1 as text, so it is never text —
         and `--color-accent-text` is the same colour dark enough to write with (4.83:1 on the
         page). This is also the fix for a documented failure: `accent on background` used to
         measure 4.04:1 and nothing checked it.
       - `--color-border` is a RULE, not a divider. Held to >=3:1 against both the page and a
         tile, because it is what makes a tile read as one unit.
       - `--color-on-primary` is NEW. `--color-on-accent` used to mean "text on any coloured
         button", which cannot survive a light accent: brass needs dark text, aubergine needs
         light, and one token cannot be both. */
  --color-background: #F3E7D1;   /* page/plate atmosphere — warm sand  */
  --color-surface:    #FBF7F0;   /* tile surface — raised card stock   */
  --color-surface-2:  #F5EDDD;   /* subtle fills, alternating bands    */
  /* The tile BOUNDARY, distinct from surface-2 on purpose. surface-2 is a 1.03:1 whisper
     against the page — right for a subtle fill, useless as a boundary, and it was the reason
     every tile had a border and none of them looked bounded. Held to >=3:1 against BOTH:
     3.41:1 on the page, 3.91:1 on a tile. */
  --color-border:     #8C7A55;
  --color-text:       #1A1612;   /* warm near-black                    */
  /* Secondary text. It carries hints, status lines, idle tabs and annotations, so it is held to
     >=4.5:1 on BOTH the page and a tile — 4.94:1 and 5.66:1. Measured, not eyeballed; the value
     before last was close enough to the floor that it looked fine until it was checked. */
  --color-text-muted: #6B6157;
  --color-primary:    #2B1B52;   /* aubergine — brand primary          */
  --color-primary-light: #3A2568;
  --color-accent:     #F5B940;   /* brass — FILLS ONLY, never text     */
  --color-accent-text: #8A5A12;  /* dark bronze — the accent AS TEXT   */
  /* The warm complement, as its own role: the darker brass that carries text. `btn-gold-tactile`
     reads the highlight, which is what makes a gold button legible rather than merely bright. */
  --color-highlight:      #C1913A;
  --color-highlight-deep: #A8762A;
  --color-highlight-deep-2: #8A5A12;
  --color-highlight-on:   #1A1408;
  --color-accent-light: #D9A63F;
  --color-accent-deep:  #C1913A;
  --color-plum:       #6D3BB0;   /* violet — badge / second accent      */
  --color-primary-deep: #1D1238;  /* tactile-button depth               */
  --color-accent-deep-2: #8A5A12; /* tactile-button depth               */
  --color-plum-deep:  #4B2680;
  --color-on-accent:  #1A1408;    /* text ON BRASS (10.37:1)             */
  --color-on-primary: #FBF7F0;    /* text on AUBERGINE / violet fills    */
  /* Semantic feedback. Used as TEXT on a surface, so they are dark enough in the light palette
     and light enough in the dark one — a single value cannot satisfy both, which is why they are
     roles rather than one-off colours. There is no matching `on-` pair: these are text, not chips.
     Measured against the tile surfaces: green 6.80:1, red 6.06:1. */
  --color-success:    #05634A;
  --color-danger:     #B91C1C;
  /* Translucent surfaces (also theme-editable) */
  --color-glass:        rgba(251,247,240,.70);
  --color-glass-border: rgba(140,122,85,.35);
  --color-dock:         rgba(251,247,240,.88);
  --color-dock-border:  rgba(140,122,85,.40);

  /* Type */
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: Georgia, "Times New Roman", serif;
  --text-base: 1rem;
  --text-lead: 1.125rem;
  --leading: 1.65;

  /* Spacing */
  --space-1: 0.25rem;  --space-2: 0.5rem;  --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.25rem; --space-6: 1.5rem;
  --space-8: 2rem;     --space-10: 2.5rem; --space-12: 3rem;
  --space-16: 4rem;    --space-20: 5rem;

  /* Radii */
  --radius-sm: 0.5rem; --radius-md: 0.75rem; --radius-lg: 1rem;
  --radius-xl: 1.5rem; --radius-pill: 999px;

  /* Shadows */
  --shadow-card:    0 2px 16px -4px rgba(30, 77, 79, 0.06);
  --shadow-elevated: 0 8px 32px -6px rgba(30, 77, 79, 0.10);
  --shadow-float:   0 16px 40px -10px rgba(30, 77, 79, 0.12);
  /* Tactile-button depth. The values live here, not in the tile stylesheet: rule 3
     says a component may only reference tokens, and the button's inner highlight
     and drop shadow are exactly the kind of value that belongs in the palette. */
  /* The tactile button, as four layers rather than one blur: a highlight along the top (light
     coming from above), a shade inside the bottom of the face, and a soft drop underneath. The
     HARD edge — the layer that makes a button look pressed out of a sheet rather than floating —
     is the button's own 4px bottom border in its `-deep` colour, which is why there is no blurred
     edge layer here. Two mechanisms, one job each: the border is the edge, these are the light. */
  --shadow-tactile:
    inset 0 1px 0 rgba(255, 255, 255, .45),
    inset 0 -2px 3px rgba(0, 0, 0, .12),
    0 5px 10px rgba(0, 0, 0, .16);
  --shadow-tactile-active:
    inset 0 2px 5px rgba(0, 0, 0, .18),
    inset 0 1px 0 rgba(255, 255, 255, .12),
    0 1px 2px rgba(0, 0, 0, .10);

  /* The tactile button's face lighting. White and black at low alpha rather than a colour, so it
     lights any fill the same way and needs no per-variant copy. Declared here because rule 3 keeps
     literal values in `:root` — the tile stylesheet may only reference tokens. */
  --gradient-tactile: linear-gradient(180deg,
    rgba(255, 255, 255, .30) 0%,
    rgba(255, 255, 255, .06) 45%,
    rgba(0, 0, 0, .10) 100%);

  /* Media chrome: the letterbox behind a video and the scrim over its placeholder.
     Genuinely black and genuinely white — not themed — which is why they are their
     own tokens rather than reused colour roles. */
  --color-media-void:   #000000;
  --color-on-media:     #FFFFFF;
  --scrim-media:        linear-gradient(180deg, rgba(0, 0, 0, .20), rgba(0, 0, 0, .55));

  /* Grid knobs */
  --grid-min: 300px;        /* floor for the automatic grid's tracks */
  --grid-gap: var(--space-6);
  --grid-cols: 12;          /* columns in the configured grid (wide containers) */
  --grid-cols-narrow: 6;    /* columns in the configured grid (narrow containers) */
}

/* --------------------------------------------------------------------------
   2. Dark theme — token overrides only
   -------------------------------------------------------------------------- */
[data-theme="dark"] {
  /* The same palette inverted. Brass stays brass — it is the one colour that works on both
     papers — and the surfaces become deep navy so it reads. `--color-primary` inverts to a pale
     lilac, which is why `--color-on-primary` exists: the dark-mode primary fill needs DARK text
     where the light-mode one needs light. */
  --color-background: #102457;   /* deep navy */
  --color-surface:    #16306B;
  --color-surface-2:  #1A2235;
  /* Brass-trimmed rules rather than grey dividers, at 4.33:1 on the page and 3.66:1 on a tile. */
  --color-border:     #A8862F;
  --color-text:       #F8F9FC;
  --color-text-muted: #A9B1C2;
  --color-primary:    #B9A6F0;
  --color-primary-light: #C9BAF5;
  --color-accent:     #F5B940;   /* still a FILL */
  --color-accent-text: #F5B940;  /* in dark the brass itself is text-safe: 8.42:1 */
  --color-highlight:      #F5B940;
  --color-highlight-deep: #C1913A;
  --color-highlight-deep-2: #8A5A12;
  --color-highlight-on:   #1A1408;
  --color-accent-light: #FFC95E;
  --color-accent-deep:  #C1913A;
  --color-accent-deep-2: #8A5A12;
  --color-plum:       #A78BFA;
  --color-plum-deep:  #6D3BB0;
  --color-primary-deep: #8F79D8;
  --color-on-accent:  #1A1408;
  --color-on-primary: #2B1B52;
  /* Feedback colours INVERT for the dark palette: the same dark red that reads on a light
     surface measures well under 3:1 on navy. This is the same trap the dark palette already hit
     once with accent/on-accent. */
  --color-danger:     #F87171;
  --color-success:    #34D399;
  --color-glass:        rgba(22,48,107,.65);
  --color-glass-border: rgba(168,134,47,.28);
  --color-dock:         rgba(22,48,107,.88);
  --color-dock-border:  rgba(168,134,47,.35);
}

/* --------------------------------------------------------------------------
   3. Base / reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video, picture { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4, h5, h6 { line-height: 1.2; letter-spacing: -0.01em; font-family: var(--font-display); font-weight: 700; }
p { line-height: 1.7; }

:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 2px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   4. The Plate (root viewport)
   -------------------------------------------------------------------------- */
.sites-plate {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  position: relative;
  isolation: isolate;
}
.sites-plate > main { flex: 1; }

/* --------------------------------------------------------------------------
   4a. ONE VERTICAL RHYTHM FOR THE CONTENT AREA

   The container was `display: block` with no gap, so its children TOUCHED — two tiles sharing
   an edge — while tiles inside a `.sites-grid` kept the grid's 24px and a grid wrapped in a bare
   `.section` sat 64px from its neighbours because that wrapper carries `padding-block`. Three
   rhythms for one relationship, which reads as a mistake because it is one. Measured on the home
   page at 1280px: consecutive tiles at 0px, 24px and 64px.

   So every stacked content tile now gets the SAME gap, and it is `--grid-gap` — the same value
   the grid already uses horizontally, so the page reads as one grid on both axes rather than two
   grids that happen to share a column. The chrome deliberately keeps its own tighter inset: the
   dock is a pill whose 8px matches its own radius, and the announcement is the strip exception.
-------------------------------------------------------------------------- */
.sites-plate > main > * + * { margin-block-start: var(--grid-gap); }

/* A bare `.section` — no `tile` class — is a GRID'S SHELF, not a component: it exists to group
   tiles, and it must not add a rhythm of its own on top of the one above it. Two pages use it
   (index, pricing). A `.section.tile` is a different thing and keeps its `padding-block`, which
   is a tile's internal breathing rather than a gap between tiles. */
.sites-plate > main > .section:not(.tile) { padding-block: 0; }

/* The footer is a content tile too, so the last tile must not butt into it. (It is a child of the
   plate, not of main, which is why the rule above cannot reach this edge.) */
.sites-plate > footer { margin-block-start: var(--grid-gap); }

/* --------------------------------------------------------------------------
   4b. The plate background — site.plate

   Four modes, chosen in the content file and applied by the binder at runtime and
   by tools/bake.mjs at build time:
     ambient   (default) the two radial washes, following the theme
     color     a flat plate, no ambient layer
     image     an image behind everything
     none      nothing

   This block also removed the last rule-3 violation outside :root. The washes used
   to be raw rgba(217,119,6,0.06) and rgba(30,77,79,0.05) — the accent and primary
   hardcoded, which meant they did not follow a re-theme and would have failed the
   code panel's own token lint. They are color-mix on the real tokens now.
-------------------------------------------------------------------------- */
:root {
  --plate-color: var(--color-background);
  --plate-image: none;
  --plate-motion: 48s;
  --plate-ambient-layer:
    radial-gradient(circle at 20% 10%, color-mix(in srgb, var(--color-accent) 7%, transparent), transparent 45%),
    radial-gradient(circle at 85% 25%, color-mix(in srgb, var(--color-primary) 6%, transparent), transparent 50%);

  /* PAPER GRAIN. An feTurbulence SVG as a data URI, tiled at 200px, at an alpha low enough to
     read as the tooth of a sheet rather than as noise. It is what stops a flat warm fill from
     looking like a printed colour swatch, and it is the single most recognisable thing about the
     design this palette came from.

     It is a CONSTANT, not a theme token, and that is deliberate: it is not a colour, a space, a
     radius, a shadow or a font, so it does not fit rule 3's families, and inventing a family for
     one texture would be worse than saying plainly that this one value is a stylesheet edit. The
     design it comes from hardcodes its grain the same way.

     Percent-encoded angles (%3C %3E) rather than raw ones, so nothing downstream has to care that
     this is markup inside a CSS string. `img-src 'self' data:` is already in the shipped CSP. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='0.045'/%3E%3C/svg%3E");
}

/* Optional atmospheric backdrop layer (gradient / pattern) for the plate. The grain goes FIRST
   because in CSS the first `background-image` paints ON TOP of the rest — so grain first puts the
   tooth over the washes, which is what makes it visible. The other order buries the paper under a
   haze and loses it. */
.plate-ambient {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--grain), var(--plate-ambient-layer);
}

.sites-plate[data-plate="color"] { background: var(--plate-color); }
.sites-plate[data-plate="color"] .plate-ambient { display: none; }
.sites-plate[data-plate="none"] .plate-ambient { display: none; }

/* In image mode the plate is a photograph, and grain over a photograph reads as sensor noise
   rather than as paper — so this mode keeps the image and drops the grain. */
.sites-plate[data-plate="image"] .plate-ambient {
  background-image: var(--plate-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* The ambient wash drifts. scale() first so the drift never exposes an edge. */
@keyframes plate-drift {
  0%   { transform: scale(1.15) translate3d(-1.5%, -1%, 0); }
  50%  { transform: scale(1.15) translate3d(1.5%, 1%, 0); }
  100% { transform: scale(1.15) translate3d(-1.5%, -1%, 0); }
}
.sites-plate[data-plate="animation"] .plate-ambient {
  animation: plate-drift var(--plate-motion) ease-in-out infinite;
  will-change: transform;
}

/* The accessibility checklist requires reduced motion to be honoured, so the
   animated plate degrades to the identical static wash rather than to nothing.
   This is a MOTION query, not a layout media query — rule 5 forbids page-level
   media queries for LAYOUT, and this is the one the checklist asks for. */
@media (prefers-reduced-motion: reduce) {
  .sites-plate[data-plate="animation"] .plate-ambient {
    animation: none;
    will-change: auto;
  }
}

/* Starfield mode: the original single-file site's drifting star canvas, as a
   plate mode. The canvas is injected by sites-plate.js and sits exactly where
   .plate-ambient sits (behind the content, above the page background — the
   plate's `isolation: isolate` keeps the negative z-index inside the plate).
   Fixed, not absolute, so the sky stays put while the page scrolls. The
   ambient wash stays underneath as the base; no-JS readers get that static
   wash, the same fallback the animation mode has. No CSS motion here to
   disable — the reduced-motion degradation (one static frame) is drawn by
   the behaviour module. */
.plate-stars {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

/* Night only. Like the original, stars show in dark mode; the sky they hang
   in comes from the same toggle. In light mode the plate reads exactly as
   before — wash, grain, cream — and the canvas stays empty. */
html[data-theme="dark"] .sites-plate[data-plate="starfield"] {
  background: linear-gradient(180deg, #0f172a, #1e293b);
}

/* --------------------------------------------------------------------------
   5. The grid — two ways to lay tiles out

   a) .sites-grid        AUTOMATIC — as many equal columns as fit. Zero config.
   b) .sites-grid--cols  CONFIGURED — a real column grid (12 wide / 6 narrow)
                         where each tile declares its own width with data-span.
                         Two tiers, driven by the container's width, not the
                         viewport: narrow (<48rem) and wide (>=48rem).
   -------------------------------------------------------------------------- */

/* ---- a) automatic ---- */
.sites-grid {
  display: grid;
  /* `min(var(--grid-min), 100%)` — the clamp is load-bearing, not tidiness.
     A bare `minmax(var(--grid-min), 1fr)` sets a track FLOOR, and a floor wider than the
     container is not reduced to fit: it overflows. The framework site sets
     `--grid-min: 400px` per tile (the documented per-tile hatch), which measured 448px of
     document against a 375px viewport — 73px of horizontal scroll on a phone, on the home
     page. Every site using the hatch had the same bug at every width below its floor.
     Clamping the floor to 100% of the grid means the token keeps its meaning wherever
     there is room and yields gracefully where there is not, with no media query and no
     per-tile override — so it fixes this for tiles that do not exist yet. */
  grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min), 100%), 1fr));
  gap: var(--grid-gap);
  width: 100%;
}
/* A row of tiles that should always be a single fluid column. */
.sites-grid.sites-grid--stack { grid-template-columns: 1fr; }

/* ---- b) configured: columns + per-tile spans ----
   NB: the grid must NOT set container-type on itself. A container query resolves
   against the nearest ANCESTOR container, so a grid that is its own container can
   never match its own tier rule and would stay stuck in the narrow tier. It
   queries the surrounding container (.sites-container, or the enclosing tile). */
.sites-grid--cols {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols-narrow), 1fr);
  gap: var(--grid-gap);
  width: 100%;
}
/* Tiles are full width unless they ask for a span. */
.sites-grid--cols > * { grid-column: 1 / -1; }

/* narrow tier: spans of the narrow column count */
.sites-grid--cols > [data-span-sm="1"] { grid-column: span 1; }
.sites-grid--cols > [data-span-sm="2"] { grid-column: span 2; }
.sites-grid--cols > [data-span-sm="3"] { grid-column: span 3; }
.sites-grid--cols > [data-span-sm="4"] { grid-column: span 4; }
.sites-grid--cols > [data-span-sm="5"] { grid-column: span 5; }
.sites-grid--cols > [data-span-sm="6"] { grid-column: span 6; }

/* wide tier: 12 columns, spans of up to 12 */
@container (min-width: 48rem) {
  .sites-grid--cols { grid-template-columns: repeat(var(--grid-cols), 1fr); }
  .sites-grid--cols > [data-span="1"]  { grid-column: span 1; }
  .sites-grid--cols > [data-span="2"]  { grid-column: span 2; }
  .sites-grid--cols > [data-span="3"]  { grid-column: span 3; }
  .sites-grid--cols > [data-span="4"]  { grid-column: span 4; }
  .sites-grid--cols > [data-span="5"]  { grid-column: span 5; }
  .sites-grid--cols > [data-span="6"]  { grid-column: span 6; }
  .sites-grid--cols > [data-span="7"]  { grid-column: span 7; }
  .sites-grid--cols > [data-span="8"]  { grid-column: span 8; }
  .sites-grid--cols > [data-span="9"]  { grid-column: span 9; }
  .sites-grid--cols > [data-span="10"] { grid-column: span 10; }
  .sites-grid--cols > [data-span="11"] { grid-column: span 11; }
  .sites-grid--cols > [data-span="12"] { grid-column: span 12; }
  /* start on a specific column (e.g. centre a 6-wide tile) */
  .sites-grid--cols > [data-start="1"]  { grid-column-start: 1; }
  .sites-grid--cols > [data-start="2"]  { grid-column-start: 2; }
  .sites-grid--cols > [data-start="3"]  { grid-column-start: 3; }
  .sites-grid--cols > [data-start="4"]  { grid-column-start: 4; }
  .sites-grid--cols > [data-start="5"]  { grid-column-start: 5; }
  .sites-grid--cols > [data-start="6"]  { grid-column-start: 6; }
  .sites-grid--cols > [data-start="7"]  { grid-column-start: 7; }
  /* place without auto-flow packing, so explicit starts are honoured */
  .sites-grid--cols > [data-start] { grid-column-end: span var(--place-span, 6); }
}

/* ---- grid alignment helpers ---- */
.sites-grid--start  { align-items: start; }     /* tiles size to their content */
.sites-grid--center { align-items: center; }
.sites-grid--stretch { align-items: stretch; }  /* default: equal-height tiles */

/* Constrain the plate content width and center it.
   It is also a query container, so grids inside it can respond to the available
   width (a tile that sets container-type takes over for anything nested deeper). */
.sites-container {
  container-type: inline-size;
  width: 100%;
  /* 72rem, not 64. At 1024px a three-up grid of 300px cards needs 948px and has 976
     — only 28px of slack. Panels add 24px of inset a side, which is 48, and the
     third card drops to the next row. Widen the canvas and the slack returns. */
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: var(--space-6);
}

/* --------------------------------------------------------------------------
   6. Section / vertical rhythm
   -------------------------------------------------------------------------- */
.section { padding-block: var(--space-16); }
.section--tight { padding-block: var(--space-8); }

/* --------------------------------------------------------------------------
   7. Media stability (no CLS)
   -------------------------------------------------------------------------- */
.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-surface-2);
}
.media img, .media video { width: 100%; height: 100%; object-fit: cover; }
/* A media wrapper whose slot has not been given a source yet. The catalog's
   markup ships src="" — that empty value is what keeps a snippet a valid
   contract — but an <img> with an empty src renders the browser's broken-image
   glyph inside a reserved box, which looks like the site is broken rather than
   like the slot is empty. Hide the wrapper until the binder, or a bake, supplies
   a real source. Any real media (non-empty img/iframe, or video/canvas/object)
   keeps it visible.

   The video tile's own placeholder counts as a source, and the guard used to miss
   that: the wrapper holds no img/iframe/video, only the play affordance, so the
   wrapper was hidden and the placeholder with it. Measured on the live tiles page
   that was a play control which could not be seen, reached or clicked, inside a
   media box 0px tall. A placeholder IS the content of a tile that has not loaded. */
.media:not(:has(img[src]:not([src=""]))):not(:has(iframe[src]:not([src=""]))):not(:has(video, canvas, object)):not(:has(.tile-video__placeholder)) {
  display: none;
}
.media--16x9 { aspect-ratio: 16 / 9; }
.media--4x3  { aspect-ratio: 4 / 3; }
.media--1x1  { aspect-ratio: 1 / 1; }
.media--contain img { object-fit: contain; }

/* --------------------------------------------------------------------------
   8. Motion preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}