/* Hill Weather.
 *
 * Newspaper direction: warm cream paper, near-black ink, one serif throughout,
 * hairline rules, letter-spaced small caps, a single ochre accent. Hierarchy
 * comes from size and weight rather than boxes and colour.
 *
 * Implements board 2a of the design handoff (design/handoff/README.md), with
 * the phone layout from 2e and the dark palette from 3a. The handoff gives
 * measurements at 1360 desktop and 390 phone; they are expressed in clamp()
 * here so the design holds between those points rather than only at them.
 */

/* ---------------------------------------------------------------- tokens -- */

:root {
  --paper: #FBF7F0;
  --paper-raised: #FDFAF4;      /* search field, expanded entry */
  --ink: #2A2521;
  --muted: #6B6156;
  --faint: #8C8175;
  --rule: #DCD2C0;              /* hairlines between at-a-glance rows */
  --hair: #E5DCCB;              /* hairlines between hill rows */
  --hair-soft: #EDE5D7;
  /* The single accent: active tabs, links, the inversion. The handoff gives
     #A8763F, which measures 3.69:1 on this paper and so fails AA for every
     link and every italic band note on the site. Darkened just far enough to
     pass, a shift of deltaE 5.9 that is hard to see side by side. */
  --ochre: #9A6737;             /* 4.5:1 on paper */
  /* The verdict ramp. Green and amber used to sit six points apart in
     lightness with low chroma, which made them read as the same muted tone at
     percentage size, and only deltaE 13 apart under protanopia: for a red-green
     colour blind reader "clear" and "on the edge" were effectively one colour.

     Measured against the current values, this ramp moves every pair apart:
     green to amber 27 -> 35, amber to rust 18 -> 27, green to rust 40 -> 48,
     and under protanopia 13 -> 32. The green leans very slightly towards teal,
     which is what survives red-green deficiency, and the amber is far enough
     from the link ochre (8 -> 12) to stop reading as a link. */
  --clear: #235C49;             /* verdict 70% and up,   7.3:1 on paper */
  --edge: #826D17;              /* verdict 40 to 69%,    4.7:1 */
  --incloud: #9E3D2E;           /* verdict under 40%,    6.2:1 */
  --above: #A8763F;             /* verdict ABOVE CLOUD */
  --glyph-bg: #F1EADB;
  --glyph-frame: #D8CDB8;
  --glyph-hill: #E7DDC8;
  --glyph-hill-line: #B3A58A;
  --glyph-cloud: #DCD2C0;       /* drawn OVER the hill */
  --glyph-cloud-op: .7;
  --row-hover: #F5EEDF;
  --sun-core: #F7E3B6;
  --sun-glow: #F2D9A4;
  --hero-ridge: #EFE8DA;        /* board 2b, inversion hero */
  --hero-deck: #E7DDC8;
  --hero-haze: #EFE8DA;
  --measure: 1360px;
  --pad: clamp(18px, 4vw, 56px);
  /* The expanded entry paints a raised background, so its text needs to be
     inset from that background's own edge. The panel edge itself stays exactly
     on the band rule rather than bleeding past it: it is the only full width
     block in the column, and anything sticking out reads as misalignment. */
  --entry-pad: clamp(14px, 1.8vw, 26px);
  color-scheme: light;
}

/* Dark is a warm inversion of the same design, not a different personality:
   near-black brown rather than blue-grey, warm off-white rather than white. */
:root[data-theme="dark"] {
  --paper: #16140F;  --paper-raised: #201B14;
  --ink: #EFE8DB;    --muted: #A89A88;       --faint: #8C8175;
  --rule: #3A332A;   --hair: #2A2419;        --hair-soft: #2A2419;
  --ochre: #CC9A5B;  --clear: #72C4AE;       --edge: #EAC05A;
  --incloud: #E08A72; --above: #CC9A5B;
  --glyph-bg: #201B14; --glyph-frame: #3A332A;
  --glyph-hill: #2E271C; --glyph-hill-line: #8C8175;
  --glyph-cloud: #4A4136; --glyph-cloud-op: .75;
  --row-hover: #201B14; --sun-core: #E8C07A; --sun-glow: #CC9A5B;
  --hero-ridge: #262019; --hero-deck: #3A322A; --hero-haze: #2E271E;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #16140F;  --paper-raised: #201B14;
    --ink: #EFE8DB;    --muted: #A89A88;       --faint: #8C8175;
    --rule: #3A332A;   --hair: #2A2419;        --hair-soft: #2A2419;
    --ochre: #CC9A5B;  --clear: #72C4AE;       --edge: #EAC05A;
    --incloud: #E08A72; --above: #CC9A5B;
    --glyph-bg: #201B14; --glyph-frame: #3A332A;
    --glyph-hill: #2E271C; --glyph-hill-line: #8C8175;
    --glyph-cloud: #4A4136; --glyph-cloud-op: .75;
    --row-hover: #201B14; --sun-core: #E8C07A; --sun-glow: #CC9A5B;
    --hero-ridge: #262019; --hero-deck: #3A322A; --hero-haze: #2E271E;
    color-scheme: dark;
  }
}

