/* =============================================================================
   GODDESS MAYA — style.css
   A private Venetian chamber after midnight. Mobile-first, minimal, fast.
   All brand tokens live in :root — change colours & fonts in ONE place.
   ========================================================================== */

/* ---- Design tokens ------------------------------------------------------- */
:root {
  /* Palette (from brief) */
  --obsidian:      #090708;
  --velvet-black:  #110C0E;
  --deep-burgundy: #2A0E17;
  --antique-gold:  #C5A15A;
  --soft-gold:     #E0C184;
  --warm-ivory:    #F3EBDD;
  --muted-rose:    #925267;

  /* Derived */
  --ivory-dim:  rgba(243, 235, 221, 0.66);
  --ivory-faint:rgba(243, 235, 221, 0.42);
  --gold-line:  rgba(197, 161, 90, 0.34);
  --gold-line-2:rgba(197, 161, 90, 0.16);
  --panel:      rgba(20, 12, 15, 0.55);
  --panel-hi:   rgba(42, 14, 23, 0.55);

  /* Type */
  --font-display: "Bodoni Moda", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-ui: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Rhythm */
  --maxw: 480px;
  --radius: 14px;
  --radius-sm: 11px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  color-scheme: dark;
}

/* ---- Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, p, figure, nav, ul { margin: 0; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

/* ---- Base ---------------------------------------------------------------- */
html, body { background: var(--obsidian); }
body {
  min-height: 100dvh;
  font-family: var(--font-ui);
  color: var(--warm-ivory);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ---- Background layers (decorative) -------------------------------------- */
.bg-field {
  position: fixed; inset: 0; z-index: -3; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(42,14,23,0.85) 0%, rgba(17,12,14,0) 55%),
    radial-gradient(90% 70% at 78% 8%, rgba(146,82,103,0.14) 0%, rgba(17,12,14,0) 46%),
    radial-gradient(100% 80% at 20% 100%, rgba(42,14,23,0.5) 0%, rgba(9,7,8,0) 60%),
    var(--obsidian);
}
/* faint ornamental arch pattern */
.bg-arches {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='150' viewBox='0 0 120 150'%3E%3Cpath d='M60 8C88 8 108 32 108 62V150H12V62C12 32 32 8 60 8Z' fill='none' stroke='%23C5A15A' stroke-width='1.2'/%3E%3C/svg%3E");
  background-size: 120px 150px;
  -webkit-mask-image: radial-gradient(80% 70% at 50% 30%, #000 0%, transparent 78%);
          mask-image: radial-gradient(80% 70% at 50% 30%, #000 0%, transparent 78%);
}
.bg-grain {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.particles { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.particle {
  position: absolute; top: 100%; border-radius: 50%;
  background: radial-gradient(circle, var(--soft-gold) 0%, rgba(224,193,132,0) 70%);
  opacity: 0; will-change: transform, opacity;
  animation-name: rise; animation-timing-function: linear; animation-iteration-count: infinite;
}
@keyframes rise {
  0%   { transform: translate3d(0,0,0) scale(0.6); opacity: 0; }
  12%  { opacity: 0.5; }
  85%  { opacity: 0.35; }
  100% { transform: translate3d(var(--drift, 0), -108vh, 0) scale(1); opacity: 0; }
}

/* ---- Layout shell -------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(18px, 6vw, 30px) clamp(16px, 5vw, 26px) 40px;
}

/* Skip link */
.skip-link {
  position: absolute; left: 50%; top: -60px; transform: translateX(-50%);
  background: var(--velvet-black); color: var(--soft-gold);
  border: 1px solid var(--gold-line); border-radius: 0 0 10px 10px;
  padding: 10px 16px; font-size: 0.85rem; z-index: 50; transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 0; }

/* ---- Hero ---------------------------------------------------------------- */
.hero { text-align: center; }

.crest {
  width: 46px; height: 46px; margin: 4px auto 14px;
  color: var(--antique-gold);
}
.crest svg { width: 100%; height: 100%; }

.hero__portrait {
  position: relative;
  width: min(78%, 320px);
  margin: 0 auto 22px;
  aspect-ratio: 4 / 5;
  border-radius: 180px 180px var(--radius) var(--radius);
  overflow: hidden;
  border: 1px solid var(--gold-line);
  box-shadow:
    0 0 0 6px rgba(9,7,8,0.6),
    0 26px 60px -24px rgba(0,0,0,0.85),
    inset 0 0 60px rgba(146,82,103,0.12);
  transform-style: preserve-3d;
  transition: transform 0.5s var(--ease);
}
.hero__portrait::after { /* soft top light + gold rim */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(224,193,132,0.10), rgba(9,7,8,0) 30%);
  box-shadow: inset 0 0 0 1px rgba(224,193,132,0.14);
}
.hero__portrait img { width: 100%; height: 100%; object-fit: cover; }

.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.7rem; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--antique-gold); margin-bottom: 12px;
}
.hero__eyebrow .rule { width: 26px; height: 1px; background: var(--gold-line); }

.hero__name {
  font-family: var(--font-display);
  font-weight: 600; line-height: 0.94;
  font-size: clamp(2.9rem, 15vw, 4.3rem);
  letter-spacing: 0.5px;
}
.hero__name .line { display: block; }
.hero__name .accent { color: var(--soft-gold); font-style: italic; }

.hero__descriptor {
  margin-top: 12px;
  font-size: 0.72rem; letter-spacing: 0.36em; text-transform: uppercase;
  color: var(--ivory-dim);
}

.hero__line {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.12rem, 5vw, 1.4rem);
  color: var(--warm-ivory);
  margin: 16px auto 0; max-width: 22ch;
}

