/* =========================================================================
   The Alim Abdul Show — Public stylesheet  (v3 — dark cinematic)
   A world-class publication for intelligent conversations.
   Near-black + refined gold · Playfair Display / Manrope · self-hosted fonts.
   ========================================================================= */

/* ----- Self-hosted fonts -------------------------------------------------- */
@font-face { font-family:'Playfair Display'; font-style:normal; font-weight:400 800; font-display:swap; src:url('../fonts/playfair.woff2') format('woff2'); }
@font-face { font-family:'Playfair Display'; font-style:italic; font-weight:400 700; font-display:swap; src:url('../fonts/playfair-italic.woff2') format('woff2'); }
@font-face { font-family:'Manrope'; font-style:normal; font-weight:200 800; font-display:swap; src:url('../fonts/manrope.woff2') format('woff2'); }

/* ----- Design tokens ------------------------------------------------------ */
:root {
    --bg:        #0B0B0E;
    --bg-2:      #101015;
    --bg-3:      #08080A;
    --surface:   #15151C;
    --surface-2: #1B1B23;
    --ink:       #F3EFE8;   /* warm white */
    --ink-soft:  #ADA79C;
    --ink-faint: #736E66;
    --line:      rgba(243,239,232,.09);
    --line-2:    rgba(243,239,232,.16);

    --accent:    #C9A15E;   /* refined gold */
    --accent-2:  #DFC085;   /* light gold */
    --accent-ink:#E7CD97;
    --accent-soft: rgba(201,161,94,.14);
    --cool:      #7C97C4;   /* subtle cool highlight */

    --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-body:    'Manrope', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    --font-mono:    'Manrope', system-ui, sans-serif;

    --radius:    16px;
    --radius-sm: 11px;
    --radius-lg: 26px;
    --shadow-md: 0 24px 60px -24px rgba(0,0,0,.7), 0 8px 20px rgba(0,0,0,.35);
    --shadow-lg: 0 50px 100px -30px rgba(0,0,0,.8);
    --glow:      0 0 0 1px rgba(201,161,94,.25), 0 20px 60px -24px rgba(201,161,94,.25);

    --container: 1200px;
    --ease: cubic-bezier(.22,.61,.36,1);
}

