/* =========================================================================
   THE FORGE LEDGER — "shop ledger" design system, prefix fl-
   Vocabulary of the forge: hearth (content bank = usable width), faceplate
   (masthead), chest (nav), coverplate (cover band with photograph), heat
   (numbered section), billet (card), label (card caption), ledger/outlet
   (dated feed), preamble (article head), workboard (lead image), shaft
   (reading column), logbook (table), station (dark data block), sidenote
   (aside), drift (read next), index (footer), punchmark (inline SVG glyphs),
   scrollwork (rule separator), tang (breadcrumb).
   Palette: forge-scale blue-black + quench grey + hot iron orange on bone.
   No green, no remote font, no gradient device. Automatic dark mode.
   ========================================================================= */

:root {
  color-scheme: light dark;

  /* ---- 1. COULEURS · la riviere et le sheet --------------------------- */
  --sheet:        #f3f1ec;  /* bone paper of the ledger           */
  --sheet-sunken:  #e4e1d8;  /* reserves, alternated sections              */
  --sheet-live:    #fbfaf7;  /* lightest reserve, sidenotes, even table rows   */
  --soot:         #1c2026;  /* scale blue-black ink: text                     */
  --soot-night:    #14181e;  /* forge night: header, footer, stations     */
  --soot-soft:   #5c646e;  /* quench grey: captions, meta, standfirst         */
  --verdigris:         #9a3b12;  /* rust red: links, strong (>=4.5:1)      */
  --verdigris-deep:   #782d0c;  /* pressed / hover                            */
  --ember:          #b06a12;  /* hot iron orange: accent, drop caps, stamps */
  --ember-light:    #e0a457;  /* ochre on night grounds                     */
  --cinder:         #8b8f96;  /* cold steel: quiet cues                  */
  --rule:         #d2cfc6;  /* hairline on paper                          */
  --rule-night:    #333a44;  /* hairline on night                          */

  /* Dark mode: the same ledger read by the light of the fire. */
  --night-sheet:   #14171c;
  --night-sunken:    #1c2027;
  --night-live:      #232830;
  --night-text:    #e7e9ec;
  --night-soft:     #a3a9b3;

  /* ---- 2. TYPE · system stacks, nothing fetched ------------------------ */
  --face-heading: Superclarendon, "Rockwell Nova", Rockwell, "Zilla Slab", "Roboto Slab", "Bitstream Charter", Georgia, serif;
  --face-text: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, "DejaVu Sans", sans-serif;

  --heading-weight: 700;
  --heading-track: -0.006em;
  --caps-tracking: 0.13em;

  --body-size: clamp(1.02rem, 0.97rem + 0.22vw, 1.13rem);
  --body-lead: 1.64;
  --scale-h1: clamp(2.3rem, 1.1rem + 4.1vw, 4.6rem);
  --scale-h2: clamp(1.5rem, 1.1rem + 1.5vw, 2.3rem);
  --scale-h3: clamp(1.13rem, 1.02rem + 0.55vw, 1.44rem);
  --scale-h4: 1.05rem;

  /* ---- 3. RYTHME --------------------------------------------------------- */
  --measure:        56rem;
  --measure-wide:  1360px;
  --margin-page:    clamp(1.1rem, 4vw, 4rem);
  --gutter:     clamp(0.9rem, 2.2vw, 2rem);
  --bellows:       clamp(2.4rem, 5.5vw, 5.2rem);
  --offset-h:      clamp(1.2rem, 3vw, 3.2rem);

  /* ---- 4. DETAILS --------------------------------------------------------- */
  --corner:       2px;
  --rule-thin:   1px solid var(--rule);
  --ease:     150ms ease;
}

@media (prefers-color-scheme: dark) {
  :root {
    --sheet:       var(--night-sheet);
    --sheet-sunken: var(--night-sunken);
    --sheet-live:   var(--night-live);
    --soot:        var(--night-text);
    --soot-soft:  var(--night-soft);
    --verdigris:        #a5c98f;
    --verdigris-deep:  #c0dcae;
    --ember:         var(--ember-light);
    --cinder:        #7d8271;
    --rule:        #3c4433;
  }
}

