styles.css

/* ============================================================
   tanmayhinge.com — "the index tells the truth"
   Five colours. Three type roles. Four sizes. 8px rhythm.
   ============================================================ */

:root {
  color-scheme: light;

  --bg:     #EAEDF2;   /* cool plotter paper */
  --ink:    #141A24;   /* blue-black: text + spectrum trace */
  --muted:  #5C6672;   /* slate: tags, years, captions, secondary */
  --accent: #2136D4;   /* ultramarine: reserved for reconstructed peaks in the figures */
  /* the link highlight: hover colour. Re-tuned per mode — the dark-ground
     #ff7936 only reaches 2.2:1 on this background, and it is the hover state
     of every link on the site, so it has to clear 4.5:1 here. */
  --hot:    #BF360C;

  /* derived, not new colours */
  --hair: color-mix(in srgb, var(--ink) 12%, transparent);
  --tint: color-mix(in srgb, var(--ink) 4%, transparent);

  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --display: 'Fraunces', Georgia, serif;
  --brand: 'Girassol', Georgia, serif;   /* the name, in the navbar, nowhere else */
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* four sizes, nothing between */
  --t-display: clamp(2.3rem, 1.4rem + 3.6vw, 3.1rem);
  --t-body: 1.0625rem;
  --t-small: 0.8125rem;
  --t-micro: 0.6875rem;

  --u: 8px;   /* spacing unit; every gap is n*u */
  --rail: 170px;   /* left column: photo, section labels, dates */
}

/* ---- dark: the same five colours, inverted ----
   Paper goes to night, ink to light, the ultramarine lifts so it survives a
   dark ground, and --hot returns to the brighter orange that only works
   against night. --hair, --tint, the chart marks and the spectrum mask are all
   derived from these, so they follow without further work.

   Dark is reached only by asking for it. The OS preference is deliberately not
   consulted: every visitor starts on paper, and the moon in the corner is the
   one way across. That is why there is no prefers-color-scheme block here. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:     #10141A;
  --ink:    #E6E9EF;
  --muted:  #8A94A2;
  --accent: #7F8FFF;
  --hot:    #ff7936;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* Always reserve the scrollbar gutter. Without this, short pages have no
     scrollbar and long ones do, so the centred column jumps sideways by half
     the scrollbar width every time you change page. */
  scrollbar-gutter: stable;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.container {
  max-width: 860px;
  margin: 0 auto;
  padding: calc(4 * var(--u)) calc(3 * var(--u)) calc(8 * var(--u));
}

/* The homepage runs tighter than the rest of the site: the hero photo is tall,
   and this buys back the vertical space that keeps Research in view on open.
   Scoped to .home so no other page moves. */
.home {
  --col-w: 90%;
  max-width: 980px;   /* the homepage is a list, not running text, so it can run wider than an article */
  padding-top: calc(3 * var(--u));
}
.home .topnav { margin-bottom: calc(3.5 * var(--u)); }
.home .index {
  width: var(--col-w);
  margin-inline: auto;
  margin-top: calc(1 * var(--u));
}
.home .sec { padding-top: calc(3 * var(--u)); }

/* Article pages: same width as the homepage; body copy fills it, justified */
.reading .prose,
.reading .dek,
.reading .report p,
.reading .report li,
.reading .report ul,
.reading figcaption,
.reading .fig-two-caption { max-width: none; }
.reading .report p { text-align: justify; hyphens: auto; }

/* ---- links: the highlight is a colour change, not an underline ----
   Nav, footer and index rows carry no rule at all: they sit alone or in a list,
   so their position already marks them as links. Body copy is the exception —
   a link mid-sentence needs something other than colour to be findable, so
   prose links get a hairline (see .report below). */
a {
  color: var(--ink);
  text-decoration: none;
  transition: color .15s ease;
}
a:hover { color: var(--hot); }
a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 2px;
}

/* first thing in the tab order, revealed only when focused */
.skip {
  position: absolute;
  left: calc(3 * var(--u));
  top: calc(-6 * var(--u));
  z-index: 70;
  font-family: var(--mono);
  font-size: var(--t-small);
  color: var(--ink);
  background: var(--bg);
  padding: var(--u) calc(1.5 * var(--u));
  border: 1px solid var(--hair);
  border-radius: 3px;
  transition: top .15s ease;
}
.skip:focus { top: calc(1 * var(--u)); }

/* the homepage h1: the brand can't carry it, since the nav is shared verbatim */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}


/* ============================================================
   Top nav
   ============================================================ */
/* a centred masthead: the name, then the links beneath it */
.topnav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(2 * var(--u));   /* between the name and the links below it */
  font-family: var(--mono);
  font-size: var(--t-small);
  /* full-bleed to the content-column edges so it reads as a bar */
  margin: 0 calc(-3 * var(--u)) calc(6 * var(--u));
  padding: calc(2 * var(--u)) calc(3 * var(--u));
  background: var(--bg);
  border-bottom: 1px solid var(--hair);
}
.topnav a { text-decoration: none; color: var(--muted); }
.topnav a:hover { color: var(--hot); }
/* The page you are on. build.py stamps aria-current on the matching link, so the
   state lives in the markup and this is only its colour. It reads as the hover
   colour held down, which is the point: you are already there. */
.topnav a[aria-current="page"] { color: var(--hot); }
/* Girassol ships one weight (400), so size and tracking do the work
   of making the name hold the bar. */
.topnav .brand {
  font-family: var(--brand);
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--ink);
  /* on the brand itself, not the h1 wrapper: the wrapper only exists on the
     homepage, and leaving the reset there made the nav taller on every other page */
  line-height: 1;
}
.topnav .navlinks {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: baseline;
  gap: calc(1 * var(--u)) calc(3 * var(--u));
}

/* the one button on the site: reads as a nav link, not a control.
   Fixed to the page's top-right corner, outside the centred column, and above
   the sticky bar (z-index 50) so it stays reachable while scrolling. */
.theme-toggle {
  position: fixed;
  top: calc(2 * var(--u));
  right: calc(3 * var(--u));
  z-index: 60;
  display: block;
  line-height: 0;          /* the button is the icon; no text box around it */
  color: var(--muted);
  background: none;
  border: 0;
  padding: var(--u);       /* invisible, but gives the tap target room */
  margin: calc(-1 * var(--u));   /* ...without moving the icon off the corner */
  cursor: pointer;
}
.theme-toggle .glyph {
  display: block;
  width: 26px;
  height: 26px;
}
.theme-toggle:hover { color: var(--hot); }
.theme-toggle:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 2px;
}


/* ============================================================
   Home hero
   ============================================================ */


/* The hero stacks: photo first, then the lead paragraph under it.
   --col-w (set on .home) drives photo, hero text and the index alike, so the
   whole homepage column shares one edge. */
.hero {
  display: block;
  margin-bottom: calc(3.5 * var(--u));
}
.hero .main > :last-child { margin-bottom: 0; }

/* No object-fit and no fixed height: the photo runs at its natural 1:1
   so the whole frame is visible, sized as a share of the column. */
.headshot {
  display: block;
  width: calc(var(--col-w) * 0.45);   /* under half the text column it sits above */
  height: auto;
  margin-inline: auto;
  margin-bottom: calc(3 * var(--u));   /* breathing room before the lead paragraph */
  border-radius: 8px;
  border: 1px solid var(--hair);
}

/* text column is the photo's width, so their edges line up exactly */
.hero .main {
  width: var(--col-w);
  max-width: none;
  margin-inline: auto;
}
.hero p {
  max-width: none;
  margin-bottom: calc(3 * var(--u));
  text-align: justify;
  hyphens: auto;
}

/* ============================================================
   Index (the truth table)
   ============================================================ */
.index { margin-top: calc(2 * var(--u)); }

.sec { padding-top: calc(5 * var(--u)); }
.sec + .sec { border-top: 1px solid var(--hair); }   /* the ONE hairline, between sections */

.labelline {
  display: grid;
  grid-template-columns: var(--rail) 1fr;
  column-gap: calc(5 * var(--u));
  margin-bottom: calc(1 * var(--u));
}
/* .idx-label and .row-title are real h2/h3 elements so the index has an outline
   a crawler can read. Both reset the heading defaults to render as before. */
