/* ==========================================================================
   Dear Aggie styles
   Naming: BEM. block__element--modifier. Blocks are listed in docs/components.md.
   Behavior never hooks onto these classes. JavaScript uses data- attributes only.
   State styling uses ARIA and native attributes ([aria-invalid], [aria-busy],
   :disabled, :focus-visible) so behavior and style stay in step.
   Phone first. Breakpoints: 600px (sm), 900px (md), 1200px (lg).
   ========================================================================== */

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

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

body {
  margin: 0;
  background-color: var(--color-page);
  color: var(--color-on-page);
  font-family: var(--font-serif);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[hidden] {
  display: none !important;
}

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

a {
  color: inherit;
}

:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

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

/* --------------------------------------------------------------------------
   Skip link
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 10;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background-color: var(--color-on-page);
  color: var(--palette-canyon-shade);
  font-family: var(--font-sans);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-caps);
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--motion-fast) var(--ease-standard);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   Page shell
   -------------------------------------------------------------------------- */
.page {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
}

.page__main {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
}

/* --------------------------------------------------------------------------
   Backdrop: the layered page ground (glow, chart rings, art, grain)
   -------------------------------------------------------------------------- */
.backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  background:
    radial-gradient(ellipse 70% 60% at 50% 42%, rgba(226, 196, 137, 0.1), transparent 70%),
    radial-gradient(ellipse 120% 90% at 50% 45%, transparent 45%, rgba(10, 20, 14, 0.42) 100%);
}

.backdrop__rings {
  position: absolute;
  top: 46%;
  left: 50%;
  width: min(1100px, 150vw);
  aspect-ratio: 1;
  opacity: 0.12;
  transform: translate(-50%, -50%);
  -webkit-mask-image: radial-gradient(circle at center, #000 45%, transparent 72%);
  mask-image: radial-gradient(circle at center, #000 45%, transparent 72%);
}

/* The leaves themselves are placed by backdrop-layout.css, generated from the
   Leaf Arranger layout (see tools/build_backdrop.py). */

.backdrop__grain {
  position: absolute;
  inset: 0;
  background-image: url("../img/art/grain.svg");
  background-size: 240px 240px;
  opacity: 0.05;
  mix-blend-mode: overlay;
}

/* --------------------------------------------------------------------------
   Brand lockup
   -------------------------------------------------------------------------- */
.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
}

.brand__mark {
  width: 4.5rem;
  height: 4.5rem;
}

.brand__name {
  margin: var(--space-1) 0 0;
  padding-left: var(--tracking-wordmark); /* balances trailing letter-spacing */
  font-size: var(--text-wordmark);
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-wordmark);
  color: var(--color-on-page);
}

.brand__tagline {
  margin: 0;
  max-width: 22rem;
  font-family: var(--font-sans);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  line-height: 1.8;
  color: var(--color-on-page-muted);
}

.brand__rule {
  width: 7.5rem;
  height: var(--border-hairline);
  margin: var(--space-1) 0;
  border: 0;
  background-image: linear-gradient(90deg, transparent, var(--color-accent), transparent);
}

/* Compact lockup used as the home link on inner pages */
.brand--compact {
  flex-direction: row;
  gap: var(--space-3);
  min-height: var(--touch-target);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  text-decoration: none;
}

.brand--compact .brand__mark {
  width: 2.75rem;
  height: 2.75rem;
}

.brand--compact .brand__name {
  margin: 0;
  font-size: 1.5rem;
}

/* --------------------------------------------------------------------------
   Holding (landing) layout
   -------------------------------------------------------------------------- */
.holding {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-11) var(--space-6) var(--space-9);
  text-align: center;
}

.holding__note {
  margin: var(--space-3) 0 0;
  max-width: 22rem;
  font-family: var(--font-sans);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-caps);
  line-height: 1.8;
  color: var(--color-on-page-subtle);
}

/* --------------------------------------------------------------------------
   Envelope: the animated "Ask Aggie" link
   -------------------------------------------------------------------------- */
