/* ============================================================
   Janet Xie — Instructional Design Portfolio
   Modern, soft, mainly-yellow. Minimal but slightly playful
   micro-interactions (underline draws, gentle rotate-on-hover).
   Edit tokens below to re-skin the whole site.
   ============================================================ */

:root {
  /* Palette — mostly neutral, yellow as the accent */
  --paper:       #FFFFFF;
  --cream:       #FBF8F2;
  --cream-deep:  #F3ECDA;
  --ink:         #211D17;
  --ink-soft:    #665C4C;
  --ink-faint:   #9C9280;
  --line:        #ECE3D0;

  --yellow:      #FFCB3D;
  --yellow-soft: #FFF3D2;
  --yellow-deep: #F0B400;
  --gold-text:   #8C5E0B; /* readable warm-gold for links/accents on light bg */
  --charcoal:    #26221B;
  --clay:        #BD7A5B;

  --font-display: "Space Grotesk", "Arial Black", sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --container: 1120px;
  --radius:    18px;
  --radius-sm: 12px;

  --shadow-sm: 0 2px 10px rgba(33, 29, 23, 0.07);
  --shadow:    0 10px 28px -8px rgba(33, 29, 23, 0.15);
  --shadow-lg: 0 18px 38px -12px rgba(33, 29, 23, 0.22);

  --bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* Safety net for narrow viewports: a handful of decorative elements
   (blurred hero blobs, badges) are deliberately positioned partway off
   their container's edge and aren't meant to be clipped there — but nothing
   on the page is meant to scroll horizontally, so contain any of that
   bleed at the document level instead of letting it open up page-wide
   horizontal scroll on a narrow phone. */
html, body { overflow-x: hidden; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.12;
  color: var(--ink);
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.3rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.3rem); }
h3 { font-size: 1.3rem; }

/* Typographic hygiene: never let a heading break down to a single dangling
   word, and avoid orphaned words on the last line of body copy. Both are
   no-ops in browsers that don't support text-wrap yet — they just fall
   back to normal wrapping. */
h1, h2, h3, h4 { text-wrap: balance; }
p, li, .lead { text-wrap: pretty; }

p { margin: 0 0 1rem; }
a { color: var(--gold-text); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.section { padding: clamp(48px, 8vw, 96px) 0; }
.section-tight { padding: clamp(20px, 3vw, 32px) 0; }

.eyebrow {
  display: inline-block;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: 12px;
  text-decoration: underline wavy var(--yellow-deep) 2px;
  text-underline-offset: 5px;
}

.lead { font-size: 1.15rem; color: var(--ink-soft); max-width: 62ch; }
/* Only forced onto one line on wide-enough viewports — on narrow screens
   an un-wrapping line would either overflow off the edge or force the
   whole page to scroll horizontally to read it. */
@media (min-width: 700px) {
  .lead--nowrap { white-space: nowrap; }
}
.center { text-align: center; }
.center .lead { margin-left: auto; margin-right: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.96rem;
  padding: 13px 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.3s var(--bounce), box-shadow 0.25s ease, background 0.2s ease;
  text-decoration: none;
}
.btn:hover { text-decoration: none; transform: translateY(-3px); }

.btn-primary {
  background: var(--yellow);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--yellow-deep); box-shadow: var(--shadow); }

.btn-secondary {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
}
.btn-secondary:hover { border-color: var(--yellow-deep); box-shadow: var(--shadow); }

