/* ============================================================
   Arche Advisory — section visuals and alternating bands
   v1.8

   Two things live here:

   1. THE BAND SYSTEM. Copy in one column, a visual in the other,
      sides swapping section to section. Solves the complaint that
      text sat in a narrow column against a 1920px measure.

   2. THE VISUAL ANIMATION. Slow drift on the SVG compositions in
      section-visuals.svg.html. Transform and opacity only, so
      every frame is composited and none touches layout.

   Open palette, on instruction: each visual carries its own hue.
   What keeps them a set is shared geometry, shared value
   structure and shared motion — not shared colour.
   ============================================================ */

/* ------------------------------------------------------------
   Band
------------------------------------------------------------ */

.band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(48px, 5vw, 112px);
  align-items: center;
}

/* Copy on the right, visual on the left. Applied to alternate
   sections so the eye crosses the page as it descends. */
.band--flip .band-media { order: -1; }

.band-copy { max-width: 44em; }

.band-media {
  position: relative;
  width: 100%;
  aspect-ratio: 900 / 620;
  border-radius: var(--r-lg);
  overflow: hidden;
  isolation: isolate;
}

.band-media svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ------------------------------------------------------------
   v7.0 — film bands

   Two sections carry AI-generated video instead of a drawn SVG:
   "What was lost that we want" and "Show up as you are".

   The clips are 1280x720, so 16:9. The band is 900/620, so 1.452.
   object-fit: cover crops the top and bottom rather than letterboxing
   or distorting, and the panel already clips. Keeping the band at its
   existing ratio matters more than showing every pixel — the four
   other bands on the page use it and they have to line up.
------------------------------------------------------------ */

.band-media--film { background: var(--ink-750); }

/* ------------------------------------------------------------
   v9.2 — the two film bands go full bleed

   Same instruction the six stage bands got, applied to "What was
   lost that we want" and "Show up as you are": the film should
   touch the edge of the screen rather than sit in a rounded panel
   inside the reading column.

   HOW THE BREAKOUT WORKS
   `.band` is a block-level child of `.wrap`, so `50%` in its
   margin resolves against the wrap's content width and the
   standard `width: 100vw; margin-inline: calc(50% - 50vw)` does
   the right thing. This is the same rule `.stages` uses.

   WHY THE COPY GETS A COMPUTED PADDING
   Breaking the band out also breaks the copy out, and the copy
   must keep the left edge every other section on the page sits
   on, or the section titles stop lining up down the page.
   `--bleed-inset` reconstructs the wrap's inner edge:

       max(pad-x, 50vw - half the max content width + pad-x)

   Below 1920px the second term goes negative and `max()` returns
   pad-x, which is exactly the wrap's padding. Above it, the term
   is the distance the wrap is inset by its own max-width.

   The gap collapses to zero because the two halves now meet at the
   centre line; the inner padding on the copy does the separating,
   and a single hairline on the media's inner edge marks the join.
   The outer edge stays open, because that is the bleed.
------------------------------------------------------------ */

.band--bleed {
  --bleed-inset: max(var(--pad-x), calc(50vw - 960px + var(--pad-x)));
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  gap: 0;
  align-items: stretch;
}

.band--bleed .band-copy {
  max-width: none;
  align-self: center;
  padding-inline: var(--bleed-inset) clamp(32px, 4vw, 80px);
}
.band--bleed.band--flip .band-copy {
  padding-inline: clamp(32px, 4vw, 80px) var(--bleed-inset);
}

/* The prose keeps its own measure inside that padding, so the copy
   does not run to 900px on an ultrawide display. */
.band--bleed .band-copy > .prose { max-width: var(--maxw-prose); }

.band--bleed .band-media {
  aspect-ratio: auto;
  min-height: clamp(420px, 42vw, 640px);
  border-radius: 0;
}

/* With the panel stretched rather than ratio-sized, its height comes
   from the row. The film has to be taken out of flow to fill it. */
.band--bleed .band-video {
  position: absolute;
  inset: 0;
}

/* Hairline on the inner edge only. The outer edge is the screen edge
   and must stay open for the bleed to read as a bleed. */
.band--bleed .band-media::after {
  border: 0;
  border-inline-start: var(--bw) solid var(--line);
  border-radius: 0;
}
.band--bleed.band--flip .band-media::after {
  border: 0;
  border-inline-end: var(--bw) solid var(--line);
}

