:root {
  --paper: #d9b27f;
  --paper-light: #f2d3a8;
  --cream: #f4eadb;
  --ink: #221812;
  --brown: #6d4d39;
  --deep: #211915;
  --sunset: #eeaa72;
  --muted: #9d7b63;
  --line: rgba(35, 24, 18, .18);
  --shadow: 0 28px 70px rgba(28, 18, 11, .28);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--deep); }
body {
  margin: 0;
  min-width: 1180px;
  color: var(--ink);
  background: var(--cream);
  font-family: "Segoe UI", Arial, sans-serif;
  overflow-x: hidden;
  cursor: default;
}

a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }

.grain {
  position: fixed; inset: 0; z-index: 999; pointer-events: none; opacity: .055; mix-blend-mode: multiply;
  background-image:
    radial-gradient(circle at 20% 30%, #000 0 .65px, transparent .8px),
    radial-gradient(circle at 70% 80%, #000 0 .6px, transparent .8px);
  background-size: 8px 8px, 11px 11px;
}
.cursor-halo {
  position: fixed; width: 440px; height: 440px; border-radius: 50%; pointer-events: none; z-index: 3;
  background: radial-gradient(circle, rgba(255,222,177,.11) 0, rgba(255,222,177,0) 68%);
  transform: translate(-50%, -50%); opacity: 0; transition: opacity .3s ease;
}
body:hover .cursor-halo { opacity: 1; }

.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: 78px; padding: 0 54px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  color: #f8eee2; border-bottom: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(to bottom, rgba(26,18,13,.6), rgba(26,18,13,.08));
  backdrop-filter: blur(10px);
}
.brand-mark { display: inline-flex; align-items: center; gap: 12px; justify-self: start; font-weight: 800; letter-spacing: .08em; font-size: 13px; text-transform: uppercase; }
.brand-eye { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.48); font-size: 7px; }
.topnav { display: flex; gap: 34px; font-size: 11px; font-weight: 800; letter-spacing: .16em; }
.topnav a { position: relative; opacity: .82; padding: 10px 0; }
.topnav a::after { content:""; position:absolute; left:0; bottom:2px; width:100%; height:1px; transform:scaleX(0); transform-origin:left; background:#fff; transition:transform .25s ease; }
.topnav a:hover::after { transform: scaleX(1); }
.topnav a:hover { opacity: 1; }
.ticker-stamp { justify-self: end; border: 1px solid rgba(255,255,255,.5); padding: 8px 14px; font: 900 12px/1 Arial, sans-serif; letter-spacing: .14em; transform: rotate(-2deg); }

.hero { position: relative; min-height: 1080px; height: 100vh; max-height: 1200px; color: #fff6eb; overflow: hidden; }
.hero-bg { position:absolute; inset:-4%; background-image:url('../assets/background/cozy-room.png'); background-size:cover; background-position:center; transform:scale(1.03); will-change: transform; transition: filter .6s ease; }
.hero-vignette { position:absolute; inset:0; background: linear-gradient(90deg, rgba(29,19,13,.72) 0%, rgba(29,19,13,.34) 39%, rgba(29,19,13,.04) 67%, rgba(29,19,13,.12) 100%), linear-gradient(to top, rgba(28,18,12,.42), transparent 38%); }
body.dim-mode .hero-bg { filter: brightness(.6) saturate(.75); }
body.dim-mode .hero-vignette { background: linear-gradient(90deg, rgba(11,9,8,.84), rgba(11,9,8,.38) 65%, rgba(11,9,8,.48)); }

.hero-copy { position:absolute; z-index:5; left:7.1vw; top:50%; width:760px; transform:translateY(-47%); }
.eyebrow, .kicker { font-size: 12px; letter-spacing: .22em; font-weight: 900; text-transform: uppercase; }
.eyebrow { color: #ffe4c5; margin-bottom: 24px; }
.hero h1 { margin:0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(102px, 8.1vw, 156px); line-height:.78; letter-spacing:-.07em; font-weight:500; text-shadow:0 18px 50px rgba(26,15,9,.26); }
.hero h1 span { font-style: italic; font-weight: 400; }
.hero-line { max-width: 560px; margin: 38px 0 26px; font: 500 19px/1.5 "Segoe UI", sans-serif; color:rgba(255,244,231,.86); }
.hero-tags { display:flex; gap:12px; margin-bottom:28px; }
.paper-tag { display:inline-flex; align-items:center; gap:12px; background:#d8ad79; color:#2b1c12; padding:9px 13px 9px 12px; box-shadow:0 8px 22px rgba(20,12,8,.18); }
.paper-tag b { font-size:9px; letter-spacing:.16em; opacity:.65; }
.paper-tag em { font-style:normal; font-weight:900; font-size:11px; letter-spacing:.12em; }
.paper-tag.slanted { transform:rotate(1.5deg); background:#f0c99a; }

.ca-box { display:flex; align-items:stretch; width:min(720px, 78vw); min-height:74px; border:1px solid rgba(255,255,255,.28); background:rgba(45,29,19,.33); backdrop-filter:blur(14px); box-shadow:0 18px 45px rgba(17,9,5,.15); }
.ca-meta { flex:1; padding:14px 18px; min-width:0; }
.ca-meta span, .final-ca>span { display:block; font-size:9px; font-weight:900; letter-spacing:.2em; opacity:.6; margin-bottom:7px; }
.ca-meta strong { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font:700 16px/1.2 Consolas, monospace; letter-spacing:.03em; }
.btn { border:0; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 24px; font-size:11px; font-weight:900; letter-spacing:.13em; text-transform:uppercase; transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease; position:relative; }
.btn:hover { transform: translateY(-3px) rotate(-.4deg); box-shadow:0 14px 30px rgba(29,18,10,.18); }
.btn:active { transform:translateY(0) scale(.98); }
.btn-copy { min-width:154px; border-left:1px solid rgba(255,255,255,.22); background:#d4aa75; color:#2a1b11; }
.btn-feedback { display:none; }
.btn.is-copied .btn-label { display:none; }
.btn.is-copied .btn-feedback { display:inline; }
.hero-actions { display:flex; gap:10px; margin-top:14px; }
.btn-paper { background:#f0d8bb; color:#281a12; }
.btn-dark { background:#2a1d17; color:#f5eadc; }

.hero-caption { position:absolute; z-index:4; right:4.5vw; bottom:58px; display:flex; gap:10px; align-items:center; font-size:10px; letter-spacing:.14em; text-transform:uppercase; opacity:.72; }
.caption-dot { width:7px; height:7px; background:#f4c287; border-radius:50%; box-shadow:0 0 0 6px rgba(244,194,135,.12); }
.scroll-hint { position:absolute; z-index:5; left:7.1vw; bottom:56px; font-size:10px; letter-spacing:.17em; font-weight:800; opacity:.7; }
.secret-switch { position:absolute; z-index:6; right:9vw; top:78px; width:120px; height:180px; border:0; background:transparent; color:#f5eadc; cursor:pointer; }
.secret-switch .cord { position:absolute; left:58px; top:0; width:2px; height:105px; background:linear-gradient(#5f4b3d,#d6bd9c); transition:height .25s ease; }
.secret-switch::after { content:""; position:absolute; top:99px; left:50px; width:18px; height:34px; border-radius:9px 9px 12px 12px; background:#cfb18e; box-shadow:0 6px 18px rgba(0,0,0,.24); transition:transform .25s ease; }
.secret-switch:hover .cord { height:116px; }
.secret-switch:hover::after { transform:translateY(11px); }
.switch-label { position:absolute; top:144px; left:13px; width:94px; opacity:.5; font-size:8px; font-weight:900; letter-spacing:.18em; }

.marquee { height:64px; overflow:hidden; display:flex; align-items:center; background:#d7ad7b; border-top:1px solid rgba(42,29,22,.18); border-bottom:1px solid rgba(42,29,22,.18); }
.marquee-track { display:flex; align-items:center; gap:26px; white-space:nowrap; width:max-content; animation:marquee 24s linear infinite; font-size:12px; font-weight:900; letter-spacing:.18em; }
.marquee-track span { padding-left:26px; }
.marquee-track i { font-style:normal; opacity:.35; }
.marquee-dark { background:#241a16; color:#ead9c6; border-color:rgba(255,255,255,.08); }
.marquee-track.reverse { animation-direction:reverse; animation-duration:28s; }
@keyframes marquee { to { transform:translateX(-50%); } }

.section-pad { padding: 120px 7vw; }
.section-number { position:absolute; top:48px; left:7vw; font-size:10px; letter-spacing:.2em; font-weight:900; opacity:.45; }
.section-number.light { color:#f8eadb; }
.room { position:relative; min-height:1080px; background:#efe3d2; display:flex; align-items:center; }
.room-grid { width:100%; display:grid; grid-template-columns:minmax(570px, 1fr) minmax(540px, .86fr); gap:7vw; align-items:center; }
.portrait-wrap { position:relative; max-width:760px; justify-self:center; }
.portrait-card { margin:0; background:#cfa875; padding:22px 22px 58px; transform:rotate(-2.2deg); box-shadow:var(--shadow); border:1px solid rgba(68,43,27,.22); }
.portrait-card img { display:block; width:100%; aspect-ratio:1/1; object-fit:cover; filter:saturate(.9) contrast(.98); }
.portrait-card figcaption { margin-top:20px; font:900 10px/1.2 Consolas, monospace; letter-spacing:.14em; text-align:center; opacity:.68; }
.tape { position:absolute; z-index:3; width:148px; height:46px; background:rgba(232,203,158,.78); box-shadow:0 2px 9px rgba(43,28,18,.12); backdrop-filter:blur(1px); }
.tape-a { top:-12px; left:55px; transform:rotate(-8deg); }
.tape-b { right:28px; bottom:30px; transform:rotate(7deg); }
.stamp { position:absolute; right:-58px; top:90px; width:110px; height:110px; border:3px double rgba(93,55,35,.55); border-radius:50%; display:grid; place-items:center; text-align:center; font:900 20px/1 Arial; color:rgba(93,55,35,.6); transform:rotate(12deg); }
.stamp small { font-size:8px; letter-spacing:.15em; }
.room-copy { max-width:690px; }
.kicker { color:#7b573f; margin:0 0 18px; }
.kicker.light { color:#efcda7; }
.room h2, .rules h2, .interlude h2, .note-panel h2, .final h2 { margin:0; font-family:Georgia, "Times New Roman", serif; font-weight:500; letter-spacing:-.045em; line-height:.96; }
.room h2 { font-size:clamp(64px, 5.3vw, 98px); }
.lead { margin:34px 0 22px; font:500 20px/1.65 "Segoe UI", sans-serif; color:#513b2e; max-width:650px; }
.note-copy { display:inline-block; margin:0 0 40px; padding:10px 14px; background:#d9b27f; transform:rotate(-1deg); font:800 13px/1.35 Consolas, monospace; }
.tiny-facts { border-top:1px solid var(--line); }
.tiny-facts>div { display:flex; justify-content:space-between; gap:20px; padding:15px 0; border-bottom:1px solid var(--line); font-size:12px; }
.tiny-facts span { text-transform:uppercase; letter-spacing:.14em; font-weight:800; opacity:.55; }
.tiny-facts b { font-weight:800; }

.rules { position:relative; min-height:1080px; color:#f6ebdf; overflow:hidden; }
.rules-bg { position:absolute; inset:-3%; background:url('../assets/background/cozy-room.png') center/cover no-repeat; transform:scale(1.05); filter:brightness(.48) saturate(.78) contrast(1.06); }
.rules-shade { position:absolute; inset:0; background:linear-gradient(110deg, rgba(28,19,14,.88) 0%, rgba(28,19,14,.64) 50%, rgba(28,19,14,.35) 100%); }
.rules-content { position:relative; z-index:2; min-height:1080px; }
.rules-title { max-width:930px; padding-top:28px; }
.rules h2 { font-size:clamp(70px, 6.5vw, 118px); }
.rule-notes { position:relative; min-height:480px; margin-top:50px; isolation:isolate; }
.note-card { position:absolute; z-index:4; width:310px; min-height:180px; padding:28px 28px 24px; background:#d8ad79; color:#271a12; box-shadow:0 24px 55px rgba(8,5,3,.3); border:1px solid rgba(61,40,25,.2); }
.note-card::before { content:""; position:absolute; top:-8px; left:50%; width:100px; height:24px; transform:translateX(-50%) rotate(-2deg); background:rgba(237,207,166,.7); }
.rule-character {
  position:absolute;
  z-index:2;
  pointer-events:none;
  opacity:.98;
  transform-origin:50% 80%;
  filter:drop-shadow(0 22px 22px rgba(7,4,2,.28));
  animation:ruleCharacterFloat 5.8s ease-in-out infinite;
}
.rule-character img { display:block; width:100%; height:auto; }
.rule-character::after { content:""; position:absolute; inset:12% 8% 5%; border-radius:50%; box-shadow:0 20px 45px rgba(0,0,0,.18); z-index:-1; }
.char-bag { left:4.4%; top:-92px; width:270px; animation-delay:-1.2s; transform:rotate(-2deg); }
.char-curtain { left:31%; top:-86px; width:225px; animation-delay:-3.5s; }
.char-snacks { right:25.5%; top:-112px; width:286px; animation-delay:-2.1s; }
.char-shush { right:7.5%; top:165px; width:245px; animation-delay:-4.2s; }
.character-whisper {
  position:absolute;
  left:-42px; top:-6px;
  color:#edd3b5;
  font:800 9px/1.25 Consolas, monospace;
  letter-spacing:.13em;
  transform:rotate(-8deg);
  opacity:.62;
}
@keyframes ruleCharacterFloat {
  0%,100% { translate:0 0; }
  50% { translate:0 -8px; }
}

.note-card span { font:900 10px/1 Consolas, monospace; opacity:.45; }
.note-card h3 { margin:18px 0 8px; font:500 32px/1 Georgia, serif; }
.note-card p { margin:0; font-size:14px; line-height:1.45; color:#5c402d; }
.n1 { left:3%; top:30px; transform:rotate(-3deg); }
.n2 { left:26%; top:120px; transform:rotate(2.4deg); background:#efd2a6; }
.n3 { right:25%; top:12px; transform:rotate(1deg); }
.n4 { right:2%; top:135px; transform:rotate(-2.3deg); background:#efc998; }
.watcher { position:absolute; right:9vw; bottom:54px; width:230px; height:90px; display:flex; gap:18px; align-items:flex-end; justify-content:center; opacity:.92; }
.watch-label { position:absolute; top:0; width:100%; text-align:center; font-size:8px; font-weight:900; letter-spacing:.15em; opacity:.5; }
.eye { width:66px; height:40px; border-radius:50%; background:#e7c598; position:relative; overflow:hidden; box-shadow:inset 0 0 0 4px rgba(70,46,30,.22); }
.eye i { position:absolute; left:50%; top:50%; width:22px; height:22px; border-radius:50%; background:#241711; transform:translate(-50%,-50%); transition:transform .06s linear; }
.eye i::after { content:""; position:absolute; width:6px; height:6px; border-radius:50%; background:#fff; left:4px; top:4px; opacity:.8; }

.interlude { min-height:820px; background:#d8b17e; display:grid; grid-template-columns:1fr 420px; align-items:center; gap:8vw; }
.interlude-copy { max-width:920px; }
.interlude h2 { font-size:clamp(68px, 6vw, 112px); }
.interlude-copy>p:last-child { max-width:650px; font-size:18px; line-height:1.6; color:#5c402d; }
.paper-stack { position:relative; width:360px; height:360px; }
.sheet { position:absolute; inset:25px; background:#d4a875; box-shadow:0 24px 54px rgba(72,44,27,.22); border:1px solid rgba(73,43,26,.18); }
.sheet-3 { transform:rotate(8deg) translate(18px,12px); background:#b88c62; }
.sheet-2 { transform:rotate(-5deg) translate(-12px,8px); background:#e0bb8b; }
.sheet-1 { display:grid; place-items:center; overflow:hidden; }
.sheet-1 span { font:500 170px/1 Georgia,serif; color:#3f2a1c; opacity:.7; }
.fold { position:absolute; top:0; right:0; width:110px; height:110px; background:linear-gradient(225deg, #c09365 0 49%, transparent 50%); }

.note-section { position:relative; min-height:940px; color:#f7ecdf; display:flex; align-items:center; overflow:hidden; }
.note-image { position:absolute; inset:-3%; background:url('../assets/background/cozy-room.png') center right/cover no-repeat; filter:saturate(.78) brightness(.75); transform:scale(1.05); }
.note-overlay { position:absolute; inset:0; background:linear-gradient(90deg, rgba(30,20,14,.93) 0%, rgba(30,20,14,.74) 45%, rgba(30,20,14,.12) 80%); }
.note-panel { position:relative; z-index:2; margin-left:7vw; width:min(690px, 46vw); padding:56px; background:rgba(43,29,21,.48); border:1px solid rgba(255,255,255,.16); backdrop-filter:blur(18px); box-shadow:0 40px 80px rgba(8,5,3,.2); }
.note-panel h2 { font-size:clamp(62px, 5vw, 94px); }
.note-panel>p:not(.kicker) { max-width:520px; margin:26px 0 36px; font-size:17px; line-height:1.6; color:rgba(255,240,225,.72); }
.note-links { border-top:1px solid rgba(255,255,255,.2); }
.large-link { display:flex; justify-content:space-between; align-items:center; min-height:78px; border-bottom:1px solid rgba(255,255,255,.2); font-size:14px; font-weight:900; letter-spacing:.14em; transition:padding .2s ease, background .2s ease; }
.large-link b { font-size:28px; font-weight:400; }
.large-link:hover { padding:0 16px; background:rgba(232,198,158,.11); }

.final { min-height:760px; background:#efe3d2; display:flex; flex-direction:column; justify-content:space-between; }
.final-top { display:grid; grid-template-columns:1fr 560px; gap:7vw; align-items:end; }
.final h2 { font-size:clamp(74px, 6.2vw, 116px); }
.final-ca { padding:36px; background:#d8b17e; border:1px solid rgba(63,42,27,.2); box-shadow:0 18px 50px rgba(57,36,22,.12); }
.final-ca>span { opacity:.48; }
.final-ca strong { display:block; margin:8px 0 24px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font:800 18px/1.3 Consolas, monospace; }
.final-ca .btn { width:100%; }
footer { margin-top:100px; padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; font-size:10px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; }
.footer-mid { opacity:.45; }

.reveal { opacity:0; transform:translateY(34px); transition:opacity .8s ease, transform .8s cubic-bezier(.22,.8,.24,1); }
.reveal.is-visible { opacity:1; transform:translateY(0); }
.delay-1 { transition-delay:.12s; }
.delay-2 { transition-delay:.22s; }
.delay-3 { transition-delay:.32s; }

.toast { position:fixed; left:50%; bottom:34px; z-index:1000; transform:translate(-50%, 24px); background:#241915; color:#f8eadb; padding:14px 20px; font-size:10px; font-weight:900; letter-spacing:.16em; opacity:0; pointer-events:none; transition:.25s ease; box-shadow:0 16px 40px rgba(0,0,0,.24); }
.toast.show { opacity:1; transform:translate(-50%,0); }

@media (max-width: 1500px) {
  .hero-copy { left:6vw; width:680px; }
  .hero h1 { font-size:108px; }
  .room-grid { gap:5vw; }
  .portrait-wrap { max-width:620px; }
  .note-card { width:280px; }
  .n2 { left:24%; }
  .n3 { right:24%; }
  .char-bag { width:235px; left:3%; top:-72px; }
  .char-curtain { width:195px; left:29%; top:-60px; }
  .char-snacks { width:245px; right:24%; top:-85px; }
  .char-shush { width:215px; right:6%; top:185px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}