/* Chevron back-link */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--gold-text);
  text-decoration: none;
  transition: gap 0.2s ease;
}
.back-link:hover { text-decoration: none; gap: 11px; }
.back-link .chevrons { letter-spacing: -2px; font-size: 1.1em; }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
}
/* Keep the sticky header from covering anchor-linked sections when jumped to */
section[id] { scroll-margin-top: 84px; }
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}
.nav-logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--ink);
  text-decoration: none;
}
.nav-logo:hover { text-decoration: none; }
.nav-logo .dot { color: var(--yellow-deep); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  position: relative;
  color: var(--ink-soft);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 8px 2px;
  text-decoration: none;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 3px;
  width: 0; height: 2px;
  background: var(--yellow-deep);
  border-radius: 2px;
  transition: width 0.25s ease;
}
.nav-links a:hover { color: var(--ink); text-decoration: none; }
.nav-links a:hover::after,
.nav-links a.active::after { width: 100%; }
.nav-links a.active { color: var(--ink); }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span {
  display: block;
  width: 22px; height: 2px;
  background: var(--ink);
  margin: 5px 0;
  border-radius: 2px;
  transition: 0.25s;
}

/* ---------- Hero ---------- */
.hero { position: relative; padding: clamp(44px, 7vw, 84px) 0 clamp(36px, 5vw, 60px); }
.hero .container { position: relative; z-index: 1; }
.hero::before, .hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  filter: blur(48px);
  pointer-events: none;
  border-radius: 45% 55% 60% 40% / 50% 45% 55% 50%;
}
.hero::before { width: 320px; height: 320px; top: -50px; right: 6%; background: var(--yellow); opacity: 0.5; }
.hero::after  { width: 260px; height: 260px; bottom: -70px; left: 1%; background: var(--clay); opacity: 0.24; }
@media (prefers-reduced-motion: no-preference) {
  .hero::before { animation: blob-float 16s ease-in-out infinite, blob-morph 20s ease-in-out infinite; }
  .hero::after  { animation: blob-float 20s ease-in-out infinite reverse, blob-morph 24s ease-in-out infinite; }
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: center;
}
.hero-greeting {
  display: block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--gold-text);
  margin-bottom: 10px;
}
.hero-copy h1 {
  font-size: clamp(2.5rem, 5.6vw, 4rem);
  margin-bottom: 30px;
}
.hero-copy h1 .highlight {
  background: linear-gradient(to bottom, transparent 58%, var(--yellow) 58%);
  padding: 0 3px;
}
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }

/* Soft rounded avatar block */
.avatar {
  aspect-ratio: 1;
  border-radius: var(--radius);
  background: var(--yellow-soft);
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  transition: box-shadow 0.3s ease;
}
.avatar:hover { box-shadow: var(--shadow-lg); animation-play-state: paused; }
@media (prefers-reduced-motion: no-preference) {
  .avatar { animation: avatar-bob 4.5s ease-in-out infinite; }
}
.avatar .initials {
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 4.6rem);
  color: var(--ink);
  font-weight: 700;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); }
/* The interactive "hats I wear" embed that replaced the homepage avatar photo.
   Forcing this into a square kept clipping the (portrait-shaped) content
   inside it, so height is no longer fixed here — script.js measures the
   iframe's actual rendered content height once it loads and sets this
   element's height inline to match exactly, so it's never too short. The
   height below is just a same-ish placeholder shown before that JS runs. */
.hats-embed {
  display: block;
  width: 100%;
  max-width: 560px;
  height: 480px;
  margin: 0 auto;
  border: 0;
}

.avatar-badge {
  position: absolute;
  bottom: -14px; left: 20px;
  background: var(--ink);
  color: var(--paper);
  padding: 9px 18px;
  font-size: 0.82rem;
  font-weight: 700;
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}

