/* ⚠ THIS FILE IS NO LONGER GENERATED, AND THE HEADER THAT SAID IT WAS IS A LOADED GUN. Kept and corrected rather than deleted, because the instruction it carried — "edit the prototype and re-run, or adopt this file and delete the tool, but do not edit both" — was sound, and both is exactly what has happened. Originally generated from Design/directions/audience.py by Web/theme/tools/port.py. Measured 28 August: **18 selectors exist here and not in the prototype** — the whole `.pullquote` block (0.4.8), `.social` and `.follow` (0.4.8), `.signature h2` (0.4.8), and the three sections added in 0.4.17. Four exist in the prototype and not here. **So re-running port.py today would silently delete the pull-quote styling from five doors, the social links from the contact page, and this release.** Nothing would error; the CSS would simply be missing and the pages would render as unstyled versions of themselves. This file is the source of truth. The prototype is a historical record. port.py has not been deleted because that is RJ's call, not something to do inside an unrelated release — but it must not be run against this file. Flagged in _PROJECT-RECORD.md §13. */ /* The home page's h1 is two words — "Find yourself." — and is set at up to 104px to carry that. An audience headline is a sentence, and at 104px a sentence stacks into a column of fragments. Smaller here, and only here. */ /* The home page's h1 is two words — "Find yourself." — at up to 104px. This one is a fourteen-word sentence, and at 66px it stacked into five lines and read as a column of fragments. Smaller, and the copy column takes more of the grid so the line count comes down further. */ /* ── THE TYPE SCALE ON A DOOR PAGE ──────────────────────────────────────────── RJ, 26 August: *"The headlines all look similar sized and big. We need some typographic play for relief and editorial touch."* Measured on the live Individuals page before changing anything, and he was right in a way that was worse than it looked: · **every h2 rendered at 58px** — seven of them, identical · **the h1 rendered at 52px**, so the page's own title was the SMALLEST display size on the page. The hierarchy was inverted. · the challenge figure sat at 54px Seven display sizes inside a six-pixel band, and then a cliff straight down to the 21px lede with nothing between. That is why it read as flat: there was no scale, only one size used repeatedly. THE PRINCIPLE HERE IS THAT SIZE FOLLOWS THE JOB, NOT THE TAG. A heading that is an aphorism gets to be large because it is read in one glance. A heading that is a sentence gets smaller, because at 58px a 75-character sentence is not read, it is endured. So the scale is assigned per SECTION — a section's job does not change, which is what makes this deterministic rather than something to hand-tune per page. ⚠ THIS APPLIES TO EVERY DOOR, NOT ONLY INDIVIDUALS. Corporates had the same inverted hierarchy and gets the same correction. */ /* The page's own title, and now the largest thing on it. */ .hero h1{font-size:clamp(38px,5.2vw,74px);max-width:15ch} /* Aphorisms — short, declarative, read in one glance. These are the moments: "The work is meant to end." · "What they felt." ⚠ `noticed` WAS IN HERE AND IS NOT ANY MORE — 0.4.19. RJ, on the page as shipped: *"the header sizes are not working"*, and then, decisively, *"'Typical wellbeing programmes have limitations' — this onwards the sizes are good."* Everything from `limits` down is 38px with `voices` at 50, and he is content with it. **So the fault is confined to what sits above `limits`**, and the only heading up there that is not 38px was this one. *"Have you noticed?"* is three words. At 50px it was the loudest thing on the page after the h1 — louder than the answer the page turns on — for a section that only asks the reader to pause. It drops to the body tier. ⚠ I HAD ALSO DRAFTED A FULL RE-TIERING BY ARGUMENTATIVE IMPORTANCE — `method` up to 52, `voices` and `clients` down to 30, `close` to 44. **It was discarded unshipped once RJ said everything from `limits` onward was right.** Recorded because the reasoning was seductive and wrong in a specific way: it would have restyled `voices`, `clients` and `close` on Corporates and Individuals to solve a complaint about the top of one page. Fix what was reported. */ .blocks h2,.voices h2,.outcomes-section h2{font-size:clamp(30px,3.6vw,50px);max-width:16ch} /* ⚠ SUPERSEDED 0.4.18 — `argument` NOW SITS IN THE 26–38px TIER BELOW. The note that follows is kept because its reasoning was sound and the premise simply stopped being true. It capped `argument` at 33px on the grounds that the heading is *"always long"*. On 28 August RJ replaced the Institutions one with **"What most schools overlook."** — five words. The cap then made the smallest heading on the page sit above its longest section, with 38px headings under it: the inverted hierarchy this whole block exists to prevent, arrived at from the opposite direction. Lifted to 38px on all three doors rather than fixed with a per-page modifier. The longest surviving argument heading is Individuals' 92-character sentence, and 38px is a long way from the 58px the cap was written to protect it from — so the original concern does not bite at the new size. **A rule justified by the length of the copy needs revisiting when the copy changes.** The cap it replaced was already the second attempt at this. The first had `close` down here beside `argument`, and looking at two doors is what showed that to be wrong: the closing heading is a long sentence on Individuals but reads *"Begin here."* on Corporates — eleven characters. **Sizing by section works because a section's JOB is stable; it stops working the moment the same job is written at wildly different lengths.** That is exactly what has now happened to `argument`, which is why it has moved rather than been patched. The measure and leading survive the move, but the rule carrying them had to move WITH it. ⚠ `.argument h2{max-width:30ch}` sat above the tier rule at the same specificity — 0,1,1 either way — so the tier's `max-width:22ch` would have won on source order and quietly narrowed it. Caught by reading the cascade rather than by looking, because 22ch and 30ch differ by about one word a line. It now sits below the tier. */ /* Section headings that label rather than argue, and the closing ask. ⚠ `limits` AND `method` WERE ADDED IN 0.4.17 AND LEFT OUT OF THIS SCALE, WHICH IS THE FAULT THIS WHOLE BLOCK EXISTS TO PREVENT. Unsized, they fell through to main.css's bare `h2{font-size:clamp(34px,4.4vw,58px)}` and rendered at **58px** — the largest h2 on the site, on the two least important headings on the page, beside an `outcomes` heading at 38px. Measured at 1440, not noticed by eye, because a full-page screenshot scaled down hides a 20px difference. **A new section is not finished until it is in this list.** The note at the top of this stylesheet says size follows the section's job; a section that is in no size rule has no job assigned and silently takes the loudest one. They sit together and at the same size deliberately: they are a matched pair — three failings, three answers — and equal size is what lets a reader feel the pairing without being told about it. */ /* ⚠ `.practices h2` ADDED 0.4.67, AND ITS ABSENCE WAS A DEFECT SHIPPED IN 0.4.66. A section not listed here falls through to main.css's bare `h2{clamp(34px,4.4vw,58px)}` — so the new Therapies section rendered at 58px and was the LOUDEST heading on Individuals, above sections that matter more. Nothing errored. This is the identical mistake as Home's closing heading, made in the same session that wrote it down. **A new section must be added to a size rule as well as a margin rule; the margin note below catches only half of it.** ⚠ `.outcomes-section h2` LEFT THIS TIER IN 0.4.67 — RJ: *"this header needs to be more prominent. Its a key section."* It joined `.blocks`/`.voices` at 50px rather than taking a new size, so the page still has two heading tiers and not three. */ .session h2,.clients h2,.close h2, .limits h2,.method h2,.practices h2,.argument h2,.noticed h2{ font-size:clamp(26px,2.8vw,38px);max-width:22ch} /* Below the tier on purpose — see the note above. */ .argument h2{max-width:30ch;line-height:1.3} /* The one deliberate statement, kept below the h1 so it supports rather than competes. It carries its own two-tone treatment already. */ .challenge .figure{font-size:clamp(24px,2.9vw,42px)} /* ── SVã SIGNATURE SESSIONS ──────────────────────────────────────────────────── A named, priced session is a different object from anything else on the site: it has a heading, a paragraph, a number and an instruction, and a visitor compares two of them side by side. `.posts` is the nearest existing pattern and lives in journal.css, which this template does not load — so it is drawn here rather than borrowed, which is the whole reason the stylesheet map in functions.php exists. `auto-fit` rather than a fixed three columns: the page ships with TWO sessions because Oil Healing was pulled for want of a description, and it goes to three when that arrives. A hardcoded `1fr 1fr 1fr` would leave a hole today and need editing later. */ .signature{list-style:none;margin:0;padding:0;display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(28px,3.6vw,60px)} .signature li{border-top:1px solid var(--line);padding-top:22px} /* The picture sits ABOVE the hairline-topped block rather than inside it, so the rule still reads as the top edge of the written entry. A session without one simply starts at the rule — no gap, no placeholder. */ .signature figure{margin:0 0 20px} .signature figure img{width:100%;display:block; /* ⚠ A FIXED RATIO, BECAUSE THE PICTURES WILL NOT ALL BE THE SAME SHAPE. Measured on the live page: two frames are 1600×1067 and the drum circle is a 600×600 square borrowed from the old site, so with `height:auto` the square column ran 297×297 against 297×198 and pushed its heading **99px lower than the other two**. Three columns, three headings, none of them level. `object-fit:cover` crops rather than distorts, and 3:2 is chosen because it is the shape of the two photographs that were shot for this. The cost is a little headroom off the top and bottom of any square picture, which is the right thing to lose. The alternative — asking every future picture to arrive pre-cropped — is a rule nobody will remember. */ aspect-ratio:3/2;object-fit:cover} /* ⚠ h2 SINCE 0.4.8, AND THE SIZE IS UNCHANGED BY DESIGN. These were h3 and the page outlined H1 H3 H3 H3 H2 — a level announced that was never opened. The selector is (0,1,1) either way, so it still beats main.css's bare `h2{font-size:clamp(34px,4.4vw,58px)}` and the size below still wins. Size follows the section's job on this site, not the tag; that is what makes fixing an outline free. */ .signature h2{font-family:'Cormorant Garamond',serif;font-weight:300; font-size:clamp(22px,2.2vw,29px);line-height:1.25;margin-bottom:12px} .signature p{font-size:var(--t-detail);line-height:1.72;color:var(--soft);margin-bottom:14px} /* The price is the thing a visitor came to this page for, so it is set in the display face rather than in the body size the write-up uses. */ .signature .meta{font-family:'Cormorant Garamond',serif;font-size:19px; color:var(--ink);margin-bottom:14px} .signature .book{font-size:11px;letter-spacing:.13em;text-transform:uppercase; color:var(--sage);line-height:1.6;margin:0} .signature .book a{color:inherit} /* ── THE BOOKING CALL-OUT, 0.4.96 ──────────────────────────────────────────── ⚠⚠ SWITCHED OFF ON THE LIVE PAGE SINCE 6 SEPTEMBER AND THE CODE IS KEPT ON PURPOSE. RJ, an hour after asking for it to be resized: *"Lets drop this line. Makes no sense. Contact is already there in footer."* **It is off by an empty `cta` field, not by deleted code** — `svaflo_section_sessions_list()` renders no panel when both `cta` and `book_note` are empty, so switching it back on is one field in the admin and no release. **Do not "tidy" this rule away**; deleting it makes the return of one sentence a theme build. The styling below is the corrected version, not the one that shipped in 0.4.96 — smaller and vertically centred, per the instruction that immediately preceded the decision to drop it. If the panel ever comes back it comes back right. One panel where four identical booking lines used to sit, one under each therapy. It takes the two cells the last row leaves empty — measured live at 1710px, three columns of 297px and a 60px gap, so 654 × 283px of blank paper beside the fourth card. ⚠ IT KEEPS THE HAIRLINE AND TAKES NO GROUND OF ITS OWN, and both of those were the second answer. The first draft gave it `background:var(--paper-2)` and 28px of padding and called the hairline wrong in a comment — then the layout was injected into the live page and photographed, which showed two faults at once. **The panel was invisible**: `.sessions` already sits on paper-2, so the fill matched the ground exactly. And the padding pushed the text 30px in from the column edge, so the booking line no longer lined up with the therapy heading directly above it. ⚠ A FILL WOULD HAVE BEEN WRONG EVEN IF IT HAD SHOWN. The grounds alternate by rendered index — that is what moved this section onto paper-2 when the pullquote went below the list in 0.4.61 — so a hardcoded ground is a colour that is right until someone reorders a section. So: no fill, no padding, and the `border-top` and `padding-top` inherited from `.signature li` are left alone. The panel reads as part of the row it sits in, which is what it is. ⚠ IT STRETCHES AND CENTRES, AND THIS IS THE SECOND ANSWER TOO. 0.4.96 shipped `align-self:start` on the argument that centring one line in 283px would read as a rendering fault. RJ, 6 September: *"Line is too big. Should be smaller and centered vertically to Art Therapy block."* **He is right, and the argument was wrong because it assumed the 26px line** — at that size the panel was a second heading competing with the therapy beside it. Smaller, the centred line reads as a caption to the whole row rather than as a card with its content missing. ⚠ `padding-top:0`, AND WITHOUT IT THE CENTRING IS 12px OUT. `.signature li` opens with 22px of padding under its hairline, which pushes the flex box down and takes the optical centre with it. Zeroing it puts the line on the row's true middle. Measured live: the booking line centres at y=510 against Art Therapy's 509. */ .signature .book-callout{grid-column:span 2;align-self:stretch;padding-top:0; display:flex;flex-direction:column;justify-content:center} .signature .book-callout .note{font-size:var(--t-detail);line-height:1.72; color:var(--soft);margin:0 0 14px;max-width:34rem} /* 19px Cormorant — deliberately the same size as `.signature .meta`, the price and duration line inside the cards. It is the other piece of transactional detail on this page, so it is set at the same weight rather than at a size of its own. Not the 11px micro-label it was when there were four of it, and not the 26px statement 0.4.96 tried. */ .signature .book-callout .book{font-family:'Cormorant Garamond',serif; font-size:19px;letter-spacing:0;text-transform:none;line-height:1.4} /* A 2:3 frame is the tallest thing in the hero, so the columns start on the same line rather than floating against each other's middles — the same decision as the home page's hero. */ .hero .wrap{align-items:start;grid-template-columns:7fr 5fr} .hero-figure{max-width:400px;margin-left:auto} /* ⚠ A HERO WITH NO PICTURE, 0.4.17 — AND OMITTING THE FIGURE IS NOT THE FIX. The columns above are declared unconditionally, so a hero whose figure has been dropped keeps its 5fr track and simply leaves it empty. Measured on live `/institutions/` before this release: `639.328px 456.672px` on an 1180px wrap, with 457px of nothing beside 639px of squeezed copy. Signature Sessions guarded its figure in 0.4.16 and was reported fixed on that basis. It was not — the column was still standing. This rule is the part that was missing, and it is why the guard and the class always ship together. `!important` is deliberate and narrow. main.css declares `.hero .wrap` at the same specificity as this file and load order between them is set in build.py, which is exactly the collision documented at the foot of this stylesheet. A modifier that loses to the rule it exists to override is worse than no modifier. */ .hero--nopic .wrap{grid-template-columns:1fr !important} .hero--nopic .hero-copy{max-width:52rem} /* The size is shared — `p.lede` in build.py — but the measure is not, and should not be: the home hero's 34ch sits under a two-word headline in a narrow column, while this page's copy column is wider and the same measure left the text filling a little over half of it. That is what RJ meant by chunky. Wider here, size untouched. */ .hero-copy .lede{max-width:46ch} /* `p.person-note` carries a hairline above it, which is right on the home page where it separates a claim from the condition under it. Here the same class is used four times as a plain note beside full-width tables, and the short 52ch rule floating above each one reads as a mistake rather than as structure. Hairline off, measure opened. */ .argument .person-note,.session .person-note, .voices .person-note,.clients .person-note{border-top:0;padding-top:0;max-width:62ch} .outcomes + .person-note{margin-top:24px} /* The home lede sits under a two-word headline in a narrow column. On these pages it introduces a full-width table, and 32ch beside that looks starved. */ .argument .lede,.session .lede,.voices .lede,.blocks .lede, .limits .lede,.method .lede,.practices .lede,.outcomes-section .lede{max-width:48ch} /* The outcomes heading already carries a bottom margin sized for a list starting directly under it; with a lede between them that gap lands in the wrong place. Pulled up, and the lede carries the space instead. */ .outcomes-section .lede{margin:-14px 0 4px} /* ── THE SECTIONS ADDED FOR SCHOOLS & INSTITUTIONS, 0.4.17 ──────────────────── ⚠ ALL THREE NEED THEIR HEADING MARGIN SET EXPLICITLY, AND THIS IS THE FOURTH TIME. main.css resets `h1,h2,h3,p,ul,figure,blockquote{margin:0}`, so a new section's heading sits flush against whatever follows it — measured at 0px on `.team`, on `.blocks`, and it would have happened here three more times. The note above `.session h2` says so and was written after the second occurrence. The lists themselves need nothing: `limits` and `method` both render `dl.outcomes`, which is already styled above. That is the whole reason the pair was built on that class rather than on `.facts`. */ /* ⚠ `.practices` JOINS THESE TWO, AND IT IS THE FIFTH TIME THIS FILE HAS HAD TO SAY IT: main.css resets h2 margins to 0, so a new section's heading sits flush against whatever follows unless it is listed here. Measured at 0px on `.team`, on `.blocks`, and it would have happened again on `.practices`. The list itself needs nothing — it renders `dl.outcomes`, already styled. */ .limits h2,.method h2,.practices h2{margin:12px 0 22px;max-width:24ch} .limits .lede,.method .lede,.practices .lede{margin-bottom:4px} /* ── THE PRACTICE GROUPS — 0.4.78 ───────────────────────────────────────────── Angira's revised master list arrives in two named groups: the sessions she offers, and the one practice she offers as a TEACHER of it. `.tgroup` is the existing group wrapper, used by About's training register and by the FAQ. ⚠ ITS STYLING DOES NOT REACH THIS PAGE, AND THAT IS WHY THIS BLOCK EXISTS. `.tgroup` is declared in `about.css`, which `functions.php` loads for the `about` and `faq` templates only; an audience door loads `audience.css`. The class was reused for the markup, not inherited for the look — reusing the name without shipping the rules would have rendered two 16.5px paragraphs where two tracked sage headings belong. The h3 treatment is copied deliberately rather than invented: the same content — HER PRACTICES, in named groups — already renders this way on About, under ENERGY AND SUBTLE-BODY PRACTICE. Two pages, one voice. ⚠ `.outcomes` LOSES ONLY ITS TOP MARGIN, NOT ITS BOTTOM ONE. It ships `margin:34px 0 30px`; the 34px is what separated the list from the lede, and inside a group that job belongs to the h3 instead — leaving it would set the list 34px below its own heading. The 30px stays. ⚠ THE 24px IS RESTORED BECAUSE THE WRAPPER BREAKS THE SELECTOR. `.outcomes + .person-note` at line 240 is an ADJACENT-SIBLING rule, so a `.tgroup` between the list and the note stops it matching and the note silently loses its space. `svaflo_section_audience_practices()` carries the same warning: the single-untitled-group case emits NO wrapper at all and keeps the 0.4.77 markup byte for byte, so only the grouped case needs this. ⚠ AND THE RESULTING GAP IS 30px, NOT 54px — THIS COMMENT SAID `30+24` UNTIL IT WAS MEASURED ON THE LIVE PAGE. The two margins are ADJACENT SIBLINGS and collapse to max(30,24). `.tgroup` has no padding or border, so the list's 30px collapses straight through it. **The rhythm is therefore identical to 0.4.77, which is the right outcome — but it was right for a reason the comment had wrong**, and at these values the rule below changes nothing it is not protecting against: it only starts to matter if the note's margin ever goes above 30. Measured 30px at 1710 and at 375. */ .practices .tgroup{margin-top:34px} .practices .tgroup + .tgroup{margin-top:clamp(38px,4.5vw,64px)} .practices .tgroup h3{font-size:13px;letter-spacing:.16em;text-transform:uppercase; font-family:Mulish,sans-serif;font-weight:400;color:var(--sage);margin-bottom:14px} .practices .tgroup .outcomes{margin-top:0} .practices .tgroup + .person-note{margin-top:24px} /* ── HAVE YOU NOTICED?, RELAID 0.4.19 ───────────────────────────────────────── RJ: *"Have you noticed? section looks sparse and bad."* It was. A three-word heading and four questions in a 46ch column, left-aligned in an 1180px band — **about 40% of the width carrying content and the rest empty**, between two full-width sections. Nothing was wrong with it in isolation; it was wrong beside its neighbours. Two columns fixes it without adding anything: the question goes left, the four answers-to-oneself go right, and the band is used. It is the same 5fr/7fr relationship as the hero, which is where a reader has just come from. ⚠ `.wrap` IS SHARED AND CARRIES THE PAGE GUTTERS. Overriding `display` on it is safe — `.hero .wrap` already does exactly this — but the columns must collapse in the phone block at the foot of this file, or the questions get a 170px column and set one word a line. */ .noticed .wrap{display:grid;grid-template-columns:4fr 7fr; gap:clamp(28px,4.5vw,64px);align-items:start} /* ⚠ NO `max-width` HERE, AND THE FIRST VERSION HAD 11ch. The column is already the constraint; a ch-cap on top of it broke "Have you noticed?" onto two ragged lines inside a column wide enough for one, and put the emptiness the two-column layout was meant to remove straight back — this time inside the heading's own cell. Let the grid do the measuring. */ .noticed h2{margin:0;max-width:none;text-wrap:balance} .noticed .eyebrow{grid-column:1/-1;margin-bottom:0} /* THE QUESTIONS. A run of questions the reader answers to themselves, so they are set as statements of their own rather than as a bulleted list: a bullet makes four questions look like four items on an inventory, and the section works by sounding like someone asking. ⚠ NO `list-style`, BUT STILL A `