/* ==========================================================================
   BrynnSmith Media — brand layer
   --------------------------------------------------------------------------
   Loaded AFTER custom.css. Overrides design tokens only. custom.css is never
   edited, so improvements to the base suite keep flowing into this fork.

   Palette source: sampled with a pixel histogram from the full-page screenshot
   of brynnsmith02.wixsite.com/brynn-smith, saved at
   old-site/homepage-fullpage-screenshot.png. These are her real colors.

     #393D32  dark olive   ~60% of her current page
     #585C3F  olive        the Digital Design band
     #BCB19B  sand         the Photography card panel
     #663C29  rust         accent dot and warm blocks
     #473528  deep brown   block behind the intro
     #EFF1F2  off-white    her body and heading text

   Contrast, measured not assumed (WCAG AA needs 4.5:1 for body text):

     off-white #EFF1F2 on dark olive .............. 9.82  pass
     sand      #BCB19B on dark olive .............. 5.25  pass  (muted text)
     tan       #D8B98F on dark olive .............. 5.96  pass  (links)
     white             on rust #A85A38 ............ 5.02  pass  (button fill)
     white             on rust hover #8E4A2D ...... 6.63  pass
     ink       #2B2E25 on cream #FAF7F1 ........... 12.92 pass  (back office)
     rust      #A85A38 on cream #FAF7F1 ........... 4.69  pass

   NOTE, and this corrects the first draft of BRAND.md: rust #A85A38 as TEXT on
   the dark olive is 2.22:1 and fails badly. It is only ever used as a fill
   behind white text, or as a non-text graphic mark. Links on dark use the tan.
   ========================================================================== */

