/* Shared stylesheet for /guides.
   One file rather than the inline <style> the older pages use, because the guides are a
   growing set and a cached stylesheet across them beats repeating 4KB on every page.
   Tokens copied verbatim from index.html and rate.html so the section cannot drift. */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#060504;--card:#0D0B0A;--card2:#12100E;--gold:#cca04f;--goldhi:#e8c886;
  --white:#EDE9E1;--cream:#C8C2B9;--gray:#A39A8F;--graydim:#8E867B;
  --border:#1C1A17;--bordermid:#272420;
}
body{font-family:'DM Sans',system-ui,sans-serif;background:var(--bg);color:var(--cream);line-height:1.65;-webkit-font-smoothing:antialiased}
.wrap{max-width:720px;margin:0 auto;padding:30px 22px 90px}

a{color:var(--gold)}
a:hover{color:var(--goldhi)}

.brand{display:inline-flex;align-items:center;gap:9px;letter-spacing:3px;text-decoration:none;color:var(--white);font-weight:700;font-size:13px;margin-bottom:26px}

/* Breadcrumb. Real links, not decoration: they are the only route back up the tree. */
.crumb{font-size:12px;color:var(--graydim);margin-bottom:22px;letter-spacing:.3px}
.crumb a{text-decoration:none}
.crumb a:hover{text-decoration:underline}

h1{font-family:'Playfair Display',Georgia,serif;font-size:clamp(30px,6vw,44px);font-weight:800;line-height:1.08;letter-spacing:-.5px;color:var(--white);margin:0 0 14px;text-wrap:balance}
.standfirst{font-size:17px;color:var(--cream);margin-bottom:10px;max-width:60ch}
.meta{font-size:12px;color:var(--graydim);margin-bottom:34px}

h2{font-family:'Playfair Display',Georgia,serif;font-size:clamp(21px,3.6vw,27px);font-weight:700;color:var(--white);margin:40px 0 12px;line-height:1.2;text-wrap:balance}
h3{font-size:16px;font-weight:700;color:var(--white);margin:26px 0 8px;letter-spacing:.2px}
p{margin:0 0 15px;max-width:68ch;text-wrap:pretty}
ul,ol{margin:0 0 16px 20px;max-width:66ch}
li{margin-bottom:9px}
strong{color:var(--white);font-weight:700}

/* A definition box for the one line answer, which is what a search visitor came for. */
.answer{border:1px solid var(--bordermid);border-left:none;border-radius:12px;background:var(--card);padding:17px 19px;margin:0 0 30px}
.answer p{margin:0;color:var(--white);font-size:16px}
.answer .k{display:block;font-size:10px;font-weight:700;letter-spacing:2.4px;color:var(--gold);margin-bottom:7px}

table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:15px}
th,td{text-align:left;padding:11px 10px;border-bottom:1px solid var(--border);vertical-align:top}
th{color:var(--white);font-size:12px;letter-spacing:1.4px;text-transform:uppercase;font-weight:700}
td:first-child{color:var(--white);white-space:nowrap}

.note{font-size:14px;color:var(--gray);border-top:1px solid var(--border);padding-top:16px;margin-top:34px}

/* The one call to action. Not repeated four times down the page. */
.cta{display:block;background:var(--card);border:1px solid var(--bordermid);border-radius:14px;padding:22px;margin:38px 0 0;text-decoration:none}
.cta:hover{border-color:var(--gold)}
.cta .h{font-family:'Playfair Display',Georgia,serif;font-size:20px;color:var(--white);margin-bottom:6px}
.cta .s{font-size:14px;color:var(--gray)}
.cta .go{display:inline-block;margin-top:13px;font-size:12px;font-weight:700;letter-spacing:2px;color:var(--gold)}

/* Sibling guides. Internal links are most of why this section exists at all. */
.more{margin-top:44px;border-top:1px solid var(--border);padding-top:26px}
.more h2{margin-top:0;font-size:19px}
.more ul{list-style:none;margin-left:0}
.more li{margin-bottom:12px}
.more a{text-decoration:none;font-weight:700}
.more span{display:block;font-size:14px;color:var(--gray);font-weight:400}

.hublist{list-style:none;margin:26px 0 0}
.hublist li{margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid var(--border)}
.hublist a{font-family:'Playfair Display',Georgia,serif;font-size:20px;text-decoration:none;font-weight:700}
.hublist span{display:block;font-size:15px;color:var(--gray);margin-top:5px}

footer{border-top:1px solid var(--border);margin-top:56px;padding-top:22px;font-size:13px;color:var(--graydim)}
footer a{color:var(--gray);text-decoration:none;margin-right:16px}
footer a:hover{color:var(--gold)}

@media (prefers-reduced-motion:no-preference){a{transition:color .15s ease,border-color .15s ease}}

/* Diagrams. Added 2026-08-20: the guides had no images at all, which cost
   image search entirely on topics that are searched visually. */
figure.diagram{
  margin:34px 0;
  padding:0;
  border:1px solid var(--border);
  border-radius:4px;
  background:var(--card);
  overflow:hidden;
}
figure.diagram img{
  display:block;
  width:100%;
  height:auto;
}
figure.diagram figcaption{
  padding:14px 18px;
  border-top:1px solid var(--border);
  color:var(--graydim);
  font-size:.86rem;
  line-height:1.5;
}