/* ==========================================================================
   APERTURE — BASE, STAGE, MATERIAL AND GLOBAL CHROME
   Shared by every page. Page-specific composition lives in its own file.
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--c-base);
  color: var(--c-body-bright);
  font-family: var(--f-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;              /* belt only. The build must not overflow. */
}

img { max-width: 100%; }

a { color: var(--c-gold-bright); text-decoration: none; }

::selection { background: rgba(201,162,39,0.28); color: var(--c-display); }

:focus-visible {
  outline: 1px solid var(--c-gold);
  outline-offset: 3px;
}

/* Screen-reader-only. Used by the skip link and by the logo's accessible name. */
.ap-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.ap-skip {
  position: absolute; left: 0; top: 0; z-index: 50;
  transform: translateY(-120%);
  background: var(--c-stage-top); color: var(--c-display);
  border: 1px solid var(--c-gold);
  padding: 12px 20px; font-size: 13px; letter-spacing: 2px;
  transition: transform var(--dur) var(--ease);
}
.ap-skip:focus { transform: translateY(0); }

/* --------------------------------------------------------------------------
   THE FRAME
   The composition is 1440 wide. Ruling R1: above 1440 it centres rather than
   continuing to grow, so every artboard value stays exact at its own width.
   -------------------------------------------------------------------------- */
.ap-frame {
  width: 100%;
  max-width: var(--frame);
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  background: var(--c-base);
  color: var(--c-body-bright);
}

/* --------------------------------------------------------------------------
   THE STAGE
   One dramatic light source per composition, pooled as a radial. Surfaces
   emerge from shadow. A flat hex fill is not an acceptable substitute.
   -------------------------------------------------------------------------- */
.ap-stage {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 1050px 780px at 62% 2%,
      rgba(var(--c-light), 0.18) 0%,
      rgba(var(--c-light), 0.04) 40%,
      rgba(var(--c-light), 0)    62%),
    linear-gradient(180deg, var(--c-stage-top) 0%, var(--c-stage-mid) 45%, var(--c-stage-bot) 100%);
}

/* A local light pool, used per block. */
.ap-pool {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 620px 400px at 34% 26%,
    rgba(var(--c-light), 0.12) 0%, rgba(var(--c-light), 0) 64%);
}

/* --------------------------------------------------------------------------
   THE STONE RELIEF
   position: absolute, inset 0 — the full height of the composition, NOT fixed
   to the viewport. Defect D2 in the August 29 report: the reference build
   pinned it to the viewport so the grain stayed still while content scrolled
   over it, which changes the material read the spec is explicit about.
   Filter id is generated per template, also D2.
   -------------------------------------------------------------------------- */
.ap-relief {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  mix-blend-mode: soft-light;
  opacity: 0.72;
  pointer-events: none;
}

.ap-content { position: relative; }

/* --------------------------------------------------------------------------
   NAVIGATION
   -------------------------------------------------------------------------- */
.ap-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* The gold rule is positioned against this band, not against the artwork,
     because it starts at the PAGE edge. Nothing else here relies on this. */
  position: relative;
  padding: var(--pad-nav);
  padding-left: var(--gut-nav);
  padding-right: var(--gut-nav);
  gap: 24px;
  /* The nav wraps rather than overflowing. Found by the responsive audit at
     768px, where the lockup plus four items plus the CTA needed 18px more
     than the viewport had. Wrapping engages only when the row cannot fit, so
     the 1440 composition is untouched. */
  flex-wrap: wrap;
}

/* THE LOGO, approved 13 September 2026.
   Three pieces, not one picture: the mark, a rule that belongs to the page,
   and the word. The rule is the letter's crossbar and the mark carries none
   of its own, which is why mark-letters-gold.svg is used here and the full
   mark-gold.svg is used anywhere there is no page for the line to cross. */
.ap-nav__logo {
  display: flex;
  align-items: center;
  gap: var(--logo-gap);
  position: relative;   /* over the rule */
}
.ap-nav__logo .ap-nav__mark { height: var(--logo-mark); width: var(--logo-mark); display: block; }
.ap-nav__logo .ap-nav__word { width: var(--logo-word-w); height: auto; display: block; }

