/* ============================================================
   The Weekend Atlas — a field almanac
   Tokens
   ============================================================ */
:root{
  --canvas:#efe7d2;          /* aged cream paper */
  --canvas-deep:#e7dcc0;
  --paper:#f6efdb;
  --ink:#211b14;              /* near-black brown ink */
  --ink-soft:#5b4a32;         /* secondary ink / marginalia */
  --ink-faint:#8a7656;
  --rule:#c9b98f;
  --rule-soft:#dccba3;
  --accent:#a23b1e;           /* oxblood / field-stamp red */
  --accent-deep:#7d2a13;
  --indigo:#2a3a5a;           /* secondary ink accent */
  --moss:#3f5a3a;             /* saved / "marked" green */
  --shadow: 0 1px 0 rgba(33,27,20,.06);
  --maxw: 1180px;
  --gut: 28px;

  --f-display: "DM Serif Display", Georgia, "Times New Roman", serif;
  --f-body: "Literata", Georgia, serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

@font-face{ font-family:"DM Serif Display"; src:url("assets/dm-serif.ttf") format("truetype"); font-display:swap; font-weight:400; }
@font-face{ font-family:"Literata"; src:url("assets/literata.ttf") format("truetype"); font-display:swap; font-weight:400; }
@font-face{ font-family:"IBM Plex Mono"; src:url("assets/ibm-plex-mono.ttf") format("truetype"); font-display:swap; font-weight:400; }

/* base ------------------------------------------------------- */
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--canvas);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:18px;
  line-height:1.55;
  /* faint paper grain via layered gradients */
  background-image:
    radial-gradient(1200px 600px at 80% -10%, rgba(255,255,255,.25), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(162,59,30,.05), transparent 60%),
    repeating-linear-gradient(0deg, rgba(33,27,20,.018) 0 1px, transparent 1px 4px);
  background-attachment:fixed;
  min-height:100vh;
}
h1,h2,h3{ font-family:var(--f-display); font-weight:400; letter-spacing:.005em; }
button{ font-family:inherit; }
a{ color:var(--accent-deep); }

:focus-visible{ outline:3px solid var(--indigo); outline-offset:2px; border-radius:2px; }

/* masthead --------------------------------------------------- */
.masthead{
  max-width:var(--maxw);
  margin:0 auto;
  padding: 26px var(--gut) 8px;
}
.edition{
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.22em;
  color:var(--ink-soft);
  text-transform:uppercase;
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  border-bottom:1px solid var(--rule);
  padding-bottom:10px;
}
.edition i{ color:var(--ink-faint); font-style:normal; }

.titleblock{
  display:flex; flex-direction:column; align-items:flex-start;
  padding: 22px 0 6px;
  position:relative;
}
.title{
  font-size: clamp(54px, 11vw, 132px);
  line-height:.92;
  margin:0;
  color:var(--ink);
  letter-spacing:-.012em;
}
.title em{
  font-style:italic;
  color:var(--accent);
}
.subtitle{
  font-family:var(--f-body);
  font-style:italic;
  font-size: clamp(15px, 2.4vw, 20px);
  color:var(--ink-soft);
  margin: 14px 0 0;
  max-width: 46ch;
}

.arcwrap{ margin-top:8px; width:100%; }
.arc{ width:100%; height:64px; display:block; }

.ledger-rule{
  height:0; border-top:2px solid var(--ink);
  border-bottom:1px solid var(--ink);
  padding-top:3px;
  box-shadow:0 4px 0 -2px var(--ink);
  margin-top:2px;
}

