/* zawa.art — Terminal design. palette: INK #0A0A0A · VOID #1A1A1A · ASH #555555 · MIST #888888 · PAPER #D0CFC9 · RICE #F5F4F0 */
:root{
  --bg:#F5F4F0; --panel:#ECEBE6; --ink:#0A0A0A; --mute:#555555; --dim:#888888;
  --line:#D0CFC9; --inv-bg:#0A0A0A; --inv-ink:#F5F4F0; --pick:#E52521;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,'Courier New',monospace;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0A0A0A; --panel:#141414; --ink:#F5F4F0; --mute:#888888; --dim:#555555;
  --line:#262626; --inv-bg:#F5F4F0; --inv-ink:#0A0A0A; --pick:#E52521;
}}
:root[data-theme="light"]{
  --bg:#F5F4F0; --panel:#ECEBE6; --ink:#0A0A0A; --mute:#555555; --dim:#888888;
  --line:#D0CFC9; --inv-bg:#0A0A0A; --inv-ink:#F5F4F0; --pick:#E52521;
}
:root[data-theme="dark"]{
  --bg:#0A0A0A; --panel:#141414; --ink:#F5F4F0; --mute:#888888; --dim:#555555;
  --line:#262626; --inv-bg:#F5F4F0; --inv-ink:#0A0A0A; --pick:#E52521;
}
*{box-sizing:border-box}
/* Chrome on Android has its own pull-to-refresh on overscroll. Without this,
   pulling down at the top fires the browser's spinner AND ours, and the page
   reloads out from under the gesture. Containing the overscroll leaves the
   gesture to us; normal scrolling is unaffected. iOS Safari has no such
   gesture, which is why this only ever mattered on Android. */
