/* www.piyu.sh — layout: one 1080px column; home opens on a two-part hero (text | portrait taped to the
   page with a shipping-label of facts under it); inner pages use a "ledger" (year column | entry) for
   timelines and a card grid for ventures. The subject is packaging, so the one flourish is a strip of
   kraft tape — everything else stays quiet paper and ink. */
@font-face { font-family: "Big Shoulders Display"; font-weight: 700; font-style: normal; font-display: swap; src: url(/fonts/big-shoulders-display-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Big Shoulders Display"; font-weight: 800; font-style: normal; font-display: swap; src: url(/fonts/big-shoulders-display-latin-800-normal.woff2) format("woff2"); }
@font-face { font-family: "Public Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url(/fonts/public-sans-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Public Sans"; font-weight: 400; font-style: italic; font-display: swap; src: url(/fonts/public-sans-latin-400-italic.woff2) format("woff2"); }
@font-face { font-family: "Public Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url(/fonts/public-sans-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Public Sans"; font-weight: 700; font-style: normal; font-display: swap; src: url(/fonts/public-sans-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url(/fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url(/fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2"); }

:root {
  --paper: #f6f5f1;
  --card: #fffefb;
  --ink: #17191e;
  --ink-2: #50545d;
  --rule: #dfdcd3;
  --kraft: #95632f;
  --kraft-soft: #ece1cf;
  --kraft-ink: #5c3a14;
  --tape: rgba(176, 128, 72, .78);
  --focus: #95632f;
  --display: "Big Shoulders Display", "Arial Narrow", "Roboto Condensed", sans-serif-condensed, Impact, sans-serif;
  --body: "Public Sans", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --measure: 66ch;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #121316; --card: #1a1c20; --ink: #eceae4; --ink-2: #a7a9b0; --rule: #2d2f35;
    --kraft: #d4a466; --kraft-soft: #2b241b; --kraft-ink: #ecc994; --tape: rgba(196, 150, 92, .7); --focus: #d4a466;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #121316; --card: #1a1c20; --ink: #eceae4; --ink-2: #a7a9b0; --rule: #2d2f35;
  --kraft: #d4a466; --kraft-soft: #2b241b; --kraft-ink: #ecc994; --tape: rgba(196, 150, 92, .7); --focus: #d4a466;
  color-scheme: dark;
}

*, *::before, *::after { 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: 17px; line-height: 1.65; text-rendering: optimizeLegibility; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-color: var(--kraft); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--kraft); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--paper); padding: 8px 12px; z-index: 10; }
.skip:focus { left: 16px; top: 16px; }

.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding-inline: 20px; }

/* Header */
.site-head { border-bottom: 1px solid var(--rule); }
.site-head .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 28px; padding-block: 18px; }
.wordmark { font-family: var(--display); font-weight: 800; font-size: 26px; letter-spacing: .02em; text-transform: uppercase; text-decoration: none; line-height: 1; }
.wordmark span { color: var(--kraft); }
.nav { display: flex; flex-wrap: wrap; gap: 4px 22px; font-size: 15px; }
.nav a { text-decoration: none; color: var(--ink-2); padding-block: 4px; border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--kraft); }

main { padding-block: 0 24px; }

/* Type */
h1, h2, h3 { text-wrap: balance; margin: 0; }
.display { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: .01em; line-height: .95; }
h1.display { font-size: clamp(48px, 9vw, 104px); }
h2.section { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(28px, 4vw, 38px); letter-spacing: .02em; line-height: 1; }
.eyebrow { font-family: var(--mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--kraft); }
.lede { font-size: 19px; max-width: var(--measure); color: var(--ink); }
.muted { color: var(--ink-2); }
p { margin: 0; }
.stack { display: grid; gap: 18px; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.btn { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; text-decoration: none; padding: 11px 18px; border-radius: 3px; border: 1.5px solid var(--ink); }
.btn.solid { background: var(--ink); color: var(--paper); }
.btn.solid:hover { background: var(--kraft); border-color: var(--kraft); color: var(--paper); }
.btn.line:hover { border-color: var(--kraft); }

section.block { padding-block: 56px 8px; display: grid; gap: 26px; }
.page-head { padding-block: 56px 8px; display: grid; gap: 16px; }

/* Home hero */
.hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 48px; align-items: start; padding-block: 56px 16px; }
.hero .copy { display: grid; gap: 22px; align-content: start; padding-top: 8px; }
.hero .sub { font-family: var(--mono); font-size: 14px; color: var(--ink-2); letter-spacing: .02em; }
.portrait { position: relative; margin: 0; }
.portrait img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 2px; background: var(--kraft-soft); }
.portrait .tape { position: absolute; top: -14px; left: 50%; width: 46%; height: 30px; transform: translateX(-50%) rotate(-3deg); background: var(--tape);
  box-shadow: 0 1px 2px rgba(0,0,0,.12); mask: linear-gradient(90deg, transparent 0 2px, #000 2px calc(100% - 2px), transparent calc(100% - 2px)); }
.label { margin-top: 16px; border: 1.5px dashed var(--ink-2); border-radius: 3px; padding: 12px 14px; font-family: var(--mono); font-size: 13px; display: grid; gap: 6px; background: var(--card); }
.label .row { display: grid; grid-template-columns: 16ch minmax(0, 1fr); gap: 10px; }
.label dt { color: var(--ink-2); text-transform: uppercase; letter-spacing: .06em; font-size: 11.5px; padding-top: 1px; }
.label dd { margin: 0; color: var(--ink); }
.label dl { margin: 0; display: grid; gap: 6px; }
.label .code { border-top: 1px solid var(--rule); padding-top: 8px; margin-top: 2px; color: var(--ink-2); font-size: 11.5px; letter-spacing: .14em; }

/* Cards */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.card { background: var(--card); border: 1px solid var(--rule); border-radius: 3px; padding: 22px 22px 20px; display: grid; gap: 10px; align-content: start; }
.card h3 { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 24px; letter-spacing: .02em; line-height: 1.05; }
.card .role { font-family: var(--mono); font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--kraft); }
.card .go { font-weight: 600; font-size: 15px; text-decoration: none; margin-top: 2px; }
.card .go::after { content: " →"; color: var(--kraft); }
.card .soon { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--kraft-ink); background: var(--kraft-soft); padding: 2px 8px; border-radius: 2px; justify-self: start; }

