/* =========================================================
   AC-v2 Section: Landing (#landing)
   Spec: AC-v2-site-architecture-190426.md §5.1
   Theme: dark. Height: 100vh.
   Mobile-first, 1440 golden master.
   ========================================================= */

.section--landing {
  /* min-height: 100vh inherited from .section. Landing opts INTO flex column
     centring because the hero is sparse and wants to sit mid-viewport. All
     other sections use natural top-down flow so their h2s sit just below
     the top padding rather than being pushed into the middle of a screen.
     Updated 19.04.26 (str-v2-190426-unflex).

     17.05.26 (r3): horizontal viewport padding added so content always has
     breathing room from the screen edges. clamp(20px, 4vw, 60px) gives
     fluid sides that scale gently with viewport (60px max at wide
     desktops, 20px min at narrow phones). With this, the wordmark + hero
     text inside don't need breakpoint-driven width changes; they hold a
     single constant max-width and the padded container handles the rest
     until the @576 portrait swap.

     17.05.26 (r5): padding-top is now locked to 100px + s-6 instead of
     var(--nav-height) + s-6. The nav-height token is itself a clamp
     (76-100px scaled by 5.5vw + 34px) that starts shrinking just below
     1200vp. With justify-content: center on this section, a shrinking
     padding-top means the centred content rose ~3-6px between 1200 and
     900vp viewports. Using the max nav-height value as a fixed reservation
     keeps content vertically anchored across the whole horizontal range. */
  padding-top: calc(100px + var(--s-6));
  padding-bottom: calc(var(--s-8) + 72px);
  padding-left: clamp(20px, 4vw, 60px);
  padding-right: clamp(20px, 4vw, 60px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.landing__inner {
  /* Inherits the page column from .section__inner (max-width = --max-content,
     matching nav__inner). Updated 19.04.26 (str-v2-190426-nav-edge-unification).
     Individual children (wordmark 420px, headline 18ch, lead 56ch) define their
     own measures inside this column. */
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-5);
  /* 19.05.26: gentle reveal-at-destination per user direction. The
     hero content fades in as a single block at its final position
     (no translate, no stagger). Avoids the earlier staged motif-first
     entrance attempt which made the perceived blank-screen longer. */
  animation: landingReveal 480ms ease-out 100ms both;
}
@keyframes landingReveal {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .landing__inner { animation: none; }
}

/* ---------- Wordmark ---------- */
.landing__wordmark {
  /* 17.05.26 (r4): the 992-state look is the default. Wordmark holds
     at its max-width from wide desktops all the way down to 577vp where
     the portrait stack takes over. Section-level horizontal padding
     (clamp 20-4vw-60) prevents edge-bleed at narrow viewports; width:
     100% lets the wordmark fill the (padded) container until it hits
     the cap.
     r6 (17.05.26): max-width bumped 720 -> 864 (+20%) per user. The
     cap holds at the largest viewports where container has room; at
     narrower viewports the wordmark scales naturally via width: 100%
     of the (padded) container. */
  width: 100%;
  max-width: 864px;
  /* 16.05.26 (round 6): bottom margin restored to 28px after round 5
     zeroed it. With the label moved above, dropping the wordmark's
     bottom margin shrank the wordmark→headline gap from 52px (when
     the label sat between them) to 24px (flex-gap only) and the hero
     read cramped. Restoring 28px gives wordmark→headline = 52px,
     matching the new label→wordmark gap so the wordmark has symmetric
     breathing room on both sides. */
  margin: 0 auto 28px;
  position: relative;            /* anchor for the absolute colour overlay. */
}
/* 16.05.26 (round 4): hero overlay structure unchanged from round 1
   (a flex frame centring the fuchsia X-monogram over the base
   wordmark) but the glitch is now driven entirely from nav.js via
   inline styles, not a CSS keyframe. The previous keyframe approach
   was deterministic: every fire ran the same sequence of offsets,
   so the motif felt like it always came from the same place and
   ended in the same direction. JS now sets a fresh random translate
   + opacity per spark, in rapid bursts of 4-8 sparks with brief
   pauses between bursts, for a live-electrified feel. */
.landing__wordmark-stack {
  position: relative;
  display: block;
}
.landing__wordmark-base {
  display: block;
}
.landing__wordmark-base img {
  width: 100%;
  height: auto;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
.landing__wordmark-overlay-frame {
  position: absolute;
  /* 17.05.26: motif shifted ~10px right of wordmark centre using
     proportional offset so the shift scales with the wordmark across
     all breakpoints. At the 720px default wordmark width, 1.4% offset
     = ~10px; at 620px (@991) ~8.7px; at 540px (@767) ~7.6px; at 460px
     (@576) the horizontal stack is hidden (portrait lockup takes over).
     Was inset: 0 (flex-centred motif at exact wordmark centre); split
     into individual sides + asymmetric left/right to shift the centring
     anchor without disturbing the motif's intrinsic vertical alignment. */
  top: 0;
  bottom: 0;
  left: 1.4%;
  right: -1.4%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.landing__wordmark-overlay {
  display: block;
  height: 100%;
  width: auto;
  opacity: 0;
  user-select: none;
  -webkit-user-drag: none;
  /* nav.js overrides opacity + transform per spark; the base values
     above are the resting state (invisible, no offset). 19.05.26
     (later x3): introductory motifIntro animation puts the motif at
     full opacity for the page's first second, then fades back to its
     resting opacity:0 so the JS spark loop (which starts ~1100ms in)
     takes over. Pure CSS so the reveal lands the moment the page
     paints, regardless of how late the JS executes.
     r25 (19.05.26): fill-mode changed `both` -> `backwards`. CSS
     animations sit above inline styles in the cascade while they
     "own" the property, so `both` was holding the overlay at the
     100% keyframe (opacity 0) forever after the 1s intro, silently
     overriding every inline opacity write from nav.js's spark loop.
     `backwards` keeps the pre-animation value pinned to the 0%
     keyframe (so the motif paints at opacity 1 the moment the page
     renders, no flicker) but RELEASES the property once the
     animation ends, letting nav.js drive the sparks. */
  animation: motifIntro 1000ms ease-out backwards;
}
@keyframes motifIntro {
  0%   { opacity: 1; }
  33%  { opacity: 1; }   /* hold ~333ms */
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .landing__wordmark-overlay { animation: none; }
}
/* ---------- Portrait (vertical) wordmark, narrow viewports only ----------
   17.05.26 (r2): the portrait lockup sits in its own stack alongside the
   horizontal stack. Stack carries the portrait img + a motif-colour
   overlay frame positioned over the X-monogram region (top centre of
   the portrait). Default state: portrait stack hidden, horizontal stack
   visible. @media (max-width: 576px) below flips this. The portrait
   overlay reuses the .landing__wordmark-overlay class so nav.js sparks
   both motifs in unison.
   Path: SVG used directly (no rasters in-session); gzip squeezes
   path-heavy SVG to ~50-80KB on the only viewports where it loads. */
.landing__wordmark-portrait-stack {
  display: none;
  position: relative;
}
.landing__wordmark-portrait {
  display: block;
  width: 100%;
  height: auto;
}
.landing__wordmark-portrait-overlay-frame {
  position: absolute;
  top: 0;
  /* 17.05.26 (r6): reverted to centred. The horizontal shift exercise
     belonged on the horizontal lockup (.landing__wordmark-overlay-frame),
     not the portrait. Portrait motif sits centred over the X in the
     vertical lockup again. */
  left: 50%;
  /* 17.05.26 (r3): frame now sized by WIDTH (stack-relative) with a
     1:1 aspect-ratio for height, instead of % of stack height. The
     previous height: 55% approach drifted at narrow breakpoints because
     the parent stack's height resolves through the portrait img's
     intrinsic aspect chain (stack height = portrait height = stack
     width * 1.664), introducing rounding artefacts at small sizes.
     Width-based sizing locks the frame proportionally at every viewport.
     r8 (17.05.26): width bumped to 100% to fill the full X-monogram
     within the vertical lockup. Aspect-ratio 1 keeps it square. */
  width: 100%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
/* Scope the overlay sizing inside the portrait stack so it fills the
   square frame, rather than inheriting the horizontal stack's
   height:100% / width:auto rule. */
.landing__wordmark-portrait-stack .landing__wordmark-overlay {
  width: 100%;
  height: 100%;
}

/* ---------- Geographic label above the wordmark ----------
   16.05.26 (round 6): label is now permanently fuchsia accent across
   the whole line. Earlier rounds had it dark primary-text with just
   the "Creative Studio" span flicking to accent in sync with the
   spark; Caoimhín pulled that and asked for the whole line static
   accent instead. The flicker span + JS hook are still in place but
   do nothing visually (the span inherits its parent's colour). */
.landing__label {
  color: var(--accent);
  margin: 0 0 28px;
  font-size: 14px;
  letter-spacing: 0.08em;
}
.landing__label-flicker {
  /* No-op now that the whole label is accent; span retained in markup
     for any future re-wiring. */
  color: inherit;
}

/* ---------- Geographic locales (icon replaces text + hover-reveal) ----------
   17.05.26: the location names are now replaced by their icons: the
   word "Mid-Ulster" becomes the Ireland silhouette, "Raglan" becomes
   the New Zealand silhouette. Hovering or focusing a locale reveals
   the place name as a small floating tooltip below the icon (CSS
   ::after using attr(data-name)). Native title + aria-label provide
   the name to mouse-only and screen-reader users.

   Sizing: previous values were Ireland 1.3em / NZ 1.65em. 17.05.26
   bumped both by ~20% (Ireland → 1.56em, NZ → 1.98em) once the icons
   moved out of the inline-text label into the About pullquote slot as
   the only content of their paragraph, more visual real estate to play
   with. Heights follow the SVG aspect ratio (Ireland 0.756, NZ 0.696)
   so the silhouettes stay un-squashed.

   Assets: ireland-icon-accent.svg and new-zealand-icon-accent.svg
   are fuchsia-fill copies of the Caoimhín-supplied black-fill source
   SVGs. Generated by swapping .cls-1 fill #231f20 → #FF3FD1. The
   black source files stay untouched as canonical assets. */
.landing__locale {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  cursor: help;
  outline: 0;
  -webkit-tap-highlight-color: transparent;
}
.landing__locale-icon {
  display: block;
  height: auto;
}
.landing__locale--ireland .landing__locale-icon {
  width: 1.56em;
}
.landing__locale--nz .landing__locale-icon {
  width: 1.98em;
}
/* ---------- Icons-only modifier (About pullquote slot) ----------
   17.05.26: when the .landing__label paragraph contains only locale
   icons (no surrounding inline text), flip it to flex so the pair
   sits centred horizontally + middle-aligned vertically with a clear
   gap between them. Used in the About section after the studio-text
   line was pulled back up to the hero. */
.landing__label--icons-only {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.6em;
}
.landing__locale::after {
  content: attr(data-name);
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(-2px);
  background: var(--accent);
  color: #FFFFFF;
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 3px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
  z-index: 2;
}
.landing__locale:hover::after,
.landing__locale:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ---------- Headline ---------- */
.landing__headline {
  margin: 0;
  /* 17.05.26 (r5): font-size scales smoothly between 676vp and 577vp
     (40px down to 32px) so the headline tracks the logo as it shrinks
     in that range. Above 676 it caps at 40px; at 577 it lands at 32px,
     which matches the @576 token cascade for --h1 so there's no jump
     when the portrait swap fires. Replaces the previous var(--h1)
     which jumped 48 -> 40 at @767 and 40 -> 32 at @576. */
  font-size: clamp(32px, calc(32px + (100vw - 577px) * 8 / 99), 40px);
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.01em;
  /* 17.05.26 (r4): width set to 600px, matching the lead. The 992-state
     look is the default; single constant width from wide desktops down
     to the @576 portrait swap. */
  max-width: 600px;
}

/* ---------- Sub-copy / lead ---------- */
.landing__lead {
  /* 16.05.26 (round 7): top margin bumped to --s-7 (48px). Round 6
     used --s-5 (24px) which combined with the 24px flex-gap for
     48px total; Caoimhín reported not seeing the gap. The 48px
     margin now gives a 72px total gap (3x the original flex-gap
     alone), which should be clearly visible. */
  margin: var(--s-7) 0 0;
  /* 17.05.26 (r5): width 600px constant across horizontal viewports.
     font-size scales smoothly between 767vp and 577vp (20px down to
     16px) so the lead tracks the logo as it shrinks in that range.
     Above 767 it caps at 20px; at 577 it lands at 16px which matches
     what the @576 block used to enforce; the @576 font-size override
     is now removed because this clamp delivers the same value at the
     mobile boundary. */
  max-width: 600px;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(16px, calc(16px + (100vw - 577px) * 4 / 190), 20px);
  line-height: 1.65;
  color: var(--soft-text);
}

/* ---------- CTA row ---------- */
.landing__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-3) var(--s-5);
  margin-top: var(--s-3);
}

.landing__ctas .cta {
  margin: 0;                     /* reset shell margin, we control gap here */
  /* 17.05.26: icon + text alignment for the labelled CTAs. inline-flex
     so the SVG and the label centre on a shared baseline; gap of 0.5em
     gives a comfortable space between icon and word; icon sized in em
     so it tracks the CTA font-size at every viewport.
     r3 (17.05.26): all CTA decoration suppressed on landing per user.
     The shell's border-bottom accent underline is removed and the
     earlier ::after dot was dropped. CTAs read as bare icon + label;
     the shell's .cta:hover rule still flips text colour to accent so
     interaction state is preserved. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  border-bottom: none;
}
.landing__ctas .cta__icon {
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
  display: block;
}

/* ---------- Responsive step-downs ----------
   17.05.26 (r4): the @900 horizontal step-down was removed. The defaults
   now ARE the 992-state look (wordmark 720, headline + lead 600, lead
   20px). The horizontal layout is a single flat state from wide desktops
   down to @576, where the portrait stack takes over. Section-level
   horizontal padding (clamp 20-4vw-60) prevents edge-bleed at the
   narrow end of that range. */

@media (max-width: 576px) {
  /* 17.05.26 (r9): tightened the whole vertical system so content fits
     within viewport with visible padding top + bottom across typical
     mobile heights. Previous values left the lead carrying its desktop
     margin-top (var(--s-7) = 48px) which alone ate ~60-70px of vertical
     real estate, and the portrait stack cap was too tall (180px width
     -> ~300px height at default scale). Also dialled down the section
     padding so the whole stack sits in 100vh with breathing room rather
     than overflowing.
       * Section min-height switched to 100svh (small viewport height)
         so mobile browser URL bar showing / hiding doesn't cause
         refresh-vs-resize layout differences.
       * Portrait stack cap reduced 180 -> 160; min raised 100 -> 96.
       * Lead margin-top overridden from desktop --s-7 to a small fluid
         clamp matching the inner gap rhythm. */
  .section--landing {
    min-height: 100svh;
    padding-top: clamp(48px, 7vh, 100px);
    padding-bottom: clamp(32px, 5vh, 80px);
  }
  .landing__inner {
    gap: clamp(10px, 2vh, 20px);
  }
  .landing__lead {
    margin-top: clamp(12px, 2vh, 24px);
  }
  .landing__wordmark {
    width: auto;
    max-width: 100%;
  }
  .landing__wordmark-stack { display: none; }
  .landing__wordmark-portrait-stack {
    display: inline-block;
    margin: 0 auto;
    width: clamp(96px, 18vh, 160px);
  }
  .landing__headline {
    max-width: 14ch;             /* forces 2-line break on "Built to / last." at phone widths. */
    /* 17.05.26 (r6): continue scaling the headline through the portrait
       range. The default clamp lands at 32px at 577vp and stops; this
       override picks up the scale and runs from 32px at 577 down to
       24px at 320vp, so "Original work. Properly told." continues
       shrinking proportionally with the portrait logo as the viewport
       narrows. Linear segment, different slope from the horizontal-range
       segment but visually continuous at the 577 handover. */
    font-size: clamp(24px, calc(24px + (100vw - 320px) * 8 / 257), 32px);
  }
  /* 17.05.26 (r5): .landing__lead font-size override removed.
     The default rule's clamp lands at exactly 16px at <=577vp so the
     mobile font-size is already correct without this block. line-height
     1.65 is already the default too. */
  .landing__ctas {
    flex-direction: column;      /* stack per spec §5.1 */
    align-items: stretch;
    gap: var(--s-2);
    width: 100%;
    max-width: 280px;
  }
  .landing__ctas .cta {
    text-align: center;
    padding: var(--s-3) var(--s-4);
  }
}

/* 17.05.26 (r2): @400 block removed. The horizontal wordmark is hidden
   below @576 (portrait stack takes over), so the @400 max-width: 360px
   override never rendered. The portrait stack handles its own sizing
   via clamp(120px, 42vw, 180px) which already scales fluidly to 320vp. */

/* =========================================================
   Light studio decoupling (14.05.26)
   The hero is part of the light studio chrome. It was previously a
   transparent pane over the shared Eternal Tales chamber (UCB Phase
   2); it is now an opaque light section. The chamber is the
   brand-world backdrop from #our-stories onward; et-chamber.js still
   reads section geometry for its phase maths but never styles the
   hero, so an opaque background is safe. Pre-decouple recipe in
   AC-v3/archive/str-v3-140526-pre-light-studio.section-landing.css;
   the older UCB Phase 1 recipe is in
   AC-v3/archive/str-v3-240426-ucb2-pre.section-landing.css.
   ========================================================= */
.section--landing {
  background: var(--bg);
}