/* selectah.app
   ─────────────────────────────────────────────────────────────────────────
   The page is keyed. A DJ set moves around the Camelot wheel, and so does
   this page: every section carries a key, and --accent travels with it as you
   scroll. The twelve hues are the app's own — the key number sets the hue, A
   (minor) runs muted and B (major) bright, exactly like the printed wheel.

   Type: Syne for display (wide, flat-sided, at home on a record sleeve),
   Instrument Sans for reading, DM Mono for anything that is data — tempo,
   key, counts. The mono face is doing a job, not a costume: this product is
   numbers. */

:root {
  --k1:#E8613A; --k2:#EE8B3C; --k3:#F0B343; --k4:#DCCE4A;
  --k5:#A6CE58; --k6:#5FC27B; --k7:#3FB6AE; --k8:#3F9BD2;
  --k9:#5B7EDA; --k10:#8A6BD2; --k11:#BC61B8; --k12:#DE5C7E;

  --ink:#07090C;
  --ink-2:#0C0F15;
  --paper:#F2F4F8;
  --dim:#939BAE;
  --faint:#5A6273;
  --edge:rgba(255,255,255,.075);
  --edge-2:rgba(255,255,255,.14);

  --accent:var(--k5);

  --display:"Syne","Avenir Next Condensed",sans-serif;
  --body:"Instrument Sans",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --mono:"DM Mono","SF Mono",ui-monospace,Menlo,monospace;

  --gutter:clamp(20px,4vw,52px);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  /* The accent moves between sections rather than snapping. */
  transition:--accent .8s var(--ease);
}
@property --accent{syntax:"<color>";inherits:true;initial-value:#A6CE58}

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}

h1,h2,h3{
  margin:0;
  font-family:var(--display);
  font-weight:800;
  line-height:.98;
  letter-spacing:-.025em;
}

.wrap{max-width:1240px;margin:0 auto;padding-inline:var(--gutter)}

/* The one label style on the page. Everything that is metadata wears it. */
.tag{
  font-family:var(--mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--faint);
}

/* ─────────────────────── the key rail ───────────────────────
   Twelve marks down the left edge, one per Camelot number. The lit one is
   the key of whatever section you are reading. It is the wheel from the
   hero, unrolled and kept in the corner of your eye. */
.rail{
  position:fixed;
  left:max(14px,calc((100vw - 1240px)/2 - 34px));
  top:50%;
  transform:translateY(-50%);
  z-index:20;
  display:flex;
  flex-direction:column;
  gap:9px;
  pointer-events:none;
}
.rail i{
  display:block;
  width:2px;
  height:15px;
  border-radius:2px;
  background:currentColor;
  opacity:.16;
  transition:opacity .45s var(--ease),transform .45s var(--ease);
}
.rail i.on{opacity:1;transform:scaleX(2.4)}

/* ─────────────────────── masthead ─────────────────────── */
.masthead{
  position:sticky;top:0;z-index:30;
  background:color-mix(in srgb,var(--ink) 82%,transparent);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--edge);
}
.masthead .wrap{display:flex;align-items:center;gap:20px;height:68px}
.logo{display:flex;align-items:center;gap:11px;flex:1}
/* The mark keeps the app's own accent. Everything else on the page moves
   around the wheel; the brand does not. */
.logo svg{width:26px;height:26px;color:var(--k1);flex:none}
.logo b{
  font-family:var(--display);font-weight:800;font-size:21px;
  letter-spacing:-.02em;
}
.masthead nav{display:flex;gap:26px}
.masthead nav a{
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);
  transition:color .2s var(--ease);
}
.masthead nav a:hover,.masthead nav a:focus-visible{color:var(--paper)}

/* ─────────────────────── hero ───────────────────────
   Asymmetric on purpose: the wheel is the thesis, so it gets the weight, and
   the headline leans on it rather than sitting politely above it. */
.hero{
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(28px,5vw,72px);
  align-items:center;
  padding-block:clamp(48px,8vw,104px) clamp(36px,5vw,64px);
}
.hero h1{font-size:clamp(40px,4.9vw,70px)}
.hero h1 em{
  font-style:normal;
  color:var(--accent);
  transition:color .8s var(--ease);
}
.hero .lede{
  color:var(--dim);
  font-size:clamp(16.5px,1.5vw,19px);
  max-width:34em;
  margin:26px 0 0;
}
.hero .tag{display:block;margin-bottom:22px}

.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
.act{
  font-family:var(--mono);
  font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:14px 22px;border-radius:2px;
  border:1px solid var(--edge-2);
  transition:border-color .2s var(--ease),color .2s var(--ease),
             background .2s var(--ease);
}
.act:hover,.act:focus-visible{border-color:var(--accent);color:var(--accent)}
.act.solid{
  background:var(--accent);border-color:var(--accent);color:var(--ink);
  font-weight:500;
}
.act.solid:hover,.act.solid:focus-visible{
  background:transparent;color:var(--accent);
}

