/* FCYPAA 352 — Gainesville
   Layout concept: a telephone pole of xeroxed show flyers at night,
   printed in two misregistered riso inks (blaze orange + spring teal). */
:root {
  /* color: one dark look for every page, whatever the visitor's system theme */
  --bg: #0E171B;        /* spring at night */
  --paper: #15232A;     /* flyer stock */
  --ink: #E6EEE4;       /* chalk-white text */
  --muted: #9DB0A9;
  --orange: #FF6B35;    /* blaze / sunset ink */
  --teal: #2EC2B6;      /* spring-water ink */
  --spring: #133A39;    /* deep spring tint */
  --zap: #D9E648;       /* highlighter sticker */
  --on-accent: #0E171B;
  --line: rgba(230, 238, 228, .16);
  --shadow: #05090B;
  --dot: rgba(230, 238, 228, .07);
  --blend: screen;
  --night: #070D10;     /* deepest surfaces: footer, bid hero */
  --night-fg: #E6EEE4;
  color-scheme: dark;

  /* type */
  --f-display: "Dela Gothic One", "Arial Black", Impact, sans-serif;
  --f-body: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "Martian Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --f-hand: "Permanent Marker", "Comic Sans MS", cursive;

  /* scale */
  --t-xs: .75rem;
  --t-sm: .875rem;
  --t-md: 1.0625rem;
  --t-lg: 1.375rem;
  --t-xl: clamp(1.75rem, 4vw, 2.5rem);
  --t-xxl: clamp(2.5rem, 7vw, 4.75rem);
  --wrap: 72rem;
}


/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--t-md);
  line-height: 1.6;
  overflow-x: hidden;
}
h1, h2, h3 { font-family: var(--f-display); font-weight: 400; line-height: 1.05; margin: 0; text-wrap: balance; letter-spacing: -.01em; }
p { margin: 0; }
a { color: inherit; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--orange); }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
img { max-width: 100%; display: block; }

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.mono { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; }
.lede { font-size: var(--t-lg); line-height: 1.45; max-width: 36ch; }
.prose { max-width: 65ch; display: grid; gap: 1rem; }
.halftone { background-image: radial-gradient(var(--dot) 1.2px, transparent 1.5px); background-size: 7px 7px; }

/* placeholder / sample markers so review copy is obvious */
.ph { background: color-mix(in srgb, var(--zap) 55%, transparent); padding: 0 .25em; border-radius: 2px; }
.sample {
  font-family: var(--f-mono); font-size: .625rem; letter-spacing: .1em; text-transform: uppercase;
  border: 1px dashed currentColor; padding: .15em .5em; border-radius: 3px; opacity: .75; white-space: nowrap;
}

/* ---------- header ---------- */
.site-head { border-bottom: 2px solid var(--ink); background: var(--bg); position: relative; z-index: 5; }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .85rem; }
.brand { display: flex; align-items: center; gap: .65rem; text-decoration: none; }
.brand:hover { color: inherit; }
.brand-mark { font-family: var(--f-display); font-size: 1.75rem; line-height: 1; position: relative; color: var(--orange); }
.brand-mark::after { content: attr(data-text); position: absolute; inset: 0; color: var(--teal); mix-blend-mode: var(--blend); transform: translate(2px, 2px); }
.brand-text { display: grid; line-height: 1.1; }
.brand-text b { font-weight: 700; font-size: var(--t-sm); letter-spacing: .02em; }
.brand-text small { font-family: var(--f-mono); font-size: .625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: .25rem; flex-wrap: wrap; }
.nav a {
  display: block; padding: .45rem .7rem; text-decoration: none; font-weight: 600; font-size: var(--t-sm);
  border: 2px solid transparent; border-radius: 999px;
}
.nav a:hover { border-color: var(--ink); color: var(--ink); }
.nav a[aria-current="page"] { background: var(--ink); color: var(--bg); }
.nav a.nav-bid { border-color: var(--orange); color: var(--orange); }
.nav a.nav-bid[aria-current="page"] { background: var(--orange); color: var(--on-accent); }
.nav a.nav-vault::before { content: ""; display: inline-block; width: .55em; height: .5em; margin-right: .4em; border: 2px solid currentColor; border-radius: 2px; box-shadow: 0 -.32em 0 -.08em var(--bg), 0 -.36em 0 0 currentColor; vertical-align: -.02em; } /* tiny padlock */
.nav-toggle {
  display: none; font: 700 var(--t-sm) var(--f-body); background: none; color: var(--ink);
  border: 2px solid var(--ink); border-radius: 999px; padding: .4rem .9rem; cursor: pointer;
}
@media (max-width: 1100px) {
  .nav-toggle { display: inline-block; }
  .nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--bg); border-bottom: 2px solid var(--ink); display: none; }
  .nav.open { display: block; }
  .nav ul { flex-direction: column; padding: .75rem max(16px, env(safe-area-inset-right, 0px)) 1rem max(16px, env(safe-area-inset-left, 0px)); }
  .nav a { font-size: var(--t-md); }
}

