/* OSMEA — home, structural study after unionboulangerie.com.
   Borrowed: the information architecture (hero · about · method · editorial ·
   moments · close), the component vocabulary (a split title, a word-split
   paragraph, an inline ingredient token that pops its sourcing), and the
   motion organization — a group parent orchestrating named children on a
   delay ladder. Nothing of their brand: type, palette, grain, grid and copy
   are all OSMEA's, layered on swiss.css.

   Loads AFTER swiss.css and reuses its tokens, twelve columns and type steps. */

:root{
  --ladder:.12s;        /* one step of the group delay ladder */
  --letter-step:18ms;   /* per letter, inside a title word */
  --word-step:15ms;     /* per word, inside a paragraph */
  --rule:1px solid rgba(16,6,159,.24);
  /* Overrides swiss.css. Four equal tiles and twelve columns land on the same
     midpoint line only when both use the same gap: tile 3's left edge is
     W/2 + g/2 and column 7's is W/2 + G/2. So the page grid runs as tight as
     the ingredient band, and a tile edge IS a column line at any viewport. */
  --colgap:clamp(6px,.75vw,12px);
}

/* ---------- c-title: a heading split to words, then letters ----------
   Each word is its own mask, so a wrapping line can never clip a letter —
   that is what their __line wrapper buys, without measuring layout. */
.c-title{font-family:Carentro,Georgia,serif;font-weight:400;text-transform:uppercase;
  letter-spacing:-.015em;line-height:1.02;font-size:var(--t-title);text-wrap:balance}
.c-title--display{font-size:var(--t-display);line-height:.94;letter-spacing:-.02em}
.c-title__word{display:inline-block;overflow:hidden;vertical-align:bottom;
  padding-bottom:.1em;margin-bottom:-.1em}
.c-title__letter{display:inline-block}
.motion .c-title__letter{transform:translateY(105%);transition:transform 1s var(--e)}
.motion .in .c-title__letter,.motion .c-title.in .c-title__letter{transform:none}

/* ---------- c-paragraph: body copy that arrives word by word ----------
   Their highest-count animation by far, and the reason the scroll reads as
   alive rather than as a sequence of blocks appearing. */
.c-paragraph{text-wrap:pretty}
.c-paragraph__word{display:inline-block}
.motion .c-paragraph__word{opacity:0;transform:translateY(.45em);
  transition:opacity .7s var(--e),transform .7s var(--e)}
.motion .in .c-paragraph__word,.motion .c-paragraph.in .c-paragraph__word{opacity:1;transform:none}

/* ---------- group orchestration ----------
   A group holds the trigger; its named parts inherit a delay step each. */
.motion [data-part]{opacity:0;transform:translateY(22px);
  transition:opacity .85s var(--e),transform .85s var(--e)}
.motion .in>[data-part],.motion [data-group].in [data-part]{opacity:1;transform:none}
.motion [data-part].fig{transform:translateY(26px) scale(1.025);transition-duration:1.3s}

/* ---------- an explicit divider, not just padding ----------
   Union draws a real rule between beats; it is most of why their page reads
   as one structure instead of a stack of screens. */
.divider{grid-column:1/13;height:1px;background:rgba(16,6,159,.24);
  transform-origin:left center}
.motion .divider{transform:scaleX(0);transition:transform 1.4s var(--e)}
.motion .in .divider,.motion .divider.in{transform:none}
.on-blue .divider{background:rgba(252,249,242,.4)}
.on-film .divider{background:rgba(255,255,255,.4)}

/* ---------- buttons ----------
   A text link with an arrow is not a button, and three of them side by side
   gave no hierarchy. These take the shape the attribute boxes already put on
   the page — an outlined rounded rectangle in OSMEA blue — so the control
   reads as native to the brand rather than borrowed from a UI kit.

   Three weights: solid for the one action a beat is actually asking for,
   line for a secondary route, invert for the blue footer. The fill and the
   outline swap on hover, so the two styles are the same object in two states.
   52px tall clears the 44px minimum for a touch target with room to spare. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.7em;
  min-height:52px;padding:.55em 1.6em;
  border:1px solid currentColor;   /* matches the attribute boxes hairline */
  border-radius:10px;              /* rhymes with the boxes at button scale */
  font-size:var(--t-body);letter-spacing:.01em;line-height:1.2;
  text-decoration:none;cursor:pointer;background:transparent;
  transition:background-color .35s var(--e),color .35s var(--e);
}
.btn:hover{text-decoration:none}
.btn__arrow{transition:transform .35s var(--e)}
.btn:hover .btn__arrow{transform:translateX(5px)}
.btn:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* primary: the action the beat is for */
.btn--solid{background:var(--blue);color:var(--paper);border-color:var(--blue)}
.btn--solid:hover{background:transparent;color:var(--blue)}
/* secondary: a route onward, not the ask */
.btn--line{color:var(--blue);border-color:var(--blue)}
.btn--line:hover{background:var(--blue);color:var(--paper)}
/* on the blue footer the whole relationship inverts */
.btn--invert{color:var(--paper);border-color:rgba(252,249,242,.5)}
.btn--invert:hover{background:var(--paper);color:var(--blue);border-color:var(--paper)}
.btn[disabled]{cursor:not-allowed;opacity:.5}
.btn[disabled]:hover{background:transparent;color:inherit}
.btn--solid[disabled]:hover{background:var(--blue);color:var(--paper)}

@media(prefers-reduced-motion:reduce){
  .btn,.btn__arrow{transition:none}
  .btn:hover .btn__arrow{transform:none}
}

/* ---------- sections ---------- */
.u{padding-block:var(--s5);position:relative}
.u--paper{background:var(--paper);color:var(--blue)}
.u--blue{background:var(--blue);color:var(--paper)}
.u--paper+.u--paper{padding-top:0}
/* Paper after a full-bleed photograph does not need the full --s5. The
   image's own edge is already the break between the two, so the padding is
   only holding type off it rather than separating two sheets of paper. */
.u--figure+.u--paper{padding-top:var(--s4)}

/* Any panel can take the blue surface. Two things have to reverse for it:
   --ink is #222, which is unreadable on blue, and --rule is a blue hairline
   that vanishes against it. Written generally rather than per-panel so the
   blue can move to a different beat by changing one class in the markup. */
.u--blue .u-about__lead,.u--blue .u-moment__text,
.u--blue .u-method__note,.u--blue .u-pack__body{color:inherit}
.u--blue .u-attr{color:var(--paper)}

/* ---------- a beat carried by one photograph ----------
   The copy sits at the foot on the same twelve columns as everywhere else,
   so the grid reads through the image rather than being suspended over it.
   Head and copy are both bottom-aligned, which is what makes them read as
   one line of type rather than two stacked blocks. */
