/* ==========================================================================
   DuneForge company page — duneforge.studio (= .ae = .net). Owner: company agent.
   The title page of the comic: golden hour over the dunes, the sun sinking
   behind the masthead, and two doors standing in the sand: one opens onto
   noon in the dunes (DuneForge Games), the other into a photo booth (Boodka).
   Builds on tokens.css + base.css (shared, not edited here).
   ========================================================================== */

.studio {
  --st-sky-top: var(--sky-gold-bottom);  /* upper sky, warming toward sunset */
  --st-sky-low: var(--sky-gold-top);     /* golden band at the horizon */
  --st-ground: var(--dune-deep);         /* sand in the evening light */

  --bar-h: 72px;                                   /* top bar height */
  --mh: clamp(56px, min(9.4vw, 15vh), 152px);     /* masthead size: "DUNEFORGE" = 8.10em wide */
  --mast-lh: 0.8;
  --mast-lines: 1;
  --sun: calc(var(--mh) * 2.55);
  --dunes-h: calc(var(--mh) * 1.08);
  /* How far the dunes climb over the masthead. Dela Gothic One: cap height 0.75em,
     baseline 0.835em below the top of a 0.8em line box. With horizon.svg's far edge
     at y=48..64 of 260, 0.231em puts the troughs on the baseline and the crests
     about 10% up the letters, so every E keeps its bottom bar. */
  --overlap: calc(var(--mh) * 0.231);
  --portal-h: clamp(300px, 41vh, 500px);
  --portals-gap: clamp(26px, 3.4vh, 34px);         /* room for the caption that straddles the doors */
  --curtain-h: 42px;

  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--st-ground);
}

/* Focus rings: ink on light grounds, molten on the night panel */
.studio :focus-visible { outline-color: var(--ink); }

/* ---- Top bar --------------------------------------------------------------- */
.bar {
  position: absolute;
  z-index: 10;
  inset-block-start: 0;
  inset-inline: 0;
}
.bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: var(--bar-h);
}
.bar__home {
  display: inline-flex;
  border-radius: 50%;
}
.bar__home img { width: 48px; height: 48px; }
.bar .lang-switch {
  color: var(--ink);
  background: color-mix(in srgb, var(--paper) 45%, transparent);
}
/* The "ع" button's face, size and lift come from base.css (no page rule needed). */
/* Switching languages needs the i18n script */
html:not(.js) .lang-switch { visibility: hidden; }

/* ---- Title page: sky, sun, masthead, dunes ------------------------------- */
main { position: relative; z-index: 2; flex: 1 0 auto; }

.title { position: relative; }
.title__scene {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block-start: var(--bar-h);
  /* Sky above; ground colour behind the lower half of the dunes, so a sub-pixel
     gap under the dune tile can never show a light seam */
  background:
    linear-gradient(var(--st-ground), var(--st-ground)) bottom / 100% calc(var(--dunes-h) * 0.5) no-repeat,
    linear-gradient(to bottom, var(--st-sky-top), var(--st-sky-low));
}
/* The scene often ends on a fractional pixel, where the dune tile and the ground layer
   above are only partly opaque, so the sky and the sun's halftone showed through as a
   pale seam. A solid ground strip between the sun (z 0) and the dunes (z 2) closes it. */
.title__scene::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: auto 0 0;
  height: 4px;
  background: var(--st-ground);
  pointer-events: none;
}

.sun {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: calc(var(--bar-h) + var(--mh) * var(--mast-lh) * var(--mast-lines) - var(--overlap) + var(--dunes-h) * 0.4);
  width: var(--sun);
  height: var(--sun);
  margin-left: calc(var(--sun) / -2);
  margin-top: calc(var(--sun) / -2);
  pointer-events: none;
}
.sun__glow {
  position: absolute;
  inset: -60%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(255 252 245 / 0.85), rgb(255 243 223 / 0.32) 48%, rgb(255 243 223 / 0));
  will-change: transform;
}
/* The brand sun, as on the duneforge.games splash: a molten disk with an ink rim
   and ember Ben-Day dots around the rim, lit from the top-start like a sphere */
