:root{
    /* Palette lifted from the app itself, ui/LakeFishColors.kt */
    --ink:#060B12;
    --abyss:#030508;
    --panel:#101922;
    --on-ink:#E8E4D9;
    --soft:#D5CDB9;
    --muted:#8A93A0;
    --dim:#6A7483;
    --accent:#E2B45B;
    --accent-hi:#EBCC8F;
    --danger:#E36A5C;
    /* Triplets for translucent uses. Hex cannot carry an alpha here, and
       hard coding rgba() is how half the page stayed on the old palette. */
    --ink-rgb:6 11 18;
    --abyss-rgb:3 5 8;
    --panel-rgb:16 25 34;
    --muted-rgb:138 147 160;
    --paper:#E8E0CB;
    --paper-ink:#2A2418;
    --rule:rgb(var(--muted-rgb) / .22);
    --hair:rgb(var(--muted-rgb) / .11);

    /* Depth ramp in feet, map/DepthRamp.kt */
    --d0:#DF7700;  --d5:#FFA204;  --d10:#FFD017; --d15:#ADFF26; --d20:#3DF882;
    --d25:#20F2D8; --d30:#25E2FF; --d35:#49C7FF; --d40:#4D91FF; --d44:#1552FF;

    --display:"Arial Narrow","Roboto Condensed","Helvetica Neue Condensed",
              "Liberation Sans Narrow",Arial,sans-serif;
    --body:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --mono:ui-monospace,"Cascadia Mono","SF Mono","JetBrains Mono",Consolas,
           "Liberation Mono",monospace;

    /* One fluid type scale. Every size on the page comes from here. */
    --fs-micro:clamp(9.5px,.68vw,11px);
    --fs-label:clamp(10px,.78vw,12px);
    --fs-small:clamp(13px,1vw,15px);
    --fs-body:clamp(15px,1.12vw,17.5px);
    --fs-lede:clamp(17px,1.45vw,21px);
    --fs-h3:clamp(20px,2vw,29px);
    --fs-h2:clamp(29px,3.9vw,54px);
    --fs-h1:clamp(40px,6vw,82px);
    --fs-stat:clamp(38px,5vw,68px);

    /* One spacing scale. */
    --s1:8px; --s2:14px; --s3:22px; --s4:34px; --s5:54px;
    --sec:clamp(66px,8.5vw,118px);
    --gap:clamp(28px,4.5vw,72px);
    --gut:clamp(20px,5vw,64px);
    --col:1140px;
  }

  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0;
    background:var(--ink);
    color:var(--on-ink);
    font-family:var(--body);
    font-size:var(--fs-body);
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    *{animation-duration:.001ms !important;animation-iteration-count:1 !important;
      transition-duration:.001ms !important}
  }
  img{max-width:100%}

  /* ============ type ============ */
  .eyebrow{
    font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.19em;
    text-transform:uppercase;color:var(--accent);margin:0 0 var(--s3);
  }
  /* Leading on the display face. Set tight it reads as one dense block, because
     condensed uppercase has no descenders to open the lines up on their own. */
  .h1{
    font-family:var(--display);font-weight:700;text-transform:uppercase;
    font-size:var(--fs-h1);line-height:1.06;letter-spacing:-.01em;margin:0 0 var(--s4);
  }
  .h2{
    font-family:var(--display);font-weight:700;text-transform:uppercase;
    font-size:var(--fs-h2);line-height:1.08;letter-spacing:-.005em;margin:0 0 var(--s3);
  }
  .h3{
    font-family:var(--display);font-weight:700;text-transform:uppercase;
    font-size:var(--fs-h3);line-height:1.16;letter-spacing:0;margin:0 0 var(--s2);
  }
  .lede{font-size:var(--fs-lede);line-height:1.62;color:var(--soft);margin:0 0 var(--s3)}
  .prose{color:var(--muted);margin:0 0 var(--s3)}
  .prose:last-child{margin-bottom:0}
  .prose b,.lede b{color:var(--on-ink);font-weight:600}
  .note{
    font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.07em;
    line-height:1.85;color:var(--dim);margin:0;
  }

  /* ============ nav ============ */
  .nav{
    position:fixed;inset:0 0 auto 0;z-index:60;display:flex;align-items:center;
    justify-content:space-between;gap:var(--s2);padding:0 var(--gut);height:56px;
    background:rgb(var(--abyss-rgb) / .92);backdrop-filter:blur(14px) saturate(1.4);
    border-bottom:1px solid var(--rule);
  }
  .brand{
    font-family:var(--display);font-weight:700;text-transform:uppercase;
    font-size:clamp(16px,1.4vw,19px);letter-spacing:.26em;color:var(--on-ink);
    text-decoration:none;
  }
  .brand span{color:var(--accent)}
  .nav-links{display:flex;gap:clamp(14px,2vw,26px);align-items:center}
  .nav-links a{
    font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.16em;
    text-transform:uppercase;color:var(--muted);text-decoration:none;
    padding:4px 0;border-bottom:1px solid transparent;
  }
  .nav-links a:hover,.nav-links a:focus-visible{color:var(--on-ink);border-bottom-color:var(--accent)}
  .nav-cta{color:var(--accent) !important}
  @media (max-width:760px){.nav-links a:not(.nav-cta){display:none}}

  /* ============ topographic background ============ */
  /* Fixed behind everything, drifting on scroll and leaning toward the pointer.
     Deliberately faint: it is texture, not an illustration. */
  .topo{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
  .topo-layer{
    position:absolute;left:-18%;right:-18%;top:0;
    height:calc(100% + var(--slack, 760px));
    transform:translate3d(calc(var(--mx,0) * 26px), calc(var(--sy,0px) + var(--my,0) * 22px), 0);
    will-change:transform;
  }
  .topo-layer svg{width:100%;height:100%;display:block}
  @media (prefers-reduced-motion:reduce){.topo-layer{transform:none}}

  /* Content sits above the texture. The opaque bands go slightly translucent so
     the drift carries through the whole page instead of appearing in stripes. */
  .hero,.section,.readings,.close,.foot{position:relative;z-index:1}
  .section.alt{background:rgb(var(--abyss-rgb) / .88)}
  .readings{background:rgb(var(--abyss-rgb) / .88)}
  .close{background:rgb(var(--abyss-rgb) / .88)}
  .foot{background:rgb(var(--ink-rgb) / .9)}

  /* ============ depth rail ============ */
  /* A graduated scale pinned to the right edge: a short tick every step, a full
     length one on each section, colour interpolated along the real depth ramp so
     the run from shallow to deep reads as a gradient rather than seven jumps. */
  .rail{
    position:fixed;right:clamp(20px,2.2vw,44px);top:0;bottom:0;z-index:40;
    display:flex;flex-direction:column;align-items:flex-end;
    justify-content:space-between;
    padding:calc(56px + 26px) 0 30px;
    pointer-events:none;
  }
  .rail-item{
    display:flex;flex-direction:row-reverse;align-items:center;gap:11px;
    background:none;border:0;padding:0;margin:0;font:inherit;
    -webkit-appearance:none;appearance:none;
  }
  .rail-item.major{cursor:pointer;pointer-events:auto}
  .rail-tick{position:relative;width:26px;height:2px;flex:none}
  .rail-tick::after{
    content:"";position:absolute;right:0;top:0;height:2px;
    background:var(--c);transition:width .3s ease,opacity .3s ease;
  }
  .rail-item.minor .rail-tick::after{width:8px;opacity:.4}
  .rail-item.major .rail-tick::after{width:15px;opacity:.75}
  .rail-item.major.on .rail-tick::after,
  .rail-item.major:hover .rail-tick::after,
  .rail-item.major:focus-visible .rail-tick::after{width:26px;opacity:1}
  .rail-label{
    font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.13em;
    color:transparent;transition:color .3s ease;white-space:nowrap;text-align:right;
  }
  .rail-item.on .rail-label,
  .rail-item:hover .rail-label,
  .rail-item:focus-visible .rail-label{color:var(--muted)}
  .rail-item:focus-visible{outline:2px solid var(--accent);outline-offset:6px;border-radius:2px}

  /* The rail replaces the scrollbar, so hide the native one, but only at the
     widths where the rail is actually there to replace it. */
  @media (min-width:1421px){
    html{scrollbar-width:none}
    html::-webkit-scrollbar{display:none}
  }
  @media (max-width:1420px){.rail{display:none}}

  /* ============ section frame ============ */
  .section{padding:var(--sec) var(--gut);position:relative;scroll-margin-top:56px}
  .section.alt{background:var(--abyss);border-block:1px solid var(--rule)}
  .inner{max-width:var(--col);margin:0 auto}
  .stamp{
    display:flex;align-items:center;gap:var(--s2);margin:0 0 var(--s4);
    font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.18em;
    text-transform:uppercase;
  }
  .stamp i{width:9px;height:9px;border-radius:50%;font-style:normal;flex:none}
  .stamp b{font-weight:400;color:var(--muted)}
  .stamp s{flex:1;height:1px;background:var(--rule);text-decoration:none;max-width:120px}
  .chip{
    font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.15em;
    text-transform:uppercase;padding:4px 9px;border-radius:2px;white-space:nowrap;
    border:1px solid currentColor;
  }
  .chip.now{color:var(--d20)}
  .chip.next{color:var(--dim)}

  /* ============ hero ============ */
  .hero{
    scroll-margin-top:56px;
    position:relative;min-height:100svh;display:flex;align-items:center;
    padding:calc(56px + var(--s5)) var(--gut) var(--s5);overflow:hidden;
  }
  .hero-grid{
    max-width:var(--col);margin:0 auto;width:100%;display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,.72fr);gap:var(--gap);align-items:center;
  }
  .hero-copy{position:relative;z-index:2}
  .hero-chart{position:relative;justify-self:center;width:100%;max-width:430px}
  .hero-chart svg{width:100%;height:auto;display:block;overflow:visible}
  @media (max-width:900px){
    .hero-grid{grid-template-columns:1fr}
    .hero-chart{
      position:absolute;inset:0;max-width:none;z-index:0;opacity:.17;
      display:flex;align-items:center;justify-content:center;pointer-events:none;
    }
    .hero-chart svg{height:100%;width:auto}
  }
  .ring{fill:none;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
  .draw{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
        animation:draw 1.5s cubic-bezier(.4,0,.2,1) forwards;animation-delay:var(--dly)}
  @keyframes draw{to{stroke-dashoffset:0}}
  .sound{
    font-family:var(--mono);font-size:15px;fill:var(--muted);
    opacity:0;animation:fadein .7s ease forwards;animation-delay:1.5s;
  }
  @keyframes fadein{to{opacity:1}}
  @media (prefers-reduced-motion:reduce){.draw{stroke-dashoffset:0}.sound{opacity:1}}
  .credit{
    margin:var(--s4) 0 0;padding-top:var(--s2);border-top:1px solid var(--rule);
    font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.11em;
    text-transform:uppercase;color:var(--dim);line-height:1.95;
  }
  .credit b{color:var(--muted);font-weight:400}

  /* ============ waitlist form ============ */
  .signup{display:flex;gap:10px;flex-wrap:wrap;margin:var(--s4) 0 var(--s1);max-width:520px}
  .signup input{
    flex:1 1 240px;min-width:0;background:var(--panel);color:var(--on-ink);
    border:1px solid var(--rule);border-radius:2px;padding:14px 16px;
    font-family:var(--body);font-size:16px;
  }
  .signup input::placeholder{color:var(--dim)}
  .signup input:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
  .signup button{
    background:var(--accent);color:#062033;border:0;border-radius:2px;padding:14px 26px;
    cursor:pointer;font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.15em;
    text-transform:uppercase;font-weight:700;
  }
  .signup button:hover{background:var(--accent-hi)}
  .signup button:focus-visible{outline:2px solid var(--on-ink);outline-offset:2px}
  .done{
    display:none;align-items:center;gap:10px;margin:var(--s4) 0 var(--s1);padding:14px 16px;
    border:1px solid var(--accent);border-radius:2px;background:rgba(56,189,248,.08);
    font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.08em;
    color:var(--accent);max-width:520px;
  }
  .done.on{display:flex}

  /* ============ readings ============ */
  .readings{border-block:1px solid var(--rule);background:var(--abyss);padding:0 var(--gut)}
  .readings-grid{max-width:var(--col);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr)}
  .reading{padding:var(--s5) var(--s4) var(--s5) 0;border-left:1px solid var(--rule);padding-left:var(--s4)}
  .reading:first-child{border-left:0;padding-left:0}
  .reading .n{
    font-family:var(--display);font-weight:700;font-size:var(--fs-stat);line-height:.86;
    letter-spacing:-.02em;margin:0 0 var(--s2);
  }
  .reading .l{
    font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.15em;
    text-transform:uppercase;color:var(--muted);margin:0;line-height:1.85;
  }
  .reading.hi .n{color:var(--accent)}
  @media (max-width:800px){
    .readings-grid{grid-template-columns:1fr}
    .reading{border-left:0;border-top:1px solid var(--rule);padding:var(--s4) 0}
    .reading:first-child{border-top:0}
  }

  /* ============ niche block ============ */
  .niche{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:var(--gap);align-items:center}
  .niche.flip .niche-art{order:-1}
  @media (max-width:940px){
    .niche{grid-template-columns:1fr;gap:var(--s5)}
    .niche.flip .niche-art{order:0}
  }
  .niche-copy .h2{max-width:15ch}
  .niche-copy .h3{max-width:20ch}
  .niche-copy .prose{max-width:52ch}
  /* shared measure + rhythm utilities, so nothing needs an inline style */
  .measure{max-width:62ch}
  .mt-sec{margin-top:var(--sec)}
  .niche-art{position:relative}
  .art-cap{
    font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.1em;
    text-transform:uppercase;color:var(--dim);text-align:center;
    margin:var(--s3) auto 0;max-width:34ch;line-height:1.85;
  }

  /* ============ phone ============ */
  .phone{
    width:min(300px,100%);margin:0 auto;border-radius:30px;padding:9px;
    background:#05101C;border:1px solid #24405A;box-shadow:0 30px 70px rgba(0,0,0,.55);
  }
  .screen{position:relative;border-radius:23px;overflow:hidden;background:var(--ink);aspect-ratio:9/19}
  .screen-map{position:absolute;inset:0}
  .screen-map svg{width:100%;height:100%;display:block}
  .hdr{
    position:absolute;left:9px;right:9px;top:9px;background:rgb(var(--panel-rgb) / .94);
    border:1px solid rgb(var(--muted-rgb) / .3);border-radius:9px;padding:9px 11px;
  }
  .hdr .t{font-size:13.5px;font-weight:650;line-height:1.25}
  .hdr .s{font-family:var(--mono);font-size:8px;letter-spacing:.09em;color:var(--muted);
          text-transform:uppercase;margin-top:3px;line-height:1.7}
  .btns{position:absolute;right:9px;top:82px;display:flex;flex-direction:column;gap:7px}
  .rbtn{
    width:33px;height:33px;border-radius:50%;background:rgb(var(--panel-rgb) / .94);
    border:1px solid rgb(var(--muted-rgb) / .3);display:grid;place-items:center;
    font-family:var(--mono);font-size:7px;letter-spacing:.04em;color:var(--muted);
  }
  .rbtn.act{border-color:var(--accent);color:var(--accent)}
  .legend{
    position:absolute;left:10px;bottom:120px;display:flex;flex-direction:column;
    align-items:center;gap:4px;padding:7px 5px;border-radius:6px;background:rgb(var(--ink-rgb) / .72);
  }
  .legend .bar{
    height:84px;width:8px;border-radius:2px;
    background:linear-gradient(to bottom,var(--d0),var(--d5),var(--d10),var(--d15),var(--d20),
      var(--d25),var(--d30),var(--d35),var(--d40),var(--d44));
  }
  .legend .n{font-family:var(--mono);font-size:7.5px;color:var(--muted);letter-spacing:.04em;line-height:1}
  .sheet{
    position:absolute;left:9px;right:9px;bottom:9px;background:rgb(var(--panel-rgb) / .97);
    border:1px solid rgb(var(--muted-rgb) / .3);border-radius:11px;padding:12px;
  }
  .sheet .d{font-family:var(--display);font-weight:700;font-size:31px;line-height:1;
            color:var(--d25);letter-spacing:-.01em}
  .sheet .m{font-family:var(--mono);font-size:8.5px;letter-spacing:.08em;color:var(--muted);
            text-transform:uppercase;margin:5px 0 10px}
  .sheet .b{
    background:var(--accent);color:#062033;border-radius:5px;text-align:center;padding:8px;
    font-family:var(--mono);font-size:9px;letter-spacing:.11em;text-transform:uppercase;font-weight:700;
  }

  /* ============ contour art ============ */
  .art-frame{
    border:1px solid var(--rule);border-radius:3px;background:var(--abyss);
    padding:var(--s3);display:grid;place-items:center;
  }
  .art-frame svg{width:100%;height:auto;display:block}

  /* ============ evidence / permissions ============ */
  .card{background:var(--abyss);border:1px solid var(--rule);border-radius:3px;overflow:hidden}
  .card-head{
    display:flex;align-items:center;justify-content:space-between;gap:var(--s2);
    padding:11px 16px;border-bottom:1px solid var(--rule);background:rgba(255,255,255,.02);
    font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.14em;
    text-transform:uppercase;color:var(--muted);
  }
  .perms{margin:0;padding:var(--s3) 18px;list-style:none;display:grid;gap:var(--s3)}
  .perm{display:grid;grid-template-columns:20px 1fr;gap:12px;align-items:start}
  .perm .mk{font-family:var(--mono);font-size:15px;line-height:1.3}
  .perm.yes .mk{color:var(--d20)}
  .perm.no .mk{color:var(--danger)}
  .perm .t{font-size:var(--fs-small);font-weight:600;line-height:1.4;margin:0 0 3px}
  .perm .s{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.06em;
           color:var(--muted);margin:0;line-height:1.8}
  .perm.no .t{color:var(--danger)}

  /* ============ coverage ============ */
  .table{width:100%;border-collapse:collapse;margin:var(--s5) 0 0;font-size:var(--fs-small)}
  .table th{
    text-align:left;font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.16em;
    text-transform:uppercase;color:var(--muted);font-weight:400;
    padding:0 var(--s2) var(--s2) 0;border-bottom:1px solid var(--rule);
  }
  .table td{padding:var(--s2) var(--s2) var(--s2) 0;border-bottom:1px solid var(--hair);vertical-align:top}
  .table .st{font-weight:600;white-space:nowrap;font-size:var(--fs-body)}
  .table th:nth-child(2){text-align:right}
  .table .num{font-family:var(--mono);text-align:right;color:var(--on-ink);white-space:nowrap}
  .table .lic{color:var(--muted)}
  .table tr:last-child td{border-bottom:0}
  .table .tot td{
    font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.13em;
    text-transform:uppercase;color:var(--accent);border-top:1px solid var(--rule);
    padding-top:var(--s3);
  }
  .table .tot .num{font-size:var(--fs-body);letter-spacing:0}
  @media (max-width:620px){.table .lic,.table th:nth-child(3){display:none}}

  /* ============ plates ============ */
  .plates{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
  @media (max-width:560px){.plates{grid-template-columns:repeat(2,1fr)}}
  .plate{margin:0;background:var(--paper);border-radius:2px;padding:9px 9px 0;
         display:flex;flex-direction:column}
  .plate .img{aspect-ratio:5/4;display:grid;place-items:center;overflow:hidden}
  .plate img{width:100%;height:100%;object-fit:contain;display:block;mix-blend-mode:multiply}
  .plate .cap{border-top:1px solid rgba(42,36,24,.22);margin-top:6px;padding:8px 2px 10px;flex:1}
  .plate .cn{font-size:var(--fs-small);font-weight:650;color:var(--paper-ink);line-height:1.3}
  .plate .sn{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.05em;
             color:rgba(42,36,24,.62);font-style:italic;margin-top:2px}

  /* ============ connected band ============ */
  .band-intro{
    display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--gap);
    align-items:start;margin:0 0 var(--sec);
  }
  @media (max-width:920px){.band-intro{grid-template-columns:1fr;gap:var(--s3);margin-bottom:var(--s5)}}
  .band-intro .h2{max-width:16ch;margin-bottom:0}
  .band-intro .prose{max-width:52ch}
  .band-intro .lede:last-child,.band-intro .prose:last-child{margin-bottom:0}

  /* mock: anglers near you */
  .roster{border:1px solid var(--rule);border-radius:3px;background:var(--abyss);overflow:hidden}
  .roster-row{
    display:grid;grid-template-columns:38px 1fr auto;gap:var(--s2);align-items:center;
    padding:var(--s3) 18px;border-top:1px solid var(--hair);
  }
  .roster-row:first-of-type{border-top:0}
  .av{
    width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
    font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.04em;
    color:var(--ink);font-weight:700;
  }
  .roster .nm{font-size:var(--fs-small);font-weight:600;line-height:1.35}
  .roster .mt{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.07em;
              color:var(--muted);margin-top:2px}
  .roster .act{
    font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.13em;
    text-transform:uppercase;color:var(--accent);border:1px solid var(--accent);
    border-radius:2px;padding:5px 10px;white-space:nowrap;
  }

  /* mock: catch feed */
  .feed{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .fcard{border:1px solid var(--rule);border-radius:3px;background:var(--abyss);overflow:hidden}
  .fcard .im{aspect-ratio:4/3;background:var(--paper);display:grid;place-items:center;overflow:hidden}
  .fcard .im img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
  .fcard .mt{padding:11px 12px 13px}
  .fcard .sp{font-size:var(--fs-small);font-weight:650;line-height:1.3}
  .fcard .lk{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.07em;
             color:var(--muted);margin-top:3px;line-height:1.7}

  /* ============ datum ============ */
  .datum{border:1px solid var(--rule);border-radius:3px;background:var(--abyss);overflow:hidden}
  .datum-head{
    padding:13px 22px;border-bottom:1px solid var(--rule);background:rgba(248,113,113,.07);
    font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.17em;
    text-transform:uppercase;color:var(--danger);
  }
  .datum-list{margin:0;padding:var(--s1) 22px var(--s4);list-style:none}
  .datum-list li{padding:var(--s3) 0 0;border-top:1px solid var(--hair);margin-top:var(--s3)}
  .datum-list li:first-child{border-top:0;margin-top:0}
  .datum-list b{display:block;margin-bottom:5px;font-size:var(--fs-body)}
  .datum-list span{color:var(--muted);font-size:var(--fs-small)}

  /* ============ close ============ */
  .close{border-top:1px solid var(--rule);background:var(--abyss);scroll-margin-top:56px;
         padding:var(--sec) var(--gut);text-align:center}
  .close .inner{max-width:760px}
  .close .h2{margin-inline:auto;max-width:19ch}
  .close .lede{margin-inline:auto}
  .close .signup{margin-inline:auto}
  .close .done{margin-inline:auto}
  .close .note{text-align:center}

  /* ============ footer ============ */
  .foot{padding:var(--s5) var(--gut) calc(var(--s5) + var(--s2));
        border-top:1px solid var(--rule);background:var(--ink)}
  .foot-grid{
    max-width:var(--col);margin:0 auto;display:grid;
    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--s4);
  }
  .foot h4{
    font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.17em;
    text-transform:uppercase;color:var(--muted);margin:0 0 var(--s2);font-weight:400;
  }
  .foot p{margin:0 0 var(--s1);font-size:var(--fs-small);line-height:1.75;color:#7E96AC}
  .foot-base{
    max-width:var(--col);margin:var(--s5) auto 0;padding-top:var(--s3);
    border-top:1px solid var(--rule);display:flex;justify-content:space-between;
    gap:var(--s3);flex-wrap:wrap;font-family:var(--mono);font-size:var(--fs-micro);
    letter-spacing:.1em;text-transform:uppercase;color:var(--dim);
  }

  /* ============ reveal ============ */
  /* Gated on .js. With no script running the content must simply be visible:
     an unconditional opacity:0 here renders the page blank for anyone with
     scripting off, and blanked nine sections in the A/B harness, which strips
     scripts when it frames each section. */
  .rv{transition:opacity .7s ease,transform .7s ease}
  .js .rv{opacity:0;transform:translateY(16px)}
  .js .rv.in{opacity:1;transform:none}
  @media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none}}

  .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}