.u--figure{
  padding-block:0;color:var(--paper);overflow:hidden;
  min-height:min(92svh,900px);display:flex;align-items:stretch;
}
.u--figure>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.u--figure>img[data-plx]{height:116%;top:-8%;transform:translateY(var(--drift,0%))}
/* Enough wash for white type to hold over bright turquoise, and no more —
   the picture stays open water above the halfway line. The copy sits over
   the lighter shallows on the right, which is what sets the depth here. */
.u--figure::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(0deg,rgba(4,8,44,.82),rgba(4,8,44,.34) 38%,rgba(4,8,44,0) 72%),
    linear-gradient(180deg,rgba(4,8,44,.52),rgba(4,8,44,.12) 30%,rgba(4,8,44,0) 52%);
}
/* Head at the top of the panel, copy at its foot, both in the right-hand
   columns: align-content spreads the two rows to the panel's edges, so the
   whole left side stays open photograph. */
.u--figure>.grid{position:relative;z-index:2;width:100%;
  padding-block:var(--s4);align-content:space-between}
.u-tide__head{
  grid-column:7/13;grid-row:1;
  /* A shadow rather than more wash: the point of lifting the head to the top
     is to leave the picture open, and the line crosses a bright sandbar that
     a gradient strong enough to fix would flatten. */
  text-shadow:0 1px 28px rgba(4,8,44,.55),0 0 2px rgba(4,8,44,.25);
}
.u-tide__copy{grid-column:7/13;grid-row:2;align-self:end;
  font-size:var(--t-lead);line-height:1.45}
.u-tide__copy>*+*{margin-top:var(--s2)}
.u-tide__copy .btn{margin-top:var(--s3)}
/* the outlined button has to reverse on a photograph too */
.u--figure .btn--line{color:var(--paper);border-color:rgba(252,249,242,.65)}
.u--figure .btn--line:hover{background:var(--paper);color:var(--blue);border-color:var(--paper)}
.u--blue .btn--line{color:var(--paper);border-color:rgba(252,249,242,.5)}
.u--blue .btn--line:hover{background:var(--paper);color:var(--blue);border-color:var(--paper)}
.u--blue .btn--solid{background:var(--paper);color:var(--blue);border-color:var(--paper)}
.u--blue .btn--solid:hover{background:transparent;color:var(--paper)}

/* A figure hero with nothing under its head. Two things follow from that.
   There is no second row for align-content to spread against, so the head
   hangs from the foot of the panel instead of floating at its top, over the
   heaviest part of the wash. And it is shorter than /source's: that hero IS
   the page's subject, while this one opens a page people came to in order to
   read something, so the first questions have to be on screen without a
   scroll. Head left, which keeps the right side — the bow — open picture. */
.u-tide--solo{min-height:min(62svh,560px)}
.u-tide--solo>.grid{align-content:end}
.u-tide--solo .u-tide__head{grid-column:1/9;grid-row:auto}

/* ABOUT — title left, its paragraph beside it, then the four statements
   under the paragraph in the same column. No rule: the statements' own top
   borders already do that work. */
/* Title left, the copy beside it — one row, nothing under it now that the
   four statements are gone. The copy inherits their size: --t-lead rather
   than body, which is what J was after in keeping the type and dropping the
   list. */
.u-about .c-title{grid-column:1/6}
.u-about__lead{
  grid-column:7/13;color:var(--ink);
  font-size:var(--t-lead);line-height:1.45;
}
.u-about__lead>*+*{margin-top:var(--s2)}

/* METHOD — the four ingredients, nearly edge to edge.
   J closed the gutter right down and made the frames taller, so the images
   read as one band rather than four cards, and each carries its own note.
   The inline .ing tokens and their popups are gone with the running
   paragraph they lived in — the sourcing they revealed is now always visible
   under each photograph. */
.u-method__head{grid-column:1/10}
.u-method__images{
  /* --s3, not --s4: every other head-to-content gap on the page is --s3,
     and at --s4 this one was 110px against the pack beat's 59px. */
  grid-column:1/13;margin-top:var(--s3);
  /* minmax(0,1fr) rather than a bare 1fr, so an image's intrinsic width
     can never push a track wider than its share. */
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(3px,.3vw,6px);
}
.u-method__images figure{margin:0}
/* the crop lives on a wrapper, not the figure: overflow:hidden on the figure
   clips the caption along with the photograph */
.u-method__shot{overflow:hidden;aspect-ratio:3/5;display:block}
.u-method__shot img{height:100%;object-fit:cover}
/* The band's 4.8px gutter is right for the photographs — they read as one
   strip — but it leaves the captions touching. The text gets its own inset
   so there is a real gutter between columns while the images stay edge to
   edge. 30em was pointless here: the column is always narrower than that. */
.u-method__images figcaption{margin-top:var(--s2);padding-right:8%}
.u-method__images h3{
  font-size:var(--t-body);font-weight:400;letter-spacing:.01em;
  margin-bottom:var(--s1);
}
/* The only body copy on the page that was still inheriting the panel's blue.
   Everything else — the pack copy, the about copy, the moment text — is
   --ink, and the name above stays blue, which is exactly how the moments
   columns below handle the same pairing. */
.u-method__images figcaption p{
  color:var(--ink);font-size:var(--t-body);line-height:1.5;text-wrap:pretty;
}

/* MOMENTS — three columns, no rules. The gutter and the Carentro name are
   enough to say where each one starts; a divider was a third signal saying
   the same thing.
   The head span is 1/11 because "Three moments of return with OSMEA." needs
   exactly 9 of the 12 columns for one line, so 1/10 sat on the threshold and
   text-wrap:balance split it into two half-empty lines. The copy carries an
   explicit break now, but the headroom does no harm. */
.u-moments__head{grid-column:1/11}
.u-moments__blocks{
  grid-column:1/13;margin-top:var(--s3);   /* matches the rest of the page */
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:var(--colgap);row-gap:var(--s3);
}
.u-moment{padding-top:var(--s2)}
.u-moment__name{
  font-family:Carentro,Georgia,serif;font-weight:400;text-transform:uppercase;
  font-size:var(--t-lead);letter-spacing:-.01em;line-height:1.1;
  margin-bottom:var(--s2);
}
/* A shorter measure than the column, which does two things now the rules
   are gone: brings the line down from ~52 characters to ~44, and leaves a
   real gutter between the three text blocks where the dividers used to be.
   In em so it tracks the type; on a phone the column is already narrower
   than this, so it has no effect there. */
.u-moment__text{color:var(--ink);text-wrap:pretty;max-width:22em}

/* CLOSE — divider, the taste line, the display title, the form */