/* ---- Primary CTA --------------------------------------------------------- */
.hero__cta { margin-top: 26px; }

.cta-primary {
  display: flex; align-items: center; gap: 14px;
  width: 100%; text-align: left;
  padding: 17px 18px;
  border-radius: var(--radius);
  color: var(--obsidian);
  background: linear-gradient(180deg, var(--soft-gold), var(--antique-gold));
  border: 1px solid var(--soft-gold);
  box-shadow:
    0 14px 34px -14px rgba(197,161,90,0.6),
    inset 0 1px 0 rgba(255,255,255,0.35);
  transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease);
  position: relative; overflow: hidden;
}
.cta-primary .ic { flex: 0 0 auto; color: var(--velvet-black); }
.cta-primary .ic svg { width: 24px; height: 24px; }
.cta-primary .txt { flex: 1 1 auto; }
.cta-primary .lab {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: 1.28rem; line-height: 1.05; letter-spacing: 0.2px;
}
.cta-primary .sub {
  display: block; font-size: 0.74rem; letter-spacing: 0.02em;
  color: rgba(17,12,14,0.72); margin-top: 3px;
}
.cta-primary .chev { flex: 0 0 auto; color: var(--velvet-black); opacity: 0.75; }
.cta-primary .chev svg { width: 20px; height: 20px; }
.cta-primary::before { /* gold glint sweep */
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.5), transparent);
  transform: skewX(-18deg); opacity: 0; transition: opacity 0.3s;
}
.cta-primary:hover, .cta-primary:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 20px 44px -14px rgba(224,193,132,0.7), inset 0 1px 0 rgba(255,255,255,0.4);
}
.cta-primary:hover::before, .cta-primary:focus-visible::before {
  opacity: 1; animation: glint 0.9s var(--ease);
}
@keyframes glint { from { left: -60%; } to { left: 130%; } }
.cta-primary:active { transform: translateY(-1px); }

.hero__micro {
  margin-top: 12px; font-size: 0.76rem; letter-spacing: 0.02em;
  color: var(--ivory-dim);
}
.hero__micro .sep { color: var(--gold-line); margin: 0 6px; }

