/* Concept 04: the original OWEN entrances within a full-canvas composition.
   Deliberately scoped so console surfaces and the shared controls stay intact. */
.landing.landing--canvas {
  --canvas-background: #f1f6f6;
  --canvas-orbit: #cce9e3;
  --canvas-rule: #adc7c6;
  --canvas-orbit-line: #8abdb8;
  padding: 0;
  min-height: 100svh;
  display: block;
  background: var(--canvas-background);
  color: var(--text-heading);
  overflow: visible;
}

.landing--canvas > .landing-canvas {
  position: relative;
  isolation: isolate;
  --landing-wordmark-size: clamp(10rem, calc(3.25rem + 15.25vw), 22rem);
  --landing-art-size: clamp(22rem, calc(100svh - var(--landing-wordmark-size) * 1.05 - 9.25rem), 64rem);
  width: 100%;
  max-width: 180rem;
  margin-inline: auto;
  min-height: 100svh;
  padding: 28px clamp(32px, 4.45vw, 86px) 44px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto minmax(min-content, 1fr);
  column-gap: clamp(1.5rem, 4vw, 6rem);
  row-gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
  justify-items: stretch;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  text-align: left;
  overflow: visible;
}

.landing--canvas .landing-canvas__orbit,
.landing--canvas .landing-canvas__orbit-line {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  width: min(76%, calc(var(--landing-art-size) * 1.55));
  aspect-ratio: 1;
  left: calc(50% + min(25vw, 45rem));
  right: auto;
  top: calc(50% + var(--landing-wordmark-size) * .525 + 1.5rem);
  transform: translate(-50%, -50%);
  background: var(--canvas-orbit);
}

.landing--canvas .landing-canvas__orbit-line {
  width: min(84%, calc(var(--landing-art-size) * 1.72));
  background: transparent;
  border: 1px solid var(--canvas-orbit-line);
}

.landing--canvas .landing-canvas__header {
  position: relative;
  z-index: 2;
  min-width: 0;
  grid-column: 1 / -1;
  grid-row: 1;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--canvas-rule);
}

.landing--canvas .landing-wordmark {
  width: min(100%, calc(var(--landing-wordmark-size) * 3.581));
  margin: 0 0 0 -0.025em;
  font-family: var(--font-display);
  font-size: var(--landing-wordmark-size);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: .085em;
  transform: none;
  color: var(--text-heading);
}

/* A bounded wordmark preserves Cinzel without Safari’s viewport-font zoom overflow. */
.landing-wordmark__lettering {
  display: block;
  width: 100%;
  height: auto;
  fill: currentColor;
}
.landing-wordmark__lettering text {
  font-family: var(--font-display);
  font-size: 100px;
  font-weight: 500;
  letter-spacing: 8.5px;
}

.landing--canvas .landing-content {
  position: relative;
  z-index: 3;
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  width: 100%;
  max-width: 78rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-self: start;
  gap: clamp(1.5rem, 1.8vw, 2.75rem);
  margin: 0;
  text-align: left;
}

.landing--canvas .landing-tagline {
  margin: 0;
  font-size: clamp(1.5rem, calc(.5rem + 3vw), 5.25rem);
  line-height: 1.16;
  font-weight: 400;
  letter-spacing: -.035em;
  word-spacing: .04em;
  color: var(--text-heading);
  transform: none;
}

.landing--canvas .landing-tagline > span {
  display: block;
}

.landing--canvas .landing-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  justify-content: start;
  gap: clamp(.75rem, 1.5vw, 2.25rem);
  width: 100%;
  margin: 0;
}

/* Keep the existing symbol, mint/pearl fills and animated title chip rules.
   Only their layout footprint changes to fit this composition. */
.landing--canvas .landing-actions .landing-button {
  width: 100%;
  min-width: 0;
  max-width: none;
  min-height: 10.5rem;
  height: auto;
  aspect-ratio: 1.15;
  padding: 10px 12px;
  --landing-cta-title-size: clamp(1rem, calc(.375rem + 1.35vw), 2.25rem);
  --landing-icon-frame-width: clamp(4.5rem, 8vw, 13rem);
  --landing-icon-frame-height: clamp(3.5rem, 6vw, 8rem);
  --landing-icon-size: var(--landing-icon-frame-width);
  --landing-icon-shift-y: 0px;
}

.landing--canvas .landing-actions .landing-button > .landing-button__card {
  min-width: 0;
  max-width: none;
  min-height: 0;
  padding: 1rem .5rem 1.5rem;
}

.landing--canvas .landing-actions .landing-button .landing-text-group {
  max-width: 90%;
}

.landing--canvas .landing-mascot {
  position: relative;
  z-index: 2;
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  justify-self: center;
  min-width: 0;
  right: auto;
  bottom: auto;
  width: min(100%, var(--landing-art-size));
  aspect-ratio: 1;
  margin: 0;
  overflow: visible;
}

.landing--canvas .landing-mascot .hover-swap-robot {
  --robot-static-x: 0px;
  --robot-static-y: 0px;
  --robot-static-scale: 1;
  --robot-anim-x: 0px;
  --robot-anim-y: 0px;
  --robot-anim-scale: 1;
  --robot-anim-mask: none;
}

.landing--canvas .hover-swap-robot__layer--animated {
  mask-image: none;
  -webkit-mask-image: none;
}

