/* ==========================================================================
   Electric Marae - "wharekai glow" identity (night branch, 2026-10-09)
   Its own campaign look, deliberately unlike the Powered from Within / NZME
   cut-out template: night indigo ground, warm kitchen-light amber, painterly
   art, a soft serif display (Fraunces) in sentence case, pill buttons, no
   wonky radii, no highlighter bars. Loaded after styles.css; it re-themes by
   overriding the tokens each band and component reads, so app.js / scene.js
   hooks are untouched.
   ========================================================================== */

:root {
  color-scheme: dark;

  --night:     #10142a;   /* page ground, same as the art's key colour */
  --night-2:   #151a35;   /* alternate band */
  --night-3:   #1c2244;   /* raised surface */
  --night-4:   #262d55;
  --amber:     #f2a541;   /* kitchen light: fills, markers, links */
  --glow:      #ffd28a;   /* highlight text on night */
  --ember:     #d9663a;
  --parchment: #f5ead2;   /* headings on night */
  --text-n:    #ddd6c8;   /* body on night */
  --muted-n:   #a7a2b6;
  --kawakawa:  #8db38a;
  --line-n:    rgba(245, 234, 210, 0.14);

  --font-body:    'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --fs-hero: clamp(3.2rem, 8.4vw, 7.2rem);
  --fs-h2:   clamp(2.1rem, 4.4vw, 3.6rem);

  /* the base sheet's tokens, re-pointed at night */
  --ink:            var(--parchment);
  --ink-deep:       #0b0e1f;
  --teal:           var(--text-n);   /* the base sheet uses teal as card text */
  --teal-mid:       var(--amber);
  --teal-light:     var(--amber);
  --cream:          var(--night);
  --paper:          var(--night-2);
  --gold:           var(--amber);
  --mint:           #8b86a3;
  --text-on-dark:   var(--text-n);
  --muted-on-dark:  var(--muted-n);
  --text-on-cream:  var(--text-n);
  --muted-on-cream: var(--muted-n);
  --hairline-dark:  var(--line-n);
  --hairline-cream: var(--line-n);
  --surface-dark:   rgba(245, 234, 210, 0.04);

  --wonk: 999px; --wonk-alt: 999px;
  --radius-card: 18px; --radius-card-alt: 18px;
  --card-white:  var(--night-3);
  --card-radius: 18px;
  --card-shadow: 0 1px 0 rgba(245, 234, 210, 0.06) inset, 0 20px 40px rgba(0, 0, 0, 0.35);
  --card-shadow-hover: 0 1px 0 rgba(245, 234, 210, 0.1) inset, 0 26px 50px rgba(0, 0, 0, 0.45);
  --card-line: var(--line-n);
  --shadow-hard: 0 0 0 4px rgba(242, 165, 65, 0.22), 0 12px 30px rgba(242, 165, 65, 0.25);
  --shadow-cream: 0 20px 40px rgba(0, 0, 0, 0.35);
  --cut-drop: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.45));
  --cut-drop-dark: var(--cut-drop);

  --grid-blue: #7d8fd6;
  --spike-line: var(--parchment);
  --spike-peak: rgba(242, 165, 65, 0.2);
  --match-bg: var(--amber);
}

html { background: var(--night); }
body { background: var(--night); color: var(--text-n); font-family: var(--font-body); }
::selection { background: var(--amber); color: var(--night); }

/* ---------------------------------------------------------------- bands */
.pfw-band--cream { background: var(--night); color: var(--text-n); }
.pfw-band--paper { background: var(--night-2); }
.pfw-band--deep  { background: var(--ink-deep); }
.pfw-band--teal  { background: var(--night-2); }
/* the warm "kitchen" band: lamplight on paper, the page's one light moment */
.pfw-band--ink {
  --ink: #2b1c10; --text-on-dark: #3f2c1c; --muted-on-dark: #7a6249; --cream: #2b1c10;
  --hairline-dark: rgba(43, 28, 16, 0.16); --card-white: #fff7e6; --line-n: rgba(43, 28, 16, 0.14);
  background: radial-gradient(120% 90% at 50% 0%, #fbe7bf 0%, #f2d39c 55%, #e9c07f 100%);
  color: #3f2c1c;
}
.pfw-band--ink .hl { color: var(--ember); }
.pfw-band--ink::before, .pfw-band--deep::before, .pfw-band--teal::before { opacity: 0.5; }

/* a soft stars-and-dusk gradient between night bands, instead of hard colour blocks */
.pfw-band--cream + .pfw-band--paper, .pfw-band--paper + .pfw-band--cream { border-top: 1px solid var(--line-n); }

/* ---------------------------------------------------------------- type */
.pfw-h1, .pfw-h2, .em-picker__title {
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: none;
  letter-spacing: -0.02em;
  font-variation-settings: "SOFT" 100, "WONK" 0, "opsz" 144;
}
.pfw-h2 { line-height: 1.04; color: var(--parchment); }
.pfw-h2 em, .pfw-h1 em { font-style: italic; color: var(--glow); }
.pfw-band--ink .pfw-h2, .pfw-band--deep .pfw-h2, .pfw-band--teal .pfw-h2 { color: var(--ink); }
.pfw-band--deep .pfw-h2, .pfw-band--teal .pfw-h2 { color: var(--parchment); }
.pfw-lede { color: var(--text-n); }
.hl { background: none; color: var(--glow); padding: 0; margin: 0; }
.pfw-stat__value, .em-sides__fig b {
  font-family: var(--font-display); font-weight: 500; letter-spacing: -0.02em;
  font-variation-settings: "SOFT" 100, "opsz" 144;
}

/* ---------------------------------------------------------------- buttons */
.pfw-btn {
  border-radius: 999px; border: 0;
  background: var(--amber); color: #1a1206;
  box-shadow: 0 0 0 0 rgba(242, 165, 65, 0), 0 10px 30px rgba(242, 165, 65, 0.28);
  font-weight: 600; letter-spacing: 0.01em;
}
.pfw-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-hard); }
.pfw-btn--ghost, .pfw-btn--ghost-ink {
  background: transparent; color: var(--parchment); box-shadow: inset 0 0 0 1.5px rgba(245, 234, 210, 0.5);
}
.pfw-btn--ghost:hover, .pfw-btn--ghost-ink:hover { background: rgba(245, 234, 210, 0.08); box-shadow: inset 0 0 0 1.5px var(--parchment); }
.pfw-btn--ink { background: var(--parchment); color: var(--night); }
.pfw-band--ink .pfw-btn--ghost, .pfw-band--ink .pfw-btn--ghost-ink { color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(43, 28, 16, 0.5); }

