/* The homepage (index.html and its Chinese editions), after Teenage Engineering's "Daily Life of Mr. Update" as
Swipefile captured it: white paper, black ink and one orange for the tune and what is changing. One heavy headline
with the way in drawn beside it, and one wide ink scene that plays like a film; under it the page keeps the scene's
column, small utility type, and its working examples on panels a tone darker than the page instead of ink frames,
cards or shadows (owner, 2026-10-25), and drawings from the same hand. docs/plans/homepage.md records the decisions; styles.css holds the site's tokens, header, footer and closing
block. */
/* The poster face: Mona Sans Condensed (SIL OFL 1.1, GitHub), its Latin letters at weights 700 to 900, renamed
because Mona is a Reserved Font Name (licenses/ScoreStarling-Display.txt), for the headline and closing line.
Starling's hand: Petaluma Script (SIL OFL 1.1, Steinberg; licenses/Petaluma.txt), for every word in the scene: the
title, letters and fret numbers it writes, and the balloons. Around the scene, the site's sans for what you read,
and its mono for small upper-case labels and the film's controls. The title face is preloaded; a headline set in a
fallback would be twice as wide. */
@font-face {
font-family: "ScoreStarling Display";
font-style: normal;
font-weight: 700 900;
font-display: block;
src: url(/assets/fonts/scorestarling-display-v1.woff2) format("woff2");
}
@font-face {
font-family: "Petaluma Script";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/assets/fonts/petaluma-script-v1.10.woff2) format("woff2");
}
.home {
/* The printed face in every edition: its Latin letters stay printed beside Chinese ones. */
--poster: var(--poster-face);
--hand: "Petaluma Script", "Times New Roman", serif;
/* Match the navigation's measure; only the drawing scales down on short screens. */
--page: min(1120px, 100vw - 2 * var(--gutter));
--column: var(--page);
}
.home main {
overflow-x: clip;
}
/* The header keeps the page's measure (brand.css); only the illustration shrinks on short screens. */
.home .site-header {
background: var(--paper);
}
/* The same melody crosses between two drawn pages; the orange action is a real button. */
.hero {
--head: 184px;
padding: 0 0 var(--space-4);
}
/* Keep the converter's first frame still while the story loads behind its complete poster. */
.js
.hero:not(.hero-ready)
.converter
:is(#converter-input-art, #converter-output-art, .converter-caption, .form-result, .bird-cel) {
animation-play-state: paused;
}
@media (min-width: 961px) {
/* The whole poster grows with the page's measure (brand.css --page-scale), so its edges stay on the header's and the
sections'. */
.hero {
display: flow-root;
}
.home .hero > .wrap {
width: min(1120px, (100% - 2 * var(--gutter)) / var(--page-scale));
zoom: var(--page-scale);
}
}
@media (min-width: 961px) and (min-aspect-ratio: 4 / 3) {
.hero {
min-height: calc(100svh - 72px);
}
}
.masthead {
display: grid;
grid-template-columns: minmax(0, 1fr) 300px;
align-items: center;
column-gap: var(--space-8);
min-height: var(--head);
margin-top: var(--space-6);
}
.hero h1 {
--poster-size: clamp(64px, 7vw, 88px);
margin: 0;
font: 800 var(--poster-size) / 0.94 var(--poster);
letter-spacing: -0.005em;
text-transform: uppercase;
}
.hero h1 span {
display: block;
}
.corner {
display: grid;
justify-self: end;
width: 300px;
max-width: 100%;
gap: var(--space-2);
}
.converter-drawing {
display: block;
width: 100%;
height: auto;
overflow: visible;
}
/* Lettering belongs to the drawing definitions, not their