/* ==========================================================================
   duneforge.games — site layout, sky, hero, sections. Owner: core agent.
   One desert day told as a comic issue: the fixed .sky behind the page moves
   from noon to night as you scroll; panels sit on top, gutters show the sky.
   ========================================================================== */

:root {
  --header-h: 72px;
  --hero-max: 1680px;
  --section-gap: clamp(32px, 4vw, 56px);
  --steel: color-mix(in srgb, var(--noon) 52%, var(--lilac));   /* quenched steel: cool, between turquoise and lilac */
  --panel-pad: clamp(20px, 3vw, 40px);
  --night-deep: #07051A;   /* key-press edge of buttons on the night panel of the finale */
}
@media (max-width: 39.9375em) {
  :root { --header-h: 60px; }
}
/* Phone landscape: a slimmer bar leaves room for the splash */
@media (orientation: landscape) and (max-height: 520px) {
  :root { --header-h: 56px; }
}

html { scroll-padding-top: calc(var(--header-h) + 16px); }
body { background: var(--sky-noon-top); }

main,
.site-footer { position: relative; z-index: var(--z-page); }

/* Focus rings: base.css draws an ink line between paper rims, which works on every ground.
   On night grounds the line itself turns molten so it reads at a glance.
   (The demo and projects roots keep their own styles.) */
:is(.join__partners, .studio__text, .studio__beliefs, .contact, .process__step--ink, .site-footer, .site-header.is-night, .site-header.is-open) :focus-visible { outline-color: var(--molten); }

/* Words are never split with hyphens; sizes are chosen so the longest words fit.
   overflow-wrap only rescues extreme cases (very large text on a very narrow screen). */
h1, h2, h3, .lead, .caption, .balloon { overflow-wrap: break-word; hyphens: manual; }

.lead { font-size: var(--fs-md); line-height: 1.5; max-width: 36em; }

/* ==========================================================================
   SKY — fixed, behind everything. main.js writes the custom properties.
   ========================================================================== */
.sky {
  position: fixed;
  inset: 0;
  z-index: var(--z-sky);
  overflow: hidden;
  pointer-events: none;
  contain: layout paint;
}
.sky__grad,
.sky__hz,
.sky__forge,
.sky__stars,
.sky__tone,
.sky__glow { will-change: opacity; }

.sky__grad { position: absolute; inset: 0; }
.sky__grad--b { opacity: var(--sky-mix, 0); }
/* Hours of the day. "haze" is a warm, pale step between turquoise and gold so the sky never turns green. */
.sky__grad[data-k="noon"]   { background: linear-gradient(var(--sky-noon-top), var(--sky-noon-bottom)); }
.sky__grad[data-k="haze"]   { background: linear-gradient(color-mix(in srgb, var(--paper) 78%, var(--noon)), color-mix(in srgb, var(--paper) 55%, var(--dune))); }
.sky__grad[data-k="gold"]   { background: linear-gradient(var(--sky-gold-top), var(--sky-gold-bottom)); }
.sky__grad[data-k="sunset"] { background: linear-gradient(var(--sky-sunset-top), var(--sky-sunset-bottom)); }
.sky__grad[data-k="dusk"]   { background: linear-gradient(var(--sky-dusk-top), var(--sky-dusk-bottom)); }
.sky__grad[data-k="night"]  { background: linear-gradient(var(--sky-night-top), var(--sky-night-bottom)); }

.sky__stars {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  fill: var(--star);
  opacity: var(--stars, 0);
}

.sky__moon {
  position: absolute;
  top: 10vh;
  inset-inline-start: 11vw;
  width: clamp(40px, 4.4vw, 72px);
  height: auto;
  opacity: var(--moon, 0);
  transform: translate3d(0, var(--moon-y, 0px), 0) rotate(-20deg);
  filter: drop-shadow(0 0 14px rgba(255, 240, 194, 0.45));
  will-change: opacity, transform;
}
[dir="rtl"] .sky__moon { transform: translate3d(0, var(--moon-y, 0px), 0) rotate(20deg) scaleX(-1); }

/* The sun: a comic disk with an ink outline and halftone shading.
   Its box never changes (200px, centred on the top-left corner), so placing and sizing it
   is pure transform: main.js writes --sun-x/--sun-y and --sun-k (diameter / 200) and
   nothing ever shifts in layout. The defaults (no JS) put it behind the masthead.
   With JS it stays hidden until main.js has placed it (.is-placed). */
