@font-face {
  font-display: swap; font-family: 'DM Serif Display'; font-style: normal; font-weight: 400;
  src: url('../fonts/dm-serif-display-v17-latin-regular.woff2') format('woff2');
}

@font-face {
  font-display: swap;font-family: 'DM Serif Display';font-style: italic;font-weight: 400;
  src: url('../fonts/dm-serif-display-v17-latin-italic.woff2') format('woff2');
}

@font-face {
  font-display: swap;font-family: 'DM Sans';font-style: normal;font-weight: 300;
  src: url('../fonts/dm-sans-v17-latin_latin-ext-300.woff2') format('woff2');
}

@font-face {
  font-display: swap;font-family: 'DM Sans';font-style: italic;font-weight: 300;
  src: url('../fonts/dm-sans-v17-latin_latin-ext-300italic.woff2') format('woff2');
}

@font-face {
  font-display: swap;font-family: 'DM Sans';font-style: normal;font-weight: 400;
  src: url('../fonts/dm-sans-v17-latin_latin-ext-regular.woff2') format('woff2');
}

@font-face {
  font-display: swap;font-family: 'DM Sans';font-style: normal;font-weight: 500;
  src: url('../fonts/dm-sans-v17-latin_latin-ext-500.woff2') format('woff2');
}

@font-face {
  font-display: swap;font-family: 'DM Sans';font-style: normal;font-weight: 600;
  src: url('../fonts/dm-sans-v17-latin_latin-ext-600.woff2') format('woff2');
}

@font-face {
  font-display: swap;font-family: 'DM Mono';font-style: normal;font-weight: 400;
  src: url('../fonts/dm-mono-v16-latin_latin-ext-regular.woff2') format('woff2');
}

@font-face {
  font-display: swap;font-family: 'DM Mono';font-style: normal;font-weight: 500;
  src: url('../fonts/dm-mono-v16-latin_latin-ext-500.woff2') format('woff2');
}

/* =====================================================
    DESIGN TOKENS
===================================================== */
:root {
  --orange:        #B84D0F;  
  --orange-mid:    #F07E3A;
  --orange-light:  #FDE9D5;
  --orange-pale:   #FEF5ED;
  --orange-dark:   #AF4912;

  --teal:          #2A9E96;
  --teal-mid:      #3AB8AE;
  --teal-light:    #CCF0ED;
  --teal-pale:     #EBF9F8;
  --teal-dark:     #0D726C;
  --teal-darker:   #0b655f;
  
  --cream:         #FFFCF8;
  --cream-dark:    #F5F0EA;
  --stone:         #E8E2D8;
  --stone-mid:     #CAC2B5;
  --stone-dark:    #A09790;
  --stone-darker:  #7F736C;

  --ink:           #1E1B18;
  --ink-mid:       #44403B;
  --ink-soft:      #6B6560;
  --ink-faint:     #736D64;
  
  --sp-xs:  clamp(0.5rem,  1vw,   0.625rem);
  --sp-sm:  clamp(0.75rem, 1.5vw, 1rem);
  --sp-md:  clamp(1.25rem, 2.5vw, 1.75rem);
  --sp-lg:  clamp(2rem,    4vw,   3rem);
  --sp-xl:  clamp(3rem,    6vw,   5rem);
  --sp-2xl: clamp(5rem,    9vw,   8rem);

  --t-xs:   clamp(0.85rem,  1.4vw, 0.875rem);
  --t-sm:   clamp(0.875rem, 1.7vw, 0.9375rem);
  --t-base: clamp(1rem,     1.9vw, 1.0625rem);
  --t-md:   clamp(1.125rem, 2.2vw, 1.25rem);
  --t-lg:   clamp(1.375rem, 2.8vw, 1.625rem);
  --t-xl:   clamp(1.75rem,  3.8vw, 2.25rem);
  --t-2xl:  clamp(2.25rem,  5vw,   3.25rem);
  --t-3xl:  clamp(3rem,     6.5vw, 4.5rem);

  --r-sm: 5px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px;
  --sh-xs:  0 1px 2px rgba(30,27,24,.06);
  --sh-sm:  0 2px 8px rgba(30,27,24,.08);
  --sh-md:  0 6px 24px rgba(30,27,24,.10);
  --sh-lg:  0 16px 56px rgba(30,27,24,.12);
  --max-w: 1100px;
  --prose: 65ch;

  --f-display: 'DM Serif Display',serif;
  --f-body: 'DM Sans',sans-serif;
  --f-mono: 'DM Mono', 'Courier New', monospace;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration:.01ms!important;transition-duration:.01ms!important;animation-iteration-count:1!important; }
}

