/* ============================================================================
   Drummer Records, shared system for the six utility pages
   safety-tour-signup / directory / thanks / privacy / form / openers

   Loads AFTER tokens.css and site.css and does three things:
     1. installs the real self hosted webfaces
     2. remaps the older token names onto the locked palette and type, so every
        component already written against those names re-skins without being
        rewritten. This is deliberate: form.html and openers.html carry live
        multi step form engines and their markup is not worth churning.
     3. supplies the shared chrome (.lb bars, restyled header, nav and footer,
        grain and vignette) so these pages match the rest of the site.

   The 1080px ink column already comes from site.css --col. Do not set widths here.
   ========================================================================== */

@font-face{font-family:'Instrument Sans';src:url(/assets/fonts/instrument400.woff2) format('woff2');font-weight:400;font-display:block}
@font-face{font-family:'Instrument Sans';src:url(/assets/fonts/instrument500.woff2) format('woff2');font-weight:500;font-display:block}
@font-face{font-family:'Instrument Sans';src:url(/assets/fonts/instrument600.woff2) format('woff2');font-weight:600;font-display:block}
@font-face{font-family:'Libre Caslon Text';src:url(/assets/fonts/caslonital.woff2) format('woff2');font-weight:400;font-style:italic;font-display:block}
@font-face{font-family:'Roboto Mono';src:url(/assets/fonts/robotomono300.woff2) format('woff2');font-weight:300;font-display:block}
@font-face{font-family:'Teletactile DR';src:url(/assets/Teletactile-DR-v1.woff2) format('woff2');font-weight:400;font-display:block}

:root{
  /* locked palette, same values the redesigned pages carry */
  --ink:#000000; --deep:#0A0D12; --panel:#111620;
  --haze:#97A3B4; --paper:#E4E8F2; --glow:#5C90DC;
  --hair:rgba(92,144,220,.18); --hair-soft:rgba(92,144,220,.09);

  /* Namespaced duplicates for the fixed chrome ONLY. privacy.html reassigns
     --ink as a TEXT colour in its own :root, which inverted the label bars.
     Chrome never reads the shared names for that reason. */
  --dr-ink:#000000; --dr-paper:#E4E8F2; --dr-haze:#97A3B4; --dr-glow:#5C90DC;
  --dr-hair-soft:rgba(92,144,220,.09); --dr-hair:rgba(92,144,220,.18);
  --bar:52px;
  --f-display:'Teletactile DR','Instrument Sans',monospace;
  --f-card:'Teletactile DR',monospace;
  --f-lead:'Libre Caslon Text',Georgia,serif;
  --f-body:'Instrument Sans',system-ui,sans-serif;
  --f-label:'Roboto Mono',monospace;
  --s:clamp(18px,4vw,30px);

  /* bridge: older names remapped onto the locked system */
  --deep-2:#0A0D12; --charcoal:#111620; --charcoal-2:#111620;
  --cream:#E4E8F2; --warm-white:#F2F5FB;
  --muted:#97A3B4; --muted-dim:#6B7688;
  --accent:#5C90DC; --accent-soft:#7FA8E6;
  --border:rgba(92,144,220,.18);
  --border-strong:rgba(92,144,220,.34);
  --border-faint:rgba(92,144,220,.09);
  --accent-rgb:92,144,220; --lav-rgb:127,168,230;
  --font-display:'Libre Caslon Text',Georgia,serif;
  --font-serif:'Libre Caslon Text',Georgia,serif;
  --font-ui:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'Roboto Mono',ui-monospace,monospace;
  --font-mono-2:'Roboto Mono',ui-monospace,monospace;
}

html{background:var(--deep)}
body{background:var(--deep);color:var(--cream);font-family:var(--font-ui);
  /* clear the fixed top bar and nav, and the fixed bottom bar */
  padding-top:calc(var(--bar) + 48px);padding-bottom:var(--bar)}

