/* Geist + Geist Mono — same typeface family used on carmabella.dev/en */
@font-face{
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('https://cdn.jsdelivr.net/npm/geist@1.7.2/dist/fonts/geist-sans/Geist-Variable.woff2') format('woff2');
}
@font-face{
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('https://cdn.jsdelivr.net/npm/geist@1.7.2/dist/fonts/geist-mono/GeistMono-Variable.woff2') format('woff2');
}

/* -------- Theme tokens — exact values captured from carmabella.dev/en (dark + light) -------- */
:root{
  --bg: #131210;
  --surface: #1d1c19;
  --line: #2a2820;
  --fg: #e8e6df;
  --subtle: #9f9e96;
  --accent: #16a75a;
  --on-accent: #131210;

  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;

  --container: 1024px;
  --dur-fast: 150ms;
  --dur-med: 250ms;
  --ease: cubic-bezier(.22,.9,.32,1);
}
[data-theme="light"]{
  --bg: #f8f7f4;
  --surface: #f0efe8;
  --line: #e0ded5;
  --fg: #1a1917;
  --subtle: #6c6b62;
  --accent: #0d6436;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]):not([data-theme="light"]){
    --bg: #f8f7f4; --surface: #f0efe8; --line: #e0ded5; --fg: #1a1917; --subtle: #6c6b62; --accent: #0d6436; --on-accent: #ffffff;
  }
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; color-scheme: dark; }
[data-theme="light"]{ color-scheme: light; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *,*::before,*::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

body{
  margin:0;
  background: var(--bg);
  color: var(--fg);
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background var(--dur-med) var(--ease), color var(--dur-med) var(--ease);
}

img{ max-width:100%; display:block; }
h1,h2,h3,h4{ font-family:'Geist', sans-serif; margin:0; color: var(--fg); }
a{ color: inherit; text-decoration:none; }
button{ font-family: inherit; cursor:pointer; background:none; border:none; color: inherit; }
ul,dl{ margin:0; padding:0; list-style:none; }
p{ margin:0; }

:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

.skip-link{
  position:absolute; top:-100%; left: var(--space-2); z-index: 999;
  background: var(--accent); color: var(--on-accent); padding: .6em 1.1em; border-radius: 6px; font-weight:600; font-size:.9rem;
  transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus{ top: var(--space-2); }

.container{ max-width: var(--container); margin: 0 auto; padding: 0 var(--space-3); }

/* -------- Header -------- */
.site-header{
  position: sticky; top:0; z-index: 50;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(6px);
}
.header-row{
  max-width: var(--container); margin:0 auto; padding: 0 var(--space-3);
  height: 4rem; display:flex; align-items:center; justify-content:space-between;
}
.brand{ display:flex; align-items:center; gap:.75rem; color: var(--accent); transition: opacity var(--dur-fast) var(--ease); }
.brand:hover{ opacity:.8; }
.brand svg{ width: 30px; height: 26px; flex-shrink:0; }
.brand span{ display:none; font-size:.9rem; font-weight:500; color: var(--fg); }
@media (min-width: 640px){ .brand span{ display:block; } }

.desktop-nav{ display:none; align-items:center; gap: var(--space-4); }
@media (min-width: 640px){ .desktop-nav{ display:flex; } }
.desktop-nav .nav-links{ display:flex; align-items:center; gap: var(--space-4); }
.desktop-nav .nav-links a{ font-size:.9rem; color: var(--subtle); transition: color var(--dur-fast) var(--ease); }
.desktop-nav .nav-links a:hover{ color: var(--fg); }
.desktop-nav .nav-links a[aria-current="true"]{ color: var(--accent); }

.lang-switch{
  display:flex; align-items:center; gap:.15rem; border:1px solid var(--line); border-radius:6px; overflow:hidden;
  font-family:'Geist Mono', monospace; font-size:.72rem;
}
.lang-switch button{
  padding:.35em .6em; color: var(--subtle); transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.lang-switch button:hover{ background: var(--surface); color: var(--fg); }
.lang-switch button[aria-current="true"]{ background: var(--accent); color: var(--on-accent); }

.icon-btn{ color: var(--subtle); padding:.3rem; border-radius:6px; display:flex; transition: color var(--dur-fast) var(--ease); }
.icon-btn:hover{ color: var(--fg); }
.icon-btn svg{ width:18px; height:18px; }

.header-actions{ display:flex; align-items:center; gap: var(--space-3); }
.mobile-actions{ display:flex; align-items:center; gap: var(--space-2); }
@media (min-width: 640px){ .mobile-actions{ display:none; } }
.mobile-actions .lang-switch button{ padding:.3em .45em; }

.menu-btn-icon-menu{ display:block; }
.menu-btn-icon-close{ display:none; }
.menu-btn[aria-expanded="true"] .menu-btn-icon-menu{ display:none; }
.menu-btn[aria-expanded="true"] .menu-btn-icon-close{ display:block; }

.mobile-nav{
  display:none; flex-direction:column; gap: var(--space-2);
  border-top:1px solid var(--line); padding: var(--space-2) var(--space-3) var(--space-3); background: var(--bg);
}
.mobile-nav.open{ display:flex; }
.mobile-nav a{ font-size:.9rem; color: var(--subtle); }
.mobile-nav a[aria-current="true"]{ color: var(--accent); }
@media (min-width: 640px){ .mobile-nav{ display:none !important; } }

/* -------- Buttons -------- */
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  padding:.7em 1.4em; border-radius:999px; font-size:.9rem;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.btn svg{ width:14px; height:14px; }
.btn-primary{ background: var(--accent); color: var(--on-accent); font-weight:600; }
.btn-primary:hover{ background: color-mix(in srgb, var(--accent) 90%, white); }
.btn-ghost{ background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); font-weight:500; }
.btn-ghost:hover{ background: color-mix(in srgb, var(--accent) 25%, transparent); }

/* -------- Section labels / eyebrow -------- */
.eyebrow{ font-family:'Geist Mono', monospace; font-size:.9rem; color: var(--accent); letter-spacing:.025em; margin-bottom: var(--space-2); }
.section-label{
  display:block; font-family:'Geist Mono', monospace; font-size:.72rem; color: var(--accent);
  letter-spacing:.1em; text-transform:uppercase; margin-bottom: var(--space-3);
}

/* -------- Hero -------- */
.hero{ margin-bottom: var(--space-7); position:relative; }
.hero-pattern{ position:absolute; top:0; left:50%; transform:translateX(-50%); width:100vw; height:100%; z-index:-1; pointer-events:none; }
.hero-row{ display:flex; flex-direction:column; align-items:flex-start; gap: var(--space-5); }
@media (min-width: 640px){ .hero-row{ flex-direction:row; } }
.hero-main{ flex:1; min-width:0; }
.hero-name{ font-size: clamp(2.25rem, 6vw, 3.75rem); font-weight:700; line-height:1.1; margin-bottom: var(--space-3); }
.hero-desc{ font-size: 1.15rem; color: var(--subtle); max-width: 36rem; line-height:1.6; margin-bottom: var(--space-4); }

.featured-box{
  background: var(--surface); border:1px solid var(--line); border-radius:10px;
  padding: var(--space-3); max-width:36rem; margin-bottom: var(--space-5);
}
.featured-box .section-label{ margin-bottom: var(--space-2); }
.featured-box p{ font-size:.95rem; color: var(--fg); line-height:1.6; }

.hero-cta{ display:flex; flex-wrap:wrap; gap: var(--space-2); }

.hero-photo{ display:none; flex-shrink:0; width:13rem; padding-top:.5rem; }
@media (min-width: 640px){ .hero-photo{ display:block; } }
.hero-photo .avatar-frame{
  border-radius:10px; overflow:hidden; border:1px solid var(--line); aspect-ratio: 1/1.1;
}
.hero-photo svg{ width:100%; height:100%; display:block; }

/* -------- Generic section -------- */
.section{ margin-bottom: var(--space-7); }
.section-intro{ color: var(--subtle); font-size:.9rem; margin-bottom: var(--space-3); max-width:36rem; }

/* -------- What I do (arrow list) -------- */
.arrow-list{ display:grid; gap: var(--space-2); }
@media (min-width: 640px){ .arrow-list{ grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-4); } }
.arrow-list li{ display:flex; align-items:flex-start; gap:.75rem; color: var(--subtle); font-size:.9rem; }
.arrow-list .arrow{ color: var(--accent); flex-shrink:0; margin-top:.1em; }

/* -------- Work cards -------- */
.work-grid{ display:grid; gap: var(--space-2); }
.work-card{
  display:block; background: var(--surface); border:1px solid var(--line); border-radius:10px;
  padding: var(--space-3); transition: border-color var(--dur-fast) var(--ease);
}
.work-card:hover{ border-color: var(--accent); }
.work-card-top{ display:flex; align-items:flex-start; justify-content:space-between; gap: var(--space-2); flex-wrap:wrap; margin-bottom: var(--space-2); }
.work-card-heading{ display:flex; align-items:center; gap: var(--space-2); flex-wrap:wrap; margin-bottom:.25rem; }
.work-card-heading h3{ font-size:1rem; font-weight:600; transition: color var(--dur-fast) var(--ease); }
.work-card:hover .work-card-heading h3{ color: var(--accent); }
.badge{
  font-size:.72rem; padding:.1em .5em; border-radius:5px; border:1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.work-card-meta{ font-size:.85rem; color: var(--subtle); }
.work-card-arrow{ color: var(--accent); font-size:1.1rem; line-height:1; opacity:0; transition: opacity var(--dur-fast) var(--ease); margin-top:.1em; }
.work-card:hover .work-card-arrow{ opacity:1; }
.work-card-desc{ font-size:.9rem; color: var(--subtle); line-height:1.6; margin-bottom: var(--space-2); }
.tag-row{ display:flex; flex-wrap:wrap; gap:.4rem; }
.tag{ font-size:.72rem; padding:.2em .55em; border-radius:5px; background: var(--bg); border:1px solid var(--line); color: var(--subtle); }

.view-all{ margin-top: var(--space-3); text-align:center; }
.view-all a{ font-size:.9rem; color: var(--accent); }
.view-all a:hover{ text-decoration: underline; }

/* -------- Technical stack rows -------- */
.stack-rows{ display:grid; }
.stack-row{
  display:flex; flex-direction:column; gap:.25rem; padding: var(--space-2) 0; border-bottom:1px solid var(--line);
}
@media (min-width: 640px){ .stack-row{ flex-direction:row; gap: var(--space-3); } }
.stack-row dt{ font-size:.9rem; font-weight:500; color: var(--fg); flex-shrink:0; }
@media (min-width: 640px){ .stack-row dt{ width:13rem; } }
.stack-row dd{ font-size:.9rem; color: var(--subtle); margin:0; }

/* -------- Background facts -------- */
.fact-grid{ display:grid; gap: var(--space-3); font-size:.9rem; color: var(--subtle); margin-bottom: var(--space-3); }
@media (min-width: 640px){ .fact-grid{ grid-template-columns: 1fr 1fr; } }
.fact-grid .col{ display:flex; flex-direction:column; gap:.5rem; }
.fact-grid strong{ color: var(--fg); font-weight:500; }

.text-link{ font-size:.9rem; color: var(--accent); }
.text-link:hover{ text-decoration: underline; }

/* -------- Page head (Portfolio / About / Resume) -------- */
.page-head{ padding-top: var(--space-6); }
.page-title{ font-size: clamp(1.9rem, 4vw, 2.25rem); font-weight:700; margin-bottom: var(--space-2); }
.page-sub{ color: var(--subtle); font-size:.9rem; max-width:36rem; margin-bottom: var(--space-6); }

/* -------- Also shipped (compact list) -------- */
.also-shipped{ display:grid; gap: var(--space-2); }
.also-item{
  display:flex; align-items:flex-start; justify-content:space-between; gap: var(--space-3);
  border:1px solid var(--line); border-radius:10px; padding: var(--space-2) var(--space-3); background: var(--surface);
}
.also-item-main h3{ font-size:.95rem; font-weight:600; margin-bottom:.2rem; }
.also-item-main p{ font-size:.85rem; color: var(--subtle); line-height:1.55; max-width:34rem; }
.also-item-badge{ font-size:.72rem; color: var(--subtle); white-space:nowrap; }

/* -------- Case study (project detail) -------- */
.case-article{ max-width:48rem; margin:0 auto; }
.case-head{ margin-bottom: var(--space-5); }
.case-head .section-label{ margin-bottom: var(--space-2); }
.case-title{ font-size: clamp(1.6rem, 4vw, 2.1rem); font-weight:700; line-height:1.25; margin-bottom: var(--space-3); }
.case-meta{ display:flex; flex-wrap:wrap; gap: var(--space-4) var(--space-4); font-size:.9rem; color: var(--subtle); margin-bottom: var(--space-3); }
.case-meta strong{ color: var(--fg); font-weight:500; margin-right:.3em; }
.case-meta .status-live{ color: var(--accent); }

.case-section{ margin-bottom: var(--space-5); }
.case-section .section-label{ margin-bottom: var(--space-2); }
.case-section p{ color: var(--subtle); font-size:.9rem; line-height:1.75; }

.scale-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: var(--space-2); }
@media (min-width: 640px){ .scale-grid{ grid-template-columns: repeat(3,1fr); } }
.scale-item{ background: var(--surface); border:1px solid var(--line); border-radius:8px; padding: var(--space-2); }
.scale-num{ font-size:1.15rem; font-weight:700; color: var(--accent); }
.scale-label{ font-size:.75rem; color: var(--subtle); margin-top:.25rem; }

.solution-block{ margin-bottom: var(--space-3); }
.solution-block:last-child{ margin-bottom:0; }
.solution-block h3{ font-size:1rem; font-weight:600; margin-bottom: var(--space-1); }
.dot-list{ display:grid; gap:.4rem; }
.dot-list li{ display:flex; align-items:flex-start; gap:.6rem; color: var(--subtle); font-size:.88rem; line-height:1.6; }
.dot-list .dot{ color: var(--accent); flex-shrink:0; }

.case-nav{
  margin-top: var(--space-6); padding-top: var(--space-4); border-top:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center; gap: var(--space-3); flex-wrap:wrap;
  font-size:.9rem;
}
.case-nav a{ color: var(--subtle); transition: color var(--dur-fast) var(--ease); }
.case-nav a:hover{ color: var(--accent); }

/* -------- Spreadsheet illustration (mock recreation of a real report) -------- */
.sheet-mock-wrap{ overflow-x:auto; margin: var(--space-2) 0; border:1px solid var(--line); border-radius:8px; background: var(--surface); }
.sheet-mock{ width:100%; border-collapse:collapse; font-family:'Geist Mono', monospace; font-size:.7rem; white-space:nowrap; }
.sheet-mock th, .sheet-mock td{ padding:.55em .7em; border:1px solid var(--line); text-align:right; }
.sheet-mock thead th{ background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--fg); font-weight:600; text-align:center; }
.sheet-mock tbody th{ text-align:left; color: var(--subtle); font-weight:500; position:sticky; left:0; background: var(--surface); }
.sheet-mock .formula{ color: var(--accent); font-weight:600; }
.sheet-mock .total-col{ background: color-mix(in srgb, var(--accent) 6%, transparent); font-weight:600; }
.sheet-mock-caption{ font-size:.78rem; color: var(--subtle); font-style:italic; padding: var(--space-2); border-top:1px solid var(--line); margin:0; }
.formula-chip{
  display:inline-block; font-family:'Geist Mono', monospace; font-size:.78rem; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent); border:1px solid var(--line);
  border-radius:6px; padding:.3em .6em; margin:.2em .3em .2em 0;
}

