:root{
  --void:#000000;
  --shell:#050507;
  --surface:#0E0E11;
  --edge:#1B1B20;
  --rule:#2A2A31;
  --ink:#F4F4F2;
  --ash:#8B8B92;
  --faint:#55555C;
  --signal:#E4E8EE;

  --mono:ui-monospace,"Cascadia Mono","Segoe UI Mono","SF Mono",Menlo,Consolas,"Liberation Mono",monospace;

  /* The editorial voice. A condensed grotesque is the lettering of American job
     printing - flyers stapled to poles, wood type, gig posters. It names the
     zine and the issues; the mono names the app. Every face here already ships
     with Windows or macOS, so this costs nothing to download. */
  --press:"Bahnschrift","Avenir Next Condensed","HelveticaNeue-CondensedBold","Arial Narrow","Helvetica Neue",sans-serif;

  /* The one warm value in a black and white app. It appears for half a second
     when a page lands, and nowhere else, so a turn reads as ink meeting paper
     rather than one picture replacing another. */
  --paper:#E8E4DA;

  --micro:.6875rem;
  --small:.75rem;
  --base:.8125rem;
  --lg:1rem;
  --xl:1.375rem;
  --display:clamp(1.5rem,4.5vw,2.25rem);

  --rail:76px;
  --bar:60px;
  --ease:cubic-bezier(.22,.61,.36,1);
  /* A press has mass: it commits fast and takes its time settling. */
  --ease-press:cubic-bezier(.16,.84,.44,1);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--void);
  color:var(--ink);
  font-family:var(--mono);
  font-size:var(--base);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
  overscroll-behavior:none;
}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;padding:0}
:focus-visible{outline:1px solid var(--signal);outline-offset:3px}

/* ---------- shared type roles ---------- */
.u-display{
  font-weight:700;text-transform:uppercase;letter-spacing:.18em;
  line-height:1.15;text-wrap:balance;
}
/* Reserved for the things that ARE the zine: its name, and an issue's name.
   Navigation stays in .u-display, so the two voices never blur. */
.u-press{
  font-family:var(--press);
  font-weight:700;font-stretch:75%;
  text-transform:uppercase;letter-spacing:.015em;
  line-height:.9;text-wrap:balance;
}
.u-micro{
  font-size:var(--micro);font-weight:500;text-transform:uppercase;
  letter-spacing:.28em;color:var(--ash);
}
.u-faint{color:var(--faint)}

/* ---------- boot ---------- */
#boot{
  position:fixed;inset:0;z-index:100;background:var(--void);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2.5rem;padding:2rem;text-align:center;
}
#boot.is-gone{opacity:0;pointer-events:none;transition:opacity .7s var(--ease)}
.boot-mark{width:min(150px,34vw);opacity:0;filter:grayscale(1)}
.boot-word{
  font-size:clamp(1.05rem,4.2vw,1.6rem);opacity:0;
  animation:fadeUp .7s var(--ease) .55s forwards;
}
.boot-log{
  width:min(340px,84vw);display:flex;flex-direction:column;gap:.4rem;
  font-size:var(--micro);letter-spacing:.1em;color:var(--faint);text-align:left;
}
.boot-log div{display:flex;justify-content:space-between;gap:.75rem;opacity:0}
.boot-log div.on{animation:fadeUp .35s var(--ease) forwards}
.boot-log b{color:var(--ash);font-weight:500}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- shell ---------- */
#app{
  position:fixed;inset:0;display:flex;opacity:0;
  transition:opacity .8s var(--ease);
}
#app.up{opacity:1}

.rail{
  flex:0 0 var(--rail);border-right:1px solid var(--edge);background:var(--shell);
  display:flex;flex-direction:column;align-items:center;
  padding:1.1rem 0;gap:1.4rem;z-index:20;
}
.rail-mark{width:26px;opacity:.9;flex:0 0 auto}
.rail-nav{
  flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:2.4rem;
}
.rail-btn{
  writing-mode:vertical-rl;text-orientation:mixed;
  font-size:var(--micro);font-weight:500;text-transform:uppercase;letter-spacing:.3em;
  color:var(--faint);padding:.5rem .25rem;position:relative;
  transition:color .3s var(--ease);
}
.rail-btn:hover{color:var(--ash)}
.rail-btn[aria-current="true"]{color:var(--ink)}
.rail-btn[aria-current="true"]::after{
  content:"";position:absolute;left:-1px;top:50%;transform:translateY(-50%);
  width:2px;height:20px;background:var(--ink);
}
.rail-foot{display:flex;flex-direction:column;align-items:center;gap:.9rem;flex:0 0 auto}
.icon-btn{
  width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--edge);
  color:var(--faint);transition:color .25s var(--ease),border-color .25s var(--ease);
}
.icon-btn:hover,.icon-btn.on{color:var(--ink);border-color:var(--rule)}
.icon-btn svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.5}

main{flex:1;position:relative;overflow:hidden;background:var(--void)}
.view{position:absolute;inset:0;display:none;flex-direction:column}
.view.live{display:flex}
/* One reveal on the room, not one per object in it. A press cuts between
   plates; it does not slide things into place. */
.view.live{animation:viewIn .34s var(--ease-press) both}
@keyframes viewIn{from{opacity:0}to{opacity:1}}

.view-head{
  flex:0 0 auto;display:flex;align-items:baseline;justify-content:space-between;
  gap:1rem;padding:1.1rem 1.5rem .9rem;border-bottom:1px solid var(--edge);
}
.view-head h1{margin:0;font-size:var(--lg);letter-spacing:.2em}
.view-body{flex:1;overflow-y:auto;overscroll-behavior:contain}

/* ---------- reader ---------- */
#reader{background:var(--void)}
.deck{
  flex:1;min-height:0;display:flex;align-items:center;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
  perspective:1500px;
}
.deck::-webkit-scrollbar{display:none}
.deck-track{
  display:flex;align-items:center;gap:clamp(14px,3vw,40px);
  height:100%;padding-inline:50%;
}
.leaf{
  flex:0 0 auto;position:relative;
  height:min(100%, 107vw, 1000px);   /* 1000 = native page height, so a tablet gets a full-size page and nothing ever upscales */
  aspect-ratio:4/5;
  scroll-snap-align:center;scroll-snap-stop:always;
  border:1px solid var(--edge);
  background:var(--void);
  transform-style:preserve-3d;
  will-change:transform,opacity;
  transition:opacity .35s var(--ease),border-color .35s var(--ease);
  cursor:pointer;
}
.leaf.here{border-color:var(--rule);box-shadow:0 30px 90px -30px rgba(0,0,0,.95)}

/* Crop marks, the way a plate is trimmed. They mark the page being read, which
   is also the only page playing - so the frame states what the app is doing. */
/* z-index and translateZ are load-bearing: .leaf carries transform-style:
   preserve-3d for the page turn, which drops flat pseudo-elements behind
   the plate itself unless they are lifted out of the 3D plane. */
