/* =========================================================================
   Cold Anvil Studios — Waitlist holding page (coldanvil.com/)

   v3 (2026-04-26) — restage per Design_Handoffs/waitlist-teaser-v3/.
   Letter sits on top of an oversized peek that bleeds off the right edge
   and fades horizontally; no browser chrome (the product's own header is
   the chrome). Wordmark drops italic on "Studios" — same Newsreader,
   regular weight, more legible.

   Overrides .holding-* rules in styles.css; depends on tokens.css
   (var(--ca-*), var(--font-display-b), var(--font-body-b)).
   ========================================================================= */

/* Body — warm gradient wash. Quieter than Home C's hero, because the
   holding page's content is the event, not the backdrop. */
body.holding {
  background: var(--ca-bg0s);
  overflow-x: hidden;
  position: relative;
}
body.holding::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(56% 38% at 22% 22%, rgba(216, 166, 92, 0.09), transparent 62%),
    radial-gradient(36% 28% at 82% 84%, rgba(140, 148, 92, 0.05), transparent 60%);
}

/* Stage — single relative-positioned page. Letter, peek, footer all
   live in one frame; the peek is absolutely positioned BEHIND the
   letter, the footer is absolutely positioned along the bottom edge. */
.holding-stage {
  position: relative;
  min-height: 100vh;
  padding: 0;
  z-index: 3;
  display: block;
}
.holding-inner {
  position: relative;
  width: 100%;
  min-height: 100vh;
  margin: 0;
  max-width: none;
  padding: 100px 44px 88px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  z-index: 4;
}

/* Wordmark — top-left, absolute. Inter 16/500 for "Cold Anvil"
   + Inter 13/400 muted for "Studios" — matching the v3 rendered
   reference, not the README (which contradicts itself on this).
   The handoff JSX uses var(--font-display) but in the handoff's own
   tokens that variable is undefined and falls back to the body sans;
   reference image shows clear sans-serif at this lockup. */
.holding-wordmark {
  position: absolute;
  top: 30px;
  left: 44px;
  margin: 0;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--cream);
  font-family: var(--font-body-b);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.005em;
  line-height: 1;
  text-decoration: none;
}
.holding-wordmark .anvil-mark,
.holding-wordmark svg {
  color: var(--accent);
}
.holding-wordmark span { color: var(--cream); }
.holding-wordmark .holding-wordmark-studios {
  font-family: var(--font-body-b);
  color: var(--ink-muted);
  font-style: normal;
  font-weight: 400;
  font-size: 13px;
  margin-left: 2px;
  letter-spacing: 0;
}

/* Left column — the letter. Capped at 540px, sits on z-index 4 above
   the peek. Padding lives on .holding-inner; this column is just a
   width cap. */
.holding-col-text {
  position: relative;
  z-index: 4;
  max-width: 540px;
  width: 100%;
}

.holding-eyebrow {
  font-family: var(--font-body-b);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--accent);
  margin: 0;
}

.holding-h {
  font-family: var(--font-display-b);
  font-size: 68px;
  font-weight: 500;
  color: var(--cream);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 18px 0 0;
  max-width: 14ch;
  text-wrap: balance;
}
.holding-h em {
  color: var(--accent);
  font-style: italic;
  font-weight: 500;
}

/* Tagline — Inter regular, ink-bright. The styles.css fallback and the
   handoff README both say Newsreader italic, but the rendered v3
   reference shows clear sans-serif. Reference wins. */
.holding-tag {
  font-family: var(--font-body-b);
  font-style: normal;
  font-weight: 400;
  font-size: 19px;
  color: var(--ink-bright);
  line-height: 1.42;
  margin: 20px 0 0;
  max-width: 32ch;
}

.holding-lead {
  font-family: var(--font-body-b);
  font-size: 15px;
  color: var(--ink);
  line-height: 1.65;
  margin: 20px 0 0;
  max-width: 46ch;
}

/* Form — single inline row, 460 max width. Solid lifted surface, no
   backdrop-filter (forbidden — see design-system README §277-280). */