.envelope {
  position: relative;
  display: inline-block;
  width: 13.75rem;   /* 220px */
  height: 8.25rem;   /* 132px */
  margin-top: var(--space-5);
  border-radius: var(--radius-sm);
  color: var(--color-envelope-ink);
  text-decoration: none;
  filter: var(--shadow-envelope);
  rotate: 2deg;
  animation: envelope-float var(--motion-float) var(--ease-float) infinite;
  transform-origin: 50% 60%;
}

.envelope__art {
  position: absolute;
  inset: 0;
  overflow: visible;
}

.envelope__paper {
  fill: var(--color-envelope);
  stroke: var(--color-envelope-edge);
  stroke-width: 1;
}

.envelope__stitch {
  fill: none;
  stroke: var(--color-envelope-stitch);
  stroke-width: 0.6;
  stroke-dasharray: 2 2;
}

.envelope__fold {
  fill: none;
  stroke: var(--color-envelope-edge);
  stroke-width: 0.6;
  opacity: 0.55;
}

.envelope__flap {
  fill: var(--color-envelope-flap);
  stroke: var(--color-envelope-edge);
  stroke-width: 1;
  stroke-linejoin: round;
  transform-box: fill-box;
  transform-origin: 50% 0%;
  animation: envelope-flap var(--motion-flap) var(--ease-float) infinite;
}

.envelope__seal {
  transition: opacity var(--motion-base) ease;
}

.envelope__seal-wax {
  fill: var(--color-seal);
}

.envelope__seal-ring {
  fill: none;
  stroke: var(--color-seal-ring);
  stroke-width: 0.8;
}

.envelope__seal-star {
  fill: var(--color-seal-star);
}

.envelope__label {
  position: absolute;
  right: 0;
  bottom: 0.7rem;
  left: 0;
  font-family: var(--font-script);
  font-size: 2.0625rem; /* 33px */
  line-height: 1;
  text-align: center;
}

.envelope__sparkle {
  position: absolute;
  width: 0.5rem;
  height: 0.5rem;
  fill: var(--color-accent-strong);
  opacity: 0;
  animation: sparkle-left var(--motion-sparkle) ease-in-out infinite;
}

.envelope__sparkle--1 { left: -1.125rem; top: 30%; animation-delay: 0s; }
.envelope__sparkle--2 { left: -1.875rem; top: 55%; width: 0.375rem; height: 0.375rem; animation-delay: 0.8s; }
.envelope__sparkle--3 { left: -0.625rem; top: 72%; width: 0.4375rem; height: 0.4375rem; animation-delay: 1.6s; }
.envelope__sparkle--4 { right: -1.375rem; top: 18%; width: 0.625rem; height: 0.625rem; animation-name: sparkle-right; animation-delay: 0.4s; }
.envelope__sparkle--5 { right: -2.125rem; top: 48%; width: 0.4375rem; height: 0.4375rem; animation-name: sparkle-right; animation-delay: 1.2s; }
.envelope__sparkle--6 { right: -0.875rem; top: 78%; animation-name: sparkle-right; animation-delay: 2s; }
.envelope__sparkle--7 { left: 46%; top: -1.375rem; animation-name: sparkle-right; animation-delay: 1.6s; }

/* hover and focus: the flap opens and the seal lifts away */
.envelope:hover,
.envelope:focus-visible {
  animation-play-state: paused;
}

.envelope:hover .envelope__flap,
.envelope:focus-visible .envelope__flap {
  animation: none;
  transform: scaleY(-1);
  transition: transform var(--motion-slow) ease;
}

.envelope:hover .envelope__seal,
.envelope:focus-visible .envelope__seal {
  opacity: 0;
}

.envelope:focus-visible {
  outline-offset: 6px;
}

.envelope:active {
  scale: 0.97;
}

@keyframes envelope-float {
  0%   { translate: 0 0;      rotate: 0deg; }
  20%  { translate: 4px -9px; rotate: 3.5deg; }
  40%  { translate: -3px -5px; rotate: 0.5deg; }
  60%  { translate: 3px -11px; rotate: 3deg; }
  80%  { translate: -2px -3px; rotate: 1deg; }
  100% { translate: 0 0;      rotate: 0deg; }
}

@keyframes envelope-flap {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(0.72); }
}

