/* THE ARCHITECT — page styles, v3.0. LAYOUT ONLY. NOT ONE WORD OF THE PAGE CHANGED. v2.0 built THE_ARCHITECT_FINAL.docx verbatim and that text is carried across intact, in its order, headings and all. What changed is the canvas. THE DIAGNOSIS, in the Architect's words: "The current page is treating a 1440px desktop like a 600px manuscript column. That's why it feels so long. The content isn't too long. The page is too narrow for the amount of content it has been entrusted to carry." Measured before the rebuild, at 1440x900: 14,641px of page - 16.3 screens - inside a 1040px column using 72% of the viewport, with ten sections stacked one after another and seventeen lists set as vertical stacks. THE PRINCIPLE: stop making every section a chapter. Ten sequential sections become five visual chapters. A long-form magazine profile, not ten consecutive homepage sections. EXPLICITLY PROHIBITED, and none of it is here: accordions, "read more", carousels, tabs, collapsing content, cards everywhere, a resume sidebar, a sticky credentials rail, a timeline graphic, iconography, new photography, rewriting. WHAT IS DELIBERATELY KEPT FROM v2.0: the black ground, the brass structure (crimson measures 1.44:1 here and would render as nothing), Georgia throughout, the type scale and its 88/52 ceiling, the two brass hairlines, the portrait at the top, and the three big isolated statements. Those three are where vertical space is worth spending - which is precisely why ordinary paragraphs must stop being given the same extravagance. If everything breathes, nothing is important. */ .architect { --ground: #0B0B0C; --ink: #F5F5F2; --brass: #C9A227; /* structural rules. Crimson cannot be seen on this ground */ --gold: #E3C97A; --rule: rgba(245,245,242,.14); --soft: rgba(245,245,242,.70); background: var(--ground); color: var(--ink); /* THE FULL-BLEED CHAPTER GROUNDS ARE 100vw, AND 100vw INCLUDES THE SCROLLBAR. On a page tall enough to scroll - which this one always is - that overhangs the document by the scrollbar's width and the page scrolls sideways by 8px. Measured, not guessed. `clip` rather than `hidden`: hidden would make the body a scroll container and break the sticky header, which is a worse fault than the one being fixed. */ overflow-x: clip; } /* AND ON THE ROOT, because the document's scrollWidth is measured on , not - clipping only the body left the 8px still there when measured. This selector is safe to leave unscoped: architect.css loads on this page and no other. */ html { overflow-x: clip; } /* ========================================================================== THE COLOUR RHYTHM. Black chapters and light chapters alternate, so a long page reads as chapters instead of sixteen screens of one ground. Black stays the page default; a light chapter declares itself. WHY THE LIGHT GROUND IS PARCHMENT AND NOT "THE HOUSE GROUND". The upgrade brief asked for cream/parchment fields on the grounds that The School already uses them. It does not - --parchment (#ECDEC4) and --cream (#E7D9BE) are INK colours in styles.css, and every background on the site is dark. Substituting the House oxblood was tried first and fails the brief's own purpose: oxblood sits at 0.06 relative luminance against this page's 0.04, so black-to-oxblood-to-black is not an alternation a reader can see. Parchment is what actually produces the rhythm. THE CONSEQUENCE IS WORTH NAMING: this makes The Architect the only page on the site with a light ground. That is a belonging question, and it is the Architect's to rule. It is two values to reverse - point --l-ground and --l-ink at a dark pair and every light chapter returns to black without touching one line of markup. THE TOKENS ARE IN-PALETTE. The ink is --void, the accent is --oxblood, and the muted tone is mixed from them; nothing new is introduced to the House. ======================================================================== */ .architect { --l-ground: #ECDEC4; /* --parchment, used as a ground rather than as ink */ --l-ink: #2A060C; /* --void */ --l-muted: #5E4433; --l-accent: #7A1822; /* --oxblood. Brass is invisible on parchment: 1.9:1 */ --l-rule: rgba(42,6,12,.20); } /* The light chapter re-points the four tokens the page already draws from, so every rule below inherits the new palette without being duplicated. */ .arch-light { --ink: var(--l-ink); --soft: var(--l-muted); --brass: var(--l-accent); --rule: var(--l-rule); color: var(--l-ink); padding-bottom: 11vh; } /* FULL BLEED WITHOUT TOUCHING THE MARKUP. The content stays inside the page's measure while the ground runs to both edges - done with a pseudo-element rather than by restructuring the document, so the five-chapter compression and the reading order are untouched. */ .arch-chapter { position: relative; z-index: 0; } .arch-light::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 100vw; z-index: -1; background: var(--l-ground); } /* A hairline where a light chapter meets a black one, so the seam is a decision. */ .arch-light::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); top: 0; width: 100vw; height: 1px; background: var(--l-accent); opacity: .30; } /* ========================================================================== THE NAME. A provenance note, found late by someone who went looking. Set quieter than everything around it on purpose - no rule, no panel, no ornament, and nothing that reads as a logo. The brief asks for it to feel discovered rather than advertised, and the way to do that is to give it room and then leave it alone. KWYLL takes the page's existing d44 display size. That is presence without promotion: the same treatment "I do." and the name at the close already use, so the word sits inside the page's hierarchy instead of above it. A DEFINITION LIST, because that is literally what it is. Origin, Meaning and KWYLL Engaged are three separate answers to three separate questions, and dt/dd keeps them separate in the markup as well as on the page - which is also what lets a search engine read the relationship without a word being added for it. ======================================================================== */ .arch-name { margin-bottom: 9vh; } .arch-name__word { margin: 1vh 0 5vh; letter-spacing: .04em; } .namedef { margin: 0; max-width: 82ch; } .namedef__row { padding: 2.6vh 0; border-top: 1px solid var(--rule); } .namedef__row:first-child { border-top: 0; padding-top: 0; } .namedef dt { font-family: var(--sans, system-ui, sans-serif); font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--soft); margin: 0 0 1.2vh; } .namedef dd { margin: 0; font-size: clamp(19px, 17px + 0.4vw, 24px); line-height: 1.5; max-width: 58ch; } /* ========================================================================== THE RECORD. Factual evidence, set as plainly as the page can set anything. No card, no border, no panel, no badge. Each field is a small label and a statement - the same relationship the rest of the page uses between a heading and its copy. The only thing separating one field from the next is space. The label is the page's existing micro treatment. It is NOT set in the accent colour: on this page brass and oxblood mark structure, and colouring five labels would give the section a decorative weight the brief rules out. ======================================================================== */ .rec { padding: 1vh 0 0; } .rec__label { font-family: var(--sans, system-ui, sans-serif); font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--soft); margin: 0 0 1.4vh; } .rec .body { max-width: 46ch; } /* PUBLIC SYSTEMS spans the canvas because its statement is four times the length of the others. Wider measure, same type, same label, no emphasis - the width is a reading decision and must not read as importance. */ .rec--wide { margin: 4vh 0; } .rec--wide .body { max-width: 92ch; } .arch-record .arch-cols.two { row-gap: 4vh; } /* THE TWO BLACK INTERRUPTIONS in the closing chapter - "I do." and the governing question. They are chapters in their own right now rather than paragraphs inside a longer run, so they close their own vertical space. Black is the page default; they declare nothing. */ .arch-answer { padding-bottom: 11vh; } /* WHY "ARCHITECT" was half of a two-column row whose other half became the black "I do." field. It is a single column now, held to the page's measure by .body's 68ch rather than by a grid track. */ .arch-why { max-width: 78ch; } /* The closing light chapter carries the imprint, so the imprint's own top margin would double the space the chapter already provides. */ .arch-close .arch-imprint { margin-top: 7vh; } .architect header.site { position: sticky; top: 0; z-index: 5; background: rgba(11,11,12,.92); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-bottom: 1px solid var(--rule); } .architect header.site .markword, .architect header.site nav.top a { color: var(--ink); } .architect header.site nav.top a:hover { color: var(--gold); } /* ========================================================================== THE TYPE SCALE — unchanged from v2.0. Phone reference 390px, desktop 1440px. HARD CAP 88 / 52, the binding scale, same ceiling as the homepage. ======================================================================== */ .architect .title { font-size: clamp(52px, 38.63px + 3.429vw, 88px); line-height: .96; letter-spacing: -.03em; } .architect .d72 { font-size: clamp(44px, 33.60px + 2.667vw, 72px); line-height: 1.02; letter-spacing: -.025em; } .architect .d60 { font-size: clamp(38px, 29.83px + 2.095vw, 60px); line-height: 1.08; letter-spacing: -.02em; } .architect .d44 { font-size: clamp(30px, 24.80px + 1.333vw, 44px); line-height: 1.14; letter-spacing: -.015em; } .architect .h { font-size: clamp(34px, 27.31px + 1.714vw, 52px); line-height: 1.1; letter-spacing: -.02em; } .architect .stand { font-size: clamp(24px, 20.29px + 0.952vw, 34px); line-height: 1.28; } .architect .lead { font-size: clamp(22px, 19.77px + 0.571vw, 28px); line-height: 1.45; } .architect .body { font-size: clamp(18px, 16.89px + 0.286vw, 21px); line-height: 1.62; } .architect .list { font-size: clamp(16px, 15.26px + 0.190vw, 18px); line-height: 1.5; } .architect .micro { font-size: clamp(12px, 11.63px + 0.095vw, 13px); letter-spacing: .22em; text-transform: uppercase; color: var(--soft); } .architect h1, .architect h2, .architect p, .architect ul, .architect li { margin: 0; font-weight: 400; } /* ========================================================================== THE CANVAS. 1040px became 1440px of usable page. THE MEASURE IS UNCHANGED AT 68 CHARACTERS. Width is not spent on longer lines - a 72-character line is harder to read, not more generous. It is spent on putting two measures side by side. That is the whole mechanism of this rebuild: the column that carries prose stays exactly as readable as it was, and the page stops being one column. ======================================================================== */ .arch-wrap { max-width: 1440px; margin: 0 auto; padding: 0 4vw 12vh; } .architect .body, .architect .lead, .architect .list, .architect .stand { max-width: 68ch; } /* ========================================================================== VERTICAL RHYTHM, RE-TIERED. v2.0 gave every section 9vh of approach and every heading 5vh beneath it, so a paragraph and a governing question were separated by the same silence. The chapter now carries the large pause; the parts inside it carry a small one. ======================================================================== */ .arch-chapter { padding: 11vh 0 0; } .arch-chapter:first-of-type { padding-top: 0; } .arch-sec .h { margin-bottom: 3.2vh; } .architect .body + .body { margin-top: 1.1em; } .architect .body + .stand, .architect .lead + .stand { margin-top: 2.2vh; } .architect .stand + .body { margin-top: 2.2vh; } .architect .body + .lead, .architect .list + .lead { margin-top: 2.6vh; } .architect .lead + .body { margin-top: 2vh; } .architect .body + .list, .architect .stand + .list, .architect .lead + .list { margin-top: 2.2vh; } .architect .list + .body { margin-top: 2.2vh; } .architect .list + .list { margin-top: 2.2vh; } /* ========================================================================== THE EDITORIAL GRID. Columns and gutters - no cards, no boxes, no borders around a section. At most one restrained structural rule, and there are only two on the page. ======================================================================== */ .arch-cols { display: grid; gap: 0 6.5vw; align-items: start; } .arch-cols.two { grid-template-columns: 1fr 1fr; } /* UNEVEN COLUMNS, TO EVEN UP THE HEIGHTS. Set in equal halves, BEFORE THE LANGUAGE runs 811px against WHEN THE SYSTEM HAD TO WORK's 1497 - a 686px hole under the left column, which is precisely the wasted vertical space this rebuild exists to remove. The fix is width, not order. The alternative - lifting a later section up into the left column to fill it - would put TWO ROOMS ahead of WHEN THE SYSTEM in the document, and a screen reader follows the document, not the grid. The argument would be read out of sequence. So the narrower column takes the shorter section and grows taller; the wider column takes the longer one and grows shorter, and they close on each other. 34/66 MEASURED, NOT GUESSED. Stepping the split and measuring each: 38/62 leaves 404px, 36/64 leaves 368, 34/66 leaves 327, 32/68 leaves 293, 30/70 leaves 259. The curve flattens - every further 2% buys about 35px and costs two characters of measure. 34/66 is where that trade stops being worth it: the hole is down from 686px to 327, and the narrow column still holds 39 characters, which is an editorial measure rather than a squeezed one. */ .arch-cols.uneven { grid-template-columns: 34fr 66fr; } /* The opening. Portrait left at 42%, provenance right at 58%, so the first screen and a half carries both the person and where the work came from - instead of portrait, scroll, essay. */ .arch-cols.open { grid-template-columns: 42fr 58fr; align-items: start; } /* ========================================================================== THE RUNS. The single largest generator of scroll in v2.0: seventeen lists, every one of them a vertical stack, several of them seven and ten items of two or three words each. "In churches. In technology. In public systems. In executive environments. At kitchen tables. In marriage. In fatherhood." does not need seven rows. A run FLOWS and wraps on its own, so three sit on one line, then two, then two - an editorial constellation rather than a grocery list. Same words, same order, same weight. EVERY ITEM IS SET IDENTICALLY. This matters most for the six "Returning to..." lines, where the repetition is the mechanism and the sameness is what the passage is doing. Flowing them horizontally keeps every line identical to its neighbours; what is forbidden is varying their setting to relieve the repetition, and nothing here varies. Lists of whole sentences stay vertical - a run is for short positions, not for prose. ======================================================================== */ .architect .run { list-style: none; padding: 0; max-width: none; display: flex; flex-wrap: wrap; column-gap: 2.4em; row-gap: .7em; } .architect .run li { margin: 0; } /* A run that carries one long closing sentence lets it take its own line rather than stretching the gutter of the row above it. */ .architect .run li.wide { flex-basis: 100%; } /* The vertical list, unchanged: one item per position, equal weight, never merged. */ .architect .list { list-style: none; padding: 0; } .architect .list li { margin: 0 0 .85em; } .architect .list li:last-child { margin-bottom: 0; } /* ========================================================================== THE THREE BIG STATEMENTS. WHAT CAN THIS CARRY?, the capacity question, and "I do." These keep their space - they are the reason the page has a hierarchy at all. The fields break the column grid and take the full canvas. ======================================================================== */ .arch-field { min-height: 62svh; display: flex; flex-direction: column; justify-content: center; margin: 7vh 0; grid-column: 1 / -1; } .arch-field .d72, .arch-field .d60 { max-width: 22ch; } .arch-alone { margin: 4vh 0; } /* BRASS HAIRLINE. Two on the page, both structural. */ .arch-rule { display: block; width: 72px; height: 1px; background: var(--brass); border: 0; margin: 4vh 0 3vh; } .architect .soft { color: var(--soft); } /* ========================================================================== THE MASTHEAD AND THE PORTRAIT. IT SITS AT THE TOP AND DOES MORE WORK THERE NOW. It was first built at "BEHIND THE DOOR", on the argument that the page withholds the name until its closing lines and the face should arrive with it. The Architect tested that and ruled it back to the masthead: at the foot of a sixteen-screen page it did not read as the establishing image, it read as an afterthought a reader might never reach. Do not move it back down. In v2.0 it sat alone above an empty right half. It now anchors the left column of the opening spread, with the provenance beside it. NOT LAZY-LOADED, deliberately - it is the image the page opens on. Width and height stay declared so the space is reserved and nothing jumps when it lands. The file is a 254 KB derivative of a 6107x9160 print master; the original is untouched and already black and white. ======================================================================== */ .arch-masthead { padding: 12vh 0 5vh; } .arch-portrait { display: block; width: 100%; max-width: 520px; height: auto; margin: 0; border: 1px solid var(--rule); } /* THE HUMAN RECORD. Full width, and its three lists set as three horizontal movements. This section should feel human, not resume-like, which is exactly what three long vertical lists made it. */ .arch-human .arch-move + .arch-move { margin-top: 4.5vh; } /* THE IMPRINT. The page ends here. No door, no imperative, no posture line. */ .arch-imprint { margin-top: 9vh; padding-top: 4vh; border-top: 1px solid var(--rule); } .architect footer.site { background: var(--ground); border-top: 1px solid var(--rule); color: var(--soft); padding: 6vh 7vw; } .architect footer.site a { color: var(--gold); } /* ========================================================================== NARROWER SCREENS. The grid collapses to one column and the page becomes the document it always was. Mobile stacks portrait first, copy beneath - as ruled. ======================================================================== */ @media (max-width: 1100px) { .arch-cols.two, .arch-cols.open, .arch-cols.uneven { grid-template-columns: 1fr; gap: 0; } .arch-cols.two > * + *, .arch-cols.open > * + *, .arch-cols.uneven > * + * { margin-top: 7vh; } .arch-portrait { max-width: 460px; } } @media (max-width: 700px) { .arch-wrap { padding-left: 24px; padding-right: 24px; } .arch-field { min-height: 54svh; } /* Runs stay runs on a phone. Two short positions per line still beats one, and the flow wraps to a single column by itself when the items are long. */ .architect .run { column-gap: 1.6em; } } @media (prefers-reduced-motion: no-preference) { .arch-chapter, .arch-masthead { animation: archrise .8s cubic-bezier(.22,.61,.36,1) both; } @keyframes archrise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } } @media (prefers-reduced-motion: reduce) { .arch-chapter, .arch-masthead { animation: none; } }