.sky__sun {
  position: absolute;
  left: 0;
  top: 0;
  width: 200px;
  height: 200px;
  margin: -100px 0 0 -100px;
  transform: translate3d(var(--sun-x, 50vw), var(--sun-y, 38vh), 0) scale(calc(var(--sun-k, 1.1) * var(--sun-s, 1)));
  opacity: var(--sun-o, 1);
  will-change: transform, opacity;
}
.js .sky:not(.is-placed) .sky__sun { visibility: hidden; }
/* Default size without JS: about the size main.js gives it next to the masthead */
.sky { --sun-k: 1.1; }
@media (max-width: 639px) {
  .sky { --sun-k: 0.72; }
}
.sky__glow { position: absolute; inset: -65%; border-radius: 50%; }
.sky__glow--day {
  background: radial-gradient(closest-side, rgba(255, 252, 245, 0.7), rgba(255, 252, 245, 0.22) 46%, rgba(255, 252, 245, 0) 100%);
  opacity: var(--glow-day, 1);
}
.sky__glow--set {
  background: radial-gradient(closest-side, rgba(255, 122, 31, 0.5), rgba(255, 77, 46, 0.18) 50%, rgba(255, 77, 46, 0) 100%);
  opacity: var(--glow-set, 0);
}
.sky__disk {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 50%;
  background: var(--molten);
}
/* The ink outline sits on top of the tones; its width is divided by the scale so it stays a 3px line */
.sky__disk::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: calc(var(--bw) / var(--sun-k, 1.1)) solid var(--ink);
}
.sky__tone { position: absolute; inset: 0; }
.sky__tone--gold { background: color-mix(in srgb, var(--molten) 58%, var(--ember)); opacity: var(--sun-gold, 0); }
.sky__tone--set  { background: linear-gradient(var(--ember), var(--ember-hot)); opacity: var(--sun-set, 0); }
.sky__dots {
  position: absolute;
  inset: 0;
  --ht-dot: var(--ember);
  --ht-size: calc(10px / var(--sun-k, 1.1));
  /* Ben-Day shading around the rim, highlight top-start: reads as a lit sphere */
  --ht-fade: radial-gradient(circle at 34% 30%, transparent 40%, #000 82%);
  opacity: 0.85;
}

/* Distant dune horizon: four identical silhouettes, crossfaded by time of day.
   Opaque, so the sun sinks behind it. */
.sky__defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.sky__horizon {
  position: absolute;
  inset: auto 0 0 0;
  height: clamp(56px, 11vh, 120px);
}
.sky__hz { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.sky__hz--b { opacity: var(--hz-mix, 0); }
.sky__hz[data-k="day"]   { --hz-back: color-mix(in srgb, var(--dune) 26%, var(--sky-noon-bottom)); --hz-front: color-mix(in srgb, var(--dune) 46%, var(--sky-noon-bottom)); }
.sky__hz[data-k="gold"]  { --hz-back: color-mix(in srgb, var(--dune-deep) 50%, var(--sky-gold-bottom)); --hz-front: color-mix(in srgb, var(--rose) 42%, var(--sky-gold-bottom)); }
.sky__hz[data-k="set"]   { --hz-back: color-mix(in srgb, var(--sky-sunset-bottom) 82%, var(--ink)); --hz-front: color-mix(in srgb, var(--sky-sunset-bottom) 64%, var(--ink)); }
.sky__hz[data-k="dusk"]  { --hz-back: color-mix(in srgb, var(--sky-dusk-bottom) 86%, var(--night)); --hz-front: color-mix(in srgb, var(--sky-dusk-bottom) 62%, var(--night)); }
.sky__hz[data-k="night"] { --hz-back: color-mix(in srgb, var(--sky-night-bottom) 80%, var(--night)); --hz-front: color-mix(in srgb, var(--sky-night-bottom) 45%, var(--sky-night-top)); }

/* The forge's light at the very end of the day: a low ember-to-rose glow on the horizon
   (orange spread over the night sky turns brown, so the hot colour stays near the ground) */
.sky__forge {
  position: absolute;
  inset: auto -20% 0 -20%;
  height: 34vh;
  background: radial-gradient(ellipse 58% 100% at 50% 100%, rgba(255, 77, 46, 0.5), rgba(224, 106, 134, 0.2) 50%, rgba(224, 106, 134, 0) 82%);
  opacity: var(--forge, 0);
}

/* ==========================================================================
   HEADER — floats over the noon sky, becomes a paper strip once you scroll,
   a night strip after dusk.
   ========================================================================== */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-nav);
  color: var(--ink);
  transition: color var(--dur-2) var(--ease-out);
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--paper);
  border-bottom: var(--bw) solid var(--ink);
  opacity: 0;
  transform: translate3d(0, -101%, 0);
  transition: transform var(--dur-3) var(--ease-out), opacity var(--dur-2) var(--ease-out), background-color var(--dur-3) var(--ease-out), border-color var(--dur-3) var(--ease-out);
}
.site-header.is-stuck::before,
.site-header.is-open::before { opacity: 1; transform: none; }
.site-header.is-night,
.site-header.is-open { color: var(--paper); }
.site-header.is-night::before,
.site-header.is-open::before { background: var(--night-2); border-color: var(--night-line); }

/* The bar is at least --header-h tall and grows with very large text instead of clipping */
.site-header__bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.6vw, 24px);
  min-height: var(--header-h);
  width: min(100% - 2 * var(--page-pad), var(--hero-max));
  margin-inline: auto;
}