/* ---------------------------------------------------------------- topbar: own wordmark, Rewiring as a credit */
.pfw-topbar { color: var(--parchment); }
.pfw-topbar.is-scrolled { background: rgba(16, 20, 42, 0.92); border-bottom-color: var(--line-n); }
@supports (backdrop-filter: blur(8px)) {
  .pfw-topbar.is-scrolled { background: rgba(16, 20, 42, 0.72); backdrop-filter: blur(14px) saturate(1.2); }
}
.pfw-topbar__brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 600; text-transform: none;
  font-size: 20px; letter-spacing: -0.01em; color: var(--parchment);
  font-variation-settings: "SOFT" 100, "opsz" 48;
}
.pfw-topbar__brand span { color: inherit; }
.em-mark { width: 26px; height: 26px; flex: none; }
.em-brand__credit {
  display: block; font-family: var(--font-body); font-size: 11px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-n); margin-top: 3px;
}
.em-brand__text { display: flex; flex-direction: column; line-height: 1; }
.pfw-topbar__link { color: var(--text-n); border-radius: 999px; }
.pfw-topbar__link:hover { color: var(--parchment); background: rgba(245, 234, 210, 0.08); }

/* ---------------------------------------------------------------- hero: full-bleed painted dusk */
.pfw-hero.em-hero-night {
  min-height: max(100dvh, 680px);
  padding: calc(var(--topbar-h) + 48px) 0 clamp(56px, 9vh, 110px);
  align-items: flex-end;
  overflow: hidden;
  background: var(--night);
}
.em-hero-night .pfw-scene { inset: 0; top: 0; bottom: 0; left: 0; right: 0; }
.em-hero-night .pfw-scene__img { object-fit: cover; object-position: 70% 50%; }
.em-hero-night::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(16, 20, 42, 0.9) 0%, rgba(16, 20, 42, 0.55) 34%, rgba(16, 20, 42, 0) 58%),
    linear-gradient(0deg, var(--night) 0%, rgba(16, 20, 42, 0) 28%);
}
.em-hero-night .pfw-hero__inner { display: block; z-index: 1; }
.em-hero-night .pfw-hero__copy { max-width: 600px; }
.em-hero-night .em-h1__reo {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(1.25rem, 2vw, 1.7rem); color: var(--glow); margin-bottom: 0.15em;
  font-variation-settings: "SOFT" 100, "opsz" 48;
}
.em-hero-night .pfw-h1 { color: var(--parchment); line-height: 0.92; font-weight: 400; }
.em-hero-night .pfw-h1 .pfw-h1__mark { background: none; padding: 0; margin: 0; }
.em-hero-night .pfw-hero__sub { color: #e9e2d2; max-width: 38ch; font-size: clamp(1.1rem, 1.5vw, 1.3rem); }
@media (prefers-reduced-motion: no-preference) {
  .js .em-hero-night .pfw-scene__img { animation: em-dusk-in 2200ms var(--ease-out) both; }
}
@keyframes em-dusk-in { from { opacity: 0; transform: scale(1.06); filter: brightness(0.6); } }

/* ---------------------------------------------------------------- cards and surfaces */
.em-profile, .em-mismatch__card, .em-diagram__group, .pfw-asks, .em-picker,
.em-frees__tile, .em-next__swap, .em-signup, .em-costbars, .em-ropu__card {
  border-color: var(--line-n);
}
.pfw-pullline { border-color: var(--amber); }
.pfw-pullline p { font-family: var(--font-display); font-style: italic; font-weight: 400; color: var(--parchment); }
.pfw-ref { color: var(--muted-n); }

/* painted objects sit on the night ground: a warm pool of light behind each */
.em-cut, .em-diagram__pic, .em-profile__gpic { filter: var(--cut-drop); }

/* form fields */
input, select, textarea { color: var(--parchment); background: var(--night-3); border-color: var(--line-n); }
input::placeholder { color: var(--muted-n); }

/* ---------------------------------------------------------------- phones */
@media (max-width: 767px) {
  /* phones: the mobile painting leaves its top ~38% as empty sky, so the headline sits up there */
  .pfw-hero.em-hero-night { min-height: 100svh; padding: calc(var(--topbar-h) + 28px) 0 40px; align-items: flex-start; flex-direction: row; }
  .em-hero-night .pfw-scene { position: absolute; margin: 0; order: 0; }
  .em-hero-night .pfw-scene__img { aspect-ratio: auto; height: 100%; object-position: 50% 100%; }
  .em-hero-night::after {
    background: linear-gradient(180deg, rgba(16, 20, 42, 0.85) 0%, rgba(16, 20, 42, 0.55) 40%, rgba(16, 20, 42, 0) 62%),
                linear-gradient(0deg, var(--night) 0%, rgba(16, 20, 42, 0) 12%);
  }
  .em-hero-night .pfw-hero__ctas { flex-direction: row; }
  .em-hero-night .pfw-hero__ctas .pfw-btn { flex: 1 1 auto; }
  .em-interlude { min-height: 120vw; }
  .em-brand__credit { font-size: 9.5px; }
  .pfw-topbar__brand { font-size: 17px; }
}

/* fifth-gear cards sit on the deepest band: lift them a step */
.em-mismatch__card { background: var(--night-3); color: var(--text-n); box-shadow: var(--card-shadow); }
.em-mismatch__fig { font-family: var(--font-display); font-weight: 500; color: var(--glow); }
.em-mismatch__title { font-family: var(--font-display); font-weight: 500; color: var(--parchment); }
.pfw-asks { --a-line: var(--line-n); --a-hover: rgba(245, 234, 210, 0.04); --a-on-accent: var(--night); }
.pfw-band--ink .pfw-asks { --a-fg: #2b1c10; --a-on-accent: #fff7e6; --a-accent: #2b1c10; }
/* the "report" mock in the signup: a lamp-lit printed cover */
.em-signup__cover, .pfw-cta [class*="cover"] { font-family: var(--font-display); text-transform: none; }

/* ---------------------------------------------------------------- interlude: the kitchen at night, full bleed */
.em-interlude {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(520px, 92vh, 900px);
  display: flex; align-items: flex-end;
  padding: 0 0 clamp(48px, 8vh, 96px);
  background: var(--ink-deep);
}
.em-interlude picture { position: absolute; inset: 0; z-index: -2; }
.em-interlude__img { width: 100%; height: 100%; object-fit: cover; }
.em-interlude::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, var(--ink-deep) 0%, rgba(11, 14, 31, 0.78) 30%, rgba(11, 14, 31, 0) 65%),
              linear-gradient(180deg, var(--night-2) 0%, rgba(16, 20, 42, 0) 14%);
}
.em-interlude .pfw-h2 { font-size: clamp(2.6rem, 6vw, 5.2rem); max-width: 14ch; color: var(--parchment); }
.em-interlude .pfw-lede { color: #ebe4d4; max-width: 52ch; }
.em-interlude + .em-fifth { padding-top: clamp(24px, 4vw, 48px); }

/* the report mock: a lamp-lit printed cover, not the NZME green slab */
.pfw-pdfcard { background: var(--night-3); border: 1px solid var(--line-n); border-radius: 14px; color: var(--text-n); transform: rotate(1.5deg); }
.pfw-pdfcard__fake {
  border-radius: 6px; color: #2b1c10;
  background: radial-gradient(130% 90% at 30% 0%, #fdf0d4 0%, #f2d39c 70%, #e7bb73 100%);
}
.pfw-pdfcard__fake::before { opacity: 0.4; }
.pfw-pdfcard__fake b {
  font-family: var(--font-display); font-weight: 500; text-transform: none; letter-spacing: -0.02em;
  font-size: 2.1rem; line-height: 1; font-variation-settings: "SOFT" 100, "opsz" 144;
}

@media (max-width: 767px) {
  .pfw-rail { background: rgba(16, 20, 42, 0.94); border-top-color: var(--line-n); }
  @supports (backdrop-filter: blur(8px)) { .pfw-rail { background: rgba(16, 20, 42, 0.78); backdrop-filter: blur(14px); } }
  .pfw-rail__chip { color: var(--text-n); border: 1px solid var(--line-n); border-radius: 999px; }
  .pfw-rail__chip.is-here { background: var(--amber); color: #1a1206; border-color: var(--amber); }
}

.pfw-quote blockquote p {
  font-family: var(--font-display); font-style: italic; font-weight: 400; letter-spacing: -0.01em;
  color: var(--parchment); font-variation-settings: "SOFT" 100, "opsz" 72;
}
.pfw-quote { background: transparent; box-shadow: none; }