/* osbard.com — theater home */

:root {
  --page: #f5f2eb;
  --ink: #1c1917;
  --o-purple: #3a236b;
  --o-purple-deep: #231245;
  --o-purple-night: #160c2b;
  --o-primer: #cec1e6;
  --o-icon: #f5f5f5;
  --o-chrome: var(--o-purple);
  --o-chrome-deep: var(--o-purple-deep);
  --o-chrome-night: var(--o-purple-night);
  --o-hub-bg: var(--o-purple);
  --o-hub-ink: #f5f2eb;
  --o-hub-tag: #ede1c9;
  --scoopy: #ba9b22;
  --color: #2664da;
  --scrippy: #882c68;
  --arrt: #006631;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --head-h: clamp(3.25rem, 8vw, 4.5rem);
  /* Match CT-LAB / desk apps @ ~96px q400 */
  --q400-h: 6rem;
  --q400-tool: calc(var(--q400-h) * 60 / 96);
  --q400-glyph: calc(var(--q400-h) * 48 / 96);
  /* Match CT oval wells: 29×(2.4/6) of q400 height, 4px stroke */
  --q400-well-w: calc(var(--q400-h) * 29 / 96);
  --q400-well-h: calc(var(--q400-h) * 2.4 / 6);
  --phone-foot-h: 5.5rem;
  --glow: transparent;
  color-scheme: light;
}

/* Pirate Purple — house default (tokens in :root) */
body.theme-osbard-purple {
  --o-chrome: var(--o-purple);
  --o-chrome-deep: var(--o-purple-deep);
  --o-chrome-night: var(--o-purple-night);
  --o-hub-bg: var(--o-purple);
  --o-hub-ink: #f5f2eb;
  --o-hub-tag: #ede1c9;
}

/* Glow — black theater · white primer */
body.theme-huglo {
  --page: #0a0a0a;
  --ink: #f5f5f5;
  --o-chrome: #000000;
  --o-chrome-deep: #000000;
  --o-chrome-night: #000000;
  --o-hub-bg: #000000;
  --o-hub-ink: #f5f5f5;
  --o-hub-tag: #ffffff;
  --o-primer: #ffffff;
  --o-icon: #f5f5f5;
}

/* Bones — warm black · cream primer (YA lane) */
body.theme-bones {
  --page: #f5f2eb;
  --ink: #1c1917;
  --o-chrome: #38322e;
  --o-chrome-deep: #1c1917;
  --o-chrome-night: #1c1917;
  --o-hub-bg: #1c1917;
  --o-hub-ink: #f5f2eb;
  --o-hub-tag: #ede1c9;
  --o-primer: #ede1c9;
  --o-icon: #f5f2eb;
}

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

html {
  scroll-behavior: smooth;
}

body.o-theater {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--page);
  color: var(--ink);
  font-family: "Fredoka", system-ui, sans-serif;
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.35;
  opacity: 1;
  transition: opacity 0.42s var(--ease);
}

body.o-theater--leaving {
  opacity: 0;
  pointer-events: none;
}

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

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  left: -10000px !important;
  top: 0 !important;
  pointer-events: none;
}

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

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--o-primer);
  outline-offset: 3px;
}

/* —— Sticky header —— */
.o-head {
  position: sticky;
  top: 0;
  z-index: 30;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: var(--head-h);
  padding: 0.55rem clamp(0.75rem, 3vw, 1.5rem);
  background: color-mix(in srgb, var(--page) 92%, transparent);
  backdrop-filter: blur(8px);
}

.o-head__row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  width: 100%;
}

.o-head__wordmark {
  display: block;
  margin: 0;
  padding: 0.2rem 0.15rem;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.o-head__wordmark img {
  width: min(20rem, 68vw);
  height: auto;
  transform: scale(1);
  transition: transform 0.28s var(--ease);
  transform-origin: center center;
}

.o-head__wordmark:hover img,
.o-head__wordmark:focus-visible img {
  transform: scale(1.06);
}

/* 4-color hamburger — Scoopy · Color · Scrippy · Arrt */
.o-menu-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.14rem;
  width: 2.55rem;
  height: 2.55rem;
  margin: 0;
  padding: 0.35rem 0.4rem;
  border: 0;
  border-radius: 0.45rem;
  background: transparent;
  cursor: pointer;
}

.o-menu-toggle__bar {
  display: block;
  height: 0.28rem;
  border-radius: 999px;
}

.o-menu-toggle__bar--scoopy { background: var(--scoopy); }
.o-menu-toggle__bar--color { background: var(--color); }
.o-menu-toggle__bar--scrippy { background: var(--scrippy); }
.o-menu-toggle__bar--arrt { background: var(--arrt); }

/* Overlay drawer — does not push the stage */
.o-drawer {
  position: absolute;
  top: calc(100% - 0.15rem);
  left: 50%;
  z-index: 36;
  width: min(22rem, 92vw);
  transform: translateX(-50%) translateY(-0.35rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease);
}