/* ---------- Skill bars (tools & skills) ---------- */
.skill-bars {
  display: grid;
  gap: 20px;
  max-width: 640px;
  margin: 0 auto;
}
.skill-bar-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 7px;
}
.skill-name { font-weight: 700; font-size: 0.96rem; color: var(--ink); }
.skill-pct { font-size: 0.86rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.skill-track {
  height: 10px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.skill-fill {
  height: 100%;
  width: 0;
  background: var(--yellow);
  border-radius: 999px;
  transition: width 1.1s ease;
}
.skill-bar.in .skill-fill { width: var(--pct); }

/* ---------- Feature grid (What I do) ---------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
.feature {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  text-decoration: none;
  transition: transform 0.3s var(--bounce), box-shadow 0.25s ease;
}
.feature:hover { transform: translateY(-5px); box-shadow: var(--shadow); text-decoration: none; }
/* margin-top:auto pins this to the bottom of the card regardless of how many
   lines the title/description above it wrap to, so it lands at the same
   height across every card in the row instead of trailing the text. */
.feature .see-more { display: block; margin-top: auto; padding-top: 14px; font-weight: 700; font-size: 0.88rem; color: var(--gold-text); }
.feature .tag-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  margin-bottom: 16px;
}
.feature h3 { font-size: 1.1rem; }
/* "Curriculum & Game Design" is the one title in the What-I-Do row long
   enough to wrap to a second line at the card's width — nudge it down just
   enough to stay on one line, matching the other three titles. */
.feature h3.feature-title-tight { font-size: 0.98rem; white-space: nowrap; }
.feature p { color: var(--ink-soft); font-size: 0.95rem; margin: 0; }

/* Hover-to-reveal "How I think" cards: only the framework name shows at
   rest; hovering (or focusing, for keyboard users) fades it out and fades
   the description in over the same spot, so the grid stays compact and
   every card resolves to a single line of text until you engage it. */
.think-card {
  position: relative;
  min-height: 148px;
  cursor: default;
  overflow: hidden;
}
/* The site-wide .reveal fade brings elements in via opacity, which — on a
   solid white card sitting on the section's cream background — reads as a
   yellow tint mid-transition. Since these cards stagger in one after
   another, that leaves some still tinted while their neighbors have
   already settled to white. Keep the card's own background opaque and
   only animate its slide-up motion (still governed by .reveal/.reveal.in
   below) so every card is the same white throughout. */
.feature.think-card.reveal { opacity: 1; }
.think-card .think-face,
.think-card p {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.think-card .think-face { padding: 0 8px; }
.think-card h3 { margin: 0; }
.think-card .think-hint {
  margin-top: 8px;
  font-size: 0.72rem;
  color: var(--ink-soft);
  opacity: 0.55;
  letter-spacing: 0.02em;
}
.think-card p { padding: 0 4px; opacity: 0; transform: translateY(8px); pointer-events: none; }
.think-card:hover .think-face,
.think-card:focus .think-face,
.think-card:focus-within .think-face { opacity: 0; transform: translateY(-8px); }
.think-card:hover p,
.think-card:focus p,
.think-card:focus-within p { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .think-card .think-face, .think-card p { transition: none; }
}
/* A colorful inline-SVG icon used in place of .tag-num where the source
   material's own artwork (e.g. the LEGO minifig torso) should carry
   through rather than a generic numbered badge. */
.feature .feature-icon { display: block; width: 52px; height: 52px; margin-bottom: 16px; }

/* ---------- Portfolio rows: category label (left) + cards (right) ---------- */
.portfolio-row {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 40px;
  align-items: start;
  padding: 32px 0;
  border-bottom: 1px solid var(--line);
}
.portfolio-row-label { position: sticky; top: 92px; }
.portfolio-row-label h2 { font-size: 1.5rem; margin-bottom: 8px; }
.portfolio-row-label p { color: var(--ink-soft); font-size: 0.95rem; margin: 0; }

/* ---------- Project cards: picture on top, plain body below ---------- */
.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 22px;
}
.project-card {
  background: var(--paper);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: transform 0.35s var(--bounce), box-shadow 0.3s ease;
}
.project-card:hover { text-decoration: none; transform: translateY(-7px); box-shadow: var(--shadow-lg); }

/* Picture / thumbnail area — swap the placeholder monogram for a real <img> */
.project-thumb {
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
}
.project-thumb img { width: 100%; height: 100%; object-fit: cover; }
.project-thumb .thumb-mark { font-family: var(--font-display); font-weight: 700; font-size: 2.1rem; letter-spacing: 0.02em; }

.project-thumb.on-yellow { background: var(--yellow); color: var(--ink); }
.project-thumb.on-slate  { background: var(--yellow-soft); color: var(--ink); }
.project-thumb.on-coral,
.project-thumb.on-plum   { background: var(--clay); color: var(--paper); }
.project-thumb.on-sage   { background: var(--charcoal); color: var(--paper); }

.project-card .project-body { padding: 22px 24px 24px; flex: 1; display: flex; flex-direction: column; }
.project-card .kicker {
  display: inline-block;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gold-text); margin-bottom: 10px;
}
.project-card h3 { color: var(--ink); margin-bottom: 10px; }
.project-card p { color: var(--ink-soft); font-size: 0.96rem; margin-bottom: 16px; }
.project-card .project-link { margin-top: auto; font-weight: 700; font-size: 0.92rem; color: var(--gold-text); text-decoration: underline; }

