/* Thara proposal site. Thara pages take colours, spacing, radii and type from assets/tokens.css; Home and Platform take Freedom's from assets/freedom.css. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
html:not(.motion) { scroll-behavior: auto; }
body { margin: 0; background: var(--surface-grey); color: var(--ink); font-family: var(--font-text); font-size: 17px; line-height: 1.5; font-weight: 400; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--ink-deep); outline-offset: 3px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--space-2); top: -80px; z-index: 50; padding: var(--space-1) var(--space-2); background: var(--ink-deep); color: var(--surface); border-radius: var(--radius-button); }
.skip:focus { top: var(--space-2); }
main { display: block; }
main:focus { outline: none; }

/* chrome */
.top { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: var(--space-2); min-height: 64px; padding: 0 var(--space-2); background: var(--surface-grey); border-bottom: 1px solid var(--thara-sand); }
.wordmark { display: inline-flex; align-items: center; min-height: 44px; margin-right: auto; }
.wordmark img { height: 34px; width: auto; display: block; }
@media (min-width: 768px) { .wordmark img { height: 38px; } }
.menu-btn { min-height: 44px; min-width: 44px; padding: 0 var(--space-2); border: 1px solid var(--ink-deep); border-radius: var(--radius-button); font-family: var(--font-display); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-deep); }
.nav { display: none; }
.nav a { display: flex; align-items: center; gap: 0.6em; min-height: 44px; padding: 0 var(--space-2); text-decoration: none; font-family: var(--font-display); font-size: 15px; color: var(--ink); white-space: nowrap; }
.nav a .n { font-size: 11px; letter-spacing: 0.12em; color: var(--thara-teal); font-weight: 500; }
.nav a[aria-current="page"] { color: var(--ink-deep); font-weight: 500; }
.nav a[aria-current="page"] .n { color: var(--ink-deep); }
.nav.is-open { display: flex; flex-direction: column; position: absolute; top: 64px; left: 0; right: 0; background: var(--surface-grey); border-bottom: 1px solid var(--thara-sand); padding: var(--space-1) 0 var(--space-2); }
@media (min-width: 768px) { .top { padding: 0 var(--space-4); } .menu-btn { display: none; } .nav { display: flex; gap: 0; } .nav a { padding: 0 12px; font-size: 14px; } .nav a .n { display: none; } }
@media (min-width: 1200px) { .nav a { padding: 0 14px; } .nav a .n { display: inline; } }
.foot { padding: var(--space-4) var(--space-2); border-top: 1px solid var(--thara-sand); font-family: var(--font-display); font-size: 13px; letter-spacing: 0.04em; color: var(--ink); }
@media (min-width: 768px) { .foot { padding: var(--space-4); } }

/* the signature: the constellation rail */
.rail { position: sticky; top: 64px; z-index: 30; display: flex; justify-content: center; gap: 2px; padding: 0 var(--space-2); background: var(--surface-grey); }
.rail-star { position: relative; display: flex; align-items: center; justify-content: center; width: 44px; height: 36px; text-decoration: none; }
.rail-star .star { display: block; width: 8px; height: 8px; background: var(--thara-strata-8); -webkit-mask: url("logos/thara-star.svg") center / contain no-repeat; mask: url("logos/thara-star.svg") center / contain no-repeat; transition: transform 600ms cubic-bezier(.2,.6,.2,1), background 600ms; }
.rail-star.is-current .star { width: 14px; height: 14px; background: var(--thara-teal); }
.rail-star:hover .star, .rail-star:focus-visible .star { background: var(--ink-deep); }
.rail-trail { display: none; }
@media (min-width: 1024px) {
  .rail { position: fixed; top: auto; bottom: 0; right: 0; height: calc(100vh - 64px); width: 56px; flex-direction: column; justify-content: center; gap: 6px; padding: 0; background: transparent; }
  .rail-star { width: 44px; height: 44px; }
  .rail-trail { display: block; position: absolute; left: 50%; top: 50%; width: 2px; height: 44vh; transform: translate(-50%, -50%); z-index: -1; overflow: visible; }
  .rail-trail line { stroke: var(--thara-strata-8); stroke-width: 2; stroke-dasharray: 1 5; stroke-dashoffset: 100; vector-effect: non-scaling-stroke; }
  .motion .rail-trail line { transition: stroke-dashoffset 200ms linear; }
}

/* layout */
.block { position: relative; padding: var(--space-5) 0; }
.block-in { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 var(--space-2); }
@media (min-width: 768px) { .block { padding: var(--space-6) 0; } .block-in { padding: 0 var(--space-4); } }
@media (min-width: 1440px) { .block-in { padding: 0 var(--space-6); max-width: 1392px; } }
.block-head { max-width: 1040px; margin-bottom: var(--space-4); }
.block-head > * + * { margin-top: var(--space-3); }
.block-body > * + * { margin-top: var(--space-4); }
.closing { margin-top: var(--space-5); max-width: 880px; }

/* grounds */
.ground-paper { background: var(--surface-grey); color: var(--ink); }
.ground-surface { background: var(--surface); color: var(--ink); }
.ground-sand { background: var(--thara-sand); color: var(--ink-deep); }
.ground-slate { background: var(--phase-gathering); color: var(--surface); }
.ground-khaki { background: var(--star-khaki); color: var(--ink-deep); }
.ground-night { background: var(--night); color: var(--surface); }
.ground-teal { background: var(--thara-deep); color: var(--surface); }
.ground-sage { background: var(--thara-strata-10); color: var(--ink-deep); }
.ground-slate .h2, .ground-night .h2, .ground-teal .h2, .ground-slate .title, .ground-night .title, .ground-slate .closing, .ground-night .closing, .ground-slate .quote, .ground-night .quote { color: inherit; }
.ground-slate .eyebrow, .ground-night .eyebrow, .ground-teal .eyebrow, .ground-slate .label, .ground-night .label { color: var(--thara-sand); }
.ground-slate .tag, .ground-night .tag { background: var(--thara-sand); color: var(--ink-deep); }
.ground-khaki .eyebrow, .ground-khaki .label, .ground-sand .eyebrow, .ground-sand .label { color: var(--thara-deep); }
.ground-khaki .tag { background: var(--thara-deep); color: var(--surface); }
.ground-slate .row, .ground-night .row, .ground-slate .acc-item, .ground-slate .acc, .ground-night .acc-item, .ground-night .acc { border-color: var(--thara-strata-8); }
.ground-slate .th-btn-outline, .ground-night .th-btn-outline { color: var(--surface); border-color: var(--surface); }
.ground-sand .row, .ground-sand .acc, .ground-sand .acc-item, .ground-sand .dtable th, .ground-sand .dtable td { border-color: var(--thara-strata-9); }

/* type */
.eyebrow { font-family: var(--font-display); font-size: 12px; line-height: 1.4; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; color: var(--thara-teal); }
.eyebrow .sep { margin: 0 0.4em; color: var(--thara-strata-8); }
.h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(32px, 4.8vw, 64px); line-height: 1.04; letter-spacing: -0.012em; color: var(--ink-deep); text-wrap: balance; }
.h2 .w-light { font-weight: 300; }
.h2 .w-roman { font-weight: 400; }
.statement .h2 { font-size: clamp(40px, 6.6vw, 96px); font-weight: 300; max-width: 16ch; }
.display .h2 { font-size: clamp(56px, 10vw, 150px); font-weight: 300; line-height: 0.98; max-width: 14ch; }
.statement .block-head { max-width: none; }
.lead { font-family: var(--font-display); font-weight: 300; font-size: clamp(19px, 2.1vw, 25px); line-height: 1.32; max-width: 760px; }
.lead p + p { margin-top: 0.8em; }
.lead a, .body a, .closing a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.lead a:hover, .body a:hover, .closing a:hover { color: var(--thara-teal); }
.body { font-family: var(--font-text); font-size: 17px; line-height: 1.5; max-width: 62ch; }
.body p + p, .body .gap { margin-top: 0.75em; }
.body .gap { display: block; content: ""; }
.body .w-bold { font-weight: 500; }
.body .w-roman { font-family: var(--font-display); font-weight: 400; }
.body .w-light { font-weight: 300; font-family: var(--font-display); font-size: 1.06em; }
.map-col .body .w-roman { font-family: var(--font-display); font-weight: 400; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.3; }
.title { font-family: var(--font-display); font-weight: 400; font-size: 20px; line-height: 1.25; color: var(--ink-deep); }
.title-lg { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.15; }
.ground-night .title, .ground-slate .title { color: inherit; }
.label { display: inline-block; font-family: var(--font-display); font-size: 12px; line-height: 1.3; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; color: var(--thara-teal); margin-bottom: var(--space-1); }
.label .num { font-weight: 300; margin-right: 0.3em; color: var(--thara-strata-7); }
.tag { display: inline-block; font-family: var(--font-display); font-size: 11px; line-height: 1; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 400; color: var(--surface); background: var(--thara-teal); border-radius: var(--radius-tag); padding: 8px 10px 7px; margin-bottom: var(--space-1); position: relative; z-index: 1; }
.tag-big { font-size: 13px; padding: 10px 12px 9px; }
.caption { display: block; font-family: var(--font-display); font-weight: 300; font-style: normal; font-size: 15px; letter-spacing: 0.04em; color: var(--ink); }
.quote { font-family: var(--font-display); font-weight: 400; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.2; color: var(--ink-deep); }
.stat { font-family: var(--font-display); font-weight: 400; font-size: clamp(48px, 6.6vw, 96px); line-height: 1; letter-spacing: -0.02em; color: inherit; }
.closing { font-family: var(--font-display); font-weight: 300; font-size: clamp(19px, 2vw, 25px); line-height: 1.32; }
.closing-lg { font-size: clamp(24px, 2.8vw, 36px); line-height: 1.2; max-width: 30ch; }
.closing p + p { margin-top: 0.8em; }
.arabic { font-family: var(--font-arabic); font-size: clamp(30px, 4vw, 44px); line-height: 1.5; font-weight: 400; color: var(--ink-deep); text-align: right; }
.portal-link { margin-top: var(--space-3); text-align: left; white-space: normal; line-height: 1.35; padding: 0.7em 1.2em; min-height: 44px; font-size: 13px; text-transform: none; letter-spacing: 0.02em; font-family: var(--font-text); }
.th-btn { min-height: 44px; }

/* rows, columns, tables */
.row { display: grid; gap: var(--space-2); padding: var(--space-3) 0; border-top: 1px solid var(--thara-strata-10); }
.row:first-child { border-top: 0; padding-top: 0; }
.row .cell > .tag { margin-bottom: 0; }
.row .cell .body, .row .cell .lead { max-width: none; }
.row.cols-1 { border-top: 0; }
.colset { display: grid; gap: var(--space-4) var(--space-3); }
.col > * + * { margin-top: var(--space-1); }
.col > .body + .tag, .col > .body + .label, .col > .body + .title, .col > .body + .title-lg { margin-top: var(--space-3); }
.col .body { max-width: none; }
.col .caption { margin-top: 2px; }
@media (min-width: 768px) {
  .row { grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr) minmax(0, 1.4fr); gap: var(--space-3); }
  .row.cols-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr); }
  .row.cols-4 { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr) minmax(0, 1.2fr) minmax(0, 1.2fr); }
  .row.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .row.cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .row.cols-1 { grid-template-columns: minmax(0, 1fr); }
  .colset.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .colset.cols-3, .colset.cols-4, .colset.cols-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) { .colset.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .colset.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .colset.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .row { gap: var(--space-4); } }
.aside { margin: 0 0 var(--space-4); padding: var(--space-3) 0 0; border-top: 1px solid var(--thara-strata-10); max-width: 520px; }
.aside > * + * { margin-top: var(--space-2); }
@media (min-width: 1024px) {
  .block-in:has(> .aside) { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); column-gap: var(--space-5); grid-template-areas: "head aside" "body body" "close close"; }
  .block-in:has(> .aside) > .block-head { grid-area: head; }
  .block-in:has(> .aside) > .aside { grid-area: aside; border-top: 0; padding-top: 0; margin: 0; }
  .block-in:has(> .aside) > .block-body { grid-area: body; }
  .block-in:has(> .aside) > .closing { grid-area: close; }
}
.table-wrap { width: 100%; }
.dtable { width: 100%; border-collapse: collapse; font-size: 16px; }
.dtable th, .dtable td { text-align: left; vertical-align: top; padding: var(--space-2) 0; border-top: 1px solid var(--thara-strata-10); font-weight: 400; }
.dtable thead th { font-family: var(--font-display); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; color: var(--thara-teal); border-top: 0; padding-top: 0; }
.dtable tbody th { font-family: var(--font-display); font-size: 19px; color: var(--ink-deep); }
.dtable tbody th x-import { display: block; margin-top: 6px; }
.dtable td p + p { margin-top: 0.6em; }
.dtable a { text-decoration: underline; text-underline-offset: 0.2em; }
@media (max-width: 767px) {
  .dtable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .dtable tr { display: block; padding: var(--space-2) 0; border-top: 1px solid var(--thara-strata-10); }
  .dtable th, .dtable td { display: block; border: 0; padding: 4px 0; }
  .dtable td[data-label]::before { content: attr(data-label); display: block; font-family: var(--font-display); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; color: var(--thara-teal); margin: var(--space-1) 0 2px; }
  .dtable .group-row th, .dtable .note-row td { padding: var(--space-3) 0 var(--space-1); }
}
@media (min-width: 768px) { .dtable th, .dtable td { padding: var(--space-2) var(--space-2) var(--space-2) 0; } .dtable td:last-child, .dtable th:last-child { padding-right: 0; } }

