/* Styles for the generated composition pages (/compositions/<slug>/).
   Kept separate from index.html so all 32 share one cached file. The tokens,
   type and the no-crop cover frame mirror the single-page app deliberately —
   a visitor arriving from search should not be able to tell the difference. */

:root{
  --ivory:#faf7f1; --surface:#ffffff; --ink:#17161a; --muted:#6b6660;
  --rule:#e2dcd1; --rule-soft:#d8d1c5; --brass:#8a6b3d; --brass-dark:#5f4826;
  --night:#0e0e12; --cream:#f7f3ea; --sand:#8f8879; --gold:#c8a35a;
  --display:'Bodoni Moda',Georgia,'Times New Roman',serif;
  --body:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
  --gutter:72px;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--ivory);color:var(--ink);font-family:var(--body);
  font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--brass);text-decoration:none}
a:hover{color:var(--brass-dark)}
h1,h2{margin:0;font-family:var(--display);font-weight:600;line-height:1.1}
sup{font-size:.6em;line-height:0;vertical-align:baseline;position:relative;top:-.55em}

/* header */
.site-head{border-bottom:1px solid var(--rule);padding:0 var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.wordmark{display:flex;align-items:baseline;gap:14px;padding:20px 0}
.wordmark__name{font-family:var(--display);font-size:25px;font-weight:700;color:var(--ink)}
.wordmark__sub{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--brass)}
.site-nav{display:flex;align-items:center;gap:28px;font-size:14px}
.site-nav a{color:var(--ink)}
.site-nav a:hover{color:var(--brass)}
.btn-cart{font-family:inherit;font-size:13px;letter-spacing:.06em;background:none;
  border:1px solid var(--ink);padding:10px 18px;cursor:pointer;color:var(--ink)}
.btn-cart:hover{background:var(--ink);color:var(--ivory)}

main{padding:0 var(--gutter) 90px}
.crumbs{font-size:13px;color:var(--muted);padding:26px 0}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--brass)}

/* The cover is never cropped: fixed 3:4 frame, contain, letterboxed in the
   piece's own matte color. Same rule as the catalogue grid. */
.piece{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:56px;align-items:start}
.cover{aspect-ratio:3/4;background:var(--matte,#1a1a1f);display:grid;place-items:center;overflow:hidden}
.cover img{width:100%;height:100%;object-fit:contain}

.eyebrow{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);font-weight:600}
h1{font-size:46px;margin:12px 0 0;text-wrap:balance}
.facts{margin:26px 0 0;border-top:1px solid var(--rule)}
.facts div{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:11px 0;border-bottom:1px solid var(--rule);font-size:15px}
.facts dt{color:var(--muted)}
.facts dd{margin:0}
.price{font-family:var(--display);font-size:30px;margin:26px 0 0}
.price .unavailable{font-family:var(--body);font-size:15px;color:var(--muted);letter-spacing:.04em}
.buy{margin-top:20px;display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;padding:14px 28px;border:1px solid var(--ink);color:var(--ink);
  font-size:13px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;cursor:pointer}
.btn:hover{background:var(--ink);color:var(--ivory)}
.btn--quiet{border-color:var(--rule-soft);color:var(--muted)}
.btn--quiet:hover{background:transparent;border-color:var(--ink);color:var(--ink)}
.note{margin:34px 0 0;max-width:62ch;text-wrap:pretty;color:#2c2a2e}
.note h2{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);
  font-family:var(--body);font-weight:600;margin-bottom:10px}

section.block{margin-top:72px}
section.block > h2{font-size:28px;margin-bottom:20px}
.samples{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;max-width:900px}
.samples img{border:1px solid var(--rule);background:#fff;width:100%;height:auto}
.video{position:relative;max-width:900px;aspect-ratio:16/9;background:#000}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.site-foot{border-top:1px solid var(--rule);padding:30px var(--gutter);
  font-size:13px;color:var(--muted);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

@media (max-width:980px){
  :root{--gutter:40px}
  .piece{grid-template-columns:1fr;gap:34px;max-width:620px}
  h1{font-size:36px}
}
@media (max-width:640px){
  :root{--gutter:20px}
  .site-head{padding-bottom:14px}
  .wordmark__sub{display:none}
  .site-nav{gap:18px;font-size:13px}
  h1{font-size:30px}
  .facts div{grid-template-columns:1fr;gap:2px}
  .samples{grid-template-columns:1fr}
}

/* Long-form pages: license, refunds, privacy. */
.prose{max-width:68ch;padding-bottom:20px}
.prose h1{margin-bottom:8px}
.prose .updated{font-size:13px;color:var(--muted);margin:0 0 36px}
.prose h2{font-size:22px;margin:40px 0 12px}
.prose h3{font-family:var(--body);font-size:15px;font-weight:600;margin:26px 0 6px}
.prose p,.prose li{color:#2c2a2e;text-wrap:pretty}
.prose p{margin:0 0 14px}
.prose ul{margin:0 0 16px;padding-left:22px}
.prose li{margin-bottom:7px}
.prose strong{font-weight:600}
.prose .callout{background:var(--surface);border:1px solid var(--rule);border-left:3px solid var(--brass);padding:16px 18px;margin:0 0 26px;font-size:15px}
.legal-nav{display:flex;gap:22px;flex-wrap:wrap;font-size:14px;padding:0 0 10px;margin-bottom:30px;border-bottom:1px solid var(--rule)}
.legal-nav a[aria-current]{color:var(--ink);font-weight:600}

/* "Email me when this is available" — shown in place of the buy button on the
   six unavailable titles. Posts to Formspree; works without JavaScript, which
   is why it has a real action and a _next redirect. */
.notify{margin-top:22px;border:1px solid var(--rule);background:var(--surface);padding:20px}
.notify h2{font-family:var(--body);font-size:14px;font-weight:600;letter-spacing:.02em;margin:0 0 6px}
.notify p{margin:0 0 14px;font-size:14px;color:var(--muted);max-width:46ch}
.notify .row{display:flex;gap:10px;flex-wrap:wrap}
.notify input[type=email]{flex:1 1 220px;min-width:0;font:inherit;font-size:15px;
  padding:12px 14px;border:1px solid var(--rule-soft);background:#fff;color:var(--ink)}
.notify input[type=email]:focus{outline:2px solid var(--brass);outline-offset:-1px;border-color:var(--brass)}
.notify button{font-family:inherit;white-space:nowrap}
.notify .hp{position:absolute;left:-9999px}
.notify .said{font-size:14px;color:var(--brass-dark);margin:0}