:root{--cream:#f3e9d6;--paper:#faf4e8;--ink:#2b2b2b;--ink2:#6b625a;--brass:#b08d57;--brass2:#8d6d3c;--salmon:#e9c6b2;--mustard:#d9a84e;--teal:#6aa4a1;--brick:#b5452a;--water:#8db5c3;
  --c1:#2f5fb3;--c2:#c2561c;--c3:#1e8f68;--c4:#7a4f9e;--sans:'Jost',Futura,'Century Gothic',sans-serif;--type:'Special Elite','Courier New',monospace}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.45;overflow-x:hidden}
a{color:var(--brick)}
.wrap{max-width:1180px;margin:0 auto;padding:0 16px}
header{padding:28px 16px 0;text-align:center}
.kicker{letter-spacing:.3em;text-transform:uppercase;font-size:11px;font-weight:500;color:var(--ink2);text-align:center}
.title{font-weight:600;font-size:clamp(30px,6vw,44px);letter-spacing:.06em;text-transform:uppercase;text-align:center;margin:6px 0 2px}.title a{color:inherit;text-decoration:none}
.sub{letter-spacing:.14em;font-size:14px;color:var(--ink2);text-align:center}
.nav{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;padding:14px 0 0}.nav a{color:var(--ink);text-decoration:none;border-bottom:2px solid transparent;padding-bottom:3px;white-space:nowrap}.nav a.on{border-color:var(--brick)}
.chapter{text-align:center;margin:48px 16px 18px}.chapter .num{font-size:12px;letter-spacing:.4em;color:var(--brick);font-weight:600}.chapter h2{margin:4px 0 0;font-size:clamp(20px,4vw,26px);font-weight:500;letter-spacing:.12em;text-transform:uppercase}
.chapter p{color:var(--ink2);max-width:640px;margin:10px auto 0;font-size:16px}
.rule{width:64px;height:2px;background:var(--brick);margin:12px auto 0}
.plaque{display:inline-block;background:var(--brass);color:#fff8ea;padding:6px 18px;border-radius:4px;letter-spacing:.18em;text-transform:uppercase;font-size:12px;font-weight:600;box-shadow:inset 0 0 0 2px #fff3dd55,0 2px 0 var(--brass2);max-width:92vw}
/* porthole */
.porthole{position:relative;width:min(92vw,820px);aspect-ratio:1;margin:28px auto 0}
.porthole .ring{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 50% 30%,#d9b982,#b08d57 55%,#7d5f36);box-shadow:0 18px 40px #0003,inset 0 0 0 6px #fff3dd33}
.porthole .glass{position:absolute;inset:4.6%;border-radius:50%;overflow:hidden;box-shadow:inset 0 0 60px #0006;background:#1b2740}
.porthole svg{width:100%;height:100%;display:block}
.porthole .reticle{position:absolute;inset:4.6%;border-radius:50%;pointer-events:none;background:linear-gradient(#ffffff44,#ffffff44) 50% 0/1px 100% no-repeat,linear-gradient(#ffffff44,#ffffff44) 0 50%/100% 1px no-repeat}
.porthole .rivet{position:absolute;width:2.2%;height:2.2%;border-radius:50%;background:radial-gradient(circle at 35% 35%,#f1dcb0,#8d6d3c);left:calc(50% - 1.1%);top:calc(50% - 1.1%)}
.porthole .tag{position:absolute;left:50%;bottom:-16px;transform:translateX(-50%);white-space:nowrap}
/* gauges */
.gauges{display:flex;justify-content:center;gap:10px 18px;margin:44px auto 0;flex-wrap:wrap;padding:0 8px}
.gauge{width:150px;text-align:center}.gauge svg{width:140px;height:140px}.glabel{letter-spacing:.2em;text-transform:uppercase;font-size:11px;font-weight:600;margin-top:2px}.gsub{font-size:12px;color:var(--ink2)}
/* log */
.log{background:var(--paper);border:2px solid var(--brass);padding:20px 24px;max-width:760px;margin:0 16px;border-radius:3px}
@media(min-width:800px){.log{margin:0 auto}}
.log .entry{display:grid;grid-template-columns:62px 1fr;gap:12px;padding:9px 0;border-bottom:1px dashed #d8c9ad}.log .entry:last-child{border:0}
.log .t{color:var(--brick);font-weight:600;letter-spacing:.08em}.log .e{font-style:italic}
/* cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;max-width:1000px;margin:0 auto;padding:0 16px}
.card{background:var(--paper);border:2px solid var(--brass);padding:14px 10px;text-align:center;border-radius:3px;position:relative}
.card .day{letter-spacing:.3em;font-size:11px;font-weight:600;text-transform:uppercase;color:var(--brick)}.card .ico{font-size:32px;line-height:1.2;margin:4px 0}.card .hl{font-size:18px}.card .pp{font-size:13px;color:var(--ink2)}.card .cond{font-size:11px;letter-spacing:.08em;text-transform:uppercase;margin-top:6px}
.hypo{max-width:760px;margin:20px auto 0;font-style:italic;text-align:center;color:var(--ink2);padding:0 16px}
/* expedition cards */
.exp{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:16px;max-width:1180px;margin:0 auto;padding:0 16px}
.xcard{background:var(--paper);border:2px solid var(--brass);padding:18px 18px 16px;border-radius:3px;position:relative;text-align:left}
.xcard .k{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--brick);font-weight:600}.xcard h3{margin:4px 0 8px;font-size:22px;font-weight:600}.xcard h3 a{color:inherit;text-decoration:none}
.xcard .verdict{font-size:15px;font-weight:600;letter-spacing:.04em;margin-bottom:8px}.xcard .why{font-size:14px;color:var(--ink2)}.xcard ul{margin:8px 0 0;padding-left:18px;font-size:14px}
.meter{height:8px;background:#e8dcc4;border-radius:4px;margin:10px 0 6px;overflow:hidden}.meter i{display:block;height:100%;background:var(--brick)}
.stamp{position:absolute;right:12px;top:auto;bottom:12px;border:2px solid var(--brick);color:var(--brick);padding:3px 8px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;transform:rotate(-8deg);opacity:.8;font-size:11px}
/* tables */
table.ledger{margin:0 auto;border-collapse:collapse;background:var(--paper);border:2px solid var(--brass);max-width:100%;font-size:15px}
table.ledger td,table.ledger th{padding:7px 12px;border-bottom:1px dashed #d8c9ad;text-align:left}table.ledger th{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--brick);font-weight:600}
td.n{color:var(--brick);font-weight:600}td.sci{font-style:italic;color:var(--ink2)}td.c,th.c{text-align:right;font-weight:600}
.tscroll{overflow-x:auto;padding:0 16px}
/* territory */
.map{max-width:1180px;margin:0 16px;background:var(--paper);border:2px solid var(--brass);padding:12px;border-radius:3px;box-shadow:0 10px 30px #0002}
@media(min-width:1212px){.map{margin:0 auto}}
.map svg{width:100%;height:auto;display:block;font-family:var(--sans)}
.legend{display:flex;justify-content:center;gap:10px 22px;flex-wrap:wrap;font-size:12px;letter-spacing:.06em;margin-top:10px;color:var(--ink2)}
.legend span::before{content:"";display:inline-block;width:22px;height:0;border-top:3px solid;margin-right:7px;vertical-align:middle}
.legend .creek::before{border-color:var(--water)}.legend .trail::before{border-top:3px dashed var(--brick)}.legend .road::before{border-color:transparent}
.places{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;max-width:1000px;margin:22px auto 0;padding:0 16px}
.place{text-align:center;text-decoration:none;color:var(--ink)}.place svg{width:120px;height:120px;display:block;margin:0 auto 6px}.place .pl{font-size:10px;letter-spacing:.25em;text-transform:uppercase;font-weight:600}
/* record */
.viewer{display:grid;grid-template-columns:minmax(0,640px) 1fr;gap:24px;align-items:start;max-width:1120px;margin:0 auto;padding:0 16px}
@media(max-width:860px){.viewer{grid-template-columns:1fr}}
.screen{border:12px solid var(--brass);border-radius:16px;overflow:hidden;background:#1b2740;box-shadow:0 14px 34px #0004}.screen svg{display:block;width:100%;aspect-ratio:12/7}
.readout{background:var(--paper);border:2px solid var(--brass);padding:18px 22px;border-radius:3px}
.readout .big{font-size:48px;font-weight:600;line-height:1}.readout .when{letter-spacing:.22em;text-transform:uppercase;font-size:11px;color:var(--brick);font-weight:600}
.readout .kv{display:grid;grid-template-columns:1fr auto;gap:4px 18px;margin-top:12px;font-size:15px}.readout .kv b{font-weight:600}
.scrub{max-width:1120px;margin:16px 16px 0;background:var(--paper);border:2px solid var(--brass);padding:14px 18px;border-radius:3px}
@media(min-width:1152px){.scrub{margin:16px auto 0}}
.scrub input{width:100%;accent-color:var(--brick)}
.strip{display:flex;gap:2px;margin-top:8px}.strip .d{flex:1;height:30px;border-radius:2px;position:relative;cursor:pointer;min-width:4px}.strip .d.on{outline:3px solid var(--brick);outline-offset:1px}
.strip .d i{position:absolute;left:0;right:0;bottom:0;background:var(--c1);opacity:.85;display:block}
.scrub .lbl{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);margin-top:4px;gap:8px}.scrub .lbl span:nth-child(2){text-align:center}
.sm{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;max-width:1120px;margin:0 auto;padding:0 16px}
.fig{background:var(--paper);border:2px solid var(--brass);padding:12px 14px 6px;border-radius:3px;position:relative}.fig h3{margin:0 0 2px;font-weight:600;font-size:12px;letter-spacing:.25em;text-transform:uppercase}.fig .sub{font-size:12px;color:var(--ink2);margin-bottom:6px;text-align:left;letter-spacing:0}
.fig svg{width:100%;height:170px;display:block;font-family:var(--sans)}
.tip{position:absolute;pointer-events:none;background:#2b2b2b;color:#fff;font-size:12px;padding:5px 8px;border-radius:3px;display:none;white-space:nowrap}
.recs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;max-width:1120px;margin:0 auto;padding:0 16px}.rec{background:var(--paper);border:2px solid var(--brass);padding:14px 8px;text-align:center;border-radius:3px}
.rec .rk{font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:var(--brick);font-weight:600}.rec .rv{font-size:26px;font-weight:600;margin:4px 0 0}.rec .rd{font-size:12px;color:var(--ink2)}
/* stills */
.stills{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;max-width:1120px;margin:0 auto;padding:0 16px}
.still{background:#fff;padding:12px 12px 14px;box-shadow:0 8px 20px #0003;transform:rotate(-.6deg)}.still:nth-child(even){transform:rotate(.7deg)}.still img{width:100%;display:block;aspect-ratio:4/3;object-fit:cover}
.still .cap{font-family:var(--type);font-size:13px;margin-top:10px;color:#3a3a3a;line-height:1.35}
/* dossier */
.sheet{background:var(--paper);padding:26px 22px;box-shadow:0 6px 18px #0003;font-family:var(--type);position:relative;margin:0 16px 22px;max-width:900px}
@media(min-width:932px){.sheet{margin:0 auto 22px;padding:34px 40px}}
.sheet.tilt{transform:rotate(-.4deg)}.sheet h1{font-family:var(--type);font-size:clamp(20px,4vw,26px);letter-spacing:.1em;text-transform:uppercase;margin:0 0 6px;font-weight:400}.sheet p{font-size:16px;margin:0 0 12px}
.sheet .stamp{right:16px;top:16px;bottom:auto}
.crew{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:8px}.crew div{border:1px dashed #b9ad97;padding:12px 14px}.crew b{display:block;font-family:var(--sans);letter-spacing:.1em;text-transform:uppercase;font-size:13px}.crew i{display:block;font-size:12px;color:var(--ink2);margin-bottom:6px}.crew p{font-size:14px;margin:0}
.note{display:inline-block;background:#f8e58a;padding:10px 14px;font-family:var(--sans);font-style:italic;transform:rotate(1.5deg);box-shadow:0 4px 10px #0003;max-width:320px;font-size:14px;margin-top:10px}
.standing{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0}.standing div{text-align:center;border:1px dashed #b9ad97;padding:10px 6px}.standing b{font-size:26px;display:block;font-family:var(--sans)}.standing span{font-size:12px;letter-spacing:.15em;text-transform:uppercase}
/* place pages */
.hero{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center;max-width:900px;margin:0 auto;padding:0 16px}
@media(max-width:700px){.hero{grid-template-columns:1fr;justify-items:center;text-align:center}}
.hero svg{width:min(70vw,300px);height:auto}.hero p{color:var(--ink2);margin:6px 0 0}
.tide{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}.tide div{background:var(--paper);border:2px solid var(--brass);padding:10px 16px;border-radius:3px;text-align:center;min-width:120px}.tide b{display:block;font-size:22px}.tide span{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--brick)}
footer{text-align:center;color:var(--ink2);font-size:13px;padding:50px 16px 40px;letter-spacing:.04em;line-height:1.6}
@keyframes spin{to{transform:rotate(360deg)}}

/* texture and seasonal ornaments (set per build in the page head: --grain, --accent) */
body{background-image:var(--grain)}
.chapter h2 .acc{vertical-align:middle;margin:0 10px;position:relative;top:-2px}
.xcard,.card,.log,.readout,.fig,.rec,.sheet,.map{background-image:var(--accent),var(--grain);background-repeat:no-repeat,repeat;background-position:right 8px bottom 8px,0 0;background-size:34px,240px}
.card,.rec{padding-bottom:26px}
.still svg{width:100%;height:auto;display:block;aspect-ratio:1;background:#f3e9d6}
.places.phone{display:none}@media(max-width:860px){.places.phone{display:grid}}
.hours{max-width:1000px;margin:0 auto;padding:0 16px}.hours svg{width:100%;height:150px;display:block;background:var(--paper);border:2px solid var(--brass);border-radius:3px;font-family:var(--sans)}
.tidefig{max-width:1120px;margin:0 auto;padding:0 16px}.tidefig svg{width:100%;height:220px;display:block;background:var(--paper);border:2px solid var(--brass);border-radius:3px;font-family:var(--sans)}
.xcard .stamp{position:static;display:inline-block;transform:none;opacity:1;margin:0 0 8px;font-size:10px;padding:3px 8px;border-radius:2px;background:#fff6ec}

.still img{width:100%;display:block;aspect-ratio:1;object-fit:cover}
.heroart{width:min(78vw,340px);border:10px solid #fff;box-shadow:0 10px 24px #0003;transform:rotate(-1deg)}
.portrait{width:100%;display:block;aspect-ratio:1;object-fit:cover;margin-bottom:10px;border:1px solid #d8c9ad}
.ship{max-width:420px;margin:0 auto 26px;text-align:center}.ship img{width:100%;display:block;box-shadow:0 10px 24px #0003;transform:rotate(1.5deg)}.ship .cap{font-family:var(--type);font-size:13px;margin-top:12px;color:#3a3a3a}
.chapter h2 img.acc{vertical-align:middle;margin:0 10px;position:relative;top:-3px;width:34px;height:34px;object-fit:contain}
.xcard,.card,.log,.readout,.fig,.rec,.sheet{background-size:22px auto,240px;background-position:right 10px bottom 10px,0 0}
.sheet{background-size:30px auto,240px}
.map{background-image:var(--grain)}
.xcard{padding-bottom:36px}