@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600&family=Source+Serif+4:ital,wght@0,400;0,600;1,400&display=swap');

:root{
  --paper:#EEEBE3; --ink:#1B1912; --mid:#6E695C; --faint:#9C9788; --rule:#DBD5C5;
  --oxide:#8B3A2E; --oxidesoft:#F3E4E0;
  --cue:#2C4A5E; --cuesoft:#E4EBEE;
  --bar:#1B1912; --bartext:#EEEBE3;
  --display:"Fraunces",Georgia,serif;
  --serif:"Source Serif 4","Iowan Old Style",Georgia,serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --courier:"Courier Prime","Courier New",Courier,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--serif);font-size:18px;line-height:1.5;
}
::selection{background:var(--oxidesoft);color:var(--ink)}
a{color:var(--oxide);text-decoration:none;border-bottom:1px solid rgba(139,58,46,.35);transition:border-color .15s}
a:hover{border-bottom-color:var(--oxide)}
a:focus-visible,button:focus-visible{outline:2px solid var(--cue);outline-offset:3px}

/* banner: two full-width bands */
.bar{background:var(--bar);color:var(--bartext)}
.barin{max-width:920px;margin:0 auto;padding:26px 22px 20px}
.bar .name{font-family:var(--courier);font-weight:400;font-size:44px;letter-spacing:.005em;
  text-transform:none;margin:0;color:var(--bartext)}

.navbar{background:var(--cue)}
.navrow{max-width:920px;margin:0 auto;padding:11px 22px;display:flex;flex-wrap:wrap;
  justify-content:space-between;align-items:baseline;gap:8px 24px}
.navrow .role2{font-family:var(--mono);font-size:12px;letter-spacing:.03em;color:#C7D8DF}
.navrow nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 20px;
  font-family:var(--mono);font-size:12px;letter-spacing:.08em}
.navrow nav a{color:#A9C2CC;text-transform:uppercase;border:0;padding:2px 0;position:relative;text-decoration:none}
.navrow nav a:hover{color:#fff}
.navrow nav a[aria-current="page"]{color:#fff}
.navrow nav a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--oxide)}
@media(max-width:560px){
  .bar .name{font-size:34px}
}

.page{max-width:780px;margin:0 auto;padding:40px 22px 100px}

/* section rhythm: eyebrow + hairline, no arbitrary numbering */
.sec{margin-top:40px}
.sec:first-of-type{margin-top:28px}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--oxide);margin:0 0 14px;display:flex;align-items:center;gap:10px}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--rule)}

h1,h2,h3{font-family:var(--display);font-weight:500;letter-spacing:-.01em;margin:0}
h2.title{font-size:15px;font-weight:600;letter-spacing:.02em;text-transform:none;color:var(--ink);
  font-family:var(--mono);text-transform:uppercase;letter-spacing:.12em;font-size:12px}
.lede{font-family:var(--display);font-weight:400;font-size:29px;line-height:1.4;max-width:30ch;
  font-optical-sizing:auto;color:var(--ink);margin:0 0 20px}
.lede em{font-style:italic;color:var(--oxide)}
.opening{font-family:var(--courier);font-weight:400;font-size:21px;line-height:1.6;
  max-width:36ch;color:var(--ink);margin:0 0 20px}
p{margin:0 0 12px;max-width:64ch}
p:last-child{margin-bottom:0}
h3{font-size:19px;margin-bottom:2px}
.mono{font-family:var(--mono);font-size:12px;color:var(--faint)}

/* transcript card: the signature element */
.tape{background:#fff;border:1px solid var(--rule);border-radius:3px;padding:22px 24px 20px;margin:26px 0 10px;
  box-shadow:0 1px 0 var(--rule)}
.tape .cap{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:14px}
.tline{display:grid;grid-template-columns:14px 22px 1fr;gap:10px;font-family:var(--mono);font-size:14.5px;
  line-height:1.7;color:var(--ink);opacity:0;transform:translateY(4px);transition:opacity .3s ease,transform .3s ease}
