/* Seed Oil Free — the hub and its three supporting pages.
 *
 * These pages carry citations, which no other public page here does. That is deliberate:
 * the whole claim of the cluster is that the kitchen's choices survive being checked, so
 * the reference list is content, not an appendix. It is styled quietly so it reads as a
 * footnote rather than a bibliography pretending to be one.
 */

/* The claim/answer pairs that carry each page's substance. */
.so-facts {
  display: grid;
  gap: clamp(28px, 4vw, 44px);
  /* THIS MARGIN STACKS ON TOP OF THE SECTION'S OWN PADDING (measured 2026-09-28).
     The list is the first thing in <section class="section">, which already pads 20px,
     so a 56px margin here made the break before the FIRST heading 76px against the 44px
     between the items below it — 73% bigger, which reads as a hole between the intro box
     and the body rather than as a new block starting. Sized so the two add up to ~52px:
     a little more air than the internal rhythm, which is right, without the gap. Same
     class of bug as the three stacked sections /our-values had before 8/14. */
  margin: clamp(24px, 3vw, 32px) 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 900px) {
  .so-facts--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.so-fact { max-width: 60ch; }

.so-fact__q {
  font-family: var(--f-display, inherit);
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.25;
  margin: 0 0 10px;
  color: var(--c-ink-deep);
  text-wrap: balance;
}

.so-fact__a {
  margin: 0;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.62;
}

.so-fact__a + .so-fact__a { margin-top: 12px; }

.so-fact__a a { color: var(--c-sage-ink); }


/* The honest-caveat band. Used where the evidence does not say what a reader may expect. */
.so-note {
  margin: clamp(34px, 5vw, 52px) 0 0;
  padding: clamp(20px, 3vw, 28px);
  background: var(--c-cream-2);
  max-width: 68ch;
}

.so-note h2 {
  font-size: clamp(17px, 2vw, 20px);
  margin: 0 0 10px;
}

.so-note p {
  margin: 0;
  color: var(--c-ink-2);
  font-size: 16px;
  line-height: 1.62;
}

.so-note p + p { margin-top: 12px; }

/* Cluster links. */
.so-more {
  display: grid;
  gap: 2px;
  margin: clamp(36px, 5vw, 56px) 0 0;
  padding: 0;
  list-style: none;
}

.so-more a {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 20px 0;
  border-top: 1px solid var(--c-line);
  text-decoration: none;
  color: inherit;
}

.so-more li:last-child a { border-bottom: 1px solid var(--c-line); }

.so-more a:hover .so-more__t,
.so-more a:focus-visible .so-more__t { color: var(--c-sage-ink); }

.so-more__t {
  font-family: var(--f-display, inherit);
  font-size: clamp(17px, 2vw, 20px);
  transition: color .15s ease;
}

.so-more__d {
  color: var(--c-taupe-ink);
  font-size: 15px;
  line-height: 1.55;
  max-width: 58ch;
}

/* References. */
.so-src {
  margin: clamp(44px, 6vw, 68px) 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--c-line);
}

.so-src h2 {
  font-size: 13px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--c-taupe-ink);
  margin: 0 0 16px;
}

.so-src ol {
  margin: 0;
  padding-left: 1.3em;
  display: grid;
  gap: 11px;
}

.so-src li {
  font-size: 14px;
  line-height: 1.55;
  color: var(--c-taupe-ink);
}

.so-src a {
  color: var(--c-sage-ink);
  overflow-wrap: anywhere;
}

.so-updated {
  margin: 18px 0 0;
  font-size: 13px;
  color: var(--c-taupe-ink);
}

/* THE CLOSING CROSS-LINK LINE.
 *
 * `.values-more` is defined in pages/values.css, and no page that loads THIS sheet also
 * loads that one — so on /seed-oil-free and the three value pages the class has been
 * completely inert. Measured on /organic at 1280px (2026-09-28): 0px between the fact
 * list and the closing line, where the fact items sit 44px apart, so the sentence read as
 * a continuation of the last paragraph rather than a footer; and it ran the full 1240px
 * container while every paragraph above it stops at 60ch.
 *
 * Defined here so it works wherever this sheet is loaded. The separation matches the
 * list's own gap rather than values.css's tighter 18-26px, because here it follows a
 * 60ch prose list and not a card grid.
 *
 * On the seed-oil hub this was hidden whenever .so-more had rows to draw — that list sat
 * between the two and supplied the gap. It is filtered to pages that are live, so the bug
 * appeared exactly when every supporting page was still gated off, which is the state the
 * cluster shipped in.
 */
.values-more {
  max-width: 60ch;
  margin: clamp(32px, 5vw, 56px) 0 0;
  color: var(--c-taupe-ink);
}

/* THE CLOSING LINE IS PROSE, NOT A CONTROL.
 *
 * components.css promotes `p > .ulink:only-child` to an inline-block with 8px of vertical
 * padding — "a .ulink that is the only thing on its line is a control, not prose." The
 * selector cannot see text siblings, though, so it also fires on a SENTENCE that happens
 * to contain exactly one link, which is what these closing lines became on 2026-09-28 when
 * they were cut from three links to one. Measured on /gluten-free: the anchor rendered
 * 45px tall inside a 45px line box, so its border-bottom sat a full line BELOW the words —
 * a stray rule floating under the paragraph.
 *
 * Scoped override rather than a change to the component: elsewhere on the site a lone
 * .ulink in its own <p> really is a tap target, and that rule is right for those.
 */
