/* Piyush Bansal — personal archive · shared styles */
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #f4efe4; }
* { box-sizing: border-box; }
img { max-width: 100%; }
a { color: #0000ee; text-decoration: underline; text-underline-offset: 1px; }
a:visited { color: #551a8b; }
a:hover { color: #1a1acc; }
a:visited:hover { color: #6a2aa0; }
::selection { background: #d9d0ba; }

/* ---- responsive ---- */
@media (max-width: 640px) {
  .pb-page { padding: 28px 16px 56px !important; }
  .pb-title { font-size: 32px !important; }
  .pb-h2 { font-size: 24px !important; }
}
@media (max-width: 400px) {
  .pb-title { font-size: 27px !important; }
}

/* ---- project workflow + reel (home page) ----
   Left: the pipeline as stacked cards on a line of flowing dots, each step lighting up in turn.
   Right: the reel at Instagram's 9:16 size. On phones the reel moves under the cards. */
.pb-stats { margin: 6px 0 0; font: 12px/1.5 'Courier New', Courier, monospace; color: #8a8069; letter-spacing: 0.02em; }
/* Pipeline projects: a numbered list on a flowing dotted line, with the reel beside it.
   The list stretches to the reel's height and spreads its steps evenly down it. */
.pb-proj { display: grid; grid-template-columns: minmax(0, 1fr) 236px; grid-template-areas: "flow reel" ". cap"; column-gap: 28px; row-gap: 6px; margin-top: 18px; }
.pb-flow { grid-area: flow; list-style: none; margin: 0; padding: 0 0 0 40px; position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; }
.pb-flow::before {
  content: ""; position: absolute; left: 12px; top: 21px; bottom: 21px; width: 3px;
  background-image: radial-gradient(circle, #8a2f1d 1.3px, transparent 1.7px);
  background-size: 3px 9px; animation: pb-flow 0.9s linear infinite;
}
@keyframes pb-flow { to { background-position: 0 9px; } }
.pb-flow > li { position: relative; }
.pb-flow > li[data-n]::before {
  content: attr(data-n); position: absolute; left: -40px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%;
  background: #f4efe4; border: 1px solid #8a2f1d; color: #8a2f1d;
  font: 700 9.5px/24px 'Courier New', Courier, monospace; text-align: center; text-transform: uppercase;
}
.pb-flow > li.is-hub::before { background: #23201a; border-color: #23201a; color: #f4efe4; }
.pb-flow h4 { margin: 0; font: 700 16px/1.25 'Times New Roman', Times, serif; color: #23201a; }
.pb-flow h4 small { font: 400 10.5px/1 'Courier New', Courier, monospace; color: #8a8069; text-transform: uppercase; letter-spacing: 0.04em; margin-left: 6px; white-space: nowrap; }
.pb-flow p { margin: 1px 0 0; font: 14px/1.4 Georgia, 'Times New Roman', serif; color: #4a463b; text-wrap: pretty; }
.pb-links { margin: 12px 0 0; font-size: 17px; line-height: 1.5; }
.pb-reel-frame { grid-area: reel; align-self: start; aspect-ratio: 9 / 16; width: 100%; background: #23201a; border: 1px solid #c8bfa9; overflow: hidden; }
.pb-reel-frame video, .pb-reel-frame iframe { display: block; width: 100%; height: 100%; border: 0; object-fit: cover; background: #23201a; }
.pb-reel-cap { grid-area: cap; margin: 0; font: 11px/1.4 'Courier New', Courier, monospace; color: #8a8069; }
@media (max-width: 640px) {
  .pb-proj { grid-template-columns: minmax(0, 1fr); grid-template-areas: "flow" "reel" "cap"; }
  .pb-flow { margin-bottom: 14px; }
  .pb-reel-frame, .pb-reel-cap { width: 100%; max-width: 280px; justify-self: center; }
}
@media (prefers-reduced-motion: reduce) { .pb-flow::before { animation: none; } }

/* App project: three phone screens in a row */
.pb-shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.pb-shot { margin: 0; display: grid; gap: 6px; align-content: start; }
.pb-shot a { display: block; }
.pb-shot img { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border: 1px solid #c8bfa9; background: #23201a; }
.pb-shot a:focus-visible { outline: 2px solid #8a2f1d; outline-offset: 3px; }
.pb-shot figcaption { font: 11px/1.4 'Courier New', Courier, monospace; color: #8a8069; }
@media (max-width: 420px) { .pb-shots { gap: 8px; } .pb-shot figcaption { font-size: 10px; } }

/* ---- home: Work strip (company cards) and Off the Clock strip (photo tiles) ---- */
.pb-co { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.pb-co-card { display: grid; gap: 5px; align-content: start; padding: 14px 16px 15px; background: #fbf8f0; border: 1px solid #c8bfa9; text-decoration: none; color: inherit; }
.pb-co-card:hover { border-color: #8a2f1d; }
.pb-co-card:focus-visible, .pb-otc-card:focus-visible { outline: 2px solid #8a2f1d; outline-offset: 3px; }
.pb-co-name { font: 700 24px/1.1 'Times New Roman', Times, serif; color: #23201a; }
.pb-co-role { font: 11px/1.3 'Courier New', Courier, monospace; color: #8a2f1d; text-transform: uppercase; letter-spacing: 0.06em; }
.pb-co-meta { font: 14.5px/1.5 Georgia, 'Times New Roman', serif; color: #4a463b; text-wrap: pretty; }
.pb-otc { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pb-otc-card { display: grid; gap: 3px; align-content: start; text-decoration: none; color: inherit; }
.pb-otc-card retro-img { margin-bottom: 4px; }
.pb-otc-card:hover .pb-otc-title { text-decoration: underline; text-underline-offset: 2px; }
.pb-otc-title { font: 700 15.5px/1.25 'Times New Roman', Times, serif; color: #23201a; }
.pb-otc-meta { font: 11.5px/1.35 'Courier New', Courier, monospace; color: #8a8069; }
@media (max-width: 640px) { .pb-otc { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pb-co-logo { display: block; height: 52px; margin-bottom: 8px; }
.pb-co-logo img { display: block; height: 52px; width: auto; max-width: 100%; object-fit: contain; border-radius: 10px; }

/* ---- "Get this workflow" button under each pipeline project ---- */
p.pb-links:has(.pb-cta) { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
a.pb-cta, a.pb-cta:visited { display: inline-block; font: 700 13px/1 'Courier New', Courier, monospace; text-transform: uppercase; letter-spacing: 0.07em;
  color: #f4efe4; background: #23201a; border: 1px solid #23201a; padding: 12px 16px; text-decoration: none; }
a.pb-cta:hover, a.pb-cta:visited:hover { background: #8a2f1d; border-color: #8a2f1d; color: #f4efe4; }
a.pb-cta:focus-visible { outline: 2px solid #8a2f1d; outline-offset: 3px; }