/* andrereid.co.uk landing page
   Visual idea: the drawing convention for hidden lines. In an architectural drawing a
   solid line is what you can see; a dashed line is what is there but out of sight.
   Palette and type follow REG_Founder-Design-Preferences: terracotta key colour, flat
   natural paper, no gradients, clean contrast; Newsreader (his original serif) and
   TeX Gyre Adventor (his last display pick). */

@font-face {
  font-family: "Newsreader";
  src: url("../fonts/Newsreader-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/Newsreader-Italic-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
/* Latin subset of TeX Gyre Adventor (GUST Font License), renamed as the licence requests */
@font-face {
  font-family: "AR Adventor";
  src: url("../fonts/Adventor-Regular-subset.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "AR Adventor";
  src: url("../fonts/Adventor-Bold-subset.woff") format("woff");
  font-weight: 700;
  font-display: swap;
}

:root {
  --paper: #f1efea;
  --paper-deep: #e7e3db;
  --ink: #1d1d1b;
  --graphite: #4f4d48;
  --rule: #cfc9be;
  --terracotta: #c27d56;      /* drawing lines and large marks only */
  --terracotta-text: #8f4e2b; /* text and links on paper: 6.4:1 */
  --brick: #7a3f22;           /* the invitation band; white text 8.6:1 */
  --white: #ffffff;

  --display: "AR Adventor", "Century Gothic", "Avenir Next", sans-serif;
  --text: "Newsreader", Georgia, "Times New Roman", serif;

  --step--1: clamp(0.94rem, 0.9rem + 0.15vw, 1rem);
  --step-0: clamp(1.13rem, 1.06rem + 0.3vw, 1.3rem);
  --step-1: clamp(1.3rem, 1.2rem + 0.45vw, 1.55rem);
  --step-2: clamp(1.6rem, 1.4rem + 0.9vw, 2.15rem);
  --step-3: clamp(2rem, 1.6rem + 1.9vw, 3.2rem);
  --step-4: clamp(2.35rem, 1.7rem + 3vw, 4.3rem);

  --gutter: clamp(1rem, 4vw, 3rem);
  --measure: 36rem;
  --wide: 76rem;
  --section: clamp(4.5rem, 10vw, 8.5rem);
  --nav-h: 4rem;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1rem);
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: var(--step-0);
  line-height: 1.6;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

img, svg { display: block; max-width: 100%; height: auto; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--terracotta-text);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  padding: 0.6rem 1rem;
  font-family: var(--display);
}
.skip-link:focus { top: 1rem; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.wrap {
  width: 100%;
  max-width: var(--wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--nav-h);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--display);
  font-size: 1.05rem;
  min-height: 44px;
}
.brand img { width: 1.6rem; height: 1.6rem; }

.nav-list {
  display: flex;
  gap: clamp(0.8rem, 2vw, 1.6rem);
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--display);
  font-size: 0.95rem;
}
.nav-list a {
  color: var(--ink);
  text-decoration: none;
  display: inline-block;
  padding: 0.6rem 0;
}
.nav-list a:hover,
.nav-list a[aria-current="true"] {
  text-decoration: underline;
  text-decoration-color: var(--terracotta);
  text-decoration-thickness: 2px;
}
.nav-cta {
  font-family: var(--display);
  font-size: 0.95rem;
  color: var(--white);
  background: var(--ink);
  text-decoration: none;
  padding: 0.7rem 1rem;
  border-radius: 2px;
  white-space: nowrap;
}
.nav-cta:hover { background: var(--brick); }

.menu-toggle {
  display: none;
  font: inherit;
  font-family: var(--display);
  font-size: 0.95rem;
  background: none;
  border: 1px solid var(--ink);
  color: var(--ink);
  padding: 0.55rem 0.9rem;
  min-height: 44px;
  border-radius: 2px;
  cursor: pointer;
}

@media (max-width: 72rem) {
  .menu-toggle { display: inline-block; }
  .site-nav { display: contents; }
  .nav-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    padding: 0.5rem var(--gutter) 1rem;
  }
  .nav-list a { padding: 0.8rem 0; display: block; }
  .site-header[data-open="true"] .nav-list { display: flex; }
  .nav-cta { display: none; }
  /* Without JavaScript the list simply shows below the bar */
  .no-js .nav-list { display: flex; position: static; flex-direction: row; flex-wrap: wrap; border: 0; padding: 0; }
  .no-js .menu-toggle { display: none; }
  .no-js .site-header .wrap { flex-wrap: wrap; }
}