/* hour river ------------------------------------------------- */
.river-section{
  max-width:var(--maxw);
  margin: 6px auto 0;
  padding: 14px var(--gut) 0;
}
.river-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  border-bottom:1px dashed var(--rule);
  padding-bottom:8px; margin-bottom:10px;
}
.river-head h2{
  font-size:14px; font-family:var(--f-mono); letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-soft); margin:0; font-weight:400;
}
.river-head p{
  margin:0; font-style:italic; color:var(--ink-soft); font-size:14px; max-width:52ch; text-align:right;
}
.river{
  display:grid; grid-template-columns: 1fr 1fr; gap: 14px;
  padding: 6px 0 14px;
}
.day{
  position:relative;
  background:
    linear-gradient(180deg, var(--paper), var(--canvas-deep));
  border:1px solid var(--rule);
  border-radius:4px;
  padding: 30px 12px 12px;
  min-height:118px;
}
.day-label{
  position:absolute; top:8px; left:14px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-soft);
}
.day-label b{ font-weight:400; color:var(--ink); }
.hourline{
  position:absolute; left:14px; right:14px; top:54px; height:2px;
  background:var(--ink); opacity:.55;
}
.hourline::before,.hourline::after{
  content:""; position:absolute; top:-3px; width:1px; height:8px; background:var(--ink); opacity:.6;
}
.hourline::before{ left:0; } .hourline::after{ right:0; }
.tick{
  position:absolute; top:-3px; width:1px; height:8px; background:var(--ink-faint);
}
.tick-label{
  position:absolute; top:8px; font-family:var(--f-mono); font-size:9px; color:var(--ink-faint);
  transform:translateX(-50%);
}
.stop{
  position:absolute; transform:translate(-50%,-50%); top:54px;
  width:18px; height:18px; border:0; padding:0; background:transparent; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.stop .dot{
  width:14px; height:14px; border-radius:50%;
  background:var(--paper); border:1.5px solid var(--ink);
  transition: transform .15s ease, background .15s ease;
}
.stop:hover .dot,.stop:focus-visible .dot{ background:var(--accent); transform:scale(1.18); }
.stop[data-saved="true"] .dot{ background:var(--moss); border-color:var(--moss); }
.stop .stem{
  position:absolute; top:-26px; left:50%; transform:translateX(-50%);
  font-family:var(--f-mono); font-size:10px; color:var(--ink-soft);
  white-space:nowrap; background:var(--paper); border:1px solid var(--rule);
  padding:1px 6px; border-radius:3px; opacity:0; pointer-events:none;
  transition:opacity .12s ease;
}
.stop:hover .stem,.stop:focus-visible .stem{ opacity:1; }

/* controls --------------------------------------------------- */
.controls{
  max-width:var(--maxw);
  margin: 4px auto 0;
  padding: 16px var(--gut) 4px;
}
.control-form{
  display:grid;
  grid-template-columns: 1.5fr 1fr auto;
  gap: 16px;
  align-items:end;
  background:var(--paper);
  border:1px solid var(--rule);
  border-left:4px solid var(--accent);
  padding: 16px 18px;
  border-radius:4px;
}
.field{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.field > label{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft);
}
.input-wrap,.select-wrap{ position:relative; display:flex; align-items:center; }
.search-glyph{ position:absolute; left:10px; width:16px; height:16px; color:var(--ink-soft); pointer-events:none; }
#search{
  width:100%; padding:10px 12px 10px 34px;
  background:var(--canvas); border:1px solid var(--rule); border-radius:3px;
  font-family:var(--f-body); font-size:16px; color:var(--ink);
}
#search::placeholder{ color:var(--ink-faint); font-style:italic; }
#search:focus-visible{ outline:3px solid var(--indigo); outline-offset:0; border-color:var(--indigo); }

.select-wrap select{ appearance:none; -webkit-appearance:none; }
#filter{
  width:100%; padding:10px 32px 10px 12px;
  background:var(--canvas); border:1px solid var(--rule); border-radius:3px;
  font-family:var(--f-body); font-size:16px; color:var(--ink); cursor:pointer;
}
.chev{ position:absolute; right:10px; width:18px; height:18px; color:var(--ink-soft); pointer-events:none; }

