/* C1c - the front door. Composes the shared tokens (screens/shared/ro-tokens.css)
   and invents no value: colour, type sizes and spacing are all token steps.
   Flat, committed red at the top, one shared left edge, sentence case. */
body{background:var(--ro-paper);color:var(--ro-ink)}
.fd-wrap{max-width:1040px;margin:0 auto;padding:0 var(--s2)}
@media (min-width:577px){.fd-wrap{padding:0 var(--s4)}}

/* the committed red block: eyebrow, title, meta, one left edge */
.fd-flood{background:var(--ro-red);color:var(--ro-paper);padding:var(--s6) 0 var(--s5)}
.fd-eyebrow{font-size:14px;font-weight:700;letter-spacing:.06em;margin:0 0 var(--s2)}
.fd-flood h1{font-size:var(--fs-4);line-height:1.0;letter-spacing:-0.015em;margin:0 0 var(--s2);
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1)}
/* X37: the wordmark's own transparent margin is its clear space, so the box
   (wordmark.css) is sized and the ink lines up with the block's left edge. On
   a phone the title wraps below the mark; the row gap gives back the 8px the
   box's negative margin lends the bar, so the title never sits in the mark's
   clear space. */
@media (min-width:720px){.fd-flood h1{font-size:var(--fs-5)}}
.fd-meta{font-size:var(--fs-1);font-weight:700;margin:0}
.fd-sep{display:none}
@media (min-width:577px){.fd-sep{display:inline}.fd-br{display:none}}
.fd-when{font-size:var(--fs-1);margin:var(--s3) 0 0}
/* W2 item 2: the one-line purpose, the red block's last line, white on red like the rest of it; it wraps in the column */
.fd-purpose{font-size:var(--fs-1);max-width:60ch;margin:var(--s3) 0 0}

/* bands */
.fd-section{padding:var(--s5) 0}
.fd-section + .fd-section{border-top:1px solid var(--ro-line)}
.fd-section h2{font-size:var(--fs-3);line-height:1.1;margin:0 0 var(--s2)}
.fd-section p{max-width:60ch;margin:0 0 var(--s3)}

/* the three events: the name in bold, and under it (W2 item 2) one plain line of what it is, at the body size */
.fd-events{margin:0 0 var(--s3);padding:0 0 0 var(--s3);font-size:var(--fs-1);font-weight:700}
.fd-events li{padding:var(--s1) 0}
.fd-events b{display:block}
.fd-events span{display:block;max-width:60ch;font-size:var(--fs-0);font-weight:400;margin-top:4px}
.fd-facts{display:grid;gap:var(--s2);grid-template-columns:1fr;margin:0}
@media (min-width:577px){.fd-facts{grid-template-columns:1fr 1fr}}
.fd-facts dt{font-size:14px;font-weight:700;color:var(--ro-dim);margin:0}
.fd-facts dd{margin:0;font-weight:700}

/* links: red means interactive, so the red here is only ever a link */
.fd-links{display:grid;gap:var(--s2);grid-template-columns:1fr}
@media (min-width:720px){.fd-links{grid-template-columns:1fr 1fr}}
.fd-link{display:block;min-height:var(--s6);padding:var(--s2) var(--s3);border-radius:var(--radius-sm);
  background:var(--ro-red);color:var(--ro-paper);text-decoration:none}
.fd-link b{display:block;font-size:var(--fs-1);font-weight:900;line-height:1.2}
.fd-link span{display:block;font-size:14px;margin-top:4px}
.fd-link:hover{background:var(--ro-red-2)}
/* W2 item 2, review: a door front.js hides (the try door, #try-door, from 14:00 on the day) must go; the display:block above would
   otherwise override the hidden attribute */
.fd-link[hidden]{display:none}
.fd-link:focus-visible{outline:3px solid var(--ro-ink);outline-offset:2px}

.fd-foot{border-top:1px solid var(--ro-line);padding:var(--s3) 0 var(--s5);color:var(--ro-dim);font-size:14px}
.fd-foot p{margin:0}
/* the footer's link is a control too, so it is at least 44 px tall like every other one on the page (review, 15 Oct:
   the volunteer link was 18 px, the one control under 44 px on the four public pages) */
.fd-foot a{display:inline-flex;align-items:center;min-height:44px}
/* F4b: the rehearsal line (athlete/day.js), the athlete and results pages' yellow strip, on the red block */
.fd-rehearsal{width:fit-content;max-width:100%;margin:0 0 var(--s3);padding:4px var(--s2);background:var(--ro-yellow);color:var(--ro-ink);font-weight:900}
/* Come and Try (15 Oct, R55): the band under the red block, a neutral strip with a bold line and the red link
   button (red is only ever a link here), shown by front.js while the invite is open. R152 (19 Oct): the entry line
   (RegattaCentral) is the same strip above it, shown while entries are open; no width is fixed, so both wrap inside
   the padded column at 375 and 320 px, and neither sets display (the hidden attribute must win). With both shown,
   the entry line's own bottom padding is the gap between them */
.fd-try,.fd-entry{background:var(--ro-neutral);padding:var(--s3) 0}
.fd-entry:not([hidden]) + .fd-try{padding-top:0}
.fd-try__line,.fd-entry__line{max-width:60ch;margin:0 0 var(--s2);font-weight:700}
.fd-try .fd-link,.fd-entry .fd-link{display:inline-block}

/* C5 (4 Nov, ruling 109): the Schedule section. Its components are /schedule/'s own stylesheet (schedule.css, loaded after this one); here only
   what the front door's column changes. The section's paragraph rule (.fd-section p) is wider than the schedule's own classes, so the
   lines the schedule writes say their margins again. The sticky "next on the ergs" box sticks to the top of the screen inside this
   section and is as wide as the column. */
html{scroll-padding-top:8rem}
#schedule .sp-next{margin:0 0 var(--s2);padding:var(--s1) var(--s2)}
#schedule .sp-lead__line{max-width:none;margin:0 0 var(--s1)}
#schedule .sp-updated{max-width:none;margin:0 0 var(--s2)}
#schedule .sp-found{max-width:none;margin:4px 0 0}
#schedule .sp-next__line{max-width:none;margin:4px 0 0}
#schedule .sp-next__line:first-child{margin-top:0}
#schedule .sp-wave__time{max-width:none;margin:0}
#schedule .sp-wave__note,#schedule .sp-event__sub{max-width:none}
#schedule .sp-wave__note{margin:var(--s1) 0 0}
#schedule .sp-event__sub{margin:0}