/* Thara hero */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-start; overflow: hidden; color: var(--surface); background: var(--thara-deep); }
.strata-bg { position: absolute; inset: 0; z-index: 0; }
.strata-bg x-import { display: block; height: 100%; }
.strata-bg .th-strata { height: 100%; }
.motion .parallax { will-change: transform; }
.hero-stars { position: absolute; right: var(--space-3); top: var(--space-5); z-index: 1; opacity: 0.9; }
.hero-stars x-import { display: block; }
.motion .hero-stars { animation: drift 14s ease-in-out infinite alternate; }
@keyframes drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-18px, 26px, 0); } }
.hero-in { position: relative; z-index: 2; width: 100%; max-width: 1280px; margin: 0 auto; padding: var(--space-6) var(--space-2) var(--space-5); }
@media (min-width: 768px) { .hero-in { padding: 120px var(--space-4) var(--space-6); } }
@media (min-width: 1440px) { .hero-in { padding: 140px var(--space-6) var(--space-6); max-width: 1392px; } }
.hero-num { font-family: var(--font-display); font-weight: 300; font-size: clamp(28px, 4vw, 56px); line-height: 1; color: var(--thara-sand); }
.hero-title { font-family: var(--font-display); font-weight: 300; font-size: clamp(56px, 12vw, 180px); line-height: 0.94; letter-spacing: -0.02em; margin-top: var(--space-2); max-width: 11ch; text-wrap: balance; }
.hero-sub { margin-top: var(--space-3); font-family: var(--font-display); font-weight: 400; font-size: clamp(16px, 1.8vw, 22px); line-height: 1.35; max-width: 34ch; color: var(--surface); }
.hero-extra { margin-top: var(--space-3); }
.hero-more { font-family: var(--font-display); font-weight: 300; font-size: clamp(16px, 1.8vw, 22px); line-height: 1.35; }
.hero-firm { margin-top: var(--space-1); font-weight: 500; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; }
.hero-eyebrow { font-family: var(--font-display); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; color: var(--thara-sand); }
.hero .portal-link { color: var(--surface); border-color: var(--surface); }
.next-strata { position: relative; min-height: 42vh; display: flex; align-items: flex-end; overflow: hidden; background: var(--thara-deep); }
.next-strata .strata-bg { top: auto; bottom: 0; height: 360%; }
.next-link { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 1280px; margin: 0 auto; padding: var(--space-5) var(--space-2) var(--space-4); text-decoration: none; color: var(--surface); }
@media (min-width: 768px) { .next-link { padding: var(--space-6) var(--space-4) var(--space-5); } }
.next-link .n { font-family: var(--font-display); font-weight: 300; font-size: 20px; color: var(--surface); }
.next-link .t { font-family: var(--font-display); font-weight: 300; font-size: clamp(40px, 7vw, 110px); line-height: 1; letter-spacing: -0.02em; }
.next-link .s { font-family: var(--font-display); font-size: 15px; margin-top: 4px; }
.next-link:hover .t, .next-link:focus-visible .t { text-decoration: underline; text-underline-offset: 0.12em; text-decoration-thickness: 2px; }

/* Freedom skin (Home and The Platform) */
.skin-freedom { background: var(--fr-ink); color: var(--fr-paper); --font-display: var(--font-freedom); --font-text: var(--font-freedom); }
.skin-freedom .top { background: var(--fr-ink); border-bottom-color: var(--fr-line); }
.skin-freedom .menu-btn { color: var(--fr-paper); border-color: var(--fr-grey-2); }
.skin-freedom .nav a { color: var(--fr-grey); }
.skin-freedom .nav a .n { color: var(--fr-green); }
.skin-freedom .nav a[aria-current="page"], .skin-freedom .nav a[aria-current="page"] .n { color: var(--fr-paper); }
.skin-freedom .nav.is-open { background: var(--fr-ink); border-bottom-color: var(--fr-line); }
.skin-freedom .rail { background: var(--fr-ink); }
.skin-freedom .rail-star .star { background: var(--fr-grey-2); }
.skin-freedom .rail-star.is-current .star { background: var(--fr-green); }
.skin-freedom .rail-star:hover .star, .skin-freedom .rail-star:focus-visible .star { background: var(--fr-paper); }
.skin-freedom .rail-trail line { stroke: var(--fr-grey-2); }
@media (min-width: 1024px) { .skin-freedom .rail { background: transparent; } }
.skin-freedom :focus-visible { outline-color: var(--fr-green); }
.skin-freedom .skip { background: var(--fr-green); color: var(--fr-ink); }
.skin-freedom .foot { border-top-color: var(--fr-line); color: var(--fr-grey); }
.ground-fr { background: var(--fr-ink); color: var(--fr-paper); }
.ground-fr2 { background: var(--fr-ink-2); color: var(--fr-paper); }
.skin-freedom .h2, .skin-freedom .title, .skin-freedom .quote, .skin-freedom .closing, .skin-freedom .stat { color: var(--fr-paper); }
.skin-freedom .h2 { font-weight: 500; letter-spacing: -0.02em; }
.skin-freedom .statement .h2, .skin-freedom .display .h2 { font-weight: 500; }
.skin-freedom .body { color: var(--fr-grey); font-weight: 400; }
.skin-freedom .lead { font-weight: 300; color: var(--fr-paper); }
.skin-freedom .eyebrow, .skin-freedom .label { color: var(--fr-green); }
.skin-freedom .label .num { color: var(--fr-grey-2); }
.skin-freedom .tag { background: var(--fr-green); color: var(--fr-ink); font-weight: 500; }
.skin-freedom .row, .skin-freedom .aside, .skin-freedom .acc, .skin-freedom .acc-item, .skin-freedom .dtable th, .skin-freedom .dtable td { border-color: var(--fr-line); }
.skin-freedom .dtable thead th, .skin-freedom .dtable td[data-label]::before { color: var(--fr-green); }
.skin-freedom .dtable tbody th { color: var(--fr-paper); }
.skin-freedom .lead a:hover, .skin-freedom .body a:hover, .skin-freedom .closing a:hover { color: var(--fr-green); }
.skin-freedom .caption { color: var(--fr-grey); }
.skin-freedom .card { background: var(--fr-ink-3); }
.skin-freedom .card .body { color: var(--fr-paper); }
.skin-freedom .cards .tag-big, .skin-freedom .cycle .tag-big { background: var(--fr-ink-2); color: var(--fr-green); }
.skin-freedom .cycle::before { border-top-color: var(--fr-line); }
.hero-fr { position: relative; min-height: 88vh; min-height: 88svh; display: flex; align-items: flex-end; background: var(--fr-ink); color: var(--fr-paper); overflow: hidden; }
.hero-fr::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--fr-line); }
.hero-fr .hero-in { padding-bottom: var(--space-6); }
.hero-fr .hero-eyebrow { color: var(--fr-green); }
.hero-fr .hero-num { color: var(--fr-grey-2); font-weight: 400; }
.hero-fr .hero-title { font-weight: 500; letter-spacing: -0.03em; font-size: clamp(48px, 8.5vw, 124px); line-height: 0.96; }
.hero-fr .hero-sub, .hero-fr .hero-more { color: var(--fr-grey); }
.hero-fr .hero-firm { color: var(--fr-paper); }
.hero-fr .hero-mark { position: absolute; right: var(--space-3); top: var(--space-5); width: 10px; height: 10px; background: var(--fr-green); border-radius: 50%; }
.next-fr { background: var(--fr-ink-2); color: var(--fr-paper); border-top: 1px solid var(--fr-line); }
.next-fr .next-link .n { color: var(--fr-green); font-weight: 500; }
.next-fr .next-link .t { font-weight: 500; letter-spacing: -0.03em; }
.next-fr .next-link .s { color: var(--fr-grey); }

