@font-face { font-family: Newsreader; src: url('/assets/newsreader-normal.woff2') format('woff2'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: Newsreader; src: url('/assets/newsreader-italic.woff2') format('woff2'); font-style: italic; font-weight: 400; font-display: swap; }
:root { --paper: #f3e7c9; --ink: #17170f; --serif: Newsreader, Georgia, serif; }
* { box-sizing: border-box; }
html { background: var(--paper); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--serif); font-weight: 400; -webkit-font-smoothing: antialiased; }
p, h1 { margin: 0; }
::selection { background: #233014; color: #fff8e6; }
.page { position: relative; width: 100%; height: 100svh; height: 100dvh; overflow: hidden; }
/* The scene covers the viewport. Type follows the drawing as its edges crop. */
.illustrated-page { width: max(100vw, 150svh); width: max(100vw, 150dvh); height: max(66.666667vw, 100svh); height: max(66.666667vw, 100dvh); aspect-ratio: 3 / 2; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); isolation: isolate; overflow: hidden; container-type: size; }
.story-art { position: absolute; inset: 0; z-index: 0; pointer-events: none; user-select: none; -webkit-user-select: none; }
.story-art picture, .story-art img { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.story-art img { object-fit: cover; object-position: center; -webkit-user-drag: none; }
.story-art .violin-accent { display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .45; transition: opacity .2s ease; }
.story-art.violin-highlighted .violin-accent { opacity: .85; }
@media (prefers-reduced-motion: reduce) { .story-art .violin-accent { transition: none; } }
/* Landscape title, copy and spacing share the artwork scale, including on large displays. */
.printed-copy { position: absolute; z-index: 2; top: 17.5%; left: 50%; transform: translateX(-50%); width: min(60svh, calc(100vw - 48px)); width: min(60cqh, calc(100vw - 48px)); display: flex; flex-direction: column; align-items: center; mix-blend-mode: multiply; }
.wordmark { width: 100%; display: flex; flex-direction: column; font-size: max(44px, 10.4svh); font-size: max(44px, 10.4cqh); line-height: .91; letter-spacing: -.045em; font-weight: 400; }
.wordmark span { align-self: flex-start; }
.wordmark em { align-self: flex-end; margin-top: .08em; font-weight: 400; }
.company { width: 94%; margin-top: max(18px, 2.8svh); margin-top: max(18px, 2.8cqh); font-size: max(15px, 1.85svh); font-size: max(15px, 1.85cqh); line-height: 1.45; text-align: center; color: rgba(23, 23, 15, .91); }
.intro-copy { text-wrap: pretty; }
.founder-credit { margin-top: .9em; font-size: .82em; }
.founder-credit a { color: inherit; text-decoration: none; }
.founder-credit a:hover { text-decoration: underline; text-underline-offset: .2em; }
.founder-credit a:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
.reveal-pending .wordmark, .reveal-pending .company { opacity: 0; }
/* Uneven ink coverage lets the illustration's own paper show through. */
@supports (background-clip: text) or (-webkit-background-clip: text) {
 .wordmark span, .wordmark em { background-color: var(--ink); background-image: url('/assets/printed-ink-v88.svg'); background-repeat: repeat; background-size: 96px 96px; background-clip: text; -webkit-background-clip: text; color: transparent; padding-inline: .06em; margin-inline: -.06em; padding-bottom: .07em; margin-bottom: -.07em; }
}
/* Use the extended canvas only when the screen needs its extra width. */
@media (min-aspect-ratio: 19/10) {
 .illustrated-page { width: max(100vw, 233.373934svh); width: max(100vw, 233.373934dvh); height: max(42.849687vw, 100svh); height: max(42.849687vw, 100dvh); aspect-ratio: 1916 / 821; }
}
/* Portrait is a separate composition, never a crop of the landscape drawing. */
@media (orientation: portrait) {
 .illustrated-page { width: max(100vw, 50svh); width: max(100vw, 50dvh); height: max(200vw, 100svh); height: max(200vw, 100dvh); aspect-ratio: 1 / 2; }
 .printed-copy { top: 18%; left: max(8%, calc((100% - 100vw) / 2 + 24px)); transform: none; width: min(74%, calc(100vw - 48px)); }
 .wordmark { width: 96%; font-size: clamp(44px, 16.2vw, 100px); font-size: clamp(44px, min(16.2cqw, 16.2vw), 100px); }
 .company { width: 100%; margin-top: clamp(22px, 3cqh, 38px); font-size: clamp(13px, 3.85vw, 18px); font-size: clamp(13px, min(3.85cqw, 3.85vw), 18px); line-height: 1.44; }
 .founder-credit { margin-top: .9em; font-size: .87em; }
}
@media (orientation: portrait) and (max-height: 650px) {
 .printed-copy { top: 16%; }
 .wordmark { font-size: clamp(44px, 15.3vw, 90px); font-size: clamp(44px, min(15.3cqw, 15.3vw), 90px); }
 .company { margin-top: clamp(18px, 2.9cqh, 30px); }
}
@media (orientation: landscape) and (max-height: 800px) {
 .company { font-size: max(14px, 1.9svh); font-size: max(14px, 1.9cqh); }
}
@media (orientation: landscape) and (max-height: 480px) {
 .printed-copy { top: 16%; width: min(86svh, calc(100vw - 40px)); width: min(86cqh, calc(100vw - 40px)); }
 .wordmark { font-size: 8.5svh; font-size: 8.5cqh; flex-direction: row; justify-content: center; align-items: baseline; gap: .15em; }
 .wordmark span, .wordmark em { align-self: auto; }
 .wordmark em { margin-top: 0; }
 .company { width: 100%; margin-top: 1.8svh; margin-top: 1.8cqh; font-size: 12.6px; line-height: 1.3; }
 .founder-credit { margin-top: 6px; }
}
@media (prefers-reduced-motion: reduce) { .reveal-pending .wordmark, .reveal-pending .company { opacity: 1; } }
.error-page { width: calc(100% - 48px); max-width: 32rem; margin: 18vh auto; text-align: center; }
.error-page h1 { font-size: clamp(2rem, 7vw, 3rem); line-height: 1.1; letter-spacing: -.04em; }
.error-page p { margin-top: 32px; }
.error-page a { display: inline-flex; align-items: center; min-height: 48px; margin-top: 16px; color: inherit; text-underline-offset: 4px; }
.error-page a:focus-visible { outline: 2px solid var(--ink); outline-offset: 5px; }
/* The invisible target follows the violin in each drawing's own coordinates. */
.violin-hotspot { position: absolute; z-index: 3; left: 9.668%; top: 70.996%; width: 9.180%; height: 19.922%; min-width: 44px; min-height: 44px; transform: translate(-50%, -50%); display: block; padding: 0; border: 0; border-radius: 6px; outline: none; appearance: none; -webkit-appearance: none; background: transparent; color: var(--ink); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.violin-hotspot:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.violin-hotspot:disabled { cursor: default; }
@media (min-aspect-ratio: 19/10) {
 .violin-hotspot { left: 25.626%; top: 69.976%; width: 6.367%; height: 20.341%; }
}
@media (orientation: portrait) {
 .violin-hotspot { left: 15.895%; top: 79.369%; width: 15.784%; height: 12.289%; }
}