/* ==========================================================================
   Base stylesheet — amirkhesro.com
   Mobile first. No framework, no JavaScript. Lora is self hosted: nothing
   is fetched from Google, or anywhere else, when a page loads.
   ========================================================================== */

/* --- Typeface ------------------------------------------------------------
   Lora, as a variable font covering weights 400 to 700 in one file per
   subset, so regular and bold cost a single download rather than two.
   Latin and Latin Extended only: enough for English plus accented names
   and place names, without carrying Cyrillic or maths symbols nobody here
   will read. Licence in /src/fonts/OFL.txt.
   ------------------------------------------------------------------------ */

@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/lora-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: "Lora";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/lora-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-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

@font-face {
  font-family: "Lora";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/lora-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: "Lora";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/lora-italic-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-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

/* --- Design tokens -------------------------------------------------------
   The palette is drawn from the book covers. The accent is the misty pine
   green behind the title on Whispers Through the Fog; the background and
   ink are warmed to sit with it rather than fighting it. Contrast ratios
   below are against --bg and were measured, not estimated.
   ------------------------------------------------------------------------ */

:root {
  --bg: #faf7f2;              /* warm off white, never pure white */
  --text: #1a1a18;            /* deep near black ink        16.3:1 */
  --muted: #55524c;           /* dates, footer               7.3:1 */
  --accent: #2d5a45;          /* forest green, from the cover 7.4:1 */
  --accent-hover: #1f4331;    /* the same green, deeper     10.3:1 */
  --accent-visited: #3f6b56;  /* deliberately close to --accent 5.7:1 */
  --rule: #e6e0d6;            /* hairline borders, warm */
  --card: #fffdfa;            /* a shade lighter than the page */
  --placeholder: #ece6db;     /* space held for a cover while it loads */

  /* Two soft layers: a tight one that seats the cover on the page and a
     wider, fainter one for the lift. Tinted with the ink rather than pure
     black so it stays warm. Enough to read as a physical book, not enough
     to notice as an effect. */
  --cover-shadow:
    0 1px 2px rgba(26, 26, 24, 0.07),
    0 6px 16px rgba(26, 26, 24, 0.10);

  --measure: 47.65rem;        /* content column width */
  --gutter: 1.6rem;           /* keeps text off the screen edge */

  /* Two steps carry the whole vertical rhythm: one between the major
     sections of a page, one around the blocks inside them. Everything
     else is measured off these, so a section break is the same distance
     on the home page as it is halfway down a blog post. */
  --space-section: 3rem;
  --space-block: 2.25rem;

  --serif: "Lora", Georgia, "Times New Roman", serif;
}

/* --- Base --------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* The reader's own browser setting is the baseline; body then takes it up
   a notch. Every rem on the page is measured against that untouched root,
   so someone who has enlarged their default still gets it honoured. */
html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--serif);
  font-size: 1.1rem;
  line-height: 1.7;
}

/* --- Layout ------------------------------------------------------------- */

/* One centred column. The borders on header and footer run full width,
   while their contents line up with the text. */
