@layer base, components, responsive;
@layer base {
/* Change brand colors, fonts and shared design tokens here. */
:root { --canvas:#fafaf7; --paper:#fff; --ink:#20243a; --muted:#666879; --accent:#5146c8; --accent-dark:#4035ac; --lavender:#eeeaf8; --border:#e4e4e9; --heading:"Plus Jakarta Sans Variable",sans-serif; --body:"Inter Variable",sans-serif; --mono:"JetBrains Mono Variable",monospace; }

}

@layer base {
  @font-face { font-family:"Inter Variable"; font-style:normal; font-weight:100 900; font-display:swap; src:url("/site-assets/journal-font-inter-latin-wght-normal.3100e775e8616cd2611b.woff2") format("woff2"); }
  @font-face { font-family:"Plus Jakarta Sans Variable"; font-style:normal; font-weight:200 800; font-display:swap; src:url("/site-assets/journal-font-plus-jakarta-sans-latin-wght-normal.153fc85b70298beeb1d6.woff2") format("woff2"); }
  @font-face { font-family:"JetBrains Mono Variable"; font-style:normal; font-weight:100 800; font-display:swap; src:url("/site-assets/journal-font-jetbrains-mono-latin-wght-normal.18be452724bfdc236c07.woff2") format("woff2"); }

  * { box-sizing:border-box; }
  html { scroll-behavior:smooth; scroll-padding-top:28px; }
  body { margin:0; background:var(--canvas); color:var(--ink); font-family:var(--body); font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; }
  a { color:inherit; text-decoration:none; }
  button,input { font:inherit; }
  button,a,input { -webkit-tap-highlight-color:transparent; }
  button { cursor:pointer; }
  button:disabled { cursor:default; }
  img,svg { max-width:100%; }
  img { height:auto; }
  svg { flex-shrink:0; vertical-align:middle; }
  h1,h2,h3,h4 { font-family:var(--heading); line-height:1.25; letter-spacing:-.04em; margin:0; }
  p { margin:0; }
  ::selection { color:#20243a; background:#dcd6fa; }
  :focus-visible { outline:3px solid var(--accent); outline-offset:5px; border-radius:3px; }
  [id] { scroll-margin-top:30px; }
  .container { max-width:1232px; padding-inline:32px; margin-inline:auto; }
  .accent { color:var(--accent); }
  .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
}

@layer components {
  .preview-notice { background:#eeedf4; color:#535267; text-align:center; font-size:11px; letter-spacing:.04em; padding:7px 16px; }
  .preview-notice span { margin:0 7px; }
  .skip-link { position:fixed; top:8px; left:8px; z-index:100; padding:12px 18px; background:var(--ink); color:white; transform:translateY(-150%); }
  .skip-link:focus { transform:translateY(0); }
  .site-header { border-bottom:1px solid var(--border); }
  .header-inner { min-height:95px; display:flex; align-items:center; gap:45px; }
  .brand { display:flex; align-items:center; gap:11px; font-family:var(--heading); font-weight:800; font-size:25px; letter-spacing:-1.3px; white-space:nowrap; }
  .brand-mark { width:37px; height:39px; background:var(--accent); color:white; border-radius:11px 11px 11px 3px; font-size:33px; line-height:33px; text-align:center; padding-left:3px; letter-spacing:-4px; }
  .brand-mark span { color:#ffafa7; }
  .brand-tech { font-weight:400; margin-left:5px; }
  .brand-dot { color:var(--accent); }
  .main-nav { display:flex; gap:27px; margin-left:auto; align-items:center; }
  .main-nav a { font-size:13px; font-weight:550; color:var(--muted); padding-block:15px; position:relative; white-space:nowrap; }
  .main-nav a:hover,.main-nav a[aria-current="page"] { color:var(--ink); }
  .main-nav a[aria-current="page"]:after { content:""; position:absolute; bottom:5px; width:4px; height:4px; border-radius:50%; background:var(--accent); left:calc(50% - 2px); }
  .search-link { display:flex; align-items:center; gap:9px; padding:10px 0 10px 25px; border-left:1px solid var(--border); font-size:13px; }
  .search-shortcut { color:#777689; margin-left:8px; }
  .menu-toggle { display:none; }
  .intro { display:flex; align-items:flex-end; justify-content:space-between; padding:67px 0 46px; gap:35px; }
  .eyebrow { font-size:10px; font-weight:700; letter-spacing:.16em; color:var(--muted); display:inline-flex; align-items:center; gap:10px; line-height:1.7; }
  .eyebrow-line { width:24px; height:2px; background:var(--accent); }
  .intro h1 { font-size:clamp(40px,4.6vw,60px); line-height:1.13; margin-top:21px; letter-spacing:-.055em; font-weight:750; }
  .intro-note { padding-bottom:6px; flex-shrink:0; }
  .intro-note p { font-size:14px; line-height:1.85; color:var(--muted); margin-bottom:20px; }
  .text-link { display:inline-flex; align-items:center; gap:12px; color:var(--accent); font-size:13px; font-weight:650; min-height:44px; }
  .text-link:hover { text-decoration:underline; text-underline-offset:5px; }
  .featured { display:grid; grid-template-columns:1.05fr 1fr; background:#f1eef8; border:1px solid #e2ddef; border-radius:14px; overflow:hidden; }
  .featured-copy { padding:38px 42px; display:flex; flex-direction:column; align-items:flex-start; }
  .featured-kicker { display:flex; align-items:center; gap:7px; font-size:9px; font-weight:700; letter-spacing:.15em; color:#68617f; margin-bottom:25px; }
  .star { font-size:17px; color:var(--accent); }
  .category-label { display:inline-flex; align-items:center; gap:7px; text-transform:uppercase; font-size:9px; font-weight:700; letter-spacing:.09em; color:#5744ac; min-height:24px; }
  .category-label:hover { text-decoration:underline; text-underline-offset:4px; }
  .category-dot { width:5px; height:5px; background:currentColor; border-radius:50%; }
  .cloud-devops { color:#27645e; }.ai-automation { color:#92511e; }.technical-guides { color:#a14743; }.building-products { color:#685091; }
  .featured h2 { font-size:clamp(25px,3vw,37px); margin:10px 0 15px; max-width:450px; }
  .featured h2 a:hover { color:var(--accent); }
  .featured-copy>p { font-size:13px; color:#666277; max-width:405px; line-height:1.85; }
  .article-meta { display:flex; flex-wrap:wrap; align-items:center; gap:9px; font-size:11px; color:var(--muted); }
  .featured .article-meta { margin:19px 0 24px; }
  .button { display:inline-flex; align-items:center; justify-content:center; gap:18px; min-height:46px; border:1px solid var(--accent); border-radius:6px; padding:11px 20px; background:var(--accent); color:#fff; font-size:12px; font-weight:650; line-height:1.6; }
  .button:hover { background:var(--accent-dark); }
  .featured-art { min-width:0; }
  .topic-art { height:198px; overflow:hidden; display:flex; align-items:center; justify-content:center; position:relative; isolation:isolate; background:#edeaf7; }
  .topic-art>* { position:relative; }
  .topic-art .art-grid { position:absolute; inset:0; background-image:linear-gradient(#7770b30b 1px,transparent 1px),linear-gradient(90deg,#7770b30b 1px,transparent 1px); background-size:26px 26px; z-index:-1; }
  .art-large { height:100%; min-height:395px; background:#e8e2f4; }
  .api-art { width:73%; position:relative; }
  .art-window { background:#fff; border:1px solid #d8d2e8; border-radius:9px; box-shadow:12px 16px 0 #64578e0b,0 12px 35px #5146840a; transform:rotate(-3deg); }
  .window-bar { height:32px; border-bottom:1px solid #edeaf4; display:flex; align-items:center; gap:5px; padding-inline:13px; }
  .window-bar i,.terminal-top i { width:5px; height:5px; border-radius:50%; background:#ded9ea; }
  .window-bar i:first-child { background:#e89a95; }.window-bar i:nth-child(2) { background:#dbbc79; }.window-bar i:nth-child(3) { background:#9dbfae; }
  .window-bar span { margin-left:auto; font:8px var(--mono); color:#797589; }
  .window-code { padding:13px 18px; font:10px/1.65 var(--mono); color:var(--ink); }
  .code-muted { color:#777182; }.code-purple { color:#6250bf; }.code-green { color:#35776a; }.code-coral { color:#b36a55; }
  .art-response { display:flex; gap:9px; align-items:center; position:absolute; right:-18px; bottom:16px; background:white; border:1px solid #ded8ed; padding:8px 12px; border-radius:5px; box-shadow:0 7px 20px #51468412; font:9px var(--mono); color:#397063; transform:rotate(3deg); }
  .response-dot { width:5px; height:5px; border-radius:50%; background:#5f9a80; }
  .art-caption { display:none; font:8px var(--mono); letter-spacing:.14em; color:#7d718e; text-align:center; margin-top:27px; }
  .art-large .api-art { max-width:365px; width:78%; }.art-large .window-bar { height:40px; padding-inline:17px; }.art-large .window-code { font-size:13px; padding:23px 25px 26px; }.art-large .window-bar span { font-size:10px; }.art-large .window-bar i { width:7px; height:7px; }.art-large .art-response { font-size:11px; bottom:69px; padding:12px 15px; right:-21px; }.art-large .art-caption { display:block; }
  .art-terminal { background:#eaeef1; }.mini-terminal { width:73%; background:#242a3c; border:1px solid #30374e; border-radius:8px; padding:13px 18px 18px; transform:rotate(-3deg); box-shadow:10px 12px 0 #242a3c09; }
  .terminal-top { display:flex; gap:5px; margin-bottom:15px; }.terminal-top i { background:#5b627a; }.terminal-prompt { color:#b3b7d0; font:8px var(--mono); }.mini-terminal p { font:11px var(--mono); margin-top:6px; color:#e8e8f0; }.mini-terminal p>span:first-child { color:#af9df4; margin-right:7px; }.cursor { display:inline-block; width:5px; height:12px; background:#ad9de0; margin-left:7px; vertical-align:middle; }.terminal-lines { display:flex; flex-direction:column; gap:5px; margin:14px 0 0; }.terminal-lines b { background:#424b64; width:80%; height:3px; border-radius:2px; }.terminal-lines b:nth-child(2) { width:60%; }.terminal-lines b:nth-child(3) { width:40%; }
  .art-cloud { background:#e7efec; }.cloud-art { display:flex; flex-direction:column; align-items:center; color:#4c7c70; }.cloud-node { width:95px; height:65px; display:grid; place-items:center; }.cloud-stem { width:1px; height:18px; background:#6e9488; }.server-row { display:flex; gap:14px; border-top:1px solid #6e9488; padding-top:13px; }.server-row i { display:block; width:40px; height:23px; border:1px solid #83a396; background:#f9fcfa; border-radius:4px; position:relative; }.server-row i:before { content:""; position:absolute; width:4px; height:4px; background:#73998b; border-radius:50%; left:7px; top:8px; }.server-row i:after { content:""; position:absolute; width:12px; height:2px; background:#adc7bc; right:6px; top:9px; }.cloud-caption { font:7px var(--mono); letter-spacing:.13em; margin-top:18px; }
  .art-layers { background:#f3ebe3; }.layer-art { position:relative; width:68%; height:125px; }.layer-card { position:absolute; inset:0; background:#fffaf4; border:1px solid #d9c9b7; border-radius:7px; }.layer-back { transform:rotate(-10deg) translate(-4px,-3px); background:#ded1c0; }.layer-mid { transform:rotate(5deg) translate(7px,0); background:#f0e3d3; }.layer-front { padding:14px 17px; color:#887455; transform:rotate(-2deg); }.layer-front>span { display:block; font-size:9px; margin-top:7px; }.layer-front>b { display:flex; justify-content:space-between; font-size:10px; font-weight:600; color:#695642; }
  .topic-navigation { display:flex; flex-wrap:wrap; align-items:center; gap:9px; padding:26px 0; border-bottom:1px solid var(--border); margin-bottom:52px; }
  .topic-caption { font-size:9px; font-weight:700; letter-spacing:.14em; color:var(--muted); margin-right:14px; }
  .topic-navigation a { display:flex; align-items:center; gap:8px; border:1px solid var(--border); background:#fff8; border-radius:5px; padding:9px 13px; min-height:42px; font-size:10px; font-weight:550; }
  .topic-navigation a:hover { background:var(--lavender); border-color:#c6bfe9; color:var(--accent); }
  .topic-navigation svg { color:#817b99; }
  .journal-layout { display:grid; grid-template-columns:minmax(0,1fr) 265px; gap:48px; }
  .section-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:27px; }
  .section-heading h2 { font-size:27px; letter-spacing:-.045em; margin-top:7px; }.section-count { font:10px var(--mono); color:var(--muted); padding-bottom:5px; }
  .article-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:37px 26px; }
  .article-card { min-width:0; }
  .card-art-link { display:block; border-radius:8px; overflow:hidden; margin-bottom:18px; border:1px solid #dedee64f; }
  .card-art-link .topic-art { transition:filter .2s; }.article-card:hover .topic-art { filter:saturate(1.12); }
  .card-content :is(h2,h3) { font-size:21px; font-weight:720; letter-spacing:-.035em; margin:8px 0 10px; line-height:1.35; }.card-content :is(h2,h3) a:hover { color:var(--accent); }
  .card-content>p { font-size:12px; line-height:1.85; color:var(--muted); margin-bottom:15px; }
  .journal-sidebar { padding-top:7px; }.about-note { background:#f0ede5; border:1px solid #e9e3d7; border-radius:9px; padding:26px; position:relative; overflow:hidden; }.about-note .eyebrow { font-size:8px; letter-spacing:.12em; color:#6b604e; }.note-mark { color:#b8a78a; font:35px var(--mono); margin:20px 0 17px; }.about-note h2 { font-size:22px; margin-bottom:12px; }.about-note p { color:#716b60; font-size:12px; line-height:1.9; }.about-note .text-link { font-size:11px; margin-top:15px; }
  .sidebar-topics { margin-top:34px; }.sidebar-topics h2 { font-size:15px; margin-bottom:16px; letter-spacing:-.02em; }.sidebar-topics>a { display:flex; justify-content:space-between; align-items:center; gap:8px; border-bottom:1px solid var(--border); padding-block:12px; font-size:11px; }.sidebar-topics>a>span:first-child { display:flex; gap:10px; align-items:center; }.sidebar-topics>a svg { color:#8c869e; }.sidebar-topics>a:hover { color:var(--accent); }.topic-count { color:var(--muted); font:10px var(--mono); }
  .sidebar-note { display:flex; gap:15px; align-items:center; margin-top:32px; padding:21px 0; color:var(--muted); }.sidebar-note p { font-size:12px; line-height:1.9; }.sidebar-note strong { font-weight:500; color:var(--ink); }
  .pagination { display:flex; gap:8px; margin-top:40px; padding-top:26px; border-top:1px solid var(--border); align-items:center; }.pagination a { display:flex; align-items:center; justify-content:center; gap:13px; border:1px solid var(--border); min-width:44px; min-height:44px; padding:8px 14px; font-size:11px; border-radius:5px; }.pagination a[aria-current="page"] { color:white; background:var(--accent); border-color:var(--accent); }.pagination a:hover:not([aria-current]) { background:var(--lavender); }
  .closing-note { border-block:1px solid var(--border); text-align:center; padding:46px 24px; margin:60px 0 0; }.closing-note h2 { font-size:29px; margin:11px 0 13px; }.closing-note .eyebrow { font-size:9px; }
  .site-footer { margin-top:60px; }.footer-main { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:28px; padding-bottom:29px; }.footer-brand-col { min-width:0; }.footer-brand { font:750 23px var(--heading); letter-spacing:-1px; }.footer-brand span { color:var(--accent); }.footer-main p { font-size:11px; color:var(--muted); margin-top:9px; max-width:280px; }.footer-nav { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px 26px; font-size:11px; }.footer-nav a { display:inline-flex; align-items:center; padding-block:12px; min-height:44px; }.footer-nav a:hover { color:var(--accent); }.social-links { display:flex; align-items:center; justify-content:center; gap:2px; }.social-links a { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; color:#8c869e; border-radius:4px; }.social-links a:hover { color:var(--accent); background:var(--lavender); }.footer-bottom { display:flex; justify-content:space-between; border-top:1px solid var(--border); padding-block:19px 28px; font-size:10px; color:var(--muted); }
  .breadcrumbs { display:flex; flex-wrap:wrap; align-items:center; gap:12px; font-size:11px; color:var(--muted); padding:28px 0; }.breadcrumbs a { min-height:30px; display:inline-flex; align-items:center; }.breadcrumbs a:hover { color:var(--accent); }.breadcrumbs>span[aria-hidden] { color:#a5a1af; }
  .archive-header { padding:20px 0 44px; max-width:780px; }.archive-header h1 { font-size:clamp(35px,4.2vw,51px); margin:12px 0 18px; }.archive-header p { color:var(--muted); font-size:16px; max-width:650px; line-height:1.85; }.result-count { color:var(--muted); font-size:11px; display:block; margin-top:18px; }.archive-page .journal-layout { border-top:1px solid var(--border); padding-top:38px; }
  .article-header { max-width:870px; padding-top:13px; }.article-header h1 { font-size:clamp(34px,4.8vw,57px); line-height:1.16; letter-spacing:-.05em; margin:15px 0 23px; }.article-deck { font-size:18px; max-width:760px; color:var(--muted); line-height:1.8; }.byline { display:flex; gap:13px; align-items:center; padding-block:26px 35px; font-size:11px; color:var(--muted); flex-wrap:wrap; }.author-avatar { display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:#e9e4f6; font:750 23px var(--heading); color:var(--accent); }.byline>div { display:flex; flex-direction:column; gap:1px; }.byline strong { color:var(--ink); font-size:11px; font-weight:650; }.byline>div>span { font-size:9px; }.byline-divider { width:1px; height:30px; background:var(--border); margin-inline:8px; }.read-time { display:flex; gap:6px; align-items:center; margin-left:8px; }
  .reading-layout { display:grid; grid-template-columns:minmax(0,760px) minmax(190px,1fr); gap:67px; border-top:1px solid var(--border); padding-top:38px; }.article-content { min-width:0; }.prose { font-size:17px; line-height:1.9; overflow-wrap:break-word; }.prose>p { margin-bottom:23px; }.prose h2 { font-size:28px; margin:42px 0 18px; letter-spacing:-.035em; }.prose h2:first-child { margin-top:0; }.prose strong { font-weight:650; }.prose p a { color:var(--accent); text-decoration:underline; text-underline-offset:4px; }.prose p a:hover { text-decoration-thickness:2px; }.prose ul,.prose ol { padding-left:25px; margin:24px 0; }.prose li { padding-left:6px; margin-block:9px; }.prose li::marker { color:var(--accent); }.prose code { font-family:var(--mono); font-size:.83em; }.prose p code { background:var(--lavender); padding:2px 5px; border-radius:3px; }.heading-anchor { color:#8174b2; padding-left:12px; font-size:.75em; opacity:0; }.prose h2:hover .heading-anchor,.heading-anchor:focus { opacity:1; }
  .code-block { margin:27px 0; border:1px solid #30394d; background:#24292e; border-radius:8px; color:#e1e4e8; overflow:hidden; }.code-block figcaption { display:flex; justify-content:space-between; align-items:center; gap:10px; background:#2b3037; padding:11px 17px; font:11px var(--mono); border-bottom:1px solid #41464e; }.code-block pre { margin:0; padding:23px; overflow-x:auto; font:12px/1.9 var(--mono); tab-size:2; }.code-block code { font:inherit; }.code-block :focus-visible { outline-color:#bcaeff; outline-offset:-4px; }.copy-control { display:inline-flex; flex-direction:column; gap:4px; }.copy-button { display:inline-flex; gap:7px; align-items:center; justify-content:center; background:transparent; color:inherit; border:1px solid currentColor; border-radius:4px; font:10px var(--body); min-height:32px; padding:7px 10px; }.copy-button:hover { background:#9992b41c; }.copy-status { font:10px/1.5 var(--body); max-width:200px; }.copy-status:empty { display:none; }
  .prose blockquote { margin:34px 0; padding:5px 0 5px 24px; border-left:3px solid var(--accent); font-size:23px; font-family:var(--heading); font-weight:500; letter-spacing:-.03em; line-height:1.65; }.callout { padding:22px 25px; margin:28px 0; background:#eeebf7; border:1px solid #e0daf1; border-left:3px solid var(--accent); border-radius:0 7px 7px 0; font-size:15px; }.callout>strong { display:block; margin-bottom:6px; color:#493d87; }.callout>p { color:#615c74; }.table-scroll { overflow:auto; margin:28px 0; }.prose table { width:100%; border-collapse:collapse; text-align:left; min-width:520px; font-size:13px; }.prose caption { text-align:left; color:var(--muted); font-size:12px; padding-bottom:10px; }.prose th,.prose td { border:1px solid var(--border); padding:12px 15px; }.prose th { background:#eeedf2; font-weight:650; }.article-image { margin:28px 0; }.article-image img { display:block; width:100%; border:1px solid var(--border); border-radius:8px; }.article-image figcaption { text-align:center; font-size:11px; color:var(--muted); margin-top:10px; }.prose hr { border:0; border-top:1px solid var(--border); margin:35px 0; }
  .reading-sidebar { min-width:0; }.toc { position:sticky; top:32px; display:flex; flex-direction:column; gap:10px; border-left:1px solid var(--border); padding-left:24px; }.toc>.eyebrow { margin-bottom:13px; }.toc>a { display:flex; align-items:flex-start; gap:10px; font-size:11px; color:var(--muted); padding:7px 0; }.toc>a>span { font:9px/2 var(--mono); color:#665585; }.toc>a:hover { color:var(--accent); }.reading-note { color:var(--muted); font-size:11px; line-height:1.9; margin-top:40px; padding-left:24px; }.article-end { border-top:1px solid var(--border); padding-top:25px; margin-top:40px; }.tags { display:flex; gap:9px; flex-wrap:wrap; }.tags a,.tags button { display:inline-flex; align-items:center; gap:18px; font-size:11px; background:#efedf5; color:#5e527b; padding:8px 12px; border:1px solid #e2ddec; border-radius:5px; min-height:40px; }.tags a:hover,.tags button:hover { border-color:var(--accent); color:var(--accent); }.share-row { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:26px; color:var(--muted); font-size:12px; }.share-row .copy-button { color:var(--accent); min-height:40px; }.adjacent-articles { display:grid; grid-template-columns:1fr 1fr; gap:25px; border-block:1px solid var(--border); margin-top:28px; padding:25px 0; }.adjacent-articles>a { display:flex; flex-direction:column; gap:9px; }.adjacent-articles>a>span { font-size:8px; letter-spacing:.1em; color:var(--muted); }.adjacent-articles strong { font:600 14px/1.5 var(--heading); }.adjacent-articles>a:hover strong { color:var(--accent); }.related-section { margin-top:55px; padding-top:35px; border-top:1px solid var(--border); }.related-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .search-page { min-height:650px; padding-top:50px; }.search-page .archive-header { margin-inline:auto; text-align:center; padding-bottom:32px; }.search-page .archive-header p { margin-inline:auto; }.search-panel { max-width:790px; margin-inline:auto; }.field-label { display:block; font-size:11px; font-weight:600; margin-bottom:9px; }.search-field { display:flex; align-items:center; gap:14px; border:1px solid #c7bfdc; border-radius:8px; background:#fff; padding:9px 16px; box-shadow:0 4px 20px #5146c806; }.search-field:focus-within { outline:2px solid var(--accent); outline-offset:3px; }.search-field>svg { color:var(--accent); }.search-field input { width:100%; min-width:0; padding-block:8px; outline:none; border:none; color:var(--ink); background:transparent; font-size:14px; }.search-field input:focus-visible { outline:none; }.search-field button { font-size:11px; border:0; padding:10px; background:transparent; color:var(--accent); }.search-field button:disabled { color:#777; }.search-summary { margin:13px 0 26px; font-size:11px; color:var(--muted); }.search-suggestions { padding-top:10px; }.search-suggestions .tags { margin-top:13px; }.search-empty-art { display:grid; place-items:center; width:88px; height:88px; margin:45px auto 22px; border-radius:50%; background:var(--lavender); color:#9786be; }.search-suggestions h2 { text-align:center; font-size:23px; }.search-suggestions>p { text-align:center; font-size:13px; margin-top:12px; color:var(--muted); }.search-results article { border-top:1px solid var(--border); padding:24px 0; }.search-results h2 { font-size:22px; margin:8px 0 12px; }.search-results h2 a { display:flex; justify-content:space-between; gap:20px; }.search-results h2 a:hover { color:var(--accent); }.search-results p { font-size:13px; color:var(--muted); }.empty-state { text-align:center; padding:50px 20px; background:#f0edf6; border-radius:9px; }.empty-state h2 { font-size:24px; margin:16px 0 12px; }.empty-state p { color:var(--muted); font-size:13px; }.empty-state .button { margin-top:23px; }.empty-state>svg { color:var(--accent); }
  .about-page { padding-top:40px; }.about-layout { display:grid; grid-template-columns:minmax(0,700px) 1fr; gap:70px; border-top:1px solid var(--border); padding-top:35px; }.about-layout .prose h2 { font-size:28px; }.about-topics { background:#efede5; border:1px solid #e6e1d6; border-radius:9px; padding:25px; align-self:start; }.about-topics>a { display:flex; gap:10px; align-items:center; font-size:11px; padding:14px 0; border-bottom:1px solid #ded9ce; }.about-topics>a:last-child { border-bottom:0; }.about-topics>a>span { flex:1; }.about-topics>a:hover { color:var(--accent); }.about-topics>.eyebrow { font-size:8px; }
  .information-page { max-width:850px; padding-top:65px; min-height:60vh; }.information-page h1 { font-size:43px; margin:15px 0 30px; }.information-page .prose { font-size:16px; }
  .not-found { text-align:center; padding-block:65px 50px; }.error-number { display:block; font:750 clamp(85px,12vw,150px)/1 var(--heading); letter-spacing:-.08em; color:#dcd6ec; margin-bottom:30px; }.error-number span { color:var(--accent); }.not-found h1 { font-size:clamp(25px,3vw,36px); margin:13px 0 18px; }.not-found p { color:var(--muted); font-size:14px; }.not-found>div,.error-page>div { display:flex; justify-content:center; gap:25px; margin-top:28px; align-items:center; }.error-page { text-align:center; padding-block:90px; min-height:60vh; }.error-page h1 { margin:15px 0 20px; }.error-page p { color:var(--muted); }.loading-page { padding-block:70px; min-height:70vh; }.loading-page>p { color:var(--muted); }.skeleton-heading { width:60%; height:60px; background:#eeebf2; border-radius:8px; margin:25px 0; }.skeleton-feature { height:350px; border-radius:12px; background:#eeebf2; }
}

@layer responsive {
  @media(min-width:1400px) { .container { max-width:1280px; }.intro { padding-top:75px; }.featured-copy { padding:42px 47px; }.topic-art:not(.art-large) { height:215px; } }
  @media(max-width:1050px) { .header-inner { gap:24px; }.main-nav { gap:20px; }.brand { font-size:23px; }.journal-layout { grid-template-columns:minmax(0,1fr) 235px; gap:30px; }.about-note { padding:22px; }.topic-navigation { gap:8px; }.topic-caption { width:100%; }.featured-copy { padding:30px; }.intro-note { max-width:300px; flex-shrink:1; }.intro-note p { font-size:13px; }.reading-layout { gap:40px; }.topic-art:not(.art-large) { height:175px; }.window-code { font-size:8px; }.about-layout { gap:35px; } }
  @media(max-width:850px) { .container { padding-inline:24px; }.header-inner { min-height:82px; gap:20px; }.main-nav a { font-size:11px; }.main-nav { gap:16px; }.search-link { padding-left:17px; }.search-link>span { display:none; }.intro { padding-top:45px; }.intro h1 { font-size:45px; }.intro-note { max-width:225px; }.featured-copy { padding:28px; }.featured h2 { font-size:29px; }.featured-kicker { margin-bottom:15px; }.art-large .window-code { font-size:10px; padding:19px; }.art-large .art-response { font-size:9px; right:-10px; }.art-large .art-caption { font-size:6px; }.journal-layout { grid-template-columns:minmax(0,1fr); }.journal-sidebar { display:grid; grid-template-columns:1fr 1fr; gap:25px; border-top:1px solid var(--border); padding-top:30px; margin-top:5px; }.sidebar-topics { margin-top:0; }.sidebar-note { display:none; }.about-note { padding:25px; }.topic-art:not(.art-large) { height:205px; }.window-code { font-size:10px; }.article-grid { gap:32px 24px; }.reading-layout { grid-template-columns:minmax(0,1fr); gap:30px; }.reading-sidebar { grid-row:1; }.toc { position:static; padding:18px 22px; background:#f0edf6; border-left:2px solid #bfb3df; display:grid; grid-template-columns:1fr 1fr; gap:3px 20px; }.toc>.eyebrow { grid-column:1/-1; margin-bottom:5px; }.reading-note { display:none; }.article-header h1 { max-width:730px; }.about-layout { grid-template-columns:1fr; }.about-topics { max-width:500px; }.closing-note { margin-top:40px; } }
  @media(max-width:640px) {
    .container { padding-inline:20px; }.preview-notice { font-size:9px; padding:6px 10px; }.header-inner { min-height:76px; flex-wrap:wrap; column-gap:16px; row-gap:0; }.brand { font-size:23px; gap:9px; }.brand-mark { width:33px; height:35px; font-size:30px; line-height:30px; }.menu-toggle { display:block; margin-left:auto; padding:12px 0 12px 10px; border:0; background:transparent; color:var(--ink); font-size:12px; min-height:44px; }.search-link { border:0; padding:12px 0 12px 2px; min-width:28px; }.main-nav { display:none; order:4; width:100%; flex-basis:100%; padding:4px 0 18px; gap:0; margin:0; }.main-nav.is-open { display:flex; flex-direction:column; align-items:stretch; }.main-nav a { font-size:13px; padding:11px; }.main-nav a[aria-current="page"]:after { left:auto; right:12px; top:21px; }.intro { display:block; padding:36px 0 28px; }.intro .eyebrow { font-size:8px; }.intro h1 { font-size:clamp(36px,8.6vw,50px); margin-top:17px; }.intro-note { max-width:none; margin-top:22px; padding-bottom:0; }.intro-note p { font-size:13px; margin-bottom:3px; }.intro-note .text-link { font-size:11px; }.featured { grid-template-columns:1fr; border-radius:10px; }.featured-copy { padding:25px; }.featured h2 { font-size:30px; max-width:410px; }.featured-copy>p { font-size:12px; }.featured .article-meta { margin-block:16px 20px; }.featured-art { border-top:1px solid #ded7ec; }.art-large { min-height:270px; }.art-large .api-art { width:64%; max-width:300px; }.art-large .window-code { font-size:10px; padding:17px 21px; }.art-large .window-bar { height:30px; }.art-large .window-bar span { font-size:8px; }.art-large .art-response { bottom:48px; right:-25px; }.art-large .art-caption { font-size:7px; margin-top:17px; }.topic-navigation { margin-bottom:32px; padding-block:23px; }.topic-navigation a { font-size:10px; padding:8px 10px; min-height:40px; }.topic-caption { margin-bottom:4px; }.section-heading { margin-bottom:22px; }.section-heading h2 { font-size:25px; }.section-heading .eyebrow { font-size:8px; }.section-count { font-size:8px; white-space:nowrap; }.article-grid { grid-template-columns:1fr; gap:32px; }.topic-art:not(.art-large) { height:220px; }.api-art { width:65%; }.window-code { font-size:11px; }.card-content :is(h2,h3) { font-size:23px; }.card-content>p { font-size:13px; }.card-art-link { margin-bottom:15px; }.category-label { font-size:9px; }.article-meta { font-size:11px; }.journal-sidebar { grid-template-columns:1fr; gap:30px; }.about-note { padding:26px; }.about-note p { max-width:330px; }.note-mark { float:right; margin:24px 5px 5px 12px; }.about-note h2 { margin-top:20px; }.sidebar-topics>a { padding-block:14px; font-size:12px; }.closing-note { padding:35px 12px; }.closing-note h2 { font-size:25px; max-width:300px; margin-inline:auto; }.site-footer { margin-top:40px; }.footer-main { gap:16px; }.footer-nav { gap:8px 20px; }.footer-bottom { font-size:9px; gap:15px; }.archive-header { padding:18px 0 30px; }.archive-header h1 { font-size:36px; }.archive-header p { font-size:14px; }.breadcrumbs { padding:20px 0; font-size:10px; gap:8px; }.article-header { padding-top:5px; }.article-header h1 { font-size:35px; }.article-deck { font-size:16px; }.byline { gap:10px; padding-bottom:24px; }.byline-divider { margin-inline:2px; }.byline>time { font-size:10px; }.read-time { margin-left:50px; flex-basis:100%; font-size:10px; }.reading-layout { padding-top:25px; }.toc { grid-template-columns:1fr; padding:16px 20px; }.toc>a { min-height:36px; }.prose { font-size:16px; }.prose h2 { font-size:25px; }.prose blockquote { font-size:21px; margin-inline:0; padding-left:19px; }.code-block pre { padding:19px; font-size:11px; }.code-block figcaption { padding:10px 13px; }.callout { padding:19px; font-size:14px; }.adjacent-articles { gap:17px; }.adjacent-articles strong { font-size:12px; }.related-section .section-heading { align-items:flex-start; flex-direction:column; gap:4px; }.related-section .section-heading h2 { font-size:25px; }.search-page { padding-top:27px; min-height:600px; }.search-field { padding:8px 11px; gap:9px; }.search-field input { font-size:12px; }.search-field>svg { width:19px; }.search-field button { padding-inline:3px; font-size:10px; }.search-suggestions h2 { font-size:21px; }.search-results h2 { font-size:21px; }.search-empty-art { margin-top:34px; }.search-suggestions>p { font-size:12px; }.about-page { padding-top:22px; }.about-layout .prose h2 { font-size:26px; }.information-page { padding-top:40px; }.information-page h1 { font-size:34px; }.not-found { padding-top:45px; }.not-found>div,.error-page>div { flex-direction:column; gap:10px; }.not-found p br { display:none; }.error-page { padding-block:60px; }.error-page h1 { font-size:29px; }.heading-anchor { opacity:1; }.share-row { font-size:11px; }
  }
  @media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none!important; transition:none!important; } }
}

.cover-art{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}.prose .callout.warning{background:#fff4e8;border-color:#e0a364}.accent-coral{--accent:#b83742;--accent-dark:#932d36;--lavender:#faeded}.prose td p,.prose th p{margin:.4em 0}
.pagination { flex-wrap: wrap; }
.brand-logo { display:block; width:194px; height:auto; }
.custom-brand-logo { object-fit:contain; }
.footer-brand .brand-logo { width:180px; }
@media(max-width:640px) { .brand-logo { width:174px; } }
.search-link,.menu-toggle,.main-nav a { min-height:44px; }
@media(max-width:640px) { .search-link { min-width:44px; } }
@media(max-width:360px) { .brand-logo { width:146px; } }

/* Warm editorial aside — same voice as the sidebar about-note, full-width. */
.journal-introduction {
  display:grid;
  grid-template-columns:minmax(220px,.9fr) minmax(0,1.2fr);
  gap:32px 56px;
  align-items:center;
  margin:56px 0 0;
  padding:34px 40px;
  background:#f0ede5;
  border:1px solid #e9e3d7;
  border-radius:12px;
}
.context-lead .note-mark { display:block; color:#b8a78a; font:42px/1 var(--mono); margin:0 0 16px; }
.context-lead .eyebrow { font-size:8px; letter-spacing:.12em; color:#6b604e; }
.context-lead h2 { font-size:clamp(24px,2.8vw,30px); letter-spacing:-.04em; margin:10px 0 12px; max-width:16ch; }
.context-lead>p { color:#716b60; font-size:13px; line-height:1.85; max-width:34ch; }
.context-paths { display:flex; flex-direction:column; min-width:0; }
.context-path {
  display:grid;
  grid-template-columns:2.75ch minmax(0,1fr);
  column-gap:14px;
  align-items:start;
  padding:16px 2px;
  border-top:1px solid #ded9ce;
  min-height:44px;
}
.context-path:last-child { border-bottom:1px solid #ded9ce; }
.context-path-index {
  font:700 11px/1.35 var(--mono);
  letter-spacing:.08em;
  color:#a8987c;
  padding-top:2px;
  text-align:right;
}
.context-path-copy { display:flex; flex-direction:column; gap:5px; min-width:0; }
.context-path-title {
  display:inline-flex;
  align-items:center;
  gap:10px;
  font:650 14px/1.35 var(--heading);
  letter-spacing:-.02em;
  color:var(--ink);
}
.context-path-title svg { color:#a8987c; flex-shrink:0; transition:transform .15s ease; }
.context-path-copy>span:not(.context-path-title) { font-size:12px; line-height:1.65; color:#716b60; max-width:42ch; }
.context-path:hover .context-path-title { color:var(--accent); }
.context-path:hover .context-path-title svg { color:var(--accent); transform:translateX(3px); }
.prose .contact-email { color:white; text-decoration:none; margin-top:10px; }
@media(prefers-reduced-motion:reduce) { .context-path-title svg { transition:none; } }
@media(max-width:980px) {
  .journal-introduction { grid-template-columns:minmax(200px,.85fr) minmax(0,1.15fr); gap:28px 36px; padding:30px 28px; }
  .context-path-copy>span:not(.context-path-title) { max-width:none; }
}
@media(max-width:850px) {
  .related-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .footer-main { gap:20px; }
  .footer-nav { gap:8px 18px; }
  .journal-introduction { grid-template-columns:1fr; gap:22px; align-items:stretch; padding:28px 24px; }
  .context-lead h2 { max-width:20ch; }
  .context-lead>p { max-width:46ch; }
}
@media(max-width:760px) {
  .journal-introduction { padding:24px 20px; gap:20px; border-radius:10px; }
  .context-lead .note-mark { font-size:36px; margin-bottom:12px; }
  .context-lead h2 { max-width:none; font-size:25px; margin:8px 0 10px; }
  .context-lead>p { max-width:none; font-size:12px; }
  .context-path { grid-template-columns:2.5ch minmax(0,1fr); column-gap:12px; padding:15px 0; }
  .context-path-title { font-size:14px; gap:8px; }
  .context-path-copy>span:not(.context-path-title) { font-size:12px; }
  .related-grid { grid-template-columns:1fr; }
  .footer-main { grid-template-columns:1fr; justify-items:start; gap:18px; }
  .footer-nav { justify-content:flex-start; }
  .social-links { justify-content:flex-start; }
}

/* Progressive enhancements and PHP-runtime controls, separate from theme layout. */
[hidden] { display: none !important; }
.article-image img { height: auto; }
.code-block .hljs-keyword,.code-block .hljs-selector-tag { color: #f97583; }
.code-block .hljs-string,.code-block .hljs-regexp { color: #9ecbff; }
.code-block .hljs-comment,.code-block .hljs-quote { color: #959da5; }
.code-block .hljs-number,.code-block .hljs-literal,.code-block .hljs-built_in { color: #79b8ff; }
.code-block .hljs-title,.code-block .hljs-function { color: #b392f0; }
.code-block .hljs-variable,.code-block .hljs-attr { color: #ffab70; }
.article-content { min-width: 0; }
.analytics-toggle {
  position: fixed; bottom: 12px; left: 12px; z-index: 30;
  font-size: 11px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--paper); color: var(--ink); padding: 10px; min-height: 44px;
}
.analytics-panel {
  position: fixed; z-index: 40; bottom: 64px; left: 12px;
  max-width: 400px; width: calc(100% - 24px); padding: 22px;
  background: var(--paper); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 8px 30px #20243a20; font-size: 13px;
}
.analytics-panel h2 { font-size: 20px; margin-bottom: 12px; }
.analytics-panel p { margin: 10px 0; }
.analytics-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.analytics-actions button {
  background: var(--paper); color: var(--ink); border: 1px solid var(--accent);
  border-radius: 6px; padding: 10px; min-height: 44px;
}
.search-field button { min-height: 44px; }
.search-field a { color: var(--accent); font-size: 12px; padding: 10px; }
.search-results article { margin-block: 28px; }
html:not(.js-enabled) .menu-toggle { display: none; }
@media (max-width: 640px) {
  html:not(.js-enabled) .main-nav { display: flex; flex-wrap: wrap; }
}