/* Scene variant: crisp identity, physical paper, and a quieter signal red. */
.scene-variant {
  --paper: #eae5d9;
  --ink: #151719;
  --muted: #bdbab2;
  --line: #444641;
  --violet: #c3b2e2;
  background: var(--ink);
}
.scene-variant .utility { min-height: 44px; }
.scene-variant .utility nav a { display: inline-flex; align-items: center; min-height: 44px; }
.scene-variant .masthead { padding: 6px 0 19px; gap: 20px; }
.scene-variant .masthead img { width: 8.1%; }
.scene-variant .masthead span { font-size: clamp(50px, 10.9vw, 148px); }
.scene-variant .masthead-caption { padding-block: 8px; color: #d2cec3; }
.scene-variant .hero { grid-template-columns: minmax(0,.88fr) minmax(0,1.32fr); gap: 0 42px; padding-top: 28px; }
.scene-variant .hero-copy { padding-top: 8px; }
.scene-variant .hero-copy .eyebrow { font-size: 10px; letter-spacing: .08em; margin-bottom: 22px; color: var(--paper); }
.scene-variant .hero h1 { font-size: clamp(66px,7.3vw,105px); line-height: .88; margin-bottom: 22px; }
.scene-variant .hero h1 span { color: var(--paper); }
.scene-variant .hero-line { font-size: 23px; }
.scene-variant .hero-description { max-width: 405px; font-size: 14px; }
.scene-variant .hero-product { width: min(100%, 680px); justify-self: end; align-self: start; padding: 9px; border: 1px solid #77766c; background: var(--paper); color: var(--ink); }
.scene-variant .hero-product img { max-height: none; object-fit: contain; }
.scene-variant .hero-product figcaption { font-size: 9px; margin-top: 8px; color: #4d4e48; gap: 5px 12px; }
.scene-variant .signup { margin-top: 26px; padding: 21px 0 27px; gap: 48px; align-items: start; }
.scene-variant .signup-heading .eyebrow { color: var(--muted); }
.scene-variant .signup-heading h2 { font-size: 31px; }
.scene-variant .signup-heading .signup-promise { font-size: 10px; }
.scene-variant .form-row { background: #202222; border-color: #89877f; }
.scene-variant .form-row button { color: #101214; }
.scene-variant .scene-section { background: #d8d4c8; color: var(--ink); border-block: 1px solid #b9b7aa; padding: 62px 0; }
.scene-layout { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,.8fr); gap: 46px; align-items: stretch; }
.gathering-photo { display: flex; flex-direction: column; padding: 11px; background: #ece8dd; border: 1px solid #a5a497; }
.gathering-photo picture { display: flex; align-items: center; flex: 1; }
.gathering-photo figcaption { font-size: 9px; color: #53554e; }
.paper-sheet { background-color: #eae5d9; background-image: url("assets/paper-grain.svg"); border: 1px solid #b8b4a9; }
.scene-invitation { padding: 30px; border-top: 5px solid var(--ink); }
.scene-invitation .eyebrow { font-size: 9px; letter-spacing: .075em; margin-bottom: 20px; }
.scene-invitation h2 { font-size: clamp(43px,4.8vw,66px); line-height: .92; letter-spacing: -.015em; margin: 0 0 22px; }
.scene-invitation > p:not(.eyebrow) { font-size: 14px; line-height: 1.65; margin: 0 0 16px; color: #42453f; }
.invitation-stamp { display: flex; align-items: center; gap: 14px; border-top: 1px solid #b8b4a9; padding-top: 19px; margin-top: 23px; font-size: 10px; font-weight: 600; letter-spacing: .08em; }
.invitation-stamp img { width: 37px; }
.text-link { display: inline-block; text-underline-offset: 5px; padding: 10px 0; }
.scene-invitation .text-link { font-size: 10px; margin-top: 13px; }
.scene-variant .box-chapter { padding-top: 48px; }
.scene-variant .tour-heading { padding-bottom: 25px; }
.scene-variant .tour-heading .eyebrow { color: var(--muted); font-size: 10px; margin-bottom: 15px; }
.scene-variant .tour-heading h2 { font-size: clamp(47px,6vw,80px); }
.scene-variant .tour-heading > div > p:not(.eyebrow) { font-size: 14px; }
.scene-variant .tour-card { background: #eae5d9; background-image: url("assets/paper-grain.svg"); border: 1px solid #b7b2a6; border-top: 4px solid #17191a; color: var(--ink); backdrop-filter: none; -webkit-backdrop-filter: none; max-width: 395px; padding: 23px; }
.scene-variant .tour-card h3 { font-family: var(--display); font-size: 37px; line-height: .95; }
.scene-variant .tour-card p { color: #42453f; font-size: 15px; line-height: 1.55; }
.scene-variant .tour-card .eyebrow { font-size: 10px; color: #595a51; }
.scene-variant .tour-card blockquote { color: #222625; background: #dcd8cc; border-left-color: #666d61; font-size: 13px; }
.scene-variant .tour-card blockquote .mono { color: #595a51; }
.scene-variant .tour-card .tour-disclaimer { font-size: 10px; color: #606057; }
.scene-variant .tour-face { width: 56px; }
.scene-variant .tour-ready .tour-step { min-height: 85svh; padding: 75px 0; }
.scene-variant .tour-ready .tour-step:first-child { min-height: 100svh; }
.scene-variant .tour-ready .tour-step:last-child { min-height: 100svh; }
.scene-variant .manifesto { background: var(--paper); color: var(--ink); border-top: 1px solid #b8b4a9; }
.scene-variant .manifesto .wrap { padding-block: 20px; gap: 28px; font-size: clamp(28px,3.4vw,46px); }
.scene-variant .manifesto .mono { max-width: 150px; font-size: 10px; line-height: 1.5; letter-spacing: .07em; }
.scene-variant .manifesto img { width: 80px; }
.scene-variant .ownership { padding-block: 66px; }
.scene-variant .ownership-copy h2 { font-size: clamp(48px,5.3vw,76px); }
.scene-variant .ownership-grid article { border-top: 1px solid #89877f; }
.scene-variant .ownership-grid .mono, .scene-variant .workbench-note { color: #c4c3b8; }
.scene-variant .ownership-grid h3 { font-size: 22px; }
.hardware-notes { margin-top: 32px; border-top: 1px solid var(--line); }
.hardware-notes summary { font-family: var(--mono); font-size: 11px; font-weight: 400; padding: 18px 0; }
.hardware-note-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 42px; padding: 4px 0 16px; }
.hardware-note-grid h3 { font-size: 18px; margin: 0 0 10px; }
.hardware-note-grid p { font-size: 14px; margin: 0; }
.scene-variant .games-section { padding-block: 55px 65px; }
.scene-variant .game { padding: 10px 10px 0; background: var(--paper); color: var(--ink); }
.scene-variant .game-meta { padding: 13px 3px 18px; border: 0; }
.scene-variant .game-meta > .mono, .scene-variant .game-meta p { color: #53564e; }
.scene-variant .game h3 { font-family: var(--display); font-size: 35px; margin-block: 5px 8px; }
.scene-variant .game h3 a:hover { color: #684894; }
.scene-variant .accomplice { background: #d8d4c8; padding-block: 65px; }
.scene-variant .accomplice .couch-photo { background: var(--paper); padding: 10px; border: 1px solid #aaa79c; }
.scene-variant .accomplice .couch-photo img { max-height: 550px; object-fit: contain; }
.scene-variant .static-signature { border-color: #aaa79c; }
.scene-variant .closing { background: var(--paper); background-image: url("assets/paper-grain.svg"); color: var(--ink); border-top: 1px solid #aaa79c; }
.scene-variant .closing .wrap { padding-block: 46px; }
.scene-variant .closing h2 { font-size: clamp(65px,7vw,96px); }
.scene-variant .closing .button { background: var(--red); border-color: var(--red); color: #101214; }
.scene-variant .closing .button:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
@media (min-width: 1450px) { .scene-variant .hero h1 { font-size: 112px; } }
@media (max-width: 1050px) {
  .scene-variant .hero { gap: 0 28px; }
  .scene-variant .hero h1 { font-size: 7.4vw; }
  .scene-variant .hero-copy .eyebrow { font-size: 9px; }
  .scene-variant .hero-line { font-size: 21px; }
  .scene-layout { gap: 25px; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); }
  .scene-invitation { padding: 23px; }
  .scene-invitation h2 { font-size: 48px; }
}
@media (max-width: 720px) {
  .scene-variant .utility { min-height: 44px; }
  .scene-variant .utility nav { gap: 18px; }
  .scene-variant .utility nav a:not(:last-child) { display: none; }
  .scene-variant .masthead { gap: 10px; padding: 7px 0 18px; }
  .scene-variant .masthead img { width: 9%; }
  .scene-variant .masthead span { font-size: 10.7vw; }
  .scene-variant .masthead-caption { font-size: 8px; }
  .scene-variant .hero { grid-template-columns: 1fr; padding-top: 20px; }
  .scene-variant .hero-copy { padding: 0; }
  .scene-variant .hero-copy .eyebrow { font-size: 8px; margin-bottom: 20px; }
  .scene-variant .hero h1 { font-size: clamp(65px,18.5vw,112px); margin-bottom: 20px; }
  .scene-variant .hero-line { font-size: 23px; }
  .scene-variant .hero-description { font-size: 14px; }
  .scene-variant .hero-product { margin-top: 24px; padding: 7px; }
  .scene-variant .hero-product figcaption { font-size: 9px; margin-top: 7px; }
  .scene-variant .signup { gap: 17px; margin-top: 24px; padding-bottom: 32px; }
  .scene-variant .signup-heading h2 { font-size: 33px; }
  .scene-variant .scene-section { padding-block: 32px; }
  .scene-layout { grid-template-columns: 1fr; gap: 22px; }
  .gathering-photo { padding: 7px; }
  .gathering-photo figcaption { font-size: 9px; }
  .scene-invitation { padding: 25px; }
  .scene-invitation h2 { font-size: 55px; }
  .scene-invitation > p:not(.eyebrow) { font-size: 15px; }
  .scene-variant .tour-heading h2 { font-size: 50px; }
  .scene-variant .tour-ready .tour-step { min-height: 90svh; padding: 64px 0; }
  .scene-variant .tour-card { max-width: 380px; padding: 18px; }
  .scene-variant .tour-card h3 { font-size: 31px; }
  .scene-variant .tour-card p { font-size: 13px; }
  .scene-variant .tour-card blockquote { font-size: 12px; }
  .scene-variant .tour-card .eyebrow { font-size: 9px; }
  .scene-variant .manifesto .wrap { gap: 15px; flex-wrap: nowrap; padding-block: 18px; }
  .scene-variant .manifesto .mono { font-size: 8px; width: 74px; flex-shrink: 0; }
  .scene-variant .manifesto .wrap > span:nth-child(2) { font-size: 27px; }
  .scene-variant .manifesto img { width: 47px; }
  .scene-variant .ownership { padding-block: 38px; }
  .scene-variant .ownership-copy h2 { font-size: 53px; }
  .hardware-note-grid { grid-template-columns: 1fr; gap: 24px; }
  .scene-variant .games-section { padding-block: 38px; }
  .scene-variant .accomplice { padding-block: 35px; }
  .scene-variant .closing .wrap { padding-block: 35px; }
  .scene-variant .closing .eyebrow { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .scene-variant .tour-ready .tour-step,
  .scene-variant .tour-ready .tour-step:first-child,
  .scene-variant .tour-ready .tour-step:last-child { min-height: 0; padding: 14px 0; }
}
/* At portrait-tablet width, keep the gathering large enough to read as a scene. */
@media (min-width: 721px) and (max-width: 900px) {
  .scene-layout { grid-template-columns: 1fr; gap: 28px; }
  .scene-invitation { padding: 32px; }
  .scene-invitation h2 { font-size: 62px; }
  .scene-invitation > p:not(.eyebrow) { max-width: 560px; }
}

/* Paper surfaces need a dark focus ring; lavender is reserved for dark surfaces. */
.scene-variant :is(.scene-section, .accomplice, .closing, .game, .tour-card) :is(a, button, summary, input):focus-visible { outline-color: #151719; }

/* Keep the full gathering photograph snug in its frame on desktop. */
@media (min-width: 901px) {
  .scene-layout { align-items: start; }
  .gathering-photo picture { flex: none; }
  .scene-invitation { padding: 22px; align-self: stretch; display: flex; flex-direction: column; }
  .scene-invitation .eyebrow { margin-bottom: 14px; }
  .scene-invitation h2 { font-size: clamp(36px, 3.8vw, 52px); margin-bottom: 15px; }
  .scene-invitation > p:not(.eyebrow) { line-height: 1.5; margin-bottom: 12px; }
  .invitation-stamp { padding-top: 12px; margin-top: 14px; }
  .invitation-stamp img { width: 28px; }
  .scene-invitation .text-link { margin-top: auto; padding-top: 15px; }
}

/* Character status belongs to the persistent tour, not the page header. */
.scene-variant .utility { justify-content: flex-end; }
.viewer-identity { display: flex; align-items: center; gap: 22px; }
.viewer-identity .static-readout { color: var(--paper); white-space: nowrap; }
@media (max-width: 720px) {
  .viewer-identity { flex-direction: column; align-items: flex-start; gap: 6px; }
}