/* =========================================================================
   Variables
   Every knob the brief asked for (border geometry, animation, spacing,
   colour, type) lives here so the page can be retuned without hunting
   through the rest of the file.
   ========================================================================= */
:root {
  /* Layout */
  --border-offset: 20px;
  --border-radius: clamp(20px, 4vw, 32px);
  --border-width: 7px;
  --content-max-width: 480px;
  --content-padding-inline: clamp(1.25rem, 5vw, 2.5rem);
  --content-gap: clamp(0.9rem, 2.5vw, 1.35rem);

  /* Motion */
  --animation-distance: 12px;
  --animation-duration: 4s;
  --transition-fast: 150ms ease;
  --transition-selection: 220ms ease;

  /* Colour */
  --color-bg: #242825;
  --color-frame-border: #FAF6E4;
  --color-frame-hairline: rgba(199, 161, 92, 0.28);
  --color-text: #FAF6E4;
  --color-text-muted: #9fada6;
  --color-input-bg: #16201f;
  --color-input-border: #2c3836;
  --color-focus: #c7a15c;
  --color-error: #e2725b;
  --color-error-bg: rgba(226, 114, 91, 0.1);

  /* Type */
  --font-display: 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
  --font-body: ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Helvetica, Arial, sans-serif;
}

/* =========================================================================
   Global / reset
   ========================================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  /* The page itself never scrolls — .content scrolls internally instead,
     so a very short viewport still works without anything overlapping. */
  overflow: hidden;

}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* =========================================================================
   Page / border container
   `.page` (the <main> element) IS the decorative frame: it sits inset from
   the viewport, draws the border, and clips everything inside to its
   rounded corners. Clipping happens at the padding edge, which sits inside
   the border, so the border itself is always painted on top and nothing —
   including the floating SVG below — can ever show outside it.
   ========================================================================= */
.page {
  position: fixed;
  inset: max(var(--border-offset), env(safe-area-inset-top))
    max(var(--border-offset), env(safe-area-inset-right))
    max(var(--border-offset), env(safe-area-inset-bottom))
    max(var(--border-offset), env(safe-area-inset-left));

  display: flex;
  flex-direction: column;

  border: var(--border-width) solid var(--color-frame-border);
  border-radius: var(--border-radius);
  /* A faint inset hairline just inside the border reads as a second,
     lighter frame around the "glass" — the one deliberate ornamental
     flourish on an otherwise plain box. */
  /*box-shadow: inset 0 0 0 6px var(--color-frame-hairline);*/
  overflow: hidden;
}

.content {
  flex: 1;
  min-height: 0; /* allow this flex child to actually scroll */
  overflow-y: auto;
  overflow-x: hidden;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--content-gap);
  text-align: center;

  /*padding: clamp(1.5rem, 6vh, 3rem) var(--content-padding-inline);*/
}

/* =========================================================================
   SVG section
   ========================================================================= */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.5rem, 2vh, 1rem);
  margin-bottom: clamp(5rem, 10vh, 50rem);
}

.hero-animated {
  width: clamp(30px, 2.4vw, 900px);
  height: auto;
  animation: floating var(--animation-duration) ease-in-out infinite;
  margin: 0 0 0 60px;
}

.hero-logo {
  width: clamp(200px, 12vw, 800px);
  height: auto;
  margin-top: clamp(-40px, -1vw, -15px);
}

@keyframes floating {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(calc(var(--animation-distance) * -1));
  }
}

/* =========================================================================
   Typography
   A serif display face carries the headline; everything functional
   (body copy, the form, the footer) stays in a plain grotesk so the
   two roles read as clearly different registers.
   ========================================================================= */
