:root {
--paper: #f4f0e8;
--paper-2: #ece6d9;
--ink: #13110e;
--ink-2: #2a2722;
--rule: #1a1814;
--mute: #8a8475;
/* Fixed reference colors (never swapped by theme) so the logo mark can be
tinted to "the other theme's background" regardless of which is active. */
--paper-light: #f4f0e8;
--paper-dark: #2a2722;
--logo-tint: var(--paper-dark);
/* Hex fallback for browsers without oklch (Safari <15.4, Chrome <111, Opera <97) */
--accent: #165a77;
/* Same blue as --accent, pre-mixed as rgba for glow/box-shadow use (can't pull
channel values back out of --accent's hex/oklch at CSS-parse time). */
--accent-glow: rgba(22, 90, 119, 0.45);
--accent-glow-strong: rgba(22, 90, 119, 0.75);
--serif: "Instrument Serif", "Times New Roman", serif;
--sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
--mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
/* ── Golden-ratio type scale (Option C: √φ half-steps) ──────────────────
Anchored on 16px body. Ratio between adjacent steps is √1.618 ≈ 1.272,
so every OTHER step is an exact φ (1.618) multiple of the base. Every
font-size on the site snaps to one of these rungs. New pages/components
should size text from these tokens (or the semantic aliases below) rather
than inventing off-scale values. Ladder, px:
8 · 10 · 12.5 · 16 · 20 · 26 · 33 · 42 · 53 · 68 · 87 · 110 · 140 · 178
φ multiples (bold rungs): 16, 26, 42, 68, 110, 178. */
--fs-000: 8px; /* micro tags (splash corners) */
--fs-00: 10px; /* captions, counters, fine print */
--fs-0: 12.5px; /* mono labels, nav, footer, kickers, meta */
--fs-1: 16px; /* body copy, inputs — the base anchor */
--fs-2: 20px; /* leads, stats, small decks */
--fs-3: 26px; /* italic decks, dd values (= φ¹ · base) */
--fs-4: 33px; /* card titles, contact values, big labels */
--fs-5: 42px; /* small display headings (= φ² · base) */
--fs-6: 53px; /* mid display headings */
--fs-7: 68px; /* section display (= φ³ · base) */
--fs-8: 87px; /* large display */
--fs-9: 110px; /* hero (= φ⁴ · base) */
--fs-10: 140px; /* cover / oversized display */
--fs-11: 178px; /* splash / max display (= φ⁵ · base) */
}
@supports (color: oklch(0.42 0.13 25)) {
:root { --accent: oklch(0.44 0.08 231.6); }
}
/* Dark mode — follows system preference automatically; [data-theme] is the
manual override set by the toggle button, and always wins over system
preference since it's applied directly by JS regardless of media query. */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--paper: #2a2722;
--paper-2: #333028;
--ink: #f4f0e8;
--ink-2: #c8c2b4;
--rule: #45403a;
--mute: #9c9686;
--accent: #50a3cb;
--accent-glow: rgba(80, 163, 203, 0.45);
--accent-glow-strong: rgba(80, 163, 203, 0.75);
--logo-tint: var(--paper-light);
}
@supports (color: oklch(0.42 0.13 25)) {
:root:not([data-theme="light"]) { --accent: oklch(0.68 0.10 231.6); }
}
}
[data-theme="dark"] {
--paper: #2a2722;
--paper-2: #333028;
--ink: #f4f0e8;
--ink-2: #c8c2b4;
--rule: #45403a;
--mute: #9c9686;
--accent: #50a3cb;
--accent-glow: rgba(80, 163, 203, 0.45);
--accent-glow-strong: rgba(80, 163, 203, 0.75);
--logo-tint: var(--paper-light);
}
@supports (color: oklch(0.42 0.13 25)) {
[data-theme="dark"] { --accent: oklch(0.68 0.10 231.6); }
}
#theme-toggle, .theme-toggle {
display: inline-flex; align-items: center; justify-content: center;
width: 34px; height: 34px;
margin-right: 10px;
border: 1px solid var(--rule);
background: transparent;
color: var(--ink);
font-size: 16px;
cursor: pointer;
vertical-align: middle;
transition: background .2s, color .2s;
}
#theme-toggle:hover, .theme-toggle:hover { background: var(--ink); color: var(--paper); }
/* Persistent header controls. The header's wordmark row — and the toggle +
"Book a session" button inside it (head-meta-r) — collapses to zero height
and fades out on scroll. This cluster is a copy of those two controls, in the
same order, and it's a direct child of header.head (which stays put), so it
rides over the always-visible nav bar once the row collapses. Hidden until
the header is .scrolled, so it never doubles up with the wordmark-row copy.
- right: 28px matches .wordmark-inner's own right padding, so the cluster's
right edge lines up with head-meta-r's original position.
- top:50% + translateY(-50%) centers it top-to-bottom on the collapsed
header (which is just the nav bar once the wordmark row is gone).
It only docks on WIDE screens (≥1280px) where the centered nav and the cluster
both fit without colliding — no side reserve needed, so the tabs are never
squeezed or clipped. Below that it's hidden here; on small screens (≤980px) the
collapsed header instead shows a slim controls strip (see that media block).
Hidden by default; the min-width block below turns it on. */
.head .head-pinned {
position: absolute;
right: 28px;
top: 50%;
transform: translateY(-50%);
display: none;
align-items: center;
z-index: 60;
opacity: 0;
pointer-events: none;
transition: opacity 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@media (min-width: 1280px) {
.head .head-pinned { display: flex; }
.head.scrolled .head-pinned {
opacity: 1;
pointer-events: auto;
}
/* Symmetric side room so the centered tabs stay clear of the docked cluster.
This fits from 1280px up; below that the cluster is hidden and the nav needs
no reserve. */
.head.scrolled nav.primary {
padding-left: 220px;
padding-right: 220px;
}
}
/* Logo mark (header + footer): tinted to the *other* theme's paper color —
dark gray on the light-mode cream, cream on the dark-mode charcoal — via a
CSS mask, since a plain filter can't hit an exact custom hex. The ![]()
is
kept (hidden) so its box still drives layout/sizing; a masked pseudo-element
on its wrapper paints the visible mark. */
.logo-mark { visibility: hidden; }
.wordmark-stack a, .foot-mark { position: relative; display: inline-block; }
.wordmark-stack a::after, .foot-mark::after {
content: '';
position: absolute; inset: 0;
background-color: var(--logo-tint);
-webkit-mask-image: url("uploads/assets/AHHM-Media-Logo-Transparent.webp");
mask-image: url("uploads/assets/AHHM-Media-Logo-Transparent.webp");
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; mask-position: center;
-webkit-mask-size: contain; mask-size: contain;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--ink); }
/* Reserve the vertical scrollbar gutter permanently so page-height changes
(e.g. the slide transition briefly growing to fit the taller of two
pages) never pop the scrollbar in/out and shift the layout. */
html { overflow-y: scroll; scrollbar-gutter: stable; }
body {
font-family: var(--sans);
font-size: 16px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
/* ───────── Masthead bar ───────── */
.strip {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 24px;
padding: 10px 28px;
border-bottom: 1px solid var(--rule);
font-family: var(--mono);
font-size: 12.5px;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.strip .l { display: flex; gap: 22px; }
.strip .r { display: flex; gap: 22px; justify-content: flex-end; }
.strip .c { letter-spacing: 0.18em; }
.strip .dot { display: inline-block; width: 6px; height: 6px; background: var(--accent); border-radius: 50%; vertical-align: 2px; margin-right: 8px; }
/* ───────── Header ───────── */
header.head {
position: sticky; top: 0; z-index: 50;
background: var(--paper);
border-bottom: 1px solid var(--rule);
}
/* .wordmark-row = collapse wrapper only; layout lives in .wordmark-inner */
.wordmark-row {
display: grid;
grid-template-rows: 1fr;
transition: grid-template-rows 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.wordmark-inner {
min-height: 0;
overflow: hidden;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
padding: 18px 28px;
gap: 24px;
transition: opacity 0.28s cubic-bezier(0.22, 0.61, 0.36, 1), padding 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.wordmark-stack { grid-column: 2; display: flex; justify-content: center; align-items: center; }
.tagline {
font-family: var(--mono);
font-size: 12.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-2);
line-height: 1.5;
}
.tagline .est { display: block; color: var(--mute); margin-top: 4px; }
.wordmark {
font-family: var(--serif);
font-weight: 400;
font-size: clamp(53px, 7.4vw, 110px);
line-height: 0.9;
letter-spacing: -0.01em;
text-align: center;
}
.wordmark em { font-style: italic; color: var(--accent); }
.wordmark .amp { font-style: italic; }
.head-meta-l, .head-meta-r {
font-family: var(--mono);
font-size: 12.5px;
text-transform: uppercase;
letter-spacing: 0.06em;
line-height: 1.5;
align-self: center;
}
.head-meta-r { text-align: right; }
.head-pinned { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.06em; }
.head-meta-r .book, .head-pinned .book {
display: inline-block;
padding: 8px 14px;
background-color: var(--ink);
color: var(--paper);
border-radius: 0;
font-family: var(--sans);
font-weight: 600;
letter-spacing: 0.06em;
transition: background-color .2s;
animation: bookPulse 2.4s ease-in-out infinite;
/* Hover shimmer sweep — a second background layer with an animated
position (see qb-book-btn for why this is a background layer rather
than a ::after pseudo-element: this button's own box-shadow glow needs
to render outside its edges, which overflow:hidden would clip). */
background-image: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.35) 50%, transparent 100%);
background-repeat: no-repeat;
background-size: 40% 100%;
background-position: -60% 0;
}
/* Hover: pause the ambient glow/color pulse, run the one-shot shimmer sweep. */
.head-meta-r .book:hover, .head-pinned .book:hover {
background-color: var(--accent);
animation-name: bookPulse, hover-sheen-bg;
animation-duration: 2.4s, .6s;
animation-timing-function: ease-in-out, ease-in-out;
animation-iteration-count: infinite, 1;
animation-play-state: paused, running;
}
/* Same breathing-halo mechanism as the splash's Tap To Enter, tinted with the
accent blue instead of cream — this button sits on the light/dark header
background rather than the splash's always-dark one, where a cream glow
would barely register against a light paper background. Strong variant:
bigger glow + the button itself briefly shifts to the accent color at peak.
(background-color, not the `background` shorthand, so it doesn't reset the
shimmer's background-image every frame.) */
@keyframes bookPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); background-color: var(--ink); }
50% { box-shadow: 0 0 30px 6px var(--accent-glow-strong); background-color: var(--accent); }
}
/* ── Scroll-collapse header — grid-template-rows trick: no dead zone, perfectly smooth ── */
.head.scrolled .wordmark-row {
grid-template-rows: 0fr;
}
.head.scrolled .wordmark-inner {
opacity: 0;
padding-top: 0;
padding-bottom: 0;
}
.head.scrolled nav.primary {
border-top-color: transparent;
box-shadow: 0 2px 10px rgba(0,0,0,0.07);
}
/* ───────── Nav Dropdowns ───────── */
.nav-dropdown {
position: relative;
display: inline-flex;
align-items: stretch;
border-right: 1px solid var(--rule);
}
.nav-dropdown > button {
border-right: 0;
}
.dropdown-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
background: var(--paper);
border: 1px solid var(--rule);
border-top: 2px solid var(--ink);
min-width: 220px;
z-index: 100;
box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}
.nav-dropdown:hover .dropdown-menu {
display: block;
}
.dropdown-menu a {
display: block;
padding: 12px 18px;
font-family: var(--mono);
font-size: 12.5px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-2);
text-decoration: none;
border-bottom: 1px solid var(--paper-2);
transition: background .15s, color .15s, padding .15s;
}
.dropdown-menu a:last-child { border-bottom: none; }
.dropdown-menu a.dropdown-view-all { display: none; color: var(--ink) !important; font-weight: 700; border-bottom: 2px solid var(--rule) !important; }
.dropdown-menu a:hover {
background: var(--ink);
color: var(--paper);
padding-left: 24px;
}
/* Nav */
nav.primary {
position: relative;
display: flex;
justify-content: center;
gap: 0;
border-top: 1px solid var(--rule);
background: var(--paper);
box-shadow: 0 2px 10px rgba(0,0,0,0);
transition: border-top-color 0.28s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}
nav.primary button {
padding: 14px 22px;
font-family: var(--sans);
font-weight: 600;
font-size: 12.5px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink);
border-right: 1px solid var(--rule);
transition: background .2s, color .2s;
position: relative;
}
nav.primary button:first-child { border-left: 1px solid var(--rule); }
nav.primary button:hover { background: var(--ink); color: var(--paper); }
nav.primary button.active {
background: var(--ink);
color: var(--paper);
}
#nav-indicator {
position: absolute; top: 0; left: 0;
width: 8px; height: 8px;
background: var(--accent);
transform: translate(calc(var(--nx, 0px) - 50%), calc(var(--ny, 0px) - 50%)) rotate(45deg);
transition: transform .32s cubic-bezier(0.65, 0, 0.35, 1), opacity .2s ease;
will-change: transform;
pointer-events: none;
opacity: 0;
}
#nav-indicator.placed { opacity: 1; }
/* ───────── Page system ───────── */
main { display: block; position: relative; }
.page { display: none; }
.page.active { display: block; }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.3); } }
@keyframes letterpress {
0%, 100% {
box-shadow:
0 2px 0 rgba(0,0,0,0.25),
0 4px 8px rgba(0,0,0,0.15),
inset 0 1px 0 rgba(255,255,255,0.08);
transform: translateY(0);
}
50% {
box-shadow:
0 0 0 rgba(0,0,0,0.2),
0 0 0 rgba(0,0,0,0),
inset 0 2px 4px rgba(0,0,0,0.5),
inset 0 -1px 0 rgba(255,255,255,0.06);
transform: translateY(2px);
}
}
@keyframes typing-dot {
0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
30% { opacity: 1; transform: translateY(-2px); }
}
@keyframes flicker {
0%, 18%, 22%, 25%, 53%, 57%, 100% {
opacity: 1;
text-shadow: none;
}
20%, 24%, 55% {
opacity: 0.6;
text-shadow: 0 0 2px rgba(255,255,255,0.4);
}
21% { opacity: 0.85; }
56% { opacity: 0.5; }
}
/* ───────── Layout primitives ───────── */
.wrap { padding: 0 28px; }
.rule { height: 1px; background: var(--rule); }
.label {
font-family: var(--mono);
font-size: 12.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-2);
}
.label .num { color: var(--accent); margin-right: 8px; }
.display {
font-family: var(--serif);
font-weight: 400;
line-height: 0.96;
letter-spacing: -0.01em;
}
.display .it { font-style: italic; }
/* Section heading */
.section-head {
display: grid;
grid-template-columns: 220px 1fr 220px;
align-items: end;
gap: 28px;
padding: 36px 0 22px;
border-bottom: 1px solid var(--rule);
}
.section-head .lead { font-family: var(--mono); font-size: 12.5px; line-height: 1.6; text-transform: uppercase; letter-spacing: 0.06em; }
.section-head h2 {
margin: 0;
font-family: var(--serif);
font-weight: 400;
font-size: clamp(53px, 8vw, 140px);
line-height: 0.9;
letter-spacing: -0.015em;
}
.section-head .meta { text-align: right; font-family: var(--mono); font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); }
/* Image plate */
.plate {
position: relative;
background:
repeating-linear-gradient(45deg, #d7d0c1 0 1px, transparent 1px 14px),
linear-gradient(180deg, #cfc8b8, #b8b0a0);
color: #2c2a25;
overflow: hidden;
border: 1px solid var(--rule);
}
.plate.dark {
background:
repeating-linear-gradient(45deg, #1a1814 0 1px, transparent 1px 14px),
linear-gradient(180deg, #2a2722, #14120e);
color: #ddd5c1;
}
.plate.warm {
background:
repeating-linear-gradient(45deg, #b3826b 0 1px, transparent 1px 14px),
linear-gradient(180deg, #b88468, #6e4631);
color: #f3e4d4;
}
.plate.blue {
background:
repeating-linear-gradient(45deg, #2f4a5c 0 1px, transparent 1px 14px),
linear-gradient(180deg, #3a5b71, #1c2d3a);
color: #cde0ec;
}
.plate.olive {
background:
repeating-linear-gradient(45deg, #4d5235 0 1px, transparent 1px 14px),
linear-gradient(180deg, #5d6240, #2c2f1d);
color: #d9d6b8;
}
.plate.rose {
background:
repeating-linear-gradient(45deg, #7a3344 0 1px, transparent 1px 14px),
linear-gradient(180deg, #8c3b4d, #4a1c27);
color: #f3d3d8;
}
.plate .frame {
position: absolute;
inset: 12px;
border: 1px solid currentColor;
opacity: 0.18;
pointer-events: none;
}
.plate .tag-tl, .plate .tag-tr, .plate .tag-bl, .plate .tag-br {
position: absolute;
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
opacity: 0.85;
}
.plate .tag-tl { top: 14px; left: 18px; }
.plate .tag-tr { top: 14px; right: 18px; }
.plate .tag-bl { bottom: 14px; left: 18px; }
.plate .tag-br { bottom: 14px; right: 18px; }
.plate .center {
position: absolute; inset: 0;
display: grid; place-items: center;
text-align: center;
font-family: var(--mono);
font-size: 12.5px;
letter-spacing: 0.12em;
text-transform: uppercase;
opacity: 0.7;
}
.plate .crosshair {
position: absolute; left: 50%; top: 50%;
width: 22px; height: 22px;
transform: translate(-50%, -50%);
opacity: 0.35;
}
.plate .crosshair::before, .plate .crosshair::after {
content: ""; position: absolute; background: currentColor;
}
.plate .crosshair::before { left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-50%); }
.plate .crosshair::after { top: 50%; left: 0; right: 0; height: 1px; transform: translateY(-50%); }
.plate .plate-photo {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.plate.has-photo .tag-tl, .plate.has-photo .tag-tr,
.plate.has-photo .tag-bl, .plate.has-photo .tag-br {
color: #f4f0e8;
text-shadow: 0 1px 2px rgba(0,0,0,0.4);
z-index: 2;
}
.plate.has-photo .frame { border-color: #f4f0e8; opacity: 0.35; z-index: 2; }
/* Inner border only belongs on hero/cover plates, not gallery grid images */
.plate .frame { display: none; }
.cover-img .plate .frame { display: block; }
/* Corner tag text only belongs on hero/cover plates, not gallery grid images */
.plate .tag-tl, .plate .tag-tr, .plate .tag-bl, .plate .tag-br { display: none; }
.cover-img .plate .tag-tl, .cover-img .plate .tag-tr,
.cover-img .plate .tag-bl, .cover-img .plate .tag-br { display: block; }
/* ───────── UX panel state classes ───────── */
.tp-mono-on .plate { filter: grayscale(1); }
/* Caption row beneath plates */
.cap {
display: grid;
grid-template-columns: 1fr auto;
gap: 20px;
padding: 8px 2px 0;
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-2);
}
.cap .r { color: var(--mute); }
/* ───────── HOME ───────── */
.hero {
display: grid;
grid-template-columns: 5fr 4fr;
gap: 28px;
padding: 28px;
border-bottom: 1px solid var(--rule);
}
.hero-main { display: flex; flex-direction: column; gap: 10px; }
.hero-main .plate { aspect-ratio: 4 / 5; }
.hero-aside { display: flex; flex-direction: column; gap: 22px; }
.kicker {
font-family: var(--mono);
font-size: 12.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--accent);
border-top: 1px solid var(--rule);
padding-top: 12px;
}
.hero-headline {
font-family: var(--serif);
font-weight: 400;
font-size: clamp(42px, 5.4vw, 87px);
line-height: 0.94;
letter-spacing: -0.015em;
margin: 0;
}
.hero-headline .it { font-style: italic; color: var(--accent); }
.hero-deck {
font-family: var(--serif);
font-style: italic;
font-size: 20px;
line-height: 1.35;
color: var(--ink-2);
max-width: 38ch;
}
.hero-meta {
border-top: 1px solid var(--rule);
padding-top: 12px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
font-family: var(--mono);
font-size: 12.5px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-2);
}
.hero-meta strong { display: block; color: var(--ink); font-weight: 500; margin-bottom: 4px; color: var(--mute); font-size: 10px; }
.hero-aside-art { aspect-ratio: 4 / 5; }
/* Index of works */
.index-row {
display: grid;
grid-template-columns: 70px 1fr 1fr 100px 80px;
align-items: center;
gap: 24px;
padding: 16px 0;
border-bottom: 1px solid var(--rule);
font-family: var(--mono);
font-size: 12.5px;
letter-spacing: 0.04em;
text-transform: uppercase;
cursor: pointer;
transition: padding .2s, background .2s;
}
.index-row:hover { padding-left: 12px; background: var(--paper-2); }
.index-row .num { color: var(--accent); }
.index-row .title {
font-family: var(--serif);
font-style: italic;
font-size: 26px;
font-weight: 600;
text-transform: none;
letter-spacing: 0;
color: var(--ink);
}
.index-row .arrow { text-align: right; }
.index-row .filmstrip-row {
grid-column: 1 / -1;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 6px;
margin-top: 14px;
}
.filmstrip-tile { aspect-ratio: 4 / 5; }
.filmstrip-tile .filmstrip-tag {
position: absolute; bottom: 6px; left: 8px; z-index: 3;
font-family: var(--mono); font-size: 8px; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--paper); text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.filmstrip-more {
aspect-ratio: 4 / 5; display: flex; align-items: center; justify-content: center;
border: 1px solid var(--rule);
font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.06em; color: var(--mute);
}
/* Editor's note */
.note {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
gap: 18px;
padding: 32px 28px;
border-bottom: 1px solid var(--rule);
}
.note .pull {
grid-column: 2;
font-family: var(--serif);
font-style: italic;
font-size: clamp(26px, 3.4vw, 53px);
line-height: 1.15;
letter-spacing: -0.01em;
}
.note .pull::before {
content: '\201C';
display: block;
font-family: var(--serif);
font-style: normal;
font-size: clamp(68px, 8vw, 87px);
line-height: 0.7;
color: var(--accent);
opacity: 0.35;
margin-bottom: 12px;
user-select: none;
}
.note .pull .accent { color: var(--accent); }
.note .by {
grid-column: 2;
margin-top: 16px;
font-family: var(--mono);
font-size: 12.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-2);
}
.note .by::after {
content: '\201C';
display: block;
font-family: var(--serif);
font-size: clamp(68px, 8vw, 87px);
line-height: 0.7;
color: var(--accent);
opacity: 0.35;
text-align: right;
transform: rotate(180deg);
transform-origin: right center;
margin-top: 12px;
user-select: none;
}
/* Client Letters */
.letters {
display: block;
padding: 64px 28px;
border-bottom: 1px solid var(--rule);
overflow: hidden;
}
.letters-body {
max-width: 1040px;
margin: 0 auto;
}
/* Stage holds the 2-up frames; every frame sits in the same grid cell so the
section keeps the height of the tallest pair and never jumps on advance. */
.letters-stage {
display: grid;
margin-top: 28px;
}
.ltr-frame {
grid-row: 1;
grid-column: 1;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 52px;
align-items: start;
visibility: hidden;
opacity: 0;
pointer-events: none;
transition: opacity .5s ease, visibility 0s linear .5s;
}
.ltr-frame.active {
visibility: visible;
opacity: 1;
pointer-events: auto;
transition: opacity .5s ease, visibility 0s linear 0s;
}
.ltr-item {
display: flex;
flex-direction: column;
gap: 20px;
min-width: 0;
}
.ltr-item .plate { aspect-ratio: 3/4; width: 100%; max-width: 200px; }
.ltr-item .pull {
font-family: var(--serif);
font-style: italic;
font-size: clamp(20px, 1.9vw, 26px);
line-height: 1.22;
letter-spacing: -0.01em;
margin: 0;
}
.ltr-item .pull::before {
content: '\201C';
display: block;
font-family: var(--serif);
font-style: normal;
font-size: clamp(42px, 5vw, 53px);
line-height: 0.6;
color: var(--accent);
margin-bottom: 10px;
}
.ltr-item .pull .accent { color: var(--accent); }
.ltr-item .by {
font-family: var(--mono);
font-size: 12.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-2);
margin: 0;
}
.letters-nav {
display: flex;
align-items: center;
gap: 20px;
margin-top: 28px;
font-family: var(--mono);
font-size: 12.5px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--mute);
}
.ltr-btn {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
opacity: 0.45;
transition: opacity .2s, transform .18s;
cursor: pointer;
}
.ltr-btn:hover { opacity: 1; transform: scale(1.05); }
.ltr-arrow {
font-size: 20px;
display: block;
line-height: 1;
}
.ltr-label {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ink);
}
/* Category index */
.cats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border-bottom: 1px solid var(--rule);
}
.cat {
border-right: 1px solid var(--rule);
padding: 22px;
cursor: pointer;
background: var(--paper);
transition: background .25s, color .25s;
/* Grid items default to min-width:auto, which uses the content's min-content
size (e.g. the unbroken "Weddings & Engagements" heading) — that can force
a column wider than its 1fr share and push the grid past the viewport on
mobile's 2-col layout. min-width:0 lets it shrink and wrap properly. */
min-width: 0;
}
.cat:last-child { border-right: 0; }
.cat .plate { aspect-ratio: 3 / 4; margin-bottom: 16px; }
.cat h3 {
margin: 0;
font-family: var(--serif);
font-weight: 400;
font-size: 33px;
line-height: 1;
letter-spacing: -0.01em;
/* "Events/Brands" has no space to wrap on and would otherwise overflow the
narrow mobile column into the next one. */
overflow-wrap: break-word;
}
.cat p { margin: 8px 0 0; font-size: 12.5px; color: var(--ink-2); max-width: 32ch; }
.cat .go {
margin-top: 16px;
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--mono);
font-size: 12.5px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent);
}
.cat:hover { background: var(--ink); color: var(--paper); }
.cat:hover h3 { font-style: italic; }
.cat:hover .go { color: var(--paper); }
.cat:hover p { color: #c8c1ae; }
/* Featured grid (asymmetric magazine) */
.featured {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 24px;
padding: 36px 28px 56px;
border-bottom: 1px solid var(--rule);
}
.featured .a { grid-column: span 7; }
.featured .b { grid-column: span 5; padding-top: 60px; }
.featured .c { grid-column: span 4; }
.featured .d { grid-column: span 4; padding-top: 40px; }
.featured .e { grid-column: span 4; }
.featured .a .plate { aspect-ratio: 4 / 3; }
.featured .b .plate { aspect-ratio: 3 / 4; }
.featured .c .plate { aspect-ratio: 1 / 1; }
.featured .d .plate { aspect-ratio: 4 / 5; }
.featured .e .plate { aspect-ratio: 1 / 1; }
/* About / bio */
.bio {
display: grid;
grid-template-columns: 5fr 72px 7fr;
gap: 36px;
padding: 56px 28px;
border-bottom: 1px solid var(--rule);
overflow: hidden;
}
.bio-deco {
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: 8px;
font-family: var(--serif);
font-size: clamp(68px, 9vw, 110px);
line-height: 0.7;
color: var(--accent);
opacity: 0.35;
user-select: none;
}
.bio-deco-close {
font-family: var(--serif);
font-size: clamp(68px, 9vw, 110px);
line-height: 0.6;
color: var(--accent);
opacity: 0.35;
user-select: none;
display: block;
text-align: right;
transform: rotate(180deg);
transform-origin: right center;
margin-top: 4px;
}
.bio .portrait { aspect-ratio: 4 / 5; }
.bio h2 {
font-family: var(--serif);
font-weight: 400;
font-size: clamp(53px, 6vw, 87px);
line-height: 0.95;
letter-spacing: -0.015em;
margin: 0 0 22px;
}
.bio h2 .it { font-style: italic; color: var(--accent); }
.bio .body { font-size: 16px; line-height: 1.6; color: var(--ink-2); max-width: 58ch; }
.bio .body p + p { margin-top: 14px; }
.bio-meta {
margin-top: 28px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
border-top: 1px solid var(--rule);
padding-top: 18px;
}
.bio-meta dt { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); margin-bottom: 4px; }
.bio-meta dd { margin: 0; font-family: var(--serif); font-size: 20px; }
/* Press / clients ticker */
.press {
border-bottom: 1px solid var(--rule);
padding: 28px 0;
overflow: hidden;
cursor: grab;
touch-action: pan-y; /* let JS own horizontal drag; vertical page scroll still works */
}
.press.dragging { cursor: grabbing; }
/* Static heading, sits above the scrolling strip — not part of the loop */
.press-label {
font-family: var(--mono); font-size: 12.5px; text-transform: uppercase;
letter-spacing: 0.14em; color: var(--mute);
padding: 0 28px; margin-bottom: 16px;
}
.press .marquee-inner {
display: inline-flex; gap: 72px; align-items: center;
white-space: nowrap; will-change: transform;
user-select: none; -webkit-user-select: none;
}
.press .marquee-inner span:not(.sep) {
font-family: var(--serif); font-style: italic;
font-size: clamp(26px, 2.8vw, 42px); color: var(--ink); opacity: 0.75; flex-shrink: 0;
}
.press .marquee-inner .sep {
width: 10px; height: 10px; background: var(--accent); border-radius: 50%; opacity: 0.6; flex-shrink: 0;
}
.press img.client-logo {
height: 60px; width: auto; display: block; flex-shrink: 0;
filter: brightness(0) opacity(0.75);
}
[data-theme="dark"] .press img.client-logo:not(.tone) { filter: brightness(0) invert(1) opacity(0.75); }
@media (prefers-color-scheme: dark) {
html:not([data-theme="light"]) .press img.client-logo:not(.tone) { filter: brightness(0) invert(1) opacity(0.75); }
}
/* Badge logos: pre-baked grayscale keeps internal lettering visible —
no brightness(0) flattening, or the text inside the mark disappears */
.press img.client-logo.tone {
filter: opacity(0.9);
}
/* Compact square marks read too small at the uniform height — render larger */
.press img.client-logo.lg {
height: 88px;
}
/* CTA strip */
.cta {
background: var(--ink);
color: var(--paper);
padding: 80px 28px;
border-bottom: 1px solid var(--rule);
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 28px;
}
.cta h2 {
margin: 0;
font-family: var(--serif);
font-weight: 400;
font-size: clamp(53px, 7vw, 110px);
line-height: 0.92;
letter-spacing: -0.015em;
}
.cta h2 .it { font-style: italic; color: var(--accent); }
.cta .actions { display: flex; flex-direction: column; gap: 12px; align-items: flex-end; }
.cta .btn {
padding: 16px 28px;
background: var(--paper);
color: var(--ink);
font-family: var(--sans);
font-weight: 600;
letter-spacing: 0.06em;
font-size: 12.5px;
text-transform: uppercase;
border-radius: 0;
transition: background .2s, color .2s;
}
.cta .btn:hover { background: var(--accent); color: var(--paper); }
/* Footer */
footer.foot {
padding: 44px 28px 24px;
background: var(--paper);
border-top: 1px solid var(--rule);
}
.foot-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 36px;
padding-bottom: 36px;
border-bottom: 1px solid var(--rule);
}
.foot-grid h4 { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); margin: 0 0 12px; font-weight: 500; }
.foot-grid ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }
.foot-grid ul a:hover { color: var(--accent); }
/* fill="currentColor" on the SVG tracks the link's own color automatically —
matches the ink text at rest, and the accent on hover, with no extra rule.
display:inline-block overrides the site's global `img, svg { display: block }`
reset (line ~109), which would otherwise force the icon onto its own line
above the label. That reset is the more specific-feeling rule to a reader but
loses on specificity (element vs class) — it only ever wins when this rule is
missing entirely, i.e. a browser holding a stale cached styles.css. The icons
therefore ALSO carry this as an inline style attribute in the markup, which no
stylesheet state can defeat; keep the two in sync if you change the spacing.
Sizing/alignment: Archivo's cap height is ~0.686em, so .75em lands the lock
just about exactly on the cap line, and vertical-align:baseline sits its
bottom edge on the text baseline — the lock then occupies the same vertical
band as the capital letters beside it. (It previously used a 10px box pushed
to -1px, which dipped below the baseline and read as sitting too low.) The em
sizing here scales with the footer's font-size across breakpoints; the width/
height attributes in the markup are the integer fallback if this rule is missing. */
.lock-icn { display: inline-block; width: .75em; height: .75em; vertical-align: baseline; margin-right: 3px; opacity: 0.85; }
.foot-mark {
font-family: var(--serif);
font-size: 68px;
line-height: 0.9;
letter-spacing: -0.01em;
}
.foot-mark em { font-style: italic; color: var(--accent); }
.foot-mark p { font-family: var(--sans); font-size: 12.5px; color: var(--ink-2); margin: 14px 0 0; max-width: 36ch; line-height: 1.5; }
.foot-base {
padding-top: 16px;
display: flex;
justify-content: space-between;
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--mute);
}
/* ───────── Galleries (category pages) ───────── */
.cover {
display: grid;
grid-template-columns: 5fr 7fr;
gap: 28px;
padding: 28px;
border-bottom: 1px solid var(--rule);
align-items: stretch;
}
.cover-text {
display: flex; flex-direction: column; justify-content: space-between;
padding: 8px 0 4px;
}
.cover-text .top { display: flex; flex-direction: column; gap: 18px; }
.cover-text h1 {
margin: 0;
font-family: var(--serif);
font-weight: 400;
font-size: clamp(68px, 11vw, 178px);
line-height: 0.86;
letter-spacing: -0.02em;
}
.cover-text h1 .it { font-style: italic; color: var(--accent); display: block; }
.cover-text .deck { font-family: var(--serif); font-style: italic; font-size: 20px; line-height: 1.35; color: var(--ink-2); max-width: 32ch; }
.cover-text .stats {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
border-top: 1px solid var(--rule); padding-top: 16px;
}
.cover-text .stats dt { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); }
.cover-text .stats dd { margin: 4px 0 0; font-family: var(--serif); font-size: 26px; line-height: 1; }
.cover-img .plate { aspect-ratio: 4 / 5; height: 100%; }
/* Gallery grids, different layout per category */
.gallery {
padding: 36px 28px 64px;
border-bottom: 1px solid var(--rule);
}
.gallery .head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 24px;
padding-bottom: 18px;
border-bottom: 1px solid var(--rule);
margin-bottom: 28px;
}
.gallery .head h3 {
font-family: var(--serif);
font-weight: 400;
font-size: 42px;
line-height: 1;
margin: 0;
letter-spacing: -0.01em;
}
.gallery .head h3 .it { font-style: italic; }
/* Editorial layout (Portraiture) */
.edit-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 24px;
}
.edit-grid .e1 { grid-column: 1 / span 5; }
.edit-grid .e1 .plate { aspect-ratio: 4 / 5; }
.edit-grid .e2 { grid-column: 7 / span 6; padding-top: 60px; }
.edit-grid .e2 .plate { aspect-ratio: 3 / 2; }
.edit-grid .e3 { grid-column: 2 / span 4; padding-top: 40px; }
.edit-grid .e3 .plate { aspect-ratio: 1 / 1; }
.edit-grid .e4 { grid-column: 7 / span 5; }
.edit-grid .e4 .plate { aspect-ratio: 4 / 5; }
.edit-grid .e5 { grid-column: 1 / span 7; }
.edit-grid .e5 .plate { aspect-ratio: 16 / 10; }
.edit-grid .e6 { grid-column: 9 / span 4; padding-top: 30px; }
.edit-grid .e6 .plate { aspect-ratio: 3 / 4; }
/* Wedding layout (filmstrip + double-truck) */
.wed-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.wed-grid .double { grid-column: 1 / -1; }
.wed-grid .double .plate { aspect-ratio: 21 / 9; }
.wed-grid .strip { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
.wed-grid .strip .plate { aspect-ratio: 3 / 4; }
.wed-grid .pair-l { grid-column: 1 / span 7; }
.wed-grid .pair-l .plate { aspect-ratio: 4 / 3; }
.wed-grid .pair-r { grid-column: 8 / span 5; padding-top: 50px; }
.wed-grid .pair-r .plate { aspect-ratio: 4 / 5; }
/* Events (contact-sheet) */
.events-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.events-grid .cell .plate { aspect-ratio: 3 / 2; }
.events-grid .feature { grid-column: span 2; grid-row: span 2; }
.events-grid .feature .plate { aspect-ratio: 1 / 1; }
/* Sports (kinetic) */
.sports-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; }
.sports-grid .s1 { grid-column: 1 / span 8; }
.sports-grid .s1 .plate { aspect-ratio: 16 / 9; }
.sports-grid .s2 { grid-column: 9 / span 4; }
.sports-grid .s2 .plate { aspect-ratio: 4 / 5; height: 100%; }
.sports-grid .s3 { grid-column: 1 / span 4; }
.sports-grid .s3 .plate { aspect-ratio: 3 / 4; }
.sports-grid .s4 { grid-column: 5 / span 4; }
.sports-grid .s4 .plate { aspect-ratio: 3 / 4; }
.sports-grid .s5 { grid-column: 9 / span 4; }
.sports-grid .s5 .plate { aspect-ratio: 3 / 4; }
.sports-grid .s6 { grid-column: 1 / -1; }
.sports-grid .s6 .plate { aspect-ratio: 21 / 6; }
/* Long-form story (used on category pages) */
.story {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 56px;
padding: 56px 28px;
border-bottom: 1px solid var(--rule);
}
.story .col h3 {
font-family: var(--mono);
font-size: 12.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--accent);
margin: 0 0 12px;
}
.story .col h2 {
font-family: var(--serif);
font-weight: 400;
font-size: 42px;
line-height: 1.05;
letter-spacing: -0.01em;
margin: 0 0 18px;
}
.story .col h2 .it { font-style: italic; }
.story .col p { font-size: 16px; line-height: 1.65; color: var(--ink-2); margin: 0 0 12px; }
.story .col .dropcap::first-letter {
font-family: var(--serif);
font-size: 68px;
line-height: 0.85;
float: left;
padding: 6px 10px 0 0;
color: var(--accent);
}
/* ───────── Contact ───────── */
.contact-hero {
padding: 32px 28px 56px;
border-bottom: 1px solid var(--rule);
}
.contact-hero h1 {
font-family: var(--serif);
font-weight: 400;
font-size: clamp(53px, 7.5vw, 110px);
line-height: 0.86;
letter-spacing: -0.02em;
margin: 0;
}
.contact-hero h1 .it { font-style: italic; color: var(--accent); display: block; }
.contact-hero .deck { font-family: var(--serif); font-style: italic; font-size: 26px; line-height: 1.3; color: var(--ink-2); max-width: 36ch; }
.contact-body {
display: grid;
grid-template-columns: 5fr 7fr;
gap: 40px;
padding: 28px 28px;
border-bottom: 1px solid var(--rule);
}
.contact-body .info h3 { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 8px; color: var(--mute); }
.contact-body .info .big { font-family: var(--serif); font-size: 33px; line-height: 1.1; margin-bottom: 28px; }
.contact-body .info .big a:hover { color: var(--accent); }
.contact-body .info .row { padding: 14px 0; border-top: 1px solid var(--rule); }
.contact-body .info .row:last-child { border-bottom: 1px solid var(--rule); }
.contact-body .info .row .k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); }
.contact-body .info .row .v { font-family: var(--serif); font-size: 20px; }
/* ── Quick-book cards (Cal.com) — sits between the contact hero and the
inquiry form; instant booking for the two fixed-scope offerings, while
the form below stays the path for custom-quote work. ── */
.quickbook { padding: 0 28px 8px; }
.quickbook-label { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); margin-bottom: 18px; }
.quickbook-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin-bottom: 8px; }
.qb-card { background: var(--paper); padding: 28px; display: flex; flex-direction: column; }
.qb-card .tag { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.qb-card h3 { font-family: var(--serif); font-weight: 400; font-size: 33px; margin: 0 0 10px; }
.qb-card p { font-family: var(--sans); font-size: 12.5px; color: var(--ink-2); line-height: 1.55; margin: 0 0 20px; flex-grow: 1; }
.qb-card .price { font-family: var(--sans); font-weight: 700; font-size: 16px; margin-bottom: 18px; }
.qb-card .price .old-price { font-weight: 400; color: var(--mute); text-decoration: line-through; margin-right: 6px; }
.qb-book-btn {
align-self: flex-start;
display: inline-block; text-decoration: none;
font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.12em; text-transform: uppercase;
background: var(--ink); color: var(--paper); border: none; padding: 13px 22px;
cursor: pointer; transition: background .2s;
animation: ctaGlowPulse 2.4s ease-in-out infinite;
}
/* Hover: pause the ambient glow pulse, run the one-shot shimmer sweep instead
(comma-list values position-match the two names in animation-name). */
.qb-book-btn:hover {
background-color: var(--accent);
animation-name: ctaGlowPulse, hover-sheen-bg;
animation-duration: 2.4s, .6s;
animation-timing-function: ease-in-out, ease-in-out;
animation-iteration-count: infinite, 1;
animation-play-state: paused, running;
}
/* Strong, animated glow shared by the two Book-Instantly buttons, the selected
"interested in" chip, and the form's Send it button — same accent-tinted
mechanism as the header's Book a Session pulse, Very Strong intensity. */
@keyframes ctaGlowPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
50% { box-shadow: 0 0 28px 5px var(--accent-glow-strong); }
}
.or-divider { display: flex; align-items: center; gap: 16px; padding: 28px 28px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); }
.or-divider::before, .or-divider::after { content: ''; flex: 1; height: 1px; background: var(--rule); }
@media (max-width: 700px) {
.quickbook-grid { grid-template-columns: 1fr; }
}
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 18px; }
.form .full { grid-column: 1 / -1; }
.form .field {
display: flex; flex-direction: column; gap: 6px;
}
.form label {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--mute);
}
.form input, .form select, .form textarea {
font: inherit;
background: transparent;
border: 0;
border-bottom: 1px solid var(--rule);
padding: 8px 0;
color: var(--ink);
font-family: var(--serif);
font-size: 20px;
outline: none;
transition: border-color .2s;
}
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--accent); }
.form textarea { min-height: 120px; resize: vertical; font-family: var(--sans); font-size: 16px; line-height: 1.5; }
.form .chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 0; }
.form .chip {
padding: 8px 14px;
border: 1px solid var(--rule);
border-radius: 999px;
font-family: var(--mono);
font-size: 12.5px;
letter-spacing: 0.06em;
text-transform: uppercase;
cursor: pointer;
transition: background .2s, color .2s, border-color .2s;
}
.form .chip:hover { background: var(--paper-2); }
/* Same Strong, animated glow as the qb-book-btn / Send it button. */
.form .chip.on { background: var(--ink); color: var(--paper); border-color: var(--ink); animation: ctaGlowPulse 2.4s ease-in-out infinite; }
.form .submit {
grid-column: 1 / -1;
display: flex; justify-content: space-between; align-items: center;
padding-top: 18px;
border-top: 1px solid var(--rule);
}
.form .submit small { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--mute); }
.form .submit button {
padding: 16px 28px;
background: var(--ink);
color: var(--paper);
border-radius: 999px;
font-family: var(--sans);
font-weight: 600;
font-size: 12.5px;
letter-spacing: 0.06em;
text-transform: uppercase;
transition: background .2s;
animation: ctaGlowPulse 2.4s ease-in-out infinite;
}
.form .submit button:hover {
background-color: var(--accent);
animation-name: ctaGlowPulse, hover-sheen-bg;
animation-duration: 2.4s, .6s;
animation-timing-function: ease-in-out, ease-in-out;
animation-iteration-count: infinite, 1;
animation-play-state: paused, running;
}
/* Responsive */
@media (max-width: 980px) {
html, body { overflow-x: hidden; max-width: 100vw; }
.strip { grid-template-columns: 1fr; text-align: center; }
.strip .l, .strip .r { display: none; }
.wordmark-row { display: block; }
.wordmark-inner { gap: 8px; padding: 10px 16px; display: flex; justify-content: space-between; align-items: center; }
.wordmark-stack { flex: 1; text-align: center; }
.head-meta-l { display: none; }
/* Show a compact booking button on mobile */
.head-meta-r { display: block !important; }
.head-meta-r .book { font-size: 10px; padding: 6px 10px; letter-spacing: 0.06em; }
/* Nav bar, 2 columns top row, 3 columns bottom row for clean fit */
nav.primary { display: grid; grid-template-columns: repeat(3, 1fr); overflow-x: hidden; width: 100%; }
nav.primary button, nav.primary .nav-dropdown { padding: 10px 4px; font-size: 10px; letter-spacing: 0.06em; white-space: normal; line-height: 1.2; border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule); text-align: center; }
nav.primary button:first-child { border-left: 0; }
nav.primary button:nth-child(3n), nav.primary .nav-dropdown:nth-child(3n) { border-right: 0; }
nav.primary .nav-dropdown > button { width: 100%; border: 0; padding: 10px 4px; }
/* Collapsed header on small screens. The desktop "pinned cluster" is redundant
here — the compact header bar already carries the theme toggle and Book
button — and docking it over the full-width nav clipped the tabs. So hide the
cluster, and on scroll keep the bar (don't fade it into a dead gap): drop the
logo and right-align the toggle + Book into a slim strip above a clean,
full-width nav. */
.head-pinned { display: none !important; }
.head.scrolled .wordmark-inner {
opacity: 1;
padding-top: 7px;
padding-bottom: 7px;
justify-content: flex-end;
}
.head.scrolled .wordmark-stack { display: none; }
.head.scrolled nav.primary { padding-left: 0; padding-right: 0; }
/* Mobile dropdowns: tap-to-toggle, fixed position so nav overflow-x doesn't clip them */
.dropdown-menu a.dropdown-view-all { display: block; }
.nav-dropdown:hover .dropdown-menu { display: none; }
.nav-dropdown.open .dropdown-menu { display: block; position: fixed; top: var(--nav-bottom, 140px); left: 0; right: 0; min-width: 100%; z-index: 200; box-shadow: 0 8px 24px rgba(0,0,0,0.18); }
.nav-dropdown.open > button { background: var(--ink); color: var(--paper); }
.hero, .bio, .cover, .contact-hero, .contact-body, .note, .cta { grid-template-columns: 1fr; padding: 28px; gap: 24px; }
.letters { padding: 28px; }
.bio { grid-template-columns: 1fr; }
.bio-deco { display: none; }
/* Centre all bio text on mobile (inline text-align:left needs !important) */
.bio > div:last-child,
.bio > div:last-child .kicker,
.bio > div:last-child h2,
.bio > div:last-child .body,
.bio > div:last-child p { text-align: center !important; }
.bio-meta { grid-template-columns: repeat(3, 1fr); justify-items: center; }
.bio-meta dt, .bio-meta dd { text-align: center; }
/* Stack the two testimonials on mobile and center each. */
.ltr-frame { grid-template-columns: 1fr; gap: 40px; }
.ltr-item { align-items: center; text-align: center; }
.ltr-item .plate { max-width: 200px; }
.ltr-item .pull, .ltr-item .by { text-align: center; }
.letters-nav { justify-content: center; }
.cover[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
/* Fix cover images on mobile, give them a fixed aspect ratio so they don't collapse */
.cover-img { width: 100%; }
.cover-img .plate { aspect-ratio: 4 / 3 !important; height: auto !important; width: 100%; min-height: 260px; }
/* Fix: stats price cutoff — allow cells to shrink and reduce font size */
.cover-text .stats > div { min-width: 0; overflow: hidden; }
.cover-text .stats dd { font-size: 20px; word-break: break-word; }
/* Fix: 3/4-column photo grids overflowing on mobile → 2-col pairs */
[style*="repeat(3, 1fr)"],
[style*="repeat(4, 1fr)"] { grid-template-columns: 1fr 1fr !important; }
/* Odd photo counts: dangling last photo spans full width — no blank cells */
[style*="repeat(3, 1fr)"] > *:nth-child(odd):last-child,
[style*="repeat(4, 1fr)"] > *:nth-child(odd):last-child { grid-column: 1 / -1; }
/* Centered half-width singles → full width on mobile */
.gallery div[style*="max-width: 50%"] { max-width: 100% !important; }
/* FR.001 & FR.002: flex-column items don't guarantee a definite height from aspect-ratio
for height:100% on abs-pos children in all mobile browsers. Converting the containers
to grid fixes this — grid items with aspect-ratio DO produce spec-compliant definite
heights that absolutely-positioned children can resolve against. */
.hero-main { display: grid; gap: 10px; }
.hero-main .plate { width: 100%; aspect-ratio: 4 / 5; height: auto; }
.hero-aside { display: grid; gap: 22px; }
.plate.hero-aside-art { width: 100%; height: auto !important; }
.cats { grid-template-columns: 1fr 1fr; }
.cat:nth-child(2n) { border-right: 0; }
.featured { grid-template-columns: repeat(6, 1fr); }
.featured > * { grid-column: span 6 !important; padding-top: 0 !important; }
.section-head { grid-template-columns: 1fr; padding: 28px; }
.edit-grid > *, .wed-grid > *, .sports-grid > * { grid-column: 1 / -1 !important; padding-top: 0 !important; }
.wed-grid .strip { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
.wed-grid .strip > div:nth-child(5) { grid-column: 1 / -1; }
.wed-grid .strip .plate { aspect-ratio: 3 / 4; }
/* Hernandez-Lomeli flipped cover, fix on mobile */
.lomeli-cover { grid-template-columns: 1fr !important; }
.lomeli-cover .cover-img { order: 2; }
.lomeli-cover .cover-text { order: 1; }
section[data-page="weddings-album-02"] .gallery > div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
/* Hernandez-Lomeli strip fix */
section[data-page="weddings-album-02"] .wed-grid .strip { grid-template-columns: repeat(2, 1fr) !important; overflow: hidden; }
/* Allen's Proposal strip fix */
section[data-page="weddings-album-03"] .wed-grid .strip { grid-template-columns: repeat(2, 1fr) !important; overflow: hidden; }
.events-grid { grid-template-columns: 1fr 1fr; }
.events-grid .feature { grid-column: span 2; grid-row: auto; }
.form { grid-template-columns: 1fr; }
.foot-grid { grid-template-columns: 1fr 1fr; }
.index-row { grid-template-columns: 50px 1fr 60px; }
.index-row > :nth-child(3), .index-row > :nth-child(4) { display: none; }
}
/* ── Portraiture archive contact sheet ── */
.port-archive-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 980px) { .port-archive-grid { grid-template-columns: repeat(2, 1fr); } }
/* ── Lightbox ── */
#lb-overlay { position: fixed; inset: 0; z-index: 9000; background: rgba(10,8,6,0.97); flex-direction: column; align-items: center; justify-content: center; padding: 24px; opacity: 0; transition: opacity .3s ease; }
#lb-overlay.open { display: flex !important; opacity: 1; }
#lb-close { position: absolute; top: 16px; right: 22px; font-size: 26px; color: var(--paper); background: rgba(0,0,0,0.35); border: none; cursor: pointer; opacity: 0.9; transition: opacity .2s; line-height: 1; padding: 8px 12px; border-radius: 4px; font-family: var(--sans); }
#lb-close:hover, #lb-prev:hover, #lb-next:hover { opacity: 1; }
#lb-nav { display: flex; align-items: center; gap: 16px; margin-top: 16px; }
#lb-prev, #lb-next { position: static; transform: none; color: var(--paper); background: rgba(0,0,0,0.3); border: none; cursor: pointer; font-family: var(--mono); font-size: 20px; opacity: 0.8; transition: opacity .2s; padding: 14px 22px; border-radius: 4px; }
#lb-img { max-width: 88vw; max-height: 74vh; object-fit: contain; display: block; cursor: zoom-out; }
#lb-cap { margin-top: 14px; font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); text-align: center; }
#lb-counter { margin-top: 5px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; color: #3a3630; text-align: center; }
[data-lb-src] { cursor: zoom-in; }
/* ── Portraiture grid ── */
.portrait-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.portrait-grid-item { position: relative; aspect-ratio: 3/4; overflow: hidden; border: 1px solid var(--rule); cursor: zoom-in; background: var(--paper-2); contain: paint; }
.portrait-grid-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.portrait-grid-item .fs-tag { position: absolute; bottom: 8px; left: 10px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(244,240,232,0.7); text-shadow: 0 1px 3px rgba(0,0,0,0.6); pointer-events: none; }
@media (max-width: 700px) { .portrait-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 980px) {
.foot-mark { display: none; }
footer.foot { padding: 24px 20px 16px; }
.foot-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 18px; padding-bottom: 18px; }
.foot-grid h4 { font-size: 10px; margin-bottom: 8px; }
.foot-grid ul { font-size: 12.5px; gap: 4px; }
.foot-base { padding-top: 12px; font-size: 10px; }
}
@media (max-width: 500px) {
.foot-grid { grid-template-columns: 1fr 1fr !important; gap: 14px; }
}
/* ─── Gallery album grid: responsive columns ─── */
@media (max-width: 980px) {
/* Sports album pages: 3/4-col photo rows → 2 col */
section[data-page^="sports-"] div[style*="repeat(3, 1fr)"],
section[data-page^="sports-"] div[style*="repeat(4, 1fr)"],
/* Event album gallery rows: 3/4-col → 2 col */
.cozmic-vol div[style*="repeat(3, 1fr)"],
.cozmic-vol div[style*="repeat(4, 1fr)"],
section[data-page="events-cosmopolitan"] div[style*="repeat(3, 1fr)"],
section[data-page="events-jay-electronica"] div[style*="repeat(3, 1fr)"],
/* Weddings with inline multi-col grids */
section[data-page="weddings-eppingers"] div[style*="repeat(3, 1fr)"],
section[data-page="weddings-givens"] div[style*="repeat(3, 1fr)"],
section[data-page="weddings-album-03"] div[style*="repeat(4, 1fr)"] {
grid-template-columns: 1fr 1fr !important;
}
/* Odd photo counts in collapsed 2-col rows: orphaned last photo spans full width */
section[data-page="events-jay-electronica"] div[style*="repeat(3, 1fr)"] > div:last-child,
section[data-page="weddings-givens"] div[style*="repeat(3, 1fr)"] > div:last-child,
section[data-page^="sports-"] div[style*="repeat(3, 1fr)"] > *:nth-child(odd):last-child,
section[data-page^="sports-"] div[style*="repeat(4, 1fr)"] > *:nth-child(odd):last-child,
.cozmic-vol div[style*="repeat(3, 1fr)"] > *:nth-child(odd):last-child,
.cozmic-vol div[style*="repeat(4, 1fr)"] > *:nth-child(odd):last-child,
section[data-page="events-cosmopolitan"] div[style*="repeat(3, 1fr)"] > *:nth-child(odd):last-child,
section[data-page="weddings-eppingers"] div[style*="repeat(3, 1fr)"] > *:nth-child(odd):last-child,
section[data-page="weddings-album-03"] div[style*="repeat(4, 1fr)"] > *:nth-child(odd):last-child {
grid-column: 1 / -1;
}
/* MVCHS / Spotify span-based grids → 2 col, reset spans */
section[data-page="sports-mvchs"] div[style*="repeat(6, 1fr)"],
section[data-page="events-spotify"] div[style*="repeat(12, 1fr)"] {
grid-template-columns: 1fr 1fr !important;
}
section[data-page="sports-mvchs"] div[style*="repeat(6, 1fr)"] > div,
section[data-page="events-spotify"] div[style*="repeat(12, 1fr)"] > div {
grid-column: auto !important;
padding-top: 0 !important;
}
}
@media (max-width: 600px) {
/* Very small phones: Cozmic 3-col and 2-col → single column */
.cozmic-vol div[style*="repeat(3, 1fr)"],
.cozmic-vol div[style*="repeat(2, 1fr)"] {
grid-template-columns: 1fr !important;
}
/* Sports: keep 2-col (images remain recognizable at ~170px) */
/* Home category index: 2 columns leaves ~150px-wide cards, too narrow for the
36px serif headings ("Weddings & Engagements", "Events/Brands") without
ugly mid-word breaks — stack to a single column instead. */
.cats { grid-template-columns: 1fr; }
.cat { border-right: 0; border-bottom: 1px solid var(--rule); }
.cat:last-child { border-bottom: 0; }
}
/* ───────── Reveal-on-scroll ───────── */
.reveal-init {
opacity: 0;
transform: translateY(14px);
transition: opacity .7s cubic-bezier(0.22, 0.61, 0.36, 1), transform .7s cubic-bezier(0.22, 0.61, 0.36, 1);
will-change: opacity, transform;
}
.reveal-init.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.reveal-init { opacity: 1; transform: none; transition: none; }
}
/* ───────── Hero plates ───────── */
.hero-main .plate, .hero-aside .plate { overflow: hidden; }
/* ───────── Lightbox transform ───────── */
#lb-img { transition: transform .4s cubic-bezier(0.34, 1.56, 0.64, 1); }
/* ── 1. Page slide transition ── */
main#main.is-sliding { overflow: hidden; }
.page.slide-layer {
display: block !important;
position: absolute; top: 0; left: 0; width: 100%;
transition: transform .34s cubic-bezier(0.76, 0, 0.24, 1);
will-change: transform;
}
/* ── 5. Ambient color bloom inside lightbox ── */
#lb-color-bloom {
position: absolute; inset: 0;
pointer-events: none; z-index: -1;
opacity: 0;
transition: opacity .55s ease, background .4s ease;
}
/* ── 8. Scroll-progress thread ── */
#scroll-thread {
position: fixed; top: 0; left: 0; width: 2px;
background: var(--accent); z-index: 9998;
pointer-events: none; height: 0%;
transition: opacity .4s ease;
opacity: 0;
}
/* ───────── Custom dot cursor (mouse devices only) ───────── */
@media (hover: hover) and (pointer: fine) {
/* Default: custom dot, no native cursor */
* { cursor: none !important; }
input, textarea { cursor: text !important; }
/* Arrow mode: restore native cursors */
html.cursor-arrow * { cursor: auto !important; }
html.cursor-arrow a, html.cursor-arrow button, html.cursor-arrow [data-go], html.cursor-arrow [data-lb-src] { cursor: pointer !important; }
html.cursor-arrow input, html.cursor-arrow textarea { cursor: text !important; }
/* Crosshair mode */
html.cursor-crosshair * { cursor: crosshair !important; }
html.cursor-crosshair input, html.cursor-crosshair textarea { cursor: text !important; }
#cursor-dot {
position: fixed; top: 0; left: 0;
width: 9px; height: 9px;
border-radius: 50%;
/* white + mix-blend-mode:difference = auto-inverts against any bg color */
background: white;
mix-blend-mode: difference;
border: 1.5px solid transparent;
pointer-events: none;
z-index: 10000;
will-change: transform;
transition: width .18s ease, height .18s ease, opacity .15s ease;
}
#cursor-dot.cur-zoom { width: 28px; height: 28px; background: transparent; border-color: white; }
#cursor-dot.cur-text { opacity: 0; }
}
/* ── Animations ── */
/* 1. CTA button shimmer — hover-triggered only (used to loop forever on an
infinite timer; now it stays quiet until you actually point at the
button), everywhere except the header's Book a Session button. */
.cta .btn { position: relative; overflow: hidden; display: inline-block; }
.cta .btn::after {
content: '';
position: absolute;
top: 0; left: -60%;
width: 40%; height: 100%;
background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.35) 50%, transparent 100%);
transform: skewX(-15deg);
pointer-events: none;
}
.cta .btn:hover::after {
animation: hover-sheen .6s ease-in-out;
}
@keyframes hover-sheen {
from { left: -60%; }
to { left: 140%; }
}
/* Same hover sweep on the nav tabs (incl. the Events/Brands dropdown trigger,
which is a nav.primary button), the dropdown menu items, and the theme
toggle. Deliberately NOT folded into the .cta .btn rule above because that
one also forces display:inline-block — here each target keeps its own
display (inline-flex centering on the toggle, block on dropdown links).
All three fill ink on hover, so the white sweep reads against the dark fill. */
nav.primary button, .dropdown-menu a, #theme-toggle, .theme-toggle {
position: relative;
overflow: hidden;
}
nav.primary button::after, .dropdown-menu a::after, #theme-toggle::after, .theme-toggle::after {
content: '';
position: absolute;
top: 0; left: -60%;
width: 40%; height: 100%;
background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.35) 50%, transparent 100%);
transform: skewX(-15deg);
pointer-events: none;
}
nav.primary button:hover::after, .dropdown-menu a:hover::after, #theme-toggle:hover::after, .theme-toggle:hover::after {
animation: hover-sheen .6s ease-in-out;
}
/* qb-book-btn and the form's Send it button need the same hover shimmer, but
both already carry a pulsing box-shadow glow that has to render OUTSIDE
their edges — overflow:hidden (needed to clip a swept ::after pseudo-
element) would clip that glow too. Backgrounds don't have this problem:
they're clipped to the box by default regardless of `overflow`, so the
sweep is done as a second background layer with an animated position
instead of a pseudo-element. */
.qb-book-btn, .form .submit button {
background-image: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.35) 50%, transparent 100%);
background-repeat: no-repeat;
background-size: 40% 100%;
background-position: -60% 0;
}
@keyframes hover-sheen-bg {
from { background-position: -60% 0; }
to { background-position: 140% 0; }
}
/* Arrow nudge — combined with the shimmer above on every CTA, header
Book a Session included now. Requires the → glyph wrapped as
→ in markup. */
.qb-book-btn .arrow, .form .submit button .arrow, .cta .btn .arrow, .head-meta-r .book .arrow, .head-pinned .book .arrow {
display: inline-block;
transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
.qb-book-btn:hover .arrow, .form .submit button:hover .arrow, .cta .btn:hover .arrow, .head-meta-r .book:hover .arrow, .head-pinned .book:hover .arrow {
transform: translateX(5px);
}
/* 2. Marquee hover — pause + class toggle handled in JS */
.press .marquee-inner span:not(.sep) { transition: opacity 0.4s ease; }
.press.hovered .marquee-inner span:not(.sep) { opacity: 1; }
/* 4. Plate scroll reveal — develops in like a print in a tray */
.plate-anim { transform: scale(0.96); opacity: 0; filter: blur(9px); transition: transform 0.9s cubic-bezier(0.16,1,0.3,1), opacity 0.8s ease, filter 0.9s ease; }
.plate-anim.in { transform: scale(1); opacity: 1; filter: blur(0); }
/* 5. Section fade + upward drift */
.sect-anim { transform: translateY(28px); opacity: 0; transition: transform 0.9s cubic-bezier(0.16,1,0.3,1), opacity 0.75s ease; }
.sect-anim.in { transform: translateY(0); opacity: 1; }
/* 6. Caption develop-in, follows its plate up out of the tray */
.cap-anim { opacity: 0; transform: translateY(8px); filter: blur(4px); transition: opacity .6s ease, transform .6s cubic-bezier(0.16,1,0.3,1), filter .6s ease; }
.cap-anim.in { opacity: 1; transform: translateY(0); filter: blur(0); }
@media (prefers-reduced-motion: reduce) {
.plate-anim, .cap-anim { opacity: 1; transform: none; filter: none; transition: none; }
}
/* 7. Tilt-on-hover for gallery plates — a print catching light.
Covers both the .plate gallery markup and the .portrait-grid-item
contact-sheet markup (Portraiture's "Plates" grid uses the latter). */
@media (hover: hover) and (pointer: fine) {
.plate.has-photo, .portrait-grid-item { transition: transform .2s ease-out; }
.plate.has-photo.tilt-hover, .portrait-grid-item.tilt-hover { transition: transform .05s linear; will-change: transform; }
.plate.has-photo::after, .portrait-grid-item::after {
content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.22), transparent 55%);
opacity: 0; transition: opacity .25s ease;
}
.plate.has-photo.tilt-hover::after, .portrait-grid-item.tilt-hover::after { opacity: 1; }
}
.splash, .splash * { cursor: default !important; }
/* Always dark regardless of site theme — a consistent opening curtain, not themed content */
.splash { position: fixed; inset: 0; z-index: 99999; background: #13110e; color: #f4f0e8; opacity: 1; transition: opacity .5s ease; overflow: hidden; }
.splash.hide { opacity: 0; pointer-events: none; }
/* Cover photos: 5 real site photos, B&W, crossfading in an endless pure-CSS loop —
each layer owns a slice of one shared 20s cycle, so they hand off to each other
without any JS keeping time. */
.splash-cover { position: absolute; inset: 0; }
.splash-cover-img {
position: absolute; inset: 0;
background-size: cover; background-repeat: no-repeat;
filter: grayscale(1) contrast(1.08) brightness(1.02);
opacity: 0;
animation-duration: 20s; animation-timing-function: ease-in-out; animation-iteration-count: infinite;
}
.splash-cover-img:nth-child(1) { animation-name: splashCover1; }
.splash-cover-img:nth-child(2) { animation-name: splashCover2; }
.splash-cover-img:nth-child(3) { animation-name: splashCover3; }
.splash-cover-img:nth-child(4) { animation-name: splashCover4; }
.splash-cover-img:nth-child(5) { animation-name: splashCover5; }
@keyframes splashCover1 { 0% { opacity: 1; } 16% { opacity: 1; } 20% { opacity: 0; } 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes splashCover2 { 0% { opacity: 0; } 20% { opacity: 0; } 24% { opacity: 1; } 36% { opacity: 1; } 40% { opacity: 0; } 100% { opacity: 0; } }
@keyframes splashCover3 { 0% { opacity: 0; } 40% { opacity: 0; } 44% { opacity: 1; } 56% { opacity: 1; } 60% { opacity: 0; } 100% { opacity: 0; } }
@keyframes splashCover4 { 0% { opacity: 0; } 60% { opacity: 0; } 64% { opacity: 1; } 76% { opacity: 1; } 80% { opacity: 0; } 100% { opacity: 0; } }
@keyframes splashCover5 { 0% { opacity: 0; } 80% { opacity: 0; } 84% { opacity: 1; } 96% { opacity: 1; } 100% { opacity: 0; } }
/* A light, uniform dimming over the raw photo (mainly the thin margin outside the
frame) — the frame itself carries its own stronger tint below for text contrast. */
.splash-scrim { position: absolute; inset: 0; background: rgba(19,17,14,0.16); }
/* Frame spans the full height (inset from all four edges, never touching top/bottom)
and carries its own translucent fill so every line of text sits on consistent
contrast no matter which photo is behind it at any given moment. */
.splash-frame { position: absolute; inset: 24px; border: 1px solid rgba(244,240,232,.18); background: rgba(19,17,14,0.42); display: grid; grid-template-rows: auto 1fr auto; padding: 24px 28px; pointer-events: none; }
.splash-top, .splash-bot { display: flex; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; opacity: .65; }
.splash-top span, .splash-bot span { text-shadow: 0 2px 10px rgba(0,0,0,0.65), 0 1px 2px rgba(0,0,0,0.8); }
.splash-center { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; text-align: center; }
.splash-kicker { font-family: var(--mono); font-size: 12.5px; letter-spacing: .25em; text-transform: uppercase; opacity: .7; animation: splashFadeUp .6s ease .1s both; text-shadow: 0 2px 10px rgba(0,0,0,0.65), 0 1px 2px rgba(0,0,0,0.8); }
.splash-wordmark { position: relative; animation: splashFadeUp .8s ease .25s both; filter: drop-shadow(0 2px 10px rgba(0,0,0,0.65)) drop-shadow(0 1px 2px rgba(0,0,0,0.8)); }
.splash-wordmark img { height: clamp(110px, 14vw, 200px); width: auto; display: block; visibility: hidden; }
/* Always tinted to the light-mode paper cream (not stark white), regardless of site
theme — the splash background stays dark always (a consistent opening curtain),
so this is the one mark that isn't part of the light/dark cross-swap. */
.splash-wordmark::after {
content: ''; position: absolute; inset: 0; background-color: var(--paper-light);
-webkit-mask-image: url("uploads/assets/AHHM-Media-Logo-Transparent.webp");
mask-image: url("uploads/assets/AHHM-Media-Logo-Transparent.webp");
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; mask-position: center;
-webkit-mask-size: contain; mask-size: contain;
}
.splash-deck { font-family: var(--serif); font-style: italic; font-size: clamp(16px, 1.6vw, 20px); opacity: .8; max-width: 38ch; line-height: 1.4; animation: splashFadeUp .8s ease .4s both; text-shadow: 0 2px 10px rgba(0,0,0,0.65), 0 1px 2px rgba(0,0,0,0.8); }
.splash-progress { width: 220px; height: 1px; background: rgba(244,240,232,.15); margin-top: 12px; overflow: hidden; position: relative; animation: splashFadeUp .6s ease .55s both; }
.splash-progress::after { content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 40%; background: var(--accent); animation: splashLoadBar 1.4s ease-in-out infinite; }
.splash-enter {
pointer-events: auto;
margin-top: 4px;
background: transparent; color: var(--paper-light);
border: 1px solid rgba(244,240,232,.35); padding: 12px 26px;
font-family: var(--mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
cursor: pointer; transition: all .2s ease;
animation: splashFadeUp .8s ease .7s both, splashPulse 2.4s ease-in-out 1.2s infinite;
text-shadow: 0 2px 10px rgba(0,0,0,0.65), 0 1px 2px rgba(0,0,0,0.8);
}
.splash-enter:hover { background: var(--accent); border-color: var(--accent); }
@keyframes splashFadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes splashLoadBar { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } }
/* Breathing halo: a soft glow brightening and dimming around the border —
no scale/size change, quiet enough not to fight the splash's other motion. */
@keyframes splashPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(244,240,232,0); }
50% { box-shadow: 0 0 14px 2px rgba(244,240,232,0.35); }
}
@media (max-width: 700px) { .splash-frame { inset: 12px; padding: 16px 18px; } .splash-top, .splash-bot { font-size: 8px; gap: 8px; flex-wrap: wrap; } }