.saved-toggle{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 14px;
  background:var(--canvas); color:var(--ink);
  border:1px solid var(--rule); border-radius:3px;
  cursor:pointer; font-size:15px;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.saved-toggle .stamp{
  width:14px; height:14px; border:1.5px dashed var(--ink-soft); border-radius:50%;
  transition:background .15s ease, border-color .15s ease, border-style .15s ease;
}
.saved-toggle[aria-pressed="true"]{
  background:var(--moss); color:#f6efdb; border-color:var(--moss);
}
.saved-toggle[aria-pressed="true"] .stamp{
  background:#f6efdb; border:1.5px solid #f6efdb; border-radius:50%;
}
.saved-toggle:hover{ border-color:var(--accent); }

.count{
  font-family:var(--f-mono); font-size:12px; color:var(--ink-soft);
  margin:10px 2px 0; letter-spacing:.04em;
}

/* the field log --------------------------------------------- */
.log{
  max-width:var(--maxw);
  margin: 0 auto;
  padding: 22px var(--gut) 20px;
}
.tide-group{ margin-bottom: 26px; }
.tide-head{
  display:flex; align-items:center; gap:12px;
  margin: 4px 0 12px;
}
.tide-head .tide-glyph{ width:30px; height:30px; flex:0 0 auto; color:var(--accent); }
.tide-head h2{
  margin:0; font-size: clamp(22px, 3.4vw, 30px); line-height:1; color:var(--ink);
}
.tide-head .tide-fill{ flex:1; height:1px; background:var(--rule); align-self:center; margin:0 14px; }
.tide-head .tide-sub{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft);
}

.entries{ display:grid; gap:0; }
.entry-row{
  display:grid;
  grid-template-columns: 56px 1fr auto;
  gap: 16px;
  align-items:start;
  padding: 16px 8px 16px 6px;
  border-top:1px solid var(--rule-soft);
  position:relative;
}
.entry-row:first-child{ border-top:1px solid var(--rule); }
.entry-row:last-child{ border-bottom:1px solid var(--rule); }

.row-glyph{
  width:44px; height:44px; color:var(--accent);
  border:1px solid var(--rule); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--paper);
}
.entry-row[data-saved="true"] .row-glyph{ border-color:var(--moss); color:var(--moss); }

.row-body{ min-width:0; }
.row-title{
  font-family:var(--f-display); font-size: clamp(20px, 2.6vw, 26px); line-height:1.08; margin:0;
}
.open-item{
  display:inline-flex; align-items:baseline; gap:6px;
  font: inherit; color:var(--ink); background:none; border:0; padding:0; margin:0;
  text-align:left; cursor:pointer; text-decoration:underline; text-decoration-color:var(--rule);
  text-underline-offset:4px; text-decoration-thickness:1px;
  border-radius:2px;
}
.open-item:hover{ color:var(--accent-deep); text-decoration-color:var(--accent); }
.row-meta{
  display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:6px;
  font-family:var(--f-mono); font-size:12px; color:var(--ink-soft); letter-spacing:.02em;
}
.row-meta .sep{ color:var(--ink-faint); }
.row-summary{
  margin:8px 0 0; color:var(--ink); font-size:16.5px; line-height:1.5; max-width:62ch;
}
.row-price{
  font-family:var(--f-display); font-size:22px; color:var(--ink); white-space:nowrap;
}
.row-price .free{ font-style:italic; color:var(--moss); }
.row-side{
  display:flex; flex-direction:column; align-items:flex-end; gap:8px;
}
.row-tag{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-soft); border:1px solid var(--rule); padding:2px 8px; border-radius:2px;
}
.row-mark{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--moss); display:none;
}
.entry-row[data-saved="true"] .row-mark{ display:inline-block; }

/* empty state ------------------------------------------------ */
.empty{
  max-width:var(--maxw); margin:0 auto; padding: 30px var(--gut) 60px;
  text-align:center;
}
.empty-glyph{ width:64px; height:64px; color:var(--accent); }
.empty h3{ font-size:24px; margin:8px 0 6px; }
.empty p{ margin:0 auto; max-width:52ch; color:var(--ink-soft); }
.recover{
  margin-top:16px; padding:10px 16px;
  background:var(--ink); color:var(--paper); border:1px solid var(--ink); border-radius:3px;
  cursor:pointer; font-size:14px;
}
.recover:hover{ background:var(--accent); border-color:var(--accent); }

