/* Generated from brand/brand.css by npm run theme. Edit that file, not this one. */
/* Soap & Soil — design layer, shipped inside our theme (a fork of Ghost
   Headline). Edit here; `npm run theme` copies it into theme/assets/css/.

   Design brief: a practical manual, not a landing page. The reference is a
   printed field guide — a text serif throughout, squared off, one spot colour,
   numbered sections, rules instead of cards.

   The palette is a warm terracotta family, which is close to the scheme this
   file used to rule out. Still avoided, because they are the house style of
   every generated site: Inter, cream paper, rounded corners on everything, soft
   drop shadows, hover-scale image cards, uppercase pill chips.

   Headline exposes its own type and colour variables, so those are repointed
   at the top rather than fought selector by selector further down. */

/* Lato, served from the theme rather than fonts.googleapis.com. The Google
   stylesheet is cross-origin and render-blocking: it cost a DNS lookup, a TLS
   handshake and then a second connection to fonts.gstatic.com before any text
   could paint. Only the weights this file actually uses are shipped — 400 and
   700, upright and italic. Lato is SIL Open Font License 1.1. */
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/lato-400.woff2") format("woff2");
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/lato-700.woff2") format("woff2");
}
@font-face {
  font-family: "Lato";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/lato-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Lato";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/lato-700-italic.woff2") format("woff2");
}

:root {
  /* Amber walnut morning. Five swatches: walnut #4A413C, tan #CCB499,
     amber #C8906D, burnt #BB6C43, mist #EBEFEE.

     Three tones here are not in those five, and each exists for one reason:
     nothing in the palette between walnut and tan can carry text. Burnt on
     mist is 3.39:1 and amber is 2.36:1, both under the 4.5:1 body-text floor.
     So --ss-accent, --ss-accent-dark and --ss-muted are palette colours moved
     along their own hue (21deg, the hue the whole palette shares) until they
     read. Every surface, band, hairline and fill below is a swatch untouched. */
  --ss-ink: #4A413C;          /* walnut      8.57:1 on paper — AAA */
  --ss-paper: #EBEFEE;        /* mist */
  --ss-accent: #8F5233;       /* burnt -> 5.29:1  links, labels, markers */
  --ss-accent-dark: #78452B;  /* burnt -> 6.75:1  hover */
  --ss-brick: #BB6C43;        /* burnt, decorative only: never sets text */
  --ss-earth: #C8906D;        /* amber, decorative */
  --ss-muted: #6B5E57;        /* walnut -> 5.38:1  standfirsts, captions */
  --ss-wash: #CCB499;         /* tan,  quiet bands   walnut on it 5.00:1 */
  --ss-rule: #CCB499;         /* tan,  hairlines */

  /* One family across the site. Both names are kept because Headline's own
     variables below map onto them, and because every rule in this file already
     refers to one or the other — the distinction is now weight, not family. */
  --ss-serif: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ss-ui: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Headline's own variables. Repointing these changes the theme's type and
     palette at the source, so its own rules stay in charge of layout. */
  --font-serif: var(--ss-serif);
  --font-sans: var(--ss-ui);
  --gh-font-heading: var(--ss-serif);
  --gh-font-body: var(--ss-serif);
  --color-primary-text: var(--ss-ink);
  --color-secondary-text: var(--ss-muted);
  --color-black: var(--ss-ink);
  --color-darker-gray: var(--ss-ink);
  --color-dark-gray: var(--ss-muted);
  --color-mid-gray: #8D7C72;
  --color-light-gray: var(--ss-rule);
  --color-lighter-gray: var(--ss-wash);
}

body {
  font-family: var(--ss-serif);
  font-optical-sizing: auto;
  color: var(--ss-ink);
  /* Headline exposes no background-colour setting, unlike Source. */
  background-color: var(--ss-paper);
}

h1, h2, h3, h4, h5, h6,
.gh-article-title, .gh-card-title, .gh-topic-name {
  font-family: var(--ss-serif);
  font-optical-sizing: auto;
  font-weight: 700;
  letter-spacing: -0.008em;
  text-wrap: balance;
}

/* Text that belongs to the accessible name and to a crawler, but not to the
   layout. Used where a link reads fine in context visually — "More" beside a
   heading — but is meaningless on its own in a list of links. */
.ss-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--ss-accent);
  outline-offset: 2px;
}

/* --- masthead and footer -------------------------------------------------- */