body {font-family: var(--f-body);font-size: var(--t-base);line-height: 1.75;color: var(--ink-mid);background: var(--cream);-webkit-font-smoothing: antialiased;}
img { max-width: 100%; display: block; height: auto; }
ul  { list-style: none; }
a   { color: inherit; }
:focus-visible { outline: 2.5px solid var(--orange); outline-offset: 3px; border-radius: var(--r-sm); }
.skip-link {
  position: absolute; top: -100%; left: 1rem; z-index: 9999;
  background: var(--orange); color: #fff;
  font-family: var(--f-body); font-weight: 600; font-size: var(--t-sm);
  padding: .5rem 1.25rem; border-radius: 0 0 var(--r-md) var(--r-md);
  text-decoration: none; transition: top .2s;
}
.skip-link:focus { top: 0; }
.container { width: 100%; max-width: var(--max-w); margin-inline: auto; padding-inline: clamp(1.25rem,5vw,2.5rem); }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
.icon { display:inline-block;vertical-align:middle;flex-shrink:0; }
.ic { font-family:var(--f-mono);font-size:.88em;background:var(--cream-dark);color:var(--teal-dark);padding:.1em .35em;border-radius:4px;border:1px solid var(--stone); }

/* =====================================================
    HEADER / NAV
===================================================== */
.site-header {
  position: sticky; top: 0; z-index: 200;
  background: rgba(250,248,244,.94);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--stone);
}

.nav-wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-md); padding-block: clamp(.75rem,1.5vw,1rem);
}

.logo-link { display:flex;align-items:center;gap:.625rem;text-decoration:none;flex-shrink:0; }
.logo-link img { height:clamp(34px,4.5vw,42px);width:auto; }

.nav-list { display:flex;align-items:center;gap:clamp(.2rem,1.5vw,1.25rem); }
.nav-list a {
  font-size: var(--t-sm); font-weight: 500; color: var(--ink-mid);
  text-decoration: none; padding: .375rem .55rem;
  border-radius: var(--r-sm); transition: color .15s, background .15s;
  white-space: nowrap;
}
.nav-list a:hover { color:var(--ink);background:var(--cream-dark); }
.nav-list a[aria-current="page"] { color:var(--orange-dark);background:var(--orange-pale); }

.nav-dl {
  font-weight: 600!important; background: var(--orange)!important;
  color: #fff!important; padding: .4rem 1rem!important;
  border-radius: var(--r-pill)!important;
  transition: background .15s, box-shadow .15s!important;
}
.nav-dl:hover { background:var(--orange-dark)!important;color:#fff!important;box-shadow:0 2px 8px rgba(232,98,26,.3)!important; }

.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 40px; height: 40px; background: none;
  border: 1.5px solid var(--stone); border-radius: var(--r-md);
  cursor: pointer; color: var(--ink); transition: border-color .15s;
}
.nav-toggle:hover { border-color:var(--stone-dark); }
.nav-toggle svg { pointer-events:none; }

@media (max-width: 780px) {
  .nav-toggle { display: flex; }
  .nav-list {
    display: none; position: absolute; top: calc(100% + 1px); inset-inline: 0;
    flex-direction: column; align-items: stretch; gap: 0.825rem;
    background: var(--cream); border-bottom: 1px solid var(--stone);
    box-shadow: var(--sh-md); 
    padding: var(--sp-sm) var(--sp-md) var(--sp-md);
  }
  .nav-list.is-open { display: flex; }
  .nav-list a { padding: .625rem .75rem; border-radius: var(--r-md); }
  .nav-dl { text-align: center; margin-top: .5rem; }
}

