:root {
  --paper: #f2f1e9;
  --grid: rgba(51, 51, 47, .16);
  --ink: #2d2d2a;
  --coral: #ff4a4c;
  --sans: "DM Sans", Arial, sans-serif;
  --serif: "DM Serif Display", Georgia, serif;
}

* { box-sizing: border-box; }
html { background: var(--paper); }
body { min-width: 320px; margin: 0; background-color: var(--paper); background-image: linear-gradient(to right, var(--grid) 1px, transparent 1px), linear-gradient(to bottom, var(--grid) 1px, transparent 1px); background-size: 30px 30px; color: var(--ink); font-family: var(--sans); }
.flyer-site { min-height: 100svh; display: grid; place-items: center; padding: 0; }
.flyer { position: relative; width: min(100vw, 736px); min-height: min(100svh, 920px); overflow: hidden; background: transparent; }
.flyer-header { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 62px 50px 0; font-size: 18px; line-height: 1; }
.flyer-header a { color: inherit; text-decoration: none; }
.globe { display: inline-grid; place-items: center; width: 25px; height: 25px; margin-right: 3px; border: 1.5px solid currentColor; border-radius: 50%; font-size: 24px; line-height: .5; vertical-align: -4px; }
.flyer-copy { position: relative; z-index: 2; padding-top: 75px; text-align: center; }
h1 { margin: 0; font-family: var(--serif); font-size: clamp(6rem, 17.8vw, 9.7rem); font-weight: 400; line-height: .8; letter-spacing: -.06em; }
h1 em { color: var(--coral); font-style: normal; }
.subtitle { margin: 30px 0 0; font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; line-height: 1; letter-spacing: -.06em; }
.coming-soon { position: relative; z-index: 3; display: flex; align-items: center; justify-content: center; min-height: 52px; width: max-content; max-width: calc(100% - 32px); margin: 34px auto 0; border: 1px solid var(--ink); padding: 0 22px; background: rgba(242, 241, 233, .92); box-shadow: 0 10px 24px rgba(45, 45, 42, .16); color: var(--ink); font: 500 clamp(1.08rem, 2.6vw, 1.55rem)/1 var(--sans); cursor: pointer; transition: background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease; }
.coming-soon:hover { border-color: var(--coral); background: var(--coral); box-shadow: 0 14px 28px rgba(45, 45, 42, .2); color: var(--paper); transform: translateY(-4px); }
.coming-soon:focus-visible, .waitlist-close:focus-visible, .waitlist-form input:focus-visible, .waitlist-form button:focus-visible { outline: 2px solid var(--coral); outline-offset: 4px; }
.portrait { position: absolute; z-index: 1; right: 0; bottom: 0; left: 0; height: 48%; margin: 0; text-align: center; }
.portrait::before { display: none; }
.portrait picture { display: block; height: 100%; }
.portrait img { display: block; width: 82%; height: 100%; margin: auto; object-fit: contain; object-position: center bottom; }
.portrait:focus-visible { outline: 2px solid var(--coral); outline-offset: -8px; }
.portrait-reveal { position: absolute; z-index: 2; right: auto; bottom: clamp(10px, 4%, 32px); left: clamp(8px, 3%, 24px); width: min(248px, calc(42% - 12px)); max-height: min(360px, calc(100svh - 170px)); overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: clamp(15px, 2.5vw, 20px) clamp(16px, 2.8vw, 22px) clamp(14px, 2.3vw, 18px); border: 1px solid rgba(45, 45, 42, .72); border-radius: 6px; background-color: rgba(242, 241, 233, .97); background-image: linear-gradient(to right, var(--grid) 1px, transparent 1px), linear-gradient(to bottom, var(--grid) 1px, transparent 1px); background-size: 30px 30px; box-shadow: 14px 18px 40px rgba(45, 45, 42, .2); scrollbar-color: rgba(45, 45, 42, .4) transparent; scrollbar-width: thin; text-align: left; opacity: 0; visibility: hidden; transform: translate(18px, 16px) rotate(-2deg) scale(.82); transform-origin: bottom left; transition: opacity .22s ease, transform .42s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .42s; pointer-events: none; }
.portrait-reveal::after { position: absolute; right: clamp(18px, 10%, 28px); bottom: -9px; width: 16px; height: 16px; border-right: 1px solid rgba(45, 45, 42, .72); border-bottom: 1px solid rgba(45, 45, 42, .72); background: var(--paper); content: ""; transform: rotate(45deg); }
.portrait-reveal::before { position: absolute; top: 13px; right: 14px; width: 7px; height: 7px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 4px rgba(255, 74, 76, .12); content: ""; }
.portrait-reveal-kicker { margin: 0 0 clamp(8px, 1.8vw, 12px); padding-right: 12px; color: var(--coral); font-size: clamp(.58rem, .86vw, .65rem); font-weight: 700; line-height: 1.2; letter-spacing: .16em; text-transform: uppercase; }
.portrait-reveal h2 { margin: 0; font-family: var(--serif); font-size: clamp(1.7rem, 4.3vw, 2.65rem); font-weight: 400; line-height: .84; letter-spacing: -.06em; }
.portrait-reveal h2 em { color: var(--coral); font-style: normal; }
.portrait-reveal ul { display: grid; gap: clamp(4px, 1.1vw, 7px); margin: clamp(12px, 2.2vw, 18px) 0 0; padding: 0; list-style: none; }
.portrait-reveal li { display: flex; align-items: baseline; gap: clamp(6px, 1.4vw, 10px); border-top: 1px solid var(--grid); padding-top: clamp(6px, 1.1vw, 8px); font-size: clamp(.68rem, 1.25vw, .78rem); line-height: 1.2; }
.portrait-reveal li span { color: var(--coral); font-size: .68rem; font-weight: 700; letter-spacing: .1em; }
.portrait-reveal li strong { min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
@media (hover: hover) {
  .portrait { cursor: zoom-in; }
  .portrait img { transition: transform .55s cubic-bezier(.22, 1, .36, 1), filter .55s ease; transform-origin: center bottom; }
  .portrait:hover img { transform: translateY(-8px) scale(1.035); filter: saturate(1.06) contrast(1.03); }
  .portrait:hover .portrait-reveal, .portrait:focus-visible .portrait-reveal { opacity: 1; visibility: visible; transform: translate(0, 0) rotate(-2deg) scale(1); transition-delay: 0s; }
}
@media (hover: none) {
  .portrait { cursor: pointer; }
  .portrait.is-revealed .portrait-reveal { opacity: 1; visibility: visible; transform: translate(0, 0) rotate(-2deg) scale(1); transition-delay: 0s; }
}
.waitlist { position: fixed; z-index: 10; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(45, 45, 42, .28); backdrop-filter: blur(5px); }
.waitlist[hidden] { display: none; }
.waitlist-card { position: relative; width: min(100%, 430px); max-height: calc(100svh - 48px); overflow-y: auto; padding: 38px; background-color: var(--paper); background-image: linear-gradient(to right, var(--grid) 1px, transparent 1px), linear-gradient(to bottom, var(--grid) 1px, transparent 1px); background-size: 30px 30px; box-shadow: 0 20px 70px rgba(45, 45, 42, .22); }
.waitlist.is-open .waitlist-card { animation: waitlist-in .28s cubic-bezier(.22, 1, .36, 1) both; }
.waitlist-kicker { margin: 0 0 18px; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; }
.waitlist-card h2 { margin: 0; font-family: var(--serif); font-size: clamp(3rem, 10vw, 4.6rem); font-weight: 400; line-height: .84; letter-spacing: -.06em; }
.waitlist-card h2 em { color: var(--coral); font-style: normal; }
.waitlist-copy { max-width: 31ch; margin: 24px 0 0; font-size: .96rem; line-height: 1.45; }
.waitlist-close { position: absolute; top: 12px; right: 15px; width: 32px; height: 32px; padding: 0; border: 0; background: transparent; color: var(--ink); font: 400 2rem/1 Arial, sans-serif; cursor: pointer; }
.waitlist-form { display: grid; gap: 14px; margin-top: 24px; }
.waitlist-field { display: grid; gap: 7px; color: var(--ink); font-size: .72rem; font-weight: 700; letter-spacing: .04em; }
.waitlist-form input:not([type="checkbox"]), .waitlist-form select, .waitlist-form textarea, .waitlist-form button { width: 100%; min-height: 48px; border: 1px solid var(--ink); padding: 12px 14px; font: 500 .95rem/1.25 var(--sans); }
.waitlist-form input:not([type="checkbox"]), .waitlist-form select, .waitlist-form textarea { background: rgba(242, 241, 233, .75); color: var(--ink); }
.waitlist-form select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 18px) 21px, calc(100% - 12px) 21px; background-repeat: no-repeat; background-size: 6px 6px, 6px 6px; cursor: pointer; }
.waitlist-form textarea { min-height: 88px; resize: vertical; }
.waitlist-form input::placeholder, .waitlist-form textarea::placeholder { color: rgba(45, 45, 42, .58); }
.waitlist-consent { display: flex; align-items: flex-start; gap: 9px; font-size: .78rem; line-height: 1.3; }
.waitlist-consent input { flex: 0 0 auto; width: 17px; height: 17px; min-height: 17px; margin: 1px 0 0; accent-color: var(--coral); }
.waitlist-form button { border-color: var(--coral); background: var(--coral); color: var(--paper); cursor: pointer; }
.waitlist-form button:hover { background: var(--ink); border-color: var(--ink); }
.waitlist-status { min-height: 1.4em; margin: 12px 0 0; font-size: .82rem; line-height: 1.35; }
.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; }
body.waitlist-open { overflow: hidden; }
@keyframes waitlist-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (min-width: 1200px) {
  .flyer { width: min(100vw, clamp(736px, 54vw, 1040px)); min-height: 100svh; }
  .flyer-header { padding: clamp(50px, 5vw, 72px) clamp(50px, 5.5vw, 72px) 0; font-size: clamp(18px, 1.4vw, 22px); }
  .flyer-copy { padding-top: clamp(75px, 8vh, 112px); }
  h1 { font-size: clamp(6rem, 10.5vw, 11rem); }
  .subtitle { margin-top: clamp(28px, 3vw, 38px); font-size: clamp(2rem, 3.2vw, 3.4rem); }
  .coming-soon { margin-top: clamp(30px, 4.5vh, 48px); font-size: clamp(1.15rem, 1.8vw, 1.55rem); }
  .portrait { bottom: clamp(-46px, -4vh, -20px); height: 48%; }
  .portrait img { width: 70%; }
  .portrait-reveal { bottom: clamp(44px, 7%, 72px); left: clamp(16px, 4%, 40px); width: min(280px, calc(38% - 12px)); }
}
@media (max-width: 600px) {
  .flyer-site { display: block; }
  .flyer { width: 100%; min-height: 100svh; }
  .flyer-header { gap: 12px; padding: 30px 24px 0; font-size: 13px; }
  .flyer-header > span, .flyer-header > a { white-space: nowrap; }
  .globe { width: 19px; height: 19px; font-size: 18px; vertical-align: -3px; }
  .flyer-copy { padding-top: 48px; }
  h1 { font-size: clamp(4.8rem, 21vw, 8rem); }
  .subtitle { margin-top: 23px; font-size: clamp(1.55rem, 7vw, 2.5rem); }
  .coming-soon { min-height: 48px; margin-top: 14px; padding: 0 18px; font-size: 1rem; }
  .portrait { height: 65%; }
  .portrait img { width: 100%; object-fit: cover; object-position: center top; }
  .portrait-reveal { right: clamp(12px, 5vw, 18px); bottom: clamp(8px, 4%, 24px); left: auto; width: min(250px, calc(100% - 24px)); max-height: min(320px, calc(100svh - 170px)); padding: clamp(15px, 5vw, 18px) clamp(16px, 5vw, 20px) clamp(14px, 4.5vw, 17px); transform: translate(10px, 16px) rotate(-2deg) scale(.82); transform-origin: bottom right; }
  .portrait-reveal h2 { font-size: clamp(1.85rem, 10vw, 2.6rem); }
  .portrait-reveal li { font-size: clamp(.68rem, 3.1vw, .78rem); }
  .waitlist { padding: 16px; }
  .waitlist-card { max-height: calc(100dvh - 32px); padding: 32px 22px 24px; padding-bottom: max(24px, env(safe-area-inset-bottom)); }
  .waitlist-form input:not([type="checkbox"]), .waitlist-form select, .waitlist-form textarea { font-size: 16px; }
}
@media (max-width: 600px) and (max-height: 700px) {
  .flyer-header { gap: 8px; padding: 22px 16px 0; font-size: 11px; }
  .globe { width: 16px; height: 16px; margin-right: 1px; font-size: 15px; }
  .flyer-copy { padding-top: 30px; }
  h1 { font-size: clamp(4rem, 20vw, 6rem); }
  .subtitle { margin-top: 16px; font-size: clamp(1.3rem, 6.5vw, 2rem); }
  .coming-soon { min-height: 44px; margin-top: 12px; padding: 0 14px; font-size: .9rem; }
  .portrait { height: 56%; }
  .portrait-reveal { right: 10px; bottom: 8px; width: min(238px, calc(100% - 20px)); max-height: min(270px, calc(100svh - 126px)); }
}

