/* PRP-Amped — PREVIEW premium theme (2026-09-23). NOT LIVE.
 *
 * Layered OVER the live style.css rather than replacing it, so every rule the
 * live site already earned - the dropdown, the lightbox, the phone layout, the
 * contrast history in its comments - keeps working. This file changes the
 * look, not the behaviour.
 *
 * Owner, Founder Interview q94: "a nice, darker background with some great
 * graphics, good pictures, and an interactive type website."
 *
 * ACCESSIBILITY IS THE BRIEF, NOT A FINISH. The Owner has significant
 * permanent vision loss. Every text colour below is held to WCAG AAA (7:1)
 * against the ground it sits on; ratios are noted beside each. Body text is
 * 18px, never smaller than 16px anywhere.
 *
 * The accent is gold, taken from Integrity's own gold starter-package
 * photography that leads the page - not invented, and restrained to links,
 * buttons and rules. */

:root:root:root {
  --ground:        #0b0f14;
  --surface:       #121922;
  --surface-sunk:  #0e141b;

  --ink:           #f4f1ea;   /* 17.0:1 on ground, 15.7:1 on surface */
  --ink-soft:      #dcd6ca;   /* 13.3:1 on ground, 12.2:1 on surface */
  --ink-faint:     #c9c2b4;   /* 10.9:1 on ground, 10.0:1 on surface */

  --rule:          #28323f;
  --rule-strong:   #3d4a5c;

  --accent-ink:    #f2cd73;   /* links: 12.6:1 on ground, 11.6:1 on surface */
  --accent:        #d9a943;   /* button fill; label #0b0f14 on it is 8.9:1 */
  --accent-bright: #f7dc97;
  --accent-wash:   #231d10;

  --flag:          #f3b957;
  --flag-wash:     #251c0c;
  --flag-rule:     #5a4520;

  --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 10px 30px rgba(0, 0, 0, .35);
  --page: 1200px;
  color-scheme: dark;
}

