/* The door screen and the six realm plates. Its own file because index.html is a wordless
 * frame and cannot carry a style block, and because none of this is map geometry.
 *
 * Treatment ت١ النزول, chosen in step 9: the creature is the ground the ayah stands on, and
 * the six realms are full-width bands you descend through rather than a grid of cards. The
 * door itself stays a fixed overlay that dissolves — it is not a place you can press Back
 * into — so T1's one-continuous-scroll mechanic is the one thing not carried over. */

html, body { height: auto; overflow: auto; overscroll-behavior: none; }

/* Founder order 2026-08-16: the start page is one screen and nothing on it scrolls, at every
   width. credits.html shares this stylesheet and is a document, so the promise is carried by
   a class on the one page that makes it rather than by the bare element rules above. */
html:has(.gateway), .gateway { height: 100%; overflow: hidden; overscroll-behavior: none; }

/* The six realms are not a page below the signs — they arrive in their place, on the same
   screen. So the wall is a column exactly one viewport tall: lead, the wall itself taking
   whatever is left, and the two quiet links under it. Nothing here can push past the fold. */
.realms {
  /* credits.html reuses this element as a plain document, so the base is a padded page and
     the one-screen column below is scoped to the start page. Without this the credits rows
     run to both edges of the screen and the «رجوع» link is cut off. */
  padding: max(20px, env(safe-area-inset-top)) clamp(20px, 5vw, 60px) 48px;
}
.gateway .realms {
  display: flex;
  flex-direction: column;
  height: 100svh;
  padding: 0 0 max(10px, env(safe-area-inset-bottom));
}
.realms-foot {
  display: flex;
  align-items: baseline;
  gap: clamp(18px, 3vw, 34px);
  padding: 0 clamp(20px, 5vw, 60px);
}

/* Traced 2026-07-29: styling, laying out and painting the six-slab wall behind the opaque door
   costs 434ms of long task on a 4x-throttled desktop load (recalc 664→312, layout 642→378,
   paint 151→54). The reader cannot see any of it, so it is not rendered until the door lifts. */
body.door-up .realms { content-visibility: hidden; }

.realms-lead {
  margin: 0;
  padding: max(20px, env(safe-area-inset-top)) clamp(20px, 5vw, 60px) 18px;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 14px;
  color: var(--muted);
}

/* ر٢ الجدار المنفرج, chosen 2026-07-28 over the band list: the six realms are one gapless
   wall of thin slabs stacked from the reader's right. The slab you stand at opens and its
   picture is revealed; the others narrow without ever disappearing. No width ever changes —
   every slab is 46% of the wall from the start, moved by translate alone and covered by the
   one above it, so opening is revelation, not resizing, and the browser never relays a row.
   The numbers: slab 46, resting sliver 100/6 = 16.667, open-state sliver (100−46)/5 = 10.8. */
.plates {
  position: relative;
  container-type: size;
  flex: 1 1 auto;
  /* min-height: 0 is what actually keeps the promise: without it a flex item refuses to
     shrink below its content and the wall pushes the two links off a short screen. */
  min-height: 0;
  margin: 0 clamp(14px, 2.4vw, 34px);
  overflow: hidden;
  background: #05080A;
}

/* All six are real buttons in the one interactive colour. State reads as extent, never as
   grey: the leading bar is mint on all six — the one realm you can walk is lit its whole
   height, the five unbuilt only at the top. They answer with a full pop-up, so reading as
   disabled would be a lie about what a press does. */
.plate {
  position: absolute;
  inset-block: 0;
  left: 0; /* physical geometry: the stack starts at the left edge — البحر first from the left (founder, 2026-07-29) — and walks right */
  width: 46cqw;
  padding: 0;
  background: var(--surface);
  border: 0;
  border-left: 1px solid rgba(5, 8, 10, 0.9);
  text-align: start;
  cursor: pointer;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transform: translateX(calc(1cqw * var(--x, 0)));
  /* 380ms, not the 660 this shipped with (founder, 2026-07-29: the wall felt slow). A slab
     travels about a third of the screen; past ~400ms a hand-sized move reads as lag rather
     than as weight, and six slabs moving together multiply that reading. */
  transition: transform 380ms cubic-bezier(0.24, 0.72, 0.16, 1);
  will-change: transform;
}
.plate:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.plate::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  left: 0; /* physical: the visible sliver is the slab's left end now */
  z-index: 3;
  width: 3px;
  height: 100%;
  background: var(--accent);
}
.plate-placed::before { height: 38%; opacity: 0.45; }

