/* ============================================================
   XXVI — THE FAMILY, exploration 13

   THIS FILE IS A DELIBERATE REVERSAL OF ROUNDS 07-11.

   Those rounds shared almost nothing between concepts, because a
   shared component had twice collapsed a round into variations of
   one page. That was the right defence when the brief asked for
   different design LANGUAGES.

   This round asks for the opposite: six different IDEAS inside ONE
   language. So the language is written here, once, and every
   concept obeys it -- the type scale, the colour of an unread
   line, the size of a mark, the rhythm of the column, the weight
   of the construction behind the page. Convergence of SURFACE is
   now the requirement.

   What is still forbidden, and what each concept must therefore
   own entirely: geometry, material, motion, and the mechanism by
   which its system becomes 26. Nothing below draws anything.

   Every value here is measured off the reference, 01 - The Stroke
   (exploration 10). Where a number looks arbitrary it was taken
   from that file rather than chosen.
   ============================================================ */

/* ---------- the crossover out of the hero --------------------
   Position and ground only. What happens here is each concept's
   own answer, so this cannot express one. */
.xo{ position:relative; background:var(--ground); }

/* ---------- THE SEAL -----------------------------------------
   The reference put its construction in `position:fixed; inset:0`
   -- the whole viewport at every scroll offset, the hero
   included. Nothing may paint over the approved hero, so the
   construction lives in here instead. `isolation` keeps a
   concept's z-indexes to itself and `overflow:clip` means a held
   layer cannot paint outside this section's own box whatever the
   arithmetic does. The arithmetic is guarded too, in each page's
   heroClear(); this is the half that cannot be got wrong. */
.seal{ position:relative; isolation:isolate; overflow:clip;
  background:var(--ground); --vph:100vh; }
@supports (height:100svh){ .seal{ --vph:100svh; } }
@supports not (overflow:clip){ .seal{ overflow:hidden; } }

/* A layer held against the viewport WITHIN the seal. `sticky`
   honours the section's bounds; `fixed` would ignore them. The
   negative margin takes it back out of flow -- without it the
   held layer is a viewport-tall block that pushes the whole
   document down by one screen. */
.held{ position:sticky; inset-block-start:0; height:var(--vph);
  margin-block-end:calc(var(--vph) * -1);
  z-index:0; pointer-events:none; }
.held svg{ display:block; width:100%; height:100%; overflow:visible; }

/* the crossover's own drawing fills its box and nothing more */
.xo > svg{ position:absolute; inset:0; display:block; width:100%; height:100%; }

/* ---------- the document ------------------------------------- */
.doc{ position:relative; z-index:2; padding:0 26px; }
@media(min-width:821px){ .doc{ padding-inline:clamp(30px,4.4vw,86px); } }

/* ---------- ONE ENTRY ----------------------------------------
   The mark column is narrow on purpose. A 52px box beside a 20px
   name is the proportion that keeps the mark a piece of precision
   design rather than the object on the page. Typography is the
   subject here; the mark supports it. */
.e{ display:grid; grid-template-columns:52px minmax(0,1fr); gap:0 20px;
  align-items:start; padding-block:30px; }
@media(min-width:821px){
  .e{ grid-template-columns:96px minmax(0,1fr); gap:0 44px; padding-block:46px;
    max-width:74ch; }
}
.e .mk{ position:relative; }
.e .mk svg{ display:block; overflow:visible; }

/* An unread line is very nearly not there. Reading is what brings
   the type up, so the page has somewhere to travel FROM. */
.e h3{ margin:0; font-weight:400; font-size:20px; line-height:1.2;
  letter-spacing:-.03em; color:#4B515B; }
.e p{ margin:11px 0 0; font-size:13.5px; line-height:1.55; color:#3A3F48; }
@media(min-width:821px){
  .e h3{ font-size:30px; letter-spacing:-.034em; }
  .e p{ font-size:15.5px; line-height:1.58; margin-block-start:15px; max-width:56ch; }
}
.e.lit h3{ color:var(--ink); }
.e.lit p{ color:var(--ink-2); }

/* ---------- the subject notation -----------------------------
   For the concepts that carry it. It is a notation line in the
   composition, not a heading introducing a section: mono, small,
   wide-tracked, at the colour of a margin note. No concept may
   add a word to it. */
.subj{ position:relative; z-index:2; padding:0 26px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.3em;
  text-transform:uppercase; color:var(--ink-4);
  display:flex; flex-wrap:wrap; gap:0 14px; }
@media(min-width:821px){
  .subj{ padding-inline:clamp(30px,4.4vw,86px); font-size:10px; gap:0 22px; }
}
.subj span{ white-space:nowrap; }

/* ---------- the run-out --------------------------------------
   The reference ends with 64vh in which the construction stands
   alone. It is also what lets the thirteenth entry finish: without
   a run-out the last capability is still below the reading line at
   maximum scroll and never completes. */
.tail{ position:relative; z-index:2; height:62vh; }
.sign{ position:relative; z-index:2; padding:0 26px var(--u2);
  font-family:var(--mono); font-size:11px; letter-spacing:.42em; color:var(--ink-4); }
.sign i{ font-style:normal; color:var(--gold-deep); }
@media(min-width:821px){ .sign{ padding-inline:clamp(30px,4.4vw,86px); } }

/* ---------- the scrim ----------------------------------------
   Every concept is a document flowing under the fixed mark, and
   the scrim is what keeps both legible.

   IT WAS PAINTING OVER THE BRAND MARK. The scrim was z-index 90
   and .chrome -- which carries the XXVI mark and the language
   control -- is z-index 80, so the scrim sat ON TOP of it. Its
   first 30% is fully opaque ground, and that band is exactly
   where the mark sits, so the approved mark was being covered by
   the very thing meant to protect it. Present since round 10.

   The stacking a fixed masthead needs is: document, then scrim,
   then masthead. The scrim now sits below the chrome and above
   everything the document draws. */
body:before{
  content:""; position:fixed; inset-block-start:0; inset-inline:0;
  height:96px; z-index:70; pointer-events:none;
  background:linear-gradient(to bottom, var(--ground) 30%, rgba(8,9,11,.84) 62%, rgba(8,9,11,0));
}
@media(min-width:821px){ body:before{ height:124px; } }


/* ---------- the foot ----------------------------------------- */
.sysfoot{
  background:var(--ground); border-block-start:1px solid var(--line);
  padding:var(--u) 26px calc(var(--u2) + env(safe-area-inset-bottom,0px));
  /* below the masthead, above anything the document draws */
  position:relative; z-index:60;
}
@media(min-width:821px){ .sysfoot{ padding-inline:clamp(30px,4.4vw,86px); } }
.sysfoot .fm{
  font-family:var(--mono); font-size:12px; letter-spacing:.42em;
  color:var(--ink-3); margin-bottom:14px;
}
.sysfoot .fm i{ font-style:normal; color:var(--gold); }
.sysfoot p{
  margin:0; font-size:11.5px; line-height:1.65; color:var(--ink-4); max-width:68ch;
}

/* ------------------------------------------------------------
   THE HEBREW LINE BOX, set once, for the SCRIPT and not for any
   one composition. Hebrew set at a line-height correct for Inter
   Tight overflows its own line box by two to three pixels: lamed
   rises above the Latin ascender line, and qof, final-kaf,
   final-nun and final-tsadi drop below the descender line.
   Nothing is clipped, but the ink of one line touches the next.
   These are floors, not overrides of intent.
   ------------------------------------------------------------ */
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4{ line-height:1.34 !important; }
html[dir="rtl"] p, html[dir="rtl"] a[data-en]{ line-height:1.62 !important; }