@charset "UTF-8";
/* Stage 4: shared columns; the stationary lower row anchors both main states. */
.page{--composition-gap:32px;--spread-card-width:220px}
.hero{display:block;padding-bottom:34px;border-bottom:0}
.hero-copy{display:grid;grid-template-columns:1fr 1fr;column-gap:64px;align-items:start}
.hero-copy>.eyebrow{grid-column:1 / -1}
.hero-copy>h1{grid-column:1;grid-row:2 / 6;margin:26px 0 0}
.hero-copy>.lead{grid-column:2;grid-row:2;margin-top:26px;max-width:none}
.hero-copy>.symbolic-note{grid-column:2;grid-row:3;max-width:none;margin-top:18px}
.hero-copy>.text-link{grid-column:2;grid-row:4;justify-self:start;margin-top:8px}
.hero-copy>.hero-note{grid-column:2;grid-row:5;margin-top:20px}
.spread-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--composition-gap);row-gap:34px;align-items:start;overflow-anchor:none;margin-top:10px}
.spread-grid>.hero-art{grid-column:2;grid-row:1;width:100%;min-width:0;margin:0;padding:32px 20px 18px;align-self:start;will-change:auto}
.spread-grid.main-open>.hero-art{grid-column:1}
.spread-grid .hero-art #issue-card{width:100%;max-width:100%}
.spread-grid .hero-art .tarot-interactive,.spread-grid .cards .tarot-interactive{width:var(--spread-card-width);max-width:100%}
.spread-grid>.reading{grid-column:2 / 4;grid-row:1;display:block;padding:0;margin:0;min-width:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity 520ms ease,visibility 0s linear 520ms}
.spread-grid.main-open>.reading{opacity:1;visibility:visible;pointer-events:auto;transition:opacity 520ms ease,visibility 0s}
.spread-grid .reading-inner{min-width:0}
.spread-grid .reading h2{margin:12px 0 22px}
.spread-grid .reading .prose{font-size:15px;line-height:1.85}
.spread-grid>.additional{grid-column:1 / -1;grid-row:2;display:grid;grid-template-columns:subgrid;column-gap:var(--composition-gap);row-gap:0;min-width:0}
.spread-grid .additional>.section-head{grid-column:1 / -1;padding-top:18px}
.spread-grid #additional-context{grid-column:1 / -1;max-width:760px;margin-top:22px;visibility:hidden}
.spread-grid.additional-open #additional-context{visibility:visible}
.spread-grid .additional>.cards{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;gap:var(--composition-gap);margin-top:26px}
.spread-grid .card{min-width:0}
.spread-grid .cards .plane{padding:32px 20px 18px}
.spread-grid .hero-art figcaption,.spread-grid .cards .plane figcaption{width:100%;margin:18px 0 0;font-size:12px;line-height:1.55;text-align:center;letter-spacing:.01em;color:var(--ink);text-wrap:balance}
.spread-grid .hero-art figcaption{display:grid;justify-items:center;gap:5px}
.spread-grid .hero-art figcaption>span:last-child{font-size:10px;color:var(--muted)}
.additional-readings{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--composition-gap)}
.additional-readings .card-reading{min-width:0;padding-top:24px}
.additional-readings .card-reading h3{margin:9px 0 20px;font-size:29px}
/* Stage 4.1: figure translates; shared card-motion and card-flip retain their original effects. */
@supports not (grid-template-columns:subgrid){.spread-grid>.additional,.spread-grid .additional>.cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1050px){.page{--composition-gap:20px}.hero-copy{column-gap:35px}}
@media(max-width:700px){
 .page{--spread-card-width:200px}
 .hero-copy{display:block}.hero-copy>h1{margin:22px 0}.hero-copy>.lead{margin-top:0}.hero-copy>.hero-note{margin-top:25px}
 .spread-grid{grid-template-columns:minmax(0,1fr);row-gap:0}
 .spread-grid>.hero-art,.spread-grid.main-open>.hero-art{grid-column:1;grid-row:1;padding:30px}
 .spread-grid>.reading{grid-column:1;grid-row:2;display:grid;grid-template-rows:0fr;padding:0;transition:grid-template-rows 520ms ease,opacity 520ms ease,visibility 0s linear 520ms}
 .spread-grid>.reading>.reading-inner{min-height:0;overflow:hidden}
 .spread-grid.main-open>.reading{grid-template-rows:1fr;transition:grid-template-rows 520ms ease,opacity 520ms ease,visibility 0s}
 .spread-grid .reading-inner #main-reading-heading{padding-top:26px}
 .spread-grid .reading-inner #main-reading-text{padding-bottom:28px}
 .spread-grid>.additional{grid-column:1;grid-row:3;margin-top:30px}
 .spread-grid .additional>.cards{grid-template-columns:minmax(0,1fr)}
 .spread-grid .cards .plane{padding:30px}
 .additional-readings{grid-template-columns:minmax(0,1fr);gap:12px}
 .additional-readings .card-reading h3{font-size:32px}
}
@media(prefers-reduced-motion:reduce){.spread-grid>.reading,.spread-grid.main-open>.reading{transition:none!important}}

/* ORACL 1.0.1: explicit WebKit 3D scene. Motion and flip remain separate layers.
   Scope to the November spread: archival cards and their rendering are untouched. */
#spread-grid .tarot-interactive{
 -webkit-appearance:none;appearance:none;
 -webkit-perspective:1100px;perspective:1100px;
 -webkit-transform-style:preserve-3d;transform-style:preserve-3d;
}
#spread-grid .card-motion,#spread-grid .card-flip{
 -webkit-transform-style:preserve-3d;transform-style:preserve-3d;
 overflow:visible;
}
#spread-grid .card-flip{
 -webkit-transform:rotateY(0deg);transform:rotateY(0deg);
 -webkit-transition:-webkit-transform .75s cubic-bezier(.2,.65,.25,1);
 transition:transform .75s cubic-bezier(.2,.65,.25,1);
}
#spread-grid .card-face{
 -webkit-backface-visibility:hidden;backface-visibility:hidden;
 /* Each face owns a composited plane; avoid coincident faces in WebKit. */
 -webkit-transform:rotateY(0deg) translateZ(.1px);transform:rotateY(0deg) translateZ(.1px);
}
#spread-grid .card-front{
 -webkit-transform:rotateY(180deg) translateZ(.1px);transform:rotateY(180deg) translateZ(.1px);
}
#spread-grid .is-revealed .card-flip{
 -webkit-transform:rotateY(180deg);transform:rotateY(180deg);
}
@media(prefers-reduced-motion:reduce){
 #spread-grid .card-flip{-webkit-transition:none!important;transition:none!important}
}

/* Do not anchor the viewport to content below the cards when readings expand.
   composition.css is loaded only by the November main page, not the archive. */
html{overflow-anchor:none}