/*
  Shared base for every page (homepage, book pages and the 404 page): fonts, colour tokens,
  page defaults, buttons, header, footer, skip link and the modal dialog.
  Page-specific styles live in home.css, book.css and 404.css, which load after this file.
  Fonts are declared only here. Body text is Hanken Grotesk; Cormorant Garamond is for titles.
*/

@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/cormorant-garamond-500.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:500;font-display:swap;src:url(fonts/cormorant-garamond-500italic.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/cormorant-garamond-600.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/hanken-grotesk-400.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/hanken-grotesk-500.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/hanken-grotesk-600.woff2) format("woff2")}

/* Tokens. --accent is the current book's colour: book pages set it on <body>, the homepage sets it from home.js. */
:root{
  color-scheme:dark;
  --ink:#fff;
  --soft:#d4cdc4;
  --muted:#aaa;
  --line:#292929;
  --card:#0b0b0b;
  --accent:#fb8000;
  --accent-ink:#000;
}
*{box-sizing:border-box}
html{background:#000}
body{margin:0;background:#000;color:var(--ink);font:400 16px/1.6 "Hanken Grotesk",system-ui,sans-serif}

/* Synopsis text, identical on the homepage panel and the book pages. */
.syn{color:var(--soft);white-space:pre-line}

/* Text for screen readers only (used for the book announcement on the homepage). */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Focus ring. */
a:focus-visible,button:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* Skip link: hidden until it receives keyboard focus. */
.skip-link{position:absolute;left:12px;top:-60px;z-index:10000;padding:10px 16px;background:#fff;color:#000;font:600 14px/1.2 "Hanken Grotesk",system-ui,sans-serif;text-decoration:none;transition:top .15s}
.skip-link:focus{top:12px}
main:focus{outline:none}

/* Header. Pages declare viewport-fit=cover, so on notched phones they draw edge to edge. The header is stuck to the very top
   of the screen, so it carries the notch inset in its own top padding and the logo always sits below the notch (zero elsewhere). */
.site-header{display:block;position:sticky;top:0;z-index:60;width:100%;text-align:center;background:#000;padding:calc(25px + env(safe-area-inset-top,0px)) 12px 14px;border-bottom:1px solid #202020}
.site-header .logo{display:block;width:100%;margin:0 auto;color:#fff;text-decoration:none;text-align:center;text-transform:uppercase;letter-spacing:.12em;line-height:1.1;white-space:normal;font:500 clamp(28px,5vw,44px)/1.1 "Cormorant Garamond",Georgia,serif}
.site-header .logo span{display:inline-block}
@media(min-width:900px) and (hover:hover){.site-header{padding:calc(14px + env(safe-area-inset-top,0px)) 12px 12px}}
@media(max-width:620px){.site-header .logo{font-size:clamp(20px,6vw,34px);white-space:nowrap}}

/* Footer. Its bottom padding clears the home bar on notched phones. */
.site-footer{display:grid;grid-template-columns:1fr;justify-items:center;gap:6px;width:100%;margin-top:8px;padding:28px 12px calc(28px + env(safe-area-inset-bottom,0px));background:#000;border-top:1px solid var(--line);color:var(--muted);text-align:center;font:400 14px/1.6 "Hanken Grotesk",system-ui,sans-serif}
.site-footer span{display:block}
.site-footer a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.site-footer a:hover,.site-footer a:focus-visible{color:var(--accent)}
/* No-JavaScript e-mail line: the address is put together here from two data attributes, so it is readable but is never one string in the HTML. */
.site-footer .mail-text{display:inline}
.mail-text::before{content:"Email: " attr(data-u) "@" attr(data-d)}

/* Buttons. .stores holds the row of buy buttons; each button is a .btn (a .ghost one is the outlined kind). */
.stores{display:flex;flex-wrap:wrap;gap:8px}
.btn{display:inline-block;padding:10px 16px;border:1px solid var(--accent);border-radius:0;background:var(--accent);color:var(--accent-ink);font:600 15px/1.4 "Hanken Grotesk",system-ui,sans-serif;text-decoration:none;cursor:pointer;transition:background .3s,color .3s,filter .2s}
.btn:hover{filter:brightness(1.12)}
.btn.ghost{background:transparent;color:var(--ink)}

/* Amazon store selector, under the buy buttons. */
.region{display:flex;align-items:center;gap:10px;margin-top:16px;font:500 13px/1 "Hanken Grotesk",system-ui,sans-serif;color:var(--muted)}
.region select{background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:2px;padding:7px 8px;font:inherit;max-width:100%}

/* Modal dialog (built by dialogs.js; used for Contact on every page). */
.dialog-overlay{position:fixed;inset:0;z-index:101;background:rgba(0,0,0,.66);display:grid;place-items:center;padding:clamp(16px,4vw,40px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease,visibility .3s ease;overflow-y:auto}
.dialog-overlay.is-open{opacity:1;visibility:visible;pointer-events:auto}
.dialog-panel{position:relative;width:min(620px,100%);max-height:min(85vh,850px);max-height:min(85dvh,850px);overflow-y:auto;background:var(--card);border:1px solid #303030;border-top:3px solid var(--accent);padding:clamp(24px,5vw,48px);box-shadow:0 20px 70px rgba(0,0,0,.7);transform:translateY(16px) scale(.985);transition:transform .35s cubic-bezier(.2,.8,.2,1);cursor:default}
.dialog-overlay.is-open .dialog-panel{transform:none}
.dialog-panel h2{font:500 clamp(36px,6vw,50px)/1.1 "Cormorant Garamond",Georgia,serif;text-align:center;margin:0 0 25px}
.dialog-panel a{color:var(--ink);text-decoration-color:var(--accent);text-underline-offset:4px}
.dialog-close{position:absolute;right:14px;top:12px;border:1px solid #444;background:#141414;color:#fff;width:36px;height:36px;font:24px/1 Arial,sans-serif;cursor:pointer;transition:background .2s,border-color .2s}
.dialog-close:hover{background:#252525;border-color:var(--accent)}
@media(prefers-reduced-motion:reduce){.dialog-overlay,.dialog-panel{transition:none}}

/* About-the-author content (the page at /about/). */
.about{display:grid;grid-template-columns:1fr;justify-items:center;gap:28px;margin-top:30px}
.about>div{text-align:left;width:min(68ch,100%)}
.about>div::after{content:"";display:block;clear:both}
.about p{margin:0 0 16px;font-size:18px;line-height:1.8}
.about a{color:var(--ink);text-decoration-color:var(--accent);text-underline-offset:3px}
.me{float:left;object-fit:cover;margin:4px 28px 10px 0;border:1px solid var(--line);width:170px;height:170px;border-radius:2px}
@media(max-width:620px){.me{width:112px;height:112px;margin-right:17px}.about p{font-size:16px}}

/* Contact dialog content. */
.contact-options{display:grid;gap:14px;margin-top:28px}
.contact-options p{margin:0}
.contact-options a{color:var(--ink);text-decoration-color:var(--accent);text-underline-offset:4px}
.contact-options button{justify-self:start;padding:0;border:0;background:none;color:var(--ink);font:inherit;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.contact-copy-status{min-height:1.4em;color:var(--muted);font-size:.9em}
.mail-providers{display:flex;flex-wrap:wrap;gap:8px 20px;list-style:none;margin:-6px 0 0;padding:0}