.plate img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.98;
  transition: opacity 380ms ease;
}
.plate-on img { opacity: 1; }

/* Ink rises from the bottom where the name sits, not from the reading edge: the visible
   sliver is the slab's right end, and ink falling from that edge would darken the one part
   of all six pictures the reader actually sees.
   Direction «veil» (founder ruling, 2026-09-01): the wash over the whole slab is gone and
   what is left is a band as tall as the words standing in it and no taller — the wall read
   as a dark list of names with a mint bar (L-03). The stops are the words' own boxes: the
   deepest visible word on a slab at rest stands 27.8% of the slab's height above its bottom
   edge, so the ink is still full-weight through 20% and out by 32%. The last third of the
   ink is where a photograph either arrives or does not. */
.plate::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(5, 8, 10, 0.9) 0%, rgba(5, 8, 10, 0.78) 20%,
              rgba(5, 8, 10, 0.1) 32%, rgba(5, 8, 10, 0) 38%);
  transition: opacity 380ms ease;
}
/* The open slab keeps its band at full weight rather than fading it: the line and ادخل
   arrive inside it, and a diluted band under new words is the old wash again by another
   name. Same four stops in the same order, so the change interpolates. */
.plate-on::after {
  opacity: 1;
  background: linear-gradient(to top, rgba(5, 8, 10, 0.9) 0%, rgba(5, 8, 10, 0.78) 20%,
              rgba(5, 8, 10, 0.1) 33%, rgba(5, 8, 10, 0) 39%);
}

/* The words hang on the slab's leading edge — the very sliver that always stays visible. */
.plate-text {
  position: absolute;
  z-index: 3;
  left: clamp(16px, 1.4vw, 24px); /* physical: hangs on the visible left sliver */
  inset-block-end: clamp(22px, 3vh, 36px);
  /* The name wraps to the narrowest possible sliver (10.8%), not the slab: a long name
     folds once and stays folded, never re-wrapping when a neighbour opens. */
  width: calc(10.8cqw - 22px);
}
.plate-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(20px, 1.9vw, 28px);
  line-height: 1.3;
  color: var(--text);
  text-shadow: 0 2px 18px rgba(5, 8, 10, 0.9);
}
/* The wall meter (founder, 2026-08-17): a quiet count under the name, in the sliver that
   always shows — and جديد rides in the accent, the one colour that means «press me». */
.plate-meter {
  display: block;
  margin-top: 6px;
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(232, 230, 227, 0.72);
  text-shadow: 0 1px 8px rgba(5, 8, 10, 0.9);
}
.plate-meter-fresh { color: var(--accent); }

.plate-line {
  display: block;
  margin-top: 10px;
  /* The line alone widens to the open slab, and it only shows then. */
  width: calc(46cqw - 52px);
  max-width: 30ch;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.85;
  color: var(--text);
  text-shadow: 0 2px 14px rgba(5, 8, 10, 0.95);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 300ms ease 90ms, transform 300ms cubic-bezier(0.22, 0.7, 0.2, 1) 90ms;
}
.plate-on .plate-line { opacity: 1; transform: none; }
/* ادخل is the one word on this wall that promises a move, so it wears the one colour — the
   same word the open sign carries, in the same shape. It arrives with the line, on the open
   slab only, and only a realm that can be walked has one at all. */
.plate-go {
  display: block;
  width: max-content;
  /* Shut, it takes no room: its box was 35px of layout on the two walkable slabs, which
     lifted their whole block off the visible sliver and cut the name and the count away on
     a phone. Every part of that box opens with the slab, so the word still fades in. */
  height: 0;
  overflow: hidden;
  margin-top: 0;
  padding-bottom: 0;
  border-bottom: 0 solid var(--accent);
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  text-shadow: 0 2px 14px rgba(5, 8, 10, 0.95);
  opacity: 0;
  transition: opacity 300ms ease 90ms;
}
.plate-on .plate-go { height: auto; margin-top: 12px; padding-bottom: 5px; border-bottom-width: 1px; opacity: 1; }
.plate-open:hover .plate-go, .plate-open:focus-visible .plate-go { border-bottom-width: 3px; }
/* The wall now anchors left, but an RTL block wider than its parent still overflows
   leftward — off the slab, clipped. The negative end margin re-hangs the line's box off
   the parent's LEFT edge so it grows rightward into the open slab instead. Desktop only:
   the phone wall lays its text out on its own terms below. */
