/* ═══════════════════════════════════════════════════════════════════════════
   site-theme.css — the landing site's look for the server-rendered public
   pages (the Journal at /blog, its archives and posts, the refund policy).

   The landing page (landing/, React) is the design source: paper #efefef,
   ink #111, one accent (brand blue #2f5bff), the red mark only in the logo,
   Inter Tight / Thmanyah Sans, JetBrains Mono for small labels, rounded-md
   corners, a white frosted navbar with pill links and a black call to action.

   Loaded LAST by public/base.html, after public.css and blog.css, so these
   rules re-point the older editorial tokens rather than rewriting both files.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── faces: the files the landing build already ships ───────────────────── */
@font-face {
  font-family: 'Inter Tight'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/static/landing/fonts/inter-tight/inter-tight-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 Tight'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/static/landing/fonts/inter-tight/inter-tight-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: 'JetBrains Mono'; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url(/static/landing/fonts/jetbrains-mono/jetbrains-mono-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: 'Thmanyah Sans'; font-weight: 300; font-display: swap; src: url(/static/landing/fonts/thmanyahsans/thmanyahsans-Light.woff2) format('woff2'); }
@font-face { font-family: 'Thmanyah Sans'; font-weight: 400; font-display: swap; src: url(/static/landing/fonts/thmanyahsans/thmanyahsans-Regular.woff2) format('woff2'); }
@font-face { font-family: 'Thmanyah Sans'; font-weight: 500; font-display: swap; src: url(/static/landing/fonts/thmanyahsans/thmanyahsans-Medium.woff2) format('woff2'); }
@font-face { font-family: 'Thmanyah Sans'; font-weight: 600 700; font-display: swap; src: url(/static/landing/fonts/thmanyahsans/thmanyahsans-Bold.woff2) format('woff2'); }
@font-face { font-family: 'Thmanyah Sans'; font-weight: 800 900; font-display: swap; src: url(/static/landing/fonts/thmanyahsans/thmanyahsans-Black.woff2) format('woff2'); }

/* ── tokens: the old names, the landing's values ────────────────────────── */
:root {
  --plate:   #efefef;
  --panel:   #ffffff;
  --rule:    #dcdcdc;
  --chamber: #111111;

  --ink:     #111111;
  --ink-2:   #525252;

  /* The old "oxblood" was the one accent; the landing's accent is blue. */
  --oxblood: #2f5bff;
  --emax:    #2f5bff;
  --oxblood-hi: #8ea6ff;
  --emax-hi:    #8ea6ff;

  --tint-ox:   rgba(47, 91, 255, .06);
  --tint-emax: rgba(47, 91, 255, .06);

  --radius: 8px;
  --wrap: 1280px;
  --nav-h: 68px;

  --font-sans: 'Inter Tight', 'Thmanyah Sans', ui-sans-serif, system-ui, sans-serif;
  --font-ar:   'Thmanyah Sans', 'Inter Tight', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

html { font-family: var(--font-sans); overflow-x: clip; }
html[lang="ar"] { font-family: var(--font-ar); }
::selection { background: #2f5bff; color: #fff; }

/* Figures: Inter Tight has tabular digits in both locales. */
.num, html[lang="ar"] .num { font-family: 'Inter Tight', var(--font-ar); }
[lang="ar"] .article-prose table { font-family: 'Inter Tight', var(--font-ar); }

/* Inter Tight runs 400–700: map the old 800/900 and the hairline 250 onto it. */
.j-wordmark .a, .j-term, .h1, .h2 { font-weight: 700; }
.j-wordmark { letter-spacing: -.045em; }
.j-wordmark .b { font-weight: 400; color: var(--oxblood); }
html[lang="ar"] .j-wordmark .b { font-weight: 400; }

/* Small uppercase labels read as the landing's mono eyebrows. */
html[lang="en"] .micro { font-family: var(--font-mono); font-weight: 500; letter-spacing: .08em; }

/* ── buttons: black, rounded, sentence case; blue on hover ──────────────── */
.btn, .btn-text {
  text-transform: none; letter-spacing: -.01em; font-weight: 600; font-size: .9375rem;
}
.btn { border-radius: var(--radius); min-height: 44px; padding: 10px 20px; }
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: #2f5bff; }
.chamber .btn-primary { background: #fff; color: var(--ink); }
.chamber .btn-primary:hover { background: #2f5bff; color: #fff; }
.skip { background: var(--ink); }

/* ── navbar: the landing's white frosted bar ────────────────────────────── */
#main-nav {
  background: rgba(255, 255, 255, .85);
  border-bottom: 1px solid rgba(0, 0, 0, .06);
  backdrop-filter: blur(20px) saturate(180%);
}
.nav-in { height: var(--nav-h); gap: 16px; }
.nav-brand { gap: 8px; flex-shrink: 0; }
.logo-mark { width: auto; height: 28px; flex-shrink: 0; display: block; }
.nav-word { font-weight: 500; font-size: 1.125rem; letter-spacing: -.02em; white-space: nowrap; color: var(--ink); }
.nav-word span { font-weight: 400; opacity: .6; }
html[lang="ar"] .nav-word { font-weight: 600; letter-spacing: 0; }

.nav-links { gap: 2px; margin-inline-end: auto; margin-inline-start: 16px; }
.nav-links a {
  padding: 6px 14px; border-radius: 6px;
  font-size: .875rem; font-weight: 600; letter-spacing: -.01em; text-transform: none;
  color: #525252; text-decoration: none; border: 0;
  transition: background-color .3s, color .3s;
}
.nav-links a:hover { background: rgba(17, 17, 17, .05); color: var(--ink); }
.nav-links a[aria-current="page"] { background: var(--ink); color: #fff; border: 0; padding-block-end: 6px; }

.nav-right { gap: 8px; }
.lang {
  display: inline-flex; align-items: center; gap: 2px; padding: 3px;
  border-radius: 8px; background: rgba(17, 17, 17, .05);
}
.lang a {
  min-width: 30px; padding: 4px 8px; border-radius: 6px; text-align: center;
  font-size: .75rem; font-weight: 600; color: #525252; text-decoration: none; letter-spacing: 0;
}
.lang a.on { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.lang a[lang="ar"] { font-family: var(--font-ar); }
.nav-signin {
  padding: 6px 12px; border-radius: 6px; font-size: .875rem; font-weight: 600; color: var(--ink);
}
.nav-signin:hover { background: rgba(17, 17, 17, .05); color: var(--ink); }
.nav-cta { display: none; min-height: 40px; padding: 8px 18px; font-size: .875rem; }

/* Phone menu: a <details>, no script. */
.nav-menu { position: relative; }
.nav-menu summary {
  list-style: none; cursor: pointer; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 8px; background: rgba(17, 17, 17, .05);
}
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu .bars, .nav-menu .bars::before, .nav-menu .bars::after {
  display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--ink); content: '';
  transition: transform .2s, opacity .2s;
}
.nav-menu .bars { position: relative; }
.nav-menu .bars::before { position: absolute; top: -6px; }
.nav-menu .bars::after { position: absolute; top: 6px; }
.nav-menu[open] .bars { background: transparent; }
.nav-menu[open] .bars::before { transform: translateY(6px) rotate(45deg); }
.nav-menu[open] .bars::after { transform: translateY(-6px) rotate(-45deg); }
.nav-sheet {
  position: absolute; inset-inline-end: 0; top: calc(100% + 12px); z-index: 60;
  width: min(300px, calc(100vw - 32px));
  display: grid; gap: 2px; padding: 10px;
  background: #fff; border-radius: 12px; border: 1px solid rgba(0, 0, 0, .06);
  box-shadow: 0 20px 50px -12px rgba(0, 0, 0, .25);
}
.nav-sheet a {
  padding: 10px 12px; border-radius: 8px; text-decoration: none;
  font-size: .9375rem; font-weight: 600; color: var(--ink);
}
.nav-sheet a:hover { background: rgba(17, 17, 17, .05); }
.nav-sheet a[aria-current="page"] { background: var(--ink); color: #fff; }
.nav-sheet .btn { margin-top: 6px; color: #fff; justify-content: center; }

@media (min-width: 980px) {
  .nav-cta { display: inline-flex; }
  .nav-menu { display: none; }
}
@media (max-width: 979px) {
  .nav-links, .nav-signin { display: none !important; }
}

/* ── masthead / rail / cards: the landing's surfaces ────────────────────── */
/* A long word or the search box must never widen the page on a phone. */
.j-mast-in { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  .j-mast-in { grid-template-columns: minmax(0, 1fr) minmax(240px, 320px); }
}
.j-mast-copy, .j-mast-copy > * { min-width: 0; overflow-wrap: anywhere; }
.j-search input, .j-search button { border-radius: 0; }
.j-search { border-radius: var(--radius); overflow: hidden; }

.j-rail a[aria-current="page"] { font-weight: 700; }

/* ── footer: the landing's paper footer, not a dark slab ────────────────── */
.site-footer { background: var(--plate); color: #525252; border-top: 1px solid var(--rule); }
.site-footer h2 { color: var(--ink); font-family: var(--font-mono); font-weight: 500; }
html[lang="ar"] .site-footer h2 { font-family: var(--font-ar); font-weight: 600; }
.site-footer a { color: #525252; }
.site-footer a:hover { color: #2f5bff; }
.foot-brand, .foot-brand .nav-word { color: var(--ink); }
.foot-site a { color: #2f5bff; }
.foot-bot { border-block-start-color: var(--rule); color: #737373; }