/* himanshukalra.com — a three-ink Risograph print on warm paper.
   Single visual world by design: no dark mode. Every colour painted explicitly
   so the page holds whatever ground it lands on. */

:root{
  --paper:#f4f0e4; --ink:#17150f;
  --blue:#1d3fb8; --pink:#ff4d8d; --yellow:#ffd23f;
  --dim:#6b6456;
  --display:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --body:Newsreader,Georgia,"Times New Roman",serif;
  --label:"IBM Plex Mono",Menlo,Consolas,monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:18px; line-height:1.58;
  padding:0 20px; padding-block:40px 88px;
  overflow-x:hidden;
}
@media (min-width:760px){ body{font-size:19px; padding:0 44px; padding-block:64px 120px} }

/* paper grain — what makes it read as printed rather than rendered */
body::after{
  content:""; position:fixed; inset:0; z-index:50; pointer-events:none;
  opacity:.34; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.page{max-width:44rem; margin:0 auto; position:relative}

.skip{
  position:absolute; left:-9999px; top:0;
  background:var(--blue); color:var(--paper); padding:10px 16px;
  font-family:var(--label); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
}
.skip:focus{left:0; z-index:60}

a{color:var(--blue); text-decoration:none;
  background-image:linear-gradient(var(--blue),var(--blue));
  background-size:100% 2px; background-repeat:no-repeat; background-position:0 100%;
  padding-bottom:1px;}
a:hover{color:var(--pink); background-image:linear-gradient(var(--pink),var(--pink))}
a:focus-visible{outline:3px solid var(--pink); outline-offset:3px}

/* ════ masthead ════ */
.masthead{position:relative; margin-bottom:72px}
.slug{
  font-family:var(--label); font-size:.7rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--blue);
  margin:0 0 18px; display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center;
}
.slug .dot{width:9px; height:9px; background:var(--pink); mix-blend-mode:multiply; flex:none}

.title{
  position:relative; display:block; margin:0;
  font-family:var(--display); font-weight:800;
  font-size:clamp(3.2rem,17vw,7.5rem); line-height:.82;
  letter-spacing:-.052em; color:var(--ink);
  text-transform:uppercase;
}
.title .ln{display:block; position:relative}
/* misregistration: two more inks land off-plate and multiply over the first */
.title .ln::before,.title .ln::after{
  content:attr(data-t); position:absolute; left:0; top:0;
  mix-blend-mode:multiply; pointer-events:none;
}
.title .ln::before{color:var(--pink); transform:translate(5px,4px)}
.title .ln::after{color:var(--yellow); transform:translate(-4px,-3px)}
.title .ln > span{position:relative; z-index:1}

.tagline{
  font-family:var(--label); font-size:.76rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; line-height:1.9;
  margin:26px 0 0; color:var(--ink);
}
.tagline b{background:var(--yellow); mix-blend-mode:multiply; padding:2px 6px; font-weight:600}

.about{margin:28px 0 0; max-width:36rem; font-size:1.12em; line-height:1.5}
.about::first-letter{
  float:left; font-family:var(--display); font-weight:800;
  font-size:3.3em; line-height:.78; padding:.06em .1em 0 0;
  color:var(--pink); mix-blend-mode:multiply;
}

/* ════ section headings — oversized outlined word over a full-bleed bar ════ */
section{margin-top:80px; position:relative}
.shead{position:relative; margin:0 0 34px; line-height:1}
.shead .bar{
  position:absolute; left:-6vw; right:-6vw; bottom:.14em; height:.42em;
  background:var(--pink); mix-blend-mode:multiply;
}
.shead .word{
  position:relative; display:inline-block;
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:clamp(2.6rem,11vw,4.6rem); letter-spacing:-.045em;
  color:var(--paper);
  -webkit-text-stroke:3px var(--blue);
  paint-order:stroke fill;
}
@media (max-width:520px){ .shead .word{-webkit-text-stroke-width:2px} }

.note{
  font-family:var(--label); font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--dim); margin:26px 0 0; line-height:1.8;
}
.note a{background-size:100% 1px}

