/* Riding the Ratchet: site styles. Fonts are self-hosted: no third-party requests. */
@font-face{font-family:"Montserrat";src:url(/assets/fonts/montserrat-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Montserrat";src:url(/assets/fonts/montserrat-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Montserrat";src:url(/assets/fonts/montserrat-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url(/assets/fonts/sourceserif-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url(/assets/fonts/sourceserif-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url(/assets/fonts/sourceserif-400i.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}

:root{
  --teal:#1F5F5B; --deep:#143F3C; --amber:#E3A13B; --ink:#1D2A29;
  --mist:#EEF3F2; --line:#C9D8D5; --field:#6E8B87; --muted:#4E615F; --white:#FFFFFF;
  --sans:"Montserrat",system-ui,sans-serif; --serif:"Source Serif 4",Georgia,serif;
  --wrap:70rem; --read:40rem;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--serif);font-size:1.1875rem;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--teal);text-underline-offset:3px}
a:hover{color:var(--deep)}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:2px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 1.5rem}
.skip{position:absolute;left:-999px;top:0;background:var(--amber);color:var(--deep);padding:.5rem 1rem;font-family:var(--sans);font-weight:600;z-index:10}
.skip:focus{left:1rem;top:1rem}

h1,h2,h3{font-family:var(--sans);color:var(--deep);line-height:1.15;letter-spacing:-.01em;margin:0 0 .6em}
h2{font-size:clamp(1.7rem,3.2vw,2.35rem);font-weight:700}
h3{font-size:1.2rem;font-weight:600}
p{margin:0 0 1.1em;max-width:var(--read)}
.lead{font-size:1.3rem;line-height:1.55}

/* header and hero share the teal field */
.top{background:var(--teal);color:var(--white)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-top:1.25rem;padding-bottom:1.25rem}
.nav .logo img{width:200px}
.nav ul{list-style:none;display:flex;gap:1.75rem;margin:0;padding:0;font-family:var(--sans);font-size:.95rem;font-weight:500}
.nav a{color:var(--white);text-decoration:none}
.nav a:hover{text-decoration:underline}
.hero{padding-top:3.5rem;padding-bottom:1rem}
.hero h1{color:var(--white);font-size:clamp(2.2rem,5.2vw,3.7rem);font-weight:700;max-width:15ch;margin-bottom:.45em}
.hero .lead{color:#E6EFEE;max-width:36rem}
.actions{display:flex;flex-wrap:wrap;gap:1rem 1.75rem;align-items:center;margin-top:1.75rem}
.btn{display:inline-block;background:var(--amber);color:var(--deep);font-family:var(--sans);font-weight:600;font-size:1rem;padding:.9rem 1.4rem;border-radius:6px;text-decoration:none;border:0;cursor:pointer}
.btn:hover{background:#EDB458;color:var(--deep)}
.textlink{color:var(--white);font-family:var(--sans);font-weight:500;font-size:1rem}
.textlink:hover{color:var(--white)}

/* the row: the one moving moment */
.row{margin:3rem 0 0}
.row svg{width:100%;height:auto;display:block}
.row figcaption{font-family:var(--sans);font-size:.9rem;color:#CFE0DD;padding:.75rem 0 2.25rem;max-width:44rem}
.person line{stroke:#FFFFFF;stroke-width:2.2}
.person circle{fill:#FFFFFF}
.person{opacity:.85}
.floor{stroke:var(--amber);stroke-width:2.5;stroke-dasharray:7 6}

/* sections */
section{padding:5rem 0}
.mist{background:var(--mist)}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem;margin-top:2rem}
.three h3{border-top:3px solid var(--teal);padding-top:.9rem}
.three p{font-size:1.05rem}
.method{display:grid;grid-template-columns:1.15fr 1fr;gap:3.5rem;align-items:start;margin-top:2rem}
.method figure{margin:0}
.method figcaption{font-family:var(--sans);font-size:.85rem;color:var(--muted);margin-top:.6rem}
.tools{margin:0}
.tools dt{font-family:var(--sans);font-weight:700;color:var(--deep);font-size:1.1rem;margin-top:1.4rem}
.tools dt:first-child{margin-top:0}
.tools dd{margin:.25rem 0 0;font-size:1.05rem}
.who p{max-width:44rem}
.who em{font-style:normal;font-family:var(--sans);font-weight:600;color:var(--deep);font-size:1.02rem}
.author{display:grid;grid-template-columns:auto 1fr;gap:3rem;align-items:start}
.author .mark{width:120px;margin-top:.4rem}
.band{background:var(--deep);color:var(--white)}
.band h2{color:var(--white)}
.band p{color:#E1ECEA}
.band a{color:var(--white)}
.signup>*{max-width:40rem}
.signup form{display:flex;flex-wrap:wrap;gap:.75rem;margin:1.5rem 0 1rem}
.signup label{flex-basis:100%;font-family:var(--sans);font-weight:600;font-size:.95rem;color:var(--deep)}
.signup input[type=email]{flex:1 1 16rem;font:inherit;font-size:1.05rem;padding:.8rem 1rem;border:2px solid var(--field);border-radius:6px;background:#fff;color:var(--ink)}
.signup input[type=email]:focus{border-color:var(--teal);outline:none;box-shadow:0 0 0 3px rgba(227,161,59,.5)}
.small{font-size:.95rem;color:var(--muted)}

footer{background:var(--deep);color:#CFE0DD;font-family:var(--sans);font-size:.9rem;padding-top:2.5rem;padding-bottom:2.5rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between}
footer a{color:#FFFFFF}
footer img{width:150px}

/* plain inner pages */
.page{padding-top:4rem;padding-bottom:5rem}
.page h1{font-size:clamp(2rem,4vw,2.8rem);font-weight:700}
.page h2{font-size:1.4rem;margin-top:2.2rem}
.page ul{max-width:var(--read);padding-left:1.2rem}

@media (max-width:860px){
  .three,.method,.author{grid-template-columns:1fr;gap:2rem}
  .author .mark{width:84px}
  .nav ul{gap:1.1rem;font-size:.9rem}
  section{padding:3.5rem 0}
}
@media (max-width:620px){
  body{font-size:1.0625rem}
  .nav{flex-wrap:wrap}
  .nav .logo img{width:170px}
  .nav ul{width:100%;flex-wrap:wrap;gap:.4rem 1.1rem;font-size:.88rem}
  .nav li{white-space:nowrap}
  .row{margin-top:2rem}
  .hero{padding-top:2rem}
  .lead{font-size:1.15rem}
}

footer .fl{display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;margin:0}

/* ---------- interactive: the ratchet you can click ---------- */
.person{transition:opacity .45s ease}
.person.faded{opacity:.22}
.person line,.person circle{transition:stroke .5s ease,fill .5s ease}
.top4.lit line{stroke:var(--amber)} .top4.lit circle{fill:var(--amber)}
.floor{transition:transform .35s cubic-bezier(.2,.9,.3,1.25)}
.rowbar{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.25rem;padding:.9rem 0 2.25rem}
.rowbar p{margin:0;font-family:var(--sans);font-size:.92rem;color:#E1ECEA;max-width:40rem;min-height:2.6em}
.btn-ghost{background:transparent;color:var(--white);border:2px solid var(--amber);font-family:var(--sans);font-weight:600;font-size:.95rem;padding:.6rem 1.1rem;border-radius:6px;cursor:pointer}
.btn-ghost:hover{background:rgba(227,161,59,.15)}
@media (prefers-reduced-motion:reduce){.person,.floor,.person line,.person circle{transition:none}}

/* ---------- interactive: the Four Rooms explorer ---------- */
.rooms{display:grid;grid-template-columns:auto 1fr 1fr;gap:.5rem;align-items:stretch}
.rooms .colh{font-family:var(--sans);font-weight:600;font-size:.82rem;color:var(--muted);text-align:center;align-self:end;padding-bottom:.25rem}
.rooms .rowh{font-family:var(--sans);font-weight:600;font-size:.82rem;color:var(--muted);writing-mode:vertical-rl;transform:rotate(180deg);text-align:center}
.room{font:inherit;text-align:left;background:#fff;border:2px solid var(--teal);border-radius:8px;padding:.9rem 1rem;cursor:pointer;min-height:7.5rem;color:var(--ink)}
.room b{display:block;font-family:var(--sans);color:var(--deep);font-size:1rem;margin-bottom:.2rem}
.room span{font-size:.92rem;color:var(--muted);line-height:1.4;display:block}
.room.r1{background:#F3F4F3} .room.r4{background:#FBF4E6}
.room[aria-pressed="true"]{background:var(--teal);border-color:var(--teal)}
.room[aria-pressed="true"] b,.room[aria-pressed="true"] span{color:#fff}
.roomdetail{margin-top:1rem;border-left:4px solid var(--amber);padding:.25rem 0 .25rem 1rem;min-height:9rem}
.roomdetail h3{margin-bottom:.3rem}
.roomdetail p{font-size:1.02rem;margin-bottom:.5rem}
.roomdetail .move{font-family:var(--sans);font-weight:600;color:var(--deep);font-size:.98rem}
.audit-cta{margin-top:2.5rem;padding:1.75rem;border:2px solid var(--teal);border-radius:10px;display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between}
.audit-cta p{margin:0;max-width:34rem}
@media (min-width:480px){.audit-cta .btn{white-space:nowrap}}

/* ---------- the Audit tool ---------- */
.steps{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;padding:0;margin:1.5rem 0 2rem;font-family:var(--sans);font-size:.88rem}
.steps li{padding:0;border-radius:999px;background:var(--mist);color:var(--muted)}
.steps li button{font:inherit;color:inherit;background:none;border:0;padding:.45rem .8rem;border-radius:999px;cursor:default}
.steps li.on{background:var(--teal);color:#fff;font-weight:600}
.steps li.done{background:#D5E4E1;color:var(--deep)}
.steps li.done button,.steps li.on button{cursor:pointer}
.steps li.done button:hover{background:#C3D9D4;text-decoration:underline;text-underline-offset:3px}
.resume{font-family:var(--sans);font-size:.95rem;margin:-1rem 0 1.5rem;padding:.6rem .9rem;border-left:4px solid var(--amber);background:#FFF6E6;color:var(--deep)}
.step[hidden]{display:none}
.step h2{font-size:1.5rem}
.tasklist{display:grid;gap:.6rem;max-width:40rem;margin:1rem 0}
.tasklist .t{display:flex;gap:.5rem}
.field{flex:1;font:inherit;font-size:1.02rem;padding:.7rem .9rem;border:2px solid var(--field);border-radius:6px;background:#fff;color:var(--ink)}
.field:focus{border-color:var(--teal);outline:none;box-shadow:0 0 0 3px rgba(227,161,59,.5)}
.iconbtn{font-family:var(--sans);background:none;border:2px solid var(--field);border-radius:6px;color:var(--muted);padding:0 .8rem;cursor:pointer;font-size:.9rem}
.iconbtn:hover{border-color:var(--teal);color:var(--deep)}
.linkbtn{background:none;border:0;padding:0;font:inherit;font-family:var(--sans);font-size:.95rem;color:var(--teal);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.navrow{display:flex;flex-wrap:wrap;gap:1rem 1.5rem;align-items:center;margin-top:1.75rem}
.btn-secondary{background:#fff;color:var(--deep);border:2px solid var(--teal)}
.btn-secondary:hover{background:var(--mist)}
.err{font-family:var(--sans);font-size:.92rem;color:#9A3412;min-height:1.4em;margin:.5rem 0 0}
.qcard{border:2px solid var(--line);border-radius:10px;padding:1rem 1.2rem;margin:0 0 .9rem;max-width:46rem}
.qcard legend{font-family:var(--sans);font-weight:700;color:var(--deep);padding:0 .3rem;font-size:1.02rem}
.qrow{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1rem;margin:.35rem 0;font-size:.98rem}
.qrow .q{flex:1 1 18rem}
.seg{display:inline-flex;border:2px solid var(--teal);border-radius:6px;overflow:hidden}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label{font-family:var(--sans);font-size:.85rem;font-weight:600;padding:.4rem .8rem;cursor:pointer;color:var(--deep);background:#fff}
.seg label+input+label{border-left:2px solid var(--teal)}
.seg input:checked+label{background:var(--teal);color:#fff}
.seg input:focus-visible+label{outline:3px solid var(--amber);outline-offset:-3px}
.badge{display:inline-block;font-family:var(--sans);font-size:.8rem;font-weight:700;padding:.2rem .6rem;border-radius:999px;background:var(--mist);color:var(--muted);margin-top:.4rem}
.badge.r1{background:#E4E7E6;color:#3C4847}.badge.r2{background:#D5E4E1;color:var(--deep)}.badge.r3{background:var(--teal);color:#fff}.badge.r4{background:#F6E3BF;color:#6B4A0E}
.checks{display:grid;gap:.5rem;max-width:40rem;margin:1rem 0}
.checks label{display:flex;gap:.7rem;align-items:center;border:2px solid var(--field);border-radius:8px;padding:.6rem .9rem;cursor:pointer;font-size:1rem}
.checks input{width:1.15rem;height:1.15rem;accent-color:var(--teal)}
.checks label:has(input:checked){border-color:var(--teal);background:var(--mist)}
.edge{border:0;padding:0;margin:0 0 1.4rem;max-width:44rem}
.edge legend{font-family:var(--sans);font-weight:700;color:var(--deep);font-size:1.05rem}
.edge p{font-size:.98rem;margin:.15rem 0 .5rem;color:var(--muted)}
.scale{display:flex;gap:.4rem}
.scale input{position:absolute;opacity:0;pointer-events:none}
.scale label{width:2.6rem;height:2.6rem;display:grid;place-items:center;border:2px solid var(--teal);border-radius:6px;font-family:var(--sans);font-weight:600;color:var(--deep);cursor:pointer;background:#fff}
.scale input:checked+label{background:var(--teal);color:#fff}
.scale input:focus-visible+label{outline:3px solid var(--amber);outline-offset:2px}
.scalehint{font-family:var(--sans);font-size:.8rem;color:var(--muted);margin-top:.3rem}
.result{max-width:60rem}
.result .rooms{margin:1rem 0 1.5rem}
.result .room{cursor:default;min-height:8.5rem}
.chips{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.5rem}
.chip{font-family:var(--sans);font-size:.8rem;background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:.2rem .6rem;color:var(--ink)}
.chip.core{border-color:var(--amber);background:#FFF6E6;font-weight:600}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin:1rem 0 1.5rem}
.facts div{border-top:3px solid var(--teal);padding-top:.7rem}
.facts b{display:block;font-family:var(--sans);font-size:1.6rem;color:var(--deep);line-height:1.2}
.facts span{font-size:.95rem;color:var(--muted)}
.sentence{font-family:var(--sans);font-size:1.05rem;line-height:2.2;max-width:46rem}
.sentence input{font:inherit;border:0;border-bottom:2px solid var(--teal);background:transparent;padding:0 .2rem;min-width:9rem}
.sentence input:focus{outline:none;border-bottom-color:var(--amber)}
.private{font-family:var(--sans);font-size:.85rem;color:var(--muted)}
@media (max-width:620px){
  .rooms{grid-template-columns:1fr 1fr}
  .rooms .rowh,.rooms .colh,.rooms .corner{display:none}
  .facts{grid-template-columns:1fr}
}
@media print{
  .top,footer,.steps,.navrow,.noprint,.skip{display:none!important}
  body{font-size:11pt}
  .page{padding:0}
  .step[hidden]{display:none}
  .room,.qcard,.chip{break-inside:avoid}
}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.audit section.step{padding:0}
.sentence #why{width:min(30rem,100%)}
.facts .k{display:block;font-family:var(--sans);font-size:.85rem;font-weight:600;color:var(--muted);margin-bottom:.15rem}
.facts span:not(.k){display:block;line-height:1.5;margin-top:.3rem}
@page{size:A4;margin:14mm}
@media print{
  ::placeholder{color:transparent}
  .sentence{display:none}
  #sentprint{font-size:1rem;color:var(--ink)}
  .printnote{display:block!important}
}
.printnote{display:none;font-family:var(--sans);font-size:.85rem;color:var(--muted);margin-top:1.5rem}
@media print{
  body{font-size:9.5pt;line-height:1.4}
  .audit h1{font-size:18pt;margin-bottom:.3em}
  .audit .lead{display:none}
  .audit .step h2{font-size:13pt;margin:.4em 0 .3em}
  .audit h3{font-size:11pt;break-after:avoid;page-break-after:avoid;margin:.8em 0 .3em}
  .result .rooms{gap:.3rem;margin:.4rem 0 .6rem}
  .result .room{min-height:0;padding:.45rem .65rem}
  .result .room b{font-size:9.5pt}
  .result .room span{font-size:8.5pt}
  .chip{font-size:7.5pt;padding:.1rem .45rem}
  .facts{gap:1rem;margin:.6rem 0 .8rem;break-inside:avoid;page-break-inside:avoid}
  .facts b{font-size:13pt}
  .facts span{font-size:8.5pt}
  #sentprint,.printnote{break-before:avoid;page-break-before:avoid}
}
.rooms{grid-template-rows:auto 1fr 1fr}
.rooms .rowh{line-height:1.2;max-height:100%;overflow-wrap:normal}
button.room{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch}
.author .portrait{width:180px;height:180px;border-radius:50%;object-fit:cover;background:#E3ECEA;margin-top:.3rem}
.author .profile a{display:inline-block;font-family:var(--sans);font-weight:600;font-size:.98rem;color:var(--deep);border:2px solid var(--teal);border-radius:6px;padding:.6rem 1rem;text-decoration:none}
.author .profile a:hover{background:var(--mist)}
@media (max-width:860px){.author .portrait{width:120px;height:120px}}

/* ---------- the career view: hours, drift, direction, the first Shift ---------- */
.tasklist .t{flex-wrap:wrap;align-items:center}
.tasklist .t>.field{flex:1 1 14rem}
.hrsbox{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--sans);font-size:.85rem;color:var(--muted)}
.field.hrs{flex:0 0 5rem;width:5rem;padding:.7rem .5rem;text-align:center}
.tasklist .iconbtn{align-self:stretch;min-height:2.9rem}
.drift .qrow{border-top:1px dashed var(--line);padding-top:.45rem;margin-top:.5rem}
.chip .h{color:var(--muted);font-weight:400}
.chip.moving{border-style:dashed;border-color:var(--amber)}
.chip .to{color:#6B4A0E;font-weight:600;white-space:nowrap}
.result .facts{grid-template-columns:repeat(2,1fr);gap:1.25rem 2rem}
.result h3{margin-top:1.75rem}
.result h3.first{margin-top:.5rem}
.destrolebox{max-width:40rem;margin:1rem 0 1.25rem}
.destrolebox label,.dlabel,.pf label{display:block;font-family:var(--sans);font-weight:600;font-size:.95rem;color:var(--deep);margin-bottom:.35rem}
.destrolebox .field{width:100%}
#desttasks .qcard .field{width:100%;margin-bottom:.4rem}
.destrole{font-family:var(--sans);font-size:1.02rem;margin-bottom:.4rem}
.destrole .k{font-weight:600;color:var(--muted)}
.destlist{list-style:none;padding:0;margin:.4rem 0 .6rem;display:flex;flex-wrap:wrap;gap:.4rem 1.25rem;font-family:var(--sans);font-size:.92rem}
.destlist .badge{margin:0 0 0 .25rem}
.dir{font-size:1rem}
.plan{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem 1.5rem;max-width:60rem}
.plan textarea{width:100%;resize:vertical;font-size:.98rem;line-height:1.45}
.since{font-size:1rem}
@media (max-width:860px){.plan{grid-template-columns:1fr}}
@media (max-width:620px){.result .facts{grid-template-columns:1fr}}
@media print{
  .result h3{margin:.55em 0 .2em}
  .result h3.first{margin-top:.2em}
  .result .facts{grid-template-columns:repeat(4,1fr);gap:.7rem}
  .legend{font-size:7.5pt;margin:0 0 .3rem}
  .plan{display:block}
  .plan label,.plan textarea{display:none}
  .pv{margin:.1rem 0 0;font-size:9pt;color:var(--ink)}
  .pv b{font-family:var(--sans)}
  .destrole,.dir,.since,#sentprint{font-size:9pt;margin:.15rem 0}
  .destlist{font-size:8.5pt;margin:.2rem 0}
  .destlist .badge{font-size:7pt;padding:.05rem .4rem}
  .printnote{margin-top:.5rem}
  .chip.moving{border-style:dashed}
}
.room .chip .h,.room .chip .to{display:inline;font-size:inherit;line-height:inherit}
.room .chip .h{color:var(--muted)}
.room .chip .to{color:#6B4A0E}
.result .destlist{padding-left:0}
@media print{.result .printnote:last-child{font-size:7.5pt}}
@media (max-width:620px){.rooms{grid-template-rows:auto}}
/* the author photo, shown whole and uncropped */
.author .portrait{width:280px;height:auto;aspect-ratio:3/4;border-radius:10px;object-fit:contain;background:none;margin-top:.3rem}
@media (max-width:860px){.author .portrait{width:min(280px,100%);height:auto}}

/* ---------- touch screens: every tap target at least 44px, and no iOS zoom on focus ---------- */
@media (pointer:coarse), (max-width:860px){
  .nav a,footer .fl a,.textlink,.linkbtn{display:inline-flex;align-items:center;min-height:44px}
  .nav ul{row-gap:0}
  .btn-ghost{min-height:44px}
  .seg label{display:inline-flex;align-items:center;min-height:44px}
  .scale label{width:2.75rem;height:2.75rem}
  .iconbtn{min-height:44px}
}
input,textarea,select,.plan textarea,.sentence input{font-size:max(16px,1em)}
.plan textarea{font-size:1rem}
@media (max-width:480px){
  .tasklist .t{gap:.4rem .5rem}
  .field.hrs{flex-basis:4.2rem;width:4.2rem}
  .hrsbox{gap:.35rem;font-size:.8rem}
  .tasklist .iconbtn{padding:0 .6rem;margin-left:auto}
}
@media (max-width:480px){.tasklist{gap:1.1rem}}

/* ---------- back to top ---------- */
.totop{position:fixed;right:max(1rem,env(safe-area-inset-right));bottom:max(1rem,env(safe-area-inset-bottom));z-index:20;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--teal);color:#fff;box-shadow:0 2px 10px rgba(20,63,60,.3);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s,transform .2s,visibility .2s}
.totop.show{opacity:1;visibility:visible;transform:none}
.totop:hover{background:var(--deep);color:#fff}
.totop:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.totop{transition:none}}
@media print{.totop,.toplink{display:none!important}}
footer .fl{align-items:center}
footer .toplink{display:inline-flex;align-items:center;gap:.3em}
.totop.atfoot{opacity:0;visibility:hidden;transform:translateY(8px)}

/* ---------- separate pages: current page, cards, pager ---------- */
.nav a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--amber);text-decoration-thickness:3px;text-underline-offset:8px}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;margin-top:1.75rem}
.card{position:relative;display:block;background:#fff;border:2px solid var(--teal);border-radius:10px;padding:1.25rem 1.25rem 2.75rem;text-decoration:none;color:var(--ink)}
.card h3{margin:0 0 .4rem}
.card p{font-size:1rem;margin:0;color:var(--muted)}
.card .go{position:absolute;left:1.15rem;bottom:.8rem;color:var(--teal);line-height:0}
.card:hover{background:var(--mist)}
.card:hover .go{color:var(--deep)}
.maptease{display:flex;flex-wrap:wrap;gap:1rem 2.5rem;align-items:center;justify-content:space-between}
.maptease p{margin-bottom:0}
.pager{display:flex;justify-content:space-between;gap:1rem;border-top:2px solid var(--line);margin-top:3.5rem;padding-top:1.25rem;font-family:var(--sans)}
.pager a{display:inline-flex;flex-direction:column;text-decoration:none;color:var(--deep);font-weight:600;font-size:1.05rem;min-height:44px;justify-content:center}
.pager a span{font-weight:500;font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.pager a.next{text-align:right;margin-left:auto}
.pager a:hover{text-decoration:underline}
.pager a.prev span{margin-left:0}
.res{padding-left:1.2rem}
.res li{margin-bottom:.6rem}
.page .author{margin-top:.5rem}
.page .author h1{margin-top:0}
.page .method{margin-top:2rem}
@media (max-width:860px){.cards{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.cards{grid-template-columns:1fr}}
@media print{.pager{display:none}}
.page.signup h1{max-width:none}
@media (pointer:coarse), (max-width:860px){.res a{display:inline-block;padding:.7rem 0}.res li{margin-bottom:.2rem}}

/* ---------- ratchet explainer, lesson plan, early-reader option ---------- */
.rowhint{color:#E1ECEA;font-family:var(--sans);font-size:.95rem;max-width:44rem;margin:2.5rem 0 0}
.rowhint+.row{margin-top:1.25rem}
.no-js #clickit{display:none}
.no-js .row .floor{transform:translateX(360px)}
.no-js .row .c1,.no-js .row .c2,.no-js .row .c3{opacity:.22}
.no-js .row .top4 line{stroke:var(--amber)} .no-js .row .top4 circle{fill:var(--amber)}
.lesson{max-width:var(--read);padding-left:1.3rem}
.lesson li{margin-bottom:.6rem}
.lesson b{font-family:var(--sans);font-weight:600;color:var(--deep);font-size:.98rem}
.signup .optin{flex-basis:100%;display:flex;gap:.6rem;align-items:flex-start;font-family:var(--serif);font-weight:400;font-size:1rem;color:var(--ink);cursor:pointer;min-height:44px;padding-top:.3rem}
.signup .optin input{width:1.2rem;height:1.2rem;margin-top:.2rem;accent-color:var(--teal);flex:none}
.no-js .jsonly{display:none}

/* ---------- adapt to the screen: scale smoothly on large monitors ---------- */
/* 16px up to about 1280px wide, then grows with the screen to 21px at about 2180px and above.
   Everything sized in rem (page width, line length, spacing, type) scales with it, so the line
   length in characters stays comfortable while large screens are used properly. Phones and tablets are unchanged. */
html{font-size:clamp(100%, calc(0.55vw + 9px), 131.25%)}
.nav .logo img{width:12.5rem}
footer img{width:9.375rem}
.author .portrait{width:17.5rem}
@media (max-width:620px){.nav .logo img{width:170px}}
@media (max-width:860px){.author .portrait{width:min(17.5rem,100%)}}

/* ---------- side panels on wide screens, stacked on narrow ones ---------- */
.twocol{display:grid;gap:2rem}
.sidepanel{background:var(--mist);border-top:4px solid var(--teal);border-radius:10px;padding:1.3rem 1.5rem 1.1rem}
.sidepanel h2{margin:0 0 .6rem;font-size:1.15rem}
.sidepanel ul{list-style:none;padding:0;margin:0}
.sidepanel li{font-size:.95rem;line-height:1.55;margin:0 0 .75rem}
.sidepanel li b{font-family:var(--sans);font-weight:600;color:var(--deep);font-size:.92rem}
.sidepanel .linkbtn{font-size:.92rem}
.page .sidepanel .res{padding-left:1.1rem;list-style:disc}
.intro .lead{margin-bottom:0}
.mappreview{margin:0}
.mappreview img{width:100%;max-width:22rem;border:1px solid var(--line);border-radius:6px;box-shadow:0 6px 24px rgba(20,63,60,.12)}
.mappreview figcaption{font-family:var(--sans);font-size:.85rem;color:var(--muted);margin-top:.6rem}
@media (min-width:1000px){
  .twocol{grid-template-columns:minmax(0,1fr) minmax(17rem,23rem);gap:3.5rem;align-items:start}
  .twocol.intro{margin-bottom:.5rem}
  .page.signup .twocol{grid-template-columns:minmax(0,40rem) minmax(16rem,22rem)}
}
@media (max-width:999px){.mappreview img{max-width:16rem}}
@media print{.twocol{display:block}}
.page.signup .twocol{max-width:none}
.page.signup .formcol>*{max-width:40rem}
@media (pointer:coarse), (max-width:860px){.sidepanel li a{display:inline-block;padding:.65rem 0}.sidepanel li{margin-bottom:.4rem}}

/* ---------- one typeface per job: serif for reading, Montserrat for panels, labels and controls ---------- */
.sidepanel{font-family:var(--sans)}
.sidepanel li,.sidepanel p{font-family:var(--sans);font-size:.9rem;line-height:1.6;color:var(--ink)}
.sidepanel li b{font-size:inherit;font-weight:700}
.sidepanel a,.sidepanel .linkbtn{font-family:inherit;font-size:inherit;font-weight:500}
/* a link-style button inside a sentence matches the sentence around it */
p .linkbtn,li .linkbtn{font-family:inherit;font-size:inherit}

/* ---------- Audit: start from your role ---------- */
.rolepick{background:var(--mist);border-radius:10px;border-top:4px solid var(--amber);padding:1.2rem 1.4rem 1rem;margin:1.25rem 0 1.5rem;max-width:46rem;font-family:var(--sans)}
.rplabel{display:block;font-weight:700;color:var(--deep);font-size:1.02rem;margin-bottom:.25rem}
.rplabel span{font-weight:500;color:var(--muted);font-size:.9rem}
.rphint{font-size:.9rem;color:var(--ink);margin:0 0 .75rem;max-width:none}
.rolepick .field{width:100%;font-family:var(--sans)}
.rpsub{font-size:.85rem;color:var(--muted);margin:.8rem 0 .4rem}
.rpchips{display:flex;flex-wrap:wrap;gap:.45rem}
.rpchip{font:inherit;font-size:.9rem;font-weight:600;color:var(--deep);background:#fff;border:2px solid var(--teal);border-radius:8px;padding:.45rem .9rem;cursor:pointer;text-align:left}
.rpchip:hover{background:var(--teal);color:#fff}
.rpnone{font-size:.9rem;color:var(--ink);margin:.8rem 0 0}
.rptasks{border:0;padding:0;margin:.9rem 0 0}
.rptasks legend{font-weight:700;color:var(--deep);font-size:.98rem;padding:0}
.rpgrid{display:grid;grid-template-columns:1fr 1fr;gap:.4rem .9rem;margin-top:.2rem}
.rpgrid label{display:flex;gap:.55rem;align-items:flex-start;background:#fff;border:1.5px solid var(--line);border-radius:8px;padding:.5rem .7rem;font-size:.9rem;cursor:pointer;line-height:1.35}
.rpgrid input{width:1.1rem;height:1.1rem;margin-top:.05rem;accent-color:var(--teal);flex:none}
.rpgrid label:has(input:checked){border-color:var(--teal);background:#F4FAF9}
.rpgrid label.dup{opacity:.6;cursor:default}
.rpgrid em{font-style:normal;color:var(--muted);font-size:.8rem}
.rpactions{display:flex;flex-wrap:wrap;gap:.8rem 1.4rem;align-items:center;margin-top:1rem}
.rpstatus{font-size:.9rem;color:var(--deep);font-weight:600;margin:.6rem 0 0;min-height:0}
.rpstatus:empty{display:none}
@media (max-width:620px){.rpgrid{grid-template-columns:1fr}.rolepick{padding:1rem}}
@media (pointer:coarse), (max-width:860px){.rpchip{min-height:44px}.rpgrid label{min-height:44px;align-items:center}}
@media print{.rolepick{display:none}}