/* Adilson Muffins — tokens */
:root {
  --background: #ffffff;
  --surface: #f8f9fb;
  --surface-raised: #ffffff;
  --muted: #f1f3f5;
  --border: #e8eaed;
  --border-strong: #8b919b;
  --foreground: #111318;
  --foreground-secondary: #69707d;
  --primary: #111318;
  --primary-foreground: #ffffff;
  --primary-hover: #2b2e36;
  --primary-active: #000000;
  --secondary: #f1f3f5;
  --hover: #f2f4f6;
  --active: #e7eaee;
  --disabled: #f1f3f5;
  --disabled-foreground: #a3a8b1;
  --ring: #2563eb;
  --success: #0b7a4b;
  --success-soft: #e6f5ed;
  --warning: #965500;
  --warning-soft: #fff3df;
  --error: #c0281a;
  --error-soft: #fdebe9;
  --error-foreground: #ffffff;
  --info: #1d5bd6;
  --info-soft: #eaf0fc;
  --overlay: rgba(10, 11, 13, 0.44);
  --cover-forest: #0f3a2c;
  --cover-violet: #6a5cf0;
  --cover-graphite: #26282d;
  --cover-sky: #d9e8f8;
  --cover-sand: #ece5d8;
  --cover-ink-light: #ffffff;
  --cover-ink-dark: #111318;
  --shadow-xs: 0 1px 2px rgba(17, 19, 24, 0.05);
  --shadow-sm: 0 1px 2px rgba(17, 19, 24, 0.04), 0 2px 8px rgba(17, 19, 24, 0.04);
  --shadow-md: 0 2px 4px rgba(17, 19, 24, 0.04), 0 12px 24px -6px rgba(17, 19, 24, 0.10);
  --shadow-lg: 0 4px 8px rgba(17, 19, 24, 0.04), 0 16px 40px -8px rgba(17, 19, 24, 0.16);
  --shadow-xl: 0 8px 16px rgba(17, 19, 24, 0.06), 0 32px 64px -12px rgba(17, 19, 24, 0.24);
  --shadow-focus: 0 0 0 2px #ffffff, 0 0 0 4px #2563eb;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 9999px;
  --opacity-disabled: 0.48;
  --opacity-muted: 0.72;
  --opacity-skeleton: 0.6;
  --bp-mobile: 375px;
  --bp-tablet: 768px;
  --bp-laptop: 1024px;
  --bp-desktop: 1440px;
  --container-max: 1200px;
  --container-wide: 1320px;
  --prose-max: 680px;
  --grid-columns: 12;
  --gutter: 24px;
  --navbar-height: 64px;
  --sidebar-width: 248px;
  --duration-instant: 80ms;
  --duration-fast: 140ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --duration-slower: 480ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --z-sticky: 100;
  --z-dropdown: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
  --font-sans: Geist, "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --background: #0a0b0d;
  --surface: #111215;
  --surface-raised: #16171b;
  --muted: #1c1d22;
  --border: #26282e;
  --border-strong: #6b717c;
  --foreground: #f2f3f5;
  --foreground-secondary: #9ba1ac;
  --primary: #f2f3f5;
  --primary-foreground: #0a0b0d;
  --primary-hover: #d4d7dd;
  --primary-active: #bcc0c8;
  --secondary: #1f2126;
  --hover: #1d1f24;
  --active: #272a30;
  --disabled: #18191d;
  --disabled-foreground: #565b64;
  --ring: #7ea6ff;
  --success: #4ad69a;
  --success-soft: #0c2a1d;
  --warning: #f3b54a;
  --warning-soft: #2c2109;
  --error: #ff7b70;
  --error-soft: #351512;
  --error-foreground: #0a0b0d;
  --info: #82aaff;
  --info-soft: #101d38;
  --overlay: rgba(0, 0, 0, 0.66);
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.6);
  --shadow-md: 0 12px 24px -6px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 16px 40px -8px rgba(0, 0, 0, 0.8);
  --shadow-xl: 0 32px 64px -12px rgba(0, 0, 0, 0.9);
  --shadow-focus: 0 0 0 2px #0a0b0d, 0 0 0 4px #7ea6ff;
  color-scheme: dark;
} }
:root[data-theme="dark"] {
  --background: #0a0b0d;
  --surface: #111215;
  --surface-raised: #16171b;
  --muted: #1c1d22;
  --border: #26282e;
  --border-strong: #6b717c;
  --foreground: #f2f3f5;
  --foreground-secondary: #9ba1ac;
  --primary: #f2f3f5;
  --primary-foreground: #0a0b0d;
  --primary-hover: #d4d7dd;
  --primary-active: #bcc0c8;
  --secondary: #1f2126;
  --hover: #1d1f24;
  --active: #272a30;
  --disabled: #18191d;
  --disabled-foreground: #565b64;
  --ring: #7ea6ff;
  --success: #4ad69a;
  --success-soft: #0c2a1d;
  --warning: #f3b54a;
  --warning-soft: #2c2109;
  --error: #ff7b70;
  --error-soft: #351512;
  --error-foreground: #0a0b0d;
  --info: #82aaff;
  --info-soft: #101d38;
  --overlay: rgba(0, 0, 0, 0.66);
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.6);
  --shadow-md: 0 12px 24px -6px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 16px 40px -8px rgba(0, 0, 0, 0.8);
  --shadow-xl: 0 32px 64px -12px rgba(0, 0, 0, 0.9);
  --shadow-focus: 0 0 0 2px #0a0b0d, 0 0 0 4px #7ea6ff;
  color-scheme: dark;
}

/* Adilson Muffins — component stylesheet. Every value is a token from tokens.css. Prefix: am- */

/* ───────── Base ───────── */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-sans); font-size: 16px; line-height: 26px; letter-spacing: -0.006em; background: var(--background); color: var(--foreground); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: "ss01", "cv11"; }
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
a { color: inherit; text-decoration: none; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid transparent; box-shadow: var(--shadow-focus); }
::selection { background: var(--foreground); color: var(--background); }
.am-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.am-icon { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.am-icon--sm { width: 16px; height: 16px; } .am-icon--lg { width: 20px; height: 20px; } .am-icon--xl { width: 24px; height: 24px; }

/* ───────── Type ───────── */
.am-t-display-2xl { font-size: 96px; line-height: .92; font-weight: 700; letter-spacing: -.055em; }
.am-t-display-xl { font-size: 72px; line-height: .95; font-weight: 700; letter-spacing: -.05em; }
.am-t-display-lg { font-size: 56px; line-height: 1; font-weight: 600; letter-spacing: -.04em; }
.am-t-h1 { font-size: 44px; line-height: 48px; font-weight: 600; letter-spacing: -.035em; }
.am-t-h2 { font-size: 32px; line-height: 38px; font-weight: 600; letter-spacing: -.03em; }
.am-t-h3 { font-size: 24px; line-height: 30px; font-weight: 600; letter-spacing: -.02em; }
.am-t-h4 { font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -.015em; }
.am-t-h5 { font-size: 17px; line-height: 24px; font-weight: 600; letter-spacing: -.01em; }
.am-t-h6 { font-size: 15px; line-height: 22px; font-weight: 600; letter-spacing: -.005em; }
.am-t-body-lg { font-size: 18px; line-height: 30px; letter-spacing: -.01em; }
.am-t-body { font-size: 16px; line-height: 26px; }
.am-t-body-sm { font-size: 14px; line-height: 22px; letter-spacing: 0; }
.am-t-label { font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: 0; }
.am-t-caption { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0; }
.am-t-overline { font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--foreground-secondary); }
.am-t-code, code, kbd { font-family: var(--font-mono); font-size: 13px; line-height: 20px; letter-spacing: 0; }
.am-t-muted { color: var(--foreground-secondary); }
.am-t-tight { margin: 0; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }
.am-overline { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--foreground-secondary); }
.am-overline i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; display: inline-block; }
.am-gray { color: var(--foreground-secondary); }

/* ───────── Layout ───────── */
.am-container { width: 100%; max-width: calc(var(--container-max) + 2 * var(--space-10)); margin: 0 auto; padding: 0 var(--space-10); }
.am-container--wide { max-width: calc(var(--container-wide) + 2 * var(--space-10)); }
.am-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); }
.am-stack { display: flex; flex-direction: column; } .am-row { display: flex; align-items: center; }
.am-gap-1 { gap: var(--space-1); } .am-gap-2 { gap: var(--space-2); } .am-gap-3 { gap: var(--space-3); } .am-gap-4 { gap: var(--space-4); } .am-gap-6 { gap: var(--space-6); } .am-gap-8 { gap: var(--space-8); }
.am-wrap { flex-wrap: wrap; } .am-between { justify-content: space-between; } .am-grow { flex: 1; min-width: 0; }
.am-section { padding: var(--space-24) 0 0; }
.am-section-head { display: flex; align-items: end; justify-content: space-between; gap: var(--space-8); margin-bottom: var(--space-8); }
.am-section-head p { max-width: 420px; color: var(--foreground-secondary); font-size: 15px; line-height: 24px; }
.am-divider { height: 1px; background: var(--border); border: 0; margin: 0; }
.am-preview { padding: var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-start; }
.am-preview-col { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-5); }
.am-spec { font-size: 11px; line-height: 16px; font-weight: 500; color: var(--foreground-secondary); font-family: var(--font-mono); letter-spacing: 0; }

/* ───────── Button ───────── */
.am-btn { --h: 40px; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--h); padding: 0 var(--space-4); border-radius: var(--radius-md); border: 1px solid transparent; font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: -.005em; white-space: nowrap; cursor: pointer; user-select: none; position: relative; transition: background-color var(--duration-instant) var(--ease-standard), border-color var(--duration-instant) var(--ease-standard), color var(--duration-instant) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-instant) var(--ease-standard); }
.am-btn:active:not(:disabled) { transform: translateY(.5px); }
.am-btn .am-icon { width: 16px; height: 16px; }
.am-btn--primary { background: var(--primary); color: var(--primary-foreground); }
.am-btn--primary:hover, .am-btn--primary.is-hover { background: var(--primary-hover); }
.am-btn--primary:active, .am-btn--primary.is-active { background: var(--primary-active); }
.am-btn--secondary { background: var(--secondary); color: var(--foreground); }
.am-btn--secondary:hover, .am-btn--secondary.is-hover { background: var(--active); }
.am-btn--outline { background: var(--surface-raised); color: var(--foreground); border-color: var(--border); box-shadow: var(--shadow-xs); }
.am-btn--outline:hover, .am-btn--outline.is-hover { background: var(--hover); border-color: var(--border-strong); }
.am-btn--ghost { background: transparent; color: var(--foreground); }
.am-btn--ghost:hover, .am-btn--ghost.is-hover { background: var(--hover); }
.am-btn--ghost:active, .am-btn--ghost.is-active { background: var(--active); }
.am-btn--destructive { background: var(--error); color: var(--error-foreground); }
.am-btn--destructive:hover, .am-btn--destructive.is-hover { filter: brightness(.92); }
.am-btn--link { background: none; padding: 0; height: auto; color: var(--foreground); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 4px; }
.am-btn--link:hover { text-decoration-color: currentColor; }
.am-btn--sm { --h: 32px; padding: 0 var(--space-3); font-size: 13px; border-radius: 8px; }
.am-btn--lg { --h: 48px; padding: 0 var(--space-6); font-size: 15px; border-radius: 12px; }
.am-btn--icon { width: var(--h); padding: 0; }
.am-btn--round { border-radius: var(--radius-full); }
.am-btn--block { width: 100%; }
.am-btn:disabled, .am-btn[aria-disabled="true"] { background: var(--disabled); color: var(--disabled-foreground); border-color: transparent; box-shadow: none; cursor: not-allowed; filter: none; }
.am-btn.is-focus { box-shadow: var(--shadow-focus); }
.am-btn.is-loading { color: transparent !important; pointer-events: none; }
.am-btn.is-loading::after { content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%; border: 2px solid; border-color: var(--primary-foreground) var(--primary-foreground) transparent transparent; animation: am-spin .7s linear infinite; }
.am-btn--secondary.is-loading::after, .am-btn--outline.is-loading::after, .am-btn--ghost.is-loading::after { border-color: var(--foreground) var(--foreground) transparent transparent; }
.am-btn .am-kbd { margin-left: var(--space-1); }