/* TWO THINGS SHIP AND ONE SHOWS.
   --crossed is the letter WITHOUT a crossbar, used where the page's own rule
   runs through it and becomes the crossbar. .ap-nav__lockup is mark, rule and
   word in one file, used below 760 where there is no page for a line to cross.
   Swapping between them is the whole of the phone treatment: hiding the page
   rule on its own would leave a letter A with no crossbar at all.

   This selector must out-rank `.ap-nav__logo .ap-nav__mark` above, which sets
   display:block. A bare class selector loses that fight and BOTH render: the
   header shows the letter twice and the word lands 122px too far right.
   Measured, not assumed. */
.ap-nav__logo .ap-nav__lockup { display: none; }

/* Enters from the left edge of the page, runs through the mark as its
   crossbar, stops where the word begins. It never reaches the nav. */
.ap-nav__rule {
  position: absolute;
  left: 0;
  top: var(--logo-rule-y);
  width: var(--logo-rule-w);
  height: var(--logo-rule-h);
  background: var(--c-gold);
  pointer-events: none;
}

.ap-nav__links {
  display: flex;
  align-items: center;
  gap: var(--nav-gap);
  flex-wrap: wrap;
  justify-content: flex-end;
  row-gap: 16px;
}

.ap-nav__link {
  position: relative;
  font-size: var(--t-nav);
  letter-spacing: var(--ls-nav);
  line-height: 1;
  color: var(--c-body);
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
.ap-nav__link:hover { color: var(--c-body-bright); }

/* THEME 0.3.6, 12 September 2026. The rendered label is 12px tall, which is a
   12px tap target. WCAG 2.2 SC 2.5.8 sets 24x24 CSS px as the floor. Padding is
   NOT used here: padding would grow the flex row and move the header, which is
   an approved measurement. This overlay is absolutely positioned, so it is out
   of flow and takes the link out of the layout question entirely. Nothing is
   painted, nothing moves, the artboard is untouched.

   WHY 28px AND NOT 44px. 44px is the comfortable touch size and the first
   version of this used it. Measured on the real rendered page, it left only
   2.0px of clearance above the BEGIN VERIFICATION button at 360, 390 and 480,
   where the nav wraps and the row gap is 18px: a 44px overlay reaches 16px
   below a 12px label, and a thumb aimed at the top edge of the button would
   have hit the link instead. The row gap cannot be widened because that moves
   the header. 28px is the largest height this layout can carry safely. It
   clears the 24px floor, it clears Apple's 28px desktop minimum, it is more
   than double what was there, and it leaves 10px of clearance at every width.
   Do not raise it to 44 without re-measuring the clearance first. */
.ap-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 28px;
}

/* Current page: cream label with a gold underline beneath.
   Defect D3: the reference build painted the label gold as well. The artboard
   sets #F3EDE1 and spec section 4 specifies only the underline. */
.ap-nav__link--current {
  color: var(--c-display);
  padding-bottom: 5px;
  border-bottom: 1px solid var(--c-gold);
}

/* --------------------------------------------------------------------------
   THE CALL TO ACTION — two tiers, ruling R9
   BEGIN VERIFICATION everywhere. Sharp, except the slight softening the
   spec allows the primary CTA and nothing else.
   -------------------------------------------------------------------------- */
