/* hussein-akar.com — warm paper for reading, with the header, the book hero and the footer kept dark to match
   the cover. The dark parts simply redeclare the colour tokens (see .dark below).
   Type: Source Serif 4 for headings and long-form reading, Inter for body text and interface,
   Cinzel (the cover face) only for the wordmark. Every font is served from /fonts. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/inter-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 400 700; font-display: swap; src: url("../fonts/inter-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/sourceserif4-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/sourceserif4-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 400 700; font-display: swap; src: url("../fonts/sourceserif4-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cinzel"; src: url("../fonts/Cinzel.ttf") format("truetype"); font-weight: 400 700; font-display: swap; }
:root {
  /* light: cream paper, near-black ink, bronze accents (gold text is too faint on paper) */
  --bg: #f7f3ea; --bg-2: #efe9dc; --bg-3: #fffdf8; --line: #ddd4c3;
  --fg: #1d1a16; --muted: #5f5a50; --gold: #8a6420; --gold-hover: #6b4d15; --gold-tint: rgba(138,100,32,.08);
  --gold-2: #b9893a; --red: #a8301f;
  --display: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --prose: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --wordmark: "Cinzel", "Trajan Pro", Georgia, serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --wrap: 1100px; --measure: 68ch;
  color-scheme: light;
}
/* the dark parts: header, hero, footer (add class="dark" to anything else that should join them) */
.site-header, .hero, .site-footer, .dark {
  --bg: #15171c; --bg-2: #1b1e25; --bg-3: #22262f; --line: #2d313b;
  --fg: #ece6d9; --muted: #a79f90; --gold: #e2b25c; --gold-hover: #f0c678; --gold-tint: rgba(226,178,92,.08);
  --red: #b8372c;
  color: var(--fg); color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* the hidden attribute wins over display rules like .field { display: grid } */
html { scroll-behavior: auto; }
html.smooth { scroll-behavior: smooth; }   /* set once the page has loaded, so a link into the page lands instantly */
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--gold-hover); }
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.12; margin: 0 0 .5em; letter-spacing: -.012em; text-wrap: balance; }
h1 { font-size: clamp(34px, 4.8vw, 58px); }
h2 { font-size: clamp(26px, 3.1vw, 37px); }
h3 { font-size: 21px; line-height: 1.25; }
p { margin: 0 0 1.1em; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--gold); color: #000; padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; }
.eyebrow { font-family: var(--body); font-weight: 600; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; }
.mono { font-family: var(--mono); font-size: .92em; }
.muted { color: var(--muted); }
.rule { width: 72px; height: 2px; background: var(--gold); margin: 22px 0; border: 0; }
.center { text-align: center; }
.center .rule { margin-left: auto; margin-right: auto; }

/* header */
.site-header { border-bottom: 1px solid var(--line); background: rgba(21,23,28,.92); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 10; }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 14px; flex-wrap: wrap; }
.brand { font-family: var(--wordmark); font-weight: 700; font-size: 17px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg); text-decoration: none; }
.nav { display: flex; gap: 4px 20px; flex-wrap: wrap; }
.nav-link { color: var(--muted); text-decoration: none; font-size: 15px; font-weight: 500; padding: 6px 0; border-bottom: 2px solid transparent; }
.nav-link:hover, .nav-link[aria-current="page"] { color: var(--fg); border-bottom-color: var(--gold); }
.nav-toggle { display: none; background: none; border: 1px solid var(--line); border-radius: 4px; width: 42px; height: 38px; align-items: center; justify-content: center; color: var(--fg); cursor: pointer; padding: 0; }
.nav-toggle svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.nav-toggle .x, .site-header.open .nav-toggle .bars { display: none; }
.site-header.open .nav-toggle .x { display: block; }
@media (max-width: 760px) {
  .bar { flex-wrap: nowrap; padding-block: 12px; }
  .nav-toggle { display: inline-flex; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0; background: var(--bg-2); border-bottom: 1px solid var(--line); padding: 4px 20px 10px; box-shadow: 0 24px 40px rgba(0,0,0,.45); }
  .site-header.open .nav { display: flex; }
  .nav-link { font-size: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); }
  .nav-link:last-child { border-bottom: 0; }
  .nav-link:hover, .nav-link[aria-current="page"] { color: var(--gold); border-bottom-color: var(--line); }
  .nav-link:last-child:hover, .nav-link:last-child[aria-current="page"] { border-bottom: 0; }
}

