/* The shared theme every landing site is built from. No framework. Mobile
   first: most of this page's traffic is a phone in the Meta feed, and desktop
   is the minority that has to be good rather than the majority that has to be
   great.

   THE CONTRACT: every colour, font, radius, shadow and measure is a custom
   property declared ONCE in `:root` below, and nowhere else in this file is a
   literal value of any of those kinds. build.py reads that block to learn the
   theme keys a site.yaml `theme:` may override, and appends the site's override
   block after this file, so a site can re-colour the whole page without
   touching a selector. Class names are the other half of the contract: a site's
   own styles.css may restyle them and must never rename them, because the
   shared partials, cta.js and the test suites all address them by name.

   TYPE: two system stacks, no web font. The story runs in the serif so it reads
   as an article rather than a landing page, and every interface surface (top
   bar, product card, FAQ, buttons) runs in the sans so it reads as a control.
   Georgia is on effectively every phone and desktop we take traffic from, which
   buys the editorial voice for zero bytes and zero render-blocking requests. */

:root {
  --ink: #191713;
  --ink-soft: #5e564b;
  /* 4.7:1 on the page ground. Every use is small text (the top bar label, the
     editor's note, captions, the footer), so it has to clear AA on its own. */
  --ink-faint: #756c5e;
  --paper: #f7f3ec;
  --paper-raised: #fffdf9;
  --line: #e2d9cb;
  --line-soft: #ece4d8;
  /* One accent, used for every CTA and nothing else. A deep cobalt-navy reads
     as trustworthy at button size; a warmer or brighter one reads as a sale. */
  --accent: #23407c;
  --accent-deep: #1a3060;
  --accent-hover: #1a3060;
  --accent-ink: #fdfbf7;
  /* The offer strip on the card: the accent at 6%, so it reads as the same
     colour as the button rather than a second one. */
  --accent-tint: rgba(35, 64, 124, 0.06);
  /* The product shots carry their own white ground, and the card image and the
     end-on figure are cropped, so the ground has to be painted behind them. */
  --card-image-bg: #ffffff;
  --shadow: 0 1px 2px rgba(25, 23, 19, 0.14);
  --shadow-sticky: 0 -6px 18px rgba(25, 23, 19, 0.07);
  --serif: Georgia, "Iowan Old Style", "Times New Roman", Times, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --radius: 0.5rem;
  --radius-sm: 0.375rem;
  --radius-lg: 0.75rem;
  --measure: 34rem;
  /* 62 to 66 characters of Georgia at the desktop story size. Wider and the
     eye loses the line return, which is what kills long-copy read-through. */
  --measure-wide: 36rem;
  --rail-width: 22rem;
  --bar-height: 5.25rem;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 1.0625rem/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* ----- top bar ----------------------------------------------------------- */

/* `viewport-fit=cover` puts the document under the rounded corners and the
   landscape sensor housing, so every full-bleed surface has to pay the side
   insets itself. Without these, a phone held sideways clips the top bar's CTA
   and the first character of every line of the story. */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.625rem max(1.25rem, env(safe-area-inset-right)) 0.625rem
    max(1.25rem, env(safe-area-inset-left));
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.topbar__label {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.topbar__link {
  /* 48px tap target without a 48px-looking button: the padding does the work
     and the negative margin keeps it from pushing the bar taller. */
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  margin: -0.5rem -0.5rem -0.5rem 0;
  padding: 0 0.5rem;
  color: var(--accent);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  border-bottom: none;
}

/* ----- layout ------------------------------------------------------------ */

.wrap {
  padding: 0 max(1.25rem, env(safe-area-inset-right)) 0 max(1.25rem, env(safe-area-inset-left));
}

.layout {
  max-width: var(--measure);
  margin: 0 auto;
}

/* ----- the lede ---------------------------------------------------------- */

/* The bottom padding is what used to be the hero figure's top margin: without
   it the byline and the opening sentence read as one paragraph. */
.lede {
  padding: 2.25rem 0 1.25rem;
  border-bottom: 1px solid var(--line-soft);
}

.lede__headline {
  margin: 0 0 1rem;
  font-family: var(--serif);
  font-size: clamp(1.875rem, 7.5vw, 2.5rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.lede__dek {
  margin: 0 0 1.25rem;
  font-family: var(--serif);
  font-size: 1.1875rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.lede__byline {
  margin: 0 0 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* ----- figures ----------------------------------------------------------- */

.figure {
  margin: 1.75rem 0 0;
}

.figure img {
  width: 100%;
  border-radius: var(--radius-sm);
  /* The product shots carry their own white ground, which would otherwise bleed
     into the cream page with no edge. */
  border: 1px solid var(--line-soft);
}

/* Cropped, not letterboxed: the bedroom source is a portrait export, and a
   full-height block of bedding inside the story is a long scroll past a photo
   the reader has already read. The square crop takes bedding off the top and
   bottom, not the pillow. */
.figure--break {
  margin: 2rem 0;
}

.figure--break img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* A landscape photo shown at the source's own 3:2, so nothing is cropped. */
.figure--wide {
  margin: 2rem 0;
}

.figure--wide img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* Matches the close-up's own aspect, so the cut-out is never clipped: its
   depth IS the point of the shot and a cover crop eats the edges first. */
.figure--mech img {
  aspect-ratio: 1200 / 896;
  object-fit: cover;
  background: var(--card-image-bg);
}

.figure figcaption {
  margin-top: 0.625rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-faint);
}

/* ----- the story --------------------------------------------------------- */

/* 17px, not 18px. Georgia runs large for its point size, and at 18/1.7 a 390px
   screen took about 44 characters a line, which turns a 1000-word story into a
   scroll nobody finishes. 17/1.65 buys back roughly a line in six. */
.story {
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.65;
}

.story p {
  margin: 0 0 1.25rem;
}

.story__opening {
  font-size: 1.25rem;
  line-height: 1.6;
}

.story h2 {
  margin: 2.25rem 0 0.875rem;
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.005em;
}

.quote {
  margin: 1.75rem 0;
  padding: 0 0 0 1.25rem;
  border-left: 3px solid var(--accent);
  color: var(--ink-soft);
}

.quote p:last-child {
  margin-bottom: 0;
}

.story__signoff {
  font-style: italic;
  color: var(--ink-soft);
}

.story__note {
  margin: 2rem 0 0;
  font-family: var(--sans);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-faint);
}

.story__note + .story__cta {
  margin-top: 0.875rem;
}

.story__cta {
  margin: 2rem 0;
  padding: 1.5rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-family: var(--sans);
  text-align: center;
}

/* ----- mechanism --------------------------------------------------------- */

.mech {
  margin-top: 2.75rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}

.mech__title {
  margin: 0 0 1.25rem;
  font-family: var(--serif);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.25;
}

.mech__steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: mech;
}

.mech__steps li {
  display: flex;
  gap: 0.875rem;
  padding: 0.875rem 0;
  border-top: 1px solid var(--line-soft);
  counter-increment: mech;
}

.mech__steps li:first-child {
  border-top: none;
}

/* The number IS the illustration. No icons, no diagram: three counted lines
   are the least that can carry a three-step mechanism. */
.mech__steps li::before {
  content: counter(mech);
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.75rem;
  text-align: center;
}

.mech__step {
  line-height: 1.55;
}

/* ----- the fold ---------------------------------------------------------- */

/* The photo the ad promised, straight under the byline. `figure--fold` keeps
   the close-up's own aspect (the cut-out's depth is the point) and takes less
   air than a story break so the two sentences under it stay on the first
   screen of a phone. */
.figure--fold {
  margin: 1.5rem 0 0;
}

.figure--fold img {
  aspect-ratio: 1200 / 896;
  object-fit: cover;
  background: var(--card-image-bg);
}

.fold {
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.6;
}

.fold p {
  margin: 1.25rem 0;
}

.fold .story__cta {
  margin: 1.5rem 0 0;
  border-bottom: none;
  padding-bottom: 0;
}

/* ----- proof ------------------------------------------------------------- */

.proof {
  margin-top: 2.75rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}

.proof__title {
  margin: 0 0 0.75rem;
  font-family: var(--serif);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.25;
}

.proof__lead {
  margin: 0 0 1.25rem;
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.proof__quote {
  margin: 0 0 1.25rem;
  padding: 0 0 0 1.25rem;
  border-left: 3px solid var(--accent);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.6;
}

.proof__quote p {
  margin: 0 0 0.5rem;
}

.proof__cite {
  display: block;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-style: normal;
  color: var(--ink-faint);
}

/* ----- trial ------------------------------------------------------------- */

.trial {
  margin-top: 2.75rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
  font-family: var(--serif);
}

.trial__title {
  margin: 0 0 0.75rem;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.25;
}

.trial p {
  margin: 0 0 1.25rem;
  font-size: 1.125rem;
  line-height: 1.6;
}

.trial .story__cta {
  margin: 0;
  border-top: none;
  padding-top: 0;
}

/* ----- the full account, folded ------------------------------------------ */

/* The story a reader has already had from the ad, kept whole for the one who
   has not. Closed by default; the summary is a control, so it runs in the
   sans. */
.story__full {
  margin: 2rem 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

.story__full > summary {
  display: flex;
  align-items: center;
  min-height: 3rem;
  padding: 0.75rem 1.75rem 0.75rem 0;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  position: relative;
}

.story__full > summary::-webkit-details-marker {
  display: none;
}

.story__full > summary::after {
  content: "";
  position: absolute;
  right: 0.375rem;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--ink-faint);
  border-bottom: 2px solid var(--ink-faint);
  transform: translateY(-0.15rem) rotate(45deg);
}

.story__full[open] > summary::after {
  transform: translateY(0.1rem) rotate(225deg);
}

.story__full[open] > summary {
  border-bottom: 1px solid var(--line-soft);
}

/* ----- product card ------------------------------------------------------ */

.layout__aside {
  margin-top: 2.75rem;
}

.card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper-raised);
}

.card__image {
  width: 100%;
  /* The bedroom source is portrait; a 4:3 crop keeps the pillow, drops the
     bedding above and below it, and leaves the card's button above the fold
     on a 1280x800 desktop, which the e2e suite holds it to. */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--card-image-bg);
  border-bottom: 1px solid var(--line-soft);
}

.card__body {
  padding: 1.125rem;
}

.card__title {
  margin: 0 0 0.5rem;
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
}

.card__desc {
  margin: 0 0 0.875rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.card__points {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.card__points li {
  position: relative;
  padding: 0.4375rem 0 0.4375rem 1.375rem;
  border-top: 1px solid var(--line-soft);
}

.card__points li::before {
  content: "";
  position: absolute;
  left: 0.25rem;
  top: 1rem;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--accent);
}

.card__offer {
  margin: 0 0 0.875rem;
  padding: 0.625rem 0.75rem;
  border-radius: var(--radius-sm);
  background: var(--accent-tint);
  color: var(--accent-deep);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.45;
}


/* ----- buttons ----------------------------------------------------------- */

/* Full width and loud on purpose: on a phone the button is the one thing on
   the page that has to be unmissable under a thumb, and an uppercase label at
   this size reads as a control rather than a line of the story. */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  width: 100%;
  min-height: 3rem;
  padding: 1.15rem 1.5rem;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--sans);
  font-size: clamp(1.12rem, 3.3vw, 1.38rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.btn:hover {
  background: var(--accent-hover);
}

.btn:active {
  transform: translateY(1px);
}

.btn__arrow {
  display: inline-block;
}

.btn--primary {
  box-shadow: var(--shadow);
}

.btn__note {
  display: block;
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  color: var(--ink-faint);
}

.btn--ghost {
  display: inline-flex;
  width: auto;
  min-height: 0;
  padding: 0.875rem 1.5rem;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
  font-size: 1rem;
}

.btn--ghost:hover {
  background: var(--paper-raised);
}

/* The product bar's button shares the row with the thumb and the name, so it
   gives up the full width and the display size. */
/* The product bar shares the row with a thumb and two lines of text, so its
   button is the compact one: no arrow, smaller type, tighter tracking. The
   full-width `button` variant keeps the big treatment. */
.btn--sticky {
  flex: 0 0 auto;
  width: auto;
  min-height: 2.75rem;
  padding: 0.65rem 0.75rem;
  font-size: 0.8125rem;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

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

.faq {
  margin-top: 2.75rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}

.faq__title {
  margin: 0 0 1rem;
  font-family: var(--serif);
  font-size: 1.375rem;
  font-weight: 700;
}

.faq__item {
  border-top: 1px solid var(--line-soft);
}

.faq__item:last-of-type {
  border-bottom: 1px solid var(--line-soft);
}

.faq__item summary {
  display: flex;
  align-items: center;
  min-height: 3rem;
  padding: 0.75rem 1.75rem 0.75rem 0;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  position: relative;
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__item summary::after {
  content: "";
  position: absolute;
  right: 0.375rem;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--ink-faint);
  border-bottom: 2px solid var(--ink-faint);
  transform: translateY(-0.15rem) rotate(45deg);
}

.faq__item[open] summary::after {
  transform: translateY(0.1rem) rotate(225deg);
}

.faq__item p {
  margin: 0 0 1rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* ----- sticky bar -------------------------------------------------------- */

/* Hidden with visibility rather than a transform alone: a bar that is merely
   moved off screen still takes clicks meant for the footer under it. */
.sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  visibility: hidden;
  opacity: 0;
  transform: translateY(100%);
  padding: 0.625rem max(1.25rem, env(safe-area-inset-right))
    calc(0.625rem + env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-left));
  background: var(--paper-raised);
  border-top: 1px solid var(--line);
  box-shadow: var(--shadow-sticky);
  transition:
    transform 0.18s ease,
    opacity 0.18s ease,
    visibility 0s linear 0.18s;
}

.sticky.is-visible {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition-delay: 0s;
}

.sticky__inner {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  max-width: var(--measure);
  margin: 0 auto;
}

/* ----- first nights / who it is for ------------------------------------- */

.firstnights {
  margin-top: 2.5rem;
}

.firstnights__title {
  font-family: var(--serif);
  font-size: 1.25rem;
  margin: 1.75rem 0 0.5rem;
}

/* ----- disclaimer -------------------------------------------------------- */

.disclaimer {
  margin: 1rem auto 0;
  max-width: var(--measure);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--ink-faint);
}

.sticky__thumb {
  flex: 0 0 auto;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--radius);
  object-fit: cover;
}

