/* ============================================================================ Hedge — agribusiness systems. hedge.rw The palette and type here are NOT invented for this site: they are lifted verbatim from the product's own "agri-institutional estate" identity, which lives in the P{} object at app/src/Login.jsx. Keep them in sync — if the product's sign-in changes tone, this site should follow. Signature device: a single brass hairline (the "transect") threads the whole page from the hero to the footer, with a survey node at each section. It is also the scroll index — the nodes are clickable and the current one lights. One continuous line for a product whose entire pitch is one continuous record. ========================================================================== */ :root { /* Estate palette — app/src/Login.jsx */ --ink: #0C2620; --pine: #123A2C; --pine2: #081C16; --moss: #2E6B4E; --moss-h: #367A5A; --brass: #C6A15B; --brass-l:#E7D2A0; --ivory: #F4F0E6; --paper: #FBFAF4; --sage: #A6B8AC; --ink2: #12261F; --sub: #5C6B60; --hair: #E3E0D2; --serif: 'Fraunces', Georgia, serif; --ui: 'Hanken Grotesk', system-ui, sans-serif; --label: 'Schibsted Grotesk', system-ui, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, monospace; /* Species accents. Read as a printed map legend, not a crayon box: every one is desaturated to roughly the same value as the brass so nothing shouts, and each is drawn from the thing itself — clay for pig, ochre for yolk, olive for the broiler house, slate for cattle, teal for pond, fawn for rabbit, amber for comb honey. They are keyline and swatch colours only, never a fill behind text. */ --sp-pig: #9C6B5A; --sp-layer: #C08A2E; --sp-broiler: #7F8F4E; --sp-cattle: #6B7C8A; --sp-fish: #3F7385; --sp-rabbit: #A08A6B; --sp-bee: #B08A1E; --sp: var(--brass); /* fallback for anything not inside a [data-sp] */ /* The transect's distance from the viewport's left edge. Sections indent to clear it, so this one value keeps rail and content locked together. */ --rail: 76px; --gut: clamp(22px, 5vw, 60px); } /* One resolver, so every component below just reads var(--sp) and inherits the right accent from whichever [data-sp] ancestor it happens to sit in. */ [data-sp='pig'] { --sp: var(--sp-pig); } [data-sp='layer'] { --sp: var(--sp-layer); } [data-sp='broiler'] { --sp: var(--sp-broiler); } [data-sp='cattle'] { --sp: var(--sp-cattle); } [data-sp='fish'] { --sp: var(--sp-fish); } [data-sp='rabbit'] { --sp: var(--sp-rabbit); } [data-sp='bee'] { --sp: var(--sp-bee); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--paper); color: var(--ink2); font-family: var(--ui); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; /* Deliberately NO overflow-x here. It looks like harmless insurance, but any overflow value other than visible makes a backdrop root, and the fixed header's backdrop-filter then samples this near-white background instead of the dark hero behind it — the header washes out to pale grey at the top of the page. The contour field is already clipped by .hero's own overflow: hidden, and nothing overflows down to 320px, so this rule bought nothing and cost that. */ } img { max-width: 100%; display: block; } a { color: var(--moss); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { color: var(--pine); } /* Visible keyboard focus everywhere, on both light and dark ground. */ :focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 3px; } .vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--pine); color: var(--ivory); padding: 12px 18px; font-family: var(--label); font-weight: 600; font-size: 14px; } .skip:focus { left: 8px; top: 8px; } /* ── shared type ─────────────────────────────────────────────────────────── */ .eyebrow { font-family: var(--mono); font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--moss); font-weight: 600; margin: 0 0 20px; } .eyebrow.on-dark { color: var(--brass); } .h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(28px, 4.2vw, 46px); line-height: 1.1; letter-spacing: -.015em; margin: 0 0 20px; color: var(--ink); max-width: 17em; } .h2.on-dark { color: var(--ivory); } .lede { font-size: clamp(15px, 1.5vw, 17.5px); line-height: 1.68; color: var(--sub); margin: 0; max-width: 40em; } .lede.on-dark { color: #C7D3C9; } .rule { width: 52px; height: 2px; background: var(--brass); border: 0; margin: 0 0 26px; opacity: .85; } /* ── the transect: one brass hairline down the whole page ────────────────── */ .transect { position: fixed; top: 0; bottom: 0; left: var(--rail); width: 1px; background: linear-gradient(180deg, transparent 0, rgba(198,161,91,.30) 6%, rgba(198,161,91,.30) 94%, transparent 100%); z-index: 20; pointer-events: none; } .stations { position: fixed; left: var(--rail); top: 50%; transform: translate(-50%, -50%); z-index: 21; display: flex; flex-direction: column; /* Nine stations, and the rail must still clear the header and the footer on a laptop — hence the viewport-relative gap rather than a fixed 26px. */ gap: clamp(14px, 2.2vh, 24px); align-items: center; } .station { all: unset; cursor: pointer; position: relative; width: 22px; height: 22px; display: grid; place-items: center; } /* the node itself */ .station::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--paper); border: 1.5px solid rgba(198,161,91,.55); transition: background .2s ease, border-color .2s ease, transform .2s ease; } .station[aria-current='true']::before { background: var(--brass); border-color: var(--brass); transform: scale(1.25); } /* the name, revealed on hover/focus — the rail doubles as a scroll index */ .station::after { content: attr(data-name); position: absolute; left: 22px; white-space: nowrap; font-family: var(--mono); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--sub); opacity: 0; transform: translateX(-4px); transition: opacity .2s ease, transform .2s ease; pointer-events: none; } .station:hover::after, .station:focus-visible::after { opacity: 1; transform: translateX(0); } /* Over the dark panels the rail has to invert or it disappears. */ .station.over-dark::before { background: var(--pine2); border-color: rgba(231,210,160,.5); } .station.over-dark[aria-current='true']::before { background: var(--brass-l); border-color: var(--brass-l); } .station.over-dark::after { color: var(--sage); } /* ── header ──────────────────────────────────────────────────────────────── */ /* Fixed, not sticky: the hero runs full-bleed underneath it, so at the top of the page the header is already dark glass over the contour field. */ .head { position: fixed; top: 0; left: 0; right: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px var(--gut) 14px calc(var(--rail) + 34px); background: rgba(251,250,244,.86); -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2); border-bottom: 1px solid var(--hair); transition: background .3s ease, border-color .3s ease; } /* When the hero is under the header, the header goes dark to match. */ .head[data-dark='true'] { background: rgba(8,28,22,.72); border-bottom-color: rgba(198,161,91,.18); } .brandlink { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; } .brandlink img.mark { height: 26px; width: auto; } .brandlink img.word { height: 17px; width: auto; } .brandlink .light { display: none; } .head[data-dark='true'] .brandlink .light { display: block; } .head[data-dark='true'] .brandlink .dark { display: none; } .nav { display: flex; align-items: center; gap: 6px; } .nav a { font-family: var(--label); font-size: 13px; font-weight: 600; letter-spacing: .01em; color: var(--sub); text-decoration: none; padding: 8px 12px; border-radius: 8px; transition: color .16s ease, background .16s ease; } .nav a:hover { color: var(--pine); background: rgba(46,107,78,.07); } .head[data-dark='true'] .nav a { color: var(--sage); } .head[data-dark='true'] .nav a:hover { color: var(--ivory); background: rgba(244,240,230,.09); } .nav a.signin { border: 1.3px solid var(--hair); color: var(--pine); } .head[data-dark='true'] .nav a.signin { border-color: rgba(198,161,91,.42); color: var(--brass-l); } @media (max-width: 720px) { .nav a.hide-sm { display: none; } } /* ── buttons ─────────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 9px; padding: 13px 22px; border-radius: 11px; border: none; font-family: var(--label); font-weight: 700; font-size: 14.5px; letter-spacing: .015em; cursor: pointer; text-decoration: none; transition: transform .13s ease, box-shadow .16s ease, filter .16s ease, background .16s ease, color .16s ease; } .btn-primary { background: linear-gradient(180deg, var(--moss-h), var(--pine)); color: var(--ivory); box-shadow: 0 8px 22px rgba(18,58,44,.28); } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(18,58,44,.34); color: var(--ivory); } .btn-primary:active { transform: translateY(0); } .btn-ghost { background: transparent; color: var(--brass-l); border: 1.3px solid rgba(198,161,91,.45); } .btn-ghost:hover { background: rgba(198,161,91,.12); color: var(--brass-l); transform: translateY(-1px); } .btn-arrow { transition: transform .18s ease; } .btn:hover .btn-arrow { transform: translateX(3px); } @media (prefers-reduced-motion: reduce) { .btn, .btn-arrow { transition: none; } .btn:hover, .btn:active { transform: none; } .btn:hover .btn-arrow { transform: none; } } /* ── section frame ───────────────────────────────────────────────────────── */ .section { position: relative; padding: clamp(72px, 11vw, 132px) var(--gut) clamp(72px, 11vw, 132px) calc(var(--rail) + 34px); } .section.dark { background: var(--ink); color: var(--ivory); } .section.tint { background: var(--ivory); } .inner { max-width: 1120px; } /* ── hero ────────────────────────────────────────────────────────────────── */ .hero { position: relative; overflow: hidden; background: radial-gradient(120% 120% at 15% 0%, var(--pine) 0%, var(--ink) 55%, var(--pine2) 100%); color: var(--ivory); padding: clamp(78px, 13vw, 150px) var(--gut) clamp(70px, 11vw, 120px) calc(var(--rail) + 34px); min-height: min(94vh, 860px); display: flex; align-items: center; } /* The contour field — Rwanda's hills, and the product's existing motif. The lines draw themselves in on load, like a survey being plotted. */ .contour { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5; pointer-events: none; } .contour path { fill: none; stroke: var(--brass); stroke-width: 1; opacity: .16; } .contour path.lit { stroke: var(--brass-l); opacity: .42; stroke-width: 1.3; } .js-anim .contour path { stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: plot 1.9s cubic-bezier(.22,1,.36,1) forwards; } /* Staggered here rather than with a style="--i:n" attribute on each path, so the site can ship a Content-Security-Policy without style-src 'unsafe-inline'. */ .js-anim .contour path:nth-child(1) { animation-delay: 0ms; } .js-anim .contour path:nth-child(2) { animation-delay: 85ms; } .js-anim .contour path:nth-child(3) { animation-delay: 170ms; } .js-anim .contour path:nth-child(4) { animation-delay: 255ms; } .js-anim .contour path:nth-child(5) { animation-delay: 340ms; } .js-anim .contour path:nth-child(6) { animation-delay: 425ms; } .js-anim .contour path:nth-child(7) { animation-delay: 510ms; } .js-anim .contour path:nth-child(8) { animation-delay: 595ms; } .js-anim .contour path:nth-child(9) { animation-delay: 680ms; } .js-anim .contour path:nth-child(10) { animation-delay: 765ms; } .js-anim .contour path:nth-child(11) { animation-delay: 850ms; } @keyframes plot { to { stroke-dashoffset: 0; } } .hero-in { position: relative; z-index: 1; max-width: 1120px; width: 100%; } .hero h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(36px, 6.4vw, 78px); line-height: 1.04; letter-spacing: -.025em; margin: 0 0 26px; max-width: 13.5em; color: var(--ivory); text-wrap: balance; } /* Break between phrases, never inside one — "every / franc" reads as a stumble. */ .hero h1 .nb { white-space: nowrap; } /* "one ledger" is the whole thesis — let the brass carry it. */ .hero h1 em { font-style: normal; color: var(--brass-l); } .hero-lede { font-size: clamp(15.5px, 1.6vw, 18.5px); line-height: 1.66; color: #C7D3C9; margin: 0 0 38px; max-width: 34em; } .hero-cta { display: flex; flex-wrap: wrap; gap: 13px; } .js-anim .hero-reveal { opacity: 0; animation: rise .8s cubic-bezier(.22,1,.36,1) forwards; } .js-anim .hero-reveal.d1 { animation-delay: .10s; } .js-anim .hero-reveal.d2 { animation-delay: .22s; } .js-anim .hero-reveal.d3 { animation-delay: .34s; } .js-anim .hero-reveal.d4 { animation-delay: .46s; } @keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .js-anim .contour path { animation: none; stroke-dashoffset: 0; } .js-anim .hero-reveal { animation: none; opacity: 1; } } /* ── proof band ──────────────────────────────────────────────────────────── */ .proof-head { display: grid; gap: 26px; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: end; } @media (max-width: 860px) { .proof-head { grid-template-columns: 1fr; align-items: start; } } .facts { list-style: none; margin: 52px 0 0; padding: 0; display: grid; gap: 1px; grid-template-columns: repeat(4, 1fr); background: var(--hair); border: 1px solid var(--hair); } @media (max-width: 780px) { .facts { grid-template-columns: repeat(2, 1fr); } } .facts li { background: var(--paper); padding: 26px 22px; } .facts .fig { display: block; font-family: var(--serif); font-weight: 500; font-size: clamp(30px, 3.6vw, 42px); line-height: 1; letter-spacing: -.02em; color: var(--pine); font-variant-numeric: tabular-nums; } .facts .cap { display: block; margin-top: 11px; font-family: var(--mono); font-size: 10px; letter-spacing: .17em; text-transform: uppercase; color: var(--sub); line-height: 1.6; } /* ── the ground: three enterprise specimens ──────────────────────────────── */ /* Same hairline-lattice construction as .facts and .mods — one shared visual grammar for "here is the record", used at three different densities. */ .specs { margin-top: 54px; display: grid; gap: 1px; grid-template-columns: repeat(3, 1fr); background: var(--hair); border: 1px solid var(--hair); } @media (max-width: 1000px) { .specs { grid-template-columns: 1fr; } } .spec { background: var(--paper); padding: 0 26px 28px; border-top: 3px solid var(--sp); /* the species keyline */ } .spec-head { padding-top: 26px; } .spec-key { display: block; width: 13px; height: 13px; background: var(--sp); margin-bottom: 15px; } .spec-head h3 { font-family: var(--serif); font-weight: 500; font-size: 25px; line-height: 1.15; letter-spacing: -.015em; margin: 0 0 9px; color: var(--ink); } .spec-scale { margin: 0 0 4px; font-size: 13.5px; line-height: 1.5; color: var(--sub); } .spec-scale b { font-family: var(--mono); font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; color: var(--ink2); } .src { display: block; margin-top: 5px; font-family: var(--mono); font-size: 9.5px; line-height: 1.55; letter-spacing: .08em; color: var(--sub); opacity: .82; } .src i { font-style: italic; } .spec-facts { margin: 24px 0 0; padding: 0; } .spec-facts > div { padding: 15px 0; border-top: 1px solid var(--hair); } .spec-facts dt { font-family: var(--label); font-weight: 600; font-size: 11.5px; line-height: 1.45; color: var(--sub); margin: 0 0 6px; } .spec-facts dd { margin: 0; } .spec-facts .big { font-family: var(--serif); font-weight: 500; font-size: 27px; line-height: 1; letter-spacing: -.02em; color: var(--pine); font-variant-numeric: tabular-nums; } .spec-read { margin: 22px 0 0; padding-top: 20px; border-top: 1px solid var(--hair); font-size: 14px; line-height: 1.68; color: var(--sub); } .spec-read b { color: var(--ink2); font-weight: 600; } /* the species band — what Hedge does and does not run today */ .band { margin-top: 54px; padding-top: 34px; border-top: 1px solid var(--hair); } .band-h { font-family: var(--mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; font-weight: 600; color: var(--sub); margin: 0 0 20px; } .band-list { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-wrap: wrap; gap: 9px; } .band-list li { display: inline-flex; align-items: center; gap: 9px; padding: 9px 14px; border: 1.3px solid var(--hair); border-radius: 999px; font-family: var(--label); font-weight: 600; font-size: 13.5px; color: var(--ink2); background: var(--paper); } .band-list .key { width: 9px; height: 9px; border-radius: 50%; background: var(--sp); flex: none; } .band-list em { font-family: var(--mono); font-style: normal; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--moss); } /* Not-yet species read as a legend entry with no data behind it: hollow key, dashed edge. The colour survives so the legend still reads as one set. */ .band-list li.off { border-style: dashed; border-color: #D8D6C8; color: var(--sub); background: transparent; } .band-list li.off .key { background: transparent; box-shadow: inset 0 0 0 1.5px var(--sp); opacity: .7; } .band-list li.off em { color: var(--sub); opacity: .8; } .band-note { margin: 0; max-width: 46em; font-size: 14px; line-height: 1.7; color: var(--sub); } /* ── the gap: the arithmetic calculator ──────────────────────────────────── */ .calc { margin-top: 50px; border: 1px solid var(--hair); background: #fff; } .calc-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 26px; padding: 22px 26px; border-bottom: 1px solid var(--hair); } .segs { display: inline-flex; border: 1.3px solid var(--hair); border-radius: 11px; padding: 3px; gap: 3px; } .seg { appearance: none; border: 0; background: transparent; cursor: pointer; padding: 9px 18px; border-radius: 8px; font-family: var(--label); font-weight: 700; font-size: 13.5px; letter-spacing: .01em; color: var(--sub); transition: background .16s ease, color .16s ease; } .seg:hover { color: var(--ink2); background: rgba(18,58,44,.05); } .seg[aria-selected='true'] { background: var(--sp); color: #fff; } .seg[aria-selected='true']:hover { color: #fff; } .ctl { display: block; } .ctl > span { display: block; margin-bottom: 7px; font-family: var(--label); font-weight: 600; font-size: 11.5px; letter-spacing: .03em; color: var(--ink2); } .ctl > span em { font-style: normal; font-weight: 500; color: var(--sub); } .ctl input { width: 9.5em; padding: 11px 13px; border-radius: 10px; border: 1.4px solid #DFE0D4; background: #fff; color: var(--ink2); font-family: var(--mono); font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; transition: border-color .15s ease, box-shadow .15s ease; } .ctl input:focus { outline: none; border-color: var(--moss); box-shadow: 0 0 0 4px rgba(46,107,78,.13); } /* An input the reader is expected to overwrite is marked, not hidden. */ .ctl.is-assumption input { border-style: dashed; } .dag { color: var(--brass); font-family: var(--mono); font-weight: 600; } .calc-panel { padding: 4px 26px 26px; overflow-x: auto; } .calc-panel[hidden] { display: none; } /* Shown only where the ledger has to scroll sideways — see the mobile block. */ .calc-sum { display: none; } .ledger { width: 100%; min-width: 620px; border-collapse: collapse; text-align: left; } .ledger caption { caption-side: top; text-align: left; padding: 22px 0 16px; font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--sub); } .ledger th, .ledger td { padding: 16px 16px 16px 0; vertical-align: top; } .ledger th:last-child, .ledger td:last-child { padding-right: 0; } .ledger thead th { font-family: var(--mono); font-weight: 600; font-size: 9.5px; letter-spacing: .17em; text-transform: uppercase; color: var(--sub); padding-bottom: 12px; border-bottom: 1px solid var(--hair); } .ledger tbody tr + tr th, .ledger tbody tr + tr td { border-top: 1px solid var(--hair); } .ledger tbody th[scope='row'] { font-family: var(--ui); font-weight: 600; font-size: 14.5px; line-height: 1.45; color: var(--ink2); max-width: 22em; } .ledger tbody td { font-size: 15px; color: var(--ink2); font-variant-numeric: tabular-nums; } .why { display: block; margin-top: 8px; font-family: var(--ui); font-weight: 400; font-size: 12.5px; line-height: 1.6; color: var(--sub); } .gapv { font-family: var(--mono); font-weight: 600; color: var(--sp); white-space: nowrap; } .num { text-align: right; } .money { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; } .ledger tfoot th, .ledger tfoot td { border-top: 2px solid var(--sp); padding-top: 18px; font-family: var(--label); font-weight: 700; font-size: 13.5px; color: var(--ink2); } .ledger tfoot .total { font-family: var(--serif); font-weight: 500; font-size: clamp(22px, 2.6vw, 30px); line-height: 1; letter-spacing: -.02em; color: var(--pine); } .calc-scale { margin: 26px 0 0; max-width: 46em; font-size: 14px; line-height: 1.7; color: var(--sub); } .calc-scale b { color: var(--pine); font-weight: 600; } .calc-legend { margin: 0; padding: 20px 26px 22px; border-top: 1px solid var(--hair); background: rgba(198,161,91,.05); font-size: 12.5px; line-height: 1.66; color: var(--sub); } /* ── the market: signals ─────────────────────────────────────────────────── */ .dials { list-style: none; margin: 52px 0 0; padding: 0; display: grid; gap: 1px; grid-template-columns: repeat(4, 1fr); background: var(--hair); border: 1px solid var(--hair); } @media (max-width: 900px) { .dials { grid-template-columns: repeat(2, 1fr); } } .dial { background: var(--paper); padding: 26px 22px 24px; } .dial .v { display: block; font-family: var(--serif); font-weight: 500; font-size: clamp(30px, 3.6vw, 42px); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--pine); } .dial.hot .v { color: #A2432A; } /* a cost running away from the farmer */ .dial .k { display: block; margin-top: 12px; font-family: var(--label); font-weight: 600; font-size: 12.5px; line-height: 1.5; color: var(--ink2); } .asof { margin: 26px 0 0; max-width: 46em; font-family: var(--mono); font-size: 10.5px; line-height: 1.75; letter-spacing: .04em; color: var(--sub); } /* The signals table reuses .ledger, but its own frame. */ .signals { margin-top: 46px; border: 1px solid var(--hair); background: #fff; padding: 4px 26px 26px; overflow-x: auto; } .signals .ledger { min-width: 560px; } /* A source cell is an attribution, not a value — .src alone loses to `.ledger tbody td` on specificity, so it has to be said at table strength. */ .ledger td.src { font-size: 10.5px; line-height: 1.6; letter-spacing: .06em; } .up { color: #A2432A; font-family: var(--mono); font-weight: 600; white-space: nowrap; } .down { color: #256744; font-family: var(--mono); font-weight: 600; white-space: nowrap; } .flat { color: var(--sub); font-family: var(--mono); font-weight: 600; white-space: nowrap; } .absence { margin: 46px 0 0; padding: 24px 26px; border: 1px dashed #D8D6C8; background: rgba(198,161,91,.05); max-width: 52em; font-size: 14.5px; line-height: 1.7; color: var(--sub); } .absence b { color: var(--ink2); font-weight: 600; } /* ── evidence footer (used under the automation section) ─────────────────── */ .evidence { margin: 56px 0 0; padding-top: 30px; border-top: 1px solid rgba(198,161,91,.20); display: grid; gap: 28px 40px; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 62em; } @media (max-width: 780px) { .evidence { grid-template-columns: 1fr; } } .evidence h3 { font-family: var(--label); font-weight: 700; font-size: 13px; letter-spacing: .01em; margin: 0 0 9px; color: var(--brass-l); } .evidence p { margin: 0; font-size: 14px; line-height: 1.7; color: #BCCABE; } .evidence .src { color: var(--sage); opacity: .7; } /* ── module grid ─────────────────────────────────────────────────────────── */ .mods { margin-top: 56px; display: grid; gap: 1px; grid-template-columns: repeat(3, 1fr); background: var(--hair); border: 1px solid var(--hair); } @media (max-width: 940px) { .mods { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .mods { grid-template-columns: 1fr; } } .mod { background: var(--paper); padding: 32px 28px 34px; transition: background .18s ease; } .mod:hover { background: #fff; } .mod .tag { font-family: var(--mono); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--brass); display: block; margin-bottom: 16px; } .mod h3 { font-family: var(--serif); font-weight: 500; font-size: 22px; line-height: 1.2; letter-spacing: -.01em; margin: 0 0 12px; color: var(--ink); } .mod p { margin: 0; font-size: 14.5px; line-height: 1.66; color: var(--sub); } /* ── automation (dark) ───────────────────────────────────────────────────── */ .autos { list-style: none; margin: 56px 0 0; padding: 0; display: grid; gap: 0; } .autos li { display: grid; gap: 8px 34px; grid-template-columns: minmax(0, 20em) minmax(0, 1fr); padding: 30px 0; border-top: 1px solid rgba(198,161,91,.20); } .autos li:last-child { border-bottom: 1px solid rgba(198,161,91,.20); } @media (max-width: 780px) { .autos li { grid-template-columns: 1fr; } } .autos h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(19px, 2.1vw, 25px); line-height: 1.24; letter-spacing: -.01em; margin: 0; color: var(--ivory); } .autos p { margin: 0; font-size: 15px; line-height: 1.68; color: #BCCABE; } /* ── fit ─────────────────────────────────────────────────────────────────── */ .fit-grid { display: grid; gap: clamp(30px, 5vw, 64px); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; margin-top: 48px; } @media (max-width: 860px) { .fit-grid { grid-template-columns: 1fr; } } .pullquote { font-family: var(--serif); font-weight: 400; font-style: italic; font-size: clamp(20px, 2.4vw, 28px); line-height: 1.36; letter-spacing: -.01em; color: var(--pine); margin: 0; padding-left: 26px; border-left: 2px solid var(--brass); } .pullquote cite { display: block; margin-top: 18px; font-family: var(--mono); font-style: normal; font-size: 10.5px; letter-spacing: .17em; text-transform: uppercase; color: var(--sub); } .checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 15px; } .checks li { display: grid; grid-template-columns: 15px 1fr; gap: 13px; font-size: 15px; line-height: 1.62; color: var(--sub); } .checks li b { color: var(--ink2); font-weight: 600; } .checks .tick { color: var(--brass); font-family: var(--mono); font-size: 13px; line-height: 1.62; } /* ── access / form ───────────────────────────────────────────────────────── */ .access-grid { display: grid; gap: clamp(34px, 5vw, 70px); grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); align-items: start; margin-top: 44px; } @media (max-width: 900px) { .access-grid { grid-template-columns: 1fr; } } .form { display: grid; gap: 15px; } .row { display: grid; gap: 15px; grid-template-columns: 1fr 1fr; } @media (max-width: 560px) { .row { grid-template-columns: 1fr; } } .field { display: block; } .field > span { display: block; margin-bottom: 7px; font-family: var(--label); font-weight: 600; font-size: 11.5px; letter-spacing: .03em; color: var(--ink2); } .field input, .field select, .field textarea { width: 100%; padding: 12px 14px; border-radius: 11px; border: 1.4px solid #DFE0D4; background: #fff; color: var(--ink2); font-family: var(--ui); font-size: 14.5px; line-height: 1.5; transition: border-color .15s ease, box-shadow .15s ease; } .field textarea { resize: vertical; min-height: 96px; } .field input::placeholder, .field textarea::placeholder { color: #A9B0A2; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--moss); box-shadow: 0 0 0 4px rgba(46,107,78,.13); } .field select { appearance: none; background-image: none; cursor: pointer; } .form .btn-primary { justify-content: center; margin-top: 4px; } .formnote { font-size: 12.5px; line-height: 1.6; color: var(--sub); margin: 2px 0 0; } .formmsg { font-size: 13.5px; line-height: 1.55; padding: 12px 14px; border-radius: 10px; margin: 0; } .formmsg[data-tone='ok'] { background: #E9F4EC; border: 1px solid #BFE0CA; color: #256744; } .formmsg[data-tone='err'] { background: #FBECE7; border: 1px solid #F0CABB; color: #A2432A; } .formmsg[hidden] { display: none; } /* Honeypot — a real person never sees or tabs into this. */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .contact { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 12px; } .contact li { display: grid; grid-template-columns: 8.5em 1fr; gap: 14px; font-size: 14px; align-items: baseline; } .contact .k { font-family: var(--mono); font-size: 10px; letter-spacing: .17em; text-transform: uppercase; color: var(--sub); } /* ── footer ──────────────────────────────────────────────────────────────── */ .foot { background: var(--pine2); color: var(--sage); padding: 54px var(--gut) 44px calc(var(--rail) + 34px); border-top: 1px solid rgba(198,161,91,.18); } .foot-in { max-width: 1120px; display: flex; flex-wrap: wrap; gap: 30px; justify-content: space-between; align-items: flex-start; } .foot .brandlink img.mark { height: 30px; } .foot .brandlink img.word { height: 19px; } .foot .tagline { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; margin: 13px 0 0; color: var(--sage); opacity: .8; } .foot nav { display: flex; flex-wrap: wrap; gap: 8px 22px; } .foot nav a { color: var(--sage); font-size: 13.5px; text-decoration: none; } .foot nav a:hover { color: var(--ivory); text-decoration: underline; } .foot .legal { width: 100%; margin: 34px 0 0; padding-top: 22px; border-top: 1px solid rgba(198,161,91,.14); font-family: var(--mono); font-size: 10px; letter-spacing: .06em; color: var(--sage); opacity: .7; } /* ── legal pages (privacy / terms) ───────────────────────────────────────── */ .doc { max-width: 46em; } .doc h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(30px, 4.4vw, 46px); line-height: 1.1; letter-spacing: -.02em; margin: 0 0 10px; color: var(--ink); } .doc .stamp { font-family: var(--mono); font-size: 10.5px; letter-spacing: .17em; text-transform: uppercase; color: var(--sub); margin: 0 0 40px; } .doc h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(21px, 2.4vw, 27px); line-height: 1.22; letter-spacing: -.01em; color: var(--ink); margin: 44px 0 14px; } .doc p, .doc li { font-size: 15.5px; line-height: 1.72; color: var(--sub); } .doc ul { padding-left: 20px; display: grid; gap: 9px; } .doc strong { color: var(--ink2); font-weight: 600; } /* ── mobile: the rail costs too much width, so it stands down ────────────── */ @media (max-width: 780px) { :root { --rail: 0px; } .transect, .stations { display: none; } .head { padding-left: var(--gut); } .section { padding-left: var(--gut); } .hero { padding-left: var(--gut); min-height: auto; } .foot { padding-left: var(--gut); } /* The calculator and the signals table scroll sideways rather than shrink — a five-column ledger squeezed to 320px stops being readable long before it stops fitting. The scroll is inside the card, so the page never shifts. */ .calc-controls { padding: 20px var(--gut) 20px 0; } .calc-panel { padding: 4px var(--gut) 22px 0; } .calc-legend { padding: 18px var(--gut) 18px 0; background: transparent; } .signals { padding: 4px var(--gut) 22px 0; border-left: 0; border-right: 0; } .calc { border-left: 0; border-right: 0; } .ctl input { width: 100%; } .ctl { flex: 1 1 8em; } /* The answer, above the working, where the working has to be scrolled to. */ .calc-sum { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin: 0; padding: 22px 0 20px; border-bottom: 1px solid var(--hair); } .calc-sum span { font-family: var(--label); font-weight: 700; font-size: 13px; line-height: 1.4; color: var(--ink2); max-width: 16em; } .calc-sum b { font-family: var(--serif); font-weight: 500; font-size: 28px; line-height: 1; letter-spacing: -.02em; color: var(--pine); } /* The hint belongs outside the scroll container — put it in the caption and it inherits the table's min-width and gets clipped mid-sentence. */ .calc-sum::after { content: 'Scroll the table sideways for the working behind it.'; flex: 1 0 100%; font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--sub); opacity: .8; } } /* --------------------------------------------------------------------------- 404. A standalone page, not a variant of the front page — it shares only the tokens. Everything is scoped under .nf so nothing here can reach the one-page document, and the page carries no script, so it renders even when JS fails. --------------------------------------------------------------------------- */ body.nf { margin: 0; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: var(--gut); background: var(--pine2); color: var(--ivory); font-family: var(--ui); /* The one-page document reserves the left edge for the transect. There is no transect here, so the reserve would only push the block off-centre. */ } .nf-wrap { width: 100%; max-width: 46rem; } .nf-brand { display: inline-flex; align-items: center; gap: 12px; margin-bottom: clamp(40px, 9vh, 84px); } .nf-brand img { display: block; } .nf-word { height: 19px; width: auto; } .nf-ref { margin: 0 0 18px; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--brass); } .nf-h { margin: 0 0 20px; font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 5.5vw, 3.4rem); line-height: 1.08; letter-spacing: -.015em; } .nf-p { margin: 0 0 clamp(34px, 6vh, 52px); max-width: 34rem; font-size: 1.0625rem; line-height: 1.65; color: var(--sage); } .nf-links { display: flex; flex-wrap: wrap; gap: 10px 12px; } .nf-links a { padding: 11px 18px; border: 1px solid rgba(198, 161, 91, .34); border-radius: 999px; font-size: .875rem; letter-spacing: .01em; color: var(--ivory); text-decoration: none; transition: border-color .18s ease, background-color .18s ease, color .18s ease; } .nf-links a:hover { border-color: var(--brass); background: rgba(198, 161, 91, .12); } .nf-links a:first-child { border-color: var(--brass); color: var(--brass-l); } .nf-links a:focus-visible { outline: 2px solid var(--brass-l); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .nf-links a { transition: none; } }