/* Long-form pages: guides and the AI price index. Built on brass.css tokens. */
.guide{max-width:760px;padding-top:56px;padding-bottom:96px}
.guide .lot{font-family:var(--mono);font-size:var(--caption);letter-spacing:.08em;text-transform:uppercase;color:var(--brass-ink);margin:0 0 18px}
.guide h1{font-family:var(--display);font-weight:400;font-size:clamp(34px,5vw,var(--h2));line-height:1.08;letter-spacing:-.01em;margin:0 0 24px;text-wrap:balance}
.guide h2{font-family:var(--display);font-weight:400;font-size:clamp(26px,3.4vw,32px);line-height:1.15;margin:56px 0 16px;text-wrap:balance}
.guide h3{font-family:var(--text);font-weight:700;font-size:var(--body);margin:32px 0 10px}
.guide p,.guide li{font-size:var(--body);line-height:1.6}
.guide .lede{font-size:var(--lede);line-height:1.5;color:var(--ink)}
.guide ul,.guide ol{padding-left:1.2em}
.guide li{margin:0 0 8px}
.guide a{color:var(--ink);text-decoration-color:var(--strong);text-underline-offset:3px}
.guide a:hover{text-decoration-color:var(--ink)}
.guide .small{font-size:var(--small);color:var(--soft)}
.guide figure{margin:40px 0}
.guide figcaption{font-size:var(--small);color:var(--soft);margin-top:12px;line-height:1.5}
.index-chart svg{width:100%;height:auto;display:block}.index-chart .chart-narrow{display:none}@media(max-width:599px){.index-chart .chart-wide{display:none}.index-chart .chart-narrow{display:block}}
.guide .table-scroll{overflow-x:auto;margin:0 0 24px;border-top:1px solid var(--rule)}
.guide table{border-collapse:collapse;width:100%;font-size:var(--small)}
.guide th,.guide td{text-align:left;padding:10px 12px 10px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.guide th{font-family:var(--mono);font-weight:400;font-size:var(--caption);letter-spacing:.06em;text-transform:uppercase;color:var(--soft)}
.guide td.num{font-family:var(--mono);white-space:nowrap}
.guide td.date{white-space:nowrap}
.guide th.num,.guide td.num{text-align:right}
/* On phones a wide table gets the board's hint while it is wider than the screen, and keeps its first column in view. */
.guide .swipe{display:none}
@media(max-width:600px){.guide .swipe{display:block;margin:0 0 8px}.guide .swipe[data-fits]{display:none}.guide .table-scroll tr>:first-child{position:sticky;left:0;background:var(--paper);z-index:1}}
.guide td a.src{display:inline-block;min-width:24px;min-height:24px;padding:2px 4px;text-align:center}
.guide .sources{font-size:var(--small);color:var(--soft)}
.guide .sources li{line-height:1.45}
.guide .sources a{color:var(--soft);word-break:break-word}
.guide-note{margin-top:64px;padding-top:24px;border-top:1px solid var(--rule)}
.guide-note p{font-size:var(--small);color:var(--soft)}
.guide .guide-list,.guide-list{list-style:none;padding:0;margin:32px 0 0}
.guide-list li{border-top:1px solid var(--rule);padding:22px 0;margin:0}
.guide-list a{font-family:var(--display);font-size:clamp(22px,2.6vw,26px);line-height:1.2;text-decoration:none}
.guide-list a:hover{text-decoration:underline;text-decoration-color:var(--strong)}
.guide-list p{margin:8px 0 0;font-size:var(--small);color:var(--soft)}
.guide blockquote{margin:24px 0;padding-left:18px;border-left:2px solid var(--rule);color:var(--soft)}
.guide code{font-family:var(--mono);font-size:.9em}
@media (max-width:600px){.guide{padding-top:36px}.guide th,.guide td{padding-right:8px}}

/* The price index's date, under its lede rather than above its headline. */
.guide .updated{font-family:var(--mono);font-size:var(--caption);letter-spacing:.04em;color:var(--soft);margin:-8px 0 32px}
.guide-list a{display:block;text-wrap:pretty}