/* ==========================================================================
Digital Astronaut — main stylesheet
Colours, fonts, radius and grain come from Appearance > Customize (CSS variables
printed inline in ). Nothing below hard-codes a brand colour except art.
========================================================================== */
:root {
--da-gutter: clamp(20px, 4.5vw, 64px);
--da-container: 1440px;
--da-header-h: 96px;
--da-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
--da-on-accent: #060608;
--da-muted-ink: color-mix(in srgb, var(--da-ink) 62%, var(--da-light));
--da-line: color-mix(in srgb, var(--da-text) 14%, transparent);
--da-line-ink: color-mix(in srgb, var(--da-ink) 22%, transparent);
--da-field-bg: var(--da-panel);
--da-field-fg: var(--da-text);
}
*,
*::before,
*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--da-dark);
color: var(--da-text);
font-family: var(--da-font-body);
font-size: 17px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; }
img { display: block; }
a { color: inherit; transition: opacity 0.2s; }
a:hover { opacity: 0.75; }
p { margin: 0 0 1em; }
:focus-visible { outline: 2px solid var(--da-accent); outline-offset: 3px; }
h1, h2, h3, h4, h5 {
margin: 0;
font-family: var(--da-font-head);
font-weight: var(--da-head-weight);
letter-spacing: -0.04em;
line-height: 0.98;
}
.screen-reader-text {
position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
clip: rect(0 0 0 0); clip-path: inset(50%); border: 0; white-space: nowrap;
}
.skip-link:focus {
position: fixed !important; left: 16px; top: 16px; z-index: 1000; width: auto; height: auto; padding: 12px 20px; margin: 0;
clip: auto; clip-path: none; background: var(--da-accent); color: var(--da-on-accent); border-radius: 999px; text-decoration: none;
}
.da-container { width: 100%; max-width: var(--da-container); margin: 0 auto; padding-inline: var(--da-gutter); }
.da-container--narrow { max-width: calc(860px + var(--da-gutter) * 2); }
.da-label {
margin: 0;
font: 400 12px/1.6 var(--da-font-mono);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--da-muted);
}
.da-label--ink { color: var(--da-ink); }
.da-label--soft { color: rgba(255, 255, 255, 0.82); }
.da-section { padding-block: clamp(56px, 8vw, 112px); }
.da-section--tight { padding-block: clamp(16px, 2vw, 32px) clamp(64px, 8vw, 112px); }
.da-h2 {
font-size: calc(clamp(52px, 8.9vw, 128px) * var(--da-scale));
line-height: 0.9;
letter-spacing: -0.05em;
}
.da-h2--md { font-size: calc(clamp(44px, 6.7vw, 96px) * var(--da-scale)); }
.da-h2--card { font-size: calc(clamp(44px, 7.2vw, 104px) * var(--da-scale)); }
.da-h2 em, .da-hero__title em, .da-footer__title em { font-style: normal; color: var(--da-accent); }
.da-empty {
padding: 32px; border: 1px dashed var(--da-line); border-radius: var(--da-r-card); color: var(--da-muted);
}
/* ---------- Film grain (tiny SVG noise tile) ---------- */
.da-grain { position: relative; }
.da-grain::after {
content: "";
position: absolute; inset: 0; z-index: 3; pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
opacity: var(--da-grain);
mix-blend-mode: overlay;
}
/* ---------- Buttons, links, arrows, chips ---------- */
.da-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
min-height: 56px; padding: 0 30px; border: 1px solid transparent; border-radius: 999px;
font: 600 15px/1 var(--da-font-body); text-decoration: none; cursor: pointer;
transition: transform 0.2s var(--da-ease), background 0.2s, color 0.2s, opacity 0.2s;
}
.da-btn:hover { opacity: 1; transform: translateY(-2px); }
.da-btn--primary { background: var(--da-accent); color: var(--da-on-accent); }
.da-btn--outline { border-color: var(--da-text); color: var(--da-text); background: transparent; }
.da-btn--outline:hover { background: var(--da-text); color: var(--da-dark); }
.da-btn--ink { background: var(--da-ink); color: var(--da-light); }
.da-link {
display: inline-flex; align-items: center; gap: 12px; min-height: 48px; font-weight: 500;
color: inherit; text-decoration: none; border-bottom: 1px solid currentColor;
}
.da-link--ink { color: var(--da-ink); }
.da-brief .da-link { margin-top: clamp(28px, 3vw, 44px); }
.da-arrow {
display: inline-flex; align-items: center; justify-content: center; flex: none;
width: 64px; height: 64px; border-radius: 50%; background: var(--da-text); color: var(--da-dark);
text-decoration: none; transition: transform 0.3s var(--da-ease);
}
.da-arrow--sm { width: 52px; height: 52px; }
.da-arrow--xl { width: clamp(88px, 10.3vw, 148px); height: clamp(88px, 10.3vw, 148px); background: var(--da-accent); color: var(--da-on-accent); }
.da-arrow--xl svg { width: 38%; height: 38%; }
.da-pill {
display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 999px;
background: var(--da-ink); color: var(--da-light);
}
.da-chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.da-chip {
display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px;
border: 1px solid var(--da-line); border-radius: 999px; color: var(--da-text);
font-size: 15px; font-weight: 500; text-decoration: none;
}
.da-chip:hover { opacity: 1; border-color: var(--da-text); }
.da-chip.is-active { background: var(--da-text); border-color: var(--da-text); color: var(--da-dark); }
/* ---------- Header ---------- */
.da-header {
position: absolute; top: 0; left: 0; right: 0; z-index: 30; height: var(--da-header-h);
padding-inline: var(--da-gutter); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
color: var(--da-text);
}
.admin-bar .da-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .da-header { top: 46px; } }
.da-light-top .da-header { color: var(--da-ink); }
.da-brand { display: flex; align-items: center; gap: 12px; justify-self: start; color: inherit; text-decoration: none; }
.da-brand__mark { flex: none; }
.da-brand__visor { fill: var(--da-dark); }
.da-brand__glint { stroke: var(--da-accent); }
.da-brand__dot { fill: var(--da-accent); }
.da-light-top .da-header .da-brand__visor { fill: var(--da-light); }
.da-light-top .da-header .da-brand__glint { stroke: var(--da-ink); }
.da-light-top .da-header .da-brand__dot { fill: var(--da-ink); }
.da-brand__name { font: 500 17px/1 var(--da-font-body); letter-spacing: -0.01em; }
.da-brand--logo img { max-height: 48px; width: auto; }
.da-status {
display: inline-flex; align-items: center; gap: 10px; height: 40px; margin: 0; padding: 0 18px;
border: 1px solid var(--da-line); border-radius: 999px;
font: 400 12px var(--da-font-mono); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
}
.da-status--plain { height: auto; padding: 0; border: 0; }
.da-status__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--da-accent); flex: none; }
.da-light-top .da-header .da-status { border-color: var(--da-line-ink); }
.da-light-top .da-header .da-status__dot { background: var(--da-ink); }
.da-header__actions { justify-self: end; display: flex; align-items: center; gap: 20px; }
.da-menubtn {
display: inline-flex; align-items: center; gap: 14px; min-height: 44px; padding: 0;
background: none; border: 0; color: inherit; font: 500 16px var(--da-font-body); cursor: pointer;
}
.da-menubtn__x {
display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%;
background: var(--da-text); color: var(--da-dark);
}
.da-cartlink { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: inherit; text-decoration: none; }
.da-cart-count { font: 500 12px var(--da-font-mono); }
/* ---------- Full-screen menu ---------- */
.da-menu {
position: fixed; inset: 0; z-index: 100; overflow: auto;
display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 320px); grid-template-rows: var(--da-header-h) 1fr;
column-gap: 48px; padding-inline: var(--da-gutter);
background: var(--da-dark); color: var(--da-text);
opacity: 0; transition: opacity 0.3s var(--da-ease);
}
.da-menu[hidden] { display: none; }
.da-menu.is-open { opacity: 1; }
.da-menu::before {
content: ""; position: fixed; right: -8vw; bottom: -14vw; width: 52vw; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
background: radial-gradient(circle at 60% 40%, var(--da-n3) 0, var(--da-n4) 45%, transparent 72%);
}
.da-menu::after {
content: ""; position: fixed; right: 12vw; bottom: 6vw; width: 20vw; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
background: radial-gradient(circle at 40% 35%, #fff0e6 0%, var(--da-n1) 35%, var(--da-n2) 75%, var(--da-n3) 100%);
box-shadow: 0 0 120px 30px color-mix(in srgb, var(--da-n2) 40%, transparent);
}
.da-menu > * { position: relative; z-index: 1; }
.da-menu__bar { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; }
.da-menu__list { list-style: none; margin: 0; padding: 0; counter-reset: m; }
.da-menu__list li { counter-increment: m; }
.da-menu__list a {
display: flex; align-items: baseline; gap: 24px; color: var(--da-text); text-decoration: none;
font-family: var(--da-font-head); font-weight: var(--da-head-weight);
font-size: calc(clamp(44px, 8.4vw, 120px) * var(--da-scale)); line-height: 1.04; letter-spacing: -0.05em;
}
.da-menu__list a::before {
content: counter(m, decimal-leading-zero); flex: none; width: 40px;
font: 400 13px var(--da-font-mono); letter-spacing: 0; color: var(--da-accent);
}
.da-menu__list .current-menu-item > a { color: var(--da-accent); }
.da-menu__list .da-outline > a { color: transparent; -webkit-text-stroke: 1.5px var(--da-text); }
.da-menu__aside { align-self: start; display: flex; flex-direction: column; gap: 32px; padding-top: 24px; }
.da-menu__aside p { font-size: 18px; line-height: 1.6; }
.da-menu__aside a { text-decoration: none; }
.da-menu-open { overflow: hidden; }
/* ---------- Floating dock ---------- */
.da-dock {
position: fixed; left: 50%; bottom: 24px; z-index: 60; transform: translateX(-50%);
display: flex; align-items: center; gap: 2px; padding: 6px;
background: color-mix(in srgb, var(--da-panel) 94%, transparent); border: 1px solid var(--da-line); border-radius: 999px;
-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
font: 400 11px var(--da-font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--da-text);
transition: transform 0.35s var(--da-ease), opacity 0.25s;
}
.da-dock.is-hidden, .da-menu-open .da-dock { transform: translate(-50%, 140%); opacity: 0; pointer-events: none; }
.da-dock a, .da-dock__menu {
display: flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px;
color: var(--da-text); text-decoration: none; white-space: nowrap;
}
.da-dock__list { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.da-dock__home { width: 44px; padding: 0 !important; justify-content: center; }
.da-dock__visor { fill: var(--da-panel); }
.da-dock__list .current-menu-item > a, .da-dock__list .current-menu-ancestor > a { background: var(--da-text); color: var(--da-dark); }
.da-dock__menu { border: 0; background: var(--da-accent); color: var(--da-on-accent); font: 500 11px var(--da-font-mono); letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; }
.da-has-dock .da-footer { padding-bottom: 88px; }
/* ---------- Hero ---------- */
.da-hero {
position: relative; max-width: var(--da-container); margin: 0 auto;
padding: calc(var(--da-header-h) + clamp(24px, 5vw, 96px)) var(--da-gutter) calc(var(--da-r-panel) + clamp(48px, 6vw, 96px));
display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: stretch;
}
.da-hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(24px, 3vw, 40px); }
.da-hero__title { font-size: calc(clamp(46px, 7.2vw, 104px) * var(--da-scale)); line-height: 0.98; letter-spacing: -0.045em; }
.da-reel { display: inline-flex; align-items: center; gap: 16px; color: var(--da-text); font-weight: 500; font-size: 15px; text-decoration: none; }
.da-reel__icon { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; background: var(--da-panel); }
.da-hero__foot { margin-top: auto; display: flex; flex-direction: column; gap: 28px; }
.da-hero__text { margin: 0; max-width: 470px; font-size: 19px; line-height: 1.5; color: var(--da-muted); }
.da-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }
.da-hero__art { position: relative; display: flex; align-items: flex-start; justify-content: center; }
.da-hud {
position: absolute; z-index: 2; margin: 0; left: -3%;
font: 400 11px/1.8 var(--da-font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--da-muted);
}
.da-hud--top { top: 4%; }
.da-hud--bottom { bottom: 8%; }
.da-visor { position: relative; width: min(100%, 600px); aspect-ratio: 600 / 660; }
.da-visor > span { position: absolute; display: block; }
.da-visor__chin { left: 21.7%; top: 91.8%; width: 56.6%; height: 8.2%; border-radius: 999px; background: linear-gradient(180deg, #c9c8c2, #6e6d69); }
.da-visor__shell {
inset: 0; border-radius: 50% / 47%;
background: linear-gradient(155deg, #faf9f5 0%, #c7c6c0 50%, #8a8985 100%);
box-shadow: 0 40px 120px color-mix(in srgb, var(--da-n3) 40%, transparent);
}
.da-visor__glass {
left: 5%; right: 5%; top: 6.06%; bottom: 15.15%; border-radius: 50% / 48%; overflow: hidden;
background: radial-gradient(120% 90% at 20% 10%, var(--da-n3) 0%, var(--da-n4) 45%, #0b0716 100%);
box-shadow: inset 0 0 90px rgba(0, 0, 0, 0.7);
}
.da-visor__glass > span { position: absolute; display: block; }
.da-visor__planet { left: -16.7%; top: 38.5%; width: 85.2%; aspect-ratio: 1; border-radius: 50%; background: linear-gradient(135deg, var(--da-n1), var(--da-n2) 45%, var(--da-n3)); }
.da-visor__shade { left: -5.6%; top: 30.4%; width: 81.5%; aspect-ratio: 1; border-radius: 50%; background: #0a0714; }
.da-visor__sun {
left: 66.7%; top: 13.5%; width: 15.6%; aspect-ratio: 1; border-radius: 50%;
background: radial-gradient(circle, #ffe1c2, var(--da-n1) 60%, var(--da-n2));
box-shadow: 0 0 60px 20px color-mix(in srgb, var(--da-n1) 50%, transparent);
}
.da-visor__star { width: 3px; height: 3px; border-radius: 50%; background: #f4f3ef; }
.da-visor__star--1 { left: 16%; top: 62%; }
.da-visor__star--2 { left: 56%; top: 50%; }
.da-visor__star--3 { left: 87%; top: 58%; }
.da-visor__shine { left: 13%; top: 11.5%; width: 40.7%; height: 13.5%; border-radius: 50%; background: rgba(255, 255, 255, 0.2); transform: rotate(-28deg); filter: blur(8px); }
.da-photo { position: relative; width: min(100%, 560px); aspect-ratio: 600 / 660; border-radius: 50% / 47%; overflow: hidden; box-shadow: 0 40px 120px color-mix(in srgb, var(--da-n3) 40%, transparent); }
.da-photo img { width: 100%; height: 100%; object-fit: cover; }
.da-badge { position: absolute; right: -2%; bottom: 0; width: clamp(96px, 10vw, 150px); z-index: 4; }
.da-badge svg { display: block; width: 100%; height: auto; }
.da-badge__bg { fill: var(--da-accent); }
.da-badge__text { font: 400 10px var(--da-font-mono); letter-spacing: 2px; fill: var(--da-on-accent); }
.da-badge__arrow { stroke: var(--da-on-accent); }
.da-badge__ring { transform-origin: 75px 75px; animation: da-rot 24s linear infinite; }
@keyframes da-rot { to { transform: rotate(360deg); } }
.da-hero__social {
position: absolute; right: calc(var(--da-gutter) * 0.25); top: 50%; transform: translateY(-50%);
display: flex; flex-direction: column; gap: 4px; list-style: none; margin: 0; padding: 0;
}
.da-hero__social a { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--da-text); }
/* ---------- Panels (rounded tops that slide over the previous section) ---------- */
.da-panel {
position: relative; margin-top: calc(var(--da-r-panel) * -1);
padding-top: calc(var(--da-r-panel) + clamp(56px, 7vw, 104px)); padding-bottom: clamp(72px, 8vw, 120px);
border-radius: var(--da-r-panel) var(--da-r-panel) 0 0;
}
.da-panel--light { background: var(--da-light); color: var(--da-ink); }
.da-panel--dark { background: var(--da-dark); color: var(--da-text); }
.da-panel--light .da-label { color: var(--da-muted-ink); }
.da-panel--light .da-label--ink { color: var(--da-ink); }
/* Brief */
.da-brief__grid { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 40px; }
.da-brief__grid > .da-label { padding-top: 14px; }
.da-brief__text {
margin: 0; max-width: 960px;
font-size: calc(clamp(28px, 3.9vw, 56px) * var(--da-scale)); line-height: 1.14; font-weight: var(--da-head-weight); letter-spacing: -0.03em;
}
.js .da-reveal .w { color: color-mix(in srgb, var(--da-ink) 42%, var(--da-light)); transition: color 0.35s; }
.js .da-reveal .w.on { color: var(--da-ink); }
/* Stacked words */
.da-words__inner { position: relative; text-align: center; }
.da-words__label { position: absolute; left: var(--da-gutter); top: 0; text-align: left; }
.da-words__w {
margin: 0; font-family: var(--da-font-head); font-weight: var(--da-head-weight);
font-size: calc(clamp(52px, 11.4vw, 164px) * var(--da-scale)); line-height: 0.98; letter-spacing: -0.05em;
}
.da-words__w--outline { color: transparent; -webkit-text-stroke: 1.5px var(--da-text); }
.da-words__plus { display: block; font-size: clamp(28px, 3.9vw, 56px); line-height: 1.1; font-weight: 300; color: var(--da-accent); }
/* Section head */
.da-sectionhead { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 24px; margin-bottom: clamp(32px, 4vw, 56px); }
.da-sectionhead--stack { display: block; }
.da-sectionhead .da-label { margin-bottom: 20px; }
.da-sectionhead > .da-link, .da-sectionhead > .da-btn { margin-bottom: 8px; }
/* Works */
.da-works { padding-block: clamp(56px, 7vw, 96px) calc(var(--da-r-panel) + clamp(48px, 5vw, 96px)); }
.da-projects { display: flex; flex-direction: column; gap: 24px; }
.da-project { position: relative; display: block; isolation: isolate; border-radius: var(--da-r-card); overflow: hidden; color: var(--da-text); text-decoration: none; }
.da-project:hover { opacity: 1; }
.da-tone-ink { color: var(--da-ink); }
.da-tone-light { color: #f4f3ef; }
.da-project__media { position: relative; display: block; aspect-ratio: 2.62 / 1; min-height: 300px; }
.da-project--hero .da-project__media { aspect-ratio: 2 / 1; }
.da-project--featured .da-project__media { aspect-ratio: 2.3 / 1; min-height: 340px; }
.da-project__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--da-ease); }
.da-project:hover .da-project__img { transform: scale(1.03); }
.da-project--photo .da-project__media::before {
content: ""; position: absolute; inset: 0; z-index: 2;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.05) 50%, rgba(0, 0, 0, 0.4));
}
.da-project__tags {
position: absolute; z-index: 4; left: clamp(20px, 3vw, 40px); top: clamp(20px, 2.5vw, 36px);
display: flex; align-items: center; gap: 12px;
font: 400 12px var(--da-font-mono); letter-spacing: 0.1em; text-transform: uppercase;
}
.da-project__title {
position: absolute; z-index: 4; left: clamp(20px, 3vw, 40px); top: calc(clamp(20px, 2.5vw, 36px) + 32px);
font-family: var(--da-font-head); font-weight: var(--da-head-weight);
font-size: calc(clamp(34px, 4.4vw, 64px) * var(--da-scale)); line-height: 1; letter-spacing: -0.04em;
}
.da-project .da-arrow { position: absolute; z-index: 4; right: clamp(16px, 2.2vw, 32px); top: clamp(16px, 2.2vw, 32px); }
.da-project:hover .da-arrow { transform: translate(3px, -3px); }
.da-project__feat { position: absolute; z-index: 4; left: clamp(20px, 3.4vw, 48px); bottom: clamp(20px, 3.4vw, 48px); max-width: min(640px, 70%); }
.da-project__feat .da-project__title { position: static; display: block; font-size: calc(clamp(32px, 4.7vw, 68px) * var(--da-scale)); }
.da-project__excerpt { display: block; margin-top: 18px; font-size: 18px; line-height: 1.5; max-width: 520px; }
.da-project--hero { margin-bottom: 0; }
.da-project--hero .da-project__media { min-height: 260px; }
/* Generated artwork (works when there is no project image) */
.da-art { position: absolute; inset: 0; display: block; overflow: hidden; container-type: size; }
.da-art__disc {
position: absolute; left: var(--cx); top: var(--cy); width: var(--s); aspect-ratio: 1; transform: translate(-50%, -50%);
border-radius: 50%; background: var(--disc); box-shadow: var(--disc-sh);
}
.da-art__ring {
position: absolute; left: var(--cx); top: var(--cy); width: calc(var(--s) * 1.8); height: calc(var(--s) * 0.5);
transform: translate(-50%, -50%) rotate(-18deg); border: 2px solid var(--ring, transparent); border-radius: 50%;
}
.da-art__screen {
position: absolute; left: var(--sx); top: var(--sy); display: block; box-sizing: border-box;
font-size: min(30cqw, 62cqh * 1.6); width: 1em; aspect-ratio: 1.6; padding: 0.06em; border-radius: 0.05em;
background: #f4f3ef; box-shadow: 0 24px 50px rgba(0, 0, 0, 0.35); transform: rotate(var(--sr)); overflow: hidden;
}
.da-art__screen i { display: block; border-radius: 0.03em; background: #c9c8c3; }
.da-art__screen i:nth-child(1) { width: 0.32em; height: 0.045em; background: #0b0b0d; }
.da-art__screen i:nth-child(2) { width: 0.6em; height: 0.028em; margin-top: 0.03em; }
.da-art__screen i:nth-child(3) { width: 0.45em; height: 0.028em; margin-top: 0.02em; }
.da-art__screen b { display: block; height: 0.17em; margin-top: 0.06em; border-radius: 0.03em; background: var(--bar, var(--da-n3)); }
.da-art--eclipse {
background: linear-gradient(120deg, var(--da-n1), var(--da-n2) 28%, var(--da-n3) 62%, var(--da-n4));
--cx: 68cqw; --cy: 45cqh; --s: min(62cqh, 34cqw); --disc: #060608;
--disc-sh: 0 0 0 2px rgba(255, 200, 150, 0.9), 0 0 90px 20px rgba(255, 150, 110, 0.55);
--sx: 40cqw; --sy: 52cqh; --sr: -5deg; --bar: var(--da-n3);
}
.da-art--planet {
background: linear-gradient(140deg, #0e1a2b 0%, #1b4f63 50%, #7cc7a8 85%, var(--da-accent) 130%);
--cx: 70cqw; --cy: 45cqh; --s: min(58cqh, 30cqw); --disc: radial-gradient(circle at 35% 30%, #fff, #cfe8d8 45%, #4e8c86 100%);
--disc-sh: 0 0 80px color-mix(in srgb, var(--da-accent) 35%, transparent); --ring: rgba(255, 255, 255, 0.7);
--sx: 36cqw; --sy: 50cqh; --sr: 4deg; --bar: var(--da-accent);
}
.da-art--sunrise {
background: linear-gradient(180deg, #0b0716 0%, var(--da-n4) 45%, var(--da-n3) 70%, var(--da-n2) 90%, var(--da-n1) 100%);
--cx: 50cqw; --cy: 100cqh; --s: min(120cqh, 64cqw); --disc: radial-gradient(circle, #fff1dc 0, var(--da-n1) 50%, var(--da-n2) 100%);
--disc-sh: 0 0 100px 30px color-mix(in srgb, var(--da-n1) 50%, transparent);
--sx: 58cqw; --sy: 14cqh; --sr: -3deg; --bar: var(--da-n2);
}
.da-art--violet {
background: radial-gradient(120% 120% at 15% 0%, var(--da-n3) 0%, color-mix(in srgb, var(--da-n4) 90%, #000) 50%, #0b0716 100%);
--cx: 72cqw; --cy: 44cqh; --s: min(60cqh, 32cqw); --disc: radial-gradient(circle at 35% 30%, #ffe9da, var(--da-n1) 45%, var(--da-n2) 80%);
--disc-sh: 0 0 90px 20px color-mix(in srgb, var(--da-n2) 40%, transparent); --ring: rgba(255, 255, 255, 0.5);
--sx: 40cqw; --sy: 52cqh; --sr: 3deg; --bar: var(--da-accent);
}
.da-art--mono {
background: linear-gradient(160deg, #2a2a31, #0b0b0e);
--cx: 66cqw; --cy: 46cqh; --s: min(54cqh, 28cqw); --disc: linear-gradient(155deg, #faf9f5, #c7c6c0 50%, #8a8985);
--disc-sh: 0 30px 80px rgba(0, 0, 0, 0.6); --ring: var(--da-accent);
--sx: 36cqw; --sy: 52cqh; --sr: -4deg; --bar: var(--da-accent);
}
.da-art--lime {
background: linear-gradient(140deg, var(--da-accent), #7cc7a8);
--cx: 68cqw; --cy: 44cqh; --s: min(58cqh, 30cqw); --disc: #060608; --disc-sh: 0 0 0 2px rgba(6, 6, 8, 0.9);
--sx: 40cqw; --sy: 50cqh; --sr: 5deg; --bar: #060608;
}
/* Grid cards (works archive) */
.da-grid { display: grid; gap: clamp(32px, 4vw, 56px) clamp(16px, 2vw, 32px); }
.da-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.da-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.da-card { display: block; color: var(--da-text); text-decoration: none; }
.da-card:hover { opacity: 1; }
.da-card__media { position: relative; display: block; aspect-ratio: 632 / 460; border-radius: var(--da-r-card); overflow: hidden; }
.da-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--da-ease); }
.da-card:hover .da-card__img { transform: scale(1.04); }
.da-card__tags {
position: absolute; z-index: 4; left: 28px; top: 28px; padding-right: 88px;
font: 400 11px var(--da-font-mono); letter-spacing: 0.1em; text-transform: uppercase;
}
.da-tone-ink .da-card__tags { color: var(--da-ink); }
.da-tone-light .da-card__tags { color: #f4f3ef; }
.da-card .da-arrow { position: absolute; z-index: 4; right: 24px; top: 24px; }
.da-card:hover .da-arrow { transform: translate(3px, -3px); }
.da-card__cap { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: 20px; }
.da-card__title { font-family: var(--da-font-head); font-weight: var(--da-head-weight); font-size: calc(clamp(26px, 2.4vw, 34px) * var(--da-scale)); letter-spacing: -0.035em; line-height: 1; }
.da-card__year { font: 400 13px var(--da-font-mono); color: var(--da-muted); }
/* Journal cards */
.da-post__link { display: block; color: inherit; text-decoration: none; }
.da-post__link:hover { opacity: 1; }
.da-post__media { position: relative; display: block; aspect-ratio: 421 / 260; border-radius: calc(var(--da-r-card) * 0.75); overflow: hidden; }
.da-post__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--da-ease); }
.da-post__link:hover .da-post__img { transform: scale(1.04); }
.da-post__meta { display: block; margin-top: 18px; font: 400 12px var(--da-font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--da-muted); }
.da-post__title { margin-top: 10px; font-size: calc(clamp(22px, 2vw, 27px) * var(--da-scale)); line-height: 1.15; letter-spacing: -0.03em; }
.da-post__excerpt { display: block; margin-top: 10px; color: var(--da-muted); font-size: 16px; line-height: 1.5; }
.da-panel--light .da-post__meta, .da-panel--light .da-post__excerpt { color: var(--da-muted-ink); }
.da-post--compact .da-post__title { font-weight: 400; }
.da-featured-wrap { padding-bottom: clamp(16px, 2vw, 32px); }
/* Services (home) */
.da-servicegrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.da-service {
position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-height: 340px;
padding: clamp(24px, 2.5vw, 36px); border-radius: var(--da-r-card); background: var(--da-paper); color: var(--da-ink);
}
.da-service__top { display: flex; justify-content: space-between; align-items: flex-start; }
.da-service__num { font: 400 12px var(--da-font-mono); }
.da-service__title { font-size: calc(clamp(30px, 3.05vw, 44px) * var(--da-scale)); line-height: 1.05; letter-spacing: -0.035em; }
.da-cover { color: inherit; text-decoration: none; }
.da-cover::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.da-service__text { margin: 12px 0 0; max-width: 480px; color: var(--da-muted-ink); }
/* Numbers */
.da-stats { overflow: hidden; }
.da-stats__orb {
position: absolute; left: -6%; top: 4%; width: 44%; aspect-ratio: 1; border-radius: 50%;
background: radial-gradient(circle at 60% 40%, var(--da-n3) 0%, var(--da-n4) 45%, transparent 72%);
}
.da-stats__orb span {
position: absolute; left: 33%; top: 16%; width: 47%; aspect-ratio: 1; border-radius: 50%;
background: radial-gradient(circle at 40% 35%, #fff0e6, var(--da-n1) 35%, var(--da-n2) 75%, var(--da-n3));
box-shadow: 0 0 120px 30px color-mix(in srgb, var(--da-n2) 40%, transparent);
}
.da-stats .da-container { position: relative; }
.da-stats__intro { margin-left: auto; width: min(620px, 100%); }
.da-stats__intro .da-label { margin-bottom: 24px; }
.da-stats__intro p { margin: 0; font-size: clamp(22px, 2.4vw, 34px); line-height: 1.25; font-weight: 300; letter-spacing: -0.025em; }
.da-stats__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 32px; margin-top: clamp(64px, 12vw, 200px); }
.da-stats__num {
font-family: var(--da-font-head); font-weight: var(--da-head-weight); line-height: 0.9; letter-spacing: -0.06em;
font-size: calc(clamp(64px, 12vw, 172px) * var(--da-scale)); color: color-mix(in srgb, var(--da-text) 42%, var(--da-dark));
}
.da-stats__lab { margin-top: 16px; font-size: 17px; }
/* Hangar / newsletter card */
.da-hangar { padding-top: calc(var(--da-r-panel) + clamp(56px, 7vw, 96px)); }
.da-band-wrap { padding-block: clamp(40px, 5vw, 76px); }
.da-hangar__card {
position: relative; display: flex; justify-content: space-between; gap: 32px; overflow: hidden; min-height: 408px;
padding: clamp(24px, 3.5vw, 56px); border-radius: calc(var(--da-r-card) * 1.25); color: #f4f3ef;
background: radial-gradient(120% 120% at 15% 0%, var(--da-n3) 0%, color-mix(in srgb, var(--da-n4) 90%, #000) 50%, #0b0716 100%);
}
.da-hangar__orb {
position: absolute; right: 12%; top: 8%; width: min(420px, 38vw); aspect-ratio: 1; border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #ffe9da, var(--da-n1) 45%, var(--da-n2) 80%);
box-shadow: 0 0 120px 30px color-mix(in srgb, var(--da-n2) 40%, transparent);
}
.da-hangar__copy { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.da-hangar__side { position: relative; z-index: 1; align-self: flex-end; width: min(420px, 100%); display: flex; flex-direction: column; gap: 14px; }
.da-hangar__products { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.da-hangar__products a {
display: flex; justify-content: space-between; gap: 16px; padding: 18px 22px; border-radius: 20px;
background: rgba(6, 6, 8, 0.7); color: #f4f3ef; text-decoration: none; font-size: 18px;
}
.da-nl label { display: block; margin-bottom: 10px; }
.da-nl__row { display: flex; gap: 8px; }
.da-nl input[type="email"] {
flex: 1; min-width: 0; height: 56px; padding: 0 22px; border: 0; border-radius: 999px;
background: #f4f3ef; color: #0b0b0d; font: 400 16px var(--da-font-body);
}
.da-nl .da-btn { flex: none; min-height: 56px; padding: 0 24px; }
.da-notice { margin: 0 0 16px; padding: 14px 18px; border-radius: 16px; font-size: 15px; }
.da-notice--ok { background: color-mix(in srgb, var(--da-accent) 25%, transparent); border: 1px solid var(--da-accent); color: inherit; }
.da-notice--error { background: rgba(255, 90, 90, 0.18); border: 1px solid #ff6b6b; color: inherit; }
.da-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* ---------- Footer ---------- */
.da-footer { position: relative; border-top: 1px solid var(--da-line); padding-top: clamp(56px, 8vw, 96px); background: var(--da-dark); color: var(--da-text); }
.da-footer__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 48px; padding-bottom: clamp(40px, 6vw, 96px); }
.da-footer__cta .da-label { margin-bottom: 28px; }
.da-footer__big { display: flex; align-items: flex-end; gap: clamp(20px, 3vw, 40px); }
.da-footer__title { font-size: calc(clamp(60px, 12.2vw, 176px) * var(--da-scale)); line-height: 0.9; letter-spacing: -0.05em; }
.da-footer__big .da-arrow { margin-bottom: 8px; }
.da-footer__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; align-content: start; padding-top: 52px; }
.da-footer .da-label { margin-bottom: 14px; }
.da-footer__list, .da-footer .da-menu-list { list-style: none; margin: 0; padding: 0; }
.da-footer__list a, .da-footer__list span, .da-footer .da-menu-list a { display: inline-block; padding: 7px 0; font-size: 17px; color: var(--da-text); text-decoration: none; word-break: break-word; }
.da-footer__list span { color: var(--da-muted); }
.da-footer__bar {
display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; min-height: 72px; border-top: 1px solid var(--da-line);
font: 400 12px var(--da-font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--da-muted);
}
.da-footer__bar a { color: var(--da-muted); text-decoration: none; }
/* ---------- Page heads ---------- */
.da-pagehead { padding: calc(var(--da-header-h) + 32px) 0 clamp(32px, 4vw, 56px); }
.da-pagehead__label { margin-bottom: 24px; }
.da-pagehead__row { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; }
.da-pagehead__title {
font-size: calc(clamp(56px, 17.2vw, 248px) * var(--da-scale)); line-height: 0.85; letter-spacing: -0.06em; overflow-wrap: anywhere;
}
.da-pagehead__count { margin-left: 0.25em; font: 400 18px var(--da-font-mono); letter-spacing: 0; color: var(--da-accent); vertical-align: top; }
.da-pagehead__aside { margin: 0 0 12px; max-width: 360px; font-size: 19px; line-height: 1.55; color: var(--da-muted); }
.da-pagehead--post .da-pagehead__title, .da-pagehead__title--post { font-size: calc(clamp(38px, 7vw, 104px) * var(--da-scale)); line-height: 0.95; letter-spacing: -0.045em; max-width: 18ch; }
.da-pagehead__tools { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: clamp(28px, 4vw, 56px); }
.da-search { display: flex; align-items: center; gap: 12px; }
.da-search input[type="search"] {
width: min(280px, 60vw); height: 48px; padding: 0 22px; border: 1px solid var(--da-line); border-radius: 999px;
background: var(--da-panel); color: var(--da-text); font: 400 15px var(--da-font-body);
}
.da-pagination ul { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; list-style: none; margin: clamp(40px, 5vw, 72px) 0 0; padding: 0; }
.da-pagination a, .da-pagination span {
display: flex; align-items: center; justify-content: center; min-width: 48px; height: 48px; padding: 0 16px;
border: 1px solid var(--da-line); border-radius: 999px; color: var(--da-text); text-decoration: none; font-weight: 500;
}
.da-pagination .current { background: var(--da-text); color: var(--da-dark); border-color: var(--da-text); }
/* ---------- Single work / post ---------- */
.da-workbody { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); }
.da-workmeta { display: flex; flex-direction: column; gap: 24px; }
.da-workmeta p { margin: 8px 0 0; font-size: 20px; }
.da-nextlabel { margin-bottom: 20px; }
.da-postnav { display: flex; justify-content: space-between; gap: 24px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--da-line); }
.da-postnav a { text-decoration: none; font-weight: 500; }
.da-tags a { display: inline-block; margin: 0 8px 8px 0; padding: 8px 16px; border: 1px solid var(--da-line); border-radius: 999px; font-size: 14px; text-decoration: none; }
/* ---------- Prose (editor content) ---------- */
.da-prose { font-size: 18px; line-height: 1.75; }
.da-prose > * { max-width: 860px; }
.da-prose h2 { font-size: calc(clamp(32px, 4vw, 56px) * var(--da-scale)); margin: 1.6em 0 0.5em; line-height: 1; }
.da-prose h3 { font-size: calc(clamp(26px, 3vw, 36px) * var(--da-scale)); margin: 1.5em 0 0.5em; }
.da-prose h4 { font-size: 22px; margin: 1.4em 0 0.5em; }
.da-prose a { color: var(--da-accent); text-underline-offset: 3px; }
.da-panel--light .da-prose a, .da-light-top .da-prose a { color: var(--da-ink); }
.da-prose img { border-radius: calc(var(--da-r-card) * 0.6); }
.da-prose blockquote { margin: 1.6em 0; padding-left: 24px; border-left: 2px solid var(--da-accent); font-size: 1.25em; font-weight: 300; }
.da-prose pre, .da-prose code { font-family: var(--da-font-mono); font-size: 0.9em; }
.da-prose pre { padding: 20px; overflow: auto; border-radius: 16px; background: var(--da-panel); color: var(--da-text); }
.da-prose :not(pre) > code { padding: 2px 6px; border-radius: 6px; background: var(--da-panel); color: var(--da-text); }
.da-prose table { width: 100%; border-collapse: collapse; }
.da-prose th, .da-prose td { padding: 12px; border-bottom: 1px solid var(--da-line); text-align: left; }
.da-prose .alignwide, .da-prose .alignfull { max-width: none; }
.da-prose .wp-block-button__link { border-radius: 999px; padding: 18px 30px; background: var(--da-accent); color: var(--da-on-accent); font-weight: 600; text-decoration: none; }
.da-prose--wide > * { max-width: none; }
/* Block patterns */
.da-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.da-plan { padding: 32px; border-radius: var(--da-r-card); background: var(--da-panel); }
.da-plan.is-featured { background: radial-gradient(120% 120% at 15% 0%, var(--da-n3), var(--da-n4) 60%, #0b0716); }
.da-plan h3 { margin: 0 0 12px; }
.da-plan__price { margin: 24px 0 0; font-size: 28px; font-weight: 300; }
.da-band { padding: clamp(28px, 4vw, 56px); border-radius: var(--da-r-card); background: var(--da-panel); }
/* Comments */
.da-comments { margin-top: 72px; }
.da-comments__title { font-size: 32px; margin-bottom: 24px; }
.da-comments__list { list-style: none; margin: 0 0 32px; padding: 0; }
.da-comments .comment-body { padding: 20px 0; border-top: 1px solid var(--da-line); }
.da-comments input[type="text"], .da-comments input[type="email"], .da-comments input[type="url"], .da-comments textarea {
width: 100%; padding: 14px 18px; border: 1px solid var(--da-line); border-radius: 16px; background: var(--da-panel); color: var(--da-text); font: 400 16px var(--da-font-body);
}
.da-comments .submit { min-height: 56px; padding: 0 30px; border: 0; border-radius: 999px; background: var(--da-accent); color: var(--da-on-accent); font: 600 15px var(--da-font-body); cursor: pointer; }
/* ---------- Services page ---------- */
.da-servicelist { display: flex; flex-direction: column; gap: 24px; }
.da-servicerow {
display: grid; grid-template-columns: 120px minmax(0, 1fr) minmax(0, 440px); gap: 32px;
padding: clamp(24px, 3vw, 40px); border-radius: var(--da-r-card); background: var(--da-panel);
}
.da-servicerow__num { font: 400 13px var(--da-font-mono); color: var(--da-accent); }
.da-servicerow__main { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.da-servicerow__title { font-size: calc(clamp(34px, 4.2vw, 60px) * var(--da-scale)); line-height: 1; letter-spacing: -0.04em; }
.da-servicerow__text { max-width: 420px; color: var(--da-muted); font-size: 17px; line-height: 1.55; }
.da-servicerow__text p:last-child { margin-bottom: 0; }
.da-servicerow__list .da-label { margin-bottom: 12px; }
.da-servicerow__list ul { list-style: none; margin: 0; padding: 0; }
.da-servicerow__list li { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 52px; border-bottom: 1px solid var(--da-line); }
.da-servicerow__list li:last-child { border-bottom: 0; }
.da-servicerow__list li span:last-child { color: var(--da-muted); }
.da-flight__steps { list-style: none; margin: clamp(40px, 5vw, 72px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.da-flight__steps li { border-top: 1px solid var(--da-ink); padding-top: 20px; }
.da-flight__n {
margin-top: 40px; font-family: var(--da-font-head); font-weight: 200; font-size: calc(clamp(64px, 6.7vw, 96px) * var(--da-scale));
line-height: 0.9; letter-spacing: -0.06em; color: color-mix(in srgb, var(--da-ink) 42%, var(--da-light));
}
.da-flight__steps h3 { margin: 16px 0 0; font-size: 32px; line-height: 1; }
.da-flight__steps p { margin: 10px 0 0; color: var(--da-muted-ink); font-size: 16px; }
/* ---------- Contact page ---------- */
.da-light-top { background: var(--da-light); color: var(--da-ink); --da-field-bg: var(--da-light); --da-field-fg: var(--da-ink); }
.da-light-top .da-label { color: var(--da-muted-ink); }
.da-light-top .da-label--ink { color: var(--da-ink); }
.da-light-top .da-footer .da-label, .da-light-top .da-menu .da-label { color: var(--da-muted); }
.da-contact { padding: calc(var(--da-header-h) + 32px) 0 clamp(56px, 8vw, 96px); }
.da-contact__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 640px); gap: clamp(32px, 6vw, 88px); }
.da-contact__left { display: flex; flex-direction: column; justify-content: space-between; gap: 56px; }
.da-contact__title { margin: 24px 0 0; font-size: calc(clamp(88px, 18.3vw, 264px) * var(--da-scale)); line-height: 0.82; letter-spacing: -0.06em; }
.da-contact__intro { margin-top: 32px; max-width: 480px; }
.da-contact__details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 40px; margin: 0; padding-top: 32px; border-top: 1px solid var(--da-ink); }
.da-contact__details dd { margin: 10px 0 0; font-family: var(--da-font-head); font-weight: var(--da-head-weight); font-size: calc(clamp(22px, 2vw, 28px) * var(--da-scale)); letter-spacing: -0.03em; word-break: break-word; }
.da-contact__details a { text-decoration: none; border-bottom: 1px solid var(--da-ink); }
.da-contact__form { padding: clamp(24px, 3vw, 44px); border-radius: calc(var(--da-r-card) * 1.1); background: var(--da-paper); color: var(--da-ink); align-self: start; }
.da-contact__formtitle { font-size: calc(clamp(32px, 3.2vw, 44px) * var(--da-scale)); margin-bottom: 24px; }
.da-contact__book { margin: 20px 0 0; font-size: 14px; color: var(--da-muted-ink); }
.da-contact__book a { color: var(--da-ink); }
/* Forms (built-in + form plugins) */
.da-form p, .da-form fieldset { margin: 0 0 22px; }
.da-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.da-form label, .da-form legend { display: block; margin-bottom: 8px; padding: 0; font: 400 12px var(--da-font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--da-muted-ink); }
.da-form input[type="text"], .da-form input[type="email"], .da-form select, .da-form textarea,
.da-form-plugin input[type="text"], .da-form-plugin input[type="email"], .da-form-plugin input[type="tel"], .da-form-plugin input[type="url"], .da-form-plugin input[type="number"],
.da-form-plugin select, .da-form-plugin textarea {
width: 100%; padding: 0 20px; height: 56px; border: 1px solid transparent; border-radius: 16px;
background: var(--da-field-bg); color: var(--da-field-fg); font: 400 16px var(--da-font-body);
}
.da-form textarea, .da-form-plugin textarea { height: 150px; padding: 16px 20px; resize: vertical; }
.da-form-plugin label, .da-form-plugin .wpforms-field-label, .da-form-plugin .ff-el-input--label label, .da-form-plugin .gfield_label {
font: 400 12px var(--da-font-mono) !important; letter-spacing: 0.1em; text-transform: uppercase; color: var(--da-muted-ink) !important;
}
.da-form-plugin button[type="submit"], .da-form-plugin input[type="submit"], .da-form-plugin .wpforms-submit, .da-form-plugin .ff-btn-submit {
min-height: 56px; padding: 0 32px !important; border: 0 !important; border-radius: 999px !important;
background: var(--da-ink) !important; color: var(--da-light) !important; font: 600 15px var(--da-font-body) !important; cursor: pointer;
}
.da-form__chips { border: 0; padding: 0; }
.da-form__chips { display: flex; flex-wrap: wrap; gap: 10px; }
.da-form__chips legend { width: 100%; }
.da-form__chips label { position: relative; margin: 0; }
.da-form__chips input { position: absolute; opacity: 0; }
.da-form__chips label span {
display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px; border: 1px solid var(--da-line-ink); border-radius: 999px;
font: 400 15px var(--da-font-body); letter-spacing: 0; text-transform: none; color: var(--da-ink); cursor: pointer;
}
.da-form__chips input:checked + span { background: var(--da-ink); border-color: var(--da-ink); color: var(--da-light); }
.da-form__chips input:focus-visible + span { outline: 2px solid var(--da-ink); outline-offset: 2px; }
.da-form__actions { margin: 6px 0 0 !important; }
/* 404 */
.da-404__inner { padding-top: calc(var(--da-header-h) + 64px); padding-bottom: 120px; }
.da-404__text { margin: 24px 0 32px; font-size: 20px; color: var(--da-muted); }
/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
.da-hero__social { display: none; }
}
@media (max-width: 1000px) {
.da-header { grid-template-columns: 1fr auto; }
.da-header > .da-status, .da-header > span { display: none; }
.da-hero { grid-template-columns: minmax(0, 1fr); padding-bottom: calc(var(--da-r-panel) + 56px); }
.da-hero__art { justify-content: center; }
.da-visor, .da-photo { width: min(100%, 440px); }
.da-hud { display: none; }
.da-badge { right: 4%; }
.da-brief__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.da-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.da-servicerow { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.da-flight__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.da-footer__top { grid-template-columns: minmax(0, 1fr); }
.da-footer__cols { padding-top: 0; }
.da-contact__grid { grid-template-columns: minmax(0, 1fr); }
.da-hangar__card { flex-direction: column; }
.da-hangar__side { align-self: stretch; width: 100%; }
.da-hangar__orb { right: -6%; top: -4%; }
.da-plans { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
body { font-size: 16px; }
.da-menu { grid-template-columns: minmax(0, 1fr); }
.da-menu__aside { padding-block: 40px 120px; }
.da-menu__list a { gap: 14px; }
.da-menu__list a::before { width: 28px; }
.da-grid--2, .da-grid--3, .da-servicegrid { grid-template-columns: minmax(0, 1fr); }
.da-project__media, .da-project--hero .da-project__media, .da-project--featured .da-project__media { aspect-ratio: 1 / 1.05; min-height: 0; }
.da-project__feat { max-width: calc(100% - 40px); }
.da-words__label { position: static; margin-bottom: 24px; }
.da-workbody { grid-template-columns: minmax(0, 1fr); }
.da-flight__steps { grid-template-columns: minmax(0, 1fr); }
.da-form__row { grid-template-columns: minmax(0, 1fr); }
.da-contact__details { grid-template-columns: minmax(0, 1fr); }
.da-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.da-footer__bar { padding-block: 20px; }
.da-nl__row { flex-direction: column; }
.da-nl input[type="email"], .da-nl .da-btn { width: 100%; }
.da-pagehead__tools { flex-direction: column; align-items: flex-start; }
.da-search input[type="search"] { width: 100%; }
.da-search { width: 100%; }
.da-dock { bottom: 14px; padding: 4px; font-size: 10px; }
.da-dock a, .da-dock__menu { padding: 0 12px; }
.da-dock__list li:nth-child(n+4) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.da-badge__ring { animation: none; }
* { transition-duration: 0.01ms !important; }
}
/* ==========================================================================
Motion. Levels: full (default) / subtle / off (body.da-motion-*)
One-shot entrances use `backwards` fill so they leave no residue after playing.
========================================================================== */
@keyframes da-fade-up { from { opacity: 0; transform: translateY(28px); } }
@keyframes da-fade-down { from { opacity: 0; transform: translateY(-18px); } }
@keyframes da-rise { from { transform: translateY(108%); } }
@keyframes da-visor-in { from { opacity: 0; transform: scale(0.86) rotate(-6deg); } }
@keyframes da-dock-in { from { opacity: 0; transform: translate(-50%, 160%); } }
@keyframes da-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }
@keyframes da-pulse { 0%, 100% { scale: 1; } 50% { scale: 1.14; } }
@keyframes da-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
/* Headline lines slide up out of a mask */
.da-line { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.da-line__in { display: block; }
.da-l0 { --l: 0; } .da-l1 { --l: 1; } .da-l2 { --l: 2; } .da-l3 { --l: 3; } .da-l4 { --l: 4; } .da-l5 { --l: 5; }
body:not(.da-motion-off) .da-hero__title .da-line__in { animation: da-rise 1.1s var(--da-ease) calc(var(--l) * 110ms + 150ms) backwards; }
.da-lines-anim .da-line__in { transform: translateY(108%); transition: transform 1.1s var(--da-ease); transition-delay: calc(var(--l) * 110ms); }
.da-lines-anim.is-in .da-line__in { transform: none; }
/* Page-load entrances */
body:not(.da-motion-off) .da-header { animation: da-fade-down 0.9s var(--da-ease) backwards; }
body:not(.da-motion-off) .da-dock { animation: da-dock-in 0.9s var(--da-ease) 0.8s backwards; }
body:not(.da-motion-off) :is(.da-reel, .da-hero__text) { animation: da-fade-up 0.9s var(--da-ease) 0.55s backwards; }
body:not(.da-motion-off) .da-hero__cta { animation: da-fade-up 0.9s var(--da-ease) 0.7s backwards; }
body:not(.da-motion-off) :is(.da-visor, .da-photo) { animation: da-visor-in 1.3s var(--da-ease) 0.2s backwards; }
body:not(.da-motion-off) :is(.da-hud, .da-badge, .da-hero__social) { animation: da-fade-up 1s var(--da-ease) 1s backwards; }
body:not(.da-motion-off) .da-pagehead__label { animation: da-fade-up 0.8s var(--da-ease) 0.05s backwards; }
body:not(.da-motion-off) .da-pagehead__title { animation: da-fade-up 1s var(--da-ease) 0.12s backwards; }
body:not(.da-motion-off) :is(.da-pagehead__aside, .da-pagehead__tools, .da-contact__intro) { animation: da-fade-up 0.9s var(--da-ease) 0.35s backwards; }
body:not(.da-motion-off) .da-contact__title { animation: da-fade-up 1s var(--da-ease) 0.12s backwards; }
body:not(.da-motion-off) .da-contact__form { animation: da-fade-up 1s var(--da-ease) 0.3s backwards; }
/* Ambient life (full only) */
.da-motion-full .da-visor { animation: da-visor-in 1.3s var(--da-ease) 0.2s backwards, da-float 9s ease-in-out 1.5s infinite; }
.da-motion-full .da-visor__sun { animation: da-pulse 4.5s ease-in-out infinite; }
.da-motion-full .da-visor__star { animation: da-twinkle 3.2s ease-in-out infinite; }
.da-motion-full .da-visor__star--2 { animation-delay: 1.1s; }
.da-motion-full .da-visor__star--3 { animation-delay: 2s; }
/* Mouse tilt + parallax (JS sets --mx / --my in -1..1, and --sy scroll) */
.da-motion-full .da-hero__art {
transform: perspective(1200px) rotateY(calc(var(--mx, 0) * 7deg)) rotateX(calc(var(--my, 0) * -5deg));
translate: 0 calc(min(var(--sy, 0), 900) * -0.06px);
transition: transform 0.5s var(--da-ease);
}
.da-motion-full .da-visor__planet { translate: calc(var(--mx, 0) * -22px) calc(var(--my, 0) * -14px); transition: translate 0.5s var(--da-ease); }
.da-motion-full .da-visor__sun { translate: calc(var(--mx, 0) * 26px) calc(var(--my, 0) * 18px); }
.da-motion-full .da-visor__shine { translate: calc(var(--mx, 0) * -34px) calc(var(--my, 0) * -20px); transition: translate 0.5s var(--da-ease); }
.da-motion-full .da-hero__copy { translate: 0 calc(min(var(--sy, 0), 900) * 0.05px); }
.da-motion-full .da-words__w { translate: calc(var(--wp, 0) * -7vw) 0; }
.da-motion-full .da-words__w--outline { translate: calc(var(--wp, 0) * 7vw) 0; }
/* Scroll reveal (classes are added by JS to elements below the fold) */
.da-anim { opacity: 0; transform: translate3d(0, 44px, 0); transition: opacity 0.9s var(--da-ease), transform 0.9s var(--da-ease); transition-delay: calc(var(--i, 0) * 90ms); }
.da-anim.is-in { opacity: 1; transform: none; }
.da-anim :is(.da-art, .da-project__img, .da-card__img, .da-post__img) { scale: 1.12; transition: scale 1.6s var(--da-ease); }
.da-anim.is-in :is(.da-art, .da-project__img, .da-card__img, .da-post__img) { scale: 1; }
.da-art { transition: scale 1.2s var(--da-ease); }
.da-project:hover .da-art, .da-card:hover .da-art, .da-post__link:hover .da-art { scale: 1.05; }
/* Scroll progress bar */
.da-progress { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 120; pointer-events: none; }
.admin-bar .da-progress { top: 32px; }
@media (max-width: 782px) { .admin-bar .da-progress { top: 46px; } }
.da-progress span { display: block; height: 100%; background: var(--da-accent); transform-origin: 0 50%; transform: scaleX(var(--sp, 0)); }
/* Ticker strip */
.da-ticker {
position: relative; z-index: 2; overflow: hidden; margin: clamp(32px, 5vw, 72px) -3vw clamp(8px, 2vw, 32px);
padding: clamp(14px, 1.6vw, 22px) 0; background: var(--da-accent); color: var(--da-on-accent); transform: rotate(-1.6deg);
}
.da-ticker__track { display: flex; width: max-content; will-change: transform; }
.da-ticker__group { display: flex; flex: none; }
.da-ticker__item {
display: inline-flex; align-items: center; gap: clamp(20px, 2.4vw, 36px); padding-right: clamp(20px, 2.4vw, 36px); white-space: nowrap;
font-family: var(--da-font-head); font-weight: var(--da-head-weight); font-size: calc(clamp(26px, 3.3vw, 48px) * var(--da-scale)); line-height: 1.1; letter-spacing: -0.03em;
}
.da-ticker__item::after { content: ""; flex: none; width: 0.3em; height: 0.3em; border-radius: 50%; background: currentColor; }
/* Buttons: colour sweeps up on hover; magnetic pull is added by JS */
.da-btn { position: relative; overflow: hidden; isolation: isolate; }
.da-btn::before {
content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; background: var(--sweep, var(--da-text));
transform: translateY(102%); transition: transform 0.5s var(--da-ease);
}
.da-btn:hover::before, .da-btn:focus-visible::before { transform: none; }
.da-btn--primary { --sweep: var(--da-text); }
.da-btn--primary:hover { color: var(--da-dark); }
.da-btn--outline { --sweep: var(--da-text); }
.da-btn--outline:hover { background: transparent; color: var(--da-dark); }
.da-btn--ink { --sweep: var(--da-accent); }
.da-btn--ink:hover { color: var(--da-on-accent); }
.da-mag { transition: translate 0.4s var(--da-ease); }
/* Circle arrows: the arrow flies out top-right while a new one arrives from bottom-left */
.da-arrow { position: relative; overflow: hidden; }
.da-arrow:hover { opacity: 1; }
.da-arrow svg { transition: transform 0.5s var(--da-ease); }
.da-arrow::after {
content: ""; position: absolute; inset: 0; background: currentColor; transform: translate(-110%, 110%); transition: transform 0.5s var(--da-ease);
-webkit-mask: url("data:image/svg+xml;utf8,") center / 38% no-repeat;
mask: url("data:image/svg+xml;utf8,") center / 38% no-repeat;
}
.da-arrow:hover svg, .da-project:hover .da-arrow svg, .da-card:hover .da-arrow svg { transform: translate(110%, -110%); }
.da-arrow:hover::after, .da-project:hover .da-arrow::after, .da-card:hover .da-arrow::after { transform: none; }
.da-project:hover .da-arrow, .da-card:hover .da-arrow { background: var(--da-accent); color: var(--da-on-accent); }
/* Links, chips, cards, menu, footer hover hooks */
.da-link { border-bottom: 0; background: linear-gradient(currentColor, currentColor) 100% 100% / 100% 1px no-repeat; transition: background-size 0.5s var(--da-ease); }
.da-link:hover { opacity: 1; background-size: 0 1px; background-position: 0 100%; }
.da-chip { transition: background 0.3s, color 0.3s, border-color 0.3s; }
.da-chip:hover { background: var(--da-text); color: var(--da-dark); }
.da-reel__icon { transition: background 0.3s, color 0.3s, scale 0.4s var(--da-ease); }
.da-reel:hover { opacity: 1; }
.da-reel:hover .da-reel__icon { background: var(--da-accent); color: var(--da-on-accent); scale: 1.1; }
.da-service { transition: background 0.4s, color 0.4s, translate 0.5s var(--da-ease); }
.da-service:hover { background: var(--da-accent); color: var(--da-on-accent); translate: 0 -8px; }
.da-service:hover .da-service__text { color: inherit; }
.da-servicerow { transition: background 0.4s; }
.da-servicerow:hover { background: color-mix(in srgb, var(--da-panel) 88%, var(--da-text)); }
.da-servicerow__list li { transition: padding 0.3s var(--da-ease); }
.da-servicerow__list li:hover { padding-left: 12px; }
.da-dock a:hover, .da-dock__menu:hover { opacity: 1; background: color-mix(in srgb, var(--da-text) 16%, transparent); }
.da-dock__list .current-menu-item > a:hover { background: var(--da-text); }
.da-dock__menu:hover { background: var(--da-text); color: var(--da-dark); }
.da-menu__list a { transition: translate 0.5s var(--da-ease), color 0.3s, opacity 0.3s; }
.da-menu__list a:hover { opacity: 1; translate: 24px 0; color: var(--da-accent); }
.da-menu__list:hover a:not(:hover) { opacity: 0.35; }
.da-footer__list a, .da-footer .da-menu-list a { transition: translate 0.4s var(--da-ease), color 0.3s; }
.da-footer__list a:hover, .da-footer .da-menu-list a:hover { opacity: 1; translate: 8px 0; color: var(--da-accent); }
.da-postnav a, .da-tags a { transition: background 0.3s, color 0.3s; }
.da-tags a:hover { background: var(--da-text); color: var(--da-dark); opacity: 1; }
.da-form input:focus, .da-form select:focus, .da-form textarea:focus, .da-nl input:focus { outline: 2px solid var(--da-accent); outline-offset: 2px; }
.da-light-top .da-form input:focus, .da-light-top .da-form select:focus, .da-light-top .da-form textarea:focus { outline-color: var(--da-ink); }
/* Menu overlay: staggered entrance */
.da-menu::before { scale: 0.6; opacity: 0; transition: scale 1.4s var(--da-ease), opacity 0.9s; }
.da-menu::after { scale: 0.4; opacity: 0; transition: scale 1.4s var(--da-ease) 0.1s, opacity 0.9s 0.1s; }
.da-menu.is-open::before, .da-menu.is-open::after { scale: 1; opacity: 1; }
.da-menu__list li:nth-child(1) { --n: 0; } .da-menu__list li:nth-child(2) { --n: 1; } .da-menu__list li:nth-child(3) { --n: 2; }
.da-menu__list li:nth-child(4) { --n: 3; } .da-menu__list li:nth-child(5) { --n: 4; } .da-menu__list li:nth-child(6) { --n: 5; }
.da-menu__list li:nth-child(7) { --n: 6; } .da-menu__list li:nth-child(8) { --n: 7; }
.da-menu.is-open .da-menu__list li { animation: da-fade-up 0.9s var(--da-ease) calc(var(--n, 0) * 75ms + 120ms) backwards; }
.da-menu.is-open .da-menu__aside { animation: da-fade-up 0.9s var(--da-ease) 0.55s backwards; }
/* Cursor follower over projects and posts */
.da-cursor {
position: fixed; left: 0; top: 0; z-index: 200; display: flex; align-items: center; justify-content: center; width: 96px; height: 96px; margin: -48px 0 0 -48px;
border-radius: 50%; background: var(--da-accent); color: var(--da-on-accent); pointer-events: none;
font: 500 12px var(--da-font-mono); letter-spacing: 0.1em; text-transform: uppercase; scale: 0; transition: scale 0.35s var(--da-ease);
}
.da-cursor.on { scale: 1; }
/* Levels */
.da-motion-subtle :is(.da-visor, .da-visor__sun, .da-visor__star) { animation: none; }
.da-no-motion *, .da-no-motion *::before, .da-no-motion *::after { animation: none !important; transition: none !important; }
.da-no-motion .da-anim { opacity: 1; transform: none; }
.da-no-motion .da-lines-anim .da-line__in { transform: none; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
.da-anim { opacity: 1 !important; transform: none !important; }
.da-lines-anim .da-line__in { transform: none !important; }
}
@media (hover: none) { .da-cursor { display: none; } }