/* guide.css: long-form guide pages on the site design (10-30, first used by /how-to-find-out-what-concert-you-went-to/).
   Reading column 720px, body 17px, tables that scroll sideways on phones. Colors are store.css tokens only. */
.gf .gf-narrow{max-width:760px}
.gf .gf-hero{padding-bottom:24px}
.gf .gf-hero .hm-lede{max-width:40ch}
.gf-count{font-size:15px;color:var(--muted)!important;margin-top:24px!important}
.gf .hm-results .hm-in{padding-bottom:8px}
.gf-prose p,.gf-prose li{font-size:17px;line-height:1.65;color:var(--soft)}
.gf-prose p+p{margin-top:16px}
.gf-prose h2{margin-bottom:16px}
.gf-prose h3{margin-top:32px}
.gf-prose ul,.gf-prose ol{margin:16px 0 0;padding-left:22px}
.gf-prose li{margin:0 0 10px}
.gf-prose b{color:var(--ink)}
.gf-prose a,.gf-src a{color:var(--hot-ink);text-underline-offset:3px}
.gf-prose code{font:500 15px/1.5 ui-monospace,Consolas,monospace;background:var(--raised);border:1px solid var(--line);border-radius:6px;padding:2px 6px;color:var(--ink);word-break:break-word}
.gf-steps{counter-reset:s;list-style:none;padding-left:0!important}
.gf-steps li{counter-increment:s;position:relative;padding-left:44px;margin-bottom:18px}
.gf-steps li::before{content:counter(s);position:absolute;left:0;top:1px;width:30px;height:30px;border-radius:50%;background:var(--raised);border:1px solid var(--line2);color:var(--ink);font:700 15px/28px Inter,sans-serif;text-align:center}
.gf-tw{overflow-x:auto;margin:20px 0;border:1px solid var(--line);border-radius:12px}
.gf-t{width:100%;border-collapse:collapse;font-size:16px;min-width:520px}
.gf-t th{text-align:left;font:600 13px/1.3 Inter,sans-serif;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;padding:12px 16px;background:var(--raised);border-bottom:1px solid var(--line)}
.gf-t td{padding:12px 16px;border-bottom:1px solid var(--line);color:var(--soft);vertical-align:top}
.gf-t tr:last-child td{border-bottom:0}
.gf-t2 td:first-child{color:var(--ink);font-weight:600;width:38%}
.gf-hit td{background:rgba(79,174,106,.12);color:var(--ink);font-weight:600}
.gf-note{margin-top:24px!important;padding:16px 20px;border-left:3px solid var(--accent);background:var(--raised);border-radius:0 10px 10px 0}
.gf-gift .hm-sub{margin-bottom:24px!important}
.gf-src{font-size:13px;line-height:1.6;color:var(--muted)!important;padding:32px 0 48px}
.gf-tw:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* designeye round 1 (10-30): hero with the real results, on-page nav, photos that show each clue, tighter rhythm */
.gf .gf-hgrid{display:grid;gap:32px;max-width:1120px}
.gf-herofig{display:none;margin:0}
.gf-phone{background:#000!important;width:min(280px,70vw)}
.gf-phone img{object-fit:cover;object-position:top}
.gf-herofig figcaption{font-size:14px;color:var(--muted);text-align:center;margin-top:16px}
@media (min-width:900px){
  .gf .gf-hgrid{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:64px;align-items:center}
  .gf-herofig{display:block}
}
.gf-toc{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg2)}
.gf-toc .hm-in{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;padding-top:14px;padding-bottom:14px}
.gf-toc span{font:600 13px/1 Inter,sans-serif;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;width:100%}
.gf-toc a{font:500 15px/1 Inter,sans-serif;color:var(--soft);text-decoration:none;padding:12px 0;min-height:44px;display:inline-flex;align-items:center}
.gf-toc a:hover{color:var(--hot-ink)}
@media (min-width:760px){.gf-toc span{width:auto;margin-right:4px}}
.gf .gf-prose,.gf #faq{padding:56px 0;scroll-margin-top:60px}
.gf .gf-prose h3{margin-top:28px}
.gf-figs{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:28px 0 8px;align-items:start}
.gf-fig{margin:0}
.gf-fig img{width:100%;height:auto;display:block;border-radius:10px;border:1px solid var(--line);background:var(--raised)}
.gf-fig figcaption{font-size:14px;line-height:1.5;color:var(--soft);margin-top:10px}
.gf-cr{display:block;font-size:12px;color:var(--muted);margin-top:4px}
.gf-cr a{color:var(--muted)}
.gf-wide{grid-column:1 / -1}
@media (min-width:760px){.gf-figs:has(.gf-wide){grid-template-columns:1.4fr .6fr}.gf-wide{grid-column:auto}}
.gf-crop img{aspect-ratio:4/3;object-fit:cover;object-position:center 25%}
.gf-toc .hm-in{gap:4px 16px}
@media (min-width:760px){.gf-toc .gf-narrow{max-width:900px}}
.gf-t3{min-width:0}
@media (max-width:520px){.gf-t3 th,.gf-t3 td{padding:10px 10px;font-size:15px}.gf-t3 td:first-child{white-space:nowrap}}
/* stub guide (10-30): a real stub with numbered labels */
.sg-herofig img{width:100%;height:auto;border-radius:12px;border:1px solid var(--line);box-shadow:0 24px 60px rgba(0,0,0,.5);display:block}
.sg-herofig figcaption{text-align:left}
.sg-pinwrap{position:relative}
.sg-pin{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:var(--accent);color:var(--on-hot);font:800 15px/30px Inter,sans-serif;text-align:center;box-shadow:0 0 0 3px rgba(11,13,14,.85)}
.sg-pinned{margin:24px 0}
.sg-pinned + .gf-steps{margin-top:8px}
.sg-one{grid-template-columns:1fr!important}
.gf-more{margin-top:24px!important;font-size:15px;color:var(--muted)!important}
.gf-more a{color:var(--hot-ink)}
.gf-t2{min-width:0}
/* gift guide (10-30) */
.gd .gd-herofig .gf-fig img{border-radius:12px}
.gd .gf-hgrid .gd-herofig{display:block}
.gd-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}
.gd-link{color:var(--hot-ink);font-weight:600;text-underline-offset:3px}
.gd-num{font:800 14px/1 Inter,sans-serif;color:var(--hot-ink)!important;letter-spacing:.08em;margin-bottom:8px!important}
.gd-price{font:700 17px/1.4 Inter,sans-serif;color:var(--ink)!important;margin:-4px 0 12px!important}
.gd-best{margin-top:14px!important;color:var(--muted)!important;font-size:16px!important}
.gd-best b{color:var(--soft)}
.gd-act{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;margin-top:20px!important}
.gd-fine{font-size:15px!important;color:var(--muted)!important;margin-top:12px!important}
.gd-top .hm-in{border:1px solid var(--line2);border-radius:16px;padding-top:32px;padding-bottom:32px;background:var(--bg2)}
.gd-shots{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px;max-width:420px}
.gd-shots img{width:100%;height:auto;border-radius:16px;border:1px solid var(--line)}
.gd .gd-idea{padding:40px 0}
.gd .sg-one{max-width:480px}.gd .gd-pic.gf-crop img{aspect-ratio:4/3}
.rg-hero img{max-height:560px;object-fit:cover;object-position:center 30%}
/* who-opened guide (10-30): reverse lookup form and list */
.og-row{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin-top:16px}
.og-row>div{flex:1 1 220px}.og-row .og-y{flex:0 0 110px}
.og-row label{display:block;font:600 15px/1.4 Inter,sans-serif;color:var(--ink);margin-bottom:8px}
.og-in{width:100%;min-height:52px;border-radius:12px;border:1px solid var(--line2);background:var(--raised);color:var(--ink);font:500 17px Inter,sans-serif;padding:0 14px}
.og-in:focus{outline:2px solid var(--accent);outline-offset:1px}
.og-go{min-height:52px}
#ores{margin-top:24px}
.og-list .og-d{flex:0 0 112px;font:700 15px/1.3 Inter,sans-serif;color:var(--hot-ink)}
.og-btn{background:none;border:0;padding:8px 0;cursor:pointer;font:600 15px Inter,sans-serif;min-height:44px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.gf-tw{position:relative}