.o-drawer.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.o-drawer__nav {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  padding: 0.65rem 0.75rem 0.8rem;
  border-radius: 0.85rem;
  background: var(--page);
  box-shadow: 0 12px 32px rgba(28, 25, 23, 0.16);
}

.o-drawer__wip {
  margin: 0 0 0.35rem;
  text-align: center;
  font-family: "Fredoka", system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: #ed661c;
  display: inline-block;
  width: 100%;
  transform-origin: center center;
}

.o-drawer__wip--flash {
  animation: o-drawer-wip-flash 0.45s ease-in-out;
}

.o-drawer__wip--bounce {
  animation: o-drawer-wip-bounce 0.5s ease-in-out;
}

.o-drawer__wip--shake {
  animation: o-drawer-wip-shake 0.45s ease-in-out;
}

.o-drawer__wip--pop {
  animation: o-drawer-wip-pop 0.5s ease-in-out;
}

.o-drawer__wip--wobble {
  animation: o-drawer-wip-wobble 0.55s ease-in-out;
}

@keyframes o-drawer-wip-flash {
  0%,
  100% {
    opacity: 1;
  }
  40%,
  60% {
    opacity: 0.15;
  }
}

@keyframes o-drawer-wip-bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  35% {
    transform: translateY(-0.35rem);
  }
  55% {
    transform: translateY(0.08rem);
  }
  75% {
    transform: translateY(-0.12rem);
  }
}

@keyframes o-drawer-wip-shake {
  0%,
  100% {
    transform: translateX(0) rotate(0deg);
  }
  20% {
    transform: translateX(-0.2rem) rotate(-4deg);
  }
  40% {
    transform: translateX(0.22rem) rotate(4deg);
  }
  60% {
    transform: translateX(-0.14rem) rotate(-2deg);
  }
  80% {
    transform: translateX(0.1rem) rotate(2deg);
  }
}

@keyframes o-drawer-wip-pop {
  0%,
  100% {
    transform: scale(1);
    letter-spacing: 0.02em;
  }
  40% {
    transform: scale(1.12);
    letter-spacing: 0.08em;
  }
  65% {
    transform: scale(0.96);
  }
}

@keyframes o-drawer-wip-wobble {
  0%,
  100% {
    transform: rotate(0deg) skewX(0deg);
  }
  25% {
    transform: rotate(-6deg) skewX(-4deg);
  }
  50% {
    transform: rotate(6deg) skewX(3deg);
  }
  75% {
    transform: rotate(-3deg) skewX(-2deg);
  }
}

.o-drawer__link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.45rem;
  border-radius: 0.5rem;
  font-weight: 600;
  font-size: 1.12rem;
  letter-spacing: 0.01em;
}

.o-drawer__link img {
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 50%;
}

.o-drawer__link[data-lane="read"] { color: var(--scoopy); }
.o-drawer__link[data-lane="color"] { color: var(--color); }
.o-drawer__link[data-lane="write"] { color: var(--scrippy); }
.o-drawer__link[data-lane="create"] { color: var(--arrt); }

.o-drawer__link:hover {
  background: color-mix(in srgb, currentColor 10%, transparent);
}

/* —— Stage / columns —— */
.o-stage {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
  padding: 0.75rem clamp(0.65rem, 2.5vw, 1.5rem);
  padding-bottom: calc(var(--q400-h) + 0.75rem);
  overflow: auto;
}

body.o-welcome-blocking .o-stage {
  pointer-events: none;
}

.o-cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.65rem, 2vw, 1.25rem);
  align-items: center;
  width: 100%;
  max-width: 88rem;
  margin: 0 auto;
}

.o-col {
  --lane: #3a236b;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  padding: 0.65rem 0.55rem 0.85rem;
  border: 0;
  border-radius: 1rem;
  background: transparent;
  color: var(--lane);
  font: inherit;
  cursor: pointer;
  transition: transform 0.35s var(--ease);
}

.o-col__label {
  margin: 0;
  font-family: "Fredoka", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(2.35rem, 2.4vw + 1rem, 2.85rem);
  letter-spacing: 0.02em;
  line-height: 1.1;
  transform-origin: center bottom;
}

/* Per-lane title hover — cute, quick, different each (~75% faster) */
.o-col[data-lane="read"].is-glow .o-col__label,
.o-col[data-lane="read"]:focus-visible .o-col__label {
  animation: o-label-read 0.4s ease-in-out;
}

.o-col[data-lane="color"].is-glow .o-col__label,
.o-col[data-lane="color"]:focus-visible .o-col__label {
  animation: o-label-color 0.43s ease-in-out;
}

