/* ============================================================================
   RWS FY27 — concept-01 · LUXURY DARK (shared theme for all pages)
   Near-black canvas, gold-yellow as precious-metal accent, Playfair + Lato.
   Loaded after _shared/brand-tokens.css + base.css. Long-form pages add
   class="reading" to <body> for a light reading surface (see §READING).
   Page-specific widgets (calendars, funnels) go in each page's scoped <style>.
   ============================================================================ */

/* ---- Canvas + semantic re-bind for dark ---------------------------------- */
:root{
  --surface-1: var(--ink-soft);            /* #2A312D raised surface */
  --surface-2: #20272300;                  /* (unused placeholder) */
  --hair:      rgba(255,255,255,0.10);
  --hair-2:    rgba(255,255,255,0.26);
  --on-dark:        #ffffff;
  --on-dark-muted:  rgba(255,255,255,0.64);
  --on-dark-faint:  rgba(255,255,255,0.42);
  --gold: var(--rw-yellow);
  --deep: #111815;                          /* deeper than ink — footer/base */
}
body{
  background: var(--ink); color: var(--on-dark);
  --bg: var(--ink); --surface: var(--ink-soft); --text:#fff;
  --text-muted: var(--on-dark-muted); --text-faint: var(--on-dark-faint); --hairline: var(--hair);
}
h1,h2,h3,h4{ color: var(--on-dark); }
.skip-link{ background: var(--ink-soft); color:#fff; }
:focus-visible{ outline-color: var(--gold); }
.thread{ background: var(--gold); }

/* ---- Generic layout helpers --------------------------------------------- */
.wrap{ max-width: var(--maxw); margin-inline:auto; padding-inline: var(--side-pad); }
.narrow{ max-width: 820px; }
.section{ padding-block: clamp(3.5rem,6vw,6.5rem); }
.eyebrow{ font-size: var(--fs-kicker); font-weight:700; letter-spacing: var(--tracking-kicker); text-transform:uppercase; color: var(--on-dark-faint); }
.display{ font-family: var(--font-display); font-weight:900; font-style:italic; line-height: var(--lh-tight); letter-spacing:-0.01em; }
.muted{ color: var(--on-dark-muted); }
.faint{ color: var(--on-dark-faint); }

/* ---- Top bar (sub-pages): brand + back to dashboard --------------------- */
.topbar{
  position: sticky; top:0; z-index:100; display:flex; align-items:center; gap: var(--s-4);
  min-height: var(--header-h); padding: 0.5rem var(--side-pad);
  background: color-mix(in srgb, var(--ink) 82%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hair);
}
.topbar .brand{ display:inline-flex; align-items:center; gap:.6rem; }
.topbar .brand .mark{ width:30px; height:30px; border-radius:4px; }
.topbar .brand .name{ font-weight:700; font-size:.82rem; line-height:1.1; color:#fff; }
.topbar .brand .name small{ display:block; font-weight:400; font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; color: var(--on-dark-faint); }
.topbar .spacer{ margin-left:auto; }
.topbar .topnav{ display:flex; gap: var(--s-4); align-items:center; }
.topbar .topnav a{ font-size:.82rem; font-weight:700; color: var(--on-dark-muted); }
.topbar .topnav a:hover{ color:#fff; }
@media(max-width:640px){ .topbar .brand .name{ display:none; } .topbar .topnav{ gap: var(--s-3); } }

.back-link{ display:inline-flex; align-items:center; gap:.4em; font-size: var(--fs-small); font-weight:700; color: var(--on-dark-faint); letter-spacing:.04em; }
.back-link::before{ content:"←"; }
.back-link:hover{ color:#fff; }

/* ---- Buttons (extends base) --------------------------------------------- */
.btn-yellow{ background: var(--gold); color: var(--ink); }
.btn-yellow:hover{ background: var(--rw-yellow-deep); }
.btn-ghost{ color: var(--on-dark-muted); border-color: var(--hair); }
.btn-ghost:hover{ color:#fff; border-color: var(--hair-2); }

/* ---- HERO --------------------------------------------------------------- */
.hero{ padding-block: clamp(4rem,8vw,8.5rem) clamp(3rem,5vw,6rem); }
.hero-inner{ max-width: 820px; }
.hero .eyebrow{ display:block; margin-bottom: var(--s-3); }
.hero .thread{ width:56px; height:3px; border:0; margin: var(--s-2) 0 var(--s-5); opacity:.9; }
.hero-headline{ font-family: var(--font-display); font-style:italic; font-weight:900; font-size: var(--fs-mega); line-height: var(--lh-tight); letter-spacing:-0.01em; margin-bottom: var(--s-5); }
.hero-sub{ font-size: var(--fs-lead); color: var(--on-dark-muted); line-height: var(--lh-body); max-width: 640px; margin-bottom: var(--s-7); }
.hero-cta{ display:flex; gap: var(--s-4); flex-wrap:wrap; align-items:center; }

/* ---- Cards / panels / tiles --------------------------------------------- */
.card, .panel, .tile{
  background: var(--surface-1); border:1px solid var(--hair); border-radius: var(--r-lg);
  padding: var(--s-6);
}
.tile{ display:flex; flex-direction:column; gap: var(--s-2); text-decoration:none; color: var(--on-dark);
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease), transform .22s var(--ease), background .22s var(--ease); min-height: 150px; }
.tile:hover{ border-color: var(--hair-2); box-shadow: 0 10px 34px rgba(0,0,0,.36); transform: translateY(-2px); background:#323b37; }
.tile .tile-label{ font-family: var(--font-body); font-weight:700; font-size: 1.12rem; line-height: var(--lh-snug); letter-spacing:-0.005em; }
.tile .tile-line{ font-size: var(--fs-small); color: var(--on-dark-muted); line-height:1.55; flex:1; }
.tile .tile-go{ margin-top: var(--s-2); font-size: var(--fs-small); font-weight:700; color: var(--gold); letter-spacing:.04em; display:inline-flex; align-items:center; gap:.45em; }
.tile .tile-go::after{ content:"→"; transition: transform .18s var(--ease); }
.tile:hover .tile-go::after{ transform: translateX(4px); }

.tile-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: var(--s-4); }
@media(max-width:860px){ .tile-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .tile-grid{ grid-template-columns:1fr; } }

/* ---- Stat block --------------------------------------------------------- */
.stat{ display:flex; flex-direction:column; gap: var(--s-1); }
.stat .stat-num{ font-family: var(--font-display); font-style:italic; font-weight:700; font-size: clamp(2rem,4vw,3rem); line-height:1; color:#fff; }
.stat .stat-label{ font-size: var(--fs-small); color: var(--on-dark-muted); }
.stat .stat-note{ font-size: .7rem; color: var(--on-dark-faint); letter-spacing:.04em; }

/* gold left-bar callout (e.g. proof number) */
.callout{ border-left:2px solid var(--gold); padding-left: var(--s-5); }

/* ---- Badges: estimate / example / sourced ------------------------------- */
.badge{ display:inline-flex; align-items:center; gap:.4em; font-family: var(--font-body); font-size:.64rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; padding:.28em .6em; border-radius: var(--r-pill); border:1px solid var(--hair); color: var(--on-dark-muted); }
.badge-estimate{ border-color: rgba(255,229,18,.4); color: var(--gold); }
.badge-example{ border-color: rgba(255,255,255,.28); color: var(--on-dark-muted); }
.badge-verified{ border-color: rgba(120,220,160,.4); color:#8fe3b0; }

/* ---- Citations / source links ------------------------------------------- */
.cite{ color: var(--gold); text-decoration: none; border-bottom:1px dotted rgba(255,229,18,.5); font-weight:700; }
.cite:hover{ border-bottom-style: solid; }
sup.cite-ref{ font-size:.7em; }
.sources{ font-size: var(--fs-small); color: var(--on-dark-faint); line-height:1.6; }
.sources a{ color: var(--on-dark-muted); border-bottom:1px dotted var(--hair-2); }
.sources a:hover{ color:#fff; }

/* ---- Tables ------------------------------------------------------------- */
table.data{ width:100%; border-collapse:collapse; font-size: var(--fs-small); }
table.data th, table.data td{ text-align:left; padding:.7em .8em; border-bottom:1px solid var(--hair); }
table.data thead th{ color: var(--on-dark-faint); text-transform:uppercase; letter-spacing:.08em; font-size:.66rem; }
table.data tbody tr:hover{ background: rgba(255,255,255,.03); }
table.data .num{ text-align:right; font-variant-numeric: tabular-nums; }

/* ---- Forms (dark) ------------------------------------------------------- */
.field{ display:flex; flex-direction:column; gap: var(--s-1); }
.field label{ font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color: var(--on-dark-faint); }
.field input, .field select, .field textarea{
  background: var(--surface-1); border:1px solid var(--hair); border-radius: var(--r-sm); color:#fff;
  font-family: var(--font-body); font-size: var(--fs-body); padding:.75em 1em; width:100%; appearance:none; outline:none;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field input::placeholder, .field textarea::placeholder{ color: rgba(255,255,255,.25); }
.field select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='rgba(255,255,255,0.35)' d='M0 0l6 8 6-8z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1em center; background-size:10px; padding-right:2.5em; cursor:pointer; }
.field select option{ background: var(--ink-soft); color:#fff; }
.field input:focus, .field select:focus, .field textarea:focus{ border-color: rgba(255,229,18,.45); box-shadow:0 0 0 3px rgba(255,229,18,.08); }
.field textarea{ resize:vertical; min-height:90px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap: var(--s-3); }
@media(max-width:480px){ .form-row{ grid-template-columns:1fr; } }

/* ---- Countdown (elegant, opt-in) ---------------------------------------- */
.countdown{ display:none; flex-direction:row; align-items:center; gap:0; flex-wrap:wrap; row-gap: var(--s-5); }
html[data-countdown="on"] .countdown{ display:flex; }
.cd-unit{ display:flex; flex-direction:column; align-items:center; padding-inline: clamp(1.2rem,3vw,2.6rem); }
.cd-unit:first-child{ padding-left:0; }
.cd-num{ font-family: var(--font-display); font-style:italic; font-weight:700; font-size: clamp(2.4rem,5vw,4rem); line-height:1; color:#fff; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.cd-label{ font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color: var(--on-dark-faint); margin-top: var(--s-2); }
.cd-sep{ width:1px; height: clamp(2rem,4vw,3rem); background: var(--gold); opacity:.35; align-self:center; }

/* ---- Footer ------------------------------------------------------------- */
footer.site{ background: var(--deep); border-top:1px solid var(--hair); padding-block: var(--s-8); padding-inline: var(--side-pad); }
footer.site .footer-inner{ max-width: var(--maxw); margin-inline:auto; display:flex; flex-direction:column; gap: var(--s-5); }
footer.site .footer-brand{ display:flex; align-items:center; gap: var(--s-3); }
footer.site .footer-mark{ width:28px; height:28px; border-radius:3px; }
footer.site .footer-name{ font-size: var(--fs-small); font-weight:700; color: var(--on-dark-muted); line-height:1.3; }
footer.site .footer-name small{ display:block; font-weight:400; font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color: var(--on-dark-faint); }
footer.site .footer-meta{ font-size: var(--fs-small); color: var(--on-dark-faint); line-height:1.5; }
footer.site .footer-meta a{ color: var(--on-dark-muted); }
footer.site .footer-meta a:hover{ color:#fff; }
.disclaimer{ color: var(--on-dark-faint); font-size: .8rem; line-height:1.55; max-width: 720px; border-top:1px solid var(--hair); padding-top: var(--s-4); }

/* ---- Reveal (additive; only when motion on) ----------------------------- */
html[data-motion="on"] .reveal{ transition-duration:.8s; transition-timing-function: cubic-bezier(.22,.61,.36,1); }

/* ============================================================================
   READING — light surface for long-form pages (blog, budget-guide)
   Add class="reading" to <body>. Premium dark topbar stays; body reads light.
   ============================================================================ */
body.reading{ background: var(--off-white); color: var(--ink);
  --text: var(--ink); --text-muted: var(--grey-700); --text-faint: var(--grey-500); --hairline: var(--border); --surface:#fff; }
body.reading h1, body.reading h2, body.reading h3, body.reading h4{ color: var(--ink); }
body.reading .topbar{ background: color-mix(in srgb, var(--ink) 92%, transparent); } /* keep dark premium bar */
body.reading footer.site{ background: var(--ink); }
body.reading .article{ max-width: var(--maxw-prose); margin-inline:auto; padding-inline: var(--side-pad); }
body.reading .article p{ font-size:1.12rem; line-height:1.75; color:#2a2a2a; margin-bottom: var(--s-4); }
body.reading .article h2{ font-family: var(--font-display); font-size: var(--fs-h2); margin-top: var(--s-7); margin-bottom: var(--s-3); }
body.reading .article h3{ font-family: var(--font-body); font-weight:700; font-size: 1.18rem; margin-top: var(--s-5); margin-bottom: var(--s-2); letter-spacing:-0.005em; }
body.reading .article blockquote{ border-left:3px solid var(--gold); padding-left: var(--s-4); margin: var(--s-5) 0; font-family: var(--font-display); font-style:italic; font-size:1.25rem; color: var(--ink); }
body.reading .card, body.reading .panel{ background:#fff; border-color: var(--border); }
body.reading .cite{ color: var(--gold-d, #7a5d14); border-bottom-color: rgba(122,93,20,.4); }
body.reading .sources{ color: var(--grey-500); }
body.reading .sources a{ color: var(--grey-700); border-bottom:1px dotted var(--border); }
body.reading .disclaimer{ color: var(--grey-500); border-top-color: var(--border); }
body.reading .badge-estimate{ color:#8a6d00; border-color: rgba(138,109,0,.4); }
body.reading table.data th, body.reading table.data td{ border-bottom-color: var(--border); }
body.reading table.data thead th{ color: var(--grey-500); }

/* ---- Responsive --------------------------------------------------------- */
@media(max-width:560px){ .hero-headline{ letter-spacing:-.005em; } .callout{ padding-left: var(--s-4); } }

/* ── Item 10: "Cam-paign" — hand-drawn double pen underline under the Cam in Campaign ── */
.cam-hi { position: relative; white-space: nowrap; }
.cam-hi .cam-underline {
  position: absolute; left: -2px; right: -2px; bottom: -0.40em;
  width: calc(100% + 4px); height: 0.55em; overflow: visible;
  color: var(--cam-stroke, var(--gold)); pointer-events: none;
}