:root {
  /* ---- Backgrounds: the back office stays light, re-tinted warm ---------- */
  --bg-primary:      #FAF7F1;   /* warm cream, replaces the cool grey */
  --bg-secondary:    #FFFFFF;
  --bg-tertiary:     #F1EBE0;   /* sand tint, replaces the sky tint */
  --bg-card:         #FFFFFF;
  --bg-card-hover:   #F1EBE0;
  --bg-input:        #FFFFFF;
  --bg-overlay:      rgba(57, 61, 50, 0.55);

  /* ---- Brand accent -----------------------------------------------------
     custom.css calls these --gold-* for historical reasons. Every component
     that referenced them now turns rust. Do not rename them here; renaming
     means forking custom.css, which is the thing this file exists to avoid. */
  --gold:            #A85A38;   /* her rust, lifted so white text passes on it */
  --gold-hover:      #8E4A2D;
  --gold-champagne:  #C4714A;
  --gold-bronze:     #8E4A2D;
  --gold-tint:       rgba(168, 90, 56, 0.10);
  --gold-glow:       rgba(168, 90, 56, 0.18);

  /* ---- Warm secondary ---------------------------------------------------- */
  --amber:           #BCB19B;   /* her sand */
  --amber-tint:      rgba(188, 177, 155, 0.18);

  /* ---- Text -------------------------------------------------------------- */
  --text-primary:    #2B2E25;   /* her dark olive, darkened for cream */
  --text-muted:      #5C6247;   /* 5.96 on cream */
  --text-subtle:     #5C6247;
  --text-secondary:  #5C6247;
  --text-tertiary:   #5C6247;
  --text-inverse:    #FFFFFF;
  --card-bg:         #FFFFFF;

  /* ---- Borders ----------------------------------------------------------- */
  --border:          #E2DACB;
  --border-light:    #F1EBE0;
  --border-subtle:   #F1EBE0;
  --border-gold:     rgba(168, 90, 56, 0.35);

  /* ---- Status: kept functional, warmed slightly to sit in the family ----- */
  --success:         #4A6741;
  --success-bg:      rgba(74, 103, 65, 0.10);
  --warning:         #B8843C;
  --warning-bg:      rgba(184, 132, 60, 0.14);
  --danger:          #A33A2A;
  --danger-bg:       rgba(163, 58, 42, 0.08);

  /* ---- Typography --------------------------------------------------------
     Her site pairs a high-contrast Didone serif over a plain grotesque. That
     pairing is the strongest thing about her current design, so it carries.
     Playfair Display is the closest free match to the serif; Wix does not
     expose the family name, so this is a match by eye, not an identification. */
  --font-family:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display:    'Playfair Display', Georgia, 'Times New Roman', serif;

  /* ---- Shadows: warm, not blue ------------------------------------------- */
  --shadow-sm:       0 1px 3px rgba(43, 46, 37, 0.07);
  --shadow-md:       0 4px 12px rgba(43, 46, 37, 0.09);
  --shadow-lg:       0 12px 32px rgba(43, 46, 37, 0.12);

  /* ---- Public-site palette ----------------------------------------------
     Brynn's choice, 2026-08-15: warm sand ground (option B), with her dark
     olive as the accent in place of the rust. The public site used to be
     dark-side-up, olive page and cream visitor; this flips it.

     --bsm-rust and --bsm-rust-deep KEEP THEIR NAMES and now hold the sage.
     Every accent rule in this file reads from them, and renaming them means
     touching forty rules to no benefit. The names are wrong; the cascade is
     right. Same reason --gold-* upstream is rust and not gold.

     THE ACCENT HAS TWO STEPS, and they are not interchangeable.

       --bsm-rust        a pale FILL. Her ink on it is 6.7:1. It is 1.85:1
                         against the ground, so it can never be text and never
                         a line that has to be seen.
       --bsm-accent-deep the same sage taken dark enough to be TEXT or a border,
                         4.96:1 on the ground. Never a fill behind white type.

     Reach for the wrong one and it does not merely look off, it disappears.
     That is why they are commented rather than left to be inferred. */
  --bsm-dark:        #393D32;   /* her old page ground. No longer the accent. */
  --bsm-dark-deep:   #2B2E25;
  --bsm-olive:       #585C3F;
  --bsm-sand:        #BCB19B;
  --bsm-sand-pale:   #EDE4D3;   /* the tinted band and the logo-card field */
  --bsm-cream:       #F7F2E8;   /* THE GROUND. The page is made of this now. */
  --bsm-rust:        #A9BA9B;   /* accent FILL: buttons, active filter chip */
  --bsm-rust-deep:   #97A98A;   /* accent fill, hover */
  --bsm-accent-deep: #5B6E52;   /* accent as text, borders, focus and hover */
  --bsm-link:        #2B2E25;   /* link, wordmark and nav text. NOT the accent:
                                   these only looked like one value because the
                                   accent happened to be near-black. Change the
                                   accent and this must stay readable on sand. */
  --bsm-brown:       #473528;
  --bsm-tan:         #2B2E25;   /* focus ring, must read on sand */
  --bsm-on-dark:     #EFF1F2;   /* only used on the two dark bands now */

  /* Added with the light ground. */
  --bsm-ink:         #33362B;   /* headings and strong text, 10.6:1 on sand */
  --bsm-body:        #636654;   /* running text, 5.29:1 on sand */
  --bsm-label:       #74725F;   /* eyebrows and field labels, 4.4:1 */
  --bsm-hair:        #DFD5C0;   /* hairlines on the ground */
  --bsm-hair-strong: #C6B9A0;   /* hairlines that need to be seen */
  --bsm-anchor:      #3A3D30;   /* the closing band and the footer */
  --bsm-on-anchor:   #CBC3AE;   /* text on those two bands */
}

/* Headings take the display serif everywhere, including the back office. */
h1, h2, h3, .page-title, .card-title {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}

/* ==========================================================================
   PUBLIC HOMEPAGE
   Namespaced under .bsm so nothing here can reach the back office.
   ========================================================================== */

.bsm {
  background: var(--bsm-cream);
  color: var(--bsm-ink);
  font-family: var(--font-family);
  line-height: 1.6;
  /* Backstop for the 1100px-and-down overflow that grid children cause by
     defaulting to min-width:auto. The real fixes are min-width:0 below. */
  overflow-x: clip;
}

.bsm *,
.bsm *::before,
.bsm *::after { box-sizing: border-box; }

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

.bsm-wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Colour is set explicitly, not inherited. custom.css paints headings with
   --text-primary, and inheriting it here has broken the page in both
   directions: it was near-invisible when the page was olive, and it is the
   wrong ink now that the page is sand. Stated outright either way. */
.bsm h1, .bsm h2, .bsm h3 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--bsm-ink);
}
.bsm-section-cream h1,
.bsm-section-cream h2,
.bsm-section-cream h3 { color: var(--bsm-ink); }

