/* LUMINARTUS — «Сегодня» (variant A): video sheet with head + photo bubbles, story, social buttons.
   Everything is scoped under .td so it never touches the rest of the site. */
.td {
  --paper: #fbf9f5;
  --paper-2: #f3eee5;
  --paper-3: #e9e2d5;
  --ink: #1b201c;
  --ink-muted: rgba(27, 32, 28, 0.64);
  --ink-faint: rgba(27, 32, 28, 0.36);
  --gold-deep: #8a6a2c;
  --line: rgba(27, 32, 28, 0.12);
  color: var(--ink);
}
.td button { font: inherit; color: inherit; }
.td .section-label {
  margin: 0; font: 500 12px/1 var(--f-mono); letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--gold-deep);
}
.td .btn { background: var(--forest); color: var(--paper); }
.td .btn:hover { background: #2c3f33; }

/* «твой текст» — placeholder lines until Artem writes the text */
.td .ghost { margin: 0 0 1.2em; padding: 2px 0 2px 16px; border-left: 2px dashed rgba(138, 106, 44, 0.45); }
.td .ghost__hint { margin: 0 0 12px; font: italic 500 17px/1.35 var(--f-serif); color: var(--ink-muted); }
.td .ghost__hint::before {
  content: "твой текст"; display: block; margin-bottom: 6px;
  font: 500 10px/1 var(--f-mono); font-style: normal; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--gold-deep);
}
.td .ghost i { display: block; height: 9px; margin: 0 0 9px; border-radius: 9px; background: var(--paper-3); }
.td .ghost i:last-child { margin-bottom: 0; }

/* ---------- Video sheet: one sticky video behind the head and the gallery ---------- */
/* clip-path keeps the sticky layer inside the sheet without breaking position: sticky */
.td .vwrap { position: relative; clip-path: inset(0); }
.td .vwrap__bg {
  position: sticky; top: 0; z-index: 0; height: 100vh; margin-bottom: -100vh;
  overflow: hidden; pointer-events: none; background: #dfe6d3;
}
@supports (height: 100svh) { .td .vwrap__bg { height: 100svh; margin-bottom: -100svh; } }
.td .vwrap > section { position: relative; z-index: 1; }
.td .th__vid {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.6s ease-in-out;
}
.td .th__vid.is-on { opacity: 1; }

/* ---------- Head ---------- */
.td .th {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 90px); align-items: center;
  padding: calc(72px + 8vh) var(--pad) 14vh;
}
.td .th > .th__text, .td .th > .th__orbit { position: relative; z-index: 1; }
/* veil: comes out of the cream of the «dawn» above, keeps the text readable on the left,
   lets the forest show around the orbit, and meets the gallery veil at the bottom */
.td .th__veil {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(180deg, var(--cream) 0%, rgba(239, 232, 220, 0) 18%),
    linear-gradient(90deg, rgba(251, 249, 245, 0.93) 0%, rgba(251, 249, 245, 0.84) 36%, rgba(251, 249, 245, 0.3) 64%, rgba(251, 249, 245, 0.08) 100%),
    linear-gradient(180deg, rgba(251, 249, 245, 0.45) 0%, rgba(251, 249, 245, 0) 20%, rgba(251, 249, 245, 0) 70%, rgba(251, 249, 245, 0.5) 100%);
}
.td .th__title {
  margin: 18px 0 18px; font: 700 clamp(80px, 11vw, 190px)/0.86 var(--f-display);
  text-transform: uppercase; color: var(--forest); letter-spacing: -0.01em;
}
.td .th__lead { margin: 0 0 30px; max-width: 26ch; font: italic 500 clamp(26px, 2.5vw, 40px)/1.15 var(--f-serif); color: var(--ink); }
.td .th__stats { display: flex; align-items: center; gap: 20px; margin: 0 0 26px; }
.td .stat__y { display: block; font: 500 11px/1 var(--f-mono); letter-spacing: 0.18em; color: var(--gold-deep); margin-bottom: 8px; }
.td .stat__v { display: block; font: 500 clamp(30px, 2.8vw, 44px)/1 var(--f-display); color: var(--forest); }
.td .stat__arrow { font: 400 28px/1 var(--f-serif); color: var(--gold-deep); padding-top: 14px; }
.td .th__body { margin: 0 0 30px; max-width: 44ch; color: var(--ink-muted); font-size: clamp(15px, 1.1vw, 17px); }

