@font-face{ font-family:"Thmanyah Display"; src:url("/fonts/thmanyah-display-500.woff2") format("woff2"); font-weight:500; font-display:swap; }
@font-face{ font-family:"Thmanyah Text"; src:url("/fonts/thmanyah-text-400.woff2") format("woff2"); font-weight:400; font-display:swap; }

:root{
  --bg:#F4F4F1; --bg-2:#EBECE8; --ink:#191C1F; --ink-60:#575D62; --ink-38:#999EA2;
  --line:rgba(25,28,31,.16); --line-soft:rgba(25,28,31,.09);
  --accent:#14716B; --accent-mid:#1E8A82; --accent-soft:rgba(30,138,130,.10); --glow:#D8CBA6;
  --serif:"EB Garamond",Georgia,serif; --mono:"IBM Plex Mono",ui-monospace,monospace; --jp:"Shippori Mincho",serif;
  --ar-text:"Thmanyah Text","Amiri",serif; --ar-display:"Thmanyah Display","Amiri",serif;
  color-scheme:light;
}
html[data-theme="moon"]{
  --bg:#10141A; --bg-2:#161B22; --ink:#D7D9D4; --ink-60:#9AA0A7; --ink-38:#666D75;
  --line:rgba(215,217,212,.18); --line-soft:rgba(215,217,212,.09);
  --accent:#79D2C8; --accent-mid:#56BDB2; --accent-soft:rgba(86,189,178,.13); --glow:#EFE7CF;
  color-scheme:dark;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--serif);
  font-size:1.125rem; line-height:1.78; -webkit-font-smoothing:antialiased;
  transition:background-color .45s,color .45s; }
::selection{ background:var(--accent-mid); color:#F4F4F1; }
a{ color:inherit; text-decoration-color:var(--ink-38); text-underline-offset:.22em; }
a:hover{ text-decoration-color:var(--accent-mid); }
:focus-visible{ outline:2px solid var(--accent-mid); outline-offset:3px; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
.meta{ font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-60); }

/* reading progress: asagi hairline under the nav */
.progress{ position:fixed; top:56px; inset-inline:0; block-size:2px; z-index:59;
  background:var(--accent-mid); transform:scaleX(0); transform-origin:left center; }
@supports (animation-timeline: scroll()){
  .progress{ animation:prog linear both; animation-timeline:scroll(root); }
}
@keyframes prog{ from{ transform:scaleX(0);} to{ transform:scaleX(1);} }

.nav{ position:fixed; top:0; inset-inline:0; z-index:60; height:56px; display:flex; align-items:center;
  justify-content:space-between; padding-inline:clamp(1rem,3vw,2rem);
  background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line-soft); }
.nav a{ text-decoration:none; }
.brand{ display:flex; align-items:center; gap:.6rem; font-size:1rem; }
.seal{ inline-size:22px; block-size:22px; border:1.5px solid var(--accent-mid); color:var(--accent);
  display:grid; place-content:center; font-family:var(--ar-display); font-weight:700; font-size:.9rem; padding-block-end:2px; }
.nav__tools{ display:flex; gap:.4rem; }
.tool{ font-family:var(--mono); font-size:.72rem; border:1px solid var(--line); padding:.4em .7em; color:var(--ink-60); }
.tool:hover{ color:var(--ink); border-color:var(--ink-60); }
.tool--jp{ font-family:var(--jp); }

.page{ max-width:1060px; margin-inline:auto; padding:calc(56px + 4rem) clamp(1.25rem,5vw,3rem) 5rem; }
.crumb{ font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-38); }
h1{ margin:1rem 0 0; font-weight:500; font-size:clamp(2.2rem,5.4vw,3.7rem); line-height:1.08; letter-spacing:-.01em; max-inline-size:18ch; }
.standfirst{ margin-block-start:1.4rem; font-size:clamp(1.15rem,2.2vw,1.45rem); line-height:1.55; color:var(--ink-60); max-inline-size:44ch; font-style:italic; }
.byline{ margin-block-start:1.6rem; display:flex; gap:1.5rem; flex-wrap:wrap; align-items:center; }

.abstracts{ margin-block-start:3rem; display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; border-block:1px solid var(--line-soft); padding-block:1.8rem; }
.abstracts h2{ font-size:.95rem; margin:0 0 .6rem; }
.abstracts p{ margin:0; font-size:.98rem; color:var(--ink-60); }
.abstract-ar{ direction:rtl; font-family:var(--ar-text); font-size:1.12rem; line-height:2; }
.abstract-ar h2{ font-family:var(--ar-display); }
.epistemic{ margin-block-start:1.2rem; font-size:.85rem; color:var(--ink-38); font-style:italic; }

