:root{
  --black:#070707;
  --off:#f2f0ea;
  --grey:#8a8680;
  --dim:#7d7871;    /* labels + metadata — holds 4.5:1 on the black at 10px */
  --quiet:#5f5a54;  /* recessed, but still readable: unplayed fixtures */
  --faint:#211f1d;  /* rules only — never type */

  /* ink for type sitting ON a photograph. never themed: the photographs stay
     dark whichever way the page goes, so this stays off-white in both. */
  --photo-ink:#f2f0ea;
  /* the colour a photograph's veil fades out to, as raw channels for rgba().
     it has to be the surface the picture sits on, or the two meet as a seam. */
  --veil-out:7,7,7;
  --gut:clamp(20px,4.4vw,72px);
  --maxw:1280px;   /* one column width for the whole site */
  --measure:92ch;  /* body measure — long lines, but the right margin holds */

  /* one family, four registers. the supporting face is still open with Clark,
     so nothing here commits to a second typeface. */
  --label:600 10px/1 "Archivo",system-ui,sans-serif;
  --ls-label:.24em;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--black);color:var(--off);
  font-family:"Archivo",system-ui,sans-serif;
  font-size:15px;line-height:1.8;font-weight:400;
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--off);outline-offset:3px}
/* the masthead is over the photograph, so its ring cannot follow the page ink */
.mast :focus-visible{outline-color:var(--photo-ink)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* every left edge on the site comes from here — text over a photograph is held
   to the same column as text on black, so nothing shifts sideways on scroll. */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}

/* ── registers ───────────────────────────────────────────────
   label     roman caps, letterspaced, small — furniture
   statement italic caps, letterspaced, small — on photographs only
   numeral   tabular figures — the only large type on the page
   prose     sentence case, 15px
   nothing on this page sets a large light sentence.            */
.label{font:var(--label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--dim)}
.statement{
  font-family:"Archivo",system-ui,sans-serif;font-style:italic;font-weight:600;
  font-size:clamp(11px,1.05vw,13px);letter-spacing:.16em;text-transform:uppercase;
  color:var(--photo-ink);   /* only ever set over a photograph */
}

/* ── masthead ────────────────────────────────────────────── */
/* the logotype sits on the page's centre line at every width. three columns
   rather than one centred cell, so the mark holds the centre line even if
   anything is ever placed either side of it again. */
.mast{
  position:absolute;top:0;left:0;right:0;z-index:10;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:26px var(--gut);
}
/* the logotype is the mast's only child — the site is one page, so there is
   no navigation and no surface switch. */
.mast>a{grid-column:2;justify-self:center}
.mast img{width:clamp(96px,11vw,132px);height:auto}
/* ── hero ────────────────────────────────────────────────── */
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden;background:var(--black)}
/* the opening frame is a photograph on one page and a video on the other;
   both fill the same box the same way, so the two pages open at one size. */
.hero>img,.hero>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
/* the water has no subject to hold, so it is centred rather than weighted low */
.hero>video{object-position:50% 50%}

/* ── the opening frame holds still ───────────────────────────
   the photograph is pinned to the viewport and the page rides up
   over it. NOT background-attachment:fixed — that is ignored or
   janks badly on iOS Safari, which is most of the audience.
   everything after the hero is given an opaque black ground so it
   covers the pinned image as it arrives.                        */
@media(prefers-reduced-motion:no-preference){
  .hero>img,.hero>video{position:fixed;top:0;left:0;height:100lvh}
  body>section,body>footer,body>.plate{position:relative;background:var(--black)}
}
/* the bottom of the veil has to REACH the surface, not stop just short of it.
   at .92 the photograph was still 8% visible at the edge and the next section
   was solid, so the two met as a hard line. full opacity by 94% gives the last
   few per cent as flat surface colour and the join disappears.
   the top stops stay black whatever the surface: the masthead sits up there
   and its logotype is white on both. */
.hero .veil{position:absolute;inset:0;background:
  linear-gradient(180deg,
    rgba(7,7,7,.66) 0,
    rgba(7,7,7,.06) 24%,
    rgba(7,7,7,0) 40%,
    rgba(var(--veil-out),.42) 60%,
    rgba(var(--veil-out),.78) 76%,
    rgba(var(--veil-out),.96) 88%,
    rgba(var(--veil-out),1) 94%)}
