/* ================================================================ ALTHA ALCHEMY — Layout ================================================================ This is the approved mockup's stylesheet, namespaced to .ah-*, and it is the site's single source of page layout. It loads on every page, after theme.css. WHY IT IS SEPARATE. The homepage was first rebuilt by editing values into theme.css, and every fix had to beat a legacy rule that matched the same element: the SOMA events grid also matched the three story sections, the footer's compacting rules lost to declarations further down the file, and the copy columns drifted from the mockup's spans. The mockup is ~250 self-consistent lines; reconciling two systems was the actual problem, so the homepage now uses the mockup's rules verbatim and nothing in theme.css matches .ah-*. Colours, fonts, the page margin and the gap all come from the theme's tokens — this file declares no colour of its own. The site header and footer are shared with every page and are NOT here; they stay in theme.css. */ :root { --ah-gap: 20px; /* The display-line role: the ONE large line each section is allowed, set in the display face and sentence case. Five consumers: .ah-prose--lead p:first-child, .ah-pull, .ah-safe__line, .ah-words blockquote, .ah-begin__text h2. The mockup gave each its own clamp — 26/2.4/36, 28/2.8/42, 28/3/46, 26/3/44 and 30/3.2/48 — which spanned 26px to 33px at 1024px for what is one role, and read as too big at every step of it. Do not give a section its own size. Sized against the body copy rather than as free-standing display type. This was a hard constraint under Josefin Sans, whose x-height is .378em (OS/2 sxHeight) against Nunito's .486em — 22% lower — so it shouted in the capitals and mumbled in the lowercase, and its lowercase fell under the body copy's below 20.6px at a 16px body. Every face since has moved the same way, and MERRIWEATHER goes furthest of all: face x-height threshold at the 24px floor Josefin Sans .378em 20.6px 1.17x the body's x-height Jost .460em 16.9px 1.42x Playfair .515em 15.1px 1.59x MERRIWEATHER .555em 14.0px 1.71x (Threshold = the size below which the display face's lowercase falls under the body's. It is 16 x .486 / the face's x-height, and it moves with the BODY size — it was 23.1px for Josefin when the body was 18px.) So the constraint that set this clamp has stopped binding, and the opposite risk is the live one: at the 24px floor Merriweather's lowercase is 1.71x the body's, on a cap height that also grew this swap (.743 against Playfair's .708). These lines READ LARGER at the same px than under any face before them, and Merriweather widens that gap again rather than closing it. If they feel big after the swap, this clamp is the dial — and unlike Playfair, Merriweather DOES have an instance below 400 to fall back to if size alone isn't enough; see --ah-display-weight. This was briefly raised to 30-40 on 2026-09-19, as part of making the lead paragraph body copy and handing the section's large line to .ah-head h2. That did not work and was reverted the same day at Chris's call, along with the lead. Leaving it at 30-40 with the lead back in the display face would have made the intro LARGER than the version that prompted the complaint. */ --ah-display-line: clamp(24px, 2vw, 30px); /* Titles on the blocks that sit BELOW a section head — the service cards on the homepage, the two-up blocks on About, Events and the flexible builder. They are subordinate to the display line, so they have to measure smaller than it. At the mockup's 26px they did not: uppercase Josefin at 26px puts caps at 18.3px against 16.8px for the display line at its 24px floor, so a card title out-measured the section's own large line and an h3 came out bigger than the h2 under it. 22px gives 15.4px, clearing the floor by 1.4px. STILL CLEARS UNDER MERRIWEATHER, and by a slightly wider margin: cap height moved to .743em (up from Playfair's .708em), so 22px gives 16.3px against 17.8px for the display line at its 24px floor — clears by 1.5px, against Playfair's 1.4px. Re-check it on any face swap even so — it is a comparison between two tokens, and a face that moved cap height without moving x-height would invert it silently. Briefly clamp(24px,2.4vw,32px) on 2026-09-19, which only held while the display line was at 30-40. When that was reverted this had to come back with it, or a 30.7px card title would have sat above a 25.6px display line — the exact inversion the paragraph above exists to prevent. */ --ah-block-title: 22px; /* BACK TO 300, 2026-09-28: Merriweather's wght axis is 300-900, so the value every face before Playfair carried is available again. Playfair's axis started at 400 and forced this to 400 for that one trial — see the history this comment used to carry, kept below. Covers .ah-prose--lead p:first-child, .ah-pull, .ah-safe__line, .ah-words blockquote and .ah-begin__text h2 — the display lines, never a heading (those read --font-weight-heading, 400, unaffected by this token). Does NOT follow --font-family-display on its own; check this value against the new face's fvar table on every swap. HISTORY: while Playfair was the display face (2026-09-24 to 2026-09-28) this was 400, not by choice — Playfair's axis floor was 400, so 300 would have clamped silently and the display lines would have rendered one step heavier than the sheet implied, the Karla fault the @font-face note in theme.css is about. */ --ah-display-weight: 300; } @media (max-width:739px) { :root { --ah-gap: 12px; } } /* The mockup's global block is deliberately NOT carried over: theme.css already resets the box model, margins and link colours site-wide, and its `overflow-x:hidden` on was actively harmful here — an overflow value on body stops the viewport propagating the scroll, so the document scrolled inside the body box and window scrolling barely moved (measured: a request to scroll 1600px moved 28). Only the two values the homepage genuinely needs are kept, scoped to the page itself. */ .ah-home { color:var(--color-ink); font-family:var(--font-family-body); font-size:15px; line-height:1.5; } .ah-home img { display:block; max-width:100%; } /* This rule (0,2,0) beats the h1-h6 element rule in theme.css, so the whole homepage stayed at 400 no matter what --font-weight-heading said. Kept as an explicit hook, now pointing at the token instead of a literal. */ .ah-home h1, .ah-home h2, .ah-home h3 { font-weight:var(--font-weight-heading); } .ah-home a { color:inherit; text-decoration:none; } .ah-grid{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));column-gap:var(--ah-gap);padding-inline:var(--altha-gutter)} a.ah-u:hover,.ah-links a:hover{text-decoration:underline;text-underline-offset:4px} .ah-links{display:flex;flex-wrap:wrap;gap:14px;font-size:15px} .ah-links span{opacity:.45} @media (prefers-reduced-motion:reduce){.ah-bar{transition:none}} /* Opening: photo first, headline and booking links low left */ /* The hero fills the viewport exactly: the mockup's clamp(520px,56vw,780px) is 717px at a 1280 window, which on most laptops is deeper than the glass, so the headline sat below the fold and the opener had to be scrolled to be seen. svh, NOT vh or dvh. dvh tracks the mobile URL bar live, so every scroll that retracted the bar would grow the hero and re-crop the photograph mid-scroll; vh predates the unit and is the fallback. svh is the height with the browser chrome shown, and it never changes while scrolling. The min-height keeps the headline and links from colliding in a short landscape window, where 100svh can be under 400px. */ .ah-feature{position:relative;height:100vh;height:100svh;min-height:520px;overflow:hidden;color:#fff} /* Logged-in only: the admin bar is fixed over the top of the page, so a full viewport hero overflows by exactly its height. */ .admin-bar .ah-feature{height:calc(100svh - var(--wp-admin--admin-bar--height, 32px))} .ah-feature img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:46% 32%} .ah-feature::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,14,10,.62) 0%,rgba(10,14,10,.34) 14%,rgba(10,14,10,.08) 28%,rgba(10,14,10,0) 40%),linear-gradient(90deg,rgba(10,14,10,.55) 0%,rgba(10,14,10,.28) 36%,rgba(10,14,10,.04) 64%,rgba(10,14,10,0) 84%),radial-gradient(52% 40% at 100% 0%,rgba(10,14,10,.5) 0%,rgba(10,14,10,.22) 45%,rgba(10,14,10,0) 78%),linear-gradient(color-mix(in srgb,var(--ah-photo-tint) 6%,transparent),color-mix(in srgb,var(--ah-photo-tint) 6%,transparent))} /* The last layer above is the honey tint at 6% (2026-09-25), an EXPERIMENT for Chris to judge on the homepage hero, which was first left alone because it is the green canopy. Remove that one gradient to undo it. */ .ah-feature .ah-grid{position:absolute;inset:0;z-index:1;align-content:end;padding-block:0 clamp(30px,3.6vw,52px)} /* 18 of 24, widened from the mockup's 13 on 2026-09-19. The hero headline had a 52px ceiling against unrvld.com's 140px and sat small in the corner of a full-viewport photograph. 13 columns is 647px at 1280, and "TRANSFORMATION" — one unbreakable word — measures 614px at 64px type, so 13 columns capped the hero at about 64px however large the clamp said. 18 columns is 904px and carries the word to 94px. */ .ah-feature__title{grid-column:1 / span 18} /* The hero reads the leading token now. It carried .92 of its own, which was derived for CAPITALS — cap .700em over a .170em comma, floor .87 — and in sentence case that is a collision, not a tight setting: the ink spans 1.020em once a descender can sit over an ascender. See --leading-heading. This headline is the worst case on the site for it. "Breath. Energy." ends in a descender and "Transformation" opens on a cap, so the pinch is real at every width rather than theoretical. 1.17 clears it by .081em, 6.7px at the 83.2px this renders at 1280 — almost the same pixel clearance Jost's 1.1 gave, though the em figure moved for an unrelated reason (see --leading-heading). 1.089 is the hard floor if the hero is ever wanted tighter than the rest of the headings again. Below that the g of "Energy" touches the T below it. */ .ah-feature h1{font-family:var(--font-family-display);font-size:clamp(34px,6.5vw,96px);line-height:var(--leading-heading)} .ah-feature__title p.ah-links{margin-top:18px} /* Section scaffolding: title, 1px rule, small link right */ .ah-section{padding-top:clamp(88px,9vw,140px)} /* A section head is a title and a rule. The small link that used to sit on the right went on 2026-09-18: every one of them pointed at a page already in the nav, so it duplicated navigation rather than offering a route. */ /* NO RULE. Chris's call, 2026-09-24: the hairlines harden a page that is otherwise made of white space, and this one — a full-bleed 1px of INK under every heading on the site — was the loudest of them. The 13px of padding went with it: it existed to hold the heading off the rule, and folded into the margin below, which is bumped a step because the white space is now doing the separating on its own. */ .ah-head{grid-column:1 / -1;margin-bottom:clamp(32px,3.4vw,52px)} /* The section's LARGE line, raised from clamp(26px,2.1vw,32px) on 2026-09-19. It takes over the role the lead paragraph used to hold: the lead is body copy now, so the head is what carries the section. 32-52 keeps the longest head we ship on one line at desktop — "EVERYTHING BEGINS WITH FEELING SAFE" is 35 characters, 1052px at the 43.5px this resolves to at 1280, inside the 1212px full-bleed measure. The 32px floor is set by the display line's 30px floor: below that the two cross over on a phone. SENTENCE CASE from 2026-09-24 buys that fit room rather than costing it, and each serif swap since has spent a little of it back without threatening the fit: "Everything begins with feeling safe" measures 19.025em in Jost capitals, 14.742em in Jost sentence case, 15.679em in Playfair and 17.021em in MERRIWEATHER — 871px at the 51.2px this resolves to at 1280, still well inside the 1212px measure. The longest head on the site is the Reiki page's "One-to-one Reiki treatments for women" at 19.392em, 993px, which also fits, with 219px to spare. Both measured with uharfbuzz at wght 400, real shaping rather than summed advances — re-derive the same way on any future face swap; this margin is comfortable but not unlimited. */ .ah-head h2{font-family:var(--font-family-display);font-size:clamp(32px,4vw,52px);line-height:var(--leading-heading)} .ah-prose{font-size:16px;line-height:1.6;display:grid;gap:18px} /* Display type, as it always was. It was briefly made body copy on 2026-09-19 on the theory that a 45-word intro should not sit in the display face; that did not work and was reverted the same day at Chris's call. --ah-display-line went back to its original 24-30 with it, because leaving it at 30-40 would have made this intro LARGER than the version that prompted the complaint. */ .ah-prose--lead p:first-child{font-family:var(--font-family-display);font-weight:var(--ah-display-weight);font-size:var(--ah-display-line);line-height:1.17;text-transform:none} .ah-small{font-size:13.5px;color:var(--color-muted)} /* Intro: text offset right of the rule, not centred */ .ah-intro__body{grid-column:9 / span 12} .ah-intro__aside{grid-column:1 / span 6;font-size:13.5px;color:var(--color-muted)} @media (max-width:1023px){.ah-intro__body{grid-column:1 / -1}.ah-intro__aside{grid-column:1 / -1;margin-bottom:20px}} /* Liv's story: narrow measure, photo bleeding off the right edge */ .ah-story{margin-top:clamp(88px,9vw,140px)} .ah-story .ah-grid{align-items:start} .ah-story__text{grid-column:1 / span 11} /* Centred beside the photograph, as the events block does (2026-09-25). Only matters when the copy is SHORTER than the photo; when it is deeper the row is as tall as the copy and this does nothing. Desktop only: stacked, the text is display:contents in a flex column and has no box to align. */ @media (min-width:861px){.ah-story__text{align-self:center}} .ah-story__photo{grid-column:14 / -1} /* NOW 652/706, the events block's own ratio (2026-09-25). Chris found the 2:3 "too tall", tried 4:3, and preferred the events module's proportions as "more balanced", so every left-right block shares that one. What follows is the history of the 2:3 it replaced, kept because it explains why the number was 2:3 and why it is not any more. 2:3, measured off the approved mockup, NOT the 4/3 its stylesheet reads. Measured from the two full-page screenshots at the same scale (the page gutter is 52px in both, so they are directly comparable): the mockup's figure is 918x1400 device pixels against staging's 918x686 — identical width, double the depth. Whatever the mockup's own rule says, that is what it renders and what was approved. Change the ratio here and nowhere else; the image is cropped by the box. */ .ah-story__photo img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:60% 40%;border-radius:16px} /* THE PHOTOGRAPH SITS INSIDE THE CONTENT AREA (2026-09-25), 9 of 24 columns and no longer 12 bleeding off the edge — Chris's call: bleeding photographs read too big once the page came in from the edges. Inside the gutter every corner is on screen, so the radius is uniform 16px, and the grid keeps its padding on both sides at every width. STICKY: the copy on these blocks can run far deeper than a 9-column photo, so the photo pins under the header and the copy scrolls past it, released when the row ends. Sticky needs the photo to be a grid item that does not stretch (align-self:start) and a row as tall as the copy, which is what the grid gives it. Desktop only, and each block's own stacking breakpoint — 860px for this one — because stacked, the grid is a flex column for the session cards and a sticky figure there would pin across the whole section. `top` must not be set outside the media query: a sticky that loses its position but keeps its offset is the bug .altha-story__image had for months. */ @media (min-width:861px){.ah-story__photo{position:sticky;top:7rem;align-self:start}} .ah-story__photo figcaption{margin-top:10px;font-size:13px;color:var(--color-muted)} .ah-pull{margin-top:28px;font-family:var(--font-family-display);font-weight:var(--ah-display-weight);font-size:var(--ah-display-line);line-height:1.17;max-width:18ch} @media (max-width:860px){.ah-story__text,.ah-story__photo{grid-column:1 / -1}.ah-story__photo{margin-top:36px}.ah-story__photo img{border-radius:16px}} /* Safety: two columns of running text under one display line */ .ah-safe__line{grid-column:1 / span 15;font-family:var(--font-family-display);font-weight:var(--ah-display-weight);font-size:var(--ah-display-line);line-height:1.17;margin-bottom:34px} .ah-safe__cols{grid-column:1 / -1;columns:2;column-gap:clamp(30px,4vw,64px);font-size:16px;line-height:1.6} .ah-safe__cols p{margin:0 0 18px;break-inside:avoid} @media (max-width:739px){.ah-safe__cols{columns:1}.ah-safe__line{grid-column:1 / -1}} /* The one oversized line */ .ah-statement{position:relative;height:clamp(380px,40vw,600px);overflow:hidden;color:#fff;display:flex;align-items:flex-end;margin-top:clamp(88px,9vw,140px)} .ah-statement img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 62%} .ah-statement::after{content:'';position:absolute;inset:0;background:linear-gradient(rgba(12,16,12,.34),rgba(12,16,12,.34)),linear-gradient(color-mix(in srgb,var(--ah-photo-tint) 6%,transparent),color-mix(in srgb,var(--ah-photo-tint) 6%,transparent))} /* The ONE role where sentence case changed geometry rather than just letter shapes, and it needs both halves of the change or the line is CLIPPED. This is a single nowrap line, so leading cannot collide with anything — but .ah-statement is overflow:hidden with align-items:flex-end, so the h2's bottom edge is the section's bottom edge and any ink below it is cut off. The leading here is therefore a CLIPPING control, not a rhythm one, and it is the one place on the site where the two point in opposite directions. The sum, for whatever face is in --font-family-display: with a vertical box of (asc - desc) and a line box of L, the line box bottom sits at desc + (box - L)/2 from the baseline, and L must push that below the deepest descender. face asc/desc box deepest desc floor L ships Jost 1.070/-.375 1.445em -.230em 1.155 1.18 Playfair 1.082/-.251 1.333em -.188em 1.207 1.24 MERRIWEATHER 0.984/-.273 1.257em -.270em 1.251 1.28 NOTE WHAT'S DIFFERENT ABOUT MERRIWEATHER: its box is the SMALLEST of the three (1.257em, against Playfair's 1.333 and Jost's 1.445) and yet it ships the tallest floor. Jost and Playfair both design their typo descent deeper than any letter actually reaches — Playfair's box allows .063em of slack below the g/y before hitting glyph ink, Jost's .145em — so leading can sit inside the box and still clear. Merriweather's typo descent (-.273em) and its deepest real descender (-.270em, the g) are within three thousandths of each other: there is almost no slack, so the floor lands almost exactly at the box itself rather than under it. Reading either the descender alone or the box alone gives the wrong answer here, which is why the whole sum is written out — this face is the reason. padding-bottom stays at nought — the line box carries that space itself, and restoring the old clamp on top of the leading would be the same space twice. (This role needed the sum at all only because headings went sentence case on 2026-09-24. In capitals nothing descended past a comma and the fault could not appear — under Jost it was live and costing a descender 3.4px at 1280 and 11.6px at 1920.) */ .ah-statement h2{position:relative;z-index:1;width:100%;padding:0 var(--altha-gutter);font-family:var(--font-family-display);font-weight:400;white-space:nowrap;line-height:1.28;font-size:11vw} .ah-after-statement{padding-top:clamp(40px,4vw,64px)} .ah-after-statement .ah-prose{grid-column:9 / span 12} @media (max-width:1023px){.ah-after-statement .ah-prose{grid-column:1 / -1}} /* Sessions: bare 3:4 images running off the right edge */ .ah-rail{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100vw - 2 * var(--altha-gutter) - 3 * var(--ah-gap)) / 3.35);gap:var(--ah-gap);overflow-x:auto;scroll-snap-type:x mandatory;padding-inline:var(--altha-gutter);scroll-padding-inline:var(--altha-gutter);scrollbar-width:none} .ah-rail::-webkit-scrollbar{display:none} @media (max-width:739px){.ah-rail{grid-auto-columns:76vw}} /* FULL WIDTH ON THE CONTENT AREA (2026-09-25, Chris): from 740px the rail stops being a sideways scroller showing 3.35 cards and becomes a grid that shares the whole content width evenly — three cards are three columns, four are four, and a fifth wraps rather than shrinking them below 270px. Any number of cards works, which is the point: the count is the admin's. Under 740 the swipeable rail above is kept, because a phone has no room for columns. The scroll and snap machinery is switched off so nothing is left half-scrollable. */ @media (min-width:740px){.ah-rail{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));overflow:visible;scroll-snap-type:none}} .ah-card{scroll-snap-align:start;display:block} .ah-card .ah-img{aspect-ratio:4/5;background:var(--color-surface);overflow:hidden;border-radius:16px;position:relative} /* border-radius:inherit as well as the parent's own overflow:hidden clip — belt and braces. Relying on the clip alone left a hairline of .ah-img's own --color-surface background visible at the curve on staging: a real, commonly-hit rendering seam where a rounded overflow:hidden container clips a perfectly square child, and anti-aliasing at the arc doesn't quite meet the container's edge. Rounding the img to match closes the gap outright rather than depending on the browser's clip being pixel-exact. */ .ah-card .ah-img img{width:100%;height:100%;object-fit:cover;border-radius:inherit} /* The scoop: a quarter-circle notch cut into the photo's bottom-right corner, with the card's own arrow re-housed in a gold circle nested in the hollow — the Engage-reference device Chris asked for, 2026-09-25. Two flat shapes, no mask: .ah-card__scoop is a 64px square with ONLY its inward-facing corner rounded (border-radius:50% 0 0 0), so the shape itself is a square with one big quarter-circle bitten out of it. Anchored to the image's true corner (right/bottom:-1px, covering the 1px seam), it paints that corner white — opaque at the photo's actual edge, curving away as it moves toward the image's centre. .ah-img's own overflow:hidden clips the 1px it overhangs. The gold circle then sits on top, inside the notch, carrying the arrow that used to sit at the foot of the card. TWO CORRECTIONS caught after this first shipped. First: the page ground is NOT white — body's background-color is --color-background #F7F5F0 (theme.css), and there is no override on main or .ah-home, so a white notch left a faint seam against the real ground. Second: "the rail never sits on a tinted or forest band" was checked against seeded CONTENT, not against what the theme allows — page-flexible.php's 'rail' case renders inside whatever `$altha_band` the builder gives its section, and .ah-band--dark a.ah-card already recolours the card's link text for exactly that case a few rules below. Nothing seeded uses it today, but the code path is real, so the notch now follows the section's own background on all three grounds rather than assuming one. */ .ah-card__scoop{position:absolute;right:-1px;bottom:-1px;width:64px;height:64px;background:var(--color-background);border-radius:50% 0 0 0} .ah-band--tint .ah-card__scoop{background:var(--color-surface)} .ah-band--dark .ah-card__scoop{background:var(--color-forest)} .ah-card__badge{position:absolute;right:12px;bottom:12px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--color-gold);color:var(--color-ink);border-radius:50%;font-size:16px;line-height:1} .ah-card__badge svg{width:18px;height:18px;display:block} /* The same notch and badge on a Services photograph, scaled up to the picture: 88px scoop and 56px badge against the card's 64 and 40, on a photo about 1.6x the card's width. The frame is what they are positioned against (the figure itself is sticky, or static when stacked, and cannot be relied on to be the containing block), and it clips them to the photo's own 16px corners. The badge here is a