@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,500;0,9..144,600;0,9..144,700;0,9..144,900;1,9..144,500&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

        :root{
          /* --- color tokens --- */
          --ink:        #1C2A20;   /* near-black pine ink, primary text */
          --ink-soft:   #4B5548;   /* muted sage-grey, secondary text */
          --paper:      #EFEAD8;   /* aged parchment background */
          --paper-2:    #E4DEC8;   /* slightly deeper parchment, panels */
          --emerald:    #058131;   /* deep faculty-gown emerald */
          --emerald-2:  #21503D;   /* lighter emerald for hovers */
          --gold:       #080808;   /* worn seal gold */
          --gold-soft:  #f6c224;   /* pale gold, hairlines on emerald */
          --clay:       #10100f;   /* ink-stamp clay red, sparing accent */
          --cream-card: #F8F5EA;   /* card surface, lighter than paper */
          --line:       rgba(28,42,32,0.16);
          --line-on-dark: rgba(239,234,216,0.22);

          /* --- type --- */
          --font-display: 'Fraunces', serif;
          --font-body: 'Inter', sans-serif;
          --font-mono: 'IBM Plex Mono', monospace;

          --step--1: clamp(0.8rem, 0.78rem + 0.1vw, 0.875rem);
          --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
          --step-1:  clamp(1.2rem, 1.1rem + 0.4vw, 1.375rem);
          --step-2:  clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);
          --step-3:  clamp(2rem, 1.6rem + 1.6vw, 2.75rem);
          --step-4:  clamp(2.6rem, 1.9rem + 2.8vw, 4.2rem);

          --radius: 3px;
          --container: 1180px;
        }



        /* Loading screen */
#loading-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper, #EFEAD8);
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

#loading-screen.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-seal {
  width: 84px;
  height: 84px;
  object-fit: contain;
  animation: loader-pulse 1.4s ease-in-out infinite;
}

.loader-ring {
  transform-origin: 32px 32px;
  animation: loader-spin 2.5s linear infinite;
}

@keyframes loader-spin {
  to { transform: rotate(360deg); }
}

@keyframes loader-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.06); opacity: 0.85; }
}

