/* ============================================================
   Nidhi — portfolio
   Palette: black coffee on warm paper. Light only, no dark mode.
   ============================================================ */

*, ::after, ::before { box-sizing: border-box; border: 0 solid; margin: 0; padding: 0; }

:root {
  color-scheme: light;

  /* Surfaces */
  --bg:       #faf7f2;   /* warm cream paper */
  --card:     #fff;
  --border:   #ebe4da;

  /* Ink */
  --text:     #1c1715;   /* almost-black, warm */
  --muted:    #5f564f;

  /* Liverpool red + coffee */
  --red:      #c8102e;   /* primary accent */
  --espresso: #4a2f23;   /* secondary — the coffee */
  --crema:    #c89a6b;   /* foam highlight */
  --moss:     #5f7a52;
  --indigo:   #4f5d8f;
  --amber:    #c08a28;

  --red-soft:      #fdeaed;
  --espresso-soft: #f2ebe6;
  --crema-soft:    #faf2e8;
  --moss-soft:     #eef2eb;
  --indigo-soft:   #eceef7;
  --amber-soft:    #faf3e4;

  --font-sans:  "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --radius:     10px;
  --radius-sm:  4px;
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

::selection { background: color-mix(in srgb, var(--crema) 45%, white); }

:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; border-radius: 2px; }
:focus:not(:focus-visible) { outline: none; }

/* A class with `display` beats the UA's [hidden] rule, so restate it. */
[hidden] { display: none !important; }

a { color: inherit; }
code { font-family: var(--font-mono); font-size: 0.86em; background: var(--espresso-soft);
       padding: 0.1em 0.35em; border-radius: var(--radius-sm); }
strong { font-weight: 600; color: var(--text); }

/* ── Shell ───────────────────────────────────────────────── */

.site-shell {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  max-width: 42rem;
  margin: 0 auto;
  padding-inline: max(1.5rem, env(safe-area-inset-left));
  padding-block: 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 768px)  { .site-shell { max-width: 50rem; padding-inline: 2rem; } }
@media (min-width: 1024px) { .site-shell { max-width: 58rem; } }
@media (min-width: 1280px) { .site-shell { max-width: 62rem; } }

main { flex: 1; }

/* ── Header ──────────────────────────────────────────────── */

.site-header__row {
  position: relative;        /* anchors Byte's bubble */
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3.25rem;       /* headroom for Byte's bubble */
}
@media (max-width: 640px) { .site-header__row { margin-top: 3.75rem; } }

.site-header__brand {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem;
  background: none; cursor: pointer; text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.site-header__name {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 5vw, 1.5rem);
  font-weight: 500; letter-spacing: -0.02em; line-height: 1.1;
  transition: color 0.18s ease;
}
.site-header__role {
  font-size: 0.8125rem; color: var(--muted);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: color 0.18s ease;
}
@media (hover: hover) {
  .site-header__brand:hover .site-header__name { color: var(--red); }
  .site-header__role:hover { color: var(--red); }
}

/* Floating mug — always on screen, bottom right. */
.mug {
  position: fixed; z-index: 40;
  right: calc(1.25rem + env(safe-area-inset-right, 0px));
  bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  background: var(--card); cursor: pointer;
  width: 3.75rem; height: 3.75rem;
  display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: 999px;
  box-shadow: 0 4px 16px -4px rgb(0 0 0 / 0.16);
  transition: transform 0.25s cubic-bezier(.34,1.56,.64,1),
              box-shadow 0.25s ease, border-color 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
  .mug:hover {
    transform: translateY(-3px);
    border-color: var(--crema);
    box-shadow: 0 8px 22px -6px rgb(0 0 0 / 0.22);
  }
}
.mug:active { transform: translateY(-1px) scale(0.95); }
.mug svg { width: 2.25rem; height: 2.15rem; display: block; overflow: visible; }

@media (max-width: 480px) {
  .mug { width: 3.25rem; height: 3.25rem; right: 1rem; bottom: 1rem; }
  .mug svg { width: 1.95rem; height: 1.85rem; }
}

/* The back-to-top arrow, shown once there's somewhere to go back to.
   It sits over the empty part of the cup, so it stays legible as the
   coffee drains away beneath it. */
.mug__arrow {
  fill: none; stroke: var(--espresso); stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: 0; transition: opacity 0.25s ease;
}
.mug.can-top .mug__arrow { opacity: 0.9; }
.mug.is-refilling .mug__arrow { opacity: 0; }

