/* =========================================================================
   HOME FIRE WATCH  |  triadsafetyinc.com
   Class vocabulary: emb-  (hearth / ember field: mantel, flue, shelf, spark,
   gauge, casing, drill, runout, footing). One vocabulary, no second one.
   Everything is local: no font file, no remote sheet, no script.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------------------- */
:root {
  /* Palette: warm ash paper, ember brass as the dominant, brick red kept
     strictly for warnings so that a red mark on the page always means one. */
  --ash: #e6e4de;         /* page ground */
  --stock: #faf9f6;       /* the sheet the text sits on */
  --ink: #191b18;         /* running text */
  --ink-soft: #4e534d;    /* meta, captions, secondary text */
  --ember: #b07a12;       /* dominant: links, kickers, rules that lead */
  --ember-deep: #8a5c07;  /* hover and focus of the dominant */
  --alarm: #a1332e;       /* warnings only */
  --rule: #cbc7bd;        /* hairline */
  --rule-firm: #191b18;   /* firm rule */
  --wash: #f3e8cd;        /* flat ember tint behind a label */
  --shade: #efece4;       /* flat ground inside boxes */

  /* Faces: a transitional serif for headings, a humanist sans for reading,
     a narrow sans for every uppercase label. System stacks only. */
  --face-head: Charter, "Bitstream Charter", "Sitka Text", Cambria, "PT Serif", Georgia, serif;
  --face-text: "PT Sans", "Fira Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --face-tag: "PT Sans Narrow", "Liberation Sans Narrow", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;

  /* Rhythm: narrower sheet than the stock layout, narrower shelf, wider
     leading, quieter letterspacing. */
  --page: 68rem;
  --shelf: 17.5rem;
  --measure: 36em;
  --gutter: 2.75rem;
  --step: 1.05rem;
  --edge: clamp(0.95rem, 4vw, 2.4rem);

  --body: 1.075rem;
  --leading: 1.68;
  --caps: 0.07em;

  --hair: 1px solid var(--rule);
  --firm: 2px solid var(--rule-firm);
  --lead-bar: 3px solid var(--ember);
}

/* -------------------------------------------------------------------------
   2. BASE
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ash);
  color: var(--ink);
  font-family: var(--face-text);
  font-size: var(--body);
  line-height: var(--leading);
  overflow-wrap: break-word;
}

img, svg { max-width: 100%; height: auto; display: block; }

a { color: var(--ember-deep); text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
a:hover { color: var(--alarm); }

:focus-visible { outline: 3px solid var(--ember-deep); outline-offset: 2px; }

h1, h2, h3, h4 {
  font-family: var(--face-head);
  font-weight: 700;
  line-height: 1.18;
  margin: 0 0 calc(var(--step) * 0.55);
  letter-spacing: 0;
}

p, ul, ol, figure, table, blockquote, dl { margin: 0 0 var(--step); }

.emb-getout {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--stock);
  padding: 0.6rem 1rem;
  font-family: var(--face-tag);
  text-transform: uppercase;
  letter-spacing: var(--caps);
  z-index: 50;
}
.emb-getout:focus { left: 0; color: var(--stock); }

/* -------------------------------------------------------------------------
   3. HEARTH: the sheet
   ------------------------------------------------------------------------- */
.emb-hearth {
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 var(--edge) calc(var(--step) * 3);
  background: var(--stock);
  border-inline: var(--hair);
}

/* -------------------------------------------------------------------------
   4. MANTEL: the head of the sheet, set flush left
   ------------------------------------------------------------------------- */
.emb-mantel {
  padding-block: calc(var(--step) * 1.5) calc(var(--step) * 0.9);
  border-block-end: var(--firm);
}

.emb-mantel__strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.4rem;
  font-family: var(--face-tag);
  font-size: 0.79rem;
  text-transform: uppercase;
  letter-spacing: var(--caps);
  color: var(--ink-soft);
  padding-block-end: 0.5rem;
  margin-block-end: calc(var(--step) * 0.8);
  border-block-end: var(--hair);
}

