/* anirrban.com — inner pages (series, musings, singles, 404).
   Loaded AFTER style.css. Adds no new token: same ground, same three faces, same rules.
   Every section on every page takes its own composition — no two neighbours share a
   structure, and nothing repeats the home page's blocks. */

/* ============================================================
   shared editorial furniture
   ============================================================ */

/* a section number set on its side, in the margin */
.vlabel {
  writing-mode: vertical-rl;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--fg-soft);
}

/* the small standfirst that opens a page */
.standfirst { margin: 0; font-size: clamp(17px, 1.6vw, 21px); line-height: 1.55; max-width: 42ch; }
.standfirst + .standfirst { margin-top: 16px; color: var(--fg-soft); }

/* a count line under a head, ruled */
.countline {
  display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: baseline;
  border-top: 1px solid var(--rule); padding-top: 16px; margin-top: clamp(22px, 3vw, 34px);
}

/* a head row above a list or a grid: h2 on the left line, its count on the right */
.row-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px 20px; flex-wrap: wrap; margin-bottom: clamp(20px, 2.8vw, 34px); }
.row-head h2 { font-family: var(--display); font-weight: 400; font-size: clamp(34px, 4.2vw, 56px); line-height: 1.02; margin: 0; }
.row-head h2 em { font-style: italic; }

/* back link */
.crumb { display: inline-block; margin-bottom: clamp(18px, 2.6vw, 28px); text-decoration: none; }
.crumb:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 6px; }

/* ============================================================
   the Styles tab — the controls cloned into every component.
   They only do something when the client sets them, so a page
   with the defaults looks exactly like the design.
   ============================================================ */
.section--flush-top { padding-top: 0; }

.section.has-text-center { text-align: center; }
.section.has-text-right { text-align: right; }
.section.has-text-center .head,
.section.has-text-center .row-head { justify-content: center; }
.section.has-text-center .head .label,
.section.has-text-right .head .label { text-align: inherit; }

.section.has-width-narrow .wrap { max-width: 940px; }
.section.has-width-wide .wrap { max-width: 1560px; }
.section.has-width-full .wrap { max-width: none; }

.section.has-bg-image { display: flex; align-items: center; background-repeat: no-repeat; }
.section.has-bg-image > .wrap { width: 100%; }
.section.has-bg-image.has-v-align-top { align-items: flex-start; }
.section.has-bg-image.has-v-align-bottom { align-items: flex-end; }

/* ============================================================
   the open series — a rail: the words on four columns, one tall
   photograph on eight. Not a full-bleed opening (the home page already
   owns that) and not a card (the home page already owns those).
   ============================================================ */
