/* Ashlights — studio and game pages. Every font is self-hosted: the pages make no third-party requests. */
@font-face { font-family: "Shoulders"; src: url(fonts/big-shoulders-display-latin-800-normal.woff2) format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Shoulders"; src: url(fonts/big-shoulders-display-latin-900-normal.woff2) format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "Garamond"; src: url(fonts/eb-garamond-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Garamond"; src: url(fonts/eb-garamond-latin-400-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Barlow"; src: url(fonts/barlow-semi-condensed-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow"; src: url(fonts/barlow-semi-condensed-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Cinzel"; src: url(fonts/cinzel-latin-900-normal.woff2) format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "Vazirmatn"; src: url(fonts/vazirmatn-arabic-400-normal.woff2) format("woff2"); font-weight: 400 600; font-display: swap; unicode-range: U+0600-06FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Vazirmatn"; src: url(fonts/vazirmatn-arabic-700-normal.woff2) format("woff2"); font-weight: 700 900; font-display: swap; unicode-range: U+0600-06FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Lalezar"; src: url(fonts/lalezar-arabic-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0600-06FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFF; }

:root {
  --ink: #0f0d0b;
  --ink-2: #16130f;
  --bone: #ede5d6;
  --ash: #948b7d;
  --rule: #2d2722;
  --ember: #e05a2b;
  --parchment: #e7ddcb;
  --char: #1b1713;
  --char-mute: #5e554a;

  --f-display: "Shoulders", "Arial Narrow", sans-serif;
  --f-serif: "Garamond", Georgia, serif;
  --f-body: "Barlow", system-ui, sans-serif;
  --f-game: "Cinzel", Georgia, serif;
  --gutter: clamp(16px, 4vw, 56px);
  color-scheme: dark;
}
:root[lang="fa"] {
  --f-display: "Lalezar", "Vazirmatn", sans-serif;
  --f-serif: "Vazirmatn", serif;
  --f-body: "Vazirmatn", system-ui, sans-serif;
  --f-game: "Lalezar", "Vazirmatn", serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ink); color: var(--bone);
  font: 500 18px/1.55 var(--f-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
/* paper grain over everything, very faint */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }
.pad { padding-inline: var(--gutter); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- header ---------- */
.mast {
  position: absolute; inset: 0 0 auto; z-index: 5;
  display: flex; align-items: center; gap: 28px; padding: 22px var(--gutter);
}
.mast .word { font: 900 24px/1 var(--f-display); letter-spacing: .04em; text-transform: uppercase; text-decoration: none; }
:root[lang="fa"] .mast .word { font-family: "Shoulders", sans-serif; }
.mast nav { margin-inline-start: auto; display: flex; align-items: center; gap: 26px; font-weight: 600; font-size: 16px; }
.mast nav a { text-decoration: none; opacity: .82; }
.mast nav a:hover { opacity: 1; text-decoration: underline; }
.lang { font: 600 15px/1 var(--f-body); color: var(--bone); background: none; border: 0; border-inline-start: 1px solid rgb(237 229 214 / .3); padding: 4px 0 4px 18px; cursor: pointer; }
:root[dir="rtl"] .lang { padding: 4px 18px 4px 0; }
.lang:hover { text-decoration: underline; }

/* ---------- hero ---------- */
.hero { position: relative; min-height: min(100svh, 980px); display: grid; align-items: end; overflow: hidden; isolation: isolate; }
.hero > picture, .hero > img { position: absolute; inset: 0; z-index: -2; }
.hero picture img, .hero > img { width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, var(--ink) 0%, rgb(15 13 11 / .78) 28%, rgb(15 13 11 / .12) 62%, rgb(15 13 11 / .45) 100%);
}
.hero-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px 48px; align-items: end; padding-block: 0 clamp(36px, 6vw, 72px); }
.statement { font: italic 400 clamp(30px, 4.4vw, 62px)/1.08 var(--f-serif); margin: 0; max-width: 17ch; letter-spacing: -.01em; }
:root[lang="fa"] .statement { font-style: normal; font-weight: 700; line-height: 1.5; max-width: 22ch; }
.label { font-size: 14px; line-height: 1.45; color: var(--ash); max-width: 26ch; border-inline-start: 1px solid var(--ember); padding-inline-start: 14px; }
.label strong { display: block; color: var(--bone); font-weight: 600; }
.label a { color: var(--bone); }

/* ---------- section scaffolding ---------- */
.sec { padding-block: clamp(72px, 10vw, 140px); }
.big {
  font: 900 clamp(64px, 13vw, 200px)/.82 var(--f-display); text-transform: uppercase; letter-spacing: -.01em; margin: 0;
}
:root[lang="fa"] .big { font-weight: 400; line-height: 1.1; }
.sec-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 40px; padding-bottom: 28px; border-bottom: 1px solid var(--rule); }
.sec-head p { margin: 0; color: var(--ash); max-width: 30ch; }

/* ---------- games ledger ---------- */
.ledger { list-style: none; margin: 0; padding: 0; }
.entry { border-bottom: 1px solid var(--rule); }
.entry-row { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 24px; align-items: baseline; padding-block: 28px; }
.no { font: 800 18px/1 var(--f-display); color: var(--ash); letter-spacing: .04em; }
:root[lang="fa"] .no { font-family: "Shoulders", sans-serif; }
.title { font: 800 clamp(44px, 7vw, 104px)/.9 var(--f-display); text-transform: uppercase; margin: 0; }
:root[lang="fa"] .title { font-weight: 400; line-height: 1.2; }
.title a { text-decoration: none; }
.title a:hover { color: var(--ember); }
.meta { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 12px; color: var(--ash); font-size: 16px; }
.status { font-size: 15px; font-weight: 600; white-space: nowrap; }
.status::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ember); margin-inline-end: 8px; vertical-align: 1px; }
.entry.later .title { color: #4a433b; }
.entry.later .status::before { background: transparent; border: 1px solid var(--ash); }
.entry.later .status { color: var(--ash); }
.feature { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); padding-bottom: 44px; }
.feature figure { margin: 0; }
.feature img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.feature figcaption { font-size: 14px; color: var(--ash); margin-top: 10px; }
.feature .copy { align-self: end; }
.tagline { font: italic 400 clamp(24px, 2.4vw, 32px)/1.2 var(--f-serif); margin: 0 0 18px; }
:root[lang="fa"] .tagline { font-style: normal; font-weight: 700; line-height: 1.7; }
.copy p { color: #c9bfae; margin: 0 0 22px; }
.links { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; }
.arrow { font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.arrow::after { content: " →"; }
:root[dir="rtl"] .arrow::after { content: " ←"; }
.arrow:hover { color: var(--ember); }

/* ---------- buttons (flat, square) ---------- */
.btn { display: inline-block; background: var(--ember); color: #160b05; font-weight: 600; text-decoration: none; padding: 15px 26px; border-radius: 2px; }
.btn:hover { background: #ec6a3a; }

/* ---------- parchment (studio) ---------- */
.paper { background: var(--parchment); color: var(--char); }
.paper .big { color: var(--char); }
.paper-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(32px, 6vw, 96px); }
.paper .lead { font: 400 clamp(22px, 2.2vw, 29px)/1.4 var(--f-serif); margin: 0 0 40px; }
:root[lang="fa"] .paper .lead { line-height: 1.9; }
.paper .lead::first-letter { font: 900 3.1em/.8 var(--f-display); float: inline-start; margin: .06em .08em 0 0; color: var(--ember); }
:root[lang="fa"] .paper .lead::first-letter { font: inherit; float: none; margin: 0; color: inherit; }
.tenets { list-style: none; margin: 0; padding: 0; counter-reset: t; }
.tenets li { counter-increment: t; display: grid; grid-template-columns: 48px 1fr; gap: 4px 12px; padding: 20px 0; border-top: 1px solid #cdbfa6; }
.tenets li::before { content: counter(t, upper-roman) "."; font: 800 18px/1.35 "Shoulders", sans-serif; color: var(--ember); grid-row: span 2; }
.tenets strong { font-weight: 600; font-size: 19px; }
.tenets span { color: var(--char-mute); }

/* ---------- footer ---------- */
.foot { padding-block: 56px 40px; border-top: 1px solid var(--rule); }
.foot-word { font: 900 clamp(72px, 19vw, 300px)/.78 "Shoulders", sans-serif; text-transform: uppercase; color: #231e19; margin: 0 0 28px; letter-spacing: -.01em; user-select: none; }
.foot-row { display: flex; flex-wrap: wrap; gap: 10px 28px; color: var(--ash); font-size: 15px; }
.foot-row a { text-decoration: none; }
.foot-row a:hover { color: var(--bone); text-decoration: underline; }
.foot-row .grow { margin-inline-end: auto; }

/* ---------- game page ---------- */
.game-hero .hero-body { grid-template-columns: minmax(0, 1fr); }
.gh-title { display: flex; align-items: center; gap: 22px; margin-bottom: 18px; }
.gh-title img { width: clamp(64px, 7vw, 96px); height: auto; border-radius: 22%; box-shadow: 0 12px 40px rgb(0 0 0 / .55); }
.game-name { font: 900 clamp(52px, 9vw, 128px)/.9 var(--f-game); margin: 0; letter-spacing: .01em; }
:root[lang="fa"] .game-name { font-weight: 400; line-height: 1.2; }
.game-hero .tagline { max-width: 26ch; font-size: clamp(24px, 2.6vw, 36px); }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 26px; }
.small { font-size: 15px; color: var(--ash); }

.story { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.kicker { font: 800 16px/1 "Shoulders", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--ember); margin: 0 0 22px; }
:root[lang="fa"] .kicker { font-family: "Lalezar", sans-serif; font-weight: 400; letter-spacing: 0; font-size: 20px; }
.story-text { font: 400 clamp(23px, 2.3vw, 31px)/1.45 var(--f-serif); margin: 0; }
:root[lang="fa"] .story-text { line-height: 1.95; }
.story-text::first-letter { font: 900 3.2em/.8 var(--f-game); float: inline-start; margin: .08em .1em 0 0; color: var(--ember); }
:root[lang="fa"] .story-text::first-letter { font: inherit; float: none; margin: 0; color: inherit; }
.phone { justify-self: center; width: min(320px, 100%); border: 1px solid var(--rule); border-radius: 26px; padding: 8px; background: #000; box-shadow: 0 30px 80px rgb(0 0 0 / .6); }
.phone img { border-radius: 19px; }

.chapters .tabs { display: flex; gap: 0; overflow-x: auto; border-bottom: 1px solid var(--rule); margin-top: 8px; scrollbar-width: none; }
.chapters .tabs::-webkit-scrollbar { display: none; }
.tab { flex: none; background: none; border: 0; color: var(--ash); font: 800 clamp(22px, 2.6vw, 34px)/1 var(--f-display); text-transform: uppercase; padding: 22px 0; margin-inline-end: clamp(22px, 4vw, 52px); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px; }
:root[lang="fa"] .tab { font-weight: 400; }
.tab .n { font-size: .55em; vertical-align: .55em; margin-inline-end: 8px; color: var(--ember); }
.tab[aria-selected="true"] { color: var(--bone); border-bottom-color: var(--ember); }
.tab:hover { color: var(--bone); }
.panel { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); padding-top: 36px; align-items: end; }
.panel img { width: 100%; aspect-ratio: 1400 / 860; object-fit: cover; border: 1px solid var(--rule); }
.panel h3 { font: 800 clamp(30px, 3.4vw, 46px)/1 var(--f-display); text-transform: uppercase; margin: 0 0 14px; }
:root[lang="fa"] .panel h3 { font-weight: 400; line-height: 1.3; }
.panel p { color: #c9bfae; margin: 0; max-width: 40ch; }
.js .panel[hidden] { display: none; }
.panel + .panel { margin-top: 48px; }
.js .panel + .panel { margin-top: 0; }

.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 36px 0 0; border-top: 1px solid var(--rule); }
.facts div { padding: 22px 24px 22px 0; border-bottom: 1px solid var(--rule); }
:root[dir="rtl"] .facts div { padding: 22px 0 22px 24px; }
.facts dt { font-size: 14px; color: var(--ash); margin-bottom: 6px; }
.facts dd { margin: 0; font-weight: 600; }

.ending { position: relative; isolation: isolate; text-align: center; padding-block: clamp(110px, 16vw, 220px); overflow: hidden; }
.ending img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.ending::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at center, rgb(15 13 11 / .55), rgb(15 13 11 / .92) 75%); }
.ending .game-name { font-size: clamp(44px, 7vw, 96px); }
.ending .tagline { margin: 14px auto 30px; }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .feature, .paper-grid, .story, .panel { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr 1fr; }
  .hero-body { grid-template-columns: 1fr; }
  .phone { width: min(280px, 80%); }
}
@media (max-width: 600px) {
  body { font-size: 17px; }
  .mast { padding-block: 16px; gap: 16px; }
  .mast nav { gap: 16px; }
  .mast nav .opt { display: none; }
  .entry-row { grid-template-columns: 1fr auto; }
  .entry-row .no { grid-column: 1 / -1; }
  .facts { grid-template-columns: 1fr; }
  .hero { min-height: min(88svh, 760px); }
}
@media (prefers-reduced-motion: no-preference) {
  .feature img, .panel img { transition: filter .3s; }
  .feature a:hover img { filter: brightness(1.08); }
}