/* ───────────────────────────────────────────────────────────── Bergamot · the home page Tokens come from /_ds/bergamot.css (DS v3.1.0) — never edit it. Light (paper) is the only ground here: . The shared mockup chrome (m.css) was folded in when this page was promoted out of /mockups/. Only what this page actually uses came with it — the paper ground, the wordmark mask and the reveal. The lockup, the invitation, the mark, the fruit and the wordless footer stayed behind: they belonged to sibling directions, not to this one. ───────────────────────────────────────────────────────────── */ /* ── the paper ground ──────────────────────────────────────── */ body { min-height: 100vh; position: relative; } :root[data-theme="light"] .bergamot-grain::before { mix-blend-mode: multiply; opacity: .038; } /* ── the wordmark ────────────────────────────────────────────── The svg box is 319x105 but its INK is x 29-284, y 26.5-85.5 (measured); the element is sized to the ink and the mask is scaled/offset so the glyphs sit flush with the box — the b lands exactly on the grid. size: 319/255 x 105/59; position: 29/(319-255) x 26.5/(105-59). */ .wordmark { aspect-ratio: 257/61; background-color: var(--fg); -webkit-mask: url("/assets/bergamot-wordmark-white.svg") 45.16% 57.95% / 124.12% 172.13% no-repeat; mask: url("/assets/bergamot-wordmark-white.svg") 45.16% 57.95% / 124.12% 172.13% no-repeat; } /* ── reveal ──────────────────────────────────────────────────── Gated behind an html.js class the document sets inline, so a reader with scripts blocked — or a printout — gets a plain document, never a page of invisible text. */ .js .rv { opacity: 0; transform: translateY(var(--reveal-rise)); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); /* home.js passes --rv-i, the element's index in the reveal order, and nothing else. The interval is a design decision and lives here. */ transition-delay: calc(var(--rv-i, 0) * 90ms); } .js .rv.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js .rv { opacity: 1; transform: none; transition: none; } } @media print { .js .rv { opacity: 1; transform: none; } } /* ───────────────────────────────────────────────────────────── A2 · the manifesto, with the plate — the page's own composition. Tokens come from _ds/bergamot.css and the shared chrome from m.css; neither is edited here. Nothing in this file is inline in the document: the markup carries no style attribute and no style block, so every declaration on the page lives in a stylesheet. ───────────────────────────────────────────────────────────── */ /* ── A2 · the manifesto, with the plate ────────────────────── ONE GOVERNING QUANTITY. --t is the claim's type size, and it is the only thing in this file measured against the viewport. Every width, gutter, interval and the drawing itself are multiples of it. That is the whole point: with one variable there is only one thing to get right, so the page cannot be correct at one window size and broken at another — which is exactly what a pile of per-viewport patches produced before. --t clamps against HEIGHT as well as width, because height is the scarce axis: the page must hold a single screen. THE CANVAS IS DERIVED, NOT CHOSEN. Two gutters + the measure + the column gap + the plate column. The old 1240px shell was ~125px wider than its own content and the grid spent the difference on air — that was the "gaps in teeth". THE TRIM IS THE CANVAS, NOT THE BROWSER. The three rules end at the canvas edge; that edge reads as the page, so the branch runs off it. Because the canvas is bounded in --t, the drawing can never grow into a botanical-store poster on a wide monitor. THE BLEED IS ARITHMETIC. Drawing width = 2.278 × 5.0t = 11.39t; the visible run is the plate column, 8.55t. So 25% of the drawing is cut by the trim, identically in t — a property of the system rather than a coincidence that happens to hold at some window sizes. */ body { overflow-x: clip; } .vg { /* ── the one knob ── */ /* The flow needs a fixed height above the standing footer, and that height is not one straight line in t. The caption's font-size has a 13px floor; under t≈36.7 the floor holds, the caption stops shrinking with everything else, and the page starts wanting more room per unit of t than it wants above. Measured, there are two regimes — 18.15t + 94 over the floor, 16.52t + 154 under it — and the fit is whichever is tighter, so both go in the min(). One line has to clear the worse regime everywhere. That is what the old 20.08t + 125 did: safe at 720px, and six type sizes short at 900px. The shortfall was the over-generous margin. Re-measure BOTH lines whenever the vertical stack changes, and that includes the copy: this caption is two lines, and every line of it costs about 1.1 off the upper coefficient. */ --t: clamp(28px, min(3.9vw, calc((100svh - 94px) / 18.15), calc((100svh - 154px) / 16.52)), 88px); --gut: max(18px, calc(0.8 * var(--t))); --gap: calc(1.15 * var(--t)); --col: calc(12.8 * var(--t)); /* the locked measure IS the column */ --artcol: calc(8.85 * var(--t)); /* holds 20em of caption at the 13px floor, which binds at t=29.6 on a 720px window */ /* Chosen for where the CUT LANDS, not rounded. The artwork has a leaf in its upper right whose connecting stem sits further right again; show any part of that leaf and it floats free of the branch. The visible run must therefore stay under ~77% of the drawing. A larger --art-h shows LESS of the drawing, because the visible run is the plate column and that is fixed in t — so 5.15t is what puts the trim safely before that leaf. */ --art-h: calc(5.15 * var(--t)); --u: calc(0.8 * var(--t)); /* the spacing unit */ position: relative; z-index: 1; max-width: calc(2 * var(--gut) + var(--col) + var(--gap) + var(--artcol)); margin: 0 auto; padding: 0 var(--gut); display: flex; flex-direction: column; overflow-x: clip; /* belt; the real trim is on .split */ font-family: var(--font-sans); color: var(--fg); font-kerning: normal; font-variant-ligatures: common-ligatures contextual; font-feature-settings: "kern" 1, "liga" 1, "calt" 1; } .hero-zone { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; position: relative; } .rule-x { border: 0; border-top: 5px solid var(--fg); margin: 0; } .rule-t { border: 0; border-top: 1px solid var(--fg); margin: 0; } .row { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: baseline; } /* ── the ladder: √2 off --t, and 11px furniture that is not type ── */ .t-label { font-weight: 650; font-size: 11px; line-height: 1.4; letter-spacing: .18em; text-transform: uppercase; } .red { color: var(--accent-deep); } /* ── masthead ── */ .mast { position: sticky; top: 0; z-index: 60; padding: 16px 0 14px; background: var(--bg); border-bottom: 1px solid var(--fg); } .mast .row { align-items: center; } .mast::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 100vh; background: var(--bg); pointer-events: none; } .mast .mbrand { grid-column: 1 / 8; display: flex; align-items: center; gap: 15px; } .mast .mbrand .wordmark { width: 132px; } .mast .mbrand .pa-rule { width: 1px; height: 21px; background: var(--line); margin: 0 3px 0 6px; flex: none; } .mast .mbrand .pa { font-size: 9px; line-height: 1.4; letter-spacing: .3em; text-transform: uppercase; font-weight: 500; color: var(--dim); white-space: nowrap; } /* ── the split: the measure is the column ── */ .split { /* THE TRIM. Clipping on .vg cut the branch at the padding edge — 95px out in blank paper, past where the rules stop, so the cut read as the branch petering out. Clipped here it lands exactly on the rules' terminus, and the plate column's right edge IS the trim. */ overflow-x: clip; display: grid; grid-template-columns: var(--col) 1fr; column-gap: var(--gap); align-items: start; flex: 1 1 auto; min-height: 0; padding: calc(1.1 * var(--u)) 0 calc(1.4 * var(--u)); } .claim { font-size: var(--t); font-weight: 400; line-height: 1.14; letter-spacing: -0.02em; color: var(--fg); text-wrap: balance; max-width: 12.8em; /* em, so the four-line wrap is size-independent */ } .claim .red { font-weight: 560; } .lede .claim + .sub { margin-top: calc(1.15 * var(--u)); } .lede .sub { margin-top: calc(0.62 * var(--u)); max-width: 21em; font-size: calc(0.55 * var(--t)); line-height: 1.5; color: var(--muted); text-wrap: pretty; } /* ── the plate: a secondary read, sized off the type, not the window ── It starts below the claim's third line so the left column plainly leads, and it is rotated a few degrees so the branch runs right AND DOWN — carrying the eye toward the rule and the door instead of pointing out of the top-right corner, which is what a level branch at headline height was doing. */ .split .plate { grid-column: 2; margin: calc(4.37 * var(--t)) 0 0; } .split .plate .art { position: relative; display: block; width: 100%; height: var(--art-h); } .split .plate .art img { position: absolute; top: 0; left: 0; height: 100%; width: auto; max-width: none; transform: rotate(3.5deg); transform-origin: 14% 58%; } /* The caption rule. Its RIGHT END is the point: it stops on the same vertical as the branch's cut, so the trim becomes visible and the cut reads as intentional rather than as the branch running out of ink. 1px in --line, not --fg and never the 5px: the heavy rule is the only bass note on the page and it means "the page ends". This is a division, which 1px already means, so no third weight and no new vocabulary. It sits on the last paragraph's baseline — the first cross-column alignment in the design. 0.46t above and 0.26t below sum to the 0.9u interval it bisects, so the page's total height is unchanged. */ .split .plate .shelf { border: 0; border-top: 1px solid var(--line); margin: calc(0.46 * var(--t)) 0 calc(0.26 * var(--t)); } .split .plate figcaption { margin: 0; max-width: 22em; font-style: italic; font-size: max(13px, calc(0.354 * var(--t))); line-height: 1.5; color: var(--muted); text-wrap: pretty; } .split .plate figcaption p + p { margin-top: .7em; } .split .plate .binom { margin: 0 0 calc(0.45 * var(--u)); font-size: 11px; letter-spacing: .05em; color: var(--dim); } .split .plate figcaption .binom + p { margin-top: 0; } /* ── the close ── */ .close { padding: calc(0.55 * var(--u)) 0 calc(0.9 * var(--u)); } .close .row { align-items: start; } .close .door { grid-column: 9 / 13; text-align: right; } .close .door .t-display { font-weight: 750; font-size: calc(0.707 * var(--t)); line-height: .98; letter-spacing: -0.032em; } .close .mail { display: inline-block; margin-top: calc(0.4 * var(--u)); font-weight: 650; font-size: max(14px, calc(0.36 * var(--t))); letter-spacing: -0.012em; color: var(--accent-deep); border-bottom: 2px solid var(--accent-deep); padding-bottom: 3px; } .close .mail:hover { opacity: .8; } /* ── footer: standing furniture, pinned to the foot of the window ── The composition above is height-limited and ends where it ends. The colophon is not part of that composition — it is the page's standing furniture — so it holds the bottom edge instead of trailing after the content. Its hairline is what makes the pin read as an edge rather than as text adrift at the bottom of the screen. */ .colo { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--bg); padding: 0 var(--gut) calc(0.55 * var(--u)); } /* the rule sits on the grid with the other three, not across the window */ .colo .row { max-width: calc(var(--col) + var(--gap) + var(--artcol)); margin: 0 auto; border-top: 1px solid var(--line); padding-top: calc(0.5 * var(--u)); } /* the composition keeps clear of the standing footer */ .vg { padding-bottom: calc(2.2 * var(--u)); } .colo .facts { grid-column: 1 / 9; font-size: 11px; letter-spacing: .06em; color: var(--dim); } /* the door sits in the furniture, opposite the facts. The email above is the loud one; this is for people who already have a key, so it reads at the weight of the colophon and not above it. */ .colo .c { grid-column: 9 / 13; text-align: right; } .colo a.plink { color: var(--muted); transition: color var(--dur-fast) var(--ease-out); } .colo a.plink:hover { color: var(--accent-deep); } /* ── the stack ── */ @media (max-width: 760px) { .row { display: block; } /* the door takes its own line under the facts, still flush right. They cannot share one: the facts run 252px and CLIENT PORTAL 114, against a 345px column at 390px. Both need display:block to get a line each — as inline spans they simply flow on and the door breaks in half. The second line is paid for below. */ .colo .facts, .colo .c { display: block; } .colo .c { margin-top: calc(0.16 * var(--t)); } /* and this is where it is paid for. The interval under the caption was set for a page that ends on the heavy rule; here the colophon is the last thing, so the caption needs less air beneath it. */ .split { grid-template-columns: 1fr; row-gap: calc(0.85 * var(--u)); padding: calc(0.85 * var(--u)) 0 calc(0.5 * var(--u)); /* .split still stretches to fill the hero, but its ROWS must not. Stretched, they split the leftover height between them and open a gap above the plate — 150px of it at 720x1200, a hole in the middle of the composition. Held to the start, the claim, the plate and its note stay one block and the slack collects in the closing interval, above the heavy rule, where the page already has an interval. */ align-content: start; } /* the row-gap already sets this interval; the 4.37t offset it is overriding was the desktop drop below the claim's third line. */ .split .plate { grid-column: 1; margin-top: 0; } /* THE PLATE IS SIZED OFF THE COLUMN HERE, NOT OFF --t. That is the one place the single-quantity rule has to bend, and the reason is that --t stops moving: it sits on its 28px floor from 390px all the way to 720px, so a t-derived plate held 317px while the column grew to 640 and the drawing's share of it fell from 0.92 to 0.50 — a small specimen stranded in half a column of blank paper. So: the drawing keeps 0.90 of the column at every width. It is 2.278 wide to 1 high, so the box is 0.395 of the column, and the column is the canvas less its two gutters. Capped against the viewport's height, because width and height are independent here and a wide, short window would otherwise be handed a plate taller than the page. --art-h stays a real length so `left` can keep deriving the leaf's clearance from it. */ .split .plate { --art-h: min(calc(0.395 * (min(100vw, 24.4 * var(--t)) - 1.6 * var(--t))), calc(0.27 * 100svh)); } /* THE RULE IS THE TRIM. The branch enters at the top right and runs down to the bottom left, where the shelf cuts it. On a wide window the cut lands on the plate column, the vertical where three rules end; here the shelf is the only edge the page owns, so the branch is cut by it and the margin above the rule goes to zero. THE DRAWING IS MIRRORED, not turned over. Fruit-at-top-right with the branch descending left is a reflection followed by a rotation; reaching it by rotation alone takes 150° and hangs the fruit upside down. So .art carries the flip and the image carries the 30°, which also means the image rotates in unmirrored coordinates — the origin is the fruit's own centre, measured off the plate at 17.1% across and 62.8% down. Pivot there and the fruit holds its corner while the branch swings; pivot anywhere else and it walks out of the box. */ .split .plate .shelf { margin-top: 0; } /* THE PLATE IS BRACKETED, AND BOTH RULES ARE TRIMS. The fruit rests on the shelf at the bottom left and the branch climbs away to the top right, where the upper rule cuts it. Same 1px in --line as the shelf: a division, which 1px already means, so no third weight on the page. box-sizing keeps the rule inside the 5t, so it costs the page nothing. On a wide window the trim is the plate column, the vertical where three rules end. One column has no such vertical, so the horizontals do the work, and the margin above the shelf goes to zero to make it an edge rather than a caption rule. THE PIVOT IS THE FRUIT, measured off the plate: its centre sits at 17.1% across and 62.8% down the drawing, its bottom at 83.54%. Pivot there and the fruit holds its corner while the branch swings; pivot anywhere else and it walks out of the box. THE FRUIT IS NEVER TOUCHED. top and the angle are the two numbers that decide that, and they trade against each other. At top 9% the fruit's bottom lands at 92.5% of the box, so it clears the shelf by 0.075 of the box and stays whole — tangent read as cut, and cutting the subject of the plate is not a trim, it is a mistake. 22° is then the shallowest angle that still carries the twig up to the rule: the branch runs 1.888 of the drawing's height past the fruit, so it rises 0.707 of that height, which is just over the fruit's clearance. Steeper wasted the column's width and drove the exit back toward the middle; shallower and the twig stops short and the upper rule has nothing to cut. AND NOTHING IS CLIPPED ON THE LEFT. Rotating about the fruit swings the leaf at the far left out past the box edge — measured over every ink pixel of the plate, 0.111 of the drawing's height past it. So the image starts that far in, plus 0.01 for air. In --art-h, not percent: a percentage left resolves against the containing block's WIDTH, and the offset is a fraction of the drawing's HEIGHT. */ .split .plate .art { box-sizing: border-box; border-top: 1px solid var(--line); overflow: hidden; } .split .plate .art img { height: 100%; top: 9%; left: calc(0.121 * var(--art-h)); transform: rotate(-22deg); transform-origin: 17.1% 62.8%; } .close .door { text-align: left; margin-top: calc(0.5 * var(--u)); } /* --t bottoms out at its 28px floor here, so the composition can no longer grow to meet the footer. Give the shell the screen and let the hero absorb the slack, so the closing rule sits above the colophon instead of leaving a field of blank paper below it. */ .vg { min-height: 100svh; padding-bottom: calc(0.4 * var(--u)); } /* and the colophon stops being standing furniture. In one column it is simply the last thing on the page; pinning it over the flow only bought a collision with the close that no clearance reliably wins. */ .colo { position: static; padding: 0; } }