/* ============================================================================
   w2b.cc — design system
   Light, calm, approachable. White / grey / blue, with curves.

   Set 2026-08-28 on Mike's direction: "let's go back to the white gray and blue
   colors with some curves and inviting feelings, something that's calming, not
   so royal not so stuffy, something that makes me approachable."

   This SUPERSEDES the black-and-gold system in Style Guide.pdf. The blues below
   are his own: #769CD0 and #5477A7 are lifted from the Longevity theme the old
   w2b.cc ran for years, so this is a return rather than an invention.

   The family crest is unchanged artwork. Gold linework cannot hold its own on
   white, so it sits inside a deep navy medallion instead of being recoloured.
   ========================================================================== */

:root{
  /* ── ground: white through soft blue-grey ─────────────────────────────── */
  --paper:   #FFFFFF;   /* page */
  --mist:    #F5F8FB;   /* quiet surfaces, alternating bands */
  --cloud:   #EDF3F9;   /* chips, table heads */
  --line:    #DCE6F0;   /* hairlines */
  --line-2:  #C6D5E6;   /* stronger dividers */

  /* ── blue: his own, from the theme this site ran for years ────────────── */
  --sky:     #769CD0;   /* light blue — accents */
  /* His original theme blue was #5477A7. Nudged two steps darker so link text
     also clears 4.5:1 on --mist and --cloud, not only on white. Visually the
     same blue; measurably legible on every surface it lands on. */
  --blue:    #4E709E;   /* primary — buttons, links, active states */
  --blue-dk: #3D5C86;   /* hover */
  --deep:    #24405F;   /* headings */

  /* ── type colour ──────────────────────────────────────────────────────── */
  --ink:     #33414F;   /* body */
  /* Both greys were darkened 2026-08-28 after a contrast audit: #667A8F was
     4.43:1 on white and 3.96:1 on --cloud, i.e. below AA for normal text
     everywhere it was used. These clear 4.5:1 on white, mist, and cloud. */
  --slate:   #5A6C80;   /* captions, meta — 5.40:1 on white */
  /* --faint was removed: every value light enough to read as "faint" failed AA.
     Placeholders use --slate, which is legible and still visibly secondary. */

  /* ── type ─────────────────────────────────────────────────────────────── */
  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-body:    'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ── curves ───────────────────────────────────────────────────────────── */
  --r-sm:   10px;
  --r:      18px;
  --r-lg:   28px;
  --r-pill: 999px;

  /* ── depth: soft and diffuse, never a hard drop shadow ────────────────── */
  --lift:    0 1px 2px rgba(36,64,95,.04), 0 8px 24px rgba(36,64,95,.06);
  --lift-hi: 0 2px 4px rgba(36,64,95,.06), 0 16px 40px rgba(36,64,95,.10);

  /* ── structure ────────────────────────────────────────────────────────── */
  --measure:   68ch;
  --container: 1180px;
  --ease:      cubic-bezier(.2,.8,.2,1);

  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 40px; --s6: 56px; --s8: 72px; --s12: 96px;
  --pad-section: var(--s12);
  --gutter: var(--s3);
}

@media (max-width:760px){ :root{ --pad-section: var(--s6); } }

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

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:18px; line-height:1.7; font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* twenty years of pasted URLs live in this content */
  overflow-wrap:break-word;
}

/* ── skip link ─────────────────────────────────────────────────────────── */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--blue);
  color:#fff;padding:12px 20px;border-radius:0 0 var(--r-sm) 0;font-weight:600}
.skip:focus{left:0}

/* ── type ──────────────────────────────────────────────────────────────── */
h1,h2,h3,h4{margin:0;text-wrap:balance;font-family:var(--font-display);
  color:var(--deep);font-weight:500;letter-spacing:-.01em}
h1{font-size:clamp(2.1rem,4.4vw,3.1rem);line-height:1.15}
h2{font-size:clamp(1.5rem,2.8vw,2.05rem);line-height:1.25}
h3{font-size:1.28rem;line-height:1.35;font-weight:600}
h4{font-size:1.05rem;line-height:1.4;font-weight:600}

p{margin:0}
strong,b{font-weight:600;color:var(--deep)}
em{font-style:italic}
img{max-width:100%;height:auto}
hr{border:0;border-top:1px solid var(--line);margin:0}

