/* Hometown, door no. 08: The Year on One Corner.
   The camera is bolted down and never moves. One painted corner (porch,
   fence, maple, mailbox) dissolves through ten moments of the year while
   scroll moves time. Weather blends across the seams, the fence post
   almanac keeps the month, the windows answer a hover, and the mail knows
   first. Phones and reduced motion get the corner standing still with the
   ten moments as plain paintings in a column. */

.year { --cream: #f3e9d2; --muslin: #fdf8ec; --barn: #a83232; --barn-2: #8c2f2b;
  --denim: #4a6a9a; --hay: #e3c877; --board: #5a4632; --board-2: #3a2e22;
  --ink: #2c2216;
  background: var(--r-bg); }

/* ================= the porch light intro ================= */
.yr-dark { position: fixed; inset: 0; z-index: 70; background: #050403;
  transition: opacity 1.4s ease, visibility 1.4s; }
.yr-dark.lit { opacity: 0; visibility: hidden; }
.yr-cricket { position: absolute; font-family: var(--r-body); font-style: italic;
  font-size: 15px; color: #5f5642; opacity: 0; animation: cricket 2.6s ease-in-out infinite; }
.yc-1 { left: 24%; top: 58%; animation-delay: .4s; }
.yc-2 { right: 22%; top: 40%; animation-delay: 1.5s; }
@keyframes cricket { 0%, 100% { opacity: 0; } 12%, 30% { opacity: .8; } 44% { opacity: 0; } }
.yr-fil { position: absolute; right: 18%; top: 22%; width: 16px; height: 16px; border-radius: 50%;
  background: #180a02; }
.yr-dark.warming .yr-fil { animation: filament 1.5s ease forwards; }
@keyframes filament {
  0% { background: #180a02; box-shadow: none; }
  30% { background: #6b2c07; box-shadow: 0 0 10px 2px rgba(150, 70, 12, .4); }
  55% { background: #d97a1f; box-shadow: 0 0 24px 8px rgba(224, 140, 40, .5); }
  78% { background: #ffc96e; box-shadow: 0 0 44px 16px rgba(255, 190, 90, .6); }
  100% { background: #ffe9b8; box-shadow: 0 0 70px 26px rgba(255, 216, 140, .65); } }
.yr-skip { position: absolute; right: 22px; bottom: 20px; font-family: var(--font-ui);
  font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: #8f866e;
  background: none; border: none; cursor: pointer; }
.yr-skip:hover { color: var(--cream); }

/* ================= the corner: sticky sky ================= */
.yr-track { position: relative; height: var(--track-h, 1500vh); }
.yr-sky { position: sticky; top: 0; height: 100vh; overflow: hidden; background: var(--r-bg); }
.yr-base { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.yr-plainbase { background: linear-gradient(180deg, #35405c, #221c14 70%); }

.yr-moment { position: absolute; inset: 0; opacity: 0; will-change: opacity; pointer-events: none; }
.yr-moment.act { pointer-events: auto; }
.yr-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform: scale(var(--kbs, 1.04)) translate(var(--kbx, 0px), var(--kby, 0px));
  will-change: transform; }
.yr-plain::after { content: "\2733"; position: absolute; left: 50%; top: 42%;
  transform: translate(-50%, -50%); font-size: 44px; color: rgba(243, 233, 210, .3); }
.pp-0 { background: linear-gradient(155deg, #35405c, #221c14 70%); }
.pp-1 { background: linear-gradient(155deg, #6e2a26, #2e1a12 70%); }
.pp-2 { background: linear-gradient(155deg, #7d6a3a, #2e261a 70%); }
.pp-3 { background: linear-gradient(155deg, #4a5c42, #1d2016 70%); }
.pp-4 { background: linear-gradient(155deg, #52607e, #2a2218 70%); }

/* ---- the lower third: a home movie title band ---- */
.ybs { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
  display: flex; align-items: flex-end; gap: clamp(14px, 1.6vw, 30px);
  padding: 40px clamp(18px, 3vw, 54px) clamp(16px, 2.2vh, 28px);
  background: linear-gradient(180deg, transparent, rgba(12, 9, 4, .62) 34%, rgba(12, 9, 4, .84));
  opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease;
  pointer-events: none; }
.yr-moment.act .ybs { opacity: 1; transform: translateY(0); pointer-events: auto; }
.ybs-stamp { flex-shrink: 0; width: 74px; height: 74px; border-radius: 50%;
  border: 2px solid rgba(243, 233, 210, .55); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1px; transform: rotate(-7deg);
  background: rgba(20, 15, 7, .4); }
.ybs-stamp b { font-family: var(--r-display); font-weight: 600; font-size: 23px; color: var(--cream); }
.ybs-stamp i { font-family: var(--font-ui); font-style: normal; font-size: 8.5px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--hay); }
.ybs-copy { flex: 1 1 auto; min-width: 0; }
.ybs-title { font-family: var(--r-display); font-weight: 600; font-size: clamp(26px, 2.6vw, 44px);
  line-height: 1.04; color: var(--cream); text-shadow: 0 2px 18px rgba(0, 0, 0, .7); }
.ybs-hand { font-family: var(--r-body); font-style: italic; font-size: clamp(14px, 1.15vw, 18px);
  color: #d9cbaa; margin: 6px 0 0; max-width: 68ch; }
.ybs-more { margin-top: 8px; max-width: 74ch; }
.ybs-more summary { font-family: var(--font-ui); font-size: 10px; letter-spacing: .26em;
  text-transform: uppercase; color: var(--hay); cursor: pointer; list-style: none; }
.ybs-more summary::before { content: "\203A\00a0"; }
.ybs-more[open] summary::before { content: "\2039\00a0"; }
.ybs-more[open] { background: rgba(16, 12, 6, .72); padding: 12px 16px; border-left: 2px solid var(--barn); }
.ptl { font-family: var(--r-body); font-style: italic; font-size: 14.5px; line-height: 1.6;
  color: #d9cbaa; margin: 8px 0 0; }
.ptl b { display: block; font-family: var(--font-ui); font-style: normal; font-weight: 500;
  font-size: 9.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--hay); margin-bottom: 1px; }
.ybs-crew { flex-shrink: 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  justify-content: flex-end; max-width: 300px; }
.ybs-crew form { display: inline; }
.crew-chip { font-family: var(--font-ui); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--cream); background: rgba(20, 15, 7, .5); border: 1px dashed rgba(243, 233, 210, .55);
  padding: 8px 13px; cursor: pointer; text-decoration: none; border-radius: 2px;
  transition: color .25s, border-color .25s, background .25s; }
.crew-chip:hover, .crew-chip:focus-visible { color: var(--muslin); background: var(--barn);
  border-color: var(--barn); outline: none; }
.crew-wait { font-family: var(--r-body); font-style: italic; font-size: 13.5px; color: #b3a380; }
.patch-tag { font-family: var(--font-ui); font-size: 9.5px; letter-spacing: .2em;
  text-transform: uppercase; color: #9fb4d4; }

/* ---- weather: everything blends across the seams ---- */
.wx { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0;
  transition: opacity 1.1s ease; }
.wff { position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: #ffe9a8; box-shadow: 0 0 9px 3px rgba(255, 227, 150, .5);
  opacity: 0; animation: htf-blink ease-in-out infinite; }
@keyframes htf-blink {
  0%, 100% { opacity: 0; transform: translate(0, 0); }
  22% { opacity: .9; transform: translate(10px, -8px); }
  48% { opacity: .1; transform: translate(-6px, -18px); }
  72% { opacity: .65; transform: translate(8px, -26px); } }
.wrn { position: absolute; top: -14vh; width: 1.5px; border-radius: 1px;
  background: linear-gradient(180deg, transparent, rgba(214, 226, 240, .55) 30%, rgba(160, 190, 220, .25));
  animation: wrn-fall linear infinite; }
@keyframes wrn-fall { to { transform: translateY(126vh); } }
.wlv { position: absolute; top: -5vh; width: 13px; height: 9px;
  border-radius: 80% 10% 70% 20%;
  background: linear-gradient(120deg, #c96a2a, #8c3f1c 70%);
  opacity: .85; animation: wlv-fall linear infinite; }
@keyframes wlv-fall {
  30% { transform: translateY(34vh) translateX(calc(var(--wx, 0px) * .4)) rotate(150deg); }
  100% { transform: translateY(110vh) translateX(var(--wx, 0px)) rotate(420deg); } }
.wsn { position: absolute; top: -4vh; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff, rgba(240, 244, 250, .8) 60%, transparent 80%);
  animation: wsn-fall linear infinite; }
@keyframes wsn-fall {
  50% { transform: translateY(52vh) translateX(calc(var(--wx, 0px) * .6)); }
  100% { transform: translateY(108vh) translateX(var(--wx, 0px)); } }
.wsm { position: absolute; left: 17.5%; top: 15%; width: 26px; height: 26px; border-radius: 50%;
  background: radial-gradient(circle, rgba(210, 200, 185, .35), transparent 70%);
  filter: blur(4px); opacity: 0; animation: wsm-rise ease-out infinite; }
@keyframes wsm-rise {
  0% { opacity: 0; transform: translate(0, 0) scale(.6); }
  18% { opacity: .7; }
  100% { opacity: 0; transform: translate(26px, -22vh) scale(2.6); } }
.yr-bolt { position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0;
  background: radial-gradient(70% 60% at 60% 20%, rgba(240, 244, 255, .85), rgba(200, 214, 240, .3) 55%, transparent 78%); }
.yr-bolt.flash { animation: bolt-flash .7s ease-out; }
@keyframes bolt-flash { 0% { opacity: 0; } 8% { opacity: 1; } 18% { opacity: .1; }
  30% { opacity: .75; } 100% { opacity: 0; } }

/* ---- the hand lettered sign ---- */
.yr-titlecard { position: absolute; left: clamp(22px, 4.5vw, 80px); top: 16vh; z-index: 7;
  max-width: 640px; transition: opacity .9s ease, transform .9s ease; }
.yr-titlecard.gone { opacity: 0; transform: translateY(-16px); pointer-events: none; }
.yr-plate { font-family: var(--font-ui); font-size: 11px; letter-spacing: .32em;
  text-transform: uppercase; color: var(--hay); text-shadow: 0 1px 8px rgba(0, 0, 0, .8); }
.yr-name { font-family: var(--r-display); font-weight: 600; font-size: clamp(58px, 7vw, 122px);
  line-height: .96; color: var(--cream); margin: 8px 0 10px;
  text-shadow: 0 3px 0 rgba(20, 12, 4, .45), 0 12px 34px rgba(0, 0, 0, .6); }
.yr-name span { display: inline-block; opacity: 0; transform: translateY(10px);
  clip-path: inset(0 100% 0 0); }
.yr-dark.lit ~ .yr-track .yr-name span { animation: paint-on .5s cubic-bezier(.2, .7, .2, 1) forwards;
  animation-delay: calc(.5s + var(--pd, 0) * .12s); }
@keyframes paint-on { to { opacity: 1; transform: translateY(0); clip-path: inset(0 -8% 0 0); } }
.yr-tag { font-family: var(--r-body); font-style: italic; font-size: clamp(15px, 1.25vw, 19px);
  color: #e8dcbc; text-shadow: 0 1px 10px rgba(0, 0, 0, .8); max-width: 46ch; }

/* ---- window whispers ---- */
.yr-win { position: absolute; z-index: 6; pointer-events: auto; }
.yr-win::after { content: ""; position: absolute; inset: -6%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 216, 140, .28), transparent 72%);
  opacity: 0; transition: opacity .5s ease;
  animation: win-hint 7s ease-in-out infinite; }
/* somebody is home: the lamp behind the curtains breathes now and then,
   so the windows can be found before they are hovered */
@keyframes win-hint { 0%, 72%, 100% { opacity: 0; } 82%, 90% { opacity: .22; } }
.yr-win:hover::after { opacity: 1; animation: win-flicker 1.6s ease-in-out infinite; }
@keyframes win-flicker { 0%, 100% { filter: brightness(1); } 42% { filter: brightness(1.35); }
  58% { filter: brightness(.85); } }
.yr-whisper { position: absolute; left: 104%; top: 30%; width: max-content; max-width: 240px;
  font-family: var(--r-body); font-style: italic; font-size: 14px; color: #f0e6c8;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .9); opacity: 0; transform: translateX(-6px);
  transition: opacity .5s ease .15s, transform .5s ease .15s; pointer-events: none; }
.yr-win:hover .yr-whisper { opacity: 1; transform: translateX(0); }

/* ---- the fence post almanac ---- */
.yr-almanac { position: absolute; left: clamp(14px, 2.4vw, 44px); bottom: 21vh; z-index: 6;
  display: flex; align-items: flex-end; gap: 10px; }
.alm-plate { width: clamp(120px, 9.5vw, 172px); transform: rotate(-2deg);
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .6)); }
.alm-plain { display: block; width: clamp(120px, 9.5vw, 172px); aspect-ratio: 3 / 2;
  background: linear-gradient(180deg, #8a6f4a, #5a4632); border: 2px solid #3a2e22; border-radius: 3px; }
.alm-month { position: absolute; left: 0; width: clamp(120px, 9.5vw, 172px); text-align: center;
  bottom: 38%; transform: rotate(-2deg);
  font-family: var(--r-display); font-weight: 600; font-size: clamp(17px, 1.4vw, 24px);
  letter-spacing: .06em; color: #3a2c1a; }
.alm-thermo { position: relative; display: block; width: 9px; height: clamp(90px, 12vh, 130px);
  border: 2px solid rgba(243, 233, 210, .7); border-radius: 6px; background: rgba(16, 12, 6, .55);
  overflow: hidden; }
.alm-mercury { position: absolute; left: 0; right: 0; bottom: 0; height: var(--merc, 40%);
  background: linear-gradient(180deg, #d87c7c, var(--barn)); transition: height 1.4s ease; }

/* ---- the mail knows first ---- */
.yr-post { position: absolute; right: clamp(14px, 2.6vw, 48px); bottom: 20vh; z-index: 6; }
.yb-box { width: clamp(84px, 6.4vw, 124px); filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .6)); }
.yb-flag { position: absolute; left: 12%; top: 18%; width: 5px; height: 26%;
  background: var(--barn); border-radius: 2px; transform-origin: 50% 92%;
  transform: rotate(96deg); transition: transform .7s cubic-bezier(.3, 1.6, .4, 1); }
.yb-flag::after { content: ""; position: absolute; left: -2px; top: -2px; width: 12px; height: 9px;
  background: var(--barn); border-radius: 2px; }
.yb-flag.up { transform: rotate(0deg); }
.yb-postmark { position: absolute; right: -12%; top: -34%; width: 54px; height: 54px;
  border-radius: 50%; border: 2px solid rgba(243, 233, 210, .7); opacity: 0;
  background:
    repeating-linear-gradient(0deg, transparent 0 6px, rgba(243, 233, 210, .35) 6px 8px);
  transform: rotate(9deg) scale(1.4); }
.yb-postmark.stamped { animation: postmark .9s cubic-bezier(.2, .8, .3, 1) forwards; }
@keyframes postmark { 0% { opacity: 0; transform: rotate(9deg) scale(1.5); }
  35% { opacity: .9; transform: rotate(9deg) scale(.96); }
  60% { transform: rotate(9deg) scale(1.05); }
  100% { opacity: .85; transform: rotate(9deg) scale(1); } }

.yr-cue { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 7;
  font-family: var(--r-body); font-style: italic; font-size: 13px; color: rgba(232, 220, 188, .75);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .8); animation: ht-bob 3.4s ease-in-out infinite;
  transition: opacity .8s ease; }
.yr-cue.gone { opacity: 0; }
@keyframes ht-bob { 0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(7px); } }
.ht-wsp { position: absolute; z-index: 4; font-family: var(--r-body); font-style: italic;
  font-size: 13px; color: rgba(188, 174, 146, .55); pointer-events: none; }
.wsp-b { right: 5%; bottom: 14px; }
@media (max-width: 1400px) { .ht-wsp { display: none; } }

/* ================= the fence rail ================= */
.q-head { position: relative; z-index: 2; text-align: center; padding: 56px 24px 8px; }
.q-plate { font-family: var(--font-ui); font-size: 11px; letter-spacing: .34em;
  text-transform: uppercase; color: var(--hay); }
.q-note { font-family: var(--r-body); font-style: italic; font-size: clamp(15px, 1.2vw, 19px);
  color: var(--r-dim); margin-top: 10px; }
.rail { position: relative; padding: 10px 0 90px; overflow: hidden;
  border-top: 1px solid var(--r-hair); }
.rail-art { position: absolute; left: 0; right: 0; top: 40%; width: 100%; opacity: .5; }
.rail-row { position: relative; z-index: 2; display: flex; gap: clamp(20px, 2.6vw, 38px);
  flex-wrap: wrap; justify-content: center; max-width: 1480px; margin: 44px auto 0;
  padding: 0 clamp(20px, 4vw, 60px); }
.pin-card { position: relative; width: clamp(220px, 20vw, 300px); text-decoration: none;
  transform: rotate(var(--rr, 0deg)) translateY(16px); opacity: 0; transform-origin: 50% 0;
  transition: transform .9s cubic-bezier(.2, .7, .2, 1) var(--rd, 0ms), opacity .8s ease var(--rd, 0ms); }
.pin-card.sewn { transform: rotate(var(--rr, 0deg)) translateY(0); opacity: 1; }
.pin-card:hover { transform: rotate(0deg) translateY(-4px); transition-delay: 0ms; }
.pin { position: absolute; top: -12px; width: 11px; height: 26px; z-index: 3;
  background: linear-gradient(180deg, #b89860, #7d6540); border-radius: 3px 3px 1px 1px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, .5); }
.pin::after { content: ""; position: absolute; left: 50%; top: 12px; width: 1.5px; bottom: 2px;
  transform: translateX(-50%); background: rgba(38, 28, 16, .7); }
.pin-l { left: 14%; transform: rotate(-7deg); }
.pin-r { right: 14%; transform: rotate(7deg); }
.pin-img { display: block; width: 100%; aspect-ratio: 2 / 1; object-fit: cover;
  border: 6px solid var(--muslin); box-shadow: 0 26px 46px -22px rgba(0, 0, 0, .85);
  background: var(--r-bg2); }
.fr-bare { display: block; width: 100%; height: 100%;
  background: linear-gradient(155deg, #33291b, #221c14); }
.pin-title { display: block; text-align: center; padding: 12px 4px 0;
  font-family: var(--r-display); font-weight: 600; font-size: 18px; color: var(--cream); }
.pin-meta { display: block; text-align: center; padding-top: 3px;
  font-family: var(--font-ui); font-size: 9.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--r-dim); }
.rail-hung { margin-top: 60px; }
.rosette { position: absolute; right: -12px; top: -14px; z-index: 4; width: 34px; height: 34px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, var(--hay) 0 24%, var(--barn) 25% 58%, var(--barn-2) 59%);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .5); }
.rosette::before, .rosette::after { content: ""; position: absolute; top: 26px; left: 50%;
  width: 8px; height: 20px; background: var(--barn-2); z-index: -1; }
.rosette::before { transform: translateX(-90%) rotate(14deg); }
.rosette::after { transform: translateX(-10%) rotate(-14deg); }
.ht-empty { text-align: center; font-family: var(--r-body); font-style: italic;
  color: var(--r-dim); padding: 40px 24px 10px; }

/* ================= goodnight ================= */
.goodnight { position: relative; min-height: 64vh; display: flex; align-items: center;
  justify-content: center; text-align: center; overflow: hidden;
  background:
    radial-gradient(80% 90% at 50% 118%, rgba(227, 200, 119, .07), transparent 60%),
    linear-gradient(180deg, var(--r-bg), #191309); }
.gn-dog { position: absolute; right: 7%; bottom: 6%; width: clamp(130px, 10vw, 210px);
  filter: drop-shadow(0 14px 30px rgba(0, 0, 0, .6)); }
.gn-fireflies { position: absolute; inset: 0; pointer-events: none; }
.htf { position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: #ffe9a8; box-shadow: 0 0 9px 3px rgba(255, 227, 150, .5);
  opacity: 0; animation: htf-blink ease-in-out infinite; }
/* stirred fireflies: they lift out of the cursor's way and wink out */
.htf-stir { z-index: 5; pointer-events: none;
  animation: htf-stir var(--st, 1.2s) ease-out forwards; }
@keyframes htf-stir { 0% { opacity: 0; translate: 0 0; } 18% { opacity: .95; }
  100% { opacity: 0; translate: var(--sx, 20px) var(--sy, -50px); } }
.gn-copy { position: relative; z-index: 2; padding: 90px 24px; }
.gn-line { font-family: var(--r-display); font-weight: 600; font-size: clamp(38px, 4.4vw, 76px);
  color: var(--cream); }
.gn-sub { font-family: var(--r-body); font-style: italic; font-size: clamp(15px, 1.25vw, 19px);
  color: var(--r-dim); margin: 14px 0 6px; }
.po-ctas { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 26px;
  justify-content: center; }
.po-cta { font-family: var(--font-ui); font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  color: #2a2113; background: var(--hay); padding: 14px 24px; text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease; }
.po-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -12px rgba(227, 200, 119, .6); }
.gn-hall { font-family: var(--r-body); font-style: italic; font-size: 16px; color: var(--r-dim);
  text-decoration: none; border-bottom: 1px dashed rgba(188, 174, 146, .5); align-self: center; }
.gn-hall:hover { color: var(--cream); }

/* ================= the flat year: phones and reduced motion ================= */
/* the corner stands still at dusk and the ten moments read as a column */
.year.flat .yr-dark { display: none; }
.year.flat .yr-track { height: auto; }
.year.flat .yr-sky { position: static; height: auto; overflow: visible; display: flex;
  flex-direction: column; gap: 26px; padding-bottom: 40px; }
.year.flat .yr-base { position: relative; order: -2; display: block; width: 100%; height: auto; }
.year.flat .yr-titlecard { position: relative; order: -1; left: auto; top: auto;
  padding: 18px clamp(18px, 5vw, 44px) 0; }
.year.flat .yr-name span { opacity: 1; transform: none; clip-path: none; animation: none; }
.year.flat .yr-moment { position: relative; opacity: 1; pointer-events: auto;
  padding: 0 clamp(12px, 3vw, 34px); }
.year.flat .yr-art { position: relative; display: block; width: 100%; height: auto;
  aspect-ratio: 2 / 1; transform: none; border: 3px solid var(--muslin); }
.year.flat .ybs { position: relative; opacity: 1; transform: none; pointer-events: auto;
  background: rgba(16, 12, 6, .6); flex-wrap: wrap; align-items: center;
  padding: 16px clamp(12px, 2vw, 24px); }
.year.flat .wx, .year.flat .yr-bolt, .year.flat .yr-win, .year.flat .yr-almanac,
.year.flat .yr-post, .year.flat .yr-cue { display: none; }
/* the year runs on phones now: the board sits low and compact, the almanac
   and the mailbox ride the top corners at pocket size */
@media (max-width: 719px) {
  .ybs { flex-direction: column; align-items: flex-start; gap: 8px;
    padding: 34px 14px 12px; }
  .ybs-stamp { position: absolute; right: 12px; bottom: calc(100% - 26px);
    width: 54px; height: 54px; }
  .ybs-stamp b { font-size: 16px; }
  .ybs-title { font-size: 23px; padding-right: 60px; }
  .ybs-hand { font-size: 13px; margin-top: 3px; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .ybs-more { margin-top: 5px; }
  .ybs-crew { justify-content: flex-start; max-width: none; gap: 6px; }
  .crew-chip { padding: 7px 10px; font-size: 9.5px; }
  .yr-almanac { left: 8px; top: 14px; bottom: auto; transform: scale(.68);
    transform-origin: top left; }
  .yr-post { right: 8px; top: 30px; bottom: auto; transform: scale(.66);
    transform-origin: top right; }
  .gn-dog { width: 110px; }
}
@media (prefers-reduced-motion: reduce) {
  .yr-cricket, .yr-cue, .yb-flag, .win-flicker { animation: none; }
  .yr-win::after { animation: none; }
  .wff, .wrn, .wlv, .wsn, .wsm, .htf { display: none; }
  .pin-card { opacity: 1; transform: rotate(var(--rr, 0deg)); transition: none; }
}