/* ---- atmosphere, matches the redesigned pages ---------------------------- */
.grain{position:fixed;inset:0;z-index:90;pointer-events:none;background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMjAiIGhlaWdodD0iMjIwIj48ZmlsdGVyIGlkPSJuIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMC44NSIgbnVtT2N0YXZlcz0iNCIgc3RpdGNoVGlsZXM9InN0aXRjaCIvPjxmZUNvbG9yTWF0cml4IHR5cGU9InNhdHVyYXRlIiB2YWx1ZXM9IjAiLz48L2ZpbHRlcj48cmVjdCB3aWR0aD0iMjIwIiBoZWlnaHQ9IjIyMCIgZmlsdGVyPSJ1cmwoI24pIiBvcGFjaXR5PSIwLjU1Ii8+PC9zdmc+");
  background-size:220px 220px;opacity:.05;mix-blend-mode:soft-light}
.vig{position:fixed;inset:0;z-index:89;pointer-events:none;
  background:radial-gradient(120% 85% at 50% 42%,transparent 38%,rgba(0,0,0,.5) 88%,rgba(0,0,0,.75) 100%)}

/* ---- fixed label bars ---------------------------------------------------- */
.lb{position:fixed;left:0;right:0;height:var(--bar);background:var(--dr-ink);z-index:95;
  display:flex;align-items:center;justify-content:space-between;padding:0 var(--s);
  font-family:var(--f-card);font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--dr-glow)}
.lb--t{top:0;border-bottom:1px solid var(--dr-hair-soft)}
.lb--b{bottom:0;border-top:1px solid var(--dr-hair-soft)}
.lb__logo{height:24px;width:auto;display:block}
.lb__tour{height:34px;width:auto;display:block}
.lb__lock{font-family:var(--f-label);font-weight:300;font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dr-haze)}
.lb__r{color:var(--dr-haze)}
@media(max-width:640px){.lb{font-size:8px;padding:0 14px}.lb__lock{display:none}
  .lb__logo{height:20px}.lb__tour{height:26px}}

/* ---- nav: the single fixed row every page in the system uses ------------
   Pages here previously carried a .site-header with a SECOND Drummer lockup
   stacked under the .lb bar, which no other page does. That header is gone;
   these rules style the bare nav so it matches faq/services/safety-tour. */
body .nav{position:fixed;top:var(--bar);left:0;right:0;z-index:94;display:flex;flex-wrap:wrap;
  gap:0 24px;align-items:center;padding:11px var(--s);background:rgba(0,0,0,.82);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--dr-hair-soft)}
body .nav a{font-family:var(--f-label);font-weight:300;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dr-haze);padding-block:0}
body .nav a:hover,body .nav a[aria-current="page"]{color:var(--dr-paper)}
body .nav a::after{display:none}
@media(max-width:880px){
  body .nav{position:fixed;inset:var(--bar) 0 auto 0;flex-direction:row;flex-wrap:wrap;
    align-items:center;gap:2px 0;padding:4px 10px;justify-content:flex-start;
    background:rgba(0,0,0,.82);transform:none;opacity:1;pointer-events:auto;
    transition:none;border-bottom:1px solid var(--dr-hair-soft)}
  body .nav a{flex:0 0 25%;text-align:center;padding:9px 10px;border-bottom:0;
    font-size:9.5px;letter-spacing:.06em}
  body .nav a[aria-current="page"]{color:var(--dr-paper);text-decoration:underline;text-underline-offset:4px}
}
body body .nav-toggle{display:none!important}

/* ---- footer, restyled onto the system ----------------------------------- */
.colophon{border-top:1px solid var(--dr-hair-soft);background:var(--dr-ink);margin-top:0}
.colophon__cta{font-family:var(--f-lead);font-style:italic;color:var(--dr-paper);
  font-size:clamp(2rem,4.4vw,3.2rem);line-height:1.06;letter-spacing:-.01em}
