/* ==========================================================================
   Christian Jason Beloso · Portfolio
   --------------------------------------------------------------------------
   MOBILE FIRST: base styles are for phones (~375px). Larger layouts are added
   with min-width media queries, or container queries where the available
   width depends on the sidebar.

   1.  Design tokens
   2.  Base / reset
   3.  Utilities (icons, buttons, tags, chips, status dot, avatar)
   4.  Layout shell (container, sections, photo background)
   5.  Mobile top bar + drawer  →  desktop sidebar (min-width: 900px)
   6.  Hero
   7.  Sticky note component
   8.  Projects
   9.  Experience timeline
   10. Skills
   11. Contact
   12. Footer + toast
   13. Motion (entrance, scroll reveal, hover) + reduced motion
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS
   Components only use these variables, so a dark theme later = one extra
   block (see the commented [data-theme="dark"] at the end).
   ========================================================================== */
:root {
  color-scheme: light;

  /* Accent: purple */
  --accent: #7c3aed;          /* buttons, active states (white text = 5.7:1) */
  --accent-strong: #6d28d9;   /* accent text on light surfaces (7:1) */
  --accent-soft: #f1ebfe;
  --accent-wash: #f8f4ff;
  --on-accent: #ffffff;

  /* Neutrals (warm, to sit nicely next to the paper notes) */
  --bg: #f7f5f0;
  --surface: #fffefb;
  --surface-2: #f3f0ea;
  --card: #ffffff;
  --border: #e7e2d8;
  --border-strong: #d6cfc2;
  --text: #1c1917;
  --text-muted: #57534e;
  --text-subtle: #78716c;
  --text-on-photo: #ffffff;

  /* Feedback */
  --success: #22c55e;
  --success-ink: #15803d;
  --danger: #dc2626;
  --danger-ink: #b91c1c;
  --danger-soft: #fee2e2;

  /* Paper (sticky notes) */
  --paper: #fffaf0;
  --paper-fold: #eadfc8;
  --tape: rgba(196, 181, 253, 0.6);

  /* Pastel tints (notes, tags, chips) + inks (icons, pins) + folds */
  --pink: #fde2e8;      --pink-ink: #db2777;      --pink-fold: #f4c2cf;
  --blue: #dbeafe;      --blue-ink: #2563eb;      --blue-fold: #b9d3f8;
  --yellow: #fdf2c0;    --yellow-ink: #ca8a04;    --yellow-fold: #f0dc8a;
  --green: #d9f5e1;     --green-ink: #16a34a;     --green-fold: #b2e5c1;
  --lavender: #ebe3fe;  --lavender-ink: #7c3aed;  --lavender-fold: #d3c4fb;

  /* Grid paper */
  --grid-line: rgba(28, 25, 23, 0.06);
  --grid-size: 28px;

  /* Typography: SF Pro on Apple, Inter elsewhere */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
               "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display",
                  "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --fs-xs: 0.75rem;     /* 12 */
  --fs-sm: 0.875rem;    /* 14 */
  --fs-meta: 0.9375rem; /* 15: labels, chips */
  --fs-md: 1rem;        /* 16: body copy, never smaller */
  --fs-lg: 1.25rem;     /* 20 */
  --fs-xl: 1.625rem;    /* 26 */

  /* Spacing */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px;
  --gutter: clamp(18px, 5vw, 48px);
  --container: 1200px;

  /* Radii */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Shadows (soft, layered) */
  --shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.06), 0 2px 6px rgba(28, 25, 23, 0.06);
  --shadow: 0 1px 2px rgba(28, 25, 23, 0.05), 0 6px 18px rgba(28, 25, 23, 0.08);
  --shadow-lg: 0 2px 4px rgba(28, 25, 23, 0.06), 0 18px 40px rgba(28, 25, 23, 0.14);
  --shadow-xl: 0 4px 8px rgba(28, 25, 23, 0.08), 0 30px 60px rgba(28, 25, 23, 0.22);
  /* drop-shadow() versions for clipped shapes (the note's folded corner) */
  --drop: drop-shadow(0 2px 3px rgba(28, 25, 23, 0.10)) drop-shadow(0 12px 22px rgba(28, 25, 23, 0.14));
  --drop-hover: drop-shadow(0 4px 6px rgba(28, 25, 23, 0.10)) drop-shadow(0 24px 36px rgba(28, 25, 23, 0.20));

  /* Easing + durations */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);        /* fallback overshoot */
  --ease-spring-soft: cubic-bezier(0.34, 1.3, 0.64, 1);
  --dur-fast: 150ms;
  --dur: 250ms;
  --dur-slow: 500ms;
  --dur-spring: 700ms;

  /* Tilt: phones get a gentler tilt so notes stay readable */
  --tilt-scale: 0.4;

  /* Layout */
  --sidebar-w: 288px;
  --sidebar-w-collapsed: 80px;
  --sidebar-current: 0px;        /* no sidebar column on phones */
  --topbar-h: 60px;
}

@media (min-width: 768px) {
  :root { --tilt-scale: 1; }
}
@media (min-width: 900px) {
  :root { --sidebar-current: var(--sidebar-w); }
  html.sidebar-collapsed { --sidebar-current: var(--sidebar-w-collapsed); }
}

