/* ============================================================
   518 Official — CONTACT page layout
   css/pages/contact.css?v=3 — loads after tokens.css + site.css.
   Page-scope layout only. Never restyles the shell, never
   declares :root, never overrides tokens.

   Contrast law (tokens.css): raw cobalt is never copy. Cobalt
   appears here only as ticks, hairlines, and hover accents on
   decorative glyphs; all copy is ivory/smoke or --rizz-text.

   Honesty law: the page has TWO real channels — the interim email
   line and the crew's own live store (518officialapparel.com). Social
   slots are designed inert placeholders — they get no hover
   affordance, no cursor, no link styling.

   Amber note: --drop appears here on exactly one element, the
   store row's label tick (plus its hover glyph). That row is a
   merch CTA — the single permitted amber class under palette law
   #2 — and amber is used nowhere else on this page, so the warm
   signal still reads as "this is the store."

   Motion hooks are never pre-hidden here — the page reads in
   full with JS disabled (no-JS floor).

   TOC:
   01 Hero (type-led)          03 General inquiry
   02 Direct-line rail         04 Work-with-RIZZ band
   ============================================================ */

/* ---------- 01 Hero — type-led, no media ---------- */
.chero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(3rem, 11vw, 7.5rem));
  padding-bottom: var(--sect-pad);
}

/* Fit: this padding STACKS with .dgrid's margin-top (both gaps are declared
   independently because the two blocks live in separate .container wrappers).
   At the old 4.5rem the pair summed to 140px at 1440 / 80px at 390 — the
   loosest joint on the page by a wide margin. Halved so the sum lands at
   108px / 64px and the hero statement stays tied to the direct line. */
.chero-top { padding-bottom: clamp(1.5rem, 4vw, 2.5rem); }

.chero .eyebrow { margin-bottom: clamp(1.25rem, 3vw, 2rem); }

.chero .hero-title {
  margin-left: -0.04em;           /* optical left-align for Archivo Black */
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}

.chero .lead {
  max-width: 46ch;
  color: var(--ivory-80);
}

/* ---------- 02 Direct-line rail ----------
   Hairline-ruled rails, not cards — the email line is the only
   heavy object in the hero. The live line is the ONE real
   channel; --soon slots are inert by design (house honesty law:
   placeholders never masquerade as links). */
.dgrid {
  margin-top: clamp(2.5rem, 7vw, 4.25rem);
  display: grid;
  gap: 0;
}

.dline {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
  min-height: 44px;
  padding: clamp(1.35rem, 3.5vw, 2rem) 0;
  border-top: 1px solid var(--line);
  text-decoration: none;
  transition: border-color var(--dur-2) var(--ease), padding-left var(--dur-2) var(--ease);
}

.dgrid > .dline:last-child { border-bottom: 1px solid var(--line); }

a.dline:hover,
a.dline:focus-visible {
  border-top-color: var(--line-rizz);
  padding-left: var(--sp-4);
}

.dline-label {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--smoke);
}

.dline-label::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--rizz-line);   /* lit accent, matches .eyebrow tick */
  flex: none;
}

/* Inert slots: dimmer tick, no interactivity implied */
.dline--soon .dline-label::before { background: var(--line-strong); }

/* Store row: the one commerce affordance on the page, so it carries
   the one amber tick. Fill only — no amber copy, no amber on a
   surface that holds ivory text. (Its hover glyph is overridden
   further down, AFTER the generic .dline-glyph hover rule — equal
   specificity, so source order decides.) */
.dline--store .dline-label::before { background: var(--drop); }

.dline-value {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: clamp(1.3rem, 4.4vw, 1.9rem);
  line-height: 1.15;
  color: var(--ivory);
  overflow-wrap: anywhere;
}

/* The one real channel — email set in the wordmark face, the
   page's replacement for a phone number it honestly doesn't have */
.dline--live .dline-value {
  font-family: var(--font-logo);
  font-weight: 700;
  font-size: clamp(1.4rem, 4.2vw, 2.2rem);
  letter-spacing: 0.01em;
  line-height: 1.05;
}

/* The second real channel — same technical face as the email, one
   step down so the direct line stays the page's loudest object. */
.dline--store .dline-value {
  font-family: var(--font-logo);
  font-weight: 700;
  font-size: clamp(1.35rem, 5vw, 2.1rem);
  letter-spacing: 0.01em;
  line-height: 1.05;
}

.dline--soon .dline-value {
  font-weight: 500;
  color: var(--ivory-60);
}

/* Stacked rail only (<768). Three inert placeholders carrying the SAME
   vertical padding as the two live channels took 315px — 34% of the mobile
   rail — to say nothing. Tightened so the rail's height is spent on the
   channels that actually work. Scoped below 768 on purpose: at 768+ these
   rows share a grid row with "Based In", and an uneven padding-top there
   would knock their labels out of line with it. */
