:root {
  --ivory: #faf9f5;
  --sunk: #f4f2ec;
  --ink: #171a17;
  --ink2: #6d706b;
  --forest: #193f32;
  --forest2: #2e5c49;
  --sage: #88a77d;
  --leaf: #9fd08c;
  --walnut: #7a5a3e;
  --line: #e5e4de;
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans: "Inter", -apple-system, system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ivory); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0; letter-spacing: -0.015em; line-height: 0.98; }
em { font-style: italic; }
p { margin: 0; }
.kicker { font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(250, 249, 245, 0.78); }
.kicker.dark { color: var(--forest2); }

/* Top bar floats over the hero. */
.top { position: absolute; top: 0; left: 0; right: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; padding: 26px clamp(20px, 4vw, 56px); }
.word { display: flex; align-items: center; gap: 12px; text-decoration: none; font-size: 21px; letter-spacing: -0.02em; color: var(--ivory); }
.word img { filter: brightness(0) invert(1); opacity: 0.95; }
.word b { font-weight: 600; }
.status { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ivory); padding: 8px 14px; border-radius: 999px; background: rgba(250, 249, 245, 0.14); border: 1px solid rgba(250, 249, 245, 0.28); backdrop-filter: blur(14px); }
.status i { width: 7px; height: 7px; border-radius: 50%; background: var(--leaf); box-shadow: 0 0 10px var(--leaf); }

