/* ============================================================
   Jishan Gahlot — Digital Resume (Ghibli / Wabi-sabi light)
   Palette: cream paper, totoro sky, sakura pink, sage, sumi-ink
   ============================================================ */

:root {
  --cream:    #fbf6ec;
  --cream-2:  #fef9f1;
  --paper:    #ffffff;
  --sky:      #cfe7f5;
  --sky-2:    #a8d0e6;
  --sage:     #cde7c8;
  --sage-2:   #8bbd83;
  --sakura:   #f9d4d8;
  --sakura-2: #e8a4af;
  --coral:    #e8856f;
  --gold:     #f5cf5b;
  --plum:     #b18fcf;

  --ink:      #2f3a3a;
  --ink-soft: #5e6c6c;
  --ink-mute: #8a9696;
  --line:     rgba(47, 58, 58, 0.10);
  --line-2:   rgba(47, 58, 58, 0.18);

  --radius:    18px;
  --radius-sm: 12px;
  --radius-lg: 28px;

  --shadow-1: 0 6px 16px rgba(47, 58, 58, 0.08);
  --shadow-2: 0 16px 40px rgba(47, 58, 58, 0.12);
  --shadow-soft: 0 2px 8px rgba(47, 58, 58, 0.06);

  --maxw: 1180px;
  --pad-x: clamp(1rem, 4vw, 3rem);

  --font:    'Nunito', 'Quicksand', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --display: 'Quicksand', 'Nunito', system-ui, sans-serif;
  --hand:    'Caveat', cursive;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--cream);
  background-image:
    radial-gradient(1200px 600px at 80% -10%, #ffe6c4 0%, transparent 60%),
    radial-gradient(900px 500px at 0% 10%, #d9ecf8 0%, transparent 60%),
    radial-gradient(800px 600px at 50% 100%, #e6f3e1 0%, transparent 60%);
  background-attachment: fixed;
  color: var(--ink);
  line-height: 1.65;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: var(--coral); text-decoration: none; transition: color .2s var(--ease); }
a:hover, a:focus-visible { color: var(--plum); }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--gold);
  color: var(--ink);
  padding: .6rem 1rem;
  font-weight: 700;
  border-radius: 0 0 8px 0;
  z-index: 200;
}
.skip-link:focus { left: 0; }

.theme-switch {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 50;
  padding: .65rem 1.1rem;
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  color: var(--ink);
  font-size: .85rem;
  font-weight: 600;
  box-shadow: var(--shadow-1);
  transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.theme-switch:hover {
  transform: translateY(-2px);
  background: var(--ink);
  color: #fff;
}

/* ===================== SKY / DECOR ===================== */
.sky {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.cloud {
  position: absolute;
  background: #ffffff;
  border-radius: 999px;
  opacity: 0.85;
  filter: blur(.5px);
  box-shadow:
    40px 8px 0 -2px #ffffff,
    -40px 12px 0 -4px #ffffff,
    25px -10px 0 -6px #ffffff,
    -25px -8px 0 -8px #ffffff;
}
.cloud--1 { width: 120px; height: 38px; top: 8%;  left: -120px; animation: float-x 60s linear infinite; }
.cloud--2 { width: 90px;  height: 30px; top: 18%; left: -100px; animation: float-x 80s linear infinite 8s; opacity: .7; }
.cloud--3 { width: 150px; height: 44px; top: 32%; left: -160px; animation: float-x 75s linear infinite 20s; opacity: .8; }
.cloud--4 { width: 80px;  height: 26px; top: 50%; left: -90px;  animation: float-x 95s linear infinite 30s; opacity: .6; }

@keyframes float-x {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(100vw + 200px)); }
}

.petal {
  position: absolute;
  top: -40px;
  font-size: 18px;
  opacity: 0.7;
  animation: petal-fall linear infinite;
  will-change: transform;
}
.petal--1 { left: 12%; font-size: 16px; animation-duration: 18s; animation-delay: 0s; }
.petal--2 { left: 28%; font-size: 14px; animation-duration: 24s; animation-delay: 4s; }
.petal--3 { left: 55%; font-size: 18px; animation-duration: 20s; animation-delay: 9s; }
.petal--4 { left: 72%; font-size: 15px; animation-duration: 26s; animation-delay: 2s; }
.petal--5 { left: 88%; font-size: 17px; animation-duration: 22s; animation-delay: 12s; }

