@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 cabin 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 PORTAL ──
     The shell backdrop: a soft grey page with one big circular window
     onto the land, sitting low so most of the circle falls below the
     bottom edge — a sunrise-most-of-the-way-up framing. Fixed to the
     viewport; content scrolls in front of it. Replaces the old SVG. */
  .stay-landscape.stay-landscape--portal {
    position: fixed;
    inset: 0;
    background: #f0f0f0;
    overflow: hidden;
    pointer-events: none;
  }
  .shell-portal {
    --portal-size: clamp(680px, 108vw, 1160px);
    position: absolute;
    left: 50%;
    /* roughly half the circle sits below the viewport's bottom edge. */
    bottom: calc(var(--portal-size) * -0.52);
    transform: translateX(-50%);
    width: var(--portal-size);
    height: var(--portal-size);
    border-radius: 50%;
    overflow: hidden;
  }
  .shell-portal > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  /* On wide screens drop the portal lower — more of it falls below the
     fold so only the upper band of land shows. */
  @media (min-width: 900px) {
    .shell-portal { bottom: calc(var(--portal-size) * -0.62); }
  }
}