:root{
  --ink:#10151E;
  --paper:#F2EAD8;
  --gold:#E8B25C;
  --accent:#F58426;
  --display:'Staatliches','Arial Narrow',sans-serif;
  --body:'Atkinson Hyperlegible',Verdana,sans-serif;
  --mono:'IBM Plex Mono',Consolas,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
body{background:#0E1524;font-family:var(--body)}

#stage{position:fixed;inset:0;overflow:hidden}
#scene{position:absolute;inset:0;width:100%;height:100%;display:block}

#props{position:absolute;inset:0;pointer-events:none}
.prop{
  position:absolute;left:0;top:0;
  color:var(--prop-ink, #2C2B44);
  will-change:transform;
  transform-origin:50% 100%;   /* pop-up scale and sway pivot on the ground line */
}
.prop svg{display:block;width:100%;height:100%;overflow:visible}
/* raster props (Gemini art): painted onto a canvas by the engine, which applies the
   band's atmospheric fog and the night darkening itself */
.prop canvas{display:block;width:100%;height:100%}
/* cast shadows: the prop's own silhouette, squashed onto the ground and skewed off the sun */
.propshadow, #charShadow{
  position:absolute;left:0;top:0;
  will-change:transform;
  filter:brightness(0);
  transform-origin:50% 100%;
  pointer-events:none;
}
.propshadow svg{display:block;width:100%;height:100%;overflow:visible}
#charShadow img{display:block;width:100%;height:100%}

#char{
  position:absolute;left:0;top:0;
  z-index:40;                     /* above all prop layers, always */
  height:10vh;
  aspect-ratio:594/1256;
  will-change:transform;
  pointer-events:none;
}
#char img{position:absolute;display:block}
#torso{left:0;top:0;width:100%;z-index:5}
/* parts rig: identical leg art front and back; darker back leg always behind (Raza's rule) */
.leg{position:absolute;top:51.91%;height:48.09%;width:27.10%}
#leg-far{left:48.82%;transform-origin:45% 5.79%;z-index:2}
#leg-near{left:56.23%;transform-origin:45% 5.79%;z-index:1}
.leg .thigh{left:0;top:0;width:100%;height:49.67%}
.leg .shin{left:0;top:43.05%;width:100%;height:56.95%;transform-origin:45% 5.81%}
#arm{left:62.50%;top:23.50%;width:18.69%;z-index:4;transform-origin:49.5% 6.3%}

/* foreground silhouettes that pass in front of the walker */
#fg{position:absolute;inset:0;width:100%;height:100%;z-index:45;pointer-events:none;display:block}
#cards{position:absolute;inset:0;pointer-events:none;z-index:60}
.card{
  position:absolute;top:10vh;left:0;
  width:min(86vw,560px);
  will-change:transform;
  color:var(--paper);
  pointer-events:auto;
}
/* Open-sky Firewatch/Alto typography: no frosted glass box, sits directly in the sky.
   Daytime zones (jobsite, meadow) have bright skies so they use deep ink; dusk/night use warm paper. */
.card.cover{
  width:min(92vw,860px);
  --c-fg:var(--paper);
  --c-sub:rgba(242,234,216,.80);
  --c-kicker:var(--gold);
  --c-rule:rgba(242,234,216,.24);
  --c-tag-bg:rgba(16,21,30,.38);
  --c-tag-fg:var(--paper);
  --c-shadow:0 2px 16px rgba(10,14,24,.42);
  color:var(--c-fg);
}
.card.cover[data-zone="savanna"]{width:min(95vw,960px)}
.card.cover[data-zone="jobsite"],
.card.cover[data-zone="meadow"]{
  --c-fg:#151C26;
  --c-sub:rgba(21,28,38,.78);
  --c-kicker:#8C4A18;
  --c-rule:rgba(21,28,38,.22);
  --c-tag-bg:rgba(21,28,38,.09);
  --c-tag-fg:#151C26;
  --c-shadow:none;
}
.card .c-num{
  display:block;
  font-family:var(--mono);
  font-size:11px;
  font-weight:600;
  letter-spacing:.28em;
  color:var(--c-kicker);
  margin-bottom:4px;
  text-shadow:var(--c-shadow);
}
.card .ztitle{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(38px,5.2vw,60px);
  line-height:.94;
  letter-spacing:.03em;
  color:var(--c-fg);
  text-shadow:var(--c-shadow);
}
.card .c-context{
  margin-top:6px;
  font-size:14.5px;
  line-height:1.4;
  color:var(--c-sub);
  text-shadow:var(--c-shadow);
}
.card .c-context a{
  color:var(--c-kicker);
  text-decoration:none;
  border-bottom:1px solid currentColor;
}
.card .c-role{
  margin-top:12px;
  padding-top:10px;
  border-top:1.5px solid var(--c-rule);
  font-family:var(--mono);
  font-size:12px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--c-kicker);
  display:flex;
  justify-content:flex-start;
  align-items:center;
  gap:6px 12px;
  flex-wrap:nowrap;
  text-shadow:var(--c-shadow);
}
@media (max-width:900px){.card .c-role{flex-wrap:wrap}}
.card .c-rt{
  white-space:nowrap;
}
.card .c-own{
  font-family:var(--body);
  font-size:14px;
  font-weight:400;
  letter-spacing:0;
  text-transform:none;
  color:var(--c-fg);
  white-space:nowrap;
}
@media (max-width:900px){.card .c-own{white-space:normal}}
.card .c-own::before{
  content:'·';
  margin-right:10px;
  color:var(--c-kicker);
  opacity:.7;
}
.card .c-date{
  font-family:var(--mono);
  font-weight:500;
  font-size:10.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--c-tag-fg);
  background:var(--c-tag-bg);
  border:1px solid var(--c-rule);
  padding:2px 8px;
  white-space:nowrap;
  text-shadow:none;
}
.card .c-tiles{
  margin-top:12px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  max-width:760px;
}
.card .c-tiles span{
  font-family:var(--mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.04em;
  padding:3px 8px;
  background:var(--c-tag-bg);
  border:1px solid var(--c-rule);
  color:var(--c-tag-fg);
}
.card .c-enter{
  margin-top:14px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--mono);
  font-size:12px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#10151E;
  background:var(--accent);
  border:none;
  padding:8px 14px;
  cursor:pointer;
  text-decoration:none;
  transition:transform .15s ease;
}
.card .c-enter:hover{
  transform:translateY(-1px);
}
.card .c-enter kbd{
  font-family:var(--mono);
  font-size:11px;
  background:rgba(16,21,30,.16);
  padding:1px 5px;
}
.card .c-links{
  margin-top:14px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
.card .c-links .c-enter{margin-top:0}
.card .c-link-btn{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--c-fg);
  background:var(--c-tag-bg);
  border:1px solid var(--c-rule);
  padding:7px 12px;
  text-decoration:none;
}
.card .c-link-btn:hover{
  border-color:var(--accent);
}
.card.lockup{top:11vh;width:min(80vw,560px)}
.card.lockup .eyebrow{
  font-family:var(--mono);
  font-size:11px;letter-spacing:.3em;
  color:var(--gold);
}
.card.lockup h1{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(52px,9vw,110px);
  line-height:.95;letter-spacing:.03em;
  margin-top:8px;
  text-shadow:0 3px 24px rgba(10,14,24,.55);
}
.card.lockup .sub{
  margin-top:8px;
  font-size:clamp(15px,1.9vw,19px);
  color:rgba(242,234,216,.85);
}
.card.lockup .lockup-links{
  margin-top:14px;
  display:flex;
  gap:10px;
  align-items:center;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.04em;
  color:rgba(242,234,216,.65);
}
.card.lockup .lockup-links a{
  color:var(--gold);
  text-decoration:none;
  border-bottom:1px solid rgba(232,178,92,.35);
}
.card.lockup .lockup-links a:hover{
  color:var(--paper);
}

