/* ============================================================================
   ASTROVE — FIELD GUIDE (/what-is-freeze-dried-fruit, /freeze-dried-vs-...)
   ----------------------------------------------------------------------------
   A reference document in the ASTROVE world: field guide, specimen record,
   editorial explanation. It borrows the product page's record grid and house
   footer, and the process engine's cold technical field, and loads none of the
   homepage machinery. Static HTML and this file carry the whole experience.

   Hierarchy is the design. The short answer is the loudest thing after the
   title; section headings step down; sources are quiet but always present.
   ASTROVE product facts sit in their own ruled panel so they can never be
   mistaken for general statements about freeze-drying.

   Built on tokens.css only. Shell rules (skip link, masthead, footer) mirror
   product-page.css under the guide- prefix; see scripts/lib/static-page.js.
   ========================================================================== */

:root {
  --guide-field: var(--field-abyss);
  --guide-accent: var(--nectar);
  --guide-measure: 64ch;
  --shell-field: var(--guide-field);
  --shell-accent: var(--guide-accent);
}

.guide-nowrap { white-space: nowrap; }

/* ---- shared small type ---------------------------------------------------- */
.guide-index,
.guide-answer__label,
.guide-answer__ledger dt,
.guide-record__label,
.guide-ledger dt,
.guide-ledger__caption,
.guide-contents__label,
.guide-steps__state,
.guide-facts__scope,
.guide-facts dt,
.guide-facts__source,
.guide-cite span,
.guide-pores__keys,
.guide-compare thead th,
.guide-compare tbody th {
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ---- hero: title, the answer, the evidence ------------------------------- */
.guide-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "answer" "record";
  gap: clamp(1.4rem, 4vw, 2.4rem);
  padding: clamp(1.2rem, 4vw, 2.4rem) var(--gutter-right) clamp(2.6rem, 6vw, 5rem) var(--gutter-left);
  background: linear-gradient(to bottom, var(--guide-field) 0%, var(--guide-field) 55%, var(--void-deep) 100%);
}
.guide-hero__head { grid-area: head; }
.guide-answer { grid-area: answer; }
.guide-answer__record { grid-area: record; }

.guide-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 clamp(1.4rem, 4vw, 2.6rem);
  padding: 0;
  list-style: none;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--moon-dim);
}
.guide-crumbs li + li::before { content: "/"; margin: 0 0.6em; color: var(--line-strong); }
.guide-crumbs a { text-decoration: none; color: var(--moon-soft); }
.guide-crumbs a:hover { color: var(--moon); }

.guide-index {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0;
  color: var(--moon-soft);
}
.guide-index::before { content: ""; width: 1.6rem; height: 1px; background: var(--guide-accent); }

.guide-title {
  margin: 0.5em 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.45rem, 8.4vw, 5.6rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.guide-answer {
  padding-top: 1.1rem;
  border-top: 1px solid var(--line-strong);
}
.guide-answer__label { margin: 0 0 0.8rem; color: var(--guide-accent); }
.guide-answer__text {
  max-width: 40ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.28rem, 2.3vw, 1.72rem);
  line-height: 1.34;
  color: var(--moon);
}
.guide-answer__ledger { margin: 0; max-width: 40rem; }
.guide-answer__ledger div {
  display: grid;
  grid-template-columns: minmax(7.5rem, 1fr) minmax(0, 2fr);
  gap: 1rem;
  padding: 0.6rem 0;
  border-top: 1px solid var(--line);
}
.guide-answer__ledger div:last-child { border-bottom: 1px solid var(--line); }
.guide-answer__ledger dt { color: var(--moon-dim); padding-top: 0.12rem; }
.guide-answer__ledger dd { margin: 0; font-size: 0.95rem; color: var(--moon); }
.guide-answer__ledger a,
.guide-record__body a:not(.guide-product a),
.guide-meta a {
  color: var(--moon);
  text-decoration: underline;
  text-decoration-color: var(--guide-accent);
  text-underline-offset: 0.25em;
}
.guide-meta { margin: 1rem 0 0; font-size: 0.78rem; color: var(--moon-dim); }


