/* Insights: The Record, the template for every issue of AI Firsthand on the site (README.md beside this file). Built on
   9 Oct 2026 as one of four directions and mended the same day after two reviews (NOTES.md has each finding); chosen by
   Xavi on 14 Oct. The site's own rail and stage as a document on white.
   - An issue's page: the stage holds the title block, the picture and Gonzalo's words; the rail beside it holds the
     issue's record (who wrote it, number, date) and its sections as hairlines that fill as they're read.
   - The index has its own grid (index.css) under the same masthead.
   - Both close on the site's two halves, once, with the one ask after the reading.
   The book's rules hold: the tokens and their pairs, PP Neue Montreal at 400 and 500, the spacing set, radius 4 (16 on
   the photograph), no shadow, no opacity on a brand colour. Where the template bends the book is listed in NOTES.md.
   One left edge a column: the lockup's for the rail, the stage's first column for everything on the stage.
   Widths: rail on 4 columns and stage on 7 from 1200 px; rail on 3 and stage on 8 from 900; one column under that. */

/* ---------- the text's sizes ---------- */
/* Fixed units, so they follow the reader's own text size and not the window: the reading text, his first paragraph
   (the lead) and the small text of the rail, the captions and the labels' values. They step up twice on wide screens,
   where 18 px sat under 40 px headings and was smaller than the nav's links: this goes past the CONTRACT's "18 px on a
   desktop" and is the second review's ask (NOTES.md). To go back, delete the two wide rules. The measure is 32em: this
   face is narrow, and at 36em a full line ran 72 to 91 characters. At 32em it runs about 73. */
.rec{--rec-text:1.125rem;--rec-lead:1.375rem;--rec-small:.9375rem;--rec-measure:32em}
@media (min-width:1440px){.rec{--rec-text:1.25rem;--rec-lead:1.5rem;--rec-small:1rem}}
@media (min-width:1800px){.rec{--rec-text:1.375rem;--rec-lead:1.75rem;--rec-small:1.0625rem}}
@media (max-width:760px){.rec{--rec-text:1.0625rem;--rec-lead:1.25rem}}

/* ---------- the page's frame ---------- */
/* White from the bar to the close. Nothing has id="top", so the bar is glass from the first pixel and the page leaves
   it room: the bar's height and 40 of air. The bar doesn't fade in here as it does over the home's footage: the page's
   own markup gives it its resting state, and it's there before any script. */
.rec main{padding-top:calc(var(--nav) + 40px)}
html.motion .rec .nav .row{opacity:1;transform:none;transition:none}
.rec-art{padding-bottom:var(--sec)}
/* Two rows of small caps, then the content: the way back and the kicker share the first line, 24 tall with 20 under it,
   so the portrait and the title start level on the second. The first row is a fixed track so the title block, which
   spans the first two, can't stretch it. The ending is a row of its own under the rows the rail spans: the rail has
   scrolled away when it arrives. */
.rec-art{grid-template-rows:44px auto auto auto}
.rec-crumb{grid-column:1/span 4;grid-row:1}
.rec-head{grid-row:1/span 2}
.rec-rail{grid-row:2/span 2;display:block}
.rec-body{grid-row:3}
.rec-end{grid-row:4}

/* the way back, in the detail style: a link, so its underline is always there */
.rec-crumb ol{line-height:24px}
.rec-crumb a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.rec-crumb a:hover{color:var(--fathom)}

/* ---------- the title block ---------- */
/* The kicker: the column's monogram (Gonzalo's file, as the newsletter shows it: Xavi's pick of 15 Oct, which took the
   place of the code in the book's outlined tag), with the column's full name and the issue's number at its foot. The dot
   between them is in the words' own Deep Teal: Coastal Grey isn't a colour for marks on white. The monogram is set by
   its height, its width following, every letter that stands past its square kept (his README: never cropped,
   recoloured or redrawn); 72 px at 1440, 96 at 1920, as wide as the email shows it. */
.rec-kick{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 12px;min-height:24px;margin-bottom:24px}
.rec-kick span:not(:last-child)::after{content:"·";margin-left:12px}   /* the dot trails its word, so a row that wraps never starts on one */
.rec-mono{display:block;flex:none;width:auto;height:var(--mono,clamp(56px,5vw,96px));margin-right:4px}
/* The title in Book at the section title's size (44.6 at 1440), typed once (it carries .display so motion.js types
   it; insights.js puts it back as plain text). The standfirst at subline size in Deep Teal. */
