/* ═══════════════════════════════════════════════════════════════════
CORVUS DS-SITE — site chrome layer (the s- primitives)
LINKED AFTER brand.css. Every class is s--namespaced so it can NEVER
collide with brand.css (slot-1-ds-content-contract §3; verify.mjs
`s-brand-disjoint`). This layer authors ZERO visual token values —
it composes brand.css custom properties only (--ink, --muted, --hairline,
--surface, --ground, --ramp, …). No hex, no color literals.
Codified in SITE-CHROME-INDEX.md (place-2 for the site chrome layer).
Slice-1 raises: s-nav · s-nav-link · s-anchor-rail · s-anchor-link ·
s-catalog-card · s-specimen-frame · s-provenance.
(s-swatch, s-copy-btn = slice 2.)
⚑ NEUTRAL DEFAULTS — restraint so brand.css primitives dominate.
Final visual treatment of every raise is Brand-Identity-Director-Corvus's
call (slot-3-codification-report §7b); these are sensible-default
placeholders, marked BID where the deferral is load-bearing.
═══════════════════════════════════════════════════════════════════ */
/* ── s-nav — the flat 6-item multi-page nav band (raise 1) ──
Hosted in .masthead .bar between .brandmark and .folio. Quiet at rest so
the masthead stays calm; ≤640px collapses to a menu affordance (site.js). */
.s-nav{display:flex;align-items:center;gap:clamp(.5rem,1.4vw,1.4rem);flex-wrap:nowrap}
.s-nav-list{display:flex;align-items:center;gap:clamp(.5rem,1.4vw,1.4rem);list-style:none;flex-wrap:nowrap}
.s-nav-toggle{display:none;align-items:center;gap:var(--space-2);border:1px solid var(--hairline);
background:var(--surface);color:var(--muted);
font-family:var(--font-mono);font-size:var(--text-micro);letter-spacing:var(--track-caps);text-transform:uppercase;
padding:var(--space-2) var(--space-3);border-radius:var(--radius-pill);cursor:pointer;
transition:color var(--dur-slow) var(--ease),border-color var(--dur-slow) var(--ease)}
.s-nav-toggle:hover{color:var(--ink);border-color:color-mix(in oklab,var(--c3) 45%,var(--hairline))}
/* ── s-nav-link (+ active) — native nav item (raise 2) ──
Quiet at rest (--muted); hover lifts to --ink; active = full-contrast --ink
+ a rationed --ramp tick (hierarchy-by-contrast). NOT .link (whose always-on
gradient underline is wrong for a quiet nav band). BID owns the final cue. */
.s-nav-link{position:relative;color:var(--muted);text-decoration:none;
font-family:var(--font-text);font-weight:500;font-size:var(--text-small);
letter-spacing:var(--track-normal);padding:var(--space-1) var(--space-1);white-space:nowrap;
transition:color var(--dur-slow) var(--ease)}
.s-nav-link:hover{color:var(--ink)}
.s-nav-link[aria-current="page"]{color:var(--ink)}
.s-nav-link[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-.35rem;
height:2px;border-radius:var(--radius-pill);background:var(--ramp)}
/* ≤640px — collapse to a menu affordance (site.js toggles [data-open] + aria-expanded).
Honest: the button is a real control; the list is hidden until opened (no half-state). */
@media(max-width:640px){
.s-nav-toggle{display:inline-flex}
.s-nav-list{position:absolute;top:100%;right:clamp(22px,5vw,72px);left:auto;margin-top:var(--space-2);
flex-direction:column;align-items:flex-start;gap:var(--space-4);
background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-lg);
padding:var(--space-4) var(--space-5);min-width:170px;
opacity:0;transform:translateY(-6px);pointer-events:none;
transition:opacity var(--dur-base) var(--ease),transform var(--dur-base) var(--ease)}
.s-nav[data-open] .s-nav-list{opacity:1;transform:none;pointer-events:auto}
.s-nav-link[aria-current="page"]::after{display:none}
}
/* ── s-anchor-rail (+ s-anchor-link) — sticky in-page scroll-spy sub-rail (raises 3+4) ──
/primitives only. NOT .railed (the annotation margin — a different affordance).
Lists the 11 primitive groups; site.js marks exactly one active on scroll. */
.s-primitives-layout{display:grid;grid-template-columns:1fr;gap:0}
.s-anchor-rail{position:sticky;top:66px;z-index:20;
background:color-mix(in oklab,var(--ground) 86%,transparent);
backdrop-filter:blur(10px) saturate(115%);
border-bottom:1px solid var(--hairline);
padding:var(--space-3) 0;margin:0 0 clamp(24px,4vh,44px)}
.s-anchor-list{display:flex;gap:var(--space-4);overflow-x:auto;list-style:none;
scrollbar-width:none;-ms-overflow-style:none}
.s-anchor-list::-webkit-scrollbar{display:none}
.s-anchor-link{display:flex;flex-direction:column;gap:var(--space-1);text-decoration:none;white-space:nowrap;
color:var(--muted);transition:color var(--dur-slow) var(--ease)}
.s-anchor-link .s-anchor-name{font-family:var(--font-text);font-weight:500;font-size:var(--text-small)}
.s-anchor-link .s-anchor-class{font-family:var(--font-mono);font-size:var(--text-micro);color:var(--muted);letter-spacing:var(--track-wide)}
.s-anchor-link:hover{color:var(--ink)}
.s-anchor-link[aria-current="location"]{color:var(--ink)}
.s-anchor-link[aria-current="location"] .s-anchor-class{color:var(--ink-2)}
@media(min-width:1040px){
.s-primitives-layout{grid-template-columns:220px minmax(0,1fr);gap:clamp(28px,4vw,56px)}
.s-anchor-rail{position:sticky;top:90px;align-self:start;
background:transparent;backdrop-filter:none;border-bottom:0;
border-right:1px solid var(--hairline);padding:0 var(--space-6) 0 0;margin:0}
.s-anchor-list{flex-direction:column;gap:var(--space-4);overflow:visible}
.s-anchor-link[aria-current="location"] .s-anchor-name{position:relative}
}
/* ── s-catalog-card — neutral display shell for the 7-part presentation contract (raise 5) ──
Deliberately QUIETER than .panel: --ground (below --surface in the plane ladder),
NO inset-light, NO gradient ring — so the live specimen it frames dominates
(panel-in-panel legibility hazard, slot-3 §2.5). Display-only shell. */
.s-catalog-card{background:var(--ground);border:1px solid var(--hairline);border-radius:var(--radius-panel);
padding:clamp(20px,2.2vw,28px);margin-bottom:clamp(16px,2vw,22px);
display:flex;flex-direction:column;gap:var(--space-4)}
.s-card-name{font-family:var(--font-mono);font-size:var(--text-small);color:var(--ink);letter-spacing:var(--track-wide)}
.s-card-name .s-card-alt{color:var(--muted)}
.s-card-meta{display:flex;flex-direction:column;gap:var(--space-3);margin:0}
.s-card-field{display:grid;grid-template-columns:1fr;gap:var(--space-1)}
.s-card-field dt{font-family:var(--font-mono);font-size:var(--text-micro);letter-spacing:var(--track-caps);
text-transform:uppercase;color:var(--muted)}
.s-card-field dd{margin:0;color:var(--ink-2);font-size:var(--text-body);line-height:var(--leading-body);
max-width:var(--measure-prose)}
.s-card-field dd code{font-family:var(--font-mono);font-size:.85em;color:var(--muted)}
@media(min-width:720px){
.s-card-field{grid-template-columns:130px minmax(0,1fr);gap:var(--space-4);align-items:baseline}
}
.s-card-tokens{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-2);font-family:var(--font-mono);font-size:var(--text-small)}
.s-card-specimen{border-top:1px dashed var(--hairline);padding-top:var(--space-4);margin-top:var(--space-1)}
.s-card-specimen-label{font-family:var(--font-mono);font-size:var(--text-micro);letter-spacing:var(--track-caps);
text-transform:uppercase;color:var(--muted);margin-bottom:var(--space-3);display:block}
.s-card-links{font-family:var(--font-text);font-size:var(--text-small);color:var(--muted)}
/* ── s-specimen-frame — bounded, scaled frame for chrome/scaffold specimens (raise 6) ──
The `transform` establishes a containing block so position:fixed/sticky chrome
(.rail, .masthead) is bounded to the frame instead of the viewport. Hosts the
required label ("one per surface" / "non-repeatable expression"). Display-only. */
.s-specimen-frame{position:relative;transform:translateZ(0);overflow:hidden;
border:1px solid var(--hairline);border-radius:var(--radius-lg);background:var(--surface);
min-height:120px;padding:0}
.s-specimen-frame > .s-frame-stage{position:relative;min-height:120px}
.s-frame-label{position:absolute;top:.55rem;right:.7rem;z-index:5;
font-family:var(--font-mono);font-size:var(--text-micro);letter-spacing:var(--track-mono);text-transform:uppercase;
color:var(--muted);background:color-mix(in oklab,var(--ground) 78%,transparent);
border:1px solid var(--hairline);border-radius:var(--radius-pill);padding:var(--space-1) var(--space-2);pointer-events:none}
.s-frame-pad{padding:clamp(20px,3vw,36px)}
/* ── s-provenance — the "points home" citation strip (raise 8, composes .mono) ──
Path text is a CITATION, not a link (selectable, not navigation — Haven D3).
The site is a VIEW; every card cites its canonical home. BID: light-touch. */
.s-provenance{font-family:var(--font-mono);font-size:var(--text-mono);letter-spacing:var(--track-wide);
color:var(--muted);border-top:1px solid var(--hairline);padding-top:var(--space-3);
display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-3);user-select:text}
.s-provenance .s-prov-sep{opacity:.5}
/* ═══════════════════════════════════════════════════════════════════
PAGE-COMPOSITION HELPERS (s--namespaced page composition, NOT codified
raises — the system.html `.s-ramp`/`.s-sec` precedent; slot-3 §3 validates
one-off demo layouts as page-composition, not primitives). Compose brand
tokens; author no color values.
═══════════════════════════════════════════════════════════════════ */
/* overview: the one atmospheric live ramp band (theme-reactive; --ramp-radial from brand.css) */
.s-ramp-band{height:clamp(150px,26vh,240px);border-radius:var(--radius-panel);border:1px solid var(--hairline);
background:var(--ramp-radial);margin-top:clamp(28px,4vh,44px)}
/* overview: the six-tile system map — native wrapping .panel.ring (slot-fill, zero new class).
The wrapped .panel supplies .n/h3/p styling + the hover border-lift affordance; this is
only the anchor reset so the whole tile is one click target. */
.s-map-tile{display:block;text-decoration:none;color:inherit}
.s-map-tile .s-map-seam{color:var(--ink-2)}
/* generic quiet meta line (build-note / slice marker), composes .mono register */
.s-note{color:var(--muted);max-width:56ch;font-size:var(--text-body);margin-top:var(--space-4)}
/* primitives: the content column beside the anchor rail (grid min-width guard) */
.s-primitives-main{min-width:0}
/* primitives: a flex row for the button-family specimen (layout only, no color) */
.s-btnrow{display:flex;gap:var(--space-4);flex-wrap:wrap;align-items:center}
/* primitives: a taller specimen stage that clips a full-height scaffold (.hero) to a bounded preview */
.s-frame-tall .s-frame-stage{height:clamp(260px,42vh,360px);overflow:hidden}
/* slice-2 placeholder panel (honest "coming in slice 2" — half-state: demoted, labeled) */
.s-stub{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-4);
max-width:52ch;padding:clamp(40px,8vh,90px) 0}
.s-stub .s-stub-tag{font-family:var(--font-mono);font-size:var(--text-mono);letter-spacing:var(--track-caps);
text-transform:uppercase;color:var(--muted);border:1px solid var(--hairline);
border-radius:var(--radius-pill);padding:var(--space-1) var(--space-3)}
/* mark page: live specimens of the two canonical files. Masked (never ![]()
) so
they take --ink and invert with the theme toggle, and so the geometry still has
exactly one definition — mark/*.svg. url() resolves against THIS stylesheet. */
.s-mark-specimens{display:flex;align-items:flex-end;gap:var(--space-6);flex-wrap:wrap;margin-top:var(--space-5)}
.s-mark-lockup,.s-mark-glyph{background:var(--ink);display:block}
.s-mark-lockup{height:52px;aspect-ratio:1954/396;
-webkit-mask:url(mark/corvus-logo.svg) center/contain no-repeat;
mask:url(mark/corvus-logo.svg) center/contain no-repeat}
.s-mark-glyph{height:52px;aspect-ratio:426/396;
-webkit-mask:url(mark/corvus-mark.svg) center/contain no-repeat;
mask:url(mark/corvus-mark.svg) center/contain no-repeat}