/* ===========================================================
   VENTURE : CLASSIC SAGA — tutorial / "how to play" pages
   Restyle layer on top of venture.css (dark gothic, gold-on-black)
   =========================================================== */

/* Reading pages need brighter body text than the landing.*/
:root{
  --cream-dim:#cec3aa;
  --cream-faint:#b1a58f;
}

body{min-height:100vh}

/* ---------- top nav ---------- */
.gal-header{position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;padding:1rem var(--gut);
  background:rgba(8,6,4,.82);backdrop-filter:blur(12px) saturate(1.2);
  border-bottom:1px solid var(--gold-line-soft)}
.gal-header .brand__mark{width:150px}
.gal-back{font-family:var(--display);font-size:.76rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--cream);display:inline-flex;align-items:center;gap:.6em;
  transition:color .25s}
.gal-back:hover{color:var(--gold-bright)}
.gal-back .arr{transition:transform .25s}
.gal-back:hover .arr{transform:translateX(-4px)}

/* ---------- document column ---------- */
.doc{max-width:1300px;margin:0 auto;padding:calc(74px + 4vh) var(--gut) 6rem}

.doc__banner{margin:0 0 3.4rem;border-radius:14px;overflow:hidden;position:relative;
  min-height:160px;
  background:
    repeating-linear-gradient(135deg,rgba(200,164,92,.05) 0 12px,transparent 12px 24px),
    linear-gradient(180deg,rgba(21,17,12,.9),rgba(12,10,7,.9));
  border:1px solid var(--gold-line);box-shadow:var(--shadow-deep)}
.doc__banner img{width:100%;display:block;min-height:160px;
  font-family:var(--display);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--cream-faint);line-height:160px;text-align:center}
.doc__banner::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 100px 16px rgba(8,6,4,.45),inset 0 0 0 1px rgba(200,164,92,.16)}

.doc__card{
  background:linear-gradient(180deg,rgba(21,17,12,.72),rgba(14,11,7,.72));
  border:1px solid var(--gold-line);border-radius:14px;
  padding:clamp(28px,4.5vw,56px);margin-bottom:2.4rem;box-shadow:var(--shadow-deep);
}

/* ---------- tutorial typography ---------- */
.doc__card h1{
  font-family:var(--display);font-weight:700;color:var(--gold-bright);
  font-size:clamp(1.9rem,4vw,2.9rem);line-height:1.08;letter-spacing:.01em;
  margin:0 0 1.4rem;text-wrap:balance;
}
.doc__card h2{
  font-family:var(--display);font-weight:700;color:var(--cream);
  font-size:clamp(1.25rem,2.4vw,1.7rem);letter-spacing:.04em;
  margin:3rem 0 1.1rem;padding-left:1rem;position:relative;text-wrap:balance;
}
.doc__card h2::before{content:"";position:absolute;left:0;top:.12em;bottom:.12em;
  width:3px;border-radius:2px;background:linear-gradient(180deg,var(--gold-bright),var(--gold-deep))}
.doc__card h1+p{font-size:1.18rem;color:var(--cream)}
.doc__card p{color:var(--cream-dim);font-size:1.06rem;line-height:1.8;
  margin:0 0 1.25rem;text-wrap:pretty}
.doc__card p i{color:var(--cream-faint);font-style:italic}
.doc__card b,.doc__card strong{color:var(--cream);font-weight:600}
.doc__card a{color:var(--gold-bright);text-decoration:underline;
  text-decoration-color:var(--gold-line);text-underline-offset:3px;
  transition:.25s;font-weight:500}
.doc__card a:hover{color:#fff6e2;text-decoration-color:var(--gold)}

.doc__card ul{margin:0 0 1.4rem;padding:0;list-style:none;display:flex;
  flex-direction:column;gap:.85rem}
.doc__card ul li{position:relative;padding-left:1.7rem;color:var(--cream-dim);
  font-size:1.06rem;line-height:1.7;text-wrap:pretty}
.doc__card ul li::before{content:"";position:absolute;left:.15rem;top:.62em;
  width:7px;height:7px;transform:rotate(45deg);
  background:var(--gold);box-shadow:0 0 0 3px rgba(200,164,92,.12)}

.doc__card code{
  font-family:"SFMono-Regular",ui-monospace,Menlo,Consolas,monospace;
  font-size:.86em;color:var(--gold-bright);
  background:rgba(8,6,4,.6);border:1px solid var(--gold-line);
  padding:.18em .5em;border-radius:3px;word-break:break-word;
}

/* paragraph screenshots */
.paragraph-img{
  display:block;width:100%;height:auto;min-height:90px;margin:1.4rem 0 1.8rem;border-radius:10px;
  border:1px solid var(--gold-line);box-shadow:0 24px 60px -32px rgba(0,0,0,.9);
  background:
    repeating-linear-gradient(135deg,rgba(200,164,92,.05) 0 12px,transparent 12px 24px),
    rgba(10,8,5,.6);
  font-family:var(--display);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cream-faint);line-height:90px;text-align:center;
}

