in every chapter section. */
.wave { width: 120px; margin: 0.7em 0 1.5em; }
.wave-img { display: block; width: 100%; height: auto; }
.wave--footer { width: 84px; margin: 0 auto 18px; opacity: 0.85; }
/* -------------------- 7. HERO -------------------- */
.hero {
position: relative;
min-height: 100svh;
display: flex;
align-items: flex-end;
overflow: hidden;
background: var(--navy);
}
.hero-media { position: absolute; inset: 0; }
.hero-media .photo-placeholder { width: 100%; height: 100%; }
/* UPDATED (Sacha): new painterly hero image — keeps the dock centered and
biases the crop slightly upward so the figures at the end of the dock
stay clear of the heavier overlay band at the bottom, where the hero
text sits. */
.hero-img { object-position: center 40%; }
.hero::after {
content: "";
position: absolute; inset: 0;
/* Slightly deepened top/bottom stops versus the previous photo — this
image runs brighter (open sky, pale turquoise water), so a touch more
overlay keeps the eyebrow text and the button row reliably legible
without darkening the middle of the painting where it isn't needed. */
background: linear-gradient(180deg, rgba(12,35,64,0.42) 0%, rgba(12,35,64,0.14) 40%, rgba(12,35,64,0.84) 100%);
pointer-events: none;
}
.hero-content {
position: relative;
z-index: 2;
width: 100%;
max-width: 1440px;
margin: 0 auto;
padding: clamp(120px, 18vh, 200px) clamp(20px, 6vw, 64px) clamp(56px, 8vh, 96px);
color: var(--soft-white);
}
/* UPDATED (Sacha): the painting's brightness varies a lot by crop/viewport —
pale sky, bright turquoise water — so the flat gradient above wasn't
reliably dark enough behind the text in every case. This adds a soft
radial "pool" of shadow directly behind the text block only. It's a
pseudo-element of .hero-content itself (not the full-bleed .hero) so it
stays correctly aligned with the text at any viewport width, including
on wide monitors where .hero-content is centered with empty margin on
either side. Negative z-index keeps it behind the text/button children
without needing z-index on each of them. */
.hero-content::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: radial-gradient(ellipse 760px 560px at 0% 100%, rgba(8,23,41,0.6) 0%, rgba(8,23,41,0) 68%);
pointer-events: none;
}
/* UPDATED (Sacha): a light, consistent text-shadow on all hero text — gives
every line a crisp edge against the painting regardless of what's behind
it at a given moment (bright sky vs. water vs. sand), without resorting
to a visible box or changing the type color. Kept deliberately subtle —
a soft near shadow for edge definition, a wider soft one for separation
from busy areas of the artwork. */
.eyebrow {
/* UPDATED (Sacha's brief): modest responsive increase to the name line
("Rhonda L.C. Hull, Esq."), keeping the same hierarchy below the
headline — was a flat 0.86rem. */
font-size: clamp(0.95rem, 1.6vw, 1.1rem);
letter-spacing: 0.14em;
text-transform: uppercase;
margin: 0;
color: var(--soft-white);
text-shadow: 0 1px 2px rgba(8,23,41,0.55), 0 4px 16px rgba(8,23,41,0.4);
}
/* UPDATED (Sacha's brief): slightly increased from a flat 0.78rem. */
.eyebrow--sub { color: rgba(247,244,238,0.75); margin-bottom: 1.4em; font-size: clamp(0.84rem, 1.2vw, 0.95rem); }
.hero-headline {
font-size: clamp(2.1rem, 5vw, 4rem);
color: var(--soft-white);
max-width: 16ch;
margin-bottom: 0.4em;
text-shadow: 0 2px 4px rgba(8,23,41,0.5), 0 8px 28px rgba(8,23,41,0.4);
}
.hero-tagline {
font-family: var(--font-serif);
font-style: italic;
font-size: clamp(1rem, 1.6vw, 1.3rem);
color: var(--gold-soft);
margin-bottom: 1.6em;
text-shadow: 0 1px 3px rgba(8,23,41,0.5), 0 4px 16px rgba(8,23,41,0.35);
}
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }
/* -------------------- 8. BUTTONS -------------------- */
.btn {
display: inline-block;
padding: 14px 30px;
font-size: 0.8rem;
letter-spacing: 0.1em;
text-transform: uppercase;
border: 1px solid transparent;
border-radius: 2px;
transition: background-color 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease);
}
.btn-primary { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.btn-primary:hover, .btn-primary:focus-visible { background: transparent; color: var(--gold); border-color: var(--gold); }
.btn-secondary { background: transparent; color: var(--soft-white); border-color: rgba(247,244,238,0.55); }
.btn-secondary:hover, .btn-secondary:focus-visible { background: rgba(247,244,238,0.12); border-color: var(--soft-white); }
.chapter--white .btn-secondary, .chapter--ivory .btn-secondary, .chapter--warm .btn-secondary {
color: var(--navy); border-color: var(--border-hairline);
}
.chapter--white .btn-secondary:hover, .chapter--ivory .btn-secondary:hover, .chapter--warm .btn-secondary:hover {
background: var(--navy); color: var(--soft-white); border-color: var(--navy);
}
.btn-on-navy.btn-secondary { color: var(--soft-white); border-color: rgba(247,244,238,0.5); }
/* -------------------- 9. SECTION RHYTHM / BACKGROUNDS -------------------- */
.chapter { padding: clamp(64px, 10vh, 128px) 0; position: relative; }
.chapter--white { background: var(--soft-white); }
.chapter--ivory { background: var(--ivory); }
.chapter--warm { background: #F3ECE0; }
.chapter--navy { background: var(--navy); }
.chapter--dorian { background: var(--navy-deep); }
.chapter-inner {
max-width: var(--max-wide);
margin: 0 auto;
padding: 0 clamp(20px, 6vw, 64px);
}
.chapter-inner--narrow { max-width: 760px; }
.kicker {
font-size: 0.78rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 0.9em;
}
.kicker--on-navy { color: var(--gold-soft); }
.chapter h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); }
.chapter--navy h2, .chapter--dorian h2 { color: var(--soft-white); }
.lead { font-size: 1.15rem; color: var(--grey); max-width: 46ch; }
.lead--on-navy { color: rgba(247,244,238,0.8); }
.lead--italic { font-style: italic; }
.statement {
font-family: var(--font-serif);
font-style: italic;
font-size: clamp(1.3rem, 2.4vw, 1.9rem);
color: var(--navy);
margin: 1em 0 0.6em;
}
.statement--on-navy { color: var(--gold-soft); }
/* Asymmetric two-column chapters */
.chapter-grid {
max-width: var(--max-wide);
margin: 0 auto;
padding: 0 clamp(20px, 6vw, 64px);
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: clamp(32px, 6vw, 88px);
align-items: center;
}
.chapter-grid--reverse { grid-template-columns: 1fr 1.05fr; }
.chapter-grid--reverse .chapter-text { order: 1; }
.chapter-grid--reverse .chapter-media { order: 2; }
.chapter--asym-right .chapter-media { grid-column: 1; }
.chapter-text p:last-of-type { margin-bottom: 1.3em; }
@media (max-width: 900px) {
.chapter-grid, .chapter-grid--reverse {
grid-template-columns: 1fr;
}
.chapter-grid--reverse .chapter-text,
.chapter-grid--reverse .chapter-media { order: initial; }
}
/* ADDED (Sacha, Oct 2026): editorial two-column layout for Abaco Art Gallery &
Boutique — an approx. 42%/58% images/text split, with the left column holding
two stacked images (logo, then a reserved artwork-photo spot) as one visual
composition and the text top-aligned beside it rather than vertically centred.
Named grid areas (not DOM order) control the column assignment, so the same
markup can be freely reordered on mobile below without moving any HTML. */
.chapter-grid--gallery {
grid-template-columns: 42fr 58fr;
grid-template-areas:
"logo text"
"artwork text";
row-gap: clamp(28px, 5vw, 48px);
align-items: start;
}
.chapter-grid--gallery .gallery-logo { grid-area: logo; }
.chapter-grid--gallery .chapter-text { grid-area: text; }
.chapter-grid--gallery .gallery-artwork { grid-area: artwork; }
@media (max-width: 900px) {
/* Sacha's order for mobile: logo, then text, then the artwork photo last —
a plain DOM-order stack would put the artwork before the text, so this
reorders via grid-template-areas instead of touching the markup. */
.chapter-grid--gallery {
grid-template-columns: 1fr;
grid-template-areas: "logo" "text" "artwork";
row-gap: clamp(20px, 5vw, 32px);
}
}
/* Grid items default to a min-width based on their content, which can force
nested grids (like the Huldev photo pair) wider than the viewport. This
lets every grid track shrink properly on small screens. */
.chapter-grid > *,
.chapter-media--pair,
.chapter-media--pair > *,
.photo-cluster,
.photo-cluster > *,
.photo-sequence > *,
.project-gallery > *,
.timeline > * {
min-width: 0;
}
.practice-list {
display: grid;
gap: 10px;
margin: 1.4em 0 1.8em;
border-top: 1px solid var(--border-hairline-on-navy);
}
.practice-list li {
padding: 12px 0;
border-bottom: 1px solid var(--border-hairline-on-navy);
color: var(--soft-white);
font-size: 1rem;
letter-spacing: 0.02em;
}
/* ADDED (Sacha's brief, Oct 2026): .practice-list is now also used on light
backgrounds (Gallery & Boutique offerings list), where its default navy-background
colors (soft-white text, light hairline) would be nearly unreadable. */
.chapter--warm .practice-list li,
.chapter--ivory .practice-list li,
.chapter--white .practice-list li {
color: var(--charcoal);
border-bottom: 1px solid var(--border-hairline);
font-size: 1rem;
letter-spacing: 0.02em;
}
/* Discreet professional contact line — deliberately not styled as a button/CTA */
.contact-line {
font-size: 0.85rem;
letter-spacing: 0.03em;
margin-top: 0.2em;
}
.contact-line a {
border-bottom: 1px solid rgba(247,244,238,0.32);
padding-bottom: 1px;
}
.contact-line a:hover, .contact-line a:focus-visible {
color: var(--gold-soft);
border-color: var(--gold-soft);
}
/* -------------------- 10. PHOTO PLACEHOLDER SYSTEM -------------------- */
.photo-placeholder {
margin: 0;
width: 100%;
background: repeating-linear-gradient(135deg, rgba(12,35,64,0.05) 0px, rgba(12,35,64,0.05) 2px, transparent 2px, transparent 14px), var(--ivory);
border: 1px solid var(--border-hairline);
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.photo-placeholder--on-navy {
background: repeating-linear-gradient(135deg, rgba(247,244,238,0.05) 0px, rgba(247,244,238,0.05) 2px, transparent 2px, transparent 14px), rgba(247,244,238,0.04);
border-color: rgba(247,244,238,0.22);
}
.placeholder-inner { text-align: center; padding: 20px; }
.placeholder-icon { display: block; font-size: 1.4rem; color: var(--gold); margin-bottom: 10px; }
.placeholder-text {
margin: 0;
font-size: 0.74rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--grey);
max-width: 22ch;
margin-inline: auto;
}
.photo-placeholder--on-navy .placeholder-text { color: rgba(247,244,238,0.65); }
/* A placeholder that will eventually hold a collage of several photos, not one */
.collage-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 6px;
width: 100%;
max-width: 150px;
margin: 0 auto 12px;
}
.collage-tile {
display: block;
aspect-ratio: 1 / 1;
background: rgba(12,35,64,0.06);
border: 1px solid var(--border-hairline);
}
/* When a real photo is swapped in, this class keeps the same box */
.photo-frame { margin: 0; width: 100%; height: 100%; overflow: hidden; border: 1px solid var(--border-hairline); }
.photo-frame img { width: 100%; height: 100%; object-fit: cover; }
/* For brand assets like logos, where nothing should be cropped */
.photo-frame--contain { border: none; }
.photo-frame--contain img { object-fit: contain; }
/* ADDED (Sacha's correction brief, Oct 2026): a taupe mat for photos whose natural
proportions don't match the grid's shared ratio box — shown whole via contain instead
of being cropped to fit, with a warm neutral fill behind them rather than bare white. */
.photo-frame--mat { background: #E7DECE; }
.ratio-hero { aspect-ratio: unset; height: 100%; }
.ratio-4-3 { aspect-ratio: 4 / 3; }
.ratio-3-4 { aspect-ratio: 3 / 4; }
.ratio-1-1 { aspect-ratio: 1 / 1; }
.ratio-16-9 { aspect-ratio: 16 / 9; }
/* -------------------- 11. TIMELINE (Journey) -------------------- */
.timeline {
display: flex;
flex-wrap: wrap;
gap: 0;
margin: 2em 0;
border-top: 1px solid var(--border-hairline);
padding-top: 1.4em;
}
.timeline li {
position: relative;
padding: 0 20px 0 0;
margin-right: 20px;
}
.timeline li:not(:last-child)::after {
content: "\2013";
position: absolute;
right: -2px;
color: var(--gold);
}
.timeline-place {
font-family: var(--font-serif);
font-size: 1.02rem;
color: var(--navy);
}
.timeline-place--home { color: var(--gold); font-weight: 600; }
/* -------------------- 12. PULL QUOTE -------------------- */
.pull-quote {
margin: 1.6em 0 0;
padding: 1.2em 0 1.2em 1.4em;
border-left: 2px solid var(--gold);
}
.pull-quote p {
font-family: var(--font-serif);
font-style: italic;
font-size: 1.3rem;
color: var(--navy);
margin: 0;
}
/* -------------------- 13. DORIAN PHOTO SEQUENCE -------------------- */
.photo-sequence {
max-width: var(--max-wide);
margin: clamp(40px, 6vw, 64px) auto 0;
padding: 0 clamp(20px, 6vw, 64px);
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
@media (max-width: 800px) {
.photo-sequence { grid-template-columns: repeat(2, 1fr); }
}
/* -------------------- 14. BEYOND LAW / DESCRIPTOR + CLUSTER -------------------- */
.descriptor-line {
font-family: var(--font-serif);
font-size: clamp(1.2rem, 2.6vw, 1.9rem);
color: var(--navy);
max-width: 34ch;
margin: 0.6em 0 1.2em;
}
/* A single personal aside — deliberately plainer than the descriptor line above it, with room to breathe but no extra decoration */
.personality-line {
font-family: var(--font-serif);
font-style: italic;
font-size: 1.15rem;
color: var(--grey);
max-width: 32ch;
margin: 0 0 1.6em;
}
.photo-cluster {
max-width: var(--max-wide);
margin: clamp(32px, 6vw, 56px) auto 0;
padding: 0 clamp(20px, 6vw, 64px);
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 16px;
}
.photo-cluster figure:nth-child(1) { grid-column: span 2; }
.photo-cluster figure:nth-child(2) { grid-column: span 2; align-self: end; }
.photo-cluster figure:nth-child(3) { grid-column: span 2; }
.photo-cluster--wide figure:nth-child(1) { grid-column: span 3; }
.photo-cluster--wide figure:nth-child(2) { grid-column: span 2; }
.photo-cluster--wide figure:nth-child(3) { grid-column: span 1; }
@media (max-width: 800px) {
.photo-cluster, .photo-cluster--wide { grid-template-columns: repeat(2, 1fr); }
.photo-cluster figure, .photo-cluster--wide figure { grid-column: span 1 !important; align-self: stretch !important; }
}
.chapter--energetic { text-align: left; }
/* -------------------- 15. HULDEV MEDIA PAIR -------------------- */
.chapter-media--pair {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
}
/* ADDED (Sacha's correction brief, Oct 2026): the Abaco & Family heritage pair holds two
images of genuinely different natural proportions (a wide historic photo, a tall
painting) shown at their own aspect ratios rather than forced into a shared crop —
align to the top so their captions sit directly under each image instead of being
stretched to match the row's tallest item. */
.heritage-photo-pair { align-items: start; }
@media (max-width: 700px) {
.heritage-photo-pair { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
}
/* ADDED (Sacha's brief, Oct 2026): a standalone 3-photo row for the new
Mentorship subsection — same standalone max-width/padding pattern as
.property-media below, since this sits directly inside a , not
nested in a .chapter-grid.
UPDATED (Sacha's correction brief, Oct 2026): down to two photos (the
third Dawson photo was removed), so this is now a 2-up grid. */
.mentorship-photos {
max-width: var(--max-wide);
margin: clamp(28px, 5vw, 48px) auto;
padding: 0 clamp(20px, 6vw, 64px);
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
@media (max-width: 700px) {
.mentorship-photos { grid-template-columns: 1fr; max-width: 480px; }
}
/* ADDED (Sacha's correction brief, Oct 2026): h3 profile headings (Mentorship) need the
same light-on-navy treatment h2 already gets, or they render in the default dark navy
text color and disappear against the navy background. */
.chapter--navy h3, .chapter--dorian h3 { color: var(--soft-white); }
/* ADDED (Sacha's correction brief, Oct 2026): each Mentorship profile (Dawson, Paulette,
LaQuay) is its own .chapter-inner block in document order; this gives consecutive
profiles clear separation and sizes/spaces their heading consistently. */
.mentorship-profile { margin-top: clamp(28px, 5vw, 44px); }
.mentorship-profile h3 { font-size: 1.25rem; margin-bottom: 0.5em; }
/* -------------------- 16. PROJECT GALLERY (editorial, not cards) -------------------- */
.project-gallery {
max-width: var(--max-wide);
margin: clamp(24px, 5vw, 48px) auto 0;
padding: 0 clamp(20px, 6vw, 64px);
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: clamp(20px, 3vw, 36px);
}
.project { grid-column: span 2; }
.project--large { grid-column: span 3; }
.project--wide { grid-column: span 4; }
/* ADDED (Sacha's correction brief, Oct 2026): Selected Places & Projects is down to three
full cards (Witch's Point, Orange House, Royal House), each carrying a real image group
and real paragraphs rather than a short caption — a single, narrower column reads better
for these than the original 6-column card grid, and avoids each wide card sitting in a
row with awkward empty space beside it. */
.project-gallery--rebuilt {
grid-template-columns: 1fr;
max-width: 920px;
gap: clamp(40px, 7vw, 72px);
/* FIXED (Sacha's live-site QA, Oct 2026): CSS Grid's default item-stretch was
sizing a card (seen with Royal House's longer two-paragraph card) to a row
track shorter than its actual content, so the tail of its text rendered past
its own box and was covered by the section underneath — exactly the
"text cut off" bug reported from the live site. align-items: start stops
cards from being stretched to a (sometimes wrong) computed row height, so
each one sizes to its own real content instead. Same root cause and fix
already used for .heritage-photo-pair and .photo-frame-captioned. */
align-items: start;
}
.project-gallery--rebuilt .project--wide { grid-column: 1; }
.project--wide + .project { grid-column: span 2; }
.project h3 { margin-top: 0.9em; font-size: 1.3rem; }
.project-desc { color: var(--grey); margin-bottom: 0; }
/* ADDED (Sacha's brief, Oct 2026): a two-up image pair inside a single project
card (Orange House), for when more than one supplied photo should be shown
rather than picking just one. Mirrors .chapter-media--pair at a smaller scale. */
.project-media-pair {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.project-media-pair > * { min-width: 0; }
/* A project still in the pipeline — named, but deliberately understated next to the rest */
.project--pipeline h3 { font-size: 1.05rem; }
.project--pipeline .project-desc { font-style: italic; }
.project--pipeline .photo-placeholder { opacity: 0.7; }
.projects-to-gallery-bridge {
margin-top: clamp(40px, 7vw, 72px);
}
.project figure { transition: transform 320ms var(--ease); }
.project:hover figure { transform: scale(1.015); }
@media (prefers-reduced-motion: reduce) { .project figure { transition: none; } .project:hover figure { transform: none; } }
@media (max-width: 900px) {
.project-gallery { grid-template-columns: repeat(2, 1fr); }
.project, .project--large, .project--wide { grid-column: span 2 !important; }
}
/* -------------------- 17. PROPERTY SECTION -------------------- */
.property-media {
max-width: var(--max-wide);
margin: clamp(32px, 6vw, 56px) auto 0;
padding: 0 clamp(20px, 6vw, 64px);
}
.property-ctas {
max-width: var(--max-wide);
margin: clamp(28px, 4vw, 40px) auto 0;
padding: 0 clamp(20px, 6vw, 64px);
display: flex;
gap: 18px;
flex-wrap: wrap;
}
/* -------------------- 18. FOOTER -------------------- */
/* UPDATED (Sacha): rebuilt as one spare closing note — reflection paragraph,
a fine rule, a quiet attribution line, and Rhonda's email. Nothing else,
by design (see the closing-artwork section below). */
.site-footer { background: var(--navy); color: rgba(247,244,238,0.75); padding: clamp(52px, 9vh, 88px) 20px clamp(48px, 7vh, 72px); text-align: center; }
.footer-inner { max-width: 640px; margin: 0 auto; }
.footer-reflection {
font-family: var(--font-sans);
font-size: 1.05rem;
line-height: 1.9;
color: rgba(247, 244, 238, 0.88);
max-width: 46ch;
margin: 0 auto 2em;
}
.footer-rule {
width: 64px;
height: 1px;
margin: 0 auto 1.6em;
border: none;
background: var(--gold);
opacity: 0.55;
}
.footer-attribution {
font-size: 0.78rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--gold-soft);
margin-bottom: 0.9em;
}
.footer-email { font-size: 0.78rem; letter-spacing: 0.03em; color: rgba(247,244,238,0.62); margin-bottom: 0; }
.footer-email a { border-bottom: 1px solid rgba(247,244,238,0.3); padding-bottom: 1px; }
.footer-email a:hover, .footer-email a:focus-visible { color: var(--gold-soft); border-color: var(--gold-soft); }
/* Copyright + design-credit line — smaller and quieter than everything
above it, since it's boilerplate rather than part of the closing note. */
.footer-meta { margin-top: 1.8em; font-size: 0.68rem; letter-spacing: 0.02em; color: rgba(203,176,126,0.6); line-height: 1.7; }
.footer-meta p { margin: 0; }
/* -------------------- 19. RESPONSIVE: HEADER / NAV COLLAPSE -------------------- */
@media (max-width: 860px) {
.nav-toggle { display: inline-flex; align-items: center; gap: 8px; }
.main-nav { position: relative; }
.nav-list {
position: absolute;
top: calc(100% + 14px);
right: 0;
background: var(--soft-white);
border: 1px solid var(--border-hairline);
border-radius: 4px;
flex-direction: column;
gap: 0;
min-width: 200px;
box-shadow: 0 12px 30px rgba(12,35,64,0.14);
display: none;
}
.nav-list.is-open { display: flex; }
.nav-list .nav-link { color: var(--charcoal); padding: 14px 20px; display: block; }
.nav-list li:not(:last-child) .nav-link { border-bottom: 1px solid var(--border-hairline); }
/* The vertical divider only makes sense in the single-row desktop nav; in the
mobile dropdown, Properties simply reads as the last item in the list, already
set apart by the border-bottom rule above on the item before it. */
.nav-divider { display: none; }
}
/* -------------------- 20. TYPE SCALE ADJUSTMENTS AT SMALL SIZES -------------------- */
@media (max-width: 480px) {
.chapter { padding: 52px 0; }
.hero-content { padding-top: 110px; }
.practice-list li { font-size: 0.95rem; }
}
/* -------------------- 21. LARGE DESKTOP REFINEMENT -------------------- */
@media (min-width: 1600px) {
.chapter-inner, .chapter-grid, .project-gallery, .photo-cluster, .photo-sequence, .property-media, .property-ctas {
max-width: 1360px;
}
}
/* -------------------- 22. BEYOND LAW SUBSECTION TRACKING + PORTFOLIO ADDITIONS (2026 restructure) -------------------- */
/* Small "· SUBLABEL" line that appears under "05 Beyond Law" in the desktop
chapter nav while the reader is inside one of its five subsections.
Toggled by script.js via the .is-visible class. */
.chapter-subline {
display: block;
max-height: 0;
overflow: hidden;
opacity: 0;
font-size: 0.64rem;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--grey);
margin-top: 2px;
padding-left: 20px;
transition: max-height 220ms var(--ease), opacity 220ms var(--ease);
}
.chapter-subline.is-visible {
max-height: 40px;
opacity: 1;
}
/* Small caps run-in heading introducing the "Selected Places & Projects"
portfolio inside the HULLdev & Projects subsection — reuses .kicker for
color/type, this just adds the extra breathing room above it. */
.portfolio-heading {
margin-top: clamp(48px, 7vw, 80px);
}
/* Small italic factual caption sitting below a project's descriptive
paragraph (used for HULLco's "Purchased in 2018..." line). */
.project-caption {
font-size: 0.82rem;
font-style: italic;
color: var(--grey);
margin-top: 0.4em;
}
/* NOTE: .property-media / .property-ctas (section 17, above) are no longer
used in the markup — the old standalone Property chapter was removed in
the 2026 restructure in favour of the Rental Properties and Property for
Sale subsections under Beyond Law. Left in place as harmless dead CSS in
case a similar full-bleed single-photo treatment is wanted again. */
/* -------------------- 23. PHOTO WALL, CAPTIONS, BRAND MARK, LIGHT-BG CONTACT LINE (2026 addition) -------------------- */
/* A simple, count-agnostic photo grid — unlike .photo-cluster (hardcoded for
exactly 3 figures), this wraps cleanly for any number of images. Used for
the Beyond Law intro (6 photos) and A Bigger World (5 photos). */
.photo-wall {
max-width: var(--max-wide);
margin: clamp(32px, 6vw, 56px) auto 0;
padding: 0 clamp(20px, 6vw, 64px);
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.photo-wall > * { min-width: 0; }
@media (max-width: 900px) {
.photo-wall { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
.photo-wall { grid-template-columns: 1fr; }
}
/* A figure that pairs a fixed-ratio .photo-frame with a caption underneath —
the .photo-frame/.ratio-X classes go on the inner
here instead of the
itself, so the caption can sit below the fixed-height photo box
rather than being squeezed inside it.
FIXED (Sacha's correction brief, Oct 2026 — mobile QA pass): whenever this
figure sits inside a CSS Grid row (.project-media-pair, .mentorship-photos,
.photo-wall and similar), the grid's default align-items:stretch was
stretching the figure to the row's full height — which, combined with
.photo-frame's own height:100%, inflated the photo box by roughly the
caption's height and pushed the caption down into whatever followed (seen
as "Witch's Point" overlapping its own photo captions, and Dawson's two
stacked captions nearly touching, on mobile). align-self: start stops the
figure from stretching at all, so it sizes to its own image + caption and
nothing after it can overlap. (.heritage-photo-pair had already worked
around this same bug locally with align-items: start — this fixes it at
the source so every current and future .photo-frame-captioned usage is
covered.) */
.photo-frame-captioned { margin: 0; align-self: start; }
.photo-caption {
font-size: 0.78rem;
color: var(--grey);
line-height: 1.4;
margin-top: 0.6em;
}
/* ADDED (Sacha's brief): on-navy variant so captions stay legible in the new
Mentorship subsection (and anywhere else a captioned photo sits on navy),
without needing a separate class on every . */
.chapter--navy .photo-caption, .chapter--dorian .photo-caption {
color: rgba(247,244,238,0.68);
}
/* Small logo/brand badge, sized on its own terms rather than filling a
.photo-frame ratio box — used for the Gallery & Boutique logo, now placed
beside the heading instead of as the section's main image. */
.brand-mark { width: 84px; height: 84px; margin: 0 0 1.1em; }
.brand-mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* ADDED (Sacha, Oct 2026): a much larger, prominent variant for the Gallery &
Boutique logo, sized by width with height left to auto rather than a fixed
square box — the logo isn't quite square, so this preserves its exact native
proportions (and transparent background) with no letterboxing, per Sacha's
explicit instruction not to recreate or modify the logo itself. */
.brand-mark--gallery { width: 100%; max-width: 260px; height: auto; margin: 0; }
.brand-mark--gallery img { width: 100%; height: auto; object-fit: contain; display: block; }
.gallery-logo { display: flex; justify-content: flex-start; }
/* Light-background variant of .contact-line (section 9) — the original
uses a near-white border tuned for navy/dark backgrounds, which is
invisible on white/ivory. Used in the Rental Properties and Property
for Sale subsections. */
.contact-line--on-light a { border-bottom: 1px solid rgba(12,35,64,0.28); }
.contact-line--on-light a:hover, .contact-line--on-light a:focus-visible {
color: var(--gold);
border-color: var(--gold);
}
/* .descriptor-line split into two
elements so the closing tagline can break
free of the 34ch wrap width and stay on one line at desktop widths, while still
reading as a continuation of the same block (zero gap between them, identical
type). See section 14 for the shared .descriptor-line rule. */
.descriptor-line--body { margin-bottom: 0; }
.descriptor-line--tagline { margin-top: 0; max-width: none; }
@media (min-width: 700px) {
.descriptor-line--tagline { white-space: nowrap; }
}
/* -------------------- 25. GOLD CORNERS, IVORY FRAMES & NEW TREATMENTS (15 Oct 2026 handoff) -------------------- */
/* This section implements the handoff package's real supplied assets
(rhonda-simple-gold-corners SVGs, the seven new "Final photos") and the
copy structures new to RHONDA-WEBSITE-COPY.md. Nothing here is a
CSS-simulated photo effect — the gold corners are actual overlays
of the supplied SVG files, positioned per that asset package's own README. */
/* Keeps "Esq." in mixed case inside the otherwise uppercase hero eyebrow line. */
.eyebrow-suffix { text-transform: none; }
/* Real gold "antique brass" photo-corner overlays. Wraps a .photo-frame
(which already handles the photo's own box/ratio/object-fit) rather than
the directly, matching this project's existing figure structure.
Sizing/offset formula taken directly from the asset package's README:
displayed at roughly 56–90px on an ordinary photo, scaling up slightly on
a wider column via the percentage term, capped well short of the ~120px
the README reserves for a hero-scale image. */
.gc-photo {
position: relative;
margin: 0;
overflow: visible;
--corner-size: clamp(48px, 15%, 88px);
--corner-offset: calc(var(--corner-size) * -0.077);
}
.gc-corner {
position: absolute;
width: var(--corner-size);
height: auto;
z-index: 2;
pointer-events: none;
}
.gc-corner.tl { top: var(--corner-offset); left: var(--corner-offset); }
.gc-corner.tr { top: var(--corner-offset); right: var(--corner-offset); }
.gc-corner.bl { bottom: var(--corner-offset); left: var(--corner-offset); }
.gc-corner.br { bottom: var(--corner-offset); right: var(--corner-offset); }
/* Two-line italic caption under Island Girl (title, then the approved
second line) — independent text sitting below the gold-corner frame. */
.archival-caption {
font-family: var(--font-serif);
font-style: italic;
font-size: 0.92rem;
line-height: 1.5;
color: var(--grey);
text-align: center;
margin: 0.9em 0 0;
}
/* Restrained "family album" treatment for personal/archival photos that
don't get the gold corners — a plain ivory mat with a soft shadow.
Rotation is opt-in per instance via the modifiers below, so not every
photo on the page repeats the same tilt (per the handoff's explicit
instruction to vary photographic treatments rather than apply one
decoration everywhere). */
.ivory-frame {
margin: 0;
background: var(--soft-white);
padding: 10px 10px 14px;
border: 1px solid var(--border-hairline);
box-shadow: 0 10px 28px rgba(12, 35, 64, 0.1);
}
.ivory-frame img { display: block; width: 100%; height: auto; }
.ivory-frame--rotate-1 { transform: rotate(-1.4deg); }
.ivory-frame--rotate-2 { transform: rotate(1.6deg); }
/* Italic serif caption beneath the Law headshot, independent of the
surrounding body copy — muted gold against the section's navy
background. Deliberately plain type, no handwritten/scrapbook lettering. */
.law-portrait-caption {
font-family: var(--font-serif);
font-style: italic;
font-size: 1.05rem;
color: var(--gold-soft);
text-align: center;
margin: 0.8em 0 0;
}
/* Discreet stand-in for the authentic RH-and-wave monogram SVG, which has
not been supplied yet — a small labelled marker only, never a fabricated
logo. Sits over the headshot's own .photo-frame (its positioned ancestor
via the inline style in the markup), upper-right, at a deliberately small
"signature" scale so it never competes with or obscures the face. */
.rh-monogram-pending {
position: absolute;
top: 14px;
right: 14px;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(201, 169, 107, 0.6);
border-radius: 50%;
background: rgba(12, 35, 64, 0.55);
color: var(--gold-soft);
font-family: var(--font-serif);
font-size: 0.82rem;
letter-spacing: 0.04em;
}
/* Modest, dignified sizing for the supporting court photograph — clean
editorial presentation, no gold corners, no rotation. */
.small-support-photo {
max-width: 360px;
margin: 0 auto;
}
.small-support-photo img {
display: block;
width: 100%;
height: auto;
border: 1px solid var(--border-hairline);
}
/* Simple, accessible "route" graphic for the Journey section's education
path — plain text stops joined by arrow characters. Wraps on mobile
without ever hiding or reordering a stop. */
.route-graphic {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.35em 0.5em;
margin: 1.6em 0;
padding-top: 1.2em;
border-top: 1px solid var(--border-hairline);
}
.route-stop {
font-family: var(--font-serif);
font-size: 1.05rem;
color: var(--navy);
}
.route-arrow { color: var(--gold); font-size: 0.95rem; }
.route-arrow--ellipsis { color: var(--grey); }
/* "Still Writing the Story" — short reflective lines, left-aligned (per
Sacha's Oct 2026 brief — previously centred) and given extra line-height/
air so they read apart from the site's usual body paragraphs. Set in the
site's sans-serif (per Sacha's follow-up) rather than the serif used for
the quote above it — serif is kept for .reflection-quote only, so the
two still read as distinct voices. */
.reflection-section .chapter-inner--narrow { text-align: left; }
.reflection-text {
font-family: var(--font-sans);
font-size: 1.02rem;
line-height: 1.75;
color: var(--navy);
margin: 0 0 0.6em;
}
.reflection-text:last-of-type { margin-bottom: 0; }
/* -------------------- 26. SECTION 01 — EDITORIAL REDESIGN (mobile-first) -------------------- */
/* Scoped entirely to new .s01-* classes, used only inside .
Sections 02-05 still use .chapter-grid, .ivory-frame, .gc-photo/.gc-corner,
.archival-caption and .pull-quote exactly as before this round — nothing
here redefines or removes any of those, so nothing outside Section 01 can
be affected by this redesign.
Mobile-first: base (unprefixed) rules below target a phone. The
side-by-side asymmetric treatment for .s01-block is added back in at
tablet width and up via the single media query near the bottom. */
/* Every block in this section — the head, the image+text rows, and the
narrow single-column inserts — shares this exact outer box (same
max-width, same side padding), so their content all starts at the same
left edge. Only the INNER content's own max-width varies block to block;
independently centering narrower blocks at their own width (an earlier
pass of this redesign did that) made each block drift to a different
left position and read as accidental rather than a deliberate grid. */
.s01-head,
.s01-block,
.s01-insert {
max-width: var(--max-wide);
margin-left: auto;
margin-right: auto;
padding-left: clamp(20px, 6vw, 64px);
padding-right: clamp(20px, 6vw, 64px);
}
.s01-head {
margin-bottom: clamp(40px, 8vw, 64px);
}
/* A single editorial "standfirst" line — larger and italic, distinct from
the body paragraphs that follow, the way a printed biography might open
a chapter. A quiet decorative initial letter reinforces the feel without
turning into a loud illuminated-manuscript effect. */
.s01-standfirst {
font-family: var(--font-serif);
font-style: italic;
font-weight: 500;
font-size: clamp(1.25rem, 3.4vw, 1.6rem);
line-height: 1.5;
color: var(--navy);
max-width: 30ch;
margin: 0.5em 0 0;
}
.s01-standfirst::first-letter {
font-size: 1.6em;
color: var(--gold);
}
/* One image-and-text composition. Mobile: a single column, photo first
(so it reads as the opening note of the passage), then text. Desktop:
becomes an asymmetric row via the media query below, with the photo kept
deliberately small rather than filling a 50/50 grid column. */
.s01-block {
display: flex;
flex-direction: column;
gap: clamp(18px, 5vw, 28px);
}
.s01-block + .s01-block,
.s01-block + .s01-insert,
.s01-insert + .s01-block,
.s01-insert + .s01-insert {
margin-top: clamp(44px, 9vw, 80px);
}
/* A small, carefully framed photograph or artwork — a plain ivory mount,
a delicate hairline border and a soft, shallow shadow, in place of the
previous gold scrapbook corners. Natural image ratio is preserved (no
cropping box), which also keeps Island Girl's full artwork, title and
signature intact. */
.s01-frame {
align-self: flex-start;
margin: 0;
width: 100%;
max-width: 265px;
background: var(--soft-white);
padding: 7px 7px 10px;
border: 1px solid var(--border-hairline);
box-shadow: 0 8px 20px rgba(12, 35, 64, 0.09);
}
.s01-frame img { display: block; width: 100%; height: auto; }
/* The map carries place-name labels baked into the image itself, so it
gets a little more room than the two photographs to stay legible —
still clearly smaller than the site's previous full-column treatment. */
.s01-frame--map { max-width: 320px; }
.s01-caption {
font-family: var(--font-serif);
font-style: italic;
font-size: 0.8rem;
line-height: 1.5;
color: var(--grey);
text-align: center;
margin: 0.7em 0 0;
}
.s01-text { max-width: 54ch; }
.s01-text p {
font-size: 1.02rem;
line-height: 1.75;
margin-bottom: 1.1em;
}
.s01-text p:last-child { margin-bottom: 0; }
/* A standalone, single-column insert — used for the Cherokee Sound photo
(kept narrow and stacked, not a side-by-side row, so the approved copy's
"the photograph above" stays literally true at every width) and for the
closing reflection + pull quote, which carries no image at all. Left-
aligned at the same edge as every other block in the section (see the
shared box rule above) — only its own content is narrower, not the
block's position. */
.s01-insert .s01-frame { max-width: 300px; margin: 0 0 1.3em; }
.s01-insert--close .pull-quote { margin-top: 1.4em; }
/* ADDED (Sacha's photo brief, Oct 2026): a two-up archival pair (shoreline +
sailboat) inside its own .s01-insert, mobile-first stacked then side by
side. Frames here carry no trailing body text, so the shared
".s01-insert .s01-frame" bottom margin above is zeroed out in favour of
this row's own gap. */
.s01-duo {
display: flex;
flex-direction: column;
align-items: center;
gap: 22px;
}
.s01-duo .s01-frame { margin: 0; }
@media (min-width: 560px) {
.s01-duo {
flex-direction: row;
align-items: flex-start;
justify-content: center;
gap: clamp(24px, 5vw, 48px);
}
}
/* The Tarpum Bay garden-sign insert is a single frame with no body text,
same treatment as the archival pair above. */
.s01-insert--tarpum .s01-frame { margin: 0; }
@media (min-width: 760px) {
.s01-block {
flex-direction: row;
align-items: flex-start;
gap: clamp(40px, 6vw, 72px);
}
.s01-block .s01-frame { flex: 0 0 265px; }
.s01-block .s01-frame--map { flex-basis: 320px; }
.s01-block .s01-text { flex: 1; max-width: 56ch; padding-top: 0.3em; }
/* DOM order stays photo-then-text (so "photo above" still reads correctly
if the page is read in source order, e.g. by assistive tech); this just
mirrors which side the photo appears on visually. */
.s01-block--img-right { flex-direction: row-reverse; }
}
/* -------------------- 27. SECTION 02 — JOURNEY EDITORIAL REDESIGN -------------------- */
/* Scoped to new .s02-* classes, used only inside .
Sections 01, 03-05 are untouched by this. Same shared-left-edge lesson
from Section 01's redesign: the head, the narrow text-only insert, and
the image+text blocks all share one outer box so their content lines up,
with only the inner content's own max-width varying. */
.s02-head,
.s02-block,
.s02-insert {
max-width: var(--max-wide);
margin-left: auto;
margin-right: auto;
padding-left: clamp(20px, 6vw, 64px);
padding-right: clamp(20px, 6vw, 64px);
}
.s02-head { margin-bottom: clamp(32px, 6vw, 48px); }
.s02-block {
display: flex;
flex-direction: column;
gap: clamp(18px, 5vw, 28px);
}
/* UPDATED (Sacha's photo/text brief, Oct 2026): written as a general rule
covering every adjacent pair of top-level block types, rather than only
the specific sequences the section happened to use before — the Journey
reorder below (pageant photo now opens the section, the itinerary graphic
now sits between two inserts, the closing block now follows the wide
graphic) introduced combinations (head+block, block+insert, insert+wide,
wide+block) the old specific-pair list didn't cover. */
.s02-head + .s02-block,
.s02-head + .s02-insert,
.s02-block + .s02-block,
.s02-block + .s02-insert,
.s02-insert + .s02-insert,
.s02-insert + .s02-block,
.s02-block + .s02-wide,
.s02-insert + .s02-wide,
.s02-wide + .s02-insert,
.s02-wide + .s02-block {
margin-top: clamp(40px, 8vw, 64px);
}
/* Small, carefully framed photographs — same restrained ivory-mount
treatment as Section 01 (no gold corners here either), sized per image
type: the pageant photograph stays small and archival, the courtroom
photograph a little larger but still modest, uncropped around her face,
wig, robes and the podium. */
.s02-frame {
align-self: flex-start;
margin: 0;
width: 100%;
background: var(--soft-white);
padding: 7px 7px 10px;
border: 1px solid var(--border-hairline);
box-shadow: 0 8px 20px rgba(12, 35, 64, 0.09);
}
.s02-frame img { display: block; width: 100%; height: auto; }
.s02-frame--archival { max-width: 275px; }
.s02-frame--courtroom { max-width: 300px; }
/* ADDED (Sacha's photo brief, Oct 2026): first captions in this section —
the pageant and young-barrister photos now carry one each. Same quiet
treatment as Section 01's .s01-caption. */
.s02-caption {
font-family: var(--font-serif);
font-style: italic;
font-size: 0.8rem;
line-height: 1.5;
color: var(--grey);
text-align: center;
margin: 0.7em 0 0;
}
.s02-text { max-width: 54ch; }
.s02-text p {
font-size: 1.02rem;
line-height: 1.75;
margin-bottom: 1.1em;
}
.s02-text p:last-child { margin-bottom: 0; }
/* The text-only opening block (education paragraphs) — no image, same
narrow measure as everywhere else in this section. */
.s02-insert .s02-text { max-width: 54ch; }
/* The illustrated itinerary is allowed to breathe wider than the body
text, since it's a graphic, not a reading column — this is what lets its
desktop two-row composition actually appear instead of staying in its
(also legitimate) narrower mobile layout. */
.s02-wide {
max-width: 1100px;
margin: 0 auto;
}
@media (min-width: 760px) {
.s02-block {
flex-direction: row;
align-items: flex-start;
gap: clamp(40px, 6vw, 72px);
}
.s02-block .s02-frame--archival { flex: 0 0 275px; }
.s02-block .s02-frame--courtroom { flex: 0 0 300px; }
.s02-block .s02-text { flex: 1; max-width: 56ch; padding-top: 0.3em; }
.s02-block--img-right { flex-direction: row-reverse; }
}
/* -------------------- 27a. ILLUSTRATED ITINERARY COMPONENT (rh-journey) -------------------- */
/* Supplied as a self-contained, dependency-free component (15 Oct 2026
handoff: rhonda-journey package). Included once, as instructed by its own
brief. Everything is scoped under .rh-journey, so it cannot affect
anything outside it. Only two adaptations were made to the supplied CSS:
the font-family and the three --rh-* custom properties are overridden
immediately below to this site's own serif and palette tokens instead of
the component's standalone ones (Georgia; #C9A96B/#172D40/#FAF7F0) — per
the component's own brief ("use the site's existing approved serif if
appropriate"; "adapt the scoped CSS to the existing site without changing
the design intent"). The structure, the serpentine route, the icons and
the container-query breakpoint are all unchanged from the supplied file. */
.rh-journey { --rh-gold:#C9A96B; --rh-navy:#172D40; --rh-ivory:#FAF7F0;
container-type:inline-size; color:var(--rh-navy); background:var(--rh-ivory);
font-family:Georgia,"Times New Roman",serif; padding:clamp(20px,4vw,48px);
box-sizing:border-box; width:100%; max-width:1100px; margin-inline:auto; }
.rh-journey *, .rh-journey *::before, .rh-journey *::after { box-sizing:border-box; }
.rh-journey__map { position:relative; }
.rh-journey__stops { list-style:none; padding:0; margin:0; }
.rh-journey__stop { position:relative; min-height:120px; display:grid;
grid-template-columns:64px 48px minmax(0,1fr); align-items:center; column-gap:12px; }
.rh-journey__segment { position:absolute; left:0; top:0; width:64px; height:100%; overflow:visible;
fill:none; stroke:var(--rh-gold); stroke-width:1.3; }
.rh-journey__segment path { vector-effect:non-scaling-stroke; }
.rh-journey__stop:nth-child(even) .rh-journey__segment { transform:scaleX(-1) translateX(16px); }
.rh-journey__dot { position:absolute; top:50%; left:44px; width:7px; height:7px;
border-radius:50%; background:var(--rh-gold); transform:translate(-50%,-50%);
box-shadow:0 0 0 4px var(--rh-ivory); }
.rh-journey__stop:nth-child(even) .rh-journey__dot { left:4px; }
.rh-journey__illustration { grid-column:2; width:48px; height:44px; color:var(--rh-navy); opacity:.8; }
.rh-journey__country { grid-column:3; font-size:clamp(18px,3vw,23px); line-height:1.3; overflow-wrap:break-word; }
.rh-journey__stop:last-child .rh-journey__country { font-size:28px; letter-spacing:.12em; }
.rh-journey__stop:last-child .rh-journey__illustration { visibility:hidden; }
.rh-journey__stop:last-child .rh-journey__dot { display:none; }
.rh-journey__stop:last-child .rh-journey__segment { opacity:.45; }
.rh-journey__route { display:none; }
.rh-journey__home { margin:28px auto 0; max-width:28ch; text-align:center; text-wrap:balance;
font-size:clamp(23px,3.2vw,32px); font-style:italic; line-height:1.4; }
@container (min-width:680px) {
.rh-journey__route { display:block; position:absolute; inset:0; width:100%; height:320px;
fill:none; stroke:var(--rh-gold); stroke-width:1.4; }
.rh-journey__route path { vector-effect:non-scaling-stroke; }
.rh-journey__stops { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.rh-journey__stop { display:block; height:160px; min-height:160px; text-align:center; }
.rh-journey__stop--4 { grid-column:3; grid-row:2; }
.rh-journey__stop--5 { grid-column:2; grid-row:2; }
.rh-journey__stop--6 { grid-column:1; grid-row:2; }
.rh-journey__segment { display:none; }
.rh-journey__illustration { position:absolute; width:56px; height:48px; top:29px; left:50%; transform:translateX(-50%); }
.rh-journey__dot, .rh-journey__stop:nth-child(even) .rh-journey__dot { left:50%; top:100px; }
.rh-journey__country { position:absolute; top:120px; left:8px; right:8px; font-size:21px; }
.rh-journey__home { margin-top:34px; }
}
@media print { .rh-journey { break-inside:avoid; } }
/* Site-brand adaptation (see note above) — must come after the block above
so the overridden custom properties and font-family win. */
.rh-journey {
--rh-gold: var(--gold);
--rh-navy: var(--navy);
--rh-ivory: var(--ivory);
font-family: var(--font-serif);
}
/* -------------------- 28. SECTION 03 — LAW & HULLCO EDITORIAL REDESIGN -------------------- */
/* Scoped to new .s03-* classes, used only inside and
the closing . Sections 01, 02, 04, 05 are
untouched by this. The old .chapter-grid/.chapter-grid--reverse,
.photo-frame, .law-portrait-caption and .rh-monogram-pending rules above
are left exactly as they were — they're simply no longer referenced by
this section's markup, same as .gc-photo/.gc-corner after the 01/02 round.
Deliberate difference from 01/02: a NARROWER shared container (960px, not
var(--max-wide) ~1240px). At the 760px+ breakpoint this makes a
320–380px-wide portrait land at ~35–40% of the row's content width —
the brief's requested proportion — without any special-casing; it's a
direct consequence of the narrower box, not a separate calculation. */
.s03-head,
.s03-opening,
.s03-middle,
.s03-archival,
.s03-row,
.s03-insert,
.s03-wig-insert,
.s03-cta {
max-width: 960px;
margin-left: auto;
margin-right: auto;
padding-left: clamp(20px, 6vw, 64px);
padding-right: clamp(20px, 6vw, 64px);
}
.s03-head { margin-bottom: clamp(32px, 6vw, 48px); }
/* ADDED (Sacha's photo brief, Oct 2026): generic spacing between every
adjacent pair of this section's top-level block types — the new photo
grouping, the sign+text row, the standalone text inserts and the closing
wig insert introduce combinations the section didn't have before. */
.s03-opening + .s03-archival,
.s03-archival + .s03-row,
.s03-row + .s03-insert,
.s03-insert + .s03-insert,
.s03-insert + .s03-wig-insert,
.s03-wig-insert + .s03-cta {
margin-top: clamp(40px, 8vw, 64px);
}
/* Opening movement: portrait + the first two paragraphs (professional
identity). Mobile: a single column, portrait first. Desktop: an
asymmetric row via the media query below — the portrait stays a small,
subtle presence rather than growing to fill the column. */
.s03-opening {
display: flex;
flex-direction: column;
gap: clamp(20px, 5vw, 28px);
}
.s03-portrait {
width: 80%;
max-width: 345px;
margin: 0 auto;
}
/* Portrait frame: the same restrained ivory-mount treatment as 01/02 (thin
hairline border, soft shadow, natural image ratio — no crop box), kept
relatively small per the brief ("do not enlarge it to fill the section").
position:relative gives the monogram overlay below a positioning parent. */
.s03-frame {
position: relative;
margin: 0;
width: 100%;
background: var(--soft-white);
padding: 7px 7px 10px;
border: 1px solid var(--border-hairline);
box-shadow: 0 8px 20px rgba(12, 35, 64, 0.09);
}
.s03-frame .s03-photo { display: block; width: 100%; height: auto; }
/* The real RH-and-wave monogram, layered over the photo as its own element
(never baked into the image) — upper-right corner, kept small and
elegant, with its original proportions preserved via height:auto. The
drop-shadow is a contrast-insurance measure only: the monogram's navy
strokes need a little lift against a photo that may be light in that
corner, without adding a visible badge or background shape. */
.s03-monogram {
position: absolute;
top: 10px;
right: 10px;
width: 20%;
height: auto;
filter: drop-shadow(0 1px 3px rgba(12, 35, 64, 0.45)) drop-shadow(0 0 6px rgba(252, 251, 248, 0.5));
}
/* Caption directly beneath the main portrait — this one sits outside the
white photo mount, directly on the section's navy background, so soft
ivory is used instead of literal navy (navy-on-navy would be invisible).
Matches the muted off-white already used for secondary text on navy
elsewhere on the site (see .lead--on-navy, .eyebrow--sub). Margin keeps
it visually attached to the portrait rather than floating loose. */
p.s03-caption {
font-family: var(--font-serif);
font-style: italic;
font-size: 0.95rem;
color: rgba(247, 244, 238, 0.72);
text-align: center;
margin: 0.7em 0 0;
}
/* Archival/certificate photo captions — these sit INSIDE the white
.s03-frame photo mount (figcaption nested in the figure), not on the
page's navy background, so gold here was genuinely low-contrast against
white. Literal navy is correct and reads cleanly against the white mat. */
figcaption.s03-caption {
font-family: var(--font-serif);
font-style: italic;
font-size: 0.95rem;
color: var(--navy);
text-align: center;
margin: 0.7em 0 0;
}
.s03-text { max-width: 54ch; margin: 0 auto; }
.s03-text p {
font-size: 1.02rem;
line-height: 1.75;
margin-bottom: 1.1em;
}
.s03-text p:last-child { margin-bottom: 0; }
/* Middle movement: paras 3–5 (practice & international reach). A visibly
narrower column than the Opening block's text, so it reads as a distinct,
quieter second movement rather than a continuation of the same row —
"avoid text stretching across the entire page." */
.s03-middle { margin-top: clamp(40px, 8vw, 64px); }
.s03-text--middle { max-width: 46ch; }
/* ADDED (Sacha's photo brief, Oct 2026): the "early legal career" archival
grouping — a duo (family photo + fellow-barristers photo) above a trio of
small certificate thumbnails, all on the same restrained ivory-mount
frame used throughout the site. Mobile-first: everything stacks in a
single centered column; the media query below brings in the duo's
side-by-side row and the trio's row at tablet width and up. */
.s03-archival-duo {
display: flex;
flex-direction: column;
align-items: center;
gap: 22px;
}
.s03-archival-trio {
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
margin-top: clamp(28px, 5vw, 40px);
}
.s03-archival .s03-frame { margin: 0; }
.s03-frame--archival-main { max-width: 300px; }
.s03-frame--archival-small { max-width: 230px; }
.s03-frame--cert { max-width: 185px; }
/* The founding-HULLco sign is a wide, shallow banner photo (its own natural
proportions, uncropped) rather than a portrait-shaped frame — sized by
width like the other s03 frames, its height simply follows. */
.s03-frame--sign { max-width: 370px; }
/* The wig-and-gown closing image: a single centered frame, no body text,
quietly closing out the section before "Passing It On" begins. */
.s03-wig-insert { display: flex; justify-content: center; }
.s03-frame--wig { max-width: 255px; margin: 0; }
/* ADDED (Sacha): CTA to the firm's own site, closing out the Law & HULLco
section — centered like the wig-insert image above it, same .btn-primary
treatment used for the other section CTAs on the site (reads fine on
this section's navy background, same as in the hero). */
.s03-cta { display: flex; justify-content: center; }
/* Smaller, more compact caption style for the archival photos and
certificates — same quiet italic treatment as .s03-caption, scaled down
so five captions in close succession don't compete with the section's
main portrait caption. */
.s03-caption--archival { font-size: 0.74rem; margin-top: 0.5em; }
/* A reusable image+text row (the founding-HULLco sign + paragraph), same
mobile-first stacking as .s03-opening but usable wherever this section
needs another photo-and-text pairing. */
.s03-row {
display: flex;
flex-direction: column;
gap: clamp(20px, 5vw, 28px);
}
@media (min-width: 760px) {
.s03-opening {
flex-direction: row;
align-items: flex-start;
gap: clamp(32px, 5vw, 56px);
}
.s03-portrait {
width: auto;
max-width: none;
flex: 0 0 380px;
margin: 0;
}
.s03-text { flex: 1; max-width: 50ch; padding-top: 0.3em; margin: 0; }
.s03-archival-duo { flex-direction: row; align-items: flex-start; justify-content: center; gap: clamp(28px, 5vw, 48px); }
.s03-archival-trio { flex-direction: row; justify-content: center; gap: clamp(20px, 4vw, 32px); }
.s03-row { flex-direction: row; align-items: flex-start; gap: clamp(32px, 5vw, 56px); }
.s03-row .s03-frame--sign { flex: 0 0 370px; }
.s03-row .s03-text { flex: 1; max-width: 50ch; padding-top: 0.3em; margin: 0; }
/* Narrower column from the Middle movement shifted toward the right of
the shared container — a quiet asymmetry of its own, distinct from the
Opening row's left-anchored portrait, and from how 01/02 compose their
blocks. Purely a positioning choice; the text itself is untouched. */
.s03-text--middle { margin-left: auto; margin-right: 0; }
}
/* -------------------- "Passing It On" — closing movement -------------------- */
/* A restrained, visually distinct close: a fine gold dividing rule above a
slightly indented text column. Deliberately plain — no background tint,
no border box, no new headings or quotations — per the brief's explicit
"do not turn it into a colourful callout box." */
.s03-closing-inner {
max-width: 960px;
margin-left: auto;
margin-right: auto;
padding-left: clamp(20px, 6vw, 64px);
padding-right: clamp(20px, 6vw, 64px);
}
.s03-rule {
width: 56px;
height: 1px;
background: var(--gold);
margin: 0 0 clamp(28px, 5vw, 40px);
}
.s03-closing-text {
max-width: 58ch;
border-left: 1px solid rgba(201, 169, 107, 0.35);
padding-left: clamp(16px, 3vw, 28px);
margin-top: 0.4em;
}
.s03-closing-text p { margin-bottom: 1.1em; }
.s03-closing-text p:last-child { margin-bottom: 0; }
@media (min-width: 760px) {
.s03-closing-text { margin-left: clamp(0px, 4vw, 48px); }
}
/* -------------------- 29. SECTION 04 — DORIAN EDITORIAL REDESIGN -------------------- */
/* Scoped to new .s04-* classes, used only inside .
Sections 01, 02, 03, 05 are untouched by this.
Shared-left-edge lesson again: every top-level block below (.s04-head,
.s04-storm, .s04-aftermath, .s04-rebuilding, .s04-closing) shares one
outer box, slightly narrower than Section 01/02's var(--max-wide) and a
touch wider than Section 03's 960px — wide enough to carry an asymmetric
photo+text row in Movements Two and Three, while Movement One narrows
its own inner text column well below that, independently. */
.s04-head,
.s04-storm,
.s04-aftermath,
.s04-rebuilding,
.s04-closing {
max-width: 1040px;
margin-left: auto;
margin-right: auto;
padding-left: clamp(20px, 6vw, 64px);
padding-right: clamp(20px, 6vw, 64px);
}
.s04-head { margin-bottom: clamp(36px, 7vw, 56px); }
.s04-head .lead { margin-top: 0.6em; }
/* Movement One — The Storm. A deliberately narrow, intimate reading
column (approx. 520–620px at desktop — fixed at 600px here, which sits
in that range at every width it can actually reach) instead of the
wider measure used elsewhere. No image sits inside this block, so the
bathtub / refrigerator / prosthetic-leg passage runs uninterrupted. */
.s04-storm-text { max-width: 600px; }
.s04-storm-text p {
font-size: 1.04rem;
line-height: 1.85;
margin-bottom: 1.15em;
}
.s04-storm-text p:last-child { margin-bottom: 0; }
/* A quiet, restrained marker between movements — not a new heading, just
enough of a pause to register the shift in register. Centred, short,
deliberately faint. */
.s04-rule {
width: 48px;
height: 1px;
background: var(--gold);
opacity: 0.55;
margin: clamp(48px, 9vw, 80px) auto;
}
/* Movement Two — The Aftermath, and the image+text sub-block inside
Movement Three — share the same asymmetric photo/text row pattern used
throughout the site (mobile: stacked column, photo first; desktop: a
row via the media query below). */
.s04-aftermath,
.s04-rebuilding-block {
display: flex;
flex-direction: column;
gap: clamp(20px, 5vw, 28px);
}
/* Sized to the brief's two different maximum widths. */
.s04-photo { margin: 0; align-self: flex-start; width: 100%; }
.s04-photo--a { max-width: 480px; }
.s04-photo--b { max-width: 460px; }
.s04-photo .placeholder-text { max-width: 24ch; }
/* ADDED (Sacha's photo brief, Oct 2026): the real documentary/satellite
photographs that replaced the two placeholders above — a plain hairline
border only (no ivory mat, no shadow), the same restrained "clean"
treatment Section 05 uses for architectural photos, since a soft-white
mat would feel wrong around news-documentary imagery. The border uses
the on-navy hairline token so it stays visible against navy-deep. */
.s04-photo--clean {
border: 1px solid var(--border-hairline-on-navy);
}
.s04-photo--clean img { display: block; width: 100%; height: auto; }
/* Small, unobtrusive attribution line beneath each photo — sans-serif,
muted and uppercase-tracked rather than the site's usual italic serif
caption style, so it reads clearly as a credit line, not editorial copy. */
.s04-photo-credit {
font-family: var(--font-sans);
font-size: 0.68rem;
letter-spacing: 0.04em;
text-transform: uppercase;
color: rgba(247, 244, 238, 0.55);
text-align: left;
margin: 0.6em 0 0;
}
.s04-text { max-width: 52ch; }
.s04-text p {
font-size: 1.02rem;
line-height: 1.75;
margin-bottom: 1.1em;
}
.s04-text p:last-child { margin-bottom: 0; }
/* Movement Three's opening and closing passages — no photo, no narrow
column — gradually "re-open" into the wider editorial measure used in
Sections 01–03, marking the narrative's turn toward recovery without
any change of colour or treatment. */
.s04-open-text { max-width: 62ch; }
.s04-open-text p {
font-size: 1.02rem;
line-height: 1.75;
margin-bottom: 1.1em;
}
.s04-open-text p:last-child { margin-bottom: 0; }
.s04-rebuilding-intro { margin-bottom: clamp(32px, 6vw, 48px); }
.s04-rebuilding-outro { margin-top: clamp(32px, 6vw, 48px); }
@media (min-width: 760px) {
.s04-aftermath,
.s04-rebuilding-block {
flex-direction: row;
align-items: flex-start;
gap: clamp(36px, 5vw, 60px);
}
.s04-aftermath .s04-photo--a { flex: 0 0 480px; }
.s04-rebuilding-block .s04-photo--b { flex: 0 0 460px; }
.s04-aftermath .s04-text,
.s04-rebuilding-block .s04-text { flex: 1; max-width: 54ch; padding-top: 0.3em; }
/* Alternates the photo side between the two blocks (Aftermath: photo
left; Rebuilding's block: photo right) purely for visual rhythm, so
the two asymmetric rows don't repeat the identical composition. */
.s04-rebuilding-block--img-right { flex-direction: row-reverse; }
}
/* Closing statement — a slightly larger, unmistakably reflective moment:
a fine antique-gold rule, generous breathing room, no quotation marks
(none appear in the approved copy), centred and restrained rather than
a promotional slogan. */
.s04-closing { text-align: center; margin-top: clamp(8px, 2vw, 16px); }
.s04-closing-rule {
width: 56px;
height: 1px;
background: var(--gold);
margin: 0 auto clamp(28px, 5vw, 40px);
}
.s04-statement {
font-family: var(--font-serif);
font-style: italic;
font-weight: 500;
font-size: clamp(1.45rem, 3vw, 2.1rem);
line-height: 1.5;
color: var(--gold-soft);
max-width: 32ch;
margin: 0 auto;
}
/* -------------------- 30. SECTION 05 — BEYOND LAW EDITORIAL REDESIGN -------------------- */
/* Scoped to new .s05-* classes, used only inside the Beyond Law sections
(#beyond, #huldev, #gallery, #life-beyond-one-island). Sections 01-04 and
#still-writing-the-story/#closing's markup are untouched by this; the one
exception is a CSS-only update to .closing-art-quote right at the end of
this section, which doesn't touch any HTML. */
/* Shared text-paragraph styling, reused across every subsection below
instead of redefining it per block. */
.s05-text { max-width: 54ch; }
.s05-text p,
.s05-witch-text p,
.s05-orange-text p,
.s05-royal-text p {
font-size: 1.02rem;
line-height: 1.75;
margin-bottom: 1.1em;
color: var(--charcoal);
}
.s05-text p:last-child,
.s05-witch-text p:last-child,
.s05-orange-text p:last-child,
.s05-royal-text p:last-child { margin-bottom: 0; }
/* -------------------- Opening — "A Life Beyond Law" -------------------- */
.s05-open-inner {
max-width: var(--max-wide);
margin: 0 auto;
padding: 0 clamp(20px, 6vw, 64px);
}
/* A staggered, energetic typographic moment instead of a uniform list —
each line its own size/weight/colour, not a row of keyword pills, and no
icons. Exact wording and order are unchanged from the approved copy. */
.s05-identity {
font-family: var(--font-serif);
margin: 0;
max-width: 36ch;
}
.s05-identity--a {
font-size: clamp(1.3rem, 3vw, 2rem);
font-weight: 600;
color: var(--navy);
line-height: 1.3;
margin-top: 0.7em;
}
.s05-identity--b {
font-size: clamp(1.1rem, 2.4vw, 1.5rem);
font-style: italic;
color: var(--grey);
line-height: 1.4;
margin-top: 0.5em;
}
.s05-identity--c {
font-size: clamp(0.95rem, 1.8vw, 1.15rem);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--gold);
margin-top: 0.7em;
max-width: none;
}
@media (min-width: 760px) {
/* The stagger is purely typographic at mobile (size/weight/colour only,
per the brief — no indentation, so nothing wraps awkwardly on a narrow
screen). At desktop width, where there's room to spare, each line also
gets a small horizontal offset for a livelier, less list-like rhythm. */
.s05-identity--b { margin-left: 0.4em; }
.s05-identity--c { margin-left: 0.1em; }
}
/* -------------------- Shared box + photo system for HULLdev / Witch Point /
Orange House / Royal House -------------------- */
.s05-huldev-intro,
.s05-places-heading,
.s05-witch,
.s05-orange,
.s05-royal {
max-width: 1080px;
margin-left: auto;
margin-right: auto;
padding-left: clamp(20px, 6vw, 64px);
padding-right: clamp(20px, 6vw, 64px);
}
.s05-places-heading { margin-top: clamp(16px, 4vw, 24px); margin-bottom: clamp(24px, 5vw, 36px); }
/* Base photo unit. Two treatments per the brief: a restrained ivory mount
for personal/album photographs, and a clean, unframed treatment (just a
hairline border, no mat, no shadow) for architectural/property
photographs — no scrapbook corners either way. Natural image ratio is
kept throughout (no forced crop box), so nothing important gets cropped
out of a building or a landscape shot. */
.s05-photo { margin: 0; width: 100%; }
.s05-photo--mount {
background: var(--soft-white);
padding: 7px 7px 10px;
border: 1px solid var(--border-hairline);
box-shadow: 0 8px 20px rgba(12, 35, 64, 0.09);
}
.s05-photo--mount img { display: block; width: 100%; height: auto; }
.s05-photo--clean {
border: 1px solid var(--border-hairline);
}
.s05-photo--clean img { display: block; width: 100%; height: auto; }
.s05-caption {
font-family: var(--font-serif);
font-style: italic;
font-size: 0.82rem;
line-height: 1.5;
color: var(--grey);
text-align: center;
margin: 0.7em 0 0;
}
/* FIX (Sacha, Oct 2026): on a .s05-photo--clean figure (no padding around
the image, just a hairline border), a caption's wrapped last word could
land flush against the border and read as cut off — this small inset
keeps every caption a few pixels clear of the edge, same fix wherever a
.s05-caption sits inside a .s05-photo--clean figure. */
.s05-photo--clean .s05-caption {
padding: 0 6px 8px;
box-sizing: border-box;
}
/* HULLdev intro: photo + text, mobile-stacked, asymmetric row at desktop.
Photo capped at 380px — a personal snapshot, not a feature image. */
.s05-huldev-intro {
display: flex;
flex-direction: column;
gap: clamp(20px, 5vw, 28px);
margin-bottom: clamp(20px, 4vw, 32px);
}
.s05-huldev-photo { max-width: 435px; margin: 0 auto; }
@media (min-width: 760px) {
.s05-huldev-intro { flex-direction: row; align-items: flex-start; gap: clamp(36px, 5vw, 56px); }
.s05-huldev-intro .s05-huldev-photo { flex: 0 0 435px; max-width: 435px; margin: 0; }
.s05-huldev-intro .s05-text { flex: 1; padding-top: 0.3em; }
}
/* Witch Point — a narrow, essay-like text column; the aerial photograph and
the smaller concept rendering sit offset to one side, not a full-width
property gallery. */
.s05-witch {
display: flex;
flex-direction: column;
gap: clamp(28px, 5vw, 40px);
margin-bottom: clamp(56px, 9vw, 88px);
}
.s05-witch-text h3 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); }
.s05-witch-text { max-width: 48ch; }
.s05-witch-media { display: flex; flex-direction: column; gap: 20px; }
.s05-witch-aerial { max-width: 530px; margin: 0 auto; }
.s05-witch-concept { max-width: 370px; margin: 0 auto; position: relative; }
.s05-concept-tag {
font-size: 0.7rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--gold);
margin: 0 0 0.5em;
}
@media (min-width: 760px) {
.s05-witch { flex-direction: row; align-items: flex-start; gap: clamp(32px, 5vw, 56px); }
.s05-witch-text { flex: 1 1 42%; padding-top: 0.3em; }
.s05-witch-media { flex: 1 1 50%; max-width: 630px; }
.s05-witch-aerial { max-width: 630px; margin: 0; }
/* The concept rendering sits smaller, to the right, beneath the aerial
photo — an inset feel via horizontal offset only. It deliberately does
NOT pull upward with a negative margin: the aerial figure has its own
caption directly beneath it, and an overlap there would collide with
that caption, which the brief explicitly warns against. Dropped to a
simple centred stack at mobile width. */
.s05-witch-concept {
max-width: 370px;
margin: 20px 0 0 auto;
}
}
/* Orange House — a main photograph beside the text, with the smaller
canal/deck photograph offset beneath it at desktop (simple stacked
spacing on mobile — no overlap, so nothing collides with a caption). */
.s05-orange {
display: flex;
flex-direction: column;
gap: clamp(28px, 5vw, 40px);
margin-bottom: clamp(56px, 9vw, 88px);
}
.s05-orange-text h3 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); }
.s05-orange-media { display: flex; flex-direction: column; gap: 18px; }
.s05-orange-main { max-width: 460px; margin: 0 auto; }
.s05-orange-secondary { max-width: 320px; margin: 0 auto; }
@media (min-width: 760px) {
.s05-orange { flex-direction: row-reverse; align-items: flex-start; gap: clamp(32px, 5vw, 56px); }
.s05-orange-text { flex: 1; max-width: 48ch; padding-top: 0.3em; }
.s05-orange-media { flex: 0 0 460px; }
.s05-orange-main { max-width: 460px; margin: 0; }
.s05-orange-secondary { max-width: 320px; margin: -36px 0 0 72px; }
}
/* Royal House — asymmetric text + architectural photograph, with a small
supporting photo/placeholder for the antique cannons beneath it. Clean,
unframed images throughout. */
.s05-royal {
display: flex;
flex-direction: column;
gap: clamp(28px, 5vw, 40px);
}
.s05-royal-text h3 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); }
.s05-royal-media { display: flex; flex-direction: column; gap: 18px; }
.s05-royal-main { max-width: 515px; margin: 0 auto; }
/* UPDATED (Sacha's photo brief, Oct 2026): the single cannons placeholder
is now a small side-by-side pair (rear entrance + cannons) beneath the
main front-entrance photo, mobile-first stacked, row from 560px up —
same duo pattern used elsewhere on the site. */
.s05-royal-small-duo {
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
}
.s05-royal-secondary,
.s05-royal-cannons { max-width: 320px; margin: 0 auto; }
@media (min-width: 560px) {
.s05-royal-small-duo { flex-direction: row; justify-content: center; gap: clamp(16px, 3vw, 24px); }
.s05-royal-secondary,
.s05-royal-cannons { max-width: 235px; margin: 0; }
}
@media (min-width: 760px) {
.s05-royal { flex-direction: row; align-items: flex-start; gap: clamp(32px, 5vw, 56px); }
.s05-royal-text { flex: 1; max-width: 48ch; padding-top: 0.3em; }
.s05-royal-media { flex: 0 0 515px; }
.s05-royal-main { max-width: 515px; margin: 0; }
.s05-royal-small-duo { justify-content: flex-start; }
}
/* -------------------- Abaco Art Gallery & Boutique -------------------- */
.s05-gallery-head,
.s05-gallery-block,
.s05-gallery-row,
.s05-gallery-closing {
max-width: 1000px;
margin-left: auto;
margin-right: auto;
padding-left: clamp(20px, 6vw, 64px);
padding-right: clamp(20px, 6vw, 64px);
}
.s05-gallery-head { margin-bottom: clamp(32px, 6vw, 48px); }
.s05-gallery-block {
display: flex;
flex-direction: column;
gap: clamp(20px, 5vw, 28px);
margin-bottom: clamp(44px, 8vw, 64px);
}
.s05-gallery-photo { max-width: 435px; margin: 0 auto; }
/* The new logo lives in the first image slot. No mat/border treatment —
it's a mark, not a photograph — just centred and capped a little
narrower than the photo frames either side of it so it doesn't read as
a feature image. */
.s05-gallery-logo-figure {
display: flex;
align-items: center;
justify-content: center;
padding: clamp(12px, 3vw, 28px) 0;
}
.s05-gallery-logo-figure img { width: 100%; max-width: 280px; height: auto; object-fit: contain; display: block; margin: 0 auto; }
.s05-creative-media { display: flex; flex-direction: column; gap: 16px; }
.s05-creative-photo { max-width: 345px; margin: 0 auto; }
@media (min-width: 760px) {
.s05-gallery-block { flex-direction: row; align-items: flex-start; gap: clamp(36px, 5vw, 56px); }
.s05-gallery-block .s05-gallery-photo { flex: 0 0 435px; max-width: 435px; margin: 0; }
.s05-gallery-block .s05-creative-media { flex: 0 0 345px; }
.s05-gallery-block .s05-text { flex: 1; padding-top: 0.3em; }
.s05-gallery-block--img-right { flex-direction: row-reverse; }
}
/* Third movement — a row of the gallery's own work. Unlike the rest of the
site, these are deliberately uniform: a shared square crop (object-fit:
cover) so four quite different product shots read as one tidy set
rather than a scattered collage. Mobile: a 2x2 grid; from 640px, a single
row of four. */
.s05-gallery-row {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: clamp(14px, 3vw, 20px);
margin-bottom: clamp(44px, 8vw, 64px);
}
.s05-gallery-row-item { margin: 0; }
.s05-gallery-row-item img,
.s05-gallery-row-item picture {
aspect-ratio: 1 / 1;
object-fit: cover;
}
@media (min-width: 640px) {
.s05-gallery-row { grid-template-columns: repeat(4, 1fr); }
}
/* Fourth movement — Community Purpose. Same restrained "fine gold rule +
indented column" treatment used for Section 03's Passing It On close —
deliberately not a colourful callout box. */
.s05-gallery-rule {
width: 56px;
height: 1px;
background: var(--gold);
margin: 0 0 clamp(24px, 5vw, 36px);
}
.s05-gallery-closing-text {
max-width: 54ch;
border-left: 1px solid rgba(201, 169, 107, 0.4);
padding-left: clamp(16px, 3vw, 28px);
}
.s05-gallery-closing-text p {
font-size: 1.02rem;
line-height: 1.75;
margin-bottom: 1.1em;
color: var(--charcoal);
}
.s05-gallery-closing-text p:last-child { margin-bottom: 0; }
.s05-gallery-cta {
display: inline-block;
margin-top: clamp(20px, 4vw, 28px);
margin-left: clamp(16px, 3vw, 28px);
}
/* -------------------- A Life Beyond One Island -------------------- */
.s05-life-text {
max-width: var(--max-wide);
margin: 0 auto;
padding: 0 clamp(20px, 6vw, 64px);
max-width: 60ch;
}
.s05-life-text.s05-text { max-width: 60ch; }
/* REDESIGNED (Sacha's brief, Oct 2026): a varied, editorial gallery in five
loose chapters, replacing the old uniform 6-photo collage above. Each
chapter is a flex-wrap row of "units" — a single photo, a pair, or a
trio, each with its own caption directly beneath it. Units are given a
handful of different widths (not a grid of equal cells) so the whole
thing reads as a composed, magazine-style spread rather than a uniform
wall of thumbnails. Mobile-first: every unit is full-width and stacked
in reading order below 720px; the varied widths and row-wrapping only
kick in from there up. No forced cropping anywhere — every photo keeps
its natural ratio, same ivory-mount frame used throughout the site. */
.s05-gallery2 {
max-width: var(--max-wide);
margin: clamp(48px, 8vw, 72px) auto 0;
padding: 0 clamp(20px, 6vw, 64px);
display: flex;
flex-direction: column;
gap: clamp(52px, 9vw, 80px);
}
.s05-gallery2-chapter-head {
display: flex;
align-items: baseline;
gap: 14px;
margin-bottom: clamp(22px, 4vw, 32px);
}
.s05-gallery2-chapter-num {
font-family: var(--font-serif);
font-size: 0.85rem;
letter-spacing: 0.06em;
color: var(--gold);
}
.s05-gallery2-chapter-title {
font-family: var(--font-serif);
font-weight: 600;
font-size: clamp(1.25rem, 2.1vw, 1.55rem);
color: var(--navy);
margin: 0;
}
.s05-gallery2-units {
display: flex;
flex-direction: column;
gap: clamp(36px, 6vw, 48px);
}
.s05-gallery2-unit { width: 100%; }
.s05-gallery2-media {
display: flex;
flex-direction: column;
gap: 12px;
}
.s05-gallery2-media > .s05-photo { margin: 0; flex: 1 1 0; min-width: 0; }
.s05-gallery2-caption {
font-family: var(--font-serif);
font-style: italic;
font-size: clamp(0.94rem, 1.3vw, 1.02rem);
line-height: 1.65;
color: var(--charcoal);
margin: 0.8em 0 0;
max-width: 46ch;
}
@media (min-width: 560px) {
.s05-gallery2-unit--pair .s05-gallery2-media,
.s05-gallery2-unit--pair-wide .s05-gallery2-media,
.s05-gallery2-unit--trio .s05-gallery2-media {
flex-direction: row;
}
}
@media (min-width: 720px) {
.s05-gallery2-units {
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
row-gap: clamp(40px, 6vw, 56px);
column-gap: clamp(28px, 4vw, 44px);
}
.s05-gallery2-unit { width: auto; }
.s05-gallery2-unit--sm { width: 300px; }
.s05-gallery2-unit--md { width: 365px; }
.s05-gallery2-unit--lg { width: 445px; }
.s05-gallery2-unit--pair { width: 525px; }
.s05-gallery2-unit--pair-wide { width: 590px; }
.s05-gallery2-unit--trio { width: 635px; }
.s05-gallery2-unit--full { width: 100%; max-width: 900px; }
.s05-gallery2-unit--pair .s05-gallery2-caption,
.s05-gallery2-unit--pair-wide .s05-gallery2-caption,
.s05-gallery2-unit--trio .s05-gallery2-caption,
.s05-gallery2-unit--full .s05-gallery2-caption { max-width: 52ch; }
}
/* -------------------- Closing: quote + reflection (Sacha, Oct 2026) -------------------- */
/* The quote now opens the section in place of the removed hero photo. Same
restrained gold-rule treatment used for the Gallery section's closing
movement (.s05-gallery-rule), and the same serif-italic-navy quote
styling as .pull-quote elsewhere on the site — just sized a touch larger
so it still reads as the section's opening line, not a caption. */
.reflection-rule {
width: 56px;
height: 1px;
background: var(--gold);
margin: 0 0 clamp(20px, 4vw, 28px);
}
.reflection-quote {
font-family: var(--font-serif);
font-style: italic;
font-weight: 500;
font-size: clamp(1.4rem, 2.6vw, 1.8rem);
line-height: 1.45;
color: var(--navy);
max-width: 32ch;
margin: 0 0 clamp(28px, 5vw, 40px);
}