/* ============================================================
   Arts, Music & Theatre — the wall
   ------------------------------------------------------------
   This page is a moving field of photographs rather than a
   document: it fills the window, takes the scroll, and opens a
   photograph where another page would follow a link.

   The architecture came from the archive built as a standalone
   folder. What changed, so that it belongs to the site: the
   palette is the site's charcoal and gold rather than its own
   near-copies, the type follows the site's type roles,
   the site's header sits over it, and the fold names the page.

   Everything is scoped to body.wall — cirs.css styles a page
   that scrolls, and this one does not.
   ============================================================ */

body.wall{
  /* The site's gold as components: the wall needs it at a dozen
     opacities, and rgba() cannot take a hex custom property. */
  --gold-rgb: 255,195,8;
}

/* --- THE WINDOW ---
   :has, so the rule reaches <html> from the class the build puts
   on <body>. Without it iOS still rubber-bands the document. */
html:has(> body.wall), body.wall{
  margin:0; padding:0; width:100%; height:100%; overflow:hidden;
  background:radial-gradient(ellipse at 50% 40%, var(--dark) 0%, var(--dark-ink) 70%);
  background-color:var(--dark-ink);
  color:var(--paper);
  overscroll-behavior:none;
  -webkit-user-select:none; user-select:none;
  -webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;
  -webkit-text-size-adjust:100%;
}

/* The page's furniture measures a scroll that never happens. */
body.wall .progress,
body.wall .ring,
body.wall .totop,
body.wall .footer-wrap{ display:none !important; }

/* cirs.css gives <main> a paper ground and z-index:1, which on every other
   page keeps the document above the fixed chrome. Here it would be a stacking
   context holding the opened photograph below the header, however high the
   dialog's own z-index went — and a paper rectangle behind the wall. */
body.wall main{ position:static; z-index:auto; background:none; }

/* The custom cursor replaces the pointer — but not over the header,
   which is the site's and keeps the site's behaviour. */
@media (hover: hover) and (pointer: fine){
  body.wall, body.wall #p1-wrap, body.wall #p1-wrap *{ cursor:none !important; }
}

