/* ==========================================================================
   Navian Digital
   Layout follows landfall.se: a stack of full-height bands, each with its own
   parallax background, everything in a narrow centred column. Rubik, near-black
   navy field, thin outlined buttons, logo centred between two nav rails.
   ========================================================================== */

:root{
  --ink:        #020b18;
  --ink-tint:   #04101f;
  --line:       rgba(255,255,255,.22);
  --paper:      #ffffff;
  --dim:        rgba(255,255,255,.7);
  --faint:      rgba(255,255,255,.42);
  --accent:     #ffb43c;

  --font: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --col: 900px;          /* the centred content column landfall uses */
  --gut: 24px;
  --mast-h: 86px;
}

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

html{ scroll-behavior:smooth; scroll-padding-top:var(--mast-h); }

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--font);
  font-size:17px;
  line-height:1.62;
  text-align:center;               /* landfall centres everything */
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,video{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }

h1,h2,h3{
  margin:0;
  font-weight:900;
  line-height:1.02;
  letter-spacing:-.01em;
  text-transform:uppercase;
}
h1{ font-size:clamp(38px, 6.4vw, 78px); }
h2{ font-size:clamp(30px, 4.6vw, 56px); }
h3{ font-size:clamp(22px, 2.6vw, 32px); }

/* ─── social rails ──────────────────────────────────────────────── */

.socials{ display:flex; justify-content:center; gap:18px; }
.socials a{
  display:grid; place-items:center;
  width:20px; height:20px;
  color:var(--faint);
  transition:color .16s ease;
}
.socials a:hover{ color:var(--paper); }
.socials svg{ width:100%; height:100%; fill:currentColor; }

/* The social accounts belong to Dusk Moth Games, not to Navian, so they sit on
   the game they cover rather than in the company chrome. When Navian has its
   own accounts, a .topbar rail comes back above the masthead. */
.socials--entry{ margin-top:14px; }
.socials--entry a{ width:19px; height:19px; }

.entry__studio{
  margin-top:26px;
  padding-top:22px;
  border-top:1px solid rgba(255,255,255,.08);
}
.entry__by{
  margin:0;
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--faint);
}

/* ─── masthead ──────────────────────────────────────────────────── */

.masthead{
  position:sticky;
  top:0;
  z-index:60;
  background:transparent;
  transition:background-color .3s ease;
}
.masthead.is-stuck{
  background:rgba(2,11,24,.94);
  backdrop-filter:blur(10px);
  box-shadow:0 1px 0 rgba(255,255,255,.08);
}

.masthead__inner{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:24px;
  height:var(--mast-h);
  padding-inline:34px;
}

.mast-nav{ display:flex; align-items:center; gap:26px; min-width:0; }
.mast-nav--primary{ justify-content:flex-start; }
.mast-nav--secondary{ justify-content:flex-end; }

.mast-nav a{
  font-size:12px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--dim);
  white-space:nowrap;
  transition:color .16s ease;
}
.mast-nav a:hover,
.mast-nav a.is-active{ color:var(--paper); }

.mast-cta{
  padding:9px 20px;
  border:1px solid var(--line);
  border-radius:2px;
  color:var(--paper) !important;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease;
}
.mast-cta:hover{ background:var(--paper); border-color:var(--paper); color:var(--ink) !important; }

/* nav folder (landfall's Games dropdown)
   display:flex matters — the sibling nav links are direct children of the nav's
   flex container and get blockified to the full line-height. The link in here
   is one level deeper, so without this it stays inline in a taller line box and
   sits ~4px below the others. */
.mast-folder{ position:relative; display:flex; align-items:center; }
.mast-folder__menu{
  position:absolute;
  top:100%; left:50%;
  transform:translate(-50%, 6px);
  display:flex;
  flex-direction:column;
  min-width:210px;
  padding:10px 0;
  background:rgba(2,11,24,.97);
  border:1px solid rgba(255,255,255,.1);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}
