/* Ported verbatim from the working page (uploads/template-nightmarket-548adc3b.html),
   which is this brand's ground truth. Base reset, target-size rules, the ground classes,
   and the structural CSS for every section pattern the page uses. Token values live in
   tokens/. Do not restyle these classes; a consumer rebuilding the page should get this
   file and only supply markup. */

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:61px} /* 61px: the sticky header */
body{
  font-family:'IBM Plex Sans','Helvetica Neue',Arial,sans-serif;
  font-weight:400;
  font-size:var(--fs-17);
  line-height:1.55;
  background:var(--ink);
  color:var(--paper);
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
ul,ol{list-style:none}
a{color:inherit}
a,button{transition:background-color .2s ease-in,color .2s ease-in,border-color .2s ease-in}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
/* Filled buttons take their text color from the opposite ground, so a currentColor ring
   would vanish into the tile. Ring them in their own fill color instead. */
.t-k .btn:focus-visible, header.site .btn:focus-visible{outline-color:var(--paper)}
.t-w .btn:focus-visible, .t-r .btn:focus-visible, .dialog .btn:focus-visible{outline-color:var(--ink)}
.skip:focus-visible{outline-color:var(--red-dark);outline-offset:-4px}

/* WCAG 2.5.5 target size. Every control that is not inline in a sentence. */
a:not(.inline-link),button{min-height:44px}
nav a:not(.btn), .foot-links a, .socials a, .foot-social a{
  display:inline-flex;align-items:center;min-height:44px;
}
.socials a,.foot-social a{justify-content:center;min-width:44px}
.inline-link{text-decoration:underline;text-underline-offset:3px}
.t-w .inline-link:hover{color:var(--red)}
.t-k .inline-link:hover, footer .inline-link:hover{color:var(--red-dark)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--ink);color:var(--paper);
  padding:var(--s-16) var(--s-24);text-decoration:none;
}
.skip:focus{left:0}
main:focus, section[tabindex="-1"]:focus{outline:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.wrap{max-width:1160px;margin-inline:auto;padding-inline:var(--s-24)}

/* ---------------- header, from neon-nocturne ---------------- */
.strip{
  background:var(--paper);color:var(--ink);
  font-weight:600;font-size:var(--fs-12);letter-spacing:.01em;
  padding:var(--s-8) 0;
}
.strip .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s-16)}
.strip p{max-width:none}
.strip .socials{display:flex;gap:var(--s-8)}
.strip svg{width:18px;height:18px;fill:var(--ink)}
.strip .socials a:hover svg{fill:var(--red)}

header.site{
  position:sticky;top:0;z-index:50;
  background:rgba(13,13,13,.92);
  border-bottom:1px solid var(--line-dark);
  backdrop-filter:blur(10px);
}
header.site .wrap{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s-16);padding-top:var(--s-8);padding-bottom:var(--s-8);
}
.wordmark{
  font-weight:600;font-size:var(--fs-17);letter-spacing:-.01em;
  line-height:1.25;text-decoration:none;
  display:inline-flex;align-items:center;min-height:44px;
}
.wordmark em{font-style:normal;color:var(--red-dark)} /* red on the black header, 4.55:1 */
footer .wordmark em{color:var(--red-dark)}
nav.primary{display:flex;align-items:center;gap:var(--s-24)}
nav.primary a:not(.btn){
  text-decoration:none;color:var(--grey-dark);font-size:var(--fs-17);
}
nav.primary a:not(.btn):hover{color:var(--paper)}

