/* Embodied Relational Psychotherapy: the spacing rules (Oct 16, Robin). Linked last on every page, after the page's own styles, so these have the final word. Values come from the variables in site.css: --gap (the unit of black between things) and --breath (the larger black, before the closing strip and the footer).

1. The black under the header photo, before the first thing on the page, is the gap. */
main > .skylight.head + *{margin-top:var(--gap);padding-top:0}
.p-therapists main > .wrap:first-child + .wood{padding-top:var(--gap)}
main > .wrap:first-child > .strip.head-slice,main > .wrap:first-child > .strip.wood-slice{margin-top:0;margin-bottom:0}
main > .wrap:first-child + .intro{padding-top:var(--gap)}

/* 2. Header titles sit at the bottom left of the photo, on every page. */
.skylight.head .head-txt{top:auto;bottom:clamp(14px,2vw,26px);transform:none}

/* 3. Sizes (Oct 16): the black under the header photo is --head-gap, 29 at laptop width (Robin: the same as the black above the photo). Panels have the same padding on all four sides, in two sizes for now: --pad-read inside stone panels of reading text, --pad-card inside the black cards. Panels made of rows (the essays on the service pages, the prospectus on Clinical apprenticeship) carry the padding on each row instead, so the space above and below each dividing rule is the same as at the panel's edge. */
:root{--head-gap:clamp(16px,2.4vw,29px);--pad-read:clamp(24px,2.8vw,40px);--pad-card:clamp(18px,1.6vw,24px)}
main > .skylight.head + *{margin-top:var(--head-gap)}
.p-therapists main > .wrap:first-child + .wood{padding-top:var(--head-gap)}
main > .wrap:first-child + .intro{padding-top:var(--head-gap)}
@media (min-width:861px){.stick{padding-bottom:var(--head-gap)}}
.window{padding:var(--pad-read)}
.p-service .window.essay{padding-block:0}

/* 4. The black between the menu and the header photo (Oct 16, Robin: a touch bigger): 29px from the menu's underline (the same as the black under the photo, --head-gap) to the photo at laptop width. The landing page's menu sits on its photo and is left alone. */
body:not(.p-home) .nav{padding-bottom:calc(var(--head-gap) + 2px)}

/* 5. The width of the site (Robin, Oct 16): the landing photograph, as wide as it goes on the laptop (1336px, --pw), with the black margin --g at the sides on smaller screens (--cw). Everything inside main and the footer lines up with its left and right edges. */
@media (min-width:861px){body:not(.p-home) main .wrap,body:not(.p-home) footer .wrap{max-width:none;width:var(--cw);padding-inline:0}}

/* 6. A title on black is never bigger than the wordmark: the same size (Robin's rule) */
main .title h1{font:800 34px/1.1 var(--serif)}
@media (max-width:860px){main .title h1{font-size:28px}}

/* 7. A frame has the same border all round (Robin, Oct 16). At full laptop width the landing photograph sets the width (1336px) and the black at the sides is whatever is left. In any narrower window the black at the sides of the page is the same as the black above and below the header photo (--head-gap), so the page reads as a framed picture. The landing page sets its own width. */
body[class]:not(.p-home){--g:var(--head-gap);--cw:min(1336px,calc(100vw - 2 * var(--g)))}

/* 8. The foot of the page, framed like the head (Robin, Oct 16): the same black (--head-gap) between the last panel and the closing strip, between the strip and the footer's first line, and under the footer's last line. The landing page keeps its own. */
body:not(.p-home) main > :last-child:has(> .strip:only-child),body:not(.p-home) main > .wrap.foot-slice{margin-top:var(--head-gap)!important}
body:not(.p-home) main > :last-child > .strip:only-child{margin-top:0}
body:not(.p-home) footer.slim{padding-bottom:var(--head-gap)}
body:not(.p-home) footer.slim:not(.close){margin-top:var(--head-gap)}
body:not(.p-home) main > .windows:nth-last-child(2):has(+ :last-child > .strip:only-child){padding-bottom:0}
body:not(.p-home) main > .windows:last-child{padding-bottom:0}

/* 9. (Oct 21: the landing photo no longer shrinks with the screen's height, so the menu follows the site's width only.) The menu never moves between pages (Robin, Oct 16). The wordmark and menu sit where they sit on the landing page: 28px in from the landing photograph's left edge. At full laptop width that photograph has black at its sides, so the menu is 28px in from the photo's edge on every page; in a narrower window the landing photograph runs edge to edge, so the menu is 28px from the window's edge on every page, as close to the edge as it needs to be. Titles on header photographs sit 28px in from their photo's edge. Phones keep their own layout. (166svh is the landing photograph's widest shape; 1336px its largest width.) */
@media (min-width:861px){
 .head-txt{--in:28px}
 body:not(.p-home) .nav.wrap{width:auto;max-width:none;margin:0;padding-inline:calc((100vw - min(100vw,1336px)) / 2 + 28px) 0}
 .p-home .nav{width:auto;margin:0;padding-inline:28px 0}
}
@media (min-width:1000px) and (min-height:620px) and (min-aspect-ratio:5/4),(min-width:1100px) and (min-height:620px){.p-home .nav{padding-inline:max(12px,calc((100vw - min(100vw,1336px)) / 2 + 28px - var(--pb))) 0}}
.p-home .nav{padding-bottom:calc(var(--head-gap) + 2px)}

/* 10. A heading beside text sits level with it (Robin, Oct 16): in every two-column row (the essays on the service pages, the prospectus on Clinical apprenticeship, the sections on Fees) the heading's first line and the text's first line share a baseline, and the gap between the two columns is one size everywhere (--col-gap). */
:root{--col-gap:clamp(24px,4vw,64px)}
.p-service .pass,.prosp .row,.p-fees .pass{align-items:baseline;column-gap:var(--col-gap)}
.prosp .row > h2{align-self:baseline}

/* 11. Sections (Robin, Oct 16): moving on to a new section of a page (from the service essays to the therapists, from the prospectus to the supervisors, from Fees to the therapists with openings) is one larger black, --breath (72 at laptop width), never doubled. A heading or a line that belongs to the thing beside it sits the gap (--head-gap) from it. */
.p-service main > .tcards{margin-top:0;padding-top:var(--breath)}
.p-fees .sect-h{margin-bottom:var(--head-gap)}
.p-fees .sect-h + .windows{padding-top:0}
.p-services main > .windows:has(+ .fees-line){padding-bottom:0}
.p-services .fees-line{padding-top:calc(var(--head-gap) - 8px)}

/* 12. The landing page's pictures (Robin, Oct 16): the black around them is one size, the same as the page's frame: between the pictures across, between the rows, and at the sides of the page (once the window is narrower than the landing photograph's full width). */
.p-home .find{gap:var(--head-gap)}
@media (max-width:1400px){.p-home main .wrap{padding-inline:var(--head-gap)}}
@media (max-width:1400px){.p-home main .wrap{width:auto;max-width:none}}

/* 13. The landing page's contact section on a tablet (Robin, Oct 16: "could look better"): the button and the line under it on the left, phone, email and office on the right, the map full width under them. */
@media (min-width:600px) and (max-width:999px){
 .p-home .reach .info{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:var(--head-gap);align-items:start}
 .p-home .reach .info > .btns,.p-home .reach .info > .fallback{grid-column:1;max-width:none}
 .p-home .reach .info > .btns{padding-block:0}
 .p-home .reach .info > dl{grid-column:2;grid-row:1 / span 2;margin-top:0}
 .p-home .reach .info > dl a{overflow-wrap:anywhere}
}
/* Oct 16 (Robin): with the booking button gone, where the map sits beside the details (861-999) the Reach out heading and the details stack in that one column, as at full screen */
@media (min-width:861px) and (max-width:999px){.p-home .reach .info{display:block}}

/* The landing page's booking button is as wide as its words, at every width (Robin, Oct 16) */
.p-home .reach .btns .btn{width:auto;display:inline-block;flex:none}

/* 14. One label style on stone (Robin, Oct 16: the blue label over the Approach headings looked bad): a small uppercase label on a stone panel is the same everywhere, grey (--mute), IBM Plex Sans 500, 15px, 12px above what it labels, as on the therapist pages. */
.window .tag{font:500 15px/1.4 var(--sans);letter-spacing:.04em;text-transform:uppercase;color:var(--mute);margin-bottom:12px}

/* 15. The footer wraps evenly (Robin, Oct 16: the footer looked bad where its lines broke). When a line of facts doesn't fit on one row, it breaks into rows of about equal length instead of leaving one item alone on the next row; no fact is ever split. */
footer.slim .line{display:block;text-align:center;text-wrap:balance}
footer.slim .line>*{display:inline-block;white-space:nowrap;margin:3px 14px}
@media (max-width:560px){footer.slim .line>*{white-space:normal}}

/* 16. One booking button (Robin, Oct 16): the same size on every page, 14px by 22px inside, with its 1px edge in its own colour, IBM Plex Sans 15px */
:root .btn{padding:14px 22px!important;border-width:1px!important;border-style:solid!important;font:400 15px/1 var(--sans)!important}
.p-contact .btns .btn{width:auto;display:inline-block;flex:none}
/* The button is stone on black, the same stone as the panels (Robin, Oct 16: not cream, no extra contrast); sky on hover */
:root .btn{background:var(--panel)!important;border-color:var(--panel)!important;color:var(--ink)!important}
:root .btn:hover,:root .btn:focus-visible{background:var(--accent)!important;border-color:var(--accent)!important;color:var(--ground)!important}
/* Oct 16 (Robin: "why don't we make those buttons the same blue as the hyperlink underline?"): the button is the sky blue of the link underlines, black words; stone on hover */
:root .btn{background:var(--accent)!important;border-color:var(--accent)!important;color:var(--ground)!important}
:root .btn:hover,:root .btn:focus-visible{background:var(--panel)!important;border-color:var(--panel)!important;color:var(--ink)!important}

/* 17. The footer stays two lines down to tablet width (Robin, Oct 16: four lines was too busy): a little smaller and closer together below full laptop width */
@media (max-width:1400px){footer.slim .foot{font-size:13px}footer.slim .line.legal{font-size:12px}}

/* 18a. The Therapists page cards, tablet look (Robin approved it at 768, Oct 16): only while the two cards are narrow, up to 860px. Above that, through the laptop, the cards keep their wider layout (photo beside the words); a part that switches on its own width, an agreed exception to the 1100 line (it broke at 1000 when moved there). */
@media (max-width:860px){
 /* Therapist cards stacked: the photo as wide as the text under it; the name is the link to the page, so the separate About link under the photo steps aside */
 .wood .person .side,.wood .person .portrait{width:100%;max-width:none}
 .wood .person .side .acts{display:none}
 /* The two cards side by side read as a pair (Robin, Oct 16: "not enough space under the names ... make these cards same size, put the black space above book"): more room under each name, and the cards the same height with any extra black above the booking, so the two Book buttons line up */
 .wood>.windows>.person{display:flex;flex-direction:column;gap:0}
 /* "Sees" sits with the booking, right above the button, and the black space goes above it (Robin, Oct 16) */
 .wood .person .info{display:contents}
 .wood .person .meta{margin-top:auto;padding-top:clamp(16px,1.6vw,22px)}
 .wood .person h2{margin-bottom:8px}
}
/* 18. Tablet (768, Robin, Oct 16). */
@media (max-width:860px){
 /* The side photo columns on the service pages stay at tablet (Robin, Oct 16: they had stepped aside as slivers; "put them back, we will look later") */
 /* Clinical apprenticeship keeps its snag beside the text at tablet (Robin, Oct 16: "let me see the left panel w tree at 768 still", then "wider, and where you can see the tree"): the laptop's proportion, a third to two thirds, the trunk centred in the column */
 .snaggrid{grid-template-columns:minmax(0,1fr) minmax(0,2.2fr)}
 .snag img{object-position:50% 40%}
 /* The supervisors at tablet (Robin, Oct 16: "the pics of the supervisors are insanely large"): each one a row, the photo a third of the width on the left as the snag above it, name and words beside it */
 .sup-grid{gap:clamp(28px,4vw,40px)}
 .sup .sp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);grid-template-rows:repeat(4,auto) 1fr;column-gap:var(--gap);align-items:start}
 .sup .sp > a:first-child{grid-row:1 / -1}
 .sup .sp > :not(a:first-child){grid-column:2}
 .sup .portrait{margin-bottom:0}
}
/* Therapist pages on a tablet: the photo stays beside the text, a third of the width, and stays on screen while the text scrolls (no empty black beside a photo on its own) */
@media (min-width:600px) and (max-width:1099px){
 .pf-c .cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--gap);align-items:start}
 .pf-c .pf-photo{position:sticky;top:var(--head-gap);width:100%;max-width:none;height:auto;aspect-ratio:4/5}
 .pf .pf-black{min-height:0}
}

