/* Generated by scripts/css-bundle.mjs — do not edit by hand. */
/* /public/css/routes/surfaces/contact.css */
@layer routes {
/* ==========================================================================
   contact-surface.css
   --------------------------------------------------------------------------
   Purpose
   - Route-scoped identity for /contact
   - Bias the page toward fast routing, public visibility, and calm clarity
   - Make DMs on X, TikTok, and Instagram feel easy to notice and easy to act on
   - Support service-first contact while still presenting public surfaces well

   Design stance
   - Contact should feel lighter and more decisive than About
   - Priority should be obvious in the visual hierarchy
   - “Fastest route” cards should scan immediately
   - Public surfaces should still feel rich, but secondary
   ========================================================================== */

[data-spw-surface="contact"] {
  --contact-bg: hsl(42 40% 95%);
  --contact-bg-deep: hsl(38 30% 89%);
  --contact-bg-field: hsl(44 34% 97%);

  --contact-surface: rgba(255, 252, 248, 0.84);
  --contact-surface-strong: rgba(255, 253, 250, 0.95);
  --contact-surface-soft: rgba(247, 242, 235, 0.74);

  --contact-ink: rgba(28, 24, 22, 0.94);
  --contact-ink-soft: rgba(28, 24, 22, 0.70);
  --contact-ink-mid: rgba(28, 24, 22, 0.54);
  --contact-ink-faint: rgba(28, 24, 22, 0.32);

  --contact-line: rgba(56, 43, 35, 0.14);
  --contact-line-strong: rgba(116, 82, 63, 0.26);

  --contact-accent: var(--semantic-accent, hsl(186 34% 34%));
  --contact-accent-2: hsl(330 28% 40%);
  --contact-accent-3: hsl(40 56% 48%);

  --contact-accent-soft: hsla(186, 34%, 34%, 0.08);
  --contact-accent-2-soft: hsla(330, 28%, 40%, 0.08);
  --contact-accent-3-soft: hsla(40, 56%, 48%, 0.10);

  --contact-frame-shadow:
    0 1px 3px rgba(39, 24, 15, 0.04),
    0 10px 24px rgba(39, 24, 15, 0.05);
  --contact-frame-shadow-hover:
    0 0 0 1px color-mix(in srgb, var(--contact-accent) 10%, transparent),
    0 14px 30px rgba(39, 24, 15, 0.08);

  --contact-panel-radius: 12px;
  --contact-panel-radius-loose: 16px;

  --contact-priority-ring:
    0 0 0 1px color-mix(in srgb, var(--contact-accent) 16%, transparent),
    0 0 0 5px color-mix(in srgb, var(--contact-accent) 6%, transparent);

  --grain-panel-fill-local: color-mix(in srgb, var(--contact-surface-strong) 96%, #f3eadf 4%);
  --grain-panel-shadow-local:
    0 2px 4px rgba(49, 34, 24, 0.04),
    0 14px 28px rgba(49, 34, 24, 0.06);
  --grain-panel-glow-local:
    0 0 0 1px rgba(116, 82, 63, 0.08),
    0 0 18px rgba(116, 82, 63, 0.05);

  --active-op-color: var(--contact-accent);
  --active-op-border: color-mix(in srgb, var(--contact-accent) 30%, transparent);
  --active-op-bg-soft: color-mix(in srgb, var(--contact-accent) 8%, transparent);

  --objective-brace-color: color-mix(in srgb, var(--contact-accent) 84%, black 6%);
  --subjective-brace-color: color-mix(in srgb, var(--contact-accent-2) 82%, black 6%);
  --objective-brace-wash: color-mix(in srgb, var(--contact-accent) 10%, transparent);
  --subjective-brace-wash: color-mix(in srgb, var(--contact-accent-2) 10%, transparent);

  color: var(--contact-ink);
}

html[data-spw-color-mode="dark"] [data-spw-surface="contact"] {
  --contact-bg: hsl(18 10% 11%);
  --contact-bg-deep: hsl(18 12% 8%);
  --contact-bg-field: hsl(26 10% 13%);

  --contact-surface: rgba(255, 248, 239, 0.08);
  --contact-surface-strong: rgba(255, 248, 239, 0.12);
  --contact-surface-soft: rgba(255, 248, 239, 0.06);

  --contact-ink: hsl(32 24% 91%);
  --contact-ink-soft: hsl(30 12% 72%);
  --contact-ink-mid: hsla(30, 12%, 72%, 0.72);
  --contact-ink-faint: hsla(30, 12%, 72%, 0.40);

  --contact-line: rgba(255, 240, 225, 0.12);
  --contact-line-strong: rgba(209, 164, 134, 0.24);

  --contact-accent: var(--semantic-accent, hsl(184 34% 66%));
  --contact-accent-2: hsl(334 40% 70%);
  --contact-accent-3: hsl(42 60% 66%);

  --active-op-color: var(--contact-accent);
  --active-op-border: color-mix(in srgb, var(--contact-accent) 32%, transparent);
  --active-op-bg-soft: color-mix(in srgb, var(--contact-accent) 10%, transparent);

  --grain-panel-fill-local: color-mix(in srgb, rgba(255,255,255,0.10) 88%, transparent);
  --grain-panel-shadow-local:
    0 2px 8px rgba(0, 0, 0, 0.22),
    0 18px 36px rgba(0, 0, 0, 0.28);
  --grain-panel-glow-local:
    0 0 0 1px rgba(209, 164, 134, 0.10),
    0 0 24px rgba(209, 164, 134, 0.08);
}

@media (prefers-color-scheme: dark) {
  html[data-spw-color-mode="auto"] [data-spw-surface="contact"] {
    --contact-bg: hsl(18 10% 11%);
    --contact-bg-deep: hsl(18 12% 8%);
    --contact-bg-field: hsl(26 10% 13%);

    --contact-surface: rgba(255, 248, 239, 0.08);
    --contact-surface-strong: rgba(255, 248, 239, 0.12);
    --contact-surface-soft: rgba(255, 248, 239, 0.06);

    --contact-ink: hsl(32 24% 91%);
    --contact-ink-soft: hsl(30 12% 72%);
    --contact-ink-mid: hsla(30, 12%, 72%, 0.72);
    --contact-ink-faint: hsla(30, 12%, 72%, 0.40);

    --contact-line: rgba(255, 240, 225, 0.12);
    --contact-line-strong: rgba(209, 164, 134, 0.24);

    --contact-accent: var(--semantic-accent, hsl(184 34% 66%));
    --contact-accent-2: hsl(334 40% 70%);
    --contact-accent-3: hsl(42 60% 66%);
  }
}

/* ==========================================================================
   1. Route background and shell bias
   ========================================================================== */

body[data-spw-surface="contact"] {
  background:
    radial-gradient(circle at top center, color-mix(in srgb, var(--contact-accent-3) 8%, transparent), transparent 32%),
    linear-gradient(180deg, var(--contact-bg-field), var(--contact-bg));
  color: var(--contact-ink);
}

[data-spw-surface="contact"] main {
  gap: clamp(1.05rem, 2.3vw, 1.5rem);
}

[data-spw-surface="contact"] main > section + section {
  margin-top: clamp(0.1rem, 0.5vw, 0.35rem);
}

/* ==========================================================================
   2. Generic frame tuning
   ========================================================================== */

[data-spw-surface="contact"] .site-frame {
  border-color: color-mix(in srgb, var(--contact-line) 96%, transparent);
  border-radius: var(--contact-panel-radius);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--contact-accent-soft) 56%, transparent), transparent 18%),
    var(--contact-surface);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    var(--contact-frame-shadow);
  color: var(--contact-ink);
}

[data-spw-surface="contact"] .site-frame:is(:hover, :focus-within) {
  border-color: color-mix(in srgb, var(--contact-accent) 18%, var(--contact-line));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.46),
    var(--contact-frame-shadow-hover);
}

[data-spw-surface="contact"] .frame-sigil {
  color: color-mix(in srgb, var(--contact-ink-soft) 90%, var(--contact-accent));
}

[data-spw-surface="contact"] .frame-note,
[data-spw-surface="contact"] .inline-note {
  color: var(--contact-ink-soft);
}

/* ==========================================================================
   3. Hero
   ========================================================================== */

[data-spw-surface="contact"] #contact-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--contact-panel-radius-loose);
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--contact-accent-3) 7%, transparent), transparent 34%),
    radial-gradient(circle at top right, color-mix(in srgb, var(--contact-accent-2) 6%, transparent), transparent 30%),
    linear-gradient(180deg, color-mix(in srgb, var(--contact-accent-soft) 74%, transparent), transparent 22%),
    var(--contact-surface-strong);
}

[data-spw-surface="contact"] #contact-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--contact-accent) 8%, transparent),
      transparent 18%,
      transparent 82%,
      color-mix(in srgb, var(--contact-accent-2) 7%, transparent)
    );
  opacity: 0.9;
}