/* ---------- buttons ---------- */
.btns { display: flex; flex-wrap: wrap; gap: .75rem; }
.btn {
  display: inline-flex; align-items: center; gap: .5rem; font: 700 var(--t-md) var(--f-body);
  padding: .75rem 1.2rem; border: 2px solid var(--ink); border-radius: 999px; text-decoration: none;
  background: var(--paper); color: var(--ink); cursor: pointer; transition: transform .15s, box-shadow .15s;
}
.btn:hover { color: var(--ink); transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--shadow); }
.btn-hot { background: var(--orange); color: var(--on-accent); border-color: var(--orange); }
.btn-hot:hover { color: var(--on-accent); }

/* ---------- riso display type ---------- */
.riso { position: relative; display: inline-block; color: var(--orange); font-family: var(--f-display); line-height: .85; }
.riso::after {
  content: attr(data-text); position: absolute; inset: 0; color: var(--teal);
  mix-blend-mode: var(--blend); transform: translate(.035em, .03em); pointer-events: none;
}

/* ---------- stickers ---------- */
.sticker {
  position: absolute; font-family: var(--f-hand); font-size: 1rem; line-height: 1; padding: .55rem .8rem;
  background: var(--zap); color: var(--on-accent); border: 2px solid var(--ink); border-radius: 999px;
  transform: rotate(var(--r, -6deg)); box-shadow: 3px 3px 0 var(--shadow); white-space: nowrap; z-index: 2;
}
.sticker.teal { background: var(--teal); color: var(--on-accent); }
.sticker.round { border-radius: 50%; width: 5.5rem; height: 5.5rem; display: grid; place-items: center; text-align: center; white-space: normal; font-size: .9rem; }

/* ---------- flyers ---------- */
.flyer {
  position: relative; background: var(--paper); border: 2px solid var(--ink); padding: 1.4rem;
  box-shadow: 6px 6px 0 var(--shadow); transform: rotate(var(--r, 0deg));
}
.flyer::before { /* masking tape */
  content: ""; position: absolute; top: -14px; left: 50%; width: 92px; height: 26px; translate: -50% 0;
  background: color-mix(in srgb, var(--zap) 60%, var(--paper)); opacity: .85; rotate: -3deg;
  border-left: 2px dotted var(--line); border-right: 2px dotted var(--line);
}

/* ---------- hero (home) ---------- */
.hero { border-bottom: 2px solid var(--ink); overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: 1.25fr .9fr; gap: 2.5rem; align-items: center; padding-block: clamp(2rem, 6vw, 4.5rem); }
.hero-copy { display: grid; gap: 1.25rem; min-width: 0; }
.hero-num { font-size: clamp(7rem, 24vw, 15rem); letter-spacing: -.04em; }
.hero h1 { font-size: var(--t-xxl); }
.hero h1 em { font-style: normal; color: var(--teal); }
.hero-side { position: relative; min-width: 0; padding: 1.5rem .5rem; }
.hero-side .sticker:nth-of-type(1) { top: -.5rem; right: -.25rem; --r: 8deg; }
.hero-side .sticker:nth-of-type(2) { bottom: -.25rem; left: -.5rem; --r: -10deg; }
@media (max-width: 860px) { .hero .wrap { grid-template-columns: 1fr; } }

