/* The therapist bio pages (robin-levick.html, sophia-beletsis.html, and any new one): their shared layout, moved out of each page on Oct 16 (Robin: "update the rules for these bio pages so I don't have to tune every therapist's page"). Linked after site.css and before spacing.css, which has the final word. */
/* Layout: black negative space with windows: stone panels for text, and photographs of nature. One accent on every page: the sky blue sampled from the hero photograph (--accent on black, --accent-ink, a deeper sky, on stone). */







/* nav */








/* type on the dark ground */





/* full-bleed home hero */

/* Fill the screen but never crop the opening in the rock. The opening spans about 37-96% of the photo's width and 4-80% of its height, so the photo can fill frames from 0.92:1 to 1.7:1; beyond that it stops growing and the black shows. Positions weight the crop toward the rock; side crops come only from the left, where there is the most rock. */







/* heroes */









/* plate: a tall photograph on one side, darkened by an overlay and faded into the black, with the page title over the dark side */







/* windows */
















/* side-by-side window + tall photo */



/* band */





/* find */






/* people */

.portrait{aspect-ratio:4/5;width:100%;height:auto;object-fit:cover;background:var(--panel2);display:grid;place-items:center;color:var(--mute);font-size:13px;letter-spacing:.02em}










/* faq */








/* posts */



/* footer */








/* Image window: black negative space with windows cut into it, onto text (stone panels) or onto nature. This one is a thin band cropped from an abstract nature photograph (stone, bark, lichen, grain); other shapes may follow. Unframed and still. The photographs are placeholders until Robin chooses them. */






/* Therapists page. Nav as on the landing and Services pages: wordmark on its own row, then the menu with Contact as its last plain item. */
.nav{display:block;padding-bottom:20px}
.p-therapists{--pw:min(100vw,1336px);--g:clamp(16px,4.56vw,67px);--cw:min(var(--pw),calc(100vw - 2 * var(--g)))}
.p-therapists .wrap{padding-inline:var(--g)}
@media (min-width:861px){.p-therapists .wrap{max-width:none;width:var(--cw);padding-inline:0}}

/* The wood grain (Robin's photo, Photos/woodgrain-original.jpg, turned 90 degrees so the grain runs across: Photos/woodgrain-rotated.jpg). The therapists' panels are black windows over it. Still, unframed. */
.p-therapists{position:relative;background:var(--ground)}

.p-therapists>nav,.p-therapists>main,.p-therapists>footer{position:relative;z-index:1}
.p-therapists .nav{background:none}


/* The therapist panels are black windows in the wood, with bone type, like the footer. */








/* Footer as on the landing page: one narrow line of facts across the bottom, here on a black band the width of the screen. */
.p-therapists footer.slim{margin-top:var(--breath);background:var(--ground);padding-block:0 20px}
.p-therapists .foot{font-size:14px;line-height:1.6;text-align:center}
.p-therapists .foot .line{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 28px}
.p-therapists .foot .line>*{white-space:nowrap}
@media (max-width:420px){.p-therapists .foot .line>*{white-space:normal}}
/* Nav on a black band the width of the screen (it also reaches up, so the Mac's overscroll bounce shows black, not wood). No visible title: the cards come straight after the nav (the h1 is kept for search and screen readers). The wood is pinned to the window behind the cards; chosen Oct 7 over a full-page fill, a screen-width photo that ends partway, and a hero. */

.p-therapists .nav{background:var(--ground);box-shadow:0 0 0 100vmax var(--ground);clip-path:inset(-100vmax -100vmax 0)}
.p-therapists .nav a{text-shadow:none}

/* No overscroll bounce: with the wood pinned to the window, the bounce at the top of the page would show wood above the black nav. */
html,body{overscroll-behavior-y:none}

/* Each card carries a line from the therapist's own message to clients, in their words, set a little larger */

/* Cards link to each therapist's own page */



/* Footer, the same on every page: one narrow band that closes the page. The facts on one line, the practice name, director and copyright on a second, smaller line; each item kept whole and wrapping onto as few lines as the width allows. */






