@charset "UTF-8";
:root{--ink:#171d29;--muted:#626875;--blue:#245ac7;--orange:#bd5e36;--line:#dce0e5;--paper:#f9fafb;--dark:#171d29;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none;scroll-behavior:smooth;scroll-padding-top:2rem}*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible{outline:3px solid var(--orange);outline-offset:6px}::selection{background:#dbe6ff}.wrap{width:min(1280px,calc(100% - 112px));margin-inline:auto}.header{display:flex;align-items:center;justify-content:space-between;min-height:110px;border-bottom:1px solid var(--line);gap:2rem}.brand{display:inline-flex;gap:12px;align-items:center;white-space:nowrap;font-size:24px;font-weight:700;letter-spacing:-1px}.brand small{font-size:10px;letter-spacing:2px;margin-left:3px}.header nav{display:flex;align-items:center;gap:34px;font-size:14px}.header nav a:hover,.text-link:hover{color:var(--blue)}.nav-cta{border:1px solid #b7bdc7;padding:13px 18px;border-radius:4px}.nav-cta span{padding-left:14px}.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:70px;align-items:center;padding-block:70px 78px}.eyebrow{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:2px;margin:0 0 25px;line-height:1.6}.hero .eyebrow{display:flex;align-items:center;gap:10px}.eyebrow>span{height:7px;width:7px;border-radius:50%;background:var(--orange)}h1{font-size:clamp(48px,5.2vw,76px);line-height:1.04;letter-spacing:-3.8px;font-weight:500;margin:0 0 27px}em{font-family:Georgia,'Times New Roman',serif;font-weight:400;color:var(--blue)}.intro{font-size:18px;line-height:1.7;color:var(--muted);max-width:470px;margin:0 0 29px}.button{display:inline-flex;align-items:center;gap:35px;background:var(--blue);color:white;font-size:15px;font-weight:600;padding:19px 24px;border-radius:4px;transition:background .2s,transform .2s}.button:hover{background:#18469f;transform:translateY(-2px)}.platforms{font-size:12px;color:var(--muted);margin-top:19px;letter-spacing:.1px}.platforms span{margin:0 7px}.hero-art{position:relative;background:#e8e9e7;padding:22px 25px 18px;transform:rotate(2deg);border:1px solid #dbdeda;box-shadow:0 20px 48px #171d2910}.archive-heading,.art-foot{display:flex;justify-content:space-between;gap:12px;font-family:monospace;font-size:10px;letter-spacing:1.1px}.archive-heading{margin-bottom:20px}.photo{margin:0;background:#fff;padding:10px 10px 0;box-shadow:0 4px 12px #171d2915}.photo img{width:100%;height:340px;object-fit:cover;display:block;filter:saturate(.7)}.photo figcaption{font-family:Georgia,serif;font-style:italic;padding:18px 8px 21px;font-size:18px}.record{display:flex;align-items:center;gap:13px;background:#fff;border:1px solid var(--line);box-shadow:0 8px 25px #171d2910;border-radius:5px;padding:18px 19px;transform:rotate(-4deg);margin:-10px -42px 24px 40px;position:relative}.record-icon{display:grid;place-items:center;background:#edf2fc;color:var(--blue);width:37px;height:40px;font-size:24px}.record strong{display:block;font-size:14px;margin-bottom:5px}.record div>span{font-size:12px;color:var(--muted)}.record-dot{width:8px;height:8px;border-radius:50%;background:#6d886c;margin-left:auto}.art-foot{font-size:9px}.principles{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.principles .wrap{display:flex;justify-content:space-between;padding-block:25px;gap:20px;font-size:14px;color:#515866}.principles span:before{content:'+';color:var(--orange);margin-right:13px}.possibilities{padding-block:90px}.section-heading{display:grid;grid-template-columns:1.25fr 1fr;column-gap:100px}.section-heading .eyebrow{grid-column:1/-1}.section-heading h2{margin:0}.section-heading>p:last-child{max-width:390px;color:var(--muted);font-size:17px;line-height:1.7;align-self:end;margin:0 0 5px}h2{font-size:42px;font-weight:500;line-height:1.15;letter-spacing:-1.8px}.features{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:50px}.features article{border-top:1px solid #bfc5cf;padding-top:23px}.feature-number{font-size:11px;font-family:monospace;letter-spacing:1.5px;color:var(--blue)}h3{font-size:23px;line-height:1.25;font-weight:500;letter-spacing:-.6px;margin:24px 0 15px}.features p{font-size:16px;line-height:1.75;color:var(--muted);margin:0;max-width:350px}.ownership{background:var(--dark);color:#f8f9fb;padding-block:78px}.ownership-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:100px}.ownership .eyebrow{color:#a9b4c8}.ownership h2{font-size:46px;margin:0;line-height:1.2}.ownership em{color:#93b6ff}.ownership-copy{font-size:16px;line-height:1.8;color:#bbc1cc}.ownership-copy .large{font-size:23px;color:#fff;line-height:1.3;margin:0 0 20px;letter-spacing:-.5px}.ownership-note{border-top:1px solid #3b414c;margin-top:27px;padding-top:19px;font-size:14px;color:#f5f7fa}.ownership-note span{color:#a6bfee;margin-right:12px}.explore{text-align:center;padding-block:90px}.explore h2{font-size:45px;margin:0 0 24px}.explore>p:not(.eyebrow){color:var(--muted);line-height:1.8;font-size:17px}.availability{display:inline-flex;align-items:center;gap:10px;background:#edf0f4;border:1px solid var(--line);border-radius:30px;padding:13px 20px;font-size:13px;margin-top:16px}.status-dot{width:6px;height:6px;border-radius:50%;background:var(--orange)}.divider{color:#a0a6b0;padding-inline:3px}.text-link{display:block;font-size:14px;text-decoration:underline;text-underline-offset:5px;margin-top:23px}.text-link span{margin-left:8px}footer{border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:25px;padding-block:30px}footer .brand{font-size:20px}footer>span{font-size:12px;color:var(--muted)}.skip{position:fixed;top:-100px;left:20px;z-index:10;background:white;padding:15px}.skip:focus{top:10px}@media(min-width:1500px){.hero{padding-block:90px}.photo img{height:400px}}@media(max-width:1050px){.wrap{width:calc(100% - 64px)}.hero{gap:40px}h1{font-size:58px}.header nav{gap:22px}.header nav>a:first-child{display:none}.photo img{height:310px}.record{margin-right:-32px;margin-left:10px}.section-heading,.ownership-grid{gap:40px}.principles .wrap{font-size:12px}.features{gap:25px}}@media(max-width:760px){.wrap{width:calc(100% - 40px)}.header{min-height:85px;gap:15px}.brand{font-size:21px;gap:8px}.brand small{font-size:9px;letter-spacing:1px}.header .brand img{width:34px;height:34px}.header nav>a:not(.nav-cta){display:none}.nav-cta{font-size:12px;padding:10px}.nav-cta span{padding-left:3px}.hero{grid-template-columns:1fr;padding-block:45px 50px;gap:45px}.eyebrow{font-size:11px;letter-spacing:1.5px}h1{font-size:clamp(43px,9.5vw,68px);letter-spacing:-2.5px}.intro{font-size:17px}.hero-art{max-width:480px;width:calc(100% - 16px);justify-self:center}.photo img{height:300px}.record{margin-right:-26px}.principles .wrap{flex-direction:column;gap:15px;font-size:14px}.possibilities{padding-block:55px}.section-heading,.ownership-grid{grid-template-columns:1fr;gap:22px}.section-heading .eyebrow{margin-bottom:0}.section-heading>p:last-child{max-width:none}.features{grid-template-columns:1fr;gap:30px;margin-top:32px}.features p{max-width:none}h3{margin-top:15px}h2,.ownership h2,.explore h2{font-size:35px;letter-spacing:-1.3px}.ownership{padding-block:50px}.ownership-grid{gap:35px}.explore{padding-block:55px}.desktop{display:none}footer{flex-wrap:wrap;padding-block:25px}footer>span:nth-child(2){display:none}.availability{padding-inline:14px;font-size:12px}}@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}.button{transition:none}}

/* A light contact-sheet grid with color drawn from the Continuum mark. */
body {
  background-color: #f3f6fc;
  background-image:
    radial-gradient(ellipse 65% 650px at 90% 200px, #abc8ff80, transparent 80%),
    radial-gradient(ellipse 45% 560px at 0 540px, #edc4ad55, transparent 80%),
    linear-gradient(#47679809 1px, transparent 1px),
    linear-gradient(90deg, #47679809 1px, transparent 1px);
  background-size: auto, auto, 32px 32px, 32px 32px;
}
.hero-art { background: #dce6f4; border-color: #bdcce1; }
.principles { background: #e6edf9cc; border-color: #cbd6e7; }
.ownership { background: linear-gradient(115deg, #171d29, #1c3356); }
.availability { background: #e3ebf8; border-color: #c5d3e9; }

.photo img { height: auto; aspect-ratio: 1; object-fit: contain; filter: none; }

/* Editorial typography: bookish headings, humanist supporting text. */
:root { font-family: 'Trebuchet MS', 'Segoe UI', sans-serif; }
h1 { font-family: Arial, Helvetica, sans-serif; }
h1 em { display: inline-block; font-size: .86em; letter-spacing: -.055em; }
h2, h3, .ownership-copy .large, .maker-lead {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
}
h2 { line-height: 1.2; letter-spacing: -.045em; }
h3 { font-size: 26px; line-height: 1.25; letter-spacing: -.035em; }
.brand { font-family: 'Trebuchet MS', sans-serif; letter-spacing: -1.25px; }
.brand small, .eyebrow, .feature-number, .example-label, .step-index {
  font-family: 'Courier New', monospace;
}
.intro { font-size: 19px; line-height: 1.7; }
.header nav { font-size: 14px; gap: 26px; }
.button { font-size: 16px; letter-spacing: -.3px; }
.features p, .ownership-copy { line-height: 1.85; }
.feature-number { font-size: 12px; letter-spacing: 1px; }
.photo figcaption { font-size: 21px; }
.group-story { display: grid; grid-template-columns: 1.15fr 1fr; gap: 85px; padding-block: 20px 90px; }
.group-intro h2 { margin: 0 0 25px; font-size: 46px; }
.group-intro > p:not(.eyebrow) { font-size: 17px; line-height: 1.8; color: var(--muted); max-width: 540px; }
.group-example { align-self: center; background: #ffffffb8; border: 1px solid #c5d3e9; padding: 32px; box-shadow: 0 12px 32px #1c335608; }
.example-label { font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--blue); margin: 0 0 28px; }
.example-step { display: flex; align-items: flex-start; gap: 18px; }
.step-index { color: var(--orange); font-size: 14px; padding-top: 6px; }
.example-step h3 { margin: 0 0 8px; }
.example-step p { font-size: 16px; line-height: 1.7; color: var(--muted); margin: 0; }
.connection-line { margin: 10px 0 10px 2px; color: #a0b4d1; font-size: 23px; }
.example-footnote { font-size: 14px; line-height: 1.7; padding-top: 22px; margin: 25px 0 0; border-top: 1px solid var(--line); color: var(--blue); }
.maker { display: grid; grid-template-columns: 1.15fr 1fr; gap: 85px; padding-block: 85px; border-bottom: 1px solid #c5d3e9; }
.maker-title h2 { margin: 0 0 27px; font-size: 43px; }
.maker-signoff { font-family: Georgia, serif; font-style: italic; font-size: 17px; color: var(--orange); }
.maker-copy { border-left: 2px solid #bd5e3655; padding-left: 30px; }
.maker-copy p { font-size: 17px; line-height: 1.85; color: var(--muted); }
.maker-copy .maker-lead { font-size: 27px; line-height: 1.4; color: var(--ink); margin-top: 0; letter-spacing: -.6px; }
.maker-copy p:last-child { margin-bottom: 0; }
@media (max-width: 1050px) {
  .group-story, .maker { gap: 40px; }
  .header nav { gap: 18px; }
}
@media (max-width: 760px) {
  .group-story, .maker { grid-template-columns: 1fr; gap: 30px; padding-block: 40px 55px; }
  .group-intro h2, .maker-title h2 { font-size: 36px; }
  .group-example { padding: 24px; }
  .maker-copy { padding-left: 22px; }
  .header { flex-wrap: wrap; padding-block: 19px; }
  .header nav { margin-left: auto; }
  .intro { font-size: 18px; }
}

.maker-copy .maker-signature { font-family: Georgia, serif; font-style: italic; font-size: 30px; color: var(--blue); margin-top: 25px; }

.changelog { display: grid; grid-template-columns: 1.15fr 1fr; gap: 85px; padding-block: 65px; border-bottom: 1px solid #c5d3e9; }
.changelog h2 { margin: 0; }
.changelog-copy { align-self: center; }
.changelog-copy p { font-size: 17px; line-height: 1.8; color: var(--muted); margin: 0; }
.changelog-copy p:first-child { font-family: Georgia, serif; font-size: 25px; color: var(--ink); margin-bottom: 9px; }
.footer-changelog { font-size: 14px; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 1050px) { .changelog { gap: 40px; } }
@media (max-width: 760px) { .changelog { grid-template-columns: 1fr; gap: 22px; padding-block: 45px; } }

/* Clean humanist typography, matching the desktop app's wordmark. */
:root { font-family: 'Segoe UI Variable Text', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif; }
h2, h3, .ownership-copy .large, .maker-lead { font-family: 'Segoe UI Variable Display', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 600; }
h2 { letter-spacing: -.045em; }
h3 { font-size: 24px; letter-spacing: -.025em; }
.brand { font-family: 'Segoe UI Variable Text', 'Segoe UI', sans-serif; font-weight: 700; letter-spacing: -.6px; }
.brand small { font-family: inherit; font-size: .3333em; font-weight: 600; letter-spacing: normal; margin-left: 4px; }
.eyebrow, .feature-number, .example-label, .step-index { font-family: inherit; font-weight: 600; }
.header nav { gap: 22px; font-weight: 500; }
.platforms { display: flex; gap: 20px; flex-wrap: wrap; }
.platforms .platform { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; margin: 0; }
.platform svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.footer-site { font-size: 13px; color: var(--muted); }
.footer-site:hover { color: var(--blue); text-decoration: underline; }
@media(max-width:1050px) { .header { flex-wrap: wrap; padding-block: 22px; gap: 20px; } .header nav { flex-wrap: wrap; gap: 18px; } .header nav>a:first-child { display: inline; } }
@media(max-width:760px) { .header nav { width: 100%; margin: 0; gap: 12px 20px; } .header nav>a:not(.nav-cta) { display: inline; font-size: 14px; } .header nav .nav-cta { padding: 0; border: 0; font-size: 14px; color: var(--blue); } }

@media(max-width:760px) { footer>span:nth-child(2) { display: block; } }

.release-meta { display: flex; justify-content: flex-end; gap: 10px; padding-bottom: 24px; font-size: 12px; color: var(--muted); }

.app-preview { padding-block: 0 80px; }
.app-preview h2 { margin: 0 0 18px; }
.preview-note { color: var(--muted); font-size: 16px; line-height: 1.7; max-width: 680px; }
.screenshot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 30px; }
.screenshot-grid figure { margin: 0; min-width: 0; }
.screenshot-grid img { display: block; width: 100%; height: auto; border: 1px solid #c5d3e9; border-radius: 8px; box-shadow: 0 12px 28px #1c335610; }
.screenshot-grid a { display: block; }
.screenshot-grid figcaption { padding-top: 20px; }
.screenshot-grid strong { display: block; font-size: 20px; font-weight: 600; margin-bottom: 8px; }
.screenshot-grid figcaption span { font-size: 16px; color: var(--muted); line-height: 1.7; }
@media(max-width:760px) { .screenshot-grid { grid-template-columns: 1fr; gap: 35px; } .app-preview { padding-bottom: 45px; } }

.maker-links { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 25px; }
.maker-links a { display: inline-flex; gap: 18px; padding: 11px 16px; border: 1px solid #bacbe4; border-radius: 4px; font-size: 14px; font-weight: 600; color: var(--blue); background: #ffffff70; }
.maker-links a:hover { background: #e3ebf8; }

.maker-portrait { display: block; width: 180px; height: 180px; margin-bottom: 28px; border-radius: 50%; }
.maker-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 5px solid #fff; box-shadow: 0 8px 25px #1c33561a; }

.map-screenshot { grid-column: 1 / -1; }
.screenshot-grid .map-screenshot img { max-height: 720px; object-fit: contain; background: #eef1f5; }

.archive-future { padding-block: 80px 20px; }
.archive-future > h2 { margin: 0 0 22px; }
.future-intro { max-width: 750px; font-size: 18px; line-height: 1.8; color: var(--muted); }
.flow-story { display: grid; grid-template-columns: 1fr 1.2fr; gap: 65px; align-items: start; padding-block: 45px; border-bottom: 1px solid #c5d3e9; }
.flow-description h3 { font-size: 30px; line-height: 1.25; margin-top: 18px; }
.flow-description p { font-size: 17px; line-height: 1.8; color: var(--muted); }
.flow-diagram { background: #ffffff85; padding: 25px; border: 1px solid #c5d3e9; border-radius: 10px; }
.flow-node { border: 1px solid #cbd6e7; background: #fff; border-radius: 6px; padding: 18px; text-align: center; min-width: 0; }
.flow-node strong { display: block; font-size: 17px; line-height: 1.4; }
.flow-node > span:not(.file-type) { display: block; font-size: 14px; line-height: 1.65; color: var(--muted); margin-top: 6px; }
.flow-source { background: #e7effe; border-color: #b2c7ed; }
.flow-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.flow-arrow { color: var(--blue); text-align: center; font-size: 25px; padding-block: 10px; }
.flow-arrow span { font-size: 13px; vertical-align: middle; margin-left: 7px; color: var(--muted); }
.file-type { display: inline-block; color: var(--blue); font-size: 12px; font-weight: 700; letter-spacing: 1px; padding: 5px 8px; background: #edf2fc; border-radius: 3px; margin-bottom: 10px; }
.flow-result { padding: 16px; background: #e7effe; color: #254a88; text-align: center; font-size: 15px; line-height: 1.65; border-radius: 6px; }
.flow-pair + .flow-result { margin-top: 18px; }
.flow-note { font-size: 14px; line-height: 1.75; color: var(--muted); margin: 18px 0 0; }
@media(max-width:1050px) { .flow-story { gap: 30px; } }
@media(max-width:760px) { .archive-future { padding-top: 50px; } .flow-story { grid-template-columns: 1fr; gap: 15px; padding-block: 30px; } .flow-diagram { padding: 18px; } .flow-pair { grid-template-columns: 1fr; } .flow-node { padding: 16px; } }

/* The filmstrip palette: copper into periwinkle into vivid screen blue. */
body {
  background-color: #edf2fc;
  background-image:
    radial-gradient(ellipse 65% 760px at 100% 140px, #2f7deb70 0%, #5c6e9e30 55%, transparent 85%),
    radial-gradient(ellipse 55% 680px at -8% 570px, #b4551f60 0%, #c18b6230 55%, transparent 85%),
    radial-gradient(ellipse 85% 650px at 65% 1500px, #697ab538, transparent 80%),
    linear-gradient(115deg, #f6eee6 0%, #eef0f9 46%, #dceaff 100%);
  background-repeat: no-repeat;
}
.hero { position: relative; }
.hero-copy { position: relative; z-index: 1; }
.hero-art { background: linear-gradient(145deg, #b9cbea, #e5dcda 55%, #a9c7f3); border-color: #a4b8d8; box-shadow: 0 24px 65px #2f5d9b25; }
.principles { background: linear-gradient(100deg, #b4551f16, #5c6e9e20 50%, #2f7deb25); border-color: #9aaecd80; }
.ownership { position: relative; background: radial-gradient(ellipse at 100% 0%, #2f7deb70, transparent 65%), radial-gradient(ellipse at 0% 100%, #b4551f50, transparent 60%), #171d29; border-top: 5px solid; border-image: linear-gradient(90deg, #7a6350, #b4551f, #5c6e9e, #2f7deb) 1; }
.group-example, .flow-diagram { background: #ffffffbd; }
.explore { position: relative; background: radial-gradient(ellipse at 15% 100%, #b4551f20, transparent 65%), radial-gradient(ellipse at 100% 30%, #2f7deb25, transparent 70%); border-radius: 18px; margin-bottom: 35px; padding-inline: 20px; }
footer { border-top: 3px solid; border-image: linear-gradient(90deg, #7a6350, #b4551f, #5c6e9e, #2f7deb) 1; }

/* Tactile paper grain, with quieter blue and warmer copper undertones. */
body {
  background-color: #f0eee9;
  background-image:
    url('assets/paper-grain.svg'),
    radial-gradient(ellipse 70% 780px at 100% 100px, #527fc348 0%, #71819b20 55%, transparent 85%),
    radial-gradient(ellipse 65% 820px at -8% 540px, #b46f4350 0%, #b9967330 55%, transparent 85%),
    radial-gradient(ellipse 85% 650px at 65% 1500px, #697a9620, transparent 80%),
    linear-gradient(115deg, #f2e9de 0%, #efeeeb 46%, #e2e8f0 100%);
  background-size: 180px 180px, auto, auto, auto, auto;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat;
}
.hero-art {
  background-image: url('assets/paper-grain.svg'), linear-gradient(145deg, #c1cddd, #e1d4c5 58%, #b9c9df);
  border-color: #b3bcc6;
}
.principles { background: url('assets/paper-grain.svg'), linear-gradient(100deg, #b4551f18, #7a746a12 50%, #446fae18); }
.ownership { background: url('assets/paper-grain.svg'), radial-gradient(ellipse at 100% 0%, #416a9c50, transparent 65%), radial-gradient(ellipse at 0% 100%, #b46b3d55, transparent 60%), #20232b; }
.group-example, .flow-diagram { background: url('assets/paper-grain.svg'), #faf8f3e8; border-color: #cdcac3; }
.flow-source, .flow-result { background: #e6eaf0; }
.explore { background: url('assets/paper-grain.svg'), radial-gradient(ellipse at 15% 100%, #b4551f24, transparent 65%), radial-gradient(ellipse at 100% 30%, #527fc31a, transparent 70%); }

/* Saturated, textured edges frame quiet reading surfaces. */
body {
  background-color: #314d77;
  background-image:
    url('assets/bold-grain.svg'),
    repeating-linear-gradient(125deg, transparent 0 8px, #101b2b12 8px 10px, transparent 10px 18px),
    radial-gradient(ellipse 70% 1100px at -15% 450px, #b75b28 0%, #9a583b 34%, transparent 78%),
    radial-gradient(ellipse 70% 1300px at 112% 150px, #2869c1 0%, #3b567c 50%, transparent 86%),
    linear-gradient(125deg, #795342, #344c70 52%, #2464ae);
  background-size: 240px 240px, auto, auto, auto, auto;
  background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat;
}
.header { width: 100%; padding-inline: max(32px, calc((100% - 1280px) / 2)); background: #f8f7f3; border-bottom: 1px solid #e1d9ce; }
.hero { margin-block: 35px; padding: 55px 44px; background: url('assets/paper-grain.svg'), #f8f5ef; border: 1px solid #ffffff60; box-shadow: 0 20px 55px #14233838; }
.hero-art { background: url('assets/bold-grain.svg'), linear-gradient(135deg, #a97751, #7c899e 52%, #4c77ae); border-color: #677b98; }
.principles { background: #172943; border-color: #ffffff25; }
.principles .wrap { color: #f0e8dc; }
.principles span:before { color: #efa66d; }
.possibilities, .app-preview, .group-story, .archive-future, .maker, .changelog {
  padding-inline: 40px;
  background: url('assets/paper-grain.svg'), #f8f5ef;
}
.possibilities { margin-top: 35px; }
.group-story { padding-top: 35px; }
.ownership { background: url('assets/bold-grain.svg'), radial-gradient(ellipse at 0% 100%, #a85a35a0, transparent 65%), radial-gradient(ellipse at 100% 0%, #2e6bb796, transparent 65%), #182943; }
.archive-future { margin-top: 35px; }
.group-example, .flow-diagram { background: #fffdf8; }
.explore { background: url('assets/paper-grain.svg'), #f0e9dd; border-radius: 0; margin-block: 0 35px; padding-inline: 30px; }
footer { width: 100% !important; padding-inline: max(32px, calc((100% - 1280px) / 2)); background: #f8f7f3; }
.release-meta { width: 100%; padding-inline: max(32px, calc((100% - 1280px) / 2)); background: #f8f7f3; }
@media(max-width:1050px) { .hero { gap: 35px; padding-inline: 28px; } .possibilities, .app-preview, .group-story, .archive-future, .maker, .changelog { padding-inline: 28px; } }
@media(max-width:760px) { .hero { margin-block: 20px; padding: 35px 20px; } .possibilities, .archive-future { margin-top: 20px; } .possibilities, .app-preview, .group-story, .archive-future, .maker, .changelog { padding-inline: 20px; } .header, footer, .release-meta { padding-inline: 20px; } .hero-art { width: calc(100% - 12px); } }

/* Album-cloth direction: broad color fields and a fine woven surface. */
body {
  background-color: #dedbd4;
  background-image:
    repeating-linear-gradient(0deg, #ffffff14 0 1px, #1923370c 1px 2px, transparent 2px 5px),
    repeating-linear-gradient(90deg, #ffffff10 0 1px, #19233712 1px 2px, transparent 2px 5px),
    linear-gradient(112deg, #a75f3e 0%, #a75f3e 13%, #ccc0af 13%, #e6e0d5 39%, #d1d8df 66%, #567597 87%, #3d5879 87%, #3d5879 100%);
  background-size: 5px 5px, 5px 5px, 100% 1100px;
  background-repeat: repeat, repeat, repeat-y;
}
.header { background: #f7f4eeed; }
.hero {
  background: transparent;
  border: 0;
  box-shadow: none;
  margin-block: 0;
  padding-block: 75px;
}
.hero-copy { padding: 30px; background: #f8f5efed; border-left: 3px solid #a85e38; }
.hero-art { background: url('assets/paper-grain.svg'), #d6cbb9; border-color: #b6a58c; box-shadow: 0 20px 35px #24314230; }
.principles { background: #354961; border-color: #ffffff20; }
.possibilities, .app-preview, .group-story, .archive-future, .maker, .changelog {
  background: #f7f4eef5;
}
.possibilities, .archive-future { margin-top: 0; }
.ownership {
  background-image:
    repeating-linear-gradient(0deg, #ffffff08 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, #00000015 0 1px, transparent 1px 4px),
    linear-gradient(110deg, #584537, #2c3e54 52%, #354e6c);
  border-top: 0;
}
.group-example, .flow-diagram { background: #fffcf7; }
.explore { background: #e9e1d4f5; margin-bottom: 0; }
footer { border-top: 3px solid #a76b46; border-image: none; }
@media(max-width:1050px) { .hero { padding-inline: 0; gap: 30px; } .hero-copy { padding: 25px; } }
@media(max-width:760px) { .hero { padding-block: 30px 45px; margin-block: 0; } .hero-copy { padding: 24px 20px; } .hero-art { width: calc(100% - 36px); } }

/* Continuous dyed-cloth color, without hard-edged background bands. */
body {
  background-color: #d6d3cc;
  background-image:
    repeating-linear-gradient(0deg, #ffffff14 0 1px, #1923370c 1px 2px, transparent 2px 5px),
    repeating-linear-gradient(90deg, #ffffff10 0 1px, #19233712 1px 2px, transparent 2px 5px),
    radial-gradient(ellipse at 0% 20%, #a75f3e99, transparent 57%),
    radial-gradient(ellipse at 100% 65%, #3d5879bb, transparent 62%),
    linear-gradient(110deg, #cab29a, #e5dfd3 43%, #b8c5d1 73%, #647e99);
  background-size: 5px 5px, 5px 5px, 100% 100%, 100% 100%, 100% 100%;
  background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat;
}
.hero-copy { background: transparent; border-left: 0; padding-left: 0; }
.possibilities, .app-preview, .group-story, .archive-future, .maker, .changelog {
  background: transparent;
}
.explore { background: transparent; }
.header, footer, .release-meta { background: #f7f4eed9; }
@media(max-width:760px) { .hero-copy { padding-inline: 0; } }

/* Whole-page refinement: an open editorial layout and consistent details. */
:root { --muted: #505962; --line: #a6aeb680; --blue: #275ba2; }
.header { min-height: 94px; background: #f4f1e7b8; border-bottom-color: #877c6930; }
.header nav a:not(.nav-cta) { padding-block: 10px; border-bottom: 1px solid transparent; transition: border-color .2s, color .2s; }
.header nav a:not(.nav-cta):hover { border-color: #9c6443; color: #754a32; }
.nav-cta { border-color: #6b7b8f70; background: #ffffff30; }
.hero { gap: clamp(35px, 5vw, 80px); padding-block: 65px 85px; grid-template-columns: 1.15fr 1fr; }
h1 { font-size: clamp(48px, 4.9vw, 72px); line-height: 1.08; letter-spacing: -.055em; }
h1 em { font-size: .83em; letter-spacing: -.05em; }
.hero-copy { padding-block: 0; }
.intro { max-width: 460px; margin-top: 28px; line-height: 1.8; }
.button { padding: 17px 23px; border-radius: 5px; box-shadow: 0 5px 12px #263f5b15; }
.hero-art { transform: rotate(1deg); padding: 20px; }
.record { transform: rotate(-2deg); margin-right: -25px; border-radius: 4px; box-shadow: 0 10px 24px #24314218; }
.principles { background: #2f4253ed; }
.principles .wrap { padding-block: 22px; font-size: 14px; }
.possibilities, .app-preview, .group-story, .archive-future, .maker, .changelog { padding-inline: 0; }
.possibilities { padding-block: 80px 65px; }
.section-heading, .ownership-grid { column-gap: 70px; }
.eyebrow { color: #5f5146; font-size: 12px; letter-spacing: 1.6px; margin-bottom: 22px; }
.features { gap: 38px; margin-top: 42px; }
.features article { border-top-color: #796e5f65; padding-top: 20px; }
.features p { max-width: 350px; }
.feature-number { color: #654c3b; }
.app-preview { padding-block: 50px 75px; border-top: 1px solid #796e5f40; }
.preview-note { font-size: 14px; max-width: 710px; line-height: 1.8; }
.screenshot-grid { gap: 38px 30px; }
.screenshot-grid figure { display: flex; flex-direction: column; }
.screenshot-grid img { border: 5px solid #faf7f0; outline: 1px solid #796e5f35; border-radius: 5px; box-shadow: 0 12px 28px #22344c18; }
.screenshot-grid figcaption { padding: 18px 3px 0; }
.screenshot-grid figcaption .view-label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.3px; color: #634b38; margin-bottom: 8px; }
.screenshot-grid strong { font-size: 21px; letter-spacing: -.4px; }
.screenshot-grid .map-screenshot { display: grid; grid-template-columns: 1.75fr 1fr; align-items: center; gap: 32px; }
.screenshot-grid .map-screenshot figcaption { padding: 0; }
.group-story { padding-block: 65px 80px; border-top: 1px solid #796e5f40; gap: 70px; }
.group-example { border-radius: 7px; box-shadow: 0 8px 22px #3341560c; }
.ownership { padding-block: 65px; }
.archive-future { padding-block: 75px 20px; }
.flow-story { padding-block: 38px; border-bottom-color: #796e5f40; }
.flow-diagram { border: 1px solid #aaa39470; box-shadow: 0 6px 18px #33415608; border-radius: 7px; }
.flow-node { border-color: #b8b4a570; }
.flow-note { font-size: 14px; }
.maker { padding-block: 70px; gap: 75px; border-bottom-color: #796e5f40; }
.maker-portrait { width: 160px; height: 160px; }
.maker-copy { border-left-color: #9f633d70; padding-left: 32px; }
.maker-links a { border-color: #79715f50; background: #f9f5eb65; }
.changelog { padding-block: 45px; border-bottom-color: #796e5f40; }
.explore { padding-block: 70px; }
footer { padding-block: 25px 18px; }
@media(max-width:1050px) { .hero { gap: 35px; } .section-heading, .ownership-grid, .group-story, .maker { column-gap: 35px; } }
@media(max-width:760px) {
  .header { padding-block: 20px; }
  .header nav { gap: 7px 18px; }
  .hero { grid-template-columns: 1fr; padding-block: 35px 50px; gap: 38px; }
  h1 { font-size: clamp(42px, 9.5vw, 66px); }
  .hero-art { width: calc(100% - 30px); }
  .record { margin-right: -22px; }
  .possibilities, .app-preview, .group-story, .archive-future, .maker { padding-block: 45px; }
  .features { gap: 28px; }
  .screenshot-grid .map-screenshot { display: flex; gap: 0; }
  .screenshot-grid .map-screenshot figcaption { padding-top: 18px; }
  .maker-copy { padding-left: 20px; }
  .changelog { padding-block: 35px; }
  .explore { padding-block: 45px; }
  footer { gap: 16px; }
}
@media(prefers-reduced-motion:reduce) { .header nav a { transition: none; } }

/* Soft pigment and irregular grain: no repeating grid or woven squares. */
body {
  background-color: #d8d4ca;
  background-image:
    url('assets/paper-grain.svg'),
    radial-gradient(ellipse at 100% 0%, #456b94ad, transparent 60%),
    radial-gradient(ellipse at 0% 84%, #b36c45a6, transparent 53%),
    linear-gradient(242deg, #6e89a2, #bdcbd2 26%, #e8e0d2 57%, #c9ac8f);
  background-size: 100% 100%, auto, auto, auto;
  background-repeat: no-repeat;
}
.ownership {
  background: radial-gradient(ellipse at 0% 100%, #96644770, transparent 65%), linear-gradient(110deg, #584b41, #2c3e54 58%, #354e6c);
}
.preservation-story {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(30px, 6vw, 80px);
  align-items: center;
  padding-block: 48px;
  border-bottom: 1px solid #796e5f35;
}
.preservation-story h3 { font-size: clamp(28px, 3vw, 38px); line-height: 1.2; margin: 0 0 22px; }
.preservation-story p:not(.eyebrow) { color: var(--muted); font-size: 17px; line-height: 1.8; }
.preservation-story .eyebrow { margin-bottom: 16px; }
.preservation-art { margin: 0; padding: 22px 0; }
.preservation-art img { width: 100%; height: auto; display: block; }
.preservation-art figcaption { text-align: center; font-family: Georgia, serif; font-style: italic; font-size: 19px; line-height: 1.5; color: #4d5c64; margin: 15px auto 0; max-width: 360px; }
.preservation-detail { margin-top: 22px; }
.preservation-detail summary { cursor: pointer; color: #395b75; font-size: 14px; text-underline-offset: 4px; }
.preservation-detail summary:hover { text-decoration: underline; }
.preservation-detail p { font-size: 14px !important; }
@media(max-width:760px) {
  .preservation-story { grid-template-columns: 1fr; gap: 6px; padding-block: 35px; }
  .preservation-art { padding-top: 8px; }
  .preservation-art figcaption { font-size: 18px; }
}

/* Release information and sample library beside the platform choices. */
.hero-copy .release-meta { width: auto; justify-content: flex-start; flex-wrap: wrap; gap: 8px; padding: 9px 0 0; background: transparent; font-size: 12px; }
.demo-download { display: inline-flex; align-items: center; gap: 22px; margin-top: 22px; padding: 12px 16px; border: 1px solid #526b8380; border-radius: 5px; background: #fffaf050; color: #254b70; font-size: 14px; font-weight: 600; }
.demo-download:hover { background: #fffaf0a0; }
.demo-download-note { font-size: 12px; line-height: 1.7; color: var(--muted); margin: 9px 0 0; }

.platforms { align-items: center; gap: 10px 16px; }
.platforms .platform-release { margin: 0; padding-left: 12px; border-left: 1px solid #526b8350; font-size: 11px; color: #45596c; white-space: nowrap; }
.hero-art { background: linear-gradient(145deg, #7795b0, #a3b8c9 58%, #c4cfd5); border-color: #65829c; box-shadow: 0 20px 35px #243e5c30; }
.archive-heading, .art-foot { color: #243e55; }

/* Slightly stronger wordmarks and footer typography. */
.header .brand small, footer .brand small { font-size: .38em; }
footer > span { font-size: 16px; line-height: 1.5; }
footer .footer-site { font-weight: 700; }

/* A dark album cover separates the photographs from the blue backdrop. */
.hero-art {
  background: linear-gradient(145deg, #283c50, #172735 75%);
  border-color: #10202e;
  box-shadow: inset 0 0 0 1px #b5c5d426, 0 22px 40px #17273540;
}
.hero-art .archive-heading, .hero-art .art-foot { color: #eee4d1; }
.hero-art .archive-heading { border-bottom: 1px solid #eee4d130; padding-bottom: 13px; }

/* A pale blue album cover, fading to warm white. */
.hero-art { background: linear-gradient(145deg, #e1ebf2, #f3f6f7 45%, #fdfcf8); border-color: #c2d1dc; box-shadow: inset 0 0 0 1px #ffffffb0, 0 22px 40px #243e5c26; }
.hero-art .archive-heading, .hero-art .art-foot { color: #36536c; }
.hero-art .archive-heading { border-bottom-color: #6b8da535; }