/* styles.css */
:root {
  --bg: #0a0908;
  --bg-soft: #11100f;
  --paper: #e7e0d4;
  --muted: #9c958b;
  --line: rgba(231, 224, 212, .16);
  --accent: #cf5f44;
  --accent-soft: #e39a7a;
  --mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: "Playfair Display", Georgia, serif;
  --pad: clamp(20px, 4vw, 64px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--paper);
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
}
body.focused .grain,
body.focused .cursor-glow { opacity: 0; }
body.focused * { transition-duration: .12s !important; animation-duration: .12s !important; }

::selection { background: var(--paper); color: var(--bg); }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }

.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 99; opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
  transition: opacity .4s ease;
}
.cursor-glow {
  position: fixed; width: 44vw; aspect-ratio: 1; border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(207,95,68,.09), transparent 66%);
  transform: translate3d(calc(var(--mx, 50vw) - 50%), calc(var(--my, 50vh) - 50%), 0);
  filter: blur(20px); transition: opacity .4s ease;
}

.intro {
  position: fixed; inset: 0; z-index: 1000; background: #070605; display: grid; place-items: center;
  animation: introAway .9s cubic-bezier(.7,0,.2,1) 1.65s forwards;
}
.intro__mark { display: flex; gap: 12px; align-items: center; font-family: var(--mono); font-size: clamp(18px, 3vw, 28px); letter-spacing: .16em; }
.intro__mark span { opacity: 0; transform: translateY(9px); animation: introMark .55s ease forwards; }
.intro__mark span:nth-of-type(2) { animation-delay: .16s; }
.intro__mark span:nth-of-type(3) { animation-delay: .32s; }
.intro__mark i { width: 3px; height: 3px; background: var(--accent); border-radius: 50%; opacity: .85; }
@keyframes introMark { to { opacity: 1; transform: none; } }
@keyframes introAway { to { opacity: 0; visibility: hidden; transform: translateY(-2%); } }

.site-header {
  position: fixed; z-index: 80; top: 0; left: 0; right: 0; height: 76px; padding: 0 var(--pad);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  background: linear-gradient(to bottom, rgba(10,9,8,.9), rgba(10,9,8,0));
  backdrop-filter: blur(0px); transition: background .3s ease, backdrop-filter .3s ease;
}
.site-header.scrolled { background: rgba(10,9,8,.76); backdrop-filter: blur(18px); border-bottom: 1px solid rgba(255,255,255,.05); }
.brand { font: 500 12px/1 var(--mono); letter-spacing: .15em; }
.nav { display: flex; gap: 30px; }
.nav a { font: 400 10px/1 var(--mono); text-transform: uppercase; letter-spacing: .14em; color: var(--muted); transition: color .2s ease; }
.nav a:hover { color: var(--paper); }
.soundless { justify-self: end; width: 34px; height: 34px; border: 0; background: transparent; display: grid; place-content: center; gap: 4px; cursor: pointer; }
.soundless span { width: 17px; height: 1px; background: var(--paper); display: block; transition: transform .25s ease, width .25s ease; }
.soundless span:last-child { width: 10px; justify-self: end; }
.soundless[aria-pressed="true"] span:first-child { transform: translateY(2.5px) rotate(45deg); }
.soundless[aria-pressed="true"] span:last-child { width: 17px; transform: translateY(-2.5px) rotate(-45deg); }

main { position: relative; z-index: 1; }
.hero {
  min-height: 100svh; padding: 120px var(--pad) 50px; display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr); gap: clamp(40px, 8vw, 130px); align-items: center;
  position: relative;
}
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255,255,255,.02), transparent 36%); pointer-events: none; }
.hero__copy { max-width: 830px; position: relative; z-index: 2; }
.eyebrow { margin: 0 0 24px; font: 400 10px/1.4 var(--mono); letter-spacing: .18em; color: var(--muted); text-transform: uppercase; }
.hero h1, .section-heading h2, .now h2, .finale h2 {
  margin: 0; font-size: clamp(49px, 7.3vw, 118px); line-height: .91; letter-spacing: -.055em; font-weight: 300;
}
.hero h1 em, .finale h2 em { font-family: var(--serif); font-weight: 500; color: var(--accent-soft); }
.hero__lede { max-width: 590px; margin: 38px 0 0; color: #b8b1a8; font-size: clamp(15px, 1.25vw, 18px); line-height: 1.8; }
.scroll-cue { display: inline-flex; gap: 16px; align-items: center; margin-top: 46px; font: 400 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.scroll-cue b { font-size: 18px; font-weight: 300; animation: drift 1.8s ease-in-out infinite; }
@keyframes drift { 50% { transform: translateY(6px); } }
.hero__visual { margin: 0; position: relative; align-self: stretch; min-height: 70svh; overflow: hidden; background: #151311; }
.hero__visual::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); pointer-events: none; }
.hero__visual img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.72) contrast(1.05); transform: scale(1.035); }
.hero__visual figcaption { position: absolute; z-index: 2; left: 14px; right: 14px; bottom: 12px; display: flex; justify-content: space-between; font: 400 9px/1 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: rgba(255,255,255,.72); }
.hero__visual figcaption span { color: #fff; }
.hero__date { position: absolute; left: var(--pad); bottom: 34px; display: grid; gap: 3px; }
.hero__date span { font: 400 9px/1 var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .14em; }
.hero__date strong { font: 400 10px/1 var(--mono); letter-spacing: .08em; }

.numbers { margin: 0 var(--pad); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, 1fr); }
.numbers div { padding: 36px clamp(14px,3vw,44px); min-height: 145px; display: grid; align-content: center; border-right: 1px solid var(--line); }
.numbers div:last-child { border-right: 0; }
.numbers span { font: 300 clamp(30px,4vw,60px)/1 var(--mono); letter-spacing: -.07em; }
.numbers small { margin-top: 12px; color: var(--muted); font: 400 9px/1.5 var(--mono); text-transform: uppercase; letter-spacing: .11em; }

.story { padding: clamp(110px, 14vw, 220px) var(--pad); }
.section-heading { max-width: 1050px; margin-bottom: clamp(80px, 11vw, 150px); }
.section-heading h2 { font-size: clamp(44px,6.2vw,98px); max-width: 950px; }
.section-note { margin: 28px 0 0; max-width: 520px; color: var(--muted); font-size: 14px; }
.timeline { position: relative; }
.timeline::before { content: ""; position: absolute; top: 0; bottom: 0; left: 12.5%; width: 1px; background: linear-gradient(to bottom, transparent, var(--line) 5%, var(--line) 95%, transparent); }
.chapter { min-height: 78vh; display: grid; grid-template-columns: .23fr .65fr .75fr; gap: clamp(24px,5vw,90px); align-items: center; padding: 85px 0; position: relative; }
.chapter--reverse { grid-template-columns: .23fr .75fr .65fr; }
.chapter--reverse .chapter__body { grid-column: 3; grid-row: 1; }
.chapter--reverse .chapter__media { grid-column: 2; grid-row: 1; }
.chapter__year { align-self: start; padding-top: 11px; font: 400 10px/1 var(--mono); letter-spacing: .1em; color: var(--muted); position: sticky; top: 100px; }
.chapter__year::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); position: absolute; right: -4px; top: 13px; box-shadow: 0 0 0 6px var(--bg); }
.chapter__body { max-width: 560px; }
.chapter__kicker { margin: 0 0 18px; font: 400 9px/1.5 var(--mono); letter-spacing: .13em; color: var(--accent-soft); }
.chapter h3 { margin: 0; font-size: clamp(31px,4.2vw,67px); line-height: 1.02; letter-spacing: -.04em; font-weight: 300; }
.chapter__body > p:last-child { margin: 28px 0 0; color: #aaa39a; line-height: 1.85; font-size: clamp(14px,1.1vw,17px); }
.chapter__media { margin: 0; overflow: hidden; background: #151311; }
.portrait-frame { aspect-ratio: 3 / 4.15; }
.square-frame { aspect-ratio: 1; }
.chapter__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2,.8,.2,1), filter .5s ease; }
.chapter__media:hover img { transform: scale(1.025); }
.chapter__media--mono img { filter: grayscale(1) contrast(1.12); }

.route { padding: 0 var(--pad) clamp(130px,16vw,230px); }
.section-heading--compact { margin-bottom: 70px; }
.route__line { min-height: 220px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; grid-template-columns: .6fr 1.6fr .6fr; align-items: center; }
.route__city { display: grid; gap: 6px; }
.route__city--right { text-align: right; }
.route__city span { font: 500 clamp(20px,3vw,40px)/1 var(--mono); letter-spacing: -.04em; }
.route__city small { color: var(--muted); font: 400 9px/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.route__track { position: relative; height: 1px; background: repeating-linear-gradient(to right, rgba(231,224,212,.32) 0 5px, transparent 5px 12px); margin: 0 34px; display: flex; justify-content: space-between; align-items: center; }
.route__track i { width: 7px; height: 7px; border: 1px solid var(--paper); border-radius: 50%; background: var(--bg); }
.route__track b { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 8px rgba(207,95,68,.08); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 16px rgba(207,95,68,0); } }
.route__after { margin: 34px 0 0; text-align: center; font-size: clamp(14px, 1.2vw, 17px); color: var(--muted); }
.route__after strong { color: var(--paper); font-weight: 500; }

.memories { padding: clamp(100px, 12vw, 180px) 0 clamp(110px, 14vw, 210px); border-top: 1px solid var(--line); }
.memories .section-heading { padding: 0 var(--pad); margin-bottom: 70px; }
.memories .section-heading h2 { max-width: 1100px; }
.filmstrip { display: flex; gap: 18px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: 0 var(--pad) 24px; scrollbar-width: none; }
.filmstrip::-webkit-scrollbar { display: none; }
.memory-card { flex: 0 0 min(37vw, 520px); min-width: 280px; aspect-ratio: 3 / 4; padding: 0; border: 0; background: #151311; position: relative; overflow: hidden; cursor: zoom-in; scroll-snap-align: center; }
.memory-card--wide { flex-basis: min(50vw, 680px); aspect-ratio: 4 / 3; align-self: center; }
.memory-card--tall { flex-basis: min(32vw, 430px); }
.memory-card img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.82); transition: transform .8s cubic-bezier(.2,.8,.2,1), filter .4s ease; }
.memory-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.48), transparent 35%); pointer-events: none; }
.memory-card:hover img { transform: scale(1.035); filter: saturate(1); }
.memory-card > span { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 14px; display: flex; justify-content: space-between; font: 400 9px/1 var(--mono); text-transform: uppercase; letter-spacing: .11em; }
.memory-card > span b { font-weight: 400; color: rgba(255,255,255,.55); }
.swipe-hint { display: none; padding: 10px var(--pad) 0; color: var(--muted); font: 400 9px/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; }