.rec-title{font-size:var(--t-h2);line-height:1.1}
@media (min-width:761px){.rec-art .rec-title{font-size:max(36px,var(--t-h2))}}   /* off a phone, never under 36: a clear step over the 28 px headings */
.rec-stand{margin-top:16px;font-size:var(--t-sub);line-height:1.15;letter-spacing:-.01em;color:var(--deep);text-wrap:balance}
/* His first paragraph, the lead: reading text, so in fixed units, one step over the body. */
.rec-lead{margin-top:32px;font-size:var(--rec-lead);line-height:1.4;letter-spacing:-.01em;text-wrap:pretty}
.rec-lead strong,.rec-body strong{font-weight:500}          /* his bold is Medium, never 700 */
.rec em{font-style:normal}                                    /* and the book has no italic: his own emphasis is set upright too */
/* The photograph: the stage's width, uncropped (the file is 16:9), radius 16, nothing over it. */
.rec-photo{margin-top:40px;aspect-ratio:1672/941}
/* It comes in softly, with the page (Xavi, 15 Oct: "la imagen del detalle la podríamos animar suavemente de entrada"):
   it waits unseen from the first paint (only under html.motion, which the head sets, never with reduced motion), and once
   its picture has loaded record.js lets it in: it fades in where it stands, and inside its frame the picture settles from
   a touch closer, 6% larger, over 1.8 s, slower than the fade, so it is still drawing back a moment after it has
   appeared. (The site's photographs slide down as they fade, motion.js's .rv; this one doesn't. Waiting for motion.js,
   it was already on screen, and the fade never showed.) Once. */
html.motion .rec-photo{transform:none;transition:opacity 1.1s ease var(--rd,0s)}
html.motion .rec-photo:not(.in){opacity:0}
html.motion .rec-photo img{transition:transform 1.8s cubic-bezier(.2,.7,.2,1) var(--rd,0s)}
html.motion .rec-photo:not(.in) img{transform:scale(1.06)}
/* A photograph still to come (Xavi, 15 Oct 2026: Gonzalo is to send them): its place at its size, the Sea Foam .photo
   already is, and the email's own description of it in the middle, in the small text. data-placeholder finds them. */
.rec-soon{display:grid;place-items:center;padding:24px}
.rec-soon figcaption{max-width:28em;font-size:var(--rec-small);line-height:1.5;color:var(--deep);text-align:center;text-wrap:balance}

/* ---------- a person: the portrait in its own 4:5 frame, small, with no effect ---------- */
.rec-face{aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;background:var(--grey)}
.rec-face img{width:100%;height:100%;object-fit:cover}
.rec-name{display:block;font-size:var(--rec-small);font-weight:500;line-height:1.3}
.rec-role{display:block;font-size:var(--rec-small);line-height:1.4;color:var(--deep)}

/* ---------- the rail ---------- */
/* It stays beside the text, its content 24 under the bar (the 8 of padding sets the portrait's top on the title's
   capitals rather than on its line box). It never scrolls by itself and is never cut: on a short window it closes up
   (below), and where it still wouldn't fit, record.js lets it go with the page (.free). No wider than the book's rail. */
.rec-rail-in{position:sticky;top:calc(var(--nav) + 16px);max-width:428px;padding-top:8px}
.rec-rail-in.free{position:static}
.rec-by{display:grid;grid-template-columns:72px minmax(0,1fr);gap:16px;align-items:center}
.rec-by .detail{display:block;margin-bottom:8px}
/* The record: three rows on hairlines, the label in the detail style, the value in Book. */
.rec-meta{margin-top:24px;border-top:1px solid var(--edge)}
.rec-meta div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-block:12px;border-bottom:1px solid var(--edge)}
.rec-meta dd{font-size:var(--rec-small);line-height:1.4;text-align:right}
/* In this issue: four rows, four rules. Under each row a Coastal Grey hairline, with a Fathom one over it that grows
   from the left as that section is read (--p, from record.js): the rule the site's steps use. The section being read
   is in Fathom Medium; the others in Deep Teal. A finished issue shows four Fathom rules and none grey. Medium runs 3%
   wider than Book, so it's set .014em closer (inside the book's tightest, -.02em) and a title breaks where it did;
   and every title is laid out in both weights at once (the unseen one from data-t), so a row can't change height
   when its weight does. */