/* the opening sits three quarters down rather than on the floor, so there is
   photograph under it as well as over it. the veil's dark ramp is pulled up to
   match — the type still lands on the darkest part of the frame. */
.hero .foot{position:absolute;left:0;right:0;top:75%;
  max-width:var(--maxw);margin-inline:auto;
  padding:0 var(--gut)}
/* three quarters down only leaves a quarter of the frame for the block, which
   a one-line lede never fills and a paragraph does. narrow AND short is the
   case where it runs past the bottom of the hero — a paragraph wraps to six
   lines at phone width, and a short phone has no room for them below 75%.
   there, go back to sitting on the floor of the frame, which cannot overflow.
   deliberately requires both conditions: a 1280x720 desktop window is short
   but wide, so its lede is two lines and 75% still fits. */
@media(max-width:700px) and (max-height:760px){
  .hero .foot{top:auto;bottom:clamp(34px,7vh,72px)}
}
/* the opening now sits in the part of the frame the veil has taken all the way
   to the surface colour, so it takes the surface's ink rather than the
   photograph's — off-white on the black page, dark on the light one. */
.hero .label{color:color-mix(in srgb,var(--off) 62%,transparent);display:block;margin-bottom:14px}
/* kept to body size — it is a paragraph doing a job, not a display line. */
.hero .lede{font-size:clamp(15px,1.5vw,19px);line-height:1.55;letter-spacing:-.008em;
  max-width:var(--measure);color:color-mix(in srgb,var(--off) 84%,transparent)}
.hero .lede b{font-weight:400;color:var(--off)}

/* ── prose ───────────────────────────────────────────────── */
.pad{padding:clamp(64px,9vw,132px) 0}
.rule{border-top:1px solid var(--faint)}
/* a title always sits ABOVE its body, never beside it, and the body starts
   directly underneath. no side-column labels anywhere on the site. the rule
   under the label is the hairline already used between fixtures. */
.intro{display:block}
/* no rule under the title — the space does the separating. the margin carries
   what the dash and its two margins used to add up to, so the body starts
   exactly where it did before. */
.intro .lab{display:block;font:var(--label);letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--dim);line-height:1.7;margin-bottom:43px}
@media(max-width:760px){
  .intro .lab{margin-bottom:36px}
}
.prose{max-width:var(--measure)}
/* the body carries full ink and the title above it is the recessed one — the
   title is furniture naming the section, the writing is the thing to read. */
.prose p{color:var(--off);font-size:clamp(14px,1.1vw,16px);line-height:1.85}
.prose p+p{margin-top:1.5em}
.prose b{color:var(--off);font-weight:400}

/* ── season spine ─────────────────────────────────────────
   two shapes of row. a game with a film carries the date, the
   scoreline and the link. the other fourteen carry the number,
   the opponent and home or away — nothing else. no grounds on
   either: a ground is the one field nobody acts on, and it was
   what pushed the line onto a second row on a phone.
   both shapes share the same grid, so every column still lines
   up down the list.                                            */
.spine-h{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-bottom:clamp(26px,3vw,44px)}
.spine{list-style:none}
.row{
  display:grid;
  grid-template-columns:4.2ch minmax(0,1fr) 2ch minmax(0,1fr) 5.4ch 6.4ch;
  align-items:center;column-gap:clamp(12px,1.8vw,30px);
  min-height:56px;
  border-bottom:1px solid var(--faint);   /* a played game leaves a mark */
}
.row:first-child{border-top:1px solid var(--faint)}
.row.unplayed{border-bottom-color:transparent}   /* an unplayed one does not */

.no{font-size:clamp(15px,1.5vw,19px);font-weight:500;letter-spacing:.02em;color:var(--off)}
.opp{font:var(--label);letter-spacing:.2em;text-transform:uppercase;color:var(--off);
  font-size:clamp(10px,1vw,12px);white-space:normal}
.va,.dt{font:var(--label);font-style:normal;text-transform:uppercase;white-space:nowrap}
.va{letter-spacing:.1em;color:var(--quiet)}
.dt{letter-spacing:.18em;color:var(--dim);text-align:right}
.sc{font-size:clamp(15px,1.5vw,19px);font-weight:500;text-align:right;letter-spacing:.01em}
.sc i{font-style:normal;color:var(--dim);padding:0 .1em}

