@import url('./wonder-room.css');

/* Gallery's editorial variant. The original Wonder Room remains available unchanged.
   Brand colors, fonts, content and navigation continue to come from the tenant. */
.site {
  --wr-display: var(--site-font-display, Georgia, 'Times New Roman', serif);
  --wr-plate: var(--wr-body);
  --wr-edge: 0px;
  --wr-bar: 142px;
  /* The bar's measured height (the 112px mark and its 1rem padding above and below), so an
     exhibition room under it fills the rest of the screen. */
  --exhibit-above: 144px;
  --wr-room: clamp(4rem, 8vw, 8rem);
  --wr-grain: 0;
  --wr-drop: 0px;
  --wr-paper: #faf9f7;
  --wr-paper-dim: #d2cbd6;
  --wr-ink: var(--ground-dark);
  --wr-ink-soft: #514956;
  --wr-moss: color-mix(in srgb, var(--brand-quinary, var(--accent-teal)) 12%, var(--wr-paper));
  --wr-plum: color-mix(in srgb, var(--brand-free, var(--accent)) 25%, var(--wr-case));
  --look-shadow-md: none;
  --look-weight-semibold: 400;
  --look-leading-tight: 1.08;
  --look-leading-snug: 1.12;
  --look-tracking-wide: 0.02em;
  --look-tracking-wider: 0.02em;
  --look-case-upper: none;
  --look-type-xs: calc(0.9rem * var(--type-scale, 1));
  --look-type-sm: calc(0.95rem * var(--type-scale, 1));
  --look-type-md: calc(1rem * var(--type-scale, 1));
}

.site .site-main > * {
  --wall: var(--look-band-ground, var(--wr-paper));
  --on-wall: var(--look-role-ink, var(--wr-ink));
  --on-wall-soft: var(--look-role-soft-ink, var(--wr-ink-soft));
  --plaque: var(--look-role-action, var(--wr-case));
  --plaque-ink: var(--look-role-action-label, var(--wr-paper));
}
.site .site-main > :nth-child(4n + 2) {
  --wall: var(--look-band-ground, var(--wr-case));
  --on-wall: var(--look-role-ink, var(--wr-paper));
  --on-wall-soft: var(--look-role-soft-ink, var(--wr-paper-dim));
  --plaque: var(--look-role-action, var(--wr-paper));
  --plaque-ink: var(--look-role-action-label, var(--wr-case));
}
/* The outer band owns spacing; its photo-and-text section must not add it again. */
.site .site-main > .reveal:has(> .split) {
  padding-block: var(--look-spacing-above, clamp(3rem, 5vw, 5rem)) var(--look-spacing-below, clamp(3rem, 5vw, 5rem));
}
.site .site-main > .reveal > .split { padding-block: 0; }
.site .site-main > *::before,
.site .site-main > *::after,
.site .hero-words::before,
.site .hero-words h1::before,
.site .hero-kicker::before,
.site .hero-sub::before,
.site .hero-picture::before,
.site .split-picture::before,
.site .split-picture::after,
.site .card-picture::before,
.site .card-picture::after,
.site .gallery-picture::before,
.site .gallery-picture::after { content: none; }

.site .site-header {
  padding: 1rem clamp(1.5rem, 4vw, 4rem);
  position: relative;
  border: 0;
}
.site .site-header .site-logo { height: 112px; width: auto; max-width: 190px; }
.site .site-header .site-brand { border: 0; }
.site .site-header .site-nav { align-self: center; border: 0; }
.site .site-header .menu > li > a,
.site .site-header .menu > .menu-heading > span,
.site .site-header .menu-children a {
  font-family: var(--wr-body);
  font-size: 0.9rem;
  letter-spacing: 0;
  text-transform: none;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.site .site-header .menu > li:last-child > a {
  background: transparent;
  border: 1px solid var(--wr-paper-dim);
  color: var(--wr-paper);
  padding: 0.65rem 1.25rem;
}

.site .site-main > .hero {
  --wall: var(--wr-case);
  --on-wall: var(--wr-paper);
  --on-wall-soft: var(--wr-paper-dim);
  --plaque: var(--wr-paper);
  --plaque-ink: var(--wr-case);
  padding: 2.5rem clamp(1.5rem, 4vw, 4rem) 5rem;
  gap: clamp(2rem, 4vw, 5rem);
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: center;
  min-height: min(740px, calc(100svh - var(--wr-bar)));
}
.site .hero .hero-words { order: -1; padding: 0; max-width: 37rem; }
.site .site-main > .hero:not(:has(.hero-picture)) {
  min-height: 0;
  grid-template-columns: 1fr;
  padding-block: 2rem 3rem;
}
.site .hero .hero-words h1 {
  font-size: calc(clamp(2.7rem, 4.1vw, 5rem) * var(--type-scale, 1));
  line-height: 1.08;
  font-weight: 400;
  font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 80;
  letter-spacing: -0.035em;
  max-width: 12ch;
  margin-block: 1.5rem;
}
.site .hero .hero-accent { color: inherit; font-style: normal; }
.site .hero .hero-kicker {
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--wr-paper-dim);
}
.site .hero .hero-sub {
  font-family: var(--wr-body);
  font-size: calc(1rem * var(--type-scale, 1));
  line-height: 1.8;
  max-width: 43ch;
}
.site .hero .hero-picture {
  position: relative;
  margin: 0;
  padding: 1.75rem 0;
  grid-column: auto;
  grid-row: auto;
  width: 100%;
  max-width: none;
}
.site .hero .hero-picture img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 700px;
  object-fit: contain;
  padding: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}