.header-inner,
main,
footer {
  max-width: var(--measure);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

main {
  padding-top: var(--space-section);
  padding-bottom: var(--space-section);
}

/* --- Vertical rhythm -----------------------------------------------------
   Every major block on a page sits the same distance below the one before
   it: each <section>, the cover or photo lede that opens a book or About
   page, and any closing paragraph that follows a section.
   ------------------------------------------------------------------------ */

main > section,
main > .book-lede,
main > .about-lede,
main > section + p {
  margin-top: var(--space-section);
}

/* That gap belongs to the block, so whatever the block opens with — a
   heading, a cover, a paragraph — starts flush against it rather than
   adding a second gap of its own. */
main > section > :first-child,
.book-lede > :first-child,
.about-lede > :first-child,
.book-lede > section > :first-child,
.about-lede > section > :first-child {
  margin-top: 0;
}

/* --- Header and navigation -----------------------------------------------
   One bar across the top: the name on the left, the page links on the
   right. Below the breakpoint where the whole row fits, the links collapse
   behind a button — but only where the script driving that button is
   running. Without it the button never appears and the links sit on the
   page as an ordinary stacked list, which is the state this section is
   written from: everything the script needs is added on top of it.
   ------------------------------------------------------------------------ */

header {
  border-bottom: 1px solid var(--rule);
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}

/* Pushes everything after it to the right of the bar. */
.site-title {
  margin-right: auto;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
}

.site-title:visited {
  color: var(--text);
}

.site-title:hover,
.site-title:focus-visible {
  color: var(--accent);
}

/* --- The menu button -----------------------------------------------------
   Hidden until the script announces itself, so it can never be a control
   that does nothing. It is a <button>, so the site's button styling has to
   be undone: this one is a plain piece of text with an icon beside it.
   ------------------------------------------------------------------------ */

.nav-toggle {
  display: none;
}

.js .nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.3rem 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--accent);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.3;
  cursor: pointer;
}

.js .nav-toggle:hover,
.js .nav-toggle:focus-visible {
  background: none;
  color: var(--accent-hover);
}

/* Three rules, drawn rather than fetched. */
.nav-toggle-icon {
  position: relative;
}

.nav-toggle-icon,
.nav-toggle-icon::before,
.nav-toggle-icon::after {
  display: block;
  width: 1.15rem;
  height: 2px;
  background: currentColor;
}

.nav-toggle-icon::before,
.nav-toggle-icon::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-toggle-icon::before {
  top: -0.36rem;
}

.nav-toggle-icon::after {
  top: 0.36rem;
}

/* --- The links ---------------------------------------------------------- */

#site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 1.3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

#site-nav a {
  display: inline-block;
  font-size: 1rem;
  text-decoration: none;
}

#site-nav a:hover,
#site-nav a:focus-visible {
  text-decoration: underline;
}

/* The page you are on: darker than the accent and never underlined,
   so it reads as a label rather than somewhere left to go. */
#site-nav a[aria-current="page"],
#site-nav a[aria-current="page"]:hover,
#site-nav a[aria-current="page"]:focus-visible {
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}

/* --- Narrow screens: the collapsing menu ---------------------------------
   The list drops onto its own full width row beneath the bar. Where the
   script is running it starts closed and the button opens it; where it is
   not, it is simply always there.
   ------------------------------------------------------------------------ */

@media (max-width: 61.99em) {
  #site-nav {
    flex-basis: 100%;
  }

  .js #site-nav {
    display: none;
  }

  .js #site-nav.is-open {
    display: block;
  }

  /* One link per row, each a comfortable tap target, divided by the same
     hairline the rest of the site uses. */
  #site-nav ul {
    flex-direction: column;
    gap: 0;
    margin-top: 0.7rem;
  }

  #site-nav li {
    margin: 0;
    border-top: 1px solid var(--rule);
  }

  #site-nav a {
    display: block;
    padding: 0.7rem 0;
  }
}

/* --- Wide screens: the whole bar on one row ------------------------------
   The name and the six links sit on one row inside the same column the
   text below uses. The breakpoint is where that row comfortably fits.
   ------------------------------------------------------------------------ */

@media (min-width: 62em) {
  /* Every link is on the bar, so there is nothing left to open. */
  .js .nav-toggle {
    display: none;
  }

  /* A shade smaller than the stacked version, and closely spaced: seven
     items and the name have to share one column width, and these are the
     values that leave the row comfortably inside it rather than filling it
     to the last pixel. */
  #site-nav ul {
    gap: 1.05rem;
  }

  #site-nav a {
    font-size: 0.95rem;
  }
}

/* --- Links -------------------------------------------------------------- */

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

a:visited {
  color: var(--accent-visited);
}

a:hover,
a:focus-visible {
  color: var(--accent-hover);
  text-decoration-thickness: 2px;
}