/* ---------------- buttons, one squared vocabulary (signal-grid) ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:var(--s-8) var(--s-32);
  font-size:var(--fs-17);font-weight:400;text-decoration:none;
  border:0;cursor:pointer;font-family:inherit;
}
.t-k .btn, header.site .btn{background:var(--paper);color:var(--ink)}
.t-k .btn:hover, header.site .btn:hover{background:var(--red);color:var(--paper)}
.t-k .btn:active, header.site .btn:active{background:var(--red);color:var(--paper)}
.t-w .btn{background:var(--ink);color:var(--paper)}
.t-w .btn:hover{background:var(--red);color:var(--paper)}
.t-w .btn:active{background:var(--red);color:var(--paper)}
.t-r .btn{background:var(--ink);color:var(--paper)}
.t-r .btn:hover{background:var(--paper);color:var(--red)}

/* ---------------- tiles: full bleed, zero radius, ground inversion only ---------------- */
.tile{position:relative}
.t-w{background:var(--paper);color:var(--ink);--dim:var(--grey-light);--line:var(--line-light)}
.t-k{background:var(--ink);color:var(--paper);--dim:var(--grey-dark);--line:var(--line-dark)}
.t-r{background:var(--red);color:var(--paper)}
.tile-pad{padding:var(--s-64) var(--s-24)}
.tin{max-width:1160px;margin:0 auto}


h2{font-weight:300;font-size:var(--fs-d2);line-height:var(--lh-head);letter-spacing:-.01em}
p{max-width:62ch}
.t-w .muted{color:var(--grey-light)}
.t-k .muted{color:var(--grey-dark)}
.mt-16{margin-top:var(--s-16)}
.mt-24{margin-top:var(--s-24)}
.mt-32{margin-top:var(--s-32)}

/* ---------------- plates: every slot presentable with zero jpgs on disk ---------------- */
.plate{position:relative;overflow:hidden;background:var(--ink-soft)}
.plate img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.plate-note{display:none}
.plate.is-empty .plate-note{
  display:flex;flex-direction:column;justify-content:flex-end;gap:var(--s-8);
  position:absolute;inset:0;padding:var(--s-32);
}
.t-w .plate.is-empty{background:var(--paper-soft)}
.plate.is-empty::after{
  content:"";position:absolute;inset:var(--s-16);
  border:1px solid var(--line-dark);pointer-events:none;
}
.t-w .plate.is-empty::after{border-color:var(--line-light)}
.plate-id{font-size:var(--fs-12);letter-spacing:.02em;color:var(--grey-dark)}
.t-w .plate-id{color:var(--grey-light)}
.plate-desc{font-size:var(--fs-17);line-height:1.5;max-width:36ch;color:var(--paper)}
.t-w .plate-desc{color:var(--ink)}

/* ---------------- hero, from open-air ---------------- */
.hero{position:relative;min-height:88svh;display:grid;background:var(--ink)}
.hero .plate{position:absolute;inset:0}
/* keep the empty-state note clear of the line pinned to the hero's bottom edge */
.hero .plate.is-empty .plate-note{padding-bottom:var(--s-96)}
/* OVERRIDE of the original no-scrim brief: assets/hero-v2.jpg is now real photography
   and white-text contrast was measured against its actual pixels, not assumed. Worst
   case per band: top 0-25% 6.69:1 (passes, 0% of that band fails), upper 25-45% 1.24:1
   (22% fails), mid 45-65% 1.19:1 (18% fails), lower 65-100% 1.26:1 (6% fails). The
   string-light highlights sit exactly where the Anton manifesto sits, so "no scrim,
   the sky does the contrast" is no longer defensible. This gradient stays clear over
   the top 0-15%, where the photo already passes on its own, and holds at .82-.92 black
   from 25% down, which is enough headroom over the .78 minimum the worst measured band
   needs to clear 4.5:1. The photo itself is untouched and the manifesto stays in place. */
