/* Miradea C, "A year outside". One terrace for the whole page; the season (scroll or the year dial)
   rewrites the tokens below on :root, so every surface regrades together. */
:root {
  --g: #14201B; --ink: #EEE9DF; --soft: #BFC3B4; --acc: #E0A040; --acc-ink: #1A1408;
  --sc-canvas: var(--g); --sc-surface: var(--g); --sc-ink: var(--ink); --sc-ink-soft: var(--soft);
  --sc-accent: var(--acc); --sc-accent-ink: var(--acc-ink);
  --sc-font-display: "Cormorant Garamond", Georgia, serif;
  --sc-font-text: "Commissioner", system-ui, sans-serif;
  --line: color-mix(in oklab, var(--ink) 18%, transparent);
  --chat-bg: color-mix(in oklab, var(--g) 96%, var(--ink));
  --chat-title-font: "Cormorant Garamond", Georgia, serif;
  --chat-radius: 6px; --chat-launch-radius: 6px;
  --gm: 1; --ga: 0; --gw: 0; --wet: 0; --sun: 0;
  --pz: 1; --px: 0px; --py: 0px; --fz: 1; --fx: 0px; --fy: 0px; --pine-y: 0px; --pine-x: 0px;
  --set-o: 1; --set-y: 0px; --rock-o: 1; --rock-y: 0px; --furn-filter: none;
}
body.yr { background: var(--g); color: var(--ink); font-size: 1.0625rem; }
.yr-skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--acc); color: var(--acc-ink); padding: 0.6rem 1rem; border-radius: 6px; }
.yr-skip:focus { top: 16px; }

/* ------------------------------------------------------------------ the terrace */
.yr-scene { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--g); pointer-events: none; }
.yr-cam { position: absolute; inset: 0; }
.yr-box { position: absolute; left: 50%; bottom: 0; width: max(100vw, 175vh); aspect-ratio: 1344 / 768; translate: calc(-1 * var(--focus, 50%)) 0; }
.yr-plate { position: absolute; inset: 0; opacity: 0; transform: translate(var(--px), var(--py)) scale(var(--pz)); transform-origin: 46% 78%; will-change: opacity, transform; }
.yr-plate img { width: 100%; height: 100%; object-fit: cover; max-width: none; }
.yr-plate[data-plate="may"] { opacity: 1; }
/* May evening is graded from the daylight plate: lower sun, cooler sky, warm light from the house */
.yr-plate[data-plate="may"] img { filter: brightness(0.5) contrast(1.08) saturate(0.82) sepia(0.12); }
/* the other seasons are graded from the same deck, so it is always the same place */
.yr-plate[data-plate="rain"] img { filter: brightness(0.56) saturate(0.45) contrast(0.92) hue-rotate(8deg); }
.yr-plate[data-plate="autumn"] img { filter: brightness(0.97) sepia(0.42) saturate(1.25) hue-rotate(4deg) contrast(1.06); }
.yr-plate[data-plate="winter"] img { filter: grayscale(0.6) brightness(1.16) contrast(0.78); }
.yr-mist, .yr-frost, .yr-snow { position: absolute; inset: 0; z-index: 3; pointer-events: none; transform: translate(var(--px), var(--py)) scale(var(--pz)); transform-origin: 46% 78%; }
.yr-mist { opacity: var(--wet); background: linear-gradient(to bottom, rgb(150 165 172 / 0.55) 0%, rgb(120 136 142 / 0.42) 40%, rgb(70 84 88 / 0.12) 62%, transparent 70%); }
.yr-frost { opacity: var(--ga); background: linear-gradient(to top, rgb(214 228 240 / 0.55) 0%, rgb(214 228 240 / 0.3) 26%, rgb(214 228 240 / 0.1) 36%, transparent 38%); mix-blend-mode: screen; }
.yr-snow { opacity: var(--gw); background:
    linear-gradient(to bottom, rgb(232 238 242 / 0.5) 0%, rgb(232 238 242 / 0.25) 50%, transparent 54%),
    linear-gradient(to top, rgb(247 249 251 / 0.95) 0%, rgb(244 247 250 / 0.9) 28%, rgb(240 245 248 / 0.8) 35%, rgb(236 242 246 / 0.55) 36.5%, transparent 38%); }