.sun__disk {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 50%;
  background: var(--molten);
  border: var(--bw) solid var(--ink);
}
.sun__disk::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.85;
  background-image: radial-gradient(circle at center, var(--ember) 0 32%, transparent 34%);
  background-size: 10px 10px;
  -webkit-mask-image: radial-gradient(circle at 34% 30%, transparent 40%, #000 82%);
  mask-image: radial-gradient(circle at 34% 30%, transparent 40%, #000 82%);
}

.masthead {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: var(--mh);
  line-height: var(--mast-lh);
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
  text-wrap: nowrap;
  white-space: nowrap;
  /* The brand mark shared with the duneforge.games splash: paper letters, ink outline */
  color: var(--paper);
  -webkit-text-stroke: calc(var(--mh) * 0.05) var(--ink);
  paint-order: stroke fill;
}
.masthead span { display: inline; }

.title__dunes {
  position: relative;
  z-index: 2;
  height: var(--dunes-h);
  margin-block-start: calc(var(--overlap) * -1);
  background: url("../art/horizon.svg") repeat-x 50% 0 / auto 100%;
}

/* Narration under the masthead: two caption boxes read in sequence */
.lead {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-block-start: calc(var(--dunes-h) * -0.38);
}
.lead .caption {
  margin: 0;
  max-width: 100%;
  font-size: clamp(1rem, 0.94rem + 0.25vw, 1.125rem);
  /* "pretty", not "balance": a balanced box keeps its full width and leaves dead space */
  text-wrap: pretty;
}
/* "Choose where to go." bridges the two doors: it straddles their top edges
   across the gutter, the way a caption box breaks a panel border */
.lead .lead__choose {
  position: absolute;
  left: 50%;
  top: calc(100% + var(--portals-gap));
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

/* ---- The two doors -------------------------------------------------------- */
.portals {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gutter);
  margin-block-start: var(--portals-gap);
}

.portal {
  min-height: var(--portal-h);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.js .portal { cursor: pointer; }

.portal__name {
  font-size: clamp(1.5rem, 1.1rem + 0.9vw, 2rem);
  line-height: 1.05;
}
.portal__text {
  margin-block: var(--s-2) var(--s-4);
  max-width: 36ch;
}

/* The whole panel is the door: hovering it presses toward the button */
.portal:hover .portal__cta {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 var(--btn-line);
}
.portal:has(.portal__cta:focus-visible) {
  outline: 3px solid var(--ink);
  outline-offset: 4px;
}

/* Door 1: DuneForge Games, noon in the dunes */
.portal--games { background: var(--noon); }
.portal--games .portal__art {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The scene lives in the upper half (sun, mirage, the wanderer's crest):
     wide, short doors crop the sand at the bottom rather than the sky */
  object-position: 50% 28%;
}
.portal__wind {
  --wind-dir: 1;
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  background: url("../art/wind.svg") 50% 50% / cover no-repeat;
}
/* A caption panel set into the bottom-start corner: the frame's own lines close it.
   72% keeps the wanderer on his crest in view on narrow desktops (1024–1279px),
   where 26.5rem alone would cover nearly the whole door. */
.portal--games .portal__body {
  position: relative;
  max-width: min(26.5rem, 72%);
  padding: var(--s-4) var(--s-5) var(--s-5);
  background: var(--paper);
  border-block-start: var(--bw) solid var(--ink);
  border-inline-end: var(--bw) solid var(--ink);
}
[dir="rtl"] .portal--games .portal__art,
[dir="rtl"] .portal__wind { transform: scaleX(-1); }
[dir="rtl"] .portal__wind { --wind-dir: -1; }

/* Door 2: Boodka, inside the photo booth */
.portal--boodka {
  --panel-line: var(--ink);
  --pad: clamp(18px, 2.2vw, 30px);
  display: grid;
  grid-template-columns: clamp(116px, 10.5vw, 160px) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "stage burst"
    "stage body";
  column-gap: clamp(16px, 2.4vw, 36px);
  padding: calc(var(--curtain-h) + 8px) var(--pad) var(--pad);
}
/* The booth camera's flash, tucked under the curtain at the top-end corner.
   It sits in its own grid row, so the text below can never run into it. */
.portal__burst {
  grid-area: burst;
  position: relative;
  z-index: 1;
  justify-self: end;
  align-self: start;
  width: clamp(96px, 19vh, 180px);
  height: auto;
  margin-block: calc(-14px - var(--curtain-h) * 0.6) -30px;
  margin-inline-end: clamp(0px, 2vw, 24px);
  pointer-events: none;
}
.portal--boodka .portal__body {
  grid-area: body;
  align-self: end;
  position: relative;
  z-index: 2;
  color: var(--paper);
}
.portal__curtain {
  position: absolute;
  z-index: 2;
  inset-block-start: 0;
  inset-inline: 0;
  height: var(--curtain-h);
  background: url("../art/booth-curtain.svg") repeat-x 0 0 / auto 100%;
}
/* The strip hangs from the curtain rail down to the bottom of the booth */
.portal__stage {
  grid-area: stage;
  position: relative;
  z-index: 1;
  align-self: stretch;
  min-height: 250px;
  margin-block: calc(-8px - var(--curtain-h) * 0.5) calc(var(--pad) * -0.6);
}
.portal__strip {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 100%;
}
[dir="rtl"] .portal__strip { transform: scaleX(-1); }
.portal__flash {
  --flash-x: 80%;
  position: absolute;
  z-index: 3;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(circle at var(--flash-x) 20%, rgb(255 252 245 / 0.95), rgb(255 252 245 / 0.45) 30%, rgb(255 252 245 / 0) 75%);
}
[dir="rtl"] .portal__flash { --flash-x: 20%; }
.portal--boodka .portal__cta { --btn-line: var(--night); }
.portal--boodka :focus-visible { outline-color: var(--molten); }

/* User-triggered moments only: a gust of wind, a camera flash */
@media (prefers-reduced-motion: no-preference) {
  .portal--games:hover .portal__wind,
  .portal--games:focus-within .portal__wind { animation: st-wind 1.5s var(--ease-out) both; }

  .portal__curtain { transition: transform var(--dur-3) var(--ease-out); }
  .portal--boodka:hover .portal__curtain,
  .portal--boodka:focus-within .portal__curtain { transform: translateY(-12px); }
  .portal--boodka:hover .portal__flash,
  .portal--boodka:focus-within .portal__flash { animation: st-flash 0.75s ease-out both; }
}
@keyframes st-wind {
  0%   { opacity: 0; translate: calc(16% * var(--wind-dir)) 0; }
  30%  { opacity: 1; }
  100% { opacity: 0; translate: calc(-16% * var(--wind-dir)) 0; }
}
@keyframes st-flash {
  0%   { opacity: 0; }
  14%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ---- Indicia: about + contact --------------------------------------------- */
.indicia {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-4) clamp(24px, 4vw, 64px);
  margin-block-start: var(--gutter);
  padding: clamp(14px, 1.6vw, 22px) clamp(20px, 2.4vw, 32px);
}
.about p { max-width: 64ch; }
.contact {
  display: grid;
  gap: var(--s-2);
  justify-items: start;
}
.contact__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-4);
}
.contact__email {
  font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.625rem);
  font-weight: 700;
  line-height: 1.2;
  text-decoration-color: var(--ember);
  unicode-bidi: isolate;
}
.contact__copy { display: none; }
.js .contact__copy { display: inline-flex; }
.contact__place { margin: 0; color: var(--ink-soft); }
/* Touch screens: the address is a full-size target (44px), like the copy button
   (.btn--small grows to 44px on coarse pointers in base.css) */