@keyframes petal-fall {
  0%   { transform: translate(0, -10vh) rotate(0deg);   opacity: 0; }
  10%  { opacity: .8; }
  50%  { transform: translate(40px, 50vh) rotate(180deg); }
  100% { transform: translate(-30px, 110vh) rotate(360deg); opacity: 0; }
}

.hill {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 180px;
  opacity: 0.5;
}

/* ===================== HERO ===================== */
.hero {
  position: relative;
  padding: clamp(2.5rem, 7vw, 5rem) var(--pad-x) clamp(2rem, 5vw, 3.5rem);
}
.hero__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.5rem, 4vw, 3.2rem);
  align-items: center;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  box-shadow: var(--shadow-2);
}

.hero__avatar {
  position: relative;
  width: clamp(140px, 18vw, 200px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--paper);
  padding: 6px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
}
.hero__avatar::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--sakura) 0%, transparent 70%);
  z-index: -1;
  opacity: .9;
}
.hero__avatar img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.hero__eyebrow {
  margin: 0 0 .25rem;
  color: var(--coral);
  font-family: var(--hand);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
}

.hero__name {
  margin: 0 0 .35rem;
  font-family: var(--display);
  font-size: clamp(2rem, 4.6vw, 3.2rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--ink);
}
.hero__name::after {
  content: "";
  display: block;
  width: 84px;
  height: 8px;
  margin-top: .5rem;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--sakura-2) 0%, var(--gold) 60%, var(--sage-2) 100%);
  opacity: .9;
}
.hero__pronoun {
  font-size: .5em;
  font-weight: 500;
  color: var(--ink-mute);
}

.hero__title {
  margin: .75rem 0 .35rem;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--ink-soft);
  font-weight: 600;
}
.hero__location {
  margin: 0 0 1rem;
  color: var(--ink-mute);
  font-size: .95rem;
}

.hero__contact {
  list-style: none;
  padding: 0;
  margin: 0 0 1.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.25rem;
  font-size: .92rem;
}
.hero__contact a { color: var(--ink-soft); }
.hero__contact a:hover { color: var(--coral); }
.badge-primary {
  display: inline-block;
  margin-left: .35rem;
  padding: .08rem .55rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--gold);
  border-radius: 999px;
  vertical-align: middle;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1.3rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .01em;
  cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
  border: 1px solid transparent;
  text-decoration: none;
}
.btn--primary {
  background: #0a66c2;
  color: #fff;
  box-shadow: 0 10px 22px rgba(10, 102, 194, 0.32);
}
.btn--primary:hover {
  transform: translateY(-2px);
  background: #0959ac;
  color: #fff;
  box-shadow: 0 14px 28px rgba(10, 102, 194, 0.42);
}
.btn--ghost {
  background: var(--sakura-2);
  color: #fff;
  border-color: var(--sakura-2);
  box-shadow: 0 8px 18px rgba(232, 164, 175, 0.35);
}
.btn--ghost:hover {
  background: #d98c98;
  border-color: #d98c98;
  color: #fff;
  transform: translateY(-2px);
}

/* ===================== TABS ===================== */
.tabs {
  max-width: var(--maxw);
  margin: 1.5rem auto 0;
  padding: .5rem var(--pad-x);
  display: flex;
  gap: .35rem;
  overflow-x: auto;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(251, 246, 236, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.tabs::-webkit-scrollbar { height: 6px; }
.tabs::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 4px; }

.tab {
  scroll-snap-align: start;
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink-soft);
  font-family: inherit;
  font-size: .92rem;
  font-weight: 600;
  padding: .65rem 1rem;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.tab:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.6);
}
.tab.is-active {
  color: var(--ink);
  background: #ffffff;
  border-color: var(--line-2);
  box-shadow: var(--shadow-soft);
  transform: translateY(-1px);
}

/* ===================== PANELS ===================== */
.panels {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 3rem) var(--pad-x) 3rem;
}

.panel {
  display: none;
  animation: fadeUp .5s var(--ease);
}
.panel.is-active { display: block; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.panel__title {
  margin: 0 0 .5rem;
  font-family: var(--display);
  font-size: clamp(1.7rem, 3.2vw, 2.3rem);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink);
  position: relative;
  display: inline-block;
}
.panel__title::after {
  content: "";
  position: absolute;
  left: 0; right: 30%; bottom: -2px;
  height: 10px;
  background: var(--gold);
  opacity: .35;
  border-radius: 10px;
  z-index: -1;
}
.panel__lead {
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  color: var(--ink-soft);
  margin-top: .35rem;
  max-width: 70ch;
}
#panel-summary .panel__lead,
#panel-summary .panel__lead strong,
#panel-summary .panel__lead em,
#panel-summary .panel__lead span {
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  font-family: var(--font);
  line-height: 1.7;
}

