:root {
    --paper: #fffdf7;
    --ink: #171717;
    --muted: #5b5b55;
    --pink: #e7a5b2;
    --green: #a9cba6;
    --rule: 2px solid var(--ink);
}

* { box-sizing: border-box; }

html {
    background: var(--paper);
    color: var(--ink);
    font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: 16px;
    line-height: 1.65;
    scroll-behavior: smooth;
}

body { margin: 0; background: var(--paper); }
a { color: var(--ink); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { background: var(--green); }
a:focus-visible, button:focus-visible, input:focus-visible {
    outline: 3px solid var(--pink);
    outline-offset: 3px;
}
img, video, iframe { max-width: 100%; }
img { height: auto; border: var(--rule); }

.skip-link {
    position: fixed;
    left: 1rem;
    top: -6rem;
    z-index: 10000;
    padding: .6rem .8rem;
    background: var(--paper);
    border: var(--rule);
    font-weight: 800;
}
.skip-link:focus { top: 1rem; }

.site-shell { width: min(1040px, calc(100% - 2rem)); margin: 1rem auto 2rem; }
.site-header, .site-footer, .info-panel, .site-content > *, .site-content > ul > li {
    background: #fff;
    border: var(--rule);
}
.site-header { margin-bottom: 1.25rem; }
.brand-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; padding: 1.2rem; }
.brand { display: inline-flex; flex-direction: column; text-decoration: none; }
.brand:hover { background: transparent; }
.brand-name { font-family: Impact, "Arial Black", sans-serif; font-size: clamp(2.4rem, 9vw, 5.5rem); line-height: .9; letter-spacing: .025em; }
.brand-tagline { margin-top: .65rem; font-weight: 800; letter-spacing: .08em; text-transform: lowercase; }
.press-start { margin: 0; padding: .35rem .55rem; background: var(--pink); border: 1px solid var(--ink); font-size: .75rem; white-space: nowrap; }
.press-start span { color: #305d31; }

.site-nav { display: flex; flex-wrap: wrap; border-top: var(--rule); }
.site-nav a { flex: 1 1 auto; min-width: 6rem; padding: .65rem .8rem; border-right: 1px solid var(--ink); text-align: center; font-weight: 800; text-decoration: none; text-transform: uppercase; }
.site-nav a:last-child { border-right: 0; }
.site-nav a:hover { background: var(--green); }

.site-content { display: block; }
.site-content > *, .site-content > ul > li { margin: 0 0 1.25rem; padding: clamp(1rem, 3vw, 2rem); }
.site-content > ul { padding: 0; border: 0; background: transparent; list-style: none; }
.site-content > ul > li:nth-child(even) { border-top: 7px solid var(--pink); }
.site-content > ul > li:nth-child(odd) { border-top: 7px solid var(--green); }
.site-content article > div { display: block !important; }
.site-content h1, .site-content h2, .site-content h3 { font-family: Arial, Helvetica, sans-serif; line-height: 1.12; }
.site-content h1 { font-size: clamp(2rem, 7vw, 3.7rem); margin: 0 0 1rem; }
.site-content h2 { font-size: clamp(1.45rem, 5vw, 2.15rem); margin: 0 0 .65rem; }
.site-content h3 { font-size: 1.2rem; }
.site-content p { max-width: 72ch; }
.site-content time, .site-content dd { color: var(--muted); font-size: .85rem; }
.site-content dl, .site-content dd { margin: 0 0 1rem; }
.site-content blockquote { margin: 1.5rem 0; padding: .8rem 1rem; border-left: 8px solid var(--pink); background: var(--paper); font-size: 1.15rem; }
.site-content pre { overflow-x: auto; padding: 1rem; background: var(--ink); color: #fff; border: 4px solid var(--green); }
.site-content code { font-family: inherit; }
.site-content table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.site-content th, .site-content td { padding: .4rem .6rem; border: 1px solid var(--ink); }
.site-content hr { border: 0; border-top: var(--rule); }
.site-content input[type="text"], .site-content input[type="search"] { width: 100%; padding: .75rem; border: var(--rule); background: #fff; color: var(--ink); font: inherit; }
.site-content nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.site-content button { padding: .5rem .7rem; border: var(--rule); background: #fff; color: var(--ink); font: inherit; }
.site-content .thumbnail { display: block; margin: .5rem 0 1rem; }
.site-content .tags a, .tag-cloud a { display: inline-block; margin: .2rem .35rem .2rem 0; padding: .15rem .4rem; border: 1px solid var(--ink); background: var(--paper); font-size: .8rem; font-weight: 800; text-decoration: none; text-transform: uppercase; }
.site-content .tags a:hover, .tag-cloud a:hover { background: var(--pink); }
.site-content .category { margin: 1rem 0; }
.site-content .category a { display: inline-block; margin: .2rem; padding: .3rem .55rem; border: var(--rule); text-decoration: none; }
.related-posts { margin-top: 1.5rem; padding-top: 1rem; border-top: var(--rule); }
.screen-reader-text, .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }

.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.5rem; }
.info-panel { padding: 1rem; scroll-margin-top: 1rem; }
.info-panel h2 { margin: 0 0 .75rem; padding-bottom: .45rem; border-bottom: var(--rule); font-family: Arial, Helvetica, sans-serif; font-size: 1.05rem; text-transform: uppercase; }
.info-panel ul { margin: 0; padding-left: 1.2rem; }
.info-panel p { margin: 0 0 .65rem; }
.tiny-note { color: var(--muted); font-size: .78rem; }

.site-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; margin-top: 1rem; padding: .85rem 1rem; font-size: .75rem; }
.site-footer p { margin: 0; }

@media (max-width: 700px) {
    html { font-size: 15px; }
    .site-shell { width: min(100% - 1rem, 1040px); margin-top: .5rem; }
    .brand-row { align-items: flex-start; flex-direction: column; }
    .brand-name { font-size: clamp(2.3rem, 15vw, 4.2rem); }
    .site-nav a { flex-basis: 33.333%; border-bottom: 1px solid var(--ink); }
    .site-nav a:nth-last-child(-n+2) { border-bottom: 0; }
    .info-grid { grid-template-columns: 1fr; }
    .site-footer { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }