/* ============================================================================
   cmm.callmemandy.com — STYLES
   ----------------------------------------------------------------------------
   Built from design_handoff_cmm_home_101526, the launch version of the home
   page (Design Sheet rev v64 palette). The sections that are not written yet
   — What I do, How it works, Work, Contact — are absent from the page and
   from this file; they come back with their own package.
   A second brand, not a reskin of callmemandy.com: none of that site's Navy,
   Rust, Ember or Gold, and no Newsreader or Satisfy, may appear here. The
   build test fails if one does.

   The rule that matters most (handoff §2): a dark band contains no blue at
   all, and a light band contains no amber text at all. Lake and Amber swap by
   ground and neither crosses.
============================================================================ */

:root {
  /* Colour — Design Sheet names, and the only names to use for them. */
  --pine:        #0E3D32;  /* structure; headings on light, the dark grounds */
  --linen:       #F7F4ED;  /* Labs linen — page ground; body copy on Pine */
  --linen-shade: #F2EEE4;  /* About ground, work-row hover */
  --pine-deep:   #0A2E26;  /* footer ground, and nowhere else */
  --lake:        #2563EB;  /* links and filled buttons, light grounds only */
  --amber:       #E0A028;  /* one emphasis per section; the action colour on Pine */
  --sage:        #4F7F67;  /* geometry only — never text */
  --teal:        #0F8CA8;  /* the bubbles and the Published state */
  --charcoal:    #1F2937;  /* body copy on light grounds */
  --moss:        #4F5B57;  /* secondary copy on light grounds */
  --mint:        #A8C2B4;  /* secondary copy on Pine and Pine deep */
  --white:       #FFFFFF;
  --linen-deep:  #E8E2D0;  /* header portfolio block only */

  --hairline:      rgba(14, 61, 50, 0.14);
  --hairline-card: rgba(14, 61, 50, 0.16);
  --hairline-row:  rgba(14, 61, 50, 0.18);
  --rule-on-pine:  rgba(247, 244, 237, 0.28);

  --font-head: "DM Sans", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;

  /* Sticky header height, so in-page anchors don't land underneath it. */
  --header-offset: 90px;
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--linen);
  color: var(--charcoal);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

img { max-width: 100%; }
p, h1, h2, h3 { margin: 0; }

a { color: var(--lake); text-decoration: none; }
/* Hover is Pine — never callmemandy's Navy (handoff §5). */
a:hover { color: var(--pine); text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--lake);
  outline-offset: 3px;
}
.lab-note a:focus-visible, .site-footer a:focus-visible {
  outline-color: var(--amber);
}

section[id] { scroll-margin-top: var(--header-offset); }

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding-left: 28px;
  padding-right: 28px;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 30;
  padding: 12px 18px;
  background: var(--pine);
  color: var(--linen);
  font-weight: 600;
}
.skip-link:focus { top: 12px; color: var(--linen); }

/* ---------------------------------------------------------------- Shared */

.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pine);
  margin-bottom: 16px;
}
.eyebrow-amber { color: var(--amber); }

.amber { color: var(--amber); }

/* The callout: the logo's bubbles beside the copy, never above it and never
   in a row — a horizontal row of three dots reads as an AI tell (brand guide
   v2, Components). This is the pattern for a callout of any kind, on any
   page: prospect.css and the lab work stylesheet both load after this one.
   36px next to copy up to 22px, 44px next to anything larger. */
.callout-bubbles { position: relative; display: block; width: 36px; height: 36px; margin-top: 2px; }
.callout-bubbles-lg { width: 44px; height: 44px; }

/* The icon as texture, never as a placed mark. */
.watermark {
  position: absolute;
  display: block;
  height: auto;
  pointer-events: none;
  user-select: none;
}

/* Buttons. Every target is at least 44px tall. */
.btn-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 15px 28px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
}
.btn:hover { text-decoration: none; }
.btn-sm { padding: 11px 20px; font-size: 14.5px; }

.btn-lake { background: var(--lake); color: var(--white); }
.btn-lake:hover { background: var(--pine); color: var(--white); }

.btn-outline-pine {
  padding: 14px 26px;
  border: 1.5px solid var(--pine);
  color: var(--pine);
}
.btn-outline-pine:hover { background: var(--pine); color: var(--linen); }

.btn-amber { background: var(--amber); color: var(--charcoal); }
.btn-amber:hover { background: var(--linen); color: var(--pine); }

/* ------------------------------------------------------------ 1. Header */
/* Sticky, and one link: Portfolio. The nav items for the unwritten sections
   are not here and not in the HTML — nothing is hidden with CSS. */

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--linen);
  border-bottom: 1px solid var(--hairline);
}
.header-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 28px;
  padding-top: 12px;
  padding-bottom: 12px;
}
.header-logo { display: flex; align-items: center; flex-shrink: 0; }
.header-logo img { height: 64px; width: auto; display: block; }