.rec-toc{margin-top:32px}
.rec-toc li{position:relative;border-bottom:1px solid var(--edge)}
.rec-toc li::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--fathom);transform:scaleX(var(--p,0));transform-origin:0 50%}
.rec-toc a{display:grid;grid-template-columns:32px minmax(0,1fr);align-items:baseline;padding-block:12px;font-size:var(--rec-small);line-height:1.4;color:var(--deep);text-decoration:none;transition:color .25s}
.rec-toc .t{display:grid}
.rec-toc .t>span,.rec-toc .t::after{grid-area:1/1;text-wrap:balance}
.rec-toc .t::after{content:attr(data-t);font-weight:500;letter-spacing:-.014em;visibility:hidden}
.rec-toc a:hover,.rec-toc a[aria-current]{color:var(--fathom)}
.rec-toc a[aria-current] .n{color:var(--fathom)}
.rec-toc a[aria-current] .t>span{font-weight:500;letter-spacing:-.014em}
/* The one thing to do here: copy this issue's address. A text link, its underline always there. (The ask to
   subscribe is the nav's button while reading, and the closing band's after it: one a moment.) */
.rec-acts{margin-top:24px}
.rec-acts:has([hidden]){display:none}
.rec .link{font-size:var(--rec-small)}
.rec-copy{padding:0;border:0;background:none;color:inherit;font-family:inherit;line-height:inherit;cursor:pointer}
.rec-copy[hidden]{display:none}
/* A short window (a 1366 by 768 laptop's browser shows about 650): the rail closes up so all of it stays in view. */
@media (min-width:900px) and (max-height:760px){
  .rec-meta div,.rec-toc a{padding-block:8px}
  .rec-meta,.rec-acts{margin-top:16px}
  .rec-toc{margin-top:24px}
}
/* Shorter than that it can't fit, and goes with the page. record.js measures this exactly; this is for without it. */
@media (min-width:900px) and (max-height:600px){.rec-rail-in{position:static}}
/* the title block's own byline is for where there's no rail */
.rec-byline{display:none}

/* ---------- the body: a reading text of its own ---------- */
/* PP Neue Montreal Book in Fathom, in fixed units, leading 1.5, a measure of 32em. Paragraphs keep the measure; the
   picture, the diagram, the figures and every hairline take the stage's width. The body is a container, so the
   diagram can ask how much room the stage has rather than how wide the window is. */
.rec-body{margin-top:var(--head);font-size:var(--rec-text);line-height:1.5;container:rec-stage/inline-size}
.rec-body p{max-width:var(--rec-measure);text-wrap:pretty}
.rec-body p+p,.rec-body ul+p,.rec-body p+ul{margin-top:20px}
.rec-body p a{color:var(--deep);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.rec-body p a:hover{color:var(--fathom)}
/* The one sentence he set whole in bold, raised where it stands: Book at subline size between two hairlines, in the
   standfirst's Deep Teal so it isn't taken for a heading. No quotation marks; it isn't said twice. */
.rec-body .rec-pull{max-width:none;margin-block:40px;padding-block:28px;border-block:1px solid var(--edge);font-size:max(1.5rem,var(--t-sub));line-height:1.2;letter-spacing:-.01em;color:var(--deep);text-wrap:balance}
.rec-body .rec-pull strong{font-weight:400}

/* ---------- a section: a hairline, its number, its heading ---------- */
/* The heading in Book at subline size, never under 28 px, so it keeps a clear step over the text on a narrow window.
   A link to it stops with the section's hairline 24 under the bar: the 76 is that 24 and the 52 from the hairline
   down to the heading. */
.rec-sec{margin-top:var(--head);padding-top:20px;border-top:1px solid var(--edge)}
.rec-no{line-height:20px;margin-bottom:12px}
.rec-h2{max-width:21.6em;margin-bottom:24px;font-size:max(1.75rem,var(--t-sub));font-weight:400;line-height:1.15;letter-spacing:-.01em;text-wrap:balance;scroll-margin-top:76px}
/* A list he leads each item of in bold: rows on hairlines, his lead-in in Medium at the left, the rest at the right
   (issue 01's three situations, issue 03's four steps). Numbered where his list is (issue 02's four questions): the
   number in the detail style before the lead-in. */
.rec-rows{max-width:var(--rec-measure);border-top:1px solid var(--edge)}
.rec-rows li{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:var(--gap);padding-block:12px;border-bottom:1px solid var(--edge)}
.rec-body p+.rec-rows,.rec-body .rec-rows+p{margin-top:20px}
.rec-rows-n{counter-reset:q}
.rec-rows-n li{counter-increment:q;grid-template-columns:32px minmax(0,5fr) minmax(0,6fr);column-gap:0}
.rec-rows-n li::before{content:counter(q,decimal-leading-zero);font-size:var(--rec-small);line-height:inherit;letter-spacing:.08em;color:var(--deep);padding-top:.15em}
.rec-rows-n li strong{padding-right:var(--gap)}

/* A table of his (issue 02's "at a glance"): the book's. Headers in the detail style in Deep Teal over a 1 px Fathom
   rule, rows in Book on Coastal Grey hairlines, no fills, no vertical rules. Each row's question in Medium is its
   header. On a phone a row stands as a block: the question, then each answer under its column's name. */
.rec-table{width:100%;max-width:none;margin-top:8px;border-collapse:collapse;table-layout:fixed;font-size:var(--rec-small);line-height:1.5}
.rec-table thead :is(th,td){padding:0 16px 12px 0;border-bottom:1px solid var(--fathom);text-align:left;vertical-align:bottom;font-size:.8125rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--deep)}
.rec-table tbody :is(th,td){padding:16px 16px 16px 0;border-bottom:1px solid var(--edge);text-align:left;vertical-align:top;font-weight:400}
.rec-table tbody th{font-weight:500}
.rec-body .rec-table+p{margin-top:24px}
@media (max-width:760px){
  .rec-table,.rec-table tbody,.rec-table tr,.rec-table :is(th,td){display:block;width:100%}
  .rec-table thead{display:none}
  .rec-table tbody tr{padding-block:16px;border-bottom:1px solid var(--edge)}
  .rec-table tbody :is(th,td){padding:0;border:0}
  .rec-table tbody td{margin-top:12px}
  .rec-table tbody td::before{content:attr(data-label);display:block;margin-bottom:4px;font-size:.8125rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--deep)}
}

/* ---------- the figures, set apart once ---------- */
/* Two rows under a Fathom rule: the figure at the left in Medium at subline size (and never under 1.5 times the
   reader's own text size), its unit in Book a step down (.6 of its figure, whatever the figure's size), and what it measures at the right, in the issue's own words. Then his
   sentence on what the percentages measure. No Sea Mist. The figures count up once, as they come into view (motion.js, Xavi 15 Oct). The split is seven columns: two for the
   figure, five for the words. */
.rec-figs{margin-top:var(--head)}
.rec-figs>.detail{margin-bottom:12px}
.rec-figs dl{border-top:1px solid var(--fathom)}
.rec-figs dl div,.rec-end-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));column-gap:var(--gap);border-bottom:1px solid var(--edge)}
.rec-figs dl div{align-items:start;padding-block:20px}
.rec-figs dd{grid-column:1/span 2;grid-row:1;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;font-size:max(1.5rem,var(--t-sub));line-height:1}
.rec-figs dt{grid-column:3/-1;font-size:var(--rec-small);line-height:1.5;max-width:34em}
.rec-n{font-weight:500;letter-spacing:-.02em;font-variant-numeric:lining-nums proportional-nums}
.rec-u{font-size:.6em;font-weight:400}
.rec-figs .tag{flex:none;margin-top:8px}
.rec-body .rec-figs-note{max-width:none;margin-top:12px;font-size:var(--rec-small);line-height:1.5;color:var(--deep)}
.rec-body .rec-figs+p{margin-top:var(--head)}                  /* where his text goes on after them (issue 03) */

/* ---------- FIG. 1: the diagram ---------- */
/* The figure itself is figure.css and figure.js: the flow of steps, laid out by its own box's width and told once. On
   white, with no cell. Here only what is the page's: where it stands, its head (the
   book's outlined tag, the title, and Replay at the right) and the email's caption under it, on a hairline. */
.rec-fig{margin-block:var(--head);padding-top:20px;border-top:1px solid var(--edge)}
.rec-fig-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;max-width:none;margin-bottom:24px}
.rec-fig-head .fx-replay{margin-left:auto}
.rec-fig-title{font-size:var(--rec-text);font-weight:500;line-height:1.3}
.rec-fig figcaption{padding-top:12px;border-top:1px solid var(--edge);font-size:var(--rec-small);line-height:1.5;color:var(--deep)}
/* a line his diagram carries under its drawing (issue 04's second): his words, in the caption's small text and ink,
   centred under the drawing as he set it, before the caption's hairline */
