/* ============================================================================
   dean.school — base: reset, type, material, chrome, reveal
   ========================================================================= */

*,
*::before,
*::after { box-sizing: border-box; }

/* An author `display` rule beats the UA stylesheet's [hidden] { display:none },
   which silently rendered the static atlas alongside the interactive rail. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--chalk);
  font-family: var(--sans);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
  overflow-x: hidden;
}

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
button, input, select { font: inherit; color: inherit; }

/* --- Focus. Brass, always visible, never under sticky chrome. ------------- */

:focus-visible {
  outline: 2px solid var(--brass-lift);
  outline-offset: 3px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

.skip {
  position: absolute;
  left: var(--gutter);
  top: 0;
  z-index: calc(var(--z-nav) + 1);
  transform: translateY(-140%);
  padding: 0.75rem 1.25rem;
  background: var(--chalk);
  color: var(--ink);
  border-radius: 0 0 12px 12px;
  font-size: var(--t-small);
  font-weight: 550;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-state);
}
.skip:focus { transform: translateY(0); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Type primitives ------------------------------------------------------ */

.t-hero {
  font-size: var(--t-hero);
  font-weight: 560;
  line-height: 0.88;
  letter-spacing: -0.042em;
  text-wrap: balance;
}

.t-scene {
  font-size: var(--t-scene);
  font-weight: 550;
  line-height: 0.94;
  letter-spacing: -0.036em;
  text-wrap: balance;
}

.t-sub {
  font-size: var(--t-sub);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.028em;
}

.t-lead {
  font-size: var(--t-lead);
  font-weight: 400;
  line-height: 1.34;
  letter-spacing: -0.019em;
  color: var(--chalk-dim);
  max-width: 34ch;
}

.t-body { max-width: var(--read-max); color: var(--chalk-dim); }

.t-edit {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.16;
}

.t-micro {
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 450;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--chalk-mute);
}

.t-num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

.brass { color: var(--brass-lift); }
.dim { color: var(--chalk-dim); }
.mute { color: var(--chalk-mute); }

/* --- Layout --------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.act { position: relative; padding-block: var(--act-pad); }

/* Jump links must not park a heading underneath the floating nav. */
section[id],
[id]:target { scroll-margin-top: clamp(5.5rem, 11vh, 7.5rem); }

/* --- Material: nested enclosure ------------------------------------------- */

.bezel {
  padding: var(--shell-pad);
  border-radius: var(--r-shell);
  background: rgba(244, 241, 232, 0.032);
  border: 1px solid var(--hair);
  position: relative;
}

.bezel > .core {
  border-radius: var(--r-core);
  background: var(--ink-raise);
  border: 1px solid rgba(244, 241, 232, 0.06);
  box-shadow: inset 0 1px 0 rgba(244, 241, 232, 0.07);
  overflow: hidden;
  position: relative;
}

/* --- Buttons -------------------------------------------------------------- */

.btn {
  --btn-bg: var(--chalk);
  --btn-fg: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 44px;
  padding: 0.6875rem 0.6875rem 0.6875rem 1.375rem;
  border: 1px solid transparent;
  border-radius: var(--r-chip);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--t-small);
  font-weight: 550;
  letter-spacing: -0.012em;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-state),
    background-color var(--dur-fast) var(--ease-state),
    border-color var(--dur-fast) var(--ease-state);
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(0.98); }

.btn__ico {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--r-chip);
  background: rgba(10, 11, 10, 0.09);
  transition: transform var(--dur-mid) var(--ease-state),
    background-color var(--dur-fast) var(--ease-state);
}
.btn__ico svg { width: 13px; height: 13px; }
.btn:hover .btn__ico { transform: translate(2px, -1px) scale(1.06); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--chalk);
  border-color: var(--hair-strong);
}
.btn--ghost .btn__ico { background: rgba(244, 241, 232, 0.09); }
.btn--ghost:hover { background: rgba(244, 241, 232, 0.05); border-color: var(--chalk-faint); }

.btn--bare {
  padding: 0.6875rem 1.375rem;
  --btn-bg: transparent;
  --btn-fg: var(--chalk);
  border-color: var(--hair-strong);
}
.btn--bare:hover { background: rgba(244, 241, 232, 0.05); }

/* --- Navigation: a conventional product-site header -------------------------
   Full-width bar rather than a floating pill: transparent over the hero, then
   solid with a hairline once the visitor scrolls. The pattern a school director
   already knows from every other software site they have evaluated. */

.nav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: var(--z-nav);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur-mid) var(--ease-state),
    border-color var(--dur-mid) var(--ease-state),
    backdrop-filter var(--dur-mid) var(--ease-state);
}
.nav.is-solid {
  background: rgba(10, 8, 18, 0.82);
  border-bottom-color: var(--hair);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}

