@layer components {
  /* ─────────────────────────────────────────────────────────────────
     INVITE (v2) — TCX invitation system.

     Full-bleed photo backdrop. A magenta circle anchored to the LEFT
     edge (always — desktop and mobile), slightly cut off, with the
     welcome line left-aligned and wide inside it. The dates sit out on
     the photo to the RIGHT of the circle (right-aligned, "modern art").
     The letter body is white text on the bare photo, in the section
     below the circle, offset right. A black footer holds the RSVP /
     sign-in actions.

     Mobile: circle still left-anchored; dates stack UNDER it, right-
     aligned; body below that; black footer; everything tighter.
  ───────────────────────────────────────────────────────────────────── */

  .invite2 {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    color: var(--ink);
    isolation: isolate;
  }

  /* Full-bleed photo, gently dimmed top + bottom so white type stays
     legible. Fixed so the scene holds steady while the letter scrolls. */
  .invite2-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    background: #1a1a1a;
  }
  .invite2-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* slight frosted blur for legibility; scale up a touch so the blur
       doesn't bleed transparent edges in */
    filter: blur(4px);
    transform: scale(1.06);
  }
  .invite2-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
      rgba(0, 0, 0, 0.42) 0%,
      rgba(0, 0, 0, 0.14) 18%,
      rgba(0, 0, 0, 0.20) 60%,
      rgba(0, 0, 0, 0.42) 100%);
  }

  .invite2-nav .stay-nav-brand {
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85), 0 1px 28px rgba(0, 0, 0, 0.6);
  }

  /* Preview banner — host/organizer viewing someone else's invitation, or the
     no-identity "preview as guest". A contained band floating on the photo,
     not a full-bleed strip. */
  .invite2-preview {
    position: relative;
    z-index: 2;
    background: #f4c14d;
    color: #2a1f00;
    text-align: center;
    font-family: var(--sans);
    font-size: 13px;
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-cap-wide);
    text-transform: uppercase;
    padding: 12px 24px;
    margin: 14px;
  }
  .invite2-preview strong { text-transform: none; letter-spacing: 0; }
  /* Longer, sentence-style preview note (the no-identity "preview as guest"):
     drop the uppercase eyebrow treatment so it stays readable. */
  .invite2-preview-prose { text-transform: none; letter-spacing: 0; font-weight: var(--weight-normal); }
  /* Host/organizer preview: clear the floating nav (64px) so the banner sits
     below the wordmark + avatar rather than under them. */
  .invite2-preview--below-nav { margin-top: 64px; }

  /* Main holds the circle, the dates, and the body. The circle and
     dates are absolutely positioned; the body flows and reserves the
     vertical room for the circle via padding-top, so main grows to
     contain everything and the footer follows naturally. */
  .invite2-main {
    --d:          min(60vh, 680px);   /* circle diameter */
    --circle-top: clamp(76px, 12vh, 150px);
    --circle-cut: calc(var(--d) * -0.13);   /* slight left bleed */
    position: relative;
    display: flow-root;      /* contain the body's margin-top (no collapse) */
    flex: 1 0 auto;
    /* tall enough to contain the absolutely-positioned circle even when
       the (flowing) body is short */
    min-height: calc(var(--circle-top) + var(--d) + clamp(40px, 6vh, 90px));
    padding-bottom: 84px;
  }

  .invite2-circle {
    position: absolute;
    top: var(--circle-top);
    left: var(--circle-cut);
    width: var(--d);
    height: var(--d);
    border-radius: 50%;
    background: var(--pink);
    display: flex;
    align-items: center;
    box-shadow: 0 24px 90px rgba(0, 0, 0, 0.30);
    z-index: 1;
  }
  .invite2-circle-inner {
    width: 100%;
    padding-left: calc(var(--d) * 0.17);
    padding-right: calc(var(--d) * 0.10);
    color: #fff;
    text-align: left;
  }
  .invite2-title {
    font-family: var(--display);
    font-weight: var(--weight-medium);
    font-size: clamp(22px, calc(var(--d) * 0.082), 44px);
    line-height: 1.12;
    letter-spacing: -0.01em;
    margin: 0;
  }
  .invite2-title em { font-style: normal; font-weight: var(--weight-semibold); }

  /* The right column starts at the horizontal midpoint of the page —
     the circle owns the left half, the dates + letter live in the right
     half. Dates ride up top (right-aligned, "modern art"); the letter
     body is anchored to the 50% split, left-aligned, below them. */
  .invite2-dates {
    position: absolute;
    top: clamp(70px, 13vh, 150px);
    left: 50%;
    right: 6vw;
    /* Left, so the dates, the location and the letter share one edge. They
       sit in the same column and were reading as two different columns.
       (Chad, Sep 3) */
    text-align: left;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85), 0 1px 32px rgba(0, 0, 0, 0.6);
    z-index: 1;
  }
  .invite2-dates-when {
    font-family: var(--display);
    font-style: italic;
    font-size: clamp(18px, 3vh, 32px);
    margin: 0;
  }
  /* One window per line. Joined by an interpunct, two ranges read as one
     long date instead of two separate ones. (Chad, Sep 3) */
  .invite2-dates-line { display: block; }
  .invite2-dates-where {
    font-family: var(--sans);
    font-size: clamp(11px, 1.5vh, 14px);
    letter-spacing: var(--tracking-cap-wide);
    text-transform: uppercase;
    opacity: 0.9;
    margin: 10px 0 0;
  }

  /* Letter body — white text, no background. Anchored at the 50% split
     (same column as the dates), left-aligned, and well below in height —
     it reads as the section under the circle. Flows in document order so
     the page (and footer) extend with a long letter. */
  .invite2-body {
    position: relative;
    z-index: 2;
    /* anchored to the 50% split, but never overlapping the circle: if the
       circle's right edge reaches past the midpoint, push the body clear
       of it instead. margin-right is a real gutter so it can't overflow. */
    margin-left: max(50%, calc(var(--d) * 0.9 + 24px));
    margin-right: 7vw;
    margin-top: calc(var(--circle-top) + var(--d) * 0.52);
    max-width: 460px;
    color: #fff;
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.7;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85), 0 1px 32px rgba(0, 0, 0, 0.6);
  }
  .invite2-letter p,
  .invite2-letter li,
  .invite2-letter div { font-size: 16px; line-height: 1.7; color: #fff; }
  .invite2-letter p,
  .invite2-letter > div { margin: 0 0 18px; }
  .invite2-letter > p:last-child,
  .invite2-letter > div:last-child { margin-bottom: 0; }
  .invite2-letter ul { margin: 0 0 18px; padding-left: 20px; }
  .invite2-letter ul li { margin-bottom: 6px; }
  .invite2-letter .invite-pull {
    font-family: var(--display);
    font-weight: var(--weight-medium);
    font-size: 19px;
    line-height: 1.45;
    margin: 8px 0 22px;
  }
  .invite2-letter .invite-pull:last-child { margin-bottom: 0; }
  .invite2-signature {
    margin: 28px 0 0;
    font-family: var(--sans);
    color: rgba(255, 255, 255, 0.82);
  }

  /* ── Black footer — the action zone ── */
  .invite2-footer {
    position: relative;
    z-index: 2;
    background: #0a0a0a;
    color: #fff;
    /* THE THIRD TIME THE FIXED FURNITURE HAS EATEN SOMETHING (Chad, Sep 3).
       This footer is the last thing on the page, and .app-footer-bar is 56px
       of fixed chrome sitting over it — so "You have a confirmed spot in Fall
       & Winter Residencies" rendered underneath the Chat pill and simply was
       not there to read. Chad drew a line across it.
       --dock-clearance exists for exactly this: it was added in August after
       the same bar ate his "Back to home", and again after the staging audit
       lost a Close-these-dates button. Its comment says "one number, so the
       next one does not". This surface never used it. */
    padding: 36px 6vw calc(36px + var(--dock-clearance));
  }
  .invite2-footer-inner {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px 32px;
    flex-wrap: wrap;
  }
  .invite2-footer-msg { flex: 0 1 auto; min-width: 0; }
  .invite2-eyebrow {
    font-family: var(--display);
    font-size: 22px;
    font-weight: var(--weight-medium);
    color: #fff;
    margin: 0;
  }
  .invite2-subnote {
    font-family: var(--sans);
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.62);
    margin: 6px 0 0;
  }
  .invite2-subnote strong { color: rgba(255, 255, 255, 0.88); font-weight: var(--weight-semibold); }
  /* The quiet decline door under the sign-in button. Legible, not loud. */
  .invite2-declineline {
    font-family: var(--sans);
    font-size: 13px;
    margin: 10px 0 0;
  }
  .invite2-declineline a {
    color: rgba(255, 255, 255, 0.72);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .invite2-declineline a:hover { color: #fff; }
  .invite2-actions {
    display: flex;
    gap: 12px;
    flex: 0 0 auto;
  }
  .invite2-actions form { display: inline-flex; margin: 0; }

  /* The quiet second line under an action — used on the invalid-link page,
     where the address is a fallback and must not compete with Sign in. */
  .invite2-aside {
    margin-top: 14px;
    font-size: 14px;
    color: var(--ink-faint);
  }

  .invite2-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--sans);
    font-size: 15px;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.01em;
    padding: 13px 26px;
    border-radius: 999px; /* HEY posture (phase 6 round 3) */
    /* Mode-independent: white button on the black invite footer. */
    border: 1px solid #fff;
    background: #fff;
    color: #0a0a0a;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background 120ms, color 120ms, border-color 120ms;
  }
  .invite2-btn:hover { background: var(--pink); border-color: var(--pink); color: #fff; }
  .invite2-btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.5); }
  /* The go moment on the letter — the threshold gold on the black band. */
  .invite2-btn--go { background: var(--go); color: var(--go-ink); border-color: var(--go); }
  .invite2-btn--go:hover { background: var(--go-hover); border-color: var(--go-hover); color: var(--go-ink); }
  .invite2-btn--ghost:hover { background: rgba(255, 255, 255, 0.10); border-color: #fff; color: #fff; }
  .invite2-btn[disabled] { opacity: 0.4; cursor: not-allowed; }
  .invite2-btn[disabled]:hover { background: #fff; color: #0a0a0a; border-color: #fff; }

  .invite2-actions--preview { opacity: 0.5; pointer-events: none; }
  .invite2-preview-note {
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: var(--tracking-cap-wide);
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    margin: 8px 0 0;
  }
  .invite2-regret {
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: var(--tracking-cap-wide);
    text-transform: uppercase;
    font-weight: var(--weight-semibold);
    color: var(--pink);
    margin: 0 0 6px;
  }
  .invite2-reason {
    font-family: var(--display);
    font-style: italic;
    color: rgba(255, 255, 255, 0.78);
    font-size: 15px;
    margin: 8px 0 0;
  }

  /* ── Request-to-join footer variant ────────────────────────────
     The question + textarea + submit sit in the black footer, stacked
     vertically so the textarea has room to breathe. The form wraps
     the textarea + actions as one unit.
  ─────────────────────────────────────────────────────────────── */
  .invite2-footer-inner--request {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .invite2-request-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .invite2-request-note {
    width: 100%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #fff;
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.6;
    padding: 12px 16px;
    resize: vertical;
    outline: none;
    border-radius: 0;
  }
  .invite2-request-note::placeholder { color: rgba(255, 255, 255, 0.40); }
  .invite2-request-note:focus { border-color: rgba(255, 255, 255, 0.70); background: rgba(255, 255, 255, 0.12); }

  /* ── True desktop: a bigger circle and the body riding up into the
     right column (clear of the circle, which still owns the left half).
     Sized so the circle + body + black footer all fit in one viewport.
     Below this width the layout reads tablet-style — body under the full
     circle. ── */
  @media (min-width: 1100px) {
    .invite2-main {
      --d: min(74vh, 860px);
      --circle-top: clamp(48px, 8vh, 100px);
    }
    .invite2-dates { top: clamp(72px, 11vh, 140px); }
    .invite2-body {
      /* Was clamp(280px, 42vh, 500px) — at 1280x780 that is 328px, and it
         left a visibly empty band between CORKINS LODGE and the first line
         of the letter. Chad boxed it in red (Sep 3). The floor still clears
         the dates block, which ends around 185px with two date lines. */
      margin-top: clamp(210px, 30vh, 360px);
      max-width: 500px;
    }
  }

  /* ── Mobile: everything stacked vertically — a bigger left-anchored
     circle, the dates UNDER it (anchored right), the body UNDER the
     dates (anchored left). Tighter all round. ── */
  @media (max-width: 720px) {
    .invite2-main {
      --d: min(84vw, 420px);
      --circle-top: 92px;
      --circle-cut: calc(var(--d) * -0.17);
      min-height: 0;
      padding-bottom: 56px;
    }
    .invite2-circle {
      position: relative;
      top: auto;
      left: auto;
      margin: var(--circle-top) 0 0 var(--circle-cut);
    }
    /* clear the left cut-off AND give the text a real left margin */
    .invite2-circle-inner {
      padding-left: calc(var(--d) * 0.17 + 22px);
      padding-right: calc(var(--d) * 0.10 + 16px);
    }
    .invite2-title { font-size: clamp(19px, 6vw, 32px); }
    .invite2-dates {
      position: relative;
      top: auto;
      left: auto;
      right: auto;
      margin: 56px 22px 0 0;
      text-align: right;
    }
    .invite2-dates-when { font-size: 20px; }
    .invite2-dates-where { font-size: 11px; margin-top: 6px; }
    .invite2-body {
      margin: 56px 22px 0;
      padding: 0;
      max-width: none;
      font-size: 15px;
      line-height: 1.65;
    }
    .invite2-letter p,
    .invite2-letter li,
    .invite2-letter div { font-size: 15px; line-height: 1.65; }
    .invite2-letter p, .invite2-letter > div { margin: 0 0 18px; }
    .invite2-letter .invite-pull { font-size: 17px; margin: 8px 0 20px; }
    .invite2-signature { margin-top: 28px; }
    .invite2-footer { padding: 40px 20px calc(40px + var(--dock-clearance)); }
    .invite2-footer-inner {
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 16px;
    }
    .invite2-actions { flex-direction: column; width: 100%; }
    .invite2-actions form, .invite2-btn { width: 100%; }
  }

  /* ─────────────────────────────────────────────────────────────────
     Welcome notice — friendly one-time banner at the top of the
     post-accept welcome page. Reads as a quiet aside, not an alert.
  ───────────────────────────────────────────────────────────────────── */
  .welcome-notice {
    margin: 0 0 4px;
    padding: 14px 18px;
    background: var(--paper-warm);
    border-left: 3px solid var(--board);
    color: var(--ink);
    font-size: 14px;
    line-height: 1.6;
    border-radius: 0 4px 4px 0;
  }
  .welcome-notice strong { font-weight: var(--weight-semibold); }
  .welcome-sent {
    margin: 0 !important;
    padding: 10px 14px;
    background: var(--paper-warm);
    border: 1px solid var(--paper-edge);
    border-radius: 4px;
    color: var(--ink);
    font-size: 14px;
  }

  /* Decline screen — small paper card on a desk surface. */
  .decline-page {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 88px var(--space-5) 80px;
    background: var(--paper);
  }
  .decline-page .stay-landscape { position: fixed; inset: 0; z-index: 0; }
  .decline-card {
    position: relative;
    z-index: 1;
    width: 480px;
    max-width: 100%;
    background: var(--paper);
    border: 1px solid var(--paper-edge);
    padding: 56px 60px 48px;
    box-shadow: var(--shadow-paper-deep);
  }

  /* First-timer gate — paper card on desk, single-column profile gate. */
  .gate-page {
    min-height: 100vh;
    background: var(--paper);
    background-image:
      radial-gradient(circle at 20% 30%, rgba(180, 160, 120, 0.06) 0%, transparent 45%),
      radial-gradient(circle at 80% 70%, rgba(180, 160, 120, 0.07) 0%, transparent 50%);
    padding: var(--space-8) var(--space-5);
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }
  .gate-card {
    max-width: 540px;
    width: 100%;
    background: var(--paper);
    padding: 56px 60px 52px;
    box-shadow: var(--shadow-paper);
  }
}