/* ============================================================
   ACAI — Archive of Contemporary Art & Event Info
   Design system: museum-ticket / admission-stub language.
   Ported from ACAI.dc.html (fonts, palette, grain, ticket motifs).
   ============================================================ */
:root{
  /* palette */
  --ink:#1c1726; --ink-2:#241c33; --ink-soft:#3a3326;
  --paper:#e9dfc9; --paper-2:#efe6d3; --paper-3:#f4f0e6; --paper-4:#f6f2ea;
  --purple:#5b3ba6; --purple-2:#6a4bc0; --purple-d:#3a2056; --purple-dd:#2a1652;
  --lilac:#9a82ec; --lilac-2:#c9bcf8; --lilac-3:#efe6fb;
  --green:#3e8e4f; --green-d:#2c7a3f; --green-l:#66c47c;
  --gold:#bdae89; --gold-d:#8a7c58;
  --rule: #1c172622; --rule-2:#1c172618; --dash:#1c172640;
  --field-notch:#b3aabf;   /* page-field colour sampled at the ticket perforation height (tear notches) */
  /* type system (per logo handoff spec) */
  --display:'Space Grotesk',sans-serif;         /* headings / display */
  --title:'Space Grotesk',sans-serif;           /* page & section titles */
  --mono:'Space Mono',monospace;                /* metadata / catalog labels */
  --serif:'Archivo',system-ui,sans-serif;       /* body text (name kept for compatibility) */
  /* paper grain texture (applied to ticket surfaces only) */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* layout */
  --chrome-h: 74px;
  --maxw: 1320px;
  --shadow: 0 18px 40px -26px rgba(28,23,38,.55);
  --shadow-lg: 0 28px 64px -24px rgba(28,23,38,.6);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;min-height:100%}
