:root{--navy:#0b1220;--panel:#152338;--paper:#f1efe9;--ink:#182837;--muted:#445765;--cream:#f4f2ec;--gold:#f6be71;--line:#c5ccc9;--dark-line:#374a61;--wrap:1120px}
*{box-sizing:border-box}
body{margin:0;background:var(--navy);color:var(--cream);font:16px/1.6 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
a{color:inherit;text-underline-offset:.2em}
a:focus-visible,summary:focus-visible{outline:3px solid #aa641f;outline-offset:4px}
.masthead a:focus-visible,.hero a:focus-visible,.footer a:focus-visible{outline-color:var(--gold)}
.wrap{width:min(var(--wrap),calc(100% - 96px));margin-inline:auto}
.skip{position:fixed;z-index:2;top:8px;left:8px;transform:translateY(-140%);padding:10px 15px;background:var(--gold);color:var(--navy)}
.skip:focus{transform:none}
.masthead-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:78px;border-bottom:1px solid var(--dark-line)}
.brand,.masthead nav a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.brand{gap:11px;font-size:.76rem;font-weight:750;text-transform:uppercase;letter-spacing:.09em}
.brand span{display:grid;place-items:center;flex:0 0 29px;width:29px;height:29px;border:1px solid #bd925d;color:var(--gold)}
.masthead nav{display:flex;flex-wrap:wrap;column-gap:20px;font-size:.88rem;color:#c2cfdc}
.masthead a:hover,.footer a:hover{text-decoration:underline}
.hero{background:radial-gradient(ellipse at 77% 65%,#17263c 0,transparent 55%);padding:clamp(45px,8vw,105px) 0}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(30px,6vw,90px);align-items:center}
.kicker,.step-label,.notice-label{margin:0 0 13px;color:#82551f;font-size:.7rem;font-weight:750;text-transform:uppercase;letter-spacing:.12em}
.hero .kicker{color:var(--gold)}
h1,h2,h3,blockquote{font-family:Georgia,Cambria,"Times New Roman",serif}
h1{margin:0;font-size:clamp(3.1rem,6.2vw,6rem);font-weight:500;line-height:1.01;letter-spacing:-.052em;text-wrap:balance}
h1 em{display:block;color:var(--gold);font-weight:400}
h2{margin:0 0 19px;font-size:clamp(2.1rem,4.6vw,3.6rem);font-weight:500;line-height:1.1;letter-spacing:-.034em;text-wrap:balance}
.intro{max-width:46ch;margin:22px 0 27px;color:#c1cedc;font-size:1.05rem;line-height:1.75}
.action{display:inline-flex;align-items:center;justify-content:space-between;gap:16px;min-height:48px;padding:10px 15px;border-radius:4px;background:var(--gold);color:#152132;font-size:.91rem;font-weight:720;text-decoration:none}
.action:hover{background:#ffd498}
.dispatch{min-width:0;margin:0;border:1px solid #465972;border-radius:9px;background:#142237;box-shadow:0 22px 65px #0004;overflow:hidden}
.dispatch-top{display:flex;justify-content:space-between;gap:8px 12px;flex-wrap:wrap;padding:15px clamp(14px,3vw,27px);border-bottom:1px solid var(--dark-line);color:#c7d2dd;font-size:.67rem;text-transform:uppercase;letter-spacing:.09em}
.dispatch-top span:last-child{color:var(--gold)}
.dispatch-body{position:relative;isolation:isolate;padding:clamp(24px,5vw,47px) clamp(17px,4vw,35px);background:radial-gradient(circle,#a4bdd52c 1px,transparent 1.1px) 0 0 / 13px 13px}
.dispatch-body::before{position:absolute;inset:0;z-index:-1;background:linear-gradient(120deg,#142237 17%,#14223755 85%);content:""}
.dispatch-icon{display:block;width:44px;margin-bottom:14px;color:var(--gold)}
.dispatch blockquote{max-width:15ch;margin:0;font-size:clamp(1.7rem,3.4vw,2.9rem);line-height:1.13;letter-spacing:-.027em}
.dispatch figcaption{padding:14px clamp(14px,3vw,27px);border-top:1px solid var(--dark-line);color:#c7d2dd;font-size:.84rem}
.paper{background:var(--paper);color:var(--ink)}
.story-wrap{max-width:960px}
.step-nav{border-bottom:1px solid var(--line)}
.step-nav ol{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));list-style:none;padding:0;margin:0}
.step-nav li{border-right:1px solid var(--line)}
.step-nav li:last-child{border:0}
.step-nav a{display:flex;align-items:center;min-height:56px;gap:9px;padding:10px clamp(8px,2vw,16px);text-decoration:none;font-size:.86rem;font-weight:650;line-height:1.25}
.step-nav a:hover{background:#e7e4db;text-decoration:underline}
.step-nav span{color:#82551f;font-size:.72rem}
.story{padding:clamp(47px,7vw,84px) 0 clamp(37px,6vw,62px);scroll-margin-top:20px}
.story-lead,.exercise-copy>p:last-child{max-width:62ch;color:var(--muted);margin:0}
.timeline{margin:36px 0 26px;padding:0;list-style:none}
.timeline>li{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);gap:20px;padding-bottom:29px;scroll-margin-top:22px}
.timeline>li:not(:last-child)::before{position:absolute;top:40px;bottom:0;left:21px;width:1px;background:#b1bcbf;content:""}
.timeline>li:last-child{padding-bottom:0}
.timeline>li:target .step-number{background:#f2d6a9;color:var(--ink);border-color:#9d6d39}
.step-number{display:grid;place-items:center;width:44px;height:44px;border:1px solid #9caeb7;border-radius:50%;color:#784b1c;background:#e6e7df;font-size:.8rem;font-weight:750}
.step-label{margin:1px 0 5px}
.timeline h3{margin:0 0 6px;font-size:clamp(1.3rem,3vw,1.7rem);font-weight:600;line-height:1.23}
.timeline li p:last-child{max-width:62ch;margin:0;color:var(--muted)}
.distinction{max-width:73ch;padding:16px 20px;border-left:3px solid #956129;background:#e5e3da;color:#314757;font-size:.91rem}
.distinction strong{display:block;margin-bottom:4px;color:var(--ink)}
.exercise{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,6vw,63px);align-items:start;border-block:1px solid var(--line);padding:clamp(32px,6vw,65px) 0}
.exercise h2{font-size:clamp(1.9rem,4vw,2.85rem)}
.notice{border:1px solid #465972;border-radius:6px;background:var(--panel);color:var(--cream)}
.notice summary{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:52px;padding:12px 16px;list-style:none;cursor:pointer;font-size:.93rem;font-weight:720;color:var(--gold)}
.notice summary::-webkit-details-marker{display:none}
.notice summary:focus-visible{outline-color:#aa641f}
.summary-icon::before{display:block;font-size:1.4rem;line-height:1;content:"+"}
.notice[open] .summary-icon::before{content:"−"}
.notice:not([open]) .hide-label,.notice[open] .show-label{display:none}
.notice-body{border-top:1px solid var(--dark-line);padding:15px 17px}
.notice-label{color:#cfaa7a}
.notice blockquote{margin:0;font-size:clamp(1.15rem,2.1vw,1.48rem);line-height:1.35}
.notice-body p:last-child{margin:10px 0 0;color:#c2cfdd;font-size:.85rem}
.takeaway{padding:clamp(39px,7vw,78px) 0}
.check-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;list-style:none;padding:0;margin:24px 0 20px;counter-reset:check}
.check-grid li{padding:15px;border:1px solid var(--line);border-top:2px solid #a57442;background:#e7e6df;counter-increment:check}
.check-grid li::before{display:block;margin-bottom:7px;color:#82551f;font-size:.73rem;font-weight:750;content:counter(check,decimal-leading-zero)}
.check-grid li strong,.check-grid li span{display:block}
.check-grid li span{margin-top:5px;color:var(--muted);font-size:.9rem}
.next-links{display:flex;flex-wrap:wrap;gap:3px 20px}
.next-links a{display:inline-flex;align-items:center;gap:7px;min-height:44px;font-size:.89rem;font-weight:680;color:#754a20}
.footer{padding:24px 0;color:#b8c7d6;font-size:.81rem}
.footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 25px}
.footer a{color:var(--gold)}
@media(max-width:760px){
  .wrap{width:calc(100% - 38px)}
  .hero-grid,.exercise{grid-template-columns:1fr}
  .dispatch{max-width:520px}
  .step-nav ol{grid-template-columns:repeat(2,minmax(0,1fr))}
  .step-nav li:nth-child(2){border-right:0}
  .step-nav li:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .step-nav a{min-height:46px}
  .check-grid{grid-template-columns:1fr;gap:9px}
}
@media(max-width:440px){
  .masthead-inner{display:block;padding:8px 0}
  .masthead nav{gap:15px}
  .timeline>li{grid-template-columns:34px minmax(0,1fr);gap:12px}
  .timeline>li:not(:last-child)::before{top:32px;left:16px}
  .step-number{width:34px;height:34px}
}
@media(prefers-reduced-motion:no-preference){
  .notice[open] .notice-body{animation:notice-in .2s ease-out 1}
  .step-in-view>.step-number{animation:step-accent .5s ease-out 1}
  @keyframes notice-in{from{transform:translateY(-2px);opacity:.83}to{transform:none;opacity:1}}
  @keyframes step-accent{45%{background:#f2d6a9}}
}