/* ============================================================
   Canonical instance landing presentation
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  /* navy ground */
  --ink-900:#05091A;
  --ink-850:#070E24;
  --ink-800:#0A1330;
  --ink-750:#0C1839;
  --ink-700:#101F4C;

  /* royal blue identity */
  --royal-700:#132A6E;
  --royal-600:#18367F;
  --royal-500:#2149A6;
  --royal-400:#2F5DCB;

  /* restrained gold accent */
  --gold-300:#EFD394;
  --gold-400:#E3BE6D;
  --gold-500:#D8A74A;
  --gold-600:#B78730;

  /* text */
  --ivory:#F3F6FD;
  --muted:#A3B1D1;
  --muted-dim:#7B89AC;

  --line:rgba(163,177,209,.16);
  --line-strong:rgba(163,177,209,.28);

  --on-gold:#241703;

  /* effect colours: the two non-palette values the world actually needs */
  --sweep:rgba(255,255,255,.42);   /* CTA highlight pass */
  --contact-shadow:rgba(3,6,18,.85); /* pedestal under the cutout portrait */

  /* type */
  --display:"El Messiri",system-ui,sans-serif;
  --body:"IBM Plex Sans Arabic",system-ui,sans-serif;

  /* rhythm */
  --gutter:clamp(1.25rem,4vw,2.5rem);
  --shell:78rem;
  --section-y:clamp(4.5rem,9vw,8rem);

  /* small-text ramp — five steps for everything below body size.
     Replaces ten near-duplicate literals that spanned .6875–.95rem. */
  --fs-3xs:.6875rem;  /* 11px — letterspaced micro-label (wordmark subline) */
  --fs-2xs:.75rem;    /* 12px — footer credit */
  --fs-xs:.8125rem;   /* 13px — pill labels, captions, channel names */
  --fs-sm:.875rem;    /* 14px — card notes, meta, footer copy */
  --fs-md:.9375rem;   /* 15px — nav links, small button labels */
  --fs-title:clamp(1.02rem,.95rem + .35vw,1.2rem); /* card + row titles */
  --fs-brand:1.3rem;      /* wordmark text beside the mark */
  --fs-brand-sm:1.12rem;  /* the same wordmark under 640px */
  --fs-drawer:1.5rem;     /* drawer links — thumb-scale nav */

  --r-sm:.625rem;
  --r-md:1rem;
  --r-lg:1.5rem;
  --r-pill:999px;
  --r-hair:2px;       /* gold rails and the nav underline */
  --r-focus:4px;      /* focus ring on otherwise unrounded text links */

  --shadow-sm:0 2px 10px rgba(0,0,0,.28);
  --shadow-md:0 14px 34px rgba(0,0,0,.42);
  --shadow-lg:0 30px 70px rgba(0,0,0,.52);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  /* every state change that is colour, border or shadow rides this pair, so
     reduced motion can drop transform without dropping feedback */
  --t-state:.3s var(--ease);
  --t-move:.4s var(--ease-out);

  --header-h:5rem;     /* fixed header, for anchor scroll offset */
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
*{margin:0;}
html{-webkit-text-size-adjust:100%;}
html:focus-within{scroll-behavior:smooth;}
/* in-page anchors land below the fixed header rather than under it */
html{scroll-padding-top:calc(var(--header-h) + 1rem);}

/* browser surfaces carry the world too, instead of shipping UA defaults */
::selection{background:rgba(216,167,74,.3);color:var(--ivory);}
html{scrollbar-color:var(--royal-500) var(--ink-900);}
:root{accent-color:var(--gold-500);}

