/* Little Brain, public pages. Tokens and the text face come from theme.css. Dark bands carry the slate;
   wide caps come from the wordmark; hex tabs and rounded wires from his one-sheet. Red is the one accent. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:72px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--body); font-size:var(--body-size); letter-spacing:var(--body-track);
  line-height:1.55; -webkit-font-smoothing:antialiased}
/* the ground: a faint board of circuit traces (assets/traces.svg), after the lines in the brain wordmark and the
   corners of his wires. Tone on tone so type reads straight over it; on /links the spine stays the one drawn line. */
body.pub{background:var(--paper) url(/assets/traces.svg) 0 0/480px 400px}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-underline-offset:4px; text-decoration-thickness:1.5px; text-decoration-color:var(--accent)}
a:hover{text-decoration-color:currentColor}
h1,h2,h3{margin:0; font-weight:400; text-wrap:balance}
p{margin:0 0 1em}
ul,ol{margin:0; padding:0}
button{font:inherit; color:inherit; cursor:pointer}
:root{--focus:var(--ink)}
:focus-visible{outline:2px solid var(--focus); outline-offset:3px}
.tb,.hero,.ft,.lk-head{--focus:var(--bar-ink)}
.sr,.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.skip{position:absolute; left:-999px; top:8px; z-index:99; background:var(--ink); color:var(--paper); padding:.5rem .8rem}
.skip:focus{left:8px}
.wrap{width:100%; max-width:1100px; margin:0 auto; padding-inline:clamp(1rem,5vw,3rem)}
.label{font-family:var(--mono); font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); margin:0 0 .3rem}
.small{font-size:.9rem; color:var(--dim)}
.ic{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto}

/* top bar: the prominent dark */
.tb{position:sticky; top:0; z-index:40; background:var(--bar); color:var(--bar-ink)}
.tb-in{display:flex; align-items:center; gap:1rem; min-height:58px}
.tb-mark{display:block; padding-block:14px}
.tb-mark img{height:18px; width:auto}
.tb-links{display:flex; gap:.2rem; margin-left:auto}
.tb-links a{display:inline-flex; align-items:center; min-height:44px; padding:0 .6rem; font-family:var(--mono); font-size:.74rem;
  letter-spacing:.08em; text-transform:uppercase; text-decoration:none}
.tb-links a:hover{background:color-mix(in srgb, var(--bar-ink) 14%, transparent)}

/* buttons and chips */
.btn{display:inline-flex; align-items:center; gap:.5rem; min-height:48px; padding:0 1.2rem; background:var(--accent); color:var(--on-accent);
  border:1px solid var(--accent); font-family:var(--mono); font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; text-decoration:none}
.btn:hover{background:var(--accent-2); border-color:var(--accent-2); color:var(--on-accent)}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--ink)}
.btn.ghost:hover{background:var(--tint)}
.chip{display:inline-flex; align-items:center; gap:.4rem; min-height:44px; padding:0 .9rem; border:1px solid var(--ink); background:transparent;
  color:var(--ink); font-family:var(--mono); font-size:.76rem; letter-spacing:.06em; text-transform:uppercase; text-decoration:none}
.chip:hover{background:var(--tint)}

/* hex tab headings, after his one-sheet */
.hex{display:inline-flex; align-items:center; min-height:38px; padding:.25rem 1.6rem; background:var(--bar); color:var(--bar-ink);
  clip-path:polygon(13px 0,calc(100% - 13px) 0,100% 50%,calc(100% - 13px) 100%,13px 100%,0 50%)}
.sec-h{font-family:var(--wide); font-weight:800; font-variation-settings:'wdth' 125; letter-spacing:.06em; text-transform:uppercase;
  font-size:clamp(1rem,2.4vw,1.35rem); margin-bottom:1.2rem}
.sub-h{font-family:var(--mono); font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; margin:1.6rem 0 .6rem; color:var(--dim)}
.sec{padding-block:clamp(2.5rem,7vw,4.5rem); border-top:1px solid var(--line)}