/* Real spring curves where linear() is supported (modern browsers) */
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --ease-spring: linear(0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%,
      1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%,
      1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%, 0.997 69.8%,
      1.003 76.9%, 1);
    --ease-spring-soft: linear(0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%,
      0.849 31.5%, 0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%,
      1.017 63.9%, 1.001);
  }
}


/* ==========================================================================
   2. BASE / RESET
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  overflow-x: clip;
}

h1, h2, h3, p, ul, ol, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
fieldset { padding: 0; border: 0; min-width: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea { font: inherit; color: inherit; }
img, svg { display: block; max-width: 100%; }

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

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed;
  top: var(--space-3); left: var(--space-3);
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--text);
  color: var(--surface);
  font-weight: 600;
  translate: 0 -200%;
}
.skip-link:focus-visible { translate: 0 0; }


/* ==========================================================================
   3. UTILITIES
   ========================================================================== */

/* Line icons (Lucide). Size follows --icon. */
.icon {
  width: var(--icon, 18px);
  height: var(--icon, 18px);
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Filled brand logos (Simple Icons). Colors are baked into the symbols. */
.logo { width: var(--icon, 18px); height: var(--icon, 18px); flex: none; }
.logo--js { border-radius: 3px; background: #323330; }

/* Square icon button: 44px touch target */
.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease,
              scale var(--dur) var(--ease-spring);
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn:active { scale: 0.94; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 46px;
  padding: 0 var(--space-5);
  border-radius: var(--radius-pill);
  font-size: var(--fs-meta);
  font-weight: 600;
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out),
              scale var(--dur) var(--ease-spring);
}
.btn .icon { --icon: 16px; transition: translate var(--dur) var(--ease-spring); }
.btn:active { scale: 0.97; }
@media (hover: hover) {
  .btn:hover .icon { translate: 3px 0; }
}

.btn--primary {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 4px 12px rgba(124, 58, 237, 0.30);
}
.btn--primary:hover {
  background: var(--accent-strong);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 8px 20px rgba(124, 58, 237, 0.38);
}
.btn--ghost {
  border: 1.5px solid var(--border-strong);
  background: var(--card);
  color: var(--text);
}
.btn--ghost:hover { border-color: var(--accent); color: var(--accent-strong); }
.btn--lg { min-height: 52px; padding: 0 var(--space-6); font-size: var(--fs-md); }

/* Tag: small pastel label with an icon and a "pin" dot, slightly tilted.
   Set the tilt per instance with style="--tilt: -4deg". */
.tag {
  --tag-bg: var(--lavender);
  --tag-ink: var(--lavender-ink);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 10px;
  border-radius: var(--radius-sm);
  background: var(--tag-bg);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.005em;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  rotate: calc(var(--tilt, 0deg) * var(--tilt-scale));
}
.tag .icon { --icon: 15px; color: var(--tag-ink); }
.tag::before {   /* the pin */
  content: "";
  position: absolute;
  top: -5px; left: -5px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.75) 0 18%, transparent 22%), var(--tag-ink);
  box-shadow: 0 2px 3px rgba(28, 25, 23, 0.25);
}
.tag--pink     { --tag-bg: var(--pink);     --tag-ink: var(--pink-ink); }
.tag--blue     { --tag-bg: var(--blue);     --tag-ink: var(--blue-ink); }
.tag--yellow   { --tag-bg: var(--yellow);   --tag-ink: var(--yellow-ink); }
.tag--green    { --tag-bg: var(--green);    --tag-ink: var(--green-ink); }
.tag--lavender { --tag-bg: var(--lavender); --tag-ink: var(--lavender-ink); }

/* Chip: flat label used inside notes (skills, stats) */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(28, 25, 23, 0.08);
  font-size: var(--fs-meta);
  font-weight: 600;
  line-height: 1.2;
  color: var(--text);
}
.chip .icon { --icon: 17px; color: var(--note-ink, var(--accent)); }
.chip .logo { --icon: 18px; }
.chip__level {
  margin-left: 2px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: rgba(22, 163, 74, 0.12);
  color: var(--success-ink);
  font-size: var(--fs-xs);
  font-weight: 650;
  white-space: nowrap;
}
.chip--stat {
  width: fit-content;
  margin-top: var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--card);
}

/* Status dot (green, soft pulse ring when motion is allowed) */
.status-dot {
  position: relative;
  display: inline-block;
  width: 8px; height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
}

/* Avatar placeholder (gray circle) */
.avatar {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  flex: none;
  border-radius: 50%;
  background: #d6d3d1;
  color: #a8a29e;
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--border);
  overflow: hidden;
}
.avatar .icon { --icon: 22px; }
.avatar--sm { width: 34px; height: 34px; }
.avatar--sm .icon { --icon: 17px; }


/* ==========================================================================
   4. LAYOUT SHELL
   ========================================================================== */
.main {
  margin-left: var(--sidebar-current);
  transition: margin-left var(--dur-slow) var(--ease-out);
}

/* Centered content column (max 1200px). Container queries measure this. */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  container-type: inline-size;
}

section[id] { scroll-margin-top: var(--topbar-h); }
@media (min-width: 900px) {
  section[id] { scroll-margin-top: 0; }
}