.bsm h1 { font-size: clamp(2.6rem, 6vw, 5rem); }
.bsm h2 { font-size: clamp(2rem, 4vw, 3.2rem); }
.bsm h3 { font-size: clamp(1.15rem, 2vw, 1.5rem); }

/* Explicit, for the same reason as the headings. --bsm-body is 5.29:1 on the
   sand ground. Measured, not assumed. */
.bsm p { margin: 0 0 1rem; color: var(--bsm-body); }
.bsm-section-cream p { color: var(--bsm-body); }

/* Links, and the one thing the olive accent cost.

   The rust used to be what made a link look like a link. The accent is now
   olive, and an olive link against olive-grey body text on sand is a 2.34:1
   difference: a shade, not a signal. So a link in running text is marked by an
   underline rather than by hue.

   The underline is opt-in, not global, because a whole portfolio card is a
   single <a> wrapping its own title and caption, and so are the wordmark and
   the nav. Underlining every anchor underlines all of that too. Structural
   links have their own affordance and take the colour alone.

   Buttons are excluded throughout: a .bsm-btn-primary is white on the accent
   fill, and letting the link colour win made the CTA accent-on-accent, a 1:1
   invisible button. */
.bsm a { text-decoration: none; }
/* The deep accent, not the ink. It is a step darker than body copy and than
   headings, which is what carries the underlined prose links. Note this rule
   outranks .bsm-wordmark and .bsm-nav-links a on specificity, so it is what
   actually paints the masthead and the nav too. */
.bsm a:not(.bsm-btn) { color: var(--bsm-link); text-decoration: none; }
.bsm p a:not(.bsm-btn),
.bsm-lede a:not(.bsm-btn),
.bsm-facts li a:not(.bsm-btn),
.bsm-meta-list dd a:not(.bsm-btn) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.bsm p a:not(.bsm-btn):hover,
.bsm-lede a:not(.bsm-btn):hover { text-decoration-thickness: 2px; }

.bsm-eyebrow {
  font-family: var(--font-family);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bsm-label);
  margin: 0 0 1rem;
}

.bsm-lede { font-size: 1.15rem; color: var(--bsm-body); max-width: 60ch; }

/* ---- Buttons ------------------------------------------------------------
   The primary button is LIGHT, with dark type on it. That is a consequence of
   the accent Brynn chose on 2026-08-15: a sage pale enough to read as sage
   cannot carry a white label, so the label is her ink instead, at 6.7:1.

   If the accent is ever taken dark again, the label has to go back to white in
   all four places below, and the two on .bsm-nav-links exist only because the
   nav link colour outranks .bsm-btn-primary on specificity. */
.bsm-btn {
  display: inline-block;
  padding: 15px 30px;
  border: 0;
  border-radius: 2px;
  font-family: var(--font-family);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.16s ease, transform 0.16s ease;
  text-align: center;
}
.bsm-btn-primary { background: var(--bsm-rust); color: var(--bsm-link); }
.bsm-btn-primary:hover { background: var(--bsm-rust-deep); color: var(--bsm-link); text-decoration: none; transform: translateY(-1px); }
/* The outlined button is drawn for whatever it is sitting on, and on this site
   that is two different things. On the sand ground it is dark on light; on the
   closing band and the footer, which stayed dark, it has to go back to light.
   Both are stated. Before 2026-08-15 only the first was, so "About me" on /work
   and "LinkedIn" on /about were dark text on the dark band: present, clickable
   and invisible. That bug predates the palette change and was in every option. */
.bsm-btn-ghost {
  background: transparent;
  color: var(--bsm-ink);
  border: 1px solid var(--bsm-hair-strong);
}
.bsm-btn-ghost:hover { border-color: var(--bsm-accent-deep); color: var(--bsm-link); text-decoration: none; }
.bsm-btn:focus-visible { outline: 3px solid var(--bsm-tan); outline-offset: 3px; }

