/* ============================================================
   Arts, Music & Theatre — the CIRS Cultural Gallery
   ------------------------------------------------------------
   A gallery the reader walks through: a curved wall of
   photographs to arrive at, a row of doorways, then six rooms,
   each hung with its photographs at their own proportions.
   Nothing is cropped in a room: tools/build-site.py gives every
   tile its aspect ratio (--ar), the CSS below hangs them in
   justified rows without scripting, and culturegallery.js
   rearranges each room into feature blocks and rows of
   alternating height once it can measure the room.

   Everything is scoped to body.culturegallery. Colour is read
   from the roles in cirs.css; gold is lettering only on the
   dark grounds, --gold-ink on paper.
   ============================================================ */

body.culturegallery{
  --cg-gap: clamp(6px, .8vw, 12px);
  --cg-radius: 4px;
  background:var(--paper);
}

/* ------------------------------------------------------------
   The arrival: a curved wall of photographs
   ------------------------------------------------------------ */
.culturegallery .cg-hero{
  position:relative; isolation:isolate; overflow:hidden;
  height:100vh; height:100svh; min-height:600px;
  background:
    radial-gradient(ellipse 70% 55% at 50% 36%, rgba(var(--gold-rgb),.10), transparent 70%),
    radial-gradient(ellipse at 50% 40%, var(--dark) 0%, var(--dark-deep) 72%);
  color:var(--on-dark);
}

.culturegallery .cg-arc{
  --R: clamp(560px, 64vw, 1180px);
  --step: 15deg;
  --tw: calc(var(--R) * .238);
  --th: calc(var(--tw) * .68);
  --tg: calc(var(--R) * .022);
  --px: 0; --py: 0;
  position:absolute; inset:0; z-index:0;
  perspective:900px; perspective-origin:50% 36%;
  pointer-events:none;
}
.culturegallery .cg-arc__ring{
  position:absolute; left:50%; top:36%; width:0; height:0;
  transform-style:preserve-3d;
  translate:0 0 calc(var(--R) * .55);
  transform:rotateX(calc(var(--py) * -2.5deg)) rotateY(calc(var(--px) * 5deg));
  animation:cg-sway 38s ease-in-out infinite alternate;
}
@keyframes cg-sway{ from{ rotate:y -7deg; } to{ rotate:y 7deg; } }

.culturegallery .cg-arc__tile{
  position:absolute; left:calc(var(--tw) / -2); top:calc(var(--th) / -2);
  width:var(--tw); height:var(--th);
  transform:rotateY(calc(var(--c) * var(--step))) translateZ(calc(var(--R) * -1))
            translateY(calc(var(--r) * (var(--th) + var(--tg))));
  border-radius:6px; overflow:hidden;
  background:var(--dark-mid);
  box-shadow:0 0 0 1px rgba(var(--gold-rgb),.16), 0 0 34px rgba(var(--gold-rgb),.10),
             0 18px 40px rgba(0,0,0,.45);
  backface-visibility:hidden;
}
.culturegallery .cg-arc__tile img{
  width:100%; height:100%; object-fit:cover; object-position:50% 38%; display:block;
  opacity:0; transition:opacity 1.2s var(--e);
}
.culturegallery .cg-arc__tile img.is-loaded,
html:not(.cg-js) .culturegallery .cg-arc__tile img{ opacity:1; }