@media (min-width: 761px) {
  .plate-line { margin-right: calc(30px - 35.2cqw); }
}

/* The wall stacks in slab by slab from the left. */
.plate { animation: slab-in 720ms cubic-bezier(0.22, 0.7, 0.2, 1) backwards; animation-delay: calc(var(--i) * 110ms); }
@keyframes slab-in {
  from { opacity: 0; transform: translateX(calc(1cqw * var(--x, 0) - 5cqw)) scale(0.985); }
}

/* On a phone the wall turns a quarter: six horizontal layers, the open one descending by
   its height. The trick is unchanged — one axis, one translate, no size ever changes. */
@media (max-width: 760px) {
  .plate {
    inset-inline: 0;
    top: 0;
    bottom: auto;
    width: auto;
    height: 46cqh;
    border-left: 0;
    border-top: 1px solid rgba(5, 8, 10, 0.9);
    transform: translateY(calc(1cqh * var(--x, 0)));
  }
  /* A slab is the whole screen wide here, so the words have no reason to keep the desktop's
     46%-of-a-slab column: the line measured 115px inside a 362px slab and broke one sentence
     into six short lines (A-07). Both physical edges are bound, because the block hangs off a
     physical left above. */
  .plate-text {
    width: auto;
    left: clamp(16px, 4vw, 24px);
    right: clamp(16px, 4vw, 24px);
    inset-block-end: auto;
    inset-block-start: clamp(16px, 2vh, 22px);
  }
  .plate-line { width: auto; max-width: 46ch; }
  .plate::before { width: 100%; height: 3px; }
  .plate-placed::before { width: 38%; height: 3px; }
  /* The visible sliver here is the layer's top, and the name lives in it — so the ink is
     heavy in a thin band right under it and recedes, or all six pictures go black. A slab
     shows a reader 116 of its 336px here, so a band measured against the whole slab covers
     the strip it is meant to sit at the foot of: the stops are the desktop's, rescaled to
     the strip, and the deepest word at rest stands at 17.6%. Open, the line arrives and the
     band grows with it. */
  .plate::after { background: linear-gradient(to bottom, rgba(5, 8, 10, 0.9) 0%, rgba(5, 8, 10, 0.78) 6%, rgba(5, 8, 10, 0.1) 20%, rgba(5, 8, 10, 0) 24%); }
  .plate-on::after { background: linear-gradient(to bottom, rgba(5, 8, 10, 0.82) 0 26%, rgba(5, 8, 10, 0.62) 34%, rgba(5, 8, 10, 0.1) 44%, rgba(5, 8, 10, 0) 50%); }
  .plate img { opacity: 1; }
  @keyframes slab-in {
    from { opacity: 0; transform: translateY(calc(1cqh * var(--x, 0) + 4cqh)) scale(0.99); }
  }
}

/* By finger the reachable end of the wall is its bottom, and البحر — the one realm you can
   actually walk — sat at the top where a thumb never lands. So on a touch screen the wall
   mirrors: the same six translates read upward from the bottom, البحر ends under the thumb,
   and each slab shows its bottom sliver instead of its top. --x is untouched; only the
   direction it is read in changes, so the wall is still gapless and nothing ever resizes.
   The mirror: slab i sits at 54cqh (= 100 − its own 46) minus its own offset. */
@media (max-width: 760px) and (pointer: coarse) {
  .plate { transform: translateY(calc(54cqh - 1cqh * var(--x, 0))); }
  .plate-text { inset-block-start: auto; inset-block-end: clamp(16px, 2vh, 22px); }
  /* The name must hug the slab's bottom sliver: in flow, the (invisible-at-rest) line under
     it pushes it up under the neighbouring slab. Reversed, the line rides above the name. */
  .plate-text { display: flex; flex-direction: column-reverse; }
  .plate-line { margin-block: 0 10px; }
  .plate-go { order: -1; }
  .plate::before { inset-block-start: auto; inset-block-end: 0; }
  .plate::after { background: linear-gradient(to top, rgba(5, 8, 10, 0.9) 0%, rgba(5, 8, 10, 0.78) 6%, rgba(5, 8, 10, 0.1) 20%, rgba(5, 8, 10, 0) 24%); }
  .plate-on::after { background: linear-gradient(to top, rgba(5, 8, 10, 0.82) 0 26%, rgba(5, 8, 10, 0.62) 34%, rgba(5, 8, 10, 0.1) 44%, rgba(5, 8, 10, 0) 50%); }
  @keyframes slab-in {
    from { opacity: 0; transform: translateY(calc(54cqh - 1cqh * var(--x, 0) + 4cqh)) scale(0.99); }
  }
}

