/* betsyherbert.net – one serif, restraint as the personality */

/* Cormorant runs small, so the body still needs compensating above 1rem. The
   text measures are tied to it: drop the type without narrowing the column and
   the text pages run past 80 characters a line. */

:root {
  --paper: #FBFAF7;
  --ink: #1C1A18;
  --muted: #6E6A62;
  --hair: #E4E1D9;
  --rub: #8C2B1E;
}

* { box-sizing: border-box; }

html { background: var(--paper); }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.2rem;
  line-height: 1.62;
}

main {
  max-width: 32rem;
  /* Explicit, because auto cross-axis margins cancel `stretch` inside the
     footer's flex column and main would otherwise shrink to fit its content. */
  width: 100%;
  margin: 0 auto;
  padding: 5.5rem 1.5rem 4rem;
}

h1 {
  font-size: 2.5rem;
  font-weight: 500;
  letter-spacing: -0.008em;
  line-height: 1.15;
  margin: 0 0 1.6rem;
}

p { margin: 0 0 1.1rem; }

/* Links come in two tiers.

   Primary, here: a hairline in the rub, dropped well clear of the baseline. A
   real text decoration rather than a bottom border, so the rule breaks around
   the descenders of p, g and j instead of running through them.

   Secondary is for links sitting inside a muted register – the caps metadata
   and the breadcrumbs – where a red rule would put a second red mark on a line
   that already has one. Those keep the same rule in the grey they are already
   printed in, so the hierarchy reads without either tier depending on colour
   to be recognisable as a link. Red arrives on hover for both. */
a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(140, 43, 30, 0.55);
  text-decoration-thickness: 0.035em;
  text-underline-offset: 0.24em;
}

a:hover {
  text-decoration-color: var(--rub);
  color: var(--rub);
}

.meta a,
p.crumbs a {
  text-decoration-color: rgba(110, 106, 98, 0.6);
  text-underline-offset: 0.2em;
}

.meta a:hover,
p.crumbs a:hover {
  text-decoration-color: var(--rub);
  color: var(--rub);
}

/* Keyboard users get a real ring in the site's own colour rather than the
   browser default, which is a blue box over a warm page. */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--rub);
  outline-offset: 3px;
  border-radius: 1px;
}

::selection { background: rgba(140, 43, 30, 0.14); }

nav.site {
  margin-top: 2.2rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--hair);
  display: flex;
  gap: 1.6rem;
  font-size: 1.12rem;
}

nav.site a {
  color: var(--muted);
  text-decoration: none;
}

nav.site a:hover,
nav.site a[aria-current] { color: var(--rub); }

/* Top nav on inner pages: a masthead at one width on every page, name hard
   left and rooms hard right, so the chrome holds still while the content
   measure changes under it. The explicit width matters – body is a flex column
   and the auto side margins would otherwise cancel the stretch, leaving the
   nav shrink-wrapped around its own text and the name's auto right margin
   doing nothing. */
nav.site.top {
  width: 100%;
  max-width: 60rem;
  margin: 0 auto;
  padding: 1.4rem 1.5rem 0;
  border-top: none;
  font-size: 1.05rem;
}

nav.site.top a:first-child {
  color: var(--ink);
  margin-right: auto;
}

/* On a phone the five items don't fit on one line. The name takes a whole row
   of its own and the four rooms sit under it; letting them wrap freely instead
   strands Contact alone on the second line. */
@media (max-width: 34rem) {
  nav.site.top {
    flex-wrap: wrap;
    gap: 0.45rem 1.1rem;
  }

  nav.site.top a:first-child {
    flex: 0 0 100%;
    margin-right: 0;
  }
}

/* Continuous-prose pages (research, ursprung, contact). */
main.textpage {
  max-width: 41rem;
  padding: 3rem 1.5rem 5rem;
}

/* Impressum and Datenschutz. Small type, quiet headings – legal text should
   sit below the reading register, not compete with it. */
main.legal { font-size: 1.08rem; }

main.legal h2 {
  font-size: 1.02rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 2.6rem 0 0.7rem;
}

main.legal address { font-style: normal; }
main.legal ul { margin: 0 0 1.1rem; padding-left: 1.2rem; }

/* Fine print. Sits at the foot of the window on short pages rather than
   floating wherever the content happens to stop, and takes the measure of
   whatever main it follows. */