/* Lab work · About · Connect · the portfolio block, in that order, pushed
   right. align-self: stretch so the portfolio block can fill the header. */
.header-nav {
  display: flex;
  align-items: center;
  align-self: stretch;
  flex-wrap: wrap;
  gap: 32px;
  margin-left: auto;
}
/* The bullseye is callmemandy.com's mark, sitting next to the link that goes
   there. Its orange lives in the PNG and never in this file. */
.nav-portfolio { display: inline-flex; align-items: center; gap: 8px; }
.nav-bullseye { width: 20px; height: 20px; display: block; flex-shrink: 0; }
.nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 500;
  font-size: 14.5px;
  color: var(--moss);
}
.nav-link:hover { color: var(--lake); text-decoration: none; }
.nav-labwork, .nav-connect-btn { color: var(--charcoal); }

/* --- Connect ------------------------------------------------------------
   A button, not a <details>: it has to close on Escape, on a click outside
   and on choosing an item, and hand focus back. Hidden without JavaScript,
   which is why both of its links are in the footer as well. */
.nav-connect { position: relative; }
.nav-connect-btn {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-body);
}
.nav-caret {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.nav-connect-menu {
  position: absolute;
  right: -18px;
  top: calc(100% + 22px);
  z-index: 40;
  min-width: 200px;
  padding: 8px 0;
  background: var(--white);
  border: 1px solid var(--hairline-row);
  border-top: 2px solid var(--sage);
}
.nav-connect-menu[hidden] { display: none; }
.nav-connect-menu a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  font-weight: 500;
  font-size: 14.5px;
  color: var(--charcoal);
  white-space: nowrap;
}
.nav-connect-menu a:hover,
.nav-connect-menu a:focus-visible { background: var(--linen-shade); color: var(--lake); text-decoration: none; }

/* --- The portfolio block ------------------------------------------------
   The one place Linen Deep is used. The negative margin cancels the header
   row's padding so the block runs the full height of the header. */
.nav-portfolio-block {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: stretch;
  margin: -12px 0;
  padding: 0 20px;
  background: var(--linen-deep);
  color: var(--pine);
}
.nav-portfolio-block:hover { color: var(--lake); text-decoration: none; }
.npb-text { display: flex; flex-direction: column; gap: 1px; line-height: 1.2; }
.npb-eyebrow { font-size: 12px; color: var(--moss); }
.npb-link { font-weight: 600; font-size: 14.5px; }
/* --- The narrow-screen menu --------------------------------------------
   The full nav needs 743px of viewport to stay on one line — logo 168,
   gap 28, items 491, gutters 56 — and wrapping it cost a phone a 240px
   sticky header, a quarter of the screen on every page. Below 820px the
   items give way to one button. The 820 is the 743 plus room for one more
   nav item, so adding one cannot quietly bring the wrap back.

   The portfolio block drops out of the header entirely at this width
   (Mandy's call) and reappears at the foot of the panel, where it has room
   to say who it is for. The footer carries it too, so it is never the only
   way to reach it. */
.nav-burger { display: none; }

@media (max-width: 819px) {
  .header-nav > .nav-link,
  .header-nav > .nav-connect,
  .header-nav > .nav-portfolio-block { display: none; }

  .nav-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-right: -10px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--pine);
  }
  /* Three bars from one element: the middle is the box, the others are its
     shadows, so there is one thing to move when it becomes a cross. */
  .nav-burger-bars,
  .nav-burger-bars::before,
  .nav-burger-bars::after {
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
  }
  .nav-burger-bars { position: relative; }
  .nav-burger-bars::before, .nav-burger-bars::after { position: absolute; content: ""; }
  .nav-burger-bars::before { top: -7px; }
  .nav-burger-bars::after { top: 7px; }
  .nav-burger[aria-expanded="true"] .nav-burger-bars { background: transparent; }
  .nav-burger[aria-expanded="true"] .nav-burger-bars::before { top: 0; transform: rotate(45deg); }
  .nav-burger[aria-expanded="true"] .nav-burger-bars::after { top: 0; transform: rotate(-45deg); }
}

/* The panel. Under the header, full width, one item per line. */
.nav-panel { display: none; }
@media (max-width: 819px) {
  .nav-panel {
    display: flex;
    flex-direction: column;
    padding: 8px 28px 20px;
    background: var(--linen);
    border-bottom: 1px solid var(--hairline);
  }
  .nav-panel[hidden] { display: none; }
  .nav-panel-link {
    display: flex;
    align-items: center;
    min-height: 52px;
    font-weight: 500;
    font-size: 16px;
    color: var(--charcoal);
    border-bottom: 1px solid var(--hairline);
  }
  .nav-panel-link:hover { color: var(--lake); text-decoration: none; }
  .nav-panel-link.is-current { font-weight: 600; color: var(--pine); }
  .nav-panel-portfolio {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    margin-top: 16px;
    padding: 0 18px;
    background: var(--linen-deep);
    color: var(--pine);
  }
  .nav-panel-portfolio:hover { color: var(--lake); text-decoration: none; }
}
/* On /labwork/ and anything under it: the page you are on, said twice —
   in Pine, and with a Sage rule that costs the row no height. */
