/* =========================================================
   RAMAR RANJEET SKANDA — PORTFOLIO
   Multi-page · Yellow #ffde66 + Charcoal #3d3d3d
   Professional · readable · non-minimal
   ========================================================= */

:root {
  --ink:        #1f1f1f;
  --charcoal:   #3d3d3d;
  --smoke:      #5a5a5a;
  --steel:      #8a8a8a;
  --paper:      #f4eedb;
  --cream:      #faf6e8;
  --bone:       #ece4cb;
  --yellow:     #ffde66;
  --yellow-deep:#e6b800;
  --yellow-soft:#fff3b0;
  --coral:      #ff7a5c;
  --mint:       #6ee7c4;
  --lilac:      #c8b5ff;
  --sky:        #7cc4ff;

  --shadow-hard:    6px 6px 0 0 var(--ink);
  --shadow-hard-sm: 3px 3px 0 0 var(--ink);

  --border:       3px solid var(--ink);
  --border-thin:  2px solid var(--ink);

  --font-ui:      "Bricolage Grotesque", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.55;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(31,31,31,0.07) 1px, transparent 0);
  background-size: 22px 22px;
}
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; }

/* =========================================================
   HEADER · TWO ROWS  (chips always full-width below row 1)
   ========================================================= */
.header {
  position: sticky; top: 0; z-index: 50;
  background: var(--cream);
  border-bottom: var(--border);
}
.header__row1 {
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-rows: auto auto;
  align-items: stretch;
  border-bottom: var(--border);
}
.brand    { grid-column: 1; grid-row: 1; }
.lang     { grid-column: 2; grid-row: 1; }
.cta-top  { grid-column: 3; grid-row: 1; }
.header__chips {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  align-items: stretch;
  background: var(--paper);
  border-top: 2px solid var(--ink);
  width: 100%;
  overflow: hidden;
}
.header__row2 {
  background: var(--ink);
  color: var(--cream);
  position: relative;
  display: flex;
  align-items: stretch;
}
.brand {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 24px;
  background: var(--yellow);
  border-right: var(--border);
  text-decoration: none;
  color: var(--ink);
}
.brand__mark {
  width: 52px; height: 52px;
  background: var(--ink); color: var(--yellow);
  border: 3px solid var(--ink);
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-weight: 800; font-size: 13px;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}
.brand__text { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.brand__name { font-weight: 800; font-size: 1.5em; letter-spacing: -0.01em; }
.brand__role {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--charcoal);
  margin-top: 4px;
}

.header__chips {
  /* nested grid item — flex defined above; this only carries the variant tokens */
}
.hchip {
  display: flex; align-items: center; gap: 10px;
  flex: 1 1 0;
  min-width: 0;
  justify-content: center;
  padding: 12px 18px;
  font-family: var(--font-mono);
  font-size: 11.5px; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink);
  border-right: 2px solid var(--ink);
  white-space: nowrap;
  background: var(--paper);
}
.hchip span:not(.hchip__icon):not(.hchip__dot) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.hchip:last-child { border-right: none; }
.hchip--mint  { background: var(--mint); }
.hchip--coral { background: var(--coral); }
.hchip__dot {
  width: 11px; height: 11px; border-radius: 50%;
  background: #2ecc71;
  border: 2px solid var(--ink);
  flex-shrink: 0;
  position: relative;
}
.hchip__dot::after {
  content: "";
  position: absolute; inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(46, 204, 113, 0.55);
  animation: hchipPulse 2.4s ease-out infinite;
}
@keyframes hchipPulse {
  0% { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(1.4); opacity: 0; }
}
.hchip__icon {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  background: var(--ink); color: var(--yellow);
  border-radius: 50%;
  font-size: 12px;
  flex-shrink: 0;
}
.hchip--mint .hchip__icon,
.hchip--coral .hchip__icon { background: var(--ink); color: var(--yellow); }
.hchip__icon svg { width: 13px; height: 13px; }

.lang {
  display: flex; align-items: stretch;
  background: var(--paper);
}
.lang button {
  padding: 0 16px;
  background: transparent;
  border: none;
  border-right: 2px solid var(--ink);
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--ink);
  cursor: pointer;
  display: flex; align-items: center;
  transition: background 0.12s, color 0.12s;
}
.lang button:last-child { border-right: none; }
.lang button.is-on {
  background: var(--ink);
  color: var(--yellow);
  box-shadow: inset 0 -4px 0 var(--yellow);
}
.lang button:hover:not(.is-on) { background: var(--yellow-soft); }

.cta-top {
  display: flex; align-items: center; gap: 10px;
  padding: 0 24px;
  background: var(--ink); color: var(--yellow);
  font-family: var(--font-mono);
  font-weight: 800; font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none;
}
.cta-top:hover { background: var(--charcoal); }
.cta-top .arrow {
  width: 20px; height: 20px;
  border: 2px solid var(--yellow);
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px;
}

/* Nav bottom row — full-width */
.nav {
  display: flex;
  flex: 1;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.nav::-webkit-scrollbar { display: none; }
.nav a {
  flex: 1;
  justify-content: center;
  display: flex; align-items: center; gap: 10px;
  padding: 14px 24px;
  text-decoration: none;
  font-weight: 700; font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--cream);
  border-right: 1.5px solid #333;
  white-space: nowrap;
  transition: background 0.1s, color 0.1s;
}
.nav a:first-child { border-left: 1.5px solid #333; }
.nav a .num {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700;
  background: var(--yellow); color: var(--ink);
  padding: 2px 6px;
  letter-spacing: 0.06em;
}
.nav a:hover { background: var(--charcoal); color: var(--yellow); }
.nav a.is-active {
  background: var(--yellow); color: var(--ink);
  box-shadow: inset 0 -4px 0 var(--coral);
}
.nav a.is-active .num { background: var(--ink); color: var(--yellow); }

/* Hamburger button — hidden on desktop, shown on mobile via responsive */
.nav-burger {
  display: none;
  align-items: center;
  gap: 14px;
  background: var(--ink);
  color: var(--yellow);
  border: none;
  border-right: 2px solid var(--charcoal);
  padding: 14px 22px;
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  width: 100%;
  text-align: left;
}
.nav-burger__bars {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 24px;
  height: 18px;
  flex-shrink: 0;
}
.nav-burger__bars span {
  display: block;
  width: 100%;
  height: 2.5px;
  background: var(--yellow);
  transition: transform 0.22s ease, opacity 0.18s ease;
  transform-origin: center;
}
.nav-burger.is-open .nav-burger__bars span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.nav-burger.is-open .nav-burger__bars span:nth-child(2) { opacity: 0; }
.nav-burger.is-open .nav-burger__bars span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}
.nav-burger__label {
  letter-spacing: 0.14em;
  flex-shrink: 0;
}
.nav-burger__current {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bone);
  background: var(--charcoal);
  padding: 4px 10px;
  border: 2px solid var(--yellow);
  white-space: nowrap;
}

/* Scrim shown behind the dropdown nav on mobile */
.nav__scrim {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(31, 31, 31, 0.55);
  z-index: 40;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.nav__scrim.is-open {
  display: block;
  opacity: 1;
}

/* =========================================================
   PAGE WRAP & SECTION SCAFFOLD
   ========================================================= */
.wrap {
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 32px;
}
.section { padding: 72px 0; }
.section--cream { background: var(--cream); border-top: var(--border); border-bottom: var(--border); }
.section--ink {
  background: var(--ink); color: var(--cream);
  border-top: var(--border); border-bottom: var(--border);
}
.section--ink .sec-head__title { color: var(--yellow); }
.section--ink .sec-head__meta { color: var(--bone); }
.section--ink .sec-head__num { background: var(--yellow); color: var(--ink); }

.sec-head {
  display: flex; align-items: center; gap: 18px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.sec-head__num {
  font-family: var(--font-mono);
  font-weight: 800; font-size: 14px;
  background: var(--ink); color: var(--yellow);
  padding: 8px 12px;
  border: 3px solid var(--ink);
  letter-spacing: 0.06em;
}
.sec-head__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(34px, 4.2vw, 52px);
  line-height: 1;
  letter-spacing: -0.02em;
}
.sec-head__meta {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--smoke);
  margin-left: auto;
  display: flex; align-items: center; gap: 12px;
}
.sec-head__meta .dash {
  width: 36px; height: 3px; background: var(--ink); display: inline-block;
}
.section--ink .sec-head__meta .dash { background: var(--yellow); }

/* =========================================================
   PAGE HERO (inner pages) — ~50vh, two-column with photo box
   ========================================================= */
