/* Shared styles for the guide pages. The home page keeps its own inline styles. */
:root{
  --paper:#f5f6f3;--sheet:#fff;--ink:#17202b;--ink-2:#47525e;--rule:#d3d7da;
  --form:#1d3b57;--form-2:#2d5a84;--amber:#f2b01e;--amber-soft:#fde9b0;--loss:#a3271b;
  --gutter:clamp(16px,4vw,40px);
  --display:"Barlow Condensed","Arial Narrow",sans-serif;
  --body:"Source Serif 4",Georgia,serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.1rem/1.66 var(--body)}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
img{max-width:100%;height:auto;display:block}
a{color:var(--form-2);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--form);text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px;border-radius:2px}
.wrap{max-width:1120px;margin:0 auto;padding:0 var(--gutter)}

.bar{background:var(--form);color:#fff;position:sticky;top:0;z-index:20}
.bar .wrap{display:flex;align-items:center;gap:16px;min-height:52px;flex-wrap:wrap}
.bar .home{color:#fff;text-decoration:none;font:600 1.05rem var(--display);margin-right:auto}
.bar .home:hover{color:var(--amber-soft)}
.bar nav{display:flex;gap:2px;flex-wrap:wrap}
.bar nav a{white-space:nowrap;color:#dfe9f3;text-decoration:none;font:500 1.02rem var(--display);padding:6px 10px;position:relative}
.bar nav a::after{content:"";position:absolute;left:10px;right:10px;bottom:3px;height:2px;background:var(--amber);transform:scaleX(0);transform-origin:left;transition:transform .18s ease}
.bar nav a:hover,.bar nav a[aria-current="page"]{color:#fff}
.bar nav a:hover::after,.bar nav a[aria-current="page"]::after{transform:scaleX(1)}
@media (max-width:760px){.bar nav{width:100%;overflow-x:auto;flex-wrap:nowrap;padding-bottom:6px;scrollbar-width:none}.bar nav::-webkit-scrollbar{display:none}}

.crumbs{font:500 1rem var(--display);color:var(--ink-2);margin:26px 0 0}
.crumbs a{color:var(--ink-2)}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(24px,5vw,64px);align-items:start;padding:10px 0 64px}
@media (max-width:900px){.layout{grid-template-columns:1fr}}
article{max-width:70ch}
article h1{font:700 clamp(2.3rem,5.6vw,3.7rem)/1.02 var(--display);margin:14px 0 18px;color:var(--ink)}
article .lede{font-size:1.24rem;margin-bottom:1.2em}
article .byline{font:500 1rem var(--display);color:var(--ink-2);margin:0 0 22px}
article h2{font:700 clamp(1.7rem,3.4vw,2.2rem)/1.05 var(--display);color:var(--form);margin:1.8em 0 .45em;scroll-margin-top:64px}
article h3{font:600 1.4rem/1.1 var(--display);margin:1.4em 0 .3em}
article p{margin:0 0 1em}
article ol,article ul{padding-left:1.3em;margin:0 0 1em}
article li{margin:0 0 .5em}
.mark{background:linear-gradient(transparent 12%,var(--amber-soft) 12%,var(--amber-soft) 88%,transparent 88%);padding:0 .15em}
.callout{background:var(--sheet);border:1px solid var(--rule);border-left:5px solid var(--amber);padding:16px 18px;margin:1.4em 0;border-radius:3px}
.callout p:last-child{margin:0}
.callout b{font-family:var(--display);font-weight:600;font-size:1.12rem}
figure{margin:1.6em 0;background:var(--sheet);border:1px solid var(--rule);border-radius:3px;overflow:hidden}
figure a{display:block;background:#e9ebe8;border-bottom:1px solid var(--rule)}
figure img{width:100%;max-height:560px;object-fit:contain;object-position:top center;transition:transform .3s ease}
figure a:hover img{transform:scale(1.012)}
figcaption{padding:12px 16px;font-size:.98rem;color:var(--ink-2)}
.steps{counter-reset:s;list-style:none;padding:0}
.steps > li{counter-increment:s;position:relative;padding:14px 0 14px 54px;border-top:1px solid var(--rule);margin:0}
.steps > li::before{content:counter(s);position:absolute;left:0;top:14px;width:36px;height:36px;border-radius:50%;background:var(--ink);color:#fff;font:700 1.2rem/36px var(--display);text-align:center}
.steps > li > b{display:block;font:600 1.3rem/1.15 var(--display);margin-bottom:4px}
.typed{font-family:"Courier New",Courier,monospace;font-size:.98rem;background:#fafaf7;border-left:3px solid var(--loss);padding:10px 12px;text-transform:uppercase;margin:0 0 1em}

aside{position:sticky;top:76px;display:grid;gap:16px}
@media (max-width:900px){aside{position:static}}
.card{background:var(--sheet);border:1px solid var(--rule);border-top:4px solid var(--form);border-radius:3px;padding:16px 18px}
.card.story{border-top-color:var(--amber)}
.card h2{font:600 1.35rem/1.1 var(--display);margin:0 0 8px}
.card p{font-size:.98rem;margin:0 0 10px}
.card ul{list-style:none;margin:0;padding:0}
.card li{border-top:1px solid #eceeec}
.card li:first-child{border-top:0}
.card li a{display:block;padding:8px 0;font:600 1.05rem/1.2 var(--display);text-decoration:none}
.card li a:hover{text-decoration:underline}
.card li a[aria-current="page"]{color:var(--ink);pointer-events:none}
.btn{display:inline-block;font:600 1.05rem var(--display);background:var(--ink);color:#fff;text-decoration:none;padding:8px 14px;border-radius:2px;transition:background .15s ease}
.btn:hover{background:var(--form);color:#fff}

.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;list-style:none;padding:14px 32px 14px 0;position:relative;font:600 1.3rem/1.15 var(--display)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:10px;font-size:1.6rem;color:var(--form-2);transition:transform .18s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details > div{padding:0 0 14px}

footer.site{background:var(--ink);color:#c9d3dc;padding:34px 0 40px;font-size:.95rem}
footer.site a{color:#fff}
footer.site p{margin:0 0 .7em;max-width:90ch}
footer.site b{color:#dfe6ec}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}