.values-more > .ulink:only-child {
  display: inline;
  padding: 0;
}

/* The note aligns with the column it follows.
 *
 * .so-note was 68ch against .so-fact's 60ch, so the filled panel overhung the paragraphs
 * above it by ~90px on the right (measured on /gluten-free: note right edge 1004, text
 * 914). Matching the measure lines the two right edges up; the note's own padding gives
 * its text a slightly shorter line, which is what a callout should have.
 */
.so-note { max-width: 60ch; }

/* The sources rule stops where the text stops.
 *
 * .so-src draws a visible border-top and had no max-width, so it filled the container's
 * full inner width while the note and the closing line above it stop at the 60ch measure —
 * a hairline sticking out 113px further than anything it sits under (measured on
 * /seed-oil-free/health once the container was narrowed on 2026-09-28). The overhang
 * predates that change; narrowing the column is what made it obvious, because everything
 * else now agrees.
 */
.so-src { max-width: 60ch; }
/* THE HUB, REBUILT AROUND APRIL'S ARTICLE (2026-09-30).
 *
 * She wrote a full article -- a definition, a three-step process, four reasons, four fats
 * with bulleted notes, a closing -- and it had been rendering as one boxed paragraph. Each
 * part gets the shape its content already has: the process is a numbered list beside the
 * definition, the reasons are a two-up of short paragraphs, the fats are ruled rows with the
 * name in its own column so the four read as a set you can scan. One layout family each.
 */
.so-intro { max-width: 64ch; }

/* Audrey lines are TRACKED CAPS, the only register the brand board sets it in (base.css):
   its lowercase reads thin, and its punctuation jams. The apostrophe is curled at render
   (copy_tag $typo) for the same reason. */
.so-intro__t {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-family: var(--font-display, inherit);
  font-size: clamp(16px, 1.8vw, 19px);
  line-height: 1.3;
  color: var(--c-ink-deep);
  margin: 4px 0 18px;
  text-wrap: balance;
}

.so-intro__p {
  margin: 18px 0 0;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.62;
}

/* The page-head already carries air beneath it; the first band does not need a second dose. */
.page-head + .so-band { padding-top: clamp(16px, 2vw, 28px); }

.so-h {
  font-family: var(--font-display, inherit);
  font-size: clamp(20px, 2.6vw, 28px);
  line-height: 1.2;
  margin: 0 0 16px;
  color: var(--c-ink-deep);
  text-wrap: balance;
}

.so-h--gap { margin-top: clamp(40px, 5vw, 64px); }

.so-p {
  margin: 0 0 12px;
  max-width: 64ch;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.62;
}

.so-p:last-child { margin-bottom: 0; }
.so-p strong, .so-pts strong { color: var(--c-ink-deep); font-weight: 600; }

/* What are seed oils: definition left, the factory process right. */
.so-what { display: grid; gap: 22px; }

@media (min-width: 900px) {
  .so-what {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(36px, 5vw, 72px);
    align-items: start;
  }
}

.so-steps {
  counter-reset: so-step;
  list-style: none;
  margin: 0;
  padding: 6px 22px;
  background: var(--c-cream-2);
  border: 1px solid var(--c-line);
}

.so-steps li {
  counter-increment: so-step;
  position: relative;
  padding: 16px 0 16px 40px;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.55;
}

.so-steps li + li { border-top: 1px solid var(--c-line); }

.so-steps li::before {
  content: counter(so-step);
  position: absolute;
  left: 0;
  top: 13px;
  font-family: var(--font-display, inherit);
  font-size: 22px;
  line-height: 1.2;
  color: var(--c-sage-ink);
}

.so-what__after { margin-top: 22px; }

/* Why we cook without them: four short reasons, two-up from tablet width. */
.so-why { display: grid; gap: 20px; }

@media (min-width: 760px) {
  .so-why { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px clamp(32px, 4vw, 56px); }
}

.so-why .so-p { margin: 0; padding-top: 16px; border-top: 1px solid var(--c-line); }

/* The four fats: ruled rows, name in its own column from tablet width. */
.so-fats { margin-top: 8px; }

.so-fat {
  display: grid;
  gap: 8px;
  padding: clamp(22px, 3vw, 32px) 0;
  border-top: 1px solid var(--c-line);
}

@media (min-width: 760px) {
  .so-fat { grid-template-columns: minmax(150px, 230px) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); }
}

.so-fat__name {
  font-family: var(--font-display, inherit);
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.25;
  margin: 0;
  color: var(--c-ink-deep);
}

.so-pts {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
  max-width: 64ch;
}

.so-pts li {
  position: relative;
  padding-left: 18px;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.6;
}

.so-pts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .75em;
  width: 7px;
  height: 1px;
  background: var(--c-sage-ink);
}

.so-fat__note {
  margin: 14px 0 0;
  font-size: 15px;
  color: var(--c-sage-ink);
}

.so-fats__menu {
  margin-top: 0;
  padding-top: clamp(20px, 3vw, 28px);
  border-top: 1px solid var(--c-line);
}

/* The close: her honest caveat, the commitment, the invitation. */
.so-close { max-width: 64ch; }

.so-close__cta {
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 24px 0 0;
  font-family: var(--font-display, inherit);
  font-size: clamp(16px, 1.9vw, 20px);
  line-height: 1.3;
  color: var(--c-ink-deep);
  text-wrap: balance;
}

.so-close__tag {
  text-wrap: balance;
  margin: 10px 0 0;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-taupe-ink);
}