:root{
  --ink:#0a0712;          /* indigo-black — the dark behind the light */
  --ink-2:#120d1f;        /* raised panel */
  --ink-3:#1b1433;
  --bone:#ece9f6;         /* cool white */
  --bone-dim:#b1aacb;
  --muted:#756e90;        /* dim violet-grey */
  --brass:#8b86ff;        /* electric periwinkle — hairlines & labels */
  --brass-dim:#5c57b0;
  --oxblood:#ff3147;      /* the red slash — the single mark */
  --oxblood-deep:#b51b2e;
  --magenta:#c42cc9;      /* the backdrop glow */
  --line:rgba(139,134,255,.22);
  --display:"Fraunces",Georgia,serif;
  --body:"Spectral",Georgia,serif;
  --mono:"Courier Prime",ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(60% 50% at 16% 8%,rgba(79,75,255,.12),transparent 60%),
    radial-gradient(55% 50% at 88% 24%,rgba(196,44,201,.10),transparent 60%),
    var(--ink);
  background-attachment:fixed;
  color:var(--bone);
  font-family:var(--body);
  font-weight:300;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
}
/* atmosphere: grain + vignette */
body::before{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity:.05;mix-blend-mode:overlay;
}
body::after{
  content:"";position:fixed;inset:0;z-index:9998;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 30%,transparent 38%,rgba(0,0,0,.55) 100%);
}
::selection{background:var(--oxblood);color:var(--bone)}

.mono{font-family:var(--mono);font-weight:400;letter-spacing:.18em;text-transform:uppercase;font-size:.62rem;color:var(--brass)}
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(1.5rem,5vw,4.5rem)}

/* ── header ─────────────────────────────── */
header.bar{
  position:sticky;top:0;z-index:100;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(10,7,18,.92),rgba(10,7,18,.66));
  backdrop-filter:blur(6px);
}
.bar .wrap{display:flex;align-items:center;justify-content:space-between;height:62px}
.bar .sig{font-family:var(--display);font-weight:600;letter-spacing:.34em;font-size:.9rem;text-transform:uppercase;color:var(--bone);text-decoration:none}
.bar nav{display:flex;gap:2.2rem}
.bar nav a{color:var(--bone-dim);text-decoration:none;font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;transition:color .3s}
.bar nav a:hover{color:var(--brass)}
@media(max-width:680px){.bar nav a:not(:last-child){display:none}}

/* ── hero ───────────────────────────────── */
.hero{position:relative;padding:clamp(3rem,9vh,7rem) 0 clamp(2rem,5vh,4rem)}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,5rem);align-items:center}
@media(max-width:880px){.hero .wrap{grid-template-columns:1fr;gap:3rem}}

.hero h1{
  font-family:var(--display);
  font-weight:340;
  font-size:clamp(3.4rem,9vw,7rem);
  line-height:.94;
  letter-spacing:-.02em;
  margin-bottom:1.1rem;
  opacity:0;animation:rise 1s .22s forwards;
}
.hero h1 em{font-style:italic;color:var(--bone-dim);font-weight:300}
.hero .tagline{font-family:var(--mono);text-transform:uppercase;letter-spacing:.28em;font-size:.72rem;color:var(--brass);opacity:0;animation:rise 1s .34s forwards}
.hero .tagline a{color:var(--bone-dim);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:1px;transition:color .3s,border-color .3s}
.hero .tagline a:hover{color:var(--oxblood);border-color:var(--oxblood)}
.hero .tagline.publine{font-size:1.45rem;letter-spacing:.1em;color:var(--bone-dim)}
.hero .tagline a.spotify{font-size:1.18em;color:var(--bone)}
.hero .tagline a.spotify:hover{color:var(--oxblood)}
.hero p.lede{
  max-width:42ch;color:var(--bone-dim);font-size:1.08rem;line-height:1.85;
  opacity:0;animation:rise 1s .34s forwards;
}

/* ── the lens / obscured portrait ───────── */
.lens-stage{position:relative;display:flex;justify-content:center;opacity:0;animation:rise 1.2s .4s forwards}
.lens{
  position:relative;width:min(380px,78vw);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 50% 40%,var(--ink-3),var(--ink) 72%);
  box-shadow:0 0 0 1px var(--line),0 0 0 14px var(--ink-2),0 0 0 15px rgba(139,134,255,.20),
             0 0 70px -8px rgba(196,44,201,.28),
             inset 0 0 60px rgba(0,0,0,.85),0 40px 90px -30px #000;
  display:grid;place-items:center;overflow:hidden;
}
/* the obscured portrait, seated inside the lens */
.portrait{position:absolute;inset:0}
.portrait img{width:100%;height:100%;object-fit:cover;display:block}
/* vignette to settle the image edges into the darkened frame */
.portrait::after{content:"";position:absolute;inset:0;pointer-events:none;
      background:radial-gradient(circle at 50% 42%,transparent 46%,rgba(10,7,18,.6) 100%)}
