/* =============================================================
ENDOMETRIOSIS RESET METHOD · stylesheet
Editorial, warm, neutral. Built for slow looking.
============================================================= */
/* -----------------------------------------------------------
1. TOKENS
----------------------------------------------------------- */
:root {
/* Palette */
--bone: #F4ECDD;
--bone-deep: #EDE2CD;
--warm-white: #FAF5EB;
--cream: #F8EFE0;
--clay: #C18B72;
--clay-deep: #A26F58;
--blush: #ECD3C6;
--blush-deep: #DDB8A6;
--sage: #8FA088;
--cocoa: #2C201A;
--cocoa-soft: #3E2E25;
--taupe: #857263;
--taupe-soft: #A99784;
--line: rgba(44, 32, 26, 0.18);
--line-soft: rgba(44, 32, 26, 0.08);
/* Type */
--font-display: "Cormorant Garamond", "EB Garamond", Georgia, serif;
--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
--font-accent: "Italiana", "Cormorant Garamond", serif;
/* Scale */
--step--2: clamp(0.69rem, 0.66rem + 0.13vw, 0.76rem);
--step--1: clamp(0.83rem, 0.79rem + 0.21vw, 0.95rem);
--step-0: clamp(1rem, 0.95rem + 0.27vw, 1.15rem);
--step-1: clamp(1.20rem, 1.13rem + 0.36vw, 1.39rem);
--step-2: clamp(1.44rem, 1.34rem + 0.48vw, 1.69rem);
--step-3: clamp(1.73rem, 1.59rem + 0.65vw, 2.06rem);
--step-4: clamp(2.07rem, 1.88rem + 0.87vw, 2.50rem);
--step-5: clamp(2.49rem, 2.22rem + 1.16vw, 3.04rem);
--step-6: clamp(2.99rem, 2.62rem + 1.55vw, 3.69rem);
--step-7: clamp(3.58rem, 3.08rem + 2.07vw, 4.49rem);
--step-8: clamp(4.30rem, 3.62rem + 2.76vw, 5.45rem);
--step-9: clamp(5.16rem, 4.24rem + 3.69vw, 6.62rem);
/* Layout */
--gutter: clamp(1.25rem, 4vw, 3rem);
--content: 78rem;
--reading: 38rem;
/* Motion · three speed tiers + intentional easings */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--ease-snap: cubic-bezier(0.4, 0, 0.2, 1);
--ease-breath: cubic-bezier(0.45, 0, 0.55, 1); /* sinusoidal */
--ease-overshoot: cubic-bezier(0.34, 1.56, 0.64, 1);
--speed-snap: 0.25s;
--speed-patient: 1.0s;
--speed-ambient: 4.5s;
--slow: 1.2s;
--med: 0.6s;
--fast: 0.3s;
/* Live state · written by main.js */
--breath: 0.5; /* 0..1 sine wave, 4s period */
--title-scale-y: 1; /* hero title compresses on fast scroll */
}
/* ----- Time-of-day palette nudges ----- */
/* Subtle bone-tone shifts so the site is never exactly the same twice.
JS sets [data-warmth] on based on Europe/Lisbon hour. */
[data-warmth="dawn"] { --bone: #F4EAD8; --bone-deep: #EDDFC6; }
[data-warmth="midday"] { --bone: #F4ECDD; --bone-deep: #EDE2CD; }
[data-warmth="afternoon"] { --bone: #F2E7D2; --bone-deep: #EAD9BE; }
[data-warmth="evening"] { --bone: #EDE3D2; --bone-deep: #E0D3BC; }
html { transition: background-color 4s var(--ease-breath); }
/* -----------------------------------------------------------
SKIP-TO-CONTENT · visible only on keyboard focus
----------------------------------------------------------- */
.skip-link {
position: absolute;
top: -100px;
left: 1rem;
z-index: 200;
background: var(--cocoa);
color: var(--cream);
padding: 0.6rem 1rem;
border-radius: 6px;
font-size: var(--step--1);
letter-spacing: 0.04em;
text-decoration: none;
box-shadow: 0 6px 18px -8px rgba(44, 32, 26, 0.5);
transition: top 0.18s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
top: 1rem;
outline: none;
}
/* -----------------------------------------------------------
2. RESET / BASE
----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html, body { height: 100%; }
html {
scroll-behavior: auto; /* Lenis handles this */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
background: var(--bone);
color: var(--cocoa);
}
body {
font-family: var(--font-body);
font-size: var(--step-0);
line-height: 1.55;
font-weight: 400;
background: var(--bone);
color: var(--cocoa);
overflow-x: hidden;
cursor: none; /* using custom cursor */
}
body.no-cursor { cursor: auto; }
img, svg, picture, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { background: none; border: 0; color: inherit; font: inherit; cursor: none; }
input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--clay); color: var(--warm-white); }
/* Subtle paper grain over everything */
body::before {
content: "";
position: fixed; inset: 0;
pointer-events: none;
z-index: 1;
opacity: 0.06;
mix-blend-mode: multiply;
background-image: url("data:image/svg+xml;utf8,");
}
/* -----------------------------------------------------------
3. TYPOGRAPHY
----------------------------------------------------------- */
.display, h1, h2, h3, h4 {
font-family: var(--font-display);
font-weight: 300;
line-height: 1.05;
letter-spacing: -0.01em;
color: var(--cocoa);
}
h1 { font-size: var(--step-8); }
h2 { font-size: var(--step-6); }
h3 { font-size: var(--step-4); }
h4 { font-size: var(--step-2); }
.italic, em { font-style: italic; }
.serif-italic {
font-family: var(--font-display);
font-style: italic;
font-weight: 300;
}
.accent-display {
font-family: var(--font-accent);
font-weight: 400;
letter-spacing: 0.02em;
}
.eyebrow {
font-family: var(--font-body);
font-size: var(--step--1);
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--taupe);
}
.eyebrow::before {
content: "";
display: inline-block;
width: 28px; height: 1px;
background: var(--taupe);
vertical-align: middle;
margin-right: 14px;
transform: translateY(-2px);
}
.lede {
font-family: var(--font-display);
font-size: var(--step-3);
font-weight: 300;
line-height: 1.3;
color: var(--cocoa-soft);
font-style: italic;
}
p { color: var(--cocoa-soft); }
p + p { margin-top: 1em; }
a.link-underline {
position: relative;
display: inline-block;
padding-bottom: 0;
transition: color var(--med) var(--ease-out);
}
a.link-underline::after { display: none; }
a.link-underline:hover { color: var(--clay-deep); }
/* -----------------------------------------------------------
4. LAYOUT
----------------------------------------------------------- */
.wrap {
width: 100%;
max-width: var(--content);
margin-inline: auto;
padding-inline: var(--gutter);
position: relative;
}
.wrap--narrow { max-width: 56rem; }
.wrap--reading { max-width: var(--reading); }
section { position: relative; }
.section-pad { padding-block: clamp(5rem, 10vw, 9rem); }
.section-pad-l { padding-block: clamp(7rem, 14vw, 12rem); }
.section-pad-s { padding-block: clamp(3rem, 6vw, 5rem); }
.divider-line {
width: 100%;
height: 1px;
background: var(--line-soft);
}
/* -----------------------------------------------------------
5. CUSTOM CURSOR
----------------------------------------------------------- */
.cursor-dot,
.cursor-halo {
position: fixed;
top: 0; left: 0;
pointer-events: none;
z-index: 9999;
border-radius: 999px;
will-change: transform;
mix-blend-mode: multiply;
}
.cursor-dot {
width: 6px; height: 6px;
background: var(--cocoa);
transform: translate3d(-50%, -50%, 0);
}
.cursor-halo {
width: 38px; height: 38px;
border: 1px solid var(--cocoa);
transform: translate3d(-50%, -50%, 0);
transition: width 0.35s var(--ease-out),
height 0.35s var(--ease-out),
background-color 0.35s var(--ease-out),
border-color 0.35s var(--ease-out),
opacity 0.35s var(--ease-out);
}
.cursor-halo.is-hover {
width: 72px; height: 72px;
background: rgba(193, 139, 114, 0.25);
border-color: var(--clay);
}
/* Over portrait images: the cursor stays in its default soft state
(no dark VIEW badge over her face). Class is still toggled by JS
in case we want a subtle treatment later, but it's a visual no-op. */
.cursor-halo.is-image { /* intentionally empty */ }
.cursor-halo.is-text { opacity: 0; }
.cursor-hidden { opacity: 0 !important; }
@media (hover: none) {
body { cursor: auto; }
.cursor-dot, .cursor-halo { display: none; }
}
/* -----------------------------------------------------------
6. NAVIGATION
----------------------------------------------------------- */
.nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
padding: 1.25rem var(--gutter);
display: flex;
align-items: center;
justify-content: space-between;
/* Subtle initial backdrop so the nav stays readable on any section,
not just before-scroll over the cream hero. */
background: rgba(248, 239, 224, 0.55);
backdrop-filter: blur(8px) saturate(115%);
-webkit-backdrop-filter: blur(8px) saturate(115%);
transition: background-color var(--med) var(--ease-out),
backdrop-filter var(--med) var(--ease-out),
padding var(--med) var(--ease-out),
border-color var(--med) var(--ease-out),
box-shadow var(--med) var(--ease-out);
border-bottom: 1px solid rgba(99, 79, 68, 0.06);
}
.nav.is-scrolled {
background: rgba(244, 236, 221, 0.94);
backdrop-filter: blur(16px) saturate(120%);
-webkit-backdrop-filter: blur(16px) saturate(120%);
padding: 0.85rem var(--gutter);
border-bottom-color: rgba(99, 79, 68, 0.16);
box-shadow: 0 6px 22px -16px rgba(44, 32, 26, 0.18);
}
.nav-brand {
display: inline-flex;
align-items: center;
gap: 0.7rem;
color: var(--cocoa);
}
.nav-brand-mark {
width: 32px; height: 32px;
color: var(--cocoa);
transition: transform var(--slow) var(--ease-out);
}
.nav-brand:hover .nav-brand-mark { transform: rotate(180deg); }
.nav-brand-text {
font-family: var(--font-display);
font-style: italic;
font-weight: 300;
font-size: 1.25rem;
letter-spacing: 0.04em;
line-height: 1;
}
.nav-links {
display: flex;
align-items: center;
gap: 2.2rem;
list-style: none;
}
.nav-links a {
font-size: var(--step--1);
letter-spacing: 0.04em;
color: var(--cocoa-soft);
position: relative;
transition: color var(--fast) var(--ease-out);
}
.nav-links a:hover { color: var(--clay-deep); }
.nav-cta {
margin-left: 0.6rem;
}
/* ===== Mobile nav drawer ============================================
Hamburger button (hidden on desktop, shown ≤880px) toggles a drawer
that slides in from the right with all nav links. Replaces the
previous 'hide links on mobile' approach which left phone users
unable to navigate the site. */
.nav-toggle {
display: none;
background: transparent;
border: 0;
padding: 0.6rem;
margin: -0.6rem -0.4rem -0.6rem 0;
cursor: none;
z-index: 102;
position: relative;
}
.nav-toggle__line {
display: block;
width: 24px;
height: 1.6px;
background: var(--cocoa);
margin: 5px 0;
border-radius: 1px;
transition: transform 0.32s var(--ease-out),
opacity 0.2s var(--ease-out);
}
.nav-backdrop {
position: fixed;
inset: 0;
background: rgba(44, 32, 26, 0.35);
backdrop-filter: blur(2px);
opacity: 0;
visibility: hidden;
transition: opacity 0.32s var(--ease-out), visibility 0s linear 0.32s;
z-index: 99;
cursor: none;
}
@media (max-width: 880px) {
.nav-toggle { display: block; }
/* The