/*
Theme Name: angelulz com
Theme URI: https://angelulz.com
Description: Cody Crady's portfolio. Child of Twenty Twenty-Five in the Angelulz brand: every colour, radius and font comes from a pinned copy of angelulz-brand's tokens (brand/, with BRAND_COMMIT); the Warden is the header mark and Sentinel A the favicon. Deep teal surfaces, signal-blue links, cyan only for focus, no shadows.
Template: twentytwentyfive
Version: 1.4.0
Author: angelulz
*/

/* Every value below is a brand token from brand/tokens.css, which functions.php enqueues first. A tint is
   color-mix() of a token. There is no colour literal in this file: a new colour belongs in angelulz-brand, and
   arrives here by copying brand/ again. Class names are the ones sites/docs/md2blocks.py emits; the rules for
   them are taken from the docs theme where they fit. Reading width is theme.json's contentSize (44rem); cards,
   tables and diagrams may use the wide size (72rem). */

html{background:var(--abyss)}
body{background:var(--bg);color:var(--text);font-family:var(--font-sans);font-weight:400;-webkit-font-smoothing:antialiased}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
::selection{background:color-mix(in srgb,var(--signal) 35%,transparent)}

/* header: the Warden and the wordmark, then Work · Open source · About · Brand */
.al-header{position:sticky;top:0;z-index:50;background:var(--surface);border-bottom:1px solid var(--line)}
.al-header a{border-bottom:0}
.al-brand{display:inline-flex;align-items:center;gap:var(--space-3);color:var(--text);text-decoration:none}
.al-brand img{width:36px;height:36px;display:block}
.al-wordmark{font:600 20px/24px var(--font-mono);letter-spacing:-.01em;color:var(--text)}
.al-brand:hover .al-wordmark{color:var(--signal)}
.al-header .wp-block-navigation a{color:var(--text);font-weight:400;font-size:.95rem;text-decoration:none;transition:color 120ms}
.al-header .wp-block-navigation a:hover,.al-header .wp-block-navigation .current-menu-item>a{color:var(--signal)}
.al-header .wp-block-navigation__responsive-container-open,.al-header .wp-block-navigation__responsive-container-close{color:var(--text)}
.al-header .wp-block-navigation__responsive-container.is-menu-open{background:var(--bg)!important;color:var(--text)!important}
.al-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,.al-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{align-items:flex-start!important;text-align:left}
.al-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{padding:.4rem 0;font-size:1.1rem}
.al-header .wp-block-navigation a:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:var(--radius-sm)}

/* page frame */
.wp-site-blocks>main,.al-main{margin-top:0!important;padding-top:var(--space-6)!important;padding-bottom:var(--space-6)}
h1,h2,h3,h4,.wp-block-post-title{font-family:var(--font-sans);color:var(--text);letter-spacing:-.01em;font-weight:600}
.wp-block-post-title{font-size:36px;line-height:42px;margin:0 0 var(--space-4)}
h2.wp-block-heading{font-size:22px;line-height:28px;margin-top:var(--space-7);margin-bottom:var(--space-3)}
h3.wp-block-heading{font-size:17px;line-height:24px;margin-top:var(--space-6);margin-bottom:var(--space-2)}
h2.wp-block-heading,h3.wp-block-heading{scroll-margin-top:5.5rem}
p,li{font-size:1.0625rem;line-height:1.7}
a{color:var(--signal);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--signal) 35%,transparent);transition:border-color 120ms,color 120ms}
a:hover{border-bottom-color:var(--signal)}
strong{color:var(--text);font-weight:600}
code{font-family:var(--font-mono);font-size:.85em;background:var(--raised);border:1px solid var(--line);border-radius:var(--radius-sm);padding:.1em .4em;color:var(--text)}
pre.wp-block-code{background:var(--abyss);border:1px solid var(--line);border-radius:var(--radius-md);padding:var(--space-4) var(--space-5);overflow-x:auto}
pre.wp-block-code code{background:none;border:0;padding:0;font-size:13px;line-height:20px;white-space:pre}
.wp-block-quote{border-left:3px solid var(--muted);background:var(--surface);border-radius:0 var(--radius-md) var(--radius-md) 0;padding:var(--space-3) var(--space-5);font-style:normal}
.wp-block-separator{border:0;height:1px;background:var(--line);margin:var(--space-6) 0}
ul.wp-block-list,ol.wp-block-list{padding-left:1.3rem}
ul.wp-block-list li::marker,ol.wp-block-list li::marker{color:var(--muted)}
.wp-block-post-content li+li{margin-top:var(--space-2)}