/* Hero: the walnut-and-forest backdrop the app itself uses. */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; color: var(--ivory); background: #3b3226; }
.backdrop { position: absolute; inset: -10%; filter: blur(60px) saturate(1.1); }
.backdrop span { position: absolute; border-radius: 50%; }
.b1 { width: 70vw; height: 70vw; left: -15vw; top: -25vw; background: radial-gradient(closest-side, #a7845f, transparent); animation: drift 22s ease-in-out infinite alternate; }
.b2 { width: 80vw; height: 80vw; right: -25vw; bottom: -40vw; background: radial-gradient(closest-side, #2e5c49, transparent); animation: drift 26s ease-in-out infinite alternate-reverse; }
.b3 { width: 50vw; height: 50vw; left: 30vw; top: 20vh; background: radial-gradient(closest-side, rgba(232, 222, 200, 0.55), transparent); animation: drift 30s ease-in-out infinite alternate; }
@keyframes drift { to { transform: translate(6vw, 4vh) scale(1.08); } }
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.18; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hero-in { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: 40px; width: min(1240px, calc(100% - 40px)); margin: 0 auto; padding: 120px 0 90px; }
.imagine { font-family: var(--serif); font-style: italic; font-size: clamp(40px, min(4.6vw, 8vh), 72px); line-height: 1; color: var(--leaf); }
h1 { font-size: clamp(46px, min(5.4vw, 9.6vh), 92px); line-height: 0.98; letter-spacing: -0.02em; margin: 10px 0 0; max-width: 16ch; }
h1 em { color: #f6efe0; }
h1 .w { color: #fffdf7; }
.sub { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.45; max-width: 34ch; margin-top: clamp(16px, 3vh, 28px); color: rgba(250, 249, 245, 0.92); }
.tally { display: inline-flex; align-items: center; gap: 10px; margin-top: clamp(14px, 3vh, 28px); font-size: 13.5px; color: rgba(250, 249, 245, 0.75); }
.tally i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--leaf); }

.fan { position: relative; height: min(640px, 70vh); }
.ph { position: absolute; margin: 0; width: min(270px, 22vw, 33vh); border-radius: 30px; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(10, 18, 12, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.25); transition: transform 1.2s cubic-bezier(.2, .8, .2, 1); }
.p1 { left: 2%; top: 14%; transform: rotate(-9deg); }
.p2 { left: 31%; top: 2%; z-index: 2; width: min(300px, 24vw, 37vh); }
.p3 { left: 62%; top: 16%; transform: rotate(8deg); }
.hero.in .p1 { transform: rotate(-11deg) translateX(-10px); }
.hero.in .p3 { transform: rotate(10deg) translateX(10px); }
.scroll { position: absolute; z-index: 3; left: 50%; bottom: 26px; transform: translateX(-50%); font-size: 13px; text-decoration: none; color: rgba(250, 249, 245, 0.75); letter-spacing: 0.04em; }
.scroll span { display: inline-block; margin-left: 6px; animation: bob 2s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(4px); } }

/* A day: pinned horizontal strip on wide screens. */
.day { position: relative; background: var(--ivory); }
.day-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: 20px 0; }
.day-head { width: min(1240px, calc(100% - 40px)); margin: 0 auto clamp(18px, 3.5vh, 36px); }
.day-head h2 { font-size: clamp(36px, min(4.6vw, 7vh), 68px); margin-top: 12px; }
.day-head h2 em { color: var(--forest2); }
.track { display: flex; gap: 26px; padding: 0 max(20px, calc((100vw - 1240px) / 2)); will-change: transform; }
.slot { flex: none; width: 330px; display: grid; grid-template-rows: auto auto 1fr auto; padding: 26px 26px 0; border-radius: 28px; background: var(--sunk); border: 1px solid var(--line); overflow: hidden; }
.slot .n { font-family: var(--serif); font-size: clamp(42px, 7vh, 58px); line-height: 1; color: var(--forest); letter-spacing: -0.02em; }
.slot h3 { font-size: clamp(25px, 3.8vh, 30px); margin-top: 10px; }
.slot p { margin-top: 10px; color: var(--ink2); font-size: 15px; }
.slot img { margin-top: 22px; border-radius: 22px 22px 0 0; box-shadow: 0 -10px 40px -20px rgba(25, 63, 50, 0.35); height: clamp(170px, 34vh, 320px); width: 100%; object-fit: cover; object-position: top; }
.slot.dark { background: #121412; border-color: #2b2f2b; color: #f1f0ea; }
.slot.dark .n { color: var(--leaf); }
.slot.dark p { color: #a6a9a2; }
.bar { width: min(1240px, calc(100% - 40px)); margin: clamp(16px, 3vh, 30px) auto 0; height: 2px; background: var(--line); border-radius: 2px; }
.bar i { display: block; height: 100%; width: 0; background: var(--forest); border-radius: 2px; }

/* The rule */
.rule { width: min(1240px, calc(100% - 40px)); margin: 0 auto; padding: 150px 0 120px; display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 70px; align-items: center; }
.rule h2 { font-size: clamp(48px, 5.6vw, 84px); margin-top: 18px; }
.rule h2 em { color: var(--forest2); }
.rule ol { list-style: none; counter-reset: r; margin: 40px 0 0; padding: 0; }
.rule li { counter-increment: r; display: grid; grid-template-columns: 44px 1fr; padding: 16px 0; border-top: 1px solid var(--line); font-size: 17px; }
.rule li::before { content: counter(r, decimal-leading-zero); font-family: var(--serif); font-size: 22px; color: var(--sage); line-height: 1.1; }
.desk { margin: 0; position: relative; }
.desk img { border-radius: 18px; box-shadow: 0 50px 100px -40px rgba(25, 63, 50, 0.55), 0 0 0 1px var(--line); transform: perspective(1600px) rotateY(-7deg) rotateX(2deg); transform-origin: left center; }
.desk figcaption { margin-top: 22px; font-size: 13px; color: var(--ink2); text-align: right; }

/* Index */
.index { width: min(1240px, calc(100% - 40px)); margin: 0 auto; padding: 40px 0 140px; }
.index h2 { font-size: clamp(44px, 5vw, 76px); max-width: 12ch; }
.index h2 em { color: var(--forest2); }
.index dl { margin: 56px 0 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 60px; }
.index dl div { display: grid; grid-template-columns: 150px 1fr; gap: 20px; padding: 18px 0; border-top: 1px solid var(--line); align-items: baseline; }
.index dt { font-family: var(--serif); font-size: 28px; line-height: 1; }
.index dd { margin: 0; color: var(--ink2); font-size: 15.5px; }
.fine { margin-top: 36px; color: var(--ink2); font-size: 15px; max-width: 60ch; }

/* Close */
.close { background: var(--forest); color: var(--ivory); text-align: center; padding: 130px 20px; display: flex; flex-direction: column; align-items: center; }
.close h2 { font-size: clamp(46px, 6vw, 92px); margin-top: 30px; }
.close h2 em { color: var(--leaf); }
.close p { max-width: 46ch; margin-top: 22px; color: rgba(250, 249, 245, 0.75); font-size: 17px; }
.btn { display: inline-flex; align-items: center; gap: 10px; margin-top: 36px; padding: 16px 26px; border-radius: 999px; background: var(--ivory); color: var(--forest); text-decoration: none; font-weight: 500; transition: transform .25s; }
.btn:hover { transform: translateY(-2px); }
.foot { display: flex; justify-content: space-between; padding: 26px clamp(20px, 4vw, 56px); background: #12302a; color: rgba(250, 249, 245, 0.6); font-size: 13px; }

/* Reveal */
[data-rv] { opacity: 0; transform: translateY(24px); transition: opacity .9s, transform .9s cubic-bezier(.2, .8, .2, 1); }
[data-rv].in { opacity: 1; transform: none; }

/* Narrow screens: no pinning, the strip swipes. */
@media (max-width: 900px) {
  .hero-in { grid-template-columns: 1fr; padding: 110px 0 80px; gap: 10px; }
  .fan { height: 420px; }
  .ph { width: 42vw; max-width: 200px; border-radius: 22px; }
  .p2 { width: 46vw; max-width: 220px; left: 28%; }
  .p1 { left: 0; } .p3 { left: auto; right: 0; }
  .day { height: auto !important; }
  .day-pin { position: static; height: auto; padding: 100px 0 40px; }
  .day-head { flex-direction: column; align-items: start; }
  .track { overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; transform: none !important; scrollbar-width: none; }
  .track::-webkit-scrollbar { display: none; }
  .slot { width: 78vw; max-width: 330px; scroll-snap-align: center; }
  .bar { display: none; }
  .rule { grid-template-columns: 1fr; padding: 90px 0; gap: 50px; }
  .desk img { transform: none; }
  .index dl { grid-template-columns: 1fr; }
  .index dl div { grid-template-columns: 120px 1fr; }
  .index dt { font-size: 24px; }
}
@media (max-width: 520px) {
  .top { padding: 18px 20px; }
  h1 { font-size: 11.2vw; }
  .status { font-size: 12px; padding: 6px 11px; }
  .word { font-size: 18px; }
  .foot { flex-direction: column; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-rv] { opacity: 1; transform: none; }
}