/* The header's zone, the edges, and a pool of shade where the title sits. */
.culturegallery .cg-hero::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(30,22,38,.78) 0, rgba(30,22,38,0) 150px),
    linear-gradient(90deg, rgba(30,22,38,.7), transparent 22%, transparent 78%, rgba(30,22,38,.7)),
    linear-gradient(0deg, var(--dark-deep) 0, rgba(30,22,38,.92) 24%, rgba(30,22,38,0) 52%);
}
/* A polished floor: the wall's light, caught low. */
.culturegallery .cg-hero__floor{
  position:absolute; left:-10%; right:-10%; bottom:0; height:46%; z-index:1; pointer-events:none;
  background:
    radial-gradient(ellipse 46% 40% at 50% 0%, rgba(var(--gold-rgb),.16), transparent 70%),
    repeating-linear-gradient(90deg, rgba(250,249,243,.025) 0 1px, transparent 1px 9vw);
  mask-image:linear-gradient(180deg, #000, transparent 85%);
  -webkit-mask-image:linear-gradient(180deg, #000, transparent 85%);
}

.culturegallery .cg-hero__text{
  position:absolute; z-index:2; left:0; right:0; bottom:0;
  padding:0 var(--gut) clamp(40px, 8vh, 84px);
  text-align:center;
}
.culturegallery .cg-hero__eyebrow,
.culturegallery .cg-kicker{
  margin:0 0 14px; font-family:var(--font-ui); font-size:var(--fs-xs); font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold-ink);
}
.culturegallery .cg-hero__eyebrow{ color:var(--gold); }
.culturegallery .cg-hero__title{
  font-size:clamp(2.8rem, 8vw, 7rem); line-height:.95; letter-spacing:-.015em;
  color:var(--on-dark); text-shadow:0 2px 30px rgba(0,0,0,.5);
}
.culturegallery .cg-hero__title span{ display:inline-block; }
.culturegallery .cg-hero__title em{ font-family:var(--font-quote); font-style:italic; color:var(--gold-lit); }
.culturegallery .cg-hero__lead{
  max-width:46ch; margin:20px auto 0;
  font-family:var(--font-editorial); font-size:var(--fs-lead); line-height:1.55;
  color:var(--on-dark-soft);
}
.culturegallery .cg-hero__go{
  display:inline-flex; align-items:center; gap:10px; margin-top:26px;
  padding:13px 24px; border-radius:999px;
  font-family:var(--font-ui); font-size:var(--fs-sm); font-weight:600; letter-spacing:.02em;
  color:var(--on-gold); background:var(--gold); text-decoration:none;
  transition:background .3s var(--e), transform .3s var(--e);
}
.culturegallery .cg-hero__go:hover{ background:var(--gold-lit); transform:translateY(-2px); }
.culturegallery .cg-hero__go span{ transition:transform .4s var(--e2); }
.culturegallery .cg-hero__go:hover span{ transform:translateY(3px); }

/* ------------------------------------------------------------
   The doorways
   ------------------------------------------------------------ */
.culturegallery .cg-intro{
  padding:clamp(72px, 10vw, 140px) var(--gut) clamp(56px, 8vw, 110px);
  background:var(--paper);
}
.culturegallery .cg-intro__head{ max-width:var(--maxw); margin:0 auto; }
.culturegallery .cg-intro__title{
  max-width:18ch; font-size:var(--fs-h2); line-height:1.05; color:var(--ink);
}
.culturegallery .cg-intro__title em,
.culturegallery .cg-room__title em{ font-family:var(--font-quote); font-style:italic; }
.culturegallery .cg-intro__lead{
  max-width:56ch; margin:20px 0 0; font-family:var(--font-editorial);
  font-size:var(--fs-lead); line-height:1.6; color:var(--ink-soft);
}

.culturegallery .cg-doors{
  list-style:none; margin:clamp(40px, 6vw, 72px) auto 0; padding:0; max-width:var(--maxw);
  display:grid; grid-template-columns:repeat(6, 1fr); gap:clamp(10px, 1.4vw, 20px);
}
.culturegallery .cg-door{
  position:relative; display:flex; flex-direction:column; justify-content:flex-end;
  aspect-ratio:3 / 4.4; overflow:hidden; isolation:isolate;
  padding:16px 14px; border-radius:999px 999px 6px 6px;
  color:var(--on-dark); text-decoration:none; background:var(--dark-mid);
  box-shadow:0 1px 0 var(--rule), 0 12px 30px rgba(30,22,38,.12);
  transition:transform .6s var(--e2), box-shadow .6s var(--e2);
}
.culturegallery .cg-door img{
  position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover;
  transition:transform 1.2s var(--e2);
}
.culturegallery .cg-door::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(30,22,38,0) 35%, rgba(30,22,38,.88));
}
.culturegallery .cg-door:hover{ transform:translateY(-6px); box-shadow:0 1px 0 var(--rule), 0 22px 44px rgba(30,22,38,.22); }
.culturegallery .cg-door:hover img{ transform:scale(1.06); }
.culturegallery .cg-door__no{ font-family:var(--font-ui); font-size:var(--fs-xs); letter-spacing:.16em; color:var(--gold-lit); }
.culturegallery .cg-door__title{ margin-top:4px; font-family:var(--font-display); font-size:clamp(1.05rem, 1.5vw, 1.4rem); line-height:1.1; }
.culturegallery .cg-door__count{ margin-top:6px; font-family:var(--font-ui); font-size:var(--fs-xs); color:var(--on-dark-soft); }

/* ------------------------------------------------------------
   A room
   ------------------------------------------------------------ */