@keyframes sparkle-left {
  0%, 100% { opacity: 0;   transform: translate(0, 0) scale(0.4); }
  30%      { opacity: 1;   transform: translate(-6px, 4px) scale(1); }
  70%      { opacity: 0.6; transform: translate(-14px, 10px) scale(0.7); }
}

@keyframes sparkle-right {
  0%, 100% { opacity: 0;   transform: translate(0, 0) scale(0.4); }
  30%      { opacity: 1;   transform: translate(6px, -4px) scale(1); }
  70%      { opacity: 0.6; transform: translate(14px, -10px) scale(0.7); }
}

/* --------------------------------------------------------------------------
   Site footer
   -------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  z-index: 1;
  padding: 0 var(--space-6) var(--space-7);
  text-align: center;
}

.site-footer__copy {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-caps);
  color: var(--color-on-page-muted);
}

/* --------------------------------------------------------------------------
   Site header (inner pages)
   -------------------------------------------------------------------------- */
.site-header {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  padding: var(--space-6) var(--space-6) 0;
}

/* --------------------------------------------------------------------------
   Contact layout
   -------------------------------------------------------------------------- */
.contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  max-width: var(--width-content);
  padding: var(--space-9) var(--space-6) var(--space-10);
  text-align: center;
}

.contact__eyebrow {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-accent-strong);
}

.contact__title {
  margin: 0;
  font-size: var(--text-heading);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-tight);
}

.contact__title-accent {
  display: block;
  font-style: italic;
  color: var(--color-accent-strong);
}

.contact__lede {
  margin: 0;
  max-width: var(--width-copy);
  font-size: var(--text-lede);
  line-height: var(--leading-snug);
  color: var(--color-on-page-subtle);
}

/* --------------------------------------------------------------------------
   Card
   -------------------------------------------------------------------------- */
.card {
  width: 100%;
  margin-top: var(--space-5);
  padding: var(--space-7) var(--space-5);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  color: var(--color-on-surface);
  box-shadow: var(--shadow-card);
  text-align: left;
}

.card :focus-visible {
  outline-color: var(--color-focus-ring-surface);
}

/* --------------------------------------------------------------------------
   Form
   -------------------------------------------------------------------------- */
.form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}

.form__summary {
  grid-column: 1 / -1;
}

.form__actions {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.form__note {
  margin: 0;
  font-size: var(--text-small);
  color: var(--color-on-surface-subtle);
}

/* --------------------------------------------------------------------------
   Field: label + control + helper + inline error
   -------------------------------------------------------------------------- */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.field--full {
  grid-column: 1 / -1;
}

.field__label {
  font-family: var(--font-sans);
  font-size: var(--text-eyebrow);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-on-surface-muted);
}

.field__optional {
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--color-on-surface-subtle);
}

.field__control {
  width: 100%;
  min-height: var(--control-height);
  padding: 0 var(--space-4);
  border: var(--border-control) solid var(--color-field-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-field);
  color: var(--color-on-surface);
  font-family: var(--font-sans);
  font-size: var(--text-input);
  line-height: var(--leading-snug);
  transition:
    border-color var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard);
}

.field__control--textarea {
  min-height: 10rem;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-serif);
  font-size: var(--text-body);
  resize: vertical;
}

.field__control--select {
  appearance: none;
  padding-right: var(--space-9);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none' stroke='%235B5E55' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  background-size: 14px 9px;
}

.field__control:hover {
  border-color: var(--color-field-border-hover);
}

.field__control:focus-visible {
  outline: none;
  border-color: var(--color-field-border-focus);
  box-shadow: var(--shadow-field-focus);
}

.field__control:disabled {
  background-color: var(--color-field-disabled);
  border-color: var(--color-field-disabled);
  color: var(--color-on-surface-subtle);
  cursor: not-allowed;
}

.field__control[aria-invalid="true"] {
  border-color: var(--color-danger);
}

.field__control[aria-invalid="true"]:focus-visible {
  box-shadow: 0 0 0 3px var(--color-danger-surface);
}

.field__helper {
  margin: 0;
  font-size: var(--text-small);
  line-height: var(--leading-snug);
  color: var(--color-on-surface-subtle);
}

.field__error {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: var(--leading-snug);
  color: var(--color-danger);
}

.field__error[hidden] {
  display: none;
}

.field__error-icon {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  margin-top: 0.1rem;
}

/* --------------------------------------------------------------------------
   Checkbox
   -------------------------------------------------------------------------- */
.checkbox {
  grid-column: 1 / -1;
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  min-height: var(--touch-target);
  font-size: var(--text-small);
  line-height: var(--leading-snug);
  color: var(--color-on-surface-muted);
  cursor: pointer;
}

.checkbox__input {
  flex: 0 0 auto;
  width: 1.375rem;
  height: 1.375rem;
  margin: 0.125rem 0 0;
  accent-color: var(--color-action);
  cursor: pointer;
}

.checkbox__input:disabled,
.checkbox__input:disabled + .checkbox__label {
  cursor: not-allowed;
  opacity: 0.6;
}

/* --------------------------------------------------------------------------
   Button
   -------------------------------------------------------------------------- */
.button {
  position: relative;
  display: inline-flex;
  gap: var(--space-3);
  align-items: center;
  justify-content: center;
  min-height: var(--button-height);
  padding: var(--space-3) var(--space-7);
  border: 0;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-caps);
  line-height: var(--leading-snug);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--motion-fast) var(--ease-standard),
    transform var(--motion-fast) var(--ease-standard);
}

.button--primary {
  background-color: var(--color-action);
  color: var(--color-on-action);
}

.button--primary:hover {
  background-color: var(--color-action-hover);
}

.button--primary:active {
  background-color: var(--color-action-active);
  transform: translateY(1px);
}

.button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.button[aria-busy="true"] {
  cursor: progress;
  opacity: 0.85;
}

.button__spinner {
  display: none;
  width: 1rem;
  height: 1rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.button[aria-busy="true"] .button__spinner {
  display: inline-block;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* --------------------------------------------------------------------------
   Text link
   -------------------------------------------------------------------------- */
.text-link {
  color: var(--color-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--motion-fast) var(--ease-standard);
}

.text-link:hover {
  color: var(--color-link-hover);
  text-decoration-thickness: 2px;
}

.text-link--caps {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target);
  font-family: var(--font-sans);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-caps);
  text-decoration: none;
}

.text-link--caps:hover {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Alert banner
   -------------------------------------------------------------------------- */
.alert {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--text-small);
  line-height: var(--leading-snug);
}

.alert[hidden] {
  display: none;
}

.alert--error {
  border-left: 3px solid var(--color-danger);
  background-color: var(--color-danger-surface);
  color: var(--color-on-surface);
}

.alert__icon {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-danger);
}

.alert__title {
  margin: 0 0 var(--space-1);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: var(--font-weight-medium);
}

.alert__list {
  margin: 0;
  padding-left: var(--space-5);
}

.alert__list a {
  color: inherit;
}

/* --------------------------------------------------------------------------
   Confirmation (success state of the contact form)
   -------------------------------------------------------------------------- */
.confirmation {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-6) 0;
  text-align: center;
}

.confirmation[hidden] {
  display: none;
}

.confirmation__title {
  margin: 0;
  font-family: var(--font-script);
  font-size: var(--text-script);
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-tight);
  color: var(--color-success);
}

.confirmation__text {
  margin: 0;
  color: var(--color-on-surface-muted);
}

.confirmation__title:focus {
  outline: none;
}

/* --------------------------------------------------------------------------
   Breakpoints (phone first)
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  .field__control--select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none' stroke='%23C8CFC5' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l6 6 6-6'/%3E%3C/svg%3E");
  }
}

@media (min-width: 600px) {
  .brand__tagline,
  .holding__note {
    max-width: none;
  }

  .card {
    padding: var(--space-8) var(--space-7);
  }

  .form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5) var(--space-5);
  }

  .brand__mark {
    width: 5rem;
    height: 5rem;
  }
}

@media (min-width: 900px) {
  .contact {
    padding-top: var(--space-10);
  }
}

@media (min-width: 1200px) {
  .brand__mark {
    width: 6rem;
    height: 6rem;
  }
}

/* --------------------------------------------------------------------------
   Reduced motion: everything holds still, hover still opens the flap
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .envelope__sparkle {
    display: none;
  }
}