/* ============================================================
   Lindsey Mardona — portfolio shared styles
   Fonts: Borel (script accents) + Inter (everything else)
   Text: #363133
   ============================================================ */

:root {
  --blush: #EFCECC;
  --blush-deep: #E7BEBB;
  --olive: #C3C98D;
  --olive-deep: #A9B471;
  --ink: #363133;              /* all text */
  --accent: #7A3F45;           /* dark rose — small accent text (WCAG-safe on pink) */
  --accent-script: #99585E;    /* rose — large cursive heading accents */
  --card: #FDFCFB;             /* card backgrounds (light, warm near-white) */
  --btn-text: #F8F8F8;         /* text/symbols on dark buttons */
  --paper: #FFFFFF;
  --gray: #EFEEEC;
  --coral: #FF4557;            /* hot-pink pop: card buttons, flowers, footer rule */
  --coral-soft: #FF6B79;
  --chip-bg: #EFCECC;          /* soft pink chips */
  --line: rgba(54, 49, 51, 0.85);
  --hair: rgba(54, 49, 51, 0.16);
  --shadow: 0 14px 34px -18px rgba(54, 49, 51, 0.45);
  --shadow-lg: 0 24px 46px -20px rgba(54, 49, 51, 0.5);
  --maxw: 1120px;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --script: 'Borel', cursive;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--sans); color: var(--ink); background: var(--blush); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: inherit; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { color: var(--ink); }

.skip-link { position: absolute; left: -999px; top: 0; background: var(--ink); color: #fff; padding: 10px 16px; z-index: 300; border-radius: 0 0 8px 0; }
.skip-link:focus { left: 0; }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 40px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------- NAV ---------------- */
.nav { background: var(--blush); padding-top: 26px; }
.nav .wrap { position: relative; }
.nav-inner { display: flex; justify-content: flex-end; align-items: center; gap: 34px; padding-bottom: 16px; }
.nav-rule { height: 0; border-bottom: 1.5px solid var(--line); margin: 0 8%; }
.nav-inner a { text-decoration: none; font-weight: 400; font-size: 1.05rem; color: var(--ink); position: relative; }
.nav-inner a[aria-current="page"] { font-weight: 600; }
.nav-inner a::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 0; height: 2px; background: var(--ink); transition: width .25s ease; }
.nav-inner a:hover::after, .nav-inner a:focus-visible::after { width: 100%; }

/* ---------------- SHARED PIECES ---------------- */
.socials { display: flex; gap: 14px; }
.socials a { width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: var(--btn-text); display: inline-flex; align-items: center; justify-content: center; transition: transform .15s ease, background .2s ease; text-decoration: none; }
.socials a:hover, .socials a:focus-visible { transform: translateY(-3px); background: #201d1e; }
.socials svg { width: 20px; height: 20px; }
.socials i { font-size: 19px; line-height: 1; color: var(--btn-text); }

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font-size: 0.78rem; font-weight: 500; padding: 5px 12px; border-radius: 999px; background: var(--chip-bg); color: var(--ink); white-space: nowrap; }

/* buttons with a left-to-right colour sweep on hover */
.pill {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  color: var(--btn-text); font-weight: 500; font-size: 1rem; padding: 12px 26px; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-script) 50%, var(--ink) 50%);
  background-size: 200% 100%; background-position: 100% 0;
  transition: background-position .45s ease, transform .15s ease;
}
.pill:hover, .pill:focus-visible { background-position: 0 0; transform: translateY(-2px); }
.pill.ghost {
  color: var(--ink); border: 1.5px solid var(--line);
  background: linear-gradient(90deg, rgba(153,88,94,0.16) 50%, transparent 50%);
  background-size: 200% 100%; background-position: 100% 0;
}
.pill.ghost:hover, .pill.ghost:focus-visible { background-position: 0 0; transform: translateY(-2px); }

/* cursive accent inside headings — rose, set apart from Inter */
.script-accent { font-family: var(--script); color: var(--accent-script); font-size: 1.15em; line-height: 1; padding: 0 0.06em; }

/* ---------------- HERO (home) ---------------- */
.hero { background: var(--blush); padding: 100px 0 78px; }
.hero-grid { display: grid; grid-template-columns: 1.02fr 1.1fr 0.86fr; gap: 48px; align-items: center; }
.hello { font-family: var(--script); font-size: clamp(3.4rem, 7.5vw, 5.4rem); line-height: 1.02; margin: 0 0 4px; }
.name { font-size: clamp(1.0rem, 2vw, 1.26rem); font-weight: 400; margin: 12px 0 8px; }
.name b { font-weight: 700; }
.roles { font-size: clamp(1.1rem, 2.6vw, 1.5rem); font-weight: 500; margin: 0; white-space: nowrap; }
.squiggle { margin: 22px 0 24px; color: var(--ink); max-width: 300px; }

.welcome { border-left: 1.5px solid var(--line); padding-left: 44px; font-size: 1.03rem; }
.welcome p { margin: 0 0 18px; }
.welcome-btns { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin: 4px 0 18px; }
.welcome .lovely { margin-top: 18px; }

/* portrait — tilted rounded square + framing squares + flower accents */
.portrait { position: relative; justify-self: end; --pf: clamp(190px, 21vw, 244px); }
.portrait .frame {
  position: relative; z-index: 2; width: var(--pf); aspect-ratio: 1; border-radius: 28px; overflow: hidden;
  box-shadow: var(--shadow); transform: rotate(-5deg); transition: transform .5s cubic-bezier(.34,1.56,.64,1);
  background: linear-gradient(135deg, var(--olive), var(--coral-soft)); display: flex; align-items: center; justify-content: center;
}
.portrait:hover .frame { transform: rotate(-1.5deg); }
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.portrait .initials { font-family: var(--script); font-size: 3rem; color: #fff; }
.portrait .frame-bg { position: absolute; top: 0; left: 0; width: var(--pf); aspect-ratio: 1; border-radius: 28px; z-index: 1; }
.portrait .frame-bg.bg1 { background: rgba(195,201,141,0.55); transform: rotate(-13deg) translate(-18px,-6px); }
.portrait .frame-bg.bg2 { border: 2.5px solid var(--coral); transform: rotate(5deg) translate(18px,18px); }
.portrait .accent { position: absolute; z-index: 3; transition: transform .45s cubic-bezier(.34,1.56,.64,1); pointer-events: none; }
.portrait .accent.f1 { top: -12px; left: -16px; width: 46px; }
.portrait .accent.f2 { bottom: -20px; right: -12px; width: 54px; }
.portrait .accent.sq { top: 36%; right: -24px; width: 30px; }
.portrait:hover .accent.f1 { transform: rotate(-24deg) scale(1.12); }
.portrait:hover .accent.f2 { transform: rotate(22deg) scale(1.12); }
.portrait:hover .accent.sq { transform: rotate(18deg) scale(1.12); }

/* ---------------- WORKIN' LATE (olive) ---------------- */
.late { background: var(--olive); padding: 60px 0 72px; }
.section-quote { font-style: italic; font-weight: 600; font-size: clamp(1.6rem, 4vw, 2.5rem); margin: 0 0 24px; letter-spacing: -0.01em; }
.late-top { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; margin-bottom: 50px; }
.pill-row { display: flex; flex-wrap: wrap; gap: 18px; }
.currently { border-left: 1.5px solid var(--line); padding-left: 44px; }
.currently h2 { font-size: 1.1rem; font-weight: 600; margin: 0 0 10px; }
.currently ul { margin: 0; padding-left: 20px; }
.currently li { margin-bottom: 8px; font-size: 1.0rem; }

/* project grid + cards */
.projects { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.proj { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: var(--card); border-radius: 10px; padding: 12px 12px 16px; box-shadow: var(--shadow); transition: transform .22s ease, box-shadow .22s ease; }
.proj:hover, .proj:focus-visible { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.proj-thumb { aspect-ratio: 16 / 10; border-radius: 6px; overflow: hidden; position: relative; }
.proj-thumb .ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #fff; padding: 20px; background: radial-gradient(120% 120% at 50% 0%, #3a3f63 0%, #23253f 72%); transition: transform .35s ease; }
.proj-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.proj:hover .proj-thumb .ph, .proj:hover .proj-thumb img { transform: scale(1.06); }
.proj-thumb .plabel { font-weight: 600; font-size: 1.02rem; }
.proj-thumb .psub { font-size: .78rem; opacity: .82; margin-top: 4px; }
.proj-body { padding: 14px 6px 2px; }
.proj-body h3 { margin: 0 0 5px; font-size: 1.12rem; font-weight: 600; }
.proj-body .desc { margin: 0 0 14px; font-size: .93rem; color: rgba(54,49,51,0.82); }
.proj-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.card-go { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; background: var(--coral); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; font-weight: 700; box-shadow: var(--shadow); transition: transform .2s ease, background .2s ease; }
.proj:hover .card-go { transform: translateX(3px); background: #e6394b; }

/* ---------------- SINGER (blush) ---------------- */
.singer { background: var(--blush); padding: 62px 0; }
.singer-head { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-bottom: 18px; }
.singer-head .section-quote { margin: 0; }
.singer-head .socials { margin: 0; }
.singer p { font-size: 1.06rem; max-width: 640px; margin: 0; }
.singer p a { text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }
.singer p a:hover { color: var(--accent); }

/* ---------------- FOOTER ---------------- */
footer { background: var(--gray); border-top: 5px solid var(--coral); padding: 26px 0 30px; }
.foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; }
.to-top { display: inline-flex; align-items: center; gap: 15px; text-decoration: none; color: var(--ink); font-style: italic; }
.to-top .circle { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--ink); display: inline-flex; align-items: center; justify-content: center; }
.to-top:hover .circle { background: var(--ink); color: var(--gray); }
.quick { text-align: center; font-size: .94rem; }
.quick .label { font-weight: 600; margin-right: 6px; }
.quick a { text-decoration: none; margin: 0 6px; }
.quick a:hover { text-decoration: underline; }
.foot-email { text-align: right; }
.foot-email a { text-decoration: underline; text-underline-offset: 3px; color: var(--ink); font-size: .93rem; }

/* ============================================================ INTERIOR PAGES ============================================================ */
.page-hero { background: var(--blush); padding: 44px 0 54px; }
.page-hero .eyebrow { font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin: 0 0 10px; }
.page-hero h1 { font-size: clamp(2.2rem, 6vw, 3.4rem); margin: 0 0 12px; letter-spacing: -0.02em; }
.page-hero .lead { font-size: 1.1rem; max-width: 640px; margin: 0; color: rgba(54,49,51,0.88); }
.section { padding: 56px 0; }
.section.paper { background: var(--paper); }
.section.olive { background: var(--olive); }
.section.gray { background: var(--gray); }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }

/* ---- RESUME ---- */
.resume { background: var(--paper); }
.resume-wrap { max-width: 900px; }
.res-block { margin-bottom: 44px; }
.res-block > h2 { font-size: 1.4rem; margin: 0 0 6px; letter-spacing: -0.01em; display: inline-block; padding-bottom: 6px; border-bottom: 3px solid var(--accent); }
.res-item { margin: 22px 0; }
.res-head { display: grid; grid-template-columns: 1fr auto; gap: 6px 28px; align-items: baseline; }
.res-head .role { font-weight: 700; font-size: 1.06rem; }
.res-head .org { font-weight: 600; }
.res-head .meta { font-size: .9rem; color: rgba(54,49,51,0.7); text-align: right; white-space: nowrap; }
.res-head .meta .loc { margin-left: 16px; }
.res-item ul { margin: 8px 0 0; padding-left: 20px; }
.res-item li { margin-bottom: 5px; font-size: .97rem; }
.res-sub { font-size: .95rem; color: rgba(54,49,51,0.82); margin: 2px 0 0; }
.edu-item { margin: 16px 0; }
.edu-item .deg { font-weight: 600; }
.skills-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.skills-groups h3 { font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); margin: 0 0 10px; }
.resume-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }

/* ---- CASE STUDY ---- */
.cs-hero { background: var(--blush); padding: 48px 0 40px; }
.cs-hero h1 { font-size: clamp(2.1rem, 5.5vw, 3.2rem); margin: 6px 0 14px; letter-spacing: -0.02em; }
.cs-hero .cs-tagline { font-size: 1.12rem; max-width: 720px; margin: 0 0 22px; color: rgba(54,49,51,0.9); }
.cs-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px 26px; border-top: 1.5px solid var(--hair); padding-top: 22px; max-width: 820px; }
.cs-meta .k { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); font-weight: 700; margin-bottom: 3px; }
.cs-meta .v { font-size: .95rem; }
.cs-body { background: var(--paper); padding: 56px 0; }
.cs-body .wrap { max-width: 760px; }
.cs-body h2 { font-size: 1.55rem; margin: 40px 0 12px; letter-spacing: -0.01em; }
.cs-body h2:first-child { margin-top: 0; }
.cs-body h3 { font-size: 1.12rem; margin: 26px 0 8px; }
.cs-body p { font-size: 1.04rem; margin: 0 0 18px; color: rgba(54,49,51,0.92); }
.cs-body ul { margin: 0 0 18px; padding-left: 22px; }
.cs-body li { margin-bottom: 8px; font-size: 1.02rem; }
.cs-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px; margin: 28px 0; }
.cs-stat { background: var(--blush); border-radius: 12px; padding: 20px; }
.cs-stat .n { font-size: 1.9rem; font-weight: 700; display: block; line-height: 1.1; }
.cs-stat .l { font-size: .86rem; color: rgba(54,49,51,0.8); }
.cs-callout { background: var(--olive); border-radius: 12px; padding: 22px 24px; margin: 26px 0; font-size: 1.04rem; }
.cs-back { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 500; margin-bottom: 10px; }
.cs-back:hover { color: var(--accent); }

