/* ==========================================================================
   Nine Gates Studio — parchment / decree theme
   ========================================================================== */

:root{
  --paper:      #F3E9D2;
  --paper-deep: #EADFC2;
  --paper-soft: #F8F1E0;
  --ink:        #2B1D12;
  --ink-soft:   #5A4632;
  --gold:       #B8860B;
  --gold-ink:   #7A5A07;   /* accessible gold for text (5.3:1 on paper) */
  --seal:       #8B1E1E;
  --seal-deep:  #6E1616;
  --line:       rgba(43,29,18,.20);
  --line-soft:  rgba(43,29,18,.10);

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --wrap: 1120px;
  --gut: clamp(1.25rem, 4vw, 2.5rem);
  --step: clamp(3rem, 8vw, 6rem);
}

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

body{
  margin:0;
  font-family:var(--sans);
  font-size:clamp(1rem,.96rem + .2vw,1.0625rem);
  line-height:1.7;
  color:var(--ink);
  background-color:var(--paper);
  /* Paper grain, pure CSS. Kept to small tiled, axis-aligned gradients:
     angled gradients or background-attachment:fixed make the browser repaint
     the whole page on every scroll, which visibly janks the long pages. */
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 480px),
    repeating-linear-gradient(90deg, rgba(43,29,18,.022) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(0deg,  rgba(43,29,18,.016) 0 1px, transparent 1px 5px);
  background-size:100% 480px, 4px 4px, 5px 5px;
  background-repeat:no-repeat, repeat, repeat;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

/* ---------- typography ---------- */
h1,h2,h3{
  font-family:var(--serif);
  font-weight:600;
  line-height:1.15;
  margin:0 0 .5em;
  letter-spacing:.005em;
}
h1{font-size:clamp(2.25rem,1.4rem + 4vw,4rem)}
h2{font-size:clamp(1.75rem,1.2rem + 2.4vw,2.75rem)}
h3{font-size:clamp(1.25rem,1.05rem + .9vw,1.6rem)}
p{margin:0 0 1.15em}
a{color:var(--seal);text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:.06em}
a:hover{color:var(--seal-deep);text-decoration-thickness:.12em}
strong{font-weight:600}
img{max-width:100%;height:auto;display:block}
hr{border:0;border-top:1px solid var(--line);margin:var(--step) 0}

:focus-visible{
  outline:3px solid var(--seal);
  outline-offset:3px;
}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--ink);color:var(--paper);
  padding:.7rem 1.1rem;text-decoration:none;font-weight:600;
}
.skip-link:focus{left:.5rem;top:.5rem;color:var(--paper)}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.wrap--narrow{max-width:46rem}

.eyebrow{
  font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-ink);font-weight:600;margin:0 0 1rem;
}

/* ---------- ornaments ---------- */
.rule{
  display:flex;align-items:center;gap:1rem;
  margin:var(--step) 0;color:var(--gold);
}
.rule::before,.rule::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.rule span{
  width:.5rem;height:.5rem;transform:rotate(45deg);
  background:var(--gold);flex:none;
}

/* ---------- masthead ---------- */
.masthead{
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(248,241,224,.85), rgba(243,233,210,.4));
  position:relative;
}
.masthead__inner{
  display:flex;align-items:center;gap:1rem;
  min-height:4.5rem;padding-block:.85rem;
}
.brand{
  display:flex;align-items:center;gap:.7rem;
  text-decoration:none;color:var(--ink);margin-inline-end:auto;
}
.brand img{height:2.4rem;width:auto;max-width:11rem;object-fit:contain}
.brand__name{
  font-family:var(--serif);font-size:1.35rem;font-weight:600;
  letter-spacing:.02em;white-space:nowrap;
}
@media (max-width:26rem){ .brand__name{font-size:1.15rem} }

.menu-btn{
  display:none;
  font:inherit;font-size:.9rem;font-weight:600;
  background:transparent;border:1px solid var(--line);
  color:var(--ink);padding:.5rem .8rem;cursor:pointer;
  align-items:center;gap:.5rem;
}
.menu-btn:hover{border-color:var(--gold);background:rgba(184,134,11,.07)}
.menu-btn__bars{display:inline-block;width:1rem;height:.7rem;position:relative}
.menu-btn__bars::before,.menu-btn__bars::after,.menu-btn__bars span{
  content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor;
}
.menu-btn__bars::before{top:0}
.menu-btn__bars span{top:50%;transform:translateY(-50%)}
.menu-btn__bars::after{bottom:0}

