/* ==========================================================================
   HOME - HERITAGE ("the hall")
   The second section of the home page. One flat field of the site's warm ink
   (the same ink as the intro, menu and page transition) between two lintel
   beams - a quiet band with a gold double rule, the plum seal on the top
   one and a knot on the bottom. Inside, no borders at all: the content is
   type, space and the occasional gold accent.

   Index-only. about.css still serves History / Benefits / Tiago, so nothing
   here reuses its class names.
   ========================================================================== */

/* The home footer (home-footer.css) shares this ink and these beams. */
.hall,
.site-foot {
  --hall-ink: oklch(0.17 0.012 62);
  --hall-band: oklch(0.205 0.014 62);
  --hall-paper: oklch(0.93 0.014 88);
  --hall-paper-2: oklch(0.93 0.014 88 / 0.78);
  --hall-paper-3: oklch(0.93 0.014 88 / 0.6);
  --hall-gold: oklch(0.75 0.088 80);
  --hall-gold-2: oklch(0.75 0.088 80 / 0.55);
  --hall-gold-3: oklch(0.75 0.088 80 / 0.22);
  --hall-inset: clamp(16px, 4vw, 64px);
  --hall-beam: clamp(48px, 5vw, 64px);
  --hall-out: cubic-bezier(0.16, 1, 0.3, 1);

  position: relative;
  overflow: hidden;
  color: var(--hall-paper);
  background:
    radial-gradient(70% 45% at 50% 0%, oklch(0.205 0.015 62) 0%, transparent 70%),
    var(--hall-ink);
}

/* ---------- beams ---------- */

.hall-beam {
  position: relative;
  z-index: 2;
  height: var(--hall-beam);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 calc(var(--hall-inset) + 6px);
  background: var(--hall-band);
}

/* The double rule on the beam's inner edge: a firm line, then a faint one. */
.hall-beam::before,
.hall-beam::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
}

.hall-beam--top::before    { bottom: 0;    background: var(--hall-gold-2); }
.hall-beam--top::after     { bottom: -6px; background: var(--hall-gold-3); }
.hall-beam--bottom::before { top: 0;       background: var(--hall-gold-2); }
.hall-beam--bottom::after  { top: -6px;    background: var(--hall-gold-3); }

/* Centre line through the band, fading out toward the posts. */
.hall-rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--hall-gold-2));
  transform-origin: right center;
}

.hall-rule:last-child {
  background: linear-gradient(to left, transparent, var(--hall-gold-2));
  transform-origin: left center;
}

/* Bottom beams close each section with three plum buds - the same buds that
   run along the corner branches - where the top beam opens it with the seal. */
.hall-buds {
  flex: none;
  display: flex;
  align-items: center;
  gap: 7px;
}

.hall-buds span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--hall-gold);
}

.hall-buds span:nth-child(2) {
  width: 9px;
  height: 9px;
  background: none;
  box-shadow: inset 0 0 0 1px var(--hall-gold);
}

/* Top beam: the plum seal in one colour. The mask is a single-colour cut of
   the logo (petals solid, stamen lines cut out so the beam shows through),
   painted in the hall gold. */
.hall-seal {
  flex: none;
  width: clamp(26px, 2.2vw, 34px);
  aspect-ratio: 1;
  background: var(--hall-gold);
  -webkit-mask: url("/html/Images/index/myvtsafeguardlogo-mono.png") center / contain no-repeat;
  mask: url("/html/Images/index/myvtsafeguardlogo-mono.png") center / contain no-repeat;
}

/* ---------- content ---------- */

.hall-inner {
  position: relative;
  z-index: 2;
  max-width: 1560px;
  margin: 0 auto;
  padding:
    clamp(3.25rem, 5vw, 5rem)
    calc(var(--hall-inset) + clamp(1.5rem, 3.5vw, 4rem))
    clamp(5rem, 8vw, 7.5rem);
}

/* Heading: centred stack - the Chinese in gold, the English title on two
   lines under it, a short gold rule. The introduction below spans the full
   width in two columns. */
.hall-head {
  display: grid;
  justify-items: center;
  text-align: center;
}

