/* Two typefaces.
   Grotesk: Helvetica Neue where the device has it (Apple), otherwise TeX Gyre
   Heros, a free cut of the same design, served from here. Apple devices never
   download it because the local() sources match first.
   Tiro: Tiro Devanagari Marathi, which carries both the Devanagari mark in the
   header and the Latin serif used for verse and quotation.

   Weights, on purpose: everything is regular. The name in the header is medium,
   so it anchors the page without shouting. Bold is reserved for emphasis inside
   running text. Where the device has no medium, the name falls back to regular. */

@font-face {
  font-family: "Grotesk"; font-weight: 400; font-style: normal; font-display: swap;
  src: local("Helvetica Neue"), local("HelveticaNeue"), local("Helvetica"),
       url("../fonts/heros-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Grotesk"; font-weight: 400; font-style: italic; font-display: swap;
  src: local("Helvetica Neue Italic"), local("HelveticaNeue-Italic"), local("Helvetica Oblique"),
       url("../fonts/heros-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Grotesk"; font-weight: 500; font-style: normal; font-display: swap;
  src: local("Helvetica Neue Medium"), local("HelveticaNeue-Medium");
}
@font-face {
  font-family: "Grotesk"; font-weight: 700; font-style: normal; font-display: swap;
  src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), local("Helvetica Bold"),
       url("../fonts/heros-bold.woff2") format("woff2");
}
@font-face {
  font-family: "Tiro"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../fonts/tiro-devanagari-marathi.woff2") format("woff2");
}

:root {
  --ink: #111;
  --grey: #767676;          /* 4.5:1 on white */
  --line: #e6e6e6;
  --bg: #fff;
  --sans: "Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Tiro", Georgia, "Times New Roman", serif;

  --xs: 0.8125rem;          /* 13  captions, meta, nav */
  --s:  0.9375rem;          /* 15  footer */
  --m:  1.0625rem;          /* 17  body */
  --l:  1.375rem;           /* 22  list titles, index links */
  --xl: 2rem;               /* 32  page titles */

  --gutter: clamp(1.25rem, 4vw, 3rem);
  --measure: 34rem;
  --max: 80rem;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { color-scheme: light; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--m)/1.5 var(--sans);
  font-feature-settings: "kern", "tnum";
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
h1, h2, h3 { font-weight: 400; margin: 0; line-height: 1.2; }
h1 { font-size: var(--xl); letter-spacing: -0.015em; text-wrap: balance; }
h2 { font-size: var(--m); }
p { margin: 0; text-wrap: pretty; }
ul { list-style: none; margin: 0; padding: 0; }
figure { margin: 0; }
figcaption { margin-top: 0.75rem; font-size: var(--xs); line-height: 1.45; }
figcaption .meta, .row-main .meta, dd .meta { display: block; }
iframe { display: block; border: 0; width: 100%; }

.meta { color: var(--grey); font-size: var(--xs); font-weight: 400; margin: 0; }
.intro { color: var(--grey); max-width: var(--measure); }

/* ---------- Shell ---------- */
.head, main, .foot {
  width: min(100% - 2 * var(--gutter), var(--max));
  margin-inline: auto;
}
.head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 2rem;
  padding: 1.5rem 0;
  font-size: var(--xs);
}
.head nav { display: flex; gap: 1.5rem; color: var(--grey); }
.head nav a[aria-current="page"] { color: var(--ink); }
.head nav a:hover { color: var(--ink); }
.name { font-size: var(--m); font-weight: 500; }
.mark { font-family: var(--serif); font-weight: 400; font-size: 1.2em; line-height: 1; margin-left: 0.15em; }
main { padding: 5rem 0 8rem; }
.foot {
  display: flex; flex-wrap: wrap; gap: 1.5rem;
  padding: 2rem 0 3rem;
  font-size: var(--xs); color: var(--grey);
}
.foot a:hover { color: var(--ink); }
@media (max-width: 40rem) {
  .head nav a:not(.nav-index):not(:last-child) { display: none; }
  main { padding-top: 3.5rem; }
}

/* ---------- Index (home) ---------- */
.index { display: grid; gap: 2.5rem; max-width: 52rem; }
.index .intro { margin-bottom: 1.5rem; font-family: var(--serif); font-size: var(--l); line-height: 1.35; max-width: 30rem; }
.index-group { display: grid; grid-template-columns: 8rem 1fr; gap: 1rem; }
.index-group h2 { color: var(--grey); font-size: var(--xs); padding-top: 0.45rem; }
.index-group ul { font-size: var(--l); line-height: 1.5; }
.index-group a:hover { color: var(--grey); }
@media (max-width: 40rem) { .index-group { grid-template-columns: 1fr; gap: 0.25rem; } }

.latest { margin-top: 7rem; }
.latest .work { margin-top: 1.5rem; }
.recent { margin-top: 6rem; max-width: var(--measure); }
.recent .list { margin-top: 1.5rem; }

/* ---------- Section pages ---------- */
.room-head { margin-bottom: 3.5rem; display: grid; gap: 0.75rem; }
.section { margin-top: 5rem; }
.section > .meta { margin-bottom: 1.5rem; }
.room-head + .section { margin-top: 0; }

/* A list: title, optional sub-line, optional right-hand meta. */
.list { max-width: 46rem; }
.list li {
  display: flex; justify-content: space-between; gap: 2rem; align-items: baseline;
  padding: 1rem 0; border-top: 1px solid var(--line);
}
.list li:last-child { border-bottom: 1px solid var(--line); }
.list .row-main { display: grid; gap: 0.2rem; font-size: var(--l); line-height: 1.3; }
.list .row-main .meta { font-size: var(--xs); }
.list .row-right { flex: none; text-align: right; }
.list a:hover { color: var(--grey); }
.books .row-main { font-size: var(--m); }
.books .row-main > span:first-child .meta { display: inline; font-size: inherit; }
.books .note { margin-top: 0.1rem; }
@media (max-width: 40rem) {
  .list li { flex-direction: column; gap: 0.3rem; }
  .list .row-right { text-align: left; }
}

/* A grid of works. Images at their own proportions, nothing around them. */
.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4rem 2.5rem;
  align-items: start;
}
.grid.wide { grid-template-columns: repeat(2, 1fr); gap: 4rem 3rem; }
@media (max-width: 64rem) { .grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 48rem) { .grid { grid-template-columns: repeat(2, 1fr); gap: 3rem 1.5rem; } .grid.wide { grid-template-columns: 1fr; } }
@media (max-width: 30rem) { .grid { grid-template-columns: 1fr; } }
.grid figure a:hover + figcaption, .grid figcaption a:hover { color: var(--grey); }
.grid .video { aspect-ratio: 16 / 9; }