@media (prefers-reduced-motion: reduce) {
  .loader-seal, .loader-ring { animation: none; }
}




        *,*::before,*::after{ box-sizing: border-box; }
        html{ scroll-behavior: smooth; }
        @media (prefers-reduced-motion: reduce){
          html{ scroll-behavior: auto; }
          *,*::before,*::after{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
        }

        body{
          margin:0;
          background: var(--paper);
          color: var(--ink);
          font-family: var(--font-body);
          font-size: var(--step-0);
          line-height: 1.6;
          -webkit-font-smoothing: antialiased;
          
        }

        /* faint ledger-paper texture */
        body::before{
          content:"";
          position: fixed; inset:0;
          pointer-events:none;
          z-index: 0;
          background-image:
            repeating-linear-gradient(0deg, rgba(28,42,32,0.035) 0px, rgba(28,42,32,0.035) 1px, transparent 1px, transparent 34px);
          opacity: 0.6;
        }

        img{ max-width:100%; display:block; }
        a{ color: inherit; text-decoration:none; }
        h1,h2,h3,h4{ font-family: var(--font-display); font-weight:600; margin:0; color: var(--emerald); }
        p{ margin:0; }
        ul{ margin:0; padding:0; list-style:none; }
        button{ font-family: inherit; cursor:pointer; }

        :focus-visible{
          outline: 2px solid var(--clay);
          outline-offset: 3px;
        }

        .container{
          max-width: var(--container);
          margin: 0 auto;
          padding: 0 clamp(1.25rem, 4vw, 2.5rem);
          position: relative;
          z-index: 1;
        }

        .eyebrow{
          font-family: var(--font-mono);
          font-size: var(--step--1);
          letter-spacing: 0.14em;
          text-transform: uppercase;
          color: var(--clay);
          display:flex;
          align-items:center;
          gap: 0.65em;
          padding-top:10px;
          padding-left:10px;
        }
        .eyebrow::before{
          
          width: 22px; height:1px;
          background: var(--clay);
          display:inline-block;
        }

        /* ---------------- Topbar ---------------- */
        .topbar{
          background: var(--emerald);
          color: var(--paper);
          font-family: var(--font-mono);
          font-size: 0.76rem;
          letter-spacing: 0.02em;
        }
        .topbar .container{
          display:flex; flex-wrap:wrap; gap: 0.4rem 1.5rem;
          justify-content: space-between;
          padding-top: 0.5rem; padding-bottom: 0.5rem;
        }
        .topbar a{ opacity: 0.92; }
        .topbar a:hover{ color: var(--gold-soft); }
        .topbar-links{ display:flex; gap:0.5rem; flex-wrap:wrap; }

        /* ---------------- Header / Nav ---------------- */
        .site-header{
          position: sticky; top:0; z-index: 50;
          background: var(--paper);
          border-bottom: 1px solid var(--line);
          padding-left: 6px; 
          padding-right: 6px;
        }
        .nav{
          display:flex; align-items:center; justify-content:space-between;
          padding: 1rem 0;
        }
        .brand{
          display:flex; align-items:center; gap:0.75rem;
        }
        .brand-mark{ width:44px; height:44px; flex-shrink:0; object-fit:contain; }
        .brand-text{ line-height:1.15; }
        .brand-text .name{
          font-family: var(--font-display); font-weight:700; font-size:1.05rem; color:var(--emerald);
          letter-spacing:0.01em;
        }
        .brand-text .sub{
          font-family: var(--font-mono); font-size:0.62rem;font-weight: 600; letter-spacing:0.10em; color:var(--ink-soft); text-transform:uppercase;
        }

        .brand-text .subsub{
          font-family: var(--font-mono); font-size:0.6rem; letter-spacing:0.10em;font-weight: 500; color:var(--ink-soft); text-transform:uppercase;
        }

        .nav-links{
          display:flex; align-items:center; gap: 2rem;
        }
        .nav-links > li{ position:relative; }
        .nav-links a.top-link{
          font-family: var(--font-mono);
          font-size: 0.82rem;
          letter-spacing: 0.04em;
          text-transform: uppercase;
          color: var(--ink);
          padding: 0.4rem 0;
          border-bottom: 1px solid transparent;
          transition: border-color 0.2s ease, color 0.2s ease;
        }
        .nav-links a.top-link:hover, .nav-links li.current a.top-link{
          color: var(--clay);
          border-color: var(--clay);
        }
        .btn{
          display:inline-flex; align-items:center; gap:0.5rem;
          font-family: var(--font-mono);
          font-size: 0.8rem;
          letter-spacing:0.05em;
          text-transform: uppercase;
          padding: 0.7rem 1.3rem;
          border-radius: var(--radius);
          border: 1px solid var(--emerald);
          transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease;
        }
        .btn-primary{ background: var(--emerald); color: var(--paper); }
        .btn-primary:hover{ background: var(--emerald-2); transform: translateY(-1px); }
        .btn-ghost{ background: transparent; color: var(--emerald); }
        .btn-ghost:hover{ background: var(--emerald); color: var(--paper); }
        .btn-gold{ border-color: var(--gold); background: transparent; color: var(--clay); }
        .btn-gold:hover{ background: var(--gold); color: var(--emerald); border-color: var(--gold); }

        .nav-toggle{
          display:none;
          background:none; border:1px solid var(--line); border-radius: var(--radius);
          width:42px; height:42px; align-items:center; justify-content:center;
          
        }

        .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
          content:""; display:block; width:18px; height:1.5px; background: var(--ink); position:relative;
        }

        .nav-toggle span::before{ position:absolute; top:-6px; }
        .nav-toggle span::after{ position:absolute; top:6px; }

        /* ---------------- Hero (Ledger spread) ---------------- */
        .hero{
          padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(3rem, 7vw, 6rem);
          position: relative;
          overflow:hidden;
        }
        .hero-grid{
          display:grid;
          grid-template-columns: 1.35fr 0.9fr;
          gap: clamp(2rem, 5vw, 4rem);
          align-items:start;
        }
        .hero h1{
          font-size: 30;
          line-height: 1.02;
          letter-spacing: -0.01em;
          margin-top: 0.9rem;
          color: var(--emerald);
        }
        .hero h1 em{
          font-style: italic; color: var(--clay); font-weight:500;
        }
        .hero-lede{
          margin-top:1.4rem;
          max-width: 46ch;
          font-size: 25;
          color: var(--ink-soft);
        }
        .hero-actions{
          margin-top: 2rem;
          display:flex; gap:1rem; flex-wrap:wrap;
            padding-left:20px;
        }
        
        .hero-actions1{
          margin-top: 2rem;
          display:flex; gap:1rem; flex-wrap:wrap;
            
        }

        /* Admissions ledger card */
        .ledger-card{
          background: var(--cream-card);
          border: 1px solid var(--line);
          border-top: 4px solid var(--gold);
          padding: 1.75rem 1.75rem 1.5rem;
          position: relative;
          
        }
        .ledger-card .seal-wrap{
          position:absolute; top: -1px; right: 22px; width:64px; height:64px;
        }
        .ledger-title{
          font-family: var(--font-mono); font-size: 0.72rem; letter-spacing:0.14em; text-transform:uppercase; color: var(--ink-soft);
          border-bottom: 1px solid var(--line); padding-bottom: 0.85rem; margin-bottom: 0.85rem;
        }
        .ledger-row{
          display:flex; justify-content:space-between; align-items:baseline;
          padding: 0.6rem 0;
          border-bottom: 1px dashed var(--line);
          font-family: var(--font-mono); font-size: 0.85rem;
        }
        .ledger-row:last-of-type{ border-bottom:none; }
        .ledger-row .num{
          font-family: var(--font-display); font-size: 1.5rem; color: var(--emerald); font-weight:600;
        }
        .ledger-row .label{ color: var(--ink-soft); text-align:right; max-width: 64%; }
        .ledger-foot{
          margin-top:1rem; padding-top:1rem; border-top:1px solid var(--line);
          font-family: var(--font-mono); font-size:0.75rem; color: var(--clay);
          display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
        }

        /* Seal graphic, reused as the signature element */
        .seal{ width:100%; height:100%; object-fit:contain; }
        .seal .ring-text{ font-family: var(--font-mono); }

        /* ---------------- Section scaffolding ---------------- */
        section{ padding: clamp(3rem, 7vw, 6rem) 0; position:relative; }
        .section-head{
          display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; flex-wrap:wrap;
          margin-bottom: clamp(2rem, 4vw, 3rem);
        }
        .section-head h2{
          font-size: var(--step-3);
          margin-top: 0.6rem;
          max-width: 18ch;
        }
        .section-head .desc{ max-width: 38ch; color: var(--ink-soft); }
        .rule{
          border:none; border-top: 1px solid var(--line); margin: 0;
        }
        .on-emerald{ background: var(--emerald); color: var(--paper); }
        .on-emerald h2, .on-emerald h3, .on-emerald h4{ color: var(--paper); }
        .on-emerald .eyebrow{ color: var(--gold-soft); }
        .on-emerald .eyebrow::before{ background: var(--gold-soft); }
        .on-emerald .section-head .desc{ color: var(--paper-2); }

        /* ---------------- Foreword / About ---------------- */
        .foreword{
          display:grid;
          grid-template-columns: 0.85fr 1.15fr;
          gap: clamp(2rem, 5vw, 4rem);
          align-items:start;
        }
        @media (min-width: 981px){
          .foreword-even{ grid-template-columns: 1fr 1fr; }
        }
        .foreword-portrait{
          aspect-ratio: 4/5;
          background: linear-gradient(160deg, var(--emerald) 0%, #0e2a20 100%);
          position:relative;
          border: 1px solid var(--line);
          
        }
        .foreword-portrait .frame-seal{
          position:absolute; bottom:1.25rem; left:1.25rem; width:58px; height:58px; object-fit:contain;
        }
        blockquote.pull{
          font-family: var(--font-display);
          font-style: italic;
          font-size: 20px;
          color: var(--emerald);
          line-height:1.35;
          margin: 1.5rem 0;
          padding-left: 1.4rem;
          border-left: 3px solid var(--gold);
        }
        .foreword p + p{ margin-top:1rem; }
        .foreword .signature-line{
          margin-top:1.75rem; font-family: var(--font-mono); font-size:0.8rem; color: var(--ink-soft); letter-spacing:0.04em;
        }

        /* ---------------- Course Registry (ledger table / index cards) ---------------- */
       /* ---------------- Course Registry (Grid Layout) ---------------- */
.registry-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
  border-top: none; 
  padding-top: 1rem;
}