/* Orbit: portrait in the centre, one photo per year on a ring of light */
.td .th__orbit { display: flex; flex-direction: column; align-items: center; }
.td .orbit-wrap { position: relative; width: min(540px, 100%, calc(100vh - 190px)); aspect-ratio: 1; }
.td .orbit-glow {
  position: absolute; inset: -8%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 234, 192, 0.95) 0%, rgba(242, 201, 125, 0.32) 40%, rgba(242, 201, 125, 0) 68%);
}
.td .orbit-ring {
  position: absolute; inset: 9%; border-radius: 50%; pointer-events: none;
  border: 1.5px solid rgba(190, 148, 70, 0.55);
  box-shadow: 0 0 24px rgba(242, 201, 125, 0.5), inset 0 0 24px rgba(242, 201, 125, 0.32);
}
.td .orbit-core {
  position: absolute; left: 50%; top: 50%; width: 46%; aspect-ratio: 1; transform: translate(-50%, -50%);
  padding: 0; border: 0; border-radius: 50%; overflow: hidden; cursor: pointer; background: var(--paper-3);
  box-shadow: 0 0 0 6px var(--paper), 0 0 0 7.5px rgba(190, 148, 70, 0.6), 0 30px 70px rgba(60, 50, 30, 0.25);
  transition: transform 0.6s var(--ease);
}
.td .orbit-core:hover { transform: translate(-50%, -50%) scale(1.03); }
.td .orbit-core img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.td .orbit { position: absolute; inset: 9%; animation: td-spin 90s linear infinite; }
.td .orb {
  position: absolute; width: 27%; aspect-ratio: 1; transform: translate(-50%, -50%);
  padding: 0; border: 0; background: none; cursor: pointer;
}
.td .orb__in { position: absolute; inset: 0; animation: td-spin 90s linear infinite reverse; }
.td .orb__ph {
  position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 4px var(--paper), 0 16px 36px rgba(60, 50, 30, 0.2);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.td .orb__ph img { width: 100%; height: 100%; object-fit: cover; }
.td .orb:hover .orb__ph, .td .orb:focus-visible .orb__ph {
  transform: scale(1.1);
  box-shadow: 0 0 0 4px var(--paper), 0 0 0 6px var(--gold), 0 20px 44px rgba(60, 50, 30, 0.26);
}
.td .orb:focus-visible { outline: none; }
.td .orb__y {
  position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%);
  padding: 6px 11px; border-radius: 999px; background: var(--forest); color: var(--paper);
  font: 500 11px/1 var(--f-mono); letter-spacing: 0.12em; white-space: nowrap;
}
.td .orbit-wrap:hover .orbit, .td .orbit-wrap:hover .orb__in { animation-play-state: paused; }
.td .orbit-hint { margin: 72px 0 0; font: 500 11px/1 var(--f-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-muted); text-align: center; }
@keyframes td-spin { to { transform: rotate(360deg); } }

/* ---------- Gallery: bubbles by year ---------- */
.td .va {
  padding: 12vh 0 14vh;
  background:
    linear-gradient(180deg, rgba(243, 238, 229, 0) 0%, rgba(243, 238, 229, 0) 86%, var(--paper-2) 97%, var(--paper-2) 100%),
    linear-gradient(90deg, rgba(251, 249, 245, 0.88) 0%, rgba(251, 249, 245, 0.76) 30%, rgba(251, 249, 245, 0.52) 62%, rgba(251, 249, 245, 0.62) 100%);
}
.td .vhead {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 16px 48px; padding: 0 var(--pad); margin-bottom: clamp(36px, 6vh, 72px);
}
.td .vhead__title { margin: 14px 0 0; font: 500 clamp(40px, 4.4vw, 72px)/1 var(--f-serif); color: var(--ink); }
.td .vhead__hint { margin: 0; max-width: 34ch; color: var(--ink); font-size: 15px; }
.td .va-year {
  position: relative; display: grid; grid-template-columns: minmax(200px, 25%) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px); padding: clamp(36px, 6vh, 64px) var(--pad); scroll-margin-top: 80px;
}
.td .va-year + .va-year { border-top: 1px solid rgba(27, 32, 28, 0.16); }
.td .va-year__side { position: sticky; top: 100px; align-self: start; }
.td .va-year__num {
  margin: 0; font: 700 clamp(72px, 8.6vw, 150px)/0.9 var(--f-display);
  color: transparent; -webkit-text-stroke: 1.5px rgba(31, 45, 37, 0.55); letter-spacing: -0.01em;
}
.td .va-year__count { margin: 16px 0 14px; font: 500 11px/1 var(--f-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-deep); }