/* The retained account theme also gets a legible full-canvas treatment. */
:root[data-theme="dark"] .landing--canvas,
body.theme-dark .landing--canvas {
  --canvas-background: #102333;
  --canvas-orbit: #21474c;
  --canvas-rule: #467c80;
  --canvas-orbit-line: #467c80;
}

/* Only the oversized orbit decorations are clipped. All controls participate
   in normal flow, so short windows can scroll without losing content. */
.landing--canvas .landing-canvas__backdrop {
  position: absolute;
  inset: 0;
  /* Extend decoration beyond the capped content on ultrawide viewports. */
  inset-inline: min(0px, calc((180rem - 100vw) / 2));
  z-index: -1;
  overflow: clip;
  pointer-events: none;
}
/* Both vectors use one normalized frame; optical balance lives in the paths. */
.landing--canvas .landing-actions .landing-button .landing-icon-wrapper {
  transform: none;
}
.landing--canvas .landing-actions .landing-button.student {
  --landing-symbol: url('/assets/student-workspace-symbol.svg');
}
.landing--canvas .landing-actions .landing-button.faculty {
  --landing-symbol: url('/assets/faculty-pipeline-symbol.svg');
}
@media (max-width: 800px) {
  .landing--canvas > .landing-canvas {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    min-height: 100svh;
    padding: 26px clamp(22px, 5vw, 44px) max(28px, env(safe-area-inset-bottom));
    gap: 20px;
    align-items: start;
    justify-items: stretch;
  }
  .landing--canvas .landing-canvas__header {
    grid-row: 1;
    padding-bottom: 18px;
  }
  .landing--canvas .landing-wordmark {
    width: min(100%, 78.066vw);
    font-size: 21.8vw;
    letter-spacing: 0.06em;
    line-height: 1.1;
  }
  .landing--canvas .landing-content {
    display: contents;
  }
  .landing--canvas .landing-tagline {
    position: relative;
    z-index: 3;
    grid-column: 1;
    grid-row: 2;
    font-size: clamp(24px, 3.9vw, 30px);
    line-height: 1.38;
    word-spacing: normal;
    letter-spacing: -0.04em;
  }
  .landing--canvas .landing-mascot {
    position: relative;
    grid-column: 1;
    grid-row: 3;
    justify-self: end;
    align-self: center;
    right: auto;
    bottom: auto;
    width: min(100%, 440px);
  }
  .landing--canvas .landing-actions {
    position: relative;
    z-index: 3;
    grid-column: 1;
    grid-row: 4;
    justify-self: start;
    max-width: 640px;
    gap: 16px;
  }
  .landing--canvas .landing-actions .landing-button {
    --landing-cta-title-size: clamp(18px, 3vw, 24px);
    --landing-icon-frame-height: 82px;
    aspect-ratio: 1.25;
  }
  .landing--canvas .landing-actions .landing-button .landing-text-group {
    max-width: min(190px, 90%);
    opacity: 1;
    transform: none;
  }
  .landing--canvas .landing-canvas__orbit,
  .landing--canvas .landing-canvas__orbit-line {
    left: auto;
    transform: none;
  }
  .landing--canvas .landing-canvas__orbit {
    width: 90vw;
    top: 270px;
    right: -34vw;
  }
  .landing--canvas .landing-canvas__orbit-line {
    width: 101vw;
    top: calc(270px - 5.5vw);
    right: -39.5vw;
  }
}

@media (max-width: 600px) {
  .landing--canvas > .landing-canvas {
    padding-top: max(23px, env(safe-area-inset-top));
    padding-right: max(22px, env(safe-area-inset-right));
    padding-left: max(22px, env(safe-area-inset-left));
    gap: 16px;
  }
  .landing--canvas .landing-mascot {
    width: 100%;
    max-width: 390px;
    justify-self: center;
  }
  .landing--canvas .landing-actions {
    gap: 12px;
    max-width: none;
  }
  .landing--canvas .landing-actions .landing-button {
    min-height: 168px;
    aspect-ratio: 0.98;
    padding: 7px;
    border-radius: 20px;
    --landing-icon-frame-width: 72px;
    --landing-icon-frame-height: 64px;
    --landing-icon-size: 72px;
    --landing-icon-shift-y: 0px;
    --landing-cta-title-size: clamp(16px, 4.4vw, 20px);
  }
  .landing--canvas .landing-actions .landing-button.student {
    --landing-icon-size: 72px;
    --landing-icon-shift-y: 0px;
  }
  .landing--canvas .landing-actions .landing-button > .landing-button__card {
    display: grid;
    grid-template-rows: 76px 36px;
    justify-items: center;
    align-content: center;
    gap: 10px;
    padding: 10px 6px 15px;
  }
  .landing--canvas .landing-actions .landing-button .landing-icon-wrapper {
    height: 76px;
    min-height: 0;
  }
  .landing--canvas .landing-actions .landing-button .landing-text-group {
    margin: 0;
    max-width: 94%;
    opacity: 1;
    transform: none;
  }
  .landing--canvas .landing-actions .landing-button .landing-text-group::before {
    inset: -8px -5px;
    border-radius: 12px;
  }
  .landing--canvas .landing-canvas__orbit {
    width: 580px;
    top: 250px;
    right: -290px;
  }
  .landing--canvas .landing-canvas__orbit-line {
    width: 634px;
    top: 223px;
    right: -317px;
  }
}

@media (hover: none), (pointer: coarse) {
  .landing--canvas .landing-actions .landing-button .landing-text-group {
    opacity: 1;
    transform: none;
  }
}