@layer components {
  /* ── BRAND-PARITY PRIMITIVES (Corkins Exchange letterpress system) ──
     The confirmed vocabulary from the TCX invitation: a thin pink ring
     (the wordmark's "o"), a thin pink cross (the wordmark's "x"), a short
     pink hairline rule, and a circle-cropped photo of the land. These are
     additive — nothing in the app consumes them yet. The surface pass
     wires them in once Brenda's in-progress PDF + Jim's design notes land.

     Deliberately not here yet: the .wordmark lockup (needs the vector
     asset), the long crossing diagonal lines, and the oversized pull-quote
     glyph — all want the new PDF to get proportions right. */

  /* The "o" — a thin pink ring. Decorative by default; also the building
     block for functional marks (e.g. an empty slot in the lodging meter).
     Size via --ring-size; defaults to a small punctuation-scale mark. */
  .brand-ring {
    --ring-size: 14px;
    --ring-stroke: 1.5px;
    display: inline-block;
    width: var(--ring-size);
    height: var(--ring-size);
    border-radius: 50%;
    border: var(--ring-stroke) solid var(--pink);
    box-sizing: border-box;
    flex-shrink: 0;
  }
  /* Filled variant — the solid magenta disc from the PDF hero. */
  .brand-ring--filled {
    border-color: var(--pink);
    background: var(--pink);
  }

  /* The "x" — a thin pink cross. SVG-backed so the strokes stay crisp at
     any size. Size via --x-size. */
  .brand-x {
    --x-size: 14px;
    display: inline-block;
    width: var(--x-size);
    height: var(--x-size);
    flex-shrink: 0;
    background:
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><g stroke='%23FF00C7' stroke-width='1.4' stroke-linecap='round'><line x1='1.5' y1='1.5' x2='10.5' y2='10.5'/><line x1='10.5' y1='1.5' x2='1.5' y2='10.5'/></g></svg>")
      center / contain no-repeat;
  }

  /* Short pink hairline — the rule that sits under a small-caps label all
     through the PDF. Replaces the wobbly hand-drawn underline. */
  .brand-rule {
    display: block;
    width: 32px;
    height: 1px;
    border: 0;
    background: var(--pink);
    margin: 12px 0;
  }
  .brand-rule--center { margin-left: auto; margin-right: auto; }

  /* Circle-cropped photo of the land — the visual signature. Drop an
     <img> inside; it cover-fills the circle. Size via --photo-size. */
  .photo-circle {
    --photo-size: 220px;
    width: var(--photo-size);
    height: var(--photo-size);
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
  }
  .photo-circle > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* ── SHELL BACKDROP (coherence pass) ──
     Plain solid page by default. A gathering's hero photo — the one
     backdrop photography in the app — fills the window fixed behind
     that gathering's pages, dimmed by a soft white scrim up top so the
     chrome stays readable. */
  .stay-landscape.stay-landscape--plain {
    position: fixed;
    inset: 0;
    background: var(--desk);
    pointer-events: none;
  }
  .stay-landscape.stay-landscape--hero {
    position: fixed;
    inset: 0;
    background: var(--desk);
    overflow: hidden;
    pointer-events: none;
  }
  .stay-landscape--hero > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .stay-landscape--hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.72) 0%,
      rgba(255, 255, 255, 0.28) 30%,
      rgba(255, 255, 255, 0.12) 100%);
  }
}


@layer components {
  /* Dark mode: the hero scrim dims instead of frosts, so the photo
     reads correctly under light chrome. */
  @media (prefers-color-scheme: dark) {
    .stay-landscape--hero::after {
      background: linear-gradient(180deg,
        rgba(0, 0, 0, 0.62) 0%,
        rgba(0, 0, 0, 0.35) 30%,
        rgba(0, 0, 0, 0.25) 100%);
    }
  }
}

@layer components {
  /* Theme-toggle variants of the hero scrim — attribute beats media query. */
  :root[data-theme="dark"] .stay-landscape--hero::after {
    background: linear-gradient(180deg,
      rgba(0, 0, 0, 0.62) 0%,
      rgba(0, 0, 0, 0.35) 30%,
      rgba(0, 0, 0, 0.25) 100%);
  }
  :root[data-theme="light"] .stay-landscape--hero::after {
    background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.72) 0%,
      rgba(255, 255, 255, 0.28) 30%,
      rgba(255, 255, 255, 0.12) 100%);
  }
}