/* /notes-from-the-sister-city -- "Notes from the Sister City": Andrew's poems from Taiwan as a
   handwritten notebook. The intro above it is site style; this is the hard break into the book.
   Look (final, chosen 2026-09-21): blue-black-navy cloth in the muted colours of the flag of Taiwan
   (desaturated navy, ivory, dusty brick red), a paper note with a small Taiwan sticker for a cover,
   ivory pages with hairline ruling, written in black pen (Caveat).
   Layout of each poem is reproduced from his photos (docs/tools/build-sister-city.py): every line is
   its own block, indents in ch, stanzas two ruled rows apart. Fonts self-hosted, SIL OFL: Caveat, and
   a small Yuji Boku subset for the sixteen Chinese characters. Loaded only on this page. */
@font-face { font-family: 'ST Caveat'; font-weight: 400 700; font-style: normal; font-display: swap; src: url(fonts/handwriting/Caveat-Variable.woff2) format('woff2'); }
@font-face { font-family: 'ST Brush'; font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+5FC3, U+5728, U+9AD8, U+96C4, U+8ECA, U+7AD9, U+4E0A, U+91CC, U+5E03, U+65AF, U+672C, U+516C, U+5712, U+6211, U+7684, U+5BB6; src: url(fonts/handwriting/YujiBoku-subset-v2.woff2) format('woff2'); }

.st { --paper: #f5efe2; --pen: #17161a; --rule: rgba(84, 74, 54, 0.15); --dim: rgba(23, 22, 26, 0.6); --red: #913b35; --navy: #272f49;
      font-family: 'ST Caveat', 'Caveat', 'Segoe Print', 'Bradley Hand', 'Comic Sans MS', cursive; color: var(--pen);
      padding-bottom: clamp(2rem, 6vw, 4rem);
      background-color: var(--navy);
      background-image: radial-gradient(ellipse 80% 40% at 50% 0%, rgba(255, 255, 255, 0.07), transparent 70%),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Cpath d='M0 3h6M3 0v6' stroke='rgba(255,255,255,0.035)' stroke-width='1' fill='none'/%3E%3C/svg%3E"); }
.st *, .st *::before, .st *::after { box-sizing: border-box; }
.st a { color: var(--red); text-underline-offset: 3px; }
.st p { margin: 0; }

/* ---------- cover: a paper note on the cloth, with a Taiwan sticker stuck on its corner ---------- */
.st-cover { text-align: center; padding: clamp(3.5rem, 10vw, 6.5rem) 1.25rem 4.4rem; }
.st-cover-note { position: relative; max-width: 21rem; margin: 0 auto; padding: 1.8rem 1.2rem 2.4rem; transform: rotate(-1.3deg);
	background: var(--paper); color: var(--pen); border: 2px solid var(--red);
	box-shadow: inset 0 0 0 5px var(--paper), inset 0 0 0 6px rgba(145, 59, 53, 0.85), 0 8px 22px rgba(0, 0, 0, 0.45); }
.st-cl-title { font-size: 2.35rem; line-height: 1.02; font-weight: 700; }
.st-cl-author { margin-top: 1rem !important; font-size: 1.35rem; color: var(--red); }
.st-sticker { position: absolute; right: -1.3rem; bottom: -1.7rem; width: 4.9rem; height: 4.9rem; transform: rotate(9deg); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45)); }
.st-skip { margin-top: 2.2rem; padding: 0.5rem 1.1rem; font: inherit; font-size: 1.05rem; letter-spacing: 0.04em; cursor: pointer;
	color: #e6dfcd; background: transparent; border: 1px solid rgba(230, 223, 205, 0.5); transition: background 0.25s, color 0.25s; }
.st-skip:hover, .st-skip:focus-visible { background: #e6dfcd; color: var(--navy); }
.st-skip:focus-visible { outline: 2px solid #e6dfcd; outline-offset: 3px; }

/* ---------- pages: ivory notebook paper ---------- */
.st-pages { max-width: 52rem; margin: 0 auto; padding: 0 1rem; counter-reset: folio; }
.st-page { position: relative; container-type: inline-size; margin: 0 0 3.2rem; padding: 3rem 2.6rem 4.6rem 3.5rem; overflow: hidden; border-radius: 3px 13px 13px 3px;
	background-color: var(--paper);
	background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0.03) 2.2%, rgba(0, 0, 0, 0) 6%),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .2 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 18px 40px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.4); }