/* Removed then restored 2026-07-29, both by founder order: the quiet ayah mark. */
.reopen {
  margin: 0;
  padding: 10px 0;
  min-height: 44px;
  background: none;
  border: 0;
  color: var(--muted);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 13px;
  cursor: pointer;
}
.reopen:hover, .reopen:focus-visible { color: var(--accent); }

/* 13px, not the 11px the corner mark wears on a map (map.css:200): vowelled Arabic at 11px
   is unreadable on a phone, and this one stands in the wall's foot rather than a corner. */
.map-credit {
  position: static;
  display: inline-flex;
  margin: 0;
  font-size: 13px;
}

/* The door's own words step aside for a card, the way every other page's do. A card is a
   modal dialog painted over the screen it was pressed on, and the screen keeps rendering
   behind it: without this the wall's six names read through the panel («الصحراء» twice on
   one screen) and a sign's ayah stands above and below the same ayah in the card. Above
   761 `.gate-text` is `display: contents`, so it has no box to fade -- the children do.
   `.map-credit` is already covered by the same rule in map.css, which this page loads. */
html.popped :is(.realms-lead, .plate-text, .reopen, .door-bism, .door-name),
html.popped .gate-text > * { opacity: 0; }
html:not(.popped) :is(.realms-lead, .plate-text, .reopen, .door-bism, .door-name),
html:not(.popped) .gate-text > * { transition: opacity 260ms ease 120ms; }

/* ---- the door itself ---- */

/* One screen, never scrolled. The base layout is the phone's: a column of head, the three
   signs taking everything left over, and يوسف 105 at the foot on its own auto margin. A wide
   screen rearranges it below — the signs become the screen and these two blocks lie over
   them (founder, 2026-08-17: the three were standing in half a viewport). */
.door {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: max(20px, env(safe-area-inset-top)) clamp(14px, 3vw, 34px)
           max(16px, env(safe-area-inset-bottom));
  background: #05080A;
  text-align: center;
  overflow: hidden;
}
.door[hidden] { display: none; }
.door > * { position: relative; }
.door-head { display: flex; flex-direction: column; align-items: center; }
/* The foot band that carried يوسف 105 under the signs is gone (founder, 2026-08-17):
   the ayah lives on the opening page, said once. */

.door-bism {
  margin: 0;
  font-family: 'Amiri Quran', serif;
  font-size: clamp(13px, 1.5vw, 17px);
  color: var(--muted);
}
.door-name {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(30px, 4.4vw, 54px);
  line-height: 1.1;
  color: var(--text);
}

/* ---- the three signs ----
   Direction أ النزول, chosen by the founder 2026-08-16: three strata cut by hairline
   horizons, each one a picture of what its ayah names. On a wide screen the strata stand
   side by side so the three are read at once; on a phone they lie back down as three bands.
   Whichever way, the block is one grid with no scroll inside it. */
.gates {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* The three signs take every pixel the head and the foot do not: they are the screen, not
     a band standing in the middle of it (founder, 2026-08-17). */
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  margin: clamp(10px, 1.6vh, 20px) 0 0;
  background: #070B0D;
  overflow: hidden;
}
.gate {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  padding: clamp(16px, 2.4vh, 30px) clamp(12px, 1.6vw, 26px);
  background: none;
  border: 0;
  /* The hairline horizon between the strata — one border, never two, so the block reads as
     one cut picture rather than three cards. */
  border-inline-start: 1px solid rgba(143, 208, 192, 0.14);
  color: var(--text);
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.gate:first-child { border-inline-start: 0; }
.gate:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }

.gate-pic {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  transition: opacity 420ms ease;
}
/* The ink is CSS, not baked into the plate: the words sit in the middle of the picture, so
   the picture is darkest exactly there and keeps its own edges.
   It never reached zero, though — 0.3 at the very top and 0.38 at the very bottom, under a
   picture already dimmed to 0.8, so الكون and أنفسكم arrived as black rectangles (mean grey
   17 and 14 of 255; A-08). Now the band is the ayah's own block and the two ends are clear
   picture: the words run 41%–59% of a full-height sign, so the ink is full through 38%–62%
   and gone by 28% and 72%. */