/* buttons */
.btn { display: inline-block; font-family: var(--body); font-weight: 600; font-size: 15px; letter-spacing: .005em; text-decoration: none; padding: 13px 22px; border-radius: 4px; border: 1px solid var(--gold-2); color: #1a1408; background: linear-gradient(180deg, #ecc06e, #cf9d45); transition: transform .12s ease, filter .12s ease; cursor: pointer; line-height: 1.3; }
.btn:hover { filter: brightness(1.06); color: #1a1408; transform: translateY(-1px); }
.btn.ghost { background: transparent; color: var(--gold); }
.btn.ghost:hover { background: var(--gold-tint); color: var(--gold-hover); }
.btn:disabled { opacity: .6; cursor: default; transform: none; }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.btn-note { font-size: 14px; color: var(--muted); margin-top: 10px; }

/* hero */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--bg); }
/* the backdrop is a crop of the cover art, so it is blurred to keep the cover itself the only sharp thing */
.hero::before { content: ""; position: absolute; inset: -24px; background: url("../images/portal-1600.jpg") center/cover no-repeat; filter: blur(8px); transform: scale(1.04); }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(21,23,28,.28) 0%, rgba(21,23,28,.6) 45%, rgba(21,23,28,.76) 70%, rgba(21,23,28,.7) 100%); }
.hero .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(240px, 360px) 1fr; gap: 48px; align-items: center; padding-block: 56px 64px; }
.hero .book { display: block; justify-self: center; }
.hero .book3d { filter: drop-shadow(0 28px 32px rgba(0,0,0,.7)) drop-shadow(0 0 48px rgba(226,178,92,.14)); }
.hero h1 { margin-bottom: 16px; }
.hero .sub { font-size: 18.5px; color: var(--muted); max-width: 52ch; }
.hero .title-line { font-family: var(--prose); font-size: 17px; margin: 18px 0 26px; color: var(--muted); }
.hero .title-line em { font-style: italic; color: var(--gold); }
@media (max-width: 760px) { .hero .wrap { grid-template-columns: 1fr; gap: 28px; } .hero .book { max-width: 250px; } .hero::before { background-image: url("../images/portal-800.jpg"); } }

/* one page: anchor targets clear the sticky header */
section[id], .story { scroll-margin-top: 72px; }
.section .reading { padding-block: 0; }
.card h3 { font-size: 22px; margin-bottom: 10px; }

