/* ==========================================================================
   Tokens
   Visual design is deliberately unfinished. What is fixed here is the
   structure: a dual type scale, logical-property layout, and script-aware
   font selection.
   ========================================================================== */

:root {
  /* Type scale (Latin). Minor third. */
  --step--1: 0.833rem;
  --step-0: 1rem;
  --step-1: 1.2rem;
  --step-2: 1.44rem;
  --step-3: 1.728rem;
  --step-4: 2.074rem;

  --measure: 68ch;
  --leading: 1.6;
  --leading-tight: 1.25;

  --space: 1rem;
  --space-s: 0.5rem;
  --space-l: 2rem;
  --space-xl: 4rem;

  --ink: #16150f;
  --ink-muted: #5c594d;
  --paper: #fdfcf8;
  --rule: #d9d5c6;
  --accent: #8a3a2b;

  /* `Blog Latin` and `Blog Arabic` are alias names declared by the @font-face
     blocks below, not real typefaces. The indirection keeps the typeface
     choice in one place, and gives each script its own face to hang
     `unicode-range` and `size-adjust` on.

     --font-latin is for UI chrome that never carries Kurdish; body text uses
     --font-body, which covers both scripts. */
  --font-latin: 'Blog Latin', Charter, 'Iowan Old Style', Georgia, serif;

  /* One stack, two scripts: unicode-range picks the face per glyph.
     Both webfonts must come before any fallback, and the generic `serif` must
     appear exactly once, at the very end — a generic matches every character,
     so anything listed after one is unreachable. */
  --font-body: 'Blog Latin', 'Blog Arabic', Charter, 'Iowan Old Style', Georgia,
    'Noto Naskh Arabic', 'Scheherazade New', serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --ink: #e8e4d8;
    --ink-muted: #9b968a;
    --paper: #16150f;
    --rule: #34322a;
    --accent: #d98f6a;
  }
}

:root[data-theme='dark'] {
  --ink: #e8e4d8;
  --ink-muted: #9b968a;
  --paper: #16150f;
  --rule: #34322a;
  --accent: #d98f6a;
}

/* ==========================================================================
   Fonts

   EB Garamond (Latin) and Scheherazade New (Arabic), both OFL — see
   src/fonts/NOTICE.md. Installed and measured by scripts/install-fonts.py.

   The two faces are separate families split by `unicode-range`, both listed
   in --font-body. The browser then picks the face per glyph, including mid
   word, with no markup and no JavaScript.

   `size-adjust: 108.5%` comes from measurement, not taste: EB Garamond's
   x-height is 0.400 em while Scheherazade's letter bodies sit at 0.369 em.
   Body height is what sets perceived text size in running prose, so that is
   the anchor. Scheherazade's alef is much taller (0.705 em, landing at
   0.765 em once scaled) — that is a line-height requirement, not a size one,
   which is why the Kurdish leading is raised further down.
   ========================================================================== */

