/* LUMEN A — the craft layer. "Glazed": Rhode gloss on Nécessaire bones.
 *
 * Loads alongside lumen.css (the register) and lumen-motion.css (the shared
 * motion contract). This file owns chrome, imagery and the token overrides
 * that give A its character.
 *
 * Naming: everything here is `.a-*` EXCEPT the hooks lumen-motion.css owns
 * (.card, .card__frame, .card__img, .nav-link, .marquee, .ship__*, and the
 * [data-lumen-*] attributes). `.a-head` was already taken by the register's
 * section header, so the site header is `.a-bar`.
 */

:root {
  /* A's curve. Rhode's own easing — a hard, confident settle. */
  --ease: cubic-bezier(0.76, 0, 0.24, 1);
  --dur-card: 300ms;
  --dur-reveal: 500ms;
  --card-scale: 1.04;

  --spinner-color: var(--a-on-accent);
  --skeleton-base: #e4e2dd;
  --skeleton-sheen: #f5f4f1;

  --a-bar-h: 5.5rem;
  --a-ticker-h: 2.375rem;
  --a-bleed: clamp(1rem, 4vw, 2.5rem);
  --a-max: 88rem;
}

/* The hero starts under the sticky bar. Pulling `main` up by exactly the bar's
   height is deterministic; relying on margin collapse through <main> is not.
   The ticker sits above and is not overlapped. */
main[data-template='index'] { margin-top: calc(-1 * var(--a-bar-h)); }

/* A sticky element is confined to its CONTAINING BLOCK, and Shopify nests every
   section in `.shopify-section` inside `#header-group`. Sticking either of
   those inner boxes gives the bar a travel range exactly its own height — i.e.
   none. `#header-group` is the first ancestor tall enough to travel, so it does
   the sticking, offset upward by the ticker so the ticker scrolls out of view
   while the bar pins to the viewport. */
#header-group { position: sticky; top: calc(-1 * var(--a-ticker-h)); z-index: 40; }
.a-bar-wrap { position: static; }

.a-bleed { max-width: var(--a-max); margin-inline: auto; padding-inline: var(--a-bleed); }

.a-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding-inline: 1.75rem;
  border-radius: var(--a-radius);
  font-size: 0.875rem;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--dur-control) var(--ease), color var(--dur-control) var(--ease),
    border-color var(--dur-control) var(--ease);
}
.a-btn--fill { background: var(--a-ink); color: var(--a-ground); }
.a-btn--line { border-color: var(--a-line-strong); color: var(--a-ink); }
@media (hover: hover) {
  .a-btn--fill:hover { background: var(--a-accent); }
  .a-btn--line:hover { border-color: var(--a-ink); background: var(--a-ink); color: var(--a-ground); }
}
.a-btn:focus-visible { outline: 2px solid var(--a-accent); outline-offset: 3px; }

/* ------------------------------------------------------------------ ticker */
.a-ticker {
  height: var(--a-ticker-h);
  display: flex;
  align-items: center;
  background: var(--a-ink);
  color: var(--a-ground);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  --marquee-dur: 38s;
}
.a-ticker__copy { display: flex; }
/* Each copy must be at least a viewport wide, or on a very wide screen the
   -50% loop exposes a gap between copy one and copy two. */
.a-ticker .a-ticker__copy { min-width: 100vw; justify-content: space-around; }
.a-ticker span { padding-inline: 2.25rem; white-space: nowrap; }

/* ------------------------------------------------------------------ header */
/* The wrapper does the sticking; override lumen-motion.css's default, or the
   inner box sticks a second time inside the first and double-offsets. */
.a-bar {
  position: static;
  color: var(--a-ink);
  background: transparent;
  border-bottom: 1px solid transparent;
}
/* Transparent only while it floats over the hero. The moment content can slide
   underneath, it must be opaque or text collides with text. */
.a-bar.is-solid,
.a-bar.is-condensed { background: var(--a-ground); border-bottom-color: var(--a-line); }

.a-bar__inner {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  min-height: var(--a-bar-h);
  padding-block: 0;
  max-width: var(--a-max);
  margin-inline: auto;
  padding-inline: var(--a-bleed);
  /* NO transition on min-height. #header-group is sticky and therefore still in
     flow, so tweening its height reflows every section below it, every frame.
     The height steps once; the wordmark carries the motion, on a composited
     transform. Found by theme B's adversarial review. */
}
.a-bar.is-condensed .a-bar__inner { min-height: 3.5rem; }