.nav-labwork.is-current { color: var(--pine); box-shadow: inset 0 -2px 0 var(--sage); }

/* -------------------------------------------------------------- 2. Hero */

.hero { border-bottom: 1px solid var(--hairline); }
/* Every flex child is border-box — see the global reset. The copy and the
   lab panel are both padded, and their bases assume it. */
.hero-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: clamp(40px, 6vw, 96px);
  padding-top: clamp(56px, 7vw, 104px);
  padding-bottom: clamp(48px, 6vw, 80px);
}
.hero-copy { flex: 1 1 360px; min-width: 0; }

/* A sentence with a face next to it, not an eyebrow: sentence case, no
   letter-spacing, and deliberately not a reusable class. */
.byline {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(20px, 2.2vw, 28px);
}
.byline-photo {
  position: relative;
  display: block;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--hairline-card);
}
.byline-photo img { width: 56px; height: 56px; display: block; }
.byline-text {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.4;
  color: var(--moss);
}

.hero h1 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(40px, 5.4vw, 76px);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--pine);
  max-width: 14ch;
  margin-bottom: clamp(28px, 3vw, 40px);
}
.hero-lead {
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.55;
  color: var(--charcoal);
  max-width: 50ch;
  margin-bottom: 18px;
}
.hero-sub {
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--moss);
  max-width: 54ch;
  margin-bottom: 36px;
}

/* ------------------------------------------------------- The lab panel */
/* 330px, not the design file's 360: the narrower base is what keeps the hero
   from wrapping badly between 900 and 1000px, and the build test holds it. */

.lab-panel {
  flex: 0 1 330px;
  min-width: 0;
  border-top: 2px solid var(--pine);
  padding-top: 18px;
}
.lab-panel-title {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 18px;
  color: var(--pine);
  margin-bottom: 6px;
}
.lab-list { display: flex; flex-direction: column; }
.lab-row {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 0 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--hairline);
}
/* The stage lives in its own column under the meter, not in the sentence. */
.lab-row-stage {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding-top: 5px;
  font-weight: 500;
  font-size: 12.5px;
  line-height: 1.2;
  color: var(--moss);
}
/* Named for the row, not "note": .lab-note below is the Pine card. */
.lab-row-name { font-weight: 600; font-size: 16px; color: var(--pine); margin-bottom: 3px; }
.lab-row-desc { font-size: 14.5px; line-height: 1.55; color: var(--moss); }

/* The stage meter: five bars, and a Teal bubble after them once an entry is
   published. Where the stage is written out beside it the meter is
   aria-hidden; where it stands for the mark itself — the key — it keeps a
   role="img" and a label, because the bar count is the information. */
.stage-meter { display: flex; align-items: center; gap: 2px; }
.stage-meter .bar { display: block; width: 5px; height: 11px; background: var(--hairline-row); }
.stage-meter .bar.is-on { background: var(--sage); }
/* The one Teal in the meter, and the only thing that means published. */
.stage-meter .bubble {
  display: block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--teal);
}