.hall .hall-zh {
  font-family: "Yuji Boku", "Noto Serif SC", serif;
  font-size: clamp(2.2rem, 3vw + 1rem, 3.5rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.18em;
  margin-right: -0.18em;
  color: var(--hall-gold);
  z-index: auto;
}

.hall .hall-title {
  margin-top: 1.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(1.45rem, 1.6vw + 0.9rem, 2.5rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--hall-paper);
  z-index: auto;
}

/* Each line rises out of its own mask. */
.hall-title-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
}

.hall-title-line > span {
  display: block;
}

.hall-divider {
  display: block;
  width: 56px;
  height: 1px;
  margin-top: 2.25rem;
  background: var(--hall-gold);
}

.hall-intro {
  justify-self: stretch;
  text-align: left;
  margin-top: clamp(2.75rem, 4.5vw, 4rem);
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  column-gap: clamp(2rem, 5vw, 6rem);
  align-items: start;
}

.hall .hall-lead,
.hall .hall-body {
  font-family: var(--font-text, "Source Serif 4", Georgia, serif);
  font-weight: 400;
  text-wrap: pretty;
  z-index: auto;
}

.hall .hall-lead {
  font-size: clamp(1.2rem, 0.7vw + 0.95rem, 1.55rem);
  line-height: 1.55;
  color: var(--hall-paper);
}

.hall .hall-body {
  margin-top: 0.3rem;
  font-size: clamp(1.02rem, 0.35vw + 0.92rem, 1.2rem);
  line-height: 1.75;
  color: var(--hall-paper-3);
}

/* ---------- the three pillars: a selector and one panel at a time ---------- */

.hall-pillars {
  margin-top: clamp(5rem, 8vw, 7.5rem);
}

/* Without JS: no selector, the three panels simply stack. */
.hall-pillars:not(.is-tabbed) .hall-tabs {
  display: none;
}

.hall-pillars:not(.is-tabbed) .hall-panels {
  display: grid;
  gap: 4rem;
}

/* Tabbed: a column of three plaques on the left, the chosen pillar on a
   framed plaque on the right. */
.hall-pillars.is-tabbed {
  display: grid;
  grid-template-columns: minmax(18rem, 0.78fr) 1.6fr;
  column-gap: clamp(2rem, 4.5vw, 5rem);
  align-items: stretch;
}

.hall-tabs {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.6rem;
}

/* A plaque per pillar: the seal, then the romanised name and the term. */
.hall .hall-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1rem 1.25rem 1rem 1.4rem;
  background: none;
  border: 1px solid transparent;
  text-align: left;
  color: var(--hall-paper);
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.4s ease, background-color 0.5s ease, border-color 0.5s ease;
}

.hall .hall-tab:hover {
  opacity: 0.85;
}

.hall .hall-tab[aria-selected="true"] {
  opacity: 1;
  background-color: oklch(0.75 0.088 80 / 0.06);
  border-color: oklch(0.75 0.088 80 / 0.16);
}

.hall .hall-tab:focus-visible {
  outline: 1px solid var(--hall-gold);
  outline-offset: 4px;
}

/* The seal (a chop): the characters stacked top to bottom in a square ruled
   in gold, with a fainter second rule outside it. The chosen pillar's seal
   is stamped - solid gold, ink characters. */
.hall-tab-glyph {
  flex: none;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border: 1px solid oklch(0.75 0.088 80 / 0.55);
  outline: 1px solid oklch(0.75 0.088 80 / 0.18);
  outline-offset: 3px;
  font-family: "Yuji Boku", "Noto Serif SC", serif;
  font-size: 1.3rem;
  line-height: 1.05;
  writing-mode: vertical-rl;
  text-orientation: upright;
  color: var(--hall-gold);
  transition: background-color 0.5s ease, color 0.5s ease, outline-color 0.5s ease;
}

.hall .hall-tab[aria-selected="true"] .hall-tab-glyph {
  background-color: var(--hall-gold);
  color: var(--hall-ink);
  outline-color: oklch(0.75 0.088 80 / 0.45);
}

.hall-tab-meta {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.hall-tab-roman,
.hall .hall-roman {
  font-family: "Cinzel", Georgia, serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hall-gold);
}

.hall-tab-term {
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(0.92rem, 0.3vw + 0.82rem, 1.05rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.02em;
}

/* The marker: a gold bar on the chosen plaque's edge that slides between
   them. Size and position come from home-hall.js (--marker-*), so it works
   for the vertical (desktop) and horizontal (phone) selector. */
.hall-tab-marker {
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: var(--marker-size, 0px);
  background: var(--hall-gold);
  transform: translateY(var(--marker-pos, 0px));
  transition: transform 0.6s var(--hall-out);
}

/* The plaque the chosen pillar sits on - lacquer, edged in gold leaf.
   Border: a 1px gold edge that catches the light (brightest at the top-left
   corner, dimmer round the far side), a fainter inner rule, the site's gold
   diamond on each corner and a short clasp at the top centre.
   Background: a lacquer gradient lit warm from the top, a faint silk weave
   and a soft vignette into the edges.
   Panels share one grid cell, so the plaque is always as tall as the
   longest pillar and nothing below jumps when you switch. */
.hall-pillars.is-tabbed .hall-panels {
  --edge-hi: oklch(0.82 0.09 84 / 0.85);
  --edge-lo: oklch(0.75 0.088 80 / 0.22);
  position: relative;
  display: grid;
  border: 1px solid transparent;
  background:
    radial-gradient(85% 55% at 50% 0%, oklch(0.75 0.088 80 / 0.075), transparent 70%) padding-box,
    repeating-linear-gradient(45deg, oklch(1 0 0 / 0.012) 0 1px, transparent 1px 5px) padding-box,
    repeating-linear-gradient(-45deg, oklch(0 0 0 / 0.08) 0 1px, transparent 1px 5px) padding-box,
    linear-gradient(180deg, oklch(0.222 0.017 62), oklch(0.178 0.013 60)) padding-box,
    linear-gradient(135deg, var(--edge-hi), var(--edge-lo) 38%, var(--edge-lo) 62%, oklch(0.75 0.088 80 / 0.55)) border-box;
  box-shadow:
    inset 0 0 70px oklch(0 0 0 / 0.35),
    inset 0 1px 0 oklch(0.85 0.08 84 / 0.12),
    0 46px 90px -50px oklch(0 0 0 / 0.85);
}

.hall-pillars.is-tabbed .hall-panels::before,
.hall-pillars.is-tabbed .hall-panels::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

/* Inner rule. */
.hall-pillars.is-tabbed .hall-panels::before {
  inset: 8px;
  border: 1px solid oklch(0.75 0.088 80 / 0.1);
}

/* A gold diamond on each corner of the outer edge, ringed in the ink so it
   sits off the border line, and the clasp: a short brighter bar laid over
   the top edge at its centre (this layer reaches 7px past the border). */
.hall-pillars.is-tabbed .hall-panels::after {
  --d: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpolygon points='6,0.9 11.1,6 6,11.1 0.9,6' fill='%23c9a467' stroke='%23161210' stroke-width='1.8'/%3E%3C/svg%3E");
  inset: -7px;
  background:
    var(--d) left top / 13px 13px no-repeat,
    var(--d) right top / 13px 13px no-repeat,
    var(--d) left bottom / 13px 13px no-repeat,
    var(--d) right bottom / 13px 13px no-repeat,
    linear-gradient(to right, transparent, oklch(0.88 0.09 86), transparent) 50% 6px / 140px 3px no-repeat;
}

.hall-pillars.is-tabbed .hall-panel {
  grid-area: 1 / 1;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.hall-pillars.is-tabbed .hall-panel.is-active {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.45s ease 0.12s, visibility 0s;
}

.hall-panels {
  counter-reset: pillar;
}

.hall-panel {
  position: relative;
  counter-increment: pillar;
}

.hall-pillars.is-tabbed .hall-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2.75rem, 4.8vw, 4.5rem) clamp(2.25rem, 5vw, 5rem);
}

/* "I · Faat Do": the pillar's number leads its name. */
.hall .hall-roman::before {
  content: counter(pillar, upper-roman) "\00a0\00a0\00b7\00a0\00a0";
}

/* Words settle in, one after another, when a pillar is chosen. */
.hall-pillars.is-tabbed .hall-panel > * {
  transform: translateY(16px);
  transition: transform 0.3s ease;
}