.open-series a { display: block; text-decoration: none; }
.open-series .wrap {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  column-gap: clamp(28px, 4vw, 64px); align-items: start;
}
.open-series .rail { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; align-self: stretch; }
.open-series .rail-foot { display: grid; gap: 14px; justify-items: start; }
.open-series .frame { position: relative; overflow: hidden; background: var(--bg-2); }
.open-series .frame img {
  width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; display: block;
  transition: transform 1s cubic-bezier(.2,.7,.2,1);
}
.open-series a:hover .frame img, .open-series a:focus-visible .frame img { transform: scale(1.02); }
.open-series .frame.bw img { filter: grayscale(1) contrast(1.1); }
.open-series h2 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(34px, 4.2vw, 56px); line-height: 1; letter-spacing: -.02em;
  margin: 6px 0 8px;
}
.open-series a:hover h2 { color: var(--accent); }
.open-series .note { margin: 0; max-width: 34ch; color: var(--fg-soft); }
.open-series .open-facts { display: grid; gap: 10px; justify-items: start; padding-top: 16px; border-top: 1px solid var(--rule); width: 100%; }
.open-series .enter {
  justify-self: start; margin-top: 6px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent); border-bottom: 1px solid var(--accent); padding-bottom: 4px;
}
@media (max-width: 900px) {
  .open-series .wrap { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
}

/* ============================================================
   the index of series — letterbox rows, ruled
   ============================================================ */
.index-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.index-rows li { border-bottom: 1px solid var(--rule); }
.index-rows a {
  display: grid; grid-template-columns: clamp(160px, 26vw, 340px) minmax(0, 1fr) 150px;
  gap: 0 clamp(20px, 3vw, 44px); align-items: center;
  padding-block: clamp(18px, 2.2vw, 26px); text-decoration: none;
}
.index-rows .shot { overflow: hidden; background: var(--bg-2); }
.index-rows .shot img {
  width: 100%; aspect-ratio: 16 / 7; object-fit: cover; display: block;
  transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .4s ease;
}
.index-rows a:hover .shot img, .index-rows a:focus-visible .shot img { transform: scale(1.04); }
.index-rows .bw .shot img { filter: grayscale(1) contrast(1.1); }
.index-rows .bw a:hover .shot img { filter: grayscale(1) contrast(1.1); }
.index-rows h3 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(24px, 2.8vw, 36px); line-height: 1.06; margin: 0 0 10px;
}
.index-rows a:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 7px; text-decoration-color: var(--accent); }
.index-rows .on { margin: 0; color: var(--fg-soft); font-size: 17px; max-width: 46ch; }
.index-rows .side { display: grid; gap: 8px; justify-items: end; text-align: right; }
@media (max-width: 900px) {
  .index-rows a { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
  .index-rows .side { justify-items: start; text-align: left; }
  .index-rows .shot img { aspect-ratio: 3 / 2; }
}

/* ============================================================
   cameras / the making — type only, on the raised panel
   ============================================================ */
.cameras { background: var(--bg-2); }
.cameras .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 5vw, 80px); }
.cameras h2 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(34px, 4.2vw, 56px); line-height: 1.02; letter-spacing: -.015em;
  margin: 0 0 clamp(18px, 2.4vw, 26px); max-width: 16ch;
}
.cameras h2 em { font-style: italic; color: var(--accent); }
.cameras .lede { margin: 0; color: var(--fg-soft); max-width: 40ch; }
.cameras dl { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--rule); }
.cameras dl > div {
  display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px;
  padding-block: clamp(16px, 2vw, 22px); border-bottom: 1px solid var(--rule);
}
.cameras dt { padding-top: 3px; }
.cameras dd { margin: 0; }
.cameras dd b { font-weight: 400; display: block; font-size: 19px; margin-bottom: 4px; }
.cameras dd span { color: var(--fg-soft); font-size: 16px; }
@media (max-width: 900px) {
  .cameras .wrap { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .cameras dl > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

/* ============================================================
   the plate — one photograph, full-bleed, uncropped in height
   ============================================================ */
.plate { padding-block: 0; }
.plate figure { margin: 0; }
.plate img { width: 100%; height: clamp(340px, 74vh, 780px); object-fit: cover; display: block; }
.plate figcaption {
  max-width: 1320px; margin: 0 auto; padding-top: 14px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}

/* ============================================================
   the grid — `.works` / `.work` live in style.css (the home page's own rhythm,
   reused here so the series page and the home page behave identically).
   These three widths only widen the rhythm for series that hold 1, 4 or 9 frames.
   ============================================================ */
.work.w6 { grid-column: span 6; }
.work.w8 { grid-column: span 8; }
.work.w12 { grid-column: span 12; }
@media (max-width: 900px) {
  .work.w6, .work.w8, .work.w12 { grid-column: span 12; }
}

/* ============================================================
   next series — a photographic link, half the wrap
   ============================================================ */
.next-series { padding-block: clamp(48px, 7vw, 104px); border-top: 1px solid var(--rule); }
.next-series a { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: clamp(24px, 4vw, 56px); align-items: center; text-decoration: none; }
.next-series .shot { overflow: hidden; background: var(--bg-2); }
.next-series .shot img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.next-series a:hover .shot img { transform: scale(1.03); }
.next-series .shot.bw img { filter: grayscale(1) contrast(1.1); }
.next-series h2 { font-family: var(--display); font-weight: 400; font-size: clamp(34px, 4.2vw, 56px); line-height: 1.02; margin: 12px 0 14px; }
.next-series a:hover h2 { color: var(--accent); }
.next-series .note { margin: 0; color: var(--fg-soft); max-width: 36ch; }
@media (max-width: 900px) { .next-series a { grid-template-columns: minmax(0, 1fr); row-gap: 20px; } }

/* ============================================================
   the featured piece — words on the left, the cover standing
   tall on the right. The home page's feature runs the other way
   round (picture first), so this reads as its own page.
   ============================================================ */
.featured { padding-block: clamp(32px, 5vw, 76px); border-top: 1px solid var(--rule); }
.featured a {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(16px, 2vw, 28px); align-items: stretch; text-decoration: none;
}
.featured .text {
  grid-column: 1 / span 5;
  display: flex; flex-direction: column; justify-content: space-between; gap: 28px;
  padding-block: 4px;
}
.featured .bottom { display: grid; gap: 14px; }
.featured h2 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(34px, 4.4vw, 60px); line-height: 1; letter-spacing: -.02em;
  margin: 0;
}
.featured a:hover h2 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 10px; text-decoration-color: var(--accent); }
.featured .dek { margin: 0; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; color: var(--fg-soft); max-width: 40ch; }
.featured .excerpt {
  margin: 0; font-family: var(--body); font-style: italic;
  font-size: clamp(17px, 1.6vw, 20px); line-height: 1.5; color: var(--fg);
  max-width: 38ch; padding-left: 16px; border-left: 1px solid var(--accent);
}
.featured .meta { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: baseline; }
.featured .enter {
  justify-self: start;
  font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent); border-bottom: 1px solid var(--accent); padding-bottom: 4px;
}
.featured .frame { grid-column: 7 / span 6; margin: 0; overflow: hidden; background: var(--bg-2); }
.featured .frame img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block;
  transition: transform 1s cubic-bezier(.2,.7,.2,1);
}
.featured a:hover .frame img, .featured a:focus-visible .frame img { transform: scale(1.02); }
@media (max-width: 900px) {
  .featured a { grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
  .featured .text, .featured .frame { grid-column: 1 / -1; }
  .featured .frame img { aspect-ratio: 4 / 3; }
}

/* ============================================================
   the shelf — entries at four widths, so the page never
   repeats one block: a lead pair, two medium pairs, three
   text-only entries on ruled tops.
   ============================================================ */
.shelf { padding-block: clamp(42px, 6vw, 88px); border-top: 1px solid var(--rule); }
.shelf .lead > a {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(16px, 2vw, 28px); row-gap: 20px; align-items: center;
}
.shelf .lead .frame { grid-column: 1 / span 7; }
.shelf .lead .body { grid-column: 9 / span 4; }
.shelf .pair, .shelf .trio {
  display: grid; gap: clamp(22px, 3vw, 48px);
  margin-top: clamp(38px, 4.6vw, 68px);
}
.shelf .pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.shelf .trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.entry a { display: grid; gap: 13px; text-decoration: none; align-content: start; }
.entry .frame { margin: 0; overflow: hidden; background: var(--bg-2); }
.entry .frame img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block;
  transition: transform .9s cubic-bezier(.2,.7,.2,1);
}
.entry a:hover .frame img, .entry a:focus-visible .frame img { transform: scale(1.03); }
.entry h3 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(23px, 2.5vw, 33px); line-height: 1.08; letter-spacing: -.012em;
  margin: 0;
}
.entry a:hover h3 { color: var(--accent); }
.entry .dek { margin: 0; font-size: 16.5px; line-height: 1.55; color: var(--fg-soft); max-width: 40ch; }
.entry .meta { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; }

