Blame for assets/layout/layout.css

/*
  taste-skill layout.css - layout v4 (references/layout-v4.md): one section per screen, equal left and
  right edges, the ten hero types (heroes.json) and the display tokens a font pairing sets (fonts.json).
  Link it after system.css, ui/cards.css and backgrounds/backgrounds.css; load layout.js after system.js.

  Section   system.css sets the rhythm: every main > section exactly one or two screens (--h), its h2
            first, --padt under its top; this file adds the heroes and the display tokens.
  Hero      <section class="hero hero--<type>"><div class="wrap"><div class="hero-text ..">..</div></div>
            first in main: exactly the first screen, the fixed header over its top.
  Edges     one container; no one-sided bleed (a block stands on the lines or runs edge to edge).
  Type      start.mjs deals the pairing (VI-02) and prints --font-*, --display-weight (400; 400 to 500
            on tech) and --display-tracking; a page may add --display-stretch, --display-axes and
            --ly-scale (the face's optical size against the default grotesk, 1 when unsure).
  Place     a place's hero is never dealt: always hero--place (Recipe 3: the photograph under the
            header, the words under it on the ground). Nothing is laid over a photograph to make
            words readable, on any type: no scrim, gradient or veil (PH-31, VI-49).

  Every number here is in references/layout-v4.md with what it was measured on; change it there first.
*/

/* ---------------------------------------------------------------- tokens */
:root {
  --ly-nav: var(--nav, 72px);
  --ly-screen: calc(100svh - var(--ly-nav));      /* one screen under the fixed header: 828 at 1440x900, 788 at 390x844 */
  --ly-pad: var(--padt, 120px);
  --ly-hero-pad: var(--hgap, 48px);
  --ly-head-gap: var(--head-gap, 48px);            /* a section's heading block to its visual (system.css) */
  /* the content box of one screen (708 at 1440x900) and of the hero (716 = 900 - 72 - 48 - 64) */
  --ly-fit: calc(100svh - var(--padt, 120px) - var(--padb, 72px) - var(--bar, 0px));
  --ly-hero-h: calc(100svh - var(--nav, 72px) - var(--hgap, 48px) - var(--hpadb, 64px) - var(--bar, 0px));
  --ly-scale: 1;
  /* hero sizes: straight lines from 390 to 1440, times the pairing's --ly-scale (layout-v4.md, section 3) */
  --ly-h1:       calc(var(--ly-scale) * clamp(40px, 3.048vw + 28.11px, 72px));    /* 72 / 40: split, product, film, centred */
  --ly-h1-xl:    calc(var(--ly-scale) * clamp(44px, 3.429vw + 30.63px, 80px));    /* 80 / 44: photo */
  --ly-h1-col:   calc(var(--ly-scale) * clamp(40px, 2.286vw + 31.09px, 64px));    /* 64 / 40: collage */
  --ly-h1-mega:  calc(var(--ly-scale) * clamp(56px, 9.524vw + 18.86px, 156px));   /* 156 / 56: editorial */
  --ly-h1-word:  calc(var(--ly-scale) * clamp(54px, 8.571vw + 20.57px, 144px));   /* 144 / 54: word */
  --ly-h1-quiet: calc(var(--ly-scale) * clamp(34px, 2.095vw + 25.83px, 56px));    /* 56 / 34: statement */
  --ly-h1-side:  calc(var(--ly-scale) * clamp(40px, 1.143vw + 35.54px, 52px));    /* 52 / 40: triptych */
  --ly-lead: clamp(17px, .286vw + 15.89px, 20px);                                  /* 20 / 17 */
}

/* the pairing's display axes (fonts.json): width through font-stretch, the rest as settings */
h1, h2, h3, .ly-display { font-stretch: var(--display-stretch, 100%); font-variation-settings: var(--display-axes, normal); }
.card h3, .card h4, .tile h3 { font-stretch: 100%; font-variation-settings: normal; }

/* ---------------------------------------------------------------- one section per screen
   system.css makes every main > section exactly one or two screens (--h) with its h2 first; nothing
   here centres a section's content (a short block centred in a tall screen hides that it is short) */
main > .section .section-head { margin-bottom: var(--ly-head-gap); }
/* a visual sized to what one screen leaves after its heading (--ly-head, about 160px for a two-line
   h2 and a sub-line): or put .fill on it inside the section's .wrap */
.fit-screen { height: clamp(280px, calc(var(--ly-fit) - var(--ly-head, 160px) - var(--ly-head-gap)), 720px); }
@media (max-width: 1023px) { .fit-screen { height: auto; } }

/* ---------------------------------------------------------------- edges */
/* no one-sided bleed: a block either stands on the container's lines or runs edge to edge (a
   full-bleed photograph or ground). layout-check.js flags a block that touches one viewport edge. */

/* ---------------------------------------------------------------- the hero (every type) */
/* the box (exactly the first screen, padded under the fixed header) is system.css's; .hero-text fills
   what is left, and a type that grows a picture down to the fold lets it take the rest */
