/* Thmanyah, self-hosted · license: Thmanyah Publishing · do not redistribute */
@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 Display"; src:url("/fonts/thmanyah-display-700.woff2") format("woff2"); font-weight:700; font-display:swap; }
@font-face{ font-family:"Thmanyah Text"; src:url("/fonts/thmanyah-text-400.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face{ font-family:"Thmanyah Text"; src:url("/fonts/thmanyah-text-700.woff2") format("woff2"); font-weight:700; font-display:swap; }
@font-face{ font-family:"Thmanyah Sans"; src:url("/fonts/thmanyah-sans-400.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face{ font-family:"Thmanyah Sans"; src:url("/fonts/thmanyah-sans-500.woff2") format("woff2"); font-weight:500; font-display:swap; }

/* ============ TOKENS · night study first, morning study second ============ */
:root{
  --bg:#0F1319; --bg-2:#151B23; --bg-3:#1B222C;
  --ink:#E4E4DE; --ink-60:#9AA1A8; --ink-38:#636A72;
  --line:rgba(228,228,222,.16); --line-soft:rgba(228,228,222,.08);
  --accent:#7AD6CB; --accent-mid:#58C2B6; --accent-deep:#2E8F86;
  --accent-soft:rgba(88,194,182,.12);
  --glow:#EFE7CF; --glow-soft:rgba(239,231,207,.08);
  --serif:"EB Garamond",Georgia,serif; --mono:"IBM Plex Mono",ui-monospace,monospace;
  --jp:"Shippori Mincho",serif;
  --ar-display:"Thmanyah Display","Amiri",serif; --ar-text:"Thmanyah Text","Amiri",serif;
  --ar-sans:"Thmanyah Sans",system-ui,sans-serif;
  --pad:clamp(1.25rem,4.5vw,4rem); --nav-h:64px;
  color-scheme:dark;
}
html[data-theme="day"]{
  --bg:#F3F2ED; --bg-2:#EAE9E1; --bg-3:#E1E0D7;
  --ink:#1A1D21; --ink-60:#565C61; --ink-38:#989DA2;
  --line:rgba(26,29,33,.18); --line-soft:rgba(26,29,33,.08);
  --accent:#14716A; --accent-mid:#1E8A80; --accent-deep:#2AA398;
  --accent-soft:rgba(30,138,128,.10);
  --glow:#D8CBA6; --glow-soft:rgba(184,164,110,.14);
  color-scheme:light;
}

/* ============ BASE ============ */
*,*::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.0625rem; line-height:1.72; -webkit-font-smoothing:antialiased;
  transition:background-color .5s ease,color .5s ease; }
::selection{ background:var(--accent-mid); color:#0F1319; }
img{ display:block; max-width:100%; height:auto; }
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; padding:0; }
h1,h2,h3,h4{ font-weight:500; line-height:1.14; margin:0; }
p{ margin:0; }
.meta{ font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-60); }
.btn{ display:inline-block; font-family:var(--mono); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none; padding:.85em 1.6em; border:1px solid var(--ink); white-space:nowrap;
  transition:background-color .2s,color .2s,border-color .2s; }
.btn--primary{ background:var(--ink); color:var(--bg); }
.btn--primary:hover{ background:var(--accent-mid); border-color:var(--accent-mid); color:#0F1319; }
.btn--ghost{ border-color:var(--line); color:var(--ink-60); }
.btn--ghost:hover{ border-color:var(--ink); color:var(--ink); }

/* ============ ARABIC · Thmanyah role system ============ */
html[lang="ar"] body{ font-family:var(--ar-text); font-size:1.145rem; line-height:1.95; }
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,html[lang="ar"] h4{ font-family:var(--ar-display); font-weight:500; line-height:1.42; }
html[lang="ar"] .meta,html[lang="ar"] .btn,html[lang="ar"] .tool,html[lang="ar"] .filter,
html[lang="ar"] .chip,html[lang="ar"] .radio__ui{ font-family:var(--ar-sans); text-transform:none; letter-spacing:0; }
html[lang="ar"] .meta{ font-size:.8rem; }
.u-mursala{ font-feature-settings:"salt" 1; }
.u-fatha-kash{ font-feature-settings:"ss03" 1; }
.ksh{ white-space:nowrap; }
html[lang="en"] [data-ar-only]{ display:none; }
html[lang="ar"] [data-en-only]{ display:none; }


/* ============ NAV + MOON METER ============ */
.nav{ position:fixed; top:0; inset-inline:0; z-index:60; height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between; padding-inline:clamp(1rem,3vw,2.2rem);
  background:color-mix(in srgb,var(--bg) 84%,transparent); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft); }
.brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; }
.brand svg{ inline-size:30px; block-size:30px; color:var(--accent-mid); }
.brand b{ font-weight:500; font-size:1.02rem; }
html[lang="ar"] .brand b{ font-family:var(--ar-display); }
.nav__links{ display:flex; gap:clamp(.9rem,2.2vw,1.8rem); }
.nav__links a{ font-family:var(--mono); font-size:.72rem; letter-spacing:.07em; text-transform:uppercase; text-decoration:none; color:var(--ink-60); }
html[lang="ar"] .nav__links a{ font-family:var(--ar-sans); letter-spacing:0; text-transform:none; font-size:.86rem; }
.nav__links a:hover,.nav__links a[aria-current="true"]{ color:var(--ink); }
.nav__tools{ display:flex; align-items:center; gap:.4rem; }
.tool{ font-family:var(--mono); font-size:.72rem; border:1px solid var(--line); padding:.42em .68em; color:var(--ink-60); transition:.2s; }
.tool:hover{ color:var(--ink); border-color:var(--ink-60); }
.tool--jp{ font-family:var(--jp); font-size:.85rem; }
/* the reading moon: waxes as you scroll */
.moon{ inline-size:22px; block-size:22px; margin-inline-start:.35rem; }
.moon circle.face{ fill:var(--glow); }
.moon .shade{ fill:var(--bg); transform:translateX(0); }
@supports (animation-timeline: scroll()){
  .moon .shade{ animation:wane linear both; animation-timeline:scroll(root); }
}
@keyframes wane{ from{ transform:translateX(0);} to{ transform:translateX(22px);} }
@media (max-width:940px){ .nav__links{ display:none; } }

/* ============ HERO · the study scene ============ */
.study{ display:grid; grid-template-columns:minmax(360px,46%) minmax(0,1fr); min-height:100dvh;
  padding-block-start:var(--nav-h); align-items:stretch; }
.study__scene{ position:relative; z-index:0; min-block-size:calc(100dvh - var(--nav-h)); }
.study__scene svg{ position:absolute; inset:0; opacity:0; animation:sceneIn .9s .1s ease forwards; }
@keyframes sceneIn{ to{ opacity:1; } }
.study__veil{ position:absolute; inset-block:0; inset-inline-start:0; inline-size:16%; z-index:1; pointer-events:none;
  background:linear-gradient(to right, var(--bg), transparent); }
html[dir="rtl"] .study__veil{ background:linear-gradient(to left, var(--bg), transparent); }
.study__text{ position:relative; z-index:2; align-self:center; padding:clamp(1.5rem,4vh,3rem) var(--pad) clamp(2.4rem,6vh,4rem); }
.study__hello{ margin-block-end:1rem; }
h1.study__name{ font-size:clamp(2.9rem,6.8vw,5.2rem); letter-spacing:-.015em; line-height:1.02; }
html[lang="ar"] h1.study__name{ letter-spacing:0; line-height:1.26; font-weight:700; }
.study__sub{ margin-block-start:1.2rem; max-inline-size:52ch; font-size:clamp(1.02rem,1.5vw,1.16rem); color:var(--ink-60); }
.study__cta{ margin-block-start:1.9rem; display:flex; flex-wrap:wrap; gap:.9rem; align-items:center; }
.study__hint{ margin-block-start:1.6rem; font-size:.82rem; color:var(--ink-38); font-style:italic; }
/* interactive objects inside the scene */
.obj{ cursor:pointer; }
.obj .hit{ fill:transparent; }
.obj .lift{ transition:transform .25s ease, opacity .25s; }
.obj:hover .lift,.obj:focus-visible .lift{ transform:translateY(-3px); }
.obj .tag{ opacity:0; transition:opacity .2s; font:600 13px var(--mono); fill:var(--accent); letter-spacing:.08em; text-transform:uppercase; }
html[lang="ar"] .obj .tag{ font:500 15px var(--ar-sans); letter-spacing:0; }
.obj:hover .tag,.obj:focus-visible .tag{ opacity:1; }
.obj:hover .st,.obj:focus-visible .st{ stroke:var(--accent-mid); }
.obj .tag{ paint-order:stroke; stroke:var(--bg); stroke-width:4px; stroke-linejoin:round; }
[data-theme="day"] .star{ opacity:0; }
[data-theme="day"] .moonhalo{ opacity:.45; }
.scene-ink{ stroke:var(--ink); } .scene-dim{ stroke:var(--ink-60); } .scene-acc{ stroke:var(--accent-mid); }
.scene-fill{ fill:var(--bg-2); } .scene-fill3{ fill:var(--bg-3); }
.w3{ stroke-width:3; } .w1{ stroke-width:1.2; }
.twinkle{ animation:tw 3.8s ease-in-out infinite; }
@keyframes tw{ 0%,100%{ opacity:.35;} 50%{ opacity:.9;} }
.cursorblink{ animation:cblink 1.15s steps(1) infinite; }
@keyframes cblink{ 50%{ opacity:0; } }
.steam{ animation:steam 3.4s ease-in-out infinite; transform-origin:center bottom; }
.steam.s2{ animation-delay:1.2s; }
@keyframes steam{ 0%{ transform:translateY(0); opacity:0;} 25%{opacity:.6;} 100%{ transform:translateY(-14px); opacity:0;} }

/* ============ WAVE DIVIDER (seigaiha strip) ============ */
.wave-rule{ display:block; inline-size:100%; block-size:26px; color:var(--ink-38); opacity:.5; }

/* ============ CHAPTERS · alternating sticky asides ============ */
.ch{ display:grid; grid-template-columns:minmax(240px,340px) minmax(0,1fr); gap:clamp(1.6rem,4.5vw,4.5rem);
  padding:clamp(4.5rem,10vh,7.5rem) var(--pad); }
.ch:nth-of-type(even){ grid-template-columns:minmax(0,1fr) minmax(240px,340px); }
.ch:nth-of-type(even) .ch__aside{ order:2; }
.ch__aside{ position:relative; }
.ch__stick{ position:sticky; top:calc(var(--nav-h) + 2rem); display:grid; gap:1rem; justify-items:start; }
.ch:nth-of-type(even) .ch__stick{ justify-items:end; text-align:end; }
.ch__num{ font-family:var(--serif); font-size:clamp(3.4rem,6vw,5rem); line-height:1; color:var(--ink-38); font-variant-numeric:oldstyle-nums; }
.ch__spot{ inline-size:clamp(64px,7vw,92px); block-size:auto; color:var(--ink-60); }
.ch__spot .a{ stroke:var(--accent-mid); }
.ch__glyph{ font-family:var(--jp); writing-mode:vertical-rl; text-orientation:upright; letter-spacing:.5em; color:var(--ink-38); font-size:1.05rem; }
.ch__title{ font-size:clamp(1.9rem,3.6vw,2.8rem); max-inline-size:22ch; }
.ch__lede{ margin-block-start:1rem; max-inline-size:60ch; color:var(--ink-60); }
.ch__body{ min-inline-size:0; }
.rv{ opacity:0; translate:0 20px; transition:opacity .7s cubic-bezier(.16,1,.3,1),translate .7s cubic-bezier(.16,1,.3,1); transition-delay:calc(var(--i,0)*70ms); }
.rv.on{ opacity:1; translate:0 0; }
@media (max-width:880px){
  .ch,.ch:nth-of-type(even){ grid-template-columns:1fr; }
  .ch:nth-of-type(even) .ch__aside{ order:0; }
  .ch__stick{ position:static; grid-auto-flow:column; align-items:center; justify-content:start; gap:1.1rem; }
  .ch:nth-of-type(even) .ch__stick{ justify-items:start; text-align:start; }
  .ch__glyph{ writing-mode:horizontal-tb; letter-spacing:.4em; }
  .ch__num{ font-size:2.6rem; }
  .ch__spot{ inline-size:52px; }
}

/* ============ RESEARCH: thesis + demo + stack ============ */
.thesis{ font-size:clamp(1.5rem,2.9vw,2.3rem); line-height:1.32; max-inline-size:26ch;
  border-inline-start:2px solid var(--accent-mid); padding-inline-start:1.2rem; }
html[lang="ar"] .thesis{ font-family:var(--ar-display); line-height:1.7; }
.receipt{ margin-block-start:1.1rem; max-inline-size:56ch; color:var(--ink-60); font-size:.98rem; }
.receipt a{ color:var(--accent); text-decoration-color:var(--accent-mid); }
.demo{ margin-block-start:2.2rem; border:1px solid var(--line); background:var(--bg-2); padding:clamp(1.1rem,2.2vw,1.7rem); }
.demo__head{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; align-items:baseline; }
.demo__title{ font-size:1.2rem; }
.demo__samples{ display:flex; flex-wrap:wrap; gap:.5rem; margin-block-start:1rem; }
.chip{ font-family:var(--mono); font-size:.72rem; border:1px solid var(--line); padding:.45em .8em; color:var(--ink-60); background:var(--bg); }
.chip[aria-pressed="true"]{ border-color:var(--accent-mid); color:var(--accent); }
.demo__input{ margin-block-start:.9rem; }
.demo__input input{ inline-size:100%; font-family:var(--ar-text),var(--serif); font-size:1.05rem; background:var(--bg); color:var(--ink);
  border:1px solid var(--line); padding:.6em .8em; }
.demo__row{ margin-block-start:1.2rem; }
.demo__row .meta{ display:block; margin-block-end:.5rem; }
.tokens{ display:flex; flex-wrap:wrap; gap:.35rem; direction:rtl; }
.tk{ border:1px solid var(--line); background:var(--bg); padding:.12em .4em; font-family:var(--ar-text),var(--serif); }
.tk--latin{ direction:ltr; font-family:var(--mono); font-size:.8rem; }
.demo__count{ font-family:var(--mono); font-size:.72rem; color:var(--ink-60); margin-block-start:.4rem; display:block; }
.demo__verdict{ margin-block-start:1.1rem; border-top:1px solid var(--line-soft); padding-block-start:.9rem; color:var(--ink-60); font-size:.98rem; }
.demo__verdict strong{ color:var(--accent); font-weight:600; }
.tashkeel{ margin-block-start:1.1rem; border-top:1px solid var(--line-soft); padding-block-start:1rem; display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.tashkeel__word{ font-family:var(--ar-display); font-size:1.9rem; direction:rtl; min-inline-size:5.5ch; }
.tashkeel__note{ font-size:.9rem; color:var(--ink-60); flex:1; min-inline-size:14rem; }
.switch{ font-family:var(--mono); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; border:1px solid var(--line); padding:.5em .9em; color:var(--ink-60); }
.switch[aria-pressed="true"]{ border-color:var(--accent-mid); color:var(--accent); }
.demo__foot{ margin-block-start:.9rem; font-size:.84rem; color:var(--ink-38); font-style:italic; }
.stack{ margin-block-start:2.6rem; border-top:1px solid var(--line); }
.layer{ border-bottom:1px solid var(--line-soft); }
.layer__head{ inline-size:100%; display:grid; grid-template-columns:1fr auto auto; align-items:baseline; gap:1rem;
  padding-block:1rem; padding-inline-start:calc(var(--depth,0)*clamp(.5rem,1.8vw,1.7rem)); text-align:start; transition:background-color .2s; }
.layer__head:hover{ background:var(--accent-soft); }
.layer__name{ font-size:clamp(1.1rem,1.8vw,1.35rem); }
html[lang="ar"] .layer__name{ font-family:var(--ar-display); }
.layer__tag{ font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-38); }
html[lang="ar"] .layer__tag{ font-family:var(--ar-sans); letter-spacing:0; text-transform:none; font-size:.78rem; }
.layer__head::after{ content:"+"; font-family:var(--mono); color:var(--ink-38); }
.layer[data-open="true"] .layer__head::after{ content:"−"; color:var(--accent); }
.layer__panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s cubic-bezier(.16,1,.3,1); }
.layer__panel>div{ overflow:hidden; }
.layer[data-open="true"] .layer__panel{ grid-template-rows:1fr; }
.layer__body{ padding-block:0 1.3rem; padding-inline-start:calc(var(--depth,0)*clamp(.5rem,1.8vw,1.7rem)); max-inline-size:64ch; color:var(--ink-60); }
.layer__body a{ font-family:var(--mono); font-size:.7rem; letter-spacing:.07em; text-transform:uppercase; }
html[lang="ar"] .layer__body a{ font-family:var(--ar-sans); letter-spacing:0; text-transform:none; font-size:.84rem; }


