/* =========================================================================
   daloreum.com — page composition only.
   Everything here is arrangement. Colours, sizes, easings and component
   styling come from the design system; if a value is hard-coded below, it is
   a bug — add a token instead.
   ========================================================================= */

@layer page {

  /* ---- masthead ---------------------------------------------------------- */
  .masthead {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-sticky);
    background: color-mix(in oklab, var(--surface) 86%, transparent);
    backdrop-filter: blur(12px) saturate(1.4);
    border-block-end: var(--border) solid var(--line);
  }
  .masthead__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-m);
    padding-block: var(--space-xs);
  }
  /* The real brand lettering, not a font approximation. Ivory on near-black,
     which is why the page is dark — see the note in index.html. */
  .wordmark { display: flex; align-items: center; }
  .wordmark__img {
    block-size: 1.4rem;
    inline-size: auto;
    /* The artwork was extracted from a black field, so any residual dark
       fringe reads as part of the background rather than a halo. */
  }
  @media (max-width: 48rem) { .wordmark__img { block-size: 1.15rem; } }

  /* The symbol used as a large graphic anchor rather than an icon. */
  .brandmark {
    inline-size: min(18rem, 42vw);
    block-size: auto;
    opacity: 0.9;
  }
  .brandmark--sm { inline-size: 4.5rem; opacity: 0.75; }

  /* The hairline that opens the hero. The DS gives <hr> generous block
     margins; here it butts straight up against the headline. */
  .hero__rule {
    margin: 0;
    border-block-start: var(--border) solid var(--line);
  }

  /* ---- hero -------------------------------------------------------------- */
  .hero {
    /* Named so the backdrop can be positioned FROM the padding rather than
       from a percentage that drifts as the hero's height changes. */
    --_pad-top: clamp(var(--space-2xl), 12vh, var(--space-4xl));
    position: relative;
    isolation: isolate;
    overflow: clip;
    padding-block: var(--_pad-top) var(--space-2xl);
  }

  /* A floor of contrast over the lower hero. The horizon's position moves with
     viewport width, and the subhead, buttons and fact list sit in its path — so
     this guarantees legibility at every size rather than hoping the geometry
     lands well. Sits above the backdrop, below the content. */
  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(
      180deg,
      transparent 30%,
      color-mix(in oklab, var(--surface) 62%, transparent) 58%,
      color-mix(in oklab, var(--surface) 92%, transparent) 78%,
      var(--surface) 100%);
  }

  /* The mark occupies the empty upper-right of the hero rather than sitting
     behind the words — centred on the lettering it read as clutter. Anchored
     to the corner and allowed to bleed off it, so it reads as a rising sun at
     the edge of the frame rather than a decal placed on the type. */
  .hero__backdrop {
    position: absolute;
    z-index: -2;
    /* Top edge sits just under the eyebrow rule: the hero's top padding, plus
       the eyebrow's own line, plus a gap. Tied to the same token the padding
       uses, so it tracks the rule at every viewport instead of drifting. */
    /* NOTE: the PNG carries transparent padding — 18.2% of its height above
       the arc, 7.9% of its width to the right of it. So the element box is NOT
       the artwork. Nothing may bleed off the right here or the arc clips. */
    inset-block-start: calc(var(--_pad-top) + var(--space-l));
    inset-inline-end: 0;
    inline-size: min(44rem, 56vw);
    block-size: auto;
    --_opacity: 0.44;
    opacity: var(--_opacity);
    pointer-events: none;
    user-select: none;
  }
  @media (max-width: 60rem) {
    .hero__backdrop {
      inset-block-start: calc(var(--_pad-top) + var(--space-m));
      inset-inline-end: 0;
      inline-size: 82vw;
      --_opacity: 0.36;
    }
  }
  @media (prefers-reduced-motion: no-preference) {
    .hero__backdrop { animation: backdrop-in 1.6s var(--ease-out) both; }
  }
  @keyframes backdrop-in {
    from { opacity: 0; scale: 1.06; }
    to   { opacity: var(--_opacity); scale: 1; }
  }

  /* Each line steps further in — the asymmetry is the composition, so it is
     expressed as a ratio of the shell rather than fixed indents. */
  .hero__line { display: block; }
  .hero__line--2 { margin-inline-start: 7%; }
  /* The indent eats into the line's available width, and line 3 is the longest
     string in the hero — push it further and "ONE OWNER" wraps. */
  .hero__line--3 { margin-inline-start: 14%; }

  .hero__mark {
    display: inline-block;
    inline-size: 0.42em;
    block-size: 0.42em;
    background: var(--accent);
    vertical-align: 0.12em;
    margin-inline-start: 0.12em;
  }

  .hero__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-l);
    margin-block-start: var(--space-2xl);
  }

  .facts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-3xs) var(--space-s);
    font-family: var(--font-mono);
    font-size: var(--step--2);
    line-height: var(--leading-snug);
    border-block-start: var(--border-heavy) solid var(--text);
    padding-block-start: var(--space-xs);
  }
  .facts dt {
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--text-faint);
  }
  .facts dd { margin: 0; }

  /* ---- marquee band ------------------------------------------------------ */
  .band {
    padding-block: var(--space-m);
    border-block: var(--border-heavy) solid var(--text);
    overflow: clip;
  }

  /* ---- register ---------------------------------------------------------- */
  .register__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s);
    margin-block-end: var(--space-m);
  }

  /* Three explicit tracks: index | body | arrow. Every child is placed by
     hand — auto-placement around an explicitly-positioned arrow silently
     pushed the body into the 4rem index track and wrapped it one word wide. */
  .entry {
    --_pad: var(--space-m);
    display: grid;
    grid-template-columns: 4rem minmax(0, 1fr) auto;
    gap: 0 var(--space-m);
    align-items: start;
    padding: var(--_pad) var(--space-s);
    border-block-end: var(--border) solid var(--line);
    position: relative;
    isolation: isolate;
    color: var(--text);
  }
  .entry:first-of-type { border-block-start: var(--border-heavy) solid var(--text); }

  /* The hover fill sweeps from the leading edge. Placed behind via z-index so
     it never intercepts pointer events on the row's own content. */
  .entry::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--text);
    scale: 0 1;
    transform-origin: left;
    transition: scale var(--dur-4) var(--ease-out);
  }
  .entry:hover, .entry:focus-visible { color: var(--surface); }
  .entry:hover::before, .entry:focus-visible::before { scale: 1 1; }

  .entry__idx {
    grid-column: 1;
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: var(--tracking-label);
    color: var(--text-faint);
    padding-block-start: 0.7em;
    transition: color var(--dur-3) var(--ease-out);
  }
  .entry:hover .entry__idx { color: var(--accent); }

  .entry__body { grid-column: 2; min-inline-size: 0; }

  .entry__name {
    display: block;
    font-family: var(--font-display);
    font-size: var(--step-6);
    font-weight: 800;
    font-variation-settings: "wdth" var(--wdth-wide);
    letter-spacing: var(--tracking-display);
    line-height: var(--leading-flat);
    text-transform: uppercase;
    /* The width axis opens on hover — the letterforms themselves move. */
    transition: font-variation-settings var(--dur-4) var(--ease-out);
  }
  .entry:hover .entry__name { font-variation-settings: "wdth" var(--wdth-widest); }

  .entry__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-s);
    margin-block-start: var(--space-2xs);
  }
  .entry__desc {
    display: block;
    max-inline-size: var(--measure);
    margin-block-start: var(--space-2xs);
    color: var(--text-muted);
    transition: color var(--dur-3) var(--ease-out);
  }
  .entry:hover .entry__desc { color: color-mix(in oklab, var(--surface) 72%, var(--text)); }

  .entry__go {
    grid-column: 3;
    align-self: center;
    font-size: var(--step-3);
    opacity: 0;
    translate: -0.75rem 0;
    transition: opacity var(--dur-3) var(--ease-out), translate var(--dur-3) var(--ease-snap);
  }
  .entry:hover .entry__go, .entry:focus-visible .entry__go { opacity: 1; translate: 0 0; }

  /* Search with no matches: the empty state is a sibling revealed by :has(). */
  .register__empty { display: none; padding-block: var(--space-xl); }
  .register:has(.entry:not([hidden])) .register__empty { display: none; }
  .register:not(:has(.entry:not([hidden]))) .register__empty { display: block; }

  /* ---- statement --------------------------------------------------------- */
  .statement__grid {
    display: grid;
    gap: var(--space-l);
    grid-template-columns: minmax(0, 1fr);
  }
  @media (min-width: 60rem) {
    .statement__grid { grid-template-columns: 1fr minmax(0, 1.15fr); gap: var(--space-2xl); }
  }

  /* ---- contact ----------------------------------------------------------- */
  .contact { border-block-start: var(--border) solid var(--line); }

  .contact__mail {
    display: inline-block;
    font-family: var(--font-display);
    font-size: var(--step-8);
    font-weight: 800;
    font-variation-settings: "wdth" var(--wdth-normal);
    letter-spacing: var(--tracking-display);
    line-height: var(--leading-flat);
    text-transform: uppercase;
    word-break: break-word;
    transition: font-variation-settings var(--dur-4) var(--ease-out);
  }
  .contact__mail:hover { font-variation-settings: "wdth" var(--wdth-widest); }

  /* ---- footer ------------------------------------------------------------ */
  .site-foot {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);
    justify-content: space-between;
    padding-block: var(--space-m);
    border-block-start: var(--border) solid var(--line);
  }

  /* ---- small screens ------------------------------------------------------ */
  @media (max-width: 48rem) {
    .hero__line--2 { margin-inline-start: 4%; }
    .hero__line--3 { margin-inline-start: 10%; }
    .entry { grid-template-columns: 2.5rem minmax(0, 1fr); }
    .entry__body { grid-column: 2; }
    .entry__go { display: none; }
    .masthead .nav { display: none; }
  }
}