.idx-label {
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 700;          /* the section title carries the weight */
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);         /* darker than the entries beneath it, not lighter */
}

/* a row is a whole-row link: name on the left, year pinned right */
.row {
  display: grid;
  grid-template-columns: var(--rail) 1fr auto;
  column-gap: calc(5 * var(--u));
  align-items: baseline;
  padding: calc(1.5 * var(--u)) 0;
  text-decoration: none;
  color: var(--ink);
}
/* the index rows: just a name and a year, sharing the label's left edge */
.row.minimal { grid-template-columns: 1fr auto; }
.row:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 3px; }

/* the right-hand metadata column: a year on the index, an author on the reading list */
.row-year,
.row-by   { font-family: var(--mono); font-size: var(--t-small); color: var(--muted); }

.row-title {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-size: var(--t-body);  /* the body size; the section label above carries the weight */
  font-weight: 400;          /* list entries sit lighter than their section title */
  line-height: 1.15;
  transition: color .15s ease;
}
.row:hover .row-title,
.row:focus-visible .row-title { color: var(--hot); }

/* rows that aren't links */
.row.static { cursor: default; }

/* ============================================================
   Footer
   ============================================================ */
.foot {
  margin-top: calc(8 * var(--u));
  padding-top: calc(3 * var(--u));
  border-top: 1px solid var(--hair);
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: calc(2 * var(--u));
  flex-wrap: wrap;
}
/* rel="me" anchors: the identity graph needs real links, not just JSON-LD */
.foot a { color: var(--muted); }
.foot a:hover { color: var(--hot); }
.foot-links { display: flex; gap: calc(1.5 * var(--u)); flex-wrap: wrap; }

/* ============================================================
   Project page template
   ============================================================ */
.kicker {
  text-align: center;
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: calc(2 * var(--u));
}
.ptitle {
  text-align: center;
  font-family: var(--display);
  font-optical-sizing: auto;
  font-size: var(--t-display);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.dek {
  font-family: var(--serif);
  font-size: 1.2rem;
  line-height: 1.45;
  color: var(--ink);
  max-width: 60ch;
  margin-top: calc(2 * var(--u));
  /* set as an abstract under the centred title: justified like the body copy */
  text-align: justify;
  hyphens: auto;
}

/* Link to a paper's PDF, sat under the title. Outlined in --hot at rest and filled
   with it on highlight; --bg for the label there, which clears 4.8:1 on the light
   ground and 7.1:1 on the dark one. */
.paperlink {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(1.5 * var(--u));
  margin-top: calc(3 * var(--u));
}
.paperlink a {
  display: inline-flex;
  align-items: center;
  gap: calc(1 * var(--u));
  font-family: var(--mono);
  font-size: var(--t-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--hot);
  border-radius: 3px;
  padding: calc(1.25 * var(--u)) calc(2.5 * var(--u));
  transition: color .15s ease, background-color .15s ease;
}
.paperlink a:hover,
.paperlink a:focus-visible { background: var(--hot); color: var(--bg); }
.paperlink a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.paperlink .ghmark { width: 1.15em; height: 1.15em; flex: none; }

.meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: calc(1 * var(--u)) calc(3 * var(--u));
  font-family: var(--mono);
  font-size: var(--t-small);
  margin-top: calc(4 * var(--u));
  padding-top: calc(3 * var(--u));
  border-top: 1px solid var(--hair);
}
.meta dt { color: var(--muted); letter-spacing: 0.04em; }


.report { margin-top: calc(5 * var(--u)); }

.h-label {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  margin-top: calc(6 * var(--u));
  margin-bottom: calc(2 * var(--u));
}
.report p { margin-bottom: calc(3 * var(--u)); }
.report ul { margin: 0 0 calc(3 * var(--u)); padding-left: calc(2.5 * var(--u)); }
.report li { margin-bottom: calc(1 * var(--u)); color: var(--ink); }
.report p code, .report li code {
  font-family: var(--mono);
  font-size: 0.85em;
  background: var(--tint);
  padding: 0.1em 0.35em;
  border-radius: 3px;
}

/* Links inside running text, and only there. Colour alone cannot carry a link
   mid-sentence, so the rule does it, in --hot so it reads as a link and not as
   an artefact of the type; on hover the word joins it. */