body{
  font-family:var(--body);
  font-weight:400;
  font-size:clamp(1rem,.96rem + .2vw,1.0625rem);
  line-height:1.85;
  color:var(--ivory);
  background:var(--ink-800);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg,video{display:block;max-width:100%;}
img{height:auto;}
/* the <picture> wrapper must not become a layout box of its own — the <img>
   inside it stays the flex/grid item the rules below are written against */
picture{display:contents;}
ul,ol{list-style:none;padding:0;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
:focus-visible{outline:2px solid var(--gold-400);outline-offset:3px;border-radius:var(--r-focus);}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.skip-link{
  position:fixed;inset-inline-start:1rem;top:-100px;z-index:200;
  padding:.75rem 1.25rem;border-radius:var(--r-sm);
  background:var(--gold-500);color:var(--ink-900);font-weight:600;
  transition:top .25s var(--ease);
}
.skip-link:focus{top:1rem;}

.container{
  width:100%;max-width:var(--shell);
  margin-inline:auto;padding-inline:var(--gutter);
}

/* ---------- 3. Typography ---------- */
/* Section titles stay ivory; gold is reserved for the name, doctorate and actions. */
.h2{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(2rem,1.25rem + 3vw,3.5rem);
  line-height:1.24;
  letter-spacing:-.01em;
  color:var(--ivory);
  text-wrap:balance;
}
.subhead{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(1.1rem,.98rem + .6vw,1.5rem);
  line-height:1.5;
  color:var(--ivory);
  margin-top:.55rem;
  text-wrap:balance;
}
.lead{
  color:var(--muted);
  text-wrap:pretty;
  font-size:clamp(1rem,.95rem + .3vw,1.15rem);
  max-width:46ch;
  margin-top:.9rem;
}
.section__head--center .subhead,
.section__head--center .lead{margin-inline:auto;}
.section__head{margin-bottom:clamp(2.5rem,5vw,4rem);}
.section__head--center{text-align:center;}
.section__head--center .lead{margin-inline:auto;}

/* ---------- 4. Buttons ---------- */
.btn{
  --btn-bg:transparent;
  --btn-fg:var(--ivory);
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.9rem 1.6rem;
  border-radius:var(--r-pill);
  font-family:var(--display);
  font-weight:600;
  font-size:1rem;
  line-height:1;
  color:var(--btn-fg);
  background:var(--btn-bg);
  position:relative;
  isolation:isolate;
  overflow:hidden;
  transition:transform .32s var(--ease-out),box-shadow .32s var(--ease-out),
             background-color .25s var(--ease),border-color .25s var(--ease);
  /* no resting will-change: it is a hint for a known expensive animation,
     not a baseline. Four buttons held a compositor layer for nothing. */
}
.btn .icon{width:1.15em;height:1.15em;flex:none;}

.btn--gold{
  --btn-bg:linear-gradient(175deg,var(--gold-400),var(--gold-600));
  --btn-fg:var(--on-gold);
  background-image:var(--btn-bg);
  box-shadow:var(--shadow-md);
}
/* restrained highlight sweep, not a neon shine */
.btn--gold::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,transparent 35%,var(--sweep) 50%,transparent 65%);
  transform:translateX(-120%);
}
.btn--gold:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);}
.btn--gold:hover::after{transform:translateX(120%);transition:transform .7s var(--ease-out);}
.btn--gold:active{transform:translateY(0) scale(.975);box-shadow:var(--shadow-sm);}

.btn--ghost{
  border:1px solid var(--line-strong);
  background:rgba(255,255,255,.04);
  backdrop-filter:blur(8px);
}
.btn--ghost:hover{border-color:var(--gold-500);background:rgba(216,167,74,.1);}
.btn--ghost:active{transform:scale(.975);}

.btn--sm{padding:.66rem 1.15rem;font-size:var(--fs-md);min-height:2.75rem;}
.btn--lg{padding:1.1rem 2.15rem;font-size:clamp(1rem,.95rem + .35vw,1.18rem);}

/* ---------- 5. Header ---------- */
.header{
  position:fixed;inset-inline:0;top:0;z-index:100;
  /* only non-layout properties animate here: a padding transition on a sticky
     header relayouts its subtree on every scroll threshold crossing */
  transition:background-color .4s var(--ease),border-color .4s var(--ease),
             backdrop-filter .4s var(--ease);
  border-bottom:1px solid transparent;
  padding-block:clamp(.7rem,1.4vw,1.05rem);
}
.header.is-stuck{
  /* opaque enough to stand alone: the backdrop-filter below is an enhancement,
     added only where a device is likely to composite it for free */
  background:rgba(8,15,38,.94);
  border-bottom-color:var(--line);
}
@media (min-width:961px){
  .header.is-stuck{
    background:rgba(8,15,38,.82);
    backdrop-filter:blur(16px) saturate(1.3);
  }
}
/* the approved comp seats the emblem on the left and the CTA on the right,
   with the nav reading right-to-left between them */
.header__inner{
  width:100%;max-width:var(--shell);margin-inline:auto;
  padding-inline:var(--gutter);
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(1rem,3vw,2.5rem);
}
.header__inner .header__actions{order:1;}
.header__inner .nav{order:2;}
.header__inner .brand{order:3;}

