/* ==========================================================================
   MadCo Glass - main.css
   Design tokens, base typography, global elements.
   Every value here traces to brief/project-brief.md sections 3, 4 and 7.
   Components reference these properties. No hardcoded hex values below :root.
   ========================================================================== */

:root {
  /* --- Color: brand ------------------------------------------------------
     #198588 is the only verified brand color, read from the logo SVG source.
     It FAILS AA for normal body text on white (4.42:1). Large display type,
     UI elements and fills only. Use --color-teal-text for teal text on white
     and --color-teal-text-grey for teal text on the grey surface. */
  --color-navy:            #022946;
  /* One step down from navy. Used only for the footer, so the footer separates
     from the CTA band above it by tone rather than by a border. */
  --color-navy-deep:       #011D31;
  --color-teal:            #198588;
  --color-teal-text:       #188184;
  --color-teal-text-grey:  #157072;
  --color-aqua:            #5BCAD5;
  --color-yellow:          #F2E416;
  --color-grey:            #E6E6E8;
  --color-white:           #FFFFFF;

  /* --- Color: derived neutrals -------------------------------------------
     Not brand colors. Derived from the navy hue so body copy has a muted
     tone that still clears AA. Verified: #3D5871 on white 7.41:1, on grey
     5.95:1. #9FBACB on navy 7.36:1. */
  --color-muted:           #3D5871;
  --color-muted-invert:    #9FBACB;
  /* Lighter inverted tone for sustained reading on navy. 10.38:1, against
     7.36:1 for --color-muted-invert. Used for footer body copy and links. */
  --color-invert-soft:     #C8DAE5;

  /* --- Color: roles ------------------------------------------------------ */
  --color-text:            var(--color-navy);
  --color-text-muted:      var(--color-muted);
  --color-bg:              var(--color-white);
  --color-bg-alt:          var(--color-grey);
  --color-bg-dark:         var(--color-navy);
  --color-border:          var(--color-grey);
  --color-link:            var(--color-teal-text);

  /* --- Typography --------------------------------------------------------
     Fraunces axis settings are locked, not left at defaults. Default WONK
     and high SOFT make the face compete with the brush script wordmark. */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fraunces-axes: 'SOFT' 60, 'WONK' 0;

  --font-size-base: 1rem;
  --line-height-base: 1.7;
  --line-height-tight: 1.12;

  /* --- Spacing ----------------------------------------------------------- */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;

  /* --- Layout ------------------------------------------------------------
     Section padding 72 to 88px, from the reference. Compact density. */
  --container-max: 1200px;
  --container-pad: 1.5rem;
  --section-pad-y: 4.5rem;
  --section-pad-y-lg: 5.5rem;

  /* --- Shape -------------------------------------------------------------
     Radii from the reference: components 8px, controls 4 to 6px, media 12px.
     Media radius is deliberately larger than component radius. */
  --radius-component: 8px;
  --radius-control: 5px;
  --radius-media: 12px;
  --radius-chip: 6px;
  --border-hairline: 1px;

  /* Shadow is used only where a panel overlaps a different background.
     It is never the default separation device. */
  --shadow-overlap: 0 10px 30px rgba(2, 41, 70, 0.10);

  /* --- Marker stroke -----------------------------------------------------
     Hand drawn underline, used on heading words and on the active nav link.
     Declared once here so both uses stay identical. */
  --marker-teal: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20240%2024%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M6%2015.5c34-5.2%2092-7.4%20141-6.1%2030%20.8%2058%202.6%2087%205.4%22%20fill%3D%22none%22%20stroke%3D%22%23198588%22%20stroke-width%3D%227%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M14%2020.5c46-3.6%20104-4.4%20158-2.9%2022%20.6%2041%201.6%2060%203%22%20fill%3D%22none%22%20stroke%3D%22%23198588%22%20stroke-width%3D%223.2%22%20stroke-linecap%3D%22round%22%20opacity%3D%220.55%22%2F%3E%3C%2Fsvg%3E");
  --marker-aqua: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20240%2024%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M6%2015.5c34-5.2%2092-7.4%20141-6.1%2030%20.8%2058%202.6%2087%205.4%22%20fill%3D%22none%22%20stroke%3D%22%235BCAD5%22%20stroke-width%3D%227%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M14%2020.5c46-3.6%20104-4.4%20158-2.9%2022%20.6%2041%201.6%2060%203%22%20fill%3D%22none%22%20stroke%3D%22%235BCAD5%22%20stroke-width%3D%223.2%22%20stroke-linecap%3D%22round%22%20opacity%3D%220.55%22%2F%3E%3C%2Fsvg%3E");

  /* --- Motion ------------------------------------------------------------ */
  --transition-base: 180ms ease-out;
  --reveal-duration: 600ms;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

html {
  scroll-behavior: smooth;
  /* Sticky header clearance for anchor targets */
  scroll-padding-top: 6.5rem;
}

body {
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-variation-settings: var(--fraunces-axes);
  font-weight: 700;
  line-height: var(--line-height-tight);
  margin: 0 0 var(--space-md);
  color: var(--color-text);
  letter-spacing: -0.015em;
}

h1 { font-size: clamp(2.25rem, 5.2vw, 3.5rem); }
h2 { font-size: clamp(1.875rem, 4vw, 2.75rem); }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.5rem); font-weight: 500; }
h4 { font-size: 1.125rem; font-weight: 500; }
h5 { font-size: 1rem; font-weight: 500; }
h6 { font-size: 0.9375rem; font-weight: 500; }

