/* ==========================================================================
   Savery shelf-life library — layered on css/styles.css, which owns the
   palette, the type stack, and the shared header/footer.

   Ported from Shelf_Life_Page.dc.html. Every colour comes from a :root token;
   the mock's #F9420D became --orange (#E0531F) per CLAUDE.md S6 / Open
   Decision #2, and #566065 / #DDD6C8 / #D8D2C4 became --muted /
   --border-dark / --on-dark-90.

   Accent discipline: --orange appears exactly once per page, on the answer
   numeral. The install CTA is deliberately charcoal-and-paper so the numeral
   stays the only loud thing on screen.

   Type: prose is --sans, matching body and the blog. The mock inherited Zilla
   Slab onto its paragraphs from an artboard wrapper; S6 reserves the slab for
   titles and numerals and gives body copy to system sans, and staying sans
   also keeps this page consistent with /blog.

   Markup constraint: markdown is injected directly into <section>s (never via
   a wrapper div — see the note in shelf-life-template.js), so prose is styled
   through unclassed-child selectors rather than a .prose container.
   ========================================================================== */

.shelf-life {
  padding: 72px var(--pad-x) 96px;
}

.sl-container {
  max-width: 760px;
  margin: 0 auto;
  padding: 0;
}
.sl-container--wide {
  max-width: 1100px;
}

/* ---------- back link (mirrors .post-back) ---------- */

.sl-back {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--muted-2);
  margin-bottom: 40px;
}
.sl-back:hover {
  color: var(--ink);
}

/* ---------- shared section heading ---------- */

.sl-h2 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
}

/* ---------- markdown prose (unclassed children) ---------- */

.sl-answer > p:not([class]),
.sl-nearend > p,
.sl-nearend > ul,
.sl-nearend > ol {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 1.1em;
}

.sl-nearend > *:last-child {
  margin-bottom: 0;
}

.sl-nearend > ul,
.sl-nearend > ol {
  padding-left: 22px;
}
.sl-nearend li {
  margin-bottom: 0.45em;
}

.sl-answer a,
.sl-nearend a,
.sl-sources a {
  color: var(--rust);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.sl-answer a:hover,
.sl-nearend a:hover,
.sl-sources a:hover {
  color: var(--orange);
}

/* ---------- 1. the answer ---------- */

.sl-answer {
  padding-bottom: 28px;
}

.sl-eyebrow {
  margin: 0 0 10px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--muted-2);
}

/* The one orange element on the page. At this size it is WCAG "large text", so
   --orange's 3.47:1 on paper clears the 3:1 bar. Do not reuse this colour for
   anything smaller here — that is what --rust is for. */
.sl-answer-figure {
  margin: 0;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(72px, 22vw, 88px);
  line-height: 0.95;
  letter-spacing: -0.01em;
  color: var(--orange);
}

.sl-answer-unit {
  display: block;
  font-size: clamp(34px, 10vw, 40px);
  letter-spacing: 0;
}

.sl-answer > p:not([class]) {
  font-size: 18px;
  line-height: 1.45;
  max-width: 46ch;
}

/* Deliberately NOT :first-of-type. The eyebrow is also a <p>, so the first
   p-of-type is .sl-eyebrow — which has a class and is therefore excluded by
   :not([class]), leaving the selector matching nothing at all. Keying off the
   numeral is exact and survives a page with two lead paragraphs.

   The mock used 14px here, but its unit sub-line is a 0.95 line-height block
   whose descender lands on the first line of prose.

   The child combinator is load-bearing: the base rule above is (0,2,1) and sets
   the `margin` shorthand, so a bare `.sl-answer-figure + p` at (0,1,1) loses to
   it and the gap silently stays 0. */
.sl-answer > .sl-answer-figure + p {
  margin-top: 20px;
}

/* Carries the AB 660 framing, so it is must-read and takes full ink contrast.
   Subordinated by size and by the mono face rather than by a lighter colour —
   --muted sits below AA for small text on paper. */
/* The lead paragraph above already carries the gap as its bottom margin, so
   this adds none of its own — otherwise the two stack. */
.sl-advisory {
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink);
  max-width: 60ch;
}

/* Alias names, so "spring mix" and "caneberries" land on the canonical page
   rather than getting URLs of their own. Receipt chrome, not prose. */
.sl-aliases {
  margin: 16px 0 0;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 60ch;
  text-transform: lowercase;
}

.sl-aliases-label {
  color: var(--muted-2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-right: 6px;
}

/* ---------- 2. by storage method ---------- */

.sl-storage {
  padding-bottom: 28px;
}

.sl-storage-list {
  margin: 0;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border-dark);
}

/* dl > div is not `section > div`, so the reveal script leaves these alone. */
.sl-storage-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-dark);
}

.sl-storage-row dt {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
}

.sl-storage-row dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 600;
  white-space: nowrap;
}

/* ---------- 3. near the end of the window ---------- */