@font-face {
  font-family: 'Blog Latin';
  src: url('/fonts/latin.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  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: 'Blog Latin';
  src: url('/fonts/latin-italic.woff2') format('woff2');
  font-weight: 400 800;
  font-style: italic;
  font-display: swap;
  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;
}

/* Arabic, Arabic Supplement and Extended-A, the zero-width joiners that
   shaping depends on, and the presentation forms. Every Sorani letter
   (ڕ ڵ ێ ۆ ە ھ ژ گ چ پ ڤ) lives in U+0600-06FF. */
@font-face {
  font-family: 'Blog Arabic';
  src: url('/fonts/arabic.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  size-adjust: 108.5%;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF,
    U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFF;
}

/* Scheherazade ships a real bold, so synthesis is never needed. It has no
   italic — Arabic script does not use one — so font-synthesis is disabled to
   stop the browser inventing a slanted version inside an <em>. */
@font-face {
  font-family: 'Blog Arabic';
  src: url('/fonts/arabic-bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
  size-adjust: 108.5%;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF,
    U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFF;
}

/* ==========================================================================
   Base
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--leading);
  text-rendering: optimizeLegibility;
}

/* Arabic script needs more leading than Latin at the same size. Applied by
   language rather than by direction, so a Kurdish quote inside an English
   page gets it too. */
:lang(ckb),
:lang(ar),
:lang(fa),
[dir='rtl'] {
  line-height: calc(var(--leading) + 0.25);
  letter-spacing: 0;
}

/* Scheherazade has a real bold and no italic. Without this the browser
   invents a slanted Arabic inside <em>, which is wrong for the script. */
:lang(ckb),
:lang(ar),
:lang(fa) {
  font-synthesis: none;
}

/* Arabic has no italic, so emphasis has to be carried some other way. */
:lang(ckb) em,
:lang(ar) em,
:lang(fa) em {
  font-style: normal;
  font-weight: 700;
}

/* Isolation is the whole point of a <bdi>; make it explicit rather than
   relying on the UA stylesheet. */
bdi {
  unicode-bidi: isolate;
}

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

/* ==========================================================================
   Layout — logical properties only.
   No `left`, `right`, `margin-left` or `padding-right` anywhere in this file;
   every one of them would break the RTL layout. `npm run lint:css` enforces it.
   ========================================================================== */

.site-header,
.site-footer,
main {
  max-inline-size: var(--measure);
  margin-inline: auto;
  padding-inline: var(--space);
}

.site-header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space);
  align-items: baseline;
  justify-content: space-between;
  padding-block: var(--space-l) var(--space);
  border-block-end: 1px solid var(--rule);
}

.site-header__brand {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2em 0.9em;
  text-decoration: none;
  color: inherit;
}

/* Both names are the title, so neither is subordinated. The Kurdish line
   needs no size correction — size-adjust on the Arabic face already matches
   the two scripts. */
.site-header__name {
  font-size: var(--step-1);
  line-height: 1.4;
}

.site-header__name:lang(ckb) {
  color: var(--ink-muted);
}

.site-header__brand:hover .site-header__name {
  color: var(--accent);
}

.site-nav {
  display: flex;
  gap: var(--space);
}

.site-nav a {
  color: var(--ink-muted);
  text-decoration: none;
}

.site-nav a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.site-footer {
  margin-block-start: var(--space-xl);
  padding-block: var(--space-l);
  border-block-start: 1px solid var(--rule);
  color: var(--ink-muted);
}

/* The small type goes on the contents, not the box: --measure is in ch, so
   shrinking the box's own font-size would shrink the box and misalign the
   footer rule with the header's. */
.site-footer > * {
  font-size: var(--step--1);
  margin-block: 0;
}

.skip-link {
  position: absolute;
  inset-inline-start: -9999px;
}

.skip-link:focus {
  inset-inline-start: var(--space);
  inset-block-start: var(--space);
  position: fixed;
  background: var(--paper);
  padding: var(--space-s);
}

main {
  padding-block: var(--space-l);
}

/* ==========================================================================
   Prose
   ========================================================================== */

.post__title,
.page__title {
  font-size: var(--step-4);
  line-height: var(--leading-tight);
  margin-block: 0 var(--space-s);
  text-wrap: balance;
}

/* Headings set their own tight leading, which overrides the raised Kurdish
   value above. At 1.25 Scheherazade's alef and its marks clip, so give any
   right-to-left or Kurdish heading room back. */
:is(h1, h2, h3, h4, .post__title, .page__title):is(:lang(ckb), :lang(ar), [dir='rtl']) {
  line-height: 1.5;
}

.post__meta {
  color: var(--ink-muted);
  font-size: var(--step--1);
  margin-block: 0 var(--space-l);
}

.post__tags {
  margin-inline-start: var(--space-s);
}

.prose > * + * {
  margin-block-start: var(--space);
}

.prose h2 {
  font-size: var(--step-2);
  line-height: var(--leading-tight);
  margin-block-start: var(--space-l);
}

.prose h3 {
  font-size: var(--step-1);
  line-height: var(--leading-tight);
  margin-block-start: var(--space-l);
}

/* markdown-it-anchor wraps each heading's text in a link so it can be
   deep-linked. Without this the headings read as links. */
.prose :is(h1, h2, h3, h4, h5, h6) a {
  color: inherit;
  text-decoration: none;
}

.prose :is(h1, h2, h3, h4, h5, h6) a:hover {
  text-decoration: underline;
}

.prose img {
  max-inline-size: 100%;
  block-size: auto;
}

/* Border and padding are on the inline-start edge, so the quote bar moves to
   the right side automatically in an RTL block. */
.prose blockquote {
  margin-inline: 0;
  padding-inline-start: var(--space);
  border-inline-start: 3px solid var(--rule);
  color: var(--ink-muted);
}

.prose ul,
.prose ol {
  padding-inline-start: var(--space-l);
}

.prose code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  /* An identifier split across a line break is hard to read in any script,
     and in a right-to-left paragraph the trailing fragment lands at the far
     end of the next line. Keep code spans whole. */
  white-space: nowrap;
}