.hero-scrim{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(13,13,13,0) 0%,
    rgba(13,13,13,.35) 12%,
    rgba(13,13,13,.82) 25%,
    rgba(13,13,13,.88) 55%,
    rgba(13,13,13,.88) 85%,
    rgba(13,13,13,.92) 100%);
}
.hero-inner{
  position:relative;z-index:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding:var(--s-96) var(--s-24) var(--s-80);color:var(--paper);
}
h1.manifesto{
  font-family:Anton, Impact, sans-serif;font-weight:400;
  font-size:var(--fs-hero);line-height:.96;letter-spacing:-.012em;
  text-transform:uppercase; /* Anton display type, the one sanctioned long caps run */
}
h1.manifesto .and{
  display:block;font-family:Newsreader, Georgia, serif;font-style:italic;font-weight:400;
  font-size:var(--fs-and);line-height:1.3;letter-spacing:0;text-transform:lowercase;
  padding:var(--s-8) 0;
}
.hero-foot{
  position:absolute;left:0;right:0;bottom:var(--s-24);z-index:1;
  text-align:center;color:var(--paper);font-size:var(--fs-12);font-weight:600;
  letter-spacing:.02em;padding:0 var(--s-16);max-width:none;
}

/* ---------------- li.01 signal, from signal-grid: type and status only.
   Its source hero plate is dropped, the open-air hero directly above supplies
   the photographic moment, so the tile is rebalanced as a two column type block
   with the readout pinned to the baseline of the standfirst column. ---------------- */
.signal-grid{display:grid;grid-template-columns:1fr;row-gap:var(--s-48);column-gap:var(--s-64)}
.signal-grid h2{font-size:var(--fs-d1)}
.t-w .signal-grid .hl{color:var(--red)}       /* red on white, 4.68:1 */
.t-k .signal-grid .hl{color:var(--red-dark)}  /* red on black, 4.55:1 */
.signal-lede{margin-top:var(--s-24);color:var(--dim)}
.readout{align-self:center;width:100%;max-width:320px}
.readout-title{font-size:var(--fs-12);color:var(--dim);padding-bottom:var(--s-8)}
.readout-row{
  display:flex;justify-content:space-between;gap:var(--s-16);
  /* --dim, not --line: this is a datasheet rule and needs to read as a divider, not as
     the faint hairline that separates panels elsewhere. */
  padding:var(--s-8) 0;border-bottom:1px solid var(--dim);
  font-size:var(--fs-17);max-width:none;
}
.readout-row .val{font-variant-numeric:tabular-nums}
.t-w .readout-row .val{color:var(--red)}
.t-k .readout-row .val{color:var(--red-dark)}
.readout-row .ok{color:currentColor;font-variant-numeric:tabular-nums}

/* ---------------- li.03a, VARIANT A: THE STRIP ----------------
   One ruled band replacing the five photographic pillar tiles. Direct descendant of
   the client's printed flyer strip: pictogram, coloured label, one supporting line,
   five across.

   HOW IT AVOIDS THE FEATURE-CARD TRAP (guardrails ban three identical
   icon-noun-two-lines-of-grey cards; five of them would be worse):
     1. The cells are NOT equal. A 6 column grid runs 2:1:1:1:1, so pillar 01 is double
        width and is the only cell set at display size, --fs-d2 weight 300, the template
        h2 voice. The other four are label voice, --fs-17 weight 600.
     2. No card chrome anywhere. Zero radius, zero shadow, zero panel fill. The structure
        is 1px neutral hairlines: a rule above and below the band and a rule between
        every cell. It reads as one timetable, not five objects.
     3. Every cell is numbered with the red circle badge, so the five are a ranked
        ordered list in flyer order, not five interchangeable peers.
     4. The support lines are catalogue, comma separated specifics, plus confirmed flyer
        wording. Not filler.

   RED BUDGET. The five numbered badges are the only red in the section. Red as a fill is
   a surface, so it stays --red on both grounds and its numeral is white, 4.68:1.
   --red-dark exists for red TEXT on black and there is no red text here.

   ICONS. Line art glyphs from the inlined sprite, stroked in currentColor, so one
   drawing works on black and on white without a second rule.

   Mobile first: a single stacked column with horizontal hairlines. The 2:1:1:1:1
   asymmetry only switches on at 900px, where there is width for it to mean something. */
.strip-head{max-width:62ch}
.strip-head h2{font-size:var(--fs-d1)}
.strip-lede{margin-top:var(--s-24);color:var(--dim)}