.leaf::before{
  content:"";position:absolute;inset:7px;pointer-events:none;opacity:0;
  z-index:3;transform:translateZ(1px);
  background:
    linear-gradient(var(--faint),var(--faint)) 0    0    /12px 1px no-repeat,
    linear-gradient(var(--faint),var(--faint)) 0    0    /1px 12px no-repeat,
    linear-gradient(var(--faint),var(--faint)) 100% 0    /12px 1px no-repeat,
    linear-gradient(var(--faint),var(--faint)) 100% 0    /1px 12px no-repeat,
    linear-gradient(var(--faint),var(--faint)) 0    100% /12px 1px no-repeat,
    linear-gradient(var(--faint),var(--faint)) 0    100% /1px 12px no-repeat,
    linear-gradient(var(--faint),var(--faint)) 100% 100% /12px 1px no-repeat,
    linear-gradient(var(--faint),var(--faint)) 100% 100% /1px 12px no-repeat;
}
/* Out of register on arrival, then pulled home. */
.leaf.here::before{animation:register .6s var(--ease-press) both}
@keyframes register{
  0%  {opacity:0;transform:translate3d(4px,-3px,1px)}
  55% {opacity:1;transform:translate3d(-1px,1px,1px)}
  100%{opacity:1;transform:translate3d(0,0,1px)}
}

/* The impression: a breath of warm paper as the plate lands. */
.leaf::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  z-index:2;transform:translateZ(1px);
  background:radial-gradient(ellipse at 50% 45%,var(--paper),transparent 72%);
  mix-blend-mode:screen;
}
.leaf.here::after{animation:impress .5s var(--ease-press) both}
@keyframes impress{
  0%  {opacity:.34;transform:translateZ(1px) scale(1.04)}
  100%{opacity:0;transform:translateZ(1px) scale(1)}
}
.leaf img{width:100%;height:100%;object-fit:contain;background:var(--void)}

.deck-foot{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:.85rem 1.5rem;border-top:1px solid var(--edge);background:var(--shell);
}
.turn{
  display:flex;align-items:center;gap:.5rem;font-size:var(--micro);
  letter-spacing:.28em;text-transform:uppercase;color:var(--ash);
  padding:.4rem .1rem;transition:color .25s var(--ease);
}
.turn:hover:not(:disabled){color:var(--ink)}
.turn:disabled{color:#2E2E34;cursor:default}
.turn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5}
.folio{
  display:flex;flex-direction:column;align-items:center;gap:.2rem;
  font-size:var(--micro);letter-spacing:.24em;text-transform:uppercase;
}
.folio b{font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.folio span{color:var(--faint);font-size:.625rem}
.progress{
  position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--edge);
}
.progress i{display:block;height:100%;background:var(--ink);transition:width .4s var(--ease)}

/* ---------- hub ---------- */
.hub{
  padding:clamp(1.5rem,4vw,3.25rem) clamp(1.25rem,4vw,3.25rem) 4rem;
  display:flex;flex-direction:column;gap:clamp(2.25rem,5vw,3.5rem);
  max-width:1180px;
}
.masthead{display:flex;flex-direction:column;gap:1rem}
.masthead-top{display:flex;align-items:center;gap:1rem}
.masthead img{width:clamp(38px,7vw,52px);flex:0 0 auto}
.masthead h1{margin:0;font-size:clamp(2.1rem,7vw,3.5rem)}
.masthead p{margin:0;font-size:var(--small);color:var(--ash);line-height:1.8;max-width:52ch}
.status{
  display:inline-flex;align-items:center;gap:.55rem;font-size:var(--micro);
  letter-spacing:.26em;text-transform:uppercase;color:var(--ash);
}
/* Steady, not blinking. A pulsing dot is a feed asking to be checked, and
   nothing here expires. */
.dot{width:5px;height:5px;background:var(--ink);border-radius:50%;flex:0 0 auto}

.sec-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding-bottom:.7rem;border-bottom:1px solid var(--edge);margin-bottom:1.35rem;
}
.sec-head h2{margin:0;font-size:var(--small);letter-spacing:.3em;text-transform:uppercase;font-weight:500}
.sec-head span{font-size:var(--micro);letter-spacing:.2em;color:var(--faint)}

/* current log feature */
.feature{display:flex;gap:clamp(1.25rem,3.5vw,2.5rem);align-items:stretch}
.feature-cover{
  flex:0 0 clamp(140px,22vw,232px);aspect-ratio:4/5;position:relative;
  border:1px solid var(--rule);overflow:hidden;background:var(--void);
}
.feature-cover img{width:100%;height:100%;object-fit:cover}
.feature-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:.85rem;align-items:flex-start;justify-content:center}
/* The issue name is the loudest thing on the hub. Everything else whispers. */
.feature-meta h3{margin:0;font-size:clamp(2.2rem,6.4vw,3.7rem)}
.feature-meta p{margin:0;font-size:var(--small);color:var(--ash);line-height:1.8;max-width:48ch}
/* A quiet corner tick on pieces that move. The wall stays still; the piece
   moves once you open it. */
.work-frame{position:relative}
.moves{
  position:absolute;right:8px;bottom:8px;width:7px;height:7px;
  border:1px solid var(--ink);border-radius:50%;
  box-shadow:0 0 0 3px var(--void);
}
.resume{
  display:flex;align-items:center;gap:.75rem;width:100%;max-width:280px;
  font-size:var(--micro);letter-spacing:.2em;color:var(--faint);
}
.resume-bar{flex:1;height:1px;background:var(--edge);position:relative}
.resume-bar i{position:absolute;inset:0 auto 0 0;background:var(--ash);display:block}
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:var(--micro);letter-spacing:.28em;text-transform:uppercase;
  border:1px solid var(--rule);padding:.72rem 1.3rem;color:var(--ink);
  transition:background .28s var(--ease),color .28s var(--ease),border-color .28s var(--ease);
}
.btn:hover{background:var(--ink);color:var(--void);border-color:var(--ink)}
.btn.ghost{border-color:var(--edge);color:var(--ash)}
.btn.ghost:hover{background:none;color:var(--ink);border-color:var(--rule)}
.btn svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.5}

/* now showing */
.now{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:clamp(1rem,2.5vw,1.75rem)}
.plate{position:relative;aspect-ratio:4/5;overflow:hidden;border:1px solid var(--edge);background:var(--void);text-align:left}
.plate img,.plate video{width:100%;height:100%;object-fit:cover;filter:brightness(.8);transition:filter .5s var(--ease)}
.plate:hover img,.plate:hover video{filter:brightness(1)}
.plate figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:.85rem .9rem;
  background:linear-gradient(to top,rgba(0,0,0,.92),transparent);
  display:flex;flex-direction:column;gap:.2rem;
}
.plate b{font-size:var(--micro);font-weight:500;letter-spacing:.2em;text-transform:uppercase}
.plate span{font-size:.625rem;letter-spacing:.18em;color:var(--ash)}

