/* COAD88 architectural identity, based on the updated Behance project */
.coad88-page { --case-pad: 9vw; --coad-ink: #1d2022; --coad-paper: #f2f1ed; background: var(--coad-paper); color: var(--coad-ink); }
.coad88-page .site-header { background: var(--coad-paper); color: var(--coad-ink); border-color: rgba(29,32,34,.18); }
.coad88-page .nav-contact { border-color: rgba(29,32,34,.6); }
.coad-hero { min-height: 430px; display: grid; grid-template-columns: 1fr; align-items: end; padding: 65px var(--case-pad) 55px; position: relative; overflow: hidden; background: #e7e6e2; }
.coad-hero-copy { position: relative; z-index: 1; max-width: 900px; }
.coad-back, .coad-kicker, .coad-credit, .coad-label, .coad-hero-note { font: 9px var(--mono); letter-spacing: .13em; text-transform: uppercase; }
.coad-back { display: inline-block; color: var(--coad-ink); border-bottom: 1px solid rgba(29,32,34,.45); padding-bottom: 8px; margin-bottom: 54px; }
.coad-kicker { color: #747471; margin: 0 0 20px; }
.coad-hero h1 { margin: 0; color: var(--coad-ink); font: 700 clamp(76px, 11vw, 152px)/.78 var(--futura); letter-spacing: -.085em; }
.coad-hero h1 span { color: var(--coad-ink); }
.coad-lede { max-width: 420px; margin: 28px 0 0; color: #454746; font-size: 15px; line-height: 1.7; }
.coad-credit { color: #686967; line-height: 1.7; margin: 18px 0 0; font-size: 8px; }
.coad-credit strong { color: var(--coad-ink); font-size: 10px; }
.coad-button { display: inline-flex; align-items: center; gap: 30px; margin-top: 24px; padding: 13px 16px; border: 1px solid var(--coad-ink); border-radius: 30px; color: var(--coad-ink); font-size: 11px; font-weight: 600; transition: background .2s, color .2s; }
.coad-button:hover { background: var(--coad-ink); color: var(--coad-paper); }
.coad-button span { font-size: 16px; }
.coad-hero-art { margin: 0; width: 100%; background: #27292a; }
.coad-hero-art img { display: block; width: 100%; height: auto; }
.coad-hero-note { position: absolute; right: 3.5vw; bottom: 28px; color: #646563; writing-mode: vertical-rl; }
.coad-intro { display: grid; grid-template-columns: .7fr 1.3fr; gap: 7vw; align-items: start; padding: 105px var(--case-pad); background: var(--coad-paper); }
.coad-label { color: #777876; }
.coad-intro h2, .coad-outro h2 { margin: 20px 0 0; color: var(--coad-ink); font: 700 clamp(50px, 7vw, 94px)/.9 var(--futura); letter-spacing: -.06em; }
.coad-intro h2 em, .coad-outro h2 em { color: #777876; font: italic 400 1em/.95 Georgia, serif; }
.coad-intro > div > p { max-width: 650px; margin: 25px 0 0; color: #4a4b49; font-size: 15px; line-height: 1.8; }
.coad-gallery { padding: 0 var(--case-pad) 100px; display: grid; grid-template-columns: 1fr; gap: 0; background: var(--coad-paper); }
.coad-gallery figure { margin: 0; overflow: hidden; background: #e7e6e2; }
.coad-gallery img { display: block; width: 100%; height: auto; }
.coad-gallery .coad-gallery-wide, .coad-gallery figure { grid-column: 1; }
.coad-outro { min-height: 470px; padding: 95px var(--case-pad); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; background: var(--coad-ink); color: var(--coad-paper); }
.coad-outro .coad-label { color: #b9b9b5; }
.coad-outro h2 { color: var(--coad-paper); font-size: clamp(68px, 9vw, 124px); }
.coad-outro h2 em { color: #c5c5c0; }
.coad-outro .coad-button { border-color: var(--coad-paper); color: var(--coad-paper); }
.coad-outro .coad-button:hover { background: var(--coad-paper); color: var(--coad-ink); }
.coad88-page .site-footer { background: #141617; color: var(--coad-paper); }
@media (max-width: 800px) {
  .coad-hero { min-height: auto; grid-template-columns: 1fr; gap: 0; padding-top: 50px; padding-bottom: 55px; }
  .coad-back { margin-bottom: 44px; }
  .coad-hero-art { max-width: 860px; }
  .coad-intro { grid-template-columns: 1fr; gap: 25px; }
}
@media (max-width: 540px) {
  .coad88-page .site-header .menu-toggle span { background: var(--coad-ink); }
  .coad88-page .main-nav { background: var(--coad-paper); border-color: rgba(29,32,34,.18); }
  .coad88-page .main-nav > a { border-color: rgba(29,32,34,.18); }
  .coad-hero { padding: 38px 7vw 58px; gap: 28px; }
  .coad-hero h1 { font-size: clamp(76px, 20vw, 112px); }
  .coad-lede { font-size: 14px; }
  .coad-hero-note { right: 12px; bottom: 16px; font-size: 7px; }
  .coad-intro { padding: 72px 7vw; }
  .coad-intro h2 { font-size: clamp(49px, 13vw, 68px); }
  .coad-gallery { grid-template-columns: 1fr; padding: 0 7vw 70px; gap: 0; }
  .coad-gallery .coad-gallery-wide { grid-column: 1; }
  .coad-outro { min-height: 380px; padding: 75px 7vw; }
  .coad-outro h2 { font-size: clamp(66px, 17vw, 96px); }
}