/* --- Buttons ------------------------------------------------------------
   The accent carrying white text, which clears AAA at 7.9:1. Nothing on
   the site uses this yet; it is here so that anything that becomes a
   button later inherits the palette instead of inventing its own.
   ------------------------------------------------------------------------ */

.button,
button,
input[type="submit"] {
  display: inline-block;
  padding: 0.6rem 1.15rem;
  border: 1px solid transparent;
  border-radius: 4px;
  background: var(--accent);
  color: #fff;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
}

.button:visited {
  color: #fff;
}

.button:hover,
.button:focus-visible,
button:hover,
button:focus-visible,
input[type="submit"]:hover,
input[type="submit"]:focus-visible {
  background: var(--accent-hover);
  color: #fff;
}

/* --- Headings -----------------------------------------------------------
   Sizes step 1.9x, 1.4x, 1.1x against the body text, so the three levels
   stay clearly apart from one another without any of them shouting.
   ------------------------------------------------------------------------ */

h1,
h2,
h3 {
  font-family: var(--serif);
  line-height: 1.25;      /* tighter than body copy */
  font-weight: 700;
  text-wrap: balance;
}

h1 {
  margin: 0 0 1.15rem;
  font-size: 2.1rem;      /* 1.91x body */
  letter-spacing: -0.01em;
}

h2 {
  margin: var(--space-section) 0 0.85rem;
  font-size: 1.55rem;     /* 1.41x body */
}

h3 {
  margin: var(--space-block) 0 0.7rem;
  font-size: 1.25rem;     /* 1.14x body */
}

/* --- Body copy ---------------------------------------------------------- */

p {
  margin: 0 0 1.3rem;
}

ul,
ol {
  margin: 0 0 1.3rem;
  padding-left: 1.7rem;
}

li {
  margin-bottom: 0.45rem;
}

blockquote {
  margin: var(--space-block) 0;
  padding-left: 1.25rem;
  border-left: 3px solid var(--rule);
}

blockquote p:last-child {
  margin-bottom: 0;
}

/* Attribution line under a quotation. */
blockquote cite {
  display: block;
  margin-top: 0.55rem;
  color: var(--muted);
  font-size: 0.95rem;
  font-style: normal;
}

hr {
  height: 0;
  margin: var(--space-section) 0;
  border: 0;
  border-top: 1px solid var(--rule);
}

/* Post and listing dates. Kept on one line so a date never breaks in half. */
time {
  color: var(--muted);
  font-size: 0.95rem;
  white-space: nowrap;
}

/* --- Media -------------------------------------------------------------- */

/* Never let an image push past the column or distort. */
img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: var(--space-block) 0;
}

/* Markdown wraps each image in its own paragraph. Where an italic line
   follows, it is that image's caption, so close the gap and let the two
   read as one unit instead of the caption drifting toward the next block. */
p:has(> img):has(+ p > em:first-child) {
  margin-bottom: 0;
}

p:has(> img):has(+ p > em:first-child) > img {
  margin-bottom: 0.55rem;
}

/* --- Home page ---------------------------------------------------------- */

.intro {
  font-size: 1.15rem;
}

/* One column on small screens; two side by side from 40em up. */
.book-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.4rem;
  margin: 0 0 1.3rem;
  padding: 0;
  list-style: none;
}

.book-card {
  margin: 0;
  padding: 1.4rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--card);
}

/* Both covers are exactly 2:3 at source, so declaring that ratio matches
   the artwork rather than cropping it, and holds the space while the
   image loads. The pair stay the same shape and size wherever they sit
   together. Width is a percentage first and a maximum second: on a narrow
   phone the cover shrinks to the card instead of forcing the page sideways. */
.book-cover {
  width: 100%;
  max-width: 17rem;
  aspect-ratio: 2 / 3;
  margin: 0 0 1.15rem;
  border: 1px solid var(--rule);
  background: var(--placeholder);
  object-fit: cover;
  box-shadow: var(--cover-shadow);
}

