/*
  karimbaz.com styles.

  Alignment rules (keep every page to these):
  1. One inset (--pad) for every outer edge of the sheet. Header, columns,
     kits sections and the note under the sheet all start on that edge.
  2. Main and side columns start on the same line under the header.
  3. Dates, roles and file sizes align right; everything else aligns left.
  4. Spacing scale: 4, 8, 12, 16, 24, 32, 48. Colors only from :root.
*/
@font-face{font-family:"Inter";src:url("/assets/fonts/inter-latin-wght-normal.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url("/assets/fonts/source-serif-4-latin-wght-normal.woff2") format("woff2");font-weight:200 900;font-style:normal;font-display:swap}

:root{
  --page:#ECEEF1; --sheet:#FFFFFF; --side:#F7F8FA;
  --ink:#16191F; --body:#3F4652; --muted:#6B7280; --rule:#E4E7EB; --rule-strong:#C9CED6;
  --care:#2E6B4F; --org:#1F4E8C; --brand:#8E1B1F; --dot:#AEB4BE;
  --pad:48px; --gap:24px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--page);color:var(--ink);font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:15.5px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--brand)}
:focus-visible{outline:3px solid var(--org);outline-offset:2px;border-radius:4px}
img{display:block;max-width:100%}
.serif,h1,h2,.intro{font-family:"Source Serif 4",Georgia,serif}

.sheet{max-width:1040px;margin:56px auto 0;background:var(--sheet);border-radius:10px;box-shadow:0 1px 3px rgba(22,25,31,.06);overflow:hidden}
.stripe{display:grid;grid-template-columns:repeat(3,1fr);height:6px}
.stripe i:nth-child(1){background:var(--care)}.stripe i:nth-child(2){background:var(--org)}.stripe i:nth-child(3){background:var(--brand)}

/* Home header */
.head{display:grid;grid-template-columns:1fr auto;gap:var(--gap);align-items:center;padding:40px var(--pad) 36px;border-bottom:1px solid var(--rule)}
h1{font-weight:600;font-size:44px;line-height:1.05;letter-spacing:-.015em;margin:0}
.head p{margin:10px 0 0;font-size:17px;color:var(--body);max-width:600px}
.head img{width:104px;height:104px;border-radius:50%;object-fit:cover}

.cols{display:grid;grid-template-columns:1fr 300px}
.main{padding:36px var(--pad) 44px}
.side{padding:36px var(--pad) 44px 32px;background:var(--side);border-left:1px solid var(--rule)}
h2{font-weight:600;font-size:20px;letter-spacing:-.005em;margin:0 0 14px}
.blk + .blk{margin-top:36px}
.intro{font-size:18px;line-height:1.65;color:var(--body);margin:0}