.gate::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(5, 8, 10, 0) 28%, rgba(5, 8, 10, 0.72) 38%,
              rgba(5, 8, 10, 0.72) 62%, rgba(5, 8, 10, 0) 72%);
}
.gate-open:hover .gate-pic, .gate-open:focus-visible .gate-pic { opacity: 0.95; }

.gate-text {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.gate-ayah {
  font-family: 'Amiri Quran', serif;
  font-size: clamp(17px, 1.85vw, 27px);
  line-height: 2.15;
  color: var(--text);
  text-shadow: 0 2px 26px rgba(5, 8, 10, 0.98);
}
.gate-ref, .gate-state {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 13px;
  color: var(--muted);
}
.gate-open .gate-state { color: var(--accent); font-weight: 600; }
/* The one explanatory line each sign carried was removed by founder order (2026-08-17):
   the ayah, its reference and the state say everything the sign says. */
/* ادخل is the one word on this screen that promises a move, so it wears the one colour. */
.gate-go {
  align-self: center;
  margin-top: 4px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--accent);
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
}
.gate-open:hover .gate-go, .gate-open:focus-visible .gate-go { border-bottom-width: 3px; }

/* A wide screen: the three signs ARE the screen — three columns from the top edge to the
   bottom one — and the head lies over them as a quiet band on its own fade so the words
   keep their contrast wherever the photograph happens to be bright. The band does not take
   presses (a sign is pressable under its whole height), but its words do. */
@media (min-width: 761px) {
  .door { display: block; padding: 0; }
  .gates { position: absolute; inset: 0; width: auto; margin: 0; }
  .door-head {
    position: absolute;
    inset-inline: 0;
    z-index: 3;
    margin: 0;
    padding-inline: clamp(14px, 3vw, 34px);
    pointer-events: none;
  }
  .door-head > * { pointer-events: auto; }
  .door-head {
    inset-block-start: 0;
    padding-block: max(20px, env(safe-area-inset-top)) clamp(30px, 6vh, 70px);
    background: linear-gradient(to bottom, rgba(5, 8, 10, 0.92) 0%, rgba(5, 8, 10, 0.6) 44%,
                rgba(5, 8, 10, 0) 100%);
  }
  /* A column with the whole height of the screen can carry its ayah at reading size rather
     than at the size a half-height band allowed. */
  .gate-ayah { font-size: clamp(19px, 2.05vw, 30px); }
  /* The three ayahs stand on one line, and so do the three references under them: each sign
     is a column of the SAME grid, not a box that centres its own contents — otherwise the one
     sign carrying ادخل rides 30 px higher than its neighbours and the block stops reading as
     one cut picture. The two 1fr rows are the air above and below. */
  .gates { grid-template-rows: 1fr repeat(4, auto) 1fr; }
  .gate {
    display: grid;
    grid-row: 1 / -1;
    grid-template-rows: subgrid;
    row-gap: clamp(5px, 1.2vh, 10px);
    padding-inline: clamp(14px, 2vw, 30px);
  }
  .gate-text { display: contents; }
  /* The words are grid items of the sign now, so each one carries its own place above the
     picture rather than inheriting one from a wrapper that no longer paints. */
  .gate-text > * { position: relative; z-index: 2; }
  .gate-go { justify-self: center; margin-top: 0; }
}

/* A phone reads the three lying down: full-width strata, the horizons horizontal. */
@media (max-width: 760px) {
  /* The phone gives the three signs everything that is left: they are the screen. */
  .gates { grid-template-columns: 1fr; grid-auto-rows: 1fr; }
  .gate { border-inline-start: 0; border-top: 1px solid rgba(143, 208, 192, 0.14); gap: 6px; }
  .gate:first-child { border-top: 0; }
  .gate-text { gap: 6px; }
  /* A sign lying down is wider than it is tall: the ayah keeps its size and loses its air. */
  .gate-ayah { line-height: 1.95; }
  /* And its words fill more of it — 26%–77% of the sign against 41%–59% standing up — so the
     band widens to them and the picture keeps the top sixth and the bottom eighth. */
  .gate::after {
    background: linear-gradient(to bottom, rgba(5, 8, 10, 0) 14%, rgba(5, 8, 10, 0.72) 24%,
                rgba(5, 8, 10, 0.72) 79%, rgba(5, 8, 10, 0) 89%);
  }
}