/* Ledger (timelines) */
.ledger { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.ledger li { display: grid; grid-template-columns: 16ch minmax(0, 1fr); gap: 20px; padding-block: 16px; border-bottom: 1px solid var(--rule); }
.ledger .yr { font-family: var(--mono); font-size: 14px; color: var(--kraft); font-variant-numeric: tabular-nums; padding-top: 2px; }
.ledger .what { display: grid; gap: 4px; min-width: 0; }
.ledger .what strong { font-weight: 600; }
.ledger .what p { color: var(--ink-2); max-width: var(--measure); }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ticks li { display: grid; grid-template-columns: 22px minmax(0, 1fr); }
.ticks li::before { content: "■"; color: var(--kraft); font-size: 11px; padding-top: 6px; }

.about-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 48px; align-items: start; }
.about-grid .portrait img { aspect-ratio: 3 / 4; }

/* Ventures past row */
.past { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.past > div { padding: 16px 18px 16px 0; display: grid; gap: 2px; }
.past > div + div { border-left: 1px solid var(--rule); padding-left: 18px; }
.past strong { font-weight: 600; }
.past span { font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); }

/* Events */
.events { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--rule); }
.event { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 28px; padding-block: 28px; border-bottom: 1px solid var(--rule); }
.event.no-photo { grid-template-columns: minmax(0, 1fr); padding-left: 328px; }
.event figure { margin: 0; }
.event img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; background: var(--kraft-soft); }
.event .body { display: grid; gap: 10px; align-content: start; min-width: 0; }
.event .meta { font-family: var(--mono); font-size: 13px; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 4px 14px; }
.event .meta .kind { color: var(--kraft); text-transform: uppercase; letter-spacing: .06em; }
.event h2 { font-family: var(--body); font-weight: 700; font-size: 22px; line-height: 1.25; }
.event p { max-width: var(--measure); }
.event .btn { justify-self: start; padding: 8px 14px; font-size: 14px; }

/* Blog */
.book { background: var(--kraft-soft); color: var(--kraft-ink); border-radius: 3px; padding: 18px 20px; display: grid; gap: 4px; }
.book strong { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 22px; letter-spacing: .02em; }
.posts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.posts li { border-bottom: 1px solid var(--rule); }
.posts a.post-row { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 22px; padding-block: 20px; text-decoration: none; color: inherit; }
.posts a.post-row:hover h3 { color: var(--kraft); }
.posts img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 2px; background: var(--kraft-soft); }
.posts .txt { display: grid; gap: 6px; align-content: start; min-width: 0; }
.posts h3 { font-family: var(--body); font-weight: 700; font-size: 20px; line-height: 1.3; }
.posts .date { font-family: var(--mono); font-size: 13px; color: var(--ink-2); }
.posts p { color: var(--ink-2); font-size: 16px; }
.posts.compact a.post-row { grid-template-columns: minmax(0, 1fr); padding-block: 16px; }