/* ---- Nav ---------------------------------------------------------------- */
.bsm-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(247, 242, 232, 0.93);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--bsm-hair);
}
.bsm-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 68px;
}
.bsm-wordmark {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--bsm-ink);
  white-space: nowrap;
}
.bsm-wordmark:hover { text-decoration: none; color: var(--bsm-ink); }
.bsm-nav-links { display: flex; align-items: center; gap: 28px; min-width: 0; }
.bsm-nav-links a {
  font-size: 0.9rem;
  color: var(--bsm-body);
  letter-spacing: 0.04em;
}
.bsm-nav-links a:hover { color: var(--bsm-ink); text-decoration: none; }
.bsm-nav-cta { padding: 10px 20px; font-size: 0.85rem; }
/* The nav link colour outranks .bsm-btn-primary on specificity, so the CTA
   label took the nav colour instead of the button's. Restate it at equal
   weight. It is the ink now, not white, for the reason above. */
.bsm-nav-links a.bsm-btn-primary { color: var(--bsm-link); }
.bsm-nav-links a.bsm-btn-primary:hover { color: var(--bsm-link); }

/* ---- Hero --------------------------------------------------------------- */
.bsm-hero { padding: 84px 0 72px; }
.bsm-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  align-items: start;
}
.bsm-hero-copy { min-width: 0; }   /* stops the 1100px overflow */
/* Portfolio-only hero: no form card beside it, so the two-column split would
   leave 43% of the row empty. One column, held to a readable measure rather
   than letting the intro run the full 1100px. */
.bsm-hero-grid.is-solo { grid-template-columns: 1fr; }
.bsm-hero-grid.is-solo .bsm-hero-copy { max-width: 60ch; }
.bsm-hero h1 { margin-bottom: 20px; }
.bsm-hero .bsm-lede { margin-bottom: 28px; }
.bsm-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 32px; }

/* ---- Quote form, above the fold ----------------------------------------- */
.bsm-form-card {
  background: var(--bsm-cream);
  color: var(--bsm-dark-deep);
  border-radius: 3px;
  padding: 32px;
  box-shadow: 0 24px 60px rgba(20, 22, 17, 0.35);
  min-width: 0;
}
.bsm-form-card h2 { font-size: 1.6rem; margin-bottom: 6px; color: var(--bsm-dark-deep); }
.bsm-form-card .bsm-form-sub { font-size: 0.92rem; color: #5C6247; margin-bottom: 22px; }
.bsm-field { margin-bottom: 15px; }
.bsm-field label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #5C6247;
  margin-bottom: 6px;
}
.bsm-field input,
.bsm-field select,
.bsm-field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #D8CDBA;
  border-radius: 2px;
  background: #FFFFFF;
  color: var(--bsm-dark-deep);
  font-family: var(--font-family);
  font-size: 0.95rem;
}
.bsm-field textarea { min-height: 96px; resize: vertical; }
.bsm-field input:focus,
.bsm-field select:focus,
.bsm-field textarea:focus {
  outline: none;
  border-color: var(--bsm-accent-deep);
  box-shadow: 0 0 0 3px rgba(168, 90, 56, 0.18);
}
.bsm-form-card .bsm-btn { width: 100%; margin-top: 6px; }
/* The whole card is a cream surface sitting inside a dark section, so every
   piece of text in it needs the cream treatment. Written at .bsm-form-card
   depth deliberately: a bare `.bsm-form-foot` is one class and loses to
   `.bsm p`, which painted this line off-white on cream at 1.05:1. */
