Rule of thumb from the guidelines: one strong green hit per screen. If a
page has three green things on it, remove two.
-------------------------------------------------------------------------- */
/* A loose marker ellipse around a word or a price. */
.circled {
position: relative;
display: inline-block;
padding: 0.2em 0.62em 0.26em;
isolation: isolate;
}
/* The second of Richard's two ellipse drawings, for a circle that wants a
different hand from the one round "calm down," in the hero. */
.circled-alt::after { background-image: url("/assets/marks/circle-ellipse-2.png"); }
/* A circle laid over a word without moving it. The ordinary .circled pads the
text to make room for the drawing, which pushes the rest of the line along;
this one draws the ellipse around the word in place, so nothing shifts. It
sits behind the letters rather than on top of them, so no opacity is needed
to keep the word readable. */
.circled-overlay {
position: relative;
display: inline-block;
isolation: isolate;
}
.circled-overlay::after {
content: "";
position: absolute;
inset: -0.42em -0.55em -0.46em;
z-index: -1;
background: url("/assets/marks/circle-ellipse-2.png") no-repeat center / 100% 100%;
pointer-events: none;
}
.circled::after {
content: "";
position: absolute;
inset: -0.18em -0.12em -0.22em;
z-index: -1;
background: url("/assets/marks/circle-ellipse.png") no-repeat center / 100% 100%;
pointer-events: none;
}
/* A wider, flatter ellipse — better around three or four words than one. */
.circled-wide::after { background-image: url("/assets/marks/circle-wide.png"); }
/* A heavy ring. For a single number or a very short word only. */
.ringed {
position: relative;
display: inline-block;
padding: 0.3em 0.55em;
isolation: isolate;
}
.ringed::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
translate: -50% -50%;
width: max(100%, 2.7em);
aspect-ratio: 1 / 1; /* keeps the ring round rather than squashing it */
z-index: -1;
background: url("/assets/marks/ring.png") no-repeat center / 100% 100%;
pointer-events: none;
}
/* A tighter ring, for a single narrow letter set inside a line of copy where
the full-size ring would swallow the words either side. */
.ringed-tight { padding: 0.1em 0.2em; }
.ringed-tight::after { width: max(100%, 1.45em); }
/* Richard's highlighter, drawn in blue. Sits behind the words like a real
highlighter rather than under them, so it can run across a whole phrase.
`box-decoration-break: clone` repeats the mark on each line if the phrase
wraps, instead of stretching one bar across the break.
NOTE: blue is not in the brand palette — the guidelines are cream, black
and the one acid green, and say no other colours. This is Matt's own
drawing and his call. Black on this blue measures about 6:1, so the words
underneath stay readable. */
.highlighted {
/* Two background layers. Underneath, Richard's drawn bar; over it a flat
wash of the cream background at 72%, which knocks the blue back to about
28% strength so the words show through. Cream over cream is invisible, so
the wash only shows where the bar is.
The geometry is worked from the PNG. The drawn ink runs from 4.6% to
89.8% of the file's width and fills 38% of its height, so the background
is scaled to 117.4% wide and 3.6em tall and pulled left to 31%, which
lands the ink exactly 2pt past the first and last letter, top and bottom
clear of the words. The negative margin cancels the padding so the bar
bleeds into the space either side without pushing the sentence apart. */
background-image:
linear-gradient(rgba(247, 241, 235, 0.72), rgba(247, 241, 235, 0.72)),
url("/assets/marks/highlight-blue.png");
background-repeat: no-repeat, no-repeat;
background-position: 31% center, 31% center;
background-size: 117.4% 3.6em, 117.4% 3.6em;
padding: 0.06em 2pt;
margin-inline: -2pt;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
/* The same bar in green, for a word in a heading rather than a phrase in a
paragraph. Matt's call, 10 September.
This is Richard's own highlighter drawing recoloured, not a new shape:
highlight-green.png is highlight-blue.png with the brand green swapped in
and every pixel of the alpha left untouched. Both files measure ink from
4.1% to 90.2% across and 39.3% of the height, so the geometry worked out
for the blue bar applies to this one unchanged — 117.4% wide, 3.6em tall,
pulled left to 31%, which lands the ink exactly 2pt past the first and last
letter. If either file is ever redrawn, both need re-measuring.
The wash over it is cream at 50%, so the green sits at half strength — a
highlighter stroke rather than a slab of flat green, which the guidelines
rule out. Measured: black on the finished stroke is 14.3:1. */
.highlighted-green {
background-image:
linear-gradient(rgba(247, 241, 235, 0.5), rgba(247, 241, 235, 0.5)),
url("/assets/marks/highlight-green.png");
background-repeat: no-repeat, no-repeat;
background-position: 31% center, 31% center;
background-size: 117.4% 3.6em, 117.4% 3.6em;
padding: 0.06em 2pt;
margin-inline: -2pt;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
/* A marker line under a word. It sits below the letters without touching
them, the way a real one drawn under a heading does.
Use it on display-size type only — a heading, a .stack line, a .lede.
At body-copy size the stroke is squeezed to about seven pixels tall and
reads as a smudge rather than as a confident mark. */
.underlined {
background: url("/assets/marks/underline-medium.png") no-repeat 0 100% / 100% 0.4em;
padding-bottom: 0.24em;
}
.underlined-thick { background-image: url("/assets/marks/underline-thick.png"); }
.underlined-curve { background-image: url("/assets/marks/underline-curve.png"); }
.underlined-long { background-image: url("/assets/marks/underline-long.png"); }
.underlined-medium { background-image: url("/assets/marks/underline-medium.png"); }
/* A green brush stroke running off the bottom-right corner of a section.
Use it once on a page, not on every section.
It is drawn large and deliberately runs off the edge of the page, the way
Richard uses the brush marks on the guidelines sheets — the mark is a piece
of the drawing rather than a neatly placed decoration. The section clips it,
so nothing spills sideways and the page never scrolls horizontally. */
.swoosh { position: relative; overflow: hidden; }
.swoosh::after {
content: "";
position: absolute;
right: -14%;
bottom: -6%;
width: clamp(22rem, 62vw, 62rem);
aspect-ratio: 940 / 132;
z-index: 0;
transform: rotate(-20deg);
transform-origin: center;
background: url("/assets/marks/swoosh-2.png") no-repeat center / contain;
pointer-events: none;
}
.swoosh > * { position: relative; z-index: 1; }
/* The brush ring, used the same way — very large, cropped by the edge of the
section it sits in. Sits behind the copy, low contrast against cream, so
the words stay the loudest thing on the block. */
.ring-mark { position: relative; overflow: hidden; }
.ring-mark::before {
content: "";
position: absolute;
left: -18%;
top: -34%;
width: clamp(20rem, 54vw, 52rem);
aspect-ratio: 1 / 1;
z-index: 0;
background: url("/assets/marks/ring.png") no-repeat center / contain;
pointer-events: none;
}
.ring-mark > * { position: relative; z-index: 1; }
/* An arrow, for pointing at one thing that genuinely needs pointing at.
Not for tacking on the end of links and buttons. */
.arrow {
display: inline-block;
width: 2.4em;
aspect-ratio: 311 / 278;
background: url("/assets/marks/arrow.png") no-repeat center / contain;
}
/* The pillar icons — breath, connection, growth, presence, ice bath,
meditation, worldwide. Always green outline, never filled, never mixed
with any other icon style. */
/* Sized by height, not width, so icons of different shapes sit level with
each other in a row. */
.icon { height: 3.25rem; width: auto; }
.icon-lg { height: 5rem; }
/* Hand-lettered accent phrases. Short only — three or four words. The
guidelines pair these with a green mark every time, so the underline is
built into the class and cannot be forgotten. */
.hand {
font-family: var(--font-hand);
font-weight: 400;
font-size: var(--text-lg);
line-height: 1.5;
color: var(--green);
display: inline-block;
padding-bottom: 0.34em;
background: url("/assets/marks/underline-curve.png") no-repeat 0 100% / 100% 0.36em;
}
/* If a hand-lettered phrase is circled instead, drop the underline so it is
not wearing both. */
.hand.circled { background-image: none; padding-bottom: 0.26em; }
/* Green hand lettering is very pale against cream — legible at large sizes,
not at small ones. Over a black-and-white photograph it reads properly,
which is what the guidelines describe. Never use it for anything a visitor
has to read to understand the page. */
.on-photo { color: var(--cream); }
.on-photo .hand { color: var(--green); }
/* Big quotation marks for a testimonial. Decorative only — the quote itself
is still real text inside the blockquote. */
.quoted { position: relative; padding-top: 2.6rem; }
/* The mark set immediately before the first letter, in the line, instead of
sitting on its own above it. Matt's call, 10 September. Because it is in
the flow rather than pinned to the corner of the block, it lands in the
right place whether the words are ranged left or ranged right — which the
pinned version could not do for the quote at the foot of the homepage
photograph. */
.quoted.quoted-inline { padding-top: 0; }
.quoted.quoted-inline::before {
position: static;
display: inline-block;
width: 0.5em; /* in em, so it scales with whatever size of type
it is sitting beside rather than being drawn
the same size next to a headline and a caption */
margin-right: 0.2em;
vertical-align: 0.5em; /* lifts it off the baseline so it sits above the
shoulder of the first letter. One value, and
this is the one to nudge if it wants to go
higher or lower again. */
}
.quoted::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 2.4rem;
aspect-ratio: 260 / 230;
background: url("/assets/marks/quote-open.png") no-repeat center / contain;
}
/* --------------------------------------------------------------------------
7. BUTTONS
Black fill, cream text. Green is never a button fill — the guidelines are
explicit about that, and a pale green button would fail on contrast too.
No arrows appended to labels.
-------------------------------------------------------------------------- */
.btn {
display: inline-block;
font-family: var(--font-display);
font-weight: 600;
font-size: var(--text-sm);
line-height: 1.2;
padding: 0.95em 1.6em;
border: 2px solid var(--black);
background: var(--black);
color: var(--cream);
text-decoration: none;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
.btn:hover { background: transparent; color: var(--black); }
.btn-outline {
background: transparent;
color: var(--black);
}
.btn-outline:hover { background: var(--black); color: var(--cream); }
.btn[disabled],
.btn:disabled {
border-color: var(--disabled);
background: var(--disabled);
color: var(--cream);
cursor: not-allowed;
}
/* --------------------------------------------------------------------------
8. LAYOUT
Deliberately plain. Sections are separated by space and the occasional
hairline rule rather than by boxes, cards or shadows.
-------------------------------------------------------------------------- */
.page {
width: 100%;
max-width: var(--page-max);
margin-inline: auto;
padding-inline: var(--gutter);
}
/* A narrower column for long stretches of reading — My Story, The Method. */
.page-narrow {
width: 100%;
max-width: 44rem;
margin-inline: auto;
padding-inline: var(--gutter);
}
section { padding-block: var(--space-2xl); }
/* A passage of copy sitting between two photographs needs more air than a
normal section, or the words look squeezed between the two pictures.
Less below than above — the photograph that follows carries its own
weight and does not need as much run-up. */
.roomy { padding-block: var(--space-3xl) var(--space-xl); }
/* A deeper foot to a section. On the homepage bio the last thing in the
section is an opener — a line with a rule across it — and it needs more
air under it than a paragraph would, so the rule does not read as the
edge of the section itself. Matt's call, 10 September. */
.roomy-foot { padding-bottom: var(--space-3xl); }
/* A thin line between two sections, when space alone is not enough. */
.rule-top { border-top: var(--rule); }
/* Two columns on a laptop, one on a phone. */
.split {
display: grid;
gap: var(--space-xl);
align-items: start;
}
@media (min-width: 48rem) {
.split { grid-template-columns: 1fr 1fr; gap: var(--space-2xl); }
.split-wide-left { grid-template-columns: 1.35fr 1fr; }
.split-wide-right { grid-template-columns: 1fr 1.35fr; }
}
/* A simple stack of items with a hairline between each — used for the three
doors and for lists of programmes. Not cards. No shadows, no corners. */
.stacked-list { display: grid; gap: 0; }
.stacked-list > * {
padding-block: var(--space-lg);
border-top: var(--rule);
}
.stacked-list > *:last-child { border-bottom: var(--rule); }
/* --------------------------------------------------------------------------
9. PHOTOGRAPH PLACEHOLDERS
Matt has very few finished photographs. Every image slot that has no real
picture yet is a flat cream block with a hairline edge and a note saying
which photograph belongs there. An empty space is better than a stock
photo. When the real image arrives, replace the whole block with an
, not a paragraph — so without this the rule runs on
past the right edge of the text above it and the column stops reading as a
column. */
.reveal { margin-bottom: var(--space-lg); max-width: var(--measure-wide); }
/* The homepage bio is a short stack of separate thoughts rather than one
continuous piece of prose, so the blocks are given more air between them
than the standard paragraph rhythm gives. Matt's call, 10 September. One
value controls all of it — raise or lower --space-xl's use here and the
whole stack breathes with it. */
.stack-airy > * { margin-bottom: var(--space-xl); }
.stack-airy > :last-child { margin-bottom: 0; }
.reveal > summary {
display: flex;
align-items: center;
gap: 0.7em;
cursor: pointer;
font-weight: 500; /* Medium — these are sub-headings, and
the three levels on this site are
Semibold title, Medium sub-heading,
Regular body. */
font-size: var(--text-base);
line-height: 1.4;
list-style: none; /* the browser's default triangle */
}
.reveal > summary::-webkit-details-marker { display: none; } /* Safari's */
/* The rule from the + out to the end of the column. The minimum width is so
that on a phone, where a long opening line wraps to two lines and there is
little room left on the row, the rule still reads as a rule rather than
collapsing to a dash. */
.reveal > summary::after {
content: "";
flex: 1 1 auto;
min-width: 2rem;
height: 1px;
background: currentColor;
opacity: 0.45;
}
/* The +. Drawn rather than typed, so it is a true square cross at any size
instead of whatever the font thinks a plus sign looks like. */
.reveal-plus {
position: relative;
flex: 0 0 auto;
width: 0.8em;
height: 0.8em;
opacity: 0.75;
}
.reveal-plus::before,
.reveal-plus::after {
content: "";
position: absolute;
background: currentColor;
}
.reveal-plus::before { top: 0; bottom: 0; left: 50%; width: 1px; transform: translateX(-50%); }
.reveal-plus::after { left: 0; right: 0; top: 50%; height: 1px; transform: translateY(-50%); }
/* Open: the upright stroke goes, so the + reads as a minus. */
.reveal[open] > summary .reveal-plus::before { opacity: 0; }
.reveal-body { padding-top: var(--space-md); }
.reveal-body > :last-child { margin-bottom: 0; }
/* Qualifications, sitting under a page title. Quiet and factual — the
guidelines ask for practical details stated plainly, never dressed up. */
.credential {
font-weight: 500;
font-size: var(--text-base);
line-height: 1.4;
max-width: 42em;
margin: calc(var(--space-xs) * -1) 0 var(--space-md);
}
/* A quiet second line under a section heading. */
.section-note {
font-weight: 400;
font-size: var(--text-base);
margin: calc(var(--space-md) * -1) 0 var(--space-lg);
}
/* What a format actually involves: a short list of plain facts, then the
line about breath that the whole thing is for. The breath line is set in
Medium so it lifts off the facts above it without shouting. */
.format-details {
list-style: none;
padding: 0;
margin: var(--space-2xs) 0 var(--space-sm);
max-width: none;
font-weight: 400;
font-size: var(--text-xs);
line-height: 1.45;
}
.format-details li {
margin: 0 0 0.15em;
padding-left: 0.9em;
position: relative;
}
.format-details li::before {
content: "";
position: absolute;
left: 0;
top: 0.68em;
width: 0.4em;
height: 1px;
background: var(--black);
}
.format-breath {
font-weight: 500;
font-size: var(--text-base);
line-height: 1.3;
margin: 0;
max-width: none;
text-wrap: balance;
}
/* A second price or an audience note under a format. Quieter than the
headline price on the photograph. Written out in words rather than joined
with middle dots, which the guidelines rule out. */
.format .meta {
font-size: var(--text-xs);
line-height: 1.4;
margin-top: var(--space-2xs);
}
/* The four brand pillars, set the way Richard sets them on the comp sheet:
a row of drawn icons with the pillar name under each. */
.pillars {
display: grid;
grid-template-columns: repeat(4, auto);
justify-content: center; /* centred across the width of the copy */
gap: clamp(var(--space-lg), 6vw, var(--space-3xl));
margin: var(--space-3xl) 0 var(--space-2xl);
padding: 0;
list-style: none;
max-width: none;
}
.pillars li { margin: 0; text-align: center; }
.pillars img { height: clamp(4rem, 7vw, 6rem); width: auto; margin: 0 auto var(--space-sm); }
.pillars span {
display: block;
font-family: var(--font-display);
font-weight: 500;
font-size: var(--text-sm);
letter-spacing: 0.04em;
text-transform: uppercase;
}
@media (max-width: 34rem) {
.pillars { grid-template-columns: repeat(2, auto); gap: var(--space-md); }
}
/* An arrow pointing at the thing you are meant to do next — the booking
link. Richard uses one exactly this way on the comp sheet. */
.arrow-to-action {
display: block;
width: 3rem;
aspect-ratio: 311 / 278;
background: url("/assets/marks/arrow.png") no-repeat center / contain;
transform: scaleX(-1); /* point right, toward the button */
margin: 0 0 var(--space-xs) var(--space-md);
}
/* A price given room to breathe, so a drawn circle round it actually reads.
The guidelines name pricing as the thing the ellipse is for. */
.pricing-list { font-size: var(--text-lg); line-height: 1.35; }
.pricing-list li { margin-bottom: var(--space-sm); }
/* This one crop is tuned by hand rather than by a corner keyword: far enough
down to keep the nose and mouth, far enough up to take the eyes out of
frame. Nudge the second number if the photograph is ever replaced. */
.crop-below-eyes { object-position: 50% 28%; }
/* A quote set in capitals. Only a hair of letter-spacing — capitals need a
little to breathe, but the brief rules out tracked-out capitals. */
.statement-caps {
text-transform: uppercase;
letter-spacing: 0.02em;
line-height: 1.25;
}
/* Steering a crop. A tall photograph squeezed into the 4:3 grid frame shows
only its middle third, which can cut the subject out entirely. Add one of
these to the ![]()
to pull the crop to the part that matters. */
.pos-bottom { object-position: center bottom; }
/* Nearly at the foot of the frame, but not flush — for a picture where the
subject sits low and there is something above it worth keeping. */
.pos-low { object-position: center 88%; }
.pos-top { object-position: center top; }
.pos-left { object-position: left center; }
.pos-right { object-position: right center; }
/* An empty slot inside the grid, for a format with no photograph yet. */
.format .photo-slot { aspect-ratio: 4 / 3; }
/* A price sitting on an empty slot rather than a photograph. The slot is
cream, so the cream price would vanish — it goes black instead. */
.format-photo .photo-slot + .price { color: var(--black); }
/* Quote sitting on the right of a photograph, level with the middle, for
pictures whose subject occupies the left. */
.photo-statement-text.place-right-middle { align-items: center; }
.photo-statement-text.place-right-middle .page { display: flex; }
.photo-statement-text.place-right-middle .statement { margin-left: auto; }
/* Below centre, on the right, and out to the edge of the picture. Its own
class rather than a change to place-right-middle, which Schools uses and
which should not move.
The offset is a percentage of the WIDTH, which is how the other placements
on this site do it. The picture is full bleed at a fixed shape, so a share
of the width is a share of the height — the words then hold their spot on
the image at every window size instead of drifting as the frame changes. */
.photo-statement-text.place-right-lower {
align-items: flex-start;
padding-block: 33% 0;
}
.photo-statement-text.place-right-lower .page {
display: flex;
max-width: none;
padding-inline: var(--space-lg);
}
.photo-statement-text.place-right-lower .statement { margin-left: auto; }
/* A narrow quote block, for a photograph where only a small patch is dark
enough. Keeps the words off the bright areas rather than spanning them. */
.statement-narrow { max-width: 20ch !important; font-size: var(--text-base); }
/* Quote high on the right of a photograph, and closer to the edge of the
frame than the page gutter would normally allow — for a picture whose
subject sits low and left. */
.photo-statement-text.place-right-upper {
align-items: flex-start;
padding-top: 9%;
}
.photo-statement-text.place-right-upper .page {
display: flex;
max-width: none;
padding-inline: var(--space-lg);
}
.photo-statement-text.place-right-upper .statement { margin-left: auto; }
/* Quote on the left of a photograph, level with the middle. */
/* Halfway down the frame and hard against the left edge. The page container
is widened so the words sit near the edge of the picture rather than at the
page gutter, which on a wide screen is a long way in from it. */
/* Centred down the frame, hard against the left edge.
There was a lift on this for a while, to keep the block off the sea and
hills at the foot of the left side. That was there to make BLACK ink work.
The quote is cream again now, and cream wants the opposite — the dark sea
is the one part of that side it reads on — so the lift is gone and the
block sits where it was asked to sit. See the note in my-story.html. */
.photo-statement-text.place-left-middle { align-items: center; }
/* Narrower than a long quote would normally be set, so this one breaks over
six lines rather than five. Matt's call. The type stays the size it was —
this is the measure, not the size. Fewer characters per line makes more
lines; more makes fewer. */
.photo-statement-text.place-left-middle .statement-long { max-width: 21ch; }
@media (min-width: 62rem) {
.photo-statement-text.place-left-middle .statement-long { max-width: 21ch; }
}
.photo-statement-text.place-left-middle .page {
max-width: none;
padding-inline: var(--space-lg);
}
/* Quote on the left, sitting in the upper third rather than flush to the
top or centred. */
.photo-statement-text.place-left-upper {
align-items: flex-start;
padding-top: 5%;
}
/* Quote low on the left of a photograph, sitting clear of a caption at the
foot of the frame. */
.photo-statement-text.place-left-lower {
align-items: flex-end;
padding-bottom: 9%;
}
/* Quote in the top left corner of a photograph. */
.photo-statement-text.place-top-left { align-items: flex-start; }
/* A photograph shown exactly as it was cropped in the picture editor, run
full bleed at its own proportions. No object-fit crop on top of it — the
framing has already been decided, and cropping it again in CSS would undo
that the moment the window changes size. */
.photo-statement.photo-whole img {
height: auto;
aspect-ratio: auto;
}
/* A caption on a photograph. Sits at the foot of the picture, quiet and
factual — it is a note about the image, not a second quote, so it takes
no speech mark and stays at small size. Only ever on the dark part of a
frame; check the contrast if the photograph changes. */
.photo-credit {
position: absolute;
left: 0;
right: 0;
bottom: var(--space-xl);
margin: 0;
pointer-events: none;
text-align: right; /* sits at the right hand edge of the picture, clear of
the quote in the opposite corner */
}
/* Closer to the edge of the frame than the page gutter would normally allow. */
.photo-credit .page {
max-width: none;
padding-inline: var(--space-lg);
}
.photo-credit p {
margin: 0;
font-size: var(--text-base); /* the same size as body copy */
font-weight: 500;
max-width: none; /* one line across the foot of the picture, rather than
wrapping at the normal reading measure. It still wraps
on a phone, where one line will not fit. */
}
/* The caption used to carry Richard's closing speech mark. Removed 10
September — see the note next to .statement.quoted above. Captions now end
with the words and nothing after them. */
/* ON A PHONE, THE CAPTION COMES OFF THE PICTURE.
A wide photograph shown at its own proportions is only about 220px tall on
a phone. The quote sits near the top of it and the caption sits at the
foot, and at that height there is not room for both — they land on top of
each other and neither can be read. Measured at 375px wide: 38px of
overlap. This happened with all three photographs tried in this slot, so
it is the height of the frame, not the choice of picture.
Below 34rem the caption stops being laid on the image and sits underneath
it on the cream instead, still at the right. The photograph stays whole,
the quote keeps the frame to itself, and the words stay readable. Nothing
changes on a laptop.
If this is not wanted, deleting this whole block puts it back exactly as
it was — and puts the overlap back with it. */
@media (max-width: 34rem) {
/* The words at the foot come off the picture and sit underneath it on the
cream, still to the right. Both the caption and the bottom-right quote,
since the homepage has used each of them in that slot. */
.photo-statement .photo-credit,
.photo-statement .photo-statement-text.place-bottom-right,
.photo-statement .photo-statement-text.place-right-lower {
position: static;
padding-top: var(--space-md);
padding-bottom: var(--space-md);
text-align: right;
color: var(--black); /* it is on cream down here, not on the picture */
}
.photo-statement .photo-statement-text.place-bottom-right .statement,
.photo-statement .photo-statement-text.place-right-lower .statement {
margin-left: auto;
}
/* And the quote moves to where it is supposed to be. The spacing above it
is set in fixed units — room for the speech mark, then the gap from the
top of the frame — which on a laptop puts it neatly in the top corner
and on a phone puts it 40% of the way down a much shorter picture, in
the middle of whatever the photograph is of. Tightened here so "top
left" means top left on a phone too. The mark comes down with it. */
.photo-statement .photo-statement-text { padding-block: var(--space-xs); }
.photo-statement .photo-statement-text.place-right-lower { padding-block: var(--space-md); }
.photo-statement .statement.quoted { padding-top: 1.5rem; }
.photo-statement .statement.quoted::before { width: 1.4rem; }
}
/* The cause-and-effect pairing, set larger than the copy around it and given
air above and below so it reads as a statement rather than a sentence in
the flow. The two halves sit on their own lines. */
/* SIZED TO HOLD ONE LINE. Matt's call, 10 September: the heading and each
half of this pairing read as single lines, not as wrapped paragraphs.
Nothing forces that — forcing it would push the words off the side of a
phone. Instead the type is tied to the width of the window closely enough
that the line shrinks with the column and stays whole. The 4.3vw is what
does it; the two ends of the clamp are the smallest and largest it is
allowed to get. It holds one line down to roughly a 400px window, and
below that the 1.9rem floor takes over and it wraps, which on a phone is
the right answer anyway.
If either line of copy gets longer, the 4.3 has to come down to match, or
it will start wrapping again at the wider sizes. */
.pairing {
font-size: clamp(1.9rem, 4.3vw, 3rem);
line-height: 1.95; /* the gap between the two halves of the pairing —
wide enough for the drawn circle on the first line
not to touch the second */
margin-block: var(--space-2xl) calc(var(--space-2xl) + var(--space-md));
max-width: none;
}
/* A few words lifted to Semibold inside a Regular paragraph — used for the
names of the trainings, so they carry weight without becoming a heading. */
.semi { font-weight: 600; }
/* Richard's marks set under a passage rather than beside it.
These used to be pinned to the margin with absolute positioning, aimed at
particular words. That broke every time the copy changed length, so they
now sit in the normal flow as a row underneath — the ice bath and its arrow
part way across, the breath figure at the right hand end. Nothing to re-aim
when the paragraph is edited. Hidden below 62rem: on a phone there is no
room for them beside the reading column. */
/* The breath figure sits out in the left margin beside the last few lines of
the passage. It is anchored to the bottom of the paragraph rather than to a
particular word, so editing the copy moves it with the paragraph instead of
leaving it pointing at nothing. Hidden below 62rem, where there is no
margin to put it in. */
.marked-passage { position: relative; }
.margin-mark { display: none; }
@media (min-width: 62rem) {
.margin-mark { display: block; position: absolute; pointer-events: none; }
.margin-mark img { height: 100%; width: auto; display: block; }
.mark-breath { left: -5.25rem; bottom: 1.5em; height: 4.5rem; }
}
.marks-row { display: none; }
@media (min-width: 62rem) {
.marks-row {
display: flex;
align-items: center;
margin: var(--space-md) 0 0;
max-width: none;
}
.marks-row .mark-group { display: flex; align-items: center; gap: 0.6rem; }
.marks-row .mark-group-mid {
margin-left: 62%;
transform: translate(4.5rem, -4.5rem); /* nudged right and up, as a
transform so it does not
push the row about */
}
.marks-row .mark-group-end { margin-left: auto; }
/* Closer in to the copy than mark-group-mid, which is set for the homepage
where the row has the full column to play with. Matt's call: the ice bath
on Schools sits in against the end of the credentials list rather than
drifting out to the right hand edge. */
.marks-row .mark-group-near {
margin-left: 34%;
transform: translateY(-2.5rem);
}
/* The arrow, dropped down the page and drawn larger. It points up at the
quote in the margin, so it wants to sit below the copy it is leaving
rather than level with it. Both class names on the width, because
.marks-row .arrow above sets its own. */
.marks-row .mark-group-down { transform: translateY(3.5rem); }
.marks-row .arrow.arrow-up { width: 4.75rem; }
.marks-row img {
height: 4rem;
width: auto;
display: block;
position: relative;
top: 1.5rem; /* the bath sits lower than the arrow pointing at it */
}
.marks-row .arrow {
width: 3rem;
transform: scaleX(-1); /* the drawing points down-left; mirrored it
points down-right, as on Matt's mark-up */
}
}
/* A sentence lifted out of a passage and set at heading size, so it opens the
passage rather than sitting inside it. Matched to .pairing. */
.copy-title {
font-size: clamp(1.9rem, 4.3vw, 3rem); /* one line — see the note on .pairing */
line-height: var(--leading-snug);
letter-spacing: -0.015em;
margin-bottom: var(--space-md);
max-width: none;
}
/* A section heading set at page-title size, where the block it opens carries
the weight of a page of its own. */
.heading-lg {
font-size: var(--text-2xl);
line-height: var(--leading-tight);
letter-spacing: -0.02em;
}
/* THE METHOD, as four numbered steps.
A real sequence — assess, speak, listen, pass it on — which is why it is
numbered at all; the brief rules out numbering things that are not. The
numerals are written into the page rather than generated by CSS, the same
decision as the six week programme, so they are real text. That is also why
the list markers are turned off here: without this the page shows "1. 1." */
.method-steps {
list-style: none;
padding: 0;
margin: var(--space-xl) 0 0;
max-width: none;
}
.method-steps li {
display: grid;
grid-template-columns: auto 1fr;
column-gap: var(--space-lg);
align-items: start;
margin: 0 0 var(--space-2xl);
max-width: none;
}
.method-steps li:last-child { margin-bottom: 0; }
.method-steps p { margin: 0; max-width: none; }
.step-no {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(2.4rem, 5vw, 4.4rem);
line-height: 0.86;
letter-spacing: -0.03em;
}
@media (max-width: 34rem) {
.method-steps li { grid-template-columns: 1fr; row-gap: var(--space-xs); }
}
/* THE CORE RESET, on the MPR page.
The one block a reader is meant to follow along with while they do it, so it
is set for reading rather than scanning: a comfortable measure instead of the
full page width, looser leading than the copy around it, and real air between
the steps. Each step opens with its own name in Medium so the eye can find
its place again after looking away. */
.reset { max-width: 34em; }
.reset p { max-width: none; line-height: 1.62; }
.reset .step { margin-bottom: var(--space-lg); }
.reset .step:last-child { margin-bottom: 0; }
.reset .step-name {
font-weight: 500;
display: block;
margin-bottom: 0.2em;
}
/* A crisis line in the footer. Set apart from the small print above it,
because someone who needs it should not have to hunt for it. */
.footer-help {
font-weight: 500;
max-width: 42em;
margin-bottom: var(--space-sm);
}
/* Copy set in capitals. Only a hair of letter-spacing — caps need a little
to breathe, but the brief rules out tracked-out capitals. */
.caps { text-transform: uppercase; letter-spacing: 0.015em; }
/* Quote in the middle of a photograph. Used where the darkest area of the
picture is central rather than in a corner. */
.photo-statement-text.place-centre { align-items: center; }
.photo-statement-text.place-centre .page { display: flex; justify-content: center; }
/* Quote centred along the foot of a photograph. */
.photo-statement-text.place-bottom-centre { align-items: flex-end; padding-bottom: 6%; }
.photo-statement-text.place-bottom-centre .page { display: flex; justify-content: center; }
.photo-statement-text.place-bottom-centre .statement { text-align: center; }
/* Quote in a top corner of a photograph. */
.photo-statement-text.place-top-right { align-items: flex-start; padding-top: 5%; }
.photo-statement-text.place-top-right .page {
display: flex;
justify-content: flex-end;
max-width: none; /* closer to the edge of the frame than the
page gutter would normally allow */
padding-inline: var(--space-lg);
}
/* Cream is the default on a photograph. On a picture that is blown out white
where the words have to sit, the type goes black instead — the guidelines
ask for white or green on images, so this is a deliberate exception and
only for a frame that gives no dark area at all. */
.on-photo-black { color: var(--black); }
/* Quote at the bottom left of a photograph. */
.photo-statement-text.place-bottom-left { align-items: flex-end; padding-bottom: 6%; }
/* Quote at the bottom right of a photograph. */
.photo-statement-text.place-bottom-right { align-items: flex-end; }
.photo-statement-text.place-bottom-right .statement { margin-left: auto; }
/* Out to the edge of the picture rather than stopping at the page gutter,
which on a wide screen leaves the words a long way in from the corner they
are meant to be sitting in. */
.photo-statement-text.place-bottom-right .page {
display: flex;
max-width: none;
padding-inline: var(--space-lg);
}
/* A longer quote on a photograph needs a wider measure and a smaller size
than a three-word statement. */
.statement-long {
max-width: 26ch;
font-size: var(--text-lg);
}
/* Narrower again, so a long quote stacks into four lines in a corner instead
of running right across the picture. Set to the right, because it is used
in the bottom right, and the drawn speech mark moves over with it — a mark
on the left of right-aligned text hangs off the block and looks like a
mistake. */
.statement-stacked { text-align: right; }
/* Both class names on purpose. .statement-long sets its own measure further
down this file, and at equal specificity the later rule wins — so naming
both is what makes this one stick. Sized to break the quote into four
lines; a smaller number here makes more lines. */
.statement-long.statement-stacked { max-width: 17ch; }
@media (min-width: 62rem) { .statement-long.statement-stacked { max-width: 18ch; } }
@media (min-width: 62rem) { .statement-long { max-width: 30ch; } }
/* Four times the size of an ordinary statement, for the band under the three
doors. Those three words are the only thing on that picture and are meant
to read from across the room, so they get the whole frame.
The size is tied to the width of the window rather than fixed, so the words
never run off the side of a phone — 10vw is what does the work, and the two
ends of the clamp are the smallest and largest it is allowed to get. Its
own class, like the one below, so it cannot spread to the other quotes. */
.statement-huge {
font-size: clamp(2.6rem, 10vw, 9.6rem);
line-height: 1.05;
max-width: none;
text-align: center;
}
/* One quote is set much larger than the rest, on the ice bath photograph.
Kept as its own class so it cannot spread to the others. */
.statement-xl {
font-size: clamp(2.2rem, 1.4rem + 4.4vw, 4.8rem);
line-height: 1.1;
max-width: 26ch;
}
@media (min-width: 62rem) { .statement-xl { max-width: 22ch; } }
/* Half the size of .statement-xl. Used where a long quote on a photograph
would otherwise fill the frame. */
.statement-half {
font-size: clamp(1.1rem, 0.7rem + 2.2vw, 2.4rem);
line-height: 1.2;
}
/* Each sentence on its own, so the quote sets as two lines then two lines
rather than running on as one block. */
.statement .line { display: block; }
.statement .line + .line { margin-top: 0.45em; }
/* Three photographs side by side, stacking on a phone. */
.photo-row {
display: grid;
gap: var(--space-sm);
margin-block: var(--space-lg);
max-width: none;
}
.photo-row img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
@media (min-width: 40rem) {
.photo-row { grid-template-columns: repeat(3, 1fr); }
}
/* The three doors. */
/* Each door carries one of Richard's icons in a column of its own, so they
sit on a shared left edge and the copy hangs off a second. Below 62rem
there is not room for two columns, so the icon goes above.
The icons are sized by the HEIGHT OF THE DRAWING, not by the size of the
file. Richard's first three — globe, two figures, steps — are cropped tight
to the ink, while the five newer ones sit on a square canvas with a
different amount of white space around each. Sizing them all the same way
made them come out wildly different on screen. The per-icon heights below
are each 5.5rem divided by how much of that file's height the drawing
actually fills, so every icon reads the same size. If an icon is redrawn or
recropped, re-measure it and update its line here. */
/* Air between the section heading and the first hairline of the list. */
.doors { margin-top: var(--space-xl); }
.doors article {
display: grid;
column-gap: var(--space-lg);
padding-block: var(--space-lg); /* equal air above and below the text in
every row */
}
.doors .door-text > :last-child { margin-bottom: 0; }
.doors .door-icon {
width: auto;
height: 5.5rem; /* the three tight-cropped icons */
margin-bottom: var(--space-sm);
}
.doors .door-icon[src*="icon-school"] { height: 7.15rem; } /* ink fills 77% */
.doors .door-icon[src*="icon-business"] { height: 7.20rem; } /* 76% */
.doors .door-icon[src*="icon-sport"] { height: 8.75rem; } /* 63% */
.doors .door-icon[src*="icon-clinical"] { height: 9.20rem; } /* 60% */
.doors .door-icon[src*="icon-families"] { height: 9.60rem; } /* 57% */
@media (min-width: 62rem) {
/* Two columns, one row: the icon, and the heading and copy together as a
single block. The heading and paragraph used to be separate grid rows, so
when the icon made the row taller than the text the two of them were
pushed apart to fill it. Wrapped together they stay tight and the pair
sits centred against the icon. */
.doors-iconed article {
grid-template-columns: 11rem 1fr;
align-items: center;
}
.doors .door-icon {
justify-self: center;
margin-bottom: 0;
}
}
/* The description in each door runs the full width of its column rather
than stopping at the standard reading measure — the column is already
narrower than the page, so the measure was breaking the lines twice. */
.doors article p { max-width: none; }
/* No extra air above the heading — the hairline and the row padding already
separate one door from the next, and the standard "heading that follows
something" margin was adding another 52px on top. */
.doors :is(h2, h3) {
font-size: var(--text-xl);
margin-top: 0;
margin-bottom: var(--space-xs);
}
.doors :is(h2, h3) a { text-decoration: none; }
.doors :is(h2, h3) a:hover {
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 0.16em;
}
/* Interior pages. The hero is a headline and a standfirst rather than a
headline and a portrait, so it needs less room underneath. */
.page-hero { padding-block: var(--space-lg) var(--space-2xl); }
/* A page hero carrying a passage rather than a single standfirst needs the
same air between paragraphs as a body section, or the block reads as one
undifferentiated slab. */
.page-hero .longform-wide p { margin-bottom: var(--space-lg); }
.page-hero .longform-wide p:last-child { margin-bottom: 0; }
.page-hero h1 { max-width: 18ch; }
/* A page title that should hold one line rather than break to two. */
.page-hero h1.one-line { max-width: none; }
/* A standfirst held on one line. The standfirst measure is 30em, which is
right for two or three lines of copy but breaks a short single sentence
onto a second line for the sake of a few characters. It still wraps on a
phone, where nothing this long fits. */
.lede.one-line { max-width: none; }
/* A long title that still has to hold one line. Set smaller than a normal
page title, because 47 characters will not fit across the page at full
display size. It still wraps on a phone — nothing fits there. */
.page-hero h1.one-line-long {
max-width: none;
font-size: clamp(1.5rem, 3.9vw, 2.6rem);
text-wrap: nowrap;
}
@media (max-width: 52rem) {
.page-hero h1.one-line-long { text-wrap: balance; }
}
/* The six week programme. A real sequence, so it is numbered — the numbers
are written into the page rather than generated here, because they are
part of the approved copy. */
.weeks {
list-style: none;
padding-left: 0;
max-width: var(--measure);
}
.weeks li { margin-bottom: var(--space-sm); }
/* Two audiences on one page, so each gets a jump link under the standfirst. */
.jump { display: flex; flex-wrap: wrap; gap: var(--space-lg); margin-top: var(--space-md); }
.jump a { font-weight: 600; }
.closing { padding-block: var(--space-3xl); }
/* Air between the hand-lettered line and the button under it. Matt's call,
10 September, and it applies to every closing on the site — the two were
sitting almost on top of each other, which made the drawn underline look
like it belonged to the button rather than to the words above it. */
.closing .btn { margin-top: var(--space-xl); }
/* Air between the closing statement and the hand-lettered line under it, so
the two do not read as one block. */
.closing .intro-semibold { margin-bottom: var(--space-2xl); }
/* The homepage closing opens with a statement rather than the hand-lettered
line, so it starts higher up — the statement itself provides the break.
Widened on 10 September: the speech mark was sitting almost on the rule
above it, and a drawn mark needs air around it or it reads as part of the
line rather than as the start of a quote. */
.closing-tight { padding-top: var(--space-2xl); }
.site-footer {
border-top: var(--rule);
padding-block: var(--space-xl) var(--space-2xl);
}
.footer-nav {
list-style: none;
padding: 0;
margin: 0 0 var(--space-lg);
max-width: none;
display: flex;
flex-wrap: wrap;
gap: var(--space-xs) var(--space-lg);
}
.footer-nav li { margin: 0; }
.footer-nav a { font-size: var(--text-sm); }
.footer-note { max-width: 42em; }
/* The disclaimer and the company details run as one line, on Matt's
instruction, so this one is not held to the reading measure above — 42em
would break it in two. It still wraps on a phone, where no single line of
that length can fit. */
.footer-legal { max-width: none; }
/* --------------------------------------------------------------------------
13. THE CAREER TIMELINE
Years down the left, what happened on the right. Written as a description
list, which is what it actually is, so a screen reader pairs each year
with its entry.
-------------------------------------------------------------------------- */
.timeline { margin: 0; max-width: 52rem; }
.timeline dt {
font-family: var(--font-display);
font-weight: 600;
font-size: var(--text-lg);
}
.timeline dd {
margin: 0 0 var(--space-lg);
padding-bottom: var(--space-lg);
border-bottom: var(--rule);
max-width: var(--measure);
}
.timeline dd:last-child { border-bottom: 0; }
@media (min-width: 46rem) {
.timeline { display: grid; grid-template-columns: 9rem 1fr; column-gap: var(--space-lg); }
.timeline dt { padding-top: var(--space-lg); }
.timeline dd { padding-top: var(--space-lg); margin-bottom: 0; padding-bottom: var(--space-lg); }
.timeline dt + dd { border-top: 0; }
}
/* --------------------------------------------------------------------------
14. THE ENQUIRY FORM
Plain fields, black on cream, a black outline. No green — a pale green
border would be almost invisible, and the guidelines keep green for marks
rather than for interface parts.
-------------------------------------------------------------------------- */
.enquiry { max-width: 34rem; }
.field { margin-bottom: var(--space-md); }
.field label {
display: block;
margin-bottom: var(--space-2xs);
font-weight: 600;
}
/* The intake form (intake.html) shares these fields. Its radio buttons and
tick boxes are drawn separately in section 16, so they are left out here. */
.enquiry input,
.enquiry select,
.enquiry textarea,
.intake input:not([type="radio"], [type="checkbox"]),
.intake textarea {
width: 100%;
padding: 0.7em 0.8em;
font-family: var(--font-body);
font-weight: 500;
font-size: var(--text-base);
line-height: 1.4;
color: var(--black);
background: var(--cream);
border: var(--rule);
border-radius: 0;
appearance: none;
}
.enquiry textarea { resize: vertical; }
/* The dropdown needs its own arrow once the browser's is turned off. */
.enquiry select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.9em center;
background-size: 0.7em auto;
padding-right: 2.4em;
}
.enquiry button { margin-top: var(--space-sm); }
/* --------------------------------------------------------------------------
15. REDUCED MOTION
If someone has asked their phone or computer to reduce motion — often
because movement makes them ill — the site stops moving.
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* --------------------------------------------------------------------------
THE SHOUT PANEL — NOT CURRENTLY USED BY ANY PAGE
Taken off Contact on 10 September. The markup is parked in a comment in
contact.html and this styling is left intact so it can go straight back.
Delete both together if it is decided against for good.
The night camp beside the enquiry form. Three words down the top left, and
Matt's line in the bottom right corner.
It only works because this particular photograph is nearly black. Cream on
it measures 8.7:1 at worst where the words fall, and 10:1 to 17:1 over most
of them, which is why there is no tint behind them — the guidelines rule
tints out, and this frame does not need one.
On a phone the panel sits under the form. Someone arriving from a text
message should land on "Which room?", not on a picture.
-------------------------------------------------------------------------- */
.shout-panel {
position: relative;
/* Taller than it is wide, like the comp. Fixed shape so the words hold
their place on the picture at every window size. */
aspect-ratio: 4 / 5;
}
.shout-panel img.photo {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.shout-panel-text {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: flex-start;
padding: var(--space-lg);
pointer-events: none;
}
/* STOP / BREATH / GO. Sized against the panel rather than the window, so the
three words always fill the same share of the picture. */
.shout {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(2.4rem, 12.5cqw, 5.5rem);
line-height: 1;
letter-spacing: -0.01em;
text-transform: uppercase;
margin: 0;
max-width: none;
}
/* The one word in green. Green is a spotlight, not a fill — see the note in
contact.html about how many green things end up on this panel. */
.shout-go { color: var(--green); }
/* Matt's line, halfway down the panel and hard to the right. Matt's call,
10 September — it used to sit at the very foot of the frame, which put it
down among the tent and the fire where the picture is busiest. Pinned to
the middle rather than pushed there by the layout, so it holds that spot
whatever the panel does. */
.shout-sub {
position: absolute;
top: 50%;
right: var(--space-lg);
transform: translateY(-50%);
text-align: right;
font-weight: 600;
font-size: var(--text-base);
line-height: 1.35;
margin: 0;
max-width: none;
}
/* Lets .shout size itself against the panel's own width. */
@supports (container-type: inline-size) {
.shout-panel { container-type: inline-size; }
}
/* On a phone the picture is wider than it is tall and sits under the form. */
@media (max-width: 47.99rem) {
.shout-panel { aspect-ratio: 3 / 2; }
}
/* --------------------------------------------------------------------------
MARKS ON THE SCHOOLS PAGE
Richard's meditation figure sits above the pull quote in the right hand
margin, and an arrow points up at the quote from the copy below it. Both
are decoration and both carry aria-hidden, so a screen reader never meets
them.
The figure floats to the same width as the pull quote, which is what stacks
the two of them in the margin — figure, then the quote's own top rule, then
the quote. Below 62rem the pull quote stops floating and runs full width, so
the figure is hidden there rather than left stranded above it.
Sized by the ink, like every icon on this site: icon-meditation and
icon-ice-bath are both 98% ink, so their set height is very nearly the
height they draw.
-------------------------------------------------------------------------- */
.pullquote-mark { display: none; }
@media (min-width: 62rem) {
.pullquote-mark {
display: block;
float: right;
width: 20rem; /* the pull quote's width, so they line up */
margin: 0 0 0 var(--space-2xl);
text-align: center;
}
/* The figure sits ON the rule below it rather than hovering above it, so
the drawing and the line read as one mark. The image is bottom-aligned
and the paragraph carries no gap under it — the small negative lands the
feet on the line rather than a hair above. */
.pullquote-mark img {
height: 4.5rem;
width: auto;
display: block;
margin: 0 auto -2px;
}
/* Both the figure and the quote float right, so without this they sit side
by side and squeeze the copy into a narrow column. Clearing drops the
quote underneath the figure, which is the stack the sketch shows. */
.pullquote-mark + .pullquote { clear: right; }
}
/* The arrow turned to point up and to the right, at the quote in the margin.
arrow.png is drawn pointing down-left, so this is a mirror and a rotation
rather than a second drawing. */
/* arrow.png is drawn pointing down and to the left. Flipping it on both axes
turns it through 180 degrees, so it points up and to the right — at the
quote sitting in the margin above. A rotation alone would not do it. */
/* Both class names on purpose: .marks-row .arrow above sets its own mirror,
and at lower specificity this would quietly lose to it and keep pointing
down. */
.marks-row .arrow.arrow-up {
transform: scale(-1, -1);
transform-origin: center;
}
/* --------------------------------------------------------------------------
16. THE CLIENT INTAKE FORM
intake.html only. The paper intake worksheet as a page a client fills in
on their phone, one section at a time.
Same rules as the enquiry form above: black on cream, hairline outlines,
no green on anything you tap. A chosen answer turns solid black, the way
the buttons do. The one green hit is the drawn underline in the opening
line, which is only shown on the first section.
Radio buttons and tick boxes are the browser's real ones, made invisible
and laid over the drawn box, so a tap, the keyboard and a screen reader
all still work exactly as normal.
-------------------------------------------------------------------------- */
.intake { max-width: 44rem; }
/* intake.js hides and shows things with the hidden attribute. .btn sets its
own display, which would otherwise quietly win and leave Send showing on
every section. */
.intake [hidden],
.intake-section[hidden],
#intake-intro[hidden] { display: none !important; }
/* When intake.js is running, only the current section shows. Without it,
every section shows in turn down one long page. */
.intake .step + .step {
border-top: var(--rule);
margin-top: var(--space-xl);
padding-top: var(--space-xl);
}
.intake.is-stepped .step { display: none; }
.intake.is-stepped .step.is-current {
display: block;
border-top: 0;
margin-top: 0;
padding-top: 0;
}
/* The heading takes focus when a section opens, for screen readers. It is
not something to click, so no ring is drawn for it. */
.intake .step h2:focus { outline: none; }
.intake .step > p { margin-bottom: var(--space-lg); }
/* Which section, and how far through. A black bar in a hairline frame. */
.intake-progress { margin-bottom: var(--space-lg); }
.intake-progress p { margin-bottom: var(--space-xs); font-weight: 500; }
.intake-bar {
height: 0.5rem;
border: var(--rule);
}
.intake-bar span {
display: block;
height: 100%;
width: 0;
background: var(--black);
transition: width 0.25s ease;
}
/* Two or three short boxes side by side on a laptop — Age, Height, Weight.
One under the other on a phone. */
.field-row { display: grid; gap: 0 var(--space-md); }
@media (min-width: 36rem) {
.field-row { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
}
/* One question. */
.intake .q {
border: 0;
margin: 0 0 var(--space-lg);
padding: 0;
min-width: 0;
}
.intake .q legend {
padding: 0;
margin-bottom: var(--space-xs);
font-weight: 500;
}
.intake .field label { font-weight: 500; }
.q-group { margin-block: var(--space-xl); }
.q-group h3 { margin-bottom: var(--space-md); }
/* The "how often" questions in Sleep sit closer together, as one block. */
.intake .q-freq { margin-bottom: var(--space-md); }
.intake .q-freq legend { font-weight: 400; }
/* Four answers in two tidy pairs on a phone, one row of four on a laptop,
rather than three and a leftover. */
.q-freq .choices {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 36rem) {
.q-freq .choices { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.q-freq .choice span { padding-inline: 0.5em; }
/* A tappable answer — Yes, No, 0 to 10, Under 2. */
.choices {
display: flex;
flex-wrap: wrap;
gap: var(--space-xs);
}
.choice {
position: relative;
display: inline-flex;
cursor: pointer;
}
.choice input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: pointer;
}
.choice span {
display: block;
width: 100%;
min-width: 3.4em;
padding: 0.6em 1em;
border: var(--rule);
background: var(--cream);
font-size: var(--text-sm);
font-weight: 500;
line-height: 1.2;
text-align: center;
}
.choice:hover span { outline: 1px solid var(--black); outline-offset: -2px; }
.choice input:checked + span { background: var(--black); color: var(--cream); }
.choice input:focus-visible + span { outline: 3px solid var(--black); outline-offset: 3px; }
/* The 0 to 10 scales. Eleven boxes sharing their edges, the full width of
the column, with the two end labels underneath. */
.scale-options {
display: grid;
grid-template-columns: repeat(11, minmax(0, 1fr));
}
.scale-options .choice span {
min-width: 0;
padding-inline: 0;
margin-left: -1px;
}
.scale-options .choice:first-child span { margin-left: 0; }
.scale-ends {
display: flex;
justify-content: space-between;
gap: var(--space-md);
margin-top: var(--space-2xs);
font-size: var(--text-xs);
}
.scale-ends span:last-child { text-align: right; }
/* Tick lists. A drawn square, filled black with a cream tick once chosen. */
.ticks {
list-style: none;
padding: 0;
margin: 0;
max-width: none;
}
.ticks li { margin: 0; }
.tick {
position: relative;
display: flex;
align-items: flex-start;
gap: var(--space-sm);
padding-block: var(--space-xs);
cursor: pointer;
}
.tick input {
position: absolute;
left: 0;
top: var(--space-xs);
width: 1.25em;
height: 1.25em;
margin: 0;
opacity: 0;
cursor: pointer;
}
.tick-box {
flex: none;
width: 1.25em;
height: 1.25em;
margin-top: 0.1em;
border: var(--rule);
background: var(--cream) no-repeat center / 72% auto;
}
.tick input:checked + .tick-box {
background-color: var(--black);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5.2l3.4 3.3L11 1.5' fill='none' stroke='%23f7f1eb' stroke-width='2'/%3E%3C/svg%3E");
}
.tick input:focus-visible + .tick-box { outline: 3px solid var(--black); outline-offset: 3px; }
/* "Pick up to three" — once three are ticked, the rest go quiet. */
.tick:has(input:disabled) { color: var(--disabled); cursor: not-allowed; }
.tick input:disabled + .tick-box { border-color: var(--disabled); }
/* The safety declaration, set off by a rule either side. */
.declaration {
border-block: var(--rule);
padding-block: var(--space-lg);
margin-block: var(--space-xl) var(--space-lg);
}
.declaration .tick { margin-top: var(--space-sm); font-weight: 500; }
/* Back on the left, Next or Send on the right. */
.intake-nav {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
border-top: var(--rule);
margin-top: var(--space-xl);
padding-top: var(--space-lg);
}
.intake-nav #intake-next,
.intake-nav #intake-send { margin-left: auto; }
.intake .intake-nav button { margin-top: 0; }
.intake-draft { margin-top: var(--space-lg); max-width: none; }
/* A button that reads as a plain link — for "Clear my answers". */
.linklike {
font: inherit;
color: inherit;
background: none;
border: 0;
padding: 0;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.22em;
cursor: pointer;
}
.linklike:hover { text-decoration-thickness: 2px; }
/* --------------------------------------------------------------------------
THE ACTIVITIES — TWO WAYS TO TAKE EACH ONE
Every activity in the six week menu can be taken on its own as a 1:1, or as
part of the three week. That is two destinations, so it cannot be the single
wrapping link the Formats tiles use — it is two links instead.
ON A PHONE THEY ARE ALWAYS VISIBLE, under the photograph, as plain text.
A touch screen has no hover, so anything hidden behind one cannot be reached
at all — and most of the traffic here is a phone. They are set quietly in
black rather than the green hand lettering, because six tiles times two
green words is a page full of green, and green is meant to be a spotlight.
ON A LAPTOP they lift onto the photograph on hover, dark wash and green hand
lettering, exactly like the Book label on the Formats tiles above.
-------------------------------------------------------------------------- */
.week-book {
display: flex;
gap: var(--space-md);
margin: var(--space-sm) 0 0;
max-width: none;
}
.week-book a { font-size: var(--text-sm); }
@media (hover: hover) and (pointer: fine) {
.format-photo .week-book {
position: absolute;
inset: 0;
margin: 0;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-sm);
background: rgba(0, 0, 0, 0.55);
opacity: 0;
transition: opacity 0.15s ease;
}
/* focus-within so the keyboard reaches them too, not just the mouse */
.format-photo:hover .week-book,
.format-photo:focus-within .week-book { opacity: 1; }
/* Richard's hand lettering and drawn underline, as on the Book label. */
.format-photo .week-book a {
font-family: var(--font-hand);
font-weight: 400;
font-size: var(--text-lg);
line-height: 1.5;
color: var(--green);
text-decoration: none;
display: inline-block;
padding-bottom: 0.34em;
background: url("/assets/marks/underline-curve.png") no-repeat 0 100% / 100% 0.36em;
}
.format-photo .week-book a:focus-visible { outline: 3px solid var(--cream); outline-offset: 4px; }
}
@media (prefers-reduced-motion: reduce) {
.format-photo .week-book { transition: none; }
}
/* A narrower quote column: same type size, set over three even lines.
My Story yacht photo, 17 Sep. Keeps the words toward the left edge of the
frame, off the white hull. */
.photo-statement-text .statement.statement-column { max-width: 19ch; text-wrap: balance; }
/* Bottom left, but raised clear of the foot of the frame. My Story yacht
photo, 17 Sep. */
.photo-statement-text.place-bottom-left.place-lifted { padding-bottom: 16%; }
/* On a phone the picture is cropped to its middle, and a quote laid over
the side of the frame lands on the subject's face. With this class, below
34rem the quote comes off the picture and sits underneath it on the cream,
in black. Nothing changes on a laptop. Podcasts page, 17 Sep. */
@media (max-width: 34rem) {
.photo-statement .photo-statement-text.below-on-phone {
position: static;
padding-top: var(--space-md);
padding-bottom: 0;
color: var(--black);
}
.photo-statement .photo-statement-text.below-on-phone .page { padding-inline: var(--gutter, 1rem); }
.photo-statement .photo-statement-text.below-on-phone .statement { margin-left: 0; max-width: none; }
}
/* Podcasts wide shot: on a phone the middle-of-frame crop cuts Matt off at
the left edge. Slide the crop left so he and the guest opposite are both
in. 17 Sep. */
@media (max-width: 34rem) {
.photo.phone-pos-matt { object-position: 40% center; }
}
/* Episode lists on Podcasts & Press: each episode and its "Listen on
Spotify" link on one line. The list may run wider than a paragraph, and
the link text never breaks in the middle. On a phone a long line still
wraps, but the link moves down whole. 17 Sep. */
.list-plain.episodes { max-width: var(--measure-wide); }
.list-plain.episodes a { white-space: nowrap; }
/* Shop: the LOVE HOPE HUGS artwork, full width of the page column. The
image background is already cream, so no box or border. 17 Sep. */
.shop-art { display: block; width: 100%; height: auto; }
/* MATT formats: the closing line of each tile in green hand lettering, on
Matt's instruction, 17 Sep. Undo by deleting this block, which puts the
lines back in black Basier Circle.
Known: green on cream is pale (about 1.4:1), and seven green lines on one
screen is more than the one-green-hit rule. Kept because these lines are
the flourish, not the information; the bullets above carry that. */
.format .format-breath {
text-wrap: pretty; /* fill the line, but never leave one word alone on the last line */
padding-left: 0.15em; /* the script's first letter leans out past the column edge */
font-family: var(--font-hand);
font-weight: 400;
color: var(--green);
/* Between --text-base and --text-lg, with a hairline stroke so the thin
script carries more weight. Homemade Apple has no bold. 17 Sep. */
font-size: clamp(1.15rem, 1.02rem + 0.45vw, 1.38rem);
-webkit-text-stroke: 0.35px currentColor;
line-height: 1.65;
}
/* The menu: each week's question ("Where are you now?") in the same green
hand lettering as the format tiles' closing lines. Matt's instruction,
17 Sep. Delete this block to put them back in black italic. */
.week-facts .question {
padding-left: 0.15em;
font-family: var(--font-hand);
font-style: normal;
font-weight: 400;
color: var(--green);
/* Between --text-base and --text-lg, with a hairline stroke so the thin
script carries more weight. Homemade Apple has no bold. 17 Sep. */
font-size: clamp(1.15rem, 1.02rem + 0.45vw, 1.38rem);
-webkit-text-stroke: 0.35px currentColor;
line-height: 1.65;
margin-block: var(--space-2xs);
}
/* The menu: the activity above each question ("Walk and talk") set larger,
so it reads as the name of the session. Matt's instruction, 17 Sep. */
.week-facts li:first-child { font-size: var(--text-lg); line-height: 1.3; }
/* EVERY QUOTE ON A PHOTOGRAPH, SITE WIDE: capitals, at the Schools quote size
(--text-lg, as .statement-long). Matt's instruction, 17 Sep. This overrides
the larger sizes (.statement-xl "Hi, I'm Matt", the plain .statement on the
homepage). Only quotes with a speech mark (.quoted) — the BREATHE RESET
CONNECT banner is not a quote and keeps its size. Testimonial blockquotes
are not affected. */
.photo-statement .statement.quoted {
text-transform: uppercase;
letter-spacing: 0.015em;
font-size: var(--text-lg);
}
/* Quote lines that start on a new line with no gap between them. Career
Timeline stage-lights quote, 17 Sep. */
.statement.lines-tight .line + .line { margin-top: 0; }
/* The menu: the green question and the last line of each week drop together
to the foot of the box, so all six line up however much sits above them.
Same idea as the breath line on the format tiles. Matt's instruction,
17 Sep. */
.format .week-facts { display: flex; flex-direction: column; flex: 1 1 auto; }
.format .week-facts .question { margin-top: auto; padding-top: var(--space-sm); }
.format .week-facts li:last-child { margin-bottom: 0; }
/* Testimonials page: no rule down the left of each quote — the green speech
mark opens each one instead. Matt's instruction, 18 Sep. */
.testimonial-list blockquote {
border-left: none;
padding-left: 0;
}
/* Stacked lists (the three doors, and "Find the room that fits you") keep the
hairlines between items, but not the one above the first or below the last.
Matt's instruction, 18 Sep. */
.stacked-list > *:first-child { border-top: none; }
.stacked-list > *:last-child { border-bottom: none; }
/* A photograph inside a section that breaks out of the text column and runs
the full width of the window. Businesses & Teams, 18 Sep. */
.photo-full {
width: 100vw;
max-width: 100vw;
margin-left: calc(50% - 50vw);
margin-block: var(--space-lg);
max-height: 70vh;
object-fit: cover;
}
/* A quote on a photograph that runs the full width of the window from inside
a text column. Businesses & Teams, 18 Sep. */
.photo-statement-full {
width: 100vw;
max-width: 100vw;
margin-left: calc(50% - 50vw);
margin-block: var(--space-lg);
}
/* Teams section on Businesses: the photograph runs to the very top of the
section, with the heading under it and no hairline above. 18 Sep. */
.teams-open { padding-top: 0; }
.photo-statement-full.photo-flush-top { margin-top: 0; }
/* The contact line on Businesses, set as a pull quote: no underline under the
link, and the rule sits closer above the words. 18 Sep. */
.pullquote a { text-decoration: none; }
.teams-open .pullquote {
float: none; /* laid out in a column beside the copy instead */
margin: 0;
padding-top: var(--space-xs);
/* The lines are broken by hand in the HTML and the box is sized to them, so
the rule above ends exactly where the longest line of type ends. */
width: max-content;
max-width: 20rem;
}
/* Teams: the copy on the left and the contact line on the right, with the
contact line sitting level with the foot of the copy. On a phone it drops
under the copy. 18 Sep. */
.teams-columns { display: block; }
.teams-copy > p:last-child { margin-bottom: 0; }
@media (min-width: 62rem) {
.teams-columns {
display: flex;
align-items: flex-end;
gap: var(--space-2xl);
}
.teams-copy { flex: 1 1 auto; }
.teams-open .pullquote.teams-cta { flex: 0 0 auto; }
}
@media (max-width: 61.999rem) {
.teams-open .pullquote.teams-cta { margin-top: var(--space-lg); }
}
/* Businesses: the quote under the Teams copy sits closer to it. 18 Sep. */
.quotes-tight { padding-top: 0; }
.teams-open { padding-bottom: var(--space-lg); }
/* --------------------------------------------------------------------------
WHAT'S ON, AND THE BLOG
Two simple lists, built the same way: a small date, a heading, a line or
two under it, hairlines between the entries but not above the first or
below the last. Added 19 September.
-------------------------------------------------------------------------- */
.event-list > * + *,
.post-list > * + * { border-top: var(--rule); }
.event,
.post { padding-block: var(--space-lg); }
.event-list > :first-child,
.post-list > :first-child { padding-top: 0; }
.event-list > :last-child,
.post-list > :last-child { padding-bottom: 0; }
.event-date,
.post-date {
font-size: var(--text-sm);
margin-bottom: var(--space-2xs);
}
.event h2,
.post h2 {
font-size: var(--text-lg);
margin: 0 0 var(--space-xs);
}
.event-where { margin-bottom: 0; }
.post p:last-child { margin-bottom: 0; }
/* Core Reset hero: two short lines, one either side of him. On a phone the
picture is too narrow for both at the same height, so the second drops to
the foot of the frame. 19 Sep. */
@media (max-width: 34rem) {
.photo-statement-text.core-label-a { align-items: flex-start; padding-top: 12%; }
.photo-statement-text.core-label-b { align-items: flex-end; padding-bottom: 12%; }
}
/* Both lines level with each other, at the height of the right hand one.
19 Sep. */
.photo-statement-text.place-top-left.core-label-a,
.photo-statement-text.place-top-right.core-label-b { padding-top: 4.2%; }
/* Core Reset hero: the right hand line comes in to the page gutter, so it
mirrors the left one instead of sitting closer to the edge. 19 Sep. */
.photo-statement-text.place-top-right.core-label-b .page {
max-width: var(--page-max);
padding-inline: var(--gutter);
}
/* A short note set beside a step of the Core Reset rather than in the run of
it. On a laptop it sits out in the margin to the right of the steps, with a
rule above. On a phone it drops back into the flow. 19 Sep. */
.reset-note {
border-top: var(--rule);
margin-block: var(--space-md) var(--space-lg);
padding-top: var(--space-xs);
}
.reset-note p {
font-size: var(--text-sm);
line-height: 1.5;
margin-bottom: 0;
}
@media (min-width: 62rem) {
.reset-note {
float: right;
width: 15rem;
margin: 0.35em -17.5rem var(--space-lg) var(--space-xl);
}
}
/* The Core Reset as six tiles rather than a run of steps, so each one can
carry a photograph. The block runs the full width of the page rather than
the narrow reading column. 19 Sep. */
.reset.reset-wide { max-width: none; }
.reset-wide > p { max-width: var(--measure); }
.reset-steps .format h3 { margin-bottom: var(--space-xs); }
.reset-steps .format p { max-width: none; font-size: var(--text-base); }
.reset-steps .step-note {
border-top: var(--rule);
padding-top: var(--space-xs);
margin-top: auto;
}
/* The diaphragm note, set under the six steps and before "What you'll
notice". Normal reading width, with a rule above it. 19 Sep. */
.reset-aside {
max-width: var(--measure);
border-top: var(--rule);
padding-top: var(--space-sm);
margin-top: var(--space-xl);
}
/* A tile photograph shown whole rather than cropped to fill, on black, so the
picture keeps space around it. Core Reset, 19 Sep. */
.format img.tile-contain {
object-fit: contain;
background: var(--black);
}
/* Same as .tile-contain, but on a light picture the space around it is cream
rather than black. 19 Sep. */
.format img.tile-contain.tile-contain-light { background: var(--cream); }
/* The meadow chair photograph is upright and he sits low in it, so the tile
crops around him rather than the sky. 19 Sep. */
.format img.pos-chair { object-position: 50% 62%; }
/* The bench photograph is upright and he sits low in it, so the tile crops
around the bench rather than the sky. 19 Sep. */
.format img.pos-repeat { object-position: 50% 72%; }
/* The close up face: the tile crops higher up the picture so the nose is
whole rather than cut. 19 Sep. */
.format img.pos-face { object-position: 50% 28%; }
/* The ice bath drawing in the right margin of the same passage, mirroring the
breathing figure on the left. Homepage, 21 Sep. */
@media (min-width: 62rem) {
.mark-bath { right: -5.75rem; bottom: 1.5em; height: 4.5rem; }
}
/* A photograph flipped left to right. MPR ice bath, 21 Sep. */
.photo.flipped { transform: scaleX(-1); }
/* The closing line of the Core Reset, set a little larger than the body and
with a rule above it. 21 Sep. */
.reset-close {
max-width: var(--measure);
font-size: var(--text-lg);
line-height: 1.3;
border-top: var(--rule);
padding-top: var(--space-md);
margin-top: var(--space-xl);
}