@media (max-width: 767.98px) {
  .dline--soon { padding-block: var(--sp-3); }

  /* Same rank correction the 768 block makes, applied at the stacked size.
     The base clamp bottoms out at its 1.3rem floor on a phone, so a
     placeholder was landing at 20.8px against the live store channel's
     21.6px — 0.8px apart. Family, weight and ivory-60 were carrying the
     whole hierarchy on their own; size now carries its share. */
  .dline--soon .dline-value { font-size: 1.15rem; }
}

.dline-meta {
  font-size: var(--fs-small);
  color: var(--smoke);
  max-width: 52ch;
}

.dline-glyph {
  position: absolute;
  top: clamp(1.35rem, 3.5vw, 2rem);
  right: 0;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--ivory-60);
  transition: color var(--dur-1) var(--ease), transform var(--dur-2) var(--ease);
}

a.dline:hover .dline-glyph,
a.dline:focus-visible .dline-glyph {
  color: var(--rizz-hot);          /* decorative accent on hover, not copy */
  transform: translate(3px, -3px);
}

/* Commerce row keeps its warm signal on hover too (decorative glyph,
   not copy). Must sit after the rule above — same specificity. */
a.dline--store:hover .dline-glyph,
a.dline--store:focus-visible .dline-glyph { color: var(--drop-text); }

/* Anti-impersonation note — quiet, but ruled so it registers */
.dgrid-note {
  margin-top: var(--sp-6);
  padding-left: var(--sp-4);
  border-left: 2px solid var(--rizz-line);
  font-size: var(--fs-small);
  color: var(--smoke);
  max-width: 62ch;
}

@media (min-width: 768px) {
  .dgrid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--sp-6);
  }

  /* Both live channels run the full width of the rail; the inert
     slots share the remaining columns. */
  .dline--live,
  .dline--store { grid-column: 1 / -1; }

  .dgrid > .dline:last-child { border-bottom: 0; }

  .dline { padding-right: var(--sp-5); }

  .dline-glyph { right: var(--sp-4); }

  /* Secondary values step down the moment the rail goes multi-column.
     Two jobs: columns get narrow, so "Capital Region, N.Y." never has to
     break mid-word — and, at 768–979, the un-stepped clamp resolved to
     30.4px against the LIVE store channel's 33.6px, so three "Landing soon"
     placeholders read at nearly the weight of a real channel. This clamp
     resolves identically to the old 980-only rule at every width >= 980,
     so desktop is untouched; only the tablet band changes. */
  .dline:not(.dline--live):not(.dline--store) .dline-value {
    font-size: clamp(1.1rem, 1.5vw, 1.4rem);
  }
}

@media (min-width: 980px) {
  .dgrid {
    grid-template-columns: repeat(4, 1fr);
    column-gap: var(--sp-6);
  }
}

/* ---------- 03 General inquiry — form + brief panel ---------- */
.inq-grid { display: grid; gap: clamp(2.5rem, 7vw, 4rem); }

@media (min-width: 980px) {
  .inq-grid {
    grid-template-columns: 1.12fr 0.88fr;
    column-gap: var(--sp-9);
    align-items: start;
  }
}

/* Below the 2-col breakpoint, cap both columns to a form-friendly
   measure so single-line inputs never stretch to a 700px measure
   (inherited Cindy §16 fit finding — kept for the RIZZ layout). */
@media (max-width: 979.98px) {
  .cform { max-width: 34rem; }

  .inq-brief { max-width: 34rem; }
}

.inq-alt {
  margin-top: var(--sp-4);
  color: var(--ivory-80);
  max-width: 56ch;
}

.cform { display: grid; gap: var(--sp-5); }

.field { display: grid; gap: var(--sp-2); }

.field > label {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--ivory-80);
}

/* Field chrome carries verified contrast values (inherited Cindy
   §14 audit, re-checked against the unchanged RIZZ neutrals):
   --panel-2 fill + 36% ivory border measures 3.07:1 vs fill and
   3.40:1 vs page — passes WCAG 1.4.11 for control boundaries.
   Do not thin the border or drop the fill back to a bare dark. */
.field input,
.field textarea {
  width: 100%;
  min-height: 52px;
  padding: 0.85rem 1rem;
  background: var(--panel-2);
  border: 1px solid color-mix(in srgb, var(--ivory) 36%, transparent);
  border-radius: var(--r-sm);
  color: var(--ivory);
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}

.field textarea { min-height: 10.5rem; resize: vertical; }

/* Hover tier below focus — telegraphs interactivity on pointer-over
   without touching the resting border or the ivory focus ring. */
.field input:hover:not(:focus),
.field textarea:hover:not(:focus) {
  border-color: color-mix(in srgb, var(--ivory) 50%, transparent);
}

.field input:focus,
.field textarea:focus {
  border-color: var(--ivory);
  background: var(--panel-2);
  outline: none;
}

.field input:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--ivory);
  outline-offset: 2px;
}

.cform-note {
  font-size: var(--fs-small);
  color: var(--smoke);
  max-width: 54ch;
}

.cform .btn { justify-self: start; }

.cform-fallback {
  font-size: var(--fs-small);
  color: var(--smoke);
  max-width: 54ch;
}