.culturegallery .cg-room{
  --room-bg:var(--paper); --room-ink:var(--ink); --room-soft:var(--ink-soft);
  --room-label:var(--gold-ink); --room-tile:var(--paper-3); --room-rule:var(--rule);
  position:relative;
  padding:clamp(72px, 9vw, 132px) var(--gut) clamp(64px, 8vw, 120px);
  background:var(--room-bg); color:var(--room-ink);
}
.culturegallery .cg-room--ivory{ --room-bg:var(--paper-2); }
.culturegallery .cg-room--cream{ --room-bg:var(--paper-3); --room-tile:var(--paper-2); }
.culturegallery .cg-room--dark{
  --room-bg:var(--dark-deep); --room-ink:var(--on-dark); --room-soft:var(--on-dark-soft);
  --room-label:var(--gold); --room-tile:var(--dark-mid); --room-rule:var(--rule-dark);
  background:radial-gradient(ellipse 80% 40% at 50% 0%, var(--dark) 0%, var(--dark-deep) 100%);
}

.culturegallery .cg-room__head{
  max-width:var(--maxw); margin:0 auto clamp(32px, 5vw, 64px);
  display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr);
  grid-template-areas:"no no" "title line" "title count";
  column-gap:clamp(24px, 5vw, 80px); align-items:end;
  padding-bottom:clamp(20px, 3vw, 32px); border-bottom:1px solid var(--room-rule);
}
.culturegallery .cg-room__no{
  grid-area:no; margin:0 0 10px; font-family:var(--font-ui); font-size:var(--fs-xs); font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--room-label);
}
.culturegallery .cg-room__title{
  grid-area:title; font-size:clamp(2.6rem, 6.4vw, 5.6rem); line-height:.95; letter-spacing:-.015em;
  color:var(--room-ink);
}
.culturegallery .cg-room__line{
  grid-area:line; margin:0; max-width:48ch;
  font-family:var(--font-editorial); font-size:var(--fs-lead); line-height:1.55; color:var(--room-soft);
}
.culturegallery .cg-room__count{
  grid-area:count; margin:14px 0 0; font-family:var(--font-ui); font-size:var(--fs-sm); color:var(--room-soft);
}

/* The hang. Without scripting: justified rows, every photograph at its own
   proportions (flex-grow by aspect ratio keeps a row's heights equal). */
.culturegallery .cg-mosaic{
  max-width:var(--maxw); margin:0 auto;
  display:flex; flex-wrap:wrap; gap:var(--cg-gap);
}
.culturegallery .cg-mosaic::after{ content:""; flex:999 1 0; }
.culturegallery .cg-tile{
  position:relative; margin:0; overflow:hidden; border-radius:var(--cg-radius);
  flex:var(--ar) 1 calc(var(--ar) * 230px);
  aspect-ratio:var(--ar);
  background:var(--room-tile);
}
.culturegallery .cg-tile__link{ display:block; width:100%; height:100%; color:inherit; }
.culturegallery .cg-tile img{
  display:block; width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--e2), opacity .8s var(--e);
}

/* With the script: each tile is placed by measurement. */
.culturegallery .cg-mosaic.is-hung{ display:block; position:relative; }
.culturegallery .cg-mosaic.is-hung::after{ content:none; }
.culturegallery .cg-mosaic.is-hung .cg-tile{ position:absolute; aspect-ratio:auto; }
.culturegallery .cg-tile.is-later{ display:none; }

/* Arriving: a tile rises once as it enters the window. */
html.cg-motion .culturegallery .cg-tile{ opacity:0; translate:0 28px; transition:opacity .9s var(--e), translate 1.1s var(--e2); }
html.cg-motion .culturegallery .cg-tile.is-in{ opacity:1; translate:0 0; }

/* Hovering: the photograph leans in and its caption, where the school gave
   it one, comes up from the bottom. */
.culturegallery .cg-tile__cap{
  position:absolute; left:0; right:0; bottom:0; padding:28px 14px 12px;
  font-family:var(--font-ui); font-size:var(--fs-xs); line-height:1.35; color:var(--on-dark);
  background:linear-gradient(180deg, transparent, rgba(30,22,38,.85));
  opacity:0; transform:translateY(8px); pointer-events:none;
  transition:opacity .4s var(--e), transform .5s var(--e2);
}
.culturegallery .cg-tile__cap span{ display:block; margin-bottom:2px; color:var(--gold-lit); letter-spacing:.06em; }
@media (hover:hover) and (pointer:fine){
  .culturegallery .cg-tile:hover img{ transform:scale(1.045); }
  .culturegallery .cg-tile:hover .cg-tile__cap{ opacity:1; transform:none; }
  .culturegallery .cg-tile__link{ cursor:zoom-in; }
}
.culturegallery .cg-tile__link:focus-visible{ outline:3px solid var(--gold); outline-offset:-3px; }
.culturegallery .cg-tile:has(.cg-tile__link:focus-visible) .cg-tile__cap{ opacity:1; transform:none; }