/* ───────── Form fields ───────── */
.am-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.am-label { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--foreground); display: flex; justify-content: space-between; gap: var(--space-2); }
.am-label small { font-size: 13px; font-weight: 400; color: var(--foreground-secondary); }
.am-hint { font-size: 13px; line-height: 18px; color: var(--foreground-secondary); display: flex; gap: 6px; align-items: center; }
.am-hint--error { color: var(--error); }
.am-hint--success { color: var(--success); }
.am-input, .am-textarea, .am-select { width: 100%; height: 40px; padding: 0 var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--border-strong); background: var(--surface-raised); color: var(--foreground); font-size: 15px; line-height: 22px; box-shadow: var(--shadow-xs); transition: border-color var(--duration-instant) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); }
.am-input::placeholder, .am-textarea::placeholder { color: var(--foreground-secondary); }
.am-input:hover, .am-textarea:hover, .am-select:hover { border-color: var(--foreground-secondary); }
.am-input:focus-visible, .am-textarea:focus-visible, .am-select:focus-visible, .am-input.is-focus { border-color: var(--foreground); box-shadow: var(--shadow-focus); outline: none; }
.am-input[aria-invalid="true"], .am-textarea[aria-invalid="true"] { border-color: var(--error); }
.am-input:disabled, .am-textarea:disabled, .am-select:disabled { background: var(--disabled); color: var(--disabled-foreground); border-color: var(--border); box-shadow: none; cursor: not-allowed; }
.am-input--sm { height: 32px; font-size: 14px; border-radius: 8px; }
.am-input--lg { height: 48px; font-size: 16px; border-radius: 12px; }
.am-textarea { height: auto; min-height: 112px; padding: 10px var(--space-3); resize: vertical; }
.am-select { appearance: none; padding-right: 36px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2369707d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.am-affix { position: relative; display: flex; align-items: center; }
.am-affix > .am-icon { position: absolute; left: 12px; color: var(--foreground-secondary); pointer-events: none; width: 16px; height: 16px; }
.am-affix > .am-input { padding-left: 38px; }
.am-affix > .am-affix-end { position: absolute; right: 8px; display: flex; gap: 4px; align-items: center; }
.am-kbd, kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 5px; border: 1px solid var(--border); background: var(--surface); color: var(--foreground-secondary); font-family: var(--font-mono); font-size: 11px; line-height: 1; }
.am-counter { font-size: 12px; color: var(--foreground-secondary); text-align: right; }

/* Choice controls */
.am-choice { display: inline-flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 22px; cursor: pointer; }
.am-choice small { display: block; color: var(--foreground-secondary); font-size: 13px; line-height: 18px; }
.am-check, .am-radio { appearance: none; margin: 2px 0 0; flex: none; width: 18px; height: 18px; border: 1.5px solid var(--border-strong); background: var(--surface-raised); display: grid; place-content: center; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); }
.am-check { border-radius: 5px; }
.am-radio { border-radius: 50%; }
.am-check:hover, .am-radio:hover { border-color: var(--foreground); }
.am-check:checked, .am-check:indeterminate { background: var(--primary); border-color: var(--primary); }
.am-check:checked::before { content: ""; width: 10px; height: 6px; border: 2px solid var(--primary-foreground); border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); }
.am-check:indeterminate::before { content: ""; width: 8px; height: 2px; background: var(--primary-foreground); border-radius: 1px; }
.am-radio:checked { border-color: var(--primary); border-width: 5.5px; }
.am-check:disabled, .am-radio:disabled { background: var(--disabled); border-color: var(--border); cursor: not-allowed; }
.am-choice:has(:disabled) { color: var(--disabled-foreground); cursor: not-allowed; }
.am-switch { appearance: none; margin: 0; flex: none; width: 36px; height: 20px; border-radius: 999px; background: var(--border-strong); position: relative; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard); }
.am-switch::before { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface-raised); box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform var(--duration-fast) var(--ease-out); }
.am-switch:checked { background: var(--primary); }
.am-switch:checked::before { transform: translateX(16px); background: var(--primary-foreground); }
.am-switch:disabled { opacity: var(--opacity-disabled); cursor: not-allowed; }
.am-choice-card { display: flex; gap: 12px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-raised); cursor: pointer; }
.am-choice-card:has(:checked) { border-color: var(--foreground); box-shadow: inset 0 0 0 1px var(--foreground); }

/* Search */
.am-search { position: relative; display: flex; align-items: center; height: 44px; padding: 0 8px 0 14px; gap: 10px; border-radius: var(--radius-full); background: var(--surface-raised); border: 1px solid var(--border-strong); box-shadow: var(--shadow-xs); }
.am-search:focus-within { border-color: var(--foreground); box-shadow: var(--shadow-focus); }
.am-search input { flex: 1; border: 0; outline: 0; background: none; font-size: 15px; min-width: 0; height: 100%; }
.am-search input::placeholder { color: var(--foreground-secondary); }
.am-search .am-icon { color: var(--foreground-secondary); width: 18px; height: 18px; }
.am-search--square { border-radius: var(--radius-md); height: 40px; }

/* Date picker */
.am-calendar { width: 296px; padding: var(--space-4); border-radius: var(--radius-xl); background: var(--surface-raised); border: 1px solid var(--border); box-shadow: var(--shadow-lg); }
.am-calendar-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); font-size: 14px; font-weight: 600; }
.am-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.am-calendar-grid span { font-size: 11px; font-weight: 500; color: var(--foreground-secondary); height: 28px; line-height: 28px; }
.am-calendar-grid button { height: 36px; border: 0; background: none; border-radius: 8px; font-size: 13px; cursor: pointer; font-variant-numeric: tabular-nums; }
.am-calendar-grid button:hover { background: var(--hover); }
.am-calendar-grid button.is-out { color: var(--disabled-foreground); }
.am-calendar-grid button.is-today { box-shadow: inset 0 0 0 1px var(--border-strong); }
.am-calendar-grid button.is-selected { background: var(--primary); color: var(--primary-foreground); }
.am-calendar-grid button.is-range { background: var(--active); border-radius: 0; }

/* Upload */
.am-dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--space-2); padding: var(--space-8) var(--space-6); border: 1.5px dashed var(--border-strong); border-radius: var(--radius-xl); background: var(--surface); color: var(--foreground-secondary); font-size: 14px; line-height: 22px; transition: border-color var(--duration-fast), background-color var(--duration-fast); }
.am-dropzone strong { color: var(--foreground); font-weight: 500; }
.am-dropzone.is-drag { border-color: var(--foreground); background: var(--hover); }
.am-dropzone-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--surface-raised); border: 1px solid var(--border); color: var(--foreground); box-shadow: var(--shadow-xs); margin-bottom: 4px; }
.am-file { display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-raised); font-size: 14px; }
.am-file-thumb { width: 44px; height: 44px; border-radius: 8px; flex: none; }
.am-progress { height: 4px; border-radius: 99px; background: var(--muted); overflow: hidden; }
.am-progress > i { display: block; height: 100%; background: var(--foreground); border-radius: inherit; }

/* Content editor */
.am-editor { border: 1px solid var(--border-strong); border-radius: var(--radius-xl); background: var(--surface-raised); overflow: hidden; }
.am-editor:focus-within { border-color: var(--foreground); }
.am-toolbar { display: flex; align-items: center; gap: 2px; padding: 6px; border-bottom: 1px solid var(--border); background: var(--surface); flex-wrap: wrap; }
.am-toolbar .am-btn { --h: 30px; padding: 0 8px; border-radius: 7px; }
.am-toolbar .am-btn--icon { width: 30px; padding: 0; }
.am-toolbar .am-btn[aria-pressed="true"] { background: var(--active); }
.am-toolbar-sep { width: 1px; height: 18px; background: var(--border); margin: 0 4px; }
.am-editor-body { padding: var(--space-6); min-height: 200px; outline: none; }
.am-editor-foot { display: flex; justify-content: space-between; padding: 8px 14px; border-top: 1px solid var(--border); font-size: 12px; color: var(--foreground-secondary); }

/* ───────── Display ───────── */
.am-badge { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: var(--radius-sm); font-size: 12px; line-height: 16px; font-weight: 500; background: var(--muted); color: var(--foreground); white-space: nowrap; }
.am-badge .am-icon { width: 12px; height: 12px; stroke-width: 2; }
.am-badge--outline { background: var(--surface-raised); box-shadow: inset 0 0 0 1px var(--border); }
.am-badge--solid { background: var(--primary); color: var(--primary-foreground); }
.am-badge--success { background: var(--success-soft); color: var(--success); }
.am-badge--warning { background: var(--warning-soft); color: var(--warning); }
.am-badge--error { background: var(--error-soft); color: var(--error); }
.am-badge--info { background: var(--info-soft); color: var(--info); }
.am-badge--pill { border-radius: var(--radius-full); padding: 0 10px; }
.am-badge--glass { background: var(--surface-raised); box-shadow: var(--shadow-sm); border-radius: var(--radius-full); height: 26px; padding: 0 12px; }
.am-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.am-chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: var(--radius-full); border: 1px solid var(--border); background: var(--surface-raised); color: var(--foreground); font-size: 14px; font-weight: 500; cursor: pointer; transition: background-color var(--duration-instant), border-color var(--duration-instant), color var(--duration-instant); }
.am-chip:hover { background: var(--hover); border-color: var(--border-strong); }
.am-chip[aria-pressed="true"], .am-chip.is-selected { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }
.am-chip small { font-size: 12px; color: var(--foreground-secondary); font-variant-numeric: tabular-nums; }
.am-chip[aria-pressed="true"] small { color: inherit; opacity: .7; }
.am-chip--sm { height: 28px; padding: 0 10px; font-size: 13px; }
.am-tag { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 4px 0 10px; border-radius: 7px; background: var(--muted); font-size: 13px; font-weight: 500; }
.am-tag button { width: 20px; height: 20px; display: grid; place-items: center; border: 0; background: none; border-radius: 5px; cursor: pointer; color: var(--foreground-secondary); }
.am-tag button:hover { background: var(--active); color: var(--foreground); }
.am-tag .am-icon { width: 12px; height: 12px; }
.am-avatar { --s: 40px; width: var(--s); height: var(--s); border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--muted); color: var(--foreground); font-size: calc(var(--s) * .38); font-weight: 600; letter-spacing: -.02em; overflow: hidden; position: relative; box-shadow: inset 0 0 0 1px var(--border); }
.am-avatar--xs { --s: 24px; } .am-avatar--sm { --s: 32px; } .am-avatar--lg { --s: 56px; } .am-avatar--xl { --s: 80px; }
.am-avatar--ink { background: var(--primary); color: var(--primary-foreground); box-shadow: none; }
.am-avatar-status { position: absolute; right: 1px; bottom: 1px; width: 25%; height: 25%; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 2px var(--background); }
.am-avatar-group { display: flex; } .am-avatar-group > * { margin-left: -8px; box-shadow: 0 0 0 2px var(--background); } .am-avatar-group > :first-child { margin-left: 0; }
.am-tooltip { position: relative; display: inline-block; padding: 6px 10px; border-radius: var(--radius-sm); background: var(--foreground); color: var(--background); font-size: 12px; line-height: 16px; font-weight: 500; box-shadow: var(--shadow-lg); max-width: 240px; }
.am-tooltip::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 8px; height: 8px; background: inherit; transform: translateX(-50%) rotate(45deg); border-radius: 1px; }
.am-tooltip .am-kbd { background: transparent; color: inherit; border-color: color-mix(in srgb, currentColor 30%, transparent); margin-left: 6px; height: 18px; }

