/* ─────────────────────────────────────────────────────────────────
Fonts, same stack as the Illusorr hero
Outfit → body / paragraphs / UI
PP Monument → display headlines
Squaresharps → small caps labels, eyebrows, UI chrome
───────────────────────────────────────────────────────────────── */
/* Fonts loaded via Google Fonts in */
/* ─────────────────────────────────────────────────────────────────
Theme tokens, light + dark halves both defined up-front.
A section just sets data-tone="light|dark" and gets the full kit.
───────────────────────────────────────────────────────────────── */
:root {
--light-bg: #f3ecdf;
--light-bg-2: #DDE0CE;
--light-ink: #0D243A;
--light-ink-soft: rgba(13, 36, 58, 0.62);
--light-ink-faint: rgba(13, 36, 58, 0.15);
--light-tile: #dde0ce;
--dark-bg: #0D243A;
--dark-bg-2: #0c1828;
--dark-ink: #f3ecdf;
--dark-ink-soft: rgba(233, 235, 223, 0.66);
--dark-ink-faint: rgba(233, 235, 223, 0.22);
--dark-tile: #1b3149;
--accent: #B5803F; /* gold */
--maxw: 1440px;
--gutter: clamp(20px, 4vw, 64px);
}
/* Subtle noise grain, SVG rendered to a tile and
drawn at low opacity. Same paper-grain feel as the landing
page's WebGL plaster, just static and very quiet. */
body::before {
content: '';
position: fixed; inset: 0;
pointer-events: none;
z-index: 1;
background-image: url("data:image/svg+xml;utf8,");
background-size: 220px 220px;
opacity: 0.06;
mix-blend-mode: multiply;
}
/* On the dark half, multiply would hide the noise, invert the
blend by flagging sections that should use a lighter grain. */
section[data-tone="dark"] {
position: relative;
}
section[data-tone="dark"]::after {
content: '';
position: absolute; inset: 0;
pointer-events: none;
z-index: 0;
background-image: url("data:image/svg+xml;utf8,");
background-size: 220px 220px;
opacity: 0.035;
mix-blend-mode: screen;
}
/* Keep section content above the dark-half grain overlay. */
section[data-tone="dark"] > * { position: relative; z-index: 1; }
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: 'Outfit', system-ui, sans-serif;
font-weight: 400;
background: var(--light-bg);
color: var(--light-ink);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
/* Sections inherit a tone from data-tone. */
section[data-tone="light"] {
background: var(--light-bg);
color: var(--light-ink);
--bg: var(--light-bg);
--bg-2: var(--light-bg-2);
--ink: var(--light-ink);
--ink-soft: var(--light-ink-soft);
--ink-faint: var(--light-ink-faint);
--tile: var(--light-tile);
}
section[data-tone="dark"] {
background: var(--dark-bg);
color: var(--dark-ink);
--bg: var(--dark-bg);
--bg-2: var(--dark-bg-2);
--ink: var(--dark-ink);
--ink-soft: var(--dark-ink-soft);
--ink-faint: var(--dark-ink-faint);
--tile: var(--dark-tile);
}
.wrap {
max-width: var(--maxw);
margin: 0 auto;
padding: 0 var(--gutter);
}
/* ─────────────────────────────────────────────────────────────────
Fixed top nav, matches the Illusorr chrome. Inverts with theme.
───────────────────────────────────────────────────────────────── */
.topnav {
position: fixed; left: 0; right: 0; top: 0;
display: flex; align-items: center; justify-content: space-between;
padding: 22px var(--gutter);
z-index: 50;
pointer-events: none;
/* mix-blend-mode removed, was creating compositing artefacts with
the custom cursor. Theme inversion is now handled per-section
via JS toggling .on-dark on the topnav. */
}
.topnav > * { pointer-events: auto; }
.topnav a, .topnav button {
text-decoration: none;
background: transparent; border: 0;
font-family: 'Outfit', system-ui, sans-serif;
font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase;
cursor: pointer;
transition: color .35s ease;
}
.topnav .logo-lockup {
display: inline-flex; align-items: center; gap: 12px;
font-family: 'Squaresharps', system-ui, sans-serif;
font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase;
transition: color .35s ease;
text-decoration: none;
}
.topnav .logo-mark {
width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
}
.topnav .logo-mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.topnav .logo-lockup, .topnav a, .topnav button { color: #0D243A; }
.topnav.on-dark .logo-lockup, .topnav.on-dark a, .topnav.on-dark button { color: #f3ecdf; }
.topnav nav { display: flex; gap: 32px; align-items: center; }
/* ─────────────────────────────────────────────────────────────────
HERO, Dogstudio-style: tiny meta strip, gigantic title, scroll cue
───────────────────────────────────────────────────────────────── */
section.hero[data-tone="dark"] {
/* 21:9 letterbox panel, with a floor so it never collapses on phones */
width: 100%; max-width: 100vw;
aspect-ratio: 21 / 9;
min-height: 560px;
display: flex; flex-direction: column; justify-content: center;
padding: clamp(40px, 8vh, 96px) var(--gutter);
position: relative;
--hg1: #DDE0CE; --hg2: #B5803F; --hg3: #0D243A;
background:
radial-gradient(85% 95% at 10% 98%, rgba(40,28,14,0.5), transparent 62%),
linear-gradient(135deg, var(--hg1) 0%, var(--hg2) 55%, var(--hg3) 100%);
}
.hero .hero-inner { max-width: var(--maxw); width: 100%; margin: 0 auto; position: relative; z-index: 2; display: flex; flex-direction: column; flex: 1 1 auto; }
/* ──────────────────────────────────────────────────────────────────
HERO EMBLEM FIELD, small Boyner cloverleaf marks scattered around
the hero edges. JS gives each one cursor-repulsion physics: the
pointer pushes nearby marks away, they spring back home, and idle-
spin slowly. Sits behind the hero text (z-index 1), non-interactive.
────────────────────────────────────────────────────────────────── */
.hero-emblems {
position: absolute;
left: 0;
pointer-events: none;
overflow: visible;
z-index: 30;
}
.hero-emblem {
position: absolute;
top: 0; left: 0;
will-change: transform;
}
.hero-emblem svg { display: block; width: 100%; height: 100%; }
.hero-emblem svg path { fill: currentColor; }
.hero-emblem img { display: block; width: 100%; height: 100%; object-fit: contain; filter: invert(1) brightness(1.7); }
.eyebrow-row {
display: flex; gap: 28px; align-items: center;
font-family: 'Outfit', system-ui, sans-serif;
font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase;
color: var(--ink-soft);
margin-bottom: 28px;
}
.eyebrow-row .dotsep {
width: 4px; height: 4px; border-radius: 50%;
background: var(--ink-faint);
}
.hero-title {
font-family: 'PP Monument Extended', system-ui, sans-serif;
font-weight: 900;
font-size: clamp(40px, 5.5vw, 55px);
line-height: 0.92;
letter-spacing: -0.01em;
text-transform: uppercase;
margin: 0;
color: var(--ink);
max-width: 100%;
overflow-wrap: break-word;
}
.hero-title .ln { display: block; max-width: 100%; }
/* Italic tagline drops to its own block and is allowed to wrap so it
never extends past the viewport / triggers horizontal overflow. */
.hero-title .ln-ital {
display: block;
font-family: 'PP Monument Extended', system-ui, sans-serif;
font-weight: 400;
font-style: italic;
font-size: 0.42em;
letter-spacing: 0;
color: var(--ink-soft);
margin-top: 0.28em;
max-width: 100%;
white-space: normal;
overflow-wrap: anywhere;
text-transform: none;
}
.hero-foot {
margin-top: auto;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 18px;
}
.hero-lede {
font-family: 'Outfit', system-ui, sans-serif;
font-weight: 400;
font-size: clamp(15px, 1.05vw, 17px);
line-height: 1.55;
color: var(--ink);
max-width: 420px;
margin: 0;
}
.hero-lede strong { font-weight: 600; }
.scroll-cue {
justify-self: center;
display: inline-flex; flex-direction: column; align-items: center; gap: 10px;
font-family: 'Outfit', system-ui, sans-serif;
font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
color: var(--ink-soft);
}
.scroll-cue .line {
width: 1px; height: 44px;
background: linear-gradient(180deg, transparent 0%, var(--ink) 50%, transparent 100%);
background-size: 100% 200%;
animation: scrollPulse 1.8s ease-in-out infinite;
}
@keyframes scrollPulse {
0% { background-position: 0 -100%; }
100% { background-position: 0 200%; }
}
.hero-credit {
justify-self: end;
text-align: right;
font-family: 'Outfit', system-ui, sans-serif;
font-weight: 500;
font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
color: var(--ink-soft);
line-height: 1.7;
}
/* ─────────────────────────────────────────────────────────────────
PROJECT META, horizontal strip of label/value cells (the
"Client / Year / Services" row that anchors every Dogstudio case).
───────────────────────────────────────────────────────────────── */
.meta-bar {
border-top: 1px solid var(--ink-faint);
border-bottom: 1px solid var(--ink-faint);
padding: 28px 0;
display: grid;
grid-template-columns: 1.2fr 0.8fr 1.4fr 1.4fr 1fr;
gap: clamp(20px, 3vw, 48px);
}
.meta-cell .meta-k {
display: block;
font-family: 'Outfit', system-ui, sans-serif;
font-weight: 500;
font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--ink-soft);
margin-bottom: 8px;
}
.meta-cell .meta-v {
display: block;
font-family: 'Outfit', system-ui, sans-serif;
font-weight: 400;
font-size: 15px; line-height: 1.5;
color: var(--ink);
}
/* ─────────────────────────────────────────────────────────────────
COVER, full-bleed featured visual right after the meta bar
───────────────────────────────────────────────────────────────── */
.cover {
padding: clamp(40px, 6vw, 96px) 0 clamp(90px, 11vw, 170px);
}
.cover .frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
/* The .ph inside .frame must explicitly fill the frame, block
children don't inherit the parent's aspect-ratio height. */
.cover .frame .ph { position: absolute; inset: 0; }
/* Placeholder media block, base style for any image/video stand-in.
The dotted hatch + corner label tells the user "fill me in". */
.ph {
position: relative;
width: 100%;
background: var(--tile);
color: var(--ink-soft);
overflow: hidden;
isolation: isolate;
}
.ph::before {
content: '';
position: absolute; inset: 0;
background-image:
linear-gradient(45deg, var(--ink-faint) 1px, transparent 1px),
linear-gradient(-45deg, var(--ink-faint) 1px, transparent 1px);
background-size: 14px 14px;
opacity: 0.55;
pointer-events: none;
}
.ph::after { content: none; }
/* When a .ph holds a real ![]()
or