/* The brand is the one item that may give way (the word ends in an ellipsis at huge
   text sizes), so the menu button and the language switch always stay on screen */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin-inline-end: auto;
  color: inherit;
  text-decoration: none;
  border-radius: 6px;
}
.brand__emblem { width: 40px; height: 40px; flex: none; }
.brand__word {
  overflow: hidden;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.3125rem;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.nav { display: flex; align-items: center; }
.nav__list { display: flex; align-items: center; gap: 2px; }
.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0.3em 0.85em 0.36em;
  border: var(--bw-thin) solid transparent;
  border-radius: 999px;
  font-family: var(--font-letter);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
}
/* Narrow desktops: slimmer pills, so the longest (Russian) row still fits beside the full wordmark */
@media (max-width: 80em) {
  .nav__link { padding-inline: 0.68em; }
}
.nav__link:hover { text-decoration: underline; }
.nav__link[aria-current="true"] {
  background: var(--molten);
  border-color: var(--ink);
  color: var(--ink);
  text-decoration: none;
}
.nav__foot { display: none; }

.site-header__lang { flex: none; }
.site-header .lang-switch button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.site-header.is-night .lang-switch button[aria-pressed="true"],
.site-header.is-open .lang-switch button[aria-pressed="true"] { background: var(--paper); color: var(--ink); }

.menu-btn {
  display: none;
  flex: none;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 14px 0 12px;
  background: var(--paper);
  color: var(--ink);
  border: var(--bw) solid var(--ink);
  border-radius: var(--r-btn);
  box-shadow: 0 3px 0 var(--ink);
  font-family: var(--font-letter);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  white-space: nowrap;
}
/* Keep the key-press edge when focused and add the paper rims of the base focus ring */
.menu-btn:focus-visible { box-shadow: 0 3px 0 var(--ink), 0 0 0 7px var(--paper); }
.menu-btn__icon { position: relative; display: block; flex: none; width: 20px; height: 14px; }
.menu-btn__icon i {
  position: absolute;
  inset-inline-start: 0;
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-1);
}
.menu-btn__icon i:nth-child(1) { top: 0; }
.menu-btn__icon i:nth-child(2) { top: 5.5px; }
.menu-btn__icon i:nth-child(3) { top: 11px; }
.menu-btn[aria-expanded="true"] .menu-btn__icon i:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__icon i:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] .menu-btn__icon i:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
.menu-btn[aria-expanded="true"] { background: var(--molten); }
/* Forced colours drop backgrounds, which would erase the three lines (the only visible
   part of the button on very narrow screens): draw them in the button text colour */
@media (forced-colors: active) {
  .menu-btn__icon i { forced-color-adjust: none; background: ButtonText; }
}

/* Tablet and phone: the links move into a full-screen comic page.
   The header breakpoints are in em, so they follow the reader's text size: with large
   text the desktop row collapses into the menu before it runs off the screen.
   (68.6875em = 1099px at the default 16px; main.js uses the same query.) */
@media (max-width: 68.6875em) {
  /* Visual order = DOM order (brand, Menu, languages), so Tab follows what you see */
  .js .menu-btn { display: inline-flex; }

  .js .nav {
    position: fixed;
    inset: 0;
    z-index: -1;
    display: none;
    flex-direction: column;
    gap: var(--s-6);
    padding: calc(var(--header-h) + var(--gutter) + 8px) var(--page-pad) max(28px, env(safe-area-inset-bottom));
    background: var(--night);
    color: var(--paper);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .js .site-header.is-open .nav { display: flex; }

  /* A comic page: the tiles fill their rows, with gutter-width gaps between them */
  .js .nav__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 1.3fr 1fr 1fr;
    align-items: stretch;
    gap: var(--gutter);
    flex: 1 1 auto;
    width: min(100%, 720px);
    max-height: 640px;
  }
  .js .nav__item { display: flex; min-width: 0; }
  .js .nav__item:first-child { grid-column: 1 / -1; }
  .js .nav__link {
    display: flex;
    align-items: flex-end;
    width: 100%;
    min-height: 88px;
    padding: 14px 16px 16px;
    background: var(--paper);
    color: var(--ink);
    border: var(--bw) solid var(--ink);
    border-radius: var(--r-panel);
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.375rem, 5.4vw, 2.25rem);
    line-height: 1.08;
    white-space: normal;
    overflow-wrap: break-word;
  }
  .js .nav__item:first-child .nav__link { background: var(--noon); }
  .js .nav__item:nth-child(2) .nav__link { background: var(--molten); }
  .js .nav__item:nth-child(3) .nav__link { background: var(--dune); }
  .js .nav__item:nth-child(4) .nav__link { background: var(--steel); }
  .js .nav__item:nth-child(5) .nav__link { background: var(--ember); }
  .js .nav__link[aria-current="true"] { text-decoration: underline; text-decoration-thickness: 3px; }

  .js .nav__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-4) var(--s-5);
  }
  .nav__mail { font-family: var(--font-letter); font-weight: 700; color: var(--molten); }

  /* Without JS the link row simply wraps under the logo (the header sits in the flow, see below) */
  html:not(.js) .site-header__bar { flex-wrap: wrap; padding-block: 12px; }
  html:not(.js) .nav__list { flex-wrap: wrap; }
}
/* Phone landscape: the whole menu page, mail link included, fits without scrolling */
@media (max-width: 68.6875em) and (max-height: 500px) {
  .js .nav { gap: var(--s-4); }
  .js .nav__link { min-height: 56px; padding: 10px 14px 12px; font-size: 1.375rem; }
}
@media (min-width: 40em) and (max-width: 68.6875em) {
  .js .nav__foot .lang-switch { display: none; }
}
@media (max-width: 39.9375em) {
  .site-header__lang:not(.site-header__lang--keep) { display: none; }
  .brand__emblem { width: 34px; height: 34px; }
  .brand__word { font-size: 1.125rem; }
}
/* Narrow phones (and large text): a tighter bar, so a long Close label still fits */
@media (max-width: 23.6875em) {
  .site-header__bar { gap: 8px; }
  .brand { gap: 8px; }
  .brand__word { font-size: 1rem; }
  .menu-btn { gap: 6px; padding-inline: 10px; }
}
/* Very narrow: the Menu button shows only its icon (the label stays for screen readers) */
@media (max-width: 21.1875em) {
  .menu-btn { padding-inline: 11px; }
  .menu-btn__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
}
html.menu-open { overflow: hidden; }

/* Without JS the header sits in the flow at the top of the noon sky and scrolls away
   with the page, so it never covers the hero or later sections. The language buttons
   need JS, so they are hidden. */
html:not(.js) .site-header { position: relative; }
html:not(.js) .site-header::before { opacity: 1; transform: none; }
html:not(.js) .lang-switch { display: none; }

/* ==========================================================================
   HERO — the splash page (noon). Masthead behind the dunes.
   ========================================================================== */
.hero {
  /* The whole splash scales with the masthead size (--mh-fs):
     one line DUNEFORGE (8.10em + outline) on wide screens. */
  --mh-fs: min(11vw, 22vh, 12.3rem);   /* 12.3rem keeps 8.15em inside the 1680px panel cap */
  --mh-bottom: 0.32;           /* masthead box bottom above the sand line, in em */
  --hero-pad: var(--panel-pad);
  padding-top: var(--header-h);
}
html:not(.js) .hero { padding-top: var(--gutter); }   /* the no-JS header is in the flow above it */
/* 1024-1599: the splash and the header line up with the content column below
   (a 1680px cap would overhang it by a near-miss 20px); the masthead keeps air at both ends */
@media (min-width: 1024px) and (max-width: 1599px) {
  :root { --hero-max: var(--container); }
  /* the last term keeps 8.15em inside the capped 1320px panel (about 40px of air at each end) */
  .hero { --mh-fs: min(10.6vw, 22vh, 12.3rem, var(--container) / 8.7); }
}
/* Very wide screens: a wider page and a bigger masthead, so the splash is not mostly empty sky */
@media (min-width: 2200px) {
  :root { --container: 1600px; --hero-max: 1960px; }
  .hero { --mh-fs: min(11vw, 22vh, 14.6rem); }
}
/* Portrait screens: two lines, DUNE / FORGE (FORGE = 4.50em) */
@media (max-width: 639px), (max-width: 1023px) and (orientation: portrait) {
  .hero {
    --mh-fs: min(calc((100vw - 2 * var(--page-pad) - 26px) / 4.58), 19vh, 10rem);
    --mh-bottom: 0.46;
    --sky-min: 3.2;
  }
}

.hero__panel {
  --panel-bg: transparent;
  display: flex;
  flex-direction: column;
  width: min(100% - 2 * var(--page-pad), var(--hero-max));
  margin-inline: auto;
  min-height: max(560px, calc(100vh - var(--header-h) - var(--gutter)));
  min-height: max(560px, calc(100svh - var(--header-h) - var(--gutter)));
}
/* Phone landscape: no full-screen splash, so the masthead and the headline share the first screen */
@media (orientation: landscape) and (max-height: 520px) {
  .hero__panel { min-height: 0; }
}

.hero__sky {
  position: relative;
  flex: 1 1 auto;
  min-height: calc(var(--mh-fs) * var(--sky-min, 2.3));
}
/* Above the dunes (z 2) and the issue box (z 5): a caption made tall by large text
   overlaps the sand instead of disappearing under it */
.hero__caption {
  z-index: 6;
  max-width: min(46ch, 64%);
  font-size: clamp(0.9375rem, 0.85rem + 0.35vw, 1.125rem);
}
.hero__issue {
  position: absolute;
  z-index: 5;
  inset-block-start: calc(var(--bw) * -1);
  inset-inline-end: calc(var(--bw) * -1);
  display: grid;
  justify-items: center;
  gap: 1px;
  min-width: 4.6rem;
  padding: 8px 12px 9px;
  background: var(--paper);
  color: var(--ink);
  border: var(--bw-thin) solid var(--ink);
  font-family: var(--font-letter);
  line-height: 1.1;
  text-align: center;
}
.hero__issue-no { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.05; white-space: nowrap; }
.hero__issue-line { font-size: 0.8125rem; font-weight: 700; white-space: nowrap; }
/* Arabic letters carry dots above and below: more leading, so "دبي" does not touch "2026" */
:lang(ar) .hero__issue { gap: 2px; line-height: 1.45; }
:lang(ar) .hero__issue-line { font-size: 0.875rem; }