/* ------------------------------------------------------------------ base -- */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: "Newsreader", Georgia, "Times New Roman", serif;
  font-size: 17px; line-height: 1.5; padding-bottom: 2.5rem;
}
.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 var(--pad); }
a { color: var(--ochre); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: #85592B; }
:root[data-theme="dark"] a:hover { color: #E0B075; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.sr { position: absolute; left: -9999px; }
.rule-2 { border-top: 2px solid var(--ink); }
.rule-1 { border-top: 1px solid var(--ink); }
.kicker { font-size: 12.5px; letter-spacing: .2em; text-transform: uppercase;
          color: var(--muted); }

/* -------------------------------------------------------------- masthead -- */

.masthead { padding-top: 18px; }
.masthead-top { display: flex; justify-content: space-between; align-items: baseline;
                gap: 16px; }
.masthead-main { text-align: center;
                 padding: clamp(14px, 2vw, 24px) 0 clamp(12px, 1.7vw, 20px); }
.masthead-main h1 { margin: 0; font-weight: 600; line-height: 1;
                    letter-spacing: -.01em; font-size: clamp(27px, 4.3vw, 58px); }
.masthead-main .tagline { font-size: clamp(8.5px, 1vw, 13.5px); letter-spacing: .32em;
                          text-transform: uppercase; color: var(--ochre);
                          margin-top: clamp(7px, 1vw, 13px); }

/* ------------------------------------------------------------------- nav -- */

nav .tabs { display: flex; justify-content: space-between; align-items: center;
            gap: 16px 30px; flex-wrap: wrap; padding: 12px 0 2px; }
nav .links { display: flex; gap: clamp(16px, 2.4vw, 30px); flex-wrap: wrap;
             padding: 12px 0; }
.navgroup { display: flex; gap: clamp(14px, 2.2vw, 30px); flex-wrap: wrap; }
.navgroup button, nav .links button, nav .links a {
  font-size: clamp(11px, 1.05vw, 13.5px); letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); padding-bottom: 3px;
  border-bottom: 2px solid transparent; text-decoration: none;
}
.navgroup .sm { display: none; }
.foot-btn { font-size: inherit; color: var(--ochre); text-decoration: underline;
            text-decoration-thickness: 1px; text-underline-offset: 2px;
            display: inline-flex; align-items: baseline; gap: .3rem; }
.foot-btn:hover { color: #85592B; }
:root[data-theme="dark"] .foot-btn:hover { color: #E0B075; }
.navgroup button[aria-pressed="true"] { color: var(--ink); font-weight: 600;
                                        border-bottom-color: var(--ochre); }
.navgroup button:hover, nav .links button:hover, nav .links a:hover {
  color: var(--ink); border-bottom-color: var(--rule);
}

/* ---------------------------------------------------------------- search -- */

.searchbar { padding: 12px 0; }
.search { position: relative; display: flex; align-items: center; gap: 14px;
          border: 1px solid var(--muted); background: var(--paper-raised);
          padding: 13px 18px; }
.search:focus-within { border-color: var(--ochre); }
.search > label { display: flex; align-items: center; color: var(--ink); flex: none; }
.search > label svg { width: 19px; height: 19px; }
.search input { flex: 1; width: 100%; font: inherit;
                font-size: clamp(16px, 1.5vw, 19px); color: var(--ink);
                background: transparent; border: 0; padding: 0; }
.search input::placeholder { color: var(--muted); font-style: italic; opacity: 1; }
.search input:focus { outline: 0; }
.search-hint { font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
               color: var(--faint); white-space: nowrap; flex: none; }
.search-hint kbd { font: inherit; border: 1px solid var(--rule); padding: 1px 6px;
                   letter-spacing: 0; }
.results { position: absolute; z-index: 20; left: -1px; right: -1px;
           top: calc(100% + 13px); background: var(--paper-raised);
           border: 1px solid var(--muted); max-height: 62vh; overflow-y: auto;
           display: none; box-shadow: 0 14px 34px rgba(42, 37, 33, .16); }
.results.open { display: block; }
.results { scrollbar-width: thin; scrollbar-color: var(--rule) transparent; }
.results::-webkit-scrollbar { width: 8px; }
.results::-webkit-scrollbar-track { background: transparent; }
.results::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 0;
                                    border: 2px solid var(--paper-raised); }
.results::-webkit-scrollbar-thumb:hover { background: var(--faint); }
.results button { display: flex; width: 100%; text-align: left; gap: 12px;
                  align-items: baseline; padding: 11px 16px;
                  border-bottom: 1px solid var(--hair); min-height: 44px; }
.results button:hover, .results button[aria-selected="true"] { background: var(--row-hover); }
.results .r-name { flex-grow: 1; font-size: 17px; }
.results .r-meta { color: var(--faint); font-size: 13px; font-style: italic;
                   white-space: nowrap; }
.results .r-pct { font-variant-numeric: tabular-nums; }
.results .none { padding: 14px 16px; color: var(--muted); font-style: italic; }

/* ------------------------------------------------------------------ lede -- */

.lede { display: grid; grid-template-columns: minmax(0, 1fr) 340px;
        gap: clamp(24px, 4vw, 64px); align-items: start;
        padding-top: clamp(22px, 2.6vw, 32px); }
.lede h2 { margin: 0; font-weight: 500; line-height: 1.18; text-wrap: pretty;
           font-size: clamp(24px, 3.2vw, 42px); }
.standfirst { font-size: clamp(15px, 1.35vw, 17.5px); line-height: 1.65;
              color: var(--muted); margin: 14px 0 0; max-width: 62ch;
              text-wrap: pretty; }
/* The unverified notice. Never a footnote: people may make hill decisions from
   this, and the method has not been checked against observations yet. */
.unverified { font-size: 14px; font-style: italic; color: var(--faint);
              margin-top: 12px; }
.glance-head { font-size: 13px; letter-spacing: .22em; text-transform: uppercase;
               padding-bottom: 10px; }
.glance div { display: flex; justify-content: space-between; align-items: baseline;
              gap: 12px; padding: 11px 0; border-top: 1px solid var(--rule); }
.glance div:last-child { border-bottom: 1px solid var(--rule); }
.glance dt { font-size: 16px; }
.glance dd { margin: 0; font-size: 20px; font-variant-numeric: tabular-nums; }
.glance dd small { font-size: 14px; color: var(--faint); }

/* ---------------------------------------------------------------- legend -- */

.legend { display: flex; flex-wrap: wrap; gap: 22px; align-items: baseline;
          font-size: 12px; letter-spacing: .13em; text-transform: uppercase;
          color: var(--muted); margin-top: clamp(20px, 2.6vw, 34px); }
.legend .tip { margin-left: auto; font-style: italic; letter-spacing: 0;
               text-transform: none; font-size: 13.5px; color: var(--faint); }

/* ----------------------------------------------------------------- bands -- */

.band { margin-top: clamp(26px, 3vw, 38px); }
.band-head { display: flex; justify-content: space-between; align-items: baseline;
             gap: 16px; padding-bottom: 8px; }
.band-head h3 { margin: 0; font-weight: 400; letter-spacing: .22em;
                text-transform: uppercase; font-size: clamp(13px, 1.3vw, 17px); }
.band-note { font-size: clamp(12px, 1.15vw, 14.5px); font-style: italic;
             color: var(--ochre); text-align: right; }
.hills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
         gap: 0 clamp(20px, 4vw, 56px); }

.hill { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 16px;
        align-items: center; width: 100%; text-align: left; padding: 13px 6px;
        margin: 0 -6px; border-bottom: 1px solid var(--hair); }
.hill:hover { background: var(--row-hover); }
.hill svg { display: block; flex: none; }
.hill-name { font-size: clamp(16.5px, 1.5vw, 19.5px); }
.hill-meta { font-size: 13.5px; font-style: italic; color: var(--faint);
             margin-top: 2px; overflow: hidden; text-overflow: ellipsis;
             white-space: nowrap; }
.hill-pct { font-size: clamp(21px, 2vw, 26px); font-variant-numeric: tabular-nums; }
.c-clear { color: var(--clear); }
.c-edge { color: var(--edge); }
.c-incloud { color: var(--incloud); }
.c-above { color: var(--above); }

/* The dense tier: the rest of the band as a readable run rather than a flat
   "36 more" line. Names are tappable and expand the hill like any row. */
.dense { text-align: center; padding: 12px clamp(0px, 3vw, 40px) 0;
         font-size: 13.5px; line-height: 2; color: var(--muted); }
.dense button { font-size: inherit; white-space: nowrap; padding: 2px 0; }
.dense button:hover { text-decoration: underline; text-underline-offset: 3px; }
.dense .sep { color: var(--rule); }
.dense .rest { font-style: italic; color: var(--faint); }

/* ---------------------------------------------------------------- detail -- */

.detail { grid-column: 1 / -1; }
.detail-inner { background: var(--paper-raised); border-top: 1px solid var(--ink);
                border-bottom: 1px solid var(--ink);
                padding: 18px var(--entry-pad) 30px; }

/* The tapped row, repeated full width at the head of the entry. On a phone the
   entry can open well below the row it came from, so it has to name itself. */
.entry-title { display: flex; justify-content: space-between; align-items: baseline;
               gap: 16px; }
.entry-pct { font-size: clamp(24px, 2.4vw, 30px); font-variant-numeric: tabular-nums;
             flex: none; }

.entry-body { display: grid; grid-template-columns: 380px minmax(0, 1fr);
              gap: clamp(20px, 4vw, 72px); align-items: start; }
.detail h4 { margin: 0; font-weight: 400; line-height: 1.1;
             font-size: clamp(24px, 2.6vw, 36px); }
.detail .gaelic { font-size: 17px; font-style: italic; color: var(--muted);
                  margin-top: 4px; }
.detail dl { margin: 20px 0 0; }
.detail dl.sun { margin-top: 22px; }
.detail dl > div { display: flex; justify-content: space-between; gap: 16px;
                   align-items: baseline; padding: 10px 0;
                   border-top: 1px solid var(--hair); }
.detail dl > div:last-child { border-bottom: 1px solid var(--hair); }
.detail dt { color: var(--muted); flex: none; font-size: 15.5px; }
.detail dd { margin: 0; text-align: right; font-size: 16px; }
.detail dd small { font-size: 13.5px; color: var(--faint); }
.detail .links { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 16px;
                 font-size: 15px; }

.verdict { font-size: 18px; margin: 0; text-wrap: pretty; }
.verdict > span { font-weight: 600; }
.verdict em { color: var(--muted); }

/* The annotated section. Height is bounded because the drawing is an aside to
   the verdict, not the point of the page. */
.trust { font-size: 14.5px; font-style: italic; color: var(--faint);
          margin: 8px 0 0; text-wrap: pretty; }

.section { display: block; width: 100%; max-width: 700px; height: auto;
           margin-top: 16px; }
.section text { font-family: "Newsreader", Georgia, serif; }

.wiki { font-size: 17px; line-height: 1.65; margin: 18px 0 0; max-width: 66ch;
        text-wrap: pretty; }
.wiki-credit { font-size: 13.5px; color: var(--faint); margin-top: 8px; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums;
        margin-top: 24px; }
th { text-align: left; font-weight: 400; font-size: 12.5px; letter-spacing: .16em;
     text-transform: uppercase; color: var(--faint); padding: 0 16px 8px 0;
     border-bottom: 1px solid var(--rule); }
td { padding: 8px 16px 8px 0; font-size: 16px; border-bottom: 1px solid var(--hair); }
td.soft { color: var(--muted); }
th:last-child, td:last-child { padding-right: 0; }

.gust { color: var(--muted); }
/* Only the genuinely difficult numbers get a colour. If every wind reading
   were coloured, the colour would stop meaning anything. */
.gust-hard { color: var(--incloud); }

/* ------------------------------------------------------------------ hero -- */

/* Board 2b. Present only on an inversion day, which is why it is allowed to be
   this loud: two 3 px ochre rules and the one piece of motion on the site. */
.kicker-inv { font-size: 13px; letter-spacing: .24em; text-transform: uppercase;
              color: var(--ochre); font-weight: 600; margin-bottom: 10px; }
.hero { border-top: 3px solid var(--ochre); border-bottom: 3px solid var(--ochre);
        margin-top: 26px; padding: 20px 0 18px; }
.hero-svg { display: block; width: 100%; height: auto; }
.hero-svg text { font-family: "Newsreader", Georgia, serif; }
.hero-stats { display: flex; margin-top: 16px; border-top: 1px solid var(--rule);
              padding-top: 14px; gap: 24px; }
.hero-stats > div { flex: 1; }
.hero-stats > div + div { border-left: 1px solid var(--rule); padding-left: 24px; }
.hero-stats > div:last-child { flex: 1.3; }
.stat-k { font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
          color: var(--faint); }
.stat-v { font-size: clamp(20px, 2.1vw, 28px); }
.stat-n { font-size: 13.5px; font-style: italic; color: var(--faint); }
.hero-caveat { margin-top: 14px; font-size: 12px; letter-spacing: .18em;
               text-transform: uppercase; color: var(--faint); text-align: right; }

/* The motion is decorative and it repeats for ever, so it goes entirely when
   the reader has asked for less of it. Static shapes take over. */
[data-static] { display: none; }
@media (prefers-reduced-motion: reduce) {
  [data-anim] { display: none; }
  [data-static] { display: inline; }
}

/* On an inversion day the legend leads with ABOVE CLOUD rather than CLEAR,
   because that is the band people are reading the page for. */
.legend-inv .l-clear { display: none; }
.legend .l-above { display: none; }
.legend-inv .l-above { display: inline; }

/* ----------------------------------------------------------------- guide -- */

/* Board 2f, the explainer page. These rules used to live in a <style> block on
   that page, where they hardcoded three ink colours and referenced tokens the
   2a rewrite had removed: the three scene drawings were filling black and the
   body copy was near invisible in dark. Moving them here puts the whole design
   system in one file, on tokens. */
.masthead-main.compact { padding: clamp(12px, 1.6vw, 18px) 0 clamp(10px, 1.3vw, 15px); }
.masthead-main.compact h1 { font-size: clamp(24px, 3vw, 36px); }
.masthead-main.compact .tagline { font-size: clamp(8.5px, .9vw, 12.5px); }

.spaced { margin-top: clamp(26px, 3.2vw, 36px); }
h3.spaced { margin-top: clamp(24px, 2.8vw, 32px); }
.section-head { font-weight: 400; font-size: clamp(15px, 1.6vw, 17px);
                letter-spacing: .22em; text-transform: uppercase; margin: 0 0 8px; }

.guide-lede { padding-top: clamp(24px, 3.2vw, 34px); max-width: 74ch; }
.guide-lede h2 { margin: 0; font-weight: 500; line-height: 1.1;
                 font-size: clamp(30px, 4vw, 44px); text-wrap: pretty; }
.guide-lede p { font-size: clamp(16px, 1.6vw, 18px); line-height: 1.65;
                margin: 14px 0 0; text-wrap: pretty; }
.guide-lede p.soft { color: var(--muted); margin-top: 12px; }

.scenes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: clamp(20px, 3vw, 40px); padding-top: 24px; }
.scenes svg { display: block; width: 100%; height: auto; }
.scene-name { font-size: 13px; letter-spacing: .18em; text-transform: uppercase;
              font-weight: 600; margin-top: 12px; }
