/* --------------------------------------------------
   My Aurora Femme skin: dreamy gradients + soft glass
--------------------------------------------------- */

/* Base tokens: reusable colors, shadows, glow levels */
:root {
  --bg: #0e1221;
  --bg-2: #101425;
  --fg: #eef3fb;
  --muted: #9bb0c9;

  --card: rgba(255,255,255,0.06);
  --border: rgba(255,255,255,0.16);
  --shadow: 0 10px 30px rgba(7,12,26,.35);

  --p1: #7b9eff;   /* my anchor aurora blue */
  --p2: #ff86c8;   /* glow-y pink accent   */
  --p3: #7bffc2;   /* minty highlight */
  --accent: var(--p1);

  --cloud-top: rgba(255,255,255,0.65);
  --cloud-mid: rgba(227,241,255,0.45);
  --cloud-bottom: rgba(197,219,255,0.25);
}

/* Theme toggles so I can mood-swap without editing CSS */
.theme-aurora { --bg:#0e1221; --bg-2:#101425; --accent:#7b9eff; --p2:#ff86c8; --p3:#7bffc2; }
.theme-sakura  { --bg:#1f1622; --bg-2:#2a1c2b; --accent:#ff78b0; --p2:#ffd1e6; --p3:#a1ffe0; }
.theme-isla {
  --bg: #071816;
  --bg-2: #0d2320;
  --accent: #ffd27e; /* soft sun */
  --p2: #ff9fb3;     /* warm hibiscus pink */
  --p3: #7fffd4;     /* seafoam mint */
}

.mode-light {
  --fg: #0e1221;
  --muted: #5b6275;
  --card: rgba(255,255,255,0.82);
  --border: rgba(9,15,30,0.12);
  --shadow: 0 18px 40px rgba(10,16,30,0.15);
  --cloud-top: rgba(255,255,255,0.9);
  --cloud-mid: rgba(210,228,255,0.5);
  --cloud-bottom: rgba(176,205,240,0.35);
}
.mode-light.theme-aurora { --bg:#f4fbff; --bg-2:#d3e5ff; --accent:#4d66bf; --p2:#ffafd7; --p3:#7bd7c2; }
.mode-light.theme-sakura  { --bg:#fff8f6; --bg-2:#fdeeee; --accent:#d8648f; --p2:#ffd8e5; --p3:#c9ffe8; }
.mode-light.theme-isla    { --bg:#fffbe9; --bg-2:#ffeecf; --accent:#f5a528; --p2:#ffc4d4; --p3:#8bdccc; }

* { box-sizing: border-box; }
html,body { height:100%; }
body {
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  color: var(--fg);
  background-color: var(--bg);
  background-image:
    radial-gradient(1200px 600px at 20% -10%, color-mix(in oklab, var(--p2) 35%, transparent), transparent 60%),
    radial-gradient(900px 600px at 80% 0%, color-mix(in oklab, var(--p1) 28%, transparent), transparent 60%),
    radial-gradient(1100px 700px at 40% 120%, color-mix(in oklab, var(--p3) 32%, transparent), transparent 70%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  transition:
    background 0.8s ease,
    color 0.3s ease;
  line-height:1.6;
  overflow-x:hidden;
}
.mode-light {
  background-image:
    radial-gradient(1000px 600px at 16% 10%, color-mix(in oklab, var(--p2) 25%, #ffffff), transparent 70%),
    radial-gradient(900px 600px at 90% 0%, color-mix(in oklab, var(--p3) 30%, #ffffff), transparent 65%),
    radial-gradient(1300px 900px at 50% 120%, color-mix(in oklab, var(--p1) 18%, #ffffff), transparent 80%);
}
.theme-sakura {
  background-image:
    radial-gradient(900px 520px at 20% -10%, rgba(255, 120, 176, 0.65), transparent 60%),
    radial-gradient(700px 520px at 80% 10%, rgba(255, 205, 220, 0.35), transparent 65%),
    radial-gradient(1200px 680px at 50% 110%, rgba(161, 255, 224, 0.25), transparent 75%);
}
.mode-light.theme-sakura {
  background-image:
    radial-gradient(1000px 520px at 10% 0%, rgba(255, 178, 206, 0.75), transparent 70%),
    radial-gradient(900px 520px at 88% 12%, rgba(255, 233, 238, 0.8), transparent 70%),
    radial-gradient(1200px 820px at 55% 120%, rgba(201, 255, 230, 0.45), transparent 80%);
}
.theme-isla {
  background-image:
    radial-gradient(940px 560px at 15% -5%, rgba(68, 175, 160, 0.55), transparent 65%),
    radial-gradient(800px 520px at 80% 5%, rgba(255, 184, 120, 0.35), transparent 70%),
    radial-gradient(1200px 760px at 45% 115%, rgba(139, 220, 204, 0.35), transparent 80%);
}
.mode-light.theme-isla {
  background-image:
    radial-gradient(900px 520px at 12% 5%, rgba(255, 224, 170, 0.8), transparent 70%),
    radial-gradient(900px 520px at 78% -5%, rgba(139, 220, 204, 0.6), transparent 70%),
    radial-gradient(1200px 880px at 45% 125%, rgba(255, 196, 212, 0.4), transparent 85%);
}

/* Glass utility class I slap on almost everything */
.glass {
  background: var(--card);
  border: 1px solid var(--border);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  border-radius: 16px;
}

/* Scroll reveal = slight lift so sections float in softly */
.reveal {
  opacity: 0;
  transform: translateY(18px) scale(0.98);
  transition:
    opacity 0.6s ease-out,
    transform 0.6s ease-out;
}
.reveal.reveal-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Support tools grid – keeps those helper cards tidy */
.tools-grid {
  max-width: 1100px;
  margin: 16px auto 0;
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .tools-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.small-text {
  font-size: 13px;
}
.os-pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  font-size: 14px;
}
.mode-light .os-pill{
  background: rgba(255,255,255,0.85);
  border-color: rgba(8,12,26,0.1);
  color: var(--fg);
}

/* Floating stickers = purely for joy */
.sticker { position: fixed; z-index: 2; font-size: 28px; opacity:.8; user-select:none; pointer-events:none; }
.sticker.heart { top: 90px; right: 22px; transform: rotate(-12deg); transition: opacity 0.45s ease, transform 0.45s ease; }
.sticker.star  { top: 110px; left: 24px;  transform: none; }
.sticker.heart.is-hidden{
  opacity:0;
  transform: translateY(-10px) scale(.9);
}

/* Static SVG doodles so the layout never feels flat */
.decor {
  position: fixed;
  z-index: 1;
  color: rgba(255, 255, 255, 0.22);
  pointer-events: none;
}
.decor-leaf { bottom: -10px; left: -10px; width: 180px; opacity: 0.18; }
.decor-wave { bottom: 40px; right: -40px; width: 220px; opacity: 0.14; }
.decor-sun  { top: -10px; right: 20px; width: 140px; opacity: 0.18; }

/* Canvas sky sits behind everything at z-index 0 */
#sky { position: fixed; inset:0; z-index:0; opacity:.45; transition:opacity .5s ease; }
.mode-light #sky{ opacity:.35; }

/* Sparkle layer for pointer clicks */
#sparkles { position: fixed; inset:0; pointer-events:none; z-index: 3; }

/* Sticky nav styling */
.nav {
  position: sticky; top:0; z-index: 10;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:12px 20px; margin:12px;
  flex-wrap:wrap;
}
.brand { text-decoration:none; color:var(--fg); font-weight:800; letter-spacing:.4px; }
.brand .mark{
  display:inline-grid; place-items:center;
  width:28px; height:28px; border-radius:9px;
  background: linear-gradient(180deg, var(--p2), var(--p3));
  color:#0d1221; font-weight:800; margin-right:6px;
}
.blink { animation: blink 1.2s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }

.nav .nav-menu { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.nav .nav-menu a { color:var(--fg); text-decoration:none; font-size:14px; opacity:.92; }
.nav .nav-menu a:hover{ color:var(--accent); }

.nav-toggle{
  display:none;
  border:none;
  background:color-mix(in oklab, var(--card) 80%, rgba(255,255,255,0.08));
  border-radius:12px;
  padding:8px;
  cursor:pointer;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:4px;
}
.nav-toggle__bar{
  width:22px;
  height:2px;
  border-radius:999px;
  background:var(--fg);
  transition:transform .25s ease, opacity .25s ease;
}
.nav-toggle:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; }
.nav-toggle.is-open .nav-toggle__bar:nth-child(1){
  transform: translateY(6px) rotate(45deg);
}
.nav-toggle.is-open .nav-toggle__bar:nth-child(2){
  opacity:0;
}
.nav-toggle.is-open .nav-toggle__bar:nth-child(3){
  transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 900px){
  .nav {
    padding:10px 16px;
  }
  .nav .nav-menu {
    width:100%;
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
    margin-top:8px;
    display:none;
  }
  .nav .nav-menu.open {
    display:flex;
  }
  .nav .palette {
    width:100%;
  }
  .nav-toggle{
    display:flex;
  }
  .nav .nav-menu a{
    font-size:15px;
  }
  .nav .palette{
    justify-content:flex-start;
  }
}

.mode-toggle{
  position:fixed;
  width:56px;
  height:56px;
  border-radius:18px;
  border:1px solid var(--border);
  background: color-mix(in oklab, var(--card) 80%, rgba(255,255,255,0.1));
  color:var(--accent);
  display:grid;
  place-items:center;
  cursor:pointer;
  pointer-events:auto;
  user-select:none;
  z-index:15;
  box-shadow: var(--shadow);
  opacity:1;
  transition:
    background 0.35s ease,
    border-color 0.35s ease,
    transform 0.25s ease,
    opacity 0.35s ease;
}
.mode-toggle:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; }
.mode-toggle:hover{ transform: translateY(-2px); }
.mode-toggle__icon{
  font-size:24px;
  transition: opacity 0.35s ease, transform 0.35s ease;
  position:absolute;
}
.mode-toggle.is-hidden{
  opacity:0;
  transform: translateY(8px) scale(.96);
  pointer-events:none;
}
.mode-toggle__icon--sun{ opacity:0; transform: scale(.7); color:#f9b84f; }
.mode-toggle__icon--moon{ opacity:1; transform: scale(1); }
.mode-light .mode-toggle__icon--sun{ opacity:1; transform:scale(1); }
.mode-light .mode-toggle__icon--moon{ opacity:0; transform:scale(.7); }
.mode-toggle--twinkle::after,
.mode-toggle--glow::after{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:50%;
  pointer-events:none;
}
.mode-toggle--twinkle::after{
  animation: twinkle .7s ease;
  border:1px solid rgba(255,255,255,0.6);
}
.mode-toggle--glow::after{
  animation: glow .9s ease;
  background: radial-gradient(circle, rgba(255,227,148,0.7), transparent 70%);
}
@keyframes twinkle{
  0%{ transform:scale(.4); opacity:0; }
  40%{ opacity:1; }
  100%{ transform:scale(1.3); opacity:0; }
}
@keyframes glow{
  0%{ transform:scale(.4); opacity:0; }
  30%{ opacity:.8; }
  100%{ transform:scale(1.5); opacity:0; }
}

/* Theme chips I tap when I’m feeling fidgety */
.palette .chip{
  border:1px solid var(--border); background:transparent; color:var(--fg);
  padding:6px 10px; border-radius:999px; cursor:pointer; font-size:12px;
}

/* Hero styling: badges, headline, chips, etc. */
.hero{ padding: 80px 18px 40px; position: relative; z-index:1; }
.hero-inner{ max-width:1100px; margin:0 auto; text-align:center; position:relative; }
.badge{
  display:inline-block; padding:6px 10px; border-radius:999px; font-size:12px;
  background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.04));
  border:1px solid var(--border);
}
.headline{ font-size: clamp(36px,6vw,64px); margin:14px 0 8px; letter-spacing:.3px; }
.subheadline{ font-size: clamp(16px,2.4vw,22px); margin:0 0 6px; opacity:.95; }
.tagline{ color:var(--muted); margin: 4px 0 14px; }
.hero-actions .btn{ margin:6px; }
.chips{ display:flex; gap:8px; justify-content:center; margin:12px 0 18px; }
.chip-pink,.chip-blue,.chip-green{
  border:1px solid var(--border); padding:6px 10px; border-radius:999px; font-size:12px;
}
.chip-pink{ background: rgba(255,134,200,.12); }
.chip-blue{ background: rgba(123,158,255,.12); }
.chip-green{ background: rgba(123,255,194,.12); }

/* Responsive layout: polaroid leads on mobile, 2-col on desktop */
.hero-grid {
  display: grid;
  gap: 22px;
  grid-template-columns: 1fr;          /* stack on mobile so photo leads */
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}

/* Polaroid tweaks so it “leads” the section nicely */
.polaroid {
  width: min(320px, 80%);
  margin: 0 auto 10px;                 /* top-center on mobile */
  transform: translateY(0);            /* subtle hover lift */
  transition: transform .25s ease;
}
.polaroid:hover { transform: translateY(-4px); }

@media (min-width: 900px) {
  .hero-grid {
    grid-template-columns: 0.9fr 1.1fr; /* left photo, right copy */
    gap: 28px;
  }
  .polaroid { margin: 0 auto 0 0; }     /* align left when there’s space */
  .hero-copy { text-align: left; }
  .hero-actions { justify-content: flex-start; }
  .chips { justify-content: flex-start; }
}

/* Base polaroid styling shared everywhere else */
.polaroid{ width:min(280px,60%); margin:18px auto 0; text-align:center; padding:10px; }
.polaroid img{ width:100%; border-radius:12px; display:block; }
.polaroid figcaption{ font-family:"Kalam", cursive; color:#ffe3f2; font-size:14px; margin-top:6px; }

/* Buttons with the signature gradients */
.btn{ display:inline-block; text-decoration:none; font-weight:700; border:none; cursor:pointer;
      color:#0c1320; background: linear-gradient(180deg, var(--accent), color-mix(in oklab, var(--accent) 70%, #fff));
      padding:12px 16px; border-radius:12px; box-shadow: 0 10px 20px rgba(0,0,0,.18); }
.btn.secondary{ color:#07111e; background: linear-gradient(180deg, var(--p2), #ff7cc0);}
.btn.outline{ color:var(--fg); background:transparent; border:1px solid var(--border); }

/* Shared section spacing + headlines */
.section{ padding:64px 18px; position:relative; z-index:1; }
.section-head{ max-width:1100px; margin:0 auto 12px; text-align:center; }
.section-head h2{ margin:0; font-size:28px; }
.accent-script{ font-family:"Kalam", cursive; color: var(--p2); margin:2px 0 0; }

/* Layout helpers for repeated card grids */
.grid.two{ display:grid; gap:16px; grid-template-columns:1fr; max-width:1100px; margin:0 auto; }
@media (min-width:900px){ .grid.two{ grid-template-columns:1.1fr .9fr; } }
.card{ padding:18px; border-radius:16px; }
.muted{ color:var(--muted); }

/* Timeline list used in about + experience */
.timeline{ list-style:none; padding:0; margin:0; }
.timeline li{
  padding:10px 0 10px 32px;
  margin:0;
  position:relative;
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.timeline li::before{
  content:""; position:absolute; left:0; top:18px; width:10px; height:10px; border-radius:50%;
  background: var(--p3); box-shadow: 0 0 0 3px rgba(123,255,194,.18);
}
.timeline span{
  flex:0 0 auto;
  color:var(--muted);
  font-weight:600;
  white-space:nowrap;
}

/* Skills grid with subtle hover lift */
.skills-wrap{ max-width:1100px; margin:12px auto 0; display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width:900px){ .skills-wrap{ grid-template-columns: repeat(2, 1fr); } }
.skill-card{ transition: transform .25s ease, box-shadow .25s ease; }
.skill-card:hover{ transform: translateY(-4px); }

/* Projects hub: toggles, grids, tools list, etc. */
.toggle{ border:1px solid var(--border); background:transparent; color:var(--fg); padding:6px 10px; border-radius:8px; cursor:pointer; }
.toggle.on{ background: rgba(255,255,255,.08); }

.project-grid{ max-width:1100px; margin:12px auto 0; display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width:900px){ .project-grid{ grid-template-columns: repeat(3, 1fr); } }

.card.project{ display:flex; flex-direction:column; gap:10px; }
.project-status{
  font-size:13px;
  font-style:italic;
  margin:-6px 0 10px;
}
.tools{ display:flex; flex-wrap:wrap; gap:8px; }
.tool{ font-size:12px; color:var(--muted); border:1px solid var(--border); border-radius:999px; padding:4px 8px; }
.links{ display:flex; gap:10px; }

.project-stories{ max-width:900px; margin:14px auto 0; display:grid; gap:14px; }
.story{ padding:16px; border-left:4px solid var(--accent); }
.story h4{ margin:0 0 6px; }

/* Search + filter controls so folks can sift quickly */
.project-filters {
  max-width: 700px;
  margin: 16px auto 0;
  display: grid;
  gap: 10px;
}
#projectSearch {
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  color: var(--fg);
  font-size: 14px;
}
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.chip.small {
  font-size: 11px;
  padding: 4px 10px;
}
.chip.small.on {
  background: rgba(255, 255, 255, 0.1);
}

/* Experience grid so cards stack nicely on small screens */
.experience{ max-width:1100px; margin:12px auto 0; display:grid; gap:14px; }

/* Case study modal overlay + content card */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: radial-gradient(
    circle at top,
    rgba(8, 12, 26, 0.85),
    rgba(2, 4, 10, 0.96)
  );
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
}
.modal {
  max-width: 640px;
  width: 90%;
  position: relative;
  padding: 20px 20px 18px;
}
.modal-body p {
  margin: 8px 0;
}
.modal-close {
  position: absolute;
  right: 12px;
  top: 10px;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 18px;
}
.modal-close:hover {
  color: var(--accent);
}

/* Wins grid – because bragging deserves structure */
.wins-grid {
  max-width: 1100px;
  margin: 16px auto 0;
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .wins-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Learning roadmap spacing + bullet tweaks */
.learning-roadmap {
  max-width: 1100px;
  margin: 18px auto 0;
}
.learning-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
}
.learning-list li + li {
  margin-top: 8px;
}

/* Education link buttons under each school entry */
.edu-entry {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.edu-entry:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}
.edu-entry p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 14px;
}
.edu-note {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-top: 2px;
}
.edu-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.edu-links .btn.small {
  font-weight: 600;
}
.cert-entry {
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.cert-entry:last-of-type {
  border-bottom: none;
}

/* Assistant bubble + panel for quick project helpers */
.assistant-bubble {
  position: fixed;
  right: 16px;
  bottom: 88px;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  background: rgba(12, 16, 32, 0.78);
  cursor: pointer;
  z-index: 15;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.assistant-bubble.is-hidden{
  opacity:0;
  transform: translateY(12px) scale(.94);
  pointer-events:none;
}
.assistant-panel {
  position: fixed;
  right: 16px;
  bottom: 146px;
  max-width: 260px;
  padding: 12px 14px;
  border-radius: 18px;
  z-index: 15;
}
.assistant-title {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 13px;
}
.assistant-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.btn.small {
  padding: 8px 10px;
  font-size: 12px;
}
.btn.outline.small {
  padding: 6px 9px;
}

/* Glow effect when the assistant jumps to a card */
.project-highlight {
  box-shadow: 0 0 0 1px var(--accent), 0 0 24px rgba(255, 255, 255, 0.28);
  transform: translateY(-6px);
  transition: box-shadow 0.4s ease, transform 0.4s ease;
}

.tiny-note {
  font-size: 12px;
  margin: 4px 0 0;
}

/* Contact form layout */
.contact{ max-width:700px; margin:0 auto; }
.field{ display:grid; gap:6px; margin:10px 0; }
input, textarea{
  background: rgba(255,255,255,.06); color:var(--fg);
  border:1px solid var(--border); border-radius:12px; padding:10px 12px; outline:none;
}
textarea{ min-height:120px; }
.mode-light input,
.mode-light textarea{
  background: rgba(255,255,255,0.9);
  border-color: rgba(8,12,26,0.12);
  color: var(--fg);
}

/* Footer area + floating dock nav */
.footer{ max-width:1100px; margin:16px auto; padding:16px; display:flex; justify-content:space-between; align-items:center; gap:10px; border-radius:16px; }
.footer a{ color:var(--fg); text-decoration:none; }

.dock{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:14px; display:flex; gap:10px; z-index:10; padding:8px 10px; border-radius:14px;
}
.dock-btn{
  width:40px; height:40px; border-radius:12px; display:grid; place-items:center; font-size:20px;
  color:var(--fg); background: transparent; border:1px solid var(--border);
}
.hidden{ display:none; }

@media (max-width: 900px){
  .hero{ padding:64px 16px 32px; }
  .section{ padding:56px 16px; }
  .hero-grid{ grid-template-columns:1fr; }
  .headline{ font-size: clamp(32px, 7vw, 48px); }
}

@media (max-width: 768px){
  .mode-toggle{ width:48px; height:48px; border-radius:16px; }
  .mode-toggle__icon{ font-size:20px; }
  .mode-toggle{ top: 12px; left: 12px; }
  body{ padding:0 12px; font-size:15px; }
  .nav{ margin:10px 0 6px; padding:12px; width:100%; }
  .nav .nav-menu{ width:100%; }
  .brand{ font-size:20px; }
  .palette .chip{ padding:5px 10px; font-size:12px; }
  .hero{ padding:58px 8px 30px; margin:0; }
  .hero-inner{ gap:18px; padding:0 8px; }
  .hero-grid .polaroid{ order:1; margin:0 auto 14px; width:min(240px, 70vw); padding:10px; }
  .hero-grid .polaroid img{ max-height:50vh; }
  .hero-grid .hero-copy{ order:2; }
  .polaroid img{ max-height:55vh; object-fit:cover; border-radius:10px; }
  .polaroid figcaption{ font-size:13px; }
  .badge{ font-size:12px; }
  .headline{ font-size: clamp(30px, 7.4vw, 44px); }
  .subheadline{ font-size:15px; }
  .tagline{ font-size:14px; }
  .hero-actions .btn{ padding:10px 14px; font-size:14px; }
  .chips{ flex-wrap:wrap; gap:6px; }
  .polaroid{ width: min(240px, 72%); }
  .section{ padding:46px 8px; }
  .section-head{ padding:0 10px; }
  .section-head h2{ font-size:24px; }
  .card{ padding:14px 16px; }
  .card h3{ font-size:18px; }
  .card p{ line-height:1.55; }
  .skills-wrap,
  .grid.two,
  .wins-grid,
  .project-grid{ gap:14px; }
  .project-grid{ grid-template-columns:1fr; }
  .project-stories,
  .tools-grid,
  .project-filters{ padding:0 6px; }
  .contact{ padding:0 8px; }
  .btn{ padding:10px 14px; font-size:14px; }
  .footer{ flex-direction:column; text-align:center; padding:14px; margin:16px 0 8px; }
}

@media (max-width: 480px){
  body{ font-size:14px; padding:0 10px; }
  .nav{ padding:8px 10px; margin:6px 0; }
  .brand{ font-size:18px; }
  .palette .chip{ font-size:11px; }
  .nav .nav-menu a{ font-size:14px; }
  .hero{ padding:38px 0 18px; }
  .hero-inner{ gap:12px; padding:0 4px; }
  .hero-grid .polaroid{ width:min(210px, 72vw); padding:8px; }
  .polaroid{ width: min(180px, 70%); }
  .polaroid img{ max-height:45vh; }
  .polaroid figcaption{ font-size:12px; }
  .headline{ font-size: clamp(24px, 8.4vw, 32px); }
  .subheadline{ font-size:13px; }
  .tagline{ font-size:12px; }
  .badge{ font-size:11px; }
  .hero-actions{ display:flex; flex-direction:column; gap:8px; }
  .hero-actions .btn{ width:100%; text-align:center; padding:9px 12px; font-size:13px; }
  .chips{ justify-content:center; gap:6px; }
  .section{ padding:34px 0; }
  .section-head h2{ font-size:22px; }
  .card{ padding:12px 14px; }
  .timeline li{ padding:8px 0 8px 26px; }
  .experience p,
  .wins-grid article p,
  .card p{ font-size:14px; }
  .project-filters{ padding:0; }
  #projectSearch{ font-size:13px; }
  .btn{ padding:9px 12px; font-size:13px; }
  .btn.small,
  .btn.outline.small{ padding:8px 10px; font-size:12px; }
  .footer{ padding:12px; }
  .dock{ bottom:12px; }
  .dock-btn{ width:34px; height:34px; font-size:18px; }
}

@media (max-width: 380px){
  body{ padding:0 6px; }
  .nav{ flex-direction:column; align-items:flex-start; padding:8px; }
  .hero{ padding:34px 0 18px; }
  .headline{ font-size:24px; }
  .subheadline{ font-size:12px; }
  .tagline{ font-size:11px; }
  .hero-actions .btn{ font-size:12px; }
}