/* ───────── Overlays ───────── */
.am-menu { min-width: 220px; padding: 6px; border-radius: var(--radius-lg); background: var(--surface-raised); border: 1px solid var(--border); box-shadow: var(--shadow-lg); }
.am-menu-label { padding: 8px 10px 4px; font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--foreground-secondary); }
.am-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; height: 36px; padding: 0 10px; border: 0; border-radius: 8px; background: none; text-align: left; font-size: 14px; cursor: pointer; color: var(--foreground); }
.am-menu-item:hover, .am-menu-item.is-hover { background: var(--hover); }
.am-menu-item .am-icon { width: 16px; height: 16px; color: var(--foreground-secondary); }
.am-menu-item .am-kbd { margin-left: auto; }
.am-menu-item .am-check-mark { margin-left: auto; color: var(--foreground); }
.am-menu-item--danger, .am-menu-item--danger .am-icon { color: var(--error); }
.am-menu-item:disabled { color: var(--disabled-foreground); cursor: not-allowed; background: none; }
.am-menu-sep { height: 1px; background: var(--border); margin: 6px -6px; }
.am-dropdown { position: relative; display: inline-block; }
.am-dropdown > .am-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: var(--z-dropdown); opacity: 0; transform: translateY(-4px) scale(.98); transform-origin: top left; pointer-events: none; transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out); }
.am-dropdown.is-open > .am-menu { opacity: 1; transform: none; pointer-events: auto; }
.am-popover { width: 320px; padding: var(--space-5); border-radius: var(--radius-xl); background: var(--surface-raised); border: 1px solid var(--border); box-shadow: var(--shadow-lg); }
.am-popover h4 { font-size: 15px; line-height: 22px; font-weight: 600; margin-bottom: 4px; }
.am-popover p { font-size: 14px; line-height: 22px; color: var(--foreground-secondary); }
.am-backdrop { position: absolute; inset: 0; background: var(--overlay); display: flex; align-items: center; justify-content: center; padding: var(--space-6); z-index: var(--z-overlay); }
.am-modal { width: 100%; max-width: 480px; border-radius: var(--radius-2xl); background: var(--surface-raised); border: 1px solid var(--border); box-shadow: var(--shadow-xl); overflow: hidden; animation: am-pop var(--duration-slow) var(--ease-out); }
.am-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding: var(--space-6) var(--space-6) 0; }
.am-modal-head h3 { font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -.015em; }
.am-modal-head p { margin-top: 4px; font-size: 14px; line-height: 22px; color: var(--foreground-secondary); }
.am-modal-body { padding: var(--space-6); }
.am-modal-foot { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-4) var(--space-6); border-top: 1px solid var(--border); background: var(--surface); }
.am-modal-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--error-soft); color: var(--error); margin-bottom: var(--space-4); }
.am-drawer { position: absolute; top: 8px; right: 8px; bottom: 8px; width: 400px; max-width: calc(100% - 16px); display: flex; flex-direction: column; border-radius: var(--radius-2xl); background: var(--surface-raised); border: 1px solid var(--border); box-shadow: var(--shadow-xl); z-index: var(--z-modal); animation: am-slide var(--duration-slow) var(--ease-out); }
.am-drawer .am-modal-body { flex: 1; overflow: auto; }
.am-toast { display: flex; gap: 12px; width: 360px; padding: 14px 14px 14px 16px; border-radius: var(--radius-xl); background: var(--surface-raised); border: 1px solid var(--border); box-shadow: var(--shadow-lg); font-size: 14px; line-height: 20px; animation: am-rise var(--duration-slow) var(--ease-out); }
.am-toast strong { display: block; font-weight: 600; }
.am-toast p { color: var(--foreground-secondary); margin-top: 2px; }
.am-toast-icon { width: 20px; height: 20px; flex: none; margin-top: 0; }
.am-toast--success .am-toast-icon { color: var(--success); } .am-toast--error .am-toast-icon { color: var(--error); } .am-toast--warning .am-toast-icon { color: var(--warning); } .am-toast--info .am-toast-icon { color: var(--info); }
.am-toast--ink { background: var(--primary); color: var(--primary-foreground); border-color: transparent; }
.am-toast--ink p { color: inherit; opacity: .72; }
.am-toast-close { margin-left: auto; align-self: flex-start; }
.am-toaster { position: fixed; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 8px; z-index: var(--z-toast); }

/* ───────── Navigation ───────── */
.am-tabs { display: flex; gap: var(--space-6); border-bottom: 1px solid var(--border); }
.am-tab { position: relative; height: 44px; padding: 0; border: 0; background: none; font-size: 14px; font-weight: 500; color: var(--foreground-secondary); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: color var(--duration-instant); }
.am-tab:hover { color: var(--foreground); }
.am-tab[aria-selected="true"] { color: var(--foreground); }
.am-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--foreground); border-radius: 2px; }
.am-tab .am-badge { height: 18px; padding: 0 6px; font-size: 11px; }
.am-segmented { display: inline-flex; padding: 3px; gap: 2px; border-radius: 11px; background: var(--muted); }
.am-segmented .am-tab { height: 32px; padding: 0 14px; border-radius: 8px; }
.am-segmented .am-tab[aria-selected="true"] { background: var(--surface-raised); box-shadow: var(--shadow-sm); }
.am-segmented .am-tab[aria-selected="true"]::after { display: none; }
.am-tabpanel[hidden] { display: none; }
.am-accordion { border-top: 1px solid var(--border); }
.am-accordion details { border-bottom: 1px solid var(--border); }
.am-accordion summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 18px 0; font-size: 16px; line-height: 24px; font-weight: 500; cursor: pointer; border-radius: 4px; }
.am-accordion summary::-webkit-details-marker { display: none; }
.am-accordion summary .am-icon { transition: transform var(--duration-base) var(--ease-standard); color: var(--foreground-secondary); }
.am-accordion details[open] summary .am-icon { transform: rotate(45deg); }
.am-accordion details > div { padding: 0 48px 20px 0; color: var(--foreground-secondary); font-size: 15px; line-height: 24px; }
.am-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 14px; line-height: 20px; color: var(--foreground-secondary); }
.am-breadcrumb a:hover { color: var(--foreground); }
.am-breadcrumb .am-icon { width: 14px; height: 14px; opacity: .6; }
.am-breadcrumb [aria-current] { color: var(--foreground); font-weight: 500; }
.am-pagination { display: flex; align-items: center; gap: 4px; }
.am-page { min-width: 36px; height: 36px; padding: 0 8px; display: inline-grid; place-items: center; border-radius: 9px; border: 0; background: none; font-size: 14px; font-weight: 500; cursor: pointer; font-variant-numeric: tabular-nums; color: var(--foreground); }
.am-page:hover { background: var(--hover); }
.am-page[aria-current="page"] { background: var(--primary); color: var(--primary-foreground); }
.am-page:disabled { color: var(--disabled-foreground); cursor: not-allowed; background: none; }
.am-filters { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.am-filters-chips { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.am-link { text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 4px; text-decoration-thickness: 1px; transition: text-decoration-color var(--duration-instant); }
.am-link:hover { text-decoration-color: currentColor; }
.am-arrow-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; }
.am-arrow-link .am-icon { width: 16px; height: 16px; transition: transform var(--duration-base) var(--ease-out); }
.am-arrow-link:hover .am-icon { transform: translateX(3px); }

/* Navbar */
.am-nav { position: sticky; top: 0; z-index: var(--z-sticky); background: color-mix(in srgb, var(--background) 86%, transparent); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--border); }
.am-nav-inner { height: var(--navbar-height); display: flex; align-items: center; gap: var(--space-8); }
.am-wordmark { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; letter-spacing: -.02em; white-space: nowrap; }
.am-wordmark b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--primary); color: var(--primary-foreground); font-size: 12px; font-weight: 700; letter-spacing: -.04em; }
.am-nav-links { display: flex; gap: 2px; margin: 0 auto; }
.am-nav-link { height: 34px; padding: 0 12px; display: inline-flex; align-items: center; border-radius: 9px; font-size: 14px; font-weight: 500; color: var(--foreground-secondary); transition: color var(--duration-instant), background-color var(--duration-instant); }
.am-nav-link:hover { color: var(--foreground); background: var(--hover); }
.am-nav-link[aria-current="page"] { color: var(--foreground); background: var(--muted); }
.am-nav-actions { display: flex; align-items: center; gap: var(--space-2); }
.am-nav-burger { display: none; }
.am-mobile-menu { background: var(--background); display: flex; flex-direction: column; min-height: 100%; }
.am-mobile-menu-links { display: flex; flex-direction: column; padding: var(--space-4) var(--space-5); }
.am-mobile-menu-links a { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: -.03em; border-bottom: 1px solid var(--border); }
.am-mobile-menu-links a[aria-current] { color: var(--foreground); } .am-mobile-menu-links a:not([aria-current]) { color: var(--foreground-secondary); }
.am-mobile-menu-foot { margin-top: auto; padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }

/* Footer */
.am-footer { border-top: 1px solid var(--border); padding: var(--space-16) 0 var(--space-8); margin-top: var(--space-24); }
.am-footer-top { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--space-8); }
.am-footer h6 { font-size: 13px; line-height: 20px; font-weight: 500; color: var(--foreground-secondary); margin-bottom: var(--space-3); }
.am-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 22px; }
.am-footer ul a:hover { text-decoration: underline; text-underline-offset: 4px; }
.am-footer-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-16); padding-top: var(--space-6); border-top: 1px solid var(--border); font-size: 13px; color: var(--foreground-secondary); }
.am-socials { display: flex; gap: 4px; }

/* Sidebar */
.am-sidebar { width: var(--sidebar-width); flex: none; display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-4) var(--space-3); background: var(--surface); border-right: 1px solid var(--border); }
.am-sidebar-group { display: flex; flex-direction: column; gap: 1px; }
.am-sidebar-title { padding: 0 10px 6px; font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--foreground-secondary); }
.am-sidebar-item { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--foreground-secondary); cursor: pointer; }
.am-sidebar-item .am-icon { width: 17px; height: 17px; }
.am-sidebar-item:hover { background: var(--hover); color: var(--foreground); }
.am-sidebar-item[aria-current] { background: var(--surface-raised); color: var(--foreground); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--border); }
.am-sidebar-item .am-count { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--foreground-secondary); font-variant-numeric: tabular-nums; }
.am-toc { display: flex; flex-direction: column; gap: 2px; border-left: 1px solid var(--border); }
.am-toc a { padding: 6px 0 6px 16px; margin-left: -1px; border-left: 1px solid transparent; font-size: 14px; line-height: 20px; color: var(--foreground-secondary); }
.am-toc a:hover { color: var(--foreground); }
.am-toc a[aria-current] { color: var(--foreground); border-left-color: var(--foreground); font-weight: 500; }

/* Command search */
.am-cmdk { width: 100%; max-width: 600px; border-radius: var(--radius-2xl); background: var(--surface-raised); border: 1px solid var(--border); box-shadow: var(--shadow-xl); overflow: hidden; }
.am-cmdk-input { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 18px; border-bottom: 1px solid var(--border); }
.am-cmdk-input input { flex: 1; border: 0; outline: 0; background: none; font-size: 16px; }
.am-cmdk-input input::placeholder { color: var(--foreground-secondary); }
.am-cmdk-list { padding: 6px; max-height: 340px; overflow: auto; }
.am-cmdk-item { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 12px; border-radius: 10px; font-size: 14px; cursor: pointer; }
.am-cmdk-item[aria-selected="true"] { background: var(--hover); }
.am-cmdk-item .am-cmdk-ico { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--muted); color: var(--foreground); flex: none; }
.am-cmdk-item small { margin-left: auto; color: var(--foreground-secondary); font-size: 12px; }
.am-cmdk-foot { display: flex; gap: var(--space-4); padding: 10px 16px; border-top: 1px solid var(--border); background: var(--surface); font-size: 12px; color: var(--foreground-secondary); }
.am-cmdk-foot span { display: inline-flex; gap: 6px; align-items: center; }
mark { background: none; color: var(--foreground); font-weight: 600; }

/* ───────── Cards ───────── */
.am-card { background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); }
.am-card-pad { padding: var(--space-6); }
.am-project-card { display: flex; flex-direction: column; background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); padding: 6px; transition: box-shadow var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard), border-color var(--duration-base); cursor: pointer; }
.am-project-card:hover, .am-project-card.is-hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--border-strong); }
.am-project-card .am-cover { border-radius: 12px; aspect-ratio: 4 / 3; }
.am-project-card-body { position: relative; padding: 16px 12px 12px; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; }
.am-project-card-body .am-badge { position: absolute; top: -13px; left: 12px; }
.am-project-card h3 { font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -.02em; margin-top: 6px; }
.am-project-card p { grid-column: 1; font-size: 14px; line-height: 22px; color: var(--foreground-secondary); }
.am-project-card-cta { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--border); color: var(--foreground); transition: background-color var(--duration-base), color var(--duration-base), border-color var(--duration-base); }
.am-project-card-cta .am-icon { width: 16px; height: 16px; transition: transform var(--duration-base) var(--ease-out); }
.am-project-card:hover .am-project-card-cta, .am-project-card.is-hover .am-project-card-cta { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }
.am-project-card:hover .am-project-card-cta .am-icon, .am-project-card.is-hover .am-project-card-cta .am-icon { transform: rotate(-45deg); }
.am-project-card--wide { flex-direction: row; gap: var(--space-6); padding: 6px; }
.am-project-card--wide .am-cover { width: 58%; flex: none; aspect-ratio: 16 / 10; }
.am-project-card--wide .am-project-card-body { align-content: center; padding: var(--space-6) var(--space-6) var(--space-6) 0; }
.am-project-card--wide .am-project-card-body .am-badge { position: static; justify-self: start; }

.am-article-card { display: flex; flex-direction: column; gap: var(--space-4); cursor: pointer; }
.am-article-card .am-ph, .am-article-card .am-cover { aspect-ratio: 3 / 2; border-radius: var(--radius-xl); transition: transform var(--duration-slower) var(--ease-out); }
.am-article-card-media { overflow: hidden; border-radius: var(--radius-xl); border: 1px solid var(--border); }
.am-article-card:hover .am-article-card-media > * { transform: scale(1.025); }
.am-article-meta { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 18px; color: var(--foreground-secondary); flex-wrap: wrap; }
.am-article-meta i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }
.am-article-card h3 { font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -.02em; }
.am-article-card:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.am-article-card p { font-size: 15px; line-height: 24px; color: var(--foreground-secondary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.am-article-card--row { flex-direction: row; gap: var(--space-5); padding: 8px; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface-raised); box-shadow: var(--shadow-sm); transition: box-shadow var(--duration-base), border-color var(--duration-base); }
.am-article-card--row:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.am-article-card--row .am-article-card-media { width: 168px; flex: none; border: 0; border-radius: 12px; }
.am-article-card--row .am-article-card-media > * { aspect-ratio: 1 / 1; height: 100%; border-radius: 12px; }
.am-article-card--row .am-article-card-text { display: flex; flex-direction: column; gap: 8px; padding: 6px 8px 6px 0; }
.am-article-card--row h3 { font-size: 17px; line-height: 24px; }
.am-article-card--row p { font-size: 14px; line-height: 22px; }
.am-article-card--feature { display: grid; grid-template-columns: 1.25fr 1fr; gap: var(--space-10); align-items: center; }
.am-article-card--feature h3 { font-size: 36px; line-height: 42px; letter-spacing: -.035em; }
.am-article-card--feature p { font-size: 17px; line-height: 28px; -webkit-line-clamp: 3; }

/* Covers: reserved project colours + abstract device */
.am-cover { position: relative; overflow: hidden; display: block; background: var(--cover-sand); color: var(--cover-ink-dark); isolation: isolate; }
.am-cover--forest { background: var(--cover-forest); color: var(--cover-ink-light); }
.am-cover--violet { background: var(--cover-violet); color: var(--cover-ink-light); }
.am-cover--graphite { background: var(--cover-graphite); color: var(--cover-ink-light); }
.am-cover--sky { background: var(--cover-sky); color: var(--cover-ink-dark); }
.am-cover--sand { background: var(--cover-sand); color: var(--cover-ink-dark); }
.am-cover::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(currentColor 1px, transparent 1.2px); background-size: 16px 16px; opacity: .10; z-index: -1; }
.am-cover-mark { position: absolute; left: 18px; top: 16px; font-size: 13px; font-weight: 600; letter-spacing: -.01em; opacity: .9; }
.am-device { position: absolute; left: 50%; top: 18%; width: min(46%, 240px); aspect-ratio: 9 / 18.5; transform: translateX(-50%) rotate(-8deg); border-radius: 22px; background: currentColor; padding: 5px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.45); }
.am-device > div { width: 100%; height: 100%; border-radius: 18px; background: var(--cover-sand); padding: 16% 10% 10%; display: flex; flex-direction: column; gap: 7%; overflow: hidden; }
.am-cover--forest .am-device > div { background: #f4f1ea; } .am-cover--violet .am-device > div { background: #ffffff; } .am-cover--graphite .am-device > div { background: #121316; } .am-cover--sky .am-device > div { background: #ffffff; }
.am-device i { display: block; height: 7%; border-radius: 4px; background: var(--cover-ink-dark); opacity: .9; }
.am-device i:nth-child(2) { width: 72%; opacity: .5; height: 4%; } .am-device i:nth-child(3) { width: 54%; opacity: .3; height: 4%; }
.am-device b { display: block; flex: 1; border-radius: 10px; margin-top: 6%; }
.am-cover--forest .am-device b { background: var(--cover-forest); } .am-cover--violet .am-device b { background: var(--cover-violet); } .am-cover--graphite .am-device b { background: #2d2f35; } .am-cover--sky .am-device b { background: var(--cover-sky); } .am-cover--sand .am-device b { background: var(--cover-sand); }
.am-cover--graphite .am-device i { background: #ffffff; }
.am-device u { display: block; height: 10%; border-radius: 99px; background: var(--cover-ink-dark); }
.am-cover--graphite .am-device u { background: #ffffff; }
.am-device--flat { transform: translateX(-50%); top: 14%; }

/* Image placeholder (no confirmed media yet) */
.am-ph { position: relative; display: grid; place-items: center; background: var(--muted); color: var(--foreground-secondary); overflow: hidden; border-radius: inherit; }
.am-ph::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, transparent 0 11px, var(--border) 11px 12px); opacity: .7; }
.am-ph > span { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 99px; background: var(--surface-raised); box-shadow: var(--shadow-sm); font-size: 12px; line-height: 16px; font-weight: 500; color: var(--foreground-secondary); }
.am-ph > span .am-icon { width: 14px; height: 14px; }
.am-ph--portrait { background: linear-gradient(180deg, var(--muted), var(--active)); }
.am-ph--portrait::before { opacity: .35; }
.am-ph-mono { position: absolute; font-size: 260px; font-weight: 700; letter-spacing: -.07em; color: var(--background); opacity: .7; line-height: 1; user-select: none; }

/* Stat strip & misc */
.am-stats { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); }
.am-stat { display: flex; align-items: center; gap: 14px; padding: 20px 24px; }
.am-stat + .am-stat { border-left: 1px solid var(--border); }
.am-stat-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--border); flex: none; }
.am-stat strong { display: block; font-size: 15px; line-height: 22px; font-weight: 600; letter-spacing: -.01em; }
.am-stat span { display: block; font-size: 13px; line-height: 18px; color: var(--foreground-secondary); }
.am-feature-list { display: flex; flex-direction: column; }
.am-feature { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.am-feature:last-child { border-bottom: 0; }
.am-feature strong { display: block; font-size: 15px; line-height: 22px; font-weight: 600; }
.am-feature span { font-size: 14px; line-height: 20px; color: var(--foreground-secondary); }
.am-cta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); padding: var(--space-12); border-radius: var(--radius-2xl); background: var(--primary); color: var(--primary-foreground); position: relative; overflow: hidden; }
.am-cta::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(currentColor 1px, transparent 1.2px); background-size: 16px 16px; opacity: .08; mask-image: linear-gradient(90deg, transparent 30%, #000); -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000); }
.am-cta > * { position: relative; }
.am-cta p { opacity: .72; }
.am-cta .am-btn--primary { background: var(--primary-foreground); color: var(--primary); }
.am-cta .am-btn--ghost { color: var(--primary-foreground); box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 28%, transparent); }
.am-cta .am-btn--ghost:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.am-status { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--foreground-secondary); }
.am-status .am-dot { color: var(--success); box-shadow: 0 0 0 3px var(--success-soft); }

/* ───────── Feedback ───────── */
.am-alert { display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--radius-lg); font-size: 14px; line-height: 20px; border: 1px solid transparent; }
.am-alert strong { display: block; font-weight: 600; }
.am-alert p { margin-top: 2px; }
.am-alert .am-icon { margin-top: 1px; }
.am-alert--info { background: var(--info-soft); color: var(--info); }
.am-alert--success { background: var(--success-soft); color: var(--success); }
.am-alert--warning { background: var(--warning-soft); color: var(--warning); }
.am-alert--error { background: var(--error-soft); color: var(--error); }
.am-alert--neutral { background: var(--surface); border-color: var(--border); color: var(--foreground); }
.am-alert--neutral p { color: var(--foreground-secondary); }
.am-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); padding: var(--space-12) var(--space-6); border: 1px dashed var(--border-strong); border-radius: var(--radius-xl); }
.am-empty-icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--surface-raised); border: 1px solid var(--border); box-shadow: var(--shadow-sm); margin-bottom: var(--space-2); }
.am-empty h4 { font-size: 16px; line-height: 24px; font-weight: 600; }
.am-empty p { font-size: 14px; line-height: 22px; color: var(--foreground-secondary); max-width: 320px; margin-bottom: var(--space-3); }
.am-skel { display: block; background: var(--muted); border-radius: 6px; animation: am-pulse 1.4s var(--ease-standard) infinite; }
.am-spinner { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border); border-top-color: var(--foreground); animation: am-spin .7s linear infinite; flex: none; }
.am-spinner--sm { width: 14px; height: 14px; } .am-spinner--lg { width: 32px; height: 32px; border-width: 2.5px; }
.am-progress--indeterminate > i { width: 40%; animation: am-indet 1.2s var(--ease-standard) infinite; }