.section {
  --section-pad: var(--space-8);
  position: relative;
  padding-block: var(--section-pad) calc(var(--section-pad) + var(--space-4));
}
@media (min-width: 768px) {
  .section { --section-pad: var(--space-9); }
}

.section--grid-paper {
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  background-position: -1px -1px;
  border-top: 1px solid var(--border);
}

/* Section heading: sticky tag + big uppercase title (+ optional lead) */
.section__head {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-7);
  text-align: center;
}
@media (min-width: 768px) {
  .section__head { margin-bottom: var(--space-8); }
}
.section__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.4rem + 3.2vw, 3.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--text-on-photo);
  text-shadow: 0 1px 2px rgba(10, 30, 60, 0.18), 0 4px 24px rgba(10, 30, 60, 0.30);
}
.section__title--ink { color: var(--text); text-shadow: none; }
.section__lead {
  max-width: 34rem;
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--text-on-photo);
  text-shadow: 0 1px 12px rgba(10, 30, 60, 0.45);
  text-wrap: pretty;
}
.section__lead--ink { color: var(--text-muted); text-shadow: none; }

/* --------------------------------------------------------------------------
   PHOTO SCENE: one screen-sized photo behind the hero AND projects.
   .scene wraps both sections. .scene__photo is a sticky layer exactly one
   viewport tall: it stays put while the hero and projects scroll over it,
   then scrolls away with the end of the scene (the next section covers it).
   No background-attachment: fixed, so it works on iPhone.
   The <picture> picks a crop that matches the screen shape (portrait or
   landscape), and object-fit: cover fills the screen without stretching.
   JS (initScene) sets two values while you scroll:
     --scene-progress  0→1 through the scene  → tiny parallax drift
     --scene-dim       0→1 as Projects arrives → light darkening
   -------------------------------------------------------------------------- */
.scene {
  --parallax-range: 40px;      /* total drift of the photo; 0 = no parallax */
  position: relative;
  isolation: isolate;          /* keeps the photo layer behind the content */
  overflow: clip;
  background: #4a9be0;         /* sky-colored fallback while the photo loads */
  color: var(--text-on-photo);
}
.scene__photo {
  position: sticky;
  top: 0;
  z-index: -1;
  height: 100vh;
  height: 100lvh;              /* the large viewport, so iPhone's toolbar never uncovers an edge */
  margin-bottom: -100vh;       /* takes no space: the hero starts at the top */
  margin-bottom: -100lvh;
  overflow: hidden;
  pointer-events: none;
}
.scene__photo img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% + var(--parallax-range));
  max-width: none;
  object-fit: cover;
  object-position: center 55%;
  translate: 0 calc(var(--scene-progress, 0) * -1 * var(--parallax-range));
  will-change: translate;
}
/* top scrim: keeps the white headline readable on the bright sky */
.scene__photo::before,
.scene__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.scene__photo::before {
  background: linear-gradient(180deg, rgba(18, 48, 96, 0.28) 0%, rgba(18, 48, 96, 0.06) 45%, rgba(18, 40, 20, 0) 65%, rgba(18, 40, 20, 0.16) 100%);
}
/* gentle darkening as Projects scrolls in, so its heading stays readable */
.scene__photo::after {
  background: rgb(12, 28, 54);
  opacity: calc(var(--scene-dim, 0) * 0.3);
}
@media (prefers-reduced-motion: reduce) {
  .scene { --parallax-range: 0px; }
}

/* Projects sits in the scene: no background of its own, extra room above the tag */
.section--photo { --section-pad: 76px; }
@media (min-width: 768px) {
  .section--photo { --section-pad: 112px; }
}

/* Soft, edgeless shade behind the Projects heading + subtitle only */
.section--photo .section__head { position: relative; }
.section--photo .section__head::before {
  content: "";
  position: absolute;
  inset: -72px -14%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(14, 38, 80, 0.5), rgba(14, 38, 80, 0.28) 50%, rgba(14, 38, 80, 0.08) 80%, rgba(14, 38, 80, 0));
  pointer-events: none;
}


/* ==========================================================================
   5. MOBILE TOP BAR + DRAWER (base)  →  DESKTOP SIDEBAR (min-width: 900px)
   ========================================================================== */

/* ---------- Top bar (phones + tablets) ---------- */
.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--topbar-h);
  padding: 0 var(--space-2) 0 var(--space-4);
  background: rgba(255, 254, 251, 0.84);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid rgba(231, 226, 216, 0.7);
}
.topbar__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  font-size: var(--fs-meta);
  font-weight: 650;
  border-radius: var(--radius-sm);
}
.topbar__menu { color: var(--text); }

/* ---------- Sidebar as an off-canvas drawer (base) ---------- */
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  width: min(320px, 86vw);
  padding: var(--space-4) var(--space-3) max(var(--space-4), env(safe-area-inset-bottom));
  background: linear-gradient(180deg, var(--accent-wash) 0%, var(--surface) 38%);
  border-right: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  translate: -100% 0;
  visibility: hidden;
  transition: translate var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow);
}
html.drawer-open .sidebar {
  translate: 0 0;
  visibility: visible;
  transition: translate var(--dur-slow) var(--ease-out), visibility 0s;
}
html.drawer-open { overflow: hidden; }