.bsm-form-card p,
.bsm-form-card label,
.bsm-form-card h2 { color: var(--bsm-dark-deep); }
.bsm-form-card .bsm-form-sub { color: #5C6247; }
.bsm-form-card .bsm-form-foot { font-size: 0.78rem; color: #5C6247; margin: 14px 0 0; }
.bsm-form-card a:not(.bsm-btn) { color: var(--bsm-link); }

/* The honeypot. Off-screen rather than display:none, because some bots skip
   hidden fields but happily fill this one. Hidden from AT and from tab order. */
.bsm-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ---- Trust strip -------------------------------------------------------- */
.bsm-trust { background: var(--bsm-dark-deep); border-block: 1px solid rgba(188, 177, 155, 0.16); }
.bsm-trust-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  padding: 26px 0;
}
.bsm-trust-item { min-width: 0; font-size: 0.88rem; color: var(--bsm-sand); }
.bsm-trust-item strong { display: block; color: var(--bsm-on-dark); font-size: 0.95rem; margin-bottom: 2px; }

/* ---- Sections ----------------------------------------------------------- */
.bsm-section { padding: 84px 0; }
.bsm-section-olive { background: var(--bsm-olive); }
/* Sand measures only 3.28:1 against this lighter olive. Off-white is 6.14:1. */
.bsm-section-olive .bsm-lede { color: var(--bsm-on-dark); }
.bsm-section-olive .bsm-stat span { color: var(--bsm-on-dark); }
/* Was the one light section on a dark page. Now that the page is sand, its job
   is the opposite: it is the step of contrast against the ground. */
.bsm-section-cream { background: var(--bsm-sand-pale); color: var(--bsm-ink); }
.bsm-section-cream .bsm-eyebrow { color: var(--bsm-label); }
.bsm-section-cream .bsm-lede { color: var(--bsm-body); }
/* The deep step, not the fill. The fill as text on this band is 1.63:1. */
.bsm-section-cream a:not(.bsm-btn) { color: var(--bsm-link); }
.bsm-section-head { max-width: 62ch; margin-bottom: 44px; }
.bsm-section-head h1,
.bsm-section-head h2 { margin-bottom: 14px; }

/* /work, /about and each piece each carry a real <h1> now, which they did not
   before: they opened on an <h2> with no <h1> above it anywhere on the page.
   That is worth fixing on a site whose whole job is to be read by a stranger
   who arrived from a link, and screen readers and search both use it.
   The hero <h1> keeps the display size; an <h1> that is a page heading rather
   than her name takes the <h2> scale, so the semantics changed and the design
   did not. */
.bsm-section-head h1,
.bsm-detail-meta h1 { font-size: clamp(2rem, 4vw, 3.2rem); }

/* ---- Services ----------------------------------------------------------- */
.bsm-services {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  background: rgba(188, 177, 155, 0.22);
}
.bsm-service {
  min-width: 0;
  background: var(--bsm-dark);
  padding: 32px 28px;
}
.bsm-service h3 { margin-bottom: 10px; }
.bsm-service p { color: var(--bsm-sand); font-size: 0.94rem; margin: 0; }
.bsm-service-num {
  font-family: var(--font-display);
  font-size: 0.9rem;
  color: var(--bsm-tan);   /* rust would be 2.22:1 here. Tan is 5.96:1. */
  display: block;
  margin-bottom: 14px;
}

/* ---- Process ------------------------------------------------------------ */
.bsm-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
}
.bsm-step { min-width: 0; }
.bsm-step-num {
  font-family: var(--font-display);
  font-size: 3rem;
  line-height: 1;
  color: var(--bsm-sand);
  display: block;
  margin-bottom: 14px;
}
.bsm-section-cream .bsm-step-num { color: var(--bsm-accent-deep); }
.bsm-step h3 { margin-bottom: 8px; }
.bsm-step p { font-size: 0.94rem; margin: 0; }

/* ---- Portfolio ---------------------------------------------------------- */
.bsm-work {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}
.bsm-case { min-width: 0; }
.bsm-case-img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bsm-sand-pale);
  border: 1px solid var(--bsm-hair);
  margin-bottom: 14px;
}
.bsm-case-img img { width: 100%; height: 100%; object-fit: cover; }

/* A logo or a poster is an artifact, not a photograph. Cropping one to fill a
   4:3 box cuts off the thing the client paid for: the Museum of Idaho flyer is
   a tall poster and a cover-crop ate its header and its call to action.
   Contain it, on a neutral field, with room to breathe. Applies to Branding,
   Design and Web. Photography and Social still crop, which is correct for
   them. */
.bsm-case-img.is-mark { background: var(--bsm-sand-pale); padding: 12%; }
.bsm-case-img.is-mark img { object-fit: contain; }
.bsm-section-cream .bsm-case-img.is-mark { background: var(--bsm-sand-pale); }
.bsm-case h3 { font-size: 1.1rem; margin-bottom: 4px; }
.bsm-case-scope {
  font-family: var(--font-family);
  font-size: 0.82rem;
  color: var(--bsm-body);
  letter-spacing: 0.02em;
  margin: 0;
}
.bsm-section-cream .bsm-case-scope { color: var(--bsm-body); }