/* ---- Tribute CTA (secondary primary action, findom-first) ---------------- */
.cta-tribute {
  display: flex; align-items: center; gap: 14px;
  width: 100%; text-align: left; margin-top: 12px;
  padding: 15px 16px;
  border-radius: var(--radius);
  color: var(--soft-gold);
  background: linear-gradient(180deg, var(--panel-hi), var(--panel)), var(--velvet-black);
  border: 1px solid var(--antique-gold);
  box-shadow: 0 12px 28px -18px rgba(0,0,0,0.9), inset 0 1px 0 rgba(224,193,132,0.12);
  transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease), border-color 0.28s var(--ease);
  position: relative; overflow: hidden;
}
.cta-tribute::before { /* same gold glint language as the link cards */
  content: ""; position: absolute; top: 0; left: -70%; width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(224,193,132,0.16), transparent);
  transform: skewX(-18deg); opacity: 0;
}
.cta-tribute .ic {
  flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 10px; color: var(--soft-gold);
  background: rgba(42,14,23,0.5); border: 1px solid var(--gold-line-2);
}
.cta-tribute .ic svg { width: 22px; height: 22px; }
.cta-tribute .txt { flex: 1 1 auto; min-width: 0; }
.cta-tribute .lab {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: 1.16rem; line-height: 1.05; color: var(--warm-ivory);
}
.cta-tribute .sub { display: block; font-size: 0.76rem; color: var(--ivory-dim); margin-top: 2px; }
.cta-tribute .chev { flex: 0 0 auto; color: var(--antique-gold); opacity: 0.6;
  transition: transform 0.26s var(--ease), opacity 0.26s var(--ease); }
.cta-tribute .chev svg { width: 18px; height: 18px; }
.cta-tribute:hover, .cta-tribute:focus-visible {
  transform: translateY(-3px); border-color: var(--soft-gold);
  box-shadow: 0 18px 34px -18px rgba(197,161,90,0.5);
}
.cta-tribute:hover::before, .cta-tribute:focus-visible::before { opacity: 1; animation: glint 0.85s var(--ease); }
.cta-tribute:hover .chev, .cta-tribute:focus-visible .chev { transform: translateX(3px); opacity: 0.95; }

/* ---- Closing CTA (conversion bookend) ------------------------------------ */
.closing { margin-top: 30px; text-align: center; }
.closing__line {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.12rem, 5vw, 1.32rem); color: var(--ivory-dim);
  margin: 0 auto 16px; max-width: 26ch;
}

/* ---- Section heading ----------------------------------------------------- */
.eyebrow-head {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin: 40px 0 16px;
  font-size: 0.68rem; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--antique-gold);
}
.eyebrow-head .rule { height: 1px; width: 34px; background: var(--gold-line); }

/* ---- Featured challenge card --------------------------------------------- */
.featured {
  margin-top: 26px;
  position: relative;
  border-radius: var(--radius);
  border: 1px solid var(--gold-line);
  background:
    linear-gradient(180deg, var(--panel-hi), var(--panel)),
    var(--velvet-black);
  padding: 20px 20px 22px;
  overflow: hidden;
}
.featured::before { /* corner filigree glow */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(80% 120% at 100% 0%, rgba(146,82,103,0.18), transparent 55%);
}
.featured__tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.64rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--antique-gold); margin-bottom: 10px;
}
.featured__tag .spark { width: 6px; height: 6px; border-radius: 50%;
  background: var(--soft-gold); box-shadow: 0 0 10px var(--soft-gold); }
.featured__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.5rem; line-height: 1.12; color: var(--warm-ivory);
}
.featured__copy { margin-top: 8px; color: var(--ivory-dim); font-size: 0.95rem; max-width: 34ch; }
.featured__btn {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 16px;
  padding: 11px 18px; border-radius: 10px;
  border: 1px solid var(--antique-gold); color: var(--soft-gold);
  background: rgba(9,7,8,0.4); font-weight: 600; font-size: 0.92rem;
  letter-spacing: 0.01em;
  transition: transform 0.24s var(--ease), background 0.24s var(--ease), box-shadow 0.24s var(--ease);
}
.featured__btn svg { width: 17px; height: 17px; }
.featured__btn:hover, .featured__btn:focus-visible {
  transform: translateY(-2px); background: rgba(42,14,23,0.6);
  box-shadow: 0 10px 24px -12px rgba(197,161,90,0.6);
}
.featured[hidden] { display: none; }

