:root{--yellow:#f4cc28;--black:#121313;--white:#f1f0e9;--display:Imbue,'Bodoni MT','Times New Roman',serif;--body:'Albert Sans',Arial,sans-serif;--gutter:clamp(20px,3.4vw,56px);--text:17px;--ease:cubic-bezier(.2,.7,.2,1)}
*{box-sizing:border-box}body{margin:0;background:var(--black);color:var(--yellow);font:var(--text)/1.5 var(--body)}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit}button:disabled{cursor:default;opacity:.35}a{color:inherit}button:focus-visible,a:focus-visible{outline:2px solid var(--yellow);outline-offset:6px}[hidden]{display:none!important}h1,h2,p{margin:0}svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}::selection{background:var(--yellow);color:var(--black)}
.landing{height:100svh;min-height:660px;display:grid;grid-template-rows:auto 1fr;overflow:hidden;position:relative;background:var(--black)}.site-header{display:flex;justify-content:space-between;align-items:center;padding:28px var(--gutter);position:relative;z-index:3}.wordmark{font-size:17px;text-decoration:none;font-weight:500;letter-spacing:.02em}.text-button{padding:6px 0;border:0;background:none;font-size:var(--text);text-underline-offset:5px}.text-button:hover{text-decoration:underline}.cover{position:relative;display:grid;place-items:center;padding:25px var(--gutter) 95px;overflow:hidden}.intro{text-align:center;position:relative;z-index:2;width:min(100%,620px)}h1{font-family:var(--display);font-weight:400;font-size:clamp(142px,17vw,255px);line-height:.88;letter-spacing:-.025em}.standfirst{font-size:clamp(19px,1.6vw,24px);line-height:1.45;margin-top:35px}.entry-actions{display:flex;align-items:center;flex-direction:column;gap:17px;margin-top:44px}.primary-button{background:var(--yellow);color:var(--black);border:0;padding:17px 24px;display:inline-flex;align-items:center;justify-content:space-between;gap:38px;min-height:58px;min-width:230px;font-size:var(--text);font-weight:500;transition:transform .2s var(--ease),background .2s}.primary-button svg{width:22px;height:22px}.primary-button:hover{background:var(--white);transform:translateY(-2px)}.primary-button:active{transform:translateY(1px)}.entry-actions>.text-button{opacity:.8}.portrait{position:absolute;pointer-events:none;overflow:hidden;--portrait-height:clamp(660px,61vw,900px);height:var(--portrait-height);width:calc(var(--portrait-height)*.36775);top:50%;transform:translateY(-50%);opacity:.85}.portrait-left{left:0}.portrait-right{right:0}.portrait img{width:400%;height:100%;object-fit:fill;position:absolute;max-width:none;filter:invert(1)}.portrait-left img{left:-100%}.portrait-right img{left:-200%}
.wordmark,.site-header>.text-button,.intro h1,.standfirst,.entry-actions>.primary-button,.entry-actions>.text-button{animation:arrive .65s var(--ease) both}.standfirst{animation-delay:.08s}.entry-actions>.primary-button{animation-delay:.16s}.entry-actions>.text-button{animation-delay:.22s}.portrait img{animation:arrive .9s var(--ease) both}.landing.is-underlay{filter:blur(18px) grayscale(1);transform:scale(1.025);pointer-events:none;user-select:none}body.in-mirror{overflow:hidden}
.experience{position:fixed;inset:0;z-index:10;padding:clamp(16px,3.4vw,52px);background:rgba(0,0,0,.15)}.mirror-surface{width:100%;height:100%;position:relative;background:#161717;overflow:hidden}.mirror-surface video{position:absolute;width:100%;height:100%;object-fit:contain;transform:scaleX(-1);filter:grayscale(1) brightness(.8)}.mirror-surface canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.study-ground{position:absolute;inset:0;background:#1b1c1c}
.icon-button{border:0;padding:10px;width:48px;height:48px;display:inline-grid;place-items:center;background:var(--black);color:var(--yellow);transition:background .2s,color .2s,transform .2s}.icon-button svg{width:25px;height:25px}.icon-button:hover{background:var(--yellow);color:var(--black);transform:scale(1.04)}.exit-button{position:absolute;right:18px;top:18px;z-index:5}.camera-message{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;flex-direction:column;gap:18px;padding:45px;text-align:center;background:#161717;z-index:4}.camera-message p{max-width:440px}.camera-message .text-button{text-decoration:underline}.face-status{position:absolute;bottom:26px;left:24px;right:24px;text-align:center;font-size:16px}
.reading-layer,.trace-layer{position:absolute;inset:0;pointer-events:none}.trace-layer{z-index:1}.reading-layer{z-index:2}.reading{position:absolute;width:clamp(170px,18vw,240px);padding:15px 17px 12px;background:rgba(13,14,14,.92);color:var(--yellow);pointer-events:auto;transform:translate(-50%,-50%);animation:read-in .55s var(--ease) both}.reading-text{font-size:clamp(16px,1.45vw,21px);line-height:1.4;text-wrap:pretty}.decision-buttons{display:flex;gap:10px;margin-top:12px}.decision-button{width:40px;height:40px;border:0;background:rgba(244,204,40,.09);color:var(--yellow);display:grid;place-items:center;padding:9px;transition:background .2s,color .2s,transform .2s}.decision-button svg{width:23px;height:23px}.decision-button:hover{background:var(--yellow);color:var(--black);transform:scale(1.08)}.reading.accepted{background:rgba(13,14,14,.8)}.accepted-symbol{display:block;width:21px;height:21px;margin-top:11px;opacity:.65}.trace{position:absolute;max-width:210px;transform:translate(-50%,-50%) rotate(-3deg);font-size:16px;color:var(--yellow);opacity:.27;line-height:1.4;text-decoration:line-through;text-wrap:pretty}
dialog{border:0;background:#1b1c1c;color:var(--yellow);padding:65px;max-width:650px;width:calc(100% - 36px);max-height:90svh;overflow:auto}dialog::backdrop{background:rgba(0,0,0,.75)}dialog h2{font:400 clamp(42px,4.6vw,68px)/.98 var(--display);letter-spacing:-.02em;margin:6px 0 28px}dialog p{margin:20px 0;line-height:1.65}dialog .primary-button{margin-top:14px}.dialog-close{position:absolute;top:14px;right:14px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.noscript{position:fixed;bottom:0;left:0;right:0;padding:16px;background:var(--black);color:var(--yellow)}
@keyframes arrive{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes read-in{from{opacity:0;translate:0 7px}to{opacity:1;translate:0 0}}
@media(max-width:1050px) and (min-width:601px){.portrait{opacity:.42;--portrait-height:640px}.portrait-left{left:-70px}.portrait-right{right:-70px}.intro{width:64%}}
@media(max-width:600px){.landing{min-height:620px}.site-header{padding-top:22px;padding-bottom:22px;gap:12px}.wordmark{font-size:15px}.site-header .text-button{font-size:14px}.cover{padding-top:40px;padding-bottom:100px}h1{font-size:clamp(130px,38vw,190px)}.standfirst{font-size:20px;margin-top:28px}.entry-actions{margin-top:35px}.portrait{--portrait-height:560px;opacity:.21}.portrait-left{left:-100px}.portrait-right{right:-100px}.experience{padding:14px}.exit-button{right:10px;top:10px;width:42px;height:42px}.reading{width:160px;padding:12px}.reading-text{font-size:16px}.decision-buttons{margin-top:10px;gap:12px}.decision-button{width:42px;height:42px}.trace{font-size:14px;max-width:145px}dialog{padding:60px 26px 30px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* White paper, original black ink, and restrained yellow accents. */
:root{--white:#ffffff;--gold:#947400}
body{background:var(--white);color:var(--black)}
button:focus-visible,a:focus-visible{outline-color:var(--black)}
.landing{background:var(--white)}
.intro h1{color:var(--gold)}
.portrait{opacity:1}
.portrait img{filter:none;mix-blend-mode:multiply}
.primary-button:hover{background:#f8dc69}
.experience{background:rgba(255,255,255,.2)}
.mirror-surface,.study-ground,.camera-message{background:#f5f5f3}
.mirror-surface video{filter:grayscale(1)}
.icon-button{background:rgba(255,255,255,.94);color:var(--black)}
.icon-button:hover{background:var(--yellow);color:var(--black)}
.reading{background:rgba(255,255,255,.60);color:var(--black);padding:15px 18px 17px;pointer-events:none}
.reading-word{font:400 clamp(33px,3.2vw,47px)/1.05 var(--display);letter-spacing:-.015em;margin-bottom:10px}
.reading-text{font-size:clamp(15px,1.2vw,18px);line-height:1.45}
.reading.current .reading-word{color:var(--gold)}
.reading.accepted{background:rgba(255,255,255,.48);opacity:.65}
.trace{color:var(--black)}
.decision-dock{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);z-index:4;display:flex;gap:18px;padding:8px;background:rgba(255,255,255,.94)}
.decision-dock .decision-button{width:54px;height:54px;padding:13px;background:#f0efeb;color:var(--black)}
.decision-dock .decision-button svg{width:28px;height:28px;stroke-width:1.6}
.decision-dock .decision-button:hover{background:var(--yellow);color:var(--black)}
dialog{background:var(--white);color:var(--black)}
dialog::backdrop{background:rgba(0,0,0,.4)}
@media(max-width:600px){.portrait{opacity:1;--portrait-height:480px}.portrait-left{left:-110px}.portrait-right{right:-110px}.reading-word{font-size:33px}.reading-text{font-size:15px}.decision-dock{bottom:16px}}

/* The mirror opens inside the original printed faces. */
.landing{transition:filter .85s var(--ease),transform .85s var(--ease)}
.intro,.site-header{transition:opacity .45s var(--ease),translate .7s var(--ease)}
.portrait{transition:transform .9s var(--ease),opacity .9s var(--ease)}
.landing.is-underlay{filter:blur(1.2px);transform:scale(1)}
.landing.is-underlay .intro,.landing.is-underlay .site-header{opacity:0;translate:0 -16px}
.landing.is-underlay .portrait{opacity:.54}
.landing.is-underlay .portrait-left{transform:translate(-12px,-50%)}
.landing.is-underlay .portrait-right{transform:translate(12px,-50%)}
.experience{background:transparent}
.mirror-surface{background:rgba(255,255,255,.04)}
.study-ground{background:rgba(255,255,255,.12)}
.camera-message{background:rgba(255,255,255,.74)}
.mirror-surface video{left:50%;top:50%;width:76%;height:92%;transform:translate(-50%,-50%) scaleX(-1);filter:none}
.experience:not([hidden]) .mirror-surface{animation:mirror-open .9s var(--ease) both}
@keyframes mirror-open{from{opacity:0;clip-path:inset(12% 25%)}to{opacity:1;clip-path:inset(0)}}
.reading{pointer-events:auto;cursor:default}
.reading:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.decision-dock{bottom:auto;left:0;top:0;transform:none;gap:5px;padding:4px;background:rgba(255,255,255,.97)}
.decision-dock .decision-button{width:30px;height:30px;padding:7px}
.decision-dock .decision-button svg{width:16px;height:16px;stroke-width:1.7}
@media(max-width:600px){.mirror-surface video{width:84%;height:94%}.decision-dock{bottom:auto}.decision-dock .decision-button{width:36px;height:36px;padding:8px}.decision-dock .decision-button svg{width:18px;height:18px}}
@media(prefers-reduced-motion:reduce){.landing,.intro,.site-header,.portrait,.experience:not([hidden]) .mirror-surface{animation:none!important;transition:none!important}}

/* Smaller type and a wider mirror; contextual controls stay anchored. */
h1{font-size:clamp(110px,13vw,198px)}
.standfirst{font-size:clamp(18px,1.4vw,20px);margin-top:29px}
.entry-actions{margin-top:34px;gap:14px}
.entry-actions .primary-button{font-size:16px;min-width:212px;min-height:52px;padding:15px 20px}
.entry-actions>.text-button{font-size:15px}
.reading{width:clamp(160px,15vw,210px);padding:12px 14px 13px}
.reading-word{font-size:clamp(25px,2.05vw,31px);margin-bottom:7px}
.reading-text{font-size:clamp(13.5px,1.02vw,15px)}
.mirror-surface video{width:86%;height:96%}
#study-image{position:absolute;left:50%;top:50%;width:86%;height:96%;object-fit:contain;transform:translate(-50%,-50%)}
@media(max-width:600px){h1{font-size:clamp(112px,30vw,142px)}.standfirst{font-size:17px;margin-top:24px}.entry-actions{margin-top:29px}.reading{width:150px;padding:11px 12px 12px}.reading-word{font-size:25px}.reading-text{font-size:13.5px}.mirror-surface video,#study-image{width:90%;height:96%}}

/* Align the complete text group with the centre of the portrait field. */
.cover{padding-block:30px}

/* Compact type for seven readings; placement intentionally allows partial overlaps. */
.reading-layer.is-crowded .reading{width:clamp(180px,16vw,225px);padding:10px 12px 11px}
.reading-layer.is-crowded .reading-word{font-size:25px;line-height:1.03;margin-bottom:6px}
@media(max-width:600px){.reading-layer.is-crowded .reading{width:158px;padding:9px 10px 10px}.reading-layer.is-crowded .reading-word{font-size:22px}}

.reading.current{background:#fff;opacity:1!important}
.reading-layer{isolation:isolate}

/* Phone cover: complete half-face crops frame a smaller central introduction. */
@media(max-width:600px){
 .site-header{padding:18px 16px;gap:10px}
 .wordmark{font-size:14px}
 .site-header .text-button{font-size:13px}
 .cover{--mobile-portrait-height:clamp(220px,66vw,290px);--mobile-portrait-width:calc(var(--mobile-portrait-height)*.36775);padding:24px 0}
 .portrait{--portrait-height:var(--mobile-portrait-height)}
 .portrait-left{left:0}
 .portrait-right{right:0}
 .intro{width:calc(100% - var(--mobile-portrait-width) - var(--mobile-portrait-width) - 12px);max-width:260px}
 .intro h1{font-size:clamp(76px,22vw,96px)}
 .standfirst{font-size:clamp(13px,3.2vw,14px);line-height:1.5;margin-top:20px}
 .entry-actions{margin-top:22px;gap:10px}
 .entry-actions .primary-button{font-size:clamp(13px,3.1vw,13.5px);width:clamp(146px,42vw,180px);min-width:0;min-height:44px;padding:12px;gap:10px;white-space:nowrap}
 .entry-actions .primary-button svg{width:16px;height:16px;flex-shrink:0}
 .entry-actions>.text-button{font-size:clamp(13px,3.1vw,13.5px);white-space:nowrap}
 .landing.is-underlay .portrait-left{transform:translate(-4px,-50%)}
 .landing.is-underlay .portrait-right{transform:translate(4px,-50%)}
}