/* ══════════════════════════════════════════════════════════════
   Fluency Review — shared stylesheet
   Light by default. Dark only when data-theme="dark" is set.
   The OS setting is deliberately ignored.
   ══════════════════════════════════════════════════════════════ */

:root{
  --paper:#fafaf7;
  --raise:#ffffff;
  --ink:#14110f;
  /* standfirsts: halfway between the prose and the grey. Ink made
     them compete with the title; grey made them a caption on it. */
  --ink-soft:#47433e;
  --muted:#6f6962;
  --hair:#d9d3c6;
  --hair-soft:#ece6d8;
  --accent:#5b2edf;
  --accent-ink:#ffffff;
  --accent-soft:rgba(91,46,223,.075);
  --accent-line:rgba(91,46,223,.34);
  --good:#3f7d54;
  --accent-2:#14554a;
  --accent-2-soft:rgba(20,85,74,.075);
  --accent-2-line:rgba(20,85,74,.34);

  --sans:'Instrument Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --serif:'Petrona', Georgia, 'Times New Roman', serif;
  --wordmark:'Fraunces', 'Times New Roman', Georgia, serif;
  --mono:'JetBrains Mono', ui-monospace, Menlo, monospace;

  --gutter:clamp(20px, 5vw, 56px);
  /* The page's outer frame: what the front page's widest things —
     the tapestry strip, the card rows, the footer — actually span.
     Reading pages cap .wrap at 1080 for the measure's sake, so their
     furniture has to be told this width rather than inherit it. */
  --frame-w:calc(min(1520px, 100vw) - 2 * var(--gutter));
  /* 43rem is 688px, within twelve of the New Yorker's 676, and puts
     a line at about 78 characters instead of 85. Articles run 2.8%
     longer for it. 41rem would have bought one more character and
     broken the titles onto a second line. */
  --measure:43rem;
}

[data-theme="dark"]{
  --paper:#14110f;
  --raise:#1c1917;
  --ink:#f2ede5;
  --ink-soft:#c6c0b8;
  --muted:#9a938a;
  --hair:#302a26;
  --hair-soft:#241f1c;
  --accent:#a98cff;
  --accent-ink:#14110f;
  --accent-soft:rgba(169,140,255,.11);
  --accent-line:rgba(169,140,255,.38);
  --good:#7fb894;
  --accent-2:#6bbfa6;
  --accent-2-soft:rgba(107,191,166,.11);
  --accent-2-line:rgba(107,191,166,.34);
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.62;
  font-feature-settings:"ss01","cv11";
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{color:inherit}
button{font:inherit;color:inherit}
::selection{background:var(--accent);color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

.wrap{max-width:1080px;margin:0 auto;padding:0 var(--gutter)}
.col{max-width:var(--measure);margin:0 auto}

/* ── Fraunces, set the way the font intends ────────────────────
   These rules used to force "opsz" 144 (or 72) at rendered sizes
   of 20–58px, which loads a drawing meant for 144px: hairline
   strokes, brittle at real size. font-variation-settings:normal
   hands opsz back to font-optical-sizing:auto, which is the CSS
   default, so each size gets the drawing made for it. It also
   restores the font's own defaults — SOFT 0 and WONK 1 — so the
   quirky alternates are on rather than switched off. Tracking is
   loosened to suit; tighter at display size, looser as text
   shrinks. The wordmark is deliberately excluded.
   ───────────────────────────────────────────────────────────── */
/* ── Fraunces presets ─────────────────────────────────────── */
.f-head{
  font-family:var(--serif);
  font-variation-settings:normal;
  font-weight:400;
  letter-spacing:-.008em;
  line-height:1.14;
}
.label{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--muted);
}

/* ── masthead — restored from the original design ─────────── */
.masthead{
  padding-top:14px;padding-bottom:0;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  border-bottom:1px solid var(--ink);
}
.masthead-left{display:flex;align-self:stretch;align-items:flex-end;justify-content:flex-start;padding:0 0 24px;min-width:0}
.wordmark{
  font-family:var(--wordmark);
  font-variation-settings:"opsz" 144, "SOFT" 50, "WONK" 1;
  font-weight:420;
  font-size:clamp(27.2px,3.68vw,54.4px);
  letter-spacing:-0.025em;line-height:1;
  display:flex;align-items:baseline;gap:0;justify-content:center;
  padding:18px 36px;text-align:center;text-decoration:none;color:inherit;
}
.wordmark .w-fluency{font-style:italic;font-variation-settings:"opsz" 144, "SOFT" 60, "WONK" 1;font-weight:360}
.wordmark .w-review{font-style:normal;font-weight:420;color:var(--accent)}
.nav{display:flex;gap:24px;align-items:center;justify-content:flex-end;padding:18px 0}
.nav a{
  font-family:var(--sans);font-size:13.5px;font-weight:500;color:var(--ink);
  position:relative;padding:4px 0;text-decoration:none;transition:color .15s;
}
.nav a:hover{color:var(--accent)}
.nav .signin{
  display:inline-flex;align-items:center;gap:8px;padding:7px 14px;
  border:1px solid var(--ink);border-radius:999px;font-size:13px;white-space:nowrap;
  transition:background .15s,color .15s,border-color .15s;
}
.nav .signin:hover{background:var(--ink);color:var(--paper)}
.theme-toggle{
  appearance:none;background:transparent;border:1px solid var(--hair);
  border-radius:50%;width:32px;height:32px;padding:0;cursor:pointer;
  display:inline-grid;place-items:center;color:var(--muted);
  transition:border-color .15s,color .15s;
}
.theme-toggle:hover{border-color:var(--accent-line);color:var(--accent)}
.theme-toggle svg{width:15px;height:15px;display:block}
.theme-toggle .i-sun{display:none}
[data-theme="dark"] .theme-toggle .i-moon{display:none}
[data-theme="dark"] .theme-toggle .i-sun{display:block}

/* ── issue strip — restored ───────────────────────────────── */
.issue{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:baseline;
  padding:9px 0;border-bottom:1px solid var(--hair);gap:24px;
}
.issue .cell{
  font-family:var(--sans);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);display:flex;gap:8px;align-items:baseline;white-space:nowrap;
}
.issue .date-cell{color:var(--ink);justify-self:start}
.issue .cell b{color:var(--ink);font-weight:600}

@media (max-width:900px){
  .masthead{grid-template-columns:1fr;grid-template-rows:auto auto}
  .masthead-left{display:none}
  .wordmark{padding:18px 0 14px;font-size:clamp(24px,5.2vw,44.8px)}
  .nav{justify-content:center;padding:0 0 16px}
}
@media (max-width:700px){
  .nav{gap:18px}
  .issue{grid-template-columns:1fr;justify-items:center;gap:8px}
  .issue .date-cell{justify-self:center}
}
@media (max-width:520px){
  .wordmark{font-size:clamp(22.4px,6.56vw,36.8px)}
}

/* ── article header ───────────────────────────────────────── */
/* Centred by default. Every layout class centres its head; the
   default never had a rule, so the four articles carrying no
   layout class were falling back to flush left — the largest
   type on the site, in the narrowest column, out of step with
   the other seven. */
.art-head{padding:52px 0 0;text-align:center}
.art-tags{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:22px;
}
.tag{
  font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;border:1px solid var(--hair);color:var(--muted);
  white-space:nowrap;
}
.tag.is-level{border-color:var(--accent-line);color:var(--accent);background:var(--accent-soft)}
.art-title{
  font-family:var(--serif);
  font-optical-sizing:auto;
  font-variation-settings:normal;
  font-weight:500;
  font-size:clamp(34px,5.6vw,58px);
  letter-spacing:-.012em;
  /* 1.02 brought the descenders of a wrapped title within a couple of
     pixels of the ascenders below them */
  line-height:1.08;
  margin:0 0 20px;
  text-wrap:balance;
}
.art-standfirst{
  font-family:'Crimson Pro', Georgia, 'Times New Roman', serif;
  font-size:clamp(19.5px,2.4vw,24px);
  font-weight:400;
  font-style:normal;
  line-height:1.46;
  color:var(--ink-soft);
  margin:0 0 26px;
  text-wrap:pretty;
}
.art-byline{
  display:flex;flex-wrap:wrap;gap:8px 18px;align-items:baseline;
  padding:13px 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);
}
.art-byline b{color:var(--ink);font-weight:500}

/* ── article body ─────────────────────────────────────────── */
.art-body{
  padding:38px 0 0;
  font-family:'Crimson Pro', Georgia, 'Times New Roman', serif;
  font-size:21px;
  line-height:1.62;
}
.art-body p{margin:0 0 24px;text-wrap:pretty}
.art-body h2{
  font-family:var(--serif);
  font-variation-settings:normal;
  font-weight:400;
  font-size:clamp(23px,3vw,29px);
  letter-spacing:-.008em;
  line-height:1.18;
  margin:44px 0 18px;
  text-wrap:balance;
}
.art-body p.lede::first-letter{
  font-family:var(--serif);
  font-variation-settings:normal;
  font-weight:420;
  float:left;
  font-size:4.05em;
  line-height:.78;
  padding:6px 10px 0 0;
  color:var(--accent);
}
.art-body .pull{
  font-family:'Crimson Pro', Georgia, 'Times New Roman', serif;
  font-size:clamp(24px,3.1vw,31px);
  font-weight:400;
  font-style:normal;
  line-height:1.34;
  color:var(--ink);
  border-left:2px solid var(--accent);
  padding-left:24px;
  margin:34px 0;
  text-wrap:balance;
}

/* ── inline glossary ──────────────────────────────────────── */
.gloss{
  border:0;background:transparent;padding:0;
  font:inherit;color:inherit;cursor:pointer;
  border-bottom:1.5px dotted var(--accent-line);
  transition:background .15s;
}
.gloss:hover{background:var(--accent-soft)}
.gloss.is-open{background:var(--accent-soft);border-bottom-style:solid;border-bottom-color:var(--accent)}
.gloss-note{
  display:block;
  margin:-8px 0 24px;
  padding:13px 16px;
  background:var(--accent-soft);
  border-left:2px solid var(--accent);
  font-family:var(--sans);
  font-size:14.5px;
  line-height:1.55;
  color:var(--ink);
}
.gloss-note b{font-weight:650;color:var(--accent)}

/* ── learning suite ───────────────────────────────────────── */
.learn{
  margin:60px auto 0;
  border:1px solid var(--hair);
  background:var(--raise);
}
.learn-head{padding:26px 26px 20px;border-bottom:1px solid var(--hair)}
.learn-head h2{
  font-family:var(--serif);
  font-variation-settings:normal;
  font-weight:400;font-size:26px;letter-spacing:-.008em;line-height:1.15;
  margin:9px 0 6px;
}
.learn-head p{margin:0;font-size:14.5px;line-height:1.5;color:var(--muted)}
/* ── the strip ──────────────────────────────────────────────────
   It stays with you. This was a phone-only rule, but the reason for
   it is stronger on a desktop: the Words pane is thousands of pixels
   there, and All is reachable, so without this you end up several
   screens below the only control that changes tab.

   60px is the sticky masthead less its hairline — the same relation
   the phone rule's 43 has to its 44. overflow must be visible, not
   auto: a scroll container cannot hold a sticky child. The four tabs
   need about 320px of a 686px rail, so nothing was scrolling anyway.

   The rail holds three things: the tablist, a readout, and the meter
   along its bottom edge. Only the tablist carries the tab roles.
   ───────────────────────────────────────────────────────────── */
.learn-nav{
  position:sticky;top:60px;z-index:40;
  display:flex;align-items:center;
  background:var(--raise);
  border-bottom:1px solid var(--hair);
}
.learn-tabs{display:flex;overflow:visible}
.learn-pct{
  margin-left:auto;padding-right:24px;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;
}
.learn-pct.is-done{color:var(--good)}
/* sits on the rail's own hairline, so a section not yet started shows
   a rule and a started one shows how far along it is */
.learn-bar{
  position:absolute;left:0;right:0;bottom:-1px;height:2px;
  overflow:hidden;pointer-events:none;
}
.learn-bar i{
  display:block;height:100%;background:var(--accent);
  width:var(--p,0%);transition:width .4s ease;
}
@media (prefers-reduced-motion:reduce){.learn-bar i{transition:none}}
.learn-tabs button{
  appearance:none;background:transparent;border:0;
  border-bottom:2px solid transparent;
  padding:14px 20px;cursor:pointer;white-space:nowrap;
  font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);transition:color .15s,border-color .15s;
}
.learn-tabs button:hover{color:var(--ink)}
.learn-tabs button[aria-selected="true"]{color:var(--accent);border-bottom-color:var(--accent)}
.learn-pane{padding:26px}
.learn-pane[hidden]{display:none}
.pane-intro{margin:0 0 20px;font-size:14.5px;line-height:1.55;color:var(--muted);max-width:58ch}

/* ── searching the word list ───────────────────────────────────
   A box the width of the list, because it filters the whole of it.
   type=search so a phone keyboard offers the right return key and
   the browser draws its own clear button.
   ───────────────────────────────────────────────────────────── */
.word-search{margin:0 0 13px}
.word-search input{
  width:100%;box-sizing:border-box;
  border:1px solid var(--hair);border-radius:3px;
  background:var(--paper);color:var(--ink);
  padding:11px 14px;font-family:inherit;font-size:14.5px;
  transition:border-color .15s;
}
.word-search input::placeholder{color:var(--muted)}
.word-search input:focus{border-color:var(--accent-line);outline:none}
.words-empty{
  display:none;margin:2px 0 0;
  font-size:14.5px;line-height:1.55;color:var(--muted);
}
.words-empty.is-on{display:block}

/* words */
/* auto-fill rather than a breakpoint: two columns wherever two fit,
   one where they do not, so the phone needs no rule of its own. A
   card's definition runs to about 300px inside a 602px box, so the
   second column costs nothing in legibility and takes 5,095px of
   scrolling down to 3,141.

   start, not stretch: expanding one card to show its example should
   not stretch an empty twin beside it. */
