/* Cross Constellation — parent identity stylesheet. * * Continuous Canvas Doctrine: one continuous near-black field. Sections are * separated by space, typography, fine rules and restrained tonal shifts — * never by a background-theme change. No dark-to-light gradients, no fog, no * blurred horizons. Ivory is typography and bounded editorial artefacts only; * it never becomes the canvas. * * Spectrum Doctrine: the parent is not monochrome. Transit Blue → Aster Violet * → Afterglow Gold is movement from possibility to lived reality, applied as * concentrated light — type, marks, rules, states — never as coloured surface. * Product colours are sovereign and appear only when naming their product. */ :root { /* Parent palette — the continuous world. */ --deep-space: #07090D; --night-field: #10131A; --orbit-line: #292E39; --moon-dust: #969CAA; --starlight: #F4F1EA; /* Signature spectrum — concentrated light. */ --transit-blue: #6F7CFF; --aster-violet: #A36FFF; --afterglow-gold: #F2B75D; --spectrum: linear-gradient(90deg, var(--transit-blue), var(--aster-violet), var(--afterglow-gold)); /* Ink for the few bounded ivory artefacts. */ --artefact-ink: #14161B; --sans: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --serif: "Newsreader", ui-serif, Georgia, "Times New Roman", serif; --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --measure: 68ch; --page: 1240px; --gutter: 32px; --s1: 8px; --s2: 16px; --s3: 24px; --s4: 40px; --s5: 64px; --s6: 96px; --s7: 136px; --s8: 184px; /* Set per-route on a product page. Never applied to global chrome. */ --product: var(--transit-blue); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--deep-space); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: transparent; /* the ground is on ; the rails sit between */ color: var(--starlight); font-family: var(--sans); font-size: 17px; line-height: 1.65; font-feature-settings: "kern" 1, "liga" 1, "cv05" 1; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ── Layout ─────────────────────────────────────────────────────────────── */ .wrap { max-width: var(--page); margin-inline: auto; padding-inline: var(--gutter); } .grid12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); } .col-5 { grid-column: 8 / span 5; } .col-6 { grid-column: 1 / span 6; } .col-7 { grid-column: 1 / span 7; } .col-8 { grid-column: 1 / span 8; } .col-10 { grid-column: 1 / span 10; } /* Explicit grid placements. Every one collapses to full width below 900px. */ .c1-10 { grid-column: 1 / span 10; } .c1-3 { grid-column: 1 / span 3; } .c1-4 { grid-column: 1 / span 4; } .c1-6 { grid-column: 1 / span 6; } .c1-7 { grid-column: 1 / span 7; } .c3-8 { grid-column: 3 / span 8; } .c4-7 { grid-column: 4 / span 7; } .c5-8 { grid-column: 5 / span 8; } .c6-7 { grid-column: 6 / span 7; } .c7-6 { grid-column: 7 / span 6; } .c8-5 { grid-column: 8 / span 5; } .c9-4 { grid-column: 9 / span 4; } /* Sections sit on the one canvas. Separation is space and a hairline. */ section { padding-block: var(--s7); } section.tight { padding-block: var(--s6); } /* The seam belongs to the section's FIRST wrap only. A section may carry further wraps (a full-bleed figure and its caption, say) and those must not each draw their own rule. */ section + section > .wrap:first-child { border-top: 1px solid var(--orbit-line); padding-top: var(--s6); margin-top: calc(var(--s7) * -1 + var(--s6)); } section.seam > .wrap:first-child { border-top: 0; padding-top: 0; margin-top: 0; } /* The only permitted tonal shift: a raised surface, still near-black. */ .raised { background: var(--night-field); border: 1px solid var(--orbit-line); padding: var(--s4); } /* A bounded ivory editorial artefact. Deliberate, framed, and rare — one per page at most. It is an object on the canvas, never the canvas itself. */ .artefact { background: var(--starlight); color: var(--artefact-ink); padding: var(--s4) var(--s4) var(--s3); max-width: 62ch; box-shadow: 0 1px 0 rgba(244, 241, 234, 0.25); } .artefact .meta, .artefact .coord { color: #5A5E66; } /* ── Type ───────────────────────────────────────────────────────────────── */ h1, h2, h3, h4 { margin: 0; font-weight: 400; text-wrap: balance; } .display { font-family: var(--serif); font-size: clamp(2.6rem, 6.2vw, 4.6rem); line-height: 1.03; letter-spacing: -0.022em; font-weight: 300; } .headline { font-family: var(--serif); font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; letter-spacing: -0.018em; font-weight: 300; } .lede { font-family: var(--serif); font-size: clamp(1.3rem, 2.1vw, 1.7rem); line-height: 1.45; font-weight: 300; max-width: 30ch; } p { margin: 0 0 var(--s3); max-width: var(--measure); } .prose p { font-size: 1.0625rem; color: #CFD3DA; } .artefact .prose p { color: #33363D; } .artefact .lede { max-width: none; font-size: clamp(1.2rem, 1.7vw, 1.45rem); } /* Concentrated light: the two deliberate points of emphasis in a headline. */ .possibility { color: var(--transit-blue); } .reality { color: var(--afterglow-gold); } .coord { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--moon-dust); display: block; } .meta { font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--moon-dust); } .num { font-family: var(--mono); color: var(--afterglow-gold); letter-spacing: 0.1em; } .rule { border: 0; border-top: 1px solid var(--orbit-line); margin: 0; } a { color: var(--transit-blue); } a:hover { color: var(--aster-violet); } /* ── Nav ────────────────────────────────────────────────────────────────── */ .nav { position: sticky; top: 0; z-index: 60; background: var(--deep-space); border-bottom: 1px solid var(--orbit-line); } .nav-inner { display: flex; align-items: center; gap: var(--s4); height: 64px; } .wordmark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--starlight); } .wordmark:hover { color: var(--starlight); } .wordmark .cc { display: block; width: 22px; height: 22px; flex: none; } .wordmark .name { font-family: var(--serif); font-size: 1.22rem; font-weight: 500; letter-spacing: -0.024em; white-space: nowrap; } .nav-links { margin-left: auto; display: flex; gap: var(--s3); align-items: center; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; } .nav-links::-webkit-scrollbar { display: none; } .nav-links a { color: var(--moon-dust); text-decoration: none; font-size: 14px; white-space: nowrap; flex: none; padding-block: 6px; position: relative; } .nav-links a:hover { color: var(--starlight); } .nav-links a[aria-current="page"] { color: var(--starlight); } .nav-links a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--spectrum); } /* ── Constellation ──────────────────────────────────────────────────────── */ .hero { padding-block: var(--s6) var(--s6); } .hero .grid12 { align-items: start; row-gap: var(--s5); } .constellation-shell { position: relative; } #constellation { display: block; width: 100%; height: auto; aspect-ratio: 1100 / 521; border: 1px solid var(--orbit-line); background: var(--deep-space); } .constellation-caption { display: flex; justify-content: space-between; gap: var(--s3); margin-top: 12px; flex-wrap: wrap; } .livedot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--orbit-line); margin-right: 9px; vertical-align: middle; } .livedot[data-state="live"] { background: var(--afterglow-gold); box-shadow: 0 0 0 3px rgba(242, 183, 93, 0.14); } .livedot[data-state="sample"] { background: var(--aster-violet); } .activity-summary { margin-top: var(--s3); font-size: 15px; color: var(--moon-dust); max-width: 52ch; } .activity-summary strong { color: var(--starlight); font-weight: 460; } .activity-summary .src { color: var(--afterglow-gold); } .notice { border: 1px solid var(--orbit-line); border-left: 2px solid var(--afterglow-gold); padding: 14px 16px; font-size: 14px; line-height: 1.55; color: var(--moon-dust); max-width: 58ch; } .artefact .notice { color: #4A4E56; border-color: #D8D3CA; } /* ── Controls ───────────────────────────────────────────────────────────── */ .actions { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; margin-top: var(--s4); } .btn { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 460; letter-spacing: -0.003em; padding: 11px 20px; border-radius: 2px; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background 180ms ease, border-color 180ms ease, color 180ms ease; } .btn-primary { background: var(--transit-blue); color: #0A0B10; font-weight: 500; } .btn-primary:hover { background: var(--aster-violet); color: #0A0B10; } .btn-ghost { border-color: var(--orbit-line); color: var(--starlight); background: transparent; } .btn-ghost:hover { border-color: var(--transit-blue); color: var(--starlight); } a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--aster-violet); outline-offset: 3px; border-radius: 1px; } .skip { position: absolute; left: -9999px; top: 0; background: var(--transit-blue); color: #0A0B10; padding: 10px 16px; z-index: 100; } .skip:focus { left: var(--gutter); top: 8px; } /* ── Chips ──────────────────────────────────────────────────────────────── */ .chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.11em; text-transform: uppercase; padding: 3px 8px; border: 1px solid var(--orbit-line); color: var(--moon-dust); border-radius: 1px; white-space: nowrap; text-decoration: none; } .chip[data-tone="active"] { border-color: rgba(242, 183, 93, .45); color: var(--afterglow-gold); } .chip[data-tone="preview"] { border-color: rgba(111, 124, 255, .55); color: var(--transit-blue); } .chip[data-tone="pending"] { border-style: dashed; } a.chip { transition: border-color 180ms ease, color 180ms ease; } a.chip:hover, a.chip:focus-visible { color: var(--starlight); border-color: var(--product); } /* ── Product entries ────────────────────────────────────────────────────── */ .entry { padding-block: var(--s6); border-top: 1px solid var(--orbit-line); } .entry-head { display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s3); } .product-rule { height: 2px; width: 56px; margin-bottom: var(--s3); } .product-name { font-family: var(--serif); font-size: clamp(1.8rem, 3vw, 2.4rem); letter-spacing: -0.02em; font-weight: 400; line-height: 1.05; } .beats { display: grid; gap: var(--s4); margin-top: var(--s4); } @media (min-width: 900px) { .beats { grid-template-columns: repeat(4, 1fr); gap: var(--s3); } } .beat { border-top: 1px solid var(--orbit-line); padding-top: var(--s2); } .beat h4 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--afterglow-gold); margin-bottom: 10px; } .beat p { font-size: 15px; line-height: 1.55; margin: 0; color: #CFD3DA; } /* ── Register table ─────────────────────────────────────────────────────── */ .table-scroll { overflow-x: auto; margin-top: var(--s4); } table.register { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 720px; } table.register th, table.register td { text-align: left; padding: 14px 18px 14px 0; border-top: 1px solid var(--orbit-line); vertical-align: top; } table.register th { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--moon-dust); font-weight: 400; border-top: 0; } table.register td { color: #CFD3DA; } .verb { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.02em; color: var(--aster-violet); white-space: nowrap; } /* ── Relationship constellation ─────────────────────────────────────────── */ .relgraph { width: 100%; height: auto; display: block; margin-top: var(--s4); border: 1px solid var(--orbit-line); background: var(--deep-space); } .relgraph text { font-family: var(--mono); } .relgraph-fallback { display: none; margin-top: var(--s4); } @media (max-width: 760px) { .relgraph { display: none; } .relgraph-fallback { display: block; } /* The fallback list already carries every row of the register, in a form that reads better in one column. Two of the same thing is one too many — and the key to a diagram that is not shown here goes with it. */ .rel-table, .graph-key { display: none; } } /* ── Index rows ─────────────────────────────────────────────────────────── */ .index-row { position: relative; display: grid; gap: var(--s2); padding-block: var(--s4); border-top: 1px solid var(--orbit-line); text-decoration: none; color: inherit; transition: border-top-color 180ms ease; } /* The whole row is the target, not just the heading: the title's link is stretched over the row, and the product chips sit above it so they stay individually clickable. One anchor per destination, no nesting. */ .index-row:has(a.index-name) { cursor: pointer; } a.index-name::after { content: ""; position: absolute; inset: 0; z-index: 1; } .index-row .chip { position: relative; z-index: 2; } @media (min-width: 900px) { .index-row { grid-template-columns: 3fr 5fr 2.4fr; align-items: start; gap: var(--s4); } } /* Hovering a product introduces that product's colour — as a rule and a heading, not a filled block. A tint behind an uneven three-column row only draws attention to the empty corner. */ .index-row:hover { border-top-color: var(--product); } .index-row .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 10px; vertical-align: 2px; } .index-name { font-family: var(--serif); font-size: 1.45rem; line-height: 1.15; letter-spacing: -0.02em; text-decoration: none; color: var(--starlight); transition: color 180ms ease; text-wrap: balance; } .index-row:hover .index-name, a.index-name:hover { color: var(--product); } .index-row p { color: #CFD3DA; margin: 0; } .dl { display: grid; gap: 2px; margin: 0; font-size: 14px; } .dl div { display: flex; gap: 10px; padding-block: 7px; border-top: 1px solid var(--orbit-line); } .dl dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--moon-dust); min-width: 148px; padding-top: 3px; } .dl dd { margin: 0; color: #CFD3DA; } .stack { display: grid; gap: var(--s3); } .list-plain { margin: 0; padding: 0; list-style: none; } .list-plain li { padding-block: 11px; border-top: 1px solid var(--orbit-line); font-size: 15.5px; line-height: 1.55; color: #CFD3DA; } /* Bullets, where they exist, are gold. */ .list-marked { margin: 0; padding: 0; list-style: none; } .list-marked li { position: relative; padding: 0 0 0 22px; margin-bottom: 12px; font-size: 15.5px; line-height: 1.6; color: #CFD3DA; } .list-marked li::before { content: ""; position: absolute; left: 0; top: 10px; width: 5px; height: 5px; background: var(--afterglow-gold); border-radius: 50%; } footer.site { border-top: 1px solid var(--orbit-line); padding-block: var(--s6) var(--s5); font-size: 14px; color: var(--moon-dust); } footer.site a { text-decoration: none; } footer.site a:hover { text-decoration: underline; } .footcols { display: grid; gap: var(--s4); } @media (min-width: 800px) { .footcols { grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s3); } } .footcol-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--moon-dust); margin: 0 0 12px; max-width: none; } .footcols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ── Responsive ─────────────────────────────────────────────────────────── */ @media (max-width: 900px) { :root { --gutter: 20px; --s7: 88px; --s6: 64px; } .col-5, .col-6, .col-7, .col-8, .col-10, .c1-10, .c1-3, .c1-4, .c1-6, .c1-7, .c3-8, .c4-7, .c5-8, .c6-7, .c7-6, .c8-5, .c9-4 { grid-column: 1 / -1; } #constellation { aspect-ratio: 1100 / 640; } .nav-links { gap: 16px; margin-left: var(--s3); } .nav-inner { gap: var(--s2); height: 58px; } .artefact { max-width: none; padding: var(--s3); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } /* ── Single-Axis Composition ──────────────────────────────────────────────── The proposition and the living constellation are both primary ideas. Neither is a supporting illustration for the other, so neither is given half a row. One idea owns the viewport at a time and the page unfolds vertically. */ .bleed { width: 100vw; margin-left: calc(50% - 50vw); } /* 1. The proposition — the words get the room. */ .proposition { padding-block: clamp(var(--s6), 13vh, 168px) clamp(var(--s5), 9vh, 112px); } .proposition .display { font-size: clamp(3rem, 8.4vw, 7.4rem); line-height: 0.98; letter-spacing: -0.032em; max-width: 17ch; } .proposition .support { font-family: var(--serif); font-weight: 300; font-size: clamp(1.35rem, 2.3vw, 2rem); line-height: 1.4; color: var(--moon-dust); max-width: 26ch; margin-top: var(--s4); } .proposition .actions { margin-top: var(--s5); } /* 2. The living constellation — full width, no card, no border. */ .constellation-full { position: relative; height: clamp(400px, calc(100vw / 2.11), 86vh); overflow: hidden; border-top: 1px solid var(--orbit-line); border-bottom: 1px solid var(--orbit-line); } .constellation-full #constellation { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border: 0; } .field-annotation { position: absolute; left: 0; right: 0; display: flex; justify-content: space-between; gap: var(--s3); padding-inline: var(--gutter); pointer-events: none; } .field-annotation.top { top: var(--s3); } .field-annotation.bottom { bottom: var(--s3); align-items: flex-end; } .field-annotation > * { pointer-events: auto; } .constellation-full .activity-summary { margin: 0; max-width: 46ch; font-size: 14px; } .legend-inline { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; max-width: 46ch; } /* 3. The founding method — a sequence, not five cards. */ .method { display: grid; gap: var(--s4); margin-top: var(--s5); counter-reset: step; } @media (min-width: 860px) { .method { grid-template-columns: repeat(5, 1fr); gap: 0; } } .method-step { position: relative; padding-top: var(--s4); } @media (min-width: 860px) { .method-step { padding-right: var(--s3); } } .method-step::before { content: counter(step, decimal-leading-zero); counter-increment: step; position: absolute; top: 0; left: 0; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--afterglow-gold); } .method-step::after { content: ""; position: absolute; top: 26px; left: 0; right: 0; height: 1px; background: var(--orbit-line); } .method-step:first-child::after { background: linear-gradient(90deg, var(--afterglow-gold), var(--orbit-line)); } .method-step p { margin: var(--s4) 0 0; font-family: var(--serif); font-weight: 300; font-size: clamp(1.15rem, 1.5vw, 1.4rem); line-height: 1.3; color: var(--starlight); max-width: 15ch; } /* 4. Product chapters — each product owns the width. */ .chapter { padding-block: clamp(var(--s6), 11vh, 140px); border-top: 1px solid var(--orbit-line); } .chapter-mark { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s4); } .chapter-mark .bar { height: 2px; width: 64px; } .chapter-name { font-family: var(--serif); font-weight: 300; font-size: clamp(2.6rem, 6vw, 5rem); line-height: 1; letter-spacing: -0.028em; } .chapter-lede { font-family: var(--serif); font-weight: 300; font-size: clamp(1.25rem, 2vw, 1.65rem); line-height: 1.4; max-width: 34ch; margin-top: var(--s3); color: #D6DAE1; } .chapter-facts { margin-top: var(--s4); } @media (max-width: 860px) { .field-annotation { position: static; padding-inline: var(--gutter); flex-direction: column; gap: var(--s2); } .field-annotation.top { padding-bottom: var(--s3); } .field-annotation.bottom { padding-top: var(--s3); align-items: stretch; } .constellation-full .activity-summary { max-width: none; } /* The hard line break is a desktop composition. Let it wrap on its own here. */ .proposition .display br { display: none; } .proposition .display { font-size: clamp(2.5rem, 11vw, 4rem); max-width: none; } .proposition .support { max-width: none; } .constellation-full { height: auto; overflow: visible; padding-bottom: var(--s4); } .constellation-full #constellation { position: static; height: auto; aspect-ratio: 1100 / 700; } .legend-inline { justify-content: flex-start; } } /* ── Edge rails ───────────────────────────────────────────────────────────── Two fields of light in the outer margins, behind everything, driven only by scroll. Never on mobile — there is no margin there to give them, and they are removed entirely under reduced motion. */ .rail { position: fixed; top: 0; z-index: -1; pointer-events: none; display: block; } .rail-left { left: 0; } .rail-right { right: 0; transform: scaleX(-1); } @media (max-width: 1439px) { .rail { display: none; } } @media (prefers-reduced-motion: reduce) { .rail { display: none; } } /* ── Evidence figures ─────────────────────────────────────────────────────── A real product screen, mounted. The screenshot sits inside a frame on the raised surface — a plate on the page, the way a publication presents one — rather than bleeding to the edges, where a browser screenshot reads as if the site itself had changed. No device mock-up, no invented data. */ .evidence-figure { margin: var(--s5) 0 0; } .evidence-figure + .evidence-figure { margin-top: var(--s6); } .evidence-figure .shot { background: var(--night-field); border: 1px solid var(--orbit-line); border-top: 2px solid var(--product); padding: 10px; } .evidence-figure img { display: block; width: 100%; height: auto; } .evidence-figure figcaption { display: grid; gap: 8px; margin-top: 16px; font-size: 14px; line-height: 1.55; color: var(--moon-dust); max-width: 62ch; } .evidence-figure figcaption .meta { color: #6E7480; } @media (max-width: 900px) { .evidence-figure .shot { padding: 6px; } } /* ── Long-form story furniture ──────────────────────────────────────────── */ .story-h2 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--afterglow-gold); margin: var(--s5) 0 var(--s2); font-weight: 400; } .prose > .story-h2:first-child { margin-top: 0; } /* A summary for a reader, not an extraction block. */ .summary { border-left: 2px solid var(--afterglow-gold); padding: var(--s3) 0 var(--s2) var(--s3); margin-bottom: var(--s6); } .summary .list-marked li { color: #CFD3DA; } .summary strong { color: var(--starlight); font-weight: 500; } blockquote.pull { margin: var(--s5) 0; padding-left: var(--s3); border-left: 2px solid var(--transit-blue); } blockquote.pull p { font-family: var(--serif); font-weight: 300; font-size: clamp(1.2rem, 1.8vw, 1.5rem); line-height: 1.4; color: var(--starlight); margin: 0; max-width: 34ch; } dl.faq { display: grid; gap: 0; margin: 0; } dl.faq dt { font-family: var(--serif); font-size: 1.2rem; letter-spacing: -0.014em; color: var(--starlight); padding-top: var(--s3); border-top: 1px solid var(--orbit-line); } dl.faq dd { margin: 10px 0 var(--s3); color: #CFD3DA; font-size: 15.5px; line-height: 1.6; max-width: 68ch; } code { font-family: var(--mono); font-size: 0.88em; background: var(--night-field); border: 1px solid var(--orbit-line); padding: 1px 5px; border-radius: 2px; color: var(--afterglow-gold); } /* A definition pair — two terms set against each other. */ .define { display: grid; gap: var(--s3); margin: var(--s4) 0; } @media (min-width: 800px) { .define { grid-template-columns: 1fr 1fr; gap: var(--s4); } } .define > div { border-top: 1px solid var(--orbit-line); padding-top: var(--s2); } .define > div:first-child { border-top-color: var(--transit-blue); } .define > div:last-child { border-top-color: var(--afterglow-gold); } .define h3 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--starlight); margin-bottom: 10px; font-weight: 400; } .define p { font-size: 15px; line-height: 1.6; color: #CFD3DA; margin: 0; } /* ── Section opener ───────────────────────────────────────────────────────── For the few chapter openings that carry real weight. The spectrum appears as one fine rule — concentrated light, not a coloured surface — and the products named below announce themselves as points on it. */ .section-opener { margin-bottom: clamp(var(--s5), 7vh, var(--s7)); } .section-opener .spectral { height: 2px; width: 100%; background: var(--spectrum); } .section-opener .opener-row { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); margin-top: var(--s3); } .opener-dots { display: flex; gap: 9px; align-items: center; } .opener-dots span { width: 8px; height: 8px; border-radius: 50%; display: block; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.025); } .section-opener h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(2.3rem, 5.2vw, 4.2rem); line-height: 1.02; letter-spacing: -0.028em; margin-top: var(--s4); max-width: 15ch; text-wrap: balance; } .section-opener .opener-lede { margin-top: var(--s4); color: var(--moon-dust); max-width: 50ch; font-size: 1.0625rem; } @media (max-width: 900px) { .section-opener h2 { max-width: none; } } /* ── Form ───────────────────────────────────────────────────────────────── */ .form { display: grid; gap: var(--s3); margin-top: var(--s4); max-width: 46ch; } .form label { display: grid; gap: 8px; } .form label > span { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--moon-dust); } .form input, .form textarea { font-family: var(--sans); font-size: 16px; line-height: 1.5; color: var(--starlight); background: var(--night-field); border: 1px solid var(--orbit-line); border-radius: 2px; padding: 12px 14px; width: 100%; transition: border-color 160ms ease; } .form textarea { resize: vertical; min-height: 120px; } .form input::placeholder, .form textarea::placeholder { color: #5A606C; } .form input:focus, .form textarea:focus { outline: none; border-color: var(--transit-blue); } .form input:focus-visible, .form textarea:focus-visible { outline: 2px solid var(--aster-violet); outline-offset: 2px; } /* Bots fill every field they find; nobody else sees this one. */ .form .trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } #form-status[data-tone="ok"] { color: var(--afterglow-gold); } #form-status[data-tone="error"] { color: var(--aster-violet); } /* A chapter's own link takes that product's colour on hover — the only place the button borrows it. */ .btn-product:hover { border-color: var(--product); } /* The close of the selected-work section: a statement and a way onward, not two bare links trailing off. */ .cta-row { border-top: 1px solid var(--orbit-line); padding-top: var(--s5); display: flex; align-items: center; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; } .cta-row .cta-lead { margin: 0; max-width: 46ch; font-family: var(--serif); font-weight: 300; font-size: clamp(1.15rem, 1.7vw, 1.45rem); line-height: 1.35; color: var(--starlight); } .cta-row .btn { flex: none; } @media (max-width: 700px) { .cta-row { display: grid; } } /* ── Featured story ───────────────────────────────────────────────────────── The one thing anyone landing on Stories should see first. */ .feature { display: block; margin-bottom: var(--s5); } .feature .spectral { height: 2px; background: var(--spectrum); } .feature-inner { background: var(--night-field); border: 1px solid var(--orbit-line); border-top: 0; padding: var(--s5) var(--s4) var(--s4); } @media (min-width: 900px) { .feature-inner { padding: var(--s5); } } .feature-head { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; } .feature h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.05; letter-spacing: -0.026em; margin-top: var(--s3); max-width: 20ch; text-wrap: balance; } .feature h2 a { color: var(--starlight); text-decoration: none; transition: color 180ms ease; } .feature h2 a:hover { color: var(--product); } .feature-dek { margin-top: var(--s3); color: #CFD3DA; max-width: 60ch; font-size: 1.0625rem; } .feature .actions { margin-top: var(--s4); gap: var(--s3); } /* ── Repositories ───────────────────────────────────────────────────────── */ .repos { margin-top: var(--s5); border-top: 1px solid var(--orbit-line); padding-top: var(--s3); } .repos ul { list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; gap: 12px; } .repos li { display: grid; gap: 3px; } @media (min-width: 760px) { .repos li { grid-template-columns: 15rem 1fr; gap: var(--s3); align-items: baseline; } } .repos a { text-decoration: none; } .repos a:hover code { border-color: var(--product); color: var(--starlight); } .repos code { transition: border-color 160ms ease, color 160ms ease; } .repos span { color: #CFD3DA; font-size: 15px; line-height: 1.5; }