/* ─────────────────────────────────────────────────────────────
   AC 1996 · stylesheet  (v6 — "The 1996 Yearbook": paper + cloth + a 90s touch)
   Brand contract: BRAND-GUIDELINES.md
   - The page is PAPER: warm cream stock with a real grain. Content sits on
     slightly lighter "sheets."
   - The plaid is CLOTH: a stitched garment patch, the woven photo frame,
     dark tartan swatches. Plaid colors + shapes drive the graphic accents.
   - A 90s touch: a rubber-stamp "EST. 1996", graph-paper grid, bold print
     numerals (tartan-clipped year).
   - Headlines: Montserrat (700–900). Body: Mulish 400 (formerly "Muli").
   ───────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
[hidden] { display: none !important; }

:root {
  --red: #D60001;          /* brand red — logo PNG was recolored to match this */
  --red-deep: #A2240E;     /* hover / pressed state */
  --red-darker: #9D3917;   /* deepest, rare */
  --olive: #A39D66;
  --m-gold: #D8A534;   /* Memphis accents — pulled from inside the tartan threads */
  --m-green: #4A7C59;
  --m-navy: #2C3E66;

  --paper: #F3EAD6;      /* page stock — warm manila cream */
  --paper-2: #FBF6EC;    /* lighter sheet — cards/forms */
  --ink: #241f1a;        /* warm ink, not pure black */
  --muted: #6f655c;
  --line: #e4d8c4;       /* warm hairline */
  --field-line: #d8c9b4;

  --font-head: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Mulish", "Muli", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --maxw: 1140px;
  --gutter: 24px;
  --selvedge-h: 24px;
}

/* Mobile gutter — 24px was sized for the 1140px max desktop rhythm and
   reads as ~12% of a 390px viewport, leaving content cramped inside cards
   that have their own internal padding on top. 16px is the industry
   standard for mobile (Material, Apple HIG, Linear, Notion) — same
   visual respect for the screen edge, more room for the content that
   actually pays the rent. Single breakpoint at the existing 720px
   mobile rhythm. */
@media (max-width: 720px) {
  :root { --gutter: 16px; }
}

/* Mix Old Girl Script — the Assumption school's signature handwriting
   font, self-hosted so it works without network. Used for loading-state
   brand moments. font-display: swap so the loading word is visible
   IMMEDIATELY in the cursive fallback (rather than block-period
   invisible for ~3s while the WOFF2 fetches over a slow connection).
   The element communicates "loading" — that message can't be invisible
   for the first 3s of every loading state. The script swaps in on
   arrival; visible-without-brand is strictly better than blank. */
@font-face {
  font-family: 'Mix Old Girl';
  src: url('/fonts/MixOldGirl.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Loading word — the script "Loading" that draws itself in the same
   visual register as a normal "Loading…" UI string: muted, small,
   supplementary. The cuteness comes from the writing motion, not from
   making the word a hero. The clip-path inset wipes in from the right
   (revealing the word left-to-right, the natural writing direction),
   holds for a beat, then wipes out from the left (the trail of the
   pen). Start + end keyframes are both visually invisible (clipped
   from opposite sides) so the infinite loop is seamless. */
.loading-script {
  display: inline-block;
  font-family: 'Mix Old Girl', cursive;
  font-size: clamp(28px, 4vw, 38px);
  /* Line-height 1.6 is generous on purpose — Mix Old Girl Script's
     capital L has a flourish that arcs well above the cap height
     line and 1.25 was clipping it. Pair with extra top padding for
     the same reason. */
  line-height: 1.6;
  color: rgba(60, 30, 15, .35);              /* very soft warm tint of the ink — barely-there UI grey */
  letter-spacing: -0.005em;
  padding: .25em .15em .2em;                 /* top + left bias so the L's overhang and ascender don't get clipped */
  clip-path: inset(0 100% 0 0);
  animation: loading-write 2s cubic-bezier(.45, .15, .35, 1) infinite;
}
@keyframes loading-write {
  0%   { clip-path: inset(0 100% 0 0); }      /* invisible — clipped from the right */
  45%  { clip-path: inset(0 0 0 0); }          /* fully written */
  65%  { clip-path: inset(0 0 0 0); }          /* held */
  100% { clip-path: inset(0 0 0 100%); }       /* invisible — clipped from the left (seamless loop) */
}

/* Honor user preference. A motion-sensitive viewer just sees the word. */
@media (prefers-reduced-motion: reduce) {
  .loading-script {
    clip-path: none;
    animation: none;
  }
}

/* Subtitle that sits under the .loading-script word. Tells the user
   what's loading without competing with the handwritten word above. */
.loading-sub {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--muted);
  margin: 4px 0 0;
  letter-spacing: 0;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  min-height: 100vh;
  min-height: 100dvh;                 /* dvh accounts for the iOS soft keyboard pushing the viewport */
  -webkit-font-smoothing: antialiased;
}

/* Paper grain — a faint fractal-noise tooth over the whole page */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 100; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  opacity: 0.05; mix-blend-mode: multiply;
}
@media (prefers-reduced-motion: no-preference) { } /* grain is static; nothing to disable */

.page-wrap { overflow-x: hidden; position: relative; width: 100%; }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.container--narrow { max-width: 640px; }

/* ── Scroll-reveal ──────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}


/* ── Shared atoms ───────────────────────────────────────────── */
.eyebrow {
  font-family: var(--font-head); font-weight: 700; font-size: 13px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--red);
  margin: 0 0 16px;
}

