.graphic-page{--blue:var(--orange)}
.graphic-main{padding-block:34px 64px}
.graphic-page .breadcrumbs{display:flex;flex-wrap:wrap;gap:12px;align-items:center;font-size:11px;color:var(--muted);line-height:1.7;margin:0 0 45px}
.graphic-page .breadcrumbs a{color:var(--ink)}
.graphic-intro.product-intro{padding:12px 0 62px}
.graphic-intro h1{font-size:clamp(56px,7vw,96px);line-height:1.05;letter-spacing:-.055em;font-weight:500;margin-top:24px}
.graphic-intro h1 em{letter-spacing:inherit}
.graphic-intro-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-top:30px}
.graphic-intro-bottom p{font-size:14px;line-height:1.8;color:var(--muted)}
.graphic-projects{padding-top:30px;border-top:1px solid var(--border);scroll-margin-top:30px}
.graphic-section-heading.section-heading{margin:0 0 30px;align-items:center}
.graphic-section-heading h2{font-size:30px;letter-spacing:-1px}
.graphic-section-heading>.eyebrow{color:var(--muted)}
.graphic-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:44px}
.graphic-card{min-width:0;display:block}
.graphic-preview{perspective:1000px}
.graphic-preview img{width:100%;height:auto}
.graphic-preview:not(.graphic-series-preview) img{height:min(52svh,480px);object-fit:contain}
.graphic-card-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:23px}
.graphic-card-meta .eyebrow{font-size:9px;line-height:1.7;color:var(--muted)}
.graphic-card-meta>span:last-child{font-size:23px;color:var(--orange)}
.graphic-card h3{font-size:23px;line-height:1.35;letter-spacing:-.7px;font-weight:500;margin-top:9px}
.graphic-card>p{font-size:12px;color:var(--muted);line-height:1.6;margin-top:9px}
.graphic-series-preview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:16px;background:#eeede7}
.graphic-card .graphic-series-summary{max-width:460px;margin-top:15px;line-height:1.8}
.graphic-series-cta{display:inline-block;font-size:12px;margin-top:17px;padding-bottom:5px;border-bottom:1px solid var(--ink)}
.graphic-back{display:inline-block;margin-top:55px;font-size:12px}
.graphic-detail{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:64px;align-items:start;margin-block:12px 64px}
.graphic-project-copy{position:sticky;top:35px}
.graphic-page .case-title{display:block;margin:0}
.graphic-page .case-title h1{font-size:clamp(42px,4.8vw,68px);line-height:1.06;letter-spacing:-.055em;font-weight:500;margin-top:24px}
.graphic-project-subtitle{font-size:19px;line-height:1.5;color:var(--muted);margin-top:23px}
.graphic-facts{display:grid;gap:24px;border-top:1px solid var(--border);padding-top:27px;margin:35px 0 30px}
.graphic-facts dt{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin-bottom:9px}
.graphic-facts dd{font-size:13px;line-height:1.7;margin:0}
.graphic-original{display:inline-flex;align-items:center;gap:25px;padding-block:12px;border-bottom:1px solid var(--ink);font-size:12px}
.graphic-artwork.screen-figure{margin:0;min-width:0;width:min(100%,calc(max(180px,100svh - 280px)*.8));justify-self:center}
.graphic-artwork a{display:block;border-radius:0;perspective:1000px}
.graphic-artwork img{width:100%;max-width:none;height:auto;border-radius:0}
.graphic-artwork figcaption{font-size:10px;line-height:1.7;color:var(--muted);margin-top:18px}
.graphic-project-nav{display:flex;justify-content:space-between;align-items:center;gap:30px;border-top:1px solid var(--border);padding-top:28px;font-size:12px}
.graphic-project-nav>a:last-child{display:grid;gap:10px;text-align:right}
.graphic-project-nav .eyebrow{color:var(--muted);font-size:8px}
.graphic-page a:focus-visible{outline:2px solid var(--orange);outline-offset:6px}
@media(hover:hover) and (pointer:fine){
  html[data-motion=full] .graphic-preview img{transition:transform 400ms cubic-bezier(.16,1,.3,1)!important}
  html[data-motion=full] .graphic-card:hover img{transform:translateY(-5px) rotateY(3deg) scale(1.01)}
  .graphic-card:hover h3,.graphic-original:hover,.graphic-project-nav a:hover{color:var(--orange)}
}
@media(prefers-reduced-motion:reduce){html:not([data-motion=full]) .graphic-card:hover img{transform:none}}
html[data-motion=reduced] .graphic-card:hover img{transform:none!important}
@media(max-width:1000px){.graphic-gallery{gap:30px}.graphic-detail{gap:35px}.graphic-card h3{font-size:21px}}
@media(max-width:760px){
  .graphic-main{padding-block:24px 45px}
  .graphic-page .breadcrumbs{margin-bottom:30px;font-size:10px;gap:9px}
  .graphic-intro.product-intro{padding:0 0 40px}
  .graphic-intro h1{font-size:clamp(44px,10vw,70px);margin-top:20px}
  .graphic-intro-bottom{display:block;margin-top:25px}
  .graphic-intro-bottom p{font-size:12px}
  .graphic-intro-bottom .explore-link{margin-top:24px;width:max-content}
  .graphic-section-heading.section-heading{display:flex;gap:15px;margin-bottom:25px}
  .graphic-section-heading h2{font-size:27px}
  .graphic-gallery{grid-template-columns:1fr;gap:40px}
  .graphic-card h3{font-size:22px}
  .graphic-card-meta{margin-top:17px}
  .graphic-detail{grid-template-columns:1fr;gap:30px;margin-bottom:40px}
  .graphic-project-copy{position:static}
  .graphic-page .case-title h1{font-size:clamp(42px,10vw,64px)}
  .graphic-project-subtitle{font-size:17px;margin-top:16px}
  .graphic-facts{grid-template-columns:1fr 1fr;gap:18px;margin:25px 0 15px;padding-top:22px}
  .graphic-facts dd{font-size:12px}
  .graphic-artwork figcaption{font-size:9px}
  .graphic-artwork.screen-figure{width:min(100%,56svh)}
  .graphic-project-nav{gap:20px;font-size:11px}
}