/* Centre Pointe — shared foundation for every design option.
   Palette and modern voice are FIXED across all six; only layout,
   typography scale and photo treatment change per design. */
:root {
  --ink:   #08080a;
  --ink-1: #101014;
  --ink-2: #17171d;
  --ink-3: #202028;
  --gold:      #d4af37;
  --gold-lt:   #f2dd9e;
  --gold-dp:   #8f7218;
  --gold-grad: linear-gradient(135deg, #f7ecc4 0%, #d4af37 46%, #ab8420 100%);
  --cream: #f7f4ef;
  --text:  #d8d3cb;
  --muted: #9a948b;
  --faint: #6a655e;
  --line:      rgba(212,175,55,.22);
  --line-soft: rgba(247,244,239,.10);
  --ease: cubic-bezier(.22,.61,.36,1);
  --gutter: clamp(1.15rem, 4vw, 3rem);
}
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:5rem; }
body { margin:0; background:var(--ink); color:var(--text); line-height:1.65;
       -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img,svg { display:block; max-width:100%; height:auto; }
a { color:inherit; text-decoration:none; }
h1,h2,h3,h4 { margin:0; color:var(--cream); line-height:1.06; letter-spacing:-.02em; }
p { margin:0 0 1.05em; } p:last-child { margin-bottom:0; }
ul { margin:0; padding:0; list-style:none; }
::selection { background:var(--gold); color:var(--ink); }
:focus-visible { outline:2px solid var(--gold); outline-offset:3px; border-radius:3px; }

.wrap { width:100%; max-width:1240px; margin-inline:auto; padding-inline:var(--gutter); }
.gold { background:var(--gold-grad); -webkit-background-clip:text; background-clip:text;
        -webkit-text-fill-color:transparent; color:transparent; }
.vh { position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* Wordmark — the studio's CNC sign, shared by every design */
.sign { display:inline-block; font-family:"Marcellus",Georgia,serif; font-weight:400;
        line-height:.92; text-transform:uppercase; background:var(--gold-grad);
        -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.sign-1 { display:block; letter-spacing:.06em; margin-right:-.06em; }
.sign-2 { display:flex; justify-content:space-between; width:100%; margin-top:.33em; }
.sign-2 i { font-style:normal; } .sign-2 .sp { width:.7em; }

/* Shared button voice */
.btn { display:inline-flex; align-items:center; gap:.5rem; padding:.9rem 1.7rem;
       border-radius:999px; border:1.5px solid transparent; font-size:.78rem; font-weight:600;
       letter-spacing:.12em; text-transform:uppercase; cursor:pointer; white-space:nowrap;
       transition:transform .22s var(--ease), background-color .22s var(--ease),
                  color .22s var(--ease), border-color .22s var(--ease); }
.btn:hover { transform:translateY(-2px); }
/* Doubled class keeps these ahead of each design's `.nav a` colour rule —
   without it the Register button renders gold-on-gold and is unreadable. */
.btn.btn-gold { background:var(--gold-grad); color:#1a1405; }
.btn.btn-gold:hover { color:#1a1405; }
.btn.btn-ghost { border-color:rgba(247,244,239,.24); color:var(--cream); }
.btn.btn-ghost:hover { border-color:var(--gold); color:var(--gold-lt); }

/* Back-to-options bar, present on every variant */
.optbar { position:sticky; top:0; z-index:150; background:rgba(8,8,10,.9);
          backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.optbar-in { max-width:1240px; margin-inline:auto; padding:.55rem var(--gutter);
             display:flex; align-items:center; justify-content:space-between; gap:1rem;
             font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; }
.optbar a { color:var(--gold); }
.optbar a:hover { color:var(--gold-lt); }
.optbar span { color:var(--faint); }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation-duration:.001ms!important;transition-duration:.001ms!important} }

/* Link through to the faculty page */
.fac-link { display:inline-flex; align-items:center; gap:.45rem; margin-top:1.4rem;
  font-size:.74rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--gold);
  padding-bottom:3px; border-bottom:1px solid rgba(212,175,55,.45);
  transition:color .2s var(--ease), border-color .2s var(--ease); }
.fac-link:hover { color:var(--gold-lt); border-color:var(--gold); }
.fac-link span { transition:transform .25s var(--ease); }
.fac-link:hover span { transform:translateX(3px); }

/* ---------- Faculty page ---------- */
.fp-nav { border-bottom:1px solid var(--line); }
.fp-nav-in { max-width:1240px; margin-inline:auto; padding:1.1rem var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.fp-nav .nav { padding:0; }
.fp-head { border-bottom:1px solid var(--line); padding:clamp(2.5rem,6vw,4.5rem) 0; }
.fp-crumb { margin:0 0 1.1rem; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; }
.fp-crumb a { color:var(--gold); }
.fp-crumb a:hover { color:var(--gold-lt); }
.fp-head h1 { font-size:clamp(2.2rem,6vw,4rem); }
.fp-intro { max-width:62ch; margin-top:1.1rem; color:var(--muted); }
.fp-body { padding:clamp(2.5rem,6vw,4.5rem) 0 1rem; }
.fp-group { font-size:.74rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); margin:clamp(2rem,4vw,3rem) 0 .5rem; padding-bottom:.9rem;
  border-bottom:1px solid var(--line); }
.fp-group:first-child { margin-top:0; }
.fp-person { display:grid; grid-template-columns:minmax(0,190px) minmax(0,1fr);
  gap:clamp(1.2rem,3vw,2.5rem); padding:clamp(1.6rem,3.5vw,2.5rem) 0;
  border-bottom:1px solid var(--line-soft); align-items:start; }
@media (max-width:680px){ .fp-person{ grid-template-columns:minmax(0,120px) minmax(0,1fr); gap:1.1rem; } }
@media (max-width:460px){ .fp-person{ grid-template-columns:1fr; } }
.fp-person img { width:100%; aspect-ratio:1; object-fit:cover; filter:grayscale(1); border-radius:3px; }
.fp-text h2 { font-size:clamp(1.25rem,2.4vw,1.65rem); }
.fp-role { margin:.35rem 0 1rem; font-size:.7rem; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gold); }
.fp-text p { color:var(--muted); font-size:.96rem; max-width:66ch; }

/* Bios collapse to one uniform height so the roster reads as an even list,
   and open in place when there is more to read. Checkbox toggle = no JS. */
.fp-bio { position:relative; height:9.4rem; overflow:hidden;
  transition:height .35s var(--ease); }
.fp-bio::after { content:""; position:absolute; inset:auto 0 0 0; height:3.4rem;
  background:linear-gradient(180deg, transparent, var(--ink)); pointer-events:none;
  transition:opacity .25s var(--ease); }
.fp-bio--short { height:9.4rem; }          /* short bios keep the same footprint */
.fp-bio--short::after { display:none; }
.fp-bio p:last-child { margin-bottom:0; }

.fp-toggle:checked ~ .fp-bio { height:auto; }
.fp-toggle:checked ~ .fp-bio::after { opacity:0; }

.fp-more { display:inline-flex; align-items:center; gap:.4rem; margin-top:.9rem; cursor:pointer;
  font-size:.7rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); padding-bottom:2px; border-bottom:1px solid rgba(212,175,55,.45);
  transition:color .2s var(--ease), border-color .2s var(--ease); }
.fp-more:hover { color:var(--gold-lt); border-color:var(--gold); }
.fp-more::after { content:"\2193"; transition:transform .25s var(--ease); }
.fp-toggle:checked ~ .fp-more::after { transform:rotate(180deg); }
.fp-toggle:checked ~ .fp-more .is-more,
.fp-toggle:not(:checked) ~ .fp-more .is-less { display:none; }
.fp-toggle:focus-visible ~ .fp-more { outline:2px solid var(--gold); outline-offset:3px; }