.page-hero {
  min-height: 50vh;
  border-bottom: var(--border);
  background: var(--cream);
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  align-items: stretch;
  position: relative;
}
.page-hero--yellow { background: var(--yellow); }
.page-hero--ink {
  background: var(--ink); color: var(--cream);
}
.page-hero--ink .page-hero__eyebrow { color: var(--yellow); }
.page-hero--ink .page-hero__eyebrow::before { background: var(--yellow); }
.page-hero--ink .page-hero__title { color: var(--cream); }
.page-hero--ink .page-hero__title em { color: var(--yellow); }
.page-hero--ink .page-hero__sub { color: var(--bone); }
.page-hero__text {
  padding: 56px 36px 56px 32px;
  display: flex; flex-direction: column;
  justify-content: center;
  position: relative;
  max-width: 820px;
  margin-left: auto;
  width: 100%;
}
.page-hero__eyebrow {
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--charcoal);
  margin-bottom: 18px;
  display: flex; align-items: center; gap: 12px;
}
.page-hero__eyebrow::before {
  content: ""; width: 28px; height: 3px; background: var(--ink);
}
.page-hero__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(42px, 6vw, 78px);
  line-height: 0.96;
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--ink);
}
.page-hero__title em {
  font-style: normal;
  border-bottom: 7px solid var(--coral);
  padding-bottom: 1px;
}
.page-hero__sub {
  font-size: 16.5px; line-height: 1.6;
  max-width: 60ch;
  margin: 22px 0 0;
  color: var(--charcoal);
}

/* Photo box on the right of page-hero */
.page-hero__img-box {
  background: var(--charcoal);
  border-left: var(--border);
  position: relative;
  overflow: hidden;
  min-height: 360px;
}
.page-hero--yellow .page-hero__img-box { background: var(--ink); }
.page-hero__img-box::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(45deg, transparent 0 18px, rgba(255,222,102,0.05) 18px 19px);
  pointer-events: none;
  z-index: 1;
}
.page-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  padding: 36px 36px 0;
  box-sizing: border-box;
  z-index: 2;
  opacity: 0;
  animation: pageHeroImgIn 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.15s forwards;
  transform-origin: bottom center;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
              filter 0.35s ease;
  will-change: transform, filter;
}
/* Projects: image fills box width, anchored bottom, never cropped */
.page-hero__img-box--full .page-hero__img {
  padding: 0;
  object-fit: contain;
  object-position: bottom center;
}
@keyframes pageHeroImgIn {
  0%   { opacity: 0; transform: translateY(22px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.page-hero__img-box:hover .page-hero__img {
  transform: scale(1.04) translateY(-4px);
  filter: drop-shadow(0 -8px 0 rgba(255, 222, 102, 0.35));
}

/* Floating accent dots inside the photo box that drift on hover */
.page-hero__img-box::after {
  content: "";
  position: absolute;
  top: 16%; left: 12%;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--yellow);
  border: 2px solid var(--ink);
  z-index: 2;
  opacity: 0;
  animation: pageHeroDotIn 0.7s ease-out 0.5s forwards;
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@keyframes pageHeroDotIn { to { opacity: 1; } }
.page-hero__img-box:hover::after { transform: translate(12px, 10px); }

/* Tag/label badges also animate in */
.page-hero__img-tag {
  opacity: 0;
  animation: pageHeroTagIn 0.6s ease-out 0.5s forwards;
}
.page-hero__img-num {
  opacity: 0;
  animation: pageHeroTagIn 0.6s ease-out 0.7s forwards;
}
@keyframes pageHeroTagIn {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}
.page-hero__img-num {
  transition: color 0.4s ease;
}
.page-hero__img-box:hover .page-hero__img-num {
  color: rgba(255, 222, 102, 0.3);
}

/* subtle striped overlay shimmer on hover */
.page-hero__img-box::before {
  transition: background-position 0.6s ease;
  background-size: 100% 100%;
}
.page-hero__img-box:hover::before {
  background-position: 16px 16px;
}

/* Home portrait gets the same hover treatment */
.portrait { overflow: hidden; cursor: default; }
.portrait__img {
  opacity: 0;
  animation: pageHeroImgIn 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.15s forwards;
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
              filter 0.45s ease;
}
.portrait:hover .portrait__img {
  transform: scale(1.04) translateY(-4px);
  filter: drop-shadow(0 -8px 0 rgba(255, 222, 102, 0.35));
}
.page-hero__img-tag {
  position: absolute;
  top: 18px; left: 18px;
  z-index: 3;
  background: var(--yellow); color: var(--ink);
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 10px;
  border: 2px solid var(--ink);
}
.page-hero__img-num {
  position: absolute;
  top: 18px; right: 22px;
  z-index: 3;
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: clamp(64px, 10vw, 140px);
  line-height: 0.9;
  color: rgba(255, 222, 102, 0.15);
  -webkit-text-stroke: 2px rgba(255, 222, 102, 0.4);
  letter-spacing: -0.05em;
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 22px;
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--ink); color: var(--yellow);
  border: 3px solid var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.08s, box-shadow 0.08s;
}
.btn:hover { transform: translate(-2px,-2px); box-shadow: 7px 7px 0 var(--ink); background: var(--yellow-soft); color: var(--ink) }
.btn:hover .arrow { transform: rotate(-30deg); }

.btn:active { transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--ink); }
.btn--ghost {
  background: var(--cream); color: var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
}
.btn--ghost:hover { background: var(--ink); color: var(--mint);}
.btn--ghost:hover .arrow { transform: rotate(+90deg); }

.btn--yellow {
  background: var(--yellow); color: var(--ink);
}
.btn--yellow:hover { background: var(--paper); }
.btn .arrow {
  width: 20px; height: 20px;
  border: 2.5px solid currentColor;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 11px;
  flex-shrink: 0;
}

.btn--yellow:hover .arrow { transform: rotate(-30deg); background: var(--mint); }

/* =========================================================
   HERO (index) — fills viewport below sticky header
   ========================================================= */
.hero {
  padding: 48px 0 56px;
  min-height: calc(100vh - 154px); /* viewport minus header */
  display: flex;
  align-items: center;
}
.hero > .wrap { width: 100%; }
.hero__grid {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 32px;
  align-items: stretch;
}
.hero__main {
  background: var(--yellow);
  border: var(--border);
  box-shadow: var(--shadow-hard);
  padding: 36px 36px 32px;
  display: flex; flex-direction: column;
}
.hero__eyebrow {
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--charcoal);
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 22px;
}
.hero__eyebrow::before {
  content: ""; width: 30px; height: 3px; background: var(--ink);
}
.hero__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(52px, 8vw, 116px);
  line-height: 0.88;
  letter-spacing: -0.04em;
  margin: 0 0 12px;
  color: var(--ink);
}
.hero__name .row { display: block; }
.hero__name .accent {
  display: inline-block;
  border-bottom: 8px solid var(--coral);
  padding-bottom: 2px;
}
.hero__role {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 14px;
  display: flex; flex-wrap: wrap; gap: 8px;
  align-items: center;
}
.hero__role .tag {
  background: var(--ink); color: var(--yellow);
  padding: 5px 11px;
  border: 2px solid var(--ink);
}
.hero__role .tag--coral { background: var(--coral); color: var(--ink); }
.hero__role .tag--mint  { background: var(--mint); color: var(--ink); }
.hero__role .kicker { color: var(--ink); margin-right: 4px; }
.hero__lead {
  margin-top: 28px;
  font-size: 17px;
  line-height: 1.6;
  max-width: 58ch;
  color: var(--ink);
}
.hero__ctas {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-top: 28px;
}

.hero__side {
  display: grid;
  grid-template-rows: 1.5fr auto;
  gap: 22px;
  min-width: 0;
}
.portrait {
  background: var(--charcoal);
  border: var(--border);
  box-shadow: var(--shadow-hard);
  position: relative;
  overflow: hidden;
  min-height: 340px;
}
.portrait__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  padding: 24px 24px 0;
  box-sizing: border-box;
}
.statgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.stat {
  background: var(--cream);
  border: var(--border);
  box-shadow: var(--shadow-hard-sm);
  padding: 18px;
}
.stat--ink { background: var(--ink); color: var(--cream); }
.stat--coral { background: var(--coral); color: var(--ink); }
.stat--mint  { background: var(--mint); color: var(--ink); }
.stat__num {
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: clamp(30px, 3.5vw, 40px);
  line-height: 1;
  letter-spacing: -0.02em;
}
.stat__lbl {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--smoke);
  margin-top: 8px;
}
.stat--ink .stat__lbl { color: var(--bone); }
.stat--coral .stat__lbl,
.stat--mint .stat__lbl { color: var(--charcoal); }

/* =========================================================
   PAGE CARDS (home preview)
   ========================================================= */
.pagecards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.pagecard {
  background: var(--cream);
  border: var(--border);
  box-shadow: var(--shadow-hard);
  padding: 28px 26px 26px;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.12s, box-shadow 0.12s;
  min-height: 280px;
}
.pagecard:hover {
  transform: translate(-2px,-2px);
  box-shadow: 8px 8px 0 var(--ink);
  background: var(--yellow-soft);
}
.pagecard__num {
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 40px;
  line-height: 1;
  color: var(--yellow-deep);
  -webkit-text-stroke: 1.5px var(--ink);
  letter-spacing: -0.02em;
}
.pagecard__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0;
}
.pagecard__desc {
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0;
  color: var(--charcoal);
}
.pagecard__more {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink);
  display: flex; align-items: center; gap: 10px;
  padding-top: 12px;
  border-top: 2px dashed var(--ink);
}
.pagecard__more .arrow {
  width: 28px; height: 28px;
  border: 2.5px solid var(--ink);
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--yellow);
  font-weight: 800;
  transition: transform 0.1s, background 0.1s;
}
.pagecard:hover .pagecard__more .arrow { transform: rotate(-30deg); background: var(--coral); }

