/* The door at /sr, in the site's own palette and faces (Michael's ruling, 14 October: the site's tokens as they stand,
   nothing invented for the page; no program accent). The header, the footer, the theme switch, the ground, the red,
   the faces and the type scale are the site's (structure.css); this sheet only lays the door's sections out.
   Loaded on /sr/ only, as /assets/sr.css. Every colour here is a token of structure.css. */

/* ── the shell on this screen: the header's button an outline, as on the home page, so the door's is the one filled ── */
[data-screen=sr] .site-actions .btn.primary{background:transparent;color:var(--red-text);border-color:var(--red-line)}
[data-screen=sr] .site-actions .btn.primary:hover{background:var(--red-wash);border-color:var(--red-text)}

/* ── the page: sections open with the site's ruled line, the one that starts at a tick ── */
main.sr>section{position:relative;padding-block:88px}
main.sr>section+section::after{content:"";position:absolute;left:40px;right:40px;top:-5px;height:11px;
  background:var(--tick) 0 0/11px 11px no-repeat,linear-gradient(var(--line-strong),var(--line-strong)) 5px 5px/calc(100% - 5px) 1px no-repeat}
main.sr .card-n{color:var(--red-text)}
main.sr .mono-label{margin-top:4px}

/* ── hero: the home page's headline scale, the second sentence in the red ── */
main.sr>section.sr-hero{padding-block:84px 76px}
.sr-eyebrow{display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:12.5px;line-height:1.6;font-weight:550;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.sr-eyebrow::before{content:"";flex:none;width:22px;height:2px;background:var(--red);transform:rotate(-45deg)}
.sr-hero h1{margin-top:26px;font-size:clamp(46px,6.1vw,82px);line-height:.98;font-weight:600;letter-spacing:-.035em}
.sr-hero h1>span{display:block;text-wrap:balance}
/* the second line of the headline: the red, at the lead size the home page gives a sub-line of its h1 (.h1-lead) */
.sr-hero h1>.sr-then{color:var(--red);font-size:.6em;line-height:1.08;letter-spacing:-.025em;margin-top:.5em;max-width:19em}
.sr-hero .lede{max-width:34em}
.sr-hero .hero-actions{margin-top:36px}
/* the two doors as one pair under one pitch: the review path filled, the build path the site's outline button, side by side; on a phone they stack (structure.css) */
.sr-doors{gap:14px 16px}
/* under the buttons: one line (ten minutes, no account, nothing kept); nothing of GitHub here, it is offered at the end */
.sr-need{margin-top:18px;font-size:14px;line-height:1.6;color:var(--ink-2)}
/* the drawing beside the copy, as the home page sets its tower (21 October): the copy's column and the drawing's, the
   drawing starting where the headline does and running to the hero's foot; one subject of the generator per page (the
   gantry, Michael's pick; the six side by side at /studies/subjects/). */
.sr-hero{display:grid;grid-template-columns:minmax(0,1.24fr) minmax(0,.76fr);gap:24px;align-items:stretch}
.sr-hero .hero-copy{align-self:start;position:relative;z-index:1}
.sr-hero .hero-art{position:relative;min-height:0;margin:0 -40px 0 0;clip-path:inset(-200vh -200vw -200vh 0)}
/* the chooser (/studies/subjects/, unlisted): the subjects stacked on the left, the chosen one alone at the homepage's size, Replay under it */
main.subjects .subjects-chooser{display:grid;grid-template-columns:220px minmax(0,1fr);gap:24px 48px;align-items:start}
.subjects-pick{display:grid;gap:8px;align-content:start}
.subject-pick{text-align:left;padding:10px 14px;border:1px solid var(--line);background:none;color:var(--ink-2);font:inherit;font-size:14.5px;line-height:1.4;cursor:pointer}
.subject-pick:hover{border-color:var(--line-strong);color:var(--ink)}
.subject-pick[aria-pressed=true]{border-color:var(--ink);color:var(--ink);font-weight:600}
.subjects-stage{display:grid;gap:14px;justify-items:start}
main.subjects .subject-stage-art{position:relative;width:100%;max-width:560px;height:auto;max-height:none;aspect-ratio:600/760;min-height:0;margin:0;clip-path:none;overflow:visible}
main.subjects .subject-stage-art .st-tower{position:absolute;inset:0;width:100%;height:100%}
.subject-stage-art svg{display:block;width:100%;height:100%}
.subjects-stage-row{display:flex;align-items:center;gap:16px}
.subject-stage-name{margin:0;font-family:var(--mono);font-size:12.5px;line-height:1.6;font-weight:550;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.subject-replay{height:36px;padding:0 14px;font-size:14px}
.subjects-figures{display:none}
@media (max-width:900px){main.subjects .subjects-chooser{grid-template-columns:minmax(0,1fr);gap:20px}.subjects-pick{display:flex;flex-wrap:wrap;gap:8px}.subject-pick{padding:8px 12px;font-size:13.5px}.subject-stage-art{max-width:none}}

/* ── the problem, in tiers, as the home page sets it: the lead in the red, the reason, the promise under a hairline ── */
.sr-lead{font-size:36px;line-height:1.12;font-weight:600;letter-spacing:-.022em;color:var(--red);max-width:17em;text-wrap:balance}
.sr-reason{margin-top:20px;font-size:19px;line-height:1.55;color:var(--ink-2);max-width:33em;text-wrap:pretty}
.sr-promise{margin-top:28px;padding-top:24px;border-top:1px solid var(--line);font-size:19px;line-height:1.55;color:var(--ink);max-width:33em;text-wrap:pretty}

/* ── how it goes: four numbered cards across, the site's card pattern ── */
.cards.sr-beats{grid-template-columns:repeat(4,minmax(0,1fr))}
.sr-qs,.sr-verdicts,.sr-read-list{margin:4px 0 0;padding:0;list-style:none;align-self:stretch}
.sr-qs li,.sr-verdicts li,.sr-read-list li{padding:8px 0;border-top:1px solid var(--line);font-size:14px;line-height:1.5;color:var(--ink-2);text-wrap:pretty}
.sr-qs li:last-child,.sr-verdicts li:last-child,.sr-read-list li:last-child{border-bottom:1px solid var(--line)}
.sr-verdicts li{color:var(--ink);font-weight:550}
.sr-verdicts li.sr-verdict-no{color:var(--red-text);font-weight:600}
.sr-note{margin-top:4px;font-size:14px;line-height:1.5;color:var(--ink-2);text-wrap:pretty}

/* ── a second read: the prose beside what every read says ── */
.sr-read{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:48px;align-items:start}
.sr-read-card{padding:22px 22px 24px;background:var(--card);border:1px solid var(--line);border-radius:2px}
.sr-read-card .mono-label{margin-top:0}
.sr-read-list{margin-top:10px}
.sr-read-list li{color:var(--ink);font-size:15px}
/* where the readers are counted: the affiliation line, the site's mono label */
.sr-aff{margin-top:18px;font-family:var(--mono);font-size:12.5px;line-height:1.6;letter-spacing:.06em;color:var(--ink-2)}

/* ── who this is from, and the count from one on ── */
.sr-count{margin-top:32px;font-size:30px;line-height:1.2;font-weight:600;letter-spacing:-.022em;color:var(--ink)}
.sr-count strong{font-weight:600;color:var(--red);font-variant-numeric:tabular-nums}

/* ── closing: the home page's red sheet with the cut corner, the same tokens, the same in both themes ── */
main.sr>section.sr-closing{padding:92px 104px 100px;margin-bottom:96px;z-index:0}
main.sr>section.sr-closing::after{display:none}
.sr-closing::before{content:"";position:absolute;inset:0 40px;z-index:-1;pointer-events:none;background:var(--slash-close) right 0 bottom 0 no-repeat,var(--red);clip-path:polygon(0 0,calc(100% - 44px) 0,100% 44px,100% 100%,0 100%)}
.sr-closing h2{font-size:clamp(34px,4.4vw,56px);letter-spacing:-.03em;max-width:12em;color:var(--close-ink)}
.sr-closing .hero-actions{margin-top:36px}
.sr-closing .btn.primary{background:var(--close-btn);border-color:var(--close-btn);color:var(--close-btn-ink)}
.sr-closing .btn.primary:hover{background:var(--close-btn);border-color:var(--close-btn);filter:brightness(.94)}
.sr-closing :focus-visible{outline-color:var(--close-ink)}

/* ── narrow ── */
@media (max-width:1100px){.cards.sr-beats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
  main.sr>section{padding-block:60px}
  main.sr>section+section::after{left:20px;right:20px}
  main.sr>section.sr-hero{padding-block:48px 56px}
  .sr-hero{display:flex;flex-direction:column}
  .sr-hero .hero-art{order:5;height:220px;min-height:0;margin:28px 0 0;overflow:hidden;clip-path:none}
  .sr-hero .hero-art .st-tower{inset:0 0 auto;height:auto;aspect-ratio:600/760}
  .sr-eyebrow{font-size:11.5px;letter-spacing:.1em}
  .sr-lead{font-size:29px}
  .sr-reason,.sr-promise{font-size:18px}
  .cards.sr-beats{grid-template-columns:minmax(0,1fr)}
  .sr-read{grid-template-columns:minmax(0,1fr);gap:28px}
  .sr-count{font-size:26px}
  main.sr>section.sr-closing{padding:60px 44px 64px;margin-bottom:64px}
  .sr-closing::before{inset:0 20px;background-position:right -190px bottom 0,0 0;clip-path:polygon(0 0,calc(100% - 30px) 0,100% 30px,100% 100%,0 100%)}
}
@media (max-width:520px){.sr-closing::before{background:var(--red)}main.sr>section.sr-closing{padding-inline:40px}}
/* ── phone: the hero tighter so the review door's button is on the first screen (the postcard's landing) ── */
@media (max-width:520px){
  main.sr>section.sr-hero{padding-block:36px 48px}
  .sr-hero h1{margin-top:20px;font-size:40px}
  .sr-hero h1>.sr-then{font-size:.62em;margin-top:.45em}
  .sr-hero .lede{margin-top:18px;font-size:17px;line-height:1.5}
  .sr-hero .hero-actions{margin-top:22px}
}