.next-flyer { --r: 2deg; display: grid; gap: .75rem; }
.next-flyer .mono { color: var(--teal); }
.next-flyer h2 { font-size: var(--t-xl); }
.next-flyer dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .25rem 1rem; font-size: var(--t-sm); }
.next-flyer dt { font-family: var(--f-mono); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding-top: .15rem; }
.next-flyer dd { margin: 0; font-weight: 600; }
.tearoffs { display: grid; grid-template-columns: repeat(6, 1fr); border-top: 2px dashed var(--ink); margin: .5rem -1.4rem -1.4rem; }
.tearoffs span {
  writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--f-mono); font-size: .5625rem;
  padding: .6rem 0; text-align: center; border-left: 1px dashed var(--line); letter-spacing: .06em; justify-self: center;
}

/* ---------- ticker ---------- */
.ticker { background: var(--orange); color: var(--on-accent); border-bottom: 2px solid var(--ink); overflow: hidden; white-space: nowrap; }
.ticker-track { display: inline-flex; gap: 2rem; padding-block: .6rem; animation: tick 40s linear infinite; font-family: var(--f-display); font-size: 1.1rem; letter-spacing: .02em; }
.ticker-track span::after { content: "✱"; margin-left: 2rem; }
@keyframes tick { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } .btn { transition: none; } }

/* ---------- sections ---------- */
.section { padding-block: clamp(3rem, 8vw, 5.5rem); }
.section-head { display: grid; gap: .6rem; margin-bottom: 2.25rem; }
.section-head h2 { font-size: var(--t-xl); }
.eyebrow { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--teal); }
.squiggle { display: block; width: 7rem; height: 12px; color: var(--orange); }

.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.three > * { display: grid; gap: .6rem; align-content: start; min-width: 0; }
.three h3 { font-size: var(--t-lg); }
.three .mono { color: var(--muted); }
@media (max-width: 760px) { .three { grid-template-columns: 1fr; } }

/* bid band */
.band { background: var(--teal); color: var(--on-accent); border-block: 2px solid var(--ink); position: relative; overflow: hidden; }
.band .wrap { padding-block: clamp(3rem, 7vw, 5rem); display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: end; position: relative; z-index: 1; }
.band h2 { font-size: var(--t-xxl); }
.band p { max-width: 46ch; margin-top: 1rem; font-size: var(--t-lg); line-height: 1.4; }
.band .btn { border-color: var(--on-accent); }
.band-ghost {
  position: absolute; right: -2rem; bottom: -3.5rem; font-family: var(--f-display); font-size: clamp(9rem, 30vw, 20rem);
  line-height: 1; color: transparent; -webkit-text-stroke: 2px color-mix(in srgb, var(--on-accent) 25%, transparent); pointer-events: none;
}
@media (max-width: 760px) { .band .wrap { grid-template-columns: 1fr; } }

/* announcement list (home) */
.feed { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.feed li { display: grid; grid-template-columns: 8rem 1fr auto; gap: 1.25rem; align-items: baseline; padding-block: 1.1rem; border-bottom: 1px solid var(--line); }
.feed time { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--muted); letter-spacing: .06em; }
.feed b { font-size: var(--t-lg); line-height: 1.3; }
.feed p { color: var(--muted); font-size: var(--t-sm); margin-top: .2rem; }
.feed > li > div { min-width: 0; }
@media (max-width: 640px) { .feed li { grid-template-columns: 1fr; gap: .3rem; } }

/* new here */
.newhere { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; }
.newhere h2 { font-size: var(--t-xl); }
.helpcard { --r: -1.5deg; display: grid; gap: .9rem; }
.helpcard .big { font-family: var(--f-display); font-size: var(--t-xl); color: var(--orange); line-height: 1.1; }
@media (max-width: 760px) { .newhere { grid-template-columns: 1fr; } }

/* ---------- interior page header ---------- */
.page-head { border-bottom: 2px solid var(--ink); overflow: hidden; }
.page-head .wrap { padding-block: clamp(2.25rem, 6vw, 4rem); display: grid; gap: 1rem; position: relative; }
.page-head .riso { font-size: clamp(3.25rem, 12vw, 8rem); letter-spacing: -.03em; padding-bottom: .18em; } /* room for descenders (y, g, p) */
.page-head .lede { color: var(--muted); }
.page-head .sticker { right: max(16px, env(safe-area-inset-right, 0px)); top: 2rem; --r: 7deg; }
@media (max-width: 640px) { .page-head .sticker { display: none; } }

