/* geist-switch 2026-10-17: font and weights mapped by scratchpad/switch-to-geist.py */
/* Alda landing: preloader -> page peel -> chapter hero, on a stage.
   Composed on commerce.css - same tokens, same type, same hairlines. Every dimension is vw/vh
   against a 16:9 desktop so the sequence scales 1:1; pixels only for hairlines.

   The stage is one 100vh section in normal flow. Inside it, bottom to top: the film / the hero
   UI (the label, and any headline a direction sets over the film) / the sheet, absolute at its
   landing line and translated up to cover the stage during the opener. The peeling edge and the
   nav are fixed layers above it. Once the sheet has landed it is the stage's chapter bar and
   nothing more: the page proper begins under the stage - home.css, full-width sections - so the
   sheet never scrolls over the film, and the film never shows beside the page. */

html.ld-lock { overflow: hidden; }
body.ac-landing { margin: 0; background: var(--ac-bg); }

/* ---------- the stage: the hero section, one viewport tall ---------- */
.ld-stage { position: relative; z-index: 1; height: 100vh; overflow: hidden; background: var(--ac-ink); }
.ld-hero { position: absolute; inset: 0; z-index: 0; background: var(--ac-ink); overflow: hidden; }
.ld-bg { position: absolute; inset: 0; opacity: 0; transition: opacity 0.7s ease; }
.ld-bg.is-on { opacity: 1; }
.ld-bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* until a range film lands, the chapter is its hero product on ink - set upper right, clear of
   anything a direction sets lower left */
.ld-still { position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: flex-end; padding: 8vh 17vw 0 0; }
.ld-still img { width: auto; height: 56vh; will-change: transform; }
/* a category without a film carries its photograph full-bleed, with the still's slow drift */
.ld-photo { position: absolute; inset: 0; }
.ld-photo img { width: 100%; height: 100%; object-fit: cover; display: block; will-change: transform; }
/* nothing sits over the film by default but the nav and the label, so it carries no vignette. A
   direction that sets a headline over it (home: B and C) opts in with body.ld-overlay. */
.ld-vignette { position: absolute; inset: 0; pointer-events: none; display: none; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 40vh, rgba(0, 0, 0, 0.38) 85vh); }
body.ld-overlay .ld-vignette { display: block; }

/* ---------- hero UI - revealed by the sheet, never animated in ---------- */
.ld-ui { position: absolute; inset: 0; z-index: 1; color: var(--ac-bg); pointer-events: none; font-family: Geist, Arial, sans-serif; }
.ld-ui a, .ld-ui button { pointer-events: auto; }

/* the nav is its own fixed layer above everything, so it rides over the page; home.js flips it
   to ink over light sections and back to cream over the film and the dark bands */