.yr-dusk { position: absolute; inset: 0; z-index: 3; opacity: var(--gm); transform: translate(var(--px), var(--py)) scale(var(--pz)); transform-origin: 46% 78%; pointer-events: none;
  background: linear-gradient(to bottom, rgb(38 40 78 / 0.62) 0%, rgb(58 50 92 / 0.38) 26%, rgb(90 64 70 / 0.18) 50%, rgb(14 18 22 / 0.28) 66%, rgb(8 12 12 / 0.42) 100%); mix-blend-mode: multiply; }
.yr-glow { position: absolute; inset: 0; z-index: 3; transform: translate(var(--px), var(--py)) scale(var(--pz)); transform-origin: 46% 78%;
  background:
    radial-gradient(42% 46% at 6% 72%, color-mix(in srgb, #ffb867 calc(var(--gm) * 55%), transparent), transparent 70%),
    radial-gradient(30% 22% at 50% 66%, color-mix(in srgb, #ffcf8a calc(var(--gm) * 22%), transparent), transparent 75%),
    radial-gradient(50% 60% at 96% 40%, color-mix(in srgb, #ffcf7a calc(var(--ga) * 34%), transparent), transparent 72%),
    linear-gradient(to bottom, color-mix(in srgb, #dfeaf4 calc(var(--gw) * 22%), transparent), transparent 60%);
  mix-blend-mode: screen; }
.yr-furn { position: absolute; inset: 0; z-index: 4; transform: translate(var(--fx), var(--fy)) scale(var(--fz)); transform-origin: 46% 82%; filter: var(--furn-filter); will-change: transform, filter; }
.yr-obj { position: absolute; }
.yr-obj img { width: 100%; height: auto; max-width: none; position: relative; }
.yr-obj--set { left: var(--set-left, 21%); bottom: var(--set-bottom, 7%); width: var(--set-w, 45%); opacity: var(--set-o); translate: 0 var(--set-y); }
.yr-obj--rocker { left: var(--rock-left, 69%); bottom: var(--rock-bottom, 2.5%); width: var(--rock-w, 18%); opacity: var(--rock-o); translate: 0 var(--rock-y); }
.yr-shadow { position: absolute; left: 6%; right: 6%; bottom: -3%; height: 16%; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(8 10 6 / 0.55), rgb(8 10 6 / 0.22) 55%, transparent); filter: blur(6px); }
.yr-wet { position: absolute; z-index: 5; inset: 60% 0 0 0; opacity: var(--wet); background: linear-gradient(to bottom, transparent, rgb(20 30 32 / 0.35) 40%, rgb(200 215 220 / 0.10) 70%, rgb(10 16 18 / 0.35)); mix-blend-mode: multiply; }
.yr-air { position: absolute; inset: 0; width: 100%; height: 100%; }
.yr-pine { position: absolute; top: -9vh; right: -6vw; width: min(58vw, 860px); max-width: none; transform: translate(var(--pine-x), var(--pine-y)) rotate(-8deg); filter: blur(2px) brightness(0.78) saturate(0.9); opacity: var(--pine-o, 1); will-change: transform; -webkit-mask-image: linear-gradient(to right, transparent 4%, #000 34%); mask-image: linear-gradient(to right, transparent 4%, #000 34%); }
.yr-sun { position: absolute; inset: 0; opacity: var(--sun); background: radial-gradient(60% 70% at 18% -6%, rgb(255 246 214 / 0.85), rgb(255 230 170 / 0.25) 45%, transparent 70%); mix-blend-mode: screen; }

/* ------------------------------------------------------------------ chrome */
.yr-bar { position: fixed; z-index: 60; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 18px clamp(16px, 3.4vw, 44px); pointer-events: none; }
.yr-bar > * { pointer-events: auto; }
.yr-bar { transition: background-color 200ms, box-shadow 200ms; }
body.yr-solidbar .yr-bar { background: color-mix(in oklab, var(--g) 96%, transparent); box-shadow: 0 1px 0 var(--line); }
.yr-mark { display: block; width: 138px; height: 26px; background: var(--ink); -webkit-mask: url(../../shared/logo.png) no-repeat left center / contain; mask: url(../../shared/logo.png) no-repeat left center / contain; }
.yr-bar__end { display: flex; align-items: center; gap: 14px; }
.langnav { display: flex; gap: 2px; padding: 0 4px; border-radius: 6px; background: color-mix(in oklab, var(--g) 72%, transparent); font: 600 0.78rem/1 var(--sc-font-text); letter-spacing: 0.08em; }
.langnav a, .langnav span { padding: 9px 7px; border-radius: 4px; color: var(--ink); text-decoration: none; }
.langnav a { opacity: 0.66; }
.langnav a:hover { opacity: 1; }
.langnav span { border-bottom: 1.5px solid var(--acc); border-radius: 0; }

.yr-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 1.4rem; border: 0; border-radius: 6px; background: var(--acc); color: var(--acc-ink); font: 600 0.98rem/1 var(--sc-font-text); letter-spacing: 0.01em; text-decoration: none; white-space: nowrap; cursor: pointer;
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.25) inset, 0 8px 20px -10px rgb(0 0 0 / 0.6); transition: transform 140ms var(--sc-ease-out), filter 140ms; }
.yr-btn:active { transform: translateY(1px) scale(0.98); }
@media (hover: hover) and (pointer: fine) { .yr-btn:hover { filter: brightness(1.07); } }
.yr-btn--bar { min-height: 40px; padding: 0 1rem; font-size: 0.88rem; }
.yr-link { background: none; border: 0; padding: 0.3rem 0; color: var(--ink); font: 500 0.95rem/1.3 var(--sc-font-text); text-decoration: underline; text-decoration-color: var(--acc); text-decoration-thickness: 1.5px; text-underline-offset: 0.3em; cursor: pointer; }
.yr-link:hover { color: var(--acc); }

/* ------------------------------------------------------------------ type */
.yr-h1, .yr-h2, .yr-month { font-family: var(--sc-font-display); font-weight: 500; color: var(--ink); margin: 0; text-wrap: balance; }
.yr-h1 { font-size: clamp(2.8rem, min(1.6rem + 5vw, 10.5vh), 7rem); line-height: 0.92; letter-spacing: -0.015em; }
.yr-h2 { font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.6rem); line-height: 1; letter-spacing: -0.01em; }
.yr-h2--big { font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.8rem); }
.yr-month { font-size: clamp(4rem, 2rem + 9vw, 10rem); line-height: 0.9; font-style: italic; letter-spacing: -0.02em; }
.yr-lede { font-size: clamp(1.08rem, 1rem + 0.4vw, 1.3rem); line-height: 1.5; max-width: 34ch; margin: 1.4rem 0 0; color: var(--ink); text-wrap: pretty; }
.yr-body { max-width: 38ch; margin: 1.1rem 0 0; line-height: 1.62; color: var(--ink); opacity: 0.92; text-wrap: pretty; }
.yr-body--c { margin-inline: auto; text-align: center; }
.yr-note { font-size: 0.82rem; color: var(--soft); margin: 0.6rem 0 0; }
.yr-price { font: 500 1.6rem/1.2 var(--sc-font-display); margin: 1.4rem 0 0.5rem; }
.yr-price s { font: 400 0.95rem/1 var(--sc-font-text); color: var(--soft); margin-left: 0.5rem; }

/* ------------------------------------------------------------------ acts */
main { position: relative; z-index: 2; }
.yr-act { position: relative; }
.yr-scrim, .yr-colscrim { position: absolute; pointer-events: none; z-index: 0; }
.yr-copy { position: absolute; z-index: 2; }
.yr-scrim--hero { inset: 0; background: linear-gradient(170deg, color-mix(in oklab, var(--g) 84%, transparent) 0%, color-mix(in oklab, var(--g) 52%, transparent) 30%, transparent 56%); }
.yr-copy--hero { left: clamp(16px, 6vw, 96px); top: clamp(88px, 15vh, 160px); max-width: 52rem; }
.yr-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.6rem; margin-top: 2rem; }
.yr-beat { position: absolute; z-index: 2; right: clamp(16px, 6vw, 96px); bottom: 18vh; max-width: 21ch; margin: 0; font: italic 500 clamp(1.5rem, 1.1rem + 1.3vw, 2.3rem)/1.15 var(--sc-font-display); text-align: right; color: var(--ink); text-shadow: 0 2px 18px color-mix(in oklab, var(--g) 80%, transparent); }

.yr-flow--may { min-height: 100vh; display: flex; align-items: flex-start; padding: 4vh 0 18vh; }
.yr-colscrim--left { inset: 0 auto 0 0; width: min(62%, 52rem); background: linear-gradient(to right, color-mix(in oklab, var(--g) 90%, transparent) 0%, color-mix(in oklab, var(--g) 74%, transparent) 55%, transparent); }
.yr-wrap { position: relative; z-index: 1; width: 100%; max-width: 84rem; margin: 0 auto; padding-inline: clamp(16px, 6vw, 96px); }
.yr-text { max-width: 33rem; }
.yr-spec { margin: 1.6rem 0 0; padding: 0; border-top: 1px solid var(--line); }
.yr-spec div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.62rem 0; border-bottom: 1px solid var(--line); font-size: 0.95rem; }
.yr-spec dt { color: var(--soft); }
.yr-spec dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }

.yr-scrim--right { inset: 0 0 0 auto; width: min(64%, 56rem); background: linear-gradient(to left, color-mix(in oklab, var(--g) 88%, transparent), color-mix(in oklab, var(--g) 66%, transparent) 55%, transparent); }
.yr-scrim--left { inset: 0 auto 0 0; width: min(64%, 56rem); background: linear-gradient(to right, color-mix(in oklab, var(--g) 88%, transparent), color-mix(in oklab, var(--g) 66%, transparent) 55%, transparent); }
.yr-copy--sky { top: clamp(84px, 13vh, 140px); max-width: 34rem; }
.yr-copy--right { right: clamp(16px, 6vw, 96px); }
.yr-copy--left { left: clamp(16px, 6vw, 96px); }
.yr-scrim--sky { inset: 0 0 auto 0; height: 62%; background: linear-gradient(to bottom, color-mix(in oklab, var(--g) 80%, transparent) 0%, color-mix(in oklab, var(--g) 58%, transparent) 45%, transparent); }
.yr-scrim--sky-r { background: radial-gradient(ellipse 46% 52% at 74% 20%, color-mix(in oklab, var(--g) 92%, transparent) 0%, color-mix(in oklab, var(--g) 80%, transparent) 50%, transparent 100%), linear-gradient(to bottom, color-mix(in oklab, var(--g) 50%, transparent), transparent 60%); }
.yr-scrim--sky-l { background: radial-gradient(ellipse 46% 52% at 26% 20%, color-mix(in oklab, var(--g) 92%, transparent) 0%, color-mix(in oklab, var(--g) 80%, transparent) 50%, transparent 100%), linear-gradient(to bottom, color-mix(in oklab, var(--g) 50%, transparent), transparent 60%); }
.yr-swap { display: grid; }
.yr-swap > * { grid-area: 1 / 1; }

.yr-rainsheet { position: absolute; inset: 0; z-index: 0; background:
  repeating-linear-gradient(104deg, transparent 0 22px, rgb(225 235 240 / 0.06) 22px 23px, transparent 23px 47px),
  linear-gradient(to bottom, rgb(30 42 46 / 0.32), rgb(16 24 26 / 0.12)); }

.yr-oct [data-sc-stage] { display: flex; align-items: center; }
.yr-rail { gap: clamp(14px, 1.6vw, 24px); padding: 0 clamp(16px, 6vw, 96px); align-items: stretch; }
.yr-rail > * { flex: none; }
.yr-rail__lead { width: min(30rem, 82vw); align-self: center; padding: 1.8rem 2rem 2rem; background: var(--g); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 18px 40px -24px rgb(0 0 0 / 0.55); }
.yr-rail__lead .yr-body { opacity: 1; }
.yr-mat { width: clamp(15rem, 22vw, 19rem); background: var(--g); border: 1px solid var(--line); border-radius: 6px; padding: 1.4rem 1.4rem 1.6rem; box-shadow: 0 18px 40px -24px rgb(0 0 0 / 0.55); }
.yr-mat img { width: 100%; height: 11rem; object-fit: contain; margin-bottom: 1.2rem; filter: drop-shadow(0 10px 12px rgb(0 0 0 / 0.25)); }
.yr-mat h3 { margin: 0; font: 600 1.6rem/1 var(--sc-font-display); }
.yr-mat p { margin: 0.7rem 0 0; font-size: 0.92rem; line-height: 1.55; color: var(--soft); }
.yr-rail__end { width: min(22rem, 76vw); align-self: center; padding: 1.6rem; background: var(--g); border-radius: 6px; border: 1px solid var(--line); }
.yr-rail__end .yr-body { margin-top: 0; opacity: 1; }

.yr-peak [data-sc-stage] { display: grid; place-items: center; }
.yr-scrim--peak { inset: 0; background: radial-gradient(56% 46% at 50% 44%, color-mix(in oklab, var(--g) 70%, transparent), transparent 75%); }
.yr-peak__jan, .yr-peak__may, .yr-peak__mid { position: absolute; z-index: 2; left: 50%; translate: -50% 0; width: min(46rem, 92vw); text-align: center; }
.yr-peak__jan { top: 24vh; }
.yr-peak__mid { top: 42vh; font: italic 500 clamp(1.6rem, 1.1rem + 1.6vw, 2.6rem)/1.2 var(--sc-font-display); opacity: 0; margin: 0; max-width: 28ch; }
.yr-peak__may { top: 13vh; }

.yr-sets { background: var(--g); padding: clamp(5rem, 10vw, 9rem) 0 clamp(4rem, 8vw, 7rem); }
.yr-sets__head { max-width: 40rem; }
.yr-setlist { list-style: none; margin: 3.2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(12, 1fr); gap: 2.6rem 2rem; }
.yr-set { grid-column: span 4; display: flex; flex-direction: column; }
.yr-set:nth-child(1) { grid-column: span 7; } .yr-set:nth-child(2) { grid-column: span 5; }
.yr-set img { width: 100%; height: clamp(11rem, 16vw, 15rem); object-fit: contain; object-position: left bottom; filter: drop-shadow(0 14px 14px rgb(0 0 0 / 0.28)); }
.yr-set:nth-child(-n+2) img { height: clamp(13rem, 22vw, 20rem); }
.yr-set h3 { margin: 1.1rem 0 0; font: 600 1.7rem/1.05 var(--sc-font-display); }
.yr-set p { margin: 0.35rem 0 0; color: var(--soft); font-size: 0.95rem; }
.yr-set .yr-set__price { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.yr-set__act { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; align-items: baseline; margin-top: 0.6rem; }
.yr-set__act a { color: var(--soft); font-size: 0.9rem; }
.yr-more { margin: 2.6rem 0 0; }
.yr-more a { color: var(--ink); text-decoration-color: var(--acc); font-weight: 500; }
.yr-trade { margin-top: clamp(5rem, 10vw, 8rem); padding-top: clamp(3rem, 6vw, 5rem); border-top: 1px solid var(--line); display: grid; grid-template-columns: 1.1fr 1fr; gap: 1.2rem 4rem; }
.yr-trade > .yr-h2, .yr-trade > .yr-body { grid-column: 1; }
.yr-years { grid-column: 2; grid-row: 1 / span 2; align-self: start; display: flex; align-items: baseline; gap: 1rem; }
.yr-years__n { font: 500 clamp(5rem, 3rem + 7vw, 9rem)/0.85 var(--sc-font-display); color: var(--acc); font-variant-numeric: lining-nums; }
.yr-years__l { max-width: 14ch; color: var(--soft); }
.yr-trade__list { grid-column: 1 / -1; list-style: none; padding: 0; margin: 2rem 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.yr-trade__list li { border-top: 1px solid var(--line); padding-top: 1.2rem; }
.yr-trade__list h3 { margin: 0; font: 600 1.5rem/1.1 var(--sc-font-display); }
.yr-trade__list p { margin: 0.6rem 0 0; color: var(--soft); font-size: 0.95rem; line-height: 1.6; }
.yr-cats { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 2.4rem; }
.yr-cats a { padding: 0.65rem 1rem; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); text-decoration: none; font-size: 0.92rem; }
.yr-cats a:hover { border-color: var(--acc); }

.yr-scrim--close { inset: 0; background: linear-gradient(to left, color-mix(in oklab, var(--g) 70%, transparent), transparent 60%), linear-gradient(to top, color-mix(in oklab, var(--g) 80%, transparent), transparent 22%); }
.yr-card { position: absolute; z-index: 2; right: clamp(16px, 5vw, 80px); top: max(76px, calc(50vh - 380px)); width: min(34rem, 46vw); padding: 1.6rem 1.9rem 1.3rem; background: color-mix(in oklab, var(--g) 95%, transparent); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.7), var(--sc-edge); }
.yr-card .yr-h2 { font-size: clamp(1.9rem, 1.4rem + 1.3vw, 2.6rem); }
.yr-card .yr-body { margin-top: 0.6rem; max-width: none; font-size: 0.94rem; line-height: 1.5; }
.yr-form { margin-top: 1rem; display: grid; gap: 0.65rem; }
.yr-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.yr-form label { display: grid; gap: 0.3rem; font-size: 0.8rem; font-weight: 500; color: var(--soft); letter-spacing: 0.01em; }
.yr-form input, .yr-form select, .yr-form textarea { width: 100%; min-height: 44px; padding: 0.55rem 0.7rem; border: 1px solid var(--line); border-radius: 5px; background: color-mix(in oklab, var(--g) 88%, var(--ink)); color: var(--ink); font-size: 0.97rem; }
.yr-form textarea { resize: vertical; min-height: 44px; }
.yr-form select option { background: var(--g); color: var(--ink); }
.yr-form :is(input, select, textarea):focus-visible { outline: 2px solid var(--acc); outline-offset: 1px; }
.yr-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.yr-submit { display: flex; align-items: center; gap: 1rem; margin-top: 0.3rem; }
.yr-consent { margin: 0; font-size: 0.72rem; line-height: 1.45; color: var(--soft); }
.yr-consent a { color: inherit; }
.yr-status { margin: 0; min-height: 1.2em; font-size: 0.9rem; }
.yr-status.is-ok { color: var(--ink); }
.yr-direct { margin: 0.4rem 0 0; font-size: 0.86rem; color: var(--soft); }
.yr-direct a { color: var(--ink); }
.yr-foot { position: absolute; z-index: 2; left: clamp(16px, 5vw, 80px); right: clamp(16px, 5vw, 80px); bottom: 14px; right: calc(min(34rem, 46vw) + clamp(16px, 5vw, 80px) + 2rem); display: flex; flex-wrap: wrap; gap: 0.3rem 1.4rem; padding-left: 230px; font-size: 0.74rem; color: var(--soft); }
.yr-foot a { color: var(--ink); }
.yr-foot__fine { flex-basis: 100%; opacity: 0.85; }

/* ------------------------------------------------------------------ the year dial */
.yr-dial { position: fixed; z-index: 70; left: clamp(12px, 2.4vw, 32px); bottom: clamp(12px, 2.4vw, 28px); display: flex; align-items: center; gap: 12px; }
.yr-dial__ring { width: 124px; height: 124px; border-radius: 50%; background: color-mix(in oklab, var(--g) 86%, transparent); box-shadow: 0 14px 30px -14px rgb(0 0 0 / 0.6), inset 0 0 0 1px var(--line); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.yr-dial__ring:active { cursor: grabbing; }
.yr-dial__ring:focus-visible { outline: 2px solid var(--acc); outline-offset: 4px; border-radius: 50%; }
.yr-dial svg { width: 100%; height: 100%; overflow: visible; }
.yr-dial__track { fill: none; stroke: var(--line); stroke-width: 1; }
.yr-dial__lbl { fill: var(--soft); font: 600 9.5px/1 var(--sc-font-text); text-anchor: middle; dominant-baseline: central; cursor: pointer; }
.yr-dial__lbl.is-on { fill: var(--acc); }
.yr-dial__arc { fill: none; stroke: var(--acc); stroke-width: 2.5; stroke-linecap: round; }
.yr-dial__needle line { stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; }
.yr-dial__needle circle { fill: var(--acc); stroke: var(--g); stroke-width: 2; }
.yr-dial__hub { fill: var(--ink); }
.yr-dial.is-quiet .yr-dial__read { opacity: 0; }
.yr-dial.is-quiet .yr-dial__ring { background: var(--g); }
.yr-dial__read { transition: opacity 200ms; display: grid; gap: 3px; padding: 7px 11px; border-radius: 6px; background: color-mix(in oklab, var(--g) 80%, transparent); }
.yr-dial__month { font: italic 600 1.35rem/1 var(--sc-font-display); color: var(--ink); }
.yr-dial__hint { font-size: 0.72rem; color: var(--soft); letter-spacing: 0.02em; }

/* ------------------------------------------------------------------ phones */
@media (max-width: 860px) {
  .yr-box { --focus: 44%; width: 240vw; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 26%); mask-image: linear-gradient(to bottom, transparent 0, #000 26%); }
  .yr-pine { width: 78vw; top: -4vh; right: -18vw; }
  .yr-bar { padding: 12px 16px; }
  .yr-mark { width: 112px; height: 22px; }
  .yr-btn--bar { display: none; }
  .yr-copy--hero { left: 16px; right: 16px; top: 82px; }
  .yr-scrim--hero { background: linear-gradient(to bottom, color-mix(in oklab, var(--g) 88%, transparent) 0%, color-mix(in oklab, var(--g) 66%, transparent) 46%, transparent 72%); }
  .yr-h1 { font-size: clamp(2.7rem, 1.6rem + 6vw, 3.6rem); }
  .yr-lede { font-size: 1.02rem; margin-top: 1rem; }
  .yr-actions { margin-top: 1.3rem; }
  .yr-beat { left: 16px; right: 16px; bottom: 23vh; max-width: none; text-align: left; font-size: 1.45rem; }
  .yr-flow--may { min-height: auto; padding: 0 0 12vh; align-items: flex-start; }
  .yr-colscrim--left { width: 100%; background: linear-gradient(to bottom, color-mix(in oklab, var(--g) 90%, transparent) 0%, color-mix(in oklab, var(--g) 86%, transparent) 70%, transparent); }
  .yr-scrim--right, .yr-scrim--left { inset: 0; width: auto; background: linear-gradient(to bottom, color-mix(in oklab, var(--g) 90%, transparent) 0%, color-mix(in oklab, var(--g) 70%, transparent) 50%, transparent 76%); }
  .yr-copy--right, .yr-copy--left { left: 16px; right: 16px; top: 84px; max-width: none; }
  .yr-scrim--sky, .yr-scrim--sky-r, .yr-scrim--sky-l { height: 74%; background: linear-gradient(to bottom, color-mix(in oklab, var(--g) 92%, transparent) 0%, color-mix(in oklab, var(--g) 84%, transparent) 55%, transparent); }
  .yr-mat { width: 74vw; }
  .yr-mat img { height: 8.5rem; }
  .yr-rail__lead { padding-right: 0.5rem; }
  .yr-peak__jan { top: 16vh; } .yr-peak__may { top: 12vh; }
  .yr-setlist { grid-template-columns: 1fr; gap: 2.4rem; }
  .yr-set, .yr-set:nth-child(1), .yr-set:nth-child(2) { grid-column: auto; }
  .yr-set img, .yr-set:nth-child(-n+2) img { height: 12rem; }
  .yr-trade { grid-template-columns: 1fr; }
  .yr-years { grid-column: 1; grid-row: auto; }
  .yr-trade__list { grid-template-columns: 1fr; gap: 1.4rem; }
  .yr-close { padding: 22vh 0 0; }
  .yr-close [data-sc-stage] { display: flex; flex-direction: column; justify-content: flex-end; min-height: 100svh; }
  .yr-scrim--close { background: linear-gradient(to top, color-mix(in oklab, var(--g) 94%, transparent) 0%, color-mix(in oklab, var(--g) 86%, transparent) 70%, transparent); }
  .yr-card { position: relative; right: auto; top: auto; translate: none; width: auto; margin: 0 12px; padding: 1.5rem 1.2rem 1.2rem; }
  .yr-row { grid-template-columns: 1fr; }
  .yr-submit { flex-direction: column; align-items: stretch; }
  .yr-foot { position: relative; left: auto; right: auto; bottom: auto; padding: 1.4rem 16px 7.5rem; }
  .yr-dial { left: 10px; bottom: 10px; gap: 8px; }
  .yr-dial__ring { width: 84px; height: 84px; }
  .yr-dial__lbl { font-size: 11px; }
  .yr-dial__read { padding: 5px 9px; }
  .yr-dial__month { font-size: 1.15rem; }
  .yr-dial__hint { display: none; }
}
@media (max-width: 380px) { .langnav a, .langnav span { padding: 9px 5px; } }

@media (prefers-reduced-motion: reduce) {
  .yr-air { display: none; }
  .yr-plate, .yr-furn, .yr-pine { will-change: auto; }
}

/* ---- phone pass (owner: "very mobile friendly"): 16px fields so iOS never zooms, 44px tap areas, no tiny text ---- */
@media (max-width: 760px) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size: 16px !important; }
  input[type=range] { min-height: 44px; }
  .langnav a, .langnav span { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .yr-mark { min-height: 44px; background-size: auto; -webkit-mask-size: 112px auto; mask-size: 112px auto; }
  .yr-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0.5rem 0; }
  .yr-note, .yr-direct { font-size: 14px; }
  .yr-consent { font-size: 13.5px; }
  label { font-size: max(14px, 1em); }
}

@media (max-width: 760px) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]), select { min-height: 44px; }
  :is(a[href^="tel:"], a[href^="mailto:"], a[href*="t.me/"], a[href*="vk.com"], a[href*="instagram"], a[href*="max.ru"], a[href*="miradea.pro/"], a[href*="greengard.su"]):not(p a):not(li a) { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 760px) {
  .yr-set__act a { display: inline-flex; align-items: center; min-height: 44px; }
  :is(a[href*="t.me/"], a[href*="vk.com"], a[href*="instagram"], a[href*="max.ru"]) { min-width: 44px; justify-content: center; }
  .yr-form label { font-size: 14px; }
  .yr-consent { font-size: 14px; }
}

