/*
Schematic: the page is a drawing set. A cool white ground, drafting
blue rules and links, a deep navy for every filled block, and orchid and lime
kept to small signal marks. A faint grid appears only inside a drawing frame
(a figure) and a code block. Never behind text.
From St. Clair AI, Lahe Styles (https://stclair.ai/lahe-styles.html),
version 1.1.1. This style's page: https://stclair.ai/lahe-styles/schematic.html
Loads AFTER lib/templates/document.css. It self-hosts its fonts from
./fonts/, sets its own raw palette, points the base's colour roles and
settings at it, and adds rules only where no token reaches the thing: the
grid, the caption's title block, the code border, the table frame, the
lime dots on the band, and the status callout. Its layout, the title-block
section head on a ruled column grid, is the last block in the file, so this
one file is the whole style over the base.
This was the "blueprint" direction. The "spec" direction read too close to
the house style to sell and is kept in directions/.
Where it came from. J Schematic and N, J fixed, in
projects/agent_storefront/tearsheets/. Ken on J: the nav "very clean", Geist
plus disciplined layout carries professionalism on its own, "the colors are
strong for each other". On N: the graph-paper page ground is "really not
working", graph paper behind text is harder to read, and the grid lives only
inside drawing frames. White on raw cobalt measured fine on J's button and did
not read fine, so the filled blocks here are navy, and raw cobalt fills only
the one accent band and callout the skeleton shows.
Measured contrast. Every number from
lib/templates/styles/schematic/scripts/contrast.py, the only place these are
produced. Floors: 4.5:1 for body and anything under 24px, 3.0:1 for a drawn
mark or rule. Hairlines and the grid are decorative and are not held to a
floor, the same as the base's own rule colour.
BEGIN MEASURED
body text on the page ground #15181f on #f8f9fb 16.86:1
secondary copy and the lede #565d6b on #f8f9fb 6.28:1
section numbers, captions, meta #5d6471 on #f8f9fb 5.65:1
a link in running prose #0760c7 on #f8f9fb 5.68:1
body text on the raised ground #15181f on #eef1f6 15.69:1
a table head on the raised ground #5d6471 on #eef1f6 5.26:1
body text in the default panel #15181f on #eef1f6 15.69:1
body text on the accent tint #15181f on #e8effa 15.36:1
body text on the emphasis tint #15181f on #f9eaf4 15.31:1
the insight label on its tint #0760c7 on #e8effa 5.18:1
the orchid caveat label on its tint #a52f82 on #f9eaf4 5.44:1
text on the navy band and callout #ffffff on #0b3a7e 10.93:1
secondary copy on the navy band #e6eefa on #0b3a7e 9.36:1
the section number on the navy band #d6e2f5 on #0b3a7e 8.36:1
the lime dot bullet on the navy band #2de207 on #0b3a7e 6.24:1
text on the drafting blue band and callout #ffffff on #0760c7 5.99:1
text on the orchid band and callout #ffffff on #a52f82 6.31:1
the section number on the orchid band #d6e2f5 on #a52f82 4.82:1
text on the navy status callout #ffffff on #0b3a7e 10.93:1
the lime status dot on the navy callout #2de207 on #0b3a7e 6.24:1
the graphite glyph on the lime icon circle #15181f on #2de207 10.14:1
the orchid dot bullet on the ground #a52f82 on #f8f9fb 5.99:1
the orchid dot on the default tint #a52f82 on #eef1f6 5.57:1
the orchid all-day label, 12px text #a52f82 on #f8f9fb 5.99:1
the drafting blue hanging rule #0760c7 on #f8f9fb 5.68:1
today's day number on the navy pill #f8f9fb on #0b3a7e 10.38:1
code on the blue tint #15181f on #e8effa 15.36:1
code where it crosses a grid line #15181f on #e1e7f0 14.29:1
the graphite drawing frame on the page #15181f on #f8f9fb 16.86:1
a caption in the frame's title block #5d6471 on #f8f9fb 5.65:1
raw orchid as a mark, never text #c748a1 on #f8f9fb 4.09:1
body text on the sheet white #15181f on #ffffff 17.76:1
secondary copy on the sheet white #565d6b on #ffffff 6.62:1
a field label on the sheet white #5d6471 on #ffffff 5.95:1
the drafting blue step number on the sheet white #0760c7 on #ffffff 5.99:1
the graphite frame on the sheet white #15181f on #ffffff 17.76:1
the redline error label on its tint #b42318 on #fcecea 5.74:1
body text in the error panel #15181f on #fcecea 15.50:1
the redline error frame on the page #b42318 on #f8f9fb 6.24:1
the drafting blue badge on its tint #0760c7 on #e8effa 5.18:1
the orchid badge on its tint #a52f82 on #f9eaf4 5.44:1
white on the navy badge #ffffff on #0b3a7e 10.93:1
END MEASURED
Pairs tried and dropped are listed in contrast.py under REJECTED: lime as
text or a mark on the light ground, white on lime, raw orchid as text, white
on raw orchid, and the grid line as a visible rule.
*/
/* ---------- fonts, self-hosted ----------
A Google Fonts is not enough for a style folder. A style is a folder
the switcher points at, and a folder that reaches the network for its type
renders wrong on a plane, behind a proxy, or in a PDF export. So the files sit
in fonts/ beside this file and these rules name them by relative path.
One file per family, not one per weight. Google's css2 endpoint returns a
single latin woff2 per family because each ships as a variable font, so each
rule below declares the range it covers rather than a single weight.
| File | Family | Range declared | Google version |
| ------------------------- | ---------- | -------------- | -------------- |
| geist-variable.woff2 | Geist | 400 to 700 | v5 |
| geist-mono-variable.woff2 | Geist Mono | 400 to 600 | v6 |
Both are SIL Open Font License 1.1. fonts/LICENSE carries the licence and
both copyright lines. Fetched 2026-09-16.
To update: fetch the css2 URL with a browser User-Agent so Google returns
woff2 blocks, pull the url() out of each block Google labels latin, copy the files
over these, and update the version column above.
curl -H "User-Agent: Mozilla/5.0 ... Chrome/126.0 Safari/537.36" \
"https://fonts.googleapis.com/css2?family=Geist:wght@400..700&family=Geist+Mono:wght@400..600&display=swap"
The fallback stacks in the --font-* tokens stay in place, so a
page that cannot reach these files still gets a real face.
*/
@font-face {
font-family: "Geist";
font-style: normal;
/* To 700 rather than 600, because a in body prose asks for 700; with no
face covering it the browser draws a fake bold beside real Geist 600. */
font-weight: 400 700;
font-display: swap;
src: url("./fonts/geist-variable.woff2") format("woff2");
}
@font-face {
font-family: "Geist Mono";
font-style: normal;
/* 600 is the top: code never needs a heavier weight, and a smaller range
keeps the subset the size Google served. */
font-weight: 400 600;
font-display: swap;
src: url("./fonts/geist-mono-variable.woff2") format("woff2");
}
:root{
/* ---------- type ----------
Geist for everything, headings at 600, and Geist Mono for code. J's brief
banned a mono; this style keeps one on purpose, because the buyer is
writing developer documentation and code is the content, not decoration. */
--font-display:"Geist",system-ui,sans-serif;
--font-body:"Geist",system-ui,sans-serif;
--font-mono:"Geist Mono",ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
--w-display:600;
--w-bold:700;
/* ---------- the palette, in Schematic's own words ----------
The base's hue names are not touched; the roles below are. */
--drafting-white:#f8f9fb; /* the page, N's cool white */
--sheet-white:#ffffff; /* a drawing frame's own ground, one step brighter */
--vellum:#eef1f6; /* the raised ground and the quiet panel */
--grid-line:#e1e7f0; /* the grid inside frames and code; decorative only (REJECTED as a rule) */
--blue-hairline:#d3dae5; /* hairlines */
--graphite:#15181f; /* body text, headings, the frame line */
--graphite-soft:#565d6b; /* ledes and secondary copy */
--graphite-faint:#5d6471; /* meta, captions, section numbers */
--drafting-blue:#0760c7; /* rules, links, the insight label: the line work */
--drafting-blue-deep:#054a99;
--blueprint-navy:#0b3a7e; /* every filled block: band, callout, icon circle, today */
--blue-tint:#e8effa; /* the insight panel and code */
--blue-mist:#e6eefa; /* secondary copy on navy */
--blue-haze:#d6e2f5; /* section numbers on navy and on orchid */
--orchid:#c748a1; /* the raw orchid: a mark only, under 4.5 as text */
--orchid-ink:#a52f82; /* orchid you can read: dot bullets, the caveat, the emphasis fill */
--orchid-deep:#86256a;
--orchid-tint:#f9eaf4;
--signal-lime:#2de207; /* a small mark: the status dot, dots on navy, the icon circle. Never a surface */
--lime-wash:#e6fadd; /* a pale lime for a status row; no base role reaches it today */
/* The grid, drawn as a 24px SVG tile rather than a gradient: the house rule
is no gradients, and a tile also keeps the line one crisp pixel. The tile
is a shape only. It is used as a mask on a layer painted with --grid-line,
the same way the base draws the insight icon, so the colour stays a token
and no hex hides in the data URI. */
--grid-tile:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M24 .5H.5V24' fill='none' stroke='white' stroke-width='1'/%3E%3C/svg%3E");
/* Families for the specimen's palette view; format in system-tokens.css. */
--palette-families:"drafting-white sheet-white vellum grid-line blue-hairline: The page, a frame's ground, the raised ground, the grid and hairlines \
| graphite graphite-soft graphite-faint: Body text, headings, frame lines, secondary copy and meta \
| drafting-blue drafting-blue-deep blueprint-navy blue-tint blue-mist blue-haze: The line work: rules and links, then navy for every filled block \
| orchid orchid-ink orchid-deep orchid-tint: A signal: dot bullets, the caveat, the emphasis fill \
| signal-lime lime-wash: A signal, never a surface: the status dot, dots on navy, the icon circle \
| redline redline-tint: A problem only: the error panel's frame, label and ground";
/* ---------- roles ---------- */
--surface:var(--drafting-white);
--surface-raised:var(--vellum);
--on-surface:var(--graphite);
--on-surface-soft:var(--graphite-soft);
--on-surface-faint:var(--graphite-faint);
--border:var(--blue-hairline);
--accent:var(--drafting-blue);
--accent-hover:var(--drafting-blue-deep);
--accent-tint:var(--blue-tint);
--link:var(--drafting-blue);
--focus:var(--drafting-blue);
--mark:var(--orchid-ink);
--fill:var(--blueprint-navy); /* the status callout: navy carrying a lime dot, see below */
--on-fill:var(--sheet-white);
--tint:var(--vellum);
--emphasis:var(--orchid-ink);
--emphasis-hover:var(--orchid-deep);
--emphasis-tint:var(--orchid-tint);
--structure:var(--blueprint-navy);
--on-structure:var(--sheet-white);
--on-structure-soft:var(--blue-mist);
--on-structure-faint:var(--blue-haze);
/* ---------- lines and radius ----------
The hanging rule is drafting blue, the one place the blue runs the full
column on every section. Radii are J's 2 and 4: a drawing frame has a
nearly square corner. */
--divider:2px solid var(--drafting-blue);
--line:1px solid var(--blue-hairline);
--line-ink:1px solid var(--graphite);
--r:2px;
--r-lg:4px;
/* ---------- the base's settings ----------
A figure is a drawing frame: a graphite line around a white sheet, open
at the bottom where the caption's title block meets the frame. */
--figure-border:var(--line-ink);
--figure-ground:var(--sheet-white);
--figure-pad:var(--s4) var(--s4) 0;
}
/* ---------- the drawing frame ----------
The frame's line, sheet and padding are the settings above. The grid sits
on the sheet, and the caption is a title block along the bottom edge, as J
drew it. The caption gets a solid ground and a rule above it so no prose
sits on the grid. The negative inline margin pulls the title block to the
frame's edges by exactly the padding the frame added. */
figure{border-radius:var(--r)}
/* The grid layer, for the frame and for code. It sits behind the content
(z-index -1 inside the element's own stacking context), above the element's
ground, and is painted --grid-line through the tile. */
:is(figure, pre){position:relative;isolation:isolate}
:is(figure, pre)::before{
content:"";
position:absolute;
inset:0;
z-index:-1;
border-radius:inherit;
background-color:var(--grid-line);
-webkit-mask-image:var(--grid-tile);
mask-image:var(--grid-tile);
}
figure img{display:block;margin-inline:auto}
figure figcaption{
margin:var(--s4) calc(-1 * var(--s4)) 0;
padding:var(--s3) var(--s4);
background:var(--surface);
border-top:var(--line-ink);
}
/* ---------- code ----------
The base paints code on the accent tint. Blueprint adds the grid to a block,
a full hairline frame, and a hairline around inline code so a run of code in
a sentence reads as a part number rather than a highlight. Graphite is
measured against the grid line as well as the tint. */
pre{border:var(--line)}
/* Scoped to running text, so a code chip inside a label or a card keeps the base look. */
:is(p,li,td,dd) > code{border:var(--line);padding:.05em .3em}
/* ---------- the boxed table ----------
The frame line goes graphite, like a drawing frame. No grid: the grid is
never behind text of any size, and a table is all text. */
table.boxed{border:var(--line-ink)}
/* ---------- list markers inside the navy band ----------
The base leaves a dot at --mark, orchid on navy, which reads as a mistake.
Lime is the one place it can be a mark: on navy it clears the mark floor
with room. Scoped away from the blue and orchid bands, where it is not
measured. */
.band:not(.band--cobalt, .band--purple) ul li::before{background:var(--signal-lime)}
.band ol li::before{color:var(--on-structure-faint)}
/* ---------- the status callout ----------
Lime is a signal, not a surface, as J used it: an 8px dot. So the third
callout is the navy fill carrying a lime dot at the start of its line,
and lime fills only the small icon circle, where it carries graphite. The
callout's inline padding grows by the dot and its gap so the text keeps its
own left edge. The dot's top offset centres it on the first line: half the
body line box less half the dot. */
.callout--sage{position:relative;padding-left:calc(var(--gutter) + var(--s4))}
.callout--sage::before{
content:"";
position:absolute;
left:var(--gutter);
top:calc(var(--s4) + .825em - 4px); /* px: half the 8px dot, against half the 1.65 line box */
width:8px; /* px: J's status dot */
height:8px; /* px: J's status dot */
border-radius:50%;
background:var(--signal-lime);
}
.icon-circle--sage{background:var(--signal-lime);color:var(--graphite)}
/* =========================================================================
THE 1.1 COMPONENTS, as drawing parts.
The base added stat tiles, the pull quote, badges, the eyebrow, the boxed
step sequence, the data table's total row, the checklist, the caption
plate, option cards, five image treatments, the error panel, two smaller
section heads and the icon reference. Where the base already reads right
through this style's tokens (the checklist's orchid check, the icon
colours, the data table's drafting blue total rule) nothing is restated.
The rest borrow the title block: a graphite line round anything that is a
part, the sheet's white inside it, and a small mono field label.
========================================================================= */
:root{
/* Redline: the red a checker marks a drawing up in. The base's status red
is a house colour, so the error panel takes this style's own. Kept to the
error panel; it is never an accent. */
--redline:#b42318;
--redline-tint:#fcecea;
--danger:var(--redline);
--danger-tint:var(--redline-tint);
/* Every image treatment is framed like a drawing, in the graphite line. */
--image-frame:var(--line-ink);
}
/* ---------- stat tiles as title-block cells ----------
A bordered row is one strip of cells sharing their graphite lines, the
way the fields of a title block share theirs: each tile overlaps its
neighbour by the line's width, so any wrap still draws single lines. The
label is a field label. The tinted row keeps its gaps and no line, since a
tint is never added to a border. */
.stats:not(:has(> .stat--tint)){gap:0;padding:1px 0 0 1px} /* px: the graphite line's width, which the cells overlap */
.stats:not(:has(> .stat--tint)) > .stat{margin:-1px 0 0 -1px} /* px: one line width, so neighbours share a line */
.stat{border:var(--line-ink);border-radius:0;background:var(--sheet-white)}
.stat--tint{background:var(--surface-raised);border-color:transparent;border-radius:var(--r)}
.stat--large{border-radius:var(--r)}
.stat-label{font-family:var(--font-mono);font-size:var(--text-micro);letter-spacing:.04em;color:var(--on-surface-faint)}
/* ---------- the pull quote ----------
Geist at 600 already reads as a drawing's note in large. The attribution
is typed in the mono, like a field label. */
blockquote.pullquote footer{font-family:var(--font-mono);font-size:var(--text-micro);letter-spacing:.04em;color:var(--on-surface-faint)}
/* ---------- badges and the eyebrow ----------
A badge is a part tag, typed in the mono. The eyebrow is the same field
label the title block prints above its heading. */
.badge{font-family:var(--font-mono);font-weight:var(--w-medium)}
.eyebrow{
font-family:var(--font-mono);
font-weight:var(--w-body);
font-size:var(--text-micro);
letter-spacing:.04em;
}
/* ---------- the step sequence as a title-block strip ----------
Boxed steps are cells in one graphite frame with graphite lines between
them, each headed "Step 01" in the drafting blue mono, the way a drawing
numbers its callouts. Ruled rows keep their hairlines and the number. */
ol.sequence{border-radius:var(--r);background:var(--sheet-white)}
ol.sequence > li + li{border-left:var(--line-ink)}
ol.sequence > li::before{
content:"Step " counter(seq, decimal-leading-zero);
font-family:var(--font-mono);
font-weight:var(--w-medium);
font-size:var(--text-micro);
letter-spacing:.04em;
}
ol.sequence--rows{background:none}
ol.sequence--rows > li + li{border-left:0}
ol.sequence--rows > li::before{content:counter(seq, decimal-leading-zero);font-size:var(--text-small);letter-spacing:0}
/* ---------- the caption plate ----------
A plate is a drawing frame: the graphite line, the grid on the white
sheet round the picture, and the caption as the title block along the
bottom, run down to the frame's foot so two plates side by side end level.
The figure number is typed, as a drawing number is. */
figure.plate{display:flex;flex-direction:column;border:var(--line-ink);border-radius:var(--r);background:var(--sheet-white)}
figure.plate figcaption{flex:1 0 auto;border-top:var(--line-ink);background:var(--surface)}
figure.plate figcaption b{font-family:var(--font-mono);font-weight:var(--w-medium)}
/* ---------- option cards ---------- */
.option{border:var(--line-ink);border-radius:var(--r);background:var(--sheet-white)}
/* ---------- images ----------
The frame is the graphite line from --image-frame. An image card is a
sheet; a gallery's pictures already sit in a drawing frame each, so the
picture itself takes only a hairline, not a second graphite line. */
.image-card{border-radius:var(--r);background:var(--sheet-white)}
.gallery img{border:var(--line)}
/* The full-width image is not a frame: no grid behind it, and the caption
comes back into the column as a plain line rather than a title block. */
figure.bleed{border-radius:0}
figure.bleed::before{content:none}
figure.bleed > figcaption{padding-block:var(--s3) 0;border-top:0;background:none}
/* ---------- the two smaller section heads ----------
The large head is a title block with two field labels. The medium head
is the same block drawn smaller without its field labels; the small head
drops the block and keeps a hairline above the heading, as the base does. */
.sheet-head.sheet-head--medium .n::before{content:none} /* outranks the field labels, which the layout block sets later */
.sheet-head.sheet-head--medium h3{margin:0;padding:var(--s2) var(--s4);font-size:var(--text-h4);line-height:1.3}
.sheet-head.sheet-head--medium .n{justify-content:center;padding:var(--s2) var(--s4)}
.sheet-head.sheet-head--small{
display:block;
border:0;
border-top:var(--line);
border-radius:0;
background:none;
padding:var(--s2) 0 0;
}
.sheet-head--small h4{margin:0}
/* ---------- the icon reference ----------
Icon names are typed, like the labels in a drawing's legend. */
.icon-set li{font-family:var(--font-mono);font-size:var(--text-micro)}
@media (max-width:820px){
/* Stacked boxed steps keep the graphite line between them. */
ol.sequence > li + li{border-left:0;border-top:var(--line-ink)}
ol.sequence--rows > li + li{border-top:var(--line)}
}
/* =========================================================================
LAYOUT: the title block.
Everything above sets colour, type, the frame and the grid. Everything
below changes structure only, on the shared markup: the section head, the
page grid, alignment, the opening, and rhythm. It reads the base's
--layout-cols and --layout-ruler.
1. Each section head is a boxed strip, like the title block in the
corner of an engineering drawing: the heading in one cell, the number
in a small cell at the right, each cell with a small field label
("Title", "Sheet") above its value. The box replaces the hanging rule.
2. The content sits on a visible twelve-column grid. A ruler along the
top of each section ticks off the column starts, and the blocks snap
to those columns: prose takes eight, the wide blocks take all twelve.
3. The opening is the drawing's own title block: the title and the lede
framed on the sheet's white, with the masthead line above it as the
revision line, set to the right.
4. Under 820px the grid drops to four columns and prose takes all four;
the title block keeps its two cells.
========================================================================= */
:root{
/* Both match the base defaults; stated so a change there does not move
this page. The tick is this style's own shape for the ruler. */
--layout-cols:12; /* the page grid's columns */
--layout-ruler:var(--s2); /* the ruler strip's height */
--layout-tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8' preserveAspectRatio='none'%3E%3Cpath d='M.5 0V8M0 7.5H10' stroke='white' stroke-width='1' fill='none' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}
/* ---------- the title block ---------- */
.sheet-head,details.fold summary.fold-head,.checkin .checkin-head{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
align-items:stretch;
gap:0;
border:var(--line-ink);
border-radius:var(--r);
padding:0;
background:var(--sheet-white);
}
.sheet-head h2,details.fold summary.fold-head h2,.checkin .checkin-head h2{
padding:var(--s3) var(--s4);
font-size:var(--text-h3);
line-height:1.2;
}
:is(.sheet-head,.fold-head) .n,.checkin .checkin-head .time{
display:flex;
flex-direction:column;
justify-content:flex-end;
margin:0;
padding:var(--s3) var(--s4);
border-left:var(--line-ink);
font-family:var(--font-mono);
font-size:var(--text-small);
color:var(--on-surface);
}
/* The field labels. They are drawn, not written, so every head on a page
carries the same two, and a document never has to type them. */
:is(.sheet-head,.fold-head,.checkin-head) h2::before,
:is(.sheet-head,.fold-head) .n::before,
.checkin .checkin-head .time::before{
display:block;
margin-bottom:var(--s1);
font-family:var(--font-mono);
font-size:var(--text-micro);
font-weight:var(--w-body);
letter-spacing:.04em;
line-height:1.3;
color:var(--on-surface-faint);
}
:is(.sheet-head,.fold-head,.checkin-head) h2::before{content:"Title"}
:is(.sheet-head,.fold-head) .n::before{content:"Sheet"}
.checkin .checkin-head .time::before{content:"Logged"}
/* The fold's chevron gets its own cell at the front of the strip. */
details.fold summary.fold-head{grid-template-columns:auto minmax(0,1fr) auto}
details.fold summary.fold-head .fold-arrow{align-self:center;margin-inline:var(--s4) 0}
details.fold summary.fold-head h2{padding-left:var(--s3)}
/* On a filled band the block is drawn in the band's own light line. */
.band .sheet-head{background:transparent;border-color:var(--on-structure-soft)}
.band .sheet-head .n{border-left-color:var(--on-structure-soft);color:var(--on-structure)}
.band .sheet-head h2::before,.band .sheet-head .n::before{color:var(--on-structure-soft)}
/* ---------- the column grid ---------- */
section.sheet{
display:grid;
grid-template-columns:repeat(var(--layout-cols), minmax(0,1fr));
column-gap:var(--gutter);
align-content:start;
}
section.sheet > *{grid-column:1 / -1}
section.sheet > :is(p, ul, ol, blockquote){grid-column:1 / span 8}
/* A list that is a grid, not prose, takes the twelve columns like a table. */
section.sheet > :is(ol.sequence:not(.sequence--rows), ul.icon-set){grid-column:1 / -1}
section.sheet > .sheet-head{margin-bottom:var(--gutter)}
/* The ruler: one tick at the start of every column. A column plus its gap is
(width + gap) / cols, so each tile is sized to exactly one column step and
the ticks land on the edges the blocks below snap to. The last tile is cut
by one gap, which is where the last column ends. */
section.sheet::before{
content:"";
grid-column:1 / -1;
height:var(--layout-ruler);
margin-bottom:var(--s3);
background-color:var(--accent);
-webkit-mask-image:var(--layout-tick);
mask-image:var(--layout-tick);
-webkit-mask-size:calc((100% + var(--gutter)) / var(--layout-cols)) 100%;
mask-size:calc((100% + var(--gutter)) / var(--layout-cols)) 100%;
-webkit-mask-repeat:repeat-x;
mask-repeat:repeat-x;
}
/* ---------- the opening ---------- */
.masthead{text-align:right}
.masthead .meta{font-family:var(--font-mono)}
.hero{
border:var(--line-ink);
border-radius:var(--r);
background:var(--sheet-white);
padding:var(--s5);
margin-top:var(--s3);
}
/* The page rule sets the hero's inline padding with a higher specificity,
so the frame's own padding restates it through the same shape. */
:is(body, .band) > .hero{padding-inline:var(--s5)}
.hero h1{padding-bottom:var(--s4);border-bottom:var(--line)}
@media (min-width:821px){
/* The framed hero is as wide as the prose: its right edge lands where the
eighth of the twelve columns ends, which is where every paragraph below
it stops. Eight columns of a width W with a gutter g between them is
(2W - g) / 3. Inside a wrapper that already carries the column (a
rendered Markdown page's main), W is the wrapper's width; as a direct
child of the body, W is the column the page rule would have given it,
and the frame starts on that column's left edge. Kept to the prose
width, the frame stays clear of a review layer docked at the window's
right edge, the Lahe rail, on a 1440 screen. The masthead's revision
line ends on the same edge, so it sits over the frame's corner. */
.hero{max-width:calc((200% - var(--gutter)) / 3)}
:is(body, .band) > :is(.hero, .masthead){
max-width:calc((2 * (min(100%, var(--maxw)) - 2 * var(--gutter)) - var(--gutter)) / 3);
margin-inline:var(--layout-bleed) auto;
}
:is(body, .band) > .masthead{padding-inline:0}
}
@media (max-width:820px){
:root{--layout-cols:4}
section.sheet > :is(p, ul, ol, blockquote){grid-column:1 / -1}
:is(body, .band) > .hero{margin-inline:var(--gutter)}
}
/* =========================================================================
1.1.1 AUDIT: real documents under Lahe.
Each rule below fixes one flaw found by opening real documents (a
rendered Markdown proposal, the switcher showcase, Lahe's CLI reference
and a test page) under this style in Lahe. AUDIT.md lists each flaw, where
it showed and the before and after screenshots.
========================================================================= */
/* Inline code inside a table cell broke mid-token ("--state-" over "dir").
A flag or a path is one part number, so it stays on one line; the table
scrolls on a phone. */
td code{white-space:nowrap}
/* An image that Markdown writes as a paragraph of its own is a figure, so it
is framed like one: the graphite line round the sheet white. Before this
a screenshot of a white page sat on the page with no edge. */
p > img:only-child{
display:block;
border:var(--line-ink);
border-radius:var(--r);
background:var(--sheet-white);
}
@media (min-width:821px){
/* The title block ran all twelve columns, so its "Sheet" cell sat at the
column's right edge, which on a 1440 window is under a review layer
docked on the right (the Lahe rail, from x=1050). A title block now ends
where the eighth column ends, the same edge as the opening frame and the
prose, as a drawing's title block sits in its own corner of the sheet.
Eight columns of a width W with a gutter g between them is
(2W - g) / 3, and a percentage here is of the block's own column. */
:is(.sheet-head, details.fold summary.fold-head, .checkin .checkin-head){max-width:calc((200% - var(--gutter)) / 3)}
}