/* ───────── Prose (article) ───────── */
.am-prose { max-width: var(--prose-max); font-size: 18px; line-height: 32px; letter-spacing: -.01em; color: var(--foreground); }
.am-prose > * + * { margin-top: 24px; }
.am-prose h2 { font-size: 30px; line-height: 36px; font-weight: 600; letter-spacing: -.03em; margin-top: 56px; }
.am-prose h3 { font-size: 22px; line-height: 30px; font-weight: 600; letter-spacing: -.02em; margin-top: 40px; }
.am-prose h2 + *, .am-prose h3 + * { margin-top: 12px; }
.am-prose p { color: color-mix(in srgb, var(--foreground) 86%, var(--background)); }
.am-prose .am-lead { font-size: 21px; line-height: 34px; color: var(--foreground); letter-spacing: -.015em; }
.am-prose a { text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 4px; text-decoration-thickness: 1px; }
.am-prose a:hover { text-decoration-color: currentColor; }
.am-prose ul, .am-prose ol { padding-left: 24px; }
.am-prose li + li { margin-top: 8px; }
.am-prose li::marker { color: var(--foreground-secondary); }
.am-prose blockquote { margin: 40px 0; padding: 0 0 0 0; font-size: 26px; line-height: 36px; font-weight: 500; letter-spacing: -.025em; color: var(--foreground); }
.am-prose blockquote::before { content: "“"; display: block; font-size: 64px; line-height: 40px; height: 32px; color: var(--foreground-secondary); font-weight: 600; }
.am-prose blockquote cite { display: block; margin-top: 16px; font-size: 14px; line-height: 20px; font-style: normal; font-weight: 500; color: var(--foreground-secondary); letter-spacing: 0; }
.am-prose figure { margin: 40px 0; }
.am-prose figure .am-ph, .am-prose figure .am-cover, .am-prose figure .am-video { border-radius: var(--radius-xl); aspect-ratio: 16 / 9; }
.am-prose figcaption { margin-top: 12px; font-size: 13px; line-height: 20px; color: var(--foreground-secondary); text-align: center; }
.am-prose .am-wide { margin-left: -120px; margin-right: -120px; }
.am-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.am-gallery > * { aspect-ratio: 1 / 1; border-radius: var(--radius-lg); }
.am-gallery > :first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.am-video { position: relative; display: grid; place-items: center; background: var(--cover-graphite); color: #fff; overflow: hidden; }
.am-video-play { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.95); color: #111318; box-shadow: 0 10px 30px rgba(0,0,0,.3); }
.am-video-bar { position: absolute; left: 16px; right: 16px; bottom: 14px; display: flex; align-items: center; gap: 10px; font-size: 12px; font-variant-numeric: tabular-nums; }
.am-video-bar .am-progress { flex: 1; background: rgba(255,255,255,.25); } .am-video-bar .am-progress i { background: #fff; }
.am-prose pre { margin: 32px 0; padding: 18px 20px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); overflow: auto; font-family: var(--font-mono); font-size: 13.5px; line-height: 22px; letter-spacing: 0; }
.am-code-head { display: flex; justify-content: space-between; align-items: center; margin: 32px 0 -33px; padding: 8px 12px 8px 20px; border: 1px solid var(--border); border-bottom: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--surface); font-family: var(--font-mono); font-size: 12px; color: var(--foreground-secondary); position: relative; z-index: 1; }
.am-code-head + pre { border-top-left-radius: 0; border-top-right-radius: 0; }
.am-prose pre .k { color: var(--info); } .am-prose pre .s { color: var(--success); } .am-prose pre .c { color: var(--foreground-secondary); }
.am-prose :not(pre) > code { padding: 2px 6px; border-radius: var(--radius-sm); background: var(--muted); font-size: .85em; }
.am-prose hr { border: 0; height: 1px; background: var(--border); margin: 56px 0; }
.am-table-wrap { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.am-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; letter-spacing: 0; }
.am-table th { text-align: left; font-weight: 500; font-size: 13px; color: var(--foreground-secondary); background: var(--surface); padding: 10px 16px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.am-table td { padding: 12px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.am-table tr:last-child td { border-bottom: 0; }
.am-table tbody tr { transition: background-color var(--duration-instant); }
.am-table tbody tr:hover { background: var(--hover); }
.am-table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ───────── CMS shell ───────── */
.am-app { display: flex; min-height: 100%; background: var(--surface); }
.am-app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.am-app-top { height: var(--navbar-height); display: flex; align-items: center; gap: var(--space-4); padding: 0 var(--space-8); border-bottom: 1px solid var(--border); background: var(--background); }
.am-app-content { padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-6); }
.am-panel { background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); }
.am-panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 16px 20px; border-bottom: 1px solid var(--border); }
.am-panel-head h3 { font-size: 15px; line-height: 22px; font-weight: 600; }
.am-panel-body { padding: 20px; }
.am-kpi { padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.am-kpi span { font-size: 13px; color: var(--foreground-secondary); display: flex; align-items: center; gap: 8px; }
.am-kpi strong { font-size: 30px; line-height: 36px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.am-kpi small { font-size: 12px; color: var(--foreground-secondary); }
.am-thumb { width: 44px; height: 34px; border-radius: 7px; flex: none; overflow: hidden; }
.am-thumb .am-cover, .am-thumb .am-ph { width: 100%; height: 100%; }
.am-thumb .am-cover::before, .am-thumb .am-ph::before { display: none; }

/* ───────── Motion ───────── */
@keyframes am-spin { to { transform: rotate(360deg); } }
@keyframes am-pulse { 50% { opacity: var(--opacity-skeleton); } }
@keyframes am-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes am-slide { from { opacity: 0; transform: translateX(24px); } }
@keyframes am-rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes am-indet { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0ms !important; scroll-behavior: auto !important; }
  .am-skel { animation: none; }
  .am-spinner, .am-btn.is-loading::after { animation: am-spin 1.6s linear infinite !important; animation-duration: 1.6s !important; animation-iteration-count: infinite !important; }
}

/* ───────── Responsive ───────── */
@media (max-width: 1023px) {
  .am-container { padding: 0 var(--space-8); }
  .am-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 20px; }
  .am-section { padding-top: var(--space-20); }
  .am-stats { grid-template-columns: repeat(2, 1fr); }
  .am-stat:nth-child(3) { border-left: 0; } .am-stat:nth-child(n+3) { border-top: 1px solid var(--border); }
  .am-footer-top { grid-template-columns: 1fr 1fr; }
  .am-article-card--feature { grid-template-columns: 1fr; gap: var(--space-6); }
  .am-prose .am-wide { margin-left: 0; margin-right: 0; }
}
@media (max-width: 767px) {
  .am-container { padding: 0 var(--space-5); }
  .am-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
  .am-section { padding-top: var(--space-16); }
  .am-section-head { flex-direction: column; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-6); }
  .am-nav-links, .am-nav-actions .am-hide-sm { display: none; }
  .am-nav-burger { display: inline-flex; }
  .am-nav-inner { justify-content: space-between; }
  .am-t-display-2xl { font-size: 56px; } .am-t-display-xl { font-size: 44px; } .am-t-display-lg { font-size: 36px; line-height: 1.05; }
  .am-t-h1 { font-size: 34px; line-height: 40px; } .am-t-h2 { font-size: 26px; line-height: 32px; }
  .am-stats { grid-template-columns: 1fr 1fr; }
  .am-stat { padding: 16px; flex-direction: column; align-items: flex-start; gap: 10px; }
  .am-footer-top { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
  .am-footer-top > :first-child { grid-column: 1 / -1; }
  .am-footer-bottom { flex-direction: column; gap: var(--space-3); align-items: flex-start; }
  .am-cta { flex-direction: column; align-items: flex-start; padding: var(--space-8) var(--space-6); }
  .am-prose { font-size: 17px; line-height: 30px; }
  .am-prose h2 { font-size: 24px; line-height: 30px; }
  .am-article-card--row .am-article-card-media { width: 104px; }
  .am-project-card--wide { flex-direction: column; } .am-project-card--wide .am-cover { width: 100%; }
}
.am-fill > * { width: 100%; height: 100%; }

/* ───────── Site layer (on top of the Adilson Muffins design system) ───────── */
html { scroll-behavior: smooth; }
[hidden] { display: none !important; }
.am-article-card-media, .wide-cover, .phone { container-type: inline-size; }
body { min-height: 100%; }
.am-nav { top: env(safe-area-inset-top, 0px); }
.skip { position: absolute; left: 16px; top: -48px; z-index: 999; padding: 10px 14px; border-radius: 10px; background: var(--primary); color: var(--primary-foreground); font-size: 14px; font-weight: 500; }
.skip:focus { top: 12px; }
main { display: block; }
h1, h2, h3 { text-wrap: balance; }
.am-section-head h2 { max-width: 640px; }