@media (pointer: coarse) {
  .contact__email { display: inline-block; padding-block: 10px; }
}

/* ---- Footer + the near dune in evening shade ------------------------------ */
.foot {
  position: relative;
  z-index: 2;
  padding-block: var(--s-3) var(--s-4);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.ground-front {
  position: absolute;
  z-index: 0;
  inset-inline: 0;
  inset-block-end: 0;
  height: clamp(120px, 18vh, 200px);
  pointer-events: none;
  background: url("../art/foreground.svg") repeat-x 50% 0 / auto 240px;
}

/* ---- Toast ---------------------------------------------------------------- */
.toast {
  position: fixed;
  z-index: var(--z-toast);
  inset-inline: 0;
  inset-block-end: 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;
  line-height: 1.3;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
  pointer-events: none;
}
.toast:empty { visibility: hidden; }
.toast.is-visible { opacity: 1; transform: none; }

/* ---- 404: the wrong door --------------------------------------------------- */
/* The page's dunes continue the picture's own horizon behind the panel, as if seen
   through a window. The panel is centred in <main> (its centre lands at about 50vh);
   the art's lilac far dune meets the panel's edge 56% down the panel, and the visible
   lilac line of horizon.svg sits 69px above --horizon. */
.studio--lost {
  --horizon: calc(50vh + 88px);
  background: linear-gradient(to bottom, var(--st-sky-top), var(--st-sky-low) var(--horizon), var(--st-ground) var(--horizon));
}
.studio--lost::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset-inline: 0;
  top: calc(var(--horizon) - 96px);
  height: 128px;
  background: url("../art/horizon.svg") repeat-x 50% 0 / auto 100%;
  pointer-events: none;
}
.lost {
  display: grid;
  place-items: center;
  padding-block: calc(var(--bar-h) + var(--s-5)) var(--s-7);
}
.lost__panel {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  width: min(100%, 860px);
}
.lost__art {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-inline-end: var(--bw) solid var(--ink);
}
[dir="rtl"] .lost__art { transform: scaleX(-1); }
.lost__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--s-4);
  padding: clamp(20px, 3vw, 36px);
}
.lost__title { font-size: var(--fs-h2); line-height: 1.02; }