/* =========================================================================
   BASE
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--sheet);
  color: var(--soot);
  font-family: var(--face-text);
  font-size: var(--body-size);
  line-height: var(--body-lead);
  overflow-wrap: break-word;
}
img, svg { max-width: 100%; height: auto; display: block; }
svg.fl-punchmark { display: inline-block; vertical-align: -0.12em; }

h1, h2, h3, h4 {
  font-family: var(--face-heading);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-track);
  line-height: 1.14;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--scale-h1); }
h2 { font-size: var(--scale-h2); }
h3 { font-size: var(--scale-h3); }
h4 { font-size: var(--scale-h4); }

p, ul, ol { margin: 0 0 1.12em; }
a {
  color: var(--verdigris);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--ease);
}
a:hover { color: var(--verdigris-deep); }
:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 3px;
  border-radius: 1px;
}
hr { border: 0; border-top: var(--rule-thin); margin: var(--bellows) 0; }

::selection { background: var(--ember); color: #fbf8ec; }

/* Measurements: temperatures, sizes, dates read in tabular numerals. */
.fl-logbook, .fl-station, .fl-sidenote, .fl-dateline, .fl-mentions,
.fl-heat__number, .fl-coverplate__issue {
  font-variant-numeric: tabular-nums;
}

/* =========================================================================
   SCAFFOLD
   ========================================================================= */

/* Skip link. Never remove. */
.fl-bypass {
  position: absolute; left: -9999px; top: 0;
  background: var(--soot-night); color: var(--night-text);
  padding: 0.7rem 1.15rem; z-index: 60;
}
.fl-bypass:focus { left: 0.6rem; top: 0.6rem; }

/* The hearth: useful width of every content zone. */
.fl-hearth {
  width: 100%;
  max-width: var(--measure-wide);
  margin-inline: auto;
  padding-inline: var(--margin-page);
}
.fl-forgefloor { display: block; }

