/* XFINALE — The Unfinished World · journey engine skin (station/journey/journey.css)
   Station tokens (CONTRACTS §7). No fixed or sticky layers anywhere: the art scrolls with the page.
   Phone: one scene per screen, art persistent at the top (≈38svh). Desktop ≥ 900px: art left ≈45%, text right ≤ 60ch. */
:root{
  --ink:#0a0604; --ink-2:#120c07; --panel:#160f08;
  --amber:#ffb020; --amber-soft:#ffd08a; --red:#ff5030; --brass:#c87830; --bone:#e8d9c3;
  --ink-text:#f4e6c6; --ink-dim:#c9b894; --ink-faint:#8a7a62;
  --line:rgba(255,176,32,.22); --line-soft:rgba(255,176,32,.12);
  --focus:#ffd08a;
  --disp:"Bowlby One","Arial Black",Impact,sans-serif;
  --ui:"Chakra Petch","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"Space Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{background:var(--ink); scroll-behavior:smooth;}
body{
  background:radial-gradient(900px 600px at 50% -10%, #1c120a 0%, rgba(10,6,4,0) 60%), var(--ink);
  color:var(--ink-text);
  font-family:var(--ui);
  font-size:clamp(17px, 1vw + 14px, 20px);
  line-height:1.55;
  min-height:100svh;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  overflow-wrap:anywhere;
}
img,svg{max-width:100%; height:auto;}
a{color:var(--amber-soft); text-decoration:underline; text-underline-offset:2px; text-decoration-color:rgba(255,208,138,.45);}
a:hover{color:#fff;}
:focus-visible{outline:2px solid var(--focus); outline-offset:3px; border-radius:2px;}
h1,h2,h3{font-family:var(--disp); font-weight:400; letter-spacing:.01em; line-height:1.1; margin:0; color:#fff3dc;}
p{margin:0 0 1em;}
strong,b{color:#fff3dc; font-weight:600;}
blockquote{margin:0 0 .9em; padding:6px 0 6px 16px; border-left:3px solid var(--amber); font-style:italic; color:#fbeed3;}
.sr{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); border:0;}

/* ---- page frame ---- */
.j-page{display:flex; flex-direction:column; min-height:100svh;}
.j-top{
  display:flex; align-items:center; gap:10px 16px; flex-wrap:wrap;
  padding:12px 16px; border-bottom:1px solid var(--line-soft);
  font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint);
}
.j-home{color:var(--amber); text-decoration:none; letter-spacing:.24em; font-weight:700; display:inline-flex; align-items:center; min-height:44px;}
.j-home:hover{color:var(--amber-soft);}
.j-top .j-sep{opacity:.4;}
.j-progress{color:var(--ink-dim); white-space:nowrap;}
.j-lang{
  margin-left:auto; min-height:44px; min-width:44px; padding:0 12px; cursor:pointer;
  font:inherit; color:var(--ink-dim); background:transparent; border:1px solid var(--line); border-radius:2px;
}
.j-lang:hover{color:#fff; border-color:var(--amber);}

/* ---- treatment labels: three distinct rules, same on the header label and inside each scene ---- */
.j-label,.j-tag{display:inline-block; font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; padding:6px 0 4px; border-bottom:2px solid var(--ink-faint); color:var(--ink-dim);}
.j-label:empty{display:none;}
.j-label[data-treatment="documented"],.j-tag[data-treatment="documented"]{color:var(--amber); border-bottom:2px solid var(--amber);}
.j-label[data-treatment="reading"],.j-tag[data-treatment="reading"]{color:var(--brass); border-bottom:2px dashed var(--brass);}
.j-label[data-treatment="imagined"],.j-tag[data-treatment="imagined"]{color:var(--bone); border-bottom:2px dotted var(--bone);}
.scene{border-left:3px solid var(--ink-faint); padding-left:16px;}
.scene[data-treatment="documented"]{border-left:3px solid var(--amber);}
.scene[data-treatment="reading"]{border-left:3px dashed var(--brass);}
.scene[data-treatment="imagined"]{border-left:3px dotted var(--bone);}

/* ---- layout: phone first ---- */
.j-main{display:block; flex:1;}
#j-art{
  display:flex; align-items:center; justify-content:center;
  height:38svh; min-height:200px; max-height:420px; padding:12px 16px 4px;
}
#j-art img,#j-art svg{display:block; max-width:100%; max-height:100%; width:auto; height:auto;}
#j-art:empty{display:none;}
.j-text{padding:8px 16px 40px; max-width:60ch;}

@media (min-width:900px){
  .j-main{display:grid; grid-template-columns:minmax(0,45fr) minmax(0,55fr); gap:0 40px; align-items:start; padding:0 32px;}
  #j-art{height:auto; min-height:70vh; max-height:none; padding:32px 0;}
  #j-art img,#j-art svg{max-height:80vh;}
  .j-text{padding:40px 0 64px; max-width:60ch;}
  .j-top{padding:12px 32px;}
}

/* ---- scenes ---- */
.scene{display:none; margin:8px 0 0;}
.scene[data-active]{display:block; animation:rise .5s var(--ease) both;}
@keyframes rise{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}
.j-tagrow{display:flex; gap:8px 14px; align-items:baseline; flex-wrap:wrap; margin:0 0 10px;}
.j-kind{font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint);}
.j-title{font-size:clamp(26px, 4.6vw, 40px); margin:.1em 0 .45em; color:#fff3dc;}
.scene[data-kind="doorway"] .j-title{font-size:clamp(30px, 6vw, 52px);}
.j-body{color:var(--ink-text);}
.j-body p{margin:0 0 1em;}
.j-missing,.j-idea{margin:12px 0 0; padding:10px 12px; border:1px dashed var(--line); border-radius:3px; font-size:15px; color:var(--ink-dim);}
.j-missing .k,.j-note-k,.j-src-k,.j-hands-k,.j-received-k,.j-resume-k,.j-share-k{font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase;}
.j-missing .k{color:var(--brass); margin-right:6px;}
.j-idea{border-style:dotted; border-color:rgba(232,217,195,.35); color:var(--bone); font-style:italic;}

/* field notes */
.j-notes{display:grid; gap:10px; margin:16px 0 0;}
.j-note{border:1px solid var(--line-soft); border-left:3px dashed var(--brass); border-radius:3px; padding:10px 12px; background:rgba(200,120,48,.05);}
.j-note-k{display:block; color:var(--brass); margin-bottom:4px;}
.j-note p{margin:0; font-size:16px; color:var(--ink-dim); font-style:italic;}

/* hands */
.j-hands{list-style:none; margin:10px 0 0; padding:0; display:grid; gap:8px;}
.j-hands li{padding:8px 12px; border:1px solid var(--line-soft); border-radius:3px; font-size:16px; color:var(--ink-dim);}
.j-hands li b{color:var(--amber-soft);}
.j-hands li .role{font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--brass);}

/* invitation */
.j-invite{margin:14px 0 0; padding:14px 16px; border:1px solid var(--line); border-radius:3px; background:rgba(255,176,32,.04);}
.j-invite h3{font-family:var(--ui); font-weight:700; font-size:19px; color:var(--amber-soft); margin:0 0 .4em;}
.j-invite p{margin:0 0 .7em; font-size:16px; color:var(--ink-dim);}
.j-invite p:last-child{margin-bottom:0;}

/* pull-back */
.j-pull{margin:16px 0 0;}
.j-pull a,.j-pull-inert{
  display:inline-flex; align-items:center; min-height:48px; padding:10px 18px; border-radius:2px;
  font-family:var(--mono); font-size:13px; letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
}
.j-pull a{color:#1a0b05; background:linear-gradient(180deg, var(--amber), #e0921a); border:1px solid var(--amber); font-weight:700;}
.j-pull a:hover{box-shadow:0 10px 30px -14px rgba(255,176,32,.9); color:#000;}
.j-pull-inert{color:var(--ink-faint); border:1px dashed var(--line); cursor:default;}
.j-pull-note{display:block; margin-top:6px; font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint);}

/* ---- buttons ---- */
.btn{
  font-family:var(--mono); font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-text); background:rgba(255,176,32,.08); border:1px solid rgba(255,176,32,.45); border-radius:2px;
  min-height:48px; padding:10px 18px; cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:transform .18s var(--ease), box-shadow .25s, border-color .25s, background .25s;
}
.btn:hover{border-color:var(--amber); transform:translateY(-1px);}
.btn:active{transform:none;}
.btn.primary{background:linear-gradient(180deg, var(--amber), #e0921a); border-color:var(--amber); color:#1a0b05; font-weight:700; box-shadow:0 10px 30px -16px rgba(255,176,32,.9);}
.btn.primary:hover{box-shadow:0 12px 36px -14px rgba(255,176,32,1);}
.btn.ghost{background:transparent; border-color:var(--line); color:var(--ink-dim);}
.btn.ghost:hover{border-color:var(--amber); color:#fff;}
.btn.sm{min-height:44px; padding:8px 14px; font-size:12px;}
.btn:disabled{opacity:.45; cursor:not-allowed; transform:none; box-shadow:none;}
.controls{display:flex; gap:10px 12px; flex-wrap:wrap; align-items:center; margin-top:22px;}

/* ---- sources drawer ---- */
.src-toggle{
  font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--amber-soft);
  background:none; border:0; border-bottom:1px dotted rgba(255,208,138,.55); border-radius:0; min-height:44px; padding:10px 0; cursor:pointer;
}
.src-toggle:hover{color:#fff;}
.src-body{display:none; margin:14px 0 0; padding:12px 14px; background:rgba(255,176,32,.04); border:1px solid var(--line); border-radius:3px; color:var(--ink-dim);}
.src-body[data-open]{display:block; animation:rise .35s var(--ease) both;}
.j-src{padding:8px 0; border-top:1px solid var(--line-soft);}
.j-src:first-child{border-top:0; padding-top:0;}
.j-src-head{font-size:16px; color:var(--ink-text); margin:0 0 .5em;}
.j-src-head b{color:#fff3dc;}
.j-src-head .m{font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--ink-dim);}
.j-src blockquote{font-size:16px; margin:0 0 .7em;}
.j-src-k{display:inline-block; min-width:9.5em; margin-right:6px;}
.j-src-shows .j-src-k{color:var(--amber);}
.j-src-not .j-src-k{color:var(--red);}
.j-src-shows,.j-src-not{font-size:15px; margin:0 0 .4em; color:var(--ink-text);}
.j-src-links{display:flex; gap:8px 18px; flex-wrap:wrap; align-items:center; margin-top:6px; font-family:var(--mono); font-size:12px; letter-spacing:.06em;}
.j-src-links a{display:inline-flex; align-items:center; min-height:44px;}
.j-src-doi{color:var(--ink-faint);}

/* ---- share card ---- */
.j-share{margin:26px 0 0; padding:16px; border:1px solid var(--line); border-radius:3px; background:rgba(255,176,32,.035);}
.j-share-k{display:block; color:var(--amber); margin-bottom:6px;}
.j-share-card{font-family:var(--disp); font-size:20px; line-height:1.25; color:#fff3dc; margin:0 0 .5em;}
.j-share-hint{font-size:15px; color:var(--ink-dim); margin:0 0 .8em;}
.j-share textarea{
  width:100%; min-height:64px; resize:vertical; background:rgba(10,6,4,.7); color:var(--ink-text);
  border:1px solid var(--line); border-radius:3px; padding:10px 12px; font-family:var(--ui); font-size:16px; line-height:1.4;
}
.j-share textarea:focus{border-color:var(--amber); outline:none; box-shadow:0 0 0 2px rgba(255,176,32,.18);}
.j-count{font-family:var(--mono); font-size:12px; letter-spacing:.08em; color:var(--ink-faint); margin:4px 0 0; text-align:right;}
.j-share .controls{margin-top:12px;}
.sharebox{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:12px 0 0;}
.sharebox input{flex:1; min-width:180px; min-height:44px; background:rgba(10,6,4,.7); border:1px solid var(--line-soft); color:var(--ink-dim); border-radius:3px; padding:8px 10px; font-family:var(--mono); font-size:12px;}
.j-privacy{font-size:14px; color:var(--ink-faint); margin:12px 0 0;}
.j-toast{font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--amber); margin:10px 0 0; min-height:0;}
.j-toast:empty{display:none;}

/* ---- received link, resume offer ---- */
.j-received,.j-resume{margin:0 0 18px; padding:12px 14px; border:1px solid rgba(255,176,32,.4); border-radius:3px; background:rgba(255,176,32,.06);}
.j-received-k,.j-resume-k{display:block; color:var(--brass); margin-bottom:4px;}
.j-received-m{font-size:18px; color:#fff3dc; margin:4px 0 8px; white-space:pre-wrap;}
.j-received .j-tag{margin:2px 0 8px;}
.j-received p,.j-resume p{margin:0 0 .5em; font-size:15px; color:var(--ink-dim);}
.j-received .controls,.j-resume .controls{margin-top:8px;}
.j-received:empty,.j-resume:empty{display:none;}

/* ---- footer ---- */
.j-foot{padding:20px 16px 28px; border-top:1px solid var(--line-soft); font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint);
  display:flex; gap:8px 18px; flex-wrap:wrap; align-items:center;}
.j-foot a{color:var(--amber-soft); display:inline-flex; align-items:center; min-height:44px;}
.j-erase{font:inherit; color:var(--ink-faint); background:none; border:0; border-bottom:1px dotted var(--ink-faint); min-height:44px; padding:8px 0; cursor:pointer; text-transform:inherit; letter-spacing:inherit;}
.j-erase:hover{color:var(--amber-soft);}
@media (min-width:900px){ .j-foot{padding:20px 32px 32px;} }

/* ---- the no-JS document ---- */
.j-static{padding:8px 0 24px;}
.j-static article{margin:0 0 28px; padding:0 0 18px; border-bottom:1px solid var(--line-soft);}
.j-static h2{font-size:24px; margin:0 0 .4em;}
.j-static .j-tag{margin-bottom:8px;}
.j-static ul{padding-left:18px;}
.j-static li{margin:.4em 0; font-size:15px; color:var(--ink-dim);}
.j-static [lang="es"]{color:var(--ink-dim);}

/* ---- motion ---- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation:none !important; transition:none !important;}
}