html { background: var(--ground); }
body {
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(217, 169, 67, .10), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, rgba(67, 210, 210, .06), transparent 60%),
    var(--ground);
  color: var(--ink);
  font-size: 18px;
  line-height: 1.65;
}
p, li, td, th, summary, figcaption { font-size: 1rem; }
h1 { font-size: clamp(2.1rem, 4.6vw, 3.5rem); line-height: 1.12; letter-spacing: -0.01em; }
h2 { font-size: clamp(1.55rem, 2.8vw, 2.1rem); line-height: 1.2; }
h3 { font-size: 1.3rem; }
a { color: var(--accent-ink); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 3px solid var(--accent-bright);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- header and logo ---------- */
.site-header {
  background: rgba(11, 15, 20, .92);
  border-bottom: 1px solid var(--rule);
  backdrop-filter: blur(8px);
}
.site-title { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; }
.logo-mark { width: 54px; height: 54px; flex: none; }
.wordmark { color: var(--ink); font-size: 1.5rem; letter-spacing: .01em; }
.wordmark-amp { color: var(--accent-ink); }
.site-attrib { color: var(--ink-faint); font-size: .9rem; }
nav.site-nav a { color: var(--ink); font-size: 1rem; }
nav.site-nav ul.dropdown-menu { background: var(--surface); border-color: var(--rule-strong); }
.nav-cta, nav.site-nav a.nav-cta {
  background: var(--accent); color: #0b0f14; border-radius: 999px;
  padding: .55rem 1.1rem; font-weight: 600; min-height: 44px; display: inline-flex; align-items: center;
}

/* ---------- buttons: 48px targets ---------- */
.btn { min-height: 48px; padding: .8rem 1.4rem; border-radius: 999px; font-size: 1.05rem; font-weight: 600; }
.btn-primary { background: var(--accent); color: #0b0f14; border: 2px solid var(--accent); }
.btn-primary:hover { background: var(--accent-bright); border-color: var(--accent-bright); color: #0b0f14; }
.btn-secondary { background: transparent; color: var(--ink); border: 2px solid var(--rule-strong); }
.btn-secondary:hover { border-color: var(--accent-ink); color: var(--accent-ink); }

/* ---------- hero: large photography on light plates ----------
   Integrity's photographs are shot on white. On a dark page they are set on
   ivory plates, like product cards in a showroom, rather than cut out. */
.hero { padding-block: clamp(2.5rem, 6vw, 5rem); }
.eyebrow { color: var(--accent-ink); letter-spacing: .14em; text-transform: uppercase; font-size: .9rem; }
.lede { color: var(--ink-soft); font-size: 1.2rem; }
.lede-support { color: var(--ink-soft); }
.brand-rule { border: 0; height: 2px; width: 72px; background: linear-gradient(90deg, var(--accent), transparent); }
.plate { background: #fbf8f1; border-radius: 22px; box-shadow: var(--shadow); padding: 14px; }
.plate img { border-radius: 14px; }

/* ---------- reviews ---------- */
.reviews .review {
  background: var(--surface); border: 1px solid var(--rule); border-left: 4px solid var(--accent);
  border-radius: 16px; padding: 1.4rem 1.6rem;
}
.reviews blockquote p { color: var(--ink); font-size: 1.1rem; }
.reviews figcaption { color: var(--accent-ink); }

/* ---------- category tiles ---------- */
.category-tile a {
  background: linear-gradient(180deg, var(--surface), var(--surface-sunk));
  border: 1px solid var(--rule); border-radius: 18px; min-height: 48px;
  transition: border-color .15s ease, transform .15s ease;
}
.category-tile a:hover { border-color: var(--accent); transform: translateY(-2px); }
.cat-name { color: var(--ink); font-size: 1.15rem; }
.cat-desc { color: var(--ink-soft); }
.cat-count { color: var(--accent-ink); }

/* ---------- the package picker ---------- */
.picker {
  margin-block: clamp(2rem, 5vw, 4rem);
  background: linear-gradient(160deg, #151d27, #0f151c);
  border: 1px solid var(--rule-strong); border-radius: 24px;
  padding: clamp(1.25rem, 4vw, 2.5rem);
  box-shadow: var(--shadow);
}
.picker h2 { margin-top: 0; }
.picker .picker-note { color: var(--ink-soft); max-width: var(--measure); }
.picker fieldset { border: 0; padding: 0; margin: 1.5rem 0 0; }
.picker legend { font-family: var(--font-display); font-size: 1.2rem; color: var(--ink); margin-bottom: .6rem; }
.picker .choices { display: flex; flex-wrap: wrap; gap: .6rem; }
.picker .choices label {
  position: relative; display: inline-flex; align-items: center; gap: .5rem;
  min-height: 52px; padding: .7rem 1.2rem; border-radius: 14px; cursor: pointer;
  border: 2px solid var(--rule-strong); background: var(--surface-sunk); color: var(--ink); font-size: 1.05rem;
}
.picker .choices input { width: 22px; height: 22px; accent-color: var(--accent); margin: 0; }
.picker .choices label:has(input:checked) { border-color: var(--accent); background: var(--accent-wash); }
.picker-result { margin-top: 2rem; }
.picker-result[hidden] { display: none; }
.result-card {
  display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 1.5rem; align-items: start;
  background: var(--surface); border: 1px solid var(--accent); border-radius: 20px; padding: 1.5rem;
}
.result-card .plate { padding: 10px; }
.result-card img { width: 100%; height: auto; display: block; }
.result-card h3 { margin: 0 0 .25rem; font-size: 1.45rem; }
.result-price { font-family: var(--font-display); font-size: 1.6rem; color: var(--accent-ink); margin: 0 0 1rem; }
.result-facts { display: grid; grid-template-columns: max-content 1fr; gap: .45rem 1rem; margin: 0 0 1.25rem; }
.result-facts dt { color: var(--ink-faint); }
.result-facts dd { margin: 0; color: var(--ink); }
.result-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0; }
.picker-fineprint { color: var(--ink-faint); font-size: .95rem; margin-top: 1rem; }

/* ---------- product pages ---------- */
.product-row {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 20px;
  padding: clamp(1rem, 3vw, 1.75rem); box-shadow: var(--shadow);
}
.product-row-media { background: #fbf8f1; border-radius: 16px; padding: 10px; }
.product-row-media img { border-radius: 10px; }
.product-name { color: var(--ink); font-size: 1.4rem; }
.product-price { color: var(--accent-ink); font-size: 1.25rem; }
.product-desc, .product-desc p { color: var(--ink-soft); }
/* THE TOGGLE PILLS (2026-09-23). The live sheet fills them with --accent-ink and
   writes white on top; this sheet had recoloured the TEXT to --accent-ink as well,
   so it was gold on gold, 1:1 - the Owner found it: "you can't see the words".
   Dark on gold, the pairing the primary button already uses (8.9:1), and the
   hover state too, which was white on cream. */
.product-options > summary, .product-section > summary, .product-contents > summary {
  min-height: 48px; display: inline-flex; align-items: center; cursor: pointer;
  background: var(--accent); border-color: var(--accent); color: #0b0f14;
}
.product-options > summary:hover, .product-section > summary:hover, .product-contents > summary:hover,
.product-options > summary:focus-visible, .product-section > summary:focus-visible, .product-contents > summary:focus-visible {
  background: var(--accent-bright); border-color: var(--accent-bright); color: #0b0f14;
}
.variant-name { color: var(--ink-soft); }
.variant-price { color: var(--ink); }
nav[aria-label="Breadcrumb"] { color: var(--ink-faint); font-size: 1rem; }

/* ---------- footer ---------- */
.site-footer { background: #080b0f; border-top: 1px solid var(--rule); color: var(--ink-soft); }
.footer-wordmark { color: var(--ink); }
.footer-head { color: var(--accent-ink); }

/* ---------- phone ---------- */
@media (max-width: 720px) {
  .result-card { grid-template-columns: 1fr; }
  .result-card .plate { max-width: 280px; }
  .result-facts { grid-template-columns: 1fr; gap: .1rem; }
  .result-facts dd { margin-bottom: .6rem; }
  .picker .choices label { flex: 1 1 100%; }
  .btn { width: 100%; justify-content: center; }
}


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .category-tile a:hover { transform: none; }
}

/* ---------- THE 16px FLOOR, enforced ----------
   The live stylesheet sets its small labels (footer headings, counts, captions,
   disclosure summaries) with more specific selectors, some as small as 10.9px.
   Measured in a real browser on 2026-09-23 - nineteen of them - and pinned
   here. `html` at 112.5% also makes 1rem = 18px, so everything written in rem
   in the live stylesheet grows with it. */
html { font-size: 112.5%; }
body { font-size: 1rem; }
.site-header .site-attrib, .hero .eyebrow, .category-tile .cat-count,
.site-footer .footer-head, .dropdown-toggle .caret {
  font-size: 16px !important;
}
.category-tile .cat-desc, .reviews .review figcaption, .site-footer p, .site-footer li,
.site-footer a, nav.site-nav a, .picker-fineprint, .picker-fineprint a,
.product-options summary, .product-section summary, .product-contents summary,
.variant-name, .variant-price, .section-body, .section-body * {
  font-size: max(1rem, 16px) !important;
}

/* Logo mark beside the wordmark and its attribution, not above them - the live
   header stacks .site-title's children in a column. */
.site-header .site-title {
  display: grid !important; grid-template-columns: auto auto; column-gap: .75rem;
  align-items: center; justify-content: start;
}
.site-header .site-title .logo-mark { grid-row: 1 / span 2; }

/* Footer on a phone: one column. At 18px text the live two-column footer ran
   39px past a 390px screen (measured 2026-09-23). */
@media (max-width: 720px) {
  .site-footer .footer-inner { display: grid !important; grid-template-columns: 1fr !important; gap: 1.5rem; }
  .site-footer .footer-inner > * { min-width: 0; }
}

/* The centrifuge notice sits directly under the question it answers (Owner, 2026-09-23). */
.picker-alert {
  margin: 0.25rem 0 1.5rem;
  padding: 1rem 1.25rem;
  border: 2px solid var(--accent);
  border-left-width: 8px;
  border-radius: 10px;
  background: rgba(224, 176, 74, 0.12);
  color: #fff7e0;
  font-size: 1.2rem;
  line-height: 1.5;
  font-weight: 600;
}

/* The Drop wordmark (Owner's choice, 2026-09-23): PRP bold white, AMPED light gold capitals. */
.wordmark { font-family: var(--font-display); font-size: 1.6rem; line-height: 1; }
.wm-prp { font-weight: 700; color: var(--ink); letter-spacing: .02em; }
.wordmark-amp { font-weight: 300; color: var(--accent-ink); letter-spacing: .14em; margin-left: .04em; }

/* THE HEADER CTA WHEN MARKED CURRENT, AND ON HOVER (2026-09-24). The live sheet
   fills these with --ink and writes white; here --ink is cream, so it was white on
   cream, 1.13:1, on ten pages. Dark on bright gold instead (well over 7:1). */
nav.site-nav a.nav-cta[aria-current="page"],
nav.site-nav a.nav-cta:hover,
nav.site-nav a.nav-cta:focus-visible {
  background: var(--accent-bright); border-color: var(--accent-bright); color: #0b0f14;
}
/* The enrolment form notice: the live light-theme brown (#5c3c00) on this dark
   ground was 1.68:1. The live sheet's own dark-theme colour. */
.form-notice { color: #f0cf9a; }

/* NOTHING UNDER 16px, ON EVERY PAGE (2026-09-24). Found by measuring all twenty
   pages at phone width, not the two the preview first covered: table headings,
   form labels, table captions, footnotes, review credits, the form notice. */
th, caption, .field label, label, p.footnote, .footnote,
figure.product-review figcaption, .product-review figcaption, p.form-notice, .form-notice {
  font-size: max(1rem, 16px) !important;
}

/* The one light panel left on any page (found by scanning all twenty): the
   first-order offer on /become-a-customer/. Dark surface, gold rule, like the
   centrifuge notice. */
.offer-note { background: var(--surface); color: var(--ink); border-left: 6px solid var(--accent); }
.offer-note strong { color: var(--accent-bright); }