.site .hero .hero-picture::after {
  content: '';
  position: absolute;
  inset: -2rem -1.25rem;
  width: auto;
  height: auto;
  border: 0;
  transform: none;
  mask: none;
  background: url('./wonder-room-gallery/frame.svg') center / 100% 100% no-repeat;
  pointer-events: none;
}
.site .hero .hero-caption {
  padding: 0;
  margin-top: 1rem;
  font-size: 0.85rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--wr-paper-dim);
}
.site .hero .hero-action { margin-top: 2rem; }
/* A wrapped pair keeps the same left edge and a real gap between rows. */
.site .site-main .cta-band-action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
}
.site .site-main .cta-band-action a + .cta-band-action-two { margin-inline-start: 0; }
.site .site-main .hero-action a,
.site .site-main .split-action a,
.site .site-main .cta-action a {
  box-shadow: none;
  font-family: var(--wr-body);
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
  min-height: 48px;
}
.site .site-main .hero-action a::after,
.site .site-main .split-action a::after { content: none; }
.site .site-main .hero-action a:hover { transform: translateY(-2px); }

/* Built forms share Gallery's paper, ink and type instead of the default form palette. */
.site .built-form-section {
  --ink: var(--wr-ink);
  --ink-soft: var(--wr-ink-soft);
  --ink-mute: color-mix(in srgb, var(--wr-ink) 55%, var(--wr-paper));
  --accent: var(--wr-ink);
  --accent-strong: var(--wr-ink);
  --card: var(--wr-paper);
  --lift: none;
  --lift-raised: none;
  background: var(--look-band-ground, var(--wr-paper));
  color: var(--wr-ink);
  font-family: var(--wr-body);
}
.site .built-form {
  border-color: var(--ink-mute);
  border-top-color: var(--accent-gold);
  color: var(--wr-ink);
}
.site .built-form > .built-form-title,
.site .built-form-heading {
  font-family: var(--wr-display);
  font-weight: 400;
  color: var(--wr-ink);
}
.site .built-form-label { font-size: 1rem; line-height: 1.65; }
.site .built-form-help,
.site .built-form-part { font-size: 0.9rem; }
.site .built-form-submit {
  background: var(--accent-gold);
  color: var(--wr-ink);
  min-height: 48px;
}
.site .built-form-submit:hover,
.site .built-form-submit:disabled:hover {
  background: color-mix(in srgb, var(--accent-gold) 85%, var(--wr-paper));
}

/* A collection of substantial prints, with no wires, tilted mounts or prop shelves. */
.site .site-main h2,
.site .site-main h3 { font-variation-settings: 'SOFT' 0, 'WONK' 0; }
.site .split-picture img,
.site .card-picture img,
.site .gallery .gallery-picture img {
  padding: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}
