/* White Noise: one stylesheet for every page. */
@font-face{font-family:"PP Mondwest";src:url(/assets/mondwest.otf) format("opentype");font-display:block}
@font-face{font-family:"monogram";src:url(/assets/monogram.ttf) format("truetype");font-display:block}
/* Single-look page matching the White Noise poster: white paper, one cobalt ink. */
:root{
  --paper:#FFFFFF;
  --ink:#2B35D6;
  --ink-faint:rgba(43,53,214,.14);
  --mono:"monogram",ui-monospace,Menlo,monospace;
  --serif:"Instrument Serif","Times New Roman",Times,serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--paper)}
body{background:var(--paper);color:var(--ink);font:400 32px/1 var(--mono);-webkit-font-smoothing:none;font-smooth:never;margin:0;padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right));padding-top:max(22px,env(safe-area-inset-top));padding-bottom:calc(64px + env(safe-area-inset-bottom))}
.wrap{max-width:600px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr);gap:56px}
p{margin:0}
a{color:var(--ink);text-decoration:none;border-bottom:2px solid var(--ink)}
a:hover{background:var(--ink);color:var(--paper)}
a:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.px{image-rendering:pixelated;image-rendering:crisp-edges;display:block}

/* ---------- poster header ---------- */
.poster{position:relative;margin-left:calc(-1 * max(18px,env(safe-area-inset-left)));margin-right:calc(-1 * max(18px,env(safe-area-inset-right)));padding-inline:18px;padding-top:6px;overflow:hidden;display:grid;gap:18px;min-height:clamp(560px,150vw,860px);align-content:start}
.ascii{position:absolute;left:-2px;top:34px;margin:0;font:400 clamp(8.5px,2.45vw,13px)/.9 var(--mono);color:var(--ink);white-space:pre;pointer-events:none;user-select:none;text-shadow:.07em 0 currentColor}
.title{position:relative;margin:0;display:grid;justify-items:end;gap:clamp(18px,5vw,34px)}
.title img{width:100%;height:auto;margin-right:-4px}
.title img + img{width:90%}
.credits{position:relative;display:grid;justify-items:end;gap:12px;text-align:right;margin-left:auto;margin-top:clamp(8px,4vw,30px);width:min(58%,300px)}
.by{display:flex;align-items:center;justify-content:space-between;width:100%;font-size:30px;line-height:1}
.by .serif{font:400 42px/1 var(--serif);letter-spacing:-.045em;text-shadow:none}
.bar{display:flex;justify-content:space-between;width:100%;background:var(--ink);color:var(--paper);font-size:34px;line-height:1;padding:5px 6px 3px}
.line{font-size:30px;line-height:1}
.serif{font-family:var(--serif);letter-spacing:-.045em;font-weight:400;text-shadow:none}
.big{font-size:46px;line-height:.9}
.small{font-size:26px;line-height:1}
.code{background:var(--ink);color:var(--paper);padding:0 5px}

/* ---------- sections ---------- */
section{display:grid;gap:18px}
.section-title{display:grid;gap:10px}
.page-title{margin:0;font:400 clamp(64px,19vw,112px)/.9 var(--serif);letter-spacing:-.045em;text-shadow:none}
.kicker{font-size:26px;line-height:1}