.culturegallery .cg-more{
  display:flex; align-items:center; gap:12px; margin:clamp(28px, 4vw, 48px) auto 0;
  padding:14px 26px; border-radius:999px; cursor:pointer;
  font-family:var(--font-ui); font-size:var(--fs-sm); font-weight:600;
  color:var(--room-ink); background:transparent; border:1px solid var(--room-ink);
  transition:background .3s var(--e), color .3s var(--e);
}
.culturegallery .cg-more:hover{ background:var(--room-ink); color:var(--room-bg); }
.culturegallery .cg-more[hidden]{ display:none; }

/* ------------------------------------------------------------
   The rooms, as a rail along the left edge (wide windows only)
   ------------------------------------------------------------ */
.culturegallery .cg-rail{
  position:fixed; left:18px; top:50%; z-index:40; translate:-12px -50%;
  opacity:0; visibility:hidden; transition:opacity .4s var(--e), translate .5s var(--e2), visibility .4s;
}
body.culturegallery.cg-in-rooms .cg-rail{ opacity:1; visibility:visible; translate:0 -50%; }
.culturegallery .cg-rail ol{
  list-style:none; margin:0; padding:8px; display:grid; gap:2px;
  border-radius:24px; background:rgba(250,249,243,.82);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:0 0 0 1px rgba(30,22,38,.08), 0 8px 24px rgba(30,22,38,.14);
}
.culturegallery .cg-rail a{
  position:relative; display:grid; place-items:center; width:34px; height:34px; border-radius:50%;
  font-family:var(--font-ui); font-size:.72rem; font-weight:600; color:var(--ink-soft); text-decoration:none;
  transition:background .3s var(--e), color .3s var(--e);
}
.culturegallery .cg-rail a[aria-current="true"]{ background:var(--dark); color:var(--gold); }
.culturegallery .cg-rail a span{
  position:absolute; left:44px; top:50%; translate:-6px -50%; white-space:nowrap;
  padding:6px 12px; border-radius:999px; background:var(--dark); color:var(--on-dark);
  font-size:var(--fs-xs); font-weight:500; opacity:0; pointer-events:none;
  transition:opacity .3s var(--e), translate .3s var(--e);
}
.culturegallery .cg-rail a:hover span,
.culturegallery .cg-rail a:focus-visible span{ opacity:1; translate:0 -50%; }
/* Only where the rooms leave a margin wide enough for it beside them. */
@media (max-width:1499px){ .culturegallery .cg-rail{ display:none; } }

/* ------------------------------------------------------------
   Onward
   ------------------------------------------------------------ */
.culturegallery .cg-onward{
  padding:clamp(72px, 9vw, 120px) var(--gut); background:var(--paper); text-align:center;
}
.culturegallery .cg-onward__title{ font-size:var(--fs-h2); line-height:1.05; color:var(--ink); }
.culturegallery .cg-onward__links{
  list-style:none; margin:32px auto 0; padding:0; max-width:820px;
  display:flex; flex-wrap:wrap; justify-content:center; gap:12px;
}
.culturegallery .cg-onward__links a{
  display:inline-flex; gap:10px; padding:13px 22px; border-radius:999px;
  border:1px solid var(--rule); background:var(--white); color:var(--ink); text-decoration:none;
  font-family:var(--font-ui); font-size:var(--fs-sm); font-weight:600;
  transition:border-color .3s var(--e), transform .3s var(--e);
}
.culturegallery .cg-onward__links a:hover{ border-color:var(--gold-ink); transform:translateY(-2px); }

/* ------------------------------------------------------------
   The viewer
   ------------------------------------------------------------ */
