/* ==========================================================================
   Journal gallery — a first-person walk through a hall of paintings (sections/journal.php).
   The hall is one WebGL canvas (assets/js/hall-gl.js); everything here is the interface over it: the label under
   the painting you face (the article's own HTML), the heading, the meter, the exit, the open post. Without the
   3D hall (reduced motion, no JS, no WebGL: .hall.is-flat) the same articles are a gallery wall of cards.
   Nothing over the canvas uses backdrop-filter: the canvas changes every frame, so a blur under it would be
   recomputed every frame too.
   ========================================================================== */

/* #georgia: where a link to the gallery lands (journal.js puts it at the first painting's stop) */
.hall__anchor { position: absolute; top: var(--first, 0px); inset-inline-start: 0; width: 1px; height: 1px; outline: none; pointer-events: none; }
.hall {
  --h-ink: #0A1220; --h-night: #0E1A2E; --h-ivory: #F2EBDC; --h-brass: #B8955A; --h-teal: #2F6A66; --h-moon: #DCE6F5;
  position: relative; z-index: 6; color: #fff;
}
.hall__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; overflow: clip; }
.hall__skip { position: absolute; z-index: 30; inset-inline-start: var(--gutter); top: calc(var(--header-h) + 12px); padding: 10px 16px; border-radius: 999px; background: var(--green); color: var(--night); font-weight: 650; transform: translateY(-200%); opacity: 0; }
.hall__skip:focus-visible { transform: none; opacity: 1; }
.hall__end { display: block; height: 1px; }
.hall__veil { position: fixed; inset: 0; z-index: 60; background: var(--h-ink); opacity: 0; pointer-events: none; transition: opacity .42s var(--ease-io); }
.hall__veil.is-on { opacity: 1; }

/* ==========================================================================
   The hall. Right after the hero the section overlaps the hero's last two screens: during the hero's held final
   frame the doorway opens over it (hero.css keeps a one-screen tail). After any other section it comes in over it
   like a sheet of paper (journal.js: MR.sheet on the pin, and that section sticks under it): the pin is then the
   sheet, painted night until the hall is drawn on it.
   ========================================================================== */
html.js:not(.mr-static) .hero + .hall:not(.is-flat) { margin-top: -200vh; }
:not(.hero) + .hall { z-index: 9; }
html.js:not(.mr-static) :not(.hero) + .hall:not(.is-flat) .hall__pin { background: var(--h-night); border-radius: 28px 28px 0 0; transform-origin: 50% 0; box-shadow: 0 -24px 70px -26px rgb(4 8 20 / .7); }
html.js:not(.mr-static) .hall:not(.is-flat):not(.is-in) .hall__pin { pointer-events: none; }

.hall__view { position: absolute; inset: 0; pointer-events: none; }
.hall.is-in .hall__view { pointer-events: auto; }
.hall__gl { display: block; width: 100%; height: 100%; }

/* the articles: in the hall only the label of the painting you face is shown (journal.js places it on the
   easel's ledge); the others stay in the page, invisible, for screen readers and the Tab key */
