@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
/* ─────────────────────────────────────────────────────────────────────────
   Heritage — the Bowersox Energy Capital visual system.

   Built around the crest (static/img/crest.png): antique gold on midnight
   navy. The register is a private bank's client portal: calm, exact,
   unhurried. Re-keyed to the crest 2026-10-29 (scripts/apply_crest_theme.py)
   and re-set for institutional typography the same day.

   Type: Inter for everything a person reads or operates (navigation, body,
   figures, tables, forms, buttons), with tabular lining numerals. The serif
   (Cormorant Garamond) is reserved for the wordmark, page titles, and
   section headings. Gold appears only as a hairline or the crest itself.

   Loaded LAST in every page's <head>, so it wins over page-level styles of
   equal specificity. This file owns type, rhythm and components.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* Grounds */
  --hx-parchment: #f4f2ec;
  --hx-ivory:     #fdfcf9;
  --hx-linen:     #ece8df;
  --hx-rule:      #e0dace;
  --hx-rule-dk:   #cdc5b5;
  /* Ink */
  --hx-ink:       #161b24;
  --hx-ink-2:     #3c4250;
  --hx-ink-3:     #6b7180;
  /* Colour */
  --hx-crest:     #0f2340;
  --hx-crest-lt:  #1d3a63;
  --hx-midnight:  #01152e;
  --hx-mist:      #e7ebf2;
  --hx-gold:      #b08a4c;
  --hx-gold-lt:   #c6964d;
  --hx-oxblood:   #8b2e2a;
  --hx-navy:      #3a5470;   /* informational, kept distinct from the brand navy */

  /* Re-point the existing tokens every template already uses */
  --bg:        var(--hx-parchment);
  --bg2:       var(--hx-ivory);
  --bg3:       var(--hx-linen);
  --border:    var(--hx-rule);
  --brand:     var(--hx-crest);
  --brand-lt:  var(--hx-crest-lt);
  --brand-dim: var(--hx-mist);
  --amber:     var(--hx-crest);
  --amber-lt:  var(--hx-crest-lt);
  --amber-dim: var(--hx-mist);
  --text:      var(--hx-ink);
  --text-1:    var(--hx-ink);
  --text-2:    var(--hx-ink-2);
  --text-3:    var(--hx-ink-3);
  --green:     #3d6247;
  --red:       var(--hx-oxblood);
  --blue:      var(--hx-navy);
  --radius:    4px;
  --shadow:    0 1px 2px rgba(22, 27, 36, 0.04);
  --font-ui:   'Inter', -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-head: 'Cormorant Garamond', 'EB Garamond', Garamond, Georgia, serif;
  --font-body: var(--font-ui);
  --font-mono: var(--font-ui);
}

/* ── Type ──────────────────────────────────────────────────────────────── */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body {
  background: var(--hx-parchment);
  color: var(--hx-ink);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.55;
  font-variant-numeric: lining-nums proportional-nums;
  letter-spacing: -0.003em;
}
/* Tabular figures only where columns of numbers must align. (Set on all
   text, Inter's tabular forms also widen the hyphen: "single - well".) */