.hl {
  color: var(--ink);
  font-weight: 700;
  background: linear-gradient(180deg, transparent 60%, var(--sakura) 60%);
  padding: 0 .15rem;
}

/* Featured Award (Summary) */
.featured-award {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: minmax(220px, 320px) 1fr;
  gap: 1.5rem;
  align-items: center;
  background: linear-gradient(160deg, #fff8e6 0%, #ffffff 60%, #fff1f2 100%);
  border: 1px solid var(--line);
  border-left: 5px solid var(--gold);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow-2);
  position: relative;
  overflow: hidden;
}
.featured-award::before {
  content: "🌸";
  position: absolute;
  top: -10px; right: -10px;
  font-size: 4rem;
  opacity: .12;
  transform: rotate(15deg);
  pointer-events: none;
}
.featured-award__media img {
  width: 100%;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-1);
  background: #fff;
}
.featured-award__ribbon {
  display: inline-block;
  padding: .25rem .75rem;
  background: var(--gold);
  color: var(--ink);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 999px;
  margin-bottom: .6rem;
}
.featured-award__body h3 {
  margin: 0 0 .5rem;
  font-family: var(--display);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.25;
}
.featured-award__body p {
  margin: 0;
  color: var(--ink-soft);
  font-size: .98rem;
  line-height: 1.6;
}

