/* ============================================================
   Realm of Aeris — site styles
   ============================================================ */

:root{
  --ink:            #0a1219;
  --panel:          rgba(13,22,30,.62);
  --panel-hi:       rgba(18,29,38,.72);

  --gold:           #c79b4b;
  --gold-soft:      #a8823c;
  --gold-line:      rgba(199,155,75,.55);
  --gold-line-dim:  rgba(199,155,75,.26);
  --cream:          #f2e7cf;
  --heading:        #ecdcb8;
  --body:           #b3ab99;

  --wrap:           1180px;
  --nav-h:          58px;

  --font-display:  'Cinzel', 'Trajan Pro', Georgia, serif;
  --font-body:     'EB Garamond', Georgia, 'Times New Roman', serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 16px); }

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--body);
  background-color:var(--ink);
  /* static background — stays put while the page scrolls */
  background-image:url('../assets/background.webp');
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }

:where(a,button):focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
}

.wrap{ width:min(var(--wrap), calc(100% - 48px)); margin-inline:auto; }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  height:var(--nav-h);
  background:linear-gradient(to bottom, rgba(7,12,17,.96), rgba(7,12,17,.86));
  border-bottom:1px solid rgba(199,155,75,.18);
  backdrop-filter:blur(6px);
}
.nav__inner{
  height:100%;
  width:min(1340px, calc(100% - 40px));
  margin-inline:auto;
  display:flex; align-items:center; gap:24px;
}
.nav__logo{ flex:0 0 auto; }
.nav__logo img{ height:30px; width:auto; filter:drop-shadow(0 2px 6px rgba(0,0,0,.85)); }

.nav__menu{
  flex:1 1 auto;
  display:flex; align-items:center; justify-content:flex-end; gap:clamp(18px,2.6vw,38px);
}
.nav__menu > a{
  font-family:var(--font-display);
  font-size:12.5px; font-weight:500; letter-spacing:.13em; text-transform:uppercase;
  color:#cdc3ae; padding:6px 0; position:relative;
  transition:color .25s ease;
}
.nav__menu > a::after{
  content:''; position:absolute; left:50%; right:50%; bottom:0; height:1px;
  background:var(--gold); transition:left .25s ease, right .25s ease;
}
.nav__menu > a:hover{ color:var(--cream); }
.nav__menu > a:hover::after,
.nav__menu > a.is-active::after{ left:0; right:0; }
.nav__menu > a.is-active{ color:var(--gold); }

.nav__wishlist{
  display:inline-flex; align-items:center; gap:9px;
  color:var(--cream) !important;
}
.nav__wishlist::after{ display:none; }
.nav__steam{ width:17px; height:17px; fill:currentColor; }
.nav__wishlist:hover .nav__steam{ fill:var(--gold); }

.nav__burger{
  display:none; flex:0 0 auto;
  width:38px; height:32px; padding:6px; background:none; border:0; cursor:pointer;
}
.nav__burger span{
  display:block; height:1.5px; background:var(--cream); margin:5px 0;
  transition:transform .3s ease, opacity .3s ease;
}
.nav.is-open .nav__burger span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.nav.is-open .nav__burger span:nth-child(2){ opacity:0; }
.nav.is-open .nav__burger span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; isolation:isolate;
  min-height:100svh;
  display:flex; align-items:center; justify-content:center;
  padding:calc(var(--nav-h) + 40px) 24px 90px;
  overflow:hidden;
}
.hero__bg{
  position:absolute; inset:0; z-index:-3;
  background:url('../assets/hero.webp') center 45% / cover no-repeat;
}
.hero__vignette{
  position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(120% 85% at 50% 35%, rgba(5,9,13,0) 30%, rgba(5,9,13,.55) 78%, rgba(5,9,13,.86) 100%),
    linear-gradient(to bottom, rgba(5,9,13,.62) 0%, rgba(5,9,13,.12) 26%, rgba(5,9,13,.35) 70%, rgba(7,11,16,.92) 100%);
}
.hero__fade{
  position:absolute; left:0; right:0; bottom:0; height:180px; z-index:-1;
  background:linear-gradient(to bottom, rgba(7,11,16,0), var(--ink) 92%);
  pointer-events:none;
}