/* reticle / camera-obscura crosshair */
.reticle{position:absolute;inset:0;pointer-events:none;transition:transform 6s ease}
.reticle::before,.reticle::after{content:"";position:absolute;background:var(--line)}
.reticle::before{left:50%;top:8%;bottom:8%;width:1px}
.reticle::after{top:50%;left:8%;right:8%;height:1px}
.ring{position:absolute;border-radius:50%;border:1px solid var(--line);inset:22%}
.lens-stage:hover .lens{box-shadow:0 0 0 1px var(--oxblood),0 0 0 14px var(--ink-2),0 0 0 15px rgba(255,49,71,.30),0 0 90px -6px rgba(79,75,255,.40),inset 0 0 60px rgba(0,0,0,.85),0 40px 90px -30px #000}
.lens-stage:hover .reticle{transform:rotate(45deg)}

/* ── section head ───────────────────────── */
.section-head{display:flex;align-items:baseline;justify-content:space-between;
      border-top:1px solid var(--line);border-bottom:1px solid var(--line);
      padding:1rem 0;margin-top:clamp(3rem,8vh,6rem)}
.section-head h2{font-family:var(--display);font-weight:380;font-size:1.5rem;letter-spacing:.02em}

/* ── works list (titles only) ───────────── */
.works{margin:0 0 5rem}
.work{
  display:grid;grid-template-columns:64px 1fr auto;gap:clamp(1rem,3vw,2.4rem);
  align-items:center;padding:1.7rem 0;border-bottom:1px solid rgba(139,134,255,.12);
  text-decoration:none;color:inherit;position:relative;
  transition:padding-left .4s ease;
}
.work::before{content:"";position:absolute;left:0;top:0;bottom:0;width:0;
      background:linear-gradient(90deg,rgba(255,49,71,.12),transparent);transition:width .4s ease}
.work:not(.forthcoming):hover{padding-left:1.4rem}
.work:not(.forthcoming):hover::before{width:100%}
.work.forthcoming{cursor:default}
.thumb{width:64px;height:64px;border-radius:50%;position:relative;overflow:hidden;
      background:radial-gradient(circle at 50% 38%,var(--ink-3),var(--ink) 75%);
      box-shadow:inset 0 0 0 1px var(--line),inset 0 0 22px rgba(0,0,0,.8)}
.thumb i{position:absolute;border-radius:50%;border:1px solid var(--line);inset:26%}
.thumb b{position:absolute;left:50%;top:50%;width:5px;height:5px;border-radius:50%;background:var(--brass-dim);transform:translate(-50%,-50%);transition:background .4s,box-shadow .4s}
.work:not(.forthcoming):hover .thumb b{background:var(--oxblood);box-shadow:0 0 12px var(--oxblood)}
.work .body h3{font-family:var(--display);font-weight:400;font-size:clamp(1.5rem,3.2vw,2.2rem);letter-spacing:-.01em;line-height:1.1;transition:color .35s}
.work:not(.forthcoming):hover .body h3{color:var(--bone)}
.work .body h3 em{font-style:italic;color:var(--bone-dim)}
.work .body .pub{display:inline-block;margin-top:.55rem;color:var(--brass-dim);font-size:.56rem;letter-spacing:.16em}
.work .body .pub.soon{color:var(--oxblood)}
.work .arrow{font-family:var(--display);color:var(--brass);font-size:1.4rem;opacity:0;transform:translateX(-8px);transition:.4s}
.work:hover .arrow{opacity:1;transform:translateX(0)}
@media(max-width:720px){
  .work{grid-template-columns:1fr;gap:1.2rem}
  .thumb,.work .arrow{display:none}
}

/* ── reading column ─────────────────────── */
.read{max-width:720px;margin:0 auto;padding:clamp(2rem,6vh,4rem) 0 5rem}
.read p{font-size:1.5rem;line-height:1.8;margin-bottom:1.7rem;color:var(--bone)}
.read .sep{border:0;height:1px;width:44%;margin:2.8rem auto;
      background:linear-gradient(90deg,transparent,var(--brass),transparent);opacity:.55}

/* ── footer ─────────────────────────────── */
footer{border-top:1px solid var(--line);padding:3.5rem 0 4.5rem;background:var(--ink-2)}
footer .wrap{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;align-items:flex-end}
footer .mark{font-family:var(--display);font-size:2.4rem;font-weight:340;letter-spacing:.06em}
footer .mark em{font-style:italic;color:var(--muted);font-size:1.1rem;display:block;letter-spacing:.2em;text-transform:uppercase;margin-top:.4rem}
footer p a{font-family:var(--mono);font-size:.92rem;letter-spacing:.04em;color:var(--bone-dim);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px;transition:color .3s,border-color .3s}
footer p a:hover{color:var(--brass);border-color:var(--brass)}

@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}