/* ---- Portfolio filters -------------------------------------------------- */
.bsm-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; }
.bsm-filter {
  padding: 8px 18px;
  /* Left as the original translucent sand deliberately. It is a faint border,
     about 1.1:1 against the ground, so the inactive filters read as words more
     than as buttons. That is what Brynn approved and it is not a palette
     question, so it is not being changed here. Worth raising with her on its
     own: --bsm-hair-strong is the drop-in if she wants them to look clickable. */
  border: 1px solid rgba(188, 177, 155, 0.35);
  border-radius: 2px;
  font-size: 0.85rem;
  color: var(--bsm-body);
  letter-spacing: 0.03em;
}
.bsm-filter:hover { border-color: var(--bsm-accent-deep); color: var(--bsm-link); text-decoration: none; }
.bsm a.bsm-filter.is-active { background: var(--bsm-rust); border-color: var(--bsm-rust); color: var(--bsm-link); }

/* ---- Single project ----------------------------------------------------- */
.bsm-detail {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 48px;
  align-items: start;
}
.bsm-detail-media, .bsm-detail-meta { min-width: 0; }
.bsm-detail-media img { width: 100%; background: var(--bsm-sand-pale); }
.bsm-detail-meta h1,
.bsm-detail-meta h2 { margin-bottom: 20px; }
.bsm-meta-list { margin: 0 0 22px; padding: 0; }
.bsm-meta-list dt {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bsm-label);
  margin-top: 14px;
}
.bsm-meta-list dd { margin: 3px 0 0; color: var(--bsm-ink); }

/* ---- Why / stats -------------------------------------------------------- */
.bsm-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin-top: 40px;
}
/* A 2px rule carrying the eye across a row of numbers is meant to be seen, so
   it takes the deep step. The pale fill is 1.85:1 here and would read as a
   smudge. Same reasoning for .bsm-looking below. */
.bsm-stat { min-width: 0; border-top: 2px solid var(--bsm-accent-deep); padding-top: 18px; }
.bsm-stat strong {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 500;
  display: block;
  line-height: 1;
  margin-bottom: 6px;
}
.bsm-stat span { font-size: 0.9rem; color: var(--bsm-body); }
.bsm-section-cream .bsm-stat span { color: var(--bsm-body); }

/* ---- CTA band -----------------------------------------------------------
   The closing band and the footer stay dark on purpose. A page that is light
   the whole way down has nowhere to land, and the olive is what keeps this
   hers rather than another white portfolio template.

   Everything inside them has to be restated, because the rules above now
   assume the sand ground. That is what the block at the end of this file does. */
.bsm-cta { background: var(--bsm-anchor); padding: 72px 0; text-align: center; }
.bsm-cta h2 { margin-bottom: 14px; color: var(--bsm-cream); }
.bsm-cta p { color: var(--bsm-on-anchor); max-width: 52ch; margin: 0 auto 28px; }

/* ---- Footer ------------------------------------------------------------- */
.bsm-footer { background: var(--bsm-anchor); padding: 56px 0 32px; font-size: 0.9rem; }
.bsm-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
.bsm-footer-col { min-width: 0; }
.bsm-footer h3 {
  font-family: var(--font-family);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bsm-cream);
  margin-bottom: 14px;
}
.bsm-footer ul { list-style: none; margin: 0; padding: 0; }
.bsm-footer li { margin-bottom: 8px; color: var(--bsm-on-anchor); }
.bsm-footer-bar {
  border-top: 1px solid rgba(188, 177, 155, 0.18);
  padding-top: 22px;
  color: var(--bsm-on-anchor);
  font-size: 0.82rem;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
}

/* Ken's build credit. Bottom right of every client site. */
.bsm-powered { color: rgba(188, 177, 155, 0.75); }
.bsm-powered a { color: var(--bsm-sand); }
.bsm-powered a:hover { color: var(--bsm-on-dark); }

/* ==========================================================================
   BUILD CREDIT, BACK OFFICE
   Bottom of the sidebar, under Log out. The logo carries the name, so the
   text above it is only "Powered by".
   ========================================================================== */

.tms-credit {
  display: block;
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--border-light);
  text-align: center;
  text-decoration: none;
}
.tms-credit:hover { text-decoration: none; }
.tms-credit-label {
  display: block;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.35rem;
}
/* The fade sits on the image, not the wrapper. A wrapper opacity of 0.75
   composited the label down to 3.6:1, under the 4.5:1 small-text floor, which
   is an odd way to fail an accessibility check: the colour was fine and the
   transparency broke it. */