/* a scoreline only appears once the film is out — the video has already
   told you the result, so showing it here no longer spoils anything. */
.wr{text-align:right}
.watch{font:var(--label);letter-spacing:.18em;text-transform:uppercase;color:var(--off);
  border-bottom:1px solid var(--quiet);padding-bottom:3px;transition:border-color .2s}
.watch:hover,.watch:focus-visible{border-bottom-color:var(--off)}

/* an unplayed game is recessed, not hidden — it is still a real fixture
   somebody might want to read. the missing rule carries the meaning;
   the type only steps back one notch. */
.row.unplayed .no,.row.unplayed .opp,.row.unplayed .va{color:var(--quiet)}

/* the rest of the season, behind one click. the summary sits in the
   list's own rhythm — a row-height line with the same underlined word
   as Watch, so it reads as the one other thing you can do here. */
.more{margin-top:0}
.more>summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;
  min-height:56px;padding:0;
  font:var(--label);letter-spacing:.18em;text-transform:uppercase;color:var(--dim);
}
.more>summary::-webkit-details-marker{display:none}
.more>summary>span{border-bottom:1px solid var(--faint);padding-bottom:3px;
  transition:color .2s,border-color .2s}
.more>summary:hover>span,.more>summary:focus-visible>span{color:var(--off);border-bottom-color:var(--off)}
.more>summary:focus-visible{outline:none}
.more .cl,.more[open]>summary .op{display:none}
.more[open]>summary .cl{display:inline}
.rest .row:first-child{border-top:0}

/* on a phone the row keeps its shape: number and opponent on the left,
   home/away hard right. a row with a film gains a second line under the
   opponent for the date, and puts the score and the link beside it. */
@media(max-width:620px){
  .row{
    grid-template-columns:4.4ch minmax(0,1fr) auto auto;
    grid-template-areas:"no opp sc wr" "no dt dt va";
    align-items:start;row-gap:7px;padding:15px 0;min-height:0;
  }
  .no{grid-area:no}
  .opp{grid-area:opp}
  .sc{grid-area:sc}
  .wr{grid-area:wr}
  .dt{grid-area:dt;text-align:left;font-size:9px}
  .va{grid-area:va;text-align:right;font-size:9px}
  /* on a row with a film, home/away leads the date line rather than hanging
     on its own under the link — the two share the one cell. */
  .row.has .va{grid-area:dt;justify-self:start;text-align:left}
  .row.has .va::after{content:"·";padding-left:9px;color:var(--quiet)}
  .row.has .dt{padding-left:5.6ch}
  /* a row with no film has no second line — pull home/away up beside the name */
  .row:not(.has){grid-template-areas:"no opp opp va";align-items:center}
}

/* ── the films — a rail of episodes, carried like product ────
   the rail is full-bleed so cards run off the right edge, but
   its inline padding reproduces the .wrap column exactly, so the
   first card's left edge lands where every title does.
   the card is the whole link: the frame, the number and the
   opponent all sit inside the anchor, and "View now" is the same
   underlined word as Watch in the season rows — no button, no
   play triangle over the photograph.                            */
/* no top rule: this is the first section under the hero, and a hairline
   directly beneath a photograph reads as a seam. the section that follows
   carries the rule instead. */
.films{padding:clamp(64px,9vw,132px) 0}
.reel{
  list-style:none;display:flex;gap:clamp(14px,1.6vw,26px);
  padding-inline:max(var(--gut),calc((100vw - var(--maxw))/2 + var(--gut)));
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  scroll-padding-inline-start:max(var(--gut),calc((100vw - var(--maxw))/2 + var(--gut)));
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.reel::-webkit-scrollbar{display:none}
.film{flex:0 0 clamp(238px,25vw,352px);scroll-snap-align:start}
.film>a,.film>.fig{display:block}
.film .fig{display:block;aspect-ratio:4/5;overflow:hidden;background:var(--faint)}
.film .fig img{width:100%;height:100%;object-fit:cover;display:block}
.film .fl{display:flex;justify-content:space-between;align-items:baseline;
  gap:14px;margin-top:16px}
.film .no{font-size:clamp(15px,1.5vw,19px);font-weight:500;
  letter-spacing:.02em;color:var(--off)}
.film .run{font:var(--label);font-style:normal;letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--dim);white-space:nowrap}
.film .opp{display:block;margin-top:9px;font:var(--label);letter-spacing:.2em;
  text-transform:uppercase;color:var(--off);white-space:normal;overflow:visible}