a{color:var(--blue);text-decoration-color:var(--line-2);text-underline-offset:3px;
  transition:color 180ms var(--ease)}
a:hover{color:var(--blue-dk)}
a:focus-visible{outline:2px solid var(--sky);outline-offset:3px;border-radius:var(--r-sm)}

.eyebrow{font-family:var(--font-body);font-size:.78rem;font-weight:600;line-height:1.4;
  letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.deck{font-family:var(--font-display);font-weight:300;font-size:1.4rem;line-height:1.55;
  color:var(--slate);max-width:58ch}
.small,.meta{font-size:.9rem;line-height:1.5;color:var(--slate)}

/* ── shell ─────────────────────────────────────────────────────────────── */
.shell{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.col{max-width:var(--measure)}

/* ── masthead ──────────────────────────────────────────────────────────── */
.masthead{background:rgba(255,255,255,.88);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.masthead__in{display:flex;align-items:center;gap:var(--s4);
  max-width:var(--container);margin:0 auto;padding:var(--s2) var(--gutter)}
.brand{display:flex;align-items:center;gap:var(--s2);text-decoration:none;flex-shrink:0}
/* The crest is gold artwork on a portrait canvas. On white it needs its own dark
   ground, and it must be CONTAINED in that ground — a pill radius on a 2:3 image
   produces an ellipse and squashes the shield. */
.brand img{width:42px;height:42px;display:block;border-radius:14px;
  background:var(--deep);padding:5px;object-fit:contain}
.brand span{font-family:var(--font-display);font-size:1.15rem;font-weight:500;
  color:var(--deep)}
.nav{display:flex;gap:var(--s2) var(--s3);flex-wrap:wrap;align-items:center;
  justify-content:flex-end;margin-left:auto}
.nav a{font-size:.95rem;font-weight:500;color:var(--ink);text-decoration:none;
  padding:6px 2px;border-bottom:2px solid transparent;white-space:nowrap;
  transition:color 180ms var(--ease),border-color 180ms var(--ease)}
.nav a:hover{color:var(--blue)}
.nav a[aria-current]{color:var(--blue);border-bottom-color:var(--sky)}
.nav .cta{background:var(--blue);color:#fff;padding:10px 20px;border-radius:var(--r-pill);
  border-bottom:0;font-weight:600;box-shadow:var(--lift)}
.nav .cta:hover{background:var(--blue-dk);color:#fff}

.navtoggle{display:none}
@media (max-width:1000px){
  .masthead__in{flex-wrap:wrap;gap:var(--s2);row-gap:0}
  .navtoggle{display:block;margin-left:auto}
  .navtoggle summary{list-style:none;cursor:pointer;font-size:.9rem;font-weight:600;
    color:var(--blue);padding:8px 16px;border:1px solid var(--line-2);
    border-radius:var(--r-pill)}
  .navtoggle summary::-webkit-details-marker{display:none}
  .nav{display:none}
  .navtoggle[open] + .nav{display:flex;flex-direction:column;align-items:stretch;
    gap:0;width:100%;margin:var(--s2) 0 var(--s1);order:9}
  .navtoggle[open] + .nav a{padding:12px 0;border-bottom:1px solid var(--line)}
  .navtoggle[open] + .nav .cta{text-align:center;margin-top:var(--s2);border:0}
}
@media (max-width:420px){ .brand span{font-size:1rem} }

/* ── page head ─────────────────────────────────────────────────────────── */
.pagehead{padding:var(--pad-section) 0 var(--s5);display:flex;flex-direction:column;
  gap:var(--s2)}
.crumb{font-size:.9rem;color:var(--slate)}
.crumb a{color:var(--slate);text-decoration:none}
.crumb a:hover{color:var(--blue)}

/* ── hero: a soft blue field, scooped out at the base ──────────────────── */
.hero{position:relative;padding:var(--s12) var(--s4);margin-bottom:var(--s12);
  display:flex;flex-direction:column;align-items:center;gap:var(--s4);
  text-align:center;border-radius:var(--r-lg);
  background:linear-gradient(180deg,#F2F7FC 0%,#E6EFF8 100%)}
/* the curve — a wide shallow arc of page colour lifted into the hero's base */
.hero::after{content:"";position:absolute;left:-1px;right:-1px;bottom:-1px;height:70px;
  background:var(--paper);border-radius:50% 50% 0 0 / 100% 100% 0 0;
  transform:translateY(50%)}
.hero > *{position:relative;z-index:1}
.hero__crest{width:min(168px,42vw);height:min(168px,42vw);display:block;
  background:var(--deep);border-radius:var(--r-lg);padding:var(--s3);
  object-fit:contain;box-shadow:var(--lift-hi)}
.hero h1{font-size:clamp(2.3rem,5.4vw,3.5rem)}
.hero .deck{margin:0 auto;color:var(--ink)}
.hero__actions{display:flex;gap:var(--s2);flex-wrap:wrap;justify-content:center;
  margin-top:var(--s2)}

/* ── prose ─────────────────────────────────────────────────────────────── */
.prose{display:flex;flex-direction:column;gap:var(--s3);min-width:0;
  padding-bottom:var(--s4)}
.prose > *{margin:0;min-width:0;max-width:var(--measure)}
.prose > .table-scroll{max-width:100%;width:100%}
.prose h2{margin-top:var(--s5)}
.prose h3{margin-top:var(--s3);color:var(--blue-dk)}
.prose ol{padding-left:var(--s3);display:flex;flex-direction:column;gap:var(--s1)}
.prose ul{list-style:none;padding-left:var(--s3);display:flex;flex-direction:column;
  gap:var(--s1)}
.prose ul > li{position:relative}
.prose ul > li::before{content:"";position:absolute;left:calc(var(--s3) * -1);top:.62em;
  width:7px;height:7px;border-radius:var(--r-pill);background:var(--sky)}
.prose ol li::marker{color:var(--blue)}
.prose img{display:block;border-radius:var(--r);box-shadow:var(--lift)}
.prose blockquote{padding:var(--s3) var(--s4);border-left:4px solid var(--sky);
  background:var(--mist);border-radius:0 var(--r) var(--r) 0;
  font-family:var(--font-display);font-weight:300;font-size:1.32rem;line-height:1.5;
  color:var(--deep)}
.prose blockquote cite{display:block;margin-top:var(--s2);font-family:var(--font-body);
  font-style:normal;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--slate)}
.prose--dropcap > p:first-of-type::first-letter{font-family:var(--font-display);
  font-size:3.1em;line-height:.82;float:left;padding:.05em .1em 0 0;
  color:var(--sky);font-weight:500}

/* ── tables ────────────────────────────────────────────────────────────── */
.table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);
  -webkit-overflow-scrolling:touch}
.prose table,table.data{border-collapse:collapse;width:100%;min-width:640px;
  font-size:.94rem;font-variant-numeric:tabular-nums}
.prose th,table.data th{background:var(--cloud);color:var(--deep);text-align:left;
  padding:var(--s2);font-weight:600;font-size:.82rem;letter-spacing:.06em;
  text-transform:uppercase;border-bottom:1px solid var(--line-2)}
.prose td,table.data td{padding:var(--s2);color:var(--ink);vertical-align:top;
  border-bottom:1px solid var(--line)}
.prose tbody tr:nth-child(even){background:var(--mist)}
.prose tbody tr:last-child td{border-bottom:0}

/* ── buttons: pills, because they read as friendly ─────────────────────── */
.btn{display:inline-block;font-family:var(--font-body);font-weight:600;font-size:1rem;
  padding:14px 30px;text-decoration:none;border-radius:var(--r-pill);
  border:2px solid transparent;background:var(--blue);color:#fff;box-shadow:var(--lift);
  transition:background 180ms var(--ease),box-shadow 180ms var(--ease),
             transform 180ms var(--ease)}
.btn:hover{background:var(--blue-dk);color:#fff;box-shadow:var(--lift-hi);
  transform:translateY(-1px)}
.btn--ghost{background:var(--paper);color:var(--blue);border-color:var(--line-2);
  box-shadow:none}
.btn--ghost:hover{background:var(--mist);color:var(--blue-dk);border-color:var(--sky);
  box-shadow:var(--lift)}
.btn[aria-disabled="true"]{background:var(--cloud);color:var(--slate);cursor:default;
  box-shadow:none}
.btn[aria-disabled="true"]:hover{background:var(--cloud);color:var(--slate);
  transform:none;box-shadow:none}
.link-arrow{font-weight:600;color:var(--blue);text-decoration:none;
  border-bottom:2px solid var(--line-2);padding-bottom:2px}
.link-arrow:hover{border-bottom-color:var(--sky)}

/* ── form fields ───────────────────────────────────────────────────────── */
label{display:block;font-size:.85rem;font-weight:600;color:var(--deep);
  margin-bottom:var(--s1)}
input[type=text],input[type=email],textarea{width:100%;background:var(--paper);
  border:1px solid var(--line-2);border-radius:var(--r-sm);padding:14px var(--s2);
  color:var(--ink);font-family:var(--font-body);font-size:1rem}
input::placeholder,textarea::placeholder{color:var(--slate)}
input:focus,textarea:focus{outline:none;border-color:var(--sky);
  box-shadow:0 0 0 4px rgba(118,156,208,.18)}

/* ── cards ─────────────────────────────────────────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
  gap:var(--s3)}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s4);display:flex;flex-direction:column;gap:var(--s2);
  text-decoration:none;color:inherit;box-shadow:var(--lift);
  transition:box-shadow 200ms var(--ease),transform 200ms var(--ease),
             border-color 200ms var(--ease)}
a.card:hover{box-shadow:var(--lift-hi);transform:translateY(-3px);
  border-color:var(--line-2)}
.card:not(a){cursor:default}
.card p{font-size:1rem;line-height:1.6;color:var(--ink)}
.card .meta{margin-top:auto;padding-top:var(--s1)}
.card .go{font-weight:600;color:var(--blue);font-size:.95rem}
.card .eyebrow{font-size:.72rem}

.cards--areas{grid-template-columns:repeat(auto-fit,minmax(min(400px,100%),1fr))}
.card--area{padding:var(--s5);background:linear-gradient(180deg,var(--paper),var(--mist))}
.card--area h3{font-size:1.5rem;font-weight:500}
.card--area .contents{font-size:.94rem;line-height:1.7;color:var(--slate);
  padding-top:var(--s2);border-top:1px solid var(--line);margin-top:auto}
.card--area .go{padding-top:var(--s2)}

/* ── the creed, on the home page ───────────────────────────────────────── */
.creed{list-style:none;counter-reset:tenet;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:var(--s3)}
.creed li{counter-increment:tenet;background:var(--mist);border:1px solid var(--line);
  border-radius:var(--r);padding:var(--s4);display:flex;gap:var(--s3);
  align-items:flex-start;font-family:var(--font-display);font-size:1.15rem;
  font-weight:400;color:var(--deep)}
.creed li::before{content:counter(tenet);font-family:var(--font-body);font-size:.85rem;
  /* white on --sky is 2.82:1. The badge carries the number, so it needs the
     darker blue to be legible at 14px. */
  font-weight:700;color:#fff;background:var(--blue);flex-shrink:0;width:28px;height:28px;
  border-radius:var(--r-pill);display:grid;place-items:center}

/* ── tenets (The Wheeler Way) ──────────────────────────────────────────── */
.tenets{display:flex;flex-direction:column;gap:var(--s3)}
.tenet{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s5);display:flex;gap:var(--s4);align-items:flex-start;
  box-shadow:var(--lift)}
.tenet .n{font-family:var(--font-display);font-size:1.6rem;font-weight:500;
  color:var(--sky);line-height:1;min-width:2ch;font-variant-numeric:tabular-nums}
.tenet .t{display:flex;flex-direction:column;gap:var(--s1)}
.tenet h3{font-size:1.22rem}
.tenet p{font-size:1rem;color:var(--ink);max-width:62ch}
.motto{display:flex;flex-direction:column;gap:var(--s1);text-align:center;
  padding:var(--s5);border-radius:var(--r);
  background:linear-gradient(180deg,#F2F7FC,#E6EFF8);
  font-family:var(--font-display);font-size:1.32rem;font-weight:400;color:var(--deep)}
.motto span{font-size:1.05rem;font-style:italic;color:var(--slate)}

/* ── book ──────────────────────────────────────────────────────────────── */
.book{display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:var(--s8);
  align-items:start}
@media (max-width:760px){.book{grid-template-columns:1fr;gap:var(--s4)}}
.book__body{display:flex;flex-direction:column;gap:var(--s3);align-items:flex-start}
.pillars{display:flex;flex-wrap:wrap;gap:var(--s1);width:100%}
.pillars span{flex:1;min-width:92px;background:var(--cloud);color:var(--blue-dk);
  padding:10px var(--s2);text-align:center;border-radius:var(--r-pill);
  font-size:.85rem;font-weight:600}

/* the old shield frame becomes a soft rounded frame */
.shield{position:relative;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--lift-hi)}
.shield::after{display:none}
.shield img{display:block;width:100%}
.shield--clip img{clip-path:none}
.portrait{margin:0;border-radius:var(--r-lg);overflow:hidden}

/* ── bands ─────────────────────────────────────────────────────────────── */
.band{padding:var(--pad-section) 0;display:flex;flex-direction:column;gap:var(--s5);
  border-top:1px solid var(--line)}
.band--compact{padding:var(--s6) 0;gap:var(--s3)}
.band__head{display:flex;flex-direction:column;gap:var(--s2)}

/* ── split + facts rail ────────────────────────────────────────────────── */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,320px);
  gap:var(--s8);align-items:start}