.words{
  display:grid;gap:11px;
  grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
  align-items:start;
}
.word{
  border:1px solid var(--hair);background:var(--paper);
  padding:15px 16px;border-radius:3px;cursor:pointer;text-align:left;
  transition:border-color .16s,background .16s,transform .16s;
  display:block;width:100%;
}
.word:hover{border-color:var(--accent-line);transform:translateY(-1px)}
.word.is-saved{border-color:var(--accent-line);background:var(--accent-soft)}
.word-top{display:flex;justify-content:space-between;gap:14px;align-items:baseline;margin-bottom:5px}
.word-term{font-family:var(--serif);font-size:20px;font-weight:400;letter-spacing:-.012em}
.word-save{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);white-space:nowrap;
}
.word-def{font-size:14px;line-height:1.5;color:var(--muted);margin:0}
.word-ex{
  margin:11px 0 0;padding-top:11px;border-top:1px solid var(--hair);
  font-family:var(--serif);font-size:15px;font-style:italic;line-height:1.45;color:var(--ink);
}
.word[aria-expanded="false"] .word-ex{display:none}
.saved-count{
  margin-top:16px;font-family:var(--mono);font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);
}
.saved-count b{color:var(--accent);font-weight:500}

/* quiz */
.quiz-q{
  font-family:var(--serif);font-size:21px;font-weight:400;line-height:1.28;
  letter-spacing:-.014em;margin:0 0 16px;text-wrap:pretty;
}
.quiz-opts{display:grid;gap:9px}
.quiz-opts button{
  appearance:none;text-align:left;cursor:pointer;
  border:1px solid var(--hair);background:var(--paper);
  padding:12px 16px;border-radius:3px;font-size:14.5px;
  transition:border-color .15s,background .15s,color .15s,opacity .15s;
}
.quiz-opts button:hover:not(:disabled){border-color:var(--accent-line)}
.quiz-opts button:disabled{cursor:default}
.quiz-opts button.is-right{border-color:var(--good);color:var(--good);font-weight:650;background:transparent}
.quiz-opts button.is-wrong{opacity:.45;text-decoration:line-through}
.quiz-fb{
  margin-top:16px;min-height:44px;font-size:14.5px;line-height:1.55;color:var(--muted);
}
.quiz-fb.show{color:var(--ink)}
.quiz-nav{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  margin-top:18px;padding-top:15px;border-top:1px solid var(--hair);
}
.quiz-pos{font-family:var(--mono);font-size:11px;letter-spacing:.13em;color:var(--muted);font-variant-numeric:tabular-nums}
.btn{
  appearance:none;cursor:pointer;border:1px solid var(--accent);
  background:var(--accent);color:var(--accent-ink);
  padding:9px 20px;border-radius:999px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  transition:opacity .15s;
}
.btn:hover{opacity:.85}
.btn:disabled{opacity:.3;cursor:default}
.btn.ghost{background:transparent;color:var(--accent)}

/* speak + write */
.prompts{display:grid;gap:14px;margin:0 0 26px;padding:0;list-style:none;counter-reset:pq}
.prompts li{
  position:relative;padding-left:34px;
  font-family:var(--serif);font-size:18px;line-height:1.45;font-weight:380;
}
.prompts li::before{
  counter-increment:pq;content:counter(pq);
  position:absolute;left:0;top:3px;
  font-family:var(--mono);font-size:11px;color:var(--accent);
  border:1px solid var(--accent-line);border-radius:50%;
  width:22px;height:22px;display:grid;place-items:center;
}
/* ── marking ───────────────────────────────────────────────────
   Every note quotes the learner's own words, struck through, with
   the correction under it. A correction you cannot find in your own
   text teaches nothing, so notes that cannot be quoted exactly are
   dropped on the way out of the endpoint.
   ───────────────────────────────────────────────────────────── */
.check-row{
  display:flex;align-items:center;flex-wrap:wrap;gap:12px 16px;margin:18px 0 0;
}
.check-hint{font-family:var(--sans);font-size:12.5px;color:var(--muted);max-width:42ch}

.marking:not(:empty){
  margin:22px 0 0;padding:20px 22px;
  border:1px solid var(--hair);border-radius:3px;background:var(--raise);
}
.marking-summary{
  margin:0 0 14px;font-family:var(--serif);font-size:18px;line-height:1.45;
}
.marking-note{margin:0;font-family:var(--sans);font-size:14px;color:var(--muted)}

.chips-count{
  margin:0 0 7px;font-family:var(--sans);font-size:12.5px;color:var(--muted);
}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 16px}
.chip{
  font-family:var(--sans);font-size:12px;font-weight:600;
  border:1px solid var(--hair);border-radius:999px;padding:5px 11px;
  color:var(--muted);
}
.chip.is-on{
  border-color:var(--good);color:var(--good);
}
.chip.is-on::before{content:'✓ ';}

.marking-notes{margin:0;padding:0 0 0 22px;display:grid;gap:16px}
.marking-notes li{font-family:var(--sans)}
.marking-notes .was{margin:0;font-size:14.5px;color:var(--muted)}
.marking-notes .was s{text-decoration-color:var(--accent-line)}
.marking-notes .fix{
  margin:3px 0 0;font-size:15px;font-weight:600;color:var(--ink);
}
.marking-notes .why{margin:3px 0 0;font-size:13px;color:var(--muted)}

/* ── reading level ─────────────────────────────────────────────
   One article, three levels of support. A term the reader's level
   no longer needs stops being a button and goes back to being
   ordinary prose — the sentence is unchanged, the help is gone.
   ───────────────────────────────────────────────────────────── */
.levels{
  display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;
  justify-content:center;
  max-width:var(--measure);margin:0 auto 40px;
  padding-bottom:20px;border-bottom:1px solid var(--hair);
}
.levels-label{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
}
.levels-group{display:inline-flex;border:1px solid var(--hair);border-radius:999px;overflow:hidden}
.levels-group .level{
  border:0;background:none;cursor:pointer;color:var(--muted);
  font-family:var(--sans);font-size:12.5px;font-weight:600;
  padding:7px 15px;transition:background .16s,color .16s;
}
.levels-group .level + .level{border-left:1px solid var(--hair)}
.levels-group .level:hover{color:var(--ink)}
.levels-group .level.is-on{background:var(--ink);color:var(--paper)}
.lang-pick{
  font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--muted);
  background:var(--paper);border:1px solid var(--hair);border-radius:999px;
  padding:6px 10px;cursor:pointer;
}
.lang-pick:hover{color:var(--ink);border-color:var(--accent-line)}
.levels-note{
  font-family:var(--sans);font-size:12px;color:var(--muted);
}
.lookup-tr{
  margin:10px 0 0;padding-top:9px;border-top:1px solid var(--hair);
  font-family:var(--sans);font-size:14px;line-height:1.4;color:var(--ink);
}

/* Two editions of one article: both are in the page, and the class
   set on <html> before first paint decides which one is showing. */
html:not(.ed-advanced) [data-edition="advanced"],
html.ed-advanced [data-edition="intermediate"]{display:none}

/* switched off by the level: prose again, but still double-clickable */
.gloss.is-off{
  border-bottom:0;background:none;cursor:auto;
}

/* ── the B1 primer ─────────────────────────────────────────────
   A way in for the reader who would otherwise meet the argument
   and the vocabulary at the same time.
   ───────────────────────────────────────────────────────────── */
.primer{
  margin:0 auto 34px;padding:22px 24px;
  background:var(--accent-soft);
  border:1px solid var(--accent-line);border-radius:3px;
}
.primer h2{
  margin:0 0 12px;
  font-family:var(--mono);font-size:10.5px;font-weight:400;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
}
.primer ul{margin:0;padding:0;list-style:none;display:grid;gap:9px}
.primer li{
  font-family:var(--sans);font-size:14.5px;line-height:1.5;
  padding-left:16px;position:relative;
}
.primer li::before{
  content:'';position:absolute;left:0;top:9px;
  width:5px;height:5px;border-radius:50%;background:var(--accent-line);
}

/* ── the small-talk head, centred ──────────────────────────────
   layout-fullbleed carries one article. Title and standfirst sit
   centred over a picture that runs the full viewport width.
   ───────────────────────────────────────────────────────────── */
.layout-fullbleed .art-head{text-align:center}
.layout-fullbleed .art-standfirst{
  max-width:42rem;margin-left:auto;margin-right:auto;
}

/* The head stays tight because the picture below is the point of
   this layout. The reading time used to cost it a line; it now sits
   in the level row under the picture instead. */
.layout-fullbleed .art-head{padding-top:34px}
.layout-fullbleed .art-title{margin-bottom:16px}
.layout-fullbleed .art-standfirst{margin-bottom:12px}


/* ── double-click lookup ───────────────────────────────────────
   A small card above the word, rather than a note under the
   paragraph: this fires anywhere in the prose, and reflowing the
   text every time somebody checked a word would be unreadable.
   ───────────────────────────────────────────────────────────── */
.lookup{
  position:absolute;z-index:70;
  max-width:290px;min-width:170px;
  background:var(--raise);color:var(--ink);
  border:1px solid var(--hair);border-radius:3px;
  padding:12px 14px;
  box-shadow:0 8px 26px rgba(0,0,0,.13);
}
.lookup-word{
  display:block;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
  font-weight:400;margin-bottom:6px;
}
.lookup-def{
  margin:0;font-family:var(--sans);font-size:14px;line-height:1.45;
}
.lookup-senses{
  margin:0;padding:0;list-style:none;
  display:grid;gap:8px;
}
.lookup-senses li{
  font-family:var(--sans);font-size:14px;line-height:1.45;
}
.lookup-pos{
  display:block;font-style:normal;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-bottom:1px;
}
.lookup-src{
  display:block;margin-top:8px;
  font-family:var(--sans);font-size:11px;color:var(--muted);
}
@media (prefers-reduced-motion:no-preference){
  .lookup{animation:lookup-in .13s ease-out}
}
@keyframes lookup-in{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}

/* ── word filter ───────────────────────────────────────────────
   Words are grouped by what kind of thing they are — a phrasal verb
   is not learned the way a single word is — so the list can be cut
   down to one kind at a time.
   ───────────────────────────────────────────────────────────── */
.word-filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.word-filter .pill{
  display:inline-flex;align-items:center;gap:7px;
  border:1px solid var(--hair);background:var(--paper);color:var(--muted);
  border-radius:999px;padding:7px 14px;cursor:pointer;
  font-family:var(--sans);font-size:12.5px;font-weight:600;
  transition:border-color .16s,background .16s,color .16s;
}
.word-filter .pill:hover{border-color:var(--accent-line);color:var(--ink)}
.word-filter .pill i{
  font-style:normal;font-family:var(--mono);font-size:10.5px;
  color:var(--muted);
}
.word-filter .pill.is-on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.word-filter .pill.is-on i{color:var(--paper);opacity:.7}
.word.is-hidden{display:none}

/* ── discussion rounds ─────────────────────────────────────────
   Four passes over the same article, running from what the learner
   can already say to what they cannot yet. Only the first is open.
   An article still carrying a flat prompt list gets .is-bare, which
   renders as the plain list it always was.
   ───────────────────────────────────────────────────────────── */
.round{border-top:1px solid var(--hair)}
.round:last-of-type{border-bottom:1px solid var(--hair);margin-bottom:26px}
.round-head{
  display:flex;align-items:flex-start;gap:14px;width:100%;
  background:none;border:0;cursor:pointer;text-align:left;
  padding:16px 0;color:inherit;
}
.round-n{
  flex:none;font-family:var(--mono);font-size:11px;color:var(--accent);
  border:1px solid var(--accent-line);border-radius:50%;
  width:24px;height:24px;display:grid;place-items:center;margin-top:1px;
}
.round-text{display:block;flex:1 1 auto;min-width:0}
.round-title{
  display:block;font-family:var(--sans);font-size:15px;font-weight:600;
  color:var(--ink);
}
.round-why{
  display:block;font-size:13.5px;line-height:1.45;color:var(--muted);margin-top:2px;
}
.round-chev{
  flex:none;width:10px;height:10px;margin-top:6px;
  border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);
  transform:rotate(45deg);transition:transform .18s;
}
.round.is-open .round-chev{transform:rotate(-135deg)}
.round .prompts{display:none;margin:0;padding:0 0 22px 38px}
.round.is-open .prompts{display:grid}
.round.is-bare{border:0}
.round.is-bare .prompts{display:grid;padding:0 0 26px}

.phrasebank{border:1px solid var(--hair);background:var(--paper);padding:20px 22px;border-radius:3px}
.phrasebank h3{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin:0 0 4px;font-weight:400;
}
.phrasebank .why{font-size:13.5px;line-height:1.5;color:var(--muted);margin:0 0 16px}
.phrases{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.phrases li{
  font-family:var(--serif);font-size:17px;line-height:1.4;font-weight:380;
  padding-left:16px;border-left:2px solid var(--accent-line);
}
.phrases li em{font-style:normal;color:var(--muted);font-family:var(--sans);font-size:13px;display:block;margin-top:3px}

.task{border:1px solid var(--hair);background:var(--paper);padding:20px 22px;border-radius:3px;margin-bottom:20px}
.task h3{font-family:var(--sans);font-size:15px;font-weight:650;margin:0 0 8px}
.task p{margin:0 0 12px;font-size:15px;line-height:1.58}
.task p:last-child{margin-bottom:0}
.task ol{margin:0;padding-left:20px;display:grid;gap:8px;font-size:15px;line-height:1.55}
.writer{
  width:100%;min-height:170px;resize:vertical;
  border:1px solid var(--hair);border-radius:3px;background:var(--raise);
  color:var(--ink);padding:16px;font-family:var(--sans);font-size:15.5px;line-height:1.6;
}
.writer:focus{border-color:var(--accent-line);outline:none}
.writer-foot{
  display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:11px;
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}
.writer-foot b{color:var(--accent);font-weight:500;font-variant-numeric:tabular-nums}

/* ── article foot ─────────────────────────────────────────── */
.art-foot{
  margin:56px auto 0;padding:26px 0;border-top:1px solid var(--hair);
  display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center;
}
.grammar-links{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.grammar-links .label{margin-right:4px}
.glink{
  font-size:13.5px;text-decoration:none;color:var(--accent);
  border:1px solid var(--accent-line);border-radius:999px;padding:6px 14px;
  transition:background .15s;
}
.glink:hover{background:var(--accent-soft)}

/* ── the footer ────────────────────────────────────────────────
   Four columns: the masthead and what the site is, then Read, Learn
   and Account. A rule above it, a lighter rule above the colophon.
   Links to pages that do not exist yet go to /soon carrying the name
   they were meant to be, rather than nowhere or to a 404.
   ───────────────────────────────────────────────────────────── */
.site-foot{
  border-top:1px solid var(--ink);
  margin-top:clamp(56px,6vw,88px);
}
.foot-grid{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) repeat(3, minmax(0,1fr));
  gap:clamp(26px,3vw,48px);
  padding-top:clamp(34px,3.4vw,54px);
  padding-bottom:clamp(30px,3vw,48px);
}

.foot-wordmark{
  display:inline-flex;align-items:baseline;
  font-family:var(--wordmark);
  font-variation-settings:"opsz" 144, "SOFT" 50, "WONK" 1;
  font-weight:420;font-size:27px;letter-spacing:-0.02em;line-height:1;
  text-decoration:none;color:var(--ink);
}
.foot-wordmark .w-fluency{font-style:italic;font-weight:360}
.foot-wordmark .w-review{color:var(--accent)}
.foot-brand p{
  margin:14px 0 0;max-width:34ch;
  font-family:'Crimson Pro', Georgia, serif;font-style:italic;
  font-size:16.5px;line-height:1.5;color:var(--muted);
}

.foot-col{display:flex;flex-direction:column;align-items:flex-start}
.foot-col h2{
  margin:0 0 14px;
  font-family:var(--sans);font-size:10.5px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
}
.foot-col a{
  font-family:var(--sans);font-size:15px;line-height:1.35;
  color:var(--ink);text-decoration:none;padding:5px 0;
  transition:color .15s;
}
.foot-col a:hover{color:var(--accent)}

.foot-base{
  display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;
  align-items:baseline;
  border-top:1px solid var(--hair);
  padding-top:18px;padding-bottom:34px;
  font-family:var(--sans);font-size:12.5px;color:var(--muted);
}
.foot-legal{display:flex;flex-wrap:wrap;gap:6px 22px}
.foot-legal a{color:var(--muted);text-decoration:none;transition:color .15s}
.foot-legal a:hover{color:var(--ink)}

@media (max-width:860px){
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/-1}
}
@media (max-width:520px){
  .foot-grid{grid-template-columns:1fr;gap:26px}
  .foot-base{flex-direction:column;align-items:flex-start}
}

/* ── in development ────────────────────────────────────────────
   Where a footer link goes when the page behind it is planned but
   not built. The link passes the name, so the page can say which.
   ───────────────────────────────────────────────────────────── */
.soon{padding:clamp(60px,9vw,130px) 0 clamp(50px,7vw,90px);text-align:center}
.soon-label{
  margin:0 0 16px;font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent);
}
.soon-title{
  margin:0 0 16px;font-family:var(--serif);font-optical-sizing:auto;
  font-variation-settings:normal;font-weight:500;
  font-size:clamp(30px,4vw,46px);line-height:1.06;letter-spacing:-.012em;
}
.soon-note{
  margin:0 auto 30px;max-width:44ch;
  font-family:'Crimson Pro', Georgia, serif;font-size:19px;line-height:1.5;
  color:var(--muted);
}

@media (max-width:600px){
  body{font-size:16px}
  .art-body{font-size:19px}
  .learn-pane,.learn-head{padding:20px}
}

/* ══════════════════════════════════════════════════════════════
   IMAGE SLOTS
   A frame is always drawn. If it contains no <img>, or the image
   fails to load, it renders as a designed placeholder rather than
   a hole. To add a picture, drop an <img> inside the frame — the
   placeholder disappears on its own.
   ══════════════════════════════════════════════════════════════ */

.frame{
  position:relative;display:block;width:100%;overflow:hidden;
  border-radius:3px;background:var(--hair-soft);
  aspect-ratio:3/2;
}
.frame img{width:100%;height:100%;object-fit:cover;display:block}
.frame::after{
  content:"";position:absolute;inset:0;border-radius:3px;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(20,17,15,.09);
}
[data-theme="dark"] .frame::after{box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}

/* the placeholder: fine diagonal hatch in the house neutrals, plus a label */
.frame:not(:has(img))::before,
.frame.img-failed::before{
  content:attr(data-label);
  position:absolute;inset:0;display:grid;place-items:center;
  background-image:repeating-linear-gradient(
    -45deg,
    transparent 0 9px,
    rgba(20,17,15,.038) 9px 10px
  );
  font-family:var(--mono);font-size:10px;letter-spacing:.19em;text-transform:uppercase;
  color:var(--muted);text-align:center;padding:16px;
}
[data-theme="dark"] .frame:not(:has(img))::before,
[data-theme="dark"] .frame.img-failed::before{
  background-image:repeating-linear-gradient(
    -45deg,
    transparent 0 9px,
    rgba(255,255,255,.045) 9px 10px
  );
}
.frame.img-failed img{display:none}

.art-figure{margin:0 auto 34px}
/* A 16:9 picture held to the reading measure is a strip. In the
   standard layout it takes the full width of the page instead,
   about 970px on a laptop, and the text comes back to the measure
   under it. The designed layouts set their own widths. */
body:not([class*="layout-"]) .art-figure{max-width:none;margin-bottom:40px}
/* the head matches the picture: the title gets the page width so a
   normal headline sits on one line, and the standfirst a measure
   wide enough for about three lines rather than five */
body:not([class*="layout-"]) .art-head{max-width:none}
body:not([class*="layout-"]) .art-standfirst{max-width:54rem;margin-inline:auto}
.art-figure .frame{aspect-ratio:16/9}
/* A square picture cannot take the page's full width the way a 16:9
   one does: at 1520px it would stand taller than the screen and the
   reader would meet it edge on. It sits at the measure instead,
   where the eye already is. The body:not() prefix is needed to beat
   the max-width:none the default layout sets above. */
body:not([class*="layout-"]) .art-figure.square{
  max-width:var(--measure);margin-inline:auto;
}
.art-figure.square .frame{aspect-ratio:1/1}
.art-figure figcaption{
  margin-top:10px;font-size:13px;line-height:1.5;color:var(--muted);
}
.art-figure figcaption b{color:var(--ink);font-weight:600}

/* — first visit ————————————————————————— */
.onboard{
  border:1px solid var(--hair);background:var(--raise);
  padding:34px clamp(20px,4vw,38px);margin:44px 0 0;border-radius:4px;
}
.onboard .label{display:block;margin-bottom:12px}
.onboard h2{
  font-family:var(--serif);font-variation-settings:normal;
  font-weight:400;font-size:clamp(24px,3.2vw,31px);letter-spacing:-.008em;line-height:1.16;
  margin:0 0 8px;text-wrap:balance;
}
.onboard .why{margin:0 0 26px;font-size:15px;line-height:1.55;color:var(--muted);max-width:54ch}
.ob-step{display:none}
.ob-step.is-active{display:block}
.ob-q{
  font-family:var(--serif);font-size:clamp(19px,2.5vw,23px);font-weight:380;
  line-height:1.32;margin:0 0 18px;text-wrap:pretty;
}
.ob-opts{display:flex;flex-wrap:wrap;gap:10px}
.ob-opts button{
  appearance:none;cursor:pointer;text-align:left;
  border:1px solid var(--hair);background:var(--paper);color:var(--ink);
  padding:12px 18px;border-radius:999px;font-size:14.5px;
  transition:border-color .15s,background .15s,color .15s;
}
.ob-opts button:hover{border-color:var(--accent-line)}
.ob-opts button.is-picked{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);font-weight:600}
.ob-foot{
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  margin-top:26px;padding-top:18px;border-top:1px solid var(--hair);
}
.ob-dots{display:flex;gap:7px;align-items:center}
.ob-dots i{width:6px;height:6px;border-radius:50%;background:var(--hair);display:block;transition:background .2s}
.ob-dots i.on{background:var(--accent)}
.ob-skip{
  appearance:none;background:none;border:0;cursor:pointer;padding:0;
  font-size:13.5px;color:var(--muted);text-decoration:underline;text-underline-offset:3px;
}
.ob-skip:hover{color:var(--ink)}

/* — sections ——————————————————————————— */
.shelf{margin:52px 0 0}
.shelf-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding-bottom:14px;margin-bottom:26px;border-bottom:1px solid var(--hair);
}
.shelf-head h2{
  font-family:var(--serif);font-variation-settings:normal;
  font-weight:400;font-size:clamp(21px,2.7vw,26px);letter-spacing:-.008em;margin:0;
}
.shelf-head .note{font-size:13.5px;color:var(--muted);text-align:right;max-width:34ch}

/* lead card */
.lead{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(20px,3.5vw,40px);align-items:center;text-decoration:none;color:inherit}
.lead .frame{transition:transform .25s ease}
.lead:hover .frame{transform:translateY(-3px)}
@media (prefers-reduced-motion:reduce){.lead .frame,.lead:hover .frame{transform:none;transition:none}}
.lead .frame{aspect-ratio:4/3}
@media (max-width:760px){.lead{grid-template-columns:1fr}}

/* card grid */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:clamp(22px,3vw,34px)}
.card{display:block;text-decoration:none;color:inherit}
.card .frame{aspect-ratio:3/2;margin-bottom:14px;transition:transform .25s ease}
.card:hover .frame{transform:translateY(-3px)}
@media (prefers-reduced-motion:reduce){.card .frame,.card:hover .frame{transform:none;transition:none}}
.card h3{
  font-family:var(--serif);font-variation-settings:normal;
  font-weight:400;font-size:20.5px;letter-spacing:-.006em;line-height:1.17;
  margin:10px 0 8px;text-wrap:balance;
}
.card p{margin:0;font-size:14.5px;line-height:1.5;color:var(--muted)}
.card .tag{font-size:9.5px;padding:3px 9px}
/* previews carry no CEFR level — see .eyebrow-cat */
.card-state{
  display:inline-flex;align-items:center;gap:6px;margin-top:11px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--good);
}

@media (max-width:600px){
  .shelf-head{flex-direction:column;align-items:flex-start;gap:6px}
  .shelf-head .note{text-align:left;max-width:none}
  .yours{gap:10px 22px}
  .yours .redo{margin-left:0}
  .onboard{padding:26px 20px}
  .ob-opts button{width:100%}
}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ══════════════════════════════════════════════════════════════
   MY PROFILE
   ══════════════════════════════════════════════════════════════ */

.prof-head{padding:52px 0 4px}
.prof-title{
  font-family:var(--serif);font-optical-sizing:auto;
  font-variation-settings:normal;
  font-weight:380;font-size:clamp(30px,4.4vw,46px);letter-spacing:-.012em;line-height:1.04;
  margin:0 0 12px;
}
.prof-sub{margin:0;max-width:52ch;font-size:16px;line-height:1.55;color:var(--muted)}

.prof-empty{
  margin:0;font-size:15px;line-height:1.6;color:var(--muted);max-width:58ch;
}

.word-from{
  margin:12px 0 0;padding-top:11px;border-top:1px solid var(--hair);
  font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
}
.word-from a{color:var(--accent);text-decoration:none}
.word-from a:hover{text-decoration:underline;text-underline-offset:3px}
/* saved-word cards on the profile are not buttons: no pointer, no lift */
#profile-body .word{cursor:default}
#profile-body .word:hover{transform:none;border-color:var(--hair);box-shadow:none}
.word .word-save{appearance:none;border:0;background:transparent;padding:0;cursor:pointer;font-family:var(--mono)}

.prof-list{display:flex;flex-direction:column;border-top:1px solid var(--hair-soft)}
.prof-item{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;
  padding:14px 0;border-bottom:1px solid var(--hair-soft);
}
.prof-item-title{
  font-family:var(--serif);font-size:19px;font-weight:390;line-height:1.3;
  color:inherit;text-decoration:none;
}
a.prof-item-title:hover{color:var(--accent)}
.prof-item-meta{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums;
}

/* nav icon buttons — profile, matching the theme toggle */
.nav-icon{
  display:inline-grid;place-items:center;
  width:32px;height:32px;border-radius:50%;
  border:1px solid var(--hair);color:var(--muted);
  text-decoration:none;transition:border-color .15s,color .15s;
}
.nav-icon:hover{border-color:var(--accent-line);color:var(--accent)}
.nav-icon svg{width:16px;height:16px;display:block}

/* ══════════════════════════════════════════════════════════════
   LISTEN — narrated article player
   ══════════════════════════════════════════════════════════════ */

.listen{
  display:flex;align-items:center;gap:16px;
  border:1px solid var(--hair);border-radius:999px;
  padding:10px 18px 10px 10px;margin:22px 0 0;
  background:var(--raise);
}
.listen.is-broken{opacity:.55}

.listen-play{
  flex:0 0 auto;appearance:none;cursor:pointer;
  width:40px;height:40px;border-radius:50%;padding:0;
  border:1px solid var(--accent);background:var(--accent);color:var(--accent-ink);
  display:grid;place-items:center;transition:opacity .15s;
}
.listen-play:hover{opacity:.86}
.listen-play svg{width:17px;height:17px;display:block}
.listen-play .i-pause{display:none}
.listen.is-playing .listen-play .i-play{display:none}
.listen.is-playing .listen-play .i-pause{display:block}

.listen-mid{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:7px}
.listen-top{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.listen-label{
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.listen-time{
  font-family:var(--mono);font-size:10.5px;color:var(--muted);
  white-space:nowrap;font-variant-numeric:tabular-nums;
}
.listen-bar{
  height:4px;border-radius:999px;background:var(--hair);
  cursor:pointer;position:relative;overflow:hidden;
}
.listen-bar i{display:block;height:100%;background:var(--accent);width:0}
.listen-bar:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.listen-speed{
  flex:0 0 auto;appearance:none;cursor:pointer;
  border:1px solid var(--hair);background:transparent;color:var(--muted);
  border-radius:999px;padding:5px 11px;min-width:44px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  font-variant-numeric:tabular-nums;transition:border-color .15s,color .15s;
}
.listen-speed:hover{border-color:var(--accent-line);color:var(--accent)}

@media (max-width:520px){
  .listen{gap:12px;padding:9px 12px 9px 9px}
  .listen-play{width:36px;height:36px}
  .listen-label{font-size:9px}
}

/* ══════════════════════════════════════════════════════════════
   GRAMMAR GUIDES
   ══════════════════════════════════════════════════════════════ */

.gram{
  border:1px solid var(--hair);border-left:2px solid var(--accent);
  background:var(--raise);padding:18px 20px;margin:0 0 22px;border-radius:0 6px 6px 0;
}
.gram-form{
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;
  color:var(--accent);margin:0 0 8px;
}
.gram-use{margin:0 0 14px;font-size:15.5px;line-height:1.55;color:var(--ink)}
.gram-use b{font-weight:650}
.gram-ex{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.gram-ex li{
  font-size:16px;line-height:1.5;padding-left:15px;border-left:1px solid var(--hair);
}
.gram-ex li b{font-weight:600;font-family:var(--serif);font-size:17.5px}
.gram-ex li u{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px}
.gram-ex li em{
  display:block;margin-top:4px;font-style:normal;
  font-size:13.5px;line-height:1.45;color:var(--muted);
}
.gram-list{margin:0 0 22px;padding:0;list-style:none;display:grid;gap:10px}
.gram-list li{
  font-size:16px;line-height:1.55;padding-left:15px;border-left:1px solid var(--hair);
}
.gram-list li b{font-weight:650;color:var(--ink)}
.quiz-card{border:1px solid var(--hair);background:var(--raise);padding:20px 22px;border-radius:8px}

/* ══════════════════════════════════════════════════════════════
   LAYOUT VARIANTS
   Applied per article by adding the class to <body>, e.g.
       <body class="layout-central-1">
   Remove the class to return to the default layout.
   ══════════════════════════════════════════════════════════════ */


/* labels-classic — the original label treatment: Instrument Sans,
   bold and widely tracked, category in violet. No pills, because
   they read as buttons and nothing here is clickable. */
.labels-classic .art-tags{gap:6px 20px;align-items:baseline}
.labels-classic .tag{
  border:0;background:transparent;padding:0;border-radius:0;
  font-family:var(--sans);
  font-size:11.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);
}
.labels-classic .tag:first-child{color:var(--accent);font-weight:650}
.labels-classic .label{
  font-family:var(--sans);font-size:11px;font-weight:650;
  letter-spacing:.2em;color:var(--accent);
}
.labels-classic .art-byline{font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.14em}
.labels-classic .art-byline b{font-weight:700}

/* dividers between labels, instead of pills */
.labels-classic .art-tags{gap:0}
.labels-classic .tag + .tag::before{
  content:"\2022";
  display:inline-block;
  margin:0 14px;
  color:var(--muted);
  opacity:.55;
  font-weight:400;
  letter-spacing:0;
}

/* type-wide — Fraunces has no width axis, but opsz behaves like one.
   Low optical sizes are drawn wider and more open; high ones are
   narrow display cuts. Everything here drops from 144 toward the
   text end. The wordmark and masthead are deliberately excluded. */
.type-wide .art-title{
  font-variation-settings:normal;
  letter-spacing:-.008em;
}
.type-wide .art-standfirst{
  font-variation-settings:normal;
  letter-spacing:0;
}
.type-wide .art-body h2{
  font-variation-settings:normal;
  letter-spacing:0;
}
.type-wide .art-body .pull{
  font-variation-settings:normal;
  letter-spacing:0;
}
.type-wide .learn-head h2,
.type-wide .shelf-head h2{
  font-variation-settings:normal;
  letter-spacing:0;
}
.type-wide .word-term,
.type-wide .quiz-q,
.type-wide .prompts li,
.type-wide .phrases li,
.type-wide .card h3,
.type-wide .prof-item-title{
  font-variation-settings:normal;
  letter-spacing:0;
}

/* A short lede is shorter than the drop cap, so the float overhangs
   into the next paragraph and indents its first line. Clear it. */
.art-body p.lede + p{clear:both}

/* poster-1 — a portrait poster beside the opening text.
   Row one is a two-column grid: title block left, poster right.
   The body, learning suite and footer span both columns beneath,
   returning to the normal reading measure. */
.layout-poster-1 article{
  display:grid;
  /* 48/52 rather than a fixed poster width: the picture keeps its
     share of the page at every size instead of holding 470px while
     the headline column is squeezed. */
  grid-template-columns:minmax(0,48fr) minmax(0,52fr);
  column-gap:clamp(34px,4.6vw,60px);
  align-items:start;
}

/* Ranged left, not centred. Centred type in a side column has no edge
   to hold, and the poster beside it has two — so the head sets the
   left margin and everything under it keeps that margin. */
.layout-poster-1 .art-head{
  grid-column:1;grid-row:1;max-width:none;margin:0;text-align:left;
}
.layout-poster-1 .art-head .art-title{
  font-size:clamp(30px,3.6vw,48px);
  margin-top:0;
}
.layout-poster-1 .art-standfirst{
  max-width:33rem;margin-left:0;margin-right:0;text-wrap:pretty;
}
.layout-poster-1 .art-dateline{margin-left:0;margin-right:0;text-align:left}

/* The poster is the point of this layout, so it runs the full depth of
   the hero. Its top starts level with the headline — the head carries
   52px of padding, so the figure takes the same margin — and the type
   block then centres against that depth rather than hanging from the
   top with a void beneath it. */
.layout-poster-1 .art-figure{
  grid-column:2;grid-row:1;max-width:none;margin:52px 0 0;
  align-self:start;
}
.layout-poster-1 .art-head{align-self:center}
.layout-poster-1 .art-figure .frame{aspect-ratio:1/1.414}

/* one left edge, from the headline to the last paragraph */
.layout-poster-1 .art-body,
.layout-poster-1 .learn,
.layout-poster-1 .art-foot,
.layout-poster-1 .levels{grid-column:1/-1;margin-left:0;margin-right:auto}

/* Stacked, the poster sits under the type and there is no side column
   left to hold an edge — so the head centres, the way every other
   article's does on a phone. Ranged left is an answer to the two-column
   composition, and the composition is gone. */
@media (max-width:820px){
  .layout-poster-1 article{grid-template-columns:1fr}
  .layout-poster-1 .art-head{grid-row:1;text-align:center;align-self:auto}
  .layout-poster-1 .art-standfirst,
  .layout-poster-1 .art-dateline{margin-left:auto;margin-right:auto}
  .layout-poster-1 .art-dateline{text-align:center}
  .layout-poster-1 .art-body,
  .layout-poster-1 .learn,
  .layout-poster-1 .art-foot,
  .layout-poster-1 .levels{margin-left:auto;margin-right:auto}
  .layout-poster-1 .art-figure{
    grid-column:1;grid-row:2;margin:28px auto 0;max-width:460px;
  }
}

/* ══ checkpoints ═══════════════════════════════════════════
   Deep-dive articles only. The closed state is deliberately
   one slim line: a reader who wants nothing to do with it
   scrolls past without the layout arguing back.
   ═══════════════════════════════════════════════════════════ */

.checkpoint{margin:34px 0 30px}

.cp-row{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:13px 0;
  border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair);
}
.checkpoint.is-quiet .cp-row{border-bottom-color:transparent;padding:9px 0}

.cp-mark{
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);white-space:nowrap;
}
.cp-say{flex:1 1 190px;font-size:14px;line-height:1.5;color:var(--muted)}

.cp-btn{
  appearance:none;cursor:pointer;
  border:1px solid var(--accent);background:var(--accent);color:var(--accent-ink);
  padding:7px 17px;border-radius:999px;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  transition:opacity .15s;
}
.cp-btn:hover{opacity:.85}

.cp-skip{
  appearance:none;cursor:pointer;background:none;border:0;padding:7px 2px;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);text-decoration:underline;text-underline-offset:3px;
  transition:color .15s;
}
.cp-skip:hover{color:var(--ink)}

.checkpoint.is-open{
  background:var(--raise);
  border:1px solid var(--hair);
  border-radius:4px;
  padding:20px 22px 22px;
}
.cp-head{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding-bottom:14px;margin-bottom:4px;border-bottom:1px solid var(--hair);
}
.cp-q{padding-top:18px}
.cp-ask{margin:0 0 13px;font-size:15.5px;line-height:1.5;font-weight:600}
.cp-opts{display:grid;gap:8px}
.cp-opts button{
  appearance:none;text-align:left;cursor:pointer;
  border:1px solid var(--hair);background:var(--paper);color:var(--ink);
  padding:11px 15px;border-radius:999px;font-size:14px;
  transition:border-color .15s,opacity .15s,color .15s;
}
.cp-opts button:hover:not(:disabled){border-color:var(--accent-line)}
.cp-opts button:disabled{cursor:default}
.cp-opts button.is-right{border-color:var(--good);color:var(--good);font-weight:650}
.cp-opts button.is-wrong{opacity:.45;text-decoration:line-through}
.cp-fb{margin:13px 0 0;font-size:14px;line-height:1.55;color:var(--muted)}
.cp-fb.show{color:var(--ink)}
.cp-end{margin-top:20px;padding-top:15px;border-top:1px solid var(--hair)}

/* ══ charts ════════════════════════════════════════════════
   Hand-drawn inline SVG, coloured from the theme tokens so
   both light and dark work without a second copy.
   ═══════════════════════════════════════════════════════════ */

.chart{margin:34px 0 32px;padding:0}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart-title{
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin:0 0 9px;
}
.chart-note{
  margin:14px 0 0;font-size:13.5px;line-height:1.55;color:var(--muted);
}
.chart-note b{color:var(--ink);font-weight:600}
.chart-src{
  display:block;margin-top:7px;
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--muted);
}
.c-grid{stroke:var(--hair);stroke-width:1}
.c-axis{stroke:var(--hair);stroke-width:1}
.c-line{fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.c-area{fill:var(--accent-soft)}
.c-dot{fill:var(--accent)}
.c-bar{fill:var(--accent)}
.c-bar-soft{fill:var(--accent-soft);stroke:var(--accent-line);stroke-width:1}
.c-lab{font-family:var(--mono);font-size:10.5px;fill:var(--muted);letter-spacing:.06em}
.c-val{font-family:var(--mono);font-size:12px;fill:var(--ink);font-weight:500}
.c-big{font-family:var(--serif);font-size:34px;fill:var(--ink);font-weight:400}

/* stat pair — used where two numbers say more than a plot */
.stats{
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  margin:34px 0 32px;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
}
.stat{padding:20px 22px 19px}
.stat + .stat{border-left:1px solid var(--hair)}
.stat-n{
  font-family:var(--serif);font-size:clamp(30px,5vw,42px);line-height:1;
  font-weight:400;color:var(--accent);display:block;
}
.stat-s{display:block;margin-top:9px;font-size:13.5px;line-height:1.5;color:var(--muted)}
@media (max-width:560px){
  .stats{grid-template-columns:1fr}
  .stat + .stat{border-left:0;border-top:1px solid var(--hair)}
}

/* ══ citations ═════════════════════════════════════════════ */

.fn{
  font-family:var(--mono);font-size:9.5px;vertical-align:super;line-height:0;
  color:var(--accent);text-decoration:none;padding:0 1px;
}
.fn:hover{text-decoration:underline}

.sources{padding:34px 0 0;margin-top:14px;border-top:1px solid var(--hair)}
.sources h2{
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin:0 0 4px;font-weight:400;
}
.sources p{margin:0 0 18px;font-size:13px;color:var(--muted)}
.sources ol{margin:0;padding-left:22px}
.sources li{
  margin:0 0 11px;font-size:13px;line-height:1.55;color:var(--muted);
  overflow-wrap:anywhere;
}
.sources a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.sources a:hover{color:var(--accent)}

/* ── layout-fullbleed ─────────────────────────────────────────
   The New Yorker essay treatment: title card at reading measure,
   then the image edge to edge of the viewport, then the body back
   at reading measure. Reserve it for images that are fields rather
   than objects — no centre to dilute, content running off all four
   sides. A poster or a diagram must never use this.
   ───────────────────────────────────────────────────────────── */

.layout-fullbleed{overflow-x:clip}

/* Not to the glass but to the frame: the same width the tapestry
   strip runs on the front page, and the same as the rule above it. */
.layout-fullbleed .art-figure{
  width:auto;max-width:none;
  margin-inline:calc((100% - var(--frame-w)) / 2);
  margin-top:30px;margin-bottom:44px;
}
.layout-fullbleed .art-figure .frame{
  border-radius:0;
  aspect-ratio:16/9;
}
/* nothing framed about it — drop the inset hairline */
.layout-fullbleed .art-figure .frame::after{box-shadow:none}

.layout-fullbleed .art-figure figcaption{
  max-width:1080px;margin:12px auto 0;padding:0 var(--gutter);
  font-family:var(--mono);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);
}

@media (max-width:700px){
  .layout-fullbleed .art-figure{margin-top:28px;margin-bottom:28px}
  .layout-fullbleed .art-figure .frame{aspect-ratio:4/3}
}

/* ══════════════════════════════════════════════════════════════
   FRONT PAGE — feature and spotlight rail
   One lead, chosen editorially, with a rail of three beside it.
   Everything aligns to a single baseline grid: the eyebrow of the
   feature and the eyebrow of the rail sit on the same line, and the
   rule between them runs the full height of the block.
   ══════════════════════════════════════════════════════════════ */

.front{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,300px);
  gap:0 clamp(32px,4vw,56px);
  padding:44px 0 0;
  align-items:start;
}


/* — shared category eyebrow — */
.eyebrow-cat{
  font-family:var(--sans);
  font-size:11.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent);
  margin:0 0 14px;
}

.card-meta{
  margin:10px 0 0;
  font-family:var(--sans);font-size:13px;color:var(--muted);
}

/* — the feature — */
.feature{
  display:grid;
  grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  column-gap:clamp(30px,3.2vw,52px);
  align-items:center;
  text-decoration:none;color:inherit;
}
.feature-copy{grid-column:1;display:flex;flex-direction:column}
.feature .frame{grid-column:2;grid-row:1;aspect-ratio:4/3;margin:0}
.feature-title{
  font-family:var(--serif);font-optical-sizing:auto;
  font-variation-settings:normal;
  font-weight:390;
  font-size:clamp(27.2px,3.68vw,54.4px);
  letter-spacing:-.012em;line-height:1.04;
  margin:0 0 18px;text-wrap:balance;
}
.feature-stand{
  font-family:'Crimson Pro', Georgia, 'Times New Roman', serif;
  font-size:clamp(18.5px,1.65vw,22px);font-weight:400;font-style:normal;
  line-height:1.5;color:var(--ink-soft);
  margin:0 0 18px;text-wrap:pretty;
}
/* a date and a length in a narrow column, so let the browser split
   them evenly rather than orphaning the last word */
.feature-meta{margin:0 0 22px;font-family:var(--sans);font-size:13.5px;color:var(--muted);text-wrap:balance}
/* The lead slot's greeting, standing where a date and a length would.
   The title's own black rather than the muted grey filing wants — it
   is a second statement, not a caption. */
.feature-welcome{
  font-family:'Crimson Pro', Georgia, 'Times New Roman', serif;
  font-weight:400;font-style:normal;
  font-size:clamp(18.5px,1.65vw,22px);line-height:1.5;
  color:var(--ink);margin:0 0 22px;text-wrap:balance;
}

@media (max-width:820px){
  .feature{grid-template-columns:1fr;row-gap:24px}
  .feature .frame{grid-column:1;grid-row:1;aspect-ratio:3/2}
  .feature-copy{grid-row:2}
}

@media (max-width:860px){
  .front{grid-template-columns:1fr;gap:44px}
}

/* ── masthead: slim variant ───────────────────────────────────
   The front page gets the full masthead — that is where the
   identity is the content. Everywhere else the publication name
   is navigation, and must sit clearly below the headline of the
   piece being read. No issue strip: its live date would imply the
   article was written today.
   ───────────────────────────────────────────────────────────── */
/* The rule under the wordmark runs the width of the page's frame,
   not of the reading column's wrap — so the flag, the pictures and
   everything on the front page share one pair of edges. The icons
   sit in the grid's last column and follow it out on their own. */
.masthead.slim{
  padding-top:0;border-bottom:1px solid var(--hair);
  width:auto;margin-inline:calc((100% - var(--frame-w)) / 2);
}
.masthead.slim .wordmark{
  font-size:clamp(21px,1.78vw,27px);
  letter-spacing:-.008em;
  padding:14px 22px;
}
.masthead.slim .masthead-left{
  display:flex;align-items:center;justify-content:flex-start;gap:6px;padding:0;
}
.masthead.slim .nav{padding:14px 0}
.masthead.slim .nav a{font-size:13px}
@media (max-width:900px){
  .masthead.slim{grid-template-columns:1fr;grid-template-rows:auto auto}
  .masthead.slim .wordmark{padding:14px 0 10px;font-size:20px}
  .masthead.slim .nav{padding:0 0 12px}
}

/* ══════════════════════════════════════════════════════════════
   FRONT PAGE — three columns
   Grammar left, feature centre, spotlight right. The front page
   runs wider than a reading page: at 968 the centre column would
   be too narrow to carry a headline.
   ══════════════════════════════════════════════════════════════ */

.page-front .wrap{max-width:1520px}

.page-front .front{
  grid-template-columns:minmax(0,1fr) minmax(0,330px);
  gap:0 clamp(34px,3.4vw,56px);
}

@media (max-width:1100px){
  .page-front .front{grid-template-columns:minmax(0,1fr) minmax(0,260px)}
}
@media (max-width:860px){
  .page-front .front{grid-template-columns:1fr}
}

.guide-desc{
  margin:0;font-size:13.5px;line-height:1.5;color:var(--muted);
}

/* ══════════════════════════════════════════════════════════════
   LANGUAGE SYSTEMS index
   ══════════════════════════════════════════════════════════════ */
.guides-head{padding:52px 0 8px;max-width:var(--measure)}
.guides-title{
  font-family:var(--serif);font-optical-sizing:auto;
  font-variation-settings:normal;
  font-weight:380;font-size:clamp(32px,4.6vw,52px);
  letter-spacing:-.012em;line-height:1.03;margin:0 0 14px;
}
.guides-sub{margin:0;font-size:16.5px;line-height:1.6;color:var(--muted)}
.page-guides .eyebrow-cat{color:var(--accent-2)}

.guide-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:clamp(20px,2.6vw,32px)}
.guide-card{
  display:block;text-decoration:none;color:inherit;
  border:1px solid var(--hair);border-radius:10px;
  padding:22px 24px 20px;background:var(--raise);
  transition:border-color .16s,transform .16s;
}
.guide-card:hover{border-color:var(--accent-2-line);transform:translateY(-2px)}
.guide-card .eyebrow-cat{margin-bottom:10px;font-size:10.5px;letter-spacing:.18em;color:var(--accent-2)}
.guide-card h3{
  font-family:var(--serif);font-variation-settings:normal;
  font-weight:400;font-size:23px;letter-spacing:-.006em;line-height:1.15;margin:0 0 10px;
}
.guide-card .guide-desc{margin:0;font-size:14px;line-height:1.5;color:var(--muted)}
.guide-card .card-meta{margin-top:14px;font-size:12px}
@media (prefers-reduced-motion:reduce){.guide-card:hover{transform:none}}

/* A frame's background exists to carry the placeholder hatch. Once a real
   image is in it, the only place that background shows is through any
   transparency — so it must be the page ground, not the placeholder grey.
   The hairline goes too: a cut-out illustration should float, not sit in
   a box. Images with their own ground are unaffected either way. */
.frame:has(img){background:var(--paper)}
.frame:has(img)::after{box-shadow:none}


/* ── layout-mirrored ────────────────────────────────────────
   A full-width opening: image filling the left half, the title
   block centred in the right half. No panel colour — the page
   ground carries it. Body returns to the reading measure below.
   ───────────────────────────────────────────────────────────── */
.layout-mirrored{overflow-x:clip}
.layout-mirrored .masthead{border-bottom:0;position:relative}
.layout-mirrored .masthead::after{
  content:"";position:absolute;bottom:0;
  left:calc(50% - 50vw);width:100vw;height:1px;background:var(--ink);
}
.layout-mirrored article{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  width:100vw;max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}
.layout-mirrored .art-figure{
  grid-column:1;grid-row:1;margin:0;max-width:none;
}
.layout-mirrored .art-figure .frame{
  aspect-ratio:1/1;border-radius:0;
}
.layout-mirrored .art-figure .frame::after{box-shadow:none}

.layout-mirrored .art-head{
  grid-column:2;grid-row:1;max-width:none;
  padding:clamp(28px,4vw,64px) clamp(28px,5vw,96px);
  text-align:center;
}
.layout-mirrored .art-title{
  font-size:clamp(30px,3.4vw,52px);
  margin:0 0 20px;
}
.layout-mirrored .art-standfirst{
  margin:0 0 22px;max-width:36ch;margin-left:auto;margin-right:auto;
}

/* kicker and dateline share the Spotlight label treatment */
.art-kicker,
.art-dateline{
  font-family:var(--sans);
  font-size:11.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent);
}
.art-kicker{margin:0 0 22px}
.art-dateline{margin:0}

/* everything after the hero comes back to the reading column */
.layout-mirrored .art-body,
.layout-mirrored .learn,
.layout-mirrored .art-foot{
  grid-column:1/-1;
  max-width:var(--measure);
  margin-left:auto;margin-right:auto;
  padding-left:var(--gutter);padding-right:var(--gutter);
  box-sizing:content-box;
}
.layout-mirrored .art-body{padding-top:52px}

@media (max-width:860px){
  /* The template collapses to one column, but the head was still
     placed in column 2 — which does not disappear, it becomes an
     implicit column. So the title and standfirst sat in a second
     column off the side of the screen, clipped and invisible, the
     body ran at half width, and `1 / -1` — which counts lines of
     the explicit grid — no longer reached the far edge. Every item
     has to be told to come back to the first column, not just the
     template. */
  .layout-mirrored article{grid-template-columns:1fr}
  .layout-mirrored .art-figure{grid-column:1;grid-row:1}
  .layout-mirrored .art-figure .frame{aspect-ratio:3/2}
  .layout-mirrored .art-head{grid-column:1;grid-row:2;padding:30px 20px 0}
  .layout-mirrored .art-body{padding-top:34px}
}

/* ── category strip ───────────────────────────────────────────
   Sits under the issue line. Only categories holding an article
   appear, so it fills out as the library grows.
   ───────────────────────────────────────────────────────────── */
.strip-row{position:relative;border-bottom:1px solid var(--hair)}
.category-strip{
  display:flex;flex-wrap:wrap;gap:4px 26px;
  align-items:baseline;justify-content:center;
  padding:13px 0;
}
.strip-icons{
  position:absolute;right:0;top:50%;transform:translateY(-50%);
  display:inline-flex;align-items:center;gap:14px;
}
.cat-link{
  font-family:var(--sans);
  font-size:11.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);
  text-decoration:none;white-space:nowrap;
  transition:color .15s;
}
.cat-link:hover{color:var(--accent)}
.cat-link::selection{background:var(--accent);color:var(--accent-ink)}
.cat-link.is-on{color:var(--accent)}
@media (max-width:700px){
  .category-strip{gap:4px 18px;overflow-x:auto;flex-wrap:nowrap;padding-bottom:13px}
  .cat-link{font-size:11px;letter-spacing:.16em}
}

/* ── home masthead: date left, strapline right ────────────────── */
.masthead-left .date-cell{
  font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap;
}
.masthead-left .date-cell b{color:var(--ink);font-weight:600}
.nav{display:flex;justify-content:flex-end;align-self:stretch;align-items:end;padding:0 0 24px}
.page-front .nav{
  flex-direction:column;align-items:flex-end;justify-content:space-between;
  padding:4px 0 24px;
}
.page-front .nav .strip-icons{position:static;transform:none}
.strapline{
  align-self:end;
  font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap;
}


/* ── the front flag, sticky ───────────────────────────────────
   The flag and the strip scroll down the page as one block. On
   scroll the motto and the date fade out, the wordmark shrinks to
   the size it has on an article page, and the categories and the
   icons stay. Only paddings and a font size move, so the change is
   a transition rather than a jump.
   ───────────────────────────────────────────────────────────── */
.front-head{position:sticky;top:0;z-index:60}
.front-head::before{
  content:'';position:absolute;z-index:-1;
  top:0;bottom:0;left:calc(50% - 50vw);width:100vw;
  background:var(--paper);
}
.page-front .wordmark,
.page-front .masthead,
.page-front .masthead-left,
.page-front .nav,
.page-front .category-strip{transition:font-size .26s ease, padding .26s ease}
.page-front .strapline,
.page-front .masthead-left .date-cell{
  transition:opacity .18s ease, height .26s ease, margin .26s ease;
  overflow:hidden;
}

.front-head.is-stuck .strapline,
.front-head.is-stuck .masthead-left .date-cell{
  opacity:0;height:0;margin:0;pointer-events:none;
}
/* stuck, the flag is the article page's: same rule across the
   frame, same wordmark, same padding either side of it */
.front-head.is-stuck .masthead{
  padding-top:0;border-bottom:1px solid var(--hair);
  width:auto;margin-inline:calc((100% - var(--frame-w)) / 2);
}
.front-head.is-stuck .wordmark{
  font-size:clamp(21px,1.78vw,27px);letter-spacing:-.008em;padding:14px 22px;
}
.front-head.is-stuck .masthead-left,
.front-head.is-stuck .nav{padding:14px 0;gap:0}

/* on a narrow screen the date has a line of its own, so fading it
   would leave an empty row travelling down the page: take the line
   out instead and leave the search where it is */
@media (max-width:820px){
  .front-head.is-stuck .strip-row .date-cell{display:none}
}

@media (prefers-reduced-motion:reduce){
  .page-front .wordmark,
  .page-front .masthead,
  .page-front .masthead-left,
  .page-front .nav,
  .page-front .category-strip,
  .page-front .strapline,
  .page-front .strip-row .date-cell{transition:none}
}

/* ── the icons, as they sit on an article page ────────────────
   The flag's nav used to hang from the bottom of the row with the
   motto. Centred on the wordmark is where an article page puts it,
   and it reads better there. Search joins them, so everything you
   can press is in one place.
   ───────────────────────────────────────────────────────────── */
/* Two stacks either side of the wordmark, on the same two lines:
   the burger over the date at the left, the icons over the motto
   at the right. Stuck, the second line goes and the two rows of
   buttons meet on one line, which is the article page's flag. */
.page-front .masthead-left{
  display:flex;flex-wrap:wrap;align-items:center;align-content:flex-start;
  justify-content:flex-start;gap:10px 8px;padding:14px 0;
}
.page-front .masthead-left .menu-toggle,
.page-front .masthead-left .search-toggle{order:-1;height:32px}
.page-front .masthead-left .date-cell{flex:0 0 100%}
.page-front .menu-toggle{display:inline-grid}
.page-front .masthead-left .date-cell{display:block}

.page-front .nav{
  flex-direction:column;align-items:flex-end;align-self:flex-start;
  justify-content:flex-start;gap:10px;padding:14px 0;
}
.page-front .nav .strip-icons{position:static;transform:none;gap:16px;height:32px}
.page-front .nav .strapline{align-self:flex-end;display:block}
.masthead-left .search-toggle{
  position:static;transform:none;width:32px;height:32px;flex:none;
}
.masthead-left .search-toggle svg{width:19px;height:19px}
.search-toggle[aria-expanded="true"]{color:var(--accent)}

/* ── the search line ──────────────────────────────────────────
   One field under the flag, on any page. Closed it takes no room
   at all; open it pushes the page down rather than floating over
   what the reader was looking at.
   ───────────────────────────────────────────────────────────── */
.search-line{
  display:none;position:relative;z-index:70;
  background:var(--paper);padding:10px 0 13px;
}
.search-line.is-open{display:block}
.search-line .search-input{width:100%;max-width:none;font-size:15px}
.search-line .search-results{left:0;top:calc(100% - 2px);width:min(520px,100%);z-index:2}

/* ── the category band ────────────────────────────────────────
   Sticky inside its own zone: it appears under the top article,
   follows the reader down the first shelf, and leaves when the
   next section arrives, because a sticky element cannot outlive
   its parent.
   ───────────────────────────────────────────────────────────── */
.strip-zone{position:relative}
.strip-band{
  position:sticky;top:var(--head-h,78px);z-index:40;
  background:var(--paper);
  border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair);
}
/* the top line closes the lead, at the distance the picture keeps
   from the masthead rule above it */
.strip-zone{margin-top:32px}
/* the first row keeps the air the dropped heading used to give it */
.strip-band + .cards{margin-top:34px}
/* the second lead opens a section, so it takes more air above it
   than the space between two rows of cards: 54 from the row below,
   66 here, 120 in all */
.page-front .strip-zone + .front{padding-top:66px}
.front.bleed-front,
.front.mirrored-2,
.front.frieze-front{margin-bottom:0}
.strip-band::before{
  content:'';position:absolute;z-index:-1;
  top:0;bottom:0;left:calc(50% - 50vw);width:100vw;
  background:var(--paper);
}

/* ── mirrored-2 — full width, copy left, image right ──────────── */
.front.mirrored-2{display:block;padding:38px 0 0}
.page-front{overflow-x:clip}

/* ── the home shelves: three across ────────────────────────────
   Three to a row rather than as many as fit, so the thumbnail is
   large enough to be looked at. A row sits under each lead, which
   keeps the two heroes apart.
   ───────────────────────────────────────────────────────────── */
.page-front .cards{grid-template-columns:repeat(3,minmax(0,1fr))}
.page-front .cards h3{font-size:23px}
.cards.row-three{margin:46px 0 54px}

@media (max-width:880px){
  .page-front .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards.row-three{margin:34px 0 40px}
}
@media (max-width:560px){
  .page-front .cards{grid-template-columns:1fr}
}

/* ── the home flag, tightened ──────────────────────────────────
   The masthead was 118px tall to hold a 50px wordmark. The height
   came from the nav column — a 32px row of icons above an 11.5px
   strapline — which measured 103px against the wordmark's 86 and
   so set the row. Incidental furniture was fixing the scale of the
   identity. The wordmark keeps its size; the space around it goes.
   118 -> 96, and the strip 46 -> 40.
   ───────────────────────────────────────────────────────────── */
.page-front .masthead{padding-top:9px}
.page-front .wordmark{padding:16px 36px}

/* the two stacks either side of the wordmark are set further down,
   with the sticky flag they turn into */

.page-front .category-strip{padding:8px 0}
.strip-row .date-cell{
  position:absolute;right:0;top:50%;transform:translateY(-50%);
  font-family:var(--sans);font-size:11.5px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
  white-space:nowrap;
}
.strip-row .date-cell b{color:var(--ink);font-weight:600}

@media (max-width:820px){
  /* no room beside the strip — the date sits under it, centred */
  .strip-row .date-cell{
    position:static;transform:none;
    display:block;text-align:center;padding:0 0 10px;
  }
  /* and with the row now two lines tall, a magnifier centred on the
     row floats between them: it belongs on the categories' line */
  .strip-row .search-toggle{top:-1px;transform:none}
}

.front.mirrored-2 .feature{
  display:grid;grid-template-columns:1fr 1fr;
  column-gap:0;align-items:center;
}
.front.mirrored-2 .feature-copy{
  grid-column:1;grid-row:1;text-align:center;
  aspect-ratio:16/9;
  padding:clamp(20px,2.5vw,44px) clamp(24px,3.4vw,64px);
  align-items:center;justify-content:center;
}
.front.mirrored-2 .feature-stand{max-width:36ch;margin-left:auto;margin-right:auto}
.front.mirrored-2 .frame{
  grid-column:2;grid-row:1;aspect-ratio:16/9;margin:0;
}
.front.mirrored-2 .frame::after{box-shadow:none}

@media (max-width:860px){
  .front.mirrored-2 .feature{grid-template-columns:1fr}
  .front.mirrored-2 .frame{grid-column:1;grid-row:1;aspect-ratio:3/2}
  .front.mirrored-2 .feature-copy{grid-row:2;padding:28px 20px 0}
}

/* Newsreader runs a little lighter than Fraunces at display size */

/* Crimson Pro's x-height is 88% of Instrument Sans's, so 18px would
   read visibly smaller for the same nominal size. 20px matches the
   apparent size of the sans it replaces. */


/* ── layout-frieze — a full-width strip, after the tapestry ────
   Three horizontal bands, echoing the embroidery's own registers:
   title above, the picture at the width of the masthead rule, the
   standfirst below. The picture is never cropped -- no aspect-ratio
   here, so its own proportions set the height. Hairlines above and
   below stand in for the tapestry's border bands.
   ───────────────────────────────────────────────────────────── */
.layout-frieze .frieze-head{padding:26px 0 20px}
.layout-frieze .frieze-kicker{
  font-family:var(--sans);font-size:11.5px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
  margin:0 0 15px;
}
.layout-frieze .frieze-head .art-title{max-width:19ch;margin:0}
.layout-frieze .frieze{
  margin:0;padding:13px 0;
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
}
.layout-frieze .frieze img{display:block;width:100%;height:auto}
.layout-frieze .art-body{padding-top:30px}
@media (max-width:860px){
  .layout-frieze .frieze-head .art-title{max-width:none}
}

/* ── front.frieze-front — a full-width lead picture ────────────
   The home-page twin of layout-frieze. Same three bands, so an
   article that opens on a frieze looks the same on the front as
   it does on its own page. No aspect-ratio: the picture's own
   proportions set the height and nothing is cropped.
   ───────────────────────────────────────────────────────────── */
.front.frieze-front{display:block;padding:34px 0 0}
.front.frieze-front .feature{display:block;text-decoration:none;color:inherit}
.front.frieze-front .feature-head{padding:0 0 20px}
.front.frieze-front .feature-kicker{
  font-family:var(--sans);font-size:11.5px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:0 0 14px;
}
.front.frieze-front .feature-title{max-width:19ch;margin:0}
.front.frieze-front .frieze{
  margin:0;padding:13px 0;
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
}
.front.frieze-front .frieze img{display:block;width:100%;height:auto}
.front.frieze-front .feature-foot{
  display:grid;grid-template-columns:minmax(0,36rem) auto;
  gap:32px;align-items:start;justify-content:space-between;padding:22px 0 0;
}
.front.frieze-front .feature-stand{margin:0}
.front.frieze-front .feature-meta{
  margin:0;text-align:right;white-space:nowrap;
  font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
/* No accent on this headline, at rest or on hover. The picture and
   the cursor are affordance enough, and the purple fought the
   tapestry underneath it. */
.front.frieze-front .feature-title,
.front.frieze-front .feature:hover .feature-title,
.front.frieze-front .feature:focus-visible .feature-title{color:var(--ink)}
/* and selecting the words gives ink on paper, not the accent */
.front.frieze-front .feature-head ::selection{background:var(--ink);color:var(--paper)}
.front.frieze-front .feature-title::selection,
.front.frieze-front .feature-stand::selection{background:var(--ink);color:var(--paper)}
@media (max-width:860px){
  .front.frieze-front .feature-title{max-width:none}
  .front.frieze-front .feature-foot{grid-template-columns:1fr;gap:14px}
  .front.frieze-front .feature-meta{text-align:left}
}


/* ── frieze, centred ───────────────────────────────────────────
   Title and standfirst sit above the picture, centred on it. The
   standfirst keeps its own measure — at the full width of the strip
   it would be unreadable — and the line below the picture centres
   to match. Applies to the article page and its twin on the front.
   ───────────────────────────────────────────────────────────── */
.layout-frieze .frieze-head,
.front.frieze-front .feature-head{text-align:center}
.layout-frieze .frieze-head .art-title,
.front.frieze-front .feature-title{max-width:24ch;margin:0 auto}
.layout-frieze .frieze-head .art-standfirst{
  max-width:42rem;margin:18px auto 0;
}
.front.frieze-front .feature-head .feature-stand{
  max-width:72rem;margin:18px auto 0;
}
.front.frieze-front .feature-foot{
  display:block;text-align:center;padding-top:18px;
}
.front.frieze-front .feature-meta{text-align:center;white-space:normal}
@media (max-width:860px){
  .layout-frieze .frieze-head .art-title,
  .front.frieze-front .feature-title{max-width:none}
    .front.frieze-front .feature-meta{text-align:center}
}

/* ── layout-frieze, full-bleed ─────────────────────────────────
   The picture runs the full width of the screen, and the header
   becomes a black plate of exactly the same dimensions above it:
   two equal bands. --frieze-ratio drives both, so the plate stays
   the picture's twin whatever the image's proportions are. On a
   narrow screen the ratio would leave no room for the words, so
   the plate is allowed to grow past it -- aspect-ratio yields to
   content rather than clipping it.
   ───────────────────────────────────────────────────────────── */
.layout-frieze{--frieze-ratio:3/1;overflow-x:clip}
.layout-frieze .frieze-head,
.layout-frieze .frieze{
  width:100vw;max-width:100vw;
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  padding:0;border:0;
}
.layout-frieze .frieze-plate{
  aspect-ratio:var(--frieze-ratio);
  box-sizing:border-box;
  background:#12100e;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:38px var(--gutter);
}
.layout-frieze .frieze-plate .frieze-kicker{color:rgba(255,255,255,.58);margin:0 0 18px}
.layout-frieze .frieze-plate .art-title{color:#fff;max-width:24ch;margin:0}
.layout-frieze .frieze-plate .art-standfirst{
  color:#fff;max-width:42rem;margin:22px auto 0;
}
.layout-frieze .frieze img{display:block;width:100%;height:auto}
.layout-frieze .art-body{padding-top:44px}
@media (max-width:860px){
  .layout-frieze .frieze-plate{padding:34px var(--gutter);aspect-ratio:auto;min-height:44vw}
  .layout-frieze .frieze-plate .art-title{max-width:none}
}

/* ── sticky masthead on article pages ──────────────────────────
   The bar is the centred .wrap, so its own background would only
   cover 1080px and the page would show through at the sides. The
   pseudo-element paints a full-width band behind it instead, which
   avoids restructuring the markup on every article.
   ───────────────────────────────────────────────────────────── */
.masthead-sticky{position:sticky;top:0;z-index:60}
.masthead-sticky::before{
  content:'';position:absolute;z-index:-1;
  top:0;bottom:0;left:calc(50% - 50vw);width:100vw;
  background:var(--paper);
}

/* ── frieze plate: sized so the whole hero lands in one screen ──
   Height is whatever is left after the masthead and the picture,
   rather than a fixed ratio, so masthead + plate + picture fit the
   viewport on arrival. The 240px floor stops the words being
   squeezed on a short window.
   ───────────────────────────────────────────────────────────── */
.layout-frieze{--masthead-h:62px}
@media (min-width:861px){
  .layout-frieze .frieze-plate{
    aspect-ratio:auto;
    height:max(240px, calc(100svh - var(--masthead-h) - (100vw / 3)));
    padding:clamp(14px,2.2vh,38px) var(--gutter);
  }
}
/* dateline sits under the standfirst in the kicker's voice */
.layout-frieze .frieze-plate .frieze-dateline{
  font-family:var(--sans);font-size:11.5px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.58);margin:22px 0 0;
}

/* ── frieze cypher — the pause between picture and prose ───────
   Painted through a mask rather than shown as an image, so one
   file serves both themes: the SVG supplies the shape, CSS the
   colour. On the dark paper (#14110f) the ink black would be all
   but invisible, so it lifts to a pale tone there.
   ───────────────────────────────────────────────────────────── */
.frieze-cypher{
  display:flex;justify-content:center;
  padding:68px 0 66px;
  color:#12100e;
}
.frieze-cypher svg{display:block;height:clamp(48px,5.4vw,76px);width:auto}
[data-theme="dark"] .frieze-cypher{color:#e9e2d7}
.layout-frieze .art-body{padding-top:0}
@media (max-width:860px){
  .frieze-cypher{padding:44px 0 42px}
}

/* ── in-column figure — a picture inside the reading measure ───
   No .frame here, so no crop: the image keeps its own proportions
   and sits at the width of the text it belongs to.
   ───────────────────────────────────────────────────────────── */
.art-figure-inline{margin:38px auto 40px}
.art-figure-inline img{display:block;width:100%;height:auto}

/* A picture inside the prose keeps its own proportions. The hero's
   ratio belongs to the hero — layout-mirrored sets .art-figure .frame
   to 1/1 for the eagle at the top, which was cropping an inline 3:2
   photograph into a square and leaving a third of the frame empty
   below it. The ratio here is only the shape the placeholder needs
   while there is no picture yet; once there is one, the picture
   decides. */
.art-figure-inline .frame,
.layout-mirrored .art-figure-inline .frame{aspect-ratio:3/2}
.art-figure-inline .frame:has(img),
.layout-mirrored .art-figure-inline .frame:has(img){aspect-ratio:auto}
.art-figure-inline .frame img{height:auto}
.art-figure-inline figcaption .credit{
  display:inline-block;margin-left:2px;
  font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
}

/* ── page-landing — the public face while the site is closed ───
   One screen, centred, no navigation. The wordmark is larger here
   than anywhere else on the site: this is the only page where it
   is the subject rather than the signature.
   ───────────────────────────────────────────────────────────── */
.page-landing{min-height:100svh;display:flex;align-items:center;justify-content:center}
.landing{width:100%;padding:56px var(--gutter)}
.landing-inner{max-width:38rem;margin:0 auto;text-align:center}

.landing-eyebrow{
  font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--muted);
  margin:0 0 30px;
}
.landing-wordmark{
  font-size:clamp(44px,7.4vw,84px);
  padding:0;justify-content:center;cursor:default;
}
.landing-motto{
  font-family:var(--sans);font-size:11.5px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
  margin:22px 0 0;
}
.landing-rule{
  border:0;border-top:1px solid var(--hair);
  width:64px;margin:38px auto;
}
.landing-copy p{
  font-family:'Crimson Pro', Georgia, serif;
  font-size:19px;line-height:1.66;color:var(--ink);
  margin:0 0 18px;text-wrap:pretty;
}
.landing-copy p:last-child{margin-bottom:0;color:var(--muted)}

.landing-foot{margin-top:46px}
.landing-enter{
  display:inline-block;
  font-family:var(--sans);font-size:12px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--paper);background:var(--ink);
  padding:13px 26px;border-radius:999px;text-decoration:none;
  transition:background .18s ease;
}
.landing-enter:hover{background:var(--accent)}
.landing-note{
  font-family:var(--sans);font-size:12.5px;color:var(--muted);
  margin:18px 0 0;
}
@media (max-width:560px){
  .landing-copy p{font-size:18px}
  .landing-rule{margin:32px auto}
}

/* ── the password form ─────────────────────────────────────── */
.landing-wordmark-sm{font-size:clamp(32px,4.4vw,52px);text-decoration:none;color:inherit}
.enter-form{display:flex;flex-direction:column;align-items:center;gap:16px}
.enter-label{
  font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
}
.enter-input{
  font-family:var(--sans);font-size:16px;color:var(--ink);
  background:var(--raise);border:1px solid var(--hair);border-radius:10px;
  padding:12px 16px;width:min(280px,100%);text-align:center;
  letter-spacing:.04em;
}
.enter-input:focus{outline:2px solid var(--accent-line);outline-offset:2px;border-color:var(--accent)}
.enter-error{
  font-family:var(--sans);font-size:13px;color:var(--accent);margin:18px 0 0;
}
.landing-note a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.landing-note a:hover{color:var(--accent)}
/* a dateline standing on its own, rather than in a set of hero labels,
   does not need the accent — it has nothing to answer it */
.art-dateline.is-quiet{color:var(--muted);margin:0 0 4px}

/* ── layout-wide-head — headline and picture at container width ─
   For an article whose headline wants one line and whose picture
   was composed rather than cropped. The head and the figure take
   the full .wrap; the standfirst and the body stay at the reading
   measure, because a line of text 968px long is not readable.
   The figure carries no frame, so the image keeps its own ratio.
   ───────────────────────────────────────────────────────────── */
.layout-wide-head .art-head,
.layout-wide-head .art-figure{max-width:none}
.layout-wide-head .art-title{max-width:none}
.layout-wide-head .art-standfirst,
.layout-wide-head .art-dateline{max-width:46rem}
.layout-wide-head .art-figure{margin:0 auto 34px}
.layout-wide-head .art-figure img{display:block;width:100%;height:auto}
/* Above 1080px the container is a fixed 968px, so the headline can be
   sized to fit one line rather than forced onto one with nowrap — a
   longer headline then wraps gracefully instead of running off the
   right edge, which is what nowrap was doing. */
@media (min-width:1081px){
  .layout-wide-head .art-title{font-size:51px}
}

/* ── layout-wide-head, centred ─────────────────────────────
   Headline, standfirst and dateline centre on the picture below
   them. The standfirst takes the picture's own width rather than
   a shorter measure: centred text does want a short line, but
   three centred lines read worse than two long ones, and the
   standfirst now ends on the same edge the picture begins on.

   balance, not pretty, because this is display text and the two
   lines have to come out even — pretty leaves 956 and 616 where
   balance gives 772 and 799. Articles that force their own break
   with a <br> are unaffected either way.
   ───────────────────────────────────────────── */
.layout-wide-head .art-head{text-align:center}
.layout-wide-head .art-standfirst{
  max-width:none;margin-left:auto;margin-right:auto;
  text-wrap:balance;
}
/* The whole hero should land in one screen. The picture takes
   whatever the masthead and the head block leave it, scaling
   proportionally rather than cropping — so on a short window it
   sits narrower than the container, centred, with the type above
   it unchanged. On a tall window the cap is inert. */
.layout-wide-head .art-figure img{
  width:auto;height:auto;max-width:100%;
  max-height:calc(100svh - 410px);
  margin:0 auto;
}
.layout-wide-head .art-title{margin-bottom:16px}

/* the dateline sits under a centred standfirst here, in ink, with room
   to breathe before the picture */
.layout-wide-head .art-dateline{color:var(--ink);margin:18px auto 30px}
/* the head starts higher and the standfirst is shorter, so the picture
   gets the room back — the cap drops from 410 to 330 */
.layout-wide-head .art-head{padding-top:30px}
.layout-wide-head .art-figure img{max-height:calc(100svh - 344px)}

/* ── front.bleed-front — the home page lead ───────────────────
   .lead-hero and .lead-inner do the layout; everything here is the
   link wrapper and the picture's own box.
   ───────────────────────────────────────────────────────────── */
.front.bleed-front{display:block;padding:0}
.front.bleed-front .feature{display:block;text-decoration:none;color:inherit}

/* the crop belongs to .bleed-frame, not the figure — the figure has
   to stay open so the caption below it is not clipped away */
.front.bleed-front .bleed{margin:0;width:100%;max-width:none}
/* no hover recolour: the whole lead is one link, so hovering the
   picture turned the title lilac, which is almost always */

/* ── the shelf under the lead ──────────────────────────────────
   Articles is the first of three shelf heads on the page and reads
   as one of them: same size, same rule beneath, same left edge. It
   needs only the top margin that .shelf gives the other two.
   ───────────────────────────────────────────────────────────── */
.shelf-head-top{margin-top:clamp(42px,4.2vw,66px)}
.shelf-head-top + .cards.row-three{margin-top:0}

/* ── who you are, on the profile page ──────────────────────────
   The name sits with the address under the page title. It is the
   one thing about themselves a reader can set, so it is offered
   plainly rather than buried in a settings panel.
   ───────────────────────────────────────────────────────────── */
.prof-who{
  margin-top:16px;padding-top:16px;border-top:1px solid var(--hair);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 20px;
  justify-content:space-between;
}
.prof-name-line{
  margin:0;font-family:var(--sans);font-size:14.5px;color:var(--muted);
}
.prof-name-line b{color:var(--ink);font-weight:600}
.prof-name-line b.is-unset{color:var(--muted);font-weight:400;font-style:italic}
.prof-edit{
  margin-left:14px;background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--sans);font-size:13.5px;color:var(--accent);
  text-decoration:underline;text-underline-offset:3px;
}
.prof-edit:hover{color:var(--ink)}
.prof-out{
  font-family:var(--sans);font-size:13px;color:var(--muted);
  text-decoration:none;
}
.prof-out:hover{color:var(--ink);text-decoration:underline}
.prof-signin{margin:0;font-family:var(--sans);font-size:14px;color:var(--muted)}
.prof-signin a{color:var(--accent)}

.prof-name-form{display:flex;flex-wrap:wrap;gap:10px;align-items:center;width:100%}
.prof-name-input{
  flex:1 1 260px;max-width:380px;
  font-family:var(--sans);font-size:15px;color:var(--ink);
  background:var(--raise);border:1px solid var(--hair);border-radius:8px;
  padding:9px 12px;
}
.prof-name-input:focus{outline:none;border-color:var(--accent-line)}

@media (max-width:560px){
  .prof-who{flex-direction:column;align-items:flex-start;gap:10px}
}

/* ── picked up where you left off ──────────────────────────────
   Says what happened and offers the way out, then leaves. A silent
   jump down a page is disorienting; an explanation that will not go
   away is worse.
   ───────────────────────────────────────────────────────────── */
.resumed{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%);
  z-index:80;display:flex;align-items:center;gap:12px;
  background:var(--ink);color:var(--paper);
  padding:11px 18px;border-radius:999px;
  font-family:var(--sans);font-size:13px;
  box-shadow:0 10px 30px rgba(0,0,0,.22);
  transition:opacity .5s,transform .5s;
}
.resumed.is-going{opacity:0;transform:translateX(-50%) translateY(8px)}
.resumed-top{
  background:none;border:0;padding:0;cursor:pointer;
  color:var(--paper);font:inherit;text-decoration:underline;
  text-underline-offset:3px;
}
@media (max-width:560px){
  .resumed{left:14px;right:14px;transform:none;justify-content:center}
  .resumed.is-going{transform:translateY(8px)}
}

/* ── search ───────────────────────────────────────────────────
   The magnifier sits at the left of the strip line, under the
   motto, mirroring the date at the other end. Opening it slides an
   input across the categories rather than pushing the page around,
   and the results drop below the line.
   ───────────────────────────────────────────────────────────── */
.search-toggle{
  position:absolute;left:0;top:50%;transform:translateY(-50%);
  z-index:3;
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;padding:0;
  background:none;border:0;border-radius:50%;cursor:pointer;
  color:var(--muted);transition:color .16s,background .16s;
}
.search-toggle svg{width:20px;height:20px}
.search-toggle:hover{color:var(--ink);background:var(--accent-soft)}
.strip-row.is-searching .search-toggle{color:var(--accent)}

.search-box{
  position:absolute;left:44px;right:0;top:50%;transform:translateY(-50%);
  z-index:2;display:none;
}
.strip-row.is-searching .search-box{display:block}
/* the categories and the date step aside rather than reflow */
.strip-row.is-searching .category-strip,
.strip-row.is-searching .date-cell{visibility:hidden}

.search-input{
  width:100%;max-width:420px;
  border:0;border-bottom:1px solid var(--hair);background:none;
  padding:5px 2px;color:var(--ink);
  font-family:var(--sans);font-size:14px;
}
.search-input:focus{outline:none;border-bottom-color:var(--accent)}
.search-input::placeholder{color:var(--muted)}

.search-results{
  position:absolute;left:0;top:calc(100% + 12px);
  width:min(460px,calc(100vw - 60px));
  background:var(--raise);border:1px solid var(--hair);border-radius:10px;
  box-shadow:0 12px 32px rgba(0,0,0,.12);
  overflow:hidden;
}
.search-results:empty{display:none}
.search-hit{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:11px 15px;text-decoration:none;color:inherit;
  border-bottom:1px solid var(--hair-soft);
}
.search-hit:last-child{border-bottom:0}
.search-hit:hover{background:var(--accent-soft)}
.search-hit-title{font-family:var(--serif);font-size:16px;line-height:1.25}
.search-hit-label{
  flex:none;font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);
}
.search-none{margin:0;padding:14px 15px;font-family:var(--sans);font-size:13.5px;color:var(--muted)}

@media (max-width:700px){
  .search-box{left:40px}
  .search-input{font-size:16px}
}

/* ── the home lead ────────────────────────────────────────────
   Two halves of the viewport. The picture takes the right one and
   runs to the edge of the screen, full height of the section; the
   words take the left one and sit centred in it, horizontally and
   vertically. The picture's proportions come from the section
   rather than from a fixed ratio, which is why the frame is given a
   height rather than an aspect-ratio and the image covers it.
   ───────────────────────────────────────────────────────────── */

/* The hero bleeds off the left of the screen and stops at the right
   at the page's own margin, so the picture's right edge lines up
   with everything below it — the shelf heads, the card rows, the
   footer — rather than running past them to the glass. */
.lead-hero{
  width:auto;max-width:none;
  margin-left:calc(50% - 50vw);margin-right:0;
  margin-top:32px;
}
.lead-inner{
  display:grid;
  /* The words take exactly half the window, which puts the picture's
     left edge on the middle of the screen and its right edge on the
     page margin. Stated in vw rather than as a share of the row
     because the row starts at the screen's edge and ends at the
     page's, so the two are not the same thing — and because the
     picture then stops growing on its own once .wrap does. */
  grid-template-columns:50vw minmax(0,1fr);
  align-items:center;
}

/* — the words, centred in their half —
   The half is measured from the screen's edge, but the page's margin
   is measured from .wrap, which stops growing at 1520px. Above that
   the two drift apart by (100vw - 1520)/2, and the words — centred
   in the whole half — drift left with them until they cross the
   margin every other thing on the page respects: sixteen pixels over
   at 2000, closer to two hundred at 2880.

   So the words are centred between the page's own left margin and
   the picture, rather than between the glass and the picture. The
   left column, the picture's edges and the leftward bleed are all
   unchanged; only the empty space the words sit in is. Below about
   1540 the first term wins and nothing moves at all.
   ───────────────────────────────────────────────────────────── */
.bleed-front .feature-head{
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;
  padding:clamp(36px,4vw,64px) clamp(24px,4.4vw,76px);
  padding-left:max(
    clamp(24px,4.4vw,76px),
    calc(max(0px, (100vw - 1520px) / 2) + var(--gutter))
  );
  max-width:none;margin:0;
}
.bleed-front .feature-title{
  color:var(--ink);margin:0 0 18px;
  font-weight:500;font-size:clamp(32px,3.4vw,50px);
  line-height:1.06;letter-spacing:-.012em;max-width:17ch;
}
.bleed-front .feature-stand{
  color:var(--ink-soft);margin:0;
  font-size:clamp(18px,1.35vw,20.5px);line-height:1.52;max-width:38ch;
}
.bleed-front .feature-welcome{
  color:var(--ink);margin:22px 0 0;
  font-size:clamp(18px,1.35vw,20.5px);line-height:1.52;max-width:38ch;
}

/* — the picture, square — */
/* A square on the front page and the full 16:9 on the article's own,
   the way a magazine crops a picture differently for the cover and
   for the page. The front page's square is its own file, cropped
   where it was drawn rather than by a rule here, so nothing has to
   be recalculated when the illustration changes. The frame keeps the
   ratio and the cover so a square that is a pixel out still fills
   it. */
.bleed-front .bleed{margin:0;width:100%;height:100%}
.bleed-front .bleed-frame{
  aspect-ratio:1/1;overflow:hidden;background:var(--hair-soft);
}
.bleed-front .bleed img{
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:center;
}

/* Below the split the picture goes back on top of the words, at its
   own proportions, and the head keeps its centring. */
@media (max-width:900px){
  /* stacked, the picture goes back to the full width of the screen:
     there is no column of page beside it to line up with */
  .lead-hero{margin-right:calc(50% - 50vw)}
  .lead-inner{grid-template-columns:1fr}
  .bleed-front .feature-head{
    padding:26px var(--gutter) 34px;order:2;
  }
  .bleed-front .bleed{order:1}
  .bleed-front .feature-title{max-width:none;font-size:clamp(30px,6vw,40px)}
  .bleed-front .feature-stand{max-width:46ch}
}


/* ══════════════════════════════════════════════════════════════
   THE PHONE FLAG
   Everything below 700px, written for the phone rather than
   adapted down from the desktop.

   The desktop flag has three tiers: motto, wordmark, icons. On a
   phone the motto is hidden and the icons were left stranded on a
   row of their own — fifty-odd pixels of nothing, on the screen
   where pixels are scarcest. Here the wordmark and the icons share
   one line, which is what a phone masthead is: identity in the
   middle, controls at the edge.

   The three-column grid is the desktop's own. The left column is
   kept, empty, so the wordmark sits on the true centre rather than
   being pushed left by the icons.
   ══════════════════════════════════════════════════════════════ */
@media (max-width:700px){

  .masthead,
  .masthead.slim,
  .page-front .masthead{
    grid-template-columns:1fr auto 1fr;
    grid-template-rows:auto;
    align-items:center;
    padding-top:0;padding-bottom:0;
  }

  /* the left half of the balance: it holds the centre, and the menu */
  .masthead-left,
  .page-front .masthead-left{display:flex;align-items:center;padding:0;min-width:0}
  .masthead-left .strapline,
  .masthead-left .date-cell{display:none}

  .wordmark,
  .page-front .wordmark{padding:15px 6px 13px}
  .masthead.slim .wordmark{padding:12px 6px 11px;font-size:20px}

  .nav,
  .page-front .nav,
  .masthead.slim .nav{
    flex-direction:row;align-items:center;justify-content:flex-end;
    align-self:center;padding:0;gap:10px;
  }
  .nav .strip-icons,
  .page-front .nav .strip-icons{position:static;transform:none;gap:10px}

  /* a shade smaller, so a 320px screen still has air between the
     wordmark and the icons */
  .theme-toggle,.nav-icon{width:30px;height:30px}

  /* ── the category strip ──────────────────────────────────────
     Centring a row that overflows pushes its first item off the
     left edge, where no amount of scrolling will reach it: the
     strip opened mid-word, on TECHNOLOGY, with nothing before it.
     On a phone the categories are a rail, not a centred line —
     they start at the left, scroll to the right, and fade at the
     edge to say there is more.
     ─────────────────────────────────────────────────────────── */
  .strip-row{display:flex;flex-wrap:wrap;align-items:center}

  .strip-row .search-toggle{
    position:static;transform:none;
    flex:0 0 auto;width:34px;align-self:stretch;height:auto;
    margin-left:-7px;
  }
  .strip-row .search-toggle svg{width:19px;height:19px}

  /* basis 0, not auto: flex breaks lines on the item's unshrunk
     width, so a rail 384px wide would drop below the magnifier
     before it was ever allowed to shrink */
  .category-strip,
  .page-front .category-strip{
    flex:1 1 0%;min-width:0;
    justify-content:flex-start;
    flex-wrap:nowrap;overflow-x:auto;
    /* the trailing space is what the fade eats, so the last
       category is clear of it once the rail is scrolled to the end */
    padding:10px 26px 10px 0;margin-left:7px;gap:0 20px;
    scrollbar-width:none;
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent);
            mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent);
  }
  .category-strip::-webkit-scrollbar{display:none}

  /* the dateline takes the line under the rail, without its weekday */
  .strip-row .date-cell{
    position:static;transform:none;
    flex:0 0 100%;text-align:center;
    font-size:10.5px;padding:0 0 9px;
  }
  .date-cell .dow{display:none}

  /* searching: the field takes the rail's line, not the whole row,
     and the results hang the full width of the page rather than
     from the field's own left edge, which put them over the side */
  .strip-row.is-searching .search-box{
    top:0;left:42px;right:0;height:38px;transform:none;
    display:flex;align-items:center;
  }
  .search-box .search-results{
    left:-42px;right:auto;width:calc(100% + 42px);
  }
}


/* ══════════════════════════════════════════════════════════════
   THE ARTICLE ON A PHONE
   Everything below 700px.

   The learning suite is built as a panel sitting on the page: a
   border, a tint and its own padding, all saying "this is a
   different mode". On a phone that framing gets charged twice over
   — the panel inset inside the page gutter, then every card inset
   inside the panel, then every list inset inside the card. By the
   time a discussion prompt is reached its text began 113px into a
   375px screen: thirty per cent of the width spent on edges, and
   questions breaking every five words.

   On a phone the suite is not a panel on the page. It is the page.
   So it runs the full width, keeps its tint to say the mode has
   changed, and lines its contents up with the article's own prose
   instead of indenting away from it.
   ══════════════════════════════════════════════════════════════ */
@media (max-width:700px){
  /* ── tap targets ───────────────────────────────────────────
     44px is the floor for a thumb. The label and the icons keep
     their size; the hit area grows around them with padding and
     an equal negative margin, so nothing on the page moves. The
     select, the level buttons and the quiz buttons simply get
     taller, which reads as more generous rather than different.
     ─────────────────────────────────────────────────────────── */
  /* .word .word-save sets padding:0 at two classes, so these have to
     match that weight or the padding is dropped and only the negative
     margin lands — which is worse than leaving it alone. */
  .word .word-save{padding:14px 0 14px 14px;margin:-14px 0 -14px -14px}
  .cat-link{display:inline-block;padding:12px 4px;margin:-12px 0}
  .foot-legal a{display:inline-block;padding:12px 0;margin:-12px 0}
  /* the circles stay the size they are drawn at; the tap area is
     an invisible 7px margin around them, not a bigger circle */
  .nav-icon,.theme-toggle,.menu-toggle{position:relative}
  .nav-icon::after,.theme-toggle::after,.menu-toggle::after{
    content:'';position:absolute;inset:-7px;
  }
  .strip-row .search-toggle{width:44px;height:44px}
  .prof-signin a{display:inline-block;padding:14px 0;margin:-14px 0}
  .lang-pick{min-height:44px;padding:10px 12px}
  .levels-group .level{min-height:44px;padding:12px 15px}
  .btn{min-height:44px;padding:13px 20px}

  /* the full-width band needs somewhere for the overspill to go */
  body{overflow-x:clip}

  /* Full width by pulling out of the wrap by exactly the gutter it
     sits in, rather than by 100vw: vw units count a classic
     scrollbar that the layout viewport does not, and the two
     disagreed by forty pixels here, which is a horizontal scroll on
     a page that should have none. */
  .learn{
    width:auto;max-width:none;
    margin:40px calc(-1 * var(--gutter)) 0;
    border-left:0;border-right:0;
  }
  /* the mirrored layout already runs its article the full width, so
     its suite has only to stop re-centring itself inside it */
  .layout-mirrored .learn{
    max-width:none;
    margin-left:0;margin-right:0;
    padding-left:0;padding-right:0;
  }
  .learn-head{padding:22px var(--gutter) 18px}
  .learn-pane{padding:22px var(--gutter) 28px}
  .learn-head h2{font-size:24px}

  /* ── the tabs ────────────────────────────────────────────────
     Four equal cells rather than four words with space after them:
     a thumb aiming at "Check" gets a quarter of the screen instead
     of forty pixels, and the rule under the live tab reads as a tab
     rather than as an underlined word.

     They stay with you, but that rule is the base one now. What is
     left here is the offset — the phone masthead is 44px where the
     desktop one is 61 — and the four cells taking the whole rail,
     which means the readout has nowhere to go. The meter still runs
     along the bottom edge, so progress is not lost with it.
     ─────────────────────────────────────────────────────────── */
  .learn-nav{top:43px}
  .learn-tabs{flex:1}
  .learn-tabs button{flex:1 1 0;min-width:0;padding:15px 4px;text-align:center}
  .learn-pct{display:none}

  /* ── words ─────────────────────────────────────────────────── */
  /* no All: the pane opens on one kind instead of on all of them */
  .word-filter .pill[data-kind="all"]{display:none}
  .word{padding:12px 14px}
  .word-term{font-size:19px}
  .words{gap:9px}

  /* ── check ─────────────────────────────────────────────────── */
  /* the radius is settled at the base rule now; what is left is the
     padding, which a two-line answer on a narrow screen cannot spare */
  .quiz-opts button{padding:12px 15px}
  .quiz-q{font-size:20px}

  /* ── speak ─────────────────────────────────────────────────── */
  .round-head{gap:11px;padding:15px 0}
  .round-n{width:21px;height:21px}
  /* the round's own number is context enough — the prompts under it
     do not need to hang off it as well */
  .round .prompts{padding:0 0 20px}
  .prompts li{padding-left:27px;font-size:17px}
  .prompts li::before{width:19px;height:19px;font-size:10px;top:2px}

  .phrasebank{padding:16px 15px;border-radius:8px}
  .phrases li{padding-left:13px;font-size:16.5px}

  /* ── write ─────────────────────────────────────────────────── */
  .task{padding:16px 15px}
  .task ol{padding-left:19px}
}

/* ── about and privacy ─────────────────────────────────────
   Set in the article's own type, because it is the publication
   describing itself. What is new is small: links that look like
   links (the article body never needed them), the underline
   sample, and the four tabs set in the tabs' own face, so a
   reader recognises them when they meet them for real.
   ───────────────────────────────────────────────────────────── */
.prose-page .art-head{padding-top:48px}
.prose-kicker{margin:0 0 20px}
.prose-page .art-standfirst{margin-bottom:34px}
.prose-page .art-body{
  border-top:1px solid var(--hair);
  padding:34px 0 72px;
}
.prose-page .art-body a{
  color:inherit;
  text-decoration:underline;
  text-decoration-color:var(--accent-line);
  text-decoration-thickness:1px;
  text-underline-offset:.2em;
  transition:text-decoration-color .15s,color .15s;
}
.prose-page .art-body a:hover{color:var(--accent);text-decoration-color:var(--accent)}
.prose-page .art-body strong{font-weight:650}
.prose-page .art-body h2{scroll-margin-top:24px}
.about-ul{border-bottom:1.5px dotted var(--accent-line)}

.about-tabs{margin:0 0 24px;padding:0;border-top:1px solid var(--hair)}
.about-tabs div{
  display:grid;grid-template-columns:6.5rem 1fr;gap:4px 18px;
  padding:14px 0;border-bottom:1px solid var(--hair);
}
.about-tabs dt{
  font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--accent);padding-top:.62em;
}
.about-tabs dd{margin:0}

.about-contact{font-size:1.14em}

@media (max-width:560px){
  .prose-page .art-head{padding-top:34px}
  .prose-page .art-body{padding-top:28px}
  /* the label goes above its line: a 6.5rem column leaves a
     phone's text too narrow to read comfortably */
  .about-tabs div{grid-template-columns:1fr;gap:3px}
  .about-tabs dt{padding-top:0}
}


/* lists, which articles never needed: the privacy page is mostly
   short lists, and they should read as prose, not as a form */
.prose-page .art-body ul{margin:0 0 24px;padding-left:1.15em}
.prose-page .art-body li{margin:0 0 8px;padding-left:.2em}
.prose-page .art-body li::marker{color:var(--accent)}
.prose-page .art-body .privacy-short{
  list-style:none;margin:0 0 34px;padding:18px 20px;
  background:var(--accent-soft);border-left:2px solid var(--accent);
}
.prose-page .art-body .privacy-short li{margin:0 0 6px;padding:0}
.prose-page .art-body .privacy-short li:last-child{margin-bottom:0}
.prose-page .art-body .prose-updated{
  margin:40px 0 0;
  font-family:var(--sans);font-size:13px;color:var(--muted);
}

/* ── the phone menu ─────────────────────────────────────────
   Built by fr-store.js on every page with the site's masthead and
   footer. The button shows below 700px only; the panel is a modal
   <dialog>, so focus, Escape and the dimmed page come for free.
   ───────────────────────────────────────────────────────────── */
.menu-toggle{display:inline-grid}
.menu-toggle,.menu-close{
  appearance:none;background:transparent;padding:0;cursor:pointer;
  width:30px;height:30px;border-radius:50%;
  border:1px solid var(--hair);color:var(--muted);
  place-items:center;
  transition:border-color .15s,color .15s;
}
.menu-toggle svg,.menu-close svg{width:16px;height:16px;display:block}
.menu-toggle:hover,.menu-close:hover{border-color:var(--accent-line);color:var(--accent)}
.menu-close{display:inline-grid}

.site-menu{
  position:fixed;inset:0;width:100%;height:100%;
  max-width:none;max-height:none;margin:0;padding:0;border:0;
  background:transparent;color:var(--ink);
}
.site-menu::backdrop{background:rgba(20,17,15,.38)}
.menu-panel{
  box-sizing:border-box;height:100%;width:min(84vw,330px);
  overflow-y:auto;overscroll-behavior:contain;
  padding:0 var(--gutter) 40px;
  background:var(--paper);border-right:1px solid var(--hair);
}
.menu-head{display:flex;align-items:center;height:54px}
.menu-group{padding:16px 0 12px;border-top:1px solid var(--hair)}
.menu-label{
  margin:0 0 4px;font-family:var(--mono);font-weight:400;
  font-size:10.5px;letter-spacing:.19em;text-transform:uppercase;color:var(--muted);
}
.menu-link{
  display:block;padding:10px 0;
  font-family:var(--serif);font-variation-settings:normal;font-weight:400;
  font-size:21px;line-height:1.2;letter-spacing:-.005em;
  color:var(--ink);text-decoration:none;
}
.menu-link:hover,.menu-link:active{color:var(--accent)}
.menu-link[aria-current="page"]{color:var(--accent)}
html:has(.site-menu[open]){overflow:hidden}

.site-menu[open] .menu-panel{animation:menu-in .24s cubic-bezier(.2,.7,.2,1)}
.site-menu[open]::backdrop{animation:menu-fade .24s ease}
@keyframes menu-in{from{transform:translateX(-100%)}to{transform:none}}
@keyframes menu-fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .site-menu[open] .menu-panel,.site-menu[open]::backdrop{animation:none}
}

@media (max-width:700px){

  /* the flag's own strip is gone from the phone — the menu holds
     the categories. The band under the lead stays: it is a rail in
     the page rather than another line in the header. */
  .has-menu .strip-row{flex-wrap:nowrap}

  /* the menu holds the categories on a phone, so the band goes:
     one thing travelling down the screen, not two */
  .strip-band{display:none}
  .strip-zone{margin-top:36px}

  /* no date and no motto on a phone: the flag is the burger, the
     magnifier, the wordmark and the two icons */
  .page-front .masthead-left .date-cell,
  .page-front .nav .strapline{display:none}
  .page-front .masthead-left{flex-direction:row;align-items:center;gap:2px;padding:0}
  .page-front .nav{flex-direction:row;align-items:center;padding:0}

  /* the magnifier moves next to the burger */
  .masthead-left .search-toggle{
    position:static;transform:none;
    width:38px;height:38px;margin-left:2px;
  }
  .masthead-left .search-toggle svg{width:19px;height:19px}
  /* open, the line takes its own height rather than floating the
     field over the lead */
  .page-front .strip-row.is-searching{
    display:block;position:relative;z-index:50;
    background:var(--paper);padding:5px 0 11px;
  }
  .page-front .strip-row.is-searching .search-box{
    position:static;transform:none;display:block;height:auto;
  }
  .page-front .strip-row.is-searching .search-input{max-width:none}
  /* the results hang from the field, not from where the magnifier
     used to be: the old offset pushed them off the left edge */
  .page-front .strip-row.is-searching .search-results{left:0;right:auto;width:100%}
  .strip-band .category-strip{padding:9px 26px 9px 0}
  .has-menu .strip-row .date-cell{
    flex:1 1 0%;padding:0 37px 0 0;
  }

  /* and the footer keeps its name and its small print: the three
     columns of links are what the menu is for */
  .has-menu .foot-col{display:none}
}