/* ==========================================================================
   Transmissions Niagara
   Aesthetic: riso-printed zine. Paper ground, warm black ink, three flat
   spot colours lifted straight from the logo. Hard-edged offset shadows,
   halftone dots, paper grain. Motion is deliberately restrained — "this is
   a low-stimulus zone" is one of the group's own agreements.
   ========================================================================== */

:root{
  color-scheme: light;

  /* --- spot colours, sampled from the logo --- */
  --ink:      #211D12;   /* warm near-black */
  --cyan:     #00D8FB;
  --acid:     #EBFF3E;
  --magenta:  #E225FD;

  /* --- paper --- */
  --paper:    #FAF6EC;
  --paper-2:  #F2ECDC;
  --paper-3:  #E8E0CC;

  --ink-70:  rgba(33,29,18,.70);
  --ink-45:  rgba(33,29,18,.45);
  --ink-14:  rgba(33,29,18,.14);

  /* --- type --- */
  --display: "Darker Grotesque", "Haettenschweiler", Impact, sans-serif;
  --body:    "Newsreader", Georgia, "Times New Roman", serif;
  --mono:    "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* --- measure --- */
  --wrap: 1180px;
  --gut:  clamp(20px, 5vw, 56px);

  --edge: 3px;                       /* ink line weight */

  /* Hard offset shadows, never blurred — the riso "misprint" depth.
     Offsets are tokens so the whole system retunes from one place;
     pair one with a colour: box-shadow: var(--off) var(--cyan); */
  --off:    6px 6px 0;
  --off-sm: 5px 5px 0;
  --off-lg: 8px 8px 0;
  --pop:    var(--off) var(--ink);
}

*,*::before,*::after{ box-sizing:border-box; }

/* author display rules (e.g. .btn) otherwise beat the UA's [hidden] rule */
[hidden]{ display:none!important; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background-color: var(--paper);
  /* halftone dot field — the riso tell */
  background-image: radial-gradient(var(--ink-14) .9px, transparent 1px);
  background-size: 7px 7px;
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(16.5px, .55vw + 15px, 19px);
  line-height: 1.62;
  font-optical-sizing: auto;
  overflow-x: hidden;
}

/* paper grain, sits above everything, ignores the pointer */
.grain{
  position:fixed; inset:-50%;
  pointer-events:none; z-index:9999;
  opacity:.28; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:10000;
  background:var(--ink); color:var(--acid);
  padding:.7em 1.2em; font-family:var(--mono); font-size:.8rem;
}
.skip:focus{ left:0; }

:focus-visible{
  outline:3px solid var(--magenta);
  outline-offset:3px;
  border-radius:2px;
}

img{ max-width:100%; height:auto; display:block; }


/* ---------- shared type ---------- */

/* One underline treatment for every inline link in prose. Each context below
   then sets only its own colour and text-decoration-color. */
.note a, .meet__foot a, .credit a, .check a,
.rcard__lines a, .rcard__link, .foot__crisis a, .emerg__big a{}

.chan{
  font-family:var(--mono);
  font-size:.74rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-70);
  display:flex; align-items:center; gap:.6em;
  margin:0 0 1.1rem;
}
.chan--on-ink{ color:rgba(250,246,236,.72); }

.chan__dot{
  width:9px; height:9px; flex:none;
  border-radius:50%; background:var(--magenta);
  box-shadow:0 0 0 3px rgba(226,37,253,.22);
}
.chan--on-ink .chan__dot{ background:var(--acid); box-shadow:0 0 0 3px rgba(235,255,62,.2); }

.sec__h{
  font-family:var(--display);
  font-weight:900;
  font-size:clamp(2.9rem, 7.5vw, 5.2rem);
  line-height:.87;
  letter-spacing:-.02em;
  margin:0 0 1.6rem;
  text-wrap:balance;
}
.sec__h--on-ink{ color:var(--paper); }

.sec__intro{
  font-size:1.12em;
  max-width:36ch;
  margin:0 0 3rem;
  color:var(--ink-70);
}
.sec__intro em{ color:var(--ink); font-style:italic; }

.sec{ padding-block: clamp(4.5rem, 11vw, 8.5rem); position:relative; }

.sec--ink{
  background:var(--ink);
  color:var(--paper);
  background-image: radial-gradient(rgba(250,246,236,.10) .9px, transparent 1px);
  background-size:7px 7px;
}
.sec--tint{
  background:var(--paper-2);
  background-image: radial-gradient(var(--ink-14) .9px, transparent 1px);
  background-size:7px 7px;
  border-block:var(--edge) solid var(--ink);
}