/* transmissions + events */
.tx{display:flex;flex-direction:column}
.tx-item{
  display:flex;gap:1.1rem;align-items:baseline;text-align:left;width:100%;
  padding:1rem 0;border-bottom:1px solid var(--edge);
  transition:padding-left .3s var(--ease);
}
.tx-item:hover{padding-left:.5rem}
.tx-date{flex:0 0 5.5rem;font-size:var(--micro);letter-spacing:.16em;color:var(--faint);font-variant-numeric:tabular-nums}
.tx-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:.35rem}
.tx-body b{font-size:var(--base);font-weight:500;letter-spacing:.08em}
.tx-body p{margin:0;font-size:var(--small);color:var(--ash);line-height:1.7;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tx-tag{flex:0 0 auto;font-size:.5625rem;letter-spacing:.22em;text-transform:uppercase;color:var(--faint);border:1px solid var(--edge);padding:.22rem .5rem}

.events{display:flex;flex-direction:column;gap:.85rem}
.ev{
  display:flex;gap:1.1rem;align-items:center;border:1px solid var(--edge);
  padding:1rem 1.15rem;transition:border-color .3s var(--ease);
}
.ev:hover{border-color:var(--rule)}
.ev-when{
  flex:0 0 3.6rem;display:flex;flex-direction:column;align-items:center;gap:.1rem;
  border-right:1px solid var(--edge);padding-right:1.1rem;
}
.ev-when b{font-size:var(--lg);letter-spacing:.04em;font-variant-numeric:tabular-nums}
.ev-when span{font-size:.5625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.ev-what{flex:1;min-width:0;display:flex;flex-direction:column;gap:.25rem}
.ev-what b{font-size:var(--small);font-weight:500;letter-spacing:.1em}
.ev-what span{font-size:var(--micro);color:var(--faint);letter-spacing:.1em}

/* inquiry card */
.ask{border:1px solid var(--rule);padding:clamp(1.25rem,3vw,1.9rem);display:flex;flex-direction:column;gap:1rem}
.ask q{font-size:var(--lg);line-height:1.65;letter-spacing:.06em;quotes:none;max-width:44ch}
.ask-row{display:flex;gap:.65rem;flex-wrap:wrap}
.ask input{
  flex:1;min-width:180px;background:var(--void);border:1px solid var(--edge);color:var(--ink);
  font-family:var(--mono);font-size:var(--small);letter-spacing:.08em;padding:.72rem .9rem;outline:none;
}
.ask input:focus{border-color:var(--rule)}
.ask input::placeholder{color:var(--faint)}
.ask small{font-size:var(--micro);color:var(--faint);letter-spacing:.14em}

.lanes{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem}
.lane{
  display:flex;flex-direction:column;gap:.45rem;text-align:left;
  border:1px solid var(--edge);padding:1.4rem 1.5rem;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.lane:hover{border-color:var(--rule);background:var(--surface)}
.lane b{font-size:var(--small);letter-spacing:.24em;text-transform:uppercase;font-weight:500}
.lane span{font-size:var(--micro);color:var(--faint);letter-spacing:.1em;line-height:1.6}

/* ---------- living pages ---------- */
.leaf-media{position:relative;width:100%;height:100%}
.leaf-media video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  background:var(--void);opacity:0;transition:opacity .6s var(--ease);
}
.leaf-media video.on{opacity:1}
/* live HTML text layer over motion — searchable, selectable, not baked in */

/* ---------- studio ---------- */

.dash{padding:clamp(1.25rem,3.5vw,2.5rem);display:flex;flex-direction:column;gap:1.5rem;max-width:1180px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;background:var(--edge);border:1px solid var(--edge)}
.stat{background:var(--shell);padding:1.15rem 1.25rem;display:flex;flex-direction:column;gap:.35rem}
.stat b{font-size:1.55rem;letter-spacing:.04em;font-variant-numeric:tabular-nums;line-height:1}
.stat span{font-size:.5625rem;letter-spacing:.24em;text-transform:uppercase;color:var(--faint)}
.stat.warn b{color:var(--ash)}

.panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:1.25rem;align-items:start}
.panel{border:1px solid var(--edge);display:flex;flex-direction:column}
.panel-head{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding:.9rem 1.15rem;border-bottom:1px solid var(--edge);background:var(--shell);
}
.panel-head b{font-size:var(--micro);letter-spacing:.28em;text-transform:uppercase;font-weight:500}
.panel-head span{font-size:.5625rem;letter-spacing:.2em;color:var(--faint)}
.panel-body{padding:1.15rem;display:flex;flex-direction:column;gap:.9rem}
.panel-body.tight{padding:0}

.field{display:flex;flex-direction:column;gap:.4rem}
.field label{font-size:.5625rem;letter-spacing:.26em;text-transform:uppercase;color:var(--faint)}
.field input,.field textarea,.field select{
  background:var(--void);border:1px solid var(--edge);color:var(--ink);
  font-family:var(--mono);font-size:var(--small);letter-spacing:.06em;line-height:1.7;
  padding:.65rem .8rem;outline:none;resize:vertical;
}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--rule)}
.field textarea{min-height:92px}
.row{display:flex;gap:.65rem;flex-wrap:wrap;align-items:center}
.note{font-size:var(--micro);color:var(--faint);letter-spacing:.12em;line-height:1.7}

.rows{display:flex;flex-direction:column}
.rowitem{
  display:flex;gap:.9rem;align-items:center;padding:.85rem 1.15rem;
  border-bottom:1px solid var(--edge);
}
.rowitem:last-child{border-bottom:none}
.rowitem-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:.22rem}
.rowitem-main b{font-size:var(--small);font-weight:500;letter-spacing:.08em}
.rowitem-main span{font-size:var(--micro);color:var(--faint);line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pill{
  flex:0 0 auto;font-size:.5rem;letter-spacing:.2em;text-transform:uppercase;
  border:1px solid var(--edge);padding:.24rem .5rem;color:var(--faint);
}
.pill.live{color:var(--ink);border-color:var(--rule)}
.x-btn{flex:0 0 auto;color:var(--faint);font-size:var(--micro);letter-spacing:.2em;transition:color .2s var(--ease)}
.x-btn:hover{color:var(--ink)}

.toast{
  position:fixed;left:50%;bottom:2rem;transform:translate(-50%,1rem);z-index:80;
  background:var(--ink);color:var(--void);padding:.7rem 1.2rem;
  font-size:var(--micro);letter-spacing:.24em;text-transform:uppercase;
  opacity:0;pointer-events:none;transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- contents drawer ---------- */
.drawer{position:absolute;inset:0;z-index:30;background:rgba(0,0,0,.86);backdrop-filter:blur(6px);display:none}
.drawer.open{display:block;animation:fade .3s var(--ease)}
@keyframes fade{from{opacity:0}to{opacity:1}}
.drawer-panel{
  position:absolute;top:0;bottom:0;left:0;width:min(360px,86vw);
  background:var(--shell);border-right:1px solid var(--edge);
  display:flex;flex-direction:column;animation:slideIn .38s var(--ease);
}
@keyframes slideIn{from{transform:translateX(-100%)}to{transform:none}}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:1.1rem 1.25rem;border-bottom:1px solid var(--edge)}
.drawer-list{flex:1;overflow-y:auto;padding:.5rem 0}
.toc{
  display:flex;width:100%;align-items:baseline;gap:.85rem;text-align:left;
  padding:.62rem 1.25rem;color:var(--ash);
  transition:color .2s var(--ease),background .2s var(--ease);
}
.toc:hover{color:var(--ink);background:var(--surface)}
.toc[aria-current="true"]{color:var(--ink)}
.toc[aria-current="true"] .toc-n{color:var(--ink)}
.toc-n{flex:0 0 1.75rem;font-size:var(--micro);color:var(--faint);font-variant-numeric:tabular-nums;letter-spacing:.1em}
.toc-t{flex:1;font-size:var(--small);letter-spacing:.06em}
.toc-s{font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}

/* ---------- exhibit ---------- */
.hall{
  padding:clamp(1.5rem,4vw,3rem);display:grid;gap:clamp(1.5rem,3.5vw,2.75rem);
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
}
.work{display:flex;flex-direction:column;gap:.85rem;text-align:left;transition:transform .5s var(--ease)}
.work:hover{transform:translateY(-4px)}
.work-frame{position:relative;aspect-ratio:4/5;overflow:hidden;border:1px solid var(--edge);background:var(--void)}
.work-frame img{width:100%;height:100%;object-fit:cover;filter:brightness(.82);transition:filter .55s var(--ease),transform .8s var(--ease)}
.work:hover .work-frame img{filter:brightness(1);transform:scale(1.03)}
.work-frame::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 60px 12px rgba(0,0,0,.55);pointer-events:none}
.label{display:flex;flex-direction:column;gap:.28rem}
.label b{font-size:var(--small);font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.label span{font-size:var(--micro);letter-spacing:.14em;color:var(--faint);line-height:1.5}

/* ---------- lightbox ---------- */
.box{
  position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.96);
  display:none;align-items:center;justify-content:center;
  padding:clamp(1rem,4vw,3rem);gap:clamp(1.5rem,4vw,3.5rem);
}
.box.open{display:flex;animation:fade .35s var(--ease)}
.box-img{max-height:82vh;max-width:min(62vw,760px);object-fit:contain;border:1px solid var(--edge);animation:boxIn .5s var(--ease)}
@keyframes boxIn{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}
.box-label{
  max-width:250px;display:flex;flex-direction:column;gap:1.1rem;
  border-left:1px solid var(--rule);padding-left:1.4rem;animation:fadeUp .5s .12s var(--ease) both;
}
.box-label h2{margin:0;font-size:var(--lg);letter-spacing:.16em}
.box-label dl{margin:0;display:flex;flex-direction:column;gap:.7rem}
.box-label dt{font-size:.625rem;letter-spacing:.26em;text-transform:uppercase;color:var(--faint)}
.box-label dd{margin:0;font-size:var(--small);letter-spacing:.06em;color:var(--ash);line-height:1.6}
.box-x{position:absolute;top:1.1rem;right:1.25rem}

