/* ============================================================
   HOME — All page-specific styles
   ============================================================ */

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* Shared utilities */
.archive-teaser { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:40px; margin-top:64px; padding:40px; border:1px solid var(--color-border); border-radius:12px; background:var(--color-surface); }
.archive-teaser__eyebrow { font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--home-muted); }
.archive-teaser h2 { margin:14px 0; font-size:clamp(26px,3vw,38px); line-height:1.15; font-weight:500; letter-spacing:-.04em; }
.archive-teaser h2 > span { display:inline-block; margin-left:10px; transition:transform .2s ease; }
.archive-teaser__copy > p:not(.archive-teaser__eyebrow) { color:var(--home-muted); font-size:14px; line-height:1.7; }
.archive-teaser__link { display:inline-block; margin-top:24px; font-size:13px; }
.archive-teaser__images { position:relative; display:flex; align-items:center; justify-content:center; gap:16px; height:220px; overflow:hidden; }
.archive-teaser__images img { flex:none; object-fit:contain; width:auto; height:190px; border-radius:6px; }
.archive-teaser__images img:nth-child(2) { width:55%; height:auto; }
.archive-teaser:is(:hover,:focus-visible) h2 > span { transform:translate(3px,-3px); }
.archive-teaser:focus-visible { outline:2px solid var(--color-text); outline-offset:6px; }
@media(max-width:767px) {
  .archive-teaser { grid-template-columns:1fr; gap:24px; padding:28px 24px; margin-top:48px; }
  .archive-teaser__images { height:170px; gap:12px; }
  .archive-teaser__images img { height:155px; }
}
@media(prefers-reduced-motion:reduce) { .archive-teaser h2 > span { transition:none; } }

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  border-radius: 100px;
  padding: var(--space-3) var(--space-6);
  transition: all var(--duration-fast) var(--ease-out);
  cursor: pointer;
  font-family: var(--font-sans);
}
.btn--primary { background: var(--color-text); color: var(--color-bg); border: none; }
.btn--primary:hover { opacity: .85; transform: translateY(-1px); }
.btn--ghost { border: 1px solid var(--color-border); color: var(--color-text); background: transparent; }
.btn--ghost:hover { background: var(--color-surface); }

.tag {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 100px;
  padding: var(--space-1) var(--space-3);
  letter-spacing: .02em;
}

/* Scroll animations */
[data-animate] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
[data-animate].visible { opacity: 1; transform: translateY(0); }
[data-animate-delay="1"] { transition-delay: 80ms; }
[data-animate-delay="2"] { transition-delay: 160ms; }

/* Section shared */
.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-12);
  gap: var(--space-4);
}
.section-title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.03em;
}
.section-count {
  font-size: var(--text-sm);
  color: var(--color-text-faint);
}