/* --- Faceplate (the notebook's cover, header) --------------------------- */
.fl-faceplate {
  background: var(--soot-night);
  color: var(--night-text);
  border-bottom: 3px double var(--ember-light);
  padding-block: clamp(0.8rem, 1.7vw, 1.2rem);
}
.fl-faceplate__row {
  display: flex; flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem 1.6rem;
}
.fl-faceplate__word {
  font-family: var(--face-heading);
  font-size: clamp(1.32rem, 1.1rem + 1vw, 1.95rem);
  color: var(--night-text);
  text-decoration: none;
  letter-spacing: 0.01em;
}
.fl-faceplate__word:hover { color: #fff; }
.fl-faceplate__word span {
  display: block;
  font-family: var(--face-text);
  font-size: 0.62rem;
  letter-spacing: var(--caps-tracking);
  text-transform: uppercase;
  color: var(--ember-light);
  margin-top: 0.34rem;
}
.fl-chest ul {
  display: flex; flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  list-style: none; margin: 0; padding: 0;
}
.fl-chest a {
  color: var(--night-soft);
  text-decoration: none;
  font-size: 0.85rem;
  letter-spacing: 0.045em;
  padding-block: 0.25rem;
  transition: color var(--ease);
}
.fl-chest a:hover { color: var(--ember-light); }

/* --- Fil (breadcrumb) ------------------------------------------------------ */
.fl-tang { padding-block: clamp(0.85rem, 1.8vw, 1.3rem); }
.fl-tang ol {
  display: flex; flex-wrap: wrap;
  gap: 0.35rem 0.6rem;
  list-style: none; margin: 0; padding: 0;
  font-size: 0.8rem;
  color: var(--soot-soft);
}
.fl-tang li + li::before {
  content: "›";
  margin-right: 0.55rem;
  color: var(--ember);
}
.fl-tang a { color: var(--soot-soft); }
.fl-tang a:hover { color: var(--verdigris); }
.fl-tang [aria-current="page"] { color: var(--soot); font-weight: 600; }

/* =========================================================================
   COVERPLATE · the home hero, a pure typographic title page like a
   naturalist's journal: rules above and below, centered composition,
   deliberately short so the reaches grid starts above the fold.
   ========================================================================= */

.fl-coverplate { border-bottom: var(--rule-thin); }
.fl-coverplate__frame {
  border-top: 3px double var(--ember);
  border-bottom: 3px double var(--ember);
  text-align: center;
  max-width: 64rem;
  margin-inline: auto;
  padding: clamp(2rem, 4.6vw, 3.4rem) var(--margin-page) clamp(1.8rem, 4.2vw, 3rem);
}
.fl-coverplate__eyebrow {
  display: flex; align-items: center; justify-content: center;
  gap: 0.8rem;
  font-size: 0.74rem;
  letter-spacing: var(--caps-tracking);
  text-transform: uppercase;
  color: var(--ember);
  margin: 0 0 1.1rem;
}
.fl-coverplate__eyebrow::before, .fl-coverplate__eyebrow::after {
  content: "";
  width: clamp(2rem, 6vw, 4.5rem);
  border-top: 1px solid currentColor;
  opacity: 0.65;
}
.fl-coverplate__eyebrow .fl-punchmark { color: var(--cinder); }
.fl-coverplate h1 {
  max-width: 21ch;
  margin-inline: auto;
  color: var(--soot);
}
.fl-coverplate__subhead {
  font-size: clamp(1rem, 0.94rem + 0.34vw, 1.19rem);
  line-height: 1.58;
  max-width: 60ch;
  margin: 1.05rem auto 0;
  color: var(--soot-soft);
  text-wrap: pretty;
}
.fl-coverplate__issue {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 0.55rem 1.1rem;
  margin: 1.5rem auto 0;
  max-width: 46rem;
  border-top: var(--rule-thin);
  padding-top: 0.85rem;
  font-size: 0.76rem;
  letter-spacing: var(--caps-tracking);
  text-transform: uppercase;
  color: var(--cinder);
}
.fl-coverplate__issue .fl-punchmark { color: var(--ember); }
.fl-coverplate__issue em {
  font-style: normal;
  color: var(--soot);
  letter-spacing: 0.08em;
}

/* =========================================================================
   HEAT (sections), numbered 01 to 06
   ========================================================================= */

.fl-heat { padding-block: clamp(1.9rem, 4.4vw, 3.6rem); }
.fl-heat--sunken { background: var(--sheet-sunken); }
.fl-heat__crown {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem 2rem;
  border-bottom: var(--rule-thin);
  padding-bottom: 0.6rem;
  margin-bottom: clamp(1.2rem, 2.6vw, 1.9rem);
}
.fl-heat__number {
  font-family: var(--face-text);
  font-size: 0.78rem;
  letter-spacing: 0.3em;
  color: var(--ember);
  margin-right: 0.7rem;
}
.fl-heat__heading { font-size: var(--scale-h2); }
.fl-heat__sidenote {
  margin: 0;
  color: var(--soot-soft);
  font-size: 0.92rem;
  max-width: 42ch;
}

/* Scrollwork: a rule separator between the great sections. */
.fl-scrollwork {
  display: flex;
  justify-content: center;
  padding-block: clamp(0.4rem, 1.2vw, 1rem);
  color: var(--cinder);
}

/* Stamp: small-caps kicker above titles. */
.fl-stamp {
  font-size: 0.73rem;
  letter-spacing: var(--caps-tracking);
  text-transform: uppercase;
  color: var(--ember);
  margin: 0 0 0.55rem;
}

/* =========================================================================
   BILLETS · asymmetric observation-card mosaic
   ========================================================================= */

.fl-billets {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--gutter);
  list-style: none; margin: 0; padding: 0;
}
.fl-billet { margin: 0; }
.fl-billet--full   { grid-column: span 6; }
.fl-billet--wide   { grid-column: span 4; }
.fl-billet--half  { grid-column: span 3; }
.fl-billet--small   { grid-column: span 2; }
.fl-billet--offset  { transform: translateY(var(--offset-h)); }
.fl-billet--offset2 { transform: translateY(calc(var(--offset-h) * 0.5)); }
.fl-billets--packed { padding-bottom: var(--offset-h); }

.fl-billet__frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--corner);
  border: var(--rule-thin);
  background: var(--sheet-sunken);
}
/* The scale tint rises on hover; the link stays on the title. */
.fl-billet__frame::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(30, 34, 26, 0) 58%, rgba(30, 34, 26, 0.28));
  opacity: 0;
  transition: opacity var(--ease);
}
.fl-billet:hover .fl-billet__frame::after,
.fl-billet:focus-within .fl-billet__frame::after { opacity: 1; }
.fl-billet__frame--panorama     { aspect-ratio: 21 / 9; }
.fl-billet__frame--landscape  { aspect-ratio: 4 / 3; }
.fl-billet__frame--square    { aspect-ratio: 1 / 1; }
.fl-billet__frame--upright { aspect-ratio: 3 / 4; }
.fl-billet__frame--tall     { aspect-ratio: 2 / 3; }
.fl-billet__view {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 320ms ease;
}
.fl-billet:hover .fl-billet__view { transform: scale(1.02); }