/* ---------- Sections ---------- */

.section {
  padding-block: var(--section);
  border-top: 1px dashed var(--rule);
}
.section-grid {
  display: grid;
  gap: 2rem;
}
@media (min-width: 60rem) {
  .section-grid {
    grid-template-columns: minmax(14rem, 1fr) 2.4fr;
    gap: 4rem;
  }
  .section-grid > .section-head { position: sticky; top: calc(var(--nav-h) + 2rem); align-self: start; }
}
.section-head h2 { font-size: var(--step-3); }
.section-head p {
  margin-top: 1rem;
  color: var(--graphite);
  font-size: var(--step--1);
  max-width: 22rem;
}
.prose { max-width: var(--measure); }
.prose p { line-height: 1.65; }

/* ---------- Hero ---------- */

.hero { padding-block: clamp(3rem, 8vw, 6.5rem) clamp(3.5rem, 8vw, 6rem); }
.hero-grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 60rem) {
  .hero-grid { grid-template-columns: 1.15fr 1fr; }
}
.hero-role {
  font-family: var(--display);
  font-size: var(--step--1);
  color: var(--graphite);
  margin-bottom: 1.4rem;
}
.hero h1 {
  font-size: var(--step-4);
  max-width: 15ch;
}
.hero-lede {
  margin-top: 1.6rem;
  max-width: 34rem;
  font-size: var(--step-1);
  line-height: 1.5;
}
.hero-actions {
  margin-top: 2.2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.6rem;
}
.button {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0.85rem 1.3rem;
  font-family: var(--display);
  font-size: 1rem;
  text-decoration: none;
  border-radius: 2px;
  color: var(--white);
  background: var(--ink);
  border: 1px solid var(--ink);
}
.button:hover { background: var(--brick); border-color: var(--brick); text-decoration: none; }
.button-quiet {
  background: transparent;
  color: var(--ink);
}
.button-quiet:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.hero-note {
  font-size: var(--step--1);
  color: var(--graphite);
  margin: 0;
}

/* ---------- Situations ---------- */

.situations {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}
.situations li {
  padding: 1.6rem 0;
  border-top: 1px solid var(--rule);
}
.situations li:last-child { border-bottom: 1px solid var(--rule); }
.situations h3 {
  font-size: var(--step-1);
  max-width: 30ch;
}
.situations p {
  margin-top: 0.6rem;
  color: var(--graphite);
  max-width: var(--measure);
}
.underneath {
  margin-top: 3rem;
  padding-left: 1.4rem;
  border-left: 2px dashed var(--terracotta);
  max-width: var(--measure);
}
.underneath p { font-size: var(--step-1); line-height: 1.5; }

/* ---------- Approach ---------- */

.steps {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  counter-reset: step;
  display: grid;
  gap: 2rem;
}
@media (min-width: 44rem) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 3rem; }
}
.steps li { counter-increment: step; }
.steps h3 {
  font-size: var(--step-1);
  display: flex;
  gap: 0.8rem;
  align-items: baseline;
}
.steps h3::before {
  content: counter(step);
  font-size: 0.95rem;
  color: var(--terracotta-text);
  min-width: 1.2rem;
}
.steps p { margin-top: 0.6rem; color: var(--graphite); }

.pullquote {
  margin: 3.5rem 0 0;
  padding: 0;
  max-width: 34rem;
}
.pullquote p {
  font-family: var(--text);
  font-style: italic;
  font-size: var(--step-2);
  line-height: 1.3;
}
.pullquote footer {
  margin-top: 0.9rem;
  font-family: var(--display);
  font-size: 0.85rem;
  color: var(--graphite);
}