/* -------- Extension UI illustration (mock recreation of a real interface) -------- */
.ext-mock-wrap{ margin: var(--space-2) 0; border:1px solid var(--line); border-radius:10px; background: var(--surface); overflow:hidden; }
.ext-mock-bar{ display:flex; align-items:center; gap: var(--space-2); padding:.6em .9em; border-bottom:1px solid var(--line); font-size:.78rem; color: var(--subtle); }
.ext-mock-dots{ display:flex; gap:.3em; }
.ext-mock-dots span{ width:8px; height:8px; border-radius:50%; background: var(--line); }
.ext-mock-brand{ font-weight:600; color: var(--fg); margin-right:auto; }
.ext-mock-icons{ display:flex; gap:.5em; opacity:.6; }
.ext-mock-panels{ display:grid; grid-template-columns:1fr; }
@media (min-width: 640px){ .ext-mock-panels{ grid-template-columns:1fr 1fr; } }
.ext-mock-panel{ border-bottom:1px solid var(--line); }
@media (min-width: 640px){ .ext-mock-panel:first-child{ border-right:1px solid var(--line); border-bottom:none; } }
.ext-mock-toolbar{ display:flex; align-items:center; gap:.5em; padding:.6em .9em; font-size:.78rem; font-weight:600; color: var(--fg); }
.ext-mock-toolbar .ext-mock-swap{ color: var(--accent); }
.ext-mock-pane{ padding:.9em; font-size:.82rem; line-height:1.6; min-height:4.5rem; }
.ext-mock-pane.is-result{ background: color-mix(in srgb, var(--accent) 6%, transparent); color: var(--fg); }
.ext-mock-pane.is-source{ color: var(--fg); border-top:1px solid var(--line); }
.ext-mock-placeholder{ color: var(--subtle); }
.ext-mock-caption{ font-size:.78rem; color: var(--subtle); font-style:italic; padding: var(--space-2); border-top:1px solid var(--line); margin:0; }