/* highlights variants */
.pagecard--yellow { background: var(--yellow); }
.pagecard--ink { background: var(--ink); color: var(--cream); }
.pagecard--ink .pagecard__desc { color: var(--bone); }
.pagecard--ink .pagecard__more { color: var(--yellow); border-top-color: var(--yellow); }
.pagecard--ink .pagecard__more .arrow { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
.pagecard--ink .pagecard__num { color: var(--yellow); -webkit-text-stroke: 0; }

/* =========================================================
   ABOUT PAGE
   ========================================================= */
.about__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 32px;
  align-items: stretch;
}
.about__lead {
  grid-column: 1 / -1;
  background: var(--cream);
  border: var(--border);
  box-shadow: var(--shadow-hard);
  padding: 28px 36px;
}
.about__lead .lead-quote {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 23px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0;
  padding-left: 20px;
  border-left: 6px solid var(--coral);
  color: var(--ink);
}
.about__card {
  background: var(--cream);
  border: var(--border);
  box-shadow: var(--shadow-hard);
  padding: 36px;
}
.about__card h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 28px;
  margin: 0 0 16px;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.about__card p {
  font-size: 16px;
  line-height: 1.65;
  margin: 0 0 16px;
  color: var(--ink);
}
.about__card p:last-child { margin-bottom: 0; }
.about__card .lead-quote {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 22px;
  padding-left: 18px;
  border-left: 6px solid var(--coral);
  color: var(--ink);
}
.about__sidekit {
  display: grid;
  gap: 22px;
  align-content: start;
}
.kit-card {
  background: var(--yellow);
  border: var(--border);
  box-shadow: var(--shadow-hard);
  padding: 26px;
}
.kit-card--ink {
  background: var(--ink); color: var(--cream);
}
.kit-card__lbl {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 16px;
  display: flex; align-items: center; gap: 10px;
}
.kit-card__lbl::before {
  content: ""; width: 22px; height: 3px; background: currentColor;
}
.kit-card--ink .kit-card__lbl { color: var(--yellow); }
.kit-card ul {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 10px;
}
.kit-card li {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  align-items: center;
  gap: 12px;
  font-size: 14.5px;
  font-weight: 600;
  border-bottom: 1.5px dashed rgba(31,31,31,0.25);
  padding-bottom: 10px;
}
.kit-card--ink li { border-bottom-color: rgba(250,246,232,0.18); color: var(--cream); }
.kit-card li:last-child { border-bottom: none; padding-bottom: 0; }
.kit-card li .num {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  background: var(--ink); color: var(--yellow);
  padding: 2px 6px;
  letter-spacing: 0.04em;
}
.kit-card--ink li .num { background: var(--yellow); color: var(--ink); }
.kit-card li .meta {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  color: var(--smoke);
  letter-spacing: 0.04em;
}
.kit-card--ink li .meta { color: var(--bone); }

/* =========================================================
   EDUCATION CARDS
   ========================================================= */
.edu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.edu {
  background: var(--cream);
  border: var(--border);
  box-shadow: var(--shadow-hard);
  padding: 28px;
}
.edu--yellow { background: var(--yellow); }
.edu__period {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--ink); color: var(--yellow);
  padding: 6px 10px;
  display: inline-block;
  margin-bottom: 18px;
}
.edu__deg {
  font-family: var(--font-display);
  font-weight: 800; font-size: 24px;
  line-height: 1.15; letter-spacing: -0.01em;
  margin: 0 0 8px;
  color: var(--ink);
}
.edu__inst {
  font-family: var(--font-mono);
  font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--charcoal);
  margin-bottom: 18px;
}
.edu__points {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 10px;
}
.edu__points li {
  display: inline;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink);
}
.edu__points li::before {
  content: "★"; padding-right: 0.4em;
  font-family: var(--font-mono);
  font-weight: 800;
  color: var(--coral);
  line-height: 1.55;
}
.edu__points li strong {
  background: var(--ink); color: var(--yellow);
  padding: 2px 6px;
  font-weight: 700;
}
.edu--yellow .edu__points li::before { color: var(--ink); }

/* =========================================================
   EXPERIENCE TIMELINE
   ========================================================= */
.xp-list {
  display: grid;
  gap: 24px;
}
.xp {
  background: var(--cream);
  border: var(--border);
  box-shadow: var(--shadow-hard);
  display: grid;
  grid-template-columns: 220px 1fr;
}
.xp__rail {
  background: var(--ink); color: var(--yellow);
  padding: 26px 22px;
  border-right: var(--border);
  display: flex; flex-direction: column;
  gap: 12px;
}
.xp__period {
  font-family: var(--font-mono);
  font-size: 13px; font-weight: 800;
  letter-spacing: 0.08em;
  background: var(--yellow); color: var(--ink);
  padding: 6px 10px;
  align-self: flex-start;
}
.xp__role-tag {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--yellow);
}
.xp__loc {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--bone);
  margin-top: auto;
}
.xp__body { padding: 28px 30px; }
.xp__title {
  font-family: var(--font-display);
  font-weight: 800; font-size: 28px;
  line-height: 1.1; margin: 0 0 8px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.xp__sub {
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--smoke);
  margin-bottom: 18px;
}
.xp__intro {
  font-size: 15.5px; line-height: 1.6;
  margin: 0 0 18px;
  color: var(--ink);
}
.xp__metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 0 0 22px;
  padding: 18px;
  background: var(--paper);
  border: 2px solid var(--ink);
}
.xp__metric-num {
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 32px; line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.xp__metric-lbl {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--smoke);
  margin-top: 6px;
}
.xp__bullets {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 10px;
}
.xp__bullets li {
  display: inline;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink);
}
.xp__bullets li::before {
  content: "→"; padding-right: 0.4em;
  font-size: 1.4em;
  font-family: var(--font-mono);
  font-weight: 800;
  color: var(--coral);
  line-height: 1.55;
}
.xp__bullets li strong {
  background: var(--yellow);
  padding: 2px 6px;
  font-weight: 700;
}
.xp__tags {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 18px;
}
.xp__tags span {
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 2px solid var(--ink);
  padding: 4px 10px;
  background: var(--paper);
  color: var(--ink);
}

/* DORK featured */
.xp--featured { background: var(--yellow); }
.xp--featured .xp__rail {
  background: var(--coral); color: var(--ink);
}
.xp--featured .xp__period { background: var(--ink); color: var(--yellow); }
.xp--featured .xp__role-tag { color: var(--ink); }
.xp--featured .xp__loc { color: var(--ink); }
.xp--featured .xp__metrics { background: var(--cream); }

/* =========================================================
   PROJECTS
   ========================================================= */
.projects {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}
.proj {
  background: var(--cream);
  border: var(--border);
  box-shadow: var(--shadow-hard);
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  overflow: hidden;
  transition: transform 0.12s, box-shadow 0.12s;
  text-decoration: none;
  color: var(--ink);
}
.proj:hover { transform: translate(-2px,-2px); box-shadow: 8px 8px 0 var(--ink); }
.proj--w6 { grid-column: span 6; }
.proj--w4 { grid-column: span 4; }
.proj--w8 { grid-column: span 8; }
.proj--w12 { grid-column: span 12; }
.proj__bar {
  background: var(--ink); color: var(--yellow);
  padding: 10px 18px;
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.proj__bar .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--coral); }
.proj__bar .spacer { flex: 1; }
.proj__bar .pill {
  background: var(--yellow); color: var(--ink);
  padding: 2px 7px;
  font-size: 10px;
}
.proj__hero {
  padding: 32px 28px 24px;
  background: var(--paper);
  border-bottom: 2px dashed var(--ink);
}
.proj__hero--yellow { background: var(--yellow); }
.proj__hero--coral  { background: var(--coral); color: var(--ink); }
.proj__hero--mint   { background: var(--mint); color: var(--ink); }
.proj__hero--lilac  { background: var(--lilac); color: var(--ink); }
.proj__hero--ink    { background: var(--ink); color: var(--cream); }
.proj__year {
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--ink); color: var(--yellow);
  padding: 4px 10px;
  display: inline-block;
  margin-bottom: 18px;
}
.proj__hero--ink .proj__year { background: var(--yellow); color: var(--ink); }
.proj__title {
  font-family: var(--font-display);
  font-weight: 800; font-size: 32px;
  line-height: 1.0; letter-spacing: -0.02em;
  margin: 0 0 12px;
}
.proj__tagline {
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.08em;
  margin: 0;
}
.proj__body { padding: 22px 28px; }
.proj__desc {
  font-size: 15px; line-height: 1.6;
  margin: 0 0 14px;
  color: var(--ink);
}
.proj__tags {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px;
}
.proj__tags span {
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  border: 2px solid var(--ink);
  padding: 3px 9px;
  background: var(--paper);
  color: var(--ink);
}
.proj__foot {
  padding: 14px 28px;
  border-top: 2px dashed var(--ink);
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--paper);
  color: var(--ink);
}
.proj__foot .arrow {
  width: 32px; height: 32px;
  border: 2.5px solid var(--ink);
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--yellow);
  font-weight: 800;
}

