/* Ghazi Mahmoud, v2: the altdesign hero scene on top of the Elaya system.
   Everything below the hero follows Elaya landing-page-design: sizes on the Tailwind type scale,
   gaps from the skill's spacing table. The v2 parts are at the end of this file. */
:root {
  --s-25: 2px; --s-50: 4px; --s-75: 8px; --s-100: 12px; --s-200: 16px; --s-300: 24px;
  --s-400: 32px; --s-500: 40px; --s-600: 48px; --s-700: 64px; --s-800: 80px; --s-900: 96px;
  --r-sm: 2px; --r: 4px; --r-md: 6px; --r-lg: 8px; --r-xl: 12px; --r-2xl: 16px; --r-3xl: 24px; --r-full: 9999px;
  --bg: #FFFFFF; --surface: #F5F5F4; --line: #E7E5E4; --text: #0A0A0A; --muted: #57534E;
  --navy: #1B2A52; --scene: #101A33; --scene-2: #18244A; --wall-ink: #3A4A7A; --wood: #815B38; --wood-hi: #D9B48A;
  --d-bg: #101A33; --d-card: #18244A; --d-card-2: #1F2E5C; --d-line: #2B3A68; --d-muted: #B4BCD2;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --font: "Geist", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --wrap: 1200px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--s-900); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 16px; line-height: 1.8; font-style: normal; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
h1, h2, h3, h4 { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
button, input { font: inherit; color: inherit; }
em, i, cite, address { font-style: normal; }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; border-radius: var(--r); }
.dark :focus-visible { outline-color: #FFFFFF; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; top: var(--s-75); inset-inline-start: var(--s-75); z-index: 100; background: var(--text); color: #FFFFFF; padding: var(--s-75) var(--s-100); border-radius: var(--r-lg); transform: translateY(-96px); transition: transform 500ms var(--ease); }
.skip:focus { transform: none; }

/* Named text styles (skill B1). Latin blocks keep the skill's line heights.
   Arabic blocks get taller lines: the brief asks for 1.8 on body text. */
.heading-1 { font-size: 60px; line-height: 60px; font-weight: 600; }
.heading-2 { font-size: 48px; line-height: 48px; font-weight: 600; }
.heading-3 { font-size: 36px; line-height: 40px; font-weight: 600; }
.heading-4 { font-size: 30px; line-height: 36px; font-weight: 600; }
.heading-5 { font-size: 24px; line-height: 32px; font-weight: 600; }
.heading-6 { font-size: 20px; line-height: 28px; font-weight: 600; }
.title-1 { font-size: 20px; line-height: 28px; font-weight: 500; }
.title-2 { font-size: 18px; line-height: 28px; font-weight: 500; }
.title-3 { font-size: 16px; line-height: 24px; font-weight: 500; }
.title-4 { font-size: 14px; line-height: 20px; font-weight: 500; }
.body-1 { font-size: 16px; line-height: 24px; font-weight: 600; }
.body-2 { font-size: 16px; line-height: 24px; font-weight: 500; }
.body-3 { font-size: 16px; line-height: 24px; font-weight: 400; }
.body-6 { font-size: 14px; line-height: 20px; font-weight: 400; }
.body-7 { font-size: 18px; line-height: 28px; font-weight: 400; }
.body-8 { font-size: 20px; line-height: 28px; font-weight: 400; }
.button-md { font-size: 16px; line-height: 24px; font-weight: 600; }
.button-sm { font-size: 14px; line-height: 20px; font-weight: 600; }
.caption-1 { font-size: 14px; line-height: 20px; font-weight: 500; }
.caption-2 { font-size: 14px; line-height: 20px; font-weight: 400; }
.caption-4 { font-size: 12px; line-height: 16px; font-weight: 500; }
:is(.heading-1, .heading-2, .heading-3, .heading-4):lang(ar) { line-height: 1.4; }
:is(.heading-5, .heading-6, .title-1, .title-2, .title-3, .title-4):lang(ar) { line-height: 1.6; }
:is(.body-1, .body-2, .body-3, .body-6, .body-7):lang(ar) { line-height: 1.8; }
.body-8:lang(ar) { line-height: 2; }
:is(.caption-1, .caption-2, .caption-4, .button-md, .button-sm):lang(ar) { line-height: 1.7; }
.muted { color: var(--muted); }
.dark .muted { color: var(--d-muted); }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--s-200); }
section { padding-block: var(--s-700); }
.sec-head { display: flex; flex-direction: column; gap: var(--s-100); max-width: 680px; margin-block-end: var(--s-500); }
.eyebrow { color: var(--wood); display: inline-flex; align-items: center; gap: var(--s-75); }
.dark .eyebrow { color: #D9B48A; }
.ico { width: 20px; height: 20px; flex: none; fill: currentColor; }
[dir="ltr"] .ico-dir, .ico-flip-rtl:dir(rtl) { transform: scaleX(-1); }
[dir="ltr"] .ico-flip-rtl { transform: none; }

/* Buttons: skill padding 8 / 12, plus the brief's 44px tap target */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-75); min-height: 44px; padding: var(--s-75) var(--s-200); border-radius: var(--r-xl); border: 1px solid var(--text); background: var(--text); color: #FFFFFF; cursor: pointer; transition: transform 500ms var(--ease), opacity 300ms var(--ease); }
.btn:hover { opacity: 0.86; }
.btn:active { transform: scale(0.98); }
.btn-ghost { background: var(--bg); color: var(--text); border-color: var(--line); }
.btn-ghost:hover { opacity: 1; background: var(--surface); }
.dark .btn { background: #FFFFFF; color: #000000; border-color: #FFFFFF; }
.link { display: inline-flex; align-items: center; gap: var(--s-75); min-height: 44px; color: var(--navy); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.link:hover { text-decoration-thickness: 2px; }
.dark .link { color: #FFFFFF; }

/* Floating navigation (skill B7) */
.nav { position: fixed; top: var(--s-200); inset-inline: 0; z-index: 60; display: flex; justify-content: center; padding-inline: var(--s-200); pointer-events: none; }
.nav-bar { pointer-events: auto; display: flex; align-items: center; gap: var(--s-75); padding: var(--s-75); padding-inline-start: var(--s-200); border-radius: var(--r-2xl); border: 1px solid var(--line); background: rgba(255, 255, 255, 0.88); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.nav-brand { display: inline-flex; align-items: center; min-height: 44px; padding-inline-end: var(--s-100); white-space: nowrap; }
.nav-links { display: none; align-items: center; gap: var(--s-25); }
.nav-links a, .nav-lang { display: inline-flex; align-items: center; gap: var(--s-75); min-height: 44px; padding: var(--s-75) var(--s-100); border-radius: var(--r-lg); color: var(--muted); white-space: nowrap; transition: background-color 300ms var(--ease), color 300ms var(--ease); }
.nav-links a:hover, .nav-lang:hover { background: var(--surface); color: var(--text); }
.nav-links a[aria-current] { background: var(--surface); color: var(--text); }
.nav-lang { border: 1px solid var(--line); color: var(--text); background: var(--bg); }
.nav-toggle { width: 44px; height: 44px; border: 0; background: transparent; border-radius: var(--r-lg); cursor: pointer; position: relative; }
.nav-toggle span { position: absolute; inset-inline: var(--s-100); top: 50%; height: 2px; margin-top: -1px; border-radius: var(--r-full); background: var(--text); transition: transform 500ms var(--ease); }
.nav-toggle span:first-child { transform: translateY(-4px); }
.nav-toggle span:last-child { transform: translateY(4px); }
.nav-toggle[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child { transform: rotate(-45deg); }
.menu { position: fixed; inset: 0; z-index: 50; background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); padding: var(--s-900) var(--s-300) var(--s-400); display: flex; flex-direction: column; gap: var(--s-75); opacity: 0; visibility: hidden; transition: opacity 300ms var(--ease), visibility 0s linear 300ms; overflow-y: auto; }
.menu.is-open { opacity: 1; visibility: visible; transition: opacity 300ms var(--ease), visibility 0s; }
.menu a { display: flex; align-items: center; min-height: 48px; opacity: 0; transform: translateY(24px); transition: transform 500ms var(--ease), opacity 500ms var(--ease); }
.menu.is-open a { opacity: 1; transform: none; transition-delay: calc(min(var(--i) * 60ms, 400ms)); }
.menu a[aria-current] { color: var(--wood); }
@media (min-width: 960px) { .nav-links { display: flex; } .nav-toggle, .menu { display: none; } }

/* Latest */
.latest-grid { display: grid; gap: var(--s-200); }
.card { display: flex; flex-direction: column; gap: var(--s-200); padding: var(--s-300); border: 1px solid var(--line); border-radius: var(--r-3xl); background: var(--bg); transition: transform 500ms var(--ease), background-color 300ms var(--ease); }
a.card:hover { background: var(--surface); transform: translateY(-2px); }
a.card:active { transform: scale(0.98); }
.card-feature { background: var(--navy); border-color: var(--navy); color: #FFFFFF; justify-content: space-between; gap: var(--s-400); }
a.card-feature:hover { background: var(--navy); }
.card-feature .muted { color: #D4D4DC; }
.card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-50) var(--s-200); color: var(--muted); }
.card-feature .card-meta { color: #D4D4DC; }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-200); margin-block-start: auto; }
.tagrow { display: flex; flex-wrap: wrap; gap: var(--s-75); }
.tag { display: inline-flex; padding: var(--s-25) var(--s-75); border-radius: var(--r-md); background: var(--surface); color: var(--muted); }
.card-feature .tag { background: rgba(255, 255, 255, 0.12); color: #FFFFFF; }
.en-title { direction: ltr; text-align: right; unicode-bidi: isolate; }
@media (min-width: 720px) { .latest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .card-feature { grid-column: span 2; padding: var(--s-500); } }
@media (min-width: 1080px) { .latest-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .card-feature { grid-column: span 2; grid-row: span 2; } }

/* Archive */
.filters { display: flex; flex-direction: column; gap: var(--s-200); padding: var(--s-300); border: 1px solid var(--line); border-radius: var(--r-3xl); background: var(--surface); margin-block-end: var(--s-300); }
.search { position: relative; }
.search .ico { position: absolute; inset-inline-start: var(--s-200); top: 50%; margin-top: -10px; color: var(--muted); pointer-events: none; }
.search input { width: 100%; min-height: 48px; padding: var(--s-75) var(--s-200); padding-inline-start: var(--s-600); border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--bg); }
.search input::placeholder { color: var(--muted); opacity: 1; }
.frow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-75); }
.frow-label { color: var(--muted); min-width: 64px; }
.fbtn { min-height: 44px; padding: var(--s-75) var(--s-200); border: 1px solid var(--line); border-radius: var(--r-full); background: var(--bg); cursor: pointer; transition: background-color 300ms var(--ease), color 300ms var(--ease), transform 500ms var(--ease); }
.fbtn:hover { background: var(--line); }
.fbtn:active { transform: scale(0.98); }
.fbtn[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: #FFFFFF; }
.fbtn span { color: var(--muted); font-weight: 400; }
.fbtn[aria-pressed="true"] span { color: #D6D3D1; }
.count { color: var(--muted); margin-block-end: var(--s-100); }
.rows { display: flex; flex-direction: column; gap: var(--s-50); }
.row[hidden] { display: none; }
.row a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-50) var(--s-200); align-items: center; padding: var(--s-200); border-radius: var(--r-2xl); transition: background-color 300ms var(--ease), transform 500ms var(--ease); }
.row a:hover { background: var(--surface); }
.row a:active { transform: scale(0.98); }
.row time, .row-meta { color: var(--muted); grid-column: 1; }
.row h3 { grid-column: 1; }
.row .ico { grid-column: 2; grid-row: 1 / span 3; color: var(--muted); }
.row-here { color: var(--wood); }
@media (min-width: 960px) {
  .row a { grid-template-columns: 160px minmax(0, 1fr) 280px auto; gap: var(--s-300); }
  .row time, .row h3, .row-meta, .row .ico { grid-column: auto; grid-row: auto; }
}
.empty { padding: var(--s-600) var(--s-300); border: 1px solid var(--line); border-radius: var(--r-3xl); display: flex; flex-direction: column; align-items: center; gap: var(--s-200); text-align: center; }
.empty[hidden], .more[hidden] { display: none; }
.more-wrap { display: flex; justify-content: center; padding-block-start: var(--s-300); }

/* English */
.english { background: var(--surface); }
.en-list { display: grid; gap: var(--s-75); }
.en-list a { display: flex; flex-direction: column; gap: var(--s-50); padding: var(--s-200); border: 1px solid var(--line); border-radius: var(--r-2xl); background: var(--bg); min-height: 100%; transition: transform 500ms var(--ease); }
.en-list a:hover { transform: translateY(-2px); }
.en-list a:active { transform: scale(0.98); }
@media (min-width: 720px) { .en-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .en-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* TV rail */
.dark { background: var(--d-bg); color: #FFFFFF; }
.rail-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-300); }
.rail-head .sec-head { margin-block-end: var(--s-500); }
.rail-btns { display: none; gap: var(--s-75); margin-block-end: var(--s-500); }
.rail-btn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-full); border: 1px solid var(--d-line); background: var(--d-card); color: #FFFFFF; cursor: pointer; transition: background-color 300ms var(--ease), transform 500ms var(--ease); }
.rail-btn:hover { background: var(--d-line); }
.rail-btn:active { transform: scale(0.98); }
@media (min-width: 720px) { .rail-btns { display: flex; } }
.rail { display: flex; gap: var(--s-200); overflow-x: auto; scroll-snap-type: x mandatory; padding-block: var(--s-50) var(--s-200); padding-inline: max(var(--s-200), calc((100vw - var(--wrap)) / 2 + var(--s-200))); scroll-padding-inline: max(var(--s-200), calc((100vw - var(--wrap)) / 2 + var(--s-200))); scrollbar-color: var(--d-line) transparent; }
.vid { flex: none; width: min(320px, 80vw); scroll-snap-align: start; }
.vid a { display: flex; flex-direction: column; gap: var(--s-100); height: 100%; padding: var(--s-75); border: 1px solid var(--d-line); border-radius: var(--r-2xl); background: var(--d-card); transition: background-color 300ms var(--ease), transform 500ms var(--ease); }
.vid a:hover { background: var(--d-card-2); transform: translateY(-2px); }
.vid a:active { transform: scale(0.98); }
.vid-thumb { position: relative; border-radius: var(--r-lg); overflow: hidden; background: #000000; }
.vid-thumb img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.vid-play { position: absolute; inset-block-end: var(--s-75); inset-inline-start: var(--s-75); display: inline-flex; align-items: center; gap: var(--s-50); padding: var(--s-50) var(--s-75); border-radius: var(--r-md); background: #000000; color: #FFFFFF; }
.vid-play .ico { width: 16px; height: 16px; }
.vid-body { display: flex; flex-direction: column; gap: var(--s-75); padding: var(--s-50) var(--s-75) var(--s-75); }
.tv-foot { padding-block-start: var(--s-300); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-75); }
.dark .chip { background: var(--d-card); border-color: var(--d-line); }

/* Book */
.book-grid { display: grid; gap: var(--s-600); align-items: center; }
.cover-wrap { display: flex; flex-direction: column; align-items: center; gap: var(--s-100); padding: var(--s-600) var(--s-300); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3xl); }
.cover { width: 256px; aspect-ratio: 3 / 4; background: var(--navy); color: #FFFFFF; border-radius: var(--r-lg); padding: var(--s-300); display: flex; flex-direction: column; justify-content: space-between; }
.cover svg { width: 100%; height: auto; }
.cover-author { color: #D9B48A; }
.book-copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-300); }
.facts { display: flex; flex-direction: column; gap: var(--s-100); }
.facts li { display: flex; gap: var(--s-100); align-items: flex-start; }
.facts .ico { margin-top: var(--s-50); color: var(--wood); }
@media (min-width: 960px) { .book-grid { grid-template-columns: 480px minmax(0, 1fr); gap: var(--s-800); } }

/* Bio */
.bio-grid { display: grid; gap: var(--s-600); }
.bio-text { display: flex; flex-direction: column; gap: var(--s-300); max-width: 680px; }
.quote-en { padding: var(--s-300); border: 1px solid var(--line); border-radius: var(--r-2xl); background: var(--surface); display: flex; flex-direction: column; gap: var(--s-75); }
.timeline { display: flex; flex-direction: column; gap: var(--s-75); }
.timeline li { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--s-200); padding: var(--s-200); border: 1px solid var(--line); border-radius: var(--r-2xl); }
.timeline time, .timeline .yrs { color: var(--muted); }
.bio-side { display: flex; flex-direction: column; gap: var(--s-300); }
.bio-photo { width: 100%; max-width: 340px; border-radius: var(--r-3xl); }
@media (min-width: 960px) { .bio-grid { grid-template-columns: minmax(0, 1fr) 400px; gap: var(--s-800); } }

/* FAQ */
.faq { background: var(--surface); }
.faq-list { display: flex; flex-direction: column; gap: var(--s-75); max-width: 800px; }
.faq details { border: 1px solid var(--line); border-radius: var(--r-2xl); background: var(--bg); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-200); min-height: 64px; padding: var(--s-200) var(--s-300); cursor: pointer; list-style: none; border-radius: var(--r-2xl); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ico { transition: transform 500ms var(--ease); color: var(--muted); }
.faq details[open] summary .ico { transform: rotate(45deg); }
.faq details p { padding: 0 var(--s-300) var(--s-300); color: var(--muted); max-width: 680px; }

/* Media request */
.media-box { display: grid; gap: var(--s-400); align-items: center; padding: var(--s-300); border-radius: var(--r-3xl); background: var(--navy); color: #FFFFFF; }
.media-box img { width: 100%; max-width: 320px; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-2xl); }
.media-copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-300); }
.media-copy p { color: #D4D4DC; max-width: 680px; }
.media-box .btn { background: #FFFFFF; color: #000000; border-color: #FFFFFF; }
.media-box :focus-visible { outline-color: #FFFFFF; }
.socials { display: flex; flex-wrap: wrap; gap: var(--s-75); align-items: center; }
.social { display: inline-flex; align-items: center; gap: var(--s-75); min-height: 44px; padding: var(--s-75) var(--s-100); border-radius: var(--r-xl); border: 1px solid rgba(255, 255, 255, 0.3); transition: background-color 300ms var(--ease); }
.social:hover { background: rgba(255, 255, 255, 0.12); }
@media (min-width: 800px) { .media-box { grid-template-columns: 320px minmax(0, 1fr); padding: var(--s-600); gap: var(--s-700); } }

footer { padding-block: var(--s-600); border-top: 1px solid var(--line); }
.foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-200) var(--s-400); }
.foot nav { display: flex; flex-wrap: wrap; gap: var(--s-50) var(--s-300); }
.foot nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); }
.foot nav a:hover { color: var(--text); }