.hall-pillars.is-tabbed .hall-panel.is-active > * {
  transform: none;
  transition: transform 0.9s var(--hall-out);
}

.hall-pillars.is-tabbed .hall-panel.is-active > .hall-term { transition-delay: 0.06s; }
.hall-pillars.is-tabbed .hall-panel.is-active > .hall-desc { transition-delay: 0.12s; }

.hall .hall-term {
  margin-top: 0.9rem;
  max-width: 20ch;
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(1.7rem, 1.6vw + 1.1rem, 2.8rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: 0.005em;
  color: var(--hall-paper);
  z-index: auto;
}

/* A short gold rule between the title and the text. */
.hall .hall-term::after {
  content: "";
  display: block;
  width: 44px;
  height: 1px;
  margin-top: 1.4rem;
  background: var(--hall-gold-2);
}

.hall .hall-desc {
  margin-top: 1.4rem;
  max-width: 40rem;
  font-family: var(--font-text, "Source Serif 4", Georgia, serif);
  font-size: clamp(1.08rem, 0.4vw + 0.96rem, 1.3rem);
  font-weight: 400;
  line-height: 1.72;
  color: var(--hall-paper-2);
  text-wrap: pretty;
  z-index: auto;
}

/* ---------- quote ---------- */

.hall-quote {
  margin: clamp(5rem, 8vw, 7.5rem) auto 0;
  max-width: 60rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hall-quote::before {
  content: "";
  display: block;
  width: 1px;
  height: 3rem;
  margin-bottom: 2rem;
  background: linear-gradient(to bottom, transparent, var(--hall-gold));
}

.hall-quote blockquote {
  margin: 0;
}

.hall .hall-quote p {
  font-family: var(--font-text, "Source Serif 4", Georgia, serif);
  font-size: clamp(1.5rem, 1.4vw + 1rem, 2.2rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.35;
  color: var(--hall-paper);
  text-wrap: balance;
  z-index: auto;
}

.hall-quote figcaption {
  margin-top: 1.25rem;
  font-family: "Cinzel", Georgia, serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  margin-right: -0.14em;
  text-transform: uppercase;
  color: var(--hall-gold);
}

/* ---------- call to action: solid gold, no outline ---------- */

/* The call to action: placement only - the look is the shared CTA
   (home-cta.css). */
.hall .hall-cta {
  display: flex;
  width: fit-content;
  margin: clamp(3rem, 5vw, 4rem) auto 0;
}

/* ---------- small screens ---------- */

/* Mid widths: a narrower selector, so the plaque keeps a comfortable measure. */
@media (max-width: 1200px) and (min-width: 861px) {
  .hall-pillars.is-tabbed {
    grid-template-columns: minmax(15rem, 0.7fr) 1.6fr;
  }

}

@media (max-width: 860px) {
  .hall-intro {
    grid-template-columns: 1fr;
    row-gap: 1.25rem;
  }

  /* Selector becomes a row of three seals above the plaque. */
  .hall-pillars.is-tabbed {
    grid-template-columns: 1fr;
    row-gap: 1.75rem;
  }

  .hall-tabs {
    flex-direction: row;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0 0 0.9rem;
  }

  .hall .hall-tab {
    flex: 1;
    flex-direction: column;
    gap: 0.7rem;
    padding: 0.85rem 0.25rem;
  }

  .hall .hall-tab[aria-selected="true"] {
    background-color: transparent;
    border-color: transparent;
  }

  .hall-tab-term {
    display: none;
  }

  .hall-tab-meta {
    align-items: center;
  }

  .hall-tab-roman {
    font-size: 0.7rem;
  }

  .hall-tab-marker {
    top: auto;
    bottom: 0;
    width: var(--marker-size, 0px);
    height: 2px;
    transform: translateX(var(--marker-pos, 0px));
  }

  .hall-pillars.is-tabbed .hall-panel {
    padding: 2.5rem 1.6rem 2.6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hall-tab-marker,
  .hall .hall-tab,
  .hall-tab-glyph,
  .hall-pillars.is-tabbed .hall-panel,
  .hall-pillars.is-tabbed .hall-panel > * {
    transition: none !important;
  }
}