/* =========================================================
   CERTIFICATIONS
   ========================================================= */
.certs-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 32px;
}
.certs-meta__cell {
  background: var(--yellow);
  border: var(--border);
  box-shadow: var(--shadow-hard-sm);
  padding: 22px;
}
.certs-meta__cell:nth-child(2) { background: var(--coral); }
.certs-meta__cell:nth-child(3) { background: var(--mint); }
.certs-meta__cell:nth-child(4) { background: var(--cream); }
.certs-meta__num {
  font-family: var(--font-mono);
  font-weight: 800; font-size: 48px;
  line-height: 1; letter-spacing: -0.02em;
  color: var(--ink);
}
.certs-meta__lbl {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--charcoal);
  margin-top: 8px;
}
.cert-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.cert {
  background: var(--cream);
  border: var(--border);
  box-shadow: var(--shadow-hard-sm);
  padding: 18px 22px;
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 18px;
  align-items: center;
}
.cert__mark {
  width: 60px; height: 60px;
  background: var(--ink); color: var(--yellow);
  border: 2.5px solid var(--ink);
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-weight: 800; font-size: 13px;
  letter-spacing: 0.04em;
  line-height: 1.1;
  text-align: center;
}
.cert__mark--mint { background: var(--mint); color: var(--ink); }
.cert__mark--coral { background: var(--coral); color: var(--ink); }
.cert__mark--lilac { background: var(--lilac); color: var(--ink); }
.cert__mark--yellow { background: var(--yellow); color: var(--ink); }
.cert__title {
  font-family: var(--font-display);
  font-weight: 800; font-size: 17px;
  line-height: 1.2; letter-spacing: -0.005em;
  margin: 0 0 5px;
  color: var(--ink);
}
.cert__inst {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--smoke);
}
.cert__year {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.06em;
  background: var(--yellow); color: var(--ink);
  border: 2px solid var(--ink);
  padding: 5px 10px;
}

/* =========================================================
   SKILLS
   ========================================================= */
.skills {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.skill {
  background: var(--cream);
  border: var(--border);
  box-shadow: var(--shadow-hard);
  padding: 26px;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 16px;
}
.skill--yellow { background: var(--yellow); }
.skill--coral { background: var(--coral); color: var(--ink); }
.skill--mint  { background: var(--mint); color: var(--ink); }
.skill--ink {
  background: var(--ink); color: var(--cream);
}
.skill--ink .skill__num { color: var(--yellow); }
.skill--ink .skill__title { color: var(--cream); }
.skill--lilac { background: var(--lilac); color: var(--ink); }
.skill__head {
  display: flex; align-items: center; gap: 14px;
}
.skill__num {
  font-family: var(--font-mono);
  font-weight: 800; font-size: 40px;
  line-height: 1; letter-spacing: -0.04em;
  color: var(--ink);
}
.skill__lbl {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.skill__title {
  font-family: var(--font-display);
  font-weight: 800; font-size: 24px;
  line-height: 1.1; letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
}
.skill__chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  align-content: flex-start;
}
.skill__chips span {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.04em;
  background: var(--paper);
  border: 2px solid var(--ink);
  padding: 4px 8px;
  color: var(--ink);
}
.skill--ink .skill__chips span {
  background: var(--charcoal); color: var(--cream); border-color: var(--yellow);
}

/* =========================================================
   LANGUAGES
   ========================================================= */
.lang-list {
  background: var(--cream);
  border: var(--border);
  box-shadow: var(--shadow-hard);
  padding: 30px 32px;
  display: grid;
  gap: 22px;
}
.lang-row {
  display: grid;
  grid-template-columns: 220px 1fr 150px;
  align-items: center;
  gap: 20px;
}
.lang-row__name {
  font-family: var(--font-display);
  font-weight: 800; font-size: 19px;
  letter-spacing: -0.01em;
  display: flex; align-items: center; gap: 12px;
  color: var(--ink);
}
.lang-row__tag {
  font-family: var(--font-mono);
  font-size: 9.5px; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--yellow); color: var(--ink);
  border: 2px solid var(--ink);
  padding: 3px 7px;
}
.lang-row__tag--coral { background: var(--coral); }
.lang-row__tag--mint  { background: var(--mint); }
.lang-row__bar {
  position: relative;
  height: 20px;
  background: var(--paper);
  border: 2px solid var(--ink);
  overflow: hidden;
}
.lang-row__fill {
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform-origin: left;
}
.lang-row__level {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--smoke);
  text-align: right;
}

/* =========================================================
   CONTACT
   ========================================================= */
.contact-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  align-items: stretch;
}
.contact-main {
  background: var(--yellow);
  border: var(--border);
  box-shadow: var(--shadow-hard);
  padding: 44px;
}
.contact-main h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(38px, 5vw, 60px);
  line-height: 0.98;
  margin: 0 0 22px;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.contact-main p {
  font-size: 16.5px;
  line-height: 1.6;
  max-width: 52ch;
  margin: 0 0 28px;
  color: var(--ink);
}
.contact-main .ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.contact-info {
  display: grid; gap: 18px;
  align-content: start;
}
.info-card {
  background: var(--cream);
  border: var(--border);
  box-shadow: var(--shadow-hard-sm);
  padding: 22px;
}
.info-card--ink { background: var(--ink); color: var(--cream); }
.info-card__lbl {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--smoke);
  margin-bottom: 10px;
}
.info-card--ink .info-card__lbl { color: var(--yellow); }
.info-card__val {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink);
}
.info-card--ink .info-card__val { color: var(--cream); }
.info-card a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* =========================================================
   AVAILABILITY RIBBON (reusable accent block)
   ========================================================= */
.ribbon {
  background: var(--mint);
  border-top: var(--border);
  border-bottom: var(--border);
  padding: 26px 32px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
}
.ribbon__icon {
  width: 60px; height: 60px;
  background: var(--ink); color: var(--mint);
  border: 3px solid var(--ink);
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 24px;
}
.ribbon__text {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.ribbon__text small {
  display: block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 6px;
  color: var(--charcoal);
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer {
  background: var(--ink); color: var(--cream);
  border-top: var(--border);
  padding: 48px 0 36px;
}
.footer__inner {
  max-width: 1480px; margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 36px;
  align-items: start;
}
.footer__brand {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(24px, 2.8vw, 34px);
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--yellow);
}
.footer__role {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  margin-top: 8px;
  color: var(--bone);
}
.footer__about {
  margin: 18px 0 0;
  max-width: 36ch;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--bone);
  font-weight: 500;
}
.footer__col h4 {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--yellow);
  margin: 0 0 14px;
}
.footer__col ul {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 8px;
}
.footer__col a {
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  color: var(--cream);
  display: inline-flex; align-items: center; gap: 6px;
}
.footer__col a:hover { color: var(--yellow); }
.footer__bottom {
  max-width: 1480px;
  margin: 32px auto 0;
  padding: 24px 32px 0;
  border-top: 1px solid var(--charcoal);
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--bone);
  flex-wrap: wrap;
  gap: 12px;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
/* =========================================================
   CERT MODAL — PDF VIEWER
   ========================================================= */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(31, 31, 31, 0.72);
  z-index: 200;
  display: none;
  align-items: stretch;
  justify-content: center;
  padding: 24px;
}
.modal.is-open { display: flex; }
.modal__dialog {
  background: var(--cream);
  border: var(--border);
  box-shadow: 8px 8px 0 var(--ink);
  width: min(1180px, 100%);
  max-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
}
.modal__head {
  background: var(--ink); color: var(--yellow);
  padding: 16px 22px;
  border-bottom: var(--border);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
}
.modal__title {
  font-family: var(--font-display);
  font-weight: 800; font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--yellow);
}
.modal__issuer {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--bone);
  margin-top: 4px;
}
.modal__close {
  width: 40px; height: 40px;
  background: var(--coral); color: var(--ink);
  border: 2.5px solid var(--ink);
  font-family: var(--font-mono);
  font-weight: 800; font-size: 18px;
  cursor: pointer;
  display: grid; place-items: center;
}
.modal__close:hover { background: var(--yellow); }
.modal__body {
  background: var(--paper);
  overflow: auto;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 0;
  min-height: 320px;
}
.modal__body iframe {
  width: 100%;
  height: 100%;
  min-height: 64vh;
  border: none;
  background: white;
}
.modal__body img {
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
  margin: auto;
}
.modal__foot {
  background: var(--cream);
  border-top: var(--border);
  padding: 14px 22px;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.modal__meta {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--smoke);
  margin-right: auto;
}

