/* Structure and depth only. Every colour, gradient and shadow comes from the token custom properties, so the four concepts are four palettes of one interface rather than four stylesheets. Three things arrive from the token package and are used throughout: --gradient-* composed gradients, defined once and re-derived in dark mode --shadow-1..3 elevation, tinted with the concept's own ink rather than black --ring the focus signal None of them are declared here. If a surface needs a new one it belongs upstream. */ *{box-sizing:border-box;margin:0;padding:0} /* The page ground: the flat surface colour with one very soft brand glow whose centre sits above the top of the document, so only its shoulder is ever on screen. It is full-bleed because it lives on the body — the same wash painted on `main` would be a 1140px rectangle with two visible vertical edges. It tiles rather than sitting once at the top. Painted no-repeat across the first 560px, the wash was gone by the second screenful and every page below the fold was plain white — which is what made the colour look like it had been spent on the header and the cards and nothing else. The tile is 150vh, so the two blooms inside --gradient-page arrive about one and a half screens apart however long the document is: a short page gets one, a long one keeps receiving them. Sizing it in viewport units rather than pixels is what keeps that true on a phone as well as a desktop. It is still deliberately weak. An earlier attempt ran the full-strength glow across the whole page and turned every interior view mint; a wash you can name is a wash that is too strong. This one should only be missed when it is removed. */ body{font-family:var(--font-body);color:var(--on-surface);line-height:1.55; background-color:var(--surface); background-image:var(--gradient-page); background-repeat:repeat-y; background-size:100% 150vh; background-position:center top; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} /* Nothing may be wider than the screen. A full-bleed hero beside padded content is how a page ends up scrolling sideways on a phone. */ img,video,svg,table{max-width:100%} a{color:var(--brand);text-decoration:none} a:not(.btn):not(.tile):not(.feature):not(.brand):not(.chip):not(.theme-chip):not(.gallery-open):not(.plan):not(.file):hover{ text-decoration:underline;text-underline-offset:3px; text-decoration-color:color-mix(in srgb,currentColor 45%,transparent)} /* The page width, and it is ONE number for the whole application: 78 views are laid out inside `.wrap`, so this token is where the site's margins are decided. ~~1140px~~ was chosen against a laptop and looked like a column down the middle of a large monitor — on a 2,500px display it left more than half the screen empty and made a property card 350px wide, which is the size at which photography stops selling anything. 1760px, and it is a CAP rather than a target: the page still centres, and a line of prose is still capped in `ch` by `.lede`, `.prose` and `.section-head p`, so widening the frame never widens a paragraph past the point it is readable. The gutter grows with the viewport instead of sitting at a flat 24px, because a fixed gutter that is right on a phone is a hairline on a monitor. */ :root{--page-max:1760px} .wrap{width:100%;max-width:var(--page-max);margin:0 auto; padding:0 clamp(20px,2.6vw,48px)} /* Vertical rhythm for a page whose content starts straight after the header. It used to be an inline `padding:44px 0` on the same element as .wrap, and the shorthand also set the horizontal padding to zero — so on a 390px phone every headline, filter bar and price on the site sat hard against the glass. Longhands, and in a class, so .wrap keeps its own gutter. */ .pad{padding-top:44px;padding-bottom:44px} .pad-lead{padding-top:52px} .pad-page{padding-top:64px;padding-bottom:64px} /* ---- header -------------------------------------------------------------- */ /* The top padding is LARGER than the bottom, and deliberately: this is the first element on the page, so its top edge is the window's and the logo sat 18px from the glass — too close to read as a margin at all (reported on the home page, 17 September 2026). The bottom stays 18px because the gradient rule below the nav is spaced against the links, not against the top of the page. */ .nav{display:flex;align-items:center;justify-content:space-between;gap:22px; padding:clamp(26px,2.4vw,34px) 0 18px;position:relative;flex-wrap:wrap} /* A rule that starts as a border and ends as nothing. A flat 1px line across the full width is the single most dated thing on a page like this. */ .nav::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px; background:var(--gradient-rule)} /* The company lockup, used whole rather than rebuilt from a mark and type. Two files: the supplied one, and a version with the ink reversed out to bone. Roughly half the artwork is near-black, so on a dark header the original reads as a lone green triangle — which is what made it look timid. Visibility is decided ONLY here. Sizing lives on .brand-logo and deliberately sets no display property: a (0,2,0) sizing rule outranking a (0,2,0) swap rule is how both versions ended up on screen at once. */ /* order:0, not order:1. This rule spent a while behind a nonsense ancestor chain and so never applied; the moment the chain was deleted the `order:1` inside it sent the lockup to the right-hand end of the header, past the navigation. The lockup is the first thing in the DOM and must be the first thing in the row. */ .nav .brand{display:flex;align-items:center;flex:0 0 auto;order:0} .brand-logo{height:52px;width:auto;max-width:min(60vw,300px);object-fit:contain} .logo-on-light{display:block} .logo-on-dark{display:none} [data-theme="dark"] .logo-on-light{display:none} [data-theme="dark"] .logo-on-dark{display:block} [data-theme="light"] .logo-on-light{display:block} [data-theme="light"] .logo-on-dark{display:none} /* :not(.btn) matters. `.nav a` is (0,1,1) and `.btn` only (0,1,0), so without this the nav's muted link colour wins over a button's own text colour — which in light mode painted "Sign in" dark green on dark green in all three concepts. Scoping it here fixes the cause rather than patching each button. */ .nav a:not(.btn){font-size:13px;color:var(--on-surface-muted);transition:color .2s ease} .nav-links{display:flex;align-items:center;gap:22px;flex:1 1 auto} .nav-links a:not(.btn):hover{color:var(--brand)} /* Where you are. Colour alone would carry this for most people and for nobody reading in a high-contrast mode, so weight and an underline carry it too — and `aria-current="page"` in the markup carries it for a screen reader. Weight matches `.surface-nav a.is-here` in portal.css: the signed-in navigation has always marked the current tab this way and two different signals for one idea is one to unlearn. The underline is an inset shadow rather than a border ON PURPOSE. The mobile breakpoint gives every nav link a 1px bottom border as a divider, and `.nav-links a:not(.btn)` outranks the `.nav-links a` that sets it — so a border here would quietly erase the dividers on every phone. A shadow does not enter that cascade, and it does not occupy layout, so nothing shifts. */ .nav-links a:not(.btn).is-here{color:var(--brand);font-weight:600; box-shadow:inset 0 -2px 0 var(--brand)} .nav-gap{margin-left:auto} .nav-phone{display:inline-flex;align-items:center;gap:9px;font-weight:600; white-space:nowrap} .nav-phone .dot{display:inline-flex;align-items:center;justify-content:center; width:31px;height:31px;border-radius:50%;flex:0 0 auto; background:var(--gradient-brand-soft);color:var(--on-brand);font-size:14px; box-shadow:var(--shadow-brand)} .nav a.nav-phone:not(.btn){color:var(--on-surface);font-size:14px} /* The hamburger exists only below the breakpoint. Hiding it here rather than showing it there means a wide viewport never renders it, even for one frame. */ /* ~~`display:flex` on the BUTTON, with the three bars stretched by `align-items`.~~ Reported from an iPhone, 12 September 2026: the button rendered as an empty square — the box styles applied, the bars did not. **Safari does not lay a `