body.wall #global-canvas{ position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; opacity:.6; }
/* Grain is generated inline, so the page needs no third-party host for it. */
body.wall #grain-overlay{ position:fixed; inset:0; z-index:999999; pointer-events:none; opacity:.035; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* --- CURSOR (fine pointers only) --- */
body.wall #cursor-ring{ position:fixed; left:0; top:0; width:40px; height:40px; box-sizing:border-box; border:1px solid rgba(var(--gold-rgb),.5); border-radius:20px; pointer-events:none; z-index:90; will-change:transform; transition:border-color .3s, opacity .25s; }
body.wall #cursor-ring.is-snapped{ border-color:var(--gold-lit); }
body.wall #cursor-dot{ position:fixed; left:0; top:0; width:4px; height:4px; margin:-2px 0 0 -2px; background:var(--gold-lit); border-radius:50%; pointer-events:none; z-index:91; box-shadow:0 0 15px var(--gold); will-change:transform; transition:opacity .25s; }
body.wall.is-away #cursor-ring, body.wall.is-away #cursor-dot{ opacity:0; }
body.wall.is-touch #cursor-ring, body.wall.is-touch #cursor-dot{ display:none; }
@media (hover: none){ body.wall #cursor-ring, body.wall #cursor-dot{ display:none; } }

/* --- THE FIELD --- */
body.wall #p1-wrap{ position:fixed; inset:0; z-index:10; touch-action:none; outline:none; }
body.wall #p1-viewport{ position:absolute; inset:0; perspective:1120px; perspective-origin:50% 48%; pointer-events:none; }
/* The first layer keeps a header zone: the photographs pass under the
   site's header, and without it a bright tile sat directly behind the
   wordmark and the header's buttons. It fades out well above the title. */
body.wall #p1-viewport::after{ content:""; position:absolute; inset:0; z-index:20; pointer-events:none; background:linear-gradient(180deg, rgba(17,17,15,.8) 0, rgba(17,17,15,.5) 96px, rgba(17,17,15,0) 180px), linear-gradient(90deg, rgba(17,17,15,.58), transparent 18%, transparent 82%, rgba(17,17,15,.58)), radial-gradient(ellipse at 50% 48%, transparent 30%, rgba(17,17,15,.16) 68%, rgba(17,17,15,.42) 100%); }
body.wall #p1-stage{ position:absolute; inset:0; transform-style:preserve-3d; transform-origin:50vw 50vh; will-change:transform; pointer-events:auto; }

/* Tiles are plain: no backdrop blur (it re-samples everything behind each
   tile every frame) and no overflow clipping on a 3D layer (that forces a
   mask). The photograph rounds its own corners instead. */
body.wall .p1-tile{ padding:0; font:inherit; appearance:none; position:absolute; left:0; top:0; width:100px; height:100px; box-sizing:border-box; background:rgba(42,41,37,.9); border-radius:12px; border:1px solid rgba(var(--gold-rgb),.24); -webkit-backface-visibility:hidden; backface-visibility:hidden; contain:layout style; transition:border-color .24s ease, box-shadow .24s ease; }
body.wall .p1-tile img{ display:block; width:100%; height:100%; object-fit:cover; object-position:50% 38%; border-radius:11px; opacity:.56; filter:saturate(.78) brightness(.82); transition:opacity .32s ease, filter .32s ease, transform .32s ease; pointer-events:none; -webkit-user-drag:none; }
body.wall .p1-tile.depth-back{ border-color:rgba(var(--gold-rgb),.12); box-shadow:0 8px 22px rgba(6,6,5,.18); }
body.wall .p1-tile.depth-back img{ opacity:.27; filter:saturate(.55) brightness(.64); }
body.wall .p1-tile.depth-main{ box-shadow:0 18px 42px rgba(6,6,5,.38); }
body.wall .p1-tile.depth-front{ border-color:rgba(var(--gold-rgb),.48); box-shadow:0 34px 72px rgba(6,6,5,.58), 0 0 0 1px rgba(var(--gold-rgb),.08); }
body.wall .p1-tile.depth-front img{ opacity:.82; filter:saturate(.92) brightness(.92); }
body.wall .p1-tile.is-hovered{ border-color:rgba(var(--gold-rgb),.88); box-shadow:0 38px 84px rgba(6,6,5,.64), 0 0 32px rgba(var(--gold-rgb),.12); }
body.wall .p1-tile.is-hovered img{ opacity:1; filter:saturate(1.05) brightness(1.04); transform:scale(1.018); }
body.wall .p1-tile:focus-visible{ outline:3px solid #fff; outline-offset:4px; box-shadow:0 0 0 7px #181815; }
body.wall .p1-tile:focus-visible img{ opacity:1; }
@media (hover: hover) and (pointer: fine){ body.wall .p1-tile{ cursor:pointer; } }

/* --- THE FOLD ---
   The title's focus-pull is two stacked copies — one sharp, one
   pre-blurred — cross-faded by opacity. Animating filter: blur()
   every frame repaints a huge block of text; opacity is composited
   for free. The eyebrow and the cue ride the same presence value,
   which the script publishes as --fold. */
body.wall .p1-hero{ position:fixed; inset:0; display:grid; place-items:center; align-content:center; gap:var(--space-4); pointer-events:none; z-index:10; padding:0 var(--space-5); --fold:0; }
/* A photograph can sit bright behind the title. This darkens the middle of
   the window just enough to hold the type, and leaves with the fold, so the
   moment you start dragging there is nothing over the wall at all. */
body.wall .p1-hero::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:calc(var(--fold) * .95); background:radial-gradient(ellipse var(--hero-scrim, 52% 40%) at 50% 50%, rgba(17,17,15,.86) 0%, rgba(17,17,15,.62) 48%, rgba(17,17,15,0) 80%); }
body.wall .p1-hero__eyebrow{ position:relative; grid-column:1; margin:0; opacity:var(--fold); font-family:var(--font-body); font-size:var(--fs-xs); letter-spacing:.06em; text-transform:none; color:rgba(var(--gold-rgb),.72); text-align:center; }
body.wall .p1-hero__title{ position:relative; grid-column:1; display:grid; place-items:center; filter:drop-shadow(0 2px 18px rgba(17,17,15,.7)); }
body.wall .p1-hero-text{ grid-area:1 / 1; margin:0; font-family:var(--font-display); font-size:clamp(2.4rem, 8vw, 6.4rem); font-weight:500; text-align:center; line-height:.94; letter-spacing:-.015em; opacity:0; will-change:opacity; background:linear-gradient(180deg, var(--gold-lit) 0%, var(--gold) 55%, #C9A961 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
body.wall .p1-hero-text em{ font-style:italic; }
body.wall .p1-hero-text.soft{ filter:blur(40px); }

/* --- THE CORNER HINT --- */
body.wall .p1-hud{ position:fixed; z-index:80; font-size:var(--fs-xs); text-transform:none; letter-spacing:.06em; opacity:.5; color:var(--gold); font-family:var(--font-body); pointer-events:none; }
body.wall .hud-br{ bottom:34px; right:34px; }

/* --- THE OPENED PHOTOGRAPH ---
   Only the photograph: it fills the window, and the one thing beside it is
   the prompt in the corner that says how to leave. No title, no caption, no
   panel. (The photograph still carries its alt text, and the dialog its
   label, for anyone who cannot see it.) */
body.wall .wallmodal{ display:none; position:fixed; inset:0; background:rgba(10,9,8,.97); -webkit-backdrop-filter:blur(50px); backdrop-filter:blur(50px); z-index:5000000; opacity:0; transition:opacity .35s ease; touch-action:pan-y; }
body.wall .wallmodal.is-open{ opacity:1; }
body.wall .m-photo{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:clamp(14px, 3vmin, 36px); box-sizing:border-box; }
body.wall .m-close{ position:absolute; top:22px; right:24px; padding:9px 16px; color:var(--gold-lit); font-size:var(--fs-xs); letter-spacing:.06em; cursor:pointer; transition:opacity .3s, background .3s; z-index:5000001; opacity:1; font-family:var(--font-body); background:rgba(10,9,8,.8); border:1px solid rgba(var(--gold-rgb),.35); border-radius:999px; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
body.wall .m-close:hover, body.wall .m-close:focus-visible{ background:rgba(10,9,8,.95); }
body.wall .m-close:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
body.wall .m-close:focus:not(:focus-visible){ outline:none; }
body.wall #m-media-cont img{ display:block; max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; border-radius:3px; box-shadow:0 24px 90px rgba(0,0,0,.65), 0 0 0 1px rgba(var(--gold-rgb),.18); -webkit-user-drag:none; }

body.wall .noscript{ position:fixed; inset:0; display:grid; place-items:center; padding:24px; text-align:center; font-family:var(--font-body); color:var(--gold-lit); z-index:10; }

/* --- PHONES --- */
@media (max-width: 760px){
  body.wall #grain-overlay{ display:none; }
  body.wall .p1-hud{ letter-spacing:.06em; }
  body.wall .hud-br{ bottom:calc(20px + env(safe-area-inset-bottom)); right:18px; }
  body.wall .hud-br{ left:0; right:0; text-align:center; }

  body.wall .wallmodal{ -webkit-backdrop-filter:none; backdrop-filter:none; background:var(--dark-ink); }
  body.wall .m-photo{ padding:calc(60px + env(safe-area-inset-top)) 10px calc(14px + env(safe-area-inset-bottom)); }
  body.wall .m-close{ top:calc(8px + env(safe-area-inset-top)); right:10px; min-height:44px; padding:11px 16px; opacity:.9; }   /* >= 44px tap target */
  body.wall #p1-viewport::after{ background:linear-gradient(180deg, rgba(17,17,15,.8) 0, rgba(17,17,15,.5) 72px, rgba(17,17,15,0) 140px), linear-gradient(90deg, rgba(17,17,15,.42), transparent 22%, transparent 78%, rgba(17,17,15,.42)), radial-gradient(ellipse at 50% 48%, transparent 34%, rgba(17,17,15,.14) 72%, rgba(17,17,15,.34) 100%); }
  /* The title spans nearly the whole width of a phone, so its scrim does too. */
  body.wall .p1-hero{ --hero-scrim:78% 26%; }
}

@media (prefers-reduced-motion: reduce){
  body.wall .wallmodal, body.wall .p1-tile img{ transition:none; }
  body.wall .p1-tile.is-hovered img{ transform:none; }
}