/* Rajarshi Nandi, personal site: layout and components. One column of text; the hero splits text and
   the product loop on wide screens. Colours, the font and radii come from tokens.css.
   Motion: the product loop only (started by script, never under prefers-reduced-motion). */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.1875rem;          /* 19px */
  line-height: 1.45;
  overflow-wrap: break-word;
  font-variant-numeric: tabular-nums;
}

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

.skip {
  position: absolute; left: -9999px; top: 8px;
  background: var(--ink); color: var(--bg); padding: 8px 12px; border-radius: var(--radius-control);
}
.skip:focus { left: 8px; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.col > * { max-width: var(--measure); }

h1, h2, h3, h4 { line-height: 1.2; margin: 0; font-weight: 700; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.2rem); letter-spacing: -0.01em; margin-bottom: 0.7em; }
h3 { font-size: 1.25rem; margin: 2.2em 0 0.5em; }
h4 { font-size: 1.1875rem; margin: 1.4em 0 0.35em; }
p { margin: 0 0 0.9em; }
p:last-child { margin-bottom: 0; }

/* ---------- hero: name line, the rule, the flagship line, two actions; the loop beside or under ---------- */
.hero { padding: clamp(28px, 6vw, 72px) 0 clamp(40px, 7vw, 80px); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.hero h1 { font-size: 1.1875rem; font-weight: 700; }
.hero h1 .role { display: block; font-weight: 400; color: var(--muted); }
.hero h1 .pronouns { font-weight: 400; color: var(--muted); font-size: 0.9em; }
.rule { font-size: clamp(1.9rem, 4.3vw, 3rem); line-height: 1.12; font-weight: 700; letter-spacing: -0.02em; margin: 0.55em 0 0.5em; max-width: 15ch; }
.lede { font-size: clamp(1.1875rem, 1.6vw, 1.3rem); max-width: 34ch; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.4em; }
.btn {
  display: inline-block; padding: 0.62em 1.1em; border-radius: var(--radius-control);
  background: var(--accent); color: var(--accent-ink); font-weight: 700; text-decoration: none; white-space: nowrap;
}
.btn:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.btn:active { transform: translateY(1px); }
.btn-plain { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--muted); }

/* The recording is 1040x760; the frame shows only its right-hand 480x760, the review drawer, so its text stays legible. */
.loop { margin: 0; max-width: 420px; justify-self: end; }
.loop .frame { position: relative; border-radius: var(--radius-media); overflow: hidden; background: #0b0b0d; box-shadow: 0 0 0 1px var(--frame); aspect-ratio: 480 / 760; }
.loop video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 100% 0; }
.loop figcaption { display: flex; gap: 16px; justify-content: space-between; align-items: baseline; margin-top: 10px; font-size: 0.95rem; color: var(--muted); }
.toggle {
  flex: none; font: inherit; font-size: 0.9rem; color: var(--ink); background: transparent; cursor: pointer;
  border: 0; border-radius: var(--radius-control); box-shadow: inset 0 0 0 1px var(--muted); padding: 3px 10px;
}
.toggle[hidden] { display: none; }