.ld-nav { position: fixed; left: 8.9vw; right: 8.9vw; top: 5.6vh; z-index: 6; display: flex; align-items: center; justify-content: space-between; opacity: 0; color: var(--ac-bg); font-family: Geist, Arial, sans-serif; transition: color 0.25s; }
.ld-brand { display: flex; align-items: center; gap: 0.8vw; color: inherit; text-decoration: none; }
.ld-brand svg { height: 2.4vh; width: auto; display: block; fill: currentColor; }
.ld-navright { display: flex; align-items: center; gap: 0.5em; }
.ld-navright .ac-navlink { color: inherit; border-color: rgba(245, 246, 238, 0.4); transition: background 0.2s, color 0.2s, border-color 0.25s; }
.ld-navright .ac-navlink:hover { background: var(--ac-red); border-color: var(--ac-red); color: #fff; }
.ld-nav.is-ink { color: var(--ac-ink); }
.ld-nav.is-ink .ac-navlink { border-color: var(--ac-line); }
.ld-nav.is-ink .ac-navlink:hover { background: var(--ac-red); border-color: var(--ac-red); color: #fff; }
/* the cart pill is moved into the nav by landing.js, so it fades in with it */
body.ac-landing .ld-navright .ac-cartpill { position: static; }

.ld-label { position: absolute; left: 8.9vw; top: 82.2vh; display: inline-flex; align-items: center; gap: 0.6em; font-size: 1.3vh; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(245, 246, 238, 0.8); text-decoration: none; }
.ld-label:hover { color: var(--ac-bg); }
.ld-label .ac-chev { width: 0.45em; height: 0.45em; border-color: currentColor; transform: rotate(45deg) translate(-0.15em, -0.15em); }
.ld-label:focus-visible { outline: 0; color: var(--ac-bg); text-decoration: underline 2px; text-underline-offset: 5px; }   /* over the film: a 2px cream underline (focus: Option C, site.css) */

/* a headline over the film, lower left, on the 8.9vw line above the sheet's landing edge.
   Direction B sets it small and light; direction C sets the byline at display size. */
.ld-over { position: absolute; left: 8.9vw; bottom: 22.5vh; max-width: 36vw; }
.ld-over .k { margin: 0 0 1.2vh; font-size: 1.3vh; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(245, 246, 238, 0.7); }
.ld-over h2 { margin: 0; font-size: 3.1vw; font-weight: 400; letter-spacing: -0.02em; line-height: 1.08; color: var(--ac-bg); }
.ld-over.is-big { max-width: none; right: 8.9vw; bottom: 20.5vh; }
.ld-over.is-big h2 { font-size: 7.6vw; font-weight: 550; letter-spacing: -0.045em; line-height: 0.92; }

/* ---------- the sheet ---------- */
/* absolute at its landing line and one viewport tall, so translated up by that line it covers
   the stage exactly during the opener; the stage clips whatever hangs below the fold at rest */
.ld-sheet { position: absolute; left: 0; right: 0; top: 84.8vh; height: 100vh; z-index: 2; background: var(--ac-bg); color: var(--ac-ink); border-top: 1px solid var(--ac-line-soft); will-change: transform, clip-path; }

/* loader lockup, centred in the sheet's viewport-height */
.ld-loader { position: absolute; left: 0; top: 0; width: 100%; height: 100vh; }
/* the card is the same cream as the slides, and the accent lives on the first slide rather than
   the box: any subpixel seam that opens between slides during the push then shows cream on
   cream, not a red hairline */
.ld-card { position: absolute; left: 50%; top: 50%; width: 20.2vw; aspect-ratio: 3 / 4; overflow: hidden; transform: translate(-50%, -50%) scale(0.25); transform-origin: center; background: var(--ac-panel); will-change: transform; }
/* the loader card is a cream tile, so its slides fill; the chapter tile's do not */
.ld-card .ld-slide { background: var(--ac-panel); }
.ld-card .ld-slide.is-accent { background: rgba(232, 0, 42, 0.12); will-change: background-color; }
/* a whisker wider than the card: at fractional vw widths the strip otherwise leaves a 1px seam
   of the accent showing beside the slides */
.ld-card .ld-strip { height: 100%; width: calc(100% + 1px); margin-left: -0.5px; }
.ld-mark { position: absolute; left: 50%; top: 50%; width: 11.6vw; color: var(--ac-red); opacity: 0; will-change: transform; }
.ld-mark svg, .ld-glen svg { width: 100%; height: auto; display: block; fill: currentColor; }
.ld-glen { position: absolute; left: 50%; top: 50%; width: 4vw; color: var(--ac-muted); opacity: 0; will-change: transform; }

.ld-strip { display: flex; flex-direction: column; height: 100%; will-change: transform; }
.ld-slide { flex: none; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.ld-slide img { width: 80%; height: auto; display: block; }

/* the landed sheet is the chapter bar - tile, range, count, next-up - in the 15.2vh the sheet
   shows at rest. Ink on cream, so the range name never has to fight a pale shot; the tile is a
   house tile, not glass, since there is nothing behind it to bend. Its 12.8vw padding is 3.9vw
   inside the sheet's 8.9vw inset. */
.ld-panel { position: relative; height: 15.2vh; display: flex; align-items: center; padding: 0 12.8vw; opacity: 0; }
.ld-chapterbar { display: flex; align-items: center; gap: 2vw; width: 100%; }
.ld-thumb { flex: none; width: 7vw; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 14px; background: var(--ac-panel); border: 1px solid var(--ac-line-soft); }
/* the loader card pushes vertically (the brief); the landscape tile slides sideways, and its
   square product is sized by the frame's height so it can never overflow the shorter axis */
.ld-thumb .ld-strip { flex-direction: row; width: 100%; }
.ld-thumb .ld-slide img { width: auto; height: 80%; }
/* a shelf with nothing on it yet shows its photograph in the tile, edge to edge */
.ld-thumb .ld-slide.is-photo img { width: 100%; height: 100%; object-fit: cover; }
.ld-tx { min-width: 0; }
/* colour stated, not inherited: the site bundle styles h1 and p in its own sizes */
.ld-title { margin: 0; font-size: 2.6em; font-weight: 550; line-height: 1; letter-spacing: -0.03em; color: var(--ac-ink); }
.ld-title span { display: block; }
.ld-sub { margin: 0.55em 0 0; font-size: 0.82em; line-height: 1.3; color: var(--ac-muted); }
.ld-dek { margin: 0.45em 0 0; font-size: 1.05em; line-height: 1.3; font-weight: 400; letter-spacing: -0.01em; color: var(--ac-ink); }

.ld-next { position: relative; margin-left: auto; flex: none; width: 17vw; height: 5.4vh; color: var(--ac-ink); }
.ld-next-k, .ld-next-v { margin: 0; font-size: 1.3vh; text-transform: uppercase; letter-spacing: 0.12em; line-height: 1.2; }
.ld-next-k { color: var(--ac-muted); }
.ld-next-v { margin-top: 0.3vh; letter-spacing: 0.1em; color: var(--ac-ink); }
.ld-arrows { position: absolute; right: 1vw; top: -0.2vh; height: 3.4vh; display: flex; align-items: center; gap: 0.55vw; }
.ld-arrows button { background: none; border: 0; padding: 0.4vh 0.25vw; color: var(--ac-ink); cursor: pointer; display: flex; }
.ld-arrows svg { width: 0.5vw; height: 0.5vw; fill: currentColor; }
.ld-arrows button:hover { color: var(--ac-red); }
.ld-arrows button:focus-visible { outline: 2px solid var(--ac-ink); outline-offset: 2px; border-radius: 4px; }
.ld-div { width: 1px; height: 3vh; background: var(--ac-line); }
.ld-progress { position: absolute; left: 0; right: 0; top: 4.9vh; height: 2px; background: var(--ac-line-soft); }
.ld-fill { height: 100%; width: 100%; background: var(--ac-ink); transform-origin: left center; transform: scaleX(0); }

/* the peeling edge: a hairline drawn along the sheet's curved top while it drops */
.ld-edge { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; opacity: 0; }
.ld-edge path { fill: none; stroke: rgba(34, 34, 34, 0.35); stroke-width: 1; vector-effect: non-scaling-stroke; }

/* ---------- mobile: same structure, sizes from the brief ---------- */
@media (max-width: 767px) {
  .ld-nav { left: 4vw; right: 4vw; top: 3vh; }
  .ld-still { padding: 4vh 6vw 0 0; }
  .ld-still img { height: 40vh; }
  .ld-label { left: 4vw; top: 79.4vh; }
  .ld-over { left: 4vw; bottom: 25vh; max-width: 86vw; }
  .ld-over h2 { font-size: 7vw; }
  .ld-over.is-big { right: 4vw; }
  .ld-over.is-big h2 { font-size: 12vw; }
  .ld-card { width: 44vw; }
  .ld-mark { width: 26vw; }
  .ld-glen { width: 9vw; }
  /* the sheet lands 92vw wide here (landing.js matches the clip), with the same inner gutter */
  .ld-panel { padding: 0 8vw; }
  .ld-chapterbar { gap: 3.5vw; }
  .ld-thumb { width: 18vw; border-radius: 10px; }
  .ld-title { font-size: 1.7em; }
  .ld-sub { font-size: 0.72em; }
  .ld-dek { display: none; }
  /* the arrows alone on the right; next-up and the line need a wider bar than a phone has */
  .ld-next { width: auto; height: auto; }
  .ld-next-k, .ld-next-v, .ld-progress { display: none; }
  .ld-arrows { position: static; height: auto; gap: 2vw; }
  .ld-arrows svg { width: 2.4vw; height: 2.4vw; }
}

@media (prefers-reduced-motion: reduce) {
  .ld-bg { transition: none; }
}

/* ---------- direction A: the landed bar is the house liquid glass ----------
   .ld-glass is a slab the size of the bar the sheet shows at rest - its 8.9vw inset (4vw on
   phones, landing.js), 15.2vh tall. It sits in every stage but only shows on A (body.hm-glass)
   and only once the sheet has landed, so the opener's cream sheet is exactly as it was: at
   settle the sheet clears and the slab fades in under the bar. home.js hands the slab to
   commerce.js's liquid glass (aldaGlass.apply - refraction map, rim, specular); without Chromium
   the blur and tint here carry the material on their own. */
.ld-glass { display: none; }
.ld-landed .hm-glass .ld-sheet { background: rgba(245, 246, 238, 0); border-top-color: transparent; transition: background-color 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.9s; }
.ld-landed .hm-glass .ld-glass {
  display: block; position: absolute; left: 8.9vw; right: 8.9vw; top: 0; height: 15.2vh; z-index: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 55%), rgba(245, 246, 238, 0.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.6);
  backdrop-filter: blur(22px) saturate(1.6);
  opacity: 0; animation: ld-glass-in 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
@keyframes ld-glass-in { to { opacity: 1; } }
/* the bar's content sits over the slab; only its controls take the pointer, so the specular
   hotspot can follow the cursor across the glass */
.ld-landed .hm-glass .ld-panel { pointer-events: none; }
.ld-landed .hm-glass .ld-panel :is(a, button) { pointer-events: auto; }
.ld-landed .hm-glass .ld-thumb { background: rgba(255, 255, 255, 0.35); border-color: rgba(255, 255, 255, 0.6); }
@media (max-width: 767px) {
  .ld-landed .hm-glass .ld-glass { left: 4vw; right: 4vw; }
}
@media (prefers-reduced-motion: reduce) {
  .ld-landed .hm-glass .ld-glass { animation: none; opacity: 1; }
  .ld-landed .hm-glass .ld-sheet { transition: none; }
}

/* The opening: the shared navigation stays hidden under the opener until its reveal. */
body.ac-opening:not(.ld-nav-reveal) .sn-header { opacity:0; visibility:hidden; }
body.ld-nav-reveal .sn-header { animation:ld-navigation-in .8s cubic-bezier(.22,1,.36,1) both; }
@keyframes ld-navigation-in { from {opacity:0;transform:translateY(-10px)} to {opacity:1;transform:translateY(0)} }
@media(prefers-reduced-motion:reduce){body.ld-nav-reveal .sn-header {animation:none;}}

/* Mise en place, the opener (landing.js; the default since 2026-09-28). The cream sheet carries six ALDA pieces
   laid out from above; the pan's cooking surface becomes a window onto the hero film (a radial mask
   around --hx/--hy) that grows until the film fills the screen. */
.ld-mise { position: fixed; inset: 0; z-index: 300010; overflow: hidden; background: var(--alda-paper); pointer-events: none;
  -webkit-mask-image: radial-gradient(circle at var(--hx) var(--hy), transparent var(--hole), #000 calc(var(--hole) + 0.5px));
  mask-image: radial-gradient(circle at var(--hx) var(--hy), transparent var(--hole), #000 calc(var(--hole) + 0.5px)); }
.ld-mise img { position: absolute; display: block; max-width: none; height: auto; opacity: 0; will-change: transform, opacity; }
.ld-mise .ld-mise-piece, .ld-mise .ld-mise-pan { filter: drop-shadow(0 16px 20px rgba(60, 48, 28, 0.15)) drop-shadow(0 3px 5px rgba(60, 48, 28, 0.12)); }
/* The first visit in a tab (2026-10-14): landing.js is deferred, so the hero used to paint for a moment before the
   opener covered it (hero -> cream -> opener -> hero). The inline guard in the head (#ld-pre, written by
   scratchpad/patch-landing-hero.py) sets html.ld-pre on the visits that play the opener; this lays the opener's own
   cream over the page from the first frame, and landing.js lifts it once the opener is on the page. Should the
   script never run, the cover goes by itself after a few seconds. */
html.ld-pre::after { content: ""; position: fixed; inset: 0; z-index: 300011; background: var(--alda-paper); pointer-events: none;
  animation: ld-pre-fail 0s 6s forwards; }
@keyframes ld-pre-fail { to { visibility: hidden; } }