.section-title { font-family: var(--font-head); font-weight: 700; font-size: clamp(26px, 4vw, 40px); letter-spacing: -0.02em; line-height: 1.06; margin: 0 0 14px; }
.page-title { font-family: var(--font-head); font-weight: 700; color: var(--red); text-transform: uppercase; font-size: clamp(40px, 9vw, 104px); letter-spacing: -0.035em; line-height: 0.9; margin: 0 auto 16px; max-width: 14ch; }
.page-lead { color: var(--muted); max-width: 54ch; margin: 0 auto; font-size: 18px; }
.page-lead a { color: var(--red); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.page-lead a:hover { color: var(--red-deep); }

/* (90s starburst + Memphis-shape kit removed — direction locked to Sunty.) */


/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-head); font-weight: 700; font-size: 15px; text-decoration: none; padding: 14px 26px; border-radius: 999px; border: 2px solid transparent; cursor: pointer; transition: transform .15s ease, background .15s ease, box-shadow .15s ease, color .15s ease, border-color .15s ease; }
.btn-primary { background: var(--red); color: #fff; box-shadow: 0 8px 20px -8px rgba(214,0,1,.5); }
.btn-primary:hover { background: var(--red-deep); transform: translateY(-2px); box-shadow: 0 12px 24px -8px rgba(214,0,1,.6); }
.btn-on-light { background: transparent; color: var(--ink); border-color: rgba(36,31,26,.25); }
.btn-on-light:hover { border-color: var(--red); color: var(--red); transform: translateY(-2px); }
.btn-block { width: 100%; }
.btn-sm { padding: 10px 16px; font-size: 14px; }

/* ── Plaid selvedge ─────────────────────────────────────────── */
.selvedge { height: var(--selvedge-h); width: 100%; background: url("/images/plaid-band.png") repeat-x left center; background-size: auto 100%; }

/* ── Header / sticky nav ────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(243,234,214,0.86);
  backdrop-filter: saturate(150%) blur(8px); -webkit-backdrop-filter: saturate(150%) blur(8px);
  border-bottom: 1px solid transparent; transition: box-shadow .25s ease, border-color .25s ease;
}
.site-header.scrolled { box-shadow: 0 6px 24px -14px rgba(60,30,15,.4); border-bottom-color: var(--line); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px var(--gutter); }
.brand { display: inline-flex; }
/* Logo height stays constant across scroll states. Letting it shrink on
   .scrolled pushed the whole hero down 12px when scrolling back to the
   top — visible as a jank. Header keeps one height; only the shadow /
   border change to signal 'we've scrolled.' */
.brand-logo { height: 54px; width: auto; }
.site-nav { display: flex; align-items: center; gap: 6px; }
.site-nav a {
  font-family: var(--font-head); font-weight: 600; font-size: 15px;
  text-decoration: none; color: var(--ink);
  padding: 10px 14px; border-radius: 999px; line-height: 1;
  transition: color .15s ease, background .15s ease;
}
/* Hover: red pill, paper text — never the old translucent-white pill. */
.site-nav a:hover { color: var(--paper-2); background: var(--red); }
/* Current page: solid red pill so the active section is unmistakable. */
.site-nav a[aria-current="page"] { color: var(--paper-2); background: var(--red); }
.site-nav a[aria-current="page"]:hover { background: var(--red-deep); }
.nav-cta { background: var(--red); color: #fff !important; font-weight: 700 !important; padding: 11px 20px !important; border-radius: 999px; }
.nav-cta:hover { background: var(--red-deep) !important; }

/* ── Auth element ─────────────────────────────────────────────
   Lives in its own `.nav-auth-wrap` outside `.site-nav` so the page nav
   and the account chip can lay out independently — critical on mobile
   where stuffing auth into the nav row forces a second line of links.
   Two visual treatments:
   • Signed out  → filled red pill ("Sign in" CTA — distinct from nav links)
   • Signed in   → outlined chip with an avatar dot + first name; click
                   opens a dropdown menu (My account, Sign out). */
.nav-auth-wrap { position: relative; display: inline-flex; align-items: center; }

.nav-auth {
  font-family: var(--font-head); font-weight: 700; font-size: 15px;
  text-decoration: none; line-height: 1;
  background: var(--red);
  color: var(--paper-2);
  padding: 9px 18px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  letter-spacing: 0;
  display: inline-flex; align-items: center;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.nav-auth:hover {
  background: var(--red-deep);
  color: var(--paper-2);
  transform: translateY(-1px);
}
/* Signed-in chip — `<button>` element with [data-signed-in] attribute. */
.nav-auth[data-signed-in] {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid rgba(214,0,1,.4);
  padding: 7.5px 14px 7.5px 9px;             /* tighter left to make room for the avatar dot */
  gap: 8px;
}
.nav-auth[data-signed-in]::before {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--red);
  color: var(--paper-2);
  display: inline-flex;
  align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; letter-spacing: 0;
  flex-shrink: 0;
  /* Initial filled in by JS via the --nav-auth-initial CSS variable. */
  content: var(--nav-auth-initial, "•");
}
/* Chevron after the chip content. Earlier version had just an avatar +
   first name with no affordance for "this opens a menu" — users read it
   as a status indicator. The chevron makes the menu pattern legible at
   a glance. Rotates 180° when the menu's open. */
.nav-auth[data-signed-in]::after {
  content: "";
  width: 7px; height: 7px;
  margin-left: 2px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s ease, border-color .15s ease;
  flex-shrink: 0;
}
.nav-auth-wrap.is-open .nav-auth[data-signed-in]::after {
  transform: rotate(225deg) translate(-1px, -1px);
  border-color: var(--red);
}
.nav-auth[data-signed-in]:hover,
.nav-auth-wrap.is-open .nav-auth[data-signed-in] {
  background: var(--paper-2);
  border-color: var(--red);
  color: var(--ink);
  transform: translateY(-1px);
}
.nav-auth[data-signed-in]:hover::after { border-color: var(--red); }

/* Account dropdown menu — appears under the signed-in chip when toggled.
   Closes on click-outside or Escape (wired in js/auth-nav.js). */
.nav-auth-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 18px 36px -18px rgba(60,30,15,.4), 0 2px 6px rgba(60,30,15,.06);
  padding: 6px;
  z-index: 60;
}
.nav-auth-menu[hidden] { display: none; }
.nav-auth-menu .menu-identity {
  padding: 8px 14px 10px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}
.nav-auth-menu .menu-name {
  display: block;
  font-family: var(--font-head); font-weight: 700; font-size: 14px;
  color: var(--ink);
  letter-spacing: 0;
}
.nav-auth-menu .menu-email {
  display: block;
  font-family: var(--font-body); font-size: 12px;
  color: var(--muted);
  letter-spacing: 0;
  word-break: break-all;                /* long emails wrap instead of overflowing */
  margin-top: 2px;
}
.nav-auth-menu a,
.nav-auth-menu button {
  display: block; width: 100%;
  font-family: var(--font-head); font-weight: 600; font-size: 14.5px;
  color: var(--ink); text-decoration: none;
  padding: 10px 14px;
  border-radius: 8px;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.nav-auth-menu a:hover,
.nav-auth-menu button:hover {
  background: var(--paper-2);
  color: var(--red);
}
.nav-auth-menu button:disabled {
  opacity: .6; cursor: progress;
}

/* Admin link — only rendered for users with is_admin = true. Distinct
   without being loud: red text + a small red dot before it, plus a
   bottom border that separates the "admin role" item from the "account
   actions" group below (My account, Sign out). */
.nav-auth-menu a.menu-admin {
  color: var(--red);
  display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid var(--line);
  border-radius: 8px 8px 0 0;
  margin-bottom: 4px;
  padding-bottom: 12px;
}
.nav-auth-menu a.menu-admin:hover {
  background: var(--paper-2);
  color: var(--red-deep);
}
.nav-auth-menu a.menu-admin .menu-admin-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--red);
  flex-shrink: 0;
}

/* ── Hero (paper) ───────────────────────────────────────────── */
.hero--paper { position: relative; overflow: hidden; text-align: center; padding: clamp(56px, 9vw, 112px) var(--gutter) clamp(40px, 7vw, 72px); }
.hero--paper .hero-inner { position: relative; z-index: 1; }
.hero-patch { margin: 0 auto 22px; }
.hero-title { font-family: var(--font-head); font-weight: 700; color: var(--ink); font-size: clamp(36px, 6.8vw, 84px); line-height: 0.98; letter-spacing: -0.035em; margin: 0 auto; max-width: 17ch; }
/* (Authoritative .plaid-year rule lives near the bottom of this file —
   below the v8 "pushed print" block. Removed the duplicate here so there's
   one source of truth for the tartan-clipped text.) */
.hero-sub { font-size: clamp(17px, 2.2vw, 22px); color: var(--muted); margin: 24px auto 0; max-width: 46ch; }
.hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 32px; }

/* ── Give section (two contribution paths) ──────────────────── */
.give { position: relative; padding: clamp(56px, 9vw, 96px) var(--gutter); text-align: center; }
.give-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; text-align: left; margin-top: clamp(28px, 4vw, 44px); position: relative; z-index: 1; }
.give-grid > * { min-width: 0; }
.give-card {
  position: relative; background: var(--paper-2); border: 1px solid var(--line); border-radius: 14px;
  padding: 32px 30px 30px; display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 14px 30px -24px rgba(60,30,15,.5); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.give-card:hover { transform: translateY(-6px); box-shadow: 0 26px 44px -26px rgba(157,57,23,.45); }
.give-num { font-family: var(--font-head); font-weight: 700; font-size: 14px; letter-spacing: 0.08em; color: var(--olive); }
.give-card h3 {
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(26px, 3.2vw, 34px);   /* single-word label, can read bigger */
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--red);
  margin: 6px 0 0;
}
.give-card p { margin: 0 0 22px; color: var(--ink); font-size: 16px; line-height: 1.5; }
.give-card p strong {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--red);
}