.tline.show{opacity:1;transform:none}
.tline .fa{color:var(--oxide);font-weight:600}
.tline .n{color:var(--faint);text-align:right}
.tline .content{display:grid;grid-template-columns:62px 1fr;column-gap:0;row-gap:0;align-items:start}
.tline .spk{grid-column:1;grid-row:1;color:var(--cue);font-weight:600}
.tline .pre{grid-column:2;grid-row:1;white-space:pre}
.tline .pause{grid-column:2;grid-row:1;color:var(--faint);font-style:italic}
.gloss{grid-column:2;grid-row:2;font-style:italic;color:var(--mid);margin-top:1px}

/* items */
.items{margin:0;padding:0;list-style:none}
.items li{padding:10px 0;border-top:1px solid var(--rule)}
.items li:first-child{border-top:0;padding-top:0}
.items .t{font-size:17.5px}
.items .s{font-family:var(--mono);font-size:11.5px;color:var(--faint);margin-top:4px;letter-spacing:.02em}
.focal{position:relative;padding-left:18px}
.focal::before{content:"→";position:absolute;left:0;top:16px;color:var(--oxide);font-family:var(--mono);font-size:13px}

.cols{columns:2;column-gap:34px;max-width:64ch}
.cols ul{margin:0;padding-left:17px}
.cols li{margin-bottom:6px;break-inside:avoid;font-size:16.5px}
@media(max-width:560px){.cols{columns:1}}

/* plainlist: a bare, single-column-by-default list of short one-line entries
   (e.g. service positions, or a nested sub-list per entry). Runs two columns
   once there's room, so a long flat list doesn't run the page on forever. */
.plainlist{margin:6px 0 0;padding-left:19px;max-width:none}
.plainlist>li{margin-bottom:8px;font-size:16.5px;line-height:1.5}
.plainlist>li:last-child{margin-bottom:0}
@media(min-width:700px){
  .plainlist{columns:2;column-gap:2.5em}
  .plainlist>li{break-inside:avoid}
}

/* genre-list: nested sub-list inside a .plainlist entry, one genre/topic
   pair per line (used on the FAQ's worked-examples list). */
.genre-list{list-style:disc;margin:4px 0 0 1.3em;padding:0}
.genre-list li{margin:2px 0;font-size:15.5px;line-height:1.45}
.genre-list .genre-name{font-style:normal}

/* a bare, unclassed <ul> inside a .sec (e.g. the FAQ's "three questions"
   list): same tightened rhythm as the rest of the page, no columns, since
   items here run to a sentence or two rather than one short line. */
.sec>ul:not(.items):not(.cols):not(.plainlist){margin:4px 0 12px;padding-left:19px}
.sec>ul:not(.items):not(.cols):not(.plainlist) li{margin-bottom:6px}

.hold{background:var(--cuesoft);border-left:2px solid var(--cue);padding:11px 15px;border-radius:0 2px 2px 0;
  font-family:var(--mono);font-size:11.5px;color:var(--cue);line-height:1.55;margin-bottom:18px}

.card{border:1px solid var(--rule);border-radius:3px;padding:20px 22px;background:#fff}
.card h3{margin-bottom:7px}
.card p{font-size:16.5px}
.card .meta{font-family:var(--mono);font-size:11px;color:var(--faint);letter-spacing:.03em;margin-top:10px}
.card .kicker{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--oxide);margin-bottom:6px}

/* two-up card grid (360 tool selector) */
.pick{display:grid;gap:16px}
@media(min-width:640px){.pick{grid-template-columns:1fr 1fr}}
.pick .card{display:flex;flex-direction:column}
.pick .card p{max-width:none}
.pick .card .meta{margin-top:auto;padding-top:14px}

footer{margin-top:48px;padding-top:14px;border-top:1px solid var(--rule)}
footer p{font-family:var(--mono);font-size:11px;color:var(--faint);letter-spacing:.03em;margin:0 0 4px}

@media(max-width:640px){
  body{font-size:17px}
  .lede{font-size:25px}
}
@media(prefers-reduced-motion:reduce){
  .tline{transition:none}
}
/* ==========================================================================
   TOOL PAGES — append to style.css. Nothing above this line changes.
   .gt scopes the genre tool, .rt the register tool. Neither can reach
   any other page, and neither redefines a site token at :root.
   ========================================================================== */

