/* ── Lamar PTA — site stylesheet ──────────────────────────────────────────
   The design system's tokens, plus the plain-CSS component classes the
   static pages need. The system's own components are JSX and cannot be used
   in hand-written HTML, so each pattern is reimplemented here as a class
   reading the same tokens. Change tokens, not these rules.

   Deploying: this file needs styles.css, tokens/ and fonts/ uploaded
   alongside it. See guidelines/s3-deployment.md.                          */

@import url("../styles.css");

/* ── Layout ───────────────────────────────────────────────────────────── */
.container{max-width:1160px;margin:0 auto;padding:0 24px}
.band{padding:var(--section-y) 0}
.band--tight{padding:var(--section-y-sm) 0}
.band--sunken{background:var(--surface-sunken)}
.band--inverse{background:var(--surface-inverse);color:var(--text-inverse)}
.band--inverse h1,.band--inverse h2,.band--inverse h3,.band--inverse h4{color:var(--text-inverse)}
.band--inverse a{color:var(--text-link-inverse)}
.band--inverse a:hover{color:var(--text-link-inverse-hover)}
.band--inverse .muted,.band--inverse .section-head p,.band--inverse .lede{color:var(--text-inverse-muted)}
.grid{display:grid;gap:24px}
.grid--2{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.grid--3{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.grid--4{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.split{display:grid;grid-template-columns:1fr 2fr;gap:56px;align-items:start}
.split--even{grid-template-columns:1fr 1fr;align-items:center}
.split--aside{grid-template-columns:2fr 1fr}
.prose{max-width:64ch}
.prose>*+*{margin-top:16px}
.sticky{position:sticky;top:104px}

/* ── Type helpers ─────────────────────────────────────────────────────── */
.eyebrow{font-family:var(--eyebrow-family);font-size:var(--eyebrow-size);font-weight:var(--eyebrow-weight);letter-spacing:var(--eyebrow-tracking);text-transform:uppercase;color:var(--brand-deep);margin:0 0 20px}
.band--inverse .eyebrow{color:var(--brand-spirit-on-dark)}
.chip{display:inline-block;font-family:var(--font-ui);font-size:var(--fs-xs);font-weight:700;letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--brand-deep);background:var(--red-100);padding:7px 14px;margin:0 0 24px}
.display{font-family:var(--display-family);font-size:var(--display-size);font-weight:var(--display-weight);line-height:var(--display-lh);letter-spacing:var(--display-tracking);color:var(--text-strong);margin:0;text-wrap:balance}
.band--inverse .display{color:var(--text-inverse)}
.lede{font-size:var(--lede-size);line-height:var(--lede-lh);color:var(--text-muted);max-width:38ch;margin:24px 0 0;text-wrap:pretty}
.muted{color:var(--text-muted)}
.price,.tnum{font-variant-numeric:tabular-nums lining-nums}

/* ── Section headers ──────────────────────────────────────────────────── */
.section-head{margin-bottom:48px;max-width:62ch}
.section-head h2{font-family:var(--font-ui);font-size:var(--heading-size);font-weight:var(--heading-weight);letter-spacing:var(--tracking-tight);border-left:8px solid var(--brand-spirit);padding-left:24px;margin:0}
.section-head p{margin:14px 0 0 32px;color:var(--text-muted);font-size:var(--fs-lg);line-height:1.55;text-wrap:pretty}
/* The inherited banded H1 — held between two red rules. Once per page. */
.banded{border-top:var(--title-band-width) solid var(--title-band-color);border-bottom:var(--title-band-width) solid var(--title-band-color);padding:22px 0;margin:0 0 56px;text-align:center}
.banded h1,.banded h2{font-family:var(--title-family);font-size:var(--title-size);font-weight:var(--title-weight);letter-spacing:var(--title-tracking);line-height:var(--title-lh);text-transform:var(--title-case);color:var(--title-color);margin:0}

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn-row{display:flex;flex-wrap:wrap;gap:20px;margin-top:36px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--label-family);font-size:var(--label-size);font-weight:var(--label-weight);letter-spacing:var(--label-tracking);text-transform:uppercase;text-decoration:none;padding:17px 30px;border:0;cursor:pointer;transition:var(--transition-color),var(--transition-shadow)}
/* Stamp: sinks flat into its own shadow on press. Nothing moves on hover —
   hover is a colour change, press is the movement. */
.stamp{box-shadow:var(--shadow-stamp);border:2px solid var(--carbon-950)}
.stamp:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--carbon-950)}
.btn--deep{background:var(--brand-deep);color:var(--text-on-spirit)}
.btn--deep:hover{background:var(--brand-deep-hover);color:var(--text-on-spirit)}
.btn--spirit{background:var(--surface-spirit);color:var(--text-on-spirit)}
.btn--spirit:hover{background:var(--brand-spirit-hover);color:var(--text-on-spirit)}
.btn--ink{background:var(--brand-primary);color:var(--text-inverse)}
.btn--ink:hover{background:var(--brand-primary-hover);color:var(--text-inverse)}
.btn--ghost{background:transparent;color:var(--text-strong);border:2px solid var(--border-strong)}
.btn--ghost:hover{background:var(--brand-primary);color:var(--text-inverse)}
.band--inverse .btn--ghost{color:var(--text-inverse);border-color:var(--paper-000)}
.band--inverse .btn--ghost:hover{background:var(--paper-000);color:var(--carbon-950)}
.btn--lg{font-size:var(--fs-sm);padding:20px 38px}
.btn--sm{font-size:11px;padding:12px 20px}
.btn--block{width:100%}
.btn[disabled],.btn--disabled{background:transparent;color:var(--text-muted);border:2px solid var(--border-hairline);cursor:not-allowed;box-shadow:none;pointer-events:none}
/* Every payment happens off-site — mark the door. */
.btn[data-external]::after,.link-external::after{content:"↗";font-size:.9em;line-height:1}