body:has(> footer.fine) {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

footer.fine {
  max-width: 32rem;
  width: 100%;
  margin: auto auto 0;
  padding: 3rem 1.5rem 2rem;
  display: flex;
  gap: 1.4rem;
  font-size: 0.92rem;
  color: var(--muted);
}

main.textpage + footer.fine { max-width: 41rem; }

main.gallery + footer.fine,
main.artindex + footer.fine { max-width: 60rem; }

footer.fine a { color: var(--muted); text-decoration: none; }
footer.fine a:hover { color: var(--rub); }

.record {
  margin-top: 3rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--hair);
  font-size: 1.06rem;
}

.record h2 {
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1rem;
}

/* Section label in the metadata register. Breaks a long text page into blocks
   the eye can find without adding more rules to the page. */
h2.label {
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 2.8rem 0 1rem;
}

.record ol,
.record ul { list-style: none; margin: 0 0 1.2rem; padding: 0; }
.record li { margin: 0 0 0.8rem; text-indent: -1.1rem; padding-left: 1.1rem; }

/* Publications. The year hangs in the left margin, the way the Ursprung
   ordinals do, so the record can be scanned by date without reading it. */
ol.pubs li {
  margin: 0 0 1rem;
  padding-left: 3.4rem;
  text-indent: -3.4rem;
}

ol.pubs .yr {
  display: inline-block;
  width: 3.4rem;
  text-indent: 0;
  font-size: 0.89em;
  letter-spacing: 0.02em;
  color: var(--muted);
}
.record .venue,
.record p { color: var(--muted); }

/* Dated lines that sit under a block without competing with it: the homepage
   "currently", the van year under the Ursprung gatherings. */
p.currently,
p.origin {
  margin-top: 1.7rem;
  font-size: 1.06rem;
  color: var(--muted);
}

/* Schematics sit at the reading measure, not blown up: they carry the sense of
   the object without asking to be decoded. Clicking opens the full file. */
figure.band {
  width: 100%;
  margin: 2.2rem 0 2.4rem;
}

figure.band a { text-decoration: none; }
figure.band img { display: block; width: 100%; height: auto; }

figure.band figcaption {
  margin: 0.8rem 0 0;
  font-size: 1.02rem;
  color: var(--muted);
}

.qual { color: var(--muted); }

/* Listing metadata: place, date, who with. Set in caps at a smaller size so it
   reads as a different register and the eye can skip it, not just a paler
   version of the same sentence. The subsetted Cormorant has neither lining
   figures nor real small caps, and its default digits sit below cap height, so
   numerals need their own size to stop looking shrunken next to the caps. Wrap
   every year or number in <span class="n">. */
.meta {
  color: var(--muted);
  text-transform: uppercase;
  font-size: 0.72em;
  letter-spacing: 0.07em;
  padding-left: 0.5rem;
}

.meta .n { font-size: 1.24em; letter-spacing: 0.02em; }

/* A description under an entry, so the title and its metadata stay together on
   the first line instead of the metadata stranding after a wrapped sentence.
   It sets flush: the hanging indent on the list item exists to let the title
   line hang, and there is nothing in the margin for a description to hang on. */
.desc { display: block; text-indent: 0; }

/* Contact. One target per line so the right link is obvious and easy to hit. */
ul.links {
  list-style: none;
  margin: 1.9rem 0 0;
  padding: 0;
  font-size: 1.14rem;
}

ul.links li { margin: 0 0 0.85rem; }
ul.links .qual { font-size: 0.92em; padding-left: 0.4rem; }
ul.links + ul.links { margin-top: 1.5rem; }

/* Research strands. */
ul.strands {
  list-style: none;
  margin: 1.1rem 0 1.4rem;
  padding: 0;
}

ul.strands li {
  margin: 0 0 0.55rem;
  padding-left: 1.1rem;
  text-indent: -1.1rem;
}

/* The Ursprung gatherings. Body-size, not record-size – this is the page's
   substance, not its fine print. Ordinal hangs in the left margin. */
ul.gatherings {
  list-style: none;
  margin: 2.1rem 0 1.2rem;
  padding: 0;
}

ul.gatherings li {
  margin: 0 0 0.6rem;
  padding-left: 2.4rem;
  text-indent: -2.4rem;
}

/* Status on a gathering line: sits with the metadata but stays in the reading
   register, because it is a live invitation rather than a filing detail. */
ul.gatherings .open {
  padding-left: 0.5rem;
  font-size: 0.9em;
}

ul.gatherings .ord {
  display: inline-block;
  width: 2.4rem;
  text-indent: 0;
  letter-spacing: 0.06em;
  color: var(--muted);
}