.brand{display:flex;align-items:center;gap:.7rem;flex:none;min-height:2.75rem;}
.brand__mark{width:auto;height:2.6rem;}
.brand__text{display:flex;flex-direction:column;line-height:1.1;}
.brand__name{font-family:var(--display);font-weight:700;font-size:var(--fs-brand);letter-spacing:.01em;}
.brand__sub{font-size:var(--fs-3xs);color:var(--gold-400);letter-spacing:.06em;}

.nav__list{display:flex;align-items:center;gap:clamp(1rem,2.2vw,2rem);}
.nav__link{
  position:relative;
  font-size:var(--fs-md);font-weight:500;
  color:var(--muted);
  padding-block:.35rem;
  transition:color .25s var(--ease);
}
.nav__link::after{
  content:"";position:absolute;inset-inline:0;bottom:0;height:2px;
  background:var(--gold-500);border-radius:var(--r-hair);
  transform:scaleX(0);transform-origin:center;
  transition:transform .35s var(--ease-out);
}
.nav__link:hover,.nav__link.is-active{color:var(--ivory);}
.nav__link:hover::after,.nav__link.is-active::after{transform:scaleX(1);}

.header__actions{display:flex;align-items:center;gap:.75rem;flex:none;}

.nav-toggle{
  display:none;width:2.75rem;height:2.75rem;
  border:1px solid var(--line-strong);border-radius:var(--r-sm);
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
}
.nav-toggle__bar{
  display:block;width:19px;height:2px;border-radius:var(--r-hair);background:var(--ivory);
  transition:transform .32s var(--ease-out),opacity .2s var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ---------- 6. Drawer ---------- */
.drawer{
  position:fixed;inset:0;z-index:99;
  /* no backdrop-filter: at 97% opacity nothing of the page shows through it,
     so the blur cost a full-screen composite for an invisible effect */
  background:rgba(6,11,28,.985);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2.5rem;padding:6rem var(--gutter) 3rem;
  opacity:0;transition:opacity .3s var(--ease);
}
/* a class-level display beats the UA [hidden] rule — without this the closed
   drawer stays in the layer and eats every click on the page */
.drawer[hidden]{display:none;}
.drawer:not([hidden]){opacity:1;}
.drawer__nav{display:flex;flex-direction:column;align-items:center;gap:1.6rem;}
.drawer__link{
  font-family:var(--display);font-size:var(--fs-drawer);font-weight:600;
  color:var(--ivory);
  opacity:0;transform:translateY(14px);
}
.drawer:not([hidden]) .drawer__link{
  animation:drawerIn .5s var(--ease-out) forwards;
  animation-delay:calc(var(--i,0) * 60ms + 80ms);
}
@keyframes drawerIn{to{opacity:1;transform:none;}}

/* ---------- 7. Hero ---------- */
.hero{
  position:relative;
  min-height:max(44rem,100svh);
  display:flex;align-items:flex-end;
  padding-top:clamp(5.5rem,11vh,7.5rem);
  overflow:hidden;
  background:
    radial-gradient(120% 80% at 50% 0%,var(--ink-700) 0%,transparent 55%),
    linear-gradient(180deg,var(--ink-800) 0%,var(--ink-850) 68%,var(--ink-900) 100%);
}
.hero__bg{position:absolute;inset:0;pointer-events:none;}

/* warm library bokeh from the approved comp, rebuilt in CSS */
.hero__glow{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;}
.hero__glow--a{
  inset-inline-end:-8%;top:8%;width:46rem;height:34rem;
  background:radial-gradient(circle,rgba(47,93,203,.55),transparent 68%);
}
.hero__glow--c{
  inset-inline-end:26%;bottom:-14%;width:40rem;height:26rem;
  background:radial-gradient(circle,rgba(33,73,166,.5),transparent 70%);
}
/* the comp hangs a horse banner in the empty left zone; this is its echo */
.hero__watermark{
  position:absolute;inset-inline-end:-2.5rem;top:15%;
  width:clamp(11rem,19vw,18rem);height:auto;
  opacity:.055;filter:blur(.3px);
}

.hero__inner{
  position:relative;
  width:100%;max-width:var(--shell);
  margin-inline:auto;padding-inline:var(--gutter);
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
  align-items:end;
  gap:clamp(1rem,2.5vw,2rem);
}
/* comp places the portrait on the right, the copy to its left.
   grid-row is explicit: auto-placement will not backtrack to fill column 1
   of row 1 once the copy has claimed column 2. */
.hero__figure{grid-column:1;grid-row:1;}
.hero__copy{
  grid-column:2;grid-row:1;
  align-self:center;
  width:100%;min-width:0;
  padding-bottom:clamp(1.5rem,5vh,3.5rem);
}

.hero__name{
  font-family:var(--display);
  font-size:clamp(1.05rem,.95rem + .7vw,1.5rem);
  font-weight:600;
  color:var(--gold-400);
  letter-spacing:.02em;
  margin-bottom:.6rem;
}
.hero__title{display:flex;flex-direction:column;align-items:flex-start;gap:.25rem;margin-bottom:1.1rem;}
.hero__identity{display:flex;align-items:center;gap:clamp(.8rem,1.6vw,1.35rem);max-width:100%;}
.hero__lockup{
  width:auto;
  height:clamp(5.2rem,8.5vw,8rem);
  filter:drop-shadow(0 16px 36px rgba(0,0,0,.55));
}
.hero__word{
  font-family:var(--display);font-weight:700;
  font-size:clamp(3.4rem,5.8vw,6rem);
  line-height:1;color:var(--ivory);
  text-shadow:0 8px 28px rgba(0,0,0,.35);
}
.hero__lockup-sub{
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.25rem,1rem + 1.1vw,2.1rem);
  color:var(--gold-400);
  letter-spacing:.02em;
  padding-inline-start:clamp(3.7rem,10vw,9rem);
}
.hero__phrase{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1.6rem,1.1rem + 2.1vw,2.7rem);
  line-height:1.25;
  margin-bottom:1rem;
  color:var(--ivory);
  text-shadow:0 2px 20px rgba(5,9,26,.7);
}
.hero__lede{
  color:var(--muted);
  max-width:34ch;
  font-size:clamp(.98rem,.94rem + .25vw,1.1rem);
  margin-bottom:1.9rem;
}