.hero__content{
  width:min(980px, 100%);
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.hero__logo{
  margin:0; width:min(500px, 76%);
  transform:translateY(-10vh);
}
.hero__logo img{ width:100%; height:auto; filter:drop-shadow(0 8px 34px rgba(0,0,0,.75)); }

.hero__kicker{
  margin:clamp(18px,3vh,32px) 0 0;
  font-family:var(--font-display);
  font-size:clamp(13px,1.35vw,17px);
  font-weight:500; letter-spacing:.34em; text-transform:uppercase;
  color:#e3d8c2;
  text-shadow:0 2px 12px rgba(0,0,0,.9);
}
.hero__cta{ margin-top:clamp(28px,4.6vh,52px); }

/* ---- steam button (asset with baked-in text) ---- */
.steam-btn{ display:block; width:min(440px, 80vw); transition:transform .3s ease, filter .3s ease; }
.steam-btn img{ width:100%; height:auto; filter:drop-shadow(0 4px 20px rgba(0,0,0,.6)); }
.steam-btn:hover{ transform:translateY(-3px); filter:brightness(1.12); }
.steam-btn--lg{ width:min(620px, 90%); margin:0 auto; }

/* ============================================================
   SHARED SECTION FURNITURE
   ============================================================ */
main{
  position:relative;
  background:linear-gradient(to bottom, rgba(8,14,20,.90), rgba(8,14,20,.84) 40%, rgba(8,14,20,.90));
}

.section{ padding:clamp(54px,7vw,90px) 0; }
.section--about{ padding-bottom:clamp(30px,4vw,50px); text-align:center; }
.section--wishlist{ padding-top:clamp(20px,3vw,34px); padding-bottom:clamp(60px,7vw,96px); }

/* section heading with flourish rules on both sides */
.rule-title{
  display:flex; align-items:center; justify-content:center; gap:clamp(14px,2.4vw,30px);
  margin:0;
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(22px,2.9vw,34px);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--heading);
  text-shadow:0 2px 14px rgba(0,0,0,.6);
}
.rule-title > span{ flex:0 0 auto; white-space:nowrap; }
.rule-title::before,
.rule-title::after{
  content:''; flex:1 1 auto; max-width:430px; height:26px;
  background:url('../assets/flourish.webp') no-repeat center/100% 100%;
  opacity:.9;
}
.rule-title::before{ transform:scaleX(-1); }

/* ============================================================
   ABOUT
   ============================================================ */
.about__text{
  margin:clamp(26px,3.4vw,38px) auto 0;
  max-width:760px;
  font-size:clamp(16px,1.4vw,19px);
  line-height:1.75;
  color:#c8bda6;
  text-align:center;
}
/* each sentence is its own block, so a sentence that wraps stays centred */
.about__text .line{
  display:block;
  text-wrap:balance;
}
.about__text .line + .line{ margin-top:.5em; }

/* ============================================================
   KEY FEATURES
   ============================================================ */
.features{
  margin-top:clamp(34px,4.4vw,52px);
  display:flex; flex-direction:column; gap:clamp(20px,2.4vw,28px);
}

.feat{
  display:grid; grid-template-columns:1fr 1fr;
  border:1px solid var(--gold-line-dim);
  background:var(--panel);
  box-shadow:0 14px 40px rgba(0,0,0,.35);
  overflow:hidden;
  transition:border-color .35s ease, transform .35s ease;
}
.feat:hover{ border-color:var(--gold-line); transform:translateY(-2px); }
.feat--rev .feat__img{ order:2; }

.feat__img{ position:relative; overflow:hidden; min-height:clamp(250px,23vw,330px); }
.feat__img img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .6s ease;
}
.feat:hover .feat__img img{ transform:scale(1.04); }
.feat__img::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to right, rgba(9,15,21,.05), rgba(9,15,21,.55));
}
.feat--rev .feat__img::after{ background:linear-gradient(to left, rgba(9,15,21,.05), rgba(9,15,21,.55)); }

.feat__body{ padding:clamp(24px,3.2vw,44px); display:flex; flex-direction:column; justify-content:center; }
.feat__body h3{
  margin:0 0 16px;
  font-family:var(--font-display);
  font-size:clamp(17px,1.75vw,22px);
  font-weight:600; letter-spacing:.07em;
  color:var(--gold);
}
.feat__body p{
  margin:0;
  font-size:clamp(15.5px,1.35vw,18px);
  line-height:1.8;
  color:var(--body);
  max-width:40ch;
}

/* ============================================================
   GAME MECHANICS
   ============================================================ */
.section__hint{
  margin:18px 0 0;
  text-align:center;
  font-family:var(--font-body); font-style:italic;
  font-size:clamp(13.5px,1.15vw,16px);
  color:var(--gold-soft);
  opacity:.85;
}

.mechs{
  list-style:none; margin:clamp(30px,4vw,46px) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(14px,2vw,28px);
}
.mech{ display:flex; }
.mech__face{
  flex:1 1 auto;
  display:flex; flex-direction:column; align-items:center; gap:16px;
  padding:0; border:0; background:none; cursor:pointer;
  perspective:900px;
}
/* the icon art carries its own frame — no extra border */
.mech__face img{
  width:100%; height:auto; aspect-ratio:9/8; object-fit:contain;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.55));
  transition:transform .45s cubic-bezier(.3,.7,.4,1), filter .45s ease;
}
.mech__face:hover img,
.mech__face:focus-visible img{
  transform:translateY(-5px) rotateY(9deg);
  filter:drop-shadow(0 18px 32px rgba(0,0,0,.65)) brightness(1.07);
}
.mech__face:active img{ transform:translateY(-2px) rotateY(4deg) scale(.985); }

.mech__label{
  font-family:var(--font-body); font-style:italic;
  font-size:clamp(13px,1.05vw,15.5px);
  letter-spacing:.03em;
  color:var(--gold-soft);
  text-align:center; text-wrap:balance;
  border-bottom:1px solid transparent;
  transition:color .3s ease, border-color .3s ease;
}
.mech__face:hover .mech__label,
.mech__face:focus-visible .mech__label{ color:var(--cream); border-bottom-color:var(--gold-line); }

/* ============================================================
   MECHANIC SCROLL — the card flips over and unfurls as parchment
   ============================================================ */
.scroll{
  position:fixed; inset:0; z-index:110;
  display:grid; place-items:center;
  padding:clamp(14px,3.5vw,48px);
  background:rgba(4,7,10,.9);
  backdrop-filter:blur(5px);
  opacity:0; transition:opacity .35s ease;
  perspective:1800px;
}
.scroll[hidden]{ display:none; }
.scroll.is-in{ opacity:1; }

.scroll__sheet{
  position:relative;
  width:min(800px, 100%);
  max-height:min(86svh, 900px);
  display:flex; flex-direction:column;
  padding:clamp(38px,5vw,64px) clamp(34px,5vw,68px) clamp(26px,3.4vw,40px);
  color:#3b2a17;
  background:url('../assets/parchment.webp') center/100% 100% no-repeat;
  filter:drop-shadow(0 34px 70px rgba(0,0,0,.75));
  transform-origin:center center;
  backface-visibility:hidden;
}
.scroll.is-in .scroll__sheet{ animation:sheetUnfurl .72s cubic-bezier(.2,.7,.3,1) both; }

@keyframes sheetUnfurl{
  0%{
    opacity:0;
    transform:translate(var(--fx,0px), var(--fy,0px)) scale(.22) rotateY(-180deg);
  }
  55%{ opacity:1; }
  100%{
    opacity:1;
    transform:translate(0,0) scale(1) rotateY(0deg);
  }
}

.scroll__title{
  margin:0 0 6px;
  font-family:var(--font-display);
  font-size:clamp(21px,2.6vw,31px);
  font-weight:600; letter-spacing:.06em;
  color:#4a3213;
  text-align:center;
  text-wrap:balance;
}
.scroll__title::after{
  content:''; display:block;
  width:min(240px,60%); height:1px; margin:16px auto 0;
  background:linear-gradient(to right, transparent, rgba(94,66,28,.65), transparent);
}

