/* adri.apocresistance.com — the drop palette as the whole page.

   Loaded after styles.css, and it mostly just reassigns four custom properties:
   the page ground goes purple-black and the accent goes teal, so every component
   already defined — windows, buttons, .pledge, .crisis, .social, the status bar —
   comes out in the drop palette without a single one being redefined. The main
   site scopes that palette to `.neon`; here it IS the site. */

:root {
  --paper:     #120c22;   /* desktop, purple-black */
  --panel:     var(--night);
  --panel-2:   #1d1436;
  --chrome:    #241546;   /* button face, menu bar */
  --bevel-hi:  #4a2f7a;
  --bevel-lo:  #0b0718;
  --rule:      #070410;

  --ink-dim:   #cdc2ea;
  --ink-faint: #8f83b5;

  /* the accent: everything that was ember on the main site is teal here */
  --ember:     var(--teal);
  --ember-hot: var(--teal);
}

/* The mark glows ember on the main site; here it should agree with the page. */
@media (prefers-reduced-motion: no-preference) {
  .brand img { animation: none; }
}

.site-nav a {
  font-size: 0.68rem; color: var(--ink-dim);
  border-bottom: 1px solid transparent;
}
.site-nav a:hover { background: var(--teal); color: #06232a; }

/* ---------- one column, generous on a phone ---------- */

.adri { padding-bottom: clamp(1.5rem, 4vw, 3rem); }
.adri section { padding-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.adri .narrow { max-width: 44rem; }

.adri-hero { padding-top: clamp(1.25rem, 4vw, 2.25rem); }
/* The art leads. It is the thing her audience already recognises, so it earns
   the top of the page ahead of any words. */
.adri-hero .plate { margin-bottom: clamp(1.25rem, 3vw, 1.75rem); }
.adri-hero h1 { max-width: 20ch; }
.adri-hero .lede { max-width: 58ch; }

/* The pledge sits on its own here rather than inside a window, so it needs the
   border the window would have given it. */
.adri .pledge { margin-top: 0; border-color: #2a1a4d; }
.adri .crisis { margin-top: 0; }
.adri .soon-warn { margin: 0; }
.adri .soon-warn p { color: var(--ink-dim); }

.adri .socials { margin-bottom: 1.25rem; }
.adri .social { background: var(--chrome); }
.adri .social:hover { background: var(--teal); color: #06232a; }
.adri .social:hover .social-handle { color: #06232a; }

.adri .footnote { max-width: 62ch; }

.site-footer { margin-top: 0; }

/* One nav link, so it has no business wrapping onto its own row and making a
   sticky header two lines tall on the phones this page is actually read on. */
@media (max-width: 40rem) {
  .site-nav { width: auto; margin-left: auto; }
  .site-header .wrap { flex-wrap: nowrap; gap: 0.5rem; }
  .brand-unit { display: none; }
}