html{overscroll-behavior-y:contain}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--mono);font-size:13px;line-height:1.55;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:none;padding:0;text-align:left;cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
img{display:block}
a{color:inherit;text-decoration:none}
.u{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
[hidden]{display:none!important}

/* ================= frame ================= */
.frame{display:grid;grid-template-columns:230px 1fr;min-height:100dvh;max-width:1440px;margin:0 auto;border-left:1px solid var(--line);border-right:1px solid var(--line)}
.side{border-right:1px solid var(--ink);padding:20px 16px;position:sticky;top:0;height:100dvh;display:flex;flex-direction:column;overflow-y:auto}
.brand{display:flex;align-items:center;gap:10px}
/* mark uses currentColor: INK on RICE in light, RICE on INK in dark. brand/README.md */
.brand svg{flex:none;display:block;color:var(--ink)}
.brand .nm{font-weight:700;font-size:15px;letter-spacing:.14em}
.brand .sb{color:var(--mute);font-size:10.5px;letter-spacing:.04em}
.statys{margin-top:14px;padding:8px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--dim);font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;line-height:1.7}
.statys b{color:var(--mute);font-weight:400}
.authbox{margin-top:10px;font-size:11px}
.authbox .who{color:var(--mute);word-break:break-all}
.authbox a,.authbox button{color:var(--ink);font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase;text-decoration:underline;text-underline-offset:3px}
.authbox .out{color:var(--dim);font-weight:400;margin-left:8px}
.snav{margin-top:14px;display:flex;flex-direction:column}
.snav a{display:flex;gap:8px;padding:7px 6px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.snav a .key{color:var(--dim);width:14px;flex:none}
.snav a.on{color:var(--inv-ink);font-weight:700;background:var(--inv-bg)}
.snav a.on .key{color:var(--inv-ink)}
.snav a:hover{color:var(--ink)}
.snav a .lockmark{margin-left:auto;color:var(--dim);font-size:10px}
.side .sec-k{margin:20px 0 4px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.sdist a{display:flex;width:100%;padding:3.5px 6px;font-size:12px;color:var(--ink)}
.sdist a .cnt{margin-left:auto;color:var(--dim)}
.sdist a .lnk{text-decoration:underline;text-underline-offset:3px}
.side .foot{margin-top:auto;padding-top:16px;color:var(--dim);font-size:10px;letter-spacing:.06em;text-transform:uppercase;line-height:1.8}
.side .foot a,.side .foot button{color:inherit;font-size:inherit;letter-spacing:inherit;text-transform:inherit;text-decoration:underline;text-underline-offset:3px}
.theme-btn{color:var(--mute);font-size:11px;margin-top:6px;text-decoration:none!important}
/* The language switcher sits beside the theme button and reads the same:
   a quiet footer control, not a call to action. It is a real <a> so it works
   without JavaScript and so crawlers can follow it to the other mirror. */
.lang-btn{color:var(--mute);font-size:11px;margin-left:10px;text-decoration:none!important}
.lang-btn:hover,.lang-btn:focus-visible{color:var(--ink);text-decoration:underline!important}

/* main */
.main{min-width:0;padding-bottom:48px}
.topbar{display:flex;align-items:baseline;gap:14px;padding:14px 20px 10px;border-bottom:1px solid var(--ink);flex-wrap:wrap}
/* The mark is a solid form with extreme contrast; page headings now carry
   some of that weight instead of sitting at body weight. */
.topbar h1{font-size:17px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;margin:0}
.topbar .gloss{color:var(--dim);font-style:italic;font-size:12px}
.topbar .right{margin-left:auto;color:var(--dim);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.main-grid{display:grid;grid-template-columns:1fr 300px;align-items:start}
.colmain{min-width:0;border-right:1px solid var(--line)}
.rail{display:flex;flex-direction:column}

/* A filled disc opens every section rule — the mark used as punctuation. */
.sech{display:flex;align-items:baseline;gap:8px;margin:18px 20px 0;padding-bottom:4px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.sech::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ink);flex:none;transform:translateY(-1px)}
.sech .rule{flex:1;border-top:1px solid var(--line);transform:translateY(-3px)}
.sech .tag{background:var(--inv-bg);color:var(--inv-ink);padding:1px 6px;font-weight:700}
.sech .n{color:var(--dim)}
/* Group header, one level above .sech. The home page now has two kinds of
   list under one heading — evenings you can attend, and exhibitions that
   become visitable — and a day header cannot separate them because both
   sides are grouped by day. No dot: the dot marks a day. */
.gech{display:flex;align-items:baseline;gap:9px;margin:30px 20px 0;padding:11px 0 3px;border-top:1px solid var(--ink);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);font-weight:700}
.gech .rule{flex:1}
.gech .n{color:var(--dim);font-weight:400;letter-spacing:.06em}
.gech + .sech{margin-top:10px}
.meta-line{color:var(--mute);font-size:12px;margin:10px 20px 0}
.dnote{padding:10px 20px;color:var(--dim);font-size:11.5px;font-style:italic}

/* ---------- rows (responsive: table on desktop, card-ish on phone) ---------- */
.row{display:grid;grid-template-areas:"c1 tt aa mm im";grid-template-columns:56px minmax(220px,1.3fr) minmax(140px,1fr) minmax(160px,1fr) 40px;gap:6px 14px;width:100%;padding:8px 20px;border-bottom:1px solid var(--line);align-items:center;cursor:pointer}
.row:hover{background:var(--panel)}
.row .c1{grid-area:c1;color:var(--mute);font-size:11.5px;line-height:1.4;white-space:pre-line}
.row .c1 .hh{color:var(--ink);font-weight:700;font-size:12.5px}
.row .tt{grid-area:tt;min-width:0}
.row .aa{grid-area:aa;color:var(--mute);font-size:12px}
.row .mm{grid-area:mm;color:var(--dim);font-size:12px}
.row .mm b{color:var(--mute);font-weight:400}
.row .im{grid-area:im}
.row .t{font-weight:700;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.row img{width:38px;height:38px;object-fit:cover;filter:grayscale(1) contrast(1.05);border:1px solid var(--line)}
.row .noimg{width:38px;height:38px;border:1px solid var(--line);background:var(--panel)}
/* The editor's pick. The only saturated mark on the site — #E52521 clears the
   3:1 non-text contrast bar on both grounds (4.13:1 on RICE, 4.35:1 on INK),
   which is why one value serves both themes rather than a light/dark pair.
   It is a graphic, never a link or a control: the row around it is the target. */
.pick{display:inline-block;vertical-align:-1px;margin-left:7px;flex:none}
.prow .pick,.hit .pick{margin:0 5px 0 0}
.det h2 .pick{margin-left:9px;vertical-align:1px}
.panel .ph .pick{margin:0 6px 0 0;vertical-align:-1px}
.tagchip{display:inline-block;background:var(--inv-bg);color:var(--inv-ink);font-size:10px;font-weight:700;letter-spacing:.08em;padding:0 5px;margin-left:6px;vertical-align:1px;text-transform:uppercase}
.okline{font-size:11px;color:var(--ink);margin-top:1px}
.okline.na{color:var(--dim)}

/* Clock-dependent states, all applied by static/zawa-today.js against the real
   date in Tokyo — never against the build stamp. */
/* A show whose closing date has passed since the build. It stays in the list
   (dropping it would silently change the counts printed above it) but it is
   never presented as still open. */
.row[data-past],.prow[data-past]{opacity:.5}
.btn[disabled]{opacity:.4;cursor:default;pointer-events:none}
.row[data-past] .t,.prow[data-past] .t{text-decoration-color:var(--dim)}
/* The build stamp, made impossible to miss. A static page cannot know what
   opened after it was generated; when the clock has moved past the build day
   it says so rather than letting an incomplete list read as a complete one. */
#stale-note{padding:10px 20px;border-bottom:1px solid var(--line);background:var(--panel);color:var(--mute);font-size:11px;letter-spacing:.04em;line-height:1.6}
.statys[data-stale]{border-left:2px solid var(--mute);padding-left:8px}

/* list actions + stars */
.acts{margin-top:4px;display:flex;gap:8px;flex-wrap:wrap}
.mini{border:1px solid var(--line);padding:2px 7px;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.mini:hover{border-color:var(--ink);color:var(--ink)}
.stars{font-size:15px;letter-spacing:2px;margin-top:3px}
.stars button{font-size:15px;padding:0 1px}
.stars .lit{color:var(--ink)}
.stars .dimmed{color:var(--dim)}

/* lock + teaser */
.lock{margin:16px 20px 0;border:1px solid var(--ink);padding:16px;max-width:520px}
.lock .k{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.lock .k .free{background:var(--inv-bg);color:var(--inv-ink);padding:1px 6px;margin-left:6px}
.lock p{color:var(--mute);font-size:12.5px;margin:8px 0 12px}
.btnrow{display:flex;gap:10px;flex-wrap:wrap}
.teaser{display:block;margin:16px 20px 0;border:1px solid var(--ink);padding:10px 12px;font-size:12.5px;max-width:520px}
.teaser b{font-weight:700}
.teaser .arr{float:right}

/* rail panels */
.panel{border-bottom:1px solid var(--line)}
.panel .ph{display:flex;align-items:baseline;gap:8px;padding:10px 16px 6px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);border-bottom:1px solid var(--line)}
.panel .ph .n{margin-left:auto;color:var(--dim)}
.panel .pb{padding:6px 0}
.prow{display:block;width:100%;padding:6px 16px;font-size:12px}
.prow:hover{background:var(--panel)}
.prow .t{font-weight:700;text-decoration:underline;text-underline-offset:3px}
.prow .m{color:var(--dim);font-size:11.5px}
.prow .when{color:var(--ink);font-weight:700;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase}
.panel .txt{padding:8px 16px;color:var(--mute);font-size:12px;line-height:1.6}
.panel .txt b{color:var(--ink);font-weight:700}
.statgrid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
.statgrid .cell{background:var(--bg);padding:10px 16px}
.statgrid .v{font-size:20px;font-weight:700}
.statgrid .k{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}

/* district columns */
.dcols{columns:2;column-gap:40px;padding:16px 20px}
.dcols a{display:block;width:100%;padding:5px 0;font-size:13px;break-inside:avoid}
.dcols .lnk{text-decoration:underline;text-underline-offset:3px;font-weight:700}
.dcols .cnt{color:var(--dim)}

/* detail */
.det{padding:6px 20px 20px}
.det .dist{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.det .dist a{text-decoration:underline;text-underline-offset:3px}
.det h2{font-size:19px;font-weight:700;line-height:1.3;margin:6px 0 0;text-wrap:balance}
.det .art{color:var(--mute);margin-top:2px}
.det .art a{text-decoration:underline;text-underline-offset:3px}
.det .openblk{margin-top:14px;background:var(--inv-bg);color:var(--inv-ink);padding:9px 12px;font-size:12.5px;letter-spacing:.03em;display:inline-block}
.det .openblk b{font-weight:700}
.kv{margin-top:14px;border-top:1px solid var(--line);max-width:560px}
.kv .r{display:flex;gap:14px;padding:7px 0;border-bottom:1px solid var(--line);font-size:12.5px}
.kv .k{width:84px;flex:none;color:var(--dim);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;padding-top:2px}
.det img.hero{width:auto;height:auto;max-width:min(100%,280px);max-height:220px;border:1px solid var(--line);margin-top:16px}
.det .cap{color:var(--dim);font-size:10px;margin-top:4px;letter-spacing:.06em;text-transform:uppercase}
.btns{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.btn{display:inline-block;border:1px solid var(--ink);padding:7px 12px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:700}
.btn.pri{background:var(--inv-bg);color:var(--inv-ink)}
.btn[disabled]{opacity:.4;cursor:not-allowed}
.member-note{margin-top:10px;color:var(--dim);font-size:11.5px}
.member-note a{color:var(--mute)}

/* calendar panel */
.calp{margin-top:12px;border:1px dashed var(--ink);padding:12px;max-width:460px}
.calp .k{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);font-weight:700;margin-bottom:6px}
.calp label{display:flex;gap:8px;align-items:center;padding:4px 0;font-size:12.5px;flex-wrap:wrap}
.calp input[type=radio]{accent-color:var(--ink);margin:0}
.calp input[type=date]{font:inherit;background:var(--bg);color:var(--ink);border:1px solid var(--line);padding:2px 6px}
.calp .sub{color:var(--dim);font-size:11.5px}

/* forms */
.form{margin:16px 20px;border:1px solid var(--ink);padding:16px;max-width:420px}
.form .k{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.form .k .free{background:var(--inv-bg);color:var(--inv-ink);padding:1px 6px;margin-left:6px}
.form p{color:var(--mute);font-size:12px;margin:8px 0}
.flabel{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.fld{display:block;width:100%;font:inherit;background:var(--bg);color:var(--ink);border:1px solid var(--line);padding:8px 10px;margin-top:6px}
textarea.fld{min-height:84px;resize:vertical}
.chk{display:flex;gap:8px;align-items:flex-start;margin-top:10px;font-size:12px;color:var(--mute)}
.chk input{accent-color:var(--ink);margin:2px 0 0;flex:none}
.form .btn{margin-top:12px}
.hint{color:var(--dim);font-size:11px;margin-top:8px;font-style:italic}
.err{color:var(--ink);font-size:11.5px;margin-top:8px;font-weight:700}

/* account rows */
.setrow{margin:0 20px;border-bottom:1px solid var(--line);padding:12px 0;max-width:520px}
.setrow .k{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);font-weight:700}
.setrow .v{margin-top:6px;font-size:12.5px}
.setrow select{font:inherit;background:var(--bg);color:var(--ink);border:1px solid var(--line);padding:6px 8px;max-width:100%}
.setrow .note{color:var(--dim);font-size:11.5px;margin-top:5px}
.radio-line{display:flex;gap:16px;margin-top:6px;font-size:12.5px;flex-wrap:wrap}
.radio-line label{display:flex;gap:6px;align-items:center}
.radio-line input{accent-color:var(--ink);margin:0}

/* member record */
.score{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-top:4px}
.score .sc-n{font-size:30px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.score .sc-lv{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.score .sc-next{font-size:11px;color:var(--dim);margin-top:2px}
.score .sc-streak{margin-left:auto;background:var(--inv-bg);color:var(--inv-ink);
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;padding:3px 8px}
.score .sc-streak[hidden]{display:none!important}
.sc-recent{margin-top:12px;border-top:1px solid var(--line)}
.sc-recent .r{display:flex;gap:10px;padding:5px 0;border-bottom:1px solid var(--line);font-size:12px;color:var(--mute)}
/* label takes the slack so the two number columns stay in line down the list */
.sc-recent .r>span:first-child{flex:1 1 auto;min-width:0}
.sc-recent .r .d{color:var(--dim);font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap}
.sc-recent .r .p{color:var(--ink);font-variant-numeric:tabular-nums;min-width:34px;text-align:right}
/* An unearned category still shows, at zero: the breakdown is the only place
   the earning rules are written down, so a blank row is the instruction. */
.sc-recent .r.zero,.sc-recent .r.zero .p{color:var(--dim)}
.sc-season{margin-top:10px;color:var(--dim);font-size:11px;letter-spacing:.04em}
.sc-season[hidden]{display:none!important}
.sc-dist-n{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
/* invite */
.invite{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.inv-code{border:1px solid var(--ink);padding:5px 12px;font-size:15px;font-weight:700;letter-spacing:.22em}
.inv-count{margin-top:8px;color:var(--dim);font-size:11.5px}
/* "something wrong here?" on an exhibition page */
.report{margin-top:14px}
.report .report-open{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.report .report-open:hover{color:var(--ink)}
.report .k{margin-top:10px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.report .sub{margin-top:8px;color:var(--dim);font-size:11.5px;max-width:52ch}
/* season */
.mini.on{background:var(--inv-bg);color:var(--inv-ink);border-color:var(--ink);font-weight:700}
.stats{display:flex;gap:1px;background:var(--line);border:1px solid var(--line);margin:16px 20px 0;flex-wrap:wrap}
.stats .stat{background:var(--bg);padding:12px 14px;flex:1 1 110px}
.stats .sv{font-size:26px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.stats .sl{margin-top:5px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.seclist{margin:20px 20px 0}
.seclist .k{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
            padding-bottom:5px;border-bottom:1px solid var(--ink)}
.seclist .r{display:flex;gap:10px;padding:6px 0;border-bottom:1px solid var(--line);font-size:12.5px}
.seclist .r .p{margin-left:auto;color:var(--dim);font-variant-numeric:tabular-nums;white-space:nowrap}

/* prose */
.prose{padding:6px 20px;max-width:600px}
.prose h3{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin:18px 0 4px}
.prose p,.prose li{color:var(--mute);font-size:12.5px}
.prose ul,.prose ol{margin:4px 0;padding-left:18px}
.prose li{margin:4px 0}
.prose li b,.prose p b{color:var(--ink);font-weight:700}
.prose a{text-decoration:underline;text-underline-offset:3px}

/* hours table */
.hourst{margin:10px 20px 0;max-width:360px;font-size:12.5px}
.hourst .r{display:flex;border-bottom:1px solid var(--line);padding:4px 0}
.hourst .d{width:90px;color:var(--dim);text-transform:uppercase;font-size:11px;letter-spacing:.08em;padding-top:2px}
.hourst .today{font-weight:700}
.hourst .today .d{color:var(--ink)}

.stamp{padding:20px;color:var(--dim);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase}
.stamp a,.stamp button{color:inherit;text-decoration:underline;text-underline-offset:3px;font-size:inherit;letter-spacing:inherit;text-transform:inherit}
/* The member-category sheet — the only modal on the site. Centred card on a
   desktop, bottom sheet on a phone (see the <900px block), and above the tab
   bar in both. It asks one question once; everything about it is sized so that
   dismissing costs a single tap. */
.ksheet{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
  background:rgba(10,10,10,.55);padding:20px}
.ks-card{background:var(--bg);border:1px solid var(--ink);max-width:420px;width:100%;
  padding:20px;max-height:88vh;overflow-y:auto}
.ks-h{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--ink)}
.ks-p{font-size:12.5px;line-height:1.6;color:var(--mute);margin:8px 0 14px}
.ks-opts{display:flex;flex-direction:column;gap:6px}
.ks-opt{display:block;width:100%;text-align:left;border:1px solid var(--line);background:none;
  padding:9px 12px;font-family:var(--mono);font-size:12px;color:var(--ink);cursor:pointer}
.ks-opt:hover,.ks-opt:focus-visible{border-color:var(--ink);background:var(--panel)}
.ks-opt[disabled]{opacity:.4;pointer-events:none}
.ks-foot{display:flex;justify-content:flex-end;margin-top:14px}
.ks-later{border:none;background:none;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mute);cursor:pointer;padding:4px}
.ks-later:hover,.ks-later:focus-visible{color:var(--ink)}

#toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:var(--inv-bg);color:var(--inv-ink);font-size:12px;padding:8px 14px;opacity:0;pointer-events:none;transition:opacity .2s;white-space:nowrap;z-index:99;max-width:92vw;overflow:hidden;text-overflow:ellipsis}
#toast.show{opacity:1}

/* install advert */
.installad{margin:16px 20px 0;border:1px dashed var(--line);padding:10px 12px;font-size:12px;color:var(--mute);max-width:520px}
.installad b{color:var(--ink)}

/* ================= mobile ================= */
@media (max-width:900px){
  .frame{grid-template-columns:1fr;border-left:none;border-right:none}
  .side{position:static;height:auto;border-right:none;border-bottom:none;padding:14px 14px 0;display:block}
  .statys{margin-top:10px;border-bottom:none;padding-bottom:0}
  .side .sec-k,.side .sdist,.side .foot{display:none}
  .authbox{position:static;text-align:right;margin-top:10px}
  /* Replaced by the fixed tab bar at the bottom of the screen. */
  .snav{display:none}
  .main-grid{grid-template-columns:1fr}
  .rail{display:none}
  .colmain{border-right:none}
  .row{grid-template-areas:"c1 tt im" "c1 aa im" "c1 mm im";grid-template-columns:52px 1fr 44px;gap:1px 10px;padding:10px 14px;align-items:start}
  .row img,.row .noimg{width:44px;height:44px}
  .row .c1{white-space:pre-line;padding-top:1px}
  .topbar,.sech{margin-left:0;padding-left:14px;padding-right:14px}
  .sech{margin:18px 14px 0;padding-left:0;padding-right:0}
  .gech{margin:26px 14px 0;padding-left:0;padding-right:0}
  .meta-line{margin:10px 14px 0}
  .det,.prose,.dcols{padding-left:14px;padding-right:14px}
  .form,.lock,.teaser,.installad{margin-left:14px;margin-right:14px}
  .setrow,.hourst{margin-left:14px;margin-right:14px}
  .stamp{padding:20px 14px}
  #stale-note{padding:10px 14px}
  .dcols{columns:1}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}


/* ================= page footer (phones: the sidebar foot is hidden) ======= */
.pagefoot{display:none;border-top:1px solid var(--ink);margin-top:28px;padding:18px 14px 0}
.pagefoot .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:18px}
.pagefoot .ft-k{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:6px}
.pagefoot a,.pagefoot button{display:block;padding:4px 0;font-size:12.5px;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.pagefoot .theme-btn{margin-top:2px;color:var(--mute);text-decoration:none!important}
.pagefoot .lang-btn{margin-left:0;margin-top:2px;color:var(--mute);text-decoration:none!important}
.pagefoot .ft-stamp{margin-top:16px;padding:12px 0 22px;border-top:1px solid var(--line);color:var(--dim);font-size:10px;letter-spacing:.06em;text-transform:uppercase}

/* ================= search ================= */
.searchbar{margin:16px 20px 0;max-width:560px}
.searchbar .fld{font-size:15px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.chip{border:1px solid var(--line);padding:3px 10px;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip.on{background:var(--inv-bg);color:var(--inv-ink);border-color:var(--ink);font-weight:700}
.hitkind{display:inline-block;border:1px solid var(--line);padding:0 5px;margin-right:6px;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);vertical-align:1px}
mark{background:var(--inv-bg);color:var(--inv-ink);padding:0 2px}

/* ================= exhibition blocks ================= */
/* Prose, not a specification table: the old label/value grid made every page
   look like a different form depending on what the venue happened to publish. */
.factbox{margin-top:16px;border-top:1px solid var(--line);padding-top:12px;max-width:560px}
.factbox .k{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);font-weight:700;margin-bottom:7px}
.factbox .fp{margin:0 0 8px;font-size:13px;line-height:1.6;color:var(--mute)}
.factbox .fp:last-child{margin-bottom:0}
.factbox .fp .lead{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-right:4px}
.factbox .ev-when{font-size:13px;color:var(--ink)}
.factbox .ev-when b{font-weight:700}
.factbox .ev-note{font-size:11.5px;color:var(--dim);margin-top:2px;letter-spacing:.03em}
.factsrc{margin-top:10px;color:var(--dim);font-size:10px;letter-spacing:.06em;text-transform:uppercase;max-width:560px}
.det .art a.ig-inline{font-size:11.5px;color:var(--dim);text-decoration:underline;text-underline-offset:3px}

/* ================= service-worker update prompt ================= */

.refresh-btn{color:var(--mute);text-decoration:underline;text-underline-offset:3px;
  font-size:inherit;letter-spacing:inherit;text-transform:inherit}
.refresh-btn:hover{color:var(--ink)}
.refresh-btn[disabled]{opacity:.45;cursor:progress}
.statys .refresh-btn{text-decoration:none;font-size:12px;padding:0 3px}

/* pull-to-refresh indicator — a disc of ink carrying the pixel spinner, so it
   reads as the same family as the mark rather than as a browser control */
#ptr{position:fixed;top:0;left:50%;z-index:97;transform:translateX(-50%) translateY(-100%);
  display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:var(--inv-bg);color:var(--inv-ink);opacity:0;pointer-events:none}
#ptr[hidden]{display:none!important}

/* Macintosh wristwatch — generated by site_generator/pixel_watch.py.
   Case and strap are static; only the hands change, frame by frame. */
.pxw{display:block;width:19px;height:19px;color:inherit}
.pxw rect{fill:currentColor}
.pxw .st{opacity:.55}
.pxw .f{opacity:0}
.pxw .f0{opacity:1}
.pxw[data-fill='0'] .f{opacity:0}
.pxw[data-fill='0'] .f0{opacity:1}
.pxw[data-fill='0'] .st{opacity:1}
.pxw[data-fill='1'] .f{opacity:0}
.pxw[data-fill='1'] .f1{opacity:1}
.pxw[data-fill='1'] .st{opacity:1}
.pxw[data-fill='2'] .f{opacity:0}
.pxw[data-fill='2'] .f2{opacity:1}
.pxw[data-fill='2'] .st{opacity:1}
.pxw[data-fill='3'] .f{opacity:0}
.pxw[data-fill='3'] .f3{opacity:1}
.pxw[data-fill='3'] .st{opacity:1}
.pxw[data-fill='4'] .f{opacity:0}
.pxw[data-fill='4'] .f4{opacity:1}
.pxw[data-fill='4'] .st{opacity:1}
.pxw[data-fill='5'] .f{opacity:0}
.pxw[data-fill='5'] .f5{opacity:1}
.pxw[data-fill='5'] .st{opacity:1}
.pxw[data-fill='6'] .f{opacity:0}
.pxw[data-fill='6'] .f6{opacity:1}
.pxw[data-fill='6'] .st{opacity:1}
.pxw[data-fill='7'] .f{opacity:0}
.pxw[data-fill='7'] .f7{opacity:1}
.pxw[data-fill='7'] .st{opacity:1}
.pxw.spin .st{opacity:1}
.pxw.spin .f{animation:pxw 1000ms steps(1) infinite}
.pxw.spin .f0{opacity:0}
.pxw.spin .f0{animation-delay:-1000ms}
.pxw.spin .f1{animation-delay:-875ms}
.pxw.spin .f2{animation-delay:-750ms}
.pxw.spin .f3{animation-delay:-625ms}
.pxw.spin .f4{animation-delay:-500ms}
.pxw.spin .f5{animation-delay:-375ms}
.pxw.spin .f6{animation-delay:-250ms}
.pxw.spin .f7{animation-delay:-125ms}
@keyframes pxw{
  0%{opacity:1}
  12.5%{opacity:0}
  100%{opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .pxw.spin .f{animation:none}
  .pxw.spin .f0{opacity:1}
}

/* ================= phone tab bar ================= */
/* Hidden by default; the media query at the very end turns it on, declared
   after this rule so it wins at equal specificity. */
.tabbar{display:none}
.tabbar a{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:8px 2px 6px;color:var(--mute);min-width:0;
}
.tabbar .ic{font-size:17px;line-height:1;width:26px;height:26px;display:grid;place-items:center}
.tabbar .lb{font-size:9px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.tabbar a.on{color:var(--ink);font-weight:700}
/* Solid fill on the active glyph, echoing the mark. */
.tabbar a.on .ic{background:var(--inv-bg);color:var(--inv-ink)}

/* Declared last on purpose: the base .pagefoot rule above is at the same
   specificity, so this override has to come after it to win. */
@media (max-width:900px){
  .pagefoot{display:block}

  /* Fixed so it stays in thumb reach; safe-area padding clears the iPhone home
     indicator in the installed app and sits above Safari's toolbar in a browser. */
  .tabbar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;
    background:var(--bg);border-top:1px solid var(--ink);
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  /* Nothing may hide behind the bar. */
  .main{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
  #toast{bottom:calc(78px + env(safe-area-inset-bottom,0px))}
  /* A bottom sheet in thumb reach rather than a card in the middle of the
     screen — and clear of the fixed tab bar it sits on top of. */
  .ksheet{align-items:flex-end;padding:0}
  .ks-card{max-width:none;border:none;border-top:1px solid var(--ink);
    padding-bottom:calc(20px + env(safe-area-inset-bottom,0px));max-height:82vh}
}

/* Very narrow phones: keep six labels legible rather than letting them wrap. */
@media (max-width:360px){
  .tabbar .lb{font-size:8px;letter-spacing:.03em}
  .tabbar .ic{font-size:15px;width:22px;height:22px}
}

/* ================= instagram link ================= */
/* The site is the companion to @zawazawa.tokyo and had no link back to it.
   The glyph is a stroke drawing in currentColor — the same trick the Zawa mark
   uses — so one rule covers light and dark; the brand gradient would be the
   only saturated thing on either theme. --mute passes AA in both. */
.ig-follow{display:inline-flex;align-items:center;gap:6px;color:var(--mute);text-transform:none;letter-spacing:.04em}
.ig-follow svg{flex:none;display:block}
.ig-follow span{text-decoration:underline;text-underline-offset:3px}
.ig-follow:hover,.ig-follow:focus-visible{color:var(--ink)}
.side .foot .ig-follow{color:var(--mute);font-size:10.5px;text-decoration:none;margin-bottom:3px}
.side .foot .ig-follow span{text-transform:none;letter-spacing:.04em}
.side .foot .ig-follow:hover,.side .foot .ig-follow:focus-visible{color:var(--ink)}
.pagefoot .ig-follow{display:inline-flex;padding:4px 0;font-size:12.5px;color:var(--mute);text-decoration:none}
.pagefoot .ig-follow svg{width:15px;height:15px}
.pagefoot .ig-follow:hover,.pagefoot .ig-follow:focus-visible{color:var(--ink)}