.emb-mantel__name {
  font-size: clamp(2rem, 6.2vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: -0.012em;
  margin: 0;
  text-align: left;
}
.emb-mantel__name--small { font-size: clamp(1.4rem, 3.4vw, 2rem); }
.emb-mantel__name a { color: inherit; text-decoration: none; }
.emb-mantel__name a:hover { color: var(--ember-deep); }
.emb-mantel__name em { font-style: normal; color: var(--ember-deep); }

.emb-mantel__line {
  font-family: var(--face-text);
  font-size: 1.02rem;
  color: var(--ink-soft);
  max-width: 44ch;
  margin: 0.5rem 0 0;
}

/* Ledges: two or three standing notes under the name (front page only) */
.emb-ledges {
  display: grid;
  gap: 0.5rem 1.6rem;
  grid-template-columns: 1fr;
  margin-block-start: calc(var(--step) * 1);
  font-family: var(--face-tag);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: var(--caps);
  color: var(--ink-soft);
}
@media (min-width: 44rem) { .emb-ledges { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.emb-ledge { border-block-start: var(--lead-bar); padding-block-start: 0.4rem; margin: 0; }
.emb-ledge b { display: block; color: var(--ink); font-weight: 700; }

/* -------------------------------------------------------------------------
   5. REGISTER: the section list
   ------------------------------------------------------------------------- */
.emb-register { padding-block: 0.6rem; border-block-end: var(--hair); }
.emb-register ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--face-tag);
  font-size: 0.92rem;
  text-transform: uppercase;
  letter-spacing: var(--caps);
}
.emb-register a { color: var(--ink); text-decoration: none; padding-block: 0.2rem; display: inline-block; }
.emb-register a:hover { color: var(--ember-deep); text-decoration: underline; }
.emb-register [aria-current="page"] { color: var(--ember-deep); box-shadow: inset 0 -3px 0 var(--ember); }

/* -------------------------------------------------------------------------
   6. HEARTHWORK: shelf on the left, flue on the right, from 58rem up.
   In the markup the flue comes first and the shelf second, so that on a
   phone the reading column is on top. Do not swap the two children.
   ------------------------------------------------------------------------- */
.emb-hearthwork {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(var(--step) * 1.9);
  padding-block-start: calc(var(--step) * 1.6);
}
.emb-flue { min-width: 0; }
.emb-shelf { min-width: 0; }

@media (min-width: 58rem) {
  .emb-hearthwork {
    grid-template-columns: var(--shelf) minmax(0, 1fr);
    gap: var(--gutter);
  }
  .emb-flue  { grid-column: 2; grid-row: 1; }
  .emb-shelf {
    grid-column: 1;
    grid-row: 1;
    border-inline-end: var(--hair);
    padding-inline-end: calc(var(--gutter) / 2);
  }
}

/* -------------------------------------------------------------------------
   7. TAGS AND STAMPS
   ------------------------------------------------------------------------- */
.emb-tag {
  display: inline-block;
  font-family: var(--face-tag);
  font-size: 0.79rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--caps);
  color: var(--ember-deep);
  text-decoration: none;
}
.emb-tag--alarm { color: var(--alarm); }
.emb-tag--flat { background: var(--wash); color: var(--ink); padding: 0.12rem 0.42rem; }

.emb-stamp {
  font-family: var(--face-tag);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
}

.emb-serviceline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.8rem;
  margin-block-end: 0.35rem;
}

/* -------------------------------------------------------------------------
   8. BEACON: the front-page opener
   ------------------------------------------------------------------------- */