/* ---------- buttons ---------- */

.btn{
  display:inline-block;
  font-family:var(--display);
  font-weight:800;
  font-size:1.22rem;
  letter-spacing:.005em;
  padding:.62em 1.35em .58em;
  border:var(--edge) solid var(--ink);
  text-decoration:none;
  color:var(--ink);
  background:var(--paper);
  box-shadow:var(--pop);
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn--primary{ background:var(--acid); }
.btn--ghost{ background:transparent; }

.btn:hover{ transform:translate(3px,3px); box-shadow:3px 3px 0 var(--ink); }
.btn:active{ transform:translate(6px,6px); box-shadow:0 0 0 var(--ink); }

.sec--ink .btn{ border-color:var(--ink); box-shadow:var(--off) var(--cyan); }
.sec--ink .btn:hover{ box-shadow:3px 3px 0 var(--cyan); }
.sec--ink .btn:active{ box-shadow:0 0 0 var(--cyan); }

@media (prefers-reduced-motion: reduce){
  .btn{ transition:none; }
}


/* ==========================================================================
   MASTHEAD
   ========================================================================== */

.masthead{
  position:sticky; top:0; z-index:100;
  background:var(--paper);
  border-bottom:var(--edge) solid var(--ink);
}
.masthead__in{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap;                 /* lets the nav drop below at 200% text */
  gap:.75rem 1.5rem;
  min-height:76px;
  padding-block:.6rem;
}

.brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; color:inherit; }
.brand__mark{ width:38px; height:auto; transform:rotate(-8deg); }
.brand__text{ display:flex; flex-direction:column; line-height:.82; }
.brand__name{
  font-family:var(--display); font-weight:900;
  font-size:1.55rem; letter-spacing:-.015em; text-transform:uppercase;
}
.brand__place{
  font-family:var(--mono); font-size:.62rem; font-weight:500;
  letter-spacing:.3em; text-transform:uppercase; color:var(--ink-70);
  padding-left:.12em;
}

.nav{ display:flex; align-items:center; flex-wrap:wrap; gap:.6rem clamp(.9rem,2.2vw,1.9rem); }
.nav a{
  font-family:var(--mono); font-size:.78rem; font-weight:500;
  letter-spacing:.05em;
  color:var(--ink); text-decoration:none;
  padding-bottom:2px; border-bottom:2px solid transparent;
}
.nav a:hover{ border-bottom-color:var(--magenta); }

.nav__cta{
  background:var(--cyan);
  border:2px solid var(--ink)!important;
  padding:.45em .95em!important;
  box-shadow:3px 3px 0 var(--ink);
}
.nav__cta:hover{ background:var(--acid); }

@media (max-width: 45em){
  .nav a:not(.nav__cta){ display:none; }
}

/* very narrow phones — masthead must not push the page sideways */
@media (max-width: 25em){
  .masthead__in{ gap:.75rem; min-height:66px; }
  .brand{ gap:.5rem; min-width:0; }
  .brand__mark{ width:30px; }
  .brand__name{ font-size:1.18rem; }
  .brand__place{ font-size:.55rem; letter-spacing:.22em; }
  .nav__cta{ font-size:.72rem; padding:.42em .7em!important; }
}


/* ==========================================================================
   HERO
   ========================================================================== */

.hero{ position:relative; }

.hero__in{
  display:grid;
  grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(2rem,5vw,4.5rem);
  align-items:center;
  padding-block: clamp(3.5rem, 8vw, 7rem) clamp(4rem, 9vw, 7.5rem);
}

.hero__h{
  font-family:var(--display);
  font-weight:900;
  font-size:clamp(3.4rem, 8vw, 5.5rem);
  line-height:.86;
  letter-spacing:-.028em;
  margin:0 0 1.9rem;
}
.hero__h-line{ display:block; }

/* riso misregistration — the one flourish */
.hero__h-line--hi{
  color:var(--ink);
  text-shadow:
     .045em .04em 0 var(--cyan),
    -.035em -.03em 0 var(--magenta);
}

.lede{
  font-size:1.22em;
  line-height:1.5;
  max-width:40ch;
  margin:0 0 1.15rem;
}
.lede strong{
  font-weight:600;
  background:linear-gradient(transparent 62%, var(--acid) 62%, var(--acid) 96%, transparent 96%);
}

.sub{
  max-width:42ch;
  color:var(--ink-70);
  margin:0 0 2.4rem;
}

.hero__actions{ display:flex; flex-wrap:wrap; gap:1rem 1.15rem; }

