/* Scoped counterpart of round 02 v10. No paper, cursor, body or viewport ownership. */
.yrs { position: relative; width: 100%; height: 580px; min-width: 0; color: var(--ink, #15141a); font-family: var(--type, 'Special Elite', monospace); isolation: isolate; --yrs-cw: 300px; --yrs-origin: 150px; }
.yrs [hidden] { display: none !important; }
.yrs button { font: inherit; color: inherit; background: none; border: 0; padding: 8px 3px; cursor: pointer; }
.yrs button:focus-visible { outline: 2px solid var(--ink, #15141a); outline-offset: 4px; }
.yrs-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.yrs-head { position: absolute; inset: 0 16px auto auto; z-index: 5; pointer-events: none; transition: opacity .45s ease-out; }
.yrs-year { height: 92px; font-family: Kalam, cursive; font-weight: 700; font-size: 76px; line-height: 1; filter: url(#soak); }
.yrs-year-canvas { display: block; height: 92px; width: auto; }
.yrs-stage { position: absolute; inset: 0 0 96px; overflow: hidden; cursor: grab; touch-action: pan-y pinch-zoom; user-select: none; -webkit-user-select: none; perspective: 1000px; perspective-origin: var(--yrs-origin) var(--yrs-origin-y); transition: opacity .45s ease-out; z-index: 2; }
.yrs-stage.yrs-grabbing { cursor: grabbing; }
.yrs-track { position: absolute; top: 50%; left: 0; width: 0; height: 0; transform-style: preserve-3d; }
.yrs-card { position: absolute; left: 0; bottom: 0; width: var(--yrs-cw); transform-style: preserve-3d; will-change: transform; visibility: hidden; }
.yrs-card.yrs-in { visibility: visible; }
.yrs button.yrs-moment { display: block; width: 100%; padding: 0; margin: 0; text-align: left; cursor: inherit; -webkit-tap-highlight-color: transparent; }
.yrs-moment:focus-visible { outline: none; }
.yrs-moment:focus-visible .yrs-media { outline: 2px solid var(--ink); outline-offset: 6px; }
.yrs-media { position: relative; display: block; width: 100%; overflow: hidden; background: var(--paper-deep, #e6dfd0); box-shadow: 0 1px 1px rgba(21,20,26,.1), 0 14px 30px -16px rgba(21,20,26,.5); }
.yrs-media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s ease-out; }
.yrs-media.yrs-loaded img { opacity: 1; }
.yrs-image-failed::after { content: 'photograph unavailable'; font-size: 12px; padding: 18px; display: block; }
.yrs-face { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 7% 9%; box-sizing: border-box; background: transparent; box-shadow: none; }
.yrs-card-year { height: 38%; width: 100%; font: 700 38px/1 Kalam, cursive; }
.yrs-card-line { height: 17%; width: 100%; margin-top: 3%; font: 700 18px/1 Kalam, cursive; }
.yrs-face canvas { height: 100%; width: 100%; object-fit: contain; object-position: left center; display: block; filter: url(#soak); }
.yrs-mono { margin: 6% 0 0; font-size: 11.5px; line-height: 1.35; letter-spacing: .02em; }
.yrs-caption { position: absolute; left: 12px; right: 12px; bottom: 47px; margin: 0; z-index: 4; font-size: 12.5px; line-height: 1.6; text-align: center; transition: opacity .45s ease-out; pointer-events: none; }
.yrs-label { position: absolute; right: 14px; bottom: 82px; margin: 0; z-index: 4; font-size: 12px; opacity: 0; transition: opacity .3s; pointer-events: none; }
.yrs-label.yrs-on { opacity: 1; }
.yrs-nav { position: absolute; bottom: 3px; left: 8px; right: 8px; display: flex; justify-content: space-between; align-items: center; gap: 12px; z-index: 5; font-size: 12px; }
.yrs-nav span { opacity: .6; }
.yrs[data-detail='on'] .yrs-stage, .yrs[data-detail='on'] .yrs-head, .yrs[data-detail='on'] .yrs-caption, .yrs[data-detail='on'] .yrs-label, .yrs[data-detail='on'] .yrs-nav { opacity: 0; pointer-events: none; }
.yrs-detail { position: absolute; inset: 0; z-index: 20; perspective: 1000px; perspective-origin: var(--yrs-origin) var(--yrs-origin-y); cursor: grab; touch-action: pan-y pinch-zoom; user-select: none; -webkit-user-select: none; }
.yrs-wash { position: absolute; inset: 0; background: rgba(241,236,226,.84); opacity: 0; transition: opacity .5s; }
.yrs-detail.yrs-on .yrs-wash { opacity: 1; }
.yrs-fig { position: absolute; margin: 0; transform-origin: 50% 50%; transition: transform .8s cubic-bezier(.16,1,.3,1), opacity .14s; transform-style: preserve-3d; }
.yrs-fig.yrs-swap { opacity: 0; }
.yrs-arrange { position: absolute; inset: 0; transform-origin: 50% 50%; }
.yrs-print { position: absolute; inset: 0; transform: rotate(var(--yrs-turn, 0deg)); transition: transform .8s cubic-bezier(.16,1,.3,1); }
.yrs-print > canvas:not(.shadow) { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; }
.yrs-print > canvas.shadow { position: absolute; display: block; pointer-events: none; }
.yrs-print > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.yrs-print > .yrs-face { position: absolute; inset: 0; width: 100%; height: 100%; }
.yrs-cap { position: absolute; left: 16px; right: 16px; bottom: 30px; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 6px 18px; font-size: 12px; opacity: 0; transform: translateY(12px); transition: opacity .5s .25s, transform .7s .25s cubic-bezier(.16,1,.3,1); pointer-events: none; }
.yrs-detail.yrs-on .yrs-cap { opacity: 1; transform: none; }
.yrs-cap-year { font: 700 32px/1 Kalam, cursive; }
.yrs-cap-text { width: 100%; text-align: center; margin: 0; line-height: 1.5; }
.yrs-close { position: absolute; left: 10px; top: 7px; }
.yrs-reset { position: absolute; left: 10px; top: 37px; font-size: 10px !important; }
.yrs-detail-nav { position: absolute; right: 8px; top: 7px; display: flex; gap: 18px; }
.yrs-close, .yrs-detail-nav { font-size: 12px; }
.yrs-replay, .yrs-skip { position: absolute; z-index: 25; bottom: 82px; left: 7px; opacity: .35; transition: opacity .2s; }
.yrs-replay canvas, .yrs-skip canvas { display: block; width: 38px; height: 32px; filter: url(#soak); }
.yrs .yrs-skip { left: 55px; font: 700 30px/1 Kalam, cursive; }
.yrs:hover .yrs-replay, .yrs:focus-within .yrs-replay, .yrs .yrs-skip { opacity: .75; }
.yrs-print-strip { display: none; }
.yrs[data-mode='draw'] .yrs-stage, .yrs[data-mode='draw'] .yrs-detail { pointer-events: none; }
.yrs[data-active='false'] .yrs-replay { opacity: 0; pointer-events: none; }
.yrs[data-small='true'] { height: 490px; }
.yrs[data-small='true'] .yrs-year, .yrs[data-small='true'] .yrs-year-canvas { height: 64px; font-size: 52px; }
.yrs[data-small='true'] .yrs-caption { font-size: 10px; bottom: 48px; }
.yrs[data-small='true'] .yrs-label { display: none; }
.yrs[data-small='true'] .yrs-cap { left: 10px; right: 10px; bottom: 28px; font-size: 10.5px; }
.yrs[data-small='true'] .yrs-close, .yrs[data-small='true'] .yrs-detail-nav { font-size: 10.5px; }
.yrs[data-small='true'] .yrs-nav { font-size: 11px; }
.yrs[data-small='true'] .yrs-nav span { font-size: 10px; }
html[data-inkgrain='on'] .yrs .inked, html[data-inkgrain='on'] .yrs .typed-ink { -webkit-mask-image: var(--inkgrain); mask-image: var(--inkgrain); -webkit-mask-size: var(--inkgrain-size, 512px) var(--inkgrain-size, 512px); mask-size: var(--inkgrain-size, 512px) var(--inkgrain-size, 512px); }
@media (hover: hover) and (pointer: fine) { .yrs-media { transition: transform .75s cubic-bezier(.19,1,.22,1); } .yrs[data-active='true']:not([data-mode='draw']) .yrs-card:hover .yrs-media { transform: translate(75%) rotate(10deg); } }
@media (hover: none) { .yrs-replay { opacity: .6; } }
@media (max-width: 649px) { .yrs { height: 490px; } }
@media (prefers-reduced-motion: reduce) { .yrs *, .yrs *::before, .yrs *::after { transition: none !important; animation: none !important; } .yrs .yrs-card:hover .yrs-media { transform: none; } }
@media print { .yrs > :not(.yrs-print-strip) { display: none !important; } .yrs-print-strip { display: flex; gap: 25px; height: 100%; align-items: center; } .yrs-print-strip figure { width: 31%; margin: 0; transform: rotate(-1deg); } .yrs-print-strip figure:nth-child(2) { transform: rotate(1.2deg); } .yrs-print-strip img { display: block; width: 100%; height: auto; box-shadow: 0 5px 12px -8px rgba(38,26,14,.6); } .yrs-print-strip figcaption { margin-top: 14px; font-size: 15px; line-height: 1.5; } }