/* ============================================================
   d20.lv — dark obsidian + brass
   Plain CSS, no build step. Mobile-first.
   ============================================================ */

:root{
  --ink:      #0e0d0f;
  --ink-2:    #141317;
  --ink-3:    #1b191f;
  --ink-4:    #232028;
  --line:     rgba(232,226,212,.11);
  --line-2:   rgba(232,226,212,.20);
  --gold:     #c9a227;
  --gold-2:   #e6cd7a;
  --blood:    #8f2226;
  --parch:    #e8e2d4;
  --dim:      #a9a294;
  --dim-2:    #7d776c;

  --serif: "Cinzel", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --quote: "EB Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --wrap: 1180px;
  --pad: clamp(1.1rem, 5vw, 2.5rem);
  --r: 4px;
}

*,*::before,*::after{ box-sizing:border-box }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } }

body{
  margin:0;
  background:var(--ink);
  color:var(--parch);
  font:400 clamp(1rem,.97rem + .18vw,1.075rem)/1.7 var(--sans);
  overflow-x:hidden;
  /* faint vertical warmth so the black is never flat */
  background-image:
    radial-gradient(120% 60% at 50% 0%,   rgba(201,162,39,.07), transparent 60%),
    radial-gradient(90% 50% at 100% 100%, rgba(143,34,38,.08),  transparent 65%);
  background-attachment:fixed;
}

img{ max-width:100%; height:auto; display:block }
a{ color:inherit }

/* ---------- language switching: only ever HIDE the inactive variant ---------- */
html[data-lang="lv"] [lang="en"]{ display:none !important }
html[data-lang="en"] [lang="lv"]{ display:none !important }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad) }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--gold); color:#000; padding:.7rem 1.1rem; font-weight:600;
}
.skip:focus{ left:0 }

:where(a,button,input):focus-visible{
  outline:2px solid var(--gold-2); outline-offset:3px; border-radius:2px;
}

/* ============================================================ typography */
h1,h2,h3,h4{
  font-family:var(--serif); font-weight:600; line-height:1.14;
  margin:0; letter-spacing:.005em;
}
h2{ font-size:clamp(1.85rem,1.3rem + 2.4vw,3.1rem) }
h3{ font-size:clamp(1.12rem,1rem + .5vw,1.4rem) }
p{ margin:0 0 1.05em }

.eyebrow{
  font:600 .72rem/1.5 var(--sans);
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); margin:0 0 .9rem;
}

.sect{ padding:clamp(3.6rem,9vw,7rem) 0; position:relative }
/* the header is fixed, so anchor jumps must stop short of it or the
   section heading lands underneath the bar */
section[id]{ scroll-margin-top:76px }
@media (min-width:900px){ section[id]{ scroll-margin-top:86px } }
.sect-alt{ background:var(--ink-2); border-block:1px solid var(--line) }

.sect-head{ max-width:56ch; margin:0 auto clamp(2.2rem,5vw,3.6rem); text-align:center }
.sect-head h2::after{
  content:""; display:block; width:64px; height:2px; margin:1.1rem auto 0;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.sect-lead{ color:var(--dim); margin-top:1.1rem }

/* ============================================================ buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.92rem 1.6rem; min-height:48px;
  font:600 .82rem/1 var(--sans); letter-spacing:.12em; text-transform:uppercase;
  text-decoration:none; border-radius:var(--r); border:1px solid transparent;
  transition:background .2s, color .2s, border-color .2s, transform .2s;
  white-space:nowrap;
}
.btn-primary{ background:var(--gold); color:#171307; border-color:var(--gold) }
.btn-primary:hover{ background:var(--gold-2); border-color:var(--gold-2) }
.btn-ghost{ border-color:var(--line-2); color:var(--parch); background:rgba(232,226,212,.03) }
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold-2) }
.btn:active{ transform:translateY(1px) }
.btn-sm{ padding:.62rem 1.05rem; min-height:40px; font-size:.72rem }
.ico{ width:18px; height:18px; flex:none }

/* ============================================================ header */
.hdr{
  position:fixed; inset:0 0 auto; z-index:100;
  background:transparent; transition:background .3s, border-color .3s, backdrop-filter .3s;
  border-bottom:1px solid transparent;
}
.hdr.stuck{
  background:rgba(14,13,15,.9);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom-color:var(--line);
}
.hdr-in{ display:flex; align-items:center; gap:1rem; height:66px }

.brand{ display:flex; align-items:center; gap:.55rem; text-decoration:none; color:var(--parch); margin-right:auto }
.brand-mark{ width:26px; height:26px; color:var(--gold); flex:none }
/* Inter, not Cinzel: Cinzel has no true lowercase, so the wordmark would
   render as "D20.LV" and lose the lowercase brand. */
.brand-txt{ font:700 1.3rem/1 var(--sans); letter-spacing:-.02em }
.brand-dim{ color:var(--gold) }

.nav{ display:none; gap:1.55rem }
.nav a{
  text-decoration:none; color:var(--dim); font:500 .78rem/1 var(--sans);
  letter-spacing:.1em; text-transform:uppercase; padding:.5rem 0; position:relative;
  transition:color .2s;
}
.nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--gold); transition:right .25s;
}
.nav a:hover{ color:var(--parch) }
.nav a:hover::after, .nav a.on::after{ right:0 }
.nav a.on{ color:var(--gold) }

.hdr-act{ display:flex; align-items:center; gap:.6rem }
.lang{
  background:none; border:1px solid var(--line-2); color:var(--dim);
  font:600 .72rem/1 var(--sans); letter-spacing:.1em;
  padding:.55rem .7rem; min-width:44px; min-height:40px; border-radius:var(--r); cursor:pointer;
  transition:color .2s, border-color .2s;
}
.lang:hover{ color:var(--gold-2); border-color:var(--gold) }
.hdr-cta{ display:none }

.burger{
  width:44px; height:40px; display:grid; place-content:center; gap:5px;
  background:none; border:1px solid var(--line-2); border-radius:var(--r); cursor:pointer; padding:0;
}
.burger span{ display:block; width:19px; height:1.5px; background:var(--parch); transition:transform .25s, opacity .2s }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg) }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0 }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg) }

/* mobile drawer */
@media (max-width:899px){
  .nav{
    position:fixed; inset:66px 0 auto; display:flex; flex-direction:column; gap:0;
    background:rgba(14,13,15,.98); backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line);
    padding:.5rem var(--pad) 1.4rem;
    transform:translateY(-12px); opacity:0; pointer-events:none;
    transition:opacity .22s, transform .22s;
    max-height:calc(100dvh - 66px); overflow:auto;
  }
  body.nav-open .nav{ opacity:1; transform:none; pointer-events:auto }
  .nav a{ padding:.95rem 0; border-bottom:1px solid var(--line); font-size:.92rem; letter-spacing:.06em }
  .nav a::after{ display:none }
}
@media (min-width:900px){
  .nav{ display:flex }
  .burger{ display:none }
  .hdr-cta{ display:inline-flex }
  .hdr-in{ height:76px }
}

/* ============================================================ hero */
.hero{ position:relative; padding:calc(66px + 4.5rem) 0 0; isolation:isolate; overflow:hidden }
@media (min-width:900px){ .hero{ padding-top:calc(76px + 6rem) } }

.hero-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  z-index:-2; filter:grayscale(.35) contrast(1.05);
}
.hero-veil{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(14,13,15,.86) 0%, rgba(14,13,15,.72) 38%, rgba(14,13,15,.96) 88%, var(--ink) 100%),
    radial-gradient(80% 60% at 20% 30%, rgba(143,34,38,.22), transparent 70%);
}
.hero-in{ padding-bottom:clamp(3rem,7vw,5rem); max-width:900px }

.hero-h1{
  font-size:clamp(2.3rem,1.35rem + 4.4vw,4.6rem);
  line-height:1.06; margin:0 0 1.3rem; text-wrap:balance;
}
.hero-h1 em{ font-style:normal; color:var(--gold); display:inline-block }
.hero-sub{
  font-size:clamp(1.02rem,.98rem + .4vw,1.24rem);
  color:var(--dim); max-width:60ch; margin-bottom:2rem; line-height:1.62;
}
.hero-cta{ display:flex; flex-wrap:wrap; gap:.8rem }

.stats{
  list-style:none; margin:0; padding-block:1.6rem;
  display:grid; grid-template-columns:repeat(2,1fr); gap:1.4rem 1rem;
  border-top:1px solid var(--line);
}
.stats li{ display:flex; flex-direction:column; gap:.25rem }
.stats b{ font:600 clamp(1.6rem,1.2rem + 1.4vw,2.3rem)/1 var(--serif); color:var(--gold) }
.stats span{ font-size:.82rem; color:var(--dim); line-height:1.4 }
@media (min-width:760px){ .stats{ grid-template-columns:repeat(4,1fr); gap:1rem } }

/* ============================================================ split (about) */
.split{ display:grid; gap:clamp(2rem,5vw,4rem); align-items:center }
@media (min-width:900px){ .split{ grid-template-columns:1.05fr .95fr } }
.split-img{ margin:0; position:relative }
.split-img img{
  width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--r);
  border:1px solid var(--line-2); filter:grayscale(.2);
}
.split-img::after{
  content:""; position:absolute; inset:0; border-radius:var(--r); pointer-events:none;
  background:linear-gradient(200deg, transparent 55%, rgba(14,13,15,.5));
}
.split-txt p{ color:var(--dim) }

