/* Astoria Dayze - Channel Markers system.
   Palette (brief Part 1, section 3, locked): buoy red #B23A1D, channel green
   #1E5B45, river steel #46606B, hull white #F6F3EC, tar line #22262A.
   No tan, no sepia. Code sets plain type and runs interaction; the drawn
   marker plates are owed art (see BUILD-RECORD.md) - nothing here draws them. */
:root{
  --red:#B23A1D; --green:#1E5B45; --steel:#46606B; --hull:#F6F3EC; --tar:#22262A;
  --steel-soft:#DCE3E2; --line:#22262A;
  --label:"Arial Narrow","HelveticaNeue-CondensedBold",Impact,sans-serif;
  --body:-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--hull);color:var(--tar);font-family:var(--body);font-size:17px;line-height:1.45}
a{color:var(--green)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--red);outline-offset:2px}
h1,h2,h3{line-height:1.12;margin:0 0 .4em}
p{margin:0 0 .7em}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}

/* ---------- masthead ---------- */
.masthead{border-bottom:3px solid var(--tar);background:var(--hull)}
.masthead .wrap{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;padding-top:12px;padding-bottom:10px}
.wordmark{font-family:var(--label);font-weight:700;letter-spacing:.06em;font-size:30px;text-transform:uppercase;color:var(--tar);text-decoration:none}
.wordmark .z{color:var(--red)}
.tagline{font-size:15px;color:var(--steel);margin:0}
nav.mainnav{border-top:1px solid var(--tar)}
nav.mainnav .wrap{display:flex;flex-wrap:wrap;gap:2px 4px;padding-top:6px;padding-bottom:6px}
nav.mainnav a{font-family:var(--label);text-transform:uppercase;letter-spacing:.05em;font-size:15px;color:var(--tar);text-decoration:none;padding:6px 9px;border:1px solid transparent}
nav.mainnav a[aria-current]{border-color:var(--tar);background:var(--tar);color:var(--hull)}
nav.mainnav a:hover{border-color:var(--tar)}
.langtog{margin-left:auto;font-family:var(--label);text-transform:uppercase;letter-spacing:.05em;font-size:14px;background:none;border:1px solid var(--tar);padding:5px 9px;cursor:pointer;color:var(--tar)}