.scenes p { font-size: 15.5px; line-height: 1.55; color: var(--muted);
            margin: 5px 0 0; text-wrap: pretty; }

.guide-cols { display: grid; grid-template-columns: 1fr 1fr;
              gap: clamp(24px, 4vw, 56px); padding-top: 22px; }
.guide-cols h3 { margin: 0 0 10px; font-weight: 600; font-size: 13px;
                 letter-spacing: .2em; text-transform: uppercase; }
.guide-cols p { font-size: clamp(15.5px, 1.5vw, 16.5px); line-height: 1.62;
                color: var(--muted); margin: 0 0 12px; text-wrap: pretty; }
.caveat { border: 1px solid var(--rule); padding: 14px 18px; margin-top: 16px;
          font-size: 15px; line-height: 1.6; font-style: italic; color: var(--muted); }

.glossary { padding-top: clamp(28px, 3.6vw, 36px); }
.terms { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(24px, 4vw, 56px);
         margin: 0; }
.terms > div { padding: 10px 0; border-bottom: 1px solid var(--hair);
               font-size: 15.5px; line-height: 1.55; }
.terms dt { display: inline; font-size: 12.5px; letter-spacing: .16em;
            text-transform: uppercase; font-weight: 600; }
.terms dt::after { content: ","; letter-spacing: 0; }
.terms dd { display: inline; margin: 0 0 0 .4em; color: var(--muted); }