.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(28, 25, 23, 0.36);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
}
.drawer-backdrop[hidden] { display: none; }
html.drawer-open .drawer-backdrop { opacity: 1; }

.sidebar__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.profile {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  flex: 1;
  padding: var(--space-1);
  border-radius: var(--radius);
}
.profile__text { display: grid; min-width: 0; line-height: 1.3; }
.profile__name { font-size: var(--fs-md); font-weight: 650; letter-spacing: -0.01em; }
.profile__role { font-size: var(--fs-sm); color: var(--text-muted); }

.sidebar__collapse { display: none; }
.sidebar__collapse .icon { transition: rotate var(--dur-slow) var(--ease-spring); }

.sidebar__group { display: grid; gap: var(--space-2); }
.sidebar__label {
  padding: 0 var(--space-3);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-subtle);
  white-space: nowrap;
}

.nav-list { display: grid; gap: 2px; }
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 46px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: var(--fs-md);
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.nav-item .icon { --icon: 20px; }
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item__label { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.nav-item__num {
  display: grid;
  place-items: center;
  min-width: 24px; height: 24px;
  padding: 0 6px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-subtle);
  transition: background-color var(--dur) ease, color var(--dur) ease, border-color var(--dur) ease;
}
.nav-item .nav-item__trail { --icon: 16px; color: var(--text-subtle); }

/* Active item: purple tint, filled number, pin dot on the edge */
.nav-item.is-active { background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; }
.nav-item.is-active .nav-item__num { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.nav-item::before {
  content: "";
  position: absolute;
  left: -7px; top: 50%;
  width: 8px; height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  scale: 0;
  transition: scale var(--dur-spring) var(--ease-spring);
}
.nav-item.is-active::before { scale: 1; }

.sidebar__foot {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
  padding: var(--space-3) var(--space-4);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  background: var(--paper);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ---------- Desktop: fixed sidebar ---------- */
@media (min-width: 900px) {
  .topbar, .drawer-backdrop { display: none !important; }

  .sidebar {
    z-index: 40;
    width: var(--sidebar-current);
    gap: var(--space-6);
    padding: var(--space-5) var(--space-4);
    box-shadow: none;
    translate: none;
    visibility: visible;
    transition: width var(--dur-slow) var(--ease-out);
  }
  .sidebar__close { display: none; }
  .sidebar__collapse { display: inline-grid; width: 36px; height: 36px; }
  .avatar { width: 48px; height: 48px; }
  .avatar .icon { --icon: 24px; }
  .nav-item { font-size: var(--fs-meta); min-height: 44px; }

  /* Collapsed: icons only */
  html.sidebar-collapsed .sidebar { padding-inline: var(--space-3); }
  html.sidebar-collapsed .sidebar__head { flex-direction: column; }
  html.sidebar-collapsed .profile { flex: none; }
  html.sidebar-collapsed .sidebar__collapse .icon { rotate: 180deg; }
  html.sidebar-collapsed .profile__text,
  html.sidebar-collapsed .nav-item__label,
  html.sidebar-collapsed .nav-item__num,
  html.sidebar-collapsed .nav-item__trail,
  html.sidebar-collapsed .sidebar__foot-text { display: none; }
  html.sidebar-collapsed .sidebar__label {
    height: 1px;
    margin: 0 var(--space-3) var(--space-1);
    background: var(--border);
    font-size: 0;
  }
  html.sidebar-collapsed .nav-item { justify-content: center; padding: 0; }
  html.sidebar-collapsed .sidebar__foot { justify-content: center; padding: var(--space-3) 0; }

  /* Tooltip next to icons while collapsed */
  html.sidebar-collapsed .nav-item::after {
    content: attr(data-tooltip);
    position: fixed;
    left: calc(var(--sidebar-w-collapsed) - 4px);
    padding: 4px 10px;
    border-radius: var(--radius-xs);
    background: var(--text);
    color: var(--surface);
    font-size: var(--fs-xs);
    font-weight: 500;
    opacity: 0;
    translate: -4px 0;
    pointer-events: none;
    transition: opacity var(--dur-fast) ease, translate var(--dur) var(--ease-out);
  }
  html.sidebar-collapsed .nav-item:hover::after,
  html.sidebar-collapsed .nav-item:focus-visible::after { opacity: 1; translate: 0 0; }
}


/* ==========================================================================
   6. HERO
   Full-bleed photo; content sits in the centered 1200px container.
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  color: var(--text-on-photo);
}

/* .hero__inner is the 1200px query container; .hero__grid lays things out */
.hero__inner {
  display: grid;
  align-content: center;
  min-height: inherit;
  padding-top: calc(var(--topbar-h) + var(--space-6));
  padding-bottom: var(--space-6);
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "title" "note" "location";
  gap: var(--space-6);
}
@media (min-width: 900px) {
  .hero__inner { padding-block: var(--space-8) var(--space-6); }
}

/* ---------- Headline ---------- */
.hero__title-wrap {
  grid-area: title;
  position: relative;
  justify-self: start;
  max-width: 100%;
}
.hero__title {
  font-family: var(--font-display);
  /* phones: sized to the container so "INTO PRODUCTS" never wraps */
  font-size: clamp(2.1rem, 11.4cqi, 3.75rem);
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  text-shadow:
    0 1px 2px rgba(10, 30, 60, 0.18),
    0 4px 28px rgba(10, 30, 60, 0.28);
}
.hero__line { display: block; white-space: nowrap; }

/* Tags: a tidy wrapped row under the headline on phones… */
.hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding-left: 6px;
}
.hero__tag { position: relative; }

/* …stuck around the headline like stickers once there's room */
@container (min-width: 600px) {
  .hero__title { font-size: clamp(3rem, 10cqi, 5rem); }
  .hero__title-wrap { margin: var(--space-6) var(--space-8) var(--space-8) var(--space-4); }
  .hero__tags { display: contents; }
  .hero__tag { position: absolute; z-index: 1; }
  /* line 1 + 2 are full width; line 3 ("PEOPLE LOVE") leaves room after it */
  .hero__tag--1 { top: -34px; right: 4%; }
  .hero__tag--2 { bottom: -50px; left: calc(6% + 150px); }
  .hero__tag--3 { bottom: 6%; right: -24px; }
  .hero__tag--4 { bottom: -46px; left: 6%; }
}

/* Wide: headline and note side by side, vertically aligned */
@container (min-width: 860px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) 340px;
    grid-template-areas:
      "title    note"
      "location location";
    column-gap: var(--space-7);
    row-gap: var(--space-6);
    align-items: center;
  }
  /* width left for the headline ≈ container − note − gap; ~8.2em per line */
  .hero__title { font-size: clamp(3rem, calc((100cqi - 410px) / 8.2), 5.5rem); }
  .hero__title-wrap { margin-right: var(--space-7); }
}