.hero__masthead {
  position: absolute;
  z-index: 1;
  inset-inline: 0;
  bottom: calc(var(--mh-fs) * var(--mh-bottom));
  width: max-content;
  margin-inline: auto;
  font-family: "Dela Gothic One", "Dela Fallback", "Arial Black", sans-serif;
  font-weight: 400;
  font-size: var(--mh-fs);
  line-height: 0.78;
  letter-spacing: 0;
  color: var(--paper);
  -webkit-text-stroke: calc(var(--mh-fs) * 0.05) var(--ink);
  paint-order: stroke fill;
  white-space: nowrap;
  user-select: none;
  will-change: transform;
}
.hero__masthead span { display: inline; }
@media (max-width: 639px), (max-width: 1023px) and (orientation: portrait) {
  .hero__masthead { line-height: 0.86; text-align: center; }
  .hero__masthead span { display: block; }
}

.hero__ground { position: relative; z-index: 2; }
/* Sand under the copy; also hides the far layers as they sink on scroll */
.hero__ground::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--dune);
}
.hero__layer { position: absolute; pointer-events: none; will-change: transform; }
.hero__layer svg { width: 100%; height: auto; max-width: none; }

/* Distant skyline, behind the masthead (z 0 under its z 1): the letters stay clean and only
   the tower tops rise over DUNE as a mirage. It sinks slower than the masthead on scroll. */
.hero__mirage {
  z-index: 0;
  bottom: calc(var(--mh-fs) * 0.55);
  inset-inline-start: calc(30% - var(--mh-fs) * 2.1);
  width: calc(var(--mh-fs) * 4.2);
  opacity: 0.75;
}
/* Mid dunes stretch with the panel; their height follows the masthead */
.hero__mid {
  z-index: 2;
  left: 0;
  right: 0;
  bottom: calc(100% - 2px);
  height: calc(var(--mh-fs) * 0.8);
}
.hero__mid svg { height: 100%; }
/* Front ridge keeps its proportions; wider than the panel on narrow screens (cropped at the start side) */
.hero__front {
  position: absolute;
  z-index: 3;
  top: 0;
  inset-inline-end: 0;
  width: max(100%, calc(var(--mh-fs) * 9.1));
  transform: translate3d(0, -68.1818%, 0);   /* viewBox y=300 of 440 sits on the sand line */
  pointer-events: none;
}
.hero__front svg { width: 100%; height: auto; max-width: none; }
[dir="rtl"] .hero__front svg,
[dir="rtl"] .hero__mid svg,
[dir="rtl"] .hero__mirage svg { transform: scaleX(-1); }

.hero__copy {
  position: relative;
  z-index: 4;
  max-width: 58rem;
  padding: clamp(8px, 1.4vw, 20px) var(--hero-pad) clamp(26px, 3.4vw, 44px);
}
.hero__title {
  max-width: 16em;
  font-size: clamp(2rem, 1.15rem + 3.15vw, 4.25rem);
  line-height: 1.04;
}
.hero__sub {
  margin-top: clamp(12px, 1.4vw, 20px);
  max-width: 34em;
  font-size: clamp(1.0625rem, 0.95rem + 0.45vw, 1.3125rem);
  line-height: 1.45;
  text-wrap: balance;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-4);
  margin-top: clamp(18px, 2.2vw, 30px);
}
@media (max-width: 639px) {
  .hero__title { font-size: clamp(1.75rem, 8.1vw, 2.25rem); }
  /* «комикс-новеллы,» (10.4em, held together by a word joiner) must fit the title box,
     which is the viewport minus 78px on phones */
  :lang(ru) .hero__title { font-size: clamp(1.375rem, calc(9.346vw - 7.3px), 2.25rem); }
  .hero__caption { max-width: min(26ch, 58%); }   /* clears the issue box in the other corner */
}

/* ==========================================================================
   SECTIONS — each one a comic page of panels; gutters show the sky
   ========================================================================== */
.section { position: relative; padding-block: var(--section-gap); }
.page {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
}
.page > * { grid-column: 1 / -1; min-width: 0; }

/* Sky interludes: open sky and a narration box, to notice the time passing */
.interlude {
  position: relative;
  z-index: var(--z-page);
  display: flex;
  align-items: center;
  min-height: clamp(110px, 20vh, 220px);
}
.interlude .wrap { display: flex; }
.interlude--sunset .wrap { justify-content: flex-end; }
.interlude--night .wrap { justify-content: center; }
.interlude__caption { font-size: clamp(1rem, 0.92rem + 0.4vw, 1.25rem); }
/* The long beat of the day: a little taller than the others, so the sun can be seen
   sinking into the dunes under the caption */
.interlude--sunset { min-height: clamp(220px, 40vh, 440px); }

/* ---- Section titles lettered straight onto the sky (no title box) ----
   The four section openings alternate: How it works and From sand to steel are lettered
   on the sky, the demo and projects heads are paper title panels. */
.sky-head { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-5); }
.sky-head > * { max-width: 100%; }   /* with very large text a long word breaks instead of running off the page */
.sky-head--dusk { color: var(--paper); }
/* Without JS the sky stays at noon, so the dusk title is lettered in ink like the others */
html:not(.js) .sky-head--dusk { color: var(--ink); }

/* ---- Format (afternoon): the title on the sky, then a 4-panel strip ---- */
/* One line wherever it fits; otherwise it breaks only between the sentences (no-break
   spaces hold each sentence together), so a word is never split */
