/* ===== fonts.css ===== */
/* ============================================================================
CECICAPTURE – typefaces, self-hosted (28.09.2026, after a side-by-side test
of Noto Serif Display, STIX Two Text, Source Serif 4 and Literata on the
real pages)
STIX Two Text – every serif line: titles, the menu, the large reading
text. The face of Tsvetan's own Matcha mock-up; a text face, so it
stays clear in Cyrillic at small sizes too.
Inter – running text, labels, buttons, forms.
Both under the SIL Open Font License; the licences sit next to the files
in /public/fonts. Subset to Latin and Cyrillic. Nothing is fetched from
Google.
========================================================================== */
@font-face {
font-family: "STIX Two Text";
src: url("/fonts/stix-two-text.woff") format("woff");
font-weight: 400 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "STIX Two Text";
src: url("/fonts/stix-two-text-italic.woff") format("woff");
font-weight: 400 500;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Inter";
src: url("/fonts/inter.woff") format("woff");
font-weight: 400 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Inter";
src: url("/fonts/inter-italic.woff") format("woff");
font-weight: 400;
font-style: italic;
font-display: swap;
}
/* ===== tokens.css ===== */
/* ============================================================================
CECICAPTURE – design tokens
One place for every colour, size, rhythm and easing on the site.
Nothing below this file should contain a hard-coded hex or a magic number.
========================================================================== */
:root {
/* --- Surface ------------------------------------------------------------ */
/* Paper is the pale sky of the oak photograph on the home page, so the
page and the photograph read as one surface (from v8, 26.09.2026). */
--paper: #edeee1; /* the page */
--paper-warm: #e3e6d9; /* alternating band */
--paper-deep: #d8ddcd; /* pressed / hover on light */
--forest: #232c21; /* the dark rooms: footer, extras, connect;
also the header once the page scrolls */
--forest-lift: #2d3829; /* raised surface inside a dark room */
/* --- Ink ---------------------------------------------------------------- */
/* Black text, as in the Matcha style guide (27.09.2026) – the old warm
greys were too faint to read comfortably. */
--ink: #000000;
--ink-soft: #23251f;
--muted: #55564c;
--muted-light: #77786c;
--on-dark: #efeade;
--on-dark-mid: rgba(239, 234, 222, 0.68);
--on-dark-dim: rgba(239, 234, 222, 0.42);
/* --- Accent – used only for hairlines, focus and hover. Never for text. -- */
--accent: #8a7550;
--accent-soft: rgba(138, 117, 80, 0.22);
/* Warm accent for a word or two in the large titles (from Tsvetan's own
Matcha mock-up, 28.09.2026) – never for body text. */
--accent-warm: #d4652c;
/* --- Lines -------------------------------------------------------------- */
--line: rgba(32, 34, 29, 0.16);
--line-soft: rgba(32, 34, 29, 0.08);
--line-dark: rgba(239, 234, 222, 0.22);
--line-dark-soft: rgba(239, 234, 222, 0.12);
/* --- Type --------------------------------------------------------------- */
/* One serif for headings, one sans for everything else (see fonts.css).
Both have Cyrillic and are free (SIL Open Font License). */
--serif: "STIX Two Text", Georgia, "Times New Roman", serif;
--sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
/* One scale of seven sizes for the whole site. They are used in one file
only – type.css – where each size belongs to exactly one text role
(series 15d). The gift card, which scales with its own container, and the
404 number are the only exceptions. */
--fs-label: 0.75rem; /* 12 – capitals: eyebrows, nav, buttons, legal */
--fs-small: 0.9375rem; /* 15 – notes, captions, hints, legal lines */
--fs-body: clamp(1rem, 0.97rem + 0.12vw, 1.0625rem); /* 16–17 – text */
--fs-lead: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem); /* 18–21 – intros, quotes */
--fs-h3: clamp(1.375rem, 1.2rem + 0.75vw, 1.875rem); /* 22–30 – card and block titles */
--fs-h2: clamp(2rem, 1.45rem + 2.1vw, 3.5rem); /* 32–56 – section titles */
--fs-h1: clamp(2.75rem, 1.9rem + 3.6vw, 5.5rem); /* 44–88 – page titles, the big words */
/* old names, kept as aliases */
--fs-micro: var(--fs-label);
--fs-h4: var(--fs-h3);
--fs-display: var(--fs-h1);
--track-label: 0.1em; /* letter-spacing for uppercase labels */
--track-nav: 0.15em;
/* --- Rhythm ------------------------------------------------------------- */
--wrap: 1520px;
--wrap-text: 68ch;
--gutter: clamp(20px, 4.6vw, 76px);
--section: clamp(64px, 8vw, 128px);
--section-tight: clamp(52px, 6.5vw, 104px);
--header-h: 76px;
--header-h-compact: 60px; /* once the page has scrolled */
/* --- Motion ------------------------------------------------------------- */
--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--dur-fast: 0.28s;
--dur: 0.5s;
--dur-slow: 0.9s;
--dur-reveal: 1.15s;
--z-header: 120;
--z-menu: 130;
--z-lightbox: 200;
--z-consent: 210;
}
@media (max-width: 820px) {
:root { --header-h: 64px; --header-h-compact: 56px; }
}
/* ===== base.css ===== */
/* ============================================================================
CECICAPTURE – base
Reset, typography, layout primitives and the small set of reusable controls.
Class names are global and BEM-flavoured on purpose: the same stylesheet
dresses the Astro build and the static previews.
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
/* The attribute must win over any display rule a component sets. */
[hidden] { display: none !important; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: calc(var(--header-h) + 24px);
}
body {
margin: 0;
background: var(--paper);
color: var(--ink);
font-family: var(--sans); /* reading text; the serif is for headings only */
font-size: var(--fs-body);
font-weight: 400;
line-height: 1.65;
letter-spacing: 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5 {
margin: 0;
}
p { margin: 0; }
img, picture, video, svg { display: block; max-width: 100%; }
figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select {
font: inherit;
color: inherit;
letter-spacing: inherit;
}
::selection { background: var(--forest); color: var(--on-dark); }
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
border-radius: 2px;
}
/* --- Layout primitives ---------------------------------------------------- */
.wrap {
width: 100%;
max-width: var(--wrap);
margin-inline: auto;
padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 1100px; }
.wrap--text { max-width: 800px; }
.wrap--full { max-width: none; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.section--tight { padding-block: var(--section-tight); }
.section--top { padding-top: var(--section); }
.section--bottom{ padding-bottom: var(--section); }
.band--warm { background: var(--paper-warm); }
.band--dark { background: var(--forest); color: var(--on-dark); }
.band--dark h1, .band--dark h2, .band--dark h3 { color: var(--on-dark); }
.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }
.rule--dark { border-top-color: var(--line-dark); }
.visually-hidden {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
position: absolute; left: -9999px; top: 0; z-index: 999;
background: var(--forest); color: var(--on-dark);
padding: 14px 22px;
}
.skip-link:focus { left: 0; }
/* --- Type helpers --------------------------------------------------------- */
.eyebrow {
color: var(--ink-soft);
margin: 0;
}
.band--dark .eyebrow { color: var(--on-dark-dim); }
/* A numbered eyebrow: "01 – SELECTED WORK" */
.eyebrow--numbered { display: inline-flex; align-items: baseline; gap: 12px; }
.eyebrow--numbered::before {
content: attr(data-num);
color: var(--accent);
font-variant-numeric: tabular-nums;
}
.lead {
color: var(--ink-soft);
}
.band--dark .lead { color: var(--on-dark-mid); }
.prose { max-width: var(--wrap-text); }
.prose > * + * { margin-top: 1.4em; }
.prose h2 { margin-top: 1.9em; }
.prose h3 {
margin-top: 2.2em; }
.prose p { color: var(--ink-soft); }
.prose a { border-bottom: 1px solid var(--accent-soft); transition: border-color var(--dur-fast) var(--ease); }
.prose a:hover { border-bottom-color: var(--accent); }
.prose ul { list-style: none; }
.prose li { position: relative; padding-left: 22px; color: var(--ink-soft); }
.prose li + li { margin-top: 0.5em; }
.prose li::before {
content: ""; position: absolute; left: 0; top: 0.72em;
width: 10px; height: 1px; background: var(--accent);
}
.prose blockquote {
border-left: 1px solid var(--accent);
padding-left: 28px; margin-left: 0;
color: var(--ink);
}
.pull-quote {
max-width: 22ch;
}
/* --- Controls ------------------------------------------------------------- */
/* The site's signature link: a word, a hairline, and an arrow that travels. */
.label-link {
display: inline-flex;
align-items: center;
gap: 12px;
padding-bottom: 6px;
position: relative;
color: var(--ink);
}
.label-link::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0;
height: 1px; background: var(--line);
}
.label-link::before {
content: ""; position: absolute; left: 0; bottom: 0;
height: 1px; width: 0; background: var(--ink);
transition: width var(--dur) var(--ease-out);
z-index: 1;
}
.label-link:hover::before { width: 100%; }
.label-link .arrow { transition: transform var(--dur) var(--ease-out); }
.label-link:hover .arrow { transform: translate(4px, -4px); }
.band--dark .label-link { color: var(--on-dark); }
.band--dark .label-link::after { background: var(--line-dark); }
.band--dark .label-link::before { background: var(--on-dark); }
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 16px 34px;
border: 1px solid var(--line);
border-radius: 999px;
background: transparent;
color: var(--ink);
cursor: pointer;
position: relative;
overflow: hidden;
isolation: isolate;
transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn::before {
content: ""; position: absolute; inset: 0; z-index: -1;
background: var(--forest);
transform: translateY(101%);
transition: transform var(--dur) var(--ease-out);
}
.btn:hover { color: var(--on-dark); border-color: var(--forest); }
.btn:hover::before { transform: translateY(0); }
.btn--solid { background: var(--forest); color: var(--on-dark); border-color: var(--forest); }
.btn--solid::before { background: var(--paper); }
.btn--solid:hover { color: var(--ink); }
.btn--on-dark { border-color: var(--line-dark); color: var(--on-dark); }
.btn--on-dark::before { background: var(--on-dark); }
.btn--on-dark:hover { color: var(--forest); border-color: var(--on-dark); }
.arrow { display: inline-block; line-height: 1; }
/* --- Media ---------------------------------------------------------------- */
.media {
position: relative;
overflow: hidden;
background: var(--paper-deep);
}
.media img { width: 100%; height: 100%; object-fit: cover; }
/* A slow, barely-there push on hover. Premium is restraint. */
.media--zoom img { transition: transform 1.4s var(--ease-out); will-change: transform; }
a:hover .media--zoom img,
.media--zoom:hover img { transform: scale(1.035); }
.media__caption {
margin-top: 14px;
color: var(--muted);
}
/* --- Grid helpers --------------------------------------------------------- */
.grid { display: grid; gap: clamp(16px, 2.2vw, 34px); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) {
.grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
.grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}
/* A section header: eyebrow left, optional link right, hairline under. */
.section-head {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 28px;
flex-wrap: wrap;
margin-bottom: clamp(30px, 4vw, 60px);
}
.section-head__title { max-width: 22ch; margin-top: 14px; }
/* ===== components.css ===== */
/* ============================================================================
CECICAPTURE – components
Chrome (header, footer, consent), then page furniture (hero, galleries,
packages, journal, forms). Every block is prefixed so nothing collides.
========================================================================== */
/* ==========================================================================
HEADER
========================================================================== */
.hdr {
position: fixed;
inset: 0 0 auto;
z-index: var(--z-header);
color: var(--ink);
background: rgba(237, 238, 225, 0.92);
backdrop-filter: saturate(140%) blur(14px);
border-bottom: 1px solid transparent;
transition: color var(--dur) var(--ease), background var(--dur) var(--ease),
border-color var(--dur) var(--ease);
}
.hdr[data-tone="light"] {
color: var(--on-dark);
background: transparent;
backdrop-filter: none;
border-bottom-color: transparent;
text-shadow: 0 1px 18px rgba(0, 0, 0, 0.28);
}
.hdr.is-solid {
color: var(--on-dark);
background: var(--forest);
backdrop-filter: none;
border-bottom-color: var(--line-dark-soft);
text-shadow: none;
}
.hdr.is-open { text-shadow: none; }
.hdr__inner {
height: var(--header-h);
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 24px;
padding-inline: var(--gutter);
transition: height var(--dur) var(--ease);
}
/* Always in view; once the page moves it becomes a shorter bar. With the
menu open it returns to full height, where the menu panel starts. */
.hdr.is-solid .hdr__inner { height: var(--header-h-compact); }
.hdr.is-open .hdr__inner { height: var(--header-h); }
.hdr__start { justify-self: start; display: flex; align-items: center; }
.hdr__actions { display: flex; align-items: center; gap: clamp(16px, 2vw, 30px); justify-self: end; }
.nav-link {
position: relative;
padding-block: 4px;
color: inherit;
white-space: nowrap;
}
.nav-link::after {
content: ""; position: absolute; left: 0; bottom: 0;
width: 0; height: 1px; background: currentColor;
transition: width var(--dur) var(--ease-out);
}
.nav-link:hover::after,
.nav-link[aria-current="page"]::after { width: 100%; }
/* The script logo with "Photography & Storytelling" under it – one mark,
centred. Two copies of the logo (black and paper-white): the one that
suits the background is shown, so it works as a plain ![]()
anywhere. */
.hdr__brand {
justify-self: center;
display: flex; flex-direction: column; align-items: center;
line-height: 1;
white-space: nowrap;
color: inherit;
}
.hdr__logo {
display: block; height: 40px; width: auto;
transition: height var(--dur) var(--ease);
}
.hdr__logo--light { display: none; }
.hdr[data-tone="light"] .hdr__logo--dark,
.hdr.is-solid .hdr__logo--dark { display: none; }
.hdr[data-tone="light"] .hdr__logo--light,
.hdr.is-solid .hdr__logo--light { display: block; }
.hdr.is-solid .hdr__logo { height: 32px; }
.hdr.is-open .hdr__logo { height: 40px; }
.hdr__brand small {
display: block;
font-family: var(--sans);
font-size: var(--fs-label);
letter-spacing: 0.36em;
text-indent: 0.36em;
text-transform: uppercase;
margin-top: 4px;
opacity: 0.7;
font-weight: 500;
transition: opacity var(--dur-fast) var(--ease);
}
.hdr.is-solid:not(.is-open) .hdr__brand small { display: none; }
.hdr__lang { margin-left: clamp(18px, 2.4vw, 34px); padding-left: clamp(18px, 2.4vw, 34px); border-left: 1px solid currentColor;
border-left-color: color-mix(in srgb, currentColor 30%, transparent);
line-height: 1; opacity: 0.7; transition: opacity var(--dur-fast) var(--ease); }
.hdr__lang:hover { opacity: 1; }
.hdr__menu {
border: 0; padding: 8px 0; background: none; cursor: pointer;
display: inline-flex; align-items: center; gap: 12px; color: inherit;
}
.hdr__burger { display: inline-flex; flex-direction: column; gap: 5px; width: 20px; }
.hdr__burger i {
display: block; height: 1px; background: currentColor;
transition: transform var(--dur) var(--ease-out), opacity var(--dur-fast) var(--ease);
}
.hdr.is-open .hdr__burger i:nth-child(1) { transform: translateY(3px) rotate(45deg); }
.hdr.is-open .hdr__burger i:nth-child(2) { opacity: 0; }
.hdr.is-open .hdr__burger i:nth-child(3) { transform: translateY(-3px) rotate(-45deg); }
/* --- "Connect": plain words; the loose ellipse is drawn only on hover ------ */
.hdr__connect {
position: relative; display: inline-flex; align-items: center;
padding: 10px 6px;
white-space: nowrap;
color: inherit;
}
.hdr__connect::before {
content: ""; position: absolute; inset: -2px -18px;
border: 1px solid currentColor; border-radius: 50%;
transform: rotate(-4deg) scale(0.85); opacity: 0;
transition: opacity var(--dur-fast) var(--ease), transform var(--dur) var(--ease-out);
pointer-events: none;
}
.hdr__connect:hover::before, .hdr__connect:focus-visible::before { opacity: 0.7; transform: rotate(-4deg) scale(1); }
/* --- The menu: a dark green panel that drops down under the header -------
Main pages numbered and all one size, as in Matcha; a chevron opens the
sub-list underneath. Journal and Client galleries sit apart, smaller. */
.menu {
position: fixed;
inset: var(--header-h) 0 0;
z-index: var(--z-menu);
background: rgba(20, 22, 17, 0.3);
opacity: 0;
transition: opacity 0.35s var(--ease);
}
.menu.is-open { opacity: 1; }
.menu[hidden] { display: none; }
.menu__panel {
max-height: 100%;
overflow-y: auto;
overscroll-behavior: contain;
background: var(--forest);
color: var(--on-dark);
padding: clamp(18px, 3vw, 40px) var(--gutter) clamp(30px, 4vw, 56px);
clip-path: inset(0 0 100% 0);
transition: clip-path 0.6s var(--ease-out);
}
.menu.is-open .menu__panel { clip-path: inset(0 0 0 0); }
.menu__nav { max-width: var(--wrap); margin-inline: auto; }
.mnav { max-width: 760px; }
.mnav { list-style: none; margin: 0; padding: 0; }
.mnav__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 6px 0; }
.mnav__row .mnav__link { flex: 0 1 auto; }
.mnav__link {
display: flex; align-items: baseline; gap: 0;
padding: 4px 0;
color: var(--on-dark-mid);
transition: color var(--dur-fast) var(--ease);
}
.mnav__num { font-variant-numeric: tabular-nums; font-size: 0.55em; min-width: 2.4em; color: var(--on-dark-dim); align-self: center; }
.mnav__link:hover, .mnav__link[aria-current="page"] { color: var(--on-dark); }
/* The chevron that turns – fine, and close to its line. */
.mnav__toggle {
width: 40px; height: 40px; flex: none;
border: 0; background: none; color: var(--on-dark); cursor: pointer;
display: grid; place-items: center;
}
.mnav__toggle span {
width: 10px; height: 10px;
border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
transform: translateY(-3px) rotate(45deg);
transition: transform var(--dur) var(--ease-out);
}
.mnav__toggle:hover span { transform: translateY(-1px) rotate(45deg); }
.mnav__toggle[aria-expanded="true"] span { transform: translateY(3px) rotate(225deg); }
.mnav__sub {
list-style: none; margin: 0; padding: 4px 0 14px calc(2.4em * 0.55 * 1.55);
display: flex; flex-direction: column; gap: 8px;
}
.mnav__sub[hidden] { display: none; }
.mnav__sub a {
color: var(--on-dark-dim);
transition: color var(--dur-fast) var(--ease);
}
.mnav__sub a:hover { color: var(--on-dark); }
.mnav-more {
list-style: none; margin: clamp(22px, 3vw, 34px) 0 0; padding: 18px 0 0;
border-top: 1px solid var(--line-dark);
display: flex; flex-wrap: wrap; gap: 10px 34px;
}
.mnav-more a {
color: var(--on-dark-mid);
}
.mnav-more a:hover { color: var(--on-dark); }
/* With the menu open the header joins the panel. */
.hdr.is-open { color: var(--on-dark); background: var(--forest); border-bottom-color: var(--line-dark-soft); }
.hdr.is-open .hdr__logo--dark { display: none; }
.hdr.is-open .hdr__logo--light { display: block; }
@media (max-width: 900px) {
.hdr__inner { gap: 14px; }
.hdr__logo, .hdr.is-open .hdr__logo { height: 32px; }
.hdr__brand small { display: none; }
}
@media (max-width: 620px) {
/* On a phone the menu button is the navigation; a second link beside it is
noise, and the language pair is one tap away inside the menu. */
.hdr__connect { display: none; }
.hdr__inner { padding-inline: 20px; }
.menu__panel { padding-inline: 20px; }
.hdr__logo, .hdr.is-open .hdr__logo, .hdr.is-solid .hdr__logo { height: 28px; }
.hdr__menu [data-menu-label] { display: none; }
.hero__content { padding-bottom: clamp(36px, 8vw, 56px); }
.hero__actions { width: 100%; }
.hero__actions .btn { flex: 1 1 auto; justify-content: center; }
}
/* ==========================================================================
FOOTER
========================================================================== */
.ftr { background: var(--forest); color: var(--on-dark); }
.ftr__main { padding: clamp(56px, 6vw, 96px) var(--gutter) clamp(44px, 5vw, 70px);
max-width: var(--wrap); margin-inline: auto; }
.ftr__grid {
display: grid;
grid-template-columns: 1.3fr 0.8fr 1fr;
gap: clamp(28px, 4vw, 70px);
}
.ftr__buttons { gap: 30px; padding-left: 16px; }
.ftr__col { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.ftr__col p { color: var(--on-dark-mid); line-height: 1.9; }
.ftr__col .ftr__dim { color: var(--on-dark-dim); margin-top: 8px; }
/* The pages: two quiet columns, no section titles. */
.ftr__links {
display: grid;
grid-template-columns: repeat(2, max-content);
grid-template-rows: repeat(var(--rows, 4), auto);
grid-auto-flow: column;
gap: 12px clamp(28px, 4vw, 64px);
align-content: start;
}
.ftr__col a,
.ftr__links a {
justify-self: start;
color: var(--on-dark); border-bottom: 1px solid transparent; padding-bottom: 2px;
transition: border-color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.ftr__col a:hover,
.ftr__links a:hover { border-bottom-color: currentColor; }
/* Profiles as icons (official glyphs in public/brand/icons/), or their names
until the files are there. */
.ftr__social { display: flex; align-items: center; gap: 18px; margin-top: 18px; flex-wrap: wrap; }
.ftr__col .ftr__icon { border-bottom: 0; padding: 0; line-height: 0; opacity: 0.8; }
.ftr__col .ftr__icon:hover { opacity: 1; }
.ftr__icon { display: inline-flex; color: var(--on-dark); }
.ftr__col .ftr__icon:hover { opacity: 0.7; }
.ftr__col .ftr__icon--text { line-height: 1.4; color: var(--on-dark-mid); }
/* The bar: the logo on the left, the copyright in the middle, the legal pages on the right. */
.ftr__bar {
border-top: 1px solid var(--line-dark-soft);
padding: 22px var(--gutter) 26px;
display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px 34px;
}
.ftr__logo img { width: clamp(110px, 10vw, 150px); height: auto; }
.ftr__copy {
max-width: 78ch; margin: 0;
line-height: 1.9;
color: var(--on-dark-mid);
text-align: center; text-wrap: balance;
}
.ftr__legal { display: flex; justify-content: flex-end; gap: 8px 22px; flex-wrap: wrap; white-space: nowrap; }
.ftr__legal a, .ftr__legal button {
color: var(--on-dark-mid);
background: none; border: 0; padding: 0; cursor: pointer;
transition: color var(--dur-fast) var(--ease);
}
.ftr__legal a:hover, .ftr__legal button:hover { color: var(--on-dark); }
@media (max-width: 950px) {
.ftr__grid { grid-template-columns: 1fr 1fr; }
.ftr__links { grid-column: 1 / -1; }
.ftr__bar { grid-template-columns: 1fr; justify-items: center; }
.ftr__legal { justify-content: center; }
}
@media (max-width: 560px) {
.ftr__grid { grid-template-columns: 1fr; gap: 34px; }
}
/* ==========================================================================
HERO
========================================================================== */
.hero { position: relative; height: 100svh; min-height: 560px; background: #141815; overflow: hidden; }
.hero__media { position: absolute; inset: 0; }
/* is an inline box by default, so it has to be told to fill the
hero as well – otherwise the image keeps its own aspect ratio and leaves a
band of background on narrow screens. */
.hero__media picture { position: absolute; inset: 0; display: block; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, center); }
/* Home: the photograph alone. Its pale sky is the page colour, so there is
no dark band behind it and no scrim over it. */
.hero--plain { background: var(--paper); }
/* Home: one line and who says it, centred, with room around it. */
.home-intro { padding-block: clamp(64px, 9vw, 150px); text-align: center; }
.home-intro__title { max-width: 16ch; margin-inline: auto; }
.home-intro__title em { font-style: italic; }
.home-intro__sub {
margin-top: clamp(18px, 2.2vw, 30px);
color: var(--muted);
}
.home-intro__row {
display: flex; justify-content: space-between; align-items: flex-end;
gap: 30px; flex-wrap: wrap; margin-top: clamp(24px, 3vw, 42px);
}
.home-intro__row .lead { max-width: 46ch; }
.hero__scrim {
position: absolute; inset: 0;
background:
linear-gradient(to bottom, rgba(10,14,11,.42) 0%, rgba(10,14,11,0) 26%, rgba(10,14,11,0) 52%, rgba(10,14,11,.58) 100%);
}
.hero__content {
position: relative; height: 100%;
display: flex; flex-direction: column; justify-content: flex-end;
padding: 0 var(--gutter) clamp(56px, 6vw, 88px);
max-width: var(--wrap); margin-inline: auto;
color: #fff;
}
.hero__title {
max-width: 20ch;
text-shadow: 0 2px 44px rgba(0, 0, 0, 0.34);
}
.hero__title em { font-style: italic; }
.hero__row {
display: flex; justify-content: space-between; align-items: flex-end;
gap: 30px; flex-wrap: wrap; margin-top: clamp(22px, 3vw, 40px);
}
.hero__sub { max-width: 44ch; color: rgba(255,255,255,.86); }
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.hero .scroll-cue {
color: rgba(255,255,255,.66);
position: absolute;
left: 50%; transform: translateX(-50%);
bottom: clamp(22px, 2.6vw, 32px);
}
@media (max-width: 700px) {
.hero .scroll-cue { display: none; }
.hero__title { max-width: 12ch; }
}
/* Compact hero for interior pages: type on paper, photograph beneath. */
.page-hero { padding-top: calc(var(--header-h) + clamp(46px, 7vw, 104px)); }
.page-hero__inner {
display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.85fr);
gap: clamp(28px, 5vw, 80px); align-items: end;
padding-bottom: clamp(30px, 4vw, 56px);
}
.page-hero__title { margin-top: 16px; }
.page-hero__aside {
color: var(--muted);
max-width: 40ch;
border-left: 1px solid var(--line);
padding-left: clamp(18px, 2vw, 28px);
}
@media (max-width: 820px) {
.page-hero__aside { border-left: 0; padding-left: 0; }
}
.page-hero__banner { margin-top: clamp(24px, 3vw, 44px); }
.page-hero__banner img { width: 100%; max-height: 74svh; object-fit: cover; }
@media (max-width: 820px) { .page-hero__inner { grid-template-columns: 1fr; } }
/* --- Legal pages: a forest band, then numbered text with contents -------- */
.legal-hero {
background: var(--forest);
color: var(--on-dark);
padding: calc(var(--header-h) + clamp(30px, 4vw, 64px)) 0 clamp(44px, 5vw, 84px);
}
.legal-hero__inner {
display: grid;
grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
gap: clamp(32px, 6vw, 110px);
align-items: end;
}
.legal-hero__media { max-width: 340px; }
.legal-hero__media[data-shape="wide"] { max-width: 460px; }
/* Black and white, with the black melting into the forest: "screen" turns
black into the colour beneath and leaves white as it is. */
.legal-hero__media,
.legal-hero__media .media,
.legal-hero__media picture { background: var(--forest); }
.legal-hero__media img {
width: 100%; height: auto; object-fit: cover;
filter: grayscale(1) brightness(0.86) contrast(1.3);
mix-blend-mode: screen;
}
.legal-hero .breadcrumbs { color: var(--on-dark-dim); }
.legal-hero .breadcrumbs a:hover { color: var(--on-dark); }
.legal-hero .breadcrumbs li:not(:last-child)::after { color: var(--line-dark); }
.legal-hero .eyebrow { color: var(--on-dark-dim); }
.legal-hero__title { margin-top: 14px; max-width: 13ch; }
.legal-hero__intro {
margin-top: clamp(18px, 2vw, 28px);
max-width: 46ch;
color: var(--on-dark-mid);
}
.legal-hero__updated {
margin-top: clamp(22px, 2.6vw, 36px);
color: var(--on-dark-dim);
}
.legal__grid {
display: grid;
grid-template-columns: minmax(210px, 290px) minmax(0, var(--wrap-text));
gap: clamp(40px, 7vw, 120px);
align-items: start;
}
.legal__toc {
position: sticky;
top: calc(var(--header-h-compact) + 30px);
max-height: calc(100svh - var(--header-h-compact) - 60px);
overflow-y: auto;
scrollbar-width: thin;
}
.legal__fold summary {
list-style: none;
cursor: pointer;
padding-bottom: 14px;
border-bottom: 1px solid var(--line);
}
.legal__fold summary::-webkit-details-marker { display: none; }
.legal__fold summary i { font-style: normal; color: var(--muted-light); }
.legal__toc ol { list-style: none; padding-top: 10px; }
.legal__toc ol a {
display: grid;
grid-template-columns: 28px 1fr;
gap: 6px;
padding: 6px 0;
color: var(--muted);
transition: color var(--dur-fast) var(--ease);
}
.legal__toc ol a span {
padding-top: 3px;
color: var(--muted-light);
}
.legal__toc ol a:hover,
.legal__toc ol a.is-current { color: var(--ink); }
.legal__also {
margin-top: 26px;
padding-top: 14px;
border-top: 1px solid var(--line);
display: flex; flex-wrap: wrap; gap: 8px 18px;
}
.legal__also span { width: 100%; color: var(--muted-light); }
.legal__also a { color: var(--ink); border-bottom: 1px solid transparent; }
.legal__also a:hover { border-bottom-color: currentColor; }
.section.legal { padding-top: clamp(56px, 7vw, 110px); }
.legal__body > :first-child { margin-top: 0; }
.legal__body h2 { scroll-margin-top: calc(var(--header-h-compact) + 30px); }
.legal__n {
display: block;
margin-bottom: 12px;
color: var(--muted-light);
}
@media (max-width: 900px) {
.legal__grid { grid-template-columns: 1fr; gap: 34px; }
.legal__toc { position: static; max-height: none; overflow: visible; }
.legal__fold summary { display: flex; justify-content: space-between; align-items: center; }
.legal__fold summary::after { content: "+"; font-size: var(--fs-lead); line-height: 1; color: var(--muted); }
.legal__fold[open] summary::after { content: "–"; }
}
@media (max-width: 820px) {
.legal-hero__inner { grid-template-columns: 1fr; }
.legal-hero__media { order: 2; max-width: 240px; }
}
@media (max-width: 620px) {
.legal-hero__media { display: none; }
}
/* ==========================================================================
EDITORIAL GALLERY BLOCKS
========================================================================== */
.duo {
display: grid; grid-template-columns: repeat(12, 1fr);
gap: clamp(16px, 2.4vw, 40px); align-items: center;
}
.duo__a { grid-column: 1 / 7; }
.duo__b { grid-column: 8 / 13; padding-top: clamp(40px, 8vw, 130px); }
.duo--flip .duo__a { grid-column: 7 / 13; }
.duo--flip .duo__b { grid-column: 2 / 7; }
.trio { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(16px, 2.4vw, 40px); align-items: start; }
.trio__a { grid-column: 1 / 5; }
.trio__b { grid-column: 5 / 10; padding-top: clamp(30px, 5vw, 88px); }
.trio__c { grid-column: 10 / 13; padding-top: clamp(60px, 10vw, 168px); }
.full-bleed { width: 100%; }
.full-bleed img { width: 100%; max-height: 88svh; object-fit: cover; }
@media (max-width: 780px) {
.duo__a, .duo__b, .duo--flip .duo__a, .duo--flip .duo__b { grid-column: 1 / -1; padding-top: 0; }
.trio__a, .trio__b, .trio__c { grid-column: 1 / -1; padding-top: 0; }
}
/* Masonry-ish portfolio grid, CSS-only. */
.gallery { columns: 3; column-gap: clamp(14px, 2vw, 30px); }
.gallery > * { break-inside: avoid; margin-bottom: clamp(14px, 2vw, 30px); }
@media (max-width: 900px) { .gallery { columns: 2; } }
@media (max-width: 520px) { .gallery { columns: 1; } }
/* ==========================================================================
INDEX LIST – the numbered, hover-preview list used for categories
========================================================================== */
.index-list { border-top: 1px solid var(--line); }
.band--dark .index-list { border-top-color: var(--line-dark); }
.index-list__row {
display: grid;
grid-template-columns: 64px minmax(0, 1fr) auto;
gap: 20px;
align-items: center;
padding: clamp(20px, 2.6vw, 34px) 0;
border-bottom: 1px solid var(--line);
position: relative;
transition: padding-left var(--dur) var(--ease-out), color var(--dur-fast) var(--ease);
}
.band--dark .index-list__row { border-bottom-color: var(--line-dark); }
.index-list__row:hover { padding-left: 18px; }
.index-list__row::before {
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
background: var(--accent); transform: scaleY(0); transform-origin: bottom;
transition: transform var(--dur) var(--ease-out);
}
.index-list__row:hover::before { transform: scaleY(1); transform-origin: top; }
.index-list__num { color: var(--accent);
font-variant-numeric: tabular-nums; }
.index-list__meta {
color: var(--muted); text-align: right; }
.band--dark .index-list__meta { color: var(--on-dark-dim); }
/* Floating photograph that follows the pointer across the list. */
.index-preview {
position: fixed; top: 0; left: 0; z-index: 100;
width: clamp(220px, 22vw, 340px); aspect-ratio: 3 / 4;
margin: -14% 0 0 -50%;
pointer-events: none; opacity: 0;
transform: scale(0.94) rotate(-1.5deg);
transition: opacity var(--dur-fast) var(--ease), transform var(--dur) var(--ease-out);
overflow: hidden;
box-shadow: 0 30px 70px rgba(20, 26, 21, 0.28);
}
.index-preview.is-on { opacity: 1; transform: scale(1) rotate(-1.5deg); }
.index-preview img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: none), (max-width: 900px) { .index-preview { display: none; } }
/* ==========================================================================
PACKAGES / PRICING
========================================================================== */
.pkg {
display: grid;
grid-template-columns: 48px minmax(0, 0.9fr) minmax(0, 1.5fr) auto;
gap: clamp(18px, 3vw, 46px);
align-items: start;
padding: clamp(26px, 3.4vw, 46px) 0;
border-bottom: 1px solid var(--line);
position: relative;
}
.pkg:first-child { border-top: 1px solid var(--line); }
.pkg__num { color: var(--accent);
font-variant-numeric: tabular-nums; padding-top: 8px; }
.pkg__coverage {
color: var(--muted); margin-top: 10px; }
.pkg__desc { color: var(--ink-soft); }
.pkg__includes { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.pkg__includes li {
color: var(--muted); border: 1px solid var(--line); border-radius: 999px;
padding: 6px 13px;
}
.pkg__price { text-align: right; }
.pkg__price b {
display: block;
white-space: nowrap;
}
.pkg__price span {
color: var(--muted); }
.pkg__media { grid-column: 2 / -1; margin-top: 22px; max-width: 520px; }
@media (max-width: 900px) {
.pkg { grid-template-columns: 34px minmax(0, 1fr); row-gap: 14px; }
.pkg > :not(.pkg__num) { grid-column: 2; }
.pkg__num { grid-row: 1; }
.pkg__price { grid-column: 2; text-align: left; margin-top: 0; }
.pkg__media { grid-column: 2; }
}
/* A three-across tier grid, for Destination day-lengths. */
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1px; background: var(--line); border: 1px solid var(--line); }
.tiers__cell { background: var(--paper); padding: clamp(24px, 3vw, 42px);
display: flex; flex-direction: column; gap: 14px; }
.tiers__cell p { color: var(--ink-soft); }
.tiers__cell ul { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.tiers__cell li {
color: var(--muted); padding: 5px 0; }
@media (max-width: 820px) { .tiers { grid-template-columns: 1fr; } }
/* Additional services – a two-column ledger. */
.ledger { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(30px, 6vw, 90px);
border-top: 1px solid var(--line-dark); }
.ledger__row { display: flex; justify-content: space-between; gap: 20px;
padding: 16px 0; border-bottom: 1px solid var(--line-dark); }
.ledger__row dd { margin: 0;
color: var(--on-dark-dim); white-space: nowrap; }
@media (max-width: 760px) { .ledger { grid-template-columns: 1fr; } }
/* ==========================================================================
PROCESS / STEPS
========================================================================== */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); }
.steps__item { border-top: 1px solid var(--line); padding-top: 20px; }
.steps__num { color: var(--accent); }
.steps__item h3 {
margin: 12px 0 10px; }
.steps__item p { color: var(--ink-soft); }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .steps { grid-template-columns: 1fr; } }
/* ==========================================================================
FAQ ACCORDION
========================================================================== */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
width: 100%; background: none; border: 0; cursor: pointer;
display: flex; justify-content: space-between; align-items: center; gap: 24px;
padding: clamp(20px, 2.4vw, 30px) 0; text-align: left;
color: var(--ink);
transition: color var(--dur-fast) var(--ease);
}
.faq__q:hover { color: var(--accent); }
.faq__sign { flex: none; width: 15px; height: 15px; position: relative; }
.faq__sign::before, .faq__sign::after {
content: ""; position: absolute; inset: 50% 0 auto; height: 1px; background: currentColor;
transition: transform var(--dur) var(--ease-out);
}
.faq__sign::after { transform: rotate(90deg); }
.faq__q[aria-expanded="true"] .faq__sign::after { transform: rotate(0deg); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur) var(--ease-out); }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { color: var(--ink-soft); max-width: 62ch; padding-bottom: clamp(20px, 2.4vw, 30px); }
/* ==========================================================================
TESTIMONIALS
========================================================================== */
.quote-card {
border-top: 1px solid var(--line);
padding-top: 26px;
display: flex; flex-direction: column; gap: 18px;
}
.band--dark .quote-card { border-top-color: var(--line-dark); }
.quote-card blockquote {
margin: 0;
}
.quote-card figcaption {
color: var(--muted); margin-top: auto; }
.band--dark .quote-card figcaption { color: var(--on-dark-dim); }
.quote-card figcaption b { font-weight: 400; color: var(--ink); display: block; margin-bottom: 4px; }
.band--dark .quote-card figcaption b { color: var(--on-dark); }
.quote-hero {
text-align: center; max-width: 30ch; margin-inline: auto;
}
/* ==========================================================================
JOURNAL
========================================================================== */
.post-card { display: block; }
.post-card__meta {
display: flex; gap: 14px; align-items: center;
color: var(--muted); margin: 18px 0 10px;
}
.post-card__meta span:nth-child(2)::before { content: "–"; margin-right: 14px; color: var(--accent); }
.post-card h3 {
transition: color var(--dur-fast) var(--ease);
}
.post-card:hover h3 { color: var(--accent); }
.post-card p { color: var(--muted); margin-top: 10px; }
.post-hero { padding-top: calc(var(--header-h) + clamp(48px, 7vw, 100px)); }
.post-hero__meta { display: flex; gap: 20px; flex-wrap: wrap;
color: var(--muted); margin-bottom: 20px; }
.post-hero h1 { max-width: 20ch; }
/* ==========================================================================
FORM
========================================================================== */
.form { display: grid; gap: clamp(18px, 2.2vw, 28px); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.2vw, 28px); }
@media (max-width: 640px) { .form__row { grid-template-columns: 1fr; } }
.field { position: relative; display: flex; flex-direction: column; gap: 8px; }
.field > label {
color: var(--muted);
}
.field > label .req { color: var(--accent); }
.field input,
.field textarea,
.field select {
background: rgba(255, 255, 255, 0.45);
border: 1px solid var(--line);
padding: 13px 16px;
border-radius: 12px;
transition: border-color var(--dur-fast) var(--ease);
width: 100%;
}
.field select { appearance: none; cursor: pointer;
background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
linear-gradient(135deg, var(--muted) 50%, transparent 50%);
background-position: right 20px center, right 15px center;
background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.field textarea { resize: vertical; min-height: 128px; }
.field input:focus, .field textarea:focus, .field select:focus {
outline: none; border-color: var(--ink-soft); background: rgba(255, 255, 255, 0.7);
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted-light); }
.field__error { color: #a2432f; min-height: 1em; }
.field.is-invalid input, .field.is-invalid textarea, .field.is-invalid select { border-color: #a2432f; }
/* Radio / checkbox pills – used for "what are you planning". */
.choices { display: flex; flex-wrap: wrap; gap: 10px; }
.choices input { position: absolute; opacity: 0; pointer-events: none; }
.choices label {
border: 1px solid var(--line); border-radius: 999px; padding: 11px 20px;
cursor: pointer; color: var(--muted);
transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
background var(--dur-fast) var(--ease);
}
.choices input:checked + label { background: var(--forest); border-color: var(--forest); color: var(--on-dark); }
.choices input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 3px; }
.consent-row { display: flex; gap: 13px; align-items: flex-start; }
.consent-row input { margin-top: 5px; accent-color: var(--forest); flex: none; }
.consent-row label { color: var(--muted); }
.consent-row a { border-bottom: 1px solid var(--accent-soft); }
/* Never rendered to a person – only a bot fills this in. */
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; overflow: hidden; }
.form__status[data-state="error"] { color: #a2432f; }
.form__status[data-state="ok"] { color: var(--forest); }
/* ---------------------------------------------------------------- dynamic form
The plan picker, the blocks that appear per plan, and the panel with the
call calendar that replaces the form once it is sent. */
.field--choices, .field--plans { border: 0; padding: 0; margin: 0; min-width: 0; }
.field__legend {
padding: 0; margin-bottom: 10px;
color: var(--muted);
}
.field__legend .req { color: var(--accent); }
.field--choices.is-invalid .choices label,
.field--plans.is-invalid .plans label { border-color: #a2432f; }
.plans { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 10px; }
.plans--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.plans input { position: absolute; opacity: 0; pointer-events: none; }
.plans label {
display: flex; flex-direction: column; gap: 6px; height: 100%;
border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px 17px; cursor: pointer;
transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.plans label b { color: var(--ink); }
.plans label span { color: var(--muted); }
.plans label:hover { border-color: var(--ink-soft); }
.plans input:checked + label { background: var(--forest); border-color: var(--forest); }
.plans input:checked + label b { color: var(--on-dark); }
.plans input:checked + label span { color: var(--on-dark-muted, rgba(243, 239, 229, .72)); }
.plans input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 3px; }
.form__block { display: grid; gap: clamp(18px, 2.2vw, 28px); padding-top: 4px; }
.form__note { margin: -6px 0 0; color: var(--ink-soft); font-style: italic; }
/* A follow-up that opens under an answer (the planner's details). */
.form__callout {
display: grid; gap: clamp(14px, 1.8vw, 22px);
margin-top: -6px;
padding: clamp(16px, 2vw, 24px);
background: var(--paper-warm);
border: 1px solid var(--line-soft);
border-radius: 14px;
position: relative;
}
.form__callout::before {
content: ""; position: absolute; top: -7px; left: 28px;
width: 12px; height: 12px; background: inherit;
border-left: 1px solid var(--line-soft); border-top: 1px solid var(--line-soft);
transform: rotate(45deg);
}
.form__callout-title {
color: var(--muted);
}
[data-if] { animation: form-open var(--dur) var(--ease-out); }
@keyframes form-open { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { [data-if] { animation: none; } }
.consent-row--plain label { color: var(--ink-soft); }
.form__submit { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.form__alt { color: var(--muted); }
.form__alt a { border-bottom: 1px solid var(--accent-soft); }
.form-done { outline: none; }
.form-done .lead { margin-top: 18px; }
.form-done__text { margin-top: 16px; color: var(--ink-soft); max-width: 60ch; line-height: 1.7; }
.form-done__skip { margin-top: 18px; }
button.label-link { background: none; border: 0; padding: 0 0 6px; cursor: pointer; }
.cal { margin-top: clamp(24px, 3vw, 36px); }
.cal__frame { width: 100%; min-height: 640px; overflow: auto; }
.cal__note { margin-top: 10px; color: var(--muted); }
.cal__note a { border-bottom: 1px solid var(--accent-soft); }
.alts { margin-top: clamp(30px, 4vw, 48px); padding-top: 20px; border-top: 1px solid var(--line); }
.alts__list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 28px; }
.alts__list a {
border-bottom: 1px solid var(--line); padding-bottom: 5px;
}
.tiers__note { margin-top: clamp(22px, 3vw, 34px); max-width: 70ch; color: var(--ink-soft); line-height: 1.7; }
.prices-note { margin-top: clamp(18px, 2.4vw, 28px); font-style: italic; color: var(--muted); }
.tiers__note .label-link { margin-left: 10px; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .7fr); gap: clamp(34px, 6vw, 110px); align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.callpage { display: grid; gap: clamp(22px, 3vw, 34px); }
/* ==========================================================================
LIGHTBOX
========================================================================== */
.lightbox {
position: fixed; inset: 0; z-index: var(--z-lightbox);
background: rgba(16, 20, 17, 0.96);
display: grid; grid-template-rows: auto 1fr auto;
opacity: 0; visibility: hidden;
transition: opacity var(--dur) var(--ease), visibility var(--dur);
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__bar { display: flex; justify-content: space-between; align-items: center;
padding: 22px var(--gutter); color: var(--on-dark-mid);
}
.lightbox__stage { display: grid; place-items: center; padding: 0 clamp(12px, 5vw, 80px); min-height: 0; }
.lightbox__stage img { max-width: 100%; max-height: 78svh; width: auto; height: auto; object-fit: contain; }
.lightbox__foot { display: flex; justify-content: center; gap: 22px; padding: 20px var(--gutter) 30px; }
.lightbox button {
background: none; border: 1px solid var(--line-dark); border-radius: 999px;
color: var(--on-dark); cursor: pointer; padding: 11px 22px;
transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.lightbox button:hover { background: var(--on-dark); color: var(--forest); }
.lightbox__caption { color: var(--on-dark-dim);
text-align: center; max-width: 60ch; margin: 14px auto 0; }
/* ==========================================================================
CONSENT
========================================================================== */
.consent {
position: fixed; z-index: var(--z-consent);
left: var(--gutter); bottom: 24px; width: min(420px, calc(100vw - var(--gutter) * 2));
background: var(--paper); color: var(--ink);
border: 1px solid var(--line);
box-shadow: 0 26px 70px rgba(20, 26, 21, 0.20);
padding: clamp(22px, 2.6vw, 32px);
transform: translateY(calc(100% + 40px));
transition: transform 0.7s var(--ease-out);
}
.consent.is-up { transform: none; }
.consent[hidden] { display: none; }
.consent h2 { margin-bottom: 10px; }
.consent p { color: var(--muted); }
.consent p a { border-bottom: 1px solid var(--accent-soft); }
.consent__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.consent__actions .btn { padding: 12px 22px; flex: 1 1 auto; }
.consent__toggles { margin-top: 18px; display: grid; gap: 12px; }
.consent__toggle { display: flex; justify-content: space-between; align-items: center; gap: 16px;
border-top: 1px solid var(--line-soft); padding-top: 12px; }
.consent__toggle small { display: block;
color: var(--muted); margin-top: 3px; }
.switch { position: relative; width: 42px; height: 22px; flex: none; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch i { position: absolute; inset: 0; border-radius: 999px; background: var(--paper-deep);
border: 1px solid var(--line); transition: background var(--dur-fast) var(--ease); }
.switch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
border-radius: 50%; background: var(--muted); transition: transform var(--dur-fast) var(--ease-out),
background var(--dur-fast) var(--ease); }
.switch input:checked + i { background: var(--forest); border-color: var(--forest); }
.switch input:checked + i::after { transform: translateX(20px); background: var(--on-dark); }
.switch input:disabled + i { opacity: 0.5; }
/* ==========================================================================
CTA STRIP + MISC
========================================================================== */
.cta-strip { background: var(--forest); color: var(--on-dark); }
.cta-strip__inner {
display: flex; justify-content: space-between; align-items: flex-end;
gap: clamp(26px, 5vw, 80px); flex-wrap: wrap;
}
.cta-strip h2 { max-width: 18ch; }
.cta-strip p { color: var(--on-dark-mid); max-width: 46ch; margin-top: 18px; }
.marquee-band { border-block: 1px solid var(--line); padding-block: 22px; }
.marquee__track span {
color: var(--muted-light); white-space: nowrap; display: inline-flex; align-items: center; gap: clamp(30px,5vw,76px);
}
.marquee__track span::after { content: "·"; color: var(--accent); }
.stat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 50px); }
.stat { border-top: 1px solid var(--line); padding-top: 18px; }
.band--dark .stat { border-top-color: var(--line-dark); }
.stat b { display: block;
}
.stat span { display: block; margin-top: 10px;
color: var(--muted); }
.band--dark .stat span { color: var(--on-dark-dim); }
@media (max-width: 760px) { .stat-row { grid-template-columns: 1fr 1fr; } }
.breadcrumbs {
color: var(--muted); display: flex; gap: 10px; flex-wrap: wrap;
margin-bottom: clamp(26px, 3.4vw, 46px); }
.breadcrumbs a:hover { color: var(--ink); }
.breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: 10px; color: var(--line); }
.breadcrumbs ol { display: flex; gap: 10px; flex-wrap: wrap; }
.notice {
border: 1px solid var(--line); border-left: 2px solid var(--accent);
padding: clamp(18px, 2.4vw, 26px); background: var(--paper-warm);
}
.notice p { color: var(--ink-soft); }
.pager { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
border-top: 1px solid var(--line); padding-top: 26px; }
.err-page { min-height: 78svh; display: grid; place-items: center; text-align: center; }
.err-page__code { font-family: var(--serif); font-size: clamp(5rem, 20vw, 15rem);
line-height: 0.9; color: var(--paper-deep); }
/* ==========================================================================
SERIES 9 (28.09.2026) – home, packages, placeholders
========================================================================== */
/* --- A slot waiting for a photograph ------------------------------------- */
.media--ph {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
width: 100%;
background: var(--paper-warm);
color: var(--forest);
text-align: center;
padding: 20px;
}
.media--ph .ph__mark { width: clamp(26px, 9%, 44px); height: auto; object-fit: contain; opacity: 0.22; }
.band--dark .media--ph { background: var(--forest-lift); border-color: var(--line-dark); color: var(--on-dark-dim); }
.band--dark .media--ph .ph__mark { filter: invert(1); opacity: 0.18; }
/* --- Home: the way I see -------------------------------------------------- */
.home-way__grid {
display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
gap: clamp(30px, 7vw, 120px); align-items: center;
}
.home-way__p { color: var(--ink-soft); max-width: 58ch; }
.home-way__p + .home-way__p { margin-top: 1em; }
.home-way .label-link { margin-top: 30px; }
/* --- Home & portfolio: photographs that lead to a category --------------- */
.work-tile { display: block; position: relative; color: inherit; }
.work-tile__label {
display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
margin-top: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.work-tile:hover .work-tile__label b { color: var(--accent); }
.work-tile .arrow { transition: transform var(--dur) var(--ease-out); }
.work-tile:hover .arrow { transform: translate(4px, -4px); }
.work-tile__intro { color: var(--muted); margin-top: 10px; max-width: 46ch; }
.work-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2vw, 30px); margin-top: clamp(14px, 2vw, 30px); }
.work-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 38px); margin-top: clamp(40px, 6vw, 90px); }
.work-cats--two { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; row-gap: clamp(36px, 5vw, 70px); }
@media (max-width: 760px) {
.work-cats, .work-cats--two { grid-template-columns: 1fr; }
}
/* --- Home: what I photograph ------------------------------------------------ */
.home-services__grid {
display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
gap: clamp(30px, 7vw, 120px); align-items: start;
}
.home-services__title { margin-top: 14px; }
.svc-list { border-top: 1px solid var(--line); }
.svc-list__row {
display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
padding: 20px 0; border-bottom: 1px solid var(--line); color: inherit;
}
.svc-list__name {
transition: color var(--dur-fast) var(--ease), transform var(--dur) var(--ease-out); }
.svc-list__price { color: var(--muted); white-space: nowrap; }
.svc-list__row:hover .svc-list__name { color: var(--accent); transform: translateX(6px); }
/* --- Packages: the three wedding collections, one under another ---------- */
.pk-list { display: flex; flex-direction: column; }
.pk {
display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
gap: clamp(26px, 5vw, 90px); align-items: start;
padding: clamp(34px, 5vw, 70px) 0; border-bottom: 1px solid var(--line);
scroll-margin-top: calc(var(--header-h) + 20px);
}
.pk:first-child { padding-top: 0; }
.pk:nth-child(even) .pk__media { order: 2; }
.pk__num { color: var(--accent); }
.pk__head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 10px; }
.pk__price { white-space: nowrap; }
/* Twelve marks, the covered hours filled. */
.pk__meter { margin-top: clamp(20px, 2.4vw, 30px); }
.pk__bar { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; max-width: 420px; }
.pk__bar i { height: 8px; border-radius: 2px; background: var(--paper-deep); border: 1px solid var(--line); }
.pk__bar i.on { background: var(--forest); border-color: var(--forest); }
.pk__facts { display: flex; gap: 22px; margin-top: 10px;
color: var(--muted); }
.pk__facts b { font-weight: 600; color: var(--ink); }
.pk__summary { margin-top: clamp(20px, 2.4vw, 30px); color: var(--ink-soft); max-width: 60ch; }
.pk__summary p + p { margin-top: 0.8em; }
.pk__label { margin-top: 24px;
color: var(--ink); }
.pk__list { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 30px; }
.pk__list li { position: relative; padding-left: 20px; color: var(--ink-soft); }
.pk__list li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 10px; height: 1px; background: var(--accent); }
.pk-includes { margin-top: clamp(50px, 7vw, 100px); padding: clamp(28px, 4vw, 54px); background: var(--paper-warm); border-radius: 18px; }
.pk-includes__title { margin-bottom: clamp(22px, 3vw, 38px); }
.pk-includes__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 26px clamp(24px, 3vw, 46px); }
.pk-includes__grid b { display: block; }
.pk-includes__grid p { margin-top: 6px; color: var(--ink-soft); }
.pk-extra { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: clamp(30px, 6vw, 90px); margin-top: clamp(50px, 7vw, 100px); }
.pk-extra__title { margin-bottom: 14px; }
.ledger--light { grid-template-columns: 1fr; border-top-color: var(--line); }
.ledger--light .ledger__row { align-items: baseline; border-bottom-color: var(--line); }
.ledger--light .ledger__row dt small {
display: block; margin-top: 6px; max-width: 52ch;
color: var(--muted);
}
.ledger--light .ledger__row dd { white-space: nowrap; color: var(--ink); }
@media (max-width: 560px) {
.ledger--light .ledger__row dd { white-space: normal; text-align: right; max-width: 9.5em; }
}
.pk-dest { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(30px, 7vw, 120px); align-items: center; }
.pk-dest__title { margin-top: 18px; }
.pk-dest__price { margin-top: 18px; }
.pk-dest__moments { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 6px 12px;
color: var(--on-dark-mid); }
.svc-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 30px); }
.svc-card { scroll-margin-top: calc(var(--header-h) + 20px); }
.svc-card__name { margin-top: 16px; }
.svc-card__price { margin-top: 8px; }
.svc-card__note { margin-top: 6px; color: var(--muted); }
@media (max-width: 1000px) {
.svc-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
.home-way__grid, .home-services__grid, .pk, .pk-extra, .pk-dest { grid-template-columns: 1fr; }
.pk:nth-child(even) .pk__media { order: 0; }
.pk__media { max-width: 520px; }
.pk__list { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
.svc-cards { grid-template-columns: 1fr; }
.work-pair { gap: 10px; }
}
/* --- About ------------------------------------------------------------------ */
.about-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 6vw, 90px); align-items: start; }
.about-grid--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.about-closing { text-align: center; }
.about-closing .pull-quote { max-width: 28ch; margin-inline: auto; }
@media (max-width: 820px) { .about-grid, .about-grid--even { grid-template-columns: 1fr; } }
/* --- Journal: until the first story ----------------------------------------- */
.journal-soon { color: var(--muted); max-width: 56ch; margin-bottom: clamp(24px, 3vw, 40px); }
.post-card--slot h3 { color: var(--ink-soft); }
.post-card--lead { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(24px, 5vw, 70px); align-items: center; }
@media (max-width: 780px) { .post-card--lead { grid-template-columns: 1fr; } }
/* Smaller headings: the serif again (STIX Two Text holds up at small sizes). */
/* ==========================================================================
SERIES 10 (28.09.2026) – ellipse buttons, the hero line, packages in
three columns, contact
========================================================================== */
/* --- The ellipse button (Matcha): arrow + words in a loose, tilted ring --- */
.ellipse {
position: relative; display: inline-flex; align-items: center; gap: 12px;
padding: 16px 30px;
white-space: nowrap;
color: inherit;
isolation: isolate;
}
.ellipse::before {
content: ""; position: absolute; inset: 0;
border: 1px solid currentColor; border-radius: 50%;
opacity: 0.55;
transform: rotate(-3deg);
transition: transform var(--dur) var(--ease-out), opacity var(--dur-fast) var(--ease);
z-index: -1;
}
.ellipse:hover::before { transform: rotate(2deg) scale(1.04); opacity: 1; }
.ellipse__arrow { transition: transform var(--dur) var(--ease-out); }
.ellipse:hover .ellipse__arrow { transform: translateX(4px); }
/* --- Home: the line on the photograph's sky -------------------------------- */
/* Cropped a little at top and bottom, and drawn a touch larger from the left
edge, so the oak and the couple sit further right and the sky on the
left holds the words with room to spare. */
.home-hero { height: min(100svh, 62.5vw); min-height: 520px; }
/* Series 15c: the whole photograph, sky included – the oak keeps its air above.
The slow drift grows from the top edge, so it never eats the sky. */
.home-hero .hero__media img { object-position: 50% 30%; transform-origin: 50% 0%; animation-name: kenburns-sky; }
@keyframes kenburns-sky { from { transform: scale(1); } to { transform: scale(1.035); } }
.home-hero__text {
position: absolute; left: 0; right: 0; top: calc(var(--header-h) + clamp(30px, 6vh, 76px));
padding-inline: var(--gutter);
max-width: var(--wrap); margin-inline: auto;
color: var(--ink);
}
.home-hero__title .line { white-space: nowrap; }
.home-hero__title em { font-style: normal; color: var(--accent-warm); }
.home-hero__sub { margin-top: clamp(22px, 3vw, 46px); }
.home-hero__cta { position: absolute; right: var(--gutter); bottom: clamp(24px, 5vh, 56px); color: var(--ink); }
/* On a phone the tree fills the frame, so the words sit on the paper above it. */
@media (max-width: 700px) {
.home-hero { height: auto; min-height: 0; display: flex; flex-direction: column; }
.home-hero .hero__media picture { transform: none; }
.home-hero .hero__media img { object-position: var(--focus); }
.home-hero__text { position: static; padding-top: calc(var(--header-h) + 34px); padding-bottom: 26px; }
.home-hero__title .line { white-space: normal; }
.home-hero .hero__media { position: relative; inset: auto; height: 72svh; order: 2; }
.home-hero__cta { position: static; order: 3; align-self: center; padding: 22px 0 6px; }
}
/* --- Home: the way I see / meet the photographer --------------------------- */
.home-way__grid {
display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 2.3fr) minmax(0, 0.9fr);
gap: clamp(26px, 5vw, 90px); align-items: start;
}
.home-way__label { padding-top: 0.9em; }
.home-way__text p {
color: var(--ink-soft); max-width: 58ch;
}
.home-way__text p + p { margin-top: 0.9em; }
.home-way__text .home-way__lead {
color: var(--ink); max-width: 40ch; margin-bottom: clamp(18px, 2.4vw, 30px);
}
.home-way__text .home-way__closing { font-style: italic; color: var(--ink); margin-top: 1.2em; }
.home-way__text em { font-style: italic; }
.home-meet__text { margin: clamp(22px, 3vw, 40px) 0 clamp(26px, 3vw, 40px); max-width: 60ch; }
.home-meet__text p { font-style: italic; color: var(--ink-soft); }
@media (max-width: 900px) {
.home-way__grid { grid-template-columns: 1fr; }
.home-way__label { padding-top: 0; }
.home-way__media { max-width: 360px; }
}
/* --- Portfolio tiles: the name as an ellipse under the photograph --------- */
.work-label { display: flex; justify-content: center; margin-top: clamp(14px, 1.6vw, 22px); }
.work-cats .work-label, .work-cats--two .work-label { justify-content: center; }
.work-cat .work-tile__intro { text-align: center; margin-inline: auto; }
.work-tile--feature + .work-pair { margin-top: clamp(12px, 1.6vw, 24px); }
/* --- Packages: large numbered titles ------------------------------------- */
.big-head { margin-bottom: clamp(28px, 4vw, 54px); }
.big-head__num { display: block; margin-bottom: 10px; color: var(--accent); }
.big-head__sub { margin-top: 14px; color: var(--muted); }
.band--dark .big-head__sub { color: var(--on-dark-mid); }
.pk-hero { margin-bottom: clamp(34px, 5vw, 70px); }
.pk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 40px); align-items: start; }
.pk-card { scroll-margin-top: calc(var(--header-h) + 20px); }
.pk-card__body { padding-top: clamp(16px, 2vw, 24px); }
.pk-card__name { margin-top: 8px; }
.pk-card__price { margin-top: 6px; }
.pk-card .pk__list { grid-template-columns: 1fr; }
.pk-card .pk__bar { max-width: none; }
@media (max-width: 900px) { .pk-grid { grid-template-columns: 1fr; } .pk-card { max-width: 560px; } }
.ledger__row--offer { background: var(--paper-warm); margin-inline: -14px; padding-inline: 14px; border-radius: 12px; border-bottom-color: transparent; }
.ledger__row--offer dd { color: var(--accent-warm) !important; }
/* --- Instagram strip --------------------------------------------------------- */
.ig-strip__head { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: clamp(18px, 2.4vw, 30px); }
.ig-strip__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.ig-strip__grid .media { border-radius: 0; }
@media (max-width: 560px) { .ig-strip__grid { grid-template-columns: 1fr 1fr 1fr; } }
/* --- Contact: rounded, soft ------------------------------------------------- */
.contact-hero { padding-bottom: clamp(20px, 3vw, 40px); }
.contact-hero__title { max-width: 18ch; margin-top: clamp(18px, 3vw, 40px); }
.contact-hero__title em { font-style: normal; color: var(--accent-warm); }
.contact-hero__intro { margin-top: clamp(22px, 3vw, 40px); max-width: 62ch; }
.contact-hero__lead { margin-bottom: 12px; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr); gap: clamp(34px, 6vw, 110px); align-items: start; }
.contact-aside__body { margin-top: 14px; color: var(--ink-soft); }
.contact-social { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 22px; color: var(--forest); }
.contact-social a { display: inline-flex; transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease-out); }
.contact-social a:hover { opacity: 0.7; transform: translateY(-2px); }
.contact-box { margin-top: clamp(30px, 4vw, 48px); }
.contact-box .prose { margin-top: 12px; }
.contact-aside__noforms { margin-top: clamp(28px, 4vw, 44px); }
.contact-aside__noforms em { font-style: italic; }
.contact-aside__links { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 22px; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-aside__phone { margin-top: 18px; }
.icon { display: block; }
/* The footer's column links must not flatten the ellipse buttons. */
.ftr__buttons { gap: 26px; }
.ftr__col.ftr__buttons .ellipse { padding: 15px 28px; border-bottom: 0; }
.ftr__col.ftr__buttons .ellipse:hover { border-bottom: 0; }
/* ==========================================================================
SERIES 12 (29.09.2026) – selected work, the banner
========================================================================== */
.home-work__head { margin-bottom: clamp(26px, 3.4vw, 46px); }
.home-work__title { margin-top: 12px; }
.home-work__cta { display: flex; justify-content: center; margin-top: clamp(30px, 4vw, 54px); }
/* One photographic world: rows of two or three, each row one height. */
.mosaic { display: grid; gap: 6px; }
.mosaic__row { display: grid; gap: 6px; width: 100%; }
.mosaic__row > * { min-width: 0; min-height: 0; overflow: hidden; }
.mosaic__cell, .mosaic__cell .media, .mosaic__cell picture { height: 100%; }
.mosaic__cell picture { display: block; }
.mosaic__cell .media img { width: 100%; height: 100%; aspect-ratio: auto !important; object-fit: cover; }
@media (max-width: 700px) {
.mosaic__row { grid-template-columns: 1fr 1fr !important; aspect-ratio: auto !important; }
.mosaic__row > :nth-child(3) { grid-column: span 2; }
.mosaic__cell .media img { aspect-ratio: 4 / 5 !important; }
.mosaic__row > :nth-child(3) .media img { aspect-ratio: 8 / 5 !important; }
}
.home-banner__inner { text-align: center; max-width: 900px; }
.home-banner__body { margin: clamp(18px, 2.4vw, 30px) auto clamp(26px, 3vw, 40px); max-width: 52ch; color: var(--ink-soft); }
/* Services & Pricing: the experience before the prices */
.pk-exp__text { max-width: 760px; }
.pk-exp__text p { color: var(--ink-soft); }
.pk-exp__text p + p { margin-top: 0.9em; }
.pk-exp__text .pk-exp__lead { color: var(--ink); }
.pk-exp__photos { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 2vw, 30px); margin-top: clamp(40px, 6vw, 80px); }
.pk-exp__line { text-align: center; margin-top: clamp(50px, 7vw, 100px); }
@media (max-width: 600px) { .pk-exp__photos { grid-template-columns: 1fr; } }
.mnav-more { max-width: 760px; }
/* About – the fuller text */
.about-text p { color: var(--ink-soft); max-width: 60ch; }
.about-text p + p { margin-top: 0.9em; }
.about-text .about-text__lead { color: var(--ink); margin-bottom: 0.8em; }
.about-quote { text-align: center; }
.about-grid--flip { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); align-items: center; }
.about-cta { background: var(--forest); color: var(--on-dark); }
.about-cta__inner { text-align: center; max-width: 820px; }
.about-cta__text { margin-bottom: clamp(24px, 3vw, 38px); }
/* Portfolio – weddings first and largest, then two side by side, then events */
.pf-block { margin-bottom: clamp(50px, 7vw, 100px); }
.pf-block__text { margin-top: clamp(16px, 2vw, 26px); max-width: 640px; }
.pf-block--wide .pf-block__text { display: grid; grid-template-columns: auto 1fr; column-gap: 18px; max-width: none; align-items: baseline; }
.pf-block--wide .pf-block__text > :not(.pf-block__num) { grid-column: 2; }
.pf-block__num { color: var(--accent); }
.pf-block__intro { margin: 10px 0 20px; color: var(--ink-soft); max-width: 56ch; }
.pf-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 3vw, 44px); }
@media (max-width: 700px) {
.pf-pair { grid-template-columns: 1fr; }
.pf-block--wide .pf-block__text { display: block; }
}
.pf-block__text .ellipse { justify-self: start; }
/* The phone number with WhatsApp (and Viber in Bulgarian) right next to it. */
.phone-line { display: inline-flex; align-items: center; gap: 12px; }
.phone-line__app { display: inline-flex; color: var(--forest); opacity: 0.85; transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease-out); }
.phone-line__app:hover { opacity: 1; transform: translateY(-1px); }
.ftr .phone-line__app { color: var(--on-dark); }
.ftr__col .phone-line__app { border-bottom: 0; padding: 0; line-height: 0; }
.svc-list__sub { display: block; margin-top: 6px; color: var(--muted); }
.home-banner + .home-services { padding-top: 0; }
/* ==========================================================================
Series 14 / 14b – gift cards (/gift-cards/, /bg/gift-cards/)
The card follows Tsvetan's own printed voucher: tall (10 × 18), a
photograph on the front, paper on the back, a hairline frame with
inward-curved corners. It scales with its container (cqw), so the same
card works in the hero, beside the form and on a phone.
========================================================================== */
.gift-hero { padding-bottom: clamp(44px, 6vw, 96px); overflow: hidden; }
.gift-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 110px); align-items: center; margin-top: clamp(18px, 3vw, 40px); }
.gift-hero__title em { font-style: normal; color: var(--accent-warm); }
.gift-hero__lead { margin-top: clamp(20px, 2.6vw, 32px); max-width: 44ch; }
.gift-hero__cta { margin-top: clamp(26px, 3vw, 40px); }
.gift-hero__cards { position: relative; width: min(100%, 600px); aspect-ratio: 1 / 1.02; margin-inline: auto; }
.gift-hero__cards .gc { position: absolute; width: 52%; box-shadow: 0 40px 70px -36px rgba(20, 26, 18, 0.55), 0 12px 26px -16px rgba(20, 26, 18, 0.4); }
.gift-hero__back { right: 2%; top: 0; transform: rotate(5deg); }
.gift-hero__front { left: 4%; bottom: 0; transform: rotate(-4deg); }
@media (max-width: 820px) {
.gift-hero__grid { grid-template-columns: 1fr; }
.gift-hero__cards { width: min(100%, 440px); }
}
/* --- the card --- */
.gc {
--gc-gold: #d8c6a1;
--gc-tan: #c4ae88;
--gc-paper: #f6f1e7;
--gc-ink: #22241f;
position: relative; width: 100%; aspect-ratio: 5 / 9; container-type: inline-size;
perspective: 1800px; border-radius: 1.2cqw;
}
.gc__inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 0.9s var(--ease-out); }
.gc.is-flipped .gc__inner, .gc--back .gc__inner { transform: rotateY(180deg); }
.gc--back .gc__inner { transition: none; }
.gc__face { position: absolute; inset: 0; overflow: hidden; border-radius: 1.2cqw; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.gc__back { transform: rotateY(180deg); background: var(--gc-paper); color: var(--gc-ink); }
.gc__frame { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--gc-gold); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0.8; pointer-events: none; }
.gc__frame--paper { stroke: var(--gc-tan); opacity: 1; }
/* front: the photograph, darkened towards the words */
.gc__front { background: #121410; color: #f3ecdf; }
.gc__photo, .gc__photo .gc__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gc__photo .gc__img { display: none; filter: saturate(0.9); }
.gc[data-cover="forest"] [data-cover-img="forest"],
.gc[data-cover="sunset"] [data-cover-img="sunset"],
.gc[data-cover="light"] [data-cover-img="light"],
.gc[data-cover="own"] [data-cover-img="own"] { display: block; }
.gc__photo::after { content: ''; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(10, 12, 9, 0.08) 0%, rgba(10, 12, 9, 0.05) 38%, rgba(10, 12, 9, 0.72) 66%, rgba(10, 12, 9, 0.92) 100%); }
.gc__front-text { position: absolute; left: 8cqw; right: 8cqw; bottom: 6.5cqw; display: flex; flex-direction: column; align-items: center; text-align: center; }
.gc__kicker { font-family: var(--sans); font-size: 2.6cqw; letter-spacing: 0.34em; text-transform: uppercase; color: var(--gc-gold); }
.gc__rule { display: block; width: 11cqw; height: 1px; margin: 3.4cqw auto; background: currentColor; opacity: 0.55; }
.gc__front .gc__rule { color: var(--gc-gold); }
.gc__title { display: flex; flex-direction: column; align-items: center; gap: 1.6cqw; font-family: var(--serif); font-weight: 400; text-transform: uppercase; line-height: 1; }
.gc__title span { font-size: 10.5cqw; letter-spacing: 0.02em; }
.gc__title small { font-size: 5.4cqw; letter-spacing: 0.06em; }
.gc__brand { display: flex; flex-direction: column; align-items: center; gap: 1.3cqw; margin-top: 7cqw; }
.gc__brand img { width: 30cqw; height: auto; }
.gc__brand span { font-family: var(--sans); font-size: 1.75cqw; letter-spacing: 0.34em; text-transform: uppercase; color: rgba(243, 236, 223, 0.8); }
.gc__brand span + span { font-size: 1.5cqw; color: rgba(243, 236, 223, 0.6); }
.gc__label { margin-top: 6.5cqw; font-family: var(--sans); font-size: 1.9cqw; letter-spacing: 0.34em; text-transform: uppercase; color: rgba(216, 198, 161, 0.85); }
/* back: paper */
.gc__back-text { position: absolute; inset: 9cqw 11cqw 8cqw; display: flex; flex-direction: column; align-items: center; text-align: center; }
.gc__mark { width: auto; height: 15cqw; opacity: 0.92; }
.gc__vrule { display: block; width: 1px; height: 6cqw; margin: 2.4cqw auto 3.6cqw; background: var(--gc-tan); }
.gc__invite { font-family: var(--serif); font-size: 4.6cqw; line-height: 1.24; text-wrap: balance; text-transform: uppercase; letter-spacing: 0.02em; }
.gc__sub { margin-top: 2.6cqw; font-family: var(--serif); font-style: italic; font-size: 3.2cqw; line-height: 1.4; color: #6a6356; }
.gc__back .gc__rule { color: var(--gc-tan); margin: 4cqw auto 5cqw; opacity: 1; }
.gc__fields { width: 100%; display: grid; gap: 3.4cqw; margin: 0; text-align: left; }
.gc__fields div { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 3cqw; }
.gc__fields dt { font-family: var(--serif); font-size: 3.6cqw; }
.gc__fields dd { margin: 0; padding: 0 0 0.8cqw 1cqw; border-bottom: 1px solid var(--gc-tan); font-family: var(--serif); font-style: italic; font-size: 3.6cqw; line-height: 1.2; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc__msg { margin-top: 3.6cqw; font-family: var(--serif); font-style: italic; font-size: 3.1cqw; line-height: 1.4; color: #4c483f;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.gc__meta { width: 100%; display: flex; justify-content: space-between; gap: 3cqw; margin-top: 4cqw; font-family: var(--serif); font-size: 2.9cqw; }
.gc__meta b { font-weight: 400; border-bottom: 1px solid var(--gc-tan); padding: 0 0.6cqw 0.4cqw; }
.gc__meta span:last-child b { color: #8a6d45; font-weight: 600; }
.gc__inc-h { width: 100%; display: flex; align-items: center; gap: 3cqw; margin-top: 6cqw; font-family: var(--serif); font-size: 2.9cqw; letter-spacing: 0.3em; text-transform: uppercase; }
.gc__inc-h::before, .gc__inc-h::after { content: ''; flex: 1; height: 1px; background: var(--gc-tan); }
.gc__inc { list-style: none; margin: 3.4cqw 0 0; padding: 0; display: grid; gap: 1.8cqw; text-align: left; font-family: var(--serif); font-size: 3cqw; line-height: 1.35; }
.gc__inc li { position: relative; padding-left: 4cqw; }
.gc__inc li::before { content: ''; position: absolute; left: 0.6cqw; top: 0.62em; width: 1.1cqw; height: 1.1cqw; border-radius: 50%; background: var(--gc-ink); }
.gc__closing { margin-top: auto; font-family: var(--serif); font-style: italic; font-size: 3.1cqw; line-height: 1.5; color: #6a6356; }
.gc__site { margin-top: 3cqw; font-family: var(--serif); font-size: 2.8cqw; letter-spacing: 0.2em; }
/* --- 01 what you give --- */
.gift-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(22px, 3vw, 48px); align-items: start; }
.gift-opt__body { padding-top: clamp(16px, 2vw, 24px); }
.gift-opt__meta { color: var(--muted); }
.gift-opt__text { margin-top: 14px; max-width: 46ch; color: var(--ink-soft); line-height: 1.7; }
.gift-opt__inc { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 6px; color: var(--ink-soft); }
.gift-opt__inc li { padding-left: 18px; position: relative; }
.gift-opt__inc li::before { content: '–'; position: absolute; left: 0; color: var(--accent); }
.gift-opt__cta { margin-top: 24px; }
.gift-credit { display: flex; justify-content: space-between; align-items: center; gap: 24px 48px; flex-wrap: wrap; margin-top: clamp(40px, 5vw, 72px); padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--line); }
.gift-credit__body { margin-top: 8px; color: var(--ink-soft); max-width: 48ch; }
.gift-credit__amounts { display: flex; gap: 10px 16px; flex-wrap: wrap; }
@media (max-width: 760px) { .gift-opts { grid-template-columns: 1fr; } }
/* --- 02 the artistic session --- */
.gift-ideas__lead { max-width: 60ch; margin-top: -8px; }
.gift-ideas { list-style: none; margin: clamp(28px, 3.5vw, 48px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(22px, 3vw, 48px); }
.gift-ideas li { display: flex; gap: 14px; align-items: baseline; padding: 18px 0; border-top: 1px solid var(--line); }
.gift-ideas li span { flex: none; color: var(--accent); }
.gift-ideas__own { margin-top: 18px; font-style: italic; color: var(--muted); }
.gift-ideas__cta { margin-top: clamp(28px, 3.5vw, 44px); }
@media (max-width: 900px) {
.gift-ideas { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) { .gift-ideas { grid-template-columns: 1fr; } }
/* --- 04 order --- */
.gift-order { scroll-margin-top: var(--header-h-compact); }
.gift-order__lead { margin: -8px 0 clamp(28px, 4vw, 52px); max-width: 50ch; }
.gift-order__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(34px, 6vw, 110px); align-items: start; }
.gift-order__preview { position: sticky; top: calc(var(--header-h-compact) + 24px); display: grid; gap: 14px; justify-items: center; }
.gift-order__preview .gc { width: min(100%, 360px, calc((100svh - var(--header-h-compact) - 150px) * 5 / 9)); cursor: pointer; box-shadow: 0 34px 60px -34px rgba(20, 26, 18, 0.55), 0 10px 22px -14px rgba(20, 26, 18, 0.35); }
.gift-order__preview .gc:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.gift-order__bar { width: min(100%, 360px); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.gift-order__turn { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.gift-order__turn button { border: 0; background: none; padding: 6px 14px; border-radius: 999px; line-height: 1; color: var(--muted); cursor: pointer; }
.gift-order__turn button[aria-pressed="true"] { background: var(--forest); color: var(--on-dark); }
.gift-order__caption { width: min(100%, 360px); font-style: italic; color: var(--muted); text-align: center; }
.gift-form__msg { min-height: 84px; }
.gift-order .form-done { padding: clamp(10px, 2vw, 30px) 0; }
.gift-covers { display: grid; grid-template-columns: repeat(3, minmax(0, 96px)); gap: 12px; }
.gift-covers input { position: absolute; opacity: 0; pointer-events: none; }
.gift-covers label { display: grid; gap: 7px; cursor: pointer; color: var(--muted); text-align: center; }
.gift-covers img { width: 100%; aspect-ratio: 5 / 9; object-fit: cover; border-radius: 4px; outline: 1px solid var(--line); outline-offset: 3px; transition: outline-color var(--dur-fast) var(--ease); }
.gift-covers input:checked + label { color: var(--ink); }
.gift-covers input:checked + label img { outline: 2px solid var(--forest); }
.gift-covers input:focus-visible + label img { outline: 2px solid var(--accent); }
@media (max-width: 900px) {
.gift-order__grid { grid-template-columns: 1fr; }
.gift-order__preview { position: static; order: -1; }
.gift-order__preview .gc { width: min(78vw, 320px); }
}
/* --- good to know, and using a card --- */
.gift-fine__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 90px); align-items: start; }
.gift-fine__list { list-style: none; margin: 0; padding: 0; }
.gift-fine__list li { padding: 16px 0; border-top: 1px solid var(--line); line-height: 1.65; }
.gift-fine__list li:last-child { border-bottom: 1px solid var(--line); }
.gift-redeem { margin-top: clamp(34px, 4vw, 54px); }
.gift-redeem p { margin-top: 10px; color: var(--ink-soft); max-width: 52ch; line-height: 1.7; }
.gift-redeem__cta { display: flex; align-items: center; gap: 14px 28px; flex-wrap: wrap; margin-top: 20px; }
.gift-redeem__mail { border-bottom: 1px solid var(--accent-soft); }
@media (max-width: 820px) { .gift-fine__grid { grid-template-columns: 1fr; } }
/* ==========================================================================
Series 15c – one button system
A text link for everything but the main invitation (see ellipse() in
dom.ts). Small capitals, a hairline that draws itself, an arrow that moves.
========================================================================== */
.tlink {
display: inline-flex; align-items: baseline; gap: 10px;
padding: 6px 0;
white-space: nowrap;
color: inherit;
}
.tlink__text {
background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
padding-bottom: 5px;
transition: background-size var(--dur) var(--ease-out);
}
.tlink:hover .tlink__text { background-size: 0% 1px; background-position: 100% 100%; }
.tlink__arrow { transition: transform var(--dur) var(--ease-out); }
.tlink:hover .tlink__arrow { transform: translateX(5px); }
.tlink:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.gift-credit__amounts { gap: 10px 28px; }
@media (max-width: 620px) {
.hdr__lang { margin-left: 14px; padding-left: 14px; }
}
/* Series 15c – the buyer's own photograph for the card */
.gift-covers { grid-template-columns: repeat(4, minmax(0, 96px)); }
.gift-covers__plus { display: grid; place-items: center; width: 100%; aspect-ratio: 5 / 9; border: 1px dashed var(--line);
border-radius: 4px; font-family: var(--serif); font-size: var(--fs-h3); color: var(--muted); background-size: cover; background-position: center; }
.gift-covers__plus.has-photo { border-style: solid; color: transparent; }
.gift-covers input:checked + label .gift-covers__plus { outline: 2px solid var(--forest); outline-offset: 3px; }
.field__hint { color: var(--muted); }
.field input[type="file"] { padding: 12px; background: transparent; }
@media (max-width: 420px) { .gift-covers { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } }
.ftr__logo { display: inline-flex; align-items: center; gap: 14px; }
.ftr__logo .ftr__mark { width: auto; height: 40px; }
/* Client galleries and the Sofia page: the blocks that used to carry their
own type in the markup (series 15d). */
.gallery-card__title { margin-top: 22px; }
.local-block { border-top: 1px solid var(--line); padding-top: 20px; }
.local-block h2 { margin-bottom: 12px; }
.local-block p { color: var(--ink-soft); }
/* Thank-you pages (series 15e) – the gift card paid page; padded below the header. */
.page-thanks { padding-top: calc(var(--header-h) + clamp(60px, 9vw, 140px)); }
.page-thanks .eyebrow { margin-bottom: 18px; }
.page-thanks__lead { margin-top: 24px; max-width: 46ch; }
.page-thanks__note { margin-top: 18px; color: var(--muted); }
.page-thanks__note a { border-bottom: 1px solid var(--accent-soft); }
.page-thanks__more { margin-top: clamp(34px, 5vw, 60px); }
.page-thanks__more .index-list { margin-top: 16px; }
/* Back from Stripe without paying: the note at the top of the order form. */
.gift-cancelled {
margin: 0 0 clamp(22px, 3vw, 32px); padding: 14px 18px;
background: var(--paper); border-left: 2px solid var(--accent); border-radius: 4px;
color: var(--ink);
}
/* ===== motion.css ===== */
/* ============================================================================
CECICAPTURE – motion
Every effect here is opt-in via a data attribute and every one of them is
switched off wholesale by prefers-reduced-motion at the bottom of the file.
Nothing animates layout; only transform, opacity and clip-path.
========================================================================== */
/* --- Scroll reveal --------------------------------------------------------
[data-reveal] starts hidden and is un-hidden by IntersectionObserver, which
adds .is-in. If JS never runs, .no-js on keeps everything visible. */
[data-reveal] {
opacity: 0;
transform: translate3d(0, 26px, 0);
transition:
opacity var(--dur-reveal) var(--ease-out),
transform var(--dur-reveal) var(--ease-out);
transition-delay: var(--reveal-delay, 0ms);
will-change: opacity, transform;
}
/* Drop the compositing layer once the reveal is done: keeping it costs memory
and, on text over a photograph, can leave a faint seam where the layer ends. */
[data-reveal].is-in { opacity: 1; transform: none; will-change: auto; }
/* A photograph arrives by uncovering itself, not by sliding. */
[data-reveal="mask"] {
opacity: 1;
transform: none;
clip-path: inset(0 0 100% 0);
transition: clip-path 1.35s var(--ease-out);
transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal="mask"].is-in { clip-path: inset(0 0 0 0); will-change: auto; }
/* Inside a mask reveal the image itself settles from a slight scale. */
[data-reveal="mask"] img {
transform: scale(1.08);
transition: transform 1.9s var(--ease-out);
transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal="mask"].is-in img { transform: scale(1); }
[data-reveal="fade"] { transform: none; }
/* Headlines rise line by line from behind a clipping edge. */
.reveal-lines { display: block; }
.reveal-lines .line { display: block; overflow: hidden; }
.reveal-lines .line > span {
display: block;
transform: translate3d(0, 108%, 0);
transition: transform 1.05s var(--ease-out);
transition-delay: calc(var(--reveal-delay, 0ms) + var(--line-delay, 0ms));
}
.reveal-lines.is-in .line > span { transform: none; }
/* Stagger children without writing a delay on each one. */
[data-stagger] > * { --reveal-delay: calc(var(--i, 0) * 90ms); }
/* --- Hero ----------------------------------------------------------------- */
/* A very slow drift. Two and a half minutes to travel 4% – you feel it
without seeing it, which is the point. */
.kenburns img {
animation: kenburns 46s var(--ease-in-out) infinite alternate;
will-change: transform;
}
@keyframes kenburns {
from { transform: scale(1.0) translate3d(0, 0, 0); }
to { transform: scale(1.06) translate3d(0, -1.2%, 0); }
}
/* First paint: the hero image uncovers from the bottom edge. */
.hero-uncover { animation: heroUncover 1.6s var(--ease-out) both; }
@keyframes heroUncover {
from { clip-path: inset(0 0 100% 0); }
to { clip-path: inset(0 0 0 0); }
}
/* --- Marquee -------------------------------------------------------------- */
.marquee { overflow: hidden; display: flex; user-select: none; }
.marquee__track {
display: flex;
flex: none;
gap: clamp(30px, 5vw, 76px);
padding-right: clamp(30px, 5vw, 76px);
animation: marquee 46s linear infinite;
will-change: transform;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-100%, 0, 0); }
}
/* --- Progress + scroll cues ----------------------------------------------- */
.scroll-cue {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.scroll-cue::after {
content: "";
width: 1px; height: 34px;
background: currentColor;
transform-origin: top;
animation: cue 2.6s var(--ease-in-out) infinite;
}
@keyframes cue {
0% { transform: scaleY(0); opacity: 0; }
35% { transform: scaleY(1); opacity: 0.9; }
100% { transform: scaleY(1); opacity: 0; transform-origin: bottom; }
}
.read-progress {
position: fixed; inset: 0 0 auto; height: 2px; z-index: var(--z-header);
background: var(--accent);
transform: scaleX(var(--progress, 0));
transform-origin: left;
}
/* --- Cursor label (desktop gallery affordance) ---------------------------- */
.cursor-label {
position: fixed;
top: 0; left: 0;
z-index: 190;
pointer-events: none;
display: grid;
place-items: center;
width: 92px; height: 92px;
margin: -46px 0 0 -46px;
border-radius: 50%;
background: rgba(35, 44, 33, 0.86);
color: var(--on-dark);
opacity: 0;
transform: scale(0.6);
transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease-out);
backdrop-filter: blur(3px);
}
.cursor-label.is-on { opacity: 1; transform: scale(1); }
@media (hover: none), (max-width: 900px) { .cursor-label { display: none; } }
/* --- Page transitions (Astro View Transitions + CSS fallback) ------------- */
@keyframes pageIn { from { opacity: 0; transform: translate3d(0, 12px, 0); } to { opacity: 1; transform: none; } }
::view-transition-old(root) { animation: 260ms var(--ease) both fadeOutSoft; }
::view-transition-new(root) { animation: 420ms var(--ease-out) both pageIn; }
@keyframes fadeOutSoft { to { opacity: 0; } }
/* --- Preloader ------------------------------------------------------------ */
.preloader {
position: fixed; inset: 0; z-index: 300;
display: grid; place-items: center;
background: var(--paper);
transition: opacity 0.7s var(--ease), visibility 0.7s;
}
.preloader.is-done { opacity: 0; visibility: hidden; }
.preloader__mark {
font-family: var(--serif);
font-size: var(--fs-h3);
letter-spacing: 0.34em;
text-indent: 0.34em;
color: var(--ink);
overflow: hidden;
}
.preloader__mark span { display: inline-block; animation: markIn 0.9s var(--ease-out) both; }
.preloader__mark img { display: block; width: clamp(180px, 22vw, 280px); height: auto; animation: markIn 0.9s var(--ease-out) both; }
@keyframes markIn { from { transform: translateY(110%); } to { transform: none; } }
.preloader__bar {
position: absolute; bottom: 0; left: 0; height: 1px;
background: var(--accent);
width: 100%;
transform: scaleX(var(--load, 0)); transform-origin: left;
transition: transform 0.4s var(--ease);
}
/* --- Reduced motion: everything above becomes a plain, instant page -------- */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
[data-reveal], [data-reveal="mask"] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
[data-reveal="mask"] img, .kenburns img { transform: none !important; animation: none !important; }
.reveal-lines .line > span { transform: none !important; }
.marquee__track { animation: none !important; }
.scroll-cue::after { animation: none !important; opacity: 0.5; }
.cursor-label { display: none !important; }
.preloader { display: none !important; }
}
/* No JavaScript? Then nothing is hidden. */
.no-js [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
.no-js .reveal-lines .line > span { transform: none !important; }
.no-js .preloader { display: none; }
/* ===== type.css ===== */
/* ============================================================================
CECICAPTURE – type
Every text on the site is one of seven styles. This file is the only place
that sets font family, size, weight, tracking, case and (for text) leading;
the components set colour and spacing only. A new element joins a role
here instead of getting its own size.
H1 page title – once per page STIX 44–88
H2 section title, and the big statement lines STIX 32–56
H3 card, step and list titles, big prices STIX 22–30
Lead the intro under a title, short statements,
questions and small serif titles STIX 18–21
Body everything that is read as text Inter 16–17
Small notes, captions, hints, form messages Inter 15
Label capitals: eyebrows, numbers, menus, links,
buttons, form labels, footer Inter 12
Loaded last, so a role wins over anything older.
========================================================================== */
/* --- H1 ------------------------------------------------------------------- */
h1, .home-intro__title, .hero__title, .legal-hero__title, .home-hero__title,
.contact-hero__title, .gift-hero__title {
font-family: var(--serif);
font-size: var(--fs-h1);
font-weight: 400;
line-height: 1.04;
letter-spacing: -0.02em;
text-transform: none;
}
/* --- H2 ------------------------------------------------------------------- */
h2, .pull-quote, .quote-hero, .form-done__title, .stat b, .home-services__title, .pk__name,
.pk-dest__title, .home-meet__title, .big-head__title, .contact-aside__title, .home-work__title,
.home-banner__title, .pk-exp__line, .about-quote, .pf-block__name, .gift-fine__title {
font-family: var(--serif);
font-size: var(--fs-h2);
font-weight: 400;
line-height: 1.08;
letter-spacing: -0.015em;
text-transform: none;
}
/* --- H3 ------------------------------------------------------------------- */
h3, h4, .prose h2, .mnav__link, .index-list__name, .pkg__name, .pkg__price b, .steps__item h3,
.post-card h3, .marquee__track span, .svc-list__name, .pk__price, .pk-includes__title,
.pk-extra__title, .pk-card__name, .pk-card__price, .svc-card__name, .gift-credit__title,
.gift-redeem h3, .tiers__len, .tiers__cell .tiers__len, .pk-dest__price,
.post-card__title, .gallery-card__title, .local-block h2 {
font-family: var(--serif);
font-size: var(--fs-h3);
font-weight: 400;
line-height: 1.16;
letter-spacing: -0.01em;
text-transform: none;
}
/* --- Lead ----------------------------------------------------------------- */
h5, .lead, .prose h3, .legal-hero__intro, .prose blockquote, .quote-card blockquote,
.home-hero__sub, .home-way__text .home-way__lead, .pk-exp__text .pk-exp__lead,
.about-text .about-text__lead, .about-cta__text, .contact-hero__lead, .contact-aside__noforms,
.big-head__sub, .home-banner__body, .pf-block__intro, .gift-ideas li, .gift-ideas__own,
.faq__q, .plans label b, .consent h2, .mnav__sub a, .contact-aside__phone,
.work-tile__label b {
font-family: var(--serif);
font-size: var(--fs-lead);
font-weight: 400;
line-height: 1.42;
letter-spacing: 0;
text-transform: none;
}
/* --- Body ----------------------------------------------------------------- */
.hero__sub, .field input, .field textarea, .field select, .tiers__cell p, .steps__item p,
.post-card p, .pk__list li, .pk-includes__grid p, .gift-opt__inc, .svc-card__note,
.home-way__text p, .home-meet__text p, .about-text p, .pk-exp__text p, .ledger__row dt {
font-family: var(--sans);
font-size: var(--fs-body);
font-weight: 400;
font-style: normal;
line-height: 1.65;
letter-spacing: 0;
text-transform: none;
}
.pk-includes__grid b, .svc-card__price, .ledger__row dd, .ledger--light .ledger__row dd {
font-family: var(--sans);
font-size: var(--fs-body);
font-weight: 500;
line-height: 1.5;
letter-spacing: 0;
text-transform: none;
}
/* --- Small ---------------------------------------------------------------- */
.legal__toc ol a, .consent-row label, .form__status, .plans label span, .form__note,
.consent-row--plain label, .prices-note, .consent p, .notice p, .svc-list__sub,
.svc-list__price, .ledger--light .ledger__row dt small, .gift-order__caption,
.gift-redeem__mail, .field__hint, .field__error, .form__alt, .cal__note, .consent__toggle small, .page-thanks__note, .gift-cancelled {
font-family: var(--sans);
font-size: var(--fs-small);
font-weight: 400;
line-height: 1.55;
letter-spacing: 0;
text-transform: none;
}
/* --- Label ---------------------------------------------------------------- */
.skip-link, .eyebrow, .label-link, .btn, .nav-link, .media__caption, .hdr__lang, .hdr__menu,
.hdr__connect, .mnav-more a, .ftr__col a, .ftr__col p, .ftr__links a, .ftr__copy,
.ftr__legal a, .ftr__legal button, .home-intro__sub, .legal-hero__updated,
.legal__toc ol a span, .legal__also, .legal__n, .index-list__num, .index-list__meta, .pkg__num,
.pkg__coverage, .pkg__includes li, .pkg__price span, .tiers__cell h3, .tiers__cell li,
.steps__num, .quote-card figcaption, .post-card__meta, .post-hero__meta, .field > label,
.choices label, .field__legend, .form__callout-title, .alts__list a, .lightbox__bar,
.lightbox button, .lightbox__caption, .consent__actions .btn, .consent__toggle span,
.stat span, .breadcrumbs, .pk__num, .pk__facts, .pk__label, .pk-dest__moments,
.ellipse, .big-head__num, .pf-block__num, .gift-opt__meta, .gift-ideas li span,
.gift-covers label, .gift-order__turn button, .tlink, .scroll-cue, .cursor-label {
font-family: var(--sans);
font-size: var(--fs-label);
font-weight: 500;
letter-spacing: var(--track-label);
text-transform: uppercase;
}
/* Bold inside text stays in the text's face, one step heavier. */
b, strong { font-weight: 600; }