/* Cert group sections */
.cert-group {
  margin-bottom: 48px;
}
.cert-group__head {
  display: flex; align-items: baseline; gap: 18px;
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 3px solid var(--ink);
  flex-wrap: wrap;
}
.cert-group__num {
  font-family: var(--font-mono);
  font-weight: 800; font-size: 22px;
  background: var(--ink); color: var(--yellow);
  padding: 6px 12px;
  letter-spacing: 0.06em;
}
.cert-group__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--ink);
}
.cert-group__count {
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--smoke);
  margin-left: auto;
}
.cert-group__intro {
  font-size: 15px; line-height: 1.6;
  margin: 0 0 22px;
  max-width: 80ch;
  color: var(--charcoal);
}

/* Cert card variant (clickable for modal) */
.cert.is-clickable { cursor: pointer; }
.cert.is-clickable:hover {
  background: var(--yellow-soft);
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--ink);
}
.cert__verify {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--ink); color: var(--yellow);
  padding: 4px 8px;
  text-decoration: none;
  display: inline-block;
}
.cert__verify:hover { background: var(--coral); color: var(--ink); }

/* Spec accordion: child courses grouped under their spec */
.spec-group {
  background: var(--paper);
  border: var(--border);
  box-shadow: var(--shadow-hard-sm);
  margin-bottom: 18px;
  overflow: hidden;
}
.spec-group__head {
  background: var(--ink); color: var(--cream);
  padding: 14px 22px;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 16px;
  align-items: center;
}
.spec-group__mark {
  width: 44px; height: 44px;
  background: var(--yellow); color: var(--ink);
  border: 2.5px solid var(--cream);
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-weight: 800; font-size: 11px;
}
.spec-group__title {
  font-family: var(--font-display);
  font-weight: 800; font-size: 18px;
  line-height: 1.2;
  margin: 0;
  color: var(--yellow);
}
.spec-group__sub {
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--bone);
  margin-top: 3px;
}
.spec-group__count {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 800;
  background: var(--yellow); color: var(--ink);
  padding: 4px 9px;
  letter-spacing: 0.06em;
}
.spec-group__items {
  padding: 14px;
  display: grid;
  gap: 10px;
}
.course-row {
  background: var(--cream);
  border: 2px solid var(--ink);
  padding: 12px 16px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 14px;
  align-items: center;
  cursor: pointer;
  transition: background 0.1s, transform 0.1s;
}
.course-row:hover {
  background: var(--yellow-soft);
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--ink);
}
.course-row__name {
  font-family: var(--font-display);
  font-weight: 700; font-size: 15px;
  line-height: 1.25;
  color: var(--ink);
}
.course-row__hrs {
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--smoke);
}
.course-row__btn {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--ink); color: var(--yellow);
  padding: 5px 9px;
  border: 2px solid var(--ink);
}
.course-row:hover .course-row__btn { background: var(--coral); color: var(--ink); }

/* =========================================================
   RESPONSIVE — mobile-first cascade
   Breakpoints: 1080 / 880 / 680 / 480
   ========================================================= */

/* ── 1080px: 2-col layouts collapse, page hero stacks ─── */
@media (max-width: 1080px) {
  .wrap { padding: 0 24px; }
  .footer__inner { padding: 0 24px; }
  .footer__bottom { padding-left: 24px; padding-right: 24px; }

  /* Home hero */
  .hero { min-height: auto; padding: 36px 0 48px; }
  .hero__grid { grid-template-columns: 1fr; }
  .hero__main { padding: 28px 24px 24px; }
  .hero__side { grid-template-rows: 320px auto; }
  .portrait { min-height: 320px; }

  /* About */
  .about__grid { grid-template-columns: 1fr; }
  .about__card { padding: 28px; }

  /* Contact */
  .contact-grid { grid-template-columns: 1fr; }
  .contact-main { padding: 32px 28px; }

  /* Home cards */
  .pagecards { grid-template-columns: 1fr 1fr; }

  /* Skills */
  .skills { grid-template-columns: repeat(2, 1fr); }

  /* Certs */
  .certs-meta { grid-template-columns: repeat(2, 1fr); }
  .cert-list { grid-template-columns: 1fr; }

  /* Education */
  .edu-grid { grid-template-columns: 1fr; }

  /* Experience */
  .xp__metrics { grid-template-columns: repeat(3, 1fr); }

  /* Projects: stack 2-up */
  .projects .proj--w6,
  .projects .proj--w4,
  .projects .proj--w8 { grid-column: span 12; }

  /* Footer */
  .footer__inner { grid-template-columns: 1fr 1fr; }
  .footer__brand-block { grid-column: 1 / -1; }

  /* Page hero stacks */
  .page-hero { grid-template-columns: 1fr; min-height: auto; }
  .page-hero__text { padding: 44px 24px; max-width: none; margin: 0; }
  .page-hero__img-box {
    min-height: 360px;
    border-left: none;
    border-top: var(--border);
  }
  .page-hero__title { font-size: clamp(36px, 7vw, 60px); }

  /* Lang row */
  .lang-row { grid-template-columns: 160px 1fr 110px; gap: 14px; }

  /* Spec head adjusts */
  .spec-group__head { grid-template-columns: auto 1fr auto; gap: 12px; padding: 12px 18px; }
  .spec-group__head .cert__verify { display: none; }
}

/* ── 880px: single-col grids, nav becomes scrollable strip ─── */
@media (max-width: 880px) {
  .wrap { padding: 0 20px; }
  .footer__inner { padding: 0 20px; }
  .footer__bottom { padding-left: 20px; padding-right: 20px; }

  /* Section padding */
  .section { padding: 52px 0; }
  .sec-head { gap: 12px; margin-bottom: 24px; }
  .sec-head__title { font-size: clamp(28px, 6vw, 40px); }
  .sec-head__meta { margin-left: 0; width: 100%; }

  /* Home cards 1-up */
  .pagecards { grid-template-columns: 1fr; gap: 16px; }
  .pagecard { padding: 24px 22px; min-height: 0; }
  .pagecard__title { font-size: 24px; }

  /* Skills 1-up */
  .skills { grid-template-columns: 1fr; gap: 16px; }
  .skill { padding: 22px; }
  .skill__title { font-size: 22px; }

  /* Stats grid stays 2x2 — already 1fr 1fr */

  /* Cert meta 1-up */
  .certs-meta { grid-template-columns: 1fr 1fr; gap: 12px; }
  .certs-meta__cell { padding: 16px; }
  .certs-meta__num { font-size: 36px; }
  .cert {
    grid-template-columns: 48px 1fr;
    gap: 14px;
    padding: 14px 16px;
  }
  .cert__year {
    grid-column: 2;
    justify-self: start;
    padding: 3px 7px;
  }
  .cert__mark { width: 48px; height: 48px; font-size: 11px; }
  .cert__title { font-size: 15px; }
  .cert__inst { font-size: 10px; }

  /* Cert group head wraps */
  .cert-group__head { flex-wrap: wrap; gap: 12px; }
  .cert-group__num { font-size: 18px; padding: 5px 10px; }
  .cert-group__title { font-size: 24px; }
  .cert-group__count {
    margin-left: 0;
    width: 100%;
    order: 4;
  }

  /* Course rows simplify */
  .course-row {
    grid-template-columns: 1fr auto;
    gap: 8px 12px;
    padding: 11px 14px;
  }
  .course-row__hrs { grid-column: 1 / -1; }
  .course-row__btn { grid-column: 2; grid-row: 1; }
  .course-row__name { font-size: 14px; }

  /* Spec group */
  .spec-group__head {
    grid-template-columns: 44px 1fr;
    gap: 12px;
    padding: 12px 16px;
  }
  .spec-group__count {
    grid-column: 2;
    justify-self: start;
  }
  .spec-group__items { padding: 10px; gap: 8px; }
  .spec-group__title { font-size: 17px; }

  /* Experience 1-col */
  .xp { grid-template-columns: 1fr; }
  .xp__rail {
    border-right: none;
    border-bottom: var(--border);
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    flex-wrap: wrap;
  }
  .xp__period { font-size: 12px; }
  .xp__role-tag { font-size: 11px; }
  .xp__loc { margin-top: 0; margin-left: auto; font-size: 11px; }
  .xp__body { padding: 22px 22px; }
  .xp__title { font-size: 24px; }
  .xp__metrics {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 14px;
  }
  .xp__metric-num { font-size: 26px; }

  /* Lang row */
  .lang-row {
    grid-template-columns: 1fr auto;
    gap: 8px 12px;
  }
  .lang-row__bar { grid-column: 1 / -1; }
  .lang-row__level { grid-column: 2; grid-row: 1; text-align: right; }
  .lang-row__name { font-size: 17px; flex-wrap: wrap; gap: 8px; }

  /* Page hero text */
  .page-hero__text { padding: 40px 20px; }
  .page-hero__title { font-size: clamp(32px, 8vw, 52px); }
  .page-hero__sub { font-size: 15px; }
  .page-hero__img-box { min-height: 320px; }
  .page-hero__img-num { font-size: clamp(56px, 14vw, 100px); }

  /* Footer 1-col */
  .footer__inner { grid-template-columns: 1fr; gap: 24px; }
  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  /* Project cards */
  .proj__hero { padding: 26px 22px 20px; }
  .proj__title { font-size: 26px; }
  .proj__body { padding: 18px 22px; }
  .proj__foot { padding: 12px 22px; }

  /* Hero name on home */
  .hero__name { font-size: clamp(56px, 13vw, 96px); }
  .hero__lead { font-size: 16px; }
  .hero__ctas { gap: 10px; }
  .btn { padding: 12px 18px; font-size: 12px; gap: 10px; }

  /* Contact main */
  .contact-main h2 { font-size: clamp(32px, 7vw, 48px); }
  .contact-main p { font-size: 15.5px; }

  /* Ribbon */
  .ribbon {
    grid-template-columns: 1fr;
    text-align: left;
    gap: 18px;
    padding: 22px 24px;
  }
  .ribbon__icon { width: 52px; height: 52px; font-size: 22px; }
  .ribbon .btn { width: fit-content; }

  /* Modal */
  .modal { padding: 12px; }
  .modal__dialog { box-shadow: 4px 4px 0 var(--ink); }
  .modal__head { padding: 14px 16px; grid-template-columns: 1fr auto; gap: 12px; }
  .modal__title { font-size: 16px; }
  .modal__issuer { font-size: 10px; }
  .modal__close { width: 36px; height: 36px; font-size: 16px; }
  .modal__body iframe { min-height: 56vh; }
  .modal__foot {
    padding: 12px 16px;
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 10px;
  }
  .modal__foot .btn { justify-content: center; width: 100%; padding: 12px; }
  .modal__meta { width: 100%; text-align: center; margin-right: 0; }
}