/* ---------- archive ---------- */
.search{
  flex:0 0 auto;display:flex;align-items:center;gap:.8rem;
  padding:0 1.5rem;border-bottom:1px solid var(--edge);background:var(--shell);
}
.search svg{width:14px;height:14px;fill:none;stroke:var(--faint);stroke-width:1.5;flex:0 0 auto}
.search input{
  flex:1;background:none;border:none;color:var(--ink);
  font-family:var(--mono);font-size:var(--base);letter-spacing:.12em;padding:1rem 0;outline:none;
}
.search input::placeholder{color:var(--faint);letter-spacing:.2em;text-transform:uppercase;font-size:var(--micro)}
.search-n{font-size:var(--micro);letter-spacing:.2em;color:var(--faint);font-variant-numeric:tabular-nums}

.stacks{padding:clamp(1.25rem,3vw,2.25rem);display:flex;flex-direction:column;gap:2.5rem}
.issue{display:flex;gap:clamp(1rem,3vw,2rem);align-items:flex-start}
.issue-cover{
  flex:0 0 clamp(112px,17vw,168px);aspect-ratio:4/5;border:1px solid var(--edge);
  background:var(--void);overflow:hidden;transition:border-color .3s var(--ease);
}
.issue-cover img{width:100%;height:100%;object-fit:cover}
.issue:hover .issue-cover{border-color:var(--rule)}
.issue-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:.7rem;align-items:flex-start}
.issue-meta h2{margin:0;font-size:var(--xl);letter-spacing:.14em}
.issue-blurb{margin:0;font-size:var(--small);color:var(--ash);line-height:1.75;max-width:58ch}
.chip{font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);border:1px solid var(--edge);padding:.28rem .6rem}