.band{
  display:grid;
  grid-template-columns:1fr;
  margin-top:var(--s-48);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.cell{
  min-width:0;
  padding:var(--s-32) var(--s-24);
  border-top:1px solid var(--line);
}
.cell:first-child{border-top:0}

/* badge + verb, the ordered-list device. Red fill, white numeral, 4.68:1. */
.cell-top{display:flex;align-items:center;gap:var(--s-8);max-width:none}
.badge{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;flex:0 0 26px;border-radius:50%;
  background:var(--red);color:var(--paper);
  font-size:var(--fs-12);font-weight:600;line-height:1;
  font-variant-numeric:tabular-nums;
}
.verb{
  font-size:var(--fs-12);font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--dim);
}

.pict{width:40px;height:40px;margin-top:var(--s-24);display:block}

.cell-label{
  margin-top:var(--s-24);
  font-size:var(--fs-17);font-weight:600;line-height:1.3;letter-spacing:-.01em;
}
.cell-sub{
  margin-top:var(--s-8);
  font-size:var(--fs-12);line-height:1.7;color:var(--dim);max-width:30ch;
}

/* the lead cell carries the only display setting in the band */
.cell-lead .pict{width:56px;height:56px}
.cell-lead .cell-label{font-size:var(--fs-d2);font-weight:300;line-height:var(--lh-head)}
.cell-lead .cell-sub{font-size:var(--fs-17);line-height:1.55;max-width:34ch}

.band-foot{
  margin-top:var(--s-40);
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-24);
}
.band-foot p{color:var(--dim);font-size:var(--fs-17);max-width:44ch}

/* ---------------- li.03b, VARIANT B: TYPE IS THE IMAGE ----------------
   The same five pillars as a bill, a letterpress running order. Five hairline-ruled
   rows, each with a hanging numeral and verb in the left margin and the pillar name set
   in Anton at poster scale in the main column, its supporting line set tiny directly
   beneath it. The size jump inside a single row is roughly 8x, and that jump IS the
   section's picture. Variant A above uses icons; this one proves none are needed.
   The step it adds to the display scale is documented on --fs-bill in :root.

   RED BUDGET. The numeral set 01 to 05, and the noun in each pillar name (Food,
   Desserts, Drinks, Performances, Artisans, Activities). Nothing else in the section is
   red. The rules, the words, the verbs and the supporting lines are all black, white or
   grey, so the eye lands on the numbers and the bill reads as one counted list. */
.bill-head{padding-bottom:var(--s-48)}
.bill-head h2{max-width:20ch}
.bill-head .muted{margin-top:var(--s-16);font-size:var(--fs-17)}

.bill{border-bottom:1px solid var(--rule-light)}
.t-k .bill{border-bottom-color:var(--rule-dark)}

.bill-row{
  display:grid;grid-template-columns:1fr;row-gap:var(--s-16);
  padding:var(--s-32) 0 var(--s-40);
  border-top:1px solid var(--rule-light);
}
.t-k .bill-row{border-top-color:var(--rule-dark)}

/* the left margin: a hanging numeral and its verb */
.bill-tag{
  display:flex;align-items:baseline;gap:var(--s-8);
  font-size:var(--fs-12);letter-spacing:.08em;text-transform:uppercase;
  max-width:none;
}
.bill-num{
  font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.04em;
  color:var(--red);   /* THE red. Once, on the numeral set, and nowhere else here. */
}
.t-k .bill-num{color:var(--red-dark)}   /* red on black is --red-dark, 4.55:1 */
/* The noun in each pillar name carries the red. Anton has no italic, so reset it. */
.bill-word em{font-style:normal;color:var(--red)}
.t-k .bill-word em{color:var(--red-dark)}   /* red on black is --red-dark, 4.55:1 */
.t-w .bill-verb{color:var(--grey-light)}
.t-k .bill-verb{color:var(--grey-dark)}