/* ---------- events ---------- */
.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.chip {
  font: 600 var(--t-sm) var(--f-body); padding: .45rem .95rem; border-radius: 999px; cursor: pointer;
  border: 2px solid var(--ink); background: transparent; color: var(--ink);
}
.chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); }

.tickets { display: grid; gap: 1.25rem; }
.ticket {
  display: grid; grid-template-columns: 7.5rem 1fr; background: var(--paper);
  border: 2px solid var(--ink); border-radius: 10px; overflow: hidden;
}
.ticket-stub {
  display: grid; place-content: center; text-align: center; gap: .1rem; padding: 1rem .5rem;
  border-right: 2px dashed var(--ink); background: var(--spring); font-variant-numeric: tabular-nums;
}
.ticket[data-cat="statewide"] .ticket-stub { background: var(--orange); color: var(--on-accent); }
.ticket-stub .m { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .12em; }
.ticket-stub .d { font-family: var(--f-display); font-size: 2.6rem; line-height: 1; }
.ticket-stub .d.tbd { font-size: 1.9rem; }
.ticket-stub .w { font-family: var(--f-mono); font-size: .625rem; letter-spacing: .1em; }
.ticket-body { padding: 1.2rem 1.4rem; display: grid; gap: .5rem; min-width: 0; }
.ticket-top { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.tag { font-family: var(--f-mono); font-size: .625rem; letter-spacing: .1em; text-transform: uppercase; padding: .2rem .55rem; border-radius: 999px; border: 1.5px solid var(--ink); }
.tag.t-local { background: var(--zap); color: var(--on-accent); border-color: var(--zap); }
.tag.t-state { background: var(--orange); color: var(--on-accent); border-color: var(--orange); }
.tag.t-service { background: var(--teal); color: var(--on-accent); border-color: var(--teal); }
.ticket h3 { font-size: var(--t-lg); }
.ticket .meta { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--muted); letter-spacing: .04em; display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.ticket p { font-size: var(--t-sm); max-width: 60ch; }
.ticket.past { opacity: .7; }
@media (max-width: 560px) {
  .ticket { grid-template-columns: 1fr; }
  .ticket-stub { border-right: 0; border-bottom: 2px dashed var(--ink); display: flex; gap: .75rem; justify-content: flex-start; align-items: baseline; padding: .7rem 1.4rem; }
  .ticket-stub .d { font-size: 1.6rem; }
}
.subhead { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 3rem 0 1rem; padding-bottom: .5rem; border-bottom: 1px solid var(--line); }

/* ---------- announcements board ---------- */
.board { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); gap: 2.75rem 2rem; padding-top: 1rem; align-items: start; }
.board .flyer { display: grid; gap: .7rem; }
.board .flyer:nth-child(3n+1) { --r: -1.2deg; }
.board .flyer:nth-child(3n+2) { --r: .9deg; }
.board .flyer:nth-child(3n) { --r: -.4deg; }
.board .flyer h3 { font-size: 1.35rem; }
.board .flyer time { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--muted); letter-spacing: .06em; }
.board .flyer p { font-size: var(--t-sm); }
.board .flyer.pinned { background: var(--zap); color: var(--on-accent); }
.board .flyer.pinned time { color: var(--on-accent); }
.board .flyer.pinned::before { background: var(--paper); }
.flyer-foot { display: flex; justify-content: space-between; gap: .5rem; align-items: center; flex-wrap: wrap; padding-top: .5rem; border-top: 1px dashed var(--line); }

/* ---------- mission ---------- */
.manifesto { font-family: var(--f-display); font-size: clamp(1.6rem, 4.2vw, 2.9rem); line-height: 1.15; max-width: 24ch; text-wrap: balance; }
.manifesto mark { background: none; color: var(--orange); }
.split { display: grid; grid-template-columns: 16rem 1fr; gap: 2.5rem; padding-block: 2.5rem; border-top: 2px solid var(--ink); }
.split > h2 { font-size: var(--t-lg); }
.split > div { min-width: 0; }
@media (max-width: 760px) { .split { grid-template-columns: 1fr; gap: 1rem; } }
.purpose { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.purpose li { display: grid; grid-template-columns: 2.5rem 1fr; gap: 1rem; align-items: start; }
.purpose li::before { content: "✱"; font-size: 1.6rem; line-height: 1; color: var(--teal); }
.purpose b { display: block; font-size: var(--t-lg); line-height: 1.3; }
.roles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 0; margin: 0; border-top: 1px solid var(--line); }
.roles div { padding: 1rem 1rem 1rem 0; border-bottom: 1px solid var(--line); }
.roles dt { font-weight: 700; }
.roles dd { margin: .2rem 0 0; font-size: var(--t-sm); color: var(--muted); }

