/* CountdownCareer — one stylesheet. Tokens come from the Courier Crane brand kit.
   Cards, Show More, ads, the place chip and the list are in cards.css.
   House rules: text never smaller than 15px, taps never smaller than 44px. Light theme only. */

:root{
  --flight:#0066B3; --flight-deep:#004C8A;
  --nib:#1C1A16; --nib-soft:#5B5246;
  --paper:#FBF8F1; --paper-sunk:#F1EADC; --sheet:#FFFFFF;
  --rule:#8C8272; --hairline:#E2D9C8;
  --on-flight:#FFFFFF;
  --b-confirmed:#1B6A44; --b-estimated:#875800; --b-unverified:#5A43A0; --b-notpub:#57574F;
  --ring:#E2D9C8; --ring-track:#F1EADC;
  --shadow:0 1px 2px rgba(28,26,22,.07), 0 6px 18px rgba(28,26,22,.06);
  --serif:"Young Serif",Georgia,"Times New Roman",serif;
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --maxw:1180px; --gut:clamp(16px,3.6vw,54px); --gap:clamp(12px,1.6vw,24px); --r:14px;
  --moon:#F4EFE4;
  color-scheme:light;
}
/* Release 006: light theme only. No dark colours, no theme switch (Musab, 10 Oct 2026). */

@font-face{font-family:"Young Serif";src:url("fonts/YoungSerif-Regular.subset.woff") format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("fonts/InstrumentSans-Regular.subset.woff") format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("fonts/InstrumentSans-Bold.subset.woff") format("woff");font-weight:600 700;font-display:swap}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--nib);font:400 16px/1.5 var(--sans);overflow-x:hidden}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.15;margin:0 0 .4em}
h1{font-size:clamp(28px,6.2vw,46px);letter-spacing:-.01em}
h2{font-size:clamp(22px,4vw,28px)}
h3{font-size:19px}
p{margin:0 0 1em}
a{color:var(--flight);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--flight-deep)}
:focus-visible{outline:3px solid var(--flight);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:8px;top:-60px;z-index:50;background:var(--flight);color:var(--on-flight);padding:12px 16px;border-radius:10px}
.skip:focus{top:8px;color:var(--on-flight)}
/* the preview build only: a bar on every page so nobody mistakes sample dates for real ones */
.ribbon{background:var(--nib);color:var(--paper);font-size:15px;line-height:1.35;text-align:center;padding:8px var(--gut)}

/* ---------- header: name, then three links ---------- */
.top{border-bottom:1px solid var(--hairline);background:var(--paper)}
.top .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding-top:10px;padding-bottom:10px}
.brand{display:flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;color:var(--nib);font:400 20px/1 var(--serif);flex:1 0 100%;white-space:nowrap}
.brand .ico{width:34px;height:34px;border-radius:8px;flex:0 0 auto}
.nav{display:flex;gap:2px;flex:0 1 auto}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;border-radius:12px;text-decoration:none;color:var(--nib-soft);font-weight:600;font-size:16px}
.nav a:hover{color:var(--nib);background:var(--paper-sunk)}
.nav a[aria-current="page"]{background:var(--paper-sunk);color:var(--nib)}
@media (min-width:760px){.brand{flex:0 0 auto;margin-right:auto}.nav{gap:4px}.nav a{padding:0 14px}.top .wrap{flex-wrap:nowrap}}
@media (max-width:419px){.brand{gap:8px;font-size:clamp(17px,5.2vw,20px)}.brand .ico{width:30px;height:30px}.nav a{padding:0 8px}}
@media (max-width:351px){.top .wrap{column-gap:4px}.nav{gap:0}.nav a{padding:0 6px;font-size:15px}}

/* ---------- masthead: "Turn the dial.", then the two dials ---------- */
.mast{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gap);padding:clamp(20px,5vh,48px) 0 clamp(16px,3vh,28px);align-items:start}
h1.headline{margin:0;font:400 clamp(32px,4.3vw,54px)/1.1 var(--serif);letter-spacing:.005em;color:var(--nib)}

