/* Editorial look for the guides pages. Loads AFTER styles.css and overrides it. */
@font-face{font-family:"Public Sans";src:url("assets/fonts/PublicSans-Black.ttf") format("truetype");font-weight:900;font-display:swap}
:root{
  --paper:#FDFBF6;--ink:#1F2B47;--blue:#4F6E9F;--blue-hover:#3F5B87;--muted:#6B7285;--line:#C8CEDA;--butter:#F5EBC8;--marker:#F5EBC8;
  --powder:#DFE9F5;--text:#3A4257;--serif:"Instrument Serif",Georgia,serif;--shadow-card:none;--shadow-soft:none
}
*{letter-spacing:normal}
body{background:var(--paper);color:var(--text);font:400 15px/1.7 var(--sans);letter-spacing:-.2px}
h1,h2,h3{color:var(--ink)}
:focus-visible{outline:2px solid var(--blue);outline-offset:4px}

/* Header + logo: Nati (Public Sans Bold) Estrada (serif italic) */
.site-header{background:rgb(253 251 246 / 92%);backdrop-filter:blur(8px);color:var(--ink);border-bottom:1px solid var(--line)}
.wordmark{font:700 22px/1 var(--sans);letter-spacing:-.04em;color:var(--ink)}
.wordmark em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em;font-size:1.12em}
.guide-nav-back{font:600 11px/1 var(--sans);letter-spacing:1.6px;text-transform:uppercase;color:var(--ink)}
.guide-nav-back img{filter:none}

