/* ==========================================================================
   Outpost Onward — homepage skin (ported from the "Three Skins" mockup).
   Cinematic dark: full-bleed hero with art bleeding off-edge + amber/pink/violet
   glow, a numbered literary theme list, a manifesto, wide filmic stills. Shared
   fonts; Onward palette. Story art isn't made yet → .on-ph placeholders mark
   where covers/stills drop in.
   ========================================================================== */
* { box-sizing:border-box; }
body { margin:0; background:var(--c-bg); color:var(--c-ink); overflow-x:hidden; }
.on-page { width:min(1180px,100%); margin-inline:auto; }
a { color:inherit; }
.mark { flex:none; display:block; }

/* image placeholder (until real story art exists) */
.on-ph { background:linear-gradient(135deg,#241b3a,#181231); display:grid; place-items:center; color:#5f5680; font-family:var(--font-ui); font-size:12.5px; letter-spacing:.08em; }

.on-nav { display:flex; align-items:center; justify-content:space-between; padding:26px 56px; }
.on-wm { display:flex; align-items:center; gap:10px; text-decoration:none; }
.on-wmt { font-family:var(--font-display); font-size:21px; font-weight:600; color:var(--c-ink); }
.on-wmt span { background:linear-gradient(90deg,var(--c-pink),var(--c-purple)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.on-nl { display:flex; gap:30px; font-family:var(--font-ui); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; }
.on-nl a { text-decoration:none; color:rgba(236,230,220,.8); }

.on-hero { position:relative; min-height:580px; display:flex; align-items:center; overflow:hidden; border-bottom:1px solid var(--c-line); }
.on-herowrap { position:absolute; right:0; top:0; bottom:0; width:48%; }
.on-herowrap .on-ph { width:100%; height:100%; }
.on-herobg { position:absolute; inset:0; background:radial-gradient(70% 80% at 90% 25%,rgba(255,93,162,.34),transparent 58%),radial-gradient(70% 80% at 70% 100%,rgba(139,108,255,.34),transparent 60%),radial-gradient(50% 60% at 18% 12%,rgba(242,180,58,.18),transparent 60%); }
.on-herofade { position:absolute; right:0; top:0; bottom:0; width:58%; background:linear-gradient(90deg,#14111E 0%,rgba(20,17,30,.5) 36%,transparent 78%); }
.on-herocopy { position:relative; padding:0 56px; max-width:640px; }
.on-eye { display:inline-block; font-family:var(--font-ui); font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#fff; background:linear-gradient(90deg,var(--c-pink),var(--c-purple)); padding:6px 14px; border-radius:999px; margin:0 0 24px; }
.on-h1 { font-family:var(--font-display); font-weight:500; font-size:66px; line-height:1.0; letter-spacing:-.02em; margin:0 0 22px; color:var(--c-ink-bright); }
.on-h1 em { font-style:italic; background:linear-gradient(90deg,var(--c-pink-2),var(--c-purple) 70%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.on-sub { font-family:var(--font-serif); font-size:20px; line-height:1.62; color:var(--c-ink-dim); margin:0 0 32px; max-width:44ch; }
.on-rule { width:64px; height:3px; background:linear-gradient(90deg,var(--c-pink),var(--c-purple)); border-radius:3px; margin:0 0 28px; }
.on-btns { display:flex; align-items:center; gap:24px; }
.on-btn { display:inline-flex; align-items:center; gap:9px; background:linear-gradient(90deg,var(--c-pink),var(--c-purple)); color:#fff; font-family:var(--font-ui); font-weight:700; font-size:17px; padding:16px 30px; border-radius:999px; text-decoration:none; box-shadow:0 10px 30px -8px rgba(181,123,255,.6); }
.on-how { font-family:var(--font-ui); font-size:15px; color:rgba(236,230,220,.78); text-decoration:none; border-bottom:1px solid rgba(236,230,220,.34); padding-bottom:2px; }

.on-reader { position:relative; min-height:460px; display:flex; align-items:flex-end; overflow:hidden; border-bottom:1px solid var(--c-line); }
.on-readerimg { position:absolute; inset:0; }
.on-readerimg .on-ph { width:100%; height:100%; }
.on-readerfade { position:absolute; inset:0; background:linear-gradient(0deg,#14111E 6%,rgba(20,17,30,.35) 48%,rgba(20,17,30,.6) 100%),radial-gradient(60% 80% at 14% 100%,rgba(255,93,162,.22),transparent 60%); }
.on-readercopy { position:relative; padding:56px; max-width:580px; }
.on-h2 { font-family:var(--font-display); font-weight:500; font-size:39px; line-height:1.08; letter-spacing:-.015em; margin:0 0 16px; color:var(--c-ink-bright); }
.on-p { font-family:var(--font-serif); font-size:17px; line-height:1.65; color:var(--c-ink-dim); margin:0; }
.on-scroll { display:flex; align-items:center; gap:8px; margin-top:22px; font-family:var(--font-ui); font-size:13px; color:var(--c-ink-dimmer); }
.on-d { width:7px; height:7px; border-radius:50%; background:var(--c-pink); }

.on-sec { padding:74px 56px; border-bottom:1px solid var(--c-line); }
.on-kick { font-family:var(--font-ui); font-size:12.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--c-ink-dimmer); margin:0 0 40px; }
.on-trow { display:grid; grid-template-columns:90px 1fr; gap:36px; padding:30px 0; border-top:1px solid var(--c-line); align-items:baseline; transition:padding-left .2s; }
.on-trow:hover { padding-left:10px; }
.on-trow:last-child { border-bottom:1px solid var(--c-line); }
.on-tno { font-family:var(--font-display); font-style:italic; font-size:34px; font-weight:500; background:linear-gradient(120deg,var(--c-pink),var(--c-purple)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.on-tt { font-family:var(--font-display); font-size:30px; font-weight:600; letter-spacing:-.01em; color:var(--c-ink-bright); margin:0 0 8px; }
.on-td { font-family:var(--font-serif); font-size:17px; line-height:1.6; color:var(--c-ink-dim); margin:0; max-width:62ch; }

.on-manifesto { padding:90px 56px; text-align:center; position:relative; overflow:hidden; background:linear-gradient(120deg,#2A1733 0%,#1B1430 50%,#241640 100%); }
.on-manifesto::before { content:""; position:absolute; inset:0; background:radial-gradient(60% 120% at 20% 20%,rgba(255,93,162,.28),transparent 60%),radial-gradient(60% 120% at 90% 90%,rgba(139,108,255,.3),transparent 60%); pointer-events:none; }
.on-mq { position:relative; font-family:var(--font-display); font-style:italic; font-weight:400; font-size:42px; line-height:1.3; letter-spacing:-.01em; margin:0 auto; max-width:22ch; color:var(--c-ink-bright); }
.on-mq b { font-style:normal; font-weight:600; background:linear-gradient(90deg,var(--c-pink-2),#C79BFF); -webkit-background-clip:text; background-clip:text; color:transparent; }

.on-stillhead { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:30px; }
.on-stills { display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.on-still .on-ph { width:100%; aspect-ratio:3/2; display:block; border:1px solid #322c46; }
.on-stt { font-family:var(--font-display); font-size:20px; font-weight:600; color:var(--c-ink-bright); margin-top:14px; }
.on-srow { display:flex; align-items:center; gap:10px; margin-top:6px; }
.on-age { font-family:var(--font-ui); font-size:13px; color:var(--c-ink-dimmer); }
.bfree { font-family:var(--font-ui); font-size:11px; font-weight:600; color:#fff; background:#4F9A77; padding:2px 9px; border-radius:999px; }
.on-prem { font-family:var(--font-ui); font-size:11px; font-weight:600; color:#fff; background:linear-gradient(90deg,var(--c-pink),var(--c-purple)); padding:2px 9px; border-radius:999px; }
.on-viewall { font-family:var(--font-ui); font-size:15px; color:var(--c-pink-2); text-decoration:none; }

.on-mail { padding:78px 56px; display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; border-bottom:1px solid var(--c-line); position:relative; overflow:hidden; }
.on-mailglow { position:absolute; inset:0; background:radial-gradient(50% 120% at 85% 50%,rgba(181,123,255,.2),transparent 60%); pointer-events:none; }
.on-mailh { position:relative; font-family:var(--font-display); font-size:35px; font-weight:500; letter-spacing:-.01em; margin:0 0 12px; color:var(--c-ink-bright); }
.on-mailp { position:relative; font-family:var(--font-serif); font-size:18px; line-height:1.55; color:var(--c-ink-dim); margin:0; max-width:42ch; }
.on-mf { position:relative; display:flex; gap:12px; }
.on-mi { flex:1; font-family:var(--font-serif); font-size:16px; padding:15px 18px; border-radius:999px; border:1px solid #3a3450; background:var(--c-surface); color:var(--c-ink); outline:none; }
.on-mb { background:linear-gradient(90deg,var(--c-pink),var(--c-purple)); color:#fff; font-family:var(--font-ui); font-weight:700; font-size:16px; padding:15px 28px; border-radius:999px; border:none; cursor:pointer; }

.on-foot { padding:48px 56px; background:#0E0B17; }
.on-fg { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:36px; }
.on-fwm { font-family:var(--font-display); font-size:21px; font-weight:600; color:var(--c-ink-bright); margin-bottom:12px; }
.on-fwm span { background:linear-gradient(90deg,var(--c-pink),var(--c-purple)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.on-fp { font-family:var(--font-serif); font-size:15px; line-height:1.6; color:rgba(236,230,220,.55); margin:0; max-width:40ch; }
.on-fc { display:flex; flex-direction:column; gap:10px; font-family:var(--font-ui); font-size:15px; }
.on-fc a { color:rgba(236,230,220,.72); text-decoration:none; }
.on-fr { border-top:1px solid var(--c-line); margin-top:34px; padding-top:18px; font-family:var(--font-ui); font-size:13px; color:rgba(236,230,220,.4); }
.on-fr b { color:rgba(236,230,220,.6); font-weight:600; }

/* responsive */
@media (max-width: 880px) {
  .on-nav, .on-sec, .on-mail, .on-foot { padding-left:28px; padding-right:28px; }
  .on-hero { min-height:0; padding:48px 0; }
  .on-herowrap { position:relative; width:100%; height:200px; }
  .on-herofade { display:none; }
  .on-herocopy { padding:32px 28px 0; max-width:none; }
  .on-h1 { font-size:clamp(38px,8vw,56px); }
  .on-readercopy { padding:40px 28px; }
  .on-stills { grid-template-columns:1fr; }
  .on-mail { grid-template-columns:1fr; padding:56px 28px; }
  .on-mq { font-size:30px; }
  .on-fg { grid-template-columns:1fr; gap:24px; }
}
@media (max-width: 560px) {
  .on-nl { display:none; }
  .on-sub { font-size:18px; }
  .on-btns { flex-direction:column; align-items:flex-start; gap:14px; }
  .on-h2 { font-size:30px; }
  .on-trow { grid-template-columns:60px 1fr; gap:18px; }
  .on-mf { flex-direction:column; }
}