:root{
  --ink:#07030d;
  --ink-2:#100823;
  --chrome:#f4eefb;
  --dim:#a08fba;
  --dimmer:#6e5f87;
  --magenta:#ff2fb9;
  --cyan:#4fd8ff;
  --sun-hi:#ffa24a;
  --sun-lo:#ff2d55;
  --rule:rgba(255,47,185,.28);
  --display:"Archivo",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --pad:clamp(1.25rem,5vw,4rem);
  --measure:74rem;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ink);
  color:var(--chrome);
  font-family:var(--display);
  font-variation-settings:"wdth" 100,"wght" 400;
  font-size:clamp(1rem,.95rem + .3vw,1.125rem);
  line-height:1.6;
  overflow-x:clip;
}

/* ---- the grid keeps going ------------------------------------------
   The hero art ends in a neon horizon. Rather than stop there, the same
   grid is redrawn in CSS and fixed behind the whole document, so the
   page reads as one continuous floor receding under the content. */
.hero{position:relative; z-index:2}
/* The floor belongs to the HERO, not the viewport. It picks up where the
   art's horizon ends and dies out before the first section, so the page
   reads as one continuous floor without a live grid scrolling under body
   copy — which was unreadable. Do not make this position:fixed again. */
.floor{
  position:absolute; left:0; right:0; top:52%; height:58vw; max-height:46rem;
  z-index:-1; pointer-events:none;
  perspective:16vw; perspective-origin:50% 0;
  mask-image:linear-gradient(to bottom,#000 0 12%,transparent 58%);
  -webkit-mask-image:linear-gradient(to bottom,#000 0 12%,transparent 58%);
  opacity:.32;
  /* ::before is inset -60% on both sides so the perspective floor reaches
     the edges. Without this it escapes the box and gives the whole
     document ~760px of horizontal scroll. body{overflow-x:clip} does NOT
     catch it: overflow on body only propagates to the viewport when html
     is visible, and clip does not propagate the way hidden does. Clip it
     at the source. */
  overflow:hidden;
}
.floor::before{
  content:""; position:absolute; inset:0 -60% 0 -60%;
  transform:rotateX(84deg); transform-origin:50% 0;
  background:
    repeating-linear-gradient(to right,var(--magenta) 0 1px,transparent 1px 4.2vmin),
    repeating-linear-gradient(to bottom,var(--cyan) 0 1px,transparent 1px 4.2vmin);
  background-size:4.2vmin 4.2vmin;
  animation:drift 6s linear infinite;
}
@keyframes drift{to{background-position:0 4.2vmin,0 4.2vmin}}

/* grain, very light, keeps the flat colour from looking like a swatch */
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

.wrap{position:relative; z-index:2; max-width:var(--measure); margin-inline:auto; padding-inline:var(--pad)}

/* ---- hero ---------------------------------------------------------- */
.hero__art{display:block; width:100%; height:auto;
  mask-image:linear-gradient(to bottom,#000 72%,transparent);
  -webkit-mask-image:linear-gradient(to bottom,#000 72%,transparent);
}
.hero__line{
  max-width:var(--measure); margin:clamp(-6rem,-9vw,-3rem) auto 0; padding-inline:var(--pad);
  position:relative; z-index:3;
  display:flex; align-items:center; gap:clamp(1.25rem,3vw,2.75rem); flex-wrap:wrap;
}
/* Dan sits half in the sunset scene and half below it, like an artist
   inset on a record sleeve. The ring picks up the tagline gradient. The
   source is 400px pixel art, so it is rendered pixelated on purpose:
   the upscale reads as the style rather than as a soft image. */
.hero__face{
  flex:none; width:clamp(9rem,7rem + 9vw,15rem); height:auto; aspect-ratio:1;
  border-radius:50%; image-rendering:pixelated;
  border:3px solid transparent;
  background:linear-gradient(var(--ink),var(--ink)) padding-box,
             linear-gradient(135deg,var(--sun-hi),var(--sun-lo) 55%,var(--magenta)) border-box;
  box-shadow:0 0 0 1px rgba(7,3,13,.9),0 0 48px rgba(255,47,185,.35),0 18px 40px rgba(0,0,0,.6);
}
.hero__line p{
  font-variation-settings:"wdth" 112,"wght" 600;
  font-size:clamp(1.35rem,1rem + 2.1vw,2.6rem);
  line-height:1.15; letter-spacing:-.01em; margin:0; text-wrap:balance;
  max-width:22ch;
}
.hero__line p em{
  font-style:normal;
  background:linear-gradient(100deg,var(--sun-hi),var(--sun-lo) 60%,var(--magenta));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.jump{
  display:flex; flex-wrap:wrap; gap:.4rem 1.75rem; margin:2.5rem 0 0; padding:0; list-style:none;
  font-family:var(--mono); font-size:.78rem; letter-spacing:.06em;
}
.jump a{color:var(--dim); text-decoration:none; padding-block:.35rem; border-bottom:1px solid transparent; transition:color .2s,border-color .2s}
.jump a:hover,.jump a:focus-visible{color:var(--chrome); border-color:var(--magenta)}

/* ---- sections ------------------------------------------------------ */
section{padding-block:clamp(4.5rem,10vw,8rem); scroll-margin-top:2rem}
.head{display:flex; align-items:baseline; gap:1.25rem; margin-bottom:clamp(2rem,4vw,3.25rem)}
.head__num{font-family:var(--mono); font-size:.8rem; color:var(--magenta); letter-spacing:.2em; flex:none}
.head h2{
  margin:0; font-variation-settings:"wdth" 125,"wght" 800;
  font-size:clamp(1.6rem,1rem + 3vw,3.4rem); line-height:1; letter-spacing:-.02em;
}
.head__rule{flex:1 1 auto; height:1px; background:linear-gradient(90deg,var(--rule),transparent)}

/* ---- entries (games, records, software all share this) ------------- */
.entry{
  display:grid; gap:.35rem 2.5rem; padding-block:clamp(1.75rem,3vw,2.5rem);
  border-top:1px solid rgba(244,238,251,.1);
  grid-template-columns:1fr;
}
@media (min-width:52rem){ .entry{grid-template-columns:9rem 1fr; gap:.35rem 3rem} }
.entry:last-child{border-bottom:1px solid rgba(244,238,251,.1)}
.entry__meta{font-family:var(--mono); font-size:.78rem; color:var(--dimmer); letter-spacing:.06em; padding-top:.55rem}
.entry__logo{display:block; width:min(144px,60%); height:auto; margin-bottom:.85rem}
@media (min-width:52rem){ .entry__logo{width:100%; max-width:144px} }
.entry__body{min-width:0}
.entry h3{
  margin:0 0 .5rem; font-variation-settings:"wdth" 118,"wght" 700;
  font-size:clamp(1.35rem,1rem + 1.6vw,2.1rem); line-height:1.05; letter-spacing:-.015em;
}
.entry h3 a{color:inherit; text-decoration:none; background-image:linear-gradient(var(--magenta),var(--magenta));
  background-size:0 2px; background-repeat:no-repeat; background-position:0 100%; transition:background-size .3s}
.entry h3 a:hover,.entry h3 a:focus-visible{background-size:100% 2px}
.entry p{margin:0 0 .85rem; color:var(--dim); max-width:58ch}
blockquote{
  margin:0 0 1rem; padding-left:1.1rem; border-left:2px solid var(--sun-lo);
  font-variation-settings:"wdth" 105,"wght" 500; font-size:clamp(1.05rem,1rem + .5vw,1.3rem);
  line-height:1.35; color:var(--chrome); max-width:44ch;
}
blockquote cite{display:block; margin-top:.5rem; font-style:normal; font-family:var(--mono);
  font-size:.72rem; letter-spacing:.06em; color:var(--dimmer)}

/* link chips: press outlets, streaming platforms */
.chips{display:flex; flex-wrap:wrap; gap:.5rem; margin:0; padding:0; list-style:none}
.chips a{
  display:inline-block; font-family:var(--mono); font-size:.72rem; letter-spacing:.06em;
  color:var(--dim); text-decoration:none; padding:.42rem .7rem;
  border:1px solid rgba(244,238,251,.16); border-radius:2px;
  transition:color .18s,border-color .18s,background-color .18s;
}
.chips a:hover,.chips a:focus-visible{color:var(--ink); background:var(--chrome); border-color:var(--chrome)}
.chips a[data-live]{border-color:rgba(255,47,185,.5); color:var(--chrome)}
.chips a[data-live]:hover,.chips a[data-live]:focus-visible{background:var(--magenta); border-color:var(--magenta); color:var(--ink)}

/* Editorial credentials that have no public URL to link to — Apple's Today
   tab features are ephemeral and 2019 stories have no durable address. Said
   in plain text rather than dressed as an award chip: the old gradient badge
   inherited --dim from `.entry p` (equal specificity, earlier in the file)
   and rendered light lavender on orange, which was unreadable.
   `p.accolade` ties `.entry p` on specificity and wins on source order. */
p.accolade{color:var(--chrome); font-weight:600; max-width:52ch; margin:0 0 1rem}

/* Splits current work from the back catalogue inside one section. Echoes
   .head__rule at a smaller scale so it reads as subordinate to the h2. */
.subhead{
  display:flex; align-items:center; gap:1rem;
  margin:clamp(2.5rem,5vw,4rem) 0 clamp(1.25rem,2.5vw,2rem);
  font-family:var(--mono); font-size:.78rem; letter-spacing:.1em;
  color:var(--dimmer);
}
.subhead::after{content:""; flex:1 1 auto; height:1px; background:var(--rule)}
.subhead + .entry{border-top:none}

.lead-track{display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap; margin:0 0 .35rem}
.lead-track a{color:inherit; text-decoration:none;
  font-variation-settings:"wdth" 116,"wght" 700;
  font-size:clamp(1.3rem,1rem + 1.5vw,2rem); line-height:1.1; letter-spacing:-.015em;
  background-image:linear-gradient(var(--magenta),var(--magenta)); background-size:0 2px;
  background-repeat:no-repeat; background-position:0 100%; transition:background-size .3s}
.lead-track a:hover,.lead-track a:focus-visible{background-size:100% 2px}
.lead-track span{font-family:var(--mono); font-size:.78rem; letter-spacing:.14em;
  color:var(--dimmer)}
.lead-sub{margin:0 0 1.6rem; font-family:var(--mono); font-size:.74rem;
  letter-spacing:.06em; color:var(--magenta)}
.tracklist{margin:.25rem 0 1rem; padding:0; list-style:none; columns:2; column-gap:2.5rem; max-width:44rem}
@media (max-width:38rem){ .tracklist{columns:1} }
.tracklist li{font-family:var(--mono); font-size:.82rem; color:var(--dim); padding-block:.22rem; break-inside:avoid}
.tracklist li span{color:var(--dimmer)}

/* ---- footer -------------------------------------------------------- */
footer{padding-block:clamp(3.5rem,7vw,6rem); border-top:1px solid rgba(244,238,251,.1)}
.foot{display:flex; flex-wrap:wrap; gap:2rem; align-items:center; justify-content:space-between}
.foot img{width:56px; height:56px; border-radius:50%; display:block}
.foot__id{display:flex; align-items:center; gap:1rem}
.foot__id b{font-variation-settings:"wdth" 118,"wght" 700; text-transform:uppercase; letter-spacing:.02em}
.foot__id span{display:block; font-family:var(--mono); font-size:.72rem; color:var(--dimmer); letter-spacing:.06em}
.foot__legal{font-family:var(--mono); font-size:.72rem; color:var(--dimmer); letter-spacing:.06em}
.foot__legal a{color:var(--dim)}

a:focus-visible{outline:2px solid var(--cyan); outline-offset:3px; border-radius:2px}

/* ---- load-in ------------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  .rise{animation:rise .7s cubic-bezier(.2,.7,.3,1) both}
  .hero__line{animation-delay:.15s}
  .jump{animation-delay:.3s}
  @keyframes rise{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}
}
@media (prefers-reduced-motion:reduce){
  .floor::before{animation:none}
}

/* ---- notes (blog) -------------------------------------------------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding-block:1.75rem; border-bottom:1px solid rgba(244,238,251,.1);
}
.topbar a.brand{
  display:flex; align-items:center; gap:.7rem; color:inherit; text-decoration:none;
  font-variation-settings:"wdth" 118,"wght" 700; text-transform:uppercase; letter-spacing:.02em;
}
.topbar a.brand img{width:34px; height:34px; border-radius:50%; display:block}
.topbar nav{display:flex; gap:1.5rem; font-family:var(--mono); font-size:.75rem;
  letter-spacing:.06em}
.topbar nav a{color:var(--dim); text-decoration:none}
.topbar nav a:hover,.topbar nav a:focus-visible{color:var(--chrome)}

.page-head{padding-block:clamp(3rem,7vw,5.5rem) clamp(2rem,4vw,3rem)}
.page-head h1{
  margin:0 0 1rem; font-variation-settings:"wdth" 122,"wght" 800;
  font-size:clamp(2rem,1.2rem + 4vw,4rem); line-height:1; letter-spacing:-.025em;
  text-wrap:balance;
}
.page-head .standfirst{margin:0; color:var(--dim); font-size:clamp(1.05rem,1rem + .6vw,1.35rem);
  max-width:52ch; text-wrap:pretty}
.page-head time{display:block; margin-bottom:1rem; font-family:var(--mono); font-size:.75rem;
  letter-spacing:.06em; color:var(--magenta)}

.post-card{
  display:block; padding-block:clamp(1.75rem,3vw,2.4rem); text-decoration:none; color:inherit;
  border-top:1px solid rgba(244,238,251,.1);
}
.post-card:last-of-type{border-bottom:1px solid rgba(244,238,251,.1)}
.post-card__meta{font-family:var(--mono); font-size:.74rem; letter-spacing:.14em;
  color:var(--dimmer)}
.post-card__title{margin:.5rem 0 .6rem; font-variation-settings:"wdth" 116,"wght" 700;
  font-size:clamp(1.3rem,1rem + 1.4vw,2rem); line-height:1.1; letter-spacing:-.015em}
.post-card__excerpt{margin:0 0 .9rem; color:var(--dim); max-width:58ch}
.post-card__more{font-family:var(--mono); font-size:.74rem; letter-spacing:.14em;
  color:var(--magenta)}
.post-card:hover .post-card__title,.post-card:focus-visible .post-card__title{color:var(--magenta)}

/* Offsite writing, hand-maintained in notes/index.html after the posts:end
   marker so the build never regenerates over it. */
.elsewhere{margin-top:clamp(2.5rem,5vw,4rem)}
.prose{padding-bottom:clamp(3rem,7vw,6rem); max-width:42rem}
.prose h2{margin:2.75rem 0 .9rem; font-variation-settings:"wdth" 114,"wght" 700;
  font-size:clamp(1.25rem,1rem + 1.1vw,1.75rem); line-height:1.15;
  letter-spacing:-.01em}
.prose h3{margin:2rem 0 .7rem; font-variation-settings:"wdth" 108,"wght" 600; font-size:1.15rem}
.prose p,.prose li{color:#d7cee6}
.prose p{margin:0 0 1.15rem}
.prose ul,.prose ol{margin:0 0 1.15rem; padding-left:1.2rem}
.prose li{margin-bottom:.4rem}
.prose a{color:var(--chrome); text-decoration-color:var(--magenta); text-underline-offset:3px}
.prose code{font-family:var(--mono); font-size:.88em; background:rgba(255,47,185,.12);
  padding:.1em .35em; border-radius:2px}
.prose pre{background:var(--ink-2); border:1px solid rgba(244,238,251,.12); border-radius:3px;
  padding:1rem 1.1rem; overflow-x:auto; margin:0 0 1.3rem}
.prose pre code{background:none; padding:0; font-size:.85rem; line-height:1.55}
.prose blockquote{margin:0 0 1.3rem}
.prose .frame{margin:0 0 1.4rem; border:1px solid rgba(244,238,251,.14); border-radius:3px; overflow:hidden}
.prose .frame img{display:block; width:100%; height:auto}
.prose hr{border:0; border-top:1px solid rgba(244,238,251,.14); margin:2.5rem 0}

/* ---- featured: the current push -------------------------------------
   The hub exists to hold three lanes together, but one of them is always
   the thing being launched. This block is that slot. It sits above the
   numbered sections deliberately: a visitor arriving from any account
   should hit the current push before the back catalogue. Swap the
   contents when the push changes; do not add a second one. */
.featured{
  padding-block:clamp(2.5rem,6vw,4.5rem) clamp(3rem,6vw,5rem);
  border-bottom:1px solid rgba(244,238,251,.1);
}
.featured__eyebrow{
  margin:0 0 1rem; font-family:var(--mono); font-size:.74rem; font-weight:600;
  letter-spacing:.06em; color:var(--magenta);
}
.featured h2{
  margin:0 0 .9rem; font-variation-settings:"wdth" 125,"wght" 800;
  font-size:clamp(2.1rem,1.3rem + 4vw,4.2rem); line-height:.98; letter-spacing:-.03em;
}
.featured h2 a{color:inherit; text-decoration:none}
.featured h2 a:hover,.featured h2 a:focus-visible{
  background:linear-gradient(100deg,var(--sun-hi),var(--sun-lo) 60%,var(--magenta));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.featured__pitch{
  margin:0 0 1.6rem; font-size:clamp(1.05rem,1rem + .7vw,1.4rem); line-height:1.5;
  color:#d7cee6; max-width:46ch; text-wrap:pretty;
}
.cta{
  display:inline-block; font-family:var(--mono); font-size:.8rem; font-weight:600;
  letter-spacing:.06em; text-decoration:none;
  color:var(--ink); background:linear-gradient(100deg,var(--sun-hi),var(--sun-lo));
  padding:.85rem 1.5rem; border-radius:2px;
  transition:transform .18s, filter .18s;
}
.cta:hover,.cta:focus-visible{transform:translateY(-2px); filter:brightness(1.08)}
.featured__shot{
  margin:clamp(2rem,4vw,3rem) 0 0; border:1px solid rgba(244,238,251,.16);
  border-radius:4px; overflow:hidden; line-height:0;
  box-shadow:0 24px 70px -30px rgba(255,47,185,.5);
  transition:border-color .25s ease, box-shadow .25s ease;
}
/* The shot is a link to sampleminer.com, so it needs to look like one on
   hover. focus-within carries the same affordance to keyboard users. */
.featured__shot:hover,.featured__shot:focus-within{
  border-color:rgba(255,47,185,.55);
  box-shadow:0 28px 80px -26px rgba(255,47,185,.78);
}
.featured__shot a{display:block; line-height:0}
.featured__shot img{display:block; width:100%; height:auto}