/* ==========================================================================
   EPOCH · shared season-page styles (thawing / spring / summer / autumn /
   winter). Loaded after assets/site.css and before the page's inline
   <style>. Uses the same canonical palette variables as site.css.
   ========================================================================== */

/* ---- hero ---- */
.hero { padding:88px 0 56px; position:relative; overflow:hidden; }
.hero .ghost { font-family:var(--font-mono); font-weight:600; font-size:clamp(3.4rem,15vw,11rem); line-height:0.82; letter-spacing:-0.02em; color:transparent; -webkit-text-stroke:1.2px var(--line); position:absolute; top:60px; right:-8px; z-index:0; user-select:none; pointer-events:none; }
.hero-content { position:relative; z-index:2; max-width:760px; }
.hero h1 { font-size:clamp(3rem,9vw,6.5rem); margin:18px 0 22px; letter-spacing:-0.03em; }
.hero h1 .dot { color:var(--accent); }
.hero p.lede { font-size:clamp(1.1rem,2vw,1.4rem); color:var(--frost); max-width:600px; font-weight:300; }

/* ---- five-week arc ---- */
.arc { display:flex; margin:36px 0 0; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:rgba(var(--bg-rgb),0.55); }
.arc-node { flex:1 1 0; min-width:90px; padding:16px 12px; text-decoration:none; text-align:center; border-right:1px solid var(--line); transition:background 0.25s, color 0.25s; }
.arc-node:last-child { border-right:none; }
.arc-wk { display:block; font-family:var(--font-mono); font-size:0.6rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--frost); }
.arc-nm { display:block; font-family:var(--font-display); font-size:1.02rem; font-weight:600; color:var(--bright); margin-top:5px; }
.arc-node:hover { background:rgba(255,255,255,0.03); }
.arc-node.active { background:rgba(var(--accent-rgb),0.16); }
.arc-node.active .arc-nm, .arc-node.active .arc-wk { color:var(--accent); }
@media (max-width:680px){ .arc { overflow-x:auto; } }

/* ---- moves ---- */
.moves { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; }
.move { border:1px solid var(--line); border-radius:14px; padding:26px; background:rgba(var(--bg-rgb),0.6); transition:border-color 0.25s, transform 0.25s; }
.move:hover { border-color:var(--accent); transform:translateY(-3px); }
.move .m-step { font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--accent); }
.move h3 { font-size:1.25rem; margin:11px 0 9px; }
.move p { color:var(--frost); font-size:0.97rem; line-height:1.62; }
.move .tbd { display:inline-block; margin-top:12px; font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--accent2); border:1px solid var(--accent2); border-radius:5px; padding:3px 8px; }

/* ---- status ---- */
.status { border-left:3px solid var(--accent); padding:4px 0 4px 18px; margin-top:2px; max-width:680px; }
.status .lbl { font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--accent); display:block; margin-bottom:8px; }
.status p { color:var(--bright); font-size:1.02rem; }

/* ---- pager ---- */
.pager { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.pager a { text-decoration:none; font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--frost); border:1px solid var(--line); border-radius:9px; padding:14px 18px; transition:border-color 0.25s, color 0.25s; }
.pager a:hover { border-color:var(--accent); color:var(--accent); }
.pager .nxt { color:var(--bright); }

/* ---- lock / claim interface ---- */
.locker { border:1px solid var(--line); border-radius:16px; padding:32px 30px 26px; background:rgba(var(--bg-rgb),0.6); max-width:620px; position:relative; }
.live-badge { position:absolute; top:-11px; left:24px; font-family:var(--font-mono); font-size:0.6rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--bg); background:var(--accent); padding:4px 10px; border-radius:5px; font-weight:600; }
.lk-contract { display:flex; align-items:center; gap:10px; margin-bottom:20px; flex-wrap:wrap; }
.lk-contract-lbl { font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--frost); }
.lk-phase { font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; font-weight:600; color:var(--accent); border:1px solid var(--accent); border-radius:6px; padding:3px 10px; }
.lk-phase.locked { color:var(--accent2); border-color:var(--accent2); }
.lk-phase.waiting { color:var(--frost); border-color:var(--line); }
.lk-phase.err { color:var(--frost); border-color:var(--line); }
/* plain-language reading of the status chip above it. The negative top margin
   pulls it up under .lk-contract's 20px gap so the two read as one block. */