/* ---------- marker code line + marker chips (typographic placeholders) --- */
.marker{display:inline-flex;align-items:center;gap:7px;font-family:var(--label);text-transform:uppercase;letter-spacing:.07em;font-size:13px;font-weight:700;max-width:100%}
.marker::before{content:"";width:10px;height:10px;border-radius:50%;border:2px solid currentColor;flex:none}
.marker.out{color:var(--red)} .marker.home{color:var(--green)}
.codeline{border:1.5px solid var(--tar);padding:10px 12px;display:flex;flex-wrap:wrap;gap:8px 22px;background:#fff}
.codeline p{margin:0;font-size:15px}

/* ---------- the departure board (front room) ---------- */
.boardhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;margin:18px 0 4px}
.boardhead h1{font-size:34px}
.clockline{font-family:var(--label);text-transform:uppercase;letter-spacing:.06em;color:var(--steel);font-size:15px}
.board{border:2.5px solid var(--tar);background:#fff}
.board-cols,.board-row{display:grid;grid-template-columns:1fr;gap:2px 14px;padding:10px 12px}
.board-cols{display:none}
.board-row{border-top:1.5px solid var(--tar);text-decoration:none;color:var(--tar);position:relative}
.board-row:first-of-type{border-top:none}
.board-row:hover{background:var(--steel-soft)}
.board-row .rname{font-weight:700;font-size:19px}
.board-row .rshape{font-size:15px;color:var(--steel)}
.board-row .rlen,.board-row .rcost{font-family:var(--label);text-transform:uppercase;letter-spacing:.05em;font-size:14px}
.board-row .fit{display:inline-block;font-family:var(--label);text-transform:uppercase;letter-spacing:.05em;font-size:12.5px;border:1.5px solid var(--green);color:var(--green);padding:1px 7px;margin-left:8px;vertical-align:2px}
.board-row.rain-first{box-shadow:inset 5px 0 0 var(--red)}
@media(min-width:760px){
  .board-cols{display:grid;grid-template-columns:2.2fr 2fr 1fr 1.3fr;font-family:var(--label);text-transform:uppercase;letter-spacing:.06em;font-size:13px;color:var(--steel);border-bottom:1.5px solid var(--tar);padding-bottom:6px}
  .board-row{grid-template-columns:2.2fr 2fr 1fr 1.3fr;align-items:baseline}
}

/* entrance picker: time first, topics never */
.timepick{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px}
.timepick a,.timepick button{font-family:var(--label);text-transform:uppercase;letter-spacing:.05em;font-size:15px;border:1.5px solid var(--tar);background:#fff;color:var(--tar);padding:8px 12px;text-decoration:none;cursor:pointer;max-width:100%;overflow-wrap:break-word}
.timepick a:hover,.timepick button:hover{background:var(--tar);color:var(--hull)}

/* ---------- Today on the River / Rain's On ---------- */
.todaygrid{display:grid;grid-template-columns:1fr;gap:14px;margin:16px 0;align-items:start}
@media(min-width:860px){.todaygrid{grid-template-columns:1.5fr 1fr}}
.panel{border:2px solid var(--tar);background:#fff;padding:14px 16px}
.panel h2{font-size:22px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.panel .stamp{font-size:13.5px;color:var(--steel)}
.evlist{list-style:none;margin:8px 0;padding:0}
.evlist li{border-top:1px solid var(--steel-soft);padding:8px 0}
.evlist li:first-child{border-top:none}
.evname{font-weight:700}
.evmeta{font-size:15px}
.src{font-size:13.5px;color:var(--steel)}
.src a{color:var(--steel)}
#rainsOnBtn{font-family:var(--label);text-transform:uppercase;letter-spacing:.06em;font-size:16px;background:var(--red);color:#fff;border:2px solid var(--red);padding:10px 16px;cursor:pointer}
#rainsOnBtn[aria-pressed="true"]{background:var(--hull);color:var(--red)}
.rainstate{display:none}
body.rain .rainstate{display:block}
body.rain .fairlist{display:none}

/* ---------- orientation strip ---------- */
.orient{border-top:2.5px solid var(--tar);border-bottom:2.5px solid var(--tar);margin:20px 0;padding:10px 0}
.orient ol{display:flex;flex-wrap:wrap;gap:6px 10px;list-style:none;margin:0;padding:0;align-items:baseline}
.orient li{font-family:var(--label);text-transform:uppercase;letter-spacing:.06em;font-size:16px}
.orient li+li::before{content:"→";color:var(--red);margin-right:10px;font-family:var(--body)}

/* ---------- entrances (front room lower half) ---------- */
.entrances{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0 26px}
@media(min-width:760px){.entrances{grid-template-columns:repeat(3,1fr)}}
.entrance{border:1.5px solid var(--tar);background:#fff;padding:12px 14px;text-decoration:none;color:var(--tar)}
.entrance:hover{background:var(--steel-soft)}
.entrance .et{font-weight:700;font-size:18px;display:block}
.entrance .ed{font-size:14.5px;color:var(--steel)}

/* ---------- generic surfaces ---------- */
main .wrap{padding-top:6px;padding-bottom:30px}
.pagehead{margin:16px 0 6px}
.pagehead h1{font-size:30px}
.lede{font-size:18px;max-width:62ch}
.limit{border-left:5px solid var(--steel);padding:8px 12px;background:#fff;font-size:15px;max-width:70ch}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0;align-items:center}
.filters .flabel{font-family:var(--label);text-transform:uppercase;letter-spacing:.05em;font-size:14px;color:var(--steel)}
.chip{font-family:var(--label);text-transform:uppercase;letter-spacing:.04em;font-size:14.5px;border:1.5px solid var(--tar);background:#fff;color:var(--tar);padding:6px 11px;cursor:pointer;max-width:100%;overflow-wrap:break-word}
.chip[aria-pressed="true"]{background:var(--tar);color:var(--hull)}
.chip.free[aria-pressed="true"]{background:var(--green);border-color:var(--green)}
.filters select,.filters input[type="search"]{font:inherit;font-size:15.5px;padding:6px 8px;border:1.5px solid var(--tar);background:#fff;color:var(--tar)}
.countline{font-family:var(--label);text-transform:uppercase;letter-spacing:.05em;font-size:14px;color:var(--steel)}

/* index rows (businesses, restaurants, story index): a ledger, not cards */
.rows{border-top:2px solid var(--tar)}
.row{border-bottom:1.5px solid var(--tar);padding:11px 2px;background:transparent}
.row h3{font-size:18.5px;margin:0 0 2px;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:baseline}
.row .meta{font-size:15px}
.row .addr{color:var(--steel);font-size:15px}
.badge{font-family:var(--label);text-transform:uppercase;letter-spacing:.05em;font-size:12.5px;border:1.5px solid var(--tar);padding:0 6px;white-space:normal;max-width:100%;min-width:0;overflow-wrap:break-word}
.badge.free{border-color:var(--green);color:var(--green)}
.badge.closed{border-color:var(--red);color:var(--red)}
.badge.conflict{border-color:var(--red);color:var(--red)}
.facts{margin:4px 0 0;padding:0;list-style:none}
.facts li{font-size:15.5px;margin:2px 0}
.facts li::before{content:"- "}
.priceband{font-family:var(--label);font-weight:700;letter-spacing:.04em}
.row.hide{display:none}
.rowwrap{transition:opacity .25s ease,transform .25s ease}
.rowwrap.leaving{opacity:0;transform:translateX(-8px)}
.rowwrap.hide{display:none}
.run.hide{display:none}

/* runs: a horizontal line of stops, not a stack */
.run{border:2px solid var(--tar);background:#fff;margin:18px 0;padding:14px 16px}
.run h2{font-size:24px}
.runline{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:0;list-style:none;margin:14px 0 6px;padding:10px 2px 14px;border-top:1.5px solid var(--tar);border-bottom:1.5px solid var(--tar)}
.runline li{flex:1 0 170px;max-width:230px;padding:0 12px 0 0;position:relative}
.runline li .dot{width:13px;height:13px;border-radius:50%;border:2.5px solid var(--tar);background:var(--hull);display:block;margin-bottom:7px}
.runline li.out .dot{border-color:var(--red)} .runline li.home .dot{border-color:var(--green)}
.runline .sname{font-weight:700;font-size:16px;display:block}
.runline .swhy{font-size:13.5px;color:var(--steel);display:block}
.decisions{font-size:15px}
.decisions li{margin:3px 0}
.sheetbar{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;align-items:center}
.sheetbar button{font-family:var(--label);text-transform:uppercase;letter-spacing:.05em;font-size:14.5px;border:1.5px solid var(--tar);background:var(--hull);padding:7px 12px;cursor:pointer}
.sheetbar button:hover{background:var(--tar);color:var(--hull)}
.pickline{font-size:14px}
.pickline input{width:19px;height:19px;vertical-align:-3px}

/* calendar */
.calgrid{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:860px){.calgrid{grid-template-columns:340px 1fr}}
.monthgrid{border:2px solid var(--tar);background:#fff;padding:10px}
.monthgrid table{border-collapse:collapse;width:100%}
.monthgrid th{font-family:var(--label);text-transform:uppercase;font-size:12.5px;color:var(--steel);padding:4px 0}
.monthgrid td{padding:0}
.monthgrid button{width:100%;aspect-ratio:1.25;font:inherit;font-size:15px;background:none;border:1px solid transparent;cursor:pointer;color:var(--tar)}
.monthgrid button.has{border-color:var(--steel);font-weight:700}
.monthgrid button.today{box-shadow:inset 0 0 0 2px var(--red)}
.monthgrid button[aria-pressed="true"]{background:var(--tar);color:var(--hull)}
.monthnav{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.monthnav button{font-family:var(--label);text-transform:uppercase;font-size:14px;border:1.5px solid var(--tar);background:#fff;padding:4px 10px;cursor:pointer}

/* story / year index */
.yearcols{columns:2;column-gap:26px}
@media(min-width:760px){.yearcols{columns:3}}
.yearblock{break-inside:avoid;border-top:2px solid var(--tar);padding:8px 0 12px}
.yearblock h3{font-family:var(--label);letter-spacing:.05em;font-size:19px}
.native-doors{border:2px solid var(--green);background:#fff;padding:14px 16px;margin:18px 0}
.native-doors h2{color:var(--green)}

/* passport */
.passport-sheet{border:2.5px solid var(--tar);background:#fff;padding:16px}
.stampgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(min-width:760px){.stampgrid{grid-template-columns:repeat(3,1fr)}}
.stampbox{border:1.5px dashed var(--steel);min-height:130px;padding:9px}
.stampbox .sname{font-weight:700}
.stampbox .blank{font-size:13px;color:var(--steel)}

/* footer */
footer{border-top:3px solid var(--tar);margin-top:8px}
footer .wrap{padding-top:14px;padding-bottom:22px;font-size:14.5px;color:var(--steel)}
footer a{color:var(--green)}

/* ---------- motion (Steven's Oct 26 license: movement is code's job) -----
   Every animation has a reason: board rows flip in like a departure board
   settling; filter changes move the index so the eye can follow what left
   and what stayed; the run line slides a stop into focus. Transform and
   opacity only, so phone-width rendering stays honest. */
@keyframes flipIn{from{opacity:0;transform:rotateX(55deg) translateY(-4px)}to{opacity:1;transform:rotateX(0) translateY(0)}}
@keyframes riseIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.board{perspective:600px}
.board-row{animation:flipIn .45s ease both;animation-delay:calc(var(--i,0)*60ms)}
.panel,.run,.native-doors{animation:riseIn .4s ease both}
.row{transition:opacity .25s ease,transform .25s ease}
.row.leaving{opacity:0;transform:translateX(-8px)}
.runline li{transition:background .25s ease}
.runline li.flash{background:var(--steel-soft)}
.todaygrid{transition:opacity .18s ease}
body.rain .todaygrid{animation:riseIn .35s ease}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001s !important;animation-delay:0s !important;transition-duration:.001s !important}
}

/* ---------- print: every sheet complete without the phone ---------- */
@media print{
  nav.mainnav,.langtog,.timepick,.filters,.sheetbar,.no-print{display:none !important}
  body{background:#fff;font-size:12.5pt}
  .board,.panel,.run,.monthgrid,.passport-sheet{border-color:#000;break-inside:avoid}
  a{color:#000;text-decoration:none}
  .row{break-inside:avoid}
}