/* ---------- bid ---------- */
.bid-hero { background: var(--night); color: var(--night-fg); border-bottom: 2px solid var(--ink); overflow: hidden; }
.bid-hero .wrap { padding-block: clamp(2.5rem, 7vw, 5rem); display: grid; gap: 1.25rem; position: relative; }
.bid-hero .eyebrow { color: var(--zap); }
.bid-hero .riso::after { mix-blend-mode: screen; }
.bid-hero h1 { font-size: clamp(3rem, 11vw, 7.5rem); line-height: .9; }
.bid-hero h1 .riso { display: block; }
.bid-hero .lede { color: color-mix(in srgb, var(--night-fg) 80%, transparent); max-width: 44ch; }
.bid-hero .sticker { right: max(16px, env(safe-area-inset-right, 0px)); top: 2.5rem; --r: 10deg; border-color: var(--night-fg); }
@media (max-width: 640px) { .bid-hero .sticker { position: static; justify-self: start; } }
.reasons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 2px solid var(--ink); }
.reasons article { padding: 1.75rem 1.75rem 1.75rem 0; border-bottom: 1px solid var(--line); display: grid; gap: .5rem; min-width: 0; }
.reasons article:nth-child(odd) { border-right: 1px solid var(--line); }
.reasons article:nth-child(even) { padding-left: 1.75rem; }
.reasons h3 { font-size: var(--t-lg); }
.reasons .mono { color: var(--orange); }
@media (max-width: 700px) {
  .reasons { grid-template-columns: 1fr; }
  .reasons article:nth-child(odd) { border-right: 0; }
  .reasons article:nth-child(even) { padding-left: 0; }
}
.road { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: step; }
.road li { display: grid; grid-template-columns: 3.5rem 1fr auto; gap: 1.25rem; padding-block: 1.25rem; border-bottom: 1px solid var(--line); align-items: start; counter-increment: step; }
.road li::before {
  content: counter(step); font-family: var(--f-display); font-size: 1.4rem; width: 2.75rem; height: 2.75rem;
  border-radius: 50%; border: 2px solid var(--ink); display: grid; place-items: center; line-height: 1;
}
.road li.now::before { background: var(--orange); border-color: var(--orange); color: var(--on-accent); }
.road li.done::before { background: var(--ink); color: var(--bg); }
.road li > div { min-width: 0; display: grid; gap: .25rem; }
.road b { font-size: var(--t-lg); line-height: 1.3; }
.road p { font-size: var(--t-sm); color: var(--muted); }
.status { font-family: var(--f-mono); font-size: .625rem; letter-spacing: .1em; text-transform: uppercase; padding: .25rem .6rem; border-radius: 999px; border: 1.5px solid var(--line); white-space: nowrap; color: var(--muted); }
.status.on { border-color: var(--orange); color: var(--orange); }
@media (max-width: 560px) { .road li { grid-template-columns: 3.5rem 1fr; } .road .status { grid-column: 2; justify-self: start; } }
.help { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.help .flyer { display: grid; gap: .7rem; align-content: start; }
.help .flyer:nth-child(1) { --r: -1deg; } .help .flyer:nth-child(2) { --r: 1deg; } .help .flyer:nth-child(3) { --r: -.5deg; }
.help h3 { font-size: var(--t-lg); }
.help p { font-size: var(--t-sm); }
@media (max-width: 860px) { .help { grid-template-columns: 1fr; } }

/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 3rem; align-items: start; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
.form { --r: -.5deg; display: grid; gap: 1.1rem; }
.field { display: grid; gap: .35rem; }
.field label { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; }
.field small { color: var(--muted); font-size: var(--t-xs); }
.field input, .field select, .field textarea {
  font: inherit; color: var(--ink); background: var(--bg); border: 2px solid var(--ink); border-radius: 8px; padding: .7rem .85rem; width: 100%;
}
.field textarea { min-height: 8rem; resize: vertical; }
.form-note { font-size: var(--t-sm); padding: .75rem 1rem; border: 2px dashed var(--teal); border-radius: 8px; }
.info { display: grid; gap: 0; border-top: 2px solid var(--ink); }
.info > div { padding-block: 1.1rem; border-bottom: 1px solid var(--line); display: grid; gap: .3rem; }
.info .mono { color: var(--muted); }
.info b { font-size: var(--t-lg); line-height: 1.3; }

/* ---------- merch (placeholders) ---------- */
.merch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 2rem; }
.merch-card { display: grid; gap: .75rem; align-content: start; opacity: .55; filter: grayscale(1); }
.merch-img {
  aspect-ratio: 4 / 5; max-width: 100%; border: 2px dashed var(--muted); border-radius: 10px;
  background: repeating-linear-gradient(45deg, var(--line) 0 2px, transparent 2px 14px), color-mix(in srgb, var(--muted) 15%, var(--bg));
}
.merch-line { height: .85rem; border-radius: 4px; background: color-mix(in srgb, var(--muted) 35%, var(--bg)); }
.merch-line.w70 { width: 70%; }
.merch-line.w40 { width: 40%; }
.merch-btn[disabled] { cursor: not-allowed; justify-self: start; background: transparent; border-color: var(--muted); color: var(--muted); }
.merch-btn[disabled]:hover { transform: none; box-shadow: none; color: var(--muted); }

