/* ==========================================================================
   IIS Hacks — Server & System Administration Archive
   Skin over Bootstrap 5.3 (grid/reset only). Everything visual is here.

   Design brief: the original was a utilitarian, high-contrast, text-first
   practitioner blog — Arial at large sizes, one cyan accent (#089BC3),
   square corners, no ornament, and bordered code blocks as a real feature.
   This keeps that skeleton and modernises it: a slate/graphite ink, IBM Plex
   Sans + IBM Plex Mono, a hairline-ruled two-column layout with a persistent
   right rail, and code blocks promoted to the loudest element on the page.

   CONTENT IS NEVER HIDDEN WAITING ON JAVASCRIPT. There is no opacity:0,
   no visibility:hidden and no off-screen transform anywhere in this file.
   The navigation wraps with CSS alone and needs no toggle to be reachable.
   ========================================================================== */

:root {
  --accent: #089bc3;          /* lifted verbatim from the 2013 theme */
  --accent-dark: #046f8f;
  --accent-wash: #e6f5fa;
  --ink: #16212b;
  --ink-2: #33424f;
  --ink-3: #5d6f7d;
  --paper: #ffffff;
  --paper-2: #f3f6f8;
  --paper-3: #e9eef1;
  --rule: #d3dde3;
  --rule-strong: #b4c3cc;
  --code-bg: #16212b;
  --code-ink: #dbe7ee;
  --warn-bg: #fdf6e6;
  --warn-rule: #d8a800;
  --shell: 1220px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover, a:focus { color: var(--ink); text-decoration-color: var(--accent); text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: #fff; padding: .7rem 1.1rem; text-decoration: none;
}
.skip:focus { left: 0; }

.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  width: 100%;
}

/* ---------- masthead ---------------------------------------------------- */