/* ---- Short desktop viewports -----------------------------------------------
   Laptop screens minus the browser's toolbars (1366x768 -> about 1366x657,
   1536x864 -> 1536x730, 1280x720, 1440x700): the title page stays on one screen
   in all three languages. The masthead and the doors follow the viewport height
   instead of fixed minimums, joining the default sizes at the top of the range. */
@media (min-width: 1024px) and (max-height: 880px) {
  .studio {
    --bar-h: 60px;
    --mh: clamp(56px, min(9.4vw, 15vh, 26vh - 80px), 152px);
    --portal-h: clamp(244px, min(41vh, 84vh - 290px), 420px);
  }
  .bar__home img { width: 44px; height: 44px; }
  /* The photo strip follows the booth's height instead of propping it open */
  .portal__stage { min-height: 0; }
  .portal__burst { width: clamp(84px, 16vh, 180px); }
  .indicia { padding-block: 12px; }
  .about p { font-size: 1rem; }
  .foot { padding-block: 8px 12px; }
}
/* Below 760px tall, type and padding tighten one step too */
@media (min-width: 1024px) and (max-height: 760px) {
  .studio { --bar-h: 56px; --curtain-h: 38px; }
  .lead .caption { font-size: 1rem; }
  .portal--boodka { padding-block-end: 20px; }
  .portal__stage { margin-block-end: -12px; }
  .portal--games .portal__body { padding: 12px 20px 16px; }
  .portal__text { margin-block: 6px 12px; font-size: 1rem; line-height: 1.45; }
  .indicia { margin-block-start: 14px; padding-block: 8px; }
  .about p { font-size: 0.9375rem; line-height: 1.45; }
  .contact { gap: 2px; }
  .foot { padding-block: 6px 10px; }
  /* Arabic keeps more leading than Latin, a little less than its 1.8 default */
  :lang(ar) .portal__text,
  :lang(ar) .about p { line-height: 1.6; }
}