.tms-credit img {
  display: block;
  width: 100%;
  max-width: 132px;
  height: auto;
  margin: 0 auto;
  opacity: 0.8;
  transition: opacity 0.16s ease;
}
.tms-credit:hover img { opacity: 1; }

/* ==========================================================================
   PLACEHOLDER / ILLUSTRATIVE NOTICES
   These are deliberately loud. The playbook rule is that nothing invented
   ships, so an unconfirmed value is visibly marked rather than quietly faked.
   The notice, this CSS, and tests/test_placeholders.py get deleted together on
   the day the real values land. Never one without the others.
   ========================================================================== */

.bsm-placeholder {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 9px;
  border: 1px dashed var(--bsm-tan);
  border-radius: 2px;
  background: rgba(216, 185, 143, 0.12);
  color: var(--bsm-tan);
  font-family: var(--font-family);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.bsm-section-cream .bsm-placeholder,
.bsm-form-card .bsm-placeholder {
  border-color: var(--bsm-rust);
  background: rgba(168, 90, 56, 0.10);
  color: var(--bsm-link);
}

.bsm-notice {
  background: rgba(57, 61, 50, 0.10);
  border: 1px dashed var(--bsm-rust);
  border-radius: 2px;
  padding: 14px 18px;
  margin-bottom: 28px;
  font-size: 0.85rem;
  color: var(--bsm-ink);
}
.bsm-section-cream .bsm-notice { color: var(--bsm-ink); }
.bsm-notice strong { color: inherit; }

/* ==========================================================================
   THE HIRING PAGES
   Added 2026-08-14 with the About page and the case study blocks.

   Measure is the thing to protect here. Everything above is short marketing
   copy where line length never becomes a problem; this is the first prose on
   the site somebody actually reads a paragraph at a time. 68ch keeps it inside
   the 65 to 75 characters that a reader can track without losing the line,
   which is also the first thing a designer notices about a designer's site.
   ========================================================================== */

.bsm-looking {
  border-left: 3px solid var(--bsm-accent-deep);
  padding-left: 18px;
  color: var(--bsm-ink);
}

/* ---- About ---- */
.bsm-about {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
.bsm-about-main, .bsm-about-side { min-width: 0; }
.bsm-about-main p { max-width: 68ch; }

.bsm-about-side h3 {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bsm-label);
  margin: 0 0 12px;
}
.bsm-about-side h3 + .bsm-facts { margin-bottom: 32px; }

.bsm-facts { list-style: none; margin: 0; padding: 0; }
.bsm-facts li {
  color: var(--bsm-ink);
  line-height: 1.6;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--bsm-hair);
}
.bsm-facts li:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.bsm-facts strong { color: var(--bsm-ink); }

/* Clients as a wrapped row of chips rather than a bullet list. A column of
   six names reads as a short list; the same six side by side read as a body of
   work, which is the honest impression given two of them are institutions. */
.bsm-client-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.bsm-client-list li {
  border: 1px solid var(--bsm-hair-strong);
  border-radius: 2px;
  padding: 10px 18px;
  color: var(--bsm-ink);
  font-weight: 500;
}

/* ---- Case study blocks on a piece ---- */
.bsm-case-study {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
  margin-top: 56px;
  padding-top: 44px;
  border-top: 1px solid var(--bsm-hair);
}
.bsm-case-study-block { min-width: 0; }
.bsm-case-study-block h2 {
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  margin: 0 0 16px;
}
.bsm-case-study-block p {
  color: var(--bsm-body);
  max-width: 68ch;
  line-height: 1.7;
}

/* One block on its own should not sit in a half-width column with dead space
   beside it. With only the brief or only the approach written, it spans. */
.bsm-case-study-block:only-child { grid-column: 1 / -1; }
.bsm-case-study-block:only-child p { max-width: 68ch; }

/* ==========================================================================
   THE TWO DARK BANDS, ON A LIGHT PAGE
   Added 2026-08-15 with Brynn's palette.

   The closing CTA and the footer are the only dark surfaces left. Every rule
   above this point now assumes the sand ground, so anything that lands inside
   these two has to be said again or it inherits the wrong half of the palette.
   This block is small on purpose: if it grows, the honest move is a proper
   .bsm-on-dark scope rather than more exceptions.
   ========================================================================== */