table, td, th, .card-value, .mono, .num, .amount, .money,
input, select, textarea, code, kbd, samp {
  font-variant-numeric: lining-nums tabular-nums;
}
/* The serif: titles and section headings only. */
h1, h2,
.topbar-title, .page-title, .section-title, .brand-name, .hero-title, .display {
  font-family: var(--font-head);
  font-weight: 500;
  letter-spacing: 0.005em;
  color: var(--hx-ink);
  font-variant-numeric: lining-nums proportional-nums;
}
h1 { font-weight: 500; }
h2 { font-weight: 600; }
/* Smaller headings read as interface, so they are set in Inter. */
h3, h4, h5, h6 {
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--hx-ink);
}
.mono, code, kbd, samp { font-family: var(--font-ui); font-variant-numeric: lining-nums tabular-nums; }
a { color: var(--hx-crest); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--hx-crest-lt); }
::selection { background: #dfe4ee; color: var(--hx-ink); }
hr { border: 0; border-top: 1px solid var(--hx-rule); }

/* Interface labels: Inter, never small-caps serif. */
label, th, .card-label, .nav-section-label, .brand-llc, .badge, .btn,
input, select, textarea, button, table {
  font-family: var(--font-ui);
  font-variant-caps: normal;
}
th, .card-label, .nav-section-label {
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  color: var(--hx-ink-3);
}

/* ── Admin chrome (base.html) ──────────────────────────────────────────── */
.sidebar {
  background: var(--hx-midnight);
  border-right: 0;
  color: #dfe3ea;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.14) transparent;
}
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.14); border-radius: 3px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar-logo { border-bottom: 1px solid rgba(198, 150, 77, 0.22); }
.sidebar-logo .brand-name {
  color: #f4f1ea; font-size: 19px; font-weight: 600; letter-spacing: 0.01em;
  line-height: 1.08; white-space: normal; max-width: 140px;
}
.sidebar-logo .brand-llc  {
  color: var(--hx-gold-lt); font-size: 10px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.nav-section-label { color: rgba(198, 150, 77, 0.8); font-size: 10.5px; }
.nav-link {
  color: #c3cad6; font-family: var(--font-ui); font-size: 14px; font-weight: 500;
  letter-spacing: 0; border-radius: 4px;
}
.nav-link .nav-icon { color: rgba(195, 202, 214, 0.6); }
.nav-link:hover { background: rgba(255, 255, 255, 0.05); color: #ffffff; }
.nav-link:hover .nav-icon { color: #e6e9ef; }
.nav-link.active {
  background: rgba(255, 255, 255, 0.07);
  color: #ffffff;
  box-shadow: inset 2px 0 0 var(--hx-gold-lt);
}
.nav-link.active .nav-icon { color: var(--hx-gold-lt); }
.sidebar-footer { border-top: 1px solid rgba(198, 150, 77, 0.18); }
.sidebar-footer a { color: rgba(195, 202, 214, 0.75); font-size: 13.5px; }
.sidebar-footer a:hover { color: #ffffff; }

.topbar {
  background: var(--hx-parchment);
  border-bottom: 1px solid var(--hx-rule);
}
.topbar-title { font-size: 30px; font-weight: 500; letter-spacing: 0; }
.content { padding-top: 28px; }

/* The wordmark is always the serif, whatever a page's own styles say. */
.brand-name { font-family: var(--font-head) !important; font-weight: 600; letter-spacing: 0.01em; }

/* ── Surfaces ──────────────────────────────────────────────────────────── */
.card {
  background: var(--hx-ivory);
  border: 1px solid var(--hx-rule);
  border-radius: 4px;
  box-shadow: var(--shadow);
}
.card-label { margin-bottom: 6px; }
.card-value {
  font-family: var(--font-ui);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--hx-ink);
  font-variant-numeric: lining-nums tabular-nums;
}
.card-sub, .card-note { color: var(--hx-ink-3); font-size: 13px; }
.section-title { font-size: 24px; font-weight: 600; }
.section-head { border-bottom: 1px solid var(--hx-rule); padding-bottom: 10px; }

/* ── Tables: hairline ledger ───────────────────────────────────────────── */
.card table, .table-wrap table, .section table { width: 100%; }
table { font-size: 14px; border-collapse: collapse; }
th {
  border-bottom: 1px solid var(--hx-rule-dk) !important;
  background: transparent;
  padding-top: 10px; padding-bottom: 10px;
  text-align: left;
}
/* base.html makes card tables display:block so they scroll on phones; on
   wider screens that shrinks them to their content. Restore table layout. */
@media (min-width: 1025px) {
  .card table, .table-responsive table { display: table; }
}
td { border-bottom: 1px solid var(--hx-rule); color: var(--hx-ink); vertical-align: middle; }
tfoot td { border-top: 1px solid var(--hx-ink-2); border-bottom: 0; font-weight: 600; }
tbody tr:hover td { background: rgba(15, 35, 64, 0.025); }

/* ── Controls ──────────────────────────────────────────────────────────── */
.btn, button {
  border-radius: 4px;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 13.5px;
  letter-spacing: 0;
  text-transform: none;
}
.btn-primary { background: var(--hx-crest); color: #ffffff; border: 1px solid var(--hx-crest); }
.btn-primary:hover { background: var(--hx-midnight); color: #ffffff; }
.btn-secondary { background: var(--hx-ivory); color: var(--hx-ink); border: 1px solid var(--hx-rule-dk); }
.btn-secondary:hover { background: var(--hx-linen); }
.btn-ghost { background: transparent; color: var(--hx-ink-2); border: 1px solid var(--hx-rule-dk); }
.btn-ghost:hover { background: var(--hx-linen); color: var(--hx-ink); }
.btn-danger { background: transparent; color: var(--hx-oxblood); border: 1px solid #d8ab9f; }
.btn-danger:hover { background: #f6ebe6; }

input, select, textarea {
  font-size: 15px;
  background: #ffffff;
  border: 1px solid var(--hx-rule-dk);
  border-radius: 4px;
  color: var(--hx-ink);
}
input:focus, select:focus, textarea:focus,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  border-color: var(--hx-crest);
  box-shadow: 0 0 0 3px rgba(15, 35, 64, 0.10);
}
label { color: var(--hx-ink-2); font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; }
/* Checkboxes and radios keep their native size; the text-field rules above
   are not meant for them. */
input[type="checkbox"], input[type="radio"] {
  width: auto; height: auto; padding: 0; border: 0; background: none;
  box-shadow: none; accent-color: var(--hx-crest);
}

/* ── Status ────────────────────────────────────────────────────────────── */
.badge {
  border-radius: 3px; font-weight: 600; font-size: 11px;
  letter-spacing: 0.05em; text-transform: uppercase;
}
.flash { border-radius: 4px; font-size: 14.5px; }
.progress-wrap { border-radius: 2px; height: 4px; background: var(--hx-linen); }
.progress-bar  { border-radius: 2px; height: 4px; background: var(--hx-crest); }

/* A thin gold rule beneath page titles — the only ornament. */
.topbar-title::after, .hx-rule {
  content: "";
  display: block;
  width: 32px;
  height: 1px;
  margin-top: 8px;
  background: var(--hx-gold);
}

@media print {
  body { background: #fff; }
  .sidebar, .topbar-actions { display: none; }
}

/* ── The crest ─────────────────────────────────────────────────────────────
   static/img/crest.png is the brand mark everywhere (never logo.png, the
   legacy wordmark). Pages were written for a square tile mark; this rule
   wins over every page-level size, tile background, or inline size so the
   crest always renders at its true proportions. Headers: 44px tall.
   Centred marks on sign-in, dark, and error pages: .crest-lg. */
img[src*="/img/crest.png"] {
  height: 44px !important;
  width: auto !important;
  max-width: none !important;
  background: none !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  object-fit: contain;
  flex-shrink: 0;
}
img[src*="/img/crest.png"].crest-lg {
  height: 96px !important;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

/* ── Public site ───────────────────────────────────────────────────────────
   Shared pieces of the public pages (templates/public/index.html, deal.html,
   _footer.html), added 2026-10-29 for the boutique-firm redesign. Every
   selector here is prefixed pub- (or is .photo-slot) so nothing reaches the
   admin or the investor portal. Page-specific layout lives in each page's
   own <style>; this block holds the masthead, buttons, type and the photo
   slots that more than one page uses.

   PHOTO SLOTS. Each picture position on the public site is a
     <figure class="photo-slot" data-slot="hero|principal|field|process"
             style="--slot-ratio: 16/9">
       <img src=".../static/img/art/cross-section.svg" alt="...">
       <figcaption>Illustrative technical drawing</figcaption>
     </figure>
   and currently shows one of the technical drawings in static/img/art/.
   To swap in a real photograph of Tanner's own fieldwork:
     1. Save it under static/img/photos/ (JPEG, about 2400px on the long
        edge, quality 80, EXIF location stripped unless it is meant to show).
     2. Point the <img> src at it and rewrite the alt text to say what it is.
     3. Add data-kind="photo" to the <figure>. The image then fills the slot
        at --slot-ratio with object-fit: cover; set --slot-ratio on the figure
        to match the crop you want.
     4. Replace the figcaption with a true caption (what, where, when). A
        generated image must instead carry exactly:
        "Illustrative image; not a BEC well or property."
        (docs/image-prompts.md has the prompts and the rule.)
   Bump CACHE_VERSION in static/js/sw.js whenever these assets change.
   ───────────────────────────────────────────────────────────────────────── */
:root {
  --pub-max:      1200px;
  --pub-gutter:   40px;
  --pub-on-dark:  #fdfcf9;
  --pub-dim-dark: rgba(253, 252, 249, 0.68);
  --pub-faint-dark: rgba(253, 252, 249, 0.5);
  --pub-rule-dark: rgba(253, 252, 249, 0.13);
  --pub-gold-rule: rgba(198, 150, 77, 0.45);
}
.pub-wrap { max-width: var(--pub-max); margin: 0 auto; padding: 0 var(--pub-gutter); }

/* Masthead: midnight bar, crest, serif wordmark, Inter navigation. */
.pub-mast {
  position: sticky; top: 0; z-index: 50;
  background: var(--hx-midnight);
  border-bottom: 1px solid var(--pub-gold-rule);
}
.pub-mast-inner {
  max-width: var(--pub-max); margin: 0 auto; padding: 0 var(--pub-gutter);
  height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.pub-lockup { display: flex; align-items: center; gap: 14px; text-decoration: none; flex-shrink: 0; min-height: 44px; }
.pub-lockup:hover { text-decoration: none; }
.pub-wordmark {
  font-family: var(--font-head) !important; font-size: 23px; font-weight: 600; line-height: 1;
  letter-spacing: 0.01em; color: var(--pub-on-dark);
}
.pub-wordmark-sub {
  font-family: var(--font-ui); font-size: 9.5px; font-weight: 600; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--hx-gold-lt); margin-top: 5px;
}
.pub-nav { display: flex; align-items: center; gap: 30px; }
.pub-nav a {
  font-family: var(--font-ui); font-size: 12px; font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--pub-dim-dark); text-decoration: none;
  padding: 14px 0; white-space: nowrap; border-bottom: 1px solid transparent;
}
.pub-nav a:hover { color: var(--pub-on-dark); border-bottom-color: var(--hx-gold-lt); }
.pub-mast-right { display: flex; align-items: center; gap: 22px; }
.pub-mast-link {
  font-family: var(--font-ui); font-size: 12px; font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--pub-dim-dark); text-decoration: none; white-space: nowrap;
}
.pub-mast-link:hover { color: var(--pub-on-dark); }

/* Buttons: square, hairline, never pills or shadows. */
.pub-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 46px; padding: 0 24px; border-radius: 2px;
  font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; text-decoration: none; white-space: nowrap;
  border: 1px solid var(--hx-crest); background: var(--hx-crest); color: #fff;
  transition: background .15s, color .15s, border-color .15s;
}
.pub-btn:hover { background: var(--hx-midnight); border-color: var(--hx-midnight); color: #fff; text-decoration: none; }
.pub-btn-light { background: var(--pub-on-dark); border-color: var(--pub-on-dark); color: var(--hx-midnight); }
.pub-btn-light:hover { background: transparent; border-color: var(--pub-on-dark); color: var(--pub-on-dark); }
.pub-btn-line-dark { background: transparent; border-color: rgba(253,252,249,0.38); color: var(--pub-on-dark); }
.pub-btn-line-dark:hover { background: transparent; border-color: var(--hx-gold-lt); color: var(--pub-on-dark); }
.pub-btn-line { background: transparent; border-color: var(--hx-rule-dk); color: var(--hx-ink); }
.pub-btn-line:hover { background: transparent; border-color: var(--hx-ink); color: var(--hx-ink); }
.pub-btn-gold { background: transparent; border-color: var(--hx-gold-lt); color: var(--pub-on-dark); }
.pub-btn-gold:hover { background: var(--hx-gold-lt); border-color: var(--hx-gold-lt); color: var(--hx-midnight); }
.pub-arrow { width: 14px; height: 1px; background: currentColor; position: relative; display: inline-block; }
.pub-arrow::after {
  content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px;
  border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg);
}

/* Type. */
.pub-eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-ui); font-size: 11.5px; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--hx-ink-3);
}
.pub-eyebrow::before { content: ""; width: 36px; height: 1px; background: var(--hx-gold); flex-shrink: 0; }
.pub-dark .pub-eyebrow { color: var(--pub-dim-dark); }
.pub-dark .pub-eyebrow::before { background: var(--hx-gold-lt); }
.pub-display, .pub-h2 {
  font-family: var(--font-head); font-weight: 500; letter-spacing: -0.005em;
  color: var(--hx-ink); font-variant-numeric: lining-nums proportional-nums;
}
.pub-display { font-size: 66px; line-height: 1.02; }
.pub-h2 { font-size: 52px; line-height: 1.04; }
.pub-display em, .pub-h2 em { font-style: italic; font-weight: 500; }
.pub-dark .pub-display, .pub-dark .pub-h2 { color: var(--pub-on-dark); }
.pub-deck { font-family: var(--font-ui); font-size: 17px; line-height: 1.7; color: var(--hx-ink-2); }
.pub-dark .pub-deck { color: var(--pub-dim-dark); }

/* Dark bands and the contour texture. */
.pub-dark { background: var(--hx-midnight); color: var(--pub-dim-dark); }
.pub-textured { position: relative; isolation: isolate; overflow: hidden; }
.pub-textured::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("../img/art/contour-texture.svg") center / cover no-repeat;
  opacity: 0.16;
}

/* Section heads: number, label, hairline. */
.pub-sechead {
  display: grid; grid-template-columns: 64px 1fr; align-items: baseline;
  border-top: 1px solid var(--hx-ink); padding-top: 14px; margin-bottom: 48px;
}
.pub-sechead-num, .pub-sechead-label {
  font-family: var(--font-ui); font-size: 11.5px; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--hx-ink);
}
.pub-sechead-num { color: var(--hx-gold); font-variant-numeric: lining-nums tabular-nums; }
.pub-dark .pub-sechead { border-top-color: var(--pub-gold-rule); }
.pub-dark .pub-sechead-label { color: var(--pub-on-dark); }
.pub-dark .pub-sechead-num { color: var(--hx-gold-lt); }