/* ---------- Note placement ---------- */
.hero__note {
  grid-area: note;
  justify-self: end;
  width: min(100%, 380px);
}
@container (min-width: 860px) {
  .hero__note { width: 100%; }
}

/* ---------- Location chip ---------- */
.hero__location {
  grid-area: location;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 14px 8px 10px;
  border-radius: var(--radius-pill);
  background: rgba(255, 254, 251, 0.88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 500;
  box-shadow: var(--shadow-sm);
}
.hero__location .icon { --icon: 15px; color: var(--accent); }


/* ==========================================================================
   7. STICKY NOTE COMPONENT
   .note (tilt + shadow) > .note__tape | .note__pin + .note__paper
   Tilt per note: style="--tilt: 2deg". Color: .note--pink etc.
   ========================================================================== */
.note {
  --note-bg: var(--paper);
  --note-fold: var(--paper-fold);
  --note-ink: var(--accent);
  --fold: 28px;
  position: relative;
  color: var(--text);
  rotate: calc(var(--tilt, 0deg) * var(--tilt-scale));
  filter: var(--drop);
  transition:
    rotate var(--dur-spring) var(--ease-spring-soft),
    translate var(--dur-spring) var(--ease-spring-soft),
    scale var(--dur-spring) var(--ease-spring-soft),
    filter var(--dur-slow) var(--ease-out);
}
.note--pink     { --note-bg: var(--pink);     --note-fold: var(--pink-fold);     --note-ink: var(--pink-ink); }
.note--blue     { --note-bg: var(--blue);     --note-fold: var(--blue-fold);     --note-ink: var(--blue-ink); }
.note--yellow   { --note-bg: var(--yellow);   --note-fold: var(--yellow-fold);   --note-ink: #a16207; }
.note--green    { --note-bg: var(--green);    --note-fold: var(--green-fold);    --note-ink: var(--green-ink); }
.note--lavender { --note-bg: var(--lavender); --note-fold: var(--lavender-fold); --note-ink: var(--lavender-ink); }

.note__paper {
  position: relative;
  padding: var(--space-6) var(--space-5) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--note-bg);
  /* cut the bottom-right corner off for the fold */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--fold)), calc(100% - var(--fold)) 100%, 0 100%);
}
.note__paper::after {   /* the folded flap */
  content: "";
  position: absolute;
  right: 0; bottom: 0;
  width: var(--fold); height: var(--fold);
  background: linear-gradient(to bottom right, var(--note-fold) 0 50%, transparent 50%);
  border-top-left-radius: 6px;
  box-shadow: -2px -2px 4px rgba(28, 25, 23, 0.06);
}

/* tape strip across the top */
.note__tape {
  position: absolute;
  top: -12px; left: 50%;
  z-index: 2;
  width: 92px; height: 26px;
  margin-left: -46px;
  background: var(--tape);
  border-radius: 3px;
  rotate: -4deg;
  box-shadow: 0 1px 2px rgba(28, 25, 23, 0.08);
  -webkit-mask: conic-gradient(from -45deg at left, transparent 90deg, #000 0) left / 51% 6px repeat-y,
                conic-gradient(from 135deg at right, transparent 90deg, #000 0) right / 51% 6px repeat-y;
          mask: conic-gradient(from -45deg at left, transparent 90deg, #000 0) left / 51% 6px repeat-y,
                conic-gradient(from 135deg at right, transparent 90deg, #000 0) right / 51% 6px repeat-y;
}

/* round push-pin (timeline notes) */
.note__pin {
  position: absolute;
  top: -7px; left: 50%;
  z-index: 2;
  width: 18px; height: 18px;
  margin-left: -9px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, rgba(255, 255, 255, 0.8) 0 16%, transparent 22%), var(--note-ink);
  box-shadow: 0 3px 4px rgba(28, 25, 23, 0.28);
}

.note__tag { margin-bottom: var(--space-4); }
.note__title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 750;
  line-height: 1.15;
  letter-spacing: -0.025em;
}
.note__text {
  margin-top: var(--space-3);
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--text-muted);
}
.note__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  padding-right: var(--space-4);   /* keep clear of the folded corner */
  border-top: 1px dashed var(--border-strong);
}
.availability {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
}


