/* Editorial technical-notes layout. Kept as plain CSS so the legacy Octopress
   build can publish it without requiring a modern Sass toolchain. */
:root { --ink:#152433; --ink-soft:#294052; --paper:#f5f1e8; --paper-deep:#ebe4d6; --orange:#d96b3d; --teal:#177e89; --muted:#75818a; --line:rgba(21,36,51,.14); --mono:"IBM Plex Mono",monospace; --reading:"Source Serif 4",Georgia,serif; }
html { background:var(--ink); }
body { max-width:1360px; color:var(--ink); background:var(--paper); box-shadow:0 0 70px rgba(0,0,0,.18); font-family:var(--reading); }
body > header { position:relative; overflow:hidden; padding-top:4.4em; padding-bottom:3.6em; background:var(--ink); color:var(--paper); }
body > header:before { content:""; position:absolute; right:-3em; top:-5em; width:18em; height:18em; border:1px solid rgba(245,241,232,.2); border-radius:50%; }
body > header:after { content:""; position:absolute; right:4em; bottom:0; width:8em; height:.45em; background:var(--orange); }
body > header .site-identity { position:relative; z-index:1; }
body > header .site-kicker, body > header .site-index { margin:0 0 1.2em; color:#9fb0b8; font:500 .72em/1.4 var(--mono); letter-spacing:.18em; }
body > header .site-kicker span { color:var(--orange); }
body > header h1 { max-width:12em; font-size:clamp(2.5em,6vw,5.6em); line-height:.95; letter-spacing:-.045em; }
body > header h1 a, body > header h1 a:visited, body > header h1 a:hover { color:var(--paper); }
body > header h2 { max-width:34em; margin-top:1.2em; color:#b6c2c6; font:400 1.05em/1.5 var(--reading); }
body > header .site-index { position:absolute; right:55px; bottom:2.1em; z-index:1; margin:0; text-align:right; }
body > header .site-index strong { display:block; margin-top:.25em; color:var(--paper); font-size:1.5em; letter-spacing:0; }
body > nav { padding-top:0; padding-bottom:0; background:var(--ink-soft); border:0; box-shadow:0 1px 0 rgba(255,255,255,.08) inset; }
body > nav ul.main-navigation li + li { margin-left:2.2em; border:0; }
body > nav ul.main-navigation li + li a { border:0; padding-left:0; }
body > nav ul.main-navigation a { padding:1.15em 0; color:var(--paper); font:500 .72em/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; text-shadow:none; }
body > nav ul.main-navigation a:hover { color:#f2a36e; }
body > nav ul.main-navigation a span { margin-right:.7em; color:#90a8af; font-size:.8em; }
body > nav form { margin-top:.55em; }
body > nav form .search { border:1px solid rgba(245,241,232,.28); border-radius:0; background:transparent; box-shadow:none; color:var(--paper); font-family:var(--mono); }
body > nav form .search:focus { border-color:#f2a36e; background:rgba(255,255,255,.06); color:var(--paper); box-shadow:none; }
#main { background:var(--paper); }
#content .blog-index article { padding-top:3.4em; }
article header { padding-top:0; padding-bottom:1.5em; background:none; border-bottom:1px solid var(--line); }
article header h1 { font-size:clamp(1.9em,3.3vw,3em); line-height:1.05; letter-spacing:-.025em; }
article header p.meta { position:static; margin-bottom:.9em; color:var(--orange); font:500 .7em/1.4 var(--mono); letter-spacing:.08em; }
article .entry-content { font-size:1.08em; line-height:1.8; }
article h2 { background:none; border-top:1px solid var(--line); padding-top:1.1em; }
article blockquote { border-left:4px solid var(--orange); background:var(--paper-deep); color:var(--ink-soft); }
article pre, article code { font-family:var(--mono); }
article pre { border:1px solid rgba(21,36,51,.2); border-radius:0; }
article img, article video, article .flash-video { box-shadow:0 12px 28px rgba(21,36,51,.12); }
#content .blog-index article h1 { font-size:clamp(1.8em,3vw,2.55em); }
#content .blog-index article + article { border-top:1px solid var(--line); background:none; }
#content .blog-index article + article header { border-bottom:0; }
#content .blog-index a[rel=full-article] { background:var(--orange); color:#fff; border-radius:0; font-family:var(--mono); font-size:.72em; letter-spacing:.08em; text-transform:uppercase; }
.archive-page .entry-content { margin-bottom:2em; color:var(--muted); }
.archive-list { margin:0; padding:0; list-style:none; }
.archive-list li { display:grid; grid-template-columns:9.5em 1fr auto; gap:1.2em; align-items:baseline; border-top:1px solid var(--line); padding:1em 0; }
.archive-list time, .archive-list span { color:var(--muted); font:500 .68em/1.4 var(--mono); letter-spacing:.05em; }
.archive-list a { color:var(--ink); font-size:1.05em; text-decoration:none; }
.archive-list a:hover { color:var(--orange); }
@media only screen and (max-width:767px) { .archive-list li { display:block; } .archive-list time, .archive-list span { display:block; margin-bottom:.35em; } }
aside.sidebar { padding-top:2.8em; }
aside.sidebar section { margin-bottom:2.5em; border-top:3px solid var(--ink); padding-top:.9em; }
aside.sidebar h1 { margin-bottom:.8em; color:var(--ink); font:600 .72em/1 var(--mono); letter-spacing:.13em; text-transform:uppercase; }
aside.sidebar li { border-bottom:1px solid var(--line); padding:.55em 0; }
aside.sidebar a { font-size:.92em; text-decoration:none; }
.explore-panel h2 { margin:1.8em 0 .7em; color:var(--muted); font:500 .66em/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; }
.explore-panel h2:first-of-type { margin-top:0; }
.explore-panel .recent-notes { margin:0; padding:0; list-style:none; }
.explore-panel .recent-notes li { border-bottom:1px solid var(--line); padding:.55em 0; }
.explore-panel .topic-list { display:flex; flex-wrap:wrap; gap:.55em .5em; }
.explore-panel .topic-list a { display:inline-flex; align-items:center; border:1px solid rgba(21,36,51,.1); border-radius:2px; background:rgba(255,255,255,.42); padding:.5em .72em .48em; color:var(--ink-soft); font:500 .8em/1.1 var(--reading); letter-spacing:.01em; transition:border-color .2s,background .2s,color .2s,transform .2s; }
.explore-panel .topic-list a:hover { border-color:var(--orange); background:var(--paper-deep); color:var(--ink); transform:translateY(-1px); }
.explore-panel .topic-list span { margin-left:.55em; border-left:1px solid rgba(21,36,51,.18); padding-left:.55em; color:var(--orange); font:600 .76em/1 var(--mono); }
body > footer { padding-top:2.4em; padding-bottom:2.4em; background:var(--ink); border:0; color:#9fb0b8; font-family:var(--mono); }
body > footer .footer-mark { margin:0 0 .8em; color:var(--paper); font-size:.8em; letter-spacing:.15em; }
body > footer .footer-mark span { margin:0 .7em; color:var(--orange); }
body > footer .footer-copy { margin:0; font-size:.68em; letter-spacing:.05em; }
body > footer .credit { margin-left:1.5em; }
body > footer a { color:#f2a36e; }
@media only screen and (max-width:767px) {
  body > header { padding-top:2.8em; padding-bottom:3.2em; }
  body > header .site-index { right:25px; bottom:1.7em; }
  body > nav ul.main-navigation li + li { margin-left:1em; }
  body > nav ul.main-navigation a { letter-spacing:.04em; }
  aside.sidebar { padding-top:1.8em; }
  body > footer .credit { display:block; margin:.8em 0 0; }
}