/* UNIÓN , layout for the info page only. Phase 1 owns this file.
   LAYOUT ONLY and IN TOKENS ONLY: no hex, no font name, no easing, no duration.
   Nothing here may change how an included component looks. */

/* ------------------------------------------------- THE DEEP LINKS LAND CLEAR --
   Every section on this page is a deep-link target: the index above, the
   header, the footer and the FAQ all point at one. The shell header is
   position:sticky and 100px tall, so without this an anchor lands with its own
   eyebrow tucked underneath it and the reader thinks they missed the heading.
   scroll-margin-top is the one correct fix (it moves where the SCROLL stops,
   not where anything is drawn), and it is layout, so it belongs here.
   ---------------------------------------------------------------------------- */
#faq,#access,#care,#food,#refill,#rules,#notice{scroll-margin-top:var(--s9)}

/* ------------------------------------------------------------ FOLD 1, HEAD --
   The index IS the fold. It takes the wider column and sits right of the
   sentence, a numbered ladder rather than a grid of seven tiles: seven equal
   cards would be exactly the template this page has to avoid.
   ---------------------------------------------------------------------------- */
.ih{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:var(--s8);align-items:start}
.ih__say,.ih__ix{min-width:0}
.ih__ix{display:grid}
.ih__l{display:grid;grid-template-columns:auto 1fr;align-items:baseline;
  gap:var(--s4);padding:var(--s3) 0;min-height:var(--tap-min);
  text-decoration:none;color:inherit;
  border-bottom:var(--rule) solid currentColor}
.ih__l:first-child{border-top:var(--rule) solid currentColor}
.ih__n{font-size:var(--size-micro);font-weight:900;letter-spacing:var(--track-micro);
  opacity:.7}
.ih__l b{font-size:var(--size-head);line-height:var(--lh-head);font-weight:900;
  font-stretch:var(--wdth-condensed)}

/* -------------------------------------------------------------- 01, THE FAQ --
   The totem is a tall object, so the sentence sits beside it in a narrow
   column and the totem takes the rest. Not stacked: stacked, the heading and
   the first bar end up the same size on screen and neither one leads.
   ---------------------------------------------------------------------------- */
.if{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);
  gap:var(--s8);align-items:start}
.if__say,.if__totem{min-width:0}

/* ---------------------------------------------------------------- SPACERS --
   Every included block gets air above it and nothing else. These rules exist
   to position the component in the fold, never to restyle it.
   ---------------------------------------------------------------------------- */
.ia,.ic,.io,.ir,.iu,.in{margin-top:var(--s6);min-width:0}
.ic{margin-top:var(--s5)}

/* --------------------------------------------- THE SAY SITS BESIDE, NOT ABOVE --
   THE WASTED SPACE LOUIS SAW, AND WHAT IT ACTUALLY WAS.
   Every fold here read: eyebrow, display heading, lead paragraph, then a
   FULL-WIDTH component under all three. At 1440 that stacks a ~300px column of
   type on top of a 1328px-wide object, so the fold is as tall as both and the
   type occupies a third of its own line length. The measured "empty ground" of
   310-313px in #food and #rules is exactly that band: the short lead paragraph
   with 1000px of bare ground to the right of it.

   The fix is width, not padding. The sentence takes a narrow column and the
   component takes the wide one, on the SAME grid the FAQ fold (.if) already
   proves. The fold loses roughly a third of its height and the ground that is
   left is ground the eye reads as deliberate margin rather than a hole.
   No component is restyled: each one still gets a full column and draws itself.
   ---------------------------------------------------------------------------- */
.i-beside{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);
  gap:var(--s7) var(--s8);align-items:start}
.i-beside__say,.i-beside__has{min-width:0}
/* inside a beside grid the component no longer needs air above it: the grid gap
   is the air, and margin-top here would only reintroduce the gap we removed */
.i-beside__has > .ia,.i-beside__has > .io,
.i-beside__has > .ir,.i-beside__has > .iu{margin-top:0}
/* the lead is set to its own measure rather than the column's, so a short
   sentence never stretches into a thin ribbon of text across the fold */
.i-beside__say .s__lead{max-width:34ch}

/* ------------------------------------------------------- THE ONE MASCOT --
   Modest, and sized well above the system's 150px floor without becoming the
   fold's subject: the lists beside him are. He sits at the foot of the say
   column, in the space the short lead leaves, with real air around him so he
   is neither cropped by the fold nor touching the type above.
   ---------------------------------------------------------------------------- */
.i-mascot{--mascot-w:200px;margin-top:var(--s6)}
@media (max-width:860px){
  /* on the phone the say column is full width, so he is set beside the type
     rather than under it: centred or full-width he would read as a mascot the
     page is showing off, which ruling 2 refuses */
  .i-mascot{--mascot-w:158px;margin-top:var(--s5)}
}

/* ====================================================== 390, ITS OWN LAYOUT ==
   The index moves ABOVE the sentence, because on a phone an index that sits
   under a paragraph is an index nobody scrolls to. It stays the one dominant
   object on the first screen, which is the whole job of this page's top.
   ============================================================================ */
@media (max-width:860px){
  .ih{grid-template-columns:1fr;gap:var(--s6)}
  /* THE HEADLINE COMES BEFORE THE INDEX ON PHONE, per Louis's ruling for this
     pass. It used to be the other way (.ih__ix{order:-1}): the index arrived
     first and the page's own headline sat under seven links, so the first
     screen never said what the page was. The index is still the dominant
     object, it is simply no longer the first thing. */
  .ih__say{order:-1}
  .if{grid-template-columns:1fr;gap:var(--s6)}
  .i-beside{grid-template-columns:1fr;gap:var(--s5)}
  .i-beside__has > .ia,.i-beside__has > .io,
  .i-beside__has > .ir,.i-beside__has > .iu{margin-top:0}
  .i-beside__say .s__lead{max-width:none}
}
@media (max-width:640px){
  .ih__l{padding:var(--s4) 0}
  .ih__l b{font-size:var(--size-title);line-height:var(--lh-title)}
}

/* at 360 the access block's display line ran 3px past the screen */
#access .t-display,#access .v-access__meta{overflow-wrap:anywhere;max-width:100%}
/* the access block's long label is set nowrap upstream; at 360 it is wider than
   the screen and drags the whole block 3px off it. On a narrow phone it wraps. */
@media (max-width:400px){#access .d-label{white-space:normal}}

/* THE HEADLINE IS SIZED BY ITS COLUMN, NOT BY THE WINDOW (Louis, 21 Sep, on his
   own screen: "text overlapping the table"). --size-display grows with the
   window up to 150px, but this column stops growing at the 1440 measure: from
   about 1540 to 1900 wide, "EVERYTHING" (4.5em in the condensed cut) became
   wider than the column and ran across the index beside it, 818px2 of it at
   1680. The size is now the smaller of the system's display size and what the
   column can actually hold. */
.ih__say{container-type:inline-size}
.ih__say .s__h{font-size:min(var(--size-display),21cqw)}