.a-bar__mark {
  font-weight: 700;
  font-size: 1.375rem;
  letter-spacing: -0.03em;
  text-transform: lowercase;
  color: var(--a-ink);
  text-decoration: none;
  transform-origin: left center;
  transition: transform var(--dur-card) var(--ease);
}
.a-bar.is-condensed .a-bar__mark { transform: scale(0.82); }

.a-bar__nav { display: flex; gap: 1.75rem; margin-left: auto; font-size: 0.8125rem; }
.a-bar__nav a { color: var(--a-ink); text-decoration: none; padding-block: 0.5rem; }
.a-bar__acts { display: flex; align-items: center; gap: 0.25rem; }
.a-bar__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 44px;
  min-width: 44px;
  justify-content: center;
  background: none;
  border: 0;
  color: var(--a-ink);
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
  border-radius: var(--a-radius);
  text-decoration: none;
}
.a-bar__btn:focus-visible,
.a-bar__nav a:focus-visible,
.a-bar__mark:focus-visible { outline: 2px solid var(--a-accent); outline-offset: 3px; }
.a-bar__count {
  font-variant-numeric: tabular-nums;
  background: var(--a-accent);
  color: var(--a-on-accent);
  border-radius: 999px;
  min-width: 1.25rem;
  padding: 0 0.25rem;
  font-size: 0.6875rem;
  line-height: 1.25rem;
}
@media (max-width: 52rem) {
  .a-bar__nav { display: none; }
}

/* -------------------------------------------------------------------- hero */
/* The ticker sits above the hero and is not overlapped, so the hero fills what
   is left of the viewport rather than a full 100svh — otherwise the fold lands
   38px into the section below. */
.a-hero {
  position: relative;
  min-height: calc(100svh - var(--a-ticker-h));
  display: grid;
  /* ONE row, filling the hero, holding exactly one in-flow item: the copy.
     `align-self` on the copy then means what it says. */
  grid-template-rows: 1fr;
  padding-top: var(--a-bar-h);
  background: var(--a-ground);
  isolation: isolate;
}
/* Take the plate out of flow at the <picture>, not the <img>.
   `display: contents` looks tempting but promotes <picture>'s children into
   grid items — including <source>, which then claims a full 1fr row and pushes
   the copy into an implicit second row at the bottom of the frame. */
.a-hero > picture {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.a-hero__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* The bar floats over the plate, and the plate's left third is dark hair. A
   scrim under the chrome keeps the wordmark and nav at their measured contrast
   ratio against ANY crop of ANY future photograph, instead of only this one.

   z-index 0, NOT -1. Among negatively-stacked children paint order is DOM
   order, and ::before is the hero's first child — at -1 it renders *beneath*
   the plate and does nothing at all. At 0 it sits above the plate and still
   below .a-hero__copy, which follows it in the DOM. */
.a-hero::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  z-index: 0;
  height: calc(var(--a-bar-h) * 1.75);
  background: linear-gradient(to bottom, rgb(242 241 238 / 0.94), rgb(242 241 238 / 0));
  pointer-events: none;
}
.a-hero__copy {
  position: relative;
  align-self: start;
  justify-self: start;
  padding: 2rem var(--a-bleed) 0;
  max-width: 30rem;
}
/* Horizon's base.css sets `overflow-wrap: anywhere` on headings, which happily
   guillotines "disclosed." into "disclos / ed." Display type must never break
   inside a word; it may overflow, and the clamp is sized so it never has to. */
.a-hero__title {
  font-size: clamp(2.75rem, 7.2vw, 5.75rem);
  line-height: 0.94;
  letter-spacing: -0.045em;
  text-transform: lowercase;
  margin: 0;
  color: var(--a-ink);
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
  text-wrap: balance;
}
.a-hero__sub {
  margin: 1.25rem 0 2rem;
  max-width: 32ch;
  color: var(--a-muted);
  font-size: 1rem;
}
.a-hero__cue {
  position: absolute;
  bottom: 1.75rem;
  left: 50%;
  translate: -50% 0;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--a-muted);
}