/* 20. The footer is the fine print and reads as such (Robin, Oct 16: on Fees "it all bleeds together"). Its text is a step quieter than the page's (the facts in --dim, the legal line darker still), and on the pages that end without a closing strip (Fees, Writing, Privacy) a hairline across the page's width marks where the page ends and the footer begins, the job the strip does elsewhere. */
footer.slim .foot,footer.slim .foot .line{color:var(--dim)}
footer.slim .foot .line.legal{color:#8C8273}
footer.slim .foot a{color:var(--dim)}
body:not(.p-home) footer.slim:not(.close) .foot{border-top:1px solid var(--rule);padding-top:var(--head-gap)}
/* Lines stop at the page's margins at every width, never run to the window's edge (Robin, Oct 16): the hairline above the footer and the one under Fees' "Sliding scale openings now" */
@media (max-width:860px){
 footer.slim .foot{width:var(--cw);margin-inline:auto;padding-inline:0}
 .p-fees .sect-h{width:var(--cw);margin-inline:auto;padding-right:0}
}
@media (max-width:860px){
 .pf-c .stack footer.slim .foot{width:auto}
 .p-privacy main .wrap{width:var(--cw);margin-inline:auto;padding-inline:0}
}
/* Therapist pages on a tablet (Robin, Oct 16): the booking button, phone, email and the small line sit under the photo, in the photo's column, and stay with it while the text scrolls; the black card keeps who she works with and the focus list. On a laptop and a phone the booking stays in the card. */
.pf-side,.pf-side-in{display:contents}
.side-contact{display:none}
@media (min-width:600px) and (max-width:1099px){
 .pf-side{display:block}
 .pf-side-in{display:block;position:sticky;top:var(--head-gap)}
 .pf-c .pf-photo{position:static}
 .side-contact{display:block;margin-top:18px}
 .side-contact .lines{display:flex;flex-direction:column;gap:6px;margin-top:14px}
 .side-contact .tel,.side-contact .mail{color:var(--head);align-self:flex-start;overflow-wrap:anywhere;font-size:15px}
 .side-contact .fallback{font-size:14px;line-height:1.5;color:var(--dim);margin-top:12px}
 .pf-with .contact{display:none}
}

/* 21. Email addresses (Robin, Oct 16): when one has to wrap it breaks after the @, and its underline (and the phone number's, to match) follows the words instead of running the full width of the box */
/* The underline under phone numbers and emails is drawn as a 1px line under the text (a background), not the browser's text underline: in Brave the email's underline did not paint until it was hovered (Robin, Oct 16). It still follows the words when an address wraps. */
a[href^="mailto:"],a[href^="tel:"]{--ul:var(--accent);border-bottom:0!important;padding-bottom:4px!important;text-decoration:none!important;background-image:linear-gradient(var(--ul),var(--ul))!important;background-repeat:no-repeat!important;background-position:0 100%!important;background-size:100% 1px!important;-webkit-box-decoration-break:clone;box-decoration-break:clone;overflow-wrap:normal!important}
.window:not(.pf-black):not(.person) a[href^="mailto:"],.window:not(.pf-black):not(.person) a[href^="tel:"]{--ul:var(--accent-ink)}
/* Where even the part after the @ can't fit (the narrow column under a photo on a tablet, a phone), it may break inside the domain; the underline still follows the words */
.side-contact a[href^="mailto:"]{overflow-wrap:anywhere!important}
@media (max-width:600px){a[href^="mailto:"]{overflow-wrap:anywhere!important}}
/* Therapist pages on a tablet, the foot (Robin, Oct 16): the closing strip and the footer run the full width of the page again, under both columns; the Get in touch card at the end steps aside, since the booking is always beside you under the photo */
@media (min-width:600px) and (max-width:1099px){
 .pf-c .stack{display:contents}
 .pf-c .cols{grid-auto-flow:row}
 .pf-c .cols > .pf-side{grid-column:1;grid-row:1 / span 5;align-self:stretch}
 /* span 5 = the black panel and the four stone cards (Who I work with, How I work, Who I am, Training), so the photo and booking stay beside you to the last card; it was 4 before Who I work with was added (Robin, Oct 16: "why does my image stop scrolling here?") */
 .pf-c .stack > .window{grid-column:2}
 .pf-c .stack > .pf-end{display:none}
 .pf-c .stack > .wood-foot,.pf-c .stack > footer{grid-column:1 / -1}
 .pf-c .cols{row-gap:var(--gap)}
 .pf-c .stack footer.slim .foot,.pf-c .cols > footer .foot{width:auto}
}

/* 22. The footer condensed (Robin, Oct 16: "why is the text so spaced"): tight lines, a small step between the facts and the legal line, items closer together */
footer.slim .foot{line-height:1.4}
footer.slim .foot p+p{margin-top:6px!important}
footer.slim .line>*{margin:1px 10px!important}

/* 23. The footer never leaves one thing alone on a line, and only adds a line when it has to (Robin, Oct 16, at tablet). Once the two lines no longer fit (below about 1080px), each breaks into pairs that belong together: address and Telehealth, then phone and email; the corporation and its director, then the two links and the year. A little larger than the condensed laptop footer ("a little TOO compacted now. and small"), the spacing between the condensed and the first try ("too spread out again"). Robin tried middle dots between the items and one size for all, and preferred this without. */
/* The copyright is always the last thing in the footer, at the end of the last line, at every width (Robin, Oct 16). */
@media (max-width:1080px){
 footer.slim .foot{font-size:14px;line-height:1.5}
 footer.slim .line.legal{font-size:12.5px}
 footer.slim .foot p+p{margin-top:6px!important}
 footer.slim .line{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 0!important}
 footer.slim .line>*{margin:0 12px!important}
 footer.slim .line::after{content:"";flex-basis:100%;height:0;order:1}
 footer.slim .line>:nth-child(n+3){order:2}
}

/* 24. The booking note on Therapists, said once under all the cards (Robin, Oct 16: the same note under each card "looks silly listed side by side", and was too wordy). It lines up with the cards' left edge, the fine-print size and grey the cards' own note had. */
.book-note{font-size:15px;line-height:1.5;color:var(--dim);margin-top:var(--gap)}

/* 25. No thin box around black (Robin, Oct 16: "the first place we have a thin box around black. do we need it?"): the Who I work with panel on the therapist pages sits straight on the black, as the Therapists cards do; its padding stays, so its words line up with the stone panel below. At every width (Robin, Oct 16: the box coming back on the laptop undid a fix). */
.pf .window.pf-black{outline:none}
/* With the box gone, the panel's words start at the top of the photo, not a box's padding below it (Robin, Oct 16: "who I work with sits a little low") */
.pf .window.pf-black{padding-top:0!important}
/* The licence under the name in the therapist pages' header, lighter (Robin, Oct 16: "the font of license is too heavy"): IBM Plex Sans 400, was 500 */
.pg-strip .wood-slice .lic{font-weight:400}
/* The therapist pages' header strip taller on a tablet (Robin, Oct 16: "header image is too small at this size"): 120px below 1100px, where it had shrunk to 84px; the laptop keeps its 104px */
@media (max-width:1099px){.pg-strip{--sh:120px}}
/* And on the laptop a bit taller too (Robin, Oct 16: "the hero image is too small on the laptop screen. bump it a bit"): about 125px at 1470 (was 104), never less than the tablet's 120 */
@media (min-width:1100px){.pg-strip{--sh:clamp(120px,8.5vw,128px)}}
/* The note under the booking on the therapist pages at tablet was as wide as the button above it, so it keeps clear of the column beside it (Robin, Oct 16). */
/* Then the button the full width of the photo above it, its edges on the photo's edges (Robin, Oct 16: the button "should be full width, or centered ... doesn't look right"); the note keeps its narrower measure */
@media (min-width:600px) and (max-width:1099px){.side-contact .row .btn{display:block;width:100%;text-align:center;white-space:normal;line-height:1.3!important;padding-inline:12px!important}.side-contact .fallback{max-width:15.5em}}
/* When the photo column is too narrow for "Book a free 20 minute call" on one line, the words wrap inside the button instead of running out of it (Robin, Oct 16: "we have an issue here") */
/* The Focus list on the therapist pages in two columns (Robin, Oct 16: "the spacing is sloppy here"): the third item had lost its top padding though it has a rule above it, so it sat on the line. Every item has the same room above and below its rule; only the first row, with no rule above, starts flush. */
@media (max-width:900px){
 .pf-black .focus li{padding:9px 0!important}
 .pf-black .focus li:nth-child(-n+2){padding-top:0!important}
 .pf-black .focus li:nth-child(3){padding-top:9px!important}
}
/* 26. The therapist pages, decided (Robin, Oct 16): the black panel has no heading, the facts start at the top of the photo; under it a stone card, Who I work with, in the person's own words (Robin keeps just his line, in the blue Shippori Mincho of a panel's opening line); then How I work. */
.pf-black .grp:first-child > dl:first-child{margin-top:0!important}
/* Therapist pages on the laptop: the photo and the black panel end one card gap above the bottom of the screen, so the next stone card starts right at the fold and none of it peeks up (Robin, Oct 16: "there's a little of the white card still showing"; they ended --head-gap, 29px, above it and the gap is 28px) */
@media (min-width:1100px){
 .pf-c .pf-photo{height:calc(100vh - var(--hh,260px) - var(--gap) + 2px)}
 .pf .pf-black{min-height:calc(100vh - var(--hh,260px) - var(--gap) + 2px)}
 /* (2px past the fold, so a rounding pixel never lets the card's edge show: Robin, Oct 16, "the white shouldn't show") */
 /* The black panel's content sits together at the top at its natural spacing, the rule one card gap below the booking and Focus one card gap below the rule; any spare height goes below Focus (Robin, Oct 16: "the focus should come up, and some of the black space should be below there. there's just this bizarre black area with a line") */
 .pf .pf-black{justify-content:flex-start!important}
 .pf-black .contact{margin:var(--gap) 0 0!important}
 /* room around the button (Robin: "why cramp around the button?"): a card gap above it, 20px below it */
 .pf-black .contact .lines{margin-top:20px!important}
 .pf-black .sep{margin:var(--gap) 0!important}
}
/* Therapist pages from tablet up (Robin, Oct 16; at laptop too after "we have this same alignment issue"): with no box around it, the black panel's words start at the column's edge, level with the stone cards' edges below (they sat indented by the old box's padding), and the panel ends where its last line ends, so the gap down to the next card is the usual card gap */
@media (min-width:600px){.pf .window.pf-black{padding:0!important}}
/* The name on the bio pages' header strip sits bottom left, as the title does in every other header on the site (Robin, Oct 16); it was centred when the strip was thinner */
.pg-strip .wood-slice .who{top:auto;bottom:clamp(14px,2vw,26px);transform:none}
/* 27. Tablet black is 24px (Robin, Oct 16, tried on his page then made site-wide: "it feels cramped ... 18 to 28 seems like a big jump? yes try 24", "if it's 24 then it should be 24 everywhere, right and left margins too"). From 600px up to where the scaling values pass 24 on their own (1000px), the gap between things, the black under the header, and the side margins are all 24px. */
@media (min-width:600px) and (max-width:1000px){:root{--gap:24px;--head-gap:24px}}
/* Focus labelled like Sees, Where and Fee on the bio pages at tablet (Oct 16): one more fact, not a section heading */
@media (min-width:600px) and (max-width:1099px){.pf-black .grp > .lab{font:300 16px/1.65 var(--sans);letter-spacing:normal;text-transform:none;color:var(--head)}}

/* 28. Ways in, on the Therapists page (Robin, Oct 16, a try): each card names the free call once ("Free 20 minute call", labelled like Sees) and offers it two ways side by side, Choose a time online and Text, phone and email under them. The Text button is the same size, outlined in the sky blue on black. */
.call-h{font-size:16px;color:var(--head);margin:0 0 10px}
/* the same on the bio pages (Oct 16): the two buttons side by side in the black panel, stacked full width under the photo at tablet */
.pf-black .contact .row{display:flex;flex-wrap:wrap;gap:10px}
.side-contact .row{display:grid;gap:10px}
.side-contact .call-h{margin-bottom:10px}
.wood .person .book .row{display:flex;flex-wrap:wrap;gap:10px}
:root .btn.btn-text{background:transparent!important;border-color:var(--accent)!important;color:var(--head)!important}
:root .btn.btn-text:hover,:root .btn.btn-text:focus-visible{background:var(--accent)!important;color:var(--ground)!important}
/* Services header, at every width (Robin, Oct 16: the title was hard to read on the fir; mirroring at some widths only was rejected): the crop sits a little lower on the photograph, and a scrim, a soft dark fade from the bottom-left corner, sits under the title so the bone type reads on the needles. Easy to take out once the photo is graded. */
.p-services .skylight.head img{object-position:50% 72%}
.p-services .skylight.head{position:relative}
.p-services .skylight.head::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 70% 90% at 0% 100%,rgba(0,0,0,.6),rgba(0,0,0,.3) 45%,rgba(0,0,0,0) 75%)}
.p-services .skylight.head .head-txt{z-index:1}
/* 29. The service pages at tablet (Individuals, Couples, Teens, Clinical consultation; Robin, Oct 16, tried on Individuals then "I thought we fixed this already" on Teens): the side photo column about a fifth of the width, running down beside the therapist cards, which stack there; no foot strip at tablet, the page ends with the cards and a larger black before the footer; a card's photo grows with its text so the words never run below it. Then on the laptop too (Robin, Oct 16: "keep the same on laptop and tablet where the column goes full and no landing strip"): from 600 up the cards sit beside the column and there is no foot strip; phone is still to come. The cards go two across only when each has room for its photo beside its words (520px), otherwise one per row. Each page sets --rows (essays) and --rows-t (essays + the cards). */
/* The side photo column is one fixed width, 120px, from tablet up, so it never jumps as the window crosses 1100 (Robin, Oct 16: "the individuals jumps narrow column to wider column from desktop to tablet. That's weird!"); it was a fifth of the width at tablet and 7vw up to 104px on the laptop. Phone keeps its own. */
/* then wider on the laptop without a jump (Robin: "there's room to go wider at laptop"): 120px up to 1100, growing smoothly to 180px at 1470 */
@media (min-width:600px){.p-service .colgrid{grid-template-columns:clamp(120px,calc(16.2vw - 58px),180px) minmax(0,1fr);gap:var(--gap)}}
/* The therapist cards inside the column grid (Oct 16): full width under the essays where they sit side by side; beside the lichen column at tablet, where they stack */
.p-service .colgrid > .tcards{grid-column:1 / -1;margin-top:calc(var(--head-gap) - var(--gap));padding:0}
@media (min-width:600px){.p-service .colgrid > .tcards{grid-column:2;padding-inline:0;grid-template-columns:repeat(auto-fit,minmax(min(100%,520px),1fr))}.p-service .colgrid:has(> .tcards) .tallcol{grid-row:1 / span var(--rows-t,4)}}
.p-service .colgrid > .foot-slice{grid-column:1 / -1;margin-top:calc(var(--head-gap) - var(--gap))}
@media (min-width:600px){.p-service .colgrid > .foot-slice{display:none}body footer.slim.close{margin-top:var(--breath)}}
/* (a try, Robin Oct 16: "let me see with no landing strip"): at tablet the page ends with the cards, the lichen column beside them; the foot strip shows on wider screens only */
/* Where the cards stack beside the lichen, a card's words never run below its photo (Robin's rule, Oct 16: "her text goes below her image"): the photo is at least 4:5 and grows taller with the text beside it, cropped at the sides */
@media (min-width:600px){@container (min-width:481px){.p-service .tcards .card-in > .pic{position:relative;width:100%;aspect-ratio:4/5;align-self:stretch}.p-service .tcards .card-in > .pic .portrait{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover}}}
/* With the cards inside the grid, the column itself stretches only beside the rows it spans (the essays; at tablet the cards too), and the photo inside it is what holds still while you scroll, so it never slides past the essays onto the cards (Robin, Oct 16: "well that's broken", the lichen showing under the cards at laptop width) */
.p-service .colgrid:has(> .tcards) .tallcol{position:relative;top:auto;height:auto;align-self:stretch;overflow:clip}
.p-service .colgrid:has(> .tcards) .tallcol img{position:sticky;top:0;height:100svh}
/* then narrower, about a quarter, then about a fifth (Robin: "I think it's too wide now", "still a little too wide"); the lichen also runs down beside the therapist cards where they stack (individuals.html) */
/* Below about 760px the corporation's name and the director can't share a line; rather than leave each alone on its own line, the legal line just flows: the corporation, then the director, the links and the year together (Oct 16) */
@media (max-width:759px){footer.slim .line.legal::after{display:none}}
/* The therapist cards at the foot of the service pages sit one gap (--head-gap) below the last panel, the same black as between the cards and the foot strip, so the cards are evenly framed (Robin, Oct 16: "why more space above her pic than below") */
body main section.tcards{margin-top:0!important;padding-top:var(--head-gap)!important}