/* ---------- Offers: a route with stops ---------- */

.route {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
.route::before {
  content: "";
  position: absolute;
  left: 0.55rem;
  top: 0.9rem;
  bottom: 0.9rem;
  border-left: 2px solid var(--ink);
}
.stop {
  position: relative;
  padding: 0 0 3rem 2.6rem;
}
.stop:last-child { padding-bottom: 0; }
.stop::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45rem;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--ink);
}
.stop-later::before { border-color: var(--terracotta); border-style: dashed; }
.stop h3 { font-size: var(--step-2); }
.stop-when {
  font-family: var(--display);
  font-size: 0.9rem;
  color: var(--graphite);
  margin: 0.5rem 0 1rem;
}
.stop > p { max-width: var(--measure); }

.reads {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
  display: grid;
  gap: 0;
  max-width: 44rem;
}
.reads li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.3rem 1.5rem;
  padding: 1.1rem 0;
  border-top: 1px solid var(--rule);
}
.reads li:last-child { border-bottom: 1px solid var(--rule); }
.reads h4 {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
}
.reads p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--graphite);
  font-size: var(--step--1);
}
.reads a { grid-column: 1 / -1; font-size: var(--step--1); justify-self: start; padding-block: 0.2rem; }
.price {
  font-family: var(--display);
  font-size: 1.05rem;
  white-space: nowrap;
}
.price-wrap { white-space: normal; font-family: var(--text); font-size: inherit; }
.price-off { display: none; }
html[data-prices="off"] .price { display: none; }
html[data-prices="off"] .price-off { display: inline; }
.terms {
  margin-top: 1.4rem;
  font-size: var(--step--1);
  color: var(--graphite);
  max-width: 44rem;
}
.stop-action { margin-top: 1.2rem; }
.stop-action > a:not(.button) { display: inline-block; padding-block: 0.6rem; }
.nav-contact-item { display: none; }
@media (max-width: 72rem) { .nav-contact-item { display: block; } }

.funding-note {
  margin-top: 3.5rem;
  background: var(--paper-deep);
  padding: clamp(1.4rem, 3vw, 2.2rem);
  max-width: 48rem;
}
.funding-note h3 { font-size: var(--step-1); margin-bottom: 0.8rem; }
.funding-note p { font-size: var(--step--1); }

/* ---------- Record ---------- */

.records { display: grid; gap: 0; }
.record {
  border-top: 1px solid var(--rule);
  padding: 1.8rem 0;
}
.record:last-of-type { border-bottom: 1px solid var(--rule); }
.record-meta {
  font-family: var(--display);
  font-size: 0.88rem;
  color: var(--graphite);
  margin-bottom: 0.5rem;
}
.record h3 { font-size: var(--step-2); max-width: 28ch; }
.record > p { margin-top: 0.8rem; max-width: var(--measure); }
.record details { margin-top: 1rem; max-width: 44rem; }
.record summary {
  cursor: pointer;
  font-family: var(--display);
  font-size: 0.95rem;
  color: var(--terracotta-text);
  padding: 0.5rem 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  list-style: none;
}
.record summary::-webkit-details-marker { display: none; }
.record summary::before {
  content: "+";
  display: inline-block;
  width: 1.2rem;
  font-size: 1.1rem;
}
.record details[open] summary::before { content: "\2212"; }
.record dl { margin: 0.6rem 0 0; display: grid; gap: 0.9rem; }
.record dt { font-family: var(--display); font-size: 0.9rem; }
.record dd { margin: 0.2rem 0 0; color: var(--graphite); }

.on-record { margin-top: 3rem; max-width: 46rem; }
.on-record h3 { font-size: var(--step-1); margin-bottom: 1rem; }
.on-record ul { margin: 0; padding: 0; list-style: none; }
.on-record li {
  padding: 0.75rem 0;
  border-top: 1px dashed var(--rule);
  font-size: var(--step--1);
}
.on-record li span { color: var(--graphite); }