.o-col[data-lane="write"].is-glow .o-col__label,
.o-col[data-lane="write"]:focus-visible .o-col__label {
  animation: o-label-write 0.46s steps(6, end);
}

.o-col[data-lane="create"].is-glow .o-col__label,
.o-col[data-lane="create"]:focus-visible .o-col__label {
  animation: o-label-create 0.49s ease-in-out;
}

@keyframes o-label-read {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-0.2rem) rotate(-3deg);
  }
  50% {
    transform: translateY(-0.35rem) rotate(2deg);
  }
  75% {
    transform: translateY(-0.12rem) rotate(-1.5deg);
  }
}

@keyframes o-label-color {
  0%,
  100% {
    filter: hue-rotate(0deg) saturate(1);
    transform: scale(1);
  }
  30% {
    filter: hue-rotate(40deg) saturate(1.35);
    transform: scale(1.06);
  }
  60% {
    filter: hue-rotate(-25deg) saturate(1.2);
    transform: scale(1.04);
  }
}

@keyframes o-label-write {
  0% {
    letter-spacing: 0.02em;
    opacity: 0.35;
  }
  40% {
    letter-spacing: 0.12em;
    opacity: 1;
  }
  100% {
    letter-spacing: 0.02em;
    opacity: 1;
  }
}

@keyframes o-label-create {
  0%,
  100% {
    transform: scale(1);
    text-shadow: none;
  }
  35% {
    transform: scale(1.1);
    text-shadow: 0 0 14px color-mix(in srgb, var(--lane) 70%, transparent);
  }
  55% {
    transform: scale(0.96);
  }
  75% {
    transform: scale(1.05);
    text-shadow: 0 0 10px color-mix(in srgb, var(--lane) 50%, transparent);
  }
}

.o-col__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  /* visible so cream rim / glow aren’t clipped */
  overflow: visible;
  background: #f5f5f5;
  /* Cream rim like the Osbard q400 paw (lane hairline so it reads on #f5f2eb) */
  box-shadow:
    0 0 0 3px #f5f5f5,
    0 0 0 5px color-mix(in srgb, var(--lane) 42%, #d3c8c0);
  transition:
    box-shadow 0.28s var(--ease),
    transform 0.28s var(--ease);
}

.o-col__art {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.o-col__hint {
  font-size: 1.42rem;
  font-weight: 500;
  opacity: 0.78;
  color: var(--ink);
}

/* Grow + glow on hover — same beat as the Osbard paw */
.o-col:hover .o-col__frame,
.o-col.is-glow .o-col__frame,
.o-col:focus-visible .o-col__frame {
  transform: scale(1.06);
  box-shadow:
    0 0 0 3px rgba(245, 245, 245, 0.95),
    0 0 18px color-mix(in srgb, var(--lane) 85%, transparent),
    0 0 36px color-mix(in srgb, var(--lane) 55%, transparent);
}

/* —— Purple q400 —— */
.o-q400 {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  height: var(--q400-h);
  background: linear-gradient(180deg, var(--o-chrome) 0%, var(--o-chrome-deep) 100%);
  color: var(--o-icon);
  box-shadow: 0 -1px 0 rgba(245, 245, 245, 0.12);
}

.o-q400__glow {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 3.5rem;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    180deg,
    transparent 0%,
    color-mix(in srgb, var(--glow) 0%, transparent) 20%,
    color-mix(in srgb, var(--glow) 55%, transparent) 100%
  );
  transition: opacity 0.4s var(--ease);
}

.o-q400.is-glow .o-q400__glow {
  opacity: 1;
}

.o-q400__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--q400-h) minmax(0, 1fr);
  align-items: center;
  column-gap: 0.65rem;
  height: 100%;
  padding: 0 0.85rem;
  max-width: 90rem;
  margin: 0 auto;
}

.o-q400__side {
  display: flex;
  align-items: center;
  min-width: 0;
  height: 100%;
  overflow: hidden;
}

.o-q400__side--left {
  justify-content: flex-end;
}

.o-q400__side--right {
  justify-content: flex-start;
}

.o-q400__belt {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 0.55rem;
  min-width: 0;
  height: 100%;
  opacity: 0;
  transition: opacity 0.28s var(--ease);
}

.o-q400__side--right .o-q400__belt {
  justify-content: flex-start;
}

.o-q400__belt.is-active {
  opacity: 1;
}

.o-q400__belt[hidden] {
  display: none !important;
}

.o-q400__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--q400-tool);
  height: var(--q400-tool);
  font-size: var(--q400-glyph);
  color: var(--o-icon);
  line-height: 1;
  filter: drop-shadow(0 1px 0 rgba(22, 12, 43, 0.35));
}