/* ── Icons ────────────────────────────────────────────────────────────────
   Same technique as components/core/Icon.jsx: a Lucide SVG used as a CSS
   mask, so the glyph inherits currentColor and needs no inline SVG. Set the
   URL per element with --i. Icons are always decorative here — every one sits
   beside a text label — so they degrade to nothing if the CDN is unreachable.
   Vendor them into /assets before launch if you'd rather not depend on it. */
.icon{display:inline-block;flex:0 0 auto;width:20px;height:20px;background-color:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.icon--lg{width:30px;height:30px}
.icon--sm{width:14px;height:14px}

/* ── Cards ────────────────────────────────────────────────────────────── */
.card{background:var(--surface-card);border:var(--card-border);padding:32px 26px;display:flex;flex-direction:column;gap:14px;transition:var(--transition-shadow)}
.card>.icon{color:var(--brand-deep)}
.card h3,.card__title{font-family:var(--card-title-family);font-size:var(--fs-lg);font-weight:var(--card-title-weight);letter-spacing:var(--tracking-tight);color:var(--text-strong);margin:0}
.card p{margin:0;color:var(--text-muted);font-size:var(--fs-md);line-height:1.6}
.card--link{text-decoration:none}
.card--link:hover{box-shadow:var(--shadow-md)}
.card--center{align-items:center;text-align:center}
.card__go{margin-top:auto;padding-top:8px;font-family:var(--font-ui);font-size:var(--fs-xs);font-weight:700;letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--brand-deep)}
.card__num{width:60px;height:60px;border-radius:50%;background:var(--surface-sunken);display:grid;place-items:center;font-family:var(--font-ui);font-size:20px;font-weight:800;color:var(--brand-deep);font-variant-numeric:lining-nums}
.card__icon{width:60px;height:60px;border-radius:50%;background:var(--surface-sunken);display:grid;place-items:center;color:var(--brand-deep)}

/* ── Board roster ─────────────────────────────────────────────────────── */
.person{background:var(--surface-card);border:var(--card-border);border-top:4px solid var(--brand-spirit);padding:24px;display:flex;flex-direction:column;gap:6px}
.person__role{font-family:var(--font-ui);font-size:var(--fs-xs);font-weight:700;letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--brand-deep);margin:0}
.person__name{font-family:var(--card-title-family);font-size:var(--fs-xl);font-weight:700;letter-spacing:var(--tracking-tight);color:var(--text-strong);margin:0}
.person__mail{font-size:14px;margin:0}
.person__note{font-size:14.5px;color:var(--text-muted);margin:8px 0 0;line-height:1.6}
.person--vacant{border-top-color:var(--carbon-300);background:var(--surface-sunken)}
.person--vacant .person__role,.person--vacant .person__name{color:var(--text-muted)}