.holding-form {
  margin: 28px 0 0;
  max-width: 460px;
}
.holding-field {
  display: flex;
  gap: 0;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-elevated);
  margin-bottom: 0;
  flex-wrap: nowrap;
}
.holding-field input[type="email"],
.holding-field input[type="password"] {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  color: var(--cream);
  font-family: var(--font-body-b);
  font-size: 14px;
  padding: 13px 16px;
  outline: none;
  transition: background var(--dur-base) var(--easing);
}
.holding-field input::placeholder { color: var(--ink-muted); }
.holding-field input:focus { background: rgba(12, 11, 10, 0.25); }
.holding-field .btn,
.holding-field button[type="submit"] {
  flex-shrink: 0;
  background: var(--accent);
  color: var(--accent-on);
  border: none;
  border-radius: 0;
  padding: 0 18px;
  font-family: var(--font-body-b);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity var(--dur-base) var(--easing);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.holding-field .btn:hover,
.holding-field button[type="submit"]:hover { opacity: 0.92; }
.holding-field .btn:active,
.holding-field button[type="submit"]:active { opacity: 0.85; }

.holding-reassurance {
  font-family: var(--font-body-b);
  font-size: 12px;
  font-style: normal;
  color: var(--ink-muted);
  margin: 12px 0 0;
  max-width: 460px;
}
.holding-error,
.holding-gate-error {
  color: var(--status-error);
  font-family: var(--font-body-b);
  font-size: 12px;
  margin: 6px 0 0;
  min-height: 1em;
}

/* Success state — accent-bordered pocket. Cream/mustard composite stays
   as a low-opacity overlay so the surface remains dark; cream/bright
   ink keep WCAG AAA contrast against it. */
.holding-success {
  margin: 28px 0 0;
  max-width: 460px;
  padding: 18px 20px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: rgba(216, 166, 92, 0.08);
  color: var(--ink-bright);
  font-size: unset;
}
.holding-success strong {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-display-b);
  font-weight: 500;
  font-size: 16px;
  color: var(--cream);
}
.holding-success span {
  display: block;
  font-family: var(--font-body-b);
  font-size: 13px;
  color: var(--ink-bright);
}

/* Passphrase gate — same field treatment as subscribe */
.holding-gate {
  margin-top: 36px;
  max-width: 460px;
  opacity: 0.75;
}
.holding-gate:focus-within { opacity: 1; }

/* =========================================================================
   Workshop peek — oversized, no chrome, bleeds off the right edge,
   horizontal-only mask. Sits BEHIND the letter (z-index 2) so the
   headline reads first. Top + bottom run full-bleed.
   ========================================================================= */

.workshop-teaser {
  position: absolute;
  top: 0;
  bottom: 0;
  /* Reset the legacy styles.css rule's `height: 860px` — it would
     otherwise win over `bottom: 0`, locking the teaser to 860px
     anchored at top:0 and stranding it high on tall viewports. */
  height: auto;
  /* Pushed right (was left:620 / right:-180) so more of the sidebar
     sits in the unfaded zone — the project nav rail (Conversation,
     Vision, Brand voice, Content, Architecture, Preview, History)
     reads as part of the visible composition, not a hint behind the
     headline. Also opens up balance: more breathing room between the
     letter's right edge and the visible peek. */
  left: 700px;
  right: -180px;
  z-index: 2;
  pointer-events: none;
  display: flex;
  align-items: center;
  /* No drop-shadow, no border, no rotation — the mask + the product
     content do all the framing work. */
  filter: none;
  transform: none;
  opacity: 1;
  overflow: visible;
}
.workshop-teaser-inner {
  width: 100%;
  height: 600px;
  position: relative;
  /* Reset every styles.css decoration that the v3 design drops:
     no rotation, no border, no radius, no shadow, no fill. The mask
     + the product content do all the framing work. */
  transform: none;
  transform-origin: 0 0;
  /* Hairline left fade (60 → 20) so almost the entire 200px sidebar
     reads at full opacity — only the leftmost 20px softens into the
     page. Keeps a whisper of soft-entry without swallowing the nav. */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 20px,
    #000 calc(100% - 100px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 20px,
    #000 calc(100% - 100px),
    transparent 100%
  );
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
  display: flex;
}
#annie-teaser-root {
  flex: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
}
#annie-teaser-root > * { flex: 1; }

/* =========================================================================
   Footer — single line, dim, absolute-bottom, masks the peek bleed
   ========================================================================= */

.holding-footer {
  position: absolute;
  bottom: 0;
  left: 44px;
  right: 44px;
  z-index: 5;
  padding: 16px 0 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-family: var(--font-body-b);
  font-size: 11px;
  color: var(--ink-muted);
  border-top: 1px solid var(--border-subtle);
  background: var(--ca-bg0s);
  margin: 0;
  letter-spacing: 0.01em;
}
/* Kill the italic that styles.css applies to footer slogans — italic
   was deliberately culled per design review. */
.holding-footer em,
.holding-footer .holding-footer-tagline {
  font-family: var(--font-body-b);
  font-style: normal;
  color: var(--ink-muted);
}

/* =========================================================================
   Responsive
   ========================================================================= */