/* text-only entries: no picture, a rule on top, the number in the margin of the rule */
.shelf .trio .entry a { gap: 10px; padding-top: 16px; border-top: 1px solid var(--rule); }
.shelf .trio .entry h3 { font-size: clamp(21px, 2.1vw, 27px); }
.shelf .pair .entry h3 { font-size: clamp(24px, 2.6vw, 34px); }

/* the lead entry's body sits centred against a tall frame */
.shelf .lead .body { display: grid; gap: 14px; align-content: center; }
.shelf .lead h3 { font-size: clamp(30px, 3.6vw, 48px); }
.shelf .lead .frame img { aspect-ratio: 3 / 2; }

@media (max-width: 900px) {
  .shelf .lead > a { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .shelf .lead .frame, .shelf .lead .body { grid-column: 1 / -1; }
  .shelf .pair, .shelf .trio { grid-template-columns: minmax(0, 1fr); gap: 30px; }
}

/* ============================================================
   the rest — older pieces, two columns, ruled. A calm
   close after the shelf.
   ============================================================ */
.rest { padding-block: clamp(36px, 5vw, 72px); border-top: 1px solid var(--rule); }
.rest ol { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: clamp(28px, 5vw, 72px); }
.rest li { break-inside: avoid; border-top: 1px solid var(--rule); }
.rest li:first-child, .rest li:nth-child(3) { border-top: 0; }
.rest a { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 4px 14px; align-items: baseline; padding-block: 15px; text-decoration: none; }
.rest .t { font-family: var(--display); font-weight: 400; font-size: clamp(19px, 1.8vw, 24px); line-height: 1.2; }
.rest a:hover .t { color: var(--accent); }
.rest .n { font-family: var(--mono); font-size: 11.5px; color: var(--fg-soft); }
.rest .c { text-align: right; }
@media (max-width: 900px) { .rest ol { columns: 1; } }

/* ============================================================
   a musing — cover, measure, one plate
   ============================================================ */
.musing-cover { padding-block: 0; }
.musing-cover img { width: 100%; height: clamp(260px, 54vh, 580px); object-fit: cover; display: block; }

.prose-wrap { padding-block: clamp(40px, 6vw, 84px); }
.prose { max-width: 34rem; margin-inline: auto; font-size: 19px; line-height: 1.78; }
.prose > * + * { margin-top: 1.3em; }
.prose p { margin: 0; }
.prose h2 {
  font-family: var(--display); font-weight: 400; font-size: clamp(26px, 2.8vw, 38px);
  line-height: 1.14; letter-spacing: -.01em; margin-top: 1.9em; margin-bottom: .1em;
}
.prose blockquote { margin: clamp(28px, 4vw, 48px) 0; }
.prose blockquote p {
  font-family: var(--display); font-size: clamp(24px, 2.8vw, 36px); line-height: 1.22;
  letter-spacing: -.012em; text-wrap: balance;
}
.prose blockquote p::before { content: "\201C"; color: var(--accent); margin-right: .04em; }
.prose blockquote p::after { content: "\201D"; color: var(--accent); }
.prose a { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--accent); }
.prose figure { margin: clamp(30px, 4vw, 48px) 0; }
.prose figure img { width: 100%; display: block; }
.prose figcaption { margin-top: 10px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-soft); }