.lk-phase-note { margin:-12px 0 20px; font-size:0.88rem; color:var(--frost); line-height:1.55; }
.lock-row { display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; }
.lk-field { flex:1 1 200px; min-width:0; }
.lk-field label { display:block; font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--frost); margin-bottom:9px; }
.lk-label-row { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:9px; }
.lk-label-row label { margin-bottom:0; }
.lk-bal { font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.08em; color:var(--frost); white-space:nowrap; }
.lk-bal.has { color:var(--bright); }
.lk-max { align-self:center; flex:none; font-family:var(--font-mono); font-size:0.58rem; letter-spacing:0.12em; text-transform:uppercase; font-weight:600; color:var(--accent); background:rgba(var(--accent-rgb),0.1); border:1px solid rgba(var(--accent-rgb),0.35); border-radius:6px; padding:5px 9px; cursor:pointer; transition:background 0.2s, color 0.2s; }
.lk-max:hover:not(:disabled){ background:var(--accent); color:var(--bg); }
.lk-max:disabled { opacity:0.35; cursor:not-allowed; }
.lk-input, .lk-output { display:flex; align-items:baseline; gap:8px; border:1px solid var(--line); border-radius:10px; padding:13px 15px; background:var(--bg); }
.lk-input input { flex:1 1 auto; min-width:0; background:none; border:none; outline:none; color:var(--snow); font-family:var(--font-display); font-size:1.5rem; font-weight:600; }
.lk-input input::placeholder { color:var(--line); }
.lk-input:focus-within { border-color:var(--accent); }
.lk-output span:first-child { flex:1 1 auto; font-family:var(--font-display); font-size:1.5rem; font-weight:600; color:var(--snow); }
.lk-output.hot { background:rgba(var(--accent-rgb),0.07); border-color:rgba(var(--accent-rgb),0.3); }
.lk-output.hot span:first-child { color:var(--accent); }
.lk-unit { font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.08em; color:var(--frost); flex:none; }
.lk-arrow { font-size:1.3rem; color:var(--frost); padding-bottom:12px; flex:none; }
.lk-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:22px; }
.btn-primary, .btn-ghost { font-family:var(--font-mono); font-size:0.76rem; letter-spacing:0.1em; text-transform:uppercase; font-weight:600; border-radius:9px; padding:13px 22px; cursor:pointer; transition:transform 0.2s, background 0.2s, border-color 0.2s, color 0.2s; }
.btn-primary { background:var(--accent); color:var(--bg); border:1px solid var(--accent); }
.btn-primary:hover:not(:disabled){ transform:translateY(-2px); }
.btn-primary:disabled { opacity:0.5; cursor:not-allowed; }
.btn-ghost { background:none; color:var(--bright); border:1px solid var(--line); }
.btn-ghost:hover:not(:disabled){ border-color:var(--accent); color:var(--accent); }
.btn-ghost:disabled { opacity:0.4; cursor:not-allowed; }
.lk-status { margin-top:18px; font-family:var(--font-mono); font-size:0.78rem; color:var(--frost); line-height:1.6; }
.lk-status.locked { color:var(--accent); }
.lk-note { margin-top:8px; font-family:var(--font-mono); font-size:0.66rem; color:var(--frost); opacity:0.7; line-height:1.55; }
.lk-note a.lk-scan { color:var(--accent); text-decoration:none; border-bottom:1px solid rgba(var(--accent-rgb),0.45); }
.lk-note a.lk-scan:hover { border-bottom-color:var(--accent); }
.why-link { display:inline-block; text-decoration:none; font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent); border:1px solid var(--accent); border-radius:9px; padding:13px 20px; transition:background 0.2s, color 0.2s; }
.why-link:hover { background:var(--accent); color:var(--bg); }

/* ---- mobile comfort ---- */
@media (max-width:640px){
  .hero { padding:60px 0 40px; }
  .hero .ghost { top:12px; opacity:0.6; }
  .hero h1 { margin:14px 0 16px; }
  .arc { margin-top:28px; }
  .locker { padding:26px 20px 22px; }

  /* The lock row is two 200px-basis fields with an arrow between them, which
     cannot fit side by side here. Left to flex-wrap it broke badly: the arrow
     stayed glued to the second field and pointed sideways at a stacked layout.
     Stack it deliberately instead and turn the arrow to point down the flow. */
  .lock-row { flex-direction:column; align-items:stretch; gap:14px; }
  .lk-arrow { align-self:center; padding:0; line-height:1; transform:rotate(90deg); }
  /* Full-width buttons: "Connected 0x1234…5678" is long enough to wrap the row
     into a ragged two-line block at these widths. */
  .lk-actions { flex-direction:column; gap:10px; }
  .lk-actions .btn-primary, .lk-actions .btn-ghost { width:100%; }
}