/* Hero */
.hero { display: grid; grid-template-columns: 5fr 7fr; gap: var(--gutter); padding-top: var(--space-12); }
.hero-text { display: flex; flex-direction: column; justify-content: center; gap: 28px; padding-block: var(--space-10); min-width: 0; }
.hero-name { font-size: clamp(56px, 8vw, 116px); line-height: .9; font-weight: 700; letter-spacing: -.06em; }
.hero-name span { color: var(--foreground-secondary); }
.roles { display: flex; gap: 10px; flex-wrap: wrap; font-size: 17px; font-weight: 500; letter-spacing: -.01em; }
.roles i { width: 4px; height: 4px; border-radius: 50%; background: var(--border-strong); align-self: center; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-media { position: relative; border-radius: var(--radius-2xl); overflow: hidden; background: #f8f7f6; aspect-ratio: 7 / 6; max-width: 100%; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.float { position: absolute; background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: 16px 18px; font-size: 14px; line-height: 20px; }
.float strong { display: block; font-weight: 600; letter-spacing: -.01em; }
.float-a { top: 24px; right: 24px; width: 224px; }
.float-b { left: 24px; bottom: 24px; width: 236px; }
.float-c { right: 24px; bottom: 24px; padding: 10px 14px; }
.float .am-icon { color: var(--foreground-secondary); }
@media (prefers-reduced-motion: no-preference) {
  .float { animation: floatIn var(--duration-slower) var(--ease-out) both; }
  .float-b { animation-delay: 120ms; } .float-c { animation-delay: 240ms; }
  @keyframes floatIn { from { transform: translateY(10px); } }
}

/* Specialties */
.specs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.spec { display: flex; flex-direction: column; gap: 6px; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface-raised); transition: border-color var(--duration-base), box-shadow var(--duration-base), transform var(--duration-base) var(--ease-standard); }
.spec:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.spec .am-icon { margin-bottom: 20px; }
.spec strong { font-size: 15px; line-height: 22px; font-weight: 600; }
.spec span { font-size: 14px; line-height: 20px; color: var(--foreground-secondary); }

.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

/* About teaser */
.about { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; }
.photo { border-radius: var(--radius-2xl); overflow: hidden; background: #f6f5f4; aspect-ratio: 4 / 5; max-width: 100%; position: relative; }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo-note { position: absolute; left: 20px; bottom: 20px; }

/* Project covers with a real-looking phone */
.cv { position: relative; overflow: hidden; display: block; isolation: isolate; container-type: inline-size; }
.cv::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(currentColor 1px, transparent 1.2px); background-size: 16px 16px; opacity: .1; z-index: -1; }
.cv--forest { background: var(--cover-forest); color: var(--cover-ink-light); }
.cv--violet { background: var(--cover-violet); color: var(--cover-ink-light); }
.cv--graphite { background: var(--cover-graphite); color: var(--cover-ink-light); }
.cv--sky { background: var(--cover-sky); color: var(--cover-ink-dark); }
.cv--sand { background: var(--cover-sand); color: var(--cover-ink-dark); }
.cv-mark { position: absolute; left: 16px; top: 14px; font-size: 13px; font-weight: 600; letter-spacing: -.02em; }
.phone { position: absolute; left: 50%; top: 15%; width: 46%; max-width: 280px; aspect-ratio: 9 / 18.5; transform: translateX(-50%) rotate(-7deg); border-radius: 13% / 6.4%; background: #0d0e10; padding: 2.4%; box-shadow: 0 30px 60px -18px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.08); transition: transform var(--duration-slower) var(--ease-out); }
.cv--wide .phone { top: 12%; width: 30%; }
.cv--flat .phone { transform: translateX(-50%); }
a:hover .phone, .cv:hover .phone { transform: translateX(-50%) rotate(-4deg) translateY(-2%); }
.cv--flat:hover .phone { transform: translateX(-50%) translateY(-2%); }
.scr { container-type: inline-size; width: 100%; height: 100%; border-radius: 11% / 5.4%; overflow: hidden; display: flex; flex-direction: column; gap: 5cqw; padding: 14cqw 8cqw 8cqw; background: #fff; color: #111318; position: relative; }
.scr::before { content: ""; position: absolute; top: 3.5cqw; left: 50%; width: 30cqw; height: 6cqw; border-radius: 99px; background: #0d0e10; transform: translateX(-50%); }
.scr-k { font-size: 6cqw; font-weight: 600; opacity: .6; letter-spacing: 0; }
.scr-h { font-size: 12.5cqw; line-height: 1.02; font-weight: 700; letter-spacing: -.04em; }
.scr-img { flex: 1; border-radius: 6cqw; min-height: 0; position: relative; overflow: hidden; }
.scr-row { display: flex; gap: 3cqw; }
.scr-row i { flex: 1; height: 10cqw; border-radius: 3cqw; background: currentColor; opacity: .08; }
.scr-b { height: 15cqw; border-radius: 99px; display: grid; place-items: center; font-size: 6cqw; font-weight: 600; }
.scr--forest { background: #f3efe6; } .scr--forest .scr-img { background: var(--cover-forest); } .scr--forest .scr-b { background: var(--cover-forest); color: #fff; }
.scr--forest .scr-img::after { content: ""; position: absolute; inset: auto -10% -30% 30%; height: 80%; border-radius: 50%; background: #e7b85a; opacity: .9; }
.scr--violet .scr-img { background: #f1effe; } .scr--violet .scr-b { background: var(--cover-violet); color: #fff; }
.scr--violet .scr-img::after { content: ""; position: absolute; left: 12cqw; top: 10cqw; width: 14cqw; height: 14cqw; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #ff7a45; }
.scr--graphite { background: #121316; color: #f2f3f5; } .scr--graphite .scr-b { background: #f2f3f5; color: #121316; }
.scr--graphite .scr-img { background: linear-gradient(135deg, #3a3d44, #1d1f23); flex: none; aspect-ratio: 1.586; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.scr--graphite .scr-img::after { content: "IZZO"; position: absolute; left: 7cqw; bottom: 6cqw; font-size: 7cqw; font-weight: 700; letter-spacing: -.02em; color: #fff; }
.scr--graphite .scr-row i { background: #fff; }
.scr--sky .scr-img { background: var(--cover-sky); flex: none; width: 34cqw; height: 34cqw; border-radius: 50%; align-self: center; margin-block: 2cqw; }
.scr--sky .scr-img::after { content: ""; position: absolute; left: 50%; top: 24%; width: 36%; height: 36%; border-radius: 50%; background: #fff; transform: translateX(-50%); box-shadow: 0 13cqw 0 4cqw #fff; }
.scr--sky .scr-h { text-align: center; } .scr--sky .scr-k { text-align: center; }
.scr--sky .scr-b { background: #111318; color: #fff; margin-top: auto; }

.am-project-card .cv { border-radius: 12px; aspect-ratio: 4 / 3; }
.am-project-card--wide .cv { width: 58%; flex: none; aspect-ratio: 16 / 10; }

/* Article covers: typographic */
.ac { position: relative; overflow: hidden; container-type: inline-size; display: flex; flex-direction: column; justify-content: space-between; padding: 6cqw; isolation: isolate; transition: transform var(--duration-slower) var(--ease-out); }
.ac::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(currentColor 1px, transparent 1.2px); background-size: 16px 16px; opacity: .12; z-index: -1; }
.ac--graphite { background: var(--cover-graphite); color: var(--cover-ink-light); }
.ac--sky { background: var(--cover-sky); color: var(--cover-ink-dark); }
.ac--forest { background: var(--cover-forest); color: var(--cover-ink-light); }
.ac-k { font-size: max(11px, 3.2cqw); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.ac-w { font-size: 19cqw; line-height: .85; font-weight: 700; letter-spacing: -.06em; }
.ac-dot { position: absolute; right: 6cqw; top: 6cqw; width: 14cqw; height: 14cqw; border-radius: 50%; border: 1.5px solid currentColor; opacity: .5; }
.am-article-card .ac { aspect-ratio: 3 / 2; border-radius: var(--radius-xl); }
.am-article-card:hover .am-article-card-media .ac { transform: scale(1.025); }
.am-article-card--row .ac { aspect-ratio: 1 / 1; height: 100%; padding: 10cqw; border-radius: 12px; }
.am-article-card--row .ac-w { font-size: 26cqw; }
.am-article-card--row .ac-dot, .am-article-card--row .ac-k { display: none; }
.am-article-card--row .ac { justify-content: flex-end; }

/* Page headers */
.page-head { display: grid; grid-template-columns: 7fr 5fr; gap: var(--gutter); align-items: end; padding-block: var(--space-20) var(--space-10); }
.page-head p { max-width: 460px; justify-self: end; }
.filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-block: 16px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--navbar-height)); background: var(--background); z-index: 50; }
.filterbar .am-search { margin-left: auto; width: 300px; height: 40px; max-width: 100%; }
.filterbar .am-filters-chips { min-width: 0; }
.count { font-size: 14px; color: var(--foreground-secondary); text-align: center; padding-top: 40px; }

/* Detail pages */
.meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.meta div { padding-block: 20px; min-width: 0; }
.meta div + div { padding-left: 24px; border-left: 1px solid var(--border); }
.meta span { display: block; font-size: 13px; line-height: 18px; color: var(--foreground-secondary); }
.meta strong { font-size: 15px; font-weight: 500; }
.detail-hero { display: grid; grid-template-columns: 8fr 4fr; gap: var(--gutter); align-items: end; margin-top: var(--space-10); }
.detail-hero .actions { display: flex; gap: 8px; justify-content: flex-end; }
.wide-cover { border-radius: var(--radius-2xl); overflow: hidden; aspect-ratio: 21 / 9; max-width: 100%; }
.wide-cover .cv, .wide-cover .ac { width: 100%; height: 100%; }
.wide-cover .ac { padding: 4cqw; }
.wide-cover .ac-w { font-size: 11cqw; }
.wide-cover .ac-dot { width: 7cqw; height: 7cqw; right: 4cqw; top: 4cqw; }
.body-grid { display: grid; grid-template-columns: 3fr 7fr 2fr; gap: var(--gutter); margin-top: var(--space-16); }
.body-grid > * { min-width: 0; }
.toc-wrap { position: sticky; top: 112px; display: flex; flex-direction: column; gap: 12px; }
.steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.step { padding: 20px; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); }
.step b { font: 500 12px/16px var(--font-mono); color: var(--foreground-secondary); }
.step strong { display: block; font-size: 17px; line-height: 24px; margin: 8px 0 4px; font-weight: 600; letter-spacing: -.01em; color: var(--foreground); }
.step p { font-size: 15px; line-height: 24px; color: var(--foreground-secondary); margin: 0; }
.am-prose .steps { margin-top: 20px; }
.pending { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); font-size: 15px; line-height: 24px; color: var(--foreground-secondary); }
.pending .am-icon { margin-top: 3px; }
.next { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px; border: 1px solid var(--border); border-radius: var(--radius-2xl); background: var(--surface-raised); box-shadow: var(--shadow-sm); transition: box-shadow var(--duration-base), border-color var(--duration-base); }
.next:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.next .cv { width: 200px; aspect-ratio: 4 / 3; border-radius: 12px; flex: none; }
.next-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }

/* Article header */
.art-head { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; padding-top: var(--space-12); }
.author { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 6px; }
.author-id { display: flex; align-items: center; gap: 12px; }
.author .am-avatar { overflow: hidden; }
.author .am-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.share { display: flex; gap: 4px; }

/* About page */
.about-hero { display: grid; grid-template-columns: 6fr 5fr; gap: 64px; align-items: end; padding-top: var(--space-16); }
.about-hero .photo { aspect-ratio: 4 / 5; }
.principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.principle { padding: 24px; border-radius: var(--radius-xl); background: var(--surface); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.principle strong { font-size: 17px; line-height: 24px; font-weight: 600; letter-spacing: -.01em; }
.principle p { font-size: 15px; line-height: 24px; color: var(--foreground-secondary); }
.process { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--border); }
.process div { padding: 24px 24px 0 0; display: flex; flex-direction: column; gap: 8px; }
.process div + div { padding-left: 24px; border-left: 1px solid var(--border); }
.process b { font: 500 12px/16px var(--font-mono); color: var(--foreground-secondary); }
.process strong { font-size: 18px; line-height: 26px; font-weight: 600; letter-spacing: -.015em; }
.process p { font-size: 15px; line-height: 24px; color: var(--foreground-secondary); }
.split { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; }

/* Contact */
.contact { display: grid; grid-template-columns: 5fr 6fr; gap: 64px; padding-top: var(--space-20); align-items: start; }
.contact form { padding: 32px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.contact form .full { grid-column: 1 / -1; }
.copyline { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); font-size: 15px; }
.copyline span { flex: 1; min-width: 0; overflow-wrap: anywhere; user-select: all; }
.result { display: flex; flex-direction: column; gap: 16px; padding: 32px; }
.result pre { margin: 0; padding: 14px 16px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); white-space: pre-wrap; font: 13px/20px var(--font-mono); max-height: 220px; overflow: auto; }

/* Mobile menu & command search overlays */
.mmenu { position: fixed; inset: 0; z-index: var(--z-modal); background: var(--background); display: flex; flex-direction: column; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
.mmenu-top { height: var(--navbar-height); display: flex; align-items: center; justify-content: space-between; padding-inline: 20px; border-bottom: 1px solid var(--border); }
.cmdk-layer { position: fixed; inset: 0; z-index: var(--z-modal); background: var(--overlay); display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; }
.am-cmdk-item { color: var(--foreground); }
.am-cmdk-empty { padding: 28px 16px; text-align: center; font-size: 14px; color: var(--foreground-secondary); }

/* Responsive */
@media (max-width: 1023px) {
  .hero, .about, .split, .about-hero, .contact { grid-template-columns: 1fr; gap: 40px; }
  .hero-media { aspect-ratio: 4 / 4.2; }
  .specs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-head, .detail-hero { grid-template-columns: 1fr; }
  .page-head p { justify-self: start; }
  .detail-hero .actions { justify-content: flex-start; }
  .body-grid { grid-template-columns: 1fr; }
  .body-grid > aside:first-child { display: none; }
  .body-grid > aside:last-child { display: none; }
  .meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .meta div:nth-child(3) { border-left: 0; padding-left: 0; } .meta div:nth-child(n+3) { border-top: 1px solid var(--border); }
  .process { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process div:nth-child(3) { border-left: 0; padding-left: 0; }
  .about .photo, .about-hero .photo { max-width: 480px; }
}
@media (max-width: 767px) {
  .hero { padding-top: var(--space-8); }
  .hero-text { padding-block: 0; gap: 22px; }
  .hero-media { aspect-ratio: 4 / 5; }
  .float-a { display: none; }
  .float-b { left: 12px; bottom: 12px; width: auto; max-width: 62%; padding: 12px 14px; }
  .float-c { right: 12px; top: 12px; bottom: auto; }
  .specs, .grid-4, .grid-3, .grid-2, .principles { grid-template-columns: 1fr; }
  .am-project-card--wide .cv { width: 100%; }
  .filterbar { position: static; }
  .filterbar .am-search { margin-left: 0; width: 100%; }
  .filterbar .am-filters-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; margin-inline: -20px; padding-inline: 20px; scrollbar-width: none; }
  .filterbar .am-chip { flex: none; }
  .page-head { padding-block: var(--space-12) var(--space-8); }
  .meta { grid-template-columns: 1fr 1fr; }
  .wide-cover { aspect-ratio: 4 / 3; border-radius: var(--radius-xl); }
  .steps, .process { grid-template-columns: 1fr; }
  .process div, .process div + div { padding: 20px 0; border-left: 0; border-bottom: 1px solid var(--border); }
  .next { flex-direction: column; align-items: stretch; }
  .next .cv { width: 100%; }
  .contact form { grid-template-columns: 1fr; padding: 20px; }
  .result { padding: 20px; }
  .am-cta .am-row { flex-wrap: wrap; }
  .am-footer { margin-top: var(--space-16); }
}

/* ───────── Refinements v2 ───────── */
.am-stat > .am-stat-ico { display: grid; color: var(--foreground); }
.am-prose h2, [id] { scroll-margin-top: 96px; }
.show-sm { display: none; }
.nav-search { height: 36px; min-width: 196px; padding: 0 6px 0 12px; justify-content: flex-start; gap: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--foreground-secondary); font-size: 13px; font-weight: 400; border-radius: 10px; }
.nav-search:hover { border-color: var(--border-strong); color: var(--foreground); background: var(--surface); }
.nav-search .am-kbd { margin-left: auto; background: var(--background); }
.am-nav-inner { gap: var(--space-6); }
.am-nav-links { margin: 0 auto; }

/* hero polish */
.hero-media { box-shadow: inset 0 0 0 1px var(--border); }
.hero-media img { transition: transform 1.2s var(--ease-out); }
.hero-media:hover img { transform: scale(1.015); }
.hero-text .am-overline { margin-bottom: -6px; }

/* article covers */
.ac-top { display: flex; justify-content: space-between; gap: 12px; }
.ac-dot { display: none; }

/* wide project card */
.wide-meta { grid-column: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--border); }
.wide-meta dt { font-size: 12px; line-height: 16px; color: var(--foreground-secondary); }
.wide-meta dd { margin: 2px 0 0; font-size: 14px; line-height: 20px; font-weight: 500; }
.wide-link { grid-column: 1; margin-top: 20px; }
.am-project-card--wide .am-project-card-cta { display: none; }
.am-project-card--wide p { max-width: 400px; font-size: 15px; line-height: 24px; }

/* detail hero */
.detail-hero h1 { padding-bottom: 6px; }
.detail-hero .am-stack { gap: 16px; }

/* trio cover */
.cv--trio .phone { top: 14%; width: 21%; transform: translateX(-50%); }
.cv--trio .phone--side { width: 17%; top: 24%; opacity: .96; }
.cv--trio .phone--l { left: 27%; transform: translateX(-50%) rotate(-8deg); }
.cv--trio .phone--r { left: 73%; transform: translateX(-50%) rotate(8deg); }
.cv--trio:hover .phone { transform: translateX(-50%) translateY(-2%); }
.cv--trio:hover .phone--l { transform: translateX(-50%) rotate(-10deg) translateY(-1%); }
.cv--trio:hover .phone--r { transform: translateX(-50%) rotate(10deg) translateY(-1%); }

/* journal placeholder slot */
.soon { justify-content: center; min-height: 280px; }

/* footer: tighter bottom */
.am-footer-bottom { flex-wrap: wrap; gap: 12px; }

@media (max-width: 1180px) {
  .nav-search { min-width: 0; width: 36px; padding: 0; justify-content: center; border-color: transparent; background: transparent; }
  .nav-search .nav-search-label, .nav-search .am-kbd { display: none; }
}
@media (max-width: 1023px) {
  .am-nav-links { gap: 0; }
  .am-nav-link { padding: 0 9px; }
}
@media (max-width: 767px) {
  .show-sm { display: inline-flex; }
  .am-nav-actions { gap: 4px; }
  .am-wordmark { font-size: 14px; }
  .am-section { padding-top: var(--space-16); }
  .am-section-head { margin-bottom: var(--space-5); }
  .am-section-head h2.am-t-h1 { font-size: 30px; line-height: 36px; }
  .am-section-head p { font-size: 15px; }

  /* hero */
  .hero-name { font-size: clamp(64px, 19vw, 96px); letter-spacing: -.065em; }
  .roles { font-size: 14px; line-height: 22px; gap: 2px 7px; }
  .hero-text p.am-t-body-lg { font-size: 17px; line-height: 28px; }
  .hero-actions .am-btn { flex: 1 1 auto; }
  .hero-media { aspect-ratio: 4 / 4.6; }
  .float-b { padding: 12px 14px; }
  .float-b strong { font-size: 15px !important; line-height: 21px !important; margin-top: 6px !important; }

  /* stats compact */
  .am-stats { margin-top: 12px !important; box-shadow: var(--shadow-sm); }
  .am-stat { padding: 14px 16px; gap: 2px; }
  .am-stat > .am-stat-ico { display: none; }
  .am-stat strong { font-size: 14px; line-height: 20px; }

  /* specialties as a list */
  .specs { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--border); }
  .spec { display: grid; grid-template-columns: 22px 1fr; column-gap: 14px; row-gap: 2px; padding: 16px 0; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: none; }
  .spec:hover { box-shadow: none; transform: none; border-color: var(--border); }
  .spec .am-icon { grid-row: span 2; margin: 2px 0 0; }

  /* horizontal rails */
  .rail { display: flex !important; gap: 12px !important; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -20px; padding: 4px 20px 12px; scroll-padding-inline: 20px; scrollbar-width: none; }
  .rail::-webkit-scrollbar { display: none; }
  .rail > * { flex: 0 0 82%; scroll-snap-align: start; min-width: 0; }
  .rail > .am-article-card--row { flex-basis: 90%; }

  /* about teaser */
  .about { gap: 28px; }
  .about .photo { aspect-ratio: 1 / 1; }
  .about .photo img { object-position: 50% 20%; }

  /* pages */
  .page-head .am-t-display-xl, .detail-hero .am-t-display-xl, .about-hero .am-t-display-xl, .contact .am-t-display-xl { font-size: 44px; line-height: 1; }
  .wide-cover { aspect-ratio: 1 / 1; }
  .cv--trio .phone { width: 40%; top: 14%; }
  .cv--trio .phone--side { width: 30%; top: 26%; }
  .cv--trio .phone--l { left: 18%; } .cv--trio .phone--r { left: 82%; }
  .am-project-card--wide .am-project-card-body { padding: 16px 12px 12px; }
  .am-project-card--wide .am-project-card-body .am-badge { position: absolute; }
  .am-project-card--wide h3 { font-size: 20px !important; line-height: 28px !important; }
  .wide-meta { grid-template-columns: 1fr; gap: 10px; }
  .meta strong { font-size: 14px; }
  .about-hero { padding-top: var(--space-10); }
  .about-hero .photo { order: -1; aspect-ratio: 1 / 1; }
  .about-hero .photo img { object-position: 50% 18%; }
  .art-head { padding-top: var(--space-8); gap: 16px; }
  .art-head .am-t-display-lg { font-size: 34px; line-height: 38px; }
  .soon { display: none; }

  /* footer compact */
  .am-footer { padding-top: var(--space-12); }
  .am-footer-top > :nth-child(3) { display: none; }
  .am-footer-bottom { margin-top: var(--space-10); flex-direction: row; align-items: center; justify-content: space-between; }
}
.am-project-card--wide .am-project-card-body { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; }
.am-project-card--wide .am-project-card-body h3 { margin-top: 10px; }
.am-project-card--wide .wide-meta { align-self: stretch; }
.cv--graphite .phone { box-shadow: 0 30px 60px -18px rgba(0,0,0,.6), inset 0 0 0 1.5px rgba(255,255,255,.18); }

/* ───────── Motion layer ───────── */
@view-transition { navigation: auto; }
.hero-name span { color: inherit; }
.hero-name .ln { display: block; overflow: hidden; padding-bottom: .04em; margin-bottom: -.04em; }
.hero-name .ln > span { display: block; }
.hero-name .sec { color: var(--foreground-secondary); }

/* seal on the portrait (always on the light photo) */
.seal { position: absolute; left: 22px; top: 22px; width: 104px; height: 104px; color: var(--cover-ink-dark); }
.seal text { font: 600 8.6px/1 var(--font-sans); letter-spacing: .18em; fill: currentColor; }
.seal .seal-am { font-size: 20px; letter-spacing: -.04em; font-weight: 700; }
.seal::before { content: none; }

/* marquee band */
.marquee { margin-top: var(--space-16); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; width: max-content; }
.marquee-track > span { display: flex; align-items: center; gap: 28px; padding: 22px 14px; }
.marquee b { font-size: 34px; line-height: 40px; font-weight: 600; letter-spacing: -.035em; white-space: nowrap; color: var(--foreground); }
.marquee b:nth-of-type(even) { color: var(--foreground-secondary); }
.marquee i { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); flex: none; }

/* reading progress */
.read-progress { position: fixed; left: 0; right: 0; top: calc(env(safe-area-inset-top, 0px) + var(--navbar-height)); height: 2px; z-index: var(--z-sticky); pointer-events: none; }
.read-progress i { display: block; height: 100%; background: var(--foreground); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }

/* nav scroll state */
.am-nav { transition: transform var(--duration-slow) var(--ease-out), box-shadow var(--duration-base); }
.am-nav.is-scrolled { box-shadow: 0 1px 0 var(--border), 0 8px 24px -16px rgba(0,0,0,.25); }
.am-nav.is-hidden { transform: translateY(-100%); }

/* CTA spotlight */
.am-cta { --mx: 70%; --my: 30%; }
.am-cta::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(420px circle at var(--mx) var(--my), color-mix(in srgb, currentColor 9%, transparent), transparent 70%); }

/* buttons & links: arrow nudge */
.am-btn > .am-icon:last-child:not(:first-child), .am-arrow-link .am-icon { transition: transform var(--duration-base) var(--ease-out); }
.am-btn:hover > .am-icon:last-child:not(:first-child) { transform: translateX(3px); }

/* card tilt (set by JS) */
.am-project-card { transform-style: preserve-3d; will-change: transform; }
.am-project-card.is-tilting { transition: transform 80ms linear, box-shadow var(--duration-base), border-color var(--duration-base); }

@media (prefers-reduced-motion: no-preference) {
  /* status dot: soft pulse every few seconds */
  .am-status .am-dot { position: relative; box-shadow: none; }
  .am-status .am-dot::before, .am-status .am-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--success); }
  .am-status .am-dot::before { animation: dotPulse 2.6s var(--ease-out) infinite; }
  .am-status .am-dot::after { animation: dotGlow 2.6s ease-in-out infinite; }
  @keyframes dotPulse { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(3.4); opacity: 0; } }
  @keyframes dotGlow { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 35% { box-shadow: 0 0 10px 2px color-mix(in srgb, var(--success) 60%, transparent); } }

  /* hero intro sequence */
  .hero-text > * { animation: rise .9s var(--ease-out) both; }
  .hero-text > :nth-child(1) { animation-delay: .05s; }
  .hero-text > :nth-child(3) { animation-delay: .45s; }
  .hero-text > :nth-child(4) { animation-delay: .55s; }
  .hero-text > :nth-child(5) { animation-delay: .65s; }
  .hero-name { animation: none !important; }
  .hero-name .ln > span { animation: lineUp 1s var(--ease-out) both; }
  .hero-name .ln:nth-child(1) > span { animation-delay: .12s; }
  .hero-name .ln:nth-child(2) > span { animation-delay: .24s; }
  .hero-media { animation: mediaIn 1.1s var(--ease-out) .1s both; }
  .hero-media img { animation: kenburns 1.8s var(--ease-out) backwards; }
  .float { animation: floatIn .8s var(--ease-out) both, bob 7s ease-in-out infinite; }
  .float-a { animation-delay: .7s, 1.5s; }
  .float-b { animation-delay: .85s, 2.4s; }
  .float-c { animation-delay: 1s, 3.2s; }
  .seal { animation: spin 26s linear infinite; }
  .am-stats { animation: rise .9s var(--ease-out) .75s both; }
  @keyframes rise { from { opacity: 0; transform: translateY(18px); } }
  @keyframes lineUp { from { transform: translateY(105%); } }
  @keyframes mediaIn { from { opacity: 0; transform: translateY(24px) scale(.985); } }
  @keyframes kenburns { from { transform: scale(1.08); } }
  @keyframes floatIn { from { opacity: 0; transform: translateY(14px) scale(.96); } }
  @keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
  @keyframes spin { to { rotate: 360deg; } }

  /* marquee */
  .marquee-track { animation: marquee 38s linear infinite; }
  .marquee:hover .marquee-track { animation-play-state: paused; }
  @keyframes marquee { to { transform: translateX(-50%); } }

  /* scroll reveal (elements are visible until JS marks them on entry) */
  .rv-in { animation: rise .8s var(--ease-out) backwards; animation-delay: var(--d, 0s); }

  /* covers come alive on hover */
  .am-project-card:hover .scr-img::after, .cv--trio:hover .scr-img::after { animation: nudge 1.4s ease-in-out infinite; }
  @keyframes nudge { 50% { translate: 0 -6%; } }
  .ac::before { transition: background-position 1.2s var(--ease-out); }
  .am-article-card:hover .ac::before { background-position: 8px 8px; }
  .spec:hover .am-icon { animation: wiggle .5s var(--ease-out); }
  @keyframes wiggle { 30% { rotate: -10deg; } 60% { rotate: 6deg; } }
  .page-head > *, .detail-hero, .art-head > *, .about-hero > *, .contact > * { animation: rise .8s var(--ease-out) both; }
  .page-head > :nth-child(2), .about-hero > :nth-child(2), .contact > :nth-child(2) { animation-delay: .12s; }
  .art-head > :nth-child(2) { animation-delay: .06s; } .art-head > :nth-child(3) { animation-delay: .12s; } .art-head > :nth-child(4) { animation-delay: .18s; }
  .wide-cover { animation: mediaIn 1s var(--ease-out) .15s both; }
  .cv--trio .phone { animation: phoneUp 1.1s var(--ease-out) both; }
  .cv--trio .phone--l { animation-delay: .35s; } .cv--trio .phone--r { animation-delay: .45s; } .cv--trio .phone:not(.phone--side) { animation-delay: .2s; }
  @keyframes phoneUp { from { opacity: 0; translate: 0 18%; } }
}
@media (max-width: 767px) {
  .seal { width: 76px; height: 76px; left: 14px; top: 14px; }
  .marquee { margin-top: var(--space-10); }
  .marquee b { font-size: 24px; line-height: 30px; }
  .marquee-track > span { padding: 16px 10px; gap: 20px; }
}