/* images, videos, galleries */
.imgblock { padding: var(--space-3) 0; }
.imgblock + .imgblock { padding-top: 0; }
.imgblock .block-in > .eyebrow { margin-bottom: var(--space-2); }
.slide-img { margin: 0; }
.slide-img img { width: 100%; height: auto; border-radius: var(--radius-control); background: var(--surface); }
.gallery { display: grid; gap: var(--space-1); }
.gallery figure { margin: 0; overflow: hidden; border-radius: var(--radius-control); background: var(--surface-grey); }
.gallery img, .gallery video { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 768px) { .gallery.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gallery.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .gallery.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .gallery .span-2 { grid-column: span 2; } }
.gallery-cases { display: grid; gap: var(--space-2); }
@media (min-width: 768px) { .gallery-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gallery-cases .wide { grid-column: span 2; } }
.media-block .block-head { margin-bottom: var(--space-3); }

/* the Work reveal */
.chapter { position: relative; overflow: hidden; background: var(--night); color: var(--surface); }
.chapter-media { padding: 0; }
.chapter-media .chapter-in { position: relative; }
.chapter-media video, .chapter-media img.chapter-img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.chapter-label { position: absolute; left: var(--space-2); top: var(--space-2); z-index: 2; margin: 0; color: var(--surface); mix-blend-mode: difference; }
@media (min-width: 768px) { .chapter-label { left: var(--space-4); top: var(--space-3); } }
.chapter-idea { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; }
.chapter-idea .chapter-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.chapter-idea .block-in { position: relative; z-index: 1; padding-top: var(--space-6); padding-bottom: var(--space-6); }
.chapter-idea .eyebrow { color: var(--thara-sand); }
.chapter-idea .lead { color: var(--surface); font-size: clamp(22px, 2.6vw, 34px); max-width: 24ch; }
.chapter-split { padding: var(--space-6) 0; background: var(--surface-grey); color: var(--ink); }
.chapter-split .split { display: grid; gap: var(--space-4); align-items: center; }
@media (min-width: 1024px) { .chapter-split .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.chapter-split video, .chapter-split img { width: 100%; height: auto; border-radius: var(--radius-control); }
.chapter-split video { aspect-ratio: 16 / 9; object-fit: cover; background: var(--surface-grey); }
.motion .chapter-media .chapter-in { opacity: 0; transform: scale(0.985); transition: opacity 1000ms cubic-bezier(.2,.6,.2,1), transform 1400ms cubic-bezier(.2,.6,.2,1); }
.motion .chapter-media .chapter-in.is-in { opacity: 1; transform: none; }

/* live components */
.live { margin-top: var(--space-4); }
.live x-import { display: block; }
.frame { background: var(--surface); border-radius: var(--radius-control); overflow: hidden; }
.frame x-import > * { max-width: 100%; }
.grid-heroes { display: grid; gap: var(--space-2); }
@media (min-width: 768px) { .grid-heroes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .grid-heroes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.frame-wide { margin-top: var(--space-2); }
.live-poster, .live-gala { max-width: 720px; }
.partner-logo { margin-top: var(--space-4); max-width: 320px; }
.partner-logo img { width: 100%; height: auto; }

/* reveal and motion */
.motion .reveal { opacity: 0; transform: translateY(18px); transition: opacity 800ms cubic-bezier(.2,.6,.2,1), transform 800ms cubic-bezier(.2,.6,.2,1); }
.motion .reveal.is-in { opacity: 1; transform: none; }

/* slide 14 cycle and slide 15 cards */
.cycle { position: relative; }
.cycle-step { text-align: center; }
.cycle-step .tag-big { width: 100%; text-align: center; padding: 11px 8px 10px; }
@media (min-width: 1024px) { .cycle::before { content: ""; position: absolute; left: 10%; right: 10%; top: 18px; border-top: 1px solid var(--thara-strata-8); z-index: 0; } .cycle .col { position: relative; z-index: 1; } }
.block-split { display: grid; gap: var(--space-4); }
@media (min-width: 1024px) { .block-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); align-items: start; } .block-split .block-head { margin-bottom: 0; } }
.cards { display: grid; gap: var(--space-2); }
@media (min-width: 560px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.card { background: var(--surface); padding: var(--space-3); border-radius: var(--radius-control); min-height: 150px; }
.card .tag-big { width: 100%; text-align: center; margin-bottom: var(--space-2); }
.card .body { max-width: none; }

/* accordion */
.acc { border-top: 1px solid var(--thara-strata-10); }
.acc-item { border-bottom: 1px solid var(--thara-strata-10); }
.acc-h { margin: 0; font-size: inherit; }
.acc-btn { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-2); align-items: center; width: 100%; min-height: 56px; padding: var(--space-2) 0; text-align: left; }
.acc-title { font-family: var(--font-display); font-size: clamp(18px, 1.8vw, 22px); line-height: 1.25; color: inherit; }
.acc-meta { grid-column: 1; font-family: var(--font-text); font-size: 15px; color: var(--ink); }
.ground-slate .acc-meta { color: var(--thara-sand); }
.acc-meta .label { margin: 0 0.6em 0 0; }
.acc-icon { grid-column: 2; grid-row: 1 / span 2; width: 44px; height: 44px; position: relative; }
.acc-icon::before, .acc-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); transition: transform 300ms; }
.acc-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.acc-btn[aria-expanded="true"] .acc-icon::after { transform: translate(-50%, -50%) rotate(0); }
.acc-panel { padding: 0 0 var(--space-3); }
.acc-panel > * + * { margin-top: var(--space-1); }
.acc-panel > .body + .label { margin-top: var(--space-2); }
.acc-panel .body { max-width: 72ch; }
.motion .acc-panel { animation: acc-in 400ms cubic-bezier(.2,.6,.2,1); }
@keyframes acc-in { from { opacity: 0; } to { opacity: 1; } }
@media (min-width: 768px) { .acc-btn { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; } .acc-meta { grid-column: 2; grid-row: 1; } .acc-icon { grid-column: 3; grid-row: 1; } }

