:root {
  --night: #070c1c; --night-2: #0b1226; --panel: #111a35; --line: #2a3760;
  --gold: #ffd27a; --cream: #fff4e0; --text: #f3f6ff; --text-soft: #d3dcf5;
  --display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --body: "Atkinson Hyperlegible", Verdana, sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0; color: var(--text); font-family: var(--body); font-size: 20px; line-height: 1.65;
  background: linear-gradient(180deg, var(--night-2) 0%, var(--night) 420px) var(--night);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--gold); }
.wrap { width: 100%; max-width: 760px; margin: 0 auto; padding: 0 24px; }
.top { display: flex; align-items: center; justify-content: space-between; padding: 20px 0; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); font-weight: 700; font-size: 21px; }
.brand img { width: 36px; height: 36px; border-radius: 9px; }
.back { font-size: 18px; text-underline-offset: 4px; white-space: nowrap; }
h1 { font-family: var(--display); font-weight: 600; font-size: clamp(40px, 7vw, 60px); line-height: 1.05; color: var(--cream); margin: 36px 0 8px; }
.date { color: var(--text-soft); font-size: 17px; margin: 0 0 28px; }
.short { background: var(--panel); border: 1px solid var(--gold); border-radius: 20px; padding: 24px 26px; margin: 0 0 36px; }
.short h2 { margin: 0 0 10px; font-family: var(--body); font-size: 17px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); }
.short ul { margin: 0; padding-left: 22px; }
.short li { margin-bottom: 6px; }
.short li::marker { color: var(--gold); }
main h2 { font-family: var(--display); font-weight: 600; font-size: 32px; line-height: 1.15; color: var(--cream); margin: 44px 0 10px; }
main p, main li { margin: 0 0 12px; }
main ul { padding-left: 24px; margin: 0 0 12px; }
main li::marker { color: var(--gold); }
footer { border-top: 1px solid var(--line); margin-top: 64px; padding: 28px 0 48px; font-size: 18px; }
footer nav { display: flex; flex-wrap: wrap; gap: 10px 24px; }
footer a { color: var(--text); }

/* light looks - follow the choice made on the home page */
html[data-look="morning"] { --night: #fbf3e4; --night-2: #fff4df; --panel: #fff; --line: #e6d3ad; --gold: #9a5b00; --cream: #17203d; --text: #1f2a4a; --text-soft: #3d4763; }
html[data-look="sky"]     { --night: #f1f7fc; --night-2: #dcedf9; --panel: #fff; --line: #c9dcec; --gold: #1f5f99; --cream: #14294a; --text: #1e3355; --text-soft: #3a4d6b; }
html[data-look="sage"]    { --night: #f3f6ee; --night-2: #e3eeda; --panel: #fff; --line: #cfdcc2; --gold: #3f6b3a; --cream: #1c3324; --text: #24402d; --text-soft: #3f5645; }
html[data-look="dusk"]    { --night: #faf1f3; --night-2: #f6e1e2; --panel: #fff; --line: #e6cfd8; --gold: #8a3f66; --cream: #33203f; --text: #3b2748; --text-soft: #55405f; }
html[data-look="linen"]   { --night: #fdfcf9; --night-2: #f6f2ea; --panel: #fff; --line: #e4ded2; --gold: #7a5a1e; --cream: #22262e; --text: #2b3038; --text-soft: #474d57; }
html[data-tone="light"] .short { box-shadow: 0 6px 20px rgba(40,35,25,.07); }