/* AI for Owners — "modern 2000s-core": the page reads like a plain text document; only the
   functional elements (links, the form, metadata) get styled. One monospace voice (IBM Plex
   Mono), Sidechat palette (Side Stone ground / Side Black ink / Side Blue = the functional accent). */

:root{
  --ink:#0B0B0B;            /* Side Black */
  --muted:#686868;          /* Stone 500 */
  --stone:#F3F3F1;          /* Side Stone — page ground */
  --paper:#FFFFFF;
  --blue:#0052FF;           /* Side Blue — links / the one functional accent */
  --terracotta:#FF6436; --green:#12B76A;   /* lane state colors (used sparingly) */
  --line:rgba(11,11,11,.22);
  --measure:46rem;
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scrollbar-gutter:stable;-webkit-tap-highlight-color:transparent;scroll-padding-top:1rem}

body{
  background:var(--stone);color:var(--ink);
  font-family:"IBM Plex Mono",ui-monospace,"Courier New",monospace;
  font-size:15.5px;line-height:1.75;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-wrap:break-word;
}
.wrap{max-width:var(--measure);margin:0 auto;
  padding-inline:max(24px, env(safe-area-inset-left)) max(24px, env(safe-area-inset-right))}

a{color:var(--blue);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
::selection{background:var(--blue);color:var(--stone)}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* post hero image */
.art .hero{width:100%;height:auto;display:block;border:1px solid var(--line);margin:22px 0 6px}
@media (hover:hover){ a:hover{background:var(--blue);color:var(--stone);text-decoration:none} }

/* header — plain line + dashed rule */
.top{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px 14px;padding:28px 0 14px}
.wordmark{font-weight:600;font-size:16px;letter-spacing:-.01em;color:var(--ink);text-decoration:none}
.wordmark:hover{background:none;color:var(--blue);text-decoration:none}
.nav{font-size:14px}
.nav a{color:var(--ink);text-decoration:none;margin-left:14px;padding-block:.35rem}
@media (hover:hover){ .nav a:hover{color:var(--blue);text-decoration:underline;background:none} }
.nav a:first-child{margin-left:0}
.rule{border:0;border-top:1px dashed var(--line);margin:0}

/* hero (home) */
.hero{padding:46px 0 30px}
.hero h1{font-weight:600;font-size:1.6rem;line-height:1.34;letter-spacing:-.01em;max-width:32ch;text-wrap:balance}
.hero .sub{margin-top:18px;max-width:64ch}
.hero .sub .q{color:var(--muted)}

/* section label */
.sec{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;padding:38px 0 8px}

/* index — directory listing; mono columns align */
.list{display:flex;flex-direction:column}
.row{display:grid;grid-template-columns:2.6ch 1fr auto;gap:0 2ch;padding:14px 0;border-top:1px dashed var(--line);align-items:baseline}
.row:last-child{border-bottom:1px dashed var(--line)}
.row .n{color:var(--muted)}
.row .t{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.row .m{color:var(--muted);font-size:13.5px;white-space:nowrap}
@media (hover:hover){ .row:hover .t{background:var(--blue);color:var(--stone);text-decoration:none} }
@media(max-width:600px){
  .row{grid-template-columns:2.6ch 1fr;gap:3px 2ch}
  .row .m{grid-column:2}
}

/* about (home) */
.about{padding:38px 0}
.about h3{font-weight:600;font-size:1rem;margin-bottom:14px}
.about .who{display:flex;flex-direction:row;gap:22px;align-items:stretch}
.about .who p{margin:0;max-width:none;flex:1;min-width:0}
/* image = left third, stretched to the bio's height (cover-fills the box) */
.about .me{flex:0 0 auto;width:32%;min-width:0;align-self:stretch;overflow:hidden;border:1px solid var(--line)}
.about .me img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:600px){
  .about .who{flex-direction:column;align-items:flex-start;gap:14px}
  .about .me{flex-basis:auto;width:62%;align-self:auto;aspect-ratio:3/2}
}
.about p{max-width:64ch;margin-bottom:14px}
.about p:last-child{margin-bottom:0}

/* article */
.art h1{font-weight:600;font-size:1.7rem;line-height:1.3;letter-spacing:-.01em;margin-top:42px;max-width:30ch;text-wrap:balance}
.dek{color:var(--muted);margin-top:16px;max-width:66ch;text-wrap:pretty}
.meta{margin:26px 0;padding:16px 0;border-top:1px dashed var(--line);border-bottom:1px dashed var(--line);
  display:grid;grid-template-columns:13ch 1fr;gap:7px 0;font-size:14px}
.meta dt{color:var(--muted)}
.meta dd{color:var(--ink)}
.meta .one{font-style:italic}
.body{padding-top:8px}
.body p{margin:0 0 18px;max-width:70ch;text-wrap:pretty}
.body em{font-style:italic}
.body strong{font-weight:600}
.body h2{font-weight:600;font-size:1rem;letter-spacing:-.005em;margin:32px 0 12px;max-width:60ch}
.body ul{list-style:none;margin:0 0 18px;padding:0;max-width:70ch}
.body li{padding-left:2.4ch;position:relative;margin:6px 0}
.body li::before{content:"—";position:absolute;left:0;color:var(--muted)}
.quote{margin:26px 0;padding-left:2ch;border-left:2px solid var(--blue);font-style:italic;color:var(--ink);max-width:62ch}
.body blockquote{margin:26px 0;padding-left:2ch;border-left:2px solid var(--blue);font-style:italic;color:var(--ink);max-width:62ch}
.body blockquote p{margin:0}

.take{margin:34px 0 0;padding-top:16px;border-top:1px solid var(--ink);max-width:66ch}
.take .k{color:var(--muted);text-transform:uppercase;letter-spacing:.12em;font-size:13px}
.take p{margin-top:7px;font-weight:500}
.take strong{font-weight:600}

/* next-post — a functional "box" card (solid border, like the form) */
.nextup{display:block;margin-top:36px;border:1px solid var(--ink);background:var(--paper);padding:15px 18px;max-width:66ch;text-decoration:none}
.nextup .k{display:block;color:var(--muted);font-size:13px;letter-spacing:.04em;margin-bottom:5px}
.nextup .t{display:block;color:var(--blue);font-weight:600;font-size:1.02rem;line-height:1.35;text-decoration:underline;text-underline-offset:2px}
@media (hover:hover){
  .nextup:hover{background:var(--blue);border-color:var(--blue)}
  .nextup:hover .k{color:var(--stone);opacity:.72}
  .nextup:hover .t{color:var(--stone);text-decoration:none}
}

/* subscribe — functional */
.subs{padding:40px 0;border-top:1px dashed var(--line);margin-top:42px}
.subs h3{font-weight:600;font-size:1.05rem}
.subs p{color:var(--muted);margin:8px 0 16px;max-width:58ch}
.form{display:flex;align-items:stretch;max-width:30rem;border:1px solid var(--ink);background:var(--paper)}
.form input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:16px;padding:10px 12px;color:var(--ink)}
.form input:focus{outline:none}
.form input::placeholder{color:var(--muted)}
.form button{font:inherit;font-size:14px;border:0;border-left:1px solid var(--ink);background:var(--ink);color:var(--stone);padding:10px 16px;cursor:pointer;white-space:nowrap}
@media (hover:hover){ .form button:hover{background:var(--blue)} }
.form:focus-within{outline:2px solid var(--blue);outline-offset:2px}
.note{color:var(--muted);font-size:13px;margin-top:10px}

.foot{padding:30px 0 42px;border-top:1px dashed var(--line);color:var(--muted);font-size:13px;margin-top:8px}
.foot a{color:var(--muted)}
.foot a:hover{background:var(--blue);color:var(--stone);text-decoration:none}

@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

.formmsg{margin-top:12px;font-size:14px;max-width:30rem}
.formmsg.ok{color:var(--green)}
.formmsg.err{color:var(--terracotta)}

/* embedded screenshots in post body */
.body img{width:100%;height:auto;display:block;border:1px solid var(--line);margin:26px 0 8px;background:#fff}
.body img+em, .body img+p em{display:block;color:var(--muted);font-size:13px;margin-bottom:22px}