/* ============================================================================
   kmeng.ca — Koorosh Moghadam, P.Eng.
   Palette : cool drafting paper, ink, copper (conductor), teal (instrumentation)
   Type    : IBM Plex Sans Condensed (display) / Sans (body) / Mono (data)
   Signature: animated single-line diagram + copper busbar under the active tab
   ========================================================================= */

:root{
  --paper:#EDF1F3;
  --paper-2:#F6F8F9;
  --ink:#0C1317;
  --muted:#55646D;
  --rule:#C7D1D6;
  --copper:#A8601F;
  --copper-soft:#E5D0BC;
  --live:#0F766E;
  --warn:#8A4B12;

  --maxw:760px;
  --wide:1040px;

  --f-display:"IBM Plex Sans Condensed","IBM Plex Sans",system-ui,sans-serif;
  --f-body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;

  --step-0:1rem;
  --step-1:1.16rem;
  --step-2:1.42rem;
  --step-3:1.85rem;
  --step-4:2.6rem;
}

*,*::before,*::after{box-sizing:border-box}

html{ -webkit-text-size-adjust:100% }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:var(--step-0);
  line-height:1.65;
  /* faint drafting grid — 24px, barely there */
  background-image:
    linear-gradient(to right, rgba(12,19,23,.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(12,19,23,.028) 1px, transparent 1px);
  background-size:24px 24px;
}

a{color:var(--live);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:2px solid var(--copper); outline-offset:2px; border-radius:2px;
}

img{max-width:100%;height:auto;display:block}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.wrap-wide{max-width:var(--wide);margin:0 auto;padding:0 20px}

/* ── Masthead ───────────────────────────────────────────────────────────── */
.masthead{
  border-bottom:1px solid var(--rule);
  background:rgba(237,241,243,.86);
  backdrop-filter:saturate(140%) blur(8px);
  position:sticky;top:0;z-index:50;
}
.masthead-in{
  max-width:var(--wide);margin:0 auto;padding:14px 20px;
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
}

.logo{display:flex;align-items:center;gap:11px;color:var(--ink);text-decoration:none}
.logo:hover{text-decoration:none}
.logo svg{flex:none;display:block}
.logo-name{
  font-family:var(--f-display);
  font-weight:600;font-size:1.24rem;letter-spacing:.01em;line-height:1.1;
}
.logo-sub{
  display:block;font-family:var(--f-mono);font-size:.62rem;font-weight:400;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:2px;
}

.nav{margin-left:auto;display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.nav a{
  font-family:var(--f-display);
  font-weight:500;font-size:1.01rem;letter-spacing:.005em;
  color:var(--ink);padding:7px 11px 9px;position:relative;border-radius:3px;
}
.nav a:hover{background:rgba(168,96,31,.07);text-decoration:none}
/* the busbar: active tab sits on a copper conductor */
.nav a[aria-current="page"]::after{
  content:"";position:absolute;left:8px;right:8px;bottom:1px;height:3px;
  background:var(--copper);border-radius:2px;
}
.nav .contact{color:var(--muted);font-family:var(--f-mono);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero{padding:52px 0 10px}
.hero h1{
  font-family:var(--f-display);
  font-size:var(--step-4);line-height:1.06;font-weight:600;
  margin:0 0 14px;letter-spacing:-.012em;
}
.hero p{color:#26343B;font-size:var(--step-1);margin:0 0 14px;max-width:60ch}
.hero .kicker{
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--copper);margin:0 0 12px;
}

/* Single-line diagram — the signature element */
.sld{
  margin:30px 0 6px;border:1px solid var(--rule);border-radius:6px;
  background:var(--paper-2);padding:14px 10px 6px;overflow:hidden;
}
.sld svg{width:100%;height:auto;display:block}
.sld figcaption{
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);padding:6px 6px 4px;
}
.flow{
  stroke-dasharray:5 7;
  animation:flow 1.5s linear infinite;
}
@keyframes flow{ to{ stroke-dashoffset:-24 } }
@media (prefers-reduced-motion:reduce){
  .flow{animation:none;stroke-dasharray:none}
}

/* ── Sections ───────────────────────────────────────────────────────────── */
.section{padding:44px 0}
.section-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  border-bottom:1px solid var(--rule);padding-bottom:8px;margin-bottom:26px;
}
.section-head h2{
  font-family:var(--f-display);font-size:var(--step-2);font-weight:600;margin:0;letter-spacing:-.005em;
}
.section-head .more{font-family:var(--f-mono);font-size:.76rem;letter-spacing:.06em;white-space:nowrap}