/* art side */
.hero__art{ position:relative; display:grid; place-items:center; }
.hero__logo{
  width:min(100%, 460px);
  transform:rotate(4deg);
  filter:drop-shadow(10px 10px 0 rgba(33,29,18,.13));
  position:relative; z-index:2;
}
.halo{
  position:absolute; z-index:1;
  width:min(96%, 440px); aspect-ratio:1;
  border-radius:50%;
  background:
    repeating-conic-gradient(from 0deg,
      var(--cyan) 0deg 9deg, transparent 9deg 18deg);
  opacity:.5;
  mask-image:radial-gradient(circle, transparent 46%, #000 52%, #000 70%, transparent 76%);
  -webkit-mask-image:radial-gradient(circle, transparent 46%, #000 52%, #000 70%, transparent 76%);
}

@media (max-width: 55em){
  .hero__in{ grid-template-columns:1fr; }
  .hero__art{ order:-1; margin-bottom:.5rem; }
  .hero__logo{ width:min(72%, 300px); }
  .halo{ width:min(80%, 300px); }
}


/* ---------- safety strip ---------- */

.strip{
  background:var(--ink);
  border-block:var(--edge) solid var(--ink);
  color:var(--paper);
}
.strip__in{
  display:flex; flex-wrap:wrap; align-items:center; gap:.85rem 1.35rem;
  padding-block:1.15rem;
}
.strip__tag{
  font-family:var(--mono); font-size:.68rem; font-weight:500;
  letter-spacing:.17em; text-transform:uppercase;
  background:var(--acid); color:var(--ink);
  padding:.42em .8em; flex:none;
}
.strip p{ margin:0; font-size:.98em; line-height:1.45; max-width:62ch; }
.strip strong{ color:var(--acid); font-weight:600; }


/* ==========================================================================
   WHEN & WHERE
   ========================================================================== */

.meet{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(15rem,1fr));
  gap:clamp(1.1rem,2.4vw,1.7rem);
}

.meet__card{
  background:var(--paper);
  border:var(--edge) solid var(--ink);
  box-shadow:var(--pop);
  padding:clamp(1.35rem,2.8vw,1.9rem);
  display:flex; flex-direction:column;
}
.meet__card:nth-child(2){ box-shadow:var(--off) var(--cyan); }
.meet__card:nth-child(3){ box-shadow:var(--off) var(--magenta); }

.meet__label{
  font-family:var(--mono); font-size:.68rem; font-weight:500;
  letter-spacing:.17em; text-transform:uppercase;
  color:var(--ink-70);
  margin:0 0 .9rem;
  padding-bottom:.7rem;
  border-bottom:2px solid var(--ink-14);
}
.meet__big{
  font-family:var(--display); font-weight:900;
  font-size:clamp(1.9rem,4vw,2.5rem);
  line-height:.98; letter-spacing:-.018em;
  margin:0 0 .55rem;
  text-wrap:balance;
}
.meet__ampm{ font-size:.5em; margin-left:.22em; }
.meet__sub{
  margin:0;
  font-size:.96em; line-height:1.4;
  color:var(--ink-70);
}

.dates{ list-style:none; margin:0; padding:0; }
.dates li{ border-bottom:2px solid var(--ink-14); }
.dates li:last-child{ border-bottom:0; }
.dates time{
  display:flex; align-items:baseline; gap:.6rem;
  padding:.5rem 0;
}
.dates__dow{
  font-family:var(--mono); font-size:.68rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-70);
  min-width:2.6em;
}
.dates__d{
  font-family:var(--display); font-weight:800;
  font-size:1.5rem; line-height:1; letter-spacing:-.01em;
}

.meet__foot{
  margin:clamp(1.6rem,3.2vw,2.4rem) 0 0;
  padding:1.1rem 1.35rem;
  background:var(--ink);
  color:rgba(250,246,236,.82);
  border:var(--edge) solid var(--ink);
  box-shadow:var(--off) var(--acid);
  font-size:.98em; line-height:1.5;
  max-width:70ch;
}
.meet__foot strong{ color:var(--acid); font-weight:600; }
.meet__foot a{ color:var(--paper); text-underline-offset:3px; }
.meet__foot a:hover{ color:var(--acid); }

/* links inside the crisis note */
.note a{
  color:var(--ink); font-weight:500;
  text-decoration-color:var(--magenta);
}
.note a:hover{ background:var(--acid); }
.note strong{ font-weight:600; }


/* ==========================================================================
   IS / ISN'T
   ========================================================================== */

.isnt{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(17.5rem,1fr));
  gap:clamp(1.4rem, 3vw, 2.4rem);
}