/* ------------------------------------------------------------------ week -- */

/* Board 2d. Three days side by side, the best of them taking a 3px ochre rule
   and a tag, so the answer to "which day" is visible before anything is read. */
.days { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
        margin-top: 28px; }
.day { border-top: 3px solid var(--rule); padding: 16px clamp(16px, 2.2vw, 30px) 20px;
       border-left: 1px solid var(--hair); }
.day:first-child { border-left: 0; padding-left: 0; }
.day:last-child { padding-right: 0; }
.day-win { border-top-color: var(--ochre); }
.day-head { display: flex; justify-content: space-between; align-items: baseline;
            gap: 12px; }
.day-name { font-size: 14px; letter-spacing: .18em; text-transform: uppercase;
            font-weight: 600; }
.day-tag { font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase;
           font-weight: 600; color: var(--ochre); white-space: nowrap; }
.day-pct { font-size: clamp(38px, 4.6vw, 62px); line-height: 1.05; margin-top: 10px;
           font-variant-numeric: tabular-nums; }
.day-of { font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase;
          color: var(--faint); margin-top: 2px; }

/* The distribution bar. The headline percentage hides the shape of a day: 40%
   clear with the rest borderline is a different proposition from 40% clear with
   the rest buried, and the bar is the only thing that shows the difference. */
