/* =============================================================================
   Digital Atrium — Base
   Reset, document chrome, type scale, and the “rooms” background system.
   ============================================================================= */

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

html {
  scroll-behavior: smooth;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--color-on-surface);
  background: var(--color-surface);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: 0;
  background: none;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
}

::selection {
  background: var(--color-primary-fixed);
  color: var(--color-on-primary-fixed);
}

.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  vertical-align: middle;
}

.material-symbols-outlined.is-filled {
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}

/* --- Type --- */

.eyebrow {
  display: inline-block;
  font-family: var(--font-label);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.display {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: var(--color-on-surface);
}

.display em,
.display .accent {
  font-style: italic;
  font-weight: 500;
  color: var(--color-primary);
}

h1.display {
  font-size: clamp(2.25rem, 5vw, 4.25rem);
}

h2.display {
  font-size: clamp(1.85rem, 4vw, 3rem);
}

h3 {
  font-family: var(--font-headline);
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1.3;
}

.lede {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--color-on-surface-variant);
  line-height: 1.7;
  max-width: 52rem;
}

.body-copy {
  font-size: 1rem;
  color: var(--color-on-surface-variant);
  line-height: 1.75;
}

.label {
  font-family: var(--font-label);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* --- Layout rooms: color shifts, not 1px walls --- */

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.skip-link:focus {
  top: 1rem;
}

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

.container--narrow {
  max-width: var(--measure-narrow);
}

.container--copy {
  max-width: var(--measure-copy);
}

@media (min-width: 1024px) {
  .container {
    padding-inline: var(--gutter-lg);
  }
}

.room {
  width: 100%;
  padding-block: var(--space-20);
}

.room--tight {
  padding-block: var(--space-12);
}

.room--surface {
  background: var(--color-surface);
}

.room--low {
  background: var(--color-surface-container-low);
}

.room--mid {
  background: var(--color-surface-container);
}

.room--high {
  background: var(--color-surface-container-high);
}

.room--nocturnal {
  background: var(--color-inverse-surface);
  color: var(--color-inverse-on-surface);
}

main {
  padding-top: var(--header-height);
  min-height: 100vh;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.grid-2,
.grid-3,
.grid-4 {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .grid-2 {
    grid-template-columns: 1fr 1fr;
  }

  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 767px) {
  .grid-4 {
    grid-template-columns: 1fr 1fr;
  }
}

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

@media (hover: hover) and (pointer: fine) {
  html.has-custom-cursor,
  html.has-custom-cursor * {
    cursor: none !important;
  }

  html.has-custom-cursor input,
  html.has-custom-cursor textarea,
  html.has-custom-cursor select,
  html.has-custom-cursor [contenteditable="true"] {
    cursor: text !important;
  }
}

.site-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  color: #6a6864;
  pointer-events: none;
  opacity: 0;
}

.hub-page .site-cursor {
  color: #c8c6c2;
}

.site-cursor.is-on {
  opacity: 1;
}

.site-cursor.is-typing {
  opacity: 0;
}

.site-cursor__plus,
.site-cursor__ring {
  position: absolute;
  top: 50%;
  left: 50%;
}

.site-cursor__plus {
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  opacity: 1;
  transform: scale(1);
  transition:
    transform 280ms cubic-bezier(0.2, 1.45, 0.32, 1) 150ms,
    opacity 160ms ease 130ms;
}

.site-cursor__plus::before,
.site-cursor__plus::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
}

.site-cursor__plus::before {
  width: 1px;
  height: 20px;
}

.site-cursor__plus::after {
  width: 20px;
  height: 1px;
}

.site-cursor__ring {
  width: 42px;
  height: 42px;
  margin: -21px 0 0 -21px;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.28);
  transition:
    transform 170ms ease,
    opacity 140ms ease;
}

.site-cursor.is-target .site-cursor__plus {
  opacity: 0;
  transform: scale(0.16);
  transition:
    transform 150ms cubic-bezier(0.55, 0, 1, 0.45),
    opacity 130ms ease;
}

.site-cursor.is-target .site-cursor__ring {
  opacity: 1;
  transform: scale(1);
  transition:
    transform 460ms cubic-bezier(0.16, 1.4, 0.32, 1) 140ms,
    opacity 200ms ease 140ms;
}

.site-cursor:not(.site-cursor--pan).is-panning {
  opacity: 0;
}

.site-cursor--pan .site-cursor__plus {
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
}

.site-cursor--pan .site-cursor__plus::before {
  height: 14px;
}

.site-cursor--pan .site-cursor__plus::after {
  width: 14px;
}

.site-cursor__chevron {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  opacity: 0;
  transform: scale(0.72);
  transition:
    opacity 140ms ease,
    transform 200ms cubic-bezier(0.16, 1.35, 0.32, 1);
}

.site-cursor__chevron--down {
  transform: scale(0.72) rotate(180deg);
}

.site-cursor__chevron--left {
  transform: scale(0.72) rotate(-90deg);
}

.site-cursor__chevron--right {
  transform: scale(0.72) rotate(90deg);
}

.site-cursor__chevron::before,
.site-cursor__chevron::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 50%;
  width: 1px;
  height: 11px;
  background: currentColor;
  transform-origin: center top;
}

.site-cursor__chevron::before {
  transform: translateX(-0.5px) rotate(34deg);
}

.site-cursor__chevron::after {
  transform: translateX(-0.5px) rotate(-34deg);
}

.site-cursor--pan.is-up .site-cursor__plus,
.site-cursor--pan.is-down .site-cursor__plus,
.site-cursor--pan.is-left .site-cursor__plus,
.site-cursor--pan.is-right .site-cursor__plus {
  opacity: 0;
  transform: scale(0.4);
}

.site-cursor--pan.is-up .site-cursor__chevron--up {
  opacity: 1;
  transform: scale(1);
}

.site-cursor--pan.is-down .site-cursor__chevron--down {
  opacity: 1;
  transform: scale(1) rotate(180deg);
}

.site-cursor--pan.is-left .site-cursor__chevron--left {
  opacity: 1;
  transform: scale(1) rotate(-90deg);
}

.site-cursor--pan.is-right .site-cursor__chevron--right {
  opacity: 1;
  transform: scale(1) rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
  .site-cursor__plus,
  .site-cursor__ring,
  .site-cursor__chevron {
    transition: none;
  }
}