/* =========================================================================== 5 · press — The Municorn Review --------------------------------------------------------------------------- Loaded only by artifact class C (src/design/head.ts), last in the cascade, and scoped under `body.press` so that nothing here can reach a reference page even if the CSS map were changed by hand. It contains NO colour, face or shadow literal. tokens.css is the only file allowed those, and the one duplication it tolerates — the five brick hexes inside --brickimg and --soldier, which a data URI cannot read a custom property from — is documented there and is not repeated here. WHAT THIS SURFACE IS. The rest of the site is reference: a reader arrives knowing what they want and leaves with it. A review piece is an argument read start to finish by somebody who did not know they wanted it. So the things that change are the things that govern continuous reading — the measure, the entry into the text, and the furniture around the first screen — and nothing else. The body copy is .prose, unchanged, including the margin-note float reference.css already builds. THE ONE BORROWED DEVICE. The masthead carries a soldier course: --soldier, the upright-brick tile that until now appeared once, as the lintel over a window on the landing page (.win__lintel in components.css). The homepage lays brick as a wall. This lays the same brick as a single structural line over the publication's name — the same masonry, doing a lintel's job, which is what a masthead is. Not a second wall: type on brick is the mistake base.css already guards against by putting the people section's copy in glass, and a reading surface should not be asking a reader to work. Breakpoints: only the four tokens.css declares (560 / 700 / 860 / 1000). A fifth means deleting one. =========================================================================== */ /* === the masthead ========================================================= */ .rv__mast{padding-top:1.4rem} /* The soldier course. 34px is the tile's own height, so the bricks are drawn at 1:1 and the course reads as one row rather than a scaled texture. It stops at the measure rather than running the full page: a rule that outruns the column it heads is a border, not a lintel. */ .rv__band{height:34px;max-width:68ch; background-image:var(--soldier);background-size:72px 34px;background-repeat:repeat-x} .rv__wordmark{font-family:var(--sans);font-size:.74rem;letter-spacing:.14em; text-transform:uppercase;color:var(--brass);margin-top:.85rem} .rv__wordmark a{color:inherit;text-decoration:none;border-bottom:0} .rv__wordmark a:hover{color:var(--brick)} /* The dateline. Mono, because it is a fact about the piece rather than the piece — the same rule .src and .mdlink already follow. */ .rv__issue{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em; color:var(--faint);margin-top:.3rem;padding-bottom:.9rem; border-bottom:1px solid var(--rule-2);max-width:68ch} /* === the head ============================================================= */ .rv__head{margin-top:1.9rem;max-width:68ch} /* Serif, and larger than any h1 on a reference page, which tops out at the docPage scale. text-wrap:balance so a three-word second line does not hang off a headline — ignored where unsupported, wrong nowhere. */ .rv__title{font-family:var(--serif);font-weight:300;letter-spacing:-.02em; font-size:clamp(2rem,5vw,3.4rem);line-height:1.04;max-width:20ch; text-wrap:balance;color:var(--ink)} /* The standfirst. Italic serif at the lede size: it is the same voice as the piece, said once, before the piece starts. */ .rv__dek{font-family:var(--serif);font-style:italic; font-size:clamp(1.1rem,2.2vw,1.4rem);line-height:1.3;max-width:46ch; margin-top:.9rem;color:var(--ink-soft)} .rv__byline{font-family:var(--mono);font-size:.68rem;letter-spacing:.09em; text-transform:uppercase;color:var(--faint);margin-top:1.2rem} /* === the body ============================================================= */ /* THE BODY IS SET IN SERIF, and this is the one override worth arguing for. A reference page is set in --sans because it is scanned: a reader arrives knowing the figure they want. A review piece is read start to finish, and Crimson Pro at a slightly larger size and a longer leading is the difference between a page that looks like documentation and one that reads like a publication. The headline was already serif; a serif headline over sans body reads as an article template rather than as a considered pair. Scoped to .rv__body, so tables, code and the margin notes keep the mono and sans treatment reference.css gives them — those are metadata and machinery, and the rule the whole site follows is that mono says fact about the thing. */ .rv__body{margin-top:2.2rem;counter-reset:strand} .press .rv__body p, .press .rv__body li{font-family:var(--serif); font-size:clamp(1.08rem,.42vw + 1rem,1.24rem);line-height:1.62;color:var(--ink-soft)} .press .rv__body blockquote p{font-size:1.05rem} /* .prose>p.lead already carries small caps on its first line (reference.css), which is the drop initial's job done in a way that does not break when the first character is a quotation mark or a digit — which in this corpus it frequently is. So no ::first-letter here, only a little more weight. */ .press .rv__body>p.lead{font-size:clamp(1.16rem,.5vw + 1.06rem,1.34rem)} /* Section rules are heavier in a long argument than in a reference page, where an h2 is a lookup target. Here it is a turn in the argument. */ .press .prose h2{margin-top:3.2rem;padding-top:1.6rem} /* === the strands ========================================================== ```theme in content.ts emits an h3, a margin note and the argument, all three as direct children of .prose so the note keeps the float reference.css gives it. Everything below is what turns that run of headings into a sequence a reader can hold. THE NUMBERS ARE A CSS COUNTER, and that is not a flourish. A call for submissions gains and loses strands; a numeral typed into the prose is a fact about position stored in the one place that cannot be reordered. Counted here, inserting a strand in the middle renumbers the rest and no file has to agree with any other. It is also why the numeral is ::before and not content a screen reader has to hear: it is a finding aid, not part of the heading. Mono and brass, because the rule the whole site follows is that mono says fact about the thing rather than the thing. The counter is reset on .rv__body above, where its margin is set, rather than restating the selector here. */ .press .prose h3.rv__theme{counter-increment:strand; font-family:var(--serif);font-weight:400;letter-spacing:-.01em; font-size:clamp(1.25rem,2.4vw,1.55rem);line-height:1.15;max-width:26ch; color:var(--ink);margin-top:2.9rem;padding-top:1.3rem; border-top:1px solid var(--rule-2)} .press .prose h3.rv__theme::before{content:counter(strand,decimal-leading-zero); display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.12em; font-weight:400;color:var(--brass);margin-bottom:.55rem} /* The first strand sits under the run-in line that introduces the set, so it takes the spacing of a paragraph rather than of a section. */ .press .prose h3.rv__theme:first-of-type{margin-top:2.2rem} /* The reading pointer. .side already carries the rule, the measure and the float; this only sets it in the mono-and-small register the rest of the page's apparatus uses, and marks it as a reference rather than as an aside the author happened to make. No "Cf." printed in front of it. The fence is called cf: because that is what an author types; a label on eight consecutive notes is eight repetitions of a word that the position already says. */ .press .rv__body>.side.rv__cf{font-family:var(--sans);font-size:.8rem; line-height:1.55;color:var(--faint)} .press .rv__body>.side.rv__cf em{font-style:italic} /* The end of the set. A `---` in the markdown, and the only thing it has to say is that the strands are over and the last two lines address the whole of them — without which "Other topics are welcome too" reads as a remark about stewardship. Short, left, and the same hairline as everything else: a rule across the full measure is a border between two documents. */ .press .rv__body hr{border:0;border-top:1px solid var(--rule-2); width:6rem;margin:3.2rem 0 2.4rem} /* === a diagram ============================================================ ```figure inlines a committed SVG. The drawing sits in a box that is allowed to use the full measure and no more, and the caption under it is set like every other piece of apparatus on the site: mono, small, left. The SVG itself carries no colour — content.ts refuses one that reaches off this origin, and tokens.css refuses a hex outside itself — so a diagram takes its ink from currentColor and the .dgm__* classes below, and changes with the page rather than sitting on it as a picture. */ .dgm{margin:2.4rem 0 0;max-width:68ch} .dgm__art{color:var(--ink-soft)} .dgm__art svg{display:block;width:100%;height:auto;overflow:visible} /* The three marks a box-and-arrow diagram is made of, so a drawing can name them instead of carrying its own values. */ .dgm__art .dgm__box{fill:var(--wash);stroke:var(--rule-2);stroke-width:1} .dgm__art .dgm__line{stroke:var(--rule-2);stroke-width:1.5;fill:none} .dgm__art .dgm__mark{stroke:var(--brass);stroke-width:2;fill:none} .dgm__art text{fill:var(--ink-soft);font:400 .78rem var(--sans)} .press .dgm figcaption{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em; line-height:1.6;color:var(--faint);margin-top:.8rem; padding-top:.7rem;border-top:1px solid var(--rule-2)} /* === the foot ============================================================= */ .rv__foot{margin-top:3.4rem;padding-top:1.3rem;border-top:1px solid var(--rule-2); max-width:68ch} /* The citation. Mono and selectable as one line, because the thing a reader does with it is copy it. */ .rv__cite{font-family:var(--mono);font-size:.72rem;line-height:1.7; color:var(--ink-soft);max-width:68ch} /* The standing line under the piece. reference.css sets .mdlink at .66rem mono and .faint at .8rem sans, so the two halves of one sentence were set in two faces at two sizes. One line, one treatment. */ .rv__foot .mdlink, .rv__foot .mdlink .faint{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em} .rv__foot .mdlink{margin-top:1.6rem} /* === the index =========================================================== */ .rv--index .rv__head{margin-bottom:2.6rem} .rv__list{list-style:none;padding-left:0;max-width:68ch} .rv__item{padding-top:1.5rem;margin-top:1.5rem;border-top:1px solid var(--rule)} .rv__item:first-child{border-top:0;margin-top:0;padding-top:0} /* The date sits under the entry, not over it: the title is what a reader is scanning for, and a mono line above every one of them reads as a column of dates with headlines attached. */ .rv__item-meta{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em; color:var(--brass);margin-top:.6rem} .rv__item-title{font-family:var(--serif);font-weight:300;letter-spacing:-.015em; font-size:clamp(1.4rem,3vw,2rem);line-height:1.1;max-width:24ch} .rv__item-title a{color:var(--ink);text-decoration:none;border-bottom:0} .rv__item-title a:hover{color:var(--brick)} .rv__item-dek{margin-top:.5rem;color:var(--ink-soft);max-width:58ch; font-family:var(--serif);font-size:1.06rem;line-height:1.55} .rv__empty{margin-top:1.4rem;color:var(--faint)} /* === wide ================================================================= */ /* 860 is where reference.css already moves the margin note into the gutter and where the nav collapses. Above it the column can be indented so the masthead, the headline and the text share one left edge that is not the page's — which is what makes the marginalia read as margin rather than as a second column that happens to be narrow. */ @media (min-width:860px){ .rv{padding-left:clamp(0rem,6vw,7rem)} }