/* breadcrumbs (Work / a case study) */
.al-crumbs,.wp-block-breadcrumbs{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;color:var(--muted);margin:0 0 var(--space-3)}
.wp-block-breadcrumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.2rem .5rem;margin:0;padding:0}
.wp-block-breadcrumbs li{font-size:12px;line-height:1.4;margin:0}
.wp-block-breadcrumbs a{color:var(--muted);border-bottom:0}
.wp-block-breadcrumbs a:hover{color:var(--signal)}

/* tables, diagrams, cards: allowed out to the wide size */
.wp-block-post-content>.wp-block-table,.wp-block-post-content>.al-cards,.wp-block-post-content>.wp-block-image{max-width:var(--wp--style--global--wide-size)!important}
.wp-block-table{overflow-x:auto;margin:var(--space-5) auto}
.wp-block-table table{border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;font-size:.95rem}
.wp-block-table th{background:var(--raised);color:var(--text);font-weight:600;text-align:left;border:0;border-bottom:1px solid var(--line);padding:var(--space-3) var(--space-4)}
.wp-block-table td{border:0;border-bottom:1px solid var(--line);padding:var(--space-3) var(--space-4);background:var(--surface);vertical-align:top}
.wp-block-table tr:last-child td{border-bottom:0}
.wp-block-image{margin:var(--space-6) auto}
.wp-block-image img{width:100%;height:auto;display:block;border-radius:var(--radius-md);border:1px solid var(--line)}
@media (max-width:700px){.wp-block-image{overflow-x:auto}.wp-block-image img{min-width:640px}}
/* the Brand page shows the marks themselves, small, on the abyss they were drawn for */
.wp-block-post-content>.wp-block-image:has(img[src*="/brand/"]){max-width:var(--wp--style--global--content-size)!important}
.wp-block-image img[src*="/brand/"]{width:160px;min-width:0;padding:var(--space-5);background:var(--abyss);border:1px solid var(--line);border-radius:var(--radius-lg);box-sizing:content-box}

/* cards (converter ::: cards): one tile per case study */
.al-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--space-3);margin:var(--space-5) auto var(--space-6);padding:0}
.al-card{display:flex;flex-direction:column;gap:var(--space-2);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-5);color:var(--text);text-decoration:none;transition:background-color 120ms,border-color 120ms}
.al-card:hover{background:var(--raised);border-color:var(--signal)}
.al-card strong{display:block;color:var(--text);font-weight:600;font-size:1.1rem;line-height:1.35}
.al-card span{display:block;font-size:.925rem;color:var(--muted);line-height:1.55}
.al-card:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

/* the home page: the Warden, the name, and the first paragraph as the role line */
.al-hero{padding:var(--space-6) 0 var(--space-3)}
.al-hero-mark{width:72px;height:72px;display:block;margin:0 0 var(--space-5)}
.al-home .al-hero .wp-block-post-title{font-size:48px;line-height:52px;margin:0}
.al-home .wp-block-post-content>p:first-child{font:500 13px/18px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--signal);margin-top:var(--space-3)}
.al-home .wp-block-post-content>p:nth-child(2){font-size:1.2rem;line-height:1.65}
@media(max-width:600px){.al-home .al-hero .wp-block-post-title{font-size:36px;line-height:42px}.wp-block-post-title{font-size:28px;line-height:34px}}

/* callouts and "On this page" (the converter writes a contents list for four to fourteen ## headings) */
.al-callout{border:1px solid var(--line);border-left:3px solid var(--signal);background:var(--surface);border-radius:0 var(--radius-md) var(--radius-md) 0;padding:var(--space-3) var(--space-5);margin:var(--space-5) auto}
.al-callout p{margin:.3rem 0}
.al-callout-label{font:500 12px/16px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--signal)}
.al-callout-tip{border-left-color:var(--ok)}.al-callout-tip .al-callout-label{color:var(--ok)}
.al-callout-warning{border-left-color:var(--warn)}.al-callout-warning .al-callout-label{color:var(--warn)}
.al-toc{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-3) var(--space-4);margin:0 auto var(--space-5)}
.al-toc>span{display:block;font:500 12px/16px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--space-2)}
.al-toc ul{list-style:none;margin:0;padding:0;columns:2;column-gap:2rem}
.al-toc li{font-size:.925rem;line-height:1.5;padding:.12rem 0;margin:0;break-inside:avoid}
.al-toc a{border-bottom:0}
@media(max-width:700px){.al-toc ul{columns:1}}