/* ---------- About ---------- */

.about-photo { margin: 0 0 2.5rem; }
.about-photo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.about-photo figcaption {
  margin-top: 0.7rem;
  font-family: var(--display);
  font-size: 0.85rem;
  color: var(--graphite);
}
.credentials {
  margin-top: 2rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule);
  font-family: var(--display);
  font-size: 0.9rem;
  color: var(--graphite);
  max-width: var(--measure);
}
.ia-note {
  margin-top: 2.5rem;
  padding-left: 1.4rem;
  border-left: 2px dashed var(--terracotta);
  max-width: var(--measure);
  font-size: var(--step--1);
  color: var(--graphite);
}

/* ---------- Invitation ---------- */

.invite {
  background: var(--brick);
  color: var(--white);
  padding-block: var(--section);
}
.invite h2 { font-size: var(--step-3); max-width: 18ch; }
.invite p { max-width: var(--measure); }
.invite a { color: var(--white); }
.invite .button { background: var(--white); color: var(--ink); border-color: var(--white); }
.invite .button:hover { background: var(--paper); border-color: var(--paper); }
.invite :focus-visible { outline-color: var(--white); }
.invite-grid { display: grid; gap: 2.5rem; }
@media (min-width: 60rem) { .invite-grid { grid-template-columns: 1fr 1fr; gap: 5rem; } }
.invite-steps { margin: 0; padding-left: 1.2rem; }
.invite-steps li { margin-bottom: 0.7rem; }
.invite-actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; align-items: center; }

/* ---------- Footer ---------- */

.site-footer {
  padding-block: 3rem;
  font-family: var(--display);
  font-size: 0.9rem;
  color: var(--graphite);
}
.footer-grid { display: grid; gap: 1.5rem; }
@media (min-width: 50rem) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.5rem; }
.site-footer a { color: var(--ink); display: inline-block; padding-block: 0.15rem; }
.footer-mark { display: flex; align-items: center; gap: 0.6rem; color: var(--ink); margin-bottom: 0.8rem; }
.footer-mark img { width: 1.8rem; height: 1.8rem; }

/* ---------- Plain pages (privacy, 404) ---------- */

.page { padding-block: clamp(3rem, 8vw, 6rem); }
.page h1 { font-size: var(--step-3); margin-bottom: 1.5rem; }
.page h2 { font-size: var(--step-1); margin: 2.4rem 0 0.8rem; }
.page ul { padding-left: 1.2rem; }
.page li { margin-bottom: 0.5rem; }
.page .updated { font-family: var(--display); font-size: 0.9rem; color: var(--graphite); }

@media print {
  .site-header, .invite-actions, .hero-actions { display: none; }
  .invite { background: none; color: var(--ink); }
  .invite a { color: var(--ink); }
}

/* ---------- Imagery ---------- */

.band-photo { margin: 0; }
.band-photo img {
  width: 100%;
  height: clamp(16rem, 48vw, 34rem);
  object-fit: cover;
  object-position: 50% 62%;
}
.band-photo figcaption {
  margin-top: 0.7rem;
  font-family: var(--display);
  font-size: 0.85rem;
  color: var(--graphite);
}

.record-figures {
  margin: 1.4rem 0 0;
  display: grid;
  gap: 1rem;
  max-width: 44rem;
}
@media (min-width: 40rem) {
  .record-figures { grid-template-columns: 1.4fr 1fr; align-items: end; }
}
.record-figures img { width: 100%; height: auto; background: var(--white); }
.record-figures figcaption {
  grid-column: 1 / -1;
  font-family: var(--display);
  font-size: 0.85rem;
  color: var(--graphite);
}

