:root { --ink:#29251f; --muted:#81796f; --paper:#f1eee8; --card:#fbfaf6; --line:#dcd5c9; --wine:#763b3a; --blush:#f1e2df; --gold:#b18a47; }
:root { --muted:#645c53; }
.beta-banner,.notice { padding:14px 18px; background:var(--blush); font-size:.86rem; line-height:1.6; }
.notice:empty { display:none; }
.notice.error { color:#822b26; border:1px solid #bf817b; }
.exhibit-canvas { display:block; width:100%; height:auto; border:1px solid var(--line); }
.exhibit-actions { flex-wrap:wrap; }
.exhibit-panel { overflow-wrap:anywhere; }
.disclaimer,.privacy-section,.micro-copy { color:var(--muted); line-height:1.6; }
.disclaimer { font-size:.78rem; }
.privacy-section { margin-top:40px; font-size:.85rem; max-width:850px; }
.privacy-section h2 { margin-bottom:14px; font-size:1.3rem; }
#remove-photo { margin:10px 0 22px; }
.secondary-button,summary { min-height:44px; }
.exhibit-actions a { display:inline-flex; align-items:center; text-decoration:none; }
button:disabled { opacity:.55; cursor:wait; }
button:focus-visible,summary:focus-visible,a:focus-visible { outline:3px solid var(--wine); outline-offset:3px; }
details { margin:18px 0; }
summary { padding:12px 0; cursor:pointer; }
a { color:var(--wine); }
* { box-sizing:border-box; } body { margin:0; color:var(--ink); background:var(--paper); font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } .site-header { max-width:1130px; margin:auto; padding:28px 32px; display:flex; justify-content:space-between; align-items:center; } .brand { display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; font-size:1.1rem; font-weight:800; letter-spacing:-.05em; } .brand-mark { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; color:#fff; background:var(--wine); font-family:Georgia,serif; } .header-note { color:var(--muted); font-size:.79rem; } .page-shell { max-width:1130px; margin:auto; padding:35px 32px 65px; } .hero { display:flex; justify-content:space-between; align-items:flex-end; gap:35px; padding:28px 0 52px; } .eyebrow { margin:0 0 13px; color:var(--wine); font-size:.68rem; font-weight:800; letter-spacing:.14em; } h1,h2,h3,p { margin-top:0; } h1 { max-width:750px; margin-bottom:20px; font-family:Georgia, 'Times New Roman', serif; font-size:clamp(2.7rem,6vw,5.25rem); line-height:.96; letter-spacing:-.075em; font-weight:500; } h1 em { color:var(--wine); font-style:normal; } .hero-copy { max-width:570px; color:var(--muted); line-height:1.65; } .hero-seal { display:grid; place-items:center; align-content:center; flex:none; width:118px; height:118px; border:1px solid var(--gold); border-radius:50%; color:var(--gold); font-family:Georgia,serif; font-size:1.7rem; line-height:.8; transform:rotate(-10deg); } .hero-seal small { margin-top:12px; font-family:inherit; font-size:.46rem; letter-spacing:.15em; line-height:1.3; text-align:center; } .workspace { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:20px; align-items:start; } .panel { padding:28px; border:1px solid var(--line); border-radius:4px; background:var(--card); box-shadow:0 15px 45px rgba(65,49,34,.06); } .panel-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:15px; margin-bottom:24px; } h2 { margin-bottom:0; font-family:Georgia,serif; font-size:1.6rem; font-weight:500; letter-spacing:-.05em; } .step-pill { padding:7px 10px; border-radius:99px; background:var(--blush); color:var(--wine); font-size:.67rem; white-space:nowrap; } label { display:block; margin-bottom:17px; color:var(--muted); font-size:.76rem; font-weight:700; } input,textarea { display:block; width:100%; margin-top:8px; padding:12px 13px; border:1px solid var(--line); border-radius:3px; color:var(--ink); background:#fffefb; font:inherit; outline:none; } input:focus,textarea:focus { border-color:var(--wine); box-shadow:0 0 0 3px rgba(118,59,58,.12); } .primary-button { display:flex; justify-content:space-between; width:100%; padding:14px 16px; border:0; border-radius:3px; color:#fff; background:var(--wine); font:inherit; font-weight:800; cursor:pointer; } .primary-button:hover { background:#5e2f2e; } .micro-copy { margin:13px 0 0; color:#9b9289; font-size:.68rem; line-height:1.5; text-align:center; } .exhibit-panel { min-height:475px; } .empty-state { display:grid; place-items:center; align-content:center; min-height:390px; text-align:center; color:var(--muted); } .empty-icon { display:grid; place-items:center; width:48px; height:48px; margin-bottom:15px; border:1px solid var(--gold); border-radius:50%; color:var(--gold); font-size:1.2rem; } .empty-state h3 { margin-bottom:8px; color:var(--ink); font-family:Georgia,serif; font-size:1.2rem; font-weight:500; } .empty-state p { max-width:250px; font-size:.8rem; line-height:1.55; } .exhibit { min-height:420px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; } .exhibit-label { width:min(100%,430px); padding:35px 27px 29px; border:1px solid var(--gold); background:#fffefb; } .exhibit-label .number { color:var(--gold); font-family:Georgia,serif; font-size:.9rem; } .exhibit-label h2 { margin:20px 0 10px; font-size:2rem; } .exhibit-label .collection { color:var(--wine); font-size:.65rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; } .exhibit-label .rule { width:45px; height:1px; margin:21px auto; background:var(--gold); } .exhibit-label .label-copy { margin:0; color:#625950; font-family:Georgia,serif; font-size:.93rem; line-height:1.55; } .exhibit-label .disclaimer { margin:22px 0 0; color:#988f85; font-size:.63rem; font-style:italic; } .exhibit-actions { display:flex; gap:9px; margin-top:18px; } .secondary-button { padding:11px 13px; border:1px solid var(--line); border-radius:3px; color:var(--ink); background:#fff; font:inherit; font-size:.73rem; font-weight:800; cursor:pointer; } .secondary-button:hover { border-color:var(--wine); color:var(--wine); } footer { max-width:1130px; margin:auto; padding:22px 32px 35px; display:flex; justify-content:space-between; color:#9b9289; font-size:.7rem; } @media (max-width:780px) { .site-header,.page-shell,footer { padding-left:20px; padding-right:20px; } .hero { align-items:flex-start; } .hero-seal { width:90px; height:90px; } .workspace { grid-template-columns:1fr; } } @media (max-width:500px) { .header-note,.hero-seal { display:none; } .panel { padding:21px; } }