/* ---- PROJECTS grid ---- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }

/* ---- GALLERY (Pinterest-style masonry) ---- */
.masonry { columns: 3; column-gap: 20px; }
.tile { break-inside: avoid; margin: 0 0 20px; display: block; position: relative; border-radius: 12px; overflow: hidden; text-decoration: none; color: inherit; box-shadow: var(--shadow); background: var(--card); cursor: pointer; }
.tile .tile-img { width: 100%; display: block; transition: transform .4s ease; -webkit-user-drag: none; user-select: none; }
.tile .tile-ph { width: 100%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; text-align: center; padding: 22px; background: radial-gradient(120% 120% at 50% 0%, #3a3f63 0%, #23253f 72%); transition: transform .4s ease; }
.tile:hover .tile-img, .tile:hover .tile-ph { transform: scale(1.05); }
.tile .tile-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 18px; color: #fff; opacity: 0; background: linear-gradient(to top, rgba(20,18,19,0.85) 0%, rgba(20,18,19,0.15) 55%, transparent 100%); transition: opacity .3s ease; }
.tile:hover .tile-overlay, .tile:focus-visible .tile-overlay { opacity: 1; }
.tile .tile-overlay .t-title { font-weight: 700; font-size: 1.02rem; }
.tile .tile-overlay .t-for { font-size: .84rem; opacity: .92; margin-top: 2px; }
.tile .badge { position: absolute; top: 12px; left: 12px; background: rgba(20,18,19,0.7); color:#fff; font-size:.7rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; padding:4px 9px; border-radius:999px; z-index:3; }
/* corner indicator: external-link vs open-gallery */
.tile .tile-flag { position: absolute; top: 12px; right: 12px; z-index: 4; width: 30px; height: 30px; border-radius: 8px; background: rgba(20,18,19,0.72); color: #fff; display: flex; align-items: center; justify-content: center; }
.tile .tile-flag svg { width: 15px; height: 15px; }

/* ---- LIGHTBOX / CAROUSEL ---- */
.lightbox { position: fixed; inset: 0; background: rgba(20,18,19,0.92); display: none; align-items: center; justify-content: center; z-index: 1000; padding: 34px; }
.lightbox.open { display: flex; }
.lb-fig { margin: 0; max-width: min(920px, 92vw); display: flex; flex-direction: column; align-items: center; gap: 14px; }
.lb-fig img { max-width: 100%; max-height: 78vh; object-fit: contain; border-radius: 10px; box-shadow: var(--shadow-lg); }
.lb-fig figcaption { color: #fff; font-size: .96rem; text-align: center; }
.lb-close, .lb-prev, .lb-next { position: absolute; background: rgba(255,255,255,0.12); color: #fff; border: none; cursor: pointer; border-radius: 50%; width: 48px; height: 48px; font-size: 1.7rem; line-height: 1; display: flex; align-items: center; justify-content: center; }
.lb-close:hover, .lb-prev:hover, .lb-next:hover { background: rgba(255,255,255,0.26); }
.lb-close { top: 20px; right: 20px; }
.lb-prev { left: 18px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 18px; top: 50%; transform: translateY(-50%); }
.lb-count { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); color: #fff; font-size: .85rem; opacity: .8; }

/* ============================================================ ANIMATIONS ============================================================ */
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pushIn { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
@keyframes draw { from { stroke-dashoffset: 340; } to { stroke-dashoffset: 0; } }
@keyframes revealUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }

/* home hero load-in */
.hero .hello { animation: fadeUp .65s ease both; animation-delay: .05s; }
.hero .name  { animation: fadeUp .65s ease both; animation-delay: .22s; }
.hero .roles { animation: fadeUp .65s ease both; animation-delay: .38s; }
.hero .squiggle path { stroke-dasharray: 340; stroke-dashoffset: 0; animation: draw 1.1s ease .5s both; }
.hero .socials { animation: fadeUp .65s ease both; animation-delay: .78s; }
.hero .welcome { animation: fadeIn .8s ease both; animation-delay: .5s; }
.hero .portrait { animation: fadeIn .8s ease both; animation-delay: .35s; }

/* interior header: print pushes in, cursive fades in separately */
.page-hero .eyebrow { animation: fadeUp .55s ease both; }
.page-hero h1 .h-print { display: inline-block; animation: pushIn .6s ease both; animation-delay: .12s; }
.page-hero h1 .script-accent { display: inline-block; animation: fadeUp .7s ease both; animation-delay: .42s; }
.page-hero .lead { animation: fadeUp .6s ease both; animation-delay: .58s; }
.cs-hero .h-print { display: inline-block; animation: pushIn .6s ease both; animation-delay: .1s; }
.cs-hero .cs-tagline { animation: fadeUp .6s ease both; animation-delay: .34s; }
.cs-hero .cs-meta { animation: fadeUp .6s ease both; animation-delay: .5s; }

/* scroll reveal for cards/tiles (only hide when JS is present) */
.js .reveal { opacity: 0; }
.reveal.in { opacity: 1; animation: revealUp .55s ease; }

/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 920px) {
  .wrap { padding: 0 24px; }
  .hero { padding: 60px 0 60px; }
  .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .welcome { border-left: none; padding-left: 0; border-top: 1.5px solid var(--hair); padding-top: 26px; }
  .portrait { justify-self: start; order: -1; }
  .late-top { grid-template-columns: 1fr; gap: 30px; }
  .currently { border-left: none; padding-left: 0; border-top: 1.5px solid rgba(54,49,51,0.25); padding-top: 24px; }
  .projects, .cols, .grid-3, .skills-groups { grid-template-columns: 1fr; gap: 26px; }
  .masonry { columns: 2; }
  .foot { grid-template-columns: 1fr; text-align: center; gap: 16px; }
  .foot-email { text-align: center; }
  .quick { order: 3; }
  .nav-rule { margin: 0 4%; }
  .nav-inner { flex-wrap: wrap; gap: 18px 22px; }
}
@media (max-width: 600px) {
  .nav-inner { justify-content: center; gap: 16px 20px; }
  .nav-inner a { font-size: 1rem; }
  .res-head { grid-template-columns: 1fr; }
  .res-head .meta { text-align: left; white-space: normal; }
  .res-head .meta .loc { margin-left: 0; display: block; }
  .masonry { columns: 1; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .hero .squiggle path { stroke-dashoffset: 0 !important; }
  .reveal { opacity: 1 !important; }
}

/* ============================================================ ROUND 5 ============================================================ */
/* fix reveal jitter: hold the hidden 'from' state during the stagger delay */
.reveal.in { opacity: 1; animation: revealUp .55s ease backwards; }

/* singer quote must match "i'm workin' late" (beat the .singer p rule) */
.singer-head .section-quote { font-size: clamp(1.6rem, 4vw, 2.5rem); margin: 0; }

/* card arrow: white FontAwesome arrow on hot pink */
.card-go { color: var(--btn-text); }
.card-go i { font-size: .95rem; line-height: 1; }

/* hello sits closer to the name */
.hello { margin: 0; line-height: .96; }
.name { margin: 4px 0 8px; }

/* olive section: design-gallery ghost button sweeps transparent green */
.late .pill.ghost { background: linear-gradient(90deg, rgba(63,90,36,0.22) 50%, transparent 50%); background-size: 200% 100%; background-position: 100% 0; }

/* portrait framing squares: white outline + react on hover */
.portrait .frame-bg { transition: transform .5s cubic-bezier(.34,1.56,.64,1); }
.portrait .frame-bg.bg2 { border-color: #fff; }
.portrait:hover .frame-bg.bg1 { transform: rotate(-19deg) translate(-26px,-12px); }
.portrait:hover .frame-bg.bg2 { transform: rotate(10deg) translate(26px,24px); }

/* keep welcome "here." and its arrow together */
.welcome .nowrap { white-space: nowrap; }

/* resume: wider column + inline education meta */
.resume-wrap { max-width: 1040px; }

/* about: quick-fact labels lift on hover */
.about-facts .chip { transition: transform .18s ease, background .18s ease; }
.about-facts .chip:hover { transform: translateY(-4px); background: var(--blush-deep); }

/* case-study impact cards (text variant) */
.cs-stat.text .n { font-size: 1.08rem; line-height: 1.25; }

/* phone mockups (ginkgo project page) */
.phones { display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap; gap: 20px; }
.phone { width: 208px; height: 450px; background: #1b1b1b; border-radius: 34px; padding: 9px; box-shadow: var(--shadow-lg); position: relative; }
.phone::before { content: ""; position: absolute; top: 15px; left: 50%; transform: translateX(-50%); width: 54px; height: 7px; background: #000; border-radius: 5px; z-index: 2; }
.phone img { width: 100%; height: 100%; object-fit: cover; border-radius: 26px; }
.phone:nth-child(1){ transform: rotate(-4deg); }
.phone:nth-child(3){ transform: rotate(4deg); }

/* project hero image */
.cs-hero-img { max-width: 820px; margin: 22px 0 0; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); }
.cs-hero-img img { width: 100%; display: block; }

/* about: autoscrolling photo gallery */
.gal-wrap { position: relative; margin: 8px 0 10px; }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.marquee-track { display: flex; gap: 18px; width: max-content; animation: scrollx 46s linear infinite; }
/* only the welcome-bar marquee pauses on band hover; the galleries pause per-photo in JS */
.hello-bar .marquee:hover .marquee-track, .hello-bar .marquee:focus-within .marquee-track { animation-play-state: paused; }
.marquee img { height: 300px; width: auto; border-radius: 14px; box-shadow: var(--shadow); -webkit-user-drag: none; user-select: none; }
@keyframes scrollx { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.gal-accent { position: absolute; z-index: 3; pointer-events: none; transition: transform .5s cubic-bezier(.34,1.56,.64,1); }
.gal-accent.a1 { top: -18px; left: 3%; width: 40px; }
.gal-accent.a2 { bottom: -16px; right: 8%; width: 46px; }
.gal-accent.a3 { top: -14px; right: 24%; width: 30px; }
.gal-wrap:hover .gal-accent.a1 { transform: rotate(-16deg) scale(1.12); }
.gal-wrap:hover .gal-accent.a2 { transform: rotate(18deg) scale(1.12); }
.gal-wrap:hover .gal-accent.a3 { transform: rotate(12deg) scale(1.12); }

/* dog gallery */
.dog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; }
.dog-tile { aspect-ratio: 4/5; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); background: var(--card); position: relative; }
.dog-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.dog-tile:hover img { transform: scale(1.05); }
.dog-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 18px; color: var(--mocha, #7a6a55); background: repeating-linear-gradient(45deg, #f3efe6, #f3efe6 12px, #eee7da 12px, #eee7da 24px); font-size: .9rem; color: rgba(54,49,51,.6); }

/* footer whimsy: a little corgi peeking over the top */
footer { position: relative; }
.footer-corgi { position: absolute; right: 6%; top: -46px; width: 76px; z-index: 5; transform-origin: bottom center; animation: corgi-bob 3.4s ease-in-out infinite; }
.footer-corgi:hover { animation: corgi-wiggle .5s ease-in-out; }
@keyframes corgi-bob { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-5px) rotate(-2deg); } }
@keyframes corgi-wiggle { 0%,100%{transform:rotate(0);} 25%{transform:rotate(-7deg);} 75%{transform:rotate(7deg);} }

@media (max-width: 600px) { .footer-corgi { width: 60px; top: -38px; right: 8%; } .marquee img { height: 220px; } }
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none !important; }
  .footer-corgi { animation: none !important; }
}

/* ============================================================ ROUND 6 — fonts, plum, fixes ============================================================ */
:root {
  --serif: 'DM Serif Display', Georgia, 'Times New Roman', serif;   /* headers */
  --body: 'Familjen Grotesk', -apple-system, BlinkMacSystemFont, sans-serif; /* paragraphs, lists */
  --ui: 'Karla', -apple-system, BlinkMacSystemFont, sans-serif;     /* nav, labels, buttons */
  --read: 'Public Sans', -apple-system, BlinkMacSystemFont, sans-serif; /* case-study reading */
  --sans: var(--body);
  --plum: #63285C;
  --accent: #63285C;          /* was rose */
  --accent-script: #63285C;   /* cursive accent -> plum */
  --coral: #63285C;           /* hot pink #FF4557 retired -> plum */
}
body { font-family: var(--body); }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; }
.section-quote { font-family: var(--serif); font-weight: 400; font-style: italic; }
.hello { font-family: var(--script); color: var(--plum); }
.script-accent { font-family: var(--script); color: var(--plum); }
.hero .squiggle { color: var(--plum); }
.nav-inner a, .pill, .chip, .page-hero .eyebrow, .cs-meta .k, .skills-groups h3,
.quick, .to-top, .res-head .meta, .currently, .badge, .tile-flag,
.proj-thumb .plabel, .proj-thumb .psub, .res-block > h2, .cs-back { font-family: var(--ui); }
.res-block > h2 { font-weight: 700; }
.cs-body p, .cs-body li { font-family: var(--read); }

/* tighter hero rhythm (per design-doc 1a) */
.hello { margin: 0; line-height: .9; }
.name { margin: 8px 0 0; }
.roles { margin: 2px 0 0; }
.hero .squiggle { margin: 14px 0 16px; }

/* project cards: fixed alignment so chips/labels line up */
.proj { height: 100%; }
.proj-body { display: flex; flex-direction: column; flex: 1; }
.proj-body .chip-row, .proj-body .proj-foot { margin-top: auto; }
.proj-body .desc { min-height: 3.2em; }

/* marquee: seamless (margin instead of gap so -50% aligns exactly) */
.marquee-track { gap: 0; }
.marquee img { margin-right: 18px; }

/* home featured case-study text card */
.cs-card { background: #F7F5EF; border-radius: 12px; padding: 24px 26px; display: grid; grid-template-columns: 1.6fr 1fr; gap: 24px; margin-top: 30px; box-shadow: var(--shadow); }
.cs-card .eyebrow { font-family: var(--ui); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--plum); margin: 0 0 8px; }
.cs-card h3 { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; line-height: 1.1; margin: 0 0 10px; }
.cs-card p { font-family: var(--read); font-size: .98rem; line-height: 1.75; margin: 0; color: rgba(54,49,51,.9); }
.cs-card .pull { border-left: 2px solid var(--plum); padding-left: 14px; font-family: var(--serif); font-style: italic; font-size: 1.05rem; line-height: 1.4; color: var(--plum); align-self: center; }
@media (max-width: 780px){ .cs-card { grid-template-columns: 1fr; } }

/* about profile photo (rectangle, defaults un-rotated) */
.about-photo { position: relative; width: fit-content; margin: 0 0 26px; }
.about-photo .frame2 { width: clamp(180px, 60%, 230px); aspect-ratio: 4/5; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow); transform: rotate(0deg); transition: transform .5s cubic-bezier(.34,1.56,.64,1); background: linear-gradient(135deg, var(--olive), var(--plum)); }
.about-photo .frame2 img { width: 100%; height: 100%; object-fit: cover; }
.about-photo:hover .frame2 { transform: rotate(-3deg); }
.about-photo .frame-bg { position: absolute; top: 0; left: 0; width: clamp(180px, 60%, 230px); aspect-ratio: 4/5; border-radius: 20px; z-index: -1; transition: transform .5s cubic-bezier(.34,1.56,.64,1); }
.about-photo .frame-bg.b1 { background: rgba(195,201,141,.55); transform: rotate(-8deg) translate(-14px,-6px); }
.about-photo .frame-bg.b2 { border: 2.5px solid #fff; transform: rotate(6deg) translate(14px,12px); }
.about-photo:hover .frame-bg.b1 { transform: rotate(-13deg) translate(-20px,-10px); }
.about-photo:hover .frame-bg.b2 { transform: rotate(11deg) translate(20px,18px); }
.about-photo .accent { position: absolute; z-index: 2; transition: transform .45s cubic-bezier(.34,1.56,.64,1); }
.about-photo .accent.f1 { top: -16px; left: -14px; width: 40px; }
.about-photo .accent.f2 { bottom: -14px; right: -10px; width: 46px; }
.about-photo:hover .accent.f1 { transform: rotate(-20deg) scale(1.12); }
.about-photo:hover .accent.f2 { transform: rotate(18deg) scale(1.12); }

/* floating gallery accents drift */
@keyframes drift { 0%,100% { transform: translate(0,0) rotate(0deg); } 50% { transform: translate(6px,-10px) rotate(8deg); } }
.gal-accent { animation: drift 6s ease-in-out infinite; }
.gal-accent.a2 { animation-duration: 7.5s; }
.gal-accent.a3 { animation-duration: 5.5s; }

/* dog gallery uses real images */
.dog-tile.has-img .dog-ph { display: none; }

/* simplified footer */
.foot { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.to-top .up { font-size: 1.05rem; margin-right: 4px; }
.quick .label { font-weight: 700; }

/* CASE STUDY — reference styling with new fonts */
.cs-body .wrap { max-width: 1040px; }
.cs-read { max-width: 74ch; }
.cs-body h2 { font-family: var(--serif); font-weight: 400; }
.cs-body h2::before { content: ""; display: block; width: 46px; height: 4px; background: var(--plum); border-radius: 2px; margin-bottom: .45em; }
.cs-body ul { list-style: none; padding-left: 0; }
.cs-body li { position: relative; padding-left: 26px; }
.cs-body li::before { content: ""; position: absolute; left: 4px; top: .72em; width: 8px; height: 8px; border-radius: 50%; background: var(--olive-deep); }
.cs-body strong { font-weight: 700; color: var(--ink); }
.figph { background: var(--gray); border: 1.5px dashed #c9c6bd; border-radius: 12px; padding: 38px 20px; text-align: center; color: #8a8578; font-family: var(--ui); font-size: .9rem; margin: 1.6em 0; }
.cs-snapshot { background: var(--olive); }
.cs-snapshot .cs-stat { background: rgba(255,255,255,.6); }

/* ============================================================ ROUND 7 ============================================================ */
/* all buttons: default plum, sweep to hot pink (like the cards) */
.pill { background: linear-gradient(90deg, #FF4557 50%, var(--plum) 50%); background-size: 200% 100%; background-position: 100% 0; }
.pill:hover, .pill:focus-visible { background-position: 0 0; }
.pill.ghost { color: var(--ink); border: 1.5px solid var(--line); background: linear-gradient(90deg, rgba(255,69,87,0.16) 50%, transparent 50%); background-size: 200% 100%; background-position: 100% 0; }
.late .pill.ghost { background: linear-gradient(90deg, rgba(63,90,36,0.22) 50%, transparent 50%); background-size: 200% 100%; background-position: 100% 0; }
.card-go { background: var(--plum); }
.proj:hover .card-go { background: #FF4557; }

/* about photo: fill the column + show framing squares */
.about-photo { width: 100%; position: relative; isolation: isolate; margin-bottom: 34px; }
.about-photo .frame2 { width: 100%; position: relative; z-index: 1; }
.about-photo .frame-bg { width: 100%; z-index: 0; }

/* extra floating accents (2 flowers + 3 squares) */
.gal-accent.a4 { top: -12px; left: 42%; width: 32px; }
.gal-accent.a5 { bottom: -18px; right: 33%; width: 38px; }
.gal-accent.a4 { animation-duration: 6.8s; }
.gal-accent.a5 { animation-duration: 5.2s; }

/* second marquee (dog gallery) scrolls the other way */
.marquee.rev .marquee-track { animation-direction: reverse; }

/* ---- walking pixel corgi along the footer ---- */
footer { overflow: hidden; padding-top: 46px; }
.corgi-walk { position: absolute; top: 5px; left: 0; z-index: 6; width: 54px; animation: walkAcross 15s linear infinite; }
.corgi-bob { animation: bob .3s ease-in-out infinite; }
@keyframes walkAcross { from { transform: translateX(-72px); } to { transform: translateX(calc(100vw + 30px)); } }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
.corgi-walk .legs-b { opacity: 0; }
@keyframes legA { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }
@keyframes legB { 0%,49% { opacity: 0; } 50%,100% { opacity: 1; } }
.corgi-walk .legs-a { animation: legA .3s steps(1) infinite; }
.corgi-walk .legs-b { animation: legB .3s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) {
  .corgi-walk { animation: none; left: 16px; }
  .corgi-bob, .corgi-walk .legs-a, .corgi-walk .legs-b { animation: none; }
}

/* ============================================================ ROUND 8 ============================================================ */
html, body { overflow-x: clip; }

/* buttons: default plum, hover a slightly LIGHTER plum (no more hot pink) */
.pill { background: linear-gradient(90deg, #8a4a80 50%, var(--plum) 50%); background-size: 200% 100%; background-position: 100% 0; }
.pill:hover, .pill:focus-visible { background-position: 0 0; }
.card-go { background: var(--plum); }
.proj:hover .card-go { background: #8a4a80; }
/* outlined buttons: plum text + border, hover fills a light gray */
.pill.ghost, .late .pill.ghost { color: var(--plum); border: 1.5px solid var(--plum); background: linear-gradient(90deg, rgba(54,49,51,0.10) 50%, transparent 50%); background-size: 200% 100%; background-position: 100% 0; }
.pill.ghost:hover, .pill.ghost:focus-visible, .late .pill.ghost:hover, .late .pill.ghost:focus-visible { background-position: 0 0; }

/* bigger project-card titles */
.proj-body h3 { font-size: 1.42rem; line-height: 1.12; }

/* hero: tighter stack + smaller, un-bold roles */
.name { margin: 4px 0 0; }
.roles { font-size: clamp(.92rem, 1.9vw, 1.1rem); font-weight: 400; margin: 1px 0 0; white-space: nowrap; }
.welcome p:first-of-type { margin-bottom: 30px; }

/* marquee: truly seamless (global img max-width was breaking track width) */
.marquee img { max-width: none; width: auto; height: 300px; }

/* about: keep left-column text above the photo's framing squares */
.section.paper { position: relative; }
.section.paper .cols { position: relative; z-index: 1; }
.section.paper .cols > div:first-child { position: relative; z-index: 2; }

/* singer social icons: right-align to the container edge */
.singer-head { justify-content: space-between; }

/* extra life-gallery accent */
.gal-accent.a6 { top: 44%; left: 19%; width: 30px; animation-duration: 6.2s; }

/* falling petals over the About intro */
.petal-field { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.petal { position: absolute; top: -26px; width: 13px; height: 15px; opacity: 0; animation: petalfall linear infinite; }
.petal svg { width: 100%; height: 100%; display: block; }
@keyframes petalfall {
  0%   { transform: translateY(-26px) translateX(0) rotate(0deg); opacity: 0; }
  12%  { opacity: .5; }
  85%  { opacity: .5; }
  100% { transform: translateY(var(--pf,820px)) translateX(var(--pd,40px)) rotate(320deg); opacity: 0; }
}

/* corgi walks ON TOP of the plum line above the footer */
footer { overflow: visible; padding-top: 30px; }
.corgi-walk { top: -32px; }

@media (prefers-reduced-motion: reduce) { .petal { display: none; } }

/* ============================================================ ROUND 9 ============================================================ */
/* social icon circles -> plum */
.socials a { background: var(--plum); }
.socials a:hover, .socials a:focus-visible { background: #8a4a80; }

/* consistent title weight across projects + case studies */
.proj-body h3, .cs-card h3, .cs-hero h1, .page-hero h1, .cs-body h2 { font-weight: 500; }

/* corgi: feet resting on the plum line + calmer walk */
.corgi-walk { top: -35px; }
.corgi-bob { animation: bob .5s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-1px); } }

/* lower the life-gallery square so it doesn't cover a photo */
.gal-accent.a6 { top: auto; bottom: -16px; left: 20%; }

/* petals a touch more visible */
@keyframes petalfall {
  0%   { transform: translateY(-26px) translateX(0) rotate(0deg); opacity: 0; }
  12%  { opacity: .62; }
  85%  { opacity: .62; }
  100% { transform: translateY(var(--pf,820px)) translateX(var(--pd,40px)) rotate(320deg); opacity: 0; }
}

/* JS drives the marquees; keep CSS anim as no-JS fallback only */
.js .marquee-track { animation: none; }

/* ============================================================ ROUND 10 — design-doc turn 3 (1,2,3,4,7,8) + fixes ============================================================ */
/* 01 · nav underline: plum wipe on hover, solid on current page */
.nav-inner a::after { background: var(--plum); }
.nav-inner a[aria-current="page"]::after { width: 100%; }

/* 02 · buttons stretch a touch on hover (+ they already plum-fill) */
.pill:hover, .pill:focus-visible { letter-spacing: .03em; }

/* 08 · inline text links: underline pushes down + plum wash on hover */
.welcome p a, .singer p a, .cs-read a, .section.paper .cols a {
  text-decoration: underline; text-decoration-color: var(--plum); text-underline-offset: 2px;
  border-radius: 3px; padding: 0 2px; transition: text-underline-offset .2s ease, background .2s ease, color .2s ease;
}
.welcome p a:hover, .singer p a:hover, .cs-read a:hover, .section.paper .cols a:hover {
  text-underline-offset: 5px; background: rgba(99,40,92,0.10); color: var(--plum);
}

/* 08 · gentle page fade-in on load */
@keyframes pagefade { from { opacity: 0; } to { opacity: 1; } }
body { animation: pagefade .18s ease both; }

/* 07 · singer-section equalizer */
.eq { display: inline-flex; align-items: flex-end; gap: 3px; height: 22px; margin-left: 8px; vertical-align: -3px; }
.eq i { width: 3px; background: var(--plum); display: inline-block; border-radius: 1px; }
.eq i:nth-child(1) { height: 8px;  animation: eq 1.1s ease-in-out infinite; }
.eq i:nth-child(2) { height: 16px; animation: eq .8s  ease-in-out infinite .15s; }
.eq i:nth-child(3) { height: 11px; animation: eq 1.3s ease-in-out infinite .3s; }
.eq i:nth-child(4) { height: 18px; animation: eq .95s ease-in-out infinite .45s; }
@keyframes eq { 0%,100% { height: 6px; } 50% { height: 20px; } }

/* petals a touch bigger */
.petal { width: 16px; height: 18px; }

@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
  .eq i { animation: none; height: 12px; }
}

/* ============================================================ ROUND 11 ============================================================ */
/* undo the buggy button stretch */
.pill:hover, .pill:focus-visible { letter-spacing: normal; }

/* chips: plum keyline instead of soft-pink fill */
.chip { background: transparent; border: 1px solid rgba(99,40,92,.42); color: var(--ink); }

/* 03 · tech chips slide up from the thumbnail edge on hover (JS moves them in) */
.proj-thumb { position: relative; }
.thumb-chips { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; padding: 14px 12px 10px; background: linear-gradient(to top, rgba(20,18,19,.85), rgba(20,18,19,0)); transform: translateY(101%); transition: transform .32s cubic-bezier(.2,.7,.3,1); }
.proj:hover .thumb-chips, .proj:focus-visible .thumb-chips { transform: translateY(0); }
.thumb-chips .chip { background: rgba(255,255,255,.18); border-color: transparent; color: #fff; font-size: .72rem; padding: 3px 9px; }

/* corgi sits fully on top of the plum line */
.corgi-walk { top: -40px; }

/* about columns: balanced, top-aligned so the bio fills its side */
.section.paper .cols { align-items: start; grid-template-columns: 1.2fr .8fr; }
.about-facts .chip { font-weight: 500; }

/* projects: visible "in progress" status + disabled (no dead links) */
.proj.disabled { opacity: .6; cursor: default; pointer-events: none; }
.status-pill { display: inline-block; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--plum); border: 1px solid rgba(99,40,92,.5); border-radius: 999px; padding: 3px 10px; margin-bottom: 9px; }

/* case study: bordered stat row, big DM Serif numbers, comfy measure */
.cs-snapshot .cs-stat { background: transparent; border: 1.5px solid rgba(99,40,92,.4); }
.cs-stat .n { font-family: var(--serif); font-weight: 500; font-size: 2rem; line-height: 1.04; }
.cs-stat.text .n { font-size: 1.85rem; }
.cs-stat .l { font-size: .82rem; margin-top: 7px; color: rgba(54,49,51,.85); }
.cs-read { max-width: 68ch; }

@media (prefers-reduced-motion: reduce) { .thumb-chips { transform: translateY(0); } }

/* ============================================================ ROUND 12 ============================================================ */
/* outlined buttons fill LIGHT PLUM on hover (not gray) */
.pill.ghost, .late .pill.ghost { color: var(--plum); border: 1.5px solid var(--plum); background: linear-gradient(90deg, rgba(99,40,92,0.13) 50%, transparent 50%); background-size: 200% 100%; background-position: 100% 0; }
.pill.ghost:hover, .pill.ghost:focus-visible, .late .pill.ghost:hover, .late .pill.ghost:focus-visible { background-position: 0 0; }

/* case study: bring back the old translucent-white stat cards (keep big numbers) */
.cs-snapshot .cs-stat { background: rgba(255,255,255,.6); border: none; }

/* ---- project cards: plum shadow + plum tag pills, drop the arrow-square, add view row + meta ---- */
.proj { box-shadow: 0 14px 34px -18px rgba(99,40,92,.4); }
.proj:hover, .proj:focus-visible { box-shadow: 0 24px 46px -18px rgba(99,40,92,.5); }
.card-go { display: none; }
.thumb-chips { background: linear-gradient(to top, rgba(99,40,92,.92), rgba(99,40,92,0)); }
.thumb-chips .chip { background: rgba(255,255,255,.22); border: none; color: #fff; }
.proj-meta { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .68rem; letter-spacing: .03em; color: rgba(54,49,51,.6); margin: 0 0 9px; }
.proj-view { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-family: var(--ui); font-weight: 600; font-size: .92rem; color: var(--plum); padding-top: 4px; }
.proj-view .arw { transition: transform .22s cubic-bezier(.2,.7,.3,1); }
.proj:hover .proj-view .arw { transform: translateX(5px); }
.proj.disabled .proj-view { display: none; }

/* ---- ABOUT: drop-cap + labeled chapters ---- */
.about-intro .dropcap { font-size: 1.12rem; }
.about-intro .dropcap::first-letter { font-family: var(--serif); font-weight: 400; font-size: 3.3em; line-height: .72; float: left; margin: .06em .1em 0 0; color: var(--plum); }
.chapter { margin: 30px 0; }
.chapter-head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 10px; }
.chapter-head .ch-num { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .72rem; letter-spacing: .14em; color: var(--plum); }
.chapter-head .ch-label { font-family: var(--serif); font-weight: 400; font-size: 1.35rem; color: var(--ink); letter-spacing: -0.01em; }
.chapter p { margin: 0 0 14px; }
.about-close { margin: 22px 0 0; }

/* ---- RESUME: two-column (section label left, content right) ---- */
.res-block { display: grid; grid-template-columns: 150px 1fr; column-gap: 34px; align-items: start; }
.res-block > h2 { grid-column: 1; margin: 0; position: sticky; top: 88px; }
.res-block > *:not(h2) { grid-column: 2; }
.res-item:first-of-type { margin-top: 0; }
.res-block .edu-item:first-of-type { margin-top: 0; }

/* ---- CASE STUDY: sticky section-progress rail ---- */
.cs-layout { display: grid; grid-template-columns: 168px 1fr; gap: 44px; align-items: start; }
.cs-rail { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 2px; font-family: var(--ui); }
.cs-rail a { text-decoration: none; color: rgba(54,49,51,.5); border-left: 2px solid rgba(99,40,92,.2); padding: 6px 0 6px 14px; font-size: .9rem; transition: color .2s ease, border-color .2s ease, font-weight .2s; }
.cs-rail a:hover { color: var(--plum); }
.cs-rail a.active { color: var(--plum); border-left-color: var(--plum); font-weight: 700; }
.cs-body .cs-layout .cs-read { max-width: 68ch; }

@media (max-width: 920px) {
  .res-block { grid-template-columns: 1fr; row-gap: 12px; }
  .res-block > h2 { position: static; }
  .cs-layout { grid-template-columns: 1fr; gap: 20px; }
  .cs-rail { position: static; flex-direction: row; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 8px; }
  .cs-rail a { border-left: none; border-bottom: 2px solid rgba(99,40,92,.2); padding: 4px 0; }
}

/* ============================================================ ROUND 13 ============================================================ */

/* cards: back to neutral gray shadow (not plum) */
.proj { box-shadow: var(--shadow); }
.proj:hover, .proj:focus-visible { box-shadow: 0 26px 50px -20px rgba(54,49,51,.5); }

/* card tag pills: readable — white pills w/ plum text on the slide-up band */
.thumb-chips { background: linear-gradient(to top, rgba(99,40,92,.95), rgba(99,40,92,0)); }
.thumb-chips .chip { background: rgba(255,255,255,.92); border: none; color: var(--plum); font-weight: 600; font-size: .72rem; padding: 4px 10px; }

/* About quick-facts: back to soft pink (cuter, more her) */
.about-facts .chip { background: var(--blush); border: none; color: var(--ink); }
.about-facts .chip:hover { background: var(--blush-deep); }

/* About: drop-cap the whole word "hi," (undo the single-letter dropcap) */
.about-intro .dropcap::first-letter { font-size: inherit; float: none; margin: 0; color: inherit; line-height: inherit; font-family: inherit; font-weight: inherit; }
.dropword { float: left; font-family: var(--serif); font-weight: 400; font-size: 3.4em; line-height: .7; color: var(--plum); margin: .05em .16em 0 0; }

/* About: closing note as its own attention band at the very bottom */
.about-outro { background: var(--blush); border-top: 1px solid var(--hair); padding: 60px 0 70px; }
.about-outro .wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.about-outro h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(1.65rem, 3.6vw, 2.15rem); line-height: 1.26; max-width: 32ch; letter-spacing: -0.01em; }
.about-outro .outro-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.about-outro .lovely { font-size: 1rem; color: rgba(54,49,51,.8); margin: 0; }

/* Home hero: tighten hello -> name, and split the welcome into two spaced lines */
.hero-left .hello { line-height: .78; margin: 0; }
.hero-left .name { margin-top: 0; }
.welcome .welcome-lead { margin: 0 0 26px; }

/* Case study: bottom "back to projects" as a plain text link (no button box) */
.cs-outro-back { display: inline-flex; align-items: center; gap: 8px; font-family: var(--ui); font-weight: 600; color: var(--plum); text-decoration: none; }
.cs-outro-back .bk { transition: transform .2s ease; }
.cs-outro-back:hover .bk { transform: translateX(-4px); }

/* ---- Résumé: inspo-styled hero panel + experience/education items ---- */
.rz-hero-grid { display: grid; grid-template-columns: 1.45fr .55fr; gap: 48px; align-items: end; }
.rz-panel { display: flex; flex-direction: column; gap: 13px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .68rem; letter-spacing: .03em; color: #3F3A35; border-left: 1px solid rgba(54,49,51,.22); padding-left: 22px; }
.rz-panel .k { display: block; color: var(--plum); font-size: .6rem; letter-spacing: .13em; text-transform: uppercase; margin-bottom: 3px; }
.res-block > h2::after { content: ''; display: block; width: 34px; height: 2px; background: var(--plum); margin-top: 8px; }
.rz-list { display: flex; flex-direction: column; gap: 26px; }
.rz-edu { padding-bottom: 20px; border-bottom: 1px solid rgba(54,49,51,.12); }
.rz-item { padding-left: 20px; border-left: 1px solid rgba(54,49,51,.16); }
.rz-item.lead { border-left: 2px solid var(--plum); }
.rz-head { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: baseline; }
.rz-title { font-family: 'Public Sans', var(--sans); font-size: 1.02rem; font-weight: 700; letter-spacing: -0.005em; }
.rz-deg { font-family: 'Public Sans', var(--sans); font-size: .92rem; color: #33302B; margin-top: 2px; }
.rz-org { font-family: 'Public Sans', var(--sans); font-size: .92rem; color: var(--plum); margin-top: 2px; }
.rz-when { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .62rem; color: #6F6960; text-align: right; white-space: nowrap; line-height: 1.55; }
.rz-bullets { margin: 12px 0 0; padding-left: 18px; font-family: 'Public Sans', var(--sans); font-size: .92rem; line-height: 1.65; color: #33302B; display: flex; flex-direction: column; gap: 7px; }
.rz-bullets li { text-wrap: pretty; }
.rz-note { font-family: 'Public Sans', var(--sans); font-size: .9rem; line-height: 1.6; color: #33302B; margin: 5px 0 0; max-width: 66ch; }
.rz-sub { font-family: 'Public Sans', var(--sans); font-size: .86rem; color: rgba(54,49,51,.72); margin-top: 6px; }
.rz-more { display: inline-block; margin-top: 12px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .66rem; text-decoration: none; color: var(--plum); border-bottom: 1px solid rgba(99,40,92,.4); }
.rz-more:hover { border-bottom-color: var(--plum); }
.rz-cta { background: var(--blush); padding: 50px 0; }
.rz-cta-inner { display: flex; flex-wrap: wrap; gap: 22px; justify-content: space-between; align-items: center; }
.rz-cta h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 3vw, 1.95rem); line-height: 1.3; max-width: 30ch; letter-spacing: -0.01em; }
.rz-cta-btns { display: flex; gap: 12px; flex-wrap: wrap; }

@media (max-width: 760px) {
  .rz-hero-grid { grid-template-columns: 1fr; gap: 26px; align-items: start; }
  .rz-panel { border-left: none; padding-left: 0; border-top: 1px solid rgba(54,49,51,.16); padding-top: 20px; }
  .rz-head { grid-template-columns: 1fr; gap: 4px; }
  .rz-when { text-align: left; }
}

/* ============================================================ ROUND 14 ============================================================ */

/* home hero: halve the hello -> name gap, and more air before the first button */
.hero-left .hello { line-height: .72; margin: 0; }
.hero-left .name { margin-top: -0.26em; }
.welcome .welcome-btns { margin-top: 30px; }

/* ---- project cards: title row (title + status badge) and footer row (meta + view) ---- */
.proj-titlerow { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.proj-titlerow h3 { margin: 0; }
.proj-footrow { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px; }
.proj-footrow .proj-meta { margin: 0; }
.proj-footrow .proj-view { margin-top: 0; padding-top: 0; font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 500; font-size: .72rem; letter-spacing: .02em; text-transform: lowercase; }

/* status badge: hugs its text, colored dot (yellow = in progress, green = done) */
.status-pill { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; width: auto; flex: 0 0 auto; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); background: #fff; border: 1px solid rgba(54,49,51,.2); border-radius: 999px; padding: 4px 10px 4px 8px; margin: 0; white-space: nowrap; }
.status-pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #E6A817; flex: 0 0 auto; }
.status-pill.done::before { background: #6E9A4F; }

/* tag bar: solid plum strip w/ light mono-uppercase tags (slides up on hover) */
.thumb-chips { background: var(--plum); padding: 11px 14px; gap: 16px; }
.thumb-chips .chip { background: transparent; border: none; color: rgba(255,255,255,.92); font-family: 'JetBrains Mono', ui-monospace, monospace; text-transform: uppercase; letter-spacing: .09em; font-size: .62rem; font-weight: 500; padding: 0; }

/* ---- résumé: serif section headers, drop the long thick underline (keep the thin bar), pink skill pills ---- */
.res-block > h2 { font-family: var(--serif); font-weight: 400; border-bottom: none; padding-bottom: 0; }
.skills-groups .chip { background: var(--blush); border: none; color: var(--ink); }

/* ============================================================ ROUND 15 ============================================================ */

/* sticky, shrinking nav with blur + plum read-progress bar (replaces the old hot-pink strip) */
.nav { position: sticky; top: 0; z-index: 100; transition: padding .28s ease, background .28s ease, box-shadow .28s ease; }
.nav-inner { transition: padding .28s ease, gap .28s ease; }
.nav.scrolled { padding-top: 12px; background: rgba(239,206,204,.8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 6px 22px -14px rgba(54,49,51,.55); }
.nav.scrolled .nav-inner { padding-bottom: 12px; gap: 26px; }
.nav.scrolled .nav-inner a { font-size: .96rem; }
.nav-rule { transition: opacity .28s ease; }
.nav.scrolled .nav-rule { opacity: 0; }
.nav-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(99,40,92,.15); opacity: 0; transition: opacity .28s ease; z-index: 3; }
.nav.scrolled .nav-progress { opacity: 1; }
.nav-progress .bar { display: block; height: 100%; width: 0; background: var(--plum); transition: width .1s linear; }

/* résumé: bolder + bigger "now / based in / seeking" panel */
.rz-panel { font-size: .8rem; }
.rz-panel > div { font-weight: 700; color: #2B2724; }
.rz-panel .k { font-weight: 500; font-size: .64rem; }
/* résumé: bigger date / location text */
.rz-when { font-size: .72rem; line-height: 1.6; }

/* project cards: bigger tag text + consistent footer height across cards (like the desc min-height) */
.thumb-chips .chip { font-size: .7rem; }
.proj-footrow { align-items: flex-end; min-height: 2.5em; }

/* ============================================================ ROUND 16 ============================================================ */

/* résumé: "now / based in / seeking" panel — un-bold, all weight 500, a bit bigger */
.rz-panel { font-size: .85rem; }
.rz-panel > div { font-weight: 500; color: #2B2724; }
.rz-panel .k { font-weight: 500; font-size: .72rem; }
/* résumé: bump date/location text a touch more */
.rz-when { font-size: .8rem; line-height: 1.6; }

/* case study: keep JetBrains Mono ONLY on the meta titles (role/timeline/client/team/tools) */
.cs-meta .k { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .8rem; font-weight: 500; }
/* section anchors clear the sticky nav when the rail jumps to them */
.cs-read h2[id] { scroll-margin-top: 92px; }

/* whimsy: the walking corgi hops when you mouse over it */
@media (prefers-reduced-motion: no-preference) {
  .corgi-walk { cursor: pointer; }
  .corgi-walk:hover .corgi-bob { animation: corgiJump .55s cubic-bezier(.25,.85,.35,1); }
  @keyframes corgiJump { 0%,100% { transform: translateY(0); } 42% { transform: translateY(-17px); } 70% { transform: translateY(-3px); } }
}

/* ============================================================ ROUND 18 ============================================================ */
/* statistic snapshot body text a bit bigger */
.cs-stat .l { font-size: 1rem; line-height: 1.5; }

/* ============================================================ ROUND 19 ============================================================ */

/* résumé hero: buttons + panel enter with a soft fade + push-up, sequenced */
@keyframes rzUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.js .resume-actions .pill { opacity: 0; animation: rzUp .55s cubic-bezier(.2,.7,.3,1) forwards; }
.js .resume-actions .pill:nth-child(1) { animation-delay: .12s; }
.js .resume-actions .pill:nth-child(2) { animation-delay: .24s; }
.js .resume-actions .pill:nth-child(3) { animation-delay: .36s; }
.js .rz-panel { opacity: 0; animation: rzUp .55s cubic-bezier(.2,.7,.3,1) .55s forwards; }
/* blinking caret while a panel value types out */
.rz-v.typing { border-right: 2px solid var(--plum); animation: rzCaret .7s steps(1) infinite; }
@keyframes rzCaret { 50% { border-right-color: transparent; } }

/* projects: the "design gallery" lead link gets the established text-link hover */
.page-hero .lead a {
  text-decoration: underline; text-decoration-color: var(--plum); text-underline-offset: 2px;
  border-radius: 3px; padding: 0 2px; color: var(--ink);
  transition: text-underline-offset .2s ease, background .2s ease, color .2s ease;
}
.page-hero .lead a:hover, .page-hero .lead a:focus-visible {
  text-underline-offset: 5px; background: rgba(99,40,92,0.10); color: var(--plum);
}

/* case study: sticky "back to projects" pill that follows you down the page */
.cs-hero { padding-top: 12px; }
.cs-backbar { position: sticky; top: 66px; z-index: 40; padding-top: 14px; pointer-events: none; }
.cs-backbar .wrap { pointer-events: none; }
.cs-backbar .cs-back { pointer-events: auto; display: inline-flex; align-items: center; gap: 8px; margin: 0;
  background: rgba(255,255,255,.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  padding: 8px 15px; border-radius: 999px; box-shadow: 0 6px 20px -12px rgba(54,49,51,.5); color: var(--plum); font-weight: 600; }
.cs-backbar .cs-back:hover, .cs-backbar .cs-back:focus-visible { background: rgba(255,255,255,.92); color: var(--plum); }
.cs-rail { top: 130px; }

@media (prefers-reduced-motion: reduce) {
  .js .resume-actions .pill, .js .rz-panel { opacity: 1; animation: none; }
}

/* ============================================================ ROUND 20 ============================================================ */

/* about: bigger chapter labels + "quick facts"; chapter numbers to 1rem */
.chapter-head .ch-label { font-size: 1.5rem; }
.chapter-head .ch-num { font-size: 1rem; }

/* case study: back-to-projects pill is now solid plum; the live-project link is the ghost/outlined button */
.cs-backbar .cs-back { background: var(--plum); color: #fff; -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 9px 24px -12px rgba(99,40,92,.65); }
.cs-backbar .cs-back:hover, .cs-backbar .cs-back:focus-visible { background: #7a3f72; color: #fff; }

/* corgi: JS-driven one-shot hop that always finishes (no snap-to-ground when the mouse leaves) */
.corgi-walk:hover .corgi-bob { animation: bob .5s ease-in-out infinite; }
.corgi-bob.jump { animation: corgiJump .62s cubic-bezier(.25,.85,.35,1) !important; }

/* ============================================================ ROUND 22 ============================================================ */

/* footer: balanced 3-part row — return-to-top (left), quick nav (centered), email (right) */
.foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.foot .to-top { justify-self: start; }
.foot .quick { justify-self: center; }
.foot .foot-email { justify-self: end; text-align: right; }
@media (max-width: 720px) {
  .foot { grid-template-columns: 1fr; }
  .foot .to-top, .foot .quick, .foot .foot-email { justify-self: center; text-align: center; }
}

/* résumé: a bit more air above the hero buttons */
.resume-actions { margin-top: 26px; }

/* ============================================================ ROUND 23 ============================================================ */
/* home featured spotlight is now a link */
a.cs-card { text-decoration: none; color: inherit; transition: transform .2s ease, box-shadow .2s ease; }
a.cs-card:hover, a.cs-card:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.cs-card-go { display: block; margin-top: 12px; font-family: var(--ui); font-weight: 600; color: var(--plum); }
a.cs-card:hover .cs-card-go, a.cs-card:focus-visible .cs-card-go { text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================ ROUND 24 ============================================================ */
/* real figures inside case-study bodies (image + caption) */
.cs-read figure { margin: 1.9em 0; }
.cs-read figure img { width: 100%; display: block; border-radius: 12px; border: 1px solid var(--hair); box-shadow: var(--shadow); }
.cs-read figcaption { font-family: var(--ui); font-size: .82rem; color: rgba(54,49,51,.6); margin-top: 9px; text-align: center; }

/* ============================================================ ROUND 25 — mobile fixes ============================================================ */

/* stat snapshots: more air between the number and its caption.
   (.l was an inline span, so margin-top did nothing — make it a block first.) */
.cs-stat .l { display: block; margin-top: 16px; }

/* ABOUT: the intro + photo must actually collapse to one column on phones.
   ROUND 11's `.section.paper .cols` (higher specificity) had been beating the
   low-specificity mobile rule, so the layout never stacked — the intro text got
   crushed into a narrow strip and the graduation photo overflowed off-screen. */
@media (max-width: 820px) {
  .section.paper .cols { grid-template-columns: 1fr; gap: 34px; align-items: start; }
  .about-photo { width: 100%; max-width: 300px; margin-left: auto; margin-right: auto; }
}

/* touch devices: the project-card tech tags slide up on hover, which never fires
   on a phone — so pin them visible over the thumbnail there */
@media (hover: none) {
  .proj .thumb-chips { transform: translateY(0); }
}

/* reduced motion (e.g. a phone with "Reduce Motion" on): a frozen auto-marquee
   just shows 2–3 cut-off photos and looks broken. Turn it into a swipeable strip
   instead — no auto-scroll (setting respected), but the whole gallery stays reachable. */
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; -webkit-overflow-scrolling: touch; -webkit-mask-image: none; mask-image: none; }
  .marquee-track { animation: none !important; }
  .marquee-track img[aria-hidden="true"] { display: none; }
}

/* ============================================================ ROUND 26 — case-study figures ============================================================ */
/* single phone-screen mockups shouldn't stretch to the full text column */
.cs-read figure.fig-phone img { max-width: 340px; margin-left: auto; margin-right: auto; }
/* persona / journey / wireframe artifacts read best at full column width (already default) */
.cs-read figure.fig-wide img { width: 100%; }

/* ============================================================ ROUND 27 ============================================================ */
/* résumé: technical skill pills in light green (design & research stay pink) */
.skills-groups .tech-skills .chip { background: #E3E9C4; border: none; color: var(--ink); }

/* gallery captions read like the project-card tag strip: a solid plum band that
   slides up from the bottom on hover, instead of a dark gradient over a busy image */
.tile .tile-overlay {
  inset: auto 0 0 0; top: auto; height: auto;
  background: var(--plum); opacity: 1;
  transform: translateY(101%);
  transition: transform .32s cubic-bezier(.2,.7,.3,1);
  padding: 13px 16px 14px;
}
.tile:hover .tile-overlay, .tile:focus-visible .tile-overlay { transform: translateY(0); opacity: 1; }
.tile .tile-overlay .t-for { opacity: .9; }

/* corner chips (external-link / gallery flag, "animated" badge): solid plum + a
   hairline ring + shadow so they stay legible over any image */
.tile .tile-flag, .tile .badge {
  background: var(--plum);
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: 0 3px 10px rgba(20,18,19,.45);
}

/* touch devices (no hover): pin the caption band so labels are always readable */
@media (hover: none) {
  .tile .tile-overlay { transform: translateY(0); }
}

/* ============================================================ ROUND 28 — case-study "materials" link lines ============================================================ */
.cs-read .cs-materials { font-family: var(--ui); font-size: .86rem; line-height: 1.55; color: rgba(54,49,51,.72); margin: -2px 0 26px; }
.cs-read .cs-materials strong { color: var(--plum); font-weight: 600; }
/* hero link pills row wraps neatly on small screens */
.cs-hero-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

/* ============================================================ ROUND 29 ============================================================ */
/* home portrait: center it on mobile so the decorative squares/flowers don't
   trail off into empty space on the right */
@media (max-width: 920px) {
  .portrait { justify-self: center; }
}

/* about: explicit grid so the photo/facts aside sits top-right on desktop, but on
   mobile the order becomes intro line -> photo + facts -> the chapter text blobs */
.section.paper .about-grid { grid-template-columns: 1.2fr .8fr; align-items: start; }
.about-grid .about-lead { grid-column: 1; grid-row: 1; }
.about-grid .about-side { grid-column: 2; grid-row: 1 / span 2; }
.about-grid .about-chapters { grid-column: 1; grid-row: 2; }
@media (max-width: 820px) {
  .section.paper .about-grid { grid-template-columns: 1fr; row-gap: 30px; }
  .about-grid .about-lead,
  .about-grid .about-side,
  .about-grid .about-chapters { grid-column: 1; grid-row: auto; }
}

/* mobile nav: slides up out of the way while scrolling down, snaps back on scroll up */
.nav { transition: transform .32s ease, padding .28s ease, background .28s ease, box-shadow .28s ease; }
.nav.nav-hidden { transform: translateY(-100%); }

/* ============================================================ ROUND 30 — mobile case-study section bar (design 5a) ============================================================ */
/* hidden by default; only the mobile @media block below turns it on */
.cs-mobilebar, .csm-overlay, .csm-sheet { display: none; }

@media (max-width: 820px) {
  /* the merged section bar replaces the desktop back-pill + rail on phones */
  .cs-backbar { display: none; }
  .cs-body .cs-layout .cs-rail { display: none; }

  /* tier 2: the section bar — sticky, sits directly under the (auto-hiding) site nav.
     JS drives its `top` to the live nav height, or 0 once the nav has tucked away. */
  .cs-mobilebar {
    display: flex; align-items: center; gap: 8px;
    position: sticky; top: 56px; z-index: 90;
    height: 54px; padding: 0 12px;
    background: rgba(255,255,255,.93); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-top: 1px solid rgba(99,40,92,.12); border-bottom: 1px solid var(--hair);
    transition: top .3s ease;
  }

  /* back pill: full label at the top of the page, collapses to just the arrow on scroll */
  .csm-back {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 38px; padding: 0 15px; border-radius: 19px; flex: none;
    background: var(--plum); color: #fff; text-decoration: none;
    font-family: var(--ui); font-size: .84rem; white-space: nowrap; overflow: hidden;
    transition: padding .25s ease, gap .25s ease;
  }
  .csm-back .arw { flex: none; font-size: .95rem; }
  .csm-back .lbl { max-width: 150px; overflow: hidden; white-space: nowrap; transition: max-width .25s ease, opacity .18s ease; }
  .cs-mobilebar.collapsed .csm-back { padding: 0; width: 38px; gap: 0; }
  .cs-mobilebar.collapsed .csm-back .lbl { max-width: 0; opacity: 0; }

  /* section trigger: outlined, shows the current section + "n/total" */
  .csm-trigger {
    flex: 1; min-width: 0; height: 38px;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 0 12px; border: 1.5px solid rgba(99,40,92,.32); border-radius: 19px;
    background: #fff; font-family: var(--ui); font-size: .95rem; color: var(--ink); cursor: pointer;
  }
  .csm-cur { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .csm-cur .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--plum); flex: none; }
  .csm-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .csm-meta { display: flex; align-items: center; gap: 6px; flex: none; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .66rem; color: rgba(54,49,51,.55); }
  .csm-meta .caret { transition: transform .22s ease; display: inline-block; }
  .csm-trigger[aria-expanded="true"] .csm-meta .caret { transform: rotate(180deg); }

  /* the section sheet + dim backdrop */
  .csm-overlay {
    display: block; position: fixed; inset: 0; z-index: 88;
    background: rgba(20,18,19,.34); opacity: 0; pointer-events: none; transition: opacity .2s ease;
  }
  .csm-overlay.open { opacity: 1; pointer-events: auto; }
  .csm-sheet {
    display: flex; flex-direction: column; gap: 6px;
    position: fixed; left: 10px; right: 10px; top: 112px; z-index: 89;
    background: #fff; border: 1px solid var(--hair); border-radius: 16px; padding: 10px;
    box-shadow: 0 16px 34px -12px rgba(54,49,51,.5);
    transform: translateY(-8px); opacity: 0; pointer-events: none; transform-origin: top center;
    transition: transform .2s ease, opacity .2s ease, top .3s ease;
  }
  .csm-sheet.open { transform: none; opacity: 1; pointer-events: auto; }
  .csm-item {
    height: 44px; display: flex; align-items: center; justify-content: space-between;
    padding: 0 14px; border-radius: 22px; text-decoration: none;
    font-family: var(--ui); font-size: 1rem; color: var(--ink);
    border: 1px solid transparent; background: transparent;
  }
  .csm-item .tick { font-size: .82rem; color: rgba(99,40,92,.5); opacity: 0; }
  .csm-item.visited .tick { opacity: 1; }
  .csm-item.active { background: var(--plum); color: #fff; border-color: var(--plum); }
  .csm-item.active .tick { opacity: 0; }

  /* section jumps land clear of nav + bar */
  .cs-read h2[id] { scroll-margin-top: 116px; }
}

/* ============================================================ ROUND 31 — about regressions from the mobile regrid ============================================================ */
/* the intro lost its larger size when the wrapper was renamed from .about-intro */
.about-lead .dropcap { font-size: 1.12rem; }
/* desktop: kill the grid row-gap so the intro sits close to chapter 01 again
   (mobile keeps its 30px stacking gap from ROUND 29) */
@media (min-width: 821px) { .section.paper .about-grid { row-gap: 0; } }

/* ============================================================ ROUND 32 — case-study heuristic table ============================================================ */
.cs-read .heval-wrap { margin: 1.7em 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cs-read table.heval { width: 100%; border-collapse: collapse; font-family: var(--read); font-size: .92rem; min-width: 540px; }
.cs-read table.heval th { text-align: left; font-family: var(--ui); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--plum); border-bottom: 2px solid rgba(99,40,92,.32); padding: 8px 14px 8px 0; }
.cs-read table.heval td { vertical-align: top; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--hair); line-height: 1.55; color: rgba(54,49,51,.92); }
.cs-read table.heval .heu { font-weight: 700; color: var(--ink); }
.cs-read table.heval .heu .num { font-family: 'JetBrains Mono', ui-monospace, monospace; color: rgba(54,49,51,.5); font-weight: 500; margin-right: 6px; }
.cs-read table.heval .fix { color: var(--plum); font-weight: 600; }
.cs-read .sev { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 7px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .82rem; font-weight: 600; }
.cs-read .sev-1 { background: rgba(110,154,79,.22); color: #4d6f33; }
.cs-read .sev-2 { background: rgba(230,168,23,.24); color: #86610f; }
.cs-read .sev-3 { background: rgba(255,69,87,.16); color: #b3283a; }

/* ============================================================ ROUND 33 ============================================================ */
/* about: tighten the intro → chapter 01 gap (it was reading as disjointed) */
.about-lead .dropcap { margin-bottom: 4px; }
.about-chapters .chapter:first-child { margin-top: 14px; }

/* mobile case-study back pill: smooth the collapse to the arrow.
   (it was snapping because collapsed forced a fixed 38px width from auto) */
.cs-mobilebar.collapsed .csm-back { padding: 0 11px; gap: 0; width: auto; }

/* ============================================================ ROUND 34 ============================================================ */
/* resume: on mobile, stop forcing content into grid column 2 — that implicit
   second column is what made the vertical bars misalign per section */
@media (max-width: 920px) {
  .res-block > *:not(h2) { grid-column: 1; }
}

/* ============================================================ ROUND 35 ============================================================ */
/* resume mobile: more air between a section's underline and its first vertical bar */
@media (max-width: 920px) { .res-block { row-gap: 22px; } }

/* ---- project cards: tags PINNED in the white body (no hover reveal) ---- */
/* meta moves to the top-right of the title row */
.proj-titlerow { align-items: flex-start; }
.proj-titlerow .proj-meta { margin: 0; padding-top: 4px; white-space: nowrap; flex: none; }
/* status badge sits on the thumbnail so the title row is free for the meta */
.proj-thumb .proj-status { position: absolute; top: 10px; left: 10px; z-index: 3; margin: 0;
  background: rgba(255,255,255,.95); box-shadow: 0 3px 10px rgba(20,18,19,.28); }
/* footer row: tag pills (left) + view link (right), both always visible */
.proj-footrow { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px 14px; padding-top: 12px; min-height: 0; flex-wrap: wrap; }
.proj-footrow .chip-row { flex: 1 1 auto; }
.proj-footrow .proj-view { flex: none; margin: 0; }
.proj-body .desc { min-height: 0; margin-bottom: 12px; }
.proj-footrow .chip { font-size: .72rem; padding: 4px 10px; }

/* ---- gallery tiles: caption ALWAYS on, below the image (no hover reveal) ---- */
.masonry .tile { background: #fff; cursor: pointer; }
.tile .tile-caption { display: block; padding: 11px 13px 13px; }
.tile .tile-caption .t-title { display: block; font-family: var(--ui); font-weight: 700; font-size: .92rem; line-height: 1.28; color: var(--ink); }
.tile .tile-caption .t-for { display: block; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .68rem; letter-spacing: .02em; color: rgba(54,49,51,.6); margin-top: 5px; }
.tile:hover .tile-img, .tile:hover .tile-ph { transform: none; }
.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); transition: transform .2s ease, box-shadow .2s ease; }
/* destination badge: pill with an icon + where it goes */
.tile .tile-flag { top: 10px; right: 10px; width: auto; height: auto; padding: 4px 9px; border-radius: 8px; gap: 6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .66rem; letter-spacing: .02em; color: #fff; }
.tile .tile-flag .fl { line-height: 1; }

/* ============================================================ ROUND 36 ============================================================ */
/* nav pseudo-logo (JS-injected), takes you home */
.nav-inner { justify-content: space-between; }
.nav-logo { font-family: var(--serif); font-weight: 400; font-size: 1.55rem; line-height: 1; color: var(--plum); text-decoration: none; letter-spacing: .02em; margin-right: auto; transition: opacity .2s ease, font-size .28s ease; }
.nav-logo:hover, .nav-logo:focus-visible { opacity: .72; }
.nav-inner a.nav-logo::after { content: none; display: none; }
.nav.scrolled .nav-logo { font-size: 1.38rem; }

/* project-card CTAs: bigger + Karla (matching the featured "read the research" link) */
.proj-footrow .proj-view, .proj-view { font-family: var(--ui); font-weight: 600; font-size: .92rem; letter-spacing: 0; text-transform: none; }
.proj-footrow .proj-view .arw { font-size: 1em; }

/* gallery: readable caption + softer, non-mono badges */
.tile .tile-caption .t-for { font-family: var(--ui); font-size: .78rem; letter-spacing: 0; color: rgba(54,49,51,.78); }
.tile .tile-flag { background: var(--olive); color: var(--ink); border: none; font-family: var(--ui); font-weight: 600; font-size: .68rem; box-shadow: 0 2px 8px rgba(20,18,19,.22); }
.tile .badge { background: var(--blush); color: var(--ink); border: none; box-shadow: 0 2px 8px rgba(20,18,19,.22); }

/* ROUND 36 fix — logo needs the display serif (nav-link rule was overriding it) */
.nav-inner a.nav-logo { font-family: var(--serif); }

/* ============================================================ ROUND 37 ============================================================ */
/* gallery captions: tighter two-line spacing, slightly larger body */
.tile .tile-caption .t-for { font-size: .82rem; margin-top: 2px; }
/* destination pill: white at 90%, dark text; "animated" badge goes green */
.tile .tile-flag { background: rgba(255,255,255,.9); color: var(--ink); }
.tile .tile-flag svg { color: var(--ink); }
.tile .badge { background: var(--olive); color: var(--ink); }

/* pfp (mobile): the 1a "contained collage" — a bigger, centered photo with the
   flower/blob/dot collage kept inside a padded stage so nothing crops, and
   "hello," already stacks below it (never across the face) */
@media (max-width: 920px) {
  .portrait { justify-self: center; --pf: clamp(216px, 60vw, 262px); margin: 4px auto 6px; }
}

/* ============================================================ ROUND 38 — project card layout ============================================================ */
/* date/project-type meta stacks to two right-aligned lines (JS splits it), giving the title more room */
.proj-titlerow { align-items: flex-start; min-height: 3rem; }
.proj-titlerow h3 { flex: 1 1 auto; }
.proj-titlerow .proj-meta { display: inline-flex; flex-direction: column; align-items: flex-end; text-align: right; line-height: 1.35; white-space: normal; flex: 0 0 auto; padding-top: 4px; }
/* keep body height consistent so title / body / buttons line up across cards */
.proj-body .desc { min-height: 3.8rem; }
/* tags on their own row, then the CTA right-aligned with a bit of air above it */
.proj-footrow { flex-direction: column; align-items: flex-start; gap: 15px; }
.proj-footrow .chip-row { flex: 0 0 auto; }
.proj-footrow .proj-view { align-self: flex-end; }

/* ============================================================ ROUND 40 ============================================================ */
/* title vertically centers in its reserved space (a 1-line title sits mid-height,
   lining up nicely against 2-line titles); the meta stays pinned top-right */
.proj-titlerow h3 { align-self: center; }
/* date becomes a small outlined pill; project type stays as plain text below */
.proj-meta .pm-date {
  display: inline-block; padding: 2px 9px; border: 1px solid rgba(99,40,92,.42);
  border-radius: 999px; color: var(--ink); margin-bottom: 6px;
}
.proj-meta .pm-date::after { content: none; }
/* card tag pills go shaded light pink instead of outlined */
.proj .chip { background: var(--blush); border: none; color: var(--ink); }

/* ============================================================ ROUND 41 — card system rework (design-doc pass) ============================================================ */
/* -- ONE hover language everywhere: 3px lift + soft shadow, <200ms, reduced-motion safe, visible focus ring -- */
.proj, .masonry .tile, .cs-card {
  box-shadow: none;
  border: 1px solid #E7DCD3;
  transition: transform .18s ease, box-shadow .18s ease;
}
.proj:hover, .proj:focus-visible,
.masonry .tile:hover, .masonry .tile:focus-visible,
.cs-card:hover, .cs-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(99,40,92,.16);
}
.proj:focus-visible, .masonry .tile:focus-visible, .cs-card:focus-visible {
  outline: 3px solid rgba(99,40,92,.6); outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .proj, .masonry .tile, .cs-card { transition: box-shadow .18s ease; }
  .proj:hover, .proj:focus-visible,
  .masonry .tile:hover, .masonry .tile:focus-visible,
  .cs-card:hover, .cs-card:focus-visible { transform: none; }
}

/* -- project card body: fixed meta row above the title, quiet mono tags, credibility line -- */
.proj-metarow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 2px 0 9px; }
.proj-metarow .pm-type { font-family: var(--ui); font-size: .82rem; letter-spacing: .01em; color: #6E645C; }
.proj-metarow .pm-year { font-family: var(--ui); font-size: .76rem; color: #6E645C; border: 1px solid rgba(99,40,92,.32); border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
.proj-title { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; line-height: 1.22; letter-spacing: -0.01em; margin: 0 0 9px; min-height: 2.44em; }
.proj-body .desc { font-size: .93rem; line-height: 1.55; color: rgba(54,49,51,.86); margin: 0 0 12px; min-height: 0; }
.proj-metric { display: flex; align-items: center; gap: 7px; font-family: var(--ui); font-weight: 600; font-size: .8rem; color: #5C6B3E; margin: 0 0 11px; }
.proj-metric .dot { width: 6px; height: 6px; border-radius: 50%; background: #5C6B3E; display: inline-block; flex: none; }
.proj-footrow { margin-top: auto; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid #F0E7DF; flex-wrap: nowrap; }
.proj-tags { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .7rem; letter-spacing: .01em; color: #6E645C; line-height: 1.3; }
.proj-footrow .proj-view { flex: none; margin: 0; align-self: center; white-space: nowrap; }
.proj.disabled .proj-footrow { border-top: none; padding-top: 0; }

/* -- badge only when informative (e.g. "write-up coming soon"); Karla, sentence case, no dot -- */
.proj-thumb .proj-status {
  position: absolute; top: 10px; left: 10px; z-index: 3; margin: 0;
  font-family: var(--ui); font-weight: 600; font-size: .68rem; letter-spacing: .01em; text-transform: none;
  color: var(--ink); background: rgba(255,255,255,.94); border: 1px solid #E7DCD3;
  border-radius: 999px; padding: 4px 11px; box-shadow: 0 2px 10px rgba(20,18,19,.16);
}
.proj-thumb .proj-status::before { content: none; }

/* -- gallery: one destination system in the caption footer, off the artwork -- */
.tile .tile-flag, .tile .badge { display: none !important; }
.masonry .tile { background: #fff; }
.tile .tile-caption { display: block; padding: 13px 15px 14px; }
.tile .t-title { display: block; font-family: var(--ui); font-weight: 700; font-size: .95rem; line-height: 1.28; color: var(--ink); }
.tile .t-for { display: block; font-family: var(--ui); font-size: .82rem; color: #6E645C; margin-top: 3px; line-height: 1.42; }
.tile-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid #F0E7DF; }
.tile-foot .t-kind { font-family: var(--ui); font-size: .75rem; letter-spacing: .01em; color: #6E645C; }
.tile-foot .t-dest { display: inline-flex; align-items: center; gap: 5px; font-family: var(--ui); font-weight: 600; font-size: .75rem; color: var(--plum); white-space: nowrap; }
.tile-foot .t-dest svg { width: 13px; height: 13px; stroke: currentColor; fill: none; }

/* -- gallery filter chips (Karla, not mono) -- */
.gal-filters { display: flex; flex-wrap: wrap; gap: 9px; margin: 0 0 26px; }
.gal-chip { font-family: var(--ui); font-weight: 600; font-size: .86rem; letter-spacing: .01em; padding: 7px 16px; border-radius: 999px; border: 1px solid rgba(99,40,92,.28); background: #fff; color: #5A534F; cursor: pointer; transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease; }
.gal-chip:hover { border-color: var(--plum); transform: translateY(-1px); }
.gal-chip[aria-pressed="true"] { background: var(--plum); color: #fff; border-color: var(--plum); }
.tile[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { .gal-chip:hover { transform: none; } }

/* ============================================================ ROUND 42 — polish pass ============================================================ */
/* monogram: force plum (nav-link rule was overriding the colour) + a touch bigger */
.nav-inner a.nav-logo { color: var(--plum); font-size: 1.82rem; }
.nav.scrolled .nav-inner a.nav-logo { font-size: 1.6rem; }

/* LCHD credibility line as a labelled row ("IMPACT  6,000+ users · cited in Health Affairs") */
.proj-metric { display: flex; align-items: baseline; gap: 10px; font-family: var(--ui); font-size: .82rem; line-height: 1.4; color: rgba(54,49,51,.9); margin: 0 0 12px; }
.proj-metric .pm-label { flex: none; font-size: .64rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: #6E645C; }
.proj-metric .pm-val { color: rgba(54,49,51,.92); }
.proj-metric .pm-val em { font-family: var(--serif); font-style: italic; font-size: .96em; }

/* resume: un-stick the side section headings (education / experience / …) */
.res-block > h2 { position: static; top: auto; }

/* resume skills: outlined chips — soft skills in pink, tech skills in green (pink dialled back ~25%) */
.skills-groups .chip { background: transparent; border: 1px solid rgba(153,88,94,.42); color: var(--ink); }
.skills-groups .tech-skills .chip { background: transparent; border: 1px solid rgba(89,107,58,.6); color: var(--ink); }

/* about quick-facts: soften the pink fill by ~28% */
.about-facts .chip { background: rgba(239,206,204,.72); border: none; color: var(--ink); }
.about-facts .chip:hover { background: rgba(231,190,187,.85); }

/* gallery filter: active + hover go green instead of plum */
.gal-chip:hover { border-color: #5C6B3E; }
.gal-chip[aria-pressed="true"] { background: #5C6B3E; border-color: #5C6B3E; color: #fff; }

/* ============================================================ ROUND 43 — feedback tweaks ============================================================ */
/* reveal: smoother ease-out settle (was ease in-out, which read as a lag) */
.reveal.in { animation: revealUp .5s cubic-bezier(.2,.7,.3,1) backwards; }

/* IMPACT row: plum label, lighter-weight value for readability */
.proj-metric .pm-label { color: var(--plum); }
.proj-metric .pm-val { font-weight: 400; color: rgba(54,49,51,.74); }
.proj-metric .pm-val em { font-style: italic; font-weight: 400; color: rgba(54,49,51,.82); }

/* gallery filter: soft olive from the palette (dark text), not the deep green */
.gal-chip:hover { border-color: var(--olive-deep); }
.gal-chip[aria-pressed="true"] { background: var(--olive); border-color: var(--olive); color: var(--ink); }

/* resume skills: back to filled chips, just at a lighter opacity (pink + green) */
.skills-groups .chip { background: rgba(239,206,204,.5); border: none; color: var(--ink); }
.skills-groups .tech-skills .chip { background: rgba(227,233,196,.6); border: none; color: var(--ink); }

/* ============================================================ ROUND 44 ============================================================ */
/* IMPACT row: drop the italic on "Health Affairs" — hard to read at this size */
.proj-metric .pm-val em { font-family: var(--ui); font-style: normal; font-size: 1em; color: rgba(54,49,51,.82); }

/* ============================================================ ROUND 45 — singer "session" widget (5c) ============================================================ */
.daw { margin-top: 30px; background: #EFEEEC; border: 1px solid #E7DCD3; border-radius: 12px; overflow: hidden; box-shadow: 0 18px 40px -30px rgba(54,49,51,.4); font-family: var(--ui); }
.daw-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; background: #E9E7E3; border-bottom: 1px solid #E1D9D0; }
.daw-transport { display: flex; align-items: center; gap: 14px; }
.daw-play { width: 32px; height: 32px; border-radius: 50%; border: none; background: var(--plum); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 11px; padding-left: 2px; transition: background .18s ease, transform .12s ease; }
.daw-play:hover, .daw-play:focus-visible { background: #7a3f72; }
.daw-play.playing { padding-left: 0; font-size: 10px; }
.daw-time { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13px; letter-spacing: .04em; color: var(--ink); min-width: 74px; }
.daw-meta { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #6E645C; }
.daw-session { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #6E645C; }
.daw-note { margin: 0; padding: 12px 20px 0; font-size: 12.5px; color: #6E645C; }
.daw-timeline { position: relative; margin: 12px 16px 18px; border: 1px solid rgba(54,49,51,.14); border-radius: 6px; background: #F7F6F4; overflow: hidden; }
.daw-ruler { display: grid; grid-template-columns: 152px 1fr; border-bottom: 1px solid rgba(54,49,51,.12); }
.daw-ruler .rl-head { border-right: 1px solid rgba(54,49,51,.12); }
.daw-ruler .rl-bars { display: flex; }
.daw-ruler .rl-bars i { flex: 1; padding: 5px 0 4px 7px; border-left: 1px solid rgba(54,49,51,.12); font-size: 11px; font-style: normal; color: #a09789; }
.daw-ruler .rl-bars i:first-child { border-left: none; }
.daw-track { display: grid; grid-template-columns: 152px 1fr; border-bottom: 1px solid rgba(54,49,51,.1); }
.daw-track:last-of-type { border-bottom: none; }
.daw-thead { display: flex; align-items: center; gap: 9px; padding: 0 12px; min-height: 70px; border-right: 1px solid rgba(54,49,51,.12); background: #EFEEEC; }
.daw-thead .sw { width: 5px; height: 26px; border-radius: 2px; flex: none; }
.daw-thead .sw.dim { background: rgba(54,49,51,.22); }
.daw-thead .tname { font-size: 12.5px; font-weight: 600; color: var(--ink); margin-right: auto; }
.daw-thead .tname.dim { color: #8a8177; font-weight: 500; }
.ms { flex: none; font-family: var(--ui); font-size: 10px; font-weight: 700; color: #8a8177; background: #fff; border: 1px solid rgba(54,49,51,.22); border-radius: 4px; padding: 2px 6px; cursor: pointer; transition: all .15s ease; }
.ms:hover { border-color: rgba(54,49,51,.45); }
.ms.m[aria-pressed="true"] { background: rgba(99,40,92,.14); border-color: var(--plum); color: var(--plum); }
.ms.s[aria-pressed="true"] { background: rgba(163,180,113,.28); border-color: var(--olive-deep); color: #4f5a34; }
.daw-lane { padding: 10px 12px; display: flex; align-items: center; }
.daw-clip { display: flex; align-items: center; gap: 12px; width: 100%; height: 50px; padding: 0 14px; border-radius: 4px; text-decoration: none; overflow: hidden; transition: transform .18s ease, filter .18s ease; }
.daw-clip:hover { transform: translateY(-1px); }
.daw-clip .clip-info { display: flex; flex-direction: column; gap: 2px; flex: none; max-width: 58%; }
.daw-clip .clip-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.daw-clip .clip-sub { font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
.daw-clip .wave { display: flex; align-items: center; gap: 2px; flex: 1; height: 100%; min-width: 0; overflow: hidden; }
.daw-clip .wave i { width: 3px; border-radius: 1px; flex: none; }
.c-plum { background: var(--plum); }
.c-plum .clip-name { color: #fff; } .c-plum .clip-sub { color: rgba(239,206,204,.85); } .c-plum .wave i { background: rgba(239,206,204,.5); }
.c-olive { background: var(--olive-deep); }
.c-olive .clip-name { color: var(--ink); } .c-olive .clip-sub { color: rgba(54,49,51,.68); } .c-olive .wave i { background: rgba(54,49,51,.4); }
.c-plumsoft { background: rgba(99,40,92,.1); border: 1px dashed rgba(99,40,92,.5); }
.c-plumsoft .clip-name { color: var(--plum); } .c-plumsoft .clip-sub { color: rgba(99,40,92,.72); } .c-plumsoft .wave i { background: rgba(99,40,92,.35); }
.newtrack .daw-thead { min-height: 46px; }
.daw-track.muted .daw-lane { opacity: .32; filter: grayscale(.75); }
.daw-track.muted .daw-clip { pointer-events: none; }
.daw-track.muted .daw-thead .tname { opacity: .55; }
.daw-timeline.has-solo .daw-track:not(.soloed):not(.newtrack) .daw-lane { opacity: .32; filter: grayscale(.75); }
.daw-timeline.has-solo .daw-track:not(.soloed):not(.newtrack) .daw-clip { pointer-events: none; }
.daw-timeline.has-solo .daw-track:not(.soloed):not(.newtrack) .daw-thead .tname { opacity: .55; }
.daw-scan { position: absolute; top: 0; bottom: 0; left: 152px; right: 0; pointer-events: none; }
.daw-playhead { position: absolute; top: 0; bottom: 0; left: 0; width: 1.5px; background: var(--plum); opacity: 0; }
.daw-playhead::before { content: ''; position: absolute; top: -1px; left: -4px; width: 9px; height: 6px; border-radius: 1px; background: var(--plum); }
.daw.playing .daw-playhead { opacity: 1; animation: dawsweep 8s linear infinite; }
@keyframes dawsweep { from { left: 0; } to { left: 100%; } }
@media (max-width: 640px) {
  .daw-track, .daw-ruler { grid-template-columns: 104px 1fr; }
  .daw-scan { left: 104px; }
  .daw-thead { gap: 6px; padding: 0 8px; }
  .daw-clip .clip-info { max-width: 66%; }
  .daw-session { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .daw.playing .daw-playhead { animation: none; }
}

/* ============================================================ ROUND 46 — DAW: full band, staggered clips, playhead, mock text (5c v2) ============================================================ */
/* full-width "session" band instead of a card; flows into the footer */
.singer { padding-bottom: 0; }
.daw { margin-top: 40px; background: #EFEEEC; border: none; border-top: 4px solid var(--plum); border-radius: 0; box-shadow: none; overflow: visible; padding: 26px 0 36px; }
.daw-bar { background: none; border-bottom: none; padding: 0 0 14px; }
.daw-note { padding: 12px 0 0; }
.daw-timeline { margin: 14px 0 0; }

/* staggered clips: no longer full-width; each sits partway across its lane */
.daw-lane { gap: 0; }
.daw-clip { width: auto; }
.lane-gap { display: block; flex: 0 0 auto; }

/* clip text — underlined title + uppercase credit, mock weights/sizes */
.daw-clip .clip-name, .daw-file .clip-name { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.daw-clip .clip-sub { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; }
.c-plum .clip-name { text-decoration-color: rgba(239,206,204,.7); }
.c-olive { background: var(--olive); }
.c-olive .clip-name { text-decoration-color: rgba(54,49,51,.42); }

/* covers track: two dashed "file" links side by side */
.daw-file { display: flex; flex-direction: column; justify-content: center; gap: 3px; flex: 0 0 auto; height: 50px; padding: 0 16px; border-radius: 4px; border: 1px dashed rgba(99,40,92,.5); background: rgba(99,40,92,.07); text-decoration: none; transition: background .18s ease, transform .18s ease; }
.daw-file:hover { background: rgba(99,40,92,.14); transform: translateY(-1px); }
.daw-file .clip-name { font-size: 13px; font-weight: 600; color: var(--plum); text-decoration-color: rgba(99,40,92,.4); white-space: nowrap; }
.daw-file .clip-sub { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(99,40,92,.72); white-space: nowrap; }
.daw-timeline.has-solo .daw-track:not(.soloed):not(.newtrack) .daw-file,
.daw-track.muted .daw-file { pointer-events: none; }

/* playhead: always visible; sweeps while playing (default on) */
.daw-playhead { opacity: 1; animation: dawsweep 8s linear infinite; animation-play-state: paused; }
.daw.playing .daw-playhead { animation-play-state: running; }

/* ============================================================ ROUND 47 — 5c micro-tweaks ============================================================ */
/* body copy on Karla (incl. the "in my spare time…" line) — NOT the serif heading */
.singer .wrap > p { font-family: var(--ui); }

/* play/pause: SVG icons so the glyph is truly centered in the circle */
.daw-play { padding: 0; }
.daw-play .ic { width: 12px; height: 12px; fill: #fff; display: none; }
.daw.playing .daw-play .ic-pause { display: block; }
.daw:not(.playing) .daw-play .ic-play { display: block; }

/* "every clip is a link": smaller + tucked right under the transport */
.daw-bar { padding-bottom: 6px; }
.daw-note { font-size: 11px; padding-top: 2px; }

/* track names: tighter leading + a bit more air before the M button */
.daw-thead { gap: 10px; }
.daw-thead .tname { line-height: 1.15; }
.daw-thead .ms.m { margin-left: 4px; }

/* audio-file links: tighter leading, so the centered pair gets more room top & bottom */
.daw-file { gap: 1px; }
.daw-file .clip-name, .daw-file .clip-sub { line-height: 1.12; }

/* ============================================================ ROUND 48 — gallery (5b): olive filter band + cleaner cards ============================================================ */
/* filter controls live on a full-width olive band (olive = controls, like the home strip) */
.gal-filterbar { background: var(--olive); border-top: 1px solid rgba(54,49,51,.16); border-bottom: 1px solid rgba(54,49,51,.16); }
.gal-filterbar .wrap { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px; }
.gf-label { font-family: var(--ui); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(54,49,51,.78); margin-right: 6px; }
/* white pills on olive; active is plum (reads as a control, stands out on the band) */
.gal-filterbar .gal-chip { font-size: .82rem; padding: 7px 16px; background: rgba(255,255,255,.75); border: 1px solid rgba(54,49,51,.2); color: var(--ink); }
.gal-filterbar .gal-chip:hover { background: #fff; border-color: var(--plum); color: var(--plum); transform: none; }
.gal-filterbar .gal-chip[aria-pressed="true"] { background: var(--plum); border-color: var(--plum); color: #fff; }

/* cards: DM Serif title (a touch smaller), no description, kind + destination footer */
.tile .tile-caption { padding: 13px 15px 14px; }
.tile .t-title { font-family: var(--serif); font-weight: 400; font-size: 1.04rem; line-height: 1.24; letter-spacing: -0.01em; color: var(--ink); }
.tile .t-for { display: none; }
.tile-foot { margin-top: 11px; padding-top: 10px; border-top: 1px solid #E7DCD3; }
.tile-foot .t-kind { font-family: var(--ui); font-size: .78rem; color: #6E645C; }
.tile-foot .t-dest { display: inline-flex; align-items: baseline; gap: 5px; font-family: var(--ui); font-weight: 600; font-size: .78rem; color: var(--plum); white-space: nowrap; }
.tile-foot .t-dest .ext { font-weight: 400; }

/* ============================================================ ROUND 49 — gallery card container + DAW drag-reorder ============================================================ */
/* gallery: flat, image-led cards — no border, gentler corners, lift-only hover (no shadow) */
.masonry .tile { border: none; border-radius: 6px; }
.masonry .tile:hover, .masonry .tile:focus-visible { transform: translateY(-3px); box-shadow: none; }
.masonry .tile:focus-visible { outline: 3px solid rgba(99,40,92,.55); outline-offset: 3px; }
/* title: soften DM Serif (single-weight face) with a touch less size + muted ink */
.tile .t-title { font-size: .98rem; color: rgba(54,49,51,.9); }

/* DAW: drag a track by its name column to reorder (novelty) */
.daw-thead { cursor: grab; touch-action: none; }
.daw-thead .ms { cursor: pointer; }
.daw-track.dragging { position: relative; z-index: 5; }
.daw-track.dragging .daw-thead { cursor: grabbing; }
.daw-track.dragging .daw-thead, .daw-track.dragging .daw-lane { background: #E7E4DF; }
.daw-track.drop-target { box-shadow: inset 0 2px 0 var(--plum); }

/* ============================================================ ROUND 50 — 5a hover on gallery, serif titles, drag lift, hero simplify + welcome bar ============================================================ */
/* gallery card titles: actually reach DM Serif (a 3-class rule was overriding the 2-class one) */
.tile .tile-caption .t-title { font-family: var(--serif); font-weight: 400; font-size: .98rem; line-height: 1.24; letter-spacing: -0.01em; color: rgba(54,49,51,.9); }

/* gallery hover: adopt the 5a language (lift + soft blush tint + soft shadow) */
.masonry .tile:hover, .masonry .tile:focus-visible { transform: translateY(-4px); box-shadow: 0 20px 34px -26px rgba(54,49,51,.5); }
.masonry .tile:hover { background: #FDF6F5; }

/* DAW: dragging a track lifts it off the strip and tips slightly left, like picking it up */
.daw-timeline { overflow: visible; }
.daw-track { transition: transform .13s ease, box-shadow .13s ease; }
.daw-track.dragging { transform: translateY(-7px) rotate(-2.2deg) scale(1.015); box-shadow: 0 18px 34px -14px rgba(54,49,51,.5); border-radius: 5px; }
/* the "+ new track" row is not draggable — don't offer the grab hand */
.newtrack .daw-thead { cursor: default; }

/* ---- 5a: simplified 2-column hero + scrolling olive welcome bar ---- */
.hero-grid { grid-template-columns: 1.12fr 0.88fr; }
.hello-bar { background: var(--olive); border-top: 1px solid rgba(54,49,51,.16); border-bottom: 1px solid rgba(54,49,51,.16); }
.hello-bar .marquee { -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.hello-bar .marquee-track { padding: 13px 0; }
.hello-bar .hm { font-family: var(--ui); font-size: .98rem; color: rgba(54,49,51,.92); margin-right: 34px; white-space: nowrap; }
.hello-bar .hm.sep { color: rgba(54,49,51,.45); }
@media (max-width: 620px) { .hello-bar .hm { font-size: .92rem; margin-right: 26px; } }

/* ============================================================ ROUND 51 — gallery title/hover, hero type, 5a work section ============================================================ */
/* gallery: bigger serif title; revert hover to the standard site card behavior (no pink) */
.tile .tile-caption .t-title { font-size: 1.1rem; }
.masonry .tile:hover, .masonry .tile:focus-visible { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(99,40,92,.16); }
.masonry .tile:hover { background: #fff; }

/* hero header, modeled on 5a: big serif name, small muted roles */
.hero-left .name { font-family: var(--serif); font-weight: 400; font-size: clamp(1.9rem, 4.4vw, 2.5rem); line-height: 1.08; letter-spacing: -0.01em; margin: .08em 0 0; }
.hero-left .name b { font-weight: 400; }
.hero-left .roles { font-family: var(--ui); font-size: clamp(.9rem, 1.5vw, 1rem); font-weight: 400; color: rgba(54,49,51,.78); white-space: normal; margin: .5em 0 0; }

/* DAW drag: follow the pointer 1:1 while lifted (no easing lag) */
.daw-track.dragging { transition: none; }

/* ---- 5a work section: white ground, header, featured card, mini grid, research card ---- */
.late { background: var(--paper); }
.work-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding-bottom: 18px; border-bottom: 1.5px solid var(--ink); margin-bottom: 30px; }
.wh-title { font-family: var(--serif); font-style: italic; font-size: clamp(1.7rem, 3.4vw, 2.15rem); color: var(--ink); }
.wh-label { font-family: var(--ui); font-size: .72rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: #6E645C; white-space: nowrap; }

.feat-card { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 40px; align-items: center; background: var(--card); border: 1px solid #E7DCD3; border-radius: 12px; padding: 26px 28px; text-decoration: none; color: inherit; box-shadow: none; transition: transform .18s ease, box-shadow .18s ease; margin-bottom: 24px; }
.feat-card:hover, .feat-card:focus-visible { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(99,40,92,.16); }
.feat-card:focus-visible, .mini-card:focus-visible { outline: 3px solid rgba(99,40,92,.55); outline-offset: 3px; }
.feat-text { display: flex; flex-direction: column; }
.feat-eyebrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.fe-num { font-family: var(--ui); font-size: .72rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--plum); }
.fe-year { font-family: var(--ui); font-size: .72rem; font-weight: 600; color: rgba(54,49,51,.8); background: #DDE1BE; border-radius: 999px; padding: 4px 11px; white-space: nowrap; }
.feat-title { font-family: var(--serif); font-weight: 400; font-size: clamp(1.9rem, 3.2vw, 2.5rem); line-height: 1.06; letter-spacing: -0.015em; margin: 0 0 12px; }
.feat-desc { font-family: var(--read); font-size: 1rem; line-height: 1.62; color: rgba(54,49,51,.82); margin: 0 0 14px; max-width: 48ch; }
.type-tags { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 2px 0 18px; }
.type-pill { font-family: var(--ui); font-size: .72rem; font-weight: 600; letter-spacing: .04em; color: var(--ink); background: var(--blush); border-radius: 999px; padding: 4px 12px; white-space: nowrap; }
.tt-tags { font-family: var(--ui); font-size: .82rem; color: #6E645C; }
.feat-card .proj-view { align-self: flex-start; margin: 0; }
.feat-thumb { align-self: stretch; }
.feat-thumb img { width: 100%; height: 100%; min-height: 220px; max-height: 300px; object-fit: cover; border-radius: 8px; }

.feat-research { grid-template-columns: 1.45fr 1fr; }
.feat-quote { font-family: var(--serif); font-style: italic; font-size: 1.12rem; line-height: 1.42; color: var(--plum); border-left: 2px solid var(--plum); padding-left: 16px; align-self: center; }

.mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 24px; }
.mini-card { display: flex; flex-direction: column; background: var(--card); border: 1px solid #E7DCD3; border-radius: 10px; overflow: hidden; text-decoration: none; color: inherit; box-shadow: none; transition: transform .18s ease, box-shadow .18s ease; }
.mini-card:hover, .mini-card:focus-visible { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(99,40,92,.16); }
.mini-thumb { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.mini-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mini-body { display: flex; flex-direction: column; flex: 1; padding: 16px 16px 18px; }
.mini-title { font-family: var(--serif); font-weight: 400; font-size: 1.4rem; line-height: 1.12; letter-spacing: -0.01em; margin: 0 0 8px; }
.mini-desc { font-family: var(--read); font-size: .9rem; line-height: 1.5; color: rgba(54,49,51,.8); margin: 0 0 12px; }
.mini-body .type-tags { margin: auto 0 12px; }
.mini-card .proj-view { align-self: flex-start; margin: 0; }
.proj-view.muted { color: #8a8177; }
.work-more { display: flex; justify-content: center; margin-top: 34px; }

@media (max-width: 820px) {
  .feat-card, .feat-research { grid-template-columns: 1fr; gap: 22px; }
  .feat-thumb img { max-height: 260px; }
  .mini-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .feat-card:hover, .feat-card:focus-visible, .mini-card:hover, .mini-card:focus-visible { transform: none; }
}

/* ============================================================ ROUND 52 — outline-less work cards, hero spacing, singer, drag drop-zone ============================================================ */
/* work-section cards: outline-less like the gallery (transparent at rest, lift + shadow on hover) */
.feat-card, .mini-card { border: none; background: transparent; }

/* hero: pull the name up under "hello," and make the roles readable */
.hero-left .hello { line-height: .72; margin: 0; }
.hero-left .name { margin-top: -0.14em; }
.hero-left .roles { font-family: var(--ui); font-size: clamp(1.05rem, 2vw, 1.22rem); font-weight: 400; color: rgba(54,49,51,.85); margin-top: .55em; }

/* hero: left column spans the same vertical range as the portrait */
.hero-grid { align-items: stretch; }
.hero-left { display: flex; flex-direction: column; justify-content: space-between; }
.hero-left .socials { margin-top: 8px; }

/* singer: trim the pink space above the heading */
.singer { padding-top: 34px; }

/* MAAPP mini-card: pin the "coming soon" badge on the image instead of pushing it down */
.mini-thumb .proj-status { position: absolute; top: 10px; left: 10px; z-index: 3; }

/* drag: no rotation, and the drop zone that marks where the track lands */
.daw-track.dragging { transform: scale(1.02); }
.daw-dropzone { border-radius: 5px; background: rgba(99,40,92,.09); box-shadow: inset 0 0 0 2px rgba(99,40,92,.42); }

/* ============================================================ ROUND 53 — outlined home cards + restructure, hero size, gallery, olive rule, outro, connected footer ============================================================ */
/* home cards: outlined again (bring back border + card fill) */
.feat-card, .mini-card { border: 1px solid #E7DCD3; background: var(--card); }

/* home card restructure: project type in the pink pill (top-left), tags + read on one line below */
.feat-eyebrow { margin-bottom: 14px; }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mini-body .card-foot { margin-top: auto; }
.feat-card .card-foot { margin-top: 4px; }
.card-foot .tt-tags { font-family: var(--ui); font-size: .82rem; color: #6E645C; }

/* hero: bigger portrait, grouped text so a single gap sits between it and the socials */
.portrait { --pf: clamp(224px, 25vw, 300px); }
.hl-top { display: flex; flex-direction: column; }
.hero-left .socials { margin-top: 0; }

/* MAAPP mini badge: give it the pill treatment (was unstyled in mini-thumb) */
.mini-thumb .proj-status { font-family: var(--ui); font-weight: 600; font-size: .68rem; letter-spacing: .01em; color: var(--ink); background: rgba(255,255,255,.94); border: 1px solid #E7DCD3; border-radius: 999px; padding: 4px 11px; box-shadow: 0 2px 10px rgba(20,18,19,.16); }

/* gallery card titles: match the projects-page card titles */
.tile .tile-caption .t-title { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; line-height: 1.22; letter-spacing: -0.01em; color: var(--ink); }

/* gallery filter: a little filter icon next to the label */
.gf-label { display: inline-flex; align-items: center; gap: 6px; }
.gf-ic { width: 13px; height: 13px; }

/* singer → daw → footer read as one connected run: drop the plum rules between them */
.daw { border-top: none; }
footer { border-top: none; }

/* olive accent rule under the page headers (from 4b) */
.olive-rule { height: 4px; background: var(--olive); border-radius: 2px; margin: 22px 0 0; }
.rz-hero-grid .olive-rule { grid-column: 1 / -1; margin-top: 26px; }

/* about closing: heading left, buttons right (like the resume header), a bit shorter */
.about-outro { padding: 48px 0 54px; }
.about-outro .outro-row { display: flex; align-items: center; justify-content: space-between; gap: 44px; }
.about-outro .outro-row h2 { margin: 0; max-width: 44ch; font-size: clamp(1.3rem, 2.4vw, 1.6rem); line-height: 1.32; }
.about-outro .outro-btns { flex: none; margin: 0; }
@media (max-width: 780px) {
  .about-outro .outro-row { flex-direction: column; align-items: flex-start; gap: 20px; }
}

/* ============================================================ ROUND 54 — projects-card restyle, footer rule back, thin olive page-strip ============================================================ */
/* projects-page cards: project type in the pink pill, year in an olive pill, tags off JetBrains mono */
.proj-metarow .pm-type { font-family: var(--ui); font-size: .72rem; font-weight: 600; letter-spacing: .04em; color: var(--ink); background: var(--blush); border-radius: 999px; padding: 4px 12px; }
.proj-metarow .pm-year { font-family: var(--ui); font-size: .72rem; font-weight: 600; color: rgba(54,49,51,.8); background: #DDE1BE; border: none; border-radius: 999px; padding: 4px 11px; }
.proj-tags { font-family: var(--ui); font-size: .78rem; letter-spacing: 0; color: #6E645C; }

/* bring back the plum rule above the footer (the corgi walks on it) */
footer { border-top: 5px solid var(--plum); }

/* page separator: a thin full-width olive strip — like the gallery strip, no buttons, much thinner */
.page-strip { height: 8px; background: var(--olive); border-top: 1px solid rgba(54,49,51,.16); border-bottom: 1px solid rgba(54,49,51,.16); }
.olive-rule { display: none; }

/* ============================================================ ROUND 55 — hero spacing, bottom-aligned titles, about header, karla leads ============================================================ */
/* hero: center the text blob (more air above "hello,") and keep the socials tucked under the squiggle */
.hero-grid { align-items: center; }
.hero-left { justify-content: flex-start; }
.hero-left .socials { margin-top: 24px; }

/* projects cards: a 1-line title drops to the bottom of its 2-line reserved space */
.proj-title { display: flex; align-items: flex-end; }

/* about header now matches the projects header spacing (its lead fills the space) */

/* header body text on Karla */
.page-hero .lead { font-family: var(--ui); }

/* ============================================================ ROUND 56 — DAW rose track, hero portrait bump ============================================================ */
/* arrangements track clip colour */
.c-rose { background: #8E4E64; }
.c-rose .clip-name { color: #fff; } .c-rose .clip-sub { color: rgba(239,206,204,.85); } .c-rose .wave i { background: rgba(239,206,204,.5); }

/* hero: bump the portrait up a touch and trim the pink space below */
.hero { padding-bottom: 44px; }
.portrait { transform: translateY(-20px); }

/* ============================================================ ROUND 57 — thumbnail hover zoom, DAW track-head alignment ============================================================ */
/* home + gallery cards: thumbnail zooms on hover (like the projects cards) */
.feat-thumb { overflow: hidden; border-radius: 8px; }
.mini-thumb img, .feat-thumb img { transition: transform .4s ease; }
.mini-card:hover .mini-thumb img, .feat-card:hover .feat-thumb img { transform: scale(1.06); }
.masonry .tile:hover .tile-img, .masonry .tile:hover .tile-ph { transform: scale(1.06); }

/* DAW track heads: name fills + wraps, M/S grouped and right-aligned so they line up across every track */
.daw-thead .tname { flex: 1 1 auto; min-width: 0; margin-right: 0; }
.daw-thead .ms.m { margin-left: 0; }
.ms-group { flex: none; display: inline-flex; align-items: center; gap: 5px; margin-right: 6px; }

/* ============================================================ ROUND 58 — gallery filter gap, mobile nav one-line, M/S nudge ============================================================ */
/* gallery filter chips a touch closer */
.gal-filterbar .wrap { gap: 7px; }
.gf-label { margin-right: 4px; }
/* filter chips fade in with the page */
.gal-filterbar .gal-chip.reveal, .gf-label.reveal { will-change: opacity, transform; }

/* mobile nav: keep on one line — hide the monogram on small screens so the links fit */
@media (max-width: 600px) {
  .nav-logo { display: none; }
  .nav-inner { flex-wrap: nowrap; justify-content: center; gap: 13px; }
  .nav-inner a { font-size: .92rem; }
}
@media (max-width: 400px) {
  .nav-inner { gap: 9px; }
  .nav-inner a { font-size: .82rem; }
}

/* DAW: pull the M/S group closer to the divider on the right */
.daw-thead { padding-right: 10px; }
.ms-group { margin-right: 0; }

/* ============================================================ ROUND 59 — interactive "new collab" track ============================================================ */
/* the "+ new track" row now reads as a button */
.newtrack .daw-thead { cursor: pointer; }
.newtrack .daw-thead:hover .tname.dim { color: var(--plum); }
.newtrack .daw-thead:hover .sw.dim { background: rgba(99,40,92,.4); }
.newtrack .daw-thead:focus-visible { outline: 2px solid var(--plum); outline-offset: -2px; }

/* the drawable lane — 8 faint block guides, aligned with the ruler */
.collab-lane { position: relative; display: block; padding: 10px 0; min-height: 50px; cursor: crosshair;
  background-image: repeating-linear-gradient(to right, rgba(54,49,51,.09) 0 1px, transparent 1px 12.5%); }
.collab-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #a89f95; pointer-events: none; }
.collab-lane.has-blob .collab-hint { display: none; }

/* a laid-down clip — links to LinkedIn, waveform fills it end to end */
.collab-blob { position: absolute; top: 10px; bottom: 10px; display: flex; align-items: center; gap: 10px;
  padding: 0 4px; border-radius: 4px; overflow: hidden; text-decoration: none; cursor: pointer;
  background: linear-gradient(135deg, var(--plum), #8E4E64); box-shadow: 0 1px 3px rgba(54,49,51,.22);
  transition: filter .18s ease; }
.collab-blob:hover { filter: brightness(1.06); }
.collab-blob .clip-info { display: none; flex-direction: column; gap: 2px; flex: none; max-width: 70%; padding-left: 8px; }
.collab-blob.has-text .clip-info { display: flex; }
.collab-blob .clip-name { font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.collab-blob .clip-sub { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(239,206,204,.9); white-space: nowrap; }
.collab-blob .wave { display: flex; align-items: center; gap: 2px; flex: 1; height: 70%; min-width: 0; overflow: hidden; }
.collab-blob .wave i { width: 3px; border-radius: 1px; flex: none; background: rgba(239,206,204,.5); }

/* drag edges to resize */
.collab-resize { position: absolute; top: 0; bottom: 0; width: 10px; z-index: 2; cursor: ew-resize; }
.collab-resize.l { left: 0; } .collab-resize.r { right: 0; }

/* live preview while drawing */
.collab-preview { position: absolute; top: 10px; bottom: 10px; border-radius: 4px; pointer-events: none;
  background: rgba(99,40,92,.2); border: 1px dashed rgba(99,40,92,.55); }

/* mute / solo dim the collab clips like every other track */
.daw-track.muted .collab-blob,
.daw-timeline.has-solo .daw-track:not(.soloed):not(.newtrack) .collab-blob { pointer-events: none; }

/* ============================================================ ROUND 60 — gallery fade-only, green collab clips, remove buttons ============================================================ */
/* gallery filter chips: fade in only, no upward push */
@keyframes revealFade { from { opacity: 0; } to { opacity: 1; } }
.gal-filterbar .reveal.in { animation: revealFade .5s ease backwards; }

/* collab clips go green instead of plum */
.collab-blob { background: linear-gradient(135deg, #6B7A40, #46512A); }
.collab-blob .clip-sub { color: rgba(255,255,255,.85); }
.collab-blob .wave i { background: rgba(240,243,220,.5); }

/* remove-clip × (top-right of each clip) */
.collab-x { position: absolute; top: 3px; right: 4px; z-index: 3; width: 15px; height: 15px;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  font-size: 13px; line-height: 1; color: rgba(255,255,255,.8); background: rgba(0,0,0,.16);
  cursor: pointer; opacity: .55; transition: opacity .15s ease, background .15s ease, color .15s ease; }
.collab-blob:hover .collab-x, .collab-x:focus-visible { opacity: 1; outline: none; }
.collab-x:hover { background: rgba(0,0,0,.32); color: #fff; }

/* remove-track × (top-right of the collab track head) */
.collab-track .daw-thead { position: relative; }
.collab-trackx { position: absolute; top: 5px; right: 6px; width: 16px; height: 16px; padding: 0;
  display: flex; align-items: center; justify-content: center; border: none; border-radius: 50%;
  background: rgba(54,49,51,.1); color: #6E645C; font-size: 14px; line-height: 1; cursor: pointer;
  opacity: .55; transition: opacity .15s ease, background .15s ease, color .15s ease; }
.collab-track .daw-thead:hover .collab-trackx, .collab-trackx:focus-visible { opacity: 1; outline: none; }
.collab-trackx:hover { background: rgba(142,78,100,.9); color: #fff; }

/* ============================================================ ROUND 61 — mobile hero stacking fix, continuous pink collab gradient ============================================================ */
/* the hero must stack on phones — later unconditional 2-col rules were overriding the responsive rule */
@media (max-width: 920px) {
  .hero-grid { grid-template-columns: 1fr; align-items: start; }
  .hero-left { justify-content: flex-start; }
  /* right-align the pfp; leave room on the right so the white outline square clears the edge */
  .portrait { order: -1; justify-self: end; transform: none; margin: 0 24px 4px 0; --pf: clamp(196px, 56vw, 262px); }
}

/* each collab clip has its own soft-pink → very-light-pink gradient; dark text like the a cappella clip */
.collab-blob { background-image: linear-gradient(to right, #ECC1BE, #FBECEA); background-repeat: no-repeat;
  box-shadow: inset 0 0 0 1px rgba(54,49,51,.12), 0 1px 3px rgba(54,49,51,.14); }
.collab-blob:hover { filter: brightness(1.02); }
.collab-blob .clip-name { color: var(--ink); text-decoration-color: rgba(54,49,51,.4); }
.collab-blob .clip-sub { color: rgba(54,49,51,.66); }
.collab-blob .wave i { background: rgba(54,49,51,.34); }
/* remove-clip × now dark on the light clip */
.collab-x { color: rgba(54,49,51,.6); background: rgba(255,255,255,.55); }
.collab-x:hover { background: rgba(54,49,51,.22); color: var(--ink); }

/* resume actions: email + LinkedIn stay together, dropping to their own line as a pair
   (flex:0 0 auto so the pair never shrinks to squeeze beside "download") */
.ra-group { display: flex; gap: 14px; flex-wrap: wrap; flex: 0 0 auto; }

/* ============================================================ ROUND 62 — Ginkgo case study: takeaways, subheads, audit table, references ============================================================ */
/* subheadings inside the read column (serif, to sit between h2 and body) */
.cs-read h3 { font-family: var(--serif); font-weight: 500; font-size: 1.3rem; line-height: 1.15; letter-spacing: -0.01em; color: var(--ink); margin: 32px 0 10px; }

/* the bolded "takeaway" line that sits directly under each heading */
.cs-takeaway { margin: 2px 0 20px; padding: 12px 16px 12px 18px; border-left: 3px solid var(--plum);
  background: linear-gradient(90deg, rgba(99,40,92,.055), rgba(99,40,92,0) 92%); border-radius: 0 8px 8px 0; }
.cs-takeaway .tk { display: block; font-family: var(--ui); font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--plum); margin-bottom: 5px; }
.cs-takeaway .tx { font-family: var(--read); font-size: 1.05rem; line-height: 1.5; font-weight: 600; color: var(--ink); }

/* competitive-audit table — 6 columns, tighter type; scrolls horizontally on narrow screens */
.cs-read table.cs-audit { min-width: 720px; font-size: .84rem; }
.cs-read table.cs-audit th, .cs-read table.cs-audit td { padding-right: 16px; }
.cs-read table.cs-audit .heu { color: var(--plum); }

/* references block */
.cs-refs { margin-top: 42px; padding-top: 8px; border-top: 1px solid var(--hair); }
.cs-refs h2 { font-size: 1.2rem; }
.cs-refs h2::before { display: none; }
.cs-refs ol { margin: 6px 0 0; padding-left: 1.35em; }
.cs-refs li { font-family: var(--ui); font-size: .82rem; line-height: 1.5; color: rgba(54,49,51,.7); margin-bottom: 9px; }
.cs-refs li::marker { color: var(--plum); }

/* ============================================================ ROUND 63 — DAW responsive: stacked heads + shared horizontal scroller + minimap ============================================================ */
/* desktop: the new wrappers are invisible pass-throughs; mobile-only bits hidden */
.daw-lane-scroll, .daw-rl-scroll, .daw-mtop { display: contents; }
.daw-minimap, .daw-mhead { display: none; }

@media (max-width: 640px) {
  /* copy swap + restored session filename */
  .daw-note .dn-wide { display: none; }
  .daw-note .dn-mobile { display: inline; }
  .daw-session { display: block; width: 100%; }
  .daw-bar { flex-wrap: wrap; gap: 6px 14px; }

  .daw-timeline { --daw-w: 700px; overflow: visible; }

  /* each track stacks: a full-width head strip, then the lane below it */
  .daw-track, .daw-ruler { display: block; grid-template-columns: none; }
  .daw-track { border-bottom: 1px solid rgba(54,49,51,.12); }
  .daw-track:last-of-type { border-bottom: none; }
  .daw-thead { width: auto; min-height: 0; padding: 7px 12px; border-right: none; border-bottom: 1px solid rgba(54,49,51,.10); gap: 8px; }
  .newtrack .daw-thead { min-height: 0; }
  .daw-thead .tname { font-size: 12.5px; }

  /* lane + ruler become fixed-width horizontal scrollers (native bars hidden) */
  .daw-lane-scroll { display: block; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .daw-lane-scroll::-webkit-scrollbar { display: none; }
  .daw-lane { position: relative; width: var(--daw-w); min-width: var(--daw-w); }

  .daw-ruler .rl-head { display: none; }
  .daw-rl-scroll { display: block; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .daw-rl-scroll::-webkit-scrollbar { display: none; }
  .daw-ruler .rl-bars { width: var(--daw-w); }

  /* the shared top strip: minimap over the ruler */
  .daw-mtop { display: block; background: #F7F6F4; }
  .daw-minimap { display: block; padding: 9px 12px 7px; border-bottom: 1px solid rgba(54,49,51,.10); }
  .daw-mm-track { position: relative; display: flex; gap: 3px; height: 22px; }
  .daw-mm-track > i { flex: 1; background: rgba(54,49,51,.09); border-radius: 2px; }
  .daw-mm-view { position: absolute; top: -3px; bottom: -3px; left: 0; width: 45%; border: 1.6px solid var(--plum); background: rgba(99,40,92,.13); border-radius: 5px; cursor: grab; touch-action: none; }
  .daw-mm-view:active { cursor: grabbing; }

  /* per-lane playhead lines — stay visible (freeze in place) even when paused */
  /* the playhead is off by default on mobile; it appears (and stays, frozen when paused) only after the user taps play */
  .daw-mhead { display: block; position: absolute; top: 0; bottom: 0; left: 0; width: 1.5px; background: var(--plum); opacity: 0; pointer-events: none; }
  .daw.mhead-armed .daw-mhead { opacity: 1; }
  .daw-scan { display: none; }

  /* dog sprite: keep its own clearance below the widget so it isn't clipped */
  .daw { padding-bottom: 30px; }
  footer { overflow: visible; }
}

/* ============================================================ ROUND 64 — DAW clip hover glow, collab clip height, resume pill hover ============================================================ */
/* regular clips lighten on hover (like the collab clips), not just lift */
.daw-clip:hover { filter: brightness(1.07); }
.daw-file:hover { filter: brightness(1.03); }

/* collab clips: full 50px height so the title + "collaboration" both fit */
.collab-lane { min-height: 70px; }

/* resume pills: once the intro animation finishes, free the transform so they lift on hover like the home buttons */
.js .resume-actions .pill.anim-done { animation: none !important; opacity: 1; }

/* ============================================================ ROUND 65 — header entrances: cursive floats soft, home headings letter-bounce, everything else smooth ============================================================ */
/* neutralize the old hero fades so the new entrances drive hello / name / roles */
.hero .hello, .hero .name, .hero .roles { animation: none; }

/* cursive words float in — soft, gentle, floaty (single easy overshoot, no hard dip) */
.js .float-el, .js .seg-h .seg-float { opacity: 0; }
.float-el.float-go { animation: floatIn 1.15s cubic-bezier(.26,1.45,.5,1) both; }
.seg-h.seg-go .seg-float { display: inline-block; animation: floatIn 1.15s cubic-bezier(.26,1.45,.5,1) both; }
/* one smooth spring: rises from below, gently overshoots, and settles — no pause at the peak */
@keyframes floatIn {
  0%   { opacity: 0; transform: translateY(24px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* the non-cursive parts of a header just fade in smooth (inline → wraps naturally) */
.js .seg-h .seg-smooth { opacity: 0; }
.seg-h.seg-go .seg-smooth { animation: fadeSoft .6s ease both; }
@keyframes fadeSoft { from { opacity: 0; } to { opacity: 1; } }

/* the one-line header blurb fades in a beat after the cursive (delay set inline) */
.js .lead-anim { opacity: 0; }
.lead-anim.lead-go { animation: fadeSoft .6s ease both; }

/* the two home headings bounce gently, letter by letter */
.js .lb-h .ltr { display: inline-block; opacity: 0; }
.lb-h.lb-go .ltr { animation: letterBounce .6s cubic-bezier(.22,.68,.32,1) both; }
@keyframes letterBounce {
  0%   { opacity: 0; transform: translate3d(0,14px,0); }
  58%  { opacity: 1; transform: translate3d(0,-4px,0); }
  100% { opacity: 1; transform: translate3d(0,0,0); }
}

/* roles: word by word, smooth (fade + gentle push, no bounce); glow + lift on hover */
.js .roles .rw { display: inline-block; opacity: 0; }
.roles.rw-go .rw { animation: smoothPush .55s cubic-bezier(.2,.7,.3,1) both; }
@keyframes smoothPush { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } }
.rw-done { opacity: 1 !important; animation: none !important; }
.roles .rw { transition: transform .2s ease, color .2s ease, text-shadow .2s ease; cursor: default; }
.roles .rw:hover { transform: translateY(-3px); color: var(--plum); text-shadow: 0 1px 16px rgba(99,40,92,.28); }

/* the name is hidden until it starts typing (avoids a flash of the full text) */
.js .name-anim { opacity: 0; }

/* blinking caret for the typed name */
.type-caret { display: inline-block; width: 2px; height: 1.02em; background: var(--plum); margin-left: 3px; vertical-align: -0.12em; animation: caretBlink 1.05s steps(1) infinite; }
@keyframes caretBlink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .float-el, .seg-h .seg, .lb-h .ltr, .roles .rw, .name-anim, .lead-anim { opacity: 1 !important; animation: none !important; }
  .type-caret { display: none; }
}

/* ============================================================ ROUND 66 — singer copy width + keep the spotify arrow attached ============================================================ */
.singer p { max-width: 720px; }
.singer p a { white-space: nowrap; }

/* ============================================================ ROUND 67 — more clearance below the DAW so the walking corgi doesn't hop into it ============================================================ */
.daw { padding-bottom: 50px; }
@media (max-width: 640px) { .daw { padding-bottom: 58px; } }

/* ============================================================ ROUND 68 — flowers & squares rotate slowly + float (independent transform props) ============================================================ */
@keyframes accSpin  { from { rotate: 0deg; } to { rotate: 360deg; } }
@keyframes accFloat { 0%, 100% { translate: 0 0; } 50% { translate: 2px -7px; } }

/* ============================================================ ROUND 69 — animated corgi sprite + D-pad ============================================================ */
.corgi-stage { position: absolute; left: 0; right: 0; top: -46px; height: 48px; z-index: 6; pointer-events: none; }
.corgi { position: absolute; left: 0; bottom: 0; width: 64px; height: 44px; background-repeat: no-repeat; background-size: auto 44px; background-position: 0 0; transform-origin: center bottom; cursor: pointer; pointer-events: auto; }
.corgi.a-idle1 { background-image: url(assets/corgi-idle1.png); animation: cg5 1.4s steps(5) infinite; }
.corgi.a-idle2 { background-image: url(assets/corgi-idle2.png); animation: cg5 1.25s steps(5) infinite; }
.corgi.a-walk  { background-image: url(assets/corgi-walk.png);  animation: cg5 .62s steps(5) infinite; }
.corgi.a-run   { background-image: url(assets/corgi-run.png);   animation: cg8 .56s steps(8) infinite; }
.corgi.a-sniff { background-image: url(assets/corgi-sniff.png); animation: cg8 1s steps(8) infinite; }
.corgi.a-sniffwalk { background-image: url(assets/corgi-sniffwalk.png); animation: cg8 .85s steps(8) infinite; }
.corgi.a-sit   { background-image: url(assets/corgi-sit.png);   animation: cg9 .7s steps(9) forwards; }
.corgi.a-jump  { background-image: url(assets/corgi-jump.png);  animation: cg11 .66s steps(11) forwards; }
@keyframes cg5  { from { background-position-x: 0; } to { background-position-x: -320px; } }
@keyframes cg8  { from { background-position-x: 0; } to { background-position-x: -512px; } }
@keyframes cg9  { from { background-position-x: 0; } to { background-position-x: -576px; } }
@keyframes cg11 { from { background-position-x: 0; } to { background-position-x: -704px; } }

/* the D-pad indicator that appears when you click the corgi (desktop) — shows which
   arrow keys to press and highlights them; it is not itself clickable */
.corgi-dpad { position: absolute; bottom: 50px; left: 0; transform: translateX(-50%); display: grid; grid-template-columns: repeat(3, 21px); grid-template-rows: repeat(2, 21px); gap: 3px; pointer-events: none; opacity: 0; transition: opacity .18s ease; }
.corgi-dpad.in { opacity: 1; }
.cdp { display: flex; align-items: center; justify-content: center; width: 21px; height: 21px; border-radius: 5px; background: rgba(99,40,92,.85); color: #fff; font: 700 13px/1 var(--ui); box-shadow: 0 2px 6px rgba(54,49,51,.3); transition: background .12s ease, transform .1s ease; }
.cdp.active { background: #FF4557; transform: scale(1.12); }
.cdp-up { grid-column: 2; grid-row: 1; } .cdp-left { grid-column: 1; grid-row: 2; }
.cdp-down { grid-column: 2; grid-row: 2; } .cdp-right { grid-column: 3; grid-row: 2; }

@media (prefers-reduced-motion: reduce) { .corgi { animation: none !important; } }

/* ============================================================ ROUND 70 — header entrances restored + refined: cursive damped-bounces, serif pushes from the left, lead pushes up from below ============================================================ */
/* cursive words (.hello + .script-accent) bounce in: up, down, up, down, settling —
   amplitude decays like real damped motion; ease-in-out per segment so it never lingers at a peak */
.float-el.float-go { animation: floatIn 1.3s linear both; }
.seg-h.seg-go .seg-float { display: inline-block; animation: floatIn 1.3s linear both; }
@keyframes floatIn {
  0%   { opacity: 0; transform: translateY(24px);  animation-timing-function: cubic-bezier(.25,0,.5,1); }
  27%  { opacity: 1; transform: translateY(-10px); animation-timing-function: cubic-bezier(.32,0,.5,1); }
  45%  { opacity: 1; transform: translateY(6px);   animation-timing-function: cubic-bezier(.45,0,.5,1); }
  62%  { opacity: 1; transform: translateY(-4px);  animation-timing-function: cubic-bezier(.45,0,.5,1); }
  77%  { opacity: 1; transform: translateY(2px);   animation-timing-function: cubic-bezier(.45,0,.5,1); }
  90%  { opacity: 1; transform: translateY(-1px);  animation-timing-function: cubic-bezier(.45,0,.5,1); }
  100% { opacity: 1; transform: translateY(0); }
}

/* serif parts of a hero heading push in from the left (was a plain fade) */
.seg-h.seg-go .seg-smooth { display: inline-block; animation: segLeft .62s cubic-bezier(.22,.72,.28,1) both; }
@keyframes segLeft { 0% { opacity: 0; transform: translateX(-26px); } 100% { opacity: 1; transform: translateX(0); } }

/* the lead blurb pushes up from below, a beat after the heading (was a plain fade) */
.lead-anim.lead-go { animation: leadUp .7s cubic-bezier(.22,.72,.28,1) .22s both; }
@keyframes leadUp { 0% { opacity: 0; transform: translateY(18px); } 100% { opacity: 1; transform: translateY(0); } }

/* ============================================================ ROUND 71 — corgi hold-last-frame + D-pad glyph centering; carousel hover-expand; glow+raise on cursive labels & resume headings; education left bar ============================================================ */
/* sit & jump are one-shot: step through every real frame and HOLD the last one
   (jump-none lands on the final frame instead of the blank cell past the strip) */
.corgi.a-sit  { animation: cg9 .7s steps(9, jump-none) forwards; }
.corgi.a-jump { animation: cg11 .66s steps(11, jump-none) forwards; }
@keyframes cg9  { from { background-position-x: 0; } to { background-position-x: -512px; } }
@keyframes cg11 { from { background-position-x: 0; } to { background-position-x: -640px; } }

/* D-pad glyph wrapper — holds a centered SVG arrow */
.cdp-g { display: block; width: 13px; height: 13px; line-height: 0; }
.cdp-g svg { display: block; width: 100%; height: 100%; }

/* life gallery: hovering a photo lifts and enlarges it, pulling it forward over its
   neighbours (the strip is already frozen on hover, so it stays put) */
.gal-wrap .marquee { padding: 30px 0; }
.gal-wrap .marquee img { position: relative; z-index: 1; transition: transform .35s cubic-bezier(.34,1.4,.5,1), box-shadow .35s ease; }
.gal-wrap .marquee img:hover { transform: scale(1.12) translateY(-3px); z-index: 6; box-shadow: 0 20px 44px rgba(54,49,51,.34); }

/* glow + raise on the cursive section labels (life gallery, miss kaya) — uses the
   independent `translate` property so it composes with the entrance `transform` */
.section h2 .script-accent { cursor: default; transition: translate .2s ease, color .2s ease, text-shadow .2s ease; }
.section h2 .script-accent:hover { translate: 0 -3px; color: var(--plum); text-shadow: 0 1px 16px rgba(99,40,92,.28); }

/* glow + raise on the resume heading labels (education, experience, …) */
.res-block > h2 { cursor: default; transition: transform .2s ease, color .2s ease, text-shadow .2s ease; }
.res-block > h2:hover { transform: translateY(-3px); color: var(--plum); text-shadow: 0 1px 16px rgba(99,40,92,.28); }

/* education entries: no left bar, but keep the 20px indent so their text lines up
   with the experience entries below (which sit inside their own left-bar padding) */
.rz-edu { padding-left: 20px; }

/* ============================================================ ROUND 72 — corgi intro hint + arrow centering; roles fade plum→gray; resume underline stays put; about cursive fade-push + serif spacing; bigger uncut image hover ============================================================ */
/* the "use arrow keys to move" hint shown beside the corgi on first click */
.corgi-hint { position: absolute; bottom: 6px; white-space: nowrap; font: 600 12px/1 var(--ui); color: var(--plum); background: rgba(255,255,255,.85); padding: 5px 10px; border-radius: 999px; box-shadow: 0 2px 7px rgba(54,49,51,.2); opacity: 0; transition: opacity .2s ease; pointer-events: none; z-index: 7; }
.corgi-hint.in { opacity: 1; }
/* nudge the up-arrow glyph down a touch more so it sits centered in its key */
.cdp-up .cdp-g { transform: translateY(2px); }

/* roles animate in tinted plum, then settle to the usual dark gray */
.roles.rw-go .rw { animation: rolePush .62s cubic-bezier(.2,.7,.3,1) both; }
@keyframes rolePush {
  0%   { opacity: 0; transform: translateY(10px); color: var(--plum); }
  45%  { opacity: 1; transform: translateY(0); color: var(--plum); }
  100% { opacity: 1; transform: translateY(0); color: rgba(54,49,51,.85); }
}

/* resume heading hover: the label lifts + glows, but the little underline stays put */
.res-block > h2::after { transition: transform .2s ease; }
.res-block > h2:hover::after { transform: translateY(3px); }

/* keep the space between a bare-text serif word and the cursive that follows it
   (inline-block was swallowing the trailing space) */
.seg-h .seg { white-space: pre-wrap; }

/* about section cursive (life gallery, miss kaya): smooth fade + push up, no bounce */
.section h2.seg-h.seg-go .seg-float { animation: leadUp .7s cubic-bezier(.22,.72,.28,1) both; }

/* life gallery: bigger lift on hover, with room so the drop shadow isn't clipped */
.gal-wrap .marquee { padding: 78px 0; }
.gal-wrap .marquee img:hover { transform: scale(1.2) translateY(-5px); z-index: 6; box-shadow: 0 16px 34px rgba(54,49,51,.4); }

/* ============================================================ ROUND 73 — restore the gentle roles push; drop the about-cursive hover; lift the corgi hint clear of the footer bar ============================================================ */
/* roles push travels the full duration again (gentle), still tinted plum then settling gray */
.roles.rw-go .rw { animation: rolePush .55s cubic-bezier(.2,.7,.3,1) both; }
@keyframes rolePush {
  0%   { opacity: 0; transform: translateY(10px); color: var(--plum); }
  55%  { color: var(--plum); }
  100% { opacity: 1; transform: translateY(0); color: rgba(54,49,51,.85); }
}

/* no hover treatment on the life gallery / miss kaya cursive */
.section h2 .script-accent,
.section h2 .script-accent:hover { translate: 0 0; text-shadow: none; transition: none; }

/* keep the "use arrow keys" bubble above the footer's purple divider */
.corgi-hint { bottom: 18px; }

/* ============================================================ ROUND 74 — life gallery back to its old height; hover now grows the photo modestly and pushes its neighbours aside (small shadow, no leap off the page) ============================================================ */
.gal-wrap .marquee { padding: 34px 0; }
.gal-wrap .marquee img { transition: transform .32s cubic-bezier(.2,.7,.3,1), box-shadow .32s ease; }
.gal-wrap .marquee img:hover { transform: scale(1.14); z-index: 6; box-shadow: 0 3px 8px rgba(54,49,51,.2); }

/* ============================================================ ROUND 75 — galleries: scroll pauses only over a photo (JS sets it on the track); the band itself never pauses since the base rule is now scoped to the welcome bar ============================================================ */

/* ============================================================ ROUND 76 — D-pad now uses centered SVG arrows, so no per-glyph nudging is needed ============================================================ */
.cdp-g, .cdp-up .cdp-g, .cdp-down .cdp-g { transform: none; }

/* ============================================================ ROUND 77 — mobile footer restructured to design 2b: grouped 2-col nav + email, then a full-width return-to-top bar closing the page ============================================================ */
@media (max-width: 640px) {
  .foot { display: flex; flex-direction: column; align-items: stretch; text-align: left; gap: 22px; }
  /* quick nav: a mono label over a real two-column list */
  .foot .quick { order: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 20px; text-align: left; }
  .foot .quick .label { grid-column: 1 / -1; font-size: 0; line-height: 1; margin: 0 0 4px; }
  .foot .quick .label::before { content: "quick nav"; font-family: var(--ui); font-size: .64rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(54,49,51,.5); }
  .foot .quick a { margin: 0; padding: 9px 2px; font-size: 1.05rem; }
  /* email sits under a hairline */
  .foot .foot-email { order: 2; text-align: left; border-top: 1px solid rgba(54,49,51,.14); padding-top: 18px; }
  /* return to top: a wide bar that closes the footer, edge to edge */
  .foot .to-top { order: 3; margin: 4px -24px -30px; height: 52px; display: flex; align-items: center; justify-content: center; gap: 9px; background: rgba(255,255,255,.4); border-top: 1px solid rgba(54,49,51,.12); font-style: italic; font-size: .96rem; color: var(--plum); }
  .foot .to-top .circle { width: auto; height: auto; border: none; }
  .foot .to-top .circle svg { width: 15px; height: 15px; }
  .foot .to-top:hover .circle { background: none; color: var(--plum); }
}

/* ============================================================ ROUND 78 — camera-lens lightbox for the about galleries (click a photo to open) ============================================================ */
.cam { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 30px; background: rgba(60,54,50,.34); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity .22s ease; }
.cam.cam-in { opacity: 1; }
.cam[hidden] { display: none; }
.cam-stage { display: flex; align-items: center; gap: 16px; position: relative; }

/* the lens frame */
.cam-lens { position: relative; margin: 0; background: #F6F1E9; border: 1px solid rgba(99,40,92,.22); border-radius: 20px; padding: 18px 18px 14px; box-shadow: 0 40px 90px rgba(40,26,40,.42); --lbh: min(58vh, 500px); --lbw: calc(var(--lbh) * 0.78); animation: lbPop .34s cubic-bezier(.2,.9,.3,1) both; }
@keyframes lbPop { 0% { opacity: 0; transform: scale(.96) translateY(8px); } 100% { opacity: 1; transform: none; } }

.cam-top { display: flex; justify-content: space-between; align-items: center; gap: 18px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .16em; color: var(--plum); margin-bottom: 12px; }
.cam-rec { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.cam-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); animation: lbBlink 1.4s steps(1, end) infinite; }
@keyframes lbBlink { 0%, 100% { opacity: 1; } 50% { opacity: .15; } }
.cam-exif { color: #9d7d99; white-space: nowrap; }

.cam-photo { position: relative; width: var(--lbw); height: var(--lbh); border-radius: 8px; overflow: hidden; background: #e9e2d6; }
.cam-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cam-photo.cam-dev .cam-img { animation: lbDevelop .5s ease both; }
@keyframes lbDevelop { 0% { opacity: 0; transform: scale(1.05); filter: brightness(2.3) contrast(.9); } 45% { opacity: 1; } 100% { opacity: 1; transform: none; filter: none; } }

/* focus reticle overlay */
.cam-reticle { position: absolute; inset: 0; pointer-events: none; }
.cam-c { position: absolute; width: 30px; height: 30px; filter: drop-shadow(0 1px 2px rgba(40,20,40,.5)); }
.cam-tl { top: 9px; left: 9px; border-top: 2.5px solid #F6F1E9; border-left: 2.5px solid #F6F1E9; border-radius: 3px 0 0 0; }
.cam-tr { top: 9px; right: 9px; border-top: 2.5px solid #F6F1E9; border-right: 2.5px solid #F6F1E9; border-radius: 0 3px 0 0; }
.cam-bl { bottom: 9px; left: 9px; border-bottom: 2.5px solid #F6F1E9; border-left: 2.5px solid #F6F1E9; border-radius: 0 0 0 3px; }
.cam-br { bottom: 9px; right: 9px; border-bottom: 2.5px solid #F6F1E9; border-right: 2.5px solid #F6F1E9; border-radius: 0 0 3px 0; }
.cam-focus { position: absolute; top: 50%; left: 50%; width: 74px; height: 74px; margin: -37px 0 0 -37px; border: 1.5px solid rgba(246,241,233,.9); border-radius: 4px; animation: lbPulse 2.4s ease-in-out infinite; }
@keyframes lbPulse { 0%, 100% { opacity: .9; transform: scale(1); } 50% { opacity: .35; transform: scale(1.12); } }
.cam-cross-v { position: absolute; top: 50%; left: 50%; width: 1px; height: 16px; margin: -8px 0 0 0; background: rgba(246,241,233,.85); }
.cam-cross-h { position: absolute; top: 50%; left: 50%; width: 16px; height: 1px; margin: 0 0 0 -8px; background: rgba(246,241,233,.85); }

.cam-bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-top: 12px; font-family: 'JetBrains Mono', ui-monospace, monospace; color: var(--plum); }
.cam-cap { font-size: 12.5px; letter-spacing: .02em; }
.cam-count { font-size: 11px; color: #9d7d99; }

/* close button */
.cam-close { position: absolute; top: -13px; right: -13px; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--plum); background: var(--plum); color: #F6F1E9; cursor: pointer; display: grid; place-items: center; box-shadow: 0 4px 12px rgba(40,20,40,.32); transition: transform .18s ease; }
.cam-close svg { width: 15px; height: 15px; }
.cam-close:hover { transform: rotate(90deg) scale(1.09); }

/* prev / next arrows */
.cam-nav { flex: none; width: 54px; height: 54px; border-radius: 50%; border: 1.5px solid var(--plum); background: #F6F1E9; color: var(--plum); cursor: pointer; display: grid; place-items: center; box-shadow: 0 6px 18px rgba(40,20,40,.26); opacity: .94; transition: transform .16s ease, background .16s ease, color .16s ease, opacity .16s ease; }
.cam-nav svg { width: 22px; height: 22px; }
.cam-nav:hover { background: var(--plum); color: #F6F1E9; opacity: 1; }
.cam-prev:hover { transform: translateX(-3px) scale(1.06); }
.cam-next:hover { transform: translateX(3px) scale(1.06); }

@media (max-width: 640px) {
  .cam { padding: 16px; }
  .cam-lens { --lbw: min(84vw, calc(62vh * .78)); --lbh: calc(var(--lbw) / .78); border-radius: 16px; padding: 14px 14px 12px; }
  /* arrows float over the photo edges so the frame can stay large */
  .cam-nav { position: absolute; top: 50%; width: 42px; height: 42px; margin-top: -21px; opacity: .86; box-shadow: 0 4px 12px rgba(40,20,40,.34); }
  .cam-nav svg { width: 17px; height: 17px; }
  .cam-prev { left: 4px; } .cam-next { right: 4px; }
  .cam-prev:hover { transform: scale(1.06); } .cam-next:hover { transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .lb, .cam-lens, .cam-dot, .cam-focus, .cam-photo.cam-dev .cam-img { animation: none; }
}

/* ROUND 78 fix — keep the caption on one line and the counter clear of it */
.cam-bottom { align-items: baseline; }
.cam-cap { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cam-count { flex: none; }

/* ROUND 78 fix 2 — lock the top/bottom rows to the photo width so a long caption
   ellipsizes instead of stretching the frame (keeps every photo the same modal size) */
.cam-top, .cam-bottom { width: var(--lbw); box-sizing: border-box; }

/* ============================================================ ROUND 79 — about galleries: bigger photos + tighter band (less empty space above/below); flowers & squares pulled back onto the photo edges; kaya's nudged so they don't line up with the life gallery's ============================================================ */
.marquee img { height: 320px; }
.gal-wrap .marquee { padding: 24px 0; }
.gal-wrap .marquee img:hover { transform: scale(1.1); box-shadow: 0 2px 6px rgba(54,49,51,.2); }

/* accents sit on the photo's top/bottom edges again (24px padding pulled the photos in) */
.gal-accent.a1 { top: 6px; }
.gal-accent.a3 { top: 10px; }
.gal-accent.a4 { top: 12px; }
.gal-accent.a2 { bottom: 8px; }
.gal-accent.a5 { bottom: 6px; }
.gal-accent.a6 { top: auto; bottom: 8px; }

/* kaya's flowers/squares shifted sideways so they don't align with the life gallery's above */
.kaya-wrap .gal-accent.a1 { left: 10%; }
.kaya-wrap .gal-accent.a2 { right: 15%; }
.kaya-wrap .gal-accent.a3 { right: 31%; }

/* ============================================================ ROUND 80 — case studies: let the reading column shrink to the phone width. The heval/audit tables have a min-width and, as a grid item, .cs-read defaulted to min-width:auto — so the whole write-up was forced as wide as the table. The tables scroll on their own inside .heval-wrap. ============================================================ */
.cs-read { min-width: 0; }
.cs-read .heval-wrap { max-width: 100%; }

/* on phones: the simple 3-column findings table wraps to fit; the wide 6-column
   comparison audit keeps legible columns and scrolls sideways inside its wrap */
@media (max-width: 640px) {
  .cs-read table.heval { min-width: 0; font-size: .82rem; }
  .cs-read table.heval th, .cs-read table.heval td { padding: 8px 9px 8px 0; }
  .cs-read table.heval th:first-child, .cs-read table.heval td:first-child { padding-right: 10px; }
  .cs-read table.cs-audit { min-width: 620px; font-size: .8rem; }
}

/* ============================================================ ROUND 81 — card year moved to the end of the title/header line (was a separate eyebrow above) ============================================================ */
.feat-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin: 0 0 12px; }
.feat-head .feat-title { margin: 0; flex: 1 1 auto; min-width: 0; }
.mini-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 8px; }
.mini-head .mini-title { margin: 0; flex: 1 1 auto; min-width: 0; }
.feat-head .fe-year, .mini-head .fe-year { flex: none; }

/* ============================================================ ROUND 82 — reveal on a 3D layer so the card doesn't sub-pixel-snap on its final frame ============================================================ */
@keyframes revealUp { from { opacity: 0; transform: translate3d(0,22px,0); } to { opacity: 1; transform: translate3d(0,0,0); } }

/* ============================================================ ROUND 83 — hold animated elements on a stable GPU layer through AND after the animation, so they don't re-rasterize / sub-pixel-snap on the final frame (the tiny end-of-animation jitter) ============================================================ */
.reveal.in,
.lb-h.lb-go .ltr,
.float-el.float-go,
.seg-h.seg-go .seg-float,
.seg-h.seg-go .seg-smooth,
.roles.rw-go .rw,
.lead-anim.lead-go { will-change: transform; backface-visibility: hidden; }

/* ============================================================ ROUND 85 — featured card image overflow on narrow mobile screens ============================================================ */
/* Grid items default to min-width:auto, so the featured card's image could
   force its column (and the whole page) wider than the viewport on mobile
   browsers that don't cap replaced-element min-content the way desktop Chrome
   does. Let the tracks shrink, and cap the images as a belt-and-suspenders. */
.feat-card > *, .feat-research > * { min-width: 0; }
.feat-thumb { min-width: 0; }
.feat-thumb img, .mini-thumb img { max-width: 100%; }