:root { --bg: #ffffff; --ink: #0b0b0b; --mut: #5b5b58; --gut: clamp(20px, 4vw, 56px); }
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1.0625rem/1.5 Lato, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 6px; }

/* home: the wordmark top left, the three marks in the middle */
.home { min-height: 100%; display: grid; grid-template-rows: auto 1fr; padding: var(--gut); }
.wordmark { margin: 0; font: 900 clamp(2.8rem, 1rem + 7.5vw, 8.5rem)/.95 Lato, sans-serif; letter-spacing: -.02em; }
.units { display: grid; place-items: center; padding-bottom: 8vh; }
.units ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: clamp(28px, 5vw, 72px); }
.unit { display: flex; align-items: center; text-decoration: none; padding: 10px; }
.unit-ic { width: clamp(68px, 7.5vw, 112px); height: auto; aspect-ratio: 5.605 / 7.314; flex: none; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
/* the name slides out beside its mark, like the full lockup */
.unit-name { display: grid; grid-template-columns: 0fr; transition: grid-template-columns .45s cubic-bezier(.2,.8,.2,1), margin .45s cubic-bezier(.2,.8,.2,1); margin-left: 0; }
.unit-name > span { overflow: hidden; white-space: nowrap; font: 900 clamp(1.7rem, .9rem + 2vw, 3rem)/.92 Lato, sans-serif; letter-spacing: -.01em; opacity: 0; transform: translateX(-12px); transition: opacity .3s ease, transform .45s cubic-bezier(.2,.8,.2,1); }
.unit:hover .unit-name, .unit:focus-visible .unit-name { grid-template-columns: 1fr; margin-left: .35em; }
.unit:hover .unit-name > span, .unit:focus-visible .unit-name > span { opacity: 1; transform: none; transition-delay: .05s; }
.unit:hover .unit-ic, .unit:focus-visible .unit-ic { transform: translateY(-3px); }
/* touch screens can't hover, so the names show and the marks stack */
@media (hover: none), (max-width: 760px) {
  .units ul { flex-direction: column; align-items: flex-start; gap: 22px; }
  .unit-name { grid-template-columns: 1fr; margin-left: .4em; }
  .unit-name > span { opacity: 1; transform: none; }
}

/* section pages */
.sub { min-height: 100%; padding: var(--gut); display: grid; align-content: start; gap: clamp(28px, 5vw, 60px); }
.back { justify-self: start; font-weight: 700; text-decoration: none; }
.back:hover { text-decoration: underline; text-underline-offset: 4px; }
.sub-head { display: flex; align-items: center; gap: .35em; }
.sub-ic { width: clamp(72px, 9vw, 130px); height: auto; aspect-ratio: 5.605 / 7.314; flex: none; }
.sub-name { margin: 0; font: 900 clamp(2.6rem, 1rem + 5.5vw, 6.5rem)/.9 Lato, sans-serif; letter-spacing: -.02em; }
.placeholder { max-width: 52ch; padding: clamp(22px, 3vw, 36px); border: 3px dashed #c9c6bf; border-radius: 4px; color: var(--mut); }
.ph-lead { margin: 0 0 8px; font: 900 1.6rem/1.1 Lato, sans-serif; color: var(--ink); }
.placeholder p:last-child { margin: 0; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- doorways: glide to the centre, open, walk through ---------- */
.home.receding { transition: transform 1s cubic-bezier(.65,0,.25,1), opacity .8s ease; transform: scale(1.6); opacity: 0; pointer-events: none; }
.portal-move { position: fixed; z-index: 50; pointer-events: none; transform-origin: 50% 50%; }
.portal-move.travel { transition: transform 1s cubic-bezier(.65,0,.25,1); }
.portal { position: absolute; inset: 0; perspective: 1400px; transition: transform .85s cubic-bezier(.7,0,.3,1); }
.portal svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.portal-beyond { position: absolute; background: #0b0b0b; display: grid; place-items: center; overflow: hidden; }
.portal-beyond span { font: 900 clamp(1.3rem, 3.6vh, 2.8rem)/.9 Lato, sans-serif; color: #fff; opacity: 0; transition: opacity .6s ease .35s; text-align: left; }
.portal-leaf { transition: transform 1s cubic-bezier(.55,0,.2,1); }
.portal.open .portal-leaf { transform: rotateY(-108deg); }
.portal.open .portal-beyond span { opacity: 1; }
.portal.through { transform: scale(9); }
.portal.through .portal-frame, .portal.through .portal-leaf { opacity: 0; transition: opacity .35s ease .25s; }
/* arriving on the Club Room page from the door */
.door-cover { position: fixed; inset: 0; z-index: 60; background: #0b0b0b; pointer-events: none; transition: opacity .8s ease .1s; }
html.arrived .door-cover { opacity: 0; }
html.via-door .sub-head, html.via-door .placeholder, html.via-door .back { opacity: 0; transform: translateY(18px); }
html.via-door.arrived .sub-head, html.via-door.arrived .placeholder, html.via-door.arrived .back { opacity: 1; transform: none; transition: opacity .7s ease .35s, transform .7s cubic-bezier(.2,.8,.2,1) .35s; }
html.via-door.arrived .placeholder { transition-delay: .5s; }
.portal.through .portal-leaf { opacity: 0; transition: opacity .3s ease .15s; }

/* wordmark lockup: the lock box beside the two-line name, as in the logo file */
.wordmark { display: flex; align-items: center; gap: .16em; }
.wm-lock { height: 1.9em; width: auto; aspect-ratio: 5.605 / 7.314; flex: none; }