/* Layered so a component class always overrides a surface, whatever order the files load in. */
@layer surfaces {
  .band--olive { position: relative; overflow: hidden; border-radius: var(--radius-xl); background: var(--color-primary); color: var(--color-on-primary); }
  .band--olive::after { content: ""; position: absolute; right: -120px; top: -120px; width: 420px; height: 420px; border-radius: var(--radius-round); background: var(--color-accent); opacity: 0.18; }
  .band--olive > * { position: relative; z-index: 1; }

  .grid-paper {
    background-color: var(--color-bg);
    background-image:
      linear-gradient(color-mix(in srgb, var(--color-line) 70%, transparent) 1px, transparent 1px),
      linear-gradient(90deg, color-mix(in srgb, var(--color-line) 70%, transparent) 1px, transparent 1px);
    background-size: 32px 32px;
  }

  .panel--dark { background: var(--color-dark); color: var(--color-on-dark); border-radius: var(--radius-xl); }

  .well { background: var(--color-tint); border-radius: var(--radius-lg); }

  .slab { position: relative; }
  .slab::before { content: ""; position: absolute; inset: 0; border-radius: var(--radius-xl); background: var(--color-accent); transform: translate(22px, 22px) rotate(var(--tilt-lg)); }

  .window { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-paper-deep); }
  .window__bar { display: flex; align-items: center; gap: var(--measure-xs); padding: var(--measure-md) var(--measure-lg); border-bottom: 1px solid var(--color-line); background: color-mix(in srgb, var(--color-tint) 45%, var(--color-surface)); }
  .window__bar i { width: 11px; height: 11px; border-radius: var(--radius-round); background: var(--color-line); }
  .window__bar span { margin-left: var(--measure-sm); font-size: var(--text-xs); color: var(--color-muted); }

  .paper {
    position: relative; background: var(--color-surface); border-radius: var(--radius-sm);
    box-shadow: var(--shadow-paper-deep); transform: var(--paper-transform, rotate(var(--tilt-sm))); transition: transform 0.5s var(--ease);
  }
  .paper:hover { transform: rotate(0deg) translateY(-4px); }
  .paper::before { content: ""; position: absolute; inset: 0 0 auto; height: 10px; background: var(--color-primary); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }

  .note { border-radius: var(--radius-xs); }
  .note--sticky { background: var(--color-note); rotate: -1.4deg; box-shadow: 0 22px 34px -24px rgb(0 0 0 / 50%); }
  .note--plain { background: var(--color-surface); border: 1.5px solid var(--color-ink); }
  .note--dark { background: var(--color-dark); color: var(--color-on-dark); rotate: 1deg; box-shadow: 0 22px 34px -24px rgb(0 0 0 / 60%); }
  .note--dashed { background: var(--color-surface); border: 1.5px dashed var(--color-line); border-radius: var(--radius-lg); }
  .note--tilt:nth-child(odd) { transform: rotate(calc(-1 * var(--tilt-md))); }
  .note--tilt:nth-child(even) { transform: rotate(var(--tilt-md)); }

  .print {
    position: relative; padding: var(--measure-sm) var(--measure-sm) var(--measure-md); rotate: 2.4deg;
    background: var(--color-surface); border-radius: var(--radius-xs);
    box-shadow: 0 30px 50px -30px rgb(0 0 0 / 55%), 0 1px 2px rgb(0 0 0 / 15%);
    transition: rotate 0.5s var(--ease), box-shadow 0.5s var(--ease);
  }
  .print::before {
    content: ""; position: absolute; left: 50%; top: -12px; width: 96px; height: 24px; margin-left: -48px;
    background: color-mix(in srgb, var(--color-tape) 70%, transparent); rotate: -3deg;
  }

  .frame--photo { border-radius: var(--radius-xl); overflow: hidden; background: var(--color-photo-bg); }
  .frame--photo img { width: 100%; height: 100%; object-fit: cover; }
  .frame--video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-dark); }
  .frame--video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

  @keyframes slab-in { from { transform: translate(0, 0) rotate(0deg); } }

  @media (prefers-reduced-motion: no-preference) {
    .slab::before { animation: slab-in 1.1s 0.4s var(--ease) both; }
  }

  @media (max-width: 700px) {
    .slab::before { transform: translate(8px, 12px) rotate(var(--tilt-md)); }
  }
}