/* ════════════════════════════════════════════════════════════════════
   THE FRONT DOOR — 2026-08-21.

   Nicolas: "it brings out the essence of what arroweb should have been
   from the beginning. ACCESS. Not marketing, just access."

   So the landing stopped being an argument and became a door: the
   lockup, then everything this site holds, grouped exactly as the nav
   groups it, one click each. The wall it replaces — the hero motto, the
   four points, the six-then-fourteen value tiles — is still in
   `_home_sections.html`; it is simply no longer the first thing anyone
   is asked to read.

   THE TILE GRAMMAR — three per row, the short last row filling the
   width, the colours per group — is shared with the menu sheet, which
   renders the same partial on every page.

   ⚠ THE TILE GRAMMAR ITSELF NOW LIVES IN style.css, not here: the menu
   sheet renders the same tiles on every page, and every shell already
   loads that file. What is left in this one is what only the front door
   has — the wrapper, the lockup, and the price at the end.
   ════════════════════════════════════════════════════════════════════ */

.lp {
    max-width: 1180px;
    margin: 0 auto;
    padding: clamp(1.6rem, 5vw, 3.4rem) clamp(1rem, 4vw, 2rem) 4rem;
}

/* ── The lockup ──────────────────────────────────────────────────────
   ONE FILE. It used to be a raster wordmark positioned beside live
   <text>, which cannot travel: this site sets Plus Jakarta Sans and
   serves no Josefin 400, so the letters would have rendered as a
   different word. ROSE is outlines in there now.

   The SVG's cap height is 100 user units and its viewBox is 123.708
   tall — hence the 1.2371. Set --lp-h (the CAP HEIGHT you want) and
   nothing else. */
.lp-lockup {
    --lp-h: clamp(30px, 7.5vw, 76px);
    margin: 0 0 clamp(1.8rem, 5vw, 3rem);
    text-align: center;
    line-height: 0;
}
.lp-lockup img {
    /* ⚠ THE RATIO IS DECLARED, AND THAT IS THE WHOLE FIX FOR THE POP.

       Nicolas: *"the logo on the landing page bugs — it goes to full width
       then pops back into place."*

       With `height: <x>; width: auto` the browser cannot work out the width
       until it knows the picture's intrinsic ratio, and an SVG's ratio is only
       known once the file has been PARSED. Until then it falls back to the
       `width="969"` attribute, `max-width: 100%` clamps that to the container,
       and the lockup paints across the whole page — then the SVG lands, the
       real ratio applies, and it snaps down to its actual size. One frame,
       every load, and it is the first thing on the page.

       `aspect-ratio` gives the browser the ratio in the stylesheet, which is
       already there before the image is even requested, so `width: auto` is
       computable on the very first layout pass. 968.574 / 123.708 is the
       lockup's own viewBox — keep the two in step if the file is ever recut. */
    aspect-ratio: 968.574 / 123.708;
    height: calc(var(--lp-h) * 1.2371);
    width: auto;
    max-width: 100%;
    /* The halo both marks share, in cap heights so it keeps its
       proportion when the lockup shrinks on a phone. */
    filter: drop-shadow(0 0 calc(var(--lp-h) * 0.084) rgba(255, 255, 255, 0.30))
            drop-shadow(0 0 calc(var(--lp-h) * 0.25)  rgba(170, 185, 210, 0.24))
            drop-shadow(0 0 calc(var(--lp-h) * 0.19)  rgba(224, 33, 138, 0.26));
}

/* ── The price, at the END, disclosed and not advertised ─────────── */
.lp-tail {
    margin-top: clamp(2.4rem, 6vw, 3.6rem);
    padding-top: 1.4rem;
    border-top: 1px solid var(--border-soft);
    text-align: center;
}
.lp-price {
    max-width: 60ch;
    margin: 0 auto;
    font-size: 0.82rem;
    line-height: 1.65;
    color: var(--text-muted);
}

/* The product tiles carry insider names (ReamS, Mondrian, Comanda) — one
   line of function beside each, on the FRONT DOOR only. The menu sheet
   renders the same partial and stays compact: access, not marketing,
   and a door labelled is better access. (2026-08-23) */
.lp-sub { display: none; }
.lp-body .lp-sub { display: block; font-size: .72rem; opacity: .55;
  margin-top: .18rem; letter-spacing: .01em; font-weight: 400; }