/* ═══════════════════════════════════════════════════════
   CODELAB — Design System
   W&M · Antonio Mastropaolo · Generative AI for Software Dev
   ═══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ─── Tokens ─── */
:root {
  --bg:          #0D1117;
  --bg-2:        #161B22;
  --bg-3:        #21262D;
  --border:      #30363D;
  --border-light:#3D444D;

  --green:       #00D97E;
  --green-dim:   rgba(0,217,126,0.12);
  --green-border:rgba(0,217,126,0.25);
  --blue:        #58A6FF;
  --blue-dim:    rgba(88,166,255,0.12);
  --blue-border: rgba(88,166,255,0.25);
  --purple:      #BC8CFF;
  --purple-dim:  rgba(188,140,255,0.12);
  --amber:       #E3B341;
  --amber-dim:   rgba(227,179,65,0.12);
  --red:         #F85149;
  --wm-gold:     #B9975B;
  --wm-green:    #004E38;
  --wm-dark:     #00231B;
  --wm-griffin:   #28463D;
  --wm-patina:   #76A190;
  --wm-sage:     #B8DDB1;
  --wm-spirit:   #FDB714;
  --wm-silver:   #D8DCDB;
  --wm-midnight: #0D3E4A;
  --wm-marine:   #247B8C;

  --text:        #F0F6FC;
  --text-2:      #8B949E;
  --text-3:      #484F58;

  --nav-h:       60px;
  --radius:      10px;
  --radius-lg:   16px;
  --shadow:      0 8px 32px rgba(0,0,0,0.4);
  --shadow-lg:   0 20px 60px rgba(0,0,0,0.5);
}

/* ─── Reset ─── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family:'Inter',sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a { color:inherit; text-decoration:none; }

/* ─── Type ─── */
h1,h2,h3 { font-family:'Space Grotesk',sans-serif; font-weight:700; line-height:1.15; letter-spacing:-0.02em; }
h1 { font-size:clamp(2.2rem,5vw,3.6rem); }
h2 { font-size:clamp(1.6rem,3vw,2.4rem); }
h3 { font-size:1.25rem; }
p  { color:var(--text-2); font-size:0.95rem; line-height:1.75; }
code,kbd { font-family:'JetBrains Mono',monospace; }

/* ─── Layout ─── */
.container  { max-width:1160px; margin:0 auto; padding:0 24px; }
.container-sm { max-width:740px; margin:0 auto; padding:0 24px; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.grid-4 { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:20px; }

/* ─── Navigation ─── */
.site-nav {
  position:fixed; top:0; left:0; right:0; z-index:200;
  height:var(--nav-h);
  background:rgba(13,17,23,0.92);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(16px);
}
.nav-inner {
  height:100%; max-width:1160px; margin:0 auto; padding:0 24px;
  display:flex; align-items:center; gap:32px;
}
.nav-logo {
  display:flex; align-items:center; gap:10px;
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.1rem;
  color:var(--text); white-space:nowrap; flex-shrink:0;
}
.nav-logo .bracket { color:var(--green); font-family:'JetBrains Mono',monospace; font-size:1.2rem; }
.nav-links {
  display:flex; align-items:center; gap:2px; flex:1;
}
.nav-link {
  padding:7px 14px; border-radius:6px; font-size:0.85rem; font-weight:500;
  color:var(--text-2); transition:all 0.15s; white-space:nowrap;
}
.nav-link:hover { color:var(--text); background:var(--bg-3); }
.nav-link.active { color:var(--green); }
.nav-badge {
  margin-left:auto; font-size:0.72rem; font-weight:600;
  color:var(--text-3); white-space:nowrap; letter-spacing:0.02em;
}

/* ─── Hero ─── */
.hero {
  padding:calc(var(--nav-h) + 80px) 0 90px;
  position:relative; overflow:hidden;
}
.hero-bg {
  position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(0,217,126,0.08) 0%, transparent 70%),
              radial-gradient(ellipse 60% 40% at 80% 80%, rgba(88,166,255,0.05) 0%, transparent 60%);
}
.hero-grid {
  position:absolute; inset:0;
  background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:60px 60px; opacity:0.15; pointer-events:none;
}
.hero-eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  font-family:'JetBrains Mono',monospace; font-size:0.72rem; font-weight:500;
  color:var(--green); letter-spacing:0.08em; margin-bottom:24px;
}
.hero-eyebrow::before { content:'//'; opacity:0.5; }
.hero-title { color:var(--text); margin-bottom:20px; }
.hero-title .accent { color:var(--green); }
.hero-title .dim { color:var(--text-2); }
.hero-sub { font-size:1.05rem; max-width:540px; margin-bottom:36px; line-height:1.7; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; }