/* "Want to see more?" filler card — sits in a row with too few real
   projects to fill the grid on its own, pointing to a contact instead of
   a case study. Dashed and unfilled so it reads as an invitation, not
   another finished piece of work. */
.project-card--more {
  background: var(--cream);
  border: 1.5px dashed var(--line);
  box-shadow: none;
}
.project-card--more:hover { border-color: var(--yellow-deep); background: var(--yellow-soft); }
.project-more-body {
  flex: 1;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.project-card--more h3 { margin-bottom: 8px; }
.project-card--more p { margin-bottom: 16px; }

@media (max-width: 760px) {
  .portfolio-row { grid-template-columns: 1fr; gap: 16px; padding: 24px 0; }
  .portfolio-row-label { position: static; }
}

/* ---------- Featured work spotlight (tabs + crossfading panel) ---------- */
.spotlight {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}
.spotlight-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px 20px;
  background: var(--cream-deep);
  border-bottom: 1px solid var(--line);
}
.spotlight-tab {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--ink-soft);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 18px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.spotlight-tab:hover { border-color: var(--yellow-deep); color: var(--ink); }
.spotlight-tab.active { background: var(--yellow); border-color: transparent; color: var(--ink); }
/* Bias-Free Selling tab carries the same AI badge as the Generative AI
   pill in "What I build with" — same icon, same perched-on-the-corner
   placement, since this project is AI-powered too. */
.spotlight-tab--ai { position: relative; }

/* grid-template-columns:1fr (not the bare default "auto") keeps this single
   implicit track pinned to the container's actual width — otherwise it
   sizes to the widest stacked panel's max-content width (i.e. its
   longest line of text laid out with no wrapping at all) and everything
   after that point just runs off the edge instead of wrapping. */
.spotlight-panels { display: grid; grid-template-columns: 1fr; }
.spotlight-panel {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  min-width: 0;
  text-decoration: none;
  color: var(--ink);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.spotlight-panel.active { opacity: 1; pointer-events: auto; }
.spotlight-panel:hover { text-decoration: none; }
.spotlight-thumb { min-height: 240px; }
.spotlight-thumb .thumb-mark { font-size: 3rem; }
/* min-width:0 overrides the grid item's default min-width:auto, which
   would otherwise let the body column's content (the paragraph) push it
   wider than its 1.3fr track instead of wrapping within it. */
.spotlight-body { min-width: 0; padding: 34px; display: flex; flex-direction: column; justify-content: center; }
.spotlight-body .kicker { color: var(--gold-text); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 10px; }
.spotlight-body h3 { margin-bottom: 10px; }
.spotlight-body p { color: var(--ink-soft); margin-bottom: 16px; }
.spotlight-body .project-link { font-weight: 700; color: var(--gold-text); text-decoration: underline; }

@media (max-width: 640px) {
  .spotlight-panel { grid-template-columns: 1fr; }
  .spotlight-thumb { min-height: 160px; }
}

/* ---------- Two-up problem/solution ---------- */
.two-up {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.two-up .block {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--bounce), box-shadow 0.25s ease;
}
.two-up .block:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.two-up .block .glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  margin-bottom: 14px;
}
.two-up .block.problem .glyph { background: var(--clay); color: var(--paper); }
.two-up .block.solution .glyph { background: var(--yellow); color: var(--ink); }
.two-up .block h3 { text-transform: uppercase; font-size: 1rem; letter-spacing: 0.05em; }
.two-up .block p { color: var(--ink-soft); margin: 0; }