/* ---------- phone type scale ----------
   Measured at 320-430: most copy lands at 29-46 characters a line, which is
   fine, but the ingredient captions were at 15-21 because they sit two-up in
   a ~170px column. Dropping the scale a step lifts every measure, and the
   captions come down further than the rest since they are the outlier.
   Kept off tablets — this is a phone-width problem, not a <860px one. */
@media(max-width:560px){
  :root{
    --t-body:16px;
    --t-lead:18px;
    --t-title:clamp(27px,7.2vw,33px);
    --t-display:clamp(44px,12vw,56px);
  }
  .u-method__images h3{font-size:15px}
  .u-method__images figcaption p{font-size:14px;line-height:1.45}
  /* the caption inset was there to open a gutter between four desktop
     columns; two-up on a phone it is just lost measure */
  .u-method__images figcaption{padding-right:0}
}

@media(max-width:860px){
  .u-about .c-title,.u-about__lead,
  .u-method__head,
  .u-moments__head{grid-column:1/13}
  .u-about__lead{margin-top:var(--s3)}
  .u-method__images{grid-template-columns:repeat(2,1fr);row-gap:var(--s2)}

  .u-tide__head,.u-tide__copy{grid-column:1/13}
  .u-tide__copy{margin-top:var(--s3)}
  .u--figure{min-height:min(84svh,700px)}
  /* After .u--figure, not before: same specificity, so only order wins. */
  .u-tide--solo{min-height:min(56svh,460px)}
  .u-moments__blocks{grid-template-columns:1fr}
}

/* visually hidden, still read aloud — the intact sentence beside a split one */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}


/* ---------- the pack beat: bottle + the six attribute boxes ----------
   Built from J's "attribute boxes.svg": a 254.89x316.2 outlined box, rx 20,
   1.73px stroke, the label in condensed caps at the top and the value in
   Carentro at the bottom with "mg" on its own line AT THE SAME SIZE. Every
   dimension is expressed as a share of the box's own width via container
   query units, so the proportions of the artwork survive any box size.
   Two deliberate departures, both flagged: the artwork's blue is #223E97 but
   the page's brand blue is #10069F and two blues side by side would read as
   a bug, so these use the brand blue; and the artwork's label face is
   Helvetica RD Condensed, which the project does not have, so the label is
   Haas at the largest size that fits the longest word. */
.u-pack__fig{grid-column:1/6;align-self:start;position:relative;aspect-ratio:4/5;margin:0}
.u-pack__fig img{position:absolute;inset:0;padding:var(--s3);
  width:100%;height:100%;object-fit:contain}
.u-pack__copy{grid-column:7/13;align-self:center}
.u-pack__copy>*+*{margin-top:var(--s2)}
.u-pack__copy .btn{margin-top:var(--s3)}
.u-pack__body{color:var(--ink);text-wrap:pretty}
/* 26px under a 52px heading was tight, and title->copy matching copy->boxes
   meant nothing grouped. More air after the heading, the copy and the boxes
   left close together as one block, then the clear break before the CTA. */
.u-pack__copy .c-title+.u-pack__body{margin-top:var(--s3)}

/* Three across, two down, inside the copy column and capped at about
   two-thirds of it, so the six read as a compact block beside the bottle
   rather than a full-width band under it. The aggregate line follows them,
   which keeps the breakdown next to the total as slide 5 asks. */
.u-attrs{
  margin-top:var(--s2);max-width:46%;
  list-style:none;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  /* The artwork sets its boxes 312.59 apart on a 254.89 box — a 22.6%
     gutter — but that was a single row on an artboard, and it reads loose
     stacked 3x2 here, so these sit at ~11%: solving 3b + 2(0.11b) = W gives
     a column gap of 3.42% of the block.
     Row gap has to be given separately: a percentage row-gap does NOT mirror
     the column one, it resolves against the grid's block size, which is
     circular for an auto-height grid (measured 14px where the column gap was
     19.6px). So it is set in vw to track the same share of the block. */
  column-gap:3.42%;row-gap:clamp(6px,.72vw,14px);
}
/* The boxes are J's artwork, inlined, not type re-rendered in a substitute
   face. He outlined the fonts in the SVGs, which is what makes this possible:
   no system condensed face is narrow enough to stand in for Helvetica RD
   Condensed, so every approximation was going to read wrong. This is exact,
   on every platform, at any size.

   Two things stay in CSS. Color comes from currentColor, so the artwork's
   #223E97 becomes the brand #10069F and the boxes cannot drift from the rest
   of the page. And the outline uses non-scaling-stroke at 1px: the artwork's
   1.73 in a 256.62 viewBox is 0.64px at the size these render, which would go
   faint and blurry where the rest of the page is a crisp 1px hairline.

   The glyphs are paths, so each box carries its real text in a visually
   hidden span and the SVG itself is hidden from assistive tech. */
.u-attr{aspect-ratio:256.62/317.93;color:var(--blue)}
.u-attr__art{display:block;width:100%;height:auto}
.u-attr__art path{fill:currentColor}
.u-attr__box{
  fill:none;stroke:currentColor;stroke-miterlimit:10;
  stroke-width:1;vector-effect:non-scaling-stroke;
}

@media(max-width:860px){
  .u-pack__fig,.u-pack__copy{grid-column:1/13}
  .u-pack__copy{margin-top:var(--s3)}
  /* row gap tracks the column gap (3.42% of the block) at phone width too */
  .u-attrs{max-width:none;grid-template-columns:repeat(3,1fr);row-gap:clamp(8px,3.1vw,16px)}
}


}


/* ---------- footer ----------
   Balanced between the Oura reference (grouped, compact, functional) and the
   Eternal Blue one (quiet and airy). What that means concretely: a brand line
   in body type instead of a display headline; column heads in Carentro at a
   readable size rather than tracked micro-caps; underline-only fields, no
   pill; and the wordmark returns as a graphic anchor bottom-left — large, but
   nothing like the 24.6vw clipped mark it replaces. */
.u-foot{background:var(--blue);color:var(--paper)}
.u-foot a{color:inherit}
/* J marked three gaps to close. They were one token too generous each:
   --s5 above the brand line, --s4 before the rule, --s3 below the base bar.
   Each steps down one level. */
.u-foot__top{padding-block:var(--s3) var(--s2)}

/* a statement, not a headline */
/* The brand line is the line printed on the bottle, so it is set in the
   brand voice rather than as body copy — which also gives the left column
   something to hold. */
.u-foot__line{
  grid-column:1/6;
  font-family:Carentro,Georgia,serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(22px,2.1vw,32px);line-height:1.12;letter-spacing:.005em;
  text-wrap:balance;
}

.u-foot__nav{grid-column:7/13;display:grid;grid-template-columns:repeat(3,1fr);
  column-gap:var(--colgap)}