.o-q400__icon--gold { color: #cab33f; }
.o-q400__icon--green { color: #38b000; }
.o-q400__icon--yellow { color: #ffc107; }
.o-q400__icon--blue { color: #0087f9; }
.o-q400__icon--teal { color: #00c2a8; }
.o-q400__icon--pink { color: #f07a9a; }
.o-q400__icon--lav { color: #c4b5fd; }
.o-q400__icon--sky { color: #7dd3fc; }
.o-q400__icon--red { color: #ef233c; }
.o-q400__icon--orange { color: #ff8a00; }
.o-q400__icon--slate { color: #9eb1bc; }
.o-q400__icon--soft { color: var(--o-primer); }

.o-q400__well {
  position: relative;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: var(--q400-well-w);
  height: var(--q400-well-h);
  border-radius: 50%;
  border: 4px solid #f5f5f5;
  background: var(--w, #f5f5f5);
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.32),
    inset 0 0 0 1px rgba(0, 0, 0, 0.18);
}

.o-q400__slot {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.15rem;
  min-width: 6.5rem;
  padding: 0 0.35rem;
  color: #f5f5f5;
  text-align: left;
}

.o-q400__slot-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.95;
}

.o-q400__slot-line {
  font-size: 0.78rem;
  font-weight: 500;
  opacity: 0.75;
  white-space: nowrap;
}

.o-q400__cards {
  display: flex;
  gap: 0.35rem;
}

.o-q400__cards span {
  width: 2.4rem;
  height: 1.55rem;
  border: 1px solid rgba(245, 245, 245, 0.55);
  border-radius: 0.3rem;
}

.o-q400__page {
  width: 2.1rem;
  height: 2.75rem;
  border-radius: 0.2rem;
  background: #f5f5f5;
  box-shadow: 0 0 0 1px rgba(245, 245, 245, 0.35);
}

/* Decorative mock tools/wells — no per-icon actions */
.o-q400__belt,
.o-q400__icon,
.o-q400__well,
.o-q400__slot,
.o-q400__page {
  pointer-events: none;
  user-select: none;
}

/* Paw fills full q400 height like desk apps */
.o-q400__paw {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: var(--q400-h);
  height: var(--q400-h);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--o-primer);
  cursor: pointer;
  box-shadow: 0 0 0 2px rgba(245, 245, 245, 0.4);
  transition: box-shadow 0.28s var(--ease), transform 0.28s var(--ease);
}

.o-q400__paw:hover,
.o-q400__paw:focus-visible {
  transform: scale(1.04);
  box-shadow:
    0 0 0 3px rgba(245, 245, 245, 0.75),
    0 0 18px rgba(169, 140, 255, 0.85),
    0 0 36px rgba(206, 193, 230, 0.65);
}

.o-q400__paw img {
  width: 92%;
  height: 92%;
  object-fit: contain;
}

.o-phone-foot__paw:hover,
.o-phone-foot__paw:focus-visible {
  box-shadow:
    0 0 0 3px rgba(206, 193, 230, 0.9),
    0 0 16px rgba(169, 140, 255, 0.7);
}

/* Phone foot — paw + © only */
.o-phone-foot {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  min-height: var(--phone-foot-h);
  padding: 0.45rem 0.75rem 0.65rem;
  background: var(--page);
}

.o-phone-foot__paw {
  display: grid;
  place-items: center;
  width: 3.6rem;
  height: 3.6rem;
  margin: 0;
  padding: 0.15rem;
  border: 0;
  border-radius: 50%;
  background: var(--o-primer);
  cursor: pointer;
}

.o-phone-foot__paw img {
  width: 88%;
  height: 88%;
  object-fit: contain;
}

.o-phone-foot__copy {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--ink) 70%, transparent);
}

/* —— Continue gate —— */
.o-gate {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 1.25rem;
}

.o-gate[hidden] {
  display: none;
}

.o-gate__backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--o-purple-night) 55%, transparent);
  opacity: 0;
  transition: opacity 0.28s var(--ease);
}

.o-gate.is-open .o-gate__backdrop {
  opacity: 1;
}

.o-gate__panel {
  position: relative;
  width: min(22rem, 92vw);
  padding: 1.35rem 1.4rem 1.25rem;
  border-radius: 1rem;
  background: var(--o-hub-bg, var(--o-purple));
  color: var(--o-hub-ink, #f5f2eb);
  box-shadow:
    0 0 0 2px rgba(245, 245, 245, 0.35),
    0 18px 40px rgba(22, 12, 43, 0.45);
  text-align: center;
  transform: translateY(8px) scale(0.98);
  opacity: 0;
  transition: transform 0.32s var(--ease), opacity 0.32s var(--ease);
}

.o-gate.is-open .o-gate__panel {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.o-gate__title {
  margin: 0 0 1.1rem;
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.35;
}

.o-gate__actions {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.o-gate__btn {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.7rem 1rem;
  border: 0;
  border-radius: 0.65rem;
  font: inherit;
  font-weight: 600;
  font-size: 1.15rem;
  cursor: pointer;
}

.o-gate__btn--app {
  --app: #2664da;
  background: var(--app);
  color: #f5f5f5;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--app) 40%, #fff);
}

.o-gate__btn--home {
  background: color-mix(in srgb, #f5f2eb 16%, transparent);
  color: #f5f2eb;
  border: 1px solid rgba(245, 242, 235, 0.35);
}

.o-gate__btn--home:hover {
  background: color-mix(in srgb, #f5f2eb 24%, transparent);
}

/* —— HUB —— */
.hub {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 1rem;
}

.hub[hidden] {
  display: none;
}

.hub__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(22, 12, 43, 0.45);
}

.hub__panel {
  position: relative;
  width: min(52rem, 96vw);
  max-height: min(90vh, 44rem);
  overflow: hidden;
  border-radius: 1rem;
  background: var(--o-hub-bg, var(--o-purple));
  color: var(--o-hub-ink, #f5f2eb);
  border: 2px solid rgba(245, 245, 245, 0.88);
  box-shadow: 0 20px 48px rgba(22, 12, 43, 0.4);
}

.hub__inner {
  display: flex;
  flex-direction: column;
  height: min(90vh, 44rem);
  max-height: inherit;
}

.hub__head {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 0.95rem;
  border-bottom: 1px solid rgba(245, 245, 245, 0.18);
}

.hub__home {
  display: block;
  width: clamp(4.5rem, 14vw, 6.5rem);
}

.hub__home-img {
  width: 100%;
  height: auto;
  border-radius: 0.35rem;
}

.hub__lockup {
  min-width: 0;
  text-align: center;
  justify-self: center;
}

.hub__title {
  margin: 0;
  font-weight: 600;
  font-size: clamp(1.15rem, 2.5vw, 1.45rem);
  line-height: 1.15;
  text-align: center;
}

.hub__tag {
  margin: 0.25rem 0 0;
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--o-hub-tag, #ede1c9);
  text-align: center;
}

.hub__close {
  width: 2.4rem;
  height: 2.4rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #f5f2eb;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
}

.hub__body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.hub-doc {
  display: grid;
  grid-template-columns: minmax(9rem, 12rem) minmax(0, 1fr);
  gap: 0;
  height: 100%;
  min-height: 0;
}

.hub-doc__nav {
  padding: 0.85rem 0.75rem 1rem 1rem;
  border-right: 1px solid rgba(245, 245, 245, 0.16);
  overflow: auto;
}

.hub-doc__nav-title {
  margin: 0 0 0.55rem;
  font-size: 1.05rem;
  font-weight: 600;
}

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

.hub-doc__toc li + li {
  margin-top: 0.28rem;
}

.hub-doc__toc a {
  color: #cec1e6;
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none;
}

.hub-doc__toc a:hover {
  color: #f5f2eb;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.hub-doc__external {
  margin: 1rem 0 0;
  font-size: 0.82rem;
  line-height: 1.35;
  opacity: 0.88;
}

.hub-doc__external a {
  color: #ede1c9;
}

.hub-doc__main {
  padding: 0.85rem 1.1rem 1.25rem;
  overflow: auto;
  min-height: 0;
}

.hub-doc__heading {
  margin: 0 0 0.4rem;
  font-size: 1.2rem;
  font-weight: 600;
}

.hub-doc__lede {
  margin: 0 0 1rem;
  font-size: 0.98rem;
  line-height: 1.4;
  opacity: 0.92;
}

.hub-doc__section {
  margin: 0 0 1rem;
  padding-top: 0.15rem;
}

.hub-doc__section h3 {
  margin: 0 0 0.35rem;
  font-size: 1.02rem;
  font-weight: 600;
  color: #ede1c9;
}

.hub-doc__section p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.4;
  opacity: 0.92;
}

.hub-doc__section a {
  color: #ede1c9;
}

/* Info overlay on top of Privacy body */
.hub-info {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--o-hub-bg, var(--o-purple));
}

.hub-info[hidden] {
  display: none;
}

.hub-info__panel {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.hub-info__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid rgba(245, 245, 245, 0.16);
}

.hub-info__title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
}

.hub-info__close {
  width: 2.2rem;
  height: 2.2rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #f5f2eb;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

.hub-info__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.hub-info__body .hub-doc {
  height: 100%;
}

.hub__foot {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.65rem 1rem;
  padding: 0.7rem 1rem 0.85rem;
  border-top: 1px solid rgba(245, 245, 245, 0.18);
}

.hub__copy {
  margin: 0;
  font-size: 0.92rem;
  opacity: 0.88;
  justify-self: start;
}

.hub__utils {
  display: flex;
  justify-content: center;
  gap: 0.15rem;
}

.hub__util {
  display: grid;
  place-items: center;
  width: 3.05rem;
  height: 3.05rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font-size: 2.05rem;
  cursor: pointer;
}

.hub__util:hover,
.hub__util[aria-pressed="true"] {
  color: #fff;
  filter: drop-shadow(0 0 6px rgba(245, 245, 245, 0.55));
}

.hub__social {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem;
  justify-self: end;
}

.hub__social a {
  display: inline-flex;
  width: 2.05rem;
  height: 2.05rem;
  opacity: 0.88;
}

.hub__social a:hover {
  opacity: 1;
}

.hub__social img {
  width: 100%;
  height: 100%;
  filter: brightness(0) invert(1);
}

.hub__social a:hover img,
.hub__social a:focus-visible img {
  filter: brightness(0) invert(1) drop-shadow(0 0 6px rgba(245, 245, 245, 0.55));
}

@media (max-width: 640px) {
  .hub-doc {
    grid-template-columns: 1fr;
  }

  .hub-doc__nav {
    border-right: 0;
    border-bottom: 1px solid rgba(245, 245, 245, 0.16);
    max-height: 8.5rem;
  }

  .hub__foot {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .hub__copy,
  .hub__social {
    justify-self: center;
  }
}

/* —— Welcome celebration —— */
.o-welcome-celebration {
  position: fixed;
  inset: 0;
  z-index: 48;
  pointer-events: none;
  overflow: hidden;
  opacity: 1;
  transition: opacity 1.65s ease-out;
}

.o-welcome-celebration--out {
  opacity: 0;
}

.o-theater-popcorn {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.o-theater-popcorn__piece {
  position: absolute;
  font-size: clamp(2.125rem, 5.5vw, 3.375rem);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.o-theater-popcorn__piece--toss {
  bottom: var(--o-pop-origin, 9%);
  left: var(--o-pop-left, 50%);
  animation: o-theater-popcorn-toss var(--o-pop-dur, 1.8s) cubic-bezier(0.33, 0.12, 0.55, 1)
    var(--o-pop-delay, 0s) forwards;
}

.o-theater-popcorn__piece--fall {
  top: var(--o-pop-top, -6%);
  left: var(--o-pop-left, 50%);
  animation: o-theater-popcorn-fall var(--o-pop-dur, 1.5s) ease-in var(--o-pop-delay, 0s) forwards;
}

.o-theater-popcorn__piece--spill {
  bottom: var(--o-pop-origin, 7%);
  left: var(--o-pop-left, 50%);
  animation: o-theater-popcorn-spill var(--o-pop-dur, 1.25s) ease-out var(--o-pop-delay, 0s) forwards;
}

@keyframes o-theater-popcorn-toss {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.55) rotate(0deg);
  }
  10% {
    opacity: 1;
  }
  42% {
    transform: translate3d(var(--o-pop-drift-mid, 0px), calc(-1 * var(--o-pop-rise, 32vh)), 0)
      scale(1.05) rotate(var(--o-pop-rot-mid, 95deg));
  }
  72% {
    opacity: 0.95;
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--o-pop-drift, 0px), var(--o-pop-drop, 14vh), 0) scale(0.8)
      rotate(var(--o-pop-rot-end, 240deg));
  }
}

@keyframes o-theater-popcorn-fall {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.65) rotate(0deg);
  }
  12% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--o-pop-drift, 0px), 105vh, 0) scale(1) rotate(200deg);
  }
}

@keyframes o-theater-popcorn-spill {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.5) rotate(-20deg);
  }
  8% {
    opacity: 1;
  }
  35% {
    transform: translate3d(var(--o-pop-drift-mid, 0px), calc(-1 * var(--o-pop-rise, 12vh)), 0)
      scale(0.95) rotate(40deg);
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--o-pop-drift, 0px), var(--o-pop-drop, 8vh), 0) scale(0.75)
      rotate(160deg);
  }
}

