/* Lone Shift Softworks — studio stylesheet
   THE WALK: one path down the grounds. No header, no nav tabs anywhere —
   the yard itself is the menu, and the path does the wayfinding.
   Black + silver. Candle-and-moonlight, no pictures but the mark itself.
   Mobile-first: everything is sized for a phone before it is sized for a desk. */

:root{
  --black:#050506;
  --coal:#0b0b0d;
  --panel:#121215;
  --panel-2:#17171b;
  --line:#26262c;
  --line-soft:#1b1b20;
  --silver:#c9c9cf;
  --silver-bright:#ececf0;
  --dim:#8f8f98;
  --faint:#5d5d66;
  --candle:#d8b25c;        /* one warm note, used the way a candle is used: sparingly */
  --candle-dim:#8a6f35;
  --serif:Georgia,'Iowan Old Style','Times New Roman',serif;
  --maxw:1060px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{margin:0;padding:0;scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto;}}
body{
  margin:0;padding:0;
  background:
    radial-gradient(1100px 480px at 50% -140px, rgba(216,178,92,.07), rgba(216,178,92,0) 62%),
    radial-gradient(900px 500px at 85% -80px, rgba(201,201,207,.05), rgba(201,201,207,0) 60%),
    var(--black);
  color:var(--silver);
  font-family:var(--serif);
  font-size:17px;
  line-height:1.62;
  overflow-x:hidden;
}
::selection{background:#2c2c33;color:var(--silver-bright);}
a{color:var(--silver-bright);}
img{max-width:100%;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 16px;}
main{display:block;}
.page-pad{padding:10px 0 54px;}

/* ---------- headings: silver leaf, sheen tied to scroll (site.js) ---------- */
h2.sec,.prose h1,.game-top h1,.empty-grave h1{
  background:linear-gradient(100deg,#f4f4f7 0%,#a7a7b0 26%,#ededf1 48%,#8d8d96 70%,#f4f4f7 100%);
  background-size:230% 100%;
  background-position:var(--sheen,12%) 0;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
h2.sec{
  margin:0;font-weight:normal;font-size:25px;letter-spacing:4px;text-transform:uppercase;
}
.kicker{font-size:12.5px;letter-spacing:3.5px;text-transform:uppercase;color:var(--candle);margin:0 0 8px;}
.sec-sub{color:var(--dim);font-style:italic;font-size:15px;margin:4px 0 0;}

/* ================= THE WALK (homepage) =================
   One path down the grounds. A centre line runs the whole page;
   every stop hangs off it, marked by a candle-ring waypoint. */
.walk{position:relative;max-width:var(--maxw);margin:0 auto;padding:0 16px;}
.walk::before{ /* the path itself */
  content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;transform:translateX(-1px);
  background:linear-gradient(180deg,
    transparent 0, var(--line) 120px, var(--line) calc(100% - 160px), transparent 100%);
  opacity:.8;z-index:0;
}
.walk > *{position:relative;z-index:1;}

/* gate posts at the top of the path */
.gateposts{max-width:640px;margin:0 auto;line-height:0;padding-top:26px;}
.gateposts svg{width:100%;height:auto;display:block;}

.gate{
  text-align:center;padding:6px 0 4px;
  /* a pool of plate-black darkness behind the lockup, so the logo's melted
     edges land on the plate's own tone before they meet the candle glow */
  background:radial-gradient(680px 430px at 50% 190px, rgba(0,0,0,.62), rgba(0,0,0,0) 70%) no-repeat;
}
.gate .mark-hero{
  width:min(530px,108vw);height:auto;display:block;
  position:relative;left:50%;transform:translateX(-50%);
  background:radial-gradient(closest-side, var(--black) 78%, transparent);
}
.moon-row{display:flex;justify-content:center;margin:18px 0 2px;}

/* tonight's real moon, drawn by site.js */
.moon-chip{
  display:inline-flex;align-items:center;gap:9px;
  border:1px solid var(--line);border-radius:99px;
  padding:6px 14px 6px 8px;background:rgba(11,11,13,.72);
}
.moon-chip canvas{display:block;width:26px;height:26px;}
.moon-chip .moon-label{font-size:11.5px;letter-spacing:1.8px;text-transform:uppercase;color:var(--dim);white-space:nowrap;}

.studio-line{margin:20px auto 0;max-width:620px;font-size:18.5px;line-height:1.65;color:var(--silver);text-align:center;}
.studio-line em{color:var(--silver-bright);}
@media (max-width:640px){.studio-line{font-size:17.5px;}}

/* the three plain facts, carried over from the old gate */
.facts{display:flex;gap:0;flex-wrap:wrap;justify-content:center;margin:30px auto 0;max-width:760px;
  border:1px solid var(--line);border-radius:12px;background:rgba(18,18,21,.6);}
.facts div{flex:1 1 180px;text-align:center;padding:15px 12px;}
.facts div + div{border-left:1px solid var(--line-soft);}
.facts b{display:block;font-weight:normal;color:var(--silver-bright);letter-spacing:1.6px;
  text-transform:uppercase;font-size:13px;margin-bottom:3px;}
.facts span{color:var(--dim);font-size:13.5px;font-style:italic;}
@media (max-width:640px){.facts div + div{border-left:none;border-top:1px solid var(--line-soft);}}

/* the chalk slate: Now Digging */
.slate{
  margin:28px auto 0;max-width:520px;text-align:center;
  background:linear-gradient(180deg,#1d1d21,#141417);
  border:1px solid #33333b;border-radius:6px;
  box-shadow:inset 0 0 0 4px #101013, inset 0 0 26px rgba(0,0,0,.65), 0 10px 26px rgba(0,0,0,.5);
  padding:16px 18px 14px;
}
.slate .slate-head{font-size:11.5px;letter-spacing:4px;text-transform:uppercase;color:#9d9da6;margin:0 0 5px;}
.slate .slate-body{margin:0;font-size:21px;letter-spacing:1.2px;color:#e9e7df;
  text-shadow:0 0 1px rgba(233,231,223,.65),0 0 7px rgba(233,231,223,.14);}
.slate .slate-sub{margin:5px 0 0;font-size:13.5px;font-style:italic;color:#8a8a83;}

/* the stops */
.stop{margin:64px 0 0;}
.stop-head{text-align:center;margin-bottom:24px;}
.stop-head .waypoint{
  width:13px;height:13px;margin:0 auto 12px;border-radius:50%;
  background:var(--black);border:2px solid var(--candle-dim);
  box-shadow:0 0 0 5px var(--black);
}
.stop-head .sec-sub{max-width:460px;margin-left:auto;margin-right:auto;}

/* rows of plots: stone-shaped cards standing in earth */
.stones-row{
  display:grid;gap:20px;max-width:760px;margin:0 auto;
  grid-template-columns:1fr 1fr;
}
.stones-row.three{max-width:1060px;grid-template-columns:repeat(3,1fr);}
@media (max-width:760px){.stones-row,.stones-row.three{grid-template-columns:1fr;max-width:430px;}}
.earth{height:9px;border-radius:4px;max-width:760px;margin:14px auto 0;
  background:linear-gradient(180deg,#17130d,#0a0806);box-shadow:0 -1px 0 #262019;}
.earth.wide{max-width:1060px;}
@media (max-width:760px){.earth,.earth.wide{max-width:430px;}}

.stone{
  background:linear-gradient(180deg,#1a1a1f,#101013 68%);
  border:1px solid var(--line);
  border-radius:118px 118px 12px 12px;
  padding:30px 24px 22px;
  text-align:center;
  display:flex;flex-direction:column;gap:9px;align-items:center;
  position:relative;overflow:hidden;
}
.stone::before{ /* candlelight catching the top edge */
  content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(216,178,92,.45),transparent);
}
.stone .art{margin:0 auto 2px;color:var(--dim);}
.stone h3{
  margin:0;font-weight:normal;letter-spacing:3px;font-size:22px;color:#d7d7dd;
  text-shadow:0 -1px 1px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.07);
}
.stone .kind{color:#76767f;font-size:12.5px;letter-spacing:2.4px;text-transform:uppercase;}
.stone .epitaph{font-style:italic;font-size:16.5px;line-height:1.55;color:var(--silver);max-width:300px;margin:2px auto 4px;flex:1;}
/* Witchhold's stone is unfinished: roughed-in, still on the bench */
.stone.unfinished{
  border-style:dashed;border-color:#3d3d45;transform:rotate(-.5deg);
  background:
    repeating-linear-gradient(47deg, rgba(201,201,207,.028) 0 2px, transparent 2px 7px),
    linear-gradient(180deg,#17171b,#0f0f12);
}
.stone.unfinished h3{color:#a9a9b1;letter-spacing:4.5px;}
.stone.unfinished .epitaph{color:var(--dim);}
.stone.vault-stone{background:linear-gradient(180deg,#141417,#0c0c0f);}
.stone.vault-stone h3{color:var(--silver);}
.stone.vault-stone .epitaph{color:var(--dim);}

.status{
  display:inline-block;align-self:center;
  font-size:11.5px;letter-spacing:2.2px;text-transform:uppercase;
  padding:4px 10px;border-radius:99px;border:1px solid var(--line);color:var(--dim);
}
.status.playable{color:#0c0c0e;background:var(--silver);border-color:var(--silver);font-weight:bold;}
.status.dev{color:var(--candle);border-color:var(--candle-dim);}
.status.vault{color:var(--dim);border-style:dashed;}

.btn{
  display:inline-block;text-decoration:none;cursor:pointer;
  font-family:var(--serif);font-size:15px;letter-spacing:1.6px;text-transform:uppercase;
  color:#0c0c0e;background:var(--silver-bright);
  border:1px solid var(--silver-bright);border-radius:8px;
  padding:12px 22px;min-height:48px;line-height:1.2;
}
.btn:hover{background:#fff;}
.btn.ghost{background:transparent;color:var(--silver);border-color:var(--line);}
.btn.ghost:hover{color:var(--silver-bright);border-color:var(--dim);background:var(--panel-2);}

/* the ledger: the shift log on a dark plaque, so the path never crosses text */
.ledger-box{max-width:700px;margin:0 auto;background:rgba(5,5,6,.82);padding:10px 16px 8px 8px;border-radius:8px;}
.log-entry{border-left:1px solid var(--line);padding:2px 0 20px 20px;position:relative;}
.log-entry:last-child{padding-bottom:4px;}
.log-entry::before{
  content:"";position:absolute;left:-4.5px;top:8px;width:8px;height:8px;border-radius:50%;
  background:var(--coal);border:1px solid var(--candle-dim);
}
.log-when{font-size:12.5px;letter-spacing:2.4px;text-transform:uppercase;color:var(--candle);margin:0 0 4px;}
.log-entry p{margin:0;color:var(--silver);max-width:620px;}
.log-entry p em{color:var(--silver-bright);}

/* the keeper's card — where the About page now lives */
.keeper-wrap{display:flex;justify-content:center;}
.keeper-card{
  width:100%;max-width:520px;
  border:1px solid var(--line);border-radius:10px;
  /* the plate-black pool behind the lockup (first layer) lets the logo's
     melted edges land on the plate's own tone inside the lighter panel */
  background:
    radial-gradient(320px 180px at 112px 74px, rgba(0,0,0,.6), rgba(0,0,0,0) 70%) no-repeat,
    linear-gradient(180deg,#101013,#0a0a0c);
  padding:26px 28px 22px;position:relative;overflow:hidden;
}
.keeper-card::before{
  content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(216,178,92,.45),transparent);
}
.keeper-card img{height:82px;width:auto;display:block;margin-bottom:14px;}
.keeper-card .kc-line{font-size:20px;letter-spacing:1.4px;color:var(--silver-bright);margin:0 0 6px;line-height:1.5;}
.keeper-card .kc-sub{color:var(--dim);font-style:italic;margin:0 0 16px;font-size:15px;}
.contact-list{list-style:none;padding:0;margin:0;}
.contact-list li{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;padding:11px 0;border-bottom:1px solid var(--line-soft);}
.contact-list li:last-child{border-bottom:none;}
.contact-list .what{flex:0 0 96px;color:var(--faint);font-size:12px;letter-spacing:2.2px;text-transform:uppercase;}
.contact-list a{font-size:16.5px;text-decoration:none;border-bottom:1px dotted var(--faint);padding:2px 0;}
.contact-list a:hover{border-bottom-color:var(--silver-bright);}

/* the About prose, kept at the path's end under the card */
.keeper-prose{max-width:620px;margin:30px auto 0;background:rgba(5,5,6,.82);padding:4px 16px;border-radius:8px;}
.keeper-prose p{margin:0 0 15px;color:var(--silver);}
.keeper-prose p:last-child{margin-bottom:4px;}
.keeper-prose p em{color:var(--silver-bright);}

/* the path's end: privacy plaque + the closing line */
.end-stop{margin:70px 0 0;}
.plaque{
  max-width:560px;margin:0 auto;text-align:center;
  border:1px solid var(--line);border-radius:8px;background:var(--coal);
  padding:16px 20px 14px;color:var(--dim);font-size:14.5px;line-height:1.6;
}
.plaque p{margin:0;}
.plaque .plaque-head{font-size:11.5px;letter-spacing:3.4px;text-transform:uppercase;color:var(--faint);margin:0 0 6px;}
.plaque a{color:var(--silver);text-decoration:none;border-bottom:1px dotted var(--faint);}
.end-line{
  text-align:center;color:var(--faint);font-size:13.5px;
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:center;
  padding:26px 16px 34px;
}
.end-line .glyph{width:15px;height:15px;flex:0 0 auto;opacity:.85;}
.end-line .sep{opacity:.5;}

/* movement on the path: cues, not menus */
.down-cue,.up-cue{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  color:var(--faint);text-decoration:none;
  font-size:11.5px;letter-spacing:3px;text-transform:uppercase;
  padding:14px 10px;min-height:48px;justify-content:center;
}
.down-cue svg,.up-cue svg{display:block;}
.down-cue:hover,.up-cue:hover{color:var(--dim);}

/* ================= SUBPAGES: a stone at the top of the path =================
   No tab bar. A small header stone carries the mark and walks you home. */
.top-stone{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  max-width:430px;margin:20px auto 0;padding:16px 22px 13px;
  text-decoration:none;text-align:center;
  background:linear-gradient(180deg,#17171b,#0f0f12);
  border:1px solid var(--line);border-radius:96px 96px 10px 10px;
  position:relative;overflow:hidden;
}
.top-stone::before{
  content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(216,178,92,.45),transparent);
}
.top-stone img{height:58px;width:auto;display:block;}
.top-stone .ts-name{font-size:15px;letter-spacing:3px;text-transform:uppercase;color:#d7d7dd;
  text-shadow:0 -1px 1px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.07);}
.top-stone .ts-back{font-size:11px;letter-spacing:2.6px;text-transform:uppercase;color:var(--faint);}
.top-stone:hover .ts-back{color:var(--dim);}

.backline{margin:18px 0 14px;}
.backline a{
  color:var(--dim);text-decoration:none;font-size:13.5px;
  letter-spacing:1.8px;text-transform:uppercase;
}
.backline a:hover{color:var(--silver-bright);}

/* subpage footer: the walk back up, then the closing line */
.page-foot{border-top:1px solid var(--line-soft);margin-top:26px;background:rgba(11,11,13,.45);}
.page-foot .up-cue{padding-top:20px;}
.page-foot .end-line{padding-top:2px;}

/* ---------- prose pages ---------- */
.prose{max-width:700px;}
.prose h1{
  font-weight:normal;font-size:32px;letter-spacing:2.5px;
  margin:6px 0 4px;text-transform:uppercase;
}
.prose .lede{color:var(--dim);font-style:italic;font-size:17px;margin:0 0 26px;}
.prose h2{
  font-weight:normal;font-size:20px;letter-spacing:2.2px;text-transform:uppercase;
  color:var(--silver-bright);margin:34px 0 8px;
}
.prose p{margin:0 0 15px;}
.prose ul{margin:0 0 15px;padding-left:22px;}
.prose li{margin-bottom:7px;}
.prose .fineprint{color:var(--dim);font-size:14.5px;}
.prose strong{color:var(--silver-bright);font-weight:normal;}

/* ---------- game pages ---------- */
.game-top{padding:22px 0 0;}
.game-top h1{font-weight:normal;font-size:29px;letter-spacing:2px;margin:0 0 6px;text-transform:uppercase;}
.game-top .lede{color:var(--silver);margin:0 0 8px;max-width:640px;}
.game-top .fineprint{color:var(--dim);font-size:14.5px;margin:0 0 18px;max-width:640px;}
.game-top .fineprint strong{color:var(--candle);font-weight:normal;letter-spacing:.4px;}
.game-frame{
  border:1px solid var(--line);border-radius:14px;overflow:hidden;
  background:#000;box-shadow:0 18px 50px rgba(0,0,0,.55);
}
.game-frame iframe{display:block;width:100%;height:min(86vh,940px);border:0;background:#000;}
@media (max-width:640px){.game-frame iframe{height:82vh;}}
.game-under{padding:16px 0 10px;color:var(--dim);font-size:14.5px;max-width:640px;}
.game-under p{margin:0 0 10px;}

/* Gravekeeper: lantern glow at the edges of the yard */
.game-frame.lantern{
  box-shadow:0 0 0 1px rgba(216,178,92,.10), 0 0 44px rgba(216,178,92,.07),
             0 18px 50px rgba(0,0,0,.55);
  position:relative;
}
/* Miner: the shaft clock, ticking over a simulated seam */
.shaft-clock{
  font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  font-size:13px;letter-spacing:1.2px;color:var(--dim);
  border:1px solid var(--line);border-radius:8px;background:#0a0c10;
  padding:10px 14px;max-width:640px;margin:0 0 18px;
}
.shaft-clock b{color:#ffb74d;font-weight:normal;}
.shaft-clock .sc-label{color:var(--faint);letter-spacing:2px;}

/* --- the empty grave (404) --- */
.empty-grave{text-align:center;padding:52px 0 30px;}
.empty-grave svg{margin:0 auto 10px;display:block;}
.empty-grave h1{
  font-weight:normal;font-size:34px;letter-spacing:3px;
  margin:8px 0 10px;text-transform:uppercase;
}
.empty-grave p{color:var(--dim);font-style:italic;margin:0 auto 26px;max-width:440px;}