.masthead__nav{display:flex;align-items:center;gap:.25rem;flex-wrap:wrap}
.nav{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap}
.nav a{
  text-decoration:none;color:var(--ink);
  font-size:.95rem;font-weight:500;
  padding:.45rem .75rem;border:1px solid transparent;
  transition:border-color .18s ease, background-color .18s ease, color .18s ease;
}
.nav a:hover{border-color:var(--line);background:rgba(184,134,11,.08);color:var(--ink)}
.nav a[aria-current="page"]{
  border-color:var(--gold);color:var(--gold-ink);
  background:rgba(184,134,11,.10);
}
.nav__sep{width:1px;height:1.4rem;background:var(--line);margin-inline:.4rem}

.lang{display:flex;align-items:center;gap:.15rem;font-size:.85rem}
.lang a,.lang span{padding:.35rem .5rem;text-decoration:none;font-weight:600;letter-spacing:.04em}
.lang a{color:var(--ink-soft)}
.lang a:hover{color:var(--seal);background:rgba(184,134,11,.08)}
.lang span[aria-current]{color:var(--gold-ink);border-bottom:2px solid var(--gold)}
.lang__slash{color:var(--line);font-weight:400;padding-inline:0}

@media (max-width:52rem){
  .js .menu-btn{display:inline-flex}
  .js .masthead__nav{
    display:none;
    flex-basis:100%;width:100%;
    flex-direction:column;align-items:stretch;gap:0;
    border-top:1px solid var(--line);
    margin-top:.85rem;padding-top:.5rem;
  }
  .js .masthead__nav[data-open="true"]{display:flex}
  .js .masthead__nav .nav{flex-direction:column;align-items:stretch;gap:0}
  .js .masthead__nav .nav a{padding:.75rem .25rem;border-bottom:1px solid var(--line-soft);border-left:0;border-right:0;border-top:0}
  .js .masthead__nav .nav a[aria-current="page"]{border-left:3px solid var(--gold);padding-left:.6rem}
  .js .masthead__nav .nav__sep{display:none}
  .js .masthead__nav .lang{padding:.75rem .25rem}
  .masthead__inner{flex-wrap:wrap}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--sans);font-size:1rem;font-weight:600;line-height:1.2;
  padding:.95rem 1.6rem;
  background:var(--seal);color:var(--paper-soft);
  border:1px solid var(--seal-deep);text-decoration:none;
  transition:background-color .18s ease, box-shadow .18s ease;
  box-shadow:0 1px 0 rgba(43,29,18,.18);
}
.btn:hover{background:var(--seal-deep);color:var(--paper-soft);box-shadow:0 2px 0 rgba(43,29,18,.28)}
.btn--ghost{
  background:transparent;color:var(--ink);border-color:var(--line);
  box-shadow:none;
}
.btn--ghost:hover{background:rgba(184,134,11,.10);border-color:var(--gold);color:var(--ink);box-shadow:none}
.btn-row{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1rem}

.badge{
  display:inline-block;font-size:.72rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-ink);border:1px solid var(--gold);
  padding:.35rem .65rem;background:rgba(184,134,11,.10);
  white-space:nowrap;
}

/* ---------- home hero ---------- */
main{flex:1 0 auto}

.hero-home{
  text-align:center;
  padding-block:clamp(3rem,9vw,6.5rem) clamp(2rem,6vw,4rem);
  position:relative;
}
.hero-home__frame{
  border:1px solid var(--line);
  padding:clamp(2rem,6vw,4rem) clamp(1.25rem,4vw,3rem);
  position:relative;
  background:linear-gradient(180deg, rgba(248,241,224,.55), transparent 70%);
}
.hero-home__frame::before,.hero-home__frame::after{
  content:"";position:absolute;width:.75rem;height:.75rem;border:1px solid var(--gold);
}
.hero-home__frame::before{top:-.4rem;left:-.4rem;border-right:0;border-bottom:0}
.hero-home__frame::after{bottom:-.4rem;right:-.4rem;border-left:0;border-top:0}
/* Constrained on both axes so the slot takes any logo aspect ratio —
   a wide lockup is limited by max-width, a square mark by max-height. */
.hero-home__logo{
  margin:0 auto clamp(1.25rem,3vw,2rem);
  width:auto;height:auto;
  max-width:min(30rem,80%);
  max-height:clamp(8rem,22vh,14rem);
}
.hero-home h1{margin-bottom:.25em}
.hero-home__tagline{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(1.2rem,1rem + 1vw,1.6rem);
  color:var(--ink-soft);margin:0;
}

.intro{font-size:clamp(1.05rem,1rem + .35vw,1.2rem);text-align:center}