/* tabs */
.tablist { display: grid; gap: var(--space-1); }
@media (min-width: 768px) { .tablist { grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--thara-deep); } }
.tablist [role="tab"] { min-height: 48px; padding: 12px var(--space-2); text-align: left; font-family: var(--font-display); font-size: 17px; line-height: 1.2; border: 1px solid var(--thara-deep); border-radius: var(--radius-button); color: var(--ink-deep); }
.tablist [role="tab"][aria-selected="true"] { background: var(--thara-deep); color: var(--surface); }
@media (min-width: 768px) { .tablist [role="tab"] { border: 0; border-radius: 0; border-bottom: 3px solid transparent; margin-bottom: -1px; } .tablist [role="tab"][aria-selected="true"] { background: transparent; color: var(--ink-deep); border-bottom-color: var(--thara-deep); } }
[role="tabpanel"] { padding: var(--space-3) 0; max-width: 760px; }
[role="tabpanel"] > * + * { margin-top: var(--space-2); }
[role="tabpanel"] .label { margin-bottom: 0; }
.ground-khaki [role="tabpanel"] .body { color: var(--ink-deep); }

/* stepper */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.step { display: flex; align-items: center; gap: var(--space-2); width: 100%; min-height: 52px; padding: 6px 0; text-align: left; border-top: 1px solid var(--thara-strata-10); }
.step .tag { margin: 0; }
.step-name { font-family: var(--font-display); font-size: 18px; color: var(--ink-deep); }
.step[aria-expanded="true"] .step-name { font-weight: 500; }
.step-panel { padding: var(--space-1) 0 var(--space-3); }
.step-panel > * + * { margin-top: var(--space-1); }
.step-acc { color: var(--thara-teal); }
@media (min-width: 1024px) {
  .stepper { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--space-4); }
  .steps { grid-column: 1; }
  .steps li { display: contents; }
  .steps .step-panel { grid-column: 2; grid-row: 1 / span 7; align-self: start; padding: 0; }
  .step { border-top: 0; border-left: 2px solid var(--thara-strata-10); padding-left: var(--space-2); }
  .step[aria-expanded="true"] { border-left-color: var(--thara-deep); }
}

/* timeline */
.timeline { position: relative; }
.tl-scale, .tl-marks { display: none; }
.tl-lanes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.tl-bar { display: grid; gap: 4px; width: 100%; min-height: 56px; padding: var(--space-2); text-align: left; background: var(--surface); border-radius: var(--radius-control); border-left: 4px solid var(--thara-strata-8); }
.ground-surface .tl-bar { background: var(--surface-grey); }
.tl-bar .tag { margin: 0; width: max-content; }
.tl-name { font-family: var(--font-display); font-size: 15px; letter-spacing: 0.06em; color: var(--ink-deep); }
.tl-weeks { font-family: var(--font-text); font-size: 14px; color: var(--ink); }
.tl-bar[aria-expanded="true"] { border-left-color: var(--thara-deep); }
.tl-panel { padding: var(--space-2) var(--space-2) var(--space-1); }
@media (min-width: 900px) {
  .timeline { padding-top: 44px; }
  .tl-scale { display: block; position: absolute; left: 0; right: 0; top: 0; height: 24px; font-family: var(--font-display); font-size: 12px; letter-spacing: 0.08em; color: var(--thara-strata-7); }
  .tl-scale span { position: absolute; transform: translateX(-50%); }
  .tl-scale span:first-child { transform: none; }
  .tl-scale span:last-child { transform: translateX(-100%); }
  .tl-marks { display: block; position: absolute; left: 0; right: 0; top: 24px; height: calc(24px + 5 * 80px); pointer-events: none; }
  .tl-mark { position: absolute; top: 0; bottom: 0; min-width: 2px; border-left: 1px dashed var(--thara-deep); }
  .tl-mark b { position: absolute; top: -2px; left: 6px; font-family: var(--font-display); font-weight: 500; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--thara-deep); white-space: nowrap; }
  .tl-mark i { position: absolute; inset: 0; background: var(--thara-strata-10); opacity: 0.5; }
  .tl-lanes { display: block; position: relative; padding: 24px 0 0; }
  .tl-lane { position: relative; height: 80px; }
  .tl-bar { position: absolute; top: 8px; left: var(--l); width: var(--w); min-width: 250px; max-width: calc(100% - var(--l)); min-height: 56px; height: auto; padding: 6px 12px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
  .tl-bar .tag { margin: 0; }
  .tl-bar .tl-name, .tl-bar .tl-weeks { font-size: 13px; }
  .tl-bar.tl-open { min-width: 300px; }
  .tl-panel { position: absolute; left: 0; right: 0; top: calc((5 - var(--i)) * 80px + 8px); max-width: 680px; padding: 0; }
  .tl-lanes:has(.tl-bar[aria-expanded="true"]) { padding-bottom: 140px; }
}