/* ----- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--ink);
    line-height: 1.65;
    font-size: 17px;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    position: relative;
}
/* film grain */
body::after {
    content:""; position: fixed; inset:0; z-index:3; pointer-events:none; opacity:.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.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img, video, svg { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
::selection { background: var(--accent); color: #14110B; }

/* ----- Layout primitives -------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 26px; }
.section { padding-block: clamp(64px, 8vw, 132px); position: relative; }
.section--tight { padding-block: clamp(42px, 5vw, 78px); }
.section--cream, .section--alt { background: var(--bg-2); }
.center { text-align: center; }
.stack > * + * { margin-top: 1rem; }

/* ----- Typography --------------------------------------------------------- */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; line-height: 1.05; letter-spacing: -0.015em; color: var(--ink); }
h1 { font-size: clamp(3rem, 7.4vw, 6rem); font-weight: 500; letter-spacing: -0.025em; }
h2 { font-size: clamp(2.1rem, 4.4vw, 3.5rem); letter-spacing: -0.02em; }
h3 { font-size: clamp(1.4rem, 2.2vw, 2rem); }
h4 { font-size: 1.2rem; font-weight: 600; }
p  { color: var(--ink-soft); }
strong { font-weight: 600; color: var(--ink); }
.lead { font-size: clamp(1.16rem, 1.7vw, 1.45rem); color: var(--ink-soft); line-height: 1.55; font-weight: 400; }
em { font-style: italic; }

.kicker { font-family: var(--font-body); font-size:.74rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color: var(--accent); display:inline-flex; align-items:center; gap:.75em; }
.kicker::before { content:""; width:30px; height:1px; background: var(--accent); display:inline-block; opacity:.7; }
.kicker--plain::before { display:none; }
.eyebrow { font-family: var(--font-body); font-size:.72rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color: var(--ink-faint); }

/* ----- Buttons ------------------------------------------------------------ */
.btn { display:inline-flex; align-items:center; gap:.55em; padding:.92em 1.65em; border-radius:999px; font-family:var(--font-body); font-weight:600; font-size:.96rem; border:1px solid transparent; transition: transform .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease), color .2s, border-color .2s; will-change: transform; }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--ink); color: #14110B; }
.btn--primary:hover { background: var(--accent-2); transform: translateY(-3px); box-shadow: 0 18px 34px -14px rgba(201,161,94,.55); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent-ink); transform: translateY(-3px); }
.btn--light { background: var(--ink); color:#14110B; }
.btn--light:hover { background: var(--accent-2); transform: translateY(-3px); }
.btn svg { width: 18px; height: 18px; }

/* ----- Navbar ------------------------------------------------------------- */
.nav { position: sticky; top: 0; z-index: 100; transition: background .35s var(--ease), box-shadow .35s var(--ease); }
.nav__inner { display:flex; align-items:center; justify-content:space-between; height: 80px; }
.nav.is-scrolled { background: rgba(11,11,14,.72); backdrop-filter: saturate(150%) blur(18px); box-shadow: 0 1px 0 var(--line); }
.brand { display:inline-flex; align-items:center; gap:.7em; font-family: var(--font-display); font-size:1.3rem; font-weight:500; letter-spacing:-.01em; }
.brand__mark { width:40px; height:40px; border-radius:50%; background: radial-gradient(circle at 35% 30%, #23232C, #0E0E12); color: var(--accent); display:grid; place-items:center; font-family: var(--font-display); font-size:1.05rem; font-weight:600; box-shadow: inset 0 0 0 1px var(--line-2); }
.brand small { font-family: var(--font-body); font-size:.55rem; font-weight:600; letter-spacing:.2em; color: var(--ink-faint); text-transform:uppercase; display:block; margin-top:1px; }
.brand__logo { height:42px; width:auto; max-width:230px; object-fit:contain; display:block; }
.footer .brand__logo { height:40px; }
@media (max-width:520px){ .brand__logo { height:36px; max-width:180px; } }
.nav__links { display:flex; align-items:center; gap:2px; list-style:none; }
.nav__links a { display:inline-block; padding:.5em 1em; border-radius:999px; font-size:.93rem; font-weight:600; color: var(--ink-soft); transition: color .2s, background .2s; }
.nav__links a:hover, .nav__links a.is-active { color: var(--ink); background: rgba(243,239,232,.06); }
.nav__cta { margin-left: 12px; }
.nav__toggle { display:none; background:none; border:0; width:44px; height:44px; border-radius:11px; }
.nav__toggle span { display:block; width:21px; height:2px; background: var(--ink); margin:4px auto; transition:.3s; border-radius:2px; }
@media (max-width: 920px) {
    .nav__toggle { display:block; }
    .nav__links { position:fixed; inset:80px 0 auto 0; flex-direction:column; align-items:stretch; gap:0; background: var(--bg-2); padding:14px 26px 28px; border-bottom:1px solid var(--line); transform: translateY(-130%); transition: transform .4s var(--ease); box-shadow: var(--shadow-md); }
    .nav__links.is-open { transform: translateY(0); }
    .nav__links a { padding:.95em .4em; font-size:1.1rem; border-radius:10px; }
    .nav__cta { margin:10px 0 0; }
}

/* ----- Cinematic image / mesh placeholder --------------------------------- */
.mesh { position:absolute; inset:0; background:
    radial-gradient(60% 80% at 20% 15%, rgba(124,151,196,.28), transparent 60%),
    radial-gradient(55% 70% at 85% 25%, rgba(201,161,94,.30), transparent 60%),
    radial-gradient(70% 90% at 70% 90%, rgba(90,70,120,.30), transparent 60%),
    linear-gradient(160deg, #16161E, #0C0C10);
}
.mesh--a { filter:hue-rotate(0deg); }
.mesh--b { filter:hue-rotate(40deg); }
.mesh--c { filter:hue-rotate(-30deg) saturate(1.1); }
.mesh--d { filter:hue-rotate(90deg); }
.imgcover { width:100%; height:100%; object-fit:cover; }

/* ----- Hero --------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; padding-block: clamp(60px, 9vw, 128px) clamp(48px, 7vw, 92px); }
.hero__bg { position:absolute; inset:0; z-index:0; }
.hero__bg::after { content:""; position:absolute; inset:0; background:
    radial-gradient(80% 60% at 75% 15%, rgba(201,161,94,.16), transparent 55%),
    radial-gradient(70% 70% at 15% 85%, rgba(124,151,196,.14), transparent 55%),
    linear-gradient(180deg, rgba(11,11,14,.4), var(--bg) 92%); }
.hero__bg img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.5; }
.hero__inner { position: relative; z-index: 1; max-width: 940px; }
.hero h1 { margin-top:.35em; }
.hero h1 em { font-style: italic; color: var(--accent); }
.hero .lead { margin-top: 1.4em; max-width: 46ch; }
.hero__actions { display:flex; flex-wrap:wrap; gap:14px; margin-top: 2.2em; }
.hero__meta { margin-top: 3em; display:flex; gap:0; flex-wrap:wrap; border-top:1px solid var(--line); padding-top: 26px; }
.hero__meta > div { padding-right: 40px; margin-right: 40px; border-right:1px solid var(--line); }
.hero__meta > div:last-child { border-right:0; padding-right:0; margin-right:0; }
.hero__meta .num { font-family: var(--font-display); font-weight:500; font-size:1.7rem; color: var(--ink); line-height:1; }
.hero__meta .lbl { font-family: var(--font-body); font-weight:600; font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color: var(--ink-faint); margin-top:8px; }
@media (max-width:640px){ .hero__meta > div { padding-right:22px; margin-right:22px; } }
@media (max-width:480px){
    .hero__meta { flex-direction:column; align-items:stretch; gap:0; }
    .hero__meta > div { border-right:0; border-bottom:1px solid var(--line); padding:14px 0; margin:0; width:100%; }
    .hero__meta > div:last-child { border-bottom:0; padding-bottom:0; }
}

/* ----- Marquee ------------------------------------------------------------ */
/* Desktop-only flourish. HIDDEN by default (phones, tablets, any touch device),
   shown ONLY on a wide screen with a real mouse — so no mobile device can ever
   display it, regardless of how it reports its width. */
.marquee { display:none; border-block:1px solid var(--line); background: var(--bg-3); overflow:hidden; padding-block:22px; }
@media (min-width:1000px) and (hover:hover) and (pointer:fine) { .marquee { display:block; } }
.marquee__track { display:flex; gap:44px; width:max-content; animation: marquee 38s linear infinite; will-change: transform; backface-visibility: hidden; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee span { font-family: var(--font-display); font-style:italic; font-size:1.35rem; color: var(--ink-faint); white-space:nowrap; display:inline-flex; align-items:center; gap:44px; }
.marquee span::after { content:"◆"; font-style:normal; font-size:.55rem; color: var(--accent); }
@keyframes marquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
/* Marquee keeps scrolling even under Reduce Motion (it's a brand element, not
   a large/flashing motion). Scroll-reveal animations still respect the setting. */

/* ----- Video frame -------------------------------------------------------- */
.video { position:relative; border-radius: var(--radius-lg); overflow:hidden; background:#050506; box-shadow: var(--shadow-lg); aspect-ratio:16/9; border:1px solid var(--line-2); }
.video::before { content:""; position:absolute; inset:0; z-index:3; border-radius:inherit; box-shadow: inset 0 0 60px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.05); pointer-events:none; }
.video iframe, .video video { position:absolute; inset:0; width:100%; height:100%; border:0; }
.video__placeholder { position:absolute; inset:0; display:grid; place-items:center; gap:16px; color:#fff; text-align:center; }
.video__placeholder .mesh { z-index:0; }
.video__placeholder > * { position:relative; z-index:1; }
.play { width:84px; height:84px; border-radius:50%; background: rgba(20,17,11,.55); color:#fff; display:grid; place-items:center; box-shadow: 0 12px 40px rgba(0,0,0,.5); transition: transform .35s var(--ease), background .3s; position:relative; backdrop-filter: blur(6px); border:1px solid rgba(255,255,255,.25); }
.play::after { content:""; position:absolute; inset:-12px; border-radius:50%; border:1px solid var(--accent); opacity:.6; }
.play svg { width:28px; height:28px; margin-left:4px; }
.video:hover .play { transform: scale(1.09); background: var(--accent); color:#14110B; }

/* ----- Section heading ---------------------------------------------------- */
.sec-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom: clamp(32px,4vw,58px); flex-wrap:wrap; }
.sec-head p { max-width: 54ch; margin-top:.85em; }
.sec-head .link { font-family: var(--font-body); font-weight:600; font-size:.82rem; letter-spacing:.04em; text-transform:uppercase; color: var(--accent); display:inline-flex; align-items:center; gap:.5em; transition: gap .25s; }
.sec-head .link:hover { gap:.85em; }

/* ----- Cards -------------------------------------------------------------- */
.grid { display:grid; gap:28px; }
.grid--3 { grid-template-columns: repeat(3,1fr); }
.grid--2 { grid-template-columns: repeat(2,1fr); }
.grid--4 { grid-template-columns: repeat(4,1fr); }
@media (max-width:1000px){ .grid--4 { grid-template-columns: repeat(2,1fr); } }
@media (max-width:900px){ .grid--3 { grid-template-columns: repeat(2,1fr); } }
@media (max-width:640px){ .grid--3, .grid--2, .grid--4 { grid-template-columns: 1fr; } }

.card { background: var(--surface); border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s; display:flex; flex-direction:column; }
.card:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); border-color: var(--line-2); }
.card__media { position:relative; aspect-ratio:16/9; overflow:hidden; background: var(--bg-2); }
.card__media img { width:100%; height:100%; object-fit:cover; transition: transform .65s var(--ease); }
.card:hover .card__media img { transform: scale(1.06); }
.card__media .noimg { position:absolute; inset:0; display:grid; place-items:center; z-index:1; color: rgba(255,255,255,.75); font-family: var(--font-body); font-weight:600; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; }
.card__badge { position:absolute; top:14px; left:14px; z-index:2; background: rgba(11,11,14,.7); color:#fff; font-family: var(--font-body); font-weight:600; font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; padding:.45em .8em; border-radius:999px; backdrop-filter: blur(6px); border:1px solid var(--line); }
.card__body { padding:22px 24px 26px; display:flex; flex-direction:column; gap:11px; flex:1; }
.card__meta { font-family: var(--font-body); font-weight:600; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-faint); display:flex; gap:10px; align-items:center; }
.card h3 { font-size:1.38rem; line-height:1.12; transition: color .25s; }
.card:hover h3 { color: var(--accent-ink); }
.card p { font-size:.96rem; color: var(--ink-soft); }
.card__foot { margin-top:auto; padding-top:10px; }

.tag { display:inline-block; font-family: var(--font-body); font-weight:600; font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color: var(--ink-soft); background: rgba(243,239,232,.05); border:1px solid var(--line); padding:.4em .8em; border-radius:999px; transition:.2s; }
a.tag:hover { border-color: var(--accent); color: var(--accent-ink); }
.tags { display:flex; flex-wrap:wrap; gap:8px; }

/* ----- Topics / disciplines ----------------------------------------------- */
.topic { position:relative; border:1px solid var(--line); border-radius: var(--radius); padding:28px 24px; background: var(--surface); overflow:hidden; transition: transform .4s var(--ease), border-color .3s, background .3s; display:flex; flex-direction:column; gap:12px; min-height:180px; }
.topic:hover { transform: translateY(-6px); border-color: var(--line-2); background: var(--surface-2); }
.topic__icon { width:46px; height:46px; border-radius:12px; display:grid; place-items:center; background: var(--accent-soft); color: var(--accent-ink); border:1px solid var(--line); }
.topic__icon svg { width:22px; height:22px; }
.topic h4 { font-family: var(--font-display); font-weight:500; font-size:1.3rem; }
.topic p { font-size:.9rem; }
.topic__glow { position:absolute; right:-40px; top:-40px; width:140px; height:140px; border-radius:50%; background: radial-gradient(circle, var(--accent-soft), transparent 70%); opacity:0; transition: opacity .4s; }
.topic:hover .topic__glow { opacity:1; }

/* ----- Feature / philosophy split ----------------------------------------- */
.split { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(32px,5vw,72px); align-items:center; }
@media (max-width:880px){ .split { grid-template-columns:1fr; } }
.figure { position:relative; border-radius: var(--radius-lg); overflow:hidden; aspect-ratio: 4/5; box-shadow: var(--shadow-md); border:1px solid var(--line-2); }
.figure img { width:100%; height:100%; object-fit:cover; }
.figure--wide { aspect-ratio: 16/11; }

.principles { list-style:none; display:flex; flex-direction:column; }
.principles li { display:flex; gap:18px; align-items:baseline; padding:18px 0; border-bottom:1px solid var(--line); }
.principles li:last-child { border-bottom:0; }
.principles .n { font-family: var(--font-display); font-style:italic; color: var(--accent); font-size:1.2rem; min-width:34px; }
.principles strong { display:block; margin-bottom:2px; }
.principles span.d { color: var(--ink-soft); font-size:.94rem; }

/* ----- Subscribe / chips -------------------------------------------------- */
.subscribe { display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.chip { display:inline-flex; align-items:center; gap:.6em; background: var(--surface); border:1px solid var(--line); border-radius:999px; padding:.78em 1.3em; font-weight:600; font-size:.93rem; transition: transform .3s var(--ease), border-color .3s, background .3s; }
.chip:hover { transform: translateY(-3px); border-color: var(--line-2); background: var(--surface-2); }
.chip svg { width:19px; height:19px; }

/* ----- Forms -------------------------------------------------------------- */
.field { display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
.field label { font-family: var(--font-body); font-weight:600; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-faint); }
.input, .textarea, select.input { width:100%; padding:.9em 1.1em; font:inherit; color: var(--ink); background: var(--surface); border:1px solid var(--line-2); border-radius: var(--radius-sm); transition: border-color .2s, box-shadow .2s; }
.input::placeholder, .textarea::placeholder { color: var(--ink-faint); }
.input:focus, .textarea:focus, select.input:focus { outline:none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.textarea { min-height:140px; resize:vertical; }
.inline-form { display:flex; gap:12px; flex-wrap:wrap; }
.inline-form .input { flex:1; min-width:220px; }

/* ----- Band --------------------------------------------------------------- */
.band { position:relative; border-radius: var(--radius-lg); padding: clamp(36px,5vw,72px); overflow:hidden; border:1px solid var(--line-2); background: linear-gradient(150deg, #17171F, #0D0D11); }
.band::after { content:""; position:absolute; right:-90px; top:-90px; width:340px; height:340px; border-radius:50%; background: radial-gradient(circle, rgba(201,161,94,.16), transparent 66%); }
.band h2 { color:#fff; }
.band p { color: var(--ink-soft); }
.band .kicker { color: var(--accent); }

/* ----- Prose -------------------------------------------------------------- */
.prose { max-width: 70ch; }
.prose > * + * { margin-top: 1.15em; }
.prose h2 { font-size:1.9rem; margin-top:1.7em; }
.prose h3 { font-size:1.4rem; margin-top:1.5em; }
.prose p, .prose li { color: var(--ink-soft); }
.prose ul, .prose ol { padding-left:1.3em; }
.prose li { margin-top:.45em; }
.prose a { color: var(--accent-ink); text-decoration:underline; text-underline-offset:3px; }
.prose blockquote { border-left:3px solid var(--accent); padding-left:1.2em; font-family: var(--font-display); font-size:1.5rem; line-height:1.4; color: var(--ink); font-style:italic; }

/* ----- Page header -------------------------------------------------------- */
.page-head { padding-block: clamp(58px,7vw,104px) clamp(24px,3vw,44px); position:relative; overflow:hidden; }
.page-head__bg { position:absolute; inset:0; z-index:0; opacity:.55; }
.page-head__bg::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(11,11,14,.5), var(--bg)); }
.page-head .container { position:relative; z-index:1; }
.page-head h1 { font-size: clamp(2.8rem, 5.8vw, 4.8rem); }
.page-head .lead { margin-top:1em; max-width:60ch; }

/* ----- People ------------------------------------------------------------- */
.person { text-align:center; }
.person__photo { width:116px; height:116px; border-radius:50%; object-fit:cover; margin:0 auto 16px; border:1px solid var(--line-2); position:relative; }
.person__photo.noimg { display:grid; place-items:center; font-family: var(--font-display); font-size:2.3rem; color: var(--accent); background: var(--surface-2); }
.person h3 { font-size:1.26rem; }
.person .role { font-family: var(--font-body); font-weight:600; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color: var(--ink-faint); margin-top:5px; }

/* ----- Footer ------------------------------------------------------------- */
.footer { background: var(--bg-3); color: var(--ink-soft); padding-block: clamp(56px,6vw,90px) 34px; margin-top: clamp(56px,6vw,110px); border-top:1px solid var(--line); }
.footer a { color: var(--ink-soft); transition: color .2s; }
.footer a:hover { color: var(--accent-ink); }
.footer__grid { display:grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap:34px; }
.footer .brand { color: var(--ink); }
.footer h5 { font-family: var(--font-body); font-weight:600; font-size:.72rem; letter-spacing:.15em; text-transform:uppercase; color: var(--ink-faint); margin-bottom:16px; }
.footer ul { list-style:none; display:flex; flex-direction:column; gap:10px; font-size:.93rem; }
.footer__bottom { margin-top:48px; padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.82rem; color: var(--ink-faint); }
@media (max-width:800px){ .footer__grid { grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .footer__grid { grid-template-columns:1fr; } }

/* ----- Page enter fade ---------------------------------------------------- */
html.page-enter body { opacity:0; }
html.page-enter.page-ready body { opacity:1; transition: opacity .6s var(--ease); }
@media (prefers-reduced-motion: reduce) { html.page-enter body { opacity:1; } }

/* ----- Reveal on scroll --------------------------------------------------- */
.reveal { opacity:0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); will-change: opacity, transform; }
.reveal.is-visible { opacity:1; transform:none; }
.reveal-1 { transition-delay:.08s; } .reveal-2 { transition-delay:.16s; } .reveal-3 { transition-delay:.24s; } .reveal-4 { transition-delay:.32s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity:1; transform:none; } }

/* ----- Notices ------------------------------------------------------------ */
.notice { padding:15px 19px; border-radius: var(--radius-sm); font-size:.95rem; margin-bottom:18px; }
.notice--success { background: rgba(90,160,120,.14); color:#9BD3B0; border:1px solid rgba(90,160,120,.3); }
.notice--error { background: rgba(200,90,70,.14); color:#E7A594; border:1px solid rgba(200,90,70,.3); }

/* ----- Misc --------------------------------------------------------------- */
.muted { color: var(--ink-faint); }
.divider { height:1px; background: var(--line); border:0; margin-block: clamp(34px,5vw,66px); }
.empty { text-align:center; padding:64px 20px; color: var(--ink-faint); font-family: var(--font-body); font-weight:500; font-size:.92rem; }
.back-link { font-family: var(--font-body); font-weight:600; font-size:.78rem; letter-spacing:.04em; text-transform:uppercase; color: var(--ink-faint); display:inline-flex; align-items:center; gap:.5em; transition:color .2s, gap .2s; }
.back-link:hover { color: var(--accent-ink); }