/* ---- Link stack ---------------------------------------------------------- */
.links { margin-top: 8px; display: grid; gap: 12px; }

.link {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--gold-line);
  background: linear-gradient(180deg, rgba(20,12,15,0.6), rgba(9,7,8,0.5));
  position: relative; overflow: hidden;
  transition: transform 0.26s var(--ease), border-color 0.26s var(--ease), box-shadow 0.26s var(--ease);
}
.link::before { /* soft gold glint on hover */
  content: ""; position: absolute; top: 0; left: -70%; width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(224,193,132,0.14), transparent);
  transform: skewX(-18deg); opacity: 0;
}
.link:hover, .link:focus-visible {
  transform: translateY(-3px);
  border-color: var(--antique-gold);
  box-shadow: 0 16px 30px -18px rgba(0,0,0,0.9), 0 0 0 1px var(--gold-line-2);
}
.link:hover::before, .link:focus-visible::before { opacity: 1; animation: glint 0.85s var(--ease); }
/* Coming-soon (non-clickable) item: muted, no hover lift, small badge */
.link--soon { opacity: 0.55; cursor: default; }
.link--soon:hover { transform: none; border-color: var(--gold-line); box-shadow: none; }
.link--soon .soon-badge {
  margin-left: auto; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--antique-gold); border: 1px solid var(--gold-line); border-radius: 999px; padding: 2px 9px;
}
.link:active { transform: translateY(-1px); }

.link .ic {
  flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 10px; color: var(--soft-gold);
  background: rgba(42,14,23,0.5); border: 1px solid var(--gold-line-2);
}
.link .ic svg { width: 21px; height: 21px; }
.link .txt { flex: 1 1 auto; min-width: 0; }
.link .lab {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: 1.16rem; line-height: 1.1; color: var(--warm-ivory);
}
.link .sub {
  display: block; font-size: 0.76rem; color: var(--ivory-dim); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.link .chev { flex: 0 0 auto; color: var(--antique-gold); opacity: 0.55;
  transition: transform 0.26s var(--ease), opacity 0.26s var(--ease); }
.link .chev svg { width: 18px; height: 18px; }
.link:hover .chev, .link:focus-visible .chev { transform: translateX(3px); opacity: 0.95; }

/* ---- About --------------------------------------------------------------- */
.about {
  margin-top: 12px; text-align: center;
  padding: 24px 20px;
  border-top: 1px solid var(--gold-line-2);
  border-bottom: 1px solid var(--gold-line-2);
}
.about__title {
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: 1.5rem; color: var(--soft-gold); margin-bottom: 10px;
}
.about__body { color: var(--ivory-dim); font-size: 0.95rem; max-width: 40ch; margin-inline: auto; }

/* ---- Footer -------------------------------------------------------------- */
.footer { margin-top: 30px; text-align: center; }
.footer__socials {
  display: flex; justify-content: center; gap: 14px; margin-bottom: 16px;
}
.footer__socials a {
  width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 50%; color: var(--ivory-dim);
  border: 1px solid var(--gold-line-2); background: rgba(20,12,15,0.5);
  transition: color 0.22s var(--ease), border-color 0.22s var(--ease), transform 0.22s var(--ease);
}
.footer__socials a svg { width: 18px; height: 18px; }
.footer__socials a:hover, .footer__socials a:focus-visible {
  color: var(--soft-gold); border-color: var(--antique-gold); transform: translateY(-2px);
}
.footer__tenet {
  font-size: 0.78rem; letter-spacing: 0.06em; color: var(--antique-gold);
  margin-bottom: 10px;
}
.footer__age {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.8rem; color: var(--ivory-dim); margin-bottom: 8px;
}
.badge {
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.04em;
  color: var(--obsidian); background: var(--antique-gold);
  border-radius: 5px; padding: 2px 6px;
}
.footer__legal { font-size: 0.76rem; color: var(--ivory-faint); }
.footer__legal a { color: var(--ivory-dim); border-bottom: 1px solid var(--gold-line-2); padding-bottom: 1px; }
.footer__legal a:hover { color: var(--soft-gold); }
.footer__sep { margin: 0 6px; color: var(--gold-line); }

/* ---- Age gate ------------------------------------------------------------ */
.age {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  padding: 24px;
  background: rgba(6,4,5,0.86);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.age[hidden] { display: none; }
/* lock scroll while the gate is up */
.gated, .gated body { overflow: hidden; height: 100%; }
.age__card {
  width: 100%; max-width: 380px; text-align: center;
  padding: 34px 26px 28px;
  border-radius: 18px;
  border: 1px solid var(--gold-line);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(42,14,23,0.9), rgba(17,12,14,0.96)),
    var(--velvet-black);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,0.9), inset 0 0 60px rgba(146,82,103,0.08);
}
.age__crest { width: 44px; height: 44px; margin: 0 auto 16px; color: var(--antique-gold); }
.age__title {
  font-family: var(--font-display); font-weight: 600; font-size: 1.7rem;
  color: var(--warm-ivory); margin-bottom: 12px;
}
.age__body { font-size: 0.9rem; color: var(--ivory-dim); margin-bottom: 22px; }
.age__actions { display: grid; gap: 10px; }
.age__enter {
  padding: 14px; border-radius: 11px; font-weight: 600; font-size: 1rem;
  color: var(--obsidian);
  background: linear-gradient(180deg, var(--soft-gold), var(--antique-gold));
  border: 1px solid var(--soft-gold); cursor: pointer;
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease);
}
.age__enter:hover, .age__enter:focus-visible {
  transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(224,193,132,0.6);
}
.age__leave {
  padding: 12px; border-radius: 11px; font-size: 0.92rem;
  color: var(--ivory-dim); background: transparent;
  border: 1px solid var(--gold-line-2); cursor: pointer;
  transition: color 0.22s var(--ease), border-color 0.22s var(--ease);
}
.age__leave:hover, .age__leave:focus-visible { color: var(--warm-ivory); border-color: var(--gold-line); }
.age__fine { margin-top: 16px; font-size: 0.68rem; color: var(--ivory-faint); }