html{background:#1c1726}
body{
  font-family:var(--serif); color:var(--ink-2);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{background:var(--purple);color:#fff}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
img{display:block;max-width:100%}

/* ---- paper ground (fixed). Grain is applied per-ticket, not full screen. ---- */
.grain{display:none}
.paper{
  position:fixed; inset:0; z-index:-1;
  background-color:#bdb7c6;
  background-image:
    radial-gradient(120% 90% at 84% -12%, #d8d1e6 0%, rgba(216,209,230,0) 50%),
    radial-gradient(110% 80% at 6% 112%, #cfd9c6 0%, rgba(207,217,198,0) 48%),
    radial-gradient(130% 120% at 50% 10%, #d2ccdd 0%, #beb7cb 56%, #a9a0bd 100%);
  transition:opacity 900ms ease;
}
body.boot .paper{opacity:0}
body.boot{background:#1c1726}

/* ---- logo (açaí cluster) ---- */
.logo{display:inline-block; width:1.6em; height:1.46em; line-height:0}
.logo svg{width:100%;height:100%;display:block}

/* ---- top chrome ---- */
.chrome{
  position:fixed; top:0; left:0; right:0; z-index:40; height:var(--chrome-h);
  display:flex; align-items:center; gap:18px;
  padding:0 clamp(16px,4vw,46px);
  background:linear-gradient(180deg, rgba(190,183,203,.92), rgba(190,183,203,0));
  backdrop-filter:saturate(120%) blur(2px);
  animation:fadeIn .5s ease both;
}
.chrome[hidden]{display:none}
.chrome-brand{display:flex; align-items:center; gap:14px; flex:none}
.chrome-brand .logo{width:64px;height:59px; filter:drop-shadow(2px 2px 0 #241c3326)}   /* bigger arcade logo */
.chrome-words{display:flex; flex-direction:column; line-height:1}
.chrome-words b{font-family:var(--display); font-weight:800; font-size:37px; letter-spacing:-.04em; color:var(--ink-2)}
.chrome-words i{font-family:var(--mono); font-style:normal; font-weight:400; font-size:10px; letter-spacing:.16em; color:#6a6280; margin-top:4px}
/* ---- nav as analog-arcade cartridge tabs: sharp box, chunky border, hard shadow, press-on-click ---- */
/* single row that scrolls horizontally if it can't fit, so bigger tabs never wrap-clip under the fixed header */
.chrome-nav{display:flex; gap:6px; margin-left:auto; flex-wrap:nowrap; overflow-x:auto; -ms-overflow-style:none; scrollbar-width:none}
.chrome-nav::-webkit-scrollbar{display:none}
.chrome-nav a{
  font-family:var(--mono); font-weight:700; font-size:13px; letter-spacing:.04em;
  color:var(--ink-2); padding:9px 12px; border-radius:0; white-space:nowrap;
  border:2px solid #241c333a; background:#f5f1e8b0;
  box-shadow:2px 2px 0 #241c3320;
  transition:transform .07s ease, box-shadow .07s ease, background .15s, color .15s, border-color .15s;
}
.chrome-nav a:hover{background:#fffdf7; color:var(--ink-2); border-color:var(--ink-2); box-shadow:3px 3px 0 var(--purple); transform:translate(-1px,-1px)}
.chrome-nav a.on{background:var(--ink-2); color:var(--paper-3); border-color:var(--ink-2); box-shadow:2px 2px 0 var(--purple), inset 0 0 0 2px #ffffff1f}
.chrome-nav a:active{transform:translate(2px,2px); box-shadow:0 0 0 var(--ink-2)}
.chrome-crumb{font-family:var(--mono); font-weight:700; font-size:10.5px; letter-spacing:.14em; color:var(--green-d); flex:none}
/* give the (now larger) 9-tab nav room on mid screens: drop the breadcrumb, then the wordmark subtitle.
   the active-tab highlight already conveys location, so these are safe to hide. */
.lang-toggle{position:fixed; top:14px; right:16px; z-index:1200; font-family:var(--mono); font-weight:700; font-size:12px; letter-spacing:.08em; color:var(--ink-2); background:var(--green-l,#eaf3df); border:1.5px solid var(--ink-2); box-shadow:2px 2px 0 var(--ink-2); padding:7px 11px; cursor:pointer; transition:transform .07s, box-shadow .07s, background .15s}
.lang-toggle:hover{background:var(--green-d,#2c7a3f); color:#fff; transform:translate(-1px,-1px); box-shadow:3px 3px 0 var(--ink-2)}
.lang-toggle:active{transform:translate(2px,2px); box-shadow:0 0 0 var(--ink-2)}
@media(max-width:560px){ .lang-toggle{top:10px; right:10px; padding:5px 8px; font-size:11px} }
@media(max-width:1600px){ .chrome-crumb{display:none} }
@media(max-width:1024px){ .chrome-words i{display:none} }
@media(max-width:760px){
  .chrome{gap:10px}
  .chrome-words i{display:none}
  .chrome-crumb{display:none}
  .chrome-nav{flex-wrap:nowrap; overflow-x:auto; -ms-overflow-style:none; scrollbar-width:none; -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .chrome-nav::-webkit-scrollbar{display:none}
  .chrome-nav a{padding:8px 9px; font-size:11.5px; white-space:nowrap}
  .chrome-nav{-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent)}
}
@media(max-width:420px){
  .chrome-words b, .chrome-words b.acai-wm{font-size:22px}
  .chrome-brand .logo{width:34px;height:31px}
}

/* ---- app shell ---- */
.app{position:relative; z-index:1; min-height:100vh}
.page{max-width:var(--maxw); margin:0 auto; padding:calc(var(--chrome-h) + clamp(18px,4vh,40px)) clamp(16px,4vw,56px) clamp(60px,10vh,120px)}

/* ---- shared atoms ---- */
.kicker{font-family:var(--mono); font-weight:700; font-size:11px; letter-spacing:.2em; color:var(--green-d)}
.mono{font-family:var(--mono)}
.tab-v{writing-mode:vertical-rl; transform:rotate(180deg); font-family:var(--mono); font-weight:700; letter-spacing:.22em}
.barcode{background-image:repeating-linear-gradient(90deg,var(--ink) 0 1px,transparent 1px 3px,var(--ink) 3px 5px,transparent 5px 6px,var(--ink) 6px 8px,transparent 8px 9px); height:22px}
.barcode-v{background-image:repeating-linear-gradient(0deg,var(--ink) 0 1px,transparent 1px 3px,var(--ink) 3px 5px,transparent 5px 6px,var(--ink) 6px 9px,transparent 9px 11px); width:22px}
.perf{border-top:2px dashed var(--dash)}
.perf-l{border-left:2px dashed var(--dash)}
/* ---- 8-bit arcade button: sharp box, chunky border, hard offset shadow, satisfying press ---- */
.pill{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  font-family:var(--mono); font-weight:700; letter-spacing:.06em; font-size:11px;
  color:var(--ink-2); background:var(--paper-3); border:2px solid var(--ink-2); border-radius:0;
  box-shadow:3px 3px 0 var(--ink-2);
  padding:9px 16px; transition:transform .07s ease, box-shadow .07s ease, background .15s, color .15s;
}
.pill:hover{background:var(--ink-2); color:var(--paper-3); box-shadow:4px 4px 0 var(--purple); transform:translate(-1px,-1px)}
.pill:active{transform:translate(3px,3px); box-shadow:0 0 0 var(--ink-2)}
.pill.solid{background:var(--ink-2); color:var(--paper-3); box-shadow:3px 3px 0 var(--purple)}
.pill.solid:hover{background:var(--purple); box-shadow:4px 4px 0 var(--ink-2)}
.pill.sm{padding:6px 12px; font-size:10px; box-shadow:2px 2px 0 var(--ink-2)}
.pill.sm:hover{box-shadow:3px 3px 0 var(--purple)}
.tag{display:inline-block; font-family:var(--mono); font-size:13px; letter-spacing:.04em; color:var(--ink-2); background:var(--paper-3); border:1.5px solid var(--ink-2); border-radius:0; box-shadow:2px 2px 0 #241c3326; padding:4px 10px; margin:0 6px 7px 0; transition:transform .07s ease, box-shadow .07s ease, background .15s, color .15s}
a.tag{cursor:pointer} a.tag:hover{background:var(--purple); color:#fff; box-shadow:3px 3px 0 var(--ink-2); transform:translate(-1px,-1px)}
a.tag:active{transform:translate(2px,2px); box-shadow:0 0 0 var(--ink-2)}

/* page header block */
.phead{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:clamp(16px,3vh,30px); flex-wrap:wrap}
.phead-l{display:flex; align-items:flex-end; gap:clamp(12px,1.8vw,26px)}
.phead .tab-v{font-size:11px; color:var(--green-d); padding-bottom:6px}
.phead .scope{font-family:var(--mono); font-weight:400; font-size:12.5px; letter-spacing:.02em; color:#48425a}
.phead h1{font-family:var(--title); font-weight:600; font-size:clamp(36px,5.4vw,78px); line-height:1.0; letter-spacing:-.015em; color:var(--ink-2); margin:8px 0 0}
.phead .count{font-family:var(--mono); font-weight:700; font-size:11px; letter-spacing:.06em; color:#241c3399}

/* generic loading / empty */
.loading-line{font-family:var(--mono); font-size:11px; letter-spacing:.18em; color:#6a6280; padding:40px 0; text-align:center}
.empty{font-family:var(--serif); font-style:italic; color:#6a6280; padding:48px 0; text-align:center}
.blink{animation:blink 1.1s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes up{from{transform:translateY(16px);opacity:0}to{transform:translateY(0);opacity:1}}

/* spinner mark */
.spin{display:inline-block;width:30px;height:30px;border:2px solid #1c172622;border-top-color:var(--purple);border-radius:50%;animation:rot .8s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}