.writing-list { list-style: none; margin: 1.8rem 0 0; padding: 0; max-width: 44rem; }
.writing-list li { padding: 1rem 0; border-top: 1px solid var(--rule); }
.writing-list li:last-child { border-bottom: 1px solid var(--rule); }
.writing-list a { font-family: var(--display); font-size: var(--step-1); color: var(--ink); text-decoration: none; }
.writing-list a:hover { text-decoration: underline; text-decoration-color: var(--terracotta); }
.writing-list time { display: block; margin-top: 0.3rem; font-size: var(--step--1); color: var(--graphite); }

/* ---------- Invisible Architecture visual ---------- */

.ia-head { max-width: 46rem; }
.ia-head h2 { font-size: var(--step-3); }
.ia-lede { margin-top: 1.2rem; font-size: var(--step-1); line-height: 1.5; }
.ia-hint { color: var(--graphite); font-size: var(--step--1); }

.ia {
  margin-top: clamp(2rem, 5vw, 3.5rem);
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}
@media (min-width: 60rem) {
  .ia { grid-template-columns: 1.15fr 1fr; }
}
.ia-figure { margin: 0; }
.ia-svg { width: 100%; height: auto; max-width: 40rem; margin-inline: auto; }

.ia-ring { fill: none; stroke: var(--rule); stroke-width: 1.2; transition: stroke 0.3s, stroke-width 0.3s; }
.ia-link { fill: none; stroke: var(--terracotta); stroke-width: 1.4; stroke-dasharray: 5 5; opacity: 0.35; transition: opacity 0.3s; }
.ia-node { fill: var(--paper); stroke: var(--graphite); stroke-width: 1.4; transition: fill 0.3s, stroke 0.3s; }
.ia-person circle { fill: var(--ink); }
.ia-person path { fill: var(--ink); }
.ia-numbers text { font-family: var(--display); font-size: 12px; fill: var(--graphite); text-anchor: middle; }

/* Every ring up to the chosen one is "built"; the chosen ring is drawn in ink */
.ia[data-active="1"] [data-layer="1"],
.ia[data-active="2"] :is([data-layer="1"],[data-layer="2"]),
.ia[data-active="3"] :is([data-layer="1"],[data-layer="2"],[data-layer="3"]),
.ia[data-active="4"] :is([data-layer="1"],[data-layer="2"],[data-layer="3"],[data-layer="4"]),
.ia[data-active="5"] :is([data-layer="1"],[data-layer="2"],[data-layer="3"],[data-layer="4"],[data-layer="5"]),
.ia[data-active="6"] [data-layer] { --built: 1; }
.ia-link { opacity: calc(0.25 + 0.55 * var(--built, 0)); }
.ia-node { stroke: color-mix(in srgb, var(--graphite) calc(35% + 65% * var(--built, 0)), var(--paper)); }
.ia[data-active="1"] .ia-ring[data-layer="1"],
.ia[data-active="2"] .ia-ring[data-layer="2"],
.ia[data-active="3"] .ia-ring[data-layer="3"],
.ia[data-active="4"] .ia-ring[data-layer="4"],
.ia[data-active="5"] .ia-ring[data-layer="5"],
.ia[data-active="6"] .ia-ring[data-layer="6"] { stroke: var(--ink); stroke-width: 2; }
.ia[data-active="1"] .ia-node[data-layer="1"],
.ia[data-active="2"] .ia-node[data-layer="2"],
.ia[data-active="3"] .ia-node[data-layer="3"],
.ia[data-active="4"] .ia-node[data-layer="4"],
.ia[data-active="5"] .ia-node[data-layer="5"],
.ia[data-active="6"] .ia-node[data-layer="6"] { fill: var(--terracotta); stroke: var(--terracotta-text); }