/* ---- contents ------------------------------------------------------------- */
.guide-contents {
  margin: 0 var(--gutter-right) 0 var(--gutter-left);
  padding-block: 1.6rem 2.2rem;
  border-top: 1px solid var(--line);
}
.guide-contents__label { margin: 0 0 0.8rem; color: var(--moon-dim); }
.guide-contents ol {
  display: grid;
  gap: 0.1rem 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: contents;
}
.guide-contents li { counter-increment: contents; }
.guide-contents a {
  display: flex;
  gap: 0.9rem;
  padding-block: 0.45rem;
  font-size: 0.92rem;
  color: var(--moon-soft);
  text-decoration: none;
}
.guide-contents a::before {
  content: counter(contents, decimal-leading-zero);
  flex: none;
  width: 1.6rem;
  font-size: 0.72rem;
  line-height: 1.9;
  letter-spacing: 0.1em;
  color: var(--guide-accent);
}
.guide-contents a:hover { color: var(--moon); }

/* ---- records ---------------------------------------------------------------- */
.guide-record {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.9rem;
  margin: 0 var(--gutter-right) 0 var(--gutter-left);
  padding-block: clamp(2.6rem, 6vw, 4.8rem);
  border-top: 1px solid var(--line);
}
.guide-record__label { display: flex; gap: 0.8rem; margin: 0; color: var(--guide-accent); }
.guide-record__label span { color: var(--moon-dim); }
.guide-record__body { min-width: 0; max-width: 60rem; }
.guide-record__body h2 {
  max-width: 22ch;
  margin: 0 0 1.4rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.85rem, 4.2vw, 3rem);
  line-height: 1.06;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.guide-record__body > p { max-width: var(--guide-measure); margin: 0 0 1.05rem; color: var(--moon-soft); }
.guide-lead {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  line-height: 1.3;
  color: var(--moon) !important;
}
.guide-note {
  padding-left: 1rem;
  border-left: 2px solid var(--guide-accent);
  font-size: 0.9rem;
  color: var(--moon-soft);
}
.guide-cite {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.6rem;
  margin: 1.8rem 0 0 !important;
  font-size: 0.78rem;
  color: var(--moon-dim) !important;
}
.guide-cite span:first-child { color: var(--moon-dim); margin-right: 0.3rem; }
.guide-cite a { color: var(--moon-soft) !important; text-decoration-color: var(--line-strong) !important; }

/* ---- ledger ------------------------------------------------------------------ */
.guide-ledger__caption { margin: 1.6rem 0 0 !important; color: var(--moon-dim) !important; }
.guide-ledger { margin: 1.4rem 0; max-width: 46rem; }
.guide-ledger__caption + .guide-ledger { margin-top: 0.7rem; }
.guide-ledger div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.3rem;
  padding: 0.9rem 0;
  border-top: 1px solid var(--line);
}
.guide-ledger div:last-child { border-bottom: 1px solid var(--line); }
.guide-ledger dt { color: var(--guide-accent); }
.guide-ledger dd { margin: 0; max-width: 60ch; color: var(--moon-soft); }
.guide-ledger--wide dt {
  font-family: var(--font-display);
  font-size: 1.3rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--moon);
}

/* ---- process stages ---------------------------------------------------------- */
.guide-steps { margin: 2rem 0; }
.guide-steps__title {
  margin: 0 0 1rem;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--moon-soft);
}
.guide-steps ol {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-strong);
}
.guide-steps li {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  column-gap: 0.6rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--line);
}
.guide-steps__n {
  grid-row: span 3;
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--guide-accent);
  font-variant-numeric: tabular-nums;
}
.guide-steps h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.15;
}
.guide-steps__state { margin: 0.35rem 0 0.5rem; color: var(--moon-dim); }
.guide-steps li p:last-child { margin: 0; font-size: 0.94rem; color: var(--moon-soft); }