.emb-beacon { padding-block-end: calc(var(--step) * 1.3); border-block-end: var(--firm); }
.emb-beacon__title { font-size: clamp(1.7rem, 4.4vw, 2.7rem); margin-block: 0.2rem 0.6rem; }
.emb-beacon__standfirst { font-size: 1.16rem; color: var(--ink-soft); max-width: var(--measure); }
.emb-beacon__plate { margin-block: var(--step); }
.emb-beacon__plate img { width: 100%; border: var(--hair); }

.emb-caption {
  font-family: var(--face-tag);
  font-size: 0.8rem;
  color: var(--ink-soft);
  padding-block-start: 0.35rem;
  border-block-start: var(--hair);
  margin-block-start: 0.35rem;
}

/* -------------------------------------------------------------------------
   9. RUN: the list of guides
   ------------------------------------------------------------------------- */
.emb-blockhead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem 1rem;
  border-inline-start: var(--lead-bar);
  padding: 0.1rem 0 0.1rem 0.7rem;
  margin-block: calc(var(--step) * 1.8) var(--step);
}
.emb-blockhead h2 {
  font-family: var(--face-tag);
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: var(--caps);
  margin: 0;
}

.emb-run { list-style: none; margin: 0; padding: 0; }

.emb-notice { padding-block: var(--step); border-block-end: var(--hair); }
.emb-notice:last-child { border-block-end: 0; }
.emb-notice__title { font-size: 1.26rem; margin: 0 0 0.3rem; }
.emb-notice__title a { color: inherit; text-decoration: none; }
.emb-notice__title a:hover { color: var(--ember-deep); text-decoration: underline; }
.emb-notice__gist { margin: 0 0 0.45rem; color: var(--ink-soft); max-width: var(--measure); }

.emb-onward {
  font-family: var(--face-tag);
  font-size: 0.84rem;
  text-transform: uppercase;
  letter-spacing: var(--caps);
  text-decoration: none;
  border-block-end: 1px solid currentColor;
}
.emb-onward::after { content: " \2192"; }

/* -------------------------------------------------------------------------
   10. SHELF BOXES
   ------------------------------------------------------------------------- */
.emb-shelfbox { margin-block-end: calc(var(--step) * 1.9); }
.emb-shelfbox__title {
  font-family: var(--face-tag);
  font-size: 0.88rem;
  text-transform: uppercase;
  letter-spacing: var(--caps);
  margin: 0 0 0.6rem;
  padding-block-end: 0.3rem;
  border-block-end: var(--firm);
}
.emb-shelfbox__note { font-family: var(--face-tag); font-size: 0.8rem; color: var(--ink-soft); margin-block-start: 0.6rem; }

/* Sparks: numbered short notes */
.emb-sparks { list-style: none; margin: 0; padding: 0; counter-reset: spark; }
.emb-spark {
  padding-block: 0.7rem;
  border-block-end: var(--hair);
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: 0.15rem 0.55rem;
}
.emb-spark:last-child { border-block-end: 0; }
.emb-spark::before {
  counter-increment: spark;
  content: counter(spark, decimal-leading-zero);
  font-family: var(--face-tag);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ember-deep);
  grid-row: span 2;
  padding-block-start: 0.2rem;
}
.emb-spark h3 { font-size: 1rem; margin: 0; }
.emb-spark h3 a { color: inherit; text-decoration: none; }
.emb-spark h3 a:hover { color: var(--ember-deep); text-decoration: underline; }
.emb-spark p { margin: 0.15rem 0 0; font-size: 0.93rem; color: var(--ink-soft); }

/* Gauges: a figure and what it means */
.emb-gauges { list-style: none; margin: 0; padding: 0; }
.emb-gauge { padding-block: 0.7rem; border-block-end: var(--hair); }
.emb-gauge:last-child { border-block-end: 0; }
.emb-gauge__figure {
  display: block;
  font-family: var(--face-head);
  font-size: 1.95rem;
  line-height: 1.05;
  color: var(--ember-deep);
}
.emb-gauge__label { display: block; font-family: var(--face-tag); font-size: 0.83rem; color: var(--ink-soft); margin-block-start: 0.15rem; }