#hint{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%);
  font-family:var(--mono);
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);
  opacity:.9;
  transition:opacity .6s ease;
  animation:hintbob 2.2s ease-in-out infinite;
}
#hint.gone{opacity:0}
@keyframes hintbob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(6px)}}
@media (prefers-reduced-motion: reduce){ #hint{animation:none} }

.mono{font-family:var(--mono)}

#build{
  position:fixed;left:14px;bottom:12px;z-index:100;
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  color:var(--gold);opacity:.75;
}

/* ---------------- Subtle Over-Prop Proximity Marker & Sky Showcase ---------------- */

#cards, #hint{
  transition:opacity .32s ease;
}
body.station-open #cards,
body.station-open #prop-marker,
body.station-open #hint{
  opacity:0 !important;
  pointer-events:none !important;
}

/* Editorial Over-Prop Marker:
   No heavy dark rectangle. A delicate vertical hairline stem + small hollow orange ↑ badge
   + open-air Josefin Sans whisper anchored right above the active prop. */
.prop-marker{
  position:fixed;
  left:0;
  top:0;
  z-index:72;
  display:flex;
  flex-direction:column;
  align-items:center;
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
  pointer-events:auto;
  --pm-fg:color-mix(in srgb, var(--sky-bot) 12%, #FBF5E8);
  --pm-kick:color-mix(in srgb, var(--sky-bot) 40%, #F7D9A0);
  --pm-shadow:0 2px 14px rgba(10, 14, 24, 0.55);
  opacity:0;
  transform:translate(-50%, calc(-100% + 10px));
  transition:opacity .26s ease, transform .28s cubic-bezier(.2,.8,.2,1);
}
.prop-marker[hidden]{display:none !important}
.prop-marker[data-zone="jobsite"],
.prop-marker[data-zone="meadow"]{
  --pm-fg:color-mix(in srgb, var(--sky-top) 20%, #132030);
  --pm-kick:color-mix(in srgb, var(--near) 55%, #10151E);
  --pm-shadow:0 1px 10px rgba(255, 255, 255, 0.45);
}
.prop-marker.visible{
  opacity:1;
  transform:translate(-50%, -100%);
}
.prop-marker .pm-card{
  display:inline-flex;
  flex-direction:column;
  border-radius:14px;
  overflow:hidden;
  background:color-mix(in srgb, var(--sky-top) 28%, rgba(12, 18, 28, 0.32));
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
  border:1px solid color-mix(in srgb, var(--pm-fg) 20%, transparent);
  box-shadow:0 12px 28px -10px rgba(8, 12, 20, 0.36);
  transition:border-color .18s ease, transform .18s ease, background .18s ease;
}
.prop-marker[data-zone="jobsite"] .pm-card,
.prop-marker[data-zone="meadow"] .pm-card{
  background:rgba(255, 255, 255, 0.42);
  border-color:color-mix(in srgb, var(--pm-fg) 18%, transparent);
}
.prop-marker:hover .pm-card{
  border-color:var(--accent);
  transform:translateY(-2px);
}
/* Horizontal preview photo above text: width:0 + min-width:100% locks photo width
   to the exact width of the text row below it while expanding the popup vertically */
.prop-marker .pm-thumb{
  width:0;
  min-width:100%;
  height:92px;
  overflow:hidden;
  background:rgba(10, 15, 24, 0.30);
  border-bottom:1px solid color-mix(in srgb, var(--pm-fg) 14%, transparent);
  display:block;
  position:relative;
}
.prop-marker .pm-thumb img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  opacity:0;
  pointer-events:none;
  transition:transform .28s ease;
}
.prop-marker .pm-thumb img.active{
  opacity:1;
}
.prop-marker:hover .pm-thumb img.active{
  transform:scale(1.03);
}
.prop-marker .pm-head{
  display:inline-flex;
  align-items:center;
  gap:11px;
  padding:8px 14px 8px 10px;
}
.prop-marker .pm-arrow{
  width:24px;
  height:24px;
  border-radius:50%;
  border:1.5px solid var(--accent);
  color:var(--accent);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:'Josefin Sans', sans-serif;
  font-weight:600;
  font-size:12px;
  line-height:1;
  flex-shrink:0;
  animation:pmarrowbob 1.8s ease-in-out infinite;
  transition:background .18s ease, color .18s ease;
}
.prop-marker:hover .pm-arrow{
  background:var(--accent);
  color:#10151E;
}
@keyframes pmarrowbob{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-2px)}
}
.prop-marker .pm-text{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
  gap:2px;
}
.prop-marker .pm-kicker{
  font-family:'Josefin Sans', sans-serif;
  font-weight:600;
  font-size:9px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--pm-kick);
  text-shadow:var(--pm-shadow);
  white-space:nowrap;
}
.prop-marker .pm-title{
  font-family:'Josefin Sans', sans-serif;
  font-weight:600;
  font-size:13.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--pm-fg);
  text-shadow:var(--pm-shadow);
  white-space:nowrap;
}
.prop-marker .pm-stem{
  width:1px;
  height:22px;
  background:linear-gradient(to bottom, var(--accent), transparent);
  opacity:.75;
}

