/* ==========================================================================
   The papers — papers.html: a fixed stage of twelve steps, one persistent sheet, colour planes.
   A frame-for-frame port of the Beagle choreography in the portfolio's palette and type.
   ========================================================================== */
:root {
  --forest: #1f3b2d; --base: #1a2c24; --card: #223d31; --light: #f4f1e8; --paper: #fbfaf6;
  --brass: #b48a3a; --brass-deep: #9a7430; --brass-text: #8f6b22; --cream: #cdbf9a; --cream-plane: #dfd6bf;
  --ink: #1a1d1b; --muted: #5c5f5a; --hair: rgba(31,59,45,.18); --tint: rgba(180,138,58,.28); --mark: #f3e3a8;
  --serif:Figtree,sans-serif; --sans: Figtree, sans-serif; --mono: 'JetBrains Mono', monospace;
  --mat: 27px;
}
html,body{height:100%;margin:0;overflow:hidden;background:var(--base);color:#ffffff;font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit}
[hidden]{display:none!important}
input,button{font:inherit}
::selection{background:rgba(180,138,58,.45)}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

/* ---------- Stage ---------- */
#stage{position:fixed;inset:0;overflow:hidden;background:var(--base);touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
#stage.is-dragging{cursor:grabbing}
#stage.is-tweening{cursor:default}
.layer{position:absolute;inset:0;pointer-events:none}
.abs{position:absolute;left:50%;top:50%;will-change:transform,opacity}
.hidden{visibility:hidden}

/* Colour planes: grow from the horizontal centre line inside the mat */
.plane{position:absolute;left:var(--mat);right:var(--mat);top:var(--mat);bottom:0;transform-origin:50% 50%;transform:scaleY(0);will-change:transform}
.plane-light{left:0;right:0;top:0;background:var(--light)}
.plane-cream{background:var(--cream-plane)}
.plane-brass{background:var(--brass)}
.photo-bg{position:absolute;inset:0;background-size:cover;background-position:50% 35%;opacity:0;will-change:opacity}
.photo-bg::after{content:"";position:absolute;inset:0;background:rgba(26,44,36,var(--wash,.45));transition:none}
.hero-photo{position:absolute;inset:0;background:url("assets/photos/podium-2024-11.jpg") center 30%/cover no-repeat;will-change:transform,opacity}
.hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,34,28,.35),rgba(20,34,28,.55))}