.hero__figure{position:relative;display:flex;justify-content:center;align-items:flex-end;min-width:0;}
.hero__portrait{
  position:relative;z-index:1;
  width:auto;max-width:100%;
  height:min(88svh,56rem);
  object-fit:contain;object-position:bottom center;
}
/* grounding shadow so the cutout sits in the scene */
.hero__pedestal{
  position:absolute;bottom:-1rem;left:50%;transform:translateX(-50%);
  width:78%;height:5.5rem;
  background:radial-gradient(ellipse at center,var(--contact-shadow),transparent 70%);
  filter:blur(14px);
}

/* ---------- 8. Sections ---------- */
.section{position:relative;padding-block:var(--section-y);}
.section--message{
  background:linear-gradient(180deg,var(--ink-850),var(--ink-800) 55%,var(--ink-750));
  overflow:hidden;
}
.section--about{
  background:linear-gradient(180deg,var(--ink-800),var(--ink-750));
}
.section--contact{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--ink-750),var(--ink-900));
}

/* ---------- 9. Message / video ---------- */
.player{margin:0;}
.player__frame{
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
  background:var(--ink-900);
  box-shadow:var(--shadow-lg);
}
.player__video{
  width:100%;height:100%;object-fit:contain;
  background:var(--ink-900) url("assets/logo/alfares-logo-gold.png") center / auto 30% no-repeat;
}
.player__sound{
  display:block;
  min-height:2.75rem;
  margin:1rem auto 0;
  padding:.3rem .9rem;
  color:var(--muted);
  border-bottom:1px solid var(--line-strong);
  font-size:var(--fs-md);
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.player__sound:hover,.player__sound[aria-pressed="true"]{color:var(--gold-300);border-color:var(--gold-500);}
.player__fallback{
  position:absolute;inset-inline:1.25rem;bottom:4rem;
  padding:.7rem 1rem;border-radius:var(--r-sm);
  background:rgba(6,11,28,.9);border:1px solid var(--line);
  font-size:var(--fs-sm);color:var(--muted);text-align:center;
}
.player__fallback[hidden]{display:none;}

/* ---------- 10. About ---------- */
.section--about .container{
  display:grid;
  grid-template-columns:minmax(16rem,.75fr) minmax(0,1.6fr);
  gap:clamp(2rem,6vw,6rem);
  align-items:start;
}
.section--about .section__head{margin:0;}
.about__intro{
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.1rem,.98rem + .6vw,1.5rem);
  line-height:1.6;color:var(--muted);
  margin-top:1rem;
  max-width:22ch;
}
.about__inner{min-width:0;}
.record{border-block-start:1px solid var(--line);}
.record__row{
  position:relative;
  padding:1.25rem 0 1.4rem;
  border-block-end:1px solid var(--line);
}
.record__title{
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.08rem,1rem + .35vw,1.32rem);
  line-height:1.5;
}
.record__meta,.record__note{
  margin-top:.35rem;
  font-size:clamp(.9rem,.86rem + .18vw,1rem);
  color:var(--muted);
  line-height:1.75;
}
.record__row--peak{padding-inline-start:1.35rem;padding-block:1.8rem 1.9rem;}
.record__row--peak::before{
  content:"";position:absolute;inset-block:1.5rem;inset-inline-start:0;width:2px;
  background:var(--gold-400);
}
.record__row--peak .record__title{
  color:var(--gold-300);
  font-size:clamp(1.35rem,1.02rem + 1vw,1.85rem);
}
.record__row--peak .record__meta{color:var(--ivory);}
.record__note{max-width:52ch;}
/* ---------- 12. Contact ---------- */
/* one action carries this section; everything else is a quiet text link */
.contact__primary{text-align:center;}
.contact__primary .btn{max-width:100%;}
.contact__hint{
  margin-top:1.1rem;
  font-size:var(--fs-sm);color:var(--muted-dim);
}
.contact__hint a{
  /* the number is a real conversion path, not decoration: give it a thumb-sized box */
  display:inline-block;padding-block:.35rem;
  color:var(--muted);
  text-decoration:underline;text-decoration-color:var(--line-strong);
  text-underline-offset:.22em;text-decoration-thickness:1px;
  transition:color .25s var(--ease),text-decoration-color .25s var(--ease);
}
.contact__hint a:hover{color:var(--gold-400);text-decoration-color:var(--gold-500);}

