.work-topbar { border-bottom: 1px solid var(--line); }
.active-nav { color: var(--orange) !important; }

.work-page-hero { max-width: 1320px; margin: 0 auto; padding-top: 92px; padding-bottom: 100px; }
.work-page-hero > div { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(250px, .55fr); align-items: end; gap: 48px; }
.work-page-hero h1 { margin: 0; font: 500 clamp(3.9rem, 8.2vw, 8rem)/.87 'Pink Average', serif; letter-spacing: -3px; }
.work-page-hero h1 em { color: var(--orange); }
.work-page-hero > div > p { margin: 0 0 7px; color: #64635e; font-size: 1.12rem; line-height: 1.6; }

.work-gallery { background: var(--paper); border-top: 12px solid var(--blue); }
.work-page-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .64fr); gap: 48px; align-items: end; margin-bottom: 62px; }
.work-page-heading .section-label { align-self: start; }
.work-page-heading h2 { margin: 0; font: 500 clamp(2.7rem, 4.8vw, 5.2rem)/.92 'Pink Average', serif; letter-spacing: -2px; grid-column: 1 / -1; max-width: 850px; }

.experience { background: var(--green); color: var(--cream); display: grid; grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr); gap: clamp(48px, 10vw, 150px); }
.experience .eyebrow { color: var(--lime); }
.experience h2 { margin: 0; font: 500 clamp(3rem, 5vw, 5.5rem)/.9 'Pink Average', serif; letter-spacing: -2px; }
.timeline { list-style: none; margin: 3px 0 0; padding: 0; border-left: 1px solid rgba(255, 248, 238, .35); }
.timeline li { position: relative; display: grid; grid-template-columns: 154px minmax(0, 1fr); gap: 34px; padding: 0 0 52px 30px; }
.timeline li::before { content: ''; position: absolute; width: 11px; height: 11px; left: -6px; top: 4px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 5px var(--green); }
.timeline li:last-child { padding-bottom: 0; }
.timeline-date, .timeline-kicker { margin: 0; font: 12px/1.3 'DM Mono', monospace; letter-spacing: .75px; }
.timeline-date { color: var(--lime); padding-top: 2px; }
.timeline-kicker { color: var(--pink); }
.timeline-entry h3 { margin: 10px 0 11px; font: 500 clamp(1.8rem, 2.7vw, 2.45rem)/1 'Pink Average', serif; letter-spacing: -1px; }
.timeline-entry > p:last-child { margin: 0; max-width: 590px; color: rgba(255, 248, 238, .79); line-height: 1.65; }

.tools { background: var(--cream); }
.tools-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .8fr); gap: 48px; align-items: end; margin-bottom: 58px; }
.tools-heading h2 { margin: 0; font: 500 clamp(2.8rem, 4.8vw, 5.1rem)/.92 'Pink Average', serif; letter-spacing: -2px; }
.tools-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.tool-card { min-height: 198px; padding: 23px; border: 1px solid var(--ink); display: flex; flex-direction: column; justify-content: space-between; }
.tool-card h3 { margin: 0; font: 500 clamp(1.7rem, 2.4vw, 2.25rem)/1 'Pink Average', serif; letter-spacing: -1px; }
.tool-card p { margin: 0; font-size: .95rem; line-height: 1.45; }
.tool-card.conductor { background: var(--orange); color: var(--cream); }
.tool-card.notion { background: var(--blue); }
.tool-card.playwright { background: var(--lime); }
.tool-card.linear { background: var(--pink); }

@media (max-width: 760px) {
  .work-page-hero { padding-top: 60px; padding-bottom: 74px; }
  .work-page-hero > div, .experience { grid-template-columns: 1fr; gap: 30px; }
  .work-page-hero h1 { letter-spacing: -2px; }
  .work-page-heading, .tools-heading { display: block; margin-bottom: 48px; }
  .work-page-heading .section-label { margin-bottom: 22px; }
  .tools-heading .eyebrow { margin-bottom: 22px; }
  .tools-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .tool-card { min-height: 155px; padding: 17px; }
  .timeline li { grid-template-columns: 1fr; gap: 12px; padding-left: 25px; padding-bottom: 43px; }
}