.gh-head {
  border-bottom: 1px solid var(--ss-ink);
  background: var(--ss-paper);
}

.gh-head-menu a,
.gh-foot-menu a {
  font-family: var(--ss-ui);
  font-size: 0.88rem;
  font-weight: 400;
}

.gh-head-menu a:hover,
.gh-foot-menu a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* The header is dark text on paper, so the accent reads there: 5.29:1. */
.gh-head-menu a:hover {
  color: var(--ss-accent);
}

/* The footer inverts to walnut, where that same accent is 1.62:1 and all but
   invisible. Tan is the palette's light tone and clears AA at 5.00:1. */
.gh-foot-menu a:hover {
  color: var(--ss-wash);
}

.gh-foot {
  border-top: 1px solid var(--ss-ink);
}

/* --ss-muted is tuned for dark text on light paper. On the walnut footer it
   falls to 1.59:1, which is why this takes the light tone instead. */
.gh-copyright {
  font-family: var(--ss-ui);
  font-size: 0.8rem;
  color: var(--ss-wash);
}

/* --- home page sections --------------------------------------------------- */

/* Headline groups the home page into topic blocks. Each gets a ruled label
   rather than a floating heading. */
.gh-topic-name {
  padding-bottom: 0.4em;
  border-bottom: 2px solid var(--ss-ink);
  font-size: 1.3rem;
}

.gh-topic-footer a {
  font-family: var(--ss-ui);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ss-accent);
}

/* --- post feed ------------------------------------------------------------ */

.gh-card-image,
.gh-card-image img,
.gh-article-image img,
.gh-feature-image {
  border-radius: 0;
  box-shadow: none;
}

.gh-card-image {
  border: 1px solid var(--ss-earth);
  background: var(--ss-wash);
}

.gh-card-excerpt {
  color: var(--ss-muted);
  line-height: 1.55;
}

.gh-card-date {
  font-family: var(--ss-ui);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ss-muted);
}

/* --- article header ------------------------------------------------------- */

/* The category reads as a printed label with a rule under it, not a pill. */
.gh-article-tag {
  display: inline-block;
  padding: 0 0 0.28em;
  border-bottom: 2px solid currentColor;
  border-radius: 0;
  background: none;
  font-family: var(--ss-ui);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ss-accent);
}

.gh-article-tag { color: var(--ss-accent); }

.gh-article-title {
  font-size: clamp(2.15rem, 1.3rem + 3.1vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -0.018em;
}

/* The standfirst, set the way a magazine sets one. */
.gh-article-excerpt {
  font-size: 1.2rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--ss-muted);
  max-width: 34em;
}

/* Headline runs the date and reading time down a sidebar column. */
.gh-article-date,
.gh-article-length {
  font-family: var(--ss-ui);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ss-muted);
}

.gh-button-share {
  font-family: var(--ss-ui);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 0;
}

.gh-article-image {
  border-top: 1px solid var(--ss-ink);
  border-bottom: 1px solid var(--ss-ink);
}

/* --- article body --------------------------------------------------------- */

.gh-content {
  font-size: 1.14rem;
  line-height: 1.62;
  counter-reset: ss-section;
}

.gh-content li + li {
  margin-top: 0.35em;
}

/* Sections are numbered like a manual's. The counter skips the FAQ (tagged by
   the enhancement script) and the takeaways box, which are not steps in the
   argument. */
.gh-content > h2:not(.ss-faq-h) {
  counter-increment: ss-section;
  margin-top: 2.4em;
  padding-top: 0.55em;
  border-top: 1px solid var(--ss-ink);
  font-size: 1.5em;
  line-height: 1.2;
}

.gh-content > h2:not(.ss-faq-h)::before {
  content: counter(ss-section, decimal-leading-zero);
  display: block;
  margin-bottom: 0.2em;
  font-family: var(--ss-ui);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--ss-accent);
}

.gh-content > h2.ss-faq-h {
  margin-top: 2.4em;
  padding-top: 0.55em;
  border-top: 1px solid var(--ss-ink);
  font-size: 1.5em;
}

.gh-content > h3 {
  margin-top: 1.7em;
  font-size: 1.15em;
  font-weight: 700;
}

