/* ============================================================= ArteVia — shared stylesheet for every page ------------------------------------------------------------- Where two pages disagreed, the homepage wins. The only exceptions are marked PAGE MODIFIER and explained inline. ============================================================= */ /* ------------------------------------------------------------- 0 · Fonts — self-hosted, deliberately ------------------------------------------------------------- These were loaded from fonts.googleapis.com, which sends every visitor's IP address to Google before the page renders. A German court has held that this breaches GDPR without consent, and this site publishes a privacy policy saying it uses no trackers. Serving the files ourselves makes that sentence true and removes a render-blocking third-party request. Both faces are SIL Open Font License 1.1 — redistribution is permitted. Latin subset only, woff2 only, 44KB total. Marcellus © Astigmatic. Jost © The Jost Project Authors. ------------------------------------------------------------- */ @font-face{ font-family:'Marcellus';font-style:normal;font-weight:400;font-display:swap; src:url('fonts/marcellus-latin-400-normal.woff2') format('woff2'); } @font-face{ font-family:'Jost';font-style:normal;font-weight:300;font-display:swap; src:url('fonts/jost-latin-300-normal.woff2') format('woff2'); } @font-face{ font-family:'Jost';font-style:normal;font-weight:400;font-display:swap; src:url('fonts/jost-latin-400-normal.woff2') format('woff2'); } @font-face{ font-family:'Jost';font-style:normal;font-weight:500;font-display:swap; src:url('fonts/jost-latin-500-normal.woff2') format('woff2'); } /* ------------------------------------------------------------- 1 · Tokens ------------------------------------------------------------- */ :root{ --bone:#F7F1EC; --sand:#EBE0D6; --sand-deep:#DCCBBA; --olive:#3E4A34; --olive-soft:#6E7860; --terracotta:#9C5B5A; --ink:#2E2A28; --ink-soft:#55493F; --line:#D9C9BA; /* the one light green on the site. It was already here as a raw hex inside .way-btn; this names it rather than adding it. 5.80:1 on olive. */ --sage:#C7CEBA; --nav-h:72px; /* type scale — every step has one job */ --t-micro:11.5px; /* labels inside a component */ --t-small:13.5px; /* nav, footer, page eyebrows */ --t-body:16.5px; /* all body copy */ --t-lead:19px; /* lead paragraphs */ --t-h3:21px; /* card titles */ --t-statement:24px; /* pull quotes */ --t-h2:30px; /* section headings */ --t-h1:clamp(38px,4.8vw,54px); /* spacing scale — 8px base */ --s-1:8px; --s-2:16px; --s-3:24px; --s-4:32px; --s-5:40px; --s-6:56px; --s-7:72px; --s-8:96px; /* reading measure — overridden per page type below */ --measure:1080px; } /* ------------------------------------------------------------- 2 · Reset and base ------------------------------------------------------------- */ *{box-sizing:border-box;margin:0;padding:0;} html{scroll-behavior:smooth;scroll-padding-top:var(--nav-h);} /* 300 stays. Tried 400 and it read heavy against Marcellus — the light weight is what keeps the body quiet under the serif headings. Don't "fix" this. */ body{ font-family:'Jost',sans-serif;font-weight:300; color:var(--ink);background:var(--bone); line-height:1.6;font-size:var(--t-body); -webkit-font-smoothing:antialiased; } h1,h2,h3{ font-family:'Marcellus',serif;font-weight:400; letter-spacing:0.01em;line-height:1.2; } a{color:inherit;} /* STANDING RULE — a link never breaks across two lines, at any width. Applies to every link that is a short phrase or a call to action. */ .cta, .more, .contact-facts dd a, .pkg-more a, .nav-links a, .nav-panel a, footer a{ white-space:nowrap; } /* ------------------------------------------------------------- 3 · Layout ------------------------------------------------------------- */ .shell{max-width:var(--measure);margin:0 auto;padding:0 40px;} /* --s-7, not --s-8. Every section pads top and bottom, so at a colour boundary the two stack and you see 192px of empty band rather than 96. 72 + 72 = 144 is a boundary you can read as one gap. */ section{padding:var(--s-7) 0;} /* sections with little in them get less. Trusted by is a heading and a row of logos; a full section's padding around it left it marooned. */ .tight{padding:var(--s-6) 0;} .alt{background:var(--sand);} /* PAGE MODIFIER — reading measure. Long-form prose at 1080px runs to ~140 characters a line, which is unreadable. These pages keep their narrower measure; everything else about them follows the homepage. */ body.page-legal{--measure:760px;} /* About runs at the homepage measure like every other section, prose column ~67 characters. It was held at 1000 for a while, splitting the difference with the 900 it had as its own page — but that page is gone and is not coming back, so there is nothing left to split. Don't reinstate a modifier here without a reason that exists. */ /* the nav bar spans the full width regardless of page measure */ .nav .shell{max-width:1080px;} /* ------------------------------------------------------------- 4 · Navigation ------------------------------------------------------------- */ .nav{ position:sticky;top:0;z-index:60; height:var(--nav-h); background:rgba(251,248,243,0.86); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid transparent; transition:border-color .3s, background .3s; } .nav.scrolled{border-bottom-color:var(--line);} .nav .shell{height:100%;display:flex;align-items:center;justify-content:space-between;} /* wordmark — placeholder for a proper logo */ .mark{display:flex;align-items:center;gap:11px;text-decoration:none;} .mark .wordmark{ font-family:'Marcellus',serif;font-size:16px; letter-spacing:0.3em;text-transform:uppercase; color:var(--olive);transition:color .25s; } .mark:hover .wordmark{color:var(--terracotta);} .nav-links{display:flex;align-items:center;gap:30px;} .nav-links a{ font-size:var(--t-small);letter-spacing:0.13em;text-transform:uppercase; color:var(--ink-soft);text-decoration:none; padding:6px 0;position:relative; transition:color .25s; } .nav-links a::after{ content:"";position:absolute;left:0;bottom:0; width:0;height:1px;background:var(--terracotta); transition:width .3s; } .nav-links a:hover{color:var(--terracotta);} .nav-links a.active{color:var(--terracotta);} .nav-links a.active::after{width:100%;} .nav-links a.nav-cta{ color:var(--olive);border:1px solid var(--line); padding:9px 20px;border-radius:999px; transition:background .25s,color .25s,border-color .25s; } .nav-links a.nav-cta::after{display:none;} .nav-links a.nav-cta:hover{background:var(--olive);color:var(--bone);border-color:var(--olive);} /* hamburger — only rendered on pages with a full menu */ .nav-toggle{ display:none;background:none;border:0;cursor:pointer; width:40px;height:40px;padding:9px 8px; align-items:center;justify-content:center;flex-direction:column;gap:5px; } .nav-toggle span{ display:block;width:22px;height:1.4px;background:var(--olive); transition:transform .3s, opacity .2s; } .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.4px) rotate(45deg);} .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;} .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.4px) rotate(-45deg);} .nav-panel{ display:none; position:fixed;left:0;right:0;top:var(--nav-h); background:var(--bone);border-bottom:1px solid var(--line); padding:var(--s-2) 0 var(--s-4);z-index:55; } .nav-panel.open{display:block;} .nav-panel a{ display:block;padding:15px 40px; font-size:var(--t-body);letter-spacing:0.1em;text-transform:uppercase; color:var(--ink-soft);text-decoration:none; border-bottom:1px solid var(--line); } .nav-panel a:last-child{border-bottom:0;color:var(--terracotta);} /* ------------------------------------------------------------- 5 · Footer ------------------------------------------------------------- */ footer{ padding:var(--s-4) 0 var(--s-6); display:flex;justify-content:space-between; font-size:var(--t-small);letter-spacing:0.04em; color:var(--olive-soft); } footer a{color:var(--olive-soft);text-decoration:none;} footer a:hover{color:var(--terracotta);} /* ============================================================= 6 · Homepage ============================================================= */ /* hero — type only, no portrait */ .hero{ text-align:center; padding:clamp(88px,12vw,136px) 0 clamp(72px,9vw,104px); } .eyebrow{ font-size:var(--t-small);letter-spacing:0.22em;text-transform:uppercase; color:var(--terracotta);margin-bottom:var(--s-3); } /* 24ch is the width at which this headline lands on two lines instead of three. 17ch and 20ch both broke it three ways — the earlier widening changed where the breaks fell without removing one. balance keeps the two lines even, and stops a short orphan if the wording changes. */ /* 30ch, not 24ch. The headline and the sub swapped places, and the new h1 is 68 characters against the old one's 49 — at 24ch it broke over three lines. 30ch brings it back to two, and balance keeps them even. */ .hero h1{ font-size:clamp(34px,4.2vw,48px);margin:0 auto 24px; max-width:30ch;line-height:1.16;text-wrap:balance; } /* the italic followed "handled." down from the h1 into the sub */ .hero h1 em, .hero-sub em{font-style:italic;color:var(--olive);} /* 62ch ~= 590px, just wider than the h1's 24ch measure and just wider than this sentence needs — so the headline takes two lines, the sub takes one, and both blocks are the same width. 40ch was set against the old narrower h1 and now wraps the sub for no reason. */ .hero-sub{ font-size:var(--t-lead);color:var(--ink-soft); line-height:1.5;max-width:62ch;margin:0 auto 42px;text-wrap:balance; } .cta{ display:inline-block;font-size:var(--t-small); letter-spacing:0.14em;text-transform:uppercase; color:var(--olive);text-decoration:none;padding-bottom:7px; border-bottom:1px solid var(--olive); transition:color .25s,border-color .25s,letter-spacing .25s; } .cta:hover{color:var(--terracotta);border-color:var(--terracotta);letter-spacing:0.19em;} /* 32ch, not 22ch. The old cap was narrower than the longest heading on the site, so "What I Can Take Off Your Plate" was forced to wrap and left "Plate" alone on the second line. 32ch fits it on one; the cap stays so a future longer heading can't run the full 1080px. text-wrap:balance is the safety net — anything that does wrap splits evenly instead of orphaning a word. Ignored by older browsers, which simply wrap as before. */ /* sentence case, and a step up from --t-h2. Title Case in Marcellus stacks a lot of capitals in a serif, which was most of the heaviness. */ .sec-h{ font-size:32px;color:var(--olive); margin:0 auto var(--s-6);max-width:32ch;text-align:center; text-wrap:balance; } .more{ display:inline-block;margin-top:32px; font-size:var(--t-small);letter-spacing:0.16em;text-transform:uppercase; color:var(--olive);text-decoration:none; border-bottom:1px solid var(--line);padding-bottom:6px; transition:color .25s,border-color .25s; } .more:hover{color:var(--terracotta);border-color:var(--terracotta);} /* the whole joke in one system: a key signature of admin, then a bar of rest */ /* ---- the notation figure ---- Built from parts: every piece is a in , placed with . Deleting an icon is deleting one line. --fig-bg is the colour the icons knock out of the stave with. It has to match whatever section the figure sits in — change it in one place, not seven. */ .bar-fig{ display:block;width:100%;max-width:720px;height:auto;margin:0 auto; --fig-bg:var(--sand); } .bar-fig .stv{stroke:var(--olive);stroke-width:1;opacity:.4;} .bar-fig .barline{stroke:var(--olive);stroke-width:1.4;opacity:.7;} .bar-fig .barline-thick{fill:var(--olive);opacity:.7;} .bar-fig .rest{fill:var(--terracotta);} /* three roles, and only three: the icon body, the knockout behind it, and the detail drawn back out of the body in the knockout colour */ .bar-fig .fg{fill:var(--olive);} .bar-fig .ko{fill:var(--fig-bg);} .bar-fig .ko-line{ fill:none;stroke:var(--fig-bg);stroke-width:1.8; stroke-linecap:round;stroke-linejoin:round; } /* the £ is the real glyph from Jost rather than nine hand-drawn beziers, which at 19px across read as a smudge */ .bar-fig .ko-text{ fill:var(--fig-bg);font-family:'Jost',sans-serif;font-weight:400; text-anchor:middle; } /* labels are HTML now. Placed on the true bar centres — 221 and 659 of the 900 viewBox — rather than at a rough 25% and 75%. */ .bar-wrap{margin-top:var(--s-8);} .bar-labels{ position:relative;max-width:720px;margin:var(--s-2) auto 0;height:1.4em; } .bar-labels span{ position:absolute;transform:translateX(-50%); font-size:var(--t-micro);letter-spacing:0.22em;text-transform:uppercase; color:var(--terracotta); } .bar-labels span:nth-child(1){left:24.6%;} .bar-labels span:nth-child(2){left:73.2%;} /* ---- how it works: two states across the top, the process left to right ---- States answer "what changes", the diagram answers "how" — outcome first, mechanism second. Running the flow horizontally uses the width the section already has instead of stacking into a tall thin column. */ .states{ display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-3); margin-bottom:var(--s-7); } /* A hairline, not a filled box. Two reasons. The six cards above are already bordered blocks, and a second set directly below read as more of the same. And these three sentences run 2, 4 and 3 lines — inside boxes the grid stretches all three to the tallest, so the first carries ~50px of dead space. A rule aligns the tops without making the difference visible. */ .shift-col{ border-top:1px solid var(--line); padding-top:var(--s-3); } .shift-col h3{ font-size:var(--t-micro);letter-spacing:0.22em;text-transform:uppercase; color:var(--terracotta);margin-bottom:var(--s-2); } .shift-col p{ font-size:var(--t-body);line-height:1.55;color:var(--ink-soft); } /* ---- the six areas, all open ---- This was a tabbed picker. It was right when each panel held a package name, a duration, a promise, five deliverables and a "you keep" line — sixty-odd words, far too much to show six of. The content then shrank to a heading and three to five items of two or three words, at which point six tabs, ARIA wiring, a JS handler and eighty lines of CSS existed to hide seventy words, and the densest section on the page displayed the least. */ .areas{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s-2); } .area{ background:var(--bone);border-radius:16px; padding:var(--s-3) var(--s-3) var(--s-4); } /* the sprite is markup only — it defines the symbols and draws nothing */ .ic-sprite{display:none;} /* gap 8, not 11. Each icon carries about 3px of its own whitespace inside the viewBox, so 11 rendered as ~14 and the mark drifted away from the word. margin-bottom stays --s-2. Tried --s-3 on the theory that the title needed more air than the gap between items — it doesn't. The title is Marcellus at 21px in olive with an icon beside it; nothing is going to mistake it for a bullet, and 24px just opened a hole under it. */ .area-head{ display:flex;align-items:center;gap:8px; margin-bottom:var(--s-2); } /* outline, terracotta, hairline — the same 1.4px weight as the barlines and the flow connectors, so the icons join the family rather than sitting on top of it. Terracotta because it is the one colour with no field anywhere on the page; six hairline marks is enough to register without shouting. */ .area-ic{ width:22px;height:22px;flex:none; fill:none;stroke:var(--terracotta);stroke-width:1.4; stroke-linecap:round;stroke-linejoin:round; } .area-ic use{overflow:visible;} .area h3{font-size:var(--t-h3);color:var(--olive);margin-bottom:0;} .area ul{list-style:none;} /* 9px was off the 8px scale, and .shift-col li — the same construction on the same page — used 12. Both are --s-1 now. */ .area li{ font-size:var(--t-body);line-height:1.5;color:var(--ink-soft); padding:0 0 var(--s-1) 15px;position:relative; } .area li:last-child{padding-bottom:0;} .area li::before{ content:"";position:absolute;left:0;top:12px; width:6px;height:1px;background:var(--terracotta); } .pkg-more{ margin:var(--s-6) 0 0; text-align:center;font-size:var(--t-body);color:var(--ink-soft); } .pkg-more a{ color:var(--olive);text-decoration:none; border-bottom:1px solid var(--line);padding-bottom:3px; transition:color .25s,border-color .25s; } .pkg-more a:hover{color:var(--terracotta);border-color:var(--terracotta);} /* ---- the flow, running left to right ---- Four columns: conversation, the fork, proposal, begin. The fork column is wider because it holds two boxes. */ .flow{ display:grid;grid-template-columns:1fr 1.2fr 1fr 1fr; gap:var(--s-5);align-items:center;text-align:center; } .flow-node, .flow-branch{ background:var(--bone); border:1px solid var(--line); border-radius:14px; padding:var(--s-3) var(--s-2); } .flow-node h3, .flow-branch h3{font-size:var(--t-body);color:var(--olive);margin-bottom:5px;} .flow-node p, .flow-branch p{font-size:var(--t-small);color:var(--ink-soft);} /* horizontal connector into every column after the first */ .flow > * + *{position:relative;} .flow > * + *::before{ content:"";position:absolute; left:calc(var(--s-5) * -1);top:50%; width:var(--s-5);height:1px; background:var(--line); } /* the fork's connectors stop short. The bracket already occupies --s-3 of the gap on each side, so a full-length line would be drawn twice over the same pixels — which is what made those two segments look heavier than the rest. */ .flow-split::before{width:calc(var(--s-5) - var(--s-3));} .flow-split + *::before{ left:calc((var(--s-5) - var(--s-3)) * -1); width:calc(var(--s-5) - var(--s-3)); } /* the fork: a bracket out to two branches, then back together. flex:1 forces the branches to equal height, which is what lets the arm positions below be exact. */ .flow-branches{position:relative;display:flex;flex-direction:column;gap:var(--s-3);} .flow-branch{flex:1;} .flow-branches::before, .flow-branches::after{ content:"";position:absolute; top:calc(25% - var(--s-3) / 4); bottom:calc(25% - var(--s-3) / 4); width:var(--s-3); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .flow-branches::before{left:calc(var(--s-3) * -1);border-left:1px solid var(--line);} .flow-branches::after{right:calc(var(--s-3) * -1);border-right:1px solid var(--line);} /* trusted by */ /* No boxes. These were bordered slots because they used to hold the word "Logo" — a placeholder needs a box to be legible at all. Real logos don't: a logo is already a shape, and putting a shape inside a box makes the box read as the empty space around it rather than as a frame. It was also the third set of bordered cards on one page, after the six areas and the two contact panels. */ /* flex, not a fixed two-column grid — more logos are expected. Wrapping and centring means three, five or six need no change here; only the max-width grows. A grid would leave an orphan on the last row. */ /* No captions under these. Each logo already carries its own name, and a line of our type underneath would both repeat it and, on a phone where the row stacks, put a caption between two logos where it reads as a heading for the next one rather than a label for the last. */ .trust-logos{ display:flex;flex-wrap:wrap;justify-content:center;align-items:center; gap:var(--s-6);max-width:520px;margin:0 auto; } .trust-slot{display:flex;align-items:center;justify-content:center;} .trust-slot img{max-width:100%;object-fit:contain;} /* Two shapes, two heights. A portrait lockup spends most of its height on the mark and only ~8% on the name, so it needs more of it to carry the same presence as a landscape one. 56 against 70 is the balance. */ .trust-wide img{max-height:56px;} /* landscape lockup — Chronos */ .trust-tall img{max-height:70px;} /* portrait lockup — Duo, Little Keys */ /* ============================================================= 7 · Closing block — homepage and about ============================================================= */ /* --s-6, not --s-8. Two cards holding six short lines don't need 96px of olive above and below them; the block was ~400px of colour for very little. */ /* Not centred any more, and --s-7 rather than --s-6: this section now holds a six-field form, so it is the tallest block on the page and needs the padding of one. Centred text and a form cannot share a section. */ .closing{background:var(--olive);color:var(--bone);padding:var(--s-7) 0;} .closing h2{font-size:var(--t-h2);margin-bottom:var(--s-3);} /* Pitch left, form right, equal halves. Uneven columns were tried at 0.85fr against 1fr and the intro column — four short lines — just looked starved next to a six-field form. Equal columns give each 464px inside the 1000px shell, which is what the paired row below is measured against. */ .contact-grid{ display:grid;grid-template-columns:1fr 1fr;gap:var(--s-7); align-items:start; } /* the page eyebrow is terracotta, 1.82:1 on olive and unreadable. Sage here. */ .closing .eyebrow{color:var(--sage);} /* Dimmed, deliberately — it is the supporting sentence, not the offer. 0.72 is 5.25:1; 0.62 looked better and measured 4.38:1, which fails AA. */ .contact-lead{ font-size:var(--t-body);color:rgba(247,241,236,0.72); margin:0 0 var(--s-5);max-width:42ch; } /* The facts, as a list rather than more sentences. Micro uppercase label in sage over a --t-lead value, so the email address ends up the second largest thing in the column instead of the smallest. */ .contact-facts{display:grid;gap:var(--s-3);} .contact-facts dt{ font-size:var(--t-micro);letter-spacing:0.13em;text-transform:uppercase; color:var(--sage);margin-bottom:6px; } .contact-facts dd{font-size:var(--t-lead);color:var(--bone);margin:0;} .contact-facts dd a{ color:var(--bone);text-decoration:none; border-bottom:1px solid rgba(247,241,236,0.5);padding-bottom:3px; transition:border-color .25s; } .contact-facts dd a:hover{border-color:var(--bone);} /* ---- the form, on olive ------------------------------------------------- Every value below is measured against #3E4A34. Text needs 4.5:1, a form control's boundary needs 3:1. The sand fill and --line border the fields carry on a bone page are both invisible here, so they are replaced rather than tinted. */ .closing .field label{color:rgba(247,241,236,0.82);} /* 6.28:1 */ .closing .field ::placeholder{color:rgba(247,241,236,0.82);} /* 5.19:1 on the field fill */ .closing .field input, .closing .field select, .closing .field textarea{ background:rgba(247,241,236,0.07); /* #4B5641 */ border-color:rgba(247,241,236,0.48); /* 3.28:1 — 0.28 was 2.08 and failed */ color:var(--bone); /* 6.93:1 on the fill */ } /* the dropdown list is drawn by the OS and inherits from the select, so without this the options render bone-on-white and vanish */ .closing .field option{background:var(--olive);color:var(--bone);} .closing .field input:focus, .closing .field select:focus, .closing .field textarea:focus{ border-color:var(--bone); box-shadow:0 0 0 3px rgba(247,241,236,0.16); } .closing .form-note, .closing .form-status{color:rgba(247,241,236,0.82);} .closing .form-status.error{color:#E8B4A6;} /* terracotta is 1.82:1 here; this is the same hue lifted */ /* The button inverts — olive on olive is a button you cannot see — and runs the full width of the form. An inline pill under a 464px column of fields reads as an afterthought; the full bar closes the form off and makes the primary action of the page impossible to miss. It is the loudest element on the site, deliberately, and only here. */ .closing .enquiry button{ width:100%; color:var(--olive);background:var(--bone); } .closing .enquiry button:hover{color:var(--bone);background:var(--terracotta);} .closing .enquiry button:disabled, .closing .enquiry button:disabled:hover{color:var(--olive);background:var(--bone);} .closing .enquiry button:focus-visible{outline-color:var(--bone);} /* ============================================================= 8 · About page ============================================================= */ /* .head is shared with the legal pages, so anything specific to About is scoped — otherwise max-width:16ch would clamp "Privacy Policy" too. */ .head{padding:var(--s-8) 0 0;} /* a step below the homepage hero, deliberately. --t-h1 tops out at 54px and the hero was brought down to 48 — which left every interior page with a bigger headline than the homepage. The hero should be the largest type on the site. */ .head h1{font-size:clamp(30px,3.6vw,42px);margin-bottom:var(--s-3);} /* no padding of its own — this used to sit on about.html directly under .head, where it needed its own. It now lives inside a
, which already pads 72px top and bottom. Adding more here doubles the gap at the colour boundary. */ /* stretch, not start — and this is the important line in this block. The picture has no aspect ratio of its own here: it is exactly as tall as the text beside it, whatever the text says. Edit a paragraph in or out and the two columns stay level on their own, with nothing to re-tune. That is the whole point — a fixed ratio had to be recalculated every time the copy moved, and was wrong within a day of being set. 0.78/1.22 sets the WIDTH only. portrait.jpg is 768 x 1010 — a ratio of 0.760 — and the box wants to match it, or the crop starts eating the sides. OPEN PROBLEM. The About copy grew by two thirds and the box no longer matches. Measured, at 1080: education inside the prose column (how it is now) 368 x 652 0.564 education moved under the picture 378 x 493 0.766 Moving it is the only lever that works, because it takes height out twice — once from the prose column, once from the row the picture has to fill. Every other approach was measured and fails: · narrowing the split fights width when the problem is height · widening past 1080 makes About wider than every other section · with education inside, NO width/split combination reaches 0.760 without the picture column growing wider than the prose column So 0.564 is the best available while education stays in the prose column. That is a known trade, not an oversight — the arrangement was tried on 11 Aug 2026 and reverted because it looked wrong, not because it measured wrong. Widening the section from 1000 to 1080 is kept, and is worth 0.478 -> 0.564 on its own. */ .portrait-row{ display:grid;grid-template-columns:0.78fr 1.22fr; gap:var(--s-6);align-items:stretch; } /* was .arch — an arched top, like a proscenium. Now a plain rectangle with soft corners. Renamed because a class called .arch that isn't an arch is a trap for whoever reads this next. */ .shot{ width:100%;height:100%;min-height:0; border-radius:18px; background:var(--sand);border:1px solid var(--line); display:flex;align-items:center;justify-content:center; color:var(--olive-soft);font-size:var(--t-micro); letter-spacing:0.16em;text-transform:uppercase; overflow:hidden; } /* 40%, not the default 50%. Because the frame height now follows the text, the crop is whatever's left over — and a centred crop takes it evenly off the top and bottom. Her face sits in the upper half, so biasing up keeps the headroom and spends the crop on the jumper instead. */ .shot img{width:100%;height:100%;object-fit:cover;object-position:center 40%;} .portrait-row p{color:var(--ink-soft);} .portrait-row p + p{margin-top:var(--s-3);} .edu-mini{margin-top:var(--s-5);} /* terracotta, not olive-soft — every other micro label on the site is terracotta. olive-soft is footer and secondary text. */ .edu-mini .lab{ font-size:var(--t-micro);letter-spacing:0.28em;text-transform:uppercase; color:var(--terracotta);margin-bottom:var(--s-1); } .edu-mini p{font-size:var(--t-small);color:var(--ink-soft);line-height:1.6;} .edu-mini p + p{margin-top:var(--s-2);} .edu-mini strong{font-weight:400;color:var(--olive);} /* ============================================================= 9 · Legal pages — privacy, terms ============================================================= */ .page-legal .head{padding:var(--s-8) 0 var(--s-5);} .page-legal .head h1{margin-bottom:var(--s-2);max-width:none;} /* that margin exists to clear the "Last updated" line. On pages without one — the enquiry form — it's a dangling 16px with nothing under it to separate. */ .head h1:last-child{margin-bottom:0;} .updated{font-size:var(--t-small);color:var(--olive-soft);letter-spacing:0.06em;} /* Sits under the h1 on the enquiry page, where the heading promises a call and the page shows a form. Without this line people think they clicked the wrong thing. --t-lead, not --t-small: a sentence to be read, not a caption. */ .head-sub{ margin:0; font-size:var(--t-lead);color:var(--ink-soft); } .doc{padding-bottom:var(--s-8);} .doc h2{font-size:var(--t-h3);color:var(--olive);margin:var(--s-6) 0 var(--s-2);} .doc p{color:var(--ink-soft);margin-bottom:var(--s-2);} .doc ul{list-style:none;margin:0 0 var(--s-2);} .doc li{color:var(--ink-soft);padding-left:18px;position:relative;margin-bottom:var(--s-1);} .doc li::before{ content:"";position:absolute;left:0;top:10px; width:5px;height:5px;border-radius:50%;background:var(--sand-deep); } /* the global rule is a{color:inherit}, which would make links inside long-form prose invisible. Prose links stay visibly links. */ .doc a{ color:var(--olive); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--sand-deep); transition:color .25s, text-decoration-color .25s; } .doc a:hover{color:var(--terracotta);text-decoration-color:var(--terracotta);} /* ============================================================= 9b · Writing — index and posts ------------------------------------------------------------- Posts reuse .doc from the legal pages, which already has the right measure, list markers and visible link styling for long-form prose. Only the index needs rules of its own. ============================================================= */ body.page-blog{--measure:860px;} .post-list{list-style:none;margin:var(--s-6) 0 0;} .post-item{border-top:1px solid var(--line);} .post-item:last-child{border-bottom:1px solid var(--line);} .post-item a{ display:block;padding:var(--s-4) 0;text-decoration:none; transition:opacity .25s; } .post-item a:hover{opacity:.72;} .post-date{ display:block;font-size:var(--t-micro);letter-spacing:0.22em; text-transform:uppercase;color:var(--terracotta);margin-bottom:var(--s-1); } .post-item h2{font-size:var(--t-h3);color:var(--olive);margin-bottom:6px;} .post-item p{font-size:var(--t-body);color:var(--ink-soft);max-width:60ch;} /* the honest empty state — says what's coming rather than pretending there's something here. Delete once the first post is up. */ .post-empty{ margin:var(--s-6) 0 var(--s-8); padding:var(--s-5) 0 0;border-top:1px solid var(--line); } .post-empty p{font-size:var(--t-lead);color:var(--ink-soft);max-width:56ch;} .post-empty .more{margin-top:var(--s-4);} /* a post's opening paragraph carries more weight than its body */ .standfirst{ font-size:var(--t-lead);color:var(--olive);line-height:1.5; margin-bottom:var(--s-4); } .post-end{margin-top:var(--s-6);padding-top:var(--s-4);border-top:1px solid var(--line);} /* .doc a underlines prose links, and at 0-1-1 it out-specifies .more (0-1-0), overriding its text-decoration:none. A .more inside .doc then drew the prose underline AND its own border — two lines, 6px apart. Prose links underline; call-to-action links keep their border and nothing else. */ .doc .more{text-decoration:none;} /* ============================================================= 9c · Enquiry form ------------------------------------------------------------- Plain HTML posting to Formspree. No script, no CAPTCHA, so the page still makes no third-party request until someone submits. ============================================================= */ /* no top margin of its own — .head already contributes 40px below the title, and stacking --s-6 on top of that opened a 112px hole with nothing in it */ .enquiry{max-width:560px;margin:0;} /* Structure is Carden's — one paired row, 16px gaps, 6px from label to input. Radius stayed at 10px: 3px was tried to match them exactly and it put the form in a different family to the 16px area cards. Ours wins. Padding is as tight as the 44px minimum touch target allows and no tighter. An input is padding + line-height + 2px of border, so at 11px vertical with line-height 1.25 it comes to 44.6px. 10px would be 42.6px and under. The gaps are where the remaining compactness came from. 12px between fields is off the 8px scale on purpose: it has to stay clearly larger than the 6px from a label to its own input, or you can no longer see which label belongs to which box. 8px would be on-scale and would break that grouping. */ .field{margin-bottom:12px;} /* Two short fields on one line. The children keep their own bottom margin, so the row needs none of its own and the rhythm below it is unchanged. Only ever wrap fields in this whose labels fit the half width — a label that wraps in one column and not the other drops that input out of line with its neighbour. Measure before adding a second row. */ .field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;} /* labels are quiet. They were --t-micro uppercase terracotta, which put five eyebrow-weight headings down a single form and made it shout. Terracotta now appears once on this page, on the eyebrow above the title, which is what an accent colour is for. */ .field label{ display:block;margin-bottom:6px;line-height:1.3; font-size:var(--t-small);color:var(--ink-soft);letter-spacing:0.02em; } /* sand fill, not bone — on a bone page a bone input is defined only by its hairline, and reads as an outline rather than something to type in */ .field input, .field select, .field textarea{ width:100%;font:inherit;font-size:var(--t-body);color:var(--ink); background:var(--sand); border:1px solid var(--line);border-radius:10px; padding:11px 14px; transition:border-color .2s, box-shadow .2s; } /* Explicit height, not padding plus a line-height. Browsers do not agree on whether line-height applies to a