/* ==========================================================================
   Lumora layer — 1 November 2026
   The Lumora studio layout and motion (loader, overlay header, liquid-reveal
   hero, pills, dark cards, hover-fill rows, count-up panel, watermark footer),
   set in this site's own palette and fonts: ink, gold and paper; Cairo and
   Amiri in Arabic, Cormorant and Inter in English. Every colour below is a
   token from main.css, so the two files cannot drift apart.

   Nothing here hides text unless lum.js has started (html.lum-js), and
   lum.js marks everything shown after four seconds whatever happens: a page
   whose script fails reads exactly like the finished page.
   ========================================================================== */

:root{
  --l-ink:var(--surface-1);
  --l-card:var(--surface-2);
  --l-card-2:var(--surface-3);
  --l-pill:9999px;
  --l-r-card:2rem;
  --l-r-card-sm:1.25rem;
  --l-r-ctl:.875rem;
  --l-shell:88rem;
  --l-water:clamp(5rem,15vw,13rem);
  --l-ease-out:cubic-bezier(.22,1,.36,1);
  --l-ease-line:cubic-bezier(.215,.61,.355,1);
  --l-ease-word:cubic-bezier(.165,.84,.44,1);
  --l-ease-hover:cubic-bezier(.2,.8,.2,1);
  --l-gold-grad:linear-gradient(to bottom right,var(--gold-lt),var(--gold-deep));
}

.lshell{width:100%;max-width:var(--l-shell);margin-inline:auto;padding-inline:1.25rem}
@media (min-width:640px){.lshell{padding-inline:2rem}}

/* ------------------------------------------------------------- icons ---- */
.lico{width:1em;height:1em;display:inline-block;flex:none;vertical-align:middle}
.lico--s{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lico--f{fill:currentColor}
html[dir=rtl] .lico--dir{transform:scaleX(-1)}

/* ------------------------------------------------------------ loader ---- */
.lload{
  position:fixed;inset:0;z-index:2001;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2rem;background:var(--l-ink);color:var(--paper);
  border-radius:0 0 var(--l-r-card) var(--l-r-card);
  /* No script: it simply fades after two seconds and never takes a tap. */
  pointer-events:none;animation:lload-go .7s var(--l-ease-out) 2s forwards;
}
html.entered .lload,.lload[hidden]{display:none}
html.lum-js .lload{animation:none}
.lload.is-out{transform:translateY(-100%);transition:transform .75s var(--l-ease-out)}
.lload__c{display:flex;flex-direction:column;align-items:center;gap:1.25rem;text-align:center;
  transition:opacity .6s var(--l-ease-out),transform .6s var(--l-ease-out)}
.lload.is-out .lload__c{opacity:0;transform:translateY(-12px)}
.lload__brand{display:flex;align-items:center;gap:.6rem;font-weight:600;font-size:1.5rem;color:var(--paper)}
.lload__brand .lico{font-size:1.875rem;color:var(--gold)}
.lload__tag{max-width:24ch;font-size:.875rem;color:rgba(244,242,237,.55);margin:0}
.lload__p{width:min(22rem,72vw);display:grid;gap:.75rem}
.lload__track{height:1px;background:rgba(244,242,237,.15);overflow:hidden}
.lload__fill{height:100%;width:0;background:var(--gold);transition:width .1s ease-out}
.lload__row{display:flex;justify-content:space-between;font-size:.75rem;font-weight:500;
  letter-spacing:.05em;color:rgba(244,242,237,.45);text-transform:uppercase}
.lload__n{font-variant-numeric:tabular-nums;color:rgba(244,242,237,.8);direction:ltr}
@keyframes lload-go{to{opacity:0}}
@media (min-width:640px){.lload__brand{font-size:1.875rem}}

/* ------------------------------------------------------------ header ---- */
.lhdr{position:fixed;inset:0 0 auto;z-index:100;
  transition:background .5s var(--l-ease-out),border-color .5s var(--l-ease-out),transform .5s var(--l-ease-out);
  border-bottom:1px solid transparent}
.lhdr.is-stuck{background:rgba(0,0,0,.82);backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);border-bottom-color:var(--line)}
.lhdr__in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding-block:1.1rem;transition:padding .4s var(--l-ease-out)}
.lhdr.is-stuck .lhdr__in{padding-block:.7rem}
.lbrand{display:inline-flex;align-items:center;gap:.5rem;font-size:1.125rem;font-weight:600;
  color:var(--paper);white-space:nowrap;transition:transform .35s var(--l-ease-hover)}
.lbrand .lico{font-size:1.25rem;color:var(--gold)}
.lbrand:hover{transform:scale(1.04)}
.lnav{display:none}
.lnav ul{display:flex;gap:1.2rem;list-style:none;margin:0;padding:0;font-size:.875rem;font-weight:500}
.lnav a{display:inline-block;white-space:nowrap;color:var(--paper-2);opacity:.85;transition:transform .35s var(--l-ease-hover),opacity .35s,color .35s}
.lnav a:hover,.lnav a[aria-current=page]{opacity:1;color:var(--paper);transform:translateY(-2px)}
.lnav a[aria-current=page]{color:var(--gold)}
@media (min-width:1100px){.lnav{display:block}}
.lhdr__r{display:flex;align-items:center;gap:.6rem}
.lchip,.lmenubtn,.llang{border:1px solid var(--line-2);background:rgba(16,16,18,.45);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border-radius:var(--l-r-ctl);color:var(--paper)}
.lchip{display:none;align-items:center;gap:.6rem;padding:.5rem .75rem;font-size:.75rem;color:var(--paper-2)}
.lchip__l{color:var(--muted)}
.lchip__t{min-width:3.5rem;font-variant-numeric:tabular-nums;font-weight:500;color:var(--paper)}
.lchip__s{color:rgba(244,242,237,.3)}
.lchip__d{font-weight:500}
@media (min-width:1200px){.lchip{display:flex}}
.llang{display:inline-flex;align-items:center;min-height:2.4rem;padding:.4rem .8rem;font-size:.75rem;font-weight:600;letter-spacing:.05em}
.llang:hover,.lmenubtn:hover{background:rgba(24,24,27,.85);border-color:var(--gold-dim)}
.lmenubtn{display:inline-flex;align-items:center;gap:.5rem;min-height:2.4rem;padding:.5rem 1rem;font:inherit;
  font-size:.75rem;font-weight:500;letter-spacing:.05em;cursor:pointer;white-space:nowrap;transition:transform .35s var(--l-ease-hover)}
