/* Tin Can Vista components: plain CSS on top of tokens.css */

/* Buttons and links */
.aw-btn{font:600 14px/20px var(--font-sans);background:var(--action);color:var(--on-action);border:0;border-radius:var(--radius-md);padding:var(--space-2) var(--space-4);cursor:pointer}
.aw-btn:hover{filter:brightness(1.08)}
.aw-btn:focus-visible,.aw-link:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.aw-btn--quiet{background:transparent;color:var(--action);box-shadow:inset 0 0 0 1px var(--action)}
.aw-link{color:var(--action);text-decoration:underline;text-underline-offset:3px}

/* Tags: outlined, so they work on any tinted panel. Color comes from --tag-ink. */
.aw-tag{display:inline-block;font:600 11px/16px var(--font-sans);letter-spacing:.1em;text-transform:uppercase;background:transparent;color:var(--tag-ink,var(--rust-deep));border:1px solid currentColor;padding:1px var(--space-2);border-radius:var(--radius-sm)}
.aw-tag--sage{--tag-ink:var(--pine)}
.aw-tag--sky{--tag-ink:var(--sky-deep)}
.aw-tag--gold{--tag-ink:var(--gold-deep)}

/* Post card: a tinted panel with a solid top band. Rust by default. */
.aw-card{--accent:var(--rust);--tint:var(--rust-tint);--tag-ink:var(--rust-deep);background:var(--tint);border:1px solid var(--hairline);border-top:6px solid var(--accent);border-radius:var(--radius-lg);padding:var(--space-6);color:var(--ink);max-width:560px}
.aw-card--sky{--accent:var(--sky);--tint:var(--sky-tint);--tag-ink:var(--sky-deep)}
.aw-card--sage{--accent:var(--sage);--tint:var(--sage-tint);--tag-ink:var(--pine)}
.aw-card--gold{--accent:var(--gold);--tint:var(--gold-tint);--tag-ink:var(--gold-deep)}
.aw-card__meta{font:400 12px/16px var(--font-sans);color:var(--ink-muted);margin:0 0 var(--space-2)}
.aw-card__title{font:600 20px/26px var(--font-sans);margin:0 0 var(--space-2)}
.aw-card__title a{color:inherit;text-decoration:none}
.aw-card__title a:hover{text-decoration:underline;text-underline-offset:3px}
.aw-card__excerpt{font:400 16px/26px var(--font-sans);margin:0 0 var(--space-4)}

/* Header: solid rust band with the typeset name, nav and the theme switcher */
.aw-header{background:var(--band-rust);color:var(--on-band-rust)}
.aw-header__row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-3) var(--space-6);padding:var(--space-3) var(--space-4)}
.aw-header__name{font:800 30px/30px var(--font-display);letter-spacing:.01em;color:inherit;text-decoration:none}
.aw-header__nav{display:flex;align-items:center;gap:var(--space-6);font:500 14px/20px var(--font-sans)}
.aw-header__nav a{color:inherit;text-decoration:none}
.aw-header__nav a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.aw-header a:focus-visible{outline:2px solid var(--on-band-rust);outline-offset:2px}

/* Light / Dark / System switcher, sits on the header band */
.aw-theme{display:inline-flex;border:1px solid currentColor;border-radius:var(--radius-md);overflow:hidden}
.aw-theme button{display:grid;place-items:center;width:32px;height:28px;padding:0;background:transparent;color:inherit;border:0;cursor:pointer}
.aw-theme svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square;stroke-linejoin:miter}
.aw-theme button[aria-pressed="true"]{background:var(--on-band-rust);color:var(--band-rust)}
.aw-theme button:focus-visible{outline:2px solid currentColor;outline-offset:-4px}

/* Footer: solid steel band */
.aw-footer{background:var(--band-steel);color:var(--on-band-steel)}
.aw-footer__inner{max-width:720px;margin:0 auto;padding:var(--space-8) var(--space-4);font:400 12px/16px var(--font-sans)}
.aw-footer__inner p{margin:0}
.aw-footer a{color:inherit}

/* Article body */
.aw-prose{max-width:65ch;color:var(--ink);font:400 16px/26px var(--font-sans)}
.aw-prose h1{font:700 48px/50px var(--font-display);letter-spacing:.01em;margin:0 0 var(--space-2)}
.aw-prose .aw-prose__meta{font:400 12px/16px var(--font-sans);color:var(--ink-muted);margin:0 0 var(--space-6)}
.aw-prose h2{font:700 34px/38px var(--font-display);letter-spacing:.01em;margin:var(--space-12) 0 var(--space-3)}
.aw-prose p{margin:0 0 var(--space-6)}
.aw-prose .aw-prose__lead{font-size:18px;line-height:30px}
.aw-prose a{color:var(--action);text-decoration:underline;text-underline-offset:3px}
.aw-prose blockquote{margin:var(--space-8) 0;padding:var(--space-4) 0;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);font:italic 400 20px/30px var(--font-sans)}
.aw-prose figure{margin:var(--space-8) 0}
.aw-prose figure img{display:block;width:100%;height:auto;border-radius:var(--radius-lg)}
.aw-prose figcaption{font:400 12px/16px var(--font-sans);color:var(--ink-muted);margin-top:var(--space-2)}