.film .go{display:inline-block;margin-top:16px;font:var(--label);
  letter-spacing:.18em;text-transform:uppercase;color:var(--off);
  border-bottom:1px solid var(--quiet);padding-bottom:3px;
  transition:border-color .15s}
.film a:hover .go,.film a:focus-visible .go{border-bottom-color:var(--off)}
.film a:hover .fig img{filter:brightness(1.08)}
.film a:focus-visible{outline:1px solid var(--off);outline-offset:6px}
/* the game with no film is shown, not offered */
.film.soon .fig img{filter:brightness(.42) saturate(.7)}
.film.soon .no,.film.soon .opp{color:var(--quiet)}
.film.soon .run{color:var(--quiet)}

/* ── the trailer ─────────────────────────────────────────────
   the only embedded video on the site. it keeps the page's column
   and its left edge, so it reads as another block of the page
   rather than a widget dropped into it. hard edges — no rounded
   corner, no shadow. the player brings its own chrome and there is
   nothing to be done about that; everything around it stays quiet. */
/* words on the left, film on the right. the title still sits directly above
   its own body inside the left column — the rule that bans a heading in a
   left rail with the text down the right is not touched. the film is given
   the larger share: it is the thing being pointed at. */
.tsplit{
  margin-top:clamp(26px,3.4vw,44px);
  display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);
  gap:clamp(28px,3.4vw,56px);align-items:start;
}
.tube{position:relative;aspect-ratio:16/9;background:var(--faint)}
.tube iframe{width:100%;height:100%;border:0;display:block}
/* the poster stands in for the raw embed, which brings a red button and a
   second title nobody asked for. off-white ring, no fill, no shadow — the
   one thing on the page shaped like a control rather than type or a photo. */
.tube-play{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;
  cursor:pointer;background:none;display:block}
.tube-play img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .2s}
.tube-play:hover img{opacity:.86}
.tube-play .mark{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:clamp(52px,6vw,72px);height:clamp(52px,6vw,72px);
  border:1px solid var(--photo-ink);border-radius:50%;
  /* fixed black, not the themed surface — it sits on the photo, which stays
     dark whichever way the page goes, same reasoning as --photo-ink. */
  background:rgba(7,7,7,.55);
}
.tube-play .mark::after{
  content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);
  border-style:solid;border-width:9px 0 9px 14px;
  border-color:transparent transparent transparent var(--photo-ink);
}
.tube-play:hover .mark{border-color:var(--off)}
.tube-play:hover .mark::after{border-left-color:var(--off)}
/* below this the text column is too narrow to set a line in, so the two
   stack and the reading order — words, then film — is what carries. */
@media(max-width:860px){
  .tsplit{grid-template-columns:minmax(0,1fr);gap:clamp(24px,4vw,34px)}
}

/* ── plate ───────────────────────────────────────────────── */
/* the source frame is nearly half dead sky above the crossbar — a height
   this tall relative to the source barely cropped it, so the empty net was
   almost the whole shot. pinned to the source's own geometry instead of a
   viewport-height guess: at this aspect the box only ever shows the band
   from the crossbar down through the players, whatever width it renders at. */
/* width:100% is load-bearing here, not decoration. a block box with
   aspect-ratio set and no explicit width derives its width FROM the height
   once max-height clamps it, rather than filling the row — on a wide
   monitor the plate then falls short of the right edge and the pinned hero
   behind it shows through the gap. explicit width keeps it full-bleed
   whatever max-height does to the ratio. */
.plate{position:relative;width:100%;aspect-ratio:3/1;min-height:240px;max-height:520px;overflow:hidden}
.plate img{width:100%;height:100%;object-fit:cover;object-position:center 58%}
/* this one stays black on both surfaces. it darkens down into the black
   ground below it, and the caption sitting on it is off-white — fading it to
   a light surface instead would both wash the photograph out and take the
   caption with it. */