.lmenubtn:hover{transform:scale(1.05)}
.lmenubtn .lico{font-size:.875rem}
.lmenubtn__w{display:none}
@media (min-width:640px){.lmenubtn__w{display:inline}}

/* --------------------------------------------------------- nav overlay -- */
.lmenu{position:fixed;inset:0;z-index:1500;display:flex;flex-direction:column;background:var(--l-ink);
  color:var(--paper);opacity:0;visibility:hidden;transition:opacity .45s var(--l-ease-out),visibility 0s .45s}
.lmenu.is-open{opacity:1;visibility:visible;transition:opacity .45s var(--l-ease-out)}
.lmenu__top{display:flex;align-items:center;justify-content:space-between;padding-block:1.25rem}
.lmenu__x{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--line-2);border-radius:var(--l-r-ctl);
  padding:.5rem 1rem;font:inherit;font-size:.75rem;font-weight:500;letter-spacing:.05em;color:var(--paper-2);
  background:none;cursor:pointer;transition:border-color .3s,color .3s}
.lmenu__x:hover{border-color:var(--gold-dim);color:var(--paper)}
.lmenu__nav{flex:1;display:flex;flex-direction:column;overflow:auto;min-height:0}
.lmenu__nav ul{margin-block:auto !important}
.lmenu__nav ul{list-style:none;margin:0;padding:0;display:grid;gap:.25rem}
.lmenu__nav a{display:flex;align-items:baseline;gap:1rem;padding-block:.35rem;font-size:clamp(1.6rem,4.6vw,3.25rem);
  font-weight:600;letter-spacing:-.02em;line-height:1.15;color:rgba(244,242,237,.7);
  opacity:0;transform:translateY(1rem);transition:opacity .5s ease-out,transform .5s ease-out,color .3s;
  transition-delay:calc(var(--i,0) * 45ms + 80ms)}
html[dir=rtl] .lmenu__nav a{font-family:var(--font-ar-display,inherit)}
.lmenu.is-open .lmenu__nav a{opacity:1;transform:none}
.lmenu__nav a small{font-size:1rem;font-weight:400;color:rgba(244,242,237,.3);font-variant-numeric:tabular-nums;transition:color .3s}
.lmenu__nav a:hover,.lmenu__nav a[aria-current=page]{color:var(--paper)}
.lmenu__nav a:hover small{color:var(--gold)}
.lmenu__bot{display:flex;flex-direction:column;gap:.75rem;border-top:1px solid var(--line);padding-block:1.5rem;
  font-size:.75rem;letter-spacing:.025em;color:rgba(244,242,237,.45)}
.lmenu__bot a{color:var(--paper-2)}
.lmenu__bot a:hover{color:var(--paper);text-decoration:underline}
@media (min-width:640px){.lmenu__bot{flex-direction:row;justify-content:space-between}}

/* ------------------------------------------------------------- pills ---- */
.lpill{display:inline-flex;align-items:center;gap:.75rem;border-radius:var(--l-pill);font-size:.875rem;font-weight:500;
  padding:.875rem 1.75rem;min-height:2.9rem;border:1px solid transparent;
  transition:transform .35s var(--l-ease-hover),background .3s,border-color .3s,color .3s;white-space:nowrap}
.lpill:hover{transform:scale(1.04)}
.lpill--arrow{padding:.375rem;padding-inline-start:1.5rem}
.lpill__b{width:2.25rem;height:2.25rem;display:grid;place-items:center;border-radius:var(--l-pill);font-size:1rem;
  transition:transform .35s var(--l-ease-hover)}
.lpill:hover .lpill__b .lico{transform:translateX(3px)}
html[dir=rtl] .lpill:hover .lpill__b .lico{transform:scaleX(-1) translateX(3px)}
.lpill__b .lico{transition:transform .35s var(--l-ease-hover)}
.lpill--gold{background:var(--gold);color:var(--ink)}
.lpill--gold:hover{background:var(--gold-lt)}
.lpill--gold .lpill__b{background:var(--ink);color:var(--gold)}
.lpill--light{background:var(--paper);color:var(--ink)}
.lpill--light .lpill__b{background:var(--ink);color:var(--paper)}
.lpill--outline{border-color:var(--line-2);background:transparent;color:var(--paper)}
.lpill--outline:hover{border-color:var(--gold-dim)}
.lpill--outline .lpill__b{background:var(--surface-3);color:var(--gold)}

.leye{display:inline-flex;align-items:center;gap:.5rem;font-size:.875rem;font-weight:500;color:var(--paper-2);margin:0}
.leye::before{content:"";width:.375rem;height:.375rem;border-radius:var(--l-pill);background:var(--gold)}
.leye--box{border:1px solid var(--line-2);border-radius:var(--l-pill);padding:.375rem 1rem}
.ltag{display:inline-flex;border:1px solid rgba(244,242,237,.22);border-radius:var(--l-pill);padding:.45rem 1rem;
  font-size:.82rem;color:var(--paper)}

/* ------------------------------------------------------------- hero ----- */
.lhero{position:relative;isolation:isolate;overflow:hidden;border-radius:0 0 var(--l-r-card) var(--l-r-card);
  background:radial-gradient(90% 70% at 20% 0%,var(--gold-wash),transparent 60%),var(--l-ink)}
/* The portrait, whole: the frame takes the photograph's own proportions
   (858 × 1402) and the image fills it exactly — nothing is ever cropped. */
.lhero__media{position:relative;z-index:0;margin-inline:auto;width:min(100%,24rem);aspect-ratio:858/1402;
  max-height:72svh}