/* hero */
.hero{position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.8fr); background:var(--bar); color:var(--bar-ink); overflow:hidden}
.hero-fig{position:relative; order:2; margin:0; min-height:520px}
.hero-fig img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 40%}
.wires{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
.wires path{fill:none; stroke:#fff; stroke-width:2.5; vector-effect:non-scaling-stroke; stroke-linecap:round}
@media (prefers-reduced-motion:no-preference){.wires path{stroke-dasharray:900; stroke-dashoffset:900; animation:wire 1.6s cubic-bezier(.16,1,.3,1) .35s forwards}}
@keyframes wire{to{stroke-dashoffset:0}}
.hero-copy{order:1; align-self:end; padding-block:clamp(2.5rem,8vw,6rem);
  padding-inline:max(clamp(1rem,5vw,3rem), calc((100vw - 1100px) / 2 + clamp(1rem,5vw,3rem))) clamp(1rem,5vw,3rem)}
.place{font-family:var(--mono); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; margin:0 0 1.6rem}
.hero-mark img{width:min(100%,560px)}
.tagline{font-family:var(--wide); font-weight:800; font-variation-settings:'wdth' 125; letter-spacing:.05em; text-transform:uppercase;
  font-size:clamp(1rem,2.4vw,1.4rem); margin:1.4rem 0 1rem}
.hero .tagline{display:inline-block; background:var(--accent); color:var(--on-accent); padding:.35em .6em}
.hero-btns{display:flex; flex-wrap:wrap; gap:.6rem}
.hero .btn.ghost{color:var(--bar-ink); border-color:var(--bar-ink)}
.hero .btn.ghost:hover{background:color-mix(in srgb, var(--bar-ink) 14%, transparent)}

/* music */
.one-line{max-width:60ch; font-size:1.1em; margin-bottom:1.6rem}
.release{display:grid; grid-template-columns:minmax(0,260px) minmax(0,1fr); gap:1.4rem; align-items:end; margin-bottom:1.4rem}
.release img{border:1px solid var(--ink)}
.release.sm{grid-template-columns:96px minmax(0,1fr); gap:1rem}
.r-title{font-family:var(--wide); font-weight:800; font-variation-settings:'wdth' 125; letter-spacing:.04em; text-transform:uppercase;
  font-size:clamp(1.3rem,3vw,2rem); margin-bottom:.7rem}
.release.sm .r-title{font-size:1.1rem}
.r-title a{display:inline-flex; align-items:center; min-height:44px; text-decoration:none}
.r-title a:hover{text-decoration:underline}
.r-links{display:flex; flex-wrap:wrap; gap:.5rem; margin:0}
.deck{margin:0 0 1.6rem}
.deck iframe{width:100%; max-width:400px; height:472px; border:0}
.tracks{list-style:none; counter-reset:t; display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:.2rem 1.2rem; margin-bottom:1.4rem}
.tracks li{counter-increment:t; padding:.4rem 0; border-bottom:1px solid var(--line)}
.tracks li::before{content:counter(t,decimal-leading-zero); font-family:var(--mono); font-size:.75rem; color:var(--dim); margin-right:.7rem}
.feature{margin:0}

/* live */
.shows,.played{list-style:none}
.shows li,.played li{display:grid; grid-template-columns:10rem minmax(0,1fr) auto; gap:1rem; align-items:center; padding:.75rem 0; border-bottom:1px solid var(--line)}
.when{font-family:var(--mono); font-size:.8rem; letter-spacing:.06em; text-transform:uppercase}
.what small{color:var(--dim); font-size:.9em}
.empty{font-family:var(--mono); font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color:var(--dim)}

/* signup */
.signup{margin-block:clamp(2.5rem,7vw,4rem); padding:clamp(1.4rem,4vw,2.4rem); background:var(--block); color:var(--block-ink)}
.signup .sec-h{font-size:clamp(1.1rem,3vw,1.7rem); line-height:1.2; margin-bottom:.6rem}
.s-line{margin-bottom:1rem}
.s-row{display:flex; flex-wrap:wrap; gap:.6rem}
.s-row input{flex:1 1 16rem; min-height:48px; padding:.7rem .85rem; border:1px solid currentColor; background:var(--card); color:var(--ink); font:inherit; font-size:16px; border-radius:0}
.s-row input::placeholder{color:var(--dim)}
.s-note{min-height:1.4em; margin:.7rem 0 0}
.s-note.err{font-weight:600}
.signup-f.done .s-row{display:none}

/* contact */
.contacts{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.6rem; margin-bottom:1.6rem}
.who{margin-bottom:.2rem}
.mail{font-family:var(--wide); font-weight:800; font-variation-settings:'wdth' 125; font-size:clamp(.9rem,2vw,1.1rem); word-break:break-all; margin-bottom:.6rem}
.mail a{text-decoration:none; display:inline-flex; align-items:center; min-height:44px}
.c-btns{display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin:0}
.copied{font-family:var(--mono); font-size:.76rem}
.follow{display:flex; flex-wrap:wrap; gap:.5rem}
.contacts.sm .mail{font-size:.95rem}

/* footer: the dark band again */
.ft{background:var(--bar); color:var(--bar-ink); padding-block:2.5rem 3rem}
.ft-in{display:grid; gap:.6rem}
.ft-mark{height:20px; width:auto; margin-bottom:.6rem}
.ft p{margin:0}
.ft a{display:inline-flex; align-items:center; min-height:44px}
.ft .small{color:var(--bar-ink); opacity:1}

/* /links: one wire, after the connector lines on his one-sheet. It drops from the header, runs down a spine on
   the left, fills as the page scrolls, and each section hangs off it on a hex tab that snaps in as the wire reaches
   it. That is the one authored motion on the page; with reduced motion everything is simply drawn and in place. */
.lk{max-width:30rem; margin:0 auto; padding:0 1rem 3rem}
/* the header is the eye from the mask photo in the palette's three tones: the page is under watch. The scrim runs
   to solid slate before the wordmark, so the type sits on the same bar it always did and the wire still leaves it. */
.lk-head{position:relative; isolation:isolate; overflow:hidden; text-align:center; margin:0 -1rem; padding:12rem 1rem 1.8rem; background:var(--bar); color:var(--bar-ink)}
.lk-head::before{content:''; position:absolute; inset:0; z-index:-2; background:url(/assets/iris-field.jpg) 50% 0/100% auto no-repeat}
.lk-head::after{content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to bottom, transparent 128px, color-mix(in srgb, var(--bar) 55%, transparent) 158px, var(--bar) 188px)}
.lk-head h1 img{width:min(100%,320px); margin:0 auto}
.lk-head .tagline{display:inline-block; margin:1.1rem 0 1.2rem; background:var(--accent); color:var(--on-accent); padding:.35em .6em}
.lk-tools{display:flex; justify-content:center; margin:0}
.lk-head .chip{color:var(--bar-ink); border-color:var(--bar-ink)}
.lk-head .chip:hover{background:color-mix(in srgb, var(--bar-ink) 14%, transparent)}

.lk-body{--rail:10px; position:relative; padding:2.4rem 0 0 2.6rem}
/* the drop: from under the header, down, then left into the spine, with his rounded corner */
.bend{position:absolute; top:0; left:var(--rail); width:calc(50% + 1.3rem - var(--rail)); height:1.4rem;
  border-right:2px solid var(--ink); border-bottom:2px solid var(--ink); border-bottom-right-radius:14px}
.spine{position:absolute; left:var(--rail); top:calc(1.4rem - 2px); bottom:3.5rem; width:16px;
  border-left:2px solid var(--line-2); border-top:2px solid var(--ink); border-top-left-radius:14px}
.spine i{position:absolute; left:-2px; top:14px; bottom:0; width:2px; background:var(--ink); transform-origin:top}

.node{position:relative; margin:0 0 2.2rem}
.node::before{content:''; position:absolute; left:calc(-2.6rem + var(--rail)); top:18px; width:2.2rem; height:2px; background:var(--ink)}
.node::after{content:''; position:absolute; left:calc(-2.6rem + var(--rail) - 4px); top:14px; width:10px; height:10px; border-radius:50%;
  background:var(--paper); border:2px solid var(--ink)}
.hx{display:inline-flex; align-items:center; min-height:38px; padding:.2rem 1.4rem; margin-bottom:.9rem; background:var(--bar); color:var(--bar-ink);
  font-family:var(--mono); font-size:.76rem; letter-spacing:.1em; text-transform:uppercase;
  clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,12px 100%,0 50%)}
.node-list::before,.node-list::after{top:calc(clamp(1.4rem,4vw,2.4rem) + 6px)}
.node-list .signup{margin:0}

.pads{display:grid; grid-template-columns:1fr 1fr; gap:.5rem}
@media (max-width:480px){.pads{grid-template-columns:1fr}}
.pad{position:relative; overflow:hidden; display:flex; align-items:center; justify-content:space-between; gap:.5rem; min-height:58px;
  padding:0 1rem; background:var(--bar); color:var(--bar-ink); text-decoration:none;
  font-family:var(--wide); font-weight:800; font-variation-settings:'wdth' 125; letter-spacing:.05em; text-transform:uppercase; font-size:.8rem;
  transition:transform .12s ease-out}
.pad > *{position:relative; z-index:1}
.pad::before{content:''; position:absolute; inset:0; background:var(--accent); transform:translateX(-101%);
  transition:transform .42s cubic-bezier(.16,1,.3,1)}
.pad:hover::before,.pad:focus-visible::before{transform:none}
.pad:hover,.pad:focus-visible{color:var(--on-accent)}
.pad:active{transform:scale(.98)}
.pa .ic{width:16px; height:16px; transition:transform .3s cubic-bezier(.16,1,.3,1)}
.pad:hover .pa .ic,.pad:focus-visible .pa .ic{transform:translateX(3px)}
.links .release{margin:0 0 1rem}
.links .deck{margin:0}
.links .deck iframe{max-width:100%}
.links .feature{margin:0}
.plates{list-style:none; display:grid; gap:.5rem}
.plates a{display:flex; align-items:center; min-height:52px; padding:0 1rem; background:var(--accent); color:var(--on-accent); text-decoration:none}
.lk-foot{margin:0; padding-top:.4rem}
.lk-foot a{display:inline-flex; align-items:center; min-height:44px}
.toast{position:fixed; left:50%; bottom:1.2rem; z-index:50; margin:0; padding:.7rem 1rem; background:var(--bar); color:var(--bar-ink);
  font-family:var(--mono); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; transform:translate(-50%,150%);
  transition:transform .35s cubic-bezier(.16,1,.3,1), visibility 0s .35s; pointer-events:none; visibility:hidden}
.toast.on{transform:translate(-50%,0); visibility:visible; transition:transform .35s cubic-bezier(.16,1,.3,1)}

@media (prefers-reduced-motion:no-preference){
  /* the drop draws on load, then the tabs snap in as the wire reaches them */
  .js .bend{clip-path:inset(0 0 100% 50%); animation:drop .7s cubic-bezier(.16,1,.3,1) .25s forwards}
  @keyframes drop{50%{clip-path:inset(0 0 0 50%)} to{clip-path:inset(0 0 0 0)}}
  .js .node .hx{clip-path:polygon(12px 0,12px 0,12px 50%,12px 100%,12px 100%,0 50%); transition:clip-path .5s cubic-bezier(.16,1,.3,1) .12s}
  .js .node.on .hx{clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,12px 100%,0 50%)}
  .js .node::before{transform:scaleX(0); transform-origin:left; transition:transform .35s cubic-bezier(.16,1,.3,1)}
  .js .node.on::before{transform:none}
  .js .node::after{transform:scale(0); transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
  .js .node.on::after{transform:none}
  /* the spine fills with the page's scroll where the browser can drive it; elsewhere it is simply drawn */
  @supports (animation-timeline: scroll()){
    .spine i{animation:fill linear both; animation-timeline:scroll(root)}
    @keyframes fill{from{transform:scaleY(.04)} to{transform:scaleY(1)}}
    /* the eye recedes a little as the page scrolls past it, on the same timeline that fills the wire */
    .lk-head::before{animation:recede linear both; animation-timeline:scroll(root); animation-range:0 420px}
    @keyframes recede{to{transform:translateY(-28px)}}
  }
}

/* /epk */
.ek{padding-block:2rem 3rem; background:var(--paper)}   /* a sheet: the press kit's prose sits off the traces */
.ek-head{display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr); gap:2rem; align-items:start; margin-bottom:2rem}
.ek-photo{margin:0}
.ek-photo img{border:1px solid var(--ink); aspect-ratio:3/4; object-fit:cover; width:100%}
.ek-photo figcaption{font-family:var(--mono); font-size:.72rem; color:var(--dim); margin-top:.4rem}
.ek-head h1 img{width:min(100%,460px)}
.kv{display:grid; gap:.6rem; margin:1.2rem 0}
.kv div{display:grid; grid-template-columns:11rem minmax(0,1fr); gap:1rem; border-bottom:1px solid var(--line); padding-bottom:.5rem}
.kv dt{font-family:var(--mono); font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; color:var(--dim)}
.kv dd{margin:0}
.kv dd a{display:inline-flex; align-items:center; min-height:44px}
.ek-btns{display:flex; flex-wrap:wrap; gap:.6rem}
.ek-cols{column-count:2; column-gap:2.4rem}
.ek-cols section{break-inside:avoid; margin-bottom:2rem}
.spec{padding-left:1.1rem; margin-bottom:.6rem}
.booth{width:100%; max-width:360px; margin-top:.8rem}
.booth rect,.booth circle{fill:none; stroke:var(--ink); stroke-width:1.5}
.booth .t-table{fill:var(--tint)}
.booth text{font-family:var(--mono); font-size:11px; fill:var(--ink); text-anchor:middle}
.booth .aud{fill:var(--dim); letter-spacing:.15em}
.cap{margin-top:.3rem}
.dl{display:flex; flex-wrap:wrap; gap:.5rem}

/* 404 */
.nf-in{padding-block:4rem}
.nf-h{font-family:var(--wide); font-weight:800; font-variation-settings:'wdth' 125; letter-spacing:.04em; text-transform:uppercase;
  font-size:clamp(1.6rem,5vw,3rem); margin-bottom:1.6rem}

@media (max-width:760px){
  .tb-links a{padding:0 .4rem; font-size:.7rem}
  .hero{grid-template-columns:1fr}
  .hero-fig{order:1; min-height:0; aspect-ratio:4/3}
  .hero-copy{order:2; padding-block:2rem 2.4rem}
  .release{grid-template-columns:120px minmax(0,1fr)}
  .shows li,.played li{grid-template-columns:1fr; gap:.2rem}
  .ek-head{grid-template-columns:1fr}
  .ek-photo{max-width:260px}
  .ek-cols{column-count:1}
  .kv div{grid-template-columns:1fr; gap:.1rem}
}
@media print{
  @page{margin:0; size:letter}
  html,body{background:#fff !important}
  .tb,.skip,.screen,.ek-photo,.signup,.ft{display:none !important}
  .ek{padding:.42in .5in; font-size:7.6pt; line-height:1.38; max-width:none}
  .ek-head{display:block; margin-bottom:.1in}
  .ek-head h1 img{width:2.3in}
  .ek-head .tagline{font-size:9pt; margin:.06in 0}
  .label{font-size:6.5pt}
  .kv{display:grid; grid-template-columns:1fr 1fr; gap:.04in .25in; margin:.08in 0}
  .kv div{grid-template-columns:1.1in 1fr; gap:.08in; padding-bottom:.03in}
  .ek-cols{column-count:2; column-gap:.3in}
  .ek-cols section{margin-bottom:.12in}
  .sec-h{font-size:8.5pt; margin-bottom:.05in}
  .sub-h{font-size:6.5pt; margin:.08in 0 .03in}
  p{margin:0 0 .05in}
  .release.sm{grid-template-columns:.55in 1fr; gap:.1in; margin-bottom:.06in}
  .release.sm .r-title{font-size:9pt; margin-bottom:.03in}
  .chip{min-height:0; padding:.02in .06in; font-size:6.5pt}
  .tracks{grid-template-columns:1fr 1fr 1fr; gap:0 .1in; margin-bottom:.05in}
  .tracks li{padding:.01in 0}
  .shows li,.played li{grid-template-columns:.8in 1fr; gap:.08in; padding:.02in 0}
  .when{font-size:6.5pt}
  .empty{font-size:7.5pt; margin:0 0 .04in}
  .spec{margin-bottom:.03in}
  .booth{max-width:2in; margin-top:.04in}
  .small{font-size:7pt}
  .kv dd a,.mail a{min-height:0}
  .booth text{font-size:8px}
  .kv dt{font-size:6.5pt}
  .tracks li::before{font-size:6.5pt; margin-right:.05in}
  .r-links{gap:.05in}
}