/* The visual language of the film: graphite, warm paper, one gold ray. */
:root, body.library {
  --paper: #f3f0e8;
  --ink: #25231f;
  --muted: #706a60;
  --line: #cfc8bb;
  --accent: #725419;
  --card: #f9f6ef;
  --gold: #b18b42;
}
body {
  background-image: radial-gradient(ellipse at 90% 2%, #dfd0aa35, transparent 50%),
    repeating-linear-gradient(97deg, #47423605 0 1px, transparent 1px 5px),
    repeating-linear-gradient(0deg, #fff3 0 1px, transparent 1px 4px);
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .055;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' filter='url(%23g)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
}
.shell { position: relative; max-width: 1440px; }
.shell>header { border-bottom-color: #25231f; padding: 28px 0 24px; }
.brand small { letter-spacing: .22em; color: var(--muted); }
.peer { border: 0; font-size: 12px; }
.hero { padding: 80px 0 54px; grid-template-columns: 1.2fr 1fr; }
h1 { font-family: 'Kaiti SC', 'STKaiti', 'KaiTi', 'Noto Serif CJK SC', serif; letter-spacing: .08em; line-height: 1.35; font-size: clamp(44px, 5.6vw, 80px); }
.kicker { letter-spacing: .25em; font-size: 10px; }
.hero p { letter-spacing: .12em; font-size: 13px; }
.hero-vision { position: relative; }
.hero-vision::after {
  content: ''; position: absolute; left: 3%; right: 3%; top: 51%;
  height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent);
  z-index: -1; transform: rotate(-11deg);
}
.hero-vision-caption { font-size: 8px; letter-spacing: .18em; }
.hero-eye-stage { height: 280px; }
.cinema-button { border-radius: 2px; border-color: var(--line); padding: 11px 19px; }
.cinema-button::before { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); margin-right: 10px; }
.pathways { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); margin: 0 0 38px; }
.pathways a { padding: 23px 18px; display: flex; align-items: center; gap: 22px; border-right: 1px solid var(--line); font-size: 17px; letter-spacing: .2em; }
.pathways a:first-child { padding-left: 0; }
.pathways a:last-child { border-right: 0; }
.pathways small { font: 10px Georgia,serif; color: var(--muted); letter-spacing: 1px; }
.pathways a:hover { text-decoration: none; background: #dccca326; }
.pathways a:hover small { color: var(--accent); }
.workspace { border-top: 0; padding-top: 0; }
.search { border-bottom: 1px solid var(--line); }
.search:focus-within { border-bottom-color: var(--gold); }
.filters { gap: 4px; margin-bottom: 24px; }
.filters a { border-radius: 0; padding: 9px 14px; }
.filters a[aria-current=page] { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.explore-tools { background: transparent; border-radius: 0; border-color: var(--line); }
.showcase .grid { gap: 0; border-top: 1px solid var(--line); }
.showcase .card { border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: transparent; border-radius: 0; }
.showcase .card:nth-child(3n) { border-right: 0; }
.showcase .card>summary { min-height: 178px; padding: 27px 26px; }
.showcase .card[open] { border-right: 0; background: #fffaf340; }
.card[open]>summary { background: #d9cbaa22; }
.showcase .card[data-category='people']>summary { padding-left: 83px; }
.showcase .card[data-category='people']>summary::before {
  content: ''; position: absolute; left: 25px; top: 36px; width: 32px; height: 32px;
  border: 1px solid #827d72; border-radius: 47% 53% 51% 49%;
  box-shadow: 2px -1px 0 2px #f3f0e8, 2px -1px 0 3px #bbb3a255;
  background: radial-gradient(circle at center, #25231f 0 2px, transparent 3px);
}
.card .tag { color: var(--accent); font-size: 10px; }
.card h2 { letter-spacing: .025em; }
.detail h3 { font-family: 'Kaiti SC','KaiTi',serif; font-size: 17px; color: var(--ink); }
.detail p { line-height: 2.1; }
.source { border-bottom-style: dotted; }
.source b { color: var(--accent); }
.source small { color: var(--muted); }
.library .art {
  border-color: var(--muted); border-radius: 1px; transform: rotate(8deg);
  background: repeating-linear-gradient(90deg,#beb5a9 0 1px,#f3f0e8 1px 5px);
  box-shadow: 12px 8px 0 -2px var(--paper),12px 8px 0 -1px var(--line);
}
.library .art::before { border-color: var(--line); }
.library .art::after { border-color: var(--gold); }
.library .card .cover-wrap { background: #d6c9b021; border-bottom: 1px solid var(--line); }
.book-cover { filter: saturate(.2); }
.library .card>summary:hover .book-cover { filter: saturate(.6); }
.library .card[open] { border-radius: 0; }
.pill, .related-links a { border-radius: 2px; }
.pill.active { background: var(--ink); }
.parrot-toggle { background: var(--card); border-color: var(--line); box-shadow: 0 5px 16px #25231f12; }
.pixel-parrot { filter: grayscale(.95) sepia(.12); }
.parrot-bubble { background: var(--card); border-color: var(--line); }
.parrot-bubble p { color: var(--muted); }
#reader.night-reading { --paper: #211f1b; --ink: #eee8db; --muted: #b8afa0; --line: #514b40; --accent: #d8bd7e; }
@media(max-width: 800px) {
  .hero { grid-template-columns: 1.2fr 1fr; padding: 45px 0 34px; }
  .hero-eye-stage { height: 215px; }
  .pathways a { padding: 19px 12px; gap: 10px; font-size: 15px; }
  .showcase .card:nth-child(3n) { border-right: 1px solid var(--line); }
  .showcase .card:nth-child(2n) { border-right: 0; }
}
@media(max-width: 520px) {
  .hero { display: block; padding: 32px 0; }
  h1 { font-size: 43px; letter-spacing: .06em; }
  .hero p { font-size: 12px; letter-spacing: .03em; }
  .pathways { grid-template-columns: repeat(2,1fr); margin-bottom: 26px; }
  .pathways a { padding: 17px 12px; font-size: 15px; }
  .pathways a:first-child { padding-left: 12px; }
  .pathways a:nth-child(2) { border-right: 0; }
  .pathways a:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .showcase .card:nth-child(n) { border-right: 0; }
  .showcase .card>summary { min-height: 145px; padding: 24px 16px; }
  .showcase .card[data-category='people']>summary { padding-left: 72px; }
  .filters a { padding: 9px 11px; }
}
@media(prefers-reduced-motion:no-preference) {
  .hero>div:first-child { animation: appear .65s ease both; }
  .pathways { animation: appear .8s ease both; }
}