/* ============ PAPERS (real record) ============ */
.filters{ display:flex; flex-wrap:wrap; gap:.5rem; margin-block-start:1.6rem; }
.filter{ font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-60); padding:.45em .2em; border-bottom:1px solid transparent; }
.filter[aria-pressed="true"]{ color:var(--accent); border-color:var(--accent-mid); }
.entry{ border-top:1px solid var(--line-soft); }
.entry summary{ list-style:none; cursor:pointer; display:grid; grid-template-columns:3.2ch minmax(0,1fr) auto; gap:1.1rem; align-items:baseline; padding-block:1.05rem; }
.entry summary::-webkit-details-marker{ display:none; }
.entry__idx{ font-family:var(--mono); font-size:.76rem; color:var(--ink-38); transition:color .2s; }
.entry[open] .entry__idx,.entry summary:hover .entry__idx{ color:var(--accent); }
.entry__title{ font-size:clamp(1.05rem,1.7vw,1.28rem); line-height:1.35; }
.entry__meta{ font-family:var(--mono); font-size:.68rem; color:var(--ink-60); white-space:nowrap; }
.entry__body{ padding-block:0 1.4rem; padding-inline-start:calc(3.2ch + 1.1rem); max-inline-size:70ch; }
.entry__body p{ color:var(--ink-60); font-size:.97rem; }
.entry__actions{ margin-block-start:.9rem; display:flex; gap:1.3rem; flex-wrap:wrap; }
.entry__actions a,.entry__actions button{ font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-60); text-decoration:underline; text-underline-offset:.25em; text-decoration-color:var(--ink-38); }
.entry__actions a:hover,.entry__actions button:hover{ color:var(--ink); text-decoration-color:var(--accent-mid); }
.stamp{ display:inline-grid; place-content:center; inline-size:1.35em; block-size:1.35em; margin-inline-start:.5em; border:1.5px solid var(--accent-mid); color:var(--accent); font-family:var(--jp); font-size:.72em; vertical-align:.1em; animation:stampIn .35s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes stampIn{ from{ transform:scale(1.6) rotate(-8deg); opacity:0;} to{ transform:none; opacity:1;} }
.bench{ margin-block-start:2.4rem; border:1px solid var(--line-soft); padding:1.2rem 1.4rem; }
.bench h3{ font-size:1.05rem; }
.bench ul{ margin:.8rem 0 0; padding:0; list-style:none; display:grid; gap:.55rem; }
.bench li{ display:grid; grid-template-columns:auto 1fr; gap:.8rem; align-items:baseline; font-size:.95rem; color:var(--ink-60); }
.bench li b{ font-weight:500; color:var(--ink); font-family:var(--mono); font-size:.8rem; }
.readlog{ margin-block-start:2.4rem; }
.readlog h3{ font-size:1.15rem; }
.readlog .row{ border-top:1px solid var(--line-soft); padding-block:.8rem; display:grid; gap:.2rem; }
.readlog .t{ font-size:1rem; } .readlog .why{ font-size:.88rem; color:var(--ink-60); }
.empty{ display:none; margin-block-start:1.6rem; color:var(--ink-38); font-style:italic; }
.empty.show{ display:block; }

/* ============ JOURNEY ============ */
.ledger{ max-inline-size:760px; }
.moment{ display:grid; grid-template-columns:7ch minmax(0,1fr); gap:1.5rem; padding-block:.9rem;
  opacity:calc(1 - var(--age,0)*.08); filter:grayscale(calc(var(--age,0)*12%)); border-top:1px solid var(--line-soft); }
.moment .y{ font-family:var(--mono); font-size:.76rem; letter-spacing:.08em; color:var(--ink-38); padding-block-start:.32rem; }
.moment .t{ font-size:1.03rem; } .moment .t em{ color:var(--ink-60); }

/* ============ MISRAJ (the lamp) ============ */
.lampline{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:1.4rem; align-items:start;
  border:1px solid var(--line); background:var(--bg-2); padding:clamp(1.2rem,2.4vw,1.8rem); }
.lampline svg{ inline-size:64px; block-size:auto; color:var(--ink-60); flex:none; }
.lampline svg .a{ stroke:var(--accent-mid); } .lampline svg .g{ fill:var(--glow-soft); }
.models{ margin-block-start:2rem; display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:1rem; }
.model{ border:1px solid var(--line-soft); padding:1.05rem 1.15rem; display:grid; gap:.35rem; align-content:start; transition:border-color .25s, background-color .25s; }
.model:hover{ border-color:var(--accent-mid); background:var(--accent-soft); }
.model b{ font-weight:500; font-size:1.06rem; }
.model .ar{ font-family:var(--ar-display); font-size:1.15rem; color:var(--ink-60); direction:rtl; text-align:start; }
.model p{ font-size:.87rem; color:var(--ink-60); }
.model .meta{ font-size:.62rem; }

/* ============ JOURNAL ============ */
.featured{ border:1px solid var(--line); padding:clamp(1.3rem,2.6vw,2.1rem); display:grid; grid-template-columns:auto minmax(0,1fr); gap:1.6rem; text-decoration:none; transition:.25s; }
.featured:hover{ border-color:var(--accent-mid); background:var(--accent-soft); }
.featured h3{ font-size:clamp(1.4rem,2.7vw,2rem); }
.featured p{ margin-block-start:.8rem; color:var(--ink-60); max-inline-size:56ch; }
.featured .meta{ display:block; margin-block-start:1rem; }
.kamon{ inline-size:40px; block-size:40px; color:var(--ink-60); flex:none; }
.featured:hover .kamon{ color:var(--accent); }
.essays{ margin-block-start:1.1rem; display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:1.8rem 2rem; }
.essay{ border-top:1px solid var(--line-soft); padding-block-start:1rem; text-decoration:none; display:block; }
.essay .kamon{ inline-size:24px; block-size:24px; color:var(--ink-38); }
.essay:hover .kamon{ color:var(--accent); }
.essay h4{ margin-block-start:.7rem; font-size:1.12rem; line-height:1.3; }
.essay p{ margin-block-start:.5rem; font-size:.9rem; color:var(--ink-60); }
.essay .meta{ display:block; margin-block-start:.7rem; font-size:.64rem; }
.essay:hover h4{ text-decoration:underline; text-decoration-color:var(--accent-mid); text-underline-offset:.22em; }

/* ============ THE ROOM (personal) ============ */
.room{ display:grid; grid-template-columns:repeat(12,1fr); gap:1.1rem; }
.rcell{ border:1px solid var(--line-soft); padding:clamp(1.05rem,2vw,1.5rem); background:var(--bg); }
.rcell h3{ font-size:1.08rem; }
.rcell p{ margin-block-start:.6rem; color:var(--ink-60); font-size:.95rem; }
.r-letter{ grid-column:span 7; background:var(--bg-2); }
.r-letter p{ font-size:1.02rem; }
.r-letter .ar-letter{ direction:rtl; font-family:var(--ar-text); font-size:1.14rem; line-height:2; }
.r-listen{ grid-column:span 5; }
.r-window{ grid-column:span 5; }
.r-window svg{ inline-size:100%; block-size:auto; color:var(--ink-60); margin-block-start:.6rem; }
.r-window svg .a{ stroke:var(--accent-mid); } .r-window svg .g{ fill:var(--glow); }
.r-desk{ grid-column:span 7; }
.r-desk ul{ margin:.8rem 0 0; padding:0; list-style:none; display:grid; gap:.6rem; }
.r-desk li{ display:grid; grid-template-columns:auto 1fr; gap:.9rem; align-items:baseline; font-size:.94rem; color:var(--ink-60); border-top:1px solid var(--line-soft); padding-block-start:.6rem; }
.r-desk li b{ font-weight:500; color:var(--ink); }
.r-word{ grid-column:span 12; display:grid; grid-template-columns:auto 1fr; gap:1.4rem; align-items:center; background:var(--bg-2); }
.r-word .big{ font-family:var(--jp); font-size:clamp(2.4rem,5vw,3.6rem); color:var(--ink); line-height:1; }
@media (max-width:860px){ .r-letter,.r-listen,.r-window,.r-desk,.r-word{ grid-column:1/-1; } }

/* ============ QUESTION + WRITE ============ */
.omi{ border:1px solid var(--line); background:var(--bg-2); min-block-size:170px; display:grid; place-content:center; padding:clamp(1.3rem,2.6vw,2rem); }
.omi__q{ font-size:clamp(1.2rem,2.4vw,1.6rem); line-height:1.5; font-style:italic; max-inline-size:34ch; text-align:center; }
html[lang="ar"] .omi__q{ font-family:var(--ar-display); font-style:normal; }
.omi__q.draw{ animation:omiIn .5s cubic-bezier(.16,1,.3,1); }
@keyframes omiIn{ from{ opacity:0; transform:translateY(12px) rotate(.6deg);} to{ opacity:1; transform:none;} }
.mail{ font-family:var(--serif); font-size:clamp(1.5rem,3.6vw,2.6rem); overflow-wrap:anywhere; line-height:1.2; display:inline-block; text-decoration-color:var(--line); }
.mail:hover{ text-decoration-color:var(--accent-mid); }
.profiles{ margin-block-start:2rem; display:flex; flex-wrap:wrap; gap:1rem 1.7rem; }
.profiles a{ font-family:var(--mono); font-size:.7rem; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-60); }
html[lang="ar"] .profiles a{ font-family:var(--ar-sans); letter-spacing:0; text-transform:none; font-size:.84rem; }
.presskit{ margin-block-start:2.4rem; border-top:1px solid var(--line); }
.presskit summary{ cursor:pointer; list-style:none; padding-block:1rem; display:flex; justify-content:space-between; gap:1rem; }
.presskit summary::-webkit-details-marker{ display:none; }
.presskit summary h3{ font-size:1.15rem; }
.presskit summary .meta::after{ content:"+"; margin-inline-start:.6em; }
.presskit[open] summary .meta::after{ content:"−"; color:var(--accent); }
.presskit__body{ padding-block-end:1.5rem; display:grid; gap:1.3rem; max-inline-size:70ch; }
.presskit__body h4{ font-size:.9rem; font-family:var(--mono); font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-38); }
html[lang="ar"] .presskit__body h4{ font-family:var(--ar-sans); letter-spacing:0; text-transform:none; }
.presskit__body p{ color:var(--ink-60); font-size:.97rem; }
.bio-ar{ direction:rtl; text-align:start; font-family:var(--ar-text); font-size:1.1rem; line-height:1.95; }
.cite{ background:var(--bg-2); border:1px solid var(--line-soft); padding:1rem 1.2rem; font-family:var(--mono); font-size:.72rem; line-height:1.7; overflow-x:auto; white-space:pre; color:var(--ink-60); }
.portrait{ margin:0; border:1px solid var(--line-soft); max-inline-size:340px; }
.portrait .mark{ aspect-ratio:4/5; background:var(--bg-2); display:grid; place-content:center; }
.portrait .mark svg{ inline-size:72px; opacity:.55; color:var(--accent-mid); }
.portrait figcaption{ padding:.75rem 1rem; font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-38); border-top:1px solid var(--line-soft); }
html[lang="ar"] .portrait figcaption{ font-family:var(--ar-sans); letter-spacing:0; text-transform:none; font-size:.8rem; }
.write__grid{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(1.6rem,4vw,3.5rem); align-items:start; }
@media (max-width:860px){ .write__grid{ grid-template-columns:1fr; } }
.colophon{ border-top:1px solid var(--line-soft); padding:2rem var(--pad) calc(2.4rem + 84px); display:flex; justify-content:space-between; gap:2rem; flex-wrap:wrap; align-items:flex-end; }
.colophon p{ font-size:.88rem; color:var(--ink-38); max-inline-size:62ch; }
.colophon svg{ inline-size:30px; block-size:30px; color:var(--accent-mid); }