/* The desktop plate leaves its empty cream on the RIGHT; the mobile plate
   leaves it at the TOP. The copy follows the art, not the other way round. */
@media (min-width: 48rem) {
  .a-hero__copy {
    align-self: center;
    justify-self: end;
    padding-inline-end: clamp(2rem, 7vw, 7rem);
    max-width: 34rem;
  }
}

/* -------------------------------------------------------------------- rail */
.a-rail { background: var(--a-ground); padding-block: var(--a-pad); }
.a-rail__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  max-width: var(--a-max);
  margin-inline: auto;
  padding-inline: var(--a-bleed);
  margin-bottom: 2rem;
}
.a-rail__track {
  gap: 1.25rem;
  padding-inline: var(--a-bleed);
  /* The rail clips its vertical axis, so leave room for focus rings. */
  padding-block: 0.375rem 0.75rem;
  scroll-padding-inline-start: var(--a-bleed);
}
.a-rail__track > * { width: min(78vw, 21rem); }
.a-rail__track:focus-visible { outline: 2px solid var(--a-accent); outline-offset: 4px; }

/* -------------------------------------------------------------------- card */
.a-card { position: relative; display: flex; flex-direction: column; }
.a-card__frame { border-radius: var(--a-radius); }
.a-card__plate { display: block; width: 100%; height: 100%; }
/* The tint is a colour field the vessel sits IN, not a background behind it:
   multiply lets the seamless cream of the plate take the field's colour while
   the vessel's own highlights survive. The hover plate is skin, so it must NOT
   multiply — it sits above, opaque, and covers the field entirely. */
.a-card__frame .card__img { mix-blend-mode: multiply; }
.a-card__frame .card__img--alt { mix-blend-mode: normal; }

.a-card__quick { position: absolute; z-index: 2; left: 0.75rem; right: 0.75rem; bottom: 0.75rem; }
.a-card__add {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding-inline: 1rem;
  border: 0;
  border-radius: var(--a-radius);
  background: var(--a-ink);
  color: var(--a-ground);
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
@media (hover: hover) {
  .a-card__add:hover { background: var(--a-accent); }
}
.a-card__add:focus-visible { outline: 2px solid var(--a-accent); outline-offset: 3px; }
.a-card__add[disabled] { background: var(--a-line); color: var(--a-muted); cursor: default; }

.a-card__meta { padding-top: 0.875rem; display: grid; gap: 0.125rem; }
.a-card__name { margin: 0; font-size: 0.9375rem; font-weight: 600; }
.a-card__name a { color: inherit; text-decoration: none; }
.a-card__name a::after { content: ''; position: absolute; inset: 0; }
.a-card__active { font-size: 0.8125rem; color: var(--a-accent); font-variant-numeric: tabular-nums; }
.a-card__unit { font-size: 0.75rem; color: var(--a-muted); font-variant-numeric: tabular-nums; }
.a-card__badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 1;
  background: var(--a-ground);
  color: var(--a-ink);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.3125rem 0.5rem;
  border-radius: var(--a-radius);
}

/* ----------------------------------------------------------------- marquee */
.a-mq {
  border-block: 1px solid var(--a-line);
  background: var(--a-ground);
  padding-block: 1.5rem;
  --marquee-dur: 64s;
}
.a-mq span {
  padding-inline: 1.75rem;
  white-space: nowrap;
  font-size: clamp(1rem, 2.4vw, 1.75rem);
  letter-spacing: -0.01em;
  color: var(--a-muted);
}
.a-mq b { color: var(--a-ink); font-weight: 600; }

/* --------------------------------------------------------------- editorial */
.a-ed { position: relative; background: var(--a-ink); color: var(--a-ground); isolation: isolate; }
.a-ed__stage { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
@media (max-width: 48rem) { .a-ed__stage { aspect-ratio: 4 / 5; } }
/* The loop is a pale cream macro, so white copy over it measures about 1.3:1.
   A bottom-weighted scrim buys the headline and body their contrast back
   without darkening the top of the frame, where the picture is the subject.
   z-index auto and first-in-DOM: above the negatively-stacked video, below the
   copy that follows it. */
.a-ed__stage::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgb(24 24 24 / 0.82) 0%,
    rgb(24 24 24 / 0.55) 28%,
    rgb(24 24 24 / 0.12) 55%,
    rgb(24 24 24 / 0) 75%
  );
}
.a-ed__video,
.a-ed__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}
.a-ed__poster { display: none; }
/* Reduced motion gets the still. `display:none` on a preload="none" video means
   it is never fetched, so this is a bandwidth win as well as a motion one. */
