/* One outer margin and shared columns throughout the résumé. */
.cv{
  --resume-gutter:max(32px,calc((100% - 1480px)/2));
  --resume-column-gap:48px;
}
.cv .cv-opening,
.cv .cv-clients,
.cv .cv-method,
.cv .cv-chapters>header,
.cv .cv-chapter,
.cv .cv-range,
.cv .cv-education,
.cv .site-footer.contact-footer{
  padding-inline:var(--resume-gutter);
}
.cv .cv-range-head{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:28px;
  margin-bottom:48px;
}
.cv .cv-range-head>p{margin:0}
.cv .cv-capabilities{
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:var(--resume-column-gap);
  border-top:0;
}
.cv .cv-capabilities>div{
  grid-template-columns:minmax(0,1fr) auto;
  column-gap:20px;
  padding-inline:0;
  border-right:0;
  border-top:1px solid color-mix(in srgb,currentColor 25%,transparent);
  border-bottom:0;
}
.cv .cv-capabilities>div>span{grid-column:1;grid-row:1}
.cv .cv-capabilities>div>b{grid-column:2;grid-row:1;text-align:right}
.cv .cv-education{
  grid-template-columns:minmax(0,1fr);
  gap:32px;
}
.cv .cv-education>div{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--resume-column-gap);
  align-items:stretch;
}
.cv .cv-education article{
  min-width:0;
  display:grid;
  grid-template-rows:auto 1fr auto;
}
.cv .cv-education h3{margin:40px 0 28px}
.cv .cv-education p{width:100%;max-width:none}
.cv .contact-footer>div{width:100%;max-width:none;margin-inline:0}
.cv .site-footer .footer-page-top{display:inline-flex;align-items:center;gap:6px}
.cv .site-footer .footer-page-top svg{width:14px;height:14px;stroke-width:1.5}
html:has(.cv#top:target){scroll-behavior:auto}
/* Let the content set chapter height instead of pushing the story to the bottom. */
.cv .cv-chapter{
  min-height:0;
  grid-template-rows:auto auto auto;
  align-content:start;
  padding-top:clamp(24px,3vw,40px);
  padding-bottom:clamp(56px,5vw,80px);
}
.cv .cv-chapter-top{border-top:0;padding-top:0}
.cv .cv-company{
  margin:clamp(48px,6vw,88px) 0 clamp(104px,9vw,144px);
}
.cv .cv-company h2{line-height:1.02}
.cv .cv-chapter-story{border-top:0;padding-top:0}
.cv .cv-chapter-story>ul{margin-top:32px}
/* One shared column, with optical alignment for the large headline. */
.cv .cv-opening{border-bottom:0;text-align:left}
.cv .cv-opening-content{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:32px;
  width:100%;
  max-width:68rem;
  margin:0;
  padding:0;
}
.cv .cv-opening-content>.cv-meta{width:100%;margin:0;padding:0}
.cv .cv-opening-content>h1{
  min-width:0;
  max-width:none;
  margin:0 0 0 -.055em;
  padding:0;
  text-align:left;
}
.cv .cv-opening-content>.cv-opening-foot{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:20px;
  width:100%;
  min-width:0;
  margin:0;
  padding:0;
}
.cv .cv-opening-foot>p{width:100%;max-width:none;margin:0;padding:0}
.cv .cv-opening-foot>a{justify-self:start;display:inline-flex;align-items:center;gap:8px;margin:0;padding:0}
.cv .cv-opening-foot>a svg{flex-shrink:0;width:18px;height:18px}
@media(max-width:600px){
  .cv .cv-opening-content{gap:28px}
  .cv .cv-opening-content>.cv-opening-foot{gap:16px}
}
.cv .cv-clients{
  padding-top:clamp(72px,8vw,124px);
  padding-bottom:clamp(88px,10vw,156px);
  background:var(--pair-cream);
  color:var(--pair-navy);
}
.cv .cv-clients h2{
  margin:0 0 clamp(64px,8vw,116px);
  font-family:var(--font-mono),ui-monospace,monospace;
  font-size:11px;
  line-height:1.4;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.cv .cv-client-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(72px,8vw,128px) var(--resume-column-gap);
  align-items:center;
}
.cv .cv-client-logo{
  min-width:0;
  min-height:100px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:currentColor;
}
.cv .cv-client-logo img{display:block;width:auto;max-width:min(230px,100%);height:auto;object-fit:contain}
.cv .cv-client-logo.apple img{height:92px}
.cv .cv-client-logo.google img{height:72px;translate:0 6px}
.cv .cv-client-logo.uber img{height:67px}
.cv .cv-client-logo.sutter-hill img{height:90px}
.cv .cv-client-logo.miele img{height:62px}
.cv .cv-client-logo.adobe img{height:61px}
.cv .cv-method{border-top:0}
/* Share illustration, heading, and description rows across each set of cards. */
.cv .cv-method-card{
  /* Keep artwork blending on the same surface throughout the scroll reveal. */
  background:var(--pair-cream);
  isolation:isolate;
  display:grid;
  grid-row:span 3;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:subgrid;
  row-gap:0;
  min-width:0;
  padding-right:32px;
  padding-bottom:40px;
}
.cv .cv-method-card+.cv-method-card{padding-left:32px}
.cv .cv-method-card>.method-illustration,
.cv .cv-method-card>h3,
.cv .cv-method-card>p{align-self:start;min-width:0;max-width:100%}
.cv .cv-method-card>h3{margin:28px 0 16px;line-height:1.15}
.cv .cv-method-card>p{max-width:min(100%,240px);line-height:1.6}
@media(min-width:601px) and (max-width:1100px){
  .cv .cv-method>div{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cv .cv-method-card:nth-child(2n){border-right:0}
  .cv .cv-method-card:nth-child(2n+1){padding-left:0}
  .cv .cv-method-card:nth-child(n+3){border-top:1px solid var(--cv-rule)}
}
@media(max-width:600px){
  .cv .cv-opening{min-height:0;padding-top:36px;padding-bottom:48px}
  .cv .cv-method>div{grid-template-columns:minmax(0,1fr)}
  .cv .cv-method-card,
  .cv .cv-method-card+.cv-method-card{padding-inline:0;border-right:0}
  .cv .cv-method-card>p{max-width:32ch}
  .cv .cv-chapter-story{grid-template-columns:minmax(0,1fr)}
  .cv .cv-chapter-story>*{min-width:0}
}
@media(max-width:800px){
  .cv{--resume-gutter:20px;--resume-column-gap:28px}
  .cv .cv-capabilities,
  .cv .cv-education>div{grid-template-columns:minmax(0,1fr)}
  .cv .cv-education h3{margin-top:28px}
  .cv .cv-chapter{grid-template-columns:minmax(0,1fr);padding-block:32px 64px}
  .cv .cv-company{min-width:0;margin:40px 0 40px}
  .cv .cv-company h2{
    min-width:0;max-width:100%;font-size:clamp(48px,17vw,112px);
    line-height:1.02;letter-spacing:-.06em;overflow-wrap:anywhere;
  }
  .cv .cv-chapter.adchemy .cv-company h2{font-size:clamp(48px,15vw,104px)}
  .cv .cv-chapter-story{grid-template-columns:minmax(0,1fr);gap:28px}
  .cv .cv-chapter-story>*{min-width:0;max-width:100%;overflow-wrap:break-word}
  .cv .cv-chapter-story .cv-role{font-size:18px;line-height:1.4}
  .cv .cv-chapter-story h3{font-size:clamp(28px,5.5vw,36px);line-height:1.2}
  .cv .cv-chapter-story .cv-chapter-copy{font-size:16px;line-height:1.65}
  .cv .cv-chapter-story>ul{margin-top:8px;padding-top:32px;gap:14px 20px}
  .cv .cv-chapter-story>ul li{min-width:0;max-width:100%;line-height:1.5}
  .cv .cv-method-card{padding-bottom:48px}
  .cv .cv-method-card>h3{line-height:1.25}
  .cv .cv-method-card>p{max-width:min(100%,32ch);font-size:16px;line-height:1.65}
  .cv .cv-education article{min-width:0}
  .cv .cv-education h3{max-width:100%;line-height:1.15;overflow-wrap:break-word}
  .cv .cv-education p{font-size:16px;line-height:1.65}
  .cv .cv-clients{padding-top:64px;padding-bottom:88px}
  .cv .cv-clients h2{margin-bottom:56px}
  .cv .cv-client-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:64px 24px}
  .cv .cv-client-logo{min-height:72px}
  .cv .cv-client-logo img{max-width:100%;height:auto;max-height:54px}
}

/* Keep the method section open, without dividers at any viewport width. */
.cv .cv-method>div,
.cv .cv-method .cv-method-card{border:0}

/* A compact color gallery for the companies, before the experience timeline. */
.cv .cv-clients{background:var(--pair-cream);color:#382f29;padding-block:clamp(48px,6vw,88px)}
.cv .cv-clients h2{font-family:var(--font-display),var(--font-sans),sans-serif;font-size:clamp(28px,3vw,44px);line-height:1.15;letter-spacing:-.035em;text-transform:none;font-weight:500;margin:0 0 36px}
.cv .cv-client-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
.cv .cv-client-logo{min-height:clamp(160px,17vw,230px);padding:28px;box-sizing:border-box;border-radius:36px}
.cv .cv-client-logo.apple{background:#a27360}
.cv .cv-client-logo.google{background:#253464}
.cv .cv-client-logo.uber{background:#d7c1b7}
.cv .cv-client-logo.sutter-hill{background:#eb625c}
.cv .cv-client-logo.miele{background:#5b142d}
.cv .cv-client-logo.adobe{background:#352a23}
.cv .cv-client-logo img{max-width:80%;max-height:82px;object-fit:contain;filter:none}
.cv .cv-client-logo.apple img{filter:none}
.cv .cv-client-logo.google img{filter:none}
.cv .cv-client-logo.uber img{filter:none}
.cv .cv-client-logo.sutter-hill img{filter:none}
.cv .cv-client-logo.miele img{filter:none}
.cv .cv-client-logo.adobe img{filter:none}
@media(max-width:700px){.cv .cv-client-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.cv .cv-client-logo{min-height:140px;padding:22px}.cv .cv-client-logo img{max-width:100%;max-height:60px}.cv .cv-clients h2{margin-bottom:28px}}

.cv .cv-client-logo.sutter-hill img{scale:1.33584}
.cv .cv-client-logo.adobe img{scale:1.1}
.cv .cv-client-logo.apple img,.cv .cv-client-logo.google img{scale:1.1}

/* Exact experience pairings sampled from John's supplied reference. */
.cv .cv-chapters>header{background:#ff9a9b;color:#2a356f}
.cv .cv-chapter.apple{--chapter-bg:#2a356f;--chapter-ink:#ff9a9b}
.cv .cv-chapter.google{--chapter-bg:#e5aba9;--chapter-ink:#3c215a}
.cv .cv-chapter.uber{--chapter-bg:#f2ebd9;--chapter-ink:#311e40}
.cv .cv-chapter.shv{--chapter-bg:#311e40;--chapter-ink:#d2c1df}
.cv .cv-chapter.adobe{--chapter-bg:#e5aba9;--chapter-ink:#23293d}
.cv .cv-chapter.adchemy{--chapter-bg:#eee8e1;--chapter-ink:#510f26}
.cv .cv-chapter.miele{--chapter-bg:#5b142d;--chapter-ink:#f2e9df}

/* Each experience panel has one foreground color for every text element. */
.cv .cv-chapter{--chapter-accent:var(--chapter-ink)}
.cv .cv-chapter :is(h2,h3,p,span,strong,a,li){color:var(--chapter-ink)}
.cv .cv-chapter .cv-current-years strong{background:transparent;box-shadow:inset 0 0 0 1px currentColor}

/* Use the shared cream contact footer, including its full-width heading row. */
.cv .contact-footer>div:first-child{display:flex;flex-direction:column;align-items:stretch}
.cv .contact-footer>div:first-child>a{width:100%;grid-template-columns:minmax(0,1fr) auto;text-align:left}
.cv .contact-footer .footer-email-action{justify-self:end}