/* ── Introduction ─────────────────────────────────────────── */
:root { --home-muted: color-mix(in srgb, var(--color-text) 67%, var(--color-bg)); }
.sidebar__link { color:var(--home-muted); }
.hero-section { padding-top:56px; padding-bottom:40px; }
.hero-intro { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); align-items:start; gap:64px; }
.hero-heading { font-size:clamp(38px,4vw,60px); line-height:1.08; letter-spacing:-.015em; font-weight:500; }
.hero-identity { min-width:0; }
.hero-role { position:relative; display:inline-grid; grid-template-columns:minmax(0,max-content); align-items:center; max-width:100%; margin-top:9px; font-size:clamp(22px,2vw,30px); line-height:1.3; letter-spacing:-.025em; font-weight:400; color:var(--home-muted); }
.hero-role__accessible { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.hero-role__measure,.hero-role__visual { grid-area:1 / 1; white-space:nowrap; }
.hero-role__measure { display:grid; visibility:hidden; pointer-events:none; }
.hero-role__measure > span { grid-area:1 / 1; }
.hero-role__visual [data-role-prefix],.hero-role__visual [data-role-ending] { position:relative; }
.hero-role__visual [data-role-prefix]::after,.hero-role__visual [data-role-ending]::after { content:''; position:absolute; left:100%; top:.12em; height:.9em; width:1px; margin-left:2px; background:currentColor; opacity:0; pointer-events:none; }
.hero-role[data-role-state="editing"][data-role-caret="prefix"] [data-role-prefix]::after,.hero-role[data-role-state="editing"][data-role-caret="ending"] [data-role-ending]::after { opacity:.65; }
.hero-role[data-role-state="holding"] [data-role-ending]::after { animation:role-caret 1.2s ease-in-out 2; }
.hero-role__toggle { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; background:transparent; color:var(--color-text); cursor:pointer; }
.hero-role__toggle[hidden] { display:none; }
.hero-role__toggle:focus-visible { top:calc(100% + 8px); left:0; z-index:1; width:auto; height:auto; padding:6px 8px; clip-path:none; background:var(--color-bg); font-size:12px; outline:1px solid currentColor; outline-offset:3px; }
@keyframes role-caret { 0%,100% { opacity:0; } 25%,65% { opacity:.55; } }
.hero-summary { min-width:0; max-width:480px; }
.hero-work { max-width:52ch; margin-bottom:26px; font-size:16px; line-height:1.65; color:var(--color-text); text-wrap:pretty; }
.hero-quote { max-width:46ch; margin:24px 0 0; padding-left:14px; border-left:1px solid var(--color-border); }
.hero-sub { font-family:'Iowan Old Style', Baskerville, 'Palatino Linotype', Georgia, serif; font-size:18px; font-style:italic; font-weight:400; line-height:1.45; letter-spacing:-.015em; color:var(--home-muted); text-wrap:pretty; }
.hero-quote__credit { margin-top:6px; font-size:11px; line-height:1.5; color:var(--home-muted); }
.hero-resume { display:inline-flex; align-items:center; gap:18px; font-size:12px; padding-block:4px; }
.hero-resume span { transition:transform .3s ease; }
.hero-resume:hover span { transform:translate(3px,-3px); }

/* ── Selected work ────────────────────────────────────────── */
.work-section { padding-top:24px; padding-bottom:72px; scroll-margin-top:76px; }
.work-header { display:flex; align-items:baseline; justify-content:space-between; gap:24px; padding-block:20px; border-top:1px solid var(--color-border); }
.work-header h2 { font-size:14px; font-weight:500; letter-spacing:-.01em; }
.work-header > span { font-size:11px; color:var(--home-muted); }
.work-list { display:flex; flex-direction:column; gap:72px; }
.work-card { display:block; min-width:0; border-radius:8px; }
.work-card__media { position:relative; overflow:hidden; border-radius:8px; aspect-ratio:16/11; isolation:isolate; background:var(--color-surface); }
.work-card__media > img { width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.22,1,.36,1); }
.work-card:is(:hover,:focus-visible) .work-card__media > img { transform:scale(1.025); }
.work-card__caption { padding-top:24px; }
.work-card__company { font-size:11px; font-weight:500; line-height:1.6; margin-bottom:9px; letter-spacing:.02em; }
.work-card__company > span { color:var(--home-muted); font-weight:400; }
.work-card h3 { font-size:clamp(23px,2.2vw,32px); font-weight:500; letter-spacing:-.04em; line-height:1.2; text-wrap:balance; }
.work-card__arrow { display:inline-block; font-size:.7em; margin-left:10px; vertical-align:4%; transition:transform .4s cubic-bezier(.22,1,.36,1); }
.work-card:is(:hover,:focus-visible) .work-card__arrow { transform:translate(4px,-4px); }
.work-card__description { margin-top:14px; font-size:14px; line-height:1.65; color:var(--home-muted); max-width:55ch; text-wrap:pretty; }
.work-card__role { margin-top:18px; font-size:11px; line-height:1.7; color:var(--home-muted); }
.work-card__evidence { display:flex; align-items:baseline; gap:8px; margin-top:12px; padding-top:12px; border-top:1px solid var(--color-border); font-size:12px; line-height:1.6; }
.work-card__evidence > span { flex:none; color:var(--home-muted); }
.work-card--featured .work-card__media { aspect-ratio:16/9; }
.work-card__media--loopt { background:#dce6f5; }
.work-card__preview-hint { position:absolute; z-index:2; bottom:20px; right:20px; display:flex; align-items:center; gap:9px; font-size:10px; color:#fff; background:#0d1428b3; backdrop-filter:blur(12px); border:1px solid #ffffff24; border-radius:100px; padding:9px 13px; pointer-events:none; }
.preview-play { font-size:8px; }
.work-card__video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .4s ease; pointer-events:none; }
.work-card.is-previewing .work-card__video { opacity:1; }
.work-card.is-previewing .preview-play { opacity:.5; }
.work-card__caption--featured { display:grid; grid-template-columns:minmax(0,1fr); gap:22px; padding-top:26px; }
.work-card--featured h3 { display:flex; align-items:baseline; justify-content:space-between; gap:24px; font-size:clamp(28px,3vw,42px); line-height:1.18; letter-spacing:-.03em; }
.work-card--featured .work-card__arrow { flex:none; margin-left:0; }
.work-card__context { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:40px; align-items:start; padding-top:18px; border-top:1px solid var(--color-border); }
.work-card__context .work-card__description { margin-top:0; }
.work-card--featured .work-card__details .work-card__role { margin-top:0; }
.work-card--featured .work-card__details .work-card__evidence { margin-top:8px; padding-top:0; border-top:0; }
.work-pair { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:32px; }
.work-card__media--fyn { background:#dce9df; }
.phone-preview { position:absolute; width:36%; aspect-ratio:430/932; border:5px solid #1c2822; border-radius:23px; box-shadow:0 25px 50px #152c2530; overflow:hidden; transition:transform 1s cubic-bezier(.22,1,.36,1); background:#f2f5f7; }
.phone-preview img { width:100%; height:100%; object-fit:cover; object-position:top; }
.phone-preview--first { left:14%; top:10%; transform:rotate(-9deg); }
.phone-preview--second { left:51%; top:26%; transform:rotate(8deg); }
.work-card:is(:hover,:focus-visible) .phone-preview--first { transform:translateY(-8px) rotate(-7deg); }
.work-card:is(:hover,:focus-visible) .phone-preview--second { transform:translateY(-14px) rotate(6deg); }
.work-card__media--leap { background:#15152e; }
.work-card__media--leap > img { object-position:57% center; }
.work-card--horizontal { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); align-items:center; gap:48px; }
.work-card--horizontal .work-card__caption { padding-block:18px; }
.work-card--horizontal h3 { font-size:clamp(26px,2.7vw,38px); }
.work-card__media--smartyard { background:linear-gradient(135deg,#edf5ff,#d9e9fc 55%,#bdd4f0); }
.work-card__media--smartyard > img { object-fit:contain; padding:clamp(16px,2vw,32px); }
.more-work { margin-top:72px; }
.work-header--small { padding-top:22px; padding-bottom:28px; }
.work-card--compact { display:grid; grid-template-columns:minmax(200px,.65fr) minmax(0,1fr); align-items:center; gap:40px; max-width:1000px; }
.work-card--compact .work-card__caption { padding-block:8px; }
.work-card--compact .work-card__media { aspect-ratio:16/10; }
.work-card__media--bonde { background:#d9cdbd; }
.work-card__media--bonde > img { object-position:center 1.6%; }
.work-card__media--bonde > img,.work-card__media--bonde > video { object-fit:contain; background:#f1f0ec; }
.work-card__video[data-motion-state="playing"] { opacity:1; }
.work-motion-toggle { border:0; padding:8px 0; background:none; color:var(--home-muted); font:inherit; font-size:12px; cursor:pointer; text-decoration:underline; text-underline-offset:4px; }
.work-motion-toggle:focus-visible { outline:2px solid var(--color-text); outline-offset:5px; }
.work-card:focus-visible,.hero-resume:focus-visible { outline:2px solid var(--color-text); outline-offset:8px; }

@media(max-width:1100px) {
  .hero-intro { gap:28px; grid-template-columns:minmax(0,1fr); }
  .hero-identity { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:12px 24px; }
  .hero-heading { font-size:clamp(42px,5.5vw,56px); }
  .hero-role { margin-top:0; font-size:22px; }
  .hero-summary { max-width:none; }
  .hero-work { max-width:72ch; margin-bottom:18px; }
  .hero-quote { flex-basis:100%; margin-top:12px; }
  .work-card__context { gap:28px; }
  .work-card--horizontal { gap:32px; }
  .work-pair { gap:24px; }
}
@media(max-width:767px) {
  .hero-section { padding-top:32px; padding-bottom:28px; }
  .hero-intro { gap:24px; }
  .hero-heading { font-size:clamp(38px,6.5vw,48px); }
  .hero-role { font-size:20px; }
  .hero-work { font-size:15px; line-height:1.6; }
  .hero-sub { font-size:18px; }
  .work-section { padding-top:8px; }
  .work-header { padding-block:16px; gap:12px; }
  .work-header > span { font-size:10px; text-align:right; }
  .work-header h2 { font-size:12px; }
  .work-list { gap:44px; }
  .work-card__caption { padding-top:20px; }
  .work-card__caption--featured { gap:18px; padding-top:20px; }
  .work-card--featured h3 { gap:20px; font-size:clamp(28px,4.8vw,34px); }
  .work-card__context { grid-template-columns:minmax(0,1fr); gap:16px; padding-top:16px; }
  .work-card__preview-hint { display:none; }
  .work-pair { grid-template-columns:1fr; gap:44px; }
  .work-card--horizontal { grid-template-columns:1fr; gap:0; }
  .work-card--horizontal .work-card__caption { padding-top:20px; padding-bottom:0; }
  .work-card--horizontal h3 { font-size:28px; }
  .work-card--compact { grid-template-columns:1fr; gap:12px; }
  .more-work { margin-top:48px; }
  .work-header--small { align-items:start; padding-bottom:20px; }
  .work-card__description { font-size:14px; }
  .work-card__role { margin-top:16px; }
  .phone-preview { border-width:4px; border-radius:18px; }
  .sidebar__nav .sidebar__link[href="resume.html"] { display:block; }
}
@media(max-width:599px) {
  .hero-identity { display:block; }
  .hero-heading { font-size:clamp(38px,11.8vw,54px); line-height:1.05; }
  .hero-role { margin-top:12px; font-size:clamp(17px,4.6vw,21px); }
  .hero-quote { margin-top:20px; }
  .hero-sub { font-size:17px; }
  .work-card--featured .work-card__media { aspect-ratio:4/3; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  [data-animate] { opacity:1; transform:none; transition:none; }
  .work-card *, .hero-resume span { transition:none!important; }
  .work-card:is(:hover,:focus-visible) .work-card__media > img { transform:none; }
  .work-card__preview-hint { display:none; }
  .hero-role__visual [data-role-prefix]::after,.hero-role__visual [data-role-ending]::after { display:none; animation:none; }
}

/* ── About ────────────────────────────────────────────────── */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: var(--space-12);
  align-items: start;
}

.about-photo {
  position: sticky;
  top: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.about__photo-wrap {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,.35);
  transform: rotate(-1.5deg);
  transition: transform var(--duration-mid) var(--ease-out);
}

.about-photo:hover .about__photo-wrap {
  transform: rotate(0deg);
}

.about__photo-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
}

.about-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.about__heading {
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.04em;
  line-height: var(--leading-tight);
}

.about__bio {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}
.about__bio strong { color: var(--color-text); }

.about__skills {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.about__skills-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-text-faint);
}
.about__skills-list { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ── Experience ───────────────────────────────────────────── */
.exp-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.exp-item {
  display: flex;
  gap: var(--space-5);
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--color-border);
  align-items: flex-start;
}
.exp-item:last-child { border-bottom: none; }

.exp-logo {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.exp-logo img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.exp-logo__fallback {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-muted);
  display: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  letter-spacing: -0.02em;
}

.exp-content { flex: 1; }
.exp-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: 2px;
}
.exp-role {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  letter-spacing: -0.01em;
}
.exp-period {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  white-space: nowrap;
}
.exp-company {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.exp-client {
  color: var(--color-text-faint);
  font-size: var(--text-xs);
}
.exp-desc {
  font-size: var(--text-sm);
  color: var(--color-text-faint);
  line-height: 1.5;
}
.exp-item--education .exp-logo { border-style: dashed; }

/* ── Writing / Tools ──────────────────────────────────────── */
.writing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.writing-card {
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--color-surface);
  transition: border-color var(--duration-fast) ease;
}
.writing-card:hover { border-color: var(--color-text-muted); }

.writing-card--placeholder { opacity: .6; }

.writing-card__type {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--color-text-faint);
}
.writing-card__title {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  letter-spacing: -0.01em;
  line-height: 1.4;
  color: var(--color-text);
}
.writing-card__meta {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  margin-top: auto;
}

/* ── CTA Footer ───────────────────────────────────────────── */
.cta-section { text-align: center; }

.cta-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  padding-bottom: var(--space-16);
}

.cta-heading {
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: var(--weight-bold);
  letter-spacing: -0.04em;
  line-height: var(--leading-tight);
}

.cta-sub {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  max-width: 520px;
  line-height: var(--leading-normal);
}
.cta-actions { display: flex; gap: var(--space-4); flex-wrap: wrap; justify-content: center; }

.cta-footer-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

/* ── Responsive ───────────────────────────────────────────── */
@media (min-width: 1400px) {
  /* Preserve the familiar composition on conventional desktop widths. */
  .main > .section {
    max-width: none;
    padding-inline: clamp(40px, 3vw, 80px);
  }

  /* Give every secondary case the same cover frame and caption column. */
  .work-section {
    --work-cover-height: clamp(360px, 22vw, 480px);
    --work-cover-padding: clamp(24px, 1.5vw, 32px);
  }
  .work-card--horizontal,
  .work-card--compact {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 48px;
    max-width: none;
  }
  .work-card--horizontal .work-card__media,
  .work-card--compact .work-card__media {
    height: var(--work-cover-height);
    min-height: 0;
    aspect-ratio: auto;
  }
  .work-card--compact h3 { font-size: clamp(26px, 2.7vw, 38px); }
  .work-card--horizontal .work-card__media--smartyard > img {
    padding: var(--work-cover-padding);
  }
  .work-card--horizontal .work-card__media--millie > img {
    width: auto;
    height: calc(var(--work-cover-height) - 2 * var(--work-cover-padding));
    max-width: calc(100% - 2 * var(--work-cover-padding));
  }
}

/* Large displays pair a lead case with two compact cases on a shared grid. */
@media (min-width: 1760px) {
  .main > .section {
    max-width:2240px;
    padding-inline:60px;
  }

  .sidebar { padding-inline:max(60px, calc((100% - 2120px) / 2)); }

  .hero-section { padding-top:64px; padding-bottom:48px; }
  .hero-intro { grid-template-columns:repeat(12,minmax(0,1fr)); align-items:start; gap:40px; }
  .hero-identity { grid-column:1 / span 7; }
  .hero-heading { font-size:84px; line-height:1; }
  .hero-role { margin-top:18px; font-size:26px; }
  .hero-summary { grid-column:8 / span 5; max-width:560px; }
  .hero-sub { font-size:19px; }
  .hero-work { font-size:18px; }
  .hero-resume { font-size:11px; }

  .work-section { padding-top:16px; }
  .work-header { padding-block:22px 48px; }
  .work-header h2 { font-size:11px; letter-spacing:.08em; text-transform:uppercase; }

  .work-list { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); align-items:start; gap:48px 40px; counter-reset:work; }
  .work-list .work-card { position:relative; counter-increment:work; }
  .work-list .work-card::before { content:counter(work,decimal-leading-zero); position:absolute; top:-27px; left:0; font-size:10px; line-height:16px; font-variant-numeric:tabular-nums; color:var(--home-muted); }
  .work-card--featured { grid-column:1 / span 7; grid-row:1 / span 2; display:grid; grid-template-rows:minmax(0,1fr) auto; align-self:stretch; }
  .work-pair { display:contents; }
  .work-pair > .work-card { grid-column:8 / span 5; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); align-items:center; gap:26px; }
  .work-pair > .work-card:first-child { grid-row:1; }
  .work-pair > .work-card:last-child { grid-row:2; }
  .work-card--horizontal { grid-column:1 / -1; grid-row:auto; display:grid; align-items:center; margin-top:24px; padding-top:56px; border-top:1px solid var(--color-border); }
  .work-card--horizontal,.work-card--compact { grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:80px; }
  .work-list .work-card--horizontal::before { top:28px; }
  .work-section .work-card,.work-section .work-card__media { border-radius:12px; }
  .work-card--featured .work-card__media { min-height:400px; height:100%; aspect-ratio:auto; }
  .work-card--featured .work-card__media > img { position:absolute; inset:0; }
  .work-pair .work-card__media { width:100%; height:auto; aspect-ratio:1; }
  .work-card__media--fyn .phone-preview { width:40%; border-width:3px; border-radius:12px; }
  .work-card__media--fyn .phone-preview--first { left:8%; top:9%; }
  .work-card__media--fyn .phone-preview--second { left:53%; top:23%; }
  .work-card__media--leap > img { object-position:57% center; }
  .work-list .work-card__caption { padding-top:26px; padding-bottom:0; }
  .work-pair .work-card__caption,.work-card--horizontal .work-card__caption,.work-card--compact .work-card__caption { padding-top:0; padding-bottom:0; }
  .work-section .work-card h3 { font-size:40px; line-height:1.08; letter-spacing:-.045em; }
  .work-list .work-card--featured h3 { font-size:clamp(38px,2.2vw,44px); line-height:1.18; letter-spacing:-.03em; }
  .work-pair .work-card h3 { font-size:30px; }
  .work-section .work-card__company { font-size:12px; }
  .work-section .work-card__evidence { font-size:12px; }
  .work-section .work-card__description { max-width:46ch; }
  .work-section .work-card__role { margin-top:16px; font-size:12px; }
  .more-work { margin-top:80px; }

}