.report p a, .report li a, .hero p a { border-bottom: 1px solid var(--hot); }


.prevnext {
  display: flex;
  justify-content: space-between;
  gap: calc(2 * var(--u));
  margin-top: calc(6 * var(--u));
  padding-top: calc(3 * var(--u));
  border-top: 1px solid var(--hair);
  font-family: var(--mono);
  font-size: var(--t-small);
}
.prevnext a { text-decoration: none; color: var(--muted); }
.prevnext a:hover { color: var(--hot); }
.prevnext .spacer { color: transparent; }


/* ============================================================
   Figures & data tables (ink + muted only; no accent)
   ============================================================ */
.fig { margin: calc(3 * var(--u)) 0; }
.fig svg { display: block; width: 100%; height: auto; }
figcaption {
  font-family: var(--mono);
  font-size: var(--t-small);
  color: var(--muted);
  line-height: 1.5;
  margin-top: calc(1.5 * var(--u));
  max-width: 64ch;
}

/* the signature two-up: the contradiction on one screen */
.fig-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(3 * var(--u));
  align-items: end;
  margin: calc(4 * var(--u)) 0 calc(2 * var(--u));
}
.fig-two .fig { margin: 0; }
.fig-two-caption {
  font-family: var(--mono);
  font-size: var(--t-small);
  color: var(--muted);
  line-height: 1.5;
  max-width: 68ch;
  margin-bottom: calc(4 * var(--u));
}
.fig-two-caption b { color: var(--ink); font-weight: 500; }

.table-wrap { overflow-x: auto; margin: calc(3 * var(--u)) 0; }
table.data {
  border-collapse: collapse;
  width: 100%;
  min-width: 360px;
  font-family: var(--mono);
  font-size: var(--t-small);
  font-variant-numeric: tabular-nums;
}
table.data caption {
  text-align: left;
  color: var(--muted);
  margin-bottom: calc(1.5 * var(--u));
  font-style: normal;
}
table.data th, table.data td {
  padding: calc(0.75 * var(--u)) calc(1.5 * var(--u));
  border-bottom: 1px solid var(--hair);
  text-align: left;
}
table.data thead th { color: var(--ink); border-bottom: 1.5px solid var(--muted); }
table.data td.num { text-align: right; }
table.data .hl { color: var(--ink); font-weight: 600; }

/* chart marks: ink emphasis, muted baseline, no accent */
.c-bar        { fill: color-mix(in srgb, var(--muted) 45%, var(--bg)); }
.c-bar.hl     { fill: var(--ink); }
.c-val        { fill: var(--ink); font: 500 13px var(--mono); }
.c-cat        { fill: var(--muted); font: 12px var(--mono); }
.c-axis       { stroke: var(--muted); stroke-width: 1; }
.c-grid       { stroke: var(--hair); stroke-width: 1; }
.c-tick       { fill: var(--muted); font: 11px var(--mono); }
.c-axis-title { fill: var(--muted); font: 11px var(--mono); }

.line-pre     { stroke: var(--ink); fill: none; stroke-width: 2; }
.line-scr     { stroke: var(--muted); fill: none; stroke-width: 2; stroke-dasharray: 4 3; }
.dot-pre      { fill: var(--ink); }
.dot-scr      { fill: var(--muted); }
.lab-pre      { fill: var(--ink); font: 500 12px var(--mono); }
.lab-scr      { fill: var(--muted); font: 500 12px var(--mono); }
/* the supervised reference line: present as a ceiling, never the subject */
.line-sup     { stroke: var(--muted); fill: none; stroke-width: 1.2; stroke-dasharray: 1 3; }
.lab-sup      { fill: var(--muted); font: 12px var(--mono); }

/* ============================================================
   The spectrum (the one moving thing)
   ============================================================ */