.format__head h2 { max-width: 100%; text-wrap: balance; }
.format__strip {
  container-type: inline-size;
  grid-template-columns: 1.35fr 1fr 1.2fr 1fr;
  align-items: stretch;
  margin-top: var(--s-4);   /* keeps the title's descenders clear of the strip */
}
.format__panel { display: flex; flex-direction: column; min-width: 0; }
.format__caption { font-size: clamp(1rem, 0.92rem + 0.3vw, 1.125rem); }
.format__art {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--noon-haze);
  border-bottom: var(--bw) solid var(--ink);
}
/* From tablets up, every art in a tier has the same height, so the ink line under the art
   runs straight across the strip: 4:3 of the average panel width in the tier
   (object-fit keeps the subjects; without container units the art simply stays 4:3) */
@media (min-width: 640px) {
  .format__art { aspect-ratio: auto; height: calc((100cqi - var(--gutter)) * 0.375); }
}
@media (min-width: 1200px) {
  .format__art { height: calc((100cqi - 3 * var(--gutter)) * 0.1875); }
}
.format__text {
  padding: clamp(16px, 1.6vw, 22px) clamp(16px, 1.8vw, 24px) clamp(20px, 2.2vw, 28px);
  font-size: 1.0625rem;
  line-height: 1.5;
}

/* ---- Section heads around the demo and projects modules ---- */
.section-head { margin-bottom: var(--gutter); }
.section-head__panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); align-content: start; }
.section-head__panel--start { grid-column: 1 / span 7; }
.section-head__panel--end { grid-column: 6 / span 7; }
.noscript-note { margin-top: var(--gutter); }
.noscript-note a { color: var(--oasis-ink); }

/* ---- Process (dusk): numbered sequence heating sand -> ink -> fire -> cool steel ----
   The title is lettered in paper on the dusk sky; the lead is its narration box */
.process__head { margin-bottom: var(--s-2); }
.process__caption { max-width: min(40ch, 100%); font-size: clamp(1rem, 0.92rem + 0.4vw, 1.25rem); }
.process__steps {
  display: grid;
  grid-template-columns: 1fr 1fr 1.22fr 1fr;
  gap: var(--gutter);
  counter-reset: step;
}
.process__step {
  counter-increment: step;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-width: 0;
  padding: clamp(18px, 2vw, 28px);
}
.process__step::before {
  content: counter(step);
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 1.6rem + 2.4vw, 4.25rem);
  line-height: 0.9;
}
.process__art {
  width: min(100%, 210px);
  height: auto;
  aspect-ratio: 1;
  align-self: center;
  margin-block: 0 var(--s-2);
}
.process__step h3 { font-size: var(--fs-h3); }
.process__step p { font-size: 1.0625rem; line-height: 1.5; }
.process__step--sand  { --panel-bg: var(--dune); }
.process__step--ink   { --panel-bg: var(--ink); --panel-fg: var(--paper); --panel-line: var(--night-line); }
.process__step--fire  { --panel-bg: var(--ember); }
.process__step--steel { --panel-bg: var(--steel); }

/* ---- Studio (night): establishing shot, text, beliefs as balloons ---- */
.studio__art { margin: 0; }
.studio__art img {
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;           /* a touch wider than the art: trims empty sky, keeps the skyline */
  object-fit: cover;
  object-position: 50% 62%;
  background: var(--night);
}
/* RTL: the establishing shot mirrors like the other scenes, so its moon moves to the top-left,
   out of the way of the caption in the top-start (right) corner */
[dir="rtl"] .studio__art img { transform: scaleX(-1); }
/* Short screens: a lower shot, so a jump to #studio also shows the heading */
@media (min-width: 640px) and (max-height: 900px) {
  .studio__art img { max-height: 48svh; }
}
.studio__text { grid-column: 1 / span 7; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); align-content: center; }
.studio__text p { max-width: 38em; }
.studio__beliefs { grid-column: 8 / span 5; }
.studio__beliefs-title {
  display: inline-block;
  font-family: var(--font-letter);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
}
.beliefs { display: grid; gap: 30px; margin-top: var(--s-6); padding-bottom: 18px; }
/* Balanced lines: no balloon ends on a single word */
.beliefs__item { justify-self: start; max-width: 30ch; text-wrap: balance; }
.beliefs__item:nth-child(even) { justify-self: end; }

/* ---- Join (night): the creators get the bright molten panel, with the tools of the four
   roles drawn at its foot; the partners get a quieter night panel ---- */
.join__creators {
  grid-column: 1 / span 7;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: end;
}
.join__creators-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-4);
  justify-items: start;
  align-content: center;
  align-self: stretch;
  padding: var(--panel-pad);
}
.join__roles { display: grid; gap: 6px; margin-block: var(--s-2) var(--s-3); }
.join__roles li { position: relative; padding-inline-start: 28px; font-weight: 600; }
.join__roles li::before {
  content: "";
  position: absolute;
  inset-inline-start: 2px;
  top: 0.42em;
  width: 15px;
  height: 15px;
  background: var(--ink);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}
.join__art {
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
}
[dir="rtl"] .join__art { transform: scaleX(-1); }   /* the hill slopes down towards the copy */
.join__partners {
  grid-column: 8 / span 5;
  align-self: end;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-4);
  justify-items: start;
}
.join__partners h3 { font-size: var(--fs-h3); }
.join__partners p { font-size: var(--fs-md); line-height: 1.45; }