.daybar { display: flex; height: 9px; margin-top: 12px; border: 1px solid var(--rule); }
.daybar i { display: block; }
.b-clear { background: var(--clear); }
.b-edge { background: var(--edge); opacity: .75; }
.b-incloud { background: var(--rule); }
.day-barnote { font-size: 13px; color: var(--faint); margin-top: 5px; font-style: italic; }

.dayscene { display: block; width: 100%; max-width: 220px; height: auto; margin-top: 14px; }
.day-lede { font-size: 17px; font-style: italic; line-height: 1.45; margin: 12px 0 0;
            text-wrap: pretty; }
.day-split { font-size: 14px; font-style: italic; color: var(--ochre);
             margin: 8px 0 0; text-wrap: pretty; }
.day-rows { margin: 12px 0 0; }
.day-rows > div { display: flex; justify-content: space-between; align-items: baseline;
                  gap: 12px; padding: 7px 0; border-top: 1px solid var(--hair); }
.day-rows > div:last-child { border-bottom: 1px solid var(--hair); }
.day-rows dt { font-size: 15px; color: var(--muted); }
.day-rows dd { margin: 0; font-size: 16px; }
.day-rows dd small { font-size: 13px; color: var(--faint); }
.day-link { display: inline-block; margin-top: 14px; font-size: 14.5px; }
.week-note { margin-top: 24px; border-top: 1px solid var(--rule); padding-top: 12px;
             font-size: 14.5px; font-style: italic; color: var(--muted); max-width: 82ch; }