.u-foot__nav h3{
  font-family:Carentro,Georgia,serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(17px,1.35vw,21px);letter-spacing:.015em;line-height:1;
  margin-bottom:var(--s2);
}
.u-foot__nav ul{list-style:none;margin:0;padding:0;font-size:var(--t-small)}
.u-foot__nav li+li{margin-top:11px}
.u-foot__nav a{text-decoration:none;opacity:.88}
.u-foot__nav a:hover{opacity:1;text-decoration:underline;text-underline-offset:5px}
/* the Instagram mark: drawn as strokes so it carries the footer's hairline
   weight and takes its color from currentColor like everything else */
/* The short footer, for the abbreviated build: no column headings, because
   three of them over four links reads as a sitemap for pages that do not
   exist. Links left, contact right. Scoped -- every other page still ships
   the full footer. */
.u-foot__nav--short{grid-template-columns:1fr auto;column-gap:var(--s3)}
.u-foot__nav--short ul{display:block}
.u-foot__nav--short .u-foot__social{margin-top:var(--s1)}
/* three links leave the right column short, so the signup no longer needs
   a full --s4 of clearance under it */
.u-foot__nav--short ~ .u-foot__sign{margin-top:var(--s3)}

.u-foot__social{margin-top:var(--s2)}
.u-foot__ig-slot{display:inline-block;line-height:0}
.u-foot__ig{
  width:22px;height:22px;display:block;
  fill:none;stroke:currentColor;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;opacity:.88;
}
.u-foot__ig-dot{fill:currentColor;stroke:none}
a:hover .u-foot__ig,.u-foot__ig-slot:hover .u-foot__ig{opacity:1}

/* the wordmark anchors the bottom-left, opposite the signup */
/* The wordmark is taken OUT of the row's sizing and hung from the bottom of
   a stretched wrapper. That is the only way this holds: with the mark in
   flow, its negative margin changed its own margin box, which changed which
   item set the row height, which moved the button it was trying to align to
   — a loop, and the offset kept flipping sign as I chased it.

   Absolute means the row is sized by the signup alone, so the wrapper's
   bottom IS the signup's bottom, which is the button's bottom.

   The offset is derived from Carentro's real metrics: ascent 1.222em,
   descent 0.583em, an em box of 1.805em, so line-height .88 gives a
   half-leading of (0.88 - 1.805)/2 = -0.4625em and the baseline sits
   0.1205em above the box bottom. Pushing the box down by exactly that lands
   the baseline on the wrapper's edge.

   CAVEAT: this lands the baseline on the button's bottom edge at some
   viewport widths and about 22px above it at others, and I could not pin
   down why — the signup's height and the row's sizing interact, and repeat
   measurements of the same width disagreed. Left at the derived value
   rather than papered over with a magic pixel offset, which made it worse.
   Worth another look if it reads wrong. */
.u-foot__markwrap{grid-column:1/6;position:relative}
.u-foot__mark{
  position:absolute;left:0;bottom:-.1205em;white-space:nowrap;
  font-family:Carentro,Georgia,serif;font-weight:400;
  font-size:clamp(64px,10vw,150px);letter-spacing:.02em;line-height:.88;
}

/* Both end-aligned, which is what makes the baseline alignment hold: with
   start on this one, whichever of the two happened to set the row height
   decided where the row ended, and the wordmark's baseline drifted 22px off
   at some widths. End on both means both bottoms ARE the row end, whichever
   is taller. */
.u-foot__sign{grid-column:7/13;margin-top:var(--s4)}
.u-foot__sign p.lead-in{font-size:var(--t-small);line-height:1.5;max-width:34em}
/* underline only: a bordered pill reads as a form, this reads as a line */
.u-foot__sign label{display:block;margin-top:var(--s2)}
.u-foot__sign input{
  width:100%;background:transparent;border:0;
  border-bottom:1px solid rgba(252,249,242,.45);
  color:var(--paper);padding:12px 0;outline-offset:4px;
}
.u-foot__sign input::placeholder{color:var(--paper);opacity:.55}
.u-foot__sign input:focus{border-bottom-color:var(--paper)}
.u-foot__fine{margin-top:14px;font-size:12px;line-height:1.55;opacity:.78;max-width:42em}
.u-foot__fine a{text-decoration:underline;text-underline-offset:3px}
.u-foot__sign .btn{margin-top:var(--s2)}
/* No min-height: an empty status line was holding 27px open under the
   button for its whole life, which put the signup block's bottom below the
   button and nothing could align to it. */
.u-foot__msg{margin-top:var(--s1);font-size:12px;line-height:1.55}
.u-foot__msg:empty{margin-top:0}

.u-foot__rule{grid-column:1/13;height:1px;background:rgba(252,249,242,.28);
  margin-top:var(--s3)}
/* The base bar sits on the same twelve columns as everything else, so the
   legal links start on the shared column-7 line rather than trailing the
   copyright wherever it happens to end. */
.u-foot__base{
  grid-column:1/13;
  padding:var(--s2) 0 calc(var(--s2) + env(safe-area-inset-bottom,0px));
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--colgap);align-items:baseline;
  font-size:12px;letter-spacing:.02em;opacity:.8;
}
.u-foot__copy{grid-column:1/7}
.u-foot__legal{grid-column:7/13;display:flex;flex-wrap:wrap;gap:8px var(--s3)}
.u-foot__base a{text-decoration:none}
.u-foot__base a:hover{text-decoration:underline;text-underline-offset:4px}

@media(max-width:860px){
  .u-foot__line,.u-foot__nav,.u-foot__markwrap,.u-foot__sign{grid-column:1/13}
  .u-foot__nav{grid-template-columns:1fr 1fr;row-gap:var(--s3);margin-top:var(--s4)}
  /* stacked: back in flow, or it would sit on top of the signup. The
     clearance goes on the WRAPPER — on the mark it did nothing, because the
     mark is no longer the grid item. */
  .u-foot__markwrap{margin-top:var(--s4)}
  .u-foot__mark{position:static;font-size:clamp(44px,15vw,72px)}
  .u-foot__sign{margin-top:var(--s3)}
}

/* ---------- phone overrides that must outrank the <=860px block ----------
   Same specificity, so these have to come after it. */
