.guide-page { padding: 0; background: var(--paper); }
.guide-page main { padding: 0; }

.guide-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(54px, 8vw, 108px) clamp(38px, 6vw, 76px);
  color: #f5f2e9;
  background:
    linear-gradient(115deg, rgba(21, 23, 21, .98), rgba(21, 23, 21, .93) 61%, rgba(21, 23, 21, .76)),
    repeating-linear-gradient(90deg, transparent 0 79px, rgba(255, 181, 71, .05) 80px 81px);
  border-bottom: 8px solid var(--amber);
}
.guide-hero::after {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: min(34vw, 440px);
  opacity: .22;
  background: repeating-linear-gradient(-24deg, transparent 0 22px, var(--amber) 23px 25px);
  clip-path: polygon(45% 0, 100% 0, 100% 100%, 0 100%);
  pointer-events: none;
}
.guide-hero .container { position: relative; z-index: 1; }
.guide-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, .52fr); gap: clamp(28px, 6vw, 86px); align-items: end; }
.guide-breadcrumbs, .breadcrumb { margin: 0 0 22px; color: #bdb9ae; font: 500 12px/1.5 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.guide-breadcrumbs a, .breadcrumb a { color: #efe8dc; text-decoration-color: var(--amber); }
.guide-kicker { margin: 0 0 12px; color: var(--amber); font: 500 13px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .12em; }
.guide-hero h1 { max-width: 930px; margin: 0; font: 700 clamp(48px, 8vw, 102px)/.88 var(--display); letter-spacing: -.035em; text-transform: uppercase; text-wrap: balance; }
.guide-lede { max-width: 780px; margin: 24px 0 0; color: #d8d5cb; font-size: clamp(18px, 2vw, 22px); line-height: 1.55; }
.guide-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.guide-hero .button-quiet:hover { background: #f5f2e9; }

.guide-body { padding-block: clamp(42px, 6vw, 82px) 88px; }
.guide-body > .container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3.05fr); gap: clamp(28px, 6vw, 86px); align-items: start; }
.container.guide-body { padding-block: clamp(42px, 6vw, 82px) 88px; }
.container.guide-body:has(> article) { display: grid; grid-template-columns: minmax(180px, .8fr) minmax(0, 3.2fr); gap: clamp(28px, 6vw, 76px); align-items: start; }
.container.guide-body > article { min-width: 0; }
.guide-content { min-width: 0; }
.guide-section { margin-block: 0 clamp(54px, 7vw, 94px); scroll-margin-top: 24px; }
.guide-section > :first-child { margin-top: 0; }
.guide-section h2 { max-width: 800px; margin: 0 0 16px; font: 700 clamp(34px, 5vw, 60px)/.95 var(--display); letter-spacing: -.025em; text-transform: uppercase; }
.guide-section h3 { margin-top: 30px; font-size: 21px; line-height: 1.25; }
.guide-section p, .guide-section li { max-width: 780px; }

.section-index { position: sticky; top: 22px; padding: 18px; border-top: 6px solid var(--amber); background: #1b1d1b; color: #d8d5cb; }
.section-index > strong { display: block; margin-bottom: 10px; color: #fff8ed; font: 700 13px/1.25 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.section-index ol, .section-index ul { list-style: none; padding: 0; margin: 0; }
.section-index li { border-top: 1px solid #3a3c38; }
.section-index a { display: block; padding: 9px 0; color: inherit; font-size: 13px; line-height: 1.35; text-decoration: none; }
.section-index a:hover { color: var(--amber); }

.guide-answer, .answer-plate {
  margin: 0 0 clamp(48px, 7vw, 82px);
  padding: clamp(22px, 4vw, 40px);
  border: 1px solid #bcb5a7;
  border-left: 9px solid var(--amber);
  background: var(--panel);
  color: var(--ink);
}
.guide-answer-label, .answer-label { display: block; margin-bottom: 10px; color: #76511d; font: 500 12px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .11em; }
.guide-answer-title, .answer-value { display: block; max-width: 920px; font: 700 clamp(31px, 5vw, 56px)/.98 var(--display); letter-spacing: -.02em; text-transform: uppercase; }
.guide-answer-detail, .answer-note { max-width: 780px; margin: 16px 0 0; color: var(--muted); font-size: 16px; }
.answer-plate > div { display: grid; grid-template-columns: minmax(130px, .8fr) minmax(0, 1.2fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.answer-plate dt { color: var(--muted); font: 500 11px/1.45 var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.answer-plate dd { margin: 0; font-weight: 700; }
.answer-plate-wide h2 { margin: 0; font: 700 clamp(32px, 5vw, 54px)/.98 var(--display); text-transform: uppercase; }

.guide-grid, .guide-split, .guide-figure-grid, .related-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.guide-card, .guide-figure-panel, .figure-card { padding: 20px; border: 1px solid var(--line); background: var(--panel); }
.guide-card h3, .guide-figure-panel h3, .figure-card h3 { margin-top: 0; }
.guide-card p:last-child, .guide-figure-panel p:last-child, .figure-card p:last-child { margin-bottom: 0; }
.guide-card strong { display: block; margin-bottom: 5px; font-size: 18px; line-height: 1.2; }
.guide-card span { color: var(--muted); font-size: 14px; }

.guide-figure { margin: 28px 0 34px; border: 1px solid #bdb5a6; background: #e8dfd0; }
.guide-figure img, .guide-figure-panel img, .figure-card img { display: block; width: 100%; height: auto; object-fit: contain; background: linear-gradient(135deg, #eee5d7, #d8cbb7); }
.guide-figure figcaption, .guide-caption { padding: 13px 16px; border-top: 1px solid #bdb5a6; color: var(--muted); font-size: 14px; line-height: 1.45; }
.guide-figure-panel .guide-caption, .figure-card figcaption { padding-inline: 0; padding-bottom: 0; border-top: 0; }

.guide-ledger { margin: 25px 0; border-top: 3px solid var(--ink); }
.guide-ledger > div { display: grid; grid-template-columns: minmax(140px, .65fr) minmax(0, 1.35fr); gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.guide-ledger dt { color: var(--muted); font: 500 12px/1.5 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.guide-ledger dd { margin: 0; font-weight: 700; }
.guide-ledger > dl { margin: 0; }
.guide-ledger > dl > div { display: grid; grid-template-columns: minmax(140px, .65fr) minmax(0, 1.35fr); gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.guide-ledger > dl dt { color: var(--muted); font: 500 12px/1.5 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.guide-ledger > dl dd { margin: 0; font-weight: 700; }

.guide-table, .comparison-table table { margin: 24px 0; border-top: 4px solid var(--ink); }
.comparison-table, .guide-table table { margin: 0; border-top: 4px solid var(--ink); }
.guide-table th, .comparison-table th { background: #e9e1d4; color: #34352f; }
.guide-table td:first-child, .comparison-table td:first-child { font-weight: 700; }
.guide-table tbody tr:last-child td, .comparison-table tbody tr:last-child td { border-bottom: 0; }

.guide-callout, .callout { margin: 28px 0; padding: 20px 22px; border-left: 7px solid var(--amber); background: #ede2d2; }
.guide-callout > :first-child, .callout > :first-child { margin-top: 0; }
.guide-callout > :last-child, .callout > :last-child { margin-bottom: 0; }
.guide-callout--warning, .callout-warning { border-color: #9c5b00; background: #f3dfbd; }
.callout-dark { border-color: var(--amber); background: #1b1d1b; color: #efebe2; }
.callout-dark a { color: #fff; }

.decision-list { padding: 0; counter-reset: decisions; list-style: none; }
.decision-list li { position: relative; min-height: 66px; padding: 0 0 22px 64px; counter-increment: decisions; }
.decision-list li::before { content: counter(decisions, decimal-leading-zero); position: absolute; left: 0; top: 0; color: #9c5b00; font: 700 25px/1 var(--mono); }
.decision-list li + li { padding-top: 22px; border-top: 1px solid var(--line); }
.decision-list li + li::before { top: 22px; }
.decision-list > div { display: grid; grid-template-columns: minmax(120px, .55fr) minmax(0, 1.45fr); gap: 18px; padding: 14px 0; border-top: 1px solid var(--line); }
.decision-list > div dt { font-weight: 700; }
.decision-list > div dd { margin: 0; color: var(--muted); }

.source-strip { display: grid; grid-template-columns: auto 1fr; gap: 12px 20px; margin: 26px 0; padding: 18px; border: 1px solid #bdb5a6; background: #e9e1d4; }
.source-strip strong { color: #6f4b19; font: 500 12px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .07em; }
.guide-sources { margin-top: clamp(50px, 7vw, 90px); padding-top: 28px; border-top: 7px solid var(--ink); }
.guide-sources h2 { margin-top: 0; }
.source-list, .sources-list { padding-left: 22px; color: var(--muted); font-size: 14px; }
.source-list li, .sources-list li { margin-block: 10px; overflow-wrap: anywhere; }
.guide-updated, .guide-meta { color: var(--muted); font: 500 12px/1.5 var(--mono); }

.guide-related, .related-guides { padding-block: 48px 56px; border-top: 1px solid var(--line); background: #e9e1d4; }
.guide-related h2, .related-guides h2 { margin: 0 0 20px; font: 700 clamp(30px, 4vw, 46px)/1 var(--display); text-transform: uppercase; }
.related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.related-grid a, .related-guides > .container > div > a { display: block; min-height: 100%; padding: 19px; border-top: 5px solid var(--ink); background: var(--panel); text-decoration: none; }
.related-grid a:hover, .related-guides a:hover { border-color: var(--amber); }
.related-grid strong { display: block; font-size: 18px; line-height: 1.2; }
.related-grid span { display: block; margin-top: 7px; color: var(--muted); font-size: 14px; }

.guide-cta { padding-block: clamp(45px, 7vw, 78px); background: var(--ink); color: #f5f2e9; }
.guide-cta .container { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px 42px; }
.guide-cta h2 { margin: 0; font: 700 clamp(36px, 5vw, 58px)/.95 var(--display); text-transform: uppercase; }
.guide-cta p { max-width: 720px; margin: 12px 0 0; color: #c8c5bb; }
.guide-content > .guide-cta, article > .guide-cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 22px 38px; margin-block: 54px; padding: clamp(26px, 5vw, 44px); }
.guide-content > .guide-cta .button, article > .guide-cta .button { align-self: center; }

@media (max-width: 900px) {
  .guide-hero-grid, .guide-body > .container { grid-template-columns: 1fr; }
  .container.guide-body:has(> article) { grid-template-columns: 1fr; }
  .section-index { position: static; }
  .section-index ol, .section-index ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
  .related-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  .guide-hero { padding-block: 45px 42px; }
  .guide-hero h1 { max-width: 100%; font-size: clamp(42px, 13.5vw, 58px); overflow-wrap: anywhere; }
  .guide-hero::after { display: none; }
  .guide-grid, .guide-split, .guide-figure-grid, .related-grid { grid-template-columns: 1fr; }
  .guide-ledger > div, .source-strip { grid-template-columns: 1fr; gap: 4px; }
  .answer-plate > div, .guide-ledger > dl > div, .decision-list > div { grid-template-columns: 1fr; gap: 4px; }
  .section-index ol, .section-index ul { grid-template-columns: 1fr; }
  .guide-cta .container { grid-template-columns: 1fr; }
  .guide-content > .guide-cta, article > .guide-cta { grid-template-columns: 1fr; }
  .guide-cta .button { justify-self: start; }
  .guide-body { padding-bottom: 58px; }
  .guide-page .masthead .header-cta, .guide-page .masthead > .container > .button { display: none; }
}

@media print {
  .guide-hero { padding-block: 20px; color: #000; background: #fff; border-bottom: 2px solid #000; }
  .guide-hero h1 { font-size: 44px; }
  .guide-lede, .guide-breadcrumbs, .breadcrumb { color: #333; }
  .section-index, .guide-related, .related-guides, .guide-cta { display: none; }
  .guide-body > .container { display: block; }
  .guide-section { break-inside: avoid; margin-bottom: 34px; }
}
/* Pallet bottom types gallery */
.bottom-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 18px 0 26px; }
.bottom-card { margin: 0; border: 1px solid var(--line); background: var(--panel); }
.bottom-card img { display: block; width: 100%; height: auto; background: linear-gradient(135deg, #eee5d7, #d8cbb7); }
.bottom-card img + img { border-top: 1px dashed #bdb5a6; }
.bottom-card figcaption { padding: 12px 14px 14px; font-size: 14px; line-height: 1.45; color: var(--muted); }
.bottom-card figcaption strong { display: block; color: var(--ink); font-size: 16px; }
.bottom-meta { display: block; margin: 2px 0 6px; font: 500 12px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .04em; color: #8a5a2b; }
@media (max-width: 640px) { .bottom-gallery { grid-template-columns: 1fr; } }