.ticks{ list-style:none; margin:1.6rem 0 0; padding:0; display:grid; gap:.75rem }
.ticks li{ position:relative; padding-left:1.9rem; color:var(--parch); font-size:.95rem }
.ticks li::before{
  content:""; position:absolute; left:0; top:.52em; width:9px; height:9px;
  background:var(--gold); transform:rotate(45deg);
}

/* ============================================================ steps */
.steps{ list-style:none; margin:0; padding:0; display:grid; gap:1.4rem; counter-reset:s }
@media (min-width:640px){ .steps{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1000px){ .steps{ grid-template-columns:repeat(4,1fr); gap:1rem } }
.step{
  background:var(--ink-3); border:1px solid var(--line); border-radius:var(--r);
  padding:1.6rem 1.4rem 1.5rem; position:relative; overflow:hidden;
}
.step::before{
  content:""; position:absolute; inset:0 auto 0 0; width:2px;
  background:linear-gradient(180deg,var(--gold),transparent);
}
.step-n{
  font:600 .78rem/1 var(--sans); letter-spacing:.18em; color:var(--gold);
  display:block; margin-bottom:.85rem;
}
.step h3{ margin-bottom:.55rem }
.step p{ margin:0; color:var(--dim); font-size:.93rem }

/* ============================================================ game masters */
/* Flex rather than grid: there are 5 Game Masters against a 3-column layout,
   and flex centres the trailing row of 2 instead of orphaning them left. */
.gms{ display:flex; flex-wrap:wrap; justify-content:center; gap:1.3rem }

.gm{
  flex:1 1 300px; max-width:360px;
  background:var(--ink-3); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; display:flex; flex-direction:column;
  transition:border-color .25s, transform .25s;
}
@media (max-width:699px){ .gm{ flex-basis:100%; max-width:none } }
.gm:hover{ border-color:var(--line-2); transform:translateY(-3px) }
.gm-photo{ position:relative; background:var(--ink-4) }
.gm-photo img{
  width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center 22%;
  filter:grayscale(.55) contrast(1.06); transition:filter .35s;
}
.gm:hover .gm-photo img{ filter:grayscale(.1) contrast(1.02) }
.gm-photo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(27,25,31,.92));
}
.gm-body{ padding:1.35rem 1.35rem 1.5rem; display:flex; flex-direction:column; flex:1 }
.gm-top{ display:flex; align-items:baseline; justify-content:space-between; gap:.7rem; margin-bottom:.4rem }
.gm-top h3{ font-size:1.42rem }
.pill{
  font:600 .66rem/1 var(--sans); letter-spacing:.13em; text-transform:uppercase;
  color:var(--gold); border:1px solid rgba(201,162,39,.4); border-radius:99px;
  padding:.4rem .6rem; white-space:nowrap;
}
.gm-spec{
  font:600 .72rem/1.45 var(--sans); letter-spacing:.14em; text-transform:uppercase;
  color:var(--dim-2); margin:0 0 .9rem;
}
.gm blockquote{
  margin:0 0 1.1rem; padding:0; font:400 1.02rem/1.62 var(--quote);
  color:var(--parch); flex:1;
}
.gm-sys{ margin:0; font-size:.8rem; color:var(--dim); border-top:1px solid var(--line); padding-top:.9rem }
.gm-sys b{
  display:block; font:600 .64rem/1 var(--sans); letter-spacing:.16em;
  text-transform:uppercase; color:var(--dim-2); margin-bottom:.4rem;
}

.pull{
  max-width:60ch; margin:clamp(2.4rem,5vw,3.6rem) auto 0; text-align:center;
  font:italic 400 clamp(1.05rem,1rem + .5vw,1.35rem)/1.65 var(--quote);
  color:var(--parch); padding:0 1rem; text-wrap:pretty;
}