/* Article page */
.progress { position: fixed; top: 0; inset-inline: 0; height: 4px; z-index: 70; background: var(--wood); transform: scaleX(0); transform-origin: right center; }
[dir="ltr"] .progress { transform-origin: left center; }
.art-head { padding-block: calc(var(--s-900) + var(--s-400)) var(--s-500); }
.art-head-in { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-300); max-width: 800px; }
.art-head h1 { font-size: 30px; }
.byline { display: flex; align-items: center; gap: var(--s-100); }
.byline img { width: 48px; height: 48px; border-radius: var(--r-full); object-fit: cover; }
.art-meta { display: flex; flex-wrap: wrap; gap: var(--s-75) var(--s-300); color: var(--muted); }
.art-meta span, .art-meta time { display: inline-flex; align-items: center; gap: var(--s-75); }
.art-grid { display: grid; gap: var(--s-600); padding-block-end: var(--s-900); }
.prose { max-width: 680px; display: flex; flex-direction: column; gap: var(--s-300); text-align: start; }
.prose p:first-child { font-weight: 500; }
.art-aside { display: flex; flex-direction: column; gap: var(--s-200); }
.aside-card { padding: var(--s-300); border: 1px solid var(--line); border-radius: var(--r-3xl); background: var(--surface); display: flex; flex-direction: column; gap: var(--s-100); }
.aside-card ul { display: flex; flex-direction: column; }
.next { background: var(--surface); }
@media (min-width: 960px) {
  .art-head h1 { font-size: 48px; }
  .art-grid { grid-template-columns: minmax(0, 680px) 320px; justify-content: space-between; align-items: start; }
  .art-aside { position: sticky; top: var(--s-900); }
}

