/* ============================================================
   Arche Advisory — Base: reset, typography, primitives
   v1.1 — dark ground
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  /* clears the sticky nav: 22px lockup x 2.73 + 20px padding ≈ 80px */
  scroll-padding-top: 100px;
  -webkit-text-size-adjust: 100%;
  background: var(--ground-1);
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--w-regular);
  line-height: var(--lh-body);
  color: var(--fg-2);
  background: var(--ground-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }

::selection { background: var(--sage-bright); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--sage-bright);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* ------------------------------------------------------------
   Layout
------------------------------------------------------------ */

/* The reading column. Wide, but not the full 2560px band — a
   1920px measure keeps headings and lead paragraphs from running
   the width of an ultrawide display. */
.wrap {
  max-width: var(--maxw-content);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

/* Full-bleed band, for elements meant to use the whole screen. */
.wrap-wide {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.prose { max-width: var(--maxw-prose); }

.section { padding-block: var(--sec-y); }

.ground-1 { background: var(--ground-1); }
.ground-2 { background: var(--ground-2); }
.ground-3 { background: var(--ground-3); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--sage-bright);
  color: var(--ink);
  padding: 12px 18px;
  font-size: var(--fs-small);
  font-weight: var(--w-semibold);
  text-decoration: none;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ------------------------------------------------------------
   Typography

   Moon Walk is caps-only and wide. It carries H1, H2, the
   wordmark and the large figures. Anything set in it renders as
   capitals; the HTML still holds sentence case.
------------------------------------------------------------ */

h1, h2, .display {
  font-family: var(--font-display);
  font-weight: var(--w-regular);
  color: var(--fg-1);
  /* Nevera is caps-only and wide: no descenders to clear, so the
     leading comes back down from Permanent Marker's 1.22. */
  letter-spacing: -0.005em;
  line-height: 1.16;
}

h1 { font-size: var(--fs-h1); max-width: 900px; }
h2 { font-size: var(--fs-h2); letter-spacing: var(--ls-heading); }

h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  font-weight: var(--w-semibold);
  line-height: 1.3;
  letter-spacing: var(--ls-heading);
  color: var(--fg-1);
}

h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  font-weight: var(--w-semibold);
  line-height: 1.4;
  color: var(--fg-1);
}

/* Section heading set in Moon Walk, sized between H1 and H2 */
/* ------------------------------------------------------------
   Section titles — v9.2, brought up to the stage-name treatment

   On instruction: every Nevera header on the page now uses the
   scale and the masked entrance the six stage names use, so the
   page reads as one voice rather than as a loud method section
   bolted onto a quiet site.

   WHAT CHANGED, AND THE ONE NUMBER THAT DIFFERS

   Was clamp(24px, 2.7vw, 38px). Now clamp(30px, 4.4vw, 80px) —
   roughly double at every width.

   4.4vw where the stage names use 5.6vw, and 80px where they cap
   at 104px. That is not a hedge. The stage names sit in a
   FULL-BLEED band and have the whole viewport to work with; these
   sit inside .wrap, which caps at 1920px and carries 40px of
   padding, and one of them — "How you will fall back in love with
   the business you built" — is 57 characters. At the stage curve
   that title runs to five lines and stops being a heading.

   `max-width` moved from 20ch to 16ch because the type is twice
   the size: the measure is in characters, so it scales itself,
   but a heading this large wants fewer of them per line.

   overflow: hidden plus the .ttl-in inner span is what lets
   js/motion.js reveal these from behind their own edge. Same
   mechanism as .stage h3, same descender trap avoided the same
   way — the room goes on the span, never on this element, because
   overflow clips at the PADDING box.
------------------------------------------------------------ */

.section-title {
  font-family: var(--font-display);
  font-weight: var(--w-regular);
  font-size: clamp(30px, 4.4vw, 80px);
  line-height: 0.98;
  letter-spacing: -0.022em;
  color: var(--fg-1);
  max-width: 16ch;
  overflow: hidden;
  overflow-wrap: normal;
  hyphens: none;
}
.section-title.wide { max-width: 22ch; }

.ttl-in {
  display: block;
  padding-bottom: 0.14em;
}
.gsap-motion .ttl-in { will-change: transform; }

@media (max-width: 1199.98px) {
  .section-title { font-size: clamp(30px, 4.8vw, 56px); }
}

@media (max-width: 809.98px) {
  .section-title { font-size: clamp(28px, 8vw, 46px); max-width: 18ch; }
  .section-title.wide { max-width: 20ch; }
}

@media print {
  .section-title { font-size: 20pt; overflow: visible; }
  .ttl-in { will-change: auto; }
}

p { color: inherit; }
p + p { margin-top: 1.15em; }

.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

.muted { color: var(--fg-3); }
.small { font-size: var(--fs-small); line-height: 1.55; }

.eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--sage-bright);
}

.mono {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--fg-3);
}

/* Playfair Display italic — pull quotes and the two principle headings */
.quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(21px, 2.5vw, 30px);
  font-weight: var(--w-regular);
  line-height: 1.4;
  letter-spacing: var(--ls-heading);
  color: var(--fg-1);
}

.figure {
  font-family: var(--font-display);
  font-size: clamp(38px, 4.6vw, 58px);
  font-weight: var(--w-regular);
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--fg-1);
  font-variant-numeric: lining-nums tabular-nums;
}

/* ------------------------------------------------------------
   Signature sage rule — thin, 2px, per the design system.
   Distinct from the wordmark rule, which is much heavier.
------------------------------------------------------------ */

.rule {
  display: block;
  width: var(--rule-len);
  height: var(--rule-w);
  background: var(--sage-bright);
  border: 0;
}
.rule-short { width: 40px; }

.hairline {
  border: 0;
  border-top: var(--bw) solid var(--line);
}

/* ------------------------------------------------------------
   Wordmark lockup

   Geometry sampled from Arche-Advisory-Wordmark-Dark.png:
   "Arche Advisory" in Moon Walk with both A's in sage-bright,
   a heavy sage rule spanning the full width beneath it, and the
   tagline in Permanent Marker below that.

   .lockup-full  — wordmark + rule + tagline (hero)
   .lockup-mini  — wordmark + rule only (nav, footer)
------------------------------------------------------------ */

.lockup {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  text-decoration: none;
  line-height: 1;
}

.lockup-mark {
  /* the one place Moon Walk survives, per instruction */
  font-family: var(--font-wordmark);
  font-weight: var(--w-regular);
  font-size: 1em;
  line-height: 1;
  letter-spacing: 0.005em;
  color: var(--fg-1);
  white-space: nowrap;
  text-align: center;
}

/* Both A's in "Arche Advisory" carry sage — per the design system */
.a-sage { color: var(--sage-bright); }

.lockup-rule {
  display: block;
  width: 100%;
  height: var(--lockup-rule-w);
  background: var(--sage-bright);
  margin-top: var(--lockup-gap-top);
  border-radius: 1px;
}

.lockup-tag {
  font-family: var(--font-marker);
  font-size: var(--lockup-tag-size);
  line-height: var(--lockup-tag-lh);
  letter-spacing: 0.01em;
  color: #FFFFFF;
  text-align: center;
  margin-top: var(--lockup-gap-bot);
  align-self: center;
  max-width: 96%;
}

.lockup-full { font-size: clamp(30px, 5.2vw, 62px); }

/* Nav — the complete lockup, tagline included, scaled down.
   The composition is unchanged, so the aspect ratio of the
   reference asset is preserved: total height is 2.73x the
   wordmark font-size, with the tagline wrapping to two lines
   exactly as it does in the source PNG. */
.lockup-nav { font-size: 22px; }