/* A short phone (an iPhone SE is 667 tall, an old Android 640) cannot hold three signs at
   full height, and nothing here may scroll — so the sign gives up its air before it gives up
   a letter of the ayah. Everything that carries meaning stays: the ayah, its reference, the
   state, and ادخل. The second condition is the same phone lying down — 844x390, 800x360 —
   which is short without being narrow, and where a width-only rule would have let the ayah
   clip in silence. */
@media (max-width: 760px) and (max-height: 720px), (max-height: 460px) {
  .gate { padding-block: 9px; }
  .gate-text { gap: 5px; }
  .gate-ayah { line-height: 1.85; }
  .gate-go { margin-top: 0; padding-bottom: 4px; }
}

/* ---- the first page ----
   Restored by founder order (2026-08-17): البسملة، الاسم، يوسف 105، ادخل — the opening the
   site had before the three signs took the screen. It lies over the signs as an opaque leaf
   of the same door and lifts on ادخل; every arrival opens on it, except the site's own name
   pressed elsewhere, which arrives at #signs asking for the three. */
.door-first {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.6vh, 16px);
  padding: max(20px, env(safe-area-inset-top)) clamp(20px, 6vw, 70px)
           max(20px, env(safe-area-inset-bottom));
  background: #05080A;
  text-align: center;
}
.door-first[hidden] { display: none; }
/* The words stand over the slideshow, whichever order the layers were built in. */
.door-first > :not(.door-slides) { position: relative; z-index: 1; }

/* The creature at the door (founder, 2026-08-17: back, and very subtle): a slow crossfade
   under the words, dissolving downward so the photograph reads as ground, not as a panel.
   door.js builds it only when motion is welcome. */
.door-slides {
  position: absolute;
  inset: 0;
  z-index: 0;
  filter: saturate(0.55) brightness(0.72) contrast(1.05);
  -webkit-mask-image: linear-gradient(#000 0 34%, rgba(0, 0, 0, 0.55) 62%, transparent 96%);
  mask-image: linear-gradient(#000 0 34%, rgba(0, 0, 0, 0.55) 62%, transparent 96%);
}
.door-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  opacity: 0;
  transition: opacity 1600ms ease;
}
/* Present, never loud: the round-4 door ran these at 0.62; the opening asks for a whisper. */
.door-slide.on { opacity: 0.28; }
.first-bism {
  margin: 0;
  font-family: 'Amiri Quran', serif;
  font-size: clamp(15px, 1.8vw, 20px);
  color: var(--muted);
}
.first-name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(44px, 7vw, 78px);
  line-height: 1.15;
  color: var(--text);
}
.first-ayah {
  margin: clamp(6px, 1.6vh, 16px) 0 0;
  max-width: 32ch;
  font-family: 'Amiri Quran', serif;
  font-size: clamp(17px, 2.2vw, 26px);
  line-height: 2.2;
  color: var(--text);
}
.first-ref {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 13px;
  color: var(--muted);
}
/* ادخل is the one word on this page that promises a move, so it wears the one colour. */
.first-in {
  margin-top: clamp(12px, 3vh, 28px);
  padding: 6px 4px 9px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--accent);
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  cursor: pointer;
}
.first-in:hover, .first-in:focus-visible { border-bottom-width: 3px; }
.first-in:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
/* Its own descent; and while it stands, the signs' descent below waits — otherwise the
   three would have finished arriving before anyone could watch them arrive. */
:is(.first-bism, .first-name, .first-ayah, .first-ref, .first-in) {
  animation: door-rise 900ms cubic-bezier(0.22, 0.7, 0.2, 1) both;
}
/* The name follows the بسملة now, in the descent as in the document (A-14). */
.first-name { animation-delay: 140ms; }
.first-ayah { animation-delay: 340ms; }
.first-ref { animation-delay: 440ms; }
.first-in { animation-delay: 600ms; }
.door:has(.door-first:not([hidden]))
  :is(.door-bism, .door-name, .gate) { animation-play-state: paused; }

/* النزول: the head, then the three signs one after the other. */
.door-bism, .door-name, .gate {
  animation: door-rise 900ms cubic-bezier(0.22, 0.7, 0.2, 1) both;
}
.door-name { animation-delay: 140ms; }
.gate { animation-delay: calc(340ms + var(--i, 0) * 200ms); }
@keyframes door-rise { from { opacity: 0; transform: translateY(14px); } }
/* النزول happens once. Coming back through the quiet mark is a return to words already
   said, so the descent does not replay — door.js fades the door in and the signs are
   simply there. Without this the reader who asks for the ayah waits 2.1s for it. */