/* ─── Buttons ─── */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 22px; border-radius:8px;
  font-size:0.875rem; font-weight:600; font-family:'Inter',sans-serif;
  cursor:pointer; transition:all 0.18s; border:1px solid transparent; text-decoration:none;
}
.btn-green { background:var(--green); color:#0D1117; border-color:var(--green); }
.btn-green:hover { background:#00F58C; filter:brightness(1.05); transform:translateY(-1px); box-shadow:0 6px 20px rgba(0,217,126,0.3); }
.btn-outline { background:transparent; color:var(--text); border-color:var(--border-light); }
.btn-outline:hover { border-color:var(--text-2); background:var(--bg-3); }
.btn-ghost { background:transparent; color:var(--text-2); border-color:transparent; padding:10px 16px; }
.btn-ghost:hover { color:var(--text); background:var(--bg-3); }
.btn-sm { padding:7px 16px; font-size:0.8rem; }
.btn-xs { padding:5px 12px; font-size:0.73rem; border-radius:6px; }

/* ─── Section labels ─── */
.eyebrow {
  font-family:'JetBrains Mono',monospace; font-size:0.7rem; font-weight:500;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--green);
  display:flex; align-items:center; gap:8px; margin-bottom:12px;
}
.eyebrow::before { content:''; width:16px; height:2px; background:var(--green); border-radius:2px; }

/* ─── Card base ─── */
.card {
  background:var(--bg-2); border:1px solid var(--border);
  border-radius:var(--radius-lg); overflow:hidden;
  transition:border-color 0.2s, transform 0.25s cubic-bezier(.34,1.2,.64,1), box-shadow 0.2s;
}
.card:hover { border-color:var(--border-light); transform:translateY(-4px); box-shadow:var(--shadow); }
.card-link { text-decoration:none; display:block; cursor:pointer; }

/* ─── Project cards ─── */
.project-card { }
.project-card-top { height:6px; }
.project-card-body { padding:24px; }
.project-card-icon { font-size:2rem; margin-bottom:14px; display:block; }
.project-card-tag {
  display:inline-flex; align-items:center; gap:4px;
  font-size:0.68rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
  padding:3px 10px; border-radius:100px; margin-bottom:10px;
}
.project-card h3 { font-size:1.05rem; margin-bottom:8px; }
.project-card p  { font-size:0.82rem; line-height:1.6; }
.project-card-footer {
  padding:14px 24px 18px;
  display:flex; align-items:center; justify-content:space-between;
  border-top:1px solid var(--border);
}
.project-card-cta {
  font-size:0.78rem; font-weight:600; display:flex; align-items:center; gap:4px;
  transition:gap 0.2s;
}
.card-link:hover .project-card-cta { gap:8px; }

/* color themes */
.theme-green .project-card-top  { background:linear-gradient(90deg,#00D97E,#00F58C); }
.theme-green .project-card-tag  { background:var(--green-dim); color:var(--green); border:1px solid var(--green-border); }
.theme-green .project-card-cta  { color:var(--green); }
.theme-green:hover               { border-color:var(--green-border); box-shadow:0 8px 32px rgba(0,217,126,0.1); }

.theme-blue .project-card-top   { background:linear-gradient(90deg,#58A6FF,#79C0FF); }
.theme-blue .project-card-tag   { background:var(--blue-dim); color:var(--blue); border:1px solid var(--blue-border); }
.theme-blue .project-card-cta   { color:var(--blue); }
.theme-blue:hover                { border-color:var(--blue-border); box-shadow:0 8px 32px rgba(88,166,255,0.1); }

.theme-purple .project-card-top { background:linear-gradient(90deg,#BC8CFF,#D2A8FF); }
.theme-purple .project-card-tag { background:var(--purple-dim); color:var(--purple); border:1px solid rgba(188,140,255,0.25); }
.theme-purple .project-card-cta { color:var(--purple); }
.theme-purple:hover              { border-color:rgba(188,140,255,0.25); box-shadow:0 8px 32px rgba(188,140,255,0.08); }

.theme-amber .project-card-top  { background:linear-gradient(90deg,#E3B341,#F0CC68); }
.theme-amber .project-card-tag  { background:var(--amber-dim); color:var(--amber); border:1px solid rgba(227,179,65,0.25); }
.theme-amber .project-card-cta  { color:var(--amber); }
.theme-amber:hover               { border-color:rgba(227,179,65,0.25); box-shadow:0 8px 32px rgba(227,179,65,0.08); }

/* ─── Module / teaching card ─── */
.module-card {
  background:var(--bg-2); border:1px solid var(--border);
  border-radius:var(--radius-lg); overflow:hidden;
  transition:all 0.25s;
}
.module-card:hover { border-color:var(--green-border); transform:translateY(-3px); box-shadow:0 12px 40px rgba(0,217,126,0.08); }
.module-card-header { padding:28px 28px 0; }
.module-card-body   { padding:16px 28px 24px; }
.module-card-footer { padding:16px 28px 20px; border-top:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.module-card-visual {
  background:var(--bg-3); border-radius:8px; margin:0 28px 16px;
  padding:20px; display:flex; align-items:center; justify-content:center;
  min-height:120px; position:relative; overflow:hidden;
}
.module-card-visual::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 80% 60% at 50% 50%, rgba(0,217,126,0.06),transparent);
}

/* ─── Browser frame (mockups) ─── */
.browser { border-radius:10px; overflow:hidden; border:1px solid var(--border); background:var(--bg); box-shadow:var(--shadow-lg); }
.browser-bar {
  background:var(--bg-3); padding:10px 14px; display:flex; align-items:center; gap:10px;
  border-bottom:1px solid var(--border);
}
.browser-dots { display:flex; gap:5px; }
.browser-dots span { width:11px; height:11px; border-radius:50%; }
.browser-dots span:nth-child(1) { background:#ff5f57; }
.browser-dots span:nth-child(2) { background:#febc2e; }
.browser-dots span:nth-child(3) { background:#28c840; }
.browser-url {
  flex:1; background:var(--bg-2); border-radius:5px;
  padding:4px 12px; font-family:'JetBrains Mono',monospace;
  font-size:0.68rem; color:var(--text-3);
}
.browser-body { min-height:380px; }

/* ─── App chrome inside browser ─── */
.app-shell { display:grid; grid-template-columns:200px 1fr; height:100%; }
.app-sidebar {
  background:rgba(0,0,0,0.3); border-right:1px solid var(--border);
  padding:16px 0;
}
.app-sidebar-logo { padding:2px 16px 16px; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:0.85rem; }
.app-nav-item {
  display:flex; align-items:center; gap:9px;
  padding:8px 16px; font-size:0.76rem; color:var(--text-3); cursor:pointer;
}
.app-nav-item.active { color:var(--text); background:rgba(255,255,255,0.05); }
.app-nav-section { padding:14px 16px 5px; font-size:0.6rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--text-3); font-weight:600; }
.app-main { padding:20px; background:var(--bg); overflow:hidden; }

/* Stats row inside mockup */
.stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:16px; }
.stat-box {
  background:var(--bg-2); border:1px solid var(--border); border-radius:8px; padding:12px;
}
.stat-label { font-size:0.6rem; color:var(--text-3); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:6px; }
.stat-val { font-size:1.2rem; font-weight:700; font-family:'Space Grotesk',sans-serif; }
.stat-delta { font-size:0.65rem; margin-top:3px; }
.delta-up { color:#3fb950; }
.delta-dn { color:#f85149; }
.delta-na { color:var(--text-3); }

/* Data table */
.data-tbl { width:100%; border-collapse:collapse; font-size:0.74rem; }
.data-tbl th { text-align:left; padding:7px 10px; color:var(--text-3); font-size:0.6rem; text-transform:uppercase; letter-spacing:0.08em; border-bottom:1px solid var(--border); font-weight:600; }
.data-tbl td { padding:9px 10px; border-bottom:1px solid rgba(255,255,255,0.04); color:var(--text-2); }
.data-tbl tr:last-child td { border-bottom:none; }

/* Badges */
.badge { display:inline-flex; align-items:center; padding:2px 8px; border-radius:100px; font-size:0.62rem; font-weight:600; }
.badge-green  { background:rgba(63,185,80,0.15); color:#3fb950; }
.badge-red    { background:rgba(248,81,73,0.15); color:#f85149; }
.badge-amber  { background:rgba(227,179,65,0.15); color:#e3b341; }
.badge-blue   { background:rgba(88,166,255,0.15); color:#58a6ff; }
.badge-purple { background:rgba(188,140,255,0.15); color:#bc8cff; }
.badge-gray   { background:rgba(139,148,158,0.15); color:#8b949e; }

/* Progress bar */
.prog-bar { background:var(--bg-3); border-radius:100px; height:5px; overflow:hidden; }
.prog-fill { height:100%; border-radius:100px; }

/* ─── Mockup-specific ─── */
.chart-card {
  background:var(--bg-2); border:1px solid var(--border); border-radius:8px; padding:14px; overflow:hidden;
}
.chart-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.chart-title { font-size:0.76rem; font-weight:600; }

/* ─── Project page hero ─── */
.project-hero { padding:calc(var(--nav-h) + 60px) 0 56px; position:relative; overflow:hidden; }
.project-hero::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 50% at 30% 50%, rgba(0,217,126,0.06),transparent);
  pointer-events:none;
}
.project-hero-tag {
  display:inline-flex; align-items:center; gap:6px;
  font-size:0.72rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  padding:5px 14px; border-radius:100px; margin-bottom:18px;
}
.project-hero h1 { margin-bottom:16px; }
.project-hero .lead { font-size:1rem; max-width:580px; line-height:1.75; }
.feature-list { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.feature-chip {
  display:flex; align-items:center; gap:6px;
  background:var(--bg-2); border:1px solid var(--border);
  padding:5px 12px; border-radius:100px; font-size:0.76rem; color:var(--text-2);
}
.mockup-section { padding:16px 0 80px; }
.mockup-block { margin-bottom:56px; }
.mockup-label { font-family:'JetBrains Mono',monospace; font-size:0.65rem; color:var(--text-3); letter-spacing:0.12em; text-transform:uppercase; margin-bottom:6px; }
.mockup-block h3 { margin-bottom:6px; }
.mockup-block > p { font-size:0.85rem; margin-bottom:20px; }

/* ─── Teaching page ─── */
.module-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:24px; margin-top:48px; }
.module-big-card {
  background:var(--bg-2); border:1px solid var(--border);
  border-radius:var(--radius-lg); overflow:hidden; cursor:pointer;
  transition:all 0.25s; text-decoration:none; display:block;
}
.module-big-card:hover { border-color:var(--green-border); transform:translateY(-4px); box-shadow:0 16px 48px rgba(0,217,126,0.1); }
.mbcard-visual {
  height:160px; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.mbcard-visual::before {
  content:''; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,0.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.02) 1px,transparent 1px);
  background-size:24px 24px;
}
.mbcard-body { padding:24px; }
.mbcard-tag { font-size:0.68rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; margin-bottom:8px; }
.mbcard-title { font-size:1.15rem; font-weight:700; font-family:'Space Grotesk',sans-serif; color:var(--text); margin-bottom:8px; }
.mbcard-desc { font-size:0.83rem; line-height:1.6; }
.mbcard-footer { padding:14px 24px 18px; border-top:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.mbcard-meta { display:flex; gap:16px; }
.mbcard-meta-item { font-size:0.72rem; color:var(--text-3); }
.mbcard-cta { font-size:0.78rem; font-weight:600; display:flex; align-items:center; gap:4px; transition:gap 0.2s; }
.module-big-card:hover .mbcard-cta { gap:8px; }

/* placeholder */
.module-placeholder {
  background:rgba(255,255,255,0.02); border:1px dashed var(--border);
  border-radius:var(--radius-lg); padding:40px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.module-placeholder .ph-icon { font-size:1.8rem; opacity:0.2; }
.module-placeholder h4 { font-size:0.9rem; color:var(--text-3); font-family:'Inter',sans-serif; }
.module-placeholder p { font-size:0.78rem; max-width:220px; }

/* ─── About ─── */
.about-section { padding:80px 0; background:var(--bg-2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.about-grid { display:grid; grid-template-columns:80px 1fr; gap:28px; align-items:start; }
.about-avatar {
  width:72px; height:72px; border-radius:50%;
  background:linear-gradient(135deg,var(--green),var(--blue));
  display:flex; align-items:center; justify-content:center;
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.4rem; color:#0D1117;
  flex-shrink:0;
}

/* ─── Footer ─── */
.site-footer {
  background:var(--bg); border-top:1px solid var(--border);
  padding:40px 0 28px;
}
.footer-inner {
  display:flex; align-items:flex-start; justify-content:space-between; gap:32px; flex-wrap:wrap;
  padding-bottom:28px; border-bottom:1px solid var(--border); margin-bottom:20px;
}
.footer-brand { max-width:280px; }
.footer-brand .logo { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1rem; margin-bottom:8px; }
.footer-brand .logo .bracket { color:var(--green); font-family:'JetBrains Mono',monospace; }
.footer-brand p { font-size:0.8rem; line-height:1.6; }
.footer-col h5 { font-size:0.68rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-3); margin-bottom:12px; }
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:7px; }
.footer-col a { font-size:0.82rem; color:var(--text-2); transition:color 0.15s; }
.footer-col a:hover { color:var(--green); }
.footer-bottom { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; }
.footer-copy { font-size:0.75rem; color:var(--text-3); }
.footer-wm { font-size:0.75rem; color:var(--wm-gold); font-weight:600; }

/* ─── Animations ─── */
@keyframes fadeUp { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }
.anim-up   { animation:fadeUp 0.5s ease both; }
.anim-up-1 { animation-delay:0.1s; }
.anim-up-2 { animation-delay:0.2s; }
.anim-up-3 { animation-delay:0.3s; }

/* ─── Utilities ─── */
.mt-8  {margin-top:8px}  .mt-12{margin-top:12px} .mt-16{margin-top:16px}
.mt-24 {margin-top:24px} .mt-32{margin-top:32px} .mt-48{margin-top:48px}
.mb-8  {margin-bottom:8px}
.text-center{text-align:center}
.text-green {color:var(--green)}
.text-blue  {color:var(--blue)}
.text-purple{color:var(--purple)}
.text-amber {color:var(--amber)}
.text-muted {color:var(--text-2)}
.mono { font-family:'JetBrains Mono',monospace; }

/* ─── Responsive ─── */
@media(max-width:900px){
  .grid-2,.grid-3 { grid-template-columns:1fr; }
  .app-shell { grid-template-columns:1fr; }
  .app-sidebar { display:none; }
  .stats-row { grid-template-columns:repeat(2,1fr); }
  .about-grid { grid-template-columns:1fr; }
}
@media(max-width:640px){
  .nav-links { display:none; }
  .hero-actions { flex-direction:column; }
  .grid-4 { grid-template-columns:1fr; }
  .footer-inner { flex-direction:column; }
}

/* ═══════════════════════════════════════════════════════════
   COMPATIBILITY LAYER & MISSING CLASSES
   Aliases so HTML pages using the new naming convention work
   correctly with the shared design system above.
   ═══════════════════════════════════════════════════════════ */

/* ─── CSS variable aliases ─── */
:root {
  /* Font stack variables */
  --font-display: 'Space Grotesk', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* Text colour aliases (new names → existing tokens) */
  --text-primary:   #F0F6FC;   /* = --text   */
  --text-secondary: #8B949E;   /* = --text-2 */
  --text-muted:     #484F58;   /* = --text-3 */
}

/* ─── Navigation alias: .nav → .site-nav behaviour ─── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: var(--nav-h);
  background: rgba(13,17,23,0.92);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
/* Inner flex row — container handles max-width */
.nav .nav-inner,
.nav-inner {
  height: 100%; max-width: 1160px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; gap: 32px;
}
/* Strip list bullets when <ul class="nav-links"> is used */
ul.nav-links { list-style: none; }
ul.nav-links li { display: contents; }

/* Logo mark (the </> glyph) */
.logo-mark {
  color: var(--green);
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.15rem;
  font-weight: 600;
}
/* Ensure nav-logo inherits display:flex properly */
.nav-logo {
  display: flex; align-items: center; gap: 8px;
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.05rem;
  color: var(--text); white-space: nowrap; flex-shrink: 0; text-decoration: none;
}

/* ─── Button aliases ─── */
/* .btn-primary maps to the green CTA button */
.btn-primary {
  background: var(--green); color: #0D1117;
  border-color: var(--green);
}
.btn-primary:hover {
  background: #00F58C;
  filter: brightness(1.04);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0,217,126,0.3);
}
/* Size modifier */
.btn-lg { padding: 12px 28px; font-size: 0.95rem; }

/* ─── Section wrapper ─── */
.section { padding: 80px 0; }
@media(max-width:640px){ .section { padding: 56px 0; } }

/* ─── Footer aliases: .footer → .site-footer behaviour ─── */
.footer {
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: 44px 0 28px;
}
.footer .footer-inner {
  display: flex; align-items: flex-start;
  justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}
.footer-left { max-width: 300px; }
.footer-left .nav-logo { margin-bottom: 4px; }
.footer-tagline { font-size: 0.78rem; color: var(--text-2); margin-top: 4px; line-height: 1.5; }
/* Horizontal link row in footer */
.footer-links {
  display: flex; align-items: center;
  gap: 4px; flex-wrap: wrap;
}
.footer-link {
  font-size: 0.82rem; color: var(--text-2);
  padding: 4px 10px; border-radius: 5px;
  transition: color 0.15s, background 0.15s;
  text-decoration: none;
}
.footer-link:hover { color: var(--green); background: rgba(0,217,126,0.06); }
.footer-bottom {
  display: flex; align-items: center;
  justify-content: space-between;
  flex-wrap: wrap; gap: 8px;
  font-size: 0.74rem; color: var(--text-3);
}
@media(max-width:640px){
  .footer .footer-inner { flex-direction: column; }
  .footer-links { flex-direction: column; align-items: flex-start; }
}

/* ─── Page-hero shared styles (project + gallery pages) ─── */
.page-hero,
.project-hero {
  padding: calc(var(--nav-h) + 56px) 0 52px;
  border-bottom: 1px solid var(--border);
  position: relative; overflow: hidden;
}
/* Breadcrumb */
.breadcrumb {
  display: flex; align-items: center; gap: 7px;
  font-size: 0.81rem; color: var(--text-3); margin-bottom: 18px;
}
.breadcrumb a { color: var(--text-3); text-decoration: none; transition: color 0.15s; }
.breadcrumb a:hover { color: var(--green); }

/* ─── Ensure body has correct padding for fixed nav ─── */
body { padding-top: 0; }   /* nav height offset handled per-page via hero padding */

/* ═══════════════════════════════════════════════════════════
   W&M BRAND PATTERNS
   Decorative elements using William & Mary official colors
   ═══════════════════════════════════════════════════════════ */

/* Thin gradient strip at the very top of the page */
.wm-accent-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 300;
  height: 3px;
  background: linear-gradient(90deg,
    var(--wm-green) 0%,
    var(--wm-patina) 25%,
    var(--wm-gold) 50%,
    var(--wm-spirit) 75%,
    var(--wm-green) 100%
  );
  background-size: 200% 100%;
  animation: wmShimmer 8s linear infinite;
}
@keyframes wmShimmer {
  0%   { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}

/* W&M decorative corner flourish */
.wm-corner {
  position: absolute;
  width: 200px; height: 200px;
  pointer-events: none;
  opacity: 0.06;
}
.wm-corner::before,
.wm-corner::after {
  content: '';
  position: absolute;
  border-radius: 50%;
}
.wm-corner::before {
  width: 160px; height: 160px;
  border: 2px solid var(--wm-gold);
}
.wm-corner::after {
  width: 100px; height: 100px;
  top: 30px; left: 30px;
  border: 2px solid var(--wm-green);
}
.wm-corner.top-right { top: 60px; right: -40px; }
.wm-corner.bottom-left { bottom: -40px; left: -40px; }

/* W&M-styled divider line */
.wm-divider {
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--wm-griffin) 20%,
    var(--wm-gold) 50%,
    var(--wm-griffin) 80%,
    transparent 100%
  );
  margin: 0;
  border: none;
}

/* W&M gold text highlight */
.wm-highlight { color: var(--wm-gold); }

/* W&M branded badge */
.wm-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.72rem; font-weight: 600;
  padding: 4px 12px; border-radius: 100px;
  background: rgba(0,78,56,0.15);
  border: 1px solid rgba(0,78,56,0.3);
  color: var(--wm-patina);
  letter-spacing: 0.04em;
}
.wm-badge::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--wm-gold);
  border-radius: 50%;
}

/* W&M diagonal stripe pattern overlay */
.wm-stripes {
  position: absolute; inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 40px,
    rgba(0,78,56,0.03) 40px,
    rgba(0,78,56,0.03) 42px
  );
}

/* W&M section accent — left border highlight */
.wm-section-accent {
  border-left: 3px solid transparent;
  border-image: linear-gradient(180deg, var(--wm-green), var(--wm-gold)) 1;
  padding-left: 20px;
}