.tools-row{ margin-block-start:2rem; display:flex; gap:1rem; flex-wrap:wrap; align-items:center; }
.toc{ margin-block-start:2.6rem; border:1px solid var(--line-soft); padding:1.3rem 1.6rem; max-inline-size:34rem; }
.toc h2{ font-size:.8rem; font-family:var(--mono); font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-38); margin:0; }
.toc ol{ margin:.8rem 0 0; padding-inline-start:1.2rem; columns:2; column-gap:2.5rem; font-size:.95rem; }
.toc li{ margin-block-end:.35rem; }
.toc a{ text-decoration:none; color:var(--ink-60); }
.toc a:hover{ color:var(--accent); }

.prose{ margin-block-start:3.5rem; display:grid; grid-template-columns:minmax(0,68ch) minmax(0,1fr); column-gap:clamp(2rem,5vw,4rem); }
.prose > *{ grid-column:1; }
.prose h2{ font-weight:500; font-size:1.6rem; margin:2.6em 0 .6em; line-height:1.25; }
.prose p{ margin:0 0 1.15em; }
.prose p + p{ text-indent:1.6em; margin-top:-.35em; }
.prose .ar{ font-family:var(--ar-text); font-size:1.16em; }
.prose code{ font-family:var(--mono); font-size:.82em; background:var(--bg-2); padding:.1em .35em; }
blockquote{ margin:1.8em 0; padding-inline-start:1.4rem; border-inline-start:2px solid var(--accent-mid);
  font-style:italic; color:var(--ink-60); max-inline-size:52ch; }
.note{ grid-column:2; align-self:start; font-size:.82rem; line-height:1.6; color:var(--ink-60);
  border-inline-start:1px solid var(--line-soft); padding-inline-start:1rem; margin-block-end:1.5rem;
  display:none; }
.note .meta{ display:block; font-size:.62rem; margin-block-end:.3rem; color:var(--accent); }
body[data-labels="on"] .note{ display:block; }
.checklist{ border:1px solid var(--line); background:var(--bg-2); padding:1.4rem 1.7rem; margin:2em 0; }
.checklist h3{ margin:0; font-size:1.1rem; font-weight:500; }
.checklist ol{ margin:.9rem 0 0; padding-inline-start:1.3rem; }
.checklist li{ margin-block-end:.5rem; }
.coda{ margin-block-start:2.5em; border-top:1px solid var(--line-soft); padding-block-start:1.8em; }
.sig{ margin-block-start:2.5em; display:flex; align-items:center; gap:1rem; }
.sig .seal{ inline-size:34px; block-size:34px; font-size:1.25rem; }
.cite-box{ margin-block-start:3rem; }
.cite-box pre{ background:var(--bg-2); border:1px solid var(--line-soft); padding:1rem 1.2rem;
  font-family:var(--mono); font-size:.74rem; line-height:1.7; overflow-x:auto; white-space:pre; color:var(--ink-60); margin:.7rem 0 0; }
.btn{ display:inline-block; font-family:var(--mono); font-size:.74rem; letter-spacing:.09em; text-transform:uppercase;
  text-decoration:none; padding:.75em 1.4em; border:1px solid var(--line); color:var(--ink-60); background:none; }
.btn:hover{ border-color:var(--ink); color:var(--ink); }
.btn[aria-pressed="true"]{ border-color:var(--accent-mid); color:var(--accent); }
.pager{ margin-block-start:4rem; border-top:1px solid var(--line-soft); padding-block-start:1.6rem;
  display:flex; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; }
.pager a{ text-decoration:none; color:var(--ink-60); font-size:.95rem; }
.pager a:hover{ color:var(--accent); }
#toast{ position:fixed; inset-block-end:1.4rem; inset-inline-end:1.4rem; z-index:70; background:var(--ink); color:var(--bg);
  font-family:var(--mono); font-size:.74rem; padding:.8em 1.2em; opacity:0; translate:0 8px; transition:opacity .3s,translate .3s; pointer-events:none; }
#toast.show{ opacity:1; translate:0 0; }
@media (max-width:900px){
  .abstracts{ grid-template-columns:1fr; }
  .prose{ display:block; }
  .note{ border:1px solid var(--line-soft); border-inline-start:2px solid var(--accent-mid); padding:.8rem 1rem; margin:1.2em 0; }
  .toc ol{ columns:1; }
}
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } .progress{ animation:none; transform:scaleX(1); opacity:.3; } *{ transition-duration:.01ms !important; } }