mirror of
https://github.com/Nutlope/hallmark.git
synced 2026-08-14 12:35:33 +02:00
Youssef
7425c415c3
b1 names no theme, so it must derive, and it did: direction.md was the first reference read, the stamp carries a real seed and a five-line direction contract, and the derived world (the IPA vowel quadrilateral, plotted, on a speech-lab plate) reaches the actual hero rather than stopping at the stamp. Twelve reference reads, zero waste, in the right order. R.1's rejection is legible in the genre note: it refused the radial blooms the atmospheric genre would have allowed, because the reflex check had already spent that move. b7 passes --fast and must not derive, and did not. It read two theme files and never opened direction.md. No seed, no contract, no slate, no draw line. The posture line still emits, which is the color.md repair working: posture is universal now, not a derived-run field. Both artifacts lint clean at 0 FAIL, 0 REFLEX, 0 WARN. Three harness bugs, all of them the flip's doing. stampPresent scanned a fixed filename list of index.html, styles.css and tokens.css, and a build that named its stylesheet page.css scored skillLoaded=false with a correct stamp sitting in it; its regex also demanded Hallmark immediately after the comment open, so "/* Formant Studio · Hallmark derived system" missed too. It now scans every emitted css and html and matches the marker anywhere in a leading comment. The reference-read budget was ten, set when a run read one theme file. A derived run reads direction.md and theme-axes.md in its place, so the floor moved up by one, and a clean derived build measures twelve. Fourteen leaves room for two conditionals and still catches the thing the check is for, which is defensive pre-loading of a forty-file tree. The cost cap was three dollars, hardcoded. A derived build on Opus lands near three and stopped mid Step-7, which scored a complete artifact as error_max_budget_usd and never exercised the gate sweep at all. It is --budget-usd now, defaulting to five. b7 also joins the brief set: the suite had no coverage of the catalog fast path after that path stopped being the default.
749 lines
23 KiB
CSS
749 lines
23 KiB
CSS
/* Hallmark · macrostructure: Ruled Index (custom) · genre: editorial · theme: Grid · tone: utilitarian-technical · anchor hue: 255 cool / accent 28 warm · hero: Banner/custom-left-slam · nav: ruled masthead over a spec block, static, no CTA-right (decided, not reflex) · footer: spec colophon in unequal ruled fields (decided, not reflex) · enrichment: none, typography only · posture: restrained · contrast: pass (40-41) · mobile: 320/375/414/768 pass · modes: light only · v1.2.0 */
|
|
/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V4 · weakest: E - the mailto enquiry path is the honest ceiling for a static page but is not a real submission endpoint; fix taken: validation, reserved error slots, aria-live, and a visible statement that nothing is stored here rather than a fake success state */
|
|
/* Hallmark · note · Grid's own spec is single-family. This build declares one outlier register against it: every measurement on the page (index numerals, folios, step figures, board thickness, thread gauge) is set in IBM Plex Mono. A bindery quotes in millimetres and the millimetres earn a face; the outlier never touches running copy, so the page is two families, not three. */
|
|
|
|
@import "tokens.css";
|
|
|
|
/* ── Reset and ground ─────────────────────────────────────────────── */
|
|
|
|
*, *::before, *::after { box-sizing: border-box; }
|
|
|
|
html, body { overflow-x: clip; }
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
-webkit-text-size-adjust: 100%;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
background: var(--color-paper);
|
|
color: var(--color-ink-2);
|
|
font-family: var(--font-body);
|
|
font-size: var(--text-base);
|
|
font-weight: 400;
|
|
line-height: var(--lh-body);
|
|
text-rendering: optimizeLegibility;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
h1, h2, h3 {
|
|
margin: 0;
|
|
color: var(--color-ink);
|
|
font-family: var(--font-display);
|
|
overflow-wrap: break-word;
|
|
min-width: 0;
|
|
}
|
|
|
|
p, dl, dd, ol, ul, figure, table { margin: 0; }
|
|
ol, ul { padding: 0; list-style: none; }
|
|
|
|
a { color: inherit; }
|
|
|
|
/* One ring, everywhere, instantly. Never transitioned. */
|
|
:focus-visible {
|
|
outline: var(--rule-heavy) solid var(--color-focus);
|
|
outline-offset: 3px;
|
|
}
|
|
|
|
.skip {
|
|
position: absolute;
|
|
inset-inline-start: var(--space-md);
|
|
inset-block-start: -4rem;
|
|
z-index: var(--z-sticky);
|
|
padding: var(--space-sm) var(--space-md);
|
|
background: var(--color-ink);
|
|
color: var(--color-paper);
|
|
font-size: var(--text-sm);
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
}
|
|
.skip:focus { inset-block-start: var(--space-md); }
|
|
|
|
/* ── THE ground: the exposed twelve-column hairline grid ──────────── */
|
|
/* Fixed, so it reads as the sheet the page is printed on rather than as
|
|
decoration attached to any one band. It is content, not scaffolding. */
|
|
|
|
.rails {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 0;
|
|
pointer-events: none;
|
|
max-width: var(--shell);
|
|
margin-inline: auto;
|
|
padding-inline: var(--pad);
|
|
background-origin: content-box;
|
|
background-clip: content-box;
|
|
background-repeat: no-repeat, repeat;
|
|
background-image:
|
|
linear-gradient(to right, transparent calc(100% - 1px), var(--color-rule) calc(100% - 1px)),
|
|
repeating-linear-gradient(to right,
|
|
var(--color-rule) 0, var(--color-rule) 1px,
|
|
transparent 1px, transparent calc(100% / 12));
|
|
}
|
|
|
|
/* ── Shell ────────────────────────────────────────────────────────── */
|
|
|
|
.shell {
|
|
position: relative;
|
|
z-index: var(--z-base);
|
|
width: 100%;
|
|
max-width: var(--shell);
|
|
margin-inline: auto;
|
|
padding-inline: var(--pad);
|
|
}
|
|
|
|
/* Content rides the same twelve columns the rails draw, so the gaps are
|
|
built from padding inside the cells and never from a grid gap. */
|
|
.g12 {
|
|
display: grid;
|
|
grid-template-columns: repeat(12, minmax(0, 1fr));
|
|
column-gap: 0;
|
|
}
|
|
|
|
.label {
|
|
font-size: var(--text-xs);
|
|
font-weight: 600;
|
|
letter-spacing: var(--tracking-label);
|
|
text-transform: uppercase;
|
|
color: var(--color-muted);
|
|
}
|
|
|
|
/* The one signal, only ever as a geometric mark. */
|
|
.mark {
|
|
display: inline-block;
|
|
inline-size: 0.5em;
|
|
block-size: 0.5em;
|
|
background: var(--color-accent);
|
|
vertical-align: baseline;
|
|
}
|
|
.mark--period { margin-inline-start: 0.14em; }
|
|
.mark--btn { margin-inline-start: 0.6em; vertical-align: middle; }
|
|
.mark--foot { margin-inline: 0.1em 0.55em; }
|
|
|
|
::selection { background: var(--color-accent); color: var(--color-accent-ink); }
|
|
|
|
/* ── Masthead ─────────────────────────────────────────────────────── */
|
|
|
|
.mast { border-block-start: var(--rule-heavy) solid var(--color-ink); }
|
|
|
|
.mast__in {
|
|
display: grid;
|
|
grid-template-columns: repeat(12, minmax(0, 1fr));
|
|
column-gap: 0;
|
|
align-items: end;
|
|
padding-block: var(--space-lg) var(--space-md);
|
|
border-block-end: var(--rule-hair) solid var(--color-rule-2);
|
|
}
|
|
|
|
.wordmark {
|
|
grid-column: 1 / span 4;
|
|
font-family: var(--font-display);
|
|
font-weight: var(--display-weight);
|
|
font-size: var(--text-2xl);
|
|
line-height: 1;
|
|
letter-spacing: var(--tracking-display);
|
|
color: var(--color-ink);
|
|
text-decoration: none;
|
|
}
|
|
.wordmark .mark { inline-size: 0.32em; block-size: 0.32em; margin-inline-start: 0.1em; }
|
|
|
|
.mast__spec {
|
|
grid-column: 6 / span 7;
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
align-items: end;
|
|
}
|
|
.mast__field { padding-inline-end: var(--space-md); }
|
|
.mast__field dt {
|
|
font-size: var(--text-xs);
|
|
font-weight: 600;
|
|
letter-spacing: var(--tracking-label);
|
|
text-transform: uppercase;
|
|
color: var(--color-muted);
|
|
}
|
|
.mast__field dd {
|
|
margin: 0;
|
|
font-size: var(--text-sm);
|
|
color: var(--color-ink-2);
|
|
}
|
|
|
|
.mast__nav { border-block-end: var(--rule-heavy) solid var(--color-ink); }
|
|
.mast__navin {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0 var(--space-xl);
|
|
padding-block: var(--space-sm);
|
|
}
|
|
.mast__navin a {
|
|
white-space: nowrap;
|
|
font-size: var(--text-base);
|
|
font-weight: 500;
|
|
text-decoration: none;
|
|
padding-block: var(--space-2xs);
|
|
border-block-end: var(--rule-heavy) solid transparent;
|
|
transition: border-color var(--dur-short) var(--ease-out),
|
|
color var(--dur-short) var(--ease-out);
|
|
}
|
|
.mast__navin a.is-last { margin-inline-start: auto; font-weight: 700; }
|
|
|
|
/* ── Hero · Banner posture, slammed left, bottom-heavy ────────────── */
|
|
|
|
.hero { border-block-end: var(--rule-hair) solid var(--color-rule); }
|
|
|
|
.hero__in {
|
|
display: grid;
|
|
grid-template-columns: repeat(12, minmax(0, 1fr));
|
|
column-gap: 0;
|
|
row-gap: var(--space-lg);
|
|
/* Banner: block-end is 1.5x block-start, so the hero sits into the page. */
|
|
padding-block: var(--space-2xl) var(--space-3xl);
|
|
}
|
|
|
|
.hero__h {
|
|
grid-column: 1 / span 12;
|
|
max-width: 20ch;
|
|
font-weight: var(--display-weight);
|
|
font-size: var(--text-hero);
|
|
line-height: var(--lh-display);
|
|
letter-spacing: var(--tracking-display);
|
|
text-transform: lowercase;
|
|
text-wrap: balance;
|
|
}
|
|
|
|
.hero__lede {
|
|
grid-column: 1 / span 6;
|
|
padding-inline-end: var(--space-xl);
|
|
font-size: var(--text-lg);
|
|
line-height: 1.4;
|
|
color: var(--color-ink-2);
|
|
text-wrap: pretty;
|
|
}
|
|
|
|
.hero__spec {
|
|
grid-column: 9 / span 4;
|
|
align-self: end;
|
|
font-size: var(--text-xs);
|
|
font-weight: 600;
|
|
letter-spacing: var(--tracking-label);
|
|
text-transform: uppercase;
|
|
color: var(--color-muted);
|
|
}
|
|
|
|
.hero__act {
|
|
grid-column: 1 / span 8;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: baseline;
|
|
gap: var(--space-md) var(--space-xl);
|
|
}
|
|
|
|
.link-cta {
|
|
font-size: var(--text-md);
|
|
font-weight: 700;
|
|
text-decoration: none;
|
|
white-space: nowrap;
|
|
color: var(--color-ink);
|
|
border-block-end: 3px solid var(--color-accent);
|
|
padding-block-end: var(--space-3xs);
|
|
transition: color var(--dur-short) var(--ease-out);
|
|
}
|
|
.link-quiet {
|
|
font-size: var(--text-base);
|
|
white-space: nowrap;
|
|
color: var(--color-muted);
|
|
text-decoration: none;
|
|
border-block-end: var(--rule-hair) solid var(--color-rule-2);
|
|
padding-block-end: var(--space-3xs);
|
|
transition: color var(--dur-short) var(--ease-out),
|
|
border-color var(--dur-short) var(--ease-out);
|
|
}
|
|
|
|
/* ── Section heads · a 2px ink rule, the head flush beneath it ─────── */
|
|
|
|
.band { padding-block: var(--space-3xl); }
|
|
/* The hero already spends 96px below the CTA; the index starts sooner so the
|
|
two do not add up to a hole. */
|
|
.band--index { padding-block: var(--space-xl) var(--space-2xl); }
|
|
.band--order { padding-block: var(--space-2xl) var(--space-3xl); }
|
|
|
|
/* One change of paper, marking the materials band. */
|
|
.band--mat {
|
|
background: var(--color-paper-2);
|
|
border-block: var(--rule-hair) solid var(--color-rule);
|
|
padding-block: var(--space-2xl);
|
|
}
|
|
|
|
.head {
|
|
display: grid;
|
|
grid-template-columns: repeat(12, minmax(0, 1fr));
|
|
column-gap: 0;
|
|
align-items: baseline;
|
|
border-block-start: var(--rule-heavy) solid var(--color-ink);
|
|
padding-block-start: var(--space-sm);
|
|
margin-block-end: var(--space-xl);
|
|
}
|
|
.head__h {
|
|
grid-column: 1 / span 9;
|
|
max-width: 24ch;
|
|
font-weight: var(--display-weight);
|
|
font-size: var(--text-display);
|
|
line-height: 1.0;
|
|
letter-spacing: var(--tracking-display);
|
|
text-transform: lowercase;
|
|
}
|
|
.head__folio {
|
|
grid-column: 11 / span 2;
|
|
text-align: end;
|
|
font-family: var(--font-figure);
|
|
font-size: var(--text-xs);
|
|
font-weight: 500;
|
|
letter-spacing: 0.02em;
|
|
font-variant-numeric: tabular-nums;
|
|
color: var(--color-muted);
|
|
}
|
|
|
|
/* ── Structures · the numbered index ──────────────────────────────── */
|
|
|
|
.index { counter-reset: idx; }
|
|
|
|
.row {
|
|
counter-increment: idx;
|
|
display: grid;
|
|
grid-template-columns: repeat(12, minmax(0, 1fr));
|
|
column-gap: 0;
|
|
align-items: start;
|
|
padding-block: var(--space-lg);
|
|
border-block-start: var(--rule-hair) solid var(--color-rule);
|
|
}
|
|
.row:last-child { border-block-end: var(--rule-hair) solid var(--color-rule); }
|
|
|
|
.row::before {
|
|
content: counter(idx, decimal-leading-zero);
|
|
grid-column: 1 / span 1;
|
|
font-family: var(--font-figure);
|
|
font-size: var(--text-xs);
|
|
font-weight: 500;
|
|
letter-spacing: 0.02em;
|
|
font-variant-numeric: tabular-nums;
|
|
color: var(--color-accent-text);
|
|
padding-block-start: 0.5em;
|
|
}
|
|
.row__name {
|
|
grid-column: 2 / span 3;
|
|
padding-inline-end: var(--space-lg);
|
|
font-size: var(--text-xl);
|
|
font-weight: 700;
|
|
line-height: 1.05;
|
|
letter-spacing: -0.03em;
|
|
text-transform: lowercase;
|
|
}
|
|
.row__body {
|
|
grid-column: 5 / span 5;
|
|
padding-inline-end: var(--space-xl);
|
|
max-width: var(--measure);
|
|
text-wrap: pretty;
|
|
}
|
|
.row__for {
|
|
grid-column: 10 / span 3;
|
|
font-size: var(--text-sm);
|
|
color: var(--color-muted);
|
|
padding-block-start: 0.15em;
|
|
}
|
|
|
|
/* ── The bench ────────────────────────────────────────────────────── */
|
|
|
|
.bench {
|
|
display: grid;
|
|
grid-template-columns: repeat(12, minmax(0, 1fr));
|
|
column-gap: 0;
|
|
row-gap: var(--space-xl);
|
|
}
|
|
.bench__prose {
|
|
grid-column: 1 / span 6;
|
|
padding-inline-end: var(--space-2xl);
|
|
display: grid;
|
|
gap: var(--space-md);
|
|
max-width: var(--measure);
|
|
font-size: var(--text-md);
|
|
text-wrap: pretty;
|
|
}
|
|
.bench__hands {
|
|
grid-column: 8 / span 5;
|
|
display: grid;
|
|
gap: var(--space-lg);
|
|
align-content: start;
|
|
}
|
|
.hand {
|
|
border-block-start: var(--rule-heavy) solid var(--color-ink);
|
|
padding-block-start: var(--space-sm);
|
|
}
|
|
.hand__who {
|
|
font-family: var(--font-display);
|
|
font-size: var(--text-lg);
|
|
font-weight: 700;
|
|
letter-spacing: -0.02em;
|
|
color: var(--color-ink);
|
|
}
|
|
.hand__role {
|
|
display: block;
|
|
font-size: var(--text-xs);
|
|
font-weight: 600;
|
|
letter-spacing: var(--tracking-label);
|
|
text-transform: uppercase;
|
|
color: var(--color-accent-text);
|
|
}
|
|
.hand__does {
|
|
margin: var(--space-xs) 0 0;
|
|
font-size: var(--text-sm);
|
|
color: var(--color-ink-2);
|
|
}
|
|
|
|
/* ── How a commission goes ────────────────────────────────────────── */
|
|
|
|
.steps { counter-reset: step; }
|
|
.step {
|
|
counter-increment: step;
|
|
display: grid;
|
|
grid-template-columns: repeat(12, minmax(0, 1fr));
|
|
column-gap: 0;
|
|
align-items: baseline;
|
|
padding-block: var(--space-lg);
|
|
border-block-start: var(--rule-hair) solid var(--color-rule);
|
|
}
|
|
.step:last-child { border-block-end: var(--rule-hair) solid var(--color-rule); }
|
|
.step::before {
|
|
content: counter(step);
|
|
grid-column: 1 / span 1;
|
|
font-family: var(--font-figure);
|
|
font-size: var(--text-2xl);
|
|
font-weight: 500;
|
|
line-height: 1;
|
|
color: var(--color-rule-2);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.step__h {
|
|
grid-column: 2 / span 4;
|
|
padding-inline-end: var(--space-lg);
|
|
font-size: var(--text-md);
|
|
font-weight: 700;
|
|
line-height: 1.25;
|
|
letter-spacing: -0.015em;
|
|
}
|
|
.step p {
|
|
grid-column: 6 / span 6;
|
|
padding-inline-end: var(--space-lg);
|
|
max-width: var(--measure);
|
|
color: var(--color-ink-2);
|
|
text-wrap: pretty;
|
|
}
|
|
|
|
/* ── Materials ────────────────────────────────────────────────────── */
|
|
|
|
.mat {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
text-align: start;
|
|
}
|
|
.mat__cap {
|
|
caption-side: bottom;
|
|
padding-block-start: var(--space-md);
|
|
text-align: start;
|
|
font-size: var(--text-sm);
|
|
color: var(--color-muted);
|
|
max-width: var(--measure);
|
|
}
|
|
.mat th,
|
|
.mat td {
|
|
padding-block: var(--space-md);
|
|
border-block-start: var(--rule-hair) solid var(--color-rule-2);
|
|
vertical-align: baseline;
|
|
text-align: start;
|
|
}
|
|
.mat tr:last-child th,
|
|
.mat tr:last-child td { border-block-end: var(--rule-hair) solid var(--color-rule-2); }
|
|
.mat th {
|
|
width: 25%;
|
|
padding-inline-end: var(--space-lg);
|
|
font-size: var(--text-xs);
|
|
font-weight: 600;
|
|
letter-spacing: var(--tracking-label);
|
|
text-transform: uppercase;
|
|
color: var(--color-muted);
|
|
}
|
|
.mat td { max-width: var(--measure); }
|
|
.num {
|
|
font-family: var(--font-figure);
|
|
font-size: 0.94em;
|
|
font-variant-numeric: tabular-nums;
|
|
font-weight: 500;
|
|
color: var(--color-ink);
|
|
}
|
|
|
|
/* ── Commission form ──────────────────────────────────────────────── */
|
|
|
|
.form-wrap {
|
|
display: grid;
|
|
grid-template-columns: repeat(12, minmax(0, 1fr));
|
|
column-gap: 0;
|
|
row-gap: var(--space-xl);
|
|
}
|
|
.form-note {
|
|
grid-column: 1 / span 5;
|
|
padding-inline-end: var(--space-2xl);
|
|
font-size: var(--text-md);
|
|
color: var(--color-ink-2);
|
|
text-wrap: pretty;
|
|
}
|
|
.form {
|
|
grid-column: 7 / span 6;
|
|
display: grid;
|
|
grid-template-columns: repeat(6, minmax(0, 1fr));
|
|
column-gap: var(--space-lg);
|
|
row-gap: var(--space-lg);
|
|
}
|
|
.field { display: grid; grid-column: 1 / span 6; }
|
|
.field--half { grid-column: span 3; }
|
|
|
|
.field label {
|
|
font-size: var(--text-xs);
|
|
font-weight: 600;
|
|
letter-spacing: var(--tracking-label);
|
|
text-transform: uppercase;
|
|
color: var(--color-muted);
|
|
margin-block-end: var(--space-xs);
|
|
}
|
|
.field input,
|
|
.field select,
|
|
.field textarea {
|
|
width: 100%;
|
|
min-height: 48px;
|
|
padding: var(--space-sm) var(--space-sm);
|
|
background: var(--color-paper);
|
|
color: var(--color-ink);
|
|
font-family: var(--font-body);
|
|
font-size: var(--text-base);
|
|
line-height: 1.4;
|
|
border: var(--rule-hair) solid var(--color-rule-2);
|
|
border-radius: var(--radius-control);
|
|
transition: border-color var(--dur-short) var(--ease-out);
|
|
}
|
|
.field textarea { min-height: 8rem; resize: vertical; }
|
|
.field select { appearance: none; padding-inline-end: var(--space-xl); }
|
|
|
|
.field input:hover,
|
|
.field select:hover,
|
|
.field textarea:hover { border-color: var(--color-ink-2); }
|
|
|
|
.field.is-error input,
|
|
.field.is-error textarea { border-color: var(--color-accent); border-width: var(--rule-heavy); }
|
|
|
|
/* Reserved, so an error never pushes the form down. */
|
|
.field__msg {
|
|
display: block;
|
|
min-height: 1lh;
|
|
margin-block-start: var(--space-2xs);
|
|
font-size: var(--text-xs);
|
|
line-height: 1.35;
|
|
color: var(--color-accent-text);
|
|
}
|
|
|
|
.form-act {
|
|
grid-column: 1 / span 6;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: var(--space-sm) var(--space-lg);
|
|
}
|
|
.form-act__note {
|
|
font-size: var(--text-xs);
|
|
color: var(--color-muted);
|
|
max-width: 30ch;
|
|
}
|
|
|
|
/* The page's one filled control. */
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
min-height: 48px;
|
|
padding-inline: var(--space-lg);
|
|
background: var(--color-ink);
|
|
color: var(--color-paper);
|
|
font-family: var(--font-body);
|
|
font-size: var(--text-base);
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
border: var(--rule-heavy) solid var(--color-ink);
|
|
border-radius: var(--radius-control);
|
|
cursor: pointer;
|
|
transition: background-color var(--dur-micro) var(--ease-out),
|
|
transform var(--dur-micro) var(--ease-out);
|
|
}
|
|
.btn:active { transform: translateY(1px); }
|
|
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
|
|
|
|
.form-done {
|
|
grid-column: 1 / span 6;
|
|
font-size: var(--text-base);
|
|
color: var(--color-ink);
|
|
max-width: 46ch;
|
|
}
|
|
.form-done::before {
|
|
content: "";
|
|
display: inline-block;
|
|
inline-size: 0.5em;
|
|
block-size: 0.5em;
|
|
margin-inline-end: 0.6em;
|
|
background: var(--color-accent);
|
|
}
|
|
|
|
/* ── Colophon · unequal ruled fields, one closing line ─────────────── */
|
|
|
|
.colo {
|
|
border-block-start: var(--rule-heavy) solid var(--color-ink);
|
|
padding-block: var(--space-xl) var(--space-2xl);
|
|
}
|
|
.colo__grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(12, minmax(0, 1fr));
|
|
column-gap: 0;
|
|
row-gap: var(--space-lg);
|
|
}
|
|
.colo__f { padding-inline-end: var(--space-lg); }
|
|
.colo__f:nth-child(1) { grid-column: 1 / span 3; }
|
|
.colo__f:nth-child(2) { grid-column: 4 / span 4; }
|
|
.colo__f:nth-child(3) { grid-column: 8 / span 3; }
|
|
.colo__f:nth-child(4) { grid-column: 11 / span 2; }
|
|
.colo__f dt {
|
|
font-size: var(--text-xs);
|
|
font-weight: 600;
|
|
letter-spacing: var(--tracking-label);
|
|
text-transform: uppercase;
|
|
color: var(--color-muted);
|
|
padding-block-end: var(--space-2xs);
|
|
border-block-end: var(--rule-hair) solid var(--color-rule);
|
|
margin-block-end: var(--space-xs);
|
|
}
|
|
.colo__f dd { margin: 0; font-size: var(--text-sm); color: var(--color-ink-2); }
|
|
.colo__f a {
|
|
text-decoration: none;
|
|
border-block-end: var(--rule-hair) solid var(--color-accent);
|
|
white-space: nowrap;
|
|
transition: color var(--dur-short) var(--ease-out);
|
|
}
|
|
|
|
.colo__line {
|
|
margin-block-start: var(--space-2xl);
|
|
padding-block-start: var(--space-sm);
|
|
border-block-start: var(--rule-hair) solid var(--color-rule);
|
|
font-size: var(--text-sm);
|
|
color: var(--color-muted);
|
|
max-width: 72ch;
|
|
}
|
|
.colo__line .mark { inline-size: 0.4em; block-size: 0.4em; }
|
|
|
|
/* ── Hover, only where the pointer is fine ────────────────────────── */
|
|
|
|
@media (hover: hover) and (pointer: fine) {
|
|
.mast__navin a:hover { border-block-end-color: var(--color-accent); }
|
|
.link-cta:hover { color: var(--color-accent-text); }
|
|
.link-quiet:hover { color: var(--color-ink); border-block-end-color: var(--color-ink); }
|
|
.colo__f a:hover { color: var(--color-accent-text); }
|
|
.btn:hover { background-color: var(--color-ink-2); }
|
|
}
|
|
@media (pointer: coarse) {
|
|
.btn, .mast__navin a, .link-cta, .link-quiet { min-height: 48px; }
|
|
.mast__navin a, .link-cta, .link-quiet { display: inline-flex; align-items: center; }
|
|
}
|
|
|
|
/* ── Down to the small sheet ──────────────────────────────────────── */
|
|
/* Body-adjacent UI runs larger on mobile and tightens on the desktop
|
|
baseline; the rails drop from twelve columns to four rather than
|
|
disappearing, because the grid is the theme. */
|
|
|
|
@media (max-width: 59.99rem) {
|
|
:root { --text-display: clamp(2rem, 7vw, 2.75rem); --text-hero: clamp(2.75rem, 12vw, 4.25rem); }
|
|
|
|
.rails {
|
|
background-image:
|
|
linear-gradient(to right, transparent calc(100% - 1px), var(--color-rule) calc(100% - 1px)),
|
|
repeating-linear-gradient(to right,
|
|
var(--color-rule) 0, var(--color-rule) 1px,
|
|
transparent 1px, transparent calc(100% / 4));
|
|
}
|
|
|
|
.mast__in { row-gap: var(--space-md); }
|
|
.wordmark { grid-column: 1 / span 12; }
|
|
.mast__spec { grid-column: 1 / span 12; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm) 0; }
|
|
|
|
.hero__in { padding-block: var(--space-xl) var(--space-2xl); }
|
|
.hero__lede { grid-column: 1 / span 12; padding-inline-end: 0; }
|
|
.hero__spec { grid-column: 1 / span 12; }
|
|
.hero__act { grid-column: 1 / span 12; }
|
|
|
|
.head__h { grid-column: 1 / span 10; }
|
|
.head__folio { grid-column: 11 / span 2; }
|
|
|
|
.row { row-gap: var(--space-xs); padding-block: var(--space-md); }
|
|
.row::before { grid-column: 1 / span 12; padding-block-start: 0; }
|
|
.row__name { grid-column: 1 / span 12; padding-inline-end: 0; }
|
|
.row__body { grid-column: 1 / span 12; padding-inline-end: 0; }
|
|
.row__for { grid-column: 1 / span 12; }
|
|
|
|
.bench__prose { grid-column: 1 / span 12; padding-inline-end: 0; }
|
|
.bench__hands { grid-column: 1 / span 12; }
|
|
|
|
.step { row-gap: var(--space-2xs); }
|
|
.step::before { grid-column: 1 / span 12; }
|
|
.step__h { grid-column: 1 / span 12; padding-inline-end: 0; }
|
|
.step p { grid-column: 1 / span 12; padding-inline-end: 0; }
|
|
|
|
.mat th { width: 32%; }
|
|
|
|
.form-note { grid-column: 1 / span 12; padding-inline-end: 0; }
|
|
.form { grid-column: 1 / span 12; }
|
|
|
|
.colo__f:nth-child(1),
|
|
.colo__f:nth-child(2),
|
|
.colo__f:nth-child(3),
|
|
.colo__f:nth-child(4) { grid-column: span 6; }
|
|
}
|
|
|
|
@media (max-width: 39.99rem) {
|
|
.band, .band--order, .band--mat { padding-block: var(--space-2xl); }
|
|
.band--index { padding-block: var(--space-lg) var(--space-2xl); }
|
|
.mast__navin { gap: 0 var(--space-lg); }
|
|
.mast__navin a.is-last { margin-inline-start: 0; }
|
|
.field--half { grid-column: 1 / span 6; }
|
|
|
|
.mat { display: block; }
|
|
.mat tbody, .mat tr, .mat th, .mat td { display: block; width: auto; }
|
|
.mat tr { border-block-start: var(--rule-hair) solid var(--color-rule-2); padding-block: var(--space-md); }
|
|
.mat th, .mat td { border: 0; padding-block: 0; padding-inline-end: 0; }
|
|
.mat th { padding-block-end: var(--space-2xs); }
|
|
.mat tr:last-child { border-block-end: var(--rule-hair) solid var(--color-rule-2); }
|
|
.mat tr:last-child th, .mat tr:last-child td { border-block-end: 0; }
|
|
|
|
.colo__f:nth-child(1),
|
|
.colo__f:nth-child(2),
|
|
.colo__f:nth-child(3),
|
|
.colo__f:nth-child(4) { grid-column: 1 / span 12; padding-inline-end: 0; }
|
|
}
|
|
|
|
/* Mobile runs larger; the desktop baseline tightens. */
|
|
@media (min-width: 60rem) {
|
|
.mast__navin a, .form-act__note, .colo__f dd { font-size: var(--text-sm); }
|
|
}
|
|
|
|
/* ── Reduced motion ───────────────────────────────────────────────── */
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
html { scroll-behavior: auto; }
|
|
*, *::before, *::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
.btn:active { transform: none; }
|
|
}
|