/* years.css — round 02 v10's surf deck (timeline.css, prefixed yd- so nothing collides with the poster's own classes). The finish round
   (review-2r item 4): the deck stands inside the years sheet, in its units (1520 × 900), so the camera, the ink, the map, the PDF and the
   picture of the sheet share one projection; the title, the rolling year, the caption and the draw switch are chrome on the screen, inside
   the site's bands (--yd-top, --yd-bottom from camera.js's margins), at sizes a phone reads; the opened print lies over the screen. */

/* ---- the deck, inside the sheet: it runs only while the camera is at the years and stands still at rest everywhere else */
#place-years .yd-stage { position: absolute; left: 0; top: 0; width: 1520px; height: 900px; overflow: hidden; z-index: 1; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; perspective: 1000px; perspective-origin: var(--origin-x, 150px) 50%; pointer-events: none; transition: opacity 0.45s ease-out; --cw: 300px; --origin-x: 150px; }
#place-years .yd-stage:focus { outline: none; }   /* the deck takes the arrival focus (years.js); the cards show their own ring */
html[data-years-live="on"][data-years-draw="off"] #place-years .yd-stage, html[data-years-live="on"]:not([data-years-draw]) #place-years .yd-stage { pointer-events: auto; }   /* the deck owns the pointer at the years until the switch hands it to the pen */
#place-years .yd-stage.grabbing { cursor: grabbing; }
html[data-years-draw="on"] #place-years .yd-stage { cursor: default; }
html[data-years-detail="on"] #place-years .yd-stage { opacity: 0; pointer-events: none; }
.yd-track { position: absolute; left: 0; top: 50%; width: 0; height: 0; transform-style: preserve-3d; }
.yd-card { position: absolute; left: 0; bottom: 0; width: var(--cw); transform-style: preserve-3d; will-change: transform; }
.yd-moment { display: block; width: 100%; padding: 0; margin: 0; border: 0; background: none; cursor: inherit; font: inherit; color: inherit; text-align: left; -webkit-tap-highlight-color: transparent; }
.yd-moment:focus { outline: none; }
.yd-moment:focus-visible .yd-media { outline: 2px solid var(--ink); outline-offset: 6px; }
/* the media pulls out of the stack on hover, in the card's own plane (the lookback's .surf-carousel-item__media) */
.yd-media { display: block; position: relative; width: 100%; background: var(--paper-deep); box-shadow: 0 1px 1px rgba(21, 20, 26, 0.1), 0 14px 30px -16px rgba(21, 20, 26, 0.5); overflow: hidden; }
@media (hover: hover) and (pointer: fine) {
  .yd-media { transition: transform 0.75s cubic-bezier(0.19, 1, 0.22, 1); }
  html[data-years-live="on"][data-years-draw="off"] .yd-card:hover .yd-media { transform: translate(75%) rotate(10deg); }
}
.yd-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.5s ease-out; display: block; }
.yd-media.loaded img { opacity: 1; }
/* a written card for a year without photographs */
.yd-media.yd-face { background: rgba(236, 230, 218, 0.62); box-shadow: inset 0 0 0 1px rgba(21, 20, 26, 0.12), 0 14px 30px -16px rgba(21, 20, 26, 0.4); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 7% 9%; box-sizing: border-box; }
.yd-face .yd-yr { height: 38%; width: 100%; }
.yd-face .yd-ln { height: 17%; width: 100%; margin-top: 3%; }
.yd-face canvas { height: 100%; width: 100%; object-fit: contain; object-position: left center; }
.yd-face .yd-mono { margin: 6% 0 0; font-size: 12px; letter-spacing: 0.02em; color: var(--ink); line-height: 1.35; }
.yd-face .hand { mix-blend-mode: multiply; filter: url(#soak); }
.yd-face .hand canvas { display: block; }

/* ---- the chrome of the deck on the screen: above the poster (no card covers the title or the year), under the vignette, the grain and the site's chrome */
.yd { position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity 0.45s ease-out; --yd-top: 56px; --yd-bottom: 96px; }
.yd[hidden] { display: none; }
.yd.on { opacity: 1; }
html:not([data-phase="live"]) .yd, html:not([data-phase="live"]) .yd-switch { visibility: hidden; }
.yd .vh, .yd-detail .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.yd .hand, .yd-detail .hand { mix-blend-mode: multiply; filter: url(#soak); }
.yd .hand canvas, .yd-detail .hand canvas { display: block; }
/* the head: the title written in the hand at the left, the year that rolls at the right, under the site's top row */
.yd-head { position: absolute; left: 24px; right: 24px; top: calc(var(--yd-top) + 34px); display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; z-index: 3; pointer-events: none; transition: opacity 0.45s ease-out; }
.yd-titlewrap { display: flex; align-items: flex-start; gap: 4px; min-width: 0; }
.yd-title { margin: 0; font-size: 0; min-width: 0; }
.yd-title canvas { height: 64px; width: auto; max-width: 100%; object-fit: contain; object-position: left top; }
.yd-replay { pointer-events: auto; background: none; border: 0; padding: 10px; margin: -4px 0 0; cursor: pointer; opacity: 0; transition: opacity 0.25s; min-width: 44px; min-height: 44px; }
.yd-replay[hidden] { display: none; }
.yd-titlewrap:hover .yd-replay, .yd-replay:focus-visible { opacity: 0.6; }
.yd-replay:hover { opacity: 1; }
.yd-replay:focus-visible { outline: 1.5px dashed var(--chrome); outline-offset: 2px; }
@media (hover: none) { .yd-replay:not([hidden]) { opacity: 0.5; } }
.yd-year { display: grid; justify-items: end; align-items: start; height: 110px; overflow: hidden; flex: none; }
.yd-year .yc { grid-area: 1 / 1; display: block; height: 110px; width: auto; transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s linear; }
.yd-year .yc.enter { transform: translateY(calc(var(--dir, 1) * 108%)); opacity: 0; transition: none; }
.yd-year .yc.out { transform: translateY(calc(var(--dir, 1) * -108%)); opacity: 0; }
html[data-years-detail="on"] .yd-caption-wrap, html[data-years-detail="on"] .yd-head, html[data-years-detail="on"] .yd-label { opacity: 0; pointer-events: none; }
/* the caption with the year's facts (a replay arrow at its end when the card at the middle is a written one), and the hover label */
.yd-caption-wrap { position: absolute; left: 24px; right: 24px; bottom: calc(var(--yd-bottom) + 6px); display: flex; justify-content: center; align-items: center; gap: 2px; z-index: 3; transition: opacity 0.45s ease-out; }
.yd-caption { margin: 0; min-width: 0; text-align: center; font-size: 14px; letter-spacing: 0.02em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yd-caption b { font-weight: 700; color: var(--ink); }
.yd-caption-wrap .yd-card-replay { flex: none; margin: 0; padding: 8px; opacity: 0.55; }
.yd-caption-wrap .yd-card-replay:hover, .yd-caption-wrap .yd-card-replay:focus-visible { opacity: 1; }
.yd-label { position: absolute; right: 24px; bottom: calc(var(--yd-bottom) + 34px); margin: 0; font-size: 13px; letter-spacing: 0.02em; color: var(--ink); z-index: 3; text-align: right; opacity: 0; transition: opacity 0.3s; pointer-events: none; }
.yd-label.on { opacity: 1; }

/* the draw switch, written by the hand under the title: "draw here" hands the pointer to the pen, "move the photos" hands it back */
.yd-switch { position: fixed; left: 18px; top: calc(var(--yd-top) + 34px + 64px + 6px); z-index: 19; display: flex; align-items: center; min-height: 44px; min-width: 64px; padding: 0 10px; margin: 0; background: none; border: 0; cursor: pointer; opacity: 0; transition: opacity 0.3s; -webkit-tap-highlight-color: transparent; mix-blend-mode: multiply; }
.yd-switch[hidden] { display: none; }
.yd-switch.on { opacity: 0.72; }
.yd-switch.on:hover, .yd-switch.on:focus-visible { opacity: 1; }
.yd-switch:focus-visible { outline: 1.5px dashed var(--chrome); outline-offset: 2px; }
.yd-switch canvas { display: block; filter: url(#soak); }
html[data-years-detail="on"] .yd-switch { opacity: 0; pointer-events: none; }
/* back to your drawing: shown while the deck has moved away from the place the ink was drawn on (years.js), under the switch */
.yd-back { position: fixed; left: 18px; top: calc(var(--yd-top) + 34px + 64px + 6px + 46px); z-index: 19; display: flex; align-items: center; min-height: 44px; min-width: 64px; padding: 0 10px; margin: 0; background: none; border: 0; cursor: pointer; opacity: 0.72; -webkit-tap-highlight-color: transparent; mix-blend-mode: multiply; }
.yd-back[hidden] { display: none; }
.yd-back:hover, .yd-back:focus-visible { opacity: 1; }
.yd-back:focus-visible { outline: 1.5px dashed var(--chrome); outline-offset: 2px; }
.yd-back canvas { display: block; filter: url(#soak); }
html:not([data-phase="live"]) .yd-back, html[data-years-detail="on"] .yd-back { visibility: hidden; }
/* the core's shared-replay arrow (.replay-ink, top left at 16, 84) sits on the deck's written title at the years: here it steps down under
   the switch row (a request to the core is in the years lane's report; remove this once poster.css places it per place) */
/* the visitor's ink on the years sheet fades into the paper as the deck moves away from where it was drawn (--yd-ink, years.js) */
#place-years > .ink-layer { opacity: var(--yd-ink, 1); transition: opacity 0.2s linear; }

/* the detail view: the card flies out of the stack and lies on the paper as a print, above the poster, under the site's chrome (its perspective is set from the camera by years.js) */
.yd-detail { position: fixed; inset: 0; z-index: 19; perspective: 1000px; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; --yd-top: 56px; --yd-bottom: 96px; }
.yd-detail[hidden] { display: none; }
.yd-wash { position: absolute; inset: 0; background: rgba(241, 236, 226, 0.8); opacity: 0; transition: opacity 0.5s; }
.yd-detail.on .yd-wash { opacity: 1; }
.yd-fig { position: absolute; margin: 0; transform-origin: 50% 50%; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.14s; transform-style: preserve-3d; }
.yd-fig.swap { opacity: 0; }
.yd-fig > .yd-pr { position: absolute; inset: 0; transform: rotate(var(--turn, 0deg)); transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.yd-fig > .yd-pr canvas:not(.shadow) { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; }
.yd-fig > .yd-pr canvas.shadow { position: absolute; display: block; pointer-events: none; animation: yd-shadow-in 0.5s ease-out both; }   /* v9: the rendered shadow under the print, sized by the renderer (print.js), drawn before the print */
@keyframes yd-shadow-in { from { opacity: 0; } to { opacity: 1; } }
.yd-fig > .yd-pr img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.yd-fig > .yd-pr .yd-face { position: absolute; inset: 0; width: 100%; height: 100%; }
.yd-fig .yd-face .yd-mono { font-size: 15px; }
.yd-cap { position: absolute; left: 24px; right: 24px; bottom: calc(var(--yd-bottom) + 6px); margin: 0; display: flex; gap: 6px 18px; align-items: center; justify-content: center; flex-wrap: wrap; opacity: 0; transform: translateY(12px); transition: opacity 0.5s 0.25s, transform 0.7s 0.25s cubic-bezier(0.16, 1, 0.3, 1); font-size: 14px; letter-spacing: 0.02em; color: var(--ink); pointer-events: none; }
.yd-detail.on .yd-cap { opacity: 1; transform: none; }
.yd-cap-year canvas { height: 38px; width: auto; display: block; }
.yd-cap-text { width: 100%; text-align: center; margin: 0; color: var(--ink); opacity: 0.8; line-height: 1.5; }
.yd-btn { position: absolute; top: calc(var(--yd-top) + 2px); margin: 0; padding: 0 8px; min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; font: inherit; font-family: var(--type); font-size: 14px; letter-spacing: 0.03em; color: var(--ink); background: none; border: 0; cursor: pointer; opacity: 0; transition: opacity 0.4s 0.3s; text-decoration: underline; text-decoration-color: rgba(21, 20, 26, 0.35); text-underline-offset: 5px; text-decoration-thickness: 1px; }
.yd-detail.on .yd-btn { opacity: 1; }
.yd-btn:hover, .yd-btn:focus-visible { text-decoration-color: var(--ink); outline: none; }
.yd-btn:focus-visible { outline: 1.5px dashed var(--chrome); outline-offset: 2px; }
.yd-close { left: 18px; }
.yd-steps { position: absolute; right: 18px; top: calc(var(--yd-top) + 2px); display: flex; gap: 12px; }
.yd-steps .yd-btn { position: static; }

/* phone (v10's breakpoint): the head smaller, the facts under the title where the deck leaves the paper free */
@media (max-width: 649px) {
  .yd-head { left: 14px; right: 14px; gap: 12px; }
  .yd-title canvas { height: 38px; }
  .yd-year, .yd-year .yc { height: 56px; }
  .yd-caption-wrap { left: 14px; right: 14px; bottom: auto; top: calc(var(--yd-top) + 34px + 38px + 52px); justify-content: flex-start; align-items: flex-start; }
  .yd-caption { font-size: 13px; text-align: left; white-space: normal; line-height: 1.4; }
  .yd-label { display: none; }
  .yd-switch { left: 8px; top: calc(var(--yd-top) + 34px + 38px + 4px); }
  .yd-back { left: 132px; top: calc(var(--yd-top) + 34px + 38px + 4px); }
  .yd-cap { left: 12px; right: 12px; bottom: calc(var(--yd-bottom) + 18px); gap: 4px 10px; font-size: 13px; }
  .yd-cap-year canvas { height: 30px; }
  .yd-btn { font-size: 13px; top: calc(var(--yd-top) + 52px); }
  .yd-close { left: 8px; } .yd-steps { right: 8px; gap: 4px; top: calc(var(--yd-top) + 52px); }
}

/* reduced motion: the stack still moves, nothing lags, bobs, flies or pulls out */
@media (prefers-reduced-motion: reduce) {
  .yd, .yd-year .yc, .yd-fig, .yd-fig > .yd-pr, .yd-cap, #place-years .yd-stage, .yd-caption-wrap, .yd-wash, .yd-media, .yd-media img, .yd-switch, #place-years > .ink-layer { transition: none; }
  .yd-card:hover .yd-media, html[data-years-live="on"][data-years-draw="off"] .yd-card:hover .yd-media { transform: none; }
  .yd-fig > .yd-pr canvas.shadow { animation: none; }
}

/* ---- the years sheet on the poster (1520 × 900, fixed): the deck is its face; the title over the deck's free corner when it is not live */
#place-years > .sheet-head, #place-years > .hand-title { position: relative; z-index: 2; transition: opacity 0.45s ease-out; }
#place-years .sheet-head .kicker { max-width: 600px; }
html[data-years-live="on"] #place-years > .sheet-head, html[data-years-live="on"] #place-years > .hand-title { opacity: 0; }   /* the heading stays for readers (the arrival focus lands near it); the deck writes its own title on the screen */
/* the still face (five prints, the years as links, a line): what the sheet shows without JavaScript; with the deck mounted the prints and
   the line go, and the years stay as links for the keyboard, shown at the sheet's free lower right while one of them has the focus */
#place-years.deck-on .yp-row, #place-years.deck-on .yl-note { display: none; }
#place-years.deck-on .yl-row { position: absolute; right: 40px; bottom: 150px; width: 560px; z-index: 3; justify-content: flex-end; clip-path: inset(50%); opacity: 0; }
#place-years.deck-on .yl-row:focus-within { clip-path: none; opacity: 1; background: rgba(241, 236, 226, 0.86); border-radius: 12px; padding: 8px 12px; }
#place-years .yp-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 36px 40px; margin: 76px 0 64px; padding: 0; }
#place-years .yp { margin: 0; width: 248px; transform: rotate(var(--turn, 0deg)); }
#place-years .yp-print { display: block; border: 0; text-decoration: none; }
#place-years .yp-print img { display: block; width: 100%; height: auto; box-shadow: 0 1px 1px rgba(21, 20, 26, 0.18), 0 6px 10px -6px rgba(21, 20, 26, 0.35); }
#place-years .yp figcaption { margin-top: 12px; text-align: center; font-size: 19px; letter-spacing: 0.04em; }
#place-years .yl-row { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 30px; margin: 0; padding: 0; }
#place-years .yl-row a { display: inline-flex; align-items: center; min-height: 44px; border: 0; text-decoration: none; }
#place-years .yl-row a:hover, #place-years .yl-row a:focus-visible { opacity: 0.7; }
#place-years .yl-note { margin: 56px auto 0; max-width: 900px; text-align: center; font-size: 19px; line-height: 1.5; opacity: 0.72; }
/* the neighbouring sheets step out of the way while the deck is live: their edges never print over it */
html.js .world .place:not(#place-years) { transition: opacity 0.45s ease-out, visibility 0s linear 0s; }
html[data-years-live="on"] .world .place:not(#place-years) { opacity: 0; visibility: hidden; transition: opacity 0.45s ease-out, visibility 0s linear 0.45s; }
@media (prefers-reduced-motion: reduce) { #place-years > .sheet-head, #place-years > .hand-title, html.js .world .place:not(#place-years), html[data-years-live="on"] .world .place:not(#place-years) { transition: none; } }
html:not(.js) #place-years .yp { width: 200px; }

/* ---- print mode (print.html) and the picture of the sheet: the deck's flat picture in the sheet (years.js draws it with the same projection), nothing live */
#place-years > .yd-flat { position: absolute; left: 0; top: 0; width: 1520px; height: 900px; z-index: 1; pointer-events: none; display: block; }
#place-years > .yd-flat-src { display: none; }   /* the deck's flat picture, kept fresh for the picture of the sheet (the export hook shows it in the clone) */
html[data-print="on"] .yd, html[data-print="on"] .yd-switch, html[data-print="on"] .yd-back, html[data-print="on"] .yd-detail { display: none !important; }
html[data-print="on"] #place-years > .ink-layer { opacity: 1 !important; }
html[data-print="on"] #place-years .yd-stage { display: none; }
html[data-print="on"] #place-years > .sheet-head, html[data-print="on"] #place-years > .hand-title { opacity: 1 !important; visibility: visible !important; }
@media print { .yd, .yd-switch, .yd-back, .yd-detail { display: none !important; } }