/* Article */
.article { max-width: 720px; display: grid; gap: 22px; padding-block: 48px 8px; }
.article .back { font-size: 15px; text-decoration: none; color: var(--ink-2); }
.article .back::before { content: "← "; color: var(--kraft); }
.article h1 { font-family: var(--body); font-weight: 700; font-size: clamp(30px, 5vw, 44px); line-height: 1.15; letter-spacing: -.01em; }
.article .byline { font-family: var(--mono); font-size: 13px; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 4px 14px; }
.prose { display: grid; gap: 18px; font-size: 18px; }
.prose h2 { font-family: var(--body); font-weight: 700; font-size: 24px; line-height: 1.3; margin-top: 10px; }
.prose h3 { font-family: var(--body); font-weight: 700; font-size: 20px; margin-top: 6px; }
.prose ul, .prose ol { margin: 0; padding-left: 1.3em; display: grid; gap: 8px; }
.prose img { border-radius: 2px; margin-inline: auto; }
.prose blockquote { margin: 0; padding-left: 18px; border-left: 3px solid var(--kraft); color: var(--ink-2); }
.prose a { word-break: break-word; }
.tags { display: flex; flex-wrap: wrap; gap: 6px 10px; font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); }

/* Contact */
.contact-card { display: grid; gap: 14px; max-width: 640px; }
.email-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; background: var(--card); border: 1px solid var(--rule); border-radius: 3px; padding: 16px 18px; }
.email-row .addr { font-family: var(--mono); font-size: 20px; user-select: all; overflow-wrap: anywhere; }
.copy-btn { font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); background: transparent; border: 1.5px solid var(--ink); border-radius: 3px; padding: 6px 12px; cursor: pointer; }
.copy-btn:hover { border-color: var(--kraft); color: var(--kraft); }

/* Closing band */
.band { margin-top: 64px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--card); }
.band .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; padding-block: 30px; }
.band p { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(24px, 3.4vw, 34px); line-height: 1.05; letter-spacing: .02em; max-width: 26ch; }

/* Footer */
.site-foot { padding-block: 34px 44px; font-size: 14px; color: var(--ink-2); }
.site-foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 28px; }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.site-foot a { text-decoration: none; }
.site-foot a:hover { color: var(--ink); text-decoration: underline; }

.notfound { padding-block: 80px 40px; display: grid; gap: 18px; }

@media (max-width: 860px) {
  .hero, .about-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .hero .portrait-col, .about-grid .portrait-col { max-width: 360px; }
  .event { grid-template-columns: 220px minmax(0, 1fr); gap: 20px; }
  .event.no-photo { padding-left: 240px; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .wrap { padding-inline: 16px; }
  .grid-2, .past { grid-template-columns: minmax(0, 1fr); }
  .past > div + div { border-left: 0; border-top: 1px solid var(--rule); padding-left: 0; }
  .ledger li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .event, .event.no-photo { grid-template-columns: minmax(0, 1fr); padding-left: 0; gap: 14px; }
  .posts a.post-row { grid-template-columns: 110px minmax(0, 1fr); gap: 14px; }
  .posts h3 { font-size: 17px; }
  .posts p { display: none; }
  .prose { font-size: 17px; }
  section.block, .page-head, .hero { padding-top: 40px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* Venture logos. Logos sit on a white tile in both themes, because most of them are drawn for white. */
.logo-tile { height: 124px; background: #ffffff; border: 1px solid var(--rule); border-radius: 3px; display: grid; place-items: center; padding: 10px 14px; margin-bottom: 4px; }
.logo-tile img { max-height: 100px; max-width: 100%; width: auto; height: auto; object-fit: contain; }
.logo-tile.mark { background: var(--kraft-soft); border-color: transparent; }
.logo-tile.mark span { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: 22px; color: var(--kraft-ink); text-align: center; line-height: 1; }
.logo-tile.small { height: 84px; padding: 8px 10px; margin-bottom: 8px; justify-self: start; width: 170px; }
.logo-tile.small img { max-height: 66px; }
.logo-tile.small.mark span { font-size: 16px; }

/* Contact: email shown only after the Turnstile check */
[hidden] { display: none !important; }
.email-row { display: block; }
.reveal-step { display: grid; gap: 12px; }
.reveal-step .ts-box { min-height: 65px; }
.revealed { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.small { font-size: 14px; }

/* Story without a picture: a kraft tile in the list instead of a thumbnail */
.thumb-mark { aspect-ratio: 16 / 10; background: var(--kraft-soft); border-radius: 2px; display: grid; place-items: center; }
.thumb-mark span { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: 20px; color: var(--kraft-ink); }

/* ---- 2-Oct-2026: mysterious hero, monogram badges, education logos, Stories timeline ---- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.lede.second { font-size: 17px; }

/* "Terminal" line under the bio: what he is building next stays redacted. */
.term { font-family: var(--mono); font-size: 14px; line-height: 1.7; color: var(--ink-2); background: var(--card); border: 1px solid var(--rule); border-radius: 4px; padding: 10px 14px; justify-self: start; max-width: 100%; overflow-wrap: anywhere; }
.term .prompt { color: var(--kraft); font-weight: 500; }
.term .out { color: var(--ink); }
.term .redact { color: var(--ink); letter-spacing: -1px; }
.term .cursor { display: inline-block; width: 8px; height: 16px; background: var(--kraft); margin-left: 6px; vertical-align: -3px; animation: piyu-blink 1.1s steps(1) infinite; }
@keyframes piyu-blink { 50% { opacity: 0; } }

/* Mini monogram badges on "What I'm working on" */
.badges { display: flex; gap: 8px; }
.badge { width: 54px; height: 54px; border-radius: 12px; background: #ffffff; border: 1px solid var(--rule); display: grid; place-items: center; overflow: hidden; }
.badge img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }
.badge.mono { background: var(--ink); border-color: var(--ink); position: relative; }
.badge.mono span { font-family: var(--display); font-weight: 800; font-size: 24px; letter-spacing: .03em; color: var(--paper); position: relative; z-index: 1; }
.badge.mono::after { content: ""; position: absolute; left: -6px; right: -6px; top: 22px; height: 10px; background: var(--tape); transform: rotate(-8deg); }
.card.work { transition: border-color .2s ease, transform .2s ease; }
.card.work:hover { border-color: var(--kraft); transform: translateY(-2px); }

/* Education logos in the ledger */
.ledger li.has-logo .what { grid-template-columns: 72px minmax(0, 1fr); gap: 14px; align-items: start; }
.edu-logo { width: 72px; height: 56px; background: #ffffff; border: 1px solid var(--rule); border-radius: 6px; display: grid; place-items: center; padding: 5px; }
.edu-logo img { max-width: 100%; max-height: 44px; width: auto; height: auto; object-fit: contain; }
.what-txt { display: grid; gap: 4px; min-width: 0; }
.what-txt p { color: var(--ink-2); max-width: var(--measure); }

/* Stories: one timeline for short notes and full articles */
.feed { list-style: none; margin: 0; padding: 0 0 0 30px; position: relative; display: grid; gap: 22px; max-width: 720px; }
.feed::before { content: ""; position: absolute; left: 9px; top: 8px; bottom: 8px; width: 2px; background: var(--rule); }
.feed-item { position: relative; }
.feed-item::before { content: ""; position: absolute; left: -27px; top: 24px; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); border: 2px solid var(--kraft); }
.feed-item.note::before { background: var(--kraft); }
.feed-card { background: var(--card); border: 1px solid var(--rule); border-radius: 8px; padding: 16px 18px 14px; display: grid; gap: 12px; min-width: 0; }
.feed-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }
.who { display: grid; line-height: 1.3; min-width: 0; }
.who strong { font-size: 15px; font-weight: 600; }
.when { font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); }
.chip { margin-left: auto; flex: none; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; padding: 2px 9px; border-radius: 20px; background: var(--kraft-soft); color: var(--kraft-ink); }
.chip.note { background: transparent; border: 1px solid var(--rule); color: var(--ink-2); }
.feed-card h3 { font-family: var(--body); font-weight: 700; font-size: 21px; line-height: 1.3; }
.feed-card h3 a { text-decoration: none; }
.feed-card h3 a:hover { color: var(--kraft); }
.feed-card .excerpt { color: var(--ink-2); }
.feed-img { display: block; margin: 0; background: var(--kraft-soft); border-radius: 6px; overflow: hidden; }
.feed-img img { display: block; width: auto; max-width: 100%; max-height: 380px; margin: 0 auto; object-fit: contain; }
.feed-link { justify-self: start; font-weight: 600; font-size: 15px; text-decoration: none; }
.feed-link:hover { color: var(--kraft); }
.note-text { font-size: 17px; gap: 12px; }
.note-text.big { font-size: 20px; }
.feed.compact .feed-img, .feed.compact .excerpt { display: none; }
.feed-card.solo { max-width: 680px; }
.note-page { gap: 18px; }

@media (max-width: 640px) {
  .feed { padding-left: 22px; }
  .feed::before { left: 5px; }
  .feed-item::before { left: -22px; }
  .feed-card { padding: 14px; }
  .note-text.big { font-size: 18px; }
  .ledger li.has-logo .what { grid-template-columns: 56px minmax(0, 1fr); }
  .edu-logo { width: 56px; height: 46px; }
}
@media (prefers-reduced-motion: reduce) { .term .cursor { animation: none; } .card.work:hover { transform: none; } }

/* About: opening statement + teaser line */
.statement { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(26px, 3.6vw, 36px); line-height: 1.08; letter-spacing: .02em; color: var(--kraft); max-width: 22ch; }
.term.teaser { font-size: 14.5px; }

/* Ventures: 9 cards sit as a full 3 x 3 grid on wide screens */
@media (min-width: 900px) { .grid-3-wide { grid-template-columns: repeat(3, minmax(0, 1fr)); } }