p {
  margin: 0 0 var(--space-md);
  color: var(--color-text-muted);
  max-width: 68ch;
}

strong { font-weight: 700; color: var(--color-text); }
em { font-style: italic; }

ul, ol { margin: 0 0 var(--space-md); padding-left: 1.25rem; }
li { color: var(--color-text-muted); margin-bottom: var(--space-2xs); }

a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  transition: color var(--transition-base);
}

a:hover { color: var(--color-navy); }

:focus-visible {
  outline: 3px solid var(--color-teal);
  outline-offset: 3px;
}

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

/* --------------------------------------------------------------------------
   Inverted surfaces
   White on teal fails AA at body size, so teal is never a text surface.
   Navy is the only dark text surface on this site.
   -------------------------------------------------------------------------- */

.surface-dark {
  background-color: var(--color-bg-dark);
  color: var(--color-white);
}

.surface-dark h1,
.surface-dark h2,
.surface-dark h3,
.surface-dark h4,
.surface-dark strong { color: var(--color-white); }

.surface-dark p,
.surface-dark li { color: var(--color-invert-soft); }

.surface-alt { background-color: var(--color-bg-alt); }

/* --------------------------------------------------------------------------
   Skip link
   -------------------------------------------------------------------------- */

.skip-to-main {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background-color: var(--color-navy);
  color: var(--color-white);
  padding: var(--space-sm) var(--space-md);
  border-radius: 0 0 var(--radius-control) 0;
  text-decoration: none;
  font-weight: 700;
}

.skip-to-main:focus {
  left: 0;
  color: var(--color-white);
}

/* --------------------------------------------------------------------------
   Screen reader only
   -------------------------------------------------------------------------- */

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

/* --------------------------------------------------------------------------
   Entrance animation
   Content is visible by default. Animation is additive and only applies once
   the reveal class has been added by JS, so a script failure or a missed
   scroll event never hides content.
   -------------------------------------------------------------------------- */

.js-reveal-ready .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--reveal-duration) ease-out,
              transform var(--reveal-duration) ease-out;
}

.js-reveal-ready .reveal.is-revealed {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .js-reveal-ready .reveal,
  .js-reveal-ready .reveal.is-revealed {
    opacity: 1;
    transform: none;
    transition: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}