:root{
  --max-width: 1120px;

  /* desktop sticky header height (approx) */
  --header-height: 120px;
  --anchor-gap: 14px;

  /* anchor offset MUST follow header height */
  --anchor-offset: calc(var(--header-height) + 14px);

  /* LIGHT THEME TOKENS */
  --bg0: #ffffff;
  --bg1: #f7f9ff;

  --panel: rgba(255,255,255,0.82);
  --panel2: rgba(255,255,255,0.70);
  --border: rgba(15,23,42,0.12);

  --text: rgba(15,23,42,0.92);
  --muted: rgba(51,65,85,0.72);

  /* header (lighter charcoal glass) */
  --header-bg: #1f2937;
  /* --header-bg: #1e293b; */
  /* --header-bg: rgba(30, 41, 59, 0.94);   /* deeper slate, less see-through */
  /* --header-bg: rgba(55, 60, 70, 0.86); */
  --header-text: rgba(255,255,255,1.0);
  --header-muted: rgba(255,255,255,0.78);
  --header-border: rgba(255,255,255,0.10);

  --accentA: #7a4dff;
  --accentB: #00b7c7;
  --accentC: #90e8b0;
  --accentD: #ff4d8d;
  --accentE: #ffb000;
}

/* Reset */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  line-height:1.65;
  color: var(--text);

  /* background: linear-gradient(180deg, #f6f3ff 0%, #ffffff 55%, #ffffff 100%); */

  /* background:
    radial-gradient(1200px 600px at 15% 10%, rgba(122,77,255,0.14), transparent 58%),
    radial-gradient(1000px 520px at 75% 25%, rgba(0,183,199,0.12), transparent 58%),
    radial-gradient(900px 520px at 60% 80%, rgba(144,232,176,0.10), transparent 58%),
    linear-gradient(180deg, var(--bg0) 0%, var(--bg1) 55%, var(--bg0) 100%); */

  background: #f8fafc
  /* background:
  radial-gradient(1200px 600px at 15% 10%, rgba(30, 64, 175, 0.08), transparent 60%),
  radial-gradient(1000px 520px at 75% 25%, rgba(0, 120, 150, 0.06), transparent 60%),
  radial-gradient(900px 520px at 60% 80%, rgba(16, 185, 129, 0.05), transparent 60%),
  linear-gradient(180deg, #f8fafc 0%, #f1f5f9 55%, #ffffff 100%); */

}



.container{
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 22px;
}

/* Header */
.header{
  position: sticky;
  top: 0;
  z-index: 1000;
  padding: 18px 0;

  background: var(--header-bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid var(--header-border);
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:relative;
  gap: 18px;
}

.brand{ min-width: 220px; }

.brand-title{
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.3px;
  color: var(--header-text);
}

.brand-subtitle{
  font-size: 14px;
  color: rgba(255,255,255,0.80);
  margin-top: 6px;
}

/* Nav */
.nav{
  display:flex;
  align-items:center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 0;
}

.nav a{
  text-decoration:none;
  color: var(--header-text);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.2px;

  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: transform .15s ease, background .2s ease, border-color .2s ease, color .2s ease;
}

.nav a:hover{
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.18);
  transform: translateY(-1px);
  color: #fff;
}

/* Main */
.main{
  padding: 34px 22px 72px;
  max-width: 900px;
  margin: 0 auto;
}

/* Base content styling */
.main a {
  color: #1e40af;   /* academic blue */
  text-decoration: underline;
  font-weight: 500;
}

.main a:hover {
  text-decoration: underline;
}


/* /* ✅ FIX: Anchor offset for sticky header (desktop + mobile) */
[id]{ scroll-margin-top: var(--anchor-offset); } */

/* Any element with an id will scroll below the sticky header */
[id]{
  scroll-margin-top: calc(var(--header-h) + var(--anchor-gap));
}

/* Hero block */
.hero-block{
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--border);

  background: white;

  /* Background image layer */
  /* background:
    linear-gradient(rgba(255,255,255,0.80), rgba(255,255,255,0.80)),
    url("banff.jpg") center / cover no-repeat; */

  box-shadow: 0 18px 60px rgba(15,23,42,0.14);
  

  /* room for ribbon background */
  padding: 26px 26px 40px;
}

/* content always above ribbon */
.hero-top{
  display:flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  z-index: 2;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  width: fit-content;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.4px;

  color: rgba(15,23,42,0.86);
  border: 1px solid rgba(15,23,42,0.12);
  background: rgba(15,23,42,0.04);
}

.badge-dot{
  width: 12px; height: 12px; border-radius: 99px;
  background: linear-gradient(90deg, var(--accentA), var(--accentB), var(--accentC));
  box-shadow: 0 0 16px rgba(0,183,199,0.30);
}

h1{
  margin: 0;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.9px;
  color: rgba(15,23,42,0.95);
}

.hero-sub{
  margin: 0;
  font-size: 18px;
  color: var(--muted);
  max-width: 70ch;
}

.hero-meta{
  display:flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  color: rgba(15,23,42,0.72);
  font-size: 14px;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(15,23,42,0.04);
  white-space: nowrap;
}

.pill strong{ color: rgba(15,23,42,0.95); font-weight: 750; }

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 14px;

  border: 1px solid rgba(15,23,42,0.12);
  background: rgba(255,255,255,0.88);
  color: rgba(15,23,42,0.95);
  text-decoration:none;

  font-weight: 750;
  transition: transform .15s ease, background .2s ease, border-color .2s ease, filter .2s ease;
}

.btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.98);
  border-color: rgba(15,23,42,0.18);
}