.roadmap-body { min-width: 320px; }
.roadmap-page { min-height: 100svh; padding: 28px; }
.roadmap-shell { width: min(100%, 1120px); margin: 0 auto; padding: clamp(24px, 5vw, 58px); border: 1px solid rgba(45, 45, 42, .34); background-color: rgba(242, 241, 233, .92); background-image: linear-gradient(to right, var(--grid) 1px, transparent 1px), linear-gradient(to bottom, var(--grid) 1px, transparent 1px); background-size: 30px 30px; box-shadow: 0 24px 80px rgba(45, 45, 42, .14); }
.roadmap-header, .roadmap-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: .82rem; }
.roadmap-header a, .roadmap-footer a { color: inherit; text-decoration: none; }
.roadmap-header a:first-child { font-weight: 700; }
.roadmap-header a:hover, .roadmap-footer a:hover { color: var(--coral); }
.roadmap-intro { max-width: 620px; padding-top: clamp(70px, 10vw, 116px); }
.roadmap-kicker { margin: 0 0 18px; color: var(--coral); font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.roadmap-intro h1 { margin: 0; font-size: clamp(4.7rem, 11vw, 8.4rem); line-height: .79; }
.roadmap-intro h1 em { color: var(--coral); font-style: normal; }
.roadmap-intro > p:last-child { max-width: 43ch; margin: 30px 0 0; font-size: clamp(1rem, 2.2vw, 1.3rem); line-height: 1.3; }
.roadmap-city-link { display: inline-flex; align-items: center; min-height: 46px; margin-top: 24px; border: 1px solid var(--ink); padding: 0 16px; color: var(--ink); font-size: .88rem; font-weight: 700; text-decoration: none; transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease; }
.roadmap-city-link:hover { border-color: var(--coral); background: var(--coral); color: var(--paper); transform: translateY(-2px); }
.roadmap-map { position: relative; min-height: 620px; aspect-ratio: 3 / 2; margin-top: 70px; overflow: hidden; border-top: 1px solid var(--grid); border-bottom: 1px solid var(--grid); }
.roadmap-route { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.map-blocks rect { fill: rgba(45, 45, 42, .035); stroke: rgba(45, 45, 42, .18); stroke-width: 2; }
.map-side-roads path { fill: none; stroke: rgba(45, 45, 42, .16); stroke-width: 24; stroke-linecap: round; stroke-linejoin: round; }
.map-road use { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.map-road .road-shadow { stroke: rgba(45, 45, 42, .18); stroke-width: 108; transform: translate(5px, 8px); }
.map-road .road-edge { stroke: var(--paper); stroke-width: 100; }
.map-road .road-surface { stroke: var(--ink); stroke-width: 84; }
.map-road .road-divider { stroke: var(--paper); stroke-width: 1.5; stroke-dasharray: 2 15; opacity: .42; }
.map-road .road-center { stroke: var(--coral); stroke-width: 7; }
.map-arrows path { fill: var(--paper); opacity: .76; }
.map-node-rings circle { fill: none; stroke: var(--coral); stroke-width: 3; stroke-dasharray: 2 7; opacity: .72; }
.map-labels text { fill: var(--ink); font: 700 12px var(--sans); letter-spacing: 2px; opacity: .56; }
.roadmap-legend { position: absolute; z-index: 1; top: 22px; left: 24px; display: flex; flex-wrap: wrap; gap: 14px; color: rgba(45, 45, 42, .66); font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.roadmap-legend span { display: inline-flex; align-items: center; gap: 7px; }
.roadmap-legend i { display: inline-block; width: 20px; height: 3px; }
.legend-route { background: var(--coral); }
.legend-stop { width: 10px !important; height: 10px !important; border: 2px solid var(--paper); border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 1px var(--coral); }
.roadmap-compass { position: absolute; z-index: 1; right: 24px; bottom: 22px; display: grid; justify-items: center; gap: 5px; color: rgba(45, 45, 42, .66); font-size: .66rem; font-weight: 700; }
.roadmap-compass i { display: block; width: 1px; height: 28px; background: var(--ink); }
.roadmap-compass i::before { display: block; width: 0; height: 0; border-right: 4px solid transparent; border-bottom: 7px solid var(--coral); border-left: 4px solid transparent; content: ""; transform: translate(-3.5px, -1px); }
.roadmap-stops { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.roadmap-stop { position: absolute; }
.stop-marker { position: absolute; z-index: 2; display: grid; width: 46px; height: 46px; place-items: center; border: 3px solid var(--paper); border-radius: 50%; background: var(--coral); color: var(--paper); font-size: .7rem; font-weight: 700; box-shadow: 0 0 0 1px var(--coral), 0 8px 18px rgba(45, 45, 42, .22); transform: translate(-50%, -50%); }
.stop-card { position: absolute; width: 176px; padding: 15px 17px 14px; border: 1px solid rgba(45, 45, 42, .52); background: rgba(242, 241, 233, .96); box-shadow: 8px 10px 20px rgba(45, 45, 42, .12); transform: translate(-50%, -50%); transition: transform .2s ease, box-shadow .2s ease; }
.stop-card:hover { box-shadow: 12px 15px 26px rgba(45, 45, 42, .18); transform: translate(-50%, -50%) translateY(-4px); }
.stop-card p { margin: 0 0 8px; color: var(--coral); font-size: .64rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.stop-card h2 { margin: 0; font-size: 1.15rem; line-height: .95; letter-spacing: -.04em; }
.stop-card > span { display: block; margin-top: 13px; color: rgba(45, 45, 42, .66); font-size: .72rem; }
.stop-card-active { border-color: var(--coral); }
.stop-card-finish { border-color: var(--ink); }
.stop-card a { position: absolute; inset: 0; }
.stop-one { left: 6%; top: 90%; }
.stop-ten { left: 28%; top: 68%; }
.stop-twenty-five { left: 46%; top: 61%; }
.stop-forty { left: 59%; top: 48%; }
.stop-fifty-five { left: 69%; top: 27%; }
.stop-seventy-five { left: 86%; top: 25%; }
.stop-hundred { left: 93%; top: 14%; }
.stop-one .stop-card { left: 90px; top: -60px; }
.stop-ten .stop-card { left: -90px; top: -88px; }
.stop-twenty-five .stop-card { left: 90px; top: 83px; }
.stop-forty .stop-card { left: -90px; top: -90px; }
.stop-fifty-five .stop-card { left: -125px; top: -100px; }
.stop-seventy-five .stop-card { left: -45px; top: -104px; }
.stop-hundred .stop-card { left: 30px; top: 102px; }
.roadmap-footer { margin-top: 22px; color: rgba(45, 45, 42, .72); }
@media (max-width: 700px) {
  .roadmap-page { padding: 16px; }
  .roadmap-shell { padding: 24px 18px; }
  .roadmap-header, .roadmap-footer { align-items: flex-start; flex-direction: column; gap: 9px; }
  .roadmap-intro { padding-top: 64px; }
  .roadmap-intro h1 { max-width: 100%; font-size: clamp(3.65rem, 16vw, 5.2rem); }
  .roadmap-map { min-height: 0; height: clamp(820px, 220vw, 1120px); aspect-ratio: auto; margin-top: 56px; }
  .roadmap-legend { top: 16px; left: 16px; max-width: 70%; gap: 8px 12px; font-size: .58rem; }
  .roadmap-compass { right: 16px; bottom: 18px; }
  .map-labels text { font-size: 10px; letter-spacing: 1.4px; }
  .stop-marker { width: 40px; height: 40px; font-size: .64rem; }
  .stop-card { width: 165px; padding: 13px 14px 12px; }
  .stop-card h2 { font-size: 1.05rem; }
  .stop-one { left: 48%; top: 90%; }
  .stop-ten { left: 66%; top: 59%; }
  .stop-twenty-five { left: 39%; top: 46%; }
  .stop-forty { left: 66%; top: 33%; }
  .stop-fifty-five { left: 42%; top: 25%; }
  .stop-seventy-five { left: 63%; top: 17%; }
  .stop-hundred { left: 63%; top: 8%; }
  .stop-one .stop-card { left: 80px; top: -28px; }
  .stop-ten .stop-card { left: -50px; top: 35px; }
  .stop-twenty-five .stop-card { left: 70px; top: 31px; }
  .stop-forty .stop-card { left: -70px; top: 31px; }
  .stop-fifty-five .stop-card { left: -45px; top: 20px; }
  .stop-seventy-five .stop-card { left: 45px; top: 35px; }
  .stop-hundred .stop-card { left: -70px; top: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .portrait img, .portrait-reveal { transition: none; }
}

.day-one-body { min-width: 320px; }
.day-one-page { min-height: 100svh; display: grid; place-items: center; padding: 28px; }
.day-one-card { width: min(100%, 760px); padding: clamp(24px, 6vw, 64px); border: 1px solid rgba(45, 45, 42, .35); background-color: rgba(242, 241, 233, .94); background-image: linear-gradient(to right, var(--grid) 1px, transparent 1px), linear-gradient(to bottom, var(--grid) 1px, transparent 1px); background-size: 30px 30px; box-shadow: 0 24px 80px rgba(45, 45, 42, .16); }
.day-one-header, .day-one-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: .82rem; }
.day-one-brand, .day-one-footer a { color: inherit; text-decoration: none; }
.day-one-brand { font-weight: 700; }
.day-one-counter { color: rgba(45, 45, 42, .64); }
.day-one-intro { max-width: 570px; padding-top: clamp(58px, 9vw, 100px); }
.day-one-kicker, .day-one-task-number { margin: 0 0 18px; color: var(--coral); font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.day-one-intro h1 { margin: 0; font-size: clamp(5rem, 14vw, 9rem); line-height: .78; }
.day-one-intro h1 em { color: var(--coral); font-style: normal; }
.day-one-lede { max-width: 34ch; margin: 32px 0 0; font-size: clamp(1.2rem, 2.8vw, 1.65rem); line-height: 1.15; letter-spacing: -.04em; }
.day-one-task { max-width: 570px; margin-top: clamp(54px, 8vw, 86px); border-top: 1px solid var(--ink); padding-top: 24px; }
.day-one-task h2 { max-width: 21ch; margin: 0; font-size: clamp(1.65rem, 4vw, 2.5rem); line-height: .98; letter-spacing: -.05em; }
.day-one-task > p:not(.day-one-task-number) { max-width: 48ch; margin: 18px 0 0; font-size: .98rem; line-height: 1.5; }
.day-one-form { display: grid; gap: 10px; margin-top: 26px; }
.day-one-form label { font-size: .72rem; font-weight: 700; letter-spacing: .04em; }
.day-one-form textarea { width: 100%; min-height: 126px; resize: vertical; border: 1px solid var(--ink); padding: 14px; background: rgba(242, 241, 233, .72); color: var(--ink); font: 500 .98rem/1.4 var(--sans); }
.day-one-form textarea:focus-visible { outline: 2px solid var(--coral); outline-offset: 4px; }
.day-one-form textarea::placeholder { color: rgba(45, 45, 42, .58); }
.day-one-form button { width: fit-content; border: 1px solid var(--ink); padding: 13px 18px; background: var(--ink); color: var(--paper); font: 700 .9rem/1 var(--sans); cursor: pointer; transition: background .2s ease, color .2s ease; }
.day-one-form button:hover { border-color: var(--coral); background: var(--coral); }
.day-one-status { min-height: 1.3em; margin: 13px 0 0; color: var(--coral); font-size: .84rem; }
.day-one-footer { margin-top: clamp(56px, 9vw, 100px); border-top: 1px solid var(--grid); padding-top: 18px; color: rgba(45, 45, 42, .72); }
.day-one-footer a:hover { color: var(--coral); }
@media (max-width: 600px) {
  .day-one-page { padding: 16px; }
  .day-one-card { padding: 24px 20px; }
  .day-one-header, .day-one-footer { align-items: flex-start; flex-direction: column; gap: 8px; }
  .day-one-intro { padding-top: 62px; }
  .day-one-lede { margin-top: 26px; }
  .day-one-task { margin-top: 52px; }
}