/* Label under the mug. */
.mug__tip {
  position: absolute; right: 0; bottom: -1.15rem;
  width: 100%; text-align: center;
  font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted); opacity: 0;
  transition: opacity 0.2s ease; pointer-events: none; white-space: nowrap;
}
@media (hover: hover) { .mug:hover .mug__tip { opacity: 0.8; } }
.mug__body, .mug__handle {
  fill: none; stroke: var(--espresso); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.mug__coffee { fill: var(--espresso); transition: y 0.45s cubic-bezier(.4,0,.2,1), height 0.45s cubic-bezier(.4,0,.2,1); }
.mug__crema {
  stroke: var(--crema); stroke-width: 1.6; stroke-linecap: round;
  transition: transform 0.45s cubic-bezier(.4,0,.2,1);
}
.mug__saucer { fill: none; stroke: var(--border); stroke-width: 1.8; }
.mug__steam path {
  fill: none; stroke: var(--crema); stroke-width: 1.8; stroke-linecap: round;
  opacity: 0; transform-origin: center bottom;
}
.mug:hover .mug__steam path,
.mug.is-refilling .mug__steam path { animation: steam 2.2s ease-in-out infinite; }
.mug .mug__steam path:nth-child(2) { animation-delay: 0.35s; }
.mug .mug__steam path:nth-child(3) { animation-delay: 0.7s; }
@keyframes steam {
  0%   { opacity: 0;   transform: translateY(3px) scaleY(0.7); }
  40%  { opacity: 0.9; }
  100% { opacity: 0;   transform: translateY(-7px) scaleY(1.2); }
}
.mug.is-refilling { animation: mug-bump 0.4s ease; }
@keyframes mug-bump {
  0%,100% { transform: none; } 30% { transform: translateY(-3px) rotate(-6deg); }
}

/* ── Tabs ────────────────────────────────────────────────── */

.site-tabs {
  display: flex; gap: 0.25rem; flex-wrap: wrap;
  margin-top: 1.5rem; padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}
.site-tabs__item {
  position: relative;
  background: none; cursor: pointer;
  font-family: inherit; font-size: 0.8125rem; color: var(--muted);
  padding: 0.4rem 0.7rem; border-radius: var(--radius-sm);
  transition: color 0.18s ease, background 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}
.site-tabs__item::after {
  content: ""; position: absolute; left: 0.7rem; right: 0.7rem; bottom: -0.5rem;
  height: 2px; border-radius: 2px;
  background: var(--tab-accent, var(--espresso));
  transform: scaleX(0); transform-origin: center;
  transition: transform 0.22s cubic-bezier(.4,0,.2,1);
}
.site-tabs__item--active { color: var(--text); font-weight: 500; }
.site-tabs__item--active::after { transform: scaleX(1); }
@media (hover: hover) {
  .site-tabs__item:hover { color: var(--text); background: var(--espresso-soft); }
}

.section-accent--espresso { --tab-accent: var(--espresso); }
.section-accent--red      { --tab-accent: var(--red); }
.section-accent--moss     { --tab-accent: var(--moss); }
.section-accent--indigo   { --tab-accent: var(--indigo); }
.section-accent--amber    { --tab-accent: var(--amber); }

/* ── Panels ──────────────────────────────────────────────── */

.site-panel { padding-top: 2.5rem; animation: panel-in 0.3s cubic-bezier(.4,0,.2,1); }
@keyframes panel-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.page-hero__title {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 6.5vw, 2.5rem);
  font-weight: 500; letter-spacing: -0.035em; line-height: 1.1;
  margin-bottom: 1.75rem;
  display: flex; align-items: center; gap: 0.6rem;
}
.title-cat {
  font-size: 0.6em; display: inline-block;
  transition: transform 0.25s cubic-bezier(.34,1.56,.64,1);
}
@media (hover: hover) {
  .page-hero__title:hover .title-cat { transform: rotate(-14deg) translateY(-3px) scale(1.12); }
}

.panel-footnote {
  margin-top: 2rem; padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  font-size: 0.875rem; color: var(--muted); line-height: 1.7;
}

/* ── About ───────────────────────────────────────────────── */

.about-hero {
  display: flex; flex-direction: column; align-items: center;
  gap: 1.5rem; text-align: center;
  padding-top: 1.5rem;   /* room for the quip bubble above the photo */
}
@media (min-width: 640px) {
  .about-hero { flex-direction: row; align-items: center; gap: 2.75rem; text-align: left; }
}

