/* How it pays: a lagoon band on top, then eight parts on the white of the salt, text and figure side by side. */

html{scroll-padding-top:28px}
.guide-page{background:var(--pearl);color:var(--navy)}

/* ---------- the band ---------- */
.stage.guide-hero{position:relative;height:clamp(330px,52vh,460px);overflow:visible;isolation:isolate}
.guide-hero .bg{overflow:hidden}
.guide-hero .bg video{object-position:60% 30%}
.guide-hero .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to top, rgba(251,248,245,1) 0, rgba(251,248,245,.86) 20%, rgba(251,248,245,0) 58%)}
.guide-title{position:absolute;left:max(24px, calc((100% - 1180px) / 2));right:24px;bottom:18px}
.guide-title h1{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(42px,5.4vw,68px);line-height:1.05;letter-spacing:.012em}
.guide-title p{margin:10px 0 0;font-size:clamp(17px,1.5vw,21px);line-height:1.35}

/* ---------- the rail: eight suckers that fill as you read ---------- */
.rail{position:fixed;z-index:8;top:50%;right:max(14px, calc((100vw - 1320px) / 2));transform:translateY(-50%);display:grid;gap:10px;padding:10px 8px;border-radius:16px;background:#fff;box-shadow:0 8px 24px rgba(26,48,88,.12),inset 0 0 0 1px rgba(26,48,88,.14)}
.rail a{position:relative;display:block;width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(23,73,168,.45);background:rgba(23,73,168,.07);transition:background-color .3s,box-shadow .3s,transform .3s}
.rail a.is-read{background:rgba(31,102,224,.38);box-shadow:inset 0 0 0 1.5px rgba(23,73,168,.5)}
.rail a.is-active{background:var(--sucker);box-shadow:inset 0 0 0 1.5px #0f3f9f;transform:scale(1.22)}
.rail a span{position:absolute;right:28px;top:50%;transform:translateY(-50%);padding:6px 11px 4px;border-radius:9px;background:var(--navy);color:#fff;font-size:14px;line-height:1.2;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s}
.rail a:hover span,.rail a:focus-visible span{opacity:1}
.rail :focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* ---------- parts ---------- */
.guide{width:min(1180px, 100% - 48px);margin:0 auto;padding:clamp(28px,5vw,64px) 0 clamp(40px,6vw,80px)}
.part{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center;gap:clamp(24px,5vw,72px);padding:clamp(34px,5vw,64px) 0}
.part + .part{border-top:1px solid rgba(26,48,88,.16)}
.part:nth-of-type(even) .part-fig{order:-1}
.part-n{margin:0;display:flex;align-items:center;gap:10px;font-size:16px;line-height:1;color:rgba(26,48,88,.78)}
.part-n i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--sucker);color:#fff;font-style:normal;font-size:15px;padding-top:2px}
.part h2{margin:14px 0 0;font-family:var(--display);font-weight:400;font-size:clamp(30px,3.6vw,46px);line-height:1.1;letter-spacing:.012em}
.part-text > p{margin:16px 0 0;font-size:18px;line-height:1.6}
.part-text > p.lead{margin-top:20px}
.part-text ul{list-style:none;margin:18px 0 0;padding:0;border-top:1px solid rgba(26,48,88,.16)}
.part-text li{padding:12px 0 11px;border-bottom:1px solid rgba(26,48,88,.16);font-size:17px;line-height:1.5}
.part-text li b{font-weight:700}

.part-fig{margin:0;min-width:0;border-radius:16px;background:var(--deep) radial-gradient(70% 70% at 50% 44%, #2a68da 0%, rgba(42,104,218,0) 74%);color:#fff;overflow:hidden}
.fig-scroll{overflow-x:auto;scrollbar-width:none}
.fig-scroll::-webkit-scrollbar{display:none}
.part-fig svg.fig{display:block;width:100%;min-width:480px;height:auto}
.part-fig figcaption{padding:12px 20px 14px;border-top:1px solid rgba(255,255,255,.2);font-size:15px;line-height:1.4;color:rgba(255,255,255,.88)}
.part-fig .plate{max-width:440px}
.guide :focus-visible{outline-color:var(--blue)}
.words h2{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(30px,3.6vw,46px);line-height:1.1;letter-spacing:.012em}

.fig text{fill:#fff;font:400 16px "OF Text","Helvetica Neue",Helvetica,Arial,sans-serif}
.fig .dim{fill:rgba(255,255,255,.78)}
.fig .ink{fill:var(--navy)}
.fig .num{font:400 30px "OF Display","OF Text",sans-serif;letter-spacing:.3px}
.fig .num-s{font:400 22px "OF Display","OF Text",sans-serif}
.fig .ln{fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.fig .ln-dim{fill:none;stroke:rgba(255,255,255,.5);stroke-width:1.5;stroke-linecap:round}
.fig .dash{stroke-dasharray:4 6}
.fig .pearl{fill:#f7f0f2}
.fig .pale{fill:rgba(255,255,255,.2)}
.fig .lit{fill:#8fb8ff}
.fig .suck{fill:var(--sucker);stroke:#0f3f9f;stroke-width:1.2}
.fig .suck-empty{fill:rgba(23,73,168,.1);stroke:rgba(23,73,168,.35);stroke-width:1.2}

/* ---------- a few words, and the way out ---------- */
.words{display:block}
.words dl{margin:20px 0 0;border-top:1px solid rgba(26,48,88,.16)}
.words dl div{display:grid;grid-template-columns:180px minmax(0,1fr);gap:24px;padding:13px 0 12px;border-bottom:1px solid rgba(26,48,88,.16);font-size:17px;line-height:1.5}
.words dt{font-weight:700}
.words dd{margin:0}
.page-cta{display:flex;flex-wrap:wrap;gap:8px;padding:clamp(28px,4vw,48px) 0 0}

@media (max-width:1279.98px){
  .rail{position:sticky;top:10px;right:auto;transform:none;display:flex;gap:12px;width:max-content;margin:14px auto 0;padding:9px 14px;border-radius:999px}
  .rail a span{display:none}
}
@media (max-width:899.98px){
  .part{grid-template-columns:minmax(0,1fr);gap:22px}
  .part:nth-of-type(even) .part-fig{order:0}
  .part-fig{margin:0 -10px}
  .words dl div{grid-template-columns:minmax(0,1fr);gap:2px}
}
@media (max-width:599.98px){
  .stage.guide-hero{height:clamp(300px,46vh,380px)}
  .guide-title{left:20px;right:20px}
  .guide{width:calc(100% - 40px)}
  .part-text > p{font-size:17px}
}
@media (prefers-reduced-motion:reduce){
  .rail a,.rail a span{transition:none}
}