.spectrum-band { margin: 0 0 calc(5 * var(--u)); }
.spectrum { width: 100%; height: auto; display: block; }
.spec-trace { fill: none; stroke: var(--ink);    stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.spec-recon { fill: none; stroke: var(--accent); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.spec-axis  { stroke: var(--hair); stroke-width: 1; vector-effect: non-scaling-stroke; }
.spec-tick  { fill: var(--muted); font: 500 13px var(--mono); }
.spec-cover {
  fill: var(--bg);
  transform-box: fill-box;
  transform-origin: right center;
  animation: reconstruct 0.7s 0.25s ease-out forwards;
}
@keyframes reconstruct { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* static report figures: the ground truth underneath, and the spans the model cannot see.
   accent stays reserved for reconstructed peaks, so components are muted, never coloured. */
.spec-comp   { fill: none; stroke: var(--muted); stroke-width: 0.8; opacity: 0.55; vector-effect: non-scaling-stroke; }
.spec-hidden { fill: var(--tint); }

/* ============================================================
   Photowall — uncropped photos butted edge to edge, no captions
   ============================================================ */
/* Columns, not grid: a grid needs uniform cells, which would mean cropping.
   Flowing the photos down columns keeps every frame whole. The trade-off is
   that the columns end at uneven heights. */
.photowall {
  columns: 180px;
  column-gap: 0;
  margin-top: calc(5 * var(--u));
  line-height: 0;          /* no inline gaps between stacked images */
}
.photowall img {
  display: block;
  width: 100%;
  height: auto;            /* cancels the HTML height attribute; nothing is cropped */
  margin: 0;
  break-inside: avoid;
}

/* The enlarge affordance is added by photowall.js, so it is scoped to .shot:
   with the script blocked the wall is inert and shows no pointer or tab stop. */
.photowall img.shot {
  cursor: zoom-in;
  transition: opacity 120ms ease;
}
.photowall img.shot:hover { opacity: 0.82; }
.photowall img.shot:focus-visible {
  outline: 2px solid var(--hot);
  outline-offset: -2px;
}

/* ---- lightbox ----
   Photographs read against a dark ground in either mode, so the scrim does not
   follow the theme; it stays night in both. Everything else does follow. */
.lightbox {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
}
.lightbox::backdrop { background: rgba(9, 12, 17, 0.94); }

.lightbox-frame {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* room for the close button above and the chevrons either side */
  padding: calc(7 * var(--u)) calc(8 * var(--u));
}
.lightbox-img {
  display: block;
  /* max-width alone only ever shrinks a photo, so the width is driven directly
     and the three limits race: the viewport, the viewport height reworked into
     a width through the photo's own aspect ratio, and --nat-w. That last one is
     twice the file's real width — most of these are small originals, and blowing
     one up to fill a desktop only adds blur. Both properties come from
     photowall.js. Height follows, so the aspect ratio is never touched. */
  width: min(92vw, calc(86dvh * var(--ar, 1)), var(--nat-w, 92vw));
  height: auto;
  cursor: zoom-out;
}
.lightbox-close,
.lightbox-nav {
  position: fixed;
  background: none;
  border: 0;
  color: #C9CFD9;
  font-family: var(--mono);
  cursor: pointer;
  line-height: 1;
  padding: var(--u);
}
.lightbox-close:hover,
.lightbox-nav:hover { color: var(--hot); }
.lightbox-close:focus-visible,
.lightbox-nav:focus-visible {
  outline: 2px solid var(--hot);
  outline-offset: 2px;
}
.lightbox-close {
  top: calc(2 * var(--u));
  right: calc(2 * var(--u));
  font-size: 1.5rem;
}
.lightbox-nav {
  top: 50%;
  transform: translateY(-50%);
  font-size: 3rem;
}
.lightbox-nav.prev { left: calc(1 * var(--u)); }
.lightbox-nav.next { right: calc(1 * var(--u)); }

@media (max-width: 640px) {
  .lightbox-frame { padding: calc(7 * var(--u)) calc(2 * var(--u)); }
  .lightbox-nav { font-size: 2.25rem; }
}


/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 640px) {
  .container { padding: calc(3 * var(--u)) calc(2.5 * var(--u)) calc(6 * var(--u)); }
  .labelline { grid-template-columns: 1fr; }
  .home { --col-w: 100%; }   /* half a phone column is already a small portrait */
  .fig-two { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .spec-cover { animation: none; transform: scaleX(0); }
  .row-title { transition: none; }
}