:root { --paper:#f6f1e5; --gray:#c8c8c8; --blue:#123fe8; --yellow:#fff15a; --ink:#171717; --muted:#686868; --red:#df5b48; --shadow:5px 5px 0 var(--ink); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background-color:var(--paper); background-image:radial-gradient(#d7d0bf 0.75px, transparent .75px); background-size:12px 12px; font-family:Arial, Helvetica, sans-serif; line-height:1.5; }
a { color:inherit; }
button, input, textarea, select { font:inherit; }
button, a { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:3px solid var(--blue); outline-offset:3px; }
.skip-link { position:fixed; top:0; left:1rem; z-index:10; padding:.5rem 1rem; transform:translateY(-110%); background:var(--yellow); border:2px solid var(--ink); }
.skip-link:focus { transform:translateY(0); }
.site-shell { width:min(1160px, calc(100% - 2rem)); margin:auto; }
.site-header { min-height:86px; display:flex; align-items:center; justify-content:space-between; gap:1rem; border-bottom:2px solid var(--ink); }
.wordmark { margin:0; text-decoration:none; font-family:Georgia, 'Times New Roman', serif; font-size:clamp(2rem, 4vw, 2.7rem); font-weight:bold; letter-spacing:-.1em; }
.wordmark span { font:700 .55rem 'Courier New', monospace; vertical-align:top; letter-spacing:0; }
nav { display:flex; align-items:center; gap:1.25rem; font:700 .78rem 'Courier New', monospace; text-transform:uppercase; }
nav a:not(.nav-cta) { text-decoration:underline; text-underline-offset:4px; }
.nav-cta { padding:.5rem .7rem; background:var(--yellow); border:2px solid var(--ink); box-shadow:3px 3px 0 var(--ink); text-decoration:none; }
.menu-toggle { display:none; padding:.45rem .65rem; color:var(--ink); background:var(--gray); border:2px solid var(--ink); font:700 .75rem 'Courier New', monospace; text-transform:uppercase; }
.hero { display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(360px, .95fr); align-items:center; gap:4rem; min-height:calc(100vh - 86px); padding:5.5rem 1.5rem 5rem; }
.status, .eyebrow, .file-label, .memory-date { font:700 .7rem 'Courier New', monospace; letter-spacing:.05em; text-transform:uppercase; }
.status { display:inline-block; margin:0 0 1.5rem; padding:.32rem .55rem; background:var(--gray); border:1px solid var(--ink); }
.status span { color:var(--red); }
.eyebrow { margin:0 0 .65rem; color:var(--blue); }
h1, h2, h3, p { margin-top:0; }
h1, h2 { font-family:Georgia, 'Times New Roman', serif; line-height:.98; letter-spacing:-.055em; }
h1 { max-width:600px; margin-bottom:1.35rem; font-size:clamp(3.4rem, 7vw, 6.35rem); }
h1 em { color:var(--blue); font-weight:normal; }
h2 { font-size:clamp(2.4rem, 5vw, 4.25rem); }
.intro { max-width:510px; font-size:1.125rem; }
.button-row { display:flex; align-items:center; flex-wrap:wrap; gap:1.4rem; margin-top:2rem; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:.7rem; padding:.8rem 1rem; border:2px solid var(--ink); box-shadow:4px 4px 0 var(--ink); color:var(--ink); font:700 .76rem 'Courier New', monospace; text-decoration:none; text-transform:uppercase; cursor:pointer; }
.button:hover, .nav-cta:hover { transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }
.button.primary { background:var(--yellow); }
.button.secondary { background:var(--gray); }
.button:disabled { cursor:not-allowed; opacity:.55; transform:none; box-shadow:2px 2px 0 var(--ink); }
.text-link { color:var(--blue); font-weight:bold; text-underline-offset:4px; }
.fine-print, .footer-note, .form-note { color:var(--muted); font-size:.82rem; }
.fine-print { margin-top:1.2rem; }
.hero-art { position:relative; min-height:390px; }
.window { border:2px solid var(--ink); background:var(--gray); box-shadow:var(--shadow); }
.memory-window { position:absolute; z-index:2; top:2rem; right:1rem; width:min(100%, 390px); transform:rotate(2deg); }
.window-bar { display:flex; justify-content:space-between; gap:1rem; padding:.32rem .45rem; border-bottom:2px solid var(--ink); background:var(--blue); color:#fff; font:700 .68rem 'Courier New', monospace; letter-spacing:.05em; }
.window-controls { letter-spacing:.25em; white-space:nowrap; }
.memory-content { padding:1.4rem; background:#fffdf6; }
.file-label, .memory-date { margin-bottom:.55rem; color:var(--muted); font-size:.6rem; }
.memory-content h2 { margin-bottom:.35rem; font-size:2rem; }
.memory-content p:not(.file-label):not(.memory-date) { font-family:Georgia, serif; font-size:1.02rem; line-height:1.45; }
.audio-bar { display:flex; align-items:center; gap:.6rem; margin-top:1.25rem; font:700 .65rem 'Courier New', monospace; }
.audio-bar i { display:block; flex:1; height:6px; background:var(--blue); background-image:linear-gradient(90deg, var(--ink) 28%, var(--blue) 28%); }
.photo-card { position:absolute; bottom:1rem; left:0; display:flex; flex-direction:column; justify-content:center; align-items:center; width:175px; height:210px; transform:rotate(-6deg); border:8px solid #fff; box-shadow:3px 4px 0 var(--ink); background:linear-gradient(145deg, #f59a7c, #f9d681 46%, #97c8ba 47%); font:3.7rem Georgia, serif; }
.photo-card small { margin-top:.3rem; color:#fff; font:700 .7rem 'Courier New', monospace; text-shadow:1px 1px var(--ink); }
.saved-stamp { position:absolute; z-index:3; right:-.5rem; bottom:1.1rem; width:93px; height:93px; display:grid; place-items:center; border:3px dashed var(--red); border-radius:50%; color:var(--red); font:700 .72rem/1.15 'Courier New', monospace; text-align:center; transform:rotate(13deg); }
.spark { position:absolute; z-index:4; color:var(--blue); font-size:2rem; }.sparkle-one { top:.5rem; left:1.5rem; }.sparkle-two { right:1rem; top:4rem; color:var(--red); }
.section { padding:7rem 1.5rem; }
.paper-note, .concept { margin:2rem 0; padding:3rem 1.5rem; border-block:2px solid var(--ink); background:var(--yellow); }
.section-grid { display:grid; grid-template-columns:1fr 1fr; gap:3rem; }
.section-grid h2 { margin-bottom:0; }
.about-copy, .concept > div:last-child { max-width:500px; font-size:1.05rem; }
.about-copy p:last-child, .concept p:last-child { margin-bottom:0; }
.section-heading { max-width:670px; }
.steps { display:grid; grid-template-columns:repeat(3, 1fr); gap:1.2rem; padding:0; margin:3rem 0 0; list-style:none; }
.step-card { min-height:235px; }.step-content { padding:1.4rem; }.step-icon { display:grid; width:45px; height:45px; place-items:center; margin-bottom:2.2rem; border:2px solid var(--ink); background:var(--yellow); color:var(--blue); font-size:1.6rem; }.step-content h3 { margin-bottom:.4rem; font:700 1.05rem 'Courier New', monospace; text-transform:uppercase; }.step-content p { margin-bottom:0; }
.concept { align-items:center; background:#e7ddd0; }.concept-illustration { position:relative; min-height:225px; }.folder { position:absolute; top:2rem; left:12%; padding:3.6rem 2rem 1.2rem; transform:rotate(-4deg); border:2px solid var(--ink); box-shadow:var(--shadow); background:#e3b982; font:700 1.2rem Georgia, serif; }.folder::before { position:absolute; top:-18px; left:-2px; width:95px; height:20px; border:2px solid var(--ink); border-bottom:0; background:#e3b982; content:""; }.folder span { font:700 .7rem 'Courier New', monospace; }.mini-note { position:absolute; right:7%; bottom:1rem; padding:1rem; transform:rotate(6deg); background:#fff; box-shadow:3px 4px 0 var(--ink); font:1rem/1.2 Georgia, serif; }.tape { position:absolute; top:.7rem; right:25%; width:70px; height:20px; transform:rotate(-21deg); opacity:.75; background:#fff15a; }
.roadmap-heading { max-width:650px; }.roadmap-heading > p:last-child { max-width:590px; font-size:1.05rem; }.roadmap-now { max-width:700px; margin:2.5rem 0 2rem; padding:1.2rem 1.35rem; border:2px solid var(--ink); box-shadow:var(--shadow); background:var(--yellow); }.roadmap-label { margin:0 0 .45rem; font:700 .7rem 'Courier New', monospace; letter-spacing:.05em; }.roadmap-now h3, .roadmap-content h3 { margin-bottom:.4rem; font:700 1.05rem 'Courier New', monospace; text-transform:uppercase; }.roadmap-now p:last-child, .roadmap-content p { margin-bottom:0; }.roadmap-steps { display:grid; grid-template-columns:repeat(3, 1fr); gap:1.2rem; padding:0; margin:0; list-style:none; }.roadmap-card { min-height:185px; }.roadmap-card.roadmap-current { background:var(--yellow); }.roadmap-content { padding:1.2rem; background:#fffdf6; }.roadmap-current .roadmap-content { background:#fff9bb; }
.ideas { display:grid; grid-template-columns:.85fr 1.15fr; gap:4rem; align-items:start; padding:7rem 1.5rem; }.ideas-heading { position:sticky; top:1rem; }.ideas-heading p:last-child { max-width:390px; font-size:1.04rem; }.idea-window form { padding:1.4rem; background:#fffdf6; }label { display:block; margin:1rem 0 .4rem; font:700 .72rem 'Courier New', monospace; text-transform:uppercase; }label span { color:var(--muted); font-weight:normal; text-transform:none; }input, textarea, select { display:block; width:100%; padding:.7rem; border:2px solid var(--ink); border-radius:0; background:#fff; color:var(--ink); }textarea { resize:vertical; }.honeypot { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }.form-actions { display:flex; flex-wrap:wrap; gap:1rem; margin-top:1.25rem; }.form-status, .form-error { min-height:1.2em; margin:.75rem 0 0; font-size:.9rem; }.form-status { color:var(--muted); }.form-error { color:#a32116; }.form-privacy { margin:1.25rem 0 0; padding:.85rem; border-left:3px solid var(--blue); background:#e9eeff; font-size:.84rem; }.proposal-ready { margin-top:1.25rem; padding:1rem; border:2px dashed var(--blue); background:#e9eeff; }.proposal-ready strong { display:block; margin-bottom:.25rem; font-family:'Courier New', monospace; }
.site-footer { display:grid; grid-template-columns:1fr auto; gap:1rem; padding:2.2rem 0; border-top:2px solid var(--ink); }.site-footer .wordmark { grid-row:span 2; }.site-footer p:not(.wordmark) { margin:0; text-align:right; }
@media (max-width:760px) { .site-shell { width:min(100% - 1.25rem, 600px); }.site-header { min-height:72px; position:relative; }.menu-toggle { display:block; }nav { display:none; position:absolute; z-index:8; top:62px; right:0; width:210px; padding:1rem; border:2px solid var(--ink); box-shadow:var(--shadow); background:var(--paper); align-items:stretch; }nav.open { display:flex; flex-direction:column; }.nav-cta { text-align:center; }.hero { grid-template-columns:1fr; gap:2.5rem; min-height:auto; padding:4rem .25rem 4rem; }.hero-art { min-height:355px; }.memory-window { right:.25rem; }.photo-card { width:145px; height:178px; }.section, .ideas { padding:4.5rem .25rem; }.paper-note, .concept { margin-inline:-.625rem; padding:2.5rem .875rem; }.section-grid, .ideas { grid-template-columns:1fr; gap:2rem; }.steps, .roadmap-steps { grid-template-columns:1fr; }.step-card, .roadmap-card { min-height:0; }.step-content { min-height:180px; }.ideas-heading { position:static; }.site-footer { grid-template-columns:1fr; }.site-footer .wordmark { grid-row:auto; }.site-footer p:not(.wordmark) { text-align:left; } }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior:smooth; }.window, .button, .nav-cta { transition:transform .14s ease, box-shadow .14s ease; } }