/* ---- pores schematic ----------------------------------------------------------- */
.guide-pores { margin: 1.6rem 0 2rem; max-width: 40rem; }
.guide-pores svg { display: block; width: 100%; height: auto; }
.guide-pores__walls rect { fill: none; stroke: var(--moon-dim); stroke-width: 1.4; }
.guide-pores__walls--dry rect { stroke: var(--moon-soft); fill: var(--void-deep); }
.guide-pores__ice polygon { fill: var(--electric-ice); fill-opacity: 0.22; stroke: var(--electric-ice); stroke-opacity: 0.7; stroke-width: 1; }
.guide-pores__arrow path { fill: none; stroke: var(--guide-accent); stroke-width: 1.6; }
.guide-pores__keys { display: grid; grid-template-columns: 54fr 46fr; gap: 1rem; margin-top: 0.7rem; color: var(--moon-dim); }
.guide-pores figcaption { margin-top: 0.8rem; font-size: 0.8rem; color: var(--moon-dim); }

/* ---- comparison table ------------------------------------------------------------ */
.guide-compare { margin: 0.4rem 0 1.4rem; }
.guide-compare table { width: 100%; border-collapse: collapse; }
.guide-compare caption {
  caption-side: top;
  max-width: 60ch;
  padding-bottom: 1rem;
  text-align: left;
  font-size: 0.86rem;
  color: var(--moon-dim);
}
.guide-compare thead {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.guide-compare tr {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: 1rem 0;
  border-top: 1px solid var(--line);
}
.guide-compare tbody tr:last-child { border-bottom: 1px solid var(--line); }
.guide-compare tbody th { padding-bottom: 0.55rem; text-align: left; color: var(--guide-accent); }
.guide-compare td {
  display: grid;
  grid-template-columns: 6.6rem minmax(0, 1fr);
  gap: 0.8rem;
  padding: 0.35rem 0;
  font-size: 0.94rem;
  line-height: 1.5;
  color: var(--moon-soft);
}
.guide-compare td::before {
  content: attr(data-label);
  content: attr(data-label) / "";
  font-size: 0.66rem;
  line-height: 2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--moon-dim);
}
.guide-compare td:nth-child(2) { color: var(--moon); }

/* ---- ASTROVE facts: a ruled panel, never mistaken for general science ------------ */
.guide-facts {
  margin: 1.8rem 0 0;
  padding: 1.3rem clamp(1rem, 3vw, 1.8rem) 1.4rem;
  border: 1px solid var(--line-strong);
  border-top: 2px solid var(--guide-accent);
  background: var(--void);
}
.guide-facts__scope { margin: 0 0 1rem; line-height: 1.6; color: var(--guide-accent); }
.guide-facts dl { margin: 0; }
.guide-facts dl div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.2rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--line);
}
.guide-facts dt { color: var(--moon-dim); }
.guide-facts dd { margin: 0; max-width: 58ch; color: var(--moon); }
.guide-facts__source { margin: 1rem 0 0; color: var(--moon-dim); }

/* ---- products ------------------------------------------------------------------ */
.guide-products {
  display: grid;
  gap: 0;
  margin: 1.8rem 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-strong);
}
[data-sku="jamun"] { --sku-accent: var(--sku-jamun-bright); }
[data-sku="mango"] { --sku-accent: var(--nectar); }
[data-sku="pineapple"] { --sku-accent: var(--chlorophyll); }
.guide-product a {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  align-items: center;
  gap: 1.1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}
.guide-product__media { display: grid; place-items: center; aspect-ratio: 4 / 5; }
.guide-product__media picture { display: contents; }
.guide-product img { width: 100%; max-height: 100%; object-fit: contain; }
.guide-product__body { display: grid; gap: 0.25rem; }
.guide-product__name { font-family: var(--font-display); font-size: 1.28rem; line-height: 1.15; color: var(--moon); }
.guide-product__texture { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sku-accent); }
.guide-product__profile { font-size: 0.9rem; color: var(--moon-soft); }
.guide-product a:hover .guide-product__name,
.guide-product a:focus-visible .guide-product__name { text-decoration: underline; text-decoration-color: var(--sku-accent); text-underline-offset: 0.2em; }

