/* Aeterna Design portfolio styles — Sprint 3.
REDESIGN V4 — lote 5 rewrite (docs/planning/REDESIGN_SPEC.md).
Ref.: redesign/mockups/src/page-design.html. Dark/gold editorial
canvas (--espresso/--cream/--gold), matching the shared v4 primitives
already in styles.css (.cta/.card/.rv/.sec-head/.eyebrow/.display/
.body-copy/.quoteband/.noteband/.rule). The old process-steps section
left the markup (design.js never referenced `.design-process`), so
that block is removed here rather than carried forward unused. */
/* In-context layout editor — "projects-grid" sets --tune-fs (cascades to
the card title/meta/intro rules below) and --tune-w (this wrapper's own
width, centered when narrower than the section). Both default to 1 —
the grid is unaffected until an admin actually tunes it. */
.design-grid {
display: grid;
/* Composition pass v4 (2026-08, 4th/decisive pass) — 300px min fits
exactly 3 columns at 1280px (spec: "grid 3 colunas em 1280"), flat
36px gap instead of a clamp. design.js markup is untouched; only
the card presentation below changes. */
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 36px;
margin-top: 48px;
max-width: calc(100% * var(--tune-w, 1));
margin-inline: auto;
}
/* Sprint 5.7 (F4) — editorial briefing form on the green section.
Two-column on desktop, single on mobile. Lote 5 — boxed fields on
the v4 dark canvas (was transparent + underline on the old green
section background). The full-width fields (notes textarea, submit
button) span both columns via .design-form__field--full. */
.design-form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px 32px;
margin-top: 32px;
max-width: 720px;
}
@media (max-width: 720px) { .design-form { grid-template-columns: 1fr; gap: 24px; } }
.design-form label {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}
.design-form label.design-form__field--full,
.design-form > label:has(textarea),
.design-form > button { grid-column: 1 / -1; }
.design-form span {
font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
font-size: 9px;
letter-spacing: .3em;
text-transform: uppercase;
color: var(--theme-accent);
}
.design-form input,
.design-form select,
.design-form textarea {
width: 100%;
background: var(--theme-field-bg);
border: 1px solid var(--theme-field-border);
border-radius: 0;
padding: 14px 16px;
font-family: 'Cormorant Garamond', serif;
font-size: 16px;
color: var(--theme-ink);
color-scheme: dark;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
html[data-theme="light"] .design-form input,
html[data-theme="light"] .design-form select,
html[data-theme="light"] .design-form textarea { color-scheme: light; }
/* Native option list inherits the OS — force readable colours. */
.design-form select option {
background: var(--theme-canvas-alt);
color: var(--theme-ink);
}
.design-form select {
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 4px center;
/* Sprint 5.9 — explicit cap so the SVG never expands to its
natural size (was rendering ~280px on prod for the same reason
as the date-picker icon bug). */
background-size: 10px 6px !important;
padding-right: 22px;
}
/* Light mode — same cream-stroke-on-marfim contrast issue as styles.css's
.learn-form select; swap in an ink-coloured copy of the same glyph. */
html[data-theme="light"] .design-form select {
background-image: url("data:image/svg+xml;utf8,");
}
.design-form input:focus,
.design-form select:focus,
.design-form textarea:focus {
outline: 0;
border-color: var(--gold-70);
}
.design-form input::placeholder,
.design-form textarea::placeholder { color: rgba(241, 233, 216, .4); }
html[data-theme="light"] .design-form input::placeholder,
html[data-theme="light"] .design-form textarea::placeholder { color: rgba(36, 27, 18, .35); }
.design-form textarea {
font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
text-transform: none;
font-size: 14px;
line-height: 1.7;
min-height: 140px;
resize: vertical;
}
.design-form button {
justify-self: start;
margin-top: 8px;
background: var(--gold);
color: var(--espresso);
border: 1px solid var(--gold);
border-radius: 999px;
padding: 14px 34px;
font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
font-size: 11px;
letter-spacing: .3em;
text-transform: uppercase;
font-weight: 400;
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease;
}
.design-form button:hover { background: var(--gold-70); border-color: var(--gold-70); opacity: 1; }
.design-form__feedback {
font-family: 'Cormorant Garamond', serif;
font-size: 16px;
color: var(--theme-ink-72);
background: rgba(201, 164, 106, .08);
padding: 12px 16px;
border-left: 2px solid var(--gold);
}
.design-grid .design-card {
background: var(--theme-hair-soft);
border: 1px solid var(--theme-hair);
border-radius: 0;
box-shadow: none;
overflow: hidden;
text-decoration: none;
color: inherit;
display: flex;
flex-direction: column;
transition: transform 0.4s ease, border-color 0.4s ease;
}
.design-grid .design-card:hover {
transform: translateY(-4px);
border-color: var(--gold-40);
box-shadow: none;
}
.design-grid .design-card__media {
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--theme-canvas-alt);
}
.design-grid .design-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
.design-grid .design-card:hover .design-card__media img { transform: scale(1.04); }
/* Composition pass (2026-08) — reference-style caption: small caps title
+ a smaller descriptor line, both centered under the photo (was a
left-aligned Bodoni headline). design.js markup unchanged — .design-
card__title/__meta/__intro still map 1:1 to title/location·year·scope/
short_intro, only the type treatment moves. */
.design-grid .design-card__body { padding: 22px 12px 30px; text-align: center; }
.design-grid .design-card__title {
font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
font-weight: 500;
font-size: calc(11.5px * var(--tune-fs, 1));
letter-spacing: .22em;
text-transform: uppercase;
color: var(--theme-ink);
margin: 0 0 8px;
}
.design-grid .design-card__meta {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 400;
font-size: calc(15px * var(--tune-fs, 1));
letter-spacing: 0;
color: var(--theme-accent-muted);
margin: 0 0 8px;
text-transform: none;
}
.design-grid .design-card__intro {
font-family: 'Cormorant Garamond', serif;
font-weight: 400;
font-size: calc(15px * var(--tune-fs, 1));
line-height: 1.75;
color: var(--theme-ink-72);
max-width: 34ch;
margin: 0 auto;
}
/* ══════════════════════════════════════════════════════════════
Homes rewrite (2026-08) — editorial methodology page, replacing the
old "Restoration & Design" portfolio-first layout. THE LINE and the
Leah two-column portrait keep their original rules untouched (per
spec — do not touch). The old §4 interiors strip and §6 atelier
blocks are gone with the sections that used them. `.intro-band`
itself is untouched (nothing on this page uses it any more, but the
shared primitive stays — cheap, low-risk, no reason to delete it
from styles.css for this). `.eyebrow--ruled` adds the
hairline-flanked treatment to the one eyebrow that stays centered
(the method's `.sec-head`); split eyebrows stay left-aligned and
ruleless per spec.
Composition pass v3 (2026-08, 3rd pass) — dark editorial reference
("Emilia Laurent"-style: charcoal + gold + serif). Contained hero
band (not full-height), a full-bleed 50/50 `.d-split` (photo
touching the viewport edge), a densified 4-column "Thoughtful
transformation" row, and a new testimonial band.
Composition pass v4 (2026-08, 4th/decisive pass) — SYSTEM rewrite.
The owner rejected v3 ("sobrecarregada, sem recuo e harmonia entre
blocos, sem respiro"): v3 copied elements from the editorial
reference but not the underlying grid that makes it work. `.d-split`
loses its full-bleed behaviour (S1: every section, including splits,
now lives inside the shared 1280 container); the principles row is
gone; Method moves back ahead of Transformation; Selected Projects
moves up to right after THE LINE. See the S2/S4 rhythm block near
the end of this file for the uniform vertical padding + hero overlay
rewrite. THE LINE and the Leah portrait are still untouched, per
spec, same as every previous pass.
══════════════════════════════════════════════════════════════ */
/* §1 — Hero: contained band, not the shared 78dvh `.aeterna-hero--inner`
height. Compound selector (2 classes) beats the single-class shared
rule on specificity regardless of stylesheet order, so this only
ever affects design.html — the other 7 pages still on plain
`.aeterna-hero--inner` (properties/property/experiences/services/
investment-vision/learn) are untouched. */
/* Contained band, but with explicit vertical padding: the copy is
vertically CENTERED in this short hero, so without its own padding the
first lines sit at y=0 — behind the fixed header (measured: eyebrow at
0 vs header bottom 97px once the owners' longer editor copy wrapped to
more lines). min-height still lets the band grow with any copy length. */
.d-hero.aeterna-hero--inner {
min-height: clamp(480px, 62vh, 640px);
padding-top: clamp(112px, 16vh, 150px);
padding-bottom: clamp(48px, 7vh, 72px);
}
/* One display voice for the whole title (Leah, 2026-08-04): the two-tone
Bodoni-caps + Cormorant-italic hero was rejected once the copy became
editable — both spans now share the same treatment, declared on the h1
so future spans inherit it too. */
.d-hero__title {
line-height: 1.14;
font-family: 'Bodoni Moda', 'Times New Roman', serif;
font-weight: 400;
text-transform: uppercase;
letter-spacing: .1em;
}
.d-hero__cta {
display: inline-flex;
align-items: center;
margin-top: 40px;
background: var(--gold);
color: var(--espresso);
border: 1px solid var(--gold);
border-radius: 999px;
padding: 13px 30px;
font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
font-size: 10.5px;
letter-spacing: .3em;
text-transform: uppercase;
transition: background .5s var(--ease), border-color .5s var(--ease);
}
.d-hero__cta:hover { background: var(--gold-70); border-color: var(--gold-70); }
/* Centered eyebrow with a thin gold hairline on each side — additive
modifier, only ever combined with `.eyebrow`, so the shared
site-wide `.eyebrow` base rule in styles.css is untouched and every
other page's eyebrow (mostly left-aligned) is unaffected. */
.eyebrow--ruled {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
}
.eyebrow--ruled::before,
.eyebrow--ruled::after {
content: '';
flex: 0 1 56px;
height: 1px;
background: linear-gradient(90deg, var(--theme-hair), var(--theme-rule));
}
.eyebrow--ruled::after { background: linear-gradient(90deg, var(--theme-rule), var(--theme-hair)); }
/* Contained 1fr/1.1fr photo+text split — composition pass v4 (system
rewrite, S1). Previously full-bleed (max-width:none/width:100%/
margin:0/padding:0, photo touching the viewport edge); the owner
rejected that ("sem recuo") so the split now lives INSIDE the
section's own container — `.aeterna-section`'s max-width:1280/
margin:auto/padding is untouched and does all the containment work,
`.d-split` only supplies the 2-column grid. The photo fills its own
column (via `aspect-ratio`, scoped per section below), never the
viewport. Order in the DOM still sets the desktop left/right side
(no `--rev` modifier needed); `` mirrors the grid
natively for AR. The old Philosophy-only .82fr/1fr override is gone
— the base ratio is asymmetric now, so every split (Philosophy,
Hospitality, Assessment) shares one rule, which is the whole point
of the rewrite (repetition, not per-section tuning). */
.d-split {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: clamp(48px, 6vw, 88px);
align-items: center;
}
/* Assessment also carries `--alt` for its espresso-2 tint, and
`.aeterna-section--alt` full-bleeds (max-width:none/width:100%) —
correct for THE LINE/testimonial's background-only exception, wrong
here since this section's CONTENT (form + photo) must stay
contained like every other split. Background stays --espresso-2;
the box itself goes back to the standard 1280 container. */
#briefing.aeterna-section--alt {
max-width: 1280px;
width: auto;
margin: 0 auto;
}
/* In-context layout editor — "assessment-copy" (whole assessment copy
column: eyebrow/title/lead/capsline/footnote, not the form fields).
Scoped to #briefing only (id specificity) so philosophy's and
hospitality's `.d-split__copy` — same shared class, no whole-column
tune key of their own — are completely untouched. Font-size uses the
"1em" identity trick (see .body-copy in styles.css): it scales
whatever each child would already render at, not a hardcoded value. */
#briefing .d-split__copy {
/* --tune-fs is NOT re-declared as this element's own font-size on
purpose (see the .d-leah__copy comment above — would double-compound
with any "1em"-relative descendant). It still cascades to every
child's own font-size formula (.eyebrow / .aeterna-section__title /
.d-split__copy .lead / .capsline), each keyed off its own absolute
base value. */
max-width: calc(100% * var(--tune-w, 1));
text-align: var(--tune-align, inherit);
}
.d-split__copy {
display: flex;
flex-direction: column;
justify-content: center;
gap: 0;
}
/* S3 — internal hierarchy rhythm: eyebrow → 16px → title → 28px →
corpo → 40px → resto, repeated identically on every split's copy
column (was a flat 22px gap for every pair regardless of role). */
.d-split__copy .eyebrow { margin: 0; }
.d-split__copy .aeterna-section__title { margin: 16px 0 0; }
.d-split__copy .lead { margin-top: 28px; }
.d-split__copy .body-copy { margin-top: 16px; }
.d-split__copy .capsline { margin-top: 40px; }
.d-split__copy .design-form { margin-top: 40px; }
.d-split__copy .d-assessment__footnote { margin-top: 40px; }
/* `.lead`/`.capsline` only have rules scoped under `.intro-band` in
styles.css — re-declared here (left-aligned, no `.intro-band`
dependency) since the split copy column isn't an `.intro-band`. */
/* In-context layout editor — "philosophy-body" / "hospitality-body" set
--tune-fs/--tune-w/--tune-align directly on their own
(independent per element, same shared rule); the briefing lead instead
only ever gets its multiplier INHERITED from the `#briefing
.d-split__copy` wrapper above ("assessment-copy") — either way this one
rule resolves each element's own in-scope var correctly. */
.d-split__copy .lead { font-size: calc(21px * var(--tune-fs, 1)); line-height: 1.9; color: var(--theme-ink-72); max-width: calc(46ch * var(--tune-w, 1)); text-align: var(--tune-align, inherit); }
.d-split__copy .capsline { font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; font-size: calc(10px * var(--tune-fs, 1)); letter-spacing: .4em; text-transform: uppercase; color: var(--theme-ink-45); line-height: 2.4; max-width: calc(52ch * var(--tune-w, 1)); }
/* In-context layout editor — "philosophy-photo" / "hospitality-photo" /
"assessment-photo" set --tune-w directly on their own `.d-split__media`
box; default var(--tune-w,1) = 100% keeps every split's photo exactly
as wide as its grid column, unchanged. */
.d-split__media { position: relative; overflow: hidden; background: var(--theme-canvas-alt); width: calc(100% * var(--tune-w, 1)); margin-inline: auto; }
.d-split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* Per-section photo proportion (S1: "aspect-ratio, 4/5 retrato na
Philosophy, 4/3 paisagem na Hospitality") — the box is now sized by
its own aspect-ratio inside its grid column, not by a fixed
min-height guess. Assessment's media is sized by the sticky rule
below instead (explicit height, no aspect-ratio). */
/* In-context layout editor — aspect-ratio enum ("philosophy-photo" /
"hospitality-photo"). Desktop only, on purpose: the mobile override
below stays a hardcoded 4/3 for every split (S1 mobile spec, untouched). */
#philosophy .d-split__media { aspect-ratio: var(--tune-ar, 4 / 5); }
#hospitality .d-split__media { aspect-ratio: var(--tune-ar, 4 / 3); }
/* "assessment-photo" — width (above) works normally, but at desktop this
box's HEIGHT is pinned by the `.d-split--sticky` rule below (explicit
px, not aspect-ratio-derived), so aspect-ratio has no visible effect
there — both dimensions end up definite and the property is ignored per
spec. Still wired for architectural consistency + so the control isn't
silently missing from the editor; it becomes live again once the split
drops the sticky pin (mobile, where the 4/3 override below wins anyway). */
#briefing .d-split__media { aspect-ratio: var(--tune-ar, 16 / 9); }
/* The assessment split's copy column carries the whole briefing form, so
its media would otherwise stretch to ~1500px — a narrow tower, not a
photograph. Pin it at one screen and let the form scroll past it.
Desktop only: stacked on mobile the media is already reflowed by the
breakpoint below. top:24px/height cap (was top:0/100vh) — the split
now sits inside the section's own margin instead of touching the
viewport edge, so a flush top:0 pin left the photo colliding with the
header on tall viewports; 24px plus a 720px cap keeps it a clean,
bounded photo instead of a full-height strip. */
@media (min-width: 821px) {
.d-split--sticky .d-split__media { align-self: start; position: sticky; top: 24px; height: min(100vh - 48px, 720px); min-height: 480px; }
}
@media (max-width: 820px) {
.d-split { grid-template-columns: 1fr; }
/* Photo always on top on mobile, regardless of desktop side; one
shared 4:3 crop for every split (S1 mobile spec), overriding the
desktop-only aspect-ratios above. */
.d-split__media { order: -1; aspect-ratio: 4 / 3; }
/* The desktop `#philosophy`/`#hospitality` aspect-ratio rules above
are ID selectors — higher specificity than the plain-class rule
just above, so they'd otherwise keep winning at any width,
breakpoint or not. Repeating the ids here (same specificity, later
in the cascade) is what actually makes 4:3 stick on mobile. */
#philosophy .d-split__media,
#hospitality .d-split__media { aspect-ratio: 4 / 3; }
.d-split--sticky .d-split__media { position: static; height: auto; }
}
/* Leah's signature, closing §2 Our Philosophy. No scanned signature
file yet — renders as elegant italic type; swap `.d-signature`'s
inner `` for an `` once Leah sends a digitised
signature, the wrapper/class stay the same. Plain text, no
data-i18n: a personal name is not translated (same convention as
the header wordmark), so this adds zero new i18n keys. */
.d-signature { margin-top: 6px; }
.d-signature span {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 400;
font-size: clamp(26px, 2.6vw, 32px);
color: var(--theme-ink-72);
}
/* §4 — Thoughtful transformation (composition pass v4): centered
sec-head (eyebrow → title → corpo, corpo capped at 62ch) + the
before/after slider centered underneath, max-width 940px. The old
4-column principles row (`.d-principles`, "restore/refinish/
repurpose/respect") is gone — the owner called the section
"sobrecarregada" and the section's own body copy already covers the
same ground, so the row was pure repetition rather than new
information. Its markup/i18n keys are removed in design.html and
the 6 locale files. `.resto-media`/`.ba`/`.cap` stay: the slider
markup/script are untouched, only their wrapper's measure changes. */
/* In-context layout editor — "transform-body" sets --tune-fs/--tune-w/
--tune-align directly on this
(font-size via the base .body-copy
"1em" rule in styles.css; max-width/align need their own local formula
here since this selector already carries a specific width override). */
#transform .sec-head .body-copy { max-width: calc(62ch * var(--tune-w, 1)); text-align: var(--tune-align, inherit); }
.resto-media { display: flex; flex-direction: column; gap: 18px; }
/* Centered, capped measure. In-context layout editor — "slider-block"
(image type) sets --tune-w/--tune-ar on this wrapper; --tune-ar cascades
down to `.ba` below (inherited, no local override there). */
.resto-media--centered { max-width: calc(940px * var(--tune-w, 1)); margin: 0 auto; }
.resto-media .cap { font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; font-size: 9.5px; letter-spacing: .34em; text-transform: uppercase; color: var(--theme-accent-muted); text-align: center; }
.ba { position: relative; aspect-ratio: var(--tune-ar, 356 / 338); overflow: hidden; border: 1px solid var(--theme-hair); user-select: none; touch-action: none; cursor: ew-resize; }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; max-width: none; }
.ba .after { clip-path: inset(0 0 0 50%); }
.ba-handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--gold); z-index: 3; pointer-events: none; }
.ba-grip { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--gold); background: rgba(26,19,14,.55); backdrop-filter: blur(6px); z-index: 4; display: flex; align-items: center; justify-content: center; color: var(--gold); font-family: 'Geist', sans-serif; font-size: 12px; pointer-events: none; }
.ba-tag { position: absolute; bottom: 14px; z-index: 3; font-family: 'Geist', sans-serif; font-size: 9px; letter-spacing: .3em; text-transform: uppercase; color: var(--cream-72); background: rgba(20,15,11,.55); padding: 6px 12px; pointer-events: none; }
.ba-tag--b { left: 14px; } .ba-tag--a { right: 14px; }
/* Sprint 2026-08-06B §2 — swap crossfade. design.js adds .is-swapping for
~300ms before writing the new src (already preloaded), then removes it —
the images fade out then back in over the new pair. Untouched when JS
never runs (no class ever gets added) or with a single published pair
(the class exists but is never toggled). */
.ba img { transition: opacity .3s ease; }
.ba.is-swapping img { opacity: 0; }
/* Thumbnail rail — only unhidden by design.js when >1 Before/After pair is
published (site/js/design.js renderBaRail). Horizontal-scrolling strip,
same convention as .pgal-strip (property gallery) — flex + overflow-x,
no scrollbar chrome, so it reads fine on a 390px phone without a media
query. Tokens are --theme-* only per the design brief (no new color). */
.ba-rail { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; padding: 2px 2px 6px; scrollbar-width: none; -ms-overflow-style: none; }
.ba-rail::-webkit-scrollbar { display: none; }
.ba-rail[hidden] { display: none; }
.ba-rail-item { flex: 0 0 auto; scroll-snap-align: start; width: 92px; display: flex; flex-direction: column; gap: 6px; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; font: inherit; color: inherit; }
.ba-rail-item__thumb { display: block; width: 92px; height: 62px; object-fit: cover; border: 1px solid var(--theme-hair); transition: border-color .2s ease; }
.ba-rail-item__cap { font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--theme-ink-45); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ba-rail-item:hover .ba-rail-item__thumb,
.ba-rail-item:focus-visible .ba-rail-item__thumb { border-color: var(--theme-accent-muted); }
.ba-rail-item[aria-current="true"] .ba-rail-item__thumb { border-color: var(--theme-accent); }
.ba-rail-item[aria-current="true"] .ba-rail-item__cap { color: var(--theme-accent); }
.ba-rail-item:focus-visible { outline: 2px solid var(--theme-accent); outline-offset: 2px; }
/* §3 — The Wolf Bordin Method: 01–04 as a connected row. Numerals move
into gold-bordered circles, joined by a thin hairline that runs
behind them — the line spans exactly center-of-01 to center-of-04
(left/right: 12.5% on a 4-column grid) so it never leaks past the
first or last circle. `.d-method__circle`'s background matches the
section's own canvas so the line visually passes behind the circle
rather than through the numeral — #method stays off
`.aeterna-section--alt` (composition pass v4 moved it back ahead of
§4 Thoughtful Transformation, which keeps the --alt/espresso-2 slot),
so the circle background is `--espresso`, not `--espresso-2`. Mobile
swaps the horizontal line for a vertical connector between stacked
rows (icon-left, copy-right). */
/* In-context layout editor — "method-steps" sets --tune-fs/--tune-w on this
wrapper; --tune-fs cascades to the h3/.body-copy rules below (inherited,
no local override there), --tune-w scales the whole grid (the line's
12.5% math below is percentage-of-.d-method, so it stays correct at any
width). */
.d-method {
--d-method-gap: clamp(16px, 2.4vw, 32px);
position: relative;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--d-method-gap);
max-width: calc(1120px * var(--tune-w, 1));
margin: 0 auto;
}
/* left/right = half of one (gapped) 1fr column, i.e. exactly the
center of circle 01 / circle 04 — plain 12.5% only holds when the
4 columns have zero gap between them; with `--d-method-gap` in the
mix the true center is 12.5% minus 3/8 of one gap (worked out from
column-width = (100% − 3×gap) / 4, center = half that). Verified
against the rendered circle centers at 1280px and 390px. top:28px =
half the (now 56px) circle height. */
.d-method__line { position: absolute; top: 28px; left: calc(12.5% - (3 * var(--d-method-gap) / 8)); right: calc(12.5% - (3 * var(--d-method-gap) / 8)); height: 1px; background: var(--theme-hair); z-index: 0; }
.d-method__step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 0 12px; }
.d-method__circle { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--theme-accent); background: var(--theme-canvas); display: flex; align-items: center; justify-content: center; font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; font-size: 12px; letter-spacing: .1em; color: var(--theme-accent); }
.d-method__step h3 { font-family: 'Bodoni Moda', 'Times New Roman', serif; font-weight: 400; font-size: calc(clamp(18px, 2vw, 22px) * var(--tune-fs, 1)); letter-spacing: .02em; color: var(--theme-ink); }
.d-method__step .body-copy { font-size: calc(14px * var(--tune-fs, 1)); max-width: 28ch; margin: 0 auto; }
@media (max-width: 760px) {
.d-method { grid-template-columns: 1fr; gap: 0; max-width: 460px; }
.d-method__line { display: none; }
.d-method__step { flex-direction: row; align-items: flex-start; text-align: left; gap: 20px; padding: 0 0 34px; }
.d-method__step:last-child { padding-bottom: 0; }
.d-method__step:not(:last-child)::after { content: ''; position: absolute; left: 25px; top: 52px; bottom: 6px; width: 1px; background: var(--theme-hair); }
body.rtl .d-method__step:not(:last-child)::after { left: auto; right: 25px; }
.d-method__circle { width: 52px; height: 52px; font-size: 11px; }
.d-method__step .body-copy { max-width: none; margin: 0; }
}
/* §5 (spec) — THE LINE: the whole section is the sentence. Oversized
Bodoni, narrow measure so it breaks in two, huge vertical padding so
it sits alone on the screen; a quiet eyebrow + line underneath. */
.d-line { text-align: center; display: flex; flex-direction: column; align-items: center; gap: clamp(48px, 8vw, 96px); padding-top: clamp(100px, 13vw, 200px); padding-bottom: clamp(100px, 13vw, 200px); }
/* In-context layout editor — "line-phrase" (THE LINE keeps its own
dedicated clamp/padding otherwise untouched, per spec — only this one
text element is tunable). */
.d-line__phrase { font-family: 'Bodoni Moda', 'Times New Roman', serif; font-weight: 400; font-size: calc(clamp(2rem, 5.5vw, 4.25rem) * var(--tune-fs, 1)); line-height: 1.22; letter-spacing: .01em; color: var(--theme-ink); max-width: calc(18ch * var(--tune-w, 1)); text-align: var(--tune-align, inherit); margin: 0 auto; }
.d-line__foot { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 46ch; }
.d-line__foot .body-copy { text-align: center; margin: 0 auto; font-size: 14.5px; color: var(--theme-ink-45); }
/* §8 — Testimonial band, between Hospitality and Meet Leah. `--espresso-2`
per spec (the section carries `.aeterna-section--alt` in the HTML) —
its own padding-top/bottom is gone, superseded by the shared S2
section-rhythm rule below (every section gets the same padding-block
now; this one no longer needs its own value). Quote measure bumped
640px → 780px so `.d-testimonial__quote`'s own max-width:30em (S3 spec)
isn't clipped by a narrower parent at the top of its font-size clamp.
Oversized decorative quote mark is a plain Bodoni glyph, not the same
characters the quote text itself carries (each locale's
`design.review.quote` already has its own inline quotation marks/
guillemets) — purely a typographic ornament, aria-hidden. Attribution
sits at the *end* of the quote's own measure (not the full section
width) — `text-align:end`/`align-self:flex-end` are logical
properties so RU/IT/ES/ZH/EN (LTR) get it flush right and AR (RTL)
gets it flush left automatically, no separate override. */
.d-testimonial { text-align: center; }
.d-testimonial__inner { display: flex; flex-direction: column; gap: 16px; max-width: 780px; margin: 0 auto; }
.d-testimonial__mark {
font-family: 'Bodoni Moda', 'Times New Roman', serif;
font-size: clamp(56px, 8vw, 100px);
line-height: .5;
color: var(--gold-40);
}
/* In-context layout editor — "testimonial-quote". */
.d-testimonial__quote {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 400;
font-size: calc(clamp(22px, 2.6vw, 30px) * var(--tune-fs, 1));
line-height: 1.5;
color: var(--theme-ink);
text-align: var(--tune-align, inherit);
margin: 0;
}
.d-testimonial__quote { max-width: calc(30em * var(--tune-w, 1)); margin-left: auto; margin-right: auto; }
.d-testimonial__cite {
font-style: normal;
font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
font-size: 10.5px;
letter-spacing: .3em;
text-transform: uppercase;
color: var(--theme-accent-muted);
align-self: flex-end;
text-align: end;
}
/* §9 (spec) — Meet Leah Wolf: portrait + copy, two columns on desktop,
stacks on mobile. No photo yet at the `design-leah` slot — the image
fades in on load; on error the portrait column is removed entirely
(site/js/design.js sibling script below the slider handles the
load/error listeners — CSP has no 'unsafe-inline' for event-handler
attributes, so this can't be an onerror="" attribute). */
/* Fail-safe default: until the portrait actually decodes, the section is
laid out as if there were no photo. A slow or hanging request for the
`design-leah` slot therefore shows a clean single column instead of
reserving an empty 488px well — the error-only guard left that hole
visible for as long as the request stayed pending. `.d-leah--has-photo`
is added by the script on `load`. */
.d-leah { display: grid; grid-template-columns: 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; max-width: 640px; margin: 0 auto; }
.d-leah .d-leah__portrait { display: none; }
/* In-context layout editor — "leah-copy" (whole copy column: eyebrow/
title/body/body2/proof). --tune-align is read here (state-specific
selectors, so the var has to be repeated in both — a single lower-
specificity rule on the base `.d-leah__copy` would always lose to
these); --tune-fs/--tune-w live on the base rule below and cascade to
the eyebrow/title/body-copy/proof rules via inheritance. */
.d-leah .d-leah__copy { align-items: center; text-align: var(--tune-align, center); }
.d-leah--has-photo { grid-template-columns: .82fr 1fr; max-width: 1160px; }
.d-leah--has-photo .d-leah__portrait { display: block; }
.d-leah--has-photo .d-leah__copy { align-items: flex-start; text-align: var(--tune-align, left); }
.d-leah__portrait { aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid var(--theme-hair); background: var(--theme-canvas-alt); }
.d-leah__portrait img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s var(--ease); }
.d-leah__portrait img.is-loaded { opacity: 1; }
/* --tune-fs is NOT re-declared as this element's own font-size (that
would double-compound with .body-copy's "1em" trick below — 1em would
then mean "my parent's ALREADY-scaled size", multiplying the same
factor twice). The custom property still cascades to every descendant
regardless — .aeterna-section__title / .body-copy / .d-leah__proof each
read var(--tune-fs) straight off their own absolute base value. */
.d-leah__copy { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; max-width: calc(100% * var(--tune-w, 1)); }
.d-leah__copy .aeterna-section__title { max-width: 20ch; }
.d-leah__proof { font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; font-size: calc(10.5px * var(--tune-fs, 1)); letter-spacing: .3em; text-transform: uppercase; color: var(--theme-accent-muted); }
.d-leah--no-photo { grid-template-columns: 1fr; max-width: 640px; }
.d-leah--no-photo .d-leah__portrait { display: none; }
.d-leah--no-photo .d-leah__copy { align-items: center; text-align: center; }
@media (max-width: 860px) {
.d-leah { grid-template-columns: 1fr; }
.d-leah__portrait { max-width: 420px; margin: 0 auto; }
}
/* §10 (spec) — Begin with a property assessment: discreet closing line
under the form, pointing to the investment questionnaire instead.
Composition pass — now sits inside the left-aligned `.d-split__copy`
column (was centered under a standalone `.intro-band`), so the
centering is dropped in favour of matching the column's own edge. */
.d-assessment__footnote { margin: 40px 0 0; max-width: 560px; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 6px 10px; text-align: left; font-family: 'Cormorant Garamond', serif; font-size: 15px; color: var(--theme-ink-45); }
/* títulos de sec-head desta página no métrico do spec — #method needs
its own entry since it doesn't carry `--alt` (Thoughtful Transformation
holds that slot instead), so it can't ride the `.aeterna-section--alt
.sec-head h2` rule below. */
/* In-context layout editor — "method-head" / "transform-head" set
--tune-fs on their `.sec-head` wrapper; inherited here (no local
override on either h2 itself). #portfolio has no data-tune wrapper of
its own — var stays at its default 1, unaffected. */
#portfolio .sec-head h2 { font-size: calc(clamp(21px, 3vw, 34px) * var(--tune-fs, 1)); }
#method .sec-head h2 { font-size: calc(clamp(21px, 3vw, 34px) * var(--tune-fs, 1)); }
.aeterna-section--alt .sec-head h2 { font-size: calc(clamp(21px, 3vw, 34px) * var(--tune-fs, 1)); }
/* ══════════════════════════════════════════════════════════════
v4 system rewrite continued — S1 (containment) lives in
`.d-split`/`#briefing` above; this last block is S2 (uniform
vertical rhythm, applied identically to every section instead of
tuned per-section) + S4 (hero legibility). ══════════════════════ */
/* S2 — every section on the page gets the same padding-block, so the
rhythm reads as repetition instead of a patchwork of per-section
values. `main#main >` scopes this to design.html's own top-level
sections without touching the shared `.aeterna-section` rule in
styles.css (44px/32px, used by every other V4 page) — this page
alone gets the bigger clamp(88,11vw,150) rhythm, matching the
already-defined-but-unused `.section` primitive in styles.css (same
exact clamp, just never wired to `.aeterna-section` there). THE LINE
is excluded — it keeps the larger padding it already had (spec's one
named exception); it also has its own `padding-top`/`padding-bottom`
declared above with lower specificity than `#main`, but `:not()`
makes the exclusion explicit instead of relying on that math.
`.d-testimonial`'s dedicated padding rule above was removed for the
same reason: living inside this rule now instead of beside it. */
/* In-context layout editor — section "Space" control. --tune-space is set
directly (inline style) on the ONE section element via its
data-tune-section attribute — this shared rule just reads it, so each
section scales independently even though they all share one selector
(the custom property resolves per-element, not per-rule). Default 1 =
the exact 140.8px rhythm this rule already produced at 1280px. */
/* `:not(.p-hero)` (estágio 3, roles brief): property-assessment.html
também carrega este arquivo para reusar o form/split — sem a exceção,
este seletor (id na especificidade + folha carregada depois) esmagava
o padding-top de header fixo do hero contido `.p-hero` (styles.css)
para 56px no mobile, enterrando o eyebrow sob o header. design.html
não tem `.p-hero`, então nada muda lá. */
main#main > .aeterna-section:not(.d-line):not(.p-hero) {
padding-block: calc(clamp(88px, 11vw, 150px) * var(--tune-space, 1));
}
@media (max-width: 820px) {
main#main > .aeterna-section:not(.d-line):not(.p-hero) {
padding-block: calc(clamp(56px, 9vw, 80px) * var(--tune-space, 1));
}
}
/* S4 — Hero legibility: the owner's screenshot showed the title
competing with the photo. `.aeterna-hero--inner`'s shared overlay
(styles.css) is a 3-stop gradient tuned for heroes with different
copy alignment; overridden here (2 classes, same specificity, later
in the cascade) with a simple top-to-bottom darken that's actually
darkest where this hero's copy sits (vertically centered) instead of
lightest there. Copy gaps follow the same S3 rhythm as every split
column (eyebrow → 16 → title → 28 → tagline → 40 → cta). */
.d-hero .aeterna-hero__overlay {
background: linear-gradient(180deg, rgba(26, 19, 14, .35) 0%, rgba(26, 19, 14, .65) 100%);
}
.d-hero .aeterna-hero__copy { gap: 0; }
.d-hero .aeterna-hero__eyebrow { margin: 0; }
.d-hero .aeterna-hero__title { margin-top: 24px; }
.d-hero .aeterna-hero__tagline { margin-top: 38px; }
/* .d-hero__cta's margin-top:40px is set at its own rule near the top of
this file (was 6px) — not repeated here to avoid two competing
declarations for the same selector. */