/* Book pages: the cover sits above the description by default, at a size
   that still leaves the opening paragraphs in view on a phone. */
.book-cover-full {
  width: 100%;
  max-width: 20rem;
  aspect-ratio: 2 / 3;
  border: 1px solid var(--rule);
  background: var(--placeholder);
  object-fit: cover;
  box-shadow: var(--cover-shadow);
}

/* Contains the float below, so a cover or photo can never reach past the
   text it sits beside into the sections that follow it. */
.book-lede,
.about-lede {
  display: flow-root;
}

/* The cover on a home page card is a link to that book's page. Its hover
   cue is the cover's own hairline warming to the accent: a colour change
   and nothing else, so the cover never shifts under the pointer. */
.book-cover-link {
  display: inline-block;
  text-decoration: none;
}

.book-cover-link:hover .book-cover,
.book-cover-link:focus-visible .book-cover {
  border-color: var(--accent);
}

.book-title {
  margin: 0 0 0.4rem;
  font-size: 1.15rem;
}

.book-tagline {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
}

/* --- About page --------------------------------------------------------- */

/* The author photo gets the covers' treatment, at a narrower width than
   theirs: it is a 3:4 portrait, so the covers' 18rem would read as far
   heavier on the page. The ratio matches the file exactly, so nothing is
   cropped. Above the biography by default, alongside it from tablet width
   up. */
.author-photo {
  width: 100%;
  max-width: 14rem;
  aspect-ratio: 224 / 299;
  border: 1px solid var(--rule);
  border-radius: 4px;
  object-fit: cover;
  box-shadow: var(--cover-shadow);
}

/* --- Blog page -----------------------------------------------------------
   A short reading path above the full list, for someone who has just been
   diagnosed and does not know which post to open first. It borrows the
   card the home page gives the books: enough to lift it off the page and
   set it apart from the list below, and nothing beyond that.
   ------------------------------------------------------------------------ */

.start-here {
  padding: 1.4rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--card);
}

/* Smaller than a section heading elsewhere on the site: this is a signpost
   into the list, not a division of the page. */
.start-here h2 {
  font-size: 1.3rem;
}

.start-here p {
  color: var(--muted);
  font-size: 1rem;
}

/* The card's own padding closes the block, so the list adds nothing. */
.start-here ul {
  margin-bottom: 0;
}

/* --- Footer ------------------------------------------------------------- */

footer {
  margin-top: var(--space-section);
  padding-top: 1.9rem;
  padding-bottom: 3.4rem;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.95rem;
}

footer p {
  margin: 0;
}

/* The health disclaimer sits below the copyright line. Quiet, but still
   at 7.3:1 against the page: small print a reader can actually read. */
.footer-disclaimer {
  margin-top: 0.8rem;
  line-height: 1.6;
}

/* --- Larger screens ----------------------------------------------------- */

@media (min-width: 40em) {
  /* One step wider apart once there is room for it. Raising the token
     opens up section breaks, rules and the footer together. */
  :root {
    --space-section: 3.6rem;
  }

  h1 {
    font-size: 2.5rem;
  }

  h2 {
    font-size: 1.7rem;
  }

  .book-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* --- Book and About pages, wider screens ---------------------------------
   Once the column is wide enough to carry two things side by side, the
   cover or photo moves alongside the text. A float rather than a grid
   column: the text runs several times the height of the image, so it
   should close back over the full width underneath rather than leaving a
   tall empty channel.
   ------------------------------------------------------------------------ */

@media (min-width: 48em) {
  .book-lede .book-cover-full,
  .about-lede .author-photo {
    float: left;
    margin: 0.35rem 2rem 1.5rem 0;
  }

  .book-lede .book-cover-full {
    width: 18rem;
  }

  .about-lede .author-photo {
    width: 14rem;
  }
}