/* ── Post list ──────────────────────────────────────────────────────────── */
.postlist{list-style:none;margin:0;padding:0;display:grid;gap:34px}
.post-item .date{
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
}
.post-item h3{
  font-family:var(--f-display);font-size:var(--step-2);font-weight:600;
  margin:5px 0 8px;line-height:1.22;letter-spacing:-.005em;
}
.post-item h3 a{color:var(--ink)}
.post-item h3 a:hover{color:var(--copper);text-decoration:none}
.post-item p{margin:0 0 10px;color:#26343B}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 9px;padding:0;list-style:none}
.tag{
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.04em;
  color:var(--muted);border:1px solid var(--rule);border-radius:3px;padding:1px 7px;background:var(--paper-2);
}
.readmore{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.04em}

/* ── Cards (tools / experience) ─────────────────────────────────────────── */
.cards{display:grid;gap:18px;grid-template-columns:1fr;list-style:none;margin:0;padding:0}
@media(min-width:720px){ .cards{grid-template-columns:1fr 1fr} }
.card{
  border:1px solid var(--rule);border-radius:6px;background:var(--paper-2);
  padding:20px 20px 18px;display:flex;flex-direction:column;gap:9px;
  transition:border-color .15s ease, transform .15s ease;
}
.card:hover{border-color:var(--copper)}
.card h3{font-family:var(--f-display);font-size:var(--step-1);font-weight:600;margin:0}
.card h3 a{color:var(--ink)}
.card h3 a:hover{color:var(--copper);text-decoration:none}
.card p{margin:0;color:#26343B;font-size:.95rem}
.card .meta{
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
}
.card .status{
  display:inline-block;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;
  border-radius:3px;padding:2px 7px;border:1px solid;
}
.status-live{color:var(--live);border-color:rgba(15,118,110,.4);background:rgba(15,118,110,.07)}
.status-soon{color:var(--warn);border-color:rgba(138,75,18,.35);background:rgba(138,75,18,.06)}
.card-actions{margin-top:auto;padding-top:6px}
.btn{
  display:inline-block;font-family:var(--f-mono);font-size:.78rem;letter-spacing:.05em;
  border:1px solid var(--copper);color:var(--copper);border-radius:4px;padding:7px 13px;background:transparent;
  cursor:pointer;
}
.btn:hover{background:var(--copper);color:var(--paper-2);text-decoration:none}
.btn[disabled]{border-color:var(--rule);color:var(--muted);cursor:not-allowed;background:transparent}

/* ── Article ────────────────────────────────────────────────────────────── */
.article{padding:38px 0 10px}
.article h1{
  font-family:var(--f-display);font-size:var(--step-3);font-weight:600;
  line-height:1.16;margin:6px 0 12px;letter-spacing:-.01em;
}
.article .byline{
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
}
.prose{font-size:1.03rem}
.prose h2{
  font-family:var(--f-display);font-size:var(--step-2);font-weight:600;
  margin:34px 0 10px;letter-spacing:-.005em;
}
.prose h3{font-family:var(--f-display);font-size:var(--step-1);font-weight:600;margin:24px 0 8px}
.prose p{margin:0 0 15px}
.prose ul,.prose ol{margin:0 0 15px;padding-left:22px}
.prose li{margin-bottom:7px}
.prose blockquote{
  margin:20px 0;padding:2px 0 2px 16px;border-left:3px solid var(--copper);
  color:#26343B;font-style:normal;
}
.prose code{font-family:var(--f-mono);font-size:.88em;background:var(--paper-2);border:1px solid var(--rule);border-radius:3px;padding:1px 5px}
.prose table{width:100%;border-collapse:collapse;margin:18px 0;font-size:.9rem}
.prose th,.prose td{border:1px solid var(--rule);padding:8px 10px;text-align:left}
.prose th{background:var(--paper-2);font-family:var(--f-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;font-weight:500}
.prose td.num{font-family:var(--f-mono);text-align:right}
.callout{
  border:1px solid var(--rule);border-left:3px solid var(--live);border-radius:4px;
  background:var(--paper-2);padding:13px 15px;margin:20px 0;font-size:.95rem;
}
.callout strong{color:var(--ink)}

/* ── Subscribe ──────────────────────────────────────────────────────────── */
.subscribe{
  border:1px solid var(--rule);border-radius:6px;background:var(--paper-2);
  padding:20px;margin:38px 0 0;
}
.subscribe h2{font-family:var(--f-display);font-size:var(--step-1);font-weight:600;margin:0 0 5px}
.subscribe p{margin:0 0 13px;color:var(--muted);font-size:.92rem}
.field-row{display:flex;gap:9px;flex-wrap:wrap}
.field-row input{flex:1 1 220px}
input[type=text],input[type=email],textarea{
  font-family:var(--f-body);font-size:.96rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--rule);border-radius:4px;padding:10px 11px;width:100%;
}
textarea{resize:vertical;min-height:96px}
input::placeholder,textarea::placeholder{color:#8B979E}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formnote{font-family:var(--f-mono);font-size:.7rem;color:var(--muted);margin-top:9px;letter-spacing:.03em}

/* ── Comments ───────────────────────────────────────────────────────────── */
.comments{margin:46px 0 0;border-top:1px solid var(--rule);padding-top:26px}
.comments h2{font-family:var(--f-display);font-size:var(--step-2);font-weight:600;margin:0 0 4px}
.comments .count{font-family:var(--f-mono);font-size:.74rem;color:var(--muted);letter-spacing:.06em}

.cform{margin:18px 0 30px;display:grid;gap:10px}
.cform .field-row{gap:10px}
.cform .actions{display:flex;align-items:center;gap:12px}
.cform .privacy{font-family:var(--f-mono);font-size:.68rem;color:var(--muted);letter-spacing:.02em}

.clist{list-style:none;margin:0;padding:0;display:grid;gap:20px}
.comment{border-left:2px solid var(--rule);padding-left:14px}
.comment > .chead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.chead .cname{font-family:var(--f-display);font-weight:600;font-size:1.02rem}
.chead .cwhen{font-family:var(--f-mono);font-size:.7rem;color:var(--muted);letter-spacing:.04em}
.cbody{margin:5px 0 6px;white-space:pre-wrap}
.creply{
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.05em;
  background:none;border:none;color:var(--live);cursor:pointer;padding:0;
}
.creply:hover{text-decoration:underline}
.replies{list-style:none;margin:16px 0 0;padding:0 0 0 18px;display:grid;gap:16px;border-left:1px dashed var(--rule)}
.replies .comment{border-left:2px solid var(--copper-soft)}
.cempty{color:var(--muted);font-size:.95rem}
.cstatus{
  font-family:var(--f-mono);font-size:.76rem;border-radius:4px;padding:9px 12px;margin:10px 0;
  border:1px solid var(--rule);background:var(--paper-2);color:var(--muted);
}
.cstatus.ok{border-color:rgba(15,118,110,.4);color:var(--live);background:rgba(15,118,110,.06)}
.cstatus.bad{border-color:rgba(138,75,18,.4);color:var(--warn);background:rgba(138,75,18,.06)}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.foot{
  margin-top:60px;background:var(--ink);color:#B8C4CA;
  border-top:3px solid var(--copper);
}
.foot-in{max-width:var(--wide);margin:0 auto;padding:30px 20px;
  display:flex;gap:18px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.foot a{color:#DCE4E8}
.foot a:hover{color:#fff}
.foot .links{display:flex;gap:16px;font-family:var(--f-mono);font-size:.76rem;letter-spacing:.06em;text-transform:uppercase}
.foot .copy{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.05em;color:#8A99A1}

/* ── Capability grid ────────────────────────────────────────────────────── */
.caps{display:grid;gap:0;list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.caps li{
  border-bottom:1px solid var(--rule);padding:15px 0;
  display:grid;grid-template-columns:1fr;gap:3px;
}
@media(min-width:640px){
  .caps li{grid-template-columns:190px 1fr;gap:20px;align-items:baseline}
}
.caps .cap-name{
  font-family:var(--f-display);font-weight:600;font-size:1.06rem;color:var(--ink);
}
.caps .cap-desc{color:#26343B;font-size:.96rem;margin:0}

/* ── LinkedIn card (about) ──────────────────────────────────────────────── */
.linkedin{
  display:flex;gap:22px;align-items:center;flex-wrap:wrap;
  border:1px solid var(--rule);border-radius:6px;background:var(--paper-2);
  padding:20px;margin:26px 0;
}
.linkedin img{
  width:190px;border-radius:8px;flex:none;border:1px solid var(--rule);background:#000;
}
.linkedin .li-text{flex:1 1 260px;min-width:220px}
.linkedin h3{font-family:var(--f-display);font-size:var(--step-1);font-weight:600;margin:0 0 6px}
.linkedin p{margin:0 0 12px;color:#26343B;font-size:.95rem}

.lede{font-size:var(--step-1);color:#26343B}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:10px;z-index:99;background:var(--paper-2);padding:9px 13px;border:1px solid var(--copper);border-radius:4px}