/* the plate breaks the measure: one photograph at full width inside the reading run */
.plate-break { padding-block: clamp(32px, 4vw, 56px); }
.plate-break figure { margin: 0; }
.plate-break img { width: 100%; height: clamp(280px, 62vh, 640px); object-fit: cover; display: block; }
.plate-break figcaption {
  max-width: 1320px; margin: 0 auto; padding-top: 14px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}

.musing-nav { border-top: 1px solid var(--rule); margin-top: clamp(40px, 6vw, 76px); padding-top: clamp(22px, 3vw, 36px); }
.musing-nav .row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px clamp(20px, 4vw, 56px); }
.musing-nav a { text-decoration: none; display: grid; gap: 8px; align-content: start; }
.musing-nav a:last-child { text-align: right; justify-items: end; }
.musing-nav .t { font-family: var(--display); font-style: italic; font-size: clamp(21px, 2.3vw, 32px); line-height: 1.14; }
.musing-nav a:hover .t { color: var(--accent); }
@media (max-width: 900px) {
  .musing-nav .row { grid-template-columns: minmax(0, 1fr); }
  .musing-nav a:last-child { text-align: left; justify-items: start; }
  .prose { font-size: 18px; }
}

/* ============================================================
   404 — one line of type, the numerals in the margin
   ============================================================ */