/* detail dialog ---------------------------------------------- */
.detail{
  margin:auto; padding:0; border:0; background:transparent;
  max-width:min(720px, 94vw); width:100%;
  color:var(--ink);
}
.detail::backdrop{ background:rgba(33,27,20,.55); backdrop-filter:blur(2px); }
.entry{
  background:var(--paper);
  border:1px solid var(--ink);
  border-radius:5px;
  padding: 0;
  position:relative;
  box-shadow: 0 18px 50px rgba(33,27,20,.35);
  overflow:hidden;
}
.entry::before{
  content:""; display:block; height:10px;
  background: repeating-linear-gradient(90deg, var(--accent) 0 14px, var(--paper) 14px 18px);
}
.entry-inner{ padding: 26px clamp(20px, 4vw, 40px) 30px; max-height: 88vh; overflow-y:auto; }
.close-detail{
  position:absolute; top:18px; right:18px;
  display:inline-flex; align-items:center; gap:6px;
  background:var(--canvas); color:var(--ink);
  border:1px solid var(--rule); border-radius:3px;
  padding:7px 10px; cursor:pointer; font-size:13px; z-index:3;
}
.close-detail svg{ width:14px; height:14px; }
.close-detail:hover{ border-color:var(--accent); color:var(--accent-deep); }

.entry-glyph{ width:64px; height:64px; color:var(--accent); margin: 4px 0 8px; }
.entry-dept{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-soft); margin:0;
}
.entry-title{
  font-size: clamp(30px, 6vw, 48px); line-height:1.02; margin:6px 0 0;
}

.entry-grid{
  display:grid; grid-template-columns: repeat(2, 1fr); gap:1px;
  background:var(--rule); border:1px solid var(--rule); border-radius:3px;
  margin: 6px 0 22px;
}
.entry-grid .cell{ background:var(--canvas); padding:10px 12px; }
.entry-grid .k{ font-family:var(--f-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); }
.entry-grid .v{ font-size:16px; color:var(--ink); margin-top:3px; }
.entry-grid .v b{ font-weight:400; }

.entry-body h3{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft);
  margin:0 0 8px; font-weight:400;
}
.entry-body{ margin-bottom:18px; }
.entry-body p{ margin:0 0 10px; max-width:62ch; }
.entry-body p:last-child{ margin-bottom:0; }

.entry-foot{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding-top:16px; border-top:1px solid var(--rule);
}
.save-item{
  display:inline-flex; align-items:center; gap:12px;
  padding:12px 16px; border-radius:3px; cursor:pointer;
  background:var(--canvas); color:var(--ink); border:1px solid var(--rule);
  font-size:15px;
}
.save-item .save-mark{
  width:16px; height:16px; border:1.5px solid var(--ink-soft); border-radius:50%;
  transition:background .15s, border-color .15s;
}
.save-item:hover{ border-color:var(--accent); }
.save-item[aria-pressed="true"]{
  background:var(--moss); color:#f6efdb; border-color:var(--moss);
}
.save-item[aria-pressed="true"] .save-mark{
  background:#f6efdb; border:1.5px solid #f6efdb; border-radius:50%;
}
.entry-id{ font-family:var(--f-mono); font-size:11px; color:var(--ink-faint); letter-spacing:.1em; margin:0; }

/* colophon --------------------------------------------------- */
.colophon{
  max-width:var(--maxw); margin: 20px auto 0; padding: 14px var(--gut) 40px;
}
.col-rule{ height:0; border-top:1px solid var(--rule); margin-bottom:14px; }
.colophon-mark{ text-align:center; font-family:var(--f-display); font-style:italic; color:var(--ink-soft); margin:0 0 6px; }
.colophon-text{ text-align:center; font-size:13px; color:var(--ink-faint); max-width:64ch; margin:0 auto; font-style:italic; }

/* responsive ------------------------------------------------- */
@media (max-width: 860px){
  body{ font-size:17px; }
  .control-form{ grid-template-columns: 1fr; gap:12px; }
  .river{ grid-template-columns: 1fr; }
  .river-head p{ display:none; }
  .entry-grid{ grid-template-columns: 1fr; }
  .entry-row{ grid-template-columns: 44px 1fr; gap:12px; }
  .row-side{ grid-column:1 / -1; flex-direction:row; align-items:center; justify-content:space-between; }
  .row-price{ font-size:18px; }
  .title{ letter-spacing:-.02em; }
  .arc{ height:44px; }
}
@media (max-width: 480px){
  :root{ --gut:18px; }
  body{ font-size:16px; }
  .edition{ font-size:9.5px; gap:6px; }
  .day{ min-height:96px; }
  .stop .stem{ font-size:9px; }
  .entry-foot{ flex-direction:column; align-items:stretch; }
  .save-item{ justify-content:center; }
}

/* reduced motion -------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}