.gh-content a {
  color: var(--ss-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.gh-content a:hover {
  color: var(--ss-accent-dark);
}

/* Numbered steps get hanging numerals in the spot colour, so the eye finds
   step four without reading one to three. */
.gh-content > ol {
  list-style: none;
  padding-left: 2.6em;
  counter-reset: ss-step;
}

.gh-content > ol > li {
  position: relative;
  counter-increment: ss-step;
  margin-top: 0.7em;
}

.gh-content > ol > li::before {
  content: counter(ss-step);
  position: absolute;
  left: -2.6em;
  width: 1.9em;
  padding-top: 0.12em;
  font-family: var(--ss-ui);
  font-size: 0.8em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--ss-accent);
}

.gh-content ul li::marker {
  color: var(--ss-accent);
}

.gh-content blockquote {
  margin-left: 0;
  padding: 0 0 0 1.1em;
  border-left: 2px solid var(--ss-brick);
  background: none;
  font-style: italic;
  color: var(--ss-muted);
}

.gh-content hr {
  border: 0;
  border-top: 1px solid var(--ss-rule);
  margin: 2.4em 0;
}

.gh-content figcaption {
  font-family: var(--ss-ui);
  font-size: 0.8rem;
  color: var(--ss-muted);
}

/* --- key takeaways (built by the enhancement script) ---------------------- */

.ss-takeaways {
  margin: 2em 0 2.6em;
  padding: 0.9em 0 1.1em;
  border-top: 3px double var(--ss-ink);
  border-bottom: 1px solid var(--ss-ink);
  background: none;
}

.ss-takeaways h2 {
  margin: 0 0 0.6em;
  padding: 0;
  border: 0;
  font-family: var(--ss-ui);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ss-accent);
}

.ss-takeaways h2::before { content: none; }

.ss-takeaways ul { margin: 0; }
.ss-takeaways li::marker { color: var(--ss-accent); }

/* --- on this page (built by the enhancement script) ----------------------- */

.ss-toc {
  margin: 2em 0 2.6em;
  padding: 0.8em 0;
  border-top: 1px solid var(--ss-rule);
  border-bottom: 1px solid var(--ss-rule);
}

.ss-toc summary {
  cursor: pointer;
  font-family: var(--ss-ui);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ss-muted);
  list-style: none;
}

.ss-toc summary::-webkit-details-marker { display: none; }
.ss-toc summary::after { content: "[+]"; float: right; letter-spacing: 0; }
.ss-toc[open] summary::after { content: "[–]"; }

.ss-toc ol {
  margin: 0.8em 0 0.2em;
  padding-left: 0;
  list-style: none;
  counter-reset: ss-toc-item;
}

.ss-toc li {
  counter-increment: ss-toc-item;
  margin: 0 0 0.4em;
  font-size: 0.96rem;
}

.ss-toc li::before {
  content: counter(ss-toc-item, decimal-leading-zero) "  ";
  font-family: var(--ss-ui);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--ss-accent);
}

.ss-toc a {
  color: var(--ss-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ss-rule);
}

.ss-toc a:hover {
  color: var(--ss-accent);
  border-bottom-color: currentColor;
}

/* --- tables --------------------------------------------------------------- */

/* Headline sets content tables to inline-block; ours are full-width
   specification tables inside their own scroll container. */
.ss-table-wrap {
  margin: 2em 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.gh-content table:not(.gist table) {
  display: table;
  width: 100%;
  min-width: 480px;
  margin: 0;
  border-collapse: collapse;
  font-size: 0.98rem;
}

.gh-content th,
.gh-content td {
  padding: 0.6em 0.9em 0.6em 0;
  border-bottom: 1px solid var(--ss-rule);
  vertical-align: top;
  text-align: left;
}

.gh-content th {
  border-bottom: 2px solid var(--ss-ink);
  background: none;
  font-family: var(--ss-ui);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.gh-content tbody tr:last-child td {
  border-bottom: 1px solid var(--ss-ink);
}

/* --- FAQ ------------------------------------------------------------------ */

.gh-content h3.ss-faq-q {
  margin-top: 1.5em;
  font-size: 1.08em;
  font-weight: 700;
}

.gh-content h3.ss-faq-q + p {
  color: var(--ss-muted);
  margin-top: 0.35em;
}

/* --- print ---------------------------------------------------------------- */

@media print {
  .gh-head, .gh-foot, .gh-button-share, .ss-toc, .gh-article-image, .gh-article-sidebar {
    display: none !important;
  }
  .gh-content { font-size: 11pt; }
  .gh-content a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}