.sl-nearend {
  padding-bottom: 28px;
}

/* ---------- 4. sources ---------- */

.sl-sources {
  border: 1px solid var(--ink);
  padding: 16px 18px;
  margin-bottom: 32px;
}

.sl-sources-title {
  margin: 0 0 10px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--ink);
}

.sl-sources-list {
  margin: 0;
  padding: 0 0 0 18px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.7;
  color: var(--ink);
}

/* Extra citations authored in the markdown body. */
.sl-sources > ul,
.sl-sources > ol:not(.sl-sources-list),
.sl-sources > p:not([class]) {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.7;
  color: var(--ink);
  margin: 10px 0 0;
  padding-left: 18px;
}
.sl-sources > p:not([class]) {
  padding-left: 0;
}

.sl-sources-note {
  margin: 10px 0 0;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--muted);
}

/* ---------- 5. install block ---------- */

.sl-install {
  background: var(--ink);
  color: var(--paper);
  padding: 28px 20px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 28px;
}

.sl-install-pip {
  width: 120px;
  height: auto;
}

.sl-install-title {
  margin: 0;
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.15;
}

.sl-install-lede {
  margin: 0;
  font-size: 17px;
  line-height: 1.5;
  color: var(--on-dark-90);
}

/* A <p>, not a <div>, so the reveal script can't hide the store buttons. */
.sl-install-actions {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sl-store {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: 1.5px solid var(--paper);
  transition: opacity 220ms var(--ease);
}
.sl-store:hover {
  color: var(--ink);
  opacity: 0.88;
}

.sl-store--outline {
  background: transparent;
  color: var(--paper);
}
.sl-store--outline:hover {
  color: var(--paper);
  background: rgba(245, 242, 236, 0.1);
  opacity: 1;
}

/* ---------- 6. related foods ---------- */

.sl-related-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.sl-related-link {
  display: block;
  padding: 12px 14px;
  border: 1px solid var(--border-dark);
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  transition: border-color 220ms var(--ease);
}
.sl-related-link:hover {
  border-color: var(--ink);
  color: var(--ink);
}

/* ==========================================================================
   The index — a search-first hero over the full crawlable list.

   The hero is a white receipt lying on the paper canvas: faint ledger rules for
   texture, and a torn zigzag along the bottom edge. That is §6's "the look IS
   the mechanic" rather than decoration — no background image, no second accent,
   and the whole thing is two gradients and a mask.
   ========================================================================== */

.sl-hero {
  position: relative;
  background: #fff;
  /* Ledger rules. --border on white is barely there by design; it should read as
     paper texture, not as lines you notice. */
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0 31px,
    var(--border) 31px 32px
  );
  border: 1px solid var(--border-dark);
  border-bottom: none;
  padding: 56px 28px 68px;
  margin-bottom: 48px;
  text-align: center;
}

/* The torn bottom edge. Paper-coloured triangles bite into the white block, so
   the receipt appears ripped off rather than cut. Falls back to a plain paper
   strip if mask is unsupported — harmless. */
.sl-hero::after {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  bottom: -1px;
  height: 13px;
  background: var(--paper);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='13' preserveAspectRatio='none'%3E%3Cpath d='M0 13 L10 0 L20 13 Z' fill='%23000'/%3E%3C/svg%3E")
    repeat-x 0 0 / 20px 13px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='13' preserveAspectRatio='none'%3E%3Cpath d='M0 13 L10 0 L20 13 Z' fill='%23000'/%3E%3C/svg%3E")
    repeat-x 0 0 / 20px 13px;
}

.sl-hero-title {
  font-family: var(--serif);
  font-size: clamp(30px, 5.6vw, 52px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 auto 14px;
  max-width: 22ch;
  text-wrap: balance;
}

.sl-hero-lede {
  margin: 0 auto 28px;
  font-size: 17px;
  line-height: 1.55;
  max-width: 52ch;
  color: var(--muted);
}

/* ---------- the search field ---------- */

.sl-search {
  position: relative;
  max-width: 30rem;
  margin: 0 auto;
}

/* Visible-to-screen-readers only. The placeholder is not a label. */
.sl-search-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.sl-search-input {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--mono);
  font-size: 16px; /* 16px keeps iOS from zooming on focus */
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 0;
  padding: 16px 88px 16px 18px;
  -webkit-appearance: none;
  appearance: none;
  transition: box-shadow 160ms var(--ease);
}
.sl-search-input::placeholder {
  color: var(--muted-2);
}

/* Reclaim the space reserved for the Clear button while it is hidden. The button
   only appears once there is text, and text means no placeholder — so an empty
   field can use the full width, which is what keeps the placeholder from being
   clipped at 390px. */
.sl-search-input:placeholder-shown {
  padding-right: 18px;
}
.sl-search-input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(224, 83, 31, 0.28);
}
/* Kill the native clear affordance; there is a real button. */
.sl-search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.sl-search-clear {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--muted);
  background: none;
  border: 0;
  padding: 8px 10px;
  cursor: pointer;
}
.sl-search-clear:hover {
  color: var(--ink);
}