@media(max-width:560px){
  /* two attribute boxes across, not three: at three they were ~109px wide
     and both two-word labels wrapped inside a box that small */
  .u-attrs{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ---------- interior pages ----------
   The homepage header floats white over the film and the orb script pins it.
   An interior page has no hero to float over, so it is a static paper bar
   from the start. Beats .u--blue-style overrides on specificity, and the
   orb's position:fixed rule never applies because .orb-on is not set. */
.u-head{
  position:static;background:var(--paper);color:var(--blue);
  border-bottom:var(--hairline);
  padding:calc(18px + env(safe-area-inset-top,0px)) var(--gut) 18px;
}

/* The attribute boxes as a full-width band of six, which is how slide 5 lays
   them out. On the homepage they sit inside the copy column instead. */
.u-attrs--wide{
  grid-column:1/13;max-width:none;margin-top:var(--s3);
  grid-template-columns:repeat(6,minmax(0,1fr));
}
.u-pack__agg{
  grid-column:1/13;margin-top:var(--s2);
  font-size:var(--t-lead);line-height:1.45;color:var(--ink);
}

/* compare.css is written layout-independent so it can sit on either
   stylesheet, so the grid placement lives here. */
.u-cmp__head{grid-column:1/11}
.u-cmp__wrap{grid-column:1/13}

@media(max-width:860px){
  .u-cmp__head{grid-column:1/13}
  .u-attrs--wide{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ---------- disclosure list (FAQ), in named sets ----------
   Nineteen rows in one stack read as a wall: every row the same weight, and
   nothing for the eye to navigate by. The questions are grouped into five
   sets instead, and a set keeps the shape the rest of the site uses for a
   head beside its body — label in the left columns, content from column 5.

   The label sticks while its own rows scroll past, so the page always says
   which part of the drink you are reading about; because .u-head is static,
   it can hang from the top of the viewport with no offset to subtract.

   The two registers are Carentro for the label and Haas for the questions:
   the label names a part of the drink and carries the brand voice, the
   questions are things a person actually says. Setting both in Carentro made
   them compete; splitting the families lets the label take the larger size
   without the rows losing rank. */
.u-faq{
  grid-column:1/13;
  /* The scale has four steps and nothing between a section head (--t-title)
     and a support paragraph (--t-lead). A set label is exactly that missing
     rank — smaller than the head of the page, larger than a row — so it is
     derived from the two it sits between rather than invented alongside. */
  --t-set:clamp(24px,2.2vw,34px);
}
/* The rule that opens a set runs the full twelve columns, so it carries the
   label as well as the rows and reads as the set's own line rather than as
   the first row's top border. It lives on the set for that reason, and the
   first row gives its border up. The rules between questions, and the one
   closing the last of them, stay in the rows column: those belong to the
   list, not to the set — and the last question in a set closes with nothing,
   because the next set's rule is already the line under it.

   No margin between sets either. Every rule on this page carries --s2 of air
   above and below, so the questions run on one rhythm from the first to the
   nineteenth; a set-opening rule differs from a between-questions rule only
   in how far it reaches. The label and its width are what mark a set, not a
   gap in the beat. */
.u-faq__set{
  grid-column:1/13;scroll-margin-top:var(--s3);
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--colgap);
  border-top:var(--rule);
}
.u-faq__label{
  grid-column:1/4;align-self:start;position:sticky;top:var(--s2);
  /* Less than the row's --s2 so the two cap-heights line up: the label is
     half again the size of a question, so equal padding hangs it low. */
  padding-top:calc(var(--s2) - .14em);
  font-family:Carentro,Georgia,serif;font-weight:400;text-transform:uppercase;
  font-size:var(--t-set);letter-spacing:-.015em;line-height:1.05;
  text-wrap:balance;
}
.u-faq__rows{grid-column:5/13}

/* The marker sits at the far right of the question row rather than beside
   the text, so a column of + signs runs down the right edge of the set. */
.u-faq details{border-top:var(--rule);padding-block:var(--s2)}
.u-faq details:first-of-type{border-top:0}
.u-faq summary{
  display:flex;justify-content:space-between;gap:var(--s3);
  align-items:baseline;cursor:pointer;list-style:none;
  /* Haas, and sentence case with it: a question is something a person says,
     and Haas set in caps at this size reads as a UI label rather than speech.
     Larger than the answer it opens, so the row keeps rank over its own body. */
  font-family:Haas,"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:400;
  font-size:var(--t-lead);letter-spacing:-.01em;line-height:1.25;
}
.u-faq summary::-webkit-details-marker{display:none}
.u-faq summary::after{
  content:"+";flex:none;opacity:.55;
  transition:opacity .35s var(--e),transform .35s var(--e);
}
.u-faq details[open] summary::after{content:"\2212"}   /* minus, not a hyphen */
/* The whole row is the target, so the marker answers a hover anywhere along
   it — hovering a question and watching only the far end stay dead read as
   if the text were not the control. */
.u-faq summary:hover::after{opacity:1;transform:translateX(-3px)}
.u-faq summary:focus-visible{outline:2px solid currentColor;outline-offset:6px}
.u-faq details>:not(summary){
  margin-top:var(--s2);max-width:34em;
  color:var(--ink);font-size:var(--t-body);line-height:1.55;text-wrap:pretty;
}
.u-faq details a{text-decoration:underline;text-underline-offset:4px}

@media(prefers-reduced-motion:reduce){
  .u-faq summary::after{transition:none}
  .u-faq summary:hover::after{transform:none}
}

/* ---------- figure variants for the interior pages ----------
   The pack figure is built for the bottle: a contained PNG on air. A
   photograph wants to fill its frame, and the portrait film wants its own
   ratio rather than the bottle's 4/5. */
.u-pack__fig--photo{aspect-ratio:4/5;overflow:hidden}
/* These are 1080x1920 portraits in a 4/5 frame, which shows 70% of the
   height. Measured: the subject sits between 37% and 87% down the file, so
   45% places the window at 15-85% and holds them. */
.u-pack__fig--photo img{position:static;width:100%;height:100%;padding:0;
  object-fit:cover;object-position:center 45%}
.u-pack__fig--film{aspect-ratio:9/16;overflow:hidden;background:var(--blue)}
.u-film{width:100%;height:100%;object-fit:cover;display:block}
.u-cite{font-style:normal;letter-spacing:.14em;text-transform:uppercase}

@media(max-width:860px){
  /* Folded to one column the label cannot stick to anything useful, so it
     becomes a plain heading sitting above the rows it names. Stacked, it
     needs the same --s2 over it that a question gets, or its cap sits on the
     set rule; the air under it then comes from the first row's own padding,
     which keeps every gap in the column equal to every other. */
  .u-faq__label{grid-column:1/13;position:static;padding-top:var(--s2);margin-bottom:0}
  .u-faq__rows{grid-column:1/13}
}

/* Last in the file on purpose: the phone rules have the same specificity as
   the <=860px ones above and only win by order. Anything phone-specific that
   a tablet rule also sets has to live down here. */
@media(max-width:560px){
  /* three across: at two, each box is about 170px and the six of them
     take most of a phone screen on their own */
  .u-attrs,.u-attrs--wide{grid-template-columns:repeat(3,minmax(0,1fr))}
}


/* ---------- CONTACT ----------
   Heading and the direct address on the left, the form on the right, on the
   same two measures every other section uses: 1-5 and 6-13. The form is
   styled as a sequence of ruled lines rather than boxes, for the same reason
   the footer signup is — a bordered field reads as a web form, a line reads
   as a sheet of paper you write on. */
.u-contact__side{grid-column:1/5}
/* No heading over this: the hero already says Say hello, and a second title
   three inches under it was saying the same thing twice. The sentence IS the
   opening line now, so it carries a step between --t-lead and --t-title --
   big enough to open the section, short of a display size that Haas, a body
   face, starts to look stretched at. */
.u-contact__say{color:var(--ink);font-size:clamp(23px,2.3vw,35px);line-height:1.24;letter-spacing:-.01em}
.u-contact__direct{
  margin-top:var(--s3);color:var(--ink);
  font-size:var(--t-lead);line-height:1.75;
}
/* No standing underline. Two lines of plain contact detail read as a block
   rather than as two links, and swiss.css still underlines them on hover,
   so the affordance is there when it is wanted. */
.u-contact__direct a{text-decoration:none}

/* 7, not 6. The stocking panel below splits at the half, and the form's
   left edge was landing a whole column left of it -- the two read as two
   different measures stacked on each other. Column 7 IS the half: solving
   the grid, column 7 begins at gut + 6col + 6gap, which reduces to
   50% + half a column gap. So the form opens on the same line the
   photograph closes on, and both are on the grid rather than near it. */
.u-form{grid-column:7/13}
/* Two fields side by side, then full-width ones under them. The pair folds
   at the same width the rest of the page does. */
.u-form__pair{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:var(--colgap);
}
.u-form__field{display:block}
/* Direct children only. Without the child combinator this also caught Email,
   which is a .u-form__field sitting next to Name INSIDE the pair, and pushed
   it a whole --s2 below its neighbor in its own grid cell. */
.u-form>.u-form__pair+.u-form__field,
.u-form>.u-form__field+.u-form__field{margin-top:var(--s2)}
.u-form__label{
  display:block;
  font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue);opacity:.72;
}
/* Full outlines, to match the mineral boxes on the homepage: those are
   artwork, a 1px non-scaling stroke in currentColor on the brand blue, and
   the 10px radius is the one .btn already uses so a field and a button are
   the same object at the same scale. */
.u-form input,
.u-form select,
.u-form textarea{
  /* font:inherit for the textarea and select: swiss.css sets it for input and
     button only, and a browser default would put Arial in two of four fields */
  font:inherit;font-size:var(--t-body);
  width:100%;background:transparent;
  border:1px solid var(--blue);border-radius:10px;
  color:var(--ink);padding:14px 16px;margin-top:8px;
}
.u-form textarea{resize:vertical;min-height:8em;line-height:1.55}
/* The select keeps its own arrow: suppressing the native one means drawing a
   replacement, and the native control is the one a phone knows how to open.
   Its own left padding has to be nudged back -- a select indents its text a
   little further than an input does at the same padding. */
.u-form select{padding-left:12px}
/* The outline is already the field, so focus doubles it inward rather than
   drawing a second ring outside the box. */
.u-form input:focus,
.u-form select:focus,
.u-form textarea:focus{
  outline:none;box-shadow:inset 0 0 0 1px var(--blue);
}
/* A field the browser has marked invalid, but only once it has been touched
   and submitted -- :invalid alone paints every empty required field red on
   first paint. */
.u-form.is-checked input:invalid,
.u-form.is-checked textarea:invalid{border-color:var(--flag)}
.u-form.is-checked input:invalid:focus,
.u-form.is-checked textarea:invalid:focus{box-shadow:inset 0 0 0 1px var(--flag)}

.u-form__submit{margin-top:var(--s3)}
.u-form__msg{
  margin-top:var(--s1);font-size:var(--t-small);line-height:1.55;
  color:var(--ink);
}
.u-form__msg a{text-decoration:underline;text-underline-offset:3px}
/* The honeypot. Off-canvas rather than display:none, because some bots skip
   anything hidden; a person never reaches it, since it is also tabindex=-1. */
.u-form__bot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

@media(max-width:860px){
  .u-contact__side,.u-form{grid-column:1/13}
  .u-form{margin-top:var(--s3)}
}
@media(max-width:560px){
  /* Name and Email stack: side by side they are about 130px each, which is
     narrower than the address most people type into one. */
  .u-form__pair{grid-template-columns:minmax(0,1fr);row-gap:var(--s2)}
}

/* The stocking panel on /contact: photograph bleeding off the left edge,
   copy beside it on blue, on the page's own columns 7-13.

   Why it is not a full-bleed background. The file is a portrait, 1001x1572.
   object-fit:cover across a band is bound by the WIDTH -- the band is always
   wider than 0.64:1 -- so object-position's horizontal half does nothing and
   the boat lands wherever the file puts it: at 1440 it renders 768px tall
   (taller than any sane panel) spanning x 216-1007, which runs straight
   through the type on 7-13, at a 1.4x upscale of an already small file.
   Held to a column instead, it renders at about 0.6x: the whole photograph,
   sharp, and the type always clear of it. A landscape original would make
   the full-bleed version possible; more pixels alone would not.

   clamp rather than a bare percentage: at 1920 a flat 42% is 806px, which
   crops the photograph harder than the panel is tall. */
.u-stock{
  position:relative;overflow:hidden;
  padding-block:0;min-height:min(78svh,720px);
  display:flex;align-items:center;
}
.u-stock__fig{
  position:absolute;left:0;top:0;bottom:0;margin:0;
  /* The half, plus half a gutter: that is exactly where column 7 begins
     (gut + 6col + 6gap reduces to 50% + colgap/2), so the photograph's edge
     is a grid line rather than a measurement that happens to be near one.
     It is 11px off a true 50/50 at 1440 -- under one percent -- and it buys
     the form above it an edge to open on. */
  width:calc(50% + var(--colgap) / 2);
}
/* not .u--figure's img rule: that one is inset:0 on the whole section */
/* Centred, and that is the whole rule now. The photograph is square and
   the panel is close to square too -- 728x720 at 1440 -- so cover scales it
   to the height and takes a few pixels off the sides; at 1920 the panel is
   960x720 and about 240px comes off top and bottom instead. The subject is
   a repeating grid of bottles, so there is no horizon or stern to protect
   and nothing a percentage could save that centring does not. The 66% this
   replaced was measured on the boat, which was a portrait with one subject
   in it and lost its stern below 64%. */
.u-stock__fig img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.u-stock>.grid{position:relative;z-index:2;width:100%;padding-block:var(--s4)}
/* 8, not 7: at a straight 50/50 the photograph ends on the grid's own
   midpoint and column 7 starts 4px after it, so the type would sit flush
   against the picture's edge. Column 8 opens a real gutter -- 125px at
   1440, 167 at 1920 -- between the two halves. */
.u-stock__head{grid-column:8/13}
.u-stock__lead{grid-column:8/13;margin-top:var(--s2);font-size:var(--t-lead);line-height:1.45}
.u-stock__lead .btn{margin-top:var(--s3)}

@media(max-width:860px){
  /* Stacked: the photograph takes the top of the panel at a ratio close to
     its own -- square, since the file is square, so the whole frame survives
     the phone -- and the copy sits under it. Absolute positioning comes off,
     so the figure is a normal block again and the section gets its padding
     back under it. */
  /* padding-bottom stays 0: the grid's own --s4 closes the panel, and the
     section's --s5 on top of it left a screen of empty blue under the button */
  .u-stock{display:block;min-height:0}
  .u-stock__fig{position:static;width:auto;aspect-ratio:1/1}
  .u-stock>.grid{padding-top:var(--s4)}
  .u-stock__head,.u-stock__lead{grid-column:1/13}
}

/* ---------- the paper footer, /contact only ----------
   The stocking panel on that page is blue and 720px tall, and the footer is
   blue, so the two ran together as one field: the only edge you could see
   was the photograph's, which covers half the width. Paper here gives the
   panel a bottom.

   Everything in the footer already takes its color from currentColor, so
   the surface swap is most of the job; what is listed below is the handful
   of places that name paper explicitly. Last in the file because it shares
   specificity with the rules it is overriding. The button is swapped in the
   markup, btn--invert to btn--line, rather than fought with here. */
.u-foot--paper{background:var(--paper);color:var(--blue)}
.u-foot--paper .u-foot__sign input{
  border-bottom-color:rgba(16,6,159,.4);color:var(--ink);
}
/* .62, not the blue footer's .55: measured, blue at .55 over paper is
   3.93:1 and at .62 it is 4.86:1, which clears 4.5 */
.u-foot--paper .u-foot__sign input::placeholder{color:var(--blue);opacity:.62}
.u-foot--paper .u-foot__sign input:focus{border-bottom-color:var(--blue)}
.u-foot--paper .u-foot__rule{background:rgba(16,6,159,.24)}
/* the fine print and the base bar carried their contrast with opacity, which
   on paper thins blue type to gray; they go to ink at full strength instead */
.u-foot--paper .u-foot__fine,
.u-foot--paper .u-foot__base{color:var(--ink);opacity:1}
.u-foot--paper .u-foot__fine{color:rgba(34,34,34,.78)}

/* ---------- phone rhythm ----------
   Measured on the homepage at 390x844: the bottle section closes with --s5
   and the taste section opens with another, 135 + 135, so 289px of empty
   paper -- a third of the screen -- sat between the Meet OSMEA button and
   the next heading. (The .u--paper + .u--paper collapse does not catch this
   pair: the nutrition drawer's markup sits between them in the DOM, so they
   are not adjacent siblings.) The scale itself comes down on phones rather
   than this one gap being patched, so every section keeps the same rhythm.

   Last in the file, after every other phone block, because it is the token
   the rest of them resolve against. */
@media(max-width:760px){
  :root{
    --s5:clamp(56px,7.6vh,100px);
    --s4:clamp(52px,7vh,88px);
  }

  /* The mineral boxes ran the full 350px column, 109px a box and 281px of
     screen for the six. Capped at 70% of the column they come to 76px, which
     is 51% of the area -- the reduction J asked for -- and about 194px for
     the block. They are artwork, so every part of them scales together; the
     floor is the labels, and MAGNESIUM is the longest of them. */
  .u-attrs{max-width:70%}
}

/* ---------- the footer, stacked ----------
   Measured at 390 before this: line, links, WORDMARK, signup, rule, legal --
   the wordmark landed in the middle of the column, which is not what it is
   for, and every pair sat about 60px apart for 771px of footer.

   order, not a DOM change: the same markup has to keep working as a
   two-column footer on desktop, where the wordmark is hung from the bottom
   of its own wrapper and the signup sits beside it. Stacked it goes last
   instead, directly over the hairline, so it signs the page off the way it
   does on desktop. Grid places items in order-modified document order, and
   every child is already grid-column 1/13 here, so nothing else moves.

   Each child needs an explicit order or the ones left at 0 jump the queue. */
@media(max-width:860px){
  .u-foot__line{order:1}
  .u-foot__nav{order:2}
  .u-foot__nav--short ~ .u-foot__sign,
  .u-foot__sign{order:3}
  .u-foot__markwrap{order:4;margin-top:var(--s3)}
  .u-foot__rule{order:5;margin-top:var(--s2)}
  .u-foot__base{order:6}

  /* Stacked, the three blocks were separated by air alone and the only rule
     in the footer was the one over the legal bar. One band each: the brand
     line, then the links and the address, then the signup. Even air on both
     sides of every rule, so the column reads as a set of rows rather than
     things that happen to follow each other. The wordmark deliberately
     keeps open space -- it sits between the last rule and the legal one. */
  .u-foot__nav,
  .u-foot__sign{
    border-top:1px solid rgba(252,249,242,.28);
    margin-top:var(--s2);padding-top:var(--s2);
  }
  /* ...and the even air was not actually even (J, 2026-10-28: "the footer
     on mobile is not well organized"). `.u-foot__nav--short ~ .u-foot__sign`
     up at the top of the file carries --s3 and outranks the rule above on
     specificity, so on every page but /dev/product-new the signup's hairline
     had 45.6px over it and 21.9 under, while the nav's had 21.9 on both
     sides. Two rules in one column, set to two different rhythms. */
  .u-foot__nav--short ~ .u-foot__sign{margin-top:var(--s2)}
  /* the inverted footer on /faq and /contact needs the blue hairline, the
     same swap .u-foot__rule already makes */
  .u-foot--paper .u-foot__nav,
  .u-foot--paper .u-foot__sign{border-top-color:rgba(16,6,159,.24)}
}

@media(max-width:560px){
  /* Two columns put the address hard against the right edge with nothing to
     line up to. One column instead, but each list laid out across rather
     than down: links on one line, the address and the Instagram mark on the
     next. Stacking all four took the block from 61px to 152 -- organized,
     but the opposite of tighter. This is both. */
  /* --s1 between the two rows, not --s2: the band's own air is --s2, so at
     --s2 inside it the four links read as four separate things rather than
     as one block between two rules. Inside tighter than outside. */
  .u-foot__nav--short{grid-template-columns:minmax(0,1fr);row-gap:var(--s1)}
  /* --s2 between links, which is the gap the legal row at the foot of the
     same column already uses. At --s3 the footer set its two rows of links
     to two different measures. */
  .u-foot__nav--short ul{
    display:flex;flex-wrap:wrap;align-items:center;gap:10px var(--s2);
  }
  .u-foot__nav--short li+li{margin-top:0}
  /* The mark takes the right margin. Trailing the address by a --s3 tab left
     it 118px short of the edge, aligned to nothing above or below it -- the
     one thing in the column standing on a line of its own invention. Against
     the margin it closes the row the way the address opens it. */
  .u-foot__nav--short .u-foot__social{margin-top:0;margin-left:auto}
  /* and the slot is an inline-block sitting on a baseline, so the mark's row
     was 7px taller than the address's. Block takes the leading out and both
     rows of the band are one line tall. */
  .u-foot__nav--short .u-foot__ig-slot{display:block}

  /* At the foot of the column the wordmark is the sign-off, so it takes the
     width it is given rather than the 58px it was set at mid-stack. */
  .u-foot__mark{font-size:clamp(60px,21vw,110px)}

  /* The base bar was still trying to hold the twelve columns, which split
     the copyright over two lines on the left and wrapped the legal links
     against the right edge. Stacked, both read on one margin. */
  .u-foot__base{display:block}
  .u-foot__copy{display:block;margin-bottom:.85em}
  .u-foot__legal{display:flex;flex-wrap:wrap;gap:8px var(--s2)}
}

/* ---------- the legal pages ----------
   Privacy, Terms and Accessibility. Reached from the footer of every page,
   so they carry the site's own chrome; what they do not need is the
   full-bleed photograph the FAQ and /contact open on. Nobody arrives here to
   be sold anything, so the page opens on type.

   Head beside its body, which is the measure swiss.css names for exactly
   this -- a head on the left columns, its content on the right. Stacking
   them instead and indenting the text to the FAQ's rows column left the
   whole lower left of the page empty: on the FAQ a sticky set label stands
   there, and these pages have one block each, with no second thing to name.
   Side by side, the head fills the column it is holding open.

   The rule sits at the top of the body column rather than under the head, so
   it starts on the same line the title does and reads as the edge of the
   text block it opens -- not as a divider under the page's name. */
.u-legal{
  /* --s5 opens a page that began with a photograph. This one begins directly
     under a static nav, so the head would hang a third of a screen below it. */
  padding-top:var(--s4);
}
.u-legal .grid{align-items:start}
/* Head and the line under it are one cell, not two rows. Given a row each,
   the body column spans both and grid hands its surplus height to the rows
   it spans -- which pushed the second line a third of the way down the page,
   away from the title it belongs to. */
.u-legal__side{
  grid-column:1/7;
  /* A policy runs for several screens and the left column holds one title,
     so it sticks the way a FAQ set label does: the page always says which
     document you are reading. .u-head is static, so there is no offset to
     subtract. */
  position:sticky;top:var(--s3);align-self:start;
}
/* The same rank /contact's opening line takes: above a support paragraph,
   short of a title. These two lines are the whole left column, so the second
   one has to carry rather than caption. */
.u-legal__say{
  margin:var(--s2) 0 0;color:var(--ink);
  font-size:clamp(23px,2.3vw,35px);line-height:1.24;letter-spacing:-.01em;
}
.u-legal__body{
  grid-column:7/13;
  padding-top:var(--s2);border-top:var(--rule);
  color:var(--ink);font-size:var(--t-body);line-height:1.55;text-wrap:pretty;
}
/* The rules run to the right margin, the type does not: 34em is the measure
   the FAQ sets its answers on, and six columns at 1440 is nearer 95
   characters. Same split the FAQ makes -- full-width rule, held text. */
/* The rules run to the right margin, the type does not: 34em is the measure
   the FAQ sets its answers on, and six columns at 1440 is nearer 95
   characters. Same split the FAQ makes -- full-width rule, held text. */
.u-legal__body p,.u-legal__body li,.u-legal__body dd{max-width:34em}
.u-legal__body a{text-decoration:underline;text-underline-offset:4px}
.u-legal__body>*+p{margin-top:var(--s2)}

/* Section heads, in Haas rather than Carentro. The FAQ makes the same split
   and for the same reason: Carentro is the brand's voice, and these headings
   are not speaking -- they are telling you where you are in a document. */
.u-legal__body h2{
  margin:var(--s3) 0 var(--s2);padding-top:var(--s2);border-top:var(--rule);
  font-family:Haas,"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:400;
  font-size:var(--t-lead);letter-spacing:-.01em;line-height:1.25;color:var(--blue);
}
.u-legal__body h2:first-child{margin-top:0;padding-top:0;border-top:0}
/* A sub-head inside a section: no rule, since the rule is what separates
   sections and a second one here would make a sub-head look like a peer. */
.u-legal__body h3{
  margin:var(--s2) 0 var(--s1);font-weight:400;font-size:var(--t-body);
  letter-spacing:.14em;text-transform:uppercase;color:var(--blue);
}

.u-legal__body ul{margin:var(--s2) 0 0;padding:0;list-style:none}
.u-legal__body li{position:relative;padding-left:1.5em}
.u-legal__body li+li{margin-top:var(--s1)}
/* An en dash rather than a bullet: the rest of the page is rules and type,
   and a filled disc is the one round thing on it. */
.u-legal__body li::before{content:"\2013";position:absolute;left:0;opacity:.5}

/* The cookie table, as a description list so it reads in one column on a
   phone without a horizontal scroll. */
.u-legal__dl{margin:var(--s2) 0 0;display:grid;grid-template-columns:auto 1fr;
  column-gap:var(--s2);row-gap:var(--s1);align-items:baseline}
.u-legal__dl dt{font-family:Haas,"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:var(--t-small);letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue);white-space:nowrap}
.u-legal__dl dd{margin:0}

/* The line that dates the document, under the title in the left column. */
.u-legal__meta{
  margin-top:var(--s3);font-size:var(--t-small);line-height:1.6;color:var(--ink);
}

/* What is still missing, said where it is missing, and in red: not brand
   blue, because blue is the voice of the finished page and this line is the
   site talking about itself. */
.u-legal__pending{margin-top:var(--s3);padding-top:var(--s2);border-top:var(--rule)}
.u-legal__pending-note{
  font-size:var(--t-micro);letter-spacing:.22em;text-transform:uppercase;
  color:var(--flag);margin-bottom:var(--s1);
}

@media(max-width:860px){
  /* Folded to one column the head sits above its body, and the body's rule
     becomes the line between the two. */
  .u-legal__side,.u-legal__body{grid-column:1/13}
  /* Nothing to stick beside once the body is under rather than next to it. */
  .u-legal__side{position:static}
  .u-legal__body{margin-top:var(--s3)}
}