/* campaign map: four states crossfade as the viewer scrolls */
.map { padding: 0; }
.map-sticky { position: relative; }
.motion .map[data-map] { min-height: 320vh; }
.motion .map[data-map] .map-sticky { position: sticky; top: 64px; min-height: calc(100vh - 64px); min-height: calc(100svh - 64px); display: flex; align-items: center; }
.map-dawn { opacity: 0.5; }
.map-in { position: relative; z-index: 1; width: 100%; }
.map-states { display: grid; }
.map-state { grid-area: 1 / 1; opacity: 0; pointer-events: none; }
.map-state.is-on { opacity: 1; pointer-events: auto; }
.motion .map-state { transition: opacity 700ms cubic-bezier(.2,.6,.2,1); }
.map-h2 { max-width: 20ch; margin-bottom: var(--space-4); }
.map-cols { display: grid; gap: var(--space-3); }
@media (min-width: 768px) { .map-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.map-col { padding-top: var(--space-2); border-top: 2px solid var(--thara-strata-9); }
.map-signal { border-top-color: var(--phase-signal); } .map-gathering { border-top-color: var(--phase-gathering); } .map-yield { border-top-color: var(--phase-yield); }
.map-signal .tag { background: var(--phase-signal); color: var(--phase-text); } .map-gathering .tag { background: var(--phase-gathering); color: var(--phase-text); } .map-yield .tag { background: var(--phase-yield); color: var(--surface); }
.map-col .title-lg { margin: var(--space-1) 0 var(--space-1); }
.map-col .body { max-width: none; font-size: 16px; }
.map-progress { display: flex; gap: 6px; margin-bottom: var(--space-3); }
.map-progress i { display: block; width: 28px; height: 3px; background: var(--thara-strata-10); border-radius: 2px; }
.map-progress i.is-on { background: var(--thara-teal); }
html:not(.motion) .map-progress { display: none; }
.map-const { position: absolute; left: var(--space-2); right: var(--space-2); bottom: var(--space-3); height: 80px; z-index: 0; pointer-events: none; }
.map-const polyline { fill: none; stroke: var(--thara-strata-7); stroke-width: 1.5; stroke-dasharray: 2 6; stroke-dashoffset: 100; stroke-linecap: round; vector-effect: non-scaling-stroke; }
html:not(.motion) .map-const polyline { stroke-dashoffset: 0; }
.motion .map-const polyline { transition: stroke-dashoffset 600ms cubic-bezier(.2,.6,.2,1); }
.map-stars { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.map-stars .star { position: absolute; width: 14px; height: 14px; background: var(--campaign-star); -webkit-mask: url("logos/thara-star.svg") center / contain no-repeat; mask: url("logos/thara-star.svg") center / contain no-repeat; opacity: 0; transition: opacity 600ms; }
.map-stars .s1 { left: 5%; bottom: 36px; } .map-stars .s2 { left: 50%; bottom: 72px; } .map-stars .s3 { right: 5%; bottom: 36px; }
.map-stars .star.is-on, html:not(.motion) .map-stars .star { opacity: 1; }
.map .block-in { padding-top: var(--space-5); padding-bottom: 120px; }
@media (max-width: 767px) { .motion .map[data-map] .map-sticky { align-items: flex-start; } .map-const, .map-stars { display: none; } .map .block-in { padding-bottom: var(--space-5); } }

/* manifesto beside its image */
.manifesto .split { display: grid; gap: var(--space-4); align-items: center; }
@media (min-width: 1024px) { .manifesto .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } }
.manifesto .eyebrow { color: var(--thara-sand); }
.manifesto-text { font-family: var(--font-display); font-weight: 300; font-size: clamp(18px, 1.7vw, 22px); line-height: 1.4; max-width: 44ch; }
.manifesto-text p + p { margin-top: 0.9em; }
.manifesto-text p:last-child { font-weight: 500; }
.manifesto-img { margin: 0; overflow: hidden; border-radius: var(--radius-control); }
.manifesto-img img { width: 100%; height: 100%; object-fit: cover; }

/* gala: the event lockup is the title */
.gala-head { padding: var(--space-3) 0 var(--space-4); }
.gala-head x-import { display: block; }

/* films */
.films { display: grid; gap: var(--space-3); }
@media (min-width: 768px) { .films { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.film figure { margin: 0 0 var(--space-2); overflow: hidden; border-radius: var(--radius-control); }
.film .label { margin-top: var(--space-1); }
.film .body { max-width: none; font-size: 15px; }

/* schedule */
.filter { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-bottom: var(--space-3); }
.filter .th-btn { font-size: 12px; }
.filter .th-btn.is-on { background: var(--ink-deep); color: var(--surface); border-color: var(--ink-deep); }
.schedule tbody th { font-size: 17px; }
.schedule .group-row th { padding-top: var(--space-5); }
.schedule .group-row .eyebrow { display: block; }
.schedule .group-row .group-h { display: block; font-family: var(--font-display); font-size: clamp(24px, 2.4vw, 32px); margin-top: var(--space-1); }
.schedule .group-row .group-l { display: block; font-family: var(--font-display); font-weight: 300; font-size: 18px; margin-top: 4px; }
.schedule .note-row td { font-family: var(--font-display); font-weight: 300; font-size: 18px; color: var(--ink); }
.schedule tr[hidden] { display: none; }

@media print { .rail, .menu-btn, .next-strata, .next-fr { display: none; } .block { page-break-inside: avoid; } }

/* compact hero: a small title so the first chapter is the reveal */
.hero.hero-compact { min-height: 0; }
.hero-compact .hero-in { padding-top: var(--space-5); padding-bottom: var(--space-5); display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); }
.hero-compact .hero-num { font-size: 18px; color: var(--thara-sand); }
.hero-compact .hero-title { font-size: clamp(28px, 3.4vw, 44px); font-weight: 400; margin: 0; max-width: none; line-height: 1.1; }
.hero-compact .hero-sub { margin: 0; flex-basis: 100%; font-size: 15px; color: var(--thara-sand); }
.hero-compact .hero-stars { display: none; }
.hero-compact .hero-extra:empty { display: none; }
.hero-compact .strata-bg .th-strata { height: 1600% !important; }
@media (min-width: 768px) { .hero-compact .hero-in { padding-top: var(--space-5); padding-bottom: var(--space-5); } }

/* gala block: room above and below the lockup */
.block.imgblock.gala { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.gala .gala-head { padding: var(--space-2) 0 var(--space-5); }
@media (min-width: 768px) { .block.imgblock.gala { padding-top: 120px; padding-bottom: 120px; } }
/* a video whose file is not here yet leaves no empty tile */
.gallery figure:has(video.no-source) { display: none; }

/* a text block with the deck's photograph beside it (platform slides 8, 9, 12) */
.block.with-photo .block-in { display: grid; gap: var(--space-4); align-items: center; }
.block.with-photo .block-photo { margin: 0; overflow: hidden; border-radius: var(--radius-control); max-height: 60vh; }
.block.with-photo .block-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.block.with-photo .block-text > .block-head { margin-bottom: var(--space-4); }
@media (min-width: 1024px) {
  .block.with-photo .block-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-5); }
  .block.with-photo .block-photo { max-height: 720px; aspect-ratio: auto; align-self: stretch; }
  .block.with-photo.photo-right .block-photo { order: 2; }
  .block.with-photo .block-head { max-width: none; }
}

/* the Arabic calligraphy on the Pleiades chapter sits lower right, as in the deck */
.chapter-idea .block-in { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-5); }
.chapter-idea .callig { margin: var(--space-4) 0 0; flex: 0 1 min(432px, 44vw); }
.chapter-idea .callig img { width: 100%; height: auto; display: block; }
@media (min-width: 1024px) { .chapter-idea .callig { margin-top: var(--space-6); } }
.block.with-photo .stat { font-size: clamp(30px, 3.2vw, 50px); line-height: 1.05; }
.block.with-photo .col > .stat + .body { margin-top: var(--space-3); }