/* Header, the same on every page (Oct 7): wordmark on its own row, then the menu, Contact its last plain item. The page is designed up to a full-screen MacBook Air (1470px wide): photos and panels stop growing at 1336px (the landing photo's width on the laptop, Oct 14) (--pw) and black fills beyond. Two lines run down every page: the outer line, where photos and panels start, and the inner line (--in further in), where the wordmark, the menu, titles and the text inside panels start. The wordmark scales with the photo, 28 to 34px, the same on every page. */
:root{--pw:min(100vw,1336px);--g:clamp(16px,4.56vw,67px);--cw:min(var(--pw),calc(100vw - 2 * var(--g)));--in:clamp(16px,2vw,28px)}
.nav{display:block;padding-bottom:20px}

@media (min-width:861px){.nav.wrap{max-width:none;width:var(--cw);padding-inline:var(--in) 0}.nav .mark{font-size:clamp(28px,calc(var(--cw) * .024),34px)}}
@media (max-width:860px){.nav.wrap{padding-inline:var(--g)}}
/* Framed (Oct 7, trying): the wood keeps the same black margins as the photos on the other pages, so moving between pages doesn't jump from inset to full bleed. The wood shows only between the outer lines; the cards sit inside it, starting on the inner line. */



/* Cards stay horizontal (portrait beside the text) down to 560px, with the portrait kept small, so a narrow window doesn't turn the portrait into a poster. Below 560px the portrait sits above the text but no wider than 220px. */



/* The black inside each card, around the portrait, is the same width as the black margin at the sides of the wood (--g) (Robin, Oct 8; on Oct 7 it had been narrower) */

/* Cards two across (Oct 7), so the text fills each card instead of leaving a wide black field to its right. The wood shows the same width (--in) around and between the cards. Cards carry who the therapist sees and their openings; office, hours and fees live on each therapist's own page. */




/* The page is short now, so the wood section stretches to keep the footer at the bottom of the screen (otherwise the pinned wood shows below the footer) */
body.p-therapists{display:flex;flex-direction:column;min-height:100vh;min-height:100svh}
.p-therapists>main{flex:1;display:flex;flex-direction:column}
@media (max-width:860px){.p-therapists>.nav,.p-therapists>main>.wrap{width:100%}}

/* Two across down to 720px wide (chosen Oct 7 over one narrower centred card per row). When a card gets narrow, its portrait moves above the text, at most 200px wide, rather than squeezing the text. */




@container (max-width:480px){.card-in{grid-template-columns:1fr}.wood .person .card-in .portrait{max-width:200px;justify-self:center}}
/* Give the wood room (Oct 7): it is the page's image, so a generous field of it shows around and between the cards, the same width on every side (--wm), instead of thin strips. */
.p-therapists{--wm:clamp(24px,6vw,96px)}


/* Phones and very narrow windows: thin strips of wood beside the cards looked busy and hid the photo, so the cards take the full width (inside the black margins) and the wood shows as generous bands above, between and below them */

/* One card per row, between phone and tablet widths (Robin, Oct 8): the card is narrower than the row, so more wood shows at its sides. Phones keep the full width. */

