/* Colombina's Two Synchronicities - independent artwork, v1.0, 17 Oct 2026 */
:root{color-scheme:dark;--bg:#06101e;--bg2:#101b36;--ivory:#f9eed8;--gold:#e8c48b;--sky:#9ddaff;--muted:#bbcada}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(ellipse at 10% 8%,#263053 0,transparent 30%),radial-gradient(ellipse at 90% 0%,#112b44 0,transparent 40%),linear-gradient(155deg,#030912,#0c1730 60%,#05101f);color:var(--ivory);font:15px/1.65 system-ui,-apple-system,Segoe UI,Arial,sans-serif}
a{color:#ace8ff}a:hover{color:#ffdf9e}a:focus-visible{outline:3px solid #f6d48e;outline-offset:3px;border-radius:5px}
.shell{width:min(1260px,calc(100% - 32px));margin:22px auto 48px}.nav{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 20px}.nav a,.actions a{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:10px 16px;border-radius:100px;border:1px solid #8294b5;background:#1b3050;color:white;text-decoration:none;font-size:12px;font-weight:750;letter-spacing:.02em}.nav a:hover,.actions a:hover{background:#2d486f;color:white}.actions .gold{background:#d8b474;border-color:#d8b474;color:#132035}.actions .gold:hover{background:#f5dbab;color:#07182a}
.mast{text-align:center;padding:25px 10px 30px}.kicker{margin:0 0 12px;color:#edc68d;font-size:11px;letter-spacing:.23em;font-weight:800;text-transform:uppercase}.mast h1{font:normal clamp(35px,6vw,72px)/1.03 Georgia,'Times New Roman',serif;max-width:1000px;margin:0 auto 14px;letter-spacing:-.035em}.subtitle{font:italic clamp(18px,2.6vw,26px)/1.35 Georgia,serif;color:#d5c7d7;margin:0 auto 15px}.lede{max-width:790px;margin:0 auto;color:#becddd;font-size:15px}.actions{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin:21px auto 0}
.hero{display:grid;grid-template-columns:minmax(0,550px) minmax(0,1fr);gap:25px;align-items:start}.art{border-radius:15px;overflow:hidden;background:#101829;border:1px solid #a78b67;box-shadow:0 19px 60px #0008}.art a{display:block}.art img{display:block;width:100%;height:auto}.art .artnote{padding:10px 16px;text-align:center;font-size:11px;letter-spacing:.02em;color:#afc1d2}
.panel{border-radius:15px;border:1px solid #61728a;background:linear-gradient(160deg,rgba(29,43,71,.96),rgba(12,26,48,.96));padding:24px;box-shadow:0 12px 36px #0006}.panel h2{font:normal 33px/1.1 Georgia,serif;color:#ffdfab;margin:0 0 14px}.panel p{margin:0 0 14px;color:#dae6ed}.panel .small{font-size:12px;color:#adc2d3}.beat{border-top:1px solid #435773;padding:16px 0 3px}.beat:first-of-type{border-top:none;padding-top:5px}.beat h3{margin:0 0 5px;font:700 15px/1.35 system-ui,Arial;color:#f4d6a6}.beat p{font-size:13px;line-height:1.6}.numeric{display:flex;gap:11px;align-items:baseline;color:#a8d5fb;margin:0 0 20px;font:700 clamp(36px,6vw,62px)/1 Georgia,serif;letter-spacing:-.02em}.numeric span{font:14px Georgia,serif;color:#d4b88e}
.note{margin:25px 0 0;padding:18px 22px;border:1px solid #6f7f91;background:#0f1a2d;border-radius:12px}.note h2{font:normal 23px Georgia,serif;color:#efd1a4;margin:0 0 7px}.note p{color:#c7d4e2;margin:0 0 11px}.note p:last-child{margin:0}footer{text-align:center;padding:36px 10px 20px;color:#d5caac}footer .credit{font:italic 18px Georgia,serif;color:#ebc482}footer p{font-size:11px;color:#a2b0c4;margin:9px auto}
@media(max-width:900px){.hero{grid-template-columns:minmax(0,1fr)}.art{max-width:660px;margin:0 auto}.panel{max-width:850px;margin:auto}}
@media(max-width:570px){.shell{width:calc(100% - 18px);margin:10px auto 30px}.mast{padding:14px 6px 20px}.panel{padding:18px}.panel h2{font-size:28px}.actions a{min-height:46px;padding:10px 11px}.nav a{flex:1}.numeric{font-size:44px}.note{padding:16px}}
@media print{body{background:white;color:#222}.nav,.actions{display:none}.hero{display:block}.art{max-width:500px;margin:auto}.panel,.note{color:#222;background:white;box-shadow:none}.panel p,.note p{color:#222}}