.fl-billet__label { padding-top: 0.7rem; }
.fl-billet__heading { margin: 0 0 0.3rem; }
.fl-billet__link {
  color: var(--soot);
  text-decoration: none;
  background-image: linear-gradient(var(--ember), var(--ember));
  background-size: 0% 2px;
  background-repeat: no-repeat;
  background-position: 0 96%;
  transition: background-size var(--ease), color var(--ease);
}
.fl-billet__link:hover { color: var(--ember); background-size: 100% 2px; }
.fl-billet__sidenote {
  margin: 0;
  color: var(--soot-soft);
  font-size: 0.92rem;
  line-height: 1.5;
}
.fl-billet__cue {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.71rem;
  letter-spacing: var(--caps-tracking);
  text-transform: uppercase;
  color: var(--cinder);
  border: 1px solid currentColor;
  border-radius: var(--corner);
  padding: 0.14rem 0.5rem;
}

/* =========================================================================
   LE JOURNAL · the dated outing log on the home
   ========================================================================= */

.fl-journal {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: calc(var(--gutter) * 1.5);
}
.fl-outlet {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 1.05rem;
  padding-block: 1.1rem;
  border-bottom: var(--rule-thin);
  margin: 0;
}
.fl-journal .fl-outlet:nth-last-child(-n+2) { border-bottom: 0; }
.fl-outlet__view {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--corner);
  border: var(--rule-thin);
}
.fl-dateline {
  margin: 0 0 0.3rem;
  font-size: 0.73rem;
  letter-spacing: var(--caps-tracking);
  text-transform: uppercase;
  color: var(--ember);
}
.fl-outlet h3 { margin: 0 0 0.3rem; }
.fl-outlet h3 a { color: var(--soot); text-decoration: none; }
.fl-outlet h3 a:hover { color: var(--verdigris); text-decoration: underline; }
.fl-outlet p { margin: 0; color: var(--soot-soft); font-size: 0.93rem; }

/* =========================================================================
   ARTICLES · preamble, workboard, shaft
   ========================================================================= */

.fl-preamble {
  padding-block: clamp(0.4rem, 1.5vw, 1.1rem) clamp(1.3rem, 3vw, 2.1rem);
  max-width: 56rem;
}
.fl-preamble__standfirst {
  font-size: clamp(1.08rem, 1rem + 0.5vw, 1.32rem);
  line-height: 1.55;
  color: var(--soot-soft);
  max-width: 58ch;
  margin: 0.9rem 0 0;
}
.fl-mentions {
  display: flex; flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  list-style: none; margin: 1.05rem 0 0; padding: 0;
  font-size: 0.81rem;
  color: var(--soot-soft);
  border-top: var(--rule-thin);
  padding-top: 0.8rem;
}
.fl-mentions a { color: var(--soot-soft); }
.fl-mentions a:hover { color: var(--verdigris); }

.fl-workboard { margin: 0; }
.fl-workboard__view {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--corner);
  border: var(--rule-thin);
}