/* the main column: the word at poster scale, its supporting line at caption scale */
.bill-word{
  font-family:Anton, Impact, 'Arial Narrow', sans-serif;font-weight:400;
  font-size:var(--fs-bill);line-height:.9;letter-spacing:-.008em;
  text-transform:uppercase;   /* Anton display setting, the sanctioned caps run */
  overflow-wrap:break-word;hyphens:none;
}
.bill-line{
  margin-top:var(--s-16);
  font-size:var(--fs-12);line-height:1.7;letter-spacing:.01em;
}
.t-w .bill-line{color:var(--grey-light)}
.t-k .bill-line{color:var(--grey-dark)}

.bill-foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-24);padding-top:var(--s-48)}
.bill-foot p{font-size:var(--fs-17);max-width:60ch}

/* li.09 is now a split: flat maroon panel beside a photograph. The drawn ground it used
   to carry (radial field, screentone clusters, scattered food glyphs, soft-light
   vignette) is gone, and so is all of its CSS. It was too close a reproduction of the
   client's reference, which is a thing to match the feel of and not the content. */
.t-mrn{position:relative;background:var(--maroon-mid);color:var(--paper);overflow:hidden}
.join-split{display:grid;grid-template-columns:1fr;min-height:520px}
.join-panel{
  padding:var(--s-64) var(--s-24);
  display:flex;flex-direction:column;justify-content:center;position:relative;z-index:3;
}
.join-panel h2{max-width:18ch}
.join-shot{position:relative;min-height:280px}
.shot{position:absolute;inset:0;z-index:0}
.shot img{width:100%;height:100%;object-fit:cover}
/* The page has to stay presentable with zero jpgs, so the figure paints its own art
   directed empty state rather than showing a broken image icon. */