@media (prefers-reduced-motion: reduce) {
  .a-ed__video { display: none; }
  .a-ed__poster { display: block; }
}
.a-ed__copy {
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: 0;
  padding: clamp(1.5rem, 5vw, 4rem);
  max-width: 40rem;
}
.a-ed__title {
  font-size: clamp(1.75rem, 4vw, 3.25rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-transform: lowercase;
  margin: 0 0 1rem;
  overflow-wrap: normal;
  word-break: keep-all;
}
.a-ed__body { margin: 0 0 1.5rem; max-width: 46ch; color: #e6e4e0; }
.a-ed .a-btn--line { border-color: rgb(255 255 255 / 0.65); color: var(--a-ground); }
@media (hover: hover) {
  .a-ed .a-btn--line:hover { background: var(--a-ground); color: var(--a-ink); border-color: var(--a-ground); }
}

/* ------------------------------------------------------------------ footer */
.a-foot { background: var(--a-ground); border-top: 1px solid var(--a-line); padding-top: var(--a-pad); }
.a-foot__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
  max-width: var(--a-max);
  margin-inline: auto;
  padding-inline: var(--a-bleed);
}
@media (max-width: 60rem) { .a-foot__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 34rem) { .a-foot__grid { grid-template-columns: 1fr; } }

.a-foot h2 { font-size: 1.125rem; letter-spacing: -0.01em; margin: 0 0 0.5rem; }
.a-foot h3 {
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--a-muted);
  margin: 0 0 1rem;
}
.a-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.625rem; }
.a-foot a { color: inherit; text-decoration: none; font-size: 0.875rem; }
.a-foot__note { color: var(--a-muted); font-size: 0.875rem; max-width: 34ch; margin: 0 0 1.25rem; }

.a-sign { display: flex; gap: 0.5rem; max-width: 22rem; }
.a-sign input {
  flex: 1;
  min-height: 48px;
  padding-inline: 0.875rem;
  border: 1px solid var(--a-line-strong);
  border-radius: var(--a-radius);
  background: var(--a-surface);
  font: inherit;
  color: var(--a-ink);
}
.a-sign input:focus-visible { outline: 2px solid var(--a-accent); outline-offset: 1px; }
.a-sign__ok { color: var(--a-accent); font-size: 0.875rem; margin: 0.75rem 0 0; }
.a-sign__err { color: #a3231f; font-size: 0.875rem; margin: 0.75rem 0 0; }

.a-foot__utils {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
  max-width: var(--a-max);
  margin: var(--a-pad) auto 0;
  padding-inline: var(--a-bleed);
  font-size: 0.75rem;
  color: var(--a-muted);
}
.a-foot__utils ul { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.a-foot__utils a { font-size: 0.75rem; }

/* The one indulgence: the wordmark at the scale of a building. */
.a-foot__word {
  display: block;
  margin-top: 2rem;
  padding-inline: var(--a-bleed);
  font-size: clamp(4rem, 19vw, 17rem);
  line-height: 0.78;
  letter-spacing: -0.055em;
  text-transform: lowercase;
  font-weight: 700;
  color: var(--a-ink);
  overflow: hidden;
  padding-bottom: 0.08em;
}
.a-foot__fine {
  max-width: var(--a-max);
  margin-inline: auto;
  padding: 1.5rem var(--a-bleed) 2.5rem;
  font-size: 0.6875rem;
  color: var(--a-muted);
}

/* ------------------------------------------------------------------ drawer */
/* The panel does not scroll; the line list inside it does. Otherwise the sticky
   header and the checkout foot scroll away with the items. */
.a-drawer__panel { background: var(--a-ground); color: var(--a-ink); overflow: hidden; }
.a-drawer__top { padding: 1.25rem var(--a-bleed); border-bottom: 1px solid var(--a-line); }
.a-drawer__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.a-drawer__title { font-size: 1rem; margin: 0; letter-spacing: -0.01em; }
.a-drawer__x {
  background: none;
  border: 0;
  font: inherit;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  color: inherit;
}
.a-drawer__x:focus-visible { outline: 2px solid var(--a-accent); outline-offset: 2px; }

.a-ship { margin-top: 0.875rem; font-size: 0.75rem; color: var(--a-muted); }
.a-ship .ship__track { background: var(--a-line); margin-top: 0.5rem; border-radius: 2px; }
.a-ship .ship__fill { background: var(--a-accent); }
.a-ship b { color: var(--a-ink); font-variant-numeric: tabular-nums; }

.a-drawer__lines { list-style: none; margin: 0; padding: 0 var(--a-bleed); flex: 1; overflow-y: auto; }
.a-line {
  display: grid;
  grid-template-columns: 4.5rem 1fr auto;
  gap: 1rem;
  align-items: start;
  padding-block: 1.25rem;
  border-bottom: 1px solid var(--a-line);
}
.a-line img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--a-radius); }
.a-line__name { font-size: 0.875rem; font-weight: 600; margin: 0; }
.a-line__name a { color: inherit; text-decoration: none; }
.a-line__opt { font-size: 0.75rem; color: var(--a-muted); margin: 0.125rem 0 0.75rem; }
.a-line__price { font-variant-numeric: tabular-nums; font-size: 0.875rem; text-align: right; }

