.pickle-guide {
  --pickle-ink: #21392f;
  --pickle-deep: #172e27;
  --pickle-plum: #773c55;
  --pickle-leaf: #758b43;
  --pickle-rice: #f8f3e7;
  --pickle-wash: #e8e6d5;
  --pickle-yellow: #d2a43b;
  --pickle-rule: color-mix(in srgb, var(--pickle-ink) 22%, transparent);
  color: var(--pickle-ink);
}

.pickle-guide > section,
.pickle-guide > nav {
  margin-top: clamp(5rem, 9vw, 9rem);
}

.pickle-guide h2,
.pickle-guide h3,
.pickle-guide p,
.pickle-guide dd {
  text-wrap: pretty;
}

.pickle-guide h2 {
  max-width: 20ch;
  font-size: clamp(2.15rem, 5vw, 5.2rem);
  line-height: .98;
  letter-spacing: -.045em;
}

.pickle-guide h3 { line-height: 1.2; }

.pickle-guide a:focus-visible,
.pickle-guide button:focus-visible,
.pickle-guide summary:focus-visible {
  outline: 3px solid #0a6871;
  outline-offset: 4px;
}

.pickle-lead {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(19rem, .82fr);
  gap: clamp(2.5rem, 6vw, 6.5rem);
  align-items: center;
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
  border-bottom: 1px solid var(--pickle-rule);
}

.pickle-lead figure { margin: 0; }
.pickle-lead picture,
.pickle-lead img { display: block; width: 100%; }
.pickle-lead img {
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 0;
}

.pickle-lead figcaption {
  max-width: 66ch;
  margin-top: .8rem;
  color: #587066;
  font-size: .76rem;
  line-height: 1.55;
}

.pickle-lead h2 { margin: .7rem 0 1.5rem; }
.pickle-lead > div > p:not(.eyebrow) {
  max-width: 42rem;
  font-size: clamp(1.03rem, 1.6vw, 1.24rem);
  line-height: 1.85;
}

.pickle-lead dl {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 2.4rem 0 0;
  border-block: 1px solid var(--pickle-rule);
}

.pickle-lead dl div {
  display: grid;
  gap: .35rem;
  padding: 1.2rem .8rem;
  border-right: 1px solid var(--pickle-rule);
}
.pickle-lead dl div:last-child { border-right: 0; }
.pickle-lead dt {
  font-family: var(--font-display, Georgia, serif);
  font-size: 2.15rem;
  line-height: 1;
}
.pickle-lead dd {
  margin: 0;
  color: #587066;
  font-size: .69rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.pickle-now {
  display: grid;
  grid-template-columns: minmax(16rem, .72fr) minmax(0, 1.28fr);
  gap: clamp(2rem, 6vw, 6rem);
  padding: clamp(2.2rem, 5vw, 4.5rem);
  color: #fbf5e9;
  background: var(--pickle-deep);
}
.pickle-now h2 { max-width: 12ch; margin-top: .8rem; font-size: clamp(2rem, 4vw, 4rem); }
.pickle-now .eyebrow { color: #e3bb67; }
.pickle-now ol { margin: 0; padding: 0; list-style: none; }
.pickle-now li {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 1.2rem;
  padding: 1.4rem 0;
  border-top: 1px solid rgba(255, 255, 255, .25);
}
.pickle-now li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .25); }
.pickle-now li > span { color: #e3bb67; font-size: .7rem; font-weight: 850; letter-spacing: .12em; }
.pickle-now h3,
.pickle-now p { margin: 0; }
.pickle-now p { margin-top: .5rem; color: #dce5df; line-height: 1.75; }

.pickle-jump {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-block: 1px solid var(--pickle-rule);
}
.pickle-jump a {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: .55rem;
  min-height: 60px;
  padding: .85rem 1rem;
  color: inherit;
  font-size: .68rem;
  font-weight: 850;
  line-height: 1.25;
  text-decoration: none;
  border-right: 1px solid var(--pickle-rule);
  border-bottom: 1px solid var(--pickle-rule);
}
.pickle-jump a:nth-child(5n) { border-right: 0; }
.pickle-jump a:nth-last-child(-n + 5) { border-bottom: 0; }
.pickle-jump a > span { font-size: .86rem; letter-spacing: 0; }
.pickle-jump a:hover { background: var(--pickle-wash); }

.pickle-origin {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(17rem, .55fr);
  gap: clamp(2rem, 6vw, 7rem);
  align-items: end;
}
.pickle-origin h2 { margin-block: .8rem 1.5rem; }
.pickle-origin p { max-width: 68ch; line-height: 1.85; }
.pickle-origin > div > ul,
.pickle-methods > ul,
.pickle-atlas article > ul,
.pickle-places article > ul,
.pickle-safety > ul,
.pickle-sources > ul {
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
}
.pickle-origin li,
.pickle-methods > ul li,
.pickle-atlas article li,
.pickle-places article li,
.pickle-safety > ul li,
.pickle-sources > ul li { margin-top: .45rem; }
.pickle-origin a,
.pickle-methods > ul a,
.pickle-atlas article li a,
.pickle-places article li a,
.pickle-safety > ul a,
.pickle-sources > ul a { color: inherit; text-underline-offset: .22em; }
.pickle-origin > aside {
  padding: 1.7rem 0 1.7rem 1.7rem;
  border-left: 3px solid var(--pickle-plum);
}
.pickle-origin > aside p { margin-bottom: 0; line-height: 1.75; }

.pickle-meal {
  display: grid;
  grid-template-columns: minmax(16rem, .7fr) minmax(0, 1.3fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
  padding-block: clamp(2.5rem, 5vw, 5rem);
  border-block: 1px solid var(--pickle-rule);
}
.pickle-meal > header { position: sticky; top: 1.5rem; }
.pickle-meal > header h2 { margin-block: .8rem 1.4rem; }
.pickle-meal > header p { max-width: 58ch; line-height: 1.85; }
.pickle-meal-map {
  display: grid;
  grid-column: 2;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    "dish dish dish"
    "rice pickle soup";
  gap: .6rem;
  padding-bottom: 1.6rem;
}
.pickle-meal-map > span {
  display: grid;
  min-height: 6.5rem;
  padding: 1rem;
  place-content: center;
  color: var(--pickle-ink);
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(1.15rem, 2vw, 1.7rem);
  text-align: center;
  border: 1px solid var(--pickle-rule);
}
.pickle-meal-map small {
  margin-top: .35rem;
  color: #5a7166;
  font-family: var(--font-body, sans-serif);
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.pickle-meal-map .is-dish { grid-area: dish; min-height: 4.5rem; background: var(--pickle-wash); }
.pickle-meal-map .is-rice { grid-area: rice; background: #fbf8ef; }
.pickle-meal-map .is-pickle { grid-area: pickle; color: #fffaf0; background: var(--pickle-plum); }
.pickle-meal-map .is-pickle small { color: #f5dce6; }
.pickle-meal-map .is-soup { grid-area: soup; background: #dfe8d7; }
.pickle-meal > ol {
  grid-column: 2;
  margin: 0;
  padding: 0;
  border-top: 3px solid var(--pickle-ink);
  list-style: none;
}
.pickle-meal > ol li {
  display: grid;
  grid-template-columns: 2rem 3.2rem 1fr;
  gap: .8rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--pickle-rule);
}
.pickle-meal > ol li > span { color: var(--pickle-plum); font-size: .67rem; font-weight: 850; }
.pickle-meal > ol i {
  display: grid;
  width: 2.8rem;
  aspect-ratio: 1;
  place-items: center;
  color: var(--pickle-plum);
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.35rem;
  font-style: normal;
  border: 1px solid var(--pickle-plum);
  border-radius: 50%;
}
.pickle-meal > ol h3 { margin: 0; font-size: 1.25rem; }
.pickle-meal > ol p { margin-block: .5rem .8rem; line-height: 1.75; }
.pickle-meal > ol small { color: #536a60; line-height: 1.65; }
.pickle-meal > footer { grid-column: 2; }
.pickle-meal > footer ul { margin: 0; padding: 0; font-size: .77rem; list-style: none; }
.pickle-meal > footer a { color: inherit; text-underline-offset: .22em; }

.pickle-words > header,
.pickle-methods > header,
.pickle-seasons > header,
.pickle-encounters > header,
.pickle-places > header,
.pickle-choose > header,
.pickle-label > header,
.pickle-phrases > header {
  display: grid;
  grid-template-columns: minmax(16rem, .85fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 6vw, 6rem);
  align-items: end;
  margin-bottom: clamp(2rem, 4vw, 4rem);
}
.pickle-words > header h2,
.pickle-methods > header h2,
.pickle-seasons > header h2,
.pickle-encounters > header h2,
.pickle-places > header h2,
.pickle-choose > header h2,
.pickle-label > header h2,
.pickle-phrases > header h2 { margin-block: .7rem 0; }
.pickle-words > header > p,
.pickle-methods > header > p,
.pickle-seasons > header > p,
.pickle-encounters > header > p,
.pickle-places > header > p,
.pickle-choose > header > p,
.pickle-label > header > p,
.pickle-phrases > header > p { max-width: 62ch; margin: 0; line-height: 1.8; }

.pickle-words > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--pickle-rule);
}
.pickle-words article {
  min-width: 0;
  padding: 1.5rem;
  border-right: 1px solid var(--pickle-rule);
  border-bottom: 1px solid var(--pickle-rule);
}
.pickle-words article:nth-child(3n) { border-right: 0; }
.pickle-words article header { display: grid; grid-template-columns: 2.2rem 1fr; gap: .7rem; align-items: start; }
.pickle-words article header > span { color: var(--pickle-plum); font-size: .68rem; font-weight: 850; letter-spacing: .1em; }
.pickle-words h3 { margin: 0; font-size: 1.15rem; }
.pickle-words small { color: #60766c; }
.pickle-words article > p { margin-bottom: 0; line-height: 1.75; }

.pickle-methods { padding: clamp(2.2rem, 5vw, 5rem); background: var(--pickle-wash); }
.pickle-methods > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--pickle-rule);
}
.pickle-methods article { padding: 1.6rem; background: var(--pickle-rice); }
.pickle-methods article header { display: grid; grid-template-columns: 2rem 3rem 1fr; gap: .7rem; align-items: center; }
.pickle-methods article header > span { color: var(--pickle-plum); font-size: .65rem; font-weight: 850; }
.pickle-methods i {
  display: grid;
  width: 2.7rem;
  aspect-ratio: 1;
  place-items: center;
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.4rem;
  font-style: normal;
  border: 1px solid var(--pickle-rule);
  border-radius: 50%;
}
.pickle-methods h3 { margin: 0; font-size: 1.1rem; }
.pickle-methods article > p { line-height: 1.75; }
.pickle-methods aside { padding-top: 1rem; border-top: 1px solid var(--pickle-rule); }
.pickle-methods aside p { margin-bottom: 0; color: #536b60; font-size: .86rem; line-height: 1.7; }

.pickle-history {
  display: grid;
  grid-template-columns: minmax(16rem, .66fr) minmax(0, 1.34fr);
  gap: clamp(2rem, 6vw, 6rem);
  padding-block: clamp(2.8rem, 6vw, 5.8rem);
  border-block: 1px solid var(--pickle-rule);
}
.pickle-history > header { position: sticky; top: 1.5rem; align-self: start; }
.pickle-history > header h2 { margin-block: .75rem 1.3rem; }
.pickle-history > header p { max-width: 58ch; line-height: 1.82; }
.pickle-history > ol {
  grid-column: 2;
  margin: 0;
  padding: 0;
  border-top: 3px solid var(--pickle-ink);
  list-style: none;
  counter-reset: history;
}
.pickle-history > ol li {
  position: relative;
  display: grid;
  grid-template-columns: 2rem 3.6rem 1fr;
  gap: .8rem;
  padding: 1.55rem 0;
  border-bottom: 1px solid var(--pickle-rule);
}
.pickle-history > ol li > span { color: var(--pickle-plum); font-size: .66rem; font-weight: 850; }
.pickle-history > ol i {
  display: grid;
  width: 3.1rem;
  aspect-ratio: 1;
  place-items: center;
  color: #fffaf0;
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.35rem;
  font-style: normal;
  background: var(--pickle-deep);
  border-radius: 50%;
}
.pickle-history > ol small { color: var(--pickle-plum); font-size: .67rem; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.pickle-history > ol h3 { max-width: 28ch; margin: .38rem 0 .7rem; font-size: clamp(1.2rem, 2.1vw, 1.75rem); }
.pickle-history > ol p { max-width: 67ch; margin: 0; line-height: 1.78; }
.pickle-history blockquote { margin: 1rem 0 0; padding-left: 1rem; color: #536b60; font-size: .88rem; line-height: 1.65; border-left: 3px solid var(--pickle-yellow); }
.pickle-history > footer { grid-column: 2; }
.pickle-history > footer ul { margin: 0; padding: 0; font-size: .77rem; list-style: none; }
.pickle-history > footer a { color: inherit; text-underline-offset: .22em; }

.pickle-atlas > header {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(18rem, .55fr);
  gap: clamp(2rem, 6vw, 7rem);
  align-items: end;
  margin-bottom: clamp(2rem, 5vw, 5rem);
}
.pickle-atlas > header h2 { margin-block: .7rem 0; }
.pickle-atlas > header > p { margin: 0; line-height: 1.8; }
.pickle-compass {
  display: grid;
  grid-template-columns: minmax(15rem, .72fr) minmax(0, 1.28fr);
  gap: clamp(1.5rem, 5vw, 5rem);
  margin-bottom: clamp(3rem, 6vw, 6rem);
  padding: clamp(1.6rem, 4vw, 3.5rem) 0;
  border-block: 3px solid var(--pickle-ink);
}
.pickle-compass > div > small,
.pickle-label-lexicon > header > small {
  color: var(--pickle-plum);
  font-size: .66rem;
  font-weight: 850;
  letter-spacing: .12em;
}
.pickle-compass > div h3 { margin-block: .6rem 1rem; font-size: clamp(1.45rem, 2.7vw, 2.4rem); }
.pickle-compass > div p { margin-bottom: 0; line-height: 1.75; }
.pickle-compass > ol { display: grid; grid-template-columns: repeat(2, 1fr); margin: 0; padding: 0; list-style: none; }
.pickle-compass > ol > li {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: .7rem;
  padding: 1.1rem 1.2rem;
  border-left: 1px solid var(--pickle-rule);
  border-bottom: 1px solid var(--pickle-rule);
}
.pickle-compass > ol > li:nth-last-child(-n + 2) { border-bottom: 0; }
.pickle-compass > ol > li > span { color: var(--pickle-plum); font-size: .66rem; font-weight: 850; }
.pickle-compass h3 { margin: 0; font-size: 1.05rem; }
.pickle-compass li p { margin-block: .5rem .75rem; color: #52695f; font-size: .88rem; line-height: 1.65; }
.pickle-compass nav { display: flex; flex-wrap: wrap; gap: .35rem .75rem; }
.pickle-compass nav a { color: inherit; font-size: .75rem; font-weight: 800; text-underline-offset: .2em; }
.pickle-finder {
  margin: 0 0 .75rem;
  padding: clamp(1.5rem, 4vw, 3rem) 0;
  border-block: 1px solid var(--pickle-rule);
}
.pickle-finder > div:first-child {
  display: grid;
  grid-template-columns: minmax(15rem, .72fr) minmax(0, 1.28fr);
  gap: 1rem clamp(2rem, 6vw, 6rem);
  align-items: end;
  margin-bottom: 1.6rem;
}
.pickle-finder > div:first-child > small { grid-column: 1; color: var(--pickle-plum); font-size: .66rem; font-weight: 850; letter-spacing: .12em; }
.pickle-finder > div:first-child > h3 { grid-column: 1; margin: 0; font-size: clamp(1.4rem, 2.8vw, 2.45rem); }
.pickle-finder > div:first-child > p { grid-column: 2; grid-row: 1 / span 2; margin: 0; line-height: 1.75; }
.pickle-finder-controls { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--pickle-rule); }
.pickle-finder-controls button {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 9rem;
  padding: 1rem 2.5rem 1rem 1rem;
  color: inherit;
  font: inherit;
  text-align: left;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--pickle-rule);
  cursor: pointer;
}
.pickle-finder-controls button:last-child { border-right: 0; }
.pickle-finder-controls button:hover { background: var(--pickle-wash); }
.pickle-finder-controls button[aria-pressed="true"] { color: #fffaf0; background: var(--pickle-plum); }
.pickle-finder-controls button strong { align-self: end; line-height: 1.25; }
.pickle-finder-controls button small { margin-top: .6rem; color: #5b7067; line-height: 1.5; }
.pickle-finder-controls button[aria-pressed="true"] small { color: #f3dfe7; }
.pickle-finder-controls button > span {
  position: absolute;
  top: .8rem;
  right: .8rem;
  color: var(--pickle-plum);
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.35rem;
}
.pickle-finder-controls button[aria-pressed="true"] > span { color: #f0c668; }
.pickle-finder-count { margin: .9rem 0 0; color: #536b60; font-size: .78rem; font-weight: 800; }
.pickle-atlas > div { border-top: 1px solid var(--pickle-rule); }
.pickle-atlas article {
  display: grid;
  grid-template-columns: minmax(13rem, .62fr) minmax(0, 1.38fr);
  gap: clamp(1.5rem, 5vw, 5rem);
  padding: clamp(2rem, 4.5vw, 4.5rem) 0;
  border-bottom: 1px solid var(--pickle-rule);
}
.pickle-atlas article > header { display: grid; grid-template-columns: 2.2rem 4.2rem 1fr; gap: .8rem; align-items: start; }
.pickle-atlas article > header > span { color: var(--pickle-plum); font-size: .7rem; font-weight: 850; }
.pickle-atlas article i {
  display: grid;
  width: 3.8rem;
  aspect-ratio: 1;
  place-items: center;
  color: #f8f2e8;
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.7rem;
  font-style: normal;
  background: var(--pickle-plum);
  border-radius: 50%;
}
.pickle-atlas h3 { margin: .2rem 0; font-size: clamp(1.35rem, 2.4vw, 2.1rem); }
.pickle-atlas small { color: #5c7469; }
.pickle-atlas dl { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; }
.pickle-atlas dl div { padding: 0 1.25rem; border-left: 1px solid var(--pickle-rule); }
.pickle-atlas dt { color: var(--pickle-plum); font-size: .68rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.pickle-atlas dd { margin: .65rem 0 0; line-height: 1.75; }
.pickle-atlas article > ul { grid-column: 2; font-size: .78rem; }

.pickle-seasons {
  padding: clamp(2.2rem, 5vw, 5rem);
  background: #efe9d7;
}
.pickle-seasons > div { border-top: 1px solid var(--pickle-ink); }
.pickle-seasons article {
  display: grid;
  grid-template-columns: minmax(17rem, .82fr) minmax(0, 1.18fr);
  gap: 1rem clamp(2rem, 6vw, 7rem);
  padding: 1.8rem 0;
  border-bottom: 1px solid var(--pickle-rule);
}
.pickle-seasons article > header {
  display: grid;
  grid-template-columns: 2rem 3.6rem 1fr;
  gap: .75rem;
  align-items: start;
}
.pickle-seasons article > header > span { color: var(--pickle-plum); font-size: .68rem; font-weight: 850; }
.pickle-seasons article i {
  display: grid;
  width: 3.2rem;
  aspect-ratio: 1;
  place-items: center;
  color: #fbf7eb;
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.35rem;
  font-style: normal;
  background: var(--pickle-leaf);
  border-radius: 50%;
}
.pickle-seasons article small,
.pickle-encounters article small { color: #5c7167; font-size: .67rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.pickle-seasons article h3 { margin: .35rem 0 0; font-size: 1.28rem; }
.pickle-seasons article > p { margin: 0; line-height: 1.8; }
.pickle-seasons article > nav,
.pickle-seasons article > ul { grid-column: 2; }
.pickle-seasons article nav,
.pickle-encounters article nav { display: flex; flex-wrap: wrap; gap: .4rem .9rem; }
.pickle-seasons article nav a,
.pickle-encounters article nav a { color: inherit; font-size: .78rem; font-weight: 800; text-underline-offset: .22em; }
.pickle-seasons article > ul { margin: .2rem 0 0; padding: 0; font-size: .77rem; list-style: none; }
.pickle-seasons article > ul li + li { margin-top: .35rem; }
.pickle-seasons article > ul a { color: inherit; text-underline-offset: .22em; }

.pickle-encounters > ol {
  margin: 0;
  padding: 0;
  border-top: 3px solid var(--pickle-ink);
  list-style: none;
}
.pickle-encounters > ol > li { border-bottom: 1px solid var(--pickle-rule); }
.pickle-encounters article {
  display: grid;
  grid-template-columns: minmax(18rem, .85fr) minmax(0, 1.15fr);
  gap: 1rem clamp(2rem, 6vw, 7rem);
  padding: clamp(1.8rem, 4vw, 3.4rem) 0;
}
.pickle-encounters article > header {
  grid-row: 1 / span 3;
  display: grid;
  grid-template-columns: 2rem 4rem 1fr;
  gap: .75rem;
  align-items: start;
}
.pickle-encounters article > header > span { color: var(--pickle-plum); font-size: .68rem; font-weight: 850; }
.pickle-encounters article i {
  display: grid;
  width: 3.6rem;
  aspect-ratio: 1;
  place-items: center;
  color: var(--pickle-plum);
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.55rem;
  font-style: normal;
  border: 1px solid var(--pickle-plum);
  border-radius: 50%;
}
.pickle-encounters article h3 { margin: .4rem 0 0; font-size: clamp(1.35rem, 2.5vw, 2.2rem); }
.pickle-encounters article > p { margin: 0; line-height: 1.8; }
.pickle-encounters article > aside {
  padding: .8rem 0 .8rem 1.2rem;
  border-left: 3px solid var(--pickle-yellow);
}
.pickle-encounters article > aside p { margin: .35rem 0 0; line-height: 1.7; }

.pickle-places > div { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem, 4vw, 4rem); }
.pickle-places article { padding-top: 1.4rem; border-top: 3px solid var(--pickle-ink); }
.pickle-places article header { display: grid; grid-template-columns: 2rem 3.5rem 1fr; gap: .75rem; align-items: center; }
.pickle-places article header > span { color: var(--pickle-plum); font-size: .68rem; font-weight: 850; }
.pickle-places article i {
  display: grid;
  width: 3.1rem;
  aspect-ratio: 1;
  place-items: center;
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.4rem;
  font-style: normal;
  background: var(--pickle-wash);
  border-radius: 50%;
}
.pickle-places h3 { margin: .15rem 0 0; font-size: 1.35rem; }
.pickle-places small { color: #5d7369; font-size: .67rem; letter-spacing: .1em; text-transform: uppercase; }
.pickle-places article > p { line-height: 1.8; }
.pickle-places article > ul { font-size: .77rem; }

.pickle-choose { padding: clamp(2.2rem, 5vw, 5rem); color: #fbf5e9; background: var(--pickle-plum); }
.pickle-choose > div { display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid rgba(255,255,255,.3); }
.pickle-choose article { padding: 1.6rem; border-right: 1px solid rgba(255,255,255,.3); }
.pickle-choose article:last-child { border-right: 0; }
.pickle-choose article > span { color: #f0c668; font-size: .68rem; font-weight: 850; }
.pickle-choose h3 { margin: .6rem 0 1.2rem; font-size: 1.35rem; }
.pickle-choose article strong { display: block; min-height: 3.2rem; color: #fae4a7; }
.pickle-choose p { line-height: 1.75; }
.pickle-choose > aside { max-width: 58rem; margin-top: 2rem; padding-left: 1.5rem; border-left: 3px solid #f0c668; }
.pickle-choose > aside p { margin-bottom: 0; }

.pickle-tasting {
  display: grid;
  grid-template-columns: minmax(16rem, .65fr) minmax(0, 1.35fr);
  gap: clamp(2rem, 6vw, 6rem);
  padding: clamp(2rem, 5vw, 4.5rem);
  background: #efe9d7;
}
.pickle-tasting > header { grid-row: 1 / span 2; }
.pickle-tasting > header h2 { margin-block: .75rem 1.3rem; }
.pickle-tasting > header p { max-width: 58ch; line-height: 1.82; }
.pickle-tasting > ol { margin: 0; padding: 0; border-top: 3px solid var(--pickle-ink); list-style: none; }
.pickle-tasting > ol li {
  display: grid;
  grid-template-columns: 2rem 3.1rem 1fr;
  gap: .8rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--pickle-rule);
}
.pickle-tasting > ol li > span { color: var(--pickle-plum); font-size: .66rem; font-weight: 850; }
.pickle-tasting > ol i { color: var(--pickle-plum); font-family: var(--font-display, Georgia, serif); font-size: 1.5rem; font-style: normal; }
.pickle-tasting > ol h3 { margin: 0; font-size: 1.14rem; }
.pickle-tasting > ol p { margin: .45rem 0 0; line-height: 1.72; }
.pickle-tasting > aside { grid-column: 2; padding: 1.5rem; color: #fffaf0; background: var(--pickle-deep); }
.pickle-tasting > aside small { color: #e5bd6a; font-size: .66rem; font-weight: 850; letter-spacing: .12em; }
.pickle-tasting > aside p { margin-block: .8rem; font-family: var(--font-display, Georgia, serif); font-size: clamp(1.1rem, 2vw, 1.45rem); line-height: 1.55; }
.pickle-tasting > aside span { color: #dce5df; font-size: .82rem; line-height: 1.6; }

.pickle-label ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--pickle-rule); }
.pickle-label li {
  display: grid;
  grid-template-columns: 3rem 4rem 1fr;
  gap: 1rem;
  align-items: start;
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--pickle-rule);
}
.pickle-label li > span { color: var(--pickle-plum); font-size: .68rem; font-weight: 850; }
.pickle-label i { font-family: var(--font-display, Georgia, serif); font-size: 2rem; font-style: normal; line-height: 1; }
.pickle-label h3 { margin: 0; font-size: 1.25rem; }
.pickle-label p { max-width: 65ch; margin-bottom: 0; line-height: 1.75; }
.pickle-label-lexicon {
  display: grid;
  grid-template-columns: minmax(15rem, .62fr) minmax(0, 1.38fr);
  gap: clamp(2rem, 6vw, 6rem);
  margin-top: clamp(3rem, 6vw, 6rem);
  padding-top: clamp(2rem, 4vw, 4rem);
  border-top: 3px solid var(--pickle-ink);
}
.pickle-label-lexicon > header h3 { margin-block: .65rem 1rem; font-size: clamp(1.45rem, 3vw, 2.6rem); }
.pickle-label-lexicon > header p { margin-bottom: 0; }
.pickle-label-lexicon > dl { margin: 0; border-top: 1px solid var(--pickle-rule); }
.pickle-label-lexicon > dl > div {
  display: grid;
  grid-template-columns: minmax(11rem, .7fr) minmax(0, 1.3fr);
  gap: 1rem;
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--pickle-rule);
}
.pickle-label-lexicon dt { display: grid; grid-template-columns: 2rem 1fr; align-items: baseline; }
.pickle-label-lexicon dt > span { color: var(--pickle-plum); font-size: .65rem; font-weight: 850; }
.pickle-label-lexicon dt > b { font-size: 1.06rem; }
.pickle-label-lexicon dt > small { grid-column: 2; color: #60756b; font-size: .72rem; }
.pickle-label-lexicon dd { margin: 0; }
.pickle-label-lexicon dd > strong { display: block; font-size: .88rem; }
.pickle-label-lexicon dd p { margin-top: .4rem; color: #526a5f; font-size: .86rem; line-height: 1.65; }
.pickle-label-lexicon > ul { grid-column: 2; margin: 0; padding: 0; font-size: .77rem; list-style: none; }
.pickle-label-lexicon > ul li + li { margin-top: .35rem; }
.pickle-label-lexicon > ul a { color: inherit; text-underline-offset: .22em; }

.pickle-safety {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(18rem, .55fr);
  gap: clamp(2rem, 5vw, 5rem);
  padding: clamp(2.2rem, 5vw, 5rem);
  background: #f1e4df;
}
.pickle-safety > header,
.pickle-safety > div,
.pickle-safety > ul { grid-column: 1; }
.pickle-safety > header h2 { margin-block: .7rem 1.3rem; }
.pickle-safety > header p { line-height: 1.8; }
.pickle-safety > div { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--pickle-rule); }
.pickle-safety > div article { padding: 1.4rem; background: #faf6ee; }
.pickle-safety > div span { color: var(--pickle-plum); font-family: var(--font-display, Georgia, serif); font-size: 1.6rem; }
.pickle-safety > div h3 { margin: .5rem 0; }
.pickle-safety > div p { margin-bottom: 0; line-height: 1.7; }
.pickle-safety > aside {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: start;
  padding: 1.8rem;
  color: #fbf5e9;
  background: var(--pickle-deep);
  position: sticky;
  top: 1rem;
}
.pickle-safety > aside > span { color: #e5bd6a; font-size: .66rem; font-weight: 850; letter-spacing: .12em; }
.pickle-safety > aside > p { font-size: 1.12rem; font-weight: 800; line-height: 1.65; }
.pickle-safety > aside small { display: block; color: #dce5df; line-height: 1.65; }
.pickle-safety button,
.pickle-phrases button {
  min-height: 44px;
  margin-top: 1rem;
  padding: .7rem 1rem;
  color: inherit;
  font: inherit;
  font-size: .8rem;
  font-weight: 850;
  background: transparent;
  border: 1px solid currentColor;
  cursor: pointer;
}

.pickle-phrases > div { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--pickle-rule); }
.pickle-phrases article { display: grid; grid-template-columns: 2.2rem 1fr; gap: .8rem; padding: 1.4rem; background: var(--pickle-rice); }
.pickle-phrases article > span { color: var(--pickle-plum); font-size: .68rem; font-weight: 850; }
.pickle-phrases article p { margin: 0; font-size: 1.02rem; font-weight: 780; line-height: 1.65; }
.pickle-phrases article small { grid-column: 2; color: #566f63; line-height: 1.6; }
.pickle-phrases button { grid-column: 2; justify-self: start; color: var(--pickle-ink); }

.pickle-faq { display: grid; grid-template-columns: minmax(17rem, .65fr) minmax(0, 1.35fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.pickle-faq h2 { margin-top: .7rem; }
.pickle-faq details { border-top: 1px solid var(--pickle-rule); }
.pickle-faq details:last-child { border-bottom: 1px solid var(--pickle-rule); }
.pickle-faq summary {
  display: grid;
  grid-template-columns: 1fr 2rem;
  gap: 1rem;
  align-items: center;
  min-height: 58px;
  padding: 1rem 0;
  font-weight: 850;
  cursor: pointer;
}
.pickle-faq summary span { color: var(--pickle-plum); font-size: 1.35rem; text-align: center; }
.pickle-faq details p { max-width: 66ch; margin-top: 0; padding: 0 3rem 1.3rem 0; line-height: 1.8; }

.pickle-sources {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, .75fr);
  gap: clamp(2rem, 6vw, 6rem);
  padding-top: clamp(2rem, 4vw, 4rem);
  border-top: 3px solid var(--pickle-ink);
}
.pickle-sources h2 { margin-block: .7rem 1.3rem; }
.pickle-sources p { max-width: 68ch; line-height: 1.8; }
.pickle-sources > ul { margin-top: 0; }

.pickle-next {
  display: grid;
  grid-template-columns: minmax(15rem, .8fr) repeat(3, minmax(0, .6fr));
  border-block: 1px solid var(--pickle-rule);
}
.pickle-next > div,
.pickle-next > a { padding: 1.5rem; border-right: 1px solid var(--pickle-rule); }
.pickle-next > :last-child { border-right: 0; }
.pickle-next h2 { margin: .5rem 0 0; font-size: clamp(1.5rem, 2.5vw, 2.4rem); }
.pickle-next a { display: grid; grid-template-columns: 1fr auto; color: inherit; text-decoration: none; }
.pickle-next a span,
.pickle-next a strong { grid-column: 1; }
.pickle-next a span { color: #5b7367; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.pickle-next a strong { margin-top: .6rem; line-height: 1.35; }
.pickle-next a b { grid-column: 2; grid-row: 1 / span 2; align-self: end; font-size: 1.5rem; }
.pickle-next a:hover { background: var(--pickle-wash); }

@media (max-width: 940px) {
  .pickle-lead,
  .pickle-now,
  .pickle-origin,
  .pickle-meal,
  .pickle-history,
  .pickle-tasting,
  .pickle-safety,
  .pickle-sources { grid-template-columns: 1fr; }
  .pickle-lead figure { order: 2; }
  .pickle-meal > header { position: static; }
  .pickle-history > header { position: static; }
  .pickle-meal-map,
  .pickle-meal > ol,
  .pickle-meal > footer,
  .pickle-history > ol,
  .pickle-history > footer,
  .pickle-tasting > header,
  .pickle-tasting > aside { grid-column: 1; grid-row: auto; }
  .pickle-finder-controls { grid-template-columns: repeat(3, 1fr); }
  .pickle-finder-controls button:nth-child(3n) { border-right: 0; }
  .pickle-finder-controls button:nth-child(-n + 3) { border-bottom: 1px solid var(--pickle-rule); }
  .pickle-jump { grid-template-columns: repeat(2, 1fr); }
  .pickle-jump a:nth-child(5n) { border-right: 1px solid var(--pickle-rule); }
  .pickle-jump a:nth-child(2n) { border-right: 0; }
  .pickle-jump a:nth-last-child(-n + 5) { border-bottom: 1px solid var(--pickle-rule); }
  .pickle-jump a:nth-last-child(-n + 2) { border-bottom: 0; }
  .pickle-words > div,
  .pickle-methods > div { grid-template-columns: repeat(2, 1fr); }
  .pickle-words article:nth-child(3n) { border-right: 1px solid var(--pickle-rule); }
  .pickle-words article:nth-child(2n) { border-right: 0; }
  .pickle-safety > header,
  .pickle-safety > div,
  .pickle-safety > ul,
  .pickle-safety > aside { grid-column: 1; grid-row: auto; }
  .pickle-safety > aside { position: static; }
  .pickle-next { grid-template-columns: 1fr; }
  .pickle-next > div,
  .pickle-next > a { border-right: 0; border-bottom: 1px solid var(--pickle-rule); }
  .pickle-next > :last-child { border-bottom: 0; }
}

@media (max-width: 700px) {
  .pickle-words > header,
  .pickle-methods > header,
  .pickle-seasons > header,
  .pickle-encounters > header,
  .pickle-places > header,
  .pickle-choose > header,
  .pickle-label > header,
  .pickle-phrases > header,
  .pickle-atlas > header,
  .pickle-compass,
  .pickle-finder > div:first-child,
  .pickle-label-lexicon,
  .pickle-faq { grid-template-columns: 1fr; }
  .pickle-finder > div:first-child > small,
  .pickle-finder > div:first-child > h3,
  .pickle-finder > div:first-child > p { grid-column: 1; grid-row: auto; }
  .pickle-atlas article { grid-template-columns: 1fr; }
  .pickle-atlas article > ul { grid-column: 1; }
  .pickle-atlas dl { grid-template-columns: 1fr; }
  .pickle-atlas dl div { padding: 1rem 0; border-left: 0; border-top: 1px solid var(--pickle-rule); }
  .pickle-places > div,
  .pickle-choose > div,
  .pickle-phrases > div { grid-template-columns: 1fr; }
  .pickle-choose article { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.3); }
  .pickle-choose article:last-child { border-bottom: 0; }
  .pickle-seasons article,
  .pickle-encounters article { grid-template-columns: 1fr; }
  .pickle-seasons article > header,
  .pickle-encounters article > header { grid-row: auto; }
  .pickle-seasons article > nav,
  .pickle-seasons article > ul { grid-column: 1; }
  .pickle-label-lexicon > ul { grid-column: 1; }
}

@media (max-width: 560px) {
  .pickle-guide > section,
  .pickle-guide > nav { margin-top: 4.5rem; }
  .pickle-guide h2 { font-size: clamp(2rem, 12vw, 3.2rem); }
  .pickle-lead dl,
  .pickle-jump,
  .pickle-words > div,
  .pickle-methods > div,
  .pickle-compass > ol,
  .pickle-safety > div { grid-template-columns: 1fr; }
  .pickle-lead dl div { border-right: 0; border-bottom: 1px solid var(--pickle-rule); }
  .pickle-lead dl div:last-child { border-bottom: 0; }
  .pickle-jump a,
  .pickle-jump a:nth-child(5n),
  .pickle-jump a:nth-child(2n),
  .pickle-jump a:nth-last-child(-n + 2) { border-right: 0; border-bottom: 1px solid var(--pickle-rule); }
  .pickle-jump a:last-child { border-bottom: 0; }
  .pickle-words article,
  .pickle-words article:nth-child(3n),
  .pickle-words article:nth-child(2n) { border-right: 0; }
  .pickle-methods,
  .pickle-seasons,
  .pickle-choose,
  .pickle-tasting,
  .pickle-safety { margin-inline: calc(2px - var(--page-padding, 1rem)); padding-inline: var(--page-padding, 1rem); }
  .pickle-atlas article > header { grid-template-columns: 2rem 3.4rem 1fr; }
  .pickle-meal-map { grid-template-columns: repeat(2, 1fr); grid-template-areas: "dish dish" "rice soup" "pickle pickle"; }
  .pickle-meal-map .is-pickle { min-height: 4.5rem; }
  .pickle-meal > ol li { grid-template-columns: 1.7rem 2.8rem 1fr; }
  .pickle-meal > ol i { width: 2.5rem; }
  .pickle-compass > ol > li,
  .pickle-compass > ol > li:nth-last-child(-n + 2) { padding-inline: 0; border-left: 0; border-bottom: 1px solid var(--pickle-rule); }
  .pickle-compass > ol > li:last-child { border-bottom: 0; }
  .pickle-label-lexicon > dl > div { grid-template-columns: 1fr; }
  .pickle-finder-controls { grid-template-columns: 1fr; }
  .pickle-finder-controls button,
  .pickle-finder-controls button:nth-child(3n),
  .pickle-finder-controls button:nth-child(-n + 3) { min-height: 7.5rem; border-right: 0; border-bottom: 1px solid var(--pickle-rule); }
  .pickle-finder-controls button:last-child { border-bottom: 0; }
  .pickle-history > ol li,
  .pickle-tasting > ol li { grid-template-columns: 1.7rem 2.6rem 1fr; }
  .pickle-history > ol i { width: 2.5rem; }
  .pickle-atlas article i { width: 3.1rem; }
  .pickle-label li { grid-template-columns: 2rem 2.8rem 1fr; }
  .pickle-phrases article { grid-template-columns: 1.8rem 1fr; padding-inline: .9rem; }
}

@media (forced-colors: active) {
  .pickle-methods,
  .pickle-choose,
  .pickle-safety,
  .pickle-safety > aside,
  .pickle-now { border: 2px solid CanvasText; }
  .pickle-atlas article i,
  .pickle-methods i,
  .pickle-places article i { border: 1px solid CanvasText; }
}

@media (prefers-reduced-motion: reduce) {
  .pickle-guide *,
  .pickle-guide *::before,
  .pickle-guide *::after { scroll-behavior: auto !important; transition: none !important; }
}