/* Year text (Artem's words) on a frosted card over the video, gold edge on top */
.td .va-year__num { font-size: clamp(64px, 6.6vw, 116px); }
.td .va-year__side { top: 92px; }
.td .ytx {
  padding: 16px 18px 18px; border-radius: 16px; border-top: 3px solid #b8862f;
  background: rgba(251, 249, 245, 0.86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 16px 40px rgba(60, 50, 30, 0.14);
}
.td .ytx p { margin: 0; }
.td .ytx p + p { margin-top: 0.65em; }
.td .ytx__lead { margin-bottom: 0.75em !important; font: 600 15px/1.45 var(--f-body); color: var(--forest); }
.td .ytx__p { font: 500 17px/1.42 var(--f-serif); color: var(--ink); }
.td .ytx p { font-variant-numeric: lining-nums; }
.td .va-bubs {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(18px, 2.6vw, 40px) clamp(14px, 2vw, 30px); padding: 18px 0 40px;
}
.td .bub {
  --d: 160px; position: relative; flex: none; width: var(--d); height: var(--d);
  padding: 0; border: 0; background: none; cursor: pointer;
  transform: translateY(var(--y, 0)); transition: opacity 0.45s var(--ease);
}
/* desktop & tablet: a year's photos always stay in one row — circles shrink a little instead of wrapping */
@media (min-width: 761px) {
  .td .va-bubs { flex-wrap: nowrap; }
  .td .bub { flex: 0 1 var(--d); width: auto; height: auto; aspect-ratio: 1 / 1; min-width: 0; }
}
.td .bub--xl { --d: clamp(180px, 17vw, 290px); }
.td .bub--l { --d: clamp(150px, 14vw, 236px); }
.td .bub--m { --d: clamp(112px, 10.4vw, 176px); }
.td .bub--s { --d: clamp(86px, 7.6vw, 128px); }
.td .bub__ph {
  position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
  box-shadow: 0 18px 40px rgba(60, 50, 30, 0.16);
  animation: td-float 7s ease-in-out infinite; animation-delay: var(--dl, 0s);
  transition: transform 0.55s var(--ease), box-shadow 0.55s var(--ease);
}
.td .bub__ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.td .bub:hover .bub__ph, .td .bub:focus-visible .bub__ph {
  transform: scale(1.07);
  box-shadow: 0 0 0 4px var(--paper), 0 0 0 6px var(--gold), 0 26px 54px rgba(60, 50, 30, 0.24);
}
.td .bub:hover img { transform: scale(1.08); }
.td .bub:focus-visible { outline: none; }
.td .bub__tip {
  position: absolute; left: 50%; top: calc(100% + 14px); z-index: 3;
  transform: translate(-50%, 6px); opacity: 0; pointer-events: none; white-space: nowrap;
  padding: 9px 15px; border-radius: 999px; background: var(--forest); color: var(--paper);
  font: 500 13px/1 var(--f-body); transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.td .bub__tip b { margin-right: 8px; font: 500 11px/1 var(--f-mono); letter-spacing: 0.12em; color: var(--gold); }
.td .bub:hover .bub__tip, .td .bub:focus-visible .bub__tip { opacity: 1; transform: translate(-50%, 0); }
.td .va-bubs:hover .bub:not(:hover) { opacity: 0.5; }
@keyframes td-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }

/* ---------- Photo story window ---------- */
.td .mdl {
  position: fixed; inset: 0; z-index: 80; display: grid; place-items: center;
  padding: clamp(12px, 3vw, 40px);
  background: rgba(243, 238, 229, 0.8); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  opacity: 0; visibility: hidden; transition: opacity 0.4s var(--ease), visibility 0.4s;
}
.td .mdl.is-open { opacity: 1; visibility: visible; }
.td .mdl__panel {
  position: relative; width: min(1120px, 100%); height: min(86vh, 760px);
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  background: #fff; border-radius: 28px; overflow: hidden;
  box-shadow: 0 40px 100px rgba(60, 50, 30, 0.25);
  transform: translateY(26px) scale(0.98); transition: transform 0.55s var(--ease);
}
.td .mdl.is-open .mdl__panel { transform: none; }
.td .mdl__ph { position: relative; overflow: hidden; background: var(--paper-3); }
.td .mdl__ph .bg {
  position: absolute; inset: -12%; width: 124%; height: 124%; max-width: none;
  object-fit: cover; filter: blur(26px) saturate(1.1); opacity: 0.6;
}
.td .mdl__ph .fg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.td .mdl__body { display: flex; flex-direction: column; padding: clamp(26px, 3.6vw, 56px); overflow: auto; }
.td .mdl__close {
  position: absolute; top: 14px; right: 14px; z-index: 2; width: 46px; height: 46px;
  border: 0; border-radius: 50%; cursor: pointer; background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 0 1px var(--line); font: 300 30px/1 var(--f-body); color: var(--ink);
}
.td .mdl__nav { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 26px; }
.td .rbtn {
  flex: none; width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer;
  background: #fff; color: var(--ink); box-shadow: 0 0 0 1px var(--line), 0 10px 26px rgba(60, 50, 30, 0.1);
  font: 400 21px/1 var(--f-serif); transition: background 0.3s, color 0.3s, transform 0.3s var(--ease);
}
.td .rbtn:hover { background: var(--forest); color: var(--paper); transform: translateY(-2px); }
.td .mdl__count { font: 500 11px/1 var(--f-mono); letter-spacing: 0.18em; color: var(--ink-faint); margin-left: 6px; }
.td .kb__meta { margin: 0 0 10px; font: 500 11px/1 var(--f-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-deep); }
.td .kb__year {
  margin: 0 0 4px; font: 700 clamp(64px, 6.4vw, 108px)/0.9 var(--f-display);
  color: transparent; -webkit-text-stroke: 1.5px rgba(31, 45, 37, 0.5);
}
.td .kb__cap { margin: 0 0 22px; font: 500 clamp(28px, 2.5vw, 40px)/1.08 var(--f-serif); color: var(--ink); }
.td .kb__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.td .kb__tags span {
  padding: 7px 13px; border-radius: 999px; background: var(--paper-2);
  font: 600 12px/1 var(--f-body); color: var(--ink-muted);
}

/* ---------- «Как это было»: the story over the palm photo ---------- */
.td .path { position: relative; z-index: 1; margin-top: -2px; background: var(--paper-2); clip-path: inset(0); }
.td .path__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.td .path__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.td .path__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(251, 249, 245, 0.3) 0%, rgba(251, 249, 245, 0.62) 20%, rgba(251, 249, 245, 0.88) 30%,
    rgba(251, 249, 245, 0.88) 70%, rgba(251, 249, 245, 0.62) 80%, rgba(251, 249, 245, 0.3) 100%);
}
/* soft entry from the gallery above and soft exit into «Coming next» below */
.td .path::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 26vh; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, var(--paper-2) 0%, rgba(243, 238, 229, 0) 100%);
}
.td .path::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 18vh; z-index: 1; pointer-events: none;
  background: linear-gradient(0deg, var(--cream-2) 0%, rgba(228, 218, 203, 0) 100%);
}
.td .path__inner { position: relative; z-index: 2; padding: 16vh var(--pad) 16vh; }
.td .story { max-width: 780px; margin: 0 auto; }
.td .path__title {
  margin: 18px 0 0; font: 700 clamp(64px, 8.4vw, 150px)/0.88 var(--f-display);
  text-transform: uppercase; color: var(--forest);
}
.td .story__text { margin: clamp(36px, 6vh, 64px) 0 0; }
.td .story__text p {
  margin: 0 0 1em; font: 500 clamp(19px, 1.45vw, 23px)/1.55 var(--f-serif);
  font-variant-numeric: lining-nums; color: var(--ink);
}
.td .story__text p:first-child { font-size: clamp(23px, 1.9vw, 30px); line-height: 1.4; }
.td .story__text p:last-child { margin-bottom: 0; }

