/* Shared portfolio typography. Client lettering stays in the original artwork. */
:root { --display: 'DM Sans', Arial, sans-serif; --editorial-ease: cubic-bezier(.2,.75,.2,1); }
.identity-grn :is(h1,h2,h3,h4,em) { font-weight: 650; }
.identity-grn :is(.name-signature,.eyebrow) { letter-spacing: .085em; }
.identity-grn .site-header { height: 76px; }
.identity-grn .site-header .nav-contact {
 background: transparent;
 color: var(--ink);
 border: 1px solid var(--line);
}
.identity-grn .site-header .nav-contact:hover { background: var(--ink); color: var(--paper); }
.identity-grn .main-nav { font-size: 13px; }

.landing .directed-hero {
 grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
 align-items: center;
 gap: clamp(25px,5vw,90px);
 padding: clamp(28px,4vw,68px) var(--pad) clamp(32px,4.8vw,76px);
 max-width: 1700px;
 margin-inline: auto;
}
.landing .directed-hero .hero-content {
 background: transparent;
 color: var(--ink);
 min-height: 0;
 padding: 0;
}
.landing .hero-kicker { align-items: baseline; }
.landing .edition-index { color: var(--accent); margin-left: .4em; }
.landing .directed-hero .role-hero-title {
 font-size: clamp(54px,7.2vw,132px);
 font-weight: 700;
 letter-spacing: -.075em;
 line-height: .91;
 overflow-wrap: anywhere;
}
.landing .role-hero-title em { color: var(--accent); font-weight: inherit; letter-spacing: inherit; }
.landing .hero-line { overflow: clip; padding-bottom: .11em; animation: none; }
.landing .hero-line > span {
 display: block;
 animation: editorial-type-in .95s var(--editorial-ease) both;
 animation-delay: calc(75ms + var(--line-index) * 95ms);
}
.landing .hero-foot { padding-top: clamp(12px,2.2vw,38px); }
.landing .hero-foot p { font-size: clamp(13px,1.15vw,17px); max-width: 34ch; }
.landing .hero-work-link { max-width: none; font-size: 13px; }
.landing .hero-stage { background: transparent; color: var(--ink); overflow: visible; }
.landing .hero-stage .hero-feature {
 min-height: 0;
 flex: none;
 aspect-ratio: 1.28;
}
.landing .hero-feature .feature-top,
.landing .hero-feature .feature-bottom {
 left: clamp(14px,2vw,30px);
 right: clamp(14px,2vw,30px);
}
.landing .hero-stage .feature-top {
 top: 17px;
 right: auto;
 padding: 8px 11px;
 background: #211915;
 text-shadow: none;
}
.landing .hero-feature .feature-bottom { bottom: 17px; font-size: clamp(15px,1.6vw,24px); }
.landing .hero-stage .hero-feature.product-feature { background: #ffdab7; aspect-ratio: 1.38; }
.landing .hero-stage .product-feature::after { display: none; }
.landing .hero-stage .product-feature .feature-bottom { right: auto; padding: 9px 12px; font-size: 15px; }
.landing .product-feature .feature-arrow { width: 27px; height: 27px; }
.landing .product-feature .feature-arrow svg { width: 15px; height: 15px; }
.landing .hero-switcher {
 border-top: 0;
 border-bottom: 1px solid var(--line);
}
.landing .hero-switcher > button {
 justify-content: start;
 background: transparent;
 color: var(--muted);
 padding-inline: 8px;
 min-height: 49px;
 font-size: 12px;
}
.landing .hero-switcher > button:hover,
.landing .hero-switcher > button[aria-pressed=true] { background: transparent; color: var(--ink); }
.landing .hero-switcher > button:after { left: 0; right: 0; height: 2px; background: var(--accent); }
.landing .hero-switcher > button > span { color: var(--accent); }

.landing .selected-work {
 padding-top: clamp(35px,5vw,74px);
 padding-bottom: clamp(48px,8vw,120px);
 border-top: 1px solid var(--line);
 background: var(--paper);
}
.landing .selected-work .section-heading h2 {
 font-size: clamp(39px,6.25vw,102px);
 line-height: .98;
 letter-spacing: -.065em;
}
.landing .selected-work .section-heading > a { flex-shrink: 0; }
.landing .selected-work .project-grid { align-items: start; }
.landing .selected-work .project-card .project-cover { aspect-ratio: 1.36; }
.landing .selected-work .project-card:nth-child(2) .project-cover { aspect-ratio: 1.08; }
.landing .project-caption h3, .archive .project-caption h3 { letter-spacing: -.06em; }
.landing .project-tags, .archive .project-tags { border-top: 0; padding-top: 0; }

.landing .perspective-intro {
 display: grid;
 grid-template-columns: minmax(0,1fr) minmax(0,2.2fr);
 gap: clamp(24px,8vw,150px);
 border-block: 1px solid var(--line);
 padding-block: clamp(38px,7vw,110px);
 align-items: stretch;
 background: var(--paper);
}
.perspective-marker { display: flex; align-items: flex-start; flex-direction: column; gap: 22px; }
.practice-mark { color: var(--accent); display: grid; place-items: center; flex: 1; }
.practice-mark svg { width: clamp(75px,15vw,220px); height: auto; }
.landing .perspective-note h2 {
 font-size: clamp(42px,6.4vw,104px);
 max-width: 14ch;
 letter-spacing: -.07em;
 line-height: .98;
}
.perspective-note p { max-width: 49ch; margin-top: 25px; font-size: clamp(14px,1.4vw,19px); }
.practice-focus {
 display: flex;
 flex-wrap: wrap;
 gap: 8px 24px;
 list-style: none;
 padding: 0;
 margin: 27px 0 0;
}
.practice-focus li { font-size: 12px; padding-block: 7px; border-bottom: 1px solid var(--line); }
.landing .role-statement {
 background: var(--paper);
 padding-block: clamp(42px,7vw,104px);
 grid-template-columns: minmax(0,1.1fr) minmax(0,1fr);
 align-items: end;
 gap: clamp(26px,8vw,135px);
}
.landing .role-statement .eyebrow { margin-bottom: 22px; }
.landing .role-statement h2 { letter-spacing: -.06em; }
.landing .role-statement p { font-size: 15px; }
.contribution-details ol { padding: 0; list-style: none; margin: 0 0 20px; }
.landing .contribution-details li { font-size: 15px; gap: 17px; }
.landing .contribution-details li > span { font-size: 10px; color: var(--accent); }
.landing .experience-strip {
 margin-inline: var(--pad);
 padding: 28px 0;
 border-block: 1px solid var(--line);
}
.landing .experience-strip > h2 { text-transform: uppercase; }
.landing .experience-strip strong { font-weight: 650; font-size: 17px; }
.landing .experience-strip > div > span { font-size: 11px; }
.identity-grn:not(.case-page) .contact-strip {
 background: var(--paper);
 color: var(--ink);
 padding-block: clamp(45px,8vw,130px);
}
.identity-grn:not(.case-page) .contact-strip em { color: var(--accent); }
.identity-grn:not(.case-page) .contact-strip .circle-cta { border-color: var(--accent); color: var(--accent); }
.identity-grn:not(.case-page) .contact-strip .circle-cta:hover { color: var(--paper); background: var(--accent); }
.identity-grn .site-footer .footer-name { font-weight: 700; }

.archive .archive-intro, .archive .archive-work { background: var(--paper); }
.archive .archive-title h1 { letter-spacing: -.075em; }
.archive .archive-title .archive-total { color: var(--accent); }
.archive .archive-grid:not(.list-view) .project-card .project-cover { aspect-ratio: 1.12; }
.archive .archive-grid:not(.list-view) .project-card:nth-child(4n+1) .project-cover,
.archive .archive-grid:not(.list-view) .project-card:nth-child(4n+4) .project-cover { aspect-ratio: 1.45; }

.editorial-case .case-chapter {
 background: var(--world);
 color: var(--world-ink);
 padding-bottom: clamp(46px,8vw,124px);
}
.editorial-case .tone-contrast .chapter-heading,
.editorial-case .tone-contrast .case-principles article { border-color: var(--world-line); }
.editorial-case .tone-contrast .editorial-figure figcaption { color: var(--world-ink); }
.editorial-case .chapter-no { color: var(--world-pop); }
.editorial-case .chapter-heading h2 { overflow-wrap: anywhere; letter-spacing: -.065em; }
.editorial-case .case-block + .case-block { margin-top: clamp(32px,6vw,94px); }
.editorial-case .case-pair { grid-template-columns: 1.28fr 1fr; align-items: center; gap: clamp(12px,3vw,50px); }
.editorial-case .case-chapter[data-composition="reverse"] .case-pair { grid-template-columns: 1fr 1.28fr; }
.editorial-case .opening-editorial .opening-half:nth-child(3) { margin-top: clamp(0px,5vw,75px); }
.editorial-case .case-statement { background: transparent; border-block: 1px solid var(--world-line); color: var(--world-ink); }
.editorial-case .project-title h1 { letter-spacing: -.075em; }
.editorial-case .case-outline { background: var(--world); }

@media (min-width: 801px) {
 .landing .selected-work .project-grid, .archive .archive-grid:not(.list-view) {
  grid-template-columns: repeat(12,minmax(0,1fr));
  gap: clamp(28px,4vw,65px) clamp(10px,2vw,30px);
 }
 .landing .selected-work .project-card:first-child { grid-column: 1 / 8; }
 .landing .selected-work .project-card:nth-child(2) { grid-column: 9 / -1; margin-top: clamp(22px,7vw,115px); }
 .landing .selected-work .project-card:nth-child(3) { grid-column: 4 / 11; margin-top: clamp(0px,2vw,32px); }
 .archive .archive-grid:not(.list-view) .project-card { grid-column: span 5; margin-top: 0; }
 .archive .archive-grid:not(.list-view) .project-card:nth-child(4n+1),
 .archive .archive-grid:not(.list-view) .project-card:nth-child(4n+4) { grid-column: span 7; }
 .archive .archive-grid:not(.list-view) .project-card:nth-child(even) { margin-top: clamp(0px,5vw,80px); }
 .editorial-case .case-chapter[data-composition="inset"] .chapter-heading { grid-template-columns: 1.2fr 2fr; }
 .editorial-case .case-chapter[data-composition="inset"] .case-full { width: 82%; margin-right: 0; }
 .editorial-case .case-chapter[data-composition="reverse"] .chapter-heading { grid-template-columns: minmax(0,3fr) minmax(0,1fr); }
 .editorial-case .case-chapter[data-composition="reverse"] .chapter-heading > div:first-child {
  grid-column: 2; grid-row: 1; justify-self: end; text-align: right;
 }
 .editorial-case .case-chapter[data-composition="reverse"] .chapter-heading > div:nth-child(2) {
  grid-column: 1; grid-row: 1;
 }
 .editorial-case .case-chapter[data-composition="reverse"] .case-full { width: 88%; margin-left: 0; }
}
@media (max-width: 800px) {
 .landing .directed-hero { grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); gap: 24px; }
 .landing .directed-hero .role-hero-title { font-size: clamp(43px,7.7vw,64px); }
 .landing .selected-work .project-card:nth-child(2) { margin-top: 0; }
}
@media (max-width: 650px) {
 .identity-grn .site-header { height: 66px; }
 .landing .directed-hero { grid-template-columns: minmax(0,1fr); gap: 21px; padding-top: 23px; }
 .landing .directed-hero .hero-kicker { margin-bottom: 13px; }
 .landing .directed-hero .role-hero-title { font-size: clamp(49px,14.9vw,85px); }
 .landing .hero-foot { flex-direction: row; align-items: end; gap: 15px; padding-top: 14px; }
 .landing .hero-foot > p { flex: 1; font-size: 13px; }
 .landing .hero-work-link { flex: 0 0 86px; gap: 5px; font-size: 11px; }
 .landing .hero-stage .hero-feature { aspect-ratio: 1; }
 .landing .hero-stage .hero-feature.product-feature { aspect-ratio: 1.28; }
 .landing .hero-switcher > button { font-size: 10px; padding-inline: 5px; }
 .landing .selected-work .section-heading h2 { font-size: clamp(38px,12vw,63px); }
 .landing .selected-work .project-card .project-cover, .archive .archive-grid:not(.list-view) .project-card .project-cover { aspect-ratio: .9; }
 .landing .selected-work .project-card:nth-child(2) .project-cover { aspect-ratio: 1.13; }
 .landing .perspective-intro, .landing .role-statement { grid-template-columns: minmax(0,1fr); display: grid; }
 .perspective-marker { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
 .practice-mark { flex: 0 0 auto; }
 .practice-mark svg { width: 44px; }
 .landing .perspective-note h2 { font-size: clamp(40px,11vw,64px); }
 .landing .experience-strip { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .landing .experience-strip h2, .landing .experience-strip > a { grid-column: 1 / -1; }
 .editorial-case .case-pair, .editorial-case .case-chapter[data-composition="reverse"] .case-pair { grid-template-columns: 1fr; }
 .editorial-case .opening-editorial .opening-half:nth-child(3) { margin-top: 0; }
}

/* Motion follows the reading sequence and project selection. */
@media (prefers-reduced-motion: no-preference) {
 .landing .hero-stage { animation: editorial-cover-in 1.08s var(--editorial-ease) both; }
 .landing .hero-stage .hero-feature > .cover-photo { animation: var(--artwork-animation,editorial-image-in) 1.18s var(--editorial-ease) backwards; }
 .landing .hero-stage .hero-feature.is-switching > .cover-photo { animation: editorial-image-swap .68s var(--editorial-ease) both; }
 .landing .hero-stage .hero-feature.is-switching :is(.feature-top,.feature-bottom) { animation: editorial-caption-in .55s var(--editorial-ease) both; }
 .editorial-arrived .practice-mark svg { animation: editorial-star-in 1.05s var(--editorial-ease) both; }
 .editorial-arrived > .project-cover, .editorial-arrived > .work-zoom { animation: editorial-cover-in .85s var(--editorial-ease) both; }
 .editorial-case .lead-zoom { animation: editorial-cover-in 1s var(--editorial-ease) both; }
 .editorial-case .palette-live { transition: background-color .46s ease, color .36s ease; }
}
@supports (animation-timeline: view()) {
 @media (min-width: 801px) and (prefers-reduced-motion: no-preference) {
  .perspective-marker .practice-mark { animation: editorial-star-scroll linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
 }
}
@keyframes editorial-type-in { from { transform: translateY(113%); } to { transform: translateY(0); } }
@keyframes editorial-cover-in { from { clip-path: inset(0 0 15% 0); opacity: .55; } to { clip-path: inset(0); opacity: 1; } }
@keyframes editorial-image-in { from { transform: scale(1.13); } to { transform: scale(1); } }
@keyframes editorial-image-swap { from { clip-path: inset(0 0 0 85%); transform: scale(1.08); } to { clip-path: inset(0); transform: scale(1); } }
@keyframes editorial-caption-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes editorial-star-in { from { transform: rotate(-65deg) scale(.7); } to { transform: none; } }
@keyframes editorial-star-scroll { from { transform: rotate(-38deg); } to { transform: rotate(44deg); } }
@media (prefers-reduced-motion: reduce) {
 .landing .hero-line > span { animation: none; }
 .editorial-case .palette-live { transition: none; }
}

.identity-grn .practice-section {
 background: var(--paper);
 border-block: 1px solid var(--line);
}
.identity-grn .about-monogram { background: transparent; color: var(--accent); }
.identity-grn .contact-composer { border: 1px solid var(--line); background: transparent; }
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
 .project-cover .project-open svg { transition: transform .45s var(--editorial-ease); }
 .project-cover:hover .project-open svg, .project-cover:focus-visible .project-open svg { transform: translate(3px,-3px); }
}

/* Keep the archive controls available during a crossfade. */
::view-transition { pointer-events: none; }