/* ============================================================
   Liwan seminar RSVP — design tokens lifted from liwan.sa production CSS
   ============================================================ */

/* Brand Arabic face, self-hosted (Google Fonts is unreachable from mainland China) */
@font-face{font-family:JaliArabic;src:url(/assets/fonts/jali-400.woff2)format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:JaliArabic;src:url(/assets/fonts/jali-500.woff2)format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:JaliArabic;src:url(/assets/fonts/jali-700.woff2)format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:NotoSC;src:url(/assets/fonts/noto-sc-400.woff2)format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:NotoSC;src:url(/assets/fonts/noto-sc-500.woff2)format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:NotoSC;src:url(/assets/fonts/noto-sc-700.woff2)format("woff2");font-weight:700;font-display:swap}

:root{
  --bg:#0a0a0a;
  --surface:#141416;
  --surface-2:#1c1d1f;
  --surface-3:#2c2d30;
  --sand:#c2b59b;
  --gold:#ac852e;
  --bronze:#ac9366;
  --cream:#ece8df;
  --text:#ededed;
  --muted:#9b927c;
  --line:rgba(194,181,155,.18);
  --line-soft:rgba(255,255,255,.07);
  --shadow:0 24px 60px rgba(0,0,0,.55);
  --r:16px;
  --maxw:1140px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:JaliArabic,NotoSC,-apple-system,"Segoe UI",Arial,sans-serif;
  font-weight:400;line-height:1.75;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
html[lang^="zh"] body{font-family:NotoSC,JaliArabic,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}

/* Arabic never gets letter-spacing (it disconnects the cursive join). Latin/CJK may. */
:lang(ar),[dir=rtl]{letter-spacing:normal !important}

.num{direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}

.wrap{width:min(100% - 2.5rem,var(--maxw));margin-inline:auto}
@media(max-width:600px){.wrap{width:min(100% - 1.75rem,var(--maxw))}}

/* ---------- shared section furniture ---------- */
section{position:relative;padding:clamp(3.5rem,8vw,7rem) 0}
.kicker{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:.8rem;font-weight:500;color:var(--sand);margin:0 0 1rem;line-height:1.6;
}
.kicker::before{content:"";width:26px;height:1px;background:var(--gold);flex:none}
h2{
  font-size:clamp(1.5rem,3.6vw,2.35rem);font-weight:700;line-height:1.45;
  margin:0 0 1.1rem;color:#fff;
}
.lede{color:#c9c6c0;font-size:clamp(1rem,1.7vw,1.1rem);line-height:1.85;max-width:60ch;margin:0}

/* reveal-on-scroll */
.rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ============================ header ============================ */
.top{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.1rem clamp(1.25rem,4vw,2.5rem);
  transition:background .4s var(--ease),backdrop-filter .4s var(--ease),border-color .4s;
  border-block-end:1px solid transparent;
}
.top.stuck{background:rgba(10,10,10,.82);backdrop-filter:blur(14px);border-block-end-color:var(--line-soft)}
.top .brand{height:34px;width:auto}
.langsw{
  display:inline-flex;align-items:center;gap:.45rem;
  border:1px solid var(--line);border-radius:999px;
  padding:.4rem .95rem;font-size:.85rem;font-weight:500;color:var(--cream);
  background:rgba(20,20,22,.5);backdrop-filter:blur(8px);
  transition:border-color .3s,background .3s,color .3s;
}
.langsw:hover{border-color:var(--sand);background:rgba(194,181,155,.1);color:#fff}

/* the hero now lives in cinema.css as .stage (depth-masked chapter 00) */

h1{
  font-size:clamp(2.05rem,6.4vw,4.25rem);font-weight:700;
  line-height:1.42;              /* Arabic ascenders overlap below ~1.4 */
  margin:0 0 .7rem;color:#fff;max-width:18ch;
  text-shadow:0 2px 28px rgba(0,0,0,.55);
}
.stage .sub{
  font-size:clamp(1rem,2.2vw,1.35rem);color:var(--cream);line-height:1.8;
  margin:0 0 2.2rem;max-width:44ch;
}

.metarow{
  display:flex;flex-wrap:wrap;gap:0;margin:0 0 2.4rem;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:rgba(20,20,22,.55);backdrop-filter:blur(10px);max-width:760px;
}
.metarow .cell{
  flex:1 1 33.333%;min-width:150px;padding:1rem 1.25rem;
  border-inline-end:1px solid var(--line);
}
.metarow .cell:last-child{border-inline-end:0}
.metarow .k{display:block;font-size:.75rem;color:var(--muted);line-height:1.6;margin-bottom:.15rem}
.metarow .v{display:block;font-size:.98rem;font-weight:500;color:#fff;line-height:1.6}
@media(max-width:640px){
  .metarow .cell{flex:1 1 100%;border-inline-end:0;border-block-end:1px solid var(--line)}
  .metarow .cell:last-child{border-block-end:0}
}

.ctas{display:flex;flex-wrap:wrap;gap:.85rem}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.95rem 1.9rem;border-radius:999px;border:1px solid transparent;
  font-size:.98rem;font-weight:500;line-height:1.6;cursor:pointer;
  transition:transform .3s var(--ease),background .3s,border-color .3s,color .3s,box-shadow .3s;
}
.btn-primary{background:var(--cream);color:#14120e;box-shadow:0 10px 34px rgba(236,232,223,.14)}
.btn-primary:hover{transform:translateY(-2px);background:#fff;box-shadow:0 16px 44px rgba(236,232,223,.22)}
.btn-ghost{border-color:var(--line);color:var(--cream);background:rgba(10,10,10,.3)}
.btn-ghost:hover{border-color:var(--sand);background:rgba(194,181,155,.1);transform:translateY(-2px)}
.btn:disabled{opacity:.55;cursor:default;transform:none}


/* ============================ intro ============================ */
.intro{background:var(--bg)}
.intro .grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.intro .art{
  border-radius:var(--r);overflow:hidden;border:1px solid var(--line-soft);
  aspect-ratio:4/3;background:var(--surface-2);
}
.intro .art img{width:100%;height:100%;object-fit:cover}
@media(max-width:860px){.intro .grid{grid-template-columns:1fr}.intro .art{order:-1;aspect-ratio:16/10}}

/* ============================ themes ============================ */
.themes{background:linear-gradient(180deg,var(--bg),var(--surface) 45%,var(--bg))}

/* =========================== programme =========================== */
.prog .rows{margin-top:2.6rem;border-block-start:1px solid var(--line-soft)}
.prog .row{
  display:grid;grid-template-columns:120px 1fr;gap:1.5rem;align-items:baseline;
  padding:1.5rem 0;border-block-end:1px solid var(--line-soft);
  transition:background .35s;
}
.prog .row:hover{background:rgba(194,181,155,.035)}
.prog .t{font-size:1.15rem;font-weight:500;color:var(--sand);line-height:1.6}
.prog h3{margin:0 0 .3rem;font-size:1.08rem;font-weight:700;line-height:1.6;color:#fff}
.prog p{margin:0;font-size:.94rem;line-height:1.8;color:#a8a49d}
.prog .note{
  margin-top:1.5rem;font-size:.9rem;color:var(--muted);line-height:1.7;
  display:inline-flex;align-items:center;gap:.6rem;
}
@media(max-width:600px){
  .prog .row{grid-template-columns:1fr;gap:.35rem}
  .prog .t{font-size:1rem}
}

/* =========================== speaker =========================== */
.speaker{background:var(--surface)}
.speaker .box{
  display:grid;grid-template-columns:260px 1fr;gap:clamp(1.5rem,4vw,3rem);
  align-items:start;padding:clamp(1.6rem,4vw,2.6rem);
  border:1px solid var(--line-soft);border-radius:var(--r);
  background:linear-gradient(150deg,rgba(44,45,48,.6),rgba(10,10,10,.6));
}
.speaker .portrait{
  aspect-ratio:3/4;border-radius:12px;overflow:hidden;background:var(--surface-3);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
}
.speaker .portrait img{width:100%;height:100%;object-fit:cover}
.speaker .portrait.mark{
  background:
    url(/assets/img/pattern.svg) center/150% no-repeat,
    linear-gradient(150deg,rgba(194,181,155,.16),rgba(10,10,10,.9));
}
.speaker h3{margin:0 0 .2rem;font-size:1.25rem;font-weight:700;line-height:1.6;color:#fff}
.speaker .role{margin:0 0 1.1rem;color:var(--sand);font-size:.98rem;line-height:1.7}
.speaker p.bio{margin:0;color:#b6b2ab;font-size:1rem;line-height:1.9}
@media(max-width:760px){
  .speaker .box{grid-template-columns:1fr}
  .speaker .portrait{max-width:220px;aspect-ratio:1}
}

/* ============================= form ============================= */
.rsvp{background:linear-gradient(180deg,var(--bg),var(--surface-2))}
.rsvp .panel{
  max-width:840px;margin-inline:auto;padding:clamp(1.6rem,4vw,3rem);
  border:1px solid var(--line);border-radius:20px;
  background:linear-gradient(160deg,rgba(44,45,48,.55),rgba(10,10,10,.75));
  box-shadow:var(--shadow);position:relative;overflow:hidden;
}
.rsvp .panel::before{
  content:"";position:absolute;inset-block-start:0;inset-inline:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),var(--sand),transparent);
}
.rsvp .head{text-align:center;margin-bottom:2.2rem}
.rsvp .head .kicker{justify-content:center}
.rsvp .head p{margin:.5rem 0 0;color:#a8a49d;font-size:.96rem;line-height:1.8}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.field{display:flex;flex-direction:column;gap:.45rem}
.field.full{grid-column:1/-1}
.field label{font-size:.86rem;color:var(--sand);line-height:1.6}
.field .req{color:var(--gold)}
.field input,.field select{
  width:100%;padding:.9rem 1.05rem;border-radius:11px;
  background:rgba(10,10,10,.55);border:1px solid var(--line-soft);
  line-height:1.6;transition:border-color .3s,background .3s,box-shadow .3s;
  appearance:none;
}
.field input::placeholder{color:#6d6a65}
.field input:focus,.field select:focus{
  outline:none;border-color:var(--sand);background:rgba(10,10,10,.8);
  box-shadow:0 0 0 3px rgba(194,181,155,.12);
}
.field input:user-invalid{border-color:#b4564a}
.field select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'><path d='M3.75 5.25L7 8.75L10.25 5.25' stroke='%23c2b59b' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;background-position:left 1rem center;padding-inline-end:1.05rem;
}
[dir=ltr] .field select{background-position:right 1rem center}
.field select option{background:#1c1d1f;color:var(--text)}
/* honeypot — never shown, never focusable */
.hp{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}
.formfoot{margin-top:1.8rem;display:flex;flex-direction:column;align-items:center;gap:.9rem}
.formfoot .btn{min-width:230px}
.formerr{
  color:#e4a79c;font-size:.9rem;line-height:1.7;text-align:center;margin:0;
  min-height:1.2rem;
}
@media(max-width:640px){.fields{grid-template-columns:1fr}}

/* success state */
.done{display:none;text-align:center;padding:1rem 0}
.done.on{display:block;animation:pop .6s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.done .tick{
  width:64px;height:64px;margin:0 auto 1.3rem;border-radius:50%;
  border:1px solid var(--gold);display:flex;align-items:center;justify-content:center;
  background:rgba(172,133,46,.1);
}
.done h3{margin:0 0 .5rem;font-size:1.45rem;font-weight:700;line-height:1.55;color:#fff}
.done p{margin:0 0 1.7rem;color:#a8a49d;line-height:1.85}
.done .row{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}
form.gone{display:none}

/* ============================ venue ============================ */
.venue .box{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3rem);align-items:center;
}
.venue .info{display:flex;flex-direction:column;gap:1.15rem}
.venue .addr{
  display:flex;align-items:flex-start;gap:.85rem;padding:1.15rem 1.3rem;
  border:1px solid var(--line-soft);border-radius:12px;background:var(--surface-2);
}
.venue .addr svg{flex:none;margin-top:.3rem;opacity:.85}
.venue .addr p{margin:0;line-height:1.85;color:#c9c6c0}
.venue .plus{font-size:.85rem;color:var(--muted);line-height:1.7;margin:.35rem 0 0}
.maplinks{display:flex;flex-wrap:wrap;gap:.7rem}
.maplink{
  display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1.15rem;border-radius:999px;
  border:1px solid var(--line-soft);font-size:.9rem;line-height:1.6;color:#c9c6c0;
  background:var(--surface-2);transition:border-color .3s,color .3s,transform .3s var(--ease);
}
.maplink:hover{border-color:var(--sand);color:#fff;transform:translateY(-2px)}
.copybtn{cursor:pointer;background:transparent;border:1px dashed var(--line);border-radius:999px;
  padding:.55rem 1.05rem;font-size:.85rem;color:var(--sand);line-height:1.6;
  transition:border-color .3s,color .3s;align-self:flex-start}
.copybtn:hover{border-color:var(--sand);color:#fff}
.venue .photo{border-radius:var(--r);overflow:hidden;border:1px solid var(--line-soft);aspect-ratio:4/3}
.venue .photo img{width:100%;height:100%;object-fit:cover}
@media(max-width:860px){.venue .box{grid-template-columns:1fr}}

/* =========================== booklet =========================== */

.book-inline{
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(1.5rem,4vw,2.5rem);
  padding:clamp(1.6rem,4vw,2.4rem);border:1px solid var(--line-soft);border-radius:var(--r);
  background:linear-gradient(150deg,rgba(194,181,155,.07),rgba(10,10,10,.5));
}
.book-inline .cover{
  flex:none;width:120px;aspect-ratio:1/1.414;border-radius:8px;overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow);background:var(--surface-3);
}
.book-inline .cover img{width:100%;height:100%;object-fit:cover}
.book-inline .txt{flex:1 1 260px}
.book-inline h3{margin:0 0 .5rem;font-size:1.2rem;font-weight:700;line-height:1.6;color:#fff}
.book-inline p{margin:0 0 1.2rem;color:#a8a49d;font-size:.96rem;line-height:1.85}
.book-inline .row{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}
.book-inline .size{font-size:.82rem;color:var(--muted);line-height:1.6}

/* ============================ footer ============================ */
footer{
  padding:3rem 0 2.5rem;border-block-start:1px solid var(--line-soft);
  background:var(--bg);position:relative;overflow:hidden;
}
footer .tex{
  position:absolute;inset:0;opacity:.35;pointer-events:none;
  background:url(/assets/img/pattern.svg) center/cover no-repeat;
}
footer .in{position:relative;display:flex;flex-wrap:wrap;gap:1.2rem;
  align-items:center;justify-content:space-between}
footer img.brand{height:32px;width:auto;opacity:.9}
footer .note{font-size:.88rem;color:var(--muted);line-height:1.7;margin:0}
footer .by{font-size:.82rem;color:#6d6a65;line-height:1.7;
  display:inline-flex;align-items:center;min-height:28px;padding:.2rem .1rem}
footer .by:hover{color:var(--sand)}

.mb-lg{margin-bottom:2rem}
.mb-md{margin-bottom:1.6rem}

.book-inline{margin-top:clamp(2.5rem,6vw,4rem)}


/* ============================================================
   «فصول» Fosool — chapter cinema layer
   Style family from premium-arabic-sites/references/style-library.md
   Techniques from references/parallax-cinema.md (owner-approved, codebydennis)
   Dials for this page: DESIGN_VARIANCE 8 · MOTION_INTENSITY 7 · VISUAL_DENSITY 3
   (Fosool baseline is V9/M8/D3; motion pulled back one notch because this is a
    conversion page and the form must stay findable.)
   ============================================================ */

:root{
  /* ambient accent, lerped between chapters by the engine */
  --amb:#c2b59b;
  --amb-soft:rgba(194,181,155,.14);
}

/* ---------- viewfinder chrome: corner brackets, camera-lens feel ---------- */
.vf{position:fixed;inset:0;z-index:50;pointer-events:none;mix-blend-mode:screen}
.vf i{position:absolute;width:22px;height:22px;border:1px solid var(--amb);opacity:.5;
  transition:opacity .6s var(--ease),border-color .9s linear}
.vf i:nth-child(1){inset-block-start:18px;inset-inline-start:18px;border-inline-end:0;border-block-end:0}
.vf i:nth-child(2){inset-block-start:18px;inset-inline-end:18px;border-inline-start:0;border-block-end:0}
.vf i:nth-child(3){inset-block-end:18px;inset-inline-start:18px;border-inline-end:0;border-block-start:0}
.vf i:nth-child(4){inset-block-end:18px;inset-inline-end:18px;border-inline-start:0;border-block-start:0}
.vf b{position:absolute;inset-block-start:16px;inset-inline-start:50%;transform:translateX(-50%);
  width:1px;height:12px;background:var(--amb);opacity:.4}
@media(max-width:700px){.vf i{width:14px;height:14px;inset-inline-start:10px;inset-inline-end:10px}
  .vf i:nth-child(1),.vf i:nth-child(2){inset-block-start:10px}
  .vf i:nth-child(3),.vf i:nth-child(4){inset-block-end:10px}}

/* ---------- depth-masked hero: title travels BETWEEN plate and cutout ---------- */
.stage{position:relative;min-height:100svh;overflow:hidden;display:flex;align-items:flex-end}
.stage .plate{position:absolute;inset:0;z-index:0;background:center/cover no-repeat;
  background-image:url(/assets/img/scene-1.webp);will-change:transform}
@media(max-width:700px){.stage .plate{background-image:url(/assets/img/scene-1@sm.webp)}}
.stage .plate::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,var(--bg) 1%,rgba(10,10,10,.55) 30%,rgba(10,10,10,.15) 62%,rgba(10,10,10,.5) 100%)}
/* the sliding title sits ABOVE the plate and BELOW the cutout: that gap is the whole trick */
.stage .band{position:absolute;inset-block-start:8%;inset-inline:0;z-index:1;
  display:flex;align-items:center;white-space:nowrap;pointer-events:none;
  will-change:transform;direction:ltr}
.stage .band span{
  font-size:clamp(3rem,11vw,9.5rem);font-weight:700;line-height:1.42;
  color:transparent;-webkit-text-stroke:1px rgba(236,232,223,.42);
  padding-inline:.18em;opacity:.9;
}
.stage .band span.solid{-webkit-text-stroke:0;color:rgba(236,232,223,.2)}
.stage .cut{position:absolute;inset:0;z-index:2;background:center/cover no-repeat;
  background-image:url(/assets/img/skyline.webp);
  will-change:transform;pointer-events:none}
.stage .veil2{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:
    linear-gradient(to top,var(--bg) 2%,rgba(10,10,10,.72) 30%,rgba(10,10,10,.2) 62%,transparent 78%),
    linear-gradient(to left,rgba(10,10,10,.8) 0%,rgba(10,10,10,.42) 34%,transparent 62%)}
[dir=ltr] .stage .veil2{background:
    linear-gradient(to top,var(--bg) 2%,rgba(10,10,10,.72) 30%,rgba(10,10,10,.2) 62%,transparent 78%),
    linear-gradient(to right,rgba(10,10,10,.8) 0%,rgba(10,10,10,.42) 34%,transparent 62%)}
.stage .fg{position:relative;z-index:4;padding-block:0 clamp(2.5rem,7vh,5rem)}
/* width comes from .wrap. Declaring it here out-ranks .wrap and the hero
   content escapes the container: that bug shipped once already. */

@media(prefers-reduced-motion:reduce){
  .stage .band{display:none}
}

/* ---------- chapter marker: gold-foil numeral + Arabic word ---------- */
/* Gold-Foil is effect #32 from the vendored colorion library (MIT).
   Latin numerals only: the effect is a background-clip gradient, safe for
   Arabic too, but the numeral is where it reads best. */
.ch{display:inline-flex;align-items:baseline;gap:.55rem;direction:ltr;
  font-size:.9rem;line-height:1.6;margin:0 0 1.1rem}
.ch .n{
  font-weight:700;font-size:1.05rem;color:transparent;
  background:linear-gradient(108deg,#7a4a08 0%,#f2c15d 18%,#fff4b8 24%,#b87014 36%,
    #f6d66d 51%,#8e560b 68%,#fff0a2 76%,#c98218 100%) 0 0/230% 100%;
  -webkit-background-clip:text;background-clip:text;
  animation:foil 3.1s ease-in-out infinite;
}
@keyframes foil{0%,100%{background-position:115% 0}45%{background-position:-35% 0}}
@media(prefers-reduced-motion:reduce){.ch .n{animation:none;background-position:40% 0}}
.ch .star{color:var(--amb);opacity:.7;font-size:.8em}
.ch .w{color:var(--amb);font-weight:500;direction:rtl}

/* ---------- per-word mask reveal (never per-letter: Arabic joining) -------- */
.wr{display:inline-block;overflow:hidden;
  /* tashkeel sits above the cap line and overflow:hidden would shave it */
  padding:.24em .06em .16em;margin:-.24em -.06em -.16em}
.wr>i{display:inline-block;font-style:inherit;transform:translateY(110%);
  transition:transform .9s cubic-bezier(.22,.61,.36,1)}
.in .wr>i{transform:none}
@media(prefers-reduced-motion:reduce){.wr>i{transform:none;transition:none}}

/* ---------- themes as a cursor-following reveal list (not equal cards) ----- */
.reveal-list{border-block-start:1px solid var(--line-soft);margin-top:2.4rem;position:relative}
.reveal-list .row{
  display:grid;grid-template-columns:auto 1fr auto;gap:1.4rem;align-items:center;
  padding:1.6rem .4rem;border-block-end:1px solid var(--line-soft);cursor:default;
  transition:padding-inline .5s var(--ease),border-color .5s;
}
.reveal-list .row .idx{font-size:.85rem;color:var(--amb);direction:ltr;opacity:.7;
  transition:opacity .4s,transform .5s var(--ease)}
.reveal-list .row h3{margin:0;font-size:clamp(1.15rem,2.6vw,1.7rem);font-weight:700;
  line-height:1.5;color:#8e8a83;transition:color .45s var(--ease)}
.reveal-list .row p{margin:.3rem 0 0;font-size:.94rem;line-height:1.8;color:#6f6b65;
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .55s var(--ease),opacity .45s,margin .55s var(--ease)}
.reveal-list .row .go{width:26px;height:1px;background:var(--amb);opacity:0;
  transition:opacity .4s,width .5s var(--ease)}
.reveal-list .row:hover,.reveal-list .row:focus-within{padding-inline:1.1rem .4rem;border-color:var(--line)}
.reveal-list .row:hover h3,.reveal-list .row:focus-within h3{color:#fff}
.reveal-list .row:hover p,.reveal-list .row:focus-within p{max-height:5rem;opacity:1;margin-top:.5rem}
.reveal-list .row:hover .idx,.reveal-list .row:focus-within .idx{opacity:1}
.reveal-list .row:hover .go,.reveal-list .row:focus-within .go{opacity:1;width:44px}
/* the thumbnail that follows the cursor */
/* top/left are required: a fixed element without them anchors at its STATIC
   position, which for this node is the bottom of the document. The transform
   then moves it from there and it never enters the viewport. */
/* PHYSICAL top/left, not logical: in RTL inset-inline-start resolves to right,
   and this element is positioned from clientX/clientY which are always
   physical viewport coordinates. Logical props put it a viewport-width off. */
.peek{position:fixed;top:0;left:0;
  z-index:40;width:270px;aspect-ratio:4/3;border-radius:12px;overflow:hidden;
  pointer-events:none;opacity:0;
  border:1px solid var(--line);box-shadow:0 30px 70px rgba(0,0,0,.6);
  transition:opacity .35s var(--ease);will-change:transform}
.peek.on{opacity:1}
.peek img{width:100%;height:100%;object-fit:cover;display:block}
@media(hover:none),(max-width:860px){
  .peek{display:none}
  /* touch has no hover: the copy must be readable without it */
  .reveal-list .row p{max-height:5rem;opacity:1;margin-top:.5rem}
  .reveal-list .row h3{color:#e9e6e0}
}

/* ---------- shine-sweep CTA (colorion button #29, the luxury classic) ------ */
.btn-primary{position:relative;overflow:hidden;isolation:isolate}
.btn-primary::after{
  content:"";position:absolute;inset-block:0;inset-inline-start:-60%;width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);
  transform:skewX(-18deg);opacity:0;pointer-events:none;
}
.btn-primary:hover::after{animation:sweep .85s ease-out}
@keyframes sweep{
  0%{inset-inline-start:-60%;opacity:0}
  12%{opacity:1}
  100%{inset-inline-start:130%;opacity:0}
}
@media(prefers-reduced-motion:reduce){.btn-primary:hover::after{animation:none}}
/* magnetic pull, driven by rAF not React state */
.mag{will-change:transform}

/* ---------- bottom chapter rail ---------- */
.rail{
  position:fixed;inset-block-end:0;inset-inline:0;z-index:45;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.7rem clamp(1rem,4vw,2.2rem);
  background:linear-gradient(to top,rgba(10,10,10,.92),transparent);
  font-size:.78rem;line-height:1.6;color:#8e8a83;
  opacity:0;transform:translateY(100%);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
}
.rail.on{opacity:1;transform:none}
.rail a{display:inline-flex;align-items:center;gap:.5rem;min-height:30px;
  color:#8e8a83;transition:color .35s}
.rail a:hover{color:var(--amb)}
.rail .now{color:var(--amb);direction:ltr;font-variant-numeric:tabular-nums}
.rail .mid{flex:1;text-align:center;opacity:.55;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:640px){.rail .mid{display:none}}

/* ---------- ambient accent bleeds into the shared furniture ---------- */
.kicker::before{background:var(--amb)}
.card::after{background:linear-gradient(90deg,transparent,var(--amb),transparent)}

/* ---------- the three facts: a hairline strip, its own layout family ---------- */
.facts{padding:0;border-block-end:1px solid var(--line-soft);background:var(--bg)}
.facts .row{display:grid;grid-template-columns:repeat(3,1fr)}
.facts .f{padding:1.5rem 1.4rem;border-inline-start:1px solid var(--line-soft);
  display:flex;flex-direction:column;gap:.2rem;transition:background .45s var(--ease)}
.facts .f:first-child{border-inline-start:0}
.facts .f:hover{background:var(--amb-soft)}
.facts .k{font-size:.74rem;color:var(--muted);line-height:1.6}
.facts .v{font-size:1.02rem;font-weight:500;color:#fff;line-height:1.6}
@media(max-width:720px){
  .facts .row{grid-template-columns:1fr}
  .facts .f{border-inline-start:0;border-block-start:1px solid var(--line-soft);padding:1.05rem 0}
  .facts .f:first-child{border-block-start:0}
}

/* ---------- contact line in the venue block ---------- */
.contact{margin:.2rem 0 0;font-size:.92rem;line-height:1.8;color:var(--muted)}
.contact a{color:var(--amb);border-block-end:1px solid transparent;
  /* 24px minimum tap target: the bare link measured 110x23 */
  display:inline-flex;align-items:center;min-height:26px;padding-block:.15rem 2px;
  transition:border-color .35s,color .35s}
.contact a:hover{border-block-end-color:var(--amb);color:#fff}

/* ---------- the Bithrah credit: a real signature, not a footer link ---------- */
footer .in{align-items:flex-end}
footer .fside{display:flex;flex-direction:column;gap:.55rem}
.credit{
  display:inline-flex;align-items:center;gap:.8rem;
  padding:.7rem 1.1rem;border:1px solid var(--line-soft);border-radius:999px;
  background:rgba(20,20,22,.5);position:relative;overflow:hidden;isolation:isolate;
  transition:border-color .45s var(--ease),background .45s var(--ease),transform .45s var(--ease);
}
.credit::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;
  background:radial-gradient(120% 180% at 50% 120%,rgba(46,234,160,.16),rgba(27,143,232,.1) 45%,transparent 70%);
  transition:opacity .5s var(--ease);
}
.credit:hover{border-color:rgba(46,234,160,.45);transform:translateY(-2px)}
.credit:hover::before{opacity:1}
.credit .cby{font-size:.74rem;color:var(--muted);line-height:1.6;white-space:nowrap}
.credit .cmark{display:flex;flex:none}
.credit .cmark img{width:22px;height:auto;display:block;
  transition:transform .5s var(--ease),filter .5s var(--ease)}
.credit:hover .cmark img{transform:translateY(-2px) scale(1.1);
  filter:drop-shadow(0 4px 12px rgba(46,234,160,.5))}
.credit .cname{display:flex;flex-direction:column;line-height:1.5}
.credit .cname b{font-size:.92rem;font-weight:700;color:#e9e6e0;transition:color .4s}
.credit .cname i{font-size:.7rem;font-style:normal;color:#6d6a65;transition:color .4s}
.credit:hover .cname b{color:#fff}
.credit:hover .cname i{color:var(--muted)}
.credit .carrow{flex:none;color:#6d6a65;opacity:0;transform:translate(-4px,4px);
  transition:opacity .4s var(--ease),transform .45s var(--ease),color .4s}
[dir=rtl] .credit .carrow{transform:translate(4px,4px) scaleX(-1)}
.credit:hover .carrow{opacity:1;transform:translate(0,0);color:rgba(46,234,160,.9)}
[dir=rtl] .credit:hover .carrow{transform:translate(0,0) scaleX(-1)}
.credit:focus-visible{outline:2px solid rgba(46,234,160,.6);outline-offset:3px}
@media(max-width:640px){
  footer .in{align-items:flex-start;gap:1.6rem}
  .credit{width:100%;justify-content:flex-start}
}
@media(prefers-reduced-motion:reduce){
  .credit,.credit .cmark img,.credit .carrow{transition:none}
  .credit:hover{transform:none}
}