/* V23: one engraved space, real identity and a separate travelling hand. */
body { --engraving-filter: brightness(.8); --cover-title: var(--gold); }
body[data-theme=night] { --engraving-filter: invert(1) sepia(1) saturate(.65) brightness(.92); }
body[data-theme] #content :is(.ink-engraving, .series-ink) { filter: var(--engraving-filter); mix-blend-mode: normal; }
.home-page, .collection-page { overflow-x: clip; }
.home-page #content, .collection-page #content { overflow: visible; }
.site-header { position: absolute; top: 0; left: 8.4%; right: 7.7%; width: auto; height: 81px; margin: 0; z-index: 10; }
.site-header nav { gap: 44px; }
.site-header nav a, .artist-nav { font: 400 22px/1.2 var(--serif); text-transform: none; letter-spacing: 0; }
.site-header::after { background: linear-gradient(to right, var(--line) calc(50% - 76px), transparent calc(50% - 76px), transparent calc(50% + 76px), var(--line) calc(50% + 76px)); }
.brand { top: 16px; width: 128px; height: 118px; padding: 0; }
.brand img { width: 117px; height: 112px; }
.header-right { gap: 22px; }
.scene-controls { gap: 10px; }
.theme-text { font-size: 22px; }
.theme-art { width: 51px; height: 66px; }
.theme-toggle { min-height: 66px; }
#motion-toggle { color: var(--ink); }
.cover-scene--night { display: none; }
body[data-theme=night] .cover-scene--day { display: none; }
body[data-theme=night] .cover-scene--night { display: block; }

.hero.cover { height: 69.2767vw; min-height: 0; padding: 0; border: 0; isolation: auto; overflow: hidden; background: var(--paper); }
.cover-art { position: absolute; inset: 0; pointer-events: none; }
.cover-art > img, .series-scene > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: fill; pointer-events: none; }
.hero.cover::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 9%; background: linear-gradient(transparent, var(--paper)); pointer-events: none; z-index: 2; }
.cover-masthead { position: static; }
.cover .wordmark { position: absolute; left: 0; top: 14.85%; width: 100%; z-index: 3; margin: 0; font-size: 15.8vw; line-height: 1.04; letter-spacing: -.025em; color: var(--cover-title); }
.cover-masthead > p { position: absolute; top: 37.6%; left: 0; width: 100%; margin: 0; z-index: 3; font: italic 1.52vw/1.4 var(--serif); text-align: center; color: var(--ink); }
.hero.cover .cover-copy { position: absolute; left: 19%; top: 52.8%; width: 31%; max-width: none; margin: 0; text-align: left; z-index: 4; }
.cover-copy::before { content: ''; position: absolute; inset: -28px -50px -25px -40px; background: radial-gradient(ellipse, var(--paper) 20%, transparent 73%); opacity: .76; z-index: -1; pointer-events: none; }
.cover-copy h2 { font: 400 3.45vw/1.01 var(--serif); letter-spacing: -.025em; margin: 0; }
.cover-copy h2 em { font-weight: 400; color: var(--wine); }
.cover-copy p { font: 400 1.49vw/1.25 var(--serif); color: var(--ink); margin: 18px 0 5px; }
.cover-copy .text-link { font: 400 1.13vw/1.1 var(--serif); font-variant: small-caps; text-transform: none; letter-spacing: 0; min-height: 45px; padding: 14px 0 10px; gap: 32px; }
.cover-copy .text-link svg { width: 20px; height: 20px; }
.cover-hand-dock, .cover-yarn-tail, .cover-yarn-rest { position: absolute; width: 1px; height: 1px; pointer-events: none; }
.cover-hand-dock { left: 73.789%; top: 52.9693%; }
.cover-yarn-tail { left: 37.8235%; top: 100%; }
.cover-yarn-rest { left: 55.0763%; top: 82.9502%; }
.home-page .story-actor { --story-hand-width: 26.4vw; --story-hand-angle: 0; }

@media (min-width: 651px) and (max-width: 1100px) {
  .site-header { left: 6%; right: 6%; }
  .site-header nav { gap: 25px; }
  .site-header nav a, .artist-nav { font-size: 19px; }
  .header-right { gap: 10px; }
  .scene-controls { gap: 0; }
  .theme-text { display: none; }
  .hero.cover { height: 980px; }
  .cover-art { width: 1414.65px; height: 980px; left: calc(70% - 1043.94px); right: auto; }
  .cover .wordmark { top: 18%; font-size: 20.2vw; }
  .cover-masthead > p { top: 36%; font-size: 21px; }
  .hero.cover .cover-copy { top: 43%; left: 10%; width: 58%; }
  .cover-copy h2 { font-size: 51px; }
  .cover-copy p { font-size: 22px; margin-top: 20px; }
  .cover-copy .text-link { font-size: 17px; }
  .home-page .story-actor { --story-hand-width: 280px; }
}
@media (max-width: 760px) {
  .site-header nav a:nth-child(2) { display: none; }
}
@media (max-width: 650px) {
  .site-header { left: 6%; right: 6%; height: 75px; }
  .site-header nav a { font-size: 17px; }
  .artist-nav { display: none; }
  .brand { top: 17px; width: 83px; height: 91px; }
  .brand img { width: 79px; height: 82px; }
  .header-right { gap: 0; }
  .scene-controls { gap: 0; }
  .theme-toggle { min-height: 59px; }
  .theme-text { display: none; }
  .theme-art { width: 38px; height: 55px; }
  .site-header::after { background: linear-gradient(to right, var(--line) calc(50% - 52px), transparent calc(50% - 52px), transparent calc(50% + 52px), var(--line) calc(50% + 52px)); }
  .hero.cover { height: 1100px; }
  .cover-art { width: 1587.84px; height: 1100px; left: calc(68% - 1171.71px); right: auto; }
  .cover .wordmark { top: 12%; font-size: 23.8vw; line-height: 1.08; }
  .cover-masthead > p { top: 24%; left: 15%; width: 70%; font-size: 18px; line-height: 1.35; }
  .hero.cover .cover-copy { top: 31%; left: 8%; width: 83%; max-width: 360px; }
  .cover-copy::before { inset: -30px -15px -20px; opacity: .94; }
  .cover-copy h2 { font-size: clamp(39px, 10.9vw, 53px); line-height: 1.02; }
  .cover-copy p { font-size: 21px; line-height: 1.35; margin: 20px 0 8px; }
  .cover-copy .text-link { font-size: 16px; gap: 25px; }
  .home-page .story-actor { --story-hand-width: 230px; }
}