.lhero__media img,.lhero__media picture{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.lhero__media canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.lhero__media::after{content:"";position:absolute;inset:auto 0 0;height:22%;pointer-events:none;
  background:linear-gradient(to top,var(--l-ink),transparent)}
.lhero__water{pointer-events:none;user-select:none;position:absolute;inset-inline:0;bottom:6rem;z-index:1;margin:0;
  text-align:center;font-weight:700;line-height:1;font-size:var(--l-water);color:rgba(220,194,138,.07);white-space:nowrap}
.lhero__grid{position:relative;z-index:2;display:flex;flex-direction:column;gap:2rem;padding-top:6.5rem;padding-bottom:3rem}
.lhero__text{display:flex;flex-direction:column;gap:1.5rem;align-items:flex-start}
.lhero__h{margin:0;font-size:clamp(3.25rem,10vw,7rem);line-height:.95;letter-spacing:-.02em;font-weight:600;color:var(--paper)}
.lhero__h .ll:last-child{color:var(--gold)}
.lhero__intro{max-width:36rem;margin:0;font-size:1.06rem;line-height:1.7;color:var(--paper-2);text-align:start}
.lrate{display:flex;align-items:center;gap:.75rem;font-size:.875rem;font-weight:500;color:var(--paper-2)}
.lrate__s{display:inline-flex;gap:2px;color:var(--gold)}
.lctas{display:flex;flex-wrap:wrap;gap:.75rem}
.lhero__side{display:flex;flex-direction:column;align-items:stretch;gap:1.75rem;width:100%}
.lhcard{width:100%;max-width:24rem;border-radius:var(--l-r-card-sm);background:rgba(16,16,18,.72);padding:.5rem;
  box-shadow:0 0 0 1px var(--line-2),0 20px 50px rgba(0,0,0,.4);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.lhcard__row{display:flex;gap:.5rem;cursor:pointer;border-radius:var(--l-r-ctl)}
.lhcard__tile{aspect-ratio:1;width:6rem;flex:none;display:grid;place-items:center;border-radius:var(--l-r-ctl);
  background:var(--ink);font-size:1.875rem;color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold-dim)}
.lhcard__p{flex:1;min-width:0;border-radius:var(--l-r-ctl);background:rgba(24,24,27,.8);padding:.75rem;display:flex;
  flex-direction:column;justify-content:space-between;gap:.5rem}
.lhcard__slot{position:relative;min-height:3.4rem}
.lhcard__i{position:absolute;inset:0;transition:opacity .45s var(--l-ease-out),transform .45s var(--l-ease-out)}
.lhcard__i[aria-hidden=true]{opacity:0;transform:translateY(14px);pointer-events:none}
.lhcard__i.is-up{opacity:0;transform:translateY(-14px)}
.lhcard__c{display:block;font-size:.68rem;font-weight:500;letter-spacing:.05em;color:var(--muted)}
.lhcard__t{display:block;font-size:.9rem;font-weight:500;line-height:1.35;color:var(--paper)}
.lhcard__bar{display:flex;align-items:center;justify-content:space-between}
.lhcard__dots{display:flex;gap:.3rem}
.lhcard__dots i{height:.25rem;width:.375rem;border-radius:var(--l-pill);background:rgba(244,242,237,.2);transition:all .3s}
.lhcard__dots i.is-on{width:1rem;background:var(--gold)}
.lhcard__nav{display:flex;gap:.35rem}
.lhcard__nav button{width:1.9rem;height:1.9rem;display:grid;place-items:center;border-radius:var(--l-pill);border:0;
  background:var(--surface-3);color:var(--paper-2);box-shadow:0 0 0 1px var(--line-2);cursor:pointer;font-size:.8rem}
.lhcard__nav button:hover{color:var(--gold)}
.lhcard__prev .lico{transform:scaleX(-1)}
html[dir=rtl] .lhcard__prev .lico{transform:none}
html[dir=rtl] .lhcard__next .lico{transform:scaleX(-1)}
.lera{width:100%;max-width:24rem}
.lera__l{margin:0 0 .75rem;font-size:.75rem;font-weight:500;color:var(--muted)}
.lera ul{display:grid;grid-template-columns:repeat(2,1fr);column-gap:1rem;row-gap:.6rem;list-style:none;margin:0;padding:0}
.lera li{display:flex;align-items:center;gap:.4rem;font-size:.78rem;color:var(--paper-2);opacity:.75;
  transition:transform .35s var(--l-ease-hover),opacity .35s}
.lera li:hover{opacity:1;transform:translateY(-2px)}
.lera .lico{font-size:.85rem;color:var(--gold-deep)}
.lhero .socs{justify-content:flex-start}
.lstatus{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  border-top:1px solid var(--line);padding-block:1.25rem;font-size:.75rem;font-weight:500;letter-spacing:.025em;color:var(--muted)}
.lstatus__c{display:none}
.lstatus a{display:inline-flex;gap:.5rem;align-items:center;color:var(--paper-2)}
@media (min-width:640px){.lstatus__c{display:inline}}
@media (min-width:1024px){
  .lhero__grid{display:grid;min-height:100svh;grid-template-columns:repeat(12,1fr);gap:2.5rem;padding-top:8rem;padding-bottom:3rem;align-items:end}
  .lhero__text{grid-column:1 / span 7;align-self:center}
  .lhero__side{grid-column:8 / span 5;position:relative;align-items:flex-end;align-self:stretch;justify-content:flex-end}
  .lhero__media{position:absolute;inset-block:2rem 0;inset-inline-end:0;width:auto;max-width:100%;height:calc(100% - 2rem);
    max-height:none;margin:0;z-index:-1}
  .lhcard,.lera{max-width:19rem}
  .lera__l{text-align:end}
  .lera ul{grid-template-columns:repeat(2,1fr)}
}

/* ------------------------------------------------------------ about ----- */
.labout{background:var(--ink)}
.labout__in{display:grid;grid-template-columns:1fr;align-items:center;gap:3rem;padding-block:5rem}
.labout__fig{position:relative;border-radius:var(--l-r-card);overflow:hidden;background:var(--surface-2);
  box-shadow:0 0 0 1px var(--line);max-width:30rem;width:100%;margin-inline:auto}
.labout__fig img{display:block;width:100%;height:auto}
.labout__txt{display:flex;flex-direction:column;gap:1.75rem}
.labout__name{margin:0;font-size:clamp(2rem,4vw,3rem);font-weight:600;letter-spacing:-.01em;color:var(--paper)}
.labout__st{margin:0;font-size:clamp(1.25rem,2.2vw,1.65rem);font-weight:500;line-height:1.55;color:var(--paper);text-align:start}
.labout__st .lmute{color:var(--muted)}
.labout__p{margin:0;color:var(--paper-2);line-height:1.8}
.labout__foot{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.5rem;
  border-top:1px solid var(--line);padding-top:1.5rem}
.labout__foot .leye{color:var(--muted);margin-bottom:.6rem}
.labout .roles{margin:0}
@media (min-width:1024px){.labout__in{grid-template-columns:5fr 7fr;padding-block:7rem}}

/* ------------------------------------------------------- create band ---- */
.lband{background:var(--ink)}
.lband ul{display:flex;flex-direction:column;gap:.75rem;padding-block:2.5rem;list-style:none;margin-block:0}
.lband li{flex:1}
.lband__t{display:grid;place-items:center;height:6rem;border-radius:var(--l-pill);font-size:1.875rem;font-weight:600;
  transition:transform .35s var(--l-ease-hover)}
.lband__t:hover{transform:scale(1.03)}
.lband__t--light{background:var(--paper);color:var(--ink)}
.lband__t--gold{background:var(--l-gold-grad);color:var(--ink)}
.lband__t--dark{background:var(--surface-3);color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold-dim);font-size:2.25rem}
.lband__t--ghost{background:var(--surface-2);color:rgba(244,242,237,.35)}
@media (min-width:640px){.lband ul{flex-direction:row;gap:1rem}.lband__t{height:9rem;font-size:2.1rem}.lband__t--dark{font-size:3rem}}

/* --------------------------------------------------- works (portfolio) -- */
.lworks{background:var(--ink)}
.lworks__in{padding-block:2.5rem 5rem}
.lworks__head{display:flex;flex-direction:column;align-items:center;gap:1rem;text-align:center;margin-bottom:3rem}
.lworks__head h2{margin:0;font-size:clamp(2rem,4.5vw,3rem);font-weight:600;letter-spacing:-.02em;color:var(--paper)}
.lworks__head .sec__sub,.lworks__head .lead{margin:0;text-align:center;text-wrap:balance}
.lcards{display:grid;grid-template-columns:1fr;gap:1.5rem;list-style:none;margin:0;padding:0}
@media (min-width:768px){.lcards{grid-template-columns:repeat(2,1fr)}}
.lcard{position:relative;display:flex;flex-direction:column;min-height:26rem;overflow:hidden;border-radius:var(--l-r-card);
  background:var(--l-card);padding:1.5rem;color:var(--paper);box-shadow:0 0 0 1px var(--line);
  transition:transform .45s var(--l-ease-hover),box-shadow .45s}
.lcard:hover{transform:translateY(-8px) scale(1.012);box-shadow:0 0 0 1px var(--gold-dim),0 30px 60px rgba(0,0,0,.45)}
.lcard__meta{display:flex;justify-content:space-between;align-items:center;gap:1rem;font-size:.75rem;
  letter-spacing:.025em;color:var(--muted);position:relative;z-index:1}
.lcard__badge{width:2.75rem;height:2.75rem;flex:none;display:grid;place-items:center;border-radius:var(--l-pill);
  background:rgba(244,242,237,.08);color:var(--gold);box-shadow:0 0 0 1px var(--line-2);
  transition:transform .4s var(--l-ease-hover)}
.lcard:hover .lcard__badge{transform:rotate(45deg) scale(1.08)}
html[dir=rtl] .lcard__badge .lico{transform:scaleX(-1)}
html[dir=rtl] .lcard:hover .lcard__badge{transform:rotate(-45deg) scale(1.08)}
/* The cover, whole — a book is read by its cover. */
.lcard__cover{flex:1;display:grid;place-items:center;padding-block:1.25rem;min-height:14rem}
.lcard__cover picture,.lcard__cover img{display:block;max-width:100%;max-height:18rem;width:auto;height:auto;
  object-fit:contain;border-radius:.4rem;box-shadow:0 20px 40px rgba(0,0,0,.55)}
.lcard__cover--mark{font-size:4.5rem;color:rgba(220,194,138,.85)}
.lcard__h{margin:0;font-size:1.5rem;font-weight:500;letter-spacing:-.01em;color:var(--paper)}
.lcard__d{margin:.5rem 0 0;max-width:28rem;font-size:.9rem;color:rgba(244,242,237,.6);text-align:start}
.lcard__tags{margin-top:1.1rem;display:flex;flex-wrap:wrap;gap:.5rem}
.lcard--wide{min-height:auto}
@media (min-width:640px){.lcard{padding:2rem}.lcard__h{font-size:1.875rem}}
.lcards__wide{grid-column:1 / -1}
@media (min-width:768px){.lcard--wide{display:grid;grid-template-columns:minmax(10rem,15rem) minmax(0,1fr);gap:2rem;align-items:center}
  .lcard--wide .lcard__meta{grid-column:1 / -1}}
.lpages{margin-top:3rem}
.lpages h3{margin:0 0 1rem;font-size:.82rem;font-weight:500;color:var(--muted);letter-spacing:.03em}
.lpages ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,13rem),1fr));gap:.75rem;list-style:none;margin:0;padding:0}
.lpages a{display:flex;align-items:center;justify-content:space-between;gap:.75rem;border-radius:var(--l-r-card-sm);
  background:var(--surface-2);box-shadow:0 0 0 1px var(--line);padding:1rem 1.25rem;color:var(--paper);font-weight:500;
  transition:background .3s,transform .35s var(--l-ease-hover)}
.lpages a:hover{background:var(--surface-3);transform:translateY(-3px)}
.lpages a .lico{color:var(--gold)}
html[dir=rtl] .lpages a .lico{transform:scaleX(-1)}

/* ---------------------------------------------------------- services ---- */
.lserv{background:var(--ink)}
.lserv__in{padding-block:5rem}
.lserv__h{margin:1.25rem 0 3rem;max-width:16ch;font-size:clamp(2rem,4.5vw,3rem);font-weight:600;letter-spacing:-.02em;color:var(--paper)}
.lrows{list-style:none;margin:0;padding:0}
.lrows li+li{border-top:1px solid var(--line)}
.lrow{display:flex;align-items:center;gap:1rem;border-radius:var(--l-r-card-sm);padding:1.5rem;
  background:rgba(24,24,27,0);transition:background .45s var(--l-ease-out),padding .45s var(--l-ease-out);color:var(--paper)}
.lrow:hover{background:rgba(24,24,27,1);padding-inline-start:2rem;padding-inline-end:1.25rem}
.lrow__n{width:1.75rem;flex:none;font-size:.875rem;font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}
.lrow__t{flex:1;margin:0;font-size:1.5rem;font-weight:500;letter-spacing:-.01em}
.lrow__d{display:none;max-width:22rem;margin:0;font-size:.875rem;color:var(--paper-2);text-align:start}
.lrow__b{width:2.5rem;height:2.5rem;flex:none;display:grid;place-items:center;border-radius:var(--l-pill);
  background:var(--gold);color:var(--ink);transition:transform .35s var(--l-ease-hover)}
.lrow:hover .lrow__b{transform:translateX(5px)}
html[dir=rtl] .lrow:hover .lrow__b{transform:translateX(-5px)}
html[dir=rtl] .lrow__b .lico{transform:scaleX(-1)}
@media (min-width:640px){.lrow{gap:1.5rem;padding-block:2rem}.lrow__n{width:2.5rem}.lrow__t{font-size:1.875rem}.lrow__b{width:3rem;height:3rem}}
@media (min-width:768px){.lrow__t{font-size:2.25rem}}
@media (min-width:1024px){.lrow__d{display:block}.lserv__in{padding-block:7rem}}