/* Oct 16 (Robin): the template for every therapist page, the wrap. The portrait at its own 4:5 size and the size it is on the Therapists card (304px wide at most), flush in the stone panel's top left corner; the statement starts beside it and flows under it across the full panel. */
/* ---- */
/* Oct 14: the page back inside the site's system. Black ground; the wood once, as a strip under the menu, from the full-size file (woodgrain-turned-4032.jpg) at the content width's own scale, the band through the dark heartwood wave; the cards on the black itself, no stone, two across so more than one therapist is on the laptop screen, portrait and text side by side with the portrait taking half the card. Rows are added as therapists join. The .wood rules above (black cards on pinned wood, Oct 7) are overridden here rather than removed; the old page is in git history. */
.p-therapists{--th:clamp(190px,calc(17vw + 10px),260px)}
.p-therapists .wood-slice{position:relative;height:var(--th);background:var(--ground2);overflow:hidden;margin-bottom:var(--breath)}
.p-therapists .wood-slice::before{content:"";position:absolute;inset:0;background:url(img/woodgrain-turned-4032.jpg) no-repeat;background-size:100% auto;background-position:0 28%}
.p-therapists .wood-slice h1{z-index:1;position:absolute;left:var(--in);bottom:clamp(14px,2vw,26px);margin:0;color:#F3EDE1;font-size:clamp(30px,calc(var(--pw) * .031),44px);line-height:1.05;text-shadow:0 1px 28px rgba(0,0,0,.55)}
/* The foot slice continues the photo from where the header band stops (Robin, Oct 14: the next slice down, not the bottom): the photo is 4032x2964, so at the content width it is --cw * .7351 tall; the header shows from 28% of the spare height, for --th; the foot starts right under that. */
.p-therapists .wood-foot{background:var(--ground2) url(img/woodgrain-turned-4032.jpg) no-repeat;background-size:100% auto;background-position:0 max(calc(-1 * ((var(--cw) * .7351 - var(--th)) * .28 + var(--th))),calc(72px - var(--cw) * .7351))}
.p-therapists .nav{box-shadow:none;clip-path:none}
/* Oct 16 (Robin): the black between the menu and the first picture is the same site-wide; the strip starts right under the menu as the Services header does */
.p-therapists .wrap>.wood-slice{margin-top:0}
html,body{overscroll-behavior-y:auto}

/* Oct 15 (Robin): the portraits sit on the outer line, in line with the photo band's edge, not inset to the inner line as text would be; a portrait is a photo */


/* Rule (Robin, Oct 14): text beside a photograph never runs past the photograph's bottom, and every portrait is the same size (4:5, half the card). So the text has to fit the portrait's height: the card's vertical spacing is kept tight, and a therapist's line has to be short enough to fit. */
/* The text column is as tall as the portrait; About and Contact sit at its foot, on the portrait's bottom line (Robin, Oct 14) */












@container (max-width:420px){.card-in{grid-template-columns:1fr}.wood .person .card-in .portrait{max-width:260px;justify-self:start}}
/* Oct 14 (Robin: in a window narrower than the full screen the text ran far past the portrait, "looks like shit"). Two across only when the window is the full laptop width (the content at its 1336px cap). Any narrower, one therapist per row: the portrait a third of the width, the text beside it in a wide column, so the text always fits inside the portrait's height. */




/* The About and Contact links on the cards at body size, a step heavier (Robin, Oct 14: they were small) */

.p-therapists footer.slim{margin-top:var(--breath)}
/* Oct 15 (Robin: a Contact link back to the main page is a way to lose a client, not a funnel; and a client who tries to book and finds no time must not stop there). Each card ends with a booking row under the portrait and text, across the card's full width: the therapist's booking button, phone and email on one line, then Robin's line from the Contact page saying that if nothing works through the link, call, text or email. The row sits below both portrait and text, so the text beside the portrait keeps to the portrait's height as before and the About link stays at its foot. The portrait is pinned to its own 4:5 size and never stretches. Robin's card carries the practice's booking page, phone and email until he gives his own; Sophia's are bracketed for her details. */


/* The button on its own line; phone and email together on the line under it (the three did not fit on one line in a half-width card) */
/* ---- */
/* Oct 15 (live, from site/try-robin.html): the therapist page rebuilt in the site's system. The card on Therapists is the cover; this page is the words. Wood strip under the menu with the name on it (the wood for every therapist until each picks their own photograph), then the statement and the bio in stone windows laid out as on Orientation (label and lead line in the left third, the text in the right two-thirds), then the details and the booking row once, at the end. The portrait sits beside the statement (people arrive here directly, so the face stays up top); the details window stands at the end. */


.tabs button[aria-selected=true]{color:var(--ground);background:var(--accent);border-color:var(--accent)}
.idea[hidden]{display:none}
.p-therapists .wood-slice{margin-bottom:0}
/* Oct 16 (Robin): on a therapist's own page the wood is a strip, not the small hero; the name sits in its middle. The Therapists page keeps the taller band. */
.pg-strip{--sh:clamp(84px,7vw,104px)}
.pg-strip .wood-slice{height:var(--sh)}
/* The strip is centred 40% down the photo, on the dark heartwood band at the left, so the name sits on dark wood at every width */
.pg-strip .wood-slice::before{background-position:0 calc(var(--sh) / 2 - var(--cw) * .294)}
.pg-strip .wood-slice h1{top:50%;bottom:auto;transform:translateY(-50%)}
.pg{display:grid;gap:var(--gap);padding-block:var(--gap) 0}


.pg .lab{font:500 15px/1.4 var(--sans);letter-spacing:.04em;text-transform:uppercase;color:var(--mute)}

.pg .reading{font-size:18px;line-height:1.75;max-width:66ch}
.pg .reading p+p{margin-top:1.1em}

/* details and booking on stone */









/* A: portrait beside the details at the end */


/* B: portrait beside the statement */







/* Oct 15, Robin's review: the portrait stays up top beside the statement (people arrive here directly); the bio fills its window in two columns instead of sitting small in the right two-thirds; a thin slice of the wood between the statement and the bio (the one above the booking card was dropped the same afternoon), the same photograph as the header and foot cut at other bands, so the stone is broken up; the booking card is white on black. */






/* The booking card is white on black (Robin, Oct 15): the one black card among the stone windows, as the cards are on Therapists */








/* Oct 16 (Robin): the strip at the foot of the page sits close on the footer, so it leads into the footer instead of floating between it and the page */
footer.slim.close{margin-top:clamp(20px,2vw,28px)}

/* TRY (Oct 16): therapist page options, designed at the full laptop screen (1470 wide, about 830 tall in the browser). The photo on black, 4:5, as tall as fits above the fold under the menu and the strip; nothing crops it. Slot 1, the statement, sits beside the photo and is written to a character range so it fits the photo's height; slot 2, How I work, is optional and any reasonable length. */
.pf{--ph:clamp(380px,calc(100vh - 290px),545px)}
.pf .pf-photo{display:block;height:var(--ph);width:auto;aspect-ratio:4/5;object-fit:cover;max-width:none}


.pf .reading{max-width:62ch;margin-top:20px}
.pf .pf-how .reading{margin-top:14px}
/* A: still. Photo and statement side by side, the same height; How I work below at reading width */


/* B and C: the photo stays on screen while you read. Left column the photo, held in place as the text scrolls; it lets go when its column ends. B holds it through the statement and How I work; C through the bio too. */
.pf-b .cols,.pf-c .cols{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--gap);align-items:start}
.pf-b .pf-photo,.pf-c .pf-photo{position:sticky;top:calc(56px + var(--gap))}
.pf-b .stack,.pf-c .stack{display:grid;gap:var(--gap)}
/* narrower than a laptop: stacked, nothing held */
@media (max-width:1099px){.pf{--ph:auto}.pf-a .top,.pf-b .cols,.pf-c .cols{grid-template-columns:1fr}.pf .pf-photo{position:static;height:auto;width:100%;max-width:420px}}
/* Oct 16 (Robin): option C. At laptop width the menu and the name strip stay at the top, and the photo stays on screen beside the text all the way to the bottom of the page. The details and booking, the foot slice and the footer all sit in the text column, so the text keeps scrolling on the right to the very end and the photo, as tall as the window allows under the held header, with the same black under it as above it (the script below measures it), is never cut off. Narrower windows: nothing is held, everything stacks. */
.stick{background:var(--ground)}
.pf-c .pf-photo{height:auto;width:100%}
.pf-c .stack{display:grid;gap:var(--gap)}