.o-theater-confetti {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.o-theater-confetti__piece {
  position: absolute;
  top: var(--o-conf-top, -8%);
  left: var(--o-conf-left, 50%);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  animation: o-theater-confetti-fall var(--o-conf-dur, 2s) ease-in var(--o-conf-delay, 0s) forwards;
}

.o-theater-confetti__piece--spark {
  font-size: clamp(1.875rem, 5vw, 3.125rem);
  text-shadow: 0 0 6px rgba(255, 240, 180, 0.55);
}

.o-theater-confetti__piece--rect {
  display: block;
  width: 1.05rem;
  height: 1.8rem;
  border-radius: 1px;
  background: hsl(var(--o-conf-hue, 45) 90% 58%);
  box-shadow: 0 0 4px hsl(var(--o-conf-hue, 45) 95% 72% / 0.65);
}

@keyframes o-theater-confetti-fall {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(0.6);
  }
  8% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--o-conf-drift, 0px), 108vh, 0) rotate(var(--o-conf-spin, 360deg))
      scale(1);
  }
}

/* —— Intro welcome —— */
.o-welcome {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.72s var(--ease);
  background: transparent;
}

.o-welcome--visible {
  opacity: 1;
}

.o-welcome--out {
  opacity: 0;
  transition-duration: 0.9s;
}

