/* UBC — the light edition: the same chamber in white, warm ivory and a deeper gold */

:root {
  --bg: #FFFFFF;
  --bg-2: #F7F4EF;
  --bg-3: #EFEAE2;
  --gold: #8A6A30;
  --gold-hi: #7D5F27;
  --gold-lo: #B89B66;
  --ivory: #17161A;
  --text: #3B3832;
  --dim: #6A655C;
  --line: rgba(138, 106, 48, .32);
  --line-soft: rgba(23, 22, 26, .11);
  color-scheme: light;
}

html { scrollbar-color: var(--gold-lo) var(--bg-2); }
::-webkit-scrollbar-track { background: var(--bg-2); }
::-webkit-scrollbar-thumb { background: #D8CDBA; border-color: var(--bg-2); }
::selection { background: var(--gold); color: #FFFFFF; }

/* buttons: white on deep gold, ink outlines */
.btn-gold { color: #FFFFFF; }
.btn-gold::before { background: var(--gold-hi); }
.btn-ghost { border-color: rgba(23, 22, 26, .55); }
.btn-ghost::before { background: rgba(138, 106, 48, .08); }
.scale-options button[aria-pressed="true"], .seek-go:hover { color: #FFFFFF; }

/* navigation: the logo keeps its own white ground */
.nav-plaque img { filter: none; mix-blend-mode: multiply; }
.nav.is-scrolled { background: rgba(255, 255, 255, .9); border-bottom-color: var(--line-soft); }
.menu { background: radial-gradient(120% 70% at 85% 0%, rgba(138, 106, 48, .08), transparent 60%), var(--bg); }

/* opening: the boardroom in daylight, washed so ink reads over it */
.hero::before {
  background:
    radial-gradient(62% 50% at 50% 48%, rgba(255, 255, 255, .86), rgba(255, 255, 255, .55) 70%, rgba(255, 255, 255, .25)),
    linear-gradient(180deg, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, .2) 26%, rgba(255, 255, 255, .2) 58%, rgba(255, 255, 255, 1) 100%);
}
/* the warm boardroom photo is dim: lift it so the wash reads as light, not fog */
.hero-media img { filter: brightness(1.12) contrast(.92) saturate(.95); }
.hero-rule { background: rgba(23, 22, 26, .45); }
.bar-line { background: rgba(23, 22, 26, .16); }
.bar-line::after { background: var(--gold); }
.bar-end .bar-value { color: var(--gold); }

/* register: gold seats, the waiting seat in ink */
.register { background: radial-gradient(70% 60% at 50% 70%, rgba(138, 106, 48, .07), transparent 70%); }
.seat.is-open { stroke: rgba(138, 106, 48, .45); }
.seat.is-open.is-hover { fill: rgba(138, 106, 48, .25); stroke: var(--gold); }
.seat.is-taken.is-hover { fill: var(--gold-hi); }
.seat.is-picked { stroke: var(--ivory); }
.seat-halo { stroke: var(--gold); }
.seek input::placeholder { color: #8C877E; }
.dot-open { border-color: rgba(138, 106, 48, .6); }

/* films: lighter frame, softer shadow */
.film-frame { box-shadow: 0 0 0 1px var(--line-soft), 0 24px 48px rgba(23, 22, 26, .14); }
.film-play { border-color: rgba(255, 255, 255, .9); background: rgba(23, 22, 26, .4); }
.film-play svg { fill: #FFFFFF; }
.film-frame video { filter: none; }

/* admission: unlit numerals in a pale gold that still reads at display size */
.stage-num { color: #76716A; }
.journey::after { background: linear-gradient(90deg, var(--gold-lo), var(--gold)); }
@media (max-width: 899px) { .journey::after { background: linear-gradient(180deg, var(--gold-lo), var(--gold)); } }

/* impact: the dial in four golds, darkest for the largest share */
.seg-1 { stroke: #7D5F27; }
.seg-2 { stroke: #A8843F; }
.seg-3 { stroke: #C9AE79; }
.seg-4 { stroke: #E2D3B4; }
.key-1 { background: #7D5F27; } .key-2 { background: #A8843F; } .key-3 { background: #C9AE79; } .key-4 { background: #E2D3B4; }
.ledger tbody tr:hover { background: rgba(138, 106, 48, .05); }

/* council */
.lineage::after { background: linear-gradient(180deg, var(--gold), var(--gold-lo)); }
.office.is-lit::before { background: var(--gold); box-shadow: 0 0 0 4px rgba(138, 106, 48, .14); }

/* photographs: true colour on white */
.phil-photo img, .nom-photo img, .causes img { filter: none; }
.phil-photo:hover img, .nom-photo:hover img, .causes figure:hover img { filter: saturate(1.06) brightness(1.03); }
.phil-photo::after, .nom-photo::after, .causes figure::after { box-shadow: inset 0 0 0 1px rgba(23, 22, 26, .08); }
.phil-photo:hover::after, .nom-photo:hover::after, .causes figure:hover::after { box-shadow: inset 0 0 0 1px rgba(138, 106, 48, .55); }

/* nomination form on ivory */
.nominate-sec { background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%); }
.field input { border-bottom-color: rgba(23, 22, 26, .3); }
.field input:hover { border-bottom-color: rgba(23, 22, 26, .55); }
.form-status.is-void { color: #A63A2C; }
.field input[aria-invalid="true"] { border-bottom-color: #A63A2C; box-shadow: 0 1px 0 #A63A2C; }
.form-status a { color: var(--ivory); }

/* footer: a warm ivory base */
.footer { background: var(--bg-2); }
/* the logo's own white ground is gone: the transparent mark sits on the page */
.nav-plaque img { mix-blend-mode: normal; }

/* hero bar: the FICF mark and Dr Ajit Ravi's portrait sit left of their names */
.bar-item.has-mark { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 14px; row-gap: 8px; align-items: end; }
.bar-mark { grid-row: 1 / span 2; align-self: end; display: block; }
.bar-mark-logo { width: auto; height: clamp(40px, 3.6vw, 52px); }
.bar-mark-portrait { width: clamp(44px, 3.9vw, 56px); height: clamp(44px, 3.9vw, 56px); border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--line); }
.bar-item.has-mark .bar-label, .bar-item.has-mark .bar-value { grid-column: 2; }
@media (max-width: 760px) { .bar-mark-logo { height: 38px; } .bar-item.has-mark { column-gap: 10px; } }

/* who sits in the room: numbered roles, five seats that light with the row in the chair */
.room[data-room] .room-head { display: flex; flex-direction: column; gap: 26px; }
.room-seats { display: none; width: 184px; height: auto; overflow: visible; }
.room-table { fill: none; stroke: var(--line-soft); stroke-width: 1; }
.room-seat { fill: transparent; stroke: var(--gold-lo); stroke-width: 1.2; cursor: pointer; transition: fill .45s var(--ease), stroke .45s var(--ease), r .45s var(--ease); }
.room-seat.is-on { fill: var(--gold); stroke: var(--gold); r: 8.5; }
.room-count { display: none; font-family: var(--display); font-size: 26px; line-height: 1; color: var(--dim); letter-spacing: .04em; }
.room-count span { color: var(--gold); }
@media (min-width: 980px) { .room-seats, .room-count { display: block; } }

.room[data-room] .room-list li {
  display: grid; grid-template-columns: 3.2ch minmax(0, 1fr); align-items: baseline; column-gap: 14px;
  cursor: default; transition: opacity .45s var(--ease), color .45s var(--ease);
}
.room[data-room] .room-list li::before { display: none; }
.room[data-room] .room-list li::after {
  content: ""; position: absolute; left: calc(3.2ch + 14px); right: 0; bottom: 2px; height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease);
}
.room-num { font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: .08em; color: var(--gold-lo); transition: color .45s var(--ease); }
.room[data-room].has-active .room-list li { opacity: .38; }
.room[data-room] .room-list li.is-active { opacity: 1; color: var(--ivory); }
.room[data-room] .room-list li.is-active .room-num { color: var(--gold); }
.room[data-room] .room-list li.is-active::after { transform: scaleX(1); }
.room[data-room] .room-list li:hover { color: var(--ivory); }
@media (prefers-reduced-motion: reduce) {
  .room-seat, .room[data-room] .room-list li, .room[data-room] .room-list li::after, .room-num { transition: none; }
}
@media (max-width: 979px) {
  .room[data-room] .room-list li { grid-template-columns: 34px minmax(0, 1fr); column-gap: 8px; }
  .room[data-room] .room-list li::after { left: 42px; }
}

/* membership: a gold marker rides the journey line, slipping behind each numeral as it passes */
.journey-wrap { position: relative; }
.journey-dot {
  position: absolute; z-index: 0; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 4px rgba(138, 106, 48, .14);
  opacity: 0; transition: opacity .5s var(--ease);
}
.journey-wrap.is-moving .journey-dot { opacity: 1; }
@media (min-width: 900px) { .journey-dot { top: calc(clamp(44px, 4.6vw, 64px) / 2 + .5px); left: calc(var(--p, 1) * 100%); } }
@media (max-width: 899px) { .journey-dot { left: 6.5px; top: calc(8px + var(--p, 1) * (100% - 16px)); } }

/* a step you point at leans forward: numeral lifts, title takes the gold */
.stage-num { transition: color .6s var(--ease), translate .5s var(--ease); }
.stage h3 { transition: color .4s var(--ease); }
.stage:hover .stage-num { color: var(--gold); translate: 0 -4px; }
.stage:hover h3 { color: var(--gold-hi); }

/* the terms' rule draws in when it arrives */
.terms[data-terms] { position: relative; border-top-color: transparent; }
.terms[data-terms]::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--line);
  transform-origin: left; transform: scaleX(var(--t, 1));
}
@media (prefers-reduced-motion: reduce) {
  .stage-num, .stage h3 { transition: none; }
  .stage:hover .stage-num { translate: none; }
}

/* footer: three columns that share one top line; links set as a tidy grid instead of a ragged row */
.footer .foot-plaque img { display: block; }
.foot-links { display: grid; grid-template-columns: repeat(2, max-content); gap: 18px 40px; align-content: start; }
.foot-links a { padding: 0 0 6px; line-height: 1; }
.foot-contact .contact-label { line-height: 1; }
@media (min-width: 900px) {
  .foot-top { grid-template-columns: minmax(0, 1fr) auto auto; gap: 0 clamp(56px, 7vw, 112px); }
  .foot-links { grid-template-columns: repeat(3, max-content); gap: 22px clamp(32px, 3.4vw, 56px); padding-top: 2px; }
}
@media (max-width: 899px) { .foot-links { gap: 20px 32px; } }

/* register: seats sized by their row, so the spokes taper toward the well */
.chamber-svg[data-chamber="spokes"] .seat { r: var(--sr); }
.chamber-svg[data-chamber="spokes"] .seat.is-open { stroke-width: 1; }
@media (max-width: 700px) { .chamber-svg[data-chamber="spokes"] .seat { r: calc(var(--sr) * 1.3); } }

/* films: two contained cards beside the heading instead of a full-bleed strip */
.films .film-row { width: auto; margin-left: 0; display: flex; flex-wrap: wrap; align-items: stretch; gap: 24px; }
.films .film { flex: none; padding: 10px 10px 16px; background: var(--bg); box-shadow: 0 0 0 1px var(--line-soft), 0 18px 40px rgba(23, 22, 26, .08); transition: box-shadow .5s var(--ease), translate .5s var(--ease); }
.films .film:hover { translate: 0 -4px; box-shadow: 0 0 0 1px var(--line), 0 24px 48px rgba(23, 22, 26, .12); }
.films .film-frame { box-shadow: none; }
.films .film figcaption { margin-top: 14px; padding: 0 4px; font-size: 14px; }
.films .film-wide { width: min(100%, 520px); }
.films .film-tall { width: 178px; margin: 0; }
.films .film-tall figcaption { padding-left: 4px; }
.films .film-play { width: 60px; height: 60px; margin: -30px 0 0 -30px; }
.films .film-play svg { width: 20px; height: 20px; margin-left: 3px; }
@media (min-width: 1100px) {
  .films .wrap { display: grid; grid-template-columns: minmax(300px, 1fr) auto; align-items: center; column-gap: clamp(48px, 5vw, 88px); }
  .films .sec-head { margin-bottom: 0; }
}
@media (max-width: 899px) {
  .films .film-row { gap: 18px; }
  .films .film-wide { width: 100%; }
  .films .film-tall { width: min(56%, 220px); }
}
@media (prefers-reduced-motion: reduce) { .films .film, .films .film:hover { transition: none; translate: none; } }

/* hero bar: the scroll cue sits on the page's centre line, whatever width the items beside it take */
.hero-bar { position: relative; }
/* spanning every column makes the whole bar its containing block, not the third track */
.bar-scroll { position: absolute; grid-column: 1 / -1; left: 0; right: 0; bottom: 0; width: max-content; margin: 0 auto; }
@media (max-width: 1023px) { .bar-scroll { display: none; } }

/* photo drift: the oversized layer is sized from the frame's height (absolute insets), not its width,
   so its ±6% travel never uncovers an edge on tall or wide frames */
figure .drift { position: absolute; left: 0; right: 0; top: -10%; bottom: -10%; height: auto; margin: 0; }
figure .drift img { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; }

/* site logo, a touch larger */
.nav-plaque img { width: 120px; }
.nav.is-scrolled .nav-plaque img { width: 84px; }
@media (max-width: 760px) { .nav-plaque img { width: 92px; } .nav.is-scrolled .nav-plaque img { width: 76px; } }

/* register: a quiet way through to the full member list */
.register-members { margin-top: 28px; }
.register-members a { font-size: 15px; font-weight: 500; color: var(--gold); text-decoration: underline; text-decoration-color: rgba(138, 106, 48, .35); text-underline-offset: 5px; transition: color .3s, text-decoration-color .3s; }
.register-members a::after { content: " \2192"; }
.register-members a:hover { color: var(--gold-hi); text-decoration-color: currentColor; }

/* with Members in the nav, the bar hands over to the menu button a little sooner */
@media (max-width: 1180px) {
  .nav-links, .nav-cta { display: none; }
  .nav-menu { display: grid; }
}
/* footer links: two even columns, filled top to bottom */
@media (min-width: 900px) { .foot-links { grid-template-columns: repeat(2, max-content); grid-template-rows: repeat(4, auto); grid-auto-flow: column; } }

/* register without black: the waiting seat is a white seat ringed in gold, a chosen seat glows gold */
.seat.is-live { fill: #FFFFFF; stroke: var(--gold); stroke-width: 2.2; }
.seat.is-picked { stroke: rgba(138, 106, 48, .35); stroke-width: 3; }
.seat.is-taken.is-picked { fill: var(--gold-hi); }
.seat.is-open.is-picked { fill: rgba(138, 106, 48, .3); stroke: var(--gold); stroke-width: 1.6; }
.dot-live { background: #FFFFFF; box-shadow: inset 0 0 0 2px var(--gold), 0 0 0 3px var(--bg), 0 0 0 4px var(--gold-lo); }
.chamber-well.is-open .well-num { color: var(--gold-lo); }

/* the seat a nomination is for, shown at the head of the form */
.form-seat { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; padding: 18px 20px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.form-seat[hidden] { display: none; }
.form-seat-num { font-family: var(--display); font-size: 26px; letter-spacing: .04em; color: var(--gold); }
.form-seat-change { margin-left: auto; padding: 0; border: 0; background: transparent; cursor: pointer; font: inherit; font-size: 14px; font-weight: 500; color: var(--gold); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(138, 106, 48, .35); }
.form-seat-change:hover { color: var(--gold-hi); text-decoration-color: currentColor; }

/* back to top */
.to-top {
  position: fixed; right: clamp(16px, 2.4vw, 32px); bottom: clamp(16px, 2.4vw, 32px); z-index: 90;
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: var(--bg); color: var(--gold); box-shadow: 0 0 0 1px var(--line), 0 10px 26px rgba(23, 22, 26, .12);
  opacity: 0; visibility: hidden; translate: 0 10px;
  transition: opacity .35s var(--ease), translate .35s var(--ease), visibility 0s .35s, background-color .3s, color .3s;
}
.to-top.is-shown { opacity: 1; visibility: visible; translate: none; transition: opacity .35s var(--ease), translate .35s var(--ease), background-color .3s, color .3s; }
.to-top svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.to-top:hover { background: var(--gold); color: #FFFFFF; }
.to-top:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
body.menu-lock .to-top { opacity: 0; visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; translate: none; } }