.hall__works { position: absolute; inset: 0; z-index: 2; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.work { position: absolute; left: 0; top: 0; width: min(var(--lw, 400px), 88vw); opacity: 0; transform-origin: 50% 0; }
.work.is-on { will-change: transform, opacity; }
.work.is-near { pointer-events: auto; }
.work__pic, .work__excerpt { display: none; }
.work__plaque {
  position: relative; padding: 12px 20px 14px; text-align: center; color: #1C2A2C;
  background: linear-gradient(180deg, var(--h-ivory), #E6DCC8);
  border-top: 2px solid var(--h-brass); border-radius: 1px 1px 3px 3px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .65), 0 22px 34px -18px rgb(0 0 0 / .8);
}
.work__meta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 10px; font-size: 12px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--h-teal); }
html[lang="fa"] .work__meta { font-size: 13px; letter-spacing: 0; }
.work__cat::after { content: ""; display: inline-block; width: 4px; height: 4px; margin-inline-start: 10px; vertical-align: middle; border-radius: 50%; background: var(--h-brass); }
.work__title { margin-top: 5px; font-size: 18px; font-weight: 750; line-height: 1.5; text-wrap: balance; }
html[lang="en"] .work__title { font-family: var(--font-serif); font-size: 19px; font-weight: 600; line-height: 1.25; letter-spacing: -.005em; }
.work__title a { color: inherit; text-decoration: none; }
.work__title a::after { content: ""; position: absolute; inset: 0; }   /* the whole label opens the post */
.work__title a:focus-visible { outline: none; }
.work__plaque:focus-within { outline: 3px solid var(--green); outline-offset: 4px; }
.work__go { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 13px; font-weight: 650; color: #8A6A2E; opacity: 0; transform: translateY(4px); transition: opacity .35s, transform .45s var(--ease-out); }
.work__go svg { width: 15px; height: 15px; }
[dir="rtl"] .work__go svg { transform: scaleX(-1); }
.work.is-near .work__go { opacity: 1; transform: none; }

/* ---------- interface over the hall ---------- */
.hall__head {
  position: absolute; z-index: 4; left: 50%; top: calc(var(--header-h) + 4vh); width: min(92vw, 820px);
  transform: translateX(-50%); text-align: center; pointer-events: none; opacity: 0;
}
/* a soft shade under the heading: it is read over the pale vault */
.hall__head::before { content: ""; position: absolute; z-index: -1; inset: -48px -14%; background: radial-gradient(closest-side, rgb(10 18 32 / .66), rgb(10 18 32 / .32) 60%, rgb(10 18 32 / 0)); }
.hall__eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--h-moon); }
html[lang="fa"] .hall__eyebrow { letter-spacing: 0; text-transform: none; font-size: 15px; }
.hall__title { margin-top: 8px; font-family: var(--font-display); font-size: clamp(26px, 2.7vw, 46px); font-weight: 800; line-height: 1.3; text-wrap: balance; text-shadow: 0 2px 30px rgb(0 0 0 / .7); }
html[lang="en"] .hall__title { font-weight: 560; letter-spacing: -.015em; line-height: 1.1; }
.hall__walk { display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 14px; color: rgb(255 255 255 / .84); }
.hall__walk-line { width: 1px; height: 26px; background: linear-gradient(transparent, var(--h-moon)); animation: hall-walk 1.8s var(--ease-io) infinite; }
@keyframes hall-walk { 0% { transform: scaleY(0); transform-origin: 50% 0; } 50% { transform: scaleY(1); transform-origin: 50% 0; } 51% { transform-origin: 50% 100%; } 100% { transform: scaleY(0); transform-origin: 50% 100%; } }
.hall.is-away .hall__walk-line { animation-play-state: paused; }

.hall__meter, .hall__exit, .hall__close { background: rgb(10 18 32 / .74); border: 1px solid rgb(220 230 255 / .16); }
.hall__meter {
  position: absolute; z-index: 4; inset-inline-start: var(--gutter); bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 14px; padding: 9px 18px; border-radius: 999px; white-space: nowrap;
  font-size: 13px; font-weight: 600; opacity: 0; pointer-events: none;
}
.hall__count { direction: ltr; unicode-bidi: bidi-override; font-variant-numeric: tabular-nums; }
.hall__count b { color: var(--h-moon); font-weight: 700; }
.hall__bar { position: relative; width: clamp(70px, 11vw, 150px); height: 2px; border-radius: 2px; background: rgb(255 255 255 / .2); overflow: hidden; }
.hall__bar i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--h-brass), var(--h-moon)); transform: scaleX(var(--f, 0)); transform-origin: 0 50%; }
[dir="rtl"] .hall__bar i { transform-origin: 100% 50%; background: linear-gradient(270deg, var(--h-brass), var(--h-moon)); }