/* ---------- Pills / tags ---------- */
.pill-group { display: flex; flex-wrap: wrap; gap: 10px; }
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--yellow);
  border: 1px solid var(--yellow-deep);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
  transition: background 0.2s ease, transform 0.2s var(--bounce);
}
.pill:hover { background: var(--yellow-deep); transform: translateY(-2px); }
.pill-icon { width: 14px; height: 14px; flex-shrink: 0; fill: currentColor; }

/* Generative AI pill: the sparkle sits perched on the pill's top-left
   corner edge, like a badge. */
.pill--ai { position: relative; }
.pill-icon--badge {
  position: absolute;
  top: -6px;
  left: -6px;
  width: 16px;
  height: 16px;
  background: var(--charcoal);
  color: var(--yellow);
  border-radius: 50%;
  padding: 3px;
  box-sizing: content-box;
  box-shadow: 0 2px 6px rgba(33, 29, 23, 0.35);
}

/* ---------- Process steps ---------- */
.steps { display: grid; gap: 16px; }
.step {
  padding: 22px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--bounce), box-shadow 0.25s ease;
}
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
/* Icon and title sit in one row, vertically centered on each other. */
.step-head { display: flex; align-items: center; gap: 18px; }
.step .num {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.step-head h3 { margin: 0; font-size: 1.5rem; }
/* Body content hangs indented under the title, aligned past the icon. */
.step-body { margin-top: 12px; padding-left: 62px; }
.step p { margin: 0; color: var(--ink-soft); }
@media (max-width: 480px) {
  .step-body { padding-left: 0; }
}

/* ---------- Testimonials ---------- */
.quote-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.quote {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--bounce), box-shadow 0.25s ease;
}
.quote:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.quote p { font-size: 1.02rem; margin-bottom: 16px; }
.quote-author strong { display: block; font-size: 0.95rem; }
.quote-author span { font-size: 0.85rem; color: var(--ink-faint); }

/* ---------- CTA band (the "mainly yellow" moment) ---------- */
.cta-band {
  position: relative;
  overflow: hidden;
  background: var(--yellow);
  border-radius: var(--radius);
  padding: clamp(36px, 6vw, 56px);
  text-align: center;
  color: var(--ink);
  box-shadow: var(--shadow);
}
.cta-band::before, .cta-band::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(33, 29, 23, 0.08);
  pointer-events: none;
}
.cta-band::before { width: 200px; height: 200px; top: -60px; left: -40px; }
.cta-band::after  { width: 130px; height: 130px; bottom: -50px; right: 6%; background: rgba(33, 29, 23, 0.06); }
@media (prefers-reduced-motion: no-preference) {
  .cta-band::before { animation: blob-float 14s ease-in-out infinite; }
  .cta-band::after  { animation: blob-float 18s ease-in-out infinite reverse; }
}
.cta-band h2, .cta-band p, .cta-band a { position: relative; z-index: 1; }
.cta-band h2, .cta-band p { color: var(--ink); }
.cta-band p { opacity: 0.82; max-width: 48ch; margin: 0 auto 24px; }
.cta-band .btn-primary { background: var(--ink); color: var(--paper); box-shadow: none; }
.cta-band .btn-primary:hover { background: #000; }

/* ---------- About page ---------- */
.about-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 48px;
  align-items: start;
}
.prose p { color: var(--ink-soft); font-size: 1.05rem; }
.prose h2 { margin-top: 1.5em; }