.mast-folder:hover .mast-folder__menu,
.mast-folder:focus-within .mast-folder__menu{
  opacity:1; pointer-events:auto; transform:translate(-50%, 0);
}
.mast-folder__menu a{ padding:9px 20px; text-align:left; }
.mast-folder__menu a:hover{ background:rgba(255,255,255,.07); }

/* The logo is the wordmark. The N-in-a-square exists only for square contexts
   — favicon, app icon, social avatar — and never appears on the page.
   Tracked type leaves a trailing gap after the last letter; the negative
   margin pulls it back so the lockup optically centres. */
.brand{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  line-height:1;
  white-space:nowrap;
}
.brand__word{
  font-size:20px;
  font-weight:900;
  letter-spacing:.15em;
  margin-right:-.15em;
}
.brand__sub{
  margin-top:6px;
  margin-right:-.40em;
  font-size:9px;
  font-weight:300;
  letter-spacing:.40em;
  opacity:.62;
}

.burger{
  display:none;
  flex-direction:column;
  gap:5px;
  width:32px; height:32px;
  padding:0; border:0; background:none; cursor:pointer;
}
.burger span{ height:2px; background:var(--paper); transition:transform .22s ease, opacity .18s ease; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-nav{
  position:absolute;
  top:100%; left:0; right:0;
  display:none;
  flex-direction:column;
  padding:10px var(--gut) 30px;
  background:var(--ink);
  box-shadow:0 26px 40px rgba(0,0,0,.55);
}
.mobile-nav a{
  padding:16px 0;
  font-size:16px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  border-bottom:1px solid rgba(255,255,255,.09);
}
.mobile-nav .btn{ margin-top:22px; border-bottom:0; }

/* ─── bands ─────────────────────────────────────────────────────── */

.band{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  padding-block:clamp(80px, 11vw, 150px);
}
.band--full{
  min-height:100svh;
  padding-block:clamp(110px, 12vw, 150px);
}
#hero{ margin-top:calc(var(--mast-h) * -1); }

.band--tint{ background:var(--ink-tint); }

/* Parallax: a taller background layer nudged by transform on scroll.
   background-attachment:fixed does the same thing declaratively but repaints
   the whole band every frame — a translate3d on its own layer does not. */
.band--parallax{ overflow:hidden; }
.band__bg{
  position:absolute;
  top:-12%; left:0; right:0; bottom:-12%;
  background-size:cover;
  background-position:center;
  will-change:transform;
}
.band__scrim{
  position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(2,11,24,.45) 0%, rgba(2,11,24,.15) 42%, rgba(2,11,24,.88) 100%);
}
.band__scrim--heavy{ background:rgba(2,11,24,.72); }

.band__content{
  position:relative;
  width:100%;
  max-width:var(--col);
  margin-inline:auto;
  padding-inline:var(--gut);
}
.band__heading{ margin-bottom:56px; }

.keyart{
  width:min(560px, 100%);
  margin:18px auto 0;
}

.lede{
  max-width:62ch;
  margin:22px auto 0;
  font-size:clamp(17px, 1.5vw, 20px);
  color:var(--dim);
}
.lede--dim{ color:var(--faint); }
.lede a{ color:var(--accent); text-decoration:underline; text-underline-offset:4px; }

.framed{
  margin:34px auto 0;
  border:1px solid rgba(255,255,255,.1);
  background:#0a1626;
  overflow:hidden;
}
.framed img,
.framed video{ width:100%; }

/* ─── buttons ───────────────────────────────────────────────────── */

.btn-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:32px; }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:170px;
  padding:15px 34px;
  border:1px solid var(--paper);
  border-radius:2px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--paper);
  cursor:pointer;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover{ background:var(--paper); color:var(--ink); }

.btn--solid{ background:var(--paper); color:var(--ink); }
.btn--solid:hover{ background:var(--accent); border-color:var(--accent); color:var(--ink); }