[data-spw-surface="contact"] #contact-title {
  max-width: 12ch;
  color: color-mix(in srgb, var(--contact-ink) 90%, var(--contact-accent-2));
  font-family: var(--craft-display, var(--site-display-font));
  font-size: clamp(2.1rem, 4vw, 2.9rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.02;
  text-wrap: balance;
}

[data-spw-surface="contact"] #contact-frame .page-kicker {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.24), transparent 62%),
    color-mix(in srgb, var(--contact-surface-strong) 92%, transparent);
  border-color: color-mix(in srgb, var(--contact-accent) 18%, transparent);
  color: var(--contact-ink-soft);
}

[data-spw-surface="contact"] #contact-frame .page-lede {
  max-width: 58ch;
  color: color-mix(in srgb, var(--contact-ink-soft) 92%, var(--contact-accent));
}

[data-spw-surface="contact"] #contact-frame strong {
  color: color-mix(in srgb, var(--contact-ink) 90%, var(--contact-accent-2));
}

/* ==========================================================================
   4. Operator chips
   ========================================================================== */

[data-spw-surface="contact"] .frame-operators {
  gap: 0.5rem 0.6rem;
}

[data-spw-surface="contact"] .operator-chip {
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.18), transparent 62%),
    color-mix(in srgb, var(--contact-accent) 7%, transparent);
  border-color: color-mix(in srgb, var(--contact-accent) 18%, transparent);
  color: color-mix(in srgb, var(--contact-accent) 86%, var(--contact-ink));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.26),
    0 1px 3px rgba(35, 22, 16, 0.04);
}

[data-spw-surface="contact"] .operator-chip:hover,
[data-spw-surface="contact"] .operator-chip:focus-visible {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.22), transparent 62%),
    color-mix(in srgb, var(--contact-accent) 11%, transparent);
  border-color: color-mix(in srgb, var(--contact-accent) 28%, transparent);
  color: var(--contact-ink);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--contact-accent) 8%, transparent),
    0 6px 14px rgba(35, 22, 16, 0.06);
}

/* ==========================================================================
   5. Contact cards
   ========================================================================== */

[data-spw-surface="contact"] .contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 0.95rem;
}

[data-spw-surface="contact"] .frame-card {
  min-height: 10.5rem;
  border-color: color-mix(in srgb, var(--contact-line) 96%, transparent);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.20), transparent 62%),
    color-mix(in srgb, var(--contact-surface-strong) 95%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    0 6px 16px rgba(34, 22, 14, 0.04);
  transition:
    border-color var(--duration-base, 220ms) var(--ease-mechanical, ease),
    background-color var(--duration-fast, 140ms) var(--ease-mechanical, ease),
    box-shadow var(--duration-base, 220ms) var(--ease-mechanical, ease),
    transform var(--duration-fast, 140ms) var(--ease-mechanical, ease);
}

[data-spw-surface="contact"] .frame-card:hover,
[data-spw-surface="contact"] .frame-card:focus-visible {
  border-color: color-mix(in srgb, var(--contact-accent) 20%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--contact-accent) 8%, transparent),
    0 14px 28px rgba(74, 51, 37, 0.08);
  transform: translateY(-1px);
  outline: none;
}

[data-spw-surface="contact"] .frame-card strong {
  color: color-mix(in srgb, var(--contact-ink) 90%, var(--contact-accent));
}

[data-spw-surface="contact"] .frame-card span:last-child {
  color: var(--contact-ink-soft);
}

[data-spw-surface="contact"] .frame-card-sigil {
  color: color-mix(in srgb, var(--contact-accent) 84%, var(--contact-ink-soft));
  font-size: 0.78rem;
}

/* ==========================================================================
   6. Priority section
   --------------------------------------------------------------------------
   Make services and preferred DMs scan immediately.
   ========================================================================== */

[data-spw-surface="contact"] #fastest-routes {
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--contact-accent-3-soft) 72%, transparent), transparent 34%),
    linear-gradient(180deg, color-mix(in srgb, var(--contact-accent-soft) 70%, transparent), transparent 18%),
    var(--contact-surface-strong);
}