.ap-cta {
  display: inline-block;
  border: 1px solid var(--c-gold);
  background: none;
  border-radius: 1px;
  line-height: 1;
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.ap-cta:hover { background: rgba(201,162,39,0.10); }

.ap-cta--nav {
  color: var(--c-body-bright);
  font-size: var(--t-cta-nav);
  letter-spacing: var(--ls-cta-nav);
  padding: var(--pad-cta-nav);
}

.ap-cta--foot {
  color: var(--c-display);
  font-size: var(--t-cta-foot);
  letter-spacing: var(--ls-cta-foot);
  padding: var(--pad-cta-foot);
}

/* --------------------------------------------------------------------------
   FOOTER
   Defect D4: the reference build used space-between, throwing the emblem to
   the far left and the legal line to the far right. The artboard and spec
   section 4 both set one centred group with a 20px gap.
   -------------------------------------------------------------------------- */
.ap-foot--centred {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  padding: 20px var(--gut-foot) 70px var(--gut-foot);
  position: relative;
}

/* The banded footer, homepage and application. Emblem far left, legal line far
   right, on a distinct lighter band. Not the same as the reference build's
   space-between bug on the FAQ: this one is what those two artboards specify. */
.ap-foot--band {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: calc(22px + 14 * var(--span) / 1050) var(--gut-nav) calc(22px + 14 * var(--span) / 1050) var(--gut-stack-out);
  background: linear-gradient(180deg, #2A2F38 0%, #262B33 100%);
  border-top: 1px solid rgba(242,227,196,0.06);
}
.ap-foot--band .ap-foot__emblem { height: calc(26px + 10 * var(--span) / 1050); width: auto; display: block; }
/* THEME 0.3.8, 12 September 2026. APPROVED BY THE OWNER, her words "Yes
   approved", given while looking at it live on her own screen.
   The artboard puts this line far right on the same row as the emblem. That
   only holds at 1440 and wider; at every width between about 760 and 1400 it
   ran out of room and broke wherever it happened to land, which is most real
   windows. It now takes its own full-width row under the emblem and reads left,
   so it is a deliberate block rather than whatever was left over. */
.ap-foot--band .ap-foot__legal {
  flex: 0 0 100%;
  order: 3;
  margin-top: 16px;
  text-align: left;
  padding-left: 0;
}

.ap-foot__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.ap-foot__mark svg,
.ap-foot__mark img { height: var(--mark-h); width: auto; display: block; }

/* --------------------------------------------------------------------------
   FOOTER LINKS
   Added 31 August 2026 at the owner's request. Not on any artboard, so the
   treatment is derived from the nav rather than invented: same face, same
   11px, same letterspacing, muted until hovered. It is meant to be findable
   and not to compete with anything.

   In the CENTRED footer the row sits between the CTA and the mark group.
   In the BAND footer it sits between the emblem and the legal line, which is
   why the legal line no longer needs margin-left:auto to reach the right
   edge: with three children, space-between puts it there on its own.
   -------------------------------------------------------------------------- */
.ap-foot__links {
  display: flex;
  align-items: center;
  gap: calc(18px + 14 * var(--span) / 1050);
  flex-wrap: wrap;
  justify-content: center;
}
.ap-foot__link {
  font-family: var(--f-body);
  font-size: 11px;
  letter-spacing: var(--ls-footer);
  line-height: 1.6;
  color: var(--c-footer);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.ap-foot__link:hover,
.ap-foot__link:focus-visible {
  color: var(--c-display);
  border-bottom-color: var(--c-gold);
}
/* In the band footer the links group with the emblem rather than floating in
   the middle. Centring them only centres them in the space left over between
   the emblem and a long legal line, which lands them at about a quarter across
   and reads like a mistake. Grouping them left keeps both approved positions,
   emblem far left and legal far right, and puts the new element beside the one
   it belongs with. */
.ap-foot--band .ap-foot__links { margin-right: auto; padding-left: calc(14px + 18 * var(--span) / 1050); }

.ap-foot__legal {
  font-size: var(--t-footer);
  letter-spacing: var(--ls-footer);
  line-height: 1.6;
  color: var(--c-footer);
  text-align: center;
}

/* THEME 0.3.8, 12 September 2026. Owner, looking at the live site: "it looks
   awful the way it wraps".

   AND THE FIRST DIAGNOSIS OF IT WAS WRONG. Engineering measured the footer at
   exactly 1440, saw one clean line, and called it a phone-only problem. It is
   not. Between about 760 and about 1400 the banded footer is still laid out
   across, the legal line has only the space left over beside the emblem and the
   links, and it breaks WHEREVER IT RUNS OUT: on her own screen that put
   COMPLIANCE at the end of one line and GUIDANCE, NOT LEGAL ADVICE. at the
   start of the next. A disclaimer sawn in half mid-phrase.

   FIRST ATTEMPT, ALSO NOT ENOUGH: inline-block, so the disclaimer wrapped as
   one piece instead of splitting. She looked at it and said it was the same
   thing she had already turned down, and she was right. It still left a long
   sentence breaking wherever it happened to run out of room, so the footer
   still looked like an accident, just a tidier one.

   WHAT IT DOES NOW: the disclaimer takes its own line ALWAYS, at every width.
   Two lines on purpose beats one-or-two by luck. The company sentence sits on
   one line and the disclaimer sits under it, and it reads as a decision
   instead of a wrap. On a wide window this is a real change: it used to fit on
   a single line there, and now it is deliberately two. That is why it went to
   her rather than being done quietly.

   HER WORDS ARE UNTOUCHED. The span around them adds not one character.
   Standing instruction for this footer: REWRAP, NEVER REWORD. */
.ap-foot__legal-note {
  display: block;
  margin-top: 6px;
  /* 14.55px is the MEASURED width of "© " in Instrument Sans at 11px with this
     letter-spacing, taken off the live page, not guessed. Line one opens with
     the copyright circle, which is small and sits inside its own space; line
     two opens with a full-height capital. Aligning the two boxes left the
     letters looking out of line, which is exactly what she said was wrong.
     With this the C of COMPLIANCE sits under the 2 of 2026 and the © hangs
     outside them both, verified live at x 39.3 for both glyphs. */
  padding-left: 14.55px;
}

/* --------------------------------------------------------------------------
   SMALL SCREENS
   The artboards are desktop compositions and say nothing about 390. Phone
   rendering is Engineering's to determine. Rewrap, never reword.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .ap-nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
  }
  /* A rule that arrives from the page edge has nothing to do in a stacked
     column: the logo is no longer on the band's centre line, so the line
     would cross empty space and stop at nothing.

     Below 760 the header therefore uses THE SELF-CONTAINED LOCKUP, one file
     carrying mark, rule and word together, exactly as HEADER-SPEC.txt directs
     for this case: "For anything between, use aperture-logo-lockup-on-dark.svg,
     which carries its own short lead-in rule and holds down to 130 px wide."

     An earlier version of this block said the lockup and shipped the closed
     mark plus a separate word instead. That left the gold line starting at the
     page gutter, crossing the letter, protruding 7px past it and stopping in
     10.6px of dead air before APERTURE, connecting nothing to nothing. The
     comment also said the opposite of the code. Both are fixed here. */
  .ap-nav__rule { display: none; }
  .ap-nav__logo .ap-nav__mark--crossed,
  .ap-nav__logo .ap-nav__word { display: none; }
  .ap-nav__logo .ap-nav__lockup { display: block; height: var(--logo-mark); width: auto; }
  .ap-nav__links {
    flex-wrap: wrap;
    gap: 18px 22px;
    width: 100%;
  }
  .ap-foot__mark { flex-direction: column; gap: 14px; }
  /* The band footer is a three-across composition. On a phone it stacks, and
     the links keep their own row so they stay tappable. */
  .ap-foot--band { flex-direction: column; align-items: flex-start; gap: 18px; }
  .ap-foot--band .ap-foot__links { margin: 0; justify-content: flex-start; }
  .ap-foot--band .ap-foot__legal { text-align: left; }

  /* THEME 0.3.8, 12 September 2026. Owner: "it looks awful the way it wraps".
     Three things, none of which touch a word:

     1. The link row was breaking wherever it ran out of room, which put TERMS
        PRIVACY FEES AND REFUNDS on one line and CONTACT alone underneath. A
        two-by-two grid breaks it on purpose instead, and every link keeps a
        44px tall tap target.
     2. The legal sentence now sets a little tighter so the company name and the
        trading-name clause sit together instead of straggling.
     3. COMPLIANCE GUIDANCE, NOT LEGAL ADVICE. gets its own line, deliberately,
        with air above it, so it reads as the disclaimer it is rather than as
        the tail of the copyright line. */
  .ap-foot--band .ap-foot__links {
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: start;
    gap: 4px 26px;
    width: auto;
  }
  .ap-foot__links .ap-foot__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .ap-foot__legal {
    letter-spacing: 1.1px;
    line-height: 1.7;
    max-width: 34em;
  }
  /* the disclaimer already takes its own line at every width; on a phone it
     just gets a touch more air above it */
  .ap-foot__legal-note { margin-top: 10px; }
  .ap-foot--band .ap-foot__legal { max-width: none; margin-top: 4px; }
}

/* The TM after every mention of Alexios the visitor sees (owner's order,
   6 September 2026, widened the same day to every mention). Superscript, the
   surrounding colour, small, normal letter-spacing. In body copy 0.6em; in an
   engraved heading or label, which is letterspaced capitals, 0.5em so the
   mark sits as a mark and not as a fourth letter. The logo lockup is an SVG
   and carries no text node, so nothing here reaches it. */
.ap-tm {
  font-size: 0.6em;
  letter-spacing: normal;
  color: inherit;
  vertical-align: super;
  line-height: 0;
  font-family: inherit;
  text-transform: none;
}
h1 .ap-tm, h2 .ap-tm, h3 .ap-tm, h4 .ap-tm,
.home-plate__name .ap-tm, .apply-note__label .ap-tm, .faq-qa__q .ap-tm,
.legal__h .ap-tm, .legal__h3 .ap-tm, .acct__label .ap-tm { font-size: 0.5em; }