/* ------ fonts: self-hosted (latin + latin-ext from Google Fonts, OFL) ------ */
/* JetBrains Mono normal latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/jetbrains-mono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* JetBrains Mono normal latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/jetbrains-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* JetBrains Mono normal latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/jetbrains-mono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* JetBrains Mono normal latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/jetbrains-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* JetBrains Mono normal latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/jetbrains-mono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* JetBrains Mono normal latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/jetbrains-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Newsreader italic latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/newsreader-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Newsreader italic latin */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/newsreader-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Newsreader normal latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/newsreader-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Newsreader normal latin */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/newsreader-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Plus Jakarta Sans normal latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/plus-jakarta-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Plus Jakarta Sans normal latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/plus-jakarta-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Plus Jakarta Sans normal latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/plus-jakarta-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Plus Jakarta Sans normal latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/plus-jakarta-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Plus Jakarta Sans normal latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/plus-jakarta-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Plus Jakarta Sans normal latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/plus-jakarta-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* awmium.com design system
   Warm white / warm gray-black, violet-to-red gradient reserved for
   the cursor, ticks, emphasis words and cert-card hover borders. */

:root{
  color-scheme:light;
  --bg:#FAF8F4;
  --surface:#F3F0E9;
  --card:#F8F6F1;
  --text:#1A1915;
  --muted:#6E6A61;
  --hairline:#E8E4D9;
  --accent:#FF3458;
  --link:#D92845;
  --link-hover:#B01E38;
  --btn-bg:#1A1915;
  --btn-text:#FAF8F4;
  --nav-bg:rgba(250,248,244,.82);
  --syn-str:#B0307A;
  --syn-kw:#5951D8;
  --gl1:#6C65DE; --gl2:#955BC4; --gl3:#CB4F96; --gl4:#E65684; --gl5:#FD4A4A;
  --grad-soft:linear-gradient(90deg,var(--gl1),var(--gl3),var(--gl5));
  --sans:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  --serif:'Newsreader',Georgia,serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#141311;
    --surface:#1D1C19;
    --card:#191816;
    --text:#ECEAE4;
    --muted:#97938A;
    --hairline:#2B2A26;
    --link:#FF3458;
    --link-hover:#FF5C78;
    --btn-bg:#ECEAE4;
    --btn-text:#141311;
    --nav-bg:rgba(20,19,17,.82);
    --syn-str:#E07AB0;
    --syn-kw:#9F99F2;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#141311;
  --surface:#1D1C19;
  --card:#191816;
  --text:#ECEAE4;
  --muted:#97938A;
  --hairline:#2B2A26;
  --link:#FF3458;
  --link-hover:#FF5C78;
  --btn-bg:#ECEAE4;
  --btn-text:#141311;
  --nav-bg:rgba(20,19,17,.82);
  --syn-str:#E07AB0;
  --syn-kw:#9F99F2;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;scrollbar-gutter:stable}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--link);text-decoration:none}
a:hover{color:var(--link-hover)}
a,button{touch-action:manipulation}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.skip{position:absolute;left:-9999px;top:0;z-index:20;background:var(--btn-bg);color:var(--btn-text);font-family:var(--mono);font-size:13px;padding:10px 16px}
.skip:focus{left:0}
kbd{font-family:var(--mono);font-size:.85em;color:var(--text);background:var(--surface);border:1px solid var(--hairline);border-radius:5px;padding:1px 6px}
.mono{font-family:var(--mono)}
.serif{font-family:var(--serif);font-optical-sizing:auto}
.muted{color:var(--muted)}
.grad{
  background:var(--grad-soft);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.tick{width:32px;height:3px;background:var(--grad-soft)}

.wrap{max-width:1280px;margin:0 auto;padding:0 24px}
@media (max-width:480px){.wrap{padding:0 16px}}

/* ------ cursor ------ */
.cursor{
  display:inline-block;
  width:.62em;height:1.12em;
  vertical-align:text-bottom;
  background:var(--gl1);
  animation:blink 1.1s ease-in-out infinite,cycle 16s linear infinite;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}
@keyframes cycle{
  0%{background:var(--gl1)}
  20%{background:var(--gl2)}
  40%{background:var(--gl3)}
  60%{background:var(--gl4)}
  80%{background:var(--gl5)}
  100%{background:var(--gl1)}
}

/* ------ nav ------ */
.nav{
  position:sticky;top:0;z-index:10;
  border-bottom:1px solid var(--hairline);
  background:var(--nav-bg);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.nav-inner{
  display:flex;flex-wrap:wrap;align-items:center;gap:16px;
  padding-top:14px;padding-bottom:14px;
}
.brand{display:flex;align-items:center;color:var(--text)}
.brand:hover{color:var(--text)}
.brand img{height:26px;width:auto;display:block}
.nav-path{touch-action:manipulation;flex:1;display:flex;align-items:center;justify-content:flex-start;gap:10px;min-width:0;padding-left:18px}
.nav-path .mono{font-size:14px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-path .mono strong{color:var(--text);font-weight:500}
.nav-path .cursor{font-size:14px;flex-shrink:0}
@media (max-width:760px){
  .nav-path{order:3;flex-basis:100%;padding-left:0;padding-top:6px}
}
.nav-links{display:flex;align-items:center;gap:22px;row-gap:10px;margin-left:auto;flex-wrap:wrap;justify-content:flex-end;min-width:0}
@media (max-width:480px){.nav-links{gap:14px;row-gap:8px}}
.nav-links a{color:var(--muted);font-size:13px;font-family:var(--mono);transition:color .15s ease-out}
.nav-links a:hover{color:var(--text)}
.nav-links a.btn{color:var(--btn-text)}
.nav-links a.btn:hover{color:var(--btn-text);opacity:.88}
.nav-links a[aria-current="page"]{
  color:var(--text);
  padding-bottom:5px;margin-bottom:-5px;
  background:var(--grad-soft) no-repeat left bottom/100% 2px;
}
.theme-btn{
  width:30px;height:30px;padding:0;
  border:1px solid var(--hairline);border-radius:8px;
  background:transparent;color:var(--muted);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.theme-btn:hover{color:var(--text)}
.theme-btn .sun{display:none}
:root[data-theme="dark"] .theme-btn .sun{display:block}
:root[data-theme="dark"] .theme-btn .moon{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-btn .sun{display:block}
  :root:not([data-theme="light"]) .theme-btn .moon{display:none}
}
.btn{
  display:inline-block;
  background:var(--btn-bg);color:var(--btn-text);
  border-radius:10px;padding:12px 22px;
  font-family:var(--mono);font-size:14px;font-weight:500;line-height:1.2;
}
.btn:hover{color:var(--btn-text);opacity:.88}
.btn-sm{padding:9px 16px;font-size:12.5px;border-radius:9px}

/* ------ hero ------ */
.hero{padding-top:88px}
.hero h1{
  margin:0;
  font-family:var(--serif);font-optical-sizing:auto;
  font-size:clamp(38px,6vw,66px);
  font-weight:400;letter-spacing:-.02em;line-height:1.1;
  max-width:18ch;
}
.hero h1 em{font-style:italic}
.hero p{margin:22px 0 0;font-size:18px;color:var(--muted)}
.hero-ctas{display:flex;align-items:center;gap:24px;margin-top:30px;flex-wrap:wrap}
.hero-ctas .mono{font-size:14px}

/* ------ flow strip (career path) ------ */
.flow{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  font-family:var(--mono);font-size:13px;color:var(--muted);
  margin:0 0 22px;
}
.flow .sep{color:var(--muted);opacity:.6;user-select:none}
.flow .now{font-weight:500}
.flow .prompt{color:var(--muted);opacity:.7;user-select:none}

/* ------ listings: agent view (portfolio, blog, agent-kit) ------ */
.agent-call{
  margin:0;display:flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:15px;font-weight:500;color:var(--text);letter-spacing:0;
}
.agent-call .arg{color:var(--muted);font-weight:400}
.agent-dot{width:8px;height:8px;border-radius:50%;background:var(--gl1);flex-shrink:0;animation:cycle 16s linear infinite}
.agent-out{margin:6px 0 14px;padding-left:calc(4px + 1.85em);text-indent:-1.85em;font-family:var(--mono);font-size:13px;color:var(--muted)}
.agent-out .elbow{display:inline-block;width:1.85em;text-indent:0;opacity:.6}
.hero .kbd-hint{margin:18px 0 0;font-family:var(--mono);font-size:12px;line-height:1.6;color:var(--muted)}
.kbd-hint kbd{font-size:11px;padding:0 5px}
@media (max-width:860px),(hover:none){.kbd-hint{display:none}}
.ls{display:flex;flex-direction:column}
.ls-row{
  display:grid;grid-template-columns:24px minmax(0,1fr) auto;
  gap:16px;align-items:center;
  padding:11px 14px;border:1px solid transparent;border-radius:9px;color:var(--text);outline:none;
  transition:opacity .3s ease-out,transform .25s cubic-bezier(.16,1,.3,1);
}
.ls-row.post{grid-template-columns:24px 96px minmax(0,1fr) auto;align-items:baseline}
.ls-main{display:grid;grid-template-columns:minmax(160px,270px) minmax(0,1fr);gap:16px;align-items:center;min-width:0}
.ls-row.post .ls-main{display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.ls-caret{font-family:var(--mono);font-size:13px;color:var(--muted);opacity:.5}
.ls-caret .sel{display:none}
.ls-lead{font-family:var(--mono);font-size:12.5px;color:var(--muted);white-space:nowrap}
.ls-title{font-size:15.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ls-row.post .ls-title{white-space:normal}
.ls-desc{font-size:14px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ls-meta{font-family:var(--mono);font-size:12px}
.ls-end{position:relative;display:flex;justify-content:flex-end;align-items:center;min-width:72px}
.ls-pills{display:flex;gap:6px;justify-content:flex-end;flex-wrap:nowrap;transition:opacity .15s ease-out}
@media (max-width:1180px){.ls-pills .pill:nth-child(n+4){display:none}}
.pill{font-family:var(--mono);font-size:11.5px;color:var(--muted);border:1px solid var(--hairline);border-radius:6px;padding:2px 8px;white-space:nowrap;line-height:1.5}
.ls-open{position:absolute;right:0;top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:12.5px;color:var(--link);opacity:0;transition:opacity .15s ease-out;white-space:nowrap}
.ls-open .arr{display:inline-block;transition:transform .25s cubic-bezier(.16,1,.3,1)}
a.ls-row:hover,a.ls-row:focus-visible{
  color:var(--text);
  background:linear-gradient(var(--card),var(--card)) padding-box,
             var(--grad-soft) border-box;
}
a.ls-row:hover .ls-caret,a.ls-row:focus-visible .ls-caret{opacity:1}
a.ls-row:hover .br,a.ls-row:focus-visible .br{display:none}
a.ls-row:hover .sel,a.ls-row:focus-visible .sel{
  display:inline;background:var(--grad-soft);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:500;
}
a.ls-row:hover .ls-lead,a.ls-row:focus-visible .ls-lead{color:var(--text)}
a.ls-row:hover .ls-open,a.ls-row:focus-visible .ls-open{opacity:1}
a.ls-row:hover .ls-pills,a.ls-row:focus-visible .ls-pills{opacity:0}
a.ls-row:hover .ls-open .arr,a.ls-row:focus-visible .ls-open .arr{transform:translateX(4px)}
.ls-group summary{list-style:none;cursor:pointer}
.ls-group summary::-webkit-details-marker{display:none}
.ls-group summary .agent-out{margin-bottom:0}
.ls-group[open] summary .agent-out{margin-bottom:14px}
.ls-toggle{margin-left:14px;color:var(--link)}
.ls-toggle::after{content:"[+] expand"}
.ls-group[open] .ls-toggle::after{content:"[\2212] collapse"}
.ls-group summary:hover .ls-toggle{color:var(--link-hover)}
@media (max-width:860px){
  .ls-row,.ls-row.post{grid-template-columns:22px minmax(0,1fr);gap:4px 12px;padding:12px 10px;align-items:baseline}
  .ls-lead,.ls-main{grid-column:2}
  .ls-main{display:flex;flex-direction:column;align-items:flex-start;gap:3px}
  .ls-title{white-space:normal}
  .ls-desc{white-space:normal;overflow:visible}
  .ls-end{grid-column:2;justify-content:space-between;gap:12px;min-width:0;margin-top:4px}
  .ls-pills{flex-wrap:wrap;justify-content:flex-start}
  .ls-open{position:static;transform:none;flex-shrink:0;margin-left:auto}
  a.ls-row:hover .ls-pills,a.ls-row:focus-visible .ls-pills{opacity:1}
}
@media (max-width:860px) and (hover:none){
  .ls-open{opacity:.85}
}

/* ------ about: one-line heading, bio, tools ------ */
.hero h1.one-line{max-width:none;font-size:clamp(30px,5.2vw,58px)}
@media (min-width:700px){.hero h1.one-line{white-space:nowrap}}
.bio p{margin:0 0 20px;font-size:17px;line-height:1.8;color:var(--muted)}
.bio .bio-lead{font-family:var(--serif);font-optical-sizing:auto;font-size:clamp(22px,2.6vw,28px);line-height:1.45;color:var(--text);letter-spacing:-.01em;margin-bottom:28px}
.bio .bio-sign{font-size:20px}
.tools{display:flex;flex-direction:column;gap:6px}
.tools-row{display:grid;grid-template-columns:130px minmax(0,1fr);gap:16px;align-items:center;padding:8px 0}
.tools-label{font-family:var(--mono);font-size:13px;color:var(--muted)}
.tools-chips{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px 14px}
.tool{
  display:inline-flex;align-items:center;gap:10px;min-width:0;
  font-family:var(--mono);font-size:13px;color:var(--muted);white-space:nowrap;
  transition:color .15s ease-out;
}
.tool .ico{
  width:17px;height:17px;flex-shrink:0;background:var(--muted);opacity:.85;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
  transition:background-color .15s ease-out,opacity .15s ease-out;
}
.tool:hover{color:var(--text)}
.tool:hover .ico{background:var(--brand);opacity:1}
@media (max-width:980px){.tools-chips{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.tools-row{grid-template-columns:1fr;gap:10px}.tools-chips{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ------ buttons as elements ------ */
button.btn{border:0;cursor:pointer}

/* ------ certification panel ------ */
.certs{display:flex;align-items:center;gap:48px;flex-wrap:wrap}
.cert-stat{display:flex;flex-direction:column;gap:10px;min-width:180px}
.stat-num{
  font-family:var(--serif);font-optical-sizing:auto;
  font-size:84px;font-weight:400;line-height:.95;letter-spacing:-.02em;
}
.stat-label{font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;line-height:1.7}
.cert-grid{flex:1;min-width:300px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:980px){.cert-grid{grid-template-columns:1fr}}
.cert-card{
  display:flex;align-items:center;gap:14px;
  border:1px solid var(--hairline);border-radius:14px;
  background:var(--card);padding:16px;color:var(--text);
}
.cert-card:hover{
  color:var(--text);
  border-color:transparent;
  background:linear-gradient(var(--card),var(--card)) padding-box,
             var(--grad-soft) border-box;
}
.cert-card img{width:54px;height:54px;flex-shrink:0}
.cert-card .cert-code{font-family:var(--mono);font-size:12px;color:var(--muted);display:block}
.cert-card strong{display:block;font-size:14.5px;font-weight:600;line-height:1.3;margin:3px 0}
.cert-card .verify{font-family:var(--mono);font-size:11px;color:var(--muted);display:block}
.cert-card:hover .verify{color:var(--link)}

/* ------ sections ------ */
.section{padding-top:96px}
.section-head{display:flex;align-items:baseline;gap:16px;margin:14px 0 26px}
.section-head h2{
  margin:0;font-family:var(--serif);font-optical-sizing:auto;
  font-size:30px;font-weight:500;letter-spacing:-.01em;
}
.section-head .mono{font-size:13px;margin-left:auto}

/* ------ cards ------ */
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media (max-width:900px){.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.grid-3{grid-template-columns:1fr}}
.card{
  background:var(--card);
  border:1px solid var(--hairline);border-radius:14px;
  padding:26px;display:flex;flex-direction:column;gap:12px;
}
.card .tags{font-family:var(--mono);font-size:12px;color:var(--muted)}
.card h3{margin:0;font-size:20px;font-weight:600;letter-spacing:-.01em}
.card p{margin:0;font-size:14.5px;line-height:1.55;color:var(--muted)}
.card .more{font-family:var(--mono);font-size:13px;margin-top:auto}
a.card{color:var(--text);transition:opacity .3s ease-out,transform .25s cubic-bezier(.16,1,.3,1)}
a.card .more{color:var(--link)}
a.card .more .arr{display:inline-block;transition:transform .25s cubic-bezier(.16,1,.3,1)}
a.card:hover{
  color:var(--text);transform:translateY(-3px);border-color:transparent;
  background:linear-gradient(var(--card),var(--card)) padding-box,
             var(--grad-soft) border-box;
}
a.card:hover .more{color:var(--link-hover)}
a.card:hover .more .arr{transform:translateX(4px)}
a.card:active{transform:translateY(-1px)}

/* ------ list rows (writing, archive) ------ */
.rows{display:flex;flex-direction:column}
.row{
  display:flex;align-items:baseline;gap:20px;
  padding:20px 0;border-top:1px solid var(--hairline);
}
.rows .row:last-child{border-bottom:1px solid var(--hairline)}
.row .date{font-family:var(--mono);font-size:13px;color:var(--muted);min-width:100px}
.row .title{font-size:17px;font-weight:500;color:var(--text)}
a.row .title,a.row .date{display:inline-block;transition:transform .25s cubic-bezier(.16,1,.3,1),color .15s ease-out}
a.row:hover .title{color:var(--link);transform:translateX(6px)}
a.row:hover .date{color:var(--text)}
.row .meta{font-family:var(--mono);font-size:12px;color:var(--muted);margin-left:auto;white-space:nowrap}
@media (max-width:640px){
  .row{flex-wrap:wrap;gap:8px 16px}
  .row .meta{margin-left:0;white-space:normal}
}

/* ------ listing groups ------ */
.group{padding-top:56px}

/* ------ contact ------ */
.contact{
  padding-top:120px;padding-bottom:96px;
  display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center;
}
.contact h2{
  margin:0;font-family:var(--serif);font-optical-sizing:auto;
  font-size:clamp(32px,5vw,48px);font-weight:400;letter-spacing:-.015em;
}
.contact .links{display:flex;gap:22px;font-family:var(--mono);font-size:13px;flex-wrap:wrap;justify-content:center}

/* ------ footer ------ */
.footer{border-top:1px solid var(--hairline);margin-top:64px}
.footer-inner{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  padding-top:20px;padding-bottom:20px;
}
.footer img{height:22px;width:auto;display:block}
.footer .copy{font-family:var(--mono);font-size:12px;color:var(--muted);margin-left:auto}

/* ------ article (blog post) ------ */
.article{max-width:1280px;margin:0 auto;padding:72px 24px 0}
@media (max-width:480px){.article{padding-left:16px;padding-right:16px}}
.article figure.shot{margin:30px 0}
.article figure.shot img{display:block;width:100%;height:auto;border:1px solid var(--hairline);border-radius:12px}
.article figure.shot figcaption{font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:10px}
.article .back{font-family:var(--mono);font-size:13px}
.article h1{
  font-family:var(--serif);font-optical-sizing:auto;
  font-size:clamp(32px,5vw,46px);font-weight:400;letter-spacing:-.015em;line-height:1.15;
  margin:22px 0 0;
}
.article .byline{font-family:var(--mono);font-size:13px;color:var(--muted);margin-top:16px}
.article h2{
  font-family:var(--serif);font-optical-sizing:auto;
  font-size:26px;font-weight:500;letter-spacing:-.01em;margin:44px 0 12px;
}
.article h3{font-family:var(--serif);font-optical-sizing:auto;font-size:21px;font-weight:500;margin:34px 0 8px}
.article h4{font-size:16px;font-weight:600;margin:28px 0 6px}
.article p{margin:16px 0;font-size:16.5px;line-height:1.7}
.article pre{background:var(--surface);border:1px solid var(--hairline);border-radius:12px;padding:16px 18px;overflow-x:auto;font-size:13.5px}
.article pre code{background:none;padding:0}
.article img{max-width:100%;border-radius:12px}
.table-wrap{overflow-x:auto;margin:24px 0}
@media (max-width:640px){.table-wrap table{min-width:560px}}
.article figure.shot a{display:block;cursor:zoom-in}
.article table{border-collapse:collapse;width:100%;font-size:14px;line-height:1.5}
.article th{text-align:left;font-family:var(--mono);font-size:12px;color:var(--muted);font-weight:500}
.article th,.article td{border-top:1px solid var(--hairline);padding:10px 14px 10px 0;vertical-align:top}
.article tr:last-child td{border-bottom:1px solid var(--hairline)}
.article ul{margin:16px 0;padding-left:22px}
.article li{margin:8px 0;font-size:16.5px;line-height:1.6}
.article .callout{
  background:var(--surface);border:1px solid var(--hairline);border-radius:12px;
  padding:18px 20px;margin:24px 0;font-size:15.5px;
}
.article code{font-family:var(--mono);font-size:.9em;background:var(--surface);padding:2px 6px;border-radius:5px}

/* ------ detail pages: markdown file view ------ */
.md-doc .back{display:inline-block;margin-bottom:18px}
.md-file{border:1px solid var(--hairline);border-radius:12px;overflow:hidden;background:var(--bg)}
.md-bar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:0 14px 0 0;border-bottom:1px solid var(--hairline);background:var(--card);
  font-family:var(--mono);font-size:12.5px;color:var(--muted);
}
.md-tab{
  display:inline-flex;align-items:center;gap:9px;padding:10px 16px;color:var(--text);
  background:var(--bg);border-right:1px solid var(--hairline);margin-bottom:-1px;
  box-shadow:inset 0 2px 0 0 var(--gl1);
}
.md-ico{font-size:10.5px;font-weight:500;color:var(--muted);border:1px solid var(--hairline);border-radius:4px;padding:0 4px;line-height:1.5}
.md-info{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.md-info .cursor{font-size:12px;margin-left:4px}
.md-body{padding:30px 44px 40px}
@media (max-width:640px){.md-body{padding:22px 18px 30px}.md-info{display:none}}
.md-props{font-family:var(--mono);font-size:13px;line-height:1.9;color:var(--muted);margin-bottom:26px}
.md-props .fence{opacity:.6}
.md-props .k{color:var(--muted)}
.md-props .v{color:var(--text)}
.md-doc h1{margin-top:0}
.md-body h1::before{
  content:"# ";font-family:var(--mono);font-weight:400;color:var(--muted);opacity:.55;letter-spacing:0;
  font-size:.62em;vertical-align:.18em;
}
.md-body .hx{
  font-family:var(--mono);font-weight:400;color:var(--muted);opacity:.55;letter-spacing:0;
  text-decoration:none;font-size:.6em;vertical-align:.12em;margin-right:.45em;transition:opacity .15s,color .15s;
}
.md-body h4 .hx{font-size:.8em;vertical-align:0}
.md-body .hx:hover,.md-body .hx:focus-visible,.md-body :target>.hx{opacity:1;color:var(--link)}
.md-body :not(pre)>code::before,.md-body :not(pre)>code::after{content:"\60";color:var(--muted);opacity:.45}
.md-props .p{color:var(--muted);opacity:.7}
.md-hr{border:0;margin:34px 0;height:auto;text-align:left}
.md-hr::before{content:"---";font-family:var(--mono);font-size:13px;color:var(--muted);opacity:.6}
.task{font-family:var(--mono);font-size:.88em;color:var(--muted)}
.task.done{color:var(--text)}

.md-file{overflow:clip}
.md-wrap.has-toc{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
.md-toc{display:none}
@media (min-width:1180px){

  .md-wrap.has-toc{grid-template-columns:minmax(0,1fr) 210px}
  .md-toc{
    display:block;position:sticky;top:96px;align-self:start;
    font-family:var(--mono);font-size:12.5px;line-height:1.5;
    border-left:1px solid var(--hairline);padding:2px 0 2px 16px;
  }
}
.toc-head{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px}
.md-toc nav{display:flex;flex-direction:column;gap:2px}
.md-toc a{
  display:block;color:var(--muted);text-decoration:none;padding:4px 0 4px 10px;margin-left:-11px;
  border-left:1px solid transparent;transition:color .15s;
}
.md-toc a.t3{padding-left:24px;font-size:12px}
.md-toc a .m{opacity:.5}
.md-toc a:hover{color:var(--text)}
.md-toc a.on{color:var(--text);border-left:2px solid var(--gl1);margin-left:-17px;padding-left:15px}
.md-toc a.t3.on{padding-left:29px}

.md-status{
  position:sticky;bottom:0;z-index:2;display:flex;align-items:center;gap:14px;
  padding:0 14px 0 0;border-top:1px solid var(--hairline);background:var(--card);
  font-family:var(--mono);font-size:11.5px;color:var(--muted);white-space:nowrap;
}
.st-mode{background:var(--text);color:var(--bg);padding:5px 12px;text-transform:uppercase;letter-spacing:.06em;font-weight:500}
.st-sec{color:var(--text);overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
.st-keys kbd{font-family:var(--mono);font-size:10.5px;border:1px solid var(--hairline);border-radius:4px;padding:0 5px}
.st-pct{min-width:4ch;text-align:right;color:var(--text)}
@media (max-width:900px){.st-keys{display:none}}
@media (max-width:640px){.st-meta{display:none}}

.code pre.nums code{counter-reset:ln}
.code pre.nums .ln::before{
  counter-increment:ln;content:counter(ln);display:inline-block;width:2ch;margin-right:18px;
  text-align:right;color:var(--muted);opacity:.45;user-select:none;
}
.tk-com{color:var(--muted);font-style:italic}
.tk-str{color:var(--syn-str)}
.tk-flag,.tk-kw{color:var(--syn-kw)}
.tk-var,.tk-num{color:var(--link)}
.tk-cmd{color:var(--text);font-weight:500}
.md-body ul li::marker{content:"- ";font-family:var(--mono);color:var(--muted)}
.md-body ol li::marker{font-family:var(--mono);color:var(--muted)}
.code{margin:22px 0;border:1px solid var(--hairline);border-radius:10px;overflow:hidden;background:var(--surface)}
.code-bar{display:flex;align-items:center;justify-content:space-between;padding:6px 8px 6px 14px;border-bottom:1px solid var(--hairline);font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.code-bar .copy{font-family:var(--mono);font-size:11.5px;color:var(--muted);background:transparent;border:1px solid var(--hairline);border-radius:6px;padding:2px 9px;cursor:pointer}
.code-bar .copy:hover{color:var(--text);border-color:var(--muted)}
.article .code pre{margin:0;border:0;border-radius:0;background:transparent;padding:14px 16px;font-family:var(--mono);font-size:13px;line-height:1.65}
.article .callout{border-left:3px solid var(--hairline)}
.article .callout p{margin:6px 0 0;font-size:15px}
.callout-title{font-weight:600;font-size:15px}
.callout-kind{font-family:var(--mono);font-size:11px;font-weight:500;text-transform:lowercase;color:var(--muted);border:1px solid var(--hairline);border-radius:5px;padding:1px 7px;margin-right:6px;vertical-align:.1em}
.callout-kind::before{content:"!"}
.article .callout.tip,.article .callout.note{border-left-color:var(--muted)}
.article .callout.important{border-left-color:var(--text)}
.article .callout.warning,.article .callout.caution{border-left-color:var(--accent)}

/* ------ about ------ */

/* ------ scroll reveal ------ */
.reveal{opacity:0;transform:translateY(8px);transition:opacity .3s ease-out,transform .3s ease-out}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .cursor{animation:none}
  .reveal{opacity:1;transform:none;transition:none}
  a.card,a.card:hover,a.card:active,a.row .title,a.row .date,a.card .more .arr,.ls-open .arr{transform:none;transition:none}
  .agent-dot{animation:none}
  html{scroll-behavior:auto}
}

/* status under the outline on wide screens; inline bar stays below 1180px */
.toc-status{
  margin-top:22px;padding-top:14px;border-top:1px solid var(--hairline);
  font-family:var(--mono);font-size:11.5px;color:var(--muted);line-height:1.7;
}
.ts-row{display:flex;align-items:center;justify-content:space-between}
.toc-status .st-mode{padding:2px 9px;border-radius:4px}
.ts-bar{height:2px;background:var(--hairline);margin:12px 0 10px;border-radius:2px;overflow:hidden}
.ts-bar span{display:block;height:100%;width:0;background:var(--gl1);transition:width .15s linear}
.ts-keys{margin-top:8px}
.ts-keys kbd{font-family:var(--mono);font-size:10.5px;border:1px solid var(--hairline);border-radius:4px;padding:0 5px}
@media (min-width:1180px){.has-toc .md-status{display:none}}
@media (min-width:1180px){.md-toc{max-height:calc(100vh - 120px);overflow-y:auto}}

/* locked agent-kit rows: listed, not published */
.ls-row.locked{cursor:default}
.ls-row.locked .ls-title,.ls-row.locked .ls-desc{color:var(--muted)}
.ls-lock{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:12px;color:var(--muted);border:1px solid var(--hairline);border-radius:999px;padding:2px 10px}
.ls-lock svg{flex-shrink:0}
a.ls-row.locked{cursor:pointer}
a.ls-row.locked:hover .ls-lock,a.ls-row.locked:focus-visible .ls-lock{color:var(--text);border-color:var(--muted)}

/* unlock prompt on encrypted pages */
.lock-box{font-family:var(--mono);font-size:14px;margin:8px 0 12px;padding:22px 24px;background:var(--surface);border:1px solid var(--hairline);border-radius:10px}
.lock-line{margin:0;font-size:14px}
.lock-line .prompt{color:var(--muted);margin-right:4px}
.md-body .lock-note{font-family:var(--sans);font-size:15px;color:var(--muted);margin:10px 0 18px}
.lock-form{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.lock-form label{color:var(--muted);font-size:13px}
.lock-form input{flex:1;min-width:180px;font-family:var(--mono);font-size:14px;padding:8px 12px;color:var(--text);background:var(--bg);border:1px solid var(--hairline);border-radius:8px}
.lock-form input:focus{outline:2px solid var(--accent);outline-offset:1px}
.md-body .lock-msg{font-size:12.5px;color:var(--muted);margin:12px 0 0;min-height:1.2em}

/* ------ about: experience as a session (ps + git log) ------ */
.xp-block{margin-top:26px}
.xp-block + .xp-block{margin-top:44px}
.ps{font-family:var(--mono);font-size:13px;border-top:1px solid var(--hairline)}
.ps-row{display:grid;grid-template-columns:62px 74px minmax(0,1fr);gap:16px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--hairline)}
.ps-head{color:var(--muted);font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;padding:8px 0}
.ps-pid{color:var(--muted)}
.ps-state{display:inline-flex;align-items:center;gap:7px;color:var(--text)}
.ps-state::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--text);animation:blink 2.2s ease-in-out infinite}
.ps-state.sleep{color:var(--muted)}
.ps-state.sleep::before{background:transparent;border:1px solid var(--muted);animation:none}
.ps-work{font-family:var(--sans);font-size:15px;line-height:1.55;color:var(--text)}
.ps-work .cmd{font-family:var(--mono);font-size:13px;color:var(--muted);display:block;margin-bottom:2px}
@media (max-width:640px){.ps-row{grid-template-columns:52px minmax(0,1fr)}.ps-head .ps-state-h,.ps-row .ps-state{display:none}}

.gl{position:relative;padding-left:30px}
.gl::before{content:"";position:absolute;left:7px;top:14px;bottom:14px;width:1px;background:var(--hairline)}
.gl-item{position:relative;border-bottom:1px solid var(--hairline)}
.gl-item:first-child{border-top:1px solid var(--hairline)}
.gl-item summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:16px;align-items:baseline;padding:16px 0}
.gl-item summary::-webkit-details-marker{display:none}
.gl-item summary::before{
  content:"";position:absolute;left:-28px;top:21px;width:11px;height:11px;border-radius:50%;
  background:var(--bg);border:1.5px solid var(--muted);box-sizing:border-box;
}
.gl-item.head summary::before{border:0;background:var(--text)}
.gl-item summary:hover::before{border-color:var(--text)}
.gl-hash{font-family:var(--mono);font-size:12.5px;color:var(--muted)}
.gl-title{min-width:0}
.gl-title strong{font-size:16.5px;font-weight:600}
.gl-ref{font-family:var(--mono);font-size:11.5px;font-weight:500;color:var(--text);border:1px solid var(--hairline);border-radius:6px;padding:1px 7px;margin-left:8px;vertical-align:.1em;white-space:nowrap}
.gl-org{display:block;font-family:var(--mono);font-size:12.5px;color:var(--muted);margin-top:3px}
.gl-when{font-family:var(--mono);font-size:12.5px;color:var(--muted);text-align:right;white-space:nowrap}
.gl-when .dur{display:block;opacity:.75}
.gl-toggle{display:block;font-family:var(--mono);font-size:12px;color:var(--link);margin-top:6px}
.gl-toggle::after{content:"[+] " attr(data-n) " changes"}
.gl-item[open] .gl-toggle::after{content:"[\2212] collapse"}
.gl-item summary:hover .gl-toggle{color:var(--link-hover)}
.gl-body{padding:0 0 20px 88px}
.gl-body .diff{list-style:none;margin:0;padding:0}
.gl-body .diff li{position:relative;padding-left:22px;margin:7px 0;font-size:15px;line-height:1.6}
.gl-body .diff li::before{content:"+";position:absolute;left:0;font-family:var(--mono);color:var(--muted);font-weight:500}
.gl-body .gl-stack{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
@media (max-width:720px){
  .gl-item summary{grid-template-columns:minmax(0,1fr);gap:4px}
  .gl-when{text-align:left}.gl-when .dur{display:inline;margin-left:8px}
  .gl-body{padding-left:0}
}
.gl-item summary::before{top:23px}
.gl-item summary{padding-left:6px;padding-right:6px;margin:0 -6px;border-radius:6px}
@media (prefers-reduced-motion: reduce){.gl-item.head summary::before,.ps-state::before{animation:none}}
.ps-sleep summary{list-style:none;cursor:pointer;font-family:var(--mono);font-size:13px;color:var(--muted);padding:12px 0 12px 78px;border-bottom:1px solid var(--hairline)}
.ps-sleep summary::-webkit-details-marker{display:none}
.ps-sleep summary:hover .ls-toggle{color:var(--link-hover)}
.ps-sleep .ls-toggle::after{content:"[+] expand"}
.ps-sleep[open] .ls-toggle::after{content:"[\2212] collapse"}
.ps-sleep .ps{border-top:0}
@media (max-width:640px){.ps-sleep summary{padding-left:68px}}

/* ------ about: sessions journey ------ */
.sx{position:relative;padding-left:30px;border-top:1px solid var(--hairline)}
.sx::before{content:"";position:absolute;left:7px;top:22px;bottom:22px;width:1px;background:var(--hairline)}
.sx-row{position:relative;display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:16px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--hairline)}
.sx-row::before{content:"";position:absolute;left:-28px;top:24px;width:11px;height:11px;border-radius:50%;background:var(--bg);border:1.5px solid var(--muted);box-sizing:border-box}
.sx-row.stage::before{border:0;background:var(--text)}
.sx-when{font-family:var(--mono);font-size:12.5px;color:var(--muted)}
.sx-title{display:block;font-weight:600;font-size:16.5px}
.sx-role{margin-left:10px;vertical-align:.12em;font-weight:400}
.sx-row.stage .sx-role{color:var(--text);border-color:var(--muted)}
.sx-event{display:block;font-family:var(--mono);font-size:12.5px;color:var(--muted);margin-top:3px}
.sx-desc{display:block;font-size:15px;line-height:1.6;color:var(--text);margin-top:8px}
.sx-photos{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.sx-photos a{display:block;cursor:zoom-in;border-radius:8px;overflow:hidden;border:1px solid var(--hairline)}
.sx-photos img{display:block;height:150px;width:auto;object-fit:cover;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.sx-photos a:hover img{transform:scale(1.03)}
.sx-link{font-family:var(--mono);font-size:12.5px;white-space:nowrap}
@media (max-width:720px){
  .sx-row{grid-template-columns:minmax(0,1fr);gap:4px}
  .sx-photos img{height:120px}
}
@media (prefers-reduced-motion: reduce){.sx-row.stage::before{animation:none}.sx-photos img{transition:none}}

/* one readable measure for intro text on every page (Azmir, 4-Oct-2026: full-width lines felt too long) */
:root{--measure:680px}
.hero p,.bio p{max-width:var(--measure)}
.bio p{max-width:780px}
.bio .bio-lead{max-width:900px}

/* italic gradient words: give the slanted glyphs room inside the clipped box, net zero spacing */
em.grad,.grad em,.serif.grad{padding:0 .14em 0 .06em;margin:0 -.14em 0 -.06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* skip link target takes focus without a ring */
main:focus{outline:none}

/* ------ mobile nav: two rows (logo + path, then links), no duplicate CTA ------ */
@media (max-width:560px){
  .nav-inner{gap:10px 12px;padding-top:10px;padding-bottom:6px}
  .nav-path{order:0;flex:1 1 0;flex-basis:auto;padding:0 0 0 12px}
  .nav-links{order:3;flex-basis:100%;justify-content:space-between;margin-left:0;gap:0}
  .nav-links a{padding:12px 0;min-height:44px;display:inline-flex;align-items:center}
  .nav-links a[aria-current="page"]{padding-bottom:12px;margin-bottom:0;background-position:left calc(100% - 8px)}
  .nav-links a.btn-sm{display:none}
}
/* touch targets: 44px on coarse pointers */
@media (pointer:coarse){
  .theme-btn{width:44px;height:44px}
  .code-bar .copy{padding:9px 14px}
}

/* ------ index heroes: one pattern on portfolio, blog, agent-kit ------ */
.hero-index{padding-top:72px}
.hero-index h1{font-size:clamp(34px,4.6vw,52px);max-width:none}
.hero-index p{margin-top:18px}
.section-tight{padding-top:72px}
.section-bio{padding-top:56px}
.contact-label{font-size:13px}

/* ------ phone polish (4-Oct-2026) ------ */
/* agent calls read as one token: List(portfolio/x/), not List ( x ) */
.agent-call{display:block}
.agent-call .agent-dot{display:inline-block;margin-right:10px;vertical-align:middle;position:relative;top:-1px}
/* balanced headings, no orphan words */
h1,h2,h3,.ls-title,.sx-title,.gl-title strong{text-wrap:balance}
p,li,.ls-desc,.sx-desc{text-wrap:pretty}
/* rows never push the page sideways */
.ls-main,.ls-desc{min-width:0}
.ls-meta{white-space:nowrap}
@media (max-width:640px){
  /* the step strip stays one terminal line and scrolls, with a soft fade at the edge */
  .flow{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;white-space:nowrap;gap:10px;font-size:12.5px;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);padding-right:28px}
  .flow::-webkit-scrollbar{display:none}
  .flow > *{flex-shrink:0}
  /* calmer vertical rhythm */
  .hero{padding-top:48px}
  .hero-index{padding-top:40px}
  .section{padding-top:64px}
  .section-tight{padding-top:56px}
  .section-bio{padding-top:36px}
  .group{padding-top:40px}
  .contact{padding-top:80px;padding-bottom:64px}
  .section-head{margin:12px 0 20px}
  /* detail pages: the md frame goes edge to edge, giving text the full width */
  .article{padding-top:32px}
  .md-file{border-left:0;border-right:0;border-radius:0;margin:0 -16px}
  .md-body{padding:20px 16px 28px}
  .md-body ul,.md-body ol{padding-left:18px}
  .md-props{font-size:12px;line-height:1.8;overflow-wrap:anywhere}
  .article h1{font-size:30px}
  .article h2{font-size:22px;margin-top:36px}
  /* readable tap targets */
  .sx-link{display:inline-block;padding:10px 0}
}
@media (max-width:480px){.md-file{margin:0 -16px}}
@media (min-width:481px) and (max-width:640px){.md-file{margin:0 -24px}}
/* phones: long detail paths collapse to …/slug so the nav stays two rows */
@media (max-width:560px){
  .nav-path .pp{display:none}
  .nav-path .pp + strong::before{content:"\2026/";color:var(--muted);font-weight:400}
}

/* ------ brand kit page (agent-kit/awm-design) ------ */
.bk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin:24px 0}
.bk-tile{border:1px solid var(--hairline);border-radius:12px;padding:34px 22px 18px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:22px;min-height:170px}
.bk-tile img{height:52px;width:auto;display:block}
.bk-tile.wave img{height:72px}
.bk-tile .bk-cap{font-family:var(--mono);font-size:11.5px;color:#6E6A61;text-align:center;line-height:1.5}
.bk-tile.light{background:#FAF8F4}
.bk-tile.dark{background:#141311;border-color:#2B2A26}
.bk-tile.dark .bk-cap{color:#97938A}
.bk-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin:24px 0}
.bk-sw{border:1px solid var(--hairline);border-radius:12px;overflow:hidden;background:var(--bg)}
.bk-sw i{display:flex;height:64px}
.bk-sw i b{flex:1}
.bk-sw span{display:block;padding:10px 12px;font-family:var(--mono);font-size:11.5px;line-height:1.6;color:var(--muted)}
.bk-sw span strong{display:block;color:var(--text);font-weight:500;font-size:12.5px}
.bk-grad{height:64px;border-radius:12px;margin:24px 0 8px}
.bk-grad.logo{background:linear-gradient(90deg,#5951D8,#843AB5,#C23584,#E2306C,#FD1D1D)}
.bk-grad.ui{background:linear-gradient(90deg,#6C65DE,#955BC4,#CB4F96,#E65684,#FD4A4A);height:28px;margin-top:10px}
.bk-type{border-top:1px solid var(--hairline);padding:18px 0;display:grid;grid-template-columns:180px minmax(0,1fr);gap:18px;align-items:baseline}
.bk-type:last-child{border-bottom:1px solid var(--hairline)}
.bk-type .bk-cap{font-family:var(--mono);font-size:12px;color:var(--muted)}
.bk-type .s1{font-family:var(--serif);font-size:40px;line-height:1.1;letter-spacing:-.02em}
.bk-type .s2{font-family:var(--sans);font-size:17px;line-height:1.6}
.bk-type .s3{font-family:var(--mono);font-size:14px}
.bk-motifs{display:grid;gap:10px;margin:24px 0;font-family:var(--mono);font-size:13.5px}
.bk-motifs > div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;align-items:center;padding:12px 16px;border:1px solid var(--hairline);border-radius:10px;background:var(--surface)}
.bk-motifs .k{color:var(--muted);font-size:12px}
@media (max-width:640px){.bk-type,.bk-motifs > div{grid-template-columns:1fr;gap:6px}.bk-type .s1{font-size:32px}}


/* ------ awmsh: one shell, three looks (assets/awmsh.js) ------
   .cli--hero   home, blends into the page, plays awmium --stats + whoami, then stays live
   .cli--page   the 404, a full terminal window
   .cli--overlay the nav ❯_ button, a window over any page (bottom sheet on phones) */
.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}
.cli{border:1px solid var(--hairline);border-radius:12px;overflow:clip;background:var(--bg);font-family:var(--mono)}
.cli-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 14px 0 0;
  border-bottom:1px solid var(--hairline);background:var(--card);font-size:12.5px;color:var(--muted)}
.cli-tab{display:inline-flex;align-items:center;gap:9px;padding:10px 16px;color:var(--text);background:var(--bg);
  border-right:1px solid var(--hairline);margin-bottom:-1px;box-shadow:inset 0 2px 0 0 var(--gl1)}
.cli-ico{font-size:10.5px;font-weight:500;color:var(--muted);border:1px solid var(--hairline);border-radius:4px;padding:0 4px;line-height:1.5}
.cli-state{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cli-state .cursor{font-size:12px;margin-left:4px}
.cli-screen{overflow-y:auto;padding:18px 22px 22px;background:var(--surface);font-size:13.5px;line-height:1.75;color:var(--text);cursor:text}
.cli .tl{white-space:pre-wrap;overflow-wrap:anywhere;min-height:1.75em}
.cli .tl.cols{display:grid;grid-template-columns:150px minmax(0,1fr);gap:14px;white-space:normal}
.cli .tl.cols.num{grid-template-columns:36px minmax(0,1fr)}
.cli .tl.stat{grid-template-columns:15ch minmax(0,1fr);gap:28px}
.cli .tl.stat .k{color:var(--muted);font-weight:400}
.cli .tl.stat .v{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted)}
.cli .tl.stat .v.dim{opacity:.7}
.cli .tl.stat .n{font-weight:500;color:var(--text);font-variant-numeric:tabular-nums}
.cli .spin{display:inline-block;width:1.5em;color:var(--text)}
.cli .busy .spin{background:var(--grad-soft);-webkit-background-clip:text;background-clip:text;color:transparent}
.cli .muted{color:var(--muted)}
.cli .err{color:var(--link)}
.cli .ok{color:var(--text)}
.cli .k{color:var(--text);font-weight:500}
.cli .ps1,.cli-ps1{color:var(--muted);white-space:nowrap}
.cli .cmd{color:var(--text)}
.cli .arrow{background:var(--grad-soft);-webkit-background-clip:text;background-clip:text;color:transparent}
.cli .tl-link{color:var(--text);text-decoration:underline;text-decoration-color:var(--hairline);text-underline-offset:3px}
.cli .tl-link:hover{text-decoration-color:var(--text)}
.cli-form{display:flex;align-items:baseline;gap:10px;margin:0}
.cli-form[hidden]{display:none}
.cli-in{flex:1;min-width:0;border:0;outline:none;background:transparent;font:inherit;color:var(--text);caret-color:var(--gl1);padding:0}
.cli-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 14px;border-top:1px solid var(--hairline);
  background:var(--card);font-size:12px;color:var(--muted)}
.cli-chips{flex-wrap:wrap;justify-content:flex-start;gap:8px;padding:12px 14px}
.cli-foot button{font:inherit;font-size:12px;color:var(--muted);background:transparent;border:1px solid var(--hairline);
  border-radius:6px;padding:4px 10px;cursor:pointer}
.cli-foot button:hover{color:var(--text);border-color:var(--muted)}
.cli-foot kbd{font:inherit;color:var(--text)}
.cli-static{padding:22px;font-size:13.5px}

/* hero: same shell, no chrome fills, so it reads as part of the page */
.cli--hero{background:transparent;border-color:color-mix(in srgb,var(--hairline) 70%,transparent)}
.cli--hero .cli-bar,.cli--hero .cli-foot,.cli--hero .cli-tab{background:transparent}
.cli--hero .cli-tab{border-right-color:transparent;box-shadow:inset 0 1px 0 0 var(--gl1);padding-left:18px}
.cli--hero .cli-bar,.cli--hero .cli-foot{border-color:color-mix(in srgb,var(--hairline) 55%,transparent)}
.cli--hero .cli-screen{background:transparent;padding:16px 20px 18px;font-size:13px;line-height:1.8;cursor:default}
.cli--hero .cli-in{cursor:text}
.cli--hero.pending .cli-out{visibility:hidden}

/* page (404) */
.cli-page{padding-top:56px}
.cli--page{max-width:920px;margin:0 auto}
.cli--page .cli-screen{height:min(62vh,560px)}

/* overlay (nav) */
.cli--overlay{position:relative;width:100%;max-width:820px;box-shadow:0 24px 64px rgba(0,0,0,.22);
  opacity:0;transform:translateY(10px);transition:opacity .2s cubic-bezier(.16,1,.3,1),transform .2s cubic-bezier(.16,1,.3,1)}
.term-ov.open .cli--overlay{opacity:1;transform:none}
.cli--overlay .cli-screen{height:min(56vh,500px)}
.cli-x{font:inherit;font-size:11.5px;color:var(--muted);background:transparent;border:1px solid var(--hairline);border-radius:6px;padding:3px 9px;cursor:pointer}
.cli-x:hover{color:var(--text);border-color:var(--muted)}
.term-btn{
  width:30px;height:30px;padding:0 0 1px;gap:1px;
  border:1px solid var(--hairline);border-radius:8px;
  background:transparent;color:var(--muted);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  font-family:var(--mono);font-size:12px;line-height:1;
}
.term-btn:hover{color:var(--text)}
.term-cur{width:5px;height:2px;align-self:flex-end;margin-bottom:9px;background:var(--gl1);
  animation:blink 1.1s ease-in-out infinite,cycle 16s linear infinite}
.term-lock{overflow:hidden}
.term-ov{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-start;justify-content:center;padding:12vh 16px 16px}
.term-ov[hidden]{display:none}
.term-scrim{position:absolute;inset:0;background:color-mix(in srgb,var(--bg) 72%,transparent);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

/* ------ home (v4, 4-Oct-2026; v3 in design/rollback/2026-10-04-home-v3-stats/) ------ */
.hero-home{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:clamp(48px,7vw,112px);align-items:center;padding-top:104px}
.hero-home .flow{margin-bottom:32px}
.hero-home h1{font-size:clamp(40px,5vw,64px);line-height:1.06;max-width:none}
.hero-home h1 .hl{display:block}
.hero-home .lede{max-width:30em;margin-top:30px;line-height:1.65}
.hero-home .hero-ctas{margin-top:40px}
@keyframes hx{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.hx-in{animation:hx .3s cubic-bezier(.16,1,.3,1) both}
.d0{animation-delay:0ms}.d1{animation-delay:80ms}.d2{animation-delay:140ms}.d3{animation-delay:200ms}.d4{animation-delay:260ms}.d5{animation-delay:320ms}
.grid-3 .reveal:nth-child(2){transition-delay:60ms}
.grid-3 .reveal:nth-child(3){transition-delay:120ms}
#work{margin-top:40px}

@media (max-width:960px){
  .hero-home{grid-template-columns:minmax(0,1fr);gap:48px;padding-top:72px}
  .cli--hero{max-width:560px}
}
@media (max-width:640px){
  .hero-home{padding-top:40px;gap:36px}
  .hero-home h1{font-size:38px}
  .hero-home .flow{margin-bottom:24px}
  .hero-home .lede{margin-top:22px}
  .hero-home .hero-ctas{margin-top:30px}
  #work{margin-top:16px}
  .cli-page{padding-top:24px}
  .cli--page,.cli--hero{margin:0 -16px;border-left:0;border-right:0;border-radius:0;max-width:none}
  .cli-screen,.cli--hero .cli-screen{padding:14px 16px;font-size:12.5px}
  .cli--page .cli-screen{height:60vh}
  .cli .tl.cols{grid-template-columns:1fr;gap:0}
  .cli .tl.cols.num{grid-template-columns:28px minmax(0,1fr)}
  .cli .tl.stat{grid-template-columns:14ch minmax(0,1fr);gap:18px}
  .cli-note{display:none}
  .cli-chips button{padding:10px 12px}
  .term-ov{padding:0;align-items:flex-end}
  .cli--overlay{max-width:none;border-left:0;border-right:0;border-bottom:0;border-radius:12px 12px 0 0}
  .cli--overlay .cli-screen{height:62vh}
  .cli--overlay .cli-chips{flex-wrap:nowrap;overflow-x:auto}
  .cli--overlay .cli-chips button{flex:0 0 auto}
}
@media (pointer:coarse){
  .term-btn{width:44px;height:44px}
  .term-cur{margin-bottom:16px}
}
@media (prefers-reduced-motion: reduce){
  .hx-in{animation:none}
  .cli--overlay{transition:none}
  .term-cur{animation:none}
}

/* ------ narrow phones: the two nav buttons move up beside the logo, the links get the full row ------ */
@media (max-width:400px){
  .nav-inner{position:relative}
  .nav-path{padding-right:100px}
  .term-btn,.theme-btn{position:absolute;top:6px;width:44px;height:44px}
  .theme-btn{right:16px}
  .term-btn{right:66px}
  .term-cur{margin-bottom:16px}
}

/* ------ awmsh: spacing between commands, colour on what matters ------ */
.cli--hero .tl.cmdline:not(:first-child){margin-top:14px}
.cli .tl.stat .n,.cli .grad-link{color:var(--link);font-weight:700}
.cli .grad-link{text-decoration-color:color-mix(in srgb,var(--link) 40%,transparent)}
.cli .grad-link:hover{text-decoration-color:var(--link)}
.cli .tl.ok{font-weight:700}
.cli--hero .cursor{font-size:13px;vertical-align:-2px}

/* ------ awmsh: trend, the braille line game ------ */
.cli pre.game{margin:8px 0 4px;font:inherit;font-size:1.12em;line-height:1;white-space:pre;overflow:hidden;user-select:none;-webkit-user-select:none;
  touch-action:none;cursor:pointer;color:var(--muted)}
.cli pre.game i{font-style:normal;display:inline-block;width:1ch;overflow:hidden;vertical-align:top}
.cli .g-l{color:var(--link)}
.cli .g-p{color:var(--text)}
.cli .g-b{color:var(--muted);opacity:.7}
.cli .g-m{color:var(--text);font-weight:700}
.cli .g-s{color:var(--muted)}

/* ------ section bar: one tmux-style status line (site.js builds it; it replaces the keyboard hint line) ------ */
.sec-bar{position:sticky;top:var(--nav-h,64px);z-index:5;background:var(--bg);margin-top:48px}
.sec-line{display:flex;align-items:stretch;gap:0 20px;font-family:var(--mono);font-size:12.5px;
  border-top:1px solid color-mix(in srgb,var(--hairline) 50%,transparent);border-bottom:1px solid color-mix(in srgb,var(--hairline) 50%,transparent)}
.sec-root{display:flex;align-items:center;padding-right:18px;border-right:1px solid color-mix(in srgb,var(--hairline) 50%,transparent);color:var(--text);font-weight:500;white-space:nowrap}
.sec-nav{display:flex;align-items:stretch;gap:0 22px;overflow-x:auto;scrollbar-width:none;white-space:nowrap;min-width:0}
.sec-nav::-webkit-scrollbar{display:none}
.sec-nav a{display:inline-flex;align-items:center;gap:7px;padding:11px 0 11px;color:var(--muted)}
.sec-nav a .n{opacity:.55;font-variant-numeric:tabular-nums}
.sec-nav a:hover{color:var(--text)}
.sec-nav a[aria-current]{color:var(--text);background:var(--grad-soft) no-repeat left bottom/100% 2px}
.sec-nav a[aria-current] .n{opacity:1}
.sec-keys{margin-left:auto;display:flex;align-items:center;gap:6px;color:var(--muted);font-size:11.5px;white-space:nowrap;opacity:.8}
.sec-keys kbd{font:inherit;color:var(--text);background:none;border:0;padding:0;box-shadow:none}
.sec-bar ~ section[id]{scroll-margin-top:calc(var(--nav-h,64px) - 84px + 72px)}
@media (max-width:1100px){ .sec-keys{display:none} }
@media (max-width:640px){
  .sec-bar{margin-top:32px}
  .sec-line{gap:0 14px;font-size:12px}
  .sec-root{padding-right:14px}
  .sec-nav{gap:0 18px}
  .sec-nav.more{-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
  .sec-nav a{padding:13px 0 12px}
  .sec-nav a .n{display:none}
}

/* ------ phone pass (5-Oct-2026): compact chrome, shorter intros, tighter rhythm ------ */
.ph-only{display:none}
.term-btn,.theme-btn{position:relative}
.term-btn::after,.theme-btn::after{content:"";position:absolute;inset:-6px}
@media (max-width:640px){
  .ph-off{display:none}
  .ph-only{display:inline}
  .nav-inner{padding-top:8px;padding-bottom:2px}
  .term-btn,.theme-btn{width:34px;height:34px;border-radius:9px}
  .term-cur{margin-bottom:11px}
  .nav-links a{font-size:13px}
  .hero{padding-top:44px}
  .hero-index{padding-top:40px}
  .hero p{font-size:16.5px;line-height:1.6;margin-top:16px}
  .hero-home h1,.hero-index h1{font-size:36px}
  .flow{flex-wrap:wrap;overflow:visible;white-space:normal;row-gap:4px;gap:4px 9px;
    -webkit-mask-image:none;mask-image:none;margin-bottom:18px}
  .hero-home .flow{margin-bottom:22px}
  .section{padding-top:56px}
  #work{margin-top:0}
  .card{padding:20px 20px 18px}
  .grid-3{gap:14px}
  .sec-bar{margin-top:28px}
  .sec-root{display:none}
  .sec-nav .pre{display:none}
  .sx-photos{gap:8px}
  .sx-photos a{flex:1 1 100%}
  .sx-photos img{width:100%;height:auto;aspect-ratio:16/10;max-height:240px}
  .cert-card{padding:14px}
  .stat-num{font-size:64px}
  .contact{padding-top:72px;padding-bottom:56px}
}
@media (max-width:400px){
  .term-btn,.theme-btn{position:absolute;top:8px;width:34px;height:34px}
  .theme-btn{right:16px}
  .term-btn{right:58px}
  .term-cur{margin-bottom:11px}
  .nav-path{padding-right:84px}
}
@media (pointer:coarse) and (max-width:640px){
  .term-btn,.theme-btn{width:34px;height:34px}
  .term-cur{margin-bottom:11px}
}

/* about bio: phone-only read-more (site.js adds the button) */
.bio-more{display:none}
@media (max-width:640px){
  .bio-clip .bio-more{display:inline-block;font-family:var(--mono);font-size:13px;color:var(--link);background:none;border:0;padding:8px 0;margin:2px 0 0;cursor:pointer}
  .bio-clip:not(.bio-open) .bio-more ~ p{display:none}
  .bio-open .bio-more{order:9}
  .section-bio p{font-size:16.5px;line-height:1.65}
}

/* ------ phone header: logo, path and two borderless icons on one centred line (5-Oct-2026) ------ */
@media (max-width:560px){
  .nav-inner{position:relative;padding-top:12px}
  .brand,.nav-path{height:28px}
  .nav-path{padding-right:76px}
  .term-btn,.theme-btn{position:absolute;top:12px;width:28px;height:28px;padding:0;border:0;border-radius:7px;background:transparent}
  .theme-btn{right:24px}
  .term-btn{right:58px;font-size:13.5px}
  .theme-btn svg{width:17px;height:17px}
  .term-cur{margin-bottom:8px}
  .term-btn::after,.theme-btn::after{inset:-8px}
  .term-btn:focus-visible,.theme-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
}
@media (max-width:480px){
  .theme-btn{right:16px}
  .term-btn{right:50px}
  .nav-path{padding-right:68px}
}