.site-header { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; min-height: 82px; padding: 14px max(24px, calc((100vw - 1180px)/2)); background: rgba(241,236,227,.94); border-bottom: 1px solid rgba(38,26,23,.14); backdrop-filter: blur(14px); }
.wordmark { min-height: 58px; display: flex; flex-direction: column; justify-content: center; padding-left: 68px; background: url("https://charlee-knox-atelier-images.atl1.cdn.digitaloceanspaces.com/ck-id/seed/brand/ck-crest-color.webp") left center / 56px 54px no-repeat; font-family: var(--font-display); font-size: 1.55rem; line-height: .8; }
.wordmark small { display: block; margin-top: 8px; font: 500 .55rem var(--font-label); letter-spacing: .34em; text-transform: uppercase; }
.site-menu { display: flex; align-items: center; gap: clamp(1.2rem, 3vw, 2.8rem); font-size: .78rem; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; }
.site-menu a:not(.text-link) { position: relative; }
.site-menu a:not(.text-link)::after { position: absolute; right: 0; bottom: -6px; left: 0; height: 1px; background: var(--oxblood); content: ""; transform: scaleX(0); transform-origin: right; transition: transform .25s var(--ease); }
.site-menu a:hover::after { transform: scaleX(1); transform-origin: left; }
.text-link { padding-bottom: 5px; border-bottom: 1px solid var(--oxblood); }
.menu-toggle { display: none; border: 0; background: transparent; font: 600 .7rem var(--font-label); letter-spacing: .14em; text-transform: uppercase; }
.button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; padding: .85rem 1.35rem; border: 1px solid currentColor; font-size: .75rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; transition: background .25s, color .25s; }
.button--dark { background: var(--espresso); color: var(--white); }
.button--dark:hover { background: var(--oxblood); }
.button--light { color: var(--white); }
.button--light:hover { background: var(--white); color: var(--espresso); }
.site-footer { padding: 5rem 0 2rem; background: var(--espresso); color: var(--parchment); }
.footer-grid { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(150px,.7fr) minmax(150px,.7fr) auto; gap: 3rem; }
.site-footer a { overflow-wrap: anywhere; }
.footer-crest { width: 110px; margin-bottom: 1.5rem; }
.footer-links { display: grid; align-content: start; gap: .7rem; }
.social-links { display: flex; align-content: start; align-items: center; gap: .7rem; }
.social-link { display: inline-grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(255,255,255,.32); color: var(--parchment); transition: background .25s, color .25s, border-color .25s; }
.social-link:hover { border-color: var(--parchment); background: var(--parchment); color: var(--espresso); }
.social-link[hidden] { display: none; }
.social-icon { width: 20px; height: 20px; background: currentColor; }
.social-icon--instagram { -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5Zm0 2a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3H7Zm5 4a4 4 0 1 1 0 8 4 4 0 0 1 0-8Zm0 2a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm5.25-3.25a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5Zm0 2a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3H7Zm5 4a4 4 0 1 1 0 8 4 4 0 0 1 0-8Zm0 2a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm5.25-3.25a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z'/%3E%3C/svg%3E") center / contain no-repeat; }
.social-icon--tiktok { -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 2c.35 2.45 1.72 4.13 4 4.52V10c-1.44-.04-2.78-.45-4-1.24v5.88c0 4.07-2.58 6.36-6.06 6.36C5.8 21 3 18.58 3 15.42c0-3.59 3.06-6.14 6.92-5.46v3.58c-1.74-.53-3.1.31-3.1 1.83 0 1.16.91 2.06 2.18 2.06 1.38 0 2.28-.82 2.28-2.66V2H15Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 2c.35 2.45 1.72 4.13 4 4.52V10c-1.44-.04-2.78-.45-4-1.24v5.88c0 4.07-2.58 6.36-6.06 6.36C5.8 21 3 18.58 3 15.42c0-3.59 3.06-6.14 6.92-5.46v3.58c-1.74-.53-3.1.31-3.1 1.83 0 1.16.91 2.06 2.18 2.06 1.38 0 2.28-.82 2.28-2.66V2H15Z'/%3E%3C/svg%3E") center / contain no-repeat; }
.copyright { width: var(--page); margin: 4rem auto 0; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.18); font-size: .7rem; }
.intro-mark { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: var(--espresso); color: var(--parchment); transition: opacity .65s var(--ease), visibility .65s; }
.intro-mark[hidden], .intro-mark.is-done { opacity: 0; visibility: hidden; }
.intro-mark img { width: min(230px, 50vw); }
.inquiry-panel { padding: clamp(3rem, 7vw, 6rem); background: var(--olive-deep); color: var(--parchment); }
.modal-open, .menu-open { overflow: hidden; }
.gallery-modal[hidden] { display: none; }
.gallery-modal { --modal-ink: var(--parchment); --modal-backdrop: rgba(20, 13, 11, .94); --modal-control-bg: rgba(38,26,23,.55); --modal-control-border: rgba(255,255,255,.55); position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: clamp(1rem, 4vw, 3rem); color: var(--modal-ink); }
.project-detail-page .gallery-modal { --modal-ink: var(--project-surface, var(--parchment)); --modal-backdrop: color-mix(in srgb, var(--project-bg, var(--espresso)) 94%, transparent); --modal-control-bg: color-mix(in srgb, var(--project-accent, var(--oxblood)) 72%, var(--project-bg, var(--espresso))); --modal-control-border: color-mix(in srgb, var(--project-surface, var(--parchment)) 58%, transparent); }
.gallery-modal__backdrop { position: absolute; inset: 0; width: 100%; border: 0; background: var(--modal-backdrop); cursor: zoom-out; }
.gallery-modal__stage { position: relative; z-index: 1; display: grid; grid-template-columns: 54px minmax(0, 1fr) 54px; align-items: center; width: min(1180px, 100%); height: min(88svh, 900px); }
.gallery-modal figure { display: grid; min-width: 0; width: 100%; height: min(78svh, 780px); margin: 0; grid-template-rows: minmax(0, 1fr) auto; }
.gallery-modal__image { width: 100%; height: 100%; min-height: 0; object-fit: contain; object-position: center; }
.gallery-modal__caption { padding-top: .75rem; color: var(--modal-ink); text-align: center; font: 500 1rem var(--font-display); }
.gallery-modal__close, .gallery-modal__nav { border: 1px solid var(--modal-control-border); background: var(--modal-control-bg); color: var(--modal-ink); cursor: pointer; }
.gallery-modal__close { position: absolute; top: 0; right: 0; z-index: 2; min-height: 42px; padding: .65rem .9rem; font: 600 .65rem var(--font-label); letter-spacing: .1em; text-transform: uppercase; }
.gallery-modal__nav { width: 44px; height: 44px; border-radius: 50%; font-size: 1.2rem; }
.gallery-modal__nav--next { justify-self: end; }
.gallery-modal__count { position: absolute; right: 0; bottom: 0; margin: 0; color: var(--modal-ink); font: 500 .65rem var(--font-label); letter-spacing: .12em; }
.gallery-modal-trigger { cursor: zoom-in; }
@media (max-width: 980px) {
  .footer-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 860px) {
  .wordmark { min-height: 50px; padding-left: 55px; background-size: 46px 44px; font-size: 1.35rem; }
  .menu-toggle { display: block; }
  .site-menu { position: fixed; top: 82px; right: 0; bottom: 0; left: 0; display: none; min-height: calc(100svh - 82px); overflow-y: auto; align-content: start; gap: .75rem; padding: 4rem 24px; background: var(--espresso); color: var(--parchment); font: 500 clamp(2.6rem, 11vw, 5rem)/1.15 var(--font-display); letter-spacing: 0; text-transform: none; }
  .site-menu.is-open { display: grid; }
  .site-menu .text-link { margin-top: 2rem; font: 600 .75rem var(--font-label); letter-spacing: .1em; text-transform: uppercase; }
  .footer-grid { grid-template-columns: 1fr; }
  .gallery-modal { padding: 1rem; }
  .gallery-modal__stage { grid-template-columns: 38px minmax(0,1fr) 38px; height: 88svh; }
  .gallery-modal figure { height: min(76svh, 680px); }
  .gallery-modal__nav { width: 36px; height: 36px; }
}