/* ---------- dials ---------- */
.dials{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;justify-items:center;margin:0}
.dialbox{width:100%;text-align:center}
@media(min-width:760px){.dials{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}}
.dial-step{margin:0 0 6px;font:600 15px/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--nib-soft);text-align:center}
.dial-wrap{position:relative;width:100%;max-width:400px;margin:0 auto;aspect-ratio:1}
/* The dial is a control, not text: pressing and dragging on it must never select words,
   pop the phone's copy bubble or magnifier, or drag a ghost picture. pan-y lets a thumb that is
   only passing scroll the page; the crane takes over once it is held (see tools/cc.js). */
.dial{width:100%;height:100%;display:block;touch-action:pan-y;cursor:grab;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.dial *{-webkit-user-select:none;user-select:none}
.dial.held,.dial.held *{cursor:grabbing}
/* the dial is focusable: a clear ring round it when reached with the keyboard, none for a click.
   Never round the dial's corners to make a round ring: rounding cuts off names that sit in a corner. */
.dial:focus{outline:none}
.dial:focus-visible{outline:3px solid var(--flight);outline-offset:3px}
.dial .grip{fill:transparent}
.dial.is-empty,.dial.is-empty .knob{cursor:default}
.dial .knob.parked{transform:none}
.dial .track{fill:none;stroke:var(--ring-track);stroke-width:13}
.dial .edge{fill:none;stroke:var(--ring);stroke-width:1}
.dial .empty-track{stroke-dasharray:5 7;stroke:var(--rule);fill:none;stroke-width:2}
.dial .stem{stroke:var(--nib-soft);stroke-width:2.2;stroke-linecap:round}
.dial .pip{fill:var(--paper);stroke:var(--rule);stroke-width:1.4}
.dial .pip.off{stroke-dasharray:2 1.6}
.dial .pip.on{fill:var(--flight);stroke:var(--flight);stroke-dasharray:none}
.dial .tick{stroke:var(--rule);stroke-width:1.3;opacity:.75}
.dial .tick.today{stroke:var(--nib);stroke-width:2}
.dial .arc{fill:none;stroke:var(--flight);stroke-width:7;stroke-linecap:round;opacity:.28}
/* name sizes are set by the dial itself (font-size attribute), so they can shrink to fit */
.dial .lbl{font-family:var(--sans);font-weight:600;fill:var(--nib-soft)}
.dial .lbl.on{fill:var(--flight);font-weight:700}
.dial .lbl.off{font-weight:400}
.dial .lbl-sub{font-family:var(--sans);font-weight:400;fill:var(--nib-soft)}
.dial .lbl.on .lbl-sub{fill:var(--flight)}
.dial .measure{visibility:hidden}
.dial .hit{fill:transparent;cursor:pointer}
/* the crane: a raised button you can take hold of */
.dial .knob{cursor:grab;transform-box:fill-box;transform-origin:center;
  filter:drop-shadow(0 1.2px 1.2px rgba(28,26,22,.28)) drop-shadow(0 3px 5px rgba(28,26,22,.18));
  transition:transform .12s ease,filter .12s ease}
.dial .puck{fill:var(--flight);stroke:var(--sheet);stroke-width:2.2}
.dial .crane{fill:var(--on-flight);color:var(--on-flight);pointer-events:none}
.dial .halo{fill:var(--flight);opacity:0;transition:opacity .12s ease}
@media (hover:hover){.dial .knob:hover{transform:scale(1.06)}}
/* grabbed: the crane lifts toward the finger, a little bigger, with a deeper shadow; it settles on release */
.dial.held .knob{transform:scale(1.12);filter:drop-shadow(0 2px 2px rgba(28,26,22,.3)) drop-shadow(0 6px 10px rgba(28,26,22,.26))}
.dial.held .puck{fill:var(--flight-deep)}
.dial.held .halo{opacity:.22}
.dial .knob.waiting .puck{fill:var(--paper);stroke:var(--nib-soft);stroke-width:2}
.dial .knob.waiting .crane{fill:var(--nib-soft);color:var(--nib-soft)}
.dial.held .knob.waiting .puck{fill:var(--paper-sunk)}
.dial .mid-1{font-family:var(--serif);fill:var(--nib)}
.dial .mid-2{font-family:var(--sans);font-weight:400;fill:var(--nib-soft)}
.dial .mid-big{font-family:var(--serif);fill:var(--nib)}
.dial .mid-small{font-family:var(--sans);font-weight:400;fill:var(--nib-soft)}
.dial .mid-none{font-family:var(--sans);font-weight:600;fill:var(--nib-soft)}
@media (prefers-reduced-motion:reduce){.dial .knob,.dial .halo{transition:none}}

.hint{margin:6px 0 0;text-align:center;color:var(--nib-soft);font-size:15px;min-height:1.5em}

/* ---------- badges: shape + word, never colour alone ---------- */
.badge{display:inline-flex;align-items:center;gap:7px;font:600 15px/1 var(--sans);white-space:nowrap}
.badge::before{content:"";width:11px;height:11px;flex:0 0 auto;background:currentColor}
.badge.confirmed{color:var(--b-confirmed)} /* square */
.badge.estimated{color:var(--b-estimated)}
.badge.estimated::before{border-radius:50%} /* circle */
.badge.unverified{color:var(--b-unverified)}
.badge.unverified::before{clip-path:polygon(50% 0,100% 100%,0 100%)} /* triangle */
.badge.not-published{color:var(--b-notpub)}
.badge.not-published::before{background:none;box-shadow:inset 0 0 0 2px currentColor} /* hollow square */


/* ---------- the deadline page: one answer and its clock ---------- */
.answer{background:var(--sheet);border:1px solid var(--hairline);border-radius:var(--r);box-shadow:var(--shadow);padding:20px var(--gut);margin:22px 0 40px}
@media (min-width:700px){.answer{padding:24px 26px}}
.crumb{margin:0 0 10px;font:600 15px/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--nib-soft)}
.answer h2{margin:0 0 2px}
.answer .prog{color:var(--nib-soft);font-size:16px;margin:0 0 14px}
.clockrow{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 18px;justify-content:space-between;border-bottom:1px solid var(--hairline);padding-bottom:16px;margin-bottom:4px}
.clock{font-family:var(--serif);font-size:clamp(30px,8vw,44px);line-height:1;color:var(--flight);display:flex;align-items:baseline;gap:4px;flex-wrap:wrap}
.clock .u{font:400 15px/1 var(--sans);color:var(--nib-soft);margin:0 9px 0 4px}
.clock.none{font-size:clamp(19px,4.4vw,24px);color:var(--nib-soft)}
.facts{display:block;margin:0;max-width:62ch}
.fact{display:grid;grid-template-columns:118px 1fr;gap:14px;padding:11px 0;border-bottom:1px solid var(--hairline);align-items:start}
@media (min-width:560px){.fact{grid-template-columns:150px 1fr}}
.fact dt{color:var(--nib-soft);font-size:15px}
.fact dd{margin:0;font-size:16px}
.fact:last-child{border-bottom:0}
.src{font-weight:600;display:inline-flex;align-items:center;min-height:44px}
.back{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
.src::after{content:" \2197";font-weight:400;white-space:pre}
[hidden]{display:none !important}

/* ---------- notes, empty states, pages ---------- */
.note{border-left:4px solid var(--flight);background:var(--paper-sunk);border-radius:0 12px 12px 0;padding:12px 16px;margin:14px 0;font-size:16px}
.note p{margin:0}
.note p + p{margin-top:10px}
.note b{font-weight:700}
.empty{text-align:center;padding:26px 14px;color:var(--nib-soft)}
.empty strong{display:block;color:var(--nib);font-family:var(--serif);font-size:21px;margin-bottom:6px;font-weight:400}
.foot{border-top:1px solid var(--hairline);margin-top:56px;padding:26px 0 36px;color:var(--nib-soft);font-size:15px}
.foot a{color:var(--flight)}
.foot p{margin:0 0 .5em}
.lede{font-size:18.5px;color:var(--nib-soft);max-width:60ch}
.prose{max-width:66ch;padding-top:clamp(16px,3vh,32px)}
.prose h2{margin-top:1.7em}
.prose h3{margin:1.4em 0 .3em}
.prose li{margin-bottom:.45em}
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.tabs a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--rule);color:var(--nib);text-decoration:none;font-weight:600;background:var(--sheet)}
.tabs a:hover{background:var(--paper-sunk)}
.page{padding-top:clamp(16px,3vh,32px)}
table.dd{border-collapse:collapse;width:100%;font-size:15px;margin:14px 0}
table.dd th,table.dd td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--hairline);vertical-align:top}
table.dd th{color:var(--nib-soft);font-weight:600;font-size:15px}
table.dd code{font-size:15px;background:var(--paper-sunk);padding:1px 5px;border-radius:5px}
.scroller{overflow-x:auto}

