/* Festina Lente — stylesheet
   Paper white, ink black. One display serif (Cormorant Garamond), one text sans (Inter),
   one monospace for the letter-pictures (IBM Plex Mono). */

@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:300;font-display:swap;src:url(../assets/fonts/cormorant-garamond-latin-300-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/cormorant-garamond-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:300;font-display:swap;src:url(../assets/fonts/cormorant-garamond-latin-300-italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:400;font-display:swap;src:url(../assets/fonts/cormorant-garamond-latin-400-italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:500;font-display:swap;src:url(../assets/fonts/cormorant-garamond-latin-500-italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:700;font-display:swap;src:url(../assets/fonts/cormorant-garamond-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:700;font-display:swap;src:url(../assets/fonts/cormorant-garamond-latin-ext-700-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:700;font-display:swap;src:url(../assets/fonts/cormorant-garamond-latin-700-italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:700;font-display:swap;src:url(../assets/fonts/cormorant-garamond-latin-ext-700-italic.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:300;font-display:swap;src:url(../assets/fonts/cormorant-garamond-latin-ext-300-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/cormorant-garamond-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/cormorant-garamond-latin-ext-500-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:400;font-display:swap;src:url(../assets/fonts/cormorant-garamond-latin-ext-400-italic.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/inter-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/inter-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/inter-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/inter-latin-ext-500-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2")}

:root{
  --paper:#ffffff;
  --ink:#000000;
  --ink-2:#5a5a5a;
  --hair:#dadada;
  --seal:#b3261e;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --gutter:clamp(16px,3.6vw,56px);
  --gap:clamp(12px,1.4vw,22px);
  --head-h:64px;
  --announce-h:36px;
  --chrome:calc(var(--head-h) + var(--announce-h));
  --ease:cubic-bezier(.22,.8,.2,1);
  --ease-door:cubic-bezier(.6,0,.15,1);
}
:root.announce-off{--announce-h:0px}

*{box-sizing:border-box}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.5;padding-top:var(--chrome);overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;margin:0;line-height:1.05;letter-spacing:-.005em}
p{margin:0}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

.btn-solid{display:inline-block;background:var(--ink);color:var(--paper);padding:11px 20px;border:1px solid var(--ink);font-size:14px;transition:background .3s var(--ease),color .3s var(--ease)}
.btn-solid:hover{background:var(--paper);color:var(--ink)}
.btn-line{display:inline-block;border:1px solid var(--ink);padding:10px 18px;font-size:14px;background:var(--paper);transition:background .3s var(--ease),color .3s var(--ease)}
.btn-line:hover{background:var(--ink);color:var(--paper)}
.btn-text{font-size:14px;padding:6px 0;position:relative}
.link-line{position:relative;display:inline-block;font-size:14px;padding-bottom:2px}
.link-line::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform-origin:left;transition:transform .5s var(--ease)}
.link-line:hover::after{transform:scaleX(.3)}

/* ---------- Announcements ---------- */
.announce{position:fixed;top:0;left:0;right:0;height:var(--announce-h);z-index:1000;display:flex;align-items:center;justify-content:center;background:var(--ink);color:var(--paper);font-size:13px;overflow:hidden}
.announce-off .announce{display:none}
.announce-items{position:relative;height:100%;flex:1;text-align:center}
.announce-items p{position:absolute;left:var(--gutter);right:var(--gutter);top:0;height:100%;display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(100%);transition:opacity .6s var(--ease),transform .6s var(--ease);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.announce-items p.is-on{opacity:1;transform:none}
.announce-items p.is-off{opacity:0;transform:translateY(-100%)}
.announce-close{position:absolute;right:var(--gutter);top:0;height:100%;width:36px;font-size:20px;color:var(--paper)}

/* ---------- Header ---------- */
.site-head{position:fixed;top:var(--announce-h);left:0;right:0;height:var(--head-h);z-index:990;display:flex;align-items:center;justify-content:space-between;padding:0 var(--gutter);background:rgba(255,255,255,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--hair)}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--serif);font-size:22px;letter-spacing:.01em}
.brand img{width:34px;height:auto}
.menu{display:flex;gap:clamp(18px,2.4vw,38px)}
.menu a{font-size:14px;position:relative;padding:4px 0}
.menu a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.menu a:hover::after,.menu a.is-current::after{transform:scaleX(1);transform-origin:left}
.head-tools{display:flex;align-items:center;gap:22px}
.burger{display:none;width:28px;height:20px;position:relative}
.burger span{position:absolute;left:0;right:0;height:1px;background:var(--ink);top:5px;transition:transform .4s var(--ease),top .4s var(--ease)}
.burger span+span{top:14px}
.burger[aria-expanded="true"] span{top:10px;transform:rotate(45deg)}
.burger[aria-expanded="true"] span+span{transform:rotate(-45deg)}
.mobile-menu{position:fixed;inset:var(--chrome) 0 0 0;background:var(--paper);z-index:980;display:none;flex-direction:column;padding:8vh var(--gutter);gap:4vh}
.mobile-menu.is-open{display:flex}
.mobile-menu a{font-family:var(--serif);font-size:clamp(34px,8vw,56px);line-height:1}

/* ---------- Pages ---------- */
.page{display:none}
.page.is-active{display:block}
.page-head{padding:clamp(40px,8vh,96px) var(--gutter) clamp(24px,4vh,48px);max-width:900px}
.page-head h1{font-size:clamp(44px,7vw,96px);font-weight:300}
.page-head p{margin-top:18px;font-size:17px;max-width:60ch;color:var(--ink-2)}
.page-head a{text-decoration:underline;text-underline-offset:3px}

/* ---------- Stage ---------- */
.stage{position:relative;--row:calc((100vh - var(--chrome) - 4*var(--gap)) / 3.3 * 1.6)}
.stage-grid{display:grid;grid-template-columns:40px minmax(0,2fr) minmax(0,5fr);grid-template-rows:calc(var(--row) + 72px) var(--row) var(--row);gap:var(--gap);padding:var(--gap) var(--gutter);position:relative}
.side-col{grid-column:1;grid-row:1/span 3;display:flex;flex-direction:column;justify-content:space-between;align-items:center}
.side-motto{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--serif);font-style:italic;font-size:18px;color:var(--ink-2)}
.side-count{font-size:12px;display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--ink-2)}

.highlight{grid-column:2;grid-row:1;display:flex;flex-direction:column;justify-content:space-between;z-index:4;pointer-events:none}
.highlight h2{font-size:clamp(28px,3vw,42px);font-weight:300}
.highlight-media{margin:0;height:var(--row);width:calc(100% + var(--gap));position:relative;overflow:hidden;pointer-events:auto;will-change:transform}
.highlight-media img{width:100%;height:100%;object-fit:cover}
.highlight-media figcaption{position:absolute;left:0;bottom:0;background:var(--paper);padding:6px 10px 6px 0;font-size:12px;max-width:85%}

.iobject{grid-column:2;grid-row:1;align-self:stretch;height:auto;width:calc(100% + var(--gap));position:relative;z-index:1;overflow:hidden;opacity:0;cursor:crosshair;user-select:none;-webkit-user-select:none;touch-action:none;outline:1px solid var(--hair);outline-offset:-1px;background:var(--paper)}
.iobject svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.iobject .ground{stroke:var(--hair);stroke-width:2}
.iobject .shadow{fill:#000;opacity:.16}
.iobject .stand{fill:none;stroke:#2a2a2a;stroke-width:7;stroke-linecap:round}
.iobject .stand-bar{fill:none;stroke:#2a2a2a;stroke-width:5;stroke-linecap:round}
.iobject .boss{fill:#e4e1da;stroke:#cfcbc1;stroke-width:3}
.iobject .tring{fill:var(--paper);stroke:var(--ink);stroke-width:4}
.iobject .tring.alt{fill:#ececec}
.iobject .tring.bull{fill:var(--ink)}
.iobject .ring-label{font-family:var(--serif);font-size:26px;text-anchor:middle;fill:var(--ink)}
.iobject .bull-label{fill:var(--paper);font-size:24px}
#bowLimb{fill:url(#limbShade);stroke:#000;stroke-width:.8;stroke-linejoin:round}
#bowRidge{fill:none;stroke:#7a7a7a;stroke-width:1.1;stroke-linecap:round;opacity:.85}
#bowString{fill:none;stroke:#2b2b2b;stroke-width:1.8;stroke-linejoin:round}
#bowServing{fill:none;stroke:#111;stroke-width:4.4;stroke-linecap:round}
.grip-wrap{fill:#2e2e2e}
.grip-lines{stroke:#0c0c0c;stroke-width:1.2}
.iobject .nock{fill:#2a2a2a}
.iobject .shaft{fill:url(#shaftShade)}
.iobject .shaft-hi{stroke:#9a9a9a;stroke-width:.9;opacity:.8}
.iobject .vane-top{fill:#0e0e0e}
.iobject .vane-bottom{fill:#5f5f5f}
.iobject .vane-mid{fill:#a3a3a3}
.iobject .crest{fill:#8d8d8d}
.iobject .ferrule{fill:#3b3b3b}
.iobject .head{fill:#000}
.iobject .head-hi{stroke:#8a8a8a;stroke-width:.8}
.bow-power{position:absolute;left:50%;top:14px;width:160px;height:3px;transform:translateX(-50%);background:var(--hair);z-index:3;opacity:0;transition:opacity .3s}
.iobject.is-drawing .bow-power{opacity:1}
.bow-power i{display:block;height:100%;width:0;background:var(--ink)}
#fpsScene{opacity:0;visibility:hidden;z-index:2}
.fps-sky{fill:var(--paper)}
.fps-floor{fill:url(#fpsFloor)}
.fps-lanes{fill:none;stroke:#000;stroke-width:1;opacity:.05}
.fps-horizon{stroke:var(--hair);stroke-width:2}
#fpsShadow{fill:#000;opacity:.14;filter:url(#softShadow)}
.fps-riser{fill:url(#fpsRiser)}
.fps-grip{fill:#2e2e2e}
.fps-grip-lines{stroke:#0c0c0c;stroke-width:1.4}
.fps-shelf{fill:#1a1a1a}
#fpsString{stroke:#1d1d1d;stroke-width:3;opacity:.85}
#fpsShaft{fill:#171717}
#fpsVaneL{fill:#5f5f5f}#fpsVaneR{fill:#a3a3a3}#fpsVaneT{fill:#0e0e0e}
#fpsNock{fill:#2a2a2a}#fpsNockCore{fill:#f1ede4}
.hit-nock{fill:#2a2a2a}.hit-core{fill:#f1ede4}
/* the instructions, set large above and below the bow (the scene keeps its own size: the view is cut by the
   width of the box, so a taller box only shows more sky and ground) */
/* the instructions fill the empty quarters of the scene: the bow stands at the left, the arrow runs across the
   middle, so the words sit in the space to the right of the bow - above the arrow and below it - set big and bold */
/* the bow stands diagonally from the lower left, the arrow pointing up and to the right; the words take the
   two corners it leaves free - the upper left and the lower right - set big and bold */
.bow-say{position:absolute;z-index:4;margin:0;display:grid;pointer-events:none;transition:opacity .4s;font-family:var(--serif);font-style:italic;font-weight:700;font-size:clamp(30px,3.8vw,60px);line-height:.95;color:var(--ink);white-space:normal;text-wrap:balance}
.bow-say-top{left:5%;top:4%;width:58%;height:38%;align-content:start;justify-items:start;text-align:left}
.bow-say-bottom{right:5%;bottom:5%;width:56%;height:36%;align-content:end;justify-items:end;text-align:right}
.bow-hint{position:absolute;z-index:4;left:12px;bottom:10px;font-size:12px;color:var(--ink-2);pointer-events:none;transition:opacity .4s}
.iobject.is-drawing .bow-hint,.iobject.is-flying .bow-hint,.iobject.has-result .bow-hint,.iobject.is-drawing .bow-say,.iobject.is-flying .bow-say,.iobject.has-result .bow-say,.iobject.is-expanded .bow-say{opacity:0}
.bow-result{position:absolute;z-index:5;left:50%;bottom:8%;transform:translateX(-50%);text-align:center;background:var(--paper);padding:18px 26px 20px;border:1px solid var(--ink);min-width:260px}
.bow-result[hidden]{display:none}
.bow-pct{font-family:var(--serif);font-size:clamp(40px,5vw,72px);line-height:1;font-weight:300}
.bow-msg{font-size:14px;color:var(--ink-2);margin:6px 0 14px}
.bow-actions{display:flex;gap:8px;justify-content:center}
.bow-actions [hidden]{display:none}
.bow-close{position:absolute;z-index:5;right:12px;top:8px;font-size:28px;line-height:1;width:40px;height:40px;opacity:0;pointer-events:none;transition:opacity .4s}
.iobject.is-expanded{cursor:default}
.iobject.is-expanded .bow-close{opacity:1;pointer-events:auto}
.iobject.is-expanded{outline:0}

/* header mark: the logo splits into its pieces so the F can swing open on the stem, and echoes trail the cursor */
.brand-mark{position:relative;display:block;width:34px;height:28px;perspective:300px}
.brand-glyph{position:absolute;inset:0;z-index:2}
.brand-glyph img{position:absolute;top:0;height:100%;width:auto}
.brand-glyph .g-f{left:0;width:42.06%;transform-origin:100% 50%;transition:transform .8s var(--ease-door)}
.brand-glyph .g-l{left:42.06%;width:57.94%}
.brand:hover .brand-glyph .g-f{transform:rotateY(-62deg)}
.brand-echo{position:absolute;inset:0;z-index:1}
.brand-echo img{position:absolute;left:0;top:0;height:100%;width:auto;opacity:.14}

.slider-area{grid-column:3;grid-row:1;position:relative;display:grid;grid-template-columns:36px 1fr;gap:var(--gap);min-width:0;z-index:2;padding-left:var(--gap)}
.slide-rail{position:relative;overflow:hidden;border-right:1px solid var(--hair)}
.slide-rail p{position:absolute;left:0;top:0;height:100%;width:100%;writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--serif);font-size:clamp(18px,1.7vw,24px);font-style:italic;white-space:nowrap;display:flex;align-items:center;justify-content:flex-end;padding-bottom:6px}
.slider{position:relative;overflow:hidden;min-width:0}
.doors{display:flex;gap:var(--gap);height:100%;will-change:transform}
.door{position:relative;flex:0 0 22%;height:100%;perspective:1400px;overflow:hidden;transition:flex-basis 1.1s var(--ease-door);cursor:pointer;background:var(--paper)}
.door.is-open{flex-basis:calc(78% - var(--gap))}
.room{position:absolute;inset:0;overflow:hidden;background:#111}
.room>img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 1.6s var(--ease)}
.door.is-open .room>img{transform:scale(1)}
.room-info{position:absolute;left:0;right:0;bottom:0;padding:clamp(14px,2vw,28px);color:var(--paper);background:linear-gradient(transparent,rgba(0,0,0,.55));opacity:0;transform:translateY(12px);transition:opacity .7s .5s var(--ease),transform .7s .5s var(--ease)}
.door.is-open .room-info{opacity:1;transform:none}
.room-info h3{font-size:clamp(26px,2.6vw,40px);font-weight:300}
.room-info p{font-size:13px;margin:6px 0 12px;opacity:.9}
.room-info .link-line{color:var(--paper)}
.door-layered .room{background:#dce7ec}
.door-layered .room>img.layered{position:relative;z-index:2;object-position:50% 40%}
.sky-text{position:absolute;left:0;right:0;top:0;height:48%;z-index:1;display:flex;align-items:center;gap:1.2em;white-space:nowrap;font-family:var(--serif);font-style:italic;font-size:clamp(40px,5vw,84px);font-weight:300;color:var(--ink);will-change:transform;overflow:visible}
.sky-text span{padding-right:.4em}
.leaf{position:absolute;top:0;bottom:0;width:50.6%;background:var(--paper);border:1px solid var(--ink);transition:transform 1.2s var(--ease-door);backface-visibility:hidden;z-index:3;overflow:hidden}
.leaf-l{left:0;transform-origin:left center}
.leaf-r{right:0;transform-origin:right center}
/* the monogram spans both leaves: each shows its half, so the mark splits down the seam as the doors open */
.leaf img{position:absolute;top:50%;width:150%;max-width:none;height:auto;max-height:64%;object-fit:contain;transform:translateY(-50%)}
.leaf-l img{right:-75%}
.leaf-r img{left:-75%}
.door.is-open .leaf-l{transform:rotateY(-112deg)}
.door.is-open .leaf-r{transform:rotateY(112deg)}
.door:not(.is-open):hover .leaf-l{transform:rotateY(-22deg)}
.door:not(.is-open):hover .leaf-r{transform:rotateY(22deg)}
.slider-nav{position:absolute;right:0;top:0;display:flex;gap:2px;z-index:5}
.slider-nav button{width:40px;height:40px;background:var(--paper);border:1px solid var(--ink);font-size:16px;transition:background .3s,color .3s}
.slider-nav button:hover{background:var(--ink);color:var(--paper)}

.veil{position:absolute;inset:0;z-index:20;background:#000;overflow:hidden;transform-origin:left center;will-change:transform,opacity}
.veil video{width:100%;height:100%;object-fit:cover}
.veil{cursor:zoom-in}
.veil.is-expanded{cursor:zoom-out}
.veil.is-expanded video{object-fit:contain}
.veil-tools{position:absolute;right:16px;bottom:16px;display:flex;gap:8px}
.veil-btn{color:var(--paper);font-size:13px;padding:8px 14px;border:1px solid rgba(255,255,255,.7);transition:background .3s;background:rgba(0,0,0,.25)}
.veil-btn:hover{background:rgba(255,255,255,.18)}
.veil-hint{position:absolute;left:16px;bottom:18px;color:rgba(255,255,255,.75);font-size:13px;pointer-events:none;transition:opacity .4s}
.veil.is-expanded .veil-hint{opacity:0}
.veil-close{position:absolute;right:16px;top:12px;color:var(--paper);font-size:30px;line-height:1;width:40px;height:40px;opacity:0;pointer-events:none;transition:opacity .4s}
.veil.is-expanded .veil-close{opacity:1;pointer-events:auto}
.veil-progress{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--paper)}
.veil.is-gone{display:none}

.promo{position:relative;overflow:hidden;background:#eee}
.promo img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover}
.promo-right{grid-column:3;grid-row:2;z-index:2}
/* the statue's slot: the right-hand cell the promotion leaves empty; the film waits outside its left edge,
   under the highlight, and slides in from there */
.promo-film{grid-column:3;grid-row:2;position:relative;z-index:1;overflow:hidden;pointer-events:none}
/* the film carries its own transparency (picture | matte, side by side) and is drawn through a canvas, so the
   statue can stand in front of the mosaic that fades in behind it once it has played */
.promo-film video{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.film-figure{position:absolute;left:0;top:0;height:100%;aspect-ratio:854/720;transform:translateX(-100%)}
.film-figure canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* a strong white light behind the statue, so it stands clear of the mosaic */
.film-halo{position:absolute;inset:-16% -34% -12%;background:radial-gradient(ellipse at 50% 58%,rgba(255,255,255,1) 0%,rgba(255,255,255,.96) 30%,rgba(255,255,255,.7) 50%,rgba(255,255,255,0) 72%);opacity:0;pointer-events:none}
.film-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;opacity:0}
/* the words are cut out of the mosaic: each letter is filled with the same picture at a larger scale, so the
   tesserae read big inside the type against the picture around it; a hairline and a shadow lift the edges */
.film-text{position:absolute;left:clamp(16px,3.5%,40px);top:50%;transform:translateY(-50%);width:min(58%,560px);opacity:0;pointer-events:none;z-index:1}
.film-text p{margin:0}
.film-kicker,.film-title{background-image:url(../assets/img/promo-toronto.webp);background-size:260% auto;background-position:42% 88%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:1.2px rgba(255,255,255,.85);filter:drop-shadow(0 1px 2px rgba(0,0,0,.6)) drop-shadow(0 10px 26px rgba(0,0,0,.45))}
.film-kicker{font-size:clamp(11px,.95vw,15px);letter-spacing:.24em;text-transform:uppercase;font-weight:600;margin-bottom:.7em!important}
.film-title{font-family:var(--serif);font-weight:700;font-size:clamp(36px,4.4vw,70px);line-height:.95}
.film-sub{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(15px,1.25vw,20px);line-height:1.3;margin-top:.8em!important;max-width:34ch;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.7),0 6px 18px rgba(0,0,0,.5)}
.film-sub em{font-style:normal;font-weight:700}
.film-figure{z-index:2}
.promo-left{grid-column:2;grid-row:2;z-index:3;will-change:transform;width:calc(100% + var(--gap))}
.rest{align-self:end;font-family:var(--serif);font-style:italic;font-size:clamp(18px,1.6vw,24px);color:var(--ink-2)}
.rest-left{grid-column:2;grid-row:3}
.rest-right{grid-column:3;grid-row:3;justify-self:end;padding-right:4px}
/* The description's box is made to coincide with the pushed-down promotion (which lands one row below
   itself, a gap higher than the grid row), so the card is centred on the picture beside it with the same
   room above and below; the card is glass over the picture that is pushed under it. */
.description{grid-column:3;grid-row:3;z-index:4;display:flex;align-items:center;margin-top:calc(-1 * var(--gap));height:var(--row);padding:0 clamp(16px,3vw,48px) 0 var(--gap);will-change:transform}
.desc-card{display:flex;flex-direction:column;gap:10px;max-width:62ch;padding:clamp(20px,2.6vh,32px) clamp(22px,2.6vw,40px) clamp(22px,2.8vh,34px);background:rgba(255,255,255,.76);-webkit-backdrop-filter:blur(14px) saturate(1.15);backdrop-filter:blur(14px) saturate(1.15);border:1px solid rgba(255,255,255,.7);box-shadow:0 18px 50px rgba(0,0,0,.12)}
.description h3{font-size:clamp(26px,2.6vw,38px);font-weight:300}
.description p{font-size:15px;color:var(--ink-2)}

/* ---------- Sections ---------- */
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding:clamp(48px,9vh,110px) var(--gutter) clamp(20px,3vh,36px);border-bottom:1px solid var(--ink);margin:0 var(--gutter) clamp(28px,4vh,48px);padding-left:0;padding-right:0}
.section-head h2{font-size:clamp(36px,4.6vw,64px);font-weight:300}
.section-head p{font-size:15px;color:var(--ink-2);text-align:right}

/* ---------- Tickets ---------- */
.tickets{padding-bottom:clamp(20px,4vh,48px)}
.ticket{position:relative;display:grid;grid-template-columns:minmax(220px,30%) 28px 1fr;margin:0 var(--gutter) 36px;border:1px solid var(--ink);min-height:240px;background:var(--paper)}
.stub{position:relative;transform-style:preserve-3d;z-index:2;background:var(--paper)}
.stub-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:var(--paper);padding:clamp(16px,2vw,28px)}
.stub-front{display:grid;grid-template-rows:auto auto 1fr auto;gap:6px}
.stub-event{font-family:var(--serif);font-size:clamp(22px,2vw,30px);line-height:1.05}
.stub-admit{font-size:12px;color:var(--ink-2)}
.stub-date{font-family:var(--serif);font-size:clamp(20px,1.8vw,26px);line-height:1.05;align-self:end}
.join{justify-self:start;background:var(--ink);color:var(--paper);padding:10px 22px;font-size:14px;border:1px solid var(--ink);transition:background .3s,color .3s;margin-top:10px}
.join:hover{background:var(--paper);color:var(--ink)}
.stub-serial{position:absolute;right:14px;top:14px;font-size:11px;color:var(--ink-2)}
.stub-back{transform:rotateY(180deg);border:1px solid var(--ink);display:flex;flex-direction:column;gap:14px;overflow:auto}
.stub-back h3{font-size:clamp(30px,3vw,44px);font-weight:300;margin-top:8px;max-width:9ch}
.stub-msg{font-size:15px;color:var(--ink-2);max-width:40ch}
.stub-mark{position:absolute;right:22px;top:22px;width:54px;height:auto;opacity:.9}
.stub-close{position:absolute;left:14px;top:10px;font-size:24px;line-height:1;width:32px;height:32px}
.stub-question label{display:block;font-size:13px;margin-bottom:6px}
.stub-question input,.stub-question select,.stub-question textarea{width:100%;font:inherit;font-size:14px;padding:10px 12px;border:1px solid var(--ink);background:var(--paper);color:var(--ink);border-radius:0}
.stub-question .choices{display:flex;flex-wrap:wrap;gap:8px}
.stub-question .choices label{border:1px solid var(--ink);padding:8px 12px;margin:0;cursor:pointer;font-size:13px}
.stub-question .choices input{position:absolute;opacity:0;width:0;height:0}
.stub-question .choices label:has(input:checked){background:var(--ink);color:var(--paper)}
.stub-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.stub-paid{display:none;font-size:14px;padding:10px 0;border-top:1px solid var(--hair)}
.stub.is-paid .stub-paid{display:block}
.stub.is-paid .act-pay{display:none}
.perf{position:relative;background:repeating-linear-gradient(to bottom,var(--ink) 0 7px,transparent 7px 14px) 50% 0/1px 100% no-repeat}
/* the notches: a full circle centred on the ticket's edge, with the half outside the ticket clipped away
   (a transparent border side would be painted as a wedge by WebKit and leave the circle looking cut) */
.perf::before,.perf::after{content:"";position:absolute;left:50%;width:22px;height:22px;border-radius:50%;background:var(--paper);border:1px solid var(--ink);transform:translateX(-50%)}
.perf::before{top:-12px;clip-path:inset(11px 0 0 0)}
.perf::after{bottom:-12px;clip-path:inset(0 0 11px 0)}
.tbody{position:relative;display:grid;grid-template-columns:1fr auto;gap:var(--gap);padding:clamp(16px,2vw,28px);align-items:end}
.tbody-main h3{font-size:clamp(38px,5.2vw,86px);font-weight:300;line-height:.95}
.tbody-venue{margin-top:10px;font-size:15px;color:var(--ink-2)}
.tbody-meta{display:grid;grid-template-columns:repeat(2,auto);gap:10px 28px;margin:0;align-self:start}
.tbody-meta dt{font-size:12px;color:var(--ink-2)}
.tbody-meta dd{margin:0;font-size:15px}
.barcode{grid-column:2;height:44px;width:160px;justify-self:end;background:repeating-linear-gradient(to right,var(--ink) 0 2px,transparent 2px 4px,var(--ink) 4px 5px,transparent 5px 8px,var(--ink) 8px 11px,transparent 11px 13px)}
/* while the stub is away the ghost takes its exact cell, so the ticket keeps its shape and the stub has a
   place of the right size to come back to */
.ticket-ghost{display:none;position:relative;grid-column:1;grid-row:1;border-right:1px dashed var(--ink);align-items:center;justify-content:center;padding:20px;text-align:center;font-family:var(--serif);font-style:italic;font-size:20px;color:var(--ink-2)}
.ticket.is-torn .ticket-ghost{display:flex}
.ticket.is-torn .perf{opacity:0}
.stub.is-floating{position:fixed;z-index:1200;margin:0;box-shadow:0 30px 80px rgba(0,0,0,.25)}

/* ---------- Instagram wall ---------- */
/* The wall is a rail: four frames side by side, drifting slowly and continuously to the right at the pace of
   the visitors walking below (the script sets the speed from the film's displayed width). The row is doubled
   so the loop never shows a seam. */
.wall{--cols:4;position:relative;overflow:hidden;margin:0 var(--gutter)}
.wall-track{display:flex;align-items:center;gap:var(--gap);width:max-content;will-change:transform;padding:2% 0 3%}
.wall-track .framed{flex:0 0 auto;width:calc((var(--wall-w,100vw) - (var(--cols) - 1) * var(--gap)) / var(--cols));margin:0}
.framed{position:relative;display:block;aspect-ratio:var(--ratio);transform-style:preserve-3d;will-change:transform}
.framed .frame{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;filter:drop-shadow(0 18px 24px rgba(0,0,0,.18))}
.framed .post{position:absolute;left:var(--l);top:var(--t);width:calc(100% - var(--l) - var(--r));height:calc(100% - var(--t) - var(--b));object-fit:cover;transition:transform 1.4s var(--ease)}
.framed:hover .post{transform:scale(1.04)}
.post-cap{position:absolute;left:0;right:0;bottom:-28px;font-size:12px;color:var(--ink-2);opacity:0;transform:translateY(-4px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.framed:hover .post-cap{opacity:1;transform:none}

/* ---------- Crowd in front of the wall ---------- */
/* The footage is people on black; the black is keyed out live (WebGL) so the visitors stand on the page
   in front of the frames. The canvas is right-aligned with no gutter, so its right edge is the screen edge. */
.crowd{position:relative;display:flex;justify-content:flex-end;margin-top:calc(-0.42 * 66vw * 9 / 16);pointer-events:none;z-index:2}
.crowd video{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.crowd canvas{display:block;width:min(100%,66vw);height:auto;aspect-ratio:16/9;margin-left:auto;margin-right:0}
.crowd.no-key video{position:static;width:min(100%,66vw);height:auto;opacity:1;margin-left:auto;mix-blend-mode:multiply}
.crowd.no-key canvas{display:none}
@media (max-width:860px){.crowd{margin-top:calc(-0.3 * 100vw * 9 / 16)}.crowd canvas,.crowd.no-key video{width:100%}}

/* ---------- Marquee ---------- */
.marquee{margin-top:0;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);overflow:hidden;padding:14px 0}
.marquee-track{display:flex;align-items:center;gap:40px;white-space:nowrap;width:max-content;will-change:transform}
.marquee-track span{font-family:var(--serif);font-size:clamp(34px,4.6vw,66px);font-weight:300;line-height:1}
.marquee-track img{height:clamp(22px,2.6vw,38px);width:auto}

/* ---------- About ---------- */
.about{height:1050vh;position:relative}
.about-pin{position:sticky;top:var(--chrome);height:calc(100vh - var(--chrome));overflow:hidden;padding:0 var(--gutter);position:sticky}
.door-sign{position:absolute;left:50%;top:clamp(14px,2.4vh,28px);height:clamp(80px,14vh,150px);width:40vw;transform:translateX(-50%);pointer-events:none}
.door-sign>div{position:absolute;inset:0}
.door-sign .door-b{transform:scaleX(-1)}
.door-sign .glyph{position:absolute;top:0;left:50%;height:100%;aspect-ratio:554/458;transform:translateX(-50%);perspective:420px;--fw:42.06%}
.door-sign .glyph img{position:absolute;top:0;height:100%;width:auto;backface-visibility:visible}
.door-sign .g-f{left:0;width:var(--fw);transform-origin:100% 50%}
.door-sign .g-l{left:var(--fw);width:calc(100% - var(--fw))}
.part-index{position:absolute;left:var(--gutter);top:clamp(14px,2.4vh,28px);margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;font-family:var(--serif);font-size:15px;color:var(--hair)}
.part-index li{transition:color .4s}
.part-index li.is-on{color:var(--ink)}
/* Each part is one plate: a framed spread with the words on the left leaf and the picture on the right,
   a hairline between them - so text and image belong to one object instead of drifting apart. The picture
   leaf is exactly as wide as the picture (--pic-w, set by the script from the letter-grid), and the picture
   sits flush in the plate's bottom-right corner, where its letters are assembled. */
.part{--pic-w:46%;--pad:clamp(20px,3vw,44px);--text-w:clamp(420px,36vw,560px);position:absolute;left:50%;transform:translateX(-50%);width:min(calc(100% - 2 * var(--gutter)),calc(var(--pic-w) + var(--text-w)));top:calc(clamp(80px,14vh,150px) + clamp(14px,2.4vh,28px) + 3vh);bottom:3vh;display:grid;grid-template-columns:minmax(0,1fr) var(--pic-w);grid-template-rows:auto auto 1fr;column-gap:0;border:1px solid var(--ink);background:var(--paper);opacity:0;visibility:hidden}
.part::after{content:"";position:absolute;top:0;bottom:0;right:var(--pic-w);width:1px;background:var(--hair);pointer-events:none}
.part header{grid-column:1;padding:var(--pad) var(--pad) 0}
.part h2{font-size:clamp(34px,4.2vw,60px);font-weight:300}
.letters{grid-column:1;margin:clamp(14px,2.4vh,28px) var(--pad) 0;font-family:var(--serif);font-size:clamp(18px,1.55vw,24px);line-height:1.38;max-width:none;align-self:start}
.letters .w{display:inline-block;white-space:nowrap}
.letters .l{display:inline-block;position:relative;z-index:3}
.part-media{grid-column:2;grid-row:1/span 3;margin:0;position:relative;align-self:end;justify-self:stretch;width:auto;height:auto;max-height:100%;padding:var(--pad);box-sizing:border-box}
.part-media>img{width:100%;height:100%;object-fit:contain;object-position:50% 100%;will-change:opacity,transform}
.ascii-target{position:absolute;right:0;bottom:0;z-index:2;pointer-events:none}
.part-media.at-picture{position:absolute;right:0;bottom:0;margin:0;padding:0;max-height:none;justify-self:auto;align-self:auto}
.part-media.at-picture>img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.ascii-target canvas{display:none}
.about-canvas{position:absolute;left:0;top:0;pointer-events:none;z-index:2}
.part-media.partners-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px 26px;align-content:center;align-self:stretch;width:auto;height:auto;max-height:100%}
.partners-grid .partner{display:block;position:relative;will-change:transform}
.partners-grid img{width:100%;height:68px;object-fit:contain;filter:grayscale(1);transition:filter .5s,transform .5s var(--ease)}
.partners-grid .partner:hover img{filter:none;transform:scale(1.06)}
/* the flow of the business (part IV): its own column between the paragraph and the painting; a sequence, so arrows */
.part-flow{--text-w:clamp(640px,54vw,860px);grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) var(--pic-w)}
.part-flow header{grid-column:1/span 2}
.part-flow::after{right:var(--pic-w)}
.flow{grid-column:2;grid-row:2;list-style:none;margin:clamp(14px,2.4vh,28px) var(--pad) 0 0;padding:0;font-family:var(--serif);font-size:clamp(17px,1.4vw,23px);line-height:1.15;display:flex;flex-direction:column;gap:2px;align-self:start}
.flow li{position:relative}
.flow li+li::before{content:"↓";display:block;font-size:12px;line-height:1;color:var(--ink-2);margin:2px 0 3px 1px;font-family:var(--sans)}
/* part V: the layered figure over its moving sky, filling the picture leaf of the plate */
.part-media.scene{align-self:stretch;justify-self:stretch;width:auto;height:auto;max-height:none;padding:0;overflow:hidden;background:#0b0b0b}
.scene-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%}
.scene .layered{position:absolute;left:50%;bottom:0;height:100%;width:auto;max-width:100%;transform:translateX(-50%);object-fit:contain;object-position:50% 100%;z-index:2}
.parasol{width:min(100%,52vh);justify-self:center;align-self:center;padding:var(--pad)}
.parasol .layered{position:relative;z-index:2}
.ring{position:absolute;left:50%;top:36.5%;width:86%;aspect-ratio:1;transform:translate(-50%,-50%);z-index:1;animation:spin 48s linear infinite}
.ring svg{position:absolute;inset:0;width:100%;height:100%;font-family:var(--serif);font-style:italic;font-size:15px;fill:var(--ink);letter-spacing:.08em;font-size:17px}
.ring img{position:absolute;left:50%;top:50%;width:40%;height:auto;transform:translate(-50%,-50%);animation:spin 48s linear infinite reverse}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.part-cta{grid-column:1;align-self:end;justify-self:start;margin:0 0 var(--pad) var(--pad)}
.about.is-formed .letters{pointer-events:none}

/* ---------- Footer ---------- */
.site-foot{display:grid;grid-template-columns:1.2fr 1fr 1.4fr;gap:var(--gap);padding:clamp(48px,8vh,96px) var(--gutter) 32px;border-top:1px solid var(--ink);margin-top:clamp(60px,10vh,120px);align-items:start}
.foot-brand p{font-family:var(--serif);font-size:26px;margin-top:14px}
.foot-small{font-family:var(--sans)!important;font-size:13px!important;color:var(--ink-2);margin-top:6px!important}
.foot-nav{display:flex;flex-direction:column;gap:8px}
.foot-nav a{font-size:15px}
.foot-news label{display:block;font-family:var(--serif);font-size:22px;margin-bottom:12px}
.field-row{display:flex;border:1px solid var(--ink)}
.field-row input{flex:1;border:0;padding:10px 12px;font:inherit;font-size:14px;min-width:0;background:var(--paper);color:var(--ink)}
.field-row .btn-solid{border:0;border-left:1px solid var(--ink)}
.foot-done{display:none;margin-top:10px;font-size:14px}
.foot-news.is-done .field-row{display:none}
.foot-news.is-done .foot-done{display:block}
.foot-copy{grid-column:1/-1;font-size:12px;color:var(--ink-2);margin-top:40px}

/* ---------- Secondary pages ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--gap);padding:0 var(--gutter) clamp(60px,10vh,120px)}
.card figure{margin:0;aspect-ratio:4/5;overflow:hidden;background:#eee}
.card figure img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.card:hover figure img{transform:scale(1.04)}
.card h3{font-size:clamp(26px,2.4vw,34px);margin-top:14px;font-weight:300}
.card p{font-size:14px;color:var(--ink-2);margin:6px 0 12px}
.posts-list{display:flex;flex-direction:column;gap:var(--gap);padding:0 var(--gutter) clamp(60px,10vh,120px)}
.jpost{display:grid;grid-template-columns:minmax(200px,32%) 1fr;gap:clamp(20px,4vw,60px);border-top:1px solid var(--ink);padding-top:var(--gap)}
.jpost figure{margin:0;aspect-ratio:4/5;overflow:hidden}
.jpost figure img{width:100%;height:100%;object-fit:cover}
.jpost-date{font-size:13px;color:var(--ink-2)}
.jpost h3{font-size:clamp(30px,3.4vw,52px);font-weight:300;margin:10px 0 14px}
.jpost p+p{max-width:60ch;color:var(--ink-2)}
.jpost .link-line{margin-top:18px}
.contact-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:start;padding:0 var(--gutter) clamp(60px,10vh,120px)}
.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);max-width:900px}
.contact-form label{display:flex;flex-direction:column;gap:6px;font-size:13px}
.contact-form .wide{grid-column:1/-1}
.contact-form input,.contact-form select,.contact-form textarea{font:inherit;font-size:15px;padding:10px 12px;border:1px solid var(--ink);background:var(--paper);color:var(--ink);border-radius:0;resize:vertical}
.contact-form .btn-solid{justify-self:start}
.form-done{display:none;grid-column:1/-1;font-family:var(--serif);font-size:22px}
.contact-form.is-done>*:not(.form-done){display:none}
.contact-form.is-done .form-done{display:block}

/* ---------- Modal ---------- */
.scrim{position:fixed;inset:0;background:rgba(255,255,255,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:1100}
.modal{position:fixed;inset:0;z-index:1150;display:flex;align-items:center;justify-content:center;padding:20px}
.modal[hidden],.scrim[hidden]{display:none}
.modal-card{position:relative;width:min(440px,100%);background:var(--paper);border:1px solid var(--ink);padding:36px 32px 32px}
.modal-close{position:absolute;right:12px;top:8px;font-size:26px;width:36px;height:36px}
.auth-tabs{display:flex;gap:22px;margin-bottom:22px;border-bottom:1px solid var(--hair)}
.auth-tabs button{padding:0 0 10px;font-size:14px;color:var(--ink-2);position:relative}
.auth-tabs button.is-on{color:var(--ink)}
.auth-tabs button.is-on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--ink)}
.auth-form{display:flex;flex-direction:column;gap:14px}
.auth-form h2{font-size:34px;font-weight:300;margin-bottom:6px}
.auth-form label{display:flex;flex-direction:column;gap:6px;font-size:13px}
.auth-form input{font:inherit;font-size:15px;padding:10px 12px;border:1px solid var(--ink);background:var(--paper);color:var(--ink);border-radius:0}
.auth-form .auth-name{display:none}
.auth-form.is-signup .auth-name{display:flex}
.auth-form .btn-solid{margin-top:8px}

/* ---------- Fold transition ---------- */
/* page change: the page dissolves into grains and the next page re-forms out of them */
.dissolve{position:fixed;inset:0;z-index:950;pointer-events:none;background:var(--paper);overflow:hidden}
.dz-layer{position:absolute;inset:0;overflow:hidden;will-change:filter,opacity}
.dz-layer>*{pointer-events:none}
.grains{position:fixed;inset:0;z-index:955;pointer-events:none;width:100%;height:100%;display:block}

/* ---------- Entering through the door ---------- */
.enter{position:fixed;inset:0;z-index:960;pointer-events:none;--veil:0;background:rgba(255,255,255,var(--veil))}
.enter .door-sign{will-change:transform}

/* ---------- Toast ---------- */
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:var(--ink);color:var(--paper);padding:10px 16px;font-size:13px;z-index:1300;opacity:0;transition:opacity .4s var(--ease),transform .4s var(--ease);pointer-events:none}
.toast.is-on{opacity:1;transform:translate(-50%,0)}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .stage-grid{grid-template-columns:28px minmax(0,2fr) minmax(0,4fr)}
  .partners-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:860px){
  .menu{display:none}
  .burger{display:block}
  .brand span{display:none}
  .stage-grid{display:flex;flex-direction:column;height:auto}
  .side-col{display:none}
  .highlight{order:2;min-height:0}
  .highlight-media{height:auto;aspect-ratio:4/3;margin-top:10px;width:100%}
  .iobject{order:3;height:auto;aspect-ratio:3/2;opacity:1;width:100%}
  .bow-result{min-width:0;padding:12px 16px}
  .bow-pct{font-size:36px}
  .slider-area{order:1;height:70vh;grid-template-columns:28px 1fr}
  .door{flex-basis:30%}
  .door.is-open{flex-basis:calc(70% - var(--gap))}
  .promo-right{order:4;aspect-ratio:16/9}
  .promo-left{display:none}
  .promo-film{display:none}
  .rest{display:none}
  .description{order:5;padding:0;max-width:none;margin-top:0;height:auto}
  .desc-card{padding:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;border:0;box-shadow:none;max-width:none}
  .section-head{flex-direction:column;align-items:flex-start;gap:8px}
  .section-head p{text-align:left}
  .ticket{grid-template-columns:1fr;min-height:0}
  .stub{min-height:220px}
  .perf{height:28px;background:repeating-linear-gradient(to right,var(--ink) 0 7px,transparent 7px 14px) 0 50%/100% 1px no-repeat}
  .perf::before,.perf::after{top:50%;transform:translateY(-50%);left:-12px;clip-path:inset(0 0 0 11px)}
  .perf::after{left:auto;right:-12px;clip-path:inset(0 11px 0 0)}
  .tbody{grid-template-columns:1fr}
  .barcode{grid-column:1;justify-self:start}
  .ticket-ghost{min-height:220px;border-right:0;border-bottom:1px dashed var(--ink)}
  .wall{--cols:2}
  .about{height:auto}
  .about-pin{position:static;height:auto;overflow:visible;padding:40px var(--gutter) 0}
  .door-sign{position:relative;left:0;transform:none;width:100%;margin:0 auto 24px}
  .part-index{display:none}
  .part{position:relative;left:auto;right:auto;top:auto;bottom:auto;transform:none;width:auto;opacity:1;visibility:visible;grid-template-columns:1fr;margin-bottom:40px;padding-bottom:var(--pad)}
  .part::after{display:none}
  .part-media{grid-column:1;grid-row:auto;width:auto;height:auto;max-height:60vh;margin-top:12px;justify-self:stretch}
  .part-media>img{height:auto;max-height:60vh;object-position:left top}
  .part-media.scene{height:56vh;margin:12px var(--pad) 0}
  .part-flow{grid-template-columns:1fr}
  .part-flow header{grid-column:1}
  .flow{grid-column:1;grid-row:auto;margin:16px var(--pad) 0}
  .ascii-target{display:none}
  .letters{max-width:none}
  .part-cta{margin-top:20px}
  .site-foot{grid-template-columns:1fr}
  .jpost{grid-template-columns:1fr}
  .contact-form{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;transition-duration:.001s!important}
}

/* ---------- events as tickets ---------- */
.etix-list{padding:0 var(--gutter) clamp(60px,10vh,120px);display:flex;flex-direction:column;gap:clamp(28px,4vh,48px)}
.etix{--etix-ink:var(--ink);--etix-paper:var(--paper);--etix-dim:var(--ink-2);--etix-hair:rgba(0,0,0,.18);--etix-media:clamp(200px,24vw,340px);position:relative;display:grid;grid-template-columns:var(--etix-media) 28px minmax(0,1fr);border:1px solid var(--etix-ink);background:var(--etix-paper);color:var(--etix-ink);cursor:pointer}
.etix.is-dark{--etix-ink:#f4f1ea;--etix-paper:#0b0b0b;--etix-dim:#9a968e;--etix-hair:rgba(244,241,234,.18);border-color:#0b0b0b}
.etix-media{position:relative;aspect-ratio:720/1000;overflow:hidden;background:#000;align-self:stretch}
.etix.is-dark .etix-media{background:#0b0b0b}
.etix-video,.etix-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.etix-video.is-once{object-fit:contain;z-index:1}
.etix-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.etix-body{position:relative;overflow:hidden}
.etix-body>*{position:relative;z-index:1}
.etix-video.etix-blur{position:absolute;inset:0;z-index:0;object-fit:cover;object-position:62% 50%;filter:blur(26px) brightness(.8);transform:scale(1.35);opacity:.75}
.etix-layer{z-index:1;pointer-events:none}
.etix .perf{background:repeating-linear-gradient(to bottom,var(--etix-ink) 0 7px,transparent 7px 14px) 50% 0/1px 100% no-repeat}
.etix .perf::before,.etix .perf::after{background:var(--paper);border-color:var(--etix-ink)}
.etix.is-dark .perf::before,.etix.is-dark .perf::after{border-color:#0b0b0b}
.etix-body{display:flex;flex-direction:column;padding:clamp(18px,2.4vw,34px);min-width:0}
.etix-top{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;color:var(--etix-dim);letter-spacing:.04em}
.etix-title{font-size:clamp(36px,4.6vw,76px);font-weight:300;line-height:.98;margin-top:18px}
.etix-lede{margin-top:14px;font-size:16px;color:var(--etix-dim);max-width:56ch}
.etix-meta{display:grid;grid-template-columns:repeat(4,auto);justify-content:start;gap:10px 36px;margin:26px 0 0}
.etix-meta dt{font-size:12px;color:var(--etix-dim)}
.etix-meta dd{margin:2px 0 0;font-size:15px}
.etix-foot{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-top:auto;padding-top:28px}
.etix .barcode{grid-column:auto;width:140px;height:40px;background:repeating-linear-gradient(to right,var(--etix-ink) 0 2px,transparent 2px 4px,var(--etix-ink) 4px 5px,transparent 5px 8px,var(--etix-ink) 8px 11px,transparent 11px 13px)}
.etix-toggle{display:inline-flex;align-items:center;gap:12px;font-size:14px;color:var(--etix-ink);padding-bottom:2px;border-bottom:1px solid var(--etix-ink)}
.etix-toggle i{position:relative;width:12px;height:12px;display:inline-block}
.etix-toggle i::before,.etix-toggle i::after{content:"";position:absolute;background:currentColor;left:0;top:5.5px;width:12px;height:1px;transition:transform .5s var(--ease)}
.etix-toggle i::after{transform:rotate(90deg)}
.etix.is-open .etix-toggle i::after{transform:rotate(0)}
.etix .when-open{display:none}.etix.is-open .when-open{display:inline}.etix.is-open .when-closed{display:none}
.etix-more{grid-column:1/-1;overflow:hidden}
.etix-more[hidden]{display:none}
.etix-more-inner{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(24px,3vw,56px);padding:clamp(20px,2.6vw,40px);border-top:1px dashed var(--etix-ink);cursor:auto}
.etix-story h3{font-size:clamp(26px,2.4vw,34px);font-weight:300;margin-bottom:14px}
.etix-story p{font-size:16px;line-height:1.6;max-width:60ch}
.etix-story p+p{margin-top:14px}
.etix-details{margin:0;display:grid;gap:12px;align-content:start}
.etix-details div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;padding-bottom:12px;border-bottom:1px solid var(--etix-hair)}
.etix-details dt{font-size:12px;color:var(--etix-dim);padding-top:3px}
.etix-details dd{margin:0;font-size:15px;line-height:1.5}
.etix-gallery{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.etix-gallery figure{margin:0;aspect-ratio:4/3;overflow:hidden;background:#111}
.etix-gallery img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.4s var(--ease)}
.etix-gallery figure:hover img{transform:scale(1.04)}
.etix-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.etix.is-dark .btn-solid{background:var(--etix-ink);color:var(--etix-paper);border-color:var(--etix-ink)}
.etix.is-dark .btn-solid:hover{background:transparent;color:var(--etix-ink)}
.etix.is-dark .btn-line{background:transparent;color:var(--etix-ink);border-color:var(--etix-ink)}
.etix.is-dark .btn-line:hover{background:var(--etix-ink);color:var(--etix-paper)}
.etix.is-open{cursor:auto}
.etix{transition:opacity .6s var(--ease)}
.tbody-more{margin-top:14px}
@media (max-width:900px){
  .etix{grid-template-columns:1fr}
  .etix .perf{display:none}
  .etix-media{aspect-ratio:4/3}
  .etix-meta{grid-template-columns:repeat(2,auto)}
  .etix-more-inner{grid-template-columns:1fr}
  .etix-gallery{grid-template-columns:1fr 1fr}
}

/* the clouds fill the whole street sky; the sunset is fitted to the parasol so the sun hangs inside it */
#ev-lake .etix-video{height:72%}

.auth-error{font-size:13px;color:#8a1c1c;margin:-6px 0 4px}
.auth-error[hidden]{display:none}
.auth-test{font-size:12.5px;color:var(--ink-2);margin-top:14px;padding-top:12px;border-top:1px solid var(--hair);display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center}
.auth-test code{font-family:var(--mono,ui-monospace,monospace);font-size:12px;background:#f3f3f3;padding:2px 6px}
.auth-test .link-line{font-size:12.5px;margin-left:auto}
.auth-form.is-signup .auth-test{display:none}

/* ---------- signed-in header: snail (notifications), hare (events), account menu ---------- */
.hud{position:relative;display:flex;align-items:center;gap:16px}
.hud-ic{position:relative;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;color:var(--ink);border-radius:50%;transition:background .3s var(--ease)}
.hud-ic:hover,.hud-ic[aria-expanded="true"]{background:#f1f1f1}
.hud-ic[hidden]{display:none}
.hud-ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.hud-dot{position:absolute;right:5px;top:5px;width:7px;height:7px;border-radius:50%;background:#b4231c;border:1.5px solid var(--paper)}
.hud-dot[hidden]{display:none}
#authBtn[aria-expanded="true"]::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--ink)}
.hud-pop{position:absolute;right:0;top:calc(100% + 14px);width:min(340px,calc(100vw - 2*var(--gutter)));background:var(--paper);border:1px solid var(--ink);padding:16px 18px 14px;z-index:5;box-shadow:0 18px 50px rgba(0,0,0,.12);transform-origin:top right}
.hud-pop[hidden]{display:none}
.hud-pop-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px}
.hud-pop h3{font-family:var(--serif);font-size:24px;font-weight:300}
.hud-pop .link-line{font-size:12.5px}
.hud-sub{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin:16px 0 6px}
.hud-list{list-style:none;margin:0;padding:0}
.hud-list li{border-top:1px solid var(--hair)}
.hud-list li:first-child{border-top:0}
.hud-list li>*{display:flex;flex-direction:column;gap:2px;padding:10px 0;width:100%;text-align:left}
.hud-list span{font-size:14px}
.hud-list small{font-size:12px;color:var(--ink-2)}
.hud-list li.is-unread span{font-weight:600}
.hud-list li.is-unread span::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#b4231c;margin-right:8px;vertical-align:middle}
.hud-list-small span{font-size:13.5px}
.hud-empty{font-size:13.5px;color:var(--ink-2);padding:8px 0}
.hud-empty[hidden]{display:none}
.hud-menu{width:240px;padding:10px 0}
.hud-who{font-size:12px;color:var(--ink-2);padding:6px 18px 10px;border-bottom:1px solid var(--hair);margin-bottom:6px}
.hud-menu button{display:block;width:100%;text-align:left;padding:10px 18px;font-size:14px}
.hud-menu button:hover{background:#f3f3f3}
.hud-menu button[data-act="signout"]{border-top:1px solid var(--hair);margin-top:6px;color:var(--ink-2)}
.modal-wide{width:min(560px,100%)}
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.auth-form select{font:inherit;font-size:15px;padding:10px 12px;border:1px solid var(--ink);background:var(--paper);color:var(--ink);border-radius:0}
.settings-toggles{border:0;padding:0;margin:6px 0 0;display:flex;flex-direction:column;gap:10px}
.settings-toggles legend{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin-bottom:10px}
.toggle{flex-direction:row!important;align-items:center;gap:12px;font-size:14px!important;cursor:pointer}
.toggle input{position:absolute;opacity:0;width:0;height:0}
.toggle span{width:34px;height:20px;border:1px solid var(--ink);position:relative;flex:none;transition:background .3s var(--ease)}
.toggle span::after{content:"";position:absolute;left:2px;top:2px;width:14px;height:14px;background:var(--ink);transition:transform .3s var(--ease)}
.toggle input:checked+span{background:var(--ink)}
.toggle input:checked+span::after{background:var(--paper);transform:translateX(14px)}
.settings-actions{display:flex;gap:10px;margin-top:10px}
@media (max-width:900px){.settings-grid{grid-template-columns:1fr}.hud-pop{position:fixed;right:var(--gutter);top:calc(var(--chrome) + 8px)}}

/* ---------- stays: one full-width band per stay, a drawing of its rooms behind, the city to the left ---------- */
.stays{display:flex;flex-direction:column}
.stay{position:relative;min-height:min(78vh,760px);display:flex;align-items:center;overflow:hidden;border-top:1px solid var(--ink)}
.stay:last-child{border-bottom:1px solid var(--ink)}
.stay-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;opacity:.55;pointer-events:none}
.stay-inner{position:relative;z-index:1;display:grid;grid-template-columns:minmax(260px,34%) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:center;width:100%;padding:clamp(36px,6vh,72px) var(--gutter)}
.stay-pic{margin:0;aspect-ratio:3/4;max-height:62vh;overflow:hidden;background:#eee;box-shadow:0 30px 70px rgba(0,0,0,.18)}
.stay-pic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.6s var(--ease)}
.stay:hover .stay-pic img{transform:scale(1.03)}
.stay-text{max-width:60ch;background:rgba(255,255,255,.9);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:clamp(24px,3vw,44px) clamp(24px,3vw,44px) clamp(26px,3vw,46px);border:1px solid rgba(0,0,0,.08);box-shadow:0 20px 60px rgba(0,0,0,.08)}
.stay-kicker{font-size:12px;letter-spacing:.06em;color:var(--ink-2)}
.stay-text h2{font-size:clamp(38px,5vw,78px);font-weight:300;line-height:.98;margin-top:12px}
.stay-lede{margin-top:16px;font-size:17px;line-height:1.55;color:#2a2a2a}
.stay-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 28px;margin:26px 0 0;max-width:46ch}
.stay-meta dt{font-size:12px;color:var(--ink-2)}
.stay-meta dd{margin:2px 0 0;font-size:15px}
.stay-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:30px}
@media (max-width:900px){
  .stay-inner{grid-template-columns:1fr}
  .stay-pic{max-height:52vh}
}

/* ---------- journal: a front page crossed with a travel magazine ---------- */
.paper{--news:Georgia,"Times New Roman",Times,serif;background:#fbfaf6;color:var(--ink);padding:clamp(18px,3vh,36px) var(--gutter) clamp(60px,10vh,120px)}
.paper a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(0,0,0,.35)}
.mast{display:grid;grid-template-columns:minmax(120px,1fr) auto minmax(120px,1fr);align-items:center;gap:20px;padding:10px 0 12px;border-bottom:1px solid var(--ink)}
.mast-ear p{font-family:var(--news);font-size:12px;line-height:1.35}
.mast-ear-l p{display:inline-block;border:1px solid var(--ink);padding:10px 14px;font-size:14px;font-style:italic}
.mast-ear-r{text-align:right;justify-self:end;max-width:34ch}
.mast-name{font-family:var(--serif);font-size:clamp(40px,6.4vw,92px);font-weight:500;letter-spacing:-.01em;text-align:center;line-height:1}
.mast-name em{font-weight:300;font-style:italic}
.mast-line{display:flex;justify-content:space-between;gap:16px;font-family:var(--news);font-size:11px;letter-spacing:.04em;padding:6px 0;border-bottom:3px double var(--ink)}
.mast-city{font-style:italic;letter-spacing:.06em}
.banner{font-family:var(--serif);font-style:italic;font-weight:600;font-size:clamp(28px,4.6vw,66px);line-height:1.02;text-align:center;letter-spacing:-.01em;margin:22px 0 18px;padding-bottom:16px;border-bottom:1px solid var(--ink)}
.front{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr) minmax(0,2fr);gap:0;}
.col{padding:0 22px}
.col-left{padding-left:0;border-right:1px solid var(--hair)}
.col-right{padding-right:0;border-left:1px solid var(--hair)}
.head-serif{font-family:var(--serif);font-size:clamp(26px,2.4vw,36px);font-weight:500;line-height:1.05;text-align:center;margin:4px 0 8px}
.head-small{font-size:clamp(22px,1.9vw,28px);margin-top:22px;padding-top:14px;border-top:1px solid var(--hair)}
.head-italic{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(28px,2.9vw,44px);line-height:1.02;text-align:center;margin:14px 0 6px}
.head-cond{font-family:var(--sans);font-weight:700;font-size:clamp(26px,2.3vw,34px);letter-spacing:-.01em;line-height:1;text-align:center;margin:4px 0 10px;transform:scaleX(.82);transform-origin:center}
.deck{font-family:var(--sans);font-weight:600;font-size:clamp(17px,1.4vw,21px);line-height:1.15;text-align:center;margin-bottom:10px}
.byline{font-family:var(--news);font-size:11px;letter-spacing:.06em;text-align:center;text-transform:uppercase;margin:6px 0 10px}
.byline small{display:block;text-transform:none;letter-spacing:0;font-style:italic;font-size:10.5px}
.newsprint{font-family:var(--news);font-size:13.5px;line-height:1.42;text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.newsprint p{margin:0 0 8px;text-indent:1.4em}
.newsprint p:first-child{text-indent:0}
.newsprint p:first-child::first-letter{font-family:var(--serif);font-size:3.1em;float:left;line-height:.82;padding:3px 6px 0 0}
.cols-2{column-count:2;column-gap:18px;column-rule:1px solid var(--hair)}
.subhead{font-family:var(--sans);font-weight:700;font-size:11px;letter-spacing:.04em;text-align:center;text-indent:0!important;margin:10px 0 6px!important}
.col-fig{margin:14px 0 0}
.col-fig img{width:100%;height:auto;display:block;filter:grayscale(.25) contrast(1.05)}
.col-fig-tall img{aspect-ratio:3/4;object-fit:cover}
.lead-fig{margin:0 0 12px}
.lead-fig img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.paper figcaption{font-family:var(--news);font-size:11.5px;line-height:1.35;padding-top:6px}
.paper figcaption span{float:right;font-size:9.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2)}
.box{border:1px solid var(--ink);padding:14px 16px 10px;margin:18px auto 0;max-width:34ch;font-family:var(--news);font-size:13px;line-height:1.4}
.box h4{font-family:var(--serif);font-style:italic;font-size:24px;font-weight:500;text-align:center;margin-bottom:8px}
.box-foot{text-align:center;font-style:italic;margin-top:8px}
/* the magazine pages */
.mag{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:start;margin-top:clamp(40px,7vh,80px);padding-top:clamp(28px,4vh,44px);border-top:1px solid var(--ink)}
.mag-head{padding-top:12px}
.mag-label{font-family:var(--sans);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.mag-title{font-family:var(--serif);font-size:clamp(48px,7vw,108px);font-weight:300;line-height:.92;margin-top:10px;letter-spacing:-.02em}
.mag-title em{font-style:italic;font-weight:300}
.mag-standfirst{font-family:var(--serif);font-size:clamp(19px,1.7vw,24px);line-height:1.35;margin-top:18px;max-width:40ch;color:#2a2a2a}
.mag-fig{margin:0}
.mag-fig img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.mag-fig-wide img{aspect-ratio:4/3}
.mag .mag-fig figcaption{font-family:var(--sans);font-size:12px;color:var(--ink-2)}
.mag-list{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-direction:column}
.mag-list li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:10px;padding:18px 0;border-top:1px solid var(--hair)}
.mag-list .n{font-family:var(--serif);font-size:52px;font-weight:300;line-height:.8;color:var(--ink)}
.mag-list h4{font-family:var(--sans);font-weight:600;font-size:14px;letter-spacing:.01em}
.mag-list p{font-family:var(--news);font-size:14.5px;line-height:1.45;margin-top:6px;color:#2a2a2a}
.mag-quote{margin:28px 0 0;padding:28px 0 0;border-top:1px solid var(--hair)}
.mag-quote p{font-family:var(--serif);font-style:italic;font-size:clamp(24px,2.4vw,34px);line-height:1.2;font-weight:300}
.mag-quote cite{display:block;margin-top:12px;font-family:var(--sans);font-style:normal;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.mag-alt .mag-fig{grid-row:1}
.mag-alt .mag-head .link-line{display:inline-block;margin-top:24px;text-decoration:none}
/* inside */
.inside{margin-top:clamp(40px,7vh,80px);border-top:3px double var(--ink);padding-top:10px}
.inside-head{font-family:var(--sans);font-weight:700;font-size:12px;letter-spacing:.2em;text-align:center;margin:10px 0 14px;padding-bottom:6px;border-bottom:1px solid var(--ink)}
.inside-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-bottom:28px}
.inside-grid h4{font-family:var(--sans);font-weight:700;font-size:14px;margin-bottom:6px}
.inside-grid p{font-family:var(--news);font-size:13px;line-height:1.42}
.sections-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 28px}
.sections-grid p{font-family:var(--news);font-size:13px;line-height:1.4}
.sections-grid strong{display:block;font-family:var(--sans);font-size:12.5px}
@media (max-width:1000px){
  .front{grid-template-columns:1fr}
  .col{padding:0;border:0!important;margin-top:24px}
  .cols-2{column-count:1}
  .mag{grid-template-columns:1fr}
  .mag-alt .mag-fig{grid-row:auto}
  .mast{grid-template-columns:1fr}
  .mast-ear{display:none}
  .mast-line{flex-wrap:wrap}
  .inside-grid,.sections-grid{grid-template-columns:1fr}
}

/* ---------- contact: the snail ---------- */
.snail{position:relative;margin:0;width:100%;aspect-ratio:16/9;overflow:hidden;align-self:center}
.snail video,.snail canvas{position:absolute;inset:0;width:100%;height:100%;display:block;mix-blend-mode:multiply;filter:brightness(1.05) saturate(.8);-webkit-mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent),linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent),linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);mask-composite:intersect}
/* the margins are softened and lifted toward the paper, so the frame has no edge */
.snail::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;background:radial-gradient(ellipse at 50% 50%,rgba(255,255,255,0) 38%,rgba(255,255,255,.75) 78%,#fff 100%);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);-webkit-mask-image:radial-gradient(ellipse at 50% 50%,transparent 36%,#000 80%);mask-image:radial-gradient(ellipse at 50% 50%,transparent 36%,#000 80%)}
.snail video{object-fit:cover}
.snail canvas{pointer-events:none}
@media (max-width:900px){.contact-wrap{grid-template-columns:1fr}.snail{order:-1}}

/* ---------- my tickets (the wallet) ---------- */
.wallet-card{width:min(640px,100%);max-height:calc(100vh - 40px);overflow:auto}
.wallet-note,.wallet-empty{font-size:14px;color:var(--ink-2);margin:8px 0 20px}
.wallet-empty a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.wallet{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.wtix{display:grid;grid-template-columns:1fr 28px 132px;border:1px solid var(--ink);background:var(--paper);min-height:132px}
.wtix-body{padding:16px 18px;display:grid;align-content:space-between;gap:10px;min-width:0}
.wtix-event{font-family:var(--serif);font-size:clamp(20px,2vw,26px);line-height:1.05}
.wtix-when{font-size:13px;color:var(--ink-2);margin-top:4px}
.wtix-meta{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12px;color:var(--ink-2)}
.wtix-foot{display:flex;align-items:center;justify-content:space-between;gap:12px}
.wtix-foot button{font-size:13px;text-decoration:underline;text-underline-offset:3px}
.wtix-foot .wtix-live{font-size:12px;color:var(--ink);border:1px solid var(--ink);padding:3px 8px}
.wtix .perf{background:repeating-linear-gradient(to bottom,var(--ink) 0 7px,transparent 7px 14px) 50% 0/1px 100% no-repeat}
.wtix-qr{display:grid;place-items:center;padding:12px;cursor:zoom-in}
.wtix-qr canvas{width:100%;height:auto;aspect-ratio:1;image-rendering:pixelated;display:block}
@media (max-width:560px){.wtix{grid-template-columns:1fr}.wtix .perf{display:none}.wtix-qr{padding:0 18px 18px}.wtix-qr canvas{width:min(240px,100%)}}

/* ---------- the pass: the whole screen is the ticket ---------- */
.pass{position:fixed;inset:0;z-index:1400;background:var(--paper);display:grid;padding:clamp(16px,3vmin,40px)}
.pass[hidden]{display:none}
.pass-close{position:fixed;right:clamp(10px,2vmin,22px);top:clamp(8px,2vmin,18px);z-index:2;width:48px;height:48px;font-size:34px;line-height:1;border:1px solid var(--ink);background:var(--paper);display:grid;place-items:center}
.pass-close:hover{background:var(--ink);color:var(--paper)}
.pass-card{display:grid;grid-template-columns:minmax(0,1fr) 28px minmax(0,46%);border:1px solid var(--ink);min-height:0;min-width:0;height:100%;background:var(--paper)}
.pass-side{position:relative;padding:clamp(20px,5vmin,64px);display:grid;align-content:space-between;gap:clamp(16px,3vmin,32px);min-width:0;overflow:hidden}
.pass-kicker{font-size:clamp(11px,1.4vmin,14px);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.pass-event{font-family:var(--serif);font-weight:300;font-size:clamp(34px,8vmin,110px);line-height:.95;max-width:11ch}
.pass-when{font-family:var(--serif);font-size:clamp(20px,3.6vmin,44px);line-height:1.1}
.pass-where{font-size:clamp(13px,1.8vmin,20px);color:var(--ink-2);margin-top:6px}
.pass-holder{display:grid;grid-template-columns:auto auto;gap:10px 40px;margin:0;justify-content:start}
.pass-holder dt{font-size:clamp(10px,1.3vmin,13px);color:var(--ink-2);letter-spacing:.08em;text-transform:uppercase}
.pass-holder dd{margin:4px 0 0;font-size:clamp(14px,2vmin,22px)}
.pass-mark{position:absolute;right:clamp(16px,4vmin,48px);top:clamp(16px,4vmin,48px);width:clamp(54px,9vmin,120px);opacity:.9}
.pass .perf{background:repeating-linear-gradient(to bottom,var(--ink) 0 7px,transparent 7px 14px) 50% 0/1px 100% no-repeat}
.pass-qr{display:grid;align-content:center;justify-items:center;gap:clamp(10px,2vmin,22px);padding:clamp(20px,4vmin,56px);min-width:0;min-height:0}
.pass-qr canvas{width:min(100%,calc(100vh - 2 * clamp(16px,3vmin,40px) - 2 * clamp(20px,4vmin,56px) - 90px),640px);height:auto;aspect-ratio:1;image-rendering:pixelated;display:block}
.pass-code{font-size:clamp(12px,1.6vmin,16px);letter-spacing:.22em;text-transform:uppercase}
.pass-hint{font-size:clamp(11px,1.4vmin,14px);color:var(--ink-2);text-align:center}
@media (max-width:760px),(orientation:portrait){
  .pass-card{grid-template-columns:1fr;grid-template-rows:minmax(0,auto) 28px minmax(0,1fr)}
  .pass-side{align-content:start;gap:12px;padding:clamp(18px,5vmin,40px) clamp(18px,5vmin,40px) 16px}
  .pass-event{font-size:clamp(30px,9vmin,64px)}
  .pass-when{font-size:clamp(18px,5vmin,30px)}
  .pass-holder{gap:8px 28px}
  .pass-mark{display:none}
  .pass .perf{height:28px;background:repeating-linear-gradient(to right,var(--ink) 0 7px,transparent 7px 14px) 0 50%/100% 1px no-repeat}
  .pass .perf::before,.pass .perf::after{top:50%;transform:translateY(-50%);left:-12px;clip-path:inset(0 0 0 11px)}
  .pass .perf::after{left:auto;right:-12px;clip-path:inset(0 11px 0 0)}
  .pass-qr canvas{width:min(100%,56vh)}
}

/* ---------- floaters: a post's likes, comments and shares spread around its frame while it is hovered ---------- */
.floaters{position:fixed;left:0;top:0;z-index:60;pointer-events:none}
.floater{position:absolute;left:0;top:0;transform:translate(-50%,-50%);background:var(--paper);border:1px solid var(--ink);padding:6px 10px;font-size:12px;line-height:1.2;white-space:nowrap;display:flex;align-items:center;gap:7px;box-shadow:0 12px 28px rgba(0,0,0,.14);will-change:transform,opacity}
.floater svg{width:13px;height:13px;flex:0 0 auto;fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.floater.is-comment{display:block;font-family:var(--serif);font-style:italic;font-size:13.5px;line-height:1.3;white-space:normal;width:max-content;max-width:220px;padding:8px 12px 9px}
.floater.is-comment b{display:block;font-family:var(--sans);font-style:normal;font-weight:400;font-size:11px;letter-spacing:.04em;color:var(--ink-2);margin-bottom:3px}
@media (hover:none){.floaters{display:none}}