/* ---------- footer ---------- */
.tfooter{border-top:1px solid var(--gold-line-soft);background:rgba(8,6,4,.5);
  padding:3rem var(--gut) 2.2rem;margin-top:2rem}
.tfooter nav{max-width:880px;margin:0 auto;display:flex;align-items:center;
  justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.tfooter .flex{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap}
.tfooter a{font-family:var(--display);font-size:.74rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--cream-dim);transition:.25s}
.tfooter a:hover{color:var(--gold-bright)}
.tfooter .btn-wrapper{gap:.6rem}
.tfooter .btn-square{display:inline-flex;align-items:center;gap:.5em;
  padding:.55em .85em;border:1px solid var(--gold-line);border-radius:2px;
  color:var(--cream);background:rgba(20,16,10,.4);transition:.3s}
.tfooter .btn-square svg{width:18px;height:18px;color:var(--gold)}
.tfooter .btn-square span{font-size:.7rem;letter-spacing:.14em}
.tfooter .btn-square:hover{border-color:var(--gold);color:var(--gold-bright);transform:translateY(-2px)}
.tfooter .btn-square:hover svg{color:var(--gold-bright)}
.tfooter .bar{max-width:880px;margin:2rem auto;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-line),transparent)}
.tfooter .requirements{gap:1.6rem}
.tfooter p{font-family:var(--display);font-size:.68rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--cream-faint);margin:0}

/* ---------- back to top ---------- */
.back-to-top{
  position:fixed;right:1.4rem;bottom:1.4rem;z-index:70;
  width:46px;height:46px;border-radius:50%;border:1px solid var(--gold);
  background:rgba(20,16,10,.7);backdrop-filter:blur(6px);color:var(--gold);
  display:grid;place-items:center;cursor:pointer;opacity:0;transform:translateY(10px);
  transition:.3s;pointer-events:none;
}
.back-to-top::before{content:"";width:11px;height:11px;border-top:2px solid currentColor;
  border-right:2px solid currentColor;transform:rotate(-45deg);margin-top:4px}
.back-to-top.show{opacity:1;transform:none;pointer-events:auto}
.back-to-top:hover{color:var(--gold-bright);border-color:var(--gold-bright);
  background:rgba(40,30,16,.7)}

@media(max-width:620px){
  .tnav{flex-direction:column;align-items:stretch;gap:.8rem;padding:.8rem var(--gut)}
  .tnav__links{justify-content:center}
  .sbtn span{display:none}
  .sbtn{padding:.6em .8em}
  .tfooter nav{flex-direction:column;align-items:flex-start}
}

/* ---------- legal pages ---------- */
.doc__meta{font-family:var(--display);font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--cream-faint);margin:0 0 2rem}
.doc__lead{font-size:1.18rem;color:var(--cream);font-style:italic;line-height:1.7;
  margin:0 0 1.6rem;text-wrap:pretty}
.doc__card h2:first-child,.doc__card h1:first-child{margin-top:0}
.doc__card h3{font-family:var(--display);font-weight:600;color:var(--gold-bright);
  font-size:1.05rem;letter-spacing:.06em;margin:1.8rem 0 .7rem}

/* ---------- 404 ---------- */
body.nf-body{display:flex;flex-direction:column;min-height:100vh}
.nf{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:calc(80px + 6vh) var(--gut) 8vh;position:relative;isolation:isolate}
.nf__art{position:absolute;inset:0;z-index:-1;background-size:cover;background-position:center;
  opacity:.16;filter:saturate(.7) brightness(.7);
  -webkit-mask:radial-gradient(70% 60% at 50% 45%,#000,transparent 78%);
          mask:radial-gradient(70% 60% at 50% 45%,#000,transparent 78%)}
.nf__code{font-family:var(--display);font-weight:800;line-height:.9;
  font-size:clamp(6rem,22vw,15rem);letter-spacing:.02em;
  background:linear-gradient(180deg,var(--gold-bright),var(--gold) 50%,var(--gold-deep));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 12px 30px rgba(0,0,0,.6));margin:0}
.nf__overline{margin-top:1.4rem}
.nf__title{font-family:var(--display);font-weight:700;color:var(--cream);
  font-size:clamp(1.5rem,4vw,2.4rem);letter-spacing:.01em;margin:.4rem 0 1.2rem;text-wrap:balance}
.nf__text{color:var(--cream-dim);font-size:1.12rem;line-height:1.7;max-width:46ch;
  margin:0 auto 2.4rem;text-wrap:pretty}
.nf__cta{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}