/* 30. A short page keeps its footer at the foot of the screen (Robin, Oct 16: "writing needs the footer at the foot"): the page fills the window's height and the space before the footer grows */
.p-writing{min-height:100svh;display:flex;flex-direction:column}
.p-writing > main{flex:1 0 auto}
.p-writing > *{width:100%;box-sizing:border-box}
/* Clinical apprenticeship at tablet: the supervisor rows start on the page's edge, in line with the snag and the panels above, and one gap below the last panel, not indented and a larger black away (Robin, Oct 16) */
@media (min-width:600px) and (max-width:1099px){.sup{margin-top:var(--head-gap)}.sup-grid{padding-inline:0}.sup .sp{column-gap:var(--gap)!important}.snaggrid{gap:var(--gap)!important}}
/* Phone numbers and email addresses always look the same as each other, visited or not (Robin, Oct 16: the number showed its blue line and the email did not) */
.wood a[href^="mailto:"]:visited,.wood a[href^="tel:"]:visited,.pf-black a[href^="mailto:"]:visited,.pf-black a[href^="tel:"]:visited,.side-contact a[href^="mailto:"]:visited,.side-contact a[href^="tel:"]:visited{color:#EDE6D8!important;text-decoration-color:#7DB0E1!important}
/* Therapists, every width (Robin, Oct 16: the short header everywhere, not only at full screen): the slice moved so the title sits on the dark wood (here, where it has the last word over the page's own rule) */
.p-therapists .wrap > .wood-slice::before{background-position:0 38%!important}

/* 31. The Therapists page cards, one design (Robin, Oct 16: the card had collected four layouts, one per width range, so About jumped above the name, vanished, and words hung past the photo; "go for it"). From 600px up, the card changes once, by its own width, not the window's:
   - narrow card (under about 560px): the photo on top at the card's width (4:5, never taller than 420px), then name, licence, words, Sees and Where, then the booking; the name is the link, no separate About; the two cards' bookings line up.
   - wide card: photo left, the words beside it, About at the foot beside the photo, level with its bottom edge, the booking under both. The words never run past the photo: the photo grows taller with them. Phone (under 600) is still to come. */
@media (min-width:600px){
 body.p-therapists .wood>.windows{container:tcards / inline-size;align-items:stretch}
 /* the narrow card is the photo's width, so the words wrap at the photo's edge (Robin: "why is the text not wrapping at the edge of the card"); as many 264-330px cards per row as fit, so more therapists simply fill the row */
 body.p-therapists .wood>.windows{grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:clamp(28px,4vw,56px)!important}
 /* (and Robin: "looks like this [at 764], but with more black space"): the card stays the size it is at about 770, 345px, and wider windows add black between the two columns, not bigger photos; the cards stay on the page's outer edges */
 /* (then Robin, Oct 16: "just have two columns, make sure it has face and name, space them evenly, and keep the text in the column"): two even columns; the photo is the column's width and at most 420px tall, trimmed from the bottom only, so the face is always whole and the name shows below it */
 body.p-therapists .wood .person .pic{width:100%!important}
 body.p-therapists .wood>.windows>.person{display:flex!important;flex-direction:column!important;gap:0!important;float:none!important}
 /* (the words take any spare height, so both bookings sit at the foot of their cards; phone and email always on two lines in a narrow card, so the two bookings are the same height and start level) */
 body.p-therapists .wood .person .book .lines{flex-direction:column;align-items:flex-start;gap:6px}
 body.p-therapists .wood>.windows>.person::after{content:none!important}
 body.p-therapists .wood .person .side{display:block!important;float:none!important;width:100%!important;max-width:none!important;margin:0!important}
 body.p-therapists .wood .person .pic{position:relative;display:block;width:100%;aspect-ratio:4/5;max-height:420px;overflow:hidden}
 /* (the photo is never cropped and never bigger than it is at about 735px wide, 330px across: Robin, "don't like the cropped photos... the pics are just too big") */
 body.p-therapists .wood .person .pic .portrait{position:absolute;inset:0;width:100%!important;height:100%!important;max-width:none!important;aspect-ratio:auto!important;object-fit:cover;object-position:50% 0}
 body.p-therapists .wood .person .side .acts{display:none!important}
 /* the About link shows at every width, after Sees and Where, so there is always a sign of the fuller page (Robin) */
 body.p-therapists .wood .person .info::after{content:none}
 body.p-therapists .wood .person .info{display:block!important;flex:1 0 auto;margin:var(--gap) 0 0!important}
 body.p-therapists .wood .person .meta{margin-top:12px!important;padding-top:0!important}
 body.p-therapists .wood .person .book{clear:none!important;margin-top:var(--gap)!important}
}
@media (min-width:1250px){
 body.p-therapists .wood .person .pic{width:100%!important}
 body.p-therapists .wood>.windows>.person{display:grid!important;grid-template-columns:minmax(0,47.5%) minmax(0,1fr)!important;grid-template-areas:"pic info" "pic about" "book book"!important;grid-template-rows:auto 1fr auto!important;column-gap:clamp(24px,2.4vw,32px)!important;row-gap:0!important}
 body.p-therapists .wood .person .side{display:contents!important}
 body.p-therapists .wood>.windows>.person .pic{grid-area:pic!important;align-self:start;aspect-ratio:4/5;max-height:none;height:auto;min-height:0}
 body.p-therapists .wood>.windows>.person .side > .acts{display:flex!important;grid-area:about!important;align-self:end;margin:var(--gap) 0 0!important}
 body.p-therapists .wood>.windows>.person > .info{grid-area:info!important;margin:0!important}
 body.p-therapists .wood .person .book .lines{flex-direction:row;align-items:baseline;gap:4px 22px}
 body.p-therapists .wood>.windows>.person > .book{grid-area:book!important;margin-top:var(--gap)!important}
}
/* (in a card too narrow for both buttons on one line, they stack for both therapists, so the two bookings stay level) */
@media (min-width:600px){body.p-therapists .wood>.windows>.person{container:tcard / inline-size}@container tcard (max-width:340px){body.p-therapists .wood .person .book .row{flex-direction:column;align-items:flex-start}body.p-therapists .wood .person .book .mail{white-space:normal}body.p-therapists .wood .person .book .lines{min-height:4.6em}}}
/* the About link in the words (narrow cards) and under the photo (wide cards): one or the other shows */
.acts-in{display:none}
@media (min-width:600px){body.p-therapists .wood .person .acts-in{display:flex;margin-top:var(--gap)}}
@media (min-width:1250px){body.p-therapists .wood .person .acts-in{display:none}}
@media (max-width:599px){.acts-in{display:none!important}}
/* the wide cards: two across, each half the row. Robin (Oct 16): one switch, at 1250, set by the longest card quote (Sophia's); below it the photo on top, words under */
@media (min-width:1250px){body.p-therapists .wood>.windows{grid-template-columns:repeat(2,minmax(0,1fr))!important;align-items:start;column-gap:clamp(28px,4vw,56px)!important}}

/* 32. Therapists cards 900-1249 (Robin, Oct 16, to look at): the full-screen design (photo beside the words) carries on down to 900; the photo at most about 330px wide; if the words run longer than the photo, the photo grows taller and trims a little from the sides only; the card quote a size smaller in this range. Below 900, photo on top. */
@media (min-width:900px) and (max-width:1249px){
 body.p-therapists .wood>.windows{grid-template-columns:repeat(2,minmax(0,1fr))!important;align-items:start;column-gap:clamp(28px,4vw,56px)!important}
 body.p-therapists .wood>.windows>.person{display:grid!important;grid-template-columns:minmax(0,min(47.5%,330px)) minmax(0,1fr)!important;grid-template-areas:"pic info" "pic about" "book book"!important;grid-template-rows:auto 1fr auto!important;column-gap:clamp(20px,2.4vw,32px)!important;row-gap:0!important}
 body.p-therapists .wood .person .side{display:contents!important}
 body.p-therapists .wood>.windows>.person .pic{grid-area:pic!important;align-self:stretch;width:100%!important;aspect-ratio:auto;min-height:0;max-height:none}
 body.p-therapists .wood>.windows>.person .pic::before{content:"";display:block;padding-top:125%}
 body.p-therapists .wood>.windows>.person .side > .acts{display:flex!important;grid-area:about!important;align-self:end;margin:var(--gap) 0 0!important}
 body.p-therapists .wood .person .acts-in{display:none!important}
 body.p-therapists .wood>.windows>.person > .info{grid-area:info!important;margin:0!important}
 body.p-therapists .wood>.windows>.person > .book{grid-area:book!important;margin-top:var(--gap)!important}
 body.p-therapists .wood .person .book .lines{flex-direction:row;align-items:baseline;gap:4px 22px}
 body.p-therapists .wood .person .msg{font-size:16px}
}

/* 33. Phone menu (Robin, Oct 16: the five pages wrapped onto two lines on phones). Under 600px the menu folds behind the word Menu (nav.js), set like the menu links, at the right of the wordmark. It opens a full-screen black sheet: the wordmark and Close exactly where the wordmark and Menu were, then the five pages in Shippori Mincho at the wordmark's size, rising in one after another; the page you are on underlined in the sky blue. */
.menu-btn,.menu-sheet{display:none}
@media (max-width:599px){
 .has-menu{display:grid!important;grid-template-columns:minmax(0,1fr) auto;column-gap:20px;align-items:start}
 .has-menu > ul{display:none!important}
 .has-menu > :first-child{grid-column:1 / -1;grid-row:1}
 .has-menu .mark,.has-menu .mark-h{max-width:364px}
 /* Robin, Oct 16: a small plus instead of the word Menu, bottom right on the wordmark's last line; in the open sheet the same plus turns a quarter round into the close cross, in the same place */
 .menu-btn,.menu-close{display:flex;align-items:center;justify-content:flex-end;width:44px;height:44px;padding:0;margin:0;background:none;border:0;border-radius:0;color:var(--head);cursor:pointer;-webkit-tap-highlight-color:transparent}
 .menu-btn{grid-column:2;grid-row:1;align-self:end;margin-bottom:var(--ico-drop,-6px)}
 .menu-ico{position:relative;display:block;width:20px;height:20px}
 .menu-ico::before,.menu-ico::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;margin-top:-.75px;background:currentColor}
 .menu-ico::after{transform:rotate(90deg)}
 .menu-close .menu-ico{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
 .menu-sheet.is-open .menu-close .menu-ico{transform:rotate(45deg)}
 .menu-btn:focus-visible,.menu-close:focus-visible,.menu-sheet a:focus-visible{outline:1px solid var(--accent);outline-offset:2px}
 .menu-sheet{display:block;position:fixed;inset:0;z-index:1000;background:var(--ground);opacity:0;transition:opacity .32s cubic-bezier(.2,.7,.2,1);overflow-y:auto;overscroll-behavior:contain}
 .menu-sheet[hidden]{display:none}
 .menu-sheet.is-open{opacity:1}
 .menu-top{position:absolute}
 .menu-mark{display:block;font:800 28px/1.1 var(--serif);letter-spacing:-.005em;color:var(--head);text-decoration:none;width:var(--mark-w)}
 .menu-close{position:absolute;right:0;top:var(--btn-dy)}
 .menu-list{position:absolute;left:var(--list-left);right:var(--list-left);top:var(--list-top);list-style:none;margin:0;padding:0 0 48px}
 .menu-list li{opacity:0;transform:translateY(12px);transition:opacity .5s cubic-bezier(.2,.7,.2,1),transform .5s cubic-bezier(.2,.7,.2,1);transition-delay:calc(90ms + var(--i) * 50ms)}
 .menu-sheet.is-open .menu-list li{opacity:1;transform:none}
 .menu-list a{display:inline-block;font:800 28px/1.15 var(--serif);color:var(--head);text-decoration:none;padding:10px 0}
 .menu-list a[aria-current]{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:1px;text-underline-offset:9px}
 html.menu-open,html.menu-open body{overflow:hidden}
}
@media (max-width:599px) and (prefers-reduced-motion:reduce){.menu-sheet,.menu-list li,.menu-close .menu-ico{transition:none}}

/* 34. The footer a size up on phones (Robin, Oct 16, on his Pixel 9: "hella small"): facts 15px (was 14), the legal line 13.5px (was 12.5) */
/* and brighter: the legal line takes the facts' grey (--dim) on phones, where it was darker still (#8C8273); the laptop keeps the quieter legal line */
@media (max-width:599px){footer.slim .foot{font-size:15px}footer.slim .foot .line.legal{font-size:13.5px;color:var(--dim)}}

/* 35. Therapists cards on phones (Robin, Oct 16): the name sat right on the photo's bottom edge (the words' wrapper lets its pieces flow, so its own top margin was lost); one gap of black between the photo and the name */
@media (max-width:599px){body.p-therapists .person .portrait + .info > h2,body.p-therapists .person .info > h2:first-child{margin-top:var(--gap)!important}}

/* 36. The stone on phones (Robin, Oct 16, from four pairs tried across the site on his Pixel 9): a step deeper, #DAD6CE (was #EEECE8), so the jump from black to a panel that fills the screen is less harsh. The black stays pure. Tablet and laptop keep #EEECE8. */
@media (max-width:599px){:root{--panel:#DAD6CE}}

/* 37. Therapist pages on phones (Robin, Oct 16: the name on the wood "just looks busy"): the wood is a thin strip under the menu (130px with the same crop as the Therapists page's wood on phones, so the two read as one; 24, 48 and 72 were too thin), and the name and licence sit below it on black, at the wordmark's size, on the page's edge like everything else */
@media (max-width:599px){
 .pg-strip{--sh:130px}
 .pg-strip .wood-slice{height:auto;overflow:visible;background:none}
 .pg-strip .wood-slice::before{bottom:auto;height:var(--sh);background-position:0 38%}
 .pg-strip .wood-slice .who{position:static;transform:none;padding-top:calc(var(--sh) + var(--gap))}
 .pg-strip .wood-slice .who h1{font-size:28px;line-height:1.1;color:var(--head);text-shadow:none}
 .pg-strip .wood-slice .lic{color:var(--head);text-shadow:none}
}

/* 38. Titles on black under the header photo, on phones (Robin, Oct 16: on a phone the title was hard to read over Approach, Therapists, Couples and Individuals; the bio pages went this way first). The photo keeps its height and crop and shows clean; the title sits under it on black, at the wordmark's size, on the page's edge, one gap below the photo. Tablet and laptop keep the title on the photo. */
@media (max-width:599px){
 .skylight.head{height:auto!important;min-height:0!important;overflow:visible}
 .skylight.head > img,.skylight.head > picture > img{height:var(--hh,190px)!important}
 .skylight.head > picture{display:block}
 .skylight.head::after,#page-head::before{display:none!important}
 .skylight.head .head-txt{position:static!important;transform:none!important;padding-top:var(--gap);color:var(--head);text-shadow:none}
 .p-writing .head-slice,.p-fees .head-slice,body.p-therapists:not(.pg-strip) .wrap > .wood-slice{--th2:190px;height:auto!important;overflow:visible;background:none}
 body.p-therapists:not(.pg-strip) .wrap > .wood-slice{--th2:var(--th)}
 .p-writing .head-slice::before,.p-fees .head-slice::before,body.p-therapists:not(.pg-strip) .wrap > .wood-slice::before{bottom:auto;height:var(--th2)}
 .p-writing .head-slice h1,.p-fees .head-slice h1,body.p-therapists:not(.pg-strip) .wrap > .wood-slice h1{position:static!important;padding-top:calc(var(--th2) + var(--gap))}
 .skylight.head .head-txt h1,.p-writing .head-slice h1,.p-fees .head-slice h1,body.p-therapists:not(.pg-strip) .wrap > .wood-slice h1{font-size:28px;line-height:1.1;color:var(--head);text-shadow:none}
}

/* 39. Full bleed on phones (Robin, Oct 16, tried on Approach first, then: "so much better"; now every page). Photos and stone cards run edge to edge; the black shows only between them. Every line of text starts the same small distance from the screen's edge (--edge, 16px; 24 felt like too much indent with full bleed): wordmark, title, card words, quote, footer. */
@media (max-width:599px){
 :root{--g:0px;--edge:16px}
 .nav.wrap{padding-inline:var(--edge)}
 .skylight.head{width:100%!important;margin-inline:0}
 .skylight.head .head-txt{padding-inline:var(--edge)}
 main .wrap{padding-inline:0!important;width:100%!important;max-width:none!important}
 .window{padding-inline:var(--edge)}
 blockquote.pull{padding-inline:var(--edge)}
 footer.slim .foot{width:auto!important;padding-inline:var(--edge)}
 /* text straight on black takes the same var(--edge) line */
 .p-writing .head-slice h1,.p-fees .head-slice h1,body.p-therapists:not(.pg-strip) .wrap > .wood-slice h1,.pg-strip .wood-slice .who{padding-inline:var(--edge)}
 .p-home .defs,.p-home .find,.p-home .reach .info,.p-contact .reach > .info,.p-contact .reach > .details,.p-writing .lede,main .wrap.fees-line,.p-fees .openings > h2,.p-fees .op-grid,.sup-grid{padding-inline:var(--edge)!important}
 .pf .window.pf-black{padding-inline:var(--edge)!important}
 .stick > .wrap:not(.nav){padding-inline:0!important;width:100%!important;max-width:none!important}
 .p-home .nav{width:100%!important;padding-inline:var(--edge)!important}
 .person,.window.person{padding-inline:var(--edge)!important}
 /* the service pages' thin photo column down the left is dropped on phones, so the cards run edge to edge and their words sit on the same line as the title (the page's photo is the header just above) */
 .colgrid > .tallcol{display:none!important}
 .colgrid{grid-template-columns:1fr!important;gap:var(--gap)!important}
 .colgrid > *{grid-column:1 / -1!important}
 .colgrid > .window{padding-inline:var(--edge)!important}
}

/* 40. Clinical apprenticeship on phones (Robin, Oct 16: tried the tree column narrower and full height, then "too cramped on mobile, especially if someone bumps their font"): no column; each prospectus section its own stone card, edge to edge, with a slice of the snag between them */
@media (max-width:599px){
 .snaggrid{display:block!important}
 .snag{display:none!important}
 .prosp{background:none!important;padding:0!important;display:grid;gap:var(--gap)}
 .prosp .row{background:var(--panel);padding:var(--pad-read) var(--edge)!important;border-top:0!important}
}

/* 41. Individuals header on phones (Robin, Oct 16: "not interesting, we want orange in it"): a phone shows under half the band's width; the crop moves from the left (grey rock, kept dark for the title, which now sits below the photo on phones) to the orange lichen right of centre */
@media (max-width:599px){#page-head img{object-position:66% 100%!important}}

/* 42. Slices between the cards on the service pages, phones only (Robin, Oct 16: with the thin column gone, "add horizontal slices back between cards to keep it interesting"). 120px, as on Approach, from the page's own photograph at the photo's full width, at a different height each time. Teens: the grey rock below the ridge (Robin: fine to slice). Clinical apprenticeship: the snag, between the prospectus sections. */
.pslice{display:none}
@media (max-width:599px){.pslice{display:block;height:120px;background-color:var(--ground2);background-size:100% auto;background-repeat:no-repeat}}

/* 43. Photos of people are held in, never full bleed (Robin, Oct 16: "I don't think I want the therapists pics full bleed"). On phones, landscapes and textures run edge to edge as windows onto nature; a portrait sits on the text line, 16px in, like the words beside it. */
@media (max-width:599px){
 .pf .pf-photo,.pf-side-in > .pf-photo{margin-inline:var(--edge)!important;width:calc(100% - 2 * var(--edge))!important;max-width:none!important}
}

/* 44. Teens header on phones (Robin, Oct 16: "the white stone at the lip shows, that's the threshold idea"): a phone sees 60% of the band; the crop moves to its right end, where the boulder sits on the ridge */
@media (max-width:599px){.p-teens .skylight.head img,body:has(img[src*="granite-head"]) .skylight.head img{object-position:100% 50%!important}}

/* 45. The therapist cards at the foot of the service pages, on phones (Robin, Oct 16: the centred 200px portrait "doesn't look right"): a byline. A small portrait (120px, was 96: "a BIT bigger") on the text line with the name and licence beside it; the quote, Sees and the links under both at full width. As the supervisor rows on Clinical apprenticeship. */
@media (max-width:599px){
 .p-service .tcards .card-in{display:grid!important;grid-template-columns:120px minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:var(--edge);row-gap:0;align-items:start}
 .p-service .tcards .card-in > div{display:contents}
 .p-service .tcards .card-in > .pic{grid-column:1;grid-row:1 / span 3;width:120px!important;max-width:none!important;margin:0!important}
 .p-service .tcards .card-in > .pic .portrait{display:block!important;position:static!important;width:120px!important;height:auto!important;aspect-ratio:4/5;max-width:none!important;margin:0!important}
 .p-service .tcards .card-in h2{grid-column:2;grid-row:1;margin:0!important}
 .p-service .tcards .card-in .role{grid-column:2;grid-row:2;margin-top:6px!important;margin-bottom:0!important}
 /* just the photo with everything beside it (Robin, Oct 16: no Sees, no quote; the card is about who does this work, not a general card) */
 .p-service .tcards .card-in .msg,.p-service .tcards .card-in .meta{display:none!important}
 /* the About link beside the photo, on its bottom line (Robin: it was "floating in space at the end") */
 .p-service .tcards .card-in .acts{grid-column:2;grid-row:3;align-self:end;margin:0!important;padding:0!important;display:block!important;min-height:0!important;height:auto!important;line-height:1.2}
 .p-service .tcards .card-in .acts a{padding-bottom:2px;margin-top:0!important}
 /* the cards are a new section after the essays: one breath above the first card, the same black as between the two cards (Robin: "not enough before Robin") */
 .p-service .colgrid > .tcards{margin-top:calc(var(--breath) - var(--gap))!important}
 .p-service .colgrid > .tcards + .foot-slice{margin-top:calc(var(--breath) - var(--gap))!important} /* and the same black below the last card, before the closing strip */
}

/* 46. Black on phones, two sizes for every page (Robin, Oct 16: "those gaps SHOULD be rules for all mobile pages"; he can change them later). 16px (--gap) between things in one group: cards, slices, the header photo and the title. 40px (--breath) for a new section: before a group of people (therapist cards, supervisors, Fees' openings), between people, and before the closing strip at the foot of the page. */
@media (max-width:599px){
 body:not(.p-home) main > :last-child:has(> .strip:only-child),body:not(.p-home) main > .wrap.foot-slice{margin-top:var(--breath)!important}
 /* bio pages: the strip sits in a grid with a gap after the black Get in touch panel, whose own bottom padding is invisible on black */
 .pf-c .stack > .pf-end{padding-bottom:0!important}
 .pf-c .stack > .wood-foot{margin-top:calc(var(--breath) - var(--gap))!important}
 .p-fees .openings{margin-top:var(--breath)!important}
 .sup{margin-top:var(--breath)!important}
 .sup-grid{gap:var(--breath)!important}
}

/* 47. Fees header strip on phones (Robin, Oct 16: more black between the wordmark and the photo than on other pages): its bark was placed by a laptop formula that left a band of black at the strip's top on a phone. On phones the strip shows the same part of the photo (about 37% down) with no black. */
@media (max-width:599px){.p-fees .head-slice::before{background-position:0 95%!important}}

/* 48. Fees' sliding scale openings on phones match the therapist bylines on the service pages (Robin, Oct 16): a 120px portrait on the text line; the name (Shippori Mincho 22px) level with the photo's top and the licence under it; "About Sophia" on the photo's bottom line. The whole card stays one link. The licence on those bylines is the fine-print grey (--dim), readable on black (it was the darker grey meant for stone). */
.op-about{display:none}
@media (max-width:599px){
 .p-fees .op{grid-template-columns:120px minmax(0,1fr)!important;column-gap:var(--edge)!important;align-items:stretch!important}
 .p-fees .op img{width:120px}
 .p-fees .op-t{display:flex;flex-direction:column;align-items:flex-start}
 .p-fees .op-name{font-size:22px!important;line-height:1.2!important;font-weight:800!important}
 .p-fees .op-lic{font-size:15px!important;line-height:1.65!important;margin-top:6px!important}
 .p-fees .op-about{display:inline-block;margin-top:auto;font-size:15px;line-height:1.2;color:var(--head);border-bottom:1px solid var(--accent);padding-bottom:2px}
 .p-service .tcards .card-in .role{color:var(--dim)!important}
}

/* 49. Contact on phones: a Text us button beside the booking button (Robin, Oct 16), as the therapist pages have Text Robin and Text Sophia; it texts the practice number. Phones only for now. */
.p-contact .text-us{display:none!important}
@media (max-width:599px){
 .p-contact .reach .btns{display:flex;flex-wrap:wrap;gap:10px;max-width:none}
 .p-contact .reach .btns .btn{display:inline-block;width:auto}
 .p-contact .text-us{display:inline-block!important}
}

/* 50. The photo slices between cards on phones get a little more black around them (Robin, Oct 16: "need a little more black space to breathe"): 24px above and below (the cards' own gap is 16) */
@media (max-width:599px){.pslice,.prosp > .pslice{margin-block:8px}.p-approach .strata > .slice{margin-block:24px!important}}

/* 51. Text on phones, from the research Robin asked for (Oct 16): body text in IBM Plex Sans Regular (400), not Light (300), which fades at phone sizes, outdoors and for weaker eyes; the same 17px and line length. The smallest text goes up: the landing definitions 14 to 16px, the footer's legal line 13.5 to 14px. Small text links get a tap area of at least 44px tall without changing how they look. */
@media (max-width:599px){
 body{font-weight:400}
 .p-home .defs dd{font-size:16px!important}
 footer.slim .foot .line.legal{font-size:14px!important}
 .person .msg,.pf li,.p-writing .lede{font-weight:400!important}
 /* tap areas: an invisible margin around the small text links, so each is at least 44px tall to a finger (the footer's 26px, since its lines sit close) */
 a.lk,.acts a,.reach dd a,.lines a,.op-about,footer.slim .line > a{position:relative}
 a.lk::before,.acts a::before,.reach dd a::before,.lines a::before{content:"";position:absolute;inset:-12px -4px}
 footer.slim .line > a::before{content:"";position:absolute;inset:-6px -4px}
}

/* 46. Therapists cards on phones (Robin, Oct 18: "these pics still fill a little large?"): the photo 270px wide at his Pixel (412), lined up on the left under the heading, so the name shows on the first screen. Same 4:5 shape and light crop. */
@media (max-width:599px){body.p-therapists .wood .person .pic,body.p-therapists .wood .person .side{width:270px!important;max-width:100%!important}body.p-therapists .wood .person .portrait{width:270px!important;max-width:100%!important;height:auto!important}}
/* From 500 to 599 (Robin, Oct 18, picked over the photo growing with the screen: "definitely b!"): the photo stays 270 and the name, licence, Sees and Where sit beside it; the quote and the booking run full width under the photo, so no text hangs past its bottom edge. */
@media (min-width:500px) and (max-width:599px){
 body.p-therapists .wood>.windows>.person{display:grid!important;grid-template-columns:270px minmax(0,1fr);grid-template-rows:auto auto auto 1fr;column-gap:24px;align-items:start}
 body.p-therapists .wood .person .side{grid-column:1;grid-row:1 / span 4}
 body.p-therapists .wood .person .info{display:contents!important}
 body.p-therapists .wood .person .info > h2{grid-column:2;grid-row:1;margin-top:0!important}
 body.p-therapists .wood .person .role{grid-column:2;grid-row:2}
 body.p-therapists .wood .person .meta{grid-column:2;grid-row:3}
 body.p-therapists .wood .person .meta dd{margin-bottom:6px}
 body.p-therapists .wood .person .msg{grid-column:1 / -1;grid-row:5;margin-top:var(--gap)}
 body.p-therapists .wood .person .acts-in{grid-column:1 / -1;grid-row:6}
 body.p-therapists .wood .person .book{grid-column:1 / -1;grid-row:7}
}

/* 47. The phone stone also on phones turned sideways (Robin, Oct 18: "we don't want the color switching with rotation"). A sideways phone is wider than 600 but short and touch-driven, so it keeps #DAD6CE; laptops (mouse) and tablets (taller) keep #EEECE8. */
@media (orientation:landscape) and (max-height:500px) and (pointer:coarse){:root{--panel:#DAD6CE}}

/* 40. Therapist pages (Robin, Oct 21): the same as the landing photo, the width rules stay but not the height rule. On the laptop the photo and black panel still end at the fold, but on a short screen they no longer shrink below the photo's normal size (330px wide, 412px tall); they run past the fold instead and you scroll. */
@media (min-width:1100px){
 .pf-c .pf-photo{height:max(412px,calc(100vh - var(--hh,260px) - var(--gap) + 2px))}
 .pf .pf-black{min-height:max(412px,calc(100vh - var(--hh,260px) - var(--gap) + 2px))}
}

/* 41. Therapist pages on phones (Robin, Oct 21): the photo spans the width only up to 380px (its size on Robin's Pixel, as approved), so in a wider phone-layout window (up to 599px) it no longer grows huge. */
@media (max-width:599px){.pf .pf-photo,.pf-side-in > .pf-photo{max-width:380px!important}}