.o-welcome--fast-out {
  transition-duration: 0.32s;
}

.o-welcome[hidden] {
  display: none;
}

.o-welcome__marquee {
  position: relative;
  padding: 0.72rem;
  border-radius: 1.15rem;
  background: #160c2b;
  box-shadow:
    0 12px 32px rgba(22, 12, 43, 0.55),
    inset 0 0 0 2px #ba9b22;
  transform: translateY(6px);
  transition: transform 0.72s var(--ease);
}

.o-welcome--visible .o-welcome__marquee {
  transform: translateY(0);
}

.o-welcome--out .o-welcome__marquee {
  transform: translateY(-4px);
}

.o-welcome__card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: max-content;
  min-width: min(20rem, 90vw);
  max-width: 92vw;
  padding: 1.2rem 1.65rem 1.35rem;
  border-radius: 0.7rem;
  text-align: center;
  background: #3a236b;
  color: #f5f2eb;
  box-shadow: inset 0 0 0 1px rgba(206, 193, 230, 0.35);
}

.o-welcome__caustic {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}

.o-welcome__caustic-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(18px);
  opacity: 0.55;
  will-change: transform;
  background: radial-gradient(
    circle at 40% 40%,
    rgba(237, 225, 201, 0.9) 0%,
    rgba(206, 193, 230, 0.45) 42%,
    transparent 70%
  );
}