.map{position:relative;border:2px solid var(--ink)}
.map img{display:block;width:100%;height:auto;aspect-ratio:900/1030}
.overlay{position:absolute;inset:0;width:100%;height:100%}
.m-case path{stroke:#fff;stroke-width:17;stroke-linecap:square;fill:none}
.m-line path{stroke:var(--ink);stroke-width:10;stroke-linecap:square;fill:none}
.m-dot circle{fill:var(--ink);stroke:#fff;stroke-width:3}
.pin rect{stroke:#fff;stroke-width:4}
.pin text{font:400 40px var(--mono);fill:#fff}
.pin.party rect{fill:var(--ink)}
.pin.lot rect{fill:var(--ink)}
.legend{display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;font-size:32px;line-height:1}
/* party + paid lots share row one; metered blocks gets its own row */
.legend span:nth-child(3){flex-basis:100%}
.legend span{display:inline-flex;align-items:center;gap:8px}
.legend i{font-style:normal;display:block;flex:none;width:32px;height:32px;background:var(--ink);color:var(--paper);font-size:32px;line-height:28px;text-align:center;padding-left:2px;overflow:hidden}
/* monogram sits low in its line box: lift caps 2px, lowercase 4px to optically centre them */
.legend i.lc{line-height:26px}
.legend i.stroke{width:40px;height:10px;padding:0}

.list{display:grid;gap:8px}
.list-head{display:flex;justify-content:space-between;background:var(--ink);color:var(--paper);font-size:32px;line-height:1;padding:4px 8px 2px;gap:16px}
@media (min-width:560px){.list-head{font-size:48px}}
.rows{list-style:none;margin:0;padding:0;display:grid}
/* B+: serif name, blue walk-time tile, small faded pixel directions */
.row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 14px;padding-block:14px;border-bottom:2px solid var(--ink)}
.row:last-child{border-bottom:0}
.row .name{font:400 38px/1 var(--serif);letter-spacing:-.045em;text-shadow:none}
.row .time{grid-row:span 2;align-self:center;min-width:64px;background:var(--ink);color:var(--paper);font:400 32px/1 var(--mono);text-align:center;padding:6px 8px 4px}
.row .time small{display:block;font-size:16px;line-height:1}
.row .meta{font:400 16px/1.25 var(--mono);opacity:.72;min-width:0}
.row .links{grid-column:1;display:flex;flex-wrap:wrap;gap:4px 18px;font:400 16px/1 var(--mono);padding-top:2px}
.row .links a{border-bottom-width:2px;padding-bottom:1px}

.row .name{min-width:0;overflow-wrap:anywhere}
.note{font-size:32px;line-height:1}

.photo{display:grid;gap:8px}
.photo{container-type:inline-size}
.ascii-photo{margin:0;font:400 3.1cqw/.9 var(--mono);white-space:pre;overflow:hidden;text-shadow:.07em 0 currentColor;letter-spacing:0}
.entry{position:relative;margin:0;border:2px solid var(--ink);overflow:hidden}
.entry img{display:block;width:100%;height:auto}
/* keypad location, measured on the 2054x1274 source image */
.hotspot{position:absolute;left:33.65%;top:52.0%;width:5.3%;height:10.2%;outline:3px solid var(--ink);box-shadow:0 0 0 3px #fff,0 0 0 9999px rgba(20,24,90,.28)}
.callout{position:absolute;left:calc(38.95% + 12px);top:calc(57.1% - 17px);background:var(--ink);color:#fff;font-size:32px;line-height:1;padding:4px 8px 2px;white-space:nowrap}
.callout::before{content:"";position:absolute;right:100%;top:50%;width:12px;height:3px;background:var(--ink);transform:translateY(-50%)}
@media (prefers-reduced-motion: no-preference){.hotspot{animation:ping 1.6s steps(2,jump-none) infinite}}
@keyframes ping{50%{outline-color:#fff;box-shadow:0 0 0 3px var(--ink),0 0 0 9999px rgba(20,24,90,.28)}}
.step{font-size:32px;line-height:1}


.end{font-size:32px;text-align:center;letter-spacing:.25em}

/* free parking: dashed blocks */
.f-case path{stroke:#fff;stroke-width:17;stroke-linecap:butt;fill:none}
.f-line path{stroke:var(--ink);stroke-width:9;stroke-dasharray:14 8;fill:none}
.legend i.dash{width:40px;height:10px;padding:0;background:repeating-linear-gradient(90deg,var(--ink) 0 12px,transparent 12px 20px)}
.legend span:nth-child(4){flex-basis:100%}
.contact{display:grid;gap:8px}
.contact .links{align-items:baseline}
.contact .links a.phone{font-size:32px;line-height:1}
.contact .call{align-self:center;background:var(--ink);color:var(--paper);border:0;font:400 32px/1 var(--mono);padding:10px 14px 8px;text-align:center}
.contact .call:hover,.contact .call:focus-visible{background:var(--paper);color:var(--ink);outline:2px solid var(--ink)}

/* getting up: door + elevator */
.getting-up .list + .list{margin-top:18px}
.lift{margin:0;border:2px solid var(--ink);background:#fff}
.lift canvas{display:block;width:100%;height:auto;aspect-ratio:96/72;image-rendering:pixelated;image-rendering:crisp-edges}
.press{display:grid;gap:6px;padding-top:6px}
.press .name{font:400 38px/1 var(--serif);letter-spacing:-.045em}
.press .sub{font:400 16px/1.25 var(--mono);opacity:.72}
/* ---- P1 mockup ---- */
.event{display:grid;gap:12px}
.event .when{font:400 16px/1.2 var(--mono)}
.event .where{margin:0;font:400 44px/.95 var(--serif);letter-spacing:-.045em}
.btn-dir{display:flex;justify-content:space-between;align-items:center;min-height:52px;padding:4px 14px 2px;background:var(--ink);color:var(--paper);border:0;font:400 32px/1 var(--mono)}
.btn-dir:hover,.btn-dir:focus-visible{background:var(--paper);color:var(--ink);outline:2px solid var(--ink)}
.tag rect{fill:var(--ink);stroke:#fff;stroke-width:4}
.tag text{font:400 40px var(--mono);fill:#fff}
.code-tag{display:inline-block;vertical-align:middle;margin-right:10px;transform:translateY(-5px);background:var(--ink);color:var(--paper);font:400 16px/1 var(--mono);letter-spacing:0;padding:4px 5px 2px;min-width:22px;text-align:center}
.row .links .dir{display:inline-flex;align-items:center;min-height:44px;padding:2px 14px 0;border:2px solid var(--ink);font:400 16px/1 var(--mono)}
.row .links .dir:hover,.row .links .dir:focus-visible{background:var(--ink);color:var(--paper)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* ---- masthead + directions ---- */
.masthead{display:grid;justify-items:start;gap:14px;padding-top:6px}
.wordmark{margin:0;font:400 clamp(84px,27vw,168px)/.84 "PP Mondwest","Times New Roman",serif;letter-spacing:.01em;text-transform:uppercase;text-align:left;color:var(--ink)}
.wordmark span{display:block;white-space:nowrap}
.masthead .when{font:400 32px/1 var(--mono)}
.address{display:grid;gap:8px}
.address .where{margin:0;font:400 44px/.95 var(--serif);letter-spacing:-.045em}
.address .city{font:400 16px/1.2 var(--mono)}
/* ---- street parking sub-headings ---- */
.list.street .sub-head{display:flex;justify-content:space-between;align-items:baseline;margin-top:10px;padding:10px 0 6px;border-bottom:2px solid var(--ink);font:400 16px/1 var(--mono)}
.list.street .sub-head span:first-child{font-size:32px}
/* ---- maps app picker ---- */
.picker{margin:auto auto 0;width:min(100%,600px);max-width:100%;padding:0;border:0;background:transparent;color:var(--ink)}
.picker::backdrop{background:rgba(43,53,214,.28)}
.picker-inner{display:grid;gap:10px;margin:0 12px 12px;padding:16px;background:var(--paper);border:2px solid var(--ink)}
.picker-title{display:flex;justify-content:space-between;margin:0 0 4px;font:400 32px/1 var(--mono)}
.pick,.pick-cancel{display:flex;align-items:center;justify-content:center;min-height:52px;font:400 32px/1 var(--mono);text-decoration:none;border:2px solid var(--ink);cursor:pointer}
.pick{background:var(--ink);color:var(--paper)}
.pick:hover,.pick:focus-visible{background:var(--paper);color:var(--ink)}
.pick-cancel{background:var(--paper);color:var(--ink);padding:0}
.pick-cancel:hover,.pick-cancel:focus-visible{background:var(--ink);color:var(--paper)}
@media (prefers-reduced-motion: no-preference){.picker[open]{animation:sheet .18s steps(3,end)}}
@keyframes sheet{from{transform:translateY(24px)}to{transform:none}}
/* party marker: outlined so it reads differently from lots and codes */
.pin.party rect{fill:#fff;stroke:var(--ink);stroke-width:5}
.pin.party text{fill:var(--ink)}
.legend i.party-chip{background:#fff;color:var(--ink);outline:2px solid var(--ink);outline-offset:-2px}
/* the same marker beside the address, at the size of the S1 code box */
.code-tag.party-tag{background:var(--paper);color:var(--ink);outline:2px solid var(--ink);outline-offset:-2px;box-sizing:border-box;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;line-height:1;padding:0 0 3px 1px}   /* shifts the glyph's ink, not the box, onto the exact centre */
/* ---- compact directions ---- */
.directions{display:grid;gap:14px}
.directions h2.list-head{margin:0;font-weight:400}
.dest{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 14px;padding-block:12px 0}
.dest-name{margin:0;font:400 38px/1 var(--serif);letter-spacing:-.045em}
.dest-city{grid-column:1;margin:0;font:400 16px/1.2 var(--mono)}
.dest-go{grid-column:2;grid-row:1 / span 2;display:inline-flex;align-items:center;min-height:52px;padding:4px 16px 2px;background:var(--ink);color:var(--paper);border:0;font:400 32px/1 var(--mono)}
.dest-go:hover,.dest-go:focus-visible{background:var(--paper);color:var(--ink);outline:2px solid var(--ink)}
/* ---- blinking party marker ---- */
@media (prefers-reduced-motion: no-preference){
  .pin.party rect{animation:party-box 1.2s steps(1,end) infinite}
  .pin.party text{animation:party-x 1.2s steps(1,end) infinite}
}
@keyframes party-box{0%{fill:#fff}50%{fill:var(--ink)}100%{fill:var(--ink)}}
@keyframes party-x{0%{fill:var(--ink)}50%{fill:#fff}100%{fill:#fff}}
/* ---- directions button beside the name ---- */
.list .row{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:0 14px}
.list .row .links{grid-column:2;grid-row:1;justify-self:end;padding-top:0}
.dest-go{background:var(--paper);color:var(--ink);border:2px solid var(--ink);min-height:44px;padding:2px 14px 0;font:400 16px/1 var(--mono)}
.dest-go:hover,.dest-go:focus-visible{background:var(--ink);color:var(--paper);outline:0}
/* ---- directions chooser (no script needed) ---- */
.dirpick{position:relative;display:inline-block}
.dest .dirpick{grid-column:2;grid-row:1 / span 2;justify-self:end}
.dirpick summary{list-style:none;display:inline-flex;align-items:center;min-height:44px;padding:2px 14px 0;border:2px solid var(--ink);background:var(--paper);color:var(--ink);font:400 16px/1 var(--mono);cursor:pointer;user-select:none}
.dirpick summary::-webkit-details-marker{display:none}
.dirpick summary:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.dirpick[open] summary{background:var(--ink);color:var(--paper)}
.dirpick .opts{position:absolute;right:0;top:calc(100% + 6px);z-index:10;display:grid;gap:6px;width:180px;padding:8px;background:var(--paper);border:2px solid var(--ink)}
.dirpick .opts a{display:flex;align-items:center;justify-content:center;min-height:44px;background:var(--ink);color:var(--paper);border:0;font:400 16px/1 var(--mono)}
.dirpick .opts a:hover,.dirpick .opts a:focus-visible{background:var(--paper);color:var(--ink);outline:2px solid var(--ink)}
/* ---- site: home + subpages switched by #hash (no script needed) ---- */
.home{display:grid;gap:18px}
.poster{display:block;width:calc(100% + 36px);max-width:none;height:auto;margin-inline:-18px;margin-top:-22px}
@media (min-width:640px){.poster{width:100%;margin-inline:0;margin-top:0}}
.home-nav{display:grid;gap:10px}
.nav-btn{display:flex;justify-content:space-between;align-items:center;min-height:56px;padding:4px 14px 2px;background:var(--ink);color:var(--paper);border:0;font:400 32px/1 var(--mono)}
.nav-btn:hover,.nav-btn:focus-visible{background:var(--paper);color:var(--ink);outline:2px solid var(--ink)}
.subpage{display:none}
.subpage:target{display:grid;grid-template-columns:minmax(0,1fr);gap:56px}
body:has(.subpage:target) .home{display:none}
.back{justify-self:start;display:inline-flex;align-items:center;min-height:44px;padding:2px 12px 0;border:2px solid var(--ink);font:400 16px/1 var(--mono)}
.back:hover,.back:focus-visible{background:var(--ink);color:var(--paper)}
.soon{font:400 32px/1 var(--mono)}
.soon-note{font:400 16px/1.25 var(--mono)}
/* ---- animated poster: slow-motion eagle between the page and the poster text ---- */
.poster-stack{position:relative;width:calc(100% + 36px);margin-inline:-18px;margin-top:-22px;aspect-ratio:1080/1920;background:#fff;overflow:hidden}
@media (min-width:640px){.poster-stack{width:100%;margin-inline:0;margin-top:0}}
.poster-layer{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;margin:0;border:0;object-fit:cover}
.poster-anim,.poster-text{visibility:hidden}
.poster-stack.is-playing .poster-anim,.poster-stack.is-playing .poster-text{visibility:visible}
.poster-stack.is-playing .poster-still{visibility:hidden}
/* ---- buttons: two equal halves along the bottom of the poster ---- */
.poster-stack .home-nav{position:absolute;left:16px;right:16px;bottom:16px;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.poster-stack .nav-btn{min-width:0;min-height:56px;gap:10px;padding:6px 12px 4px}
.poster-stack .nav-btn span:first-child{min-width:0;line-height:1}
/* ---- keep the whole poster (and its buttons) within one phone screen ---- */
.poster-stack{max-height:100vh;max-height:100svh}
.poster-layer{object-position:50% 0}
/* ---- smaller bottom buttons ---- */
.poster-stack .home-nav{left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));gap:8px}
.poster-stack .nav-btn{height:44px;min-height:44px;padding:4px 8px 2px;gap:6px;font-size:20px;white-space:nowrap}
@media (max-width:384px){.poster-stack .nav-btn span[aria-hidden]{display:none}.poster-stack .nav-btn{justify-content:center}}
/* iPhone SE and friends: one button per row, so no label is cut off */
@media (max-width:359px){.poster-stack .home-nav{grid-template-columns:1fr}.poster-stack .nav-btn{font-size:18px}}
/* "directions & getting in" is longer than the old label: shrink a step so no phone clips it */
@media (min-width:360px) and (max-width:430px){.poster-stack .nav-btn{font-size:17px}}

:root{
  --paper:#FFFFFF;
  --ink:#2B35D6;
  --mono:"monogram",ui-monospace,Menlo,monospace;
  --serif:"Instrument Serif","Times New Roman",Times,serif;
  --w98-face:#C0C0C0;
  --w98-light:#FFFFFF;
  --w98-mid:#DFDFDF;
  --w98-shadow:#808080;
  --w98-dark:#0A0A0A;
  --w98-title-a:#1A2280;
  --w98-title-b:#4A63E6;
}
#view-art .wrap{max-width:600px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr);gap:44px}
#view-art p{margin:0}
#view-art button,#view-art input{font:inherit;color:inherit}
#view-art :focus-visible{outline:2px solid var(--ink);outline-offset:2px}
#view-art .page-title{margin:0;font:400 clamp(64px,19vw,112px)/.9 var(--serif);letter-spacing:-.045em}
#view-art .intro{font-size:16px;line-height:1.25}
#view-art .cta{margin-top:28px;display:flex;justify-content:center;align-items:center;justify-self:center;width:auto;min-height:56px;padding:4px 24px 2px;text-align:center;background:var(--ink);color:var(--paper);border:0;cursor:pointer;font:400 32px/1 var(--mono)}
#view-art .cta:hover{background:var(--paper);color:var(--ink);outline:2px solid var(--ink)}
#view-art .cta:disabled{opacity:.45;cursor:not-allowed}
#view-art .status{font-size:16px;line-height:1.25;min-height:20px}
#view-art .status:empty{display:none}
#view-art .cta{margin-top:12px}
#view-art .list-head{display:flex;justify-content:space-between;gap:16px;background:var(--ink);color:var(--paper);font-size:32px;line-height:1;padding:4px 8px 2px;margin:0}
#view-art .w98{background:var(--w98-face);color:var(--w98-dark);padding:3px;
  box-shadow:inset -1px -1px var(--w98-dark),inset 1px 1px var(--w98-mid),inset -2px -2px var(--w98-shadow),inset 2px 2px var(--w98-light)}
#view-art .w98-title{display:flex;align-items:center;gap:6px;height:26px;padding:0 3px 0 4px;color:#fff;
  background:var(--ink);font:400 16px/1 var(--mono);-webkit-font-smoothing:none}
#view-art .w98-title .t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-top:2px}
#view-art .w98-btn{flex:none;min-width:22px;height:20px;padding:0 6px;background:var(--w98-face);color:var(--w98-dark);border:0;cursor:pointer;
  font:400 16px/1 var(--mono);
  box-shadow:inset -1px -1px var(--w98-dark),inset 1px 1px var(--w98-light),inset -2px -2px var(--w98-shadow),inset 2px 2px var(--w98-mid)}
#view-art .w98-btn:active,#view-art .w98-btn[aria-pressed="true"]{box-shadow:inset -1px -1px var(--w98-light),inset 1px 1px var(--w98-dark),inset -2px -2px var(--w98-mid),inset 2px 2px var(--w98-shadow)}
#view-art .w98-btn:disabled{color:var(--w98-shadow);text-shadow:1px 1px var(--w98-light);cursor:not-allowed}
#view-art .w98-body{padding:8px;display:grid;gap:8px}
#view-art .w98-sunken{background:#fff;box-shadow:inset -1px -1px var(--w98-light),inset 1px 1px var(--w98-shadow),inset -2px -2px var(--w98-mid),inset 2px 2px var(--w98-dark)}
#view-art .aw-overlay{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:12px;background:rgba(43,53,214,.35)}
#view-art .aw-overlay[hidden]{display:none!important}
#view-art .paint{width:min(100%,460px)}
#view-art .toolbar{display:flex;flex-wrap:wrap;gap:6px}
#view-art .toolbar .w98-btn{height:32px;min-width:44px}
#view-art .canvas-well{padding:2px}
#view-art #pad{display:block;width:100%;height:auto;aspect-ratio:1/1;touch-action:none;cursor:crosshair;background:#fff}
#view-art .field{display:grid;gap:4px}
#view-art .field label{font:400 16px/1 var(--mono)}
#view-art .field input{width:100%;height:36px;padding:2px 6px 0;border:0;font:400 16px/1 var(--mono);color:var(--w98-dark)}
#view-art .actions{display:flex;justify-content:flex-end;gap:8px}
#view-art .actions .w98-btn{height:32px;min-width:88px}
#view-art .form-msg{font:400 16px/1.25 var(--mono);color:#8B0000;min-height:20px}
#view-art .feed{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:360px){#view-art .feed{grid-template-columns:minmax(0,1fr)}}
#view-art .feed .w98-body{padding:4px;grid-template-columns:minmax(0,1fr)}
#view-art .feed img{display:block;width:100%;height:auto;aspect-ratio:1/1;image-rendering:auto;background:#fff}
#view-art .feed .wipe{flex:none;height:18px;min-width:18px;padding:0 4px;font-size:14px}
#view-art .feed .meta{display:flex;justify-content:space-between;gap:6px;min-width:0;padding:2px 2px 0;font:400 16px/1 var(--mono);color:var(--w98-dark)}
#view-art .feed .meta .who{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#view-art .empty{font-size:16px;line-height:1.25}
#view-art .back{justify-self:start;display:inline-flex;align-items:center;min-height:44px;padding:2px 12px 0;border:2px solid var(--ink);color:var(--ink);text-decoration:none;font:400 16px/1 var(--mono)}
#view-art .back:hover,#view-art .back:focus-visible{background:var(--ink);color:var(--paper)}

#view-art .aw-rule{margin:0;font:400 32px/1.05 var(--mono)}
#view-art .aw-smile{width:18px;height:18px;vertical-align:-2px;shape-rendering:crispEdges}
#view-art .aw-turn{display:flex;justify-content:center;margin:0;padding:14px 0 22px}
#view-art .aw-turn canvas{display:block;width:132px;height:auto;image-rendering:pixelated;image-rendering:crisp-edges}
#view-parking .dir-globe{display:flex;justify-content:center;padding:34px 0 22px}
#view-parking .dir-globe canvas{display:block;height:auto;image-rendering:pixelated;image-rendering:crisp-edges}
/* ---------- merged site: one page, three views ---------- */
.view[hidden]{display:none!important}
button.nav-btn{cursor:pointer;text-align:left}
button.back{background:var(--paper);color:var(--ink);cursor:pointer}
button.back:hover,button.back:focus-visible{background:var(--ink);color:var(--paper)}

/* ---------- restroom squad boarding pass ---------- */
:root{--go:#16803F;--go-soft:#E6F4EA}
.poster-stack .home-nav .nav-wide{grid-column:1 / -1;background:var(--paper);color:var(--ink);border:2px solid var(--ink);cursor:pointer}
.poster-stack .home-nav .nav-wide:hover{background:var(--ink);color:var(--paper)}
.wc{position:fixed;inset:0;z-index:100;overflow-y:auto;overscroll-behavior:contain;background:var(--paper);color:var(--ink)}
.wc[hidden]{display:none!important}
.wc.flash{animation:wc-flash .9s steps(1,end)}
@keyframes wc-flash{0%{background:var(--go)}17%{background:var(--paper)}33%{background:var(--go)}50%{background:var(--paper)}67%{background:var(--go)}83%{background:var(--paper)}}
.wc.flash .wc-meter .fill{animation:wc-seg .6s steps(1,end) both}
@keyframes wc-seg{0%,50%{background:var(--ink)}100%{background:var(--go)}}
.wc-meter.blink .fill .m-more strong{animation:wc-blink .3s steps(1,end) 6}
@keyframes wc-blink{0%{visibility:visible}50%{visibility:hidden}}
.wc-card{max-width:520px;margin:0 auto;padding:14px 16px 32px;display:grid;gap:18px}
.wc-toilet{display:flex;justify-content:center;padding:14px 0 22px}
.wc-toilet canvas{display:block;height:auto;image-rendering:pixelated;image-rendering:crisp-edges}
.wc-back{justify-self:start;display:inline-flex;align-items:center;min-height:44px;padding:2px 12px 0;border:2px solid var(--ink);background:var(--paper);color:var(--ink);font:400 16px/1 var(--mono);cursor:pointer}
.wc-back:hover,.wc-back:focus-visible{background:var(--ink);color:var(--paper)}
.wc-title{margin:0;font:400 clamp(64px,19vw,112px)/.9 var(--serif);letter-spacing:-.045em}
.wc-rule{margin:0;font:400 32px/1.05 var(--mono)}
.wc-meter{position:relative;height:36px;border:2px solid var(--ink);background:var(--paper);overflow:hidden}
.wc-meter .lay{position:absolute;left:0;top:0;height:100%;width:100%;display:flex;align-items:center;justify-content:center;padding-top:4px;white-space:nowrap;font:400 32px/1 var(--mono)}
.wc-meter .base{color:var(--ink)}
.wc-meter .fill{position:absolute;left:0;top:0;bottom:0;width:calc(var(--n,1) / 5 * 100%);overflow:hidden;background:var(--ink);transition:width .2s steps(1,end)}
.wc-meter .fill .lay{width:calc(100% * 5 / var(--n,1))}
.wc-meter .fill .lay{color:var(--paper)}
.wc.done .wc-meter{border-color:var(--go)}
.wc.done .wc-meter .fill{background:var(--go)}
.wc.done .wc-meter .m-track i.on{background:var(--go)}
.wc-meter .m-more{display:none}
.wc.done .wc-meter{height:auto}
.wc.done .wc-meter .base{position:static;height:auto}
.wc.done .wc-meter .lay{flex-direction:column;gap:10px;padding:14px 16px 12px;white-space:normal;text-align:center}
.wc.done .wc-meter .fill .lay{position:absolute;inset:0}
.wc.done .wc-meter .m-more{display:flex;flex-direction:column;gap:10px}
.wc.done .wc-meter .a{display:none}
.wc-meter .m-more strong{font:400 32px/1 var(--mono);font-weight:400}
.wc-meter .m-more small{font:400 24px/1.15 var(--mono)}
.wc-slots{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.wc-slot{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;min-height:60px;border:2px solid var(--ink)}
.wc-slot .num{align-self:stretch;display:grid;place-items:center;background:var(--ink);color:var(--paper);font:400 32px/1 var(--mono);padding-top:2px}
.wc-slot .who{min-width:0;display:grid;gap:4px;padding:8px 10px 6px;text-align:left;background:none;border:0;color:inherit;font:inherit;cursor:pointer}
.wc-slot .who:disabled{cursor:default}
.wc-slot .nm{font:400 30px/1 var(--serif);letter-spacing:-.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wc-slot .rl{font:400 16px/1 var(--mono)}
.wc-slot .ok{width:36px;height:36px;margin-right:10px;display:grid;place-items:center;background:var(--go)}
.wc-slot .ok svg{display:block;width:14px;height:10px;shape-rendering:crispEdges}
.wc-slot .rm{min-width:44px;min-height:44px;margin-right:6px;background:var(--paper);color:var(--ink);border:2px solid var(--ink);font:400 16px/1 var(--mono);cursor:pointer;padding-top:2px}
.wc-slot .rm:hover{background:var(--ink);color:var(--paper)}
.wc-slot.empty{border-style:dashed}
.wc-slot.empty .num{background:var(--paper);color:var(--ink);border-right:2px dashed var(--ink)}
.wc-add{grid-column:2 / -1;display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:56px;padding:4px 10px 2px;text-align:left;background:none;border:0;color:var(--ink);font:400 24px/1 var(--mono);cursor:pointer}
.wc-add .plus{flex:none;position:relative;width:36px;height:36px;background:var(--ink)}
/* monogram '+' is 5x5 font pixels (10px at 32px); its baseline sits 8.66px below the line box middle, so a 32.6875px line nudged down 1px puts the ink at 13..23 */
.wc-add .plus::before{content:"+";position:absolute;left:13px;top:1px;color:#fff;font:400 32px/32.6875px var(--mono);-webkit-font-smoothing:none}
.wc-add:hover{background:var(--ink-faint)}
.wc-form{grid-column:2 / -1;display:grid;gap:10px;padding:10px}
.wc-form label{font:400 24px/1 var(--mono)}
.wc-form input{width:100%;height:52px;padding:4px 10px 2px;border:2px solid var(--ink);border-radius:0;background:var(--paper);color:var(--ink);font:400 24px/1 var(--mono)}
.wc-roles{display:grid;gap:6px;border:0;margin:0;padding:0}
.wc-roles legend{padding:0;margin-bottom:8px;font:400 24px/1 var(--mono)}
.wc-role{display:flex;align-items:center;gap:8px;min-height:52px;padding:4px 10px 2px;border:2px solid var(--ink);cursor:pointer;font:400 24px/1.1 var(--mono)}
.wc-role input{position:absolute;opacity:0;width:1px;height:1px}
.wc-role:has(input:checked){background:var(--ink);color:var(--paper)}
.wc-role:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:2px}
.wc-form .row2{display:flex;gap:8px;justify-content:flex-end}
.wc-form .row2 .wc-btn{min-height:52px;font-size:24px}
.wc-btn{min-height:44px;padding:4px 14px 2px;border:2px solid var(--ink);background:var(--paper);color:var(--ink);font:400 16px/1 var(--mono);cursor:pointer}
.wc-btn.solid{background:var(--ink);color:var(--paper)}
.wc-btn:disabled{opacity:.4;cursor:not-allowed}
.wc-actions{display:grid;gap:10px;margin-top:6px}
.wc-actions .wc-btn{min-height:56px;font-size:32px}
.wc-actions .go{background:var(--go);border-color:var(--go);color:#fff}
.wc-actions .go[hidden]{display:none}
.wc-confetti{position:fixed;inset:0;z-index:101;pointer-events:none;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges}
@media (prefers-reduced-motion:reduce){.wc.flash,.wc-meter.blink .fill .m-more strong{animation:none}}

/* ================= multi-page additions ================= */
/* links that look like the old buttons */
a.nav-btn,a.back,a.wc-back{text-decoration:none}
a.back,a.wc-back{border-bottom-width:2px}

/* home is exactly one screen: poster fills the visible viewport and the three
   buttons sit just above Safari's toolbar instead of floating mid-screen */
body.page-home{padding:0}
body.page-home .wrap{max-width:none;gap:0}
body.page-home .end{margin:0;padding:26px 0 calc(34px + env(safe-area-inset-bottom))}
@media (max-width:639px) and (orientation:portrait){
  /* the poster owns the whole screen; overflow must stay visible so the buttons can stick,
     and lvh (not svh) means the sticky range covers Safari's floating toolbar */
  body.page-home .poster-stack{width:100%;margin:0;aspect-ratio:auto;height:100vh;height:100lvh;max-height:none;
    overflow:visible;display:flex;flex-direction:column;justify-content:flex-end}
  /* pinned to the bottom of what Safari is actually showing, so the buttons hug
     the address bar instead of stopping short of it */
  /* sticky, not fixed: hugs the address bar while scrolling, then rides up at the end
     of the poster so the * * * lands beneath the buttons */
  body.page-home .poster-stack .home-nav{position:sticky;left:auto;right:auto;
    bottom:calc(8px + env(safe-area-inset-bottom));margin:0 12px calc(8px + env(safe-area-inset-bottom));z-index:3}
}
@media (min-width:640px),(orientation:landscape){
  body.page-home .wrap{max-width:600px}
  body.page-home .poster-stack{margin:0 auto}
}

/* the restroom pass was a full-screen dialog; as a page it just scrolls normally */
body.page-restroom{padding:0}
body.page-restroom .wc-card .end{margin:14px 0 calc(8px + env(safe-area-inset-bottom))}
body.page-restroom .wc{position:static;inset:auto;overflow:visible;min-height:100vh;min-height:100dvh}