/* =====================================================
    BUTTONS
===================================================== */
.btn { display:inline-flex;align-items:center;gap:.45em;font-family:var(--f-body);font-weight:600;font-size:var(--t-sm);line-height:1;padding:.75em 1.5em;border-radius:var(--r-pill);text-decoration:none;border:2px solid transparent;cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s,color .15s,border-color .15s;white-space:nowrap; }
.btn:hover { transform:translateY(-1px); }
.btn:active { transform:translateY(0); }
.btn-primary { background:var(--orange);color:#fff;border-color:var(--orange);box-shadow:0 2px 10px rgba(232,98,26,.25); }
.btn-primary:hover { background:var(--orange-dark);border-color:var(--orange-dark);box-shadow:0 4px 16px rgba(232,98,26,.5);color:#fff; }
.btn-outline { background:transparent;color:var(--ink);border-color:var(--stone); }
.btn-outline:hover { border-color:var(--ink-mid);color:var(--ink);box-shadow:var(--sh-sm); }
.btn-teal { background:var(--teal-dark);color:#fff;border-color:var(--teal-dark); }
.btn-teal:hover { background:var(--teal-dark);border-color:var(--teal-dark);color:#fff;box-shadow:0 4px 16px rgba(42,139,132,.3); }

/* =====================================================
    FOOTER
===================================================== */
.site-footer { background:var(--ink);color:rgba(255,255,255,.62);padding-block:var(--sp-xl) var(--sp-lg); }
.footer-grid { display:grid;grid-template-columns:1fr;gap:var(--sp-lg); }
@media (min-width:560px) { .footer-grid { grid-template-columns:1.6fr 1fr 1fr;gap:var(--sp-xl);align-items:start; } }
.footer-brand-name { font-family:'DM Serif Display',serif;font-size:var(--t-lg);color:#fff;margin-bottom:.5rem; }
.footer-brand-name .edu { color:var(--orange-mid); }
.footer-brand-name .activ { color:var(--teal-mid); }
.footer-brand-desc { font-size:var(--t-sm);line-height:1.7;max-width:36ch;color:rgba(255,255,255,.5); }
.footer-col-heading { font-size:var(--t-xs);font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:.875rem; }
.footer-links { display:flex;flex-direction:column;gap:.45rem; }
.footer-links a { font-size:var(--t-sm);font-weight:400;color:rgba(255,255,255,.6);text-decoration:none;transition:color .15s; }
.footer-links a:hover { color:#fff; }
.footer-bottom { margin-top:var(--sp-xl);padding-top:var(--sp-md);border-top:1px solid rgba(255,255,255,.1);display:flex;flex-wrap:wrap;gap:.75rem var(--sp-md);align-items:center;justify-content:space-between; }
.footer-copy { font-size:var(--t-xs);color:rgba(255,255,255,.46); }
.footer-bottom-links { display:flex;gap:var(--sp-md); }
.footer-bottom-links a { font-size:var(--t-xs);font-weight:500;color:rgba(255,255,255,.5);text-decoration:none;transition:color .15s; }
.footer-bottom-links a:hover { color:rgba(255,255,255,.75); }

/* =====================================================
    OTHER
===================================================== */
.imgage-wrap { border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-md);border:1px solid var(--stone);}
.imgage-wrap img { width:100%;display:block; }
.image-caption { text-align:center;margin-top:var(--sp-sm);margin-bottom:var(--sp-sm);font-size:var(--t-sm);color:var(--ink-faint);font-style:italic; }
.link-teal {color:var(--teal-dark);text-decoration:underline;text-underline-offset:2px;}
.link-teal:hover {color:var(--teal-darker);text-decoration:none;}