/* The stages key opens over the page, so nothing below it moves. */
.stages { position: relative; margin-top: 4px; border-bottom: 1px solid var(--hairline); }
.stages-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  color: var(--pine);
  text-align: left;
}
.stages-switch {
  font-weight: 500;
  font-size: 13.5px;
  color: var(--lake);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.stages-panel {
  position: absolute;
  top: calc(100% + 1px);
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 16px 18px;
  background: var(--white);
  border: 1px solid var(--hairline-row);
  border-top: 2px solid var(--sage);
}
.stages-panel[hidden] { display: none; }
.stage-row {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 0 14px;
  align-items: baseline;
}
.stage-row .stage-meter { margin-top: 3px; }
.stage-row p { font-size: 13.5px; line-height: 1.5; color: var(--moss); }
.stage-term { font-weight: 600; color: var(--pine); }

/* The only Pine ground above the footer. No blue inside it. */
/* The index is the link the rows are not. */
.lab-see-all {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 6px;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--lake);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.lab-see-all:hover { color: var(--pine); }

.lab-note {
  position: relative;
  overflow: hidden;
  margin-top: 20px;
  background: var(--pine);
  padding: 24px 24px 26px;
  /* The watermark is absolute, so it takes no cell: the bubbles and the copy
     are the two columns. */
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.lab-note-mark { width: 120px; right: -24px; top: -14px; opacity: 0.08; }
.lab-note-text {
  position: relative;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.32;
  letter-spacing: -0.01em;
  color: var(--linen);
}

/* ------------------------------------------------------ 3. Values line */

.values { border-top: 1px solid var(--hairline); }
.values-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px clamp(28px, 4vw, 56px);
  padding-top: 22px;
  padding-bottom: 22px;
  /* Only the <dl>'s own default margins. A plain `margin: 0` here would
     also wipe .container's `margin: 0 auto`, and the row would sit flush
     left instead of lining up with the rest of the page. */
  margin-top: 0;
  margin-bottom: 0;
}
.value { display: flex; gap: 10px; align-items: baseline; }
.value dt { font-weight: 600; font-size: 15px; color: var(--pine); }
.value dd { margin: 0; font-size: 15px; color: var(--moss); }

/* ------------------------------------------------------------- 4. About */

.about {
  /* Arrived at as /#about from another page: clear the sticky header. */
  scroll-margin-top: 89px;
  background: var(--linen-shade);
  border-top: 1px solid var(--hairline);
  padding-top: clamp(64px, 7vw, 104px);
  padding-bottom: clamp(64px, 7vw, 104px);
}
.about-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 32px clamp(32px, 5vw, 80px);
}
.about-photo { flex: 0 1 240px; min-width: 0; }
.about-photo img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--hairline-card);
}
.about-copy { flex: 1 1 340px; min-width: 0; }

.about-label {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 17px;
  color: var(--moss);
  margin-bottom: 10px;
}
.h2-about {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--pine);
  margin-bottom: 24px;
}
.about-lead { font-size: 18px; line-height: 1.62; color: var(--charcoal); max-width: 60ch; margin-bottom: 18px; }
.about-body { font-size: 16.5px; line-height: 1.68; color: var(--charcoal); max-width: 60ch; margin-bottom: 16px; }
.about-body-last { margin-bottom: 24px; }

/* The portfolio link keeps to the right as the row wraps. */
.about-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  max-width: 60ch;
}
.about-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-left: auto;
  font-weight: 600;
  font-size: 16px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

/* ------------------------------------------------------------ 5. Footer */

.site-footer { background: var(--pine-deep); border-top: 1px solid rgba(247, 244, 237, 0.14); }
.footer-row {
  display: flex;
  gap: clamp(24px, 4vw, 56px);
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: flex-start;
  padding-top: clamp(36px, 4vw, 54px);
  padding-bottom: clamp(36px, 4vw, 54px);
}
.footer-brand { flex: 0 1 300px; min-width: 0; }
.footer-brand img { height: 56px; width: auto; display: block; margin-bottom: 14px; }
.footer-tagline { font-size: 14.5px; line-height: 1.5; color: var(--mint); }

/* Both Connect links again, where no-JavaScript readers can reach them. */
.foot-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.foot-btn-amber, .foot-btn-outline {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  font-weight: 600;
  font-size: 14.5px;
}
.foot-btn-amber { background: var(--amber); color: var(--pine); }
.foot-btn-amber:hover { background: var(--linen); color: var(--pine); text-decoration: none; }
/* No blue on a dark ground: the outline button borrows the footer's rule. */
.foot-btn-outline { border: 1px solid rgba(247, 244, 237, 0.6); color: var(--linen); }
.foot-btn-outline:hover { border-color: var(--amber); color: var(--amber); text-decoration: none; }

.foot-links { display: flex; flex-direction: column; gap: 10px; }
.foot-portfolio { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 6px; color: var(--linen); }
.foot-portfolio > span { display: flex; flex-direction: column; gap: 2px; line-height: 1.25; }
.fp-eyebrow { font-size: 12.5px; color: var(--mint); }
.fp-link { font-size: 15px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.foot-portfolio:hover { color: var(--amber); text-decoration: none; }
.foot-portfolio:hover .fp-eyebrow { color: var(--amber); }
.foot-links a {
  font-size: 15px;
  color: var(--linen);
  text-decoration: underline;
  text-decoration-color: rgba(247, 244, 237, 0.4);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.foot-links a:hover { color: var(--amber); text-decoration-color: var(--amber); }

.footer-base { padding-bottom: clamp(32px, 3.4vw, 44px); }
.footer-base p {
  border-top: 1px solid rgba(247, 244, 237, 0.14);
  padding-top: 20px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--mint);
}

/* --------------------------------------------- Kept for the client pages */
/* A /prospect/ page builds its footer from these. The home page no longer
   uses them; don't delete them while a client page can be restored. */

.footer-label {
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 14px;
}
.footer-pillars {
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mint);
}
.footer-links { display: flex; flex-direction: column; gap: 10px; }
.footer-links a { font-size: 15px; color: var(--linen); }
.footer-links a:hover { color: var(--amber); }