/* ============ DESK RADIO ============ */
.radio{ position:fixed; inset-block-end:1.1rem; inset-inline-end:1.1rem; z-index:65; }
.radio__min{ inline-size:56px; block-size:56px; border:1px solid var(--line); background:var(--bg-2);
  display:grid; place-content:center; position:relative; transition:border-color .25s; }
.radio__min:hover{ border-color:var(--accent-mid); }
.radio__min svg{ inline-size:30px; block-size:30px; color:var(--accent-mid); }
.eq{ position:absolute; inset-block-end:6px; inset-inline-end:6px; display:flex; gap:2px; align-items:flex-end; block-size:10px; }
.eq i{ inline-size:2.5px; background:var(--accent); block-size:3px; }
.radio[data-playing="true"] .eq i{ animation:eq 1s ease-in-out infinite; }
.radio[data-playing="true"] .eq i:nth-child(2){ animation-delay:.2s; }
.radio[data-playing="true"] .eq i:nth-child(3){ animation-delay:.45s; }
@keyframes eq{ 0%,100%{ block-size:3px;} 50%{ block-size:10px;} }
.radio__panel{ display:none; inline-size:min(330px,calc(100vw - 2.2rem)); border:1px solid var(--line); background:var(--bg-2); padding:1rem; }
.radio[data-min="false"] .radio__panel{ display:grid; gap:.85rem; }
.radio[data-min="false"] .radio__min{ display:none; }
.radio__top{ display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.radio__face{ inline-size:100%; block-size:auto; color:var(--ink-60); }
.radio__face .a{ stroke:var(--accent-mid); }
.radio__face .spin{ transform-origin:79px 46px; }
.radio[data-playing="true"] .radio__face .spin{ animation:spin 7s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.radio__track{ display:grid; gap:.15rem; }
.radio__track b{ font-weight:500; font-size:1rem; }
.radio__track span{ font-size:.8rem; color:var(--ink-60); }
.radio__ui{ display:flex; align-items:center; gap:.55rem; }
.radio__ui .tool{ min-inline-size:40px; text-align:center; }
.radio__ui input[type="range"]{ flex:1; accent-color:var(--accent-mid); min-inline-size:0; }
.radio__list{ margin:0; padding:0; list-style:none; display:grid; gap:.3rem; border-top:1px solid var(--line-soft); padding-block-start:.7rem; }
.radio__list button{ inline-size:100%; display:flex; justify-content:space-between; gap:1rem; font-size:.88rem; color:var(--ink-60); padding:.3rem .2rem; text-align:start; }
.radio__list button[aria-current="true"]{ color:var(--accent); }
.radio__list button:disabled{ opacity:.42; cursor:not-allowed; }
.radio__note{ font-size:.74rem; color:var(--ink-38); font-style:italic; }

/* ============ PALETTE + TOAST + RM ============ */
dialog#palette{ inset-block-start:14vh; inset-inline:0; margin-inline:auto; inline-size:min(560px,92vw); border:1px solid var(--line); background:var(--bg); color:var(--ink); padding:0; }
dialog#palette::backdrop{ background:rgba(6,8,11,.55); backdrop-filter:blur(2px); }
#palette input{ inline-size:100%; font-family:var(--serif); font-size:1.05rem; background:transparent; color:var(--ink); border:none; border-bottom:1px solid var(--line); padding:1rem 1.2rem; }
html[lang="ar"] #palette input{ font-family:var(--ar-text); }
#palette input:focus{ outline:none; }
#palette ul{ list-style:none; margin:0; padding:.5rem 0; max-block-size:46vh; overflow-y:auto; }
#palette li button{ inline-size:100%; text-align:start; display:flex; justify-content:space-between; gap:1rem; padding:.68rem 1.2rem; font-size:.96rem; }
#palette li button .hint{ font-family:var(--mono); font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-38); }
html[lang="ar"] #palette li button .hint{ font-family:var(--ar-sans); letter-spacing:0; text-transform:none; }
#palette li button:hover,#palette li[aria-selected="true"] button{ background:var(--accent-soft); color:var(--accent); }
#toast{ position:fixed; inset-block-end:1.3rem; inset-inline-start:1.3rem; z-index:70; background:var(--ink); color:var(--bg);
  font-family:var(--mono); font-size:.73rem; padding:.8em 1.2em; opacity:0; translate:0 8px; transition:.3s; pointer-events:none; }
html[lang="ar"] #toast{ font-family:var(--ar-sans); font-size:.85rem; }
#toast.show{ opacity:1; translate:0 0; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .rv{ opacity:1; translate:0 0; transition:none; }
  .moon .shade{ animation:none; transform:translateX(11px); }
  .radio[data-playing="true"] .radio__face .spin,.radio[data-playing="true"] .eq i{ animation:none; }
  .steam,.cursorblink{ animation:none; }
  .omi__q.draw,.stamp{ animation:none; }
  .layer__panel{ transition:none; }
  *{ transition-duration:.01ms !important; }
}