.scroll__body{
  overflow-y:auto; overscroll-behavior:contain;
  margin:clamp(16px,2vw,24px) -6px 0; padding:0 6px;
  scrollbar-width:thin; scrollbar-color:rgba(94,66,28,.45) transparent;
}
/* fade the last line while there is more to read */
.scroll__body.has-more{
  -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 34px), transparent);
          mask-image:linear-gradient(to bottom, #000 calc(100% - 34px), transparent);
}
.scroll__body::-webkit-scrollbar{ width:6px; }
.scroll__body::-webkit-scrollbar-thumb{ background:rgba(94,66,28,.45); border-radius:3px; }

.scroll__list{ margin:0; display:flex; flex-direction:column; gap:clamp(14px,1.8vw,20px); }
.scroll__list .entry{ display:block; }
.scroll__list dt{
  font-family:var(--font-display);
  font-size:clamp(14px,1.25vw,16.5px);
  font-weight:600; letter-spacing:.05em;
  color:#5a3d16;
  margin-bottom:4px;
}
.scroll__list dd{
  margin:0;
  font-size:clamp(15px,1.3vw,17.5px);
  line-height:1.66;
  color:#4a3a26;
}

.scroll__foot{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  margin-top:clamp(18px,2.4vw,28px);
  padding-top:clamp(14px,1.8vw,20px);
  border-top:1px solid rgba(94,66,28,.28);
}
.scroll__step{
  display:inline-flex; align-items:center; gap:9px;
  padding:6px 4px; border:0; background:none; cursor:pointer;
  font-family:var(--font-body); font-style:italic;
  font-size:clamp(13px,1.1vw,15px);
  color:#6b4a1d;
  transition:color .25s ease, transform .25s ease;
  text-align:left;
}
.scroll__step--next{ text-align:right; }
.scroll__step svg{ width:16px; height:16px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.scroll__step:hover{ color:#3b2a17; }
.scroll__step:hover svg{ transform:none; }
.scroll__step--prev:hover{ transform:translateX(-3px); }
.scroll__step--next:hover{ transform:translateX(3px); }

.scroll__close{
  position:absolute; top:clamp(14px,2vw,22px); right:clamp(14px,2vw,22px);
  width:38px; height:38px; border-radius:50%;
  border:1px solid rgba(94,66,28,.4);
  background:rgba(255,246,226,.35);
  display:grid; place-items:center; cursor:pointer;
  transition:background .25s ease, border-color .25s ease;
}
.scroll__close svg{ width:17px; height:17px; fill:none; stroke:#5a3d16; stroke-width:1.9; stroke-linecap:round; }
.scroll__close:hover{ background:rgba(255,246,226,.7); border-color:rgba(94,66,28,.7); }
.scroll__close:focus-visible{ outline-color:#5a3d16; }
.scroll__step:focus-visible{ outline-color:#5a3d16; }

/* ============================================================
   GALLERY CAROUSEL
   ============================================================ */
.carousel{
  position:relative;
  margin-top:clamp(30px,4vw,46px);
  padding-bottom:34px;
}
.carousel__viewport{ overflow:hidden; }
.carousel__track{
  list-style:none; margin:0; padding:0;
  display:flex; gap:var(--gap, 16px);
  transition:transform .55s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
.carousel.is-dragging .carousel__track{ transition:none; }

.slide{ flex:0 0 var(--slide-w, 25%); }
.slide > button{
  display:block; width:100%; padding:0; cursor:zoom-in;
  border:1px solid var(--gold-line-dim);
  background:none;
  overflow:hidden;
  transition:border-color .35s ease, transform .35s ease;
}
.slide > button:hover{ border-color:var(--gold); transform:translateY(-3px); }
.slide img{
  width:100%; aspect-ratio:16/9; object-fit:cover;
  transition:transform .6s ease, filter .4s ease;
  -webkit-user-drag:none; user-select:none;
}
.slide > button:hover img{ transform:scale(1.06); filter:brightness(1.1); }

.carousel__nav{
  position:absolute; top:calc(50% - 17px); transform:translateY(-50%);
  z-index:5;
  width:46px; height:46px; border-radius:50%;
  border:1px solid var(--gold-line);
  background:rgba(8,13,18,.82);
  display:grid; place-items:center; cursor:pointer;
  transition:background .3s ease, border-color .3s ease, opacity .3s ease;
}
.carousel__nav svg{ width:20px; height:20px; fill:none; stroke:var(--cream); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.carousel__nav:hover{ background:rgba(199,155,75,.28); border-color:var(--gold); }
.carousel__nav--prev{ left:-14px; }
.carousel__nav--next{ right:-14px; }
.carousel__nav[disabled]{ opacity:.28; cursor:default; }

.carousel__dots{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; justify-content:center; gap:9px;
}
.carousel__dots button{
  width:8px; height:8px; padding:0; border-radius:50%;
  border:1px solid var(--gold-line);
  background:transparent; cursor:pointer;
  transition:background .3s ease, transform .3s ease;
}
.carousel__dots button[aria-selected="true"]{ background:var(--gold); transform:scale(1.25); }

/* ---- lightbox ---- */
.lightbox{
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center; gap:clamp(6px,2vw,26px);
  padding:clamp(16px,4vw,54px);
  background:rgba(4,7,10,.94);
  backdrop-filter:blur(4px);
  opacity:0; transition:opacity .3s ease;
}
.lightbox[hidden]{ display:none; }
.lightbox.is-in{ opacity:1; }

.lightbox__stage{
  margin:0; flex:1 1 auto; min-width:0;
  display:flex; flex-direction:column; align-items:center; gap:16px;
}
.lightbox__stage img{
  max-width:100%; max-height:78svh; width:auto; height:auto;
  border:1px solid var(--gold-line);
  box-shadow:0 30px 80px rgba(0,0,0,.7);
}
.lightbox__stage figcaption{
  font-family:var(--font-display);
  font-size:12.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-soft);
  font-variant-numeric:tabular-nums;
}

.lightbox__nav,
.lightbox__close{
  flex:0 0 auto;
  width:50px; height:50px; border-radius:50%;
  border:1px solid var(--gold-line);
  background:rgba(10,16,22,.7);
  display:grid; place-items:center; cursor:pointer;
  transition:background .3s ease, border-color .3s ease;
}
.lightbox__nav svg,
.lightbox__close svg{ width:22px; height:22px; fill:none; stroke:var(--cream); stroke-width:1.8; stroke-linecap:round; }
.lightbox__nav:hover,
.lightbox__close:hover{ background:rgba(199,155,75,.28); border-color:var(--gold); }
.lightbox__close{ position:absolute; top:clamp(14px,3vw,30px); right:clamp(14px,3vw,30px); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{
  position:relative;
  background:rgba(5,9,13,.9);
  border-top:1px solid rgba(199,155,75,.2);
  padding:clamp(38px,4.6vw,56px) 0 26px;
}
.footer__inner{ display:flex; justify-content:flex-start; align-items:flex-start; gap:clamp(48px,11vw,170px); flex-wrap:wrap; }
.footer__brand img{ height:74px; width:auto; filter:drop-shadow(0 2px 6px rgba(0,0,0,.8)); }
.footer__social{ display:flex; gap:16px; margin-top:20px; }
.footer__social a{ color:#b9ae98; transition:color .25s ease, transform .25s ease; }
.footer__social a:hover{ color:var(--gold); transform:translateY(-2px); }
.footer__social svg{ width:19px; height:19px; fill:currentColor; }

.footer__cols{ display:flex; gap:clamp(38px,6vw,96px); padding-top:6px; }
.footer__cols h4{
  margin:0 0 14px;
  font-family:var(--font-display);
  font-size:12.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold);
}
.footer__cols a{
  display:block; margin-bottom:9px;
  font-size:15px; color:#a89d89;
  transition:color .25s ease;
}
.footer__cols a:hover{ color:var(--cream); }

.footer__copy{
  margin:clamp(30px,4vw,44px) 0 0;
  text-align:center;
  font-size:13.5px; letter-spacing:.04em;
  color:#7d7566;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .rule-title::before, .rule-title::after{ max-width:150px; }
  .feat__body p{ max-width:none; }
  .mechs{ grid-template-columns:repeat(3,1fr); row-gap:30px; }
  .scroll__sheet{ width:min(700px, 100%); }
  .carousel__nav--prev{ left:-6px; }
  .carousel__nav--next{ right:-6px; }
}

@media (max-width:860px){
  :root{ --nav-h:54px; }

  .nav__inner{ width:calc(100% - 28px); gap:12px; }
  .nav__logo img{ height:24px; }
  .nav__burger{ display:block; margin-left:auto; }

  .nav__menu{
    position:fixed; top:var(--nav-h); left:0; right:0;
    flex-direction:column; justify-content:flex-start; gap:0;
    padding:0;
    background:#070c11;
    border-bottom:1px solid rgba(199,155,75,0);
    max-height:0; overflow:hidden;
    transition:max-height .4s ease, padding .4s ease, border-color .4s ease;
  }
  .nav.is-open .nav__menu{
    max-height:min(80vh, 470px);
    padding:8px 0 22px;
    border-bottom-color:rgba(199,155,75,.2);
  }
  .nav__menu > a{ width:100%; text-align:center; padding:15px 0; font-size:14px; }
  .nav__menu > a::after{ display:none; }
  .nav__wishlist{ justify-content:center; margin-top:6px; }

  /* content is top-anchored on phones, so the logo sits a fixed distance
     below the bar and the kicker/button are placed by their own margins */
  .hero{
    min-height:92svh;
    align-items:flex-start;
    padding:calc(var(--nav-h) + 26px) 24px 56px;
  }
  .hero__bg{ background-image:url('../assets/hero-mobile.webp'); background-position:center 40%; }
  .hero__logo{ width:min(430px, 94%); transform:none; }
  .hero__kicker{
    font-size:12px; letter-spacing:.3em;
    margin-top:clamp(120px, 26vh, 235px);
  }
  .hero__cta{ margin-top:clamp(48px, 9vh, 86px); }
  .steam-btn{ width:min(330px, 86vw); }
  .steam-btn--lg{ width:min(420px, 92%); }

  .rule-title{ font-size:clamp(19px,5.4vw,26px); gap:12px; }
  .rule-title::before, .rule-title::after{ max-width:70px; height:20px; }

  /* feature cards stack: image on top, text below */
  .feat{ grid-template-columns:1fr; }
  .feat--rev .feat__img{ order:0; }
  .feat__img{ min-height:0; aspect-ratio:16/9; }
  .feat__img::after,
  .feat--rev .feat__img::after{ background:linear-gradient(to bottom, rgba(9,15,21,.05), rgba(9,15,21,.6)); }
  .feat__body{ padding:24px 22px 28px; }

  .mechs{ grid-template-columns:repeat(2,1fr); }
  /* a lone 5th tile centres itself instead of hanging left */
  .mechs > li:last-child:nth-child(odd){ grid-column:1 / -1; width:50%; margin-inline:auto; }

  .scroll{ padding:12px; }
  .scroll__sheet{
    max-height:92svh;
    padding:44px 26px 22px;
    /* the torn edge would stretch oddly on a tall narrow sheet */
    background-size:100% 100%;
  }
  .scroll__list dd{ font-size:15.5px; line-height:1.6; }

  .about__text{ font-size:16px; line-height:1.7; }

  .carousel__nav{ width:38px; height:38px; }
  .carousel__nav--prev{ left:-4px; }
  .carousel__nav--next{ right:-4px; }

  .lightbox__nav{ width:42px; height:42px; }

  .footer__inner{ flex-direction:column; align-items:center; text-align:center; gap:34px; }
  .footer__brand{ display:flex; flex-direction:column; align-items:center; }
  .footer__cols{ width:100%; justify-content:space-around; gap:24px; text-align:left; }
}

/* a short desktop window has less room above the logo */
@media (min-width:861px) and (max-height:820px){
  .hero__logo{ transform:translateY(-6vh); }
}

@media (max-width:460px){
  .wrap{ width:calc(100% - 32px); }
  .footer__cols{ flex-wrap:wrap; gap:28px 32px; justify-content:flex-start; }
  .footer__cols > div{ flex:1 1 40%; }
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .9s ease, transform .9s cubic-bezier(.22,.61,.36,1); }
.reveal.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
  .scroll.is-in .scroll__sheet{ animation:none; }
  *,*::before,*::after{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}