/* ── Events ───────────────────────────────────────────────────────────── */
.event{display:grid;grid-template-columns:88px 1fr;gap:20px;align-items:start;padding:22px 0;border-bottom:1px solid var(--border-hairline)}
.event:last-child{border-bottom:0}
.event__date{background:var(--surface-inverse);color:var(--text-inverse);text-align:center;padding:10px 6px}
.event__mon{font-family:var(--font-ui);font-size:11px;font-weight:700;letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--brand-spirit-on-dark)}
.event__day{font-family:var(--font-ui);font-size:30px;font-weight:800;line-height:1.1;letter-spacing:-.02em;font-variant-numeric:lining-nums}
.event__title{font-family:var(--card-title-family);font-size:var(--fs-lg);font-weight:700;letter-spacing:var(--tracking-tight);color:var(--text-strong);margin:0}
.event__meta{font-family:var(--font-ui);font-size:13px;font-weight:500;color:var(--text-muted);margin:6px 0 0}
.event__note{font-size:15px;color:var(--text-muted);margin:8px 0 0;line-height:1.55}

/* ── Products ─────────────────────────────────────────────────────────── */
.product{background:var(--surface-card);border:var(--card-border);padding:24px;display:flex;flex-direction:column;gap:16px;transition:var(--transition-shadow)}
.product:hover{box-shadow:var(--shadow-md)}
.product__media{position:relative;overflow:hidden}
.product__head{display:flex;justify-content:space-between;align-items:start;gap:16px}
.product__name{font-family:var(--card-title-family);font-size:var(--fs-lg);font-weight:700;letter-spacing:var(--tracking-tight);margin:0}
.product__price{font-family:var(--font-ui);font-size:var(--fs-lg);font-weight:700;color:var(--brand-deep);font-variant-numeric:tabular-nums lining-nums;margin:0;white-space:nowrap}
.product__meta{font-size:14px;color:var(--text-muted);margin:0}
.product__foot{margin-top:auto;padding-top:8px}
.product--out{opacity:.72}
.product__soldout{position:absolute;inset:0;background:rgba(10,10,11,.6);display:grid;place-items:center}
.product__soldout span{border:2px solid var(--paper-000);color:var(--paper-000);font-family:var(--font-ui);font-size:var(--fs-xs);font-weight:700;letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;padding:10px 18px}

/* ── Stats ────────────────────────────────────────────────────────────── */
.figs{display:flex;flex-direction:column;gap:44px}
.stat__figure{font-family:var(--font-ui);font-size:var(--fs-5xl);font-weight:800;line-height:1;letter-spacing:-.02em;color:var(--brand-deep);font-variant-numeric:tabular-nums lining-nums}
.band--inverse .stat__figure{color:var(--brand-spirit-on-dark)}
.stat__label{font-family:var(--font-ui);font-size:var(--fs-xs);font-weight:700;letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-muted);margin:12px 0 0;line-height:1.5}
.band--inverse .stat__label{color:var(--text-inverse-muted)}

/* ── Budget card ──────────────────────────────────────────────────────── */
.budget{background:var(--surface-card);border:2px solid var(--carbon-950);padding:40px}
.budget__head{display:flex;justify-content:space-between;align-items:center;gap:16px;border-bottom:2px solid var(--border-hairline);padding-bottom:20px;margin-bottom:32px}
.budget__head h3{font-family:var(--card-title-family);font-size:var(--fs-xl);font-weight:700;letter-spacing:var(--tracking-tight);margin:0}
.budget__tag{font-family:var(--font-ui);font-size:11px;font-weight:700;letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;background:var(--surface-sunken);color:var(--text-muted);padding:7px 12px;white-space:nowrap}
.budget__line{display:flex;justify-content:space-between;gap:24px;align-items:start;padding-bottom:22px}
.budget__line b{display:block;font-family:var(--font-ui);font-size:15px;font-weight:700;color:var(--text-strong);margin-bottom:4px}
.budget__line small{font-size:13.5px;color:var(--text-muted);line-height:1.55}
.budget__line em{font-family:var(--font-ui);font-style:normal;font-weight:700;color:var(--brand-deep);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.quote{background:var(--surface-spirit-soft);border-left:4px solid var(--brand-spirit);padding:26px;margin-top:12px}
.quote p{margin:0;font-style:italic;font-size:16px;line-height:1.65;color:var(--text-body)}
.quote cite{display:block;font-family:var(--font-ui);font-size:11px;font-weight:700;letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--brand-deep);font-style:normal;margin-top:16px}