.hits{display:flex;flex-direction:column;border-top:1px solid var(--edge)}
.hit{
  display:flex;align-items:center;gap:1rem;text-align:left;width:100%;
  padding:.85rem clamp(1.25rem,3vw,2.25rem);border-bottom:1px solid var(--edge);
  transition:background .2s var(--ease);
}
.hit:hover{background:var(--surface)}
.hit-thumb{flex:0 0 44px;aspect-ratio:4/5;border:1px solid var(--edge);overflow:hidden;background:var(--void)}
.hit-thumb img{width:100%;height:100%;object-fit:cover}
.hit-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:.2rem}
.hit-txt b{font-size:var(--small);font-weight:500;letter-spacing:.12em}
.hit-txt span{font-size:var(--micro);color:var(--faint);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.hit mark{background:none;color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.empty{padding:3.5rem 1.5rem;text-align:center;color:var(--faint);font-size:var(--small);letter-spacing:.16em}

/* ---------- about ---------- */
.about{padding:clamp(1.75rem,5vw,4rem);max-width:640px;display:flex;flex-direction:column;gap:1.6rem}
.about p{margin:0;font-size:var(--base);line-height:1.95;color:var(--ash);max-width:62ch}
.about p strong{color:var(--ink);font-weight:500}
.about hr{border:none;border-top:1px solid var(--edge);margin:.6rem 0;width:100%}
.sig{font-size:var(--small);letter-spacing:.2em;color:var(--ink);font-style:italic}

/* ---------- mobile ---------- */
.bar{display:none}
@media (max-width:760px){
  .rail{display:none}
  #app{flex-direction:column}
  main{flex:1;min-height:0}
  .bar{
    flex:0 0 var(--bar);display:flex;align-items:stretch;
    border-top:1px solid var(--edge);background:var(--shell);
    padding-bottom:env(safe-area-inset-bottom);
  }
  /* same navigation as the rail, laid along the bottom instead of the side */
  .bar-btn{
    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.45rem;
    font-size:.5625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
    position:relative;transition:color .25s var(--ease);
  }
  .bar-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.4}
  /* the rail marks the current view with a bar on its edge; so does this one */
  .bar-btn[aria-current="true"]::after{
    content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
    width:20px;height:2px;background:var(--accent);
  }
  .bar-btn[aria-current="true"]{color:var(--ink)}
  .box{flex-direction:column;justify-content:center}
  .box-img{max-width:92vw;max-height:58vh}
  .box-label{max-width:92vw;border-left:none;border-top:1px solid var(--rule);padding:1.1rem 0 0}
  .box-label dl{flex-direction:row;flex-wrap:wrap;gap:.5rem 1.75rem}
  .issue,.feature{flex-direction:column}
  .issue-cover{flex:0 0 auto;width:132px}
  .feature-cover{flex:0 0 auto;width:min(180px,46vw)}
  .view-head{padding:.95rem 1.15rem .8rem}
  .deck-foot{padding:.7rem 1.15rem}
  .tx-date{flex:0 0 4.2rem}
  .tx-tag{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .deck{scroll-behavior:auto}
}

/* ---------- studio: builder, submissions, scheduling ---------- */
.studio-sec{display:flex;flex-direction:column;gap:1rem}
.studio-sec>h3{
  margin:0;font-size:var(--micro);letter-spacing:.3em;text-transform:uppercase;
  color:var(--faint);font-weight:500;padding-bottom:.6rem;border-bottom:1px solid var(--edge);
}
.studio-sec>h3 em{font-style:normal;color:var(--ash);letter-spacing:.18em;text-transform:none}
.panel.wide{grid-column:1/-1}

.bd-row{
  display:flex;align-items:center;gap:.75rem;padding:.7rem 1.15rem;
  border-bottom:1px solid var(--edge);cursor:grab;
  transition:background .2s var(--ease);
}
.bd-row:last-child{border-bottom:none}
.bd-row:hover{background:var(--surface)}
.bd-row.dragging{opacity:.35;cursor:grabbing}
.bd-row.over{background:var(--surface);box-shadow:inset 0 2px 0 var(--ink)}
.bd-n{flex:0 0 1.6rem;font-size:var(--micro);color:var(--faint);font-variant-numeric:tabular-nums;letter-spacing:.1em}
.bd-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:.18rem}
.bd-main b{font-size:var(--small);font-weight:500;letter-spacing:.08em}
.bd-main span{font-size:.5625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.bd-tools{display:flex;gap:.3rem;flex:0 0 auto;align-items:center}
.mini{
  width:23px;height:23px;display:grid;place-items:center;border:1px solid var(--edge);
  color:var(--faint);font-size:.6875rem;line-height:1;
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.mini:hover:not(:disabled){color:var(--ink);border-color:var(--rule)}
.mini:disabled{opacity:.28;cursor:default}
.pill.tap{cursor:pointer;transition:color .2s var(--ease),border-color .2s var(--ease)}
.pill.tap:hover{color:var(--ink);border-color:var(--rule)}
.pill.on{color:var(--ink);border-color:var(--rule)}
.grow{flex:1}
.addbar{display:flex;gap:.55rem;flex-wrap:wrap;align-items:flex-end;padding:1.15rem;border-top:1px solid var(--edge)}
.addbar .field{flex:1;min-width:132px}
.sub-note{font-size:var(--micro);color:var(--ash);line-height:1.65}
.sub-link{font-size:var(--micro);color:var(--faint);letter-spacing:.06em;word-break:break-all}
.callout{border:1px solid var(--rule);padding:clamp(1.25rem,3vw,1.9rem);display:flex;flex-direction:column;gap:.9rem}
.callout h4{margin:0;font-size:var(--lg);letter-spacing:.14em}
.callout p{margin:0;font-size:var(--small);color:var(--ash);line-height:1.75;max-width:46ch}
.callout .row{gap:.55rem}
.callout input,.callout textarea{
  background:var(--void);border:1px solid var(--edge);color:var(--ink);
  font-family:var(--mono);font-size:var(--small);letter-spacing:.06em;
  padding:.68rem .85rem;outline:none;resize:vertical;
}
.callout input:focus,.callout textarea:focus{border-color:var(--rule)}
.callout input::placeholder,.callout textarea::placeholder{color:var(--faint)}
.contribute{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(1rem,2.5vw,1.5rem);align-items:start}
@media (max-width:760px){
  .addbar{flex-direction:column;align-items:stretch}
  .addbar .field{width:100%}
  .bd-row{flex-wrap:wrap}
}

/* ---------- the mark ---------- */
.mark{display:block;width:100%;height:auto}
.mark rect{transform-box:fill-box}

/* boot: the labyrinth draws itself, both halves interlocking in step */
#boot .mark .lp{animation-duration:.72s;animation-timing-function:var(--ease-press);animation-fill-mode:both;
  animation-delay:calc(var(--i) * 46ms)}
#boot .mark .lp-h{animation-name:pieceH}
#boot .mark .lp-v{animation-name:pieceV}
#boot .mark .lp-sq{animation-name:pieceS}
#boot .mark .lp-a.lp-h{transform-origin:left center}
#boot .mark .lp-b.lp-h{transform-origin:right center}
#boot .mark .lp-a.lp-v{transform-origin:center top}
#boot .mark .lp-b.lp-v{transform-origin:center bottom}
#boot .mark .lp-sq{transform-origin:center}
@keyframes pieceH{from{opacity:0;transform:scaleX(0)}to{opacity:1;transform:none}}
@keyframes pieceV{from{opacity:0;transform:scaleY(0)}to{opacity:1;transform:none}}
@keyframes pieceS{0%{opacity:0;transform:scale(0) rotate(-40deg)}100%{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  #boot .mark .lp{animation:none;opacity:1}
}

/* ---------- top bar (mobile shell) ---------- */
.topbar{display:none}
.who{
  display:flex;align-items:center;gap:.5rem;font-size:var(--micro);
  letter-spacing:.2em;text-transform:uppercase;color:var(--ash);
}
.avatar{
  width:24px;height:24px;flex:0 0 auto;display:grid;place-items:center;
  border:1px solid var(--rule);font-size:.625rem;letter-spacing:.05em;color:var(--ink);
}
.modeswitch{display:flex;border:1px solid var(--rule);flex:0 0 auto}
.modeswitch button{
  font-size:.5625rem;letter-spacing:.2em;text-transform:uppercase;
  padding:.4rem .7rem;color:var(--faint);transition:background .25s var(--ease),color .25s var(--ease);
}
.modeswitch button[aria-pressed="true"]{background:var(--ink);color:var(--void)}
.rail .modeswitch{flex-direction:column}

/* studio mode tints the shell so you always know which side you are on */
#app.studio .rail,#app.studio .bar,#app.studio .topbar{background:var(--surface)}
#app.studio .rail{border-right-color:var(--rule)}

/* ---------- auth ---------- */
.auth{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1.3rem;padding:2rem 1.5rem;text-align:center;
}
.auth .mark{width:58px}
.auth h2{margin:0;font-size:var(--lg);letter-spacing:.24em}
.auth p{margin:0;font-size:var(--small);color:var(--ash);max-width:40ch;line-height:1.8}
.auth form{display:flex;flex-direction:column;gap:.65rem;width:min(300px,86vw)}
.auth input,.auth select{
  background:var(--void);border:1px solid var(--rule);color:var(--ink);
  font-family:var(--mono);font-size:var(--small);letter-spacing:.1em;
  padding:.75rem .9rem;outline:none;width:100%;
}
.auth input::placeholder{color:var(--faint);letter-spacing:.18em}
.warn{
  border:1px solid var(--rule);padding:.85rem 1rem;max-width:42ch;
  font-size:var(--micro);color:var(--ash);line-height:1.75;letter-spacing:.06em;text-align:left;
}
.warn b{color:var(--ink);font-weight:500}
.linkish{font-size:var(--micro);letter-spacing:.18em;text-transform:uppercase;color:var(--faint);
  transition:color .2s var(--ease)}
.linkish:hover{color:var(--ink)}

/* ---------- members ---------- */
.member{display:flex;gap:.85rem;align-items:center;padding:.8rem 1.15rem;border-bottom:1px solid var(--edge)}
.member:last-child{border-bottom:none}
.member .avatar{width:28px;height:28px}
.member-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:.18rem}
.member-main b{font-size:var(--small);font-weight:500;letter-spacing:.08em}
.member-main span{font-size:.5625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.rolesel{
  background:var(--void);border:1px solid var(--edge);color:var(--ash);
  font-family:var(--mono);font-size:.5625rem;letter-spacing:.16em;text-transform:uppercase;
  padding:.35rem .45rem;outline:none;
}
.you{font-size:.5rem;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);border:1px solid var(--edge);padding:.2rem .4rem}

/* ---------- issues ---------- */
.issrow{display:flex;gap:.9rem;align-items:center;padding:.85rem 1.15rem;border-bottom:1px solid var(--edge)}
.issrow:last-child{border-bottom:none}
.issthumb{flex:0 0 40px;aspect-ratio:4/5;border:1px solid var(--edge);overflow:hidden;background:var(--void);display:grid;place-items:center}
.issthumb img{width:100%;height:100%;object-fit:cover}
.issthumb span{font-size:.5rem;color:var(--faint);letter-spacing:.1em}
.issmain{flex:1;min-width:0;display:flex;flex-direction:column;gap:.2rem}
.issmain b{font-size:var(--small);font-weight:500;letter-spacing:.08em}
.issmain span{font-size:var(--micro);color:var(--faint);letter-spacing:.1em}
.issacts{display:flex;gap:.35rem;flex:0 0 auto;flex-wrap:wrap;justify-content:flex-end}
.tiny{
  font-size:.5rem;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);
  border:1px solid var(--edge);padding:.3rem .5rem;
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.tiny:hover{color:var(--ink);border-color:var(--rule)}
.tiny.danger:hover{color:var(--ink);border-color:var(--ash)}
.filebtn{position:relative;overflow:hidden;display:inline-flex}
.filebtn input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}

/* ---------- transmissions view ---------- */
.posts{padding:clamp(1.25rem,3.5vw,2.5rem);max-width:760px;display:flex;flex-direction:column}
.post-row{
  display:flex;gap:1.15rem;align-items:baseline;text-align:left;width:100%;
  padding:1.15rem 0;border-bottom:1px solid var(--edge);transition:padding-left .3s var(--ease);
}
.post-row:hover{padding-left:.5rem}
.post-row .tx-date{flex:0 0 5.5rem}
.article{padding:clamp(1.5rem,4vw,3rem);max-width:660px;display:flex;flex-direction:column;gap:1.25rem}
.article-top{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap}
.article h2{margin:0;font-size:clamp(1.2rem,3.6vw,1.75rem);letter-spacing:.12em;line-height:1.35}
.article .meta{font-size:var(--micro);letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.article p{margin:0;font-size:var(--base);line-height:2;color:var(--ash);max-width:62ch}
.back{display:inline-flex;align-items:center;gap:.5rem;font-size:var(--micro);letter-spacing:.24em;
  text-transform:uppercase;color:var(--faint);transition:color .2s var(--ease)}
.back:hover{color:var(--ink)}
.back svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.5}

/* ---------- empty states ---------- */
.blank{
  display:flex;flex-direction:column;gap:.6rem;align-items:flex-start;
  border:1px dashed var(--rule);padding:1.4rem 1.5rem;
}
.blank b{font-size:var(--small);font-weight:500;letter-spacing:.12em}
.blank span{font-size:var(--micro);color:var(--faint);line-height:1.7;letter-spacing:.06em}

/* ---------- support ---------- */
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1rem}
.tier{border:1px solid var(--edge);padding:1.25rem 1.35rem;display:flex;flex-direction:column;gap:.6rem}
.tier.lead{border-color:var(--rule)}
.tier b{font-size:var(--small);letter-spacing:.24em;text-transform:uppercase;font-weight:500}
.tier .price{font-size:1.35rem;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.tier ul{margin:0;padding-left:1.1rem;display:flex;flex-direction:column;gap:.35rem}
.tier li{font-size:var(--micro);color:var(--ash);line-height:1.65}

@media (max-width:760px){
  .topbar{
    flex:0 0 46px;display:flex;align-items:center;justify-content:space-between;
    gap:.75rem;padding:0 .9rem;border-bottom:1px solid var(--edge);background:var(--shell);
    padding-top:env(safe-area-inset-top);
  }
  .topbar .mark{width:20px}
  .issacts{justify-content:flex-start;width:100%}
  .issrow{flex-wrap:wrap}
  .post-row .tx-date{flex:0 0 4.2rem}
}

/* a tablet has the room for a near-full-size page; a phone still needs its margins */
@media (min-width:700px){
  .leaf{height:min(100%, 112vw, 1000px)}
}

/* ---------- rail: icon over upright stacked type ---------- */
.rail-btn{
  display:flex;flex-direction:column;align-items:center;gap:.55rem;
  writing-mode:horizontal-tb;padding:.5rem .25rem;
}
.rail-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.4;flex:0 0 auto}
.rail-btn .lbl{
  /* upright stacked letters — the one thing only a vertical rail can do */
  writing-mode:vertical-rl;text-orientation:upright;
  letter-spacing:.06em;font-size:.5625rem;line-height:1;text-transform:uppercase;
}
.rail-btn,.bar-btn{color:var(--faint)}
.rail-btn:hover,.bar-btn:hover{color:var(--ash)}
.rail-btn[aria-current="true"],.bar-btn[aria-current="true"]{color:var(--ink)}
.rail-btn[aria-current="true"]::after{height:auto;top:0;bottom:0;transform:none}
.rail-nav{gap:1.5rem}

