:root{
  --bg:#0E0B07;--bg-2:#120E09;--panel:#1A140D;--panel-2:#1F1810;--panel-hi:#241C12;
  --line:rgba(255,255,255,.075);--line-2:rgba(255,255,255,.15);
  --ink:#F4EEE4;--ink-2:#C6BAA6;--ink-3:#8C7F6A;
  --brand:#E2A24C;--brand-soft:rgba(226,162,76,.14);--beacon:#F2C078;
  --own:#3FC3B6;--own-soft:rgba(63,195,182,.15);--own-line:rgba(63,195,182,.4);
  --amber:#E5AA3D;--amber-soft:rgba(229,170,61,.16);
  --btn-ink:#1A140D;--float:0 6px 24px rgba(0,0,0,.5);--theme:dark;
  color-scheme:dark;
  --display:'SF Pro Display',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --body:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --mono:ui-monospace,'SF Mono','SFMono-Regular','Cascadia Code','Roboto Mono',Menlo,Consolas,monospace;
  --maxw:1120px;--radius:16px;--radius-sm:10px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased}
a{color:inherit}
.pv-banner{overflow-wrap:anywhere;background:#7a2e2e;color:#fff;font:600 12px/1.5 var(--body);padding:6px 16px;text-align:center}

/* --- the bar: wordmark | tagline, nav, and the persistent header button --- */
.bar{position:sticky;top:0;z-index:20;background:var(--bg);height:72px;display:flex;align-items:center;gap:14px;padding:0 max(160px,calc((100vw - 1440px)/2 + 160px))}
.bar .wm{font-family:var(--display);font-weight:680;font-size:19px;letter-spacing:-.02em;color:var(--ink);text-decoration:none}
.bar .div{display:block;width:1px;height:16px;background:var(--line-2)}
.bar .tag{font-size:14px;color:var(--ink-2);white-space:nowrap}
.bar nav{margin-left:auto;display:flex;align-items:center;gap:22px}
.bar nav a:not(.btn){font-size:14px;color:var(--ink-2);text-decoration:none}
.bar nav a:not(.btn):hover{color:var(--ink)}
.bar .hbtn{height:38px;padding:0 18px;font-size:14px}
body.home .bar .hbtn{visibility:hidden}
body.home.past-hero .bar .hbtn{visibility:visible}

/* --- buttons --- */
.btn{box-sizing:border-box;height:52px;display:inline-flex;align-items:center;justify-content:center;padding:0 30px;border-radius:999px;background:var(--brand);border:1px solid var(--brand);color:var(--btn-ink);font-size:16px;font-weight:600;letter-spacing:.005em;text-decoration:none}
.btn:hover{background:var(--beacon);border-color:var(--beacon)}
.quiet{color:var(--ink-2);font-size:15px}

/* --- S01, the ruled first screen (carry1 frames) --- */
.s01{position:relative;overflow:hidden;background:var(--bg);height:auto;min-height:828px;padding-bottom:48px;box-sizing:border-box;max-width:1440px;margin:0 auto}
.s01 .pic{position:absolute;top:180px;left:315px;width:1161px;height:648px;display:block;
  -webkit-mask-image:linear-gradient(90deg,transparent 28%,#000 33%),linear-gradient(180deg,transparent 0,#000 80px);
  mask-image:linear-gradient(90deg,transparent 28%,#000 33%),linear-gradient(180deg,transparent 0,#000 80px);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.s01 .words{position:relative;left:auto;top:auto;margin:60px 0 0 160px;width:fit-content;max-width:calc(100% - 160px);display:flex;flex-direction:column;z-index:1}
.s01 .kicker{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--brand)}
.s01 .kicker::before{content:"";display:block;width:26px;height:1px;background:var(--brand)}
.s01 h1{margin:26px 0 0;font-family:var(--display);font-weight:680;font-size:48px;line-height:1.05;letter-spacing:-.03em;color:var(--ink)}
.s01 .sub{margin:24px 0 0;font-size:22px;line-height:1.4;color:var(--ink-2)}
.s01 .sub .team{color:var(--own);font-weight:600}
.s01 .sub .ally{color:var(--ink);font-weight:600}
.s01 .btn{margin-top:30px;align-self:flex-start}
.s01 .under{margin:12px 0 0;font-size:15px;line-height:1.4;color:var(--ink-2)}
.s01 .plain{margin:16px 0 0;max-width:560px;font-size:17px;line-height:1.45;color:var(--ink)}
br.p{display:none}

/* --- sections S02 to S14 --- */
.sec{border-top:1px solid var(--line);padding:88px 0}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.label{font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin:0 0 18px}
.label b{color:var(--brand);font-weight:500}
.ph,.held{border:1px dashed var(--line-2);border-radius:var(--radius-sm);padding:22px 24px;margin:0 0 16px;max-width:760px}
.ph .k,.held .k{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:6px}
.ph .k{color:var(--brand)}
.ph p,.held p{margin:0;color:var(--ink-2);font-size:16px;line-height:1.5}
.held{border-color:var(--amber);background:var(--amber-soft)}
.held .k{color:var(--amber)}
.ph.big{min-height:180px}
.cta{margin-top:24px;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.ladder{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 18px;max-width:900px}
.rung{flex:1 1 160px;background:var(--panel);border:1px solid var(--line-2);border-radius:var(--radius-sm);padding:16px}
.rung .n{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.rung .t{display:block;margin-top:6px;font-family:var(--display);font-weight:680;font-size:18px}
.rung.stop{border-color:var(--own-line);background:var(--own-soft)}
.rung.stop .n{color:var(--own)}
h1.page{font-family:var(--display);font-weight:680;font-size:44px;line-height:1.08;letter-spacing:-.03em;margin:0 0 20px}
.doors{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;max-width:900px}
.door{background:var(--panel);border:1px solid var(--line-2);border-radius:var(--radius-sm);padding:18px}
.door .k{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
.door.held{background:var(--amber-soft);border:1px dashed var(--amber)}
form.intake{max-width:640px;display:grid;gap:14px;margin-top:8px}
form.intake label{display:block;font-size:14px;color:var(--ink-2);margin-bottom:6px}
form.intake input,form.intake textarea{width:100%;background:var(--panel-2);border:1px solid var(--line-2);border-radius:var(--radius-sm);color:var(--ink);font:16px var(--body);padding:12px 14px}
form.intake button{justify-self:start;cursor:pointer}

/* --- row 5.0: the rendered copy (copy.json) --- */
.sec h2{font-family:var(--display);font-weight:680;font-size:34px;line-height:1.15;letter-spacing:-.02em;margin:0 0 22px;max-width:820px}
.sec h3{font-family:var(--display);font-weight:650;font-size:19px;margin:0 0 12px}
.sec .wrap>p,.sec .wrap>ul,.sec .wrap>ol{max-width:720px;font-size:18px;line-height:1.6;color:var(--ink-2);margin:0 0 14px}
.sec .wrap>ul,.sec .wrap>ol{padding-left:22px}
.sec .wrap>ul li,.sec .wrap>ol li{margin-bottom:6px}
.sec p.lead{color:var(--ink);font-weight:600;margin-top:24px}
.sec .wrap>p.fine{font-size:14px;color:var(--ink-3);margin-top:28px}
.sec .held{margin-top:22px}
.quote{margin:28px 0;max-width:760px;border-left:3px solid var(--brand);padding:4px 0 4px 22px}
.quote p.lead{font-weight:500;color:var(--ink-2);font-size:16px;margin:0 0 10px}
.quote blockquote{margin:0}
.quote blockquote p{font-family:var(--display);font-size:24px;line-height:1.35;color:var(--ink);margin:0}
.quote figcaption{margin-top:12px;font-size:13px;line-height:1.5;color:var(--ink-3)}
.pic-card,.pic-col{background:var(--panel);border:1px solid var(--line-2);border-radius:var(--radius);padding:22px 24px;max-width:620px;margin:24px 0}
.pic-card ul,.pic-col ul{margin:0;padding-left:20px;color:var(--ink);font-size:17px;line-height:1.55}
.pic-card ul li,.pic-col ul li{margin-bottom:6px}
.pic-card .note{margin:14px 0 0;color:var(--ink-2);font-size:15px}
.pic-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:900px;margin:24px 0}
.pic-cols .pic-col{margin:0;max-width:none}
.pic-col.right{border-color:var(--own-line);background:var(--own-soft)}
.pic-col.right h3{color:var(--own)}
.rung .t{margin-top:0}
.sec .wrap>p.under{margin:10px 0 0;font-size:15px;color:var(--ink-2)}
.door p.dl{margin:0 0 12px;color:var(--ink);font-size:17px;line-height:1.4;font-weight:600}
.door .cta{margin-top:0}
.door .held{border:0;background:none;padding:0;margin:0;max-width:none}

/* --- footer, with the three-site hand-off (the ring) --- */
footer.site{border-top:1px solid var(--line);padding:56px 0 0;color:var(--ink-2);font-size:14px}
footer.site .cols{display:flex;gap:28px;flex-wrap:wrap;margin-bottom:28px}
footer.site .cols a{color:var(--ink-2);text-decoration:none}
footer.site .cols a:hover{color:var(--ink)}
footer.site .fine{color:var(--ink-3);font-size:12px;margin:0 0 32px}

/* --- below desktop: the phone frame's stacked layout --- */
@media (max-width:1023px){
  .bar{height:56px;padding:0 20px}
  .bar .wm{font-size:18px}
  .bar .div{height:14px}
  .bar .tag{font-size:13px}
  .bar nav a:not(.btn){display:none}
  /* phone: the persistent header button rides at the foot of the screen, so the bar never overflows 390 */
  .bar nav{margin-left:0}
  .bar .hbtn{position:fixed;left:20px;right:20px;bottom:16px;height:48px;font-size:15px;z-index:30;box-shadow:var(--float)}
  body.home .bar .hbtn{display:none}
  body.home.past-hero .bar .hbtn{display:inline-flex}
  footer.site{padding-bottom:72px}
  .s01{height:auto;min-height:0;padding:24px 20px 0;display:flex;flex-direction:column}
  .s01 .words{position:static;margin:0;width:auto;max-width:none}
  .s01 picture{order:2;display:block}
  .s01 .kicker{font-size:11px}
  .s01 h1{margin-top:18px;font-size:32px;line-height:1.1}
  .s01 .sub{margin-top:14px;font-size:17px}
  .s01 .btn{margin-top:20px;align-self:stretch;width:100%}
  .s01 .under{margin-top:10px;font-size:16px}
  .s01 .pic{position:static;width:390px;max-width:calc(100% + 40px);height:auto;margin:12px -20px 0;align-self:center;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 70px);mask-image:linear-gradient(180deg,transparent 0,#000 70px);
    -webkit-mask-composite:source-over;mask-composite:add}
  br.p{display:inline}
  br.d{display:none}
  .sec{padding:56px 0}
  .wrap{padding:0 20px}
  h1.page{font-size:32px}
  .doors{grid-template-columns:1fr}
  .sec h2{font-size:26px}
  .sec .wrap>p,.sec .wrap>ul,.sec .wrap>ol{font-size:17px}
  .quote blockquote p{font-size:20px}
  .pic-cols{grid-template-columns:1fr}
}
@media (max-width:1023px) and (min-width:600px){
  .s01 .pic{width:600px}
}

/* --- row 5.0 run 2: the ring in this site's own words (copy.json "ring"); the heading reads as a sentence --- */
.bgps-ring h2.bgps-ring-head{font-size:18px;letter-spacing:0;text-transform:none;color:var(--ink,#e8eef5);margin:0 0 6px}
.bgps-ring-here{display:inline-block;margin-left:8px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2,#cfe0ee);font-weight:700}
.bgps-ring-here::before{content:"· ";color:var(--brand,#7fa8cc)}
/* Row 5.0 run 3: the stage note (row 5.1: the track's teaching line); the tender door note */
.stage-note{margin:0 0 4px;color:var(--ink-2);font-size:16px;line-height:1.5;max-width:640px}
.stage-note+h1.page{margin-top:22px}
.door p.door-note{margin:-6px 0 12px;color:var(--ink-2);font-size:15px;line-height:1.45}

/* --- row 5.1b (copy v3.0, spec v1.2) ------------------------------------------------------------------------ */
/* H2 (spec 6.7): principal section headings up the scale, from the tokens' section-h2 (36px) to 44px; the page h1
   moves with them so it stays the larger. The ruled first-screen h1 (.s01 h1, I23/I25) is not touched. */
.sec h2{font-size:44px;line-height:1.1;letter-spacing:-.025em;margin-bottom:26px;max-width:900px}
h1.page{font-size:52px;line-height:1.06}
.sec h3{font-size:21px}
/* H3 (spec 6.7): "How it runs" a visible nav link on desktop; a menu holds it on the phone */
.bar nav a.nav-how{font-size:15px;font-weight:600;color:var(--ink);border:1px solid var(--line-2);border-radius:999px;padding:8px 16px}
.bar nav a.nav-how:hover{border-color:var(--ink-2)}
.bar .menu{display:none;position:relative}
.bar .menu summary{list-style:none;cursor:pointer;width:34px;height:34px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line-2);border-radius:8px}
.bar .menu summary::-webkit-details-marker{display:none}
.bar .menu summary span,.bar .menu summary span::before,.bar .menu summary span::after{display:block;width:16px;height:2px;background:var(--ink);position:relative;content:""}
.bar .menu summary span::before{position:absolute;top:-5px}
.bar .menu summary span::after{position:absolute;top:5px}
.bar .menu-list{position:absolute;right:0;top:44px;background:var(--panel-hi);border:1px solid var(--line-2);border-radius:var(--radius-sm);padding:8px;display:flex;flex-direction:column;min-width:220px;box-shadow:var(--float)}
.bar .menu-list a{display:block;padding:12px 14px;font-size:16px;color:var(--ink);text-decoration:none;border-radius:8px}
.bar .menu-list a:hover{background:var(--panel-2)}
/* S08's "How it runs" as a panel, not a text link */
.sec .wrap>p.lead+a.panel-link,.sec a.panel-link{display:flex;align-items:center;justify-content:space-between;max-width:620px;margin:12px 0 0;padding:22px 26px;background:var(--panel);border:1px solid var(--own-line);border-radius:var(--radius);font-family:var(--display);font-size:24px;font-weight:650;color:var(--ink);text-decoration:none}
.sec a.panel-link::after{content:"\2192";color:var(--own);font-size:26px}
.sec a.panel-link:hover{background:var(--panel-hi)}
/* two routes, equal weight; "Default" a small label on the files route only */
.routes{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:980px;margin:8px 0 24px}
.route{background:var(--panel);border:1px solid var(--line-2);border-radius:var(--radius);padding:24px 26px}
.route p{margin:0 0 10px;color:var(--ink-2);font-size:17px;line-height:1.55}
.badge{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--own);border:1px solid var(--own-line);border-radius:999px;padding:3px 10px;margin:0 0 12px}
.sequence,.side-box{background:var(--panel);border:1px solid var(--line-2);border-radius:var(--radius);padding:22px 26px;max-width:980px;margin:0 0 18px}
.sequence ol,.side-box ul{margin:0;padding-left:22px;color:var(--ink);font-size:17px;line-height:1.55}
.sequence li,.side-box li{margin-bottom:6px}
.side-box p{color:var(--ink-2);font-size:16px;margin:0 0 10px}
.side-box p.note{margin:12px 0 0;font-size:15px}
.sec p.roadmap,.door p.roadmap{border-left:2px solid var(--own-line);padding-left:14px;color:var(--ink-2);font-style:italic}
.sec p.lede{color:var(--ink);font-size:20px}
.sec p.aside{color:var(--ink);border-left:2px solid var(--brand);padding-left:14px}
/* the stage track (S06 and /baseline B0): one component; the marks after each stage drawn here, not in the text:
   ‖ the stop-and-keep (teal), | a plain decision, ↺ Ongoing's repeat */
.sec .wrap>ol.track2{list-style:none;padding:0;margin:8px 0 16px;max-width:none;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:34px}
.track2 .step{position:relative;margin:0;background:var(--panel);border:1px solid var(--line-2);border-radius:var(--radius-sm);padding:16px 16px 18px;display:flex;flex-direction:column;gap:6px}
.track2 .step::after{position:absolute;right:-25px;top:50%;transform:translateY(-50%);font-size:24px;line-height:1;color:var(--ink-3);font-family:var(--display)}
.track2 .step.decision::after{content:"\007C"}
.track2 .step.stop_and_keep::after{content:"\2016";color:var(--own);font-size:30px;font-weight:700}
.track2 .step.repeats::after{content:"\21BA";right:auto;left:auto;position:static;transform:none;color:var(--own);font-size:22px}
.track2 .step.stop_and_keep{border-color:var(--own-line)}
.track2 .name{font-family:var(--display);font-weight:680;font-size:17px;color:var(--ink);line-height:1.25}
.track2 .sub,.track2 .mark-words{font-size:14px;line-height:1.4;color:var(--ink-2)}
.track2 .step.stop_and_keep .mark-words{color:var(--own)}
.track2 .here{align-self:flex-start;color:var(--brand);border:1px solid var(--brand);border-radius:999px;padding:3px 10px;font-size:13px;font-weight:600}
.track2 .step.now{border-color:var(--brand)}
.sec .wrap>ul.track-legend{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px 26px;font-size:15px;max-width:none}
.track-legend li::before{display:inline-block;width:22px;font-family:var(--display);font-size:20px;color:var(--ink-3)}
.track-legend li.decision::before{content:"\007C"}
.track-legend li.stop_and_keep::before{content:"\2016";color:var(--own);font-weight:700}
.track-legend li.repeats::before{content:"\21BA";color:var(--own)}
.track2+.stage-note,.track-legend+.stage-note{margin-bottom:22px}
/* S06's stage table */
table.stages{border-collapse:collapse;width:100%;max-width:980px;margin:6px 0 26px;font-size:16px;line-height:1.5}
table.stages th,table.stages td{text-align:left;vertical-align:top;padding:14px 16px;border-bottom:1px solid var(--line-2)}
table.stages thead th{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);font-weight:500}
table.stages tbody th{color:var(--ink);font-family:var(--display);font-weight:650;width:30%}
table.stages td{color:var(--ink-2)}
/* S10's plan picture */
.plan-pic{max-width:820px}
table.plan-table{width:100%;border-collapse:collapse;margin:4px 0 16px}
table.plan-table th{text-align:left;padding:10px 12px;border:1px solid var(--line-2);font-size:14px;color:var(--ink);background:var(--panel-2)}
table.plan-table td{height:30px;border:1px dashed var(--line-2)}
ul.modes{list-style:none;margin:0;padding:0;display:grid;gap:8px;color:var(--ink);font-size:16px}
ul.modes li::before{content:"";display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:10px;vertical-align:-1px}
ul.modes li.m0::before{background:var(--own)}
ul.modes li.m1::before{background:var(--own-soft);border:1px solid var(--own-line)}
ul.modes li.m2::before{border:1px solid var(--ink-3)}
/* H1: the baseline picture, six labelled parts, no figures */
figure.baseline-pic{margin:28px 0;max-width:1000px}
figure.baseline-pic figcaption{font-family:var(--display);font-weight:680;font-size:24px;color:var(--ink);margin:0 0 16px}
ol.parts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:part}
ol.parts li{margin:0;display:flex;flex-direction:column;gap:10px;font-size:16px;line-height:1.45;color:var(--ink)}
ol.parts img{width:100%;height:auto;display:block;border-radius:6px}
.sec p.pic-note{font-size:14px;color:var(--ink-3)}
/* /baseline doors */
.doors{grid-template-columns:repeat(2,1fr);max-width:1000px;gap:16px}
.door{padding:22px 24px;display:flex;flex-direction:column}
.door.default{border-color:var(--brand)}
.door .badge{align-self:flex-start;color:var(--brand);border-color:var(--brand)}
.door p{margin:0 0 10px;color:var(--ink-2);font-size:16px;line-height:1.5}
.door p.dl{font-family:var(--display);font-size:19px;color:var(--ink)}
.door .cta{margin-top:auto;padding-top:10px}
/* /baseline/external-parties and the intake */
.case p.terms{color:var(--ink);border-left:3px solid var(--brand);padding-left:14px}
fieldset.route-pick,fieldset.pick{border:0;padding:0;margin:0;display:grid;gap:8px}
fieldset.route-pick legend,fieldset.pick legend{font-size:14px;color:var(--ink-2);margin-bottom:6px;padding:0}
form.intake input[type=radio],form.intake input[type=checkbox]{width:auto;flex:none}
fieldset.route-pick label,fieldset.pick label{display:flex;gap:10px;align-items:center;font-size:16px;color:var(--ink)}
form.intake select{width:100%;background:var(--panel-2);border:1px solid var(--line-2);border-radius:var(--radius-sm);color:var(--ink);font:16px var(--body);padding:12px 14px}
form.intake p.hint{margin:0;color:var(--ink-3);font-size:14px;line-height:1.5}
ol.steps{padding-left:22px;color:var(--ink);font-size:18px;line-height:1.6;max-width:720px}
@media (max-width:1023px){
  .sec h2{font-size:31px}
  h1.page{font-size:36px}
  .bar{gap:10px}
  .bar nav a.nav-how{display:none}
  .bar .menu{display:block}
  .bar nav .menu-list a{display:block}
  .routes{grid-template-columns:1fr}
  .doors{grid-template-columns:1fr}
  .sec .wrap>ol.track2{grid-auto-flow:row;grid-template-columns:1fr;gap:30px}
  .track2 .step::after{right:auto;left:22px;top:auto;bottom:-27px;transform:none}
  .track2 .step.repeats::after{position:static}
  ol.parts{grid-template-columns:1fr 1fr;gap:14px}
  ol.parts li{font-size:15px}
  table.stages,table.stages tbody,table.stages tr,table.stages th,table.stages td{display:block;width:auto}
  table.stages thead{display:none}
  table.stages tbody th{border-bottom:0;padding-bottom:4px;width:auto}
  table.stages td{padding-top:0}
  .sec a.panel-link{font-size:21px}
}

/* --- row 5.1b v3.1 (I31-I33): the 27-step lifecycle on S06; the weekly read links out (Nous C3) --- */
.lifecycle{background:var(--panel);border:1px solid var(--line-2);border-radius:var(--radius);padding:24px 26px;max-width:980px;margin:6px 0 26px}
.lifecycle>p{color:var(--ink-2);font-size:17px;line-height:1.55;margin:0 0 14px}
.lifecycle>p.note{margin:16px 0 0;font-size:15px}
ol.thirds{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
ol.thirds li{border:1px solid var(--line-2);border-radius:var(--radius-sm);padding:14px 16px;background:var(--panel-2)}
ol.thirds li:first-child{border-color:var(--own-line)}
ol.thirds .part-label{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--brand);margin-bottom:6px}
ol.thirds li:first-child .part-label{color:var(--own)}
ol.thirds .part-text{color:var(--ink);font-size:16px;line-height:1.45}
a.out::after{content:"\2197";margin-left:6px}
@media (max-width:1023px){ol.thirds{grid-template-columns:1fr}}

/* --- row 7.2b: our own baseline report (/example), its request form, and the placeholder mark --- */
.ph-tag{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--brand);border:1px dashed var(--brand);border-radius:999px;padding:3px 10px}
.example-card{background:var(--panel);border:1px solid var(--line-2);border-radius:var(--radius);padding:22px 26px;max-width:760px;margin-top:22px}
.example-card p{margin:0;color:var(--ink);font-size:18px;line-height:1.55}
.example-card .cta{margin-top:18px}
.report .rag{font-family:var(--mono);font-size:.86em;letter-spacing:.05em;white-space:nowrap;color:var(--ink)}
.report .wrap>p.byline{font-size:16px}
.report .wrap>p.overall{font-size:22px;max-width:860px}
.report .wrap>p.sens{font-size:15px;max-width:1000px}
.report .wrap>p strong{color:var(--ink)}
.report-scroll{max-width:1000px}
table.report{margin-bottom:14px}
@media (min-width:1024px){table.report tbody th{width:24%}}
table.report td.score,table.report td.tight{white-space:nowrap}
table.report td.score{color:var(--ink)}
.sec .wrap>ol.report-list{max-width:860px}
.report-list li{margin-bottom:12px}
.report-list li strong{color:var(--ink)}
form.intake .ph{margin:0}
.ph[hidden]{display:none}
.ph .cta{margin-top:16px}
@media (max-width:1023px){
  /* stacked rows: the column heading rides in front of each cell (CSS only; never page text) */
  table.report td[data-th]::before{content:attr(data-th);display:block;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);margin:8px 0 2px}
  table.report td{padding-bottom:10px}
  table.report td:not(:last-child){border-bottom:0;padding-bottom:0}
  .report .cta .btn,.ph .cta .btn{height:auto;min-height:52px;padding-top:12px;padding-bottom:12px;text-align:center}
  table.report td.score,table.report td.tight{white-space:normal}
  .report .wrap>p.overall{font-size:19px}
}

/* --- rows 5.1d and G.5: light and dark ------------------------------------------------------------------------
   The light values are the design system's own (tokens.json, bgps-light: "light is the printed page"). Dark is the
   look as approved (I23) and stays the :root default. With no choice made, the reader's system setting picks; the
   switch in the bar sets data-theme and wins both ways. One value is not the design system's: the filled button's
   ink. Its dark literal (#1A140D) reads 3.7:1 on the light theme's gold, so light takes white, 5.0:1. */
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){--bg:#F1E9DA;--bg-2:#F6F0E4;--panel:#FFFFFF;--panel-2:#F8F2E6;--panel-hi:#FFFFFF;--line:rgba(40,30,16,.10);--line-2:rgba(40,30,16,.18);--ink:#241A0E;--ink-2:#544838;--ink-3:#877962;--brand:#9A6410;--brand-soft:rgba(154,100,16,.10);--beacon:#7E4E06;--own:#12776E;--own-soft:rgba(18,119,110,.10);--own-line:rgba(18,119,110,.32);--amber:#9A6410;--amber-soft:rgba(154,100,16,.14);--btn-ink:#FFFFFF;--float:0 6px 24px rgba(40,30,16,.22);--theme:light;color-scheme:light}}
:root[data-theme="light"]{--bg:#F1E9DA;--bg-2:#F6F0E4;--panel:#FFFFFF;--panel-2:#F8F2E6;--panel-hi:#FFFFFF;--line:rgba(40,30,16,.10);--line-2:rgba(40,30,16,.18);--ink:#241A0E;--ink-2:#544838;--ink-3:#877962;--brand:#9A6410;--brand-soft:rgba(154,100,16,.10);--beacon:#7E4E06;--own:#12776E;--own-soft:rgba(18,119,110,.10);--own-line:rgba(18,119,110,.32);--amber:#9A6410;--amber-soft:rgba(154,100,16,.14);--btn-ink:#FFFFFF;--float:0 6px 24px rgba(40,30,16,.22);--theme:light;color-scheme:light}
.theme{display:inline-flex;border:1px solid var(--line-2);border-radius:999px;padding:2px;gap:2px}
.theme button{font:600 12px var(--body);letter-spacing:.02em;color:var(--ink-2);background:none;border:0;border-radius:999px;padding:6px 12px;cursor:pointer}
.theme button[aria-pressed="true"]{background:var(--panel-hi);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2)}
.bar .menu-list .theme{align-self:flex-start;margin:8px 14px 6px}
@media (max-width:1023px){.bar nav>.theme{display:none}}

/* --- rows 5.1d and G.5: the accepted copy (v4), rendered ---------------------------------------------------- */
.sec .wrap>p.track{max-width:none;margin:0 0 10px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;font-family:var(--mono);font-size:13px;letter-spacing:.06em;color:var(--ink-3)}
.track .st{border:1px solid var(--line-2);border-radius:999px;padding:6px 14px;color:var(--ink-2);font-family:var(--body);font-size:15px;letter-spacing:0}
.track .st.now{border-color:var(--brand);color:var(--brand);font-weight:600}
.sec .wrap>p.track+p{margin-bottom:26px;font-size:16px}
.sec .wrap>p.source{font-size:14px;color:var(--ink-3);margin-top:-14px}
.sec .wrap>p.source a{color:inherit}
.sec .wrap>p.link-line{margin-top:20px}
.sec .wrap>p.link-line .quiet{font-size:17px;color:var(--ink)}
.sec .wrap>p a:not(.quiet):not(.out){color:var(--ink);text-decoration-color:var(--brand);text-underline-offset:3px}
.held-link{border-bottom:1px dashed var(--line-2)}
.sec .wrap>ul li,.sec .wrap>ol li{padding-left:4px}
.sec .wrap>.ph{margin:4px 0 18px}
.sec .wrap>.ph .k{margin:0}
.sec .wrap>.cta{margin-bottom:6px}
/* the start form */
form.intake fieldset.pick{margin:0 0 4px}
form.intake fieldset.pick legend,form.intake>div>label{font-size:16px;color:var(--ink);font-weight:600}
form.intake .consent label{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--ink-2);font-weight:400}
form.intake textarea{resize:vertical}

.email{max-width:760px;background:var(--panel);border:1px solid var(--line-2);border-radius:var(--radius);overflow:hidden}
.email .k{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.email-subject{padding:20px 26px;border-bottom:1px solid var(--line-2);background:var(--panel-2)}
.email-subject p{margin:0;font-family:var(--display);font-weight:650;font-size:20px;color:var(--ink)}
.email-body{padding:24px 26px 28px}
.email-body p,.email-body li{font-size:17px;line-height:1.6;color:var(--ink-2)}
.email-body p{margin:0 0 14px}
.email-body ul{margin:0 0 14px;padding-left:22px}
.email .alt{border:1px dashed var(--line-2);border-radius:var(--radius-sm);padding:12px 16px;margin:0 0 12px}
.email .alt p{margin:0}
.email .slot{font-family:var(--mono);font-size:.9em;color:var(--brand)}
@media (max-width:1023px){.track .st{font-size:14px;padding:5px 11px}}
form.intake+p.label{margin-top:22px}

/* --- rows 5.3 and G.5: the accepted copy (v5), rendered ------------------------------------------------------- */
/* The first screen in light, on the desktop (Jeremy's note, 6 Oct): the standfirst and the line under the button ran
   into the picture's left edge. The words are ruled and are not touched, and neither is dark, the look as approved
   (I23), where that edge fades into a dark ground and cannot be seen. In light the picture is a dark plate on paper
   and its edge shows, so there the plate is set a little smaller and further right, and its fade starts clear of the
   longest line. Written twice, as the light palette is: for the reader's system setting, and for the switch. */
@media (min-width:1024px) and (prefers-color-scheme:light){:root:not([data-theme="dark"]) .s01 .pic{top:214px;left:380px;width:1100px;height:614px;
  -webkit-mask-image:linear-gradient(90deg,transparent 30%,#000 35%),linear-gradient(180deg,transparent 0,#000 80px);
  mask-image:linear-gradient(90deg,transparent 30%,#000 35%),linear-gradient(180deg,transparent 0,#000 80px)}}
@media (min-width:1024px){:root[data-theme="light"] .s01 .pic{top:214px;left:380px;width:1100px;height:614px;
  -webkit-mask-image:linear-gradient(90deg,transparent 30%,#000 35%),linear-gradient(180deg,transparent 0,#000 80px);
  mask-image:linear-gradient(90deg,transparent 30%,#000 35%),linear-gradient(180deg,transparent 0,#000 80px)}}
/* a page that is one run of text under several headings (the terms, "How it runs"): air above each heading */
.sec .wrap>*+h2{margin-top:64px}
/* a link out of the site, inside a sentence: the same underline as a link within it, and the arrow that says it leaves */
.sec .wrap>p:not(.source) a.out{color:var(--ink);text-decoration-color:var(--brand);text-underline-offset:3px}
/* the line under a button, which says what pressing it does */
.sec .wrap>.cta+p.under{margin:12px 0 0}
@media (max-width:1023px){.sec .wrap>*+h2{margin-top:44px}}
/* inside a sentence the arrow would sit before the comma, so the underline alone marks the link */
.sec .wrap>p:not(.source) a.out::after{content:none}

.sec .wrap>p.label{font-size:12px;line-height:1.6;color:var(--ink-3);max-width:640px}
/* the stage track: the stage she is at is filled as well as outlined, so it cannot be missed (Jeremy, JB4) */
.track .st.now{background:var(--brand-soft);box-shadow:inset 0 0 0 1px var(--brand)}

/* --- rows 5.3 and G.5, the v6 round: the supplier line (CLOSED I71, I72) -------------------------------------- */
/* At the foot of every page, above the seal line and the three-site panel. The registered office is a slot until it
   is filled from the public register, and it shows as one: the same mark the dated reply uses for its slots. */
footer.site .supplier{color:var(--ink-2);font-size:13px;line-height:1.6;max-width:760px;margin:0 0 12px}
footer.site .supplier .slot,.sec .wrap>p .slot{font-family:var(--mono);font-size:.92em;color:var(--brand)}
/* under the reply's signature: the same line, set as an email's footer */
.email-body p.email-foot{margin:22px 0 0;padding-top:14px;border-top:1px solid var(--line-2);font-size:13px;line-height:1.6;color:var(--ink-3)}
/* --- row 7.2b with row 3b.5's picture P1 (8 Oct): the report card on /example, first cut -------------------------
   The report's "whole lifecycle" table, marked "card" by the builder, is drawn as 27 boxes: each of its three
   columns (a tile of nine steps) is set as a row of nine, under its own heading once. The markup's order is
   unchanged: it is still the report's table, read across. A graded box is a link to that step's row of evidence
   lower on the page; an ungraded box is a dashed outline with no fill, no grade and no link. A grade is carried by
   its word in every box; the colour is a band and a swatch beside the word, never the word's own colour.
   The three grade colours are picked for each theme and checked together for colour-vision separation; the light
   set is also the print set (p42_example.PRINT_CSS). No word is written here: content: sets a swatch and no text. */
:root{--rag-green:#5FCB8C;--rag-green-soft:rgba(95,203,140,.13);--rag-amber:#E5AA3D;--rag-amber-soft:rgba(229,170,61,.14);--rag-red:#D2452F;--rag-red-soft:rgba(210,69,47,.17)}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){--rag-green:#1A8F6B;--rag-green-soft:rgba(26,143,107,.10);--rag-amber:#C27A00;--rag-amber-soft:rgba(194,122,0,.11);--rag-red:#B3261E;--rag-red-soft:rgba(179,38,30,.08)}}
:root[data-theme="light"]{--rag-green:#1A8F6B;--rag-green-soft:rgba(26,143,107,.10);--rag-amber:#C27A00;--rag-amber-soft:rgba(194,122,0,.11);--rag-red:#B3261E;--rag-red-soft:rgba(179,38,30,.08)}
table.report.card{display:grid;gap:8px;width:100%;max-width:none;margin:2px 0 18px;border-collapse:separate;font-size:13px;line-height:1.3}
table.report.card thead,table.report.card tbody,table.report.card tr{display:contents}
table.report.card thead th{display:block;grid-column:1/-1;width:auto;padding:16px 0 2px;border:0;font-family:var(--mono);font-size:12px;line-height:1.5;letter-spacing:.06em;text-transform:none;color:var(--ink-2);font-weight:500}
table.report.card thead th:first-child{padding-top:0}
table.report.card td.box{display:block;width:auto;min-width:0;padding:10px 10px 11px;border:1px dashed var(--line-2);border-radius:var(--radius-sm);font-family:var(--display);font-weight:600;color:var(--ink-2);overflow-wrap:break-word}
.card .st{font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.04em;color:var(--ink-3);white-space:nowrap}
.card .nm{overflow-wrap:break-word}
table.report.card td.graded{display:flex;flex-direction:column;padding:0;border:1px solid var(--line-2);border-top:5px solid var(--g);background:var(--panel);color:var(--ink)}
.card td[data-grade="GREEN"]{--g:var(--rag-green);--gs:var(--rag-green-soft)}
.card td[data-grade="AMBER"]{--g:var(--rag-amber);--gs:var(--rag-amber-soft)}
.card td[data-grade="RED"]{--g:var(--rag-red);--gs:var(--rag-red-soft)}
.card td.graded a{flex:1;display:flex;flex-direction:column;gap:5px;padding:8px 10px 11px;background:var(--gs);color:inherit;text-decoration:none;border-radius:0 0 9px 9px}
.card td.graded .nm{color:var(--ink);font-weight:650}
.card td.graded .nm>span{text-decoration:underline;text-decoration-color:var(--ink-3);text-decoration-thickness:1px;text-underline-offset:3px}
.card td.graded a:hover .nm>span{text-decoration-color:var(--brand);text-decoration-thickness:2px}
.card td.graded a:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.card .rag{margin-top:auto;padding-top:3px;display:flex;flex-direction:column;align-items:flex-start;gap:3px;white-space:normal;font-size:11.5px;font-weight:400;color:var(--ink-2)}
.card .rag .gr{display:inline-flex;align-items:center;gap:5px;font-weight:700;color:var(--ink)}
.card .rag .gr::before{content:"";width:9px;height:9px;border-radius:2px;background:var(--g)}
@media (min-width:1024px){
  table.report.card{grid-template-columns:repeat(9,minmax(0,1fr))}
  table.report.card thead th:nth-child(1){grid-row:1}
  table.report.card thead th:nth-child(2){grid-row:3}
  table.report.card thead th:nth-child(3){grid-row:5}
  table.report.card td:nth-child(1){grid-row:2}
  table.report.card td:nth-child(2){grid-row:4}
  table.report.card td:nth-child(3){grid-row:6}
  table.report.card tr:nth-child(1)>td{grid-column:1}
  table.report.card tr:nth-child(2)>td{grid-column:2}
  table.report.card tr:nth-child(3)>td{grid-column:3}
  table.report.card tr:nth-child(4)>td{grid-column:4}
  table.report.card tr:nth-child(5)>td{grid-column:5}
  table.report.card tr:nth-child(6)>td{grid-column:6}
  table.report.card tr:nth-child(7)>td{grid-column:7}
  table.report.card tr:nth-child(8)>td{grid-column:8}
  table.report.card tr:nth-child(9)>td{grid-column:9}
}
/* on a phone each tile is three rows of three, under its heading */
@media (max-width:1023px){
  table.report.card{grid-template-columns:repeat(3,minmax(0,1fr))}
  table.report.card thead th:nth-child(1){grid-row:1}
  table.report.card thead th:nth-child(2){grid-row:5}
  table.report.card thead th:nth-child(3){grid-row:9}
  table.report.card tr:nth-child(3n+1)>td{grid-column:1}
  table.report.card tr:nth-child(3n+2)>td{grid-column:2}
  table.report.card tr:nth-child(3n)>td{grid-column:3}
  table.report.card tr:nth-child(-n+3)>td:nth-child(1){grid-row:2}
  table.report.card tr:nth-child(n+4):nth-child(-n+6)>td:nth-child(1){grid-row:3}
  table.report.card tr:nth-child(n+7)>td:nth-child(1){grid-row:4}
  table.report.card tr:nth-child(-n+3)>td:nth-child(2){grid-row:6}
  table.report.card tr:nth-child(n+4):nth-child(-n+6)>td:nth-child(2){grid-row:7}
  table.report.card tr:nth-child(n+7)>td:nth-child(2){grid-row:8}
  table.report.card tr:nth-child(-n+3)>td:nth-child(3){grid-row:10}
  table.report.card tr:nth-child(n+4):nth-child(-n+6)>td:nth-child(3){grid-row:11}
  table.report.card tr:nth-child(n+7)>td:nth-child(3){grid-row:12}
}
/* the step she opened: its row of evidence is marked, its box is ringed, and the other places that speak of that
   step carry the same mark (its rows under "How agents help" the bar, its item under "Where to start" the tint) */
.report tr[id^="step-"]{scroll-margin-top:96px}
.report tr[id^="step-"]:target{background:var(--brand-soft)}
.report tr[id^="step-"]:target>th{box-shadow:inset 4px 0 0 var(--brand)}
.report:has(#step-1:target) .card [data-step="1"],.report:has(#step-2:target) .card [data-step="2"],.report:has(#step-3:target) .card [data-step="3"],.report:has(#step-4:target) .card [data-step="4"],.report:has(#step-5:target) .card [data-step="5"],.report:has(#step-6:target) .card [data-step="6"],.report:has(#step-7:target) .card [data-step="7"],.report:has(#step-8:target) .card [data-step="8"],.report:has(#step-9:target) .card [data-step="9"]{outline:2px solid var(--brand);outline-offset:2px}
.report:has(#step-1:target) tr[data-steps~="1"]>th,.report:has(#step-2:target) tr[data-steps~="2"]>th,.report:has(#step-3:target) tr[data-steps~="3"]>th,.report:has(#step-4:target) tr[data-steps~="4"]>th,.report:has(#step-5:target) tr[data-steps~="5"]>th,.report:has(#step-6:target) tr[data-steps~="6"]>th,.report:has(#step-7:target) tr[data-steps~="7"]>th,.report:has(#step-8:target) tr[data-steps~="8"]>th,.report:has(#step-9:target) tr[data-steps~="9"]>th{box-shadow:inset 4px 0 0 var(--brand)}
.report:has(#step-1:target) li[data-step="1"],.report:has(#step-2:target) li[data-step="2"],.report:has(#step-3:target) li[data-step="3"],.report:has(#step-4:target) li[data-step="4"],.report:has(#step-5:target) li[data-step="5"],.report:has(#step-6:target) li[data-step="6"],.report:has(#step-7:target) li[data-step="7"],.report:has(#step-8:target) li[data-step="8"],.report:has(#step-9:target) li[data-step="9"]{background:var(--brand-soft);box-shadow:0 0 0 3px var(--brand-soft);border-radius:2px}

/* --- row 7.2b, round 2 (9 Oct): the space above the card, the pen's line, the pressable look, the rail --------------
   All four are drawn here from marks the builder already sets; nothing is added inside a box, and no word is set
   with content:. The page check holds the marks; how they look is held by eye (the screens in screens-report-card-r2). */
/* the space: the card's section follows the report's opening lines with no divider between them, and the block's
   own sentence runs the card's width */
.report #report{padding-bottom:24px}
.report #report+.sec{border-top:0;padding-top:24px}
.report #report+.sec h2{margin-bottom:16px}
.report #report+.sec .wrap>p:not(.sens){max-width:1000px}
@media (max-width:1023px){.report #report{padding-bottom:20px}.report #report+.sec{padding-top:20px}}
/* the pen's line above the card (C1): text, not a link */
.report .wrap>p.card-hint{font-size:16px;line-height:1.5;font-weight:600;color:var(--ink);margin:0 0 12px}
/* the pressable look: a graded box is raised a little and carries a small drawn arrow, down, to where it goes;
   a later box stays flat */
table.report.card td.box{position:relative}
table.report.card td.graded{box-shadow:0 1px 2px rgba(0,0,0,.16),0 3px 10px rgba(0,0,0,.10);transition:box-shadow .12s}
table.report.card td.graded:hover{box-shadow:var(--float)}
.card td.graded a{position:relative}
.card td.graded a::after{content:"";position:absolute;right:11px;bottom:14px;width:7px;height:7px;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);transform:rotate(45deg)}
.card td.graded a:hover::after,.card td.graded a:focus-visible::after{border-color:var(--brand)}
/* the rail: the step that holds others back (data-holds) is tied to each step it holds (data-held-by). It is a line
   in ink, never a grade's colour: a dot at the step that holds, an arrowhead into each step held. It stops at the
   last step held and nothing of it reaches the later rows. */
table.report.card td[data-holds]{border-left:2px solid var(--ink-2);border-right:2px solid var(--ink-2);border-bottom:2px solid var(--ink-2)}
table.report.card td[data-holds]::after,table.report.card td[data-held-by]::after,table.report.card td[data-passed-by]::after{content:"";position:absolute;box-sizing:border-box;height:12px;pointer-events:none}
table.report.card td[data-holds]::before,table.report.card td[data-held-by]::before{content:"";position:absolute;pointer-events:none}
table.report.card td[data-holds]::after{top:100%;left:calc(50% - 1px);width:0;border-left:2px solid var(--ink-2)}
table.report.card td[data-holds]::before{top:calc(100% - 3px);left:calc(50% - 5px);width:10px;height:10px;border-radius:50%;background:var(--ink-2)}
@media (min-width:1024px){
  /* one row of nine: the rail runs under the row, from the step that holds to the last step it holds. Each box
     draws the piece from the centre of the box before it to its own centre, so a step it passes and does not hold
     (data-passed-by) carries the line and no arrowhead */
  table.report.card thead th:nth-child(2){padding-top:24px}
  table.report.card td[data-passed-by]::after,table.report.card td[data-held-by]::after{top:100%;left:calc(-50% - 11px);width:calc(100% + 12px);border-bottom:2px solid var(--ink-2)}
  table.report.card td[data-held-by]::after{border-right:2px solid var(--ink-2)}
  table.report.card td[data-held-by]::before{top:calc(100% + 1px);left:calc(50% - 6px);border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:7px solid var(--ink-2)}
}
@media (max-width:1023px){
  /* three by three: the steps held are the row under the step that holds, so the rail drops from it and runs
     over that row, with an arrowhead down into each. It does not pass the step beside it. This drawing is right
     while the steps held are the row beneath; if the scores change which step holds which, look at it again */
  table.report.card td[data-held-by]{margin-top:14px}
  table.report.card td[data-passed-by]::after{content:none}
  table.report.card td[data-held-by]::after{bottom:calc(100% + 5px);left:calc(-50% - 11px);width:calc(100% + 12px);border-top:2px solid var(--ink-2);border-right:2px solid var(--ink-2)}
  table.report.card tr:nth-child(3n+1)>td[data-held-by]::after{left:calc(50% - 1px);width:0;border-top:0;border-right:0;border-left:2px solid var(--ink-2)}
  table.report.card td[data-held-by]::before{bottom:calc(100% + 5px);left:calc(50% - 6px);border-left:6px solid transparent;border-right:6px solid transparent;border-top:7px solid var(--ink-2)}
}

/* --- row 3b.5 (9 Oct): the two pictures inside the accepted pages --------------------------------------------------
   P2, the still of our own Baseline report (home, the Baseline page, "How it runs"), and P3, the tool's map ("How
   it runs"). p42_pictures.py draws both; the words under each and each text alternative are the pen's. The still
   uses the report card's grade colours and its rail. No word is set with content:. */
figure.pic{margin:20px 0 26px;max-width:1000px}
.pic figcaption{margin:10px 0 0;max-width:720px;font-size:15px;line-height:1.55;color:var(--ink-2)}
/* P2: one drawing, and the whole of it one link to the report */
.still-link{display:block;text-decoration:none;color:inherit;border:1px solid var(--line-2);border-radius:14px;padding:14px 14px 12px;background:var(--bg-2)}
.still-link:hover{border-color:var(--brand)}
.still-link:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.still-fig,.still-row{display:block}
.still-row+.still-row{margin-top:16px}
.still-tile{display:flex;flex-wrap:wrap;gap:2px 10px;align-items:baseline;margin:0 0 6px;font-family:var(--mono);font-size:11.5px;line-height:1.5;letter-spacing:.05em}
.still-t{color:var(--ink);font-weight:600}
.still-s{color:var(--ink-2)}
.still-boxes{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:6px}
.still-box{position:relative;display:flex;flex-direction:column;gap:3px;min-width:0;padding:7px 8px 8px;border:1px dashed var(--line-2);border-radius:8px;font-family:var(--display);font-size:12px;line-height:1.25;font-weight:600;color:var(--ink-2)}
.still-n{font-family:var(--mono);font-size:10.5px;font-weight:400;color:var(--ink-3)}
.still-nm{overflow-wrap:break-word}
.still-box.graded{border:1px solid var(--line-2);border-top:4px solid var(--g);background:linear-gradient(var(--gs),var(--gs)),var(--panel);color:var(--ink)}
.still-box[data-grade="GREEN"]{--g:var(--rag-green);--gs:var(--rag-green-soft)}
.still-box[data-grade="AMBER"]{--g:var(--rag-amber);--gs:var(--rag-amber-soft)}
.still-box[data-grade="RED"]{--g:var(--rag-red);--gs:var(--rag-red-soft)}
.still-gr{margin-top:auto;padding-top:4px;display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.05em;color:var(--ink)}
.still-gr::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--g)}
/* the rail and the frame of the step that holds others, as on the card: in ink, never a grade's colour */
.still-box[data-holds]{border-left-color:var(--ink-2);border-right-color:var(--ink-2);border-bottom-color:var(--ink-2);box-shadow:inset 1px 0 0 var(--ink-2),inset -1px 0 0 var(--ink-2),inset 0 -1px 0 var(--ink-2)}
.still-box[data-holds]::after,.still-box[data-held-by]::after,.still-box[data-passed-by]::after{content:"";position:absolute;box-sizing:border-box;height:10px}
.still-box[data-holds]::before,.still-box[data-held-by]::before{content:"";position:absolute}
.still-box[data-holds]::after{top:100%;left:calc(50% - 1px);width:0;border-left:2px solid var(--ink-2)}
.still-box[data-holds]::before{top:calc(100% - 3px);left:calc(50% - 4px);width:8px;height:8px;border-radius:50%;background:var(--ink-2)}
@media (min-width:1024px){
  .still-box[data-passed-by]::after,.still-box[data-held-by]::after{top:100%;left:calc(-50% - 9px);width:calc(100% + 10px);border-bottom:2px solid var(--ink-2)}
  .still-box[data-held-by]::after{border-right:2px solid var(--ink-2)}
  .still-box[data-held-by]::before{top:calc(100% + 1px);left:calc(50% - 5px);border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:6px solid var(--ink-2)}
}
@media (max-width:1023px){
  /* three by three for the graded nine, with the rail as a tree, as on the card. This drawing is right while the
     steps held are the row under the step that holds them; if the scores change which holds which, look again */
  .still-link{padding:12px 10px 10px}
  .still-boxes{grid-template-columns:repeat(3,minmax(0,1fr))}
  .still-box[data-held-by]{margin-top:13px}
  .still-box[data-passed-by]::after{content:none}
  .still-box[data-held-by]::after{bottom:calc(100% + 4px);left:calc(-50% - 9px);width:calc(100% + 10px);border-top:2px solid var(--ink-2);border-right:2px solid var(--ink-2)}
  .still-box[data-held-by]:nth-child(3n+1)::after{left:calc(50% - 1px);width:0;border-top:0;border-right:0;border-left:2px solid var(--ink-2)}
  .still-box[data-held-by]::before{bottom:calc(100% + 4px);left:calc(50% - 5px);border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid var(--ink-2)}
  /* each later row is one line of nine numbered boxes under its label; its names are in the markup and not shown
     (Peitho's list, 8.14, call 2) */
  .still-row+.still-row .still-boxes{grid-template-columns:repeat(9,minmax(0,1fr));gap:4px}
  .still-row+.still-row .still-box{padding:6px 0;align-items:center}
  .still-row+.still-row .still-nm{display:none}
}
/* P3: a capture, shown as captured: at its own size and never wider, on its own white ground, in a frame, the same
   in light and dark. Under 1,024 pixels the figure and its line are left out */
figure.pic.capture .capture-frame{display:inline-block;box-sizing:border-box;max-width:100%;padding:10px;border:1px solid var(--line-2);border-radius:14px;background:#fff;vertical-align:top}
figure.pic.capture img{display:block;max-width:100%;height:auto}
@media (max-width:1023px){.narrow-out{display:none}}

/* --- the note at the head of a dated document (13 Oct: the manifesto and its brief; p42_record.py). It stands under
   the bar, in the bar's own gutters, as a notice and not as part of the document. No word is written here. --- */
.record{padding:14px max(160px,calc((100vw - 1440px)/2 + 160px));border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-2);font-family:var(--body);font-size:14px;line-height:1.55;color:var(--ink-2)}
.record p{margin:0 0 6px;max-width:760px}
.record p:last-child{margin-bottom:0}
.record a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--brand);text-underline-offset:3px}
@media (max-width:1023px){.record{padding:12px 20px}}

/* --- B1 (MVP iteration, 18 Oct): the hero is shorter and the picture crops from the foot, so the strip under it
   (the offer band, B2) shows inside the first viewport at 1366x768 and at 390x844. Layout only: the ruled first-screen
   words and their positions are untouched (I23, I25, I26, I33, I38). The plate moves up so the crop falls on the empty
   lower edge, not on the machine. --- */
@media (min-width:1024px){
  .s01{height:auto;min-height:560px}
  .s01 .pic{top:-24px;bottom:0;height:calc(100% + 24px);object-fit:cover;object-position:50% 40%}
}
@media (min-width:1024px) and (prefers-color-scheme:light){:root:not([data-theme="dark"]) .s01 .pic{top:-4px;height:calc(100% + 4px)}}
@media (min-width:1024px){:root[data-theme="light"] .s01 .pic{top:-4px;height:calc(100% + 4px)}}
@media (max-width:1023px){
  .s01 .pic{height:200px;object-fit:cover;object-position:50% 38%}
}
@media (max-width:1023px) and (min-width:600px){
  .s01 .pic{height:260px}
}

/* --- B10 (MVP iteration): the three-site panel's relationship facts, in the brief's fixed order. Here and not in ring.py: only this site passes them, so the other two panels and the shared panel style are unchanged. --- */
.bgps-ring-facts{margin:0 0 20px;padding:0;list-style:none;display:grid;gap:6px;max-width:720px;color:#c9d7e3;font-size:13.5px;line-height:1.5}
.bgps-ring-facts li{padding-left:18px;position:relative}
.bgps-ring-facts li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:1px;background:#7fa8cc}

/* --- the application's route to AWeber (MVP iteration): the field no reader sees, and the line for a form that did not go
   through, shown only when the redirect lands on #form-error (no script). --- */
.intake .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-error{display:none;margin:0 0 16px;padding:12px 14px;border:1px solid var(--brand);border-radius:6px;color:var(--ink)}
.form-error:target{display:block}

/* --- B2 (MVP iteration, 18 Oct): the offer band, directly under the hero. Compact on purpose: its top padding stays at
   or under 40px, so its first line (the kicker, which carries the Baseline and its fee) shows inside the first viewport at 390px
   and at 1366x768 (B1; Hermes's condition, row-1 note section 1). The DOM order is the copy's: the text, the two
   pictures, then the actions; the grid sets them side by side from 1024px. Layout only: no word is written here. --- */
#b2.sec{padding:40px 0 36px;border-top:1px solid var(--line-2);background:var(--bg-2)}
body.home #b2 .wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:18px 48px;align-items:start}
body.page #b2 .wrap>h3{margin:28px 0 10px;font-size:20px;line-height:1.25}
#b2 .band-copy>p,#b2 .band-copy>h2{max-width:none}
#b2 .band-copy>p.kicker{display:flex;align-items:center;gap:12px;margin:0 0 10px;max-width:none;color:var(--brand);font-family:var(--mono);font-size:14px;letter-spacing:.04em;font-weight:600}
#b2 p.kicker::before{content:"";display:block;width:26px;height:1px;background:var(--brand)}
#b2 h2{font-size:30px;line-height:1.12;margin:0 0 14px}
#b2 .band-copy>p{font-size:17px;line-height:1.55;color:var(--ink-2);margin:0 0 10px;max-width:640px}
#b2 .band-copy>p.fine{font-size:14px;color:var(--ink-3);margin:0 0 4px}
#b2 .band-copy>p.fine a{color:var(--ink-2);text-decoration-color:var(--brand);text-underline-offset:3px}
#b2 .band-pics{display:grid;gap:14px;align-content:start}
#b2 .band-pics figure.pic{margin:0;max-width:560px}
#b2 .band-pics .pic figcaption{margin-top:8px;font-size:14px}
#b2 .band-acts{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center}
#b2 .band-acts .cta{margin:0}
#b2 .band-acts p.link-line{margin:0;max-width:none}
#b2 .band-acts p.link-line .quiet{font-size:16px;color:var(--ink)}
@media (min-width:1024px){
  body.home #b2 .wrap{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-template-areas:"copy pics" "acts pics"}
  #b2 .band-copy{grid-area:copy}
  #b2 .band-pics{grid-area:pics}
  #b2 .band-acts{grid-area:acts}
}
/* the thumbnail is the still of our own report, drawn small: the graded nine as three by three with the rail as a tree
   and each later row as one line of nine numbered boxes, the layout the still already has under 1,024 pixels */
.band-thumb .still-link{padding:12px 10px 10px}
.band-thumb .still-boxes{grid-template-columns:repeat(3,minmax(0,1fr))}
.band-thumb .still-box[data-held-by]{margin-top:13px}
.band-thumb .still-box[data-passed-by]::after{content:none}
.band-thumb .still-box[data-held-by]::after{top:auto;bottom:calc(100% + 4px);left:calc(-50% - 9px);width:calc(100% + 10px);height:10px;border-bottom:0;border-top:2px solid var(--ink-2);border-right:2px solid var(--ink-2)}
.band-thumb .still-box[data-held-by]:nth-child(3n+1)::after{left:calc(50% - 1px);width:0;border-top:0;border-right:0;border-left:2px solid var(--ink-2)}
.band-thumb .still-box[data-held-by]::before{top:auto;bottom:calc(100% + 4px);left:calc(50% - 5px);border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid var(--ink-2);border-bottom:0}
.band-thumb .still-row+.still-row .still-boxes{grid-template-columns:repeat(9,minmax(0,1fr));gap:4px}
.band-thumb .still-row+.still-row .still-box{padding:6px 0;align-items:center}
.band-thumb .still-row+.still-row .still-nm{display:none}
@media (max-width:1023px){#b2.sec{padding:28px 0 28px}#b2 h2{font-size:24px}#b2 .band-copy>p.kicker{font-size:13px;letter-spacing:.02em}}

/* --- B3: three buying triggers. The bold lead-in is the finding of each trigger. --- */
#b3 ol.steps{padding-left:24px;max-width:720px}
#b3 ol.steps li{margin-bottom:14px}
#b3 ol.steps li strong{color:var(--ink)}

/* --- B8: the next step. The people block keeps its copy and now sits under its own subheading. --- */
#b8 h3{margin-top:34px}

/* --- 19 Oct (Hermes; MVP rows 2g, 2i, 2j, 2k): /research, the five papers, /hours and /packages. One block, at the end, ------
   in the sheet's own tokens, so light and dark both work. It names one footer rule, `footer.site .cols+.cols` (row 2 sits 14px under row 1), and no bar, banner, supplier-line or panel rule. */
footer.site .cols+.cols{margin-top:-14px}
.sec.paper .wrap>p.byline{font-size:16px;color:var(--ink-2);margin:-6px 0 2px}
.sec.paper .wrap>p.verline{font-size:14px;line-height:1.5;color:var(--ink-3);margin:0 0 30px}
.sec.paper .wrap>p.verline a,.sec.paper .wrap>p.foundations a{color:var(--ink-2);text-underline-offset:3px}
.sec.paper .wrap>p.lede{font-size:21px;line-height:1.5;color:var(--ink)}
.sec.paper .wrap>p.subhead{color:var(--ink);font-weight:650;margin:26px 0 8px}
.sec.paper .wrap>p strong,.sec.paper .wrap>ul strong,.sec.paper .wrap>ol strong,.sec.paper td strong{color:var(--ink)}
.sec.paper .wrap>h2{font-size:28px;margin:48px 0 16px}
.sec.paper .wrap>h3{font-size:21px;margin:32px 0 10px}
.sec.paper .wrap>h4{font-family:var(--display);font-weight:650;font-size:18px;margin:26px 0 8px;color:var(--ink)}
.sec.paper .wrap>blockquote{margin:24px 0;max-width:720px;border-left:3px solid var(--brand);padding:2px 0 2px 22px}
.sec.paper .wrap>blockquote p{margin:0;font-size:19px;line-height:1.5;color:var(--ink)}
.sec.paper .wrap>table.stages{margin:10px 0 28px}
.sec.paper a{color:var(--ink);text-decoration-color:var(--brand);text-underline-offset:3px}
.sec.paper .cta a.btn{text-decoration:none;color:var(--btn-ink)}
.sec.paper .cta a.quiet{color:var(--ink-2)}
.paper-fig{margin:30px 0;max-width:900px}
.paper-fig img{display:block;width:100%;height:auto;border:1px solid var(--line-2);border-radius:var(--radius-sm)}
.research-index .wrap>h2{font-size:26px;margin:40px 0 8px}
.research-index .wrap>h2 a{color:var(--ink);text-decoration:none}
.research-index .wrap>h2 a:hover{text-decoration:underline;text-decoration-color:var(--brand);text-underline-offset:4px}
.research-index .wrap>p.verline{margin-bottom:6px}
.research-index .wrap>p.foundations{margin-top:56px;padding-top:22px;border-top:1px solid var(--line);font-size:16px}
figure.chart{margin:26px 0 30px;max-width:720px}
figure.chart svg{display:block;width:100%;height:auto}
figure.chart svg text{font-family:var(--body);font-size:12.5px;fill:var(--ink-2)}
figure.chart svg .ch-month{fill:var(--ink)}
figure.chart svg .ch-val{font-size:11.5px;fill:var(--ink)}
figure.chart svg .ch-a{fill:var(--brand)}
figure.chart svg .ch-b{fill:var(--own)}
figure.chart svg .ch-axis{stroke:var(--line-2);stroke-width:1.5;fill:none}
figure.line-figure{margin:22px 0 6px;max-width:420px}
figure.line-figure svg{display:block;width:100%;height:auto}
figure.line-figure svg .ln-line{stroke:var(--line-2);stroke-width:2;fill:none}
figure.line-figure svg .ln-node{fill:var(--brand)}
figure.line-figure svg .ln-label{font-family:var(--body);font-size:14px;fill:var(--ink)}
@media (max-width:1023px){
  .sec.paper .wrap>h2{font-size:24px;margin-top:38px}
  .sec.paper .wrap>p.lede{font-size:19px}
}
/* 20 Oct: /hours copy v4 parts, one scope (.sec.paper.hours); tokens only. Chart grammar and chips: Estate-Style-Guide-v1 s7 */
.sec.paper.hours .chip{display:inline-block;vertical-align:baseline;margin-left:4px;padding:1px 9px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;line-height:1.5;color:var(--ink);border:1px solid var(--chip,var(--ink-2));border-radius:999px;white-space:nowrap}
.sec.paper.hours .chip-measured{--chip:var(--rag-green)}
.sec.paper.hours .chip-estimate,.sec.paper.hours .chip-illustrative{--chip:var(--amber)}
.sec.paper.hours .chip-calculated{--chip:var(--ink-2)}
.sec.paper.hours figure.hours-figure{margin:22px 0 26px;max-width:none}
.sec.paper.hours figure.hours-figure figcaption{margin-top:12px;font-size:14px;color:var(--ink-2);max-width:760px}
.sec.paper.hours table.hours-card td.box{padding:8px 9px 10px;border:1px solid var(--line-2);border-top:5px solid var(--g,var(--ink-3));background:var(--gs,transparent);display:flex;flex-direction:column;gap:4px}
.sec.paper.hours table.hours-card td[data-state="record"],.sec.paper.hours .hours-strip li[data-state="record"]{--g:var(--rag-green);--gs:var(--rag-green-soft)}
.sec.paper.hours table.hours-card td[data-state="placed"],.sec.paper.hours .hours-strip li[data-state="placed"]{--g:var(--own);--gs:var(--own-soft)}
.sec.paper.hours table.hours-card td[data-state="none"],.sec.paper.hours .hours-strip li[data-state="none"]{--g:var(--ink-3);--gs:transparent;border-style:dashed}
.sec.paper.hours table.hours-card td[data-state="red"],.sec.paper.hours .hours-strip li[data-state="red"]{--g:var(--rag-red);--gs:var(--rag-red-soft)}
.sec.paper.hours table.hours-card .gr{margin-top:auto;font-size:11.5px;font-weight:700;color:var(--ink)}
.sec.paper.hours ol.hours-strip{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px;grid-template-columns:repeat(9,minmax(0,1fr))}
.sec.paper.hours .hours-strip li{display:flex;flex-direction:column;gap:3px;padding:7px 8px 9px;font-size:12.5px;line-height:1.3;border:1px solid var(--line-2);border-top:4px solid var(--g,var(--ink-3));background:var(--gs,transparent);border-radius:var(--radius-sm)}
.sec.paper.hours .hours-strip .st{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--ink-3)}
.sec.paper.hours .hours-strip .gr{margin-top:auto;font-size:11px;font-weight:700;color:var(--ink)}
.sec.paper.hours ul.count-strip,.sec.paper.hours ul.lead-tiles{list-style:none;margin:16px 0 20px;padding:0;display:grid;gap:12px;max-width:none}
.sec.paper.hours ul.count-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
.sec.paper.hours ul.lead-tiles{grid-template-columns:repeat(5,minmax(0,1fr))}
.sec.paper.hours .count-strip li,.sec.paper.hours .lead-tiles li{display:flex;flex-direction:column;gap:6px;padding:16px 14px;background:var(--panel);border:1px solid var(--line-2);border-radius:var(--radius-sm);font-size:14px;line-height:1.35}
.sec.paper.hours .cs-fig{font-family:var(--display);font-size:28px;line-height:1.1;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.sec.paper.hours .cs-win{font-size:12.5px;color:var(--ink-3)}
.sec.paper.hours .count-strip .chip,.sec.paper.hours .lead-tiles .chip{align-self:flex-start;margin:auto 0 0}
.sec.paper.hours figure.chart{max-width:820px}
.sec.paper.hours figure.chart .chart-chips{margin:0 0 8px}
.sec.paper.hours figure.chart .chart-chips .chip{margin-left:0}
.sec.paper.hours figure.chart svg .ch-val{font-family:var(--mono);font-variant-numeric:tabular-nums}
.sec.paper.hours figure.chart svg .ch-note{font-size:11.5px;fill:var(--ink-2);font-style:italic}
.sec.paper.hours figure.chart figcaption.source{margin-top:8px;font-size:13.5px;color:var(--ink-2)}
@media (max-width:1023px){
    .sec.paper.hours ul.count-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sec.paper.hours ol.hours-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:520px){
  .sec.paper.hours ul.count-strip{grid-template-columns:1fr}
  .sec.paper.hours ol.hours-strip{grid-template-columns:1fr 1fr}
}
/* 21 Oct (render pass): a long source line or address in a paper breaks inside the column instead of widening the page at 390 */
.sec.paper li,.sec.paper p{overflow-wrap:anywhere}
/* 21 Oct (/hours copy v7.1): the five lead tiles, the three answers and the three chapter cards; one scope, tokens only */
.sec.paper.hours .lead-tiles .cs-fig{font-size:22px;line-height:1.2}
.sec.paper.hours .lead-tiles .cs-label{font-size:13.5px;line-height:1.4}
.sec.paper.hours .answers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:18px 0 26px;max-width:none}
.sec.paper.hours .answer{padding:18px 18px 20px;background:var(--panel);border:1px solid var(--line-2);border-radius:var(--radius)}
.sec.paper.hours .ans-q{margin:0 0 10px;font-family:var(--display);font-size:18px;line-height:1.25;font-weight:700;color:var(--ink)}
.sec.paper.hours .answer p{margin:0;font-size:15px;line-height:1.5;max-width:none}
.sec.paper.hours .chapters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:18px 0 26px}
.sec.paper.hours .chapter{padding:18px 18px 20px;background:var(--panel);border:1px solid var(--line-2);border-radius:var(--radius)}
.sec.paper.hours .chapter p{margin:0 0 8px;font-size:15px;line-height:1.5;max-width:none}
.sec.paper.hours .chap-head{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.sec.paper.hours .chap-status{font-weight:700;color:var(--ink)}
@media (max-width:1023px){
  .sec.paper.hours ul.lead-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sec.paper.hours .answers,.sec.paper.hours .chapters{grid-template-columns:1fr}
}
@media (max-width:520px){
  .sec.paper.hours ul.lead-tiles{grid-template-columns:1fr}
}
.sec.paper.hours .lead-tiles .cs-label{margin-bottom:10px}
/* 22 Oct (N3): the one quiet link set after the manifesto, as furniture. Plain selectors, so that furniture.css carries them to the block. */
.quiet-line{margin:0;padding:22px 24px 10px;text-align:center;font-size:15px;line-height:1.5;color:var(--ink-2);background:var(--bg)}
.quiet-line a{color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--brand);text-underline-offset:3px}
.quiet-line a:hover{color:var(--ink)}


.crewline{margin:0;--cl-ink:var(--ink,#1c1a16);--cl-soft:var(--ink-2,#5a564e);--cl-line:var(--line,#c9c2b4);--cl-bg:var(--bg,#f2ead9);--cl-bg2:var(--bg-2,#ebe2cf);--cl-stay:var(--own,#14766f);--cl-crew:var(--ink-2,#5a564e)}
.crewline-panels{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:719px){.crewline-panels{grid-template-columns:1fr;gap:16px}}
.crewline svg{display:block;width:100%;height:auto;max-width:560px;margin:0 auto}
.crewline svg text{font-family:var(--body,system-ui,-apple-system,"Segoe UI",sans-serif);fill:var(--cl-ink);font-size:12.5px}
.crewline .cl-title{font-size:15px;font-weight:650}
.crewline .cl-soft{fill:var(--cl-soft)}
.crewline .cl-small{font-size:11.5px}
.crewline .cl-halo{paint-order:stroke;stroke:var(--cl-bg);stroke-width:4px;stroke-linejoin:round}
.crewline .cl-axis{stroke:var(--cl-line);stroke-width:1.5;fill:none}
.crewline .cl-crew{fill:url(#cl-hatch);stroke:var(--cl-crew);stroke-width:1.25}
.crewline .cl-hump{fill:none;stroke:var(--cl-crew);stroke-width:2;stroke-dasharray:5 4;stroke-linejoin:round}
.crewline .cl-stay{fill:none;stroke:var(--cl-stay);stroke-width:5;stroke-linejoin:round;stroke-linecap:round}
.crewline .cl-flat{fill:none;stroke:var(--cl-soft);stroke-width:3;stroke-linejoin:round}
.crewline .cl-mark{fill:var(--cl-stay);stroke:var(--cl-bg);stroke-width:2}
.crewline .cl-marknum{fill:var(--cl-bg);font-size:11px;font-weight:700;text-anchor:middle}
.crewline .cl-tick{fill:var(--cl-crew)}
.crewline figcaption{margin-top:12px;font-size:14px;line-height:1.5;color:var(--cl-soft)}
.crewline .cl-alt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.crewline figcaption a{color:var(--cl-ink);text-decoration-color:var(--cl-stay);text-underline-offset:3px}
.crewline--bgps{--cl-bg:var(--bg);}
.crewline--tcm{--cl-soft:var(--ink-soft);--cl-line:var(--rule);--cl-bg:var(--paper);--cl-bg2:var(--paper);--cl-stay:var(--own);--cl-crew:var(--ink-soft);margin:2rem 0}
.crewline--tcm .crewline-panels{grid-template-columns:1fr;gap:1rem}
.crewline--tcm svg text{font-family:var(--body)}