/* ===== Tokens (dark futuristic) ===== */
:root {
  --bg: #05060a;
  --bg-2: #0a0c12;
  --ink: #e8ebf2;
  --muted: rgba(232,235,242,.55);
  --faint: rgba(232,235,242,.14);
  --hair: rgba(232,235,242,.09);
  --signal: #00ffd0;
  --pink: #c44dff;      /* atmosphere only */
  --violet: #c44dff;    /* atmosphere only */
  --cyan: #00ffd0;      /* the one signal accent */
  --orange: #00ffd0;
  --grad: linear-gradient(115deg, #00ffd0 0%, #5affe0 60%, #aef9ec 100%);
  --glow: 0 16px 40px rgba(0,0,0,.5), 0 0 16px rgba(0,255,208,.10);
  /* glass (clean — no neon halo) */
  --glass-bg: linear-gradient(rgba(255,255,255,.07), rgba(255,255,255,.02));
  --glass-bd: 1px solid rgba(255,255,255,.12);
  --glass-sh: inset 0 1px 0 rgba(255,255,255,.16), 0 12px 32px rgba(0,0,0,.4);
  --maxw: 1560px;
  --pad: clamp(1rem, 4.5vw, 6.5rem);
  --disp: "Oswald", "Arial Narrow", system-ui, sans-serif;
  --brand: "Oswald", "Arial Narrow", sans-serif;
  --ui: "Arial Narrow", "Archivo Narrow", Arial, system-ui, sans-serif;
  --mono: "Arial Narrow", "Archivo Narrow", Arial, sans-serif;
}
/* Type system (royalty-free, commercial-safe, deploys everywhere — loaded in <head>):
   MAIN/DISPLAY = Oswald (bold block-caps — the free, licensed stand-in for American
   Captain, which is personal-use only and can't ship on a commercial site).
   REST = Arial Narrow where the visitor has it (Windows/Office/most Macs), with
   Archivo Narrow from Google Fonts as the identical-looking free fallback for everyone
   else, so the narrow look is consistent on every device. */

* { margin: 0; padding: 0; box-sizing: border-box; }
/* Lenis smooth-scroll: never combine with CSS scroll-behavior: smooth (it fights the engine) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body { background: var(--bg); color: var(--ink); font-family: var(--ui); font-weight: 400; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
.disp { font-family: var(--disp); font-weight: 600; letter-spacing: -.01em; }
.brand { font-family: var(--brand); font-weight: 700; letter-spacing: .02em; }
.lbl { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.accent-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

@media (pointer: fine) { body { cursor: none; } a, button, [data-magnetic], .pad { cursor: none; } }

/* ===== Background (static gradient aurora — cheap, keeps scroll smooth) ===== */
.bg-soft { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(70% 55% at 50% 0%, #0a0c14, #05060a 70%); }
.field { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.grid-lines { position: fixed; inset: 0; z-index: 0; pointer-events: none; display: flex; justify-content: space-evenly; }
.grid-lines span { width: 1px; height: 100%; background: var(--hair); }
.grid-lines span:first-child { margin-left: 25%; }

/* notes + letter-morph styles removed — starfield now lives in field.js */

/* ===== Clean layer — soft vignette only (grain / aberration / scroll-skew removed) ===== */
.warp { position: relative; z-index: 2; }
.vignette { position: fixed; inset: 0; z-index: 5; pointer-events: none; background: radial-gradient(140% 125% at 50% 42%, transparent 72%, rgba(2,2,8,.28) 100%); }
@media (prefers-reduced-motion: reduce) { .warp { transform: none !important; } }

/* ===== Custom cursor (liquid glass) ===== */
.cursor, .cursor-ring { position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none; border-radius: 50%; transform: translate(-50%,-50%); }
.cursor { width: 7px; height: 7px; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
.cursor-ring { width: 46px; height: 46px; border: 1px solid rgba(255,255,255,.4); background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.24), rgba(255,255,255,.04) 46%, rgba(0,0,0,.06) 100%); backdrop-filter: blur(7px) saturate(1.9) brightness(1.06); -webkit-backdrop-filter: blur(7px) saturate(1.9) brightness(1.06); box-shadow: inset 0 1.5px 1px rgba(255,255,255,.7), inset 0 -8px 12px rgba(0,0,0,.42), inset 0 10px 18px rgba(255,255,255,.12), 0 10px 28px rgba(0,0,0,.45), 0 0 22px rgba(0,255,208,.14); transition: width .3s cubic-bezier(.2,.8,.2,1), height .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s; }
.cursor-ring.grow { width: 80px; height: 80px; box-shadow: inset 0 1.5px 1px rgba(255,255,255,.75), inset 0 -10px 16px rgba(0,0,0,.5), inset 0 14px 22px rgba(255,255,255,.16), 0 16px 36px rgba(0,0,0,.5), 0 0 32px rgba(0,255,208,.24); }
@media (pointer: coarse) { .cursor, .cursor-ring { display: none; } }

/* ===== Logo mark ===== */
.mark { color: var(--ink); width: 30px; height: 30px; flex: none; }
.mark--xl { width: clamp(70px, 11vw, 100px); height: clamp(70px, 11vw, 100px); margin-bottom: 1.4rem; }

/* ===== Nav (liquid glass) ===== */
.nav { position: fixed; top: 1rem; left: 0; right: 0; margin-inline: auto; z-index: 80; width: min(var(--maxw), calc(100% - 2rem)); display: flex; align-items: center; justify-content: space-between; padding: .6rem .7rem .6rem 1.1rem; border: var(--glass-bd); border-radius: 999px; background: linear-gradient(rgba(255,255,255,.08), rgba(255,255,255,.02)), rgba(10,10,18,.4); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 12px 40px rgba(0,0,0,.45); }
/* The glass blur lives on a layer behind the bar, and the bar is centred with margins rather than a
   transform — a transform or backdrop-filter on .nav itself would trap the full-screen phone menu inside the bar. */
.nav::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; backdrop-filter: blur(20px) saturate(1.8); -webkit-backdrop-filter: blur(20px) saturate(1.8); }
.nav__logo { display: flex; align-items: center; gap: .55rem; }
.nav__logo .brand { font-size: 1.25rem; line-height: 1; }
.nav__menu { display: flex; gap: .3rem; }
.nav__menu a { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: .5rem .95rem; border-radius: 999px; border: 1px solid transparent; transition: color .3s, background .3s, border-color .3s, box-shadow .3s, transform .3s cubic-bezier(.2,.8,.2,1); }
.nav__menu a:hover, .nav__menu a.active { color: var(--ink); transform: translateY(-1px); background: linear-gradient(rgba(255,255,255,.18), rgba(255,255,255,.05)); border-color: rgba(255,255,255,.22); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 6px 18px rgba(0,0,0,.4); }
.nav__toggle { display: none; flex-direction: column; gap: 6px; background: none; border: 0; padding: 4px; }
.nav__toggle span { width: 24px; height: 1.5px; background: var(--ink); transition: .3s; }

/* ===== Sections ===== */
.hero, .section { position: relative; z-index: 2; }
.section { max-width: var(--maxw); margin: 0 auto; padding: clamp(5.5rem, 13vw, 11rem) var(--pad); }
.sec-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 3.5rem; }
.sec-head .idx { display: none; } /* sections aren't a sequence — numbering removed */
.sec-head::after { content: ""; flex: 1; height: 1px; background: var(--hair); }
.sec-title { font-size: clamp(2rem, 5.5vw, 4rem); line-height: 1.05; }
.sec-sub { color: var(--muted); margin-top: 1.5rem; max-width: 48ch; }
.sec-sub a { color: var(--ink); background-image: var(--grad); background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 1.5px; padding-bottom: 3px; }

/* ===== Hero ===== */
.hero { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 8rem var(--pad) 4rem; max-width: var(--maxw); margin: 0 auto; }
.hero__loc { margin-bottom: 1rem; }
.hero__title { font-size: clamp(3rem, 11vw, 8rem); line-height: .95; font-weight: 400; }
.hero__photo { margin: 2.2rem 0 0; width: min(760px, 100%); border-radius: 18px; overflow: hidden; border: 1px solid rgba(0,255,208,.28); box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 40px rgba(0,255,208,.12); }
.hero__photo img { display: block; width: 100%; height: auto; }
.hero__title .line { display: block; overflow: hidden; padding: 0 .06em; }
.hero__title .line > span { display: block; }
.hero__sub { margin-top: 1.8rem; max-width: 40ch; color: var(--muted); font-size: clamp(1rem,1.6vw,1.15rem); }
.hero__foot { margin-top: 3rem; display: flex; align-items: center; gap: 2.5rem; flex-wrap: wrap; }
.play-btn { display: inline-flex; align-items: center; gap: 1rem; padding: .9rem 1.7rem .9rem 1.2rem; border: var(--glass-bd); border-radius: 999px; background: var(--glass-bg); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: var(--glass-sh); transition: border-color .3s, box-shadow .3s, transform .3s; }
.play-btn:hover { border-color: rgba(0,255,208,.5); box-shadow: var(--glow); transform: translateY(-2px); }
.play-btn__ico { width: 0; height: 0; border-left: 12px solid var(--cyan); border-top: 7px solid transparent; border-bottom: 7px solid transparent; filter: drop-shadow(0 0 6px var(--cyan)); }
.scroll-cue { animation: fade 2s ease-in-out infinite; }
@keyframes fade { 0%,100% { opacity: .55; } 50% { opacity: .15; } }

/* ===== Hero → album chip ===== */
.hero__drop { display: inline-flex; align-items: center; gap: .6rem; margin-top: 1.8rem; padding: .55rem 1rem; border-radius: 999px; border: 1px solid rgba(0,255,208,.32); background: linear-gradient(rgba(0,255,208,.06), rgba(0,255,208,.015)); width: fit-content; transition: border-color .3s, transform .3s, background .3s; }
.hero__drop:hover { transform: translateY(-2px); border-color: rgba(0,255,208,.6); }
.hero__drop .lbl { color: var(--ink); }
.hero__drop .lbl b { font-weight: 700; }
.hero__drop-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); animation: pulseDot 1.8s ease-in-out infinite; }
@keyframes pulseDot { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.8); } }

.hero__drops { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.8rem; }
.hero__drops .hero__drop { margin-top: 0; }
.hero__drop--mv { border-color: rgba(255,255,255,.3); background: linear-gradient(rgba(255,255,255,.08), rgba(255,255,255,.015)); }
.hero__drop--mv:hover { border-color: rgba(255,255,255,.65); }
.hero__drop--mv .hero__drop-dot { background: #fff; box-shadow: 0 0 10px rgba(255,255,255,.9); }

/* ===== Upcoming MV — the one highlighted card on the page =====
   A thin light travels slowly round the border and a soft halo breathes
   behind it. Opacity/angle only, so it stays cheap and calm. */
@property --upa { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.upnext { padding-top: clamp(1rem, 3vw, 2.5rem); padding-bottom: clamp(2rem, 5vw, 4rem); }
.upnext__card { position: relative; isolation: isolate; display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; padding: clamp(.9rem, 1.8vw, 1.4rem); border-radius: 24px; background: linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.015)); }
.upnext__card::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--upa, 0deg), rgba(255,255,255,.1) 0%, rgba(0,255,208,.8) 10%, rgba(255,255,255,.1) 24%, rgba(255,255,255,.1) 56%, rgba(255,255,255,.65) 68%, rgba(255,255,255,.1) 82%, rgba(255,255,255,.1) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  animation: upspin 10s linear infinite; }
.upnext__card::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  box-shadow: 0 0 70px rgba(0,255,208,.16), 0 0 150px rgba(255,255,255,.06);
  animation: upbreathe 5.5s ease-in-out infinite; }