.noscript { max-width: 74ch; margin: 0 auto; padding: clamp(20px, 3vw, 32px) var(--pad);
             border-bottom: 1px solid var(--rule); font-size: 17px; line-height: 1.65; }
.noscript p { margin: 0 0 12px; text-wrap: pretty; }

.consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
            background: var(--paper-raised); border-top: 2px solid var(--ink);
            padding: 16px var(--pad); display: flex; align-items: center;
            gap: clamp(14px, 3vw, 40px); flex-wrap: wrap;
            box-shadow: 0 -8px 28px rgba(42, 37, 33, .10); }
.consent p { margin: 0; flex: 1 1 340px; font-size: 15.5px; line-height: 1.55;
             color: var(--muted); text-wrap: pretty; max-width: 78ch; }
.consent-buttons { display: flex; gap: 12px; flex: none; }
.consent button { font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
                  border: 1px solid var(--muted); padding: 10px 18px;
                  color: var(--ink); min-height: 44px; }
.consent button:hover { border-color: var(--ink); background: var(--row-hover); }
/* The two answers look the same on purpose. A refusal that is harder to click
   than an acceptance is not consent, whatever the banner says. */
.consent-yes { border-color: var(--ochre); color: var(--ochre); }
.consent-yes:hover { border-color: var(--ochre); color: var(--ochre); }

.light { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
          margin-top: clamp(20px, 2.6vw, 30px); padding: 20px 0 22px; }
.light-kicker { font-size: 13px; letter-spacing: .24em; text-transform: uppercase;
                color: var(--ochre); font-weight: 600; }
.light h3 { margin: 8px 0 0; font-weight: 500; line-height: 1.15;
            font-size: clamp(24px, 2.8vw, 34px); }
.light p { margin: 10px 0 0; max-width: 68ch; font-size: 16px; line-height: 1.6;
           color: var(--muted); text-wrap: pretty; }
.light-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
              gap: clamp(20px, 3.4vw, 56px); margin-top: 20px; }