/* ---- next + sources ---------------------------------------------------------------- */
.guide-next { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.guide-next li { padding: 1rem 0; border-bottom: 1px solid var(--line); }
.guide-next a {
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1.2;
  color: var(--moon) !important;
}
.guide-next__guide a { font-size: 1.6rem; }
.guide-next p { margin: 0.3rem 0 0; font-size: 0.9rem; color: var(--moon-dim); }

.guide-record--sources .guide-record__body > p { font-size: 0.9rem; }
.guide-sources { display: grid; gap: 0.9rem; margin: 1.2rem 0 0; padding-left: 1.3rem; font-size: 0.86rem; line-height: 1.55; color: var(--moon-soft); }
.guide-sources li::marker { color: var(--guide-accent); }
.guide-sources__authors { color: var(--moon); }
.guide-sources a { overflow-wrap: anywhere; }
.guide-sources li:target { outline: 1px solid var(--guide-accent); outline-offset: 6px; }

/* ---- tablet ------------------------------------------------------------------------ */
@media (min-width: 640px) {
  .guide-contents ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guide-ledger div { grid-template-columns: minmax(8rem, 1fr) minmax(0, 3fr); gap: 1.2rem; }
  .guide-ledger dt { padding-top: 0.15rem; }
  .guide-ledger--wide dt { padding-top: 0; }
  .guide-facts dl div { grid-template-columns: minmax(8rem, 1fr) minmax(0, 3fr); gap: 1.2rem; }
  .guide-steps ol { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.6rem; }
  .guide-products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; border-top: 0; }
  .guide-product a { grid-template-columns: minmax(0, 1fr); align-items: start; border-top: 1px solid var(--line-strong); border-bottom: 0; }
  .guide-product__media { width: 72%; }
  .guide-next { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 1.6rem; border-top: 0; }
  .guide-next li { border-top: 1px solid var(--line-strong); border-bottom: 0; }

  /* The comparison becomes a real three-column table once it has room. */
  .guide-compare { overflow-x: auto; }
  .guide-compare table { min-width: 36rem; }
  .guide-compare thead { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; display: table-header-group; }
  .guide-compare tr { display: table-row; padding: 0; border: 0; }
  .guide-compare th, .guide-compare td {
    display: table-cell;
    padding: 0.95rem 1.2rem 0.95rem 0;
    border-top: 1px solid var(--line);
    vertical-align: top;
    text-align: left;
  }
  .guide-compare tbody tr:last-child { border-bottom: 0; }
  .guide-compare tbody tr:last-child > * { border-bottom: 1px solid var(--line); }
  .guide-compare td::before { content: none; }
  .guide-compare thead th {
    padding-bottom: 0.8rem;
    border-top: 0;
    border-bottom: 1px solid var(--line-strong);
    color: var(--moon-soft);
  }
  .guide-compare thead th:nth-child(2) { color: var(--guide-accent); }
  .guide-compare .guide-compare__corner { width: 22%; border-top: 0; border-bottom: 1px solid var(--line-strong); }
  .guide-compare tbody th { width: 22%; padding-bottom: 0.95rem; }
  .guide-compare td, .guide-compare thead th { width: 39%; }
}

/* ---- desktop --------------------------------------------------------------------------- */
@media (min-width: 960px) {
  .guide-hero {
    /* The answer sits beside its own ledger: text left, record right. */
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-areas: "head head" "answer record";
    grid-template-rows: auto auto;
    column-gap: clamp(3rem, 6vw, 7rem);
    row-gap: 2rem;
    align-items: start;
    padding-top: clamp(1rem, 1.6vw, 1.5rem);
  }
  .guide-crumbs ol { margin-bottom: clamp(1rem, 2vw, 1.8rem); }
  /* Same desktop ceiling as .pdp-title: a reference page must not out-shout
     the product pages it sits beside. */
  .guide-title { font-size: clamp(2.6rem, 4.1vw, 4.1rem); }
  .guide-answer__record { padding-top: 2.9rem; }
  .guide-contents ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .guide-record { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); column-gap: clamp(2rem, 4vw, 4rem); }
  .guide-record__label { padding-top: 0.9rem; }
  .guide-steps ol { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .guide-steps li { grid-template-columns: minmax(0, 1fr); align-content: start; padding-right: 0.4rem; }
  .guide-steps__n { grid-row: auto; margin-bottom: 0.9rem; }
}