/* piiholozipline.com - Pacific glide
   Archetype: full-bleed photographic plate + survey ledger
   Palette sampled from the hero photograph */

:root{
  --ink:#06323c;
  --ink-soft:#3d6771;
  --deep:#0a5f8f;
  --turq:#0e9aa1;
  --turq-lit:#19bfc2;
  --sea-deep:#0b7d86;
  --shallow:#a9e7e1;
  --sand:#f2e7d0;
  --sand-deep:#e3d1ad;
  --foam:#fbfdfc;
  --paper:#ffffff;
  --rule:#d6e3e2;

  --display:"Prata",Georgia,"Times New Roman",serif;
  --body:"Onest",system-ui,-apple-system,"Segoe UI",sans-serif;

  --gut:clamp(1.25rem,4vw,4.5rem);
  --measure:66ch;
}

@font-face{font-family:"Prata";src:url("/assets/fonts/prata-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Onest";src:url("/assets/fonts/onest-var.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;min-width:260px;
  background:var(--foam);color:var(--ink);
  font-family:var(--body);font-size:clamp(1rem,.35vw + .95rem,1.0625rem);
  font-weight:400;line-height:1.62;
  font-variant-numeric:tabular-nums;
  overflow-x:clip;
}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit}

/* ---------- the glide line: the site's signature ---------- */
.glide{position:fixed;top:0;left:max(1.1rem,2.4vw);width:1px;height:100vh;z-index:40;pointer-events:none}
.glide::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent,var(--shallow) 12%,var(--turq) 55%,transparent)}
.glide__car{
  position:absolute;left:-3.5px;top:0;width:8px;height:8px;border-radius:50%;
  background:var(--turq-lit);box-shadow:0 0 0 4px rgba(25,191,194,.18);
  transform:translateY(calc(var(--sp,0) * (100vh - 8px)));
}
@media (max-width:900px){.glide{display:none}}

/* ---------- shell ---------- */
.wrap{width:100%;max-width:1320px;margin-inline:auto;padding-inline:var(--gut)}
.eyebrow{
  font-size:.6875rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--turq);margin:0 0 1.1rem
}
.eyebrow--light{color:var(--shallow)}

/* ---------- masthead ---------- */
.mast{
  position:absolute;top:0;left:0;right:0;z-index:30;
  display:flex;align-items:center;gap:2rem;
  padding:1.35rem var(--gut);
}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--paper)}
.brand svg{width:34px;height:34px;flex:none}
.brand b{
  font-family:var(--display);font-weight:400;font-size:1.1875rem;letter-spacing:.02em;
  line-height:1;white-space:nowrap
}
.brand__txt{display:block}
.brand__txt span{
  display:block;font-size:.5625rem;font-weight:600;letter-spacing:.19em;text-transform:uppercase;
  color:var(--shallow);margin-top:.34rem
}
.nav{margin-left:auto;display:flex;gap:1.9rem}
.nav a{
  color:var(--paper);text-decoration:none;font-size:.78125rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;padding-block:.3rem;position:relative
}
.nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--turq-lit);
  transition:right .34s cubic-bezier(.22,.8,.26,1)
}
.nav a:hover::after,.nav a:focus-visible::after{right:0}
.burger{display:none}

/* ---------- hero plate ---------- */
.plate{position:relative;min-height:min(94svh,860px);display:flex;align-items:flex-end;isolation:isolate}
.plate__img{position:absolute;inset:0;z-index:-2}
.plate__img picture{display:block;width:100%;height:100%}
.plate__img img{width:100%;height:100%;object-fit:cover;object-position:54% 34%}
.plate::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(4,42,58,.5) 0,rgba(4,42,58,.1) 22%,transparent 40%),
    linear-gradient(2deg,rgba(3,30,42,.88) 0,rgba(3,30,42,.6) 22%,rgba(3,30,42,.16) 46%,transparent 66%);
}
.plate__body{padding-block:0 clamp(2.2rem,5.5vh,3.6rem)}
.plate h1{
  font-family:var(--display);font-weight:400;color:var(--paper);
  font-size:clamp(2.1rem,5.4vw,4.4rem);line-height:1.03;letter-spacing:-.015em;
  margin:0 0 1.3rem;max-width:24ch;
  text-wrap:balance;text-shadow:0 1px 32px rgba(3,28,40,.45)
}
.plate p{
  color:#e9f6f4;max-width:52ch;margin:0;font-size:clamp(1rem,.5vw + .9rem,1.1875rem);
  text-shadow:0 1px 18px rgba(3,28,40,.5)
}
.plate__meta{
  max-width:none;display:flex;flex-wrap:wrap;gap:.55rem 1.9rem;margin-top:2.1rem;
  font-size:.75rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--shallow)
}
.plate__meta b{color:var(--paper);font-weight:600}

/* ---------- figure strip ---------- */
.strip{background:var(--sand);border-block:1px solid var(--sand-deep)}
.strip ul{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
}
.strip li{padding:1.65rem 0;border-left:1px solid var(--sand-deep);padding-left:1.6rem}
.strip li:first-child{border-left:0;padding-left:0}
.strip dt{
  font-size:.6875rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:#786438;margin-bottom:.5rem
}
.strip dd{margin:0;font-family:var(--display);font-size:1.9rem;line-height:1;color:var(--ink)}
.strip dd small{font-family:var(--body);font-size:.8125rem;font-weight:500;color:var(--ink-soft);margin-left:.35rem}