.plate .veil{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,7,7,.18) 0,rgba(7,7,7,0) 38%,rgba(7,7,7,.86) 100%)}
.plate .foot{position:absolute;left:0;right:0;bottom:0;
  max-width:var(--maxw);margin-inline:auto;
  padding:0 var(--gut) clamp(28px,4.4vh,52px)}
.plate .cap{display:block;margin-top:12px;font:var(--label);letter-spacing:var(--ls-label);
  text-transform:uppercase;color:color-mix(in srgb,var(--photo-ink) 46%,transparent)}

/* ── the list — the page's ending, and the only thing to act on ─
   the season carries no record block: results belong to the films,
   so the last thing on the page is the one thing you can do.      */
.f{display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--quiet);
  padding-bottom:12px;max-width:420px}
.f input{flex:1;min-width:0;background:none;border:0;color:var(--off);
  font-family:inherit;font-size:15px;padding:4px 0}
.f input::placeholder{color:var(--quiet)}
.f input:focus{outline:none}
.f:focus-within{border-bottom-color:var(--off)}
.f button{background:none;border:0;color:var(--off);cursor:pointer;
  font:var(--label);letter-spacing:var(--ls-label);text-transform:uppercase;padding:4px 0}
.f button:hover{color:var(--dim)}
.fine{margin-top:16px;font-size:12px;color:var(--quiet);line-height:1.7;max-width:44ch}
.note{margin-top:16px;font:var(--label);letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--dim)}
.note[hidden]{display:none}

/* ── the ground ────────────────────────────────────────────
   the list and the footer are black on both surfaces, and they run together
   as one block that closes the page. the footer is the sign-off and the one
   place the logotype sits on the page rather than on a photograph, so it
   holds the brand's default — white mark on black — whichever way the rest
   of the page goes. the dark values are redeclared here rather than written
   into each rule, so everything inside follows unchanged. */
footer{
  --black:#070707;
  --off:#f2f0ea;
  --grey:#8a8680;
  --dim:#7d7871;
  --quiet:#5f5a54;
  --faint:#211f1d;
  background:var(--black);
}
footer{padding:clamp(24px,3vw,36px) 0 clamp(40px,5vw,64px);border-top:1px solid var(--faint)}
.fbar{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap}
.fbar img{width:clamp(150px,26vw,300px);height:auto;opacity:.9}
/* the meta column, right-aligned against the logotype */
.fright{display:flex;flex-direction:column;align-items:flex-end}
.fmeta{text-align:right}
.fmeta a,.fmeta span{display:block;font:var(--label);letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--dim);line-height:2.3}
.fmeta a:hover{color:var(--off)}
@media(max-width:640px){.fmeta{text-align:left}}
/* below this the meta text is long enough that it can no longer share a row
   with the logo — but the star can. display:contents drops .fright's own
   box, promoting its two children to sit directly in .fbar's flex line, so
   the wrap breaks between the star and the text instead of before both:
   line one holds the logo and the star, line two holds the address alone. */
@media(max-width:640px){.fright{display:contents}}


/* ── second page ─────────────────────────────────────────────
   nothing left here: the Rapids page used to open shorter than the
   season page, because its portrait photograph could not hold a
   full-height box. the water is 16:9 and fills one, so both pages
   now open at the same size off the single .hero rule above. */


/* ── the 2027 notice ─────────────────────────────────────────
   an interruption, which is the one thing the brand is otherwise
   careful not to be — so it is made as quiet as the pattern allows:
   shown once, hard-edged, no rounding, no shadow, no colour of its
   own. the scrim is the page's own black, not a generic grey. */
.notice{
  position:fixed;inset:0;z-index:60;
  display:grid;place-items:center;
  padding:var(--gut);
  /* lighter than it was: the notice is glass now, and glass over a
     near-opaque scrim just blurs the scrim. this still dims the page
     enough to pull focus. */
  background:rgba(7,7,7,.55);
}
.notice[hidden]{display:none}
/* the box carries the dark values whatever surface the page is on:
   it sits over a scrim of the brand black, so light-mode ink inside
   it would be unreadable. same reasoning as the footer. */