/* Social buttons — brand circle + glass pill; on hover the brand colour floods the pill */
/* Contact — its own full-width section on a white plaster texture */
.td .contact {
  position: relative; z-index: 2; scroll-margin-top: 0;
  padding: clamp(92px, 13vh, 120px) var(--pad) clamp(70px, 11vh, 110px);
  background:
    linear-gradient(90deg, rgba(250, 249, 246, 0.2) 0%, rgba(250, 249, 246, 0.5) 28%, rgba(250, 249, 246, 0.5) 72%, rgba(250, 249, 246, 0.2) 100%),
    #eeedea url("../img/contact-plaster.jpg") center / cover no-repeat;
}
.td .contact .social__intro { color: rgba(27, 32, 28, 0.74); }
.td .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.td .contact .social__k { text-align: center; }
.td .contact .social__sup { justify-content: center; }

/* warm light that follows the cursor over the plaster */
.td .contact__light {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(circle at var(--mx, 50%) var(--my, 38%), rgba(255, 224, 160, 0.34) 0, rgba(255, 224, 160, 0.14) 16%, rgba(255, 224, 160, 0) 34%),
    radial-gradient(circle at var(--mx, 50%) var(--my, 38%), rgba(60, 48, 28, 0) 24%, rgba(60, 48, 28, 0.11) 72%);
}
.td .contact__in { z-index: 1; }