/* Tool pages need more width than the reading measure. */
.toolpage{max-width:1120px}
.toolpage .back{font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;margin:0 0 18px}
.toolpage .back a{border-bottom:1px solid rgba(139,58,46,.35)}


/* ---------- genre tool ---------- */

.gt{
  /* --ink, --mid, --faint, --rule, --mono and --serif are not redeclared here.
     The names match the site's, so they inherit. Restating them as
     --ink:var(--ink) is a self-reference, which CSS discards. */
  --bg:var(--paper); --card:#fff;
  --acc:var(--cue); --accbg:var(--cuesoft); --acc2:#B7C2CB;
  --curr:var(--oxide); --currbg:var(--oxidesoft); --currln:#E2CFC9;
  --sans:var(--serif);
}
.gt{font-family:var(--sans);font-size:15px;line-height:1.55}

.gt .mock{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc);background:var(--accbg);display:inline-block;padding:3px 9px;border-radius:2px;margin-bottom:10px}
.gt h1{font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;margin:0 0 16px}
.gt .grid{display:block}
.gt .lede{max-width:78ch;font-size:14.5px;color:var(--mid);margin:0 0 20px}
.gt .lede p{margin:0 0 12px}
.gt .lede p:last-child{margin-bottom:0}
.gt .picker{background:#eae4d8;border:1px solid var(--rule);border-top:3px solid var(--cue);border-radius:3px;padding:15px 18px;margin-bottom:16px}
.gt .stub{display:flex;flex-wrap:wrap;gap:9px;align-items:baseline}
.gt .stub span{font-family:var(--serif);font-size:22px}
.gt .stub select{background:var(--card);border:1px solid #d6cbb8;border-bottom:2px solid var(--ink);border-radius:3px;padding:4px 8px;font-family:var(--serif);font-size:22px;color:var(--ink);cursor:pointer}
.gt .stub select:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
.gt .opts{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;padding-top:13px;border-top:1px solid var(--rule)}
.gt .opts button{background:#f7f4ee;border:1px solid #d6cbb8;border-radius:3px;padding:8px 13px;text-align:left;cursor:pointer;font-family:var(--sans);color:var(--ink);line-height:1.3}
.gt .opts button:hover:not([disabled]){border-color:var(--mid)}
.gt .opts button[aria-pressed="true"]{background:var(--card);border:2px solid var(--ink);padding:7px 12px}
.gt .opts button:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
.gt .opts .ph{display:block;font-size:14.5px;font-style:italic}
.gt .opts .tr{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);margin-top:2px}
.gt .opts button[aria-pressed="true"] .ph{font-weight:600;color:var(--acc)}
.gt .opts .todo{color:var(--faint);cursor:default;font-style:italic}

.gt .cell{background:var(--card);border:1px solid var(--rule);border-top:3px solid var(--acc);border-radius:3px;display:flex;flex-direction:column;min-height:620px;transition:border-color .2s}
.gt .hd{padding:16px 22px 0}
.gt .hd .crumb{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);margin-bottom:5px}
.gt .hd h2{margin:0 0 5px;font-size:26px;font-family:var(--serif);font-weight:400;color:var(--acc)}
.gt .hd p{margin:0 0 14px;font-size:14px;color:var(--mid);max-width:70ch}
.gt .tabs{display:flex;background:#EAE8DE;border-bottom:1px solid var(--rule);padding:0 22px;gap:2px;overflow-x:auto}
.gt .tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:9px 13px;font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--mid);cursor:pointer;white-space:nowrap;margin-bottom:-1px}
.gt .tabs button[aria-selected="true"]{color:var(--acc);border-bottom-color:var(--acc);background:var(--card)}
.gt .tabs button:hover{color:var(--ink)}
.gt .tabs button:focus-visible{outline:2px solid var(--acc);outline-offset:-3px}
.gt .panel{padding:20px 22px 26px;flex:1}