/* Embeds sit in a narrow column so the page stays quiet. */
.embeds { display: grid; gap: 3rem; max-width: 36rem; }

/* ---------- One thing ---------- */
.object { max-width: var(--measure); }
.crumb { font-size: var(--xs); color: var(--grey); margin-bottom: 2.5rem; }
.crumb a:hover { color: var(--ink); }
.object-head { display: grid; gap: 0.75rem; margin-bottom: 2.5rem; }

/* The work itself: shown whole, as large as the viewport allows, nothing else. */
.object.is-picture { max-width: none; }
.work img { max-height: 78vh; width: auto; max-width: 100%; }
.work.lead { margin-bottom: 2.5rem; }
.is-picture .work + .prose { margin-top: 3rem; }
.latest .work img { max-height: 70vh; }

.pictures { display: grid; gap: 3rem; margin-top: 3rem; }
.is-picture .pictures { max-width: var(--measure); }

/* Running text */
.prose { font-size: var(--m); line-height: 1.6; max-width: var(--measure); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: var(--m); margin-top: 2.4em; }
.prose h3 { font-size: var(--m); color: var(--grey); margin-top: 2em; }
.prose a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; text-decoration-color: var(--grey); }
.prose a:hover { text-decoration-color: var(--ink); }
.prose blockquote { margin: 1.8em 0; padding-left: 1.25rem; border-left: 1px solid var(--line); font-family: var(--serif); font-size: 1.15em; line-height: 1.5; color: var(--ink); }
.prose strong { font-weight: 700; }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose ul { list-style: disc; }
.prose li + li { margin-top: 0.35em; }
.prose img { margin: 2em 0; }
.prose code { font: 0.85em ui-monospace, Menlo, Consolas, monospace; background: #f4f4f4; padding: 0.1em 0.35em; }
.prose pre { background: #f4f4f4; padding: 1rem; overflow-x: auto; font-size: 0.85rem; }
.prose pre code { background: none; padding: 0; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.5em 0; }

/* Poems are set in the serif, keep their line breaks and get more air. */
.prose.poem { font-family: var(--serif); font-size: 1.25rem; line-height: 1.6; max-width: 30rem; }
.prose.poem p { white-space: pre-line; }
.prose.poem > * + * { margin-top: 1.7em; }

/* Recipes: ingredients beside the method on wide screens. */
.kind-recipe.object { max-width: 60rem; }
.recipe { display: grid; grid-template-columns: 16rem 1fr; gap: 3rem; align-items: start; }
.recipe h2 { font-size: var(--xs); color: var(--grey); margin: 0 0 1rem; }
.ingredients { position: sticky; top: 2rem; font-size: var(--s); line-height: 1.5; }
.ingredients li { padding: 0.45rem 0; border-top: 1px solid var(--line); }
.ingredients li:last-child { border-bottom: 1px solid var(--line); }
.method ol { padding-left: 1.25rem; }
.method li + li { margin-top: 1em; }
@media (max-width: 48rem) { .recipe { grid-template-columns: 1fr; gap: 2.5rem; } .ingredients { position: static; } }

/* Documents */
.file { margin-top: 2.5rem; }
.file a { text-decoration: underline; text-underline-offset: 0.18em; }

/* Previous / next within a room */
.pager {
  display: flex; justify-content: space-between; gap: 2rem;
  margin-top: 5rem; padding-top: 1rem; border-top: 1px solid var(--line);
  font-size: var(--xs); color: var(--grey);
}
.pager a:hover { color: var(--ink); }
.is-picture .pager { max-width: none; }

/* About */
.about { max-width: var(--measure); }
.cv { max-width: 46rem; }
.cv dl { display: grid; grid-template-columns: 8rem 1fr; gap: 0.75rem 1.5rem; margin: 0; }
.cv dt { color: var(--grey); font-size: var(--xs); padding-top: 0.3rem; font-variant-numeric: tabular-nums; }
.cv dd { margin: 0; }
.cv dd a { text-decoration: underline; text-underline-offset: 0.18em; text-decoration-color: var(--grey); }
.cv dd a:hover { text-decoration-color: var(--ink); }
@media (max-width: 40rem) { .cv dl { grid-template-columns: 1fr; gap: 0.2rem; } .cv dd { margin-bottom: 0.75rem; } }

@media print { .head nav, .foot, .pager { display: none; } }