@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Serif+Display:ital@0;1&family=Manrope:wght@400;500;600;700&display=swap');

:root { --ink: #f7f1e7; --paper: #f7f2e9; --dark: #0d1c28; --muted: #5d6667; --gold: #d1a45d; --bg-image: none; }
* { box-sizing: border-box; }
html { background: var(--dark); }
body { margin: 0; color: var(--dark); font-family: Manrope, Arial, sans-serif; background: var(--paper); }
.shell { min-height: 100vh; }
.hero { position: relative; isolation: isolate; min-height: 610px; padding: clamp(2rem, 6vw, 5rem) max(1.4rem, calc((100vw - 1170px)/2)); color: var(--ink); display: flex; flex-direction: column; justify-content: center; overflow: hidden; background: #0d1c28 var(--bg-image) center / cover no-repeat; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(7, 19, 29, .88) 0%, rgba(7, 19, 29, .60) 45%, rgba(7, 19, 29, .18) 100%); }
.hero::after { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 170px; background: linear-gradient(transparent, rgba(7, 19, 29, .55)); }
.eyebrow { margin: 0 0 .8rem; color: var(--gold); font: 500 .7rem/1.4 "DM Mono", monospace; letter-spacing: .16em; text-transform: uppercase; }
h1, h2 { margin: 0; font-family: "DM Serif Display", Georgia, serif; font-weight: 400; }
h1 { max-width: 670px; font-size: clamp(5rem, 13vw, 10.5rem); line-height: .75; letter-spacing: -.065em; }
h1 em { color: var(--gold); }
.intro { max-width: 370px; margin: 2.2rem 0 0; font-size: 1rem; line-height: 1.7; }
.current { display: inline-flex; align-items: center; gap: .65rem; margin-top: 2.6rem; width: fit-content; padding: .65rem 1rem; border: 1px solid rgba(247,241,231,.36); background: rgba(4,14,23,.30); font-size: .78rem; font-weight: 700; backdrop-filter: blur(6px); }
.current::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 5px rgba(209,164,93,.22); }
.content { max-width: 1170px; margin: 0 auto; padding: clamp(3.2rem, 7vw, 6.3rem) 1.4rem 5rem; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 2.25rem; }
.section-heading .eyebrow { color: #9c6f2c; }
h2 { font-size: clamp(2.4rem, 5vw, 4.3rem); letter-spacing: -.045em; line-height: .95; }
.release-note { max-width: 230px; margin: 0 0 .35rem; color: var(--muted); font-size: .78rem; line-height: 1.55; }
.weeks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.week { position: relative; min-height: 270px; padding: 1.7rem; border: 1px solid #dcd4c7; background: #fffdf8; display: flex; flex-direction: column; transition: transform .18s ease, box-shadow .18s ease; }
.week:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(13,28,40,.10); }
.week-number { margin: 0 0 1.4rem; color: #9c6f2c; font: 500 .7rem/1 "DM Mono", monospace; letter-spacing: .11em; text-transform: uppercase; }
.week h3 { max-width: 420px; margin: 0; font: 400 clamp(1.7rem, 3vw, 2.45rem)/.97 "DM Serif Display", Georgia, serif; letter-spacing: -.04em; }
.resources { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: auto; padding-top: 2rem; }
.resource { display: inline-flex; align-items: center; gap: .4rem; padding: .68rem .78rem; color: var(--dark); border: 1px solid #c8bda9; text-decoration: none; font-size: .72rem; font-weight: 700; transition: .15s; }
.resource:hover { color: #fff; border-color: var(--dark); background: var(--dark); }
.resource::after { content: "↗"; font-size: .9rem; line-height: 0; }
.week--current { color: var(--ink); border: 0; background: #0d1c28 var(--week-image) center / cover no-repeat; }
.week--current::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(7,19,29,.91), rgba(7,19,29,.40)); }
.week--current > * { position: relative; }
.week--current .week-number { color: var(--gold); }
.week--current .resource { color: var(--ink); border-color: rgba(247,241,231,.48); background: rgba(13,28,40,.2); }
.week--current .resource:hover { color: var(--dark); border-color: var(--paper); background: var(--paper); }
footer { padding: 1.5rem; color: #d5cab8; background: var(--dark); font: .67rem/1 "DM Mono", monospace; letter-spacing: .11em; text-align: center; text-transform: uppercase; }
footer span { padding: 0 .45rem; color: var(--gold); }
@media (max-width: 680px) { .hero { min-height: 550px; } .hero::before { background: linear-gradient(90deg, rgba(7,19,29,.88), rgba(7,19,29,.45)); } .section-heading { align-items: start; flex-direction: column; gap: .8rem; } .weeks { grid-template-columns: 1fr; } .week { min-height: 245px; } }