/* Sudowl Blog theme. Tokens from the Sudowl brand briefing (design/tokens.json).
   Day shift = light (default, brand stage). Night shift = dark via prefers-color-scheme. */
:root{
  --surface:#F1F0EB; --surface-raised:#FFFFFF; --line:#D9D6CC; --ink:#1C1F26; --ink-muted:#4A5560;
  --petrol:#0F4C5C; --petrol-deep:#0A3843; --on-petrol:#F1F0EB; --on-band:#F1F0EB; --on-band-muted:#A9C3C9;
  --signal:#2BB673; --signal-ink:#1B7A4C; --signal-soft:#DDF2E6; --warn-ink:#9A4A06; --warn-soft:#FBEBD6;
  --display:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  --sans:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --surface:#0E1A1F; --surface-raised:#162830; --line:#2A4049; --ink:#ECEBE6; --ink-muted:#9FB0B6;
  --petrol:#5FB3C7; --petrol-deep:#12404C; --on-petrol:#0E1A1F;
  --signal-ink:#3DD68C; --signal-soft:#16352A; --warn-ink:#F0A04B; --warn-soft:#3A2A14; color-scheme:dark}}

/* base, overriding Source */
html{background:var(--surface)}
body.sw{background:var(--surface);color:var(--ink);font:16px/26px var(--sans);margin:0;-webkit-font-smoothing:antialiased}
.sw *{box-sizing:border-box}
.sw a{color:var(--petrol)}
.sw :focus-visible{outline:2px solid var(--petrol);outline-offset:2px}
.sw-in{max-width:1120px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.sw-label{font:500 12px/16px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted)}
.sw-meta{font:400 13px/18px var(--mono);color:var(--ink-muted)}
.sw-skip{position:absolute;left:-999px;top:8px;background:var(--surface-raised);padding:8px 12px;z-index:50}
.sw-skip:focus{left:8px}

/* bands */
.sw-band{background:var(--petrol-deep);color:var(--on-band)}
.sw-top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:18px}
.sw-logo{height:40px;width:auto;display:block}
.sw-home{display:block}
.sw-menu{list-style:none;margin:0;padding:0;display:flex;gap:22px;flex-wrap:wrap}
.sw-nav a{color:var(--on-band);text-decoration:none;font:500 15px/24px var(--sans);opacity:.86;text-transform:capitalize}
.sw-nav a[href*="/tag/ai/"]{text-transform:uppercase}
.sw-nav a:hover,.sw-nav a[aria-current]{opacity:1;text-decoration:underline;text-underline-offset:5px}