/* ---------- event flyer (home + events) ---------- */
.next-grid { display: grid; grid-template-columns: 9.5rem 1fr; gap: 1.1rem; align-items: start; }
.next-info { display: grid; gap: .6rem; min-width: 0; }
.flyer-thumb { display: block; border: 2px solid var(--ink); background: #fff; transform: rotate(-2deg); box-shadow: 3px 3px 0 var(--shadow); transition: transform .15s; }
.flyer-thumb:hover { transform: rotate(0deg) scale(1.03); }
.flyer-thumb img { width: 100%; height: auto; }
@media (max-width: 420px) { .next-grid { grid-template-columns: 1fr; } .flyer-thumb { max-width: 12rem; } }
.ticket.has-flyer { grid-template-columns: 7.5rem 1fr 9rem; }
.ticket-flyer { display: grid; gap: .4rem; align-content: center; justify-items: center; padding: 1rem; border-left: 2px dashed var(--ink); text-decoration: none; font-family: var(--f-mono); font-size: .625rem; letter-spacing: .1em; text-transform: uppercase; }
.ticket-flyer img { width: 100%; max-width: 7rem; height: auto; border: 1px solid var(--line); background: #fff; }
@media (max-width: 560px) {
  .ticket.has-flyer { grid-template-columns: 1fr; }
  .ticket-flyer { border-left: 0; border-top: 2px dashed var(--ink); grid-template-columns: 4.5rem auto; justify-content: start; justify-items: start; align-items: center; padding: .8rem 1.4rem; }
}

/* ---------- bylaws document ---------- */
.doc-meta { color: var(--muted); }
.doc-layout { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 3rem; align-items: start; }
.doc-toc { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow: auto; display: grid; gap: .75rem; padding-right: .5rem; }
.doc-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; border-left: 2px solid var(--line); }
.doc-toc a { display: block; padding: .3rem .8rem; font-size: var(--t-sm); text-decoration: none; color: var(--muted); border-left: 2px solid transparent; margin-left: -2px; }
.doc-toc a:hover { color: var(--ink); border-left-color: var(--orange); }
@media (max-width: 900px) {
  .doc-layout { grid-template-columns: 1fr; gap: 2rem; }
  .doc-toc { position: static; max-height: none; }
  .doc-toc ol { columns: 2; column-gap: 1rem; display: block; border-left: 0; }
  .doc-toc a { padding-left: 0; border-left: 0; margin-left: 0; }
}
.doc { max-width: 70ch; font-size: var(--t-md); }
.doc h2 { font-size: var(--t-xl); margin: 3rem 0 1rem; padding-top: 1.5rem; border-top: 2px solid var(--ink); scroll-margin-top: 1rem; }
.doc h2:first-child { margin-top: 0; }
.doc h3 { font-family: var(--f-body); font-weight: 700; font-size: var(--t-lg); margin: 2rem 0 .6rem; letter-spacing: 0; scroll-margin-top: 1rem; }
.doc h3 .num { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--teal); margin-right: .4rem; vertical-align: .2em; }
.doc p { margin: 0 0 1rem; }
.doc p.note { font-style: italic; color: var(--orange); }
.doc ol, .doc ul { margin: 0 0 1rem; padding-left: 1.6rem; display: grid; gap: .45rem; }
.doc li > ol, .doc li > ul { margin: .45rem 0 0; }
.doc li::marker { font-family: var(--f-mono); font-size: .85em; color: var(--muted); }
.table-scroll { overflow-x: auto; margin-bottom: 1rem; }
.roster { border-collapse: collapse; width: 100%; font-size: var(--t-sm); }
.roster th { text-align: left; font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: .5rem .75rem .5rem 0; border-bottom: 2px solid var(--ink); }
.roster td { padding: .5rem .75rem .5rem 0; border-bottom: 1px solid var(--line); }