.notice-box{
  --black:#070707;
  --off:#f2f0ea;
  --grey:#8a8680;
  --dim:#7d7871;
  --faint:#211f1d;
  position:relative;
  /* wide enough to hold the 2027 sentence on one line at this type size */
  width:min(100%,640px);
  background:var(--black);
  border:1px solid var(--faint);
  padding:clamp(28px,4vw,44px);
}
.notice-box .label{display:block;color:var(--off)}
.notice-box .say{
  margin-top:clamp(14px,1.8vw,20px);
  font-size:clamp(15px,1.5vw,17px);line-height:1.55;color:var(--off);
}
.notice-box .f{margin-top:clamp(20px,2.6vw,28px)}
.notice-x{
  position:absolute;top:10px;right:14px;
  background:none;border:0;padding:6px;cursor:pointer;
  font:400 20px/1 "Archivo",system-ui,sans-serif;
  color:var(--dim);transition:color .2s;
}
.notice-x:hover{color:var(--off)}

/* ── the demoted state ───────────────────────────────────────
   dismissing the notice does not delete it, it shrinks it to this.
   fixed to the top of the frame and dark on both surfaces, so it
   reads as browser furniture rather than as part of the page. */
.noticebar{
  position:fixed;top:0;left:0;right:0;z-index:55;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  width:100%;padding:11px var(--gut);
  background:#070707;border:0;border-bottom:1px solid #211f1d;
  cursor:pointer;text-align:left;
  font:var(--label);letter-spacing:var(--ls-label);text-transform:uppercase;
  color:#7d7871;transition:color .2s;
}
.noticebar[hidden]{display:none}
.noticebar:hover{color:#f2f0ea}
.noticebar-go{color:#f2f0ea;border-bottom:1px solid transparent;padding-bottom:2px}
.noticebar:hover .noticebar-go{border-bottom-color:#f2f0ea}
/* the masthead sits at the top of the hero, so the bar would cover it.
   push the mast down by exactly the bar's height while it is up. */
html.has-noticebar .mast{top:var(--noticebar-h,38px)}
/* the bar is one line or it is not a bar. below this width both halves
   wrap and it doubles in height, so the descriptive halves drop and it
   falls back to "Coming 2027" and "Join". */
.noticebar{white-space:nowrap}
@media(max-width:600px){.bar-more{display:none}}


/* ── notice: the picture ─────────────────────────────────────
   the image is full-bleed inside the box and the type sits straight
   on it — no gradient behind the words, since the rule against
   gradients on type still stands. legibility comes from the flat
   wash below, not from anything applied to the type itself.
   a warm orange variant was built alongside this and not taken. */
.notice-box{background-size:cover;background-repeat:no-repeat}

/* ── liquid glass ────────────────────────────────────────────
   the box has no surface of its own: it blurs the live page behind
   it, which on this site is moving water, so the panel moves with it.
   the edge is a specular gradient catching light on opposite corners,
   plus a hairline along the top inside face — the only soft edge and
   the only gradient anywhere on the site, chosen deliberately over
   the hard-edge rule because a glass panel with a hard edge is not
   glass. logged in docs/decisions.md. */
.notice-box.n-dark{
  background-color:rgba(22,22,26,.34);
  background-image:none;
  backdrop-filter:blur(26px) saturate(1.5) brightness(1.05);
  -webkit-backdrop-filter:blur(26px) saturate(1.5) brightness(1.05);
  border:1px solid transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(255,255,255,.06);
}
.notice-box.n-dark::after{
  content:"";position:absolute;inset:0;pointer-events:none;padding:1px;
  background:linear-gradient(135deg,rgba(255,255,255,.55),rgba(255,255,255,.04) 38%,
    rgba(255,255,255,.03) 62%,rgba(255,255,255,.40));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
/* glass needs something behind it to be glass. where the browser cannot
   blur, or where the reader has asked for less transparency, it falls
   back to the solid panel rather than a murky half-lit one. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .notice-box.n-dark{background-color:#0d0d10;border-color:rgba(242,240,234,.16)}
}
@media(prefers-reduced-transparency:reduce){
  .notice-box.n-dark{
    background-color:#0d0d10;backdrop-filter:none;-webkit-backdrop-filter:none;
    border-color:rgba(242,240,234,.16);box-shadow:none;
  }
  .notice-box.n-dark::after{display:none}
}