/* ───────── Real content v3 ───────── */
.cv--ocean { background: #123a5a; color: var(--cover-ink-light); }
.ac--ocean { background: #123a5a; color: var(--cover-ink-light); }
.ac--sand { background: var(--cover-sand); color: var(--cover-ink-dark); }
.ac--violet { background: var(--cover-violet); color: var(--cover-ink-light); }
.am-article-card--row .ac-w, .ac-w { white-space: nowrap; }

/* project screens per product */
.scr--sand .scr-b { background: #111318; color: #fff; }
.scr--assina-mz .scr-img { background: #f6f2ea; border: 1px dashed #c9bfae; }
.scr--assina-mz .scr-img::after { content: ""; position: absolute; left: 14%; right: 14%; bottom: 26%; height: 22%; border-bottom: 2px solid #111318; background: no-repeat center/80% 70% linear-gradient(transparent, transparent); }
.scr--assina-mz .scr-img::before { content: "\2713  Assinado"; position: absolute; left: 10%; top: 12%; font-size: 6cqw; font-weight: 600; color: #0b7a4b; }
.scr--ocean { background: #f4f7fb; } .scr--ocean .scr-b { background: #123a5a; color: #fff; }
.scr--uem-siga .scr-img { background: #fff; box-shadow: inset 0 0 0 1px #e3e8ef; display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw; padding: 4cqw; }
.scr--uem-siga .scr-img::before, .scr--uem-siga .scr-img::after { content: ""; border-radius: 3cqw; background: #e8eef6; }
.scr--sky .scr-h { text-align: left; } .scr--sky .scr-k { text-align: left; }
.scr--smart-izi { background: #fff; }
.scr--smart-izi .scr-img { width: auto; height: auto; flex: 1; border-radius: 6cqw; align-self: stretch; margin: 0; background: linear-gradient(135deg, #1f4f86, #0f2c4f); }
.scr--smart-izi .scr-img::after { content: "MZN ••••"; left: 8cqw; top: auto; bottom: 8cqw; width: auto; height: auto; border-radius: 0; background: none; box-shadow: none; transform: none; color: #fff; font-size: 8cqw; font-weight: 700; letter-spacing: -.02em; }
.scr--smart-izi .scr-b { margin-top: 0; }
.scr--zap-play .scr-img { flex: none; aspect-ratio: 16 / 10; background: linear-gradient(160deg, #3c3f46 0%, #17181b 100%); }
.scr--zap-play .scr-img::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14cqw; height: 14cqw; border-radius: 50%; background: #fff; transform: translate(-50%, -50%); clip-path: none; box-shadow: 0 0 0 4cqw rgba(255,255,255,.15); }
.scr--zap-play .scr-row i { height: 16cqw; opacity: .14; }
.scr--zap-play .scr-row + .scr-b { margin-top: auto; }

/* project cards: kind + meta */
.am-project-card-body .pfoot { grid-column: 1 / -1; margin-top: 12px; }
.pfoot .kind { height: 22px; }
.pmeta { grid-column: 1; font-size: 13px; line-height: 18px; color: var(--foreground-secondary); margin-top: 4px; }
.pcard--big .cv { aspect-ratio: 16 / 11; }
.pcard--big h3 { font-size: 26px; line-height: 32px; letter-spacing: -.025em; }
.pcard--big .phone { width: 36%; }
.group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.filterbar + [data-empty], [data-empty] { margin-top: 32px; }
.jgrid { gap: 40px 24px; }

/* testimonial */
.testi-wrap { display: flex; justify-content: center; }
.testi { margin: 0; max-width: 760px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.testi-mark { color: var(--foreground-secondary); }
.testi blockquote { margin: 0; font-size: clamp(28px, 4vw, 44px); line-height: 1.1; font-weight: 600; letter-spacing: -.035em; text-wrap: balance; }
.testi figcaption { display: flex; align-items: center; gap: 12px; text-align: left; }
.testi figcaption strong { display: block; font-size: 15px; line-height: 20px; }
.testi figcaption small { display: block; font-size: 13px; color: var(--foreground-secondary); }
.am-prose .testi { margin: 48px auto 0; padding: 32px; border: 1px solid var(--border); border-radius: var(--radius-2xl); background: var(--surface); }
.am-prose .testi blockquote { font-size: 28px; line-height: 34px; }
.am-prose .testi blockquote::before { content: none; }

/* experience timeline */
.xps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.xp { display: grid; grid-template-columns: 3fr 9fr; gap: var(--gutter); padding: 28px 0; border-bottom: 1px solid var(--border); }
.xp-when { font: 500 13px/20px var(--font-mono); color: var(--foreground-secondary); padding-top: 2px; }
.xp-what strong { display: block; font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -.015em; }
.xp-what > span { display: block; font-size: 15px; color: var(--foreground-secondary); margin-top: 2px; }
.xp-what ul { margin: 12px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; line-height: 24px; max-width: 720px; }
.xp-what li::marker { color: var(--foreground-secondary); }
.edu { display: flex; gap: 16px; align-items: flex-start; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface-raised); }
.edu strong { display: block; font-size: 16px; line-height: 24px; font-weight: 600; }
.edu span { display: block; font-size: 15px; color: var(--foreground-secondary); }
.edu small { display: block; margin-top: 4px; font: 500 12px/16px var(--font-mono); color: var(--foreground-secondary); }
.skills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.skillset { padding: 24px; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); display: flex; flex-direction: column; gap: 14px; }
.talks { display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.talk { display: grid; grid-template-columns: 120px 1fr auto; gap: 16px; align-items: center; padding: 20px 4px; border-bottom: 1px solid var(--border); transition: background-color var(--duration-instant), padding var(--duration-base) var(--ease-out); }
.talk:hover { background: var(--hover); padding-inline: 12px; }
.talk-date { font: 500 13px/20px var(--font-mono); color: var(--foreground-secondary); }
.talk-t strong { display: block; font-size: 17px; line-height: 24px; font-weight: 600; letter-spacing: -.01em; }
.talk-t small { font-size: 14px; color: var(--foreground-secondary); }
.talk .am-icon { color: var(--foreground-secondary); }

@media (max-width: 1023px) {
  .skills { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .xp { grid-template-columns: 1fr; gap: 6px; padding: 22px 0; }
  .xp-what strong { font-size: 18px; line-height: 26px; }
  .talk { grid-template-columns: 1fr auto; } .talk-date { grid-column: 1 / -1; }
  .pcard--big h3 { font-size: 20px; line-height: 28px; }
  .grid-2:not(.rail), .grid-4:not(.rail) { grid-template-columns: 1fr; }
  .testi blockquote { font-size: 28px; }
  .am-prose .testi { padding: 24px; }
}
.am-project-card-body .pfoot .am-badge { position: static; }
.specs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1023px) { .specs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .specs { grid-template-columns: 1fr; } }
.cv--wine { background: #4d1a2a; color: var(--cover-ink-light); }
.scr--wine { background: #fbf7f8; } .scr--wine .scr-b { background: #4d1a2a; color: #fff; }
.scr--sira .scr-img { flex: none; height: 30cqw; background: #fff; box-shadow: inset 0 0 0 1px #eadde1; }
.scr--sira .scr-img::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12cqw; height: 15cqw; transform: translate(-50%, -50%); border-radius: 6cqw 6cqw 7cqw 7cqw; border: 1.5cqw solid #4d1a2a; }
.real { gap: 16px !important; }
.real .pcard--big .phone { width: 42%; }
.real .pcard--big h3 { font-size: 22px; line-height: 30px; }
/* community */
.comm { display: flex; flex-direction: column; gap: 6px; padding: 24px; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface-raised); box-shadow: var(--shadow-sm); transition: box-shadow var(--duration-base), border-color var(--duration-base), transform var(--duration-base) var(--ease-standard); }
.comm:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); transform: translateY(-2px); }
.comm-top { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.comm-top > .am-icon:last-child { margin-left: auto; color: var(--foreground-secondary); transition: transform var(--duration-base) var(--ease-out); }
.comm:hover .comm-top > .am-icon:last-child { transform: translate(2px, -2px); }
.comm-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--primary); color: var(--primary-foreground); }
.comm-net strong { display: block; font-size: 15px; line-height: 20px; font-weight: 600; }
.comm-net small { font-size: 13px; color: var(--foreground-secondary); }
.comm-num { font-size: 44px; line-height: 1; font-weight: 700; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.comm-lbl { font-size: 14px; color: var(--foreground-secondary); }
.comm-d { font-size: 14px; line-height: 22px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--border); }
.xp-what strong a { text-decoration-color: var(--border-strong); }
/* real images */
.cv--img::before { display: none; }
.cv--img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slower) var(--ease-out); }
.am-project-card:hover .cv--img img { transform: scale(1.04); }
.next .cv--img, .am-thumb .cv--img { position: relative; }
.hero-posters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 40px; border-radius: var(--radius-2xl); }
.hero-posters img { width: 100%; height: auto; border-radius: var(--radius-xl); box-shadow: 0 30px 60px -20px rgba(0,0,0,.45); }
.hero-shot { border-radius: var(--radius-2xl); overflow: hidden; background: #111; }
.hero-shot img { width: 100%; height: auto; }
@media (prefers-reduced-motion: no-preference) {
  .hero-posters, .hero-shot { animation: mediaIn 1s var(--ease-out) .15s both; }
  .hero-posters img:nth-child(2) { animation: rise 1s var(--ease-out) .35s both; }
}
@media (min-width: 1024px) { .hero-posters { grid-template-columns: repeat(2, minmax(0, 420px)); justify-content: center; padding: 56px; } }
@media (max-width: 767px) { .hero-posters { padding: 16px; gap: 10px; border-radius: var(--radius-xl); } .hero-shot { border-radius: var(--radius-xl); } }
.hero-posters { background: var(--surface); border: 1px solid var(--border); }
.evphotos { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 16px; margin-top: 40px; }
.evphotos figure { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.evphotos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-xl); border: 1px solid var(--border); }
.evphotos figcaption { font-size: 13px; line-height: 20px; color: var(--foreground-secondary); }
@media (max-width: 767px) { .evphotos { grid-template-columns: 1fr; } }