.shot.is-empty{background:linear-gradient(150deg,var(--maroon-core),var(--maroon-deep))}
.join-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(6,6,6,.55),rgba(6,6,6,.15))}
.t-mrn .btn{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.t-mrn .btn:hover{background:var(--ink);color:var(--paper);border-color:var(--paper)}

@media (min-width:900px){
  /* the side margins outside the 1160px content column open up here, so two
     glyphs move out to them at a larger size. That column is horizontally
     centred, so anything outside it is clear of the heading and the form at
     any vertical position, not only inside the padding band. */  /* sits in the band between the reserved label zone (ends 56px) and g3 (starts at 50%) */
}

/* The two blank lines below (Date, Venue) are the point, not a bug: BRIEF.md forbids stating
   a date or venue, so the ruled line stays empty on purpose. design.mjs audit reports
   cramped-padding on these two empty dds; that is expected and accepted, see AUDIT.md. Do not
   add an inset to quiet it, that pushes the rule down and weakens the effect. */
@media (max-width:640px){
  .ticket{grid-template-columns:1fr}
}

/* ---------------- li.02 location ----------------
   Structure adapted from Mega Night Market's own Venue section, which the client likes.
   What is taken is the TECHNIQUE, not the content, which is the distinction we already
   got wrong once on li.09:

     1. a small badge opens the section in place of an uppercase kicker line. Theirs is a
        fully rounded pill, which is their whole shape vocabulary (border-radius 9999px,
        16 instances measured). Ours is square, because that is OURS: every button, input
        and plate on this page is radius 0, and importing a pill would be borrowing their
        shape language rather than their idea.
     2. the place name is the headline. They run "Seminole Classic Casino" over a lighter
        "Hollywood, Florida"; we carry the region alone, since the venue is not ours to
        state and the card below already says the site is still being settled.
     3. the image and an information card sit SIDE BY SIDE at roughly equal weight,
        rather than the image sitting above the text.
     4. the card carries a call to action, so the section converts instead of only
        informing. Theirs is "Plan your visit".

   The one real inversion, and the reason this is not a copy: they lead with the specific
   venue because they have one. We do not, so the REGION carries the headline alone, since
   it is the only part of the answer that is confirmed. Their section announces a place.
   Ours states the one true thing and lets the card do the rest. */
.loc-badge{
  display:inline-flex;align-items:center;gap:var(--s-8);
  padding:var(--s-8) var(--s-16);border:1px solid currentColor;
  font-size:var(--fs-12);font-weight:600;letter-spacing:.08em;text-transform:uppercase;
}
/* Ground relative like everything else in this section: red on white is --red, red on
   black is --red-dark. 4.68:1 and 4.55:1 respectively. */
.loc-badge svg{width:13px;height:13px;display:block}
.t-w .loc-badge svg{fill:var(--red)}
.t-k .loc-badge svg{fill:var(--red-dark)}
.loc-head{margin-top:var(--s-24)}

.loc-split{margin-top:var(--s-64);display:grid;gap:var(--s-40);grid-template-columns:1fr;align-items:center}
.loc-map{position:relative}
.loc-map svg{width:100%;height:auto;display:block}  /* colour inherits from the tile, so
   the island is black on a white ground and white on a black one with no second rule */
/* The island is a filled silhouette, not a stroked outline. Stroking it would trace
   every inlet on the north shore and every barrier beach on the south, which at this
   size turns to noise. Solid black on white is also simply the page's palette. */
.loc-map .li-land{fill:currentColor;stroke:none}

/* Their card is dark on dark with an accent heading. Ours is ink on paper, which is the
   same move in our palette: the card is the only inverted surface in a white section, so
   it reads as a distinct object without needing a border, a shadow or a radius. */
/* The card is always the inverse of its section, so it stays the one flipped surface in
   the block and reads as a distinct object without a border, a shadow or a radius. */
.loc-card{padding:var(--s-40)}
.loc-card h3{font-size:var(--fs-17);font-weight:600;letter-spacing:.02em}
.loc-card p{margin-top:var(--s-16);max-width:46ch}
.loc-card .btn{margin-top:var(--s-32)}
.t-w .loc-card{background:var(--ink);color:var(--paper)}
.t-w .loc-card h3{color:var(--red-dark)}
.t-w .loc-card .btn{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.t-k .loc-card{background:var(--paper);color:var(--ink)}
.t-k .loc-card h3{color:var(--red)}
.t-k .loc-card .btn{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.loc-card .btn:hover{background:var(--red);color:var(--paper);border-color:var(--red)}

.loc-towns{
  margin-top:var(--s-64);padding-top:var(--s-32);
  border-top:1px solid var(--line);
  display:grid;gap:var(--s-32);grid-template-columns:1fr;
}
.loc-county{
  font-size:var(--fs-12);font-weight:600;letter-spacing:.08em;text-transform:uppercase;
}
.loc-list{
  margin-top:var(--s-16);font-size:var(--fs-17);color:var(--dim);
  columns:2;column-gap:var(--s-32);
}
.loc-list li{break-inside:avoid;padding-bottom:var(--s-8)}
@media (min-width:720px){
  .loc-towns{grid-template-columns:1fr 2fr;gap:var(--s-64)}
  .loc-list{columns:2}

  .loc-towns > :first-child .loc-list{columns:1}
}

.join-form{margin-top:var(--s-32);display:flex;flex-wrap:wrap;gap:var(--s-8);align-items:flex-end}
.join-field{display:flex;flex-direction:column;gap:var(--s-8);flex:1 1 220px;max-width:360px}
.join-field label{font-size:var(--fs-17)}
.join-field input{
  min-height:48px;width:100%;
  border:0;padding:var(--s-8) var(--s-16);
  font:inherit;color:var(--ink);background:var(--paper);
}
.join-field input::placeholder{color:var(--grey-light)}
.join-note{margin-top:var(--s-16);font-size:var(--fs-17)}

/* ---------------- footer, from neon-nocturne ---------------- */
footer{background:var(--ink);color:var(--paper);border-top:1px solid var(--line-dark);
  padding:var(--s-64) 0 var(--s-48)}
.foot-grid{display:flex;justify-content:space-between;gap:var(--s-48);flex-wrap:wrap}
.foot-grid > div > p{color:var(--grey-dark);font-size:var(--fs-17);max-width:36ch}
.foot-links{display:flex;flex-direction:column;font-size:var(--fs-17)}
.foot-links a{color:var(--grey-dark);text-decoration:none}
.foot-links a:hover{color:var(--red-dark)}
.foot-links .plain{color:var(--grey-dark);display:inline-flex;align-items:center;min-height:44px}
.foot-social{display:flex;gap:var(--s-8);margin-top:var(--s-8)}
.foot-social svg{width:20px;height:20px;fill:var(--grey-dark);transition:fill .2s ease-in}
.foot-social a:hover svg{fill:var(--red-dark)}
.fine-print{margin-top:var(--s-48);font-size:var(--fs-12);color:var(--grey-dark);max-width:none}

/* ---------------- responsive ---------------- */
/* Variant A only. Ranges do not overlap, so nothing needs resetting. At 320px the band
   is one column and the copy measure is the full container, so nothing can push the
   page wider. */
@media (min-width:600px) and (max-width:899px){
  .band{grid-template-columns:1fr 1fr}
  .cell{padding:var(--s-32) var(--s-24);border-top:1px solid var(--line)}
  .cell:first-child{grid-column:1 / -1;border-top:0}
  .cell:nth-child(even){border-left:0}
  .cell:nth-child(odd):not(:first-child){border-left:1px solid var(--line)}
}
@media (min-width:900px){
  .tile-pad{padding:var(--s-96) var(--s-64)}
  .signal-grid{grid-template-columns:2fr 1fr}
  .loc-split{grid-template-columns:1.55fr 1fr;gap:var(--s-48)}
  .loc-card{padding:var(--s-48)}
  .join-split{grid-template-columns:1fr 1fr;min-height:600px}
  .join-panel{padding:var(--s-96) var(--s-64)}
  .join-shot{min-height:0}
  /* Variant A. The band bleeds one gutter wider than the copy above it, so every cell
     keeps a 24px inset off its hairline while the first cell's text still lines up with
     the h2. -24px against the 64px tile inset, so it can never reach the viewport edge. */
  .band{grid-template-columns:repeat(6,1fr);margin-left:-24px;margin-right:-24px}
  .cell{
    padding:var(--s-48) var(--s-24);
    border-top:0;border-left:1px solid var(--line);
  }
  .cell:first-child{
    grid-column:span 2;
    border-left:0;padding-right:var(--s-48);
  }
  /* Variant B. The numeral hangs in its own margin column once there is room for one. */
  .bill-row{grid-template-columns:var(--s-128) 1fr;column-gap:var(--s-40);row-gap:0;padding:var(--s-40) 0 var(--s-48)}
  .bill-tag{grid-column:1;grid-row:1;padding-top:var(--s-8)}
  .bill-body{grid-column:2;grid-row:1}
}
@media (max-width:720px){
  nav.primary a:not(.btn){display:none}
  .strip .socials{display:none}
  .strip .wrap{justify-content:center;text-align:center}
  .join-form{flex-direction:column;align-items:stretch}
  /* The row layout gives the field flex:1 1 220px, where 220px is a basis on the MAIN
     axis. Turning the form into a column turns that main axis vertical, so the basis
     silently became a 220px minimum HEIGHT on a box whose content is about 80px, and
     the button was shoved down by roughly 140px of dead space. Reset the basis with the
     direction that created it. Nothing catches this: there is no overflow, contrast is
     unaffected, and the detector does not model flex axes, so it only shows up by
     looking at the page under 720px. */
  .join-field{max-width:none;flex:0 0 auto}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none !important;animation:none !important}
}

/* Added here, not in the source page: the button label is always one line, and its box
   cannot grow. Without this, "Join the list" wraps inside the 48px box. */
.btn{white-space:nowrap}