/* ── Callout ──────────────────────────────────────────────────────────── */
.callout{background:var(--surface-card);border:4px solid var(--carbon-950);padding:32px;display:flex;gap:24px;align-items:start}
.callout>.icon{color:var(--brand-deep);margin-top:2px}
.callout--spirit>.icon{color:var(--paper-000)}
.callout--warn>.icon{color:var(--status-warning-fg)}
.callout h4{font-family:var(--font-ui);font-size:var(--fs-xs);font-weight:700;letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;margin:0 0 10px}
.callout p{margin:0;font-size:var(--fs-md);line-height:1.6;max-width:60ch}
.callout--spirit{background:var(--surface-deep);border-color:var(--carbon-950);color:var(--paper-000)}
.callout--spirit h4{color:var(--paper-000)}
.callout--spirit p{color:var(--red-100)}
.callout--warn{background:var(--status-warning-bg);border:0;border-left:8px solid var(--brand-spirit);padding:24px}
.callout--warn p{color:var(--status-warning-fg);font-weight:500}
.callout--quiet{background:var(--surface-sunken);border:0;border-left:8px solid var(--carbon-950)}

/* ── Steps ────────────────────────────────────────────────────────────── */
.steps{list-style:none;counter-reset:s;margin:0;padding:0;display:flex;flex-direction:column;gap:32px}
.steps li{counter-increment:s;display:grid;grid-template-columns:48px 1fr;gap:20px;align-items:start}
.steps li::before{content:counter(s);display:grid;place-items:center;width:48px;height:48px;background:var(--surface-inverse);color:var(--text-inverse);font-family:var(--font-ui);font-weight:800;font-size:19px;font-variant-numeric:lining-nums}
.steps h4{margin:0 0 6px;font-family:var(--font-ui);font-size:var(--fs-lg);font-weight:700;letter-spacing:var(--tracking-tight)}
.steps p{margin:0;color:var(--text-muted);font-size:var(--fs-md);line-height:1.6}
.steps .btn{margin-top:16px}

/* ── FAQ accordion ────────────────────────────────────────────────────── */
.faq{display:flex;flex-direction:column}
.faq details{border-bottom:2px solid var(--border-hairline);background:var(--surface-card)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 4px;cursor:pointer;list-style:none;font-family:var(--font-ui);font-size:var(--fs-lg);font-weight:700;letter-spacing:var(--tracking-tight);color:var(--text-strong)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .icon{color:var(--brand-deep);transition:transform 160ms var(--ease-out)}
.faq details[open] summary .icon{transform:rotate(180deg)}
.faq details>div{padding:0 4px 24px;color:var(--text-muted);font-size:var(--fs-md);line-height:1.65;max-width:70ch}

/* ── Checklist ────────────────────────────────────────────────────────── */
.checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.checks li{display:grid;grid-template-columns:20px 1fr;gap:12px;align-items:start;font-size:var(--fs-md);line-height:1.55}
.checks li::before{content:"";width:20px;height:20px;margin-top:2px;background:var(--brand-spirit);clip-path:polygon(14% 44%,0 58%,42% 100%,100% 22%,86% 8%,42% 72%)}

/* ── Media frame — honest labelled placeholder, never a broken <img> ──── */
.frame{position:relative;background:var(--surface-sunken);border:1px solid var(--border-subtle);aspect-ratio:4/3;display:grid;place-items:center;padding:24px;background-image:repeating-linear-gradient(135deg,transparent,transparent 10px,var(--paper-200) 10px,var(--paper-200) 11px)}
.frame span{font-family:var(--font-ui);font-size:var(--fs-xs);font-weight:700;letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-muted);text-align:center;line-height:1.6}
.frame--wide{aspect-ratio:16/9}
.frame--square{aspect-ratio:1}
.frame--short{aspect-ratio:5/2}