@keyframes upspin { to { --upa: 360deg; } }
@keyframes upbreathe { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }
.upnext__media { position: relative; aspect-ratio: 16/9; border-radius: 16px; overflow: hidden; background: #000; }
.upnext__media video, .upnext__thumb { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.upnext__media video { object-fit: contain; }
.upnext__thumb { object-fit: cover; transition: opacity .5s, transform 1.2s cubic-bezier(.2,.8,.2,1); }
.upnext__media:hover .upnext__thumb { transform: scale(1.03); }
.upnext__play { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-start; padding: 1rem; border: 0; background: linear-gradient(transparent 55%, rgba(0,0,0,.55)); color: var(--ink); font: inherit; transition: opacity .4s; }
.upnext__pill { display: inline-flex; align-items: center; gap: .7rem; padding: .55rem 1rem .55rem .6rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.45); background: rgba(4,5,10,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: border-color .3s, background .3s, transform .3s; }
.upnext__pill .lbl { color: var(--ink); }
.upnext__ico { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #fff; }
.upnext__ico::before { content: ""; width: 0; height: 0; margin-left: 3px; border-left: 10px solid #05060a; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.upnext__play:hover .upnext__pill, .upnext__play:focus-visible .upnext__pill { border-color: var(--signal); background: rgba(0,255,208,.16); transform: translateY(-2px); }
.upnext__media.is-playing .upnext__thumb, .upnext__media.is-playing .upnext__play { opacity: 0; pointer-events: none; }
.upnext__body { padding: .6rem clamp(.2rem, 1.5vw, 1.2rem) .6rem 0; }
.upnext__flag { display: inline-flex; align-items: center; gap: .6rem; color: var(--signal); letter-spacing: .18em; }
.upnext__flag i { width: 8px; height: 8px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 10px var(--signal); animation: pulseDot 1.8s ease-in-out infinite; }
.upnext__title { font-size: clamp(2.2rem, 5vw, 4.2rem); line-height: 1; margin: .9rem 0 .8rem; }
.upnext__when { color: var(--ink); }
.upnext__lede { color: var(--muted); margin: 1rem 0 1.7rem; max-width: 40ch; }
.upnext__cta { display: inline-block; padding: .95rem 1.7rem; border-radius: 999px; border: 1px solid rgba(0,255,208,.5); background: rgba(0,255,208,.1); color: var(--ink); font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; transition: background .3s, transform .3s, box-shadow .3s; }
.upnext__cta:hover { background: rgba(0,255,208,.2); transform: translateY(-2px); box-shadow: var(--glow); }
@media (max-width: 820px) { .upnext__card { grid-template-columns: 1fr; } .upnext__body { padding: 0 .4rem .8rem; } }
@media (prefers-reduced-motion: reduce) { .upnext__card::before, .upnext__card::after, .upnext__flag i { animation: none; } .upnext__card::after { opacity: .7; } }

/* ===== Album — Letters for Inca ===== */
.album__grid { display: grid; grid-template-columns: minmax(280px, 420px) 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.album__cover { position: relative; margin: 0; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 40px 90px rgba(0,0,0,.6); aspect-ratio: 1/1; }
.album__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.album__flag { position: absolute; top: 1rem; left: 1rem; padding: .4rem .8rem; border-radius: 999px; background: rgba(4,5,10,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(0,255,208,.4); color: var(--signal); letter-spacing: .18em; }
.album__title { font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: 1; margin-bottom: 1.1rem; }
.album__meta { margin-bottom: 1.6rem; }
.album__lede { color: var(--muted); font-size: clamp(1rem, 1.5vw, 1.15rem); max-width: 46ch; margin-bottom: 2rem; }
.album__plats { margin-top: 0; }
.album__video { margin-top: clamp(3rem, 7vw, 5.5rem); }
.mv { position: relative; display: block; width: 100%; aspect-ratio: 16/9; border: 0; padding: 0; overflow: hidden; border-radius: 18px; cursor: pointer; box-shadow: var(--glass-sh); background: #000; }
.mv__thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.25) brightness(.82); transition: filter .6s, transform .8s cubic-bezier(.2,.8,.2,1); }
.mv:hover .mv__thumb { filter: none; transform: scale(1.04); }
.mv__play { position: absolute; top: 50%; left: 50%; width: 78px; height: 78px; transform: translate(-50%,-50%); border-radius: 50%; border: 1px solid rgba(255,255,255,.55); background: rgba(4,5,10,.4); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: grid; place-items: center; transition: transform .4s cubic-bezier(.2,.8,.2,1), background .4s, border-color .4s; }
.mv:hover .mv__play { transform: translate(-50%,-50%) scale(1.08); border-color: var(--cyan); background: rgba(0,255,208,.14); }
.mv__play::before { content: ""; width: 0; height: 0; border-left: 20px solid #fff; border-top: 12px solid transparent; border-bottom: 12px solid transparent; margin-left: 5px; }
.mv__label { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 3rem 1.4rem 1.2rem; background: linear-gradient(transparent, rgba(4,5,10,.9)); text-align: left; font-size: 1rem; color: var(--ink); pointer-events: none; }
.mv__label b { font-weight: 700; }
.mv__by { display: block; margin-top: .3rem; }

/* ===== Tracklist ===== */
.tracklist { margin-top: clamp(3rem, 7vw, 5.5rem); }
.tracks { list-style: none; columns: 2; column-gap: 4rem; }
.track { display: flex; align-items: baseline; gap: 1rem; padding: .85rem 0; border-top: 1px solid var(--hair); break-inside: avoid; }
.track__n { font-family: var(--mono); font-size: 12px; color: var(--muted); letter-spacing: .1em; flex: none; width: 2ch; }
.track__t { flex: 1; font-size: 1.02rem; }
.track__t em { font-style: normal; color: var(--muted); font-size: .86rem; margin-left: .35rem; }
.track__d { flex: none; }
.track__tag { flex: none; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--signal); border: 1px solid rgba(0,255,208,.4); border-radius: 999px; padding: .18rem .55rem; transition: background .3s, transform .3s; }
.track__tag:hover { background: rgba(0,255,208,.12); transform: translateY(-1px); }
.track--single .track__t { color: var(--ink); }
.tracks__credit { margin-top: 1.8rem; }
@media (max-width: 820px) {
  .album__grid { grid-template-columns: 1fr; }
  .album__cover { width: min(360px, 100%); }
  .tracks { columns: 1; }
}

/* ===== Hero glow — soft, flowing synthwave wash (no literal sun/grid) ===== */
.hero > *:not(.hero__sky) { position: relative; z-index: 1; }
.hero__sky { display: none; position: absolute; inset: -15%; z-index: 0; pointer-events: none; opacity: .85; filter: blur(14px);
  background:
    radial-gradient(34% 30% at 28% 32%, rgba(255,61,139,.24), transparent 60%),
    radial-gradient(40% 36% at 74% 38%, rgba(0,255,208,.24), transparent 62%),
    radial-gradient(50% 44% at 56% 82%, rgba(255,138,60,.12), transparent 62%),
    radial-gradient(46% 40% at 18% 74%, rgba(0,255,208,.12), transparent 62%); }

/* ===== About ===== */
.lead { font-size: clamp(1.8rem, 5vw, 3.4rem); line-height: 1.12; margin-bottom: 4rem; font-weight: 400; }
.about__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem 5rem; }
.about__body p { color: var(--muted); margin-bottom: 1.2rem; font-size: 1.05rem; }
.facts { list-style: none; }
.facts li { display: grid; grid-template-columns: 2.5rem 1fr; gap: .5rem; padding: 1.2rem 0; border-top: 1px solid var(--hair); font-size: .98rem; }
.facts li span { font-family: var(--disp); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 12px; padding-top: .2rem; }
.marquee { margin-top: 5rem; overflow: hidden; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); padding: 1.4rem 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee__track { display: inline-flex; gap: 2rem; white-space: nowrap; align-items: center; animation: scroll-x 26s linear infinite; }
.marquee__track span { font-family: var(--disp); font-weight: 400; font-size: clamp(1.4rem, 3.6vw, 2.2rem); color: var(--ink); }
.marquee__track i { color: var(--cyan); font-style: normal; font-size: 1rem; }
@keyframes scroll-x { to { transform: translateX(-50%); } }

/* ===== Bio extras ===== */
.pullquote { font-family: var(--disp); font-weight: 500; font-size: clamp(1.4rem, 3.6vw, 2.4rem); line-height: 1.25; color: var(--ink); max-width: 22ch; margin: 0 0 3rem; }
.pullquote cite { display: block; font-family: var(--mono); font-style: normal; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--signal); margin-top: 1rem; }
.bio-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 3rem; }
.bio-photo { margin: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--faint); background: var(--bg-2); aspect-ratio: 3/4; }
.bio-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bio-photo--empty { display: grid; place-items: center; text-align: center; color: var(--muted); font-family: var(--mono); font-size: 11px; letter-spacing: .08em; padding: 1rem; }

/* ===== Gallery — floating sky-billboards with scroll parallax ===== */
.gallery .sky { position: relative; width: 100vw; margin-left: calc(50% - 50vw); height: 210vh; margin-top: 3rem; }
.hoarding { position: absolute; border-radius: 16px; overflow: hidden; border: 1px solid rgba(0,255,208,.28); box-shadow: 0 24px 70px rgba(0,0,0,.55), 0 0 34px rgba(0,255,208,.12); will-change: transform; }
.hoarding img { width: 100%; height: auto; display: block; }
.hoarding::after { content: ""; position: absolute; left: 50%; bottom: -30px; width: 1px; height: 30px; background: linear-gradient(rgba(0,255,208,.5), transparent); }
.hoarding--empty { aspect-ratio: 4/3; display: grid; place-items: center; background: rgba(255,255,255,.03); }
.hoarding--empty span { color: var(--muted); font-family: var(--mono); font-size: 11px; letter-spacing: .08em; }
@media (max-width: 700px) { .bio-photos { grid-template-columns: 1fr 1fr; } .gallery .sky { height: 160vh; } }

/* ===== Glass cards (clickable) — simulated glass, no backdrop-filter so scroll stays smooth ===== */
.vrow { margin-top: 3rem; }
.vrow__head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.3rem; }
.vrow__line { flex: 1; height: 1px; background: var(--hair); }
.vgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.video { position: relative; aspect-ratio: 16/9; overflow: hidden; border-radius: 16px; border: var(--glass-bd); background: var(--glass-bg); box-shadow: var(--glass-sh); transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s, border-color .5s; }
.video:hover { transform: translateY(-4px); border-color: rgba(0,255,208,.5); box-shadow: var(--glow); }
.video img, .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; transition: filter .5s, transform .8s cubic-bezier(.2,.8,.2,1); }
.video img { filter: grayscale(.4); }
.video:hover img, .video:hover iframe { filter: none; transform: scale(1.05); }
.video__ph { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: var(--muted); font-size: 12px; padding: 1rem; }
.video__label small { display: block; margin-top: .3rem; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.vgrid--two { grid-template-columns: repeat(2, 1fr); }
.video--in { animation: videoIn .6s cubic-bezier(.2,.8,.2,1) both; }
@keyframes videoIn { from { opacity: 0; transform: translateY(24px); } }
.more { display: block; margin: 2.2rem auto 0; padding: .9rem 1.8rem; border-radius: 999px; border: var(--glass-bd); background: var(--glass-bg); box-shadow: var(--glass-sh); color: var(--ink); font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; transition: border-color .3s, transform .3s, box-shadow .3s; }
.more:hover, .more:focus-visible { border-color: rgba(0,255,208,.5); transform: translateY(-2px); box-shadow: var(--glow); outline: none; }
.more[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .video--in { animation: none; } }
.video__label { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 2.5rem 1.2rem 1.1rem; background: linear-gradient(transparent, rgba(4,4,10,.9)); font-size: .92rem; pointer-events: none; }
.video__hint { position: absolute; top: 1rem; left: 1.2rem; z-index: 3; opacity: 0; transition: opacity .4s; }
.video:hover .video__hint { opacity: 1; }
.video__no { position: absolute; top: 1rem; right: 1.2rem; z-index: 3; font-family: var(--disp); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 12px; }

.igrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.igrid--six { grid-template-columns: repeat(3, 1fr); }

/* ===== Background music pill (bottom-left): play/pause + next song ===== */
.bgm { position: fixed; left: 1rem; bottom: 1rem; z-index: 70; display: flex; align-items: center; gap: .15rem; padding: .3rem .4rem .3rem .3rem; border-radius: 999px; border: var(--glass-bd); background: linear-gradient(rgba(255,255,255,.08), rgba(255,255,255,.02)), rgba(10,10,18,.6); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--glass-sh); color: var(--ink); transition: border-color .3s; }
.bgm:hover { border-color: rgba(0,255,208,.5); }
.bgm__main { display: flex; align-items: center; gap: .7rem; padding: .3rem .7rem .3rem .6rem; border: 0; border-radius: 999px; background: none; color: inherit; font: inherit; }
.bgm__next { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; background: rgba(255,255,255,.06); color: var(--muted); transition: color .3s, border-color .3s, background .3s; }
.bgm__next:hover, .bgm__next:focus-visible { color: var(--signal); border-color: rgba(0,255,208,.5); background: rgba(0,255,208,.1); outline: none; }
.bgm__volwrap { display: flex; align-items: center; gap: .45rem; padding: 0 .6rem 0 .5rem; color: var(--muted); }
.bgm__volwrap[hidden] { display: none; }
.bgm__volwrap svg { flex: none; }
.bgm__vol { -webkit-appearance: none; appearance: none; --p: 27%; width: 78px; height: 28px; margin: 0; padding: 0; background: transparent; cursor: inherit; }
.bgm__vol::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: linear-gradient(to right, var(--signal) var(--p), rgba(255,255,255,.22) var(--p)); }
.bgm__vol::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -4.5px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(0,255,208,.2); transition: box-shadow .2s; }
.bgm__vol:hover::-webkit-slider-thumb, .bgm__vol:active::-webkit-slider-thumb { box-shadow: 0 0 0 5px rgba(0,255,208,.28); }
.bgm__vol::-moz-range-track { height: 3px; border-radius: 3px; background: rgba(255,255,255,.22); }
.bgm__vol::-moz-range-progress { height: 3px; border-radius: 3px; background: var(--signal); }
.bgm__vol::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(0,255,208,.2); }
.bgm__vol:focus-visible { outline: 1px solid rgba(0,255,208,.6); outline-offset: 2px; border-radius: 6px; }
.bgm__bars { display: flex; align-items: flex-end; gap: 3px; height: 16px; }
.bgm__bars i { width: 3px; height: 4px; border-radius: 2px; background: var(--signal); opacity: .7; }
.bgm.is-playing .bgm__bars i { opacity: 1; animation: eq 1s ease-in-out infinite; }
.bgm.is-playing .bgm__bars i:nth-child(2) { animation-delay: -.35s; }
.bgm.is-playing .bgm__bars i:nth-child(3) { animation-delay: -.7s; }
.bgm.is-playing .bgm__bars i:nth-child(4) { animation-delay: -.15s; }
@keyframes eq { 0%, 100% { height: 4px; } 50% { height: 16px; } }
.bgm__txt { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.bgm__txt .lbl { font-size: 9px; }
.bgm__txt b { font-family: var(--disp); font-weight: 500; font-size: .85rem; letter-spacing: .02em; white-space: nowrap; max-width: 15rem; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 560px) { .bgm__main { padding: .45rem .5rem; } .bgm__txt { display: none; } .bgm__vol { width: 64px; } .bgm__volwrap { padding: 0 .5rem 0 .4rem; } }
@media (prefers-reduced-motion: reduce) { .bgm.is-playing .bgm__bars i { animation: none; height: 12px; } }
.ipost { position: relative; aspect-ratio: 1/1; overflow: hidden; border-radius: 16px; border: var(--glass-bd); background: var(--glass-bg); box-shadow: var(--glass-sh); transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s, border-color .5s; }
.ipost:hover { transform: translateY(-4px); border-color: rgba(0,255,208,.5); box-shadow: var(--glow); }
.ipost img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.3); transition: transform .8s cubic-bezier(.2,.8,.2,1), filter .5s; }
.ipost:hover img { transform: scale(1.06); filter: none; }
.ipost__ph { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: var(--muted); font-size: 11px; padding: 1rem; }
.ipost__no { position: absolute; top: .7rem; right: .9rem; z-index: 2; font-family: var(--disp); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 12px; }
.ipost__label { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 2rem .9rem .8rem; background: linear-gradient(transparent, rgba(4,4,10,.9)); font-size: .82rem; pointer-events: none; }