/* ---- phone pass 2: the year dial becomes a month strip; nothing fixed sits on copy or the form ---- */
.yr-strip { display: none; }
@media (max-width: 760px) {
  .yr-dial { left: 10px; right: 80px; bottom: max(10px, env(safe-area-inset-bottom)); gap: 0; }
  .yr-dial__ring { width: 100%; height: 52px; border-radius: 10px; touch-action: pan-y; background: color-mix(in oklab, var(--g) 92%, transparent); }
  .yr-dial__ring:focus-visible { border-radius: 10px; }
  .yr-dial__ring svg, .yr-dial__read { display: none; }
  .yr-form textarea { min-height: 84px; }
  .yr-strip { display: flex; align-items: center; gap: 8px; height: 100%; padding: 0 12px; }
  .yr-strip__name { flex: none; min-width: 5.4em; font: italic 600 1.08rem/1 var(--sc-font-display); color: var(--ink); white-space: nowrap; }
  .yr-strip__cells { flex: 1; display: grid; grid-template-columns: repeat(12, 1fr); align-items: center; height: 44px; }
  .yr-strip__cells span { text-align: center; font: 600 13px/28px var(--sc-font-text); color: var(--soft); border-radius: 6px; }
  .yr-strip__cells span.is-on { background: var(--acc); color: var(--acc-ink); }
  .yr-dial.is-quiet .yr-dial__ring { background: var(--g); }
  body.yr-typing .yr-dial, body.yr-typing .mchat:not(.is-open) { visibility: hidden; }
  .yr-dial { transition: transform 240ms var(--sc-ease-out), opacity 240ms; }
  .yr-dial.is-away { transform: translateY(calc(100% + 28px)); opacity: 0; pointer-events: none; }
  /* the floating assistant button steps aside with it while you read; every reading block has its own inline Ask link */
  .mchat__launch { transition: transform 240ms var(--sc-ease-out), opacity 240ms; }
  body.yr-reading .mchat:not(.is-open) .mchat__launch { transform: translateY(calc(100% + 28px)); opacity: 0; pointer-events: none; }
  /* room under the last lines of every reading block so the strip never sits on them at rest */
  .yr-sets { padding-bottom: 96px; }
  .yr-beat { bottom: max(23vh, 96px); }
}
@media (max-width: 380px) { .yr-strip__name { min-width: 4.8em; font-size: 1rem; } .yr-strip__cells span { font-size: 12.5px; } }