/* ── 680px: hamburger nav, header chips become icon-only, brand row stacks ─── */
@media (max-width: 680px) {
  /* Hamburger replaces nav row */
  .header__row2 { display: block; }
  .nav-burger { display: flex; }
  .nav {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--ink);
    border-bottom: var(--border);
    box-shadow: 0 12px 24px rgba(31,31,31,0.25);
    z-index: 60;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
  }
  .nav.is-open {
    display: flex;
    animation: navDrop 0.22s cubic-bezier(0.22,0.61,0.36,1);
  }
  @keyframes navDrop {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .nav a {
    padding: 16px 22px;
    border-right: none;
    border-left: none !important;
    border-bottom: 1px solid var(--charcoal);
    font-size: 15px;
    gap: 14px;
  }
  .nav a:last-child { border-bottom: none; }
  .nav a.is-active { box-shadow: inset 4px 0 0 var(--coral); }
  .nav a .num {
    font-size: 11px;
    padding: 3px 7px;
  }
  body.nav-open { overflow: hidden; }

  /* Header row1 layout for narrow */
  .header__row1 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
  }
  .brand {
    grid-column: 1 / -1;
    grid-row: 1;
    border-right: none;
    border-bottom: var(--border);
    padding: 14px 20px;
    gap: 12px;
  }
  .brand__mark { width: 44px; height: 44px; font-size: 12px; }
  .brand__name { font-size: 15px; }
  .brand__role { font-size: 9px; }

  .lang {
    grid-column: 1;
    grid-row: 2;
    border-right: var(--border);
    border-bottom: var(--border);
    justify-content: center;
    padding: 0;
  }
  .lang button { padding: 12px 12px; font-size: 11px; flex: 1; justify-content: center; }

  .cta-top {
    grid-column: 2;
    grid-row: 2;
    border-bottom: var(--border);
    padding: 12px 14px;
    justify-content: center;
    font-size: 11px;
    gap: 8px;
  }
  .cta-top .arrow { width: 18px; height: 18px; }

  .header__chips {
    grid-column: 1 / -1;
    grid-row: 3;
    border-top: none;
  }
  .hchip {
    padding: 10px 8px;
    font-size: 10px;
    gap: 6px;
    border-right: 2px solid var(--ink);
  }
  .hchip:last-child { border-right: none; }
  .hchip__icon { width: 18px; height: 18px; font-size: 10px; }
  .hchip__dot { width: 9px; height: 9px; }

  /* (nav padding handled by hamburger block above) */

  /* Hero on home */
  .hero { padding: 28px 0 40px; }
  .hero__main { padding: 24px 20px 22px; }
  .hero__name { font-size: clamp(48px, 14vw, 80px); }
  .hero__lead { font-size: 15.5px; }
  .hero__eyebrow { font-size: 11px; margin-bottom: 18px; }
  .hero__role { font-size: 11.5px; gap: 6px; }
  .hero__role .tag { padding: 4px 9px; }

  /* Stats grid 1-col on very narrow */
  .statgrid { gap: 10px; }
  .stat { padding: 14px; }
  .stat__num { font-size: 28px; }
  .stat__lbl { font-size: 9.5px; }

  /* Section + section header */
  .section { padding: 44px 0; }
  .sec-head__num { font-size: 12px; padding: 6px 9px; }
  .sec-head__title { font-size: clamp(24px, 7vw, 36px); }

  /* Page hero */
  .page-hero__text { padding: 32px 20px; }
  .page-hero__eyebrow { font-size: 11px; margin-bottom: 14px; }
  .page-hero__title { font-size: clamp(28px, 9vw, 44px); }
  .page-hero__sub { font-size: 14.5px; margin-top: 18px; }
  .page-hero__img-box { min-height: 280px; }
  .page-hero__img-tag { font-size: 9px; padding: 4px 8px; }

  /* About card */
  .about__card { padding: 24px 22px; }
  .about__lead { padding: 22px 22px; }
  .about__lead .lead-quote { font-size: 19px; padding-left: 14px; }
  .about__card p { font-size: 15px; }

  /* Kit cards */
  .kit-card { padding: 22px 20px; }
  .kit-card li { grid-template-columns: 22px 1fr auto; gap: 10px; font-size: 13.5px; }

  /* Education */
  .edu { padding: 22px 20px; }
  .edu__deg { font-size: 20px; }
  .edu__inst { font-size: 11.5px; }
  .edu__points li { font-size: 13.5px; }

  /* Projects */
  .proj__bar { padding: 8px 14px; font-size: 10px; }
  .proj__bar .pill { font-size: 9.5px; }
  .proj__hero { padding: 22px 18px 18px; }
  .proj__title { font-size: 22px; }
  .proj__year { font-size: 10px; }
  .proj__body { padding: 16px 18px; }
  .proj__foot { padding: 10px 18px; font-size: 10.5px; }
  .proj__desc { font-size: 14px; }

  /* Skills card chips */
  .skill__title { font-size: 20px; }
  .skill__num { font-size: 34px; }
  .skill__chips span { font-size: 10.5px; padding: 3px 7px; }

  /* Certs */
  .certs-meta { grid-template-columns: 1fr 1fr; }
  .certs-meta__num { font-size: 32px; }
  .cert { padding: 12px 14px; gap: 12px; grid-template-columns: 44px 1fr; }
  .cert__mark { width: 44px; height: 44px; font-size: 10px; }

  /* Buttons everywhere */
  .btn { padding: 11px 16px; font-size: 11.5px; }
  .btn .arrow { width: 18px; height: 18px; font-size: 10px; }

  /* Contact info cards */
  .info-card { padding: 18px; }
  .info-card__val { font-size: 14.5px; }

  /* Footer */
  .footer { padding: 36px 0 28px; }
  .footer__brand { font-size: 22px; }
  .footer__col h4 { margin-bottom: 10px; }
}

