/* ================================================================================================
   FIGURES NEVER SIT UNDER TEXT
   ================================================================================================
   "in the contact the box is still covering Hermes, and in other pages boxes cover gods"
   "and in the mobile version it is even worse"

   Both are the same fault at two sizes. A scene band reserves a column for its figure by padding the
   text wrapper — 330-500px on desktop, 38% on small screens. That works while the band holds plain
   copy. It does not work when the band holds BOXES: a card carries its own background, so where the
   card overlaps the figure the figure is simply painted over, and on a phone a 38% reserve leaves a
   text column too narrow to read while still not clearing the figure.

   The rule this file applies: a figure either has a lane of its own, or it is not shown.

     wide screens   the reserved column stays, and the figure is nudged fully into it
     under 1100px   the reserve is dropped and the figure becomes a faint backdrop for the band,
                    behind everything, at an opacity where text stays legible over it
     under 700px    no decorative figure at all

   Nothing is lost by hiding the decorative figures on a phone. Every page still shows the six
   through elements that are REAL content and sit in the flow: the labelled band specialists, the
   roster on /about, the scene characters on /services, and the seal.

   This file loads after site.css and before the inline shell styles, and it only touches decorative
   figure classes — it redefines nothing the identity stylesheet owns.
================================================================================================= */

/* ---- WIDE: keep the lane, and keep the figure inside it ---------------------------------------- */
@media (min-width: 1101px) {
  .story-scene > .chapter-guide {
    /* Sit against the outer edge rather than bleeding inward over the copy. */
    right: 0;
    width: clamp(300px, 32vw, 460px);
    opacity: .8;
  }
  .story-scene.guide-left > .chapter-guide {
    right: auto;
    left: 0;
  }
}

/* ================================================================================================
   NARROW: THE FIGURE JOINS THE LAYOUT INSTEAD OF FIGHTING IT
   ================================================================================================
   "in mobile view most of the characters are gone, all website dimensions and sizing is wrong — of
    course there is a smarter way to build that website without having all of these problems."

   Both true, and the second one is the important one. Hiding the characters removed the overlap by
   removing the characters, which is not a fix, it is a retreat. And the reason the same problem kept
   coming back at every width is architectural, not cosmetic:

     A FIGURE THAT IS ABSOLUTELY POSITIONED IS INVISIBLE TO LAYOUT.
     The browser cannot reserve room for something that is out of flow, so the room has to be faked
     with a hand-tuned padding on the text beside it — 500px here, 38% there, a different guess at
     every breakpoint. Every one of those guesses is wrong at some width, and when it is wrong the
     result is either a figure under the text or a text column too narrow to read. That is the whole
     history of this bug.

   THE SMARTER WAY, and what this does below the width where the reserved column stops working: the
   section becomes a flex column and the figure becomes a REAL ITEM IN IT. Now the browser reserves
   the space itself, at every width, with no magic numbers — and overlap is not merely fixed, it
   becomes impossible, because two items in normal flow cannot occupy the same space.

   The characters stay visible all the way down to the smallest phone. They simply stand above their
   band instead of behind it.
================================================================================================= */
@media (max-width: 1100px) {
  .story-scene {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  /* The reserved column is no longer needed, because nothing is overlapping any more. Removing it
     is what gives the copy its full width back on a phone. */
  .story-scene > .wrap,
  .story-scene.guide-left > .wrap {
    padding-left: clamp(16px, 4vw, 32px) !important;
    padding-right: clamp(16px, 4vw, 32px) !important;
    min-height: 0;
    width: 100%;
  }

  .story-scene > .chapter-guide {
    /* IN FLOW. Every offset that made sense while it was absolute is cancelled explicitly, because
       a leftover `right:-6%` on a static element silently does nothing and the next person cannot
       tell whether it was meant to. */
    position: static;
    order: -1;                 /* the figure introduces its band, rather than trailing it */
    left: auto; right: auto; top: auto; bottom: auto;
    display: block;
    width: min(56%, 210px);
    height: auto;
    max-height: 34vh;
    object-fit: contain;
    object-position: center bottom;
    margin: 0 auto 4px;
    opacity: .92;
    transform: none;           /* the scroll driver's drift assumes an absolute figure */
    mask-image: linear-gradient(180deg, #000 0 82%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, #000 0 82%, transparent 100%);
    filter: saturate(106%) contrast(103%) drop-shadow(0 16px 22px rgba(0, 0, 0, .6));
  }
  .story-scene.guide-left > .chapter-guide { left: auto; right: auto; }

  /* A soft pool of light under the figure, so a cut-out portrait reads as standing on the band
     rather than pasted onto it. */
  .story-scene > .chapter-guide + .wrap { position: relative; }
}

/* ---- PHONE: same architecture, smaller figure ---------------------------------------------------
   The figure stays. Only its size changes — which is the point of putting it in the layout: one
   number moves, and nothing can collide. */
@media (max-width: 700px) {
  .story-scene > .chapter-guide {
    width: min(62%, 170px);
    max-height: 26vh;
    margin-bottom: 2px;
  }
  /* The page guardian is the one figure with no band of its own to join — it is pinned to the
     viewport by design. On a phone there is no gutter for it to stand in, so it alone is hidden;
     every other character remains on screen. */
  .page-guardian { display: none; }
}

/* ================================================================================================
   NO HORIZONTAL STRIPS. THE CATALOGUE WRAPS.
   ================================================================================================
   "still same problem with horizontal scrolling, the one you told me you fixed."

   He was right and my check was wrong. I measured overflow on the DOCUMENT, which was clean, while
   the offer selector was scrolling inside its own container — five cards at 161px laid out with
   display:flex and overflow-x:auto, 805px of content in a 353px box. A container that scrolls
   sideways never shows up as document overflow, so a document-level check can never find it.

   This is also the original complaint, unfixed since the beginning: "I have to scroll sideways and
   select each one and visitors won't know how to do that."

   The fix is the rule already written into the component standard: a catalogue WRAPS. Cards flow
   onto as many rows as they need, every one visible, nothing to discover by dragging.
================================================================================================= */
.agency-offers,
.offer-scroll-section .agency-offers {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)) !important;
  gap: 8px;
  overflow-x: visible !important;
  scroll-snap-type: none !important;
}
.agency-offers > * { scroll-snap-align: none; min-width: 0; }

