.field-guides { padding-block: 20px 100px; }
.guide-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.guide-card { display: flex; flex-direction: column; align-items: flex-start; padding: 30px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(145deg,#19252b85,#0b1014); transition: border-color .25s, background .25s; }
.guide-card:hover { border-color: #d1e4bc70; background: #162026; }
.guide-card .eyebrow { color: var(--sage); font-size: 9px; }
.guide-card h3 { margin-top: 0; font-size: clamp(23px,2vw,29px); line-height: 1.3; letter-spacing: -.9px; font-weight: 400; }
.guide-card p { margin-block: 18px 26px; color: var(--muted); font-size: 13px; line-height: 1.85; }
.guide-read { margin-top: auto; font-size: 12px; color: var(--sage); }
.guide-page { background: radial-gradient(ellipse at 90% 0%,#20343c77,transparent 42%),var(--bg); }
.guide-header { display: flex; justify-content: space-between; align-items: center; height: 100px; border-bottom: 1px solid var(--line); }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 14px; padding-top: 40px; font-size: 12px; color: var(--muted); }
.breadcrumb a:hover { color: var(--sage); }
.guide-heading { max-width: 900px; padding-block: 68px 60px; }
.guide-heading .eyebrow { color: var(--sage); margin-bottom: 24px; }
.guide-heading h1 { font-size: clamp(42px,5.8vw,80px); line-height: 1.08; font-weight: 400; letter-spacing: -3px; text-wrap: balance; }
.guide-deck { max-width: 740px; margin-top: 30px; font-size: clamp(16px,1.5vw,20px); line-height: 1.8; color: #b7c5ca; }
.guide-byline { margin-top: 22px; color: var(--muted); font-size: 12px; }
.guide-byline a,.guide-source a { text-decoration: underline; text-underline-offset: 4px; }
.guide-layout { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); gap: 80px; align-items: start; }
.guide-body section { margin-bottom: 44px; }
.guide-body h2 { font-size: 29px; letter-spacing: -.8px; line-height: 1.3; margin-bottom: 20px; }
.guide-body p,.guide-body li { font-size: 15px; line-height: 1.95; color: #bdc8cd; }
.guide-body p+p { margin-top: 18px; }
.guide-body strong { font-weight: 600; color: var(--ink); }
.guide-body ul,.guide-body ol { padding-left: 23px; margin-block: 0 20px; }
.guide-body li { padding-left: 6px; margin-block: 8px; }
.guide-body .guide-source { font-size: 12px; color: var(--muted); }
.guide-aside { padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: #131e24; }
.guide-aside figure { margin: 0 0 30px; }
.guide-aside img { width: 100%; border-radius: 9px; }
.guide-aside figcaption { font-size: 9px; color: var(--muted); margin-top: 12px; }
.guide-aside h2 { font-size: 28px; letter-spacing: -.8px; line-height: 1.3; }
.guide-aside p { color: var(--muted); font-size: 13px; line-height: 1.9; margin-block: 18px 24px; }
.guide-aside .text-link { display: block; width: fit-content; margin-top: 22px; }
.related-guides { border-top: 1px solid var(--line); margin-top: 70px; padding-block: 40px 80px; }
.related-guides .eyebrow { color: var(--sage); margin-bottom: 20px; }
.related-guides > a { display: flex; justify-content: space-between; gap: 20px; padding-block: 22px; font-size: 20px; line-height: 1.5; border-bottom: 1px solid var(--line); }
.related-guides > a:hover { color: var(--sage); }
@media(max-width: 900px) {
  .guide-grid { gap: 12px; }
  .guide-card { padding: 23px; }
  .guide-layout { gap: 35px; }
}
@media(max-width: 700px) {
  .field-guides { padding-block: 0 65px; }
  .guide-grid,.guide-layout { grid-template-columns: 1fr; }
  .guide-card { padding: 28px; }
  .guide-card h3 { margin-top: 0; }
  .guide-heading { padding-block: 46px; }
  .guide-heading h1 { letter-spacing: -1.7px; }
  .guide-header { height: 84px; }
  .guide-body h2 { font-size: 25px; }
  .related-guides { margin-top: 50px; padding-bottom: 50px; }
  .related-guides > a { font-size: 18px; }
}
@media(prefers-reduced-motion: reduce) { .guide-card { transition: none; } }
/* Quiet reading links, without repeated decorative panels. */
.guide-card { background:none; border:0; border-top:1px solid var(--line); border-radius:0; padding:25px 0; }
.guide-grid { gap:42px; }
.guide-card:hover { background:none; border-color:var(--sage); }
.guide-card h3 { margin-top:0; }
.guide-aside { border-radius:4px; background:none; }
@media(max-width:700px) { .guide-grid { gap:12px; } .guide-card { padding:25px 0; } }