/* style-2026.css -- pale.io, the 2026 look (2026-10-21). served as https://pale.io/style-2026.css
   JR: "bring the pale.io style into 2026; DONT GO HEAVY, light css, simple, clean" -- inspired by his 2021 PaleCraft
   billboard (a 2000s Microsoft product-box style):
     - a heavy italic wordmark: "//pale" in white on sky blue, ".io" in near-black
     - a light-blue -> white header band, split on a gentle diagonal, with a gray regular-weight subtitle under it
     - a thin dark base bar as the footer, and a small trademark sign as a wink
   everything else: one readable column, generous whitespace, a real link color, no sideways scroll at 375 px.
   ONE file, no framework, no web font (Segoe first = the Microsoft nod; Macs fall back to Helvetica Neue / system-ui),
   no js, no images. used by the /blog/ pages and (since 2026-10-22) the homepage: its rules are the "homepage" section
   at the end, all under body.home26. style-2021.css stays as it was for the older pages that still use it. */

:root {
  --blue: #70a4d2;    /* sampled from the billboard's sky-blue band */
  --ink: #1c1b1a;     /* the billboard's near-black ("Craft", the base bar) */
  --text: #242424;
  --muted: #6e6e6e;   /* the billboard's gray subtitle */
  --link: #1f5d99;    /* the band's hue, darker: readable on white (6.7:1) */
  --bg: #fff;
  --rule: #e2e2e2;
  --bar: #1c1b1a;     /* the base bar */
  --font: "Segoe UI", "Segoe UI Variable Text", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --display: "Segoe UI", "Segoe UI Variable Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* the only dark-mode touch: page colors flip, the base bar goes black, the blue band stays as it is */
@media (prefers-color-scheme: dark) {
  :root { --text: #e6e6e6; --muted: #a2a2a2; --link: #9cc6ef; --bg: #151617; --rule: #2e3032; --bar: #000; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 1.0625rem/1.65 var(--font);
  overflow-wrap: break-word;
}
a { color: var(--link); text-underline-offset: .15em; }
a:hover { text-decoration-thickness: 2px; }

/* the one centered column every page uses */
.wrap { max-width: 42rem; margin: 0 auto; padding: 0 1.25rem; }

/* header band: blue on top, page color below, split on a line that rises gently to the right: the band's bottom edge
   is cut from the full height at the left to clamp(1.25rem, 3vw, 3rem) higher at the right (about 3 degrees on a phone,
   under 2 on a desktop). a clip-path, not a gradient: the line then runs corner to corner at every width.
   the whole wordmark stays on the blue (the "p" descender included), so light and dark mode both read. */
.band {
  background: var(--blue);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - clamp(1.25rem, 3vw, 3rem)), 0 100%);
  padding: 2.25rem 0 2.25rem;
}
.mark {
  display: inline-block;
  color: var(--ink);
  font: italic 800 clamp(3.25rem, 15vw, 5.75rem)/1 var(--display);
  letter-spacing: -.045em;
  text-decoration: none;
  white-space: nowrap;
}
.mark .pale { color: #fff; }
.mark sup {   /* the small trademark sign, top right like the billboard's */
  font: 400 .95rem/1 var(--font);
  letter-spacing: 0;
  vertical-align: top;
  position: relative;
  top: .6rem;
  margin-left: .3em;
}
.sub { margin: .4rem 0 0; color: var(--muted); font-size: 1.2rem; }

/* page body */
main { padding: 2rem 0 3rem; }
.crumbs { font-size: .9rem; color: var(--muted); }
.crumbs a { color: var(--muted); }
h1 {
  font: 700 clamp(1.7rem, 6vw, 2.3rem)/1.2 var(--display);
  letter-spacing: -.01em;
  margin: 1.5rem 0 .4rem;
}
.byline { color: var(--muted); font-size: .95rem; margin: 0 0 1.75rem; }
p { margin: 0 0 1.1rem; }
ul { margin: 0 0 1.1rem; padding-left: 1.3rem; }
li { margin: .3rem 0; }
.lede { font-size: 1.2rem; }
.sign { margin-top: 2rem; font-style: italic; }
.post .back { display: inline-block; margin-top: 1.5rem; }   /* scoped: the homepage has a skill category "back" */

/* blog index: one entry per post, newest first */
.posts { list-style: none; padding: 0; margin: 1.5rem 0 0; }
.posts li { margin: 0; padding: 1.25rem 0; border-top: 1px solid var(--rule); }
.posts time { display: block; color: var(--muted); font-size: .9rem; }
.posts h2 { font: 700 1.35rem/1.3 var(--display); margin: .2rem 0 .4rem; }
.posts p { margin: 0; }

/* the thin dark base bar */
.base { background: var(--bar); color: #cfcfcf; font-size: .85rem; padding: .7rem 0; }
.base a { color: #fff; }

/* ---- homepage (body.home26), 2026-10-22 -----------------------------------------------------------------------------
   the same band, wordmark, column and base bar, a wider column for the grids. no bootstrap: the few things the page
   took from it (fluid images, the card row) are here. js-2021.js (jquery) still drives two things, both kept:
     - .toggle[data-target] hides/shows `.skill-container > .<category>` and swaps its own category class for .grayed
     - .showSite[data-site] opens .coverGirl with the matching full screenshot; .closeCoverGirl closes it */
.home26 .wrap { max-width: 62rem; }
.home26 img { max-width: 100%; height: auto; }
.about-me { max-width: 42rem; font-size: 1.15rem; margin-top: 1.5rem; }
.home26 h2 {
  font: italic 800 1.65rem/1.2 var(--display);
  letter-spacing: -.02em;
  margin: 3rem 0 1.25rem;
  padding-bottom: .35rem;
  border-bottom: 3px solid var(--blue);
}

/* portfolio: screenshot cards, 5 across on a desktop, 2 on a phone */
.cards { display: grid; gap: 1.5rem 1.25rem; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); }
.showSite { position: relative; display: block; border: 1px solid var(--rule); }
.showSite img { display: block; }
.years {   /* the small dark label on each screenshot */
  position: absolute; right: 0; bottom: 0;
  background: var(--ink); color: #fff;
  font-size: .75rem; font-style: italic; padding: .15rem .5rem;
}
.home26 h3 { font: 700 1rem/1.3 var(--display); margin: .5rem 0 0; }
.external-link { text-decoration: none; font-weight: 400; }
.external-link::after { content: "\2197"; }   /* the visit link was an empty <a>: now a small arrow */

/* skills + contact: tinted tiles with a category-colored left edge (one hue per category, --h) */
.toggles { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }
.skill-container { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
.toggle, .what-is {
  --h: 210;
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 2.75rem; padding: .45rem .75rem;
  background: hsl(var(--h) var(--tint));
  border-left: 4px solid hsl(var(--h) 50% 46%);
  color: var(--text); text-decoration: none; line-height: 1.3;
}
.what-is:hover, .toggle:hover { background: hsl(var(--h) var(--tint-hover)); }
.ai { --h: 104; } .front { --h: 0; } .back { --h: 27; } .software { --h: 245; } .os { --h: 191; } .soft { --h: 52; } .hobby { --h: 322; }
.toggle { cursor: pointer; user-select: none; font-weight: 600; }
.toggle.grayed { background: transparent; border-left-color: var(--rule); color: var(--muted); text-decoration: line-through; }
:root { --tint: 55% 94%; --tint-hover: 55% 87%; }
@media (prefers-color-scheme: dark) { :root { --tint: 25% 19%; --tint-hover: 30% 26%; } }

/* the screenshot viewer (shown/hidden by js-2021.js): fixed over the page, scrolls if the image is tall */
.coverGirl { display: none; position: fixed; inset: 0; z-index: 10; overflow: auto; padding: 1rem; text-align: center; background: rgba(0,0,0,.85); }
.coverGirl img { display: none; max-height: 85vh; }
.closeCoverGirl { background: #fff; color: var(--ink); border: 0; border-bottom: 3px solid var(--blue); padding: .6em 1.2em; font: italic 800 1rem var(--display); cursor: pointer; }
.home26 .base { margin-top: 3rem; }