/* Text and links. Without this the link colour is the ink, on olive. */
.bsm-cta a:not(.bsm-btn),
.bsm-footer a:not(.bsm-btn) { color: #E7E1D0; }
.bsm-footer,
.bsm-footer p,
.bsm-footer li { color: var(--bsm-on-anchor); }
.bsm-footer .bsm-wordmark,
.bsm-footer .bsm-wordmark:hover { color: var(--bsm-cream); }

/* The primary button inverts here, and this is the rule that would otherwise
   ship broken. The band is olive and the accent is now olive, so "Email me"
   would be an olive button on an olive field. It is the only contact route on
   the site. */
.bsm-cta .bsm-btn-primary,
.bsm-footer .bsm-btn-primary { background: var(--bsm-cream); color: var(--bsm-link); }
.bsm-cta .bsm-btn-primary:hover,
.bsm-footer .bsm-btn-primary:hover { background: #FFFFFF; color: var(--bsm-link); }

/* And the outlined button goes back to the light treatment it was drawn with.
   See the note at .bsm-btn-ghost: this is the "About me" / "LinkedIn" bug. */
.bsm-cta .bsm-btn-ghost,
.bsm-footer .bsm-btn-ghost {
  color: var(--bsm-on-dark);
  border-color: rgba(239, 241, 242, 0.35);
}
.bsm-cta .bsm-btn-ghost:hover,
.bsm-footer .bsm-btn-ghost:hover {
  color: var(--bsm-sand-pale);
  border-color: var(--bsm-sand);
}

/* ==========================================================================
   RESPONSIVE
   Breakpoint at 1100 because a 3-up grid passes at 1440 and overflows at 1100.
   ========================================================================== */

@media (max-width: 1100px) {
  .bsm-hero-grid    { grid-template-columns: 1fr; gap: 40px; }
  .bsm-services,
  .bsm-work,
  .bsm-steps,
  .bsm-stats        { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bsm-trust-grid   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bsm-footer-grid  { grid-template-columns: 1fr 1fr; }
  /* This used to hide every nav link except the CTA button, which was the
     right call for a five-item nav. The portfolio nav is two short links and
     no CTA, so the same rule left phones with no navigation at all. Two links
     fit; hide nothing. */
  .bsm-nav-links { gap: 20px; }
  .bsm-hero         { padding: 56px 0 48px; }
  .bsm-section      { padding: 64px 0; }
  .bsm-detail       { grid-template-columns: 1fr; gap: 32px; }
  /* The About sidebar goes under the bio rather than squeezing beside it, and
     the two case study columns stack, at the same breakpoint the detail page
     already stacks on. */
  .bsm-about        { grid-template-columns: 1fr; gap: 40px; }
  .bsm-case-study   { grid-template-columns: 1fr; gap: 36px; }
}

@media (max-width: 700px) {
  .bsm-wrap        { padding: 0 18px; }
  /* The nav carried two links and a long wordmark, and at 390 that fitted with
     nothing to spare. About made it three and pushed the last link 6px off the
     right edge, where .bsm { overflow-x: clip } quietly cut it in half rather
     than showing a scrollbar. Tightening the gaps and the wordmark buys back
     more than three links need, so a fourth would still fit.
     Measured at 390: 396px of content in a 390px viewport, now 366. */
  .bsm-nav-inner   { gap: 12px; }
  .bsm-nav-links   { gap: 16px; }
  .bsm-wordmark    { font-size: 1.05rem; }
  .bsm-services,
  .bsm-work,
  .bsm-steps,
  .bsm-stats,
  .bsm-trust-grid,
  .bsm-footer-grid { grid-template-columns: 1fr; }
  .bsm-steps       { gap: 32px; }
  .bsm-hero        { padding: 40px 0 40px; }
  .bsm-section     { padding: 52px 0; }
  .bsm-form-card   { padding: 24px; }
  .bsm-hero-actions .bsm-btn { width: 100%; }
  .bsm-footer-bar  { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .bsm * { transition: none !important; animation: none !important; }
  .bsm-btn-primary:hover { transform: none; }
}