:root{
    --ink:#0E2229;
    --ink-2:#16303A;
    --ink-3:#20434F;
    --sand:#EADFC9;
    --sand-dim:#9DAAAE;
    --ferry:#38B08A;      /* ferry green */
    --signal:#F0A93B;     /* wharf signal ochre */
    --mono:ui-monospace,"SF Mono",Menlo,monospace;
    --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html,body{margin:0;padding:0}
  body{
    background:var(--ink);color:var(--sand);font-family:var(--sans);
    font-size:16px;line-height:1.5;
    padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    -webkit-text-size-adjust:100%;
  }
  a{color:inherit}

  /* ---------- masthead ---------- */
  header{padding:26px 20px 14px}
  .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ferry)}
  h1{font-size:34px;line-height:1.02;letter-spacing:-.03em;font-weight:800;margin:10px 0 8px}
  h1 em{font-style:normal;color:var(--sand-dim);font-weight:500}
  .sub{color:var(--sand-dim);font-size:14.5px;margin:0}
  .keynote{
    margin:16px 0 0;padding:11px 13px;border:1px solid var(--ink-3);border-radius:11px;
    font-size:14px;background:var(--ink-2)
  }
  .keynote b{color:var(--signal)}

  /* ---------- open now strip ---------- */
  .nowbar{padding:6px 16px 2px}
  .now-head{display:flex;align-items:baseline;justify-content:space-between;padding:0 2px 8px}
  .now-head span{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--sand-dim)}
  .now-head #nowclock{color:var(--ferry)}
  .nowrow{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
  .nowrow::-webkit-scrollbar{display:none}
  .nowcard{
    flex:0 0 auto;max-width:64vw;border:1px solid var(--ink-3);border-radius:11px;background:var(--ink-2);
    padding:10px 12px;cursor:pointer;text-align:left;color:inherit;font:inherit
  }
  .nowcard strong{display:block;font-size:14.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .nowcard span{font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;color:var(--sand-dim);text-transform:uppercase}
  .nowcard:active{opacity:.6}
  .nowempty{font-family:var(--mono);font-size:11.5px;color:var(--sand-dim);letter-spacing:.05em;padding:2px}

  /* ---------- filters ---------- */
  .filters{
    position:sticky;top:0;z-index:20;background:rgba(14,34,41,.93);
    -webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);
    border-bottom:1px solid var(--ink-3);padding:9px 0 9px;margin-top:8px
  }
  .chiprow{display:flex;gap:7px;overflow-x:auto;padding:0 16px;scrollbar-width:none}
  .chiprow::-webkit-scrollbar{display:none}
  .chip{
    flex:0 0 auto;border:1px solid var(--ink-3);background:transparent;color:var(--sand-dim);
    font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
    padding:7px 12px;border-radius:100px;cursor:pointer;font-weight:600
  }
  .chip[aria-pressed="true"]{background:var(--sand);color:var(--ink);border-color:var(--sand)}
  .barrow{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-right:16px}
  .locbtn{
    flex:0 0 auto;border:1px solid var(--ink-3);background:transparent;color:var(--sand-dim);
    font-family:var(--mono);font-size:11px;letter-spacing:.08em;padding:5px 11px;border-radius:100px;
    cursor:pointer;font-weight:600;margin-top:8px
  }
  .locbtn[data-on="1"]{background:var(--signal);border-color:var(--signal);color:#2A1B04}
  .locbtn[data-on="wait"]{opacity:.55}
  .maptoggle{display:flex;align-items:center;gap:6px;padding:9px 0 1px 16px}
  .maptoggle span{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--sand-dim);margin-right:2px}
  .maptoggle button{
    border:1px solid var(--ink-3);background:transparent;color:var(--sand-dim);
    font-family:var(--mono);font-size:11px;letter-spacing:.08em;padding:5px 11px;border-radius:100px;
    cursor:pointer;font-weight:600
  }
  .maptoggle button[aria-pressed="true"]{background:var(--ferry);border-color:var(--ferry);color:#08221B}

  /* ---------- zones + cards ---------- */
  main{padding:0 16px 60px}
  .zone{margin-top:30px}
  .zone-h{display:flex;align-items:center;gap:10px;margin-bottom:4px}
  .zone-h h2{font-size:12px;font-family:var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ferry);margin:0;font-weight:700}
  .zone-h .rule{flex:1;height:1px;background:var(--ink-3)}
  .zone-note{color:var(--sand-dim);font-size:14px;margin:8px 0 14px}

  .alsonote{
    font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
    color:var(--sand-dim);margin:20px 0 10px;padding-top:12px;border-top:1px solid var(--ink-3)
  }
  .card{
    border:1px solid var(--ink-3);border-radius:14px;background:var(--ink-2);
    padding:14px 14px 12px;margin-bottom:10px;scroll-margin-top:64px
  }
  .card.flash{animation:flash 1.1s ease}
  @keyframes flash{0%{border-color:var(--signal);background:#1D3B45}100%{border-color:var(--ink-3);background:var(--ink-2)}}
  .card-top{display:flex;gap:10px;align-items:flex-start}
  .card h3{margin:0;font-size:18px;letter-spacing:-.015em;font-weight:700;flex:1;line-height:1.25}
  .walk{
    font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ink);
    background:var(--sand);border-radius:6px;padding:3px 7px;white-space:nowrap;font-weight:700;margin-top:2px
  }
  .walk.far{background:transparent;color:var(--sand-dim);border:1px solid var(--ink-3)}
  .meta{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--sand-dim);margin:6px 0 0;text-transform:uppercase}
  .meta .open{color:var(--ferry)}
  .meta .shut{color:#E2705F}
  .tag-new{color:var(--signal)}
  .tag-updated{
    color:var(--ferry);font-family:var(--mono);font-size:11px;letter-spacing:.06em;
    text-transform:uppercase;font-weight:700;vertical-align:middle;margin-left:4px
  }
  .blurb{font-size:15px;margin:9px 0 0;color:#D6CDBA}
  .blurb b{color:var(--sand)}
  .actions{display:flex;gap:8px;margin-top:9px}
  .actions+.actions{margin-top:8px}
  .btn{
    flex:1;text-align:center;text-decoration:none;border:1px solid var(--ink-3);border-radius:9px;
    padding:9px 6px;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
    color:var(--sand);font-weight:600
  }
  .btn.go{background:var(--ferry);border-color:var(--ferry);color:#08221B}
  .btn:active{opacity:.65}

  /* ---------- prose blocks ---------- */
  .tip{border:1px solid var(--ink-3);border-radius:12px;background:var(--ink-2);margin-bottom:8px;overflow:hidden}
  .tip summary{
    list-style:none;cursor:pointer;padding:13px 14px;font-size:16px;font-weight:700;letter-spacing:-.01em;
    display:flex;align-items:center;justify-content:space-between;gap:10px
  }
  .tip summary::-webkit-details-marker{display:none}
  .tip summary::after{content:'+';font-family:var(--mono);font-size:17px;color:var(--ferry);font-weight:400}
  .tip[open] summary::after{content:'\2212'}
  .tip[open] summary{color:var(--ferry)}
  .tip p{margin:0;padding:0 14px 14px;font-size:15px;color:#D6CDBA;line-height:1.55}
  .prose{border-left:2px solid var(--ink-3);padding:2px 0 2px 14px;margin:14px 0 18px;font-size:15px;color:#D6CDBA}
  .prose h4{margin:0 0 6px;font-size:12px;font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--sand)}
  .prose p{margin:0 0 9px}
  .prose p:last-child{margin-bottom:0}
  .route{border:1px solid var(--ink-3);border-radius:14px;padding:14px;margin-bottom:10px;background:var(--ink-2)}
  .route strong{display:block;font-size:17px;letter-spacing:-.015em;margin-bottom:3px}
  .route span{font-size:14.5px;color:#D6CDBA;display:block}
  .empty{color:var(--sand-dim);font-size:14px;padding:22px 2px;font-family:var(--mono);letter-spacing:.05em}
  footer{padding:26px 20px 40px;color:var(--sand-dim);font-size:12.5px;font-family:var(--mono);letter-spacing:.05em;line-height:1.7;border-top:1px solid var(--ink-3);margin:24px 16px 0}
  @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}