.btn--dead{ border-color:var(--line); color:var(--faint); cursor:default; }
.btn--dead:hover{ background:none; color:var(--faint); }

/* ─── game entries (stacked, capsule-led — landfall's /games list) ── */

.entry{ padding-block:clamp(46px, 6vw, 78px); }
.entry + .entry{ border-top:1px solid rgba(255,255,255,.08); }

.entry__art{
  display:block;
  width:min(616px, 100%);
  margin:0 auto 26px;
  overflow:hidden;
  background:#0a1626;
}
.entry__art img{
  width:100%;
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.entry__art:hover img{ transform:scale(1.04); }

.entry__art--tba{
  display:grid;
  place-items:center;
  aspect-ratio:616/287;
  background:repeating-linear-gradient(135deg, #08131f 0 14px, #0b1727 14px 28px);
}
.entry__art--tba span{ font-size:64px; font-weight:900; color:rgba(255,255,255,.1); }

.entry h3{ margin-bottom:14px; }
.entry p{ max-width:60ch; margin:0 auto; color:var(--dim); }
.entry--tba{ opacity:.55; }

/* ─── footer ────────────────────────────────────────────────────── */

.site-footer{
  padding:70px var(--gut) 56px;
  border-top:1px solid rgba(255,255,255,.08);
}
.site-footer__inner{ max-width:var(--col); margin-inline:auto; }
.site-footer__brand{ margin-inline:auto; }
.site-footer__brand .brand__word{ font-size:17px; }
.site-footer__addr{ margin:16px 0 0; font-size:14px; color:var(--dim); }
.site-footer__links{ display:flex; justify-content:center; gap:26px; margin:26px 0; }
.site-footer__links a{
  font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--faint);
}
.site-footer__links a:hover{ color:var(--paper); }
.site-footer__legal{ margin:0; font-size:11px; letter-spacing:.16em; color:var(--faint); }

/* ─── article pages ─────────────────────────────────────────────── */

.page-head{ padding:clamp(70px,9vw,120px) var(--gut) 46px; }
.page-head h1{ font-size:clamp(40px, 7vw, 86px); }
.page-head .lede{ margin-top:22px; }

.prose{
  max-width:760px;
  margin-inline:auto;
  padding:10px var(--gut) 100px;
  text-align:left;
}
.prose h2{
  margin:52px 0 16px;
  font-size:22px;
  letter-spacing:.06em;
  text-align:center;
}
.prose h2:first-child{ margin-top:0; }
.prose h3{ margin:30px 0 8px; font-size:14px; letter-spacing:.18em; color:var(--accent); text-align:center; }
.prose p,.prose li{ color:var(--dim); }
.prose ul{ padding-left:20px; }
.prose li{ margin-bottom:9px; }
.prose a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.prose img,.prose video{ margin:14px auto 0; border:1px solid rgba(255,255,255,.1); }

.shot-stack{ display:grid; gap:16px; margin-top:20px; }
.shot-stack img{ width:100%; }

/* ─── reveal ────────────────────────────────────────────────────── */

.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.is-in{ opacity:1; transform:none; }

/* ─── responsive ────────────────────────────────────────────────── */

@media (max-width: 1080px){
  .masthead__inner{ padding-inline:20px; }
  .mast-nav{ gap:18px; }
  .mast-nav a{ font-size:11px; letter-spacing:.12em; }
}

@media (max-width: 860px){
  :root{ --gut:18px; --mast-h:66px; }

  .mast-nav{ display:none; }
  .burger{ display:flex; justify-self:end; }
  .masthead__inner{ grid-template-columns:1fr auto; }
  .brand{ order:-1; justify-self:start; }
  .mobile-nav{ display:none; }
  .mobile-nav.is-open{ display:flex; }

  .band--full{ min-height:86svh; }
  .btn{ min-width:0; flex:1 1 auto; padding:14px 22px; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
  .band__bg{ transform:none !important; }
}