/* ── Reset ── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ── Variables ── */
:root {
  --black: #111111;
  --dark: #1a1a1a;
  --teal: #1a7fa0;
  --teal-dim: rgba(26, 127, 160, 0.12);
  --offwhite: #ffffff;
  --offwhite-dark: #dfdfd8;
  --text: #2a2a2a;
  --text-mid: rgba(42, 42, 42, 0.5);
  --text-light: rgba(42, 42, 42, 0.3);
}

/* ── Base ── */
html, body {
  height: 100%;
}

body {
  font-family: 'Inter', sans-serif;
  color: var(--text);
  background: var(--offwhite);
  transition: opacity 0.32s ease;
}

/* ── AJAX page transitions ── */
body.is-leaving {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  body {
    transition: none;
  }
  .nav,
  .breath-wrap {
    animation: none;
    opacity: 1;
  }
  .nav {
    transform: translate(-50%, 0);
  }
  .breath-dot,
  .breath-dot::before,
  .breath-dot::after {
    animation: none;
  }
}

/* ── Background + Noise ── */
.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    to bottom,
    #ffffff 0%,
    #f2f2f6 100%
  );
}

.bg::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.20;
  filter: contrast(120%) brightness(100%);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px 200px;
  pointer-events: none;
}

/* ── Back Link ── */
.back {
  display: inline-flex;
  text-decoration: none;
}

.back-svg {
  width: 140px;
  height: auto;
  display: block;
}

.back-gmark,
.back-spin-group {
  transform-origin: 168.62px 168.62px;
}

.back-arrow {
  opacity: 0;
}

.back-wordmark {
  opacity: 0;
}

@media (max-width: 640px) {
  .back-svg {
    width: 105px;
  }
}

/* ── Screen-reader only ── */
.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;
}

/* ── Common Animation ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Nav Hover Illustrations ── */
.nav-bg {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100vw;
  height: 88vh;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  mask-image: radial-gradient(ellipse 90% 80% at 0% 100%, black 40%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 0% 100%, black 40%, transparent 78%);
}

.nav-bg__layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.nav-bg__layer.is-active {
  opacity: 1;
}

.nav-bg__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .nav-bg__layer {
    transition: none;
  }
}

/* ── Site Nav (all pages) ── */
.nav {
  position: fixed;
  bottom: 3rem;
  left: 50%;
  transform: translate(-50%, 14px);
  z-index: 2;
  display: flex;
  gap: 2.5rem;
  opacity: 0;
  animation: navFadeUp 1s 0.4s ease forwards;
}

@keyframes navFadeUp {
  from { opacity: 0; transform: translate(-50%, 14px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

.nav a {
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 300;
  letter-spacing: 0.12em;
  color: rgba(42, 42, 42, 0.25);
  text-decoration: none;
  text-transform: lowercase;
  transition: color 0.4s ease;
}

.nav a:hover {
  color: var(--teal);
}

/* ── Breathing Dot (all pages) ── */
.breath-wrap {
  position: fixed;
  bottom: 3.5rem;
  right: 4rem;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  opacity: 0;
  animation: breathAppear 1s 0.6s ease forwards;
}

.breath-track {
  position: relative;
  width: 7px;
  height: 45px;
}

.breath-dot {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal);
  left: 0;
  bottom: 0;
  z-index: 2;
  animation: drift 5s 1.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.breath-dot::before {
  content: '';
  position: absolute;
  width: 1.5px;
  left: 2.75px;
  top: 7px;
  height: 0;
  background: linear-gradient(to bottom, var(--teal), transparent);
  border-radius: 1px;
  animation: trailUp 5s 1.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.breath-dot::after {
  content: '';
  position: absolute;
  width: 1.5px;
  left: 2.75px;
  bottom: 7px;
  height: 0;
  background: linear-gradient(to top, var(--teal), transparent);
  border-radius: 1px;
  animation: trailDown 5s 1.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.breath-label {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 0.65rem;
  font-style: italic;
  color: var(--teal);
  opacity: 0.45;
  letter-spacing: 0.12em;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

@keyframes breathAppear {
  to { opacity: 1; }
}

@keyframes drift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-30px); }
}

@keyframes trailUp {
  0%   { height: 0;    opacity: 0; }
  5%   { height: 4px;  opacity: 0.5; }
  25%  { height: 20px; opacity: 0.4; }
  45%  { height: 12px; opacity: 0.1; }
  50%  { height: 0;    opacity: 0; }
  100% { height: 0;    opacity: 0; }
}

@keyframes trailDown {
  0%   { height: 0;    opacity: 0; }
  50%  { height: 0;    opacity: 0; }
  55%  { height: 4px;  opacity: 0.5; }
  75%  { height: 20px; opacity: 0.4; }
  95%  { height: 12px; opacity: 0.1; }
  100% { height: 0;    opacity: 0; }
}

/* ── Mobile ── */
@media (max-width: 640px) {
  .nav {
    gap: 1.5rem;
    bottom: 1.5rem;
    background: rgba(253, 253, 252, 0.88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 0.65rem 1.1rem;
    border-radius: 999px;
  }

  .breath-wrap {
    bottom: 5.5rem;
    right: 1.25rem;
  }
}