/* Footer keeps the compact form — wordmark and rule only.

   v6.0 — the mark is Nevera now, not Moon Walk. Font-size stays at 21px
   because the two faces set "ARCHE ADVISORY" within 0.3% of each other,
   so the lockup occupies the same width as before. What changed is cap
   height: 800/1000 against Moon Walk's 714/1000, a 12% taller mark at
   the same size.

   The rule and the gap are expressed against font-size, not cap height,
   so leaving them alone would have quietly thinned the rule relative to
   a heavier wordmark. Both are re-derived to hold the proportion that
   was sampled from Arche-Advisory-Wordmark-Dark.png:

     rule / cap = 0.115 / 0.714 = 0.161  ->  0.161 x 0.800 = 0.1287em
     gap  / cap = 0.240 / 0.714 = 0.336  ->  0.336 x 0.800 = 0.2690em

   Rendered at 21px that is a 2.70px rule sitting 5.65px below a 16.8px
   cap, against 2.42px and 5.04px below a 15.0px cap before. */
.lockup-mini { font-size: 21px; }
.lockup-mini .lockup-rule { margin-top: 0.269em; height: 0.1287em; }

.lockup:hover .lockup-rule {
  background: #B6CEB8;
  transition: background var(--dur-base) var(--ease-out);
}

/* ------------------------------------------------------------
   Buttons — every clickable element carries sage
------------------------------------------------------------ */

/* Fixed height rather than padding-driven, per the reference.
   A button is the same physical size at every breakpoint, which
   keeps the tap target honest on small screens and stops CTAs
   inflating on large ones. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: var(--btn-h);
  padding-inline: var(--btn-pad);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: var(--w-semibold);
  line-height: 1;
  border: var(--bw) solid transparent;
  border-radius: var(--r-md);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.btn .arrow { transition: transform var(--dur-base) var(--ease-out); }
.btn:hover .arrow { transform: translateX(4px); }
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--sage-bright);
  border-color: var(--sage-bright);
  color: var(--fg-on-accent);
}
.btn-primary:hover { background: #B6CEB8; border-color: #B6CEB8; }
.btn-primary:active { background: var(--sage-dim); border-color: var(--sage-dim); }

.btn-outline {
  background: transparent;
  border-color: var(--sage-bright);
  color: var(--sage-bright);
}
.btn-outline:hover { background: var(--sage-bright); color: var(--fg-on-accent); }

.btn-sm { height: var(--btn-h-sm); padding-inline: 20px; font-size: 14px; }

/* ------------------------------------------------------------
   Text links
------------------------------------------------------------ */

.tlink {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: var(--w-medium);
  color: var(--sage-bright);
  text-decoration: none;
  border-bottom: 1.5px solid var(--sage-bright);
  padding-bottom: 2px;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.tlink .arrow { transition: transform var(--dur-base) var(--ease-out); }
.tlink:hover { color: var(--fg-1); border-bottom-color: var(--fg-1); }
.tlink:hover .arrow { transform: translateX(4px); }

/* ------------------------------------------------------------
   Site header
------------------------------------------------------------ */

/* v4.1 — the header carries a black background again.
   #0E0F0D is not a guess: it is the exact background colour of the
   supplied logo PNG, sampled from the file. Matching it means the
   logo's own plate is invisible against the bar rather than sitting
   in a visible box. */
.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--ink);
  border-bottom: var(--bw) solid var(--line);
}

.nav-inner {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 10px var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 30px;
}

