/* ===========================================================================
   GRASP-X v2 — landing page
   Palette and proportions sampled directly from the Figma export
   (design/page_look.png, a 1204 x 859 frame).

   SCALING MODEL
   Element sizes come from one unit, --fit, which is 1% of the design frame's
   width. Any measurement taken off the mockup converts as
   designPx / 12.04 * --fit, so the composition keeps its internal proportions
   at every screen size instead of drifting the way independent clamps do.

   Layout width is deliberately NOT tied to --fit. The frame spans the full
   viewport so the composition breathes wide and the eyebrow sits near the
   corner, while --fit keeps the elements themselves small.
   ========================================================================= */

:root {
  /* The 12.5px ceiling is the important term on large displays: bound only by
     vh, the poster grew to fill a tall screen and read as oversized. The 7px
     floor keeps type legible on very short windows — below that the page is
     allowed to scroll rather than shrink into illegibility. */
  --fit: clamp(7px, min(1.25vw, 1.25vh), 12.5px);

  /* Independent of --fit, so the content reaches the edges on wide screens. */
  --gutter: clamp(16px, 2.2vw, 56px);

  /* Base backdrop: a horizontal sweep, flat on the left then falling away to
     the right. Matches the sampled row profile of the mockup. */
  --bg-light: #8b7676;
  --bg-dark: #513636;

  /* Dark veil shared by the navbar and the footer. */
  --veil: 9, 7, 7;

  --ink-bright: #f7f4f2;
  --ink-wordmark: #ece8e5;
  --ink-muted: #e4dedb;

  --btn-bg: #ededed;
  --btn-bg-hover: #ffffff;
  --btn-ink: #1c1c1c;
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;

  background-color: var(--bg-dark);
  color: var(--ink-bright);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;

  /* Nothing here is an input, so the I-beam is never the right pointer. */
  cursor: default;
}

/* --------------------------------------------------------------- backdrop -
   Layer order: backdrop (0) < noise (1) < content (2).

   The three animations run on mismatched, non-harmonic periods (25.2s / 19.8s+15.3s
   / 23.4s+13.5s) so the light and dark pools drift in and out of each other
   instead of the whole thing repeating on one visible beat.               */

.backdrop {
  position: fixed;
  top: 0;
  left: -15%;
  width: 130%;
  height: 100%;
  z-index: 0;
  pointer-events: none;

  background-image: linear-gradient(
    90deg,
    var(--bg-light) 0%,
    var(--bg-light) 22%,
    var(--bg-dark) 100%
  );

  /* Oversized by 15% each side so the drift never exposes an edge. The sweep
     only oscillates — a full loop would periodically invert the mockup's
     light-left / dark-right reading. */
  animation: backdrop-drift 25.2s ease-in-out infinite alternate;
  will-change: transform;
}

.backdrop-glow,
.backdrop-shade {
  position: absolute;
  display: block;
  will-change: transform, opacity;
}

/* Warm light pool. */
.backdrop-glow {
  inset: -20%;
  background-image: radial-gradient(
    50% 50% at 36% 44%,
    rgba(255, 236, 225, 0.19) 0%,
    rgba(255, 236, 225, 0) 70%
  );
  animation: glow-drift 19.8s ease-in-out infinite alternate,
    glow-fade 15.3s ease-in-out infinite alternate;
}

/* Dark pool, drifting against the light one and breathing on its own period
   so the backdrop keeps deepening and clearing rather than sitting still. */
.backdrop-shade {
  inset: -25%;
  background-image: radial-gradient(
    46% 46% at 70% 58%,
    rgba(22, 14, 14, 0.46) 0%,
    rgba(22, 14, 14, 0) 72%
  );
  animation: shade-drift 23.4s ease-in-out infinite alternate,
    shade-fade 13.5s ease-in-out infinite alternate;
}

@keyframes backdrop-drift {
  from {
    transform: translate3d(-6%, 0, 0);
  }
  to {
    transform: translate3d(6%, 0, 0);
  }
}

@keyframes glow-drift {
  from {
    transform: translate3d(-7%, -4%, 0) scale(1);
  }
  to {
    transform: translate3d(9%, 5%, 0) scale(1.14);
  }
}

@keyframes glow-fade {
  from {
    opacity: 0.45;
  }
  to {
    opacity: 1;
  }
}

@keyframes shade-drift {
  from {
    transform: translate3d(9%, 5%, 0) scale(1.04);
  }
  to {
    transform: translate3d(-11%, -7%, 0) scale(1.26);
  }
}