.a-step { display: inline-flex; align-items: center; border: 1px solid var(--a-line-strong); border-radius: var(--a-radius); }
.a-step button {
  min-width: 44px;
  min-height: 44px;
  background: none;
  border: 0;
  font: inherit;
  cursor: pointer;
  color: inherit;
}
.a-step button:focus-visible { outline: 2px solid var(--a-accent); outline-offset: -2px; }
.a-step output { min-width: 2rem; text-align: center; font-variant-numeric: tabular-nums; font-size: 0.875rem; }
.a-line__rm { background: none; border: 0; padding: 0; font: inherit; font-size: 0.75rem; color: var(--a-muted); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; margin-top: 0.5rem; }

.a-drawer__foot { padding: 1.25rem var(--a-bleed) 1.75rem; border-top: 1px solid var(--a-line); background: var(--a-ground); }
.a-drawer__sum { display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; margin-bottom: 0.375rem; }
.a-drawer__tax { font-size: 0.75rem; color: var(--a-muted); margin: 0 0 1rem; }
.a-drawer__checkout { width: 100%; background: var(--a-accent); color: var(--a-on-accent); border: 0; }
.a-drawer__foot form { display: block; }

.a-empty { padding: 4rem var(--a-bleed); text-align: center; }
.a-empty__mark { font-size: 3rem; line-height: 1; color: var(--a-line); margin-bottom: 1rem; }
.a-empty p { color: var(--a-muted); margin: 0 0 1.5rem; }

/* --------------------------------------------------- register, with plates
 * The plate rides INSIDE the name cell rather than claiming a column of its
 * own: the register's seven-column rhythm is the section's whole identity, and
 * an eighth column would break the legend alignment on every breakpoint.
 */
.a-row__name { display: flex; align-items: center; gap: 0.875rem; }
.a-row__thumb {
  flex: 0 0 auto;
  width: 3.25rem;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--a-radius);
  background: var(--a-surface);
  transition: transform var(--dur-card) var(--ease);
}
@media (hover: hover) {
  .a-row:hover .a-row__thumb { transform: scale(1.06); }
}
.a-row { transition: background-color var(--dur-control) var(--ease); }
@media (hover: hover) {
  .a-row:hover { background: color-mix(in srgb, var(--a-surface) 60%, transparent); }
}


/* Drawer-wide focus ring. The drawer overlay lives outside every section scope
   that lumen.css hangs its :focus-visible rules on, so its checkout button,
   line-item links and empty-state CTA would otherwise fall through to the UA
   default (WCAG 2.4.7). One rule on the drawer attribute covers every control
   inside it. Found by theme C's adversarial review; applied to all three. */
[data-lumen-drawer] :is(a, button):focus-visible {
  outline: 2px solid var(--a-accent);
  outline-offset: 2px;
}