/* Full answer reader — Claude lane. Private local specimen. Avenir Next. No external requests. */
:root{--rule:#DCE6ED;--muted:#51646F;--navy:#2F4453;--steel:#4C7288;--orange:#ED873C;--ink:#203846;--mineral:#F5F7F7;--ink2:#51646F;--line:#DCE6ED;--ok:#2E6B4A;--hold:#7A5A2E;--font:"Avenir Next","Avenir",Nunito Sans,system-ui,-apple-system,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:#fff;color:var(--navy);font:18px/1.65 var(--font);-webkit-font-smoothing:antialiased}
a{color:var(--steel);font-weight:600}
:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.wrap{width:min(100% - 48px,760px);margin-inline:auto}
.note{background:var(--mineral);border-bottom:1px solid #F0D9C2;font-size:13px;color:#5A4027;padding:8px 0}
.back{display:flex;flex-wrap:wrap;gap:4px 20px;align-items:center;min-height:48px}
.back a{min-height:48px;display:inline-flex;align-items:center;font-size:14px}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--steel);margin:32px 0 8px}
h1{font-size:clamp(28px,1.6vw + 22px,40px);line-height:1.2;font-weight:600;margin:0 0 14px}
.meta{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:15px;color:var(--ink2);margin-bottom:22px}
.short{background:var(--mineral);padding:20px 22px;margin-bottom:26px}
.short h2{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--steel);margin:0 0 8px}
.short p{margin:0;font-size:18px}
/* "In this answer": a closed contents disclosure */
.toc{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:0 0 32px}
.toc>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:52px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--steel)}
.toc>summary::-webkit-details-marker{display:none}
.toc>summary::after{content:'+';font-size:22px;font-weight:400;letter-spacing:0}
.toc[open]>summary::after{content:'\2212'}
.toc ol{margin:0 0 12px;padding-left:22px}
.toc a{display:inline-flex;min-height:44px;align-items:center;font-size:16px}
section.part{margin:0 0 34px;scroll-margin-top:16px}
section.part h2{font-size:24px;line-height:1.3;font-weight:600;margin:0 0 10px}
section.part p{margin:0 0 14px;color:#33444F}
section.part ul{margin:0 0 14px;padding-left:22px;color:#33444F}
section.part li{margin:4px 0}
blockquote{margin:0 0 14px;padding:4px 0 4px 16px;border-left:3px solid var(--steel);color:#33444F;font-style:italic}
.src,.rel{margin:36px 0 0}
.src h2,.rel h2{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--steel);margin:0 0 4px}
.src .dio-episode-row{color:var(--ink);font-weight:500}
.src .ep-t{display:grid;gap:2px}
.rel .dio-answer-row>summary,.ans-faq .dio-answer-row>summary{color:var(--ink);font-weight:600}
.rel .dio-answer-row>div p,.ans-faq .dio-answer-row>div p{margin:0 0 10px;color:#33444F}
/* 2026-11-11 audit: "Quick answers" heading at the page's own h2 size and weight (it had none, so the browser's heavier default showed) */
.ans-faq{margin:36px 0 0}
.ans-faq h2{font-size:24px;line-height:1.3;font-weight:600;margin:0 0 10px}
.rel .by{font-size:14px;color:var(--ink2)}
.missing{padding:48px 0;color:var(--ink2)}

/* 2026-11-11 audit: reading measure. Text ran the whole 1,184px column (about 140 characters a line) on laptops. Above tablet width, prose,
   lists, the quick answer and the row lists stop at about 80 characters, on the column's left edge like the headings; charts, drawings and
   widgets keep their own widths. A photo floated left would squeeze the capped text into a sliver, so both sides float right of the text. */
@media(min-width:800px){
  #main{--measure:680px}
  .short{max-width:calc(var(--measure) + 44px)}
  section.part>h2,section.part>p,section.part>ul,section.part>blockquote,section.part>.facts,section.part>.disc,.toc,.ans-faq,.rel{max-width:var(--measure)}
  #main figure.story-inline.left{float:right;margin:6px 0 16px 28px}
}
/* 2026-11-11 audit: a chart, drawing or widget starts below a floated photo instead of being squeezed into the strip beside it */
section.part>figure:not(.story-inline){clear:both}

/* private editorial variant (agreed proposals, not approved) */
.proposal{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.04em;color:#7A5A2E;border:1px solid #E7D3B4;background:var(--mineral);padding:2px 8px;margin:0 0 8px}
.current{margin-top:12px;font-size:15px;color:#51646F}
.current summary{cursor:pointer;font-weight:600;color:#4C7288;min-height:44px;display:flex;align-items:center}
.current p{margin:6px 0 0}

/* episode reader links (episode-link.js): exact public match only */
a.eplink{color:var(--steel,#4C7288);font-weight:600;display:inline-flex;align-items:center;min-height:48px}

/* adjacent qualifications (disclosures.js) */
.disc{font-size:14px;color:#51646F;border-left:2px solid #DCE6ED;padding-left:10px;margin:8px 0 12px}

/* quiet contextual back link (the shared header carries global navigation) */
.crumb{display:flex;min-height:48px;align-items:center}
.crumb a{display:inline-flex;align-items:center;min-height:48px;font-size:14px;font-weight:600;color:#4C7288}

/* labelled factual block (disclosures.js + disclosure-map.js): universal procedure facts, never patient testimony */
.facts{border-left:3px solid #DCE6ED;background:#F5F7F7;padding:10px 14px;margin:6px 0 16px}
.facts p{margin:0 0 4px;font-size:14px;line-height:1.5;color:#51646F}
.facts .facts-h{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#4C7288;margin-bottom:4px}


/* jump control: sticky under the shared header, phone and narrow screens only */
.jumpbar{position:sticky;z-index:20;display:flex;align-items:center;gap:10px;background:#fff;border-bottom:1px solid #DCE6ED;padding:6px 0;height:61px;margin:0 0 -61px;box-sizing:border-box}
.jumpbar[hidden]{display:none}
/* 2026-11-11 audit: same drawn dropdown as the main pages' Jump to bar (feature-pass.css is not loaded here) */
.jumpbar select{-webkit-appearance:none;appearance:none;padding-right:38px!important;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23203846' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center!important;font-weight:500;clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%)}
.jumpbar label{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#4C7288;flex:none}
.jumpbar select{flex:1;min-width:0;min-height:48px;font-family:inherit;font-size:16px;line-height:1.3;color:#2F4453;background:#fff;border:1.5px solid #4C7288;border-radius:0;padding:0 10px}
@media (min-width:900px){.jumpbar{display:none!important}}
/* structure pass 2026-10-08: CTA bands, private review, next steps */
#mid-cta{margin:8px 0 34px}
.dio-review-disclosure{margin-top:48px}
.dio-review-disclosure ul{margin:4px 0 10px;padding-left:20px}
/* page-scoped: the CTA band button, matching the shell's .site-head .button (steel, 52px, opposing-cut corners, orange sweep on hover) */
.dio-cta-band .button{display:inline-flex;justify-content:center;align-items:center;position:relative;isolation:isolate;overflow:hidden;background:#4C7288;color:#fff;min-height:52px;padding:14px 25px;text-decoration:none;font-size:16px;font-weight:500;line-height:1.25;border:0;box-sizing:border-box;clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}
.dio-cta-band .button::before{content:'';position:absolute;inset:0;background:#ED873C;z-index:-1;transform:translateX(-101%);transition:transform var(--dio-cta-retract-duration,1.2s) cubic-bezier(.22,.7,.25,1)}
@media(hover:hover){.dio-cta-band .button:hover{color:#203846}.dio-cta-band .button:hover::before{transform:translateX(0)}}
.dio-cta-band .button:focus-visible{outline:0;box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 6px #203846}
@media(prefers-reduced-motion:reduce){.dio-cta-band .button::before{transition:none}}
.dio-next-steps a{color:var(--ink)}

/* shared life layer: room for its 42px label line below the label */
.src h2[data-alive-label]{margin-bottom:14px}
/* 2026-11-11 audit (regression review): the quick answer box ran 44px past the text column beside it; it ends on the same edge now */
@media(min-width:800px){.short{max-width:var(--measure)}}
/* a widget held to 640px keeps its top rule and its card at that width too (the rule ran 1,184px over a 640px figure; "The same ten
   years, two ways" filled the whole column once it cleared the photo) */
.ans-anim-body.ans-anim-widget:has(>.dio-airports,>.dio-prorated,>.dio-three-tryins,>.dio-two-paths){max-width:640px;margin-inline:auto}
/* 2026-11-12: "Who does what" moved from the header into "Who you'll meet" (86ee3e2) and filled the 1,184px body column there (a 1,184px square
   stage, the card 1,351px tall). Held to 640px and centred like the drawings above; the package draws to its own width (container queries on
   .wd-figure), so nothing in assets/anim/who-does-what-v002/ changes. The card is its width plus about 168px (rule, title, controls, caption),
   so at 640 it is 808px: on a 1280x800 laptop, under the 82px sticky header, it would still run off the screen. Below 640 the width also follows
   the window height (100vh less 268px: header, the card's own rows and a little air) so the whole card fits one screen; never under 420px, the
   width the owner approved for it in the header slot */
.ans-anim-body.ans-anim-widget:has(>.dio-who-does-what){max-width:min(640px,max(420px,100vh - 268px));margin-inline:auto}