.light-head { font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase;
              color: var(--faint); border-bottom: 1px solid var(--rule);
              padding-bottom: 7px; }
.light-hill { display: grid; grid-template-columns: minmax(0, 1fr) auto;
              width: 100%; text-align: left; align-items: baseline; gap: 4px 14px;
              padding: 10px 6px; margin: 0 -6px;
              border-bottom: 1px solid var(--hair); min-height: 44px; }
.light-hill:hover { background: var(--row-hover); }
.light-name { font-size: 17px; }
.light-meta { grid-column: 1; font-size: 13.5px; font-style: italic;
              color: var(--faint); }
.light-score { grid-row: 1 / span 2; align-self: center; font-size: 26px;
               color: var(--ochre); font-variant-numeric: tabular-nums; }
.light-note { font-size: 13.5px; font-style: italic; color: var(--faint);
              margin-top: 10px; }

.outlook { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: clamp(16px, 3vw, 44px); padding-top: 20px; }
.outlook-when { font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase;
                color: var(--faint); }
.outlook-pct { font-size: clamp(30px, 4vw, 44px); line-height: 1.1; margin-top: 4px;
               font-variant-numeric: tabular-nums; }
.outlook-note { font-size: 14.5px; font-style: italic; color: var(--muted);
                margin-top: 2px; }

/* The per-hill pages reuse the entry's definition rows outside .detail. */
.detail-facts { margin: 4px 0 0; }
.detail-facts > div { display: flex; justify-content: space-between; gap: 16px;
                      align-items: baseline; padding: 9px 0;
                      border-top: 1px solid var(--hair); }
.detail-facts > div:last-child { border-bottom: 1px solid var(--hair); }
.detail-facts dt { color: var(--muted); flex: none; font-size: 15.5px; }
.detail-facts dd { margin: 0; text-align: right; font-size: 16px; }
.detail-facts dd small { font-size: 13.5px; color: var(--faint); }

/* ---------------------------------------------------------------- footer -- */

footer { padding-top: clamp(28px, 3.4vw, 44px); }
.footer-inner { border-top: 2px solid var(--ink); padding-top: 18px; display: grid;
                grid-template-columns: 1fr 1fr 1fr 1.2fr;
                gap: clamp(20px, 3.2vw, 44px); font-size: 15px; line-height: 1.65;
                color: var(--muted); }
.footer-inner h5 { margin: 0 0 9px; font-weight: 400; font-size: 13px;
                   letter-spacing: .2em; text-transform: uppercase; color: var(--ink); }

/* ----------------------------------------------------------------- theme -- */

.theme { display: inline-flex; align-items: center; gap: .4rem; }
.theme svg { width: 14px; height: 14px; flex: none; }
.theme .moon { display: none; }
:root[data-theme="dark"] .theme .sun { display: none; }
:root[data-theme="dark"] .theme .moon { display: inline; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme .sun { display: none; }
  :root:not([data-theme="light"]) .theme .moon { display: inline; }
}

.hill.flash { animation: flash 1.6s ease-out; }
@keyframes flash { from { background: var(--row-hover); } to { background: transparent; } }

/* ------------------------------------------------------------ responsive -- */

@media (max-width: 1100px) {
  .hills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lede { grid-template-columns: minmax(0, 1fr) 280px; }
}

@media (max-width: 860px) {
  /* Side by side is the whole point of this page, so the columns hold on a
     tablet and only stack on a phone. */
  .days { grid-template-columns: 1fr; }
  .day { border-left: 0; padding-left: 0; padding-right: 0; margin-top: 8px; }
  .scenes { grid-template-columns: 1fr; }
  .guide-cols { grid-template-columns: 1fr; }
  .terms { grid-template-columns: 1fr; }
  /* Four stat cells in a row are unreadable much under a thousand pixels, so
     they fold to two by two rather than squeezing. */
  .hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; }
  .hero-stats > div + div { border-left: 0; padding-left: 0; }
  .hero-stats > div:nth-child(even) { border-left: 1px solid var(--rule);
                                      padding-left: 20px; }
  .lede { grid-template-columns: 1fr; padding-top: 16px; gap: 16px; }
  .hills { grid-template-columns: 1fr; }
  .entry-body { grid-template-columns: 1fr; padding-top: 18px; }
  .footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Board 2e trims the lede hard, and the same trim is needed on a tablet:
     once the lede stacks, the supporting paragraph and the extra at-a-glance
     rows push the first hill clean off the screen. Headline, the one-line
     unverified notice, two rows, then the hills. */
  .standfirst { display: none; }
  .unverified { margin-top: 8px; font-size: 13px; }
  .glance-wrap { border-top: 0; padding-top: 0; }
  .glance-head { display: none; }
  .glance div:nth-child(2), .glance div:nth-child(3) { display: none; }
  .glance div { padding: 8px 0; }
  .legend { margin-top: 14px; }
  .band:first-child { margin-top: 18px; }
}