/* the rail lists the sections of the page; stars share the height when there are many */
.rail { --sh: min(44px, calc((100vw - 32px) / var(--n, 9))); }
.rail-star { width: var(--sh); }
@media (min-width: 1024px) {
  .rail { --sh: min(44px, calc((100vh - 160px) / var(--n, 9))); gap: 0; }
  .rail-star { width: 44px; height: var(--sh); }
  .rail-trail { height: calc((var(--n, 9) - 1) * var(--sh)); }
}

/* the brand reveal on The Platform: the Thara identity begins at the statement and is fully on after it */
:root { --font-display-thara: var(--font-display); --font-text-thara: var(--font-text); }
.skin-freedom .brand-in, .skin-freedom .brand-on { --font-display: var(--font-display-thara); --font-text: var(--font-text-thara); }
.skin-freedom .brand-in .h2 { font-weight: 300; letter-spacing: -0.012em; }
.skin-freedom .brand-in .eyebrow { color: var(--thara-sand); }
.skin-freedom .brand-in .lead { font-weight: 300; }
.skin-freedom .brand-on .h2, .skin-freedom .brand-on .title, .skin-freedom .brand-on .quote, .skin-freedom .brand-on .closing, .skin-freedom .brand-on .stat { color: var(--ink-deep); }
.skin-freedom .brand-on .h2 { font-weight: 400; letter-spacing: -0.012em; }
.skin-freedom .brand-on .body, .skin-freedom .brand-on .lead, .skin-freedom .brand-on .caption { color: inherit; }
.skin-freedom .brand-on .eyebrow, .skin-freedom .brand-on .label { color: var(--thara-teal); }
.skin-freedom .brand-on .label .num { color: var(--thara-strata-8); }
.skin-freedom .brand-on .tag, .skin-freedom .brand-on .cards .tag-big, .skin-freedom .brand-on .cycle .tag-big { background: var(--thara-teal); color: var(--surface); font-weight: 400; }
.skin-freedom .brand-on .row, .skin-freedom .brand-on .aside, .skin-freedom .brand-on .acc, .skin-freedom .brand-on .acc-item, .skin-freedom .brand-on .dtable th, .skin-freedom .brand-on .dtable td { border-color: var(--thara-strata-10); }
.skin-freedom .brand-on .dtable thead th, .skin-freedom .brand-on .dtable td[data-label]::before { color: var(--thara-teal); }
.skin-freedom .brand-on .dtable tbody th { color: var(--ink-deep); }
.skin-freedom .brand-on .lead a:hover, .skin-freedom .brand-on .body a:hover, .skin-freedom .brand-on .closing a:hover { color: var(--thara-teal); }
.skin-freedom .brand-on .card { background: var(--surface); }
.skin-freedom .brand-on .card .body { color: var(--ink); }
.skin-freedom .brand-on .cycle::before { border-top-color: var(--thara-strata-10); }
.skin-freedom .brand-on.ground-surface .card { background: var(--surface-grey); }

@media (max-width: 1023px) { .rail { flex-wrap: wrap; row-gap: 0; } .rail-star { min-width: 28px; } }

/* the campaign map, third pass: the visual stays while each state's copy is read in full as its own scroll step */
.map[data-map] .map-visual { position: sticky; top: 64px; height: calc(100vh - 64px); height: calc(100svh - 64px); z-index: 0; pointer-events: none; }
.map[data-map] .map-visual .map-progress { position: absolute; left: 50%; top: var(--space-5); transform: translateX(-50%); width: 100%; max-width: 1280px; padding: 0 var(--space-2); box-sizing: border-box; display: flex; margin: 0; }
@media (min-width: 768px) { .map[data-map] .map-visual .map-progress { padding: 0 var(--space-4); } }
@media (min-width: 1440px) { .map[data-map] .map-visual .map-progress { padding: 0 var(--space-6); max-width: 1392px; } }
.map[data-map] .map-progress i { display: block; width: 28px; height: 3px; background: var(--thara-strata-10); border-radius: 2px; margin-right: 6px; }
.map[data-map] .map-progress i.is-on { background: var(--thara-teal); }
html:not(.motion) .map[data-map] .map-progress { display: flex; }
.map[data-map] .map-steps { position: relative; z-index: 1; margin-top: calc(-100vh + 64px); margin-top: calc(-100svh + 64px); }
.map[data-map] .map-step { min-height: calc(100vh - 64px); min-height: calc(100svh - 64px); display: flex; align-items: center; padding: var(--space-6) 0; }
.map[data-map] .map-step .block-in { padding-top: 0; padding-bottom: 0; }
.motion .map[data-map] .map-step .map-in { opacity: 0.55; transition: opacity 500ms cubic-bezier(.2,.6,.2,1); }
.motion .map[data-map] .map-step.is-on .map-in { opacity: 1; }
@media (max-width: 767px) { .map[data-map] .map-visual { display: none; } .map[data-map] .map-steps { margin-top: 0; } .map[data-map] .map-step { min-height: 0; padding: var(--space-5) 0; } .motion .map[data-map] .map-step .map-in { opacity: 1; } }