/* ---- Very large screens (2560x1440 and up): the title page grows with the screen
   instead of floating above a wide band of empty sand */
@media (min-width: 2200px) and (min-height: 1200px) {
  .studio {
    --container: 1680px;
    --mh: clamp(56px, min(9.4vw, 15vh), 216px);
    --portal-h: clamp(300px, 41vh, 620px);
  }
  /* A wider stage, so the taller photo strip still hangs from the curtain rail */
  .portal--boodka { grid-template-columns: clamp(160px, 9vw, 230px) minmax(0, 1fr); }
}

/* ---- Tablet: the doors stack, one per row --------------------------------- */
@media (max-width: 1023px) {
  .studio {
    --mh: min(10.6vw, 18vh);
    --portal-h: 380px;
  }
  /* Narration stacks: the second box hangs under the first, indented */
  .studio { --portals-gap: clamp(14px, 2.4vw, 22px); }
  .lead {
    align-items: flex-start;
    width: fit-content;
    max-width: min(100% - 2 * var(--page-pad), var(--container));
  }
  .lead .lead__choose {
    position: static;
    transform: none;
    white-space: normal;
    margin-block-start: -2px;
    margin-inline-start: clamp(20px, 6vw, 48px);
  }
  .portals { grid-template-columns: minmax(0, 1fr); }
  .portal--games { min-height: 0; aspect-ratio: 16 / 9; }
  .portal--boodka { grid-template-columns: 150px minmax(0, 1fr); }
  .indicia { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Phone: DUNE / FORGE on two lines, everything stacks ----------------- */
@media (max-width: 639px) {
  .studio {
    --bar-h: 64px;
    --mh: min(19vw, 96px);
    --mast-lines: 2;
    --mast-lh: 0.84;
    --sun: calc(var(--mh) * 2.6);
    --dunes-h: calc(var(--mh) * 1.2);
    --overlap: calc(var(--mh) * 0.28);
  }
  /* The sun rises right under the language switch here: an opaque pill keeps its ink rim
     from running through the buttons */
  .bar .lang-switch { background: var(--paper); }
  .masthead span { display: block; }
  /* Two-line masthead: the sun rises behind DUNE instead of hiding behind FORGE */
  .sun { top: calc(var(--bar-h) + var(--mh) * 0.95); }

  .lead { margin-block-start: calc(var(--dunes-h) * -0.3); }

  .portal--games { display: block; aspect-ratio: auto; }
  .portal--games .portal__art {
    position: relative;
    z-index: auto;
    height: auto;
    aspect-ratio: 4 / 3;
    border-block-end: var(--bw) solid var(--ink);
  }
  .portal__wind { inset: 0 0 auto; height: auto; aspect-ratio: 4 / 3; }
  .portal--games .portal__body { max-width: none; border: 0; }

  .portal--boodka {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    grid-template-areas: "stage" "body";
    padding-block-start: var(--curtain-h);
  }
  .portal__stage { min-height: 300px; margin-block: calc(var(--curtain-h) * -0.5) var(--s-4); }
  .portal__burst {
    grid-area: auto;
    position: absolute;
    inset-block-start: calc(var(--curtain-h) - 18px);
    inset-inline-end: 14px;
    width: 116px;
    margin: 0;
  }

  /* The art now sits on top of the stacked panel, so its horizon is above the centre */
  .studio--lost { --horizon: calc(50vh - 28px); }
  .lost__panel { grid-template-columns: minmax(0, 1fr); }
  .lost__art { height: auto; border-inline-end: 0; border-block-end: var(--bw) solid var(--ink); }
}