/* ─────────────────────── the wheel ───────────────────────
   Not an illustration: the segments are sized by how many records sit in
   each key in a real 141-track crate. */
.wheel-stage{position:relative;justify-self:center;width:min(100%,470px)}
.wheel{width:100%;height:auto;overflow:visible}
.wheel path{
  cursor:crosshair;
  transition:opacity .25s var(--ease),transform .25s var(--ease);
  transform-origin:150px 150px;
}
.wheel-stage[data-hover="1"] path{opacity:.22}
.wheel-stage[data-hover="1"] path.lit{opacity:1;transform:scale(1.045)}
.hub{
  position:absolute;inset:0;
  display:grid;place-content:center;justify-items:center;
  text-align:center;pointer-events:none;
}
.hub .code{
  font-family:var(--display);font-weight:800;
  font-size:clamp(34px,4.6vw,52px);letter-spacing:-.03em;
  color:var(--accent);line-height:1;
  transition:color .35s var(--ease);
}
.hub .what{margin-top:9px}

/* ─────────────────────── transitions ───────────────────────
   The divider between two sections is the move between their keys, written
   the way the app writes it. Structure carrying real information. */
.move{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding-block:clamp(30px,5vw,58px);
}
.move span{white-space:nowrap}
.move .line{
  flex:1;height:1px;
  background:linear-gradient(to right,var(--edge),transparent);
}
.move .arrow{color:var(--accent);transition:color .8s var(--ease)}

/* ─────────────────────── sections ─────────────────────── */
.chapter{padding-block:clamp(16px,3vw,32px)}
.chapter-head{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:clamp(18px,3vw,38px);
  align-items:start;
  margin-bottom:clamp(28px,4vw,48px);
}
/* The key stamp: this section's place in the set. */
.stamp{
  font-family:var(--mono);font-size:12px;font-weight:500;
  letter-spacing:.06em;
  color:var(--accent);
  border:1px solid currentColor;
  border-radius:2px;
  padding:5px 9px;
  line-height:1;
  transition:color .8s var(--ease);
}
.chapter-head h2{font-size:clamp(28px,4.2vw,50px);max-width:16ch}
.chapter-head p{color:var(--dim);margin:16px 0 0;max-width:46ch}

/* The screenshots lean like records in a crate, and open full size when
   clicked -- at this width the detail in them is unreadable otherwise. */
.plate{
  display:block;width:100%;padding:0;cursor:zoom-in;
  position:relative;font:inherit;color:inherit;text-align:left;
  border:1px solid var(--edge-2);
  border-radius:4px;
  overflow:hidden;
  background:var(--ink-2);
  box-shadow:0 50px 90px -50px #000;
  transition:transform .5s var(--ease);
}
/* The screenshot always takes the wide column; which side it sits on
   alternates. Doing that with an explicit class rather than :nth-of-type,
   which would count every sibling div and swap the columns by accident. */
.spread{
  display:grid;
  grid-template-columns:minmax(0,1.42fr) minmax(0,1fr);
  gap:clamp(24px,4vw,56px);
  align-items:center;
  padding-block:clamp(34px,5vw,60px);
}
.spread .spread-text{order:2}
.spread .plate{order:1;transform:rotate(.45deg)}
.spread.flip{grid-template-columns:minmax(0,1fr) minmax(0,1.42fr)}
.spread.flip .spread-text{order:0}
.spread.flip .plate{transform:rotate(-.45deg)}
.spread .plate:hover{transform:rotate(0)}
.spread h3{font-size:clamp(21px,2.4vw,29px);letter-spacing:-.02em}
.spread p{color:var(--dim);margin:14px 0 0;font-size:16.5px}
.spread .tag{display:block;margin-bottom:14px}

/* The affordance: a mono tag that surfaces on hover, and a lift so the plate
   reads as something you can pick up. */
