@layer components {
  /* Cotton-paper surface — base for sheets, decline card, invite immersive. */
  .paper {
    background: var(--paper);
    background-image:
      radial-gradient(circle at 20% 30%, rgba(180, 160, 120, 0.04) 0%, transparent 40%),
      radial-gradient(circle at 80% 70%, rgba(180, 160, 120, 0.05) 0%, transparent 50%);
    position: relative;
  }
  /* Fiber texture — micro-grid multiplied over paper. */
  .paper::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
      repeating-linear-gradient(0deg, rgba(0,0,0,0.012) 0 1px, transparent 1px 3px),
      repeating-linear-gradient(90deg, rgba(0,0,0,0.012) 0 1px, transparent 1px 4px);
    pointer-events: none;
    mix-blend-mode: multiply;
  }
  .paper > * { position: relative; }

  /* ── SHEET STACK ── */
  .stack-of-sheets { position: relative; }

  .sheet {
    position: relative;
    background: var(--paper);
    box-shadow: var(--shadow-paper);
    overflow: hidden;
    border-radius: 12px;
  }

  /* The active sheet drives height (normal flow); back-sheets are
     absolutely positioned, centered on the same axis, slightly larger so
     they peek out behind whichever shape is on top. */
  .board-stage .sheet-active {
    position: relative;
    z-index: 5;
  }
  .board-stage .sheet-back-1,
  .board-stage .sheet-back-2 {
    position: absolute;
    top: var(--sheet-top-gutter);
    bottom: var(--sheet-bottom-gutter);
    left: 0; right: 0;
    margin-inline: auto;
    max-width: calc(100% - 32px);
  }

  /* Back-1 — index-card shape, slightly tan, peeks down-right. */
  .board-stage .sheet-back-1 {
    z-index: 4;
    width: 820px;
    border-radius: var(--radius-xl);
    background: var(--paper-warm);
    box-shadow:
      0 1px 0 rgba(0,0,0,0.06),
      0 4px 12px rgba(40, 25, 5, 0.22);
    transform: rotate(0.5deg) translate(10px, 14px);
    filter: brightness(0.985);
  }

  /* Back-2 — squared workspace, slightly cooler off-white, peeks down-left. */
  .board-stage .sheet-back-2 {
    z-index: 3;
    width: 880px;
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, #ede9df 0%, #e2dccd 100%);
    box-shadow:
      0 1px 0 rgba(0,0,0,0.06),
      0 6px 14px rgba(40, 25, 5, 0.22);
    transform: rotate(-0.8deg) translate(-14px, 22px);
    filter: brightness(0.97);
  }

  /* Sheet body — generous internal padding regardless of shape. Renders
     as block whether the underlying element is a <div> or <turbo-frame>. */
  .sheet-body {
    display: block;
    padding: 56px 64px 72px;
  }
  turbo-frame.sheet-body { display: block; }
  .sheet::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
      repeating-linear-gradient(0deg, rgba(0,0,0,0.012) 0 1px, transparent 1px 3px),
      repeating-linear-gradient(90deg, rgba(0,0,0,0.012) 0 1px, transparent 1px 4px);
    pointer-events: none;
    mix-blend-mode: multiply;
  }
  .sheet > * { position: relative; }

  /* Active sheet variants — each shape defines its width so the cards
     read as discrete shapes in a stack rather than full-bleed pages.
     They sit centered on cork (margin: 0 auto). */
  .sheet.index-card {
    width: 760px;
    max-width: 100%;
    margin: 0 auto;
    border-radius: var(--radius-xl);
    background:
      linear-gradient(180deg, rgba(0,0,0,0.018) 0%, transparent 8%, transparent 92%, rgba(0,0,0,0.025) 100%),
      var(--paper);
    box-shadow:
      0 1px 0 rgba(0,0,0,0.05),
      0 4px 10px rgba(0,0,0,0.15),
      0 14px 26px rgba(0,0,0,0.10),
      inset 0 0 0 1px rgba(0,0,0,0.04);
  }
  .sheet.index-card::after {
    content: '';
    position: absolute;
    left: 32px; right: 32px;
    top: 44px;
    height: 1px;
    background: var(--arrive-ring);
    pointer-events: none;
  }

  .sheet.short-form {
    width: 620px;
    max-width: 100%;
    margin: 0 auto;
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, var(--paper-warm) 0%, var(--paper-warm-2) 100%);
  }

  .sheet.workspace {
    width: 920px;
    max-width: 100%;
    margin: 0 auto;
    border-radius: var(--radius-md);
  }

  .sheet-active { z-index: 5; }

  /* Punched holes at top, hidden by the clip. */
  .holes {
    position: absolute;
    top: 14px;
    left: 0; right: 0;
    display: flex;
    justify-content: center;
    gap: 90px;
    pointer-events: none;
    z-index: 6;
  }
  .hole {
    width: 11px; height: 11px;
    border-radius: 50%;
    background: rgba(40,30,10,0.55);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.6);
  }

  /* Page-flip animation — sheet curls up under the clip. */
  @keyframes flipUp {
    0%   { transform: rotateX(0deg) translateY(0); opacity: 1; }
    60%  { transform: rotateX(-110deg) translateY(-12px); opacity: 0.85; }
    100% { transform: rotateX(-180deg) translateY(-30px); opacity: 0; }
  }
  .sheet.flipping {
    transform-origin: top center;
    animation: flipUp 0.55s cubic-bezier(.4,.1,.3,1) forwards;
    z-index: 20 !important;
    backface-visibility: hidden;
  }
  @keyframes drop-in {
    0%   { transform: translateY(-6px); opacity: 0.4; }
    100% { transform: translateY(0); opacity: 1; }
  }
  .sheet.dropping-in { animation: drop-in 380ms ease 200ms backwards; }

  /* Sheet letterhead — top-of-sheet small caps + display-italic title. */
  .sheet-letterhead {
    margin-bottom: var(--space-5);
  }
  .sheet-letterhead .gathering-name {
    font-family: var(--display);
    font-style: italic;
    font-size: 22px;
    font-weight: var(--weight-medium);
    line-height: 1.15;
    margin-top: 6px;
  }
  .sheet-letterhead .gathering-meta {
    font-size: 12px;
    color: var(--ink-faint);
    margin-top: 4px;
    font-style: italic;
  }

  /* Photo placeholder — diagonal hatching on paper-edge. */
  .photo-ph {
    background:
      repeating-linear-gradient(45deg, rgba(0,0,0,0.05) 0 6px, transparent 6px 12px),
      var(--paper-edge);
    border: 1px solid rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--sans);
    font-size: var(--cap-xs);
    letter-spacing: 0.15em;
    color: var(--ink-faint);
    text-transform: uppercase;
  }
}