/* ============================================================ craft cards */
.craft{ display:grid; gap:1.2rem }
@media (min-width:620px){ .craft{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1040px){ .craft{ grid-template-columns:repeat(3,1fr) } }
.card{
  background:var(--ink-3); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; display:flex; flex-direction:column; transition:border-color .25s, transform .25s;
}
.card:hover{ border-color:var(--line-2); transform:translateY(-3px) }
.card img{ width:100%; aspect-ratio:16/10; object-fit:cover; filter:grayscale(.3) }
.card-b{ padding:1.2rem 1.2rem 1.4rem }
.card-b h3{ font-size:1.08rem; margin-bottom:.5rem }
.card-b p{ margin:0; color:var(--dim); font-size:.9rem }

/* ============================================================ testimonials */
.quotes{ display:grid; gap:1.3rem }
@media (min-width:820px){ .quotes{ grid-template-columns:repeat(3,1fr) } }
.quote{
  margin:0; background:var(--ink-2); border:1px solid var(--line);
  border-radius:var(--r); padding:1.7rem 1.5rem 1.4rem; position:relative;
  display:flex; flex-direction:column;
}
.quote::before{
  content:"\201C"; position:absolute; top:-.15em; left:.5rem;
  font:400 5.5rem/1 var(--quote); color:var(--gold); opacity:.16;
}
.quote blockquote{
  margin:0 0 1.3rem; font:400 1.02rem/1.68 var(--quote); color:var(--parch);
  position:relative; flex:1;
}
.quote figcaption{ display:flex; align-items:center; gap:.8rem; border-top:1px solid var(--line); padding-top:1rem }
.ava{
  width:38px; height:38px; flex:none; display:grid; place-content:center;
  border:1px solid rgba(201,162,39,.45); border-radius:50%;
  font:600 .95rem/1 var(--serif); color:var(--gold);
}
.quote figcaption b{ display:block; font-size:.92rem; font-weight:600 }
.quote figcaption i{ display:block; font-style:normal; font-size:.76rem; color:var(--dim-2); letter-spacing:.04em }

/* ============================================================ tools */
.tools{ display:grid; gap:1.2rem }
@media (min-width:760px){ .tools{ grid-template-columns:repeat(2,1fr) } }
.tool{
  display:block; text-decoration:none; padding:1.7rem 1.6rem;
  background:var(--ink-3); border:1px solid var(--line); border-radius:var(--r);
  transition:border-color .25s, transform .25s;
}
.tool:hover{ border-color:var(--gold); transform:translateY(-3px) }
.tool h3{ display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; margin-bottom:.6rem }
.tool-tag{
  font:600 .62rem/1 var(--sans); letter-spacing:.14em; text-transform:uppercase;
  color:var(--dim-2); border:1px solid var(--line-2); border-radius:99px; padding:.35rem .55rem;
}
.tool p{ color:var(--dim); font-size:.93rem; margin-bottom:.9rem }
.tool-go{ font:600 .74rem/1 var(--sans); letter-spacing:.13em; text-transform:uppercase; color:var(--gold) }

/* ============================================================ contact cta */
.cta{ text-align:center; border-top:1px solid var(--line); background:var(--ink-2) }
.cta-in{ max-width:64ch }
.cta-sub{ color:var(--dim); margin:1.2rem auto 2rem; max-width:52ch }
.cta .hero-cta{ justify-content:center }
.cta-links{
  list-style:none; margin:2.2rem 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:.6rem 2rem; justify-content:center;
}
.cta-links a{
  color:var(--dim); text-decoration:none; font-size:.95rem;
  border-bottom:1px solid var(--line-2); padding-bottom:2px; transition:color .2s, border-color .2s;
}
.cta-links a:hover{ color:var(--gold-2); border-color:var(--gold) }

/* ============================================================ footer */
.foot{ background:var(--ink); border-top:1px solid var(--line); padding-top:clamp(2.6rem,6vw,4rem) }
.foot-in{ display:grid; gap:2.2rem; padding-bottom:2.6rem }
@media (min-width:760px){ .foot-in{ grid-template-columns:2fr 1fr 1fr; gap:3rem } }
.foot-brand p{ color:var(--dim-2); font-size:.88rem; margin:.8rem 0 0; max-width:42ch }
.foot-col h4{
  font:600 .68rem/1 var(--sans); letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold); margin-bottom:1rem;
}
.foot-col a{
  display:block; color:var(--dim); text-decoration:none; font-size:.9rem;
  padding:.32rem 0; transition:color .2s;
}
.foot-col a:hover{ color:var(--gold-2) }
.foot-btm{
  border-top:1px solid var(--line); padding-block:1.4rem;
  font-size:.79rem; color:var(--dim-2); text-align:center;
}

/* ============================================================ reveal on scroll
   Only active when JS has run (html.js), so the page is fully readable
   with JS disabled or broken. */
html.js .reveal{ opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .7s ease }
html.js .reveal.in{ opacity:1; transform:none }
@media (prefers-reduced-motion: reduce){
  html.js .reveal{ opacity:1; transform:none; transition:none }
  .gm:hover,.card:hover,.tool:hover{ transform:none }
}

/* ============================================================ print */
@media print{
  .hdr,.burger,.hero-cta,.skip,.tool-go{ display:none !important }
  body{ background:#fff; color:#000 }
  .sect,.sect-alt,.cta,.foot{ background:#fff; border-color:#ccc }
  .gm,.card,.quote,.step,.tool{ background:#fff; border-color:#ccc; break-inside:avoid }
  .hero-bg,.hero-veil{ display:none }
  h1,h2,h3,.eyebrow,.stats b,.pill,.tool-tag,.foot-col h4{ color:#000 }
  html.js .reveal{ opacity:1 !important; transform:none !important }
}