/* ==========================================================================
   8. PROJECTS (browser-window cards on the photo)
   Phones: one column. Wider: scattered, tilted, staggered rows.
   ========================================================================== */
.project-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-8) var(--space-6);
}

.project-card {
  --clip: var(--lavender-ink);
  position: relative;
  width: 100%;
  max-width: 460px;
  rotate: calc(var(--tilt, 0deg) * var(--tilt-scale));
  transition:
    rotate var(--dur-spring) var(--ease-spring-soft),
    translate var(--dur-spring) var(--ease-spring-soft),
    scale var(--dur-spring) var(--ease-spring-soft);
}
.project-card:nth-child(3n + 2) { --clip: var(--blue-ink); }
.project-card:nth-child(3n)     { --clip: var(--pink-ink); }

/* 2 per row, every second card dropped a little */
@container (min-width: 640px) {
  .project-card { width: calc((100% - var(--space-6)) / 2); max-width: none; }
  .project-card:nth-child(even) { margin-top: var(--space-7); }
}
/* 3 per row, scattered heights (the last card centers itself) */
@container (min-width: 1000px) {
  .project-grid { column-gap: var(--space-7); }
  .project-card { width: calc((100% - 2 * var(--space-7)) / 3); }
  .project-card:nth-child(even) { margin-top: 0; }
  .project-card:nth-child(3n + 2) { margin-top: var(--space-8); }
  .project-card:nth-child(3n)     { margin-top: var(--space-5); }
}

/* The window itself (an <a> when live, a <div> when not) */
.project-card__window {
  display: block;
  padding: 8px 8px 16px;
  border-radius: var(--radius-xl);
  background: var(--card);
  color: var(--text);
  box-shadow: var(--shadow-lg);
  transition: box-shadow var(--dur-slow) var(--ease-out);
}
a.project-card__window:focus-visible { outline-offset: 4px; border-radius: var(--radius-xl); }

/* Paperclip on the top edge */
.project-card__clip {
  position: absolute;
  top: -24px; left: 42%;   /* between the shapes and the status tag */
  z-index: 2;
  width: 18px; height: 52px;
  rotate: 10deg;
  color: var(--clip);
  filter: drop-shadow(0 2px 2px rgba(28, 25, 23, 0.2));
  pointer-events: none;
}

/* Top bar: playful shapes instead of window dots + status tag */
.project-card__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 8px 4px;
}
.shape { width: 11px; height: 11px; flex: none; }
.shape--circle   { border-radius: 50%; background: var(--lavender-ink); }
.shape--square   { border-radius: 2px; background: var(--blue-ink); }
.shape--triangle { background: var(--yellow-ink); clip-path: polygon(50% 4%, 100% 96%, 0 96%); }

.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 650;
  white-space: nowrap;
}
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status--live     { background: var(--green);  color: var(--success-ink); }
.status--progress { background: var(--yellow); color: #854d0e; }

/* Image area matches the 16:10 covers exactly, so nothing gets cropped */
.project-card__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface-2);
}
.project-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale var(--dur-slow) var(--ease-out);
}

.project-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px var(--space-3);
  padding: var(--space-3) 8px 0;
}
.project-card__name {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.project-card__details {
  display: flex;
  gap: var(--space-3);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
}
.project-card__desc {
  padding: var(--space-2) 8px 0;
  font-size: var(--fs-md);
  line-height: 1.5;
  color: var(--text-muted);
  text-wrap: pretty;
}
.project-card__action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: var(--space-3) 8px 0;
  font-size: var(--fs-sm);
  font-weight: 650;
}
.project-card__action .icon { --icon: 15px; }
.project-card__action--live { color: var(--accent-strong); }
.project-card__action--soon { color: var(--text-subtle); }


/* ==========================================================================
   9. EXPERIENCE TIMELINE (grid paper)
   Phones: line on the left. Wide: line in the middle, notes zig-zag.
   ========================================================================== */
.timeline {
  position: relative;
  display: grid;
  gap: var(--space-7);
  max-width: 1000px;
  margin-inline: auto;
  padding-left: 30px;
}
.timeline::before {     /* the dashed line */
  content: "";
  position: absolute;
  top: 8px; bottom: 8px; left: 8px;
  border-left: 2px dashed var(--border-strong);
}
.timeline__item { position: relative; }
.timeline__item::before {   /* dot on the line */
  content: "";
  position: absolute;
  top: 30px; left: -30px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--card);
  border: 4px solid var(--accent);
  box-shadow: 0 0 0 4px var(--bg);
}