.colophon__cta em{font-style:italic;color:var(--dr-glow)}
.colophon h4{font-family:var(--f-label);font-weight:300;font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dr-glow)}
.colophon a{color:var(--cream)}
.colophon a:hover{color:var(--dr-glow)}
.colophon__note{color:var(--muted-dim)}

/* ---- shared components -------------------------------------------------- */
.slabel{font-family:var(--f-label);font-weight:300;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--glow);margin:0 0 calc(var(--s)*1.5);
  padding-bottom:14px;border-bottom:1px solid var(--hair-soft)}
.cut{background:var(--dr-ink);padding:calc(var(--s)*1.5) var(--s);text-align:center;
  border-top:1px solid var(--dr-hair-soft);border-bottom:1px solid var(--dr-hair-soft)}
.cut__n{font-family:var(--f-card);font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--glow)}

/* eyebrow + display + lede, so existing page markup adopts the system type */
.eyebrow-dot,.eyebrow{font-family:var(--f-label);font-weight:300;font-size:9.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--glow)}
.display{font-family:var(--f-display);letter-spacing:.02em;color:var(--paper);line-height:1.08}
.lede{font-family:var(--f-lead);font-style:italic;color:var(--haze)}

/* buttons: one solid per view, ghosts after it (brand system v2 rule) */
.btn,.cta{font-family:var(--f-body);font-size:10.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;padding:14px 24px;border:1px solid var(--hair);color:var(--paper);
  display:inline-flex;align-items:center;justify-content:center;border-radius:0;background:none}
.btn:hover,.cta:hover{border-color:var(--border-strong);color:var(--paper)}
.btn-primary,.cta--solid{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn-primary:hover,.cta--solid:hover{background:var(--warm-white);color:var(--ink)}

/* form controls, unified across directory, signup, casting and openers */
input[type=text],input[type=email],input[type=tel],input[type=url],input[type=date],
input[type=number],select,textarea{
  font-family:var(--f-body);background:rgba(255,255,255,.03);color:var(--paper);
  border:1px solid var(--hair);border-radius:0;padding:12px 14px;font-size:14px;width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--glow);
  box-shadow:0 0 0 1px rgba(92,144,220,.35)}
input::placeholder,textarea::placeholder{color:var(--muted-dim)}
label,.field__label{font-family:var(--f-label);font-weight:300;font-size:9.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--haze)}

.reveal{opacity:0;transform:translateY(22px);
  transition:opacity 1.1s cubic-bezier(.2,.7,.2,1),transform 1.1s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

@media(max-width:760px){
  body{padding-top:calc(var(--bar) + 86px)}
  .site-header .nav{gap:2px 0}
  .site-header .nav a{font-size:9.5px;letter-spacing:.06em;padding:9px 10px}
}

/* ---- privacy.html ---------------------------------------------------------
   Frank: full redesign chrome, but the narrower reading column stays for
   legibility. Its own :root reassigns --ink and --gold, so these override the
   page's serif/gold treatment onto the locked system without touching its
   760px measure. */
body:has(.wrap h1) .eff,
.eff{font-family:var(--f-label);font-weight:300;font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dr-glow)}
.wrap > h1{font-family:var(--f-display);color:var(--dr-paper);letter-spacing:.02em;
  font-weight:400;font-size:clamp(28px,4vw,42px)}
.wrap h2{font-family:var(--f-label);font-weight:300;color:var(--dr-glow);
  border-top-color:var(--dr-hair-soft)}

/* ---- .foot, the compact colophon used by brand-assets and the EPKs -------- */
.foot{background:var(--dr-ink);padding:clamp(40px,5vw,60px) var(--s) calc(var(--bar) + 40px);
  border-top:1px solid var(--dr-hair-soft);text-align:center}
.foot__m{font-family:var(--f-card);font-size:8.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--dr-haze)}