/* Asayl Labs homepage. Same tokens as the product pages (assets/asayl-tokens.json): paper, ink, teal, Space Grotesk display, Inter body, JetBrains Mono labels, hairlines. Header: assets/site-nav.css. */
:root { --paper:#F4F1EA; --paper-2:#EEEAE0; --white:#FCFBF7; --ink:#1A1A1A; --ink-soft:#3A3A36; --muted:#6B6B63; --line:#D8D3C7; --teal:#1B9E8F; --teal-deep:#157E72;
  --frame:1080px; --pad:clamp(20px,4vw,48px); --rail:200px; --col:640px;
  --display:'Space Grotesk',system-ui,sans-serif; --sans:'Inter',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace; }
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }
body { background:var(--paper); color:var(--ink); font:400 1.05rem/1.7 var(--sans); overflow-x:hidden; }
a { color:var(--ink); text-decoration-color:rgba(26,26,26,.35); text-decoration-thickness:1px; text-underline-offset:.22em; }
a:hover { color:var(--teal-deep); text-decoration-color:var(--teal-deep); }
a:focus-visible, button:focus-visible { outline:2px solid var(--teal); outline-offset:3px; }
.skip { position:absolute; left:12px; top:-48px; background:var(--ink); color:var(--white); padding:.5rem .8rem; z-index:9; }
.skip:focus { top:8px; }
.teal { color:var(--teal); }
.ext::after { content:"\00a0↗"; font-size:.85em; }
.wrap { max-width:var(--frame); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }

/* shared header (assets/site-nav.css) on the homepage's narrower frame */
.snav { --sn-frame: var(--frame); --sn-pad: var(--pad); }

/* hero */
.hero { padding:clamp(40px,8vw,104px) 0 clamp(56px,8vw,104px); }
.kicker, .tag { font:500 .74rem/1.3 var(--mono); letter-spacing:.09em; text-transform:uppercase; color:var(--muted); }
h1, h2, h3 { font-family:var(--display); font-weight:500; letter-spacing:-.02em; color:var(--ink); }
h1 { font-size:clamp(2.5rem,6.6vw,5rem); line-height:1; margin:1.4rem 0 2rem; }
h1 .teal { display:block; }
.lead { font-size:clamp(1.12rem,1.6vw,1.3rem); line-height:1.55; color:var(--ink-soft); max-width:46ch; }
.more { margin-top:1.6rem; font-family:var(--display); font-weight:500; }
.more a { text-decoration-color:var(--teal); text-decoration-thickness:2px; }

/* sections: mono tag in the left rail, text column on the right */
main > section:not(.hero) { display:grid; grid-template-columns:var(--rail) minmax(0,var(--col)); gap:1rem clamp(24px,5vw,72px); border-top:1px solid var(--line); padding:clamp(44px,6vw,80px) 0; }
.tag { padding-top:.55rem; }
.tag span { color:var(--teal-deep); margin-right:.5rem; }
.tag b { font-weight:500; }
h2 { font-size:clamp(1.6rem,3vw,2.15rem); line-height:1.12; margin-bottom:1.5rem; }
.body p { color:var(--ink-soft); margin-bottom:1.15rem; }
.body p:last-child { margin-bottom:0; }

/* numbered open questions */
.questions { list-style:none; counter-reset:q; margin:1.8rem 0; border-bottom:1px solid var(--line); }
.questions li { counter-increment:q; display:grid; grid-template-columns:2.6rem 1fr; padding:1.15rem 0; border-top:1px solid var(--line); font:500 1.2rem/1.4 var(--display); letter-spacing:-.01em; }
.questions li::before { content:"Q" counter(q); font:500 .74rem/1 var(--mono); letter-spacing:.06em; color:var(--teal-deep); padding-top:.5rem; }