/* ---------- title screen ---------- */
.menu{display:flex;flex-direction:column;gap:.55rem;align-items:center;width:min(280px,80vw)}
.menu button{
  width:100%;display:flex;align-items:center;justify-content:center;gap:.5rem;
  border:1px solid var(--rule);padding:.8rem 1.1rem;color:var(--ink);
  font-size:var(--micro);letter-spacing:.28em;text-transform:uppercase;
  opacity:0;animation:fadeUp .5s var(--ease) forwards;
  transition:background .25s var(--ease),color .25s var(--ease);
}
/* display:flex above outbids the hidden attribute, which is how the
   Continue button ended up showing as an empty box before there was any
   reading to continue. */
.menu button[hidden]{display:none}
.menu button:hover{background:var(--ink);color:var(--void)}
.menu button.quiet{border-color:var(--edge);color:var(--ash)}
.menu button.quiet:hover{background:none;color:var(--ink);border-color:var(--rule)}

/* ---------- search rows in view headers ---------- */
.findrow{
  flex:0 0 auto;display:flex;align-items:center;gap:.75rem;
  padding:0 clamp(1.15rem,3vw,1.5rem);border-bottom:1px solid var(--edge);background:var(--shell);
}
.findrow svg{width:14px;height:14px;fill:none;stroke:var(--faint);stroke-width:1.5;flex:0 0 auto}
.findrow input{
  flex:1;background:none;border:none;color:var(--ink);
  font-family:var(--mono);font-size:var(--small);letter-spacing:.1em;padding:.85rem 0;outline:none;
}
.findrow input::placeholder{color:var(--faint);letter-spacing:.2em;text-transform:uppercase;font-size:var(--micro)}
.findrow .n{font-size:var(--micro);letter-spacing:.2em;color:var(--faint);font-variant-numeric:tabular-nums}
.drawer .findrow{background:transparent}
.toc mark{background:none;color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.toc-x{font-size:var(--micro);color:var(--faint);line-height:1.5;letter-spacing:.04em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;padding:0 1.25rem .5rem 4.35rem}

/* ---------- title screen: particle field ---------- */
#field{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
#boot > *:not(#field){position:relative;z-index:1}

/* ---------- motion, indicated in the chrome and never over the art ---------- */
.moving{display:inline-flex;align-items:center;gap:.4rem}
.moving i{
  width:4px;height:4px;border-radius:50%;background:var(--ash);flex:0 0 auto;
  animation:pulse 2.4s var(--ease) infinite;
}
.folio .moving{color:var(--ash)}
.label .moving{color:var(--faint)}

/* ---------- two-page spread, for wide screens ---------- */
.pair{
  flex:0 0 auto;display:flex;align-items:center;gap:clamp(6px,1vw,14px);
  scroll-snap-align:center;scroll-snap-stop:always;
  transform-style:preserve-3d;will-change:transform,opacity;
  transition:opacity .35s var(--ease);
  /* the pair carries the height so each leaf's 100% has something to resolve
     against; without it the leaf falls back to the image's native size */
  height:min(100%, 54vw, 1000px);
}
.deck.spread .leaf{
  scroll-snap-align:none;
  height:100%;
  transition:border-color .35s var(--ease);
}
.deck.spread .pair.here .leaf{border-color:var(--rule)}
.deck.spread .pair.here{filter:drop-shadow(0 30px 90px rgba(0,0,0,.95))}
.spreadbtn{display:none}
@media (min-width:1100px){ .spreadbtn{display:inline-flex} }

/* ---------- shop ---------- */
.shop{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}
.bundle{
  border:1px solid var(--edge);padding:1.15rem 1.25rem;
  display:flex;flex-direction:column;gap:.5rem;text-align:left;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.bundle:hover{border-color:var(--rule);background:var(--surface)}
.bundle b{font-size:var(--small);letter-spacing:.16em;text-transform:uppercase;font-weight:500}
.bundle .price{font-size:1.1rem;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.bundle span{font-size:var(--micro);color:var(--faint);line-height:1.65}

/* ---------- per-issue accent ---------- */
/* Each log can carry its own ink. Applied in four places only, so the chrome
   stays monochrome and the issue's colour reads as the issue's, not the app's. */
:root{--accent:var(--ink)}
.progress i{background:var(--accent)}
.leaf.here,.deck.spread .pair.here .leaf{border-color:var(--accent)}
.moving i{background:var(--accent)}
.rail-btn[aria-current="true"]::after{background:var(--accent)}

/* ---------- motion off ---------- */
.deck.stillonly video{display:none}

/* ---------- skins ---------- */
/* The app is monochrome. An issue's colour lives on its pages, not on the
   chrome — unless a reader deliberately puts on that issue's skin. */
.skins{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.85rem}
.skin{
  border:1px solid var(--edge);padding:1rem 1.1rem;text-align:left;
  display:flex;flex-direction:column;gap:.5rem;
  transition:border-color .25s var(--ease);
}
.skin:hover{border-color:var(--rule)}
.skin[aria-current="true"]{border-color:var(--ink)}
.skin .sw{display:flex;gap:.3rem;align-items:center}
.skin .sw i{width:14px;height:14px;border:1px solid var(--edge);flex:0 0 auto}
.skin b{font-size:var(--small);letter-spacing:.16em;text-transform:uppercase;font-weight:500}
.skin span{font-size:var(--micro);color:var(--faint);line-height:1.6}
.skin.locked{opacity:.55}

/* ---------- player ---------- */
#v-player .view-body{display:flex;flex-direction:column}
.deckwrap{
  flex:0 0 auto;position:relative;background:var(--void);
  border-bottom:1px solid var(--edge);
}
#viz{display:block;width:100%;height:clamp(200px,34vh,340px)}
.vizpick{
  position:absolute;top:.7rem;right:.8rem;display:flex;gap:.3rem;
}
.vizpick button{
  font-size:.5rem;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);
  border:1px solid var(--edge);padding:.3rem .55rem;background:rgba(0,0,0,.5);
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.vizpick button[aria-pressed="true"]{color:var(--ink);border-color:var(--rule)}

.transport{
  flex:0 0 auto;display:flex;flex-direction:column;gap:.7rem;
  padding:clamp(.9rem,2.5vw,1.25rem) clamp(1.15rem,3vw,1.5rem);
  border-bottom:1px solid var(--edge);background:var(--shell);
}
.nowplaying{display:flex;align-items:baseline;gap:.8rem;min-width:0}
.nowplaying b{font-size:var(--small);font-weight:500;letter-spacing:.1em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nowplaying span{font-size:var(--micro);color:var(--faint);letter-spacing:.16em;flex:0 0 auto;
  font-variant-numeric:tabular-nums}
.seek{
  -webkit-appearance:none;appearance:none;width:100%;height:14px;background:none;cursor:pointer;
}
.seek::-webkit-slider-runnable-track{height:1px;background:var(--rule)}
.seek::-moz-range-track{height:1px;background:var(--rule)}
.seek::-webkit-slider-thumb{-webkit-appearance:none;width:9px;height:9px;background:var(--ink);
  margin-top:-4px;border-radius:0}
.seek::-moz-range-thumb{width:9px;height:9px;background:var(--ink);border:none;border-radius:0}
.tbar{display:flex;align-items:center;gap:.65rem;flex-wrap:wrap}
.tbtn{
  width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--rule);
  color:var(--ink);flex:0 0 auto;transition:background .2s var(--ease),color .2s var(--ease);
}
.tbtn:hover:not(:disabled){background:var(--ink);color:var(--void)}
.tbtn:disabled{color:var(--faint);border-color:var(--edge);cursor:default}
.tbtn svg{width:15px;height:15px;fill:currentColor;stroke:none}
.tbtn.small{width:30px;height:30px}
.tbtn.small svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6}
.tbtn[aria-pressed="true"]{background:var(--ink);color:var(--void)}

.panels-row{
  flex:1;min-height:0;display:grid;gap:0;
  grid-template-columns:1fr;overflow-y:auto;
}
@media (min-width:900px){ .panels-row{grid-template-columns:1fr 1fr 1fr} }
.pblock{border-bottom:1px solid var(--edge);padding:clamp(1rem,3vw,1.35rem)}
@media (min-width:900px){
  .pblock{border-bottom:none;border-right:1px solid var(--edge)}
  .pblock:last-child{border-right:none}
}
.pblock h3{
  margin:0 0 1rem;font-size:.625rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--faint);font-weight:500;display:flex;justify-content:space-between;gap:.6rem;
}
.pblock h3 em{font-style:normal;color:var(--ash);letter-spacing:.14em;text-transform:none}

.eq{display:flex;gap:.4rem;align-items:flex-end;justify-content:space-between}
.band{display:flex;flex-direction:column;align-items:center;gap:.5rem;flex:1;min-width:0}
.band input[type=range]{
  -webkit-appearance:none;appearance:none;writing-mode:vertical-lr;direction:rtl;
  width:16px;height:104px;background:none;cursor:pointer;
}
.band input[type=range]::-webkit-slider-runnable-track{width:1px;background:var(--rule)}
.band input[type=range]::-moz-range-track{width:1px;background:var(--rule)}
.band input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:5px;
  background:var(--ink);border-radius:0;margin-left:-7px}
.band input[type=range]::-moz-range-thumb{width:15px;height:5px;background:var(--ink);border:none;border-radius:0}
.band label{font-size:.5rem;letter-spacing:.1em;color:var(--faint);text-align:center}
.band .val{font-size:.5rem;color:var(--ash);font-variant-numeric:tabular-nums}

.knobs{display:flex;flex-direction:column;gap:.9rem}
.knob{display:flex;flex-direction:column;gap:.3rem}
.knob .kh{display:flex;justify-content:space-between;font-size:.5625rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--faint)}
.knob .kh b{color:var(--ash);font-weight:500;font-variant-numeric:tabular-nums}
.knob input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:12px;background:none;cursor:pointer;
}
.knob input[type=range]::-webkit-slider-runnable-track{height:1px;background:var(--rule)}
.knob input[type=range]::-moz-range-track{height:1px;background:var(--rule)}
.knob input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:8px;height:8px;
  background:var(--ink);margin-top:-3.5px;border-radius:0}
.knob input[type=range]::-moz-range-thumb{width:8px;height:8px;background:var(--ink);border:none;border-radius:0}

.queue{display:flex;flex-direction:column;max-height:260px;overflow-y:auto;margin:0 -0.35rem}
.qrow{
  display:flex;gap:.7rem;align-items:center;text-align:left;width:100%;
  padding:.55rem .35rem;border-bottom:1px solid var(--edge);
  transition:background .2s var(--ease);
}
.qrow:hover{background:var(--surface)}
.qrow:last-child{border-bottom:none}
.qrow[aria-current="true"] b{color:var(--ink)}
.qrow .qn{flex:0 0 1.4rem;font-size:.5625rem;color:var(--faint);font-variant-numeric:tabular-nums}
.qrow b{flex:1;min-width:0;font-size:var(--micro);font-weight:400;letter-spacing:.06em;color:var(--ash);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qrow .qx{flex:0 0 auto;font-size:.5625rem;color:var(--faint)}
.qrow .qx:hover{color:var(--ink)}
.pickfile{position:relative;overflow:hidden;display:inline-flex;width:100%;justify-content:center}
.pickfile input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}