.site .card-list:not(:has(.card-action)) .card:nth-child(7n + 3) .card-picture img {
  transform: none;
}
.site .card-list[data-align='grid']:has(.card-picture):not(:has(.card-action)) .cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3rem 2rem;
  border: 0;
  margin-top: 3rem;
}
.site .card-list[data-align='grid']:has(.card-picture):not(:has(.card-action)) .card {
  padding: 0;
  border: 0;
}
.site .card-list[data-align='grid']:has(.card-picture):not(:has(.card-action)) .card-picture img {
  aspect-ratio: 4 / 5;
  object-fit: contain;
}
.site .card-list[data-align='grid']:has(.card-picture):not(:has(.card-action)) .card h3 {
  font-family: var(--wr-display);
  font-size: 1.5rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: -0.02em;
  margin-block: 1.25rem 0.5rem;
}
.site .card-list[data-align='grid']:has(.card-action) .cards {
  gap: 2rem;
  background: transparent;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.site .card-list[data-align='grid']:has(.card-action) .card {
  min-height: 520px;
}
.site .card-list[data-align='grid']:has(.card-action) .card::after { content: none; }
.site .card-list[data-align='grid']:has(.card-action) .card h3 { font-size: 2rem; }
.site .card-list[data-align='grid']:has(.card-action) .card-action a {
  font-size: 1rem;
  min-height: 44px;
  text-transform: none;
  letter-spacing: 0;
}
/* Text-only rows describe the session; their opening paragraph is not a statistic. */
.site .card-list[data-align='rows']:not(:has(.card-picture)) .card-body p:first-child {
  font-family: var(--wr-body);
  font-size: inherit;
  font-weight: 400;
  color: var(--on-wall-soft);
}
.site a:focus-visible,
.site button:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; }
.site .build-table-empty { font-size: 1rem; line-height: 1.6; }

@media (min-width: 1001px) {
  .site .hero:not(:has(.hero-picture)) .hero-words {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 4rem;
    max-width: none;
    text-align: left;
  }
  .site .hero:not(:has(.hero-picture)) .hero-words h1 {
    grid-row: 1 / span 2;
    max-width: 18ch;
    margin: 0;
  }
  .site .hero:not(:has(.hero-picture)) .hero-sub { margin: 0; max-width: 60ch; }
  .site .hero:not(:has(.hero-picture)) .hero-action { margin: 1.5rem 0 0; }
}

@media (min-width: 720px) and (max-width: 1100px) {
  .site .site-header .site-menu { display: block; margin-left: auto; }
  .site .site-header .site-nav { display: none; }
  .site .site-header:has(.site-menu[open]) .site-nav {
    display: block;
    position: absolute;
    inset: 100% 0 auto;
    padding: 1rem 1.5rem;
    background: var(--wr-case);
    max-height: calc(100svh - var(--wr-bar));
    overflow: auto;
  }
  .site .site-header .menu { flex-direction: column; align-items: stretch; }
}

@media (max-width: 1000px) {
  .site { --wr-bar: 122px; --exhibit-above: 124px; }
  .site .site-header .site-logo { height: 92px; max-width: 160px; }
  .site .site-main > .hero { grid-template-columns: 1fr; min-height: 0; }
  .site .hero .hero-words { max-width: 48rem; order: 0; }
  .site .hero .hero-picture { order: -1; }
  .site .hero .hero-words h1 { max-width: 21ch; }
  .site .hero .hero-sub { max-width: 58ch; }
  .site .hero .hero-picture { padding-block: 1rem; }
  .site .hero .hero-picture img { max-height: 600px; }
}
@media (max-width: 600px) {
  .site .site-main > .hero { padding-top: 1rem; padding-bottom: 3rem; gap: 2rem; }
  .site .hero .hero-words h1 { font-size: calc(2.7rem * var(--type-scale, 1)); }
  .site .hero .hero-picture::after { inset: -1rem; }
  .site .card-list[data-align='grid']:has(.card-picture):not(:has(.card-action)) .cards,
  .site .card-list[data-align='grid']:has(.card-action) .cards { grid-template-columns: 1fr; }
  .site .card-list[data-align='grid']:has(.card-action) .card { min-height: 480px; }
}
@media (prefers-reduced-motion: reduce) {
  .site .hero .hero-picture::after { background-image: url('./wonder-room-gallery/frame-still.svg'); }
  .site .site-main .hero-action a:hover { transform: none; }
}

/* ---------------------------------------------------------------------------
   THE PRINT, BLED TO THE WALL — a hero with its picture edge to edge and the words beneath
   (`align: full-bleed`, `pose: below`).

   The photograph opens the page across the whole window, under the bar and nothing else:
   never taller than the window below the bar, never taller than the photograph's own
   shape, so a wide picture keeps its sides and a tall one is cropped only where the hero's
   `subject` says. Nothing is laid on it. The words stand under it on the paper as a gallery
   label, and the one flourish is the mark's own curl, signing a hairline between the two.
   `height: short` gives a page whose job is what follows (a collection) a lower print.
   --------------------------------------------------------------------------- */