.door-again .door-bism, .door-again .door-name, .door-again .gate,
.door-again .door-first > * { animation: none; }

/* The card the two shut signs answer with wears the ayah in its own face. */
.gate-pop .pop-ayah {
  margin: 0 0 14px;
  font-family: 'Amiri Quran', serif;
  font-size: clamp(17px, 2vw, 22px);
  line-height: 2.1;
  color: var(--text);
}

@media (prefers-reduced-motion: reduce) {
  .door-bism, .door-name, .gate, .door-first > * { animation: none; }
  .plate, .realms-lead { animation: none; }
  /* .door-slide joins the list because the photograph under the opening is built here now
     and only its crossfade is refused (A-09). */
  .plate, .plate img, .plate-line, .plate-go, .plate::after, .gate-pic, .door-slide { transition: none; }
  /* Matches the selector it has to beat: `html:not(.popped) .plate-text` outranks a bare one. */
  html:not(.popped) :is(.realms-lead, .plate-text, .reopen, .door-bism, .door-name),
  html:not(.popped) .gate-text > * { transition: none; }
}

/* ---- the credits page ----
   It lives here rather than in its own file because it is the site's other flat document.
   Every row is one shape: the picture it credits on a quiet line, the credit itself under it
   at the size and colour it has always had, so no photographer stands taller than another. */

.credit-list { margin: 22px 0 0; padding: 0; list-style: none; }
.credit-list li {
  padding: 13px 0;
  border-top: 1px solid var(--line);
  color: var(--text);
}
/* Which picture this row credits: the creature's name and the map it stands on. A label above
   the credit, so it is smaller and quieter than the credit — the page is for the crediting. */
.credit-what { margin: 0 0 2px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.credit-who, .credit-terms { margin: 0; font-size: 14.5px; line-height: 1.75; }
/* The link carries the source's name now, not its address, so it no longer has to be allowed
   to break mid-word: `break-all` was there to fold a 90-character URL onto three lines. */
.credit-list a { color: var(--accent); text-decoration: none; }
/* Every piece of the credit is atomic, and each carries the separator in front of it. A name
   allowed to wrap puts its two halves on two lines in RTL order, so «Ryan Hodnett» read as
   «Ryan» above «Hodnett» at opposite ends of the row; a separator left loose stayed behind on
   the line above, stranded at its far end. The line breaks between pieces instead. Measured
   2026-09-01 at 390 px: the longest of the 42 names is 39 characters and fits. */
.credit-part, .credit-who { white-space: nowrap; }
/* Past a phone the three lines have room to be one, and the column reads as a table without
   being one. Flex in an RTL row puts the first piece on the right, where the eye starts. */
@media (min-width: 760px) {
  .credit-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
  .credit-what { margin: 0; }
}
.credit-kind { color: var(--text); }
.lead, .credit-rough { color: var(--muted); font-size: 14px; max-width: 60ch; }
.credit-rough { margin-top: 26px; }
/* Keyboard focus, in the site's own voice rather than the browser's orange: the same hairline
   the trail capsule wears. Nothing else on this page told a keyboard reader where it stood. */
.credit-list a:focus-visible, .credit-back:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}
/* The way back wears the site's link voice, not the browser's blue. Measured 2026-09-01 at
   29.2 × 19.5 px — a target a thumb misses — so the word keeps its size and the box around it
   grows to 44 px; the negative margins hand the width back so no other line moves. */
.credit-back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  margin: 0 -14px 8px;
  color: var(--muted);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 13px;
  text-decoration: none;
}
.credit-back:hover, .credit-back:focus-visible { color: var(--accent); }
/* Measured 2026-08-18: pressing this moved 0.07% of a phone frame, the quietest press on the
   site, and credits.html then stood still for 531 ms before index.html painted. A colour change
   on one 13 px word is the right voice and the wrong size, so the press wears a halo the word
   cannot carry on its own. `box-shadow` spread rather than padding: it paints outside the box
   and moves no text. */
.credit-back:active {
  color: var(--accent);
  border-radius: 999px;
  box-shadow: 0 0 0 9px rgba(143, 208, 192, 0.16);
  background: rgba(143, 208, 192, 0.16);
}