.rec-body .rec-fig-note{max-width:none;margin-block:24px 16px;font-size:var(--rec-small);line-height:1.5;color:var(--deep);text-align:center;text-wrap:balance}
@container fx (min-width:580px){.rec-fig-head{margin-bottom:32px}.rec-fig:has(svg.module) figcaption{margin-top:20px}}

/* ---------- the ending: three rows on hairlines ---------- */
/* On the stage's columns, under the rows the rail spans. Label at the left in caps, the row's words from the third of
   seven columns: the figures' own split. */
.rec-end{margin-top:var(--head);border-top:1px solid var(--fathom);font-size:var(--rec-text);line-height:1.5}
.rec-end-row{padding-block:24px}
.rec-end-row>.detail{grid-column:1/span 2;line-height:1.3;padding-top:8px}
.rec-end-row>div,.rec-end-row>.rec-author{grid-column:3/-1}
.rec-end-t{display:block;font-size:var(--t-h3);line-height:1.25;letter-spacing:-.01em}
/* The next issue: its column's monogram at the cards' size on the index, its column and number in the detail style at
   its foot, its title a link at the row's size, its underline always there (a link on these pages always shows it). */
.rec-next-k{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 12px;margin-bottom:16px}
.rec-next-k .rec-mono{--mono:44px}
.rec-next-k span:not(:last-child)::after{content:"·";margin-left:12px}
.rec-next{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;text-wrap:balance}
.rec-next:hover{text-decoration-thickness:2px}
/* His four outcomes, a dot between them. Each dot leads its word, in 16 px of room, and the list is pulled 16 px to
   the left and cut there: so the first dot of any line is never seen, and no line starts or ends on one. */
.rec-outcomes{display:flex;flex-wrap:wrap;margin:8px 0 0 -16px;clip-path:inset(0 0 0 16px);font-size:var(--rec-small);line-height:1.5;color:var(--deep)}
.rec-outcomes li{position:relative;padding-left:16px}
.rec-outcomes li::before{content:"·";position:absolute;left:0;width:16px;text-align:center}
.rec-author .rec-role{margin-top:8px}              /* his name and role, no portrait: it's in the rail and the byline already (Xavi, 15 Oct) */
.rec-colophon p{max-width:34em;font-size:var(--rec-small);line-height:1.5}
.rec-colophon p+p{margin-top:8px;color:var(--deep)}
.rec-colophon p:last-child{margin-top:16px;color:var(--fathom)}
.rec-colophon p:last-child:has([hidden]){display:none}
/* Copy link stands once: in the rail where there is one, here where there isn't. (As the rail leaves and the ending
   arrives, both would be in one view.) */
@media (min-width:900px){.rec-colophon p:last-child{display:none}}

/* ---------- the close: the site's two halves, once ---------- */
/* The newsletter page's construction (homepage/newsletter/newsletter.css) as a band: the dark half's words begin
   where the lockup does, the paper half's end where the nav's links do. Only the dark half is marked dark, so the nav
   (which reads what is under the middle of the bar) follows the half that's under it when they stack. The paper
   half's button is the book's secondary: a Fathom outline that fills Fathom. */
.rec-close{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.rec-close-dark,.rec-close-paper{display:flex;min-width:0}
.rec-close-paper{background:var(--foam);color:var(--fathom)}   /* Sea Foam since Xavi's review of 9 Oct (it was Warm Sand): no warm family on Insights */
.rec-close-in{width:100%;max-width:calc(var(--max) / 2);padding-block:var(--sec)}
.rec-close-dark .rec-close-in{margin-left:auto;padding-inline:var(--m) clamp(24px,5vw,96px)}
.rec-close-paper .rec-close-in{margin-right:auto;padding-inline:clamp(24px,5vw,96px) var(--m);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:24px}
.rec-close-line{margin-top:16px;max-width:17em;font-size:var(--t-sub);font-weight:400;line-height:1.15;letter-spacing:-.01em;text-wrap:balance}
.rec-close-ask{font-size:var(--t-h3);line-height:1.25;letter-spacing:-.01em}

/* ---------- 900 to 1199: the pair on narrower columns ---------- */
/* The rail on three columns and the stage on eight (at 1024, a 219 px rail and a 623 px stage), so the page keeps
   its two edges and the text its measure. The portrait steps down with the rail. base.css stacks any rail and stage
   at 980; these keep the pair down to 900. */
@media (min-width:900px) and (max-width:1199px){
  .rec-crumb{grid-column:1/span 3}
  .rec-art>.rail{grid-column:1/span 3}
  .rec-art>.stage{grid-column:5/span 8}
  .rec-art>.rec-head{margin-top:0}
  .rec-by{grid-template-columns:56px minmax(0,1fr);gap:12px}
}

/* ---------- under 900: one column ---------- */
/* The article: one column, 648 px at most, in the middle of the page, with the photograph and the diagram wider than
   it, at the page's width (--side is what's left each side of the column). The title block carries the byline as one
   compact row (the portrait at 40 by 50, name, role, then the facts as a line that wraps), the rail keeps only its
   list of sections, now a plain list under the picture, and nothing sticks but the nav.
   */
@media (max-width:899px){
  .rec-art{grid-template-rows:none;--side:max(0px,calc((100vw - 2*var(--m) - 40.5rem)/2))}
  .rec-art>*,.rec-art>.rail,.rec-art>.stage{grid-column:1/-1;grid-row:auto;margin-top:0;padding-inline:var(--side)}
  .rec-art .rec-photo,.rec-art .rec-fig{margin-inline:calc(-1*var(--side))}
  .rec-crumb{margin-bottom:12px}
  .rec-kick{margin-bottom:16px}
  .rec-byline{display:grid;grid-template-columns:40px minmax(0,1fr);gap:8px 12px;align-items:center;margin-top:24px}
  .rec-facts{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px 20px;padding-top:12px;border-top:1px solid var(--edge)}
  .rec-facts div{display:flex;align-items:baseline;gap:8px}
  .rec-facts dd{font-size:var(--rec-small)}
  .rec-lead{margin-top:24px}
  .rec-photo{margin-top:32px}
  .rec-rail-in{position:static;max-width:none;padding-top:0}
  .rec-rail .rec-by,.rec-meta,.rec-acts{display:none}
  .rec-toc{margin-top:32px}
  .rec-toc li::after{content:none}
  .rec-toc a[aria-current]{color:var(--deep)}
  .rec-toc a[aria-current] .t>span{font-weight:400;letter-spacing:0}
  .rec-art>.rec-body{margin-top:32px}
  .rec-art>.rec-end{margin-top:var(--head)}
}
/* The two halves stack, each as tall as its words. */
@media (max-width:900px){
  .rec-close{grid-template-columns:minmax(0,1fr)}
  .rec-close-in{max-width:none}
  .rec-close-dark .rec-close-in,.rec-close-paper .rec-close-in{padding:40px var(--m)}
}
@media (max-width:760px){
  .rec main{padding-top:calc(var(--nav) + 16px)}
  .rec-crumb{margin-bottom:8px}
  .rec-stand{margin-top:12px;font-size:20px;line-height:1.25}
  .rec-byline{margin-top:20px}
  /* the reading text on a phone: 17 on 26, its headings at 24 */
  .rec-body{line-height:1.53}
  .rec-h2{font-size:1.5rem}
  .rec-body .rec-pull{margin-block:32px;padding-block:24px}
  .rec-rows li{display:block}
  .rec-end-row{display:block}
  .rec-figs dl div{display:flex;flex-direction:column-reverse;gap:8px}   /* the figure first, then what it measures */
  .rec-end-row>.detail{padding-top:0;margin-bottom:12px}
}

/* Issue 01's title on a phone too narrow for it on one line: it breaks after "weeks", where the sense does, not where
   two even lines would put it ("RFPs: from 3"). The first line is 8 em long; the next word would make it 9. Only that
   title asks for it (data-break on its h1): a longer one is better balanced. */
@media (max-width:480px){.rec-art .rec-title[data-break]{max-width:8.5em;text-wrap:wrap}}

/* ---------- motion ---------- */
/* The rail's hairlines follow the scroll itself, so they have no timing of their own. Reduced motion: record.js
   sets a hairline whole or empty, never part way, and nothing on these pages moves. */
@media (prefers-reduced-motion:reduce){.rec-toc a{transition:none}}