/* Buttons: small uppercase pills */
.button{min-height:44px;padding:12px 26px;border-radius:999px;background:var(--blue);border:1px solid var(--blue);color:#fff;font:600 11px/1 var(--sans);letter-spacing:1.6px;text-transform:uppercase;box-shadow:none}
.button:hover{background:var(--blue-hover);transform:none}
.button img{width:16px;height:16px}
.button-outline{background:transparent;color:var(--ink);border-color:var(--ink)}
.button-outline:hover{background:var(--ink);color:#fff}
.button-outline:hover img{filter:invert(1)}

/* Page title: Public Sans Black, serif italic accent */
.breadcrumb{font-size:12px}
.article-header h1{font:900 clamp(48px,6vw,72px)/.95 var(--sans);letter-spacing:-.04em}
.article-header h1 em{font-family:var(--serif);font-weight:400;font-style:italic;letter-spacing:-.01em;font-size:1.08em}
.article-header .lead{font:400 24px/1.3 var(--serif);color:var(--ink)}
.article-body h2{font:400 36px/1.05 var(--serif);color:var(--ink)}
.article-steps>li::before{font:400 30px/1 var(--serif);color:var(--ink)}
.article-note{border-left:2px solid var(--ink);background:#FBF6E4}
.prompt-panel{border-radius:0;border-color:var(--line)}
.prompt-toolbar{background:var(--powder)}
.signature{font:italic 400 34px/1 var(--serif);color:var(--ink)}

/* Guides library */
.guide-tool-button{border-radius:999px;background:#fff;border:1px solid var(--line);box-shadow:none;font:400 14px/1 var(--sans);letter-spacing:-.2px;color:var(--ink);min-height:48px;padding:8px 18px 8px 10px}
.guide-tool-button img{width:26px;height:26px}
.guide-tool-button:hover{border-color:var(--ink);background:#fff}
.guide-tool-button[aria-pressed="true"]{background:var(--butter);border-color:var(--ink);box-shadow:none}
#guide-filter-count{font-size:13px;color:var(--muted)}
.free-guide-card{border-radius:0;border:1px solid var(--line);box-shadow:none;background:#fff;padding:28px 30px}
.free-guide-card+.free-guide-card{margin-top:16px}
.free-guide-icon{border-radius:999px;background:var(--powder)}
.free-label{font:400 13px/1.3 var(--sans);letter-spacing:-.2px;color:var(--muted)}
.free-guide-copy h2,.free-guide-copy h3{font:400 30px/1.05 var(--serif);color:var(--ink)}
.guide-filter-empty{border-radius:0}

/* Footer */
.site-footer{background:var(--ink);color:var(--powder);padding-top:0}
.footer-bottom{border-top:0;color:var(--powder);font-size:12px}
.footer-bottom a:hover{color:#fff}

em{color:inherit}
.guides-library .free-guide-card{margin-block:0}
.guides-library .free-guide-card+.free-guide-card,.guides-library .guide-filter-empty+.free-guide-card{margin-top:16px}
.guides-library .guide-logo-filter-bar{margin-bottom:32px}

/* Guide flow strip: tool → tool → result (garabato guide, 2026-10-14) */
.flow{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:28px 0 30px}
.flow-step{display:flex;align-items:center;gap:10px;padding:8px 16px 8px 8px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:13px;color:var(--ink)}
.flow-step img{width:28px;height:28px;object-fit:contain}
.flow-ico{width:28px;height:28px;display:grid;place-items:center;border-radius:999px;background:var(--butter);font-size:14px;color:var(--ink)}
.flow-arrow{color:var(--blue);font-weight:700}
.free-guide-icon.pair{display:flex;gap:4px;width:auto;padding:0 10px}
.free-guide-icon.pair img{width:26px;height:26px;object-fit:contain}
.guide-example{margin:0 0 30px;max-width:340px}
.guide-example img{width:100%;height:auto;border:1px solid var(--line)}
.guide-example figcaption{margin-top:10px;font:italic 400 17px/1.3 var(--serif);color:var(--muted)}
/* Guides have no number (her rule, 2026-10-14) */
.resource-meta.no-num>span:first-child{font-size:10px;line-height:inherit;color:var(--muted);font-weight:600;padding-right:0;border-right:0}

/* Type hierarchy for guides (her rule, 2026-10-14):
   Public Sans does the work in different weights; Instrument Serif italic is ONLY the accent word. */
.article-header .lead{font:500 21px/1.4 var(--sans);letter-spacing:-.02em;color:var(--ink)}
.article-header .lead + p{font-size:16px}
.article-body h2{font:800 30px/1.1 var(--sans);letter-spacing:-.035em;color:var(--ink)}
.article-body h2 em{font:italic 400 1.1em/1 var(--serif);letter-spacing:-.01em}
.article-body p,.article-steps>li{font-size:16px;line-height:1.65}
.article-body strong,.article-steps strong{font-weight:700;color:var(--ink)}
.article-steps>li::before{font:900 22px/1 var(--sans);letter-spacing:-.03em;color:var(--blue)}
.tool-list li{font-weight:600;color:var(--ink)}
.prompt-toolbar>span{font-weight:700;letter-spacing:1.4px}
.guide-example figcaption{font:400 13px/1.4 var(--sans);color:var(--muted)}
.article-header .lead,.article-note p{text-wrap:pretty}
.article-note p{font-weight:500;color:var(--ink)}
/* Library cards */
.free-label{font-weight:600;font-size:12px;letter-spacing:.02em}
.free-guide-copy h2,.free-guide-copy h3{font:700 24px/1.15 var(--sans);letter-spacing:-.03em;color:var(--ink)}
.guides-library .article-header .lead{font-weight:500}
/* Tool names always carry their logo (her rule, 2026-10-14) */
.tool{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;vertical-align:baseline}
.tool img{width:1.1em;height:1.1em;object-fit:contain;position:relative;top:.12em;display:inline-block}
.tool-list .tool img{top:.15em}
.tool{display:inline;white-space:nowrap}
.tool img{display:inline-block;width:1.2em;height:1.2em;object-fit:contain;vertical-align:-.25em;margin-right:.28em;top:0;position:static}
.tool-list .tool img{top:0}
.button .tool img{width:16px;height:16px;vertical-align:-3px;filter:none}
.tool{letter-spacing:inherit}
.ui-button{display:inline-block;vertical-align:middle;margin:0 2px;padding:3px 6px;background:#fff;border:1px solid var(--line);border-radius:8px;line-height:0}.ui-button img{width:29px;height:39px}
/* Guides with two tools: one circle per logo (her request, 2026-10-14) */
.free-guide-icons{display:flex;gap:8px;flex:none}
.free-guide-icons .free-guide-icon{flex:0 0 60px}
@media(max-width:760px){.free-guide-icons .free-guide-icon{flex-basis:48px}.free-guide-icons+.free-guide-copy{flex-basis:100%}}
@media(max-width:380px){.free-guide-icons{display:none}}