.ia-tabs { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.ia-tab {
  width: 100%;
  text-align: left;
  font: inherit;
  font-family: var(--display);
  font-size: 1rem;
  color: var(--ink);
  background: none;
  border: 0;
  border-top: 1px solid var(--rule);
  padding: 0.75rem 0;
  min-height: 44px;
  cursor: pointer;
  display: flex;
  gap: 0.8rem;
  align-items: baseline;
}
.ia-tabs li:last-child .ia-tab { border-bottom: 1px solid var(--rule); }
.ia-tab:hover { color: var(--terracotta-text); }
.ia-tab[aria-pressed="true"] { color: var(--terracotta-text); font-weight: 700; }
.ia-num { font-family: var(--display); font-size: 0.85rem; color: var(--terracotta-text); min-width: 1.4rem; font-weight: 400; }

.ia-panels { margin-top: 1.6rem; }
.ia-panel h3 { font-size: var(--step-1); display: flex; gap: 0.8rem; align-items: baseline; }
.ia-panel p { margin-top: 0.6rem; color: var(--graphite); }
.ia-panel ul { margin: 0.8rem 0 0; padding: 0; list-style: none; }
.ia-panel li { padding: 0.35rem 0 0.35rem 1.4rem; position: relative; }
.ia-panel li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.95em;
  width: 0.9rem;
  border-top: 2px dashed var(--terracotta);
}
/* With JavaScript, show the chosen scale only; without it, every scale is listed */
.js .ia-panel { display: none; }
.js .ia[data-active="1"] .ia-panel[data-layer="1"],
.js .ia[data-active="2"] .ia-panel[data-layer="2"],
.js .ia[data-active="3"] .ia-panel[data-layer="3"],
.js .ia[data-active="4"] .ia-panel[data-layer="4"],
.js .ia[data-active="5"] .ia-panel[data-layer="5"],
.js .ia[data-active="6"] .ia-panel[data-layer="6"] { display: block; }
.no-js .ia-tabs { display: none; }
.no-js .ia-panel + .ia-panel { margin-top: 2rem; }
@media (prefers-reduced-motion: reduce) {
  .ia-ring, .ia-link, .ia-node { transition: none; }
}
.record-figure-main { grid-column: 1 / -1; }


/* ---------- Hero: tracing paper over a real place ---------- */