/* the rail names the section you are in */
.rail-label { display: none; }
@media (min-width: 1024px) {
  .rail-star { overflow: visible; }
  .rail-label { display: block; position: absolute; right: calc(100% - 2px); top: 50%; transform: translateY(-50%); font-family: var(--font-display); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; max-width: 340px; overflow: hidden; text-overflow: ellipsis; color: var(--ink); opacity: 0; pointer-events: none; }
  .motion .rail-label { transition: opacity 300ms; }
  .rail-star.is-current .rail-label, .rail-star:hover .rail-label, .rail-star:focus-visible .rail-label { opacity: 1; }
  .rail.on-dark .rail-label { color: var(--surface); }
  .skin-freedom .rail-label { color: var(--fr-paper); }
}
/* the headline stays in the sticky layer; the phases change beneath it; the progress bars sit by the constellation */
.map[data-map] .map-visual .map-in { position: absolute; left: 0; right: 0; top: var(--space-5); padding-top: 0; padding-bottom: 0; }
.map[data-map] .map-visual .map-h2 { margin-bottom: 0; }
.map[data-map] .map-visual .map-progress { top: auto; bottom: calc(var(--space-3) + 110px); }
.map[data-map] .map-step { padding-top: 340px; align-items: flex-start; }
@media (min-width: 1440px) { .map[data-map] .map-step { padding-top: 380px; } }
@media (max-width: 767px) {
  .map[data-map] .map-visual { display: block; position: static; height: auto; padding: var(--space-5) 0 0; pointer-events: auto; }
  .map[data-map] .map-visual .map-in { position: static; }
  .map[data-map] .map-visual .map-progress, .map[data-map] .map-visual .map-const, .map[data-map] .map-visual .map-stars, .map[data-map] .map-visual .map-dawn { display: none; }
  .map[data-map] .map-step { padding: var(--space-4) 0; }
}
/* the dawn sky is its own sticky layer below; the headline layer sits above the steps on a paper band, so the phases pass behind it */
.map[data-map] .map-sky { position: sticky; top: 64px; height: calc(100vh - 64px); height: calc(100svh - 64px); z-index: 0; pointer-events: none; overflow: hidden; }
.map[data-map] .map-visual { z-index: 2; margin-top: calc(-100vh + 64px); margin-top: calc(-100svh + 64px); }
.map[data-map] .map-visual .map-in { top: 0; padding-top: var(--space-5); padding-bottom: 56px; background: linear-gradient(to bottom, var(--surface-grey) 0%, var(--surface-grey) 72%, transparent 100%); }
@media (max-width: 767px) {
  .map[data-map] .map-sky { display: none; }
  .map[data-map] .map-visual { margin-top: 0; }
  .map[data-map] .map-visual .map-in { background: none; padding-bottom: 0; }
}
/* steps are as tall as the reading zone under the headline band, so the copy flows through it without gaps; the progress bars live in the band */
.map[data-map] .map-visual .map-in { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); }
.map[data-map] .map-visual .map-in .map-progress { position: static; transform: none; width: auto; max-width: none; padding: 0; margin: 0 0 12px; flex: none; }
.map[data-map] .map-steps { margin-top: calc(-100vh + 64px + 380px); margin-top: calc(-100svh + 64px + 380px); padding-bottom: 160px; }
.map[data-map] .map-step { min-height: calc(100vh - 64px - 380px); min-height: calc(100svh - 64px - 380px); padding: 0 0 var(--space-5); }
.motion .map[data-map] .map-step .map-in { opacity: 0.6; }
@media (max-width: 767px) {
  .map[data-map] .map-visual .map-in { display: block; }
  .map[data-map] .map-steps { margin-top: 0; padding-bottom: 0; }
  .map[data-map] .map-step { min-height: 0; padding: var(--space-4) 0; }
}
/* the Arabic calligraphy sits at the right edge on phones, as it does beside the text on larger screens */
@media (max-width: 1023px) { .chapter-idea .callig { margin-left: auto; } }
@media (min-width: 1024px) {
  .rail-label { padding: 4px 8px; border-radius: 4px; max-width: 300px; background: color-mix(in srgb, var(--surface) 88%, transparent); }
  .rail.on-dark .rail-label { background: color-mix(in srgb, var(--night) 82%, transparent); }
}
@media (max-width: 767px) { .motion .map[data-map] .map-step .map-in { opacity: 1; } }

/* TharAia (slide 29): the slide's split, the phone filling the right side, the glowing star behind the text */
.tharaia { padding: 0; background: var(--surface); color: var(--ink); }
.tharaia-in { display: grid; }
.tharaia-text { position: relative; overflow: hidden; padding: var(--space-6) var(--space-2); }
.tharaia-star { position: absolute; left: -22%; bottom: -18%; width: 78%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; z-index: 0; pointer-events: none; }
.tharaia-copy { position: relative; z-index: 1; max-width: 620px; }
.tharaia-copy .h2 { margin-top: var(--space-3); }
.tharaia-copy .lead { margin-top: var(--space-3); }
.tharaia-phone { background: var(--surface-grey); display: flex; align-items: center; justify-content: center; padding: var(--space-4) var(--space-2); }
.tharaia-chat { display: block; height: min(70vh, 760px); width: auto; aspect-ratio: 11 / 19; object-fit: cover; object-position: center; background: var(--surface-grey); }
@media (min-width: 768px) { .tharaia-text { padding: var(--space-6) var(--space-4); } }
@media (min-width: 1024px) {
  .tharaia-in { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); min-height: 100vh; min-height: 100svh; }
  .tharaia-text { padding: 120px var(--space-5) 120px var(--space-5); display: flex; align-items: flex-start; }
  .tharaia-phone { padding: 6vh var(--space-4); }
  .tharaia-chat { height: calc(100vh - 12vh); height: calc(100svh - 12vh); min-height: 560px; }
}
@media (min-width: 1440px) { .tharaia-text { padding-left: calc((100vw - 1392px) / 2 + var(--space-6)); } }

/* an event: its title, then its slides stacked beneath it */
.event-head { margin-bottom: var(--space-4); }
.event-head x-import { display: block; }
.event-slide + .event-slide { margin-top: var(--space-1); }
.event-title { max-width: none; }
.tharaia-star { left: -14%; bottom: -10%; width: 92%; }
@media (min-width: 1024px) { .tharaia-star { left: -10%; bottom: -14%; width: 80%; } }
@media (min-width: 1024px) { .tharaia-star { left: -20%; bottom: -4%; width: 110%; } }

/* the rail label appears on hover or keyboard focus only, in the page's own branding */
@media (min-width: 1024px) {
  .rail-star.is-current .rail-label { opacity: 0; }
  .rail-star:hover .rail-label, .rail-star:focus-visible .rail-label { opacity: 1; }
  .rail-label { background: var(--surface); color: var(--ink-deep); box-shadow: inset 0 0 0 1px var(--thara-strata-10); }
  .rail.on-dark .rail-label { background: var(--night); color: var(--surface); box-shadow: inset 0 0 0 1px var(--thara-strata-7); }
  .skin-freedom .rail-label, .skin-freedom .rail.on-dark .rail-label { font-family: var(--font-freedom); font-weight: 500; letter-spacing: 0.1em; background: var(--fr-ink-2); color: var(--fr-paper); box-shadow: inset 0 0 0 1px var(--fr-line); }
}
/* on phones the calligraphy is centred (Hisham, 30 Oct) */
@media (max-width: 1023px) { .chapter-idea .callig { margin-left: auto; margin-right: auto; } }

/* the map, fourth pass: one phase per step, each in full */
.map[data-map] .map-phase { max-width: 720px; padding-top: var(--space-2); border-top: 2px solid var(--thara-strata-9); }
.map[data-map] .map-phase .title-lg { margin: var(--space-2) 0 var(--space-2); }
.map[data-map] .map-phase .body { max-width: none; font-size: 17px; }
.map[data-map] .map-phase .body .w-roman { font-family: var(--font-display); font-weight: 400; font-size: clamp(20px, 1.9vw, 26px); line-height: 1.3; }
.map[data-map] .map-step[data-state="1"] .map-phase { margin-left: auto; margin-right: auto; }
.map[data-map] .map-step[data-state="2"] .map-phase { margin-left: auto; }
@media (max-width: 767px) { .map[data-map] .map-step .map-phase { margin: 0; } }