/* Casing: a bordered note */
.emb-casing { border: var(--hair); border-inline-start: var(--lead-bar); background: var(--shade); padding: calc(var(--step) * 0.85); }
.emb-casing p:last-child { margin-block-end: 0; }

/* Drill: a dated list of things that come round again */
.emb-drill { list-style: none; margin: 0; padding: 0; }
.emb-drill li {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr);
  gap: 0.45rem;
  padding-block: 0.55rem;
  border-block-end: var(--hair);
  font-size: 0.95rem;
}
.emb-drill li:last-child { border-block-end: 0; }
.emb-drill time { font-family: var(--face-tag); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); padding-block-start: 0.15rem; }

/* Jumps: a plain list of links */
.emb-jumps { list-style: none; margin: 0; padding: 0; }
.emb-jumps li { padding-block: 0.45rem; border-block-end: var(--hair); }
.emb-jumps li:last-child { border-block-end: 0; }
.emb-jumps a { text-decoration: none; }
.emb-jumps a:hover { text-decoration: underline; }

/* -------------------------------------------------------------------------
   11. THE GUIDE PAGES
   ------------------------------------------------------------------------- */
.emb-trail {
  font-family: var(--face-tag);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  margin-block-end: 0.8rem;
}
.emb-trail ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.25rem 0.45rem; margin: 0; padding: 0; }
.emb-trail li + li::before { content: "/\00a0"; color: var(--rule); }

.emb-titleblock { border-block-end: var(--firm); padding-block-end: var(--step); margin-block-end: var(--step); }
.emb-titleblock h1 { font-size: clamp(1.8rem, 4.6vw, 2.85rem); margin-block: 0.25rem 0.5rem; }

.emb-standfirst { font-size: 1.18rem; color: var(--ink-soft); max-width: var(--measure); margin-block-end: var(--step); }

.emb-byline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  font-family: var(--face-tag);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: var(--caps);
  color: var(--ink-soft);
  margin: 0;
}
.emb-byline b { color: var(--ink); }

.emb-body { max-width: var(--measure); }
.emb-body h2 {
  font-size: 1.48rem;
  margin-block: calc(var(--step) * 1.7) 0.5rem;
  padding-inline-start: 0.65rem;
  border-inline-start: var(--lead-bar);
}
.emb-body h3 {
  font-family: var(--face-tag);
  font-size: 1.06rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-block: calc(var(--step) * 1.1) 0.3rem;
}
.emb-body ul, .emb-body ol { padding-inline-start: 1.25rem; }
.emb-body li { margin-block-end: 0.4rem; }
.emb-body > p:first-child { font-size: 1.08rem; }

/* Definition pairs, for the short extractable answers */
.emb-body dt { font-family: var(--face-tag); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.92rem; color: var(--ink); margin-block-start: 0.6rem; }
.emb-body dd { margin: 0.1rem 0 0; color: var(--ink-soft); }

/* Checklist: square markers, for the pages people work through */
.emb-checklist { list-style: none; padding-inline-start: 0; }
.emb-checklist li { position: relative; padding-inline-start: 1.6rem; margin-block-end: 0.5rem; }
.emb-checklist li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.45em;
  width: 0.72rem;
  height: 0.72rem;
  border: 2px solid var(--ember);
  background: var(--stock);
}

/* Callout: a boxed instruction with a label */
.emb-callout { border: var(--hair); border-block-start: var(--lead-bar); background: var(--shade); padding: calc(var(--step) * 0.9); margin-block: calc(var(--step) * 1.2); }
.emb-callout p:last-child, .emb-callout ul:last-child { margin-block-end: 0; }
.emb-callout__label {
  display: block;
  font-family: var(--face-tag);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--caps);
  color: var(--ember-deep);
  margin-block-end: 0.35rem;
}
.emb-callout--alarm { border-block-start: 3px solid var(--alarm); }
.emb-callout--alarm .emb-callout__label { color: var(--alarm); }