.gt h3{margin:0 0 4px;font-size:16px;font-weight:600}
.gt .note{color:var(--mid);font-size:13.5px;margin:0 0 15px;max-width:74ch}
.gt .note.bare{font-style:italic}
.gt .qprompt{margin:0 0 12px;padding:8px 12px;background:#fdf3e0;border-left:3px solid #b8863b;font-size:13.5px;color:#6b4a1e;max-width:74ch}
.gt .qprompt b{font-weight:600;text-transform:uppercase;font-size:10.5px;letter-spacing:.08em;margin-right:6px}
.gt .qs{display:grid;gap:20px}
.gt .qgrp h4{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin:0 0 7px;padding-bottom:5px;border-bottom:1px solid var(--rule)}
.gt .qgrp ul{margin:0;padding:0;list-style:none;display:grid;gap:7px}
.gt .qgrp li{border-left:2px solid var(--acc2);padding:1px 0 1px 14px;font-family:var(--serif);font-size:16.5px;line-height:1.4}
.gt .tip{margin-top:16px;background:var(--accbg);border-radius:2px;padding:12px 15px;font-size:14px}
.gt .tip b{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--acc);font-weight:400;margin-bottom:4px}

.gt .split{display:grid;grid-template-columns:minmax(0,420px) 1fr;gap:22px;align-items:start}
@media(max-width:760px){.gt .split{grid-template-columns:1fr}}
.gt svg{width:100%;height:auto;display:block}
.gt svg .bx rect{fill:var(--card);stroke:var(--acc);stroke-width:1.2;cursor:pointer}
.gt svg .bx text{fill:var(--ink);font-family:var(--sans);font-size:12px;pointer-events:none}
.gt svg .bx .sm{font-size:10px;fill:var(--faint)}
.gt svg .bx:hover rect{fill:var(--accbg)}
.gt svg .bx.on rect{fill:var(--acc);stroke:var(--acc)}
.gt svg .bx.on text{fill:var(--card)}
.gt svg .bx.on .sm{fill:var(--acc2)}
.gt svg .opt rect{stroke-dasharray:4 3}
.gt svg .lbl{fill:var(--faint);font-family:var(--mono);font-size:9px;letter-spacing:.1em}
.gt svg .arw{stroke:var(--acc2);stroke-width:1.4;fill:none;marker-end:url(#a)}

.gt .subj{display:inline-flex;border:1px solid var(--rule);border-radius:2px;overflow:hidden;margin-bottom:13px}
.gt .subj button{background:none;border:0;border-right:1px solid var(--rule);font-family:var(--mono);font-size:10.5px;padding:5px 10px;cursor:pointer;color:var(--mid)}
.gt .subj button:last-child{border-right:0}
.gt .subj button[aria-pressed="true"]{background:none;color:var(--ink);font-weight:600;
  text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;
  text-decoration-skip-ink:none}
.gt .model{font-family:var(--serif);font-size:15.5px;line-height:1.6}
.gt .model .st{padding:9px 0 9px 13px;border-left:2px solid transparent;transition:all .15s;cursor:pointer}
.gt .model .st b{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);font-weight:400;margin-bottom:3px}
.gt .model .st.on{border-left-color:var(--acc);background:var(--accbg)}
.gt .model .st.on b{color:var(--acc)}

.gt .langset{display:grid;gap:16px;max-width:80ch}
.gt .lg{background:var(--lgbg);border:1px solid var(--lgln);border-left:4px solid var(--lgac);border-radius:4px;padding:15px 18px}
/* field, tenor and mode take the same three colours here as they do on the
   register tool, so a reader who moves between the two pages sees one scheme:
   field cue blue, tenor oxide red, mode a warm grey derived from ink and paper. */
.gt .lg-field{--lgbg:#E4E7EA;--lgln:#C3CCD4;--lgac:#2C4A5E}
.gt .lg-tenor{--lgbg:#F4E9E5;--lgln:#DFC7C0;--lgac:#8B3A2E}
.gt .lg-mode{--lgbg:#EAE8DE;--lgln:#CFCABA;--lgac:#5A574C}
.gt .lg h4{margin:0;font-size:19px;font-weight:600;color:var(--lgac)}
.gt .lgsub{margin:1px 0 11px;font-size:13px;color:var(--mid)}
.gt .lg ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.gt .lg li{position:relative;padding-left:15px;font-size:14.5px;line-height:1.55}
.gt .lg li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--lgac);opacity:.55}
.gt .lg .ex{display:block;margin:6px 0 0 18px;padding-left:11px;border-left:2px solid var(--lgac);font-family:var(--serif);font-size:15.5px;line-height:1.45;color:var(--ink)}
.gt .lg .ex u{text-decoration:2px solid var(--lgac) underline;text-underline-offset:3px;text-decoration-skip-ink:none}
.gt .lg .exft{display:block;margin:3px 0 0 18px;padding-left:11px;font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--lgac);opacity:.8}
.gt .watch{margin-top:16px;border-left:2px solid var(--acc2);padding-left:14px;font-size:14px;color:var(--mid)}
.gt .watch b{color:var(--ink)}

.gt .topic{font-size:13.5px;color:var(--mid);margin:0 0 15px}
.gt .curr{margin:18px 0 0;padding:14px 16px;background:var(--currbg);border:1px solid var(--currln);border-left:3px solid var(--curr);border-radius:3px}
.gt .currh{font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--curr);margin:0 0 9px}
.gt .currh a{color:inherit}
.gt .curr table{width:100%;border-collapse:collapse}
.gt .curr table tr+tr th, .gt .curr table tr+tr td{border-top:1px solid var(--currln)}
.gt .curr th{text-align:left;vertical-align:top;width:88px;padding:7px 14px 7px 0;font-size:13px;font-weight:600;color:var(--ink)}
.gt .curr td{vertical-align:top;padding:7px 0;font-size:12.5px;line-height:1.55;color:var(--mid)}
.gt .curr .eg{display:block;margin-top:3px;color:var(--faint);font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:11.5px;line-height:1.5}
.gt .curr-none p:last-child{margin:0;font-size:12.5px;line-height:1.55;color:var(--faint)}
.gt .currlink{margin:11px 0 0;padding-top:9px;border-top:1px solid var(--currln);font-size:12.5px}
.gt .currlink a{color:var(--curr)}
.gt .topic b{color:var(--ink);font-weight:600}
.gt .tlc{display:grid;gap:26px;max-width:80ch;counter-reset:step}
.gt .tlc section{border:0;padding:0}
.gt .tlc h4{margin:0 0 10px;font-family:var(--sans);font-size:19px;letter-spacing:0;color:var(--ink);font-weight:600;counter-increment:step;display:flex;gap:11px;align-items:baseline}
.gt .tlc h4::before{content:counter(step);font-family:var(--mono);font-size:14px;color:var(--card);background:var(--acc);width:26px;height:26px;flex:0 0 26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;transform:translateY(2px)}
.gt .tlc ul{margin:0;padding:0 0 0 37px;list-style:none;display:grid;gap:9px}
.gt .tlc li{position:relative;font-size:14.5px;line-height:1.55}
.gt .tlc li::before{content:"";position:absolute;left:-15px;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--acc2)}
.gt .tlc li b{font-weight:600}
.gt footer{margin-top:16px;color:var(--faint);font-size:11.5px;line-height:1.6}