.notfound { padding-block: clamp(56px, 9vw, 130px); }
.notfound .wrap { display: grid; grid-template-columns: 130px minmax(0, 1fr); column-gap: clamp(20px, 3vw, 44px); align-items: start; }
.notfound .numeral { font-family: var(--display); font-size: clamp(56px, 8vw, 116px); line-height: .9; color: var(--accent); letter-spacing: -.03em; }
.notfound h1 { font-family: var(--display); font-weight: 400; font-size: clamp(38px, 6.4vw, 92px); line-height: .98; letter-spacing: -.022em; margin: 0 0 clamp(18px, 2.4vw, 28px); max-width: 16ch; text-wrap: balance; }
.notfound h1 em { font-style: italic; }
.notfound p { margin: 0; max-width: 46ch; color: var(--fg-soft); }
.notfound .links { display: flex; flex-wrap: wrap; gap: 12px clamp(20px, 3vw, 36px); margin-top: clamp(26px, 3.4vw, 40px); }
.notfound .links a { font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid var(--accent); padding-bottom: 4px; }
.notfound .links a:hover { color: var(--accent); }
@media (max-width: 900px) { .notfound .wrap { grid-template-columns: minmax(0, 1fr); row-gap: 18px; } }

/* ============================================================
   small screens
   ============================================================ */

/* A full-bleed block's inner line (a caption, a headline under a cover) has no .gutter
   of its own. Below the wrap's own width it takes the same 16px edge as every other
   section, so the page keeps one left line all the way down. */
@media (max-width: 1352px) {
  .plate figcaption,
  .plate-break figcaption,
  .feature-open .under {
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
}

@media (max-width: 900px) {
  .plate img, .plate-break img { height: clamp(260px, 56vh, 520px); }
}

/* ============================================================
   the reusable library — blocks the client can drop on any page.
   They keep the same faces, rules and ground as the rest of the
   site, so an added block never looks like another website.
   ============================================================ */
.measure { max-width: 46rem; margin-inline: auto; }

.split--reverse > :first-child { order: 2; }
.split-media { margin: 0; }
.split-media img { width: 100%; display: block; }

.quotes { border-top: 1px solid var(--rule); }
.quotes blockquote { margin: 0; padding-block: clamp(22px, 3vw, 34px); border-bottom: 1px solid var(--rule); }
.quotes blockquote p {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(22px, 2.6vw, 32px); line-height: 1.24; letter-spacing: -.01em; margin: 0;
}

/* hero slider: a sideways run of full-height frames, one snap per photograph */
.slider {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(86vw, 1080px);
  gap: clamp(14px, 2vw, 28px); overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 16px; scrollbar-width: thin;
}
.slide { position: relative; scroll-snap-align: start; margin: 0; }
.slide img { width: 100%; height: clamp(360px, 62vh, 620px); object-fit: cover; display: block; }
.slide-copy {
  position: absolute; inset: auto 0 0; padding: clamp(20px, 3vw, 40px);
  background: linear-gradient(0deg, rgba(13,14,16,.88), rgba(13,14,16,0));
}
.slide-copy h1, .slide-copy h2 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(30px, 3.6vw, 54px); line-height: 1.02; letter-spacing: -.015em; margin: 0;
}

@media (max-width: 900px) {
  .split--reverse > :first-child { order: 0; }
  .slider { grid-auto-columns: 90vw; }
  .slide img { height: clamp(300px, 54vh, 460px); }
}