@media (max-width: 720px) {
  .featured-award {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .featured-award__media { max-width: 280px; margin: 0 auto; }
}

/* Stats */
.stats {
  margin-top: 2.5rem;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.stat {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem 1rem;
  text-align: center;
  box-shadow: var(--shadow-1);
  transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.stat:nth-child(1) { background: linear-gradient(160deg, #ffffff, #fff5d6); }
.stat:nth-child(2) { background: linear-gradient(160deg, #ffffff, #e3f1fb); }
.stat:nth-child(3) { background: linear-gradient(160deg, #ffffff, #e9f5e4); }
.stat:nth-child(4) { background: linear-gradient(160deg, #ffffff, #ffe6e7); }
.stat:hover { transform: translateY(-4px); }
.stat__num {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  font-weight: 700;
  color: var(--coral);
  line-height: 1.1;
}
.stat__lbl {
  display: block;
  font-size: .85rem;
  color: var(--ink-mute);
  margin-top: .25rem;
}

/* Skills */
.skill-groups {
  margin-top: 1.75rem;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.skill-group {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem 1.3rem;
  box-shadow: var(--shadow-1);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.skill-group:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.skill-group h3 {
  margin: 0 0 .9rem;
  font-family: var(--display);
  font-size: 1.05rem;
  color: var(--ink);
  letter-spacing: .01em;
}
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.chips li {
  padding: .35rem .85rem;
  background: var(--sky);
  color: var(--ink);
  font-size: .82rem;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.skill-group:nth-child(1) .chips li { background: #e0f0ff; }
.skill-group:nth-child(2) .chips li { background: #ffe9d9; }
.skill-group:nth-child(3) .chips li { background: #e6f5e0; }
.skill-group:nth-child(4) .chips li { background: #f3e3f7; }
.skill-group:nth-child(5) .chips li { background: #fff1d4; }
.chips li:hover {
  background: var(--ink);
  color: #fff;
  transform: translateY(-2px);
}

/* Timeline */
.timeline {
  list-style: none;
  padding: 0;
  margin: 1.75rem 0 0;
  position: relative;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: repeating-linear-gradient(180deg, var(--sage-2) 0 6px, transparent 6px 12px);
  border-radius: 2px;
}
.tl-item { position: relative; padding-left: 2.5rem; margin-bottom: 1.75rem; }
.tl-marker {
  position: absolute;
  left: 4px; top: 1.4rem;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid var(--coral);
  box-shadow: 0 0 0 4px rgba(232, 133, 111, 0.15);
}
.tl-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem;
  box-shadow: var(--shadow-1);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.tl-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.tl-head h3 {
  margin: 0 0 .2rem;
  font-family: var(--display);
  font-size: 1.2rem;
  color: var(--ink);
}
.tl-meta { margin: 0; color: var(--ink-soft); font-size: .92rem; font-weight: 500; }
.tl-date {
  display: inline-block;
  margin-top: .35rem;
  padding: .2rem .7rem;
  background: #fff1d4;
  color: #8a6420;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.tl-bullets { margin: 1rem 0 0; padding-left: 1.1rem; color: var(--ink-soft); }
.tl-bullets li { margin-bottom: .4rem; }
.tl-bullets li::marker { color: var(--sage-2); }

.tl-sub {
  margin: 1.4rem 0 .7rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--coral);
}
.projects { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.project {
  background: linear-gradient(160deg, #ffffff, #f6fbff);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1rem 1.1rem;
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.project:hover { transform: translateY(-3px); border-color: var(--sky-2); }
.project h5 {
  margin: 0 0 .35rem;
  font-family: var(--display);
  color: var(--ink);
  font-size: 1.02rem;
}
.project p { margin: 0; color: var(--ink-soft); font-size: .9rem; line-height: 1.55; }

.tl-stack {
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--line-2);
  font-size: .85rem;
  color: var(--ink-mute);
}
.tl-stack strong { color: var(--ink); }

/* Achievements */
.achievements { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: 1.25rem; }
.achv {
  background: linear-gradient(160deg, #ffffff, #fff8e6);
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius);
  padding: 1.3rem 1.5rem;
  box-shadow: var(--shadow-1);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.achv:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.achv__body h3 {
  margin: 0 0 .5rem;
  font-family: var(--display);
  font-size: 1.18rem;
  color: var(--ink);
}
.achv__body p { margin: 0; color: var(--ink-soft); }
.achv__figure { margin: 1rem 0 0; padding: 0; max-width: 420px; }
.achv__figure img {
  width: 100%;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-2);
  background: #fff;
}
.achv__figure figcaption {
  margin-top: .5rem;
  font-family: var(--hand);
  font-size: 1.05rem;
  color: var(--ink-mute);
}

/* Education */
.edu-grid {
  margin-top: 1.75rem;
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.edu-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.3rem 1.4rem;
  box-shadow: var(--shadow-1);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.edu-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.edu-card h3 {
  margin: 0 0 .3rem;
  font-family: var(--display);
  font-size: 1.1rem;
  color: var(--ink);
}
.edu-card__sub { margin: 0 0 .5rem; color: var(--ink); font-weight: 600; }
.edu-card__inst { margin: 0 0 .7rem; color: var(--ink-soft); font-size: .9rem; }
.edu-card__date {
  display: inline-block;
  padding: .2rem .7rem;
  background: var(--sage);
  color: #34532f;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
}

/* Certificates */
.cert-grid {
  list-style: none; margin: 1.75rem 0 0; padding: 0;
  display: grid; gap: .9rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.cert {
  display: flex; align-items: flex-start; gap: .9rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1rem 1.1rem;
  box-shadow: var(--shadow-soft);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.cert:hover { transform: translateY(-3px); box-shadow: var(--shadow-1); }
.cert__icon { font-size: 1.6rem; line-height: 1; flex-shrink: 0; }
.cert h3 {
  margin: 0 0 .2rem;
  font-family: var(--display);
  font-size: 1rem;
  color: var(--ink);
}
.cert p { margin: 0; font-size: .85rem; color: var(--ink-mute); }

/* Extras */
.extras { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: .9rem; }
.extras li {
  display: flex; align-items: flex-start; gap: 1rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1.1rem 1.3rem;
  box-shadow: var(--shadow-soft);
  transition: transform .25s var(--ease), background .25s var(--ease);
}
.extras li:hover { transform: translateX(4px); background: #fff8ec; }
.extras__emoji { font-size: 1.5rem; flex-shrink: 0; line-height: 1.2; }
.extras p { margin: 0; color: var(--ink-soft); }
.extras strong { color: var(--ink); }

/* Projects */
.proj-grid {
  margin-top: 1.75rem;
  display: grid;
  gap: 1.25rem;
}
.proj-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem 1.6rem;
  box-shadow: var(--shadow-1);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
  position: relative;
  overflow: hidden;
}
.proj-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--sakura-2) 0%, var(--gold) 50%, var(--sage-2) 100%);
}
.proj-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }

.proj-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .9rem;
}
.proj-card__head h3 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  color: var(--ink);
  font-weight: 700;
}
.proj-tags {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}
.proj-tags li {
  padding: .15rem .65rem;
  background: #e0f0ff;
  color: #0a4f8a;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
}
.proj-tags li:nth-child(2n) { background: #ffe9d9; color: #8a4a1f; }
.proj-tags li:nth-child(3n) { background: #e6f5e0; color: #34532f; }
.proj-tags li:nth-child(4n) { background: #f3e3f7; color: #5b3470; }

.proj-lead {
  margin: 0 0 1.1rem;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.65;
}
.proj-lead strong { color: var(--coral); font-weight: 700; }

.proj-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.25rem;
  margin-bottom: 1.1rem;
  padding: 1rem 1.1rem;
  background: #fdfaf2;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.proj-meta p { margin: .2rem 0 0; color: var(--ink-soft); font-size: .92rem; line-height: 1.55; }

.proj-meta__label {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--coral);
}

.proj-how {
  margin-bottom: 1.1rem;
}
.proj-how ol {
  margin: .4rem 0 0;
  padding-left: 1.4rem;
  color: var(--ink-soft);
  counter-reset: step;
  list-style: none;
}
.proj-how ol li {
  position: relative;
  padding: .15rem 0 .35rem 1.6rem;
  counter-increment: step;
}
.proj-how ol li::before {
  content: counter(step);
  position: absolute;
  left: 0; top: .15rem;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--sakura-2);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.proj-foot {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem 1.25rem;
  margin-bottom: 1rem;
  padding: 1rem 1.1rem;
  background: #fbfbff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.proj-foot p { margin: .2rem 0 0; color: var(--ink-soft); font-size: .9rem; line-height: 1.55; }

.proj-status {
  margin: 0;
  padding-top: .9rem;
  border-top: 1px dashed var(--line-2);
  font-size: .88rem;
  color: var(--ink-mute);
}
.proj-status strong { color: var(--ink); }

@media (max-width: 720px) {
  .proj-meta { grid-template-columns: 1fr; }
  .proj-foot { grid-template-columns: 1fr; }
  .proj-card__head { flex-direction: column; align-items: flex-start; }
}

/* Share / QR strip */
.share {
  max-width: 540px;
  margin: 0 auto 1.25rem;
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 1rem;
  align-items: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  box-shadow: var(--shadow-1);
  text-align: left;
}
.share__qr img {
  width: 92px; height: 92px;
  border-radius: 10px;
  background: #fff;
  padding: 4px;
  border: 1px solid var(--line);
}
.share__label { margin: 0 0 .25rem; font-weight: 700; color: var(--ink); font-size: .92rem; }
.share__url { margin: 0 0 .15rem; font-weight: 700; }
.share__url a { color: #0a66c2; }
.share__hint { margin: 0; font-size: .8rem; color: var(--ink-mute); }

@media (max-width: 480px) {
  .share { grid-template-columns: 1fr; text-align: center; }
  .share__qr { justify-self: center; }
}

/* Footer */
.footer {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 2rem var(--pad-x) 4rem;
  border-top: 1px solid var(--line);
  text-align: center;
  color: var(--ink-mute);
  font-size: .88rem;
}
.footer p { margin: .35rem 0; }
.footer__links a { color: var(--ink-soft); margin: 0 .15rem; }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 768px) {
  .hero { padding-top: 2rem; padding-bottom: 1.5rem; }
  .hero__inner {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
    padding: 1.5rem;
  }
  .hero__avatar { width: 140px; }
  .hero__contact { justify-content: center; }
  .hero__actions { justify-content: center; }
  .hero__name::after { margin-left: auto; margin-right: auto; }
  .tabs { padding: .5rem 1rem; }
  .tab { padding: .55rem .85rem; font-size: .85rem; }
  .timeline::before { left: 7px; }
  .tl-item { padding-left: 2rem; }
  .tl-marker { width: 12px; height: 12px; }
}

@media (max-width: 480px) {
  .hero__name { font-size: 1.8rem; }
  .panel__title { font-size: 1.55rem; }
  .tl-card { padding: 1.1rem 1.1rem; }
  .stats { grid-template-columns: 1fr 1fr; }
  .projects { grid-template-columns: 1fr; }
  .theme-switch { padding: .5rem .9rem; font-size: .8rem; }
}

/* Reduced motion */
@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;
  }
  .cloud, .petal { display: none; }
}

/* Print */
@media print {
  body { background: #fff; color: #000; }
  .sky, .tabs, .hero__actions, .footer__links, .theme-switch { display: none; }
  .panel { display: block !important; page-break-inside: avoid; }
  .hero__inner, .tl-card, .stat, .skill-group, .edu-card, .cert, .achv, .extras li { background: #fff !important; box-shadow: none !important; border-color: #ccc !important; }
}