.timeline__date {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--note-ink);
}
.timeline__date .icon { --icon: 15px; }
.timeline__role {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.timeline__company {
  margin-top: 2px;
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--text);
}
.timeline__company span { font-weight: 500; color: var(--text-muted); }
.timeline__points {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-right: var(--space-3);
}
.timeline__points li {
  position: relative;
  padding-left: 18px;
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--text-muted);
}
.timeline__points li::before {
  content: "";
  position: absolute;
  left: 2px; top: 0.62em;
  width: 7px; height: 7px;
  border-radius: 2px;
  background: var(--note-ink);
  opacity: 0.7;
  rotate: 45deg;
}

/* Wide: center line, notes alternate sides and overlap vertically */
@container (min-width: 820px) {
  .timeline { gap: 0; padding-left: 0; }
  .timeline::before { left: 50%; margin-left: -1px; }
  .timeline__item { width: calc(50% - 48px); }
  .timeline__item:nth-child(odd)  { justify-self: start; }
  .timeline__item:nth-child(even) { justify-self: end; }
  .timeline__item + .timeline__item { margin-top: -96px; }
  .timeline__item:nth-child(odd)::before  { left: auto; right: -57px; }
  .timeline__item:nth-child(even)::before { left: -57px; }
}


/* ==========================================================================
   10. SKILLS (grouped sticky notes)
   ========================================================================== */
.skills-grid {
  display: grid;
  gap: var(--space-7) var(--space-6);
  max-width: 1000px;
  margin-inline: auto;
}
@container (min-width: 640px) {
  .skills-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .skill-note:nth-child(even) { margin-top: var(--space-6); }
}

.skill-note__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 750;
  letter-spacing: -0.02em;
}
.skill-note__title .icon { --icon: 20px; color: var(--note-ink); }
.skill-note__foot {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-right: var(--space-5);
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--text-muted);
}
.skill-note__foot .icon { color: var(--note-ink); }


/* ==========================================================================
   11. CONTACT (form on a big sticky note)
   ========================================================================== */
.contact-note {
  --fold: 36px;
  max-width: 760px;
  margin-inline: auto;
}
.contact-note .note__paper { padding: var(--space-7) var(--space-5) var(--space-6); }
@media (min-width: 768px) {
  .contact-note .note__paper { padding: var(--space-8) var(--space-7) var(--space-7); }
}

.contact-form { display: grid; gap: var(--space-5); }
.field-row { display: grid; gap: var(--space-5); }
@container (min-width: 640px) {
  .field-row { grid-template-columns: 1fr 1fr; }
}

.field { display: grid; gap: var(--space-2); }
.field label,
.field legend {
  font-size: var(--fs-meta);
  font-weight: 650;
  color: var(--text);
}
.field legend { margin-bottom: var(--space-3); padding: 0; }
.field__hint { margin-left: 4px; font-weight: 500; color: var(--text-subtle); }

.field input,
.field textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--card);
  font-size: var(--fs-md);   /* 16px: stops iOS from zooming in */
  line-height: 1.5;
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur) var(--ease-out);
}
.field textarea { min-height: 140px; resize: vertical; }
.field input::placeholder,
.field textarea::placeholder { color: var(--text-subtle); }
.field input:hover,
.field textarea:hover { border-color: #bfb6a6; }
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.16);
}
.field [aria-invalid="true"] { border-color: var(--danger); }
.field [aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.14); }

.field__error {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--danger-ink);
}
.field__error:empty { display: none; }

/* Service chips: real checkboxes, styled as pastel stickers */
.service-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.service-chip {
  --chip-bg: var(--lavender);
  --chip-ink: var(--lavender-ink);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 8px 14px 8px 12px;
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--card);
  font-size: var(--fs-meta);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out),
              rotate var(--dur-spring) var(--ease-spring), scale var(--dur) var(--ease-spring);
}
.service-chip .icon { --icon: 16px; color: var(--chip-ink); }
.service-chip input {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.service-chip:hover { border-color: var(--chip-ink); }
.service-chip:active { scale: 0.96; }
.service-chip:has(input:checked) {
  border-style: solid;
  border-color: var(--chip-ink);
  background: var(--chip-bg);
  rotate: -1.5deg;
}
.service-chip:nth-child(even):has(input:checked) { rotate: 1.5deg; }
.service-chip:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.service-chip--pink     { --chip-bg: var(--pink);     --chip-ink: var(--pink-ink); }
.service-chip--blue     { --chip-bg: var(--blue);     --chip-ink: var(--blue-ink); }
.service-chip--yellow   { --chip-bg: var(--yellow);   --chip-ink: #a16207; }
.service-chip--green    { --chip-bg: var(--green);    --chip-ink: var(--green-ink); }

/* Honeypot: off-screen for people, still in the DOM for bots */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  background: var(--danger-soft);
  color: var(--danger-ink);
  font-size: var(--fs-meta);
  font-weight: 500;
}
.form-alert[hidden] { display: none; }
.form-alert .icon { margin-top: 2px; }

.contact-form__actions .btn { width: 100%; }
@container (min-width: 640px) {
  .contact-form__actions .btn { width: auto; }
}
.btn[aria-busy="true"] { pointer-events: none; opacity: 0.85; }
.btn[aria-busy="true"] .btn__icon { animation: spin 0.9s linear infinite; }

/* Success state */
.form-success {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  padding: var(--space-5) 0;
  text-align: center;
  outline: none;
}
.form-success[hidden] { display: none; }
.form-success__icon {
  display: grid;
  place-items: center;
  width: 64px; height: 64px;
  margin-bottom: var(--space-2);
  border-radius: 50%;
  background: var(--green);
  color: var(--success-ink);
  rotate: -6deg;
}
.form-success__icon .icon { --icon: 30px; }
.form-success__title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 750;
  letter-spacing: -0.02em;
}
.form-success__text { max-width: 26rem; color: var(--text-muted); margin-bottom: var(--space-3); }