/* footer */
.al-footer{border-top:1px solid var(--line);margin-top:var(--space-7);padding:var(--space-5) 0;font-size:.875rem;color:var(--muted)}
.al-footer p{font-size:.875rem;margin:0}
.al-footer a{color:var(--signal);border:0}

/* writing (1.3.0): the /writing/ listing, a post's byline, and the About avatar */
.al-writing-intro{color:var(--muted);margin:0 0 var(--space-6)}
.al-posts .wp-block-post-template{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-4)}
.al-posts .wp-block-post-template>li{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-5);transition:border-color 120ms}
.al-posts .wp-block-post-template>li:hover{border-color:var(--signal)}
.al-posts .al-post-title{font-size:1.25rem;line-height:1.35;margin:0 0 var(--space-1)}
.al-posts .al-post-title a{color:var(--text);border-bottom:0}
.al-posts .al-post-title a:hover{color:var(--signal)}
.al-posts .al-post-date,.al-byline .wp-block-post-date{display:block;font:500 12px/16px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.al-posts .al-post-excerpt p{margin:var(--space-2) 0 0;color:var(--text)}
.al-posts .wp-block-query-pagination{margin-top:var(--space-5);font-family:var(--font-mono);font-size:.875rem}
.al-byline{gap:var(--space-3);margin:0 0 var(--space-6);padding-bottom:var(--space-4);border-bottom:1px solid var(--line)}
.al-byline .wp-block-avatar img,.al-about-avatar img{border-radius:var(--radius-pill);border:1px solid var(--line);display:block}
.al-byline .wp-block-avatar a,.al-about-avatar a{border-bottom:0;display:block;line-height:0}
.al-byline-text{gap:2px}
.al-byline .wp-block-post-author-name{font-weight:600;font-size:1rem}
.al-byline .wp-block-post-author-name a{color:var(--text);border-bottom:0}
.al-byline .wp-block-post-author-name a:hover{color:var(--signal)}
.al-back{margin-top:var(--space-7);font-family:var(--font-mono);font-size:.875rem}
.al-back a{border-bottom:0}
.al-about-avatar{margin:var(--space-2) 0 var(--space-4)}

/* the Open source page (1.4.0, redesign v2 V2): scripts/open_source.py writes one card per contribution, the filter
   chips (shown by functions.php's script) and the tally, counted from the page's own entries at publish time.
   templates/page-open-source.html gives the page the wide size; the intro keeps the reading width. */
.al-os-page .wp-block-post-content>p{max-width:var(--wp--style--global--content-size)!important;margin-left:0!important;margin-right:auto!important}
.al-os{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:var(--space-6);align-items:start;margin:var(--space-5) 0 var(--space-6)}
.al-os-main{min-width:0;display:flex;flex-direction:column;gap:var(--space-3)}
.al-os-filters{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}
.al-os-filters[hidden]{display:none}
.al-os-count{font:500 12px/16px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-left:var(--space-2)}
.al-chip{font:500 12px/16px var(--font-mono);color:var(--text);background:var(--raised);border:1px solid var(--line);border-radius:var(--radius-pill);padding:.3rem .8rem;cursor:pointer;transition:color 120ms,border-color 120ms}
.al-chip small{font-size:inherit;color:var(--muted);margin-left:.35rem}
.al-chip:hover{border-color:var(--signal)}
.al-chip[aria-pressed="true"]{color:var(--signal);border-color:var(--signal)}
.al-chip:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.al-contrib{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-5);scroll-margin-top:5.5rem}
.al-contrib[hidden]{display:none}
.al-contrib-head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3);margin:0 0 var(--space-3)}
.al-contrib .al-repo{font-size:13px;line-height:18px;overflow-wrap:anywhere}
.al-contrib-meta{font:400 13px/18px var(--font-mono);color:var(--muted)}
.al-outcome{margin-left:auto;font:500 12px/16px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;border:1px solid;border-radius:var(--radius-pill);padding:.15rem .65rem}
.al-outcome-fixed,.al-outcome-merged{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,transparent)}
.al-outcome-open{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,transparent)}
.al-outcome-closed{color:var(--muted);border-color:color-mix(in srgb,var(--muted) 45%,transparent)}
.al-contrib-title{font:600 17px/24px var(--font-sans);color:var(--text);margin:0 0 var(--space-2)}
.al-contrib-num{font:400 15px/24px var(--font-mono);color:var(--muted)}
.al-contrib p{margin:0 0 var(--space-3)}
.al-contrib .al-contrib-outcome{font-size:14px;line-height:21px;color:var(--muted)}
.al-contrib .al-contrib-links{font-size:14px;line-height:21px;margin:0}
.al-tally{position:sticky;top:5.5rem;max-height:calc(100vh - 6.5rem);overflow-y:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-5)}
.al-tally-title{font:700 26px/32px var(--font-sans);color:var(--halo);margin:0 0 var(--space-3)}
.al-tally h3{font:500 12px/16px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:var(--space-4) 0 var(--space-2)}
.al-tally p,.al-tally li{font-size:14px;line-height:21px}
.al-tally ul,.al-tally ol{list-style:none;margin:0;padding:0}
.wp-block-post-content .al-tally li{margin:0}
.al-tally b{font-family:var(--font-mono);font-weight:500;color:var(--text)}
.al-tally-total{margin:0 0 var(--space-4);color:var(--muted)}
.al-tally-total strong{font:700 26px/32px var(--font-sans);color:var(--text);margin-right:.2rem}
.al-split-bar{display:flex;height:10px;border-radius:var(--radius-pill);background:var(--line);overflow:hidden}
.al-split{flex:var(--n) 0 0;min-width:0}
.al-split-resolved{background:var(--ok)}
.al-split-open{background:var(--warn)}
.al-split-closed{background:var(--muted)}
.al-tally .al-split-key{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-4);margin-top:var(--space-2)}
.al-split-key li::before{content:"";display:inline-block;width:8px;height:8px;border-radius:var(--radius-pill);margin-right:6px;vertical-align:1px}
.al-key-resolved::before{background:var(--ok)}
.al-key-open::before{background:var(--warn)}
.al-key-closed::before{background:var(--muted)}
.al-bars li{display:grid;grid-template-columns:minmax(0,7.5rem) minmax(0,1fr) 2.5ch;align-items:center;gap:var(--space-2);padding:2px 0}
.al-bars li>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.al-bar{position:relative;height:8px;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--line) 70%,transparent)}
.al-bar::before{content:"";position:absolute;top:0;bottom:0;left:0;width:calc(var(--n) / var(--max) * 100%);background:var(--data-1);border-radius:inherit}
.al-bars b{text-align:right}
.al-kinds{display:flex;gap:var(--space-2)}
.al-kinds li{flex:1 1 0;display:flex;flex-direction:column-reverse;color:var(--muted);font-size:12px;line-height:16px}
.al-kinds b{font:600 20px/26px var(--font-sans)}
.al-month-chart{display:flex;gap:4px}
.al-month-chart li{flex:1 1 0;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;height:calc(6rem + 40px);text-align:center}
.al-month-chart li::after{content:"";order:2;height:calc(var(--n) / var(--max) * 6rem);min-height:1px;background:var(--data-1);border-radius:2px 2px 0 0}
.al-month-chart li[style^="--n:0;"]::after{background:var(--line);border-radius:0}
.al-month-chart b{order:1;font-size:11px;line-height:16px;margin-bottom:2px}
.al-month-chart span{order:3;font:500 12px/16px var(--font-mono);text-transform:uppercase;color:var(--muted);margin-top:4px}
.al-tally .al-tally-asof{margin:var(--space-5) 0 0;font-size:12px;line-height:18px;color:var(--muted)}
@media (max-width:900px){.al-os{grid-template-columns:minmax(0,1fr)}.al-tally{position:static;max-height:none;overflow:visible}}
@media print{.al-os-filters{display:none!important}.al-os{display:block}.al-tally{position:static;max-height:none;overflow:visible;margin-top:var(--space-5)}.al-contrib[hidden]{display:block!important}}

/* misc */
.wp-block-post-date,.wp-block-post-author{display:none}
@media print{.al-header,.al-footer,.al-toc{display:none!important}}