/* ============================================================
   IOR STORIES — Field Journal theme
   Everything visual lives in this one file.
   The colors at the top are the knobs you're most likely to turn.
   ============================================================ */

:root{
  /* paper family (default: Aged Tan) */
  --paper:#e4d4ae; --paper2:#ecdfc0; --card:#f2e8cf; --line:#c2ae7f; --grid:#d0bf94;
  /* ink family */
  --ink:#2b2416; --muted:#61553a; --faint:#837655;
  /* accents */
  --stamp:#8e2b1a; --olive:#4f5426; --mustard:#a97e22;
  /* type */
  --type:'Special Elite',monospace; --mono:'Courier Prime',monospace; --hand:'Caveat',cursive;
  /* "cover" colors = things sitting directly on the page background.
     On light papers they simply follow the ink; dark papers override them. */
  --cover-ink:var(--ink); --cover-muted:var(--muted); --cover-hand:var(--olive);
  --cover-accent:var(--stamp); --cover-line:var(--line); --topo:#2b2416;
}

/* ---- light papers — pick per trip in trip.js ("paper" field), or via the swatch fan ---- */
html[data-theme="parchment"]{--paper:#efe6d1;--paper2:#f6efdd;--card:#fbf6e9;--line:#d8cbae;--grid:#e4d9bf}
html[data-theme="clay"]{--paper:#e6c9a4;--paper2:#edd7b8;--card:#f4e3c8;--line:#c8a377;--grid:#d6b98d}
html[data-theme="sage"]{--paper:#dcd9b4;--paper2:#e5e2c4;--card:#efecd3;--line:#b9b485;--grid:#cbc79a}
html[data-theme="stone"]{--paper:#d6d5c5;--paper2:#e0dfd2;--card:#eae9dd;--line:#b0ae98;--grid:#c2c1ad}

/* ---- dark papers — dark expedition cover, cream cards on top ---- */
html[data-theme="night"],html[data-theme="walnut"],html[data-theme="pine"]{
  --card:#f2e8cf;--line:#c2ae7f;--grid:#d0bf94;
  --cover-ink:#efe3c2;--cover-muted:#a49572;--cover-hand:#bcc07c;
  --cover-accent:#d8583c;--cover-line:#4a4130;--topo:#e8d9ae;
}
html[data-theme="night"]{--paper:#17130d;--paper2:#221c12}
html[data-theme="walnut"]{--paper:#3b301d;--paper2:#473a25}
html[data-theme="pine"]{--paper:#222b20;--paper2:#2b3628;--cover-hand:#c8b96a}

*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  background-image:
    radial-gradient(circle at 18% 12%, rgba(142,43,26,.05), transparent 42%),
    radial-gradient(circle at 84% 64%, rgba(79,84,38,.055), transparent 46%),
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(43,36,22,.014) 3px 4px);
  color:var(--cover-ink);font-family:var(--mono);font-size:16.5px;line-height:1.7;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
.wrap{max-width:1020px;margin:0 auto;padding:0 22px}
img{max-width:100%}
/* anything on a cream card always uses dark ink, whatever the paper */
.ticket,.entry,.sheet,.lined,.pola,.pass,.tale,.palette{color:var(--ink)}

/* the topo-contour texture layer (pattern defined inline in index.html) */
.bg-topo{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.bg-topo g{stroke:var(--topo)}

/* ---------- nav ---------- */
nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb, var(--paper) 92%, transparent);backdrop-filter:blur(8px);border-bottom:2px dashed var(--cover-line)}
.nav-inner{max-width:1020px;margin:0 auto;padding:14px 22px;display:flex;align-items:center;gap:18px}
.logo{font-family:var(--type);font-size:21px;letter-spacing:.1em;color:var(--cover-ink)}
.logo b{color:var(--cover-accent)}
.nav-links{margin-left:auto;display:flex;gap:22px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--cover-muted)}
.nav-links a:hover{color:var(--cover-accent)}

/* ---------- hero ---------- */
header{padding:76px 0 30px;text-align:center;position:relative;overflow:hidden}
.tag{display:inline-block;font-size:12.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--cover-muted);border-top:1px solid var(--cover-ink);border-bottom:1px solid var(--cover-ink);padding:6px 18px}
h1{font-family:var(--type);font-size:clamp(38px,7vw,80px);line-height:1.08;margin:30px auto 16px;max-width:880px;text-transform:uppercase}
h1 span{color:var(--cover-accent);display:block}
.hand{font-family:var(--hand);font-size:clamp(21px,3vw,28px);color:var(--cover-hand);transform:rotate(-1.2deg);display:inline-block}
.stamp{
  position:absolute;top:96px;right:6%;width:150px;height:150px;border:3px solid var(--cover-accent);border-radius:50%;
  color:var(--cover-accent);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  font-family:var(--type);font-size:12px;letter-spacing:.14em;text-transform:uppercase;transform:rotate(12deg);opacity:.85;
  -webkit-mask-image:radial-gradient(circle, black 55%, rgba(0,0,0,.75) 78%, rgba(0,0,0,.55));
}
.stamp .big{font-size:24px;letter-spacing:.06em}
.stamp::after{content:"";position:absolute;inset:7px;border:1px dashed var(--cover-accent);border-radius:50%}

/* meta ticket strip */
.meta-strip{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:26px}
.ticket{border:1.5px dashed var(--ink);background:var(--card);padding:7px 16px;font-size:13px;letter-spacing:.06em;transform:rotate(-.4deg)}
.ticket:nth-child(2n){transform:rotate(.5deg)}
.ticket b{color:var(--stamp)}

/* ---------- sections ---------- */
section{padding:64px 0 8px}
section[hidden]{display:none}
.sec-title{font-family:var(--type);font-size:clamp(26px,4vw,40px);text-transform:uppercase;letter-spacing:.03em;display:flex;align-items:center;gap:18px;margin-bottom:8px}
.sec-title::after{content:"";flex:1;border-top:2px dashed var(--cover-line)}
.sec-title .no{color:var(--cover-accent)}
.sec-note{font-family:var(--hand);font-size:22px;color:var(--cover-hand);margin-bottom:30px;transform:rotate(-.6deg);display:inline-block}

/* ---------- friday meetup board (pinned note) ---------- */
.meet-card{position:relative;max-width:620px;margin:0 auto;background:var(--card);border:1.5px solid var(--ink);
  box-shadow:5px 6px 0 rgba(43,36,22,.18);padding:32px 30px 22px;text-align:center;transform:rotate(-.7deg);color:var(--ink);
  background-image:repeating-linear-gradient(0deg, transparent 0 29px, rgba(43,36,22,.07) 29px 30px)}
.meet-tack{position:absolute;top:-32px;left:50%;transform:translateX(-50%);width:58px;height:58px;
  filter:drop-shadow(0 4px 3px rgba(43,36,22,.35))}
.meet-title{font-family:var(--type);font-size:15px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;justify-content:center;gap:9px}
.meet-title .tack-s{width:27px;height:27px;flex:none}
.meet-loc{font-family:var(--hand);font-size:clamp(26px,4.4vw,38px);line-height:1.25;color:var(--ink);margin:10px 0 10px;transform:rotate(-.4deg)}
.meet-time{font-family:var(--mono);font-weight:700;font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);
  display:inline-block;background:#faf5e6;border:1.5px dashed var(--ink);padding:7px 16px}
.meet-stale{display:inline-block;margin-top:12px;font-family:var(--type);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  border:2px solid var(--stamp);color:var(--stamp);padding:4px 12px;transform:rotate(-3deg)}

/* ---------- stat entries ---------- */
.logbook{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.entry{background:var(--card);border:1.5px solid var(--ink);box-shadow:3px 3px 0 rgba(43,36,22,.16);padding:20px 18px 16px;position:relative}
.entry:nth-child(odd){transform:rotate(-.5deg)}
.entry:nth-child(even){transform:rotate(.5deg)}
.entry .v{font-family:var(--type);font-size:clamp(24px,2.6vw,32px);color:var(--ink)}
.entry .v span{color:var(--stamp);font-size:.55em}
.entry .l{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.entry::before{content:"";position:absolute;top:-9px;left:50%;transform:translateX(-50%) rotate(-2deg);width:56px;height:16px;background:rgba(169,126,34,.35);border:1px solid rgba(169,126,34,.4)}

/* ---------- route: map + elevation ---------- */
.route-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:22px}
.sheet{background:var(--card);border:1.5px solid var(--ink);box-shadow:4px 4px 0 rgba(43,36,22,.16);padding:20px}
.sheet h3{font-family:var(--type);font-size:15px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px;display:flex;justify-content:space-between}
.sheet h3 span{color:var(--stamp)}
.note{font-size:12.5px;color:var(--faint);margin-top:12px;font-style:italic}
#map{width:100%;height:auto;display:block;border:1px solid var(--line)}
#elev{width:100%;height:auto;display:block}

/* day legs — lined paper */
.lined{margin-top:22px;background:var(--card);border:1.5px solid var(--ink);box-shadow:4px 4px 0 rgba(43,36,22,.16);
  background-image:repeating-linear-gradient(0deg, transparent 0 33px, rgba(43,36,22,.09) 33px 34px);position:relative;padding:20px 24px 20px 66px}
.lined::before{content:"";position:absolute;top:0;bottom:0;left:46px;width:2px;background:rgba(142,43,26,.4)}
.lined .row{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;min-height:34px}
.lined .d{font-family:var(--type);color:var(--stamp);font-size:14px;letter-spacing:.08em}
.lined .n{font-weight:700}
.lined .m{font-family:var(--hand);font-size:19px;color:var(--olive);margin-left:auto}

/* ---------- convoy table ---------- */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;min-width:660px;border-collapse:collapse;font-size:14px}
thead th{font-family:var(--type);font-size:12px;letter-spacing:.12em;text-transform:uppercase;text-align:left;padding:12px 14px;border-bottom:2px solid var(--ink);color:var(--ink)}
tbody td{padding:11px 14px;border-bottom:1px dashed var(--line)}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:rgba(169,126,34,.08)}
td.callsign{font-family:var(--type);color:var(--stamp);font-size:13px}
td.vehicle{font-weight:700}
.rolestamp{font-family:var(--type);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;border:1.5px solid var(--muted);color:var(--muted);padding:2px 8px;display:inline-block;transform:rotate(-2deg);white-space:nowrap}
.rolestamp.lead{border-color:var(--stamp);color:var(--stamp)}
.rolestamp.sweep{border-color:var(--olive);color:var(--olive)}

/* ---------- polaroid gallery — hung from nails on wire ---------- */
.polagrid{display:grid;grid-template-columns:repeat(3,1fr);gap:52px 26px;margin-top:48px}
.pola{background:#fdfaf1;border:1px solid #e4dcc6;box-shadow:0 10px 22px rgba(43,36,22,.18);padding:12px 12px 14px;position:relative;transition:transform .3s}
.pola:nth-child(3n+1){transform:rotate(-3.2deg)}
.pola:nth-child(3n+2){transform:rotate(2.7deg)}
.pola:nth-child(3n){transform:rotate(-1.8deg)}
.pola:hover{transform:rotate(0) scale(1.03);z-index:5}
.pola:hover .hanger{opacity:.45}
.pola .hanger{position:absolute;top:-29px;left:3%;width:94%;height:32px;overflow:visible;transition:opacity .3s}
.pola img{display:block;width:100%;height:250px;object-fit:cover;border:1px solid #e0d8c2}
.pola .cap{font-family:var(--hand);font-size:20px;color:var(--ink);text-align:center;padding-top:10px;line-height:1.3}

/* ---------- pull quote ---------- */
.quote{text-align:center;max-width:760px;margin:70px auto 0;padding:0 22px}
.quote p{font-family:var(--hand);font-size:clamp(26px,4vw,38px);line-height:1.4;color:var(--cover-ink);transform:rotate(-.8deg)}
.quote footer{margin-top:14px;font-family:var(--type);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--cover-accent)}

/* ---------- tales from the trail ---------- */
.tales{display:grid;grid-template-columns:1fr 1fr;gap:28px 26px;margin-top:34px}
.tale{background:var(--card);border:1.5px solid var(--ink);box-shadow:4px 4px 0 rgba(43,36,22,.16);padding:24px 24px 18px;position:relative;
  background-image:repeating-linear-gradient(0deg, transparent 0 27px, rgba(43,36,22,.07) 27px 28px)}
.tale:nth-child(odd){transform:rotate(-.4deg)}
.tale:nth-child(even){transform:rotate(.4deg)}
.tale .tg{position:absolute;top:-12px;right:16px;font-family:var(--type);font-size:10px;letter-spacing:.14em;text-transform:uppercase;border:2px solid var(--stamp);color:var(--stamp);padding:3px 10px;transform:rotate(3deg);background:var(--card)}
.tale .tg.olive{border-color:var(--olive);color:var(--olive);transform:rotate(-2deg)}
.tale .tg.mustard{border-color:var(--mustard);color:var(--mustard);transform:rotate(2deg)}
.tale h4{font-family:var(--type);font-size:17.5px;margin-bottom:8px}
.tale p{font-size:14.5px;line-height:1.75;white-space:pre-line}
.tale .sig{font-family:var(--hand);font-size:20px;color:var(--olive);margin-top:10px;text-align:right;transform:rotate(-1deg)}

/* ---------- past entries (passport stamps) ---------- */
.passport{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px}
.pass{background:var(--card);border:1.5px solid var(--ink);box-shadow:3px 3px 0 rgba(43,36,22,.16);padding:20px;position:relative;display:block}
.pass:nth-child(3n+1){transform:rotate(-.8deg)}
.pass:nth-child(3n+2){transform:rotate(.6deg)}
.pass:nth-child(3n){transform:rotate(-.4deg)}
.pass:hover{transform:rotate(0)}
.pass .loc{font-family:var(--type);font-size:19px;text-transform:uppercase;padding-right:64px}
.pass .s{font-size:12px;letter-spacing:.12em;color:var(--muted);text-transform:uppercase;margin-top:4px}
.pass .st{position:absolute;top:12px;right:12px;font-family:var(--type);font-size:10px;letter-spacing:.1em;color:var(--olive);border:1.5px solid var(--olive);border-radius:50%;width:58px;height:58px;display:flex;align-items:center;justify-content:center;text-align:center;transform:rotate(10deg);opacity:.8;text-transform:uppercase}
.pass .go{font-family:var(--type);font-size:12px;letter-spacing:.14em;color:var(--stamp);margin-top:16px;text-transform:uppercase}
.pass img,.pass svg{display:block;width:100%;height:120px;object-fit:cover;border:1px dashed var(--line);margin-top:14px}

/* ---------- footer ---------- */
footer.site{margin-top:80px;border-top:2px dashed var(--cover-line);padding:44px 22px 56px;text-align:center}
footer.site .fine{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--cover-muted);margin-top:12px}

/* ---------- paper swatch widget (torn paper scraps) ---------- */
.palette{position:fixed;right:14px;bottom:14px;z-index:60;background:var(--card);border:1.5px solid var(--ink);box-shadow:3px 3px 0 rgba(43,36,22,.18);padding:14px 12px 10px;transform:rotate(-1deg);text-align:center}
.palette::before{content:"";position:absolute;top:-10px;left:50%;transform:translateX(-50%) rotate(-2deg);width:64px;height:16px;background:rgba(169,126,34,.35);border:1px solid rgba(169,126,34,.4)}
.palette .pl{font-family:var(--type);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:9px;white-space:nowrap}
.palette .dots{display:flex;align-items:flex-end}
.swatch{width:26px;height:32px;border:1.5px solid var(--ink);cursor:pointer;padding:0;margin-left:-7px;transition:transform .2s,filter .2s;
  clip-path:polygon(6% 0,94% 2%,100% 12%,96% 50%,100% 88%,90% 100%,8% 98%,0 86%,4% 48%,0 10%)}
.swatch:first-child{margin-left:0}
.swatch:nth-child(odd){transform:rotate(-5deg)}
.swatch:nth-child(even){transform:rotate(4deg)}
.swatch:hover{transform:translateY(-3px)}
.swatch.active{transform:translateY(-6px) rotate(0);filter:drop-shadow(0 4px 3px rgba(43,36,22,.4))}

/* ---------- mobile ---------- */
@media(max-width:900px){
  .logbook{grid-template-columns:repeat(2,1fr)}
  .route-grid,.polagrid,.passport,.tales{grid-template-columns:1fr}
  .stamp{position:static;margin:26px auto 0;transform:rotate(8deg);width:130px;height:130px}
  .nav-links{display:none}
  .lined .m{margin-left:0;width:100%}
  #map{height:300px}
}
@media(max-width:400px){
  .logbook{gap:12px}
  .entry{padding:16px 14px 12px}
  .wrap{padding:0 16px}
}