/* the sample fades out mid-chapter into the call-out */
.sample-cut { -webkit-mask-image: linear-gradient(#000 calc(100% - 200px), transparent); mask-image: linear-gradient(#000 calc(100% - 200px), transparent); padding-bottom: 48px; }
.cliff { position: relative; display: grid; grid-template-columns: 140px 1fr; gap: 32px; align-items: center; margin-top: -32px; padding: 36px 40px; background: var(--bg-3); border: 1px solid rgba(185,137,58,.6); box-shadow: 0 24px 50px rgba(50,35,10,.12); }
.cliff h2 { font-size: clamp(24px, 2.8vw, 32px); margin-bottom: 10px; }
.cliff p { color: var(--muted); font-size: 16.5px; }
.cliff .btn-note { margin-top: 12px; margin-bottom: 0; font-size: 13.5px; }
.cliff .cliff-book { display: block; }
.cliff .book3d { filter: drop-shadow(0 16px 22px rgba(40,30,10,.4)); }
@media (max-width: 640px) { .cliff { grid-template-columns: 1fr; padding: 28px 24px; } .cliff .cliff-book { display: none; } }

/* sections */
.section { padding-block: 64px; border-bottom: 1px solid var(--line); }
.section.alt { background: var(--bg-2); }
.section h2 { margin-bottom: 8px; }
.lede { font-size: 19px; color: var(--muted); max-width: var(--measure); }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-top: 28px; }
.card { background: var(--bg-3); border: 1px solid var(--line); padding: 28px 26px; min-width: 0; display: flex; flex-direction: column; box-shadow: 0 1px 2px rgba(50,35,10,.05); }
.card .quote { font-family: var(--display); font-weight: 600; font-size: 22px; line-height: 1.3; letter-spacing: -.01em; color: var(--fg); margin: 0 0 14px; }
.card .quote::before { content: ""; display: block; width: 44px; height: 1px; background: var(--gold); margin-bottom: 16px; }
.card p { color: var(--muted); font-size: 16px; margin: 0; }
.card .chap { font-family: var(--body); font-weight: 600; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.card h2 { font-size: 25px; margin-bottom: 10px; }
.card p + p { margin-top: 10px; }
.card .btn { margin-top: auto; align-self: flex-start; }
.card p:last-of-type { margin-bottom: 22px; }

.toc { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2px 32px; }
.toc li { display: grid; grid-template-columns: 2.6em 1fr; gap: 10px; padding: 14px 0; border-top: 1px solid var(--line); }
.toc .n { font-weight: 500; color: var(--gold); font-size: 13px; padding-top: 4px; letter-spacing: .08em; }
.toc .t { font-family: var(--display); font-weight: 600; font-size: 18px; margin-bottom: 4px; }
.toc .e { color: var(--muted); font-size: 15.5px; margin: 0; }
.toc .k { color: var(--muted); font-size: 13px; margin-top: 6px; }

.who { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; margin-top: 28px; }
.who h3 { color: var(--gold); font-size: 19px; }
.who p { color: var(--muted); font-size: 16px; }

.author { display: grid; grid-template-columns: 220px 1fr; gap: 40px; align-items: start; margin-top: 10px; }
.author img { border-radius: 4px; border: 1px solid var(--line); aspect-ratio: 1; object-fit: cover; }
.author .photo-fallback { aspect-ratio: 1; border: 1px dashed var(--line); display: grid; place-items: center; color: var(--muted); font-size: 14px; text-align: center; padding: 20px; }
@media (max-width: 700px) { .author { grid-template-columns: 1fr; } .author img, .author .photo-fallback { max-width: 220px; } }

/* newsletter */
.signup { background: var(--bg-3); border: 1px solid var(--line); padding: 32px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px; align-items: center; }
.signup h2 { font-size: 25px; }
.signup form { display: grid; gap: 10px; }
.signup input[type="email"] { font: inherit; font-size: 16px; padding: 13px 14px; border-radius: 4px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); width: 100%; }
.signup input[type="email"]:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.signup .fine { font-size: 13px; color: var(--muted); margin: 0; }
.signup[hidden] { display: none; }
@media (max-width: 760px) { .signup { grid-template-columns: 1fr; } }

/* reading pages */
.reading { max-width: 720px; margin: 0 auto; padding-block: 48px 72px; }
.reading .opener { text-align: center; margin: 48px 0 28px; }
.reading .opener .kicker { font-family: var(--body); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; font-size: 12px; color: var(--gold); margin: 0 0 6px; }
.reading .opener .kicker, .reading .opener .word { display: inline; }   /* "Chapter" and "One" on one line */
.reading .opener .word { font-family: var(--body); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; font-size: 12px; color: var(--gold); margin: 0; }
.reading .opener .word::before { content: " "; }
.reading .opener .name { font-size: clamp(28px, 4vw, 40px); margin: 6px 0 0; }
.prose p { font-family: var(--prose); font-size: 19.5px; line-height: 1.7; margin: 0 0 1.15em; }
.prose .epigraph { font-style: italic; font-size: 21px; text-align: center; color: var(--muted); line-height: 1.5; margin: 0 auto 10px; max-width: 48ch; text-wrap: balance; }
.prose .dropcap::first-letter, .prose p.dropcap:first-letter { font-family: var(--display); font-weight: 600; font-size: 3.4em; float: left; line-height: .85; padding: 6px 8px 0 0; color: var(--fg); }
hr.orn { border: 0; height: 1px; background: var(--line); margin: 26px auto 30px; width: 180px; position: relative; overflow: visible; }
hr.orn::after { content: "◆"; position: absolute; left: 50%; top: -9px; transform: translateX(-50%); color: var(--gold); font-size: 12px; background: var(--bg); padding: 0 8px; }
.takeaway { background: var(--bg-3); border: 1px solid var(--line); border-left: 3px solid var(--gold); padding: 26px 28px; margin: 36px 0; }
.takeaway .kicker { font-family: var(--body); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; font-size: 12px; color: var(--gold); margin: 0 0 4px; }
.takeaway h3 { margin-bottom: 6px; }
.takeaway hr.orn { width: 120px; margin: 14px 0 18px; background: var(--line); }
.takeaway hr.orn::after { background: var(--bg-3); }
.takeaway p { margin: 0; font-size: 17.5px; line-height: 1.65; }
.endcap { text-align: center; border-top: 1px solid var(--line); margin-top: 48px; padding-top: 40px; }
.endcap p { color: var(--muted); max-width: 48ch; margin-left: auto; margin-right: auto; }

/* stories */
.story-list { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 18px; }
.story-list li { border: 1px solid var(--line); background: var(--bg-3); padding: 24px 26px; }
.story-list .meta, .story-head .meta { font-size: 13px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.story-list h3 { margin-bottom: 6px; }
.story-list h3 a { color: var(--fg); text-decoration: none; }
.story-list h3 a:hover { color: var(--gold); }
.story-list p { margin: 0; color: var(--muted); font-size: 16px; }
.story-head { text-align: left; margin: 20px 0 10px; }

/* legal */
.legal { max-width: 720px; margin: 0 auto; padding-block: 48px 72px; }
.legal h2 { font-size: 22px; margin-top: 34px; }
.legal p, .legal li { color: var(--fg); font-size: 16.5px; }
.legal .muted { color: var(--muted); }

/* contact */
.contact-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px; margin-top: 28px; align-items: start; }
.contact-layout.no-form { grid-template-columns: 1fr; }
.contact-side { display: grid; gap: 18px; }
.form { display: grid; gap: 16px; background: var(--bg-3); border: 1px solid var(--line); padding: 28px 26px; }
.form[hidden] { display: none; }
.field { display: grid; gap: 6px; }
.field label { font-size: 14px; font-weight: 500; color: var(--muted); }
.field input, .field select, .field textarea { font: inherit; font-size: 16px; line-height: 1.4; padding: 12px 14px; border-radius: 4px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); width: 100%; }
.field textarea { min-height: 170px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
.form .btn { justify-self: start; }
.form-note { font-size: 13px; color: var(--muted); margin: 0; }
.form-status { margin: 0; font-size: 15px; padding: 12px 14px; border-radius: 4px; border: 1px solid var(--line); background: var(--bg); }
.form-status[hidden] { display: none; }
.form-status[data-state="error"] { border-color: var(--red); color: var(--red); }
.form-status[data-state="ok"] { border-color: var(--gold); color: var(--fg); }
.dark .form-status[data-state="error"] { color: #f0a79f; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.contact-card { align-self: start; }
.email-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--fg); margin: 0 0 10px; }
.iconbtn { background: transparent; border: 1px solid var(--line); color: var(--gold); border-radius: 4px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.iconbtn:hover { border-color: var(--gold); background: var(--gold-tint); }
.iconbtn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.iconbtn .ico-check, .iconbtn.copied .ico-copy { display: none; }
.iconbtn.copied .ico-check { display: block; }
.card-rule { border: 0; height: 1px; background: var(--line); margin: 22px 0 20px; }
.connect { display: flex; flex-wrap: wrap; gap: 10px; }
.connect a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 4px; color: var(--fg); text-decoration: none; font-size: 14.5px; font-weight: 500; }
.connect a:hover { border-color: var(--gold); color: var(--gold); }
.connect svg { width: 16px; height: 16px; fill: currentColor; }
@media (max-width: 760px) { .contact-layout { grid-template-columns: 1fr; } }

/* footer */
.site-footer { border-top: 1px solid var(--line); background: var(--bg-2); margin-top: 0; }
.foot { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; padding-block: 40px 28px; }
.foot-title { font-family: var(--wordmark); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: 14px; margin-bottom: 8px; }
.foot-line { color: var(--muted); font-size: 15px; margin: 0 0 6px; }
.foot-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; align-content: start; }
.foot-nav a { color: var(--muted); text-decoration: none; font-size: 15px; }
.foot-nav a:hover { color: var(--gold); }
.copy { color: var(--muted); font-size: 13px; padding-block: 18px 28px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.social { display: flex; gap: 20px; align-items: center; }
.social a { color: var(--muted); display: inline-flex; width: 22px; height: 22px; }
.social a:hover { color: var(--gold); }
.social svg { width: 100%; height: 100%; fill: currentColor; }
@media (max-width: 700px) { .foot { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { html.smooth { scroll-behavior: auto; } .btn { transition: none; } }
@media (max-width: 600px) { body { font-size: 16.5px; } .prose p { font-size: 18.5px; } .section { padding-block: 48px; } h1 { font-size: 32px; } }