.site .site-main .hero[data-align='full-bleed'][data-pose='below'] {
  --gh-gutter: clamp(1.5rem, 4vw, 4rem);
  --gh-row: 5rem;
  --gh-curl-w: 7.2rem;
  --gh-curl-h: 4rem;
  /* The curl's own line runs 80% down its drawing; this is where that falls below the row's middle. */
  --gh-line: calc(var(--gh-curl-h) * 0.3);
  --gh-hair: var(--wr-ink-soft);
  display: block;
  min-height: 0;
  padding: 0 0 clamp(4.5rem, 8vw, 8rem);
  background: var(--wr-paper);
}
/* The room's inks for everything on the label. Declared on the children: the arrival's
   per-room walls are written on the hero itself and outrank anything a hero rule says. */
.site .site-main .hero[data-align='full-bleed'][data-pose='below'] > * {
  --on-wall: var(--wr-ink);
  --on-wall-soft: var(--wr-ink-soft);
  --plaque: var(--wr-case);
  --plaque-ink: var(--wr-paper);
  color: var(--on-wall);
}
.site .site-main .hero[data-align='full-bleed'][data-pose='below'] > .hero-picture {
  position: relative;
  inset: auto;
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0;
  padding: 0;
  background: var(--wr-case);
}
.site .site-main .hero[data-align='full-bleed'][data-pose='below'] > .hero-picture img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  min-height: min(26rem, 72vw);
  max-height: calc(100svh - var(--wr-bar));
  margin: 0;
  padding: 0;
  object-fit: cover;
  object-position: 50% 50%;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}
.site .site-main .hero[data-align='full-bleed'][data-pose='below'][data-height='short'] > .hero-picture img {
  max-height: min(calc(100svh - var(--wr-bar)), max(20rem, 52svh));
}
/* Where the subject sits, measured against her photographs at 1440, 768 and 390. */
.site .site-main .hero[data-align='full-bleed'][data-pose='below'][data-subject='top'] > .hero-picture img { object-position: 50% 0%; }
.site .site-main .hero[data-align='full-bleed'][data-pose='below'][data-subject='high'] > .hero-picture img { object-position: 50% 22%; }
.site .site-main .hero[data-align='full-bleed'][data-pose='below'][data-subject='middle'] > .hero-picture img { object-position: 50% 46%; }
.site .site-main .hero[data-align='full-bleed'][data-pose='below'][data-subject='low'] > .hero-picture img { object-position: 50% 82%; }

/* The signature: the mark's curl, then a hairline to the far gutter, in the row under the print. */
.site .site-main .hero[data-align='full-bleed'][data-pose='below'] > .hero-picture::after {
  content: '';
  position: absolute;
  inset: 100% var(--gh-gutter) auto;
  width: auto;
  height: var(--gh-row);
  border: 0;
  transform: none;
  mask: none;
  pointer-events: none;
  background:
    url('./wonder-room-gallery/signature.svg') 0 50% / var(--gh-curl-w) var(--gh-curl-h) no-repeat,
    linear-gradient(var(--gh-hair), var(--gh-hair)) calc(var(--gh-curl-w) - 1px) calc(50% + var(--gh-line)) / calc(100% - var(--gh-curl-w) + 1px) 1px no-repeat;
}
/* A caption is the plate at the hairline's far end. */
.site .site-main .hero[data-align='full-bleed'][data-pose='below'] > .hero-picture .hero-caption {
  position: absolute;
  z-index: 1;
  top: calc(100% + var(--gh-row) / 2 + var(--gh-line));
  right: var(--gh-gutter);
  transform: translateY(-50%);
  margin: 0;
  padding: 0 0 0 1.25rem;
  background: var(--wr-paper);
  font-family: var(--wr-body);
  font-size: 0.85rem;
  line-height: 1.4;
  letter-spacing: 0.01em;
  text-transform: none;
  text-align: end;
  color: var(--wr-ink-soft);
}