.isnt__col{
  border:var(--edge) solid var(--ink);
  background:var(--paper);
  box-shadow:var(--pop);
  padding:clamp(1.5rem,3vw,2.2rem);
}
.isnt__col--is   { background:var(--paper); }
.isnt__col--isnt { background:var(--paper-2); }

.isnt__h{
  font-family:var(--display); font-weight:800;
  font-size:1.85rem; line-height:1;
  margin:0 0 1.25rem;
  display:flex; align-items:center; gap:.55rem;
}
.isnt__sig{
  display:grid; place-items:center;
  width:1.5em; height:1.5em; flex:none;
  font-size:.66em; font-family:var(--mono);
  border:2px solid var(--ink);
  background:var(--cyan);
}
.isnt__col--isnt .isnt__sig{ background:var(--magenta); color:var(--paper); }

.ticks{ list-style:none; margin:0; padding:0; }
.ticks li{
  position:relative;
  padding-left:1.5em;
  margin-bottom:.72em;
  line-height:1.45;
}
.ticks li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:.62em; height:.62em;
  background:var(--cyan);
  border:2px solid var(--ink);
}
.ticks--neg li::before{ background:var(--paper-3); }

.note{
  margin:clamp(2rem,4vw,3rem) 0 0;
  padding:1.25rem 1.5rem;
  border:var(--edge) solid var(--ink);
  border-left-width:12px;
  border-left-color:var(--magenta);
  background:var(--paper);
  box-shadow:var(--off-sm) var(--ink);
  font-size:1em;
  line-height:1.5;
  color:var(--ink);
  max-width:62ch;
}
.note b{
  display:block;
  font-family:var(--mono); font-weight:500;
  font-size:.72rem; letter-spacing:.17em; text-transform:uppercase;
  color:var(--ink);            /* magenta fails AA at this size; the border carries it */
  margin-bottom:.45rem;
}


/* ==========================================================================
   VALUES
   ========================================================================== */

/* Five items never divide evenly into a responsive grid — 4 columns leaves a
   dead cell. A wrapping flex row lets the orphan stretch instead, and the rem
   basis means the layout responds to the reader's text size, not just viewport. */
.vals{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap;
  gap:clamp(.9rem,1.8vw,1.3rem);
}
.val{
  flex:1 1 11rem;
  border:var(--edge) solid var(--paper);
  padding:clamp(1.4rem,2.8vw,2rem);
}

.val__n{
  font-family:var(--mono); font-size:.72rem; font-weight:500;
  letter-spacing:.15em;
  color:var(--acid);
  display:block; margin-bottom:.9rem;
}
.val__h{
  font-family:var(--display); font-weight:800;
  font-size:1.7rem; line-height:1;
  margin:0 0 .6rem;
  color:var(--paper);
  text-wrap:balance;
}
.val p{
  margin:0;
  font-size:.94em; line-height:1.5;
  color:rgba(250,246,236,.74);
}


/* ==========================================================================
   AGREEMENTS
   ========================================================================== */

.agree{
  list-style:none; margin:0; padding:0;
  counter-reset:ag;
  display:grid; gap:clamp(1.6rem,3vw,2.3rem);
  max-width:820px;
}
/* a little zine drift, wide screens only */
@media (min-width:62.5em){
  .ag:nth-child(even){ transform:translateX(clamp(0px,3vw,46px)); }
}

.ag{
  counter-increment:ag;
  position:relative;
  padding:clamp(1.4rem,3vw,2rem) clamp(1.3rem,3vw,2rem) clamp(1.4rem,3vw,2rem)
          clamp(3.6rem,7vw,5.2rem);
  border:var(--edge) solid var(--ink);
  background:var(--paper);
  box-shadow:var(--pop);
}
.ag::before{
  content:counter(ag,decimal-leading-zero);
  position:absolute;
  left:clamp(1rem,2.4vw,1.5rem);
  top:clamp(1.35rem,3vw,1.95rem);
  font-family:var(--mono); font-weight:500;
  font-size:.82rem; letter-spacing:.06em;
  color:var(--ink);
  background:var(--acid);
  border:2px solid var(--ink);
  padding:.2em .42em;
}

.ag__h{
  font-family:var(--display); font-weight:800;
  font-size:clamp(1.55rem,3.2vw,2.05rem);
  line-height:1.02;
  margin:0 0 .8rem;
  text-wrap:balance;
}
.ag > p{ margin:0 0 .85rem; color:var(--ink-70); }
.ag ul{ margin:0; padding-left:1.15em; }
.ag li{ margin-bottom:.55em; line-height:1.5; }
.ag li:last-child{ margin-bottom:0; }
.ag li::marker{ color:var(--magenta); }
.ag em{ font-style:italic; }