/* ── 480px: tiny phones ─────────────────────────────────── */
@media (max-width: 480px) {
  .wrap { padding: 0 16px; }
  .footer__inner { padding: 0 16px; }
  .footer__bottom { padding-left: 16px; padding-right: 16px; }

  .brand { padding: 12px 16px; gap: 10px; }
  .brand__name { font-size: 14px; }
  .brand__role { font-size: 8.5px; letter-spacing: 0.1em; }
  .brand__mark { width: 40px; height: 40px; font-size: 11px; }

  .lang button { padding: 11px 6px; font-size: 10.5px; }
  .cta-top { padding: 11px 10px; font-size: 10px; gap: 6px; }
  .cta-top .arrow { width: 16px; height: 16px; }

  .hchip { padding: 9px 4px; font-size: 9px; gap: 5px; }
  .hchip__icon { width: 16px; height: 16px; }
  .hchip__icon svg { width: 10px; height: 10px; }
  .hchip__dot { width: 8px; height: 8px; }
  .hchip__dot::after { display: none; }

  /* nav still in hamburger dropdown — sizes inherited from 680px block */

  .section { padding: 36px 0; }

  .hero__main { padding: 22px 18px 20px; }
  .hero__name { font-size: clamp(40px, 16vw, 68px); }
  .hero__lead { font-size: 15px; }

  .statgrid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .stat { padding: 12px; }
  .stat__num { font-size: 24px; }

  .pagecard { padding: 22px 18px; }
  .pagecard__num { font-size: 32px; }
  .pagecard__title { font-size: 22px; }
  .pagecard__desc { font-size: 13.5px; }

  .page-hero__text { padding: 28px 16px; }
  .page-hero__img-box { min-height: 240px; }

  .xp__rail { padding: 12px 16px; gap: 10px; }
  .xp__body { padding: 20px 18px; }
  .xp__title { font-size: 20px; }
  .xp__intro { font-size: 14.5px; }
  .xp__bullets li { font-size: 13.5px; }
  .xp__tags span { font-size: 9.5px; padding: 3px 7px; }
  .xp__metrics { padding: 12px; }

  .proj__hero { padding: 20px 16px 16px; }
  .proj__body { padding: 14px 16px; }
  .proj__foot { padding: 10px 16px; }
  .proj__title { font-size: 20px; }
  .proj__desc { font-size: 13.5px; }
  .proj__tags span { font-size: 9.5px; padding: 3px 7px; }

  .skill { padding: 20px 18px; }
  .skill__title { font-size: 19px; }

  .lang-list { padding: 22px 20px; }
  .lang-row__name { font-size: 16px; }
  .lang-row__tag { font-size: 8.5px; padding: 2px 5px; }

  .certs-meta__cell { padding: 14px; }
  .certs-meta__num { font-size: 28px; }
  .certs-meta__lbl { font-size: 9.5px; }

  .contact-main { padding: 26px 22px; }
  .contact-main h2 { font-size: clamp(28px, 9vw, 40px); }
  .info-card { padding: 16px; }

  .ribbon { padding: 20px 16px; }
  .ribbon__icon { width: 44px; height: 44px; font-size: 19px; }
  .ribbon__text { font-size: 17px; }
  .ribbon__text small { font-size: 10.5px; }

  .footer__brand { font-size: 19px; }
  .footer__role { font-size: 10px; }

  .modal { padding: 8px; }
  .modal__body iframe { min-height: 50vh; }

  .proj-group__head { flex-wrap: wrap; gap: 10px; }
  .proj-group__title { font-size: 17px; }
  .proj-group__intro { font-size: 13px; }

  .hero__currently-lbl { font-size: 8.5px; padding: 6px 10px; }
  .hero__currently-val { font-size: 11px; padding: 6px 10px; }
}

/* =========================================================
   PROJECT DEPTH — details/summary accordion
   ========================================================= */
.proj__depth {
  margin-top: 14px;
  border-top: 2px solid var(--ink);
  padding-top: 8px;
}
.proj__depth summary {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 6px 0;
  color: var(--charcoal);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}
.proj__depth summary::-webkit-details-marker { display: none; }
.proj__depth summary::before {
  content: "▶";
  font-size: 8px;
  transition: transform 0.18s ease;
  flex-shrink: 0;
}
.proj__depth[open] summary::before {
  transform: rotate(90deg);
}
.proj__depth p {
  font-size: 14px;
  line-height: 1.75;
  color: var(--charcoal);
  margin: 10px 0 0;
}
.proj__proves {
  margin-top: 10px !important;
  font-family: var(--font-mono);
  font-size: 10.5px !important;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--smoke) !important;
  line-height: 1.4 !important;
  border-left: 3px solid var(--yellow);
  padding-left: 10px;
}

/* =========================================================
   HERO CURRENTLY BLOCK
   ========================================================= */
.hero__currently {
  background: var(--ink);
  color: var(--cream);
  border: var(--border);
  margin-top: 16px;
  overflow: hidden;
}
.hero__currently-head {
  padding: 8px 14px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--yellow);
  border-bottom: 1.5px solid #2a2a2a;
  background: #141414;
}
.hero__currently-row {
  display: grid;
  grid-template-columns: 6rem 1fr;
  border-bottom: 1.5px solid #2a2a2a;
}
.hero__currently-row:last-child { border-bottom: none; }
.hero__currently-lbl {
  padding: 8px 10px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--steel);
  border-right: 1.5px solid #2a2a2a;
  display: flex;
  align-items: flex-start;
}
.hero__currently-val {
  padding: 8px 12px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--bone);
}

/* =========================================================
   PROJECT GROUP HEADERS & DIVIDERS
   ========================================================= */
.proj-group__head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
  padding-top: 8px;
}
.proj-group__tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--yellow);
  padding: 4px 12px;
  border: 2px solid var(--ink);
  flex-shrink: 0;
}
.proj-group__title {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0;
}
.proj-group__intro {
  font-size: 15px;
  line-height: 1.65;
  color: var(--charcoal);
  max-width: 84ch;
  margin: 0 0 28px;
}
.proj-group__divider {
  border: none;
  border-top: var(--border);
  margin: 48px 0 36px;
}

/* =========================================================
   PROJECTS — RICH MEDIA (carousels, podcasts, links, video)
   ========================================================= */

/* Live pill in the top bar (override .proj__bar .pill specificity) */
.proj__bar .pill--live {
  background: var(--mint);
  color: var(--ink);
}

/* Foot live link */
.proj__livelink {
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none;
  font-family: var(--font-mono);
  font-weight: 800; font-size: 11.5px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink);
  border-bottom: 2px solid var(--ink);
  padding-bottom: 1px;
}
.proj__livelink:hover { color: var(--yellow-deep); border-color: var(--yellow-deep); }
.proj__livelink .arrow { font-weight: 800; }

/* Two-column media layout (carousel | side) for Group A */
.pmedia {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 26px;
  align-items: stretch;
  margin-bottom: 4px;
}
.pmedia .carousel { align-self: start; margin-bottom: 0; }
.pmedia__side { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; }
.pmedia__side .proj__desc { margin: 0; }

/* ---------- Carousel ---------- */
.carousel { margin: 0 0 18px; }
.carousel__stage { position: relative; }
.carousel__viewport {
  border: var(--border);
  box-shadow: var(--shadow-hard-sm);
  overflow: hidden;
  background: var(--ink);
  aspect-ratio: 16 / 10;
}
/* App screenshots are ~2:1 — match exactly so there's no letterbox */
.carousel--app .carousel__viewport { aspect-ratio: 2 / 1; }
/* Landscape photos are 16:9 */
.carousel--wide .carousel__viewport { aspect-ratio: 16 / 9; }
/* Magazine covers are ~25:32 (0.78) */
.carousel--portrait .carousel__viewport { aspect-ratio: 4 / 3; }
.carousel__track {
  display: flex;
  height: 100%;
  transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}
.carousel__slide {
  position: relative;
  min-width: 100%;
  height: 100%;
  margin: 0;
}
.carousel__slide img {
  width: 100%; height: 100%;
  object-fit: contain;
  background: var(--ink);
  cursor: zoom-in;
}
.carousel__slide figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: rgba(31, 31, 31, 0.86);
  color: var(--cream);
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.04em;
  padding: 9px 14px;
  border-top: 2px solid var(--yellow);
}
.carousel__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px;
  display: grid; place-items: center;
  background: var(--cream);
  border: var(--border);
  box-shadow: var(--shadow-hard-sm);
  font-family: var(--font-display);
  font-weight: 800; font-size: 24px;
  line-height: 1; color: var(--ink);
  z-index: 3;
  transition: transform 0.1s, background 0.1s;
}
.carousel__nav:hover { background: var(--yellow); }
.carousel__nav:active { transform: translateY(-50%) scale(0.94); }
.carousel__nav--prev { left: -14px; }
.carousel__nav--next { right: -14px; }
.carousel__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-top: 12px;
}
.carousel__dots { display: flex; flex-wrap: wrap; gap: 7px; }
.carousel__dot {
  width: 12px; height: 12px;
  border: 2px solid var(--ink);
  background: transparent;
  padding: 0; cursor: pointer;
}
.carousel__dot.is-on { background: var(--ink); }
.carousel__counter {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--smoke);
  flex-shrink: 0;
}

/* ---------- Podcast (audio) ---------- */
.podcast {
  margin: 0;
  border: var(--border-thin);
  background: var(--paper);
  padding: 12px 14px;
}
.podcast__meta {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 9px;
}
.podcast__num {
  flex-shrink: 0;
  display: inline-grid; place-items: center;
  min-width: 26px; height: 26px; padding: 0 6px;
  background: var(--ink); color: var(--yellow);
  font-family: var(--font-mono);
  font-weight: 800; font-size: 12px;
}
.podcast__title {
  font-family: var(--font-display);
  font-weight: 800; font-size: 15px;
  letter-spacing: -0.01em;
}
.podcast__tag {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--yellow); color: var(--ink);
  border: 2px solid var(--ink);
  padding: 2px 8px;
}
.podcast audio { width: 100%; height: 38px; display: block; }
.podcast-list { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.podcast-list__lbl {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--smoke);
  border-top: 2px dashed var(--ink);
  padding-top: 12px;
}

