/* ==========================================================================
   THE REBUILT SECTIONS, IN ONE RHYTHM

   Four sections were designed one at a time — the two doors, the dossier
   shelf, the thread of years, and how we work — and each arrived with its own
   padding, its own eyebrow size and its own idea of how big a heading should
   be. Read in sequence that shows: the page keeps changing its mind.

   This file is loaded after all four and settles the shared decisions in one
   place, so anything ported next inherits them instead of inventing them
   again. Nothing here changes what a section does; it only makes them agree
   about the size of things.
   ========================================================================== */

:root {
  --haq-band: clamp(56px, 9vh, 100px);   /* the air above and below a section */
  --haq-gutter: clamp(20px, 4vw, 48px);  /* the distance from the screen edge */
  --haq-eyebrow: .74rem;
  --haq-ground: #061019;
}

/* One band of air between sections, so the page breathes at one tempo. */
.shelf, .thread, .work { padding-block: var(--haq-band); }
.shelf, .thread { padding-inline: var(--haq-gutter); }
.work { padding-inline: 0; }
.work-in, .work-turn, .work-foot { padding-inline: var(--haq-gutter); }

/* One column. Each section had kept the max-width it was auditioned at (980,
   860, 1100), so on a desktop their headlines started at three different
   left edges and the page read as three pages. */
.shelf-in, .thread-in {
  max-width: 1080px;
  margin-inline: auto;
}
/* How we work carries its gutter on the inner blocks rather than the section,
   because the desk behind them is full bleed, so its column has to be that
   much wider to put the text on the same left edge as the other two. */
.work-in, .work-turn, .work-foot {
  max-width: calc(1080px + var(--haq-gutter) * 2);
  margin-inline: auto;
}

/* One eyebrow. Same size, same tracking, same orange, everywhere. */
.shelf-head small,
.thread-head small,
.work-in small,
.work-turn > small {
  font-family: Manrope, system-ui, sans-serif;
  font-size: var(--haq-eyebrow);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
[dir="rtl"] .shelf-head small,
[dir="rtl"] .thread-head small,
[dir="rtl"] .work-in small,
[dir="rtl"] .work-turn > small { letter-spacing: 0; }

/* One heading scale. The thread was running a size larger than the other
   three, which made the page look like it had two different h2 styles. */
.shelf-head h2, .thread-head h2, .work-in h2 {
  font-family: "Instrument Serif", Newsreader, Georgia, serif;
  font-weight: 400;
  font-size: clamp(2.1rem, 4.8vw, 3.5rem);
  line-height: 1.04;
  text-wrap: balance;
}

/* One lead paragraph. */
.shelf-head p, .work-in > p {
  max-width: 50ch;
  line-height: 1.6;
  color: rgba(244,239,228,.75);
}

/* One button. The shelf, the thread and how-we-work each had their own pill
   with its own padding; a visitor should see the same button every time. */
.shelf-body a, .work-foot a, .tw-side .tw-go {
  display: inline-block;
  padding: 13px 26px;
  min-height: 48px;
  border-radius: 999px;
  background: var(--record-amber, #f49f2e);
  color: #1a1006;
  font-family: Manrope, system-ui, sans-serif;
  font-weight: 700;
  font-size: 1rem;
  line-height: 22px;
  text-decoration: none;
  touch-action: manipulation;
  transition: background .25s ease;
}
.shelf-body a:hover, .work-foot a:hover, .tw-side .tw-go:hover { background: #ffb85c; }
.shelf-body a:focus-visible, .work-foot a:focus-visible, .tw-side .tw-go:focus-visible {
  outline: 2px solid #f4efe4;
  outline-offset: 3px;
}

/* ==========================================================================
   ONE ACCENT.

   The two record scenes still on the home page were built on the old teal
   mark. With five rebuilt sections above them carrying the logo orange, the
   bottom of the page reads as a different site: teal rules, teal kickers, a
   teal library map and a teal line between the two enquiry routes. Everything
   below the hero is repointed to the one accent the brand actually has.

   The hero keeps its own rule, on the owner's instruction: it is not to be
   touched.
   ========================================================================== */
body[data-story-page="home"] .record-scene:not(.record-scene--hero) {
  --record-mark: var(--record-amber, #f49f2e);
}
body[data-story-page="home"] .record-scene:not(.record-scene--hero) :is(
  .record-scene__kicker,
  .record-scene__title-mobile em,
  .enquiry-process__label,
  .enquiry-process__label span,
  .thinking-node__label
) { color: var(--record-amber, #f49f2e); }

body[data-story-page="home"] .record-scene:not(.record-scene--hero) .thinking-map__routes circle,
body[data-story-page="home"] .record-scene:not(.record-scene--hero) .thinking-map__routes path {
  stroke: rgba(244,159,46,.55);
}
body[data-story-page="home"] .record-scene:not(.record-scene--hero) .thinking-node {
  border-block-start-color: rgba(244,159,46,.7);
}
body[data-story-page="home"] .record-scene:not(.record-scene--hero) .thinking-map__core {
  border-color: var(--record-amber, #f49f2e);
}
body[data-story-page="home"] .record-scene:not(.record-scene--hero) .enquiry-gateway {
  border-block-color: rgba(244,159,46,.42);
}
body[data-story-page="home"] .record-scene:not(.record-scene--hero) .enquiry-route + .enquiry-route {
  border-inline-start-color: rgba(244,159,46,.42);
}
body[data-story-page="home"] .record-scene:not(.record-scene--hero) .enquiry-process__label::before,
body[data-story-page="home"] .record-scene:not(.record-scene--hero) .enquiry-process__label::after {
  background: rgba(244,159,46,.5);
}

/* One ground colour under all of them, so no seam shows between sections.
   The thread is the exception the owner chose: it carries the Cairo dusk
   ground, which feathers back to this colour at both its edges so the band
   still joins the page cleanly. Naming it here would simply paint over it. */
.shelf, .work { background: var(--haq-ground); }