.card-rule { display: block; width: 30px; height: 2px; background: var(--olive); margin: 12px 0 14px; }
.card-link { margin-top: auto; font-family: var(--font-head); font-weight: 700; font-size: 15px; color: var(--red); text-decoration: none; }
.card-link span { display: inline-block; transition: transform .15s ease; }
.card-link:hover span { transform: translateX(5px); }
/* Whole-card click target: an invisible overlay tied to the visible link.
   The link is still the real <a> (keyboard focus, screen-reader label) —
   the pseudo just stretches its hit area across the entire .give-card. */
.give-card .card-link::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

/* ── Batch photo (woven plaid frame) + stamp ────────────────── */
.photo-section { position: relative; padding: 8px var(--gutter) clamp(48px, 8vw, 84px); }
.batch-photo { margin: 0 auto; max-width: var(--maxw); aspect-ratio: 21 / 9; border: 26px solid transparent; border-image: url("/images/plaid-full.png") 110 round; background: var(--paper-2); border-radius: 4px; display: flex; align-items: center; justify-content: center; box-shadow: 0 30px 60px -34px rgba(157,57,23,.55); }
.batch-photo-inner { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.batch-photo-eyebrow { font-family: var(--font-head); font-weight: 700; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--red); }
.batch-photo-label { font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; color: #b0a48f; }

/* ── Pledge head + thermometer ──────────────────────────────── */
.pledge-head, .auction-head, .mission-head { position: relative; padding: clamp(48px, 8vw, 88px) var(--gutter) 6px; text-align: center; }
.pledge-head .hero-patch, .auction-head .hero-patch { margin: 0 auto 18px; }
.thermo { max-width: 560px; margin: 32px auto 0; }
.thermo-bar { height: 14px; background: #e6d8c2; border-radius: 999px; overflow: hidden; }
.thermo-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--red), var(--red-deep)); border-radius: 999px; }
.thermo-stats { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 10px; font-size: 14px; color: var(--muted); }
.thermo-stats strong { color: var(--ink); }
.thermo-goal { font-weight: 700; }
.todo-tag { display: inline-block; margin-left: 8px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #b0a48f; border: 1px dashed #d0bfa6; border-radius: 4px; padding: 1px 5px; vertical-align: middle; }
.auction-note { color: var(--muted); font-size: 15px; max-width: 56ch; margin: 16px auto 0; }

/* ── Forms ──────────────────────────────────────────────────── */
.form-section { padding: clamp(32px, 6vw, 64px) var(--gutter) clamp(56px, 9vw, 96px); }
.form-section--cream { background: rgba(255,255,255,.35); text-align: center; }
.form-wrap { display: grid; text-align: left; margin-top: clamp(20px, 3vw, 32px); }
.form-wrap > .app-form, .form-wrap > .form-success { grid-area: 1 / 1; }
.app-form { display: flex; flex-direction: column; gap: 18px; background: var(--paper-2); border: 1px solid var(--line); border-radius: 16px; padding: clamp(22px, 4vw, 34px); box-shadow: 0 18px 44px -30px rgba(60,30,15,.5); }
.field { display: flex; flex-direction: column; gap: 8px; border: 0; padding: 0; margin: 0; min-width: 0; }
.field-label, .app-form legend { font-family: var(--font-head); font-weight: 700; font-size: 14px; color: var(--ink); padding: 0; }
.opt { color: var(--muted); font-weight: 400; }
/* Cover every text-ish input the admin forms use, not just `text` + `email`.
   Without `number` + `datetime-local` etc. the admin "New item" inputs
   fall back to browser-default chrome (system spinner, narrower padding)
   and break the visual rhythm of the form. */
.app-form input[type=text],
.app-form input[type=email],
.app-form input[type=number],
.app-form input[type=tel],
.app-form input[type=url],
.app-form input[type=search],
.app-form input[type=date],
.app-form input[type=datetime-local],
.app-form input[type=time],
.app-form select,
.app-form textarea {
  width: 100%;
  font-family: var(--font-body); font-size: 16px; color: var(--ink);
  padding: 12px 14px;
  border: 1.5px solid var(--field-line); border-radius: 10px;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.app-form textarea { resize: vertical; }
.app-form input:focus, .app-form select:focus, .app-form textarea:focus, .custom-amount:focus-within { border-color: var(--red); outline: none; box-shadow: 0 0 0 3px rgba(214,0,1,.12); }
.app-form select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%236f655c' stroke-width='2'/></svg>"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { font-family: var(--font-head); font-weight: 700; font-size: 15px; padding: 11px 16px; border: 1.5px solid var(--field-line); border-radius: 999px; background: #fff; color: var(--ink); cursor: pointer; transition: all .15s ease; }
.chip:hover { border-color: var(--red); color: var(--red); }
.chip:focus { outline: none; }
.chip:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.chip.is-active { background: var(--red); color: #fff; border-color: var(--red); }
.custom-amount { display: flex; align-items: center; border: 1.5px solid var(--field-line); border-radius: 10px; padding-left: 14px; background: #fff; }
.custom-peso { color: var(--muted); font-weight: 700; }
.custom-amount input { border: 0 !important; box-shadow: none !important; padding-left: 8px !important; }
.radio-row { display: flex; gap: 16px; flex-wrap: wrap; }
.radio { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.radio input, .check-row input { width: auto; accent-color: var(--red); }
.check-row { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--ink); cursor: pointer; }
.check-row input { margin-top: 3px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-error { color: var(--red); font-size: 14px; font-weight: 600; margin: 0; }
.form-fineprint { color: var(--muted); font-size: 13px; margin: 0; text-align: center; }
.form-success { background: var(--paper-2); border: 1px solid var(--line); border-radius: 16px; padding: clamp(30px, 5vw, 48px); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; box-shadow: 0 18px 44px -30px rgba(60,30,15,.5); }
.success-mark { width: 60px; height: 60px; border-radius: 999px; background: var(--red); color: #fff; font-size: 30px; display: grid; place-items: center; }
.form-success h3 { font-family: var(--font-head); font-weight: 700; font-size: 24px; margin: 0; }
.form-success p { color: var(--muted); margin: 0; max-width: 42ch; }
.form-success .btn { margin-top: 8px; }

/* ── Auction catalog (dark tartan swatches on paper) ────────── */
.auction-list { padding: clamp(18px, 3vw, 28px) var(--gutter) clamp(40px, 7vw, 64px); }
.auction-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.auction-grid > * { min-width: 0; }
.auction-card { background: var(--paper-2); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 14px 30px -24px rgba(60,30,15,.5); transition: transform .25s ease, box-shadow .25s ease; }
.auction-card:hover { transform: translateY(-6px); box-shadow: 0 26px 44px -26px rgba(157,57,23,.4); }
.auction-img { position: relative; aspect-ratio: 4 / 3; background: #1a0f0a; display: grid; place-items: center; }
.auction-img::before { content: ""; position: absolute; inset: 0; background: url("/images/plaid-full.png") center/cover; }
.auction-img-label { position: relative; z-index: 1; font-family: var(--font-head); font-weight: 700; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); background: rgba(251,246,236,.95); padding: 7px 13px; border-radius: 999px; box-shadow: 0 4px 12px rgba(0,0,0,.18); }
.auction-body { padding: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.auction-pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-head); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--red-darker); background: #f0e2d2; padding: 5px 11px; border-radius: 999px; }
.auction-pill .dot { width: 7px; height: 7px; border-radius: 999px; background: var(--red); }
.auction-card h3 { font-family: var(--font-head); font-weight: 700; font-size: 19px; margin: 0; color: var(--ink); }
.auction-desc { color: var(--muted); font-size: 14.5px; margin: 0; flex: 1; }
.auction-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; }
.meta-block { display: flex; flex-direction: column; }
.meta-label { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.meta-value { font-family: var(--font-head); font-weight: 700; font-size: 18px; color: var(--ink); }

/* ── Footer ─────────────────────────────────────────────────── */
.site-footer { background: transparent; border-top: 1px solid var(--line); }
.footer-inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; padding: clamp(40px, 6vw, 60px) var(--gutter); }
.footer-logo { height: 50px; width: auto; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 4px; }
.footer-links a { font-family: var(--font-head); font-weight: 600; font-size: 14px; text-decoration: none; color: var(--ink); padding: 8px 12px; border-radius: 8px; }
.footer-links a:hover { color: var(--red); background: rgba(255,255,255,.5); }
.footer-social { display: flex; gap: 22px; }
.footer-social a { font-weight: 600; font-size: 14px; text-decoration: none; color: var(--muted); padding: 6px 2px; }
.footer-social a:hover { color: var(--red); }
.copyright { margin: 4px 0 0; font-size: 13px; color: var(--muted); }

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .give-grid { grid-template-columns: minmax(0, 1fr); }
  .auction-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  /* Mobile header: logo and auth chip pin to the top row; page nav drops
     to a centered second row. Keeps the auth element where every other
     product puts it (top-right) instead of crammed inline with the nav. */
  .header-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "brand auth"
      "nav   nav";
    gap: 10px 12px;
    padding: 14px var(--gutter);
  }
  .brand          { grid-area: brand; align-self: center; }
  .nav-auth-wrap  { grid-area: auth; justify-self: end; align-self: center; }
  .site-nav       { grid-area: nav; flex-wrap: wrap; justify-content: center; gap: 2px; }
  .brand-logo     { height: 44px; display: block; }
  /* On mobile the chip's avatar dot sat slightly above the logo's optical
     centre because the wrap padding lined up with the logo block but the
     chip border pushed its baseline up — `align-self: center` on both
     grid items pulls them onto the same vertical line. */
  /* Mobile signed-in chip = avatar + chevron. The chevron is what tells the
     user "this opens a menu" — without it the avatar reads as a static
     signed-in indicator and the My Account / Sign out / Admin items in the
     dropdown go undiscovered. Name still hidden (it lives in the dropdown);
     overall chip stays a tight pill (~58×44, above iOS HIG tap target). */
  .nav-auth[data-signed-in] {
    padding: 6px 10px 6px 6px;
    border-radius: 999px;
    gap: 4px;
  }
  .nav-auth[data-signed-in] .nav-auth-label { display: none; }
  .nav-auth[data-signed-in]::before {
    width: 32px; height: 32px;
    font-size: 14px;
  }
  .nav-auth[data-signed-in]::after {
    width: 6px; height: 6px;
  }
  .auction-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-cta { flex-direction: column; align-items: center; }
  .hero-cta .btn { width: 100%; max-width: 320px; }
  /* Pledge amount chips: even 2-col grid on phones so ₱500 / ₱10,000 / Custom
     line up — flex-wrap leaves them ragged because the labels differ in width. */
  .chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .chip  { text-align: center; padding: 13px 16px; }
}

/* ── v8: pushed print / 90s treatment ───────────────────────── */


/* Film "print" — a plaid-framed photo taped to the page */
.film-section { padding: clamp(16px, 3vw, 30px) var(--gutter) clamp(8px, 2vw, 18px); }
.film-print { position: relative; max-width: 920px; margin: 0 auto; background: var(--paper-2); padding: 16px 16px 14px; border-radius: 4px; box-shadow: 0 30px 60px -36px rgba(60,30,15,.6); transform: rotate(-0.8deg); }
.film-print::before, .film-print::after { content: ""; position: absolute; top: -11px; width: 104px; height: 24px; background: rgba(228,210,175,.7); border: 1px solid rgba(160,140,110,.35); box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.film-print::before { left: 36px; transform: rotate(-5deg); }
.film-print::after  { right: 36px; transform: rotate(4deg); }
.film-stage { position: relative; aspect-ratio: 16 / 9; border-radius: 2px; overflow: hidden; background: var(--paper-2); display: grid; place-items: center; cursor: pointer; }
/* When entered via element fullscreen (Android), drop our aspect-ratio + radius
   and let the stage fill the device. iOS uses the native player via
   webkitEnterFullscreen and ignores this entirely. */
.film-stage:fullscreen,
.film-stage:-webkit-full-screen {
  aspect-ratio: auto;
  width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh;
  border-radius: 0;
  background: #000;
}
.film-stage::before { content: ""; position: absolute; inset: 0; background: url("/images/plaid-full.png") center/cover; }
.film-video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.film-play { position: relative; z-index: 1; width: 84px; height: 84px; border: none; border-radius: 999px; background: rgba(251,246,236,.96); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 16px 40px -12px rgba(0,0,0,.55); }
.film-play[disabled] { cursor: default; opacity: .92; }
.film-play-icon { width: 0; height: 0; margin-left: 5px; border-style: solid; border-width: 13px 0 13px 22px; border-color: transparent transparent transparent var(--red); }
.film-cap { margin-top: 14px; text-align: center; font-style: italic; color: var(--muted); font-size: 15px; }
.film-soon { font-style: normal; font-family: var(--font-head); font-weight: 700; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #b0a48f; border: 1px dashed #d0bfa6; border-radius: 4px; padding: 2px 6px; margin-left: 8px; vertical-align: middle; }

/* Give: ruled-paper lines + a big '96 watermark + a plaid swatch sticker */
.give { overflow: hidden; background-image: repeating-linear-gradient(180deg, transparent 0 37px, rgba(60,30,15,.045) 37px 38px); }
.give .container { position: relative; z-index: 1; }
.give-watermark { position: absolute; right: -1%; top: 5%; z-index: 0; pointer-events: none; font-family: var(--font-head); font-weight: 700; font-size: clamp(180px, 34vw, 400px); line-height: .8; color: var(--red); opacity: .06; letter-spacing: -.04em; }
/* .swatch-sticker is defined above (bright plaid, frayed) — kept single source of truth. */

@media (max-width: 720px) {
  .film-print { transform: none; }
  .film-print::before { left: 20px; }
  .film-print::after  { right: 20px; }
  .give-watermark { font-size: 220px; top: 3%; }
}

/* ── v11: "Sunty" treatment — warm cream, giant red type, rounded panels ── */

/* Hero: clean cream, oversized red display headline */
.hero--paper { padding-top: clamp(44px, 7vw, 88px); }
.hero-kicker {
  display: inline-block; font-family: var(--font-head); font-weight: 700; font-size: 12px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--red);
  background: #fff; border: 1.5px solid var(--red); border-radius: 999px; padding: 9px 18px; margin-bottom: 24px;
}
.hero-school {
  display: block; font-family: var(--font-head); font-weight: 700; font-size: clamp(14px, 2vw, 20px);
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink); margin-bottom: 8px;
}
.hero--paper .hero-title {
  font-weight: 700; color: var(--red); text-transform: uppercase;
  font-size: clamp(54px, 13vw, 168px); line-height: .84; letter-spacing: -.04em; max-width: none;
}

/* Rounded "window" panels with thin red borders.
   .film-print is excluded — it has its own anchoring (tape strips + shadow)
   and the bottom border was reading as a stray line under the video. */
.give-card, .auction-card, .app-form, .form-success { border: 1.5px solid rgba(214,0,1,.5); border-radius: 22px; }
.film-print { border: 0; border-radius: 22px; }

/* Give section → solid red statement block with white cards */
.give { background: var(--red); background-image: none; color: #fff; }
.give .eyebrow { color: #ffd9d2; }
.give .section-title { color: #fff; }
.give-card { background: #fff; border-color: transparent; }
.give-card h3 { color: var(--red); }
.give-watermark { color: #fff; opacity: .10; }

/* Halftone removed per client — the give block is flat red. */

/* ── Campaign content (Pearl Anniversary: Velada + Mission Schools) ── */
.give-lead { position: relative; z-index: 1; color: rgba(255,255,255,.92); max-width: 58ch; margin: 0 auto clamp(28px,4vw,40px); font-size: 17px; line-height: 1.6; }
.give-lead a { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; font-weight: 700; white-space: nowrap; }
.auction-note a { color: var(--red); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.donate { padding: clamp(8px,2vw,18px) var(--gutter) clamp(48px,8vw,72px); }
.donate-inner { max-width: var(--maxw); margin: 0 auto; background: var(--red); color: #fff; border-radius: 22px; padding: clamp(32px,5vw,56px) clamp(24px,5vw,52px); text-align: center; }
.donate-inner .eyebrow { color: #ffe1da; }
.donate h2 { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; font-size: clamp(24px,3.6vw,40px); line-height: 1; letter-spacing: -.02em; margin: 0 0 14px; }
.donate p { color: rgba(255,255,255,.92); max-width: 54ch; margin: 0 auto 14px; }
.donate-contact { font-size: 16px; line-height: 1.8; }
.donate-contact a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* WhatsApp deeplink CTA — sits inside the red donate panel, so the
   default red-on-white .btn-primary would camouflage. Lean into the
   WhatsApp brand green (#25D366 → adjusted slightly darker so white
   text still passes contrast on the saturated hover state) — instantly
   recognizable as a WhatsApp action, contrasts cleanly with the red
   panel, and matches the cultural signal Toffer wants the button to
   carry. */
.donate-whatsapp {
  display: inline-flex; align-items: center; gap: 10px;
  background: #1FA855;
  color: #fff !important;
  border: 0;
  margin: clamp(18px, 3vw, 26px) 0 clamp(14px, 2vw, 20px);
  box-shadow: 0 12px 28px -14px rgba(0, 0, 0, .45);
  padding: 14px 26px;
  font-size: 16px;
}
.donate-whatsapp:hover {
  background: #178c46;
  color: #fff !important;
  transform: translateY(-2px);
}
.donate-whatsapp-icon { width: 22px; height: 22px; flex-shrink: 0; }

/* Mission Schools page */
.mission-intro { max-width: 60ch; margin: clamp(18px,3vw,28px) auto 0; color: var(--muted); font-size: 18px; line-height: 1.6; }

/* Scope block — bridges the lead and the school list. Big "08" on the
   left rhymes with the 01–08 numbered school cards below; right column
   holds the descriptive body + the "Here's who you're helping ↓" cue.
   Uses max-width + auto margins (same as .schools) so the left edges
   of both blocks line up exactly. */
.mission-scope { padding: clamp(28px,5vw,56px) var(--gutter) 0; }
.scope-row {
  display: grid;
  grid-template-columns: auto auto;          /* both columns sized to content — no orphan space on the right */
  gap: clamp(24px, 4vw, 48px);
  align-items: end;                          /* anchor bottoms — label sits beside the body, not the giant '08' */
  width: fit-content;                        /* take only as much width as the content needs */
  max-width: var(--maxw);
  margin: 0 auto;                            /* …then center that block in the section */
  text-align: left;
  border-top: 2px solid var(--line);
  padding-top: clamp(20px, 3vw, 28px);
}
.scope-num { display: flex; flex-direction: column; gap: 8px; }
.num-big {
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(96px, 13vw, 156px);       /* dial back from 200px so it doesn't dwarf the body */
  line-height: 0.85;
  letter-spacing: -0.045em;
  color: var(--red);
}
.num-label {
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(12px, 1.2vw, 14px);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink);
  max-width: 14ch;
  line-height: 1.35;
}
.scope-text {
  margin: 0;
  color: var(--ink);
  font-size: clamp(18px, 2.2vw, 24px);
  line-height: 1.4;
  max-width: 44ch;                           /* wider than 32ch so the right column reads as one block */
}
.scope-cue {
  margin: clamp(18px,2.5vw,24px) 0 0;
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(12px, 1.2vw, 14px);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--red);
}
.scope-cue span { display: inline-block; margin-left: 4px; transform: translateY(1px); }
@media (max-width: 720px) {
  .scope-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    width: auto;                             /* mobile is single-column, full width — not fit-content */
  }
  .num-big { font-size: clamp(80px, 24vw, 120px); }
  .scope-text { max-width: none; }
}

.schools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(26px,3.5vw,40px) clamp(32px,5vw,56px); max-width: var(--maxw); margin: clamp(36px,6vw,64px) auto 0; text-align: left; }
.school { border-top: 2px solid var(--line); padding-top: 18px; min-width: 0; }
.school-num { font-family: var(--font-head); font-weight: 700; font-size: 13px; letter-spacing: .08em; color: var(--red); }
.school h2 { font-family: var(--font-head); font-weight: 700; text-transform: none; font-size: clamp(19px,2.2vw,23px); letter-spacing: -.01em; color: var(--ink); margin: 6px 0 3px; }
.school-loc { font-family: var(--font-head); font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--red-deep); margin: 0 0 10px; }
.school p { margin: 0; color: var(--muted); font-size: 15.5px; line-height: 1.6; }
.ms-cta { text-align: center; padding: clamp(48px,8vw,84px) var(--gutter) clamp(56px,9vw,96px); }
.ms-cta-line { font-family: var(--font-head); font-weight: 700; font-size: clamp(20px,3vw,28px); color: var(--ink); margin: 0 0 22px; }
@media (max-width: 720px) { .schools { grid-template-columns: minmax(0, 1fr); } }

/* ── Custom film player ──────────────────────────────────────
   Apple-product-page pattern: muted+loop autoplays in the background as
   ambient cinema; "Play with sound" overlay starts the real playback with
   our own controls (no native chrome). All vanilla. */

.film-stage { position: relative; }
.film-video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Ambient overlay — corner pill, doesn't obscure the video */
.film-overlay {
  position: absolute; right: 16px; bottom: 16px; z-index: 3;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 16px 9px 11px;
  background: rgba(251,246,236,0.95);
  color: var(--red);
  border: 0; border-radius: 999px;
  cursor: pointer; font: inherit;
  box-shadow: 0 8px 22px -6px rgba(0,0,0,.45);
  transition: transform .2s ease, box-shadow .2s ease, opacity .35s ease, background .15s ease;
}
.film-overlay:hover, .film-overlay:focus-visible {
  background: #fff;
  transform: translateY(-1px);
  box-shadow: 0 12px 28px -6px rgba(0,0,0,.55);
}
.film-stage[data-state="active"] .film-overlay { opacity: 0; pointer-events: none; }

.film-play-btn {
  width: 22px; height: 22px; border-radius: 999px;
  background: var(--red);
  display: grid; place-items: center;
}
.film-play-icon {
  display: block; width: 0; height: 0; margin-left: 2px;
  border-style: solid; border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent #fff;
}
.film-play-label {
  font-family: var(--font-head); font-weight: 700; font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
}

/* Custom controls (state: active) — appears after overlay click */
.film-controls {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px 16px;
  color: #fff;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.7));
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
.film-stage[data-state="active"] .film-controls { opacity: 1; pointer-events: auto; }
.film-stage[data-state="active"] .film-controls.is-idle { opacity: 0; pointer-events: none; }

.fc-btn {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  background: transparent; border: 0; color: #fff;
  border-radius: 8px; cursor: pointer;
  transition: background .15s ease;
}
.fc-btn:hover { background: rgba(255,255,255,.16); }
.fc-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.fc-btn svg { width: 22px; height: 22px; display: block; }

.fc-progress {
  flex: 1; min-width: 0;
  height: 26px; display: grid; align-items: center;
  cursor: pointer; touch-action: none;
}
.fc-progress:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 4px; }
.fc-progress-track {
  position: relative; height: 4px;
  background: rgba(255,255,255,.25); border-radius: 999px;
  transition: height .15s ease;
}
.fc-progress:hover .fc-progress-track,
.fc-progress:focus-within .fc-progress-track { height: 6px; }
.fc-progress-buffer, .fc-progress-fill {
  position: absolute; top: 0; left: 0; height: 100%;
  border-radius: 999px;
}
.fc-progress-buffer { background: rgba(255,255,255,.4); width: 0; }
.fc-progress-fill   { background: var(--red); width: 0; }
.fc-progress-handle {
  position: absolute; top: 50%; left: 0;
  width: 12px; height: 12px;
  background: #fff; border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity .15s ease;
}
.fc-progress:hover .fc-progress-handle,
.fc-progress:focus-within .fc-progress-handle { opacity: 1; }

.fc-time {
  font-family: var(--font-head);
  font-size: 12px; letter-spacing: .04em;
  color: rgba(255,255,255,.9);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

@media (max-width: 640px) {
  /* Touch ergonomics: real 44px targets; drop the time display to make
     room for play / scrubber / mute / fullscreen on a narrow bar. */
  .fc-btn { width: 44px; height: 44px; }
  .fc-btn svg { width: 24px; height: 24px; }
  .fc-time { display: none; }
  .film-controls { gap: 6px; padding: 10px 10px 12px; }

  /* Mobile: icon-only circle (48px touch target), no text label. */
  .film-overlay {
    right: 12px; bottom: 12px;
    padding: 0; gap: 0;
    width: 48px; height: 48px;
    justify-content: center;
  }
  .film-play-label { display: none; }
  .film-play-btn { width: 26px; height: 26px; }
  .film-play-icon { border-width: 6px 0 6px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .film-overlay, .film-controls, .film-play-btn,
  .film-overlay::before, .fc-progress-track { transition: none; }
}

/* "1996" — inline <svg> with a <pattern> fill on the <text>. SVG is
   redrawn vectorally each frame at native resolution, so the plaid never
   gets cached into a low-res compositor texture. No quality drop on
   scroll-up or page-switch (which was the issue with background-clip:text).
   The drift animates via SMIL <animateTransform> inside the <pattern>. */
.plaid-year {
  display: block;
  width: auto;
  height: 1em;                             /* match the surrounding line on desktop */
  margin: 0 auto;
  overflow: visible;
}
.plaid-year text {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 100px;                        /* SVG-local units — viewBox is 320×100 */
  letter-spacing: -3.5px;                  /* match the h1's -0.035em */
}
@media (prefers-reduced-motion: reduce) {
  .plaid-year animateTransform { display: none; }
}

/* Mobile: bump the "1996" so it fills its line. SVG sizes via its height
   here — viewBox does the rest. */
@media (max-width: 720px) {
  .plaid-year {
    height: 1.6em;
    margin-top: 4px;
  }
}

/* ── Privacy policy ───────────────────────────────────────────
   Long-form legal page. Reading column constrained for line length,
   tables tinted on-brand, rights list given a soft cream bg + red
   leading rule so it scans as a checklist of legally-named entitlements. */
.privacy-doc {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) var(--gutter) clamp(56px, 8vw, 88px);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.65;
}
.privacy-eyebrow { font-family: var(--font-head); font-weight: 700; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--red); margin: 0 0 10px; }
.privacy-title   { font-family: var(--font-head); font-weight: 700; font-size: clamp(32px, 5vw, 44px); color: var(--ink); margin: 0 0 8px; letter-spacing: -0.01em; }
.privacy-meta    { color: var(--muted); font-size: 14px; margin: 0 0 36px; }
.privacy-doc section { margin: 0 0 36px; }
.privacy-doc h2  { font-family: var(--font-head); font-weight: 700; font-size: 20px; color: var(--ink); margin: 0 0 12px; }
.privacy-doc p   { margin: 0 0 14px; }
.privacy-doc ul  { margin: 0 0 14px; padding-left: 22px; }
.privacy-doc li  { margin: 6px 0; }
.privacy-doc a   { color: var(--red); }
.privacy-doc a:hover { color: var(--red-deep); }
.privacy-doc strong { color: var(--ink); font-weight: 700; }

.privacy-table {
  width: 100%; border-collapse: collapse;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  margin: 0 0 16px;
  font-size: 14.5px;
}
.privacy-table th, .privacy-table td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.privacy-table th {
  background: rgba(214,0,1,.08);
  font-family: var(--font-head); font-weight: 700; font-size: 12px;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--red);
}
.privacy-table tr:last-child td { border-bottom: 0; }
@media (max-width: 600px) {
  .privacy-table, .privacy-table thead, .privacy-table tbody, .privacy-table tr, .privacy-table th, .privacy-table td { display: block; }
  .privacy-table thead { display: none; }
  .privacy-table tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
  .privacy-table tr:last-child { border-bottom: 0; }
  .privacy-table td { padding: 4px 14px; border: 0; }
  .privacy-table td:first-child { font-family: var(--font-head); font-weight: 700; color: var(--red); padding-top: 8px; }
}

.rights-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.rights-list li {
  background: rgba(214,0,1,.06);
  border-left: 3px solid var(--red);
  padding: 12px 16px;
  border-radius: 0 10px 10px 0;
}

.privacy-form { margin-top: 12px; }
.privacy-form .form-error { background: #fbe7e6; color: var(--red-deep); padding: 10px 14px; border-radius: 8px; font-size: 14px; }

/* ── Cookie notice ────────────────────────────────────────────
   Floating chip in the bottom-left, with a 52px tartan PANEL on
   the left side (not behind the cookie). The plaid is its own
   substantial zone — you can read the tartan weave — and the
   cookie + text + button live in the cream zone to its right.
   Reads as a tartan-tabbed paper note, separating the two motifs
   so they don't stack. */
.cookie-banner {
  position: fixed;
  left: clamp(12px, 2vw, 20px);
  bottom: calc(clamp(12px, 2vw, 20px) + env(safe-area-inset-bottom, 0px));
  z-index: 95;
  max-width: 320px;
  background: var(--paper-2);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;                       /* lets the plaid panel meet the rounded corners cleanly */
  box-shadow: 0 12px 28px -14px rgba(60,30,15,.28), 0 2px 6px rgba(60,30,15,.05);
  opacity: 0;
  transform: translateY(20px) scale(.92);
  transition: opacity .25s ease, transform .35s cubic-bezier(.34,1.56,.64,1);
}
.cookie-banner.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.cookie-banner-inner {
  display: grid;
  grid-template-columns: 52px 30px 1fr auto;
  gap: 0;
  align-items: stretch;
  min-height: 60px;
}
/* The plaid panel itself — left "tab" of the chip. Full chip height
   so the tartan reads as a substantial column rather than a slim band.
   Hairline divider on the right separates it from the cream zone. */
.cookie-banner-plaid {
  background: url("/images/plaid-full.png") center / 70px 70px;
  border-right: 1px solid var(--line);
}
.cookie-banner-cookie {
  font-size: 22px;
  line-height: 1;
  display: grid; place-items: center;
  transform: rotate(-12deg);
  transition: transform .25s ease;
  padding-left: 6px;
}
.cookie-banner:hover .cookie-banner-cookie { transform: rotate(8deg) scale(1.1); }
.cookie-banner-text {
  padding: 11px 4px 11px 6px;
  align-self: center;
}

.cookie-banner-text {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
  min-width: 0;
}
.cookie-banner-link {
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 2px;
  margin-left: 4px;
  white-space: nowrap;
}
.cookie-banner-link:hover { color: var(--red-deep); }

.cookie-banner-btn {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 10px;
  margin: 0 10px;                          /* breathing room from the chip's right edge */
  font-family: var(--font-body); font-weight: 700; font-size: 12px;
  letter-spacing: 0; text-transform: none;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  min-height: 28px;
  align-self: center;
}
.cookie-banner-btn:hover {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}

@media (max-width: 600px) {
  .cookie-banner {
    left: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    max-width: calc(100vw - 24px);
  }
  .cookie-banner-inner { padding: 9px 11px; gap: 8px; }
  .cookie-banner-text  { font-size: 11.5px; }
}

/* (Plaid surfaces are shown clean — no overlay, per brand rule.) */

/* ── Admin portal ─────────────────────────────────────────────
   Used by /admin, /admin/auction/new, /admin/auction/<id>. Borrows
   .app-form / .field / .btn from the public forms; everything below
   is purpose-built for admin layouts (dashboard rows, photo previews,
   gate states). */

.admin-wrap   { max-width: 1000px; margin: 0 auto; padding: clamp(32px, 5vw, 56px) var(--gutter) clamp(48px, 7vw, 80px); }
.admin-eyebrow{ font-family: var(--font-head); font-weight: 700; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--red); margin: 0 0 6px; }
.admin-title  { font-family: var(--font-head); font-weight: 700; font-size: clamp(28px, 4.5vw, 40px); color: var(--ink); margin: 0 0 8px; letter-spacing: -0.01em; }
.admin-sub    { color: var(--muted); margin: 0 0 28px; max-width: 60ch; }
.admin-toolbar{ display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 22px; }
.admin-toolbar h2 { font-family: var(--font-head); font-weight: 700; font-size: 20px; margin: 0; color: var(--ink); }

/* Gate states — used during loading and when the caller isn't an admin. */
.admin-gate   { background: var(--paper-2); border: 1px solid var(--line); border-radius: 16px; padding: clamp(28px, 5vw, 48px); text-align: center; max-width: 520px; margin: 0 auto; box-shadow: 0 18px 44px -30px rgba(60,30,15,.5); }
.admin-gate h2{ font-family: var(--font-head); font-weight: 700; font-size: 22px; margin: 0 0 8px; color: var(--ink); }
.admin-gate p { color: var(--muted); margin: 0 0 20px; }
.admin-gate--denied h2 { color: var(--red); }
.admin-gate .btn { margin-top: 4px; }

/* Dashboard list */
.admin-items  { display: flex; flex-direction: column; gap: 12px; }
.admin-item-row {
  display: grid; grid-template-columns: 88px 1fr auto; gap: 18px;
  align-items: center;
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: 14px; padding: 14px 16px;
  text-decoration: none; color: inherit;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.admin-item-row:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -28px rgba(60,30,15,.45); border-color: rgba(214,0,1,.35); }
.admin-item-thumb {
  width: 88px; aspect-ratio: 4/3; border-radius: 10px;
  background: #f0e2d2; display: grid; place-items: center;
  overflow: hidden; flex-shrink: 0;
}
.admin-item-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.admin-item-thumb-empty { font-family: var(--font-head); font-weight: 700; font-size: 9.5px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--muted); text-align: center; padding: 4px; }

.admin-item-body { min-width: 0; }
.admin-item-title { font-family: var(--font-head); font-weight: 700; font-size: 17px; color: var(--ink); margin: 0 0 6px; line-height: 1.2; word-wrap: break-word; }
.admin-item-meta  { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 13px; color: var(--muted); align-items: center; }
.admin-item-meta strong { color: var(--ink); font-weight: 700; }

.status-pill { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-head); font-weight: 700; font-size: 10.5px; letter-spacing: 0.10em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; }
.status-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-pill--draft  { color: #856200; background: #fff3d6; }
.status-pill--open   { color: #1e7a36; background: #e9f7ec; }
.status-pill--closed { color: var(--muted); background: #ecdfc8; }
.status-pill--won    { color: var(--red); background: #f7d8d8; }

.admin-item-chevron { font-family: var(--font-head); font-weight: 700; font-size: 18px; color: var(--muted); padding-right: 4px; }
.admin-item-row:hover .admin-item-chevron { color: var(--red); transform: translateX(3px); transition: transform .15s ease, color .15s ease; }

/* Edit / new form layout */
.admin-form-grid {
  display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 40px);
  align-items: flex-start;
}
@media (max-width: 760px) { .admin-form-grid { grid-template-columns: minmax(0, 1fr); } }

/* Photo preview + upload control */
.admin-photo {
  background: var(--paper-2); border: 1.5px solid rgba(214,0,1,.35); border-radius: 16px;
  padding: 14px; display: flex; flex-direction: column; gap: 12px;
}
.admin-photo-preview {
  aspect-ratio: 4/3; width: 100%;
  background: #f0e2d2;
  border-radius: 10px; overflow: hidden;
  display: grid; place-items: center;
  position: relative;
}
.admin-photo-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.admin-photo-preview-empty { font-family: var(--font-head); font-weight: 700; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.admin-photo-input {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 14px; border-radius: 999px;
  background: #fff; border: 1.5px solid var(--field-line);
  font-family: var(--font-head); font-weight: 700; font-size: 14px; color: var(--ink);
  cursor: pointer; transition: border-color .15s ease, color .15s ease;
}
.admin-photo-input:hover { border-color: var(--red); color: var(--red); }
.admin-photo-input input[type=file] { display: none; }
.admin-photo-hint { font-size: 12px; color: var(--muted); text-align: center; }

/* Field lock indicator + read-only display */
.field-lock-note {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-head); font-weight: 700; font-size: 10.5px;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--muted);
  background: #ecdfc8; padding: 3px 8px; border-radius: 999px;
  margin-left: 8px;
}
.app-form input:disabled, .app-form textarea:disabled, .app-form select:disabled {
  background: #f5ebd9; color: var(--muted); cursor: not-allowed;
}

/* Messages — distinct from .form-error (which is just red text) so the admin
   page can show success/info/warning in the same slot. */
.admin-msg {
  padding: 12px 16px; border-radius: 10px;
  font-size: 14.5px; font-weight: 600;
  margin: 0 0 16px;
}
.admin-msg[hidden] { display: none; }
.admin-msg--error  { background: #f7d8d8; color: var(--red-deep); border: 1px solid rgba(214,0,1,.3); }
.admin-msg--success{ background: #e9f7ec; color: #1e7a36; border: 1px solid rgba(30,122,54,.3); }
.admin-msg--info   { background: #fff3d6; color: #856200; border: 1px solid rgba(133,98,0,.3); }

/* Action row at the bottom of the form */
.admin-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 12px; }
.admin-actions .spacer { flex: 1; }

/* Admin sub-nav (Items · Payments) — sits below the page title. Used on
   the dashboard and any admin top-level page so the section the admin
   is in is always one tap away. */
.admin-subnav {
  display: inline-flex; gap: 4px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px;
  margin: 0 0 22px;
}
.admin-subnav a {
  font-family: var(--font-head); font-weight: 700; font-size: 13px;
  color: var(--muted);
  padding: 7px 14px; border-radius: 999px;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background .15s ease, color .15s ease;
}
.admin-subnav a:hover { color: var(--red); }
.admin-subnav a[aria-current="page"] {
  background: var(--red); color: #fff;
}
.admin-subnav .badge {
  background: rgba(0,0,0,.18); color: inherit;
  font-size: 11px; padding: 1px 7px; border-radius: 999px;
  font-weight: 800; letter-spacing: 0;
}
.admin-subnav a:not([aria-current="page"]) .badge { background: var(--red); color: #fff; }

/* Dashboard "tile" — a summary card that links into another admin
   section (e.g. Payments). Sits above the items list on /admin. */
.admin-tile {
  display: grid; grid-template-columns: 1fr auto;
  align-items: center; gap: 12px;
  background: var(--paper-2);
  border: 1.5px solid rgba(214,0,1,.35);
  border-radius: 14px;
  padding: 18px 22px;
  text-decoration: none; color: inherit;
  margin: 0 0 22px;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.admin-tile:hover { transform: translateY(-2px); border-color: var(--red); box-shadow: 0 14px 30px -18px rgba(214,0,1,.35); }
.admin-tile-label { font-family: var(--font-head); font-weight: 700; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red); margin: 0 0 4px; }
.admin-tile-title { font-family: var(--font-head); font-weight: 700; font-size: 18px; color: var(--ink); margin: 0; }
.admin-tile-cta   { font-family: var(--font-head); font-weight: 700; color: var(--red); font-size: 14px; }
.admin-tile-cta::after { content: " ›"; transition: transform .15s ease; display: inline-block; }
.admin-tile:hover .admin-tile-cta::after { transform: translateX(3px); }
.admin-tile--quiet { border-color: var(--line); }
.admin-tile--quiet .admin-tile-label { color: var(--muted); }

/* Filter tabs (To verify / Verified / Rejected / All). Pill switcher
   sitting above the queue list. */
.admin-filter-tabs {
  display: inline-flex; gap: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px;
  margin: 0 0 20px;
  flex-wrap: wrap;
}
.admin-filter-tabs button {
  font-family: var(--font-head); font-weight: 700; font-size: 12.5px;
  color: var(--muted);
  background: transparent;
  border: 0; cursor: pointer;
  padding: 7px 14px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background .15s ease, color .15s ease;
}
.admin-filter-tabs button:hover { color: var(--red); }
.admin-filter-tabs button[aria-pressed="true"] {
  background: var(--ink); color: #fff;
}
.admin-filter-tabs .badge {
  background: rgba(0,0,0,.16);
  font-size: 11px; padding: 1px 7px; border-radius: 999px;
  font-weight: 800;
}
.admin-filter-tabs button:not([aria-pressed="true"]) .badge { background: var(--red); color: #fff; }

/* Payment queue cards */
.payment-list  { display: flex; flex-direction: column; gap: 14px; }
.payment-card  {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 20px;
  display: grid; gap: 14px;
}
.payment-card--verified { border-color: rgba(30,122,54,.4); background: #ecf6ee; }
.payment-card--rejected { border-color: rgba(214,0,1,.35); background: #fbe7e6; }
.payment-card--pending  { border-color: rgba(133,98,0,.32); background: #fff8e2; }

/* Expandable guide that lives at the top of /admin/payments. First-time
   admins see it open; once they ack, it closes by default but stays
   re-openable. Kept short and useful — not slop. */
.admin-guide {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 18px;
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.5;
}
.admin-guide > summary {
  cursor: pointer;
  font-family: var(--font-head); font-weight: 700; font-size: 14px;
  color: var(--red);
  list-style: none;
  display: inline-flex; align-items: center; gap: 6px;
  user-select: none;
}
.admin-guide > summary::-webkit-details-marker { display: none; }
.admin-guide > summary::before {
  content: "▸"; font-size: 11px; color: var(--muted); transition: transform .15s ease;
}
.admin-guide[open] > summary::before { transform: rotate(90deg); }
.admin-guide-body { padding-top: 10px; color: var(--ink); }
.admin-guide-body p { margin: 0 0 10px; }
.admin-guide-body ul { margin: 0 0 10px; padding-left: 20px; }
.admin-guide-body li { margin: 4px 0; }
.admin-guide-body strong { font-weight: 700; }
.admin-guide-body em { color: var(--red); font-style: normal; font-weight: 700; }
.admin-guide-fineprint { font-size: 13px; color: var(--muted); margin-top: 8px; }
.admin-guide-ack {
  background: transparent; border: 0; padding: 0;
  font-family: var(--font-head); font-weight: 700; font-size: 13px;
  color: var(--muted); text-decoration: underline; text-underline-offset: 2px;
  cursor: pointer;
}
.admin-guide-ack:hover { color: var(--red); }

/* Bulk-reminder bar — sits above the queue on Pending / Rejected tabs.
   Loud action (Nudge N) + quiet skipped-count note. The --quiet variant
   appears when there's nothing actionable (everyone nudged today). */
.payment-bulk-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  background: #fff;
  border: 1.5px solid rgba(214,0,1,.4);
  border-radius: 12px;
  padding: 12px 16px;
  margin: 0 0 18px;
}
.payment-bulk-bar-note { color: var(--muted); font-size: 13px; }
.payment-bulk-bar--quiet {
  background: var(--paper-2);
  border-color: var(--line);
  color: var(--muted);
  font-size: 13.5px;
  display: block;
}

.payment-card-head {
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px;
  align-items: center;
}
.payment-source-badge {
  font-family: var(--font-head); font-weight: 800; font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 4px 9px; border-radius: 6px;
}
.payment-source-badge--pledge { color: var(--red); border-color: rgba(214,0,1,.4); background: #fff; }

.payment-card-name { font-family: var(--font-head); font-weight: 700; font-size: 17px; color: var(--ink); }
.payment-card-amount { font-family: var(--font-head); font-weight: 800; font-size: 19px; color: var(--red); }

.payment-card-meta {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  font-size: 13px; color: var(--muted);
}
.payment-card-meta strong { color: var(--ink); font-weight: 700; }

.payment-card-body {
  display: grid; grid-template-columns: 120px 1fr; gap: 16px;
  align-items: flex-start;
}
@media (max-width: 600px) {
  .payment-card-body { grid-template-columns: 1fr; }
}
.payment-card-thumb {
  width: 120px; aspect-ratio: 4/3;
  background: #f0e2d2;
  border-radius: 10px; overflow: hidden;
  display: grid; place-items: center;
}
.payment-card-thumb a { display: block; width: 100%; height: 100%; }
.payment-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.payment-card-thumb-empty { font-family: var(--font-head); font-weight: 700; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); padding: 6px; text-align: center; }
@media (max-width: 600px) {
  .payment-card-thumb { width: 100%; }
}

.payment-card-details { font-size: 14px; color: var(--ink); line-height: 1.5; }
.payment-card-details .label { color: var(--muted); font-size: 12.5px; letter-spacing: 0.02em; text-transform: uppercase; font-weight: 700; }

.payment-card-actions {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  padding-top: 6px; border-top: 1px dashed var(--line);
}
.payment-card-actions .spacer { flex: 1; }
.payment-card-actions .ts { font-size: 12px; color: var(--muted); }

.payment-reject-form {
  display: grid; gap: 8px;
  padding: 14px;
  background: #fff;
  border: 1.5px dashed rgba(214,0,1,.4);
  border-radius: 12px;
}
.payment-reject-form label { font-family: var(--font-head); font-weight: 700; font-size: 12px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--muted); }
.payment-reject-form textarea {
  width: 100%; box-sizing: border-box;
  font-family: var(--font-body); font-size: 14px;
  padding: 10px 12px;
  border: 1.5px solid var(--field-line); border-radius: 10px;
  background: #fff; resize: vertical;
  min-height: 80px;
}
.payment-reject-form textarea:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(214,0,1,.12); }
.payment-reject-form .row { display: flex; gap: 8px; align-items: center; }
.payment-reject-form .row .spacer { flex: 1; }

.payment-empty {
  padding: 28px; text-align: center; color: var(--muted);
  background: var(--paper-2); border: 1px dashed var(--line); border-radius: 14px;
}

/* Auction-payment stub — visible placeholder so the admin knows the
   queue will absorb auction-winner payments later. Quiet card style
   that doesn't compete with active pledge rows. */
.payment-auction-stub {
  display: grid; grid-template-columns: 38px 1fr; gap: 14px;
  align-items: center;
  background: var(--paper-2);
  border: 1px dashed var(--line);
  border-radius: 14px;
  padding: 14px 18px;
  margin: 0 0 16px;
}
.payment-auction-stub .stub-icon {
  width: 38px; height: 38px; border-radius: 50%;
  background: url("/images/plaid-full.png") center / 60px 60px;
  border: 1px solid var(--line);
}
.payment-auction-stub h4 { font-family: var(--font-head); font-weight: 700; font-size: 14px; color: var(--ink); margin: 0; }
.payment-auction-stub p  { font-size: 13px; color: var(--muted); margin: 2px 0 0; line-height: 1.45; }

@media (prefers-reduced-motion: reduce) { }