/* leave the hall at any point: on to the next section */
.hall__exit {
  position: absolute; z-index: 5; inset-inline-end: var(--gutter); bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: 9px; padding: 10px 18px 10px 16px; border-radius: 999px;
  font-size: 14px; font-weight: 650; color: #fff; text-decoration: none; white-space: nowrap;
  opacity: 0; visibility: hidden; translate: 0 10px; transition: opacity .45s, translate .6s var(--ease-out), visibility 0s .45s, border-color .3s, background-color .3s;
}
.hall__exit svg { width: 19px; height: 19px; flex: none; }
[dir="rtl"] .hall__exit svg { transform: scaleX(-1); }
.hall.is-in .hall__exit { opacity: 1; visibility: visible; translate: 0 0; transition: opacity .45s, translate .6s var(--ease-out), visibility 0s, border-color .3s, background-color .3s; }
.hall__exit:hover { border-color: var(--h-brass); background: rgb(24 34 52 / .86); }
.hall__exit:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

.hall__all { position: absolute; z-index: 4; left: 50%; bottom: 14vh; translate: -50% 12px; opacity: 0; visibility: hidden; transition: opacity .5s, translate .6s var(--ease-out), visibility 0s .5s; }
.hall.is-end .hall__all { opacity: 1; visibility: visible; translate: -50% 0; transition: opacity .5s, translate .6s var(--ease-out), visibility 0s; }

/* ---------- the open post: 80 % of the screen, the hall still around it ---------- */
.hall__dialog { position: absolute; inset: 0; z-index: 20; }
.hall__shade { position: absolute; inset: 0; background: radial-gradient(closest-side, rgb(8 14 26 / .3), rgb(8 14 26 / .66)); opacity: 0; transition: opacity .5s; }
.hall__dialog.is-open .hall__shade { opacity: 1; }
.hall__card {
  position: absolute; left: 10vw; top: 10vh; width: 80vw; height: 80vh; overflow: hidden; border-radius: 20px;
  background: var(--h-ink); box-shadow: 0 50px 120px -30px rgb(0 0 0 / .85), 0 0 0 1px rgb(220 200 160 / .3);
}
.hall__card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hall__card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgb(8 14 26 / .95), rgb(8 14 26 / .6) 36%, rgb(8 14 26 / 0) 68%); }
.hall__card-body {
  position: absolute; z-index: 1; inset-inline: clamp(22px, 4.5vw, 72px); bottom: clamp(22px, 6vh, 64px); max-width: 48rem;
  opacity: 0; translate: 0 18px; transition: opacity .5s .25s, translate .8s var(--ease-out) .25s;
}
.hall__dialog.is-open .hall__card-body { opacity: 1; translate: 0 0; }
.hall__card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 14px; color: rgb(255 255 255 / .8); }
.hall__card-cat { padding: 3px 12px; border-radius: 999px; color: var(--h-ivory); box-shadow: inset 0 0 0 1px rgb(184 149 90 / .8); }
.hall__card-title { margin-top: 14px; font-family: var(--font-display); font-size: clamp(26px, 3.3vw, 56px); font-weight: 800; line-height: 1.25; text-wrap: balance; }
html[lang="en"] .hall__card-title { font-weight: 560; line-height: 1.06; letter-spacing: -.02em; }
.hall__card-text { margin-top: 14px; max-width: 40rem; font-size: clamp(15px, 1.15vw, 19px); line-height: 1.85; color: rgb(255 255 255 / .86); }
.hall__card-go { margin-top: 24px; display: inline-flex; align-items: center; gap: 10px; }
.hall__card-go .arrow { width: 18px; height: 18px; }
[dir="rtl"] .hall__card-go .arrow { transform: scaleX(-1); }
.hall__close {
  position: absolute; z-index: 2; inset-inline-end: 18px; top: 18px; width: 48px; height: 48px; display: grid; place-items: center;
  border-radius: 50%; color: #fff; cursor: pointer; transition: background-color .3s, transform .5s var(--ease-out);
}
.hall__close svg { width: 20px; height: 20px; }
.hall__close:hover { background: rgb(184 149 90 / .35); transform: rotate(90deg); }
.hall__close:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