/* ---------- register tool ---------- */

.rt{
  /* Same as above: shared names inherit and are not restated. */
  --bg:var(--paper); --card:#fff;
  --acc:var(--cue); --accbg:var(--cuesoft); --acc2:#B7C2CB;
  --warn:var(--oxide); --warnbg:var(--oxidesoft); --warnln:#E2CFC9;
}
*{box-sizing:border-box}
.rt{font-size:15px;line-height:1.55}

.rt .back{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mid);text-decoration:none;border-bottom:1px solid var(--rule);
  padding-bottom:2px;margin-bottom:16px}
.rt .back:hover{color:var(--acc);border-bottom-color:var(--acc)}
.rt .mock{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc);background:var(--accbg);display:inline-block;padding:3px 9px;border-radius:2px;margin-bottom:10px}
.rt h1{font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;margin:0 0 6px}
.rt .lede{font-family:var(--serif);font-size:17px;color:var(--mid);margin:0 0 22px;max-width:60ch}

/* ---- the continuum figure, which is also the control ---- */
.rt .fig{background:var(--card);border:1px solid var(--rule);border-radius:3px;padding:20px 22px 8px}
.rt .cont{padding:2px 0 20px;border-bottom:1px solid var(--rule)}
.rt .cont:last-child{border-bottom:0;padding-bottom:6px}
.rt .cont h3{margin:0;font-family:var(--display);font-size:17px;font-weight:600;font-style:italic}
.rt .cont{position:relative}
.rt .qbtn{display:inline-flex;align-items:baseline;gap:6px;margin:1px 0 12px;padding:0;background:none;
  border:0;cursor:pointer;text-align:left;font-family:var(--serif);font-style:italic;font-size:14.5px;
  line-height:1.4;color:var(--faint);border-bottom:1px dotted var(--faint)}