.contact__quiet{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:.6rem clamp(1.25rem,3vw,2.25rem);
  margin-top:clamp(2.5rem,5vw,3.5rem);
}
.contact__quiet a{
  display:inline-flex;align-items:center;min-height:2.75rem;
  font-size:var(--fs-md);color:var(--muted-dim);
  transition:color .25s var(--ease);
}
.contact__quiet a:hover{color:var(--gold-400);}

/* ---------- 13. Footer ---------- */
.footer{
  background:var(--ink-900);
  border-top:1px solid var(--line);
  padding-block:clamp(2.5rem,5vw,3.5rem);
}
.footer__inner{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:clamp(1.25rem,3vw,2.5rem);
}
.footer__inner .footer__legal{order:1;}
.footer__inner .footer__nav{order:2;}
.footer__inner .brand--footer{order:3;}
/* negative margin keeps the visual rhythm while the links themselves grow to a
   44px tap target — the row reads exactly as before, it is just reachable */
.footer__nav{
  display:flex;flex-wrap:wrap;
  gap:calc(clamp(.9rem,2vw,1.75rem) - 1rem) clamp(.9rem,2vw,1.75rem);
  margin-block:-.5rem;
}
.footer__nav a{
  display:inline-flex;align-items:center;min-height:2.75rem;
  font-size:var(--fs-md);color:var(--muted);
  transition:color .25s var(--ease);
}
.footer__nav a:hover{color:var(--gold-400);}
.footer__legal{text-align:start;}
.footer__copy{font-size:var(--fs-sm);color:var(--muted);}
.footer__credit{margin-top:.3rem;font-size:var(--fs-2xs);color:var(--muted-dim);letter-spacing:.01em;}
.footer__credit a{
  display:inline-block;padding-block:.35rem;
  color:var(--muted);
  /* underline-offset, not a border: the descenders in "Designed" clear it */
  text-decoration:underline;text-decoration-color:var(--line-strong);
  text-underline-offset:.22em;text-decoration-thickness:1px;
  transition:color .25s var(--ease),text-decoration-color .25s var(--ease);
}
.footer__credit a:hover{color:var(--gold-400);text-decoration-color:var(--gold-500);}
.brand--footer .brand__mark{height:2.9rem;}