/* The same rule for the two other strips that hold content rather than navigation. */
.relay-tabs {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)) !important;
  overflow-x: visible !important;
  scroll-snap-type: none !important;
}
@media (max-width: 620px) {
  .gods, .steps {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
    overflow-x: visible !important;
    scroll-snap-type: none !important;
  }
}

/* A card must never be able to push its own box wider than the column it was given. Without this a
   single long unbroken string quietly creates a scroll container the reader cannot see the end of. */
.tier, .card, .roster-card, .agency-scene, .handoff-card { min-width: 0; overflow-wrap: anywhere; }

/* The Pantheon console's own tab strip — the last horizontal scroller on the site. Six specialist
   tabs at 129px in a 357px box on a phone. Same rule as every other strip: it wraps. Found by
   measuring scrollWidth against clientWidth on every element, which is the only check that sees a
   container that scrolls sideways inside a page that does not. */
.agent-tabs {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)) !important;
  overflow-x: visible !important;
  scroll-snap-type: none !important;
}
.agent-tabs > * { min-width: 0; scroll-snap-align: none; }


/* Moved here from sectionrail.css on 2026-09-03. That stylesheet was unlinked with the section
   rail it was named for, and the roster styles were inside it - so the six specialists on /about
   would have lost their treatment along with a bar nobody wanted. The roster is content, not
   wayfinding, and belongs with the other figure rules. */