@media (max-width:900px){.split{grid-template-columns:1fr;gap:var(--s4)}}
.facts{background:var(--mist);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s5);position:sticky;top:calc(var(--s8) + var(--s3))}
@media (max-width:900px){.facts{position:static}}
.facts h3{font-size:1.1rem;padding-bottom:var(--s2);border-bottom:1px solid var(--line);
  margin-bottom:var(--s3)}
.facts dl{margin:0;display:grid;gap:var(--s2)}
.facts dt{font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--blue)}
.facts dd{margin:0 0 var(--s1) 0;font-size:.98rem;line-height:1.5;color:var(--ink)}

/* ── article with a portrait ───────────────────────────────────────────── */
.article--portrait{display:grid;grid-template-columns:1fr minmax(200px,300px);
  gap:var(--s8);align-items:start}
.article--portrait .portrait{position:sticky;top:calc(var(--s8) + var(--s3))}
@media (max-width:760px){
  .article--portrait{grid-template-columns:1fr;gap:var(--s4)}
  .article--portrait .portrait{position:static;margin:0 auto;max-width:280px}
}

/* ── dividers ──────────────────────────────────────────────────────────── */
/* the heraldic triple-stroke becomes one soft tapered line */
.rule-triple{border:0;height:2px;border-radius:var(--r-pill);
  background:linear-gradient(90deg,transparent,var(--line-2) 22%,var(--sky) 50%,
              var(--line-2) 78%,transparent)}