/* ---------- exhibit: a room per exhibitor ---------- */
.exhead{
  grid-column:1/-1;display:flex;flex-direction:column;gap:.3rem;
  padding-bottom:.8rem;margin-top:.6rem;border-bottom:1px solid var(--edge);
}
.exhead b{font-size:var(--lg);letter-spacing:.16em;font-weight:700;text-transform:uppercase}
.exhead > span{font-size:.5625rem;letter-spacing:.26em;text-transform:uppercase;color:var(--faint)}
.exhead p{margin:.35rem 0 0;font-size:var(--micro);color:var(--ash);line-height:1.7;max-width:60ch}

/* ---------- a skin brings its own backdrop ---------- */
#app::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:var(--skinbg,none) center/cover no-repeat;
  opacity:var(--skinop,0);transition:opacity .6s var(--ease);
}
#app > *{position:relative;z-index:1}
/* the chrome stays legible over it */
.rail,.bar,.topbar,.view-head,.deck-foot,.search,.findrow{background:var(--shell)}
/* ---------- motion floor ----------
   The press is the point, so it is the first thing to go when someone has
   asked their system for less movement. Everything still says what it said;
   it just stops moving to say it. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .leaf.here::before{opacity:1;transform:none}
  .leaf.here::after{opacity:0}
  #boot .mark .lp{opacity:1;transform:none}
  .view.live{opacity:1}
}

/* ---------- the lightbox walks the collection ---------- */
.box-stage{
  display:flex;align-items:center;justify-content:center;
  transition:opacity .19s var(--ease),transform .19s var(--ease);
}
.box-stage.out-l{opacity:0;transform:translateX(-20px)}
.box-stage.out-r{opacity:0;transform:translateX(20px)}
.box-stage.in-r{animation:boxInR .25s var(--ease)}
.box-stage.in-l{animation:boxInL .25s var(--ease)}
@keyframes boxInR{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}
@keyframes boxInL{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:none}}

.box-nav{
  position:fixed;top:50%;transform:translateY(-50%);z-index:5;
  width:46px;height:68px;display:grid;place-items:center;
  border:1px solid var(--edge);color:var(--ash);background:rgba(0,0,0,.55);
  transition:color .25s var(--ease),border-color .25s var(--ease),
             background .25s var(--ease);
}
/* hover feedback stays in the grey family, on black */
.box-nav:hover{color:var(--ink);border-color:var(--rule);background:var(--surface)}
.box-nav.prev{left:clamp(.6rem,2.5vw,1.8rem)}
.box-nav.next{right:clamp(.6rem,2.5vw,1.8rem)}
.box-nav svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5}
.box-count{
  display:block;margin:.45rem 0 .9rem;
  font-size:.625rem;letter-spacing:.28em;color:var(--faint);
  font-variant-numeric:tabular-nums;
}
@media (max-width:760px){ .box-nav{width:38px;height:56px} }


/* ---------- when a skin is on, the room wears it ----------
   Mono stays exactly as designed. With a skin, the issue's colour takes the
   mark's light half - the way it does on that issue's own cover - and every
   active, hover and marker follows. Type stays ink; the colour is structure. */
html.skinned .mark .lp-w{fill:var(--accent)}
html.skinned .boot-word{color:var(--accent)}
html.skinned ::selection{background:var(--accent);color:var(--void)}

html.skinned .btn:hover:not(:disabled){background:var(--accent);border-color:var(--accent);color:var(--void)}
html.skinned .btn.ghost:hover{background:none;color:var(--accent);border-color:var(--accent)}
html.skinned .icon-btn:hover,html.skinned .icon-btn.on{color:var(--accent);border-color:var(--accent)}
html.skinned .turn:hover:not(:disabled){color:var(--accent)}
html.skinned .folio b{color:var(--accent)}
html.skinned .sec-head{border-bottom-color:var(--accent)}
html.skinned .dot{background:var(--accent)}
html.skinned .modeswitch [aria-pressed="true"]{background:var(--accent);color:var(--void)}
html.skinned .rail-btn[aria-current="true"]{color:var(--accent)}
html.skinned .bar-btn[aria-current="true"]{color:var(--accent)}
html.skinned .linkish:hover{color:var(--accent)}
html.skinned a:hover{color:var(--accent)}
html.skinned .box-nav:hover{color:var(--accent);border-color:var(--accent)}
html.skinned .work:hover{border-color:var(--accent)}
html.skinned .skin[aria-current="true"]{border-color:var(--accent)}
html.skinned .findrow input:focus{border-color:var(--accent)}
html.skinned .leaf.here::before{background:
    linear-gradient(var(--accent),var(--accent)) 0    0    /12px 1px no-repeat,
    linear-gradient(var(--accent),var(--accent)) 0    0    /1px 12px no-repeat,
    linear-gradient(var(--accent),var(--accent)) 100% 0    /12px 1px no-repeat,
    linear-gradient(var(--accent),var(--accent)) 100% 0    /1px 12px no-repeat,
    linear-gradient(var(--accent),var(--accent)) 0    100% /12px 1px no-repeat,
    linear-gradient(var(--accent),var(--accent)) 0    100% /1px 12px no-repeat,
    linear-gradient(var(--accent),var(--accent)) 100% 100% /12px 1px no-repeat,
    linear-gradient(var(--accent),var(--accent)) 100% 100% /1px 12px no-repeat}

/* ---------- redeeming a code ---------- */
.redeem{display:flex;gap:.6rem;margin:1.1rem 0 0;max-width:420px}
.redeem input{
  flex:1;background:var(--void);border:1px solid var(--edge);color:var(--ink);
  font-family:var(--mono);font-size:.8125rem;letter-spacing:.14em;
  padding:.65rem .8rem;outline:none;text-transform:uppercase;
  transition:border-color .2s var(--ease);
}
.redeem input:focus{border-color:var(--rule)}