s. 80ms a step: the same rhythm the hero and Meet
Thalia use. The fifth lands at 320ms, the top of the design's documented
60–320ms range. Five rows, six classes: the ages-6+ row carries two, and they
share its delay because they arrive together. */
.styles__item:nth-of-type(1) { --d: 0s; }
.styles__item:nth-of-type(2) { --d: .08s; }
.styles__item:nth-of-type(3) { --d: .16s; }
.styles__item:nth-of-type(4) { --d: .24s; }
.styles__item:nth-of-type(5) { --d: .32s; }
/* Sides are explicit, not :nth-of-type. They used to be "odd rows left, even
rows right", which stopped describing anything the moment one row had a class
on both sides. Explicit also means inserting a row (Adult Classes did) cannot
silently flip every row beneath it. */
.styles__side--left {
grid-column: 1;
text-align: right;
padding-right: 34px;
}
.styles__side--right {
grid-column: 3;
text-align: left;
padding-left: 34px;
}
/* --- the trigger --- */
/* The whole header is the button, so text-align is inherited rather than set:
it follows whichever side the row is on. width:100% makes the entire text
column the target, not just the words. */
.styles__q { margin: 0; }
.styles__trigger {
display: block;
width: 100%;
padding: 0;
background: none;
border: 0;
cursor: pointer;
text-align: inherit;
color: inherit;
font-family: inherit;
}
/* No colour change on hover, deliberately, and this is the one real cost of the
butter ground. The name used to go navy → gold. Butter carries a single ink,
so the only shift available is navy → navy2, which is imperceptible in a
hover: you never see the two states side by side.
The hover is therefore the name's 1.075 scale (Chenélle's own ask, and it was
never a colour in the first place) plus the dot filling on the spine. Both are
below. Do not reinstate a colour here without a second ink to move to. */
/* Chenélle: hovering AcroTots, Acrobatics and the rest should make the name
larger. transform, not font-size: a font-size change reflows the row, nudges
what sits under it and shifts the dot on the spine, so the whole timeline
would twitch on hover. A transform paints bigger and reflows nothing.
inline-block, not inline: a transform does nothing on an inline box, so the
scale below would silently stop working if this were left inline.
The origin is the spine side, matching each row's text-align, so the name
grows outward from the spine instead of sliding across it. */
.styles__name {
display: inline-block;
margin: 0;
font-family: var(--serif);
font-weight: 600;
font-size: var(--styles-name-fs);
line-height: var(--styles-name-lh);
color: inherit; /* follows the trigger's hover to gold */
transform-origin: right center;
transition: transform .28s var(--ease);
}
.styles__side--right .styles__name { transform-origin: left center; }
.styles__trigger:hover .styles__name,
.styles__trigger:focus-visible .styles__name { transform: scale(1.075); }
/* The same drawn +/× as the FAQ's, and deliberately the same: one accordion
language on the page, so a visitor learns the affordance once. Chenélle's
reference showed a chevron, but that came attached to the card layout she
then dropped, and a second icon language would be the page's only one.
Second use of this treatment, so it is written out rather than factored. If a
third appears, factor it with .faq__icon. */
.styles__icon {
position: relative;
display: inline-block;
width: 15px;
height: 15px;
margin-left: 14px;
vertical-align: middle;
transition: transform .35s var(--ease);
}
.styles__icon::before,
.styles__icon::after {
content: '';
position: absolute;
inset: 50% 0 auto;
height: 1.5px;
background: var(--navy);
transform: translateY(-50%);
}
.styles__icon::after { transform: translateY(-50%) rotate(90deg); }
.styles__entry[data-open="1"] .styles__icon { transform: rotate(45deg); }
/* block, not inline-block: it sits inside the trigger now, under the name, and
an inline-block would ride up onto the name's line whenever there was room.
--muted-onbutter, not navy: the tag used to separate from the name by hue
(gold against navy). With one ink left it separates by weight instead, or it
would read as loudly as the class name under it. 4.73:1 on butter, so it
still passes as type. Plain --muted is only 3.69:1 here and must not be used. */
.styles__tag {
display: block;
margin-top: 11px;
font-size: 11.5px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--muted-onbutter);
}
/* --- the panel --- */
/* The same bargain with script.js as the FAQ's, and it must stay the same:
open in plain CSS, collapsed only under `js`, which the inline script
sets before first paint. No flash, and a visitor whose JS fails reads every
description instead of finding six dead buttons. */
.styles__panel { overflow: hidden; }
.js .styles__panel {
max-height: 0;
visibility: hidden;
/* visibility is delayed to the end of the collapse, so the description does
not vanish before it has finished closing. It is also what takes the
panel's "Book a trial class" link out of the tab order: overflow:hidden
clips it visually but leaves it tabbable. */
transition: max-height .5s ease, visibility 0s linear .5s;
}
.js .styles__entry[data-open="1"] .styles__panel {
visibility: visible;
transition: max-height .5s ease, visibility 0s linear 0s;
}
/* Padding, not margin: a margin on the answer would collapse out of the panel
and the closed height would not be zero. */
.styles__answer { padding: 16px 0 4px; }
/* Left-aligned even on the right-hand rows, where everything else is flush
right. Ranged-left is what a paragraph is legible as; a four-line description
set ragged-left is not. The block still hugs the spine via margin-left:auto
below, so the row still reads as belonging to its side. */
/* --muted-onbutter, not --muted: the usual body grey is 3.69:1 on this ground
and fails AA. This is the same hue taken darker, 4.73:1. It is the token's
whole reason for existing. */
.styles__answer p {
margin: 0;
max-width: 44ch;
text-align: left;
font-size: 15.5px;
line-height: 1.65;
color: var(--muted-onbutter);
}
.styles__answer p + p { margin-top: 12px; }
.styles__side--left .styles__answer p { margin-left: auto; }
/* The Adult Classes placeholder. Deliberately ugly: it is a note to us sitting on
a client page, and it should look like one so it cannot be mistaken for copy or
quietly survive to launch. Not a token colour, because it is not part of the
palette and is not meant to be. Delete this rule with the placeholder. */
.styles__tbc {
max-width: none !important;
padding: 12px 14px;
border: 1px dashed #B3261E;
border-radius: 3px;
color: #B3261E !important;
font-size: 13.5px !important;
}
/* The CTA each row carried before it became a button. */
.styles__cta { margin-top: 18px !important; }
/* The link keeps a real hover where the class name could not: it moves its rule
rather than its ink, from a half-strength navy to solid. That needs no second
colour, so butter does not cost it anything. */
.styles__cta a {
display: inline-block;
font-size: 13.5px;
letter-spacing: .06em;
color: var(--navy);
border-bottom: 1px solid rgba(18, 58, 73, .45);
padding-bottom: 3px;
transition: border-color var(--t-hover);
}
.styles__cta a:hover { border-color: var(--navy); }
/* --- the dot --- */
/* The cream ring is not decoration: it masks the spine behind the dot so the
line appears to pass under it.
The dot is pinned to the name's first line, not centred on the row: the row
is align-items:start, so an entry that opens grows downward and its dot would
otherwise walk down the spine as the panel expanded. Computed from the name's
own size rather than hand-tuned, so it holds across the clamp. */
.styles__dot {
grid-column: 2;
grid-row: 1;
justify-self: center;
margin-top: calc((var(--styles-name-fs) * var(--styles-name-lh) - 15px) / 2);
width: 15px;
height: 15px;
border-radius: 50%;
/* Both of these are the section's ground, not "cream". The ring is what masks
the spine behind the dot, so it has to be whatever the section is painted:
left as cream it would draw a pale halo on the butter. */
background: var(--butter);
border: 2px solid var(--navy);
box-shadow: 0 0 0 5px var(--butter);
/* Scales in with the row, the "icons animate subtly" note from the brief kept
restrained. The parent .reveal owns its own transform; a child's transform
composes with it rather than fighting it. */
transform: scale(.55);
transition:
transform .7s var(--ease) var(--d, 0s),
background var(--t-hover);
}
.styles__item.is-visible .styles__dot { transform: scale(1); }
/* The design fills the last dot: the spine arrives rather than trailing off. */
.styles__item:last-of-type .styles__dot { background: var(--navy); }
/* Hovering a text column fills the row's dot, and an open entry keeps it filled
so the spine shows where you are. Both carry real weight: the name no longer
changes colour on hover (see .styles__trigger), so the dot and the name's
scale are the whole hover.
:has() on the ROW, not `.styles__side:hover + .styles__dot`, which is what
these were while every row had one side. The ages-6+ row has a side on either
side of its dot, and a sibling combinator only ever reaches forwards: it would
answer to Contemporary & Lyrical and stay dead under Acrobatics. Asking the row
whether anything inside it is hovered or open is the only phrasing that treats
one shared node as belonging to both classes, which is the entire point of the
merge.
Scoped to .styles__side rather than the row: only the text columns do anything,
so only the text columns may look like they do. Hovering the empty half of a
one-sided row must not light its dot. */
.styles__item:has(.styles__side:hover) .styles__dot,
.styles__item:has(.styles__entry[data-open="1"]) .styles__dot { background: var(--navy); }
/* --- single column ---
The design's README hands the rebuild one instruction for this section:
"collapse to a single left-aligned list". Measured, not chosen by taste: the
two sides hold to about 780px, below which "Contemporary & Lyrical" wraps
against a 40ch measure squeezed under 250px and the spine stops reading as a
centre line. The spine moves to the left edge and every entry hangs off it. */
@media (max-width: 780px) {
.styles__spine {
left: 6.5px;
transform: none;
}
.styles__item {
grid-template-columns: 15px minmax(0, 1fr);
column-gap: 22px;
}
.styles__dot {
grid-column: 1;
justify-self: start;
/* The desktop rule already centres it on the name's first line and the sum
still holds here, so it is not restated. */
}
/* Both sides collapse into the one track. */
.styles__side--left,
.styles__side--right {
grid-column: 2;
text-align: left;
padding-left: 0;
padding-right: 0;
}
/* Everything is left-aligned in the single track, so every name grows from the
left. Without this the odd rows keep their right origin and their names
would swell leftwards, off the edge of the column. */
.styles__side--left .styles__name,
.styles__side--right .styles__name { transform-origin: left center; }
/* Same: one track, so the description no longer hugs a spine on its right. */
.styles__side--left .styles__answer p { margin-left: 0; }
.styles__item { margin-bottom: 34px; }
/* The ages-6+ row has two classes and one dot. Side by side that reads as a
pair at a glance; stacked in a single track it does not, so without this gap
Acrobatics butts against Contemporary & Lyrical and reads as part of it.
Same 34px as the row rhythm, so the pair still sits closer to its own dot
than the next row does.
.styles__dot + .styles__side, because the DOM is side / dot / side: the
right-hand class is the one that follows the dot. On desktop it must not
have this, which is why it lives in here. */
.styles__dot + .styles__side { margin-top: 34px; }
}
/* ---------------------------------------------------------------- fees */
/* Cream on cream, so the boundary is a hairline. The design puts a wave only at
a colour change (Meet Thalia → Classes, FAQ → Contact). Do not add one here. */
/* Navy, per Chenélle's alternating scheme (2026-07-16): hero light, Meet Thalia
dark, Classes light, Fees dark, Good to know light, FAQ light, Contact dark.
This is the only section whose ground actually had to change; the rest already
alternated.
Everything below it in this block is the consequence, not decoration. Flipping
a section's ground means re-homing every colour that sat on the old one, and
Fees had eight: eyebrow, title, row rule, label, leader dots, price, notes and
the pill. The pill was the dangerous one, see .btn--fees in the markup.
The hairline is gone with the cream. It separated cream from cream; navy
against cream needs no help. */
/* position: relative is what .fees__wave hangs off. Without it the wave would
find the nearest positioned ancestor instead and land somewhere else entirely. */
.fees {
position: relative;
background: var(--navy);
color: var(--cream);
padding: var(--section-y) 0;
}
/* 820px, per the design: the narrowest column on the page. The rows are a
two-ended pattern and a wide column strands the price away from its label. */
.fees__inner {
max-width: 820px;
margin: 0 auto;
padding: 0 var(--gutter);
text-align: center;
}
/* No .fees__eyebrow: `SIMPLE, HONEST FEES` came out on Chenélle's instruction
(2026-07-17) and the title now leads, so it takes the cascade's first beat.
The rows keep their own delays: 0s → .1s is a longer gap than the .06s → .1s
it replaces, but 40ms inside a 900ms reveal is not a visible difference, and
re-numbering five rows to buy it would be churn. */
.fees__title {
margin: 0 0 46px;
font-family: var(--serif);
font-weight: 600;
font-size: clamp(36px, 4.6vw, 60px);
line-height: 1.02;
letter-spacing: -.01em;
color: var(--cream);
--d: 0s;
}
/* The heading is centred; the rows are not. */
.fees__list { text-align: left; }
.fees__row {
display: flex;
align-items: baseline;
gap: 16px;
padding: 22px 0;
/* --hairline-strong is navy ink on a light ground and vanishes here. Same
idea inverted: cream at the same alpha. */
border-bottom: 1px solid rgba(251, 246, 234, .18);
}
/* The design's own cascade for this section, 40ms a step after the title. */
.fees__row:nth-child(1) { --d: .1s; }
.fees__row:nth-child(2) { --d: .14s; }
.fees__row:nth-child(3) { --d: .18s; }
.fees__row:nth-child(4) { --d: .22s; }
.fees__row:nth-child(5) { --d: .26s; }
.fees__label {
font-family: var(--serif);
font-size: clamp(20px, 2.3vw, 26px);
color: var(--cream);
}
/* Not a token: the design draws this leader at .4 alpha, stronger than either
hairline, because a dotted line reads lighter than a solid one at the same
value. Lifted straight from the design markup. The -5px lifts it off the
baseline the label and price share, to sit mid-x-height between them. */
.fees__leader {
flex: 1;
border-bottom: 1px dotted rgba(251, 246, 234, .42);
transform: translateY(-5px);
}
.fees__price {
font-size: 17px;
color: var(--cream);
white-space: nowrap;
}
/* Fine print, behind a disclosure (2026-07-17, Chenélle). The accordion's third
caller: script.js owns the behaviour, this only dresses it. */
.fees__notes {
margin: 28px 0 40px;
text-align: left;
--d: .3s;
}
/* Same inverted hairline as .fees__row above: navy ink vanishes on this ground. */
.fees__note { border-top: 1px solid rgba(251, 246, 234, .18); }
.fees__note-q { margin: 0; }
/* A label, not a question, so it is set as one: the section's fine print asking
to be opened. The FAQ's trigger is a serif question because it *is* one. What
the two share is the icon and the behaviour, which is what makes it read as
the same control. */
.fees__note-trigger {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
padding: 16px 0;
min-height: 44px;
background: none;
border: 0;
cursor: pointer;
font-family: var(--sans);
font-size: 12.5px;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--butter); /* 9.06:1 on navy; --gold-text is a cream-ground colour */
transition: color var(--t-hover);
}
.fees__note-trigger:hover { color: var(--cream); }
.fees__note-icon {
position: relative;
flex: none;
width: 18px;
height: 18px;
transition: transform .35s var(--ease);
}
/* currentColor, so the + is whatever the label is and the two hover together.
The FAQ's icon is a fixed --gold because it sits on cream. */
.fees__note-icon::before,
.fees__note-icon::after {
content: '';
position: absolute;
inset: 50% 0 auto;
height: 1.5px;
background: currentColor;
transform: translateY(-50%);
}
.fees__note-icon::after { transform: translateY(-50%) rotate(90deg); }
.fees__note[data-open="1"] .fees__note-icon { transform: rotate(45deg); }
/* Open by default. Only `html.js` collapses it, and that is set inline in
before first paint, so this never flashes. These are the actual costs a parent
pays: a visitor whose JS fails reads them rather than finding a dead button.
Do not give this panel a closed state outside `.js`. */
.fees__note-panel { overflow: hidden; }
.js .fees__note-panel {
max-height: 0;
visibility: hidden;
/* visibility is held back until the collapse finishes, so the text does not
vanish mid-close, and it is what takes the panel out of the tab order:
overflow:hidden only clips. */
transition: max-height .5s ease, visibility 0s linear .5s;
}
.js .fees__note[data-open="1"] .fees__note-panel {
visibility: visible;
transition: max-height .5s ease, visibility 0s linear 0s;
}
/* Padding, not margin: a margin on the body would collapse out of the panel and
the closed height would not be zero. */
/* Two columns, so the fine print fills the 820 column rather than hugging the
left under the full-width rows above it (that void was the asymmetry Chenélle
flagged, 2026-07-20). columns balances the fill for any paragraph count, where
a 2-up grid would leave an empty cell on an odd one; break-inside keeps a
paragraph whole. The 62ch cap is gone: each column is now the measure. */
.fees__note-body {
padding: 2px 0 24px;
columns: 2;
column-gap: clamp(32px, 5vw, 60px);
}
.fees__note-body p {
font-size: 14px;
line-height: 1.6;
/* --muted is the body colour for cream grounds; --mutedd is its navy twin. */
color: var(--mutedd);
margin: 0 0 14px;
break-inside: avoid;
}
.fees__note-body p:last-child { margin-bottom: 0; }
.fees__cta { --d: .34s; }
/* The pill, re-homed rather than reclassed. .btn--primary is navy on cream: on
this section it became a navy pill on a navy band, i.e. nothing but a floating
cream label. Butter on navy is the same inversion Contact already uses.
Scoped here rather than swapping the markup to .btn--butter, because
.btn--butter is declared after .btn--fees and would therefore have won the
padding cascade, quietly replacing this pill's own 16px 34px / .12em geometry
with Contact's 17px 38px. The class swap looks like the tidier change and is
the one that loses the design. */
.fees .btn--primary { background: var(--butter); color: var(--navy2); }
.fees .btn--primary:hover { background: var(--cream); color: var(--navy2); }
/* The row is label / leader / price on one line, and the price must never wrap
away from its own label. Measured at 375px, not guessed: "Private lessons" at
its 20px floor plus "R300 per session" at 17px leaves the leader 28.2px,
which reads as a smudge rather than a line. Stepping the type down here takes
it to 65.1px. The design has no mobile spec for this section, so these are
the smallest values that keep the leader legible. */
@media (max-width: 560px) {
.fees__row { gap: 12px; padding: 18px 0; }
.fees__label { font-size: 18px; }
.fees__price { font-size: 15px; }
/* One column on phones: two would be ~26ch each, too narrow to read. Matches
the story gallery, which collapses at the same width. */
.fees__note-body { columns: 1; }
}
/* ---------------------------------------------------------------- section stubs */
/* TEMPORARY. Each stub is replaced by its real section in the session named on
it, so anchor links are testable now. None of this survives session 8. */
/* ---------------------------------------------------------- good to know (#faq)
One section, three areas: the studio location, what to bring, and the FAQ.
Chenélle briefed this composition on 2026-07-16. It replaces the approved
design's FAQ layout (a sticky left header beside a right-hand accordion), so
the values below are the design's own, recombined:
- 1240px inner and the clamp(40px,6vw,86px) gap are the design's FAQ figures.
- The eyebrow, title, question, answer and hairline values are the design's
FAQ values unchanged.
- The subsection heading is the one size with no design precedent. It sits
between the design's FAQ question (max 26px) and its class name (max 40px),
which is what makes it outrank the questions below it without competing
with the section title above.
Cream-to-cream, so the top edge is a hairline, never a wave. The FAQ → Contact
wave is session 8's, with the section it resolves into. */
.gtk {
position: relative;
background: var(--cream);
padding: var(--section-y) 0;
border-top: 1px solid var(--hairline);
/* The wave to Contact is 92px and overlays this padding rather than adding
height beneath it, so the padding has to outrun the wave or the last FAQ
row sits under it. --section-y bottoms out at 78px, 14px short, hence the
floor. Above a 1040px viewport --section-y wins and this does nothing. Meet
Thalia never needed it: --section-y-lg starts at 96px and clears on its own. */
padding-bottom: max(var(--section-y), 104px);
}
/* The section's one decorative treatment.
It is in normal flow, in the band between the two columns and the FAQ, and
that is the whole point: Chenélle's rule (2026-07-17) is that it must never
cross text at any width. Absolutely positioning it behind the content is what
broke that rule, and reshaping the curve cannot fix it, because the section
reflows from two columns to one and any path that threads the gaps at 1440
runs through a paragraph at 768. A flow element in a gap cannot overlap text
at any width, so the guarantee holds without being re-checked per breakpoint.
Its own margins are the gap, so .gtk__faq adds none. Full-bleed because it is
a child of .gtk rather than .gtk__inner. */
.gtk__motif {
display: block;
width: 100%;
height: clamp(64px, 7vw, 96px);
margin: clamp(52px, 5.5vw, 78px) 0;
pointer-events: none;
fill: none;
stroke: var(--gold);
stroke-width: 1.5;
opacity: .16;
}
.gtk__inner {
position: relative;
z-index: 1;
max-width: 1240px;
margin: 0 auto;
padding: 0 var(--gutter);
}
/* Centred, matching Classes and Fees directly above it. The design's FAQ head is
left-aligned because it was a sticky column; it is not one here. */
.gtk__head { text-align: center; }
.gtk__eyebrow {
--d: 0s;
font-size: 12.5px;
letter-spacing: .28em;
text-transform: uppercase;
color: var(--gold-text);
margin: 0 0 22px;
}
.gtk__title {
--d: .06s;
font-family: var(--serif);
font-weight: 600;
font-size: clamp(32px, 4vw, 54px);
line-height: 1.04;
letter-spacing: -.01em;
margin: 0;
color: var(--ink);
}
.gtk__sub {
--d: .12s;
font-size: 16.5px;
line-height: 1.6;
color: var(--muted);
margin: 26px auto 0;
max-width: 58ch;
}
.gtk__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(40px, 6vw, 86px);
margin-top: clamp(56px, 6vw, 84px);
}
/* The two columns arrive as a pair, one just behind the other. The FAQ below
fades in as one block (a single .reveal on .faq), per the brief. */
.gtk__col:nth-child(1) { --d: 0s; }
.gtk__col:nth-child(2) { --d: .08s; }
/* 700, where every other serif heading on the page is 600, and the exception is
deliberate. These three ("Find the Studio", "What to Bring", "Frequently Asked
Questions") are the section's signposts, and they are the smallest headings
asked to do that job: the section title carries 54px, so size alone gives it
presence, while these have 30px and must still outrank the 26px FAQ questions
directly beneath them.
At 600 they did. That was under Bodoni Moda. Cormorant Garamond is a much
lighter face at the same weight, so the serif swap quietly thinned them until
"Frequently Asked Questions" stopped reading as a heading at all (Chenélle,
2026-07-17). Nothing was broken and no rule had changed: the same 600 simply
means less in this typeface. 700 restores the rank the 600 used to carry.
All three move together. They are peers, and boldening only the FAQ one would
break the composition to fix a symptom. */
.gtk__subhead {
font-family: var(--serif);
font-weight: 700;
font-size: clamp(22px, 2.4vw, 30px);
line-height: 1.15;
letter-spacing: -.01em;
margin: 0;
color: var(--ink);
}
/* The FAQ's signpost, bigger than its two siblings. Chenélle asked for this on
2026-07-17 so a visitor scrolling past knows what they have arrived at.
The three subheads are peers in the content, so this splits them on purpose
and the reason is width, not rank. "Find the Studio" and "What to Bring" head
533px columns and each sits directly above its own container, a bordered card
and an icon list, which give them context and hold them down. This one heads
the full 1152px and has nothing under it but hairline rules, so at 30px it was
a small heading floating over a wide, quiet block. 38px is proportionate to
the width it has to carry; 38px over a half-width column would be top-heavy,
which is why the other two stay at 30.
38px is a ceiling, not a preference. The section title is 54px and has to stay
clearly above this: measured at 42px the two start competing and the FAQ reads
as its own section, which is the one thing the brief for this section ruled
out. Do not raise it further without re-checking against the title. */
.gtk__subhead--faq {
font-size: clamp(26px, 3vw, 38px);
}
.gtk__lead {
font-size: 16.5px;
line-height: 1.6;
color: var(--muted);
margin: 14px 0 0;
max-width: 52ch;
}
/* ------------------------------------------------ good to know: the location */
.gtk__card {
margin-top: 22px;
padding: clamp(24px, 2.6vw, 34px);
border: 1px solid var(--hairline-strong);
border-radius: 14px;
background: var(--cream);
box-shadow: 0 18px 40px -28px rgba(18, 58, 73, .5);
}
.venues { list-style: none; margin: 0; padding: 0; }
.venue + .venue {
margin-top: 26px;
padding-top: 26px;
border-top: 1px solid var(--hairline);
}
.venue__name {
font-family: var(--serif);
font-weight: 500;
font-size: 21px;
line-height: 1.2;
margin: 0;
color: var(--ink);
}
.venue__addr {
font-size: 16px;
line-height: 1.6;
color: var(--muted);
margin: 8px 0 0;
max-width: 34ch;
}
.venue__link { margin-top: 16px; }
/* Was .gtk__tbc, a dashed [TBC] placeholder. It is real copy now, so it loses
the dashed box that marked it as unfinished and sets as a quiet note. */
.gtk__note {
font-size: 13.5px;
line-height: 1.55;
color: var(--muted);
margin: 24px 0 0;
}
/* ------------------------------------------- good to know: what to bring */
.bring {
list-style: none;
margin: 26px 0 0;
padding: 0;
}
/* An open list, not a card each: five cards beside the location card would read
as a grid of unrelated blocks, which is the thing this section exists to
avoid. The hairline between items is the only division they need. */
.bring__item {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 18px;
align-items: start;
}
.bring__item + .bring__item {
margin-top: 22px;
padding-top: 22px;
border-top: 1px solid var(--hairline);
}
.bring__icon {
display: flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
margin-top: 1px;
}
.bring__icon svg {
width: 100%;
height: 100%;
fill: none;
stroke: var(--gold);
stroke-width: 1.25;
stroke-linecap: round;
stroke-linejoin: round;
}
.bring__name {
font-family: var(--serif);
font-weight: 500;
font-size: 19px;
line-height: 1.25;
margin: 0;
color: var(--ink);
}
.bring__text p {
font-size: 15.5px;
line-height: 1.6;
color: var(--muted);
margin: 6px 0 0;
}
/* ------------------------------------------------------ good to know: the FAQ */
/* No margin-top: the motif above is a flow element and its own margins are the
gap between the columns and the FAQ. Adding one here would double it. */
.gtk__faq { margin-top: 0; }
.faq { margin-top: 30px; }
.faq__item { border-top: 1px solid var(--hairline-strong); }
.faq__item:last-child { border-bottom: 1px solid var(--hairline-strong); }
/* The question is a heading so the accordion can be navigated by heading, and a
button so it can be operated by keyboard. The heading carries no style of its
own: the button below is the visible thing. */
.faq__q { margin: 0; font: inherit; }
.faq__trigger {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
padding: 24px 0;
min-height: 44px;
background: none;
border: 0;
cursor: pointer;
text-align: left;
font-family: var(--serif);
font-weight: 500;
font-size: clamp(19px, 2vw, 26px);
line-height: 1.3;
color: var(--ink);
transition: color var(--t-hover);
}
.faq__trigger:hover { color: var(--gold-text); }
/* Drawn rather than typed: the design's "+" is a text glyph, which sits off
centre in the sans and rotates around its own baseline box rather than the
crossing point. Two bars rotate cleanly to an ×. This is why the icon survived
the sans change: it never depended on the font's metrics. */
.faq__icon {
position: relative;
flex: none;
width: 18px;
height: 18px;
transition: transform .35s var(--ease);
}
.faq__icon::before,
.faq__icon::after {
content: '';
position: absolute;
inset: 50% 0 auto;
height: 1.5px;
background: var(--gold);
transform: translateY(-50%);
}
.faq__icon::after { transform: translateY(-50%) rotate(90deg); }
.faq__item[data-open="1"] .faq__icon { transform: rotate(45deg); }
/* Open by default. Only the `js` class collapses them, and it is set inline in
before first paint, so this never flashes. A visitor whose JS fails
reads all seven answers instead of finding seven buttons that do nothing. */
.faq__panel { overflow: hidden; }
.js .faq__panel {
max-height: 0;
visibility: hidden;
/* visibility is delayed to the end of the collapse, so the answer does not
vanish before it has finished closing. It is what takes the panel's links
out of the tab order: overflow:hidden only clips them visually, so without
this a keyboard visitor tabs into an invisible WhatsApp link. */
transition: max-height .5s ease, visibility 0s linear .5s;
}
.js .faq__item[data-open="1"] .faq__panel {
visibility: visible;
transition: max-height .5s ease, visibility 0s linear 0s;
}
/* Padding, not margin: a margin on the answer would collapse out of the panel
and the closed height would not be zero. */
.faq__answer { padding: 0 0 26px; }
.faq__answer p {
font-size: 16.5px;
line-height: 1.65;
color: var(--muted);
margin: 0;
max-width: 60ch;
}
.faq__rules {
margin: 0;
padding: 0 0 0 20px;
max-width: 68ch;
}
.faq__rules li {
font-size: 16.5px;
line-height: 1.6;
color: var(--muted);
}
.faq__rules li + li { margin-top: 8px; }
.faq__rules::marker { color: var(--gold-text); }
.faq__link {
color: var(--ink);
border-bottom: 1px solid var(--gold);
transition: color var(--t-hover);
}
.faq__link:hover { color: var(--gold-text); }
/* Stack at the tablet breakpoint: location first, then what to bring, then the
FAQ, which is the DOM order already. */
@media (max-width: 1024px) {
.gtk__grid {
grid-template-columns: minmax(0, 1fr);
gap: clamp(48px, 7vw, 68px);
}
.gtk__card { max-width: 640px; }
.bring { max-width: 640px; }
}
@media (max-width: 640px) {
.gtk__card { padding: 22px 18px; }
.bring__item { gap: 14px; }
/* The design's outline pill measures 39.5px, which is what the header ships
and is fine for a mouse. These two are the section's only real touch
targets, so on a phone they go full width and take the 44px minimum. */
.venue__link {
display: flex;
align-items: center;
justify-content: center;
min-height: 44px;
}
}
/* --- wave to Contact --- */
/* Geometry is shared: see "section waves" up by .thalia__wave. Only the fill
lives here, and it is Contact's navy2, per the rule stated there.
This wave used to run at z-index:auto and paint under .gtk__inner (z-index:1).
It now takes the shared z-index:4 and paints over it instead. That is
deliberate and it is safe: the wave is anchored to the section's bottom edge,
so an opening FAQ panel grows the section and carries the wave down with it.
The section's bottom padding (--section-y, 78px at its floor against ~50px of
actual fill) is what keeps the curve off the words. If the padding here is
ever cut, check this edge. */
.gtk__wave path { fill: var(--navy2); }
/* ------------------------------------------------------------ screen reader only */
/* Both venue buttons read "Get Directions". This is what keeps their accessible
names distinct without printing the venue twice on screen. */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* ---------------------------------------------------------------- contact */
/* The approved design's closing band, and the page's second and last dark
section. No bottom padding: the footer closes it, and the two share the navy
so the join between them is invisible. */
/* The bottom padding is load-bearing, not rhythm. .contact__inner has no bottom
padding or border, so the panel's bottom margin collapses straight through it
and out of this section: with padding-bottom:0 that margin became an 80px gap
between the navy Contact and the navy footer, and the body's cream showed
through it as a stripe across the foot of the page. Spacing below the panel
has to be padding here, never margin down there. */
.contact {
background: var(--navy2);
color: var(--cream);
padding: clamp(40px, 5vw, 70px) 0 clamp(56px, 6vw, 80px);
}
.contact__inner {
max-width: 900px;
margin: 0 auto;
padding: 0 var(--gutter);
text-align: center;
}
.contact__eyebrow {
margin: 0 0 22px;
font-size: 12.5px;
letter-spacing: .28em;
text-transform: uppercase;
color: var(--butter);
--d: 0s;
}
/* The 82px cap is the design's and stays: this is the page's closing line and its
largest type. The floor came down from 40px to 36px on 2026-07-17, when
Chenélle asked for the title on one line.
Measured, not chosen. "Come dance with us." renders 7.79x its font size in
Cormorant, so at the old 40px floor it needed 311.7px against the 312px a
360px phone leaves after gutters: 0.3px of slack, which any rendering
difference would eat, and the line would wrap to a one-word orphan. 36px needs
280px and clears the same phone by 31px. It is also not an odd number here:
every other section title on the site floors between 32px and 36px, so this
still has the largest cap on the page and now shares their floor. */
.contact__title {
margin: 0;
font-family: var(--serif);
font-weight: 500;
font-size: clamp(36px, 5.6vw, 82px);
line-height: 1;
letter-spacing: -.015em;
color: var(--cream);
--d: .06s;
}
.contact__title em { font-style: italic; }
/* Chenélle asked for one sentence per line on 2026-07-17, so the break is an
explicit
in the markup and text-wrap:balance came back off. The two fight:
balance re-breaks whatever the
already decided, so the line would come out
split in a place nobody chose. An author break beats an automatic one.
No max-width either, for the same reason: at 46ch the first sentence wrapped
before it reached the
and the line came out 3 lines, not 2. The measure is
now the sentence itself. .contact__inner caps it at 812px, which is 68ch here,
comfortably longer than either sentence needs. */
.contact__lead {
margin: 28px auto 0;
font-size: 19px;
line-height: 1.6;
color: var(--mutedd);
--d: .12s;
}
/* Below this the first sentence no longer fits a line of its own, so the authored
break stops helping: it would force 2 lines then 1 rather than an even rag.
Off it goes and the sentence wraps.
Measured, not chosen: "Ask a question, check class availability, or just say
hello." renders 447.4px at 19px, and the 24px gutters run that out at a 496px
viewport. The query sits at 520 rather than 496 so the fallback starts a little
before the cliff instead of exactly on it.
text-wrap:balance is safe here and only here. With the
gone there is no
authored break for it to fight, and this line is centred, so the box it
declines to shrink costs nothing. Do not copy it onto a left-aligned line: see
the note where .contact__note used to be. */
@media (max-width: 520px) {
.contact__lead br { display: none; }
.contact__lead { text-wrap: balance; }
}
.contact__actions { margin: 40px 0 0; --d: .16s; }
/* .contact__note is gone: Chenélle removed the sentence it set on 2026-07-17.
Its rules went with it rather than being left to rot.
Worth keeping from it, because the next person to fight a rag here will hit
the same thing: it was a 30ch measure and deliberately NOT text-wrap:balance.
Balance fixes a rag by shortening the lines but it does not shrink the box,
and that box sized the panel's right grid track, so balancing it left 116px of
empty track in a left-aligned column and pulled the panel 57px off the centred
head. It fixed the sentence and re-broke the symmetry. A measure fixed both,
because greedy wrapping always fills its box to within a few px. Balance is
safe on .contact__lead only because that line is centred, so its box costs
nothing. */
/* --- the panel: photograph left, ask right --- */
/* Chenélle 2026-07-16. The portrait used to sit above the eyebrow at its
intrinsic 880x1318 with no rule of its own at all, which is why it came out
"way too large": nothing was sizing it. It now has a size, a frame and a side.
.contact__inner is centred, and the eyebrow and title stay that way. The panel
underneath is not: two columns want their own alignment. */
.contact__panel {
/* Top only. A bottom margin here collapses out of the section: see .contact. */
margin: clamp(44px, 5vw, 68px) 0 0;
display: grid;
/* Both tracks size to their content, and the pair is then centred as one unit.
This was `auto minmax(0, 1fr)`, which stretched the right track to fill the
812px box while the note inside it stayed capped at its 42ch measure: 149px
of the track was empty, so the panel's visible mass sat 75px left of the
centred head above it. Measured at 1440: head centre 712, panel content
centre 638. That gap is what read as "very off". Content-sized tracks plus
justify-content put both centres on the same axis. */
grid-template-columns: auto auto;
justify-content: center;
align-items: center;
gap: clamp(30px, 5vw, 60px);
text-align: left;
}
/* "make it small, with the frame that it used to have on the Meet Thalia page" */
.contact__portrait {
position: relative;
margin: 0;
width: clamp(170px, 21vw, 250px);
--d: .12s;
}
/* Meet Thalia's offset gold frame. That portrait sat on the left and pushed its
frame down-right; this one is on the left too, so it does the same and leans
away from the copy rather than into it. Gold as a line, so it stays on the
signed-off --gold rather than --gold-text, which is only ever type. */
.contact__portrait::before {
content: '';
position: absolute;
inset: 20px -20px -20px 20px; /* top right bottom left: down and to the right */
border: 1px solid rgba(185, 143, 59, .45);
/* 15px against the photo's 14px, and the extra pixel is not a rounding error.
This frame sits 20px outside the photo, so it is the outer of two concentric
corners: at an equal radius the outer curve reads tighter than the inner one
where they cross. One px of slack is what makes them look like the same
corner. See the radius note on .contact__portrait img. */
border-radius: 15px;
}
.contact__portrait img {
position: relative; /* over the frame's offset square */
display: block;
width: 100%;
/* Load-bearing, as on every other portrait here: the height attribute is a
presentational hint and beats aspect-ratio without it. */
height: auto;
aspect-ratio: 4 / 5;
object-fit: cover;
/* Chenélle asked for soft corners here, 2026-07-17. 14px is not picked by eye:
it is .gtk__card's radius, the nearest thing on the site to a panel of this
weight (the pills are fully round). Borrowing it keeps this on the radii the
site already has rather than adding a third.
Meet Thalia's portrait uses the same offset-frame device and is still
square. Chenélle was told; it stays square until she says otherwise. */
border-radius: 14px;
}
/* Fades rather than rises, matching the other portraits. */
.contact__portrait.reveal {
transform: none;
transition: opacity 1.4s var(--ease) .1s;
}
/* .contact__note and its overrides are gone with the sentence they set, removed
on Chenélle's 2026-07-17 ask. The pill is the whole of the ask column now, so
it needs no top margin against a paragraph that no longer exists. */
.contact__ask .contact__actions { margin-top: 0; }
/* .contact__details and .contact__link are gone with the number and the email,
removed on Chenélle's 2026-07-16 ask, and their rules went with them rather
than being left to rot: the list, its drawn separator dot, the 44px hit area
and the 460px stacking rule. The WhatsApp pill is now the only way to reach
Thalia from this section, which is the point.
The pill is a real button, so it already clears the 44px target the old 14px
links needed that hit area for.
Note the email address blissfuldancing.sa@gmail.com now appears nowhere on
the site. That was deliberate on her part, but it is a real contact route
being retired, so it is logged in CONTENT_SOURCE_OF_TRUTH.md rather than just
deleted here. */
/* --- stacked --- */
/* The panel is a picture beside a paragraph. Below this it is a picture above a
paragraph, and the portrait stops being a column and becomes a header. */
@media (max-width: 700px) {
.contact__panel {
grid-template-columns: 1fr;
justify-items: center;
text-align: center;
gap: clamp(34px, 7vw, 48px);
}
/* The offset frame pushes 20px past the picture on the right. Centred in a
single column that overhang is what decides whether the section scrolls
sideways on a phone, so the portrait keeps clear of the gutter. */
.contact__portrait { width: min(230px, 62vw); }
}
/* ---------------------------------------------------------------- footer */
/* Outside
, but on Contact's navy, so it reads as the design's nested
footer while still being a page-level landmark.
The top spacing is padding here rather than a margin on the inner: a margin
would collapse straight out through this box and open a cream gap between
Contact and the footer. */
.site-footer {
background: var(--navy2);
padding: clamp(64px, 8vw, 100px) var(--gutter) 0;
}
.site-footer__inner {
/* The design's footer sits inside Contact's 900px box, which is itself inset
by the gutter, so its hairline spans 812px and not the full 900. */
max-width: calc(900px - var(--gutter) * 2);
margin: 0 auto;
padding: 30px 0;
border-top: 1px solid rgba(251, 246, 234, .14);
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
}
.site-footer__lockup {
height: 26px;
width: auto;
opacity: .9;
}
/* Was a flex container holding the copyright and the credit as two spans, which
is what made the bar two items instead of three and put 192px on one side of
the copyright against 18px on the other. It is now simply a line of text: one
of three peers the parent distributes. */
.site-footer__legal {
margin: 0;
font-size: 12px;
letter-spacing: .06em;
color: var(--mutedd);
}
.site-footer__link {
color: var(--mutedd);
border-bottom: 1px solid rgba(243, 222, 142, .4);
padding-bottom: 2px;
transition: color var(--t-hover), border-color var(--t-hover);
}
.site-footer__link:hover { color: var(--butter); border-color: var(--butter); }
/* Once the three can no longer share a line, space-between stops being the right
distribution: it works per flex line, so a wrapped bar would push the lockup
and the copyright to opposite edges of line one and drop the credit alone on
line two. Stacked, they go left instead and share the lockup's edge, on one
consistent gap.
Measured, not chosen: the three need 601.7px of ink plus their 2 x 16px
minimum gaps, which the 44px gutters run out of at a **721.7px** viewport.
This query read 740px until 2026-07-17, measured back when the footer was two
items rather than three (the pair needed 652.6px, running out at 741). Left
there it fired across 722-740, a band where the three still fit on one line:
they would have bunched left on a 22px gap instead of distributing, which is
the exact thing Chenélle asked to have fixed. Re-measure this if the lockup or
either line of text changes. */
@media (max-width: 720px) {
.site-footer__inner {
justify-content: flex-start;
gap: 22px;
}
}
/* ================================================================ my-story.html */
/* The Meet Thalia page. There is no approved design for it: the Claude Design
covers the homepage only, so everything below is built from patterns the
design already established, not invented alongside them.
**Rebuilt 2026-07-17.** Chenélle: "way too plain... make this section more
beautiful... give it the same vibe as the rest of the site. It needs to be
wow." It was plain for a reason worth naming, because the fix follows from it:
the page was cream from the breadcrumb to the closing band, one colour change
over its whole length, while the home page had grown to navy → butter → navy →
butter → cream → navy2 with a curve on every edge. Calm on its own; next to
the rest of the site it read unfinished.
It now takes the home page's rhythm: **navy → cream → butter → cream →
navy2**, curve on every join, the same wave path and the same fills. The hero
is navy because that is what the cut-out needs. Her dress is near-black and
her arms are stage-lit, so on cream she reads as a dark shape stuck to a pale
page; on navy she reads the way she does on the home page's hero and Meet
Thalia, which is the arrangement Chenélle asked this page to match.
IMPORTANT, and it governs every glow below: --muted on flat cream is 4.59:1,
the tightest passing pair on the site. Composited over --butterpale it drops
to 4.25:1 and fails AA. So no butter wash sits behind body copy on cream. On
navy there is no such constraint, which is the other reason the glow can be
generous up there and has to be disciplined down here. */
/* --- breadcrumb --- */
/* Navy, so it and the hero read as one band rather than leaving a cream strip
stranded above a navy section. The inner box keeps the page's measure; the
background is full-bleed. */
.crumb {
background: var(--navy);
padding: clamp(22px, 3vw, 34px) var(--gutter) 0;
}
.crumb__inner {
max-width: var(--maxw);
margin: 0 auto;
}
.crumb__list {
display: flex;
align-items: center;
gap: 12px;
margin: 0;
padding: 0;
list-style: none;
font-size: 11.5px;
letter-spacing: .16em;
text-transform: uppercase;
}
/* The separator is a hairline drawn in CSS, not an arrow typed into the markup,
for the reason the Contact list's dots are: it is punctuation between links
and a screen reader has no business reading it out. The , the
aria-label and aria-current carry the structure. */
.crumb__item + .crumb__item::before {
content: '';
display: inline-block;
width: 16px;
height: 1px;
margin-right: 12px;
vertical-align: middle;
background: var(--hairline-strong);
}
.crumb__item { color: var(--mutedd); } /* 6.30:1 on navy */
.crumb__link { color: var(--cream); opacity: .82; transition: opacity var(--t-hover); }
.crumb__link:hover { opacity: 1; }
.crumb__item + .crumb__item::before { background: rgba(251, 246, 234, .28); }
/* --- hero --- */
/* Navy, and the cut-out stands on the floor of it. padding-bottom is the wave's
own height and no more: the figure is bottom-aligned, so the section's floor
is where she stands and the curve is drawn across it. */
.story-hero {
position: relative;
overflow: hidden;
background: var(--navy);
color: var(--cream);
padding: clamp(30px, 4vw, 54px) 0 92px;
}
.story-hero__grid {
position: relative;
z-index: 1;
max-width: 1320px;
margin: 0 auto;
padding: 0 var(--gutter);
display: grid;
/* Figure left, copy right, per Chenélle 2026-07-17. The copy still takes the
wider column: it holds the page's h1. */
grid-template-columns: minmax(0, .82fr) minmax(0, 1.08fr);
align-items: center;
gap: clamp(32px, 5vw, 90px);
}
/* Bottom-aligned, so she stands on the section's floor rather than floating in
a centred row, and the eye reads figure-then-words along the ground line.
The negative margin is what lets her overlap the curve instead of stopping
politely above it: it is the difference between a photo placed on a page and a
figure standing in it. It cannot cause a scrollbar, because .story-hero
clips. */
.story-hero__figure {
position: relative;
z-index: 1;
margin: 0 0 -92px;
align-self: end;
justify-self: center;
max-width: 460px;
}
/* The glow, and it hangs off the figure rather than off the section on purpose.
It is doing real work, not decoration: her dress is near-black on a navy
section and dissolves into it without something behind her. But it is also the
most dangerous thing on this page. --mutedd is 6.3:1 on flat navy; composited
over the centre of this wash it falls to **3.64:1 and fails AA**. It is the
cream hero's old trap exactly, mirrored: butter lifts the ground toward light
copy the same way it lifts it toward dark copy.
Pinning it to the figure is the fix, not a tidy-up. Centred on the section it
sat 268px left of her, so her right side dissolved anyway AND the wash drifted
toward the copy as the viewport changed. Anchored here it tracks her at every
breakpoint for free.
**150%, and the number is measured rather than chosen.** The gradient reaches
zero alpha at 70% of its radius, so what has to clear the copy is that stop,
not the box. At 165% the worst case was 1040-1120px, where the copy column
narrows faster than the figure does: 22px of clearance. True zero, so it
passed, but 22px is inside the noise of a font swap or a measure change and
would have broken silently. 150% roughly doubles it everywhere and costs
almost nothing visually, because the outer fifth of that circle was already
painting nothing. **If you grow this, or push the 70% stop out, re-measure the
stop against .story-hero__copy's left edge at 1040 and not just at 1440.** */
.story-hero__figure::before {
content: '';
position: absolute;
left: 50%;
top: 46%;
transform: translate(-50%, -50%);
z-index: -1;
width: 150%;
aspect-ratio: 1;
border-radius: 50%;
background: radial-gradient(closest-side, rgba(243, 222, 142, .22), rgba(18, 58, 73, 0) 70%);
pointer-events: none;
}
.story-hero__figure img {
position: relative;
display: block;
width: 100%;
/* Load-bearing, not tidying: the height attribute is a presentational hint and
would otherwise render this at its full 1435px. */
height: auto;
}
/* Fades rather than rises, and slower than the copy, so she settles while the
words are still arriving. Matches the home page's portrait. */
.story-hero__figure.reveal {
transform: none;
transition: opacity 1.6s var(--ease) .1s;
}
.story-hero__copy { position: relative; z-index: 2; }
.story-hero__eyebrow {
margin: 0 0 22px;
font-size: 12.5px;
letter-spacing: .28em;
text-transform: uppercase;
/* --butter, not --gold-text. The darkened gold exists for type on cream; on
navy it is butter that sings at 9.06:1, and --gold-text would go muddy. */
color: var(--butter);
--d: 0s;
}
.story-hero__title {
margin: 0;
font-family: var(--serif);
font-weight: 500;
font-size: clamp(38px, 5vw, 68px);
line-height: 1.02;
letter-spacing: -.01em;
color: var(--cream);
--d: .08s;
}
.story-hero__title em { font-style: italic; color: var(--butter); }
.story-hero__lead {
margin: 28px 0 0;
font-size: 18px;
line-height: 1.68;
color: var(--mutedd);
max-width: 48ch;
--d: .16s;
}
/* --- the story: one cream field, centred, symmetric --- */
/* Was five colour-banded sections with a wave on every join. Chenélle
2026-07-20: "do not break everything into different sections... make the flow
smooth" and "ensure it is symmetrical all over". So the opening, the
qualifications and her closing reflection now share one cream ground and one
centred measure, spaced apart rather than walled off by colour and a curve.
The top padding clears the hero's cut-out, which overlaps the wave by 92px. */
.story {
background: var(--cream);
padding: var(--section-y) 0 var(--section-y);
}
.story__inner {
max-width: 720px;
margin: 0 auto;
padding: 0 var(--gutter);
text-align: center;
}
/* Each movement is a beat of the same story; the space between them is what
separates them now that the bands are gone. */
.story__movement + .story__movement { margin-top: clamp(64px, 9vw, 116px); }
.story__heading {
margin: 0 0 28px;
font-family: var(--serif);
font-weight: 600;
font-size: clamp(28px, 3.2vw, 40px);
line-height: 1.1;
letter-spacing: -.01em;
color: var(--ink);
--d: 0s;
}
/* The opening line, set larger than the rest: it is the first thing Thalia says
in her own voice and it carries the switch from the hero's third person. */
.story__opening {
margin: 0 auto;
font-size: clamp(20px, 1.9vw, 24px);
line-height: 1.6;
color: var(--muted);
max-width: 34ch;
--d: .08s;
}
/* Her closing reflection: short first-person paragraphs, centred on a
comfortable measure. Centred body copy is a readability risk on long text, but
these are three short paragraphs on a personal page, and centring is what
makes the column read symmetric, which is the explicit ask. */
.story__p {
margin: 0 auto;
font-size: 18px;
line-height: 1.72;
color: var(--muted);
max-width: 46ch;
--d: .12s;
}
.story__p + .story__p { margin-top: 22px; --d: .18s; }
/* The line the page turns on, lifted a little: serif italic, its own space. */
.story__p--close {
margin-top: 32px;
font-family: var(--serif);
font-style: italic;
font-size: clamp(20px, 2.1vw, 26px);
line-height: 1.4;
color: var(--ink);
max-width: 32ch;
--d: .24s;
}
/* --- qualifications: a centred 2x2 grid, not a butter band --- */
/* Four terms and their descriptions, the grid balanced left and right so the
block stays symmetric. Text inside each cell is left-aligned: centred
multi-line descriptions read poorly, and a 2x2 grid is symmetric regardless of
its cells' inner alignment. 2021 is the only year Thalia gives, so there is no
dated spine to invent the rest of. */
.creds__grid {
margin: clamp(34px, 4vw, 48px) auto 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(26px, 3.5vw, 44px) clamp(34px, 5vw, 64px);
text-align: left;
}
.creds__cell {
padding-top: 22px;
border-top: 1px solid rgba(18, 58, 73, .16);
}
.creds__term {
font-family: var(--serif);
font-weight: 500;
font-size: clamp(19px, 1.7vw, 23px);
line-height: 1.3;
color: var(--ink);
margin-bottom: 10px;
}
.creds__desc {
margin: 0;
font-size: 16px;
line-height: 1.68;
/* --muted is 4.59:1 on cream and passes. The butter band that forced
--muted-onbutter is gone, so plain --muted is correct again. */
color: var(--muted);
}
/* --- gallery --- */
.story-gallery {
position: relative;
background: var(--cream);
padding: 0 0 calc(var(--section-y) + 92px); /* room for the wave */
}
/* 960px, not the page's --maxw. Chenélle 2026-07-17: the section was "too large
... make them smaller". At full width nine photographs read as a wall; pulled
in to 960 with two columns they read as a set, each frame smaller and the
whole section shorter. */
.story-gallery__inner {
position: relative;
z-index: 1;
max-width: 960px;
margin: 0 auto;
padding: 0 var(--gutter);
}
.story-gallery__head {
text-align: center;
margin-bottom: clamp(38px, 4vw, 62px);
}
.story-gallery__eyebrow {
margin: 0 0 18px;
font-size: 12.5px;
letter-spacing: .28em;
text-transform: uppercase;
color: var(--gold-text); /* gold as type on cream: --gold is 2.76:1 */
--d: 0s;
}
.story-gallery__title {
margin: 0;
font-family: var(--serif);
font-weight: 600;
font-size: clamp(30px, 3.6vw, 46px);
line-height: 1.04;
letter-spacing: -.01em;
color: var(--ink);
--d: .06s;
}
.story-gallery__title em { font-style: italic; font-weight: 500; }
/* A horizontal filmstrip, not a stacked grid. Chenélle 2026-07-17: the section
was "too large ... either make them smaller or put it in a carousel". A grid of
nine photographs is five rows tall however it is columned; a filmstrip is one
row, so the section shrinks from ~1900px to ~560px and reads as a considered
reel rather than a wall.
Every frame is set to a shared HEIGHT and lets its width follow its own aspect
ratio, which is what makes mixed orientations sit together without cropping:
the seven landscapes come out wide, the two portraits narrow and tall, all on
one baseline. No object-fit crop, so nothing is cut, which was the whole reason
the grid could not use one aspect-ratio.
Native overflow scroll, no JS: it works with trackpad, touch, shift-wheel and
the keyboard (the strip is focusable and arrow-scrollable), and it cannot break
the way a scripted carousel can. scroll-snap settles each frame to the left
edge. The list keeps its semantics, so a screen reader reads nine list items
in order and never has to operate a widget. */
.story-gallery__grid {
display: flex;
gap: clamp(14px, 1.4vw, 20px);
margin: 0;
padding: 0 var(--gutter) 6px; /* gutter padding so the first/last frame isn't flush to the edge */
list-style: none;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding-left: var(--gutter);
/* A thin scrollbar that matches the page rather than the OS default slab. */
scrollbar-width: thin;
scrollbar-color: rgba(18, 58, 73, .3) transparent;
/* Momentum scroll on iOS. */
-webkit-overflow-scrolling: touch;
}
/* The strip is full-bleed, so it can run edge to edge while the head above it
keeps the page measure. It overrides .story-gallery__inner's 960 cap for its
own width only. */
.story-gallery__inner { max-width: none; padding: 0; }
.story-gallery__head { max-width: 960px; margin-left: auto; margin-right: auto; padding: 0 var(--gutter); }
/* The strip is a focusable scroll region: give keyboard users a visible ring, on
--gold-text for the 3:1 a focus indicator needs on cream (WCAG 1.4.11). */
.story-gallery__grid:focus-visible {
outline: 2px solid var(--gold-text);
outline-offset: 4px;
}
/* A soft fade on the right edge, so the strip reads as "there is more" rather
than ending on a hard cut. Pure decoration over the cream, above the frames
but never taking a click. */
.story-gallery__inner { position: relative; }
.story-gallery__inner::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 6px; /* clears the scrollbar */
width: clamp(40px, 6vw, 96px);
background: linear-gradient(90deg, rgba(251, 246, 234, 0), var(--cream));
pointer-events: none;
z-index: 1;
}
.story-gallery__item {
flex: 0 0 auto;
scroll-snap-align: start;
margin: 0;
}
.story-gallery__item img {
display: block;
/* Shared height, width follows aspect: this is what lets landscape and
portrait share one row without a crop. height:auto everywhere else on this
page; here the height is the fixed dimension and the width is free. */
height: clamp(300px, 40vw, 460px);
width: auto;
border-radius: 2px;
}
/* No per-item --d stagger and no per-item .reveal: a horizontally-scrolled item
that starts off to the right is not intersecting the viewport, so an observer
would leave it stuck at opacity 0 until it happened to be scrolled in, and
.is-visible is added once and never removed. The strip is revealed as one
block instead (the .reveal is on the ), which is correct and cannot
half-fire. */
/* Credentials and philosophy are no longer their own sections. Both folded into
.story above on 2026-07-20 (Chenélle: "do not break everything into different
sections... make the flow smooth"): the credentials as the centred .creds__grid
and her philosophy as centred .story__p paragraphs, all on the one cream field.
Their old butter and cream bands, and the two waves that joined them, are gone
with them. --muted-onbutter is no longer needed on this page: with no butter
band, all body copy sits on cream, where plain --muted passes at 4.59:1. */
/* The two waves left on this page curve like the home page's: same path, same
height, same bottom:-1px, and every note on .thalia__wave applies. The 1px
overhang is load-bearing, not a rounding nicety, or the two colours meet on one
line and the browser blends a hairline across the seam. Each is filled with the
colour of the section BELOW it. */
.story-hero__wave,
.story-gallery__wave {
position: absolute;
left: 0;
bottom: -1px;
z-index: 2;
width: 100%;
height: 92px;
display: block;
pointer-events: none;
}
.story-hero__wave path { fill: var(--cream); } /* the story, below */
.story-gallery__wave path { fill: var(--navy2); } /* the closing band, below */
/* --- closing quote --- */
/* The quote and the invitation share navy2 so they read as one closing band,
and the footer sits on the same colour: three sections, one dark field, no
seams to hide. */
.story-quote {
background: var(--navy2);
color: var(--cream);
padding: clamp(72px, 9vw, 128px) 0 clamp(56px, 7vw, 92px);
}
.story-quote__inner {
max-width: 900px;
margin: 0 auto;
padding: 0 var(--gutter);
text-align: center;
}
.story-quote__q { margin: 0; --d: 0s; }
.story-quote__q p {
margin: 0;
font-family: var(--serif);
font-style: italic;
font-weight: 400;
font-size: clamp(25px, 3.2vw, 40px);
line-height: 1.36;
letter-spacing: -.005em;
color: var(--cream);
}
.story-quote__by {
margin-top: 28px;
font-size: 11.5px;
letter-spacing: .26em;
text-transform: uppercase;
color: var(--butter);
--d: .12s;
}
/* --- closing invitation --- */
/* No bottom padding, exactly as .contact: the footer closes the page and the
two share the navy, so the join between them is invisible. */
.page-cta {
background: var(--navy2);
color: var(--cream);
padding: 0 0 0;
}
.page-cta__inner {
max-width: 900px;
margin: 0 auto;
padding: 0 var(--gutter);
text-align: center;
}
.page-cta__title {
margin: 0;
font-family: var(--serif);
font-weight: 500;
font-size: clamp(32px, 4vw, 54px);
line-height: 1.04;
letter-spacing: -.01em;
color: var(--cream);
--d: 0s;
}
.page-cta__title em { font-style: italic; }
.page-cta__lead {
margin: 24px auto 0;
font-size: 17.5px;
line-height: 1.68;
color: var(--mutedd);
max-width: 46ch;
--d: .08s;
}
.page-cta__actions {
margin: 40px 0 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 14px;
--d: .16s;
}
/* --- stacked --- */
@media (max-width: 1024px) {
.story-hero__grid {
grid-template-columns: 1fr;
gap: clamp(32px, 5vw, 52px);
}
/* The figure leads the DOM, so it stacks first with no reordering, and she
keeps standing on the floor of the section with the curve across her feet.
The glow needs nothing here: it is anchored to her, so it shrinks with her
and stays centred without a second rule to keep in sync. */
.story-hero__figure {
justify-self: center;
max-width: min(340px, 72vw);
}
}
/* The qualifications grid collapses to a single column where two would crush. */
@media (max-width: 640px) {
.creds__grid {
grid-template-columns: 1fr;
gap: clamp(22px, 6vw, 32px);
}
}
@media (max-width: 640px) {
.story-hero__lead { font-size: 17px; }
.page-cta__actions { flex-direction: column; align-items: stretch; }
}
/* ---------------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
.reveal { opacity: 1; transform: none; }
/* The block above forces .reveal visible in CSS, with no JS involved. The
timeline dot scales in off .is-visible, which only JS adds, so without this
it would sit at 55% forever for a reduced-motion visitor whose JS failed. */
.styles__dot { transform: none; }
/* The hero poses must not cycle. Left alone, the block above would run
dancerCycle once in .01ms and settle every figure on its 100% keyframe,
which is opacity 0: the hero would lose its illustration entirely. Hold the
first pose as a still instead.
Scoped to --cycling since 2026-07-17, and that is a fix, not tidying. These
read `.hero__dancer` flat, so with the hero on one static photo they were
setting opacity:0 on it and clawing it back only via :first-child. It
happened to be the first child, so it happened to render. Anything added
ahead of it in .hero__art-inner would have blanked the hero for every
reduced-motion visitor, with nothing in the hero rules to explain why. The
dormant poses keep their guard; the live photograph is no longer touched. */
.hero__dancer--cycling { animation: none !important; opacity: 0; }
.hero__dancer--cycling:first-child { opacity: 1; }
/* The WhatsApp pill stops pulsing and keeps its glow. The halo lives on the
button, not in the keyframes, precisely so this rule costs nothing but the
motion. See .btn--glow. */
.btn--glow::after { animation: none; }
/* The block above zeroes transition-duration but not transition-delay, and a
closed FAQ panel delays its visibility to the end of the collapse. Without
this the answer would stay in the tab order for half a second after it has
already snapped shut. */
.js .faq__panel { transition-delay: 0s !important; }
/* Reveal the homepage immediately rather than flashing the overlay. */
.intro { display: none; }
}