/* ---- Legal pages (privacy / terms / 404) --------------------------------- */
.doc { max-width: 640px; }
.doc__back {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 22px;
  font-size: 0.82rem; color: var(--antique-gold);
}
.doc__back svg { width: 15px; height: 15px; }
.doc__back:hover { color: var(--soft-gold); }
.doc h1 { font-family: var(--font-display); font-weight: 600; font-size: 2.2rem; margin-bottom: 6px; }
.doc h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; color: var(--soft-gold); margin: 26px 0 8px; }
.doc p, .doc li { color: var(--ivory-dim); font-size: 0.95rem; }
.doc ul { padding-left: 1.2em; display: grid; gap: 6px; margin-top: 8px; }
.doc a { color: var(--soft-gold); border-bottom: 1px solid var(--gold-line-2); }
.doc__meta { font-size: 0.8rem; color: var(--ivory-faint); margin-bottom: 24px; }

/* 404 */
.notfound { text-align: center; padding-top: 8vh; }
.notfound .crest { width: 54px; height: 54px; }
.notfound h1 { font-family: var(--font-display); font-size: clamp(3rem, 22vw, 6rem); line-height: 1; color: var(--soft-gold); }
.notfound p { color: var(--ivory-dim); margin: 12px auto 26px; max-width: 30ch; }
.notfound .cta-primary { max-width: 320px; margin-inline: auto; }

/* ---- Reveal-on-load ------------------------------------------------------ */
.reveal { opacity: 0; transform: translateY(14px); }
.is-ready .reveal {
  opacity: 1; transform: none;
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: var(--delay, 0s);
}
/* If JS never runs, content must still be visible. */
.no-js .reveal { opacity: 1; transform: none; }

/* ---- Motion & accessibility --------------------------------------------- */
:where(a, button):focus-visible {
  outline: 2px solid var(--soft-gold);
  outline-offset: 3px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .particles { display: none; }
}

/* ---- Larger screens: keep it a centred column, slightly roomier ---------- */
@media (min-width: 600px) {
  .shell { padding-top: 44px; }
  .hero__portrait { width: min(64%, 340px); }
}