/* elsegundo.xyz components, version 1. Needs tokens.css first.
   Flat fills and hairlines, like a printed map: no gradients, glows or drop
   shadows. Every class has an es- prefix. Motion is calm and turns off for
   people who ask for reduced motion. */

.es { background: var(--esm-ground); color: var(--esm-ink); font-family: var(--esm-font-sans); }
.es-wrap { width: min(var(--esm-page), 100% - 2 * var(--esm-space-4)); margin-inline: auto; }

/* Type */
.es-eyebrow { font: 600 13px/18px var(--esm-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--esm-ink-muted); margin: 0 0 var(--esm-space-4); }
.es-hero-title { font: 800 clamp(56px, 11vw, 132px)/.92 var(--esm-font-display); letter-spacing: -.035em; margin: 0; color: var(--esm-ink); }
.es-display { font: 800 clamp(40px, 6vw, 72px)/1 var(--esm-font-display); letter-spacing: -.03em; margin: 0; color: var(--esm-ink); }
.es-title { font: 700 clamp(28px, 3.4vw, 40px)/1.08 var(--esm-font-display); letter-spacing: -.02em; margin: 0; }
.es-heading { font: 700 20px/26px var(--esm-font-display); margin: 0; }
.es-lead { font: 400 clamp(19px, 2vw, 23px)/1.45 var(--esm-font-sans); color: var(--esm-ink-muted); max-width: var(--esm-measure); margin: var(--esm-space-4) 0 0; }
.es-body { font: 400 16px/24px var(--esm-font-sans); }
.es-caption { font: 400 12px/16px var(--esm-font-sans); color: var(--esm-ink-muted); }
.es-coord { font: 500 13px/18px var(--esm-font-mono); color: var(--esm-ink-muted); }
.es-map-label { font: 800 13px/16px var(--esm-font-display); letter-spacing: .04em; text-transform: uppercase; }
.es-accent { color: var(--esm-ocean); }

/* Sections: generous, centered, one idea each */
.es-section { padding-block: clamp(64px, 10vw, 128px); border-top: 1px solid var(--esm-hairline); }
.es-section:first-child { border-top: 0; }
.es-section-head { text-align: center; max-width: 44rem; margin: 0 auto var(--esm-space-8); }
.es-section-head .es-lead { margin-inline: auto; }

/* Buttons */
.es-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--esm-space-2); min-height: 44px; padding: 10px 20px; border-radius: var(--esm-radius-pill); font: 600 15px/20px var(--esm-font-sans); border: 1.5px solid var(--esm-ocean); background: var(--esm-ocean); color: var(--esm-on-ocean); cursor: pointer; text-decoration: none; transition: transform .2s var(--esm-ease), background .2s var(--esm-ease); }
.es-btn:hover { transform: translateY(-1px); }
.es-btn:focus-visible, .es-focus:focus-visible { outline: 2px solid var(--esm-ocean); outline-offset: 3px; }
.es-btn.quiet { background: transparent; color: var(--esm-ocean); }
.es-btn[disabled] { opacity: .5; cursor: default; transform: none; }
.es-link { color: var(--esm-ocean); font-weight: 600; text-decoration: none; }
.es-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Region tags */
.es-tag { display: inline-flex; align-items: baseline; gap: var(--esm-space-2); padding: var(--esm-space-1) 12px; border-radius: var(--esm-radius-pill); color: var(--esm-on-region); font: 800 13px/16px var(--esm-font-display); letter-spacing: .04em; text-transform: uppercase; }
.es-tag small { font: 500 12px var(--esm-font-mono); letter-spacing: 0; text-transform: none; }
.es-tag.beach { background: var(--esm-region-beach); } .es-tag.tree { background: var(--esm-region-tree); } .es-tag.rec { background: var(--esm-region-rec); } .es-tag.main { background: var(--esm-region-main); }
.es-tag.richmond { background: var(--esm-region-richmond); } .es-tag.smoky { background: var(--esm-region-smoky); } .es-tag.refinery { background: var(--esm-region-refinery); } .es-tag.runway { background: var(--esm-region-runway); }

/* Panels and cards */
.es-panel { background: var(--esm-ground-raised); border: 1px solid var(--esm-hairline); border-radius: var(--esm-radius-md); padding: clamp(20px, 3vw, 32px); }
.es-card { background: var(--esm-ground-raised); border: 1px solid var(--esm-hairline); border-radius: var(--esm-radius-sm); overflow: hidden; }

/* Big numbers */
.es-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--esm-space-4); }
.es-stat { display: grid; gap: var(--esm-space-1); text-align: center; }
.es-stat strong { font: 800 clamp(44px, 7vw, 80px)/1 var(--esm-font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.es-stat span { font: 500 13px/18px var(--esm-font-mono); color: var(--esm-ink-muted); text-transform: uppercase; letter-spacing: .06em; }

/* Steps: a numbered row of figures that explains a flow */
.es-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--esm-space-4); list-style: none; padding: 0; margin: 0; counter-reset: es-step; }
.es-step { position: relative; padding-top: var(--esm-space-4); counter-increment: es-step; }
.es-step::before { content: counter(es-step, decimal-leading-zero); display: block; font: 600 13px var(--esm-font-mono); color: var(--esm-ocean); margin-bottom: var(--esm-space-2); }
.es-step figure { margin: 0 0 var(--esm-space-4); aspect-ratio: 4 / 3; display: grid; place-items: center; background: var(--esm-ground-raised); border: 1px solid var(--esm-hairline); border-radius: var(--esm-radius-md); overflow: hidden; }
.es-step figure svg { width: 82%; height: auto; }
.es-step h3 { font: 700 20px/26px var(--esm-font-display); margin: 0 0 var(--esm-space-2); }
.es-step p { margin: 0; color: var(--esm-ink-muted); line-height: 1.5; }

/* Fields */
.es-field { display: grid; gap: 6px; font: 600 13px/18px var(--esm-font-sans); color: var(--esm-ink-muted); }
.es-field input, .es-field select { font: 400 16px/22px var(--esm-font-sans); color: var(--esm-ink); background: var(--esm-ground); border: 1px solid var(--esm-hairline); border-radius: var(--esm-radius-md); padding: 10px 12px; min-height: 44px; }
.es-field input:focus-visible, .es-field select:focus-visible { outline: 2px solid var(--esm-ocean); outline-offset: 1px; }

/* Scroll reveal: add .es-reveal; a script adds .is-in when it enters the view */
.es-reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--esm-ease), transform .8s var(--esm-ease); }
.es-reveal.is-in { opacity: 1; transform: none; }
.no-js .es-reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .es-reveal { opacity: 1; transform: none; transition: none; }
  .es-btn { transition: none; }
}