/* Said to a screen reader and to no one else. The same five lines stand in map.css, which this
   page does not load; a shared stylesheet for two rules would cost every page a request. */
.a11y-summary {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%);
}

/* The shut gate's card on a phone held sideways: 360 px of height against an ayah, four
   lines of answer and a reference. The page under it cannot scroll and the card is not a
   scroller, so the answer is made to fit — the words get the width the landscape screen
   actually has, which folds the note from four lines to two. */
@media (max-height: 460px) {
  /* The picture is the first thing to go: 200 px of it against 360 px of screen leaves the
     answer nowhere to stand, and the same picture is already behind the sign underneath. */
  .gate-pop .pop-fig { display: none; }
  .gate-pop .pop-body { flex-basis: min(660px, 80vw); }
  .gate-pop .pop-ayah { line-height: 1.85; margin-bottom: 10px; }
  .gate-pop .pop-line { font-size: 17px; }
}

/* Under 760 px wide the three signs lie down in rows. A window that is short as well as
   narrow (740x360) cannot give three rows the height an ayah needs, so they stand back up. */
@media (max-width: 760px) and (max-height: 460px) {
  .gates { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; }
  .gate { border-top: 0; border-inline-start: 1px solid rgba(143, 208, 192, 0.14); }
  .gate:first-child { border-inline-start: 0; }
}

/* The same wall on a screen held sideways. The box is about 207 px tall, so the six slabs
   step past both edges and the name is carried off the wall on the outermost ones — off the
   top by finger (where the text rides above the invisible open-slab line), off the bottom by
   mouse. The line goes: it is only ever visible on the open slab, and its exact words are
   repeated in that realm's pop-up, so nothing is lost. That drops the block to the name
   alone and brings all six back inside, whichever way the layout is mirrored. */
@media (max-width: 760px) and (max-height: 460px) {
  .plate-line { display: none; }
  .plate-name { font-size: 18px; }
  /* 4px, not the 16–22px of a tall screen: the lowest slab's own bottom is the wall's bottom,
     so every pixel this name is pushed down is a pixel of it outside the wall. */
  .plate-text { inset-block-start: 4px; }
}
@media (max-width: 760px) and (max-height: 460px) and (pointer: coarse) {
  .plate-text { inset-block-start: auto; inset-block-end: 6px; }
}
/* A 320 px-tall window gives each slab a 147 px band; the name needs one more step down. */
@media (max-width: 760px) and (max-height: 360px) {
  .plate-name { font-size: 16px; }
  .plate-text { inset-block-start: 2px; }
}

/* Fog over a realm that is not open yet (founder, 2026-09-05: «اعجبني الضباب وقريبا»).
   The picture is dimmed, washed of colour and softened, and one word stands on it. A
   press nudges the slab and opens nothing. */
.plate-placed img { filter: grayscale(0.85) brightness(0.55); }
.plate-placed::after { background: linear-gradient(to top, rgba(12, 16, 20, 0.92) 0%, rgba(12, 16, 20, 0.82) 24%, rgba(12, 16, 20, 0.3) 40%, rgba(200, 210, 214, 0.2) 58%, rgba(200, 210, 214, 0.3) 100%); }
.plate-placed .plate-name { color: rgba(226, 232, 235, 0.72); }
.plate-soon {
  display: block;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--accent);
  opacity: 0.85;
}
@keyframes plate-nudge { 0%, 100% { translate: 0; } 30% { translate: -6px; } 70% { translate: 5px; } }
.plate-nudge { animation: plate-nudge 300ms ease; }
@media (prefers-reduced-motion: reduce) { .plate-nudge { animation: none; } }

/* The two shut signs of the first page wear the same fog (founder, 2026-09-05: «ونفس الامر في اول صفحة»). */
.gate-shut .gate-pic { filter: grayscale(0.85) brightness(0.55); }
.gate-shut .gate-ayah { opacity: 0.8; }
.gate-shut .gate-state { color: var(--accent); font-family: var(--font-mono); letter-spacing: 0.08em; opacity: 0.85; }
@keyframes gate-nudge { 0%, 100% { translate: 0; } 30% { translate: -6px; } 70% { translate: 5px; } }
.gate-nudge { animation: gate-nudge 300ms ease; }
@media (prefers-reduced-motion: reduce) { .gate-nudge { animation: none; } }