/* every third card gets a colour, so the run doesn't flatten out */
.ag:nth-child(3n+1){ box-shadow:var(--off) var(--cyan); }
.ag:nth-child(3n+2){ box-shadow:var(--off) var(--magenta); }
.ag:nth-child(3n+3){ box-shadow:var(--off) var(--ink); }

.zero{
  margin-top:clamp(2.5rem,5vw,3.75rem);
  padding:clamp(1.5rem,3vw,2.2rem);
  background:var(--ink);
  color:var(--paper);
  border:var(--edge) solid var(--ink);
  box-shadow:var(--off) var(--magenta);
}
.zero__h{
  font-family:var(--display); font-weight:900;
  font-size:clamp(1.7rem,3.6vw,2.3rem); line-height:1;
  margin:0 0 .6rem; color:var(--acid);
}
.zero p{ margin:0 0 .9rem; color:rgba(250,246,236,.8); font-size:.98em; }
.zero ul{ margin:0; padding-left:1.15em; }
.zero li{ margin-bottom:.4em; }
.zero li::marker{ color:var(--magenta); }


/* ==========================================================================
   PRACTICAL
   ========================================================================== */

.prac{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(15.5rem,1fr));
  gap:clamp(1.1rem,2.4vw,1.7rem);
}
.prac__card{
  background:var(--paper);
  border:var(--edge) solid var(--ink);
  padding:clamp(1.25rem,2.6vw,1.6rem);
  box-shadow:var(--off-sm) var(--ink);
}
.prac__card h3{
  font-family:var(--display); font-weight:800;
  font-size:1.42rem; line-height:1.05;
  margin:0 0 .5rem;
}
.prac__card p{ margin:0; font-size:.95em; line-height:1.5; color:var(--ink-70); }

.prac__card:nth-child(2n){ box-shadow:var(--off-sm) var(--cyan); }
.prac__card:nth-child(3n){ box-shadow:var(--off-sm) var(--acid); }


/* ==========================================================================
   REGISTER
   ========================================================================== */

.reg{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(1.8rem,4vw,3.5rem);
  align-items:start;
}
@media (max-width:53.75em){ .reg{ grid-template-columns:1fr; } }

.reg__lede{
  font-size:1.12em; line-height:1.5;
  margin:0 0 1.4rem;
  color:var(--paper);
}
.reg__list{ list-style:none; margin:0; padding:0; }
.reg__list li{
  position:relative; padding-left:1.5em; margin-bottom:.85em;
  font-size:.97em; line-height:1.5;
  color:rgba(250,246,236,.78);
}
.reg__list li::before{
  content:""; position:absolute; left:0; top:.6em;
  width:.6em; height:.6em; background:var(--acid);
}
.reg__list strong{ color:var(--paper); font-weight:600; }

/* ==========================================================================
   REGISTRATION FORM
   ========================================================================== */

.rform{
  position:relative;
  background:var(--paper);
  color:var(--ink);
  border:var(--edge) solid var(--ink);
  box-shadow:var(--off-lg) var(--cyan);
  padding:clamp(1.6rem,3.5vw,2.4rem);
}

.hp{
  position:absolute!important; left:-9999px!important;
  width:1px; height:1px; opacity:0; pointer-events:none;
}

.rform__tag{
  position:absolute; top:-1px; left:-1px;
  font-family:var(--mono); font-size:.66rem; font-weight:500;
  letter-spacing:.17em; text-transform:uppercase;
  background:var(--ink); color:var(--acid);
  padding:.42em .85em;
}

.rform__intro{
  margin:2.2rem 0 1.9rem;
  font-size:.99em; line-height:1.5;
  color:var(--ink-70);
  max-width:46ch;
}

.field{ margin-bottom:1.55rem; }
.field--set{ border:0; padding:0; margin-inline:0; }

.field label,
.field legend{
  display:block;
  font-family:var(--display); font-weight:800;
  font-size:1.28rem; line-height:1.1;
  margin-bottom:.2rem;
  padding:0;
}

.req{
  font-family:var(--mono); font-weight:500;
  font-size:.58rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink);
  background:var(--acid);
  border:2px solid var(--ink);
  padding:.18em .42em;
  vertical-align:.18em;
  margin-left:.35em;
  white-space:nowrap;
}

.hint{
  margin:0 0 .6rem;
  font-size:.86em; line-height:1.45;
  color:var(--ink-70);
  max-width:48ch;
}

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field textarea{
  width:100%;
  font-family:var(--body);
  font-size:1.02em;
  line-height:1.4;
  color:var(--ink);
  background:var(--paper-2);
  border:var(--edge) solid var(--ink);
  padding:.72em .85em;
  border-radius:0;
  -webkit-appearance:none; appearance:none;
}
.field textarea{ resize:vertical; min-height:6em; }