.cross{display:none}

/* ── embeds ────────────────────────────────────────────────────────────── */
.embed{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--r);
  overflow:hidden;border:1px solid var(--line);box-shadow:var(--lift)}
.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* <pre> was used for centring, not for code — let it wrap in the body face */
.prose pre{white-space:pre-wrap;overflow-x:auto;font-family:inherit;font-size:inherit;
  margin:0}

/* ── footer ────────────────────────────────────────────────────────────── */
.footer{background:var(--mist);border-top:1px solid var(--line);margin-top:var(--s12);
  padding:var(--pad-section) 0 var(--s8);color:var(--slate);font-size:.95rem}
.footer__in{display:flex;flex-wrap:wrap;gap:var(--s8);justify-content:space-between}
.footer a{color:var(--slate);text-decoration:none}
.footer a:hover{color:var(--blue)}
.footer__nav{display:flex;flex-direction:column;gap:var(--s1)}
.footer__creed{font-family:var(--font-display);font-style:italic;font-weight:300;
  color:var(--deep);font-size:1.2rem;max-width:34ch;line-height:1.6}


/* ── contents, on long-form pages ──────────────────────────────────────── */
.toc{background:var(--mist);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s4) var(--s5);max-width:var(--measure)}
.toc__h{font-size:1.05rem!important;margin:0 0 var(--s2)!important;
  padding:0!important;border:0!important;color:var(--deep)}
.toc ol{margin:0;padding-left:1.3em;column-gap:var(--s5);
  font-size:.98rem;line-height:1.75;
  /* display:block is load-bearing — `.prose ol` sets display:flex, and a flex
     container silently ignores `columns`, so the list rendered as one tall row */
  display:block;columns:2}
@media (max-width:640px){ .toc ol{columns:1} }
.toc li{break-inside:avoid}
.toc a{text-decoration:none}
.toc a:hover{text-decoration:underline}
/* a heading jumped to from the contents should not hide under the sticky bar */
.prose h2[id]{scroll-margin-top:96px}