@media (max-width: 880px) {
  .hero .wrap { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  .rule { max-width: 18ch; }
  .loop { justify-self: start; }
  /* Phones: the frame keeps only the lower 462 of the drawer's 760px (reasoning text, risk, history and the
     Approve press), so a 390x844 first screen ends on the person deciding. The video box keeps the drawer's
     480/760 shape and sits on the frame's bottom edge; object-fit and object-position crop the poster the same way. */
  .loop .frame { aspect-ratio: 480 / 462; }
  .loop video { position: absolute; left: 0; bottom: 0; height: auto; aspect-ratio: 480 / 760; }
}
@media (max-width: 374px) {
  /* 360x780: from the risk block down, so the Approve press still lands inside the first screen */
  .loop .frame { aspect-ratio: 480 / 366; }
}

/* ---------- sections ---------- */
main > section { padding: clamp(48px, 7vw, 88px) 0; }
main > section + section { border-top: 1px solid var(--line); }
section { scroll-margin-top: 16px; }

/* AI Accountant: prose column with the diagram set to its right on wide screens */
.case { display: grid; grid-template-columns: minmax(0, var(--measure)) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.case .diagram { margin: 0.4em 0 0; position: sticky; top: 24px; max-width: 420px; }
.case .diagram figcaption { color: var(--muted); font-size: 0.95rem; margin-top: 10px; }
/* One column: the diagram moves up to sit straight after the third paragraph ("... before the sign-off."). */
@media (max-width: 960px) {
  .case { display: flex; flex-direction: column; gap: 0; }
  .case > div { display: contents; }
  .case > div > * { order: 2; }
  .case > div > h2, .case > div > p:nth-of-type(-n+3) { order: 1; }
  .case .diagram { order: 1; position: static; margin: 1.2em 0 0; max-width: 420px; }
}
.ask { margin-top: 2em; font-weight: 700; }

.decisions { list-style: none; margin: 0; padding: 0; }
.decisions li + li { margin-top: 1.1em; }


/* the click-to-load walkthrough */
.yt { display: block; position: relative; margin-top: 0.6em; border-radius: var(--radius-media); overflow: hidden; box-shadow: 0 0 0 1px var(--frame); text-decoration: none; color: #fafbfc; aspect-ratio: 960 / 570; background: #0b0b0d; }
.yt img { display: block; width: 100%; height: 100%; object-fit: cover; }
.yt .play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: var(--accent); color: var(--accent-ink); font-weight: 700; padding: 0.6em 1.1em; border-radius: var(--radius-control); white-space: nowrap;
}
.yt:hover .play { text-decoration: underline; }
.yt-frame { display: block; width: 100%; aspect-ratio: 960 / 570; border: 0; border-radius: var(--radius-media); box-shadow: 0 0 0 1px var(--frame); margin-top: 0.6em; background: #0b0b0d; }
.note { font-size: 0.95rem; color: var(--muted); margin-top: 0.6em; }

/* Closed details blocks: "Checking the work" and the two AI Accountant folds (.more) share one look */
.checks { margin-top: 0.4em; border-top: 1px solid var(--line); }
.more { margin-top: 1.6em; border-top: 1px solid var(--line); }
.checks details, .more details { border-bottom: 1px solid var(--line); }
.checks summary, .more summary { cursor: pointer; padding: 0.7em 0; font-weight: 700; border-radius: var(--radius-control); }
.checks summary::marker, .more summary::marker { color: var(--accent); }
.checks summary:hover, .more summary:hover { color: var(--accent); }
.checks summary:focus-visible, .more summary:focus-visible { outline-offset: 2px; }
.more .inner { padding: 0 0 1em 1.15em; }
.more .inner h4 { margin-top: 1.2em; }
.checks details p { padding: 0 0 0.9em 1.15em; margin: 0; }
.checks details p + p { padding-top: 0; }

/* How I work */
.pattern { list-style: none; margin: 0 0 1.6em; padding: 0; }
.pattern li { margin-bottom: 1.1em; }
.pattern .when { color: var(--muted); }
.stories p { margin-bottom: 1.1em; }

/* Also built: one line each, so the list may run wider than the text measure */
.col > .also { max-width: 50rem; }
.also { list-style: none; margin: 0; padding: 0; }
.also li { padding: 0.7em 0; }
.also li + li { border-top: 1px solid var(--line); }

/* Before this */
.record { list-style: none; margin: 0; padding: 0; }
.record > li { margin-bottom: 1.8em; }
.record h3 { margin: 0 0 0.15em; font-size: 1.1875rem; }
.record .when { color: var(--muted); margin-bottom: 0.5em; }

/* Contact and footer */
.contact .mail { display: inline-block; font-size: clamp(1.35rem, 4.6vw, 2.2rem); font-weight: 700; margin: 0.1em 0 0.6em; letter-spacing: -0.01em; }
footer { border-top: 1px solid var(--line); color: var(--muted); font-size: 0.95rem; }
footer .wrap { padding-top: 20px; padding-bottom: 28px; }

/* the flow diagram (inline SVG; colours follow the theme) */
.flow { width: 100%; height: auto; display: block; }
.flow .node { fill: var(--bg); stroke: var(--line-strong); stroke-width: 1.25; }
.flow .node-person { fill: var(--accent); stroke: var(--accent); }
.flow .t { fill: var(--ink); font: 700 15px var(--font); }
.flow .s { fill: var(--muted); font: 400 13px var(--font); }
.flow .t-person { fill: var(--accent-ink); font: 700 15px var(--font); }
.flow .s-person { fill: var(--accent-ink); font: 400 13px var(--font); }
.flow .edge { stroke: var(--line-strong); stroke-width: 1.5; fill: none; }
.flow .edge-alt { stroke: var(--accent); stroke-width: 1.5; fill: none; stroke-dasharray: 5 4; }
.flow .lab { fill: var(--accent); font: 700 12.5px var(--font); }
.flow .head { fill: var(--line-strong); }
.flow .head-alt { fill: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .btn:active { transform: none; }
}