/* ============================================================
 minmi, locked dark vhs/nebula system
 source of truth: minmi-design-system/ (brand board, light
 source, buttons + portals). do not restyle, extend only.
 ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&display=swap');

* { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior:smooth; }

body {
 background:#000000;
 color:#f4f1ea;
 font-family:'Nunito',-apple-system,sans-serif;
 min-height:100vh;
 /* whisper of the wordmark treatment on every piece of text
 inherited everywhere, faint enough to stay readable */
 text-shadow:
 -0.5px 0 rgba(235,240,255,0.16),
 0.5px 0 rgba(210,220,240,0.14),
 0 0 14px rgba(150,90,255,0.32);
}

/* custom scrollbar, the page chrome lives in the world too */
html { scrollbar-color:rgba(150,90,255,0.35) #000; }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:#000; }
::-webkit-scrollbar-thumb { background:rgba(150,90,255,0.28); border-radius:5px; border:2px solid #000; }
::-webkit-scrollbar-thumb:hover { background:rgba(150,90,255,0.5); }

::selection { background:rgba(150,90,255,0.35); color:#f4f1ea; }

/* ============================================================
 the void field, pure black, the logo is the only light.
 fixed full-viewport layer stack; content scrolls above it.
 position the light with --ax / --ay on .void.
 ============================================================ */
.void { position:relative; overflow:hidden; background:#000000; }

.void.fixed-field { position:fixed; inset:0; z-index:0; pointer-events:none; }

.void .aura {
 position:absolute; inset:0; z-index:1; pointer-events:none;
 background:radial-gradient(circle at var(--ax,50%) var(--ay,50%),
 rgba(150,90,255,0.30) 0%,
 rgba(125,72,235,0.19) 20%,
 rgba(95,52,185,0.10) 40%,
 rgba(55,32,115,0.045) 58%,
 transparent 76%);
}
/* chromatic light bleed, faint magenta + cyan aura ghosts */
.void .aura::before {
 content:''; position:absolute; inset:0;
 background:radial-gradient(circle at calc(var(--ax,50%) - 12px) var(--ay,50%),
 rgba(255,0,110,0.10) 0%, transparent 42%);
 mix-blend-mode:screen;
}
.void .aura::after {
 content:''; position:absolute; inset:0;
 background:radial-gradient(circle at calc(var(--ax,50%) + 12px) var(--ay,50%),
 rgba(0,190,255,0.09) 0%, transparent 42%);
 mix-blend-mode:screen;
}
/* grain, texture only exists where the light reaches */
.void .grain {
 position:absolute; inset:-20%; width:140%; height:140%; z-index:2; pointer-events:none;
 background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="150" height="150"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.72" numOctaves="4" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/></filter><rect width="150" height="150" filter="url(%23n)"/></svg>');
 opacity:0.22; mix-blend-mode:overlay;
 -webkit-mask:radial-gradient(circle at var(--ax,50%) var(--ay,50%), black 0%, rgba(0,0,0,0.5) 44%, transparent 72%);
 mask:radial-gradient(circle at var(--ax,50%) var(--ay,50%), black 0%, rgba(0,0,0,0.5) 44%, transparent 72%);
}
/* glowing purple specks, same mask */
.void .sparkle {
 position:absolute; inset:0; z-index:2; pointer-events:none;
 background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240"><filter id="s"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="2" seed="5"/><feColorMatrix type="matrix" values="0 0 0 0 0.66 0 0 0 0 0.45 0 0 0 0 1 0 0 0 28 -15"/><feGaussianBlur stdDeviation="0.5"/></filter><rect width="240" height="240" filter="url(%23s)"/></svg>');
 opacity:0.6; mix-blend-mode:screen;
 -webkit-mask:radial-gradient(circle at var(--ax,50%) var(--ay,50%), black 0%, transparent 66%);
 mask:radial-gradient(circle at var(--ax,50%) var(--ay,50%), black 0%, transparent 66%);
}
/* vhs scanlines, very subtle, only near the light */
.void .scan {
 position:absolute; inset:0; z-index:3; pointer-events:none;
 background:repeating-linear-gradient(to bottom, rgba(255,255,255,0.025) 0 1px, transparent 1px 3px);
 mix-blend-mode:overlay;
 -webkit-mask:radial-gradient(circle at var(--ax,50%) var(--ay,50%), black 0%, transparent 70%);
 mask:radial-gradient(circle at var(--ax,50%) var(--ay,50%), black 0%, transparent 70%);
}

/* ============================================================
 the wordmark, locked treatment: purple with subtle silver
 metallic outline + purple glow halo. the light source.
 ============================================================ */
.wordmark {
 font-family:'Nunito',sans-serif; font-weight:700; letter-spacing:-0.5px; line-height:1;
 position:relative; z-index:4; color:#dcc2ff; text-decoration:none; display:inline-block;
 text-shadow:
 -1px 0 rgba(235,240,255,0.7),
 1px 0 rgba(210,220,240,0.6),
 0 0 14px rgba(190,140,255,0.9),
 0 0 34px rgba(160,98,255,0.65),
 0 0 70px rgba(150,90,255,0.45),
 0 0 110px rgba(150,90,255,0.25);
}
.wordmark.huge { font-size:88px; }
.wordmark.big { font-size:64px; }
/* the hero mark breathes, a light source, not a sticker */
@keyframes markBreathe {
 0%, 100% { filter:brightness(1); }
 50% { filter:brightness(1.14); }
}
.hero > .wordmark.huge, .hero > .wordmark.big { animation:markBreathe 6s ease-in-out infinite; }
.wordmark.med { font-size:44px; }
.wordmark.small { font-size:26px; }

/* ============================================================
 grain buttons, from the locked buttons + portals sheet
 ============================================================ */
.gbtn {
 position:relative; display:inline-flex; align-items:center; justify-content:center;
 padding:15px 34px; border-radius:14px; font-family:'Nunito',sans-serif; font-size:15px; font-weight:700;
 text-decoration:none; cursor:pointer; overflow:hidden; border:none; z-index:4;
 transition:transform .25s ease, box-shadow .35s ease, opacity .25s ease;
}
.gbtn span { position:relative; z-index:3; }
/* grain layer inside every button */
.gbtn::after {
 content:''; position:absolute; inset:-40%; width:180%; height:180%; z-index:2; pointer-events:none;
 background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120"><filter id="bn"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/></filter><rect width="120" height="120" filter="url(%23bn)"/></svg>');
 opacity:0.18; mix-blend-mode:overlay;
}

/* primary, bright purple pop, top highlight, aura halo, ~5% grain */
.gbtn.primary {
 color:#100a1c; text-shadow:none;
 background:radial-gradient(120% 140% at 50% 0%, #d6b9ff 0%, #b07ff9 52%, #8f55ea 100%);
 box-shadow:0 0 34px rgba(160,98,255,0.5), inset 0 1px 0 rgba(255,255,255,0.3);
}
.gbtn.primary::after { opacity:0.05; }
.gbtn.primary:hover { transform:translateY(-1px); box-shadow:0 0 52px rgba(160,98,255,0.68), inset 0 1px 0 rgba(255,255,255,0.34); }

/* ghost, purple outline over near-black grainy fill */
.gbtn.ghost {
 color:#c9a3ff; border:1px solid rgba(168,120,255,0.45);
 background:radial-gradient(120% 140% at 50% 0%, rgba(40,26,66,0.6) 0%, rgba(14,10,22,0.75) 100%);
 box-shadow:0 0 18px rgba(150,90,255,0.12), inset 0 0 20px rgba(150,90,255,0.06);
}
.gbtn.ghost::after { opacity:0.26; }
.gbtn.ghost:hover {
 border-color:rgba(185,140,255,0.8); color:#e0ccff;
 box-shadow:0 0 30px rgba(150,90,255,0.28), inset 0 0 26px rgba(150,90,255,0.12); transform:translateY(-1px);
}

.gbtn:active { transform:translateY(0) scale(0.985); }
.gbtn.small { padding:11px 22px; font-size:14px; border-radius:11px; }
.gbtn.block { display:flex; width:100%; }
.gbtn[disabled], .gbtn.busy { opacity:0.55; pointer-events:none; }

/* ============================================================
 layout, nav, page shell, footer
 ============================================================ */
.page { position:relative; z-index:1; min-height:100vh; display:flex; flex-direction:column; }

.nav {
 display:flex; align-items:center; justify-content:space-between;
 padding:22px 32px; position:relative; z-index:6;
}
.nav-links { display:flex; gap:28px; align-items:center; font-size:14px; }
.nav-links a {
 color:#c9a3ff; font-weight:700; text-decoration:none; transition:color .25s ease;
 text-shadow:
 -0.5px 0 rgba(235,240,255,0.4),
 0.5px 0 rgba(210,220,240,0.35),
 0 0 12px rgba(160,98,255,0.55),
 0 0 28px rgba(150,90,255,0.3);
}
.nav-links a:hover { color:#e0ccff; }

.hero {
 flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
 text-align:center; padding:72px 24px 56px; position:relative; z-index:4;
}
.hero h1 {
 font-size:34px; font-weight:600; line-height:1.15; letter-spacing:-0.3px;
 color:rgba(226,222,236,0.82); max-width:540px; margin-top:26px;
 text-shadow:
 -0.5px 0 rgba(235,240,255,0.3),
 0.5px 0 rgba(210,220,240,0.25),
 0 0 16px rgba(160,98,255,0.45),
 0 0 40px rgba(150,90,255,0.2);
}
.hero .sub {
 font-size:16px; color:rgba(240,234,252,0.62); margin-top:14px; max-width:420px; line-height:1.55;
 text-shadow:
 -0.5px 0 rgba(235,240,255,0.16),
 0.5px 0 rgba(210,220,240,0.12),
 0 0 14px rgba(165,105,255,0.28),
 0 0 36px rgba(150,90,255,0.12);
}

.foot {
 position:relative; z-index:4; text-align:center; padding:32px 24px 40px;
 font-size:12px; color:#4a454f; line-height:1.8;
}
.foot a {
 color:#a67ee8; text-decoration:none;
 text-shadow:0 0 10px rgba(160,98,255,0.5), 0 0 24px rgba(150,90,255,0.25);
}
.foot a:hover { color:#dcc2ff; }

/* ============================================================
 forms, inputs live in the world: near-black grainy fills,
 purple outlines, glow on focus
 ============================================================ */
.formcard {
 position:relative; z-index:4; width:100%; max-width:440px; margin:40px auto 0;
 text-align:left; display:flex; flex-direction:column; gap:16px;
}
.formcard.wide { max-width:560px; }

/* field labels wear the same treatment as the nav links
 small glowing headers, everywhere one appears */
.field label {
 display:block; font-size:12px; font-weight:700; letter-spacing:1.5px; text-transform:lowercase;
 color:#c9a3ff; margin-bottom:8px;
 text-shadow:
 -0.5px 0 rgba(235,240,255,0.4),
 0.5px 0 rgba(210,220,240,0.35),
 0 0 12px rgba(160,98,255,0.55),
 0 0 28px rgba(150,90,255,0.3);
}
.input, .textarea, .selectbox {
 width:100%; padding:14px 16px; border-radius:12px;
 font-family:'Nunito',sans-serif; font-size:15px; font-weight:600; color:#f4f1ea;
 background:radial-gradient(120% 140% at 50% 0%, rgba(40,26,66,0.4) 0%, rgba(14,10,22,0.75) 100%);
 border:1px solid rgba(168,120,255,0.38); outline:none; caret-color:#c9a3ff;
 box-shadow:0 0 22px rgba(150,90,255,0.20), inset 0 0 16px rgba(150,90,255,0.07);
 transition:border-color .25s ease, box-shadow .25s ease;
}
.input:focus, .textarea:focus, .selectbox:focus {
 border-color:rgba(195,155,255,0.9);
 box-shadow:0 0 34px rgba(150,90,255,0.34), inset 0 0 22px rgba(150,90,255,0.1);
}
.input::placeholder, .textarea::placeholder { color:rgba(201,163,255,0.35); font-weight:500; }
.textarea { resize:vertical; min-height:96px; line-height:1.55; }
.selectbox {
 appearance:none; cursor:pointer;
 background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path d="M1 1l5 5 5-5" fill="none" stroke="%23a878ff" stroke-width="1.5" stroke-linecap="round"/></svg>'),
 radial-gradient(120% 140% at 50% 0%, rgba(40,26,66,0.4) 0%, rgba(14,10,22,0.75) 100%);
 background-repeat:no-repeat; background-position:right 16px center, center;
}
.selectbox option { background:#0e0a16; color:#f4f1ea; }

/* opt-in checkbox */
.check { display:flex; gap:11px; align-items:flex-start; cursor:pointer; font-size:13px; color:rgba(244,241,234,0.5); line-height:1.5; }
.check input {
 appearance:none; width:18px; height:18px; margin-top:1px; border-radius:6px; flex-shrink:0; cursor:pointer;
 border:1px solid rgba(168,120,255,0.45);
 background:radial-gradient(120% 140% at 50% 0%, rgba(40,26,66,0.6) 0%, rgba(14,10,22,0.75) 100%);
 box-shadow:0 0 10px rgba(150,90,255,0.15);
 transition:box-shadow .25s ease, border-color .25s ease; position:relative;
}
.check input:checked {
 border-color:transparent;
 background:radial-gradient(120% 140% at 50% 0%, #c39bff 0%, #9a63f5 60%, #7d47e0 100%);
 box-shadow:0 0 16px rgba(150,90,255,0.5);
}
.check input:checked::after {
 content:''; position:absolute; left:5px; top:2px; width:5px; height:9px;
 border:solid #100a1c; border-width:0 2px 2px 0; transform:rotate(45deg);
}

/* pill checkboxes, for category / interest groups */
.pills { display:flex; flex-wrap:wrap; gap:8px; }
.pill { position:relative; }
.pill input { position:absolute; opacity:0; pointer-events:none; }
.pill span {
 display:inline-block; padding:9px 16px; border-radius:11px; font-size:13px; font-weight:700; cursor:pointer;
 color:rgba(201,163,255,0.75); border:1px solid rgba(168,120,255,0.3);
 background:radial-gradient(120% 140% at 50% 0%, rgba(40,26,66,0.5) 0%, rgba(14,10,22,0.7) 100%);
 box-shadow:0 0 14px rgba(150,90,255,0.10);
 transition:all .25s ease; user-select:none;
}
.pill span:hover { border-color:rgba(185,140,255,0.7); color:#e0ccff; }
.pill input:checked + span {
 color:#100a1c; text-shadow:none; border-color:transparent;
 background:radial-gradient(120% 140% at 50% 0%, #c39bff 0%, #9a63f5 60%, #7d47e0 100%);
 box-shadow:0 0 20px rgba(150,90,255,0.4);
}
.pill input:focus-visible + span { outline:1px solid rgba(185,140,255,0.8); outline-offset:2px; }

/* form messages */
.form-msg { font-size:13px; line-height:1.55; display:none; }
.form-msg.ok { color:#c9a3ff; text-shadow:0 0 18px rgba(150,90,255,0.5); display:block; }
.form-msg.err { color:rgba(255,110,150,0.85); display:block; }
.form-privacy { font-size:11.5px; line-height:1.55; color:rgba(244,241,234,0.35); text-align:center; }
.form-privacy a { color:inherit; text-decoration:underline; text-underline-offset:2px; }

/* success state, the confirmation glows like the mark */
.success-state { display:none; text-align:center; padding:34px 0 10px; position:relative; z-index:4; }
.success-state.show { display:block; }
.success-state .glow {
 font-size:24px; font-weight:700; color:#c9a3ff;
 text-shadow:0 0 20px rgba(150,90,255,0.7), 0 0 50px rgba(150,90,255,0.4);
}
.success-state p { font-size:14px; color:rgba(244,241,234,0.5); margin-top:10px; }

/* ============================================================
 content strips (brands page)
 ============================================================ */
.strip { position:relative; z-index:4; max-width:960px; margin:0 auto; padding:24px; }
.cards3 { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; }
.vcard {
 border:1px solid rgba(168,120,255,0.18); border-radius:14px; padding:20px 18px;
 background:radial-gradient(120% 160% at 50% 0%, rgba(40,26,66,0.35) 0%, rgba(10,8,16,0.7) 100%);
 box-shadow:0 0 22px rgba(150,90,255,0.12), inset 0 0 18px rgba(150,90,255,0.04);
 transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.vcard:hover {
 transform:translateY(-2px); border-color:rgba(168,120,255,0.4);
 box-shadow:0 0 32px rgba(150,90,255,0.22), inset 0 0 22px rgba(150,90,255,0.06);
}
.vcard h3 { font-size:19px; }
.vcard p { font-size:12.5px; color:rgba(244,241,234,0.5); line-height:1.55; margin-top:8px; }
/* hovering a tile makes its text lean into the light */
.vcard .wordmark, .vcard p { transition:color .3s ease, text-shadow .3s ease; }
.vcard:hover .wordmark {
 color:#eee0ff;
 text-shadow:
 -1px 0 rgba(240,245,255,0.8),
 1px 0 rgba(215,225,245,0.7),
 0 0 12px rgba(200,150,255,1),
 0 0 30px rgba(165,105,255,0.8),
 0 0 60px rgba(150,90,255,0.5);
}
.vcard:hover p {
 color:rgba(246,242,255,0.82);
 text-shadow:
 -0.5px 0 rgba(235,240,255,0.3),
 0.5px 0 rgba(210,220,240,0.26),
 0 0 12px rgba(160,98,255,0.55),
 0 0 28px rgba(150,90,255,0.28);
}

/* ============================================================
 admin, gate, tabs, tables
 ============================================================ */
.gate {
 position:fixed; inset:0; z-index:50; display:flex; flex-direction:column;
 align-items:center; justify-content:center; gap:22px; background:#000;
}
.gate .formcard { margin-top:6px; max-width:320px; }

.tabs { display:flex; gap:10px; position:relative; z-index:4; }
.tab {
 padding:10px 22px; border-radius:11px; font-size:14px; font-weight:700; cursor:pointer;
 color:rgba(201,163,255,0.6); border:1px solid rgba(168,120,255,0.25); background:transparent;
 box-shadow:0 0 14px rgba(150,90,255,0.10);
 font-family:'Nunito',sans-serif; transition:all .25s ease;
}
.tab:hover { color:#e0ccff; border-color:rgba(185,140,255,0.6); }
.tab.active {
 color:#100a1c; text-shadow:none; border-color:transparent;
 background:radial-gradient(120% 140% at 50% 0%, #c39bff 0%, #9a63f5 60%, #7d47e0 100%);
 box-shadow:0 0 24px rgba(150,90,255,0.4);
}

.adminbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; position:relative; z-index:4; }

.tablewrap {
 position:relative; z-index:4; overflow-x:auto; border:1px solid rgba(168,120,255,0.22); border-radius:14px;
 background:rgba(8,6,14,0.6); box-shadow:0 0 26px rgba(150,90,255,0.12), inset 0 0 22px rgba(150,90,255,0.03);
}
.dtable { width:100%; border-collapse:collapse; font-size:13.5px; min-width:640px; }
.dtable th {
 text-align:left; padding:13px 16px; font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:lowercase;
 color:#c9a3ff; border-bottom:1px solid rgba(168,120,255,0.18); cursor:pointer; user-select:none; white-space:nowrap;
 text-shadow:
 -0.5px 0 rgba(235,240,255,0.4),
 0.5px 0 rgba(210,220,240,0.35),
 0 0 12px rgba(160,98,255,0.55),
 0 0 28px rgba(150,90,255,0.3);
}
.dtable th:hover { color:#e0ccff; }
.dtable th .arrow { opacity:0.5; font-size:10px; margin-left:5px; }
.dtable td { padding:12px 16px; border-bottom:1px solid #101014; color:rgba(244,241,234,0.72); }
.dtable tr:last-child td { border-bottom:none; }
.dtable tr:hover td { background:rgba(150,90,255,0.04); }
.dtable .dim { color:rgba(244,241,234,0.38); }
.dtable .yes { color:#c9a3ff; }

.statusline { font-size:12px; color:#4a454f; position:relative; z-index:4; }

/* ============================================================
 micro-interactions, subtle motion. everything here is
 decorative: pages render fine without it, and the global
 prefers-reduced-motion rule below disables all of it.
 ============================================================ */

/* the page arrives softly; content dissolves out on nav.
 the fixed void field never fades, the world stays put,
 only the content travels through it. */
.page, .gate { animation:pageIn .55s ease both; }
@keyframes pageIn { from { opacity:0; transform:translateY(6px); } }
body.leaving .page, body.leaving .gate { animation:pageOut .24s ease forwards; }
@keyframes pageOut { to { opacity:0; transform:scale(.995); filter:blur(2px); } }

/* hero content drifts in, top to bottom */
@keyframes riseIn { from { opacity:0; transform:translateY(12px); } }
.hero > * { animation:riseIn .65s ease both; }
.hero > :nth-child(2) { animation-delay:.07s; }
.hero > :nth-child(3) { animation-delay:.14s; }
.hero > :nth-child(4) { animation-delay:.21s; }
.hero > :nth-child(5) { animation-delay:.28s; }
.hero > :nth-child(6) { animation-delay:.35s; }
.hero > :nth-child(7) { animation-delay:.42s; }

/* scroll reveal, the class is only added by minmi.js when
 motion is allowed, so nothing can be left hidden */
.reveal { opacity:0; transform:translateY(12px); transition:opacity .5s ease, transform .5s ease; }
.reveal.in { opacity:1; transform:none; }

/* the nebula breathes, barely */
.void.fixed-field .aura { animation:auraBreathe 11s ease-in-out infinite; }
@keyframes auraBreathe { 0%, 100% { opacity:1; } 50% { opacity:.87; } }
.void.fixed-field .sparkle { animation:sparkleShift 8s ease-in-out infinite; }
@keyframes sparkleShift { 0%, 100% { opacity:.6; } 50% { opacity:.44; } }

/* a focused field's label leans toward the light */
.field label { transition:color .25s ease, text-shadow .25s ease; }
.field:focus-within label {
 color:#eadcff;
 text-shadow:
 -0.5px 0 rgba(235,240,255,0.55),
 0.5px 0 rgba(210,220,240,0.5),
 0 0 14px rgba(170,110,255,0.8),
 0 0 34px rgba(150,90,255,0.45);
}

/* micro pop when something gets picked */
@keyframes pickPop { 0% { transform:scale(.92); } 60% { transform:scale(1.05); } 100% { transform:scale(1); } }
.check input:checked { animation:pickPop .25s ease; }
.pill input:checked + span { animation:pickPop .25s ease; }

/* busy buttons carry a slow sheen while sending */
.gbtn.busy { opacity:.85; pointer-events:none; }
.gbtn.busy::before {
 content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
 background:linear-gradient(115deg, transparent 32%, rgba(255,255,255,0.25) 50%, transparent 68%);
 transform:translateX(-100%); animation:sheen 1.2s linear infinite;
}
@keyframes sheen { to { transform:translateX(100%); } }

/* success states bloom in; the spark keeps breathing */
.success-state.show { animation:riseIn .6s ease both; }
.success-state .glow { animation:markBreathe 3.5s ease-in-out infinite; }

/* footer spark */
.foot-spark {
 display:inline-block; color:#9a63f5; font-size:13px;
 text-shadow:0 0 12px rgba(150,90,255,0.7), 0 0 30px rgba(150,90,255,0.4);
 animation:markBreathe 5s ease-in-out infinite;
}

/* admin rows settle in */
.dtable tbody tr { animation:rowIn .35s ease both; }
@keyframes rowIn { from { opacity:0; transform:translateY(4px); } }

/* ============================================================
 responsive
 ============================================================ */
@media (max-width: 640px) {
 .cards3 { grid-template-columns:1fr; }
 .wordmark.huge { font-size:56px; }
 .wordmark.big { font-size:44px; }
 .hero h1 { font-size:26px; }
 .nav { padding:18px 20px; }
 .nav-links { gap:18px; }
 .hero { padding:48px 20px 40px; }
}

@media (prefers-reduced-motion: reduce) {
 * { transition:none !important; animation:none !important; }
}

/* language switcher, sits with the nav links */
.langs { display:inline-flex; gap:10px; }
.nav-links .lang[aria-current] { opacity:.45; pointer-events:none; }