/* ---------- game card ---------- */
.section{padding-block:var(--step)}
.section__head{text-align:center;margin-bottom:clamp(1.75rem,4vw,2.75rem)}
.section__head p{color:var(--ink-soft);max-width:44rem;margin-inline:auto}

.card{
  display:grid;grid-template-columns:minmax(0,1fr);
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(248,241,224,.7), rgba(243,233,210,.35));
  overflow:hidden;
}
@media (min-width:48rem){ .card{grid-template-columns:minmax(0,26rem) minmax(0,1fr)} }
.card__media{margin:0;background:var(--paper-deep);border-bottom:1px solid var(--line)}
@media (min-width:48rem){ .card__media{border-bottom:0;border-right:1px solid var(--line)} }
.card__media img{width:100%;height:100%;object-fit:cover;aspect-ratio:616/353}
.card__body{padding:clamp(1.5rem,4vw,2.5rem);display:flex;flex-direction:column;justify-content:center}
.card__body h3{margin-bottom:.35em;font-size:clamp(1.5rem,1.2rem + 1.4vw,2.1rem)}
.card__body p{color:var(--ink-soft)}

/* ---------- Tughra hero ---------- */
/* The key art carries its own title lockup across roughly 45-91% of its own
   height, so the hero has to be tall enough for the text block to clear it.
   Past ~50rem tall the art scales up and gets cropped at the sides instead,
   which is safe: the wordmark only occupies the middle ~45% of the frame. */