.o-welcome__caustic-blob:nth-child(1) {
  width: 70%;
  height: 55%;
  top: -15%;
  left: -20%;
  animation: o-caustic-1 6.05s ease-in-out infinite;
}

.o-welcome__caustic-blob:nth-child(2) {
  width: 60%;
  height: 65%;
  top: 25%;
  right: -25%;
  left: auto;
  opacity: 0.45;
  animation: o-caustic-2 7.5s ease-in-out infinite;
}

.o-welcome__caustic-blob:nth-child(3) {
  width: 55%;
  height: 50%;
  bottom: -20%;
  left: 15%;
  top: auto;
  opacity: 0.4;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(186, 155, 34, 0.55) 0%,
    rgba(58, 35, 107, 0.4) 45%,
    transparent 70%
  );
  animation: o-caustic-3 8.15s ease-in-out infinite;
}

.o-welcome__caustic-blob:nth-child(4) {
  width: 45%;
  height: 40%;
  top: 35%;
  left: 30%;
  opacity: 0.35;
  animation: o-caustic-4 5.05s ease-in-out infinite;
}

@keyframes o-caustic-1 {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(28%, 22%) scale(1.15);
  }
}

@keyframes o-caustic-2 {
  0%,
  100% {
    transform: translate(0, 0) scale(1.05);
  }
  50% {
    transform: translate(-30%, -18%) scale(0.9);
  }
}

@keyframes o-caustic-3 {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(18%, -25%) scale(1.2);
  }
}

@keyframes o-caustic-4 {
  0%,
  100% {
    transform: translate(0, 0) scale(0.95);
  }
  33% {
    transform: translate(-20%, 15%) scale(1.1);
  }
  66% {
    transform: translate(15%, -12%) scale(1.05);
  }
}

.o-welcome__house,
.o-welcome__name,
.o-welcome__tagline-typed,
.o-welcome__taglines {
  position: relative;
  z-index: 1;
}

.o-welcome__house {
  margin: 0;
  font-weight: 600;
  font-size: 2rem;
  line-height: 1.15;
  letter-spacing: 0.02em;
  color: #f5f2eb;
  opacity: 0;
}

.o-welcome__name {
  margin: 0.12rem 0 0;
  font-weight: 700;
  font-size: 3rem;
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: #f5f2eb;
  opacity: 0;
}

.o-welcome__name.is-flash {
  animation: o-welcome-flash 0.28s ease-in-out 4;
}

.o-welcome__tagline-line {
  display: inline;
}

.o-welcome__tagline-line.is-flash {
  animation: o-welcome-aboard-flash 0.28s ease-in-out infinite;
}

@keyframes o-welcome-flash {
  0%,
  100% {
    opacity: 1;
    color: #f5f2eb;
    text-shadow: none;
  }
  40% {
    color: #ede1c9;
    text-shadow: 0 0 22px #ba9b22, 0 0 8px #f5f2eb;
  }
  50% {
    opacity: 0.12;
  }
}

@keyframes o-welcome-aboard-flash {
  0%,
  100% {
    opacity: 1;
    color: #ba9b22;
    text-shadow: none;
  }
  40% {
    color: #ede1c9;
    text-shadow: 0 0 20px #ba9b22, 0 0 8px #f5f2eb;
  }
  50% {
    opacity: 0.12;
  }
}

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