/* hairline rows: people */
.rows { list-style:none; margin:1.8rem 0; border-bottom:1px solid var(--line); }
.rows li { display:grid; gap:.2rem 1.2rem; padding:.9rem 0; border-top:1px solid var(--line); align-items:baseline; line-height:1.45; }
.rows b { font:500 1.05rem/1.35 var(--display); }
.rows .d { color:var(--ink-soft); font-size:.95rem; }
.rows small { display:block; color:var(--muted); font-size:.86rem; margin-top:.1rem; }
.rows a { font-size:.86rem; color:var(--teal-deep); white-space:nowrap; }
.people li { grid-template-columns:12rem 1fr; }
.rows b a { font:inherit; color:var(--ink); white-space:normal; }
.rows b a:hover { color:var(--teal-deep); }
.body .sub { font:500 .74rem/1.3 var(--mono); letter-spacing:.09em; text-transform:uppercase; color:var(--muted); margin:2.8rem 0 .8rem; }
.name i { font-style:italic; }
.verse { font:400 clamp(1.5rem,3vw,2.1rem)/1.6 'Amiri',serif; color:var(--ink); margin-bottom:1.2rem; }
html[dir="ltr"] .verse { text-align:left; }
.essay-title { font-size:clamp(1.6rem,3vw,2.15rem); margin-bottom:.8rem; }
.essay-title a { text-decoration-color:var(--teal); text-decoration-thickness:2px; text-underline-offset:.12em; }
html[lang="ar"] .essay-title a { text-decoration-thickness:1px; text-underline-offset:.2em; }

/* Arabic: a sans with real Arabic glyphs replaces Space Grotesk and Inter; the grid mirrors itself with dir=rtl */
html[lang="ar"] body, html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] .questions li, html[lang="ar"] .rows b, html[lang="ar"] .mail, html[lang="ar"] .directions .links a { font-family:'IBM Plex Sans Arabic',system-ui,sans-serif; letter-spacing:0; }
html[lang="ar"] h1 { line-height:1.25; font-size:clamp(2.2rem,5.6vw,4.2rem); }
html[lang="ar"] h2 { line-height:1.45; }
html[lang="ar"] body { line-height:1.9; }
html[lang="ar"] .questions li { line-height:1.7; }
html[lang="ar"] .mail { direction:ltr; display:inline-block; }
html[dir="rtl"] .ext::after { content:"\00a0↖"; }
html[dir="rtl"] .essay-title span { display:inline-block; transform:scaleX(-1); }
html[dir="rtl"] .tag span { margin-right:0; margin-left:.5rem; }
span[lang="ar"] { font-family:'Amiri',serif; font-size:1.2em; line-height:1; }

/* research directions */
.directions li { grid-template-columns:9.5rem 1fr; padding:1.15rem 0; }
.directions b { font-size:1.2rem; }
.directions .d { font-size:1rem; line-height:1.6; }
.directions .links { display:flex; flex-wrap:wrap; gap:.3rem 1.3rem; margin-top:.55rem; }
.directions .links a { font:500 .92rem/1.4 var(--display); color:var(--teal-deep); }

.mail { display:inline-block; margin-top:.8rem; font:500 clamp(1.6rem,4.4vw,2.6rem)/1.1 var(--display); letter-spacing:-.02em; text-decoration-color:var(--teal); text-decoration-thickness:2px; text-underline-offset:.15em; overflow-wrap:anywhere; }

footer { display:flex; flex-wrap:wrap; justify-content:space-between; gap:.6rem 2rem; padding-top:28px; padding-bottom:56px; border-top:1px solid var(--line); font:400 .74rem/1.6 var(--mono); letter-spacing:.03em; color:var(--muted); }
footer a { color:var(--muted); } footer a:hover { color:var(--ink); }

@media (max-width:820px) {
  main > section:not(.hero) { grid-template-columns:1fr; }
  .tag { padding-top:0; }
}
@media (max-width:560px) {
  .bar nav { gap:1rem; font-size:.68rem; }
  .people li, .directions li { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }