/* Layout: Jaali Ledger. B&W jaali hero; sticky left column (interactive jaali arch, TOC); ledger on the right.
   Architecture = B&W atmosphere (hero, two section bands, lattice texture). Product screenshots = the only colour. */
:root {
  --bg: #F3F1EC;      /* Paper */
  --fg: #0E0E0D;      /* Ink, 17.1:1 */
  --muted: #4A4844;   /* Graphite, 8.1:1 */
  --rule: #D8D4CB;    /* Limestone hairlines */
  --stone: #1F1E1C;   /* Charcoal */
  --light: #F3F1EC;
  --accent: #2E3B5C;  /* Neel, 9.8:1 */
  --frame: #D8D4CB;   /* screenshot border */
  --slot: #E7E4DD;    /* screenshot placeholder fill */
  --on-photo: #F3F1EC;
  --on-photo-muted: #D8D4CB;
  --f-display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --f-body: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "Geist Mono", ui-monospace, Consolas, monospace;
  --f-deva: "Tiro Devanagari Sanskrit", "Nirmala UI", "Mangal", serif;
  --pad: max(16px, 5vw);
  --lattice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='none' stroke='black' stroke-width='1.2'%3E%3Cpolygon points='36,20 31.3,24.7 31.3,31.3 24.7,31.3 20,36 15.3,31.3 8.7,31.3 8.7,24.7 4,20 8.7,15.3 8.7,8.7 15.3,8.7 20,4 24.7,8.7 31.3,8.7 31.3,15.3'/%3E%3Cpath d='M0-6L6 0L0 6L-6 0ZM40-6L46 0L40 6L34 0ZM0 34L6 40L0 46L-6 40ZM40 34L46 40L40 46L34 40Z'/%3E%3C/g%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #0E0E0D; --fg: #F3F1EC; --muted: #A9A59C; --rule: #4A4844; --stone: #1F1E1C; --light: #D8D4CB; --accent: #8FA3D6; --frame: #4A4844; --slot: #1A1918; color-scheme: dark; }
}
:root[data-theme="dark"] { --bg: #0E0E0D; --fg: #F3F1EC; --muted: #A9A59C; --rule: #4A4844; --stone: #1F1E1C; --light: #D8D4CB; --accent: #8FA3D6; --frame: #4A4844; --slot: #1A1918; color-scheme: dark; }

* { box-sizing: border-box; }
html, body { overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 1rem/1.65 var(--f-body); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: underline; text-decoration-color: var(--rule); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .15s, text-decoration-color .15s; }
a:hover { color: var(--accent); text-decoration-color: currentColor; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3, p, ul { margin: 0; }
h1, h3 { font-family: var(--f-display); font-weight: 400; text-wrap: balance; }

/* ROLE: hero background (Chand Baori stepwell, CC BY 4.0) */
.hero { position: relative; min-height: 100vh; display: grid; align-items: end; overflow: hidden; background: #0E0E0D; color: var(--on-photo); }
.hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; animation: settle 2.4s ease-out both; }
.hero::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(14,14,13,.88) 0%, rgba(14,14,13,.75) 45%, rgba(14,14,13,0) 100%),
              linear-gradient(0deg, rgba(14,14,13,.6) 0%, rgba(14,14,13,0) 50%); }
@keyframes settle { from { transform: scale(1); } to { transform: scale(1.05); } }
.hero-text { position: relative; z-index: 1; max-width: 70rem; width: 100%; margin: 0 auto; padding-inline: var(--pad); padding-block: 6rem 4rem; display: grid; gap: 1.25rem; }
.greet { font-family: var(--f-deva); font-size: 1.375rem; color: var(--on-photo-muted); line-height: 1; }
.greet small { font-family: var(--f-mono); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; margin-left: .5rem; vertical-align: middle; }
.hero h1 { font-size: clamp(3.5rem, 11vw, 8rem); line-height: .9; letter-spacing: -.015em; max-width: 9ch; }
.role { font-weight: 500; font-size: 1.125rem; }
.thesis { color: var(--on-photo-muted); max-width: 38ch; font-size: 1.0625rem; }
.now { font-family: var(--f-mono); font-size: .8125rem; }
.now span { color: var(--on-photo-muted); }
.hero a:hover { color: var(--on-photo); text-decoration-color: currentColor; }

/* page grid */
.page { max-width: 70rem; margin: 0 auto; padding-inline: var(--pad); padding-block: 4rem 4rem;
  display: grid; gap: 3rem; grid-template-columns: 1fr; --to-left: var(--pad); }
@media (min-width: 900px) { .page { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: 5rem;
  --to-left: calc((100vw - min(100vw, 70rem)) / 2 + var(--pad) + 25rem); } }

/* left column */
.side { display: grid; gap: 1.5rem; align-content: start; z-index: 1; }
@media (min-width: 900px) { .side { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 3rem); align-self: start; } }
.jaali { width: 100%; aspect-ratio: 4 / 3; max-width: 100%; display: block; border-radius: 999px 999px 4px 4px; background: var(--stone); }
.toc { list-style: none; padding: 0; display: grid; gap: .25rem; font-family: var(--f-mono); font-size: .8125rem; }
.toc a { text-decoration: none; color: var(--muted); display: inline-flex; gap: .75rem; align-items: center; }
.toc a::before { content: ""; width: 1.5rem; height: 1px; background: currentColor; transition: width .2s; }
.toc a:hover, .toc a.on { color: var(--fg); }
.toc a:hover::before, .toc a.on::before { width: 3rem; }
.links { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; font-size: .9375rem; }

/* ledger */
main { display: grid; gap: 5rem; min-width: 0; }
section { display: grid; gap: 1.5rem; scroll-margin-top: 2rem; position: relative; }
.label { font-family: var(--f-mono); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding-bottom: .75rem; border-bottom: 1px solid var(--rule); }
.prose { display: grid; gap: 1rem; max-width: 62ch; }
.prose b { font-weight: 600; }

/* ROLE: texture (jaali lattice geometry, not a photo) */
.textured::before { content: ""; position: absolute; inset: -2rem -1rem; z-index: -1; background: var(--fg); opacity: .045;
  -webkit-mask: var(--lattice) 0 0 / 40px 40px; mask: var(--lattice) 0 0 / 40px 40px; pointer-events: none; }
.textured { isolation: isolate; }

/* ROLE: section transition band (full-bleed, B&W) */
.band { position: relative; width: 100vw; margin-inline-start: calc(-1 * var(--to-left)); height: clamp(16rem, 40vh, 28rem);
  overflow: hidden; background: #0E0E0D; display: grid; align-items: end; z-index: 2; }
.band img { position: absolute; left: 0; top: -10%; width: 100%; height: 120%; object-fit: cover; will-change: transform; }
.band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(14,14,13,.62) 0%, rgba(14,14,13,.1) 60%); }
.band h2 { position: relative; z-index: 1; color: var(--on-photo); font-family: var(--f-display); font-weight: 400; line-height: .9;
  font-size: clamp(3.5rem, 10vw, 7.5rem); padding-inline: var(--pad); padding-block: 0 1.5rem; width: 100%; max-width: 70rem; margin: 0 auto; }
.band h2 small { display: block; font-family: var(--f-mono); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--on-photo-muted); margin-bottom: .75rem; line-height: 1.4; }

/* entries */
.entry { display: grid; gap: .5rem 2rem; grid-template-columns: 1fr; padding-block: 1.5rem 2rem; border-bottom: 1px solid var(--rule); }
.entry:first-of-type { padding-top: 0; }
@media (min-width: 640px) { .entry { grid-template-columns: 8rem minmax(0, 1fr); } }
.entry .k { font-family: var(--f-mono); font-size: .75rem; color: var(--muted); padding-top: .5rem; font-variant-numeric: tabular-nums; line-height: 1.5; }
.entry .k strong { display: block; font-family: var(--f-display); font-weight: 400; font-size: 1.75rem; color: var(--fg); line-height: 1.1; }
.entry .v { display: grid; gap: .5rem; min-width: 0; }
.entry h3 { font-size: 1.75rem; line-height: 1.15; }
.entry h3 a { text-decoration: none; }
.entry h3 a::after { content: " ↗"; font-family: var(--f-body); font-size: .9rem; color: var(--muted); }
.stack { font-family: var(--f-mono); font-size: .75rem; color: var(--muted); }
.entry p { max-width: 62ch; }
.entry .how { color: var(--muted); font-size: .9375rem; }
.work { list-style: none; padding: 0; display: grid; gap: .75rem; margin-top: .5rem; }
.work li { display: grid; gap: .125rem; font-size: .9375rem; }
.work b { font-weight: 600; }
.work span { color: var(--muted); }

/* product cover: the only colour on the page once real screenshots land */
.shot { margin: .75rem 0 0; aspect-ratio: 16 / 10; max-width: 100%; border: 1px solid var(--frame); border-radius: 8px; overflow: hidden;
  background: var(--slot); box-shadow: 0 1px 2px rgba(14,14,13,.06); transition: transform .2s ease-out, box-shadow .2s ease-out; }
.shot:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(14,14,13,.12); }
.shot img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; }
.shot.empty { display: grid; place-content: center; text-align: center; gap: .25rem; }
.shot.empty b { font-family: var(--f-display); font-weight: 400; font-size: 1.375rem; }
.shot.empty span { font-family: var(--f-mono); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

.minis { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.minis div { padding: 1rem 1.5rem 1rem 0; border-bottom: 1px solid var(--rule); display: grid; gap: .125rem; min-width: 0; }
.minis b { font-family: var(--f-display); font-weight: 400; font-size: 1.375rem; }
.minis small { font-family: var(--f-mono); font-size: .6875rem; color: var(--muted); }
.minis span { font-size: .9375rem; color: var(--muted); }

.skills { display: grid; gap: 1rem; margin: 0; }
.skills div { display: grid; gap: .25rem 2rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .skills div { grid-template-columns: 8rem minmax(0, 1fr); } }
.skills dt { font-family: var(--f-mono); font-size: .75rem; color: var(--muted); padding-top: .2rem; text-transform: uppercase; letter-spacing: .08em; }
.skills dd { margin: 0; }

.contact h2.big { font-family: var(--f-display); font-weight: 400; font-size: clamp(2.25rem, 6vw, 3.5rem); line-height: 1; text-wrap: balance; }
.row { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; }
.email { font-family: var(--f-mono); font-size: .9375rem; user-select: all; word-break: break-all; }
.btn { font: 500 .875rem var(--f-body); color: var(--bg); background: var(--fg); border: 0; border-radius: 999px; padding: .5rem 1rem; cursor: pointer; }
.btn:hover { background: var(--accent); }
.foot { font-family: var(--f-mono); font-size: .75rem; color: var(--muted); display: grid; gap: .375rem; padding-top: 2rem; margin-top: 1rem; border-top: 1px solid var(--rule); }
.foot .credits { font-size: .625rem; line-height: 1.6; }
.foot ul { list-style: none; padding: 0; display: grid; gap: .25rem; }
.foot p { max-width: 72ch; }

@media (max-width: 899px) {
  .hero { min-height: 70vh; }
  .band { height: 30vh; min-height: 12rem; }
  .band img { top: 0; height: 100%; transform: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .hero img { animation: none; }
  .band img { top: 0; height: 100%; transform: none !important; }
}