@media (min-width:1760px) and (prefers-reduced-motion:no-preference) {
  .work-list .work-card__media { transition:transform .7s cubic-bezier(.22,1,.36,1); }
  .work-list .work-card:is(:hover,:focus-visible) .work-card__media { transform:translateY(-6px); }
}

@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-photo { position: static; }
  .about__photo-wrap { aspect-ratio: 4/3; }
  .writing-grid { grid-template-columns: 1fr; }
}

/* Keep the dedicated résumé accessible in the mobile navigation. */
@media (max-width:767px) { .sidebar__nav .sidebar__link[href="resume.html"] { display:block; } }

/* Fiero — original competition interface preview */
.work-card__media--fiero{background:#d9d4ef;display:flex;justify-content:center;align-items:flex-start;overflow:hidden;padding:24px 0 0}
.work-card__media--fiero img{width:45%;height:auto;max-height:none;object-fit:contain;object-position:top;border-radius:20px;transform:rotate(-7deg);box-shadow:0 12px 48px #29203830}
.work-card__media--role { display:flex; justify-content:center; align-items:flex-start; gap:24px; background:#d8c3e9; padding:36px 24px 0; overflow:hidden; }
.work-card__media--role img { width:34%; height:auto; object-fit:contain; object-position:top; border-radius:10.178% / 4.695%; flex-shrink:0; box-shadow:0 12px 32px #24182d24; }
.work-card__media--role img:first-child { transform:rotate(-6deg) translateY(20px); }
.work-card__media--role img:last-child { transform:rotate(6deg); }

/* Give each case a clear boundary, including newly added compact cases. */
.work-list { row-gap:88px; }
.work-pair { column-gap:40px; }
.more-work > .work-card + .work-card {
  margin-top:48px;
  padding-top:48px;
  border-top:1px solid var(--color-border);
}
@media (min-width:1760px) {
  .work-list { row-gap:64px; }
}
@media (max-width:767px) {
  .work-list,.work-pair { row-gap:56px; }
  .more-work > .work-card + .work-card { margin-top:32px; padding-top:32px; }
}

/* Millie — focused dashboard on a soft blue canvas. */
.work-card__media--millie {
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  background:radial-gradient(ellipse at 25% 20%,#f0f5fc 0%,#e0eaf7 55%,#d3e1f3 100%);
  aspect-ratio:16/10;
}
.work-card__media--millie > img {
  display:block;
  width:76%;
  max-width:920px;
  height:auto;
  object-fit:contain;
  border:1px solid #ffffffc9;
  border-radius:7px;
  box-shadow:0 18px 44px -12px #33548038,0 3px 9px #33548012;
}
@media(max-width:767px) {
  .work-card__media--millie > img {width:82%;}
}

/* Remaining cases form two columns below the featured work. */
.work-secondary {
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:64px 40px;
}
.work-secondary .work-card--horizontal {
  display:block;
  grid-column:auto;
  grid-row:auto;
  margin:0;
  padding:0;
  border:0;
}
.work-secondary .work-card--horizontal .work-card__media {
  width:100%;
  height:auto;
  min-height:0;
  aspect-ratio:16/10;
}
.work-secondary .work-card--horizontal .work-card__caption { padding:24px 0 0; }
.work-secondary .work-card--horizontal h3 { font-size:clamp(24px,2.1vw,34px); line-height:1.2; }
.work-secondary .student-card { min-height:0; padding:clamp(18px,2vw,32px); }
.work-secondary .student-card__title { font-size:clamp(28px,3vw,52px); margin-block:16px; }
.work-list .work-secondary .work-card::before { top:-27px; }
.work-secondary .work-card--horizontal .work-card__media--millie > img {
  width:76%;
  height:auto;
  max-width:920px;
}
@media(min-width:768px) {
  .more-work { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 40px; align-items:start; }
  .more-work > .work-header { grid-column:1 / -1; }
  .more-work > .work-card--compact { display:block; min-width:0; max-width:none; }
  .more-work > .work-card--compact .work-card__media { width:100%; height:auto; min-height:0; aspect-ratio:16/10; }
  .more-work > .work-card--compact .work-card__caption { padding:24px 0 0; }
  .more-work > .work-card--compact h3 { font-size:clamp(24px,2.1vw,34px); line-height:1.2; }
  .more-work > .work-card + .work-card { margin:0; padding:0; border-top:0; }
}
@media(max-width:767px) {
  .work-secondary { grid-template-columns:minmax(0,1fr); row-gap:56px; }
  .work-secondary .work-card--horizontal h3 { font-size:28px; }
  .work-secondary .work-card--horizontal .work-card__caption { padding-top:20px; }
  .work-secondary .work-card--horizontal .work-card__media--millie > img { width:82%; }
}