.nav-links a.plain {
  position: relative;
  font-size: var(--fs-small);
  color: var(--fg-2);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav-links a.plain::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 1.5px;
  background: var(--sage-bright);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.nav-links a.plain:hover { color: var(--fg-1); }
.nav-links a.plain:hover::after { transform: scaleX(1); }
.nav-links a.plain.is-active { color: var(--fg-1); }
.nav-links a.plain.is-active::after { transform: scaleX(1); }

/* ------------------------------------------------------------
   Footer
------------------------------------------------------------ */

.footer {
  background: var(--ground-1);
  border-top: var(--bw) solid var(--line);
  padding-block: 56px;
}

.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.footer-links { display: flex; gap: 28px; flex-wrap: wrap; }
.footer-links a {
  font-size: var(--fs-small);
  color: var(--fg-2);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.footer-links a:hover { color: var(--sage-bright); }

.footer-meta { margin-top: 28px; }
.footer-meta .mono + .mono { margin-top: 6px; }

/* ------------------------------------------------------------
   AI media disclosure — the fine print half

   v7.0. The visible half is .ai-mark, sitting on each clip. This is
   what it links to. Fine print by instruction, but fine print that can
   still be read: 12.5px at 1.6 rather than 10px at 1.2, and at --fg-3
   rather than dropped to a whisper. A disclosure nobody can read is
   not a disclosure.

   :target lifts it when arrived at from the asterisk, so it is obvious
   which paragraph the mark was pointing at.
------------------------------------------------------------ */

/* v9.2, on instruction: the note runs the full breadth of the footer's
   text column — the lockup's left edge to the footer nav's right edge —
   rather than stopping at an 88ch measure. It is already inside the
   footer's `.wrap`, the same one `.footer-top` uses, so removing the cap
   is the whole change; the two edges line up by construction at every
   width and no new rule is needed to hold them there.

   The measure is now roughly 200 characters on a 1920px display, which
   is far past comfortable reading length for continuous prose. That is
   accepted deliberately: this is fine print people scan after following
   an asterisk, not a paragraph anyone reads end to end, and matching
   the footer's own edges matters more here than the measure does. */
.ai-note {
  margin-top: 26px;
  padding-top: 22px;
  border-top: var(--bw) solid var(--line);
  transition: opacity var(--dur-base) var(--ease-out);
}

/* COLOUR, AND WHAT IT COSTS — recorded, not buried.

   #565A5C on the footer ground measures 2.76:1. The body was --fg-3 at
   5.95:1 and the heading was sage at 9.20:1, so this is a drop of more
   than half. WCAG 1.4.3 asks 4.5:1 for text this size; 12.5px is not
   large text under any reading of the rule.

   That matters more here than anywhere else on the page, because this
   paragraph IS the EU AI Act Article 50 disclosure — the Act asks for
   it "in a clear and distinguishable manner", and legibility is the
   whole of what that phrase is about.

   On the same grey: #5C6062 clears 3:1, #787C7E clears 4.5:1, #999D9F
   clears 7:1. The specified colour ships.

   The :target lift below is now load-bearing rather than decorative —
   it is what makes the note legible once someone has actually followed
   an asterisk to it, so do not remove it while this colour stands. */
/* v9.2 reduced the note to a single fine-print sentence carrying the
   asterisk itself, so the uppercase mono heading is gone. `.ai-note-h`
   is deliberately not kept as a dead rule — if the heading returns,
   the style should return with it and be reasoned about then. The
   `aside` keeps its accessible name via `aria-label` instead of
   `aria-labelledby`, because there is no longer a heading to point at. */
.ai-note p {
  font-size: 12.5px;
  line-height: 1.6;
  color: #565A5C;
}
.ai-note p + p { margin-top: 8px; }

/* This lift is load-bearing, not decoration. At #565A5C the note sits
   at 2.76:1 on the footer ground; :target is what makes it legible at
   the moment someone has actually followed an asterisk to it. */
.ai-note:target {
  border-top-color: var(--sage-bright);
}
.ai-note:target p { color: var(--fg-2); }
.ai-note:focus { outline: none; }

/* ------------------------------------------------------------
   Section reveal — fade plus ≤6px translate
------------------------------------------------------------ */

[data-reveal].is-hidden { opacity: 0; transform: translateY(6px); }
[data-reveal].is-shown {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}

/* ------------------------------------------------------------
   Reduced motion
------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ------------------------------------------------------------
   Brandmark — the supplied logo, replacing the live-text lockup
   in the header. v4.0.
------------------------------------------------------------ */

.brandmark { display: block; line-height: 0; }
.brandmark img {
  display: block;
  height: 52px;
  width: auto;
  max-width: 100%;
}
.brandmark:hover img { opacity: 0.9; transition: opacity var(--dur-fast) var(--ease-out); }
.brandmark:focus-visible { outline: 2px solid var(--sage-bright); outline-offset: 4px; }

@media (max-width: 1199.98px) { .brandmark img { height: 44px; } }
@media (max-width: 809.98px)  { .brandmark img { height: 34px; } }