/* ============ NATIVE MOBILE SYSTEM ============ */
.skip{ position:fixed; inset-block-start:-52px; inset-inline-start:.8rem; z-index:80; background:var(--ink); color:var(--bg);
  padding:.65em 1.1em; font-family:var(--mono); font-size:.72rem; text-decoration:none; transition:inset-block-start .2s; }
.skip:focus{ inset-block-start:.6rem; }
.tabbar{ display:none; }
.scene--m{ display:none; }
@media (max-width:1100px){
  .study{ grid-template-columns:1fr; min-height:auto; }
  .study__scene{ min-block-size:0; block-size:clamp(420px,56vh,620px); }
  .study__veil{ inset:auto 0 0 0; inline-size:auto; block-size:26%;
    background:linear-gradient(to top, var(--bg), transparent) !important; }
}
@media (max-width:940px){
  .tabbar{ position:fixed; z-index:64; inset-block-end:0; inset-inline:0; display:grid; grid-template-columns:repeat(5,1fr);
    background:color-mix(in srgb,var(--bg) 90%,transparent); backdrop-filter:blur(12px);
    border-top:1px solid var(--line-soft); padding-block:.45rem calc(.5rem + env(safe-area-inset-bottom)); }
  .tabbar a{ display:grid; justify-items:center; gap:.24rem; text-decoration:none; color:var(--ink-38); padding-block:.2rem; }
  .tabbar svg{ inline-size:22px; block-size:22px; }
  .tabbar span{ font-family:var(--mono); font-size:.56rem; letter-spacing:.06em; text-transform:uppercase; }
  html[lang="ar"] .tabbar span{ font-family:var(--ar-sans); font-size:.7rem; letter-spacing:0; text-transform:none; }
  .tabbar a[aria-current="true"]{ color:var(--accent); }
  .radio{ inset-block-end:calc(66px + env(safe-area-inset-bottom) + .7rem); }
  .colophon{ padding-block-end:calc(2.4rem + 156px + env(safe-area-inset-bottom)); }
}
@media (max-width:700px){
  body{ -webkit-tap-highlight-color:transparent; }
  .scene--d{ display:none; } .scene--m{ display:block; }
  .study{ grid-template-columns:1fr; min-height:auto; }
  .study__scene{ min-block-size:0; block-size:clamp(430px,60vh,590px); }
  .study__veil{ inset:auto 0 0 0; inline-size:auto; block-size:26%;
    background:linear-gradient(to top, var(--bg), transparent) !important; }
  h1.study__name{ font-size:clamp(2.7rem,13vw,3.5rem); }
  .tool{ min-block-size:42px; min-inline-size:42px; display:inline-grid; place-content:center; }
  .btn{ padding:1em 1.5em; }
  .models,.essays{ display:grid; grid-auto-flow:column; grid-auto-columns:76%; overflow-x:auto; scroll-snap-type:x mandatory;
    scrollbar-width:none; margin-inline:calc(var(--pad)*-1); padding-inline:var(--pad); }
  .models::-webkit-scrollbar,.essays::-webkit-scrollbar{ display:none; }
  .model,.essay{ scroll-snap-align:start; }
  .essay{ border:1px solid var(--line-soft); border-top:1px solid var(--line-soft); padding:1rem; }
  dialog#palette{ inset:auto 0 0 0; margin:0; inline-size:100vw; max-inline-size:none; border-inline:0; border-block-end:0; }
  #palette ul{ max-block-size:52vh; padding-block-end:calc(.6rem + env(safe-area-inset-bottom)); }
  .entry summary{ grid-template-columns:2.4ch minmax(0,1fr); }
  .entry__meta{ grid-column:2; white-space:normal; }
  .entry__body{ padding-inline-start:0; }
  .featured{ grid-template-columns:1fr; gap:.9rem; }
  .lampline{ grid-template-columns:1fr; }
  .write__grid .portrait{ max-inline-size:none; }
}
/* ============ GALLERY: posters + tide-tint photos ============ */
.gal{ display:grid; grid-template-columns:repeat(6,1fr); gap:1.1rem; margin-block-start:1.8rem; }
.piece{ border:1px solid var(--line-soft); background:var(--bg-2); display:flex; flex-direction:column; }
.piece svg{ display:block; inline-size:100%; block-size:auto; }
.piece--p{ grid-column:span 2; }
.piece--photo{ grid-column:span 3; }
.piece figcaption{ padding:.7rem .95rem; font-family:var(--mono); font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-38); border-top:1px solid var(--line-soft); }
html[lang="ar"] .piece figcaption{ font-family:var(--ar-sans); letter-spacing:0; text-transform:none; font-size:.8rem; }
figure.piece{ margin:0; }
.duo__img{ position:relative; overflow:hidden; }
.duo__img img{ display:block; inline-size:100%; block-size:auto; filter:grayscale(1) contrast(1.06) brightness(.92); }
.duo__img::after{ content:""; position:absolute; inset:0; background:var(--accent-deep); mix-blend-mode:color; opacity:.85; pointer-events:none; }
[data-theme="day"] .duo__img::after{ opacity:.65; }
.gal-note{ margin-block-start:1.1rem; font-size:.85rem; color:var(--ink-38); font-style:italic; max-inline-size:60ch; }
@media (max-width:900px){ .piece--p{ grid-column:span 3; } .piece--photo{ grid-column:span 6; } }
@media (max-width:520px){ .piece--p{ grid-column:span 6; } }

