/* ============================================================
   Lost in Translation — shared styles
   Night hydrographic chart (map) + bone paper notebook (entries)
   ============================================================ */
:root{
  --sea-deep:#0d1a26;
  --sea:#12283a;
  --sea-shelf:#17334a;
  --graticule:rgba(146,190,214,.13);
  --land:#e6e0d2;
  --land-edge:#8fa7b5;
  --land-shade:#cdc6b6;
  --paper:#f0ebdf;
  --paper-deep:#e3dccc;
  --ink:#1b2530;
  --ink-soft:#4d5b67;
  --ink-faint:#7e8b95;
  --chalk:#cfe0ea;
  --chalk-dim:#8aa4b6;
  --amber:#e9b33f;
  --seal:#b8452f;

  --font-ui:"Archivo","Helvetica Neue",Helvetica,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --font-read:"Newsreader","Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;

  --bar:58px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
body{margin:0;font-family:var(--font-ui);font-size:15px;-webkit-font-smoothing:antialiased}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:2px}
img{max-width:100%}

/* ---------------- top bar (both page types) ---------------- */
.topbar{
  position:fixed;inset:0 0 auto 0;height:var(--bar);z-index:60;
  display:flex;align-items:center;gap:22px;padding:0 20px;
}
.topbar.floating{
  background:linear-gradient(to bottom,rgba(9,17,25,.94),rgba(9,17,25,.62) 70%,rgba(9,17,25,0));
  backdrop-filter:blur(6px);
}
.topbar.solid{background:var(--sea-deep);border-bottom:1px solid rgba(207,224,234,.12)}
.brand{display:flex;align-items:baseline;gap:9px;text-decoration:none;flex:0 0 auto}
.brand b{font-weight:700;font-size:18px;letter-spacing:-.035em;color:#fff}
.brand span{font-family:var(--font-read);font-style:italic;font-size:13px;color:var(--chalk-dim);display:none}
@media(min-width:900px){.brand span{display:inline}}

.regions{display:flex;gap:2px;margin-left:auto}
.regions button{padding:7px 13px;border-radius:999px;font-size:13px;font-weight:500;
  color:var(--chalk-dim);transition:color .18s,background .18s}
.regions button:hover{color:#fff}
.regions button[aria-pressed="true"]{background:rgba(233,179,63,.16);color:var(--amber)}

.backlink{
  margin-left:auto;display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:500;color:var(--chalk-dim);text-decoration:none;
  padding:7px 14px;border:1px solid rgba(207,224,234,.24);border-radius:999px;
  transition:color .18s,border-color .18s,background .18s;
}
.backlink:hover{color:#fff;border-color:var(--amber);background:rgba(233,179,63,.1)}
.backlink svg{width:14px;height:14px}

.social{display:flex;gap:4px;padding-left:14px;margin-left:6px;border-left:1px solid rgba(207,224,234,.16)}
.social a{width:34px;height:34px;display:grid;place-items:center;border-radius:8px;
  color:var(--chalk-dim);transition:color .18s,background .18s}
.social a:hover{color:#fff;background:rgba(207,224,234,.1)}
.social svg{width:19px;height:19px;display:block}

.indexbtn{padding:7px 13px;border:1px solid rgba(207,224,234,.24);border-radius:999px;
  font-size:13px;font-weight:500;color:var(--chalk);transition:border-color .18s,background .18s}
.indexbtn:hover{border-color:var(--amber);background:rgba(233,179,63,.1)}

/* ============================================================
   MAP PAGE
   ============================================================ */
body.map{background:var(--sea-deep);color:var(--chalk);overflow:hidden;height:100%}
html:has(body.map){height:100%}

.stage{position:fixed;inset:0;z-index:1;touch-action:none;cursor:grab}
.stage.dragging{cursor:grabbing}
#chart{position:absolute;inset:0;width:100%;height:100%;display:block}
.marks{position:absolute;inset:0;pointer-events:none;z-index:10}

.mark{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;cursor:pointer;
  display:block;text-decoration:none;transition:opacity .3s var(--ease)}
.mark .glyph{width:15px;height:15px;transform:rotate(45deg);
  border:1.5px solid var(--amber);background:rgba(13,26,38,.65);
  transition:background .2s,transform .25s var(--ease),box-shadow .25s}
.mark .tag{position:absolute;left:18px;top:50%;transform:translateY(-50%);
  white-space:nowrap;font-size:12px;font-weight:600;color:var(--chalk);
  text-shadow:0 1px 5px rgba(9,17,25,.95),0 0 12px rgba(9,17,25,.8);
  opacity:.72;transition:opacity .2s,color .2s}
.mark.flip .tag{left:auto;right:18px}
.mark:hover .glyph,.mark:focus-visible .glyph{
  background:var(--amber);transform:rotate(45deg) scale(1.25);
  box-shadow:0 0 0 6px rgba(233,179,63,.16)}
.mark:hover .tag,.mark:focus-visible .tag{opacity:1;color:#fff}
.mark[hidden]{display:none}

.controls{position:fixed;right:18px;bottom:18px;z-index:40;
  display:flex;flex-direction:column;gap:1px;
  border:1px solid rgba(207,224,234,.2);border-radius:10px;overflow:hidden;
  background:rgba(207,224,234,.14)}
.controls button{width:38px;height:36px;display:grid;place-items:center;
  background:rgba(13,26,38,.88);color:var(--chalk);transition:background .16s,color .16s}
.controls button:hover{background:var(--sea-shelf);color:#fff}
.controls svg{width:15px;height:15px}

.hint{position:fixed;left:20px;bottom:20px;z-index:40;font-size:12px;
  color:var(--chalk-dim);max-width:215px;line-height:1.55;transition:opacity .5s}
.hint.gone{opacity:0;pointer-events:none}

/* hover preview */
.peek{position:fixed;z-index:55;width:300px;pointer-events:none;
  background:var(--paper);color:var(--ink);box-shadow:0 18px 46px rgba(4,10,16,.55);
  opacity:0;transform:translateY(5px);overflow:hidden;
  transition:opacity .16s ease,transform .16s var(--ease)}
.peek.show{opacity:1;transform:none}
.peek::after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:repeating-linear-gradient(to bottom,var(--amber) 0 12px,transparent 12px 24px);opacity:.55}
.peek .shot{display:block;width:100%;height:162px;object-fit:cover;background:var(--paper-deep)}
.peek .txt{padding:13px 16px 15px}
.peek h3{margin:0 0 7px;font-family:var(--font-read);font-weight:500;
  font-size:18px;line-height:1.2;letter-spacing:-.012em}
.peek .blurb{margin:0;font-size:13px;line-height:1.52;color:var(--ink-soft)}
.peek .when{margin:10px 0 0;font-size:11.5px;color:var(--ink-faint)}
@media(hover:none){.peek{display:none}}

/* index drawer */
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(400px,92vw);z-index:80;
  background:var(--sea);border-left:1px solid rgba(207,224,234,.14);
  transform:translateX(101%);transition:transform .45s var(--ease);
  display:flex;flex-direction:column}
.drawer.open{transform:none}
.drawer header{display:flex;align-items:center;justify-content:space-between;
  padding:18px 16px 14px 22px;border-bottom:1px solid rgba(207,224,234,.13)}
.drawer header h2{margin:0;font-size:15px;font-weight:600;letter-spacing:-.01em;color:#fff}
.drawer .list{flex:1;overflow-y:auto;padding:8px 10px 30px}
.drawer .entry{display:flex;gap:13px;align-items:center;text-decoration:none;
  padding:10px 12px;border-radius:9px;transition:background .16s}
.entry:hover{background:rgba(207,224,234,.07)}
.entry .th{width:54px;height:54px;flex:0 0 auto;object-fit:cover;background:var(--sea-shelf)}
.entry b{display:block;font-size:14.5px;font-weight:600;color:#fff;margin-bottom:3px;letter-spacing:-.01em}
.entry i{display:block;font-style:normal;font-size:12.5px;color:var(--chalk-dim)}
.groupname{padding:20px 12px 8px;font-size:11.5px;font-weight:600;color:var(--amber);letter-spacing:.06em}

.scrim{position:fixed;inset:0;z-index:65;background:rgba(6,12,18,.55);
  opacity:0;pointer-events:none;transition:opacity .4s}
.scrim.on{opacity:1;pointer-events:auto}

.iconbtn{width:32px;height:32px;display:grid;place-items:center;border-radius:8px;
  color:var(--chalk-dim);transition:background .16s,color .16s}
.iconbtn:hover{background:rgba(207,224,234,.1);color:#fff}
.iconbtn svg{width:16px;height:16px}

/* ============================================================
   ENTRY PAGE
   ============================================================ */
body.entry{background:var(--paper);color:var(--ink)}

/* the headline comes first, so the page opens on words not a wall of photo */
.entry-head{max-width:660px;margin:0 auto;padding:calc(var(--bar) + 48px) 22px 30px}
.entry-head .where{
  margin:0 0 15px;font-size:12px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--seal);
}
.entry-head h1{
  margin:0;font-family:var(--font-read);font-weight:500;
  font-size:clamp(31px,5vw,50px);line-height:1.07;letter-spacing:-.02em;
}
.entry-head .stand{
  font-family:var(--font-read);font-size:19px;line-height:1.55;
  color:var(--ink-soft);margin:19px 0 0;
}

.hero-shot{margin:0;background:var(--paper-deep)}
.hero-shot img{display:block;width:100%;height:clamp(220px,42vh,440px);object-fit:cover}
.hero-shot figcaption{
  max-width:660px;margin:0 auto;padding:11px 22px 0;
  font-size:12px;line-height:1.5;color:var(--ink-faint);
}

.article{max-width:660px;margin:0 auto;padding:38px 22px 12px}
.article p{font-family:var(--font-read);font-size:18px;line-height:1.7;
  margin:0 0 1.15em;color:#25313d}
.article > p:first-child::first-letter{
  float:left;font-size:3.05em;line-height:.82;padding:.06em .1em 0 0;
  font-weight:500;color:var(--seal)}
.article blockquote{margin:28px 0;padding:2px 0 2px 18px;border-left:2px solid var(--amber)}
.article blockquote p{font-style:italic;color:var(--ink-soft);font-size:17px;margin:0}
.article h2{font-family:var(--font-read);font-weight:500;font-size:25px;
  letter-spacing:-.01em;margin:34px 0 12px}

.tail{max-width:660px;margin:0 auto;padding:6px 22px 54px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips span{font-size:11.5px;font-weight:500;padding:4px 10px;border-radius:999px;
  background:var(--paper-deep);color:var(--ink-soft)}
.watch{display:inline-flex;align-items:center;gap:9px;margin-top:26px;
  padding:12px 20px;border-radius:999px;background:var(--ink);color:var(--paper);
  font-size:13.5px;font-weight:600;text-decoration:none;
  transition:background .18s,transform .18s var(--ease)}
.watch:hover{background:var(--seal);transform:translateY(-1px)}
.watch svg{width:17px;height:17px}

/* gallery band across the bottom */
.plates{background:var(--sea-deep);color:var(--chalk);padding:52px 0 56px}
.plates .lead{max-width:660px;margin:0 auto 26px;padding:0 22px;
  font-size:13.5px;color:var(--chalk-dim);line-height:1.6}
.band-title{max-width:660px;margin:0 auto 8px;padding:0 22px;
  font-family:var(--font-read);font-weight:500;font-size:26px;
  letter-spacing:-.01em;color:#fff}
.band-split{border:0;border-top:1px solid rgba(207,224,234,.13);
  margin:52px max(22px,4vw) 46px}

/* related videos */
.reels{display:grid;gap:15px;padding:0 max(22px,4vw);max-width:900px;margin:0 auto;
  grid-template-columns:repeat(auto-fit,minmax(175px,1fr))}
.vid{display:block;text-decoration:none;color:var(--chalk)}
.vid .frame{position:relative;display:block;aspect-ratio:9/16;
  overflow:hidden;background:var(--sea-shelf)}
.vid.wide .frame{aspect-ratio:16/9}
.vid .frame img{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .5s var(--ease)}
.vid:hover .frame img,.vid:focus-visible .frame img{transform:scale(1.05)}
.vid .play{position:absolute;inset:0;display:grid;place-items:center}
.vid .play svg{width:44px;height:44px;opacity:.94;
  filter:drop-shadow(0 2px 12px rgba(0,0,0,.65))}
.vid .label{display:block;margin-top:10px;font-size:12.5px;line-height:1.45;
  color:var(--chalk-dim);transition:color .18s}
.vid:hover .label{color:#fff}
.vid.empty .frame{background:transparent;display:grid;place-items:center;
  border:1px dashed rgba(207,224,234,.28)}
.vid.empty .frame span{font-size:11px;line-height:1.5;color:var(--chalk-dim);
  padding:14px;text-align:center}
.grid{display:grid;gap:14px;padding:0 max(22px,4vw);
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.grid figure{margin:0}
.grid button{display:block;width:100%;overflow:hidden;background:var(--sea-shelf);line-height:0}
.grid img{display:block;width:100%;height:190px;object-fit:cover;
  transition:transform .5s var(--ease),opacity .3s}
.grid button:hover img,.grid button:focus-visible img{transform:scale(1.05)}
.grid figcaption{font-size:12px;line-height:1.5;color:var(--chalk-dim);margin-top:9px}

.pager{display:flex;gap:14px;flex-wrap:wrap;justify-content:space-between;
  padding:34px max(22px,4vw) 0;border-top:1px solid rgba(207,224,234,.12);margin-top:48px}
.pager a{text-decoration:none;max-width:46%;display:block}
.pager .dir{font-size:11.5px;color:var(--chalk-dim);margin-bottom:5px}
.pager .ttl{font-family:var(--font-read);font-size:19px;line-height:1.22;color:#fff}
.pager a:hover .ttl{color:var(--amber)}
.pager .to-next{text-align:right;margin-left:auto}

.footer{background:var(--sea-deep);color:var(--chalk-dim);padding:0 max(22px,4vw) 44px;
  display:flex;gap:18px;align-items:center;flex-wrap:wrap;font-size:13px}
.footer .social{border:0;padding:0;margin:0}

/* lightbox (entry pages) */
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(5,10,15,.95);display:none}
.lightbox.on{display:grid;place-items:center}
.lightbox figure{margin:0;max-width:min(94vw,1180px);text-align:center}
.lightbox img{max-width:100%;max-height:76vh;display:block;margin:0 auto;
  box-shadow:0 24px 70px rgba(0,0,0,.65)}
.lightbox figcaption{margin-top:16px;font-size:13px;color:var(--chalk-dim);
  max-width:62ch;margin-left:auto;margin-right:auto}
.lb-btn{position:fixed;top:50%;transform:translateY(-50%);width:46px;height:46px;
  display:grid;place-items:center;color:var(--chalk);
  background:rgba(207,224,234,.1);border-radius:50%;transition:background .16s}
.lb-btn:hover{background:rgba(207,224,234,.24)}
.lb-btn[disabled]{opacity:.25;cursor:default}
.lb-btn svg{width:20px;height:20px}
#lbPrev{left:18px}#lbNext{right:18px}
#lbClose{top:16px;right:16px;transform:none}

@media(max-width:760px){
  :root{--bar:54px}
  .topbar{gap:10px;padding:0 12px}
  .brand b{font-size:16px}
  .regions{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-shrink:1}
  .regions button{padding:6px 9px;font-size:12px;flex:0 0 auto}
  .indexbtn{display:none}
  .social{padding-left:8px;margin-left:0}
  .hint{display:none}
  .controls{right:12px;bottom:12px}
  .entry-head{padding:calc(var(--bar) + 30px) 20px 24px}
  .entry-head .stand{font-size:17.5px}
  .article{padding:30px 20px 10px}
  .reels{grid-template-columns:repeat(auto-fit,minmax(135px,1fr));gap:11px}
  .article p{font-size:17px}
  .grid img{height:150px}
  .pager a{max-width:100%}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.06s !important}
}