.hero { position: relative; isolation: isolate; }
.hero > .wrap > .hero-text { height: 100%; }
.hero__in { display: flex; flex-direction: column; }
.hero h1 { font-size: var(--ly-h1); line-height: 1.02; letter-spacing: var(--display-tracking-xl, var(--display-tracking)); text-wrap: balance; }
.hero .hero__lead { font-size: var(--ly-lead); line-height: 1.5; max-width: 42ch; text-wrap: pretty; color: var(--ink); }
.hero .hero__lead .muted, .hero__lead.muted { color: var(--muted); }
.hero__kicker { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-small); color: var(--muted); }
.hero__kicker .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.hero__text > * + * { margin-top: var(--s-5); }
.hero__text > .btn-row { margin-top: var(--s-6); }
.hero__text > .hero__kicker + h1 { margin-top: var(--s-4); }
.hero__grid { align-items: center; align-content: center; }
/* a hero grid with a picture as tall as the hero (split, collage, triptych): one row, the whole height */
.hero-text.hero__grid { grid-template-rows: minmax(0, 1fr); align-content: stretch; }
.hero__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s-5); align-items: end; }
.hero__head > :first-child { grid-column: 1 / span 7; }
.hero__head > :first-child > * + * { margin-top: var(--s-4); }
.hero__head > .btn-row { grid-column: 9 / -1; justify-content: flex-end; }
.hero__foot { margin-top: var(--s-6); align-items: end; }
.hero__foot > .btn-row { justify-content: flex-end; }
.hero__fill { flex: 1 1 auto; position: relative; min-height: 0; }
.hero__media { position: relative; overflow: hidden; border-radius: var(--r-lg); background: var(--surface); }
.hero__media > img, .hero__media > video, .hero__media > picture > img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--ly-pos, 50% 50%);
}
@media (max-width: 1023px) {
  .hero__head > :first-child, .hero__head > .btn-row { grid-column: 1 / -1; justify-content: flex-start; }
  .hero__foot > .btn-row { justify-content: flex-start; }
  .hero__media > img { object-position: var(--ly-pos-phone, var(--ly-pos, 50% 50%)); }
}
/* facts docked to the hero's foot: a hairline and four short facts on the column lines */
.hero__facts { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s-5);
               border-top: 1px solid var(--line); padding-top: var(--s-5); margin: 0; }
.hero__facts > div { grid-column: auto / span 3; display: grid; gap: var(--s-1); }
.hero__facts dt { font-size: var(--t-small); color: var(--muted); }
.hero__facts dd { margin: 0; font-size: var(--t-body); font-weight: 500; }
@media (max-width: 639px) { .hero__facts > div { grid-column: auto / span 6; } }
/* a proof strip (logos, a rating) docked to the hero's foot instead of a section of its own */
.hero__dock { margin-top: auto; padding-top: var(--s-7); }

/* a small card laid on a hero picture, 24px in from a corner (the opening hours, today's bake,
   an order's state): one, opaque, in the page's colours */