/* ---------- sections ---------- */
.band{padding-block:clamp(3.4rem,8vw,6.4rem)}
.band--paper{background:var(--paper)}
.band__head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:1.2rem 2.5rem;margin-bottom:2.6rem}
.band__head h2{
  font-family:var(--display);font-weight:400;font-size:clamp(1.6rem,2.9vw,2.6rem);
  line-height:1.1;letter-spacing:-.01em;margin:0;max-width:30ch
}
.band__head p{margin:.65rem 0 0;color:var(--ink-soft);max-width:56ch}
.band__note{
  margin-left:auto;font-size:.6875rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);padding-bottom:.35rem
}

/* ---------- the ledger (course directory) ---------- */
.ledger-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ledger{width:100%;min-width:760px;border-collapse:collapse;font-size:.9375rem}
.ledger caption{text-align:left;font-size:.8125rem;color:var(--ink-soft);padding-bottom:1rem}
.ledger th{
  text-align:left;font-size:.6875rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--turq);padding:0 1.1rem .85rem 0;border-bottom:1px solid var(--turq)
}
.ledger td{padding:1.05rem 1.1rem 1.05rem 0;border-bottom:1px solid var(--rule);vertical-align:baseline}
.ledger tbody tr{transition:background .22s ease}
.ledger tbody tr:hover{background:#f4fbfa}
.ledger .course{font-family:var(--display);font-size:1.0625rem;line-height:1.25}
.ledger .course a{text-decoration:none;border-bottom:1px solid var(--shallow);padding-bottom:1px}
.ledger .course a:hover{border-bottom-color:var(--turq)}
.ledger .num{font-variant-numeric:tabular-nums;white-space:nowrap}
.ledger .isle{color:var(--ink-soft);font-size:.875rem}
.ledger .flag{
  display:inline-block;font-size:.625rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:#7a6634;background:var(--sand);border:1px solid var(--sand-deep);
  padding:.16rem .42rem;margin-left:.5rem;vertical-align:1px
}

/* ---------- records ---------- */
.records{background:linear-gradient(180deg,var(--foam),#eef7f6)}
.records ol{
  list-style:none;margin:0;padding:0;
  display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(215px,1fr))
}
.records li{padding:1.5rem 1.6rem 1.5rem 0;border-top:1px solid var(--rule)}
.records dt{font-size:.6875rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.records dd{margin:.7rem 0 0}
.records .big{font-family:var(--display);font-size:2.15rem;line-height:1;letter-spacing:-.01em}
.records .big em{font-family:var(--body);font-style:normal;font-size:.9375rem;font-weight:500;color:var(--ink-soft);margin-left:.3rem}
.records .where{display:block;margin-top:.5rem;font-size:.8125rem;color:var(--ink-soft)}

/* ---------- guides ledger ---------- */
.guides{list-style:none;margin:0;padding:0}
.guides li{border-top:1px solid var(--rule)}
.guides li:last-child{border-bottom:1px solid var(--rule)}
.guides a{
  display:grid;grid-template-columns:3.4rem 1fr auto;gap:.4rem 1.8rem;align-items:baseline;
  padding:1.55rem 0;text-decoration:none
}
.guides .fig{font-size:.75rem;font-weight:600;letter-spacing:.1em;color:var(--sea-deep)}
.guides h3{
  font-family:var(--display);font-weight:400;font-size:clamp(1.125rem,1.5vw,1.4375rem);
  line-height:1.24;margin:0 0 .45rem;letter-spacing:-.005em
}
.guides p{margin:0;color:var(--ink-soft);max-width:64ch;font-size:.9375rem}
.guides .read{
  font-size:.6875rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);
  white-space:nowrap
}
.guides a:hover h3{color:var(--turq)}
@media (max-width:640px){
  .guides a{grid-template-columns:1fr;gap:.3rem}
  .guides .read{order:3}
}

/* ---------- foot ---------- */
.foot{background:var(--ink);color:#cfe4e3;padding-block:clamp(2.8rem,6vw,4.4rem);margin-top:0}
.foot__grid{display:grid;gap:2.4rem;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.foot h4{font-size:.6875rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--shallow);margin:0 0 1rem}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;font-size:.9375rem}
.foot a{text-decoration:none;border-bottom:1px solid transparent}
.foot a:hover{border-bottom-color:var(--turq-lit)}
.foot__note{margin:2.8rem 0 0;padding-top:1.6rem;border-top:1px solid #17454f;font-size:.8125rem;color:#9dbdbd;max-width:70ch}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .glide__car{display:none}
}

/* --- hero composition fixes --- */
.plate__img img{object-position:38% 40%}
.plate h1{max-width:21ch}
.plate .plate__meta{max-width:none;flex-wrap:nowrap}
@media (max-width:760px){.plate .plate__meta{flex-wrap:wrap}}

/* ============ logo tokens + a11y ============ */
:root{--lg-key:#19bfc2;--lg-dim:#a9e7e1;--lg-ink:#fbfdfc}
.brand--ink{color:var(--ink)}
.brand--ink{--lg-dim:#7fb3b5;--lg-ink:#ffffff}
.skip{position:absolute;left:-9999px;top:0;z-index:80;background:var(--paper);color:var(--ink);padding:.7rem 1.1rem}
.skip:focus{left:.6rem;top:.6rem}
:where(a,button,summary):focus-visible{outline:2px solid var(--turq);outline-offset:3px}

/* ============ masthead: solid variant + burger ============ */
.mast--solid{position:sticky;top:0;background:var(--ink);border-bottom:1px solid #17454f}
.burger{
  display:none;margin-left:auto;width:44px;height:38px;background:none;border:0;padding:9px 7px;
  cursor:pointer;flex-direction:column;justify-content:space-between
}
.burger span{display:block;height:2px;background:var(--paper);transition:transform .3s,opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}
@media (max-width:900px){
  .mast{position:fixed;top:0;background:var(--ink);border-bottom:1px solid #17454f;z-index:70}
  .burger{display:flex}
  /* The panel must start below the masthead. A hard 59px was guessed: the mast
     is 91px at 360-899px and 105px at 320px (two-line brand), so the panel cut
     through the brand subtitle. Anchoring to the mast itself (absolute inside
     the fixed header, top:100%) tracks the real height at every width. */
  .nav{
    position:absolute;top:100%;left:0;right:0;height:calc(100svh - 100%);
    background:var(--ink);flex-direction:column;gap:0;
    padding:1rem var(--gut) 3rem;overflow-y:auto;transform:translateX(101%);
    transition:transform .32s cubic-bezier(.3,.8,.3,1)
  }
  .nav[data-open="true"]{transform:none}
  .nav a{font-size:1.0625rem;letter-spacing:.04em;text-transform:none;padding-block:1.05rem;border-bottom:1px solid #17454f}
  .nav a::after{display:none}
  .plate{padding-top:59px}
}
.nav a[aria-current="page"]{color:var(--shallow)}

/* ============ hero variants ============ */
.plate--mid{min-height:min(72svh,660px)}
.plate .lede{color:#e9f6f4;max-width:54ch}

/* ============ ledger extras ============ */
.course__area{display:block;font-family:var(--body);font-size:.75rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin-top:.3rem}
.flag--open{color:#1c6b4a;background:#e4f5ec;border-color:#bfe3d0}
.flag--closed{color:#8a3b34;background:#fbeae7;border-color:#eecfc9}
.flag--limited{color:#7a6634;background:var(--sand);border-color:var(--sand-deep)}
.ledger__legend{margin:1.15rem 0 0;font-size:.8125rem;color:var(--ink-soft);max-width:78ch}
.band__more{margin:2rem 0 0}
.more{
  display:inline-block;font-size:.78125rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;color:var(--ink);border-bottom:2px solid var(--turq);padding-bottom:.3rem
}
.more:hover{color:var(--turq)}

/* ============ prose + defs ============ */
.band p{max-width:74ch}
.band>.wrap>p{margin:0 0 1.15rem}
.defs{margin:0;display:grid;gap:0;grid-template-columns:minmax(9rem,15rem) 1fr}
.defs dt{
  font-size:.6875rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--sea-deep);
  padding:1.15rem 1.5rem 1.15rem 0;border-top:1px solid var(--rule)
}
.defs dd{margin:0;padding:1.15rem 0;border-top:1px solid var(--rule);max-width:70ch}
@media (max-width:680px){
  .defs{grid-template-columns:1fr}
  .defs dt{padding-bottom:.35rem}
  .defs dd{border-top:0;padding-top:0;padding-bottom:1.3rem}
}

/* ============ records list ============ */
.records__list{list-style:none;margin:0;padding:0;display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.records__list li{padding:1.5rem 1.6rem 1.5rem 0;border-top:1px solid var(--rule)}
.records__list dt{font-size:.6875rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.records__list dd{margin:.7rem 0 0}
.records__list .big{font-family:var(--display);font-size:2.15rem;line-height:1;letter-spacing:-.01em;display:block}
.records__list .big em{font-family:var(--body);font-style:normal;font-size:.9375rem;font-weight:500;color:var(--ink-soft);margin-left:.3rem}
.records__list .where{display:block;margin-top:.5rem;font-size:.8125rem;color:var(--ink-soft);font-family:var(--body);letter-spacing:0}

/* ============ faq ============ */
.faq__h{font-family:var(--display);font-weight:400;font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1.12;margin:0 0 1.8rem}
.faq details{border-top:1px solid var(--rule)}
.faq details:last-of-type{border-bottom:1px solid var(--rule)}
.faq summary{
  cursor:pointer;list-style:none;padding:1.3rem 2.4rem 1.3rem 0;position:relative
}
.faq summary::-webkit-details-marker{display:none}
.faq summary h3{
  font-family:var(--display);font-weight:400;font-size:clamp(1.0625rem,1.3vw,1.25rem);line-height:1.3;
  margin:0;display:inline
}
.faq summary::after{
  content:"";position:absolute;right:.45rem;top:1.75rem;width:11px;height:11px;
  border-right:1.5px solid var(--turq);border-bottom:1.5px solid var(--turq);
  transform:rotate(45deg);transition:transform .28s ease
}
.faq details[open] summary::after{transform:rotate(225deg)}
.faq__a{padding:0 0 1.4rem}
.faq__a p{margin:0;max-width:74ch;color:var(--ink-soft)}

/* ============ footer heading ============ */
.foot__h{font-size:.6875rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--shallow);margin:0 0 1rem;font-family:var(--body)}

/* status chips: beat .ledger .flag specificity */
.ledger .flag--open,.flag--open{color:#12674a;background:#e2f4ea;border-color:#b6dfc8}
.ledger .flag--closed,.flag--closed{color:#8a352d;background:#fbe9e6;border-color:#eecac3}
.ledger .flag--limited,.flag--limited{color:#7a6634;background:var(--sand);border-color:var(--sand-deep)}

/* ============ living water: masked caustics over the hero shallows ============
   No video, no canvas. Four blended gradient layers drifting at different
   speeds, masked so the motion dies out over the forest and the beach. */
.plate__water{
  position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
  opacity:0;transition:opacity .9s ease;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.15) 0,#000 14%,#000 52%,rgba(0,0,0,.22) 70%,transparent 82%);
          mask-image:linear-gradient(180deg,rgba(0,0,0,.15) 0,#000 14%,#000 52%,rgba(0,0,0,.22) 70%,transparent 82%);
}
.cst{position:absolute;inset:-25% -25%;display:block;animation-play-state:paused}
.plate.is-armed .plate__water{opacity:1}
.plate.is-armed .cst{animation-play-state:running;will-change:transform}
.cst--a{
  background:
    radial-gradient(58% 30% at 22% 28%,rgba(255,255,255,.30),transparent 62%),
    radial-gradient(44% 24% at 68% 40%,rgba(214,255,252,.26),transparent 64%),
    radial-gradient(36% 20% at 46% 62%,rgba(255,255,255,.20),transparent 66%);
  mix-blend-mode:soft-light;opacity:.85;
  animation:drift-a 23s ease-in-out infinite alternate;
}
.cst--b{
  background:
    radial-gradient(50% 26% at 78% 22%,rgba(255,255,255,.24),transparent 60%),
    radial-gradient(40% 22% at 34% 48%,rgba(180,246,240,.24),transparent 62%),
    radial-gradient(30% 18% at 62% 70%,rgba(255,255,255,.18),transparent 64%);
  mix-blend-mode:overlay;opacity:.6;
  animation:drift-b 31s ease-in-out infinite alternate;
}
.cst--glint{display:none;
  background:repeating-linear-gradient(102deg,
    rgba(255,255,255,.14) 0 1.5px, transparent 1.5px 9px,
    rgba(255,255,255,.07) 9px 10px, transparent 10px 22px);
  mix-blend-mode:overlay;opacity:.5;
  animation:glint 17s linear infinite;
}
.cst--swell{
  background:linear-gradient(96deg,transparent 0,rgba(255,255,255,.11) 42%,rgba(255,255,255,.16) 50%,rgba(255,255,255,.10) 58%,transparent 100%);
  mix-blend-mode:soft-light;opacity:.9;
  animation:swell 26s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes drift-a{
  0%  {transform:translate3d(-1.6%,-.9%,0) scale(1.03)}
  50% {transform:translate3d(1.1%,.7%,0) scale(1.055)}
  100%{transform:translate3d(2%,-.5%,0) scale(1.02)}
}
@keyframes drift-b{
  0%  {transform:translate3d(1.4%,.6%,0) scale(1.05)}
  50% {transform:translate3d(-1%,-.8%,0) scale(1.02)}
  100%{transform:translate3d(-2.1%,.4%,0) scale(1.06)}
}
@keyframes glint{
  from{transform:translate3d(0,0,0)}
  to  {transform:translate3d(-4.4%,2.2%,0)}
}
@keyframes swell{
  0%,100%{transform:translate3d(-6%,0,0) scaleY(1)}
  50%    {transform:translate3d(6%,1.5%,0) scaleY(1.12)}
}
@media (prefers-reduced-motion:reduce){.plate__water{display:none}}

/* ============ hero video: progressive enhancement over the still ============ */
.plate__vid{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:38% 44%;
  opacity:0;transition:opacity 1.1s ease;pointer-events:none
}
.plate--vid.is-live .plate__vid{opacity:1}
.plate--vid.is-live .plate__water{opacity:0;transition:opacity .8s ease}
@media (prefers-reduced-motion:reduce){.plate__vid{display:none}}

/* ============ ranked list (records) ============ */
.rank{list-style:none;margin:0;padding:0;counter-reset:r}
.rank li{
  counter-increment:r;border-top:1px solid var(--rule);padding:1.45rem 0 1.5rem 3.6rem;position:relative
}
.rank li:last-child{border-bottom:1px solid var(--rule)}
.rank li::before{
  content:counter(r,decimal-leading-zero);position:absolute;left:0;top:1.6rem;
  font-size:.75rem;font-weight:600;letter-spacing:.1em;color:var(--turq)
}
.rank b{font-family:var(--display);font-weight:400;font-size:clamp(1.0625rem,1.4vw,1.3125rem);letter-spacing:-.005em}
.rank__n{
  float:right;font-size:.8125rem;font-weight:600;letter-spacing:.06em;color:var(--ink-soft);
  background:var(--sand);border:1px solid var(--sand-deep);padding:.2rem .55rem;margin-left:1rem
}
.rank p{margin:.55rem 0 0;color:var(--ink-soft);max-width:72ch}
@media (max-width:560px){.rank__n{float:none;display:inline-block;margin:.55rem 0 0}}

/* ============ contact / simple pages ============ */
.simple{padding-block:clamp(2.6rem,7vw,4.6rem)}
.simple h1{font-family:var(--display);font-weight:400;font-size:clamp(1.9rem,4vw,3rem);line-height:1.08;margin:0 0 1.2rem;max-width:26ch}
.simple .lede{font-size:clamp(1.0625rem,.5vw + .95rem,1.25rem);color:var(--ink-soft);max-width:60ch;margin:0 0 2.4rem}
.simple h2{font-family:var(--display);font-weight:400;font-size:clamp(1.35rem,2.2vw,1.85rem);line-height:1.15;margin:2.6rem 0 1rem}
.simple p{max-width:74ch;margin:0 0 1.15rem}
.simple ul{max-width:74ch;padding-left:1.15rem;margin:0 0 1.4rem}
.simple li{margin-bottom:.5rem}

/* ============ video figure + archive list ============ */
.figvid{margin:0 0 2.4rem;max-width:900px}
.figvid__v{width:100%;height:auto;display:block;background:#06323c}
.figvid figcaption{margin-top:.8rem;font-size:.8125rem;color:var(--ink-soft);max-width:70ch}
.archlist{list-style:none;padding:0;margin:0 0 1.6rem;max-width:74ch}
.archlist li{border-top:1px solid var(--rule);padding:.95rem 0}
.archlist li:last-child{border-bottom:1px solid var(--rule)}
.archlist a{text-decoration:none;border-bottom:1px solid var(--shallow)}
.archlist a:hover{border-bottom-color:var(--turq)}

/* ============ masthead legibility over light water ============ */
.plate::before{
  content:"";position:absolute;left:0;right:0;top:0;height:150px;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(3,30,42,.62) 0,rgba(3,30,42,.34) 42%,transparent 100%)
}

/* ============ split: prose + vertical editorial image ============ */
.split{display:grid;gap:clamp(1.8rem,4vw,3.4rem);grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);align-items:start}
.split__txt p{max-width:62ch}
.split__fig{margin:0;position:sticky;top:2rem}
.split__fig img{width:100%;height:auto;display:block}
.split__fig figcaption{
  margin-top:.85rem;font-size:.8125rem;line-height:1.5;color:var(--ink-soft);
  padding-left:.9rem;border-left:2px solid var(--turq)
}
@media (max-width:860px){
  .split{grid-template-columns:1fr}
  .split__fig{position:static;max-width:460px}
}

/* ============================================================
   VERTICAL RHYTHM - one spacing token, no accidental extras
   Every section pays the same padding, and nothing inside a
   section is allowed to add trailing space of its own.
   ============================================================ */
:root{--sec:clamp(3.25rem,6.4vw,5.25rem)}

.band,.simple{padding-block:var(--sec)}
.strip{padding-block:0}                       /* the thin figure strip keeps its own inner padding */
.strip li{padding-block:calc(var(--sec) * .42)}

/* kill trailing space from the last thing in a section */
.band > .wrap > *:last-child,
.simple > .wrap > *:last-child{margin-bottom:0}
.band p:last-child{margin-bottom:0}
.ledger__legend{margin-bottom:0}
.band__more{margin-bottom:0}

/* internal lists must not add bottom padding on top of --sec */
.records__list li{padding-bottom:0}
.rank li:last-child{padding-bottom:calc(var(--sec) * .28)}
.defs dt:last-of-type,.defs dd:last-of-type{padding-bottom:0}
@media (max-width:680px){.defs dd:last-of-type{padding-bottom:0}}
.faq details:last-of-type .faq__a{padding-bottom:1.4rem}

/* split: the image may not out-run the prose column, or the section
   gains dead space and the rhythm reads uneven */
.split__fig img{aspect-ratio:3/4;max-height:none;object-fit:cover}
.split{align-items:stretch}
.split__fig{position:static;display:flex;flex-direction:column}
.split__fig picture{display:block;flex:none}

/* the hero pays the same bottom padding as everything else */
.plate__body{padding-block:0 var(--sec)}

/* ============ back to the top ============ */
.totop{
  position:fixed;right:clamp(.9rem,2.2vw,1.9rem);bottom:clamp(.9rem,2.2vw,1.9rem);z-index:60;
  width:46px;height:46px;padding:0;border:1px solid var(--rule);border-radius:50%;
  background:rgba(251,253,252,.9);backdrop-filter:blur(6px);color:var(--ink);
  display:grid;place-items:center;cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .3s ease,transform .3s ease,visibility .3s,border-color .2s,background .2s;
  box-shadow:0 1px 14px rgba(6,50,60,.10)
}
.totop svg{width:19px;height:19px}
.totop.is-on{opacity:1;visibility:visible;transform:none}
.totop:hover{border-color:var(--turq);background:var(--paper);color:var(--turq)}
.totop:focus-visible{outline:2px solid var(--turq);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.totop{transition:none}}
@media print{.totop{display:none}}

/* ============================================================
   THE LEDGER, redrawn as cable geometry
   Every span is a cable to scale: anchor, line, trolley.
   Numbers stay real text; the drawing is aria-hidden.
   ============================================================ */
.ledger{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.ledger thead th{
  padding:.95rem 1.1rem .8rem 0;border-bottom:1px solid var(--rule);
  background:linear-gradient(180deg,rgba(169,231,225,.16),transparent)
}
.ledger tbody td{padding:1.15rem 1.1rem 1.2rem 0;vertical-align:top}
.ledger tbody tr:not(:last-child) td{border-bottom:1px solid var(--rule)}
.ledger tbody tr:hover{background:linear-gradient(90deg,rgba(169,231,225,.20),rgba(169,231,225,.04) 70%,transparent)}

.ledger .num{display:block;font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1.2}
.cel--wide{min-width:132px}

/* island key: a small colour tick so the eye groups by island */
.isle{white-space:nowrap}
.isle__k{display:inline-block;width:3px;height:.95em;margin-right:.5rem;vertical-align:-.12em;background:var(--turq)}
.isle__k--maui{background:#0e9aa1}
.isle__k--oahu{background:#2f7f5b}
.isle__k--kauai{background:#c08a4e}
.isle__k--hawaii{background:#8a3b34}

/* line count as ticks on a cable */
.dots{display:flex;gap:3px;margin-top:.5rem}
.dots i{width:3px;height:11px;background:var(--turq);opacity:.85}
.dots i:nth-child(even){height:8px;opacity:.6}

/* the cable: anchor -- line -- trolley, width proportional to the span */
.cable{
  display:block;position:relative;height:11px;margin-top:.62rem;width:100%
}
.cable::before{        /* the run, to scale */
  content:"";position:absolute;left:0;top:5px;width:var(--v);height:1px;
  background:linear-gradient(90deg,var(--turq),var(--turq-lit));
  transition:filter .25s ease
}
.cable::after{         /* left anchor post */
  content:"";position:absolute;left:0;top:0;width:1px;height:11px;background:var(--ink-soft);opacity:.6
}
.cable__t{             /* the trolley, parked at the far end */
  position:absolute;top:2.5px;left:var(--v);width:6px;height:6px;margin-left:-3px;border-radius:50%;
  background:var(--turq-lit);box-shadow:0 0 0 3px rgba(25,191,194,.16);
  transition:transform .45s cubic-bezier(.3,.75,.25,1)
}
.ledger tbody tr:hover .cable__t{transform:translateX(3px)}
.ledger tbody tr:hover .cable::before{filter:saturate(1.5)}

/* height as a short standing bar */
.hbar{display:block;position:relative;height:22px;margin-top:.5rem;width:22px}
.hbar::before{
  content:"";position:absolute;left:0;bottom:0;width:2px;height:var(--v);
  background:linear-gradient(180deg,var(--turq-lit),var(--turq))
}
.hbar::after{content:"";position:absolute;left:0;bottom:0;width:9px;height:1px;background:var(--ink-soft);opacity:.5}

/* rider weight as a window on a shared 0-300 lbs rail */
.rng{display:block;position:relative;height:9px;margin-top:.62rem;width:100%}
.rng::before{content:"";position:absolute;left:0;top:4px;width:100%;height:1px;background:var(--rule)}
.rng::after{
  content:"";position:absolute;left:var(--a);top:2px;width:var(--b);height:5px;
  background:var(--turq);border-radius:1px
}

/* closed courses: the drawing recedes, the figures stay readable */
.cable.is-dim::before,.hbar.is-dim::before,.rng.is-dim::after{filter:grayscale(1);opacity:.42}
.dots.is-dim i{filter:grayscale(1);opacity:.45}

/* legend key */
.ledger__legend .key{display:block;margin-bottom:.45rem;color:var(--ink)}
.key__cable{
  display:inline-block;position:relative;width:34px;height:9px;margin-right:.5rem;vertical-align:-1px
}
.key__cable::before{content:"";position:absolute;left:0;top:4px;width:100%;height:1px;background:var(--turq)}
.key__cable::after{
  content:"";position:absolute;right:0;top:1.5px;width:6px;height:6px;border-radius:50%;background:var(--turq-lit)
}

@media (max-width:860px){
  .cable,.rng{min-width:96px}
}
@media (prefers-reduced-motion:reduce){
  .cable__t,.cable::before{transition:none}
}

/* ---- ledger refinements: implied full scale + readable height bars ---- */
.cable{height:13px}
.cable::before{top:6px}
.cable::after{height:13px}
.cable__t{top:3.5px}
.cable__rail{                       /* the full span the table can hold */
  position:absolute;left:0;top:6px;width:100%;height:1px;
  background:repeating-linear-gradient(90deg,var(--rule) 0 3px,transparent 3px 6px)
}

.hbar{width:26px;height:28px}
.hbar::before{                      /* the fill, never smaller than a visible tick */
  width:3px;height:max(4px,var(--v));border-radius:1px
}
.hbar::after{width:11px}
.hbar__rail{
  position:absolute;left:0;bottom:0;width:1px;height:100%;
  background:repeating-linear-gradient(180deg,var(--rule) 0 3px,transparent 3px 6px)
}

/* ---- layer order: the drawn value must sit ABOVE the dotted scale rail ---- */
.cable__rail,.hbar__rail{z-index:0}
.cable::before,.cable::after{z-index:1}
.cable__t{z-index:2}
.hbar::before,.hbar::after{z-index:1}
.cable::before{height:2px;top:5.5px;border-radius:1px}

/* ---- height reads as a gauge, not an L ---- */
.hbar{width:30px;height:32px}
.hbar::before{width:4px}
.hbar::after{display:none}
.hbar__rail{width:4px;background:repeating-linear-gradient(180deg,var(--rule) 0 2px,transparent 2px 5px)}

/* ============================================================
   ZIPRAIL - the section divider that is a zipline
   One-shot glide when it enters the viewport. Pure transform,
   no layout thrash, parked and silent under reduced-motion.
   ============================================================ */
.ziprail{
  position:relative;height:78px;color:var(--turq);overflow:hidden;
  background:linear-gradient(180deg,var(--paper) 0 48%,var(--foam) 48% 100%)
}
.ziprail__cable{position:absolute;inset:0 0 auto;width:100%;height:34px;top:22px;display:block}
.ziprail__post{
  position:absolute;top:22px;width:1px;height:24px;background:var(--ink-soft);opacity:.55
}
.ziprail__post--l{left:max(1.1rem,2.4vw)}
.ziprail__post--r{right:max(1.1rem,2.4vw)}
.ziprail__carriage{
  position:absolute;left:max(1.1rem,2.4vw);top:22px;
  width:calc(100% - 2*max(1.1rem,2.4vw));height:36px;pointer-events:none;
  transform:translateX(0)
}
.ziprail__rider{
  position:absolute;left:-13px;top:2px;width:26px;height:36px;display:block;
  transform-origin:13px 3px
}
.ziprail.is-riding .ziprail__carriage{
  animation:zipglide 2.5s cubic-bezier(.42,.02,.34,1) forwards
}
.ziprail.is-riding .ziprail__rider{
  animation:zipsag 2.5s cubic-bezier(.42,.02,.34,1) forwards
}
@keyframes zipglide{
  from{transform:translateX(0)}
  to  {transform:translateX(100%)}
}
@keyframes zipsag{
  0%  {transform:translateY(0) rotate(-7deg)}
  22% {transform:translateY(9px) rotate(4deg)}
  50% {transform:translateY(15px) rotate(1deg)}
  78% {transform:translateY(9px) rotate(-3deg)}
  100%{transform:translateY(0) rotate(3deg)}
}
/* parked state before it rides, and for anyone who does not want motion */
.ziprail:not(.is-riding) .ziprail__carriage{transform:translateX(0)}
@media (prefers-reduced-motion:reduce){
  .ziprail__carriage{transform:translateX(100%)!important;animation:none!important}
  .ziprail__rider{animation:none!important;transform:translateY(0) rotate(3deg)!important}
}
@media (max-width:640px){
  .ziprail{height:64px}
  .ziprail__cable,.ziprail__post,.ziprail__carriage{top:16px}
}

/* ============ FAQ in two columns: rail + accordion ============ */
.faqsplit{display:grid;gap:clamp(1.8rem,4vw,3.4rem);grid-template-columns:minmax(0,.86fr) minmax(0,1.35fr);align-items:start}
.faqsplit__rail{position:sticky;top:2rem}
.faqsplit__rail .faq__h{margin-bottom:1rem}
.faqsplit__lede{margin:0 0 1.6rem;color:var(--ink-soft);max-width:44ch}
.faqsplit__fig{margin:0}
.faqsplit__fig img{width:100%;height:auto;display:block;aspect-ratio:4/3;object-fit:cover}
.faqsplit__fig figcaption{
  margin-top:.8rem;font-size:.8125rem;line-height:1.5;color:var(--ink-soft);
  padding-left:.9rem;border-left:2px solid var(--turq);max-width:46ch
}
.faqsplit__acc .faq details:first-of-type{border-top:1px solid var(--rule)}
@media (max-width:900px){
  .faqsplit{grid-template-columns:1fr}
  .faqsplit__rail{position:static}
  .faqsplit__fig{max-width:520px}
}

/* ---- superlative figures pick up the cable turquoise ---- */
.records__list .big{color:var(--turq)}
.records__list .big em{color:var(--ink-soft)}

/* ---- deep-sea teal for the superlative figures ---- */
.records__list .big{color:var(--sea-deep)}

/* ---- narrow screens: the course cell stacks cleanly, one line each ---- */
@media (max-width:900px){
  .ledger .course{
    display:flex;flex-direction:column;align-items:flex-start;gap:.34rem;
    min-width:196px;padding-right:1.2rem
  }
  .ledger .course .flag{margin-left:0}
  .ledger .course .course__area{margin-top:0}
}

/* ---- tablet: stacked figures sit centred in the column ---- */
@media (max-width:900px){
  .split__fig,.faqsplit__fig{margin-inline:auto}
  .figvid{margin-inline:auto}
}

/* ============================================================
   NARROW SCREENS: the ledger stops scrolling sideways and becomes
   one card per course, every field on its own line. Each cell
   carries its own visible label, so nothing depends on the header.
   ============================================================ */
@media (max-width:760px){
  .ledger-scroll{overflow:visible}
  .ledger{min-width:0;border:0;display:block}
  .ledger caption{display:block;padding-bottom:1.2rem}
  .ledger thead{display:none}
  .ledger tbody,.ledger tr,.ledger td{display:block;width:auto}
  .ledger tbody tr{
    border:1px solid var(--rule);border-top-width:2px;border-top-color:var(--turq);
    padding:1.15rem 1.1rem 1.25rem;margin-bottom:1.1rem;background:var(--paper)
  }
  .ledger tbody tr:hover{background:var(--paper)}
  .ledger tbody tr:not(:last-child) td{border-bottom:0}

  /* the name block: name, status, area - one under the other */
  .ledger td.course{
    padding:0 0 .95rem;margin-bottom:.85rem;border-bottom:1px solid var(--rule);
    min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:.4rem
  }
  .ledger td.course::before{display:none}
  .ledger .course a{font-size:1.125rem}

  /* every other field: label left, value right */
  .ledger td.cel,.ledger td.isle{
    display:grid;grid-template-columns:8.4rem 1fr;align-items:baseline;
    gap:.2rem .9rem;padding:.42rem 0;border:0
  }
  .ledger td.cel::before,.ledger td.isle::before{
    content:attr(data-l);
    font-size:.6875rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--turq)
  }
  .ledger td.cel .num,.ledger td.cel .age{grid-column:2}
  .ledger td.cel .dots,.ledger td.cel .cable,.ledger td.cel .hbar,.ledger td.cel .rng{
    grid-column:2;margin-top:.4rem
  }
  .ledger .cable,.ledger .rng{max-width:190px}
  .ledger__legend{margin-top:.4rem}
}

/* island value keeps its colour key on the same line */
@media (max-width:760px){
  .ledger td.isle .isle__v{grid-column:2}
}

/* ---- wide figure on the single-column pages ---- */
.platefig{margin:0 0 2.4rem;max-width:74ch}
.platefig img{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover}
.platefig figcaption{
  margin-top:.8rem;font-size:.8125rem;line-height:1.5;color:var(--ink-soft);
  padding-left:.9rem;border-left:2px solid var(--turq);max-width:66ch
}
@media (max-width:820px){.platefig{margin-inline:auto}}

/* ============ ledger variants: island rowgroups + course notes ============ */
.ledger--grouped tbody.grp + tbody.grp .grp__head th{padding-top:2.1rem}
.grp__head th{
  text-align:left;border-bottom:1px solid var(--turq);padding:.7rem 0 .7rem;
  font-family:var(--display);font-weight:400;font-size:1.25rem;letter-spacing:-.005em;color:var(--ink)
}
.grp__head .isle__k{width:4px;height:.85em;margin-right:.6rem}
.grp__head em{
  font-family:var(--body);font-style:normal;font-size:.6875rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-soft);margin-left:.9rem;vertical-align:2px
}
.course__note{
  display:block;margin-top:.5rem;font-family:var(--body);font-size:.8125rem;line-height:1.5;
  color:var(--ink-soft);max-width:44ch
}
.course__src{
  display:block;margin-top:.4rem;font-family:var(--body);font-size:.625rem;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;color:var(--sea-deep)
}
.ledger--grouped .course{min-width:270px}
.ledger--compact{min-width:600px}

@media (max-width:760px){
  .ledger--grouped tbody.grp{display:block;margin-bottom:.4rem}
  .grp__head{display:block;border:0;padding:0}
  .grp__head th{display:block;padding:.2rem 0 .9rem;border-bottom:0}
  .ledger--grouped .course,.ledger--compact .course{min-width:0}
  /* .ledger--compact declares min-width:600px AFTER the mobile .ledger reset
     above; media queries add no specificity, so it wins and the table stays
     600px on a 390px screen while .ledger-scroll has already gone
     overflow:visible — the page then scrolls sideways. Reset it here. */
  .ledger--compact{min-width:0}
  .course__note{max-width:none}
}

/* ============================================================
   ONE MEASURE. Every block of reading content shares a single
   right edge; only the data table is allowed to run wider,
   because it is data and needs the columns.
   ============================================================ */
:root{--measure:44rem}

.band__head,
.band__head h2,
.band__head p,
.band > .wrap > p,
.band > .wrap > .platefig,
.platefig,
.ledger__legend,
.rank,
.rank p,
.faq__h,
.faq,
.defs,
.simple h1,
.simple h2,
.simple p,
.simple ul,
.simple ol,
.archlist,
.figvid{max-width:none}

/* the data table keeps the full container - it is the one exception */
.ledger-scroll,.ledger{max-width:none}

/* two-column layouts span the container by design; their inner text
   inherits the measure through the grid track, so no cap here */
.split,.faqsplit{max-width:none}
.split__txt p,.faqsplit__lede{max-width:none}

/* the figure note sits on the same edge as the heading it belongs to */
.band__head{flex-wrap:wrap}
.band__note{margin-left:auto}

/* the hero text block sits on the same edge as the body copy below it */
.plate .eyebrow,.plate h1,.plate .lede,.plate__meta{max-width:none}

/* ============================================================
   A section head spans the width of the content it introduces.
   Prose sections keep --measure; sections whose body is wide
   (data table, two-column block, wide grid) let the head run
   out to the same edge as that content.
   ============================================================ */
.band:has(.ledger-scroll),
.band:has(.split),
.band:has(.faqsplit),
.band:has(.records__list),
.band:has(.guides){
  --head-max:none
}
.band__head{max-width:none}
.band__head h2{max-width:none}
.band__head p{max-width:none}

/* the split figure can carry its own crop ratio */
.split__fig img{aspect-ratio:var(--fig-ar,3/4)}

/* ---- definition lists are wide content: they run to the same edge as the
        section head above them, and the head widens with them ---- */
.band:has(.defs){--head-max:none}
.defs{max-width:none;grid-template-columns:minmax(10rem,17rem) 1fr}
.defs dd{max-width:none}
@media (max-width:680px){.defs{grid-template-columns:1fr}}

/* ============================================================
   ONE EDGE, GLOBALLY.
   No per-element max-width anywhere. Every block inherits the
   container, so every right edge on every page - including pages
   that do not exist yet - lands on the same line by construction.
   The container itself is the measure, so it is set to a width
   that reads well: narrower than before, with slightly larger
   type and looser leading to carry the longer line.
   ============================================================ */
.wrap{max-width:1180px}
:root{--gut:clamp(1.25rem,4vw,3.5rem)}

.band__head,.band__head h2,.band__head p,
.band > .wrap > p,.band p,
.platefig,.figvid,.ledger__legend,
.rank,.rank p,
.faq,.faq__h,.faq__a p,
.defs,.defs dd,
.guides p,
.simple h1,.simple h2,.simple p,.simple ul,.simple ol,
.archlist,
.plate .eyebrow,.plate h1,.plate .lede,.plate__meta,
.split__txt p,.faqsplit__lede,
.foot__note,
.records__list .where,
.course__note{max-width:none}

/* the longer line needs a little more air */
.band > .wrap > p,.band p,.defs dd,.faq__a p,.simple p{line-height:1.68}
.band > .wrap > p,.simple p{font-size:1.0625rem}

/* captions stay short - they are annotations, not body copy */
.platefig figcaption,.split__fig figcaption,.faqsplit__fig figcaption,.figvid figcaption{max-width:52ch}
.simple .lede,.plate .lede{max-width:none}