/* ------------------------------------------------------------
   v8.0 — the portrait band

   The About band carries a photograph rather than a drawing, and it
   is the only band on the page that does not use 900/620.

   The source headshot is square. Cropping a square to 1.452 puts the
   crop line at the jaw, which is the one place a portrait must not be
   cut. 4:5 is the editorial portrait ratio and takes 640px off the
   sides of a 3198px source, well clear of the shoulders.

   Nothing else on the row is affected: .band is a 1fr/1fr grid with
   align-items:center, so a taller media panel simply makes that row
   taller and the copy stays centred against it.

   The panel is capped so the portrait does not tower over the copy on
   a wide screen, and centred in its column.
------------------------------------------------------------ */

.band-media--portrait {
  aspect-ratio: 4 / 5;
  max-width: 460px;
  margin-inline: auto;
  background: var(--ink-750);
}

.band-portrait {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 809.98px) {
  /* On one column the portrait would otherwise run most of the screen
     height before the copy begins. */
  .band-media--portrait { max-width: 320px; }
}

.band-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The poster is the same frame the video opens on, so there is no
     jump when playback starts and nothing to see if it never does. */
  background: var(--ink-750) center / cover no-repeat;
}

/* ------------------------------------------------------------
   The AI disclosure mark

   EU AI Act Article 50 wants disclosure at first exposure, in a clear
   and distinguishable manner, and says a machine-readable tag alone
   does not discharge it. So the mark sits ON the media rather than
   only in the footer.

   v9.2, on instruction: the circle is gone. It was a 28px sage disc
   on a blurred dark scrim; it is now a bare asterisk in #565A5C,
   pushed as close into the corner of the media as the glyph allows.

   TWO THINGS THAT SURVIVED THE SIMPLIFICATION, DELIBERATELY

   1. THE HIT AREA IS STILL 24x24. WCAG 2.2 SC 2.5.8 asks for a 24px
      minimum target. Removing the disc removed the visible 28px
      target, so the box is kept at 24px and the glyph is aligned
      into its top-right corner instead. What shrank is the ink, not
      the thing you can click.

   2. HOVER AND FOCUS STILL CHANGE IT. A disclosure that gives no
      feedback does not read as a link, and this one has to read as
      a link because it is the route to the note in the footer.

   ONE THING THAT DID NOT SURVIVE, AND SHOULD BE KNOWN

   #565A5C measures 2.76:1 against the page ink and 2.48:1 against
   ground-2. WCAG 1.4.11 asks 3:1 for a non-text UI component. The
   previous sage was 9.20:1. #5C6062 is the nearest value on the
   same grey that clears 3:1 on ink; #787C7E clears 4.5:1. The
   specified colour is what ships, and the numbers are recorded here
   rather than discovered later.
------------------------------------------------------------ */

.ai-mark {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  /* Target size floor. The glyph sits in the corner of this box. */
  min-width: 24px;
  min-height: 24px;
  padding: 2px 5px 0 0;
  background: none;
  border: 0;
  border-radius: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: #565A5C;
  font-family: var(--font-mono);
  font-size: 22px;
  line-height: 1;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.ai-mark:hover {
  color: var(--sage-bright);
}
.ai-mark:focus-visible {
  outline: 2px solid var(--sage-bright);
  outline-offset: -2px;
}

/* A hairline holds the visual as a deliberate panel rather than
   letting the gradient bleed off into the page ground. */
.band-media::after {
  content: "";
  position: absolute;
  inset: 0;
  border: var(--bw) solid var(--line);
  border-radius: inherit;
  pointer-events: none;
}

/* ------------------------------------------------------------
   Hero — the background lives in css/aurora.css now.
   v1.8 used an SVG field, v1.9-v2.0 a drone film; v2.1 replaced
   both with the ported aurora. Only the stacking rule survives.
------------------------------------------------------------ */

.hero { position: relative; overflow: hidden; }
.hero > .wrap { position: relative; z-index: 2; }

/* ------------------------------------------------------------
   Perspective card headers
------------------------------------------------------------ */

.card-visual {
  display: block;
  width: calc(100% + 56px);
  margin: -32px -28px 24px;
  aspect-ratio: 900 / 400;
  border-bottom: var(--bw) solid var(--line);
  overflow: hidden;
}
.card-visual svg { width: 100%; height: 100%; }

/* ------------------------------------------------------------
   Motion

   Long cycles. Nothing here should ever catch the eye while
   someone is reading — the visuals are meant to be alive, not
   animated at you.
------------------------------------------------------------ */

@keyframes vis-drift-a {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(-14px, 8px, 0); }
}
@keyframes vis-drift-b {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(16px, -10px, 0); }
}
@keyframes vis-drift-c {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(-9px, -13px, 0); }
}
@keyframes vis-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes vis-pulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.14); }
}
@keyframes vis-breathe {
  0%, 100% { transform: scale(1);    opacity: 0.72; }
  50%      { transform: scale(1.06); opacity: 1; }
}
@keyframes vis-open-a {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(-13px, -9px, 0); }
}
@keyframes vis-open-b {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(13px, 9px, 0); }
}
@keyframes vis-rise {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -9px, 0); }
}
@keyframes vis-fan {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(1.6deg); }
}

.drift-a  { animation: vis-drift-a 34s ease-in-out infinite; }
.drift-b  { animation: vis-drift-b 41s ease-in-out infinite; }
.drift-c  { animation: vis-drift-c 29s ease-in-out infinite; }
.spin-slow{ animation: vis-spin 220s linear infinite; }
.pulse    { animation: vis-pulse 7.5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.breathe  { animation: vis-breathe 9s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.open-a   { animation: vis-open-a 26s ease-in-out infinite; }
.open-b   { animation: vis-open-b 26s ease-in-out infinite; }
.rise     { animation: vis-rise 24s ease-in-out infinite; }
.fan      { animation: vis-fan 38s ease-in-out infinite; }

/* ------------------------------------------------------------
   Breakpoints
------------------------------------------------------------ */

@media (max-width: 1199.98px) {
  .band { gap: 44px; }
  .band-copy { max-width: none; }
}

/* Below 810px the band stacks. The visual goes ABOVE the copy in
   every case, including the flipped ones — alternating sides has
   no meaning in a single column, and leading with the visual is
   the better read on a phone. */
@media (max-width: 809.98px) {
  .band {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .band--flip .band-media { order: 0; }
  .band-media { aspect-ratio: 16 / 10; }
  .card-visual { width: calc(100% + 56px); aspect-ratio: 16 / 7; }

  /* One column: the film keeps the full screen width, which is the
     strongest the bleed ever reads, and the copy goes back to the
     wrap's own padding on both sides. */
  .band--bleed { gap: 28px; }
  .band--bleed .band-copy,
  .band--bleed.band--flip .band-copy {
    padding-inline: var(--pad-x);
  }
  .band--bleed .band-media {
    min-height: 0;
    aspect-ratio: 16 / 10;
  }
  .band--bleed .band-media::after,
  .band--bleed.band--flip .band-media::after { border: 0; }
}

/* ------------------------------------------------------------
   Reduced motion — the compositions stay, the movement stops.
   They were designed to hold as still images; the drift is a
   quality, not the content.
------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .drift-a, .drift-b, .drift-c, .spin-slow, .pulse,
  .breathe, .open-a, .open-b, .rise, .fan {
    animation: none !important;
  }
}

/* ------------------------------------------------------------
   Print — visuals dropped, bands collapse to one column
------------------------------------------------------------ */

@media print {
  .band { grid-template-columns: 1fr; }
  .band-media, .card-visual { display: none; }
  .band--bleed {
    width: auto;
    margin-inline: 0;
  }
  .band--bleed .band-copy,
  .band--bleed.band--flip .band-copy { padding-inline: 0; }
}

/* ------------------------------------------------------------
   The AI-media disclosure was removed in v4.4.

   It is gone because it had become inaccurate: no AI-generated
   media reached the site. Every visual is either the supplied
   logo, hand-drawn SVG, or the stock photograph behind the hero.

   If the eleven images in AI-MEDIA-PROMPTS-CHATGPT.md are ever
   generated and dropped into media/, the disclosure has to come
   back — see v4.3 for the markup, the styles and the JSON-LD.
   EU AI Act Article 50 is enforceable from 2 August 2026.
------------------------------------------------------------ */