/* ------------------------------------------------------------ stats ----- */
.lstats{background:var(--ink)}
.lstats__in{padding-bottom:5rem}
.lstats__p{border-radius:var(--l-r-card);background:var(--surface-2);box-shadow:0 0 0 1px var(--line);
  padding:3rem 1.5rem;color:var(--paper)}
.lstats__h{margin:1rem 0 0;max-width:22ch;font-size:clamp(1.75rem,3.4vw,2.25rem);font-weight:500;letter-spacing:-.01em;color:var(--paper)}
.lstats .stats{margin-top:3.5rem;display:grid;grid-template-columns:repeat(2,1fr);column-gap:2rem;row-gap:3rem;
  list-style:none;padding:0;border:0;background:none}
.lstats .stats li{display:block;padding:0;border:0;background:none;text-align:start}
.lstats .stats b{display:block;font-size:clamp(3rem,7vw,4.5rem);font-weight:600;letter-spacing:-.02em;line-height:1;
  color:var(--gold);font-family:inherit;font-variant-numeric:tabular-nums;white-space:nowrap}
.lstats .stats small{display:block;margin-top:.75rem;font-size:.875rem;color:rgba(244,242,237,.6)}
@media (min-width:640px){.lstats__p{padding:4rem 2rem}}
@media (min-width:768px){.lstats__p{padding-inline:4rem}}
@media (min-width:1024px){.lstats .stats{grid-template-columns:repeat(4,1fr)}.lstats__in{padding-bottom:7rem}}

/* ----------------------------------------------------------- footer ----- */
.lftr{position:relative;overflow:hidden;border-radius:var(--l-r-card) var(--l-r-card) 0 0;background:var(--l-ink);
  color:var(--paper);margin-top:var(--sec-y);box-shadow:0 0 0 1px var(--line)}
.lftr__in{position:relative;z-index:1;padding-top:5rem;padding-bottom:2.5rem}
.lftr__cta{display:flex;flex-direction:column;gap:2rem;border-bottom:1px solid var(--line);padding-bottom:4rem}
.lftr__cta h2{margin:0;max-width:16ch;font-size:clamp(2.1rem,5vw,3.75rem);font-weight:600;letter-spacing:-.02em;line-height:1.1;color:var(--paper)}
.lftr__cols{display:grid;grid-template-columns:1fr;gap:3rem;padding-block:4rem}
.lftr__brand{display:flex;align-items:center;gap:.5rem;font-size:1.125rem;font-weight:600;color:var(--paper);margin:0}
.lftr__brand .lico{color:var(--gold);font-size:1.25rem}
.lftr__tag{max-width:20rem;margin:.9rem 0 0;font-size:.875rem;color:rgba(244,242,237,.55);text-align:start}
.lftr__h{margin:0 0 1rem;font-size:.75rem;font-weight:500;letter-spacing:.025em;color:var(--muted)}
.lftr__links{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;font-size:.9rem}
.lftr__links a{display:inline-flex;opacity:.7;transition:transform .35s var(--l-ease-hover),opacity .35s}
.lftr__links a:hover{opacity:1;transform:translateX(4px)}
html[dir=rtl] .lftr__links a:hover{transform:translateX(-4px)}
.lftr .socs{justify-content:flex-start}
.lftr__legal{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:1rem;
  border-top:1px solid var(--line);padding-top:2rem;font-size:.75rem;color:rgba(244,242,237,.45)}
.lftr__legal a{opacity:.8}
.lftr__legal a:hover{opacity:1;color:var(--paper)}
.lftr__water{position:absolute;inset-inline:0;bottom:-1.5rem;z-index:0;margin:0;text-align:center;pointer-events:none;
  user-select:none;font-weight:700;line-height:1;font-size:var(--l-water);color:rgba(220,194,138,.05);white-space:nowrap}
