/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V5 · contrast: pass (40–41) · nav: N11 · footer: existing Knowledge close · slop: pass (42–49) · mobile: pass (34, 49–57) */
/* Hallmark · genre: editorial · macrostructure: Long Document + Cultural Field Guide · theme: Helper industrial · tone: technical / cultural · enrichment: four high-resolution editorial food photographs · nav: N11 preserved · footer: existing Knowledge close · audience: international food producers and buyers · use: understand youtiao before defining production · motion: none */
@import url("../../tokens.css?v=20260812-2");

html,
body {
  overflow-x: clip;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.68;
}
a {
  color: inherit;
}
.yk-wrap {
  width: min(calc(100% - 2rem), var(--layout-max));
  margin-inline: auto;
}
.yk-crumbs {
  padding-block: var(--space-sm);
  color: var(--color-muted);
  font-size: var(--text-sm);
}
.yk-crumbs a {
  color: var(--color-navy);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.yk-crumbs a:hover,
.yk-prose a:hover,
.yk-cta:hover {
  color: var(--color-link);
}
.yk-crumbs a:focus-visible,
.yk-index a:focus-visible,
.yk-prose a:focus-visible,
.yk-related a:focus-visible,
.yk-cta:focus-visible {
  outline: var(--rule-focus) solid var(--color-focus);
  outline-offset: var(--space-3xs);
}
.yk-crumbs a:active,
.yk-prose a:active,
.yk-cta:active {
  color: var(--color-link-active);
}
.yk-crumbs a[aria-disabled="true"],
.yk-index a[aria-disabled="true"],
.yk-prose a[aria-disabled="true"],
.yk-related a[aria-disabled="true"],
.yk-cta[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.55;
  pointer-events: none;
}
.yk-hero {
  padding-block: var(--space-2xl) var(--space-3xl);
  background: var(--color-navy-deep);
  color: var(--color-paper);
}
.yk-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-2xl);
  align-items: end;
}
.yk-kicker {
  margin: 0 0 var(--space-sm);
  color: var(--color-accent);
  font: 700 var(--text-sm) / 1.2 var(--font-mono);
}
.yk-hero h1 {
  max-width: 13ch;
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--color-paper);
  font: 700 clamp(2.75rem, 6vw, 5.25rem) / 1.02 var(--font-display);
  letter-spacing: var(--tracking-tight);
}
.yk-lede {
  max-width: 60ch;
  margin: var(--space-lg) 0 0;
  color: var(--color-light-muted);
  font-size: var(--text-lg);
}
.yk-hero figure {
  margin: 0;
}
.yk-hero img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border: var(--rule-thin) solid var(--color-rule-strong);
}
.yk-hero figcaption {
  margin-block-start: var(--space-xs);
  color: var(--color-light-muted);
  font-size: var(--text-sm);
}
.yk-meta {
  border-bottom: var(--rule-thin) solid var(--color-rule);
  background: var(--color-paper-2);
}
.yk-meta__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.yk-meta div {
  padding: var(--space-md);
  border-inline-end: var(--rule-thin) solid var(--color-rule);
}
.yk-meta div:last-child {
  border-inline-end: 0;
}
.yk-meta b {
  display: block;
  color: var(--color-navy);
}
.yk-meta span {
  color: var(--color-muted);
}
.yk-equipment-bridge {
  padding-block: var(--space-xl);
  border-bottom: var(--rule-thin) solid var(--color-rule);
  background: var(--color-navy);
  color: var(--color-paper);
}
.yk-equipment-bridge__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(15rem, 0.55fr);
  gap: var(--space-xl);
  align-items: center;
}
.yk-equipment-bridge__label {
  margin: 0 0 var(--space-xs);
  color: var(--color-accent);
  font: 800 var(--text-xs) / 1.2 var(--font-mono);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.yk-equipment-bridge h2 {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--color-paper);
  font: 700 var(--text-2xl) / 1.1 var(--font-display);
}
.yk-equipment-bridge p:not(.yk-equipment-bridge__label) {
  max-width: 66ch;
  margin: var(--space-sm) 0 0;
  color: var(--color-paper-2);
}
.yk-equipment-button {
  display: inline-flex;
  min-height: var(--control-height);
  align-items: center;
  justify-content: center;
  padding: var(--space-sm) var(--space-md);
  border: var(--rule-thin) solid var(--color-accent);
  background: var(--color-accent);
  color: var(--color-navy);
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.yk-equipment-button:hover {
  border-color: var(--color-paper);
  background: var(--color-paper);
  color: var(--color-navy);
}
.yk-equipment-button:focus-visible {
  outline: var(--rule-focus) solid var(--color-focus);
  outline-offset: var(--space-3xs);
}
.yk-equipment-button:active {
  border-color: var(--color-accent-dark);
  background: var(--color-accent-dark);
  color: var(--color-paper);
}
.yk-equipment-button[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.55;
  pointer-events: none;
}
.kr-foot img {
  width: 10rem;
  max-width: 100%;
  height: auto;
  filter: none;
}
.yk-layout {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(15rem, 3fr);
  gap: var(--space-3xl);
  align-items: start;
  padding-block: var(--space-3xl);
}
.yk-prose {
  max-width: 66ch;
  min-width: 0;
}
.yk-hub-context {
  margin: 0 0 var(--space-xl);
  padding: var(--space-md);
  border: var(--rule-thin) solid var(--color-link);
  background: var(--color-paper-2);
  color: var(--color-ink);
}
.yk-hub-context b {
  color: var(--color-navy);
}
.yk-hub-context a {
  color: var(--color-link);
  font-weight: 800;
  text-decoration-line: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: var(--rule-medium);
  text-underline-offset: var(--space-3xs);
}
.yk-hub-context a:hover,
.yk-hub-context a:active {
  color: var(--color-link-active);
}
.yk-hub-context a:focus-visible {
  outline: var(--rule-focus) solid var(--color-focus);
  outline-offset: var(--space-3xs);
}
.yk-prose h2 {
  min-width: 0;
  margin: var(--space-2xl) 0 var(--space-sm);
  overflow-wrap: anywhere;
  color: var(--color-navy);
  font: 700 var(--text-2xl) / 1.12 var(--font-display);
}
.yk-prose h2:first-child {
  margin-block-start: 0;
}
.yk-prose h3 {
  margin: var(--space-xl) 0 var(--space-xs);
  color: var(--color-navy);
  font: 700 var(--text-xl) / 1.2 var(--font-display);
}
.yk-prose p,
.yk-prose li {
  color: var(--color-ink-2);
}
.yk-prose a {
  color: var(--color-link);
  font-weight: 700;
  text-decoration-color: currentColor;
  text-decoration-thickness: var(--rule-thin);
  text-underline-offset: var(--space-3xs);
}
.yk-prose figure {
  margin: var(--space-xl) 0;
}
.yk-prose figure img {
  width: 100%;
  height: auto;
  border: var(--rule-thin) solid var(--color-rule);
}
.yk-prose figcaption {
  margin-block-start: var(--space-xs);
  color: var(--color-muted);
  font-size: var(--text-sm);
}
.yk-answer,
.yk-boundary {
  margin-block: var(--space-xl);
  padding: var(--space-lg);
  background: var(--color-paper-2);
  border-top: var(--rule-medium) solid var(--color-accent);
}
.yk-answer b,
.yk-boundary b {
  display: block;
  margin-block-end: var(--space-xs);
  color: var(--color-navy);
  font-family: var(--font-display);
  font-size: var(--text-lg);
}
.yk-flow,
.yk-market {
  display: grid;
  gap: 0;
  margin-block: var(--space-lg);
  border-top: var(--rule-thin) solid var(--color-rule);
}
.yk-flow li,
.yk-market article {
  display: grid;
  grid-template-columns: minmax(8rem, 0.7fr) minmax(0, 1.3fr);
  gap: var(--space-md);
  padding-block: var(--space-md);
  border-bottom: var(--rule-thin) solid var(--color-rule);
}
.yk-flow b,
.yk-market h3 {
  margin: 0;
  color: var(--color-navy);
}
.yk-flow span,
.yk-market p {
  margin: 0;
  color: var(--color-ink-2);
}
.yk-index {
  position: sticky;
  top: calc(var(--space-3xl) + var(--space-sm));
  padding-block-start: var(--space-md);
  border-top: var(--rule-medium) solid var(--color-navy);
}
.yk-index b {
  display: block;
  margin-block-end: var(--space-sm);
  color: var(--color-navy);
  font-family: var(--font-display);
  font-size: var(--text-lg);
}
.yk-index a {
  display: block;
  padding-block: var(--space-xs);
  border-bottom: var(--rule-thin) solid var(--color-rule);
  color: var(--color-muted);
  text-decoration: none;
}
.yk-index a:hover,
.yk-index a:active {
  color: var(--color-link);
}
.yk-faq details {
  border-top: var(--rule-thin) solid var(--color-rule);
}
.yk-faq details:last-child {
  border-bottom: var(--rule-thin) solid var(--color-rule);
}
.yk-faq summary {
  cursor: pointer;
  padding-block: var(--space-md);
  color: var(--color-navy);
  font-weight: 800;
}
.yk-faq summary:focus-visible {
  outline: var(--rule-focus) solid var(--color-focus);
  outline-offset: var(--space-3xs);
}
.yk-sources {
  padding-inline-start: var(--space-lg);
}
.yk-sources li {
  margin-block-end: var(--space-sm);
  font-size: var(--text-sm);
}
.yk-related {
  padding-block: var(--space-2xl);
  background: var(--color-navy-deep);
  color: var(--color-paper);
}
.yk-related h2 {
  max-width: 18ch;
  margin: 0 0 var(--space-lg);
  color: var(--color-paper);
  font: 700 var(--text-2xl) / 1.1 var(--font-display);
}
.yk-related__links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: var(--rule-thin) solid var(--color-rule-strong);
}
.yk-related a {
  display: grid;
  gap: var(--space-xs);
  padding: var(--space-lg) var(--space-lg) var(--space-lg) 0;
  border-bottom: var(--rule-thin) solid var(--color-rule-strong);
  color: var(--color-paper);
  text-decoration: none;
}
.yk-related a:nth-child(even) {
  padding-inline-start: var(--space-lg);
  border-inline-start: var(--rule-thin) solid var(--color-rule-strong);
}
.yk-related a span {
  color: var(--color-light-muted);
}
.yk-related a:hover,
.yk-related a:active {
  color: var(--color-accent);
}
.yk-related__links .yk-related__equipment {
  border-color: var(--color-link);
  background: var(--color-paper-2);
}
.yk-related__links .yk-related__equipment b {
  color: var(--color-link);
  text-decoration-line: underline;
  text-decoration-thickness: var(--rule-thin);
  text-underline-offset: var(--space-3xs);
}
.yk-related__links .yk-related__equipment span {
  color: var(--color-ink-2);
}
.yk-cta {
  display: inline-flex;
  min-height: var(--control-height);
  align-items: center;
  margin-block-start: var(--space-md);
  border-bottom: var(--rule-thin) solid currentColor;
  color: var(--color-paper);
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}
@media (max-width: 60rem) {
  .yk-hero__grid,
  .yk-layout,
  .yk-equipment-bridge__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .yk-index {
    position: static;
    order: -1;
  }
}
@media (max-width: 40rem) {
  .yk-wrap {
    width: min(calc(100% - 1.25rem), var(--layout-max));
  }
  .yk-hero {
    padding-block: var(--space-xl) var(--space-2xl);
  }
  .yk-hero h1 {
    font-size: clamp(2.35rem, 13vw, 3.5rem);
  }
  .yk-meta__grid,
  .yk-related__links {
    grid-template-columns: minmax(0, 1fr);
  }
  .yk-meta div,
  .yk-related a,
  .yk-related a:nth-child(even) {
    padding-inline: 0;
    border-inline: 0;
  }
  .yk-layout {
    gap: var(--space-xl);
    padding-block: var(--space-xl);
  }
  .yk-flow li,
  .yk-market article {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xs);
  }
}
@media (pointer: coarse) {
  .yk-index a,
  .yk-related a,
  .yk-cta,
  .yk-equipment-button {
    min-height: 3rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }
}