/* ============ subpages ============ */
body.subpage main.section{padding-top:calc(56px + var(--sec))}
body.subpage .inner{max-width:var(--col)}
.todo{color:var(--danger);font-weight:600}
.foot-links{
  max-width:var(--col);margin:0 auto;padding-top:var(--s3);display:flex;
  gap:var(--s4);flex-wrap:wrap;
  font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.14em;
  text-transform:uppercase;
}
.foot-links a{color:var(--muted);text-decoration:none}
.foot-links a:hover{color:var(--on-ink)}

/* the lake finder */
.finder{margin-top:var(--s5)}
.finder input[type=search]{
  width:100%;max-width:520px;background:var(--panel);color:var(--on-ink);
  border:1px solid var(--rule);border-radius:2px;padding:14px 16px;
  font-family:var(--body);font-size:16px;
}
.finder input[type=search]::placeholder{color:var(--dim)}
.finder input[type=search]:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:var(--s3) 0 var(--s2)}
.chip-btn{
  background:none;color:var(--muted);border:1px solid var(--rule);border-radius:2px;
  padding:7px 11px;cursor:pointer;font-family:var(--mono);font-size:var(--fs-micro);
  letter-spacing:.11em;text-transform:uppercase;display:flex;gap:8px;align-items:center;
}
.chip-btn em{font-style:normal;color:var(--dim)}
.chip-btn:hover{color:var(--on-ink);border-color:var(--muted)}
.chip-btn.on{color:var(--accent);border-color:var(--accent)}
.chip-btn.on em{color:var(--accent)}
.chip-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.lakes{list-style:none;margin:var(--s3) 0 0;padding:0;border-top:1px solid var(--hair)}
.lakes li{
  display:flex;justify-content:space-between;gap:var(--s3);align-items:baseline;
  padding:11px 0;border-bottom:1px solid var(--hair);
}
.lk-name{font-size:var(--fs-small);font-weight:600}
.lk-where{
  font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.07em;
  color:var(--muted);text-align:right;display:grid;gap:2px;
}
.lk-where b{font-weight:400}
.lk-where i{font-style:normal;color:var(--dim)}
@media (max-width:560px){
  .lakes li{flex-direction:column;gap:4px;align-items:flex-start}
  .lk-where{text-align:left}
}

/* FAQ */
.faqs{border-top:1px solid var(--hair)}
.faq{border-bottom:1px solid var(--hair)}
.faq summary{
  cursor:pointer;padding:var(--s3) 0;font-size:var(--fs-body);font-weight:600;
  list-style:none;display:flex;justify-content:space-between;gap:var(--s3);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent);font-family:var(--mono)}
.faq[open] summary::after{content:"\2013"}
.faq summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.faq-body{padding:0 0 var(--s3)}
.faq-body .prose{max-width:64ch;margin:0}
.faq-body a{color:var(--accent)}