/* NEVER SENT - EDITION LAYER
   Concept: the read receipt. Loaded after site.css and polish.css. */

:root{
  /* spacing rhythm, 8px base */
  --s1:8px; --s2:16px; --s3:26px; --s4:42px; --s5:68px; --s6:110px;
  /* four type sizes, not seven */
  --t-label:11.5px; --t-meta:12.5px; --t-sub:15px; --t-body:17.5px;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --line-2:#2A2A30;
  --ease:cubic-bezier(.16,1,.3,1);
}
html{scroll-behavior:smooth}
[id]{scroll-margin-top:92px}
::selection{background:var(--text);color:var(--bg)}

/* 1 - THE TIMESTAMP VOICE
   every number on the site speaks in the same monospaced tick */
.tn,.td,.player .times,.np-time,.card p.meta,.albumcard p,.sh-meta,.stamp,
.previewnote,.styleline{
  font-family:var(--mono);font-variant-numeric:tabular-nums;
  text-transform:none;letter-spacing:.02em;font-weight:400}
.tn,.td{font-size:12px}
.player .times,.np-time{font-size:11.5px;letter-spacing:.04em}
.card p.meta{font-size:12px;letter-spacing:.05em;color:var(--dim)}
.albumcard p,.sh-meta{font-size:12px}
.styleline{font-size:var(--t-meta);letter-spacing:.03em}
.previewnote{font-size:11.5px;letter-spacing:.03em}

/* 2 - STICKY NAV, hairline arrives on scroll */
body>.wrap.navwrap{position:sticky;top:0;z-index:50;
  background:rgba(10,10,11,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;transition:border-color .35s ease}
html.scrolled body>.wrap.navwrap{border-bottom-color:var(--line)}
.navwrap .nav{padding:18px 0}
.nav .wordmark{letter-spacing:.26em}
.nav nav a{position:relative}
.nav nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:1px;
  background:currentColor;transition:right .5s var(--ease)}
.nav nav a:hover::after,.nav nav a[aria-current]::after{right:0}

/* 3 - HERO: the thread opens */
.hero{padding:12vh 0 var(--s5)}
.hero .stamp{display:flex;align-items:center;font-size:var(--t-label);letter-spacing:.07em;
  color:var(--dim);margin:0 0 var(--s3)}
.hero .display{font-size:clamp(64px,15.5vw,236px)}
.dots{display:inline-flex;gap:4px;margin-right:10px}
.dots i{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.24;
  animation:blip 1.8s var(--ease) infinite}
.dots i:nth-child(2){animation-delay:.2s}
.dots i:nth-child(3){animation-delay:.4s}
@keyframes blip{0%,62%,100%{opacity:.24}30%{opacity:1}}
.herofoot{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s4);align-items:end;
  border-top:1px solid var(--line);margin-top:var(--s4);padding-top:var(--s3)}
.hero .tag{margin:0;color:var(--dim);font-size:var(--t-body);line-height:1.6;max-width:28em}
.heroact{display:flex;gap:var(--s3);margin:0;flex-wrap:wrap}
.heroact a{font-family:"Bebas Neue",Impact,sans-serif;text-transform:uppercase;letter-spacing:.22em;
  font-size:12px;color:var(--dim);border-bottom:1px solid var(--line);padding-bottom:5px;
  transition:color .25s var(--ease),border-color .25s var(--ease)}
.heroact a:first-child{color:var(--text);border-bottom-color:var(--text)}
.heroact a:hover{color:var(--text);border-bottom-color:var(--text)}
@media(max-width:760px){.herofoot{grid-template-columns:1fr;gap:var(--s3)}.hero{padding:7vh 0 var(--s4)}}

/* 4 - PHOTOGRAPHS: colour returns on contact.
   The grid holds back. The featured release and the song page never do. */
.card .art img{filter:grayscale(.3) contrast(1.05) brightness(.93);
  transition:transform .7s var(--ease),filter .55s var(--ease)}
.card:hover .art img,.card:focus-within .art img{filter:none;transform:scale(1.04)}
.albumcard .art img{filter:grayscale(.22) brightness(.95);
  transition:transform .7s var(--ease),filter .55s var(--ease)}
.albumcard:hover .art img,.albumcard:focus-within .art img{filter:none;transform:scale(1.04)}
.card h3{color:#DBD6CD;font-size:clamp(26px,2.6vw,34px);margin:var(--s2) 0 6px;
  transition:color .25s var(--ease)}
.card:hover h3,.card:focus-within h3{color:var(--text)}
.grid{gap:var(--s5) var(--s4)}

/* 5 - ACCENT ATMOSPHERE: 22 songs, 22 rooms */
.song{position:relative;isolation:isolate}
.song::before{content:"";position:absolute;left:-10%;top:-12%;width:60%;padding-bottom:60%;
  border-radius:50%;background:radial-gradient(circle,var(--accent) 0%,transparent 70%);
  opacity:.09;filter:blur(34px);pointer-events:none;z-index:-1}
@media(max-width:820px){.song::before{width:100%;padding-bottom:70%;left:-20%;opacity:.07}}

/* 6 - ALBUM PAGE: the tracklist reads as a thread */
.albumhead{padding:9vh 0 var(--s4)}
.trackrow{padding:15px 10px;margin:0 -10px;transition:background .35s var(--ease)}
.trackrow:hover{background:rgba(243,239,232,.028)}

/* 7 - REVEAL MOTION (only when html.m is set by the inline module) */
html.m .reveal{opacity:0;transform:translateY(16px)}
html.m .reveal.in{opacity:1;transform:none;
  transition:opacity .85s var(--ease),transform .85s var(--ease);transition-delay:var(--d,0ms)}

/* 8 - BODY TYPE */
.lyrics{font-size:var(--t-body);line-height:1.8}
.about p{font-size:var(--t-body)}
.np-title{letter-spacing:.04em}

@media(prefers-reduced-motion:reduce){
  html.m .reveal{opacity:1;transform:none}
  .dots i{animation:none;opacity:.5}
}

/* ============================================================
   EDITION II - modernisation pass
   ============================================================ */

/* 9 - (removed) cross-document view transitions.
   Chrome suspends the incoming document's rendering and never resumes: no frames,
   no timers, dead controls. Reverted on 4 Sep 2026. Do not reinstate without testing
   a real link click, not a direct page load. */

/* 10 - GRAIN
   Photographs of relationships nobody was supposed to see. Film has grain. */
body::after{content:"";position:fixed;inset:0;z-index:80;pointer-events:none;opacity:.042;
  background-repeat:repeat;background-size:200px 200px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E")}

/* 11 - TYPESETTING */
h1,h2,.display,.card h3,.albumcard h3{text-wrap:balance}
p,.tag,.about p,.card p.line,.nolyrics{text-wrap:pretty}
.lyrics{text-wrap:pretty}

/* 12 - IMAGE PLACEHOLDER
   Covers now carry width and height, so the square is reserved before the file lands. */
.card .art,.albumcard .art,.song .cover .frame{background:#141417}

@media(prefers-reduced-motion:reduce){
}