/* -------- About page prose -------- */
.prose{ max-width:36rem; }
.prose p{ color: var(--subtle); font-size:.95rem; line-height:1.75; margin-bottom: var(--space-3); }
.about-section{ margin-bottom: var(--space-5); }
.about-section .section-label{ margin-bottom: var(--space-2); }
.about-section p{ color: var(--subtle); font-size:.9rem; line-height:1.7; max-width:36rem; }
.contact-list{ display:flex; flex-direction:column; gap:.5rem; font-size:.9rem; }
.contact-list a, .contact-list span{ color: var(--subtle); }
.contact-list a:hover{ color: var(--accent); }
.contact-list strong{ color: var(--fg); font-weight:500; margin-right:.4em; }

/* -------- Resume -------- */
.resume-head{ display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.resume-head h1{ font-size:1.9rem; font-weight:700; margin-bottom:.25rem; }
.resume-head .role{ color: var(--subtle); font-size:.95rem; }
.resume-contact{ display:flex; flex-wrap:wrap; gap: var(--space-3); font-size:.85rem; color: var(--subtle); margin-bottom: var(--space-6); }
.resume-contact a:hover{ color: var(--accent); }
.resume-section{ margin-bottom: var(--space-5); }
.resume-section .section-label{ margin-bottom: var(--space-2); }
.resume-section p{ color: var(--subtle); font-size:.9rem; line-height:1.7; }
.skills-grid{ display:grid; }
.skills-row{ display:flex; flex-direction:column; gap:.25rem; padding: var(--space-1) 0; border-bottom:1px solid var(--line); }
@media (min-width: 640px){ .skills-row{ flex-direction:row; gap: var(--space-3); } }
.skills-row dt{ font-size:.85rem; font-weight:500; color: var(--fg); flex-shrink:0; }
@media (min-width: 640px){ .skills-row dt{ width:11rem; } }
.skills-row dd{ font-size:.85rem; color: var(--subtle); margin:0; }
.timeline-item{ margin-bottom: var(--space-3); }
.timeline-top{ display:flex; flex-wrap:wrap; justify-content:space-between; gap: var(--space-2); margin-bottom:.35rem; }
.timeline-top h3{ font-size:.95rem; font-weight:600; }
.timeline-top .dates{ font-size:.8rem; color: var(--subtle); font-family:'Geist Mono', monospace; }
.timeline-item ul{ display:grid; gap:.25rem; }
.timeline-item li{ font-size:.85rem; color: var(--subtle); line-height:1.6; padding-left:1rem; position:relative; }
.timeline-item li::before{ content:'·'; position:absolute; left:0; color: var(--accent); }
.btn-print{ display:inline-flex; align-items:center; gap:.5em; }

@media print{
  .site-header, .site-footer, .btn-print, .hero-pattern{ display:none !important; }
  body{ background:#fff; color:#000; }
  .container{ max-width:100%; }
}

/* -------- Footer -------- */
.site-footer{ border-top:1px solid var(--line); margin-top: var(--space-7); }
.footer-row{
  max-width: var(--container); margin:0 auto; padding: var(--space-5) var(--space-3);
  display:flex; flex-direction:column; gap: var(--space-3);
}
@media (min-width: 640px){ .footer-row{ flex-direction:row; align-items:center; justify-content:space-between; } }
.footer-name{ font-size:.9rem; font-weight:500; color: var(--fg); }
.footer-role{ font-size:.9rem; color: var(--subtle); }
.footer-links{ display:flex; flex-direction:column; gap:.3rem; font-size:.9rem; }
@media (min-width: 640px){ .footer-links{ align-items:flex-end; } }
.footer-links a{ color: var(--subtle); }
.footer-links a:hover{ color: var(--accent); }
.footer-easter-egg{
  text-align:center; font-family:'Geist Mono', monospace; font-size:.72rem; opacity:.15;
  padding-bottom: var(--space-3); user-select:none; cursor:default; transition: opacity var(--dur-fast) var(--ease);
}
.footer-easter-egg:hover{ opacity:.4; }

/* -------- Easter egg modal -------- */
.egg-overlay{
  position:fixed; inset:0; z-index:200; background: color-mix(in srgb, var(--bg) 80%, transparent);
  display:flex; align-items:center; justify-content:center; padding: var(--space-3);
  opacity:0; visibility:hidden; transition: opacity var(--dur-med) var(--ease), visibility 0s linear var(--dur-med);
}
.egg-overlay.open{ opacity:1; visibility:visible; transition: opacity var(--dur-med) var(--ease); }
.egg-modal{
  background: var(--surface); border:1px solid var(--accent); border-radius:10px; max-width:26rem; width:100%;
  padding: var(--space-4); text-align:center; font-family:'Geist Mono', monospace;
  transform: scale(.96); transition: transform var(--dur-med) var(--ease);
}
.egg-overlay.open .egg-modal{ transform: scale(1); }
.egg-modal .egg-title{ color: var(--accent); font-size:.85rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom: var(--space-2); }
.egg-modal p{ color: var(--subtle); font-size:.85rem; line-height:1.6; margin-bottom: var(--space-3); }
.egg-modal button{ background: var(--accent); color: var(--on-accent); padding:.6em 1.4em; border-radius:6px; font-size:.8rem; font-weight:600; }

/* -------- Reveal -------- */
[data-reveal]{ opacity:0; transform: translateY(16px); }
.reveal-ready [data-reveal]{ transition: opacity .6s var(--ease), transform .6s var(--ease); }

::selection{ background: var(--accent); color: var(--on-accent); }