/* ============================================================================ home-d.css — the front door, version D. "LIGHTER." BUILT FROM home-b.html AT 73b89b8, the corrected content: the client's eleven changes of 2026-09-06. Same eleven sections, same order, same words. Only the design changes. Content provenance and the full ban list are in the head note of home-d.html; read that before editing a sentence. --------------------------------------------------------------------------- WHAT "LIGHTER" HAS TO MEAN AFTER THE ELEVEN CHANGES The edit already removed a great deal: four explanations became one section, six of the ten questions left the page, the founder section halved, and the hero's four prose blocks became two numerals. So lighter can no longer mean "carry less" - he has cut what there was to cut. This file treats the weight that is LEFT, and after the edit it is in two places. 1 THE FACTS ARRIVE ALL AT ONCE. THE VISIBLE LAYER ANSWERS. THE DISCLOSED LAYER SUBSTANTIATES. His own standard, from the 6 September voice note, stated as a business requirement rather than a preference: "The less reading data they have, and that's hidden, the better. The more information you supply to somebody that they have to keep reading, nobody's going to read it all." AND THE RULE THAT BOUNDS IT, from 2026-09-07: "Progressive disclosure is for DEPTH, never for PRESENCE. An investor should never have to tap to discover that something exists." One test on every collapsed element: does closing this hide depth, or hide presence? The credential field NAMES, the current project and its status, the asset-class counts and the three parties' summary lines all fail that test, so none of them closes. TWO primitives, both keyed on aria-expanded, both closed by CSS under html.hd-js and by nothing else: .hd-d (the four questions, the three parties, the three Request Access questions, the three FAQs) and the operator door. Sixteen controls, one silhouette. THE PAGE SHIPS OPEN. JAVASCRIPT CLOSES IT. That is the architecture he named, and it is the inverse of the usual build. Everything is in the DOM and visible; the inline script in the page head sets the class before first paint and CSS does the closing, so nothing is ever revealed because nothing was hidden. With scripting off no rule matches, every word renders, and every control is display:none - no amputation, no dead affordances. WHAT IT COST: these were native
, which open under the browser's own find-in-page. Buttons do not. Stated in the report rather than absorbed. AND THE EXCEPTION THAT MAKES IT READ: VOICE NEVER COLLAPSES. The proof numerals, the risk line, the founder's four paragraphs, "A spreadsheet cannot execute the business plan", "Silence is not a reporting strategy", the three operator photographs and the exit card are open at full size. A page of nothing but closed rows is a directory. The closed rows buy the room for the open ones. 2 THE FRAMING IS NOW HEAVIER THAN THE FACTS. Eleven eyebrows, eleven headings and eight ledes introduce eleven bands: thirty pieces of apparatus before a reader reaches a fact. That is the density that survived the edit, and it is invisible as a content problem because not one word of it is wrong. .hd-hd--split answers it. The eyebrow sits WITH its heading as one unit on the left and the lede is the facing column, so a band opens with two objects rather than three stacked. It uses width the page already has and takes about 140px off each of the six openings that carry a lede. --------------------------------------------------------------------------- THE OTHER THREE MOVES 3 THREE MOVEMENTS, NOT ELEVEN BANDS. The control runs D D D D L D L D L D D, five ground switches. This descends once and returns once, order unchanged: NAVY hero / proof / classes / operators · PAPER capital path / the standard / the founder / responsibility / your position · NAVY current activity / the next step. Two switches. THIS IS NOT THE LIGHT-MODE VARIATION - that is E. Six of eleven bands are navy, including the whole top third and both ends. Two sections changed ground and neither moved position: the standard and the responsibility section, both navy to paper, because both are the investor weighing something. Both invert through the ground variables below rather than being re-specified. On paper: ink 15.9:1, ink-2 8.6:1, ink-3 4.87:1 (the floor, fine print only). On navy: white, on-d-2 12.2:1, on-d-3 7.2:1. gold-deep is 2.06:1 on navy and plain gold is 2.06:1 on paper, so neither ever crosses. 4 THE ASSET-CLASS COUNTS COME OFF THE PHOTOGRAPHS. The control sets a category AND a count over each image: ten text rectangles on five photographs at 11px at every width, each depending on a scrim tuned until the worst pixel of the worst photograph behaves. "1 available now" is, by the control's own note, the most useful fact on the page for someone arriving cold, so it is the last thing that should depend on what a photograph is doing underneath it. Here the photograph is a photograph and the type sits below it on the section ground: nothing to tune, nothing flattened, and the count reads as data rather than as a caption. The hero and the exit card keep their photographic treatment - this is the one place where text over an image was buying nothing. 5 TWO SURFACES, AND FOUR TEXT SIZES BELOW DISPLAY. A flat ground and a photograph, in place of raised panels, boxed cards, dotted pills and four separate gold hairline colours. 11px eyebrow / 13px fine / 15px detail / 17px body. Nothing under 11px. PHONE FIRST, WHICH IS A LAYOUT DECISION AND NOT A SLOGAN. Below 900px a CLOSED operator card is a thumbnail beside the name; the photograph returns to its full 3:2 the moment the door opens. At 390 three full-width photographs cost 780px of scroll before a reader reaches a fact, and the imagery is representative of an asset type rather than a photograph of completed property - the lowest-evidence object on the card taking the most room. This OVERRULES this file's own earlier rule that the photographs are "the size of the proof"; that rule was written at 1440 and it is wrong at 390. Design and measure at 390 before 1440. AIR, SPENT WHERE IT READS. --hd-pad is bigger than the control's, but only the seams BETWEEN movements pay it in full; the seams inside a movement close to about half (see the movement-internal rhythm rule below). The page buys a bigger gesture at the two ground changes and spends less at the six places where nothing changes. NOT THINNER. Nothing here relies on hairline weight or low contrast to feel light. Display type is Playfair 400 at the control's scale, body text sits at or above the checked floors, and every measurement is against the token pairs. Lighter is about how much arrives at once, not how faintly it prints. ========================================================================== */ /* ---------------------------------------------------------------- reset -- */ *,*::before,*::after{box-sizing:border-box} html,body{overflow-x:clip} html{-webkit-text-size-adjust:100%} body.hd-body{ margin:0; background:var(--hd-navy); color:var(--hd-on-d); font-family:var(--hd-sans); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img{max-width:100%;display:block} h1,h2,h3,h4,p,figure,blockquote,dl,dd,ol,ul{margin:0} ol,ul{padding:0;list-style:none} :root{ /* ---- ground ------------------------------------------------------- */ --hd-navy: #08152A; --hd-navy-deep: #050D1A; --hd-navy-2: #0B1B33; --hd-line-d: rgba(255,255,255,.13); --hd-line-d2: rgba(255,255,255,.22); --hd-paper: #F7F5F0; --hd-paper-2: #FFFFFF; --hd-line-l: #DFD9CD; --hd-line-l2: #C9C0AF; /* ---- ink ---------------------------------------------------------- */ --hd-ink: #0C1B2E; /* 15.9:1 on paper */ --hd-ink-2: #33455A; /* 8.6:1 */ --hd-ink-3: #5C6D80; /* 4.87:1 — the floor, fine print only */ --hd-on-d: #FFFFFF; --hd-on-d-2: #C6D2E0; /* 12.2:1 on navy */ --hd-on-d-3: #93A5B9; /* 7.2:1 — the floor on navy */ /* ---- accent — two golds, because one gold cannot do both grounds --- */ --hd-gold: #D9A441; /* 8.1:1 on navy · 2.06:1 on paper, never text there */ --hd-gold-soft: #E9CB93; --hd-gold-deep: #7E5A1D; /* 5.7:1 on paper */ --hd-gold-fill: linear-gradient(135deg,#F0AD27,#D99B1B); /* ---- type --------------------------------------------------------- */ --hd-serif:"Playfair Display","Iowan Old Style",Georgia,"Times New Roman",serif; --hd-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --hd-fine:.8125rem; /* 13 */ --hd-detail:.9375rem; /* 15 */ --hd-body:1.0625rem; /* 17 */ /* ---- layout ------------------------------------------------------- */ --hd-wrap:1180px; --hd-gut:clamp(20px,4.4vw,44px); --hd-pad:clamp(60px,8.8vw,144px); --hd-ease:cubic-bezier(.2,.6,.3,1); /* GROUND-AWARE ALIASES. Every component below reads these instead of naming a colour, so a section changes ground by setting six variables rather than by having each rule re-specified. This is the mechanism that let the standard and the responsibility section move navy -> paper without a single duplicated component rule. */ --hd-fg: var(--hd-on-d); --hd-fg-2: var(--hd-on-d-2); --hd-fg-3: var(--hd-on-d-3); --hd-line: var(--hd-line-d); --hd-line-2: var(--hd-line-d2); --hd-accent: var(--hd-gold); --hd-accent-h:var(--hd-gold-soft); } /* ---------------------------------------------------------------- wrap -- */ .hd{width:100%;max-width:var(--hd-wrap);margin:0 auto;padding-inline:var(--hd-gut)} /* -------------------------------------------------------- type system -- */ .hd-eyebrow{ display:block;margin:0 0 clamp(14px,1.6vw,20px); font-size:11px;font-weight:600;letter-spacing:.19em;text-transform:uppercase; color:var(--hd-accent); } .hd-h1{ margin:0; font-family:var(--hd-serif);font-weight:400; font-size:clamp(2.5rem,6vw,4.75rem); line-height:1.02;letter-spacing:-.018em; text-wrap:balance; color:#fff;max-width:17ch; } .hd-h1 em{font-style:normal;color:var(--hd-gold-soft)} .hd-h2{ margin:0; font-family:var(--hd-serif);font-weight:400; font-size:clamp(2rem,3.9vw,3.35rem); line-height:1.07;letter-spacing:-.016em; text-wrap:balance; color:var(--hd-fg);max-width:19ch; } .hd-h2 em{font-style:normal;color:var(--hd-accent)} .hd-h2--wide{max-width:26ch} .hd-h3{ margin:0; font-family:var(--hd-serif);font-weight:400; font-size:clamp(1.6rem,2.4vw,2.15rem); line-height:1.12;letter-spacing:-.012em;text-wrap:balance;color:var(--hd-fg); } .hd-h3 em{font-style:normal;color:var(--hd-accent)} .hd-h3--wide{max-width:34ch} .hd-lede{ margin:0; max-width:58ch; font-size:var(--hd-body); line-height:1.66;color:var(--hd-fg-2); } .hd-lede+.hd-lede{margin-top:clamp(12px,1.3vw,17px)} .hd-hd{margin:0 0 clamp(24px,3.2vw,48px)} .hd-hd--tight{margin-bottom:clamp(22px,2.6vw,36px)} /* Outside a split header the lede still needs its gap from the heading. */ .hd-hd:not(.hd-hd--split)>.hd-lede{margin-top:clamp(18px,2vw,26px)} /* SPLIT SECTION HEADERS — move 2 in the head note. Eleven eyebrows, eleven headings and eight ledes is thirty pieces of apparatus introducing eleven bands. Stacked on a 1092px container the heading measures 19-26ch and the lede 58ch, so every section opening also leaves the right half empty. That is not air; air is space you gave, and this was space nothing wanted. The eyebrow and heading are one unit in .hd-hd__lead, the lede is the facing column in .hd-hd__body. TWO WRAPPERS, NOT SIX GRID CHILDREN, because placing loose children by nth-of-type reverses any section that carries two ledes: auto-placement fills the earliest empty cell, so with lede 1 pinned to row 2 lede 2 lands in row 1 ABOVE it. The evaluation header carries two ledes and did exactly that, rendering its second sentence first while DOM order stayed correct. Wrappers make it structural instead of positional, and the bug cannot come back. THIS IS NOT WHAT THE HERO DOES, deliberately. The hero's job is ONE claim, so it stays a single axis and the reader is never asked to choose between two columns before finishing the first sentence. A section header's job is claim plus orientation, which is two things, and a spread is the normal answer. */ /* BELOW THE BREAKPOINT THE SPREAD IS TWO STACKED BLOCKS, and stacked blocks need the gap the column-gap was providing. Without this the lede butts straight against the last line of the heading at every width under 1000 — which is every phone, i.e. the width he actually reads on. */ .hd-hd--split>.hd-hd__body{margin-top:clamp(18px,2.4vw,26px)} @media (min-width:1000px){ .hd-hd--split{ display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr); column-gap:clamp(36px,4.4vw,72px); align-items:start; } .hd-hd--split>.hd-hd__body{margin-top:0} } /* ------------------------------------------------------------- links --- */ .hd-more{ display:inline-flex;align-items:center;gap:10px; min-height:40px; font-size:var(--hd-detail);font-weight:600;letter-spacing:.005em; color:var(--hd-accent);text-decoration:none; border-bottom:1px solid transparent; transition:color .18s var(--hd-ease),border-color .18s var(--hd-ease); } .hd-more .ar{transition:transform .18s var(--hd-ease)} /* --hd-accent-h is the ground-aware hover: soft gold on navy, and DARKER gold on paper. Soft gold is 1.5:1 on paper and cannot be a hover state there. */ .hd-more:hover{color:var(--hd-accent-h);border-bottom-color:var(--hd-accent-h)} .hd-more:hover .ar{transform:translateX(4px)} .hd-btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; min-height:54px;padding:0 28px; font-family:var(--hd-sans);font-size:var(--hd-detail);font-weight:600;letter-spacing:.01em; text-decoration:none;border:1px solid transparent;border-radius:2px; cursor:pointer; transition:transform .18s var(--hd-ease),box-shadow .18s var(--hd-ease), background-color .18s var(--hd-ease),border-color .18s var(--hd-ease), color .18s var(--hd-ease); } .hd-btn .ar{transition:transform .18s var(--hd-ease)} .hd-btn:hover .ar{transform:translateX(4px)} .hd-btn--gold{color:#120C02;background:var(--hd-gold-fill)} .hd-btn--gold:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(217,155,27,.32)} .hd-btn--ghost{color:#fff;border-color:rgba(255,255,255,.32);background:transparent} .hd-btn--ghost:hover{border-color:rgba(255,255,255,.64);background:rgba(255,255,255,.08)} .hd-btn--ink{color:#fff;background:var(--hd-navy)} .hd-btn--ink:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(12,27,46,.26);background:#0E1F3A} :where(a,button,summary,input,select,textarea):focus-visible{ outline:2px solid var(--hd-accent);outline-offset:3px;border-radius:2px; } /* ---------------------------------------------------------- sections --- */ .hd-sec{padding:var(--hd-pad) 0} .hd-dark{background:var(--hd-navy)} .hd-dark-2{background:var(--hd-navy-deep)} /* The homepage stays on navy the whole way down (founder, 2026-09-10: paper after 3,750px of navy read as dark mode flipping to light mode and back). Sections alternate the three navies instead of switching ground. */ .hd-dark-3{background:var(--hd-navy-2)} /* The capital path, the standard, the founder and the position sections were built for paper and call the paper inks directly. On navy those inks resolve to their on-dark partners, so every component inside follows. */ #capital-path,#evaluate,#founder,#position{ --hd-ink:var(--hd-on-d);--hd-ink-2:var(--hd-on-d-2);--hd-ink-3:var(--hd-on-d-3); --hd-line-l:var(--hd-line-d);--hd-line-l2:var(--hd-line-d2); --hd-gold-deep:var(--hd-gold);--hd-paper-2:transparent; } /* The ink button was a navy block on navy; on this ground it is the outline. */ #capital-path .hd-btn--ink{color:#fff;background:transparent;border-color:var(--hd-line-d2)} #capital-path .hd-btn--ink:hover{color:#fff;background:rgba(255,255,255,.06);border-color:var(--hd-on-d-3)} #capital-path .hd-chip[aria-pressed="true"],#position .hd-chip[aria-pressed="true"]{ color:#120C02;background:var(--hd-gold);border-color:var(--hd-gold); } #capital-path .hd-chip[aria-pressed="true"]:hover,#position .hd-chip[aria-pressed="true"]:hover{ color:#120C02;background:var(--hd-gold-soft);border-color:var(--hd-gold-soft); } /* THE GROUND SWITCH, IN ONE PLACE. Seven variables, and every component follows. This is why the standard and the responsibility section could move to paper without a single duplicated component rule. */ .hd-paper{ background:var(--hd-paper); --hd-fg: var(--hd-ink); --hd-fg-2: var(--hd-ink-2); --hd-fg-3: var(--hd-ink-3); --hd-line: var(--hd-line-l); --hd-line-2: var(--hd-line-l2); --hd-accent: var(--hd-gold-deep); --hd-accent-h:#553B0E; color:var(--hd-ink); } /* MOVEMENT-INTERNAL RHYTHM — the reason this page is shorter than the control while carrying more space where it matters. Air belongs BETWEEN the movements, not evenly along the page. The control pays the same toll at every one of its ten seams, whether the ground changes or not. Here the seams INSIDE a movement close to roughly half, and the full measure is spent only where navy meets paper. Two sections on the same ground are chapters of one field, and reading them as one field is the whole point of having three movements instead of eleven bands. */ .hd-paper + .hd-paper, .hd-dark + .hd-dark, .hd-dark + .hd-dark-2{padding-top:clamp(38px,4.4vw,68px)} .hd-paper:has(+ .hd-paper), .hd-dark:has(+ .hd-dark), .hd-dark:has(+ .hd-dark-2){padding-bottom:clamp(38px,4.4vw,68px)} /* ========================================================================== THE DISCLOSURE PRIMITIVE — .hd-d One object, four places: the four questions, the three parties, the three Request Access questions, the three FAQs. Thirteen controls, one silhouette. IT SHIPS OPEN AND CSS CLOSES IT, which is the architecture he named on 2026-09-07. The panel has no closing rule of its own; the ONLY thing that collapses it is the html.hd-js block below, and that class is set by the inline script before first paint. With scripting off no rule matches, every answer renders, and the buttons are display:none - so nothing is hidden and nothing is dead. html:not(.hd-js) .hd-d__sum{display:none} <- no dead controls html.hd-js ... [aria-expanded=false] ... {display:none} <- closed THE STATE IS aria-expanded AND NOTHING ELSE. The CSS keys off the attribute directly, so the announced state and the visual state cannot drift apart - there is no class to forget to add. :has() is doing the work a parent selector was always needed for; it is why this primitive needs no wrapper class and no script beyond the nine inline lines. WHAT THIS COST. These were native
, and a
opens under the browser's own find-in-page. A button does not. That property is genuinely gone and it is in the report, not absorbed quietly. Everything else survives - a button is keyboard-native and screen-reader-native by construction. The 56px row is a target, not a link at the end of a list, and it clears the 40px floor. Everything inside inherits the ground-aware variables, so the same markup is correct on navy and on paper. */ .hd-d{border-bottom:1px solid var(--hd-line)} /* THE LABEL IS NOT INSIDE THE BUTTON, AND THAT IS FORCED RATHER THAN CHOSEN. The standard disclosure pattern puts the label in the button. Here the button is display:none when scripting is off - that is what stops it being a dead control - and a label inside it would go with it. It did, in the first build of this page: with JavaScript disabled the four questions, the three parties' summary lines and the six question headings all vanished while their answers stayed on screen. That is an amputated page, which is the one thing this architecture exists to prevent, and it is the exact failure the client's rule names: an investor should never have to tap - or enable a script - to discover that something exists. So the row holds the label and the button holds only the ring, and the button takes its accessible name from the label by aria-labelledby. The name is identical, no word is repeated, and with scripting off the reader gets every question with every answer beneath it and no control at all. THE WHOLE ROW IS THE POINTER TARGET, via data-door-head on it, so nothing is lost by shrinking the button: the button remains the keyboard and screen reader path and the row is a redundant pointer target layered over it. */ .hd-d__row{ display:flex;align-items:center;gap:clamp(14px,1.6vw,22px); min-height:56px;padding:13px 0; color:var(--hd-fg); transition:color .18s var(--hd-ease); } html.hd-js .hd-d__row{cursor:pointer} html.hd-js .hd-d__row:hover{color:var(--hd-accent)} html.hd-js .hd-d__row:hover .hd-d__n{color:var(--hd-accent)} html.hd-js .hd-d__row:hover .hd-d__ic{border-color:var(--hd-accent)} .hd-d__label{ flex:1 1 auto;min-width:0; font-size:var(--hd-body);font-weight:600;line-height:1.35;letter-spacing:-.004em; } .hd-d__n{ flex:0 0 auto; font-size:12px;font-weight:600;letter-spacing:.1em; font-variant-numeric:tabular-nums; color:var(--hd-fg-3); transition:color .18s var(--hd-ease); } /* 44px of hit area around a 24px ring: the button is now a discrete control rather than a full-width row, so it has to clear the 40px floor on its own. */ .hd-d__sum{ -webkit-appearance:none;appearance:none; display:inline-flex;align-items:center;justify-content:center; flex:0 0 auto;margin-left:auto; width:44px;height:44px;padding:0; background:none;border:0;border-radius:50%; font:inherit;color:inherit;cursor:pointer; } /* The affordance: a 24px ring with a plus that loses its vertical bar when open. currentColor, so it follows the ground and the hover state without a second declaration. */ .hd-d__ic{ position:relative;flex:0 0 auto; width:24px;height:24px; border:1px solid var(--hd-line-2);border-radius:50%; transition:border-color .2s var(--hd-ease); } .hd-d__ic::before,.hd-d__ic::after{ content:"";position:absolute;top:50%;left:50%; background:currentColor;transform:translate(-50%,-50%); transition:opacity .2s var(--hd-ease); } .hd-d__ic::before{width:10px;height:1.5px} .hd-d__ic::after{width:1.5px;height:10px} /* GOLD MEANS YOU DID THIS. Nothing arrives gold; the ring becomes gold because the reader opened it, which is how the page teaches its interaction without a legend. Same rule on the operator chevron. */ .hd-d__sum[aria-expanded="true"] .hd-d__ic::after{opacity:0} .hd-d__sum[aria-expanded="true"] .hd-d__ic{border-color:var(--hd-accent)} .hd-d__sum:hover .hd-d__ic{border-color:var(--hd-accent)} .hd-d__a{ padding:0 0 clamp(18px,2vw,26px); max-width:58ch; } .hd-d__a p{ margin:0 0 12px; font-size:var(--hd-detail);line-height:1.66;color:var(--hd-fg-2); } .hd-d__a p:last-child{margin-bottom:0} /* ---- THE TWO RULES THAT MAKE THE ARCHITECTURE, AND NOTHING ELSE ---- */ html:not(.hd-js) .hd-d__sum{display:none} html.hd-js .hd-d:has(.hd-d__sum[aria-expanded="false"])>.hd-d__a{display:none} /* An answer arriving is a small event, not a performance. Off under prefers-reduced-motion by the global rule at the foot of this file. */ html.hd-js .hd-d>.hd-d__a{animation:hd-open .26s var(--hd-ease) both} @keyframes hd-open{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}} /* ============================================================== 1. HERO == ITEM 1 PROTECTS THIS SECTION. Its four prose blocks went to the proof strip. ONE COLUMN, ONE READING EDGE. The control sets the headline and the supporting paragraph side by side, which puts two voices in the first viewport before the reader has finished either. Two scrims, stacked and explicitly layered — a flat darkener over the frame and a bottom-weighted gradient under the copy. Explicit z-index on all three layers (image 0, scrim 1, content 2), because a stacking context that works by accident stops working the first time someone adds a transform. */ .hd-hero{position:relative;isolation:isolate;background:var(--hd-navy-deep);overflow:hidden} .hd-hero__img{ position:absolute;inset:0;z-index:0; width:100%;height:100%;object-fit:cover;object-position:50% 42%; } .hd-hero__scrim{ position:absolute;inset:0;z-index:1;pointer-events:none; background: linear-gradient(180deg,rgba(5,13,26,.60) 0%,rgba(5,13,26,.42) 26%,rgba(5,13,26,.56) 62%,rgba(5,13,26,.90) 100%), linear-gradient(94deg,rgba(5,13,26,.64) 0%,rgba(5,13,26,.54) 40%,rgba(5,13,26,.42) 70%,rgba(5,13,26,.60) 100%); } .hd-hero__in{ position:relative;z-index:2; padding-block:clamp(72px,11vw,164px) clamp(56px,7vw,104px); } .hd-hero__lede{ margin:clamp(22px,2.6vw,34px) 0 0;max-width:54ch; font-size:var(--hd-body);line-height:1.7; color:#E6EBF2; } .hd-hero__cta{ display:flex;flex-wrap:wrap;gap:14px; margin-top:clamp(26px,3vw,40px); } .hd-hero__cta .hd-btn{flex:1 1 260px;max-width:340px} /* ==================================================== 2. PROOF AND SCALE ITEM 2. "An investor should see credibility before reading a lot of copy." THIS BAND IS NEVER DISCLOSED, and that is not an oversight. Its entire job is to be read before anything else; putting a control on it would invert the instruction it exists to satisfy. It is the loudest type on the page after the headline. The grid is auto-fit, so uncommenting the two pending figures in the markup takes it from two cells to four with no change here. */ .hd-scale{background:var(--hd-navy-deep);padding-block:clamp(40px,5vw,76px)} /* SUBGRID, so the numerals share a baseline. The two labels are wildly different lengths — "In real estate since" is three words and "Hotel properties developed by Capstaq's operating partners" is eight — so as independent cells the 79 hung 60px below the 2002 and the strip read as two unrelated blocks rather than one row of proof. Each cell spans the dl's two rows and inherits them, which aligns the labels to one top and the numerals to one baseline whatever the labels do. Browsers without subgrid fall back to two auto rows per cell, which is exactly today's behaviour. The label tracking comes down from .19em to .13em for the same reason: at .19em an eight-word label in 11px caps runs to four lines and turns the quietest element in the band into the tallest. */ .hd-scale__nums{ display:grid;gap:clamp(26px,3.4vw,56px); grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr)); grid-template-rows:auto auto; } .hd-scale__nums>div{ display:grid;grid-row:span 2;grid-template-rows:subgrid; align-content:start;gap:clamp(10px,1.2vw,16px); } .hd-scale__nums dt{ margin:0;max-width:34ch;align-self:start; font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase; line-height:1.5; color:var(--hd-gold); } .hd-scale__nums dd{ margin:0; font-family:var(--hd-serif);font-weight:400; font-size:clamp(3rem,6vw,4.75rem);line-height:.95;letter-spacing:-.02em; color:#fff; font-variant-numeric:tabular-nums; } .hd-scale__nums dd i{font-style:normal;color:var(--hd-gold)} .hd-scale__marks{ display:grid;gap:clamp(10px,1.4vw,18px); margin:clamp(30px,3.6vw,52px) 0 0; padding-top:clamp(24px,2.8vw,34px); border-top:1px solid var(--hd-line-d); } @media (min-width:820px){.hd-scale__marks{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(32px,4vw,72px)}} .hd-scale__marks span{ display:block;max-width:52ch; font-size:var(--hd-detail);line-height:1.62;color:var(--hd-on-d-2); } /* --- asset classes ------------------------------------------------------- THE TYPE IS OFF THE PHOTOGRAPH — move 4 in the head note. The control sets the category and the count over the image, which is ten text rectangles on five photographs at 11px, each depending on a scrim tuned until the worst pixel of the worst photograph behaves. Here the image is an image and the type is underneath it on the section ground. Landscape, not portrait: the control's 4:5 tiles stack into a 620px wall at 390 before the reader has met an operator. 3:2 makes the same five links a strip. */ .hd-classes{background:var(--hd-navy-deep);padding-block:clamp(30px,3.6vw,52px)} .hd-classes__in{display:grid;gap:clamp(14px,1.8vw,26px);grid-template-columns:repeat(2,minmax(0,1fr))} @media (min-width:640px){.hd-classes__in{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (min-width:980px){.hd-classes__in{grid-template-columns:repeat(5,minmax(0,1fr))}} .hd-tile{display:block;text-decoration:none;min-width:0} .hd-tile__fig{ display:block;position:relative;overflow:hidden; aspect-ratio:3/2;border-radius:2px;background:var(--hd-navy-2); } .hd-tile__fig img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; transition:transform .55s var(--hd-ease); } .hb-tile__label{ display:block;padding-top:clamp(12px,1.4vw,16px); font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase; color:#fff; } .hb-tile__n{ display:block;margin-top:7px; font-size:var(--hd-fine);font-weight:400;letter-spacing:0;text-transform:none; color:var(--hd-gold); font-variant-numeric:tabular-nums; } .hd-tile:hover .hd-tile__fig img{transform:scale(1.045)} .hd-tile:hover .hb-tile__n{color:var(--hd-gold-soft)} /* Five divides into five and into nothing else, so between the 2-up and the 5-up the last tile carries the remainder rather than leaving a hole. */ @media (max-width:639px){.hd-tile:last-child{grid-column:1 / -1}.hd-tile:last-child .hd-tile__fig{aspect-ratio:3/1}} @media (min-width:640px) and (max-width:979px){.hd-tile:last-child{grid-column:span 2}.hd-tile:last-child .hd-tile__fig{aspect-ratio:3/1}} /* ================= 3. OPERATOR CREDENTIALS AND PROJECT EVIDENCE ========== THE DOORS, TAKEN FROM INTERACTIVE. The line between what is on the closed card and what is behind it is drawn by one test, his: does closing this hide DEPTH, or hide PRESENCE? ON THE CARD, ALWAYS: photograph · name · what it is · THE NAME OF EVERY FIELD PUBLISHED · the current project, entire. BEHIND THE DOOR: each field's value · the operator's statement · the partnership link. THE FIELD NAMES ARE THE DESIGN. OGH publishes two fields where Storage Caves publishes five, and that asymmetry is the one place on this page where the record is visibly incomplete. It has to be legible without a tap, so the
stays and only the
closes. Closed, the names lay out as a wrapped row divided by hairlines: a short row beside a long one, no count, no denominator, nothing marking the absence. Open, they return to the stacked label-over-value the control uses, unchanged. NO PER-OPERATOR EMPHASIS CLASS. The Hilton Owner Advisory Council seat is the strongest credential here and the temptation is to wash that row gold. That is the mistake he caught on the deployed page. If a fact needs colour to land, the fact is the problem. */ .hd-ops{display:grid} .hd-op{ display:grid;gap:clamp(26px,3.4vw,60px); padding:clamp(24px,3vw,44px) 0; border-top:1px solid var(--hd-line); } .hd-op:first-child{border-top:0;padding-top:0} /* BASE RULE FIRST, OVERRIDE SECOND. Written the other way round these tie on specificity, the later one wins, aspect-ratio survives alongside height:100%, and the figure blows out of its own grid track and sits under the facing column's text. That bug was live in this project on 2026-09-06 and passed every right-edge overflow sweep, because nothing left the page. min-width:0 is belt and braces: a grid item defaults to min-width:auto and can push past its track. DO NOT REORDER THESE TWO. */ .hd-op__media{ position:relative;isolation:isolate;margin:0;aspect-ratio:3/2;overflow:hidden; min-width:0; border-radius:2px;background:var(--hd-navy-deep); } @media (min-width:900px){ .hd-op{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);align-items:stretch} .hd-op:nth-child(even)>.hd-op__media{order:2} .hd-op__media{aspect-ratio:auto;height:100%;min-height:440px} } .hd-op__media img{ position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover; transition:transform .5s var(--hd-ease); } .hd-op__media:hover img{transform:scale(1.03)} .hd-op__media::after{ content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(180deg,rgba(5,13,26,.30) 0%,rgba(5,13,26,0) 44%,rgba(5,13,26,.40) 100%); } .hd-op__body{display:flex;flex-direction:column;min-width:0} /* The head: name and description on the left, the chevron on the right, and the whole block is the pointer target. The button is the keyboard and screen-reader path and it stays a real button; the head is a redundant pointer target layered over it, which is how every list a person has ever used behaves. */ .hd-op__id{ display:grid;grid-template-columns:minmax(0,1fr) auto; column-gap:clamp(14px,1.6vw,22px);align-items:start; } .hd-op__name{ grid-column:1;margin:0; font-family:var(--hd-serif);font-weight:400; font-size:clamp(1.75rem,2.6vw,2.375rem);line-height:1.1;letter-spacing:-.016em; color:#fff; } .hd-op__what{ grid-column:1;margin:16px 0 0;max-width:46ch; font-size:var(--hd-body);line-height:1.64;color:var(--hd-on-d-2); } /* THE BUTTON CARRIES NO TEXT. A chevron, with the operator's name as an aria-label - an attribute rather than rendered copy, so a control was added and the page's word count did not move. aria-expanded already tells a screen reader which way it goes, so "Open"/"Close" was redundant before it was over budget. 44px clears the 40px floor with room. */ .hd-op__toggle{ -webkit-appearance:none;appearance:none; grid-column:2;grid-row:1; display:inline-flex;align-items:center;justify-content:center; width:44px;height:44px;padding:0; background:none;border:1px solid var(--hd-line-d2);border-radius:50%; color:#fff;cursor:pointer; transition:border-color .2s var(--hd-ease),color .2s var(--hd-ease); } .hd-op__toggle:hover{border-color:var(--hd-gold);color:var(--hd-gold)} /* GOLD MEANS YOU DID THIS. Nothing arrives gold; the ring becomes gold because the reader opened it. Same rule as the .hd-d__ic ring, so the page teaches one interaction rather than two. */ .hd-op__toggle[aria-expanded="true"]{border-color:var(--hd-gold);color:var(--hd-gold)} .hd-op__chev{ width:9px;height:9px; border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor; transform:translateY(-2px) rotate(45deg); transition:transform .26s var(--hd-ease); } .hd-op__toggle[aria-expanded="true"] .hd-op__chev{transform:translateY(2px) rotate(-135deg)} /* NO DEAD CONTROLS. Without hd-js nothing is closed, so a chevron would open what is already open. */ html:not(.hd-js) .hd-op__toggle{display:none} html.hd-js .hd-op__id{cursor:pointer} .hd-op__creds{ margin:clamp(18px,2vw,24px) 0 0;padding-top:clamp(16px,1.8vw,22px); border-top:1px solid var(--hd-line-d); display:grid;gap:14px; } .hd-op__creds dt{ margin:0 0 5px; font-size:11px;font-weight:600;letter-spacing:.17em;text-transform:uppercase; color:var(--hd-gold); } .hd-op__creds dd{ margin:0;max-width:46ch; font-size:var(--hd-detail);line-height:1.62;color:var(--hd-on-d-2); } .hd-op__creds dd b{font-weight:600;color:#fff} /* THE ROOM. Two objects, and neither is a fact an investor weighs: an operator's statement about working with Capstaq is promotion, and the partnership link is a route. Closing them hides no absence. */ .hd-op__more{margin:0} .hd-op__quote,.hd-op__note{margin:clamp(20px,2.2vw,26px) 0 0} .hd-op__note b{ display:block;margin-bottom:8px; font-size:11px;font-weight:600;letter-spacing:.17em;text-transform:uppercase; color:var(--hd-gold); } .hd-op__note p{margin:0;max-width:46ch;font-size:var(--hd-detail);line-height:1.64;color:var(--hd-on-d-2)} .hd-op__quote blockquote{ margin:0;max-width:46ch; font-family:var(--hd-serif);font-weight:400; font-size:clamp(1.125rem,1.6vw,1.3125rem);line-height:1.4;letter-spacing:-.008em; color:#fff; } .hd-op__quote figcaption{margin-top:14px;font-size:var(--hd-fine);color:var(--hd-on-d-3)} .hd-op__quote cite{font-style:normal;font-weight:600;color:#fff} .hd-op__foot{margin-top:clamp(18px,2vw,24px)} /* THE PROJECT IS FLAT TYPE ON THE SECTION GROUND, AND IT NEVER CLOSES. It is the "proof" in headline / key fact / proof, and the status word is the honest limit on the whole section - the reason nothing here says completed. The control gives it a raised panel, a border, a gold left rule and a dotted pill: four devices carrying one status word. The word carries the meaning. [data-status] stays so a future filter can read it without re-parsing text, and it styles NOTHING - colour-coding the four permitted words would rank them, and ranking "operating" above "planned" is a claim we have no business making on a homepage. */ .hd-op__project{ margin:clamp(18px,2vw,24px) 0 0;padding-top:clamp(16px,1.8vw,22px); border-top:1px solid var(--hd-line-d); } .hd-op__plabel{ display:block;margin-bottom:12px; font-size:11px;font-weight:600;letter-spacing:.17em;text-transform:uppercase; color:var(--hd-gold); } .hd-op__pname{ margin:0;font-size:var(--hd-body);font-weight:600;line-height:1.35; color:#fff;letter-spacing:-.004em; } .hd-op__pin{ display:block;margin-top:5px; font-size:var(--hd-fine);font-weight:400;letter-spacing:0;color:var(--hd-on-d-3); } .hd-op__pstatus{ margin:14px 0 0;max-width:46ch; font-size:var(--hd-detail);line-height:1.62;color:var(--hd-on-d-2); } .hd-pill{ display:inline-flex;align-items:center; margin-right:9px;padding:3px 9px; font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase; color:#fff; border:1px solid var(--hd-line-d2);border-radius:2px; white-space:nowrap;vertical-align:2px; } .hd-op__project .hd-more{margin-top:12px} /* ======================= THE CLOSED CARD ======================= Everything below is inside html.hd-js, so with scripting off not one of these rules matches and the card is the control's card. */ /* 1. THE VALUES GO, THE NAMES STAY. */ html.hd-js .hd-op:has(.hd-op__toggle[aria-expanded="false"]) .hd-op__creds dd{display:none} html.hd-js .hd-op:has(.hd-op__toggle[aria-expanded="false"]) .hd-op__more{display:none} /* 2. THE NAMES BECOME A ROW. No divider character, because a separator written as ::before content is generated text - the kind of thing a word count does not see and a reader does; and no hairline rules either, because flex wrapping puts one at the start of every line after the first, which reads as a stray tick. Gap and the gold uppercase do the separating. NO COUNT AND NO DENOMINATOR anywhere in this row. A short row beside a long one is a comparison. A fraction is a score. */ html.hd-js .hd-op:has(.hd-op__toggle[aria-expanded="false"]) .hd-op__creds{ display:flex;flex-wrap:wrap;gap:10px 22px; padding-top:clamp(14px,1.6vw,18px); } html.hd-js .hd-op:has(.hd-op__toggle[aria-expanded="false"]) .hd-op__creds>div{margin:0} html.hd-js .hd-op:has(.hd-op__toggle[aria-expanded="false"]) .hd-op__creds dt{margin:0} /* 3. PHONE FIRST: BELOW 900 A CLOSED CARD IS A THUMBNAIL BESIDE THE NAME. At 390 three full-width photographs cost 780px of scroll before a reader reaches a single fact, and the imagery is "representative of each partner's asset type", never a photograph of completed property - this section's own disclaimer says so. It is the lowest-evidence object on the card and it was taking the most room. The photograph returns at full 3:2 the moment the door opens, which is what "tap for more" means here. THE DESCRIPTION GOES FULL WIDTH under the thumbnail rather than beside it. Beside a 110px thumbnail at 390 it wraps to six lines in a 230px column, which is narrower than anything else on the page and reads as a caption rather than as the sentence that says what the firm is. .hd-op__body and .hd-op__id go display:contents so the name, the description, the credentials and the project become grid items of the card itself and can be placed against the thumbnail. Both are styling wrappers carrying no role, which is the only kind of element display:contents may be used on - never the
. */ @media (max-width:899px){ html.hd-js .hd-op:has(.hd-op__toggle[aria-expanded="false"]){ grid-template-columns:clamp(104px,26vw,180px) minmax(0,1fr) auto; column-gap:clamp(16px,3.4vw,24px);row-gap:0; align-items:start; } html.hd-js .hd-op:has(.hd-op__toggle[aria-expanded="false"]) .hd-op__body, html.hd-js .hd-op:has(.hd-op__toggle[aria-expanded="false"]) .hd-op__id{display:contents} html.hd-js .hd-op:has(.hd-op__toggle[aria-expanded="false"]) .hd-op__media{ grid-column:1;grid-row:1;aspect-ratio:4/3; } html.hd-js .hd-op:has(.hd-op__toggle[aria-expanded="false"]) .hd-op__name{ grid-column:2;grid-row:1;align-self:center; font-size:clamp(1.3125rem,5vw,1.625rem); } html.hd-js .hd-op:has(.hd-op__toggle[aria-expanded="false"]) .hd-op__toggle{ grid-column:3;grid-row:1;align-self:center; } html.hd-js .hd-op:has(.hd-op__toggle[aria-expanded="false"]) .hd-op__what{ grid-column:1 / -1;grid-row:2; margin-top:clamp(14px,2.4vw,20px);font-size:var(--hd-detail);max-width:none; } html.hd-js .hd-op:has(.hd-op__toggle[aria-expanded="false"]) .hd-op__creds{ grid-column:1 / -1;grid-row:3; } html.hd-js .hd-op:has(.hd-op__toggle[aria-expanded="false"]) .hd-op__project{ grid-column:1 / -1;grid-row:4; } } /* ======================= COMPARE ======================= The same three articles under a different layout: THE SAME DOM NODES, so there is no second copy of a credential that can fall out of agreement with the cards. Desktop only, because three columns at 390 is a horizontal scroller and not a comparison - and below the breakpoint home-d.js removes the switch rather than disabling it, so there is no dead control. THE EMPTY CELLS ARE THE POINT. Every column carries a slot for every field in the same order, so OGH's three missing fields are HOLES rather than a shorter card. No dash, no "TBD", no "not published": nothing at all. The row hairlines are a table rule across all three columns, not a mark on the absence - they are what makes the emptiness read as a hole. Row heights are measured in home-d.js rather than done with subgrid. Subgrid would need display:contents on every wrapper between the grid and the cells, INCLUDING the credentials
, and taking a list out of the box tree to win a layout argument is not a trade worth making on a page whose argument is that the record is legible. */ .hd-views{display:flex;justify-content:flex-end;margin:0 0 clamp(16px,1.8vw,24px)} .hd-views[hidden]{display:none} .hd-views__set{ display:inline-flex;gap:2px;padding:3px; border:1px solid var(--hd-line-d);border-radius:3px; } .hd-view{ -webkit-appearance:none;appearance:none; display:inline-flex;align-items:center;justify-content:center; width:40px;height:40px;padding:0; background:none;border:0;border-radius:2px; color:var(--hd-on-d-3);cursor:pointer; transition:color .18s var(--hd-ease),background-color .18s var(--hd-ease); } .hd-view:hover{color:#fff} .hd-view[aria-pressed="true"]{color:var(--hd-navy);background:var(--hd-gold)} @media (max-width:879px){.hd-views{display:none}} .hd-ops[data-view="compare"]{ grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:clamp(20px,2.4vw,40px); align-items:start; } /* NO VERTICAL RULE BETWEEN COLUMNS. A border plus its padding on two of three columns makes those two narrower than the first, which changes the photograph's height and pushes every row out of line by a few pixels - the one defect a comparison cannot carry. The row hairlines already make this a table; the gap does the separating. */ .hd-ops[data-view="compare"] .hd-op{display:block;padding:0;border-top:0} .hd-ops[data-view="compare"] .hd-op>.hd-op__media{ order:0;aspect-ratio:16/9;height:auto;min-height:0;margin-bottom:22px; } .hd-ops[data-view="compare"] .hd-op__toggle{display:none} .hd-ops[data-view="compare"] .hd-op__name{font-size:1.375rem} .hd-ops[data-view="compare"] .hd-op__what{margin-top:10px;font-size:var(--hd-detail)} .hd-ops[data-view="compare"] .hd-op__creds{display:block;padding-top:0;border-top:0} .hd-ops[data-view="compare"] .hd-op__creds>div{ padding:14px 0;border-top:1px solid var(--hd-line-d); } .hd-ops[data-view="compare"] .hd-op__quote blockquote{font-size:1.0625rem} .hd-ops[data-view="compare"] .hd-op__project{margin-top:0} /* A spacer holds its row's height and contains nothing. aria-hidden in the markup home-d.js writes, so it is never announced as an empty term. */ .hd-ops[data-view="compare"] [data-spacer]{padding:14px 0} /* SIDE BY SIDE COMPARES ONLY WHAT ALL THREE PUBLISH (founder, 2026-09-10: the grid view had "a bunch of empty cells"). Wealth publishes figures, history and a quote; OGH publishes leadership only; Storage Caves adds history, scale and scope. The comparison is photo, name, what they do, who leads it and the current project. Everything else stays in the one-at-a-time view. */ .hd-ops[data-view="compare"] .hd-figs, .hd-ops[data-view="compare"] .hd-op__quote, .hd-ops[data-view="compare"] .hd-op__note, .hd-ops[data-view="compare"] [data-field]:not([data-field="leadership"]){display:none} /* The aligned min-height was being spread between name and description in the shorter cards, so OGH's description sat 12px higher than the other two. */ .hd-ops[data-view="compare"] .hd-op__id{align-content:start} .hd-ops__close{ margin-top:clamp(24px,2.6vw,36px); padding-top:clamp(18px,2vw,24px); border-top:1px solid var(--hd-line-d2); } .hd-limit{margin:0;max-width:64ch;font-size:var(--hd-body);line-height:1.66;color:var(--hd-on-d-2)} .hd-note{ margin:clamp(16px,1.8vw,22px) 0 0; font-size:var(--hd-fine);line-height:1.64;color:var(--hd-on-d-3);max-width:74ch; } .hd-secfoot{margin-top:clamp(22px,2.4vw,32px)} /* ========================================================= 4. CAPITAL PATH ITEM 4, kept and not touched. The paper movement opens here: this is the first thing on the page the investor is asked to do. NO CARD. The control sets the answer in a white panel with a shadow, which on a paper ground is a third surface saying "this is a thing". A 2px gold rule and the type say it with one. The panel is the only response on the page, so it does not need a box to be found. ALL FOUR PANELS ARE IN THE MARKUP, not in the script. See home-d.js. */ .hd-path{display:grid;gap:clamp(34px,4.4vw,72px);align-items:start} @media (min-width:980px){.hd-path{grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr)}} .hd-path__ask>.hd-lede{margin-top:clamp(18px,2vw,26px)} /* THE CHIPS ARE HIDDEN UNTIL THE SCRIPT SAYS OTHERWISE. They are the only control on this page that needs JavaScript, and with scripting off they would be four buttons that do nothing over a panel they cannot change. Hidden by default and revealed by home-d.js setting data-js on , so the no-JS reader gets one complete, correct panel and no dead controls — and, unlike a