@media (min-width:640px){.lftr__legal{flex-direction:row}}
@media (min-width:768px){.lftr__cols{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.lftr__in{padding-top:6rem}.lftr__cta{flex-direction:row;align-items:flex-end;justify-content:space-between}
  .lftr__cols{grid-template-columns:repeat(4,1fr)}}

/* ------------------------------------------------- the inner pages ----- */
/* Their content is unchanged; the sections pick up the rounded, layered
   surfaces so every page reads as one site. */
body.lum .sec--top{padding-top:clamp(7rem,12vw,9.5rem)}
body.lum .btn{border-radius:var(--l-pill)}
body.lum .plan,body.lum .booklet,body.lum .examcard,body.lum .faq details,body.lum .vol,
body.lum .regform,body.lum .quiz__box{border-radius:var(--l-r-card-sm)}

/* ----------------------------------------------------------- reveals ---- */
/* Only once lum.js has started, and never under reduced motion. */
html.lum-js:not(.nomo) [data-lr]{opacity:0;transform:translateY(var(--ly,14px)) scale(var(--ls,1));
  transition:opacity .8s var(--l-ease-out),transform .8s var(--l-ease-out);transition-delay:var(--ld,0ms)}
html.lum-js:not(.nomo) [data-lr].is-in{opacity:1;transform:none}
.ll{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.ll>span{display:block}
html.lum-js:not(.nomo) [data-ll] .ll>span{transform:translateY(105%);opacity:0;
  transition:transform .9s var(--l-ease-line),opacity .9s var(--l-ease-line);transition-delay:calc(var(--ld,0ms) + var(--li,0) * var(--lstag,120ms))}
html.lum-js:not(.nomo) [data-ll].is-in .ll>span{transform:none;opacity:1}
.lw{display:inline-block}
html.lum-js:not(.nomo) [data-lwords] .lw{opacity:0;transform:translateY(14px);
  transition:opacity .7s var(--l-ease-word),transform .7s var(--l-ease-word);transition-delay:calc(var(--wi,0) * 35ms)}
html.lum-js:not(.nomo) [data-lwords].is-in .lw{opacity:1;transform:none}

@media (hover:none){
  .lcard:hover,.lpill:hover,.lband__t:hover,.lbrand:hover,.lmenubtn:hover{transform:none}
  .lrow:hover{padding-inline:1.5rem;background:rgba(24,24,27,0)}
}
@media (prefers-reduced-motion:reduce){
  .lload{display:none}
  .lcard,.lpill,.lrow,.lband__t,.lhcard__i{transition:none}
}

/* ======================================================= 1 Nov 2026, II ==
   A black hero with no watermark behind it; the portrait beside the intro
   on a phone; the site's pages as shortcuts under the two buttons; the
   author block ending in one centred button; the stats as figures only. */
.lhero{background:#000}
.lhero__media::after{background:linear-gradient(to top,#000,transparent)}
.lhero__pair{display:grid;grid-template-columns:minmax(0,1fr) 38%;gap:1rem;align-items:center;width:100%}
.lhero__pair .lhero__media{width:100%;max-height:none;margin:0}
.lquick{display:flex;flex-wrap:wrap;gap:.5rem}
.lquick__a{display:inline-flex;align-items:center;min-height:2.4rem;padding:.45rem 1rem;border-radius:var(--l-pill);
  border:1px solid var(--line-2);font-size:.82rem;font-weight:500;color:var(--paper-2);
  transition:border-color .3s,color .3s,background .3s,transform .35s var(--l-ease-hover)}
.lquick__a:hover{border-color:var(--gold-dim);color:var(--gold);background:var(--gold-wash);transform:translateY(-2px)}
@media (min-width:1024px){
  .lhero__pair{display:block}
  .lhero__pair .lhero__media{position:absolute;top:7rem;bottom:2rem;inset-inline-end:2rem;height:auto;width:auto;
    max-width:38%;aspect-ratio:858/1402;z-index:0}
  .lhero__side{z-index:1}
}
.labout__more{grid-column:1 / -1;display:flex;justify-content:center;margin:0}
.lstats .stats{margin:0;row-gap:2rem;column-gap:0}
.lstats .stats li{text-align:center;padding-inline:1rem}
@media (min-width:1024px){.lstats .stats li+li{border-inline-start:1px solid var(--line)}}

/* ================================================== 2 Nov 2026 · type ====
   One type system for every page. One family: Cairo for Arabic, with Inter
   for any Latin inside it, and Inter alone in English. Amiri and Cormorant
   are no longer used for headings. One size per heading level and one size
   for all running text. One colour for headings and one for text.
   The hero name on the home page stays as it is: it is the name, not a
   heading. Small labels (eyebrows, tags, prices, the stats) keep their own
   sizes, because they are labels and not text. */
body.lum{
  --font-ui:Cairo,Inter,"Segoe UI",Tahoma,sans-serif;
  --font-display:var(--font-ui);
  --u-h1:clamp(2.2rem,1.6rem + 2.4vw,3.2rem);
  --u-h2:clamp(1.75rem,1.4rem + 1.4vw,2.4rem);
  --u-h3:clamp(1.2rem,1.1rem + .5vw,1.5rem);
  --u-text:clamp(1rem,.97rem + .18vw,1.1rem);
  --u-head:var(--paper);
  --u-ink:var(--paper-2);
  font-family:var(--font-ui);
}
html[lang=en] body.lum{--font-ui:Inter,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}

body.lum main :is(h1,h2,h3,h4):not(.lhero__h){
  font-family:var(--font-ui);font-weight:600;color:var(--u-head);
  letter-spacing:-.01em;line-height:1.3;
}
html[dir=rtl] body.lum main :is(h1,h2,h3,h4):not(.lhero__h){letter-spacing:0}
body.lum main h1:not(.lhero__h){font-size:var(--u-h1)}
body.lum main h2{font-size:var(--u-h2)}
body.lum main :is(h3,h4){font-size:var(--u-h3)}
/* The one-line headings were sized to fit one line; at a fixed size they wrap. */
body.lum main .oneline{white-space:normal !important;text-wrap:balance}

body.lum main :is(p,li,dd,blockquote,td,.lead,.muted,.sec__sub):not(
  .eyebrow,.leye,.statechip,.booklet__tag,.ltag,.lrow__n,.num,.lera__l,.crumbs,
  .plan__name,.plan__total,.seats__lbl,.examcard__tag,.morerow,.roles li,.lcard__meta,.lhero *,.stats li){
  font-family:var(--font-ui);font-size:var(--u-text);font-weight:400;
  line-height:1.8;color:var(--u-ink);
}
body.lum main .lhero__intro{font-size:var(--u-text);color:var(--u-ink)}

/* ================================================ 2 Nov 2026 · part II ==
   No hero card. A gold marker in the header that slides to the link for the
   part of the page being read. Light and dark modes, the device's choice
   first, switched with a circle that opens from the button. Phosphor icons
   (thin, MIT) in gold beside headings, steps, cards and facts. */
.lhcard{display:none}

/* -------------------------------------------------- the header marker -- */
.lnav{position:relative}
.lnav__ind{position:absolute;bottom:-.55rem;inset-inline-start:0;height:2px;width:0;border-radius:2px;
  background:var(--gold);opacity:0;transform:translateX(var(--x,0));
  transition:transform .5s var(--l-ease-out),width .5s var(--l-ease-out),opacity .3s}
.lnav__ind.is-on{opacity:1;width:var(--w,0)}
.lnav a.is-here{color:var(--gold);opacity:1}
.lmenu__nav a.is-here{color:var(--paper)}
.lmenu__nav a.is-here small{color:var(--gold)}

/* ----------------------------------------------------------- icons ---- */
.lic{width:1em;height:1em;flex:none;display:inline-block;vertical-align:-.15em;color:var(--gold)}
.lic--h{width:1.35em;height:1.35em;margin-inline-end:.45rem;vertical-align:-.25em}
.lic--eye{width:1.15em;height:1.15em}
.leye:has(.lic)::before,.eyebrow:has(.lic)::before{display:none}
.eyebrow .lic{margin-inline-end:.4rem}
.lic--card{display:block;width:2.4rem;height:2.4rem;margin-bottom:.75rem}
.lic--fact{width:1.2em;height:1.2em;margin-inline-end:.4rem;vertical-align:-.2em}
.lrow .lic--row{width:2rem;height:2rem;flex:none}
.flow .lic--card{margin-inline:auto}

/* ================================================ 2 Nov 2026 · part III ==
   The periods list stays still under the pointer, its title centred. Icons
   for the figures and for each syllabus unit. */
.lera li,.lera li:hover{transition:none;transform:none;opacity:.85}
.lhero .lera__l{text-align:center}
.lstats .stats .lic--stat{display:block;width:2.2rem;height:2.2rem;margin:0 auto .9rem}
.lrate .lic--fact{width:1.25em;height:1.25em}
.acc__btn .lic--unit{width:1.6rem;height:1.6rem;flex:none}

/* ================================================= 2 Nov 2026 · part IV ==
   Moving between pages: the old page fades out and the new one rises in, in
   one motion, where the browser supports it (others simply load). Boxes and
   explanations no longer react to the pointer; buttons and links still do.
   The periods block sits in the middle at every width, as wide as its list.
   A weak device drops the blur behind panels. */
/* (cross-page view transitions retired: the entrance covers every arrival) */
/* A slow, quiet cross-fade: the old page dims away while the new one comes
   up, nothing slides or jumps. The header is the same on every page, so it is
   held still and only the content beneath it changes. */
/* The new page comes down over the old one like a curtain drawn from the
   top, quick and even; the old one simply waits underneath. */
::view-transition-old(root){animation:none}
::view-transition-new(root){animation:lcurtain .65s cubic-bezier(.65,0,.35,1) both}
@keyframes lpage-out{from{opacity:1}to{opacity:0}}
@keyframes lpage-in{from{opacity:0}to{opacity:1}}
.lhdr{view-transition-name:site-header}
::view-transition-group(site-header){animation:none}
::view-transition-old(site-header){display:none}
::view-transition-new(site-header){animation:none}
@media (prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}

:is(.card,.cover,.novelband__cover,.place,.cast,.face,.examcard,.planpick,.lcard,.lsteps__i,
  .lband__t,.vol,.booklet,.panel,.plan,.flow > li):hover{transform:none !important}
:is(.card,.cover,.novelband__cover,.place,.cast,.face,.examcard,.planpick):hover{border-color:var(--line) !important}
:is(.lcard,.lsteps__i):hover{box-shadow:0 0 0 1px var(--line) !important}
.card:hover{background:var(--surface-1)}
.lrow:hover{background:rgba(24,24,27,0);padding-inline:1.5rem}
.lrow:hover .lrow__b,.lcard:hover .lcard__badge{transform:none}
html[dir=rtl] .lrow:hover .lrow__b,html[dir=rtl] .lcard:hover .lcard__badge{transform:none}
html[dir=rtl] .lcard__badge .lico{transform:scaleX(-1)}
.acc__btn:hover{padding-inline-start:0}

.lera{width:fit-content;max-width:100%;margin-inline:auto}
.lera ul{grid-template-columns:repeat(2,minmax(0,1fr));justify-items:start;column-gap:2rem}
.lhero .lera__l{text-align:center}
@media (min-width:1024px){.lhero__side{align-items:center}}

html.lite *{backdrop-filter:none !important;-webkit-backdrop-filter:none !important}
html.lite .lhdr.is-stuck{background:rgba(0,0,0,.96)}
.examcard:hover:not(:focus-visible){background:var(--surface-1)}

/* ================================================== 2 Nov 2026 · part V ==
   One header, the same on every page and at every scroll position: a solid
   bar that never changes colour or height. It slides away while scrolling
   down and comes back on any scroll up. */
.lhdr,.lhdr.is-stuck{background:rgba(0,0,0,.92);border-bottom-color:var(--line);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  transition:transform .45s cubic-bezier(.4,0,.2,1)}
.lhdr .lhdr__in,.lhdr.is-stuck .lhdr__in{padding-block:.85rem;transition:none}
.lhdr.is-hidden{transform:translateY(-101%)}
[data-go]{cursor:pointer}
@media (prefers-reduced-motion:reduce){.lhdr{transition:none}}

/* ================================================= 2 Nov 2026 · part VI ==
   «AR - EN» with the page's own language lit. The menu button is for phones
   and tablets only: from the width where the links fit in the bar, the bar
   is the menu. Entering a page (a first visit, or a browser without page
   transitions): a black curtain lifts from the top edge down, under the
   header, which never moves. */
.llang__t{display:inline-flex;align-items:center;gap:.35rem;letter-spacing:.06em;font-weight:600}
.llang__t b{font-weight:600;color:var(--muted);transition:color .3s}
.llang__t b.is-on{color:var(--gold)}
.llang__t i{font-style:normal;color:var(--line-2)}
.llang:hover .llang__t b{color:var(--paper)}
.llang:hover .llang__t b.is-on{color:var(--gold)}
@media (min-width:1100px){.lmenubtn,.lmenu{display:none !important}}

@keyframes lcurtain{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes lcurtain-off{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(100% 0 0 0)}}
html.curtain body::before{content:"";position:fixed;inset:0;z-index:99;background:#000;pointer-events:none;
  animation:lcurtain-off .65s cubic-bezier(.65,0,.35,1) .05s both}
@media (prefers-reduced-motion:reduce){html.curtain body::before{display:none}}

/* The header is the same width on every page: the scrollbar's room is kept
   whether or not a page is long enough to scroll. */
html{scrollbar-gutter:stable}

/* The periods list is for wide screens only: on a phone or tablet, where the
   hero stacks into one column, it is not shown (2 Nov 2026). */
@media (max-width:1023px){.lera{display:none !important}}

/* ============================================ 2 Nov 2026 · the entrance ==
   No words: a Gothic pointed arch with a rose window, in thin gold lines on
   black, drawn in under a second with a faint glow behind it; at one second
   the panel lifts from the top down. Below the header, which never moves.
   If no script runs, it lifts by itself a little later. */
.lintro{position:fixed;inset:0;z-index:99;display:grid;place-items:center;
  background:radial-gradient(40% 45% at 50% 50%,rgba(220,194,138,.09),transparent 70%),#000;
  animation:lintro-out .55s cubic-bezier(.65,0,.35,1) 2.2s forwards}
.lintro.is-out{animation:lintro-out .55s cubic-bezier(.65,0,.35,1) forwards}
.lintro__arch{width:clamp(5.5rem,16vw,8.5rem);height:auto;overflow:visible;
  filter:drop-shadow(0 0 10px rgba(220,194,138,.25));animation:lintro-rise .9s cubic-bezier(.22,1,.36,1) both}
.lintro__l{stroke:var(--gold);stroke-width:1;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1;animation:lintro-draw .62s cubic-bezier(.65,0,.35,1) forwards}
.lintro__l--1{animation-delay:0s}
.lintro__l--2{animation-delay:.08s;opacity:.55}
.lintro__l--3{animation-delay:.2s}
.lintro__l--4{animation-delay:.3s}
.lintro__l--5{animation-delay:.34s;opacity:.7}
.lintro__l--6{animation-delay:.26s;opacity:.4}
.lintro__key{fill:var(--gold);opacity:0;animation:lintro-key .4s ease .5s forwards}
@keyframes lintro-draw{to{stroke-dashoffset:0}}
@keyframes lintro-key{to{opacity:1}}
@keyframes lintro-rise{from{opacity:0;transform:translateY(6px) scale(.97)}to{opacity:1;transform:none}}
@keyframes lintro-out{from{clip-path:inset(0 0 0 0)}99%{clip-path:inset(100% 0 0 0)}
  to{clip-path:inset(100% 0 0 0);visibility:hidden}}
@media (prefers-reduced-motion:reduce){
  .lintro__arch,.lintro__l,.lintro__key{animation:none;stroke-dashoffset:0;opacity:1}
  .lintro.is-out{animation:none;display:none}
}
/* The curtain and the page transition are replaced by the entrance. */
::view-transition-new(root){animation:none}
html.curtain body::before{display:none}

/* No empty band under the header on the inner pages (2 Nov 2026): the room
   the breadcrumb line used to take is gone, the author block loses the rule
   above it, and its text starts level with the top of the photograph. */
body.lum .sec--top{padding-top:calc(4.2rem + clamp(1.25rem,3vw,2.5rem))}
body.lum .sec--top .author{border-top:0;padding-top:0;margin-top:0}
body.lum .sec--top .author__in{align-items:start}
body.lum .sec--top .split--end{align-items:start}

/* ============================================ 2 Nov 2026 · tidy, part II ==
   No gap under the header on any page: the content starts just below it.
   The home page's text starts at the top beside the portrait. Images do not
   react to the pointer anywhere. Contact links under a booklet. */
body.lum{--hdr-h:4.2rem}
body.lum .sec--top{padding-top:calc(var(--hdr-h) + .75rem)}
.lhero__grid{padding-top:calc(4.2rem + 1rem)}
@media (min-width:1024px){
  .lhero__grid{padding-top:calc(4.2rem + 1.25rem);align-items:start}
  .lhero__text{align-self:start}
  .lhero__pair .lhero__media{top:calc(4.2rem + 1.25rem)}
}
img,picture,.lhero__media,.lcard__cover,.cover,.novelband__cover,.booklet__cover,.pxl__shot{transition:none}
:is(img,picture,.lhero__media,.cover,.novelband__cover,.booklet__cover,.lcard__cover,.pxl__shot):hover,
:is(.cover,.novelband__cover,.booklet,.lcard,.card,.pxl__shot):hover :is(img,picture){transform:none !important;filter:none !important}
.booklet__contact{display:flex;flex-wrap:wrap;gap:.45rem;margin:.6rem 0 0}
.booklet__c{display:inline-flex;align-items:center;gap:.4rem;min-height:2.3rem;padding:.35rem .85rem;
  border:1px solid var(--line-2);border-radius:var(--l-pill);font-size:.82rem;color:var(--paper-2)}
.booklet__c:hover{border-color:var(--gold-dim);color:var(--gold)}
.booklet__c .lic{width:1.1rem;height:1.1rem}

/* ============================================ 2 Nov 2026 · phone hero ==
   On a phone the portrait is larger beside the introduction, and the page
   links sit directly under it, in an even grid, before the two buttons. */
@media (max-width:1023px){
  .lhero__pair{grid-template-columns:minmax(0,1fr) 46%;gap:1.1rem;align-items:center}
  .lhero__text > .lhero__h{order:0}
  .lhero__text > .lhero__pair{order:1}
  .lhero__text > .lquick{order:2}
  .lhero__text > .lctas{order:3}
  .lhero__text > :last-child{order:4}
  .lquick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;width:100%}
  .lquick__a{justify-content:center;text-align:center;padding-inline:.5rem;font-size:.8rem}
  .lctas{width:100%}
}
@media (max-width:420px){.lhero__pair{grid-template-columns:minmax(0,1fr) 48%}}

/* ======================================== 2 Nov 2026 · the scroll line ==
   The page's scrollbar is a single thin gold line, with no track or arrows. */
html{scrollbar-width:thin;scrollbar-color:var(--gold-deep) transparent}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--gold-deep);border-radius:9999px}
::-webkit-scrollbar-thumb:hover{background:var(--gold)}
::-webkit-scrollbar-button{display:none;width:0;height:0}
@media (max-width:1023px){
  .lhero__pair{grid-template-columns:minmax(0,1fr) 52%;gap:.9rem}
  .lhero__pair .lhero__intro{font-size:.92rem;line-height:1.75}
  .lquick__a{white-space:nowrap;font-size:.76rem;padding-inline:.35rem;min-height:2.6rem}
  .lctas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
  .lctas .lpill{justify-content:center;padding-inline:.9rem;font-size:.82rem;min-height:3rem}
  .lctas .lpill--arrow{padding-inline-start:1rem}
}
@media (max-width:420px){.lhero__pair{grid-template-columns:minmax(0,1fr) 54%}}

/* On a phone the social links sit in the middle of the screen, evenly
   spaced, in the hero and in the footer (2 Nov 2026). */
@media (max-width:1023px){
  .lhero__text > :last-child{width:100%;display:flex;justify-content:center}
  .lhero .socs{justify-content:center;width:100%;gap:.9rem}
  .lftr__cols > div:has(.socs){display:flex;flex-direction:column;align-items:center;text-align:center}
  .lftr .socs{justify-content:center;width:100%}
  .lftr__cols > div:has(.socs) .lftr__h{text-align:center}
}

/* ======================================== 2 Nov 2026 · the scroll line ==
   No scrollbar on any page or screen. In its place a single gold hairline
   down the right edge, filling from the top as the page is read, with a small
   diamond at the reader's place — quiet, classic, in the site's own gold. */
html{scrollbar-width:none;scrollbar-gutter:auto}
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none;width:0;height:0}
.lscroll{position:fixed;top:0;bottom:0;right:7px;width:1px;z-index:130;pointer-events:none;
  background:linear-gradient(to bottom,transparent,rgba(220,194,138,.16) 8%,rgba(220,194,138,.16) 92%,transparent)}
.lscroll__fill{position:absolute;top:0;left:0;width:1px;height:calc(var(--p,0) * 100%);
  background:linear-gradient(to bottom,rgba(179,148,87,.2),var(--gold))}
.lscroll__mark{position:absolute;left:50%;top:calc(var(--p,0) * 100%);width:7px;height:7px;
  background:var(--gold);transform:translate(-50%,-50%) rotate(45deg);
  box-shadow:0 0 0 2px rgba(0,0,0,.6),0 0 8px rgba(220,194,138,.45)}
.lscroll.is-short{display:none}
@media (max-width:640px){.lscroll{right:4px}.lscroll__mark{width:6px;height:6px}}
a[data-go]{cursor:pointer}