/* Side photographs of the hero shatter */
.side{position:absolute;top:50%;width:0;will-change:transform,opacity;box-shadow:0 30px 70px rgba(0,0,0,.45);overflow:hidden;background:#222}
.side img{display:block;width:100%;height:100%;object-fit:cover}

/* Hero copy */
.hero-copy{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;width:min(1100px,92vw);will-change:transform,opacity}
.hero-title{margin:0;font-family:var(--sans);font-weight:700;font-size:clamp(36px,5.4vw,78px);line-height:.98;letter-spacing:-.04em;color:#ffffff;text-shadow:0 2px 30px rgba(0,0,0,.25)}
.hero-sub{margin:18px 0 0;font-family:var(--sans);font-weight:400;font-size:clamp(16px,1.6vw,22px);line-height:1.45;color:#ffffff;opacity:.95}
.chev{position:absolute;left:50%;bottom:9vh;width:70px;height:70px;margin-left:-35px;border:2px solid #ffffff;border-radius:50%;display:grid;place-items:center;will-change:opacity}
.chev svg{width:28px;height:28px;stroke:#ffffff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* The persistent sheet and its faces */
.sheet{position:absolute;left:50%;top:50%;transform-origin:50% 50%;will-change:transform,opacity;box-shadow:0 60px 120px rgba(0,0,0,.35),0 10px 30px rgba(0,0,0,.18)}
.face{position:absolute;inset:0;opacity:0;will-change:opacity;overflow:hidden}
.face-photo{background:url("assets/photos/podium-2024-11.jpg") no-repeat;background-size:cover;background-position:50% 30%}
.face-dark{background:var(--card);color:#ffffff;display:grid;place-items:center;text-align:center;padding:8% 10%;box-sizing:border-box}
.face-paper{background:var(--paper);color:var(--ink)}
/* Manifesto text: sizes are in sheet units via em on the face (font-size set by JS) */
.mani-small{font-family:var(--sans);font-weight:400;font-size:2.8em;line-height:1.4;color:var(--cream)}
.mani-big{font-family:var(--sans);font-weight:700;font-size:6.6em;line-height:1;letter-spacing:-.035em;color:#ffffff;margin:.12em 0 .18em}
.mani-foot{font-family:var(--sans);font-weight:400;font-size:2.4em;line-height:1.45;color:var(--cream);margin-top:1.6em}
/* The typed page (sheet units: 1em = sheet width / 100) */
.paper{position:absolute;inset:0;padding:12em 10em 8em 10em;box-sizing:border-box;font-family:var(--sans);color:var(--ink)}
.paper-mark{position:absolute;left:6.5em;top:7em;width:5em;height:1px;background:var(--muted);transform:rotate(-45deg);transform-origin:left}
.paper-label{font-size:2.6em;color:#9a9a96;min-height:1.4em;white-space:nowrap}
.paper-title{font-family:var(--sans);font-weight:600;font-size:4.5em;line-height:1.15;letter-spacing:-.015em;color:var(--ink);margin:.1em 0 0;min-height:1.1em;white-space:nowrap;position:relative}
.paper-title .word{position:relative;display:inline-block}
.paper-title .word .swap{position:absolute;left:0;top:0;opacity:0;color:var(--ink)}
.paper-title .word .mark{position:absolute;left:-.1em;right:-.1em;top:.1em;bottom:0;background:var(--mark);transform:scaleX(0);transform-origin:left;z-index:-1}
.paper-section{font-size:2.7em;color:var(--ink);margin:2.2em 0 .9em;opacity:0}
.paper-lines{display:grid;gap:.95em}
.bar{height:.45em;background:#d9d9d6;transform:scaleX(0);transform-origin:left}
.bar.b2{width:62%}.bar.b3{width:84%}.bar.b4{width:48%}.bar.b5{width:72%}
.paper-figure{margin-top:1.4em;opacity:0;transition:opacity .9s ease}
.paper-figure svg{display:block;width:100%;height:auto}
.paper-figure .viz-facts{display:flex;gap:1em 2.4em;padding:0 0 .8em;border-bottom:1px solid var(--hair);margin-bottom:.8em}
.paper-figure .viz-fact-value{font-family:var(--sans);font-weight:700;font-size:2.7em;line-height:1;letter-spacing:-.02em;color:var(--forest)}
.paper-figure .viz-fact-label{margin-top:.5em;font-family:var(--mono);font-size:1.2em;letter-spacing:.02em;color:var(--muted)}
/* The stories' animations (time clock), started by adding .play to the sheet */
.play-lines .paper-section{animation:fadeIn .6s ease forwards}
.play-lines .paper-lines .bar{animation:wipe 3.5s cubic-bezier(.85,0,.15,1) forwards}
.play-lines .paper-lines .bar:nth-child(2){animation-delay:.25s}
.play-lines .paper-lines .bar:nth-child(3){animation-delay:.5s}
.play-lines .paper-lines .bar:nth-child(4){animation-delay:.75s}
@keyframes wipe{to{transform:scaleX(1)}}
.play-lines .paper-figure{opacity:1;transition-delay:1.2s}
.paper-title .mark{transition:transform 1s cubic-bezier(.65,.05,.36,1) .1s}
.play-title .paper-title .mark{transform:scaleX(1)}
.paper-title .word .orig,.paper-title .word .swap{transition:opacity .3s ease 1s}
.play-title .paper-title .word .orig{opacity:0}
.play-title .paper-title .word .swap{opacity:1}

/* Other pages for the grid and the stack (same size as the sheet, drawn with bars) */
.page{position:absolute;left:50%;top:50%;transform-origin:50% 50%;background:var(--paper);color:var(--ink);box-shadow:0 18px 40px rgba(0,0,0,.22);will-change:transform,opacity;opacity:0;box-sizing:border-box;padding:12em 10em;font-family:var(--sans);overflow:hidden}
.page-mark{position:absolute;left:6.5em;top:7em;width:5em;height:1px;background:var(--muted);transform:rotate(-45deg);transform-origin:left}
.page-label{font-size:2.6em;color:#9a9a96}
.page-title{font-family:var(--sans);font-weight:600;font-size:4.1em;line-height:1.18;letter-spacing:-.01em;margin:.1em 0 2em;color:var(--ink);text-wrap:balance}
.page-section{font-size:2.7em;margin:2.4em 0 .9em}
.page .bar{transform:none;background:#dcdcd8}
.page .bar.dark{background:var(--forest)}
.page .bar.brass{background:var(--brass)}
.gantt{display:grid;gap:.8em;margin-top:1em}
.gantt .row{display:grid;grid-template-columns:1fr;position:relative;height:1.1em;background:#dcdcd8}
.gantt .row i{position:absolute;top:0;bottom:0;background:var(--forest)}
.avatars{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6em;margin-top:1.4em}
.avatar{aspect-ratio:1/1;border-radius:50%;background:#e4e2db;display:grid;place-items:center;font-family:var(--mono);font-size:2.4em;color:var(--forest)}
.avatar.b{background:var(--forest);color:#ffffff}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:.8em;margin-top:1em}
.tiles i{display:block;aspect-ratio:4/3;background:#dcdcd8}
.tiles i.dark{background:var(--forest)}
.map-dots{display:grid;grid-template-columns:repeat(18,1fr);gap:.55em;margin-top:1.4em}
.map-dots i{display:block;aspect-ratio:1/1;border-radius:50%;background:#dcdcd8}
.map-dots i.on{background:var(--brass)}

/* Torn scrap */
.scrap{position:absolute;right:0;top:50%;width:min(300px,40vw);padding:26px 28px 34px;background:var(--paper);color:var(--ink);box-shadow:0 30px 60px rgba(0,0,0,.35);transform:translate(130%,0) rotate(-6deg);will-change:transform,opacity;opacity:0;clip-path:polygon(2% 0,98% 1%,100% 10%,97% 22%,100% 36%,98% 55%,100% 70%,97% 86%,99% 100%,0 98%,2% 84%,0 70%,3% 55%,0 40%,2% 24%,0 10%)}
.scrap.play{transition:transform 2s cubic-bezier(.25,.46,.45,.94),opacity .3s;transform:translate(14%,-10%) rotate(-7deg);opacity:1}
.scrap-title{font-family:var(--sans);font-weight:600;font-size:22px;line-height:1.15;letter-spacing:-.01em;margin-bottom:14px}
.scrap .bar{height:5px;margin-top:9px;transform:none;background:#d9d9d6}

/* Big words and scene headings */
.bigword{position:absolute;font-family:var(--sans);font-weight:700;line-height:1;letter-spacing:-.04em;will-change:transform,opacity;opacity:0}
.bigword-edit{left:calc(var(--mat) + 5vw);top:18vh;font-size:clamp(44px,6.4vw,92px);color:var(--forest)}
.bigword-edit em{font-style:normal;color:var(--brass-text)}
.scene-heading{position:absolute;left:0;right:0;top:calc(var(--mat) + 7vh);text-align:center;will-change:transform,opacity;opacity:0}
.scene-heading h2{margin:0;font-family:var(--sans);font-weight:700;font-size:clamp(36px,5vw,72px);line-height:1;letter-spacing:-.035em;color:#ffffff}
.scene-heading p{margin:14px 0 0;font-family:var(--sans);font-weight:400;font-size:clamp(17px,1.6vw,22px);line-height:1.45;color:#ffffff;opacity:.95}
.scene-heading-cream{top:auto;bottom:22px}
.scene-heading-cream h2,.scene-heading-cream p{color:var(--forest);display:inline}
.scene-heading-cream h2{font-size:clamp(20px,2.1vw,30px);letter-spacing:-.025em}
.scene-heading-cream p{margin:0 0 0 14px;font-size:clamp(15px,1.25vw,18px)}
.wave{position:absolute;left:50%;top:30vh;transform:translateX(-50%);display:flex;font-family:var(--sans);font-weight:700;font-size:clamp(44px,6vw,86px);line-height:1;letter-spacing:-.035em;color:#ffffff;white-space:nowrap;will-change:opacity;opacity:0;text-shadow:0 2px 20px rgba(0,0,0,.3)}
.wave span{display:inline-block;opacity:0;transform:translateY(-40px);will-change:transform,opacity}
.wave.play span{transition:transform 1s cubic-bezier(.16,1,.3,1),opacity .6s ease}
.done-heading{position:absolute;left:0;right:0;top:50%;text-align:center;transform:translateY(-50%);will-change:opacity;opacity:0;pointer-events:none;z-index:5}
.done-heading h2{margin:0;font-family:var(--sans);font-weight:700;font-size:clamp(56px,8.4vw,124px);line-height:.95;letter-spacing:-.045em;color:var(--forest)}
.done-heading p{margin:12px 0 0;font-family:var(--sans);font-weight:400;font-size:clamp(17px,1.6vw,22px);line-height:1.45;color:var(--forest)}

/* Outline shapes drifting on the light and dark scenes */
.shapes{position:absolute;inset:0;overflow:hidden}
.shape{position:absolute;border:3px solid var(--brass);opacity:.9;will-change:transform}
.shape.sq{width:46px;height:46px}
.shape.tri{width:0;height:0;border:0;border-left:30px solid transparent;border-right:30px solid transparent;border-bottom:52px solid transparent;box-shadow:none;outline:3px solid var(--brass);outline-offset:-3px;clip-path:polygon(50% 0,100% 100%,0 100%)}
.shape.ring{width:52px;height:52px;border-radius:50%}
.shapes-dark .shape{border-color:#2f4d3f;outline-color:#2f4d3f}

/* Comments */
.comment{position:absolute;left:50%;top:50%;width:320px;margin-left:-160px;background:#ffffff;color:var(--ink);padding:16px 18px 16px 70px;box-shadow:0 30px 60px rgba(0,0,0,.3);font-size:14px;line-height:1.5;will-change:transform,opacity;opacity:0;transform:translateY(100vh)}
.comment.play{transition:transform 3s cubic-bezier(.16,1,.3,1),opacity .4s;transform:translateY(0);opacity:1}
.comment .av{position:absolute;left:16px;top:16px;width:40px;height:40px;border-radius:50%;background:var(--forest);color:#ffffff;display:grid;place-items:center;font-family:var(--mono);font-size:12px;transform:scale(0)}
.comment.play .av{transition:transform 1.2s cubic-bezier(.34,1.56,.64,1) .4s;transform:scale(1)}
.comment b{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.03em;color:var(--brass-text);margin-bottom:4px}

/* The cover */
.cover{position:absolute;left:50%;top:50%;transform-origin:0% 50%;will-change:transform,opacity;opacity:0;background:url("assets/photos/future-health-summit-2026-display.jpg") center/cover no-repeat;box-shadow:0 60px 120px rgba(0,0,0,.35);overflow:hidden;box-sizing:border-box}
.cover::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(245,241,232,.55),rgba(26,44,36,.55))}
.cover-spine{position:absolute;left:3.5%;top:0;bottom:0;width:1px;background:rgba(0,0,0,.25);box-shadow:1px 0 0 rgba(255,255,255,.35)}
.cover-client{position:absolute;left:0;right:0;top:7%;text-align:center;font-family:var(--sans);font-weight:500;font-size:2.4em;color:#ffffff;text-shadow:0 1px 14px rgba(0,0,0,.45)}
.cover-box{position:absolute;left:14%;right:14%;top:30%;height:36%;background:var(--forest);box-sizing:border-box;padding:3%;transform:scale(0);will-change:transform}
.cover.play .cover-box{transition:transform 3s cubic-bezier(.16,1,.3,1);transform:scale(1)}
.cover-box-in{border:2px solid #ffffff;height:100%;box-sizing:border-box;display:grid;place-content:center;text-align:center;color:#ffffff}
.cover-kicker{font-family:var(--sans);font-weight:500;font-size:2.4em;color:var(--cream)}
.cover-title{font-family:var(--sans);font-weight:700;font-size:5em;line-height:1;letter-spacing:-.035em;margin:.2em 0}
.cover-date{font-family:var(--sans);font-weight:400;font-size:2.4em}
.cover .shape{border-color:var(--brass);outline-color:var(--brass)}

/* Footer: light band with the list, dark band with the form */
.footer-band{position:absolute;left:0;right:0;bottom:0;height:39%;background:var(--forest);transform:translateY(100%);will-change:transform}
.footer{position:absolute;left:55%;right:var(--mat);top:0;bottom:0;transform:translateY(100%);will-change:transform;pointer-events:auto}
.features{position:absolute;left:0;top:18vh;color:var(--ink)}
.features h3{margin:0 0 22px;font-family:var(--sans);font-weight:600;font-size:18px;line-height:1.25;letter-spacing:-.01em;color:var(--ink)}
.feature{display:flex;align-items:center;gap:18px;margin-bottom:20px;text-decoration:none;color:var(--ink);font-size:16px;line-height:1.3;opacity:0;transform:translateY(40px);will-change:transform,opacity}
.feature i{flex:none;width:42px;height:42px;border-radius:50%;border:1.5px solid var(--ink);display:grid;place-items:center;font-family:var(--mono);font-style:normal;font-size:13px;color:var(--ink)}
.feature b{font-weight:600}
.signup{position:absolute;left:0;right:0;top:calc(61% + 10vh);color:#ffffff}
.signup h3{margin:0;font-size:20px;font-weight:600;line-height:1.2;letter-spacing:-.01em}
.signup p{margin:6px 0 20px;font-size:14px;color:var(--cream)}
.signup p a{color:#ffffff}
.signup-form{display:flex;max-width:580px;position:relative;height:58px}
.signup-form input{flex:1 1 auto;min-width:0;border:0;background:#2e4b3d;color:#ffffff;padding:0 26px;font-size:14px;border-radius:30px 0 0 30px;outline:none}
.signup-form input::placeholder{color:rgba(255,255,255,.55)}
.signup-form button{flex:0 0 30%;border:0;background:var(--brass);color:#ffffff;font-size:14px;font-weight:600;border-radius:0 30px 30px 0;cursor:pointer;transition:background .3s ease-in-out}
.signup-form button:hover{background:var(--brass-deep)}
.signup-form.animate input{opacity:0;transition:opacity .3s ease-out .4s}
.signup-form.animate button{position:absolute;left:70%;top:0;width:30%;height:58px;color:transparent;animation:toCircle 1s cubic-bezier(.2,.1,.2,1) .4s forwards}
@keyframes toCircle{40%{width:44%;left:56%}100%{width:58px;left:0;border-radius:30px}}
.signup-form .tick{position:absolute;left:0;top:0;width:58px;height:58px;opacity:0}
.signup-form.animate .tick{opacity:1}
.signup-form .tick path{stroke:#ffffff;stroke-width:3;fill:none;stroke-dasharray:100;stroke-dashoffset:100;stroke-linecap:round;stroke-linejoin:round;animation:draw 1s cubic-bezier(.5,.3,.3,1) 1.1s forwards}
.signup-note{margin:12px 0 0;font-family:var(--mono);font-size:12px;color:var(--cream);min-height:1.5em}
.footer-links{position:absolute;left:calc(-55vw + 72px);right:0;bottom:28px;display:flex;align-items:center;gap:24px;font-size:12px;color:rgba(255,255,255,.55)}
.footer-links a{text-decoration:none;color:rgba(255,255,255,.55);transition:color .3s}
.footer-links a:hover{color:#ffffff}
.footer-links .spacer{flex:1}
.footer-links .mark{display:flex;align-items:center;gap:8px;color:#ffffff;font-size:12px}

/* ---------- Chrome ---------- */
#chrome{position:fixed;inset:0;pointer-events:none;z-index:20}
.topnav{position:absolute;left:0;right:0;top:0;height:47px;padding:27px 27px 0;display:flex;align-items:center;justify-content:space-between;transition:top .8s cubic-bezier(.5,0,.5,1),opacity .5s}
.topnav.is-hidden{top:-120px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;pointer-events:auto;color:var(--ink);transition:color .5s .3s}
.logo-name{font-size:15px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.logo svg text{transition:fill .5s .3s}
body.white .logo{color:#ffffff}
body.white .logo svg .ink{fill:#ffffff}
.nav-right{display:flex;align-items:center;gap:14px;pointer-events:auto}
.nav-link{font-size:13px;font-weight:500;text-decoration:none;color:var(--ink);padding:10px 14px;transition:color .5s}
body.white .nav-link{color:#ffffff}
.pill{font-size:13px;font-weight:600;text-decoration:none;color:#ffffff;background:var(--brass);padding:10px 25px 8px;border-radius:16px;transition:background .3s ease-in-out}
.pill:hover{background:var(--brass-deep)}
.dots{position:absolute;right:6vh;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;pointer-events:auto}
.dot{display:block;width:4px;height:4px;border-radius:12px;margin:8px;background:#606060;transition:background-color .5s ease-in-out;cursor:pointer;border:0;padding:0}
.dot.is-on{background:var(--brass);box-shadow:0 1px 1px rgba(0,0,0,.2)}
body.white .dot{background:rgba(255,255,255,.45)}
body.white .dot.is-on{background:#ffffff}
@media (max-width:1023px){.dots{display:none}.nav-link{display:none}}

/* ---------- Loader ---------- */
#loader{position:fixed;inset:0;z-index:50;background:var(--base);display:grid;place-items:center;transition:opacity .4s ease .3s,visibility .4s .3s}
#loader.is-gone{opacity:0;visibility:hidden}
.loader-mark{width:120px;height:90px}
.loader-mark text{fill:none;stroke:var(--brass);stroke-width:1.6;stroke-dasharray:260;stroke-dashoffset:260;animation:logoLoop 2s cubic-bezier(.1,.15,.8,.75) infinite}
@keyframes logoLoop{0%{stroke-dashoffset:260;opacity:1}70%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
#loader.is-loaded .loader-mark text{animation:logoOut 1.2s cubic-bezier(.39,.09,.46,.25) forwards}
@keyframes logoOut{to{stroke-dashoffset:-260;opacity:0}}
.logo-line{position:fixed;left:50%;top:calc(50% + 44px);height:3px;width:0;background:var(--brass);transform:translateX(-50%);z-index:51}
#loader.is-loaded ~ .logo-line{animation:lineGrow 1s cubic-bezier(.72,.1,.72,.96) .32s forwards}
@keyframes lineGrow{to{width:100%}}
.logo-line.is-collapsing{animation:lineCollapse .3s ease forwards!important}
@keyframes lineCollapse{to{width:0;opacity:0}}

/* ---------- Mobile ---------- */
@media (max-width:1023px){
  :root{--mat:14px}
  .topnav{height:47px;padding:15px 16px 0;background:rgba(244,241,232,.96)}
  body.white .topnav .logo{color:var(--ink)}
  body.white .topnav .logo svg .ink{fill:var(--forest)}
  .logo-name{display:none}
  .hero-title{font-size:clamp(30px,8.4vw,50px)}
  .footer{left:16px;right:16px}
  .features{top:9vh}
  .features h3{font-size:16px;margin-bottom:14px}
  .feature{margin-bottom:12px;font-size:14px}
  .feature i{width:34px;height:34px}
  .signup{top:calc(61% + 4vh)}
  .signup-form{height:50px}
  .signup-form input{padding:0 16px}
  .footer-band{height:39%}
  .cover.is-footer{opacity:.0!important}
  .footer-links{left:0;flex-wrap:wrap;gap:10px 16px}
  .chev{width:54px;height:54px;margin-left:-27px}
}
#landscape-lock{display:none;position:fixed;inset:0;z-index:60;background:var(--base);color:var(--cream);place-items:center;font-family:var(--mono);font-size:12px;text-align:center;padding:20px}
@media (min-aspect-ratio:13/9) and (orientation:landscape) and (max-width:740px) and (max-height:419px){#landscape-lock{display:grid}}

/* The grid pages open their paper while the grid is on stage */
#stage.grid-live .page{pointer-events:auto;cursor:pointer}
.page-cites{position:absolute;left:10em;bottom:6em;font-family:var(--mono);font-size:2em;color:var(--brass-text)}
.page-year{position:absolute;right:10em;top:7.4em;font-family:var(--mono);font-size:2.2em;color:#9a9a96}