/* ---------- sober moments ---------- */
.anon-rule { max-width: 65ch; padding: 1rem 1.2rem; border: 2px dashed var(--teal); border-radius: 8px; margin-bottom: 2.5rem; }
.moments { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 2.5rem 2rem; }
.empty-note { grid-column: 1 / -1; color: var(--muted); }
.polaroid { margin: 0; background: var(--paper); border: 2px solid var(--ink); padding: .8rem .8rem 1rem; box-shadow: 5px 5px 0 var(--shadow); display: grid; gap: .8rem; }
.polaroid:nth-child(odd) { transform: rotate(-1.4deg); }
.polaroid:nth-child(even) { transform: rotate(1.1deg); }
.polaroid img, .polaroid-img { width: 100%; aspect-ratio: 1; object-fit: cover; max-width: 100%; }
.polaroid figcaption { display: grid; gap: .3rem; }
.polaroid time { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--muted); }
.polaroid b { font-family: var(--f-hand); font-weight: 400; font-size: 1.15rem; }
.polaroid span { font-size: var(--t-sm); }
.polaroid.is-empty { opacity: .55; filter: grayscale(1); }
.polaroid.is-empty .polaroid-img { border: 2px dashed var(--muted); background: repeating-linear-gradient(45deg, var(--line) 0 2px, transparent 2px 14px), color-mix(in srgb, var(--muted) 15%, var(--bg)); }

/* ---------- vault ---------- */
.vault-form { --r: -.5deg; max-width: 28rem; }
.vault-upload { --r: .5deg; max-width: 28rem; margin-bottom: 2rem; }
.form-error { font-size: var(--t-sm); padding: .75rem 1rem; border: 2px solid var(--orange); border-radius: 8px; color: var(--orange); }
.upload-note { font-size: var(--t-sm); padding: .75rem 1rem; border: 2px solid var(--teal); border-radius: 8px; color: var(--teal); margin-bottom: 1rem; }
.files { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.files li { display: grid; grid-template-columns: 8rem 1fr auto auto; gap: 1.25rem; align-items: baseline; padding-block: 1rem; border-bottom: 1px solid var(--line); }
.files time { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--muted); }
.files b { min-width: 0; }
.file-type { font-family: var(--f-mono); font-size: .625rem; letter-spacing: .1em; border: 1.5px solid var(--line); border-radius: 999px; padding: .15rem .5rem; color: var(--muted); }
@media (max-width: 560px) { .files li { grid-template-columns: 1fr auto; } .files time { grid-column: 1 / -1; } }

/* ---------- footer ---------- */
.site-foot { background: var(--night); color: var(--night-fg); margin-top: 0; }
.site-foot .wrap { padding-block: 3rem 2rem; display: grid; gap: 2rem; }
.foot-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; }
.foot-top > * { min-width: 0; }
.foot-top h2 { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--zap); margin-bottom: .75rem; }
.foot-top ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.foot-top a:hover { color: var(--zap); }
.foot-big { font-family: var(--f-display); font-size: var(--t-xl); line-height: 1.1; }
.foot-legal { font-size: var(--t-xs); color: color-mix(in srgb, var(--night-fg) 65%, transparent); border-top: 1px solid color-mix(in srgb, var(--night-fg) 20%, transparent); padding-top: 1.25rem; max-width: 80ch; }
@media (max-width: 760px) { .foot-top { grid-template-columns: 1fr; } }