/* Living CV — dark industrial. Layout only; ALL content lives in js/data.js */
:root{
  --bg:#16181A; --panel:#1F2225; --steel:#2A2E31; --edge:#3A3F43;
  --txt:#D8D3C8; --dim:#9A948A; --ink-hand:#EDE6D8;
  --org:#E8632C; --teal:#6FA3A0; --tape:rgba(20,20,20,.85);
  --shadow:0 10px 26px rgba(0,0,0,.45);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--bg);color:var(--txt);font-family:'Courier Prime',monospace;line-height:1.65;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 55% 40% at 15% 10%,rgba(232,99,44,.05),transparent 60%),
             radial-gradient(ellipse 60% 45% at 88% 85%,rgba(111,163,160,.05),transparent 55%),
             repeating-linear-gradient(115deg,transparent 0 2px,rgba(255,255,255,.012) 2px 3px)}
main,header,footer,nav,section{position:relative;z-index:1}
.wrap{max-width:1060px;margin:0 auto;padding:0 20px}
h1,h2,h3{font-family:'Archivo Black',sans-serif;text-transform:uppercase;line-height:1.03;letter-spacing:.02em}
.hand{font-family:'Caveat',cursive;font-size:1.5rem;line-height:1.25;color:var(--ink-hand)}
.hand.org{color:var(--org)}
a{color:var(--org)}
a:focus-visible,button:focus-visible{outline:3px solid var(--org);outline-offset:3px}
.tape{position:absolute;width:96px;height:26px;background:var(--tape);box-shadow:0 2px 6px rgba(0,0,0,.5);z-index:3;border:1px solid rgba(255,255,255,.05)}
.tape::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 5px,rgba(255,255,255,.03) 5px 6px)}
.tape.tl{top:-12px;left:-20px;transform:rotate(-7deg)}.tape.tr{top:-12px;right:-20px;transform:rotate(6deg)}
.tape.tc{top:-13px;left:50%;transform:translateX(-50%) rotate(-2deg)}
.crate{display:inline-block;font-family:'Archivo Black',sans-serif;text-transform:uppercase;border:3px solid currentColor;padding:.2em .55em;letter-spacing:.14em;font-size:.72rem;opacity:.92;transform:rotate(-3deg)}
.crate.org{color:var(--org)}
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.js .rv.in{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}}
header{padding:64px 0 26px;text-align:center}
header .who{position:relative;display:inline-block;background:var(--panel);border:1px solid var(--edge);padding:28px 36px 24px;box-shadow:var(--shadow)}
header .who .manifest{position:absolute;top:8px;left:12px;font-size:.62rem;letter-spacing:.22em;color:var(--dim)}
header h1{font-size:clamp(2rem,7vw,3.8rem);color:#F2EEE6}
header .role{letter-spacing:.28em;text-transform:uppercase;font-size:.76rem;margin-top:12px;color:var(--dim)}
header .lede{max-width:560px;margin:24px auto 0}
header .lede .hand{font-size:1.6rem}
nav{position:sticky;top:0;background:rgba(22,24,26,.94);backdrop-filter:blur(5px);border-bottom:1px solid var(--edge);z-index:500}
nav ul{display:flex;gap:2px;justify-content:center;list-style:none;padding:10px 8px;flex-wrap:wrap}
nav a{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--txt);padding:6px 11px;border:1px solid transparent}
nav a:hover{border-color:var(--org);color:var(--org)}
#map-sec{padding:52px 0 8px}
.sec-head{text-align:center;margin-bottom:26px}
.sec-head h2{font-size:clamp(1.5rem,4.6vw,2.3rem);color:#F2EEE6}
.map-frame{position:relative;border:1px solid var(--edge);box-shadow:var(--shadow);background:var(--panel);padding:10px}
.map-frame .frame-label{position:absolute;top:-11px;left:18px;background:var(--bg);padding:0 10px;font-size:.62rem;letter-spacing:.24em;color:var(--dim);z-index:5}
#livemap{height:70vh;min-height:420px;background:var(--steel)}
.leaflet-tile{filter:brightness(.92) contrast(1.04)}
.leaflet-container{font-family:'Courier Prime',monospace;background:var(--steel)}
.map-ui{position:absolute;top:24px;right:24px;z-index:1000;display:flex;flex-direction:column;gap:8px}
.map-btn{font-family:'Courier Prime',monospace;font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:.7rem;background:var(--panel);color:var(--txt);border:1px solid var(--edge);padding:9px 14px;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.5)}
.map-btn:hover{border-color:var(--org);color:var(--org)}
.pin-pol{background:#23272A;padding:4px 4px 15px;box-shadow:0 5px 14px rgba(0,0,0,.6);transform:rotate(-4deg);border:1px solid var(--edge)}
.pin-pol.alt{transform:rotate(4deg)}
.pin-pol .pp{width:100%;height:calc(100% - 12px);background:repeating-linear-gradient(45deg,#2A2E31 0 8px,#33383C 8px 9px);display:flex;align-items:center;justify-content:center;font-size:14px;overflow:hidden}
.pin-pol .pp img{width:100%;height:100%;object-fit:cover}
.pin-pol .pl{position:absolute;bottom:1px;left:0;right:0;text-align:center;font-family:'Caveat',cursive;font-size:12px;color:var(--ink-hand)}
.pin-pol.future{outline:2px dashed var(--teal)}
.map-note{text-align:center;padding:12px 0 0}
#deadreck{display:none;position:relative;height:70vh;min-height:420px;background:var(--steel);align-items:center;justify-content:center;flex-direction:column;gap:18px;text-align:center;padding:20px}
#deadreck svg{width:min(680px,92%);height:auto}
.dr-route{fill:none;stroke:var(--org);stroke-width:2.4;stroke-dasharray:8 7;stroke-linecap:round}
.dr-route.f{stroke:var(--teal)}
.dr-dot{fill:var(--org);stroke:#16181A;stroke-width:1.5}
.dr-dot.f{fill:var(--teal)}
.dr-tx{font-family:'Courier Prime',monospace;font-weight:700;font-size:12px;fill:var(--txt);letter-spacing:.06em;text-transform:uppercase}
.map-frame.offline #livemap,.map-frame.offline .map-ui{display:none}
.map-frame.offline #deadreck{display:flex}
.chapter{position:relative;padding:104px 0 88px;overflow:hidden;border-top:1px solid var(--edge)}
.collage{position:absolute;inset:0;pointer-events:none;z-index:0}
.ghost{position:absolute;top:6%;left:-2%;font-family:'Archivo Black',sans-serif;text-transform:uppercase;color:#FFF;opacity:.028;font-size:clamp(6rem,22vw,15rem);white-space:nowrap;line-height:1}
.chapter.flip .ghost{left:auto;right:-3%}
.plate{position:absolute;background:var(--panel);box-shadow:0 6px 18px rgba(0,0,0,.35);border:1px solid var(--edge)}
.plate::before,.plate::after{content:"";position:absolute;width:6px;height:6px;border-radius:50%;background:var(--edge);top:6px}
.plate::before{left:6px}.plate::after{right:6px}
.chapstamp{position:absolute;bottom:16%;right:9%;transform:rotate(-8deg);font-family:'Archivo Black',sans-serif;text-transform:uppercase;border:3px solid var(--edge);color:var(--edge);padding:.3em .6em;letter-spacing:.16em;font-size:1rem;opacity:.85}
.ch-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:44px;align-items:start}
.ch-body .meta{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--org);font-weight:700}
.ch-body h2{font-size:clamp(1.5rem,4.4vw,2.2rem);margin:.35rem 0 .7rem;color:#F2EEE6}
.ch-body p{font-size:.95rem;max-width:58ch}
.ach{list-style:none;margin-top:18px}
.ach li{position:relative;padding:7px 0 7px 32px;font-size:.92rem;border-bottom:1px dashed var(--edge)}
.ach li::before{content:"\25B8";position:absolute;left:6px;top:7px;color:var(--teal);font-weight:700}
.ach li strong{color:var(--org)}
.ch-body .lesson{display:block;margin-top:18px;font-size:1.4rem}
.ph-stack{position:relative;min-height:460px}
.ph-stack.empty{min-height:0}
.float-ph{position:absolute;background:#23272A;border:1px solid var(--edge);padding:11px 11px 42px;box-shadow:var(--shadow);width:230px;transition:box-shadow .35s ease;will-change:transform;transform:rotate(var(--rot,0deg))}
.float-ph .ph{aspect-ratio:1/1.05;background:repeating-linear-gradient(45deg,#2A2E31 0 14px,#33383C 14px 15px);display:flex;align-items:center;justify-content:center;color:var(--dim);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;text-align:center;padding:8px;overflow:hidden}
.float-ph .ph img{width:100%;height:100%;object-fit:cover}
.float-ph figcaption{position:absolute;bottom:8px;left:0;right:0;text-align:center;font-family:'Caveat',cursive;font-size:1.15rem;color:var(--ink-hand)}
.float-ph:hover{box-shadow:0 20px 40px rgba(0,0,0,.6);z-index:5}
.float-ph.p1{top:0;left:0;--rot:-5deg}
.float-ph.p2{top:150px;right:-8px;--rot:4deg;width:250px}
.float-ph.p3{top:320px;left:26px;--rot:-2deg;width:210px}
.chapter.flip .ch-grid{grid-template-columns:340px minmax(0,1fr)}
.chapter.flip .ph-stack{order:-1}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(275px,1fr));gap:28px;position:relative;z-index:2}
.card{background:var(--panel);border:1px solid var(--edge);box-shadow:var(--shadow);padding:24px 22px 20px;position:relative;display:flex;flex-direction:column}
.card .kind{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--teal);font-weight:700}
.card h3{font-size:1.08rem;margin:.3rem 0 .55rem;color:#F2EEE6}
.card p{font-size:.9rem;flex:1}
.card .foot{margin-top:14px;padding-top:10px;border-top:1px dashed var(--edge);font-size:.85rem}
.card .hand{font-size:1.3rem}
.tickets{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-top:22px;position:relative;z-index:2}
.ticket{background:var(--panel);border:1px dashed var(--edge);padding:12px 20px;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.ticket small{display:block;font-weight:400;letter-spacing:.05em;color:var(--dim);text-transform:none}
.ticket:nth-child(odd){transform:rotate(-1.4deg)}.ticket:nth-child(even){transform:rotate(1.1deg)}
.notes-list{max-width:640px;margin:0 auto;position:relative;z-index:2}
.fnote{background:var(--panel);border:1px solid var(--edge);border-left:3px solid var(--org);padding:18px 22px;margin-bottom:20px;box-shadow:var(--shadow)}
.fnote .fdate{font-size:.7rem;letter-spacing:.22em;color:var(--dim)}
.fnote h3{font-size:1rem;margin:.25rem 0 .4rem;color:#F2EEE6}
.fnote p{font-size:.92rem}
.creed{text-align:center;padding:84px 20px}
.creed .plaque{display:inline-block;position:relative;border:1px solid var(--edge);background:var(--panel);box-shadow:var(--shadow);padding:34px 40px}
.creed .hand{font-size:clamp(1.9rem,5.6vw,3rem);color:#F2EEE6}
.creed .sub{margin-top:10px;font-size:.76rem;letter-spacing:.28em;text-transform:uppercase;color:var(--dim)}
footer{padding:44px 20px 92px;text-align:center}
.contact-note{display:inline-block;background:var(--panel);border:1px solid var(--edge);box-shadow:var(--shadow);padding:30px 34px;position:relative;max-width:520px}
.contact-note .hand{font-size:1.65rem}
.contact-note .mail{display:inline-block;margin-top:14px;font-weight:700;letter-spacing:.08em;border:2px solid var(--txt);padding:10px 20px;color:var(--txt);text-decoration:none}
.contact-note .mail:hover{border-color:var(--org);color:var(--org)}
footer .fine{margin-top:24px;font-size:.72rem;color:var(--dim);letter-spacing:.1em}
@media(max-width:820px){
  .ch-grid,.chapter.flip .ch-grid{grid-template-columns:1fr}
  .ph-stack{min-height:0;display:flex;flex-wrap:wrap;gap:18px;justify-content:center}
  .float-ph{position:static;width:46%!important;min-width:180px}
  .chapter.flip .ph-stack{order:2}
  #livemap,#deadreck{height:54vh}
}