/* ============ READING MARGIN: whispered quotes + postcard ============ */
.qstrip{ position:relative; overflow:hidden; background:var(--bg-2); border-block:1px solid var(--line-soft);
  padding:clamp(3.2rem,9vh,5.5rem) var(--pad); }
.qstrip > svg.qbg{ position:absolute; inset-inline-end:-4%; inset-block-start:-30%; inline-size:52%; opacity:.05; color:var(--accent-mid); pointer-events:none; }
.qwrap{ position:relative; max-inline-size:820px; }
.qkicker{ display:flex; align-items:center; gap:.7rem; }
.qkicker svg{ inline-size:26px; block-size:26px; color:var(--accent-mid); }
.qtext{ margin-block-start:1.3rem; font-size:clamp(1.45rem,3.1vw,2.15rem); line-height:1.5; max-inline-size:26ch; }
html[lang="ar"] .qtext, .qtext[dir="rtl"]{ font-family:var(--ar-display); line-height:1.75; }
.qtext .qq{ color:var(--accent); }
.qsrc{ margin-block-start:.9rem; font-family:var(--mono); font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-60); }
html[lang="ar"] .qsrc{ font-family:var(--ar-sans); letter-spacing:0; text-transform:none; font-size:.88rem; }
.qnote{ margin-block-start:1rem; max-inline-size:56ch; color:var(--ink-60); font-size:.98rem; border-inline-start:2px solid var(--accent-mid); padding-inline-start:.9rem; }
.qnote b{ font-weight:500; color:var(--ink); }
.qact{ margin-block-start:1.6rem; display:flex; flex-wrap:wrap; gap:.8rem; align-items:center; }
.qtag{ margin-inline-start:auto; }
.qswap{ animation:qIn .5s cubic-bezier(.16,1,.3,1); }
@keyframes qIn{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none;} }
@media (max-width:700px){ .qtag{ margin-inline-start:0; } }
@media (prefers-reduced-motion: reduce){ .qswap{ animation:none; } }

/* rendering performance: skip offscreen chapter work */
.ch{ content-visibility:auto; contain-intrinsic-size:auto 900px; }