/* Expanded Open-Sky Project Showcase */
#station-ui.card.cover.station-card{
  position:fixed;
  top:6.2vh;
  left:7vw;
  width:min(86vw, 1200px);
  z-index:85;
  pointer-events:none;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .32s ease, transform .32s cubic-bezier(.2,.8,.2,1);
}
#station-ui[hidden]{display:none !important}
body.station-open #station-ui.card.cover.station-card{
  opacity:1;
  transform:none;
  pointer-events:auto;
}

/* Horizontal Subpart Chapter Bar at the top of the opened showcase */
.station-card .st-subparts{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-bottom:18px;
  padding-bottom:12px;
  border-bottom:1px solid var(--c-rule);
}
.station-card .st-subpart-btn{
  border-radius:999px;
  background:var(--pill);
  border:1.5px solid var(--pill-line);
  color:var(--fg);
  padding:6px 14px 5px;
  font-family:'Josefin Sans', sans-serif;
  font-weight:600;
  font-size:11px;
  letter-spacing:.15em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.station-card .st-subpart-btn:hover{
  border-color:var(--accent);
  transform:translateY(-1px);
}
.station-card .st-subpart-btn.active{
  background:var(--accent);
  border-color:var(--accent);
  color:#10151E;
}

.station-card .st-spread{
  display:grid;
  grid-template-columns:minmax(0, 820px);
  gap:28px;
  align-items:start;
}
.station-card.has-media .st-spread{
  grid-template-columns:minmax(0, 0.94fr) minmax(380px, 1.12fr);
  column-gap:42px;
}
@media (max-width: 1024px){
  #station-ui.card.cover.station-card{
    top:5vh;left:5vw;width:90vw;
    max-height:88vh;overflow-y:auto;
  }
  .station-card.has-media .st-spread{
    grid-template-columns:1fr;
    row-gap:22px;
  }
}