/* Buttons on night panels keep their key-press edge: the edge turns night instead of ink */
.panel--night .btn { --btn-line: var(--night); }
.contact .btn { --btn-line: var(--night-deep); }   /* the finale panel is already var(--night) */

/* Arabic display type (Lalezar) runs small next to the Readex text: lift the small headings */
:lang(ar) .process__step h3,
:lang(ar) .join__partners h3 { font-size: calc(var(--fs-h3) * 1.3); }

/* ---- Contact (deep night): the forge finale ---- */
.section--contact { padding-bottom: 0; }
.contact {
  --panel-bg: var(--night);
  min-height: clamp(560px, 76vh, 760px);
}
.contact__copy {
  container-type: inline-size;   /* the e-mail is sized from this column (cqi) */
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-5);
  justify-items: start;
  align-content: start;
  max-width: 46rem;
  padding: clamp(28px, 4.2vw, 64px);
}
/* Desktop: the copy keeps to its own column, clear of the forge and its SFX, even with large text */
@media (min-width: 1024px) {
  .contact__copy { max-width: min(46rem, 58%); }
}
.contact__copy h2 { max-width: min(12em, 100%); }
/* Start-aligned items never grow wider than their column (very large text breaks long words instead) */
.join__creators-body > *,
.join__partners > *,
.contact__copy > *,
.lost__copy > * { max-width: 100%; }
/* One line whenever it fits (it is sized to the column, about 11.6em wide); with large text or
   extra letter spacing it breaks after the @ (a <wbr> in the markup), and as a last resort anywhere */
.contact__email {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.25rem, calc((100vw - 2 * var(--page-pad) - 2 * clamp(28px, 4.2vw, 64px) - 12px) / 11.6), 3.5rem);
  font-size: clamp(1rem, 100cqi / 11.6, 3.5rem);
  line-height: 1.15;
  color: var(--molten);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.16em;
  overflow-wrap: anywhere;
}
.contact__email:hover { color: var(--paper); }
.contact__actions { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-4); }
.contact__copy-btn { display: none; }
.js .contact__copy-btn { display: inline-flex; }
.contact__place { font-family: var(--font-letter); font-weight: 600; color: color-mix(in srgb, var(--paper) 82%, var(--night)); }

/* The forge art has a transparent sky, so it sits in the bottom-end corner, under the copy's reach.
   Everything placed on the art uses percentages of its 900x600 box, measured from the inline end:
   in RTL the art mirrors (see below), so the same offsets land on the same spot. */
.contact__forge {
  position: absolute;
  z-index: 1;
  inset-block-end: 0;
  inset-inline-end: 0;
  width: min(60%, 820px);
}
.contact__art { width: 100%; height: auto; aspect-ratio: 3 / 2; }
/* RTL: the hearth sits towards the copy and the anvil at the outer edge, so the copy and the SFX never meet */
[dir="rtl"] .contact__art { transform: scaleX(-1); }
.contact__embers {
  position: absolute;
  inset: -70% 0 0 0;
  width: 100%;
  height: 170%;
  max-width: none;
  pointer-events: none;
}
/* CLANG! bursts out of the strike on the anvil (impact at 692,363 in the art), lettered
   above the raised hammer and its swing arcs (art y 221 and below) so the strike stays visible */
.contact__sfx {
  position: absolute;
  z-index: 3;
  inset-inline-end: 3%;
  top: 19%;
  font-size: clamp(1.625rem, 0.9rem + 2.6vw, 3.25rem);
  white-space: nowrap;
  -webkit-text-stroke-color: var(--night);
  transform: rotate(-8deg);
  pointer-events: none;
}
[dir="rtl"] .contact__sfx { transform: rotate(8deg); }
/* The anvil is a button: striking it replays the sparks (they also burst, for a few seconds,
   when the forge comes into view). It covers the hammer, the bar and the anvil. */
.contact__strike {
  position: absolute;
  z-index: 2;
  inset-inline-end: 15%;
  top: 44%;
  display: none;
  width: 24%;
  height: 32%;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.js .contact__strike { display: block; }
.contact__strike:focus-visible { outline-offset: 4px; }
/* On hover a faint molten ring shows that the anvil can be struck */
.contact__strike:hover { box-shadow: inset 0 0 0 2px rgba(255, 210, 94, 0.45), 0 0 24px rgba(255, 210, 94, 0.18); }

/* ==========================================================================
   FOOTER — "To be continued…" pinned to the last panel
   ========================================================================== */
.site-footer {
  padding-bottom: clamp(36px, 5vw, 64px);
  color: var(--paper);
}
/* Without JS the sky stays at noon: the footer brings its own night */
html:not(.js) .site-footer { background: var(--night); }
.site-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-6) var(--s-6);
}
.site-footer__tbc {
  grid-column: 1 / -1;
  justify-self: end;
  position: relative;
  z-index: 2;
  margin-top: -1.15em;
  margin-inline-end: clamp(16px, 3vw, 40px);
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
}
.site-footer__sites { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-8); }
.site-footer__sites li { display: grid; gap: 2px; }
.site-footer__sites a {
  font-family: var(--font-letter);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--paper);
}
.site-footer__sites a:hover { color: var(--molten); }
/* Secondary lines: 82% paper keeps 4.5:1 even over the brightest part of the forge glow */
.site-footer__sites span { font-size: 0.9375rem; color: color-mix(in srgb, var(--paper) 82%, var(--night)); }
.site-footer__lang { justify-self: end; }
.site-footer .lang-switch button[aria-pressed="true"] { background: var(--paper); color: var(--ink); }
.site-footer__copy { grid-column: 1 / -1; font-size: 0.9375rem; color: color-mix(in srgb, var(--paper) 82%, var(--night)); }