.zoom{
  position:absolute;right:14px;bottom:14px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;
  padding:7px 11px;border-radius:2px;
  background:color-mix(in srgb,var(--ink) 78%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid var(--edge-2);
  color:var(--paper);
  opacity:0;transform:translateY(5px);
  transition:opacity .22s var(--ease),transform .22s var(--ease);
  pointer-events:none;
}
.plate:hover .zoom,.plate:focus-visible .zoom{opacity:1;transform:none}

.lightbox{
  border:0;padding:0;background:none;
  max-width:min(96vw,1800px);max-height:94vh;
  width:auto;
}
.lightbox::backdrop{
  background:color-mix(in srgb,var(--ink) 92%,transparent);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.lightbox img{
  max-width:100%;max-height:94vh;width:auto;
  border:1px solid var(--edge-2);border-radius:4px;
  box-shadow:0 60px 120px -50px #000;
}
.lightbox-close{
  position:fixed;top:20px;right:22px;z-index:1;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;
  padding:10px 16px;border-radius:2px;cursor:pointer;
  background:none;border:1px solid var(--edge-2);color:var(--paper);
  transition:border-color .2s var(--ease),color .2s var(--ease);
}
.lightbox-close:hover,.lightbox-close:focus-visible{
  border-color:var(--k1);color:var(--k1);
}

/* Four guarantees. A plain list with a keyed edge beats four boxes. */
.guards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(248px,1fr));
  gap:1px;
  background:var(--edge);
  border-block:1px solid var(--edge);
}
.guard{background:var(--ink);padding:30px 26px 34px}
.guard h3{
  font-family:var(--body);font-weight:500;font-size:17px;
  letter-spacing:0;line-height:1.35;margin-bottom:10px;
}
.guard p{color:var(--dim);margin:0;font-size:15.5px;line-height:1.6}
.guard .num{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  display:block;margin-bottom:18px;
}

/* Specs read as a spec sheet, not prose. */
.spec{border-top:1px solid var(--edge)}
.spec div{
  display:grid;
  grid-template-columns:clamp(120px,16vw,200px) minmax(0,1fr);
  gap:clamp(14px,3vw,36px);
  padding:20px 0;
  border-bottom:1px solid var(--edge);
  align-items:baseline;
}
.spec dt{color:var(--faint)}
.spec dd{margin:0;color:var(--dim);font-size:16.5px}
.spec a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

/* The closing note. */
.outro{
  padding-block:clamp(56px,8vw,110px);
  border-top:1px solid var(--edge);
  margin-top:clamp(40px,6vw,80px);
}
.outro h2{font-size:clamp(30px,4.6vw,56px);max-width:15ch}
.outro p{color:var(--dim);margin:18px 0 0;max-width:42ch}

/* ─────────────────────── long-form pages ─────────────────────── */
.doc{max-width:50em;padding-block:clamp(44px,7vw,84px) clamp(60px,9vw,120px)}
.doc h1{font-size:clamp(34px,5.4vw,58px);margin-bottom:14px}
.doc .tag{display:block;margin-bottom:clamp(30px,5vw,52px)}
.doc h2{
  font-family:var(--body);font-weight:500;font-size:21px;
  letter-spacing:0;line-height:1.35;
  margin:46px 0 12px;
  padding-top:22px;border-top:1px solid var(--edge);
}
.doc h2:first-of-type{border-top:0;padding-top:0}
.doc p,.doc li{color:var(--dim);font-size:17px}
.doc p{margin:0 0 16px}
.doc ul{padding-left:20px;margin:0 0 16px}
.doc li{margin-bottom:9px}
.doc strong{color:var(--paper);font-weight:600}
.doc a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.doc code{
  font-family:var(--mono);font-size:14.5px;color:var(--paper);
  background:rgba(255,255,255,.055);padding:2px 6px;border-radius:2px;
}
.doc .opener{color:var(--paper);font-size:20px}

/* ─────────────────────── colophon ─────────────────────── */
.colophon{border-top:1px solid var(--edge);padding-block:38px}
.colophon .wrap{
  display:flex;gap:22px;flex-wrap:wrap;align-items:center;
}
.colophon .tag{flex:1}
.colophon nav{display:flex;gap:22px}
.colophon a{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);
}
.colophon a:hover,.colophon a:focus-visible{color:var(--accent)}

/* ─────────────────────── quality floor ─────────────────────── */
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:2px;
}

@media (max-width:940px){
  .rail{display:none}
  .hero{grid-template-columns:1fr;padding-block:40px 24px}
  .wheel-stage{width:min(100%,400px);margin-top:12px}
  .spread{grid-template-columns:1fr;gap:22px}
  .spread:nth-of-type(even) .spread-text{order:0}
  .spread .plate{transform:none}
  .chapter-head{grid-template-columns:1fr;gap:14px}
  .spec div{grid-template-columns:1fr;gap:4px;padding:16px 0}
  /* The two anchors are reachable by scrolling; on a phone they only crowd
     the name out of the bar. */
  .masthead nav a[href^="#"]{display:none}
  .masthead nav{gap:16px}
  .masthead .wrap{height:60px}
  /* The move reads "6A -> 6B" on one row and its description on the next,
     rather than pushing a nowrap label past the edge. */
  .move{gap:10px 14px}
  .move .line{flex-basis:100%;order:3;height:0;background:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    transition-duration:.01ms!important;
  }
  .spread .plate{transform:none}
}