.about-photo { position: relative; flex: none; }
.about-photo img {
  display: block;
  width: 10.5rem; aspect-ratio: 3 / 4; height: auto;
  border-radius: 14px; object-fit: cover; object-position: center 12%;
  border: 3px solid transparent;
  background:
    linear-gradient(var(--card), var(--card)) padding-box,
    linear-gradient(135deg, var(--red), var(--crema), var(--espresso)) border-box;
  box-shadow: 0 8px 26px -10px color-mix(in srgb, var(--espresso) 50%, transparent);
  transition: transform 0.3s cubic-bezier(.34,1.56,.64,1), box-shadow 0.3s ease;
  position: relative; z-index: 2;
}
@media (min-width: 640px) { .about-photo img { width: 12rem; } }

/* Cat peeking from behind the photo */
.about-cat {
  position: absolute; z-index: 3;
  right: -1.1rem; top: -1.5rem;
  width: 3.5rem; height: 2.6rem;
  opacity: 0;
  transform: translateY(1.2rem) rotate(8deg);
  transition: opacity 0.26s ease, transform 0.38s cubic-bezier(.34,1.56,.64,1);
  pointer-events: none;
}
.about-cat * { fill: none; stroke: var(--espresso); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.about-cat .cat-body, .about-cat .cat-head { fill: var(--card); }
.about-cat .cat-ear { fill: var(--espresso); }
.about-cat .cat-nose { fill: var(--red); stroke: var(--red); stroke-width: 1.4; }
.about-cat .cat-whisker { stroke-width: 1.6; opacity: 0.55; }
.about-cat .cat-tail { stroke-width: 2.6; }

@media (hover: hover) {
  .about-photo:hover img {
    transform: rotate(-2.5deg) scale(1.02);
    box-shadow: 0 10px 30px -8px color-mix(in srgb, var(--espresso) 55%, transparent);
  }
  .about-photo:hover .about-cat { opacity: 1; transform: translateY(0) rotate(0deg); }
  .about-photo:hover .cat-tail { animation: tail-flick 1.6s ease-in-out infinite; transform-origin: 50px 34px; }
}
@keyframes tail-flick {
  0%,100% { transform: rotate(0deg); } 50% { transform: rotate(-16deg); }
}

/* Sits to the right of the peeking cat, as though he's saying it. */
.photo-quip {
  position: absolute; z-index: 6;
  left: calc(100% + 1.9rem);     /* clear of the cat, who overhangs the frame */
  top: -1.35rem;
  width: max-content; max-width: 13rem;
  background: var(--card); color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px 12px 12px 2px;   /* notch at the lower left, toward him */
  padding: 0.45rem 0.75rem;
  font-size: 0.78rem; line-height: 1.45;
  box-shadow: 0 6px 18px -6px rgb(0 0 0 / 0.16);
  opacity: 0; pointer-events: none;
  transform: translateX(-6px) scale(0.92);
  transform-origin: left center;
  transition: opacity 0.18s ease, transform 0.18s cubic-bezier(.34,1.56,.64,1);
}
/* Little tail pointing back at the cat. */
.photo-quip::before {
  content: ""; position: absolute; left: -6px; bottom: 0.65rem;
  border: 6px solid transparent;
  border-right-color: var(--card); border-left: 0;
  filter: drop-shadow(-1px 0 0 var(--border));
}
.photo-quip.is-visible { opacity: 1; transform: translateX(0) scale(1); }

/* No room beside the photo on narrow screens — sit it above instead. */
@media (max-width: 860px) {
  .photo-quip {
    left: 50%; top: -1rem;
    transform: translate(-50%, calc(-100% + 6px)) scale(0.92);
    transform-origin: center bottom;
    border-radius: 12px 12px 12px 2px;
  }
  .photo-quip::before { display: none; }
  .photo-quip.is-visible { transform: translate(-50%, -100%) scale(1); }
}

.about-copy { min-width: 0; }
.about-lead {
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 4.4vw, 1.6rem);
  font-weight: 500; letter-spacing: -0.015em; line-height: 1.35;
  margin-bottom: 0.75rem;
}
.about-sub { color: var(--muted); font-size: clamp(0.9375rem, 3.8vw, 1rem); line-height: 1.7; }

.about-links {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  list-style: none; margin-top: 2rem; justify-content: center;
}
@media (min-width: 640px) { .about-links { justify-content: flex-start; } }
.about-links a {
  display: inline-block; text-decoration: none;
  font-size: 0.8125rem; color: var(--muted);
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--card);
  transition: color 0.18s ease, border-color 0.18s ease, transform 0.18s ease, background 0.18s ease;
}
@media (hover: hover) {
  .about-links a:hover {
    color: var(--espresso); border-color: var(--crema);
    background: var(--crema-soft); transform: translateY(-1px);
  }
}