.culturegallery .cg-box{
  position:fixed; inset:0; width:100%; height:100%; max-width:none; max-height:none;
  margin:0; padding:0; border:0; overflow:hidden;
  background:rgba(22,16,28,.97); color:var(--on-dark);
}
.culturegallery .cg-box::backdrop{ background:rgba(22,16,28,.9); }
.culturegallery .cg-box[open]{ animation:cg-box-in .35s var(--e) both; }
@keyframes cg-box-in{ from{ opacity:0; } to{ opacity:1; } }
.culturegallery .cg-box__stage{
  position:absolute; inset:0; display:grid; place-items:center;
  padding:72px 96px 24px; touch-action:pan-y pinch-zoom;
}
.culturegallery .cg-box__figure{ margin:0; display:flex; flex-direction:column; align-items:center; gap:16px; min-height:0; }
.culturegallery .cg-box__img{
  display:block; max-width:calc(100vw - 192px); max-height:calc(100dvh - 190px);
  width:auto; height:auto; object-fit:contain; border-radius:3px;
  box-shadow:0 30px 80px rgba(0,0,0,.55);
  transition:opacity .35s var(--e), translate .45s var(--e2);
}
.culturegallery .cg-box__img.is-leaving{ opacity:0; }
.culturegallery .cg-box__cap{
  max-width:70ch; text-align:center; font-family:var(--font-ui); font-size:var(--fs-sm); line-height:1.45;
}
.culturegallery .cg-box__room{ display:block; font-size:var(--fs-xs); letter-spacing:.16em; text-transform:uppercase; color:var(--gold); }
.culturegallery .cg-box__title{ display:block; margin-top:4px; font-family:var(--font-display); font-size:1.15rem; color:var(--on-dark); }
.culturegallery .cg-box__desc{ display:block; margin-top:4px; color:var(--on-dark-soft); }
.culturegallery .cg-box__title:empty, .culturegallery .cg-box__desc:empty{ display:none; }
.culturegallery .cg-box__count{
  position:absolute; top:22px; left:24px; margin:0;
  font-family:var(--font-ui); font-size:var(--fs-sm); color:var(--on-dark-soft); font-variant-numeric:tabular-nums;
}
.culturegallery .cg-box__btn{
  position:absolute; display:grid; place-items:center; width:52px; height:52px; padding:0;
  border-radius:50%; border:1px solid rgba(250,249,243,.24); background:rgba(250,249,243,.06);
  color:var(--on-dark); cursor:pointer;
  transition:background .3s var(--e), border-color .3s var(--e), transform .3s var(--e);
}
.culturegallery .cg-box__btn:hover{ background:rgba(250,249,243,.16); border-color:rgba(250,249,243,.5); }
.culturegallery .cg-box__btn:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; }
.culturegallery .cg-box__btn svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.culturegallery .cg-box__close{ top:14px; right:16px; }
.culturegallery .cg-box__prev{ left:22px; top:50%; translate:0 -50%; }
.culturegallery .cg-box__next{ right:22px; top:50%; translate:0 -50%; }
.culturegallery .cg-box__prev:hover{ transform:translateX(-3px); }
.culturegallery .cg-box__next:hover{ transform:translateX(3px); }

/* ------------------------------------------------------------
   Narrower windows
   ------------------------------------------------------------ */
@media (max-width:1100px){
  .culturegallery .cg-doors{ grid-template-columns:repeat(3, 1fr); }
  .culturegallery .cg-door{ aspect-ratio:4 / 4.6; }
}
@media (max-width:760px){
  .culturegallery .cg-arc{ --R:clamp(480px, 128vw, 620px); perspective-origin:50% 30%; }
  .culturegallery .cg-arc__ring{ top:30%; }
  .culturegallery .cg-hero__lead{ font-size:1rem; }
  .culturegallery .cg-doors{ grid-template-columns:repeat(2, 1fr); }
  .culturegallery .cg-room__head{
    grid-template-columns:1fr; grid-template-areas:"no" "title" "line" "count"; row-gap:14px;
  }
  .culturegallery .cg-tile{ flex-basis:calc(var(--ar) * 130px); }
  .culturegallery .cg-box__stage{ padding:64px 12px 96px; }
  .culturegallery .cg-box__img{ max-width:calc(100vw - 24px); max-height:calc(100dvh - 230px); }
  .culturegallery .cg-box__prev, .culturegallery .cg-box__next{ top:auto; bottom:18px; translate:none; }
  .culturegallery .cg-box__prev{ left:calc(50% - 64px); }
  .culturegallery .cg-box__next{ right:calc(50% - 64px); }
}

@media (prefers-reduced-motion:reduce){
  .culturegallery .cg-arc__ring{ animation:none; }
  .culturegallery .cg-door, .culturegallery .cg-door img, .culturegallery .cg-tile img,
  .culturegallery .cg-box__img{ transition:none; }
  .culturegallery .cg-box[open]{ animation:none; }
}