/* ── Badges ───────────────────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-ui);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:6px 11px}
.badge--open{background:var(--status-open-bg);color:var(--status-open-fg)}
.badge--quiet{background:var(--surface-sunken);color:var(--text-muted)}
.badge--in{background:var(--stock-in-bg);color:var(--stock-in-fg)}
.badge--low{background:var(--stock-low-bg);color:var(--stock-low-fg)}
.badge--out{background:var(--stock-out-bg);color:var(--stock-out-fg)}

/* ── Masthead ─────────────────────────────────────────────────────────── */
.masthead{background:var(--surface-inverse);border-bottom:4px solid var(--brand-spirit);position:sticky;top:0;z-index:50}
.masthead__inner{max-width:1160px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.wordmark{display:inline-flex;align-items:center;gap:12px;text-decoration:none;line-height:1}
.wordmark img{height:38px;width:auto;flex:0 0 auto}
.wordmark__type{display:inline-flex;flex-direction:column;align-items:flex-start;gap:3px}
.wordmark__name{font-family:var(--font-ui);font-size:25px;font-weight:800;letter-spacing:.01em;text-transform:uppercase;color:var(--paper-000)}
.wordmark__name i{font-style:normal;color:var(--brand-spirit-on-dark)}
.wordmark__sub{font-family:var(--font-ui);font-size:9.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--carbon-300)}
.nav{display:flex;align-items:center;gap:26px}
.nav a{white-space:nowrap;font-family:var(--font-ui);font-size:var(--fs-xs);font-weight:700;letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--carbon-300);text-decoration:none}
.nav a:hover{color:var(--paper-000)}
.nav a[aria-current=page]{color:var(--paper-000);box-shadow:inset 0 -3px 0 var(--brand-spirit)}
.masthead .btn{white-space:nowrap}
.nav__toggle{display:none;background:transparent;border:2px solid var(--border-inverse);color:var(--text-inverse);font-family:var(--font-ui);font-size:var(--fs-xs);font-weight:700;letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;padding:11px 16px;cursor:pointer}

/* ── Footer ───────────────────────────────────────────────────────────── */
.footer{background:var(--surface-inverse);border-top:4px solid var(--brand-spirit);color:var(--text-inverse-muted);padding:var(--section-y-sm) 0 32px}
.footer__cols{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px}
.footer h4{font-family:var(--font-ui);font-size:var(--fs-xs);font-weight:700;letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--brand-spirit-on-dark);margin:0 0 18px}
.footer__mark{display:flex;align-items:center;gap:14px;margin:0 0 18px}
.footer__mark img{height:48px;width:auto;flex:0 0 auto}
.footer__mark .wordmark__name{font-size:22px}
.footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.footer a{font-size:15px;color:var(--text-link-inverse);text-decoration:none}
.footer a:hover{color:var(--text-link-inverse-hover);text-decoration:underline}
.footer__meta{margin-top:48px;padding-top:24px;border-top:1px solid var(--border-inverse);font-family:var(--font-ui);font-size:var(--fs-sm);display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}

/* ── Scroll entrance ──────────────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.reveal.is-in{opacity:1;transform:none}

/* ── Data-loading failure notice ──────────────────────────────────────── */
.data-error{background:var(--status-warning-bg);border:1px solid var(--status-warning-line);color:var(--status-warning-fg);padding:20px;font-size:15px;line-height:1.6}
.data-error code{background:var(--surface-card);padding:2px 6px}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media(max-width:900px){
  .split,.split--even,.split--aside{grid-template-columns:1fr;gap:40px}
  .sticky{position:static}
}
@media(max-width:1080px){
  .masthead__inner{gap:16px}
  .nav{gap:18px}
}
@media(max-width:960px){
  .band{padding:var(--section-y-sm) 0}
  .footer__cols{grid-template-columns:1fr;gap:32px}
  .masthead .btn{display:none}
}
@media(max-width:960px){
  .nav{position:absolute;top:100%;left:0;right:0;background:var(--surface-inverse);flex-direction:column;align-items:flex-start;gap:0;padding:8px 24px 20px;display:none;border-bottom:4px solid var(--brand-spirit)}
  .nav[data-open=true]{display:flex}
  .nav a{padding:14px 0;width:100%;font-size:var(--fs-sm)}
  .nav a[aria-current=page]{box-shadow:none}
  .nav__toggle{display:inline-block}
  .budget{padding:26px}
  .section-head h2{padding-left:18px}
  .section-head p{margin-left:26px}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .reveal{opacity:1;transform:none}
}