.rt .qbtn:hover, .rt .qbtn[aria-expanded=true]{color:var(--vac,var(--acc));border-bottom-color:var(--vac,var(--acc))}
.rt .qbtn:focus-visible{outline:2px solid var(--vac,var(--acc));outline-offset:3px;border-radius:2px}
.rt .qbtn .mk{flex:0 0 14px;width:14px;height:14px;border-radius:50%;border:1px solid currentColor;
  font-family:var(--mono);font-style:normal;font-size:9px;line-height:12px;text-align:center;
  transform:translateY(1px)}
.rt .pop{position:absolute;z-index:20;left:0;right:0;margin-top:-6px;background:var(--card);
  border:1px solid var(--vln,var(--rule));border-left:3px solid var(--vac,var(--acc));
  border-radius:3px;padding:13px 16px;box-shadow:0 6px 20px rgba(20,23,26,.13)}
.rt .pop p{margin:0;font-size:13.5px;line-height:1.55;color:var(--ink);max-width:64ch}
.rt .pop .cls{position:absolute;top:5px;right:7px;background:none;border:0;cursor:pointer;
  font-family:var(--mono);font-size:13px;line-height:1;color:var(--faint);padding:4px}
.rt .pop .cls:hover{color:var(--ink)}
.rt .rail{display:grid;grid-template-columns:minmax(64px,1fr) minmax(150px,3fr) minmax(64px,1fr);gap:14px;align-items:center}
.rt .pole{font-family:var(--mono);font-size:10.5px;line-height:1.45;color:var(--mid)}
.rt .pole.r{text-align:right}
.rt .slot{position:relative}
.rt input[type=range]{width:100%;margin:0;-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer;height:26px}
.rt input[type=range]:focus{outline:none}
.rt input[type=range]:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:3px}
.rt input[type=range]::-webkit-slider-runnable-track{height:2px;background:var(--vln,var(--rule));border-radius:2px}
.rt input[type=range]::-moz-range-track{height:2px;background:var(--vln,var(--rule));border-radius:2px}
.rt input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:15px;height:15px;border-radius:50%;background:var(--vac,var(--acc));border:2px solid var(--card);box-shadow:0 0 0 1px var(--vac,var(--acc));margin-top:-6.5px}
.rt input[type=range]::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:var(--vac,var(--acc));border:2px solid var(--card);box-shadow:0 0 0 1px var(--vac,var(--acc))}
.rt .ticks{display:flex;justify-content:space-between;margin-top:-2px}
.rt .ticks button{flex:1;background:none;border:0;padding:2px 2px 0;cursor:pointer;font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--faint)}
.rt .ticks button:nth-child(1){text-align:left}
.rt .ticks button:nth-child(3){text-align:right}
.rt .ticks button[aria-current=true]{color:var(--vac,var(--acc))}
.rt .ticks button:hover{color:var(--ink)}

/* ---- feature boxes ---- */
.rt .boxes{display:grid;gap:14px;margin-top:22px}
@media(min-width:720px){.boxes{grid-template-columns:repeat(3,1fr)}}
.rt .lg{border:1px solid var(--lgln);background:var(--lgbg);border-radius:3px;padding:14px 15px}
/* field takes cue blue, tenor takes oxide red. mode has no token of its own;
   the palette has two accents and this interface needs three. */