.masthead { background: var(--ink); color: #fff; border-bottom: 3px solid var(--accent); }

.masthead-row {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1.5rem;
  padding: 1.5rem 0 1.15rem;
  min-width: 0;
}

.brand { margin: 0; font-size: clamp(1.6rem, 4.2vw, 2.35rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.05; min-width: 0; }
.brand a { color: #fff; text-decoration: none; }
.brand a:hover { color: #fff; }
.brand-hash { color: var(--accent); font-family: "IBM Plex Mono", ui-monospace, monospace; margin-right: .12em; }

.brand-sub {
  margin: 0; color: #8fa5b3; font-size: .8rem; letter-spacing: .09em; text-transform: uppercase;
  font-family: "IBM Plex Mono", ui-monospace, monospace; min-width: 0;
}

/* CSS-only wrapping nav — every link is reachable at every width, with no
   burger, no collapse and no JavaScript. This is deliberate: framework navbars
   set flex-shrink:0 and push links past the viewport where nothing can reach
   them. Wrapping cannot fail that way. */
.mainnav { background: #101a22; }
.mainnav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; min-width: 0;
}
.mainnav li { min-width: 0; }
.mainnav a {
  display: block;
  padding: .78rem 1.05rem;
  color: #c7d6df;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .82rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}
.mainnav a:hover, .mainnav a:focus { color: #fff; background: #16232e; }
.mainnav a.is-current { color: #fff; border-bottom-color: var(--accent); background: #16232e; }

.ribbon { background: var(--accent-wash); border-bottom: 1px solid #c2e2ee; }
.ribbon p {
  margin: 0; padding: .6rem 0;
  font-size: .8rem; color: #17586b; letter-spacing: .01em;
}

/* ---------- layout ------------------------------------------------------ */

.layout { display: block; padding: 2.6rem 0 3.5rem; }

@media (min-width: 992px) {
  .layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 296px;
    gap: 3.25rem;
    align-items: start;
  }
}

.prose { min-width: 0; }

/* ---------- typography -------------------------------------------------- */

.prose h1 {
  font-size: clamp(1.85rem, 4.4vw, 2.9rem);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -.022em;
  color: var(--ink);
  margin: 0 0 .9rem;
}

.prose h2 {
  font-size: clamp(1.3rem, 2.5vw, 1.72rem);
  line-height: 1.25;
  font-weight: 650;
  color: var(--ink);
  margin: 2.6rem 0 .85rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
}

.prose h3 {
  font-size: clamp(1.08rem, 2vw, 1.24rem);
  font-weight: 650;
  color: var(--ink);
  margin: 1.9rem 0 .55rem;
}

.prose p { margin: 0 0 1.15rem; }
.prose strong { color: var(--ink); font-weight: 600; }

.prose ul, .prose ol { margin: 0 0 1.3rem; padding-left: 1.3rem; }
.prose li { margin-bottom: .5rem; }
.prose li::marker { color: var(--accent-dark); }

.prose blockquote {
  margin: 1.6rem 0;
  padding: .2rem 0 .2rem 1.4rem;
  border-left: 3px solid var(--accent);
  color: var(--ink-2);
  font-style: italic;
}
.prose blockquote p:last-child { margin-bottom: 0; }

/* post meta line */
.post-meta {
  margin: 0 0 1.9rem;
  padding-bottom: 1.2rem;
  border-bottom: 2px solid var(--ink);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .8rem;
  color: var(--ink-3);
  letter-spacing: .01em;
}
.post-meta-k { color: var(--ink-3); text-transform: uppercase; letter-spacing: .07em; font-size: .72rem; }
.post-meta-sep { color: var(--rule-strong); margin: 0 .35rem; }

/* the archival warning — the most important recurring element on the site */
.archive-note {
  background: var(--warn-bg);
  border-left: 4px solid var(--warn-rule);
  padding: 1.05rem 1.25rem;
  margin: 0 0 1.9rem;
  font-size: .95rem;
  color: #4a3d10;
}
.archive-note strong { color: #3a3009; }
.archive-note a { color: #8a6a00; }

/* ---------- code -------------------------------------------------------- */

.prose pre {
  background: var(--code-bg);
  color: var(--code-ink);
  border-left: 4px solid var(--accent);
  padding: 1.05rem 1.2rem;
  margin: 1.5rem 0;
  overflow-x: auto;
  font-size: .87rem;
  line-height: 1.62;
  -webkit-overflow-scrolling: touch;
}
.prose pre code {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  background: none; color: inherit; padding: 0; font-size: inherit; white-space: pre;
}

.prose :not(pre) > code {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--paper-3);
  border: 1px solid var(--rule);
  color: #0d3d4c;
  padding: .08em .34em;
  font-size: .875em;
  word-break: break-word;
}

/* copy button injected by main.js — enhancement only, never required */
.codewrap { position: relative; }
.copybtn {
  position: absolute; top: .5rem; right: .5rem;
  background: #23323f; color: #b9cdd8; border: 1px solid #3a4c5a;
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .68rem;
  letter-spacing: .06em; text-transform: uppercase;
  padding: .3rem .6rem; cursor: pointer;
}
.copybtn:hover { background: var(--accent-dark); color: #fff; border-color: var(--accent); }

/* ---------- tables ------------------------------------------------------ */

.tablewrap { overflow-x: auto; margin: 1.5rem 0; -webkit-overflow-scrolling: touch; }
.prose table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.prose th, .prose td { border: 1px solid var(--rule); padding: .6rem .8rem; text-align: left; vertical-align: top; }
.prose th { background: var(--paper-2); color: var(--ink); font-weight: 600; }

/* ---------- hero image -------------------------------------------------- */

.hero { margin: 0 0 2.1rem; }
.hero img { width: 100%; border-bottom: 3px solid var(--accent); }

/* ---------- right rail -------------------------------------------------- */

.rail { min-width: 0; font-size: .92rem; }

@media (min-width: 992px) {
  .rail { position: sticky; top: 1.5rem; }
}

.rail-block {
  border-top: 2px solid var(--ink);
  padding: .9rem 0 1.4rem;
  margin-bottom: .4rem;
}

.rail-h {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink); font-weight: 600; margin: 0 0 .7rem;
}

.rail-list { list-style: none; margin: 0; padding: 0; }
.rail-list li { margin-bottom: .5rem; line-height: 1.42; }
.rail-list a { text-decoration: none; color: var(--ink-2); }
.rail-list a:hover { color: var(--accent-dark); text-decoration: underline; }

.rail-notes li { padding-bottom: .5rem; border-bottom: 1px solid var(--rule); }
.rail-notes li:last-child { border-bottom: 0; }
.rail-date {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .74rem; color: var(--accent-dark); margin-right: .35rem;
}

.rail-tags span {
  display: inline-block;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .72rem; color: var(--ink-3);
  background: var(--paper-2); border: 1px solid var(--rule);
  padding: .16rem .45rem; margin: 0 .3rem .35rem 0;
}

.rail-more { margin: .7rem 0 0; font-size: .86rem; }
.rail-note p { margin: 0; color: var(--ink-3); font-size: .88rem; line-height: 1.55; }

/* ---------- footer ------------------------------------------------------ */

.foot { background: var(--ink); color: #9fb3c0; margin-top: 2rem; padding: 2.8rem 0 2rem; }

.foot-grid {
  display: grid; grid-template-columns: 1fr; gap: 2rem;
  padding-bottom: 2rem; border-bottom: 1px solid #2b3a47;
}
@media (min-width: 768px) { .foot-grid { grid-template-columns: 2fr 1fr 1fr; gap: 3rem; } }

.foot-brand { margin: 0 0 .6rem; color: #fff; font-size: 1.28rem; font-weight: 700; }
.foot-blurb { margin: 0; font-size: .92rem; line-height: 1.6; max-width: 46ch; }
.foot-h {
  margin: 0 0 .7rem; color: #fff;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
}
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: .42rem; font-size: .92rem; }
.foot a { color: #9fb3c0; text-decoration: none; }
.foot a:hover { color: var(--accent); text-decoration: underline; }

.foot-legal {
  margin: 1.6rem 0 0; font-size: .78rem; line-height: 1.6; color: #71889a; max-width: 92ch;
}

/* ---------- small screens ---------------------------------------------- */

@media (max-width: 575px) {
  body { font-size: 16px; }
  .shell { padding-left: 1rem; padding-right: 1rem; }
  .mainnav a { padding: .62rem .78rem; font-size: .76rem; }
  .layout { padding-top: 1.9rem; }
  .prose pre { font-size: .8rem; padding: .9rem 1rem; }
}

@media print {
  .mainnav, .rail, .ribbon, .skip, .copybtn { display: none; }
  body { font-size: 12pt; color: #000; }
  .prose pre { background: #f2f2f2; color: #000; border: 1px solid #999; }
}