/* Copper & Signal -- the brand kit, as the last word on every page.
 *
 * Generated by rebrand.py. The palette itself lives in the page styles, which
 * were rewritten in place; this file holds only the rules that have to win
 * over everything else, so it is linked last.
 */
:root{
  --deep:#050f10; --card:#0b1a1b; --raise:#11282a; --line:#1e3b3d;
  --glow:#17575a; --signal:#3ed6d6;
  --copper:#d4874e; --copper-mid:#e4a26c; --copper-deep:#c27a45;
  --copper-light:#ffe3bf; --on-copper:#1a0f08;
  --ivory:#f3f1ec; --body:#d7dedb; --mist:#a9c2c0;
}
html{background:var(--deep);color-scheme:dark}

/* Links that were never given a colour fell back to the browser default,
   #0000ee, which is unreadable on this ground. Class-less only, so nothing
   the pages style deliberately is overridden. */
a:not([class]){color:var(--signal)}
a:not([class]):hover{color:var(--copper-light)}

/* Gap-filling defaults. :where() scores zero, so these lose to every real
   rule in the page styles -- including the 84 bare `h2{color:...}` rules that
   carry deliberate copper and signal headings. What they do catch is text
   with no colour of its own, which used to inherit a near-black that read
   fine on cream and is invisible on deep teal. */
:where(body){color:var(--body)}
:where(h1,h2,h3,h4,h5,h6){color:var(--ivory)}
:where(footer,footer *){color:var(--mist)}

/* The guide's button: a copper gradient carrying dark text.
   The solid background-color is not decoration: a gradient leaves the
   computed backgroundColor transparent, so anything reading the ground --
   the contrast audit, a forced-colours mode, a browser that drops the
   gradient -- sees straight through the button to the page behind it. */
.btn-copper,.nav-yt{
  background-color:var(--copper);
  background-image:linear-gradient(135deg,var(--copper-light),
                                   var(--copper-mid) 55%,var(--copper-deep));
  color:var(--on-copper);
}

/* Nothing here lists the copper buttons by name. An earlier version did, and
   it broke every outline variant on the site -- .pc-btn and .btn are each
   used both as a filled copper button and as a bordered one on the dark
   ground, so a blanket dark label turned the outline versions into 1.06:1.
   Which of the two a rule is can only be read from its own background, so
   that flip happens at source in fixups(), per rule block. */

/* Signal teal and the Buy Me a Coffee yellow are both bright grounds, so
   anything sitting on them takes the same dark label the copper buttons do.
   These two are named rather than detected because the ground is set on the
   parent and the label is a child, which the per-block flip cannot see.
   The `html body` prefix is not padding. The pages write these as
   `a.sh-btn.sh-b`, which outscores a bare `.sh-btn.sh-b` on the element
   selector alone, so the brand rule lost every time even with !important
   (two !importants fall back to specificity). The prefix buys two elements
   and settles it. */
html body :is(.o-tag,.popup-btn.bmc,.nav-yt,.sh-btn-gold,.ad-btn-main,.b-gold),
html body :is(.o-tag,.popup-btn.bmc,.nav-yt,.sh-btn-gold,.ad-btn-main,
              .b-gold) *{
  color:var(--on-copper)!important;
}

/* The film strip's folio number is 6px, so it is held to the small-text
   ratio and a faded gold leaves it as a smudge. Mist at full strength is
   the smallest legible thing the palette has. */
html body .film-folio{color:var(--mist)}
html body .nav-yt svg{fill:var(--on-copper)}

/* Nine pages -- 404, checkout, contact, disclaimer, privacy-policy, recover,
   refund-policy, terms, thankyou -- carry the five-column footer markup but
   none of its CSS, so the columns collapse into one centred run of words
   ("All Shows Apple Podcasts YouTube" on a single line). That predates the
   rebrand; it only became obvious once the footer stopped being a cream
   block nobody looked at. These are index.html's own rules, verbatim, so
   the pages that already have them are unaffected. Those nine are also
   exactly the pages a payment reviewer opens. */
.footer-top{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr 1fr;
  gap:2rem;padding-bottom:2.5rem;text-align:left;
  border-bottom:1px solid rgba(255,255,255,.07)}
.footer-logo{font-family:'Cormorant Garamond',serif;font-size:1.3rem;
  font-weight:600;color:var(--ivory);margin-bottom:.8rem}
.footer-logo span{color:var(--copper);font-style:italic}
.footer-tagline{font-size:.82rem;color:var(--mist);line-height:1.65;
  max-width:220px}
.footer-col h4{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mist);margin-bottom:1rem}
.footer-col a{display:block;font-size:.83rem;color:var(--mist);
  text-decoration:none;margin-bottom:.55rem;transition:color .2s}
.footer-col a:hover{color:var(--copper-light)}
.footer-bottom{padding-top:2rem;display:flex;align-items:center;
  justify-content:space-between;flex-wrap:wrap;gap:1rem;text-align:left}
.footer-bottom p{font-size:.71rem;color:var(--mist)}
@media(max-width:900px){.footer-top{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.footer-top{grid-template-columns:1fr}}

/* A 243px watermark word, drawn as an outline only. At .13 alpha it was a
   texture on cream and is nothing at all on teal. */
.ghost{-webkit-text-stroke:1px rgba(62,214,214,.10)}

/* The dropdown list. A <select>'s open menu is drawn by the operating
   system, so it was the one surface on the site the palette could not
   reach: white card, black rows, a blue highlight -- sitting over a deep
   teal page the moment anyone answers "What is this about?". `color-scheme:
   dark` does not reliably carry into that popup and no CSS replaces it.

   bselect.js suppresses the native menu and draws the list in the page
   instead; these rules are what it paints. If the script does not load, no
   element ever carries these classes, and the browser opens its own menu as
   before -- so a dropdown can never end up with no list at all. */
.bsel{position:fixed;z-index:9000;margin:0;padding:.3rem;list-style:none;
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 20px 48px rgba(0,0,0,.55);
  max-height:min(19rem,58vh);overflow-y:auto;overscroll-behavior:contain;
  font-family:'DM Sans',system-ui,sans-serif;font-size:.9rem;
  color:var(--body);scrollbar-color:var(--line) transparent}
.bsel li{padding:.52rem .7rem;border-radius:8px;line-height:1.35;cursor:pointer}
.bsel li.bsel-on{background:var(--raise);color:var(--ivory)}
/* Listed after .bsel-on on purpose: the two score the same, so the chosen
   row keeps its copper even while the keyboard is sitting on it. */
.bsel li[aria-selected="true"]{color:var(--copper-light)}
/* Doubled backslash: BRAND_CSS is an ordinary Python string, so a lone
   \2713 is read as the octal escape \271 followed by a 3 -- the tick came
   out of the first build as the literal text "¹3" on the chosen row. */
.bsel li[aria-selected="true"]::after{content:"\2713";float:right;
  color:var(--copper);font-size:.82em}
.bsel li.bsel-off{color:var(--mist);opacity:.5;cursor:default}
.bsel li.bsel-group{padding:.62rem .7rem .3rem;font-size:.68rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mist);
  cursor:default}
@media(prefers-reduced-motion:no-preference){
  .bsel{animation:bsel-in .14s ease-out}
  @keyframes bsel-in{from{opacity:0;transform:translateY(-4px)}}
}

/* An unanswered question and an answered one should not read identically.
   The placeholder row is the field's prompt, not the customer's answer. */
select.bsel-empty{color:var(--mist)}
select.bsel-open{border-color:var(--copper)}