/* ==========================================================================
   THE THREAD OF YEARS — the firm behind the doors, ported from the approved
   audition (design-proposals/mission-v2.html).

   One orange thread is drawn down the page as you scroll. The years and the
   figures are stations on it: each node pops as the thread reaches it and its
   number counts itself up. Mission and vision stand first, as two short
   stanzas rather than one paragraph nobody finishes.

   Hardening: entrance states gated behind html.thread-js; the finished
   numbers live in the HTML so no-JS and reduced-motion readers see them
   whole; the thread is drawn by a CSS scroll timeline, never a listener.
   Every figure here is the owner's, marked as a placeholder until confirmed.
   ========================================================================== */

/* --------------------------------------------------------------------------
   THE GROUND. Owner's pick of three auditions: Cairo dusk. The band keeps the
   dark but takes its colour from the photograph beside it, indigo at the top
   left running to a warm brown at the bottom right, with a mashrabiya lattice
   drawn faintly into the corner the glass sits in. Texture rather than value,
   and Egyptian rather than generic.

   The first layer feathers the section's own colour back into the site ground
   at both edges, so the band swells out of the page instead of butting
   against the shelf above it with a visible seam.
   -------------------------------------------------------------------------- */
.thread {
  position: relative;
  z-index: 2;
  color: #f4efe4;
  padding: clamp(64px, 10vh, 110px) clamp(20px, 4vw, 48px);
  overflow: clip;
/* The glow and the feather are measured in pixels, not percentages. On a
   phone this section is close to three thousand pixels tall, so a glow set
   to 58% of it filled half the band and the feather at 9% swallowed the
   headline. Pixels behave the same at any height. */
  background:
    linear-gradient(180deg, var(--haq-ground, #061019) 0%, transparent 70px, transparent calc(100% - 70px), var(--haq-ground, #061019) 100%),
    radial-gradient(120% 460px at 88% 30px, rgba(244,159,46,.15), transparent 72%),
    linear-gradient(158deg, #091320 0%, #0c1016 52%, #170f06 100%);
}
/* The lattice, masked into the top corner rather than tiled across the band,
   so it reads as light falling through a screen and not as wallpaper. Same
   reason for the pixel height on the mask: at 66% of a phone-height section
   it covered everything down to the vision line and looked like a pattern
   somebody had chosen for its own sake. */
.thread::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(45deg, rgba(244,159,46,.11) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(-45deg, rgba(244,159,46,.11) 0 1px, transparent 1px 22px);
  -webkit-mask-image: radial-gradient(78% 300px at 98% 0, #000, transparent 72%);
  mask-image: radial-gradient(78% 300px at 98% 0, #000, transparent 72%);
}
@media (min-width: 980px) {
  .thread::before {
    -webkit-mask-image: radial-gradient(60% 520px at 94% 0, #000, transparent 72%);
    mask-image: radial-gradient(60% 520px at 94% 0, #000, transparent 72%);
  }
}
.thread::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(244,159,46,.4), transparent);
}
.thread-in { position: relative; z-index: 1; max-width: 860px; margin-inline: auto; }

/* --------------------------------------------------------------------------
   THE GLASS. The rings that stood here meant nothing to anyone who had not
   been told what they counted, so they are gone. In their place is the firm's
   own glass at dusk above the Cairo skyline, with the year written on it.

   Hard rule, from the owner: the picture fits its box. No aspect-ratio and no
   object-fit, so the frame takes the shape of the photograph rather than
   cropping it to a shape somebody guessed. height:auto is not optional here,
   because the img carries width and height attributes and a presentational
   height would stretch the card to the full 1024px of the source.
   -------------------------------------------------------------------------- */
@media (min-width: 980px) {
  .thread-in { max-width: 1080px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 330px); column-gap: clamp(30px, 4vw, 64px); align-items: start; }
  .thread-head, .thread-creed, .thread-rail, .thread-close { grid-column: 1; }
  .thread-glass { grid-column: 2; grid-row: 1 / span 4; width: 100%; max-width: none; margin: 4px 0 0; }
}
.thread-glass { position: relative; width: 100%; max-width: 360px; margin: clamp(26px, 5vh, 40px) 0 0; }
/* Between a phone and the two-column desk the card kept its phone width and
   left three hundred pixels of empty ground beside it. It grows instead. */
@media (min-width: 620px) and (max-width: 979px) { .thread-glass { max-width: 460px; } }
.thread-glass figure { position: relative; margin: 0; overflow: hidden; border-radius: 3px; }
.thread-glass figure::after { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 2px; background: var(--record-amber, #f49f2e); }
.thread-glass img { display: block; width: 100%; height: auto; }
.thread-glass figcaption { position: absolute; inset-inline: 0; inset-block-end: 0; padding: clamp(18px, 3.4vw, 26px); text-align: center; background: linear-gradient(transparent, rgba(3,9,15,.9) 52%); }
.thread-glass small { display: block; font-family: Manrope, system-ui, sans-serif; font-size: .66rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: rgba(244,239,228,.66); }
[dir="rtl"] .thread-glass small { letter-spacing: 0; }
.thread-glass b { display: block; margin-top: 5px; font-family: "Instrument Serif", Newsreader, Georgia, serif; font-weight: 400; font-size: clamp(2.3rem, 6vw, 3rem); line-height: 1; font-variant-numeric: tabular-nums; color: #f4efe4; }
.thread-glass i { display: block; margin-top: 7px; font-style: normal; font-family: Manrope, system-ui, sans-serif; font-size: .76rem; letter-spacing: .04em; color: rgba(244,239,228,.7); }
.thread-glass > p { margin: 15px 0 0; font-family: Manrope, system-ui, sans-serif; font-size: .88rem; line-height: 1.55; color: rgba(244,239,228,.7); }

/* The card opens upward as the section arrives, then its line follows.
   Without motion it simply stands there, finished. */
@media (prefers-reduced-motion: no-preference) {
  html.thread-js .thread-glass figure { clip-path: inset(0 0 100% 0); }
  html.thread-js .thread-glass > p { opacity: 0; }
  html.thread-js .thread.in .thread-glass figure { clip-path: inset(0 0 0 0); transition: clip-path 1.1s cubic-bezier(.22,.8,.28,1) .1s; }
  html.thread-js .thread.in .thread-glass > p { opacity: 1; transition: opacity .6s ease .8s; }
}
.thread-head small { display: block; font-family: Manrope, system-ui, sans-serif; font-size: .76rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--record-amber, #f49f2e); }
[dir="rtl"] .thread-head small { letter-spacing: 0; }
.thread-head h2 { margin: 14px 0 0; font-family: "Instrument Serif", Newsreader, Georgia, serif; font-weight: 400; font-size: clamp(2.2rem, 5.2vw, 4rem); line-height: 1.06; max-width: 20ch; }
.thread-head h2 em { font-style: normal; color: var(--record-amber, #f49f2e); }

/* Mission and vision: two labelled stanzas, each on its own orange edge. */
.thread-creed { display: grid; gap: 18px; margin: clamp(22px, 4vh, 34px) 0 clamp(34px, 6vh, 60px); }
@media (min-width: 720px) { .thread-creed { grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 36px); } }
.thread-creed article { border-inline-start: 2px solid rgba(244,159,46,.45); padding-inline-start: 16px; }
[dir="rtl"] .thread-glass small, [dir="rtl"] .thread-glass i { letter-spacing: 0; }
.thread-creed small { display: block; font-family: Manrope, system-ui, sans-serif; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--record-amber, #f49f2e); }
[dir="rtl"] .thread-creed small { letter-spacing: 0; }
[dir="rtl"] .thread-creed small { letter-spacing: 0; }
.thread-creed p { margin: 8px 0 0; font-family: "Instrument Serif", Newsreader, Georgia, serif; font-size: clamp(1.25rem, 2.6vw, 1.6rem); line-height: 1.32; max-width: 30ch; }
.thread-creed p em { font-style: italic; color: var(--record-amber, #f49f2e); }

/* The thread itself, drawn as the section passes: no scroll listener. */
.thread-rail { position: relative; padding-inline-start: 56px; }
.thread-rail::before { content: ""; position: absolute; inset-block: 10px; inset-inline-start: 18px; width: 2px; background: linear-gradient(var(--record-amber, #f49f2e), rgba(244,159,46,.15)); transform-origin: top; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .thread-rail::before { animation: thread-draw linear both; animation-timeline: view(); animation-range: entry 10% cover 55%; }
  }
}
@keyframes thread-draw { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.thread-st { position: relative; padding-block: clamp(20px, 3.6vh, 32px); }
/* The station node IS the icon: a ringed circle seated on the thread.
   Note the caption below carries its own class. A bare `.thread-st span`
   rule would also catch this node, kill its grid, and park every icon in
   the corner of its ring - which is exactly what happened once already. */
.thread-node { position: absolute; inset-inline-start: -56px; top: calc(50% - 19px); width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: #0c1116; border: 2px solid var(--record-amber, #f49f2e); box-shadow: 0 0 0 5px rgba(6,16,25,.9); }
.thread-node svg { display: block; width: 19px; height: 19px; stroke: var(--record-amber, #f49f2e); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.thread-num { margin: 0; font-family: "Instrument Serif", Newsreader, Georgia, serif; font-weight: 400; font-size: clamp(2.1rem, 4.8vw, 3rem); line-height: 1; font-variant-numeric: tabular-nums; }
.thread-num i { font-style: normal; color: var(--record-amber, #f49f2e); }
.thread-cap { display: block; margin: 6px 0 0; line-height: 1.5; color: rgba(244,239,228,.75); max-width: 44ch; }

.thread-close { margin: clamp(28px, 5vh, 44px) 0 0; font-family: "Instrument Serif", Newsreader, Georgia, serif; font-size: clamp(1.4rem, 3vw, 1.9rem); line-height: 1.3; max-width: 30ch; }
.thread-close em { font-style: italic; color: var(--record-amber, #f49f2e); }

/* Entrance, gated. Without the script the section stands finished and lit. */
@media (prefers-reduced-motion: no-preference) {
  html.thread-js .thread-head > *,
  html.thread-js .thread-creed article,
  html.thread-js .thread-close { opacity: 0; translate: 0 16px; }
  html.thread-js .thread.in .thread-head > *,
  html.thread-js .thread.in .thread-creed article,
  html.thread-js .thread.in .thread-close { opacity: 1; translate: 0 0; transition: opacity .55s ease, translate .6s cubic-bezier(.25,.8,.25,1); }
  html.thread-js .thread.in .thread-creed article:nth-child(2) { transition-delay: .15s; }
  html.thread-js .thread.in .thread-close { transition-delay: .3s; }
  html.thread-js .thread-st { opacity: 0; translate: 0 18px; }
  html.thread-js .thread-st .thread-node { scale: 0; }
  html.thread-js .thread-st.in { opacity: 1; translate: 0 0; transition: opacity .5s ease, translate .55s cubic-bezier(.25,.8,.25,1); }
  html.thread-js .thread-st.in .thread-node { scale: 1; transition: scale .55s cubic-bezier(.3,1.6,.4,1) .15s; }
}