.field input:focus-visible,
.field textarea:focus-visible{
  outline:3px solid var(--magenta);
  outline-offset:2px;
  background:var(--paper);
}
.field input:user-invalid,
.field textarea:user-invalid{
  border-color:var(--magenta);
  box-shadow:inset 0 0 0 2px rgba(226,37,253,.18);
}

/* radio list */
.opts{ display:grid; gap:.6rem; }
.opt{
  display:flex!important; align-items:center; gap:.75rem;
  font-family:var(--body)!important; font-weight:400!important;
  font-size:1em!important;
  margin:0!important;
  padding:.8em .95em;
  border:var(--edge) solid var(--ink);
  background:var(--paper-2);
  cursor:pointer;
}
.opt:hover{ background:var(--acid); }
.opt input{ flex:none; width:1.15em; height:1.15em; accent-color:var(--ink); margin:0; }
.opt:has(input:checked){ background:var(--acid); box-shadow:4px 4px 0 var(--ink); }
.opt:has(input:focus-visible){ outline:3px solid var(--magenta); outline-offset:2px; }
.opt__txt{ line-height:1.3; }
/* Meetings outside the registration window stay visible but unselectable,
   so the whole schedule is still readable. Kept legible rather than greyed
   into illegibility — the reason text is the useful part. */
.opt--off{
  cursor:not-allowed;
  background:transparent;
  border-style:dashed;
  border-color:var(--ink-45);
  flex-wrap:wrap;
}
.opt--off:hover{ background:transparent; }
.opt--off .opt__txt{ color:var(--ink-70); }
.opt--past .opt__txt{ text-decoration:line-through; text-decoration-thickness:1px; }
.opt--off input{ cursor:not-allowed; }

.opt__note{
  flex-basis:100%;
  margin-left:1.9em;
  font-family:var(--mono); font-size:.66rem; font-weight:500;
  letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-70);
}

.opts__notice{
  margin:.9rem 0 0;
  padding:.95rem 1.15rem;
  background:var(--paper-2);
  border:var(--edge) solid var(--ink);
  border-left-width:12px;
  border-left-color:var(--cyan);
  font-size:.92em; line-height:1.5;
  color:var(--ink);
}

.opt__dow{
  font-family:var(--mono); font-size:.68rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-70);
  margin-right:.35em;
}
.opt:has(input:checked) .opt__dow{ color:var(--ink); }

/* checkbox rows */
.check{
  display:flex!important; align-items:flex-start; gap:.75rem;
  font-family:var(--body)!important; font-weight:400!important;
  font-size:.97em!important; line-height:1.45;
  margin:0!important;
  cursor:pointer;
}
.check input{ flex:none; width:1.2em; height:1.2em; margin-top:.15em; accent-color:var(--ink); }
.check a{
  color:var(--ink); font-weight:500;
  text-decoration-color:var(--magenta);
}

.rform__send{ margin-top:.3rem; cursor:pointer; font-family:var(--display); }
.rform__send[disabled]{ opacity:.6; cursor:wait; }

/* status region */
.fstatus{ margin:1.2rem 0 0; font-size:.95em; line-height:1.5; }
.fstatus:empty{ display:none; }
.fstatus--wait{ font-family:var(--mono); font-size:.8rem; color:var(--ink-70); }
.fstatus--ok{
  padding:1.1rem 1.3rem;
  background:var(--acid);
  border:var(--edge) solid var(--ink);
  box-shadow:var(--off-sm) var(--ink);
}
.fstatus--err{
  padding:1.1rem 1.3rem;
  background:var(--paper-2);
  border:var(--edge) solid var(--ink);
  border-left-width:12px; border-left-color:var(--magenta);
}
.fstatus a{
  color:var(--ink); font-weight:500;}