/* Phone, board 2e. Region and day tabs share ONE row, the search box stays
   boxed and prominent, and the first hill lands about half a screen down. */
@media (max-width: 620px) {
  body { font-size: 16px; }
  /* Scaled to fit, the hero would be a 55 px strip. It is given a real height
     and allowed to crop its own sides instead, which keeps the sun and the
     drifting deck at a size that is worth having on the page at all. Its
     labels go for the same reason the section drawing's do. */
  .hero { margin-top: 18px; padding: 14px 0 12px; }
  .hero-svg { height: 150px; }
  .hero-svg text { display: none; }
  .hero-caveat { text-align: left; }
  /* At-a-glance sits directly above and already carries tops above cloud and
     cloud top, so on a phone the hero keeps only what it alone says. That is
     roughly ninety pixels of duplication removed from above the first hill. */
  .hero-stats > div:nth-child(-n+2) { display: none; }

  /* The light panel stacks to one column on a phone, so eight hills over two
     columns became a thousand pixels of it before the first hill in the list.
     Three each, and the height and area line goes: both are on the hill's own
     entry, one tap away. The caveat stays, because it is the honest part. */
  .light { padding: 16px 0 18px; }
  .light-cols { gap: 18px; margin-top: 14px; }
  /* Two each. On a phone the useful answer is where to go, not a shortlist to
     compare, and the full ranking is one tap away in the region list. */
  .light-hill:nth-of-type(n+3) { display: none; }
  .light-note { display: none; }
  .light-meta { display: none; }
  .light-hill { padding: 9px 6px; }
  .hero-stats > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .hero-stats > div:nth-child(4) { border-left: 1px solid var(--rule);
                                   padding-left: 20px; }
  /* Scaled to phone width the section drawing is about 340 px across, which
     puts its 13 px labels at roughly six. Every one of them repeats something
     the entry head or the verdict sentence has already said in words, so the
     silhouette stays and the lettering goes. */
  .section text { display: none; }
  .masthead { padding-top: 12px; }
  .masthead-top { font-size: 10.5px; letter-spacing: .16em; }
  .masthead-top span + span { display: none; }
  .masthead-main { padding: 12px 0 10px; }
  /* Board 2e puts region and day on ONE row and has no secondary link row at
     the top at all. Those controls are in the footer instead, which is where
     somebody looks for them anyway once they have the forecast. That row and
     its rule were 80 px of a phone screen before the first hill. */
  /* Board 2e put region and day on one row, which worked with two regions.
     With three the row needs 415 px of a 354 px phone and the region group
     wraps raggedly inside itself. Two honest rows instead, which also scales
     to a fourth and fifth region without another rethink. */
  nav .tabs { padding: 8px 0; gap: 4px 12px; flex-wrap: wrap; }
  .navgroup { width: 100%; gap: 14px; }
  #days { justify-content: flex-start; }
  nav .links { display: none; }
  nav .links + .rule-1 { display: none; }
  .navgroup { gap: 10px; flex-wrap: nowrap; }
  .navgroup .lg { display: none; }
  .navgroup .sm { display: inline; }
  .navgroup button { letter-spacing: .1em; }
  .search { padding: 10px 12px; gap: 10px; }
  .search-hint { display: none; }
  /* The legend is explanatory rather than operational, and "How to read this"
     covers it properly. On a phone the verdict colours plus the percentage are
     self-evident enough to buy back the space. */
  .legend { display: none; }

  .lede { padding-top: 14px; }
  .footer-inner { grid-template-columns: 1fr; }
  .dense { padding-left: 0; padding-right: 0; }
}

/* Touch input at any screen size. Keyed on the pointer rather than the width
   because a 768px tablet is every bit as much a finger as a phone is. */
@media (pointer: coarse) {
  .navgroup button, nav .links button, nav .links a {
    min-height: 44px; display: flex; align-items: center;
  }
  .hill { min-height: 56px; }
  .dense button { min-height: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .hill.flash { animation: none; }
  [data-anim] { display: none !important; }
  [data-static] { display: block !important; }
}