.btn.primary{
  border: none;
  background: linear-gradient(90deg, var(--accentA), var(--accentB), var(--accentC));
  color: #061018;
  box-shadow: 0 14px 40px rgba(0,183,199,0.12);
}

.btn.primary:hover{
  filter: brightness(1.03);
}

.btn.small{
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 14px;
}
/* /* === STATIC PROFESSIONAL RIBBON (responsive, no crop) === */

.hero-ribbon{
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;

  height: clamp(64px, 8vw, 96px);
  border-radius: 16px;
  overflow: hidden;

  border: 1px solid rgba(15,23,42,0.08);
  background: rgba(255,255,255,0.55);

  pointer-events: none;
  z-index: 1;

  /* soft edge fade */
  -webkit-mask-image: linear-gradient(to right,
    transparent 0%,
    black 4%,
    black 96%,
    transparent 100%);
  mask-image: linear-gradient(to right,
    transparent 0%,
    black 4%,
    black 96%,
    transparent 100%);
}

.hero-ribbon::before{
  content:"";
  position:absolute;
  inset: 6px;                 /* avoids border-radius clipping */

  background-image: url("/assets/ribbon.svg");
  background-repeat: repeat-x; /* ✅ makes it feel full on desktop */
  background-position: 50% 50%;/* ✅ prevents “cropped corner” look */
  background-size: 100% 180%;

  /*            ^ smaller = denser lines (less “thin”) */

  opacity: 0.9;
}

/* Mobile: show more of the wave (less zoomed/cropped) */
@media (max-width: 720px){
  .hero-ribbon{
    height: 86px;           /* slightly tighter on phone */
    left: 14px;
    right: 14px;
    bottom: 14px;
    border-radius: 14px;
  }

  .hero-ribbon::before{
    background-size: 820px 100%;  /* ✅ smaller tile so you see more shape */
    opacity: 0.75;
  }
}
 */

/* Thin full-width Banff strip */
.location-strip{
  width: 100vw;
  height: 240px;   /* adjust height if needed */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  background: url("banff.jpg") center / cover no-repeat;
}

/* Base content styling */
/* a{ color: rgba(15,23,42,0.92); } */
/* a:hover{ color: rgba(15,23,42,0.98); } */

ul{ margin: 10px 0 0 20px; }
li{ margin: 6px 0; color: var(--text); }

.section-title{
  margin-top: 46px;
  font-size: 24px;
  letter-spacing: -0.3px;
  color: rgba(15,23,42,0.95);
}

.section-lead{
  color: var(--muted);
  max-width: 80ch;
}

/* Footer */
.footer{
  border-top: 1px solid rgba(15,23,42,0.10);
  padding: 22px 0;
  margin-top: 56px;
  color: rgba(15,23,42,0.55);
  font-size: 14px;
}

/* ---------- Pro polish: typography + layout rhythm ---------- */

/* Slightly larger, more readable body */
body{
  font-size: 17px;
}

/* Constrain paragraphs for readability */
.main{
  padding-top: 34px;
  padding-bottom: 72px;
}

/* Better section spacing */
hr{
  border: 0;
  border-top: 1px solid rgba(15,23,42,0.10);
  margin: 24px 0;
}

/* Headings hierarchy */
h2{
  margin-top: 24px;
  margin-bottom: 14px;
  font-size: 28px;
  letter-spacing: -0.4px;
  line-height: 1.15;
}

h3{
  margin-top: 24px;
  margin-bottom: 10px;
  font-size: 20px;
  letter-spacing: -0.2px;
}

/* Paragraph spacing */
p{
  margin: 0 0 14px;
}

/* Lists look “conference clean” */
ul{
  margin: 12px 0 0 20px;
  padding: 0;
}
li{
  margin: 8px 0;
  line-height: 1.55;
}

/* =========================
   HAMBURGER NAV
   ========================= */

/* Hide toggle on desktop */
.nav-toggle{
  display:none;
  background:none;
  border:none;
  cursor:pointer;
  flex-direction:column;
  gap:4px;
}

.nav-toggle span{
  width:22px;
  height:2px;
  background:#ffffff;
  display:block;
  transition:0.3s ease;
}

/* Mobile / small screens */
@media (max-width: 920px){

  /* --- Header layout --- */
  .header-inner{
    flex-direction: row;        /* ✅ keep row (brand left, burger right) */
    align-items: center;
  }

  .brand{
    max-width: calc(100% - 56px); /* keep room for burger */
  }

  /* --- Hamburger button --- */
  .nav-toggle{
    display: inline-flex;       /* ✅ show only on mobile */
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.06);
    color: #fff;
    cursor: pointer;
  }

  /* --- Dropdown menu --- */
  .nav{
    position: absolute;
    top: calc(100% + 12px);     /* below header */
    right: 0;
    left: 0;
    width: auto;

    display: none;              /* ✅ hidden until active */
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;

    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(55, 60, 70, 0.96); /* match header */
    border: 1px solid rgba(255,255,255,0.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .nav a{
    width: 100%;
    padding: 10px 12px;
    border-radius: 12px;
  }

  .nav.active{
    display: flex;              /* ✅ open state */
  }

  /* --- Anchor offset: ONLY sticky header height (not dropdown) --- */
  :root{
    --header-height: 92px; /* stable height now */
    --anchor-offset: calc(var(--header-height) + 40px);
  }

  /* --- your spacing tweaks (keep) --- */
  .container{ padding: 0 16px; }

  .hero-block{ padding: 22px 18px 40px; }
  .hero-ribbon{ height: 125px; left: 14px; right: 14px; bottom: 14px; }
}