:root {
  --paper: #f3eee2;
  --paper-bright: #fbf8f1;
  --ink: #1d211d;
  --muted: #68685e;
  --line: rgba(29, 33, 29, .15);
  --verdigris: #3f6f62;
  --verdigris-soft: #dce7df;
  --terracotta: #a9563a;
  --ochre: #d8ae61;
  --shadow: 0 28px 70px rgba(42, 37, 27, .15);
  --radius: 8px;
  --max: 1120px;
  color-scheme: light;
  font-family: ui-serif, Georgia, "Noto Serif SC", "Songti SC", STSong, serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--paper); color: var(--ink); line-height: 1.65; margin: 0; overflow-x: hidden; }
body::before { background-image: linear-gradient(rgba(29, 33, 29, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(29, 33, 29, .035) 1px, transparent 1px); background-size: 72px 72px; content: ""; inset: 0; mask-image: linear-gradient(to bottom, black, transparent 84%); opacity: .6; pointer-events: none; position: fixed; z-index: -1; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 500; letter-spacing: -.05em; line-height: 1.12; }
img { max-width: 100%; }
:focus-visible { border-radius: 3px; outline: 3px solid var(--terracotta); outline-offset: 4px; }
.container { margin: 0 auto; width: min(var(--max), calc(100% - 64px)); }
.sr-only { clip: rect(0, 0, 0, 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
.skip-link { background: var(--ink); color: #fff; left: 18px; padding: 10px 14px; position: fixed; top: -60px; z-index: 100; }
.skip-link:focus { top: 18px; }

.topbar { backdrop-filter: blur(18px); background: color-mix(in srgb, var(--paper) 87%, transparent); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.nav { align-items: center; display: flex; justify-content: space-between; min-height: 72px; }
.brand { align-items: center; display: inline-flex; font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; font-size: 16px; font-weight: 800; gap: 9px; letter-spacing: -.02em; }
.brand-mark { align-items: center; background: var(--ink); border-radius: 50%; color: var(--paper); display: inline-flex; font-family: Georgia, serif; font-size: 16px; font-weight: 500; height: 29px; justify-content: center; width: 29px; }
.nav-links { align-items: center; display: flex; font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; gap: 3px; }
.nav-links a { border-radius: 99px; color: var(--muted); font-size: 13px; padding: 8px 11px; transition: background 180ms ease, color 180ms ease; }
.nav-links a:hover { background: rgba(255, 255, 255, .65); color: var(--ink); }
.menu-button { display: none; }

.hero { min-height: min(780px, calc(100svh - 72px)); padding: 72px 0 84px; }
.hero-grid { align-items: center; display: grid; gap: clamp(42px, 7vw, 94px); grid-template-columns: minmax(0, .95fr) minmax(390px, .85fr); }
.eyebrow, .section-label { color: var(--verdigris); font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.eyebrow { align-items: center; background: rgba(255,255,255,.45); border: 1px solid var(--line); border-radius: 99px; display: inline-flex; gap: 8px; letter-spacing: .035em; padding: 7px 11px; text-transform: none; }
.status-dot { background: var(--terracotta); border-radius: 99px; box-shadow: 0 0 0 4px rgba(169,86,58,.13); height: 6px; width: 6px; }
h1 { font-size: clamp(48px, 5.4vw, 76px); margin-top: 23px; max-width: 690px; }
h1 em { color: var(--terracotta); font-style: normal; }
.hero-lede { color: var(--muted); font-size: clamp(17px, 1.7vw, 20px); margin-top: 24px; max-width: 560px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 31px; }
.button { align-items: center; border: 1px solid transparent; border-radius: 99px; display: inline-flex; font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; font-size: 14px; font-weight: 750; gap: 9px; justify-content: center; min-height: 47px; padding: 0 19px; transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--ink); box-shadow: 0 12px 25px rgba(29,33,29,.2); color: var(--paper-bright); }
.button-primary:hover { box-shadow: 0 16px 30px rgba(29,33,29,.28); }
.button-secondary { background: rgba(255,255,255,.52); border-color: var(--line); }
.button-secondary:hover { background: var(--paper-bright); }
.hero-facts { display: flex; gap: 24px; margin-top: 34px; }
.hero-facts div { border-left: 1px solid var(--line); padding-left: 12px; }
.hero-facts dt { font-size: 16px; line-height: 1.1; }
.hero-facts dd { color: var(--muted); font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; font-size: 11px; margin: 3px 0 0; }

.hero-art { min-height: 550px; padding: 38px 12px 38px 0; position: relative; }
.hero-art::before { background: var(--verdigris-soft); border-radius: 50%; content: ""; filter: blur(1px); height: 430px; position: absolute; right: -15px; top: 45px; width: 430px; }
.gallery-board { background: linear-gradient(135deg, #d5b47f, #bd9056); box-shadow: var(--shadow); height: 453px; margin-left: auto; max-width: 432px; overflow: hidden; position: relative; transform: rotate(3deg); width: 100%; }
.gallery-board::before { background-image: radial-gradient(rgba(80, 51, 18, .17) 1px, transparent 1.5px); background-size: 8px 8px; content: ""; inset: 0; opacity: .38; position: absolute; }
.board-label { color: rgba(42, 30, 16, .7); font-family: ui-sans-serif, sans-serif; font-size: 11px; font-weight: 850; left: 24px; letter-spacing: .12em; line-height: 1.3; position: absolute; top: 23px; }
.board-label span { font-size: 7px; letter-spacing: .08em; }
.artifact { align-items: center; background: rgba(255, 247, 225, .9); box-shadow: 0 8px 14px rgba(62, 41, 18, .2); display: flex; flex-direction: column; justify-content: center; position: absolute; }
.artifact small { bottom: 8px; color: #574b3c; font-family: ui-sans-serif, sans-serif; font-size: 9px; position: absolute; }
.artifact-jar { height: 195px; left: 39px; top: 104px; transform: rotate(-7deg); width: 143px; }
.artifact-jar span { background: #4f807a; border: 8px solid #dfebdc; border-radius: 42% 42% 34% 34% / 20% 20% 55% 55%; box-shadow: inset 10px 0 0 rgba(255,255,255,.18), inset -10px 0 0 rgba(0,0,0,.08); height: 105px; position: relative; width: 66px; }
.artifact-jar span::before { background: #4f807a; border-radius: 3px 3px 0 0; content: ""; height: 30px; left: 17px; position: absolute; top: -26px; width: 31px; }
.artifact-mask { height: 150px; right: 28px; top: 75px; transform: rotate(6deg); width: 119px; }
.artifact-mask span { background: #b97b52; border-radius: 46% 46% 42% 42%; box-shadow: inset 9px 0 rgba(255,255,255,.11); height: 85px; position: relative; width: 61px; }
.artifact-mask span::before { background: #392c26; border-radius: 50%; box-shadow: 27px 0 #392c26, 12px 24px 0 -2px #392c26; content: ""; height: 7px; left: 11px; position: absolute; top: 28px; width: 7px; }
.artifact-scroll { bottom: 39px; height: 115px; right: 78px; transform: rotate(-8deg); width: 178px; }
.artifact-scroll span { background: linear-gradient(150deg, transparent 35%, #426e61 36% 39%, transparent 40%), linear-gradient(32deg, transparent 52%, #658173 53% 57%, transparent 58%), #ece0b9; height: 70px; width: 129px; }
.board-note { background: var(--ink); bottom: 25px; color: var(--paper); display: flex; gap: 8px; left: 21px; padding: 8px 9px; position: absolute; transform: rotate(1deg); }
.board-note span { color: var(--ochre); font-family: ui-sans-serif,sans-serif; font-size: 17px; font-weight: 800; line-height: 1; }
.board-note p { font-family: ui-sans-serif,sans-serif; font-size: 8px; line-height: 1.35; }
.pin { background: #d94e38; border: 2px solid rgba(255,255,255,.45); border-radius: 50%; box-shadow: 0 2px 3px rgba(0,0,0,.25); height: 13px; position: absolute; width: 13px; }
.pin-one { left: 28px; top: 82px; }.pin-two { right: 20px; top: 54px; }
.art-caption { bottom: 1px; color: var(--muted); font-size: 13px; position: absolute; right: 2px; transform: rotate(-2deg); }

.section { padding: 120px 0; }
.statement-band { background: var(--ink); color: var(--paper); padding: 47px 0; }
.statement-grid { align-items: center; display: grid; gap: 42px; grid-template-columns: .38fr 1fr; }
.statement-grid .section-label { color: var(--ochre); }.statement-grid > p:last-child { font-size: clamp(22px, 2.5vw, 34px); letter-spacing: -.04em; line-height: 1.42; max-width: 730px; }.statement-grid strong { color: var(--ochre); font-weight: 500; }
.section-heading { max-width: 680px; }.section-heading h2, .archive-copy h2, .privacy-layout h2, .closing h2 { font-size: clamp(38px, 4vw, 58px); margin-top: 15px; }.section-heading > p:last-child { color: var(--muted); font-size: 18px; margin-top: 19px; }
.feature-grid { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); margin-top: 55px; }
.feature-card { background: rgba(251,248,241,.65); border: 1px solid var(--line); min-height: 380px; overflow: hidden; padding: 23px; position: relative; }
.feature-number { color: var(--terracotta); font-family: ui-sans-serif,sans-serif; font-size: 11px; font-weight: 800; letter-spacing: .08em; }.feature-card h3 { font-size: 27px; margin-top: 26px; }.feature-card > p { color: var(--muted); font-size: 15px; margin-top: 13px; max-width: 290px; }
.feature-icon { background: var(--verdigris-soft); height: 154px; margin: 16px 0 0 auto; overflow: hidden; position: relative; width: 100%; }.feature-card-sticker .feature-icon { background: #e9d8ca; }.feature-card-board .feature-icon { background: #e3c890; }
.icon-frame i { background: #fcfaf3; border: 3px solid var(--ink); height: 93px; left: 50%; position: absolute; top: 28px; transform: translateX(-50%) rotate(-4deg); width: 115px; }.icon-frame b { background: var(--terracotta); border-radius: 50%; height: 40px; left: calc(50% - 20px); position: absolute; top: 54px; width: 40px; }
.icon-sticker i { background: #d1a572; border-radius: 48% 48% 40% 40%; bottom: 22px; height: 90px; left: calc(50% - 26px); position: absolute; width: 53px; }.icon-sticker i::before { background: #d1a572; border-radius: 3px; content:""; height: 28px; left: 10px; position:absolute; top:-22px; width: 33px; }.icon-sticker b { border: 4px solid #fffaf0; border-radius: 44% 44% 38% 38%; height: 112px; left: calc(50% - 37px); position: absolute; top: 21px; transform: rotate(7deg); width: 75px; }
.icon-archive i { background: rgba(255,249,231,.9); bottom: 18px; box-shadow: 8px 0 rgba(255,249,231,.75), 16px 0 rgba(255,249,231,.55); height: 102px; left: calc(50% - 52px); position: absolute; transform: rotate(-3deg); width: 86px; }.icon-archive b { background: var(--verdigris); border-radius: 50%; height: 37px; left: calc(50% - 19px); position:absolute; top: 48px; width: 37px; }
.archive-section { background: var(--paper-bright); }.archive-layout { align-items: center; display: grid; gap: 80px; grid-template-columns: .9fr 1.1fr; }.archive-copy > p:not(.section-label) { color: var(--muted); font-size: 17px; margin-top: 23px; max-width: 460px; }.text-link { border-bottom: 1px solid currentColor; display: inline-block; font-family: ui-sans-serif,sans-serif; font-size: 13px; font-weight: 750; margin-top: 30px; padding-bottom: 4px; }.text-link span { color: var(--terracotta); padding-left: 5px; }
.archive-cards { height: 390px; position: relative; }.archive-card { box-shadow: var(--shadow); position: absolute; }.card-back { align-items: flex-start; background: var(--verdigris); color: #ecf0df; display: flex; flex-direction: column; height: 290px; justify-content: space-between; left: 7%; padding: 25px; top: 48px; transform: rotate(-8deg); width: 225px; }.card-back p { font-family: ui-sans-serif,sans-serif; font-size: 10px; letter-spacing: .11em; }.card-back strong { font-family: Georgia,serif; font-size: 56px; font-weight: 400; letter-spacing: -.07em; }.card-back span { font-size: 13px; }.card-front { background: #f7f0df; height: 340px; padding: 22px; right: 3%; top: 12px; transform: rotate(5deg); width: 254px; }.card-category, .card-meta { color: var(--muted); font-family: ui-sans-serif,sans-serif; font-size: 9px; letter-spacing: .08em; }.card-vessel { background: #b68a57; border: 8px solid #e5d3b0; border-radius: 45% 45% 36% 36%; box-shadow: inset 9px 0 rgba(255,255,255,.18); height: 142px; margin: 19px auto; position: relative; width: 86px; }.card-vessel::before { background: #b68a57; border-radius: 2px; content:""; height: 30px; left: 19px; position:absolute; top:-26px; width: 40px; }.card-front h3 { font-size: 25px; }.card-meta { margin-top: 9px; }
.privacy-band { background: var(--verdigris); color: #f4f0e7; }.privacy-layout { align-items: start; display: grid; gap: 96px; grid-template-columns: 1fr 1fr; }.privacy-layout .section-label { color: #dfe8bd; }.privacy-copy { font-size: 17px; }.privacy-copy p + p { margin-top: 18px; }.privacy-copy .button { margin-top: 29px; }.privacy-copy .button-secondary { background: rgba(255,255,255,.11); border-color: rgba(255,255,255,.38); color: #fffdf5; }
.closing { background: linear-gradient(135deg, #efe1c9, #e1c4a0); overflow: hidden; position: relative; text-align: center; }.closing::after { border: 1px solid rgba(169,86,58,.22); border-radius: 50%; content:""; height: 500px; left: 50%; position:absolute; top: -260px; transform: translateX(-50%); width: 500px; }.closing-inner { position: relative; z-index: 1; }.closing h2 { margin-top: 13px; }.closing-inner > p:last-child { color: var(--muted); margin-top: 22px; }
.footer { background: var(--ink); color: var(--paper); padding: 32px 0; }.footer-grid { align-items: center; display: grid; gap: 22px; grid-template-columns: 1fr auto 1fr; }.footer .brand-mark { background: var(--paper); color: var(--ink); }.footer p, .footer-links { color: #aaa99e; font-family: ui-sans-serif,sans-serif; font-size: 12px; }.footer-links { display: flex; gap: 17px; justify-content: end; }.footer-links a:hover { color: var(--paper); }

.legal-main { padding: 85px 0 110px; }.legal-document { margin: 0 auto; width: min(calc(100% - 40px), 760px); }.legal-document .section-label { margin-bottom: 16px; }.legal-document h1 { font-size: clamp(43px, 5vw, 66px); }.legal-updated { color: var(--muted); font-family: ui-sans-serif,sans-serif; font-size: 13px; margin-top: 18px; }.legal-intro { border-bottom: 1px solid var(--line); color: var(--muted); font-size: 19px; margin: 31px 0 48px; padding-bottom: 39px; }.legal-document section + section { margin-top: 37px; }.legal-document h2 { font-size: 28px; margin-bottom: 11px; }.legal-document p, .legal-document li { color: #44473f; font-size: 16px; }.legal-document p + p { margin-top: 13px; }.legal-document ul { margin: 12px 0 0; padding-left: 1.25em; }.legal-document li + li { margin-top: 7px; }.legal-document a { border-bottom: 1px solid var(--terracotta); color: var(--terracotta); }.legal-document .legal-note { background: rgba(220,231,223,.65); border-left: 3px solid var(--verdigris); margin-top: 43px; padding: 19px 20px; }

[data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 660ms ease, transform 660ms ease; }.is-visible { opacity: 1; transform: translateY(0); }.feature-card:nth-child(2) { transition-delay: 90ms; }.feature-card:nth-child(3) { transition-delay: 180ms; }
@media (max-width: 720px) { .container { width: min(100% - 40px, var(--max)); }.nav { min-height: 63px; }.menu-button { background: transparent; border: 1px solid var(--line); border-radius: 99px; color: var(--ink); display: inline-flex; font-family: ui-sans-serif,sans-serif; font-size: 12px; padding: 6px 10px; }.nav-links { align-items: stretch; background: var(--paper-bright); border-bottom: 1px solid var(--line); display: none; left: 0; padding: 10px 20px 17px; position: absolute; right: 0; top: 63px; }.nav-links.is-open { display: flex; flex-direction: column; }.nav-links a { padding: 9px 0; }.hero { padding: 52px 0 56px; }.hero-grid, .archive-layout, .privacy-layout, .statement-grid { grid-template-columns: 1fr; }.hero-grid { gap: 28px; }.hero-art { min-height: 438px; padding: 12px 0 31px; }.hero-art::before { height: 335px; right: -70px; top: 17px; width: 335px; }.gallery-board { height: 360px; max-width: 340px; }.artifact-jar { height: 157px; left: 27px; top: 82px; width: 114px; }.artifact-jar span { height: 82px; transform: scale(.82); }.artifact-mask { height: 121px; right: 21px; top: 58px; width: 95px; }.artifact-mask span { transform: scale(.82); }.artifact-scroll { bottom: 30px; height: 92px; right: 57px; transform: rotate(-8deg) scale(.78); }.board-note { bottom: 17px; left: 15px; }.board-label { left: 18px; top: 15px; }.art-caption { font-size: 11px; }.hero-facts { gap: 13px; }.hero-facts div { padding-left: 8px; }.section { padding: 76px 0; }.statement-band { padding: 37px 0; }.statement-grid { gap: 15px; }.feature-grid { grid-template-columns: 1fr; margin-top: 35px; }.feature-card { min-height: 340px; }.archive-layout { gap: 38px; }.archive-cards { height: 334px; transform: scale(.87); transform-origin: left top; width: 115%; }.privacy-layout { gap: 28px; }.footer-grid { align-items: start; grid-template-columns: 1fr; }.footer-links { justify-content: start; }.legal-main { padding: 58px 0 75px; }.legal-intro { font-size: 17px; }.legal-document h2 { font-size: 25px; } }
@media (max-width: 360px) { .legal-document { width: calc(100% - 32px); }.legal-document h1 { font-size: 42px; }.legal-document h2 { font-size: 24px; }.legal-document p, .legal-document li { font-size: 15px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } [data-reveal] { opacity: 1; transform: none; } }