/* Brand wordmark LUMIN | ARTUS with the meaning of each half */
.td .bw {
  display: grid; grid-template-columns: auto auto; justify-content: center; column-gap: 0;
  margin: clamp(44px, 8vh, 72px) 0 0; text-align: center;
}
.td .bw__half {
  margin: 0; font: 500 min(clamp(54px, 8vw, 122px), 15vh)/0.92 var(--f-display); letter-spacing: 0.03em;
  color: var(--forest); white-space: nowrap;
}
.td .bw__l {
  display: inline-block; opacity: 0; transform: translateY(0.55em);
  transition: opacity 0.9s var(--ease), transform 1.1s var(--ease);
  transition-delay: calc(var(--i) * 70ms);
}
.td .contact.is-in .bw__l { opacity: 1; transform: none; }
.td .bw__l--g {
  color: transparent;
  background: linear-gradient(100deg, #b8862f 0%, #b8862f 42%, #f7e2ad 50%, #b8862f 58%, #b8862f 100%);
  background-size: 320% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text;
  animation: bw-shine 3s ease-in-out infinite; animation-delay: calc(1.6s + var(--i) * 0.12s);
}
/* a gold glint runs across A-R-T every 3 seconds */
@keyframes bw-shine { 0%, 30% { background-position: 100% 0; } 72%, 100% { background-position: 0% 0; } }
.td .bw__a { position: relative; display: inline-block; }
.td .bw__crown {
  position: absolute; left: 50%; top: -0.36em; width: 1.12em; transform: translateX(-50%);
  overflow: visible; pointer-events: none;
}
.td .bw__halo {
  fill: none; stroke: #b8862f; stroke-width: 1.6; vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s var(--ease) 0.6s;
}
.td .bw__crown-body { fill: #b8862f; opacity: 0; transform: translateY(6px); transform-box: fill-box; transition: opacity 0.8s var(--ease) 1.1s, transform 0.8s var(--ease) 1.1s; }
.td .contact.is-in .bw__halo { stroke-dashoffset: 0; }
.td .contact.is-in .bw__crown-body { opacity: 1; transform: none; }
.td .bw__tick {
  display: block; width: 1px; height: clamp(22px, 4vh, 36px); margin: clamp(12px, 2vh, 18px) auto clamp(10px, 1.6vh, 14px);
  background: #b8862f; transform: scaleY(0); transform-origin: top; transition: transform 0.9s var(--ease) 1s;
}
.td .contact.is-in .bw__tick { transform: scaleY(1); }
.td .bw__def {
  /* width 0 + min-width 100%: the caption takes the width of its half of the word and never pushes the halves apart */
  width: 0; min-width: 100%; box-sizing: border-box; margin: 0; padding: 0 clamp(4px, 2vw, 40px);
  font: italic 500 clamp(15px, 1.25vw, 19px)/1.35 var(--f-serif); color: var(--ink);
  opacity: 0; transform: translateY(10px); transition: opacity 0.9s var(--ease) 1.4s, transform 0.9s var(--ease) 1.4s;
}
.td .bw__def b {
  display: block; margin-bottom: 7px; font: 600 11px/1.2 var(--f-mono); letter-spacing: 0.18em;
  text-transform: uppercase; color: #8a6a2c;
}
.td .bw__sum {
  display: flex; align-items: center; justify-content: center; gap: 14px; text-align: center;
  margin: clamp(14px, 2.6vh, 24px) 0 clamp(26px, 4.4vh, 44px); font: italic 500 clamp(20px, 1.8vw, 28px)/1.25 var(--f-serif); color: var(--forest);
  opacity: 0; transform: translateY(10px); transition: opacity 1s var(--ease) 1.2s, transform 1s var(--ease) 1.2s;
}
.td .bw__sum::before, .td .bw__sum::after { content: ""; flex: none; width: clamp(18px, 3vw, 44px); height: 1px; background: #b8862f; }
.td .contact.is-in .bw__def, .td .contact.is-in .bw__sum { opacity: 1; transform: none; }
@media (max-width: 560px) {
  .td .bw__def { font-size: 14px; }
  .td .bw__def b { font-size: 10px; letter-spacing: 0.12em; }
  .td .bw__sum { font-size: 19px; }
  .td .bw__sum::before, .td .bw__sum::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .td .bw__l, .td .bw__tick, .td .bw__def, .td .bw__sum, .td .bw__crown-body { transition: none; opacity: 1; transform: none; }
  .td .bw__halo { transition: none; stroke-dashoffset: 0; }
  .td .bw__l--g { animation: none; background-position: 50% 0; }
}
@media (max-width: 760px) {
  .td .contact {
    background:
      linear-gradient(rgba(250, 249, 246, 0.6), rgba(250, 249, 246, 0.6)),
      #eeedea url("../img/contact-plaster.jpg") center / cover no-repeat;
  }
}
.td .contact::before { /* soft hand-over from the story's cream into the plaster */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 90px; pointer-events: none;
  background: linear-gradient(180deg, var(--cream-2) 0%, rgba(228, 218, 203, 0) 100%);
}
.td .contact__in { position: relative; max-width: 780px; margin: 0 auto; }
.td .contact .sn { box-shadow: 0 10px 26px rgba(40, 36, 28, 0.12), 0 0 0 1px rgba(27, 32, 28, 0.06); }
.td .social__intro { margin: -8px 0 clamp(22px, 3.4vh, 32px); max-width: 52ch; font: 400 16px/1.6 var(--f-body); color: var(--ink-muted); }
.td .social__k { margin: 0 0 12px; font: 500 11px/1 var(--f-mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-deep); }
.td .social__t { margin: 0 0 clamp(22px, 3.4vh, 32px); font: italic 500 clamp(26px, 2.3vw, 36px)/1.15 var(--f-serif); color: var(--ink); }
.td .sn-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.td .social__sup {
  display: flex; align-items: center; gap: 12px; margin: clamp(22px, 3.4vh, 30px) 0 0;
  font: italic 500 clamp(18px, 1.4vw, 21px)/1.3 var(--f-serif); color: var(--ink-muted);
}
.td .social__sup::before { content: ""; flex: none; width: 28px; height: 1px; background: var(--gold-deep); }
.td .sn {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center; gap: 13px; min-width: 0;
  padding: 7px 16px 7px 7px; border-radius: 999px; text-decoration: none; color: var(--ink);
  background: rgba(255, 255, 255, 0.74);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px rgba(27, 32, 28, 0.07), 0 12px 30px rgba(60, 50, 30, 0.1);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), color 0.35s;
}
.td .sn::before {
  content: ""; position: absolute; z-index: -1; left: 7px; top: 50%;
  width: 48px; height: 48px; margin-top: -24px; border-radius: 50%;
  background: var(--c); transition: transform 0.65s var(--ease);
}
.td .sn__badge {
  flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}
.td .sn__badge svg { width: 22px; height: 22px; }
.td .sn__txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.td .sn__txt b { font: 600 16px/1.1 var(--f-body); white-space: nowrap; }
.td .sn__txt small {
  font: 500 11px/1 var(--f-mono); letter-spacing: 0.04em; color: var(--ink-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.35s;
}
.td .sn__go {
  margin-left: auto; flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  font: 500 15px/1 var(--f-body); color: #fff; background: rgba(255, 255, 255, 0.18);
  opacity: 0; transform: translateX(-6px); transition: opacity 0.35s, transform 0.45s var(--ease);
}
.td .sn--wide { grid-column: 1 / -1; }
.td .sn:hover, .td .sn:focus-visible { color: #fff; transform: translateY(-3px); box-shadow: 0 18px 40px rgba(60, 50, 30, 0.18); outline: none; }
.td .sn:hover::before, .td .sn:focus-visible::before { transform: scale(12); }
.td .sn--wide:hover::before, .td .sn--wide:focus-visible::before { transform: scale(34); }
.td .sn:hover .sn__txt small, .td .sn:focus-visible .sn__txt small { color: rgba(255, 255, 255, 0.82); }
.td .sn:hover .sn__go, .td .sn:focus-visible .sn__go { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .td .th { grid-template-columns: 1fr; padding-top: calc(64px + 6vh); }
  .td .orbit-wrap { width: min(460px, 86vw); }
  .td .th__orbit { margin-top: clamp(52px, 14vw, 66px); } /* the spinning year circles stick out above the ring — keep them off the button */
  .td .th__veil {
    background:
      linear-gradient(180deg, var(--cream) 0%, rgba(239, 232, 220, 0) 10%),
      linear-gradient(180deg, rgba(251, 249, 245, 0.92) 0%, rgba(251, 249, 245, 0.84) 46%, rgba(251, 249, 245, 0.25) 68%, rgba(251, 249, 245, 0.3) 86%, rgba(251, 249, 245, 0.66) 100%);
  }
  .td .va {
    background:
      linear-gradient(180deg, rgba(243, 238, 229, 0) 0%, rgba(243, 238, 229, 0) 88%, var(--paper-2) 98%, var(--paper-2) 100%),
      linear-gradient(180deg, rgba(251, 249, 245, 0.66) 0%, rgba(251, 249, 245, 0.66) 100%);
  }
  /* phones: the story is very tall, so the vertical photo becomes a sticky full-screen layer */
  .td .path__bg { inset: auto; position: sticky; top: 0; height: 100vh; margin-bottom: -100vh; }
  @supports (height: 100svh) { .td .path__bg { height: 100svh; margin-bottom: -100svh; } }
  .td .path__bg img { object-position: 40% 40%; }
  .td .path__bg::after { background: rgba(251, 249, 245, 0.8); }
}
@media (max-width: 760px) {
  .td .th { padding-bottom: 10vh; }
  .td .th__title { font-size: 76px; }
  .td .orb__y { font-size: 10px; padding: 5px 9px; top: calc(100% + 6px); }
  .td .orbit-hint { margin-top: 30px; }
  .td .va-year { grid-template-columns: 1fr; gap: 6px; }
  .td .va-year__side { position: static; }
  .td .va-year__num { font-size: 72px; }
  .td .bub--xl { --d: 168px; }
  .td .bub--l { --d: 136px; }
  .td .bub--m { --d: 104px; }
  .td .bub--s { --d: 80px; }
  .td .bub { transform: translateY(calc(var(--y, 0) * 0.5)); }
  .td .va-bubs { gap: 14px 12px; }
  .td .bub__tip { display: none; }
  .td .va-bubs:hover .bub:not(:hover) { opacity: 1; }
  .td .mdl { padding: 0; }
  .td .mdl__panel { width: 100%; height: 100%; border-radius: 0; grid-template-columns: 1fr; grid-template-rows: 50% 50%; }
  .td .mdl__body { padding: 22px 22px 20px; }
  .td .kb__year { font-size: 46px; }
  .td .kb__cap { font-size: 27px; margin-bottom: 14px; }
  .td .sn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .td .sn { gap: 9px; padding: 6px 10px 6px 6px; }
  .td .sn::before { left: 6px; width: 40px; height: 40px; margin-top: -20px; }
  .td .sn__badge { width: 40px; height: 40px; }
  .td .sn__badge svg { width: 19px; height: 19px; }
  .td .sn__txt b { font-size: 14px; }
  .td .sn__txt small { font-size: 10px; letter-spacing: 0; }
  .td .sn__go { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .td .bub__ph, .td .orbit, .td .orb__in { animation: none; }
  .td .mdl, .td .mdl__panel { transition: none; }
}