.ly-float {
  position: absolute; z-index: 2; left: var(--s-5); bottom: var(--s-5); width: min(300px, calc(100% - 2 * var(--s-5)));
  display: grid; gap: var(--s-1); padding: var(--s-4); border-radius: var(--r-md);
  background: var(--bg); color: var(--ink); border: 1px solid var(--line);   /* flat: no shadow at rest (ST-97) */
}
.ly-float--tr { left: auto; bottom: auto; right: var(--s-5); top: var(--s-5); }
.ly-float__row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); font-size: var(--t-small); color: var(--muted); }
.ly-float__title { font-weight: 500; font-size: var(--t-body); }
.ly-live { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-label); color: var(--ink); }
.ly-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 50%, transparent); animation: ly-pulse 2.4s ease-out infinite; }
@keyframes ly-pulse { 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
/* kind other (a cafe, a shop, a studio) and a place: nothing moves by itself (MO-07) */
:root:is([data-type="place"], :has(meta[name="site-kind"][content="other"])) .ly-live::before { animation: none; }

/* 1. hero--split: text on span-5, the picture on span-6 start-7, ending on the right line (never out
      to the viewport edge: the page's two edges stay equal), as tall as the screen less the hero's
      padding: 628 x 740 at 1440x900. A phone stacks text then picture, and the picture takes what the
      first screen leaves (at least 240px), so the hero is still one screen */
.hero--split .hero__media { height: 100%; min-height: 0; }
.hero--split .hero__grid { align-items: stretch; }
.hero--split .hero__text { align-self: start; }
.hero--collage .hero__text { align-self: start; }
/* the words' first line on the picture's top line: an h1 first in its column starts at its capitals */
:is(.hero--split, .hero--collage) .hero__text > h1:first-child { text-box: trim-start cap alphabetic; }
@media (max-width: 1023px) {
  .hero--split .hero__grid, .hero--collage .hero__grid { display: flex; flex-direction: column; align-items: stretch; }
  .hero--split .hero__media { height: auto; flex: 1 1 0; min-height: 240px; margin-top: var(--s-6); }
}

/* 2. hero--photo (product, service, software): the photograph over the whole first screen and the
      words on its calm side, in a solid box in the page's own colours (the default), or with
      data-box="none" straight on a calm part of the photograph that is dark (data-tone="dark") or
      light (data-tone="light") and empty at the desktop crop. Nothing is laid over the photograph:
      no scrim, gradient or veil (PH-31, VI-49). From 1023 down the photograph is a layer under the
      header (--photo) and the words sit under it on the ground. On a place see hero--place. */
.hero--photo { color: var(--ink); background: #1b1b1b; }
.hero--photo > .hero__bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--ly-pos, 50% 50%); }
.hero--photo[data-box="none"][data-tone="dark"] { --ink: #ffffff; --muted: #ffffff; --line: rgb(255 255 255 / .4); --line-strong: rgb(255 255 255 / .7); color: #fff; }
.hero--photo[data-box="none"][data-tone="light"] { --ink: #111111; --muted: #111111; --line: rgb(17 17 17 / .24); --line-strong: rgb(17 17 17 / .5); color: #111; }
.hero--photo:not([data-box="none"]) .hero__text {
  padding: var(--s-7); background: var(--p-bg); color: var(--p-ink); border-radius: var(--r-lg);
  --ink: var(--p-ink); --muted: var(--p-muted); --line: color-mix(in oklab, var(--p-ink) 11%, transparent); --line-strong: color-mix(in oklab, var(--p-ink) 20%, transparent);
}
/* the facts are small words: on the photograph only on a calm part (data-box="none"), never beside a box */
.hero--photo:not([data-box="none"]) .hero__facts { display: none; }
.hero--photo > .wrap > .hero-text { display: flex; flex-direction: column; justify-content: flex-end; }
.hero--photo[data-calm="left"] > .wrap > .hero-text, .hero--photo[data-calm="right"] > .wrap > .hero-text { justify-content: center; }
.hero--photo[data-calm="top"] > .wrap > .hero-text { justify-content: flex-start; }
.hero--photo .hero__text { width: calc(50% - var(--gutter) / 2); }   /* six of the twelve columns: 628 at 1440 */
@media (max-width: 1023px) { .hero--photo .hero__text { width: 100%; } }
.hero--photo[data-calm="right"] .hero__text { margin-left: auto; }
.hero--photo h1 { font-size: var(--ly-h1-xl); max-width: 14ch; }
.hero--photo .hero__facts { margin-top: var(--s-8); }
.hero--photo[data-calm="left"] > .wrap > .hero-text, .hero--photo[data-calm="right"] > .wrap > .hero-text { position: relative; }
.hero--photo[data-calm="left"] .hero__facts, .hero--photo[data-calm="right"] .hero__facts { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; }
/* the page's own button pair (never a third style) */
.hero--photo .btn-row { --ink: var(--p-ink); --bg: var(--p-bg); --action: var(--p-action); --action-ink: var(--p-action-ink); --line-strong: color-mix(in oklab, var(--p-ink) 20%, transparent); }
html:is([data-buttons="arrow"], [data-buttons="block"]) .hero--photo[data-box="none"][data-tone="dark"] .btn--secondary { color: #fff; text-decoration-color: rgb(255 255 255 / .6); }
/* a tablet and a phone: no calm part survives every crop, so the photograph is a layer under the
   header (--photo) and the words sit --hgap under it on the page ground, in the page's own colours */
@media (max-width: 1023px) {
  .hero--photo, .hero--photo[data-tone] { background: var(--bg); color: var(--p-ink); --ink: var(--p-ink); --muted: var(--p-muted);
    --line: color-mix(in oklab, var(--p-ink) 11%, transparent); --line-strong: color-mix(in oklab, var(--p-ink) 20%, transparent); }
  .hero--photo { --photo: min(46svh, 56vw); }
  .hero--photo > .hero__bg { top: var(--nav); bottom: auto; height: var(--photo); object-position: var(--ly-pos-phone, var(--ly-pos, 50% 50%)); }
  .hero--photo .hero__facts { display: none; }
  .hero--photo > .wrap > .hero-text, .hero--photo[data-calm] > .wrap > .hero-text { justify-content: flex-start; }
  .hero--photo .hero__text, .hero--photo:not([data-box="none"]) .hero__text { padding: 0; background: none; border-radius: 0; }
  .hero--photo[data-calm="right"] .hero__text { margin-left: 0; }
  html:is([data-buttons="arrow"], [data-buttons="block"]) .hero--photo[data-tone="dark"] .btn--secondary { color: var(--p-ink); text-decoration-color: var(--line-strong); }
}
@media (max-width: 639px) { .hero--photo { --photo: 42svh; } }

/* 0. hero--place: the only place hero, never dealt (local-business Recipe 3; ST-53, PH-47, PH-81).
      The client's photograph full-bleed under the header (--photo: 480 at 1440x900, y 72-552, at most
      53% of the screen; on a phone a 4:3 crop, 390x292, or with data-phone-fill grown to what the words leave, up to
      4:5), nothing on it. On the ground below, --hgap
      (40, 24 on a phone) under it: the h1 on columns 1-6 (48/53, 32/37 on a phone), and from the
      split line the sub-line (the kind of place, where, today's hours) and one filled 48px button.
      html[data-type="place"] .hero--photo is drawn the same way (the older markup).
      <section class="hero hero--place"><img class="hero__bg" src=".." alt=".." fetchpriority="high">
        <div class="wrap"><div class="hero-text"><div class="hero__text">
          <h1>..</h1><p class="hero__lead">..</p><div class="btn-row"><a class="btn btn--primary">..</a></div>
        </div></div></div></section> */
.hero--place, :root[data-type="place"] .hero--photo { --photo: min(480px, 53svh); background: var(--bg); color: var(--ink); }
.hero--place > .hero__bg, :root[data-type="place"] .hero--photo > .hero__bg {
  position: absolute; left: 0; right: 0; top: var(--nav); bottom: auto; z-index: 0; width: 100%; height: var(--photo); max-width: none;
  object-fit: cover; object-position: var(--ly-pos, 50% 50%); border-radius: 0;
}
/* the hero as photos.mjs fetch prints it: <picture class="hero__bg"><source media="(max-width: 639px)" ..><img ..></picture>.
   The picture is the layer (placed as img.hero__bg above, out of the flow beside the .wrap); its img fills it */
:is(.hero--photo, .hero--place) > picture.hero__bg { display: block; overflow: hidden; }
:is(.hero--photo, .hero--place) > picture.hero__bg > img {
  display: block; width: 100%; height: 100%; max-width: none; border-radius: 0;
  object-fit: cover; object-position: var(--ly-pos, 50% 50%);
}
@media (max-width: 1023px) {
  :is(.hero--photo, .hero--place) > picture.hero__bg > img { object-position: var(--ly-pos-phone, var(--ly-pos, 50% 50%)); }
}
:root[data-type="place"] .hero--photo, :root[data-type="place"] .hero--photo[data-tone] { --ink: var(--p-ink); --muted: var(--p-muted); color: var(--p-ink); }
:is(.hero--place, :root[data-type="place"] .hero--photo) > .wrap > .hero-text { display: block; }
:is(.hero--place, :root[data-type="place"] .hero--photo) .hero__text {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-content: start; align-items: start;
  width: 100%; margin: 0; padding: 0; background: none; border-radius: 0;
}
:is(.hero--place, :root[data-type="place"] .hero--photo) .hero__text > * { grid-column: 7 / -1; margin: 0; }
:is(.hero--place, :root[data-type="place"] .hero--photo) .hero__text > h1 {
  grid-column: 1 / span 6; grid-row: 1 / span 3; max-width: none; font-size: var(--t-h1); line-height: 1.104; text-box: trim-start cap alphabetic;
}
:is(.hero--place, :root[data-type="place"] .hero--photo) .hero__lead { font-size: var(--t-lead); line-height: 1.5; max-width: 40ch; color: var(--ink); }
:is(.hero--place, :root[data-type="place"] .hero--photo) .hero__text > .btn-row { margin-top: var(--s-5); }
:is(.hero--place, :root[data-type="place"] .hero--photo) .btn { height: 48px; }
:is(.hero--place, :root[data-type="place"] .hero--photo) .hero__facts { display: none; }
@media (max-width: 1023px) {
  .hero--place, :root[data-type="place"] .hero--photo { --photo: min(56vw, 46svh); }
  :is(.hero--place, :root[data-type="place"] .hero--photo) .hero__text { display: flex; flex-direction: column; gap: var(--s-5); }
  :is(.hero--place, :root[data-type="place"] .hero--photo) .hero__text > .btn-row { margin-top: 0; }
}
/* a tablet held upright (820x1180): a 56vw photograph would leave a third of the screen empty under
   the button, so the photograph grows to a little over half the screen (656 at 820x1180) */
@media (min-width: 640px) and (max-width: 1023px) and (orientation: portrait) {
  .hero--place, :root[data-type="place"] .hero--photo { --photo: min(80vw, 56svh); }
}
@media (max-width: 639px) {
  .hero--place, :root[data-type="place"] .hero--photo { --photo: 75vw; }
  :is(.hero--place, :root[data-type="place"] .hero--photo) .hero__text > h1 { line-height: 1.156; }
  :is(.hero--place, :root[data-type="place"] .hero--photo) .hero__lead { font-size: 18px; line-height: 1.556; }
  :is(.hero--place, :root[data-type="place"] .hero--photo) .hero__text > .btn-row { margin-top: 0; }
  /* a photograph whose phone source is tall enough (data-phone-fill: photos.mjs prints it with its 4:5 phone crop,
     or with a phone sizes term that covers a 4:5 box) takes what the words leave of the first screen, from --photo
     (390x292 at 390) to 4:5 (390x488), so the screen ends on the button, never on an empty band under it (a 390x844
     screen: about 390x480). Without the attribute it keeps --photo: a 4:3 crop shown taller is blown up. The section's
     grid has two rows, the photograph's (it is placed in that row, still out of the flow: both its lines named, as an
     absolute box's auto line is the section's edge) and the words' */
  main > :is(.hero--place, :root[data-type="place"] .hero--photo):has(> .hero__bg[data-phone-fill]):has(> .wrap) {
    padding-top: var(--nav); grid-template-rows: minmax(calc(var(--photo) + var(--hgap)), 1fr) auto;
  }
  main > :is(.hero--place, :root[data-type="place"] .hero--photo):has(> .wrap) > .hero__bg[data-phone-fill] {
    grid-row: 1 / 2; grid-column: 1 / -1; top: 0; bottom: auto; height: min(calc(100% - var(--hgap)), 125vw);
  }
  main > :is(.hero--place, :root[data-type="place"] .hero--photo):has(> .hero__bg[data-phone-fill]):has(> .wrap) > .wrap { grid-row: 2; }
}

/* 3. hero--product: the head row (h1 and line left, the buttons right on the line's baseline), then
      one object on a stage that fills the rest of the screen. The lit, rounded stage below is for a print
      or a scene (tech, games); the product itself (a render, a cut-out, a photograph) takes 3b: no box */
.hero--product .hero__stage { margin-top: var(--s-7); }
.hero__stage {
  position: relative; overflow: hidden; border-radius: var(--r-lg); min-height: clamp(260px, 40svh, 400px); flex: 1 1 auto;
  background:
    radial-gradient(60% 70% at 50% 42%, color-mix(in oklab, var(--ground-surface, #e9e0d2) 90%, white), transparent 72%),
    linear-gradient(to bottom, var(--ground-bg, #d9ccb7) 0 72%, color-mix(in oklab, var(--ground-bg, #d9ccb7) 86%, black) 100%);
}
.hero__stage > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--ly-pos, 50% 50%); }
.hero__stage > img.is-cutout { object-fit: contain; padding: 5% 0 4%; }
.hero__stage > [data-print], .hero__stage > [data-scene] { position: absolute; inset: 0; }
/* 3b. the product itself on the stage, never boxed (in testing: a render at 44% of a rounded lit box
      read as "small and boxed"). The lit box above stays for a print or a world scene (tech, games).
      - a render (a [data-product] frame) or a cut-out (img.is-cutout): no box, no gradient, no radius;
        the page's own ground. The stage runs across the wrap and down to --s-5 above the fold, the
        head row's gap is --s-6, and a render's frame reaches 7% past the stage's top and bottom, so
        the product's long side fills the stage's height (the place's 0.86-0.88 margin taken back):
        a wide product's widest view (a bike's side) spans 80% or more of the wrap at 1440.
      - a product photograph (any other img): edge to edge across the screen, square corners, no ground;
        crop it (--ly-pos) so the product spans 80% or more of the wrap.
      <div class="hero__stage"><div class="frame" data-product="…/specs/<id>.json" data-product-place="stage"
        data-product-view="side"></div></div> (.ly-spot hotspots only when the brief asks for them) */
.hero--product .hero__stage:is(:has(> [data-product]), :has(> img.is-cutout)) {
  margin-top: var(--s-6); margin-bottom: calc(var(--s-5) - var(--hpadb, 64px));
  border-radius: 0; background: none; overflow: visible;
}
.hero--product .hero__stage > [data-product] {
  position: absolute; inset: -7% 0; width: auto; height: auto; min-height: 0;
  padding: 0; border: 0; border-radius: 0; background: none; overflow: visible;
}
.hero--product .hero__stage > [data-product]::before { content: none; }
/* the head row gives the product its height: the h1 on cols 1-7 (two lines), the lead and the buttons
   stacked on cols 9-12, their foot on the h1's foot (the head ends at y 278 at 1440x900, against y 373
   with the lead under the h1); the stage takes the rest: 1280x566 at y 310 */
@media (min-width: 1024px) {
  .hero--product:has(.hero__stage > :is([data-product], img, picture)) .hero__head { grid-template-rows: auto auto; row-gap: var(--s-5); }
  .hero--product:has(.hero__stage > :is([data-product], img, picture)) .hero__head > :first-child { display: contents; }
  .hero--product:has(.hero__stage > :is([data-product], img, picture)) .hero__head h1 { grid-column: 1 / span 7; grid-row: 1 / span 2; align-self: end; margin: 0; }
  .hero--product:has(.hero__stage > :is([data-product], img, picture)) .hero__head .hero__lead { grid-column: 9 / -1; grid-row: 1; align-self: end; margin: 0; max-width: none; }
  .hero--product:has(.hero__stage > :is([data-product], img, picture)) .hero__head > .btn-row { grid-column: 9 / -1; grid-row: 2; justify-content: flex-start; }
}
/* a small laptop (1024-1279): h1 on cols 1-6, the lead and the buttons on cols 7-12, so the two
   buttons stay on one line and the lead on three */
@media (min-width: 1024px) and (max-width: 1279px) {
  .hero--product:has(.hero__stage > :is([data-product], img, picture)) .hero__head h1 { grid-column: 1 / span 6; }
  .hero--product:has(.hero__stage > :is([data-product], img, picture)) .hero__head .hero__lead,
  .hero--product:has(.hero__stage > :is([data-product], img, picture)) .hero__head > .btn-row { grid-column: 7 / -1; }
}
.hero--product .hero__stage:has(> img:not(.is-cutout), > picture) {
  border-radius: 0; background: none; margin-inline: calc(50% - 50vw); margin-bottom: calc(0px - var(--hpadb, 64px));
}
@media (max-width: 639px) { .hero--product .hero__stage:has(> img:not(.is-cutout), > picture) { margin-bottom: 0; } }
/* every product render frame is the product on its section's ground: never a grey panel (sections.md
   Product, rule 1); the frame keeps its size and clips a close-up at its edges */
.frame[data-product] { background: none; border: 0; padding: 0; }
/* a hotspot on the product: a disc that opens one short spec card on hover, focus or tap */
.ly-spot { position: absolute; z-index: 2; left: var(--x); top: var(--y); transform: translate(-50%, -50%); }
.ly-spot > button {
  display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 0; background: var(--p-bg, #fff); color: var(--p-ink, #111); box-shadow: 0 0 0 6px rgb(255 255 255 / .28), 0 6px 18px -6px rgb(0 0 0 / .45);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.ly-spot > button svg { width: 12px; height: 12px; transition: transform var(--dur) var(--ease); }
.ly-spot > button:hover, .ly-spot.is-open > button { transform: scale(1.08); box-shadow: 0 0 0 9px rgb(255 255 255 / .32), 0 6px 18px -6px rgb(0 0 0 / .45); }
.ly-spot.is-open > button svg { transform: rotate(45deg); }
.ly-spot__card {
  position: absolute; left: calc(100% + 12px); top: 50%; width: 230px; padding: var(--s-3) var(--s-4); border-radius: var(--r-md);
  background: var(--p-bg, #fff); color: var(--p-ink, #111); font-size: var(--t-small); line-height: 1.45;
  box-shadow: 0 16px 36px -16px rgb(0 0 0 / .45); opacity: 0; visibility: hidden; transform: translate(-6px, -50%);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.ly-spot__card strong { display: block; font-size: var(--t-body); font-weight: 500; margin-bottom: 2px; }
.ly-spot--left .ly-spot__card { left: auto; right: calc(100% + 12px); transform: translate(6px, -50%); }
.ly-spot.is-open .ly-spot__card, .ly-spot:hover .ly-spot__card, .ly-spot:focus-within .ly-spot__card { opacity: 1; visibility: visible; transform: translate(0, -50%); transition-delay: 0s; }
/* a phone: the card opens under its disc, centred on it and nudged by layout.js (--dx) so it stays
   16px inside the stage; never beside the disc, where the stage would cut it */
@media (max-width: 639px) {
  .hero--product .hero__stage { margin-top: var(--s-6); flex: none; min-height: 0; aspect-ratio: 4 / 5; }
  /* a render or a cut-out takes what the head leaves, at least 240 tall: the product's width is the bound */
  .hero--product .hero__stage:is(:has(> [data-product]), :has(> img.is-cutout)) { flex: 1 1 auto; aspect-ratio: auto; min-height: 240px; margin-bottom: 0; }
  .ly-spot__card, .ly-spot--left .ly-spot__card { left: 50%; right: auto; top: calc(100% + 10px); width: 230px;
    transform: translate(calc(-50% + var(--dx, 0px)), -4px); }
  .ly-spot.is-open .ly-spot__card, .ly-spot:hover .ly-spot__card, .ly-spot:focus-within .ly-spot__card { transform: translate(calc(-50% + var(--dx, 0px)), 0); }
}

/* 4. hero--editorial: the headline IS the picture. Three lines of big left-aligned type (128px at
      1440, 52 at 390) across the whole container, with one or two photographs set in the line as
      pills (.ly-pic, 0.8em tall, 1.9em wide), whole on the first frame (no opening, no settle: the
      h1 never reflows after load, MO-62); the lead and the buttons dock to the foot under a
      hairline. No frame under it: the type fills the screen. */
.hero--editorial .hero__in { justify-content: space-between; }
.hero--editorial h1 { font-size: var(--ly-h1-mega); line-height: .98; letter-spacing: var(--display-tracking-xl, -0.04em); max-width: none; margin-block: auto; padding-block: var(--s-6); text-wrap: initial; }
.hero--editorial .hero__foot { margin-top: 0; padding-top: var(--s-5); border-top: 1px solid var(--line); align-items: end; }
.ly-pic {
  display: inline-block; position: relative; overflow: hidden; vertical-align: -0.04em;
  height: .8em; width: var(--w, 1.9em); margin-inline: .04em; border-radius: 999px; background: var(--surface);
}
.ly-pic > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--ly-pos, 50% 50%); }
.ly-pic--sq { border-radius: .16em; }
@media (max-width: 639px) { .ly-pic { --w: 1.5em; } .hero--editorial h1 { padding-block: var(--s-5); } }

/* 5. hero--collage: text on span-5, a UI collage from column 7 out through the right viewport edge;
      the main window starts 56px in from its left and top and runs out through the right and bottom */
.hero--collage h1 { font-size: var(--ly-h1-col); }
.hero__art {
  position: relative; overflow: hidden; height: 100%; min-height: 0;
  border-radius: var(--r-lg); background: var(--ground-bg, #d9ccb7);
  --fx-bg: var(--ground-bg); --fx-surface: var(--ground-surface); --fx-ink: var(--ground-ink); --fx-accent: var(--ground-accent);
}
/* the frame stands on the container's right line; the window inside is cut by the frame's right and
   bottom edges, never by the viewport. It runs --ly-cut (28px) past the right edge and keeps that much
   plus 20px of its own empty margin at its right (--ly-cut-room, on its content), so the cut falls
   after the last column a visitor reads (the status chip), never through it. A window's widest
   columns (times, ids) are left out or hidden (.ly-cut-hide). */
.hero__art > .ly-piece { position: absolute; }
.hero__art { --ly-cut: 28px; --ly-cut-room: calc(var(--ly-cut) + 20px); }
.hero__art > .ly-piece--main { left: var(--s-8); top: var(--s-8); width: calc(100% - var(--s-8) + var(--ly-cut)); }
.hero__art .ly-cut-hide { display: none; }
@media (max-width: 1023px) {
  .hero__art { height: auto; flex: 1 1 0; min-height: 220px; margin-top: var(--s-6); }
  .hero__art > .ly-piece--main { left: var(--s-6); top: var(--s-6); width: calc(100% - var(--s-6) + var(--ly-cut)); }
}
/* a phone: the window alone, its side bar hidden, 16px in; the small card waits for a wider screen
   (a 300px card over a 340px frame covers the window and leaves a sliver of cut rows) */
@media (max-width: 639px) {
  .hero__art > .ly-piece--main { left: var(--s-4); top: var(--s-4); width: calc(100% - var(--s-4) + var(--ly-cut)); }
  .hero__art > .ly-piece:not(.ly-piece--main) { display: none; }
}

/* 6. hero--word: an oversized headline (144px) across the container with one live word last, then a
      foot row: the line and the buttons on span-6, the four facts as a column on span-5 start-8
      (the right half has a job: the prices and promises a visitor checks first) */
.hero--word, .hero--editorial { overflow-x: clip; }
.hero--word .hero__in { justify-content: center; }
.hero--word h1 { font-size: var(--ly-h1-word); line-height: .92; max-width: none; }
.hero--word .hero__foot { margin-top: var(--s-8); align-items: start; }
.hero--word .hero__foot .btn-row { margin-top: var(--s-6); }
.hero--word .hero__facts { margin-top: var(--s-8); }
/* facts as a column: one row each, the label left and the value right, hairlines between */
.hero__facts.hero__facts--col { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 0; padding-top: 0; border-top: 0; margin-top: 0; }
.hero__facts--col > div { grid-column: auto; display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4);
                          padding-block: var(--s-3); border-top: 1px solid var(--line); }
.hero__facts--col > div:last-child { border-bottom: 1px solid var(--line); }
.hero__facts--col dd { text-align: right; }
@media (max-width: 1023px) {
  .hero--word .hero__foot > .hero__facts--col { margin-top: var(--s-7); grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); }
  .hero__facts--col > div { display: grid; gap: var(--s-1); justify-content: start; }
  .hero__facts--col > div:nth-last-child(2) { border-bottom: 1px solid var(--line); }
  .hero__facts--col dd { text-align: left; }
}
/* the live word: one slot in the headline as wide as its widest word (the grid's one cell holds them
   all), so a change never moves another word or breaks a line; each word carries its own underline in
   the accent and brings it with it */
.ly-word { position: relative; display: inline-grid; vertical-align: bottom; overflow: clip; overflow-clip-margin: .14em; margin-bottom: -.1em; }
.ly-word > span { grid-area: 1 / 1; justify-self: start; white-space: nowrap; padding-bottom: .1em;
                  background: linear-gradient(var(--accent), var(--accent)) 0 calc(100% - .05em) / 100% max(3px, .05em) no-repeat;
                  transition: transform .6s var(--ease, ease), opacity .6s var(--ease, ease); }
.ly-word > span.is-out { transform: translateY(-105%); opacity: 0; }
.ly-word > span.is-next { transform: translateY(105%); opacity: 0; }
/* letters that answer the pointer: each letter's weight (and width, on a face with a wdth axis). The
   headline's lines are locked first (layout.js puts a break where each line ends at rest and stops
   wrapping), so a heavier, wider letter never sends a word to the next line */
.ly-letters .ly-l { display: inline-block; font-weight: var(--w, inherit); font-stretch: var(--wd, inherit); transition: font-weight .32s var(--ease, ease), font-stretch .32s var(--ease, ease); }
h1.ly-locked { white-space: nowrap; text-wrap: nowrap; }

/* 7. hero--film: a cinema frame. The film's poster fills one rounded frame on the container's lines,
      the whole first screen less 16px (1280 x 804 at 1440x900); the headline, the line and the
      buttons stand in a solid box of the page's inverse ground at the frame's lower left, the play
      control and its label (a solid pill) at its right foot (x.ai's film card). Nothing is laid
      over the film to make words readable: no scrim or gradient (PH-31). */
.hero--film { padding-block: var(--s-4); }
.hero--film .hero__media { flex: 1 1 auto; min-height: 520px; background: #000; color: #fff; display: flex; flex-direction: column; justify-content: flex-end; }
.hero__over { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--s-6); padding: var(--s-6); }
.hero__over > :first-child {
  justify-self: start; max-width: 600px; padding: var(--s-7); border-radius: var(--r-md);
  background: var(--p-inv-bg); color: var(--p-inv-ink);
  --bg: var(--p-inv-bg); --ink: var(--p-inv-ink); --muted: var(--p-inv-muted); --action: var(--p-inv-action); --action-ink: var(--p-inv-action-ink);
  --line: color-mix(in oklab, var(--p-inv-ink) 14%, transparent); --line-strong: color-mix(in oklab, var(--p-inv-ink) 30%, transparent);
}
.hero__over h1 { max-width: 15ch; }
.hero__over .hero__lead { color: var(--p-inv-ink); margin-top: var(--s-4); }
.hero__over .btn-row { margin-top: var(--s-6); }
.hero--film .ly-play { position: relative; left: auto; bottom: auto; }
.hero--film .ly-play__label { padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--p-inv-bg); color: var(--p-inv-ink); }
/* the running time under the play label (before the media block below, which hides it on a phone) */
.ly-play__label small { display: block; margin-top: 2px; font-size: var(--t-small); color: var(--p-inv-muted); font-weight: 400; }
@media (max-width: 1023px) {
  .hero__over { grid-template-columns: 1fr; gap: var(--s-4); padding: var(--s-5); }
  .hero__over > :first-child { max-width: none; justify-self: stretch; padding: var(--s-6); }
  .hero--film .ly-play { order: -1; justify-self: start; gap: var(--s-3); font-size: var(--t-body); }
  .ly-play__label small { display: none; }
}
@media (max-width: 639px) {
  .hero__over { padding: var(--s-3); }
  .hero__over > :first-child { padding: var(--s-5); }
  .hero--film .hero__media { min-height: 0; }
}
.ly-play { position: absolute; z-index: 2; left: var(--s-6); bottom: var(--s-6); display: inline-flex; align-items: center; gap: var(--s-4);
           padding: 0; border: 0; background: none; color: #fff; cursor: pointer; font: 500 var(--t-lead)/1.2 var(--font-text); text-align: left; }
.ly-play__disc { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #fff; color: #111; flex: none;
                 transition: transform var(--dur) var(--ease); }
.ly-play__disc svg { width: 18px; height: 18px; margin-left: 3px; }
.ly-play:hover .ly-play__disc, .ly-play:focus-visible .ly-play__disc { transform: scale(1.06); }
@media (max-width: 639px) { .ly-play__disc { width: 52px; height: 52px; } }

/* 8. hero--statement: a quiet statement over a ground (assets/backgrounds), facts docked at the foot */
.hero--statement .hero__in { justify-content: space-between; }   /* the h1 top-aligned at y 120 (layout-v4.md section 3), the facts docked at the foot */
.hero--statement h1 { font-size: var(--ly-h1-quiet); line-height: 1.1; max-width: 21ch; }
.hero--statement .hero__lead { margin-top: var(--s-5); }
.hero--statement .btn-row { margin-top: var(--s-6); }
.hero--statement .hero__facts { margin-top: var(--s-8); }
/* on a phone the facts of a photo or statement hero are a desktop line: the hero stays one screen and the
   ground's foot (a horizon's rim, the photograph) stays clear; the next section carries them */
@media (max-width: 639px) { .hero--statement .hero__facts { display: none; } }

/* 9. hero--triptych: the headline on span-3, a collage of three to five pieces on span-6 start-4
      that changes set every 2.8 s, one large button on span-3 at the right line (Figma's hero).
      Every set has one piece (a photograph or a piece with a quiet corner) that ends at 96% of the
      collage's width and height, so the pause disc sits on that piece's corner, never in empty ground;
      no piece covers a line of another piece's text */
.hero--triptych .hero__grid > :first-child { align-self: center; }
.hero--triptych h1 { font-size: var(--ly-h1-side); line-height: 1.04; }
.hero--triptych .hero__lead { font-size: var(--t-body); max-width: 30ch; margin-top: var(--s-4); }
.hero--triptych .hero__cta { display: flex; justify-content: flex-end; }
.hero--triptych .hero__cta .btn { height: 64px; padding-inline: var(--s-6); font-size: var(--t-lead); }
/* 1024 to 1279: three columns get too narrow, so it becomes a split: the headline and the button on
   span-4, the collage on span-7 start-6 to the right line */
@media (min-width: 1024px) and (max-width: 1279px) {
  .hero--triptych .hero__grid { grid-template-rows: 1fr auto 1fr; }
  .hero--triptych .hero__grid > :first-child { grid-column: 1 / span 4; grid-row: 1; align-self: end; }
  .hero--triptych .ly-collage { grid-column: 6 / span 7; grid-row: 1 / span 3; }
  .hero--triptych .hero__cta { grid-column: 1 / span 4; grid-row: 2; justify-content: flex-start; margin-top: var(--s-6); }
  .hero--triptych .hero__cta .btn { height: 56px; font-size: var(--t-body); }
}
.ly-collage { position: relative; height: 100%; min-height: 0; }
/* the crossfade only once the sets start to cycle (.is-cycling, layout.js): a set that changes as the
   page's styles arrive takes its place at once, never fades across the first paint */
.ly-collage__set { position: absolute; inset: 0; }
.ly-collage.is-cycling > .ly-collage__set { transition: opacity .7s var(--ease, ease); }
.ly-collage__set:not(.is-on) { opacity: 0; pointer-events: none; }
/* a copy of the markup that lost its .is-on: the first set shows rather than an empty hole */
.ly-collage:not(:has(> .ly-collage__set.is-on)) > .ly-collage__set:first-child { opacity: 1; pointer-events: auto; }
.ly-collage .ly-piece { position: absolute; overflow: hidden; border-radius: var(--r-md); background: var(--surface);
                        box-shadow: 0 1px 2px rgb(0 0 0 / .08), 0 18px 40px -18px rgb(0 0 0 / .32); }
.ly-collage .ly-piece > img { width: 100%; height: 100%; object-fit: cover; max-width: none; }
.ly-collage > button.loop-pause.loop-pause { right: calc(4% + 12px); bottom: calc(4% + 12px); }
@media (max-width: 1023px) {
  .hero--triptych .hero__cta { justify-content: stretch; } .hero--triptych .hero__cta .btn { width: 100%; height: 56px; }
  .hero--triptych .hero__grid { display: flex; flex-direction: column; align-items: stretch; }
  .hero--triptych .hero__grid > :first-child { align-self: stretch; }
  .ly-collage { height: auto; flex: 1 1 0; min-height: 300px; margin-block: var(--s-6); }
}

/* 10. hero--centred: news pill, centred headline and two buttons, one product window rising out of
       a lit frame that takes the rest of the screen and fades at the hero's foot (x.ai's hero). The
       window's story (the question, the work, the answer, its actions) sits in its top 260px, so it
       stands whole above the fade, which starts at 82% of the frame */
.hero--centred .hero__c { display: grid; justify-items: center; text-align: center; gap: var(--s-4); max-width: 880px; margin-inline: auto; }
.hero--centred h1 { max-width: 16ch; }
.hero--centred .hero__lead { max-width: 52ch; color: var(--muted); }
.hero--centred .btn-row { justify-content: center; margin-top: var(--s-3); }
.hero--centred > .wrap > .hero-text { display: flex; flex-direction: column; }
.hero--centred .hero__window { flex: 1 1 0; min-height: clamp(220px, 32svh, 340px);
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent); mask-image: linear-gradient(to bottom, #000 82%, transparent);
  position: relative; overflow: hidden; margin-top: var(--s-6);
  border-radius: var(--r-lg); background: var(--ground-bg, #d9ccb7);
  --fx-bg: var(--ground-bg); --fx-surface: var(--ground-surface); --fx-ink: var(--ground-ink); --fx-accent: var(--ground-accent); }
.hero--centred .hero__window > .ly-piece { position: absolute; z-index: 1; left: 50%; top: var(--s-6); width: min(880px, calc(100% - 2 * var(--s-6))); transform: translateX(-50%); }
.ly-mark { display: inline-block; width: .8em; height: .8em; vertical-align: -.06em; margin-inline: .06em; border-radius: 50%; background: var(--ink); position: relative; }
.ly-mark::before, .ly-mark::after { content: ""; position: absolute; top: 27%; width: 13%; height: 42%; border-radius: 99px; background: var(--bg); transform: skewX(-12deg); }
.ly-mark::before { left: 31%; } .ly-mark::after { left: 56%; }
@media (max-width: 639px) {
  .hero--centred .btn-row { width: 100%; }
  /* the frame can be 240 to 300px tall here, so its fade is the last 28px, not the last 18% */
  .hero--centred .hero__window { margin-top: var(--s-6); min-height: 240px;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); }
  .hero--centred .hero__window > .ly-piece { top: var(--s-4); width: calc(100% - 2 * var(--s-4)); left: var(--s-4); transform: none; }
}

/* ---------------------------------------------------------------- micro-interactions the heroes share */
/* buttons keep the page's one hover (system.css, motion.css: the fill steps, the arrow moves 3px, the
   press sinks 1px; no shadow on a button, ST-105); a text link draws its underline from the left */
.ly-link { position: relative; font-weight: 500; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .28s var(--ease); }
.ly-link:hover, .ly-link:focus-visible { background-size: 100% 1px; }

/* steps inside a piece of UI (layout.js [data-ly-steps]): each arrives in place, nothing travels */
[data-ly-steps] [data-step] { transition: opacity .35s var(--ease, ease), transform .35s var(--ease, ease); }
[data-ly-steps] [data-step].is-off { opacity: 0; transform: translateY(6px); }

/* ---------------------------------------------------------------- no entrance
   the hero is set on its first frame on every kind: no entrance fade, rise or opening (MO-62) */
@media (prefers-reduced-motion: reduce) {
  .ly-live::before { animation: none; }
  .ly-word > span, .ly-collage__set, .ly-collage.is-cycling > .ly-collage__set, .ly-letters .ly-l { transition: none; }
}

/* a short phone (320x640: under 700px tall): the first screen still ends whole with the hero's button on it.
   The photograph over the words takes less of it, the facts under the words go (the lead carries the hard
   fact), and a collage keeps less height */
@media (max-width: 639px) and (max-height: 700px) {
  :root { --hgap: 24px; }
  .hero--photo, .hero--place, :root[data-type="place"] .hero--photo { --photo: min(26svh, 48vw); }
  main > .hero .hero__facts { display: none; }
  .hero--triptych .ly-collage { min-height: 180px; margin-block: var(--s-5); }
}