.hero-game{
  position:relative;isolation:isolate;
  min-height:clamp(48rem,92vh,56rem);
  display:flex;align-items:flex-end;
  border-bottom:1px solid var(--line);
  background:var(--ink);
  overflow:hidden;
}
.hero-game__bg{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 85%;z-index:-2;
}
.hero-game::after{
  content:"";position:absolute;inset:0;z-index:-1;
  /* Light over the art, near-solid where the text sits, so the sub-title
     painted into the artwork fades out instead of showing through the button. */
  background:linear-gradient(180deg,
    rgba(20,13,8,.20) 0%, rgba(20,13,8,.28) 45%,
    rgba(20,13,8,.52) 64%, rgba(20,13,8,.88) 76%,
    rgba(20,13,8,.98) 86%, rgba(20,13,8,1) 100%);
}
.hero-game__inner{
  width:100%;padding-block:0 clamp(1.5rem,3vw,2.25rem);
  color:var(--paper-soft);text-align:center;
}
.hero-game__slogan{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(1.35rem,1.1rem + 1.4vw,2.1rem);
  margin:0 0 1.25rem;color:#F6EEDC;
  text-shadow:0 1px 12px rgba(0,0,0,.55);
}
.hero-game .btn-row{justify-content:center}
.hero-game .badge{color:#EFD79A;border-color:#C9A03A;background:rgba(0,0,0,.35)}
.hero-game__platforms{
  margin:1rem 0 0;padding:0;
  font-size:.9rem;letter-spacing:.1em;
  color:rgba(246,238,220,.9);text-transform:uppercase;
}
.hero-game__platforms li{display:inline;list-style:none}
.hero-game__platforms li+li::before{content:" · ";color:#D9AE3C}

/* Narrow screens: cover would slice the wordmark off at both edges, so show
   the art whole across the top and let the text sit below it on the dark. */
@media (max-width:44rem){
  .hero-game{min-height:0}
  .hero-game__bg{object-fit:contain;object-position:50% 0}
  .hero-game__inner{padding-bottom:clamp(1.5rem,5vw,2.25rem)}
  .hero-game__inner{padding-top:min(57vw,26rem)}
  .hero-game::after{
    background:linear-gradient(180deg,
      rgba(20,13,8,.10) 0%, rgba(20,13,8,.10) 42%,
      rgba(20,13,8,.72) 56%, rgba(20,13,8,.97) 68%, rgba(20,13,8,1) 100%);
  }
}

/* visually hidden */
.vh{
  position:absolute!important;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ---------- prose ---------- */
.prose{font-size:1.05rem}
.prose h2{margin-top:2.2em;font-size:clamp(1.35rem,1.15rem + .9vw,1.75rem)}
.prose h2:first-of-type{margin-top:1.2em}
.prose ul{padding-left:1.2em}
.prose li{margin-bottom:.4em}
.page-head{padding-block:clamp(2.5rem,6vw,4rem) 0;text-align:center}
.page-head .updated{
  font-size:.85rem;letter-spacing:.08em;color:var(--ink-soft);
  margin:0;text-transform:uppercase;
}
.lede{font-size:1.15rem;color:var(--ink-soft)}

.callout{
  border:1px solid var(--line);border-left:3px solid var(--seal);
  background:rgba(139,30,30,.05);
  padding:1.25rem 1.4rem;margin:2rem 0;
}
.callout p:last-child{margin-bottom:0}

/* ---------- empires ---------- */
.empires{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(.5rem,1.6vw,1rem);
  margin:0;padding:0;list-style:none;
}
/* Landscape tiles get thin fast; drop to three, then two, so the
   empire art stays readable instead of shrinking with the viewport. */
@media (max-width:44rem){ .empires{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:30rem){ .empires{grid-template-columns:repeat(2,minmax(0,1fr))} }
.empires li{text-align:center}
.empires__icon{
  aspect-ratio:910/512;width:100%;
  border:1px solid var(--line);
  background:var(--paper-soft);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  transition:border-color .18s ease;
}
.empires li:hover .empires__icon{border-color:var(--gold)}
.empires__icon img{width:100%;height:100%;object-fit:cover}
.empires__label{
  display:block;margin-top:.55rem;
  font-size:clamp(.72rem,.65rem + .3vw,.85rem);
  color:var(--ink-soft);letter-spacing:.03em;
}

/* ---------- gallery + lightbox ---------- */
.gallery{
  display:grid;gap:clamp(.75rem,2vw,1.25rem);
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin:0;padding:0;list-style:none;
}
@media (max-width:44rem){ .gallery{grid-template-columns:1fr} }
.gallery a{
  display:block;border:1px solid var(--line);
  background:var(--paper-deep);line-height:0;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.gallery a:hover{border-color:var(--gold);box-shadow:0 0 0 3px rgba(184,134,11,.18)}
.gallery img{width:100%;aspect-ratio:16/9;object-fit:cover}

.lightbox{
  position:fixed;inset:0;z-index:50;
  display:none;align-items:center;justify-content:center;
  padding:clamp(1rem,4vw,3rem);
}
.lightbox:target{display:flex}
.lightbox__backdrop{
  position:absolute;inset:0;background:rgba(20,13,8,.92);
  display:block;
}
.lightbox img{
  position:relative;max-width:min(78rem,100%);max-height:85vh;
  width:auto;object-fit:contain;border:1px solid rgba(184,134,11,.5);
}
.lightbox__close{
  position:absolute;top:clamp(.75rem,3vw,1.75rem);right:clamp(.75rem,3vw,1.75rem);
  z-index:2;font-family:var(--sans);font-size:.9rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  color:var(--paper-soft);border:1px solid rgba(246,238,220,.5);
  padding:.5rem .9rem;background:rgba(20,13,8,.6);
}
.lightbox__close:hover{color:var(--paper-soft);border-color:var(--gold);background:rgba(139,30,30,.65)}

/* ---------- closing block ---------- */
.closing{
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(248,241,224,.75), rgba(234,223,194,.4));
  padding:clamp(2rem,6vw,3.5rem) clamp(1.25rem,4vw,3rem);
  text-align:center;
}
.closing h2{margin-bottom:.4em}
.closing .btn-row{justify-content:center;margin-top:1.5rem}
.closing__mail{margin:1.75rem 0 0;font-size:.98rem;color:var(--ink-soft)}

/* ---------- contact ---------- */
.contact{text-align:center}
.contact__mail{
  font-family:var(--serif);
  font-size:clamp(1.35rem,1.1rem + 1.4vw,2rem);
  font-weight:600;word-break:break-word;
}

/* ---------- footer ---------- */
.colophon{
  border-top:1px solid var(--line);
  margin-top:var(--step);
  background:linear-gradient(180deg, transparent, rgba(234,223,194,.45));
  font-size:.9rem;
}
.colophon__inner{
  display:flex;flex-wrap:wrap;gap:1rem 1.5rem;
  align-items:center;justify-content:space-between;
  padding-block:2rem;
}
.colophon nav{display:flex;flex-wrap:wrap;gap:.4rem 1.25rem;align-items:center}
.colophon a{color:var(--ink-soft);text-decoration:none;border-bottom:1px solid transparent}
.colophon a:hover{color:var(--seal);border-bottom-color:var(--gold)}
.colophon__copy{margin:0;color:var(--ink-soft)}
.colophon__copy strong{font-family:var(--serif);font-weight:600;color:var(--ink)}

/* ---------- 404 ---------- */
.gate404{
  text-align:center;
  padding-block:clamp(4rem,14vh,8rem);
}
.gate404 .code{
  font-family:var(--serif);font-size:clamp(4rem,18vw,9rem);
  line-height:1;color:var(--gold);margin:0 0 .1em;
}
.gate404 p{font-size:1.15rem;color:var(--ink-soft)}