[data-spw-surface="contact"] #fastest-routes .frame-card {
  min-height: 11rem;
}

[data-spw-surface="contact"] #fastest-routes .frame-card:first-child {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.24), transparent 60%),
    linear-gradient(135deg, color-mix(in srgb, var(--contact-accent-3) 12%, transparent), transparent 42%),
    color-mix(in srgb, var(--contact-surface-strong) 96%, transparent);
  border-color: color-mix(in srgb, var(--contact-accent) 22%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    var(--contact-priority-ring),
    0 10px 24px rgba(34, 22, 14, 0.05);
}

[data-spw-surface="contact"] #fastest-routes .frame-card:first-child strong {
  color: color-mix(in srgb, var(--contact-accent-2) 76%, var(--contact-ink));
}

[data-spw-surface="contact"] #fastest-routes .frame-card:nth-child(2),
[data-spw-surface="contact"] #fastest-routes .frame-card:nth-child(3),
[data-spw-surface="contact"] #fastest-routes .frame-card:nth-child(4) {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.20), transparent 62%),
    linear-gradient(135deg, color-mix(in srgb, var(--contact-accent) 7%, transparent), transparent 46%),
    color-mix(in srgb, var(--contact-surface-strong) 95%, transparent);
}

/* ==========================================================================
   7. Secondary surfaces
   ========================================================================== */

[data-spw-surface="contact"] #course-signups .frame-grid,
[data-spw-surface="contact"] #related-surfaces .frame-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 0.9rem;
}

[data-spw-surface="contact"] .frame-panel {
  border-color: color-mix(in srgb, var(--contact-line) 96%, transparent);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.18), transparent 62%),
    color-mix(in srgb, var(--contact-surface-strong) 94%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    0 6px 16px rgba(34, 22, 14, 0.04);
}

[data-spw-surface="contact"] .frame-panel h3 {
  color: color-mix(in srgb, var(--contact-ink) 88%, var(--contact-accent-2));
}

[data-spw-surface="contact"] .frame-panel p {
  color: var(--contact-ink-soft);
}

/* ==========================================================================
   8. Text refinements
   ========================================================================== */

[data-spw-surface="contact"] h2 {
  color: color-mix(in srgb, var(--contact-ink) 90%, var(--contact-accent-2));
  font-family: var(--craft-display, var(--site-display-font));
  font-size: clamp(1.5rem, 2.4vw, 1.95rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.08;
}

[data-spw-surface="contact"] h3 {
  color: color-mix(in srgb, var(--contact-ink) 88%, var(--contact-accent));
  font-family: var(--site-sans-font, Inter, sans-serif);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.005em;
}

[data-spw-surface="contact"] p,
[data-spw-surface="contact"] li {
  color: var(--contact-ink);
}

[data-spw-surface="contact"] a:not(.frame-card):not(.operator-chip):not(.frame-sigil) {
  color: color-mix(in srgb, var(--contact-accent) 86%, var(--contact-ink));
  text-decoration-color: color-mix(in srgb, var(--contact-accent) 28%, transparent);
  text-underline-offset: 0.16em;
}

[data-spw-surface="contact"] a:not(.frame-card):not(.operator-chip):not(.frame-sigil):hover,
[data-spw-surface="contact"] a:not(.frame-card):not(.operator-chip):not(.frame-sigil):focus-visible {
  color: color-mix(in srgb, var(--contact-accent-2) 82%, var(--contact-accent));
  text-decoration-color: currentColor;
  outline: none;
}

/* ==========================================================================
   9. Responsive
   ========================================================================== */

@media (max-width: 760px) {
  [data-spw-surface="contact"] #contact-title {
    max-width: none;
    font-size: 2rem;
  }

  [data-spw-surface="contact"] .contact-grid,
  [data-spw-surface="contact"] #course-signups .frame-grid,
  [data-spw-surface="contact"] #related-surfaces .frame-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  [data-spw-surface="contact"] .frame-card {
    min-height: 0;
  }
}

/* ==========================================================================
   10. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  [data-spw-surface="contact"] .site-frame,
  [data-spw-surface="contact"] .frame-card,
  [data-spw-surface="contact"] .frame-panel,
  [data-spw-surface="contact"] .operator-chip {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}
}