@font-face {
  font-family: "Noto Serif TC Sub";
  src: url("fonts/noto-serif-tc-sub.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
:root {
  color-scheme: light;
  --paper: #F4F0E8;
  --ink: #23211D;
  --ink-2: #66605A;
  --on-photo: #FBF9F4;
  --line: rgb(35 33 29 / .10);
  --vignette: linear-gradient(to top, rgb(20 18 15 / .55), rgb(20 18 15 / .25) 30%, transparent 60%);
  --edge-left: calc(16px + env(safe-area-inset-left, 0px));
  --edge-right: calc(16px + env(safe-area-inset-right, 0px));
}
* { box-sizing: border-box; }
html { background: var(--paper); }
body {
  margin: 0;
  overflow-x: clip;
  color: var(--ink);
  background: var(--paper);
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' filter='url(%23noise)' d='M0 0h160v160H0z'/%3E%3C/svg%3E");
}
h1, h2, p { margin: 0; }
h1, h2 {
  font-family: "Noto Serif TC Sub", "Noto Serif TC", "Noto Serif CJK TC", "Songti TC", "PMingLiU", serif;
  font-weight: 600;
  overflow-wrap: anywhere;
}
picture { display: block; min-width: 0; background: #EAE5DA; }
img { display: block; width: 100%; height: auto; color: var(--ink-2); font-size: .8125rem; }
.photo { outline: 1px solid var(--line); outline-offset: -1px; }
.page-number, .end-mark { color: var(--ink-2); font-size: .8125rem; line-height: 1.5; letter-spacing: .12em; }
.cover { position: relative; min-height: 100svh; display: grid; align-items: end; isolation: isolate; }
.cover-photo, .cover::after { position: absolute; inset: 0; }
.cover-photo { z-index: -2; }
.cover-photo img { height: 100%; object-fit: cover; }
.cover::after { content: ""; z-index: -1; background: var(--vignette); pointer-events: none; }
.cover-number { position: absolute; top: calc(24px + env(safe-area-inset-top, 0px)); right: var(--edge-right); color: var(--on-photo); }
.cover-copy { color: var(--on-photo); padding: 48px var(--edge-right) calc(48px + env(safe-area-inset-bottom, 0px)) var(--edge-left); }
h1 { font-size: 2.5rem; line-height: 1.2; letter-spacing: .04em; }
.subtitle { margin-top: 16px; font-size: 1.0625rem; line-height: 1.7; letter-spacing: .04em; }
.page { margin-top: 96px; padding-inline: var(--edge-left) var(--edge-right); }
.page > .page-number { margin-bottom: 24px; }
.page-title { font-size: 1.625rem; line-height: 1.3; letter-spacing: .04em; }
.spread-photo { margin-left: calc(-1 * var(--edge-left)); margin-right: calc(-1 * var(--edge-right)); }
.spread .page-title { margin-top: 24px; text-align: right; }
.large-title { font-size: 2.5rem; line-height: 1.2; letter-spacing: .02em; }
.diagonal-photo { width: 72vw; max-width: 100%; margin-top: 48px; margin-left: auto; }
.ending { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
.ending-layout { text-align: center; }
.ending-photo { width: 56vw; max-width: 100%; margin-inline: auto; }
.ending .page-title { margin-top: 32px; }
.end-mark { margin-top: 48px; }
@media (min-width: 900px) {
  :root { --edge-left: max(48px, 5vw); --edge-right: max(48px, 5vw); }
  .cover-copy { padding-bottom: 64px; }
  .cover-number { top: 32px; }
  h1 { font-size: clamp(3rem, 5vw, 4.5rem); }
  .subtitle { font-size: 1rem; }
  .page { width: min(1200px, calc(100% - max(48px, 5vw) * 2)); margin: 160px auto 0; padding-inline: 0; }
  .page-title { font-size: 2rem; }
  .spread-layout { display: grid; grid-template-columns: 7fr 5fr; align-items: start; }
  .spread-photo { margin: 0; }
  .spread-photo img { height: 88svh; object-fit: cover; }
  .spread .page-title { justify-self: end; margin: 0; writing-mode: vertical-rl; text-orientation: mixed; text-align: start; }
  .diagonal-layout { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .large-title { grid-column: 1 / 8; font-size: clamp(3.5rem, 6vw, 5.5rem); }
  .diagonal-photo { grid-column: 8 / 13; grid-row: 2; width: 86.4%; margin-top: 48px; }
  .ending-photo { width: 28%; max-width: 360px; }
  .ending { padding-bottom: 160px; }
}
@keyframes appear { from { opacity: 0; } to { opacity: 1; } }
@keyframes photo-enter { from { opacity: 0; transform: scale(1.02); } to { opacity: 1; transform: scale(1); } }
@keyframes title-enter { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: no-preference) {
  .cover-copy { animation: appear 600ms cubic-bezier(.22, 1, .36, 1) 80ms both; }
  @supports (animation-timeline: view()) {
    .photo { animation: photo-enter 1s linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
    .page-title { animation: title-enter 1s linear both; animation-timeline: view(); animation-range: entry 10% entry 70%; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .cover-copy, .photo, .page-title { animation: appear 200ms ease-out both; }
}
@media (prefers-contrast: more) {
  :root { --ink-2: var(--ink); --vignette: linear-gradient(to top, rgb(20 18 15 / .7), rgb(20 18 15 / .25) 30%, transparent 60%); }
}