.emb-plate { margin-block: calc(var(--step) * 1.4); max-width: 100%; }
.emb-plate img { width: 100%; border: var(--hair); }
.emb-plate figcaption { font-family: var(--face-tag); font-size: 0.8rem; color: var(--ink-soft); padding-block-start: 0.35rem; border-block-start: var(--hair); margin-block-start: 0.35rem; }

.emb-flare {
  border-inline-start: 4px solid var(--ember);
  padding: 0.15rem 0 0.15rem 1rem;
  margin-block: calc(var(--step) * 1.2);
  font-family: var(--face-head);
  font-size: 1.24rem;
  line-height: 1.38;
}
.emb-flare cite {
  display: block;
  font-family: var(--face-tag);
  font-style: normal;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: var(--caps);
  color: var(--ink-soft);
  margin-block-start: 0.45rem;
}

/* Every table lives inside a runout, or a wide table pushes the page sideways */
.emb-runout { overflow-x: auto; margin-block-end: var(--step); border-block: var(--hair); }
.emb-runout table { border-collapse: collapse; width: 100%; min-width: 30rem; margin: 0; font-size: 0.96rem; }
.emb-runout caption {
  font-family: var(--face-tag);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: var(--caps);
  text-align: left;
  padding-block: 0.5rem;
  color: var(--ink-soft);
}
.emb-runout th, .emb-runout td { text-align: left; padding: 0.5rem 0.7rem; border-block-end: var(--hair); vertical-align: top; }
.emb-runout thead th {
  font-family: var(--face-tag);
  font-size: 0.83rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-block-end: var(--firm);
}
.emb-runout tbody tr:last-child td { border-block-end: 0; }

.emb-endnote { border-block-start: var(--firm); margin-block-start: calc(var(--step) * 1.7); padding-block-start: var(--step); }
.emb-marks { display: flex; flex-wrap: wrap; gap: 0.35rem; list-style: none; margin: 0 0 var(--step); padding: 0; }
.emb-marks span, .emb-marks a {
  display: inline-block;
  font-family: var(--face-tag);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  border: var(--hair);
  padding: 0.16rem 0.48rem;
  color: var(--ink);
}
.emb-marks a:hover { border-color: var(--ember); color: var(--ember-deep); }

/* -------------------------------------------------------------------------
   12. FOOTING
   ------------------------------------------------------------------------- */
.emb-footing {
  border-block-start: var(--firm);
  margin-block-start: calc(var(--step) * 2.2);
  padding-block-start: calc(var(--step) * 1.2);
  font-size: 0.95rem;
}
.emb-footing__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--step) var(--gutter); }
@media (min-width: 46rem) { .emb-footing__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.emb-footing h2 {
  font-family: var(--face-tag);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: var(--caps);
  margin: 0 0 0.5rem;
  padding-block-end: 0.25rem;
  border-block-end: var(--hair);
}
.emb-footing ul { list-style: none; margin: 0; padding: 0; }
.emb-footing li { padding-block: 0.18rem; }
.emb-footing p { color: var(--ink-soft); }
.emb-footing__line {
  border-block-start: var(--hair);
  margin-block-start: var(--step);
  padding-block-start: 0.6rem;
  font-family: var(--face-tag);
  font-size: 0.79rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.2rem;
  justify-content: space-between;
}

/* -------------------------------------------------------------------------
   13. SMALL HELP
   ------------------------------------------------------------------------- */
.emb-mute {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}
.emb-tight { margin-block-end: 0; }
.emb-lead { max-width: var(--measure); color: var(--ink-soft); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

@media print {
  body { background: #fff; }
  .emb-hearth { border: 0; max-width: none; }
  .emb-register, .emb-getout { display: none; }
  .emb-shelf { border: 0; }
}