/* ================================================================================================
   THE ROSTER — all six specialists on screen at once, on the about page
   ================================================================================================
   The team used to live only in a tab console, where five of six carry the hidden attribute at any
   moment, so the page that exists to introduce them introduced one. Same rule as the services
   catalogue: a visitor will not discover what they cannot see.

   Six across on a wide screen, three on a tablet, two on a phone — never a row with a single orphan
   at the end, which is what auto-fit produces at awkward widths and what makes a grid look broken.
================================================================================================ */
.roster{
  display:grid; gap:clamp(10px,1.6vw,20px); margin-top:30px;
  grid-template-columns:repeat(6,1fr);
}
.roster-card{
  margin:0; position:relative; border-radius:14px; overflow:hidden; isolation:isolate;
  background:linear-gradient(160deg,var(--surface-2,#1A2A50),var(--surface,#0F1F44));
  border:1px solid rgba(255,255,255,.075);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 16px 40px -24px rgba(0,0,0,.7);
  transition:transform .3s cubic-bezier(.16,1,.3,1),border-color .3s,box-shadow .3s;
}
.roster-card:before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px; z-index:2;
  background:linear-gradient(90deg,var(--accent),var(--accent-2)); opacity:.9;
}
.roster-card img{
  display:block; width:100%; aspect-ratio:3/4; object-fit:cover; object-position:center 12%;
  filter:brightness(1.04) saturate(1.02) contrast(1.02);
  /* The portrait fades into the caption rather than ending on a hard edge, which is what makes six
     cut-out figures read as one group instead of six stickers. */
  mask-image:linear-gradient(180deg,#000 0 62%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 0 62%,transparent 100%);
  transition:transform .45s cubic-bezier(.16,1,.3,1);
}
.roster-card figcaption{
  position:relative; z-index:1; margin-top:-30%; padding:0 14px 18px;
}
.roster-card b{
  display:block; font-family:var(--display,'Cormorant Garamond',Georgia,serif);
  font-size:clamp(19px,1.7vw,24px); line-height:1.1; letter-spacing:-.01em;
  color:var(--fg,#F5EFE1); margin-bottom:6px;
}
.roster-card span{
  display:block; font-size:12.5px; line-height:1.45; color:var(--fg-dim,#9AA7C2);
}
.roster-card:hover{
  transform:translateY(-6px);
  border-color:var(--accent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 26px 60px -26px rgba(0,0,0,.8),
             0 0 34px -14px var(--accent-glow);
}
.roster-card:hover img{transform:scale(1.04)}

@media(max-width:1100px){ .roster{grid-template-columns:repeat(3,1fr)} }
@media(max-width:620px){
  .roster{grid-template-columns:repeat(2,1fr)}
  .roster-card span{font-size:11.5px}
}
@media(prefers-reduced-motion:reduce){
  .roster-card,.roster-card img{transition:none}
  .roster-card:hover{transform:none}
  .roster-card:hover img{transform:none}
}

/* ================================================================================================
   A FIGURE MAY NOT LEAVE ITS OWN SECTION
   ================================================================================================
   Measured on /contact: the hero figure began 41px ABOVE its container, so the hero's overflow:hidden
   sliced the top off Hermes' head; and the band figure was 867px tall inside an 885px section that
   started 45px later, so his feet hung 27px into the band below and appeared to float over the next
   heading. Ramy saw both in a full-page capture — neither is visible in a viewport-sized screenshot,
   which is why they survived several reviews.

   A decorative figure is bounded by the thing it decorates. Height is capped against the section, and
   both are anchored to the bottom so a cut, if one is ever needed, takes the hem of a robe rather
   than a face.
================================================================================================= */
@media (min-width: 1101px) {
  .hero-god {
    top: auto !important;
    bottom: 0;
    max-height: 100%;
    height: auto;
    object-fit: contain;
    object-position: center bottom;
  }
  .story-scene > .chapter-guide,
  section > .chapter-guide {
    top: auto;
    bottom: 0;
    max-height: 100%;
    height: auto;
    object-fit: contain;
    object-position: center bottom;
  }
  /* The hero and the band both clip, so nothing can spill into the section that follows. */
  .hero { overflow: hidden; }
  section:has(> .chapter-guide) { overflow: hidden; }
}

/* ================================================================================================
   THE CONTACT ASIDE — sticky, so a tall form never leaves an empty column beside it
   ================================================================================================
   Measured before the change: left column 1059px, right column 319px, leaving 740px of dead space
   down the right of the page. A two-column grid whose sides are that unequal is not a layout, it is
   a form with a note next to it and a hole underneath.

   The aside now carries both "what happens next" and every alternative to the form, and it travels
   with the reader instead of scrolling away at the top of a long form.
================================================================================================= */
.contact-aside { align-self: start; }

@media (min-width: 981px) {
  .contact-aside {
    position: sticky;
    /* Clears the fixed header, with a little breathing room. */
    top: calc(var(--header-h, 80px) + 20px);
  }
}