/* Scroll reveals (skill B7): rise 32px, fade, once */
.js [data-reveal] { opacity: 0; transform: translateY(32px); }
.js [data-reveal].is-in { opacity: 1; transform: none; transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-property: opacity !important; transition-delay: 0s !important; }
  .js [data-reveal], .menu a { transform: none; }
  a.card:hover, .vid a:hover, .en-list a:hover, .btn:active, .row a:active { transform: none; }
  .progress { display: none; }
}

.ico-back:dir(rtl) { transform: scaleX(-1); }

/* Fixes after the first screenshot pass */
.skip { min-height: 44px; display: inline-flex; align-items: center; }
.byline a { display: inline-flex; align-items: center; min-height: 44px; }
.menu a[dir="ltr"] { justify-content: flex-end; }
.faq summary .faq-ico { transform: rotate(45deg); }
.faq details[open] summary .faq-ico { transform: none; }
@media (max-width: 959px) {
  .feature-title { font-size: 24px; }
  .prose.body-8 { font-size: 18px; }
}

/* ================= v2 ================= */
main, .site-foot { position: relative; z-index: 1; }
main > section, .site-foot { background: var(--bg); }
main > section.dark { background: var(--d-bg); }
main > section.english { background: var(--surface); }
@media (min-width: 960px) { section { padding-block: var(--s-900); } }
.grad { background: linear-gradient(to left, #000000, #666666); -webkit-background-clip: text; background-clip: text; color: transparent; padding-block: var(--s-50); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-75); }
.chip { display: inline-flex; align-items: center; gap: var(--s-75); min-height: 32px; padding: var(--s-50) var(--s-100); border-radius: var(--r-full); background: var(--surface); border: 1px solid var(--line); }
[hidden] { display: none !important; }

/* The scene (from altdesign): he sits in front of a wall of his own headlines. The wall drifts up,
   nothing else moves, and the page scrolls over it. */
.hero { --peek: 132px; position: sticky; top: 0; z-index: 0; height: 100vh; height: 100svh; min-height: 640px; overflow: hidden; background: var(--scene); color: #FFFFFF; padding: 0; }
.hero.off { visibility: hidden; }
.wall { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(8, 1fr); direction: rtl; }
.wall .col { border-inline-start: 1px solid rgba(255, 255, 255, 0.08); overflow: hidden; padding-inline: var(--s-100); min-width: 0; }
.wall .track { display: flex; flex-direction: column; animation: drift 260s linear infinite; will-change: transform; }
.wall .col:nth-child(even) .track { animation-delay: -97s; }
.wall .col:nth-child(3n) .track { animation-delay: -171s; }
.wall .t { display: block; padding-bottom: var(--s-300); font-size: 14px; line-height: 1.8; font-weight: 500; color: var(--wall-ink); }
.wall .t[lang="en"] { direction: ltr; text-align: left; }
.hero.off .track, .hero.paused .track { animation-play-state: paused; }
@keyframes drift { to { transform: translateY(-50%); } }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(16, 26, 51, 0.92) 0, rgba(16, 26, 51, 0) 200px), linear-gradient(to left, rgba(16, 26, 51, 0.97) 0%, rgba(16, 26, 51, 0.93) 36%, rgba(16, 26, 51, 0) 66%); }
.hero-in { position: relative; height: 100%; }
.hero-copy { position: relative; z-index: 2; height: 100%; max-width: 560px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--s-300); padding-block: var(--s-900) calc(var(--peek) + var(--s-300)); }
.hero-h1 { font-size: 48px; line-height: 1.3; font-weight: 600; }
.h1-pun { display: block; color: #C2C8D8; }
.h1-n { color: #FFFFFF; text-decoration: underline; text-decoration-color: var(--wood-hi); text-decoration-thickness: 4px; text-underline-offset: 10px; }
.hero-sub { color: #C2C8D8; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-75) var(--s-300); padding-block-start: var(--s-75); }
.btn-light, .hero .btn { background: #FFFFFF; color: #0A0A0A; border-color: #FFFFFF; }
.hero-link { color: #FFFFFF; text-decoration-color: rgba(255, 255, 255, 0.4); }
.hero :focus-visible, .feature :focus-visible, .feature-link:focus-visible { outline-color: #FFFFFF; }
.hero-fig { display: contents; }
.hero-man { position: absolute; z-index: 1; left: max(0px, calc(var(--s-200) - 32px)); bottom: calc(var(--peek) - 28px); height: min(calc(100svh - var(--peek) - 116px), 860px); width: auto; max-width: none; filter: drop-shadow(0 30px 60px rgba(6, 10, 24, 0.5)); }
.hero-copy > * { animation: arrive 700ms var(--ease) 250ms both; }
.hero-copy > *:nth-child(2) { animation-delay: 330ms; }
.hero-copy > *:nth-child(3) { animation-delay: 410ms; }
@keyframes arrive { from { opacity: 0; transform: translateY(16px); } }
.wall-toggle { position: absolute; z-index: 3; inset-inline-start: var(--s-200); bottom: calc(var(--peek) + var(--s-200)); width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-full); border: 1px solid rgba(255, 255, 255, 0.24); background: rgba(16, 26, 51, 0.6); color: #FFFFFF; cursor: pointer; transition: background-color 300ms var(--ease); }
.wall-toggle:hover { background: var(--scene-2); }
.wall-toggle .i-play, .wall-toggle[aria-pressed="true"] .i-pause { display: none; }
.wall-toggle[aria-pressed="true"] .i-play { display: block; }
@media (max-width: 1199px) and (min-width: 900px) { .hero-copy { max-width: 440px; } .hero-h1 { font-size: 36px; } }
@media (max-width: 899px) {
  .hero { --peek: 124px; }
  .wall { grid-template-columns: repeat(3, 1fr); }
  .wall .col:nth-child(n+4) { display: none; }
  .hero-shade { background: linear-gradient(to top, rgba(16, 26, 51, 0.92) 0, rgba(16, 26, 51, 0) 180px), linear-gradient(to bottom, rgba(16, 26, 51, 0.96) 0%, rgba(16, 26, 51, 0.92) 44%, rgba(16, 26, 51, 0) 72%); }
  .hero-in { display: flex; flex-direction: column; padding-block: 88px calc(var(--peek) - 24px); }
  .hero-copy { height: auto; flex: none; max-width: 640px; padding-block: 0; gap: var(--s-200); justify-content: flex-start; }
  .hero-h1 { font-size: 30px; }
  .hero-sub { font-size: 16px; }
  .hero-cta { padding-block-start: 0; }
  .hero-fig { display: block; position: relative; flex: 1 1 0; min-height: 0; margin-block-start: var(--s-200); }
  .hero-man { position: absolute; inset: 0; left: 0; bottom: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
  .wall-toggle { inset-inline-start: auto; inset-inline-end: 0; bottom: auto; top: 0; }
}
@media (min-width: 600px) and (max-width: 899px) { .hero-h1 { font-size: 36px; } .hero-in { padding-block-start: 104px; } }

/* Latest: the newest article is one large blue feature whose top edge shows on the first screen. */
main > section.latest { padding-block-start: 0; display: flow-root; }
.feature { position: relative; margin-block-start: calc(-1 * var(--peek, 132px)); border-radius: var(--r-3xl); background: var(--navy); color: #FFFFFF; border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: 0 -16px 48px rgba(6, 10, 24, 0.35); transition: transform 500ms var(--ease); }
.latest { --peek: 132px; }
.feature-link { display: flex; flex-direction: column; gap: var(--s-200); padding: var(--s-400) var(--s-500) var(--s-500); border-radius: var(--r-3xl); }
.feature-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-50) var(--s-200); color: #C9D0E2; }
.feature-k { color: var(--wood-hi); }
.feature-title { max-width: 880px; }
.feature-lead { color: #D6DBE8; max-width: 760px; }
.feature-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-200); padding-block-start: var(--s-200); }
.feature .tag { background: rgba(255, 255, 255, 0.12); color: #FFFFFF; }
.feature-go { display: inline-flex; align-items: center; gap: var(--s-75); min-height: 44px; padding: var(--s-75) var(--s-200); border-radius: var(--r-xl); background: #FFFFFF; color: #0A0A0A; transition: opacity 300ms var(--ease); }
.feature-link:hover .feature-go { opacity: 0.86; }
.feature-link:hover .feature-title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; }
.recent-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-200); padding-block: var(--s-600) var(--s-200); }
.latest-grid li, .latest-grid article, .en-list article, .vid article { display: flex; flex-direction: column; height: 100%; }
.latest-grid .card { flex: 1; }
@media (min-width: 720px) { .latest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .latest-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 899px) {
  .latest { --peek: 124px; }
  .feature-link { padding: var(--s-300); gap: var(--s-100); }
  .feature-title { font-size: 24px; }
  .feature-lead { font-size: 16px; }
}

/* Where his work appears: one quiet line, names only. */
.outlets-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-75) var(--s-300); margin-block-start: var(--s-600); padding-block-start: var(--s-300); border-top: 1px solid var(--line); }
.outlets-line p { flex: none; }
.outlets-line ul { display: block; flex: 1 1 320px; color: var(--text); }
.outlets-line li { display: inline; }
.outlets-line li:not(:last-child)::after { content: "،"; margin-inline-end: var(--s-75); color: var(--muted); }
.tv-line { border-top-color: var(--d-line); margin-block-start: var(--s-300); }
.tv-line ul { color: #FFFFFF; }
.tv-line li:not(:last-child)::after { color: var(--d-muted); }

/* English list: titles and dates only */
.en-list a { flex-direction: row; align-items: baseline; gap: var(--s-200); flex: 1; min-height: 56px; }
.en-list a time { flex: none; min-width: 96px; }
.en-list a h3 { flex: 1; }
.en-list a .ico { align-self: center; color: var(--muted); width: 16px; height: 16px; }
.english .sec-head { margin-block-end: var(--s-300); }
main > section.english { padding-block: var(--s-700); }

/* TV rail */
.rail { overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.rail:focus-visible { outline-offset: -2px; }
.rail-btn:disabled { opacity: 0.35; cursor: default; }
.rail-btn:disabled:hover { background: var(--d-card); }
.vid a { flex: 1; }
.vid-play { background: rgba(10, 10, 10, 0.86); }

/* Book: the real cover, never larger than the file */
.cover-wrap { padding: var(--s-600) var(--s-300); }
.cover-img { width: min(300px, 70vw); border-radius: var(--r); box-shadow: 0 2px 4px rgba(16, 26, 51, 0.16), 0 24px 48px rgba(16, 26, 51, 0.24); }
.book-grid { align-items: start; }
.book-meta { display: flex; flex-wrap: wrap; gap: var(--s-75) var(--s-400); }
.book-meta div { display: flex; flex-direction: column; }
.book-meta dt { color: var(--muted); }
.book-meta dd { font-weight: 500; font-size: 16px; }
.en-line { align-self: stretch; text-align: right; }
.blurb { margin: 0; padding-inline-start: var(--s-300); border-inline-start: 2px solid var(--wood); display: flex; flex-direction: column; gap: var(--s-100); max-width: 680px; }
.blurb details { display: flex; flex-direction: column; }
.blurb details p { margin-block-end: var(--s-100); }
.blurb summary { list-style: none; cursor: pointer; width: fit-content; }
.blurb summary::-webkit-details-marker { display: none; }
.blurb details[open] { display: flex; flex-direction: column-reverse; }
.blurb .d-less, .blurb details[open] .d-more { display: none; }
.blurb details[open] .d-less { display: inline; }
.blurb footer { padding: 0; border: 0; background: none; }
@media (min-width: 960px) { .book-grid { grid-template-columns: 420px minmax(0, 1fr); } .cover-wrap { position: sticky; top: var(--s-900); } }

/* Media request */
.media-box { background: var(--navy); }
.media-box .eyebrow { color: var(--wood-hi); }
.topics { display: flex; flex-wrap: wrap; gap: var(--s-75); }
.topics li { display: inline-flex; align-items: center; min-height: 32px; padding: var(--s-50) var(--s-100); border-radius: var(--r-full); border: 1px solid rgba(255, 255, 255, 0.24); color: #FFFFFF; }
.media-copy .socials span { color: #D4D4DC; }

/* About, at the bottom */
.about { background: var(--surface) !important; }
.about-grid { display: grid; gap: var(--s-600); align-items: start; }
.about-text { display: flex; flex-direction: column; gap: var(--s-300); max-width: 680px; }
.about .quote-en { background: var(--bg); }
.about .chip { background: var(--bg); }
.about-photo { width: 100%; max-width: 400px; padding: var(--s-75); border: 1px solid var(--line); border-radius: var(--r-3xl); background: var(--bg); }
.about-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-2xl); }
.about-photo figcaption { padding: var(--s-100) var(--s-75) var(--s-50); }
.about-more { margin-block-start: var(--s-700); }
.about-more h3 { margin-block-end: var(--s-200); }
.about .timeline li { background: var(--bg); }
.faq { background: none; }
.faq summary h4 { margin: 0; }
.faq summary { min-height: 56px; padding: var(--s-100) var(--s-200); }
.faq details p { padding: 0 var(--s-200) var(--s-200); }
@media (min-width: 960px) {
  .about-grid { grid-template-columns: minmax(0, 1fr) 400px; gap: var(--s-800); }
  .about-more { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-600); }
}

/* Article page: light nav on a light page, same bar */
.page-article .next { background: var(--surface); }

@media (prefers-reduced-motion: reduce) {
  .wall .track, .hero-copy > * { animation: none !important; }
  .wall-toggle { display: none !important; }
  .feature-link:hover .feature-title { text-decoration: none; }
}
#latest { scroll-margin-top: 132px; }
@media (min-width: 1440px) { .hero-man { left: calc(var(--s-200) - 32px - min((100vw - 1440px) * 0.45, 280px)); } }