.sl-hero-note {
  margin: 26px auto 0;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.7;
  color: var(--ink);
  max-width: 56ch;
}

/* ---------- result feedback ---------- */

.sl-status {
  margin: 0 0 20px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  min-height: 1.2em;
}

.sl-empty {
  margin: 0 0 40px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  border-left: 3px solid var(--orange);
  padding-left: 16px;
}

/* The script toggles `hidden` on rows and groups; make sure nothing in this
   sheet can out-specify the UA default. */
.shelf-life [hidden] {
  display: none !important;
}

.sl-index-group {
  margin-bottom: 48px;
}

/* .section-rule comes from styles.css as a div there; here it is a <p>. */
.sl-index-group > .section-rule {
  margin: 0;
}

.sl-index-list {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.sl-index-link {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 16px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  color: var(--ink);
}
.sl-index-link:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

.sl-index-name {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
}

.sl-index-window {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
}

.sl-index-place {
  grid-column: 1 / -1;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--muted-2);
}

/* ==========================================================================
   Desktop — the mock's 1200px composition: the answer and the storage table
   share the fold.
   ========================================================================== */

@media (min-width: 900px) {
  .sl-container {
    max-width: 1100px;
  }

  .sl-fold {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 64px;
    align-items: end;
    margin-bottom: 20px;
  }

  .sl-answer {
    padding-bottom: 0;
    min-width: 0;
  }

  .sl-answer-figure {
    font-size: clamp(112px, 12vw, 152px);
    line-height: 0.9;
    letter-spacing: -0.015em;
  }
  /* The markup carries a real space before this span so the accessible name
     reads "5–7 days"; on mobile the span is display:block and that space
     collapses, so no extra margin is wanted here. */
  .sl-answer-unit {
    display: inline;
    font-size: 64px;
  }
  .sl-answer > p:not([class]) {
    font-size: 20px;
    line-height: 1.5;
  }

  .sl-storage {
    padding-bottom: 0;
    min-width: 0;
  }

  .sl-h2 {
    font-size: 26px;
  }

  .sl-storage-row {
    padding: 16px 0;
  }
  .sl-storage-row dt {
    font-size: 18px;
  }
  .sl-storage-row dd {
    font-size: 22px;
  }

  .sl-nearend {
    padding: 28px 0 48px;
  }
  .sl-nearend > p,
  .sl-nearend > ul,
  .sl-nearend > ol {
    font-size: 18px;
    max-width: 62ch;
  }

  .sl-sources {
    padding: 20px 24px;
    margin-bottom: 56px;
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 24px;
    align-items: start;
  }
  .sl-sources-title {
    margin: 0;
    font-size: 12px;
  }
  .sl-sources-list {
    padding-left: 20px;
    font-size: 13px;
    line-height: 1.8;
  }
  .sl-sources-note {
    font-size: 12px;
    grid-column: 2;
  }
  .sl-sources > ul,
  .sl-sources > ol:not(.sl-sources-list),
  .sl-sources > p:not([class]) {
    grid-column: 2;
    font-size: 13px;
  }

  .sl-install {
    padding: 56px 64px;
    display: grid;
    grid-template-columns: 1fr 200px;
    gap: 20px 64px;
    align-items: center;
    margin-bottom: 44px;
  }
  .sl-install-pip {
    grid-column: 2;
    grid-row: 1 / span 3;
    width: 200px;
    justify-self: center;
    align-self: center;
  }
  .sl-install-title {
    font-size: 40px;
    line-height: 1.1;
    max-width: 22ch;
    grid-column: 1;
  }
  .sl-install-lede {
    font-size: 19px;
    max-width: 56ch;
    grid-column: 1;
  }
  .sl-install-actions {
    flex-direction: row;
    gap: 12px;
    grid-column: 1;
  }
  .sl-store {
    padding: 0 28px;
  }

  .sl-related-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  .sl-related-link {
    padding: 14px 16px;
    font-size: 17px;
  }

  .sl-index-link {
    grid-template-columns: 1fr 10em 9em;
    gap: 24px;
  }
  .sl-index-place {
    grid-column: auto;
    text-align: right;
  }
}

/* ---------- the index hero, desktop ---------- */

@media (min-width: 900px) {
  .sl-hero {
    padding: 84px 48px 92px;
    margin-bottom: 64px;
  }
  .sl-hero-lede {
    font-size: 19px;
    margin-bottom: 34px;
  }
  .sl-search {
    max-width: 34rem;
  }
  .sl-search-input {
    font-size: 17px;
    padding: 19px 96px 19px 22px;
  }
  .sl-search-input:placeholder-shown {
    padding-right: 22px;
  }
  .sl-hero-note {
    margin-top: 30px;
    font-size: 12px;
  }
}