/* ============================================================
   TTU MAIN STYLESHEET
   Fonts: Canela (display) + GT America (body) + JetBrains Mono
   Colors: Navy #0d1f4e · Gold #F5B800 · White · Off-white
   ============================================================ */

/* ── Local fonts ────────────────────────────────────────────── */
@font-face {
    font-family: 'Canela';
    src: url('../fonts/Canela-Regular-Web.woff2') format('woff2'),
         url('../fonts/Canela-Regular-Web.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Canela';
    src: url('../fonts/CanelaDeck-Regular-Web.woff2') format('woff2'),
         url('../fonts/CanelaDeck-Regular-Web.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'GT America';
    src: url('../fonts/GT-America-Standard-Regular.woff2') format('woff2'),
         url('../fonts/GT-America-Standard-Regular.woff') format('woff');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'GT America';
    src: url('../fonts/GT-America-Standard-Medium.woff2') format('woff2'),
         url('../fonts/GT-America-Standard-Medium.woff') format('woff');
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: 'GT America';
    src: url('../fonts/GT-America-Standard-Bold.woff2') format('woff2'),
         url('../fonts/GT-America-Standard-Bold.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}

/* ── Design tokens ──────────────────────────────────────────── */
:root {
    --navy:    #0d1f4e;
    --navy2:   #162d6e;
    --gold:    #F5B800;
    --gold2:   #d9a400;
    --white:   #ffffff;
    --off:     #f8f7f4;
    --ink:     #141420;
    --mid:     #5e687a;
    --line:    rgba(13,31,78,.1);
    --display: 'Montserrat','Canela', Georgia, serif;
    --body:    'Montserrat','GT America', 'Inter', system-ui, sans-serif;
    --mono:    'JetBrains Mono', 'Fira Code', monospace;
    --r:       3px;
    --sh:      0 4px 24px rgba(13,31,78,.10);
    --sh-lg:   0 16px 64px rgba(13,31,78,.18);
    --max:     1240px;
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
    font-family: var(--body);
    color: var(--ink);
    background: var(--white);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}
a  { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
ul, ol { list-style:none; }

/* ── Layout ─────────────────────────────────────────────────── */
.container { max-width:var(--max); margin:0 auto; padding:0 5vw; }
.section    { padding:5.5rem 0; }
.section--alt { background:var(--off); }
.section--dark { background:var(--navy); }

/* ── Skip link ──────────────────────────────────────────────── */
.skip-link {
    position:absolute; top:-60px; left:1rem;
    background:var(--navy); color:#fff;
    padding:.5rem 1rem; z-index:9999;
    transition:top .2s; border-radius:var(--r); font-size:.8rem;
}
.skip-link:focus { top:.5rem; }

/* ── Eyebrow / section labels ───────────────────────────────── */
.eyebrow {
    font-family: var(--mono);
    font-size: .62rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gold2);
    display: flex;
    align-items: center;
    gap: .6rem;
}
.eyebrow::before {
    content:'';
    width:22px; height:2px;
    background:var(--gold);
    display:block; flex-shrink:0;
}
.section-title {
    font-family: var(--display);
    font-size: clamp(1.7rem,3vw,2.5rem);
    font-weight: 700;
    color: var(--navy);
    line-height: 1.05;
    letter-spacing: -.02em;
    margin-top: .3rem;
}
.section-header {
    display:flex; justify-content:space-between; align-items:flex-end;
    flex-wrap:wrap; gap:1rem; margin-bottom:2.5rem;
}
.link-more {
    font-family: var(--mono);
    font-size: .66rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--navy);
    display: inline-flex; align-items:center; gap:.4rem;
    transition: gap .2s;
}
.link-more::after { content:'→'; }
.link-more:hover { gap:.75rem; color:var(--navy2); }

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items:center; gap:.5rem;
    padding: .88rem 2rem;
    border-radius: var(--r);
    font-family: var(--body);
    font-size: .82rem; font-weight:700;
    letter-spacing: .05em; text-transform:uppercase;
    border: 2px solid transparent;
    cursor: pointer; transition: all .2s;
}
.btn--gold   { background:var(--gold);  color:var(--navy);  border-color:var(--gold);  }
.btn--gold:hover   { background:var(--gold2); border-color:var(--gold2); transform:translateY(-2px); box-shadow:0 8px 28px rgba(245,184,0,.32); }
.btn--navy   { background:var(--navy);  color:#fff;         border-color:var(--navy);  }
.btn--navy:hover   { background:var(--navy2); border-color:var(--navy2); transform:translateY(-2px); }
.btn--ghost  { background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.22); }
.btn--ghost:hover  { background:rgba(255,255,255,.18); }
.btn--outline-dark { background:transparent; color:var(--navy); border-color:var(--navy); }
.btn--outline-dark:hover { background:rgba(13,31,78,.06); }

/* ── Badge ──────────────────────────────────────────────────── */
.badge {
    display:inline-flex; align-items:center;
    padding:.2rem .55rem;
    border-radius:10px;
    font-family: var(--mono); font-size:.6rem; letter-spacing:.06em;
    font-weight:600;
}
.badge--gold   { background:var(--gold);  color:var(--navy); }
.badge--navy   { background:var(--navy);  color:#fff; }
.badge--light  { background:rgba(255,255,255,.12); color:rgba(255,255,255,.8); }

/* ── Page banner ─────────────────────────────────────────────── */
.page-banner {
    background: var(--navy);
    padding: 4.5rem 0 3.5rem;
    padding-top: calc(106px + 3.5rem); /* fixed nav (util 32 + bar 74) + breathing room */
    position: relative; overflow:hidden;
}
.page-banner__bg {
    position:absolute; inset:0;
    background: url('../images/ttu-campus-bg.jpg') center/cover no-repeat;
    opacity:.14; pointer-events:none;
}
.page-banner__bg::after {
    content:''; position:absolute; inset:0;
    background: linear-gradient(to bottom, rgba(8,20,60,.45) 0%, transparent 50%);
}
.page-banner__inner { position:relative; z-index:1; }
.page-banner__title {
    font-family: var(--display);
    font-size: clamp(2rem,4.5vw,3.5rem);
    font-weight:700; color:#fff;
    line-height:1; letter-spacing:-.03em;
    margin:.5rem 0 .7rem;
}
.page-banner__title em { font-style:normal; color:var(--gold); }
.page-banner__sub  { font-size:.96rem; color:rgba(255,255,255,.52); max-width:52ch; line-height:1.72; }

/* Breadcrumb */
.breadcrumb { display:flex; align-items:center; gap:.4rem; font-size:.72rem; color:rgba(255,255,255,.35); flex-wrap:wrap; margin-bottom:.9rem; }
.breadcrumb a { color:rgba(255,255,255,.5); transition:color .14s; }
.breadcrumb a:hover { color:var(--gold); }
.breadcrumb__sep { opacity:.35; }

/* ── Content typography ─────────────────────────────────────── */
.content h1,.content h2 { font-family:var(--display); color:var(--navy); line-height:1.1; letter-spacing:-.02em; margin:2rem 0 .75rem; }
.content h1 { font-size:2rem; font-weight:700; }
.content h2 { font-size:1.55rem; font-weight:700; }
.content h3 { font-size:1.15rem; font-weight:600; color:var(--navy); margin:1.5rem 0 .5rem; }
.content p  { font-size:.94rem; color:var(--mid); line-height:1.88; margin-bottom:1rem; }
.content ul,.content ol { padding-left:1.5rem; margin-bottom:1rem; }
.content li { font-size:.94rem; color:var(--mid); line-height:1.75; margin-bottom:.3rem; }
.content a  { color:var(--navy2); text-decoration:underline; text-underline-offset:3px; }
.content a:hover { color:var(--gold2); }
.content img { border-radius:var(--r); margin:1.5rem 0; max-width:100%; }
.content blockquote { border-left:4px solid var(--gold); padding:.75rem 1.25rem; background:var(--off); border-radius:0 var(--r) var(--r) 0; margin:1.5rem 0; font-style:italic; color:var(--mid); }
.content table { width:100%; border-collapse:collapse; margin:1.5rem 0; }
.content th { background:var(--navy); color:#fff; padding:.65rem 1rem; text-align:left; font-size:.82rem; }
.content td { padding:.6rem 1rem; border-bottom:1px solid var(--line); font-size:.82rem; }
.content tr:nth-child(even) td { background:var(--off); }

/* ── Cards ──────────────────────────────────────────────────── */
.card {
    background:#fff;
    border-radius:var(--r);
    border:1px solid var(--line);
    overflow:hidden;
    transition:all .2s;
}
.card:hover { box-shadow:var(--sh); transform:translateY(-3px); }

/* ── Management grid ─────────────────────────────────────────── */
.mgmt-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1.5rem; margin-top:2.5rem; }
.mgmt-card { background:var(--off); border-radius:var(--r); overflow:hidden; border-bottom:3px solid transparent; transition:all .2s; display:block; text-decoration:none; }
.mgmt-card:hover { border-bottom-color:var(--gold); transform:translateY(-3px); box-shadow:var(--sh); }
.mgmt-card img { width:100%; aspect-ratio:3/4; object-fit:cover; object-position:top; display:block; }
.mgmt-card__body { padding:1.1rem; }
.mgmt-card__name { font-family:var(--display); font-size:.95rem; font-weight:700; color:var(--navy); }
.mgmt-card__title { font-size:.77rem; color:var(--mid); margin-top:.2rem; }

/* ── Profile layout ─────────────────────────────────────────── */
.profile-layout { display:grid; grid-template-columns:280px 1fr; gap:3.5rem; align-items:start; }
.profile-photo { border-radius:var(--r); box-shadow:var(--sh); width:100%; }
.profile-name  { font-family:var(--display); font-size:2.2rem; font-weight:700; color:var(--navy); letter-spacing:-.025em; line-height:1.05; }
.profile-role  { font-family:var(--mono); font-size:.7rem; color:var(--mid); text-transform:uppercase; letter-spacing:.1em; margin:.5rem 0 1.25rem; }

/* ── Footer ─────────────────────────────────────────────────── */
.footer { background:#07101f; color:rgba(255,255,255,.55); padding:5rem 0 2rem; }
.footer__grid { display:grid; grid-template-columns:2fr 1fr 1fr 1.5fr; gap:3rem; padding-bottom:3rem; border-bottom:1px solid rgba(255,255,255,.07); }
.footer__logo { height:50px; margin-bottom:1rem; }
.footer__tagline { font-size:.8rem; line-height:1.85; color:rgba(255,255,255,.35); max-width:28ch; margin-bottom:1.5rem; }
.footer__social { display:flex; gap:.55rem; }
.footer__social a { width:33px; height:33px; background:rgba(255,255,255,.07); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.78rem; color:rgba(255,255,255,.42); transition:all .14s; }
.footer__social a:hover { background:var(--gold); color:var(--navy); }
.footer__col-title { font-family:var(--mono); font-size:.57rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.25); margin-bottom:1.1rem; }
.footer__links { display:flex; flex-direction:column; gap:.5rem; }
.footer__links a { font-size:.79rem; color:rgba(255,255,255,.42); transition:color .14s; line-height:1.4; }
.footer__links a:hover { color:var(--gold); }
.footer__contact { font-size:.79rem; color:rgba(255,255,255,.42); line-height:1.75; margin-bottom:.3rem; }
.footer__contact strong { color:rgba(255,255,255,.65); }
.footer__map iframe { border-radius:var(--r); margin-top:.9rem; opacity:.75; }
.footer__bottom { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.75rem; padding-top:1.75rem; }
.footer__copy { font-family:var(--mono); font-size:.67rem; color:rgba(255,255,255,.2); }
.footer__bottom-links { display:flex; gap:1.2rem; }
.footer__bottom-links a { font-family:var(--mono); font-size:.67rem; color:rgba(255,255,255,.25); transition:color .14s; }
.footer__bottom-links a:hover { color:rgba(255,255,255,.55); }

/* ── Reveal animation ───────────────────────────────────────── */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in { opacity:1; transform:none; }
.reveal--d1 { transition-delay:.12s; }
.reveal--d2 { transition-delay:.24s; }
.reveal--d3 { transition-delay:.36s; }

/* ── CTA strip ──────────────────────────────────────────────── */
.cta-strip { background:var(--gold); padding:5rem 0; }
.cta-strip__inner { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:2rem; }
.cta-strip__title { font-family:var(--display); font-size:clamp(1.8rem,3vw,2.8rem); font-weight:700; color:var(--navy); letter-spacing:-.025em; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width:1000px) {
    .footer__grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:700px) {
    .profile-layout { grid-template-columns:1fr; }
    .footer__grid { grid-template-columns:1fr; }
    .footer__bottom { flex-direction:column; align-items:flex-start; }
    .section { padding:3.5rem 0; }
}