.rform__fine{
  margin:1.4rem 0 0;
  padding-top:1.1rem;
  border-top:2px solid var(--ink-14);
  font-family:var(--mono); font-size:.7rem; line-height:1.6;
  color:var(--ink-70);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.foot{
  background:var(--paper);
  border-top:var(--edge) solid var(--ink);
  padding-block:clamp(2.5rem,5vw,3.5rem) 2rem;
}
.foot__in{
  display:flex; flex-wrap:wrap; justify-content:space-between;
  gap:2rem; align-items:flex-start;
}
.foot__brand{ display:flex; align-items:center; gap:.9rem; }
.foot__brand img{ width:46px; transform:rotate(-6deg); }
.foot__name{
  font-family:var(--display); font-weight:900;
  font-size:1.38rem; text-transform:uppercase; letter-spacing:-.01em;
  margin:0; line-height:1;
}
.foot__tag{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.06em;
  color:var(--ink-70); margin:.4rem 0 0;
}

.foot__links{ display:flex; flex-direction:column; gap:.55rem; }
.foot__links a{
  font-family:var(--mono); font-size:.78rem;
  color:var(--ink); text-decoration:none;
  border-bottom:2px solid var(--ink-14);
  padding-bottom:2px; width:fit-content;
}
.foot__links a:hover{ border-bottom-color:var(--magenta); }

/* The group's own land acknowledgment. Given its own block rather than set as
   footer fine print — three paragraphs of this weight shouldn't be the smallest
   text on the page. */
.land{
  margin:clamp(.5rem,1.5vw,1rem) 0 clamp(1.6rem,3vw,2.2rem);
  padding:clamp(1.4rem,3vw,2rem);
  background:var(--paper-2);
  border:var(--edge) solid var(--ink);
  border-left-width:12px;
  border-left-color:var(--magenta);
  max-width:78ch;
}
.land__h{
  font-family:var(--mono); font-weight:500;
  font-size:.7rem; letter-spacing:.17em; text-transform:uppercase;
  color:var(--ink);
  margin:0 0 .9rem;
}
.land p{
  margin:0 0 .9rem;
  font-size:.93em; line-height:1.6;
  color:var(--ink);
}
.land p:last-child{ margin-bottom:0; }

.foot__fine{
  margin-top:clamp(2rem,4vw,3rem);
  padding-top:1.4rem;
  border-top:2px solid var(--ink-14);
}
.foot__fine p{
  margin:0 0 .7rem;
  font-size:.82em; line-height:1.55;
  color:var(--ink-70);
  max-width:70ch;
}
.foot__rule{
  border:0;
  border-top:2px solid var(--ink-14);   /* matches the rule above the footer fine print */
  margin:0 0 1.4rem;
  max-width:78ch;                        /* line up with the land acknowledgment block */
}

.foot__crisis{ font-weight:500; }
.foot__crisis a{
  color:var(--ink); font-weight:600;
  text-decoration-color:var(--magenta);
}
.foot__crisis a:hover{ background:var(--acid); }


/* ==========================================================================
   MOTION — one quiet entrance, nothing more. Honours reduced-motion.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference){
  .hero__copy > *,
  .hero__art{
    animation: rise .62s cubic-bezier(.22,.68,.36,1) backwards;
  }
  .hero__copy > :nth-child(1){ animation-delay:.04s; }
  .hero__copy > :nth-child(2){ animation-delay:.10s; }
  .hero__copy > :nth-child(3){ animation-delay:.17s; }
  .hero__copy > :nth-child(4){ animation-delay:.23s; }
  .hero__copy > :nth-child(5){ animation-delay:.29s; }
  .hero__art{ animation-delay:.12s; }
}

@keyframes rise{
  from{ opacity:0; transform:translateY(14px); }
  to  { opacity:1; transform:none; }
}


/* ---------- print ---------- */

@media print{
  .grain,.masthead,.halo,.hero__art{ display:none!important; }
  body{ background:#fff; font-size:11pt; }
  .sec--ink{ background:#fff; color:#000; }
  .sec__h--on-ink,.val__h,.reg__lede{ color:#000; }
  .val p,.reg__list li,.zero p{ color:#333; }
  .zero{ background:#fff; color:#000; }
  .zero__h{ color:#000; }
  .ag,.isnt__col,.prac__card,.rcard,.rform{ box-shadow:none; break-inside:avoid; }
}


/* ==========================================================================
   RESOURCES PAGE
   ========================================================================== */

.rhead{ padding-block: clamp(3rem,7vw,5.5rem) clamp(2.5rem,5vw,4rem); }

.rhead__h{
  font-family:var(--display); font-weight:900;
  font-size:clamp(3.2rem, 8vw, 5.5rem);
  line-height:.86; letter-spacing:-.028em;
  margin:0 0 1.5rem;
}
.rhead__lede{
  font-size:1.15em; line-height:1.5;
  max-width:46ch;
  margin:0 0 2.2rem;
}
.rhead__jump{ margin:0; }

/* emergency callout — the loudest thing on the site, on purpose */
.emerg{
  background:var(--acid);
  color:var(--ink);
  border:var(--edge) solid var(--ink);
  box-shadow:var(--off-lg) var(--magenta);
  padding:clamp(1.4rem,3vw,2rem);
  margin-bottom:clamp(2rem,4vw,3rem);
  max-width:60ch;
}
.emerg__big{
  font-family:var(--display); font-weight:900;
  font-size:clamp(1.8rem,4.2vw,2.6rem);
  line-height:1.02; letter-spacing:-.018em;
  margin:0 0 .55rem;
}
.emerg__big a{
  color:var(--ink);
  text-decoration:underline; text-decoration-thickness:4px;
  text-underline-offset:4px;
  white-space:nowrap;          /* 9-1-1 must never break across lines */
}
.emerg__sub{ margin:0; font-size:.98em; line-height:1.45; }

/* resource grid */
.res{
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(18rem,1fr));
  gap:clamp(1.1rem,2.4vw,1.7rem);
  align-items:start;
}

.rcard{
  background:var(--paper);
  color:var(--ink);
  border:var(--edge) solid var(--ink);
  box-shadow:var(--off-sm) var(--ink);
  padding:clamp(1.3rem,2.6vw,1.7rem);
  display:flex; flex-direction:column;
}
.rcard:nth-child(3n+1){ box-shadow:var(--off-sm) var(--cyan); }
.rcard:nth-child(3n+2){ box-shadow:var(--off-sm) var(--magenta); }
.rcard:nth-child(3n+3){ box-shadow:var(--off-sm) var(--ink); }
.res--crisis .rcard{ box-shadow:var(--off-sm) var(--acid); }

.rcard__name{
  font-family:var(--display); font-weight:800;
  font-size:1.5rem; line-height:1.02;
  margin:0 0 .55rem;
  text-wrap:balance;
}
.rcard__what{
  margin:0 0 .95rem;
  font-size:.93em; line-height:1.48;
  color:var(--ink-70);
}

.rcard__tel{ margin:0 0 .8rem; }
.rcard__tel a{
  display:inline-block;
  white-space:nowrap;          /* a phone number must never break across lines */
  font-family:var(--display); font-weight:800;
  font-size:1.32rem; letter-spacing:.005em;
  color:var(--ink); text-decoration:none;
  background:var(--acid);
  border:2px solid var(--ink);
  padding:.28em .6em .24em;
}
.rcard__tel a:hover{ background:var(--cyan); }

/* multi-number cards */
.rcard__lines{ list-style:none; margin:0 0 .9rem; padding:0; }
.rcard__lines li{
  display:flex; flex-wrap:wrap; align-items:baseline;
  justify-content:space-between; gap:.4rem .8rem;
  padding:.5rem 0;
  border-bottom:2px solid var(--ink-14);
}
.rcard__lines li:last-child{ border-bottom:0; }
.rcard__lines span{
  font-size:.85em; line-height:1.3; color:var(--ink-70);
}
.rcard__lines a{
  font-family:var(--mono); font-weight:500; font-size:.9em;
  color:var(--ink);
  text-decoration-color:var(--magenta);
  white-space:nowrap;
}
.rcard__lines a:hover{ background:var(--acid); }

.rcard__meta{
  margin:0 0 .85rem;
  display:flex; flex-wrap:wrap; gap:.4rem;
}
.rcard__tag{
  font-family:var(--mono); font-size:.62rem; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink);
  border:2px solid var(--ink-14);
  padding:.3em .55em;
}

.rcard__link{
  margin-top:auto;
  font-family:var(--mono); font-size:.74rem;
  color:var(--ink);
  text-decoration-color:var(--cyan);
  word-break:break-word;
}
.rcard__link:hover{ background:var(--cyan); }

/* credit block */
.credit{
  margin-top:clamp(2.5rem,5vw,3.75rem);
  padding:clamp(1.5rem,3vw,2.2rem);
  background:var(--ink); color:rgba(250,246,236,.82);
  border:var(--edge) solid var(--ink);
  box-shadow:var(--off) var(--cyan);
  max-width:70ch;
}
.credit__h{
  font-family:var(--display); font-weight:900;
  font-size:clamp(1.5rem,3.2vw,2rem); line-height:1;
  margin:0 0 .7rem; color:var(--acid);
}
.credit p{ margin:0 0 .85rem; font-size:.97em; line-height:1.5; }
.credit p:last-child{ margin-bottom:0; }
.credit a{
  color:var(--paper); font-weight:500;
  text-decoration-color:var(--acid);
}
.credit a:hover{ color:var(--acid); }
.credit__fine{ font-size:.88em!important; color:rgba(250,246,236,.68); }

/* current page in nav */
.nav a[aria-current="page"]{ border-bottom-color:var(--magenta); }