/* ===== Play / 2D drum kit (follows the 5-piece diagram) ===== */
.kit-stage { margin: 3rem auto 0; max-width: 1000px; padding: 2.4rem 1.5rem 1.5rem; border-radius: 22px; border: var(--glass-bd); box-shadow: var(--glass-sh); background: radial-gradient(130% 95% at 50% 0%, rgba(0,255,208,.12), transparent 62%); }
.kit2d { width: 100%; height: auto; overflow: visible; }
.kit2d .hw { fill: none; stroke: rgba(238,240,255,.32); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.shell { fill: rgba(255,255,255,.05); stroke: var(--ink); stroke-width: 2.6; }
.head { fill: rgba(0,255,208,.10); stroke: var(--ink); stroke-width: 2; }
.head--logo { fill: #f3f1ff; stroke: var(--ink); }
.rim { fill: none; stroke: rgba(238,240,255,.4); stroke-width: 1.6; }
.cymbal { fill: rgba(242,214,133,.12); stroke: #f2d685; stroke-width: 2.4; }
.bell { fill: none; stroke: #f2d685; stroke-width: 1.8; }
.groove { fill: none; stroke: rgba(242,214,133,.4); stroke-width: 1.2; }
.kickbrand { fill: #221d44; font-family: var(--brand); font-size: 50px; text-anchor: middle; }
.kick-key { fill: var(--muted); font-family: var(--ui); font-size: 16px; text-anchor: middle; letter-spacing: .12em; }
.pad { cursor: pointer; outline: none; }
.pad .pad__shape { transition: stroke .15s, filter .15s, fill .15s; }
.pad:hover .pad__shape, .pad:focus-visible .pad__shape { stroke: var(--cyan); }
.pad.hit .pad__shape { stroke: var(--cyan); stroke-width: 3.4; filter: drop-shadow(0 0 10px var(--cyan)); }
.pad.hit .head, .pad.hit .shell, .pad.hit .cymbal { fill: rgba(0,255,208,.16); }
.play__note { display: block; text-align: center; margin-top: 2rem; }
@media (max-width: 600px) { .kit-stage { padding: 1.5rem .75rem; } }

/* ===== Listen — platform pills + album-art thumbnails ===== */
.plats { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: .5rem; }
.plat { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: .7rem 1.3rem; border-radius: 999px; border: var(--glass-bd); background: var(--glass-bg); box-shadow: var(--glass-sh); transition: color .3s, transform .3s, border-color .3s, box-shadow .3s; }
.plat:hover { color: var(--ink); transform: translateY(-2px); border-color: rgba(0,255,208,.5); box-shadow: var(--glow); }
.mgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.mcard { display: block; border-radius: 16px; overflow: hidden; border: var(--glass-bd); background: var(--glass-bg); box-shadow: var(--glass-sh); transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s, border-color .5s; }
.mcard:hover { transform: translateY(-4px); border-color: rgba(0,255,208,.5); box-shadow: var(--glow); }
.mcard__art { position: relative; aspect-ratio: 1/1; overflow: hidden; }
.mcard__art img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.25); transition: transform .8s cubic-bezier(.2,.8,.2,1), filter .5s; }
.mcard:hover .mcard__art img { transform: scale(1.05); filter: none; }
.mcard__ph { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: var(--muted); font-size: 11px; padding: 1rem; }
.mcard__no { position: absolute; top: .6rem; right: .8rem; font-family: var(--disp); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 12px; }
.mcard__play { position: absolute; left: .8rem; bottom: .8rem; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.4); background: rgba(255,255,255,.12); backdrop-filter: blur(6px); opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s; }
.mcard:hover .mcard__play { opacity: 1; transform: none; }
.mcard__play::before { content: ""; width: 0; height: 0; border-left: 9px solid var(--ink); border-top: 5px solid transparent; border-bottom: 5px solid transparent; margin-left: 2px; }
.mcard__meta { padding: .8rem 1rem 1rem; }
.mcard__title { font-family: var(--disp); font-weight: 400; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mcard__sub { color: var(--muted); font-size: .8rem; margin-top: .15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ===== Poll — "Which letter is yours?" ===== */
.poll__wrap { margin-top: 2.5rem; }
.poll__msg { display: block; margin-top: 1.4rem; }
.poll__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; }
.poll__opt { display: flex; align-items: center; gap: 1rem; text-align: left; width: 100%; padding: 1rem 1.2rem; border-radius: 14px; border: var(--glass-bd); background: var(--glass-bg); box-shadow: var(--glass-sh); color: var(--ink); font: inherit; cursor: pointer; transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s, box-shadow .35s; }
.poll__opt:hover, .poll__opt:focus-visible { transform: translateY(-2px); border-color: rgba(0,255,208,.5); box-shadow: var(--glow); outline: none; }
.poll__n { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--muted); flex: none; }
.poll__ttl { font-family: var(--disp); font-weight: 500; font-size: 1.02rem; }
.poll__feat { color: var(--muted); font-size: .82rem; }
.poll__alt { margin-top: 1.2rem; background: none; border: 0; color: var(--muted); font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; padding: .4rem 0; border-bottom: 1px solid var(--hair); }
.poll__alt:hover { color: var(--signal); border-bottom-color: var(--signal); }
.poll__list { list-style: none; display: grid; gap: .5rem; }
.poll__item { display: grid; grid-template-columns: 2.6rem 1fr auto; gap: 1rem; align-items: center; padding: .85rem 1.1rem; border-radius: 12px; border: 1px solid var(--hair); }
.poll__item--top { border-color: rgba(0,255,208,.28); background: linear-gradient(90deg, rgba(0,255,208,.08), transparent 55%); }
.poll__item--mine { border-color: rgba(0,255,208,.55); }
.poll__rank { font-family: var(--disp); font-weight: 600; font-size: 1.25rem; color: var(--muted); }
.poll__item--top .poll__rank { color: var(--signal); }
.poll__tags { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }
.poll__badge { font-family: var(--mono); font-weight: 400; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; padding: .22rem .5rem; border-radius: 999px; border: 1px solid var(--hair); color: var(--muted); white-space: nowrap; }
.poll__badge--lead { border-color: rgba(0,255,208,.5); color: var(--signal); }
.poll__badge--mine { border-color: rgba(255,255,255,.3); color: var(--ink); }
@media (max-width: 700px) { .poll__grid { grid-template-columns: 1fr; } .poll__item { grid-template-columns: 2.2rem 1fr; } .poll__tags { grid-column: 2; justify-content: flex-start; } }

/* ===== Tour ===== */
.tourlist { margin-top: 2.5rem; }
.tour__row { display: grid; grid-template-columns: 6.5rem 1fr auto; gap: 1.5rem; align-items: center; padding: 1.3rem 0; border-top: 1px solid var(--hair); }
.tour__row:last-child { border-bottom: 1px solid var(--hair); }
.tour__row--past { opacity: .42; }
.tour__date { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--muted); }
.tour__date b { display: block; font-family: var(--disp); font-weight: 600; font-size: 1.3rem; letter-spacing: .01em; color: var(--ink); }
.tour__city { font-family: var(--disp); font-weight: 500; font-size: 1.2rem; }
.tour__meta { color: var(--muted); font-size: .9rem; margin-top: .3rem; display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.tour__tag { font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; padding: .22rem .55rem; border-radius: 999px; border: 1px solid rgba(0,255,208,.35); color: var(--signal); }
.tour__cta { display: inline-block; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; padding: .6rem 1.1rem; border-radius: 999px; border: var(--glass-bd); background: var(--glass-bg); box-shadow: var(--glass-sh); white-space: nowrap; transition: border-color .3s, transform .3s; }
.tour__cta:hover { border-color: rgba(0,255,208,.5); transform: translateY(-2px); }
.tour__sub { margin: 2.6rem 0 .4rem; }
.tour__empty { padding: 2.4rem 0 .5rem; border-top: 1px solid var(--hair); }
.tour__empty p:first-child { font-family: var(--disp); font-weight: 500; font-size: clamp(1.2rem, 2.6vw, 1.7rem); max-width: 26ch; }
.tour__empty .lbl { display: block; margin-top: 1rem; max-width: 52ch; line-height: 1.9; }
.book { margin-top: 3.5rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; padding: 2rem clamp(1.4rem, 3vw, 2.4rem); border-radius: 20px; border: 1px solid rgba(0,255,208,.22); background: linear-gradient(120deg, rgba(0,255,208,.07), rgba(255,255,255,.02)); }
.book__t { font-size: clamp(1.4rem, 3.4vw, 2rem); margin-bottom: .4rem; }
.book__copy p { color: var(--muted); font-size: .95rem; }
.book__btn { flex: none; padding: .95rem 1.8rem; border-radius: 999px; border: 1px solid rgba(0,255,208,.5); background: rgba(0,255,208,.1); color: var(--ink); font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; transition: background .3s, transform .3s, box-shadow .3s; }
.book__btn:hover { background: rgba(0,255,208,.2); transform: translateY(-2px); box-shadow: var(--glow); }
@media (max-width: 700px) { .tour__row { grid-template-columns: 4.6rem 1fr; } .tour__row > div:last-child { grid-column: 2; } .book { flex-direction: column; align-items: flex-start; } }

/* ===== People's Scrapbook — paper, tape and handwriting on the dark desk =====
   Paper/ink tones come from the Letters for Inca artwork. */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.scrap { --paper: #f2efe8; --ink-p: #1c1a17; --ink-soft: #3a352e; --ink-mid: #6e675c; --rule: rgba(70,100,150,.34); --hand: "Caveat", "Segoe Print", "Bradley Hand", "Noteworthy", cursive; }
/* the page you write on: margin line, punched holes, ruled lines under the text */
.page { position: relative; max-width: 760px; margin-top: 2.8rem; padding: 1.9rem clamp(1.1rem, 3vw, 2.2rem) 1.4rem clamp(3.4rem, 7vw, 4.6rem); color: var(--ink-p); font-family: var(--hand); border-radius: 3px 12px 12px 3px; isolation: isolate;
  background: linear-gradient(90deg, transparent calc(clamp(3.4rem, 7vw, 4.6rem) - .9rem), rgba(196,62,62,.42) calc(clamp(3.4rem, 7vw, 4.6rem) - .9rem), rgba(196,62,62,.42) calc(clamp(3.4rem, 7vw, 4.6rem) - .9rem + 1px), transparent calc(clamp(3.4rem, 7vw, 4.6rem) - .9rem + 1px)), linear-gradient(180deg, #f6f3ec, var(--paper));
  box-shadow: 0 34px 70px rgba(0,0,0,.6), 0 2px 0 rgba(255,255,255,.55) inset; }
.page::before { content: ""; position: absolute; left: .85rem; top: 0; bottom: 0; width: 15px; pointer-events: none; background: radial-gradient(circle at 50% 50%, #080a0f 0 6px, rgba(0,0,0,.25) 6.5px, transparent 7.5px) center / 100% 33.34% repeat-y; }
.page::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: #e6e1d5; box-shadow: 0 20px 44px rgba(0,0,0,.45); transform: rotate(1.3deg) translate(6px, 7px); }
.page__head { font-size: 1.9rem; font-weight: 700; line-height: 34px; }
.page__text { display: block; width: 100%; min-height: 170px; margin: 0; padding: 0; border: 0; outline: 0; resize: vertical; color: var(--ink-p); font: 500 1.5rem/34px var(--hand);
  /* whole-pixel line spacing (34px) so every ruled line lands exactly on a pixel row */
  background: repeating-linear-gradient(transparent, transparent 33px, var(--rule) 33px, var(--rule) 34px) local; }
.page__text::placeholder, .page__sign input::placeholder { color: rgba(28,26,23,.38); }
.page__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-top: .9rem; }
.page__sign { display: flex; align-items: baseline; gap: .5rem; font-size: 1.6rem; font-weight: 700; flex: 1; min-width: 0; }
.page__sign input { flex: 1; min-width: 0; max-width: 20rem; padding: 0 0 .1rem; border: 0; border-bottom: 1px solid var(--rule); outline: 0; background: none; color: var(--ink-p); font: 700 1.6rem/1.3 var(--hand); }
.page__sign input:focus { border-bottom-color: var(--ink-p); }
.page__count { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--ink-mid); white-space: nowrap; }
.page__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.page__foot { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-top: 1.3rem; }
.page__photo span { display: inline-block; padding: .55rem 1rem; border: 1.5px dashed rgba(28,26,23,.45); border-radius: 999px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); transition: background .3s, border-color .3s; }
.page__photo:hover span, .page__photo:focus-within span { background: rgba(28,26,23,.07); border-color: var(--ink-p); }
.page__preview { position: relative; margin: 0; padding: 4px 4px 12px; background: #fff; box-shadow: 0 3px 10px rgba(0,0,0,.3); transform: rotate(3deg); }
.page__preview[hidden] { display: none; }
.page__preview img { display: block; width: 62px; height: 62px; object-fit: cover; }
.page__preview button { position: absolute; top: -9px; right: -9px; width: 22px; height: 22px; border: 0; border-radius: 50%; background: var(--ink-p); color: var(--paper); font-size: 11px; line-height: 1; }
.page__send { margin-left: auto; padding: .75rem 1.5rem; border: 0; border-radius: 999px; background: var(--ink-p); color: var(--paper); font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; transition: transform .3s, box-shadow .3s, opacity .3s; }
.page__send:hover:not(:disabled), .page__send:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.35); outline: none; }
.page__send:disabled { opacity: .55; }
.page__msg { min-height: 1.6rem; margin-top: 1rem; font-size: 1.35rem; font-weight: 700; line-height: 1.25; color: #1f6b4f; }
.page__msg.is-err { color: #b23a2c; }
.page__fine { margin-top: .3rem; font-family: var(--ui); font-size: .78rem; line-height: 1.5; color: var(--ink-mid); }
/* the wall of notes */
.scrap__wall { margin-top: 4rem; columns: 3 290px; column-gap: 1.9rem; }
.scrap__off { column-span: all; }
.note { position: relative; break-inside: avoid; margin: 0 0 2.2rem; padding: 1.6rem 1.35rem 1rem; color: var(--ink-p); font-family: var(--hand); border-radius: 3px; background: linear-gradient(180deg, #f7f4ed, var(--paper)); box-shadow: 0 18px 40px rgba(0,0,0,.5); transform: rotate(var(--r, 0deg)); transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s; animation: noteIn .6s cubic-bezier(.2,.8,.2,1) both; }
.note:hover { transform: rotate(0deg) translateY(-4px); box-shadow: 0 26px 54px rgba(0,0,0,.6); }
.note::before { content: ""; position: absolute; top: -11px; left: 50%; width: 92px; height: 25px; transform: translateX(-50%) rotate(var(--t, -2deg)); background: rgba(233,215,150,.74); box-shadow: 0 1px 2px rgba(0,0,0,.18); }
.note--b { background: linear-gradient(180deg, #fdf6c9, #f8eeb0); }
.note--b::before { background: rgba(255,255,255,.55); }
.note--c { background: linear-gradient(180deg, transparent 1.15rem, rgba(196,62,62,.5) 1.15rem, rgba(196,62,62,.5) calc(1.15rem + 2px), transparent calc(1.15rem + 2px)), #fbfaf7; }
.note--d { background: linear-gradient(180deg, #ebe4d3, #e3dbc7); }
.note--d::before { background: rgba(190,206,214,.75); }
.note__photo { margin: 0 0 1rem; padding: 7px 7px 0; background: #fff; box-shadow: 0 3px 10px rgba(0,0,0,.28); transform: rotate(calc(var(--r, 0deg) * -.6)); }
.note__photo img { display: block; width: 100%; height: auto; cursor: zoom-in; }
.note__photo::after { content: ""; display: block; height: 22px; }
.note__text { font-size: 1.42rem; font-weight: 500; line-height: 1.96rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.note__sign { margin-top: .7rem; text-align: right; font-size: 1.4rem; font-weight: 700; overflow-wrap: anywhere; }
.note__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .7rem; padding-top: .55rem; border-top: 1px dashed rgba(28,26,23,.22); font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mid); }
.note__like { display: inline-flex; align-items: center; gap: .4rem; min-height: 30px; padding: .2rem .6rem .2rem 0; border: 0; background: none; color: var(--ink-mid); font: inherit; }
.note__like svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; transition: transform .25s cubic-bezier(.3,1.6,.5,1), fill .25s, stroke .25s; }
.note__like:hover svg { transform: scale(1.14); }
.note__like.is-liked { color: #c0392b; }
.note__like.is-liked svg { fill: #c0392b; stroke: #c0392b; transform: scale(1.12); }
.note--empty .note__text { color: var(--ink-soft); }
@keyframes noteIn { from { opacity: 0; translate: 0 22px; } }
@media (max-width: 560px) { .page__send { margin-left: 0; width: 100%; } .page__head { font-size: 1.7rem; } }
@media (prefers-reduced-motion: reduce) { .note { animation: none; } }
/* photos opened from the scrapbook use the lightbox as a simple print-on-white viewer */
.lightbox__frame--img { width: auto; max-width: min(1000px, 100%); aspect-ratio: auto; padding: 8px; border-radius: 4px; background: #fff; }
.lightbox__frame--img img { display: block; max-width: 100%; max-height: 82vh; }

/* ===== Contact ===== */
.contact__big { font-size: clamp(2.4rem, 8vw, 5.2rem); line-height: 1.0; font-weight: 400; }
.bigmail { display: inline-block; margin: 2.5rem 0; font-size: clamp(1.4rem, 4vw, 2.4rem); background-image: var(--grad); background-repeat: no-repeat; background-position: 0 100%; background-size: 0 2px; padding-bottom: .3rem; transition: background-size .4s; }
.bigmail:hover { background-size: 100% 2px; }
.socials { display: flex; gap: .8rem; flex-wrap: wrap; }
.socials a { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: .65rem 1.2rem; border-radius: 999px; border: var(--glass-bd); background: var(--glass-bg); box-shadow: var(--glass-sh); transition: color .3s, transform .3s, border-color .3s, box-shadow .3s; }
.socials a:hover { color: var(--ink); transform: translateY(-2px); border-color: rgba(0,255,208,.5); box-shadow: var(--glow); }
.footer { margin-top: 5rem; padding-top: 2rem; border-top: 1px solid var(--hair); }

/* ===== Lightbox (glass) ===== */
.lightbox { position: fixed; inset: 0; z-index: 100; display: none; place-items: center; background: rgba(4,4,10,.82); backdrop-filter: blur(10px); padding: 1.5rem; }
.lightbox.open { display: grid; }
.lightbox__frame { width: min(1000px, 100%); aspect-ratio: 16/9; overflow: hidden; border-radius: 16px; box-shadow: var(--glow); }
.lightbox__frame iframe { width: 100%; height: 100%; border: 0; }
.lightbox__close { position: absolute; top: 1.5rem; right: 1.8rem; width: 44px; height: 44px; border-radius: 50%; border: var(--glass-bd); background: var(--glass-bg); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--ink); cursor: pointer; box-shadow: var(--glass-sh); transition: border-color .3s, box-shadow .3s; }
.lightbox__close:hover { border-color: rgba(0,255,208,.5); box-shadow: var(--glow); }

/* ===== Reveal — structural; JS sets hidden state ===== */
[data-reveal-lines] .rline { display: block; overflow: hidden; }
[data-reveal-lines] .rline > span { display: block; }

/* ===== Responsive ===== */
@media (max-width: 900px) {
  .about__cols { grid-template-columns: 1fr; }
  .vgrid { grid-template-columns: 1fr 1fr; }
  .igrid { grid-template-columns: repeat(3, 1fr); }
  .mgrid { grid-template-columns: repeat(3, 1fr); }
  .grid-lines { display: none; }
}
/* Menu collapses to the ☰ button before the 11 links run out of room (they need ~1166px) */
@media (max-width: 1220px) {
  .nav__menu { position: fixed; inset: 0; flex-direction: column; justify-content: safe center; gap: .5rem; padding: 5rem 2rem 2rem; overflow-y: auto; background: rgba(6,6,12,.9); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); transform: translateX(100%); transition: transform .45s cubic-bezier(.7,0,.2,1); border-radius: 0; }
  .nav__menu.open { transform: none; }
  .nav__menu a { font-size: 16px; text-align: center; }
  .nav__toggle { display: flex; z-index: 90; }
}
@media (max-width: 560px) { .vgrid { grid-template-columns: 1fr; } .igrid, .mgrid { grid-template-columns: repeat(2, 1fr); } }
@media (prefers-reduced-motion: reduce) { .marquee__track, .scroll-cue { animation: none !important; } }