/* min-width 0 so the name can give way instead of pushing the button off the
   right edge; the button keeps its full label. The name wraps to two lines
   before it is cut: beside a wide button on a 390px phone one line held six
   characters of "The pillow with the shoulder cut-outs". */
.sticky__text {
  flex: 1 1 auto;
  min-width: 0;
}

.sticky__name {
  margin: 0;
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.2;
  color: var(--ink);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.sticky__note {
  margin: 0.125rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.3;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (prefers-reduced-motion: reduce) {
  .sticky {
    transition: none;
  }

}

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

.footer {
  border-top: 1px solid var(--line);
  margin-top: 3rem;
  padding: 2rem max(1.25rem, env(safe-area-inset-right)) 2rem
    max(1.25rem, env(safe-area-inset-left));
  /* Room for the sticky bar so it can never sit over the privacy link, which
     is the one link on the page a person actually has to be able to reach. */
  padding-bottom: calc(2rem + var(--bar-height) + env(safe-area-inset-bottom));
  color: var(--ink-faint);
  font-size: 0.8125rem;
  line-height: 1.5;
  text-align: center;
}

.footer a {
  color: var(--ink-soft);
}

.footer__links,
.footer__note {
  margin: 0 auto 0.5rem;
  max-width: 30rem;
}

/* ----- the shared /privacy/ page ---------------------------------------- */

/* Same side insets as the story page: /privacy/ is served under the same
   `viewport-fit=cover` head, and it is the page carrying the contact address
   and the operating business, so it is the last one that may clip. */
.page {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 2rem max(1.25rem, env(safe-area-inset-right)) 0 max(1.25rem, env(safe-area-inset-left));
}

.page h1 {
  font-family: var(--serif);
  font-size: 1.75rem;
  line-height: 1.2;
}

.page .updated {
  font-size: 0.875rem;
  color: var(--ink-faint);
}

.page ul {
  padding-left: 1.25rem;
}

.page li {
  margin-bottom: 0.5rem;
}

.page table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  margin: 1rem 0;
}

.page th,
.page td {
  text-align: left;
  vertical-align: top;
  padding: 0.5rem 0.5rem 0.5rem 0;
  border-bottom: 1px solid var(--line-soft);
}

.page h2 {
  margin: 2rem 0 0.5rem;
  font-size: 1.1875rem;
}

.page h3 {
  margin: 1.5rem 0 0.5rem;
  font-size: 1.0625rem;
}

.page h4 {
  margin: 1.25rem 0 0.375rem;
  font-size: 1rem;
}

.page__cta {
  margin-top: 2rem;
}

/* ----- desktop ----------------------------------------------------------- */

/* The story keeps a reading measure and the product card moves into a sticky
   right column, so the offer never scrolls away from a desktop reader. The
   sticky bottom bar is then redundant and would only cover the footer. */
@media (min-width: 60rem) {
  .layout {
    display: grid;
    max-width: 65rem;
    grid-template-columns: minmax(0, 1fr) var(--rail-width);
    grid-template-areas:
      "top aside"
      "bottom aside";
    align-items: start;
    column-gap: 3.5rem;
  }

  .layout__top {
    grid-area: top;
    min-width: 0;
  }

  .layout__bottom {
    grid-area: bottom;
    min-width: 0;
  }

  .layout__aside {
    grid-area: aside;
    align-self: start;
    position: sticky;
    /* Clear of the top bar with a little air, so the card lands high enough
       that its CTA sits above the fold on a 1280x800 screen. */
    top: 1.5rem;
    margin-top: 0.5rem;
  }

  /* The card has to fit a 1280x800 fold with its button whole, and it has to
     do so in the FALLBACK serif: CI has no Crimson Pro, and DejaVu Serif runs
     wider and taller. The photo gives up height first (3:2, the bedding above
     and below the pillow), then the body's air. Phone layout is untouched. */
  .card__image {
    aspect-ratio: 3 / 2;
  }

  .card__body {
    padding: 1rem;
  }

  .card__desc {
    font-size: 0.875rem;
    margin-bottom: 0.625rem;
  }

  .card__points {
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
  }

  .card__points li {
    padding-top: 0.3125rem;
    padding-bottom: 0.3125rem;
  }

  .card__offer {
    margin-bottom: 0.75rem;
  }

  .lede {
    padding-top: 2.75rem;
  }

  .lede__headline {
    font-size: 2.75rem;
  }

  .story {
    max-width: var(--measure-wide);
  }

  .story__opening {
    font-size: 1.3125rem;
  }

  .fold,
  .proof,
  .trial {
    max-width: var(--measure-wide);
  }

  /* Pinned to the story's own measure. The grid column is wider than the
     measure the story keeps, so an unconstrained mechanism and FAQ stepped out
     past the left-hand text edge they are meant to read as a continuation of. */
  .mech,
  .faq,
  .sticky {
    display: none;
  }

  .footer {
    padding-bottom: 2rem;
  }
}

/* site.yaml theme: overrides */
:root {
  --accent: #1D6B3F;
  --accent-deep: #16572F;
  --accent-hover: #16572F;
  --accent-ink: #FFFFFF;
  --accent-tint: rgba(29, 107, 63, 0.08);
  --card-image-bg: #F8F4ED;
  --ink: #1A1C1E;
  --ink-faint: #6B6F66;
  --ink-soft: #40443E;
  --line: #DBD3C5;
  --line-soft: #E6DFD3;
  --paper: #F0EAE0;
  --paper-raised: #F8F4ED;
  --radius: 2px;
  --serif: "Crimson Pro", Georgia, serif;
}