/* hero: night shift in the server room */
.sw-hero-band{position:relative;overflow:hidden;isolation:isolate;
  background:radial-gradient(ellipse 55% 75% at 80% 70%,rgba(95,179,199,.22),transparent 70%),linear-gradient(180deg,#0A3843,#06262E)}
.sw-rack{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:repeating-linear-gradient(180deg,transparent 0 9px,rgba(241,240,235,.04) 9px 23px,transparent 23px 30px),
  repeating-linear-gradient(90deg,transparent 0 214px,rgba(241,240,235,.07) 214px 216px);
  -webkit-mask-image:linear-gradient(90deg,transparent 38%,#000 62%);mask-image:linear-gradient(90deg,transparent 38%,#000 62%)}
.sw-rack i{position:absolute;width:4px;height:4px;border-radius:99px;background:#2BB673;box-shadow:0 0 6px #2BB673;opacity:.15;animation:sw-blink var(--d,3s) steps(2,jump-none) infinite;animation-delay:var(--t,0s)}
.sw-rack i.a{background:#5FB3C7;box-shadow:0 0 6px #5FB3C7}
@keyframes sw-blink{0%{opacity:.12}50%{opacity:.9}100%{opacity:.12}}
.sw-hero{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px;align-items:end;padding-block:48px 0;position:relative}
.sw-hero-text{padding-bottom:56px}
.sw-hero h1{font:700 clamp(44px,6.4vw,90px)/.98 var(--display);letter-spacing:-.03em;margin:14px 0 22px;color:#F1F0EB;text-wrap:balance}
.sw-hero h1 span{display:block;color:#5FB3C7}
.sw-hero p{max-width:52ch;color:var(--on-band-muted);margin:0 0 28px;font-size:19px;line-height:30px}
.sw-on-band-muted{color:var(--on-band-muted)}
.sw-prompt{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font:500 15px/24px var(--mono);color:#F1F0EB;background:rgba(6,38,46,.75);border:1px solid rgba(241,240,235,.16);border-radius:10px;padding:10px 16px}
.sw-ps{color:#5FB3C7}
.sw-caret{display:inline-block;width:9px;height:18px;background:#F1F0EB;margin-left:-6px;animation:sw-caret 1s steps(1) infinite}
@keyframes sw-caret{50%{opacity:0}}
.sw-ok{display:inline-flex;align-items:center;color:#3DD68C;opacity:0;transition:opacity .3s}
.sw-prompt.is-done .sw-ok{opacity:1}
.sw-prompt.is-done .sw-caret{display:none}
.sw-owl-stage{position:relative;justify-self:center;width:min(100%,400px)}
.sw-owl-glow{position:absolute;left:50%;top:32%;width:80%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(43,182,115,.25),transparent 65%);animation:sw-breathe 5s ease-in-out infinite}
@keyframes sw-breathe{0%,100%{opacity:.5}50%{opacity:1}}
.sw-hero-owl{position:relative;width:100%;height:auto;display:block;overflow:visible}
.sw-eye{animation:sw-led 4s ease-in-out infinite}
@keyframes sw-led{0%,100%{filter:drop-shadow(0 0 0 #2BB673)}50%{filter:drop-shadow(0 0 7px #2BB673)}}
.sw-boot{opacity:0;animation:sw-boot 7s ease-in-out infinite}
.sw-boot.b1{animation-delay:.3s}.sw-boot.b2{animation-delay:.6s}.sw-boot.b3{animation-delay:.9s}
@keyframes sw-boot{0%,4%{opacity:0}6%,95%{opacity:1;filter:drop-shadow(0 0 3px #2BB673)}100%{opacity:0}}
.sw-shelf{position:relative;background:#06262E;border-top:3px solid #F1F0EB}
.sw-uptime{display:flex;flex-wrap:wrap;gap:8px 0;font:500 13px/18px var(--mono);color:var(--on-band-muted);padding-block:16px}
.sw-u{padding-right:22px;margin-right:22px;border-right:1px solid rgba(241,240,235,.16)}
.sw-u:last-child{border-right:0}
.sw-uptime b{color:#F1F0EB;font-weight:500}
.sw-dot{display:inline-block;width:8px;height:8px;border-radius:99px;background:var(--signal);margin-right:8px;vertical-align:1px;box-shadow:0 0 6px var(--signal)}
@media (max-width:820px){
  .sw-hero{grid-template-columns:1fr;gap:0;padding-top:32px}
  .sw-hero-text{padding-bottom:24px}
  .sw-owl-stage{width:200px;justify-self:end}
  .sw-u{padding-right:0;margin-right:18px;border-right:0}
  .sw-rack{-webkit-mask-image:linear-gradient(180deg,transparent 45%,#000 75%);mask-image:linear-gradient(180deg,transparent 45%,#000 75%)}
}
@media (prefers-reduced-motion:reduce){.sw-rack i,.sw-owl-glow,.sw-boot,.sw-caret{animation:none}.sw-boot{opacity:1}.sw-rack i{opacity:.5}}

/* status: colour + word */
.sw-st{display:inline-flex;align-items:center;gap:8px;font:500 12px/16px var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:5px 12px 5px 10px;border-radius:99px;white-space:nowrap}
.sw-st::before{content:"";width:8px;height:8px;border-radius:99px;background:currentColor}
.sw-st-ok{background:var(--signal-soft);color:var(--signal-ink)} .sw-st-ok::before{background:var(--signal)}
.sw-st-warn{background:var(--warn-soft);color:var(--warn-ink)}

/* tags = server slots from the owl's belly */
.sw .sw-slot{display:inline-flex;align-items:center;gap:10px;background:var(--petrol);color:var(--on-petrol);font:500 12px/16px var(--mono);padding:4px 8px 4px 12px;border-radius:99px;text-decoration:none;text-transform:lowercase;white-space:nowrap}
.sw-slot::after{content:"";width:7px;height:7px;border-radius:99px;background:var(--signal)}
.sw-slot.is-open::after{background:transparent;box-shadow:inset 0 0 0 1.5px currentColor}

/* home */
.sw-main{padding-block:56px 80px}
.sw-feat{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:32px;background:var(--surface-raised);border:1px solid var(--line);border-radius:16px;padding:28px;margin:16px 0 56px}
.sw-feat:not(.has-term){grid-template-columns:1fr}
.sw-feat h2{font:700 clamp(26px,3vw,34px)/1.12 var(--display);margin:14px 0 12px;letter-spacing:-.01em;text-wrap:balance}
.sw-feat h2 a,.sw-case h3 a{color:var(--ink);text-decoration:none}
.sw-feat h2 a:hover{text-decoration:underline;text-decoration-color:var(--petrol);text-underline-offset:5px}
.sw-feat p{color:var(--ink-muted);margin:0 0 16px;max-width:60ch}
.sw-feat-meta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
@media (max-width:820px){.sw-feat{grid-template-columns:1fr;padding:20px}}
.sw-cases{list-style:none;margin:16px 0 0;padding:0;border-top:1px solid var(--line)}
.sw-case{display:grid;grid-template-columns:132px minmax(0,1fr) auto;gap:20px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--line)}
.sw-case h3{font:600 20px/27px var(--display);margin:0 0 4px;text-wrap:balance}
.sw-case h3 a:hover{color:var(--petrol);text-decoration:underline;text-underline-offset:4px}
.sw-case p{margin:0;color:var(--ink-muted);font-size:15px;line-height:24px;max-width:72ch}
.sw-case-side{display:grid;justify-items:end;gap:8px}
@media (max-width:700px){.sw-case{grid-template-columns:1fr;gap:6px}.sw-case-side{grid-auto-flow:column;justify-content:start;gap:10px;align-items:center}}
.sw-pages{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:32px;font:500 15px var(--sans)}
.sw-archive{margin-bottom:24px}
.sw-archive h1{font:700 clamp(32px,4.4vw,46px)/1.08 var(--display);margin:8px 0 8px;text-transform:capitalize}
.sw-archive p{color:var(--ink-muted);max-width:60ch;margin:0}

/* terminal blocks */
.sw-term,.sw-content pre{font:400 13.5px/22px var(--mono);background:var(--surface-raised);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:16px;margin:0;overflow-x:auto;white-space:pre;min-width:0;tab-size:4}
.sw-feat .sw-term{background:var(--surface);align-self:start;max-height:300px;overflow:hidden}
.sw-term .p{color:var(--signal-ink);user-select:none}

/* article */
.sw-art{max-width:740px;margin:0 auto}
.sw-crumbs{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:18px}
.sw-art h1{font:700 clamp(32px,4.4vw,46px)/1.08 var(--display);letter-spacing:-.015em;margin:0 0 16px;text-wrap:balance;color:var(--ink)}
.sw-dek{font-size:19px;line-height:30px;color:var(--ink-muted);margin:0 0 24px}
.sw-byline{display:flex;gap:14px;align-items:center;padding-block:16px;border-block:1px solid var(--line);margin-bottom:36px}
.sw-byline img,.sw-avatar{width:44px;height:44px;border-radius:99px;background:var(--petrol);object-fit:cover;flex:none}
.sw-byline a{color:var(--ink);text-decoration:none}
.sw-byline b{display:block;font:600 15px/20px var(--sans)}

.sw-content{font:17px/29px var(--sans);color:var(--ink)}
.sw .sw-content > *{margin-top:0;margin-bottom:20px;max-width:100%}
.sw-content p,.sw-content li{color:var(--ink)}
.sw-content h2{font:600 27px/34px var(--display);letter-spacing:-.01em;margin:48px 0 14px;color:var(--ink)}
.sw-content h3{font:600 21px/28px var(--display);margin:36px 0 10px;color:var(--ink)}
.sw-content a{color:var(--petrol);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.sw-content a:hover{text-decoration-thickness:2px}
.sw-content strong{font-weight:600}
.sw-content ul,.sw-content ol{padding-left:22px}
.sw-content li{margin-bottom:6px}
.sw-content li::marker{color:var(--petrol)}
.sw-content code{font:400 .86em var(--mono);background:var(--surface-raised);border:1px solid var(--line);border-radius:4px;padding:1px 5px;color:var(--ink)}
.sw-content pre code{background:none;border:0;padding:0;font:inherit;color:inherit}
.sw-content blockquote{border:0;margin-left:0;padding:0 0 0 24px;position:relative;color:var(--ink-muted);font-style:normal}
.sw-content blockquote::before{content:">";position:absolute;left:0;top:0;font:500 17px/29px var(--mono);color:var(--petrol)}
.sw-content hr{border:0;border-top:1px solid var(--line);margin:40px 0}
.sw-content table{border-collapse:collapse;width:100%;font-size:15px;display:block;overflow-x:auto}
.sw-content th,.sw-content td{border-bottom:1px solid var(--line);padding:8px 12px 8px 0;text-align:left;vertical-align:top}
.sw-content th{font:500 12px/16px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted)}
.sw-content img{border-radius:10px;border:1px solid var(--line);height:auto}
.sw-content figcaption{font-size:14px;color:var(--ink-muted);margin-top:8px}

/* short answer (former TL;DR) and gotcha boxes, tagged by sudowl.js */
.sw .sw-answer{background:var(--surface-raised);border:1px solid var(--line);border-radius:10px;padding:18px 20px}
.sw-answer-label::before{content:"";display:inline-block;width:7px;height:7px;border-radius:99px;background:var(--petrol);margin-right:8px;vertical-align:1px}
.sw-answer-label{display:block;font:500 12px/16px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--petrol);margin-bottom:6px}
.sw .sw-gotcha{background:var(--warn-soft);border-radius:10px;padding:14px 18px 2px;margin-top:40px}
.sw .sw-gotcha h2,.sw .sw-gotcha h3{margin-top:0;font-size:21px;line-height:28px}
.sw-gotcha-label{display:block;font:500 12px/16px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--warn-ink);margin-bottom:4px}

/* footer */
.sw-footer{padding-block:40px;margin-top:0}
.sw-foot{display:flex;gap:20px 32px;align-items:center;flex-wrap:wrap;justify-content:space-between}
.sw-foot-brand{display:flex;gap:16px;align-items:center}
.sw-foot-brand svg{width:52px;height:52px;flex:none}
.sw-foot p{margin:0;color:var(--on-band-muted);font-size:15px}
.sw-foot-nav .sw-menu{gap:16px}
.sw-foot-nav a{color:var(--on-band-muted);text-decoration:none;font-size:14px}
.sw-foot-nav a:hover{color:var(--on-band);text-decoration:underline}
.sw-wink{font:500 14px var(--mono);color:var(--on-band)}

@media (prefers-reduced-motion:reduce){.sw-eye{animation:none}}