/* A long span still has to fit on a narrow screen, so allow it to break
   there rather than forcing the page to scroll sideways. */
@media (max-width: 30rem) {
  .prose code {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* Code is always LTR, even inside a right-to-left paragraph. */
.prose code,
.prose pre {
  direction: ltr;
  unicode-bidi: isolate;
}

.prose pre {
  overflow-x: auto;
  padding: var(--space);
  border: 1px solid var(--rule);
  text-align: start;
}

.wikilink--broken {
  color: var(--accent);
  text-decoration: underline wavy;
}

/* ==========================================================================
   Callouts
   ========================================================================== */

.callout {
  margin-inline: 0;
  padding: var(--space);
  border: 1px solid var(--rule);
  border-inline-start-width: 3px;
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}

.callout__title {
  margin-block: 0 var(--space-s);
  font-weight: 600;
  text-transform: capitalize;
}

.callout > :last-child {
  margin-block-end: 0;
}

/* ==========================================================================
   Landing plate
   ========================================================================== */

.hero__plate {
  margin: 0 0 var(--space-l);
}

/* site.description does double duty: the meta description, and the one line
   under the plate. Centred to sit with the plate above it. */
.hero__poem {
  max-inline-size: 36ch;
  margin-inline: auto;
  margin-block: 0 var(--space-xl);
  text-align: center;
  color: var(--ink-muted);
}

.hero__poem blockquote,
.hero__poem p {
  margin: 0;
}

.hero__poem figcaption {
  margin-block-start: var(--space-s);
  font-size: 0.9em;
}

.hero__poem figcaption::before {
  content: '— ';
}

.hero__poem cite {
  font-style: normal;
}

.hero__plate img {
  display: block;
  inline-size: 100%;
  max-inline-size: 14rem;
  block-size: auto;
  margin-inline: auto;
}

/* ==========================================================================
   Post list
   ========================================================================== */

.post-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.post-list > li + li {
  margin-block-start: var(--space-l);
}

/* Each entry is laid out in its own language, so a Kurdish post's date sits
   under its title rather than across the column from it. */
.post-list > li {
  text-align: start;
}

.post-list__title {
  font-size: var(--step-1);
  margin-block: 0 0.2em;
}

.post-list__title a {
  color: inherit;
  text-decoration: none;
}

.post-list__title a:hover {
  color: var(--accent);
  text-decoration: underline;
}


.post-list__date {
  color: var(--ink-muted);
  font-size: var(--step--1);
}

/* ==========================================================================
   Font coverage probe (/font-check/)
   ========================================================================== */

.glyph-row {
  font-size: var(--step-3);
  line-height: 2;
  word-spacing: 0.3em;
}

.size-probe {
  font-size: var(--step-2);
  margin-block: 0.2em;
}