/* Transitional (720–1099px) — peek shrinks bleed, stays absolutely
   positioned over the letter column. styles.css has a (max-width:1100)
   rule that switches the legacy teaser to position:relative + drops the
   mask; we override those explicitly so the v3 layout survives. */
@media (max-width: 1099px) {
  .holding-inner { padding: 96px 36px 88px; }
  .workshop-teaser {
    /* Force absolute over styles.css's ≤1100 position:relative remap */
    position: absolute;
    top: 0;
    bottom: 0;
    left: max(620px, 52%);
    right: -80px;
    width: auto;
    max-width: none;
    height: auto;
    margin: 0;
    /* Restore the v3 mask (styles.css zeroes mask-image at this width) */
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 20px,
      #000 calc(100% - 80px),
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 20px,
      #000 calc(100% - 80px),
      transparent 100%
    );
  }
  .workshop-teaser-inner {
    height: 560px;
    transform: none;
    box-shadow: none;
    border: none;
    border-radius: 0;
  }
  .holding-h { font-size: clamp(48px, 6vw, 68px); }
}

/* Mobile (≤720px) — single column, scrolling. Peek drops below the
   form, bleeds into the right gutter only. Sidebar hidden so the
   product header alone is the chrome. */
@media (max-width: 720px) {
  .holding-stage { min-height: 0; padding: 0; }
  .holding-inner {
    flex-direction: column;
    align-items: stretch;
    padding: 60px 24px 32px;
    min-height: 0;
  }
  .holding-wordmark {
    position: relative;
    top: auto;
    left: auto;
    font-size: 15px;
    margin: 0 0 32px;
  }
  .holding-wordmark .holding-wordmark-studios {
    font-size: 12px;
  }
  .holding-col-text { max-width: 100%; }

  .holding-eyebrow { font-size: 10px; }
  .holding-h { font-size: 40px; line-height: 1.04; letter-spacing: -0.022em; max-width: 16ch; margin-top: 14px; }
  .holding-tag { font-size: 16px; margin-top: 16px; }
  .holding-lead { font-size: 14px; margin-top: 14px; }

  .holding-form { margin-top: 20px; }
  .holding-field {
    flex-direction: column;
    gap: 10px;
    border: none;
    background: transparent;
    border-radius: 0;
    overflow: visible;
  }
  .holding-field input[type="email"],
  .holding-field input[type="password"] {
    padding: 12px 14px;
    font-size: 13px;
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    background: var(--bg-elevated);
  }
  .holding-field .btn,
  .holding-field button[type="submit"] {
    padding: 12px 16px;
    font-size: 13px;
    width: 100%;
    justify-content: center;
    border-radius: 6px;
  }
  .holding-reassurance { font-size: 11px; margin-top: 10px; }
  .holding-success { margin-top: 20px; padding: 16px 18px; }
  .holding-success strong { font-size: 14px; }
  .holding-success span { font-size: 12px; }

  /* Peek — flows below the form, contained card bleeding into the
     right gutter. styles.css ≤1100 stacks it relatively too, but at
     a different size + with shadows; we re-spec everything for the
     v3 mobile look. */
  .workshop-teaser {
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    width: auto;
    max-width: none;
    height: auto;
    margin: 32px -24px 0 0;
    -webkit-mask-image: linear-gradient(
      to right,
      #000 0,
      #000 calc(100% - 60px),
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      #000 0,
      #000 calc(100% - 60px),
      transparent 100%
    );
    align-items: stretch;
    display: flex;
    pointer-events: none;
  }
  .workshop-teaser-inner {
    width: 100%;
    height: auto;
    min-height: 380px;
    border: 1px solid var(--border);
    border-right: none;
    border-radius: 6px 0 0 6px;
    background: var(--ca-bg1);
    overflow: hidden;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.32);
    /* No second mask — the wrapper's mask handles the right fade. */
    -webkit-mask-image: none;
    mask-image: none;
    transform: none;
  }
  /* Hide the sidebar on mobile — the product header alone carries the chrome. */
  .peek-sidebar { display: none !important; }
  .peek-grid {
    grid-template-columns: 1fr !important;
  }

  .holding-footer {
    position: relative;
    bottom: auto;
    left: auto;
    right: auto;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 28px 24px 24px;
    margin: 32px 0 0;
    font-size: 11px;
  }
}

/* Ultrawide — styles.css remaps .workshop-teaser at ≥1600 to anchor
   near the (centered) text column. v3's right-bleed handles ultrawide
   naturally; restore our explicit positioning. */
@media (min-width: 1600px) {
  .workshop-teaser {
    left: 700px;
    right: -180px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .holding-field input { transition: none; }
  .holding-field .btn,
  .holding-field button[type="submit"] { transition: none; }
}