/* Smarter Chart
   Clinical reference: cream paper, serif headings, dense scannable lists.
   The signature gradient appears as a plate behind a headline and on
   primary buttons, never as a full-width masthead. */

:root {
  --paper: #fbfaf7;
  --card: #ffffff;
  --ink: #1e2229;
  --body: #565c68;
  --muted: #9a9488;
  --rule: #e2dfd8;
  --hair: #edeae3;
  --accent: #c01443;
  /* Brand pair, sampled from the business card. The plain values are for
     dark grounds, where the card puts them; the -ink values are the same
     hues taken down far enough to read on white. */
  --brand-red: #ef4151;
  --brand-teal: #54aea9;
  --brand-red-ink: #d9232f;
  --brand-teal-ink: #27736f;
  --accent-ink: #a8123e;
  --field-bg: #fde7ee;
  --gradient: linear-gradient(97deg, #0e0a0a 0%, #7e1134 52%, #f2295b 100%);
  --serif: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --wrap: 1120px;
}

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 15px/1.6 var(--sans);
}

a { color: var(--accent); }

/* ---------- masthead ---------- */

.bar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 24px;
  background: var(--card);
  border-bottom: 1px solid var(--rule);
}

.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; }
.brand img { border-radius: 4px; display: block; }
/* The name in two colours, from Ross's business card: "Smarter" red,
   "Chart" teal. Sampled off the card itself -- #ef4151 and #54aea9.

   Those are the values for a dark ground, which is what the card gives
   them. On the white masthead neither passes: the red manages 3.8:1 and
   the teal only 2.6:1, which fails even the 3:1 large-text floor. So the
   masthead uses deeper mixes of the same two hues, and the card's own
   values are kept for anywhere dark. */
.wm { font: 700 18px/1 var(--serif); letter-spacing: -0.01em; }
.wm .wa { color: var(--brand-red-ink); }
.wm .wb { color: var(--brand-teal-ink); }

.tl {
  font: italic 12px/1.3 var(--serif);
  color: var(--muted);
  border-left: 1px solid var(--rule);
  padding-left: 14px;
}

.bar nav { margin-left: auto; display: flex; gap: 17px; flex-wrap: wrap; }
.bar nav a { font-size: 13px; color: var(--body); text-decoration: none; padding-bottom: 2px; }
.bar nav a:hover { color: var(--ink); }
.bar nav a.on { color: var(--accent); font-weight: 600; border-bottom: 2px solid #f2295b; }

/* ---------- gradient plate ---------- */

.plate { background: var(--gradient); padding: 30px 24px 26px; }
.plate h1 {
  margin: 0;
  max-width: 17em;
  font: 400 clamp(24px, 4vw, 31px)/1.2 var(--serif);
  letter-spacing: -0.015em;
  color: #fff;
}
.plate .lede {
  margin: 12px 0 0;
  max-width: 40em;
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.82);
}

/* ---------- home hero: the tile grid and the cross ---------- */

/* The drawing is one SVG, generated at build time by src/render/hero.js.
   Two of them, in fact: the wide arrangement runs the words left and right
   from the cross's spokes, the narrow one runs them up and down, because
   seven letters in a row need width a phone has not got. Both are in the
   markup and CSS picks one -- nothing here measures anything. */
/* The band under the drawing continues the gradient's dark end, so the
   promise line and the links sit on the same field the banner finishes on
   rather than on a flat colour butted against it. */
.hero { background: var(--paper); }
.hero h1 { margin: 0; font-size: 0; }           /* the h1 is the drawing */
.hero svg { display: block; width: 100%; height: auto; }
.hero .narrow { display: none; }

/* Below the breakpoint the cards follow the drawing down the page, so the
   banner is just the picture and nothing overlaps. */
.hero .over { padding: 22px 24px 4px; }

@media (max-width: 860px) {
  .hero .wide { display: none; }
  .hero .narrow { display: block; }
}

/* The library and the tool sit on the banner. The drawing and the cards
   share one grid cell, so the banner is as tall as whichever is taller --
   the cards can never run off the bottom of the picture, and the picture
   never leaves a band of empty colour under short cards. That is also why
   the wide drawing is sliced to fill rather than fitted: its height is the
   cards' now, not its own.

   1200px, not the 860 where the drawing changes shape. The two cards plus
   the gap the cross needs between them do not fit in less: at 1000px they
   met in the middle, the index's rows wrapped, and both words vanished
   behind them. Between 860 and 1200 the wide drawing is used but the cards
   simply follow it down the page. */