/* Photo slots (see the comment at the top of this block). */
.photo-slot { margin: 0; position: relative; }
.photo-slot > img {
  display: block; width: 100%; height: auto;
  background: var(--hx-midnight); border: 1px solid var(--pub-gold-rule);
}
.photo-slot[data-kind="photo"] > img {
  aspect-ratio: var(--slot-ratio, 4 / 3); object-fit: cover; border-color: transparent;
}
.photo-slot > figcaption {
  display: flex; justify-content: space-between; gap: 16px; margin-top: 12px;
  font-family: var(--font-ui); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--hx-ink-3);
}
.pub-dark .photo-slot > figcaption { color: var(--pub-faint-dark); }

/* Mobile menu toggle. */
.pub-burger {
  display: none; width: 44px; height: 44px; padding: 0; margin-right: -10px;
  background: none; border: 0; border-radius: 0; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.pub-burger span { display: block; width: 22px; height: 1px; background: var(--pub-on-dark); transition: transform .2s, opacity .2s; }
.pub-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.pub-burger.open span:nth-child(2) { opacity: 0; }
.pub-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1080px) {
  .pub-nav { gap: 20px; }
  .pub-display { font-size: 54px; }
  .pub-h2 { font-size: 44px; }
}
@media (max-width: 900px) {
  :root { --pub-gutter: 28px; }
  .pub-nav, .pub-mast-right { display: none; }
  .pub-burger { display: flex; }
}
@media (max-width: 640px) {
  :root { --pub-gutter: 20px; }
  .pub-mast-inner { height: 64px; }
  .pub-wordmark { font-size: 19px; }
  .pub-display { font-size: 41px; line-height: 1.05; }
  .pub-h2 { font-size: 34px; line-height: 1.08; }
  .pub-deck { font-size: 16px; }
  .pub-sechead { grid-template-columns: 48px 1fr; margin-bottom: 32px; }
  .photo-slot > figcaption { flex-direction: column; gap: 2px; font-size: 10px; }
}
@media (max-width: 360px) {
  .pub-wordmark { font-size: 17px; }
}