.registry-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem;
  background: var(--cream-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.2s ease;
}

.registry-row:hover {
  background: var(--cream-card);
  transform: translateY(-5px);
  box-shadow: 0 16px 30px rgba(22,60,46,0.14);
}

.registry-code {
  font-family: var(--font-mono); 
  font-size: 0.95rem; 
  color: var(--gold);
  background: var(--emerald); 
  border-radius: var(--radius);
  padding: 0.5rem 0.8rem; 
  text-align: center;
  align-self: flex-start;
}

.registry-name {
  font-family: var(--font-display); 
  font-size: var(--step-1); 
  font-weight: 600; 
  color: var(--emerald);
}

.registry-desc {
  color: var(--ink-soft); 
  font-size: var(--step--1); 
  margin-top: 0.5rem; 
}

.registry-link {
  font-family: var(--font-mono); 
  font-size: 0.78rem; 
  letter-spacing: 0.06em; 
  text-transform: uppercase; 
  color: var(--clay);
  white-space: nowrap;
  border-bottom: 1px solid var(--clay);
  margin-top: auto; /* Pushes the link to the bottom of the card */
}

.registry-link:hover {
  color: var(--emerald); 
  border-color: var(--emerald);
}


        /* course detail index cards (courses.html) */
        .card-grid{
          display:grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr));
          gap: 1.5rem;
        }
        .index-card{
          background: var(--cream-card);
          border: 1px solid var(--line);
          padding: 1.5rem;
          position:relative;
        }
        .index-card[data-code]::after{
          content: attr(data-code);
          position:absolute; top:1.1rem; right:1.1rem;
          font-family: var(--font-mono); font-size:0.68rem; color: var(--gold);
          border: 1px solid var(--gold); border-radius:50%;
          width:38px; height:38px; display:flex; align-items:center; justify-content:center;
          text-align:center; line-height:1;
        }
        .index-card h4{ font-size: 1.15rem; max-width: 80%; }
        .index-card--media{
          padding:0;
          overflow:hidden;
          min-height:220px;
        }
        .index-card--media img{
          display:block;
          width:100%;
          height:100%;
          object-fit:cover;
        }
        .index-card ul{ margin-top:1rem; display:flex; flex-direction:column; gap:0.45rem; }
        .index-card li{
          font-size:0.85rem; color: var(--ink-soft); padding-left:1.1rem; position:relative;
        }
        .index-card li::before{
          content:"—"; position:absolute; left:0; color: var(--gold);
        }

        /* ---------------- Faculty / Instructors ---------------- */
        .faculty-grid{
          display:grid; grid-template-columns: repeat(auto-fit,minmax(230px,1fr)); gap:1.5px;
          background: var(--line-on-dark);
        }
        .faculty-card{
          background: var(--emerald); padding: 1.75rem;
        }
        .faculty-photo{
          width:100%; aspect-ratio: 1;
          background: linear-gradient(150deg, #21503D, #0e2a20);
          border: 1px solid var(--line-on-dark);
          margin-bottom:1.1rem;
          position:relative; overflow:hidden;
        }
        .faculty-photo svg{ position:absolute; inset:0; width:100%; height:100%; }
        .faculty-card .role{
          font-family: var(--font-mono); font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; color: var(--gold-soft);
          margin-top:0.35rem;
        }
        .faculty-card .contact-line{
          margin-top:1rem; padding-top:1rem; border-top:1px solid var(--line-on-dark);
          font-family: var(--font-mono); font-size:0.78rem; color: var(--paper-2);
          display:flex; flex-direction:column; gap:0.3rem;
        }
        .faculty-card .contact-line a:hover{ color: var(--gold-soft); }

        /* ---------------- Testimonials ---------------- */
        .testimonial-strip{
          display:grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap:1px;
          background: var(--line);
          border: 1px solid var(--line);
        }
        .testimonial{
          background: var(--paper); padding: 2rem;
        }
        .testimonial .mark{
          font-family: var(--font-display); font-size:2.5rem; color: var(--gold); line-height:1; font-style:italic;
        }
        .testimonial p.quote{
          margin-top:0.5rem; color: var(--ink); font-size: var(--step-0);
        }
        .testimonial .attrib{
          margin-top:1.25rem; font-family: var(--font-mono); font-size:0.78rem; color: var(--ink-soft);
          display:flex; justify-content:space-between;
        }



        /* ---------------- Conference banner ---------------- */
        .banner{
          background: #058725; color: var(--paper);
          padding: 2.5rem clamp(1.25rem,4vw,2.5rem);
          display:flex; justify-content:space-between; align-items:center; gap:2rem; flex-wrap:wrap;
        }
        .banner h3{ color: var(--paper); font-size: var(--step-2); max-width:28ch; }
        .banner .eyebrow{ color: var(--paper); opacity:0.85; }
        .banner .eyebrow::before{ background: var(--paper); }
        .banner .btn-primary{ background: var(--paper); color: var(--clay); border-color: var(--paper); }
        .banner .btn-primary:hover{ background: transparent; color: var(--paper); }

        /* ---------------- Contact ---------------- */
        .contact-grid{
          display:grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap:1.5rem;
        }
        .contact-card{
          border: 1px solid var(--line-on-dark);
          padding: 1.75rem; background: rgba(239,234,216,0.04);
        }
        .contact-card .role{ font-family: var(--font-mono); font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; color: var(--gold-soft); margin-top:0.3rem; }
        .contact-card .lines{ margin-top:1.2rem; display:flex; flex-direction:column; gap:0.4rem; font-family: var(--font-mono); font-size:0.85rem; }
        .contact-card .lines a{ color: var(--paper-2); }
        .contact-card .lines a:hover{ color: var(--gold-soft); }

        .contact-form{
          display:grid; gap:1rem;
        }
        .field{ display:flex; flex-direction:column; gap:0.4rem; }
        .field label{ font-family: var(--font-mono); font-size:0.75rem; letter-spacing:0.06em; text-transform:uppercase; color: var(--ink-soft); }
        .field input, .field select, .field textarea{
          font-family: var(--font-body); font-size:0.95rem;
          padding: 0.75rem 0.85rem; border: 1px solid var(--line); background: var(--cream-card); color: var(--ink);
          border-radius: var(--radius);
        }
        .field input:focus, .field select:focus, .field textarea:focus{ outline:2px solid var(--clay); outline-offset:1px; }
        .field-row{ display:grid; grid-template-columns: 1fr 1fr; gap:1rem; }

        .map-note{
          border:1px dashed var(--line); padding:1.5rem; font-family: var(--font-mono); font-size:0.82rem; color: var(--ink-soft);
        }

        /* ---------------- Footer ---------------- */
        footer.site-footer{
          background: var(--emerald); color: var(--paper-2);
          padding-top: clamp(3rem,6vw,4.5rem);
        }
        .footer-grid{
          display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:2.5rem;
          padding-bottom: 2.5rem; border-bottom: 1px solid var(--line-on-dark);
        }
        .footer-brand .brand-text .name{ color: var(--paper); }
        .footer-brand p{ margin-top:1rem; max-width: 34ch; color: var(--paper-2); font-size:0.92rem; }
        .footer-col h5{
          font-family: var(--font-mono); font-size:0.72rem; letter-spacing:0.12em; text-transform:uppercase; color: var(--gold-soft);
          margin-bottom:1rem;
        }
        .footer-col ul{ display:flex; flex-direction:column; gap:0.6rem; }
        .footer-col a{ font-size:0.9rem; color: var(--paper-2); }
        .footer-col a:hover{ color: var(--gold-soft); }
        .footer-bottom{
          display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap;
          padding: 1.5rem 0 2rem;
          font-family: var(--font-mono); font-size:0.75rem; color: var(--paper-2);
        }
        .footer-socials{ display:flex; gap:1rem; }
        .footer-socials a{ border:1px solid var(--line-on-dark); border-radius:50%; width:34px; height:34px; display:flex; align-items:center; justify-content:center; }
        .footer-socials a:hover{ border-color: var(--gold-soft); color: var(--gold-soft); }

        /* ---------------- Page header (interior pages) ---------------- */
        .page-header{
          background: var(--emerald); color: var(--paper); padding: clamp(3.5rem,7vw,5.5rem) 0 clamp(2.5rem,5vw,3.5rem);
        }
        .page-header h1{ color: var(--paper); font-size: var(--step-3); margin-top:0.7rem; max-width: 24ch; }
        .page-header p{ color: var(--paper-2); margin-top:1rem; max-width:56ch; }
        .breadcrumb{
          font-family: var(--font-mono); font-size:0.75rem; color: var(--gold-soft); letter-spacing:0.05em; text-transform:uppercase;
        }
        .breadcrumb a{ color: var(--paper-2); }
        .breadcrumb a:hover{ color: var(--gold-soft); }
        .page-header .breadcrumb{ animation: fade-slide-up 0.7s ease both; }
        .page-header h1{ animation: fade-slide-up 0.8s ease 0.08s both; }
        .page-header p{ animation: fade-slide-up 0.8s ease 0.18s both; }

        /* ---------------- Reveal-on-scroll ---------------- */
        .reveal{ opacity:0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s ease; }
        .reveal.is-visible{ opacity:1; transform:none; }

        /* staggered children within revealed grids/lists */
        .card-grid.reveal .index-card,
        .faculty-grid.reveal .faculty-card,
        .registry-list.reveal .registry-row,
        .testimonial-strip.reveal .testimonial{
          opacity:0; transform: translateY(18px);
          transition: opacity 0.55s ease, transform 0.55s ease;
        }
        .card-grid.reveal.is-visible .index-card,
        .faculty-grid.reveal.is-visible .faculty-card,
        .registry-list.reveal.is-visible .registry-row,
        .testimonial-strip.reveal.is-visible .testimonial{
          opacity:1; transform:none;
        }
        .card-grid .index-card:nth-child(1),.faculty-grid .faculty-card:nth-child(1),.registry-list .registry-row:nth-child(1),.testimonial-strip .testimonial:nth-child(1){ transition-delay:0.05s; }
        .card-grid .index-card:nth-child(2),.faculty-grid .faculty-card:nth-child(2),.registry-list .registry-row:nth-child(2),.testimonial-strip .testimonial:nth-child(2){ transition-delay:0.15s; }
        .card-grid .index-card:nth-child(3),.faculty-grid .faculty-card:nth-child(3),.registry-list .registry-row:nth-child(3),.testimonial-strip .testimonial:nth-child(3){ transition-delay:0.25s; }
        .card-grid .index-card:nth-child(4),.faculty-grid .faculty-card:nth-child(4),.registry-list .registry-row:nth-child(4),.testimonial-strip .testimonial:nth-child(4){ transition-delay:0.35s; }
        .card-grid .index-card:nth-child(5),.registry-list .registry-row:nth-child(5){ transition-delay:0.45s; }
        .card-grid .index-card:nth-child(6),.registry-list .registry-row:nth-child(6){ transition-delay:0.55s; }

        /* ---------------- Motion: hover + ambient ---------------- */
        @keyframes spin-slow{ from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } }
        @keyframes fade-slide-up{ from{ opacity:0; transform: translateY(10px); } to{ opacity:1; transform:none; } }
        @keyframes pulse-ring{ 0%,100%{ opacity:1; } 50%{ opacity:0.45; } }

        .seal-spin{ animation: spin-slow 60s linear infinite; transform-origin: 50% 50%; }

        .index-card, .faculty-card, .testimonial, .registry-row, .ledger-card, .contact-card{
          transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.25s ease;
        }
        .index-card:hover{ transform: translateY(-5px); box-shadow: 0 16px 30px rgba(22,60,46,0.14); }
        .faculty-card:hover{ background: var(--emerald-2); }
        .testimonial:hover{ transform: translateY(-4px); }
        .registry-row:hover .registry-code{ transform: scale(1.08) rotate(-2deg); }
        .registry-code{ transition: transform 0.25s ease; }
        .contact-card:hover{ transform: translateY(-4px); border-color: var(--gold-soft); }
        .btn{ transition: transform 0.18s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
        .btn:hover{ box-shadow: 0 8px 18px rgba(22,60,46,0.18); }
        .btn:active{ transform: translateY(0); box-shadow:none; }
        .ledger-card:hover{ transform: translateY(-3px); box-shadow: 0 18px 34px rgba(22,60,46,0.14); }

        .hero h1{ animation: fade-slide-up 0.8s ease both; }
        .hero-lede{ animation: fade-slide-up 0.8s ease 0.12s both; }
        .hero-actions{ animation: fade-slide-up 0.8s ease 0.22s both; }
        .hero .eyebrow{ animation: fade-slide-up 0.8s ease both; }

        /* ---------------- Slider component ---------------- */
        .slider{ position: relative; overflow: hidden; }
        .slider .slides-track{
          display:flex;
          transition: transform 0.7s cubic-bezier(0.65,0,0.35,1);
          background-color: rgb(223, 217, 217);
          
        

        }
        .slider .slide{ flex: 0 0 100%; min-width: 100%;
        background-color: rgb(223, 217, 217); 
        
        
      }

      .slider .slide1{ flex: 0 0 100%; min-width: 100%;
        background-color: rgb(223, 217, 217); 
        
      }

        .slider-controls{
          display:flex; align-items:center; gap: 1.1rem;
          margin-top: clamp(1.5rem, 3vw, 2.25rem);
        }
        .slider-dots{ display:flex; gap: 0.55rem; }
        .slider-dot{
          width:8px; height:8px; border-radius:50%; border:none; padding:0;
          background: var(--line); cursor:pointer;
          transition: background 0.2s ease, transform 0.2s ease;
        }
        .slider-dot.active{ background: var(--clay); transform: scale(1.4); }
        .on-emerald .slider-dot{ background: var(--line-on-dark); }
        .on-emerald .slider-dot.active{ background: var(--gold); }

        .slider-arrow{
          width:40px; height:40px; border-radius:50%;
          border: 1px solid var(--line);
          background: transparent; color: var(--emerald);
          display:flex; align-items:center; justify-content:center; flex-shrink:0;
          transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
        }
        .slider-arrow:hover{ background: var(--emerald); color: var(--paper); border-color: var(--emerald); transform: scale(1.06); }
        .slider-arrow svg{ width:16px; height:16px; }
        .on-emerald .slider-arrow{ border-color: var(--line-on-dark); color: var(--paper); }
        .on-emerald .slider-arrow:hover{ background: var(--gold); border-color: var(--gold); color: var(--emerald); }

        .hero-slider .slide{ 
            padding-left:20px;
        
           }
           .hero-slider .slide1 {
    text-align: center;
}



        .hero-seal{
          
          
        }

        .t-slider{ max-width: 640px; margin: 0 auto; }
        .t-slider .testimonial{ background: transparent; padding: 0; text-align:center; }
        .t-slider .mark{ font-size: 3.2rem; }
        .t-slider p.quote{ font-size: var(--step-1); font-family: var(--font-display); font-style: italic; color: var(--emerald); line-height:1.4; }
        .t-slider .attrib{ justify-content:center; gap:0.75rem; margin-top:1.5rem; }
        .t-slider .attrib span:first-child{ color: var(--ink); font-weight:600; }
        .t-slider .attrib span:first-child::after{ content:"·"; margin-left:0.75rem; color: var(--gold); }

        /* ---------------- Social icons ---------------- */
        .footer-socials a{ color: var(--paper-2); }
        .footer-socials a svg{ width:16px; height:16px; display:block; }
        .footer-socials a:hover svg{ color: var(--gold-soft); }

        /* ---------------- Utility ---------------- */
        .mt-lg{ margin-top: clamp(2rem,4vw,3rem); }
        .text-center{ text-align:center; }

        /* ---------------- Responsive ---------------- */
        @media (max-width: 980px){
          .hero-grid{ grid-template-columns: 1fr;
          
         }
          .foreword{ grid-template-columns: 1fr; }
          .foreword-portrait{ max-width: 320px; }
          .footer-grid{ grid-template-columns: 1fr 1fr; }
        }
        @media (max-width: 760px){
          .topbar .container{ font-size:0.7rem; }
          .nav-toggle{ display:flex; }
          .nav-links{
            position:absolute; top:100%; left:0; right:0;
            background: var(--paper); border-bottom:1px solid var(--line);
            flex-direction:column; align-items:flex-start; gap:0; ;
            display:none;
          }
          .brand-text .sub{
          font-family: var(--font-mono); font-size:0.62rem;font-weight: 600; letter-spacing:0.05em; color:var(--ink-soft); text-transform:uppercase;
        }

        .brand-text .subsub{
          font-family: var(--font-mono); font-size:0.6rem; letter-spacing:0.05em;font-weight: 500; color:var(--ink-soft); text-transform:uppercase;
        }
          .nav-links.open{ display:flex; }
          .nav-links > li{ width:100%; padding:  5px; border-bottom:1px solid var(--line);  }
          .nav-links > li:last-child{ border-bottom:none; padding-top:1rem; }
          .registry-row{ grid-template-columns: 60px 1fr; }
          .registry-link{ grid-column: 1 / -1; }
          .field-row{ grid-template-columns:1fr; }
          .footer-grid{ grid-template-columns: 1fr; }
          .banner{ flex-direction:column; align-items:flex-start; }
        }