@keyframes shade-fade {
  from {
    opacity: 0.25;
  }
  to {
    opacity: 1;
  }
}

/* Fine grain over the backdrop. A gradient this wide and this smooth bands
   badly on 8-bit displays; a touch of noise dissolves the steps. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.site-nav,
.hero,
.site-footer {
  position: relative;
  z-index: 2;
}

/* The veils stay full-bleed; only their contents take the gutter. */
.frame {
  width: 100%;
  padding-inline: var(--gutter);
}

/* ---------------------------------------------------------------- navbar - */

.site-nav {
  min-height: calc(14.5 * var(--fit));
  padding-top: calc(3 * var(--fit));
  background-image: linear-gradient(
    to bottom,
    rgba(var(--veil), 0.58) 0%,
    rgba(var(--veil), 0.42) 26%,
    rgba(var(--veil), 0.18) 60%,
    rgba(var(--veil), 0) 100%
  );
}

.eyebrow {
  display: inline-block;
  font-family: "Instrument Serif", "Times New Roman", serif;
  font-weight: 400;
  font-size: calc(2.74 * var(--fit));
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.012em;
  color: var(--ink-bright);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* Instrument Serif ships no true small-caps, so the connective word is set
   down by hand — same effect, no synthesised glyphs. */
.eyebrow-mid {
  font-size: 0.66em;
  margin: 0 0.3em;
  letter-spacing: 0.02em;
}

/* ------------------------------------------------------------------ hero - */

/* VERTICAL BUDGET — --fit is capped at 1.25vh, so the vertical pieces may sum
   to 12.04 / 0.0125 = 963 design px before the page starts scrolling:
     nav 175 + hero 581 + footer 114 = 870, about 93px spare.
   Hero = mark 325 + gap 96 + headline 56 + gap 52 + button 52.
   That is why .hero carries no block padding of its own — check the sum
   before adding any. */
.hero {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.brand-lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.brand-mark {
  display: block;
  height: calc(27.03 * var(--fit));
  width: auto;
  flex: none;
}

.wordmark {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 600;
  font-size: calc(7.36 * var(--fit));
  line-height: 1;
  letter-spacing: -0.018em;
  color: var(--ink-wordmark);
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.3), 0 0 46px rgba(255, 238, 232, 0.16);
}

.headline {
  margin: calc(8 * var(--fit)) 0 0;
  max-width: 100%;
  font-family: "Noto Serif", "Times New Roman", serif;
  font-weight: 400;
  font-size: calc(3.99 * var(--fit));
  line-height: 1.16;
  letter-spacing: -0.005em;
  text-wrap: balance;
  color: var(--ink-bright);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.actions {
  margin-top: calc(4.32 * var(--fit));
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(2.5 * var(--fit));
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(30.4 * var(--fit));
  height: calc(4.36 * var(--fit));
  padding: 0 calc(4.78 * var(--fit));
  border-radius: 999px;

  background: var(--btn-bg);
  color: var(--btn-ink);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;

  font-family: "IBM Plex Sans Thai", system-ui, sans-serif;
  font-weight: 600;
  font-size: calc(1.76 * var(--fit));
  letter-spacing: -0.01em;

  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
  transition: background-color 0.18s ease, box-shadow 0.18s ease,
    transform 0.18s ease;
}

.btn:hover {
  background: var(--btn-bg-hover);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.24);
}

.btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* ---------------------------------------------------------------- footer - */

/* The band height stays put while its contents grew — there is ample room
   inside it, and enlarging it would eat into the hero. */
.site-footer {
  min-height: calc(9.5 * var(--fit));
  display: flex;
  align-items: flex-end;
  padding-bottom: calc(2.2 * var(--fit));

  background-image: linear-gradient(
    to top,
    rgba(var(--veil), 0.58) 0%,
    rgba(var(--veil), 0.42) 30%,
    rgba(var(--veil), 0.18) 64%,
    rgba(var(--veil), 0) 100%
  );
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: calc(2.4 * var(--fit));
}

.sau-logo {
  width: calc(13.32 * var(--fit));
  height: auto;
  display: block;
  opacity: 0.95;
}

.credit {
  margin: 0;
  font-family: "IBM Plex Sans Condensed", system-ui, sans-serif;
  font-weight: 500;
  font-size: calc(1.38 * var(--fit));
  line-height: 1.3;
  color: var(--ink-muted);
}

.credit a {
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.18s ease;
}

.credit a:hover {
  color: #fff;
}

.credit a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ------------------------------------------------------------ responsive - */

/* Under ~720px the frame unit gets too small to read, and the lockup no
   longer fits side by side. Below here the layout stops tracking the desktop
   frame and scales off viewport width on its own terms. */
@media (max-width: 720px) {
  :root {
    --fit: clamp(6px, min(1.9vw, 1.1vh), 9px);
    --gutter: 22px;
  }

  .site-nav {
    min-height: 96px;
    padding-top: 24px;
  }

  .eyebrow {
    font-size: clamp(18px, 5.2vw, 30px);
  }

  .brand-lockup {
    flex-direction: column;
    gap: clamp(8px, 2vh, 18px);
  }

  .brand-mark {
    height: min(44vw, 27vh);
    min-height: 118px;
  }

  .wordmark {
    font-size: clamp(36px, 10.3vw, 64px);
  }

  .headline {
    margin-top: clamp(30px, 5.5vh, 54px);
    font-size: clamp(20px, 5.9vw, 35px);
    max-width: 17ch;
  }

  .actions {
    margin-top: clamp(22px, 4vh, 40px);
  }

  .btn {
    min-width: 0;
    height: 52px;
    padding: 0 38px;
    font-size: 17px;
  }

  .site-footer {
    min-height: 120px;
    padding-bottom: 20px;
  }

  .footer-inner {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }

  .sau-logo {
    width: 134px;
  }

  .credit {
    font-size: 16px;
  }
}

/* Very narrow phones. A 320 x 568 screen is the tightest target and it
   overflowed, so the bands and gaps tighten here as well as the type. The
   headline drops its ch cap — constraining it forced three cramped lines when
   the available width comfortably holds two. */
@media (max-width: 380px) {
  .site-nav {
    min-height: 78px;
    padding-top: 20px;
  }

  .brand-lockup {
    gap: 6px;
  }

  .brand-mark {
    height: min(40vw, 23vh);
    min-height: 96px;
  }

  .wordmark {
    font-size: clamp(30px, 9.4vw, 40px);
  }

  .headline {
    margin-top: clamp(20px, 3.8vh, 34px);
    font-size: clamp(18px, 5.6vw, 24px);
    max-width: 100%;
  }

  .actions {
    margin-top: clamp(16px, 3vh, 28px);
  }

  .btn {
    height: 48px;
    padding: 0 28px;
    font-size: 16px;
  }

  .site-footer {
    min-height: 96px;
    padding-bottom: 16px;
  }

  .sau-logo {
    width: 118px;
  }

  .credit {
    font-size: 14px;
  }
}

/* Landscape phones. Vertical room is the scarce resource here, so the lockup
   goes back to a row and every band tightens. Must come after the width
   queries above to win. */
@media (max-height: 520px) and (orientation: landscape) {
  :root {
    --fit: clamp(6.5px, 1.7vh, 11px);
    --gutter: clamp(16px, 2.2vw, 40px);
  }

  .site-nav {
    min-height: calc(9.5 * var(--fit));
    padding-top: calc(2.4 * var(--fit));
  }

  .eyebrow {
    font-size: calc(2.5 * var(--fit));
  }

  .brand-lockup {
    flex-direction: row;
    gap: 0;
  }

  .brand-mark {
    height: calc(19 * var(--fit));
    min-height: 0;
  }

  .wordmark {
    font-size: calc(5.6 * var(--fit));
  }

  .headline {
    margin-top: calc(3.6 * var(--fit));
    font-size: calc(3.2 * var(--fit));
    max-width: 100%;
  }

  .actions {
    margin-top: calc(2.8 * var(--fit));
  }

  .btn {
    min-width: calc(26 * var(--fit));
    height: calc(4 * var(--fit));
    padding: 0 calc(4 * var(--fit));
    font-size: max(12px, calc(1.6 * var(--fit)));
  }

  .site-footer {
    min-height: calc(7.5 * var(--fit));
    padding-bottom: calc(1.8 * var(--fit));
  }

  .footer-inner {
    flex-direction: row;
    gap: calc(2.2 * var(--fit));
  }

  .sau-logo {
    width: calc(9 * var(--fit));
  }

  .credit {
    font-size: max(11px, calc(1.25 * var(--fit)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .backdrop,
  .backdrop-glow,
  .backdrop-shade {
    animation: none;
  }

  .btn,
  .credit a {
    transition: none;
  }

  .btn:hover {
    transform: none;
  }
}