:root { --night:#171C3F; --deep:#10142E; --moon:#F2C14E; --paper:#FBFAF5; --text:#E4E3F1; --muted:#A3A7CC; --rule:#2C3266;
  --display:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua","Noto Serif",Georgia,serif;
  --body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; }
* { box-sizing:border-box; }
html { color-scheme:dark; }
body { margin:0; background:var(--night); color:var(--text); font:17px/1.6 var(--body); -webkit-text-size-adjust:100%; }
a { color:var(--moon); } :focus-visible { outline:3px solid var(--moon); outline-offset:3px; border-radius:4px; }
img { max-width:100%; height:auto; display:block; }
.wrap { max-width:1040px; margin:0 auto; padding:0 22px; }
header.top { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 0; }
.brand { display:flex; align-items:center; gap:10px; font:600 1.3rem/1 var(--display); color:var(--paper); text-decoration:none; }
.brand svg { width:34px; height:34px; flex:none; }
nav a { color:var(--text); text-decoration:none; margin-left:20px; font-size:.95rem; } nav a:hover { color:var(--moon); }
h1, h2, h3 { font-family:var(--display); color:var(--paper); font-weight:600; margin:0; line-height:1.15; }
h1 { font-size:clamp(2.1rem,6vw,3.5rem); } h2 { font-size:clamp(1.6rem,4vw,2.2rem); margin:0 0 22px; } h3 { font-size:1.45rem; }
p { margin:0 0 14px; max-width:62ch; } .lead { font-size:1.15rem; color:var(--text); } .muted { color:var(--muted); }
.btn { display:inline-block; background:var(--moon); color:#1B1B2E; font-weight:650; text-decoration:none; padding:13px 24px; border-radius:999px; }
.btn:hover { background:#F7D377; } .btn.quiet { background:none; color:var(--paper); border:1.5px solid var(--rule); }

/* a drawing is a sheet of paper lying on the night */
.sheet { background:var(--paper); padding:10px; border-radius:6px; box-shadow:0 18px 40px -18px rgba(0,0,0,.7); display:block; }
.sheet img { border-radius:2px; width:100%; }
.tilt-l { transform:rotate(-1.6deg); } .tilt-r { transform:rotate(1.4deg); }
.tratto { display:block; width:100%; overflow:visible; margin-top:14px; } .tratto path { fill:none; stroke-width:5; stroke-linecap:round; filter:url(#pastello); }

.hero { display:grid; grid-template-columns:1fr 1.1fr; gap:48px; align-items:center; padding:36px 0 70px; }
.hero .lead { margin:18px 0 26px; }
section { padding:56px 0; border-top:1px solid var(--rule); }
.tale { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:40px; align-items:center; padding:30px 0; text-decoration:none; color:inherit; }
.tale:nth-of-type(even) .sheet { order:2; }
.tale h3 { margin-bottom:10px; } .tale:hover h3 { color:var(--moon); }
.meta { font-size:.92rem; color:var(--muted); margin-top:10px; }
.verse { font:italic 1.3rem/1.6 var(--display); color:var(--paper); border-left:3px solid var(--moon); padding:4px 0 4px 20px; margin:0 0 22px; white-space:pre-line; }
.player { position:relative; aspect-ratio:16/9; background:var(--deep); border-radius:6px; overflow:hidden; }
.player img, .player iframe { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border:0; }
.player button { position:absolute; inset:0; width:100%; border:0; background:rgba(16,20,46,.28); cursor:pointer; display:grid; place-items:center; }
.player button span { background:var(--moon); color:#1B1B2E; font:650 1.05rem var(--body); padding:14px 26px; border-radius:999px; }
.soon { position:absolute; left:14px; bottom:14px; background:rgba(16,20,46,.82); color:var(--paper); padding:6px 14px; border-radius:999px; font-size:.9rem; }
.gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:34px; }
.two { display:grid; grid-template-columns:1.2fr 1fr; gap:48px; align-items:start; }
footer { border-top:1px solid var(--rule); padding:32px 0 46px; font-size:.9rem; color:var(--muted); }
footer a { color:var(--muted); margin-right:18px; }
@media (max-width:760px) { .hero, .tale, .two { grid-template-columns:1fr; gap:26px; } .hero { padding:16px 0 50px; }
  .tale:nth-of-type(even) .sheet { order:0; } .gallery { grid-template-columns:1fr; } nav a { margin-left:14px; } section { padding:42px 0; } }
@media (prefers-reduced-motion:no-preference) { .tale .sheet { transition:transform .25s; } .tale:hover .sheet { transform:rotate(0) scale(1.01); } }