.o-welcome__tagline-typed {
  display: block;
  min-height: 2.7em;
  margin: 0.7rem 0 0;
  font-weight: 500;
  font-size: clamp(1rem, 2.8vw, 1.2rem);
  line-height: 1.35;
  color: #ba9b22;
  opacity: 0;
}

.o-welcome__char {
  display: inline;
}

.o-welcome__house.is-on,
.o-welcome__name.is-on,
.o-welcome__tagline-typed.is-on {
  animation: o-welcome-line-in 0.45s ease-out forwards;
}

.o-welcome__name.is-on.is-flash {
  animation:
    o-welcome-line-in 0.2s ease-out forwards,
    o-welcome-flash 0.28s ease-in-out 4 0.2s;
}

@keyframes o-welcome-line-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(1.04);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Phone: 1×4, no toolbelt q400 */
@media (max-width: 720px) {
  .o-cols {
    grid-template-columns: 1fr;
    gap: 1.1rem;
    max-width: 22rem;
  }

  .o-col {
    min-height: auto;
  }

  .o-col__frame {
    max-width: 18rem;
  }

  .o-col__label {
    font-size: 2.35rem;
  }

  .o-col__hint {
    font-size: 1.42rem;
  }

  .o-stage {
    align-items: flex-start;
    padding-top: 1rem;
    padding-bottom: calc(var(--phone-foot-h) + 1rem);
  }

  .o-q400 {
    display: none;
  }

  .o-phone-foot {
    display: flex;
  }

  .o-drawer {
    width: min(20rem, 94vw);
  }
}

@media (max-width: 420px) {
  .o-welcome__house {
    font-size: 1.65rem;
  }

  .o-welcome__name {
    font-size: 2.45rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .o-col,
  .o-col__frame,
  .o-col__art,
  .o-q400__glow,
  .o-q400__belt,
  .o-gate__panel,
  .o-gate__backdrop,
  .o-drawer,
  body.o-theater {
    transition: none;
  }

  .o-welcome,
  .o-welcome__marquee {
    transition: none;
    transform: none;
  }

  .o-welcome__caustic-blob {
    animation: none;
    opacity: 0.4;
  }

  .o-welcome__house.is-on,
  .o-welcome__name.is-on,
  .o-welcome__tagline-typed.is-on,
  .o-welcome__name.is-on.is-flash,
  .o-welcome__tagline-line.is-flash {
    animation: none;
    opacity: 1;
  }

  .o-welcome-celebration {
    display: none;
  }

  .o-col:hover .o-col__frame,
  .o-col.is-glow .o-col__frame,
  .o-col:focus-visible .o-col__frame {
    transform: none;
  }

  .o-drawer__wip--flash,
  .o-drawer__wip--bounce,
  .o-drawer__wip--shake,
  .o-drawer__wip--pop,
  .o-drawer__wip--wobble {
    animation: none !important;
  }

  .o-col.is-glow .o-col__label,
  .o-col:focus-visible .o-col__label {
    animation: none;
  }

  .o-q400__paw:hover,
  .o-q400__paw:focus-visible {
    transform: none;
  }

  .o-head__wordmark:hover img,
  .o-head__wordmark:focus-visible img {
    transform: none;
  }
}

/* —— Globe Translator (Hub footer flags) —— */
.globe-translator-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  overflow: hidden;
  pointer-events: none;
}
.globe-translator-overlay[data-open='true'] { display: block; }
.globe-translator-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(8, 4, 14, 0.78);
  pointer-events: none;
}
.globe-translator-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: auto;
}
.globe-translator-overlay[data-retracting='true'] .globe-translator-flag {
  pointer-events: none !important;
}
.globe-translator-flag {
  position: absolute;
  border: 2px solid transparent;
  border-radius: 50%;
  padding: 0.15rem;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: auto;
  z-index: 1;
  background: transparent;
  cursor: pointer;
}
.globe-translator-flag:hover,
.globe-translator-flag:focus-visible {
  transform: translateY(-4px) scale(1.35);
  border-color: rgba(255, 210, 140, 0.9);
  outline: none;
  z-index: 10;
}
.globe-translator-flag.is-active { border-color: #ffc878; }
.globe-translator-flag__img {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.globe-translator-flag__emoji {
  font-size: 1.6rem;
  line-height: 1;
}
.globe-translator-toast {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  z-index: 81;
  background: rgba(30, 20, 10, 0.92);
  color: #ffe2b6;
  padding: 0.6rem 1rem;
  border-radius: 0.5rem;
  opacity: 0;
  pointer-events: none;
}
.globe-translator-toast.is-visible { opacity: 1; }
.goog-te-banner-frame,
.skiptranslate > iframe.skiptranslate { display: none !important; }
body { top: 0 !important; }
.goog-te-gadget { font-size: 0 !important; }