.lens { margin: 0; }
.lens-stage {
  --x: 28%;
  --y: 52%;
  --r: clamp(54px, 9vw, 118px);
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--paper-deep);
  touch-action: pan-y;
  cursor: crosshair;
  user-select: none;
  -webkit-user-select: none;
}
.lens-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lens-sheet,
.lens-notes {
  position: absolute;
  inset: 0;
  -webkit-mask-image: radial-gradient(circle var(--r) at var(--x) var(--y), #000 calc(var(--r) - 1.5px), transparent var(--r));
  mask-image: radial-gradient(circle var(--r) at var(--x) var(--y), #000 calc(var(--r) - 1.5px), transparent var(--r));
}
.lens-sheet { background: rgba(241, 239, 234, 0.72); }
.lens-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.lens-lines path {
  fill: none;
  stroke: var(--terracotta-text);
  stroke-width: 2.5;
  stroke-dasharray: 8 7;
  vector-effect: non-scaling-stroke;
}
.lens-lines circle { fill: var(--paper); stroke: var(--terracotta-text); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.lens-notes { list-style: none; margin: 0; padding: 0; pointer-events: none; }
.lens-note {
  position: absolute;
  max-width: 13rem;
  font-family: var(--display);
  font-size: clamp(0.72rem, 0.65rem + 0.3vw, 0.88rem);
  line-height: 1.3;
  color: var(--ink);
  transform: translate(14px, -50%);
}
.lens-note-l { transform: translate(calc(-100% - 14px), -50%); text-align: right; }
.js .lens[data-reveal="false"] .lens-notes { visibility: hidden; }
.lens-question {
  position: absolute;
  left: clamp(8.5rem, var(--x), calc(100% - 8.5rem));
  top: calc(var(--y) + var(--r) + 10px);
  transform: translateX(-50%);
  width: max-content;
  max-width: 16rem;
  margin: 0;
  padding: 0.45rem 0.7rem;
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 2px;
  font-family: var(--display);
  font-size: clamp(0.78rem, 0.7rem + 0.3vw, 0.92rem);
  line-height: 1.3;
  color: var(--ink);
  text-align: center;
  pointer-events: none;
}
.lens-question[data-pos="above"] { top: auto; bottom: calc(100% - var(--y) + var(--r) + 10px); }
.lens-question[data-pos="inside"] { top: calc(var(--y) + var(--r) * 0.25); }
.lens-question:empty,
.no-js .lens-question,
.lens[data-reveal="true"] .lens-question { display: none; }
.lens-note:nth-child(1) { left: 28.17%; top: 52.22%; }
.lens-note:nth-child(2) { left: 53.33%; top: 55.56%; }
.lens-note:nth-child(3) { left: 65.83%; top: 66.67%; }
.lens-note:nth-child(4) { left: 80.42%; top: 47.78%; }
.lens-note:nth-child(5) { left: 87.50%; top: 16.67%; }
.lens-note:nth-child(6) { left: 14.17%; top: 72.22%; }
.lens-ring {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: calc(var(--r) * 2);
  height: calc(var(--r) * 2);
  margin: calc(var(--r) * -1) 0 0 calc(var(--r) * -1);
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  pointer-events: none;
}
.lens[data-reveal="true"] .lens-sheet,
.lens[data-reveal="true"] .lens-notes,
.no-js .lens-sheet,
.no-js .lens-notes { -webkit-mask-image: none; mask-image: none; }
.lens[data-reveal="true"] .lens-ring,
.no-js .lens-ring,
.no-js .lens-hint,
.no-js .lens-toggle { display: none; }
.lens figcaption {
  margin-top: 0.9rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1.2rem;
  font-family: var(--display);
  font-size: 0.85rem;
  color: var(--graphite);
}
.lens-hint { flex: 1 1 14rem; }
.lens-toggle {
  font: inherit;
  color: var(--ink);
  background: none;
  border: 1px solid var(--ink);
  border-radius: 2px;
  padding: 0.5rem 0.8rem;
  min-height: 44px;
  cursor: pointer;
}
.lens-toggle:hover, .lens-toggle[aria-pressed="true"] { background: var(--ink); color: var(--white); }
@media (pointer: coarse) {
  .lens-stage { cursor: default; }
}

/* "Show it all": keyed notes, as on a drawing */
.lens-notes { counter-reset: note; }
.lens-note { counter-increment: note; }
.lens[data-reveal="true"] .lens-note,
.no-js .lens-note {
  transform: translate(-50%, -50%);
  width: 1.6rem;
  height: 1.6rem;
  max-width: none;
  border-radius: 50%;
  background: var(--terracotta-text);
  color: transparent;
  font-size: 0;
  overflow: hidden;
}
.lens[data-reveal="true"] .lens-note::before,
.no-js .lens-note::before {
  content: counter(note);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--white);
  font-size: 0.8rem;
}
.lens-key {
  display: none;
  margin: 1rem 0 0;
  padding-left: 1.6rem;
  font-family: var(--display);
  font-size: 0.9rem;
  color: var(--ink);
  columns: 2 16rem;
  column-gap: 2rem;
}
.lens-key li { margin-bottom: 0.4rem; break-inside: avoid; }
.lens-key li::marker { color: var(--terracotta-text); }
.lens[data-reveal="true"] .lens-key,
.no-js .lens-key { display: block; }

.list-title { font-size: var(--step-1); margin-top: 2.8rem; }
.list-title + .writing-list { margin-top: 1rem; }
.writing-list .meta { display: block; margin-top: 0.3rem; font-size: var(--step--1); color: var(--graphite); }
.list-more { margin-top: 0.8rem; font-size: var(--step--1); }
.list-more a { display: inline-block; padding-block: 0.4rem; }

/* Headings never break inside a word; section titles scale to their column */
h1, h2, h3, h4 { overflow-wrap: normal; word-break: normal; hyphens: manual; }
.section-head { container-type: inline-size; }
.section-head h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 3.2rem); }
@supports (font-size: 1cqi) {
  .section-head h2 { font-size: min(var(--step-3), 12.5cqi); }
}