/* What I do now */
.now{display:grid;gap:12px}
.now a{display:grid;grid-template-columns:4px 1fr;gap:16px;text-decoration:none;padding:14px 16px 14px 0;border:1px solid var(--rule);border-radius:8px;overflow:hidden;color:var(--ink)}
.now a:hover{border-color:var(--rule-strong);color:var(--ink)}
.now i{display:block;border-radius:0 3px 3px 0}
.now .t{display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.now b{font-weight:600;font-size:16px}
.now span{font-size:13.5px;color:var(--muted);white-space:nowrap}
.now p{margin:2px 0 0;color:var(--body);font-size:14.5px}
.now small{display:block;margin-top:6px;font-size:13.5px;font-weight:500}
.care i{background:var(--care)}.care small{color:var(--care)}
.org i{background:var(--org)}.org small{color:var(--org)}
.b7 i{background:var(--brand)}.b7 small{color:var(--brand)}

/* Experience timeline */
.xp{list-style:none;margin:0;padding:0}
.xp li{position:relative;padding:0 0 22px 28px}
.xp li:last-child{padding-bottom:0}
.xp li::before{content:"";position:absolute;left:0;top:6px;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid var(--dot);box-sizing:border-box}
.xp li:not(:last-child)::after{content:"";position:absolute;left:5px;top:20px;bottom:-2px;border-left:2px solid var(--rule)}
.xp li.cur::before{background:var(--brand);border-color:var(--brand)}
.xp li.big::before{background:var(--org);border-color:var(--org)}
.xp .t{display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.xp b{font-weight:600;font-size:16px}
.xp span{font-size:13.5px;color:var(--muted);white-space:nowrap}
.xp p{margin:2px 0 0;color:var(--body);font-size:14.5px}
.xp li.small b{font-weight:500;font-size:15px}

/* Side column */
.side .it + .it{margin-top:12px}
.side .it b{display:block;font-weight:600;font-size:14.5px}
.side .it span{display:block;font-size:14px;color:var(--body)}
.side ul{list-style:none;margin:0;padding:0}
.side li{font-size:14.5px;padding:8px 0;border-top:1px solid var(--rule)}
.side li:first-child{border-top:0;padding-top:0}
.side .links a{display:flex;justify-content:space-between;align-items:baseline;gap:12px;text-decoration:none}
.side .links a span{color:var(--muted);font-size:13.5px;overflow-wrap:anywhere;text-align:right}

.note{max-width:1040px;margin:0 auto;padding:18px var(--pad) 0;font-size:14px;color:var(--muted)}
.note.fine{padding-top:6px;padding-bottom:56px;font-size:13px}

/* Kits page */
.bar{display:flex;justify-content:space-between;align-items:center;padding:20px var(--pad);border-bottom:1px solid var(--rule);font-size:14.5px}
.bar a{text-decoration:none}
.bar .home{display:flex;align-items:center;gap:12px;font-family:"Source Serif 4",Georgia,serif;font-weight:600;font-size:18px}
.bar .home img{width:40px;height:40px;border-radius:50%;object-fit:cover}
.khead{padding:40px var(--pad) 8px}
.khead h1{font-size:40px}
.khead .lead{font-size:17.5px;color:var(--body);max-width:680px;margin:14px 0 0}
.khead .aside{font-size:14px;color:var(--muted);max-width:680px;margin:14px 0 0}
.ksec{padding:36px var(--pad) 8px}
.ksec.last{padding-bottom:44px}
.ksec .sh{border-top:2px solid var(--rule);padding-top:20px;margin-bottom:24px;max-width:none}
.ksec.org .sh{border-top-color:var(--org)}.ksec.care .sh{border-top-color:var(--care)}.ksec.b7 .sh{border-top-color:var(--brand)}
.ksec .sh h2{margin:0 0 6px}
.ksec .sh p{margin:0;color:var(--body);font-size:15px;max-width:720px}
.muted{color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px var(--gap)}
.kit{display:flex;flex-direction:column;min-width:0}
.kit .cover{display:block;border:1px solid var(--rule);border-radius:4px;overflow:hidden;background:var(--side)}
.kit .cover img{width:100%;height:auto;aspect-ratio:8.5/11;object-fit:cover}
.kit .cover:hover{border-color:var(--rule-strong)}
.kit.land .cover img{aspect-ratio:11/8.5}
.kt{display:flex;flex-direction:column;flex:1;padding-top:12px}
.kit h3{font-size:15.5px;font-weight:600;line-height:1.3;margin:0}
.kit .sub{font-size:13.5px;color:var(--muted);margin-top:2px}
.kit p{font-size:14px;color:var(--body);margin:8px 0 0}
.kit .dl{margin-top:auto;padding-top:10px;font-size:14px;font-weight:600;color:var(--org)}
.kit .dl span{font-weight:400;color:var(--muted)}

@media (max-width:900px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  :root{--pad:24px}
  .sheet{margin:16px 12px 0}
  .head{grid-template-columns:1fr 72px;padding-top:28px;padding-bottom:24px}
  .head img{width:72px;height:72px}
  h1{font-size:34px}
  .khead h1{font-size:32px}
  .cols{grid-template-columns:1fr}
  .side{padding:28px var(--pad) 32px;border-left:0;border-top:1px solid var(--rule)}
  .note{padding:16px calc(var(--pad) + 12px) 0}
  .note.fine{padding-top:6px;padding-bottom:40px}
}
@media (max-width:460px){
  .grid{gap:24px 16px}
}