/* ========================================================================== AN AUSTRIAN ECONOMIST · V4 GAZETTE FOUNDATION -------------------------------------------------------------------------- The printed object: paper, ink, type registers, the rule grammar, the ornament kit, and the plate furniture. Requires fonts.css and gazette-tokens.css before it; gazette-motion.css after it. Layer order is declared once, here. gazette-motion.css writes into the `motion` layer; page sheets may write into `page`. ========================================================================== */ @layer reset, base, type, materiality, ornament, components, motion, page, utilities; /* ========================================================================== RESET ========================================================================== */ @layer reset { *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; } body { min-height: 100svh; } img, svg, picture, video { display: block; max-width: 100%; height: auto; } input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: 0; padding: 0; cursor: pointer; } hr { border: 0; } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } ul[class], ol[class] { list-style: none; padding: 0; } dialog { border: 0; padding: 0; background: none; max-width: none; max-height: none; } } /* ========================================================================== BASE : the sheet, ink defaults, focus, selection ========================================================================== */ @layer base { html { background: var(--paper); } body { font-family: var(--font-text); font-size: var(--type-body); font-weight: var(--weight-body, 400); /* checkpoint ruling 1: ink, not silver, at DPR1 */ line-height: var(--leading-body); color: var(--ink); background-color: var(--paper); background-image: var(--paper-tile); background-size: var(--paper-tile-size); font-kerning: normal; font-optical-sizing: auto; font-synthesis: none; /* no faux bold, italic or small caps, ever */ text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } ::selection { background: rgba(148, 105, 26, 0.24); color: var(--ink); } :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 1px; } :focus:not(:focus-visible) { outline: none; } a { color: var(--gold-deep); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: rgba(110, 77, 15, 0.42); text-underline-offset: 0.16em; } a:hover { text-decoration-color: var(--gold-deep); } strong, b { font-weight: 600; } /* One idiom for separators, sitewide: the middot. */ .sep::before { content: '\00B7'; padding-inline: 0.5em; color: var(--ink-3); } } /* ========================================================================== TYPE : the five registers 1 Display (Playfair, two-tone) .display-head, .display-accent 2 Text (EB Garamond, osf in prose) .prose 3 Small-caps furniture (true smcp) .smallcaps, .furniture 4 Mono data / plate labels .plate-label, .kicker, .tabular 5 Apparatus (Source Serif 4) .apparatus, .caption Epigraphs (IM Fell) are a sanctioned accent, never body or UI. ========================================================================== */ @layer type { /* ----- 2 · Text ----- */ .prose { max-inline-size: min(var(--measure), 100%); font-family: var(--font-text); font-size: var(--type-body); line-height: var(--leading-body); font-variant-numeric: oldstyle-nums proportional-nums; hanging-punctuation: first allow-end; } .prose p { text-wrap: pretty; } .prose p + p { margin-top: 0.85em; } /* Print grammar variant: indents, no inter-paragraph space. */ .prose--indented p + p { margin-top: 0; text-indent: 1.4em; } /* Justification policy is a creator decision (audit, Part III); the opt-in is ready either way. */ .prose--justified p { text-align: justify; hyphens: auto; hyphenate-limit-chars: 6 3 3; } .prose em { font-style: italic; } .prose .lining { font-variant-numeric: lining-nums; } /* Lead paragraph register */ .prose .lede, .lede { font-size: var(--type-md); line-height: 1.55; } /* ----- 1 · Display ----- */ .display-head { font-family: var(--font-display); font-weight: 700; line-height: var(--leading-head); color: var(--ink); letter-spacing: 0.002em; text-wrap: balance; font-variant-numeric: lining-nums; } .display-head .display-accent, .display-accent { font-style: italic; font-weight: 600; color: var(--gold); /* large text only: 3.72:1 clears the 3:1 large floor */ } .t-display { font-size: var(--type-display); letter-spacing: -0.008em; } .t-2xl { font-size: var(--type-2xl); } .t-xl { font-size: var(--type-xl); } .t-lg { font-size: var(--type-lg); } .t-md { font-size: var(--type-md); } /* Heading rhythm: 2:1 above:below */ .prose h2, .prose h3, .head-rhythm { margin-block: var(--space-head-above) var(--space-head-below); } /* ----- 3 · Small-caps furniture (true smcp; EB Garamond) ----- */ .smallcaps { font-family: var(--font-text); font-variant-caps: small-caps; letter-spacing: var(--track-smallcaps); font-variant-numeric: oldstyle-nums; } .smallcaps--all { font-variant-caps: all-small-caps; } /* ----- 4 · Mono registers ----- */ .kicker { font-family: var(--font-mono); font-size: var(--type-plate-label); font-weight: 500; letter-spacing: var(--track-kicker); text-transform: uppercase; color: var(--gold-deep); } .plate-label { font-family: var(--font-mono); font-size: var(--type-plate-label); /* fixed 13px; plate furniture never varies */ font-weight: 500; letter-spacing: var(--track-plate); text-transform: uppercase; color: var(--gold-deep); } .tabular { font-variant-numeric: lining-nums tabular-nums; font-feature-settings: 'tnum' 1, 'lnum' 1; } .mono { font-family: var(--font-mono); } /* ----- 5 · Apparatus (Source Serif 4) ----- */ .apparatus { font-family: var(--font-apparatus); font-size: var(--type-small); line-height: var(--leading-caption); color: var(--ink-2); } .caption { font-family: var(--font-apparatus); font-size: var(--type-caption); /* floor-respecting: 13px minimum */ line-height: var(--leading-caption); color: var(--ink-3); } /* ----- Epigraph accent (IM Fell; thresholds only) ----- */ .epigraph { font-family: var(--font-epigraph); font-style: italic; font-size: var(--type-md); line-height: 1.5; color: var(--ink-2); } /* Historical forms: epigraphs and plate mottoes ONLY, never running text. */ .hist { font-feature-settings: 'hist' 1, 'dlig' 1; } /* Hanging punctuation fallback for opening quotes where the property is unsupported: apply to the quoting block. */ .hang-quote { text-indent: -0.42em; } @supports (hanging-punctuation: first) { .hang-quote { text-indent: 0; hanging-punctuation: first allow-end; } } } /* ========================================================================== MATERIALITY : paper, ink seating, impression, wells ========================================================================== */ @layer materiality { /* Deeper paper: bands, colophon strips, recessed panels. The tooth tile is a baked ink-alpha overlay; live SVG filters stay inside bounded plates only. */ .band { background-color: var(--surface-band); background-image: linear-gradient(rgba(229, 215, 174, 0.60), rgba(229, 215, 174, 0.60)), var(--paper-tooth); background-size: auto, 256px 256px; } .band--deep { background-color: var(--paper-deep); } .band--panel { background-color: var(--surface-panel); } /* Multiply-seat: retoned engravings share the paper's fiber instead of floating on it. Blend layers stay static; animate opacity/transform of the seated element only, never the blend. */ .seat { isolation: isolate; } .engraving { mix-blend-mode: multiply; } /* Letterpress impression: display type ONLY, never body. 1px, no blur; an absence of perfection, not a glow. */ .impress { text-shadow: 0 1px 0 rgba(252, 247, 229, 0.30), 0 -1px 0 rgba(27, 20, 9, 0.12); } .prose .impress, .caption.impress, .apparatus.impress { text-shadow: none; } /* ----- The figure well: hairline frame, crop marks, intaglio plate mark. Crop geometry fixed sitewide: length 13, offset 6, ink at .38. ----- */ .figure { margin-block: var(--space-figure); } .plate-well { position: relative; background-color: var(--paper); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13'%3E%3Cpath d='M12.5 0.5 H0.5 V12.5' fill='none' stroke='%231B1409' stroke-opacity='0.38'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13'%3E%3Cpath d='M0.5 0.5 H12.5 V12.5' fill='none' stroke='%231B1409' stroke-opacity='0.38'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13'%3E%3Cpath d='M12.5 12.5 H0.5 V0.5' fill='none' stroke='%231B1409' stroke-opacity='0.38'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13'%3E%3Cpath d='M0.5 12.5 H12.5 V0.5' fill='none' stroke='%231B1409' stroke-opacity='0.38'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: top 6px left 6px, top 6px right 6px, bottom 6px left 6px, bottom 6px right 6px; border: 1px solid var(--paper-line); padding: clamp(1.125rem, 0.85rem + 1.4vw, 2.25rem); } /* The intaglio plate mark: the pressed rectangle a copperplate leaves, a few px outside the well. Desktop nicety; off under 720px. */ @media (min-width: 720px) { .plate-well::after { content: ''; position: absolute; inset: -9px; border: 1px solid rgba(107, 90, 62, 0.30); pointer-events: none; } } /* Self-framed inlined SVG plates keep their own chrome: no double frame. */ .plate-well--selfchromed { background: none; border: 0; padding: 0; } .plate-well--selfchromed::after { content: none; } /* Dark plate surface */ .plate--dark { background: linear-gradient(160deg, var(--dark), var(--dark-deep)); color: var(--on-dark); } /* Sheet-edge toning at the widest views: a breath, not a prop. The gradients LAYER OVER the paper tile; as first shipped they replaced the body's background-image outright, and every viewport at 1400+ lost the paper texture entirely (caught by the creator's item-1 gate: the page probed dead flat above 1400 while the fixed folio, painting its own field, stayed textured). */ @media (min-width: 1400px) { .sheet-edges { background-image: linear-gradient(90deg, rgba(27, 20, 9, 0.04), transparent 18px), linear-gradient(270deg, rgba(27, 20, 9, 0.04), transparent 18px), var(--paper-tile); background-repeat: no-repeat, no-repeat, repeat; background-size: 24px 100%, 24px 100%, var(--paper-tile-size); background-position: left top, right top, 0 0; } } } /* ========================================================================== ORNAMENT : the rule library, fleuron ladder, versals, head/tailpieces ========================================================================== */ @layer ornament { /* ----- The rule library. Three weights plus the engraved swelled rule, each press-pulled: a baked displacement so the line reads hand-pulled, not laser-set. Rules are elements (hr or div), stretched via background-size so there is never a repeat seam. ----- */ .rule { border: 0; width: 100%; background-repeat: no-repeat; background-size: 100% 100%; } /* Hair + gold displacement 0.75 / stroke 1.15 (checkpoint N1): at scale 1.5 a 1px stroke lands between pixel rows and antialiases to broken patches; at 0.75 the line stays continuous and still reads pulled. Seeds kept. */ .rule--hair { height: 3px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='3' viewBox='0 0 720 3' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='r' filterUnits='userSpaceOnUse' x='-10' y='-4' width='740' height='11'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.55' numOctaves='2' seed='11' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='0.75' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M0 1.5 H720' stroke='%23B49C66' stroke-width='1.15' filter='url(%23r)'/%3E%3C/svg%3E"); } .rule--text { height: 3px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='3' viewBox='0 0 720 3' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='r' filterUnits='userSpaceOnUse' x='-10' y='-4' width='740' height='11'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.014 0.5' numOctaves='2' seed='17' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='0.9' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M0 1.5 H720' stroke='%231B1409' stroke-opacity='0.32' stroke-width='1' filter='url(%23r)'/%3E%3C/svg%3E"); } .rule--gold { height: 3px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='3' viewBox='0 0 720 3' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='r' filterUnits='userSpaceOnUse' x='-10' y='-4' width='740' height='11'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.55' numOctaves='2' seed='29' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='0.75' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M0 1.5 H720' stroke='%2394691A' stroke-width='1.15' filter='url(%23r)'/%3E%3C/svg%3E"); } /* The ceremonial double: masthead, section opens, colophon. Waver held near nothing; the ceremony stays immaculate. */ .rule--double { height: 7px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='7' viewBox='0 0 720 7' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='r' filterUnits='userSpaceOnUse' x='-10' y='-4' width='740' height='15'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.008 0.4' numOctaves='2' seed='23' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='0.8' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23r)'%3E%3Cpath d='M0 1.4 H720' stroke='%231B1409' stroke-width='1.5'/%3E%3Cpath d='M0 5.6 H720' stroke='%231B1409' stroke-width='1.5'/%3E%3C/g%3E%3C/svg%3E"); } /* The engraved swelled rule: a burin lens, thick at the waist, dying to points. Centered, capped at 480px. */ .rule--engraved { height: 9px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='9' viewBox='0 0 480 9' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='r' filterUnits='userSpaceOnUse' x='-8' y='-3' width='496' height='15'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.01 0.22' numOctaves='2' seed='5' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='0.8' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M4 4.5 Q240 1.0 476 4.5 Q240 8.0 4 4.5 Z' fill='%231B1409' filter='url(%23r)'/%3E%3C/svg%3E"); background-size: min(100%, 30rem) 9px; background-position: center; } /* Ledger dotted variant: tables and vitals furniture. */ .rule--dotted { height: 1px; background: none; border-top: 1px dotted var(--paper-line); } /* Column furniture: bounded multicol only, never long-form prose. */ .cols { column-width: 17rem; column-gap: var(--s-6); column-rule: 1px solid var(--paper-line); } .cols > * { break-inside: avoid; } /* ----- Ornament glyphs. Two sizes only: threshold 16px, inline 11px. Set in EB Garamond, which carries real fleuron, hedera and manicule glyphs. Every ornament asserts; unemployed ornament gets cut. ----- */ .orn { font-family: var(--font-text); font-style: normal; line-height: 1; color: var(--gold); } .orn--threshold { font-size: 1rem; } .orn--inline { font-size: 0.6875rem; } .orn--fleuron::before { content: '\2766'; } .orn--hedera::before { content: '\2767'; } .orn--manicule::before { content: '\261E'; color: var(--gold-deep); } .orn--section::before { content: '\00A7'; } .orn--pilcrow::before { content: '\00B6'; } /* The asterism, composed the period way: three asterisks, one riding two. (No shipped face carries U+2042.) */ .orn--asterism { display: inline-block; position: relative; text-align: center; line-height: 0.6; color: var(--gold); font-size: 1.05rem; } .orn--asterism::before { content: '*\2004*'; display: block; } .orn--asterism::after { content: '*'; position: absolute; left: 50%; top: -0.52em; transform: translateX(-50%); } /* A rule with a centered fleuron, optically seated on the line. */ .rule-fleuron { display: flex; align-items: center; gap: var(--s-3); justify-content: center; } .rule-fleuron::before, .rule-fleuron::after { content: ''; flex: 1 1 auto; height: 3px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='3' viewBox='0 0 720 3' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='r' filterUnits='userSpaceOnUse' x='-10' y='-4' width='740' height='11'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.55' numOctaves='2' seed='11' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='0.75' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M0 1.5 H720' stroke='%23B49C66' stroke-width='1.15' filter='url(%23r)'/%3E%3C/svg%3E") no-repeat; background-size: 100% 100%; } .rule-fleuron > .orn { transform: translateY(-0.08em); } /* ----- The versal system ----- */ /* Standard drop cap: gold Playfair, three lines, optical overshoot. Base: the float fallback everywhere; @supports upgrades to initial-letter where the engine has it. */ .dropcap::first-letter { float: left; font-family: var(--font-display); font-weight: 600; font-size: 3.35em; line-height: 0.83; padding: 0.06em 0.12em 0 0; margin-left: -0.045em; /* overshoot the margin 2-3px */ color: var(--gold); } @supports (initial-letter: 3) or (-webkit-initial-letter: 3) { .dropcap::first-letter { float: none; font-size: unset; line-height: unset; padding: 0 0.14em 0 0; margin-left: -0.03em; -webkit-initial-letter: 3; initial-letter: 3; } } /* Two-layer illuminated versal: EB Garamond Initials, the woodcut ground (F1) in gold beneath the letter (F2) in ink. Markup contract:

Money is… The F2 letter is the paragraph's real first letter: selection, search and screen readers see plain text. The ground is an EMPTY aria-hidden span; its gold glyph is drawn from data-letter through ::before, so the only copyable/crawlable character is the single F2 letter (no "MMoney" doubling for a reader who selects the word or a crawler that indexes it). F1/F2 are same-advance pairs, so the layers register exactly. */ .versal { float: left; position: relative; font-size: var(--versal-size, calc(var(--type-body) * var(--leading-body) * 2.72)); line-height: 1; font-weight: 400; margin: 0.045em 0.14em 0 -0.02em; } .versal__ground { position: absolute; inset: 0; font-family: var(--font-versal-ground); color: var(--gold); } /* The ground glyph is generated, not literal text, so the letter is never doubled in the copy buffer or the crawl. data-letter carries the same A-Z as the F2 letter; ::before inherits the ground's font and size, so the woodcut ground registers on the ink letter exactly as before. */ .versal__ground::before { content: attr(data-letter); } .versal__letter { position: relative; font-family: var(--font-versal-letter); color: var(--ink); } /* ----- Headpiece: the engraved band over a threshold. Declares its own containment and degrades by the ladder: full engraving at >=420px of container, the simplified band at >=240px, a bare hairline below. (Container query lengths cannot read custom properties; 420/240 are the --ladder-full/--ladder-band tokens, restated.) Without container query support the full state stands. ----- */ .headpiece { container: headpiece / inline-size; margin-block: 0 var(--flow-band); } .headpiece__art { display: block; } .headpiece__art img, .headpiece__art svg { width: 100%; } .headpiece__band { display: none; } .headpiece__rule { display: none; } @container headpiece (max-width: 419.9px) { .headpiece__art { display: none; } .headpiece__band { display: block; } } @container headpiece (max-width: 239.9px) { .headpiece__band { display: none; } .headpiece__rule { display: block; } } /* Tailpiece: the closing ornament. A fleuron seated between two dying rules; an engraving may take the slot on flagship leaves. */ .tailpiece { display: flex; align-items: center; justify-content: center; gap: var(--s-3); margin-block: var(--flow-band); } .tailpiece::before, .tailpiece::after { content: ''; width: min(18vw, 7.5rem); height: 9px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='9' viewBox='0 0 480 9' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='r' filterUnits='userSpaceOnUse' x='-8' y='-3' width='496' height='15'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.01 0.22' numOctaves='2' seed='5' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='0.8' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M4 4.5 Q240 1.0 476 4.5 Q240 8.0 4 4.5 Z' fill='%231B1409' filter='url(%23r)'/%3E%3C/svg%3E") no-repeat center; background-size: 100% 9px; } } /* ========================================================================== COMPONENTS : masthead, colophon, figure chrome, fold-out affordance ========================================================================== */ @layer components { .leaf { max-width: var(--leaf-max); margin-inline: auto; padding-inline: var(--gutter); } /* ----- Masthead (foundation form; the homepage round composes on it) ----- */ .masthead { text-align: center; padding-top: var(--s-6); } .masthead__motto { display: flex; align-items: center; justify-content: center; gap: var(--s-2); font-family: var(--font-text); font-variant-caps: small-caps; letter-spacing: 0.09em; font-size: var(--type-small); color: var(--ink-2); } .masthead__wordmark { /* Masthead flicker fix (July 2026). The nameplate is set in an INLINE, glyph-subset Playfair ('Playfair Nameplate', data: URIs in fonts.css) carrying only the letters of "An Austrian Economist". Because those bytes ship inside the stylesheet, Playfair is present on the very first painted frame, so the wider metric fallback is NEVER shown for the wordmark. That fallback is what wrapped the wordmark to two lines at portrait widths (~390-402px) while Playfair keeps it on one; and because the masthead is pinned and snapshotted by a cross-document view transition, that two-line first-paint frame was being frozen into a ghost. With Playfair guaranteed at first paint the wordmark stays one line on those widths, at the exact size it is now, and nothing is left to swap or to ghost. (font-display:swap let the fallback flash; optional was worse, locking the fallback for the whole page on mobile.) */ font-family: 'Playfair Nameplate', 'Playfair Display Fallback', 'Playfair Display Fallback 2', Georgia, serif; font-weight: 700; font-size: clamp(2rem, 1.2rem + 3.6vw, 3.75rem); line-height: 1.05; color: var(--ink); margin-top: var(--s-2); } .masthead__wordmark .display-accent { font-weight: 600; } .masthead__wordmark a { color: inherit; text-decoration: none; } /* Inline small-caps subset (fonts.css) so the motto is stable at first paint; small-caps is inherited from .masthead__motto. */ .masthead__motto-text { text-wrap: balance; font-family: 'EBG Motto', var(--font-text); } .masthead__rule { margin-top: var(--s-3); } .masthead .masthead__rule { margin-top: var(--s-2); } /* The Shakespeare byline between its mini-rules (IM Fell's one moment). */ .masthead__byline { display: flex; align-items: center; justify-content: center; gap: var(--s-3); margin-top: var(--s-2); } .masthead__byline-text { /* Inline IM Fell italic subset (fonts.css) so the byline is stable at first paint; font-style:italic is inherited from .epigraph. IM Fell is not preloaded, so this was the most visible masthead swap on mobile. */ font-family: 'Fell Byline', var(--font-epigraph); font-size: clamp(0.9375rem, 0.88rem + 0.25vw, 1.0625rem); line-height: 1.4; color: var(--ink-2); } .masthead__byline-rule { width: clamp(2rem, 6vw, 3.75rem); height: 1px; background: var(--paper-line); } /* The directory: small caps, 44px targets, gold underline on the current leaf (aria-current="page") or its section (aria-current="true"). */ .frontnav { display: flex; flex-wrap: wrap; justify-content: center; column-gap: clamp(1rem, 4vw, var(--s-8)); margin-top: var(--s-1); } .frontnav a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; /* The touch floor holds in BOTH axes (QC defect D2, July 2026): the shortest label, Apps, measured 37px wide. The min-inline-size widens only that hit-box; the label stays centered where it stood. */ min-inline-size: 44px; padding-inline: 2px; position: relative; font-family: var(--font-text); font-variant-caps: small-caps; letter-spacing: 0.07em; font-size: var(--type-small); color: var(--ink-2); text-decoration: none; } .frontnav a:hover { color: var(--ink); } .frontnav a[aria-current] { color: var(--gold-deep); } .frontnav a[aria-current]::after { content: ''; position: absolute; left: 2px; right: 2px; bottom: 8px; height: 1px; background: var(--gold); } /* The pocket edition sets its directory two by two rather than squeezing four labels onto one line or orphaning the fourth. */ @media (max-width: 379.9px) { .frontnav { display: grid; grid-template-columns: auto auto; justify-content: center; column-gap: var(--s-6); } .frontnav a { justify-content: center; } } /* The edition line retired from the site's leaves (creator ledger item 4, July 2026: the masthead reads the same on every page). The register survives for the specimen's own proof label only. */ .masthead__edition { font-family: var(--font-mono); font-size: var(--type-plate-label); letter-spacing: 0.14em; text-transform: none; /* the line is typed in its final form: No. 3 · … */ text-wrap: balance; color: var(--ink-3); padding-block: var(--s-2); text-align: center; } @media (max-width: 479.9px) { .masthead__edition { letter-spacing: 0.07em; } } .masthead__edition .tabular { color: var(--ink-2); } .masthead__foot { margin: 0; } /* ----- The footer: V3's newspaper colophon line, restored on the creator's ruling (feedback ledger items 2-3, July 2026). It prints on the page's own paper: no band, no distinct tone, no device, no tailpiece before it on non-essay leaves. Geometry and the warm-brown rules are lifted verbatim from V3 (journal.css .footer + the vintage-paper #4E3712 rule brown); the faces are V4's. The old .colophon band component retired with this ruling. ----- */ .footer { --footer-rule: #4E3712; /* V3 --rule-brown, lifted verbatim */ margin-top: var(--flow-section); border-top: 1px solid var(--footer-rule); border-bottom: 1px solid var(--footer-rule); padding: 4px 0; position: relative; } .footer::before { content: ''; position: absolute; left: 0; right: 0; top: 4px; height: 1px; background: var(--footer-rule); opacity: 0.3; } .footer__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s-6); padding-block: var(--s-4); } .footer__copy { font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); justify-self: start; white-space: nowrap; } .footer__name { display: inline-flex; align-items: center; gap: var(--s-2); font-family: var(--font-display); font-weight: 700; font-size: 1.375rem; letter-spacing: -0.01em; line-height: 1.2; color: var(--ink); white-space: nowrap; } /* The flanking fleurons are real EB Garamond glyphs (.orn spans in the markup): Playfair carries none, and a pseudo-element fleuron on a Playfair element falls silently to system dingbats. */ .footer__links { display: flex; justify-content: flex-end; align-items: center; gap: var(--s-4); } .footer__link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; /* touch floor without visual bulk */ font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); text-decoration: none; } .footer__link:hover, .footer__link:focus-visible { color: var(--gold-deep); } @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) { .footer__link { transition: color var(--dur-ui) var(--ease-out); } } .footer__link svg { width: 13px; height: 13px; } /* V3 stacked at 680 with 10px mono; the V4 registers run 13px, so the three cells need the room until ~860 (probed: 737px of content at 768 overflowed by 34). */ @media (max-width: 859.9px) { .footer__inner { grid-template-columns: 1fr; justify-items: center; text-align: center; row-gap: var(--s-1); padding-block: var(--s-4); } .footer__copy { justify-self: center; } .footer__links { justify-content: center; } } /* ----- The engraved tailpiece seat. Since the creator's ruling (ledger items 7-8) only the SUUM CUIQUE TRIBUE allegory prints, and only as the end-of-essay plate inside .essay-close (sizing there rides the edition kit); the mutua vignette retired. The seat paints its own field; the per-asset brightness lift drops the vignette's scan ground to paper so it sits boxless (suum ground measured ~250 of 255). The residual seat-tile phase difference against the page tile reads as a tipped-in print: the accepted state (review P2 probe table). ----- */ .tailpiece-fig { width: clamp(10rem, 24vw, 13rem); margin: var(--flow-band) auto 0; background-color: var(--paper); background-image: var(--paper-tile); background-size: var(--paper-tile-size); } .tailpiece-fig--suum img { filter: brightness(1.025); } /* ----- Figure block chrome ----- */ .figure figcaption { font-family: var(--font-apparatus); font-size: var(--type-caption); line-height: var(--leading-caption); color: var(--ink-3); margin-top: var(--s-2); } /* ----- The fold-out affordance and viewer shell (js/foldout.js) ----- */ .foldout-btn { display: inline-flex; align-items: center; gap: 0.55em; min-height: 44px; padding: 0.4em 0.2em; font-family: var(--font-mono); font-size: var(--type-plate-label); font-weight: 500; letter-spacing: var(--track-plate); text-transform: uppercase; color: var(--gold-deep); } .foldout-btn svg { width: 0.95em; height: 0.95em; } .foldout-btn:hover { color: var(--gold); } .foldout { position: fixed; inset: 0; width: 100vw; height: 100dvh; z-index: var(--z-foldout); background: var(--paper); background-image: var(--paper-tile); background-size: var(--paper-tile-size); display: none; flex-direction: column; } .foldout[open] { display: flex; } .foldout::backdrop { background: rgba(27, 20, 9, 0.5); } .foldout__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--paper-line); background: var(--surface-band); } .foldout__label { font-family: var(--font-mono); font-size: var(--type-plate-label); letter-spacing: var(--track-plate); text-transform: uppercase; color: var(--gold-deep); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Pocket widths print the plate number clean; the subtitle would only truncate to noise at 390 (review P5). */ @media (max-width: 479px) { .foldout__label-sub { display: none; } } .foldout__controls { display: flex; gap: var(--s-1); } .foldout__ctl { display: inline-grid; place-items: center; width: 44px; height: 44px; font-family: var(--font-mono); font-size: 1.05rem; color: var(--ink-2); border: 1px solid var(--paper-line); background: var(--paper); } .foldout__ctl:hover { color: var(--ink); border-color: var(--ink-3); } .foldout__stage { flex: 1; overflow: hidden; touch-action: none; cursor: grab; position: relative; } .foldout__stage:active { cursor: grabbing; } .foldout__plate { position: absolute; top: 0; left: 0; transform-origin: 0 0; will-change: transform; } .foldout__plate svg, .foldout__plate img { max-width: none !important; } .foldout__plate picture { display: block; } .foldout__plate img { width: 100%; height: auto; } .foldout__hint { position: absolute; left: 50%; bottom: var(--s-3); transform: translateX(-50%); width: max-content; max-width: min(20rem, 88%); text-align: center; font-family: var(--font-mono); font-size: 0.6875rem; line-height: 1.7; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); background: var(--surface-band); border: 1px solid var(--paper-line); padding: 0.4em 1em; pointer-events: none; } html[data-foldout-open] { overflow: hidden; } } /* ========================================================================== UTILITIES ========================================================================== */ @layer utilities { .visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: var(--s-3); top: -100px; z-index: var(--z-skiplink); background: var(--ink); color: var(--paper); font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; padding: 0.95em 1em; /* 44px touch floor at 13px mono (checkpoint N6) */ } .skip-link:focus-visible { top: var(--s-3); } .center { text-align: center; } .measure { max-inline-size: min(var(--measure), 100%); } .measure--center { margin-inline: auto; } /* Break-safe compound binding (the wrap grammar's whole-token rule). Site-wide since the full-site review: it lived in front-page.css and every bound compound off the homepage silently split (review N2). */ .nb { white-space: nowrap; } /* The safety net: every animation and transition collapses under prefers-reduced-motion. Individual kits also gate themselves. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } }