/* Shared site furniture and interaction treatment; standalone page layouts remain editorial. */
.ahf-site-header, .ahf-site-footer { --ahf-ink: oklch(0.18 0.017 74); --ahf-paper: oklch(0.96 0.018 81); --ahf-warm: oklch(0.83 0.032 78); font-family: "Manrope", Arial, sans-serif; }
.ahf-site-header { position: fixed; z-index: 110; top: 78px; left: 50%; width: min(690px, calc(100% - 40px)); transform: translateX(-50%); pointer-events: none; }
.ahf-site-header *, .ahf-site-footer * { box-sizing: border-box; }
.ahf-nav { pointer-events: auto; width: 100%; min-height: 56px; padding: 6px 10px 6px 23px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 1px solid oklch(0.96 0.018 81 / .24); border-radius: 100px; background: oklch(0.18 0.017 74 / .96); color: var(--ahf-paper); box-shadow: 0 14px 38px oklch(0.11 0.01 70 / .2); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); transition: width .5s cubic-bezier(.22,1,.36,1), padding .5s cubic-bezier(.22,1,.36,1), gap .5s cubic-bezier(.22,1,.36,1), opacity .3s ease, background .3s ease; margin-inline: auto; }
.ahf-nav__brand { font-family: "Newsreader", Georgia, serif; font-size: 21px; line-height: 1; font-weight: 400; white-space: nowrap; text-decoration: none; color: inherit; flex-shrink: 0; }
.ahf-nav__brand em { font-weight: 300; }
.ahf-nav__links { display: flex; align-items: center; gap: clamp(15px, 2.5vw, 28px); overflow: hidden; white-space: nowrap; max-width: 360px; opacity: 1; transition: max-width .45s cubic-bezier(.22,1,.36,1), opacity .25s ease; }
.ahf-nav__links a, .ahf-nav__future { font-family: "DM Mono", monospace; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: var(--ahf-paper); transition: color .2s; }
.ahf-nav__links a:hover, .ahf-nav__links a:focus-visible, .ahf-nav__links a[aria-current="page"] { color: var(--ahf-warm); }
.ahf-nav__future { opacity: .5; cursor: default; }
.ahf-nav__future small { margin-left: 4px; font-size: 8px; font-weight: 400; }
.ahf-nav__actions { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
.ahf-nav__whatsapp { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid oklch(0.96 0.018 81 / .25); border-radius: 50%; color: var(--ahf-paper); transition: background .25s ease, color .25s ease, border-color .25s ease; }
.ahf-nav__whatsapp:hover { background: var(--ahf-paper); color: var(--ahf-ink); border-color: var(--ahf-paper); }
.ahf-nav__toggle { display: grid; place-items: center; position: relative; width: 40px; height: 40px; flex-shrink: 0; padding: 0; border: 1px solid oklch(0.96 0.018 81 / .25); border-radius: 50%; background: transparent; color: var(--ahf-paper); cursor: pointer; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .22s ease, visibility .22s ease, border-color .22s ease; }
.ahf-nav__toggle:hover { border-color: var(--ahf-warm); }
.ahf-nav__toggle span { position: absolute; left: 11px; width: 16px; height: 1px; background: currentColor; transition: transform .28s cubic-bezier(.22,1,.36,1), top .28s cubic-bezier(.22,1,.36,1); top: 16px; }
.ahf-nav__toggle span + span { top: 22px; }
.ahf-nav__toggle[aria-expanded="true"] span:first-child { top: 19px; transform: rotate(45deg); }
.ahf-nav__toggle[aria-expanded="true"] span + span { top: 19px; transform: rotate(-45deg); }
.ahf-site-header.is-compact .ahf-nav { width: 348px; padding: 6px 12px 6px 22px; gap: 22px; }
.ahf-site-header.is-compact .ahf-nav__links { max-width: 0; opacity: 0; pointer-events: none; visibility: hidden; }
.ahf-site-header.is-compact .ahf-nav__toggle { opacity: 1; visibility: visible; pointer-events: auto; }
.ahf-site-header.is-compact.is-open .ahf-nav { width: 100%; padding: 6px 10px 6px 23px; opacity: 1; }
.ahf-site-header.is-compact.is-open .ahf-nav__links { max-width: 360px; opacity: 1; pointer-events: auto; visibility: visible; }
.ahf-site-header.is-compact.is-scrolling-down:not(.is-open) .ahf-nav { opacity: .68; }
.ahf-site-header.is-compact .ahf-nav:hover, .ahf-site-header.is-compact .ahf-nav:focus-within { opacity: 1; }
.ahf-site-header a:focus-visible, .ahf-site-header button:focus-visible, .ahf-site-footer a:focus-visible { outline: 2px solid var(--ahf-warm); outline-offset: 4px; }
.ahf-site-footer { background: oklch(0.18 0.017 74); color: var(--ahf-paper); padding: 38px max(5vw, 20px); display: flex; justify-content: space-between; align-items: center; gap: 16px; border-top: 1px solid oklch(0.96 0.018 81 / .23); font-family: "DM Mono", monospace; font-size: 10px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; line-height: 1.7; }
.ahf-site-footer__contact { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.ahf-site-footer a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.ahf-site-footer a:hover { color: var(--ahf-warm); }
/* The cursor is opt-in only for precise pointers, never for touch or reduced motion. */
.ahf-cursor { position: fixed; z-index: 200; top: 0; left: 0; width: 18px; height: 18px; border: 1px solid currentColor; border-radius: 50%; color: oklch(1 0 0); mix-blend-mode: difference; transform: translate3d(-100px,-100px,0) translate(-50%,-50%); pointer-events: none; opacity: 0; transition: width .22s ease, height .22s ease, opacity .15s ease; will-change: transform; }
.ahf-cursor__label { display: none; font: 500 10px/1 "DM Mono", monospace; text-transform: uppercase; letter-spacing: .12em; }
.ahf-cursor::after { content: ""; position: absolute; width: 3px; height: 3px; border-radius: 50%; background: currentColor; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.ahf-cursor.is-visible { opacity: 1; }
.ahf-cursor.is-image { width: 88px; height: 88px; background: oklch(0.96 0.018 81); color: oklch(0.18 0.017 74); mix-blend-mode: normal; display: grid; place-items: center; border-color: transparent; }
.ahf-cursor.is-image::after { display: none; }
.ahf-cursor.is-image .ahf-cursor__label { display: block; }
.ahf-cursor.is-interactive { width: 38px; height: 38px; }
.ahf-cursor.is-pressed { width: 12px; height: 12px; }
.ahf-cursor.is-image.is-pressed { width: 76px; height: 76px; }
@media (hover: hover) and (pointer: fine) { body.ahf-custom-cursor, body.ahf-custom-cursor a, body.ahf-custom-cursor button, body.ahf-custom-cursor summary, body.ahf-custom-cursor select, body.ahf-custom-cursor [data-ahf-view] { cursor: none; } body.ahf-custom-cursor input, body.ahf-custom-cursor textarea { cursor: text; } }
.ahf-image-viewer { position: fixed; z-index: 220; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; border: 0; padding: 48px; background: oklch(0.12 0.01 70 / .96); color: var(--ahf-paper); }
.ahf-image-viewer::backdrop { background: oklch(0.12 0.01 70 / .96); }
.ahf-image-viewer__image { width: 100%; height: 100%; object-fit: contain; }
.ahf-image-viewer__close { position: absolute; top: 16px; right: 20px; width: 40px; height: 40px; border: 1px solid currentColor; border-radius: 50%; background: transparent; color: inherit; font: 26px/1 "Manrope", sans-serif; cursor: pointer; }
.ahf-image-viewer__caption { position: absolute; bottom: 16px; left: 24px; right: 24px; text-align: center; font: 12px/1.5 "Manrope", sans-serif; }
[data-ahf-view]:focus-visible { outline: 2px solid var(--oxide, currentColor); outline-offset: 4px; }
@media (max-width: 700px) { .ahf-site-header { top: 66px; width: calc(100% - 32px); } .ahf-nav { padding-left: 16px; gap: 8px; } .ahf-nav__brand { font-size: 18px; } .ahf-nav__links { gap: 12px; } .ahf-nav__links a, .ahf-nav__future { font-size: 9px; } .ahf-nav__future small { display: none; } .ahf-site-header.is-compact .ahf-nav { width: 320px; } .ahf-site-header.is-compact.is-open .ahf-nav { width: 100%; padding-left: 16px; } .ahf-site-header.is-compact .ahf-nav__links { position: absolute; top: calc(100% + 8px); left: 0; right: 0; max-width: none; padding: 20px; display: flex; justify-content: space-around; border-radius: 8px; background: oklch(0.18 0.017 74 / .98); box-shadow: 0 12px 30px oklch(0.11 0.01 70 / .2); transform: translateY(-8px); transition: opacity .25s ease, transform .3s cubic-bezier(.22,1,.36,1), visibility .3s; } .ahf-site-header.is-compact.is-open .ahf-nav__links { max-width: none; transform: translateY(0); } .ahf-site-footer { flex-direction: column; align-items: flex-start; padding-block: 32px; } }
@media (max-width: 430px) { .ahf-nav__future { display: none; } .ahf-nav__whatsapp { width: 36px; height: 36px; } .ahf-image-viewer { padding: 50px 12px; } .ahf-nav__brand { font-size: 16px; } .ahf-nav__links { gap: 8px; } .ahf-nav__links a, .ahf-nav__future { font-size: 8px; } .ahf-site-header.is-compact .ahf-nav { width: 300px; } }
@media (prefers-reduced-motion: reduce) { .ahf-nav, .ahf-nav__links, .ahf-nav__toggle, .ahf-nav__toggle span { transition: none; } .ahf-cursor { display: none; } }
/* ---- Refinements: title tags, footer, scrollbar, smooth scroll ---- */
.eyebrow, .section-label { letter-spacing: .26em !important; line-height: 1.6; }
.eyebrow .rule { vertical-align: middle; margin-right: 14px; }
h1 + .eyebrow, .eyebrow + h1, .eyebrow + h2, .eyebrow + h3, .eyebrow + div > h2 { margin-top: 18px; }
.section-head .eyebrow, .other-work__head .eyebrow, [data-reveal].eyebrow { display: inline-flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.ahf-site-footer { display: grid; grid-template-columns: 1fr auto 1fr; }
.ahf-site-footer > span:last-child { justify-self: end; }
.ahf-site-footer__contact { justify-content: center; text-align: center; }
.ahf-site-footer a { transition: color .3s ease, border-color .3s ease; }
html { scrollbar-color: oklch(0.58 0.12 45) oklch(0.18 0.017 74); scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: oklch(0.18 0.017 74); }
::-webkit-scrollbar-thumb { background: oklch(0.58 0.12 45); border-radius: 10px; border: 2px solid oklch(0.18 0.017 74); }
::-webkit-scrollbar-thumb:hover { background: oklch(0.66 0.13 50); }
::selection { background: oklch(0.58 0.12 45); color: oklch(0.96 0.018 81); }
html.lenis, html.lenis body { height: auto; scroll-behavior: auto !important; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
[data-ahf-view] img { transition: transform 1.1s cubic-bezier(.22,1,.36,1); }
[data-ahf-view]:hover img { transform: scale(1.025); }
@media (max-width: 700px) { .ahf-site-footer { display: flex; align-items: center; text-align: center; } .ahf-site-footer > span:last-child { justify-self: auto; } }
@media (prefers-reduced-motion: reduce) { [data-ahf-view]:hover img { transform: none; } }