/* ---------- Questions: an accordion that works with no JavaScript at all ---------- */
details{border:1px solid var(--hairline);border-radius:12px;background:var(--sheet);margin:0 0 10px;overflow:hidden}
details[open]{border-color:var(--rule)}
summary{cursor:pointer;list-style:none;padding:14px 16px;font-weight:600;font-size:16.5px;display:flex;align-items:flex-start;gap:12px;min-height:44px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";margin-left:auto;font-weight:400;font-size:21px;line-height:1;color:var(--flight);flex:0 0 auto}
details[open] summary::after{content:"\2212"}
summary:hover{background:var(--paper-sunk)}
details > *:not(summary){padding:0 16px;margin:0 0 14px}
details > p:first-of-type{padding-top:2px}

/* ---------- policy pages ---------- */
.stamp{color:var(--nib-soft);font-size:15px;margin-top:-.6em}
.todo{background:#FFF4D6;color:#4A3200;border:2px dashed #875800;border-radius:10px;padding:12px 14px;font-weight:600;font-size:16px}
.footnav{display:flex;flex-wrap:wrap;gap:4px 8px;margin:6px 0 10px}
.footnav a{font-size:15px;font-weight:600;display:inline-flex;align-items:center;min-height:44px;padding:0 10px}
.prose code{background:var(--paper-sunk);padding:1px 6px;border-radius:5px;font-size:15px}
.release{margin:0}
.visits{margin:0 0 .5em;color:var(--nib)}
.visits b{font-weight:700}

/* ---------- email date alerts (Release 006b): footer form ---------- */
.alerts{max-width:560px;margin:0 0 22px;padding:16px;border:1px solid var(--hairline);border-radius:var(--r);background:var(--moon);color:var(--nib)}
.alerts label{display:block;margin:0 0 10px;font-size:16px}
.alerts__row{display:flex;flex-wrap:wrap;gap:8px}
.alerts input[type=email]{flex:1 1 200px;min-width:0;min-height:48px;padding:0 14px;border:1px solid var(--rule);border-radius:12px;background:var(--sheet);color:var(--nib);font:400 16px/1.2 var(--sans)}
.alerts input[type=email]:focus-visible{outline:3px solid var(--flight);outline-offset:2px}
.alerts .btn{flex:0 0 auto}
.alerts .trap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.alerts__say{margin:10px 0 0;font-weight:600;min-height:0}
.alerts__say:empty{display:none}
.alerts__small{margin:10px 0 0;font-size:15px;color:var(--nib-soft)}
.alerts__small a{display:inline-flex;align-items:center;min-height:44px}

/* =========================================================================
   Release 008 (Musab, 14 Oct 2026): layout A2. Dark bar on top, wide ad strip above the dials,
   a right-hand column (Closing soon + one ad) beside the cards on a computer, a Guides block,
   guide pages, and a dark footer with the copyright line. Brand colours only.
   ========================================================================= */
/* the dark bar above the logo: computers only */
.util{display:none;background:var(--nib);color:var(--moon);font-size:15px}
.util .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px}
.util nav{display:flex}
.util a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;color:var(--moon);text-decoration:none}
.util a:hover{color:#fff;text-decoration:underline}
.util a:focus-visible{outline-color:var(--moon)}
@media (min-width:760px){.util{display:block}}

/* the wide ad strip above "Turn the dial." Its height is kept, so the page never jumps. */
.strip{display:flex;flex-direction:column;align-items:center;gap:6px;padding-top:clamp(16px,3vh,28px)}
.stripbox{width:320px;max-width:100%;height:100px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  border:2px dashed var(--rule);border-radius:10px;background:var(--paper-sunk);color:var(--nib-soft);text-decoration:none;text-align:center}
.stripbox:hover{color:var(--nib);border-color:var(--nib-soft)}
.stripbig{font:400 20px/1.2 var(--serif)}
.stripsize{font-size:15px;font-weight:700}
.s-wide{display:none}
@media (min-width:760px){.stripbox{width:728px;height:90px;flex-direction:row;gap:14px}.s-wide{display:inline}.s-phone{display:none}}
.strip + .mast{padding-top:clamp(12px,3vh,28px)}
.adbox--house small,.inad__box small{display:block;margin-top:6px;font:700 15px/1.2 var(--sans);color:var(--nib-soft)}

/* the cards with the right-hand column beside them (computers) */
.homegrid{display:block}
.side{display:none}
@media (min-width:1000px){
  .homegrid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:40px;align-items:start}
  .homegrid .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .side{display:flex;flex-direction:column;gap:28px;padding-top:8px}
  /* Release 014b: the column runs the full height of the dates/guide, so the 300 x 600 box can stay in view */
  .homegrid > .side,.guide > .side{align-self:stretch}
  .side .sidead{position:sticky;top:16px;padding:6px}
}
.sec{display:inline-block;margin:0 0 6px;padding-bottom:8px;border-bottom:3px solid var(--flight);font:400 24px/1.15 var(--serif)}
.soon__list{list-style:none;margin:0;padding:0}
.soon__list li{border-top:1px solid var(--hairline)}
.soon__list li:first-child{border-top:0}
.soon__list a{display:grid;grid-template-columns:64px minmax(0,1fr);gap:10px;padding:10px 0;min-height:44px;text-decoration:none;color:var(--nib);font-size:15px}
.soon__list a:hover .soon__t{text-decoration:underline}
.soon__d{font-weight:700;color:var(--flight)}
.soon__t{font-weight:600}
.more-link{display:inline-flex;align-items:center;min-height:44px;font-weight:700}
.sidead{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px;border:2px dashed var(--rule);border-radius:var(--r);background:var(--moon)}