.fl-shaft {
  max-width: var(--measure);
  padding-block: clamp(1.5rem, 3.4vw, 2.5rem) clamp(1.9rem, 4.4vw, 3.2rem);
}
.fl-shaft > * + * { margin-top: 0.9em; }
.fl-shaft h2 {
  margin-top: 1.75em;
  padding-bottom: 0.26rem;
  border-bottom: var(--rule-thin);
}
.fl-shaft h3 { margin-top: 1.35em; }
.fl-shaft ul, .fl-shaft ol { padding-left: 1.4rem; }
.fl-shaft li + li { margin-top: 0.45em; }
.fl-shaft strong { color: var(--verdigris-deep); }
@media (prefers-color-scheme: dark) {
  .fl-shaft strong { color: #c0dcae; }
}

/* Drop cap: the opening letter of an entry, in hot iron orange. */
.fl-shaft > p:first-of-type::first-letter {
  font-family: var(--face-heading);
  font-weight: 600;
  float: left;
  font-size: 3.05em;
  line-height: 0.82;
  padding-right: 0.12em;
  padding-top: 0.06em;
  color: var(--ember);
}

/* Sidenote: a field sidenote boxed on lighter paper. */
.fl-sidenote {
  margin: 1.7em 0;
  background: var(--sheet-live);
  border: var(--rule-thin);
  border-left: 3px solid var(--verdigris);
  border-radius: var(--corner);
  padding: 1rem 1.25rem;
  font-size: 0.96em;
}
.fl-sidenote h4 {
  font-family: var(--face-text);
  font-size: 0.78rem;
  letter-spacing: var(--caps-tracking);
  text-transform: uppercase;
  color: var(--verdigris);
  margin: 0 0 0.5rem;
}
.fl-sidenote p, .fl-sidenote ul { margin: 0; }
.fl-sidenote p + p, .fl-sidenote ul { margin-top: 0.5rem; }
.fl-sidenote strong { color: var(--verdigris-deep); }

/* Station: the data post, willow night ground, ochre heading, tabular data. */
.fl-station {
  margin: 1.7em 0;
  background: var(--soot-night);
  color: var(--night-text);
  border-radius: var(--corner);
  padding: 1.15rem 1.3rem 1.25rem;
  border: 1px solid var(--rule-night);
}
.fl-station h2, .fl-station h3, .fl-station h4 {
  font-family: var(--face-text);
  font-size: 0.78rem;
  letter-spacing: var(--caps-tracking);
  text-transform: uppercase;
  color: var(--ember-light);
  margin: 0 0 0.7rem;
  border: 0;
  padding: 0;
}
.fl-station p, .fl-station ul { margin: 0; font-size: 0.95rem; color: var(--night-text); }
.fl-station strong { color: #fff; font-variant-numeric: tabular-nums; }
.fl-station p + p, .fl-station ul { margin-top: 0.5rem; }

/* Logbook: the measurement table, notebook style. */
.fl-logbook {
  overflow-x: auto;
  margin: 1.5em 0;
  border: var(--rule-thin);
  border-radius: var(--corner);
}
.fl-logbook table {
  border-collapse: collapse;
  width: 100%;
  min-width: 34rem;
  font-size: 0.92em;
}
.fl-logbook th, .fl-logbook td {
  text-align: left;
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.fl-logbook caption {
  caption-side: top;
  text-align: left;
  padding: 0.6rem 0.85rem;
  font-size: 0.76rem;
  letter-spacing: var(--caps-tracking);
  text-transform: uppercase;
  color: var(--ember);
  border-bottom: 1px solid var(--rule);
}
.fl-logbook thead th {
  background: var(--soot-night);
  color: var(--night-text);
  font-size: 0.76rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 600;
  font-family: var(--face-text);
}
.fl-logbook tr:last-child td { border-bottom: 0; }
.fl-logbook tbody tr:nth-child(even) { background: var(--sheet-live); }

/* Pullquote: a quotation set off by the ochre rule. */
.fl-pullquote {
  margin: 1.6em 0;
  padding: 0.2rem 0 0.2rem 1.4rem;
  border-left: 3px solid var(--ember);
  font-family: var(--face-heading);
  font-size: 1.15em;
  color: var(--verdigris-deep);
}
@media (prefers-color-scheme: dark) { .fl-pullquote { color: #c0dcae; } }

/* Drift: read next, the drift carries on. */
.fl-drift {
  margin-top: 2.3em;
  padding-top: 1.15rem;
  border-top: 3px double var(--rule);
}
.fl-drift h2 {
  font-size: 1.18rem;
  border-bottom: 0;
  margin: 0 0 0.55rem;
}
.fl-drift ul { list-style: none; margin: 0; padding: 0; }
.fl-drift li { padding: 0.3rem 0; }
.fl-drift li::before {
  content: "·";
  color: var(--ember);
  margin-right: 0.55rem;
  font-weight: 700;
}

/* =========================================================================
   L'INDEX (footer)
   ========================================================================= */

.fl-index {
  margin-top: var(--bellows);
  background: var(--soot-night);
  color: var(--night-text);
  border-top: 3px double var(--ember-light);
}
.fl-index__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--gutter) * 1.5);
  padding-block: clamp(1.9rem, 4.4vw, 3rem);
}
.fl-index h2 {
  font-family: var(--face-text);
  font-size: 0.78rem;
  letter-spacing: var(--caps-tracking);
  text-transform: uppercase;
  color: var(--ember-light);
  margin-bottom: 0.7rem;
}
.fl-index ul { list-style: none; margin: 0; padding: 0; }
.fl-index li { padding-block: 0.22rem; }
.fl-index a { color: var(--night-soft); text-decoration: none; transition: color var(--ease); }
.fl-index a:hover { color: var(--ember-light); text-decoration: underline; }
.fl-index__foot {
  border-top: 1px solid var(--rule-night);
  padding-block: 1.05rem;
  font-size: 0.79rem;
  color: var(--night-soft);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.55rem 0.9rem;
}
.fl-index__foot .fl-punchmark { color: var(--ember-light); }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */

@media (max-width: 1080px) {
  .fl-billet--wide  { grid-column: span 6; }
  .fl-billet--half { grid-column: span 3; }
  .fl-billet--small  { grid-column: span 3; }
  .fl-billet--offset, .fl-billet--offset2 { transform: none; }
  .fl-billets--packed { padding-bottom: 0; }
}

@media (max-width: 760px) {
  .fl-billets { grid-template-columns: repeat(2, 1fr); }
  .fl-billet--wide, .fl-billet--half, .fl-billet--small { grid-column: span 2; }
  .fl-journal { grid-template-columns: 1fr; }
  .fl-outlet { grid-template-columns: 118px 1fr; }
  .fl-index__row { grid-template-columns: 1fr; }
  .fl-heat__crown { flex-direction: column; gap: 0.3rem; }
  .fl-coverplate h1 { max-width: 24ch; }
  .fl-shaft > p:first-of-type::first-letter {
    font-size: 2.7em;
    float: none;
    padding: 0;
    color: inherit;
    font-family: inherit;
  }
}

@media (max-width: 480px) {
  .fl-outlet { grid-template-columns: 1fr; }
  .fl-chest ul { gap: 0.35rem 0.95rem; }
}

/* Motion courtesy. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .fl-billet:hover .fl-billet__view { transform: none; }
}

/* Print: the journal on paper. */
@media print {
  .fl-faceplate, .fl-index, .fl-bypass, .fl-tang, .fl-scrollwork { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .fl-shaft { max-width: none; }
  .fl-station { background: #fff; color: #000; border: 1pt solid #000; }
  .fl-coverplate__frame { border-color: #000; }
}

/* --- Cover band: a photograph with a fixed scrim, then the title over it ---- */
.fl-coverplate { position: relative; isolation: isolate; overflow: hidden; }
.fl-coverplate__still {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 55%;
  z-index: -2;
}
.fl-coverplate__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: rgba(14, 18, 24, 0.68);
}
.fl-coverplate .fl-coverplate__frame { color: #f3f1ec; }
.fl-coverplate .fl-coverplate__frame h1,
.fl-coverplate .fl-coverplate__eyebrow,
.fl-coverplate .fl-coverplate__subhead,
.fl-coverplate .fl-coverplate__issue { color: #f3f1ec; }
.fl-coverplate .fl-coverplate__eyebrow,
.fl-coverplate .fl-coverplate__issue { color: #e0a457; }

/* --- Menu: a disclosure, folded on a phone, always open on a wide screen ---- */
.fl-chest__fold { position: relative; }
.fl-chest__toggle {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--face-text);
  font-size: 0.76rem; letter-spacing: var(--caps-tracking); text-transform: uppercase;
  cursor: pointer; list-style: none;
  padding: 0.45rem 0.7rem;
  border: 1px solid currentColor;
}
.fl-chest__toggle::-webkit-details-marker { display: none; }
.fl-chest__toggle::after { content: "+"; font-size: 1rem; line-height: 1; }
.fl-chest__fold[open] > .fl-chest__toggle::after { content: "\2212"; }
.fl-chest__fold > ul { padding-block-start: 0.7rem; }
.fl-chest a[aria-current="page"] { box-shadow: inset 0 -2px 0 0 currentColor; }
@media (min-width: 46rem) {
  .fl-chest__toggle { display: none; }
  .fl-chest__fold > ul { padding-block-start: 0; }
  .fl-chest__fold:not([open]) > ul { display: flex; }
}
@media (max-width: 45.99rem) {
  .fl-chest__fold:not([open]) > ul { display: none; }
  .fl-chest__fold > ul { flex-direction: column; gap: 0.15rem; }
  .fl-chest a { display: block; padding-block: 0.5rem; font-size: 0.95rem; }
}
/* The illustrative notice has to be VISIBLE, not only in the alt attribute. */
.fl-workboard figcaption { margin-top: 0.7rem; font-size: 0.76rem; line-height: 1.5; color: var(--soot-soft); }
.fl-coverplate__caption { margin-top: 1.1rem; font-size: 0.74rem; line-height: 1.5; color: var(--ember-light); opacity: 0.85; }