/* Email fallback below the form */
.email-fallback {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  margin-top: var(--space-7);
  text-align: center;
  color: var(--text-muted);
}
.email-fallback__btn {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2) var(--space-3);
  max-width: 100%;
  min-height: 48px;
  padding: 8px 8px 8px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--card);
  box-shadow: var(--shadow-sm);
  color: var(--text);
  font-size: var(--fs-meta);
  font-weight: 600;
  overflow-wrap: anywhere;
  transition: box-shadow var(--dur) var(--ease-out), border-color var(--dur) ease, scale var(--dur) var(--ease-spring);
}
.email-fallback__btn > .icon { color: var(--accent); }
.email-fallback__btn:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.email-fallback__btn:active { scale: 0.98; }
.email-fallback__copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: var(--fs-sm);
}
.email-fallback__copy .icon { --icon: 14px; }


/* ==========================================================================
   12. FOOTER + TOAST
   ========================================================================== */
.site-footer {
  padding: var(--space-6) var(--gutter) max(var(--space-6), env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: var(--surface);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-subtle);
}

.toast {
  position: fixed;
  left: calc(50% + var(--sidebar-current) / 2);
  bottom: max(24px, env(safe-area-inset-bottom));
  z-index: 80;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px 16px 10px 12px;
  border-radius: var(--radius-pill);
  background: var(--text);
  color: var(--surface);
  font-size: var(--fs-sm);
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  translate: -50% 16px;
  scale: 0.96;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease-out), translate var(--dur-slow) var(--ease-spring),
              scale var(--dur-slow) var(--ease-spring);
}
.toast .icon { --icon: 16px; color: #86efac; }
.toast.is-visible { opacity: 1; translate: -50% 0; scale: 1; }


/* ==========================================================================
   13. MOTION
   - .reveal        → hero entrance on page load (staggered by --i)
   - [data-reveal]  → fades + rises when scrolled into view (JS adds
                      .is-inview and sets --i for the stagger)
   Both use `animation-fill-mode: backwards`, so hover transitions take over
   cleanly afterwards. Phones get a shorter, lighter version.
   ========================================================================== */
@keyframes rise-in {
  from { opacity: 0; translate: 0 var(--rise, 14px); scale: 0.985; }
}
@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.45); }
  70%  { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
@keyframes spin { to { rotate: 360deg; } }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  :root {
    --rise: 12px;
    --reveal-dur: 520ms;
    --reveal-ease: var(--ease-out);
    --reveal-step: 60ms;
  }
  @media (min-width: 768px) {
    :root {
      --rise: 22px;
      --reveal-dur: 900ms;
      --reveal-ease: var(--ease-spring-soft);
      --reveal-step: 90ms;
    }
  }

  .js .reveal {
    animation: rise-in var(--reveal-dur) var(--reveal-ease) backwards;
    animation-delay: calc(150ms + var(--i, 0) * var(--reveal-step));
  }

  .js [data-reveal]:not(.is-inview) { opacity: 0; }
  .js [data-reveal].is-inview {
    animation: rise-in var(--reveal-dur) var(--reveal-ease) backwards;
    animation-delay: calc(var(--i, 0) * var(--reveal-step));
  }

  .status-dot { animation: pulse-ring 2.4s var(--ease-out) infinite; }

  /* Desktop hover: notes + cards lift and straighten (also on keyboard focus) */
  @media (hover: hover) and (pointer: fine) {
    .note:hover,
    .note:focus-within {
      rotate: 0deg;
      translate: 0 -6px;
      scale: 1.015;
      filter: var(--drop-hover);
    }
    /* the contact form shouldn't jump around while typing */
    .contact-note:hover,
    .contact-note:focus-within { translate: 0 -2px; scale: 1; }

    .hero__tag { transition: rotate var(--dur-spring) var(--ease-spring), translate var(--dur-spring) var(--ease-spring); }
    .hero__tag:hover { rotate: 0deg; translate: 0 -3px; }

    .project-card:hover,
    .project-card:focus-within {
      rotate: 0deg;
      translate: 0 -10px;
      scale: 1.035;
      z-index: 3;
    }
    .project-card:hover .project-card__window,
    .project-card:focus-within .project-card__window { box-shadow: var(--shadow-xl); }
    .project-card:hover .project-card__media img { scale: 1.03; }
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ==========================================================================
   FUTURE: dark mode. Uncomment and fill in, then toggle data-theme on <html>.
   ==========================================================================
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121110;
  --surface: #1a1918;
  --surface-2: #24221f;
  --card: #1f1d1b;
  --border: #2e2b27;
  --text: #f5f5f4;
  --text-muted: #a8a29e;
  --accent-soft: #2a1f47;
  --paper: #2a2722;
  ...
}
*/