.station-card .ztitle{
  font-size:clamp(32px, 4.1vw, 52px) !important;
  line-height:1.02 !important;
}
.station-card .c-context{
  max-width:60ch;
}
.station-card .c-role{
  flex-wrap:wrap !important;
  max-width:100%;
}
.station-card .c-own{
  white-space:normal !important;
}

.station-card .st-notes{
  display:none;
}

.station-card .st-actions{
  margin-top:20px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
}
.station-card .st-actions button{
  cursor:pointer;
}
.station-card .st-ext-links{
  display:inline-flex;
  flex-wrap:wrap;
  gap:10px;
}

.station-card .st-right{
  display:none;
  flex-direction:column;
  gap:10px;
}
.station-card.has-media .st-right{
  display:flex;
}

.station-card .st-media-frame{
  width:100%;
  aspect-ratio:16/10;
  border-radius:14px;
  overflow:hidden;
  border:1.5px solid color-mix(in srgb, var(--kick) 50%, transparent);
  background:rgba(10, 15, 24, 0.35);
  box-shadow:0 18px 44px -14px rgba(8, 12, 20, 0.38);
  display:flex;
  align-items:center;
  justify-content:center;
}
.station-card .st-media-frame video,
.station-card .st-media-frame img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.station-card .st-media-bar{
  display:flex;
  flex-direction:column;
  gap:7px;
}
.station-card .st-media-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}
.station-card .st-media-tab{
  border-radius:999px;
  background:transparent;
  border:1.5px solid color-mix(in srgb, var(--kick) 55%, transparent);
  color:var(--fg);
  padding:5px 12px 4px;
  font-family:'Josefin Sans', sans-serif;
  font-weight:600;
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.station-card .st-media-tab:hover{
  border-color:var(--accent);
}
.station-card .st-media-tab.active{
  background:var(--accent);
  border-color:var(--accent);
  color:#10151E;
}

.station-card .st-media-caption{
  font-family:'DM Sans', var(--body), sans-serif;
  font-size:13px;
  line-height:1.4;
  color:var(--c-sub);
  text-shadow:var(--c-shadow);
}

/* ---------------- Top-Right Trail Quick-Jump & Resume Bar ---------------- */

.trail-nav{
  position:fixed;
  top:2.2vh;
  right:2.6vw;
  z-index:22;
  display:inline-flex;
  align-items:center;
  gap:3px;
  padding:5px 11px;
  border-radius:999px;
  background:color-mix(in srgb, var(--sky-top, #182232) 38%, rgba(12, 18, 28, 0.26));
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(242, 234, 216, 0.22);
  box-shadow:0 8px 24px -10px rgba(8, 12, 20, 0.28);
  transition:opacity .25s ease, border-color .25s ease;
}
body.clean .trail-nav{
  display:none;
}
.trail-nav .tn-btn{
  appearance:none;
  border:0;
  background:transparent;
  color:rgba(248, 242, 230, 0.78);
  font-family:'Josefin Sans', sans-serif;
  font-weight:600;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:4px 7px 3px;
  border-radius:999px;
  cursor:pointer;
  text-decoration:none;
  transition:color .16s ease, background .16s ease, transform .16s ease;
}
.trail-nav .tn-btn:hover{
  color:#FFFDF8;
  background:rgba(245, 132, 38, 0.22);
}
.trail-nav .tn-btn.active{
  color:#10151E;
  background:#F58426;
}
.trail-nav .tn-resume{
  color:#FFD29D;
}
.trail-nav .tn-sep{
  color:rgba(242, 234, 216, 0.34);
  font-size:11px;
  padding:0 2px;
  user-select:none;
}
@media (max-width: 760px){
  .trail-nav{
    top:1.2vh;
    right:2.5vw;
    left:2.5vw;
    justify-content:space-between;
    overflow-x:auto;
    padding:4px 8px;
  }
  .trail-nav .tn-btn{
    font-size:10px;
    padding:3px 5px 2px;
  }
  .wip-badge{
    display:none;
  }
}

/* Subtle top-left WIP badge & Interactive Layout Studio */
.wip-badge{
  position:fixed;
  top:2.2vh;
  left:2.4vw;
  z-index:22;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:5px 12px 4px;
  border-radius:999px;
  background:color-mix(in srgb, var(--sky-top, #182232) 34%, rgba(12, 18, 28, 0.24));
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(242, 234, 216, 0.20);
  color:rgba(248, 242, 230, 0.78);
  font-family:'Josefin Sans', sans-serif;
  font-weight:600;
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  cursor:pointer;
  user-select:none;
  transition:opacity .25s ease, border-color .2s ease;
}
.wip-badge:hover{
  border-color:#F58426;
  color:#FFFDF8;
}
.wip-badge .wip-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#F58426;
  box-shadow:0 0 8px #F58426;
}
body.clean .wip-badge,
body.station-open .wip-badge{
  opacity:0;
  pointer-events:none;
}

/* Interactive Layout Studio HUD (?edit or Shift+L) */
.layout-studio{
  position:fixed;
  bottom:18px;
  left:18px;
  z-index:95;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:12px 15px;
  border-radius:14px;
  background:rgba(12, 17, 26, 0.88);
  backdrop-filter:blur(10px);
  border:1px solid rgba(245, 132, 38, 0.45);
  color:#F5EFE2;
  font-family:var(--mono);
  font-size:11.5px;
  max-width:460px;
  box-shadow:0 14px 36px rgba(0,0,0,0.45);
}
.layout-studio[hidden]{display:none !important}
.layout-studio .ls-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
}
.layout-studio .ls-title{
  font-family:'Josefin Sans', sans-serif;
  font-weight:700;
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#F58426;
  margin-right:auto;
}
.layout-studio button, .layout-studio select{
  background:rgba(255,255,255,0.08);
  color:#F5EFE2;
  border:1px solid rgba(255,255,255,0.2);
  border-radius:6px;
  padding:4px 8px;
  font-family:var(--mono);
  font-size:11px;
  cursor:pointer;
}
.layout-studio button:hover{
  border-color:#F58426;
  background:rgba(245, 132, 38, 0.22);
}
.layout-studio .ls-info{
  color:#B8C4D4;
  font-size:11px;
  line-height:1.35;
}