/* Guides on the home page */
.ghome{margin-top:clamp(36px,6vh,56px);padding-top:8px}
.ghome__head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.ghome__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
@media (min-width:900px){.ghome__grid{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px}.ghome__grid--one{grid-template-columns:minmax(0,1fr)}}
.ghome__grid--one .gcard--lead{max-width:760px}
.ghome__rest{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;margin-top:28px}
@media (min-width:640px){.ghome__rest{grid-template-columns:repeat(2,minmax(0,1fr))}}
.homemain{min-width:0}
.gcard{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:var(--nib)}
.gcard img{display:block;width:100%;height:auto;border-radius:12px;background:var(--paper-sunk)}
.gcard:hover .gcard__t{text-decoration:underline}
.gtag{margin:8px 0 0;font-size:15px;font-weight:700;color:var(--flight)}
.gcard__t{font:400 21px/1.25 var(--serif)}
.gcard--lead .gcard__t{font-size:clamp(24px,3vw,30px)}
.gcard__s{color:var(--nib-soft)}
.glist{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;margin-top:18px}
@media (min-width:760px){.glist{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* one guide: text on the left, ad + Closing soon on the right (computers) */
.guide{display:block;padding-top:clamp(12px,3vh,28px)}
@media (min-width:1000px){.guide{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:56px;align-items:start}
  .side--guide{padding-top:60px}}
/* Release 023: the one-deadline page uses the guide layout (right column on computers, Read next under the ad on phones) */
.one__main{min-width:0;max-width:760px}
.one .answer{margin-top:4px}
.one__next{margin-top:8px}
@media (min-width:1000px){.one__next{display:none}.one .side--guide{padding-top:8px}}
.guide__text{max-width:700px;font-size:18px;line-height:1.65}
.guide__text h1{font-size:clamp(30px,4.4vw,42px);line-height:1.12;margin:4px 0 10px}
.guide__text h2{margin-top:1.6em}
.guide__text li{margin-bottom:.45em}
.guide__text .gtag{margin:6px 0 0}
.byline{font-size:15px;color:var(--nib-soft);margin:0 0 20px}
.guide__img{display:block;width:100%;height:auto;border-radius:14px;margin:0 0 24px;background:var(--paper-sunk)}
.inad{display:flex;flex-direction:column;align-items:center;gap:6px;margin:10px 0 26px;padding:14px 0;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.inad__box{width:300px;max-width:100%;aspect-ratio:300/250;display:flex;align-items:center;justify-content:center;text-align:center;
.inad__box--img{padding:0;overflow:hidden;background:var(--paper-sunk)}.inad__box--img img{display:block;width:100%;height:100%;object-fit:contain}
  border:2px dashed var(--rule);border-radius:10px;background:var(--paper-sunk);color:var(--nib-soft);text-decoration:none;font:400 20px/1.2 var(--serif)}
.glive{margin:30px 0 0;border:1px solid var(--hairline);border-radius:var(--r);background:var(--moon);overflow:hidden}
.glive h2{margin:0;padding:14px 16px 10px;font-size:21px}
.glive__list{list-style:none;margin:0;padding:0}
.glive__list li{display:grid;grid-template-columns:minmax(0,1fr);gap:2px 14px;padding:10px 16px;border-top:1px solid var(--hairline);font-size:15px;line-height:1.45}
@media (min-width:640px){.glive__list li{grid-template-columns:130px minmax(0,1fr) auto;align-items:center}}
.glive__d{font-weight:700}
.glive__list a{display:inline-flex;align-items:center;min-height:44px;font-weight:700}
.small{font-size:15px;color:var(--nib-soft);margin-top:16px}

/* the dark footer */
.foot{background:var(--nib);color:var(--moon);border-top:0}
.foot a{color:var(--moon)}
.foot a:hover{color:#fff}
.foot a:focus-visible,.foot :focus-visible{outline-color:var(--moon)}
.foot .footnav a{text-decoration:underline}
.foot .visits{color:var(--moon)}
.foot strong{font:400 21px/1.2 var(--serif)}
.copy{margin:.6em 0 0}
.foot .alerts a{color:var(--flight)}
/* Release 010: guide previews in the right column, and the footer row with Total visits on the right */
.gside__list{list-style:none;margin:0 0 20px;padding:0}
.gside__list li{border-top:1px solid var(--hairline)}
.gside__list li:first-child{border-top:0}
.gside__list a{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;align-items:center;padding:10px 0;min-height:44px;text-decoration:none;color:var(--nib)}
.gside__list img{display:block;width:96px;height:96px;object-fit:cover;border-radius:10px;background:var(--paper-sunk)}
.gside__t{font:400 17px/1.3 var(--serif)}
.gside__list a:hover .gside__t{text-decoration:underline}
.ghome .sec a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.ghome .sec a:hover{text-decoration:underline}
.foot__row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 24px;margin:0 0 .5em}
.foot__row .visits{margin:0;margin-left:auto;text-align:right}

/* Release 020 (Musab: "4 words per line"): the small guide cards (Read next, the grid under the dates,
   All guides) all use the same title width, at most 3 lines, and the same height, so they line up.
   The lead card on Home keeps its big full title. */
.gside__t{max-width:19ch;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;
  min-height:calc(3 * 1.3em)}
.gside__list a{align-items:start}
.gcard:not(.gcard--lead) .gcard__t{max-width:19ch;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;
  overflow:hidden;min-height:calc(3 * 1.25em)}
.gcard:not(.gcard--lead) .gcard__s{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;
  min-height:calc(3 * 1.5em)}
/* All guides page (Musab, 20 Oct): titles use the full card width; still at most 3 lines, cards line up */
.glist .gcard:not(.gcard--lead) .gcard__t{max-width:none;min-height:0}