*/
/* ---- active-work card registers ----
PATH NOTE: these three background images are referenced relative to this
stylesheet. The mockup keeps them in html/img/ next to html/css/, so it
writes `../img/…`. This engine serves the stylesheet from /assets/ and the
images from /assets/plates/, so the same path resolves to /img/ — which
404s, leaving the cards with a flat colour and no plate. Written relative to
this file (`plates/…`) it resolves correctly in both layouts.
This is the only intentional divergence from the mockup's site.css. */
.os-bio {
--paper: #c9cfc9;
--paper-soft: #e2e3dd;
--paper-deep: #b8c0ba;
--ink: #2e3a36;
--ink-soft: #5a6660;
--ink-mute: #818b85;
--rule: #8e9890;
--quince: #a25e3a;
--gold: #a25e3a;
/*--fog: #FAFFFA;
--paper: #EFF4EF;
--rice: oklch(0.978 0.006 142);
--mist: oklch(0.62 0.030 130);
--hairline: oklch(0.26 0.030 145 / 0.16);
--moss: oklch(0.50 0.090 140);
--ember: #cccecc;
--hero-text: oklch(0.988 0.008 142);
--hero-veil: linear-gradient(180deg, oklch(0.22 0.030 145 / 0.40) 0%, oklch(0.22 0.030 145 / 0.10) 35%, oklch(0.22 0.030 145 / 0.50) 100%);*/
background:
linear-gradient(105deg,
rgba(201, 207, 201, 0.94) 0%,
rgba(201, 207, 201, 0.82) 50%,
rgba(201, 207, 201, 0.384) 100%),
url('plates/ocean-background.jpg') center 30% / cover no-repeat;
}
.os-mind-embed {
--paper: #0f1620;
--paper-soft: #1a2332;
--paper-deep: #0a0d12;
--ink: #ece1c7;
--ink-soft: #b3a687;
--ink-mute: #8a7e66;
--rule: #2a3548;
--quince: #d4a23a;
--gold: #d4a23a;
background:
linear-gradient(105deg,
rgba(15, 22, 32, 0.92) 0%,
rgba(15, 22, 32, 0.78) 50%,
rgba(15, 22, 32, 0.55) 100%),
url('plates/spiral-substrate.jpg') center / cover no-repeat;
}
.os-stone-crane {
--paper: #c9cfc9;
--paper-soft: #e2e3dd;
--paper-deep: #b8c0ba;
--ink: #2e3a36;
--ink-soft: #5a6660;
--ink-mute: #818b85;
--rule: #8e9890;
--quince: #a25e3a;
--gold: #a25e3a;
background:
linear-gradient(105deg,
rgba(201, 207, 201, 0.94) 0%,
rgba(201, 207, 201, 0.82) 50%,
rgba(201, 207, 201, 0.55) 100%),
url('plates/sc-fog-figure.png') center 30% / cover no-repeat;
}
/*
.os-head{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:baseline;padding:28px 40px 0}
.os-head .label{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--quince)}
.os-head .name{font-family:var(--serif);font-style:italic;font-size:17px;color:var(--ink-soft);font-variation-settings:"opsz" 36}
.os-head .all{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute);text-decoration:none;text-align:right}
.os-head .all:hover{color:var(--quince)}
.os-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:18px 40px 36px}
.os-card{display:grid;grid-template-rows:130px auto;background:var(--paper);border:1px solid var(--rule);color:var(--ink);text-decoration:none;transition:border-color .2s ease}
.os-card.noimg{grid-template-rows:auto}
.os-card:hover{border-color:var(--quince)}
.os-card:hover h4{color:var(--quince)}
.os-card h4{transition:color .2s ease}
.os-card .os-img{background:#05080d;overflow:hidden;position:relative}
.os-card .os-img img{width:100%;height:100%;object-fit:cover;opacity:.84}
.os-card .os-body{padding:14px 16px 16px}
.os-card .os-meta{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:7px}
.os-card .os-meta .cat{color:var(--quince)}
.os-card h4{font-family:var(--serif);font-weight:500;font-size:17px;line-height:1.25;letter-spacing:-.005em;margin:0 0 7px;font-variation-settings:"opsz" 36}
.os-card h4 em{font-style:italic;color:var(--ink-soft)}
.os-card p{font-family:var(--serif);font-size:14px;line-height:1.55;color:var(--ink-soft);margin:0;font-style:italic}
*/
/*
/* ---- coming cluster (homepage WIP band) ----
The header (.cc-head) lives on the active register's paper. Each card
below carries its own palette via locally-scoped CSS variables, so the
register tokens (--paper, --ink, --quince, etc.) inside that card
resolve to substrate-night / mist-cedar values regardless of the
ambient theme. Same mechanism as theme-*.css, just element-scoped.
*
.coming-cluster {
max-width: 1100px; margin: 0 auto;
border-top: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
}
.coming-cluster .cc-head {
display: grid; grid-template-columns: auto 1fr auto;
gap: 18px; align-items: baseline;
padding: 18px 28px 12px;
border-bottom: 1px dashed var(--rule);
}
.coming-cluster .cc-head .label {
font-family: var(--mono); font-size: 10px; letter-spacing: .22em;
text-transform: uppercase; color: var(--quince);
}
.coming-cluster .cc-head .name {
font-family: var(--serif); font-style: italic;
font-size: 17px; color: var(--ink-soft);
font-variation-settings: "opsz" 36;
}
.coming-cluster .cc-head .meta {
font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
text-transform: uppercase; color: var(--ink-mute);
}
.cc-cols { display: grid; grid-template-columns: 1fr 1fr; }
.cc-col {
padding: 22px 28px 26px;
background: var(--paper);
color: var(--ink);
}
.cc-col .cc-name {
font-family: var(--serif); font-weight: 500; font-size: 19px;
color: var(--ink); margin: 0 0 8px;
}
.cc-col .cc-name a { color: inherit; border: 0; }
.cc-col .cc-name a:hover { color: var(--quince); }
.cc-col .cc-msg {
font-family: var(--serif); font-size: 14.5px; line-height: 1.55;
color: var(--ink-soft); font-style: italic;
max-width: 36ch; margin: 0;
}
.cc-col .cc-msg b { color: var(--ink); font-style: normal; font-weight: 500; }
/* Resonance card — substrate (night) register
Plate image (spiral-substrate.png) sits under a same-color overlay
so the cream text remains comfortably readable. Bump the alpha if
the image starts to compete with the title. *
.cc-col.cc-substrate {
--paper: #0f1620;
--paper-soft: #1a2332;
--paper-deep: #0a0d12;
--ink: #ece1c7;
--ink-soft: #b3a687;
--ink-mute: #8a7e66;
--rule: #2a3548;
--quince: #d4a23a;
--gold: #d4a23a;
background:
linear-gradient(105deg,
rgba(15, 22, 32, 0.92) 0%,
rgba(15, 22, 32, 0.78) 50%,
rgba(15, 22, 32, 0.55) 100%),
url('spiral-substrate.png') center / cover no-repeat;
}
/* Stone & Crane card — mist (cedar fog) register *
.cc-col.cc-mist {
--paper: #c9cfc9;
--paper-soft: #e2e3dd;
--paper-deep: #b8c0ba;
--ink: #2e3a36;
--ink-soft: #5a6660;
--ink-mute: #818b85;
--rule: #8e9890;
--quince: #a25e3a;
--gold: #a25e3a;
background:
linear-gradient(105deg,
rgba(201, 207, 201, 0.94) 0%,
rgba(201, 207, 201, 0.82) 50%,
rgba(201, 207, 201, 0.55) 100%),
url('tsuru-luka.png') center 30% / cover no-repeat;
}
*/
/* ===== figures in the reading column =====
Placement is written as a URL fragment in the markdown
() and turned into a class by
plugins/rehype-figure-hints.mjs. Keep the names in step with that file.
`float` is still the correct tool here — it is the only thing that makes
text wrap around an element. What has moved on is everything around it:
logical properties so the rule survives a right-to-left context, inline-size
instead of width, and flow-root instead of a clearfix hack. */
/* Contain floated children: the modern one-line clearfix. Without this a tall
figure escapes the bottom of its section and overlaps what follows. */
.reader .body, .note-entry { display: flow-root; }
.reader .body img, .note-entry img { max-width: 100%; height: auto; }
.reader .body img.fig-right,
.reader .body img.fig-left,
.note-entry img.fig-right,
.note-entry img.fig-left {
/* ~a fifth of the column, never wider than 200px, never uselessly small */
inline-size: clamp(120px, 20%, 200px);
margin-block: .35rem 1rem;
}
.reader .body img.fig-right, .note-entry img.fig-right {
float: inline-end; /* logical `float: right` */
margin-inline-start: 1.5rem;
}
.reader .body img.fig-left, .note-entry img.fig-left {
float: inline-start;
margin-inline-end: 1.5rem;
}
/* Full width of the reading column, no wrap. */
.reader .body img.fig-full, .note-entry img.fig-full {
display: block; inline-size: 100%; margin-block: 1.6rem;
}
/* Breaks out past the reading measure, for a plate that deserves the room.
Clamped so it can never exceed the page and cause a sideways scroll. */
.reader .body img.fig-wide, .note-entry img.fig-wide {
display: block;
inline-size: min(100vw - 2rem, 140%);
margin-inline: 50%;
transform: translateX(-50%);
margin-block: 1.8rem;
}
/* A floated figure in a narrow column squeezes the text into a gutter, so the
float drops away and the image simply sits in the flow. */
@media (max-width: 640px) {
.reader .body img.fig-right, .reader .body img.fig-left,
.note-entry img.fig-right, .note-entry img.fig-left {
float: none; inline-size: 100%; margin-inline: 0;
}
.reader .body img.fig-wide, .note-entry img.fig-wide {
inline-size: 100%; margin-inline: 0; transform: none;
}
}
/* ===== plated page heads =====
The mockup writes these as an inline `style` on each
— same gradient every time, one image per section. Carried here as classes so
the templates stay clean and the four images are declared once rather than
copied into every page that wants one.
The gradient is what makes the text readable: near-opaque at the left where
the h1 and kicker sit, thinning to the right so the plate still shows. Keep
it — dropping to a bare image puts dark serif type over photographic detail. */
.page-head.plate{
background-position:center 30%;
background-size:cover;
background-repeat:no-repeat;
}
.page-head.plate .ph-kicker a{color:inherit;text-decoration:none;border:0}
.page-head.plate .ph-kicker a:hover{color:var(--quince)}
.page-head.plate-about{
background-image:
linear-gradient(105deg,
rgba(201,207,201,.94) 0%,
rgba(201,207,201,.82) 50%,
rgba(201,207,201,.384) 100%),
url('plates/about-branch.jpg');
}
.page-head.plate-tools{
background-image:
linear-gradient(105deg,
rgba(201,207,201,.94) 0%,
rgba(201,207,201,.82) 50%,
rgba(201,207,201,.384) 100%),
url('plates/ocean-background.jpg');
}
.page-head.plate-research{
background-image:
linear-gradient(105deg,
rgba(201,207,201,.94) 0%,
rgba(201,207,201,.82) 50%,
rgba(201,207,201,.384) 100%),
url('plates/spiral-substrate.jpg');
}
.page-head.plate-fiction{
background-image:
linear-gradient(105deg,
rgba(201,207,201,.94) 0%,
rgba(201,207,201,.82) 50%,
rgba(201,207,201,.384) 100%),
url('plates/fiction-toka.jpg');
}
/* ===== site index =====
The old `.site-map` markup had no rules anywhere — the same failure as the
project list. The index now uses `.arch-group` / `.arch-rows`, which the
mockup's site-index.html uses and site.css already styles. Only the
"page"-type date column needs a word here: it is a label, not a date. */
.arch-rows .r-date.is-label{font-style:italic;text-transform:none;letter-spacing:.04em}
/* The line under the contact form that reports what happened to a submission. */
.form-status{font-family:var(--serif);font-style:italic;font-size:15px;line-height:1.5;color:var(--ink-mute);margin:14px 0 0;min-height:1.2em}