.site .site-main .hero[data-align='full-bleed'][data-pose='below'] .hero-words {
  position: relative;
  z-index: 1;
  order: 0;
  max-width: none;
  margin: 0;
  padding: calc(var(--gh-row) + clamp(1.25rem, 3vw, 3rem)) var(--gh-gutter) 0;
}
.site .site-main .hero[data-align='full-bleed'][data-pose='below'] .hero-kicker {
  margin: 0 0 1.25rem;
  font-family: var(--wr-body);
  font-size: 0.9rem;
  color: var(--wr-ink-soft);
}
.site .site-main .hero[data-align='full-bleed'][data-pose='below'] .hero-words h1 {
  max-width: 17ch;
  margin: 0;
  font-size: calc(clamp(2.5rem, 4.4vw + 1.2rem, 4.75rem) * var(--type-scale, 1));
  line-height: 1.04;
  font-weight: 400;
  font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 144;
  letter-spacing: -0.035em;
  text-wrap: balance;
  color: var(--wr-ink);
}
.site .site-main .hero[data-align='full-bleed'][data-pose='below'] .hero-sub {
  max-width: 44ch;
  margin: 1.5rem 0 0;
  font-family: var(--wr-body);
  font-size: calc(1.0625rem * var(--type-scale, 1));
  line-height: 1.75;
  color: var(--wr-ink);
}
.site .site-main .hero[data-align='full-bleed'][data-pose='below'] .hero-action { margin: 2rem 0 0; }
.site .site-main .hero[data-align='full-bleed'][data-pose='below'] .hero-action a {
  display: inline-flex;
  align-items: center;
  padding: 0.95rem 1.75rem;
  border: 1px solid var(--wr-case);
  border-radius: 0;
  background: var(--wr-case);
  color: var(--wr-paper);
  font-weight: 400;
  transition: background-color 0.35s var(--wr-settle), color 0.35s var(--wr-settle), transform 0.35s var(--wr-settle);
}
.site .site-main .hero[data-align='full-bleed'][data-pose='below'] .hero-action a:hover {
  background: transparent;
  color: var(--wr-ink);
  box-shadow: none;
}
/* The site's ring is `currentColor`, which is the paper label on this button: ink instead. */
.site .site-main .hero[data-align='full-bleed'][data-pose='below'] .hero-action a:focus-visible {
  outline: 2px solid var(--wr-ink);
  outline-offset: 4px;
}

@media (min-width: 1001px) {
  /* The label as a spread: the title across the wider column, the narrative and the action
     on the narrower one, finishing on the title's last line. */
  .site .site-main .hero[data-align='full-bleed'][data-pose='below'] .hero-words {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    column-gap: clamp(3rem, 7vw, 8rem);
    grid-template-rows: auto 1fr auto auto;
    align-items: end;
  }
  .site .site-main .hero[data-align='full-bleed'][data-pose='below'] .hero-kicker { grid-column: 1; grid-row: 1; }
  .site .site-main .hero[data-align='full-bleed'][data-pose='below'] .hero-words h1 { grid-column: 1; grid-row: 2 / 5; }
  /* A plate above the title keeps the title under it, however short the title is. */
  .site .site-main .hero[data-align='full-bleed'][data-pose='below'] .hero-words:has(.hero-kicker) h1 { align-self: start; }
  .site .site-main .hero[data-align='full-bleed'][data-pose='below'] .hero-sub { grid-column: 2; grid-row: 3; margin: 0; }
  .site .site-main .hero[data-align='full-bleed'][data-pose='below'] .hero-action { grid-column: 2; grid-row: 4; }
}
@media (max-width: 600px) {
  .site .site-main .hero[data-align='full-bleed'][data-pose='below'] {
    --gh-row: 4rem;
    --gh-curl-w: 5.4rem;
    --gh-curl-h: 3rem;
    padding-bottom: 3.5rem;
  }
}

/* The arrival: the print is unveiled from the bar down, the curl and its hairline are signed
   left to right, and the label rises (the base sheet's rise). Reduced motion: all still. */
@media (prefers-reduced-motion: no-preference) {
  .site .site-main .hero[data-align='full-bleed'][data-pose='below'] > .hero-picture img {
    animation: gh-unveil 1.5s var(--wr-settle) both;
  }
  .site .site-main .hero[data-align='full-bleed'][data-pose='below'] > .hero-picture::after {
    animation: gh-sign 2.2s cubic-bezier(0.65, 0, 0.35, 1) 0.9s both;
  }
  .site .site-main .hero[data-align='full-bleed'][data-pose='below'] > .hero-picture .hero-caption {
    animation: gh-arrive 0.8s ease 2.6s both;
  }
  .site .site-main .hero[data-align='full-bleed'][data-pose='below'] .hero-words > * {
    animation-delay: 0.5s;
  }
  .site .site-main .hero[data-align='full-bleed'][data-pose='below'] .hero-words > *:nth-child(2) { animation-delay: 0.62s; }
  .site .site-main .hero[data-align='full-bleed'][data-pose='below'] .hero-words > *:nth-child(3) { animation-delay: 0.74s; }
  .site .site-main .hero[data-align='full-bleed'][data-pose='below'] .hero-words > *:nth-child(4) { animation-delay: 0.86s; }
}
@keyframes gh-unveil {
  from { clip-path: inset(0 0 100% 0); }
  to { clip-path: inset(0 0 0 0); }
}
/* The pen moves left to right: the curl, then the hairline. */
@keyframes gh-sign {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}
@keyframes gh-arrive {
  from { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .site .site-main .hero[data-align='full-bleed'][data-pose='below'] .hero-action a:hover { transform: none; }
}