.nav__bar {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.5rem);
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding: 0.75rem var(--gutter);
  min-height: 68px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 650;
  font-size: 0.9375rem;
  letter-spacing: 0.03em;
  text-decoration: none;
  color: var(--chalk);
  white-space: nowrap;
  flex: none;
}
.wordmark img { width: 24px; height: 24px; flex: none; }
.wordmark b { font-weight: 650; letter-spacing: 0.12em; }
.wordmark span {
  font-weight: 400;
  letter-spacing: 0.12em;
  font-size: 0.8125rem;
  color: var(--chalk-mute);
}

.nav__main { display: none; }
@media (min-width: 1040px) { .nav__main { display: block; } }

.nav__links { position: relative; display: flex; align-items: center; gap: 0.25rem; }

.nav__top {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  border: 0;
  border-radius: 8px;
  background: none;
  font-size: 0.875rem;
  font-weight: 480;
  letter-spacing: -0.008em;
  color: var(--chalk-dim);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-state),
    background-color var(--dur-fast) var(--ease-state);
}
.nav__top:hover, .nav__top.is-on { color: var(--chalk); background: rgba(196, 178, 255, 0.08); }
.nav__top svg { width: 12px; height: 12px; opacity: 0.7; transition: transform var(--dur-fast) var(--ease-state); }
.nav__top[aria-expanded='true'] { color: var(--chalk); background: rgba(196, 178, 255, 0.1); }
.nav__top[aria-expanded='true'] svg { transform: rotate(180deg); }

.nav__has-menu { position: relative; }

.nav__menu {
  position: absolute;
  left: 0;
  top: calc(100% + 0.625rem);
  width: min(24rem, 86vw);
  padding: 0.5rem;
  border-radius: 16px;
  background: rgba(20, 16, 31, 0.97);
  border: 1px solid var(--hair-strong);
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(247, 245, 255, 0.06);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  animation: menuIn var(--dur-fast) var(--ease-enter);
}
@keyframes menuIn { from { opacity: 0; transform: translateY(-6px); } }

.nav__menu-label {
  padding: 0.5rem 0.75rem 0.625rem;
  font-family: var(--mono);
  font-size: var(--t-nano);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--chalk-faint);
}
.nav__menu a {
  display: block;
  padding: 0.625rem 0.75rem;
  border-radius: 10px;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-state);
}
.nav__menu a:hover { background: rgba(196, 178, 255, 0.08); }
.nav__menu b { display: block; font-size: 0.875rem; font-weight: 550; letter-spacing: -0.012em; color: var(--chalk); }
.nav__menu span { display: block; font-size: var(--t-micro); color: var(--chalk-mute); margin-top: 0.1875rem; line-height: 1.45; }

.nav__actions { display: flex; align-items: center; gap: clamp(0.5rem, 1.4vw, 1.25rem); margin-left: auto; flex: none; }

.nav__quiet {
  display: none;
  font-size: 0.875rem;
  font-weight: 480;
  color: var(--chalk-mute);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-state);
}
.nav__quiet:hover { color: var(--chalk); }
@media (min-width: 720px) { .nav__quiet { display: inline; } }

.nav__cta { padding: 0.5625rem 0.5625rem 0.5625rem 1.125rem; min-height: 40px; font-size: 0.875rem; }
.nav__cta .btn__ico { width: 26px; height: 26px; }
.nav__cta .btn__ico svg { width: 12px; height: 12px; }

.nav__prog { display: block; height: 2px; overflow: hidden; }
.nav__prog i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--violet), var(--cyan));
  transform: scaleX(0);
  transform-origin: left;
}

/* --- Live dot: perpetual, low amplitude ------------------------------------ */

.dot {
  width: 6px;
  height: 6px;
  border-radius: var(--r-chip);
  background: var(--signal);
  position: relative;
  flex: none;
}
.dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: var(--r-chip);
  border: 1px solid var(--signal);
  opacity: 0;
  animation: breathe 3.2s var(--ease-state) infinite;
}
.dot--brass { background: var(--brass); }
.dot--brass::after { border-color: var(--brass); }

@keyframes breathe {
  0% { opacity: 0.55; transform: scale(0.72); }
  70%, 100% { opacity: 0; transform: scale(1.35); }
}

/* --- Fictional-demonstration marker ---------------------------------------- */

.fict {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: var(--t-nano);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--chalk-mute);
}
.fict::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: var(--r-chip);
  background: var(--brass);
  flex: none;
}

/* --- Grain: fixed, pointer-events-none, never on a scrolling container ----- */

.grain {
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: 0.038;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- Reveal: nothing appears statically ------------------------------------ */

[data-reveal] {
  opacity: 0;
  transform: translateY(2.5rem);
  filter: blur(6px);
  transition: opacity var(--dur-slow) var(--ease-enter),
    transform var(--dur-slow) var(--ease-enter),
    filter var(--dur-slow) var(--ease-enter);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; filter: none; }

/* No script: the document must be complete and readable. */
.no-js [data-reveal] { opacity: 1; transform: none; filter: none; }

/* --- Reduced motion: direct state change, no meaning lost ------------------ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; filter: none; }
}