/* ---------- 15. Scroll reveal ---------- */
/* gated on .js-reveal: without JS every section renders plainly visible */
.js-reveal [data-reveal]{
  opacity:0;transform:translateY(22px);
  transition:opacity .75s var(--ease-out),transform .75s var(--ease-out);
  transition-delay:calc(var(--i,0) * 80ms);
}
.js-reveal [data-reveal].is-in{opacity:1;transform:none;}

/* hero copy cascades on load rather than on scroll */
.js-reveal .hero__copy [data-reveal]{transform:translateY(26px);}

/* ---------- 16. Responsive ---------- */
@media (max-width:960px){
  .nav{display:none;}
  .nav-toggle{display:flex;}
  /* NO margin-inline-start:auto here — in RTL that is the right edge, so an auto
     margin absorbs the free space and packs the actions against the brand on the
     left. justify-content:space-between on .header__inner already does this. */

  .hero{min-height:auto;padding-bottom:clamp(2rem,6vh,3.5rem);}
  .hero__inner{
    grid-template-columns:minmax(0,1fr);
    gap:0;
    justify-items:center;
    text-align:center;
  }
  .hero__copy{grid-column:1;grid-row:1;padding-bottom:2rem;}
  .hero__figure{grid-column:1;grid-row:2;}
  .hero__title{align-items:center;}
  .hero__identity{justify-content:center;}
  .hero__lockup-sub{padding-inline-start:0;}
  .hero__lede{margin-inline:auto;}
  .hero__portrait{max-height:min(52vh,26rem);}

  .section--about .container{grid-template-columns:minmax(0,1fr);gap:2.5rem;}
  .section--about .section__head{margin:0;}
  .about__intro{max-width:none;}
  .lead{max-width:none;}

  .footer__inner{flex-direction:column;align-items:center;text-align:center;}
  .footer__inner .brand--footer{order:1;}
  .footer__inner .footer__nav{order:2;justify-content:center;}
  .footer__inner .footer__legal{order:3;text-align:center;}
}

@media (max-width:640px){
  .brand__mark{height:2.2rem;}
  .brand__name{font-size:var(--fs-brand-sm);}
  .brand__sub{font-size:var(--fs-3xs);letter-spacing:.02em;}
  .header__actions .btn--ghost{display:none;}
  .hero__lockup{height:clamp(4.6rem,18vw,6rem);}
  .hero__word{font-size:clamp(3rem,13vw,4.5rem);}
  .hero__lede{max-width:32ch;}
  .player__frame{aspect-ratio:4/3;}
  .player__video{object-fit:contain;}
  .contact__quiet{gap:.4rem 1.25rem;}
}

/* landscape phones: keep the portrait from eating the viewport */
@media (max-height:520px) and (orientation:landscape){
  .hero__portrait{max-height:min(60vh,20rem);}
}

/* ---------- 17. Reduced motion ---------- */
/* Reduced motion means "stop moving things", not "stop responding". A blanket
   transition-duration:.01ms kill also flattens colour, border and shadow
   feedback — the signals that tell a visitor a control is live. So movement is
   removed target by target here, and every non-motion response is kept. */
@media (prefers-reduced-motion:reduce){
  html:focus-within{scroll-behavior:auto;}
  html{scroll-behavior:auto;}

  /* revealed content is simply present */
  .js-reveal [data-reveal]{opacity:1;transform:none;}
  .drawer:not([hidden]) .drawer__link{animation:none;opacity:1;transform:none;}
  .drawer{transition:none;}

  /* the CTA sweep is pure decoration travelling across the face */
  .btn--gold::after{display:none;}

  /* KEPT: colour, border, background and shadow still transition, so hover,
     focus and press remain legible. Only the travel is dropped.
     `.js-reveal [data-reveal]` is listed here too, and deliberately: the rows
     that animate in are the same elements that respond to hover, and without it
     the reveal rule's higher specificity would strip their feedback. */
  .btn,.record__row,.player__frame,.player__sound,.skip-link,
  .contact__quiet a,.contact__hint a,
  .js-reveal [data-reveal]{
    transition-property:color,background-color,border-color,box-shadow,opacity,
                        text-decoration-color,outline-color;
    transition-duration:.2s;
    transition-delay:0s;
  }

  /* motion neutralised at every state that used to travel */
  .btn:hover,.btn:active,
  .btn--gold:hover,.btn--gold:active,
  .btn--ghost:active,
  .player__sound:hover{transform:none;}

  /* the nav underline appears rather than wipes */
  .nav__link::after{transition:none;}
  .skip-link{transition:none;}
}