.about-nowbar {
  display: flex; align-items: center; gap: 0.5rem;
  margin-top: 1.75rem; padding: 0.6rem 0.9rem;
  background: var(--moss-soft); border-radius: var(--radius);
  font-size: 0.8125rem; color: color-mix(in srgb, var(--moss) 80%, black);
}
.nowbar__dot {
  width: 0.45rem; height: 0.45rem; border-radius: 999px; flex: none;
  background: var(--moss); animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%,100% { opacity: 1; box-shadow: 0 0 0 0 color-mix(in srgb, var(--moss) 50%, transparent); }
  50%     { opacity: 0.75; box-shadow: 0 0 0 5px transparent; }
}

/* ── Entry cards ─────────────────────────────────────────── */

.entry-list { list-style: none; display: flex; flex-direction: column; gap: 1rem; }

.entry-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
@media (hover: hover) {
  .entry-card:hover {
    border-color: color-mix(in srgb, var(--crema) 55%, var(--border));
    box-shadow: 0 4px 16px -8px rgb(0 0 0 / 0.1);
  }
}

.entry-card__top { display: flex; align-items: flex-start; gap: 0.85rem; flex-wrap: wrap; }

.org-logo {
  flex: none; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-sm);
  background: var(--card);
  border: 1px solid var(--border);
  display: grid; place-items: center;
  padding: 0.3rem;
  font-family: var(--font-serif); font-size: 1.1rem; font-weight: 500; color: var(--espresso);
  overflow: hidden;
}
/* Monogram only when there's no image to show. */
.org-logo:not(:has(img))::before { content: attr(data-mono); }
.org-logo img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}

.entry-card__headings { flex: 1 1 12rem; min-width: 0; }
.entry-card__title {
  font-family: var(--font-serif);
  font-size: clamp(1.05rem, 4vw, 1.15rem);
  font-weight: 500; letter-spacing: -0.015em; line-height: 1.3;
}
.entry-card__org { font-size: 0.875rem; color: var(--muted); margin-top: 0.1rem; }
.entry-card__corner {
  display: flex; flex-direction: column; gap: 0.1rem;
  text-align: right; font-size: 0.78rem; color: var(--muted); margin-left: auto;
}
@media (max-width: 520px) {
  .entry-card__corner { text-align: left; margin-left: 0; flex-basis: 100%; }
}

.entry-card__bullets { list-style: none; margin-top: 1rem; display: flex; flex-direction: column; gap: 0.6rem; }
.entry-card__bullets li { position: relative; padding-left: 1.1rem; color: var(--muted); line-height: 1.65; }
.entry-card__bullets li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 0.35rem; height: 0.35rem; border-radius: 999px; background: var(--crema);
}

.entry-card__note { margin-top: 0.85rem; color: var(--muted); font-size: 0.875rem; line-height: 1.65; }
.inline-link { color: var(--indigo); text-decoration: none; white-space: nowrap; }
.inline-link:hover { text-decoration: underline; }

/* Certifications */
.cert-list { list-style: none; margin-top: 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.cert-list li { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; font-size: 0.8125rem; }
.cert-mark {
  flex: none; width: 1.15rem; height: 1.15rem;
  display: grid; place-items: center;
}
.cert-mark img { width: 100%; height: 100%; object-fit: contain; opacity: 0.7; }
.cert-code {
  flex: none; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600;
  color: var(--indigo); background: var(--indigo-soft);
  padding: 0.2rem 0.45rem; border-radius: var(--radius-sm);
  min-width: 3.5rem; text-align: center;
}
.cert-name { color: var(--text); }
.cert-issuer { color: var(--muted); font-size: 0.75rem; margin-left: auto; }

/* ── Skills ──────────────────────────────────────────────── */

.skills-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) { .skills-grid { grid-template-columns: 1fr 1fr; } }

