/* Thamarat home page mockup: tokens, fonts, shared primitives.
   Section styles live in css/sections/, one file per section. */

@font-face {
  font-family: "IBM Plex Serif";
  src: url("../fonts/ibm-plex-serif-normal-400.51510a05d22d.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Serif";
  src: url("../fonts/ibm-plex-serif-normal-500.09835dd6c12e.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Serif";
  src: url("../fonts/ibm-plex-serif-italic-400.8bf3540a460d.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-normal-400.d28498895ed7.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aref Ruqaa";
  src: url("../fonts/aref-ruqaa-400-arabic.072e901aa76e.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFC;
}
@font-face {
  font-family: "Aref Ruqaa";
  src: url("../fonts/aref-ruqaa-700-arabic.54b92985fb80.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFC;
}
/* The text face for Arabic. Through unicode-range it is only downloaded when a page
   has Arabic letters in it (an Arabic page, or the switcher's العربية). */
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("../fonts/ibm-plex-sans-arabic-400-arabic.4fa3d81d41ab.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFC;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("../fonts/ibm-plex-sans-arabic-600-arabic.64891a810259.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFC;
}

:root {
  /* Palette: the Ghost theme tokens */
  --paper: #F7F3EA;
  --forest: #1F3A2E;
  --forest-deep: #0F1F18;
  --amber: #E8B547;
  --terracotta: #C95E3F;
  --olive: #7A8A4C;
  /* Two terracotta tones so the Arabic thread passes contrast on both grounds */
  --terracotta-ink: #A8472B;   /* on paper */
  --terracotta-soft: #E58A68;  /* on forest */

  --ink: var(--forest);
  --ink-muted: rgba(31, 58, 46, .78);
  --rule: rgba(31, 58, 46, .16);
  --on-dark: var(--paper);
  --on-dark-muted: rgba(247, 243, 234, .82);
  --rule-on-dark: rgba(247, 243, 234, .18);

  --font-display: "IBM Plex Serif", "IBM Plex Sans Arabic", Georgia, "Times New Roman", serif;
  --font-body: "IBM Plex Sans", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-arabic: "Aref Ruqaa", "Geeza Pro", "Noto Naskh Arabic", serif;

  --gutter: clamp(1.25rem, 5vw, 3rem);
  --container: 77.5rem;
  /* Reading column of articles and text pages, and an article's wider lead photo. The
     sizes attributes in update_page.html and updates/blocks/image.html assume them. */
  --measure: 46rem;
  --measure-wide: 62rem;
  --section: clamp(4.5rem, 10vw, 8.5rem);
  --header-h: 4.5rem;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-block-start: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-inline-size: 100%; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.022em;
  text-wrap: balance;
  overflow-wrap: break-word;
}
h1 em, h2 em { font-style: italic; font-weight: 400; }

/* Arabic: no tracking, no italics. Applies to Arabic words on any page; the
   Arabic pages themselves get the stronger rules at the end of this file. Aref
   Ruqaa is only for the name in the footer (footer.css). */
:lang(ar) {
  letter-spacing: 0;
  font-style: normal;
}

.container {
  inline-size: 100%;
  max-inline-size: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  inset-block-start: .5rem;
  inset-inline-start: .5rem;
  z-index: 100;
  padding: .75rem 1rem;
  background: var(--forest-deep);
  color: var(--paper);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

:focus-visible {
  outline: 3px solid var(--terracotta);
  outline-offset: 3px;
}

/* Buttons: filled for the main action, outline for the second one. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-block-size: 3rem;
  padding: .8rem 1.5rem;
  border: 1.5px solid var(--amber);
  border-radius: 2px;
  background: var(--amber);
  color: var(--forest-deep);
  font: 600 1rem/1.2 var(--font-body);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s;
}
.btn:hover { background: var(--paper); border-color: var(--paper); color: var(--forest-deep); }
.btn:active { transform: translateY(1px); }

.btn--outline {
  background: transparent;
  border-color: currentColor;
  color: inherit;
}
.btn--outline:hover { background: var(--paper); border-color: var(--paper); color: var(--forest-deep); }

/* Variants for light and amber grounds */
.btn--dark { background: var(--forest); border-color: var(--forest); color: var(--paper); }
.btn--dark:hover { background: var(--forest-deep); border-color: var(--forest-deep); color: var(--paper); }

.arrow {
  inline-size: 1.1em;
  block-size: 1.1em;
  flex: none;
  transition: transform .25s;
}
[dir="rtl"] .arrow { transform: scaleX(-1); }
a:hover > .arrow { transform: translateX(.25em); }
[dir="rtl"] a:hover > .arrow { transform: scaleX(-1) translateX(.25em); }

/* Email addresses (email_link tag): the address drawn as glyph outlines, so scrapers find no
   text. The rect is the font's own underline; hide it where links are not underlined. */
.email { display: inline-block; text-decoration: none; }
.email__text { display: inline-block; fill: currentColor; overflow: visible; }
/* The selectable text the script lays over the outlines: same font and advances, no ink */
.email__select { fill: transparent; direction: ltr; font-kerning: none; font-variant-ligatures: none; }
.site-footer__links .email__rule { display: none; }
.site-footer__links a:hover .email__rule { display: initial; }
.prose .email:hover .email__rule { fill: var(--terracotta); }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: .3em;
}
.text-link:hover { text-decoration-color: var(--terracotta); }

/* Reveal on scroll. Content is only hidden when the script is running. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(1.75rem);
  transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1);
  transition-delay: var(--reveal-delay, 0s);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* Arabic pages (<html lang="ar" dir="rtl">). The text is set in IBM Plex Sans Arabic,
   which follows the Latin face in both font stacks. Arabic has no italic and breaks
   apart when tracked, and its marks need more line height than the Latin settings.
   These rules beat the section rules that set italics, tracking or tight leading. */
:root:lang(ar) { font-synthesis: none; }
:root:lang(ar) body { line-height: 1.75; }
:root:lang(ar) :is(h1, h2, h3, p, em, blockquote, a, li, dd, dt, span) { letter-spacing: 0; }
:root:lang(ar) :is(em, blockquote, .site-footer__tagline) { font-style: normal; }
:root:lang(ar) :is(h1, h2, h3) { line-height: 1.3; }