.portrait { margin: 0 var(--pad) clamp(130px,15vw,220px); display: grid; grid-template-columns: minmax(300px,.9fr) minmax(300px,1.1fr); align-items: center; min-height: 80vh; background: #e8e4de; color: #111; overflow: hidden; }
.portrait__image { margin: 0; height: 100%; min-height: 80vh; overflow: hidden; }
.portrait__image img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06); }
.portrait__copy { padding: clamp(40px,8vw,120px); }
.portrait__copy .eyebrow { color: #6d6862; }
.portrait blockquote { margin: 0; font-size: clamp(34px,5vw,76px); line-height: 1.03; letter-spacing: -.045em; font-weight: 300; }
.portrait__copy > p:last-child { margin: 30px 0 0; color: #68625b; font-size: 13px; }

.now { min-height: 100svh; position: relative; display: grid; place-items: center; overflow: hidden; }
.now__background { position: absolute; inset: -7%; margin: 0; }
.now__background img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.55) brightness(.55); }
.now__overlay { position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, transparent, rgba(0,0,0,.48) 70%), linear-gradient(to bottom, rgba(10,9,8,.12), rgba(10,9,8,.86)); }
.now__content { width: min(900px, calc(100% - 2 * var(--pad))); position: relative; z-index: 2; text-align: center; padding: 110px 0; }
.now h2 { font-size: clamp(55px,8vw,126px); }
.now__content > p:not(.eyebrow) { max-width: 620px; margin: 34px auto 0; color: #c7c0b7; font-size: clamp(14px,1.2vw,17px); }
.now__stamp { width: fit-content; margin: 48px auto 0; padding: 14px 18px; border: 1px solid rgba(255,255,255,.23); display: grid; gap: 5px; transform: rotate(-2deg); }
.now__stamp span { color: var(--accent-soft); font: 500 9px/1 var(--mono); letter-spacing: .18em; }
.now__stamp strong { font: 400 11px/1 var(--mono); letter-spacing: .1em; }

.finale { min-height: 92svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 110px var(--pad); }
.finale__pre { font: 400 9px/1 var(--mono); letter-spacing: .16em; color: var(--muted); }
.finale h2 { margin-top: 26px; font-size: clamp(62px,9vw,145px); }
.finale__names { margin-top: 70px; display: flex; gap: 22px; align-items: center; font: 400 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; }
.finale__names i { color: var(--accent); font-style: normal; }
.finale__date { margin-top: 26px; font: 400 10px/1 var(--mono); letter-spacing: .25em; color: var(--muted); }
.footer { height: 84px; margin: 0 var(--pad); border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; color: var(--muted); font: 400 9px/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; }

.lightbox { width: min(94vw, 1100px); height: min(92svh, 900px); border: 0; padding: 0; background: #090807; color: var(--paper); overflow: hidden; }
.lightbox::backdrop { background: rgba(0,0,0,.84); backdrop-filter: blur(12px); }
.lightbox figure { margin: 0; width: 100%; height: 100%; display: grid; grid-template-rows: 1fr auto; }
.lightbox img { width: 100%; height: 100%; min-height: 0; object-fit: contain; padding: 34px 34px 12px; }
.lightbox figcaption { padding: 10px 34px 24px; text-align: center; color: var(--muted); font: 400 9px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .12em; }
.lightbox__close { position: absolute; right: 13px; top: 10px; z-index: 2; width: 38px; height: 38px; border: 0; background: rgba(0,0,0,.3); border-radius: 50%; cursor: pointer; font-size: 24px; line-height: 1; font-weight: 300; }

[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1); }
[data-reveal].is-visible { opacity: 1; transform: none; }

@media (max-width: 980px) {
  .site-header { height: 66px; }
  .nav { display: none; }
  .site-header { grid-template-columns: 1fr 1fr; }
  .hero { min-height: auto; padding-top: 120px; grid-template-columns: 1fr; gap: 56px; }
  .hero__copy { max-width: 760px; }
  .hero__visual { min-height: auto; aspect-ratio: 4 / 5; width: min(88vw, 620px); justify-self: end; }
  .hero__date { position: static; grid-row: 3; padding-bottom: 14px; }
  .numbers { grid-template-columns: 1fr; }
  .numbers div { min-height: 110px; border-right: 0; border-bottom: 1px solid var(--line); }
  .numbers div:last-child { border-bottom: 0; }
  .timeline::before { left: 17px; }
  .chapter, .chapter--reverse { min-height: auto; grid-template-columns: 34px 1fr; gap: 26px; padding: 70px 0; }
  .chapter__year { grid-column: 1; grid-row: 1 / span 2; writing-mode: vertical-rl; position: sticky; top: 90px; padding-top: 0; }
  .chapter__year::after { right: 13px; top: -2px; }
  .chapter__body, .chapter--reverse .chapter__body { grid-column: 2; grid-row: 1; }
  .chapter__media, .chapter--reverse .chapter__media { grid-column: 2; grid-row: 2; width: min(100%, 620px); }
  .route__line { grid-template-columns: 1fr; padding: 38px 0; gap: 28px; text-align: left; }
  .route__city--right { text-align: left; }
  .route__track { margin: 0; width: 100%; }
  .portrait { grid-template-columns: 1fr; }
  .portrait__image { min-height: auto; aspect-ratio: 1; }
  .portrait__copy { padding: 58px 36px 70px; }
}

@media (max-width: 640px) {
  :root { --pad: 18px; }
  .intro__mark { gap: 8px; }
  .site-header { padding-top: env(safe-area-inset-top); height: calc(62px + env(safe-area-inset-top)); }
  .hero { padding-top: calc(108px + env(safe-area-inset-top)); padding-bottom: 34px; gap: 44px; }
  .hero h1 { font-size: clamp(47px, 14.4vw, 72px); }
  .hero__lede { margin-top: 28px; line-height: 1.7; }
  .scroll-cue { margin-top: 32px; }
  .hero__visual { width: 88vw; aspect-ratio: 3 / 4.25; }
  .hero__date { padding-bottom: 0; }
  .numbers { margin-top: 34px; }
  .numbers div { padding: 25px 18px; }
  .story { padding-top: 105px; }
  .section-heading { margin-bottom: 66px; }
  .section-heading h2 { font-size: clamp(42px, 13vw, 66px); }
  .chapter, .chapter--reverse { gap: 18px; padding: 52px 0; }
  .chapter h3 { font-size: clamp(34px, 10vw, 52px); }
  .chapter__body > p:last-child { margin-top: 21px; line-height: 1.75; }
  .chapter__year { font-size: 9px; }
  .route { padding-bottom: 120px; }
  .route__line { min-height: 0; }
  .route__after { text-align: left; }
  .memories { padding-top: 95px; }
  .filmstrip { gap: 10px; padding-bottom: 16px; }
  .memory-card, .memory-card--tall { flex-basis: 76vw; min-width: 0; }
  .memory-card--wide { flex-basis: 86vw; }
  .swipe-hint { display: block; }
  .portrait { margin-bottom: 120px; }
  .portrait__copy { padding: 46px 24px 54px; }
  .portrait blockquote { font-size: clamp(36px, 11vw, 56px); }
  .now__content { padding: 90px 0; }
  .now h2 { font-size: clamp(58px, 17vw, 82px); }
  .finale { min-height: 86svh; }
  .finale h2 { font-size: clamp(58px, 17vw, 86px); }
  .finale__names { flex-direction: column; gap: 14px; margin-top: 52px; }
  .footer { height: 74px; }
  .lightbox { width: 100vw; height: 100svh; max-width: none; max-height: none; }
  .lightbox img { padding: 50px 12px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .intro { display: none; }
}

/* fixes.css */
/* v11: verified photo atlas + mobile route + Spotify section */
.atlas {
  width: 100%;
  height: 100%;
  background-image: var(--memory-atlas, linear-gradient(135deg, #171412, #0f0d0c));
  background-size: 200% 500%;
  background-repeat: no-repeat;
  background-color: #151311;
  opacity: .28;
  transition: opacity .28s ease, transform .8s cubic-bezier(.2,.8,.2,1), filter .4s ease;
}
html.atlas-ready .atlas { opacity: 1; }
html.atlas-error .atlas { opacity: .45; }
.atlas--1 { background-position: 0 0; }
.atlas--2 { background-position: 100% 0; }
.atlas--3 { background-position: 0 25%; }
.atlas--4 { background-position: 100% 25%; }
.atlas--5 { background-position: 0 50%; }
.atlas--6 { background-position: 100% 50%; }
.atlas--7 { background-position: 0 75%; }
.atlas--8 { background-position: 100% 75%; }
.atlas--9 { background-position: 0 100%; }
.atlas--10 { background-position: 100% 100%; }

.hero__visual .hero__atlas { position:absolute; inset:0; }
.chapter__media,
.chapter__media.portrait-frame {
  position: relative;
  width: 100%;
  min-height: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #151311;
}
.chapter__media .atlas { position:absolute; inset:0; }
.chapter__media:hover .atlas { transform:scale(1.025); }
.chapter__media--mono .atlas { filter:grayscale(1) contrast(1.12); }
.memory-card .atlas { filter:saturate(.82); }
.memory-card:hover .atlas { transform:scale(1.035); filter:saturate(1); }
.portrait__image { position:relative; min-height:0; height:auto; aspect-ratio:3/4; overflow:hidden; }
.portrait__image .atlas { position:absolute; inset:0; filter:grayscale(1) contrast(1.06); }
.now__background { inset:50% auto auto 50%; width:min(64vw,780px); height:auto; aspect-ratio:3/4; transform:translate(-50%,-50%); opacity:.9; }
.now__background .atlas { filter:saturate(.58) brightness(.62); }
.lightbox figure { place-items:center; }
.lightbox__image { width:min(68vw,600px); height:auto; aspect-ratio:3/4; max-width:100%; margin:28px auto 8px; }
.lightbox figcaption { width:100%; }

.menu-toggle { display:none; justify-self:end; width:44px; height:44px; border:0; background:transparent; place-content:center; gap:6px; cursor:pointer; position:relative; z-index:102; }
.menu-toggle span { width:22px; height:1px; background:var(--paper); display:block; transition:transform .25s ease,width .25s ease; }
.menu-toggle span:last-child { width:14px; justify-self:end; }
body.menu-open { overflow:hidden; }
body.menu-open .menu-toggle span:first-child { transform:translateY(3.5px) rotate(45deg); }
body.menu-open .menu-toggle span:last-child { width:22px; transform:translateY(-3.5px) rotate(-45deg); }

/* Spotify soundtrack */
.playlist {
  position: relative;
  padding: 150px var(--pad) 160px;
  overflow: hidden;
  border-top: 1px solid var(--line);
}
.playlist::before {
  content: "";
  position: absolute;
  width: 560px;
  height: 560px;
  right: -180px;
  top: 90px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(207,95,68,.14) 0, rgba(207,95,68,.04) 44%, transparent 72%);
  pointer-events: none;
}
.playlist__heading { max-width: 980px; }
.playlist__stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,.72fr) minmax(420px,1.28fr);
  gap: clamp(42px,6vw,96px);
  align-items: center;
  padding: 54px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.playlist__copy {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 352px;
  padding: 8px 0;
}
.playlist__number {
  color: var(--accent);
  font: 500 9px/1 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.playlist__copy p {
  max-width: 34ch;
  margin: auto 0 34px;
  color: var(--muted);
  font-size: clamp(15px,1.25vw,18px);
  line-height: 1.75;
}
.playlist__link {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 12px;
  color: var(--paper);
  font: 500 10px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(231,224,212,.35);
  transition: color .25s ease, border-color .25s ease, gap .25s ease;
}
.playlist__link:hover { color: var(--accent); border-color: var(--accent); gap: 16px; }
.playlist__embed {
  position: relative;
  min-width: 0;
}
.playlist__embed::before {
  content: "";
  position: absolute;
  inset: -14px;
  border: 1px solid rgba(231,224,212,.08);
  pointer-events: none;
}
.playlist__embed iframe {
  display: block;
  width: 100%;
  min-height: 352px;
  border: 0;
  border-radius: 12px;
  background: #121212;
}

@media (max-width:980px) {
  .site-header { grid-template-columns:1fr auto !important; }
  .menu-toggle { display:grid !important; }
  .nav {
    position:fixed; inset:0; z-index:101;
    display:flex !important; flex-direction:column; align-items:center; justify-content:center;
    gap:30px; padding:90px 24px 40px;
    background:rgba(8,7,6,.985); backdrop-filter:blur(18px);
    opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-10px);
    transition:opacity .22s ease,transform .22s ease,visibility .22s;
  }
  body.menu-open .nav { opacity:1; visibility:visible; pointer-events:auto; transform:none; }
  .nav a { font-size:15px !important; letter-spacing:.16em; color:var(--paper) !important; padding:12px 18px; }
  .chapter__media, .chapter--reverse .chapter__media { width:min(100%,620px); aspect-ratio:3/4; }
  .portrait__image { min-height:0; aspect-ratio:3/4; }
  .now__background { width:min(88vw,650px); }
  .hero__visual { min-height:62svh; }

  /* Mobile route: cities sit on opposite ends of a vertical journey line. */
  .route__line {
    min-height: 250px !important;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) 36px minmax(0,1fr) !important;
    grid-template-rows: auto 1fr auto !important;
    align-items: stretch !important;
    gap: 0 14px !important;
    padding: 32px 0 !important;
    text-align: initial !important;
  }
  .route__city { align-self: center; min-width: 0; }
  .route__city--left {
    grid-column: 1 !important;
    grid-row: 1 !important;
    text-align: left !important;
    padding-top: 2px;
  }
  .route__city--right {
    grid-column: 3 !important;
    grid-row: 3 !important;
    text-align: right !important;
    padding-bottom: 2px;
  }
  .route__city span {
    font-size: clamp(22px, 7vw, 34px) !important;
    line-height: .95 !important;
    overflow-wrap: anywhere;
  }
  .route__city small {
    display: block;
    margin-top: 7px;
    font-size: 8px !important;
  }
  .route__track {
    grid-column: 2 !important;
    grid-row: 1 / 4 !important;
    justify-self: center !important;
    align-self: stretch !important;
    width: 1px !important;
    height: auto !important;
    min-height: 184px;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: center !important;
    background: repeating-linear-gradient(to bottom, rgba(231,224,212,.32) 0 5px, transparent 5px 12px) !important;
  }
  .route__track i,
  .route__track b { flex: 0 0 auto; }
  .route__after {
    max-width: 34ch;
    margin-left: 0 !important;
    margin-right: auto !important;
    text-align: left !important;
  }

  .playlist { padding-top: 118px; padding-bottom: 126px; }
  .playlist__stage {
    grid-template-columns: 1fr;
    gap: 38px;
    padding: 38px 0;
  }
  .playlist__copy { min-height: 0; }
  .playlist__copy p { margin: 26px 0 28px; }
}

@media (max-width:640px) {
  .lightbox__image { width:min(86vw,480px); }
  .now__background { width:94vw; }
  .memory-card { min-width:0; }
  .chapter__media, .chapter--reverse .chapter__media { width:100%; aspect-ratio:3/4; }
  .route__line {
    min-height: 230px !important;
    grid-template-columns: minmax(0,1fr) 28px minmax(0,1fr) !important;
    gap: 0 10px !important;
    padding: 28px 0 !important;
  }
  .route__track { min-height: 172px; }
  .playlist { padding-top: 94px; padding-bottom: 104px; }
  .playlist__stage { gap: 28px; padding: 30px 0; }
  .playlist__embed::before { inset: -8px; }
  .playlist__embed iframe { min-height: 352px; border-radius: 10px; }
}

@media (min-width:981px) { .menu-toggle { display:none !important; } }

/* enhancements.css */
/* v12: anniversary, three-city route, special portrait and hidden note */

/* Anniversary countdown */
.anniversary {
  position: relative;
  margin: 0 var(--pad);
  padding: clamp(72px, 9vw, 130px) 0;
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(520px, 1.15fr);
  gap: clamp(48px, 7vw, 110px);
  align-items: end;
  border-bottom: 1px solid var(--line);
}
.anniversary::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 74px;
  height: 1px;
  background: var(--accent);
}
.anniversary__copy h2 {
  margin: 20px 0 22px;
  font-family: var(--serif);
  font-size: clamp(46px, 5.7vw, 88px);
  font-weight: 400;
  line-height: .94;
  letter-spacing: -.045em;
}
.anniversary__copy h2 em { color: var(--accent); font-weight: 400; }
.anniversary__copy > p:last-child {
  color: var(--muted);
  max-width: 34ch;
  line-height: 1.7;
}
.anniversary__count {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.anniversary__count div {
  min-width: 0;
  padding: clamp(24px, 3vw, 42px) clamp(12px, 2vw, 28px);
  border-right: 1px solid var(--line);
}
.anniversary__count div:last-child { border-right: 0; }
.anniversary__count strong {
  display: block;
  font: 400 clamp(36px, 5vw, 70px)/.9 var(--mono);
  letter-spacing: -.08em;
  font-variant-numeric: tabular-nums;
}
.anniversary__count span {
  display: block;
  margin-top: 16px;
  color: var(--muted);
  font: 500 9px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* Three-stop journey */
.route__journey {
  min-height: 220px;
  display: grid;
  grid-template-columns: minmax(150px,.72fr) minmax(90px,1fr) minmax(150px,.72fr) minmax(90px,1fr) minmax(150px,.72fr);
  align-items: center;
  gap: 0;
  padding: 40px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.route-stop {
  position: relative;
  display: grid;
  gap: 7px;
  min-width: 0;
}
.route-stop span {
  font: 500 clamp(20px, 3vw, 40px)/1 var(--mono);
  letter-spacing: -.05em;
}
.route-stop small {
  color: var(--muted);
  font: 400 9px/1.2 var(--mono);
  text-transform: uppercase;
  letter-spacing: .1em;
}
.route-stop::before {
  content: "";
  width: 8px;
  height: 8px;
  margin-bottom: 15px;
  border: 1px solid var(--paper);
  border-radius: 50%;
  background: var(--bg);
  box-shadow: 0 0 0 6px rgba(231,224,212,.025);
}
.route-stop--final { text-align: right; }
.route-stop--final::before { justify-self: end; border-color: var(--accent); background: var(--accent); box-shadow: 0 0 28px rgba(207,95,68,.3); }
.route-stop--final span { color: var(--accent); }
.route-segment {
  position: relative;
  height: 1px;
  margin: -45px 22px 0;
  background: repeating-linear-gradient(to right, rgba(231,224,212,.33) 0 5px, transparent 5px 12px);
}
.route-segment i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 16px rgba(207,95,68,.38);
}
.route__after {
  max-width: 58ch;
  margin-top: 38px !important;
  line-height: 1.8;
}
.route__after strong { color: var(--paper); }

/* Special portrait */
.portrait__image--special {
  position: relative;
  min-height: 0 !important;
  height: auto !important;
  aspect-ratio: 1409 / 1536 !important;
  overflow: hidden;
  background: #151311;
}
.special-photo {
  position: absolute;
  inset: 0;
  background-image: var(--special-portrait, linear-gradient(145deg, #211713, #0e0c0b));
  background-size: cover;
  background-position: center;
  opacity: .25;
  filter: saturate(.9) contrast(1.025);
  transform: scale(1.005);
  transition: opacity .35s ease, transform 1.1s cubic-bezier(.2,.8,.2,1), filter .45s ease;
}
html.portrait-ready .special-photo { opacity: 1; }
html.portrait-error .special-photo { opacity: .62; }
.portrait--special:hover .special-photo { transform: scale(1.025); filter: saturate(1) contrast(1.02); }
.portrait--special .portrait__copy { position: relative; }
.portrait--special .portrait__copy::before {
  content: "30·05·19";
  position: absolute;
  right: 30px;
  top: 28px;
  color: rgba(231,224,212,.08);
  font: 500 11px/1 var(--mono);
  letter-spacing: .14em;
}

/* Hidden note */
.secret-note {
  width: min(92vw, 780px);
  border: 1px solid rgba(231,224,212,.16);
  padding: 0;
  background: rgba(10,9,8,.985);
  color: var(--paper);
  overflow: hidden;
}
.secret-note::backdrop {
  background: rgba(0,0,0,.86);
  backdrop-filter: blur(14px);
}
.secret-note__inner {
  min-height: min(72svh, 620px);
  padding: clamp(46px, 7vw, 86px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}
.secret-note__inner::before {
  content: "";
  position: absolute;
  width: 310px;
  height: 310px;
  border-radius: 50%;
  right: -110px;
  bottom: -120px;
  background: radial-gradient(circle, rgba(207,95,68,.19), transparent 68%);
  pointer-events: none;
}
.secret-note h2 {
  margin: 26px 0;
  max-width: 12ch;
  font: 400 clamp(46px, 7vw, 82px)/.92 var(--serif);
  letter-spacing: -.05em;
}
.secret-note h2 em { color: var(--accent); font-weight: 400; }
.secret-note__inner > p:not(.eyebrow) {
  max-width: 42ch;
  color: var(--muted);
  line-height: 1.8;
}
.secret-note__inner > span {
  margin-top: 42px;
  color: var(--paper);
  font: 500 9px/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: .14em;
}
.secret-note__close {
  position: absolute;
  z-index: 3;
  right: 18px;
  top: 16px;
  width: 42px;
  height: 42px;
  border: 0;
  background: transparent;
  color: var(--paper);
  font-size: 28px;
  font-weight: 200;
  cursor: pointer;
}
.brand { touch-action: manipulation; }

@media (max-width: 980px) {
  .anniversary {
    grid-template-columns: 1fr;
    gap: 42px;
    align-items: start;
  }
  .anniversary__count { width: 100%; }

  .route__journey {
    min-height: 0;
    grid-template-columns: 30px minmax(0,1fr);
    grid-template-rows: auto 84px auto 84px auto;
    padding: 34px 0;
    align-items: center;
  }
  .route-stop,
  .route-stop--final {
    grid-column: 2;
    text-align: left;
    padding-left: 22px;
  }
  .route-stop:nth-of-type(1) { grid-row: 1; }
  .route-stop:nth-of-type(3) { grid-row: 3; }
  .route-stop:nth-of-type(5) { grid-row: 5; }
  .route-stop::before {
    position: absolute;
    left: -8px;
    top: 50%;
    margin: 0;
    transform: translate(-50%, -50%);
  }
  .route-stop--final::before { justify-self: auto; }
  .route-segment {
    grid-column: 1;
    width: 1px;
    height: 100%;
    margin: 0;
    justify-self: center;
    background: repeating-linear-gradient(to bottom, rgba(231,224,212,.33) 0 5px, transparent 5px 12px);
  }
  .route-segment:nth-of-type(2) { grid-row: 2; }
  .route-segment:nth-of-type(4) { grid-row: 4; }
  .route-segment i { left: 50%; top: 50%; }
  .route__after { max-width: 38ch; margin-left: 0 !important; margin-right: auto !important; }

  .portrait__image--special { aspect-ratio: 1409 / 1536 !important; }
}

@media (max-width: 640px) {
  .anniversary { padding-top: 74px; padding-bottom: 82px; }
  .anniversary__copy h2 { font-size: clamp(44px, 13vw, 64px); }
  .anniversary__count { grid-template-columns: repeat(2, 1fr); }
  .anniversary__count div { min-height: 112px; border-bottom: 1px solid var(--line); }
  .anniversary__count div:nth-child(2) { border-right: 0; }
  .anniversary__count div:nth-child(3),
  .anniversary__count div:nth-child(4) { border-bottom: 0; }
  .anniversary__count strong { font-size: clamp(38px, 12vw, 58px); }

  .route__journey {
    grid-template-columns: 24px minmax(0,1fr);
    grid-template-rows: auto 68px auto 68px auto;
    padding: 28px 0;
  }
  .route-stop { padding-left: 18px; }
  .route-stop span { font-size: clamp(26px, 9vw, 38px); }
  .route-stop small { font-size: 8px; }
  .route-stop::before { left: -6px; }

  .portrait--special .portrait__copy::before { right: 20px; top: 18px; }
  .secret-note { width: 100vw; max-width: none; height: 100svh; max-height: none; border: 0; }
  .secret-note__inner { min-height: 100svh; padding: 58px 24px; }
  .secret-note h2 { font-size: clamp(48px, 15vw, 72px); }
}

/* advanced.css */
/* v13 — advanced experience layer */

.intro { isolation:isolate; overflow:hidden; }
.intro::before,.intro::after { content:""; position:absolute; inset:-12%; pointer-events:none; }
.intro::before { z-index:-1; background:radial-gradient(circle at 72% 42%,rgba(207,95,68,.24),transparent 22%),radial-gradient(circle at 23% 64%,rgba(255,198,137,.12),transparent 18%),linear-gradient(115deg,transparent 18%,rgba(207,95,68,.13) 42%,transparent 63%); filter:blur(18px); mix-blend-mode:screen; animation:filmBurn 2.4s cubic-bezier(.2,.75,.2,1) both; }
.intro::after { opacity:.22; background:repeating-linear-gradient(90deg,transparent 0 3px,rgba(255,255,255,.025) 3px 4px),radial-gradient(circle at center,transparent 0 52%,rgba(0,0,0,.5) 100%); animation:gateFlicker .22s steps(2,end) 8; }
.intro__mark { position:relative; animation:titleResolve 1.65s cubic-bezier(.2,.8,.2,1) both; }
.intro__mark::after { content:"SADIK CAN  ×  FATMA NUR"; position:absolute; left:50%; top:calc(100% + 24px); transform:translateX(-50%); width:max-content; color:rgba(231,224,212,.48); font:500 8px/1 var(--mono); letter-spacing:.22em; white-space:nowrap; }
html.return-visit .intro { animation:introReturn .95s .55s both; }
@keyframes filmBurn { 0%{opacity:0;transform:translate3d(-8%,4%,0) scale(1.05)}22%{opacity:1}62%{opacity:.34;transform:translate3d(4%,-3%,0) scale(1.12)}100%{opacity:0;transform:translate3d(8%,-7%,0) scale(1.17)} }
@keyframes gateFlicker { 0%,100%{opacity:.12}50%{opacity:.32} }
@keyframes titleResolve { 0%{opacity:0;filter:blur(12px);transform:translateY(14px) scale(.985);letter-spacing:.2em}45%{opacity:1;filter:blur(0)}100%{opacity:1;transform:none} }
@keyframes introReturn { to{opacity:0;visibility:hidden;pointer-events:none} }

.context-note { width:fit-content; max-width:48ch; margin:18px 0 0; padding-top:13px; border-top:1px solid rgba(231,224,212,.12); color:rgba(231,224,212,.52); font:500 8px/1.5 var(--mono); letter-spacing:.11em; text-transform:uppercase; }

.story-progress { position:fixed; z-index:260; top:0; left:0; right:0; height:2px; pointer-events:none; background:rgba(231,224,212,.035); }
.story-progress i { display:block; width:100%; height:100%; background:var(--accent); transform:scaleX(var(--story-progress,0)); transform-origin:left center; box-shadow:0 0 15px rgba(207,95,68,.35); transition:transform .08s linear; }
.chapter-indicator { position:fixed; z-index:90; left:max(18px,env(safe-area-inset-left)); bottom:max(18px,calc(env(safe-area-inset-bottom) + 14px)); display:flex; align-items:center; gap:10px; color:rgba(231,224,212,.42); font:500 8px/1 var(--mono); letter-spacing:.12em; pointer-events:none; mix-blend-mode:screen; }
.chapter-indicator span { color:var(--accent); }
.chapter-indicator b { font-weight:500; }

.experience-controls { position:fixed; z-index:220; right:max(16px,env(safe-area-inset-right)); bottom:max(16px,calc(env(safe-area-inset-bottom) + 10px)); display:flex; align-items:center; gap:8px; }
.experience-control { min-height:42px; border:1px solid rgba(231,224,212,.13); border-radius:999px; padding:0 14px; display:inline-flex; align-items:center; gap:9px; background:rgba(10,9,8,.84); color:var(--paper); box-shadow:0 12px 30px rgba(0,0,0,.24); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); cursor:pointer; font:500 8px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; transition:border-color .25s ease,transform .25s ease,background .25s ease; }
.experience-control:hover { transform:translateY(-2px); border-color:rgba(207,95,68,.48); background:rgba(15,13,12,.94); }
.experience-control[hidden] { display:none!important; }
.sound-bars { width:14px; height:14px; display:flex; align-items:center; justify-content:center; gap:2px; }
.sound-bars i { width:2px; height:4px; border-radius:2px; background:var(--accent); }
.soundtrack-playing .sound-bars i { animation:soundBar .75s ease-in-out infinite alternate; }
.soundtrack-playing .sound-bars i:nth-child(2){animation-delay:-.28s}.soundtrack-playing .sound-bars i:nth-child(3){animation-delay:-.5s}
@keyframes soundBar { to{height:13px} }

.spotify-dock { position:fixed; z-index:215; right:max(16px,env(safe-area-inset-right)); bottom:max(70px,calc(env(safe-area-inset-bottom) + 64px)); width:min(430px,calc(100vw - 32px)); padding:14px; border:1px solid rgba(231,224,212,.12); background:rgba(9,8,7,.96); box-shadow:0 30px 90px rgba(0,0,0,.46); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px); opacity:0; visibility:hidden; pointer-events:none; transform:translateY(14px) scale(.985); transition:opacity .24s ease,transform .24s ease,visibility .24s; }
.spotify-dock.is-open { opacity:1; visibility:visible; pointer-events:auto; transform:none; }
.spotify-dock__top { min-height:40px; padding:2px 2px 12px; display:flex; align-items:center; justify-content:space-between; gap:18px; }
.spotify-dock__top div { display:grid; gap:5px; }
.spotify-dock__top small { color:var(--accent); font:500 7px/1 var(--mono); letter-spacing:.16em; }
.spotify-dock__top strong { color:rgba(231,224,212,.65); font:500 9px/1 var(--mono); letter-spacing:.12em; }
.spotify-dock__minimize { width:36px; height:36px; border:0; border-radius:50%; background:rgba(231,224,212,.05); color:var(--paper); cursor:pointer; }
.spotify-dock__embed { min-height:152px; display:grid; place-items:center; color:rgba(231,224,212,.42); font:500 8px/1 var(--mono); letter-spacing:.1em; }
.spotify-dock__embed iframe { display:block; width:100%!important; min-height:152px; border:0; }

body.anniversary-week .anniversary { box-shadow:inset 0 0 90px rgba(207,95,68,.035); }
body.anniversary-day .anniversary { box-shadow:inset 0 0 140px rgba(207,95,68,.09); }
body.anniversary-day .anniversary__count strong { color:var(--accent); }
body.anniversary-day .finale em { text-shadow:0 0 45px rgba(207,95,68,.2); }
.anniversary-sparks { position:fixed; inset:0; z-index:70; pointer-events:none; overflow:hidden; }
.anniversary-sparks i { position:absolute; left:var(--x); top:-12px; width:var(--size); height:calc(var(--size) * 1.8); border-radius:999px; background:var(--accent); opacity:0; animation:sparkFall var(--duration) var(--delay) linear infinite; box-shadow:0 0 14px rgba(207,95,68,.3); }
@keyframes sparkFall { 0%{opacity:0;transform:translate3d(0,-5vh,0) rotate(0deg)}10%{opacity:.75}85%{opacity:.35}100%{opacity:0;transform:translate3d(22px,105vh,0) rotate(250deg)} }

.route__journey .route-stop,.route__journey .route-segment,.anniversary__count div,.filmstrip .memory-card,.playlist__stage,.portrait--special { transition:opacity .75s cubic-bezier(.2,.8,.2,1),transform .85s cubic-bezier(.2,.8,.2,1); }
.route__journey:not(.advanced-visible) .route-stop { opacity:.28; transform:translateY(12px); }
.route__journey:not(.advanced-visible) .route-segment { opacity:.12; transform:scaleX(.1); }
.route__journey.advanced-visible .route-segment { transform:scaleX(1); transform-origin:left center; }
.route__journey.advanced-visible .route-stop:nth-child(3){transition-delay:.14s}.route__journey.advanced-visible .route-stop:nth-child(5){transition-delay:.28s}
.anniversary__count:not(.advanced-visible) div { opacity:.3; transform:translateY(10px); }
.anniversary__count.advanced-visible div:nth-child(2){transition-delay:.06s}.anniversary__count.advanced-visible div:nth-child(3){transition-delay:.12s}.anniversary__count.advanced-visible div:nth-child(4){transition-delay:.18s}
.filmstrip:not(.advanced-visible) .memory-card { opacity:.55; transform:translateY(18px) scale(.985); }
.filmstrip.advanced-visible .memory-card:nth-child(2){transition-delay:.07s}.filmstrip.advanced-visible .memory-card:nth-child(3){transition-delay:.14s}.filmstrip.advanced-visible .memory-card:nth-child(4){transition-delay:.21s}

.finale__date { cursor:pointer; position:relative; user-select:none; -webkit-user-select:none; touch-action:manipulation; outline:none; }
.finale__date::after { content:""; position:absolute; left:50%; bottom:-10px; width:34px; height:1px; background:var(--accent); transform:translateX(-50%) scaleX(0); transform-origin:center; transition:transform 1.3s linear; }
.finale__date.is-holding::after { transform:translateX(-50%) scaleX(1); }
.finale__date:focus-visible { color:var(--accent); }
.deep-secret { width:min(92vw,820px); border:1px solid rgba(231,224,212,.15); padding:0; background:rgba(8,7,6,.988); color:var(--paper); }
.deep-secret::backdrop { background:rgba(0,0,0,.88); backdrop-filter:blur(14px); }
.deep-secret__inner { position:relative; min-height:min(74svh,650px); display:flex; flex-direction:column; justify-content:center; padding:clamp(48px,8vw,92px); overflow:hidden; }
.deep-secret__inner::before { content:"30"; position:absolute; right:-28px; bottom:-70px; color:rgba(231,224,212,.025); font:400 clamp(220px,38vw,420px)/.8 var(--serif); letter-spacing:-.09em; pointer-events:none; }
.deep-secret h2 { max-width:12ch; margin:24px 0; font:400 clamp(48px,7vw,88px)/.92 var(--serif); letter-spacing:-.05em; }
.deep-secret h2 em { color:var(--accent); font-weight:400; }
.deep-secret__inner>p:not(.eyebrow) { max-width:46ch; color:var(--muted); line-height:1.8; }
.deep-secret__inner>span { margin-top:40px; color:rgba(231,224,212,.58); font:500 8px/1 var(--mono); letter-spacing:.15em; }
.deep-secret__close { position:absolute; z-index:3; right:16px; top:14px; width:42px; height:42px; border:0; background:transparent; color:var(--paper); font-size:27px; cursor:pointer; }

.connectivity-toast { position:fixed; z-index:300; left:50%; bottom:max(82px,calc(env(safe-area-inset-bottom) + 76px)); transform:translate(-50%,12px); max-width:calc(100vw - 32px); padding:11px 15px; border:1px solid rgba(231,224,212,.12); border-radius:999px; background:rgba(8,7,6,.94); color:rgba(231,224,212,.72); font:500 8px/1.3 var(--mono); letter-spacing:.08em; text-transform:uppercase; opacity:0; visibility:hidden; transition:.22s ease; backdrop-filter:blur(14px); }
.connectivity-toast.is-visible { opacity:1; visibility:visible; transform:translate(-50%,0); }
.connectivity-toast[data-mode="online"] { border-color:rgba(207,95,68,.42); }

html.is-standalone .site-header { padding-top:max(env(safe-area-inset-top),8px); }
html.is-standalone .story-progress { top:env(safe-area-inset-top); }

@media (max-width:760px) {
  .chapter-indicator { display:none; }
  .experience-controls { left:12px; right:12px; bottom:max(12px,calc(env(safe-area-inset-bottom) + 8px)); justify-content:flex-end; }
  .experience-control { min-width:42px; padding:0 12px; }
  .experience-control--share .experience-control__label,.experience-control--install .experience-control__label { display:none; }
  .spotify-dock { left:12px; right:12px; width:auto; bottom:max(66px,calc(env(safe-area-inset-bottom) + 60px)); }
  .context-note { font-size:7px; max-width:42ch; }
  .route__journey:not(.advanced-visible) .route-segment { transform:scaleY(.1); }
  .route__journey.advanced-visible .route-segment { transform:scaleY(1); transform-origin:center top; }
}

@media (prefers-reduced-motion:reduce) {
  .intro::before,.intro::after,.intro__mark,.anniversary-sparks i,.soundtrack-playing .sound-bars i { animation:none!important; }
  .route__journey .route-stop,.route__journey .route-segment,.anniversary__count div,.filmstrip .memory-card,.playlist__stage,.portrait--special { opacity:1!important; transform:none!important; transition:none!important; }
  .story-progress i { transition:none; }
}

/* polish.css */
/* v14 — mobile navigation + share control polish */

/* Share button: replace the plain arrow feel with a deliberate floating control. */
.experience-control--share {
  position: relative;
  min-width: 46px;
  width: 46px;
  height: 46px;
  min-height: 46px;
  padding: 0;
  justify-content: center;
  border-radius: 50%;
  border-color: rgba(231,224,212,.18);
  background:
    radial-gradient(circle at 32% 24%, rgba(255,255,255,.07), transparent 42%),
    rgba(11,10,9,.92);
  box-shadow: 0 14px 34px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.018);
}
.experience-control--share:hover {
  transform: translateY(-2px) scale(1.02);
  border-color: rgba(207,95,68,.55);
  background: rgba(15,13,12,.97);
}
.experience-control--share svg {
  width: 17px;
  height: 17px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.experience-control--share::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  border: 1px solid rgba(207,95,68,0);
  transition: border-color .25s ease, transform .25s ease;
}
.experience-control--share:hover::after {
  border-color: rgba(207,95,68,.24);
  transform: scale(.94);
}

@media (min-width: 761px) {
  .experience-control--share {
    width: auto;
    min-width: 94px;
    padding: 0 15px 0 13px;
    border-radius: 999px;
    gap: 9px;
  }
  .experience-control--share .experience-control__label { display: inline !important; }
}

/* Mobile/tablet navigation rebuilt as a proper full-screen story index. */
@media (max-width: 980px) {
  .site-header {
    z-index: 500 !important;
    height: 72px;
    padding-left: max(18px, env(safe-area-inset-left));
    padding-right: max(18px, env(safe-area-inset-right));
    grid-template-columns: 1fr auto !important;
    background: linear-gradient(to bottom, rgba(10,9,8,.94), rgba(10,9,8,.22), transparent) !important;
  }

  .site-header .brand {
    position: relative;
    z-index: 504;
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 44px;
    color: var(--paper);
    transition: color .25s ease, opacity .25s ease;
  }

  .menu-toggle {
    position: relative;
    z-index: 504 !important;
    display: grid !important;
    width: 46px !important;
    height: 46px !important;
    padding: 0;
    place-content: center;
    gap: 6px;
    border: 1px solid rgba(231,224,212,.15) !important;
    border-radius: 50%;
    background: rgba(11,10,9,.72) !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.22);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    -webkit-tap-highlight-color: transparent;
  }
  .menu-toggle span {
    width: 19px !important;
    height: 1px !important;
    justify-self: center !important;
    background: var(--paper) !important;
    transform-origin: center;
  }
  .menu-toggle span:last-child { width: 13px !important; justify-self: end !important; margin-right: 1px; }
  body.menu-open .menu-toggle {
    border-color: rgba(207,95,68,.44) !important;
    background: rgba(16,13,12,.96) !important;
  }
  body.menu-open .menu-toggle span:first-child {
    width: 19px !important;
    transform: translateY(3.5px) rotate(45deg) !important;
  }
  body.menu-open .menu-toggle span:last-child {
    width: 19px !important;
    transform: translateY(-3.5px) rotate(-45deg) !important;
  }

  .nav {
    counter-reset: mobileNav;
    position: fixed !important;
    inset: 0 !important;
    z-index: 502 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 0 !important;
    padding:
      max(112px, calc(env(safe-area-inset-top) + 92px))
      clamp(24px, 7vw, 54px)
      max(76px, calc(env(safe-area-inset-bottom) + 58px)) !important;
    overflow-y: auto;
    overscroll-behavior: contain;
    background:
      radial-gradient(circle at 88% 18%, rgba(207,95,68,.14), transparent 25%),
      radial-gradient(circle at 9% 82%, rgba(231,224,212,.045), transparent 25%),
      linear-gradient(180deg, #0a0908 0%, #0b0a09 58%, #080706 100%) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(-8px) scale(1.006) !important;
    transition: opacity .28s ease, transform .3s cubic-bezier(.2,.75,.2,1), visibility .28s !important;
  }

  .nav::before {
    content: "STORY INDEX  /  30·05·2019";
    width: min(100%, 760px);
    margin: 0 auto 24px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(231,224,212,.11);
    color: rgba(231,224,212,.42);
    font: 500 8px/1 var(--mono);
    letter-spacing: .16em;
  }
  .nav::after {
    content: "SADIK CAN  ×  FATMA NUR";
    width: min(100%, 760px);
    margin: 24px auto 0;
    color: rgba(231,224,212,.28);
    font: 500 8px/1.3 var(--mono);
    letter-spacing: .15em;
  }

  body.menu-open .nav {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  .nav a {
    counter-increment: mobileNav;
    position: relative;
    width: min(100%, 760px);
    min-height: 72px;
    margin: 0 auto;
    padding: 18px 42px 18px 44px !important;
    display: flex !important;
    align-items: center;
    border-bottom: 1px solid rgba(231,224,212,.095);
    color: var(--paper) !important;
    font: 400 clamp(28px, 8vw, 48px)/1 var(--sans) !important;
    letter-spacing: -.045em !important;
    text-transform: none !important;
    opacity: 0;
    transform: translateY(12px);
    transition: color .22s ease, padding-left .22s ease, opacity .35s ease, transform .35s ease !important;
    -webkit-tap-highlight-color: transparent;
  }
  .nav a::before {
    content: "0" counter(mobileNav);
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    color: var(--accent);
    font: 500 8px/1 var(--mono);
    letter-spacing: .08em;
  }
  .nav a::after {
    content: "↗";
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    color: rgba(231,224,212,.32);
    font: 300 18px/1 var(--sans);
    transition: color .22s ease, transform .22s ease;
  }
  .nav a:active {
    color: var(--accent-soft) !important;
    padding-left: 50px !important;
  }
  .nav a:active::after { color: var(--accent); transform: translateY(-50%) rotate(45deg); }

  body.menu-open .nav a { opacity: 1; transform: none; }
  body.menu-open .nav a:nth-of-type(1) { transition-delay: .05s !important; }
  body.menu-open .nav a:nth-of-type(2) { transition-delay: .09s !important; }
  body.menu-open .nav a:nth-of-type(3) { transition-delay: .13s !important; }
  body.menu-open .nav a:nth-of-type(4) { transition-delay: .17s !important; }

  body.menu-open .experience-controls,
  body.menu-open .chapter-indicator,
  body.menu-open .spotify-dock {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  body.menu-open .brand { color: rgba(231,224,212,.72); }
}

@media (max-width: 560px) {
  .nav {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
  .nav a {
    min-height: 66px;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    font-size: clamp(27px, 9.5vw, 39px) !important;
  }
  .experience-controls {
    gap: 7px !important;
  }
  .experience-control--share {
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
    padding: 0 !important;
  }
}

/* final-v16.css */
/* v16 — comprehensive stability, responsive and accessibility layer */

:root {
  --header-h: 76px;
  --focus-ring: rgba(227,154,122,.96);
  --ui-surface: rgba(10,9,8,.92);
}

html { scroll-padding-top: calc(var(--header-h) + 18px); }
body { min-width: 0; }

#story,
#memories,
#playlist,
#now,
#anniversary,
.route,
.portrait--special,
.finale { scroll-margin-top: calc(var(--header-h) + 18px); }

/* A consistent, visible keyboard focus treatment. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
dialog :focus-visible {
  outline: 2px solid var(--focus-ring) !important;
  outline-offset: 4px;
  border-radius: 3px;
}

.brand:focus-visible,
.menu-toggle:focus-visible,
.experience-control:focus-visible {
  border-radius: 999px;
}

/* Desktop navigation gets a subtle current-section state. */
@media (min-width: 981px) {
  .nav a[aria-current="page"] { color: var(--paper); }
  .nav a[aria-current="page"]::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    margin-top: 7px;
    background: var(--accent);
    transform-origin: left center;
  }
}

/* Shared single Spotify player — one iframe serves both the page section and floating dock. */
.playlist__embed--shared {
  min-height: 154px;
  display: grid;
  align-items: center;
}
.playlist__embed--shared::before { inset: -10px; }
.playlist__embed--shared #spotifyDockEmbed {
  min-height: 152px;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: #121212;
}
.playlist__embed--shared #spotifyDockEmbed iframe {
  display: block;
  width: 100% !important;
  height: 152px !important;
  min-height: 152px !important;
  border: 0;
  border-radius: 12px;
}
.spotify-dock__player-slot { width: 100%; }
.spotify-dock__player-slot #spotifyDockEmbed { width: 100%; }
.spotify-dock__player-slot #spotifyDockEmbed iframe {
  display: block;
  width: 100% !important;
  height: 152px !important;
  min-height: 152px !important;
  border: 0;
}
.playlist__copy { min-height: 230px; }

/* Prevent floating controls from covering the final lines on small screens. */
@media (max-width: 760px) {
  .finale { padding-bottom: max(118px, calc(92px + env(safe-area-inset-bottom))); }
  .footer {
    min-height: max(96px, calc(76px + env(safe-area-inset-bottom)));
    height: auto;
    padding-bottom: max(20px, env(safe-area-inset-bottom));
  }
  .experience-controls {
    bottom: max(12px, calc(env(safe-area-inset-bottom) + 8px)) !important;
    max-width: calc(100vw - 24px);
  }
  .experience-control { -webkit-tap-highlight-color: transparent; }
}

/* Memory rail: predictable snapping and no clipped fourth card. */
.filmstrip {
  scroll-padding-inline: var(--pad);
  -webkit-overflow-scrolling: touch;
}
.memory-card {
  scroll-snap-stop: always;
}
@media (max-width: 640px) {
  .memory-card,
  .memory-card--tall {
    flex: 0 0 min(78vw, 360px);
    min-width: min(78vw, 360px);
  }
  .filmstrip::after {
    content: "";
    flex: 0 0 max(8px, calc(var(--pad) - 10px));
  }
  .hero__visual {
    width: 100% !important;
    max-width: 620px;
    justify-self: stretch !important;
  }
}

/* Dialogs: safe-area aware and reliably above fixed UI. */
.lightbox,
.secret-note,
.deep-secret { z-index: 1400 !important; }
.lightbox::backdrop,
.secret-note::backdrop,
.deep-secret::backdrop { z-index: 1390; }
@media (max-width: 640px) {
  .lightbox__close,
  .secret-note__close,
  .deep-secret__close {
    top: max(14px, env(safe-area-inset-top)) !important;
    right: max(14px, env(safe-area-inset-right)) !important;
  }
  .lightbox figure { padding-top: max(8px, env(safe-area-inset-top)); }
}

/* v16 mobile navigation is fully isolated from legacy nav layers. */
.mobile-menu-v15 { display: none !important; }

@media (max-width: 980px) {
  :root { --header-h: calc(68px + env(safe-area-inset-top)); }

  #siteNav.nav { display: none !important; }

  .site-header {
    z-index: 1210 !important;
    grid-template-columns: 1fr auto !important;
    height: var(--header-h) !important;
    padding-top: env(safe-area-inset-top);
    padding-left: max(18px, env(safe-area-inset-left)) !important;
    padding-right: max(18px, env(safe-area-inset-right)) !important;
  }

  .menu-toggle {
    position: relative !important;
    z-index: 1230 !important;
    display: grid !important;
    place-content: center;
    width: 46px !important;
    height: 46px !important;
    padding: 0 !important;
    border: 1px solid rgba(231,224,212,.18) !important;
    border-radius: 50% !important;
    background: rgba(10,9,8,.86) !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.24);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    -webkit-tap-highlight-color: transparent;
  }
  .menu-toggle span {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    display: block !important;
    width: 18px !important;
    height: 1px !important;
    margin: 0 !important;
    background: var(--paper) !important;
    transform-origin: center !important;
    transition: transform .24s ease, opacity .2s ease !important;
  }
  .menu-toggle span:first-child { transform: translate(-50%, -4px) !important; }
  .menu-toggle span:last-child { transform: translate(-50%, 4px) !important; }
  body.menu-open .menu-toggle span:first-child { transform: translate(-50%, 0) rotate(45deg) !important; }
  body.menu-open .menu-toggle span:last-child { transform: translate(-50%, 0) rotate(-45deg) !important; }

  body.menu-open {
    overflow: hidden !important;
    touch-action: auto !important;
  }
  body.menu-open .brand {
    opacity: .42;
    pointer-events: none;
  }
  body.menu-open .experience-controls,
  body.menu-open .spotify-dock,
  body.menu-open .chapter-indicator {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .mobile-menu-v16 {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding:
      max(104px, calc(env(safe-area-inset-top) + 88px))
      max(22px, env(safe-area-inset-right))
      max(44px, calc(env(safe-area-inset-bottom) + 28px))
      max(22px, env(safe-area-inset-left));
    background:
      radial-gradient(circle at 88% 14%, rgba(207,95,68,.16), transparent 27%),
      radial-gradient(circle at 8% 88%, rgba(231,224,212,.045), transparent 26%),
      linear-gradient(180deg, #0a0908 0%, #090807 100%);
    color: var(--paper);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity .22s ease, transform .26s cubic-bezier(.2,.75,.2,1), visibility .22s;
  }
  .mobile-menu-v16[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }
  .mobile-menu-v16__inner {
    width: min(100%, 720px);
    margin: auto;
  }
  .mobile-menu-v16__eyebrow {
    margin: 0 0 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(231,224,212,.12);
    color: rgba(231,224,212,.46);
    font: 500 8px/1 var(--mono);
    letter-spacing: .17em;
    text-transform: uppercase;
  }
  .mobile-menu-v16__links { display: grid; }
  .mobile-menu-v16__links a {
    display: grid;
    grid-template-columns: 38px minmax(0,1fr) 24px;
    align-items: center;
    min-height: 72px;
    border-bottom: 1px solid rgba(231,224,212,.1);
    color: var(--paper);
    font: 400 clamp(30px, 8.6vw, 46px)/1 var(--sans);
    letter-spacing: -.045em;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-menu-v16__links a small {
    color: var(--accent);
    font: 500 8px/1 var(--mono);
    letter-spacing: .08em;
  }
  .mobile-menu-v16__links a .mobile-menu-v16__arrow {
    justify-self: end;
    color: rgba(231,224,212,.34);
    font: 300 20px/1 var(--sans);
    transition: transform .2s ease, color .2s ease;
  }
  .mobile-menu-v16__links a:active { color: var(--accent-soft); }
  .mobile-menu-v16__links a:active .mobile-menu-v16__arrow {
    color: var(--accent);
    transform: translateX(3px);
  }
  .mobile-menu-v16__footer {
    margin: 24px 0 0;
    color: rgba(231,224,212,.3);
    font: 500 8px/1.5 var(--mono);
    letter-spacing: .14em;
    text-transform: uppercase;
  }
}

@media (max-width: 560px) {
  .mobile-menu-v16 { padding-left: 20px; padding-right: 20px; }
  .mobile-menu-v16__links a {
    min-height: 66px;
    grid-template-columns: 34px minmax(0,1fr) 22px;
    font-size: clamp(28px, 9.4vw, 39px);
  }
}

/* Short/landscape phones must still be able to scroll the menu. */
@media (max-width: 980px) and (max-height: 560px) {
  .mobile-menu-v16 {
    justify-content: flex-start;
    padding-top: max(80px, calc(env(safe-area-inset-top) + 72px));
    padding-bottom: max(24px, env(safe-area-inset-bottom));
  }
  .mobile-menu-v16__inner { margin: 0 auto; }
  .mobile-menu-v16__eyebrow { margin-bottom: 10px; }
  .mobile-menu-v16__links a {
    min-height: 52px;
    font-size: clamp(25px, 6.8vw, 34px);
  }
  .mobile-menu-v16__footer { margin-top: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu-v16,
  .mobile-menu-v16__links a,
  .menu-toggle span { transition: none !important; }
}


/* v19 desktop/mobile boundary + footer repair */
.mobile-menu-v16 {
  display: none !important;
}

.footer {
  min-height: 92px;
  height: auto;
  margin-inline: var(--pad);
  padding: 24px 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 28px;
  border-top: 1px solid rgba(231,224,212,.14);
  color: rgba(231,224,212,.52);
  font: 500 8px/1.4 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.footer span:nth-child(2) {
  justify-self: center;
  color: rgba(231,224,212,.76);
}

.footer span:last-child {
  justify-self: end;
}

@media (max-width: 980px) {
  .mobile-menu-v16 {
    display: flex !important;
  }

  .footer {
    min-height: max(88px, calc(70px + env(safe-area-inset-bottom)));
    grid-template-columns: 1fr auto;
    gap: 16px;
    padding-bottom: max(20px, env(safe-area-inset-bottom));
  }

  .footer span:nth-child(2) {
    display: none;
  }
}

@media (max-width: 560px) {
  .footer {
    margin-inline: 18px;
    font-size: 7px;
    letter-spacing: .11em;
  }
}


/* Keyboard skip navigation */
.skip-link{
  position:fixed;
  z-index:100000;
  top:max(10px,env(safe-area-inset-top));
  left:12px;
  transform:translateY(-160%);
  padding:11px 14px;
  border:1px solid currentColor;
  border-radius:999px;
  background:#e7e0d4;
  color:#0a0908;
  font:600 12px/1 system-ui,-apple-system,sans-serif;
  text-decoration:none;
  transition:transform .16s ease;
}
.skip-link:focus{transform:translateY(0);outline:2px solid #cf5f44;outline-offset:3px}


/* shared privacy controls */
html.consent-modal-open,html.consent-modal-open body{overflow:hidden}
:root{
  --consent-bg:#0c0b0a;
  --consent-paper:#e7e0d4;
  --consent-muted:#a29a91;
  --consent-line:rgba(231,224,212,.16);
  --consent-accent:#cf5f44;
  --consent-accent-soft:#e39a7a;
}
.consent-shell,
.consent-modal{font-family:Manrope,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.consent-shell[hidden],.consent-modal[hidden]{display:none!important}
.consent-shell{
  position:fixed;z-index:2147483000;inset:auto 0 0;
  padding:14px max(14px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));
  pointer-events:none;
}
.consent-banner{
  pointer-events:auto;width:min(980px,100%);margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:22px;
  padding:20px;border:1px solid var(--consent-line);
  background:rgba(12,11,10,.96);color:var(--consent-paper);
  box-shadow:0 24px 80px rgba(0,0,0,.45);
  backdrop-filter:blur(20px);border-radius:18px;
}
.consent-banner__eyebrow,.consent-modal__eyebrow{
  margin:0 0 8px;color:var(--consent-accent-soft);
  font:600 10px/1.25 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.14em;text-transform:uppercase;
}
.consent-banner h2,.consent-modal h2{
  margin:0;color:var(--consent-paper);font-weight:400;letter-spacing:-.035em
}
.consent-banner h2{font-size:clamp(23px,3vw,34px)}
.consent-banner p{
  max-width:70ch;margin:10px 0 0;color:var(--consent-muted);
  font-size:13px;line-height:1.65;
}
.consent-banner p a,.consent-modal a{color:var(--consent-paper);text-underline-offset:3px}
.consent-actions{display:flex;align-items:end;flex-wrap:wrap;gap:8px}
.consent-button{
  min-height:44px;padding:10px 15px;border:1px solid var(--consent-line);
  border-radius:999px;background:transparent;color:var(--consent-paper);
  font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.06em;cursor:pointer;white-space:nowrap
}
.consent-button:hover,.consent-button:focus-visible{
  border-color:var(--consent-paper);outline:2px solid transparent;background:rgba(255,255,255,.05)
}
.consent-button--primary{background:var(--consent-paper);color:#0a0908;border-color:var(--consent-paper)}
.consent-modal{
  position:fixed;z-index:2147483001;inset:0;display:grid;place-items:center;
  padding:max(18px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));
  background:rgba(0,0,0,.76);backdrop-filter:blur(16px)
}
.consent-dialog{
  width:min(720px,100%);max-height:min(780px,92svh);overflow:auto;
  border:1px solid var(--consent-line);border-radius:22px;
  background:var(--consent-bg);color:var(--consent-paper);
  box-shadow:0 30px 100px rgba(0,0,0,.55)
}
.consent-dialog__head,.consent-dialog__body,.consent-dialog__foot{padding:22px}
.consent-dialog__head{position:relative;border-bottom:1px solid var(--consent-line)}
.consent-dialog__head h2{font-size:clamp(30px,5vw,48px)}
.consent-dialog__head p{max-width:60ch;margin:12px 0 0;color:var(--consent-muted);font-size:13px;line-height:1.7}
.consent-close{
  position:absolute;top:16px;right:16px;width:40px;height:40px;
  border:1px solid var(--consent-line);border-radius:50%;background:transparent;
  color:var(--consent-paper);font-size:22px;cursor:pointer
}
.consent-row{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center;
  padding:18px 0;border-bottom:1px solid var(--consent-line)
}
.consent-row:first-child{padding-top:0}.consent-row:last-child{border-bottom:0;padding-bottom:0}
.consent-row h3{margin:0;color:var(--consent-paper);font-size:15px;font-weight:600}
.consent-row p{margin:7px 0 0;color:var(--consent-muted);font-size:12px;line-height:1.65}
.consent-switch{position:relative;display:inline-flex;align-items:center;gap:8px}
.consent-switch input{position:absolute;opacity:0;pointer-events:none}
.consent-switch__track{
  width:50px;height:28px;border:1px solid var(--consent-line);border-radius:999px;
  background:#23201d;position:relative;transition:.18s ease
}
.consent-switch__track::after{
  content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:var(--consent-muted);transition:.18s ease
}
.consent-switch input:checked + .consent-switch__track{background:var(--consent-paper);border-color:var(--consent-paper)}
.consent-switch input:checked + .consent-switch__track::after{transform:translateX(22px);background:#0a0908}
.consent-switch input:focus-visible + .consent-switch__track{outline:2px solid var(--consent-accent);outline-offset:3px}
.consent-switch input:disabled + .consent-switch__track{opacity:.7}
.consent-dialog__foot{
  display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
  border-top:1px solid var(--consent-line)
}
.consent-embed-placeholder{
  min-height:220px;display:grid;place-items:center;text-align:center;padding:28px;
  border:1px dashed var(--consent-line);border-radius:14px;
  background:rgba(255,255,255,.018);color:var(--consent-muted)
}
.consent-embed-placeholder__inner{max-width:48ch}
.consent-embed-placeholder strong{display:block;color:var(--consent-paper);font-size:15px}
.consent-embed-placeholder p{margin:8px 0 16px;font-size:12px;line-height:1.65}
@media(max-width:760px){
  .consent-banner{grid-template-columns:1fr}
  .consent-actions{align-items:stretch;display:grid;grid-template-columns:repeat(3,1fr)}
  .consent-button{padding-inline:10px;white-space:normal}
}
@media(max-width:520px){
  .consent-shell{padding:10px}
  .consent-banner{padding:16px;border-radius:14px}
  .consent-actions{grid-template-columns:1fr}
  .consent-dialog__head,.consent-dialog__body,.consent-dialog__foot{padding:18px}
  .consent-dialog__foot{display:grid;grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .consent-switch__track,.consent-switch__track::after{transition:none}
}

/* shared site footer */
.site-footer--shared{
  --sf-bg:#070605;
  --sf-paper:#ede6da;
  --sf-paper-soft:#c7beb3;
  --sf-muted:#827970;
  --sf-line:rgba(237,230,218,.13);
  --sf-line-strong:rgba(237,230,218,.24);
  --sf-accent:#d9684f;
  --sf-accent-soft:#e6a081;
  position:relative;
  z-index:5;
  width:100%;
  margin:0;
  overflow:hidden;
  isolation:isolate;
  color:var(--sf-paper);
  background:
    linear-gradient(180deg,rgba(255,255,255,.018),transparent 18%),
    linear-gradient(180deg,#0a0807 0%,var(--sf-bg) 44%,#050404 100%);
  border-top:1px solid var(--sf-line);
  font-family:Manrope,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

.site-footer--shared::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-4;
  pointer-events:none;
  opacity:.18;
  background-image:
    linear-gradient(rgba(255,255,255,.024) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:100% 72px,72px 100%;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.8),transparent 78%);
}

.site-footer--shared::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-3;
  pointer-events:none;
  background:
    radial-gradient(circle at 78% 22%,rgba(217,104,79,.13),transparent 28%),
    radial-gradient(circle at 18% 78%,rgba(255,255,255,.045),transparent 25%);
}

.site-footer__atmosphere{
  position:absolute;
  inset:0;
  z-index:-2;
  overflow:hidden;
  pointer-events:none;
}

.site-footer__halo{
  position:absolute;
  width:min(62vw,860px);
  aspect-ratio:1;
  right:-16vw;
  top:-34%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(217,104,79,.12) 0,rgba(217,104,79,.035) 34%,transparent 68%);
  filter:blur(3px);
}

.site-footer__orbit{
  position:absolute;
  border:1px solid rgba(237,230,218,.09);
  border-radius:50%;
  transform:rotate(-18deg);
}

.site-footer__orbit--a{
  width:min(54vw,760px);
  aspect-ratio:1;
  right:-15vw;
  top:-28%;
}

.site-footer__orbit--b{
  width:min(31vw,450px);
  aspect-ratio:1;
  right:3vw;
  top:-9%;
  border-color:rgba(217,104,79,.13);
}

.site-footer__star{
  position:absolute;
  width:3px;
  height:3px;
  border-radius:50%;
  background:var(--sf-paper);
  box-shadow:0 0 18px rgba(237,230,218,.55);
  opacity:.48;
}

.site-footer__star--a{right:22%;top:16%}
.site-footer__star--b{right:8%;top:38%;width:2px;height:2px}
.site-footer__star--c{left:13%;bottom:26%;width:2px;height:2px;opacity:.28}

.site-footer__watermark{
  position:absolute;
  z-index:-1;
  right:-.035em;
  bottom:-.18em;
  color:transparent;
  -webkit-text-stroke:1px rgba(237,230,218,.055);
  font:300 clamp(110px,24vw,420px)/.72 Manrope,system-ui,sans-serif;
  letter-spacing:-.085em;
  white-space:nowrap;
  user-select:none;
  pointer-events:none;
}

.site-footer__inner{
  width:min(1440px,calc(100% - 56px));
  margin-inline:auto;
  padding:clamp(32px,4vw,56px) 0 clamp(26px,3.2vw,42px);
}

.site-footer__masthead{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:24px;
  min-height:44px;
  padding-bottom:22px;
  border-bottom:1px solid var(--sf-line);
  color:var(--sf-muted);
  font:600 9px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.site-footer__mark{
  justify-self:start;
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--sf-paper);
  text-decoration:none;
  letter-spacing:.2em;
}

.site-footer__mark-dot{
  width:7px;
  height:7px;
  border:1px solid var(--sf-accent-soft);
  border-radius:50%;
  position:relative;
}

.site-footer__mark-dot::after{
  content:"";
  position:absolute;
  inset:2px;
  border-radius:50%;
  background:var(--sf-accent);
}

.site-footer__route-line{
  justify-self:center;
  white-space:nowrap;
}

.site-footer__route-line i{
  margin:0 9px;
  color:var(--sf-accent-soft);
  font-style:normal;
}

.site-footer__edition{justify-self:end;text-align:right}

.site-footer__hero{
  display:grid;
  grid-template-columns:minmax(0,1.7fr) minmax(280px,.58fr);
  align-items:end;
  gap:clamp(34px,7vw,112px);
  padding:clamp(72px,10vw,152px) 0 clamp(68px,8vw,116px);
}

.site-footer__overline{
  margin:0 0 20px;
  color:var(--sf-accent-soft);
  font:600 9px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.19em;
  text-transform:uppercase;
}

.site-footer__hero h2{
  margin:0;
  max-width:9.5ch;
  font:400 clamp(60px,8.9vw,148px)/.82 Georgia,"Times New Roman",serif;
  letter-spacing:-.065em;
}

.site-footer__hero h2 span,
.site-footer__hero h2 em{display:block}

.site-footer__hero h2 em{
  margin-left:.58em;
  color:var(--sf-accent-soft);
  font-weight:400;
}

.site-footer__manifesto{
  margin:0 0 .8em;
  max-width:35ch;
  color:var(--sf-paper-soft);
  font-size:clamp(13px,1.1vw,15px);
  line-height:1.85;
}

.site-footer__manifesto span{
  display:block;
  margin-top:16px;
  color:var(--sf-muted);
}

.site-footer__routes{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--sf-line-strong);
  border-bottom:1px solid var(--sf-line-strong);
}

.site-footer__route{
  position:relative;
  min-height:154px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:end;
  gap:16px;
  padding:24px 22px 22px;
  color:var(--sf-paper);
  text-decoration:none;
  border-right:1px solid var(--sf-line);
  overflow:hidden;
  transition:background .35s ease,color .35s ease;
}

.site-footer__route:last-child{border-right:0}

.site-footer__route::before{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:2px;
  background:var(--sf-accent);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .4s cubic-bezier(.22,1,.36,1);
}

.site-footer__route::after{
  content:"";
  position:absolute;
  width:120px;
  height:120px;
  right:-72px;
  top:-76px;
  border-radius:50%;
  border:1px solid transparent;
  transition:border-color .35s ease,transform .5s cubic-bezier(.22,1,.36,1);
}

.site-footer__route:hover,
.site-footer__route:focus-visible,
.site-footer__route.is-current{
  background:rgba(237,230,218,.028);
  outline:none;
}

.site-footer__route:hover::before,
.site-footer__route:focus-visible::before,
.site-footer__route.is-current::before{transform:scaleX(1)}

.site-footer__route:hover::after,
.site-footer__route:focus-visible::after{
  border-color:rgba(217,104,79,.18);
  transform:scale(1.2);
}

.site-footer__route-index{
  align-self:start;
  padding-top:2px;
  color:var(--sf-muted);
  font:600 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.12em;
}

.site-footer__route-copy{display:grid;gap:8px}

.site-footer__route-copy strong{
  font:400 clamp(20px,2vw,29px)/1 Georgia,"Times New Roman",serif;
  letter-spacing:-.035em;
}

.site-footer__route-copy small{
  color:var(--sf-muted);
  font-size:10px;
  line-height:1.45;
}

.site-footer__route-arrow{
  align-self:start;
  color:var(--sf-muted);
  font-size:15px;
  transition:transform .3s ease,color .3s ease;
}

.site-footer__route:hover .site-footer__route-arrow,
.site-footer__route:focus-visible .site-footer__route-arrow{
  color:var(--sf-accent-soft);
  transform:translate(3px,-3px);
}

.site-footer__route.is-current .site-footer__route-index,
.site-footer__route.is-current .site-footer__route-arrow{color:var(--sf-accent-soft)}

.site-footer__utility{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:32px;
  align-items:end;
  padding:34px 0;
  border-bottom:1px solid var(--sf-line);
}

.site-footer__utility-copy{
  display:grid;
  grid-template-columns:auto minmax(0,500px);
  align-items:start;
  gap:28px;
}

.site-footer__utility-kicker{
  padding-top:3px;
  color:var(--sf-muted);
  font:600 9px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.15em;
  text-transform:uppercase;
  white-space:nowrap;
}

.site-footer__utility-copy p{
  margin:0;
  color:var(--sf-muted);
  font-size:11px;
  line-height:1.65;
}

.site-footer__utility-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:9px 22px;
}

.site-footer__utility-links a,
.site-footer__utility-links button{
  position:relative;
  padding:0 0 3px;
  border:0;
  background:none;
  color:var(--sf-paper-soft);
  text-decoration:none;
  font:500 10px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.06em;
  cursor:pointer;
}

.site-footer__utility-links a::after,
.site-footer__utility-links button::after{
  content:"";
  position:absolute;
  left:0;
  right:100%;
  bottom:0;
  height:1px;
  background:var(--sf-accent-soft);
  transition:right .28s ease;
}

.site-footer__utility-links a:hover::after,
.site-footer__utility-links a:focus-visible::after,
.site-footer__utility-links button:hover::after,
.site-footer__utility-links button:focus-visible::after{right:0}

.site-footer__utility-links a:focus-visible,
.site-footer__utility-links button:focus-visible{outline:none;color:var(--sf-paper)}

.site-footer__signature{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding-top:24px;
  color:var(--sf-muted);
  font:600 9px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.11em;
  text-transform:uppercase;
}

.site-footer__names{
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--sf-paper-soft);
}

.site-footer__names b{
  color:var(--sf-accent);
  font-weight:400;
}

.site-footer__status{
  display:flex;
  align-items:center;
  gap:10px;
}

.site-footer__live-dot{
  width:5px;
  height:5px;
  border-radius:50%;
  background:#87a17c;
  box-shadow:0 0 0 4px rgba(135,161,124,.07);
}

.site-footer__status-line{
  width:38px;
  height:1px;
  background:var(--sf-line-strong);
}

@media (hover:hover){
  .site-footer__halo{animation:site-footer-breathe 9s ease-in-out infinite alternate}
}

@keyframes site-footer-breathe{
  from{transform:scale(.96);opacity:.7}
  to{transform:scale(1.05);opacity:1}
}

@media(max-width:980px){
  .site-footer__masthead{grid-template-columns:1fr 1fr}
  .site-footer__route-line{display:none}
  .site-footer__hero{grid-template-columns:1fr;gap:32px}
  .site-footer__hero h2{max-width:10ch}
  .site-footer__manifesto{max-width:48ch}
  .site-footer__routes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .site-footer__route:nth-child(2){border-right:0}
  .site-footer__route:nth-child(-n+2){border-bottom:1px solid var(--sf-line)}
  .site-footer__utility{grid-template-columns:1fr}
  .site-footer__utility-links{justify-content:flex-start}
}

@media(max-width:640px){
  .site-footer--shared{
    background:linear-gradient(180deg,#0a0807 0%,#070605 56%,#050404 100%);
  }

  .site-footer--shared::before{
    opacity:.10;
    background-size:100% 56px,56px 100%;
    mask-image:linear-gradient(to bottom,rgba(0,0,0,.72),transparent 64%);
  }

  .site-footer--shared::after{
    background:none;
  }

  .site-footer__inner{
    width:calc(100% - 36px);
    padding:22px 0 24px;
  }

  .site-footer__halo{
    display:none;
  }

  .site-footer__orbit--a{
    width:86vw;
    right:-50vw;
    top:-5%;
    border-color:rgba(237,230,218,.055);
  }

  .site-footer__orbit--b,
  .site-footer__star--b,
  .site-footer__star--c{display:none}

  .site-footer__star--a{
    right:10%;
    top:9%;
    opacity:.34;
  }

  .site-footer__watermark{
    right:-.06em;
    bottom:auto;
    top:158px;
    font-size:27vw;
    line-height:.8;
    -webkit-text-stroke-color:rgba(237,230,218,.04);
    opacity:.7;
  }

  .site-footer__masthead{
    min-height:auto;
    grid-template-columns:1fr auto;
    gap:14px;
    padding-bottom:16px;
  }

  .site-footer__mark{
    gap:8px;
    font-size:9px;
    letter-spacing:.16em;
  }

  .site-footer__mark-dot{
    width:6px;
    height:6px;
  }

  .site-footer__edition{
    justify-self:end;
    max-width:18ch;
    text-align:right;
    font-size:8px;
    line-height:1.35;
    letter-spacing:.12em;
  }

  .site-footer__hero{
    display:block;
    padding:44px 0 42px;
  }

  .site-footer__overline{
    margin:0 0 14px;
    font-size:8px;
    letter-spacing:.16em;
  }

  .site-footer__hero h2{
    max-width:8.7ch;
    font-size:clamp(46px,14.2vw,64px);
    line-height:.9;
    letter-spacing:-.058em;
  }

  .site-footer__hero h2 em{
    margin-left:0;
    margin-top:.03em;
  }

  .site-footer__manifesto{
    max-width:31ch;
    margin:24px 0 0;
    padding-top:18px;
    border-top:1px solid var(--sf-line);
    color:var(--sf-paper-soft);
    font-size:12px;
    line-height:1.7;
  }

  .site-footer__manifesto span{
    margin-top:9px;
    color:var(--sf-muted);
  }

  .site-footer__routes{
    grid-template-columns:repeat(2,minmax(0,1fr));
    border:1px solid var(--sf-line-strong);
    border-radius:14px;
    overflow:hidden;
    background:rgba(255,255,255,.012);
  }

  .site-footer__route{
    min-height:112px;
    grid-template-columns:1fr auto;
    grid-template-rows:auto 1fr;
    align-items:start;
    gap:8px 10px;
    padding:16px 15px;
    border-right:1px solid var(--sf-line);
    border-bottom:1px solid var(--sf-line);
  }

  .site-footer__route:nth-child(2n){border-right:0}
  .site-footer__route:nth-last-child(-n+2){border-bottom:0}

  .site-footer__route::before{
    height:1px;
  }

  .site-footer__route::after{display:none}

  .site-footer__route-index{
    grid-column:1;
    grid-row:1;
    align-self:start;
    padding-top:0;
    font-size:8px;
  }

  .site-footer__route-copy{
    grid-column:1/-1;
    grid-row:2;
    align-self:end;
    gap:0;
  }

  .site-footer__route-copy strong{
    font-size:21px;
    line-height:1;
  }

  .site-footer__route-copy small{display:none}

  .site-footer__route-arrow{
    grid-column:2;
    grid-row:1;
    align-self:start;
    justify-self:end;
    font-size:13px;
    opacity:.58;
  }

  .site-footer__route:hover,
  .site-footer__route:focus-visible,
  .site-footer__route.is-current{
    padding-left:15px;
    background:rgba(217,104,79,.055);
  }

  .site-footer__utility{
    grid-template-columns:1fr;
    gap:18px;
    padding:26px 0 22px;
  }

  .site-footer__utility-copy{
    display:block;
  }

  .site-footer__utility-kicker{
    display:block;
    margin-bottom:9px;
    padding:0;
    font-size:8px;
  }

  .site-footer__utility-copy p{
    max-width:34ch;
    font-size:10px;
    line-height:1.65;
  }

  .site-footer__utility-links{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0;
    border-top:1px solid var(--sf-line);
    border-bottom:1px solid var(--sf-line);
  }

  .site-footer__utility-links a,
  .site-footer__utility-links button{
    min-height:42px;
    display:flex;
    align-items:center;
    padding:0;
    font-size:9px;
    letter-spacing:.04em;
  }

  .site-footer__utility-links a:nth-child(2){
    padding-left:14px;
    border-left:1px solid var(--sf-line);
  }

  .site-footer__utility-links button{
    grid-column:1/-1;
    justify-self:stretch;
    border-top:1px solid var(--sf-line);
    color:var(--sf-accent-soft);
  }

  .site-footer__utility-links a::after,
  .site-footer__utility-links button::after{display:none}

  .site-footer__signature{
    display:grid;
    grid-template-columns:1fr;
    gap:16px;
    padding-top:20px;
  }

  .site-footer__names{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:8px;
    width:100%;
    font-size:8px;
    line-height:1.45;
    letter-spacing:.08em;
  }

  .site-footer__names span:first-child{text-align:left}
  .site-footer__names span:last-child{text-align:right}

  .site-footer__status{
    width:100%;
    justify-content:space-between;
    gap:8px;
    font-size:8px;
  }

  .site-footer__status-line{
    flex:1;
    min-width:24px;
    max-width:none;
  }
}

@media(prefers-reduced-motion:reduce){
  .site-footer__halo{animation:none!important}
  .site-footer__route,
  .site-footer__route::before,
  .site-footer__route::after,
  .site-footer__route-arrow,
  .site-footer__utility-links a::after,
  .site-footer__utility-links button::after{transition:none!important}
}