/* Touch screens: 44px targets for the small text links */
@media (pointer: coarse) {
  .site-footer__sites a,
  .nav__mail { display: inline-flex; align-items: center; min-height: 44px; }
  .contact__email { padding-block: 9px; }
}

/* ---- Toast ---- */
.toast {
  position: fixed;
  z-index: var(--z-toast);
  inset-inline: 0;
  bottom: max(20px, env(safe-area-inset-bottom));
  width: max-content;
  max-width: calc(100% - 32px);
  margin-inline: auto;
  padding: 0.55em 1em 0.6em;
  background: var(--molten);
  color: var(--ink);
  border: var(--bw-thin) solid var(--ink);
  font-family: var(--font-letter);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.3;
  text-align: center;
  opacity: 0;
  transform: translate3d(0, 140%, 0);
  transition: transform var(--dur-3) var(--ease-pop), opacity var(--dur-2) var(--ease-out);
  pointer-events: none;
}
.toast.is-visible { opacity: 1; transform: none; }

/* ==========================================================================
   404 — lost footprints (compact header, art panel + text panel)
   ========================================================================== */
.lost {
  display: grid;
  align-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--header-h) + var(--gutter)) 0 var(--section-gap);
}
html:not(.js) .lost { padding-top: var(--gutter); }   /* the no-JS header is in the flow */
.lost__art { grid-column: 1 / span 7; margin: 0; }
.lost__art img { width: 100%; height: 100%; aspect-ratio: 8 / 5; object-fit: cover; }
.lost__copy {
  grid-column: 8 / span 5;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-5);
  align-content: center;
  justify-items: start;
}
.lost__copy h1 { font-size: var(--fs-h2); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
/* Up to 1199: How it works becomes two tiers (wide + narrow, then narrow + wide);
   four columns would leave a 160px text measure at 1024 */
@media (max-width: 1199px) {
  .format__strip { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .format__panel:nth-child(1), .format__panel:nth-child(4) { grid-column: span 7; }
  .format__panel:nth-child(2), .format__panel:nth-child(3) { grid-column: span 5; }
}

@media (max-width: 1023px) {
  .section-head__panel--start { grid-column: 1 / span 10; }
  .section-head__panel--end { grid-column: 3 / span 10; }

  .process__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .studio__text, .studio__beliefs { grid-column: 1 / -1; }
  .studio__art img { aspect-ratio: 16 / 9; }
  .join__creators, .join__partners { grid-column: 1 / -1; }

  .lost__art, .lost__copy { grid-column: 1 / -1; }

  /* Contact: the forge comes into the flow under the copy */
  .contact { display: flex; flex-direction: column; min-height: 0; }
  .contact__forge { position: relative; align-self: flex-end; width: min(92%, 720px); margin-top: calc(var(--s-6) * -1); }
}

/* Phone landscape on the 404: art and copy side by side, so the way back is on the first screen */
@media (orientation: landscape) and (max-height: 520px) {
  .lost { padding-block-end: var(--gutter); }
  .lost__art { grid-column: 1 / span 6; }
  .lost__copy { grid-column: 7 / span 6; }
  .lost__copy h1 { font-size: var(--fs-h3); }
}

@media (max-width: 639px) {
  :root { --panel-pad: 20px; }
  .section-head__panel--start,
  .section-head__panel--end { grid-column: 1 / -1; }
  .format__strip { grid-template-columns: minmax(0, 1fr); }
  .format__panel:nth-child(n) { grid-column: 1 / -1; }

  /* Process on phones: numeral and art share the first row */
  .process__steps { grid-template-columns: minmax(0, 1fr); }
  .process__step {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 120px;
    grid-template-areas: "num art" "title art" "text text";
    column-gap: var(--s-4);
    row-gap: var(--s-2);
    align-items: start;
  }
  .process__step::before { grid-area: num; }
  .process__art { grid-area: art; width: 120px; margin: 0; justify-self: end; }
  .process__step h3 { grid-area: title; align-self: end; }
  .process__step p { grid-area: text; }

  .beliefs { gap: 28px; }
  .beliefs__item { max-width: 92%; }

  /* Join on phones: the copy, then the tools as a band across the foot of the panel */
  .join__creators { grid-template-columns: minmax(0, 1fr); }

  .contact__forge { width: 100%; margin-top: 0; }
  .contact__sfx { top: 12%; }
  .site-footer__inner { grid-template-columns: minmax(0, 1fr); }
  .site-footer__lang { justify-self: start; }
}

/* ==========================================================================
   REDUCED MOTION — colours still follow the scroll; nothing travels.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .contact__embers,
  .js .contact__strike { display: none; }
  .hero__layer, .hero__masthead { will-change: auto; }
}