/* ---------- Combined podcast banner (Group C) ---------- */
.combined-pod {
  display: grid;
  grid-template-columns: 1fr minmax(320px, 0.85fr);
  gap: 26px; align-items: center;
  background: var(--ink); color: var(--cream);
  border: var(--border);
  box-shadow: var(--shadow-hard);
  padding: 26px 28px;
  margin-bottom: 28px;
}
.combined-pod__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: 10px;
}
.combined-pod__title {
  font-family: var(--font-display);
  font-weight: 800; font-size: 26px;
  line-height: 1.05; letter-spacing: -0.02em;
  margin: 0 0 10px; color: var(--cream);
}
.combined-pod__desc {
  font-size: 14px; line-height: 1.6;
  color: var(--bone); margin: 0; max-width: 60ch;
}
.combined-pod .podcast { background: #141414; border-color: var(--cream); }
.combined-pod .podcast__title { color: var(--cream); }

/* ---------- Access links (Group C) ---------- */
.proj-links { display: flex; flex-wrap: wrap; gap: 12px; margin: 16px 0 4px; }
.proj-link {
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none;
  font-family: var(--font-mono);
  font-weight: 800; font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink);
  background: var(--paper);
  border: var(--border-thin);
  box-shadow: var(--shadow-hard-sm);
  padding: 9px 14px;
  transition: transform 0.1s, box-shadow 0.1s, background 0.1s;
}
.proj-link:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }
.proj-link--demo { background: var(--yellow); }
.proj-link .arrow { font-weight: 800; }

/* ---------- Embedded video (Group D — Gaja) ---------- */
.proj-video {
  border: var(--border);
  box-shadow: var(--shadow-hard-sm);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--ink);
  margin-bottom: 18px;
}
.proj-video iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- Certificate proof (Artopathy, About, Experience) ---------- */
.cert-proof {
  border: var(--border-thin);
  box-shadow: var(--shadow-hard-sm);
  background: var(--ink);
  overflow: hidden;
  margin-bottom: 18px;
}
.cert-proof__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: var(--ink);
  cursor: zoom-in;
  display: block;
}
.cert-proof__cap {
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--cream);
  background: #141414;
  border-top: 2px solid var(--yellow);
  padding: 8px 14px;
}

/* Collapsible certificate (Experience internship — kept collapsed) */
.cert-toggle {
  border: var(--border-thin);
  background: var(--cream);
  margin-top: 18px;
}
.cert-toggle > summary {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer; user-select: none;
  list-style: none;
  display: flex; align-items: center; gap: 9px;
  padding: 12px 16px;
  color: var(--ink);
}
.cert-toggle > summary::-webkit-details-marker { display: none; }
.cert-toggle > summary::before {
  content: "▶"; font-size: 9px;
  transition: transform 0.18s ease;
}
.cert-toggle[open] > summary::before { transform: rotate(90deg); }
.cert-toggle .cert-proof { margin: 0 16px 16px; }

/* ---------- Professional / locked placeholder (Group B) ---------- */
.proj-locked {
  border: 3px dashed var(--steel);
  background:
    radial-gradient(circle at 1px 1px, rgba(31,31,31,0.10) 1px, transparent 0) 0 0 / 14px 14px,
    var(--cream);
  min-height: 320px;
  display: grid; place-items: center;
  padding: 48px 28px;
  text-align: center;
}
.proj-locked__inner { max-width: 60ch; }
.proj-locked__badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
  background: var(--ink); color: var(--yellow);
  padding: 5px 14px;
  margin-bottom: 18px;
}
.proj-locked__title {
  font-family: var(--font-display);
  font-weight: 800; font-size: 28px;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  filter: blur(0.4px);
}
.proj-locked__desc {
  font-size: 15px; line-height: 1.7;
  color: var(--charcoal);
  margin: 0 auto 22px;
}
.proj-locked__cta {
  display: inline-flex; align-items: center; gap: 9px;
  text-decoration: none;
  font-family: var(--font-mono);
  font-weight: 800; font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--yellow); color: var(--ink);
  border: var(--border);
  box-shadow: var(--shadow-hard-sm);
  padding: 12px 20px;
  transition: transform 0.1s, box-shadow 0.1s;
}
.proj-locked__cta:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }

/* ---------- Lightbox (click-to-zoom) ---------- */
.lightbox {
  position: fixed; inset: 0;
  background: rgba(18, 18, 18, 0.92);
  z-index: 300;
  display: none;
  align-items: center; justify-content: center;
  padding: 40px;
}
.lightbox.is-open { display: flex; }
.lightbox__fig {
  margin: 0;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  max-width: 96vw; max-height: 94vh;
}
.lightbox__img {
  max-width: 96vw; max-height: 82vh;
  object-fit: contain;
  border: var(--border);
  box-shadow: 8px 8px 0 rgba(0,0,0,0.55);
  background: var(--cream);
}
.lightbox__cap {
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--cream);
  text-align: center;
}
.lightbox__close {
  position: fixed; top: 18px; right: 18px;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--coral); color: var(--ink);
  border: 2.5px solid var(--ink);
  font-family: var(--font-mono);
  font-weight: 800; font-size: 18px;
  cursor: pointer;
}
.lightbox__close:hover { background: var(--yellow); }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .pmedia { grid-template-columns: 1fr; gap: 18px; }
  .combined-pod { grid-template-columns: 1fr; gap: 18px; padding: 22px; }
}
@media (max-width: 600px) {
  .carousel__nav { width: 36px; height: 36px; font-size: 20px; }
  .carousel__nav--prev { left: -8px; }
  .carousel__nav--next { right: -8px; }
  .carousel__slide figcaption { font-size: 10px; padding: 7px 10px; }
  .combined-pod__title { font-size: 22px; }
  .proj-locked__title { font-size: 23px; }
  .proj-locked { padding: 36px 20px; min-height: 260px; }
  .lightbox { padding: 16px; }
  .lightbox__close { top: 10px; right: 10px; }
}

/* Video fallback link (Group D — Gaja) */
.proj-video__fallback {
  margin: -8px 0 16px;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--smoke);
}
.proj-video__fallback a {
  color: var(--ink);
  border-bottom: 2px solid var(--yellow-deep);
  text-decoration: none; font-weight: 800;
}
.proj-video__fallback a:hover { color: var(--yellow-deep); }

/* =========================================================
   HOME — PROJECTS SPOTLIGHT (drive the audience to projects)
   ========================================================= */
.spotlight {
  background: var(--ink);
  color: var(--cream);
  border-top: var(--border);
  border-bottom: var(--border);
  padding: 60px 0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,0.05) 1px, transparent 0);
  background-size: 22px 22px;
}
.spotlight__inner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 44px;
  align-items: center;
}
.spotlight__media {
  display: flex; flex-direction: column; gap: 18px;
  align-items: flex-start;
}
.spotlight__badge {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
  background: var(--yellow); color: var(--ink);
  padding: 7px 14px;
}
.spotlight__count {
  display: flex; flex-direction: column;
  border: var(--border-thin); border-color: var(--steel);
  padding: 20px 24px;
  background: #141414;
}
.spotlight__count-num {
  font-family: var(--font-display);
  font-weight: 800; font-size: 64px; line-height: 0.9;
  color: var(--yellow);
}
.spotlight__count-lbl {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--bone); margin-top: 12px; line-height: 1.4;
}
.spotlight__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.02; letter-spacing: -0.02em;
  margin: 0 0 16px; color: var(--cream);
}
.spotlight__title .hl { color: var(--yellow); }
.spotlight__lead {
  font-size: 16px; line-height: 1.65;
  color: var(--bone);
  margin: 0 0 20px; max-width: 70ch;
}
.spotlight__chips { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 26px; }
.spotlight__chips span {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em;
  border: 2px solid var(--steel);
  color: var(--cream);
  padding: 4px 11px;
}
.spotlight__cta { font-size: 14px; }

@media (max-width: 760px) {
  .spotlight { padding: 44px 0; }
  .spotlight__inner { grid-template-columns: 1fr; gap: 24px; }
  .spotlight__media { flex-direction: row; align-items: center; gap: 16px; }
  .spotlight__count { padding: 12px 18px; }
  .spotlight__count-num { font-size: 46px; }
}

/* =========================================================
   MOBILE HARDENING — global safety for small screens
   ========================================================= */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
iframe, video { max-width: 100%; }
/* keep long emails / URLs from forcing horizontal scroll on phones */
.info-card__val, .info-card__val a, .footer__col a { overflow-wrap: anywhere; }
.hero__currently-val, .footer__about, .contact-main p { overflow-wrap: break-word; }

@media (max-width: 680px) {
  /* the language switcher now spans the full header row (the CTA button was removed) */
  .lang { grid-column: 1 / -1; grid-row: 2; border-right: none; border-bottom: var(--border); }
}