.st-page:nth-of-type(odd)  { transform: rotate(-0.28deg); }
.st-page:nth-of-type(even) { transform: rotate(0.32deg); }
.st-page:not(.st-colophon) { counter-increment: folio; }
.st-page:not(.st-colophon)::after { content: "\2013\00a0" counter(folio) "\00a0\2013"; position: absolute; left: 0; right: 0; bottom: 1.5rem; text-align: center; font-size: 1.05rem; color: var(--dim); }

/* one uniform size for every poem: Caveat sets the longest line (72 characters) at 23.6em, so
   `100cqw / 24.8` makes it just fit on desktop and no line is ever reflowed; below the floor
   (phones) a wrapped line gets a hanging indent so a soft wrap can't be mistaken for one of
   Andrew's line breaks. Rules sit every 1.6em; the poem's rhythm is measured in whole rows. */
.st-poem { font-size: clamp(0.98rem, calc(100cqw / 24.8), 1.9rem); line-height: 1.6; color: var(--pen); text-shadow: 0 0 0.3px var(--pen);
	background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(1.6em - 1px), var(--rule) calc(1.6em - 1px), var(--rule) 1.6em); }
.st-head { margin: 0 0 3.2em; }
.st-stanza { margin: 0 0 3.2em !important; }
.st-stanza:last-child { margin-bottom: 0 !important; }
.st-line { display: block; width: fit-content; max-width: 100%; margin: 0; padding-left: calc(var(--in, 0ch) * 0.72 + 1.1ch); text-indent: -1.1ch; }
/* titles occupy exactly ONE ruled row (1.4em x 1.1429 = 1.6em) so they sit on the rule, not across it */
.st-title { font-size: 1.4em; line-height: 1.1429; font-weight: 400; margin: 0; }
.st-title.st-bi { font-weight: 700; font-style: normal; }
.st-zhtitle { font-size: 2.3em; line-height: 0.6957; }          /* one row as well: the brush glyph rises into the top margin */
.st-zh { font-family: 'ST Brush', 'Yuji Boku', 'Noto Serif TC', 'Songti TC', 'PMingLiU', serif; }
.st-date { line-height: 1.6; margin: 0; color: var(--dim); text-shadow: none; }
.st-date + .st-date { margin-top: 0 !important; }
.st-date .st-zh { margin: 0 0.14em; }                            /* opens up the narrow handwritten space before the Chinese location; the text is unchanged */
/* a hand is never perfectly level */
.st-stanza .st-line:nth-child(4n + 1) { transform: rotate(-0.16deg); }
.st-stanza .st-line:nth-child(4n + 2) { transform: rotate(0.14deg) translateY(0.5px); }
.st-stanza .st-line:nth-child(4n + 3) { transform: rotate(-0.08deg) translateY(-0.5px); }

.st-colophon { padding: 2rem 1.5rem 2.2rem; text-align: center; font-size: 1.1rem; line-height: 1.7; color: #45465a; transform: none !important; }
.st-colophon p + p { margin-top: 0.6rem !important; }

/* ---------- the writing: each line is drawn left-to-right by sister-city.js (a paced pen stroke) ---------- */
/* hidden until its poem has been written out; the script animates clip-path (with pauses for the grammar) and then sets .is-written */
.st.js:not(.is-static) .st-poem:not(.is-written) .st-line:not(.is-done) { clip-path: inset(-0.4em 100% -0.4em -0.4em); }
/* while measuring, drop the small tilts so coordinates are true */
.st-measure .st-page, .st-measure .st-line { transform: none !important; }

@media (max-width: 40rem) { .st-page { padding: 2rem 1rem 3.8rem 1.5rem; } .st-pages { padding: 0 0.6rem; } }
@media (prefers-reduced-motion: reduce) { .st .st-line { clip-path: none !important; transform: none !important; } .st-skip { transition: none; } .st-page { transform: none !important; } }