/* ════ writing index ════ */
.posts{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0}
.posts li{border-top:3px solid var(--ink); padding:22px 0}
.posts li:last-child{border-bottom:3px solid var(--ink)}
.pdate{
  font-family:var(--label); font-size:.68rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--blue); display:block; margin-bottom:8px;
}
.posts h3{
  font-family:var(--display); font-weight:700; font-size:clamp(1.4rem,4.6vw,2rem);
  line-height:1.06; letter-spacing:-.028em; margin:0; text-wrap:balance;
}
.posts h3 a{color:var(--ink); background:none; padding:0}
.posts h3 a:hover{color:var(--paper); background:var(--blue); box-shadow:0 0 0 4px var(--blue)}
.pex{margin:10px 0 0; color:var(--dim)}

/* ════ built ════ */
.built{list-style:none; margin:0; padding:0}
.built li{
  padding:24px 0; border-top:1.5px solid var(--ink);
  display:grid; grid-template-columns:1fr; gap:6px;
}
.built li:first-child{border-top:3px solid var(--ink)}
.built li:last-child{border-bottom:3px solid var(--ink)}
.built h3{
  font-family:var(--display); font-weight:700; font-size:clamp(1.25rem,3.6vw,1.65rem);
  letter-spacing:-.022em; margin:0; line-height:1.1;
}
.built h3 a{color:var(--ink); background:none; padding:0}
.built h3 a:hover{color:var(--paper); background:var(--pink); box-shadow:0 0 0 4px var(--pink)}
.built p{margin:0; max-width:40rem}
.meta{
  font-family:var(--label); font-size:.66rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--dim); margin-top:6px!important;
}
.meta .yr{background:var(--yellow); mix-blend-mode:multiply; padding:2px 5px; color:var(--ink)}
/* the one in daily use gets the third ink */
.built li.hot{
  background:var(--yellow); mix-blend-mode:multiply;
  padding-left:18px; padding-right:18px; margin-left:-18px; margin-right:-18px;
}

/* ════ now ════ */
.now{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:0}
.now li{padding:14px 0 14px 44px; position:relative; border-top:1.5px solid var(--ink); font-size:1.08em}
.now li:first-child{border-top:0; padding-top:0}
.now li:first-child::before{top:.18em}
.now li::before{
  content:""; position:absolute; left:0; top:1.02em;
  width:24px; height:14px; background:var(--blue); mix-blend-mode:multiply;
}
.now li:nth-child(even)::before{background:var(--pink)}

/* ════ elsewhere ════ */
.where{margin:0; display:grid; grid-template-columns:1fr; gap:0}
.wrow{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 16px;
  padding:13px 0; border-top:1.5px solid var(--ink);
}
.wrow:first-child{border-top:3px solid var(--ink)}
.wrow:last-child{border-bottom:3px solid var(--ink)}
.wk{
  font-family:var(--label); font-size:.68rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--dim); flex:0 0 7.5rem;
}
.wv{min-width:0; overflow-wrap:anywhere; flex:1 1 12rem}
.wv small{color:var(--dim); font-style:italic}

footer{
  margin-top:90px; padding:18px 0 0; border-top:8px solid var(--blue);
  font-family:var(--label); font-size:.68rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--dim);
  display:flex; flex-wrap:wrap; gap:6px 18px; justify-content:space-between;
}

/* ════ a single post page ════ */
.backlink{
  font-family:var(--label); font-size:.68rem; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; display:inline-block; margin-bottom:36px;
  background-size:100% 2px;
}
.post-title{
  font-family:var(--display); font-weight:800;
  font-size:clamp(2.1rem,8vw,3.6rem); line-height:.94; letter-spacing:-.04em;
  margin:0; text-wrap:balance; max-width:22ch;
}
.post-date{
  font-family:var(--label); font-size:.7rem; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--blue); margin:0 0 14px;
}
.post-rule{height:8px; background:var(--pink); mix-blend-mode:multiply; margin:30px 0 34px}

/* verbatim body: LinkedIn line breaks are load-bearing, so paragraphs stay short */
.post-body{max-width:34rem; font-size:1.14em; line-height:1.62}
.post-body p{margin:0 0 1.1em}
.post-body p:last-child{margin-bottom:0}
.post-body .break{height:.6em}

.origin{
  margin-top:44px; padding:18px 0 0; border-top:3px solid var(--ink);
  font-family:var(--label); font-size:.7rem; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--dim); line-height:1.9;
}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}