.pf-c .stack .wood-foot{height:72px}
@media (min-width:1100px){
 .stick{position:sticky;top:0;z-index:10;padding-bottom:var(--gap)}
 .pf{padding-top:0}
 .pf-c .cols{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--gap);align-items:start}
 .pf-c .pf-photo{position:sticky;top:var(--hh,260px);height:calc(100vh - var(--hh,260px) - var(--head-gap));width:auto;aspect-ratio:4/5}
}
.pf-c .stack footer.slim{margin-top:0;padding-bottom:var(--head-gap)}
.pf-c .stack footer .wrap{width:auto;max-width:none;padding-inline:0;margin:0}
/* Oct 16 (Robin): the text runs the full width of its stone panel here. The therapist's own line at the top is set as the site's pull quote (as on Individuals): the serif, semibold, in the deep sky ink. Body text as on Individuals, 17px. */
.pf .pull{font:600 clamp(22px,2vw,30px)/1.3 var(--serif);color:var(--accent-ink);text-wrap:balance;margin:0;max-width:none}
.pf .reading{max-width:none;font-size:17px;line-height:1.65}
.pf .reading p{max-width:none}
.pf .reading p+p{margin-top:1em}
.pf .quals{list-style:none;padding:0;margin:0}
.pf .quals li{padding-block:6px;border-top:1px solid rgba(0,0,0,.1)}
.pf .quals li:first-child{border-top:0;padding-top:0}
/* The name, degree and license in the strip (Robin, Oct 16) */
.pg-strip .wood-slice .who{position:absolute;z-index:1;left:var(--in);right:var(--in);top:50%;transform:translateY(-50%)}
.pg-strip .wood-slice .who h1{position:static;transform:none}
.pg-strip .wood-slice .deg{font-weight:400;font-size:.6em}
.pg-strip .wood-slice .lic{margin-top:6px;font:500 15px/1.3 var(--sans);letter-spacing:.04em;text-transform:uppercase;color:#F3EDE1;text-shadow:0 1px 14px rgba(0,0,0,.7)}
/* Oct 16: tried three ways to open the text column. 1: Who I work with on stone, with the facts and the button. 2: the same as a black card. 3: Who I work with beside a narrow black Details column. */

.pf dl{display:grid;grid-template-columns:auto 1fr;gap:6px 20px;font-size:16px;margin:14px 0 18px}
.pf dt{color:var(--mute)}
.pf .btn{display:inline-block;white-space:nowrap;font:400 15px/1 var(--sans);text-decoration:none;padding:13px 20px;border:1px solid var(--ink);background:var(--ink);color:var(--panel)}
.pf .btn:hover{background:var(--accent-ink);border-color:var(--accent-ink);color:#fff}
.pf .lines{display:flex;flex-wrap:wrap;gap:4px 22px;margin-top:14px}
.pf .tel,.pf .mail{font:400 15px/1.3 var(--sans);color:var(--ink);text-decoration:none;border-bottom:1px solid var(--accent-ink);padding-bottom:2px}
.pf .fallback{font-size:14px;line-height:1.5;color:var(--mute);margin-top:14px}
.pf .window.pf-black{background:var(--ground);color:var(--head);outline:1px solid var(--rule);outline-offset:-1px}
.pf-black .lab,.pf-black dt,.pf-black .fallback{color:var(--dim)}

.pf-black .btn{border-color:var(--head);background:var(--head);color:var(--ground)}
.pf-black .btn:hover{background:var(--accent);border-color:var(--accent);color:var(--ground)}
.pf-black .tel,.pf-black .mail{color:var(--head);border-bottom-color:var(--rule)}




/* Oct 16 (Robin): the black card chosen. The practical answers come first in it, right under the facts: the button, phone, email and the line about calling if nothing works, so nobody has to scroll to the bottom for contact. The short Get in touch block stays at the end for someone who has read everything. */
.pf-black .contact{padding:4px 0 22px;margin-bottom:22px;border-bottom:1px solid var(--rule)}
.pf-black .contact .lines{margin-top:16px}
/* Oct 16 (Robin): the card lists what she works with (specialties, populations, issues) instead of paragraphs; her paragraphs moved into How I work. Items drawn from her own text, for her to edit. */
.pf-black .focus{list-style:none;padding:0;margin:12px 0 0;columns:3 200px;column-gap:28px}
.pf-black .focus li{break-inside:avoid;font:300 16px/1.4 var(--sans);color:var(--head);padding:6px 0;border-top:1px solid var(--rule)}
/* Oct 16 (Robin): a quiet cue that there is more below. A small black tab at the foot of the screen, centred on the text column, "More" and a down arrow; it fades out as soon as the page is scrolled, and does not show when everything already fits. */
.more{position:fixed;bottom:10px;z-index:20;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:7px 16px;background:var(--ground);border:1px solid var(--rule);color:var(--dim);font:500 12px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;transition:opacity .4s}
.more svg{width:12px;height:12px}
.more.gone{opacity:0;pointer-events:none}
@media (max-width:1099px){.more{display:none}}
/* The long email address must not widen the page on a phone */
.pf .cols,.pf .stack{min-width:0}
.pf .mail{white-space:normal;overflow-wrap:anywhere}
/* Oct 16 (Robin): a little less stone above each panel's label; at laptop width the black card is at least as tall as the photo, so the two line up at the bottom */

@media (min-width:1100px){.pf .pf-black{min-height:calc(100vh - var(--hh,260px) - var(--head-gap))}}
/* Oct 16 (Robin): in the black card the colours swap: the labels bright (the cream, --head), the text warm (the taupe, --dim); the row names and the small print one step darker so the order still reads. Phone and email stay cream, as things to act on. */
.pf-black .lab{color:var(--head)}
.pf-black dd,.pf-black .focus li,.pf-black .reading{color:var(--dim)}
.pf-black dt,.pf-black .fallback{color:#8C8273}
/* Oct 16 (Robin), site rule on black: labels bright (the cream, --head), the text they label warm (--warm, the taupe lifted halfway toward the cream). Links stay cream. */
:root{--warm:#CCC2B2}
.pf-black .lab,.pf-black dt{color:var(--head)}
.pf-black dd,.pf-black .focus li,.pf-black .reading{color:var(--warm)}
/* Oct 16 (Robin): the card tightened so it fits beside the photo on the laptop screen (about 810 tall inside the browser) and the bottoms line up */
@media (min-width:1100px){
 .pf .pf-black{padding-bottom:clamp(20px,2.4vw,32px)}
 .pf-black dl{margin:10px 0 14px}
 .pf-black .contact{padding:0 0 16px;margin-bottom:16px}
 .pf-black .contact .lines{margin-top:12px}
 .pf-black .fallback{margin-top:10px}
 .pf-black .focus li{padding:5px 0}
}
/* Oct 16 (Robin): no rule above the first row of the Focus list, only lines between rows. A grid of three across (two on narrower, one on a phone) so the first row is known. */
.pf-black .focus{columns:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:28px}
.pf-black .focus li:nth-child(-n+3){border-top:0}
@media (max-width:900px){.pf-black .focus{grid-template-columns:repeat(2,minmax(0,1fr))}.pf-black .focus li:nth-child(3){border-top:1px solid var(--rule)}}
@media (max-width:560px){.pf-black .focus{grid-template-columns:1fr}.pf-black .focus li:nth-child(2){border-top:1px solid var(--rule)}}
/* Oct 16 (Robin): the card's label sits higher (less black above it); the room it frees goes back around the contact lines */
@media (min-width:1100px){
 .pf .pf-black{padding-top:clamp(16px,1.5vw,22px)}
 .pf-black .contact{padding-bottom:20px;margin-bottom:20px}
}
/* Any room left over in the card goes above the Focus list, so the list sits on the card's foot, level with the bottom of the photo */
@media (min-width:1100px){.pf .pf-black{display:flex;flex-direction:column}.pf-black .contact{margin-bottom:auto}}
/* Oct 16 (Robin): the card's spacing made consistent. The same black on all four sides (--pad). Two groups, the contact and the Focus list, with the rule centred between them: at laptop width the card matches the photo's height and any spare room splits evenly above and below the rule. Inside a group: 12px from a label to what it labels, 16px between parts. */
.pf .pf-black{--pad:var(--pad-card);padding:var(--pad)!important;display:flex;flex-direction:column;justify-content:space-between}
.pf-black .contact{padding:0!important;margin:16px 0 0!important;border:0}
.pf-black dl{margin:12px 0 0!important}
.pf-black .contact .lines{margin-top:16px!important}
.pf-black .fallback{margin-top:12px!important}
.pf-black .sep{border:0;border-top:1px solid var(--rule);margin:var(--pad) 0;width:100%}
.pf-black .grp .lab{margin:0!important}
.pf-black .focus{margin-top:12px!important}
.pf-black .focus li{padding:5px 0!important}
.pf-black .focus li:nth-child(-n+3){padding-top:0!important}
/* Oct 16 (Robin): Get in touch at the end is a black card too, with the booking button, phone, email and the line; it keeps its own height (the photo-height rule is for the first card only) */
.pf .pf-black.pf-end{min-height:0;display:block}
.pf-end .contact{margin-top:16px!important}