.rt .lg-field{--lgbg:#E4E7EA;--lgln:#C3CCD4;--lgac:#2C4A5E}
.rt .lg-tenor{--lgbg:#F4E9E5;--lgln:#DFC7C0;--lgac:#8B3A2E}
.rt .lg-mode{--lgbg:#EAE8DE;--lgln:#CFCABA;--lgac:#5A574C}
.rt .lg h4{margin:0 0 2px;font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--lgac);font-weight:400}
.rt .lg .stopname{margin:0 0 2px;font-family:var(--display);font-size:18px}
.rt .lg .stopline{margin:0 0 12px;font-size:12.5px;line-height:1.45;color:var(--lgac)}
.rt .lg ul{margin:0;padding:0;list-style:none}
.rt .lg li{margin:0 0 11px;font-size:14.5px;line-height:1.5}
.rt .lg li:last-child{margin-bottom:0}
.rt .lg .ex{display:block;margin:6px 0 0 0;padding-left:11px;border-left:2px solid var(--lgac);font-family:var(--serif);font-size:15px;line-height:1.45}
.rt .lg .exft{display:block;margin:3px 0 0 0;padding-left:11px;font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--lgac);opacity:.85}

/* ---- pulls and texts ---- */
.rt .sec{margin-top:24px}
.rt .sech{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);margin:0 0 10px;padding-bottom:5px;border-bottom:1px solid var(--rule)}
.rt .pulls-on{margin-top:24px}
.rt .pull{background:var(--warnbg);border:1px solid var(--warnln);border-left:3px solid var(--warn);border-radius:3px;padding:12px 15px;margin-bottom:10px}
.rt .pull b{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--warn);font-weight:400;margin-bottom:5px}
.rt .pull p{margin:0;font-size:14.5px}
.rt .texts{background:var(--card);border:1px solid var(--rule);border-radius:3px;padding:6px 16px}
.rt .texts ul{margin:0;padding:0;list-style:none}
.rt .texts li{font-family:var(--serif);font-size:16.5px;line-height:1.4;padding:7px 0;border-bottom:1px solid var(--rule)}
.rt .texts li:last-child{border-bottom:0}
.rt footer{margin-top:34px;padding-top:12px;border-top:1px solid var(--rule);font-size:12.5px;color:var(--faint);max-width:70ch}
.rt footer p{margin:0 0 6px}
@media(prefers-reduced-motion:no-preference){.gt .lg,.rt .lg,.rt .pull,.rt .texts li{transition:opacity .12s ease}}
/* genre tool: graphic organiser and assessment criteria blocks on the cycle tab */
.gt .orgblk,.gt .critblk{margin-top:26px;padding-top:18px;border-top:1px solid var(--rule)}
.gt .orgblk h4,.gt .critblk h4{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--mid);margin:0 0 12px}
.gt .orgrow{display:flex;align-items:flex-start;gap:18px}
.gt .orgart{flex:0 0 116px;width:116px}
.gt .orgart svg{width:100%;height:auto;display:block}
.gt .orgname{font-weight:600;margin:0 0 3px}
.gt .orgtxt p{margin:0;max-width:60ch}
.gt .critblk p{max-width:66ch}
.gt .critblk ul{margin:10px 0 0;padding-left:1.15em;max-width:66ch}
.gt .critblk li{margin-bottom:7px}
.gt .critsrc{color:var(--mid);font-size:.92em;margin:12px 0 0}
.gt .orgart svg .ob{fill:#fff;stroke:#2C4A5E;stroke-width:1.1}
.gt .orgart svg .ob.f{fill:#E4EBEE}
.gt .orgart svg .ol{stroke:#2C4A5E;stroke-width:1.1;fill:none}
.gt .orgart svg .ot{stroke:#B7C2CB;stroke-width:1;fill:none}
.gt .orgart svg .oa{stroke:#2C4A5E;stroke-width:1.1;fill:none;marker-end:url(#oah)}
.gt .orgart svg .od{fill:#2C4A5E}
@media(max-width:560px){.gt .orgrow{flex-direction:column;gap:12px}}


/* genre tool: TLC stage secondary heading (Supported Reading pass) */
.gt .tlc h4 .tlcsub{font-weight:400;opacity:.7}