/* ═══ eliphas.net: ONE STYLESHEET FOR EVERY PAGE A READER SEES (2026-09-19) ═══════════════════════════
 *
 * The author, 2026-09-19: "you need to be consistent in the branding, in the link, in the font we chose,
 * all should be consistent". The style sheet this follows, point by point, is
 * docs/website-research/2026-09-19-brand-and-letters.md § The style sheet (approved the same day).
 *
 * ★ LOADED BY EVERY PAGE, ALWAYS AS /site.css (ABSOLUTE): the front page, chapter-one/, next/, review/,
 *   and the PHP pages in /lonewolf/ (confirm.php, unsubscribe.php), which live in another folder and
 *   another deploy. A relative path would break for them. Every url() below is absolute for the same
 *   reason.
 * ★ WHAT LIVES HERE: the faces, the colours, the scale, the header, the footer, the two buttons, the
 *   link and label styles, and the card the one-message pages stand in. A page keeps inline only the
 *   rules that are its own. /signup.js reads the same tokens, each with its fallback.
 * ⚠ NO COLOUR IS TYPED TWICE. If a page needs a grey, it is one of these. The site once had the same
 *   grey typed three ways (#d6d1c4, #dcd7ca, #d9d6cc).
 *
 * Fonts: Alegreya and Alegreya Sans (SIL OFL, fonts/OFL-*.txt), served from this site, no CDN.
 * Alegreya and its italic for text, Alegreya SC for the name, Alegreya Sans SC for labels and buttons.
 */
@font-face{font-family:"Alegreya";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/Alegreya-Regular.woff2) format("woff2")}
@font-face{font-family:"Alegreya";font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/Alegreya-Italic.woff2) format("woff2")}
@font-face{font-family:"Alegreya SC";font-weight:400;font-display:swap;src:url(/fonts/AlegreyaSC-Regular.woff2) format("woff2")}
@font-face{font-family:"Alegreya Sans SC";font-weight:400;font-display:swap;src:url(/fonts/AlegreyaSansSC-Regular.woff2) format("woff2")}
@font-face{font-family:"Alegreya Sans SC";font-weight:700;font-display:swap;src:url(/fonts/AlegreyaSansSC-Bold.woff2) format("woff2")}

:root{
  --night:#0b1015; --pool:#10161d; --panel:#161e27;
  --bone:#e6e1d3; --text:#d6d1c4; --mist:#9aa8b1; --mist-dim:#62707a;
  --lantern:#e29d45; --lantern-hot:#f0b567; --ink:#1b140b;
  --rule:#26313c; --field:#33404c; --error:#e8a08a;
  --serif:"Alegreya",Georgia,"Times New Roman",serif;
  --label:"Alegreya Sans SC","Alegreya SC",system-ui,sans-serif;
}

*{box-sizing:border-box;margin:0}
/* ⚠ THE SITE GROWS WITH A LARGE SCREEN. At a fixed 16px it looked small on the author's 2560-wide monitor,
   and he found it right at 110% zoom. Everything is in rem, so this one line scales text and spacing
   together: 16px up to about 1500px wide, then smoothly to 19px (about 120%) near 2300px. */
html{background:var(--pool);font-size:clamp(16px,calc(10px + .4vw),19px);scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font:1.15rem/1.65 var(--serif);color:var(--bone);background:var(--pool);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit}
img{max-width:100%}
:focus-visible{outline:2px solid var(--lantern);outline-offset:3px}
.wrap{max-width:68rem;margin:0 auto;padding:0 1.5rem}

/* ── the two small-caps voices: the NAME (Alegreya SC, .2em) and a LABEL (Alegreya Sans SC, .12em) ── */
.name{font-family:"Alegreya SC",var(--serif);letter-spacing:.2em;text-transform:lowercase}
.label{font-family:var(--label);font-size:.95rem;letter-spacing:.12em;text-transform:lowercase}

/* ── ONE HEADER: the name, home; Books · Chapter one · About ── */
.site-head .wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-top:1.6rem;padding-bottom:1rem}
.site-head.over{position:absolute;inset:0 0 auto 0;z-index:2}   /* the front page: over the landscape */
.mark{font:400 1.35rem "Alegreya SC",var(--serif);letter-spacing:.2em;text-transform:lowercase;text-decoration:none;color:var(--bone)}
.site-head nav{display:flex;gap:1.8rem}
.site-head nav a{text-decoration:none;color:var(--bone);opacity:.85}
.site-head nav a:hover,.mark:hover{opacity:1;color:var(--lantern-hot)}

/* ── ONE FOOTER: Eliphas Favre · A Chronicle of the Fens · Grantham · the address ── */
.site-foot{border-top:1px solid var(--rule);padding:2.2rem 1.5rem 2.8rem;text-align:center;color:var(--mist-dim);font-size:1rem}
.site-foot .name{color:var(--mist)}
.site-foot a{color:var(--mist)}
.site-foot a:hover{color:var(--lantern-hot)}

/* ── THE TWO BUTTONS: filled amber for the main action, outlined for the second ── */
.btn{display:inline-block;text-align:center;padding:.8rem 1.4rem;background:var(--lantern);color:var(--ink);text-decoration:none;border:0;cursor:pointer;
  font:700 1rem var(--label);letter-spacing:.12em;text-transform:lowercase}
.btn:hover{background:var(--lantern-hot)}
.btn.ghost{background:transparent;color:var(--bone);box-shadow:inset 0 0 0 1px var(--mist-dim)}
.btn.ghost:hover{color:var(--lantern-hot);box-shadow:inset 0 0 0 1px var(--lantern)}
.btn[disabled]{opacity:.6;cursor:default}

/* ── a link that is an action, set like a label (no arrow: the words say where it goes) ── */
.link{color:var(--lantern);text-decoration:none;font:700 1rem var(--label);letter-spacing:.12em;text-transform:lowercase}
.link:hover{color:var(--lantern-hot)}

/* ── THE CARD: the one-message pages (next/, confirm.php, unsubscribe.php) stand in it ── */
.sheet{min-height:100vh;display:flex;flex-direction:column}
.sheet main{flex:1;display:flex;align-items:center;justify-content:center;padding:2.5rem 1rem 3.5rem}
.card{background:var(--panel);max-width:31rem;width:100%;padding:2.6rem 2rem 2rem;border-top:2px solid var(--lantern);box-shadow:0 2rem 4rem rgba(0,0,0,.5)}
.card h1{font:400 1.9rem/1.2 var(--serif);margin-bottom:.8rem}
.card p{color:var(--text);margin-bottom:1rem}
.small,.card .small{font-size:.95rem;color:var(--mist-dim)}

@media (max-width:760px){
  .site-head .wrap{flex-direction:column;gap:.6rem;padding-top:1.1rem}
  .site-head nav{gap:1.3rem}
}