.skill-group-card {
  background: linear-gradient(180deg, var(--crema-soft) 0%, var(--card) 42%);
  border: 1px solid var(--border);
  border-top: 3px solid var(--crema);
  border-radius: var(--radius);
  padding: 1.1rem;
}
.skill-group-card__title {
  font-family: var(--font-serif);
  font-size: 1rem; font-weight: 600; letter-spacing: -0.01em;
  margin-bottom: 0.85rem;
}
.skill-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.skill-chip {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.75rem; color: var(--muted);
  background: var(--card); border: 1px solid var(--border);
  padding: 0.25rem 0.6rem 0.25rem 0.45rem; border-radius: 999px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
/* Monochrome marks, tinted to the page ink so the grid stays calm. */
.skill-chip__logo {
  width: 0.85rem; height: 0.85rem; flex: none;
  object-fit: contain;
  opacity: 0.62;
  transition: opacity 0.15s ease;
}
@media (hover: hover) {
  .skill-chip:hover { color: var(--espresso); border-color: var(--crema); }
  .skill-chip:hover .skill-chip__logo { opacity: 1; }
}

/* ── Projects ────────────────────────────────────────────── */

.entry-list--stories { gap: 0; }
.entry-list--stories > li + li { border-top: 1px solid var(--border); }
.entry-card--story { border: 0; border-radius: 0; padding: 1.75rem 0; background: none; }
.entry-card--story:hover { box-shadow: none; }

.story-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.story-title {
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 4.5vw, 1.4rem);
  font-weight: 500; letter-spacing: -0.02em; line-height: 1.2;
}
.story-tech { font-size: 0.8125rem; color: var(--red); margin-top: 0.2rem; }
.story-repo {
  font-family: var(--font-mono); font-size: 0.72rem;
  color: var(--muted); white-space: nowrap;
}
.story-repo a {
  color: var(--muted); text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
@media (hover: hover) {
  .story-repo a:hover { color: var(--red); border-bottom-color: var(--red); }
}
.story-desc { margin-top: 0.85rem; color: var(--muted); line-height: 1.7; }

.entry-card__tags { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 1rem; }
.tag { font-size: 0.6875rem; padding: 0.2rem 0.5rem; border-radius: var(--radius-sm); }
.entry-card__tags .tag:nth-child(4n+1) { background: var(--red-soft);    color: #93122a; }
.entry-card__tags .tag:nth-child(4n+2) { background: var(--moss-soft);   color: #46603a; }
.entry-card__tags .tag:nth-child(4n+3) { background: var(--indigo-soft); color: #3e4a73; }
.entry-card__tags .tag:nth-child(4n+4) { background: var(--amber-soft);  color: #8a6219; }

/* ── "Also on GitHub" list ───────────────────────────────── */

.also {
  margin-top: 2rem; padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.also__title {
  font-family: var(--font-serif);
  font-size: 1rem; font-weight: 500; letter-spacing: -0.01em;
  margin-bottom: 0.9rem;
}
.also__list { list-style: none; display: grid; gap: 0.5rem; }
.also__list li {
  display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap;
  font-size: 0.8125rem;
}
.also__name {
  font-family: var(--font-mono); font-size: 0.72rem;
  color: var(--espresso); background: var(--espresso-soft);
  padding: 0.15rem 0.45rem; border-radius: var(--radius-sm);
  flex: none;
}
.also__what { color: var(--muted); }
.also__note {
  margin-top: 1.1rem; padding-top: 0.85rem;
  border-top: 1px dashed var(--border);
  font-size: 0.8125rem; color: var(--muted); line-height: 1.65;
}

/* ── Hover preview drawer ────────────────────────────────── */

.resume-preview {
  position: fixed; top: 0; right: 0; z-index: 60;
  width: min(50vw, 30rem); height: 100dvh;
  background: var(--card); border-left: 1px solid var(--border);
  box-shadow: -8px 0 32px -12px rgb(0 0 0 / 0.18);
  display: flex; flex-direction: column;
  animation: resume-in 0.22s cubic-bezier(.4,0,.2,1);
}
@keyframes resume-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }

.resume-preview__close {
  position: absolute; top: 0.6rem; right: 0.75rem; z-index: 2;
  background: var(--card); border: 1px solid var(--border); border-radius: 999px;
  width: 1.75rem; height: 1.75rem; line-height: 1;
  font-size: 1.1rem; color: var(--muted); cursor: pointer;
}
.resume-preview__close:hover { color: var(--text); border-color: var(--crema); }
.resume-preview__body { flex: 1; overflow: auto; padding: 2.75rem 1.5rem 1.5rem; }
.resume-preview__body iframe { width: 100%; height: 100%; border: 0; }

.preview-card__label {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); margin-bottom: 0.4rem;
}
.preview-card__title { font-family: var(--font-serif); font-size: 1.25rem; font-weight: 500; margin-bottom: 0.5rem; }
.preview-card__text { color: var(--muted); font-size: 0.875rem; line-height: 1.7; margin-bottom: 1rem; }
.preview-card__list { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
.preview-card__list li {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 0.65rem 0.8rem; font-size: 0.8125rem;
}
.preview-card__list strong { display: block; margin-bottom: 0.15rem; }
.preview-card__list span { color: var(--muted); font-size: 0.78rem; }

@media (max-width: 768px) {
  .resume-preview {
    top: auto; bottom: 0; left: 0; width: 100%;
    height: min(82dvh, 640px);
    border-left: 0; border-top: 1px solid var(--border);
    border-radius: 14px 14px 0 0;
    animation: resume-sheet-in 0.24s cubic-bezier(.4,0,.2,1);
  }
}
@keyframes resume-sheet-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* ── Sticky note on the photo ────────────────────────────── */

/* ── Byte, who brings the questions ──────────────────────── */

/* A lane across the top of the page. Full viewport width so he can
   walk right off one edge and back in the other, but it scrolls away
   with the header rather than following you down the page. */
/* The strip beside the name, filling the rest of the header row.
   He walks across it and slips out of sight at either end. */
.byte-lane {
  position: relative;
  flex: 1;                   /* takes the space right of the brand */
  min-width: 0;
  align-self: stretch;
  min-height: 2.75rem;
  pointer-events: none;      /* only the cat is clickable */
  overflow: hidden;          /* he vanishes at the ends, not over them */
}

.byte {
  position: absolute; bottom: 0;
  left: 78%;                 /* toward the right end of the strip */
  display: block;
  background: none; padding: 0; cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

.byte__cat { width: 3.5rem; height: 2.6rem; display: block; overflow: visible; }
@media (max-width: 640px) { .byte__cat { width: 2.9rem; height: 2.2rem; } }

/* Fur and outline */
.byte__body, .byte__head {
  fill: var(--card); stroke: var(--espresso); stroke-width: 3;
  stroke-linejoin: round; stroke-linecap: round;
}
.byte__ear { fill: var(--espresso); stroke: var(--espresso); stroke-width: 3; stroke-linejoin: round; }
.byte__ear-in { fill: #e8a0a8; stroke: none; }
.byte__stripes path {
  fill: none; stroke: var(--espresso); stroke-width: 2.4;
  stroke-linecap: round; opacity: 0.35;
}
.byte__cheek { fill: var(--red); opacity: 0.16; }

.byte__tail {
  fill: none; stroke: var(--espresso); stroke-width: 3.2; stroke-linecap: round;
  transform-origin: 76px 52px;
  animation: tail-idle 2.6s ease-in-out infinite;
}
@keyframes tail-idle {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(-16deg); }
}

.byte__legs .leg {
  fill: none; stroke: var(--espresso); stroke-width: 3; stroke-linecap: round;
  transform-origin: top center;
}

/* Face: big round eyes with a glint, a lid that drops to blink. */
.byte__face .eye   { fill: var(--espresso); stroke: none; }
.byte__face .glint { fill: var(--card); stroke: none; }
.byte__face .lid {
  fill: none; stroke: var(--card); stroke-width: 0;
  stroke-linecap: round; transition: stroke-width 0.08s ease;
}
.byte.is-blinking .byte__face .lid { stroke-width: 9; }

.byte__face .nose  { fill: #e8808f; stroke: none; }
.byte__face .mouth {
  fill: none; stroke: var(--espresso); stroke-width: 2;
  stroke-linecap: round;
}
.byte__face .whisker {
  fill: none; stroke: var(--espresso); stroke-width: 1.8;
  stroke-linecap: round; opacity: 0.45;
}

/* The bubble sits above him, in the empty space beside the name.
   Absolute, so it never shifts the header or the tabs. */
.byte__bubble {
  position: absolute; z-index: 30;
  bottom: calc(100% + 0.45rem); right: 0;
  width: max-content; max-width: min(20rem, 72vw);
  padding: 0.5rem 0.8rem;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 6px 20px -8px rgb(0 0 0 / 0.22);
  font-size: 0.72rem; line-height: 1.45; text-align: center;
  color: var(--text);
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(.34,1.56,.64,1),
              border-color 0.25s ease, background 0.25s ease;
}
/* Tail pointing down at him. */
.byte__bubble::after {
  content: ""; position: absolute; right: 1.4rem; bottom: -7px;
  border: 7px solid transparent;
  border-top-color: var(--card); border-bottom: 0;
  filter: drop-shadow(0 1px 0 var(--border));
}
@media (max-width: 640px) {
  .byte__bubble { font-size: 0.67rem; padding: 0.42rem 0.6rem; }
}

/* Answer state. */
.byte__bubble.is-answered {
  border-color: color-mix(in srgb, var(--red) 45%, var(--border));
  background: var(--red-soft);
}
.byte__bubble.is-answered::after { border-top-color: var(--red-soft); }
.byte__bubble.is-answered .byte__text {
  font-family: var(--font-serif);
  font-size: 0.95rem; font-weight: 600; color: var(--red);
}

/* Hidden while he's away. */
.byte__bubble.is-away { opacity: 0; transform: translateY(6px) scale(0.94); }

/* Off fetching the next one. */
.byte.is-walking { cursor: default; }
.byte.is-walking .byte__tail { animation: tail-walk 0.7s ease-in-out infinite; }
@keyframes tail-walk {
  0%, 100% { transform: rotate(-8deg); }
  50%      { transform: rotate(10deg); }
}

/* Walk cycle: diagonal pairs, like a real cat. */
.byte.is-walking .leg--fl, .byte.is-walking .leg--br {
  animation: step-a 0.52s ease-in-out infinite;
}
.byte.is-walking .leg--fr, .byte.is-walking .leg--bl {
  animation: step-b 0.52s ease-in-out infinite;
}
@keyframes step-a {
  0%, 100% { transform: rotate(16deg); }
  50%      { transform: rotate(-16deg); }
}
@keyframes step-b {
  0%, 100% { transform: rotate(-16deg); }
  50%      { transform: rotate(16deg); }
}

/* A bounce as he trots — on the parts, never on .byte__cat, whose
   transform carries the scaleX flip while he's facing left. */
.byte.is-walking .byte__body,
.byte.is-walking .byte__head,
.byte.is-walking .byte__ear,
.byte.is-walking .byte__ear-in,
.byte.is-walking .byte__face,
.byte.is-walking .byte__cheek,
.byte.is-walking .byte__stripes {
  animation: trot 0.52s ease-in-out infinite;
}
@keyframes trot {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}

@media (hover: hover) {
  .byte:not(.is-walking):hover .byte__cat {
    transform: translateY(-3px); transition: transform 0.22s cubic-bezier(.34,1.56,.64,1);
  }
}

/* No label — the bubble and the cursor are enough of a hint. */

/* ── Places (About) ──────────────────────────────────────── */

.places {
  margin-top: 2.5rem; padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.strip__title {
  font-family: var(--font-serif);
  font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.015em;
  margin-bottom: 1rem;
}
.strip__title::after {
  content: ""; display: inline-block;
  width: 1.75rem; height: 2px; margin-left: 0.6rem; vertical-align: 0.3em;
  background: var(--red); border-radius: 2px;
}

.places__grid { display: grid; gap: 1rem; }
@media (min-width: 720px) { .places__grid { grid-template-columns: 1.15fr 1fr; gap: 1.25rem; } }

.place {
  padding-left: 0.9rem;
  border-left: 2px solid var(--border);
  transition: border-color 0.2s ease;
}
.place--home { border-left-color: var(--red); }
@media (hover: hover) { .place:hover { border-left-color: var(--crema); } }
@media (hover: hover) { .place--home:hover { border-left-color: var(--red); } }

.place__head { display: flex; align-items: baseline; gap: 0.45rem; margin-bottom: 0.3rem; }
.place__pin { font-size: 0.5rem; color: var(--red); line-height: 1; }
.place__pin--away { color: var(--crema); }
.place__name {
  font-family: var(--font-serif);
  font-size: 1rem; font-weight: 600; letter-spacing: -0.01em;
}
.place__tag {
  font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted); background: var(--espresso-soft);
  padding: 0.12rem 0.38rem; border-radius: 999px;
}
.place--home .place__tag { color: var(--red); background: var(--red-soft); }
.place__body { font-size: 0.84rem; color: var(--muted); line-height: 1.65; }

.places__note {
  margin-top: 1.1rem; padding-top: 0.85rem;
  border-top: 1px dashed var(--border);
  font-size: 0.8rem; color: var(--muted); line-height: 1.6;
}

/* Hover a Scouse word, get the translation. */
.scouse {
  position: relative;
  border-bottom: 1px dotted var(--crema);
  cursor: help;
}
.scouse::after {
  content: attr(data-gloss);
  position: absolute; z-index: 20; left: 50%; bottom: calc(100% + 0.45rem);
  transform: translate(-50%, 4px);
  width: max-content; max-width: 13rem;
  background: var(--espresso); color: #faf7f2;
  font-size: 0.72rem; line-height: 1.4; font-weight: 400;
  padding: 0.3rem 0.55rem; border-radius: 6px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease;
}
@media (hover: hover) {
  .scouse:hover::after { opacity: 1; transform: translate(-50%, 0); }
}

.lead-aster {
  font-size: 0.5em; vertical-align: super; color: var(--red);
  cursor: help; margin-left: 0.1em;
}

/* ── Footer: the Mangalore coast ─────────────────────────── */

.site-footer { margin-top: 4.5rem; padding-top: 1.5rem; }

.waterfront {
  display: block; width: 100%; background: none; cursor: pointer;
  position: relative; -webkit-tap-highlight-color: transparent;
}
.waterfront svg {
  width: 100%; height: auto;
  aspect-ratio: 400 / 104;
  display: block; overflow: visible;
}

.wf__ink * , .wf__ink {
  fill: var(--card);
  stroke: color-mix(in srgb, var(--espresso) 42%, var(--border));
  stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round;
}
.wf__window { stroke: var(--crema); stroke-width: 1.2; fill: none; }
.wf__crane  { fill: none; stroke-width: 1.4; }

/* The terracotta tile roof — Mangalore's own. */
.wf__roof { fill: var(--red-soft); stroke: var(--red); stroke-width: 1.4; }
.wf__lamp { fill: var(--amber-soft); stroke: var(--amber); stroke-width: 1.4; }

.wf__sun {
  fill: color-mix(in srgb, var(--amber) 18%, var(--card));
  stroke: var(--amber); stroke-width: 1.3; opacity: 0.8;
}
@media (hover: hover) {
  .waterfront:hover .wf__sun { animation: sun-glow 3.5s ease-in-out infinite; }
}
@keyframes sun-glow {
  0%, 100% { opacity: 0.8; r: 15; }
  50%      { opacity: 1;   r: 16.5; }
}

.wf__palm * , .wf__palm {
  fill: none;
  stroke: color-mix(in srgb, var(--moss) 72%, var(--espresso));
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
@media (hover: hover) {
  .waterfront:hover .wf__palm { animation: palm-sway 4s ease-in-out infinite; transform-origin: bottom center; }
  .waterfront:hover .wf__palm:nth-of-type(2) { animation-delay: 0.6s; }
}
@keyframes palm-sway {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(1.6deg); }
}

.wf__boat * { fill: var(--card); stroke: var(--espresso); stroke-width: 1.5;
              stroke-linejoin: round; stroke-linecap: round; }
.wf__boat .wf__sail { fill: var(--red-soft); stroke: var(--red); }
.wf__boat .wf__mast { fill: none; stroke-width: 1.3; }
/* Bob the contents, not the group — the group carries its position. */
@media (hover: hover) {
  .waterfront:hover .wf__boat > * { animation: boat-bob 2.8s ease-in-out infinite; }
  .waterfront:hover #boatA > * { animation-delay: 0.4s; }
}
@keyframes boat-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-1.5px); }
}

.wf__water {
  stroke: color-mix(in srgb, var(--espresso) 25%, var(--border));
  stroke-width: 1.5; stroke-linecap: round;
}
.wf__ripple {
  fill: none; stroke: var(--crema); stroke-width: 1.1; stroke-linecap: round;
  opacity: 0.65;
}
@media (hover: hover) {
  .waterfront:hover .wf__ripple { animation: ripple 3s ease-in-out infinite; }
}
@keyframes ripple {
  0%, 100% { transform: translateX(0);   opacity: 0.65; }
  50%      { transform: translateX(5px); opacity: 0.95; }
}

.waterfront__caption {
  display: block; text-align: center; max-width: 30rem;
  margin: 0.65rem auto 0;
  font-size: 0.75rem; line-height: 1.55; color: var(--muted);
  opacity: 0; transition: opacity 0.22s ease;
}
.waterfront__caption strong { color: var(--red); font-weight: 500; }
@media (hover: hover) { .waterfront:hover .waterfront__caption { opacity: 1; } }
@media (hover: none)  { .waterfront__caption { opacity: 1; } }

/* The boat that actually leaves. */
.sailing-boat {
  position: fixed; z-index: 50; pointer-events: none;
  width: 2.25rem; height: 2.25rem;
}
.sailing-boat svg { width: 100%; height: 100%; display: block; overflow: visible; }
.sailing-boat .hull { fill: var(--card); stroke: var(--espresso); stroke-width: 1.5;
                      stroke-linejoin: round; stroke-linecap: round; }
.sailing-boat .mast { fill: none; stroke: var(--espresso); stroke-width: 1.3; stroke-linecap: round; }
.sailing-boat .sail {
  fill: var(--red-soft); stroke: var(--red); stroke-width: 1.5; stroke-linejoin: round;
  transform-origin: 12px 20px;
  animation: sail-luff 1.8s ease-in-out infinite alternate;
}
@keyframes sail-luff {
  from { transform: skewX(0deg); }
  to   { transform: skewX(-5deg); }
}

.site-footer__content {
  text-align: center; font-size: 0.8125rem; color: var(--muted); margin-top: 1.25rem;
}
.footer__line { display: block; }
.footer__line + .footer__line { margin-top: 0.3rem; }
.site-footer__content a { text-decoration: none; transition: color 0.18s ease; }
.site-footer__content a:hover { color: var(--red); text-decoration: underline; }

/* ── Motion preferences ──────────────────────────────────── */

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