.cform-fallback a { color: var(--ivory-80); }

/* Brief panel beside the form — a designed typographic artifact.
   Contact carries no photography by choice, not by shortage: the
   crew's real event photos live on the pages that earn them
   (events, media, apparel). This page is a switchboard, so it is
   type-led end to end. The panel supports the form; it never
   out-weighs it. */
.inq-brief {
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 3px solid var(--rizz);
  border-radius: var(--r-md);
  padding: clamp(1.5rem, 3.5vw, 2.25rem);
}

.inq-brief-head {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--ivory);
  margin-bottom: var(--sp-5);
}

.inq-brief-list {
  display: grid;
  gap: var(--sp-4);
}

.inq-brief-list li {
  position: relative;
  padding-left: calc(18px + 0.8rem);
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--ivory-80);
}

.inq-brief-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 18px;
  height: 2px;
  background: var(--rizz-line);
}

.inq-brief-list strong {
  font-weight: 600;
  color: var(--ivory);
}

.inq-brief-foot {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
  font-size: var(--fs-small);
  color: var(--smoke);
}

/* ---------- 04 Work-with-RIZZ band ---------- */
/* Route cards into book.html's inquiry lanes. Whole card is the
   tap target (house Click Protocol): the title link stretches over
   the card at z-index 5; cards contain no other interactive
   elements, so nothing needs to sit above the stretch. */
.cwork-grid {
  display: grid;
  gap: var(--sp-5);
}

/* 3-up waits for 980, where the rest of the page also goes to its desktop
   grid (.dgrid 4-col, .inq-grid 2-col). At the old 768 the three cards
   split a 764px container into 238.8px boxes whose copy measured 186.4px —
   about 26 characters per line, seven ragged lines deep. The card copy is
   short, but not that short. */
@media (min-width: 980px) {
  .cwork-grid { grid-template-columns: repeat(3, 1fr); }
}

.cwork-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ivory) 5%, transparent);
  transition:
    border-color var(--dur-2) var(--ease),
    transform var(--dur-1) var(--ease),
    box-shadow var(--dur-2) var(--ease);
}

.cwork-card:hover,
.cwork-card:focus-within {
  border-color: var(--line-rizz);
  transform: translateY(-2px);
  box-shadow: var(--glow-rizz-soft);
}

.cwork-card:focus-within {
  outline: 2px solid var(--ivory);
  outline-offset: 2px;
}

.cwork-kicker {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--smoke);
}

.cwork-title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.4vw, 1.6rem);
  line-height: 1.08;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.cwork-title a {
  color: var(--ivory);
  text-decoration: none;
}

/* Stretched link — the whole card is the target */
.cwork-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
}

/* Ring is painted on the card via :focus-within above */
.cwork-title a:focus-visible { outline: none; }

/* Measure cap. Inert in the 1-col mobile and 3-col desktop layouts (both
   run well under it); it binds only in the 768–979 band, where the cards
   are full-container bands and the copy would otherwise run ~100
   characters to the line. */
.cwork-copy {
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--ivory-80);
  max-width: 62ch;
  flex-grow: 1;
}

.cwork-cta {
  margin-top: var(--sp-2);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--rizz-text);
}

.cwork-cta span {
  transition: transform var(--dur-2) var(--ease);
}

.cwork-card:hover .cwork-cta span,
.cwork-card:focus-within .cwork-cta span {
  transform: translate(3px, -3px);
}

/* Lane index — the full LEAD inquiry-type roster, as a closer */
.cwork-lanes {
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  text-align: center;
  font-family: var(--font-label);
  font-weight: 500;
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--smoke);
}

.cwork-lanes strong {
  font-weight: 600;
  color: var(--ivory-80);
}


/* ---------- Hero film (added 2026-08-18) ----------
   The contact page led with type on flat black. It now opens on the DJ
   patio — the room a visitor is getting in touch about. Same rules as the
   home hero: the film is decorative, the poster is the floor, and the
   scrim only covers the corner the copy sits in. */
.chero { position: relative; overflow: hidden; }

.chero-film { position: absolute; inset: 0; z-index: var(--z-bg); }

/* Face-safe: hero-4-dj measured 39.7% 15.2% (3 faces). */
.chero-film video,
.chero-film .vslot-poster { object-fit: cover; object-position: 39.7% 15.2%; }

.chero-grade {
  position: absolute; inset: 0; z-index: var(--z-base); pointer-events: none;
  background:
    linear-gradient(to top,
      rgba(10, 10, 10, 0.95) 0%,
      rgba(10, 10, 10, 0.80) 26%,
      rgba(10, 10, 10, 0.46) 55%,
      rgba(10, 10, 10, 0.30) 100%),
    linear-gradient(100deg,
      rgba(10, 10, 10, 0.72) 0%,
      rgba(10, 10, 10, 0.25) 40%,
      rgba(10, 10, 10, 0) 70%);
}

.chero-top { position: relative; z-index: var(--z-content); padding-block: var(--sp-9) var(--sp-7); }