h1 {
  margin: 0;
  font-family: 'Ravi', sans-serif;
  font-weight: 600;
  font-size: clamp(1.3rem, 2vw,2rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  max-width: 50ch;

}

.subtitle {
  color: var(--color-text);
  font-family: 'Ravi', sans-serif;
  font-weight: 400;
  font-size: clamp(0.8rem, 1vw, 4.1rem);
  line-height: 1.5;
  /*max-width: 42ch;*/
}

/* =========================================================================
   Form
   ========================================================================= */
.subscribe-form {

  width: 60%;
  max-width: var(--content-max-width);
  margin-top: clamp(0.25rem, 1vh, 0.5rem);

  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.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;
}

.email-input {
  flex: 1 1 220px;
  min-width: 0;

  padding: 0.85rem 1rem;
  border-radius: calc(var(--border-radius) * 0.35);
  border: 1px solid var(--color-input-border);
  background: var(--color-input-bg);
  color: var(--color-text);
  font: inherit;
  font-size: 1rem;

  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.email-input::placeholder {
  color: var(--color-text-muted);
}

.email-input:hover {
  border-color: var(--color-frame-hairline);
}

.email-input:focus-visible {
  outline: none;
  border-color: var(--color-focus);
  box-shadow: 0 0 0 3px var(--color-frame-hairline);
}

/* Native constraint-validation styling — kicks in only after a submit
   attempt in most browsers, not while the person is still typing. */
.email-input:user-invalid {
  border-color: var(--color-error);
}

.email-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* =========================================================================
   Button
   ========================================================================= */
.submit-button {
  flex: 1 1 140px;

  padding: 0.85rem 1.5rem;
  border: 3px solid var(--color-text);
  border-radius: calc(var(--border-radius) * 0.35);
  background: var(--color-bg);
  color: var(--color-text);

  font-family: 'Ravi', sans-serif;
  font-weight: 400;
  font-size: 1rem;
  cursor: pointer;

  transition: transform var(--transition-fast), filter var(--transition-fast),
    opacity var(--transition-fast), border-radius var(--transition-selection),
    background-color var(--transition-selection), color var(--transition-selection),
    border-color var(--transition-selection);
}

.submit-button:hover {
  filter: brightness(1.08);
}

.submit-button:active {
  transform: translateY(1px);
}

.submit-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-frame-hairline);
}

.submit-button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

/* Applied while the button is the page's "selected" element — set by a
   click listener in lib/main.client.dart, since it needs to know about
   clicks anywhere on the page, not just on the button itself. Cleared the
   moment the person clicks anywhere else. */
.submit-button.is-selected {
  border-radius: 999px;
  background: var(--color-bg);
  color: var(--color-text);
  border-color: var(--color-text);

  font-family: 'Ravi', sans-serif;
  font-weight: 400;
  font-size: 1rem;

}

.form-error {
  flex-basis: 100%;
  margin: 0;
  color: var(--color-error);
  background: var(--color-error-bg);
  border-radius: calc(var(--border-radius) * 0.25);
  padding: 0.6rem 0.85rem;
  font-size: 0.9rem;
  text-align: start;
}

/* =========================================================================
   Success state
   Visually stands in for the input + button it replaces, without inviting
   the person to edit it.
   ========================================================================= */
.field-display {
  width: 100%;
  max-width: var(--content-max-width);
  margin-top: clamp(0.25rem, 1vh, 0.5rem);

  padding: 0.95rem 1.1rem;
  border-radius: calc(var(--border-radius) * 0.35);
  border: 1px solid var(--color-frame-hairline);
  background: var(--color-input-bg);
  color: var(--color-text);
  font-weight: 500;
}

/* =========================================================================
   Footer
   ========================================================================= */
.copyright {
  flex-shrink: 0;
  text-align: center;
  padding: 0.9rem 1rem calc(0.9rem + env(safe-area-inset-bottom));
}

.copyright p {
  margin: 0;
  direction: ltr;
  font-family: 'LeageSpartan';
  color: var(--color-text-muted);
  font-size: 0.8rem;
}

/* =========================================================================
   Responsive rules
   Sizes above are already fluid via clamp()/vw; this is the one deliberate
   breakpoint, for very narrow phones where the default padding is tighter
   than it needs to be.
   ========================================================================= */
@media (max-width: 360px) {
  .subscribe-form {
    flex-direction: column;
  }

  .submit-button {
    flex-basis: auto;
  }
}

/* =========================================================================
   Reduced motion
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .hero-animated {
    animation: none;
  }

  .email-input,
  .submit-button {
    transition: none;
  }
}
@font-face {
    font-family: 'Ravi';
    src: url('/fonts/RaviFaNum-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Ravi';
    src: url('/fonts/RaviFaNum-Bold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'LeageSpartan';
    src: url('/fonts/LeagueSpartan-Regular.woff2') format('woff2');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}