@media (max-width: 767px) {
  .hall__meter { inset-inline-start: calc(12px + 74px + 10px); }   /* (the quick nav is in that corner) */
  .hall__card { left: 4vw; top: 9vh; width: 92vw; height: 80vh; border-radius: 16px; }
  .hall__meter { font-size: 12px; gap: 10px; padding: 8px 14px; }
  .hall__bar { display: none; }
  .hall__exit { padding: 9px 14px 9px 12px; font-size: 13px; }
  .work__plaque { padding: 10px 14px 12px; }
  .work__title { font-size: 16px; }
  html[lang="en"] .work__title { font-size: 17px; }
}

/* ==========================================================================
   Flat layout — reduced motion, no JS, or no WebGL: the same articles as a gallery wall of cards.
   ========================================================================== */
:is(html.mr-static, html:not(.js)) .hall, .hall.is-flat { margin-top: 0; background: radial-gradient(120% 70% at 50% 0%, #1E3A40, var(--h-night) 70%); padding: 72px var(--gutter) 80px; }
:is(html.mr-static, html:not(.js)) .hall__pin, .hall.is-flat .hall__pin { position: static; height: auto; overflow: visible; display: flex; flex-direction: column; pointer-events: auto; }
:is(html.mr-static, html:not(.js)) .hall__head, .hall.is-flat .hall__head { order: -1; position: static; transform: none; width: auto; max-width: 820px; margin: 0 auto 40px; opacity: 1; }
:is(html.mr-static, html:not(.js)) :is(.hall__view, .hall__meter, .hall__exit, .hall__dialog, .hall__walk),
.hall.is-flat :is(.hall__view, .hall__meter, .hall__exit, .hall__dialog, .hall__walk) { display: none; }
:is(html.mr-static, html:not(.js)) .hall__head::before, .hall.is-flat .hall__head::before { display: none; }
:is(html.mr-static, html:not(.js)) .hall__works, .hall.is-flat .hall__works {
  position: static; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 32px 24px;
  max-width: 1320px; margin-inline: auto; pointer-events: auto;
}
:is(html.mr-static, html:not(.js)) .work, .hall.is-flat .work { position: static; width: auto; opacity: 1; transform: none; pointer-events: auto; }
:is(html.mr-static, html:not(.js)) .work__pic, .hall.is-flat .work__pic {
  display: block; aspect-ratio: 4 / 3; padding: 14px; box-sizing: border-box;
  background: #E8E0CC; box-shadow: inset 0 0 0 1px #4A3410, inset 0 0 0 5px #C69B4B, inset 0 0 0 7px #5A4216, inset 0 0 0 8px #C6A45E;
}
:is(html.mr-static, html:not(.js)) .work__pic img, .hall.is-flat .work__pic img { width: 100%; height: 100%; object-fit: cover; }
:is(html.mr-static, html:not(.js)) .work__plaque, .hall.is-flat .work__plaque { margin-top: 10px; text-align: start; }
:is(html.mr-static, html:not(.js)) .work__meta, .hall.is-flat .work__meta { justify-content: flex-start; }
:is(html.mr-static, html:not(.js)) .work__excerpt, .hall.is-flat .work__excerpt { display: block; margin-top: 6px; font-size: 14px; line-height: 1.7; color: #3A4648; }
:is(html.mr-static, html:not(.js)) .work__go, .hall.is-flat .work__go { display: none; }
:is(html.mr-static, html:not(.js)) .hall__all, .hall.is-flat .hall__all { position: static; display: table; margin: 44px auto 0; translate: none; opacity: 1; visibility: visible; }