@media (min-width: 1200px) {
  /* A floor, so the banner is tall enough for the tool card to clear CHART
     on a 1280 laptop. Below about 530px the card's bottom edge and the
     word's top edge cross, and the last T goes behind it. The drawing has
     enough slack in its viewBox to be cropped to this height without
     losing a letter. */
  .hero .banner { display: grid; min-height: 560px; }
  .hero .banner > h1,
  .hero .banner > .over { grid-area: 1 / 1; }

  .hero .banner > h1 { align-self: stretch; }
  .hero .wide { height: 100%; }

  /* Stretched to the full banner, and full width rather than held to the
     text column: the cards have to sit out at the edges so the cross keeps
     the middle. Holding them to --wrap pushed the tool inward, straight
     over the cross's right arm. */
  .hero .over {
    position: relative;
    z-index: 1;
    align-self: stretch;
    width: 100%;
    max-width: none;
    padding: 30px 48px 18px;
    display: flex;
  }

  /* Three columns: the index, the gap the cross lives in, the tool.
     fit-content, so the index is only as wide as its rows need and no
     wider -- with the counts gone it shrinks by itself. The 42% is a
     ceiling, not a width: without it a long description would push the
     card across the cross. */
  .hero .over .home {
    width: 100%;
    grid-template-columns: fit-content(42%) 1fr 272px;
    gap: 0;
  }
  .hero .over .home .main { grid-column: 1; align-self: end; }
  .hero .over .home aside { grid-column: 3; align-self: start; }
}

/* Below the overlap the cards are not on the banner at all -- they follow
   it down the cream page -- so there they stay ordinary white cards with
   the ink they have everywhere else on the site. */
.hero .over .main {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 16px 20px 6px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}
.hero .over .tool { box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08); }

/* Glass, and only where the cards actually sit on the banner: a 10% white
   fill over a blurred backdrop inside a white frame -- Ross's own recipe,
   two passes of a 5.6px gaussian.

   At that fill the card is not a light surface with the banner showing
   through, it IS the banner, blurred, so the type has to be light. All of
   it is scoped to the same breakpoint for that reason: white text on the
   cream page below 1200px would be invisible, which is exactly what
   shipping it unscoped did. */
@media (min-width: 1200px) {
  .hero .over .main,
  .hero .over .tool {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(11.2px) saturate(125%);
    -webkit-backdrop-filter: blur(11.2px) saturate(125%);
    border: 1px solid rgba(255, 255, 255, 0.45);
    /* The inset is a whisper of dark in the fill. Over the banner's red end
       white on 10% is the worst case either card reaches, and this seats it
       without making the glass look tinted. */
    box-shadow: inset 0 0 0 999px rgba(26, 8, 16, 0.16), 0 16px 40px rgba(0, 0, 0, 0.3);
  }

  /* No blur means no glass: a 10% fill over an unblurred grid would run the
     cell lines straight through the text. Falls back to a dark panel, which
     the light type already suits. */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .hero .over .main,
    .hero .over .tool { background: rgba(26, 8, 16, 0.86); }
  }

  /* Much closer to white than they would be on paper. Over the red end a
     10% card leaves little room: at 0.82 the eyebrow measured 3.93:1 and
     the counts 3.81:1. Hierarchy comes from size, weight and letterspacing
     here, not from fading the ink. */
  .hero .over .eyebrow { color: rgba(255, 255, 255, 0.95); }
  .hero .over .row .ds { color: rgba(255, 255, 255, 0.96); }
  .hero .over .row .meta { color: rgba(255, 255, 255, 0.95); }
  /* The tool card sits over the dark end and has room to spare: 13:1. */
  .hero .over .tool .bd p { color: rgba(255, 255, 255, 0.95); }
  .hero .over .tool .fine { color: rgba(255, 255, 255, 0.82); }

  /* White rather than the accent: on glass over red there is no red dark
     enough to read and still look like the accent, so weight and the hover
     underline carry the links instead. */
  .hero .over .row .nm { color: #fff; }
  .hero .over .row .nm:hover { text-decoration: underline; }

  /* The row rules were drawn for cream paper and vanish on glass. */
  .hero .over .rows { border-top-color: rgba(255, 255, 255, 0.3); }
  .hero .over .row { border-bottom-color: rgba(255, 255, 255, 0.22); }
}

/* Flat, not the site gradient: these sit on a gradient already, and a
   gradient over a gradient reads as a mistake. */
.hero .over .tool .hd { background: var(--accent-ink); }
.hero .over .tool .bd .copy { background: var(--accent-ink); }

/* Staggered, as in Ross's sketch: the index low on the left, the tool high
   on the right, so the cross is left room between them. */
@media (min-width: 1200px) {
  .hero .over .main { align-self: end; }
  .hero .over aside { align-self: start; }
}

.hero .foot { background: #15121a; padding: 22px 24px 28px; }

/* White on this red is about 3.9:1. That carries the big letters, which
   only need 3:1, but not body text at 4.5:1 -- so the promise line is set
   large and semibold, which puts it in the large-text bracket instead of
   quietly failing. */
.hero .lede {
  margin: 18px auto 0;
  max-width: 24em;
  padding: 0 24px;
  text-align: center;
  font: 600 clamp(19px, 2.2vw, 24px)/1.35 var(--serif);
  color: #fff;
}

.hero .quick { margin: 18px 0 0; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.hero .quick a {
  font: 600 13px/1 var(--sans);
  text-decoration: none;
  color: #fff;
  padding: 11px 19px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 4px;
}
.hero .quick a:hover { background: rgba(255, 255, 255, 0.16); }

/* The two halves of the name, parked behind the spokes until they slide
   out: left and right when wide, up and down when narrow. */
.hero .hw { fill: #fff; font: 700 40px Georgia, serif; text-anchor: middle; }

#w-smarter { transform: translateX(420px); animation: wOut 1.05s cubic-bezier(.16,.84,.26,1) .45s forwards; }
#w-chart   { transform: translateX(-300px); animation: wOut 1.05s cubic-bezier(.16,.84,.26,1) .75s forwards; }
#n-smarter { transform: translateY(60px); animation: nOut 1.05s cubic-bezier(.16,.84,.26,1) .45s forwards; }
#n-chart   { transform: translateY(-60px); animation: nOut 1.05s cubic-bezier(.16,.84,.26,1) .75s forwards; }

@keyframes wOut { to { transform: translateX(0); } }
@keyframes nOut { to { transform: translateY(0); } }

/* Arriving already arrived, for anyone who has asked for less motion. */
@media (prefers-reduced-motion: reduce) {
  #w-smarter, #w-chart, #n-smarter, #n-chart { transform: none; animation: none; }
}

/* Left-aligned, not centred. The masthead brand and the headline plate both
   sit 24px from the left edge; centring the content put it 184px in on a
   1440px screen, so the library started 160px right of the headline above
   it. Everything now hangs off the same left edge. */
main { max-width: var(--wrap); margin: 0; padding: 26px 24px 40px; }

h2 { font: 600 17px/1.25 var(--serif); margin: 0; }
.eyebrow {
  font: 600 10.5px/1 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- template browser ---------- */

.tools { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.tools input[type='search'] {
  flex: 1;
  min-width: 0;
  padding: 10px 13px;
  font: 14px var(--sans);
  color: var(--ink);
  background: var(--card);
  border: 1px solid #d6d1c7;
  border-radius: 7px;
}
.tools input[type='search']:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.count { font-size: 12px; color: var(--muted); white-space: nowrap; }

.split {
  display: grid;
  grid-template-columns: 250px 1fr;
  border: 1px solid var(--rule);
  border-radius: 8px;
  overflow: hidden;
  background: var(--card);
}

.idx { border-right: 1px solid var(--rule); background: #f7f5f1; max-height: 72vh; overflow-y: auto; }
.grp {
  font: 600 10px/1 var(--sans);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #a39c8e;
  padding: 14px 14px 7px;
}
.it {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px 14px;
  font: 13.5px var(--sans);
  color: #3f4652;
  background: none;
  border: 0;
  border-left: 3px solid transparent;
  cursor: pointer;
}
.it:hover { background: #f1eee8; }
.it.on { background: var(--card); border-left-color: #f2295b; font-weight: 600; color: var(--accent-ink); }

.pane { min-width: 0; }
.pv { padding: 16px 20px 18px; }
.pvh { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.fields { font-size: 11.5px; color: var(--muted); }
.acts { margin-left: auto; display: flex; gap: 8px; }

.copy, .dl {
  font: 600 12.5px/1 var(--sans);
  padding: 9px 14px;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid transparent;
}
.copy { background: var(--gradient); color: #fff; }
.dl { background: var(--card); color: #374151; border-color: #d6d1c7; }

.txt {
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: 6px;
  padding: 14px 16px;
  font: 14.5px/1.75 var(--sans);
  color: #262b33;
}
.txt p { margin: 0 0 0.95em; }
.txt p:last-child { margin-bottom: 0; }

/* The [- -] field: tinted as one unit, delimiters included, because the
   delimiters are what Dragon reads and what the clipboard carries. */
.f {
  background: var(--field-bg);
  color: var(--accent-ink);
  border-radius: 3px;
  padding: 1px 3px;
  font-weight: 600;
}

.status { min-height: 1.2em; margin: 9px 0 0; font-size: 12px; color: var(--muted); }

/* The real .docx, rendered client-side (see app.js renderDocPreview). It
   replaces the plain-text .txt view once it loads; inWrapper:false means
   docx-preview emits no page chrome of its own, so this box supplies it. */
.docpreview {
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: 6px;
  padding: 14px 16px;
  overflow-x: auto;
}

/* EPIC templates only: the Word doc's own banner and red section bars. */
.banner { display: block; max-width: 100%; height: auto; margin: 0 0 12px; border-radius: 4px; }
.txt .hd {
  display: block;
  background: #B82027;
  color: #fff;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 3px;
  margin: 6px 0;
}

/* ---------- lists shared by lectures, videos, blog ---------- */

.rows { border-top: 1px solid var(--rule); }
.row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 0;
  border-bottom: 1px solid var(--hair);
}
.row .nm { font: 600 14.5px/1.3 var(--serif); }
.row .ds { font-size: 12.5px; color: #777e8b; }
.row .meta { margin-left: auto; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- footer ---------- */

footer {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  max-width: var(--wrap);
  margin: 0;
  padding: 16px 24px 30px;
  border-top: 1px solid var(--rule);
  font-size: 11.5px;
  color: var(--muted);
}
footer a { color: var(--muted); }
footer .funding { margin-left: auto; }

/* ---------- narrow: the split becomes an accordion ---------- */

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .idx { border-right: 0; max-height: none; overflow: visible; }
  .pane:empty { display: none; }
  .it { border-left: 0; border-bottom: 1px solid var(--hair); padding: 11px 14px; }
  .it.on { border-bottom-color: transparent; }
  .pv { background: var(--card); border-bottom: 1px solid var(--hair); }
  .tl { border-left: 0; padding-left: 0; flex-basis: 100%; }
  .bar nav { margin-left: 0; flex-basis: 100%; }
  footer .funding { margin-left: 0; flex-basis: 100%; }
}

/* ---------- home ---------- */

.home { display: grid; grid-template-columns: 1fr 272px; gap: 36px; align-items: start; }
.home .note { max-width: 44em; font-size: 13.5px; color: var(--body); margin: 18px 0 0; }
.home .rows { margin-top: 10px; }
.home .row .nm { text-decoration: none; }
.home .row .nm:hover { text-decoration: underline; }
.home .row .meta { font-size: 12px; }

.tool {
  background: var(--card);
  border: 1px solid #ded9cf;
  border-radius: 4px;
  overflow: hidden;
}
/* An <a>, not a <div>: the gradient header reads as a clickable card, so it
   now is one, as a second route into the tool next to the "Open" button. */
.tool .hd {
  display: block;
  background: var(--gradient);
  color: #fff;
  padding: 12px 15px;
  text-decoration: none;
}
.tool .hd b { display: block; font: 700 14px/1.3 var(--serif); }
.tool .hd i { font: 400 11.5px/1.4 var(--sans); font-style: normal; opacity: 0.8; }
.tool .bd { padding: 14px 15px; }
.tool .bd p { margin: 0 0 12px; font-size: 12.5px; color: #6b7280; }
.tool .bd .copy { display: block; text-align: center; text-decoration: none; }
.tool .fine { margin: 11px 0 0; font-size: 11.5px; color: var(--muted); }

/* ---------- about ---------- */

.lead { max-width: 44em; font-size: 15.5px; color: var(--body); }
.cv { margin: 0 0 22px; max-width: 52em; }
.cv h2 { margin-bottom: 7px; }
.cv ul { margin: 0; padding-left: 1.1em; }
.cv li { margin-bottom: 4px; font-size: 14px; }
.cv p { margin: 0; font-size: 14.5px; color: var(--body); }

/* ---------- videos ---------- */

.videos { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 26px; }
.video h2 { margin-bottom: 9px; }
.frame { position: relative; padding-top: 56.25%; background: #0e0a0a; border-radius: 6px; overflow: hidden; }
.frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video .ds { font-size: 13px; color: var(--body); margin: 9px 0 0; }
.video .meta { font-size: 11.5px; color: var(--muted); margin: 5px 0 0; }

/* ---------- blog post ---------- */

.post { padding: 0; max-width: 54em; }
.post .intro { max-width: 44em; font-size: 15px; color: var(--body); }
.post .meta { font-size: 12px; color: var(--muted); }

/* ---------- contact ---------- */

.contact { display: grid; grid-template-columns: 1fr 260px; gap: 36px; align-items: start; }
.form { display: grid; gap: 14px; max-width: 34em; }
.form label { display: grid; gap: 5px; font: 600 12.5px var(--sans); color: var(--body); }
.form input, .form textarea {
  font: 14.5px var(--sans);
  color: var(--ink);
  padding: 9px 11px;
  background: var(--card);
  border: 1px solid #d6d1c7;
  border-radius: 6px;
}
.form input:focus, .form textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.form .copy { justify-self: start; border: 0; }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.direct h2 { margin-bottom: 7px; }
.direct p { font-size: 13.5px; color: var(--body); margin: 0 0 9px; }

.empty { color: var(--body); font-size: 14.5px; }

@media (max-width: 860px) {
  .home, .contact { grid-template-columns: 1fr; gap: 24px; }
  .videos { grid-template-columns: 1fr; }
}