/* ════════════════════════════════════════════════════════════════════
   bdyna-layout.css — reset, typography scale, page shell, containers.
   Layer 2 of 5. Requires bdyna-tokens.css.

   THE CONTAINER PROBLEM THIS SOLVES
   The audit found shell, bd-shell, bdh-wrap, form-shell, wrap, sec-in and
   others, each with its own max-width and padding. `.bd-container` is the
   one. The aliases at the bottom of this file keep the old names working
   during migration — they are marked and dated for removal, not left to
   become permanent.
   ════════════════════════════════════════════════════════════════════ */

/* ── Reset ─────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{background:var(--bd-ink);-webkit-text-size-adjust:100%}
body{
  background:var(--bd-bg);color:var(--bd-fg);
  font-family:var(--bd-font);font-size:var(--bd-fs-body);
  line-height:var(--bd-lh-normal);font-weight:var(--bd-w-normal);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video,canvas{max-width:100%;height:auto;display:block}
/* Images without intrinsic dimensions are the main cause of layout shift.
   Templates should set width/height; this keeps the ratio when they do. */
img[width][height]{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--bd-gold);text-decoration-thickness:1px;text-underline-offset:2px}
[data-bd-theme="light"] a{color:#7a5c00}
hr{border:0;border-top:1px solid var(--bd-border);margin:var(--bd-s-8) 0}

/* One focus ring for the entire system. */
:focus-visible{outline:var(--bd-focus-w) solid var(--bd-focus-color);
  outline-offset:var(--bd-focus-offset);border-radius:2px}
/* Removing the default ring without :focus-visible support would strip focus
   from keyboard users, so it is only suppressed where the modern selector is
   understood. */
@supports selector(:focus-visible){ :focus:not(:focus-visible){outline:none} }

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ── Typography scale ──────────────────────────────────────────── */
.bd-display,.bd-h1,.bd-h2,.bd-h3,.bd-h4{
  font-family:var(--bd-font);color:var(--bd-fg);margin:0;
  /* Long service names must not push a narrow screen sideways. */
  overflow-wrap:break-word;
}
.bd-display{font-size:var(--bd-fs-display);font-weight:var(--bd-w-black);
  line-height:var(--bd-lh-tight);letter-spacing:var(--bd-track-tight)}
.bd-h1{font-size:var(--bd-fs-h1);font-weight:var(--bd-w-black);
  line-height:var(--bd-lh-tight);letter-spacing:var(--bd-track-tight)}
.bd-h2{font-size:var(--bd-fs-h2);font-weight:var(--bd-w-heavy);
  line-height:var(--bd-lh-snug);letter-spacing:-.02em}
.bd-h3{font-size:var(--bd-fs-h3);font-weight:var(--bd-w-bold);line-height:var(--bd-lh-snug)}
.bd-h4{font-size:var(--bd-fs-h4);font-weight:var(--bd-w-semi);line-height:var(--bd-lh-snug)}

.bd-body-lg{font-size:var(--bd-fs-body-lg);line-height:var(--bd-lh-relaxed);max-width:var(--bd-measure)}
.bd-body{font-size:var(--bd-fs-body);line-height:var(--bd-lh-relaxed);max-width:var(--bd-measure)}
.bd-small{font-size:var(--bd-fs-small);line-height:var(--bd-lh-normal)}
.bd-muted{color:var(--bd-fg-muted)}
.bd-measure{max-width:var(--bd-measure)}
.bd-measure-narrow{max-width:var(--bd-measure-narrow)}

/* Eyebrow — one tracking value, used everywhere it appears. */
.bd-eyebrow{
  display:inline-block;font-size:var(--bd-fs-meta);font-weight:var(--bd-w-heavy);
  letter-spacing:var(--bd-track-wide);text-transform:uppercase;
  color:var(--bd-gold);margin:0 0 var(--bd-s-4);line-height:1.4;
}
[data-bd-theme="light"] .bd-eyebrow{color:#7a5c00}

/* Element defaults, so an unclassed <h2> in body copy is sane rather than
   inheriting whatever a page happened to declare. */
.bd-prose h2{font-size:var(--bd-fs-h2);font-weight:var(--bd-w-heavy);
  line-height:var(--bd-lh-snug);margin:var(--bd-s-10) 0 var(--bd-s-3)}
.bd-prose h3{font-size:var(--bd-fs-h3);font-weight:var(--bd-w-bold);
  margin:var(--bd-s-8) 0 var(--bd-s-2)}
.bd-prose h4{font-size:var(--bd-fs-h4);font-weight:var(--bd-w-semi);
  margin:var(--bd-s-6) 0 var(--bd-s-2)}
.bd-prose p,.bd-prose li{font-size:var(--bd-fs-body);line-height:var(--bd-lh-relaxed);
  color:var(--bd-fg-muted);max-width:var(--bd-measure)}
.bd-prose p{margin:0 0 var(--bd-s-4)}
.bd-prose ul,.bd-prose ol{margin:0 0 var(--bd-s-5);padding-left:var(--bd-s-6)}
.bd-prose li{margin-bottom:var(--bd-s-2)}
.bd-prose strong{color:var(--bd-fg);font-weight:var(--bd-w-semi)}
.bd-prose > :first-child{margin-top:0}

/* ── Skip link ─────────────────────────────────────────────────── */
.bd-skip{position:absolute;left:-9999px;top:0;z-index:var(--bd-z-skip);
  background:var(--bd-ink);color:var(--bd-gold);padding:12px 18px;
  font-weight:var(--bd-w-bold);text-decoration:none;border-radius:0 0 var(--bd-r-sm) 0}
.bd-skip:focus{left:0}

/* ── Page shell ────────────────────────────────────────────────── */
.bd-page{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
.bd-main{flex:1;margin-top:0}
.bd-main > :first-child{margin-top:0}   /* stops a collapsing margin reopening
                                            the gap under the header */

.bd-container{width:100%;max-width:var(--bd-container);margin-inline:auto;
  padding-inline:var(--bd-page-x)}
.bd-container--narrow{max-width:var(--bd-container-narrow)}
.bd-container--wide{max-width:var(--bd-container-wide)}
.bd-container--flush{padding-inline:0}

.bd-section{padding-block:var(--bd-section-y);background:var(--bd-bg);color:var(--bd-fg)}
.bd-section--tight{padding-block:calc(var(--bd-section-y) * .6)}
.bd-section--flush{padding-block:0}
.bd-section--alt{background:var(--bd-surface)}
[data-bd-theme="light"] .bd-section--alt{background:var(--bd-paper-2)}
.bd-section-head{margin-bottom:var(--bd-s-8)}
.bd-section-head .bd-h2{margin-bottom:var(--bd-s-2)}
.bd-section-head p{color:var(--bd-fg-muted);max-width:var(--bd-measure);margin:0}

.bd-grid{display:grid;gap:var(--bd-gap);
  grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.bd-grid--2{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.bd-grid--4{grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr))}
.bd-stack{display:flex;flex-direction:column;gap:var(--bd-gap)}
.bd-row{display:flex;flex-wrap:wrap;gap:var(--bd-gap-sm);align-items:center}
.bd-row--between{justify-content:space-between}

.bd-bleed{width:100vw;margin-inline:calc(50% - 50vw)}

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

/* ── COMPATIBILITY ALIASES · remove once migration completes ─────
   These map the legacy container names onto the canonical one so a page
   can adopt the system without its old wrapper collapsing. They are
   deliberately listed together rather than scattered, so the list can be
   deleted in one edit and the remaining failures are obvious.
   Audited names: shell · bd-shell · bdh-wrap · form-shell · wrap · sec-in */
.shell,.bd-shell,.bdh-wrap,.form-shell,.sec-in{
  width:100%;max-width:var(--bd-container);margin-inline:auto;
  padding-inline:var(--bd-page-x);
}
.bd-copy{width:100%;max-width:var(--bd-measure);margin-inline:auto}

/* ════════════════════════════════════════════════════════════════════
   R98 — FRONTEND CONSISTENCY FLOOR.

   148 public templates carry their own <style> block, and between them they
   produce 12px body text, headings anywhere from 52px to 80px, and buttons
   at a dozen sizes. Removing 1.47 MB of inline CSS is per-template work and
   is not done.

   What IS done here: a floor that applies wherever a page has not explicitly
   set the property itself. These rules are scoped to the BARE ELEMENT, never
   to a class, so any page rule — which is always more specific — still wins.
   A page that has styled its own h1 keeps it; a page that never did stops
   inheriting whatever the browser felt like.

   This is a floor, not a takeover. It cannot make the site pixel-identical,
   and it is not pretending to.
   ════════════════════════════════════════════════════════════════════ */

body{font-size:var(--bd-fs-body)}          /* never below 16px */

/* Headings: element-level, so a page class beats them. The point is the CAP —
   nothing lands at 80px by accident any more. */
h1{font-size:var(--bd-fs-h1);line-height:var(--bd-lh-tight);
   letter-spacing:var(--bd-track-tight);overflow-wrap:break-word}
h2{font-size:var(--bd-fs-h2);line-height:var(--bd-lh-snug);overflow-wrap:break-word}
h3{font-size:var(--bd-fs-h3);line-height:var(--bd-lh-snug);overflow-wrap:break-word}
h4{font-size:var(--bd-fs-h4);line-height:var(--bd-lh-snug)}
h5,h6{font-size:var(--bd-fs-body);line-height:var(--bd-lh-snug)}

/* Controls. 16px stops iOS zooming on focus, which is the single most
   common mobile-form complaint and costs nothing to fix. */
input,select,textarea{font-size:var(--bd-fs-body)}
button,input[type="submit"],input[type="button"]{min-height:var(--bd-touch-min)}

/* Any control a page forgot to give a focus style. */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:var(--bd-focus-w) solid var(--bd-focus-color);
  outline-offset:var(--bd-focus-offset)}

/* Images without dimensions are the main cause of layout shift. This stops
   one overflowing; it cannot supply the ratio, which the template must. */
img,video{max-width:100%}

/* Legacy section and heading names found in the audit, mapped onto the scale
   so they stop drifting. Listed together, like the container aliases, so the
   block can be deleted in one edit when the templates are migrated. */
.sec-h,.section-title,.bd-h,.hero-h{font-size:var(--bd-fs-h2);
  font-weight:var(--bd-w-heavy);line-height:var(--bd-lh-snug);
  letter-spacing:-.02em;overflow-wrap:break-word}
.sec-lead,.section-lead,.lead{font-size:var(--bd-fs-body-lg);
  line-height:var(--bd-lh-relaxed);max-width:var(--bd-measure)}
.eyebrow,.hero-eyebrow,.kicker{font-size:var(--bd-fs-meta);
  font-weight:var(--bd-w-heavy);letter-spacing:var(--bd-track-wide);
  text-transform:uppercase}

/* ════════════════════════════════════════════════════════════════════
   R101 — LEGACY `.hero` MATCHED TO THE REFERENCE BAND.

   Pages under the B*DYNA tab must match shopYourTerm.php. Four of them
   (about, contact, privacy, terms) now render the shared hero directly.
   blog.php cannot: its hero carries the featured ARTICLE — title, excerpt,
   author, date, read time, a "Read article" link — and dropping that into a
   generic hero would lose the content the page exists to show.

   So its BAND is matched instead: the same height, the same gradient stack,
   the same eyebrow and title treatment as `.bd-hero`. The article fields stay.
   Same look, different payload — which is the correct answer when the content
   genuinely differs.

   Scoped to the bare `.hero` class and set at normal specificity, so any page
   that has deliberately styled its own hero still wins.
   ════════════════════════════════════════════════════════════════════ */
.hero{
  position:relative;
  background:var(--bd-ink);
  color:#fff;
  min-height:var(--bd-hero-h-min);
  max-height:var(--bd-hero-h-max);
  display:flex;
  align-items:center;
  overflow:hidden;
  margin-top:0;
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(255,215,0,.10) 0%, transparent 60%),
    radial-gradient(70% 90% at 0% 100%, rgba(0,64,48,.45) 0%, transparent 60%),
    linear-gradient(180deg, rgba(10,10,12,.55) 0%, rgba(10,10,12,.78) 60%, rgba(10,10,12,.92) 100%);
}
.hero > *{position:relative;z-index:3}

.hero-eyebrow{
  display:inline-flex;align-items:center;gap:14px;
  font-size:var(--bd-fs-meta);font-weight:var(--bd-w-heavy);
  letter-spacing:var(--bd-track-wide);text-transform:uppercase;
  color:var(--bd-gold);margin:0 0 var(--bd-s-4);
}
.hero-title{
  font-size:var(--bd-fs-h1);font-weight:var(--bd-w-black);
  letter-spacing:var(--bd-track-tight);line-height:var(--bd-lh-tight);
  color:#fff;margin:0 0 var(--bd-s-4);
  text-shadow:0 4px 20px rgba(0,0,0,.4);overflow-wrap:break-word;
}
.hero-excerpt,.hero-sub{
  font-size:var(--bd-fs-body-lg);line-height:var(--bd-lh-relaxed);
  color:rgba(255,255,255,.88);max-width:var(--bd-measure-narrow);
  margin:0 0 var(--bd-s-6);text-shadow:0 2px 12px rgba(0,0,0,.4);
}
.hero-cta{
  display:inline-block;background:var(--bd-gold);color:var(--bd-gold-ink);
  font-weight:var(--bd-w-heavy);padding:14px 28px;border-radius:var(--bd-r-pill);
  text-decoration:none;font-size:var(--bd-fs-body);min-height:var(--bd-touch-min);
}
.hero-meta{
  display:flex;flex-wrap:wrap;gap:var(--bd-s-4);
  font-size:var(--bd-fs-small);color:rgba(255,255,255,.6);margin:0 0 var(--bd-s-5);
}

@media(max-width:640px){
  .hero{min-height:0;padding-block:clamp(48px,12vw,84px)}
}