.timeline { border-left: 2px solid var(--line); padding-left: 26px; margin-top: 10px; }
.timeline-item { position: relative; padding-bottom: 26px; }
.timeline-item::before {
  content: "";
  position: absolute;
  left: -32px; top: 5px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--yellow-deep);
  border: 3px solid var(--cream);
}
.timeline-item .when { font-size: 0.82rem; color: var(--gold-text); font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; }
.timeline-item h3 { margin: 4px 0 2px; font-size: 1.15rem; }
.timeline-item .where { color: var(--ink-soft); font-weight: 600; margin-bottom: 6px; }
.timeline-item p { color: var(--ink-soft); font-size: 0.96rem; margin: 0; }

/* ---------- Problem → Solution (side by side, color-coded, matched height) ---------- */
.ps-wrap {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 20px;
  margin: 4px 0 8px;
}
.ps-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 30px 32px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  position: relative;
  transition: transform 0.3s var(--bounce), box-shadow 0.25s ease;
}
.ps-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.ps-card.is-problem {
  background: linear-gradient(180deg, rgba(189, 122, 91, 0.12), rgba(189, 122, 91, 0.04));
  border: 1px solid rgba(189, 122, 91, 0.35);
}
.ps-card.is-solution {
  background: var(--yellow-soft);
  border: 1px solid var(--yellow-deep);
}
.ps-card .glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  margin-bottom: 14px;
  flex-shrink: 0;
}
.ps-card.is-problem .glyph { background: var(--clay); color: var(--paper); }
.ps-card.is-solution .glyph { background: var(--yellow-deep); color: var(--paper); }
.ps-card h3 {
  text-transform: uppercase;
  font-size: 1rem;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}
.ps-card.is-problem h3 { color: var(--clay); }
.ps-card.is-solution h3 { color: var(--gold-text); }
.ps-card p, .ps-card li { color: var(--ink-soft); }
.ps-card p { margin: 0 0 10px; }
.ps-card ul { padding-left: 20px; margin: 0 0 10px; }
.ps-card li { margin-bottom: 6px; }
.ps-card p:last-child, .ps-card ul:last-child, .ps-card li:last-child { margin-bottom: 0; }
.ps-connector {
  display: flex;
  align-items: center;
  justify-content: center;
}
.ps-connector span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  font-size: 1.25rem;
  font-weight: 700;
  box-shadow: var(--shadow);
  flex-shrink: 0;
}
@media (max-width: 760px) {
  .ps-wrap { grid-template-columns: 1fr; }
  .ps-connector { transform: rotate(90deg); margin: -6px 0; }
}

/* ---------- Case study ---------- */
.cs-header { position: relative; overflow: hidden; background: var(--paper); border-bottom: 1px solid var(--line); }
.cs-header::after {
  content: "";
  position: absolute;
  width: 220px; height: 220px;
  top: -60px; right: -40px;
  background: var(--yellow);
  opacity: 0.22;
  filter: blur(46px);
  border-radius: 50% 50% 45% 55% / 55% 45% 55% 45%;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .cs-header::after { animation: blob-float 18s ease-in-out infinite, blob-morph 22s ease-in-out infinite; }
}
.cs-header .container { position: relative; z-index: 1; }
.cs-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.cs-meta-grid .k { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint); font-weight: 700; margin-bottom: 4px; }
.cs-meta-grid .v { font-weight: 700; }
.cs-meta-grid .v ul { margin: 0; padding-left: 18px; }
.cs-meta-grid .v li { margin-bottom: 4px; }
.cs-meta-grid .v li:last-child { margin-bottom: 0; }
/* A thin rule between each item keeps audience / role / tools reading
   as three distinct pieces of info without boxing them in. */
.cs-meta-grid > div { padding-left: 24px; border-left: 1px solid var(--line); }
.cs-meta-grid > div:first-child { padding-left: 0; border-left: none; }
@media (max-width: 700px) {
  .cs-meta-grid { grid-template-columns: 1fr; }
  .cs-meta-grid > div {
    padding-left: 0;
    padding-top: 16px;
    border-left: none;
    border-top: 1px solid var(--line);
  }
  .cs-meta-grid > div:first-child { padding-top: 0; border-top: none; }
}

.cs-body { margin: 0 auto; }
.cs-body h2 { margin-top: 1.7em; }
.cs-body p, .cs-body li { color: var(--ink-soft); font-size: 1.04rem; }
.cs-body ul, .cs-body ol { padding-left: 20px; }
.cs-body li { margin-bottom: 8px; }
/* Flags the instructional-design skills/methods named in the case study
   text (needs analysis, learning design, scripting, SME collaboration,
   prototyping, etc.) with a highlighter-style mark. */
.fw-normal { font-weight: 400; }
mark.skill {
  background: var(--yellow-soft);
  color: var(--ink);
  padding: 0 4px;
  border-radius: 4px;
  font-weight: 600;
}

.video-embed {
  margin: 26px 0 10px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  background: var(--charcoal);
}
.video-embed video { width: 100%; max-height: 560px; display: block; }

.callout {
  background: var(--yellow-soft);
  border: 1px solid var(--yellow);
  border-radius: var(--radius);
  padding: 22px 26px;
  margin: 24px 0;
}
.callout p { color: var(--ink); margin: 0; }
.callout p:first-child strong { display: block; margin-bottom: 4px; }

.case-nav {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}

/* ---------- Case study screenshots ---------- */
.cs-hero-shot {
  margin: 28px 0 8px;
  text-align: center;
}
.cs-hero-shot img {
  display: inline-block;
  max-width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

/* One consistent treatment for every in-body screenshot: shown at its
   original size (never upscaled, only shrunk to fit on small screens),
   centered, same radius/border/shadow, caption directly beneath. Used
   exactly once per section that has a supporting image, right after
   the relevant text. */
.cs-figure { margin: 20px 0 28px; text-align: center; }
.cs-figure img {
  display: inline-block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.cs-figure figcaption {
  margin-top: 10px;
  font-size: 0.86rem;
  color: var(--ink-faint);
}
.step .cs-figure { margin: 16px 0 4px; }
/* GIF screen-recordings come in noticeably larger than the still
   screenshots — rein them in a little so they don't dominate the page. */
.cs-figure img[src$=".gif"] { max-width: min(100%, 780px); }

/* ---------- Step media: text left, picture right, matched height ---------- */
.step-media {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 24px;
  align-items: stretch;
  margin-top: 12px;
}
.step-media .step-text { display: flex; flex-direction: column; justify-content: center; }
.step-media .step-text > *:first-child { margin-top: 0; }
.step-media .step-text > *:last-child { margin-bottom: 0; }
.step-media .cs-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  text-align: left;
}
.step-media .cs-figure .img-wrap {
  flex: 1 1 auto;
  min-height: 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.step-media .cs-figure .img-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.step-media .cs-figure figcaption { margin-top: 8px; flex-shrink: 0; }
@media (max-width: 760px) {
  .step-media { grid-template-columns: 1fr; }
  .step-media .cs-figure { height: auto; }
  .step-media .cs-figure .img-wrap { aspect-ratio: 16 / 10; }
}

/* ---------- Sub-steps (a step broken into its own labeled parts) ---------- */
.substeps { display: grid; gap: 26px; margin-top: 18px; margin-bottom: 14px; }
.substep { padding-left: 18px; border-left: 3px solid var(--yellow); }
.substep h4 {
  font-size: 1.22rem;
  margin-bottom: 8px;
}
.substep p { margin: 0; }
.substep .cs-figure { margin: 16px 0 4px; }

/* ---------- Embedded live prototype ---------- */
.proto-embed {
  margin: 20px 0;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  background: var(--paper);
}
.proto-embed iframe { width: 100%; height: 640px; border: 0; display: block; }
@media (max-width: 640px) {
  .proto-embed iframe { height: 460px; }
}

/* ---------- Contact / Connect ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
/* No second column of content (the old demo contact form was removed since
   it didn't send anywhere) — center the remaining contact-info block
   instead of leaving it pinned to a lopsided half-width column. */
.contact-grid--solo { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.contact-grid--solo .contact-info { max-width: 420px; }
.contact-grid--solo .method { text-align: left; }
.contact-info .method { display: flex; gap: 14px; margin-bottom: 20px; align-items: flex-start; }
.contact-info .method .label-box {
  width: 40px; height: 40px; border-radius: var(--radius-sm);
  background: var(--yellow-soft); color: var(--gold-text);
  display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700;
  flex-shrink: 0;
}
.contact-info .method strong { display: block; }
.contact-info .method a, .contact-info .method span { color: var(--ink-soft); }

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  overflow: hidden;
  background: var(--charcoal);
  color: #C9BEA6;
  padding: 48px 0 28px;
  margin-top: 36px;
}
.site-footer::before {
  content: "";
  position: absolute;
  width: 220px; height: 220px;
  bottom: -80px; right: 4%;
  background: var(--yellow);
  opacity: 0.1;
  filter: blur(54px);
  border-radius: 50%;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .site-footer::before { animation: blob-float 20s ease-in-out infinite; }
}
.site-footer .container { position: relative; z-index: 1; }
.site-footer a { color: #EDE3CC; transition: color 0.2s ease; }
.site-footer a:hover { color: var(--yellow); }
.footer-top { display: flex; justify-content: space-between; gap: 36px; flex-wrap: wrap; margin-bottom: 32px; }
.footer-brand { max-width: 300px; }
.footer-brand .nav-logo { color: #fff; margin-bottom: 10px; display: inline-block; }
.footer-brand p { color: #A79B84; font-size: 0.94rem; }
.footer-cols { display: flex; gap: 56px; flex-wrap: wrap; }
.footer-col h4 { color: #fff; font-family: var(--font-body); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 12px; }
.footer-col a { display: block; color: #A79B84; margin-bottom: 9px; font-size: 0.94rem; text-decoration: none; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 22px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 0.86rem; color: #8A806C;
}

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(18px) scale(0.99); transition: opacity 0.55s ease, transform 0.55s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Shared motion keyframes ---------- */
@keyframes blob-float {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50%      { transform: translate(18px, -14px) rotate(9deg); }
}
@keyframes blob-morph {
  0%, 100%  { border-radius: 45% 55% 60% 40% / 50% 45% 55% 50%; }
  33%       { border-radius: 60% 40% 35% 65% / 55% 60% 40% 45%; }
  66%       { border-radius: 40% 60% 50% 50% / 60% 40% 60% 40%; }
}
@keyframes avatar-bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-8px) rotate(-1deg); }
}

/* ---------- Confetti burst (click easter egg) ---------- */
.confetti-dot {
  position: fixed;
  top: 0; left: 0;
  width: 8px; height: 8px;
  border-radius: 3px;
  pointer-events: none;
  z-index: 9999;
  animation: confetti-burst 0.7s ease-out forwards;
}
@keyframes confetti-burst {
  0%   { transform: translate(-50%, -50%) rotate(0deg) scale(1); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--spin)) scale(0.4); opacity: 0; }
}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .hero-grid, .about-grid, .contact-grid { grid-template-columns: 1fr; gap: 32px; }
  .nav-links {
    position: fixed;
    inset: 68px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: 16px 24px;
    gap: 4px;
    /* -100% alone (relative to the menu's own height) isn't reliably enough
       to clear its 68px top offset — the box can still poke a sliver of its
       last link into view. Subtract the offset explicitly so it's always
       fully off-screen regardless of how tall the menu's content gets. */
    transform: translateY(calc(-100% - 68px));
    transition: transform 0.3s ease;
    box-shadow: var(--shadow);
  }
  .nav-links.open { transform: translateY(0); }
  .nav-links a { padding: 12px 4px; }
  .nav-links a::after { display: none; }
  .nav-toggle { display: block; }
  .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2) { opacity: 0; }
  .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

@media (max-width: 540px) {
  .hero-cta { flex-direction: column; }
  .hero-cta .btn { width: 100%; justify-content: center; }
  .footer-top { flex-direction: column; }
}