/* GENERATED — do not edit. Source: src/styles/global.css
 * Regenerate with: node scripts/theme-assets.mjs
 * Changes made here are lost on the next sync; edit the Astro source instead.
 */

/* Hallmark · genre: editorial · macrostructure: Letter · theme: studied-DNA
 * source: src/content/photos/tower-1900.jpg · palette sampled, not chosen
 * tone: archival / epistolary · anchor hue: 25 (the tower's brick)
 * audience: Belgrade's Hungarian community, the Serbian public, EU project partners
 * use case: read who the society is, then write to it
 * nav: N9 edge-aligned + quiet link row · footer: Ft6 letter close
 * hero: H5 Letter (place · salutation · prose · aims · signed in the footer)
 * section heads: S2 stacked · features: F3 tabular register · cta: C3 typographic link
 * enrichment: the society's own 1900 postcard, multiplied into the paper
 * axes: paper-band=light · display-style=classical-serif · accent-hue=warm
 * motion: page-load reveal · underline thicken (2 primitives)
 * javascript: none — the whole site ships 0 bytes of it
 * colour-scheme: light only, by design — see the note in tokens.css
 * pre-emit critique: P5 H5 E5 S5 R5 V5
 */

/* ─────────────────────────────────────────────────────────── reset ─────── */

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

html {
  overflow-x: clip;            /* clip, never hidden — hidden breaks sticky */
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  overflow-x: clip;
  min-height: 100dvh;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.62;
  color: var(--color-ink);
  background-color: var(--color-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: oldstyle-nums;
}
img, svg, video { display: block; max-width: 100%; }
ul, ol { list-style: none; padding: 0; }

::selection { background: var(--color-selection); color: var(--color-ink); }

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
  /* never transitioned — a focus ring that animates in reads as lag */
}

/* ──────────────────────────────────────────────────────── typography ───── */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-style: normal;                     /* headers are roman. always. */
  font-weight: 400;                       /* Old Standard TT carries at 400 */
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
  overflow-wrap: anywhere;
  min-width: 0;
}
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-lg); }

p, li { text-wrap: pretty; }

a { color: inherit; }

/* Editor-authored Markdown lands here. The global `ul, ol { list-style: none }`
   reset is correct for nav and layout lists and wrong for prose, so prose puts
   the markers back and re-scopes heading sizes — a body-copy h2 must not be set
   at the same size as a page title. */
.prose { max-width: var(--measure); hyphens: auto; }
.prose > * + * { margin-block-start: var(--space-lg); }

.prose h2 { font-size: var(--text-lg); margin-block-start: var(--space-2xl); }
.prose h3 { font-size: var(--text-md); margin-block-start: var(--space-xl); }
.prose h4 { font-size: var(--text-base); margin-block-start: var(--space-lg); }
.prose :is(h2, h3, h4) + * { margin-block-start: var(--space-sm); }

.prose :is(ul, ol) { padding-inline-start: var(--space-lg); }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-block-start: var(--space-xs); }
.prose li::marker { color: var(--color-neutral); }
.prose li > :is(ul, ol) { margin-block-start: var(--space-xs); }

.prose blockquote {
  border-inline-start: 2px solid var(--color-accent);
  padding-inline-start: var(--space-lg);
  color: var(--color-muted);
}
.prose blockquote em, .prose p em { font-style: italic; }   /* italic is body-only */

.prose hr { border: 0; border-block-start: var(--rule-hair) solid var(--color-rule); }
.prose img { margin-block: var(--space-xl); }
.prose figcaption { font-size: var(--text-sm); color: var(--color-muted); }
.prose code {
  font-size: 0.9em;
  background: var(--color-paper-3);
  padding: 0.1em 0.32em;
  border-radius: var(--radius-sm);
}
.prose strong { font-weight: 600; }
.prose a {
  color: var(--color-accent-ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.lede {
  font-size: var(--text-md);
  line-height: 1.5;
  max-width: var(--measure-tight);
  color: var(--color-muted);
}

/* Record marks — the outlier face carries exactly one role: machine-set data.
   Register numerals, dates, and colophon metadata. Nothing else. */
.mark {
  font-family: var(--font-mark);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--color-muted);
}

/* ───────────────────────────────────────────────────────────  layout ───── */

.page {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: max(var(--page-pad), env(safe-area-inset-left));
}

.skip {
  position: absolute;
  inset-inline-start: var(--space-md);
  inset-block-start: var(--space-md);
  z-index: var(--z-modal);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-ink);
  font-weight: 600;
  white-space: nowrap;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

/* Section rhythm is deliberately uneven — a section that opens the page gets
   more air above than one that closes it. */
.section { padding-block: clamp(2.75rem, 7vw, 5.5rem); }
.section--tight { padding-block: clamp(2rem, 4.5vw, 3.25rem); }
.section--open  { padding-block: clamp(3.5rem, 9vw, 7rem) clamp(2.5rem, 6vw, 4.5rem); }

.section__head { margin-block-end: var(--space-xl); }   /* stacked. single column. */
.section__title { font-size: var(--text-xl); }
.section__note {
  margin-block-start: var(--space-sm);
  max-width: var(--measure-tight);
  color: var(--color-muted);
  font-size: var(--text-base);
}

.rule       { border: 0; border-block-start: var(--rule-hair) solid var(--color-rule); }
.rule--firm { border-block-start: var(--rule-hair) solid var(--color-rule-firm); }
.rule--thick{ border-block-start: var(--rule-thick) solid var(--color-ink); }

/* ──────────────────────── N9 · edge-aligned masthead + link row ───────── */

.masthead { padding-block: var(--space-md) 0; }

.masthead__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-xs) var(--space-md);
}

/* The crest is the letterhead — the only place the tower appears on a page
   with no photograph, which is every page but the home page. */
.masthead__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  text-decoration: none;
  color: inherit;
}
.masthead__crest {
  inline-size: auto;
  block-size: 2rem;
  flex: none;
  color: var(--color-rule-firm);
}
.masthead__crest path { stroke-width: 5; opacity: 1; }
.masthead__wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-md);
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.masthead__brand:hover .masthead__wordmark,
.masthead__brand:focus-visible .masthead__wordmark {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--color-accent);
  text-underline-offset: 0.2em;
}
.masthead__brand:active { color: var(--color-accent-ink); }

.locales { display: flex; gap: var(--space-xs); align-items: baseline; }
.locales__item {
  text-decoration: none;
  white-space: nowrap;
  padding-block: var(--space-2xs);
}
.locales__item[aria-current='true'] { color: var(--color-accent-ink); }
.locales__sep { color: var(--color-rule-firm); }
.locales__item:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--color-accent);
  text-underline-offset: 0.2em;
}

/* The quiet row. Sentence case in the mark face at --text-sm: present on every
   page, subordinate to the wordmark on all of them. It wraps rather than
   collapsing into a disclosure — six links fit on two lines at 320px, and a
   <details> menu would be a third interactive pattern for no gain. */
.masthead__nav {
  margin-block-start: var(--space-sm);
  border-block-start: var(--rule-hair) solid var(--color-rule);
  padding-block: var(--space-sm);
}
.navlist {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-lg);
}
.navlist__link {
  display: inline-block;
  font-family: var(--font-mark);
  font-size: var(--text-sm);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--color-muted);
  text-decoration: none;
  white-space: nowrap;                   /* the row wraps; a label never does */
  padding-block: var(--space-2xs);
  min-height: 1.75rem;
  transition: color var(--dur-short) var(--ease-out);
}
.navlist__link:hover { color: var(--color-ink); }
.navlist__link:active { color: var(--color-accent-ink); }
.navlist__link[aria-current='page'] {
  color: var(--color-ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--color-accent);
  text-underline-offset: 0.25em;
}
@media (pointer: coarse) {
  .navlist__link { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ───────────────────────────────────────── H5 · the letter sheet ──────── */

.sheet { padding-block: var(--space-xl) var(--space-3xl); }

/* The postcard. `multiply` is the whole idea: the paper shows through the
   card's highlights, so the photograph is printed into the page rather than
   placed on top of it. The mask fades all four edges into the paper — without
   it the image ends on a hard rectangle and the illusion goes. */
.plate { margin: 0 calc(-1 * var(--page-pad)) var(--space-xl); }
.plate picture {
  display: block;
  block-size: 17rem;
  overflow: clip;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 6%, #000 60%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 6%, #000 60%, transparent);
}
.plate__img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: 50% 0%;
  opacity: var(--plate-opacity);
  mix-blend-mode: var(--plate-blend);
}
.plate__credit { padding: var(--space-xs) var(--page-pad) 0; text-align: end; }

.letter { max-width: var(--measure); }
.letter__place { margin-block-end: var(--space-xl); }
.letter__salutation {
  font-size: var(--text-display-s);
  font-weight: 400;
  margin-block-end: var(--space-lg);
}
.letter__p { margin-block-end: var(--space-md); }
/* An indent, not a blank line: the paragraphs of a letter run on. The first
   one after a heading or the salutation is flush, as typesetting requires. */
.letter__p + .letter__p { text-indent: 2ch; }

.letter__aims {
  list-style: decimal;
  padding-inline-start: 2ch;
  margin-block: var(--space-md) var(--space-lg);
}
.letter__aims li { padding-inline-start: var(--space-xs); margin-block-end: var(--space-2xs); }
.letter__aims li::marker { color: var(--color-accent-ink); font-variant-numeric: lining-nums; }

.letter__break {
  border: 0;
  text-align: center;
  margin-block: var(--space-xl);
  color: var(--color-neutral);
  letter-spacing: 1ch;
}
.letter__break::before { content: '* * *'; text-indent: 1ch; display: inline-block; }

.letter__head {
  font-size: var(--text-md);
  font-weight: 700;
  margin-block: var(--space-lg) var(--space-xs);
}

.letter__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
  margin-block: var(--space-lg);
}

@media (min-width: 60rem) {
  .sheet {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 42%);
    gap: var(--space-2xl);
    padding-block: var(--space-2xl) var(--space-4xl);
  }
  /* Sticky, so the tower stays beside the reader the whole way down. */
  .plate {
    grid-column: 2;
    grid-row: 1;
    margin: 0 calc(-1 * var(--page-pad)) 0 0;
    position: sticky;
    top: 0;
    align-self: start;
    display: flex;
    flex-direction: column;
    max-block-size: 100svh;
  }
  .plate picture {
    flex: 1;
    min-block-size: 0;
    block-size: auto;
    -webkit-mask-image:
      linear-gradient(to right, transparent, #000 28%, #000 90%, transparent),
      linear-gradient(to bottom, transparent, #000 6%, #000 76%, transparent);
            mask-image:
      linear-gradient(to right, transparent, #000 28%, #000 90%, transparent),
      linear-gradient(to bottom, transparent, #000 6%, #000 76%, transparent);
    -webkit-mask-composite: source-in;
            mask-composite: intersect;
  }
  .plate__credit { padding: 0 var(--space-xl) var(--space-lg) 0; }
  .letter { grid-column: 1; grid-row: 1; }
}

/* ────────────────────────────────── prose beside a drawing ────────────── */
/* Used by the About page, which is the one page whose subject is the society
   rather than an event or a photograph. The engraving carries 1896 there the
   way the postcard carries it on the home page. */

.withmark { display: grid; gap: var(--space-xl); align-items: start; }
.withmark__mark {
  inline-size: auto;
  block-size: clamp(8rem, 26vw, 12rem);
  color: var(--color-rule-firm);
  justify-self: start;
}
@media (min-width: 60rem) {
  .withmark { grid-template-columns: minmax(0, 1fr) minmax(0, 0.5fr); gap: var(--space-3xl); }
  .withmark__mark { justify-self: center; }
}

/* ───────────────────────────────── F3 · the aims, as a register ───────── */

.register { border-block-start: var(--rule-hair) solid var(--color-rule-firm); }

.register__row {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: var(--space-sm) var(--space-md);
  align-items: baseline;
  padding-block: var(--space-lg);
  border-block-end: var(--rule-hair) solid var(--color-rule);
}
.register__n {
  font-family: var(--font-mark);
  font-size: var(--text-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-accent-ink);
  letter-spacing: 0.04em;
}
.register__text {
  font-size: var(--text-md);
  line-height: 1.42;
  max-width: 52ch;
  hyphens: auto;
}

@media (min-width: 48rem) {
  .register__row { grid-template-columns: 4rem minmax(0, 1fr); padding-block: var(--space-xl); }
  .register__text { font-size: var(--text-lg); line-height: 1.32; }
}

/* ─────────────────────────────────── photographic plates ─────────────── */

/* Vertical cards carousel. The live card is centred and full strength; its
   neighbours peek above and below, scaled down and darkened. `:target` picks
   the live card, `:has()` reads it back to set --active, and the track slides
   by --active * --step. All anchors, no JavaScript. */
.carousel {
  position: relative;
  --card-h: clamp(8.5rem, 19vw, 12rem);
  --card-gap: var(--space-sm);
  --step: calc(var(--card-h) + var(--card-gap));
  --view-h: calc(var(--step) * 2.62);
  --active: 0;

  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: center;
}
.carousel--full { --card-h: clamp(9.5rem, 22vw, 14.5rem); }

.carousel__viewport {
  block-size: var(--view-h);
  overflow: hidden;
  position: relative;
  /* the stack fades out at both ends rather than being cut by a hard edge */
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
}

.carousel__track {
  display: grid;
  gap: var(--card-gap);
  justify-items: center;
  transform: translateY(calc((var(--view-h) - var(--card-h)) / 2 - var(--active) * var(--step)));
  transition: transform var(--dur-long) var(--ease-out);
}

/* Zero-size, never moves, carries the id. scroll-margin keeps the carousel
   clear of the masthead when the browser jumps to it. */
.carousel__anchor {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 1px;
  block-size: 1px;
  scroll-margin-block-start: clamp(4rem, 14vh, 9rem);
}

.carousel__card {
  block-size: var(--card-h);
  aspect-ratio: 4 / 3;
  opacity: 0.34;
  transform: scale(0.82);
  filter: brightness(0.45) saturate(0.55);
  transition: opacity var(--dur-long) var(--ease-out),
              transform var(--dur-long) var(--ease-out),
              filter var(--dur-long) var(--ease-out);
}
/* The live card is set by the generated rules in PlateGallery.astro. */

.carousel__frame { position: relative; display: block; block-size: 100%; }
.carousel__inline { display: none; }        /* the swipe strip's caption, below 60rem */
.carousel__link { display: block; block-size: 100%; }
.carousel__link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.carousel__img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }

/* ── the caption beside the stack ──────────────────────────────────────── */
.carousel__texts { display: grid; }
.carousel__panel {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-long) var(--ease-out), visibility 0s linear var(--dur-long);
}
.carousel__panel[data-shown],
.carousel__panel:where(.is-on) { opacity: 1; visibility: visible; }

.carousel__index { color: var(--color-accent-ink); font-variant-numeric: tabular-nums; }
.carousel__total { color: var(--color-neutral); }
.carousel__caption {
  margin-block-start: var(--space-md);
  font-size: var(--text-md);
  line-height: 1.45;
  max-width: 40ch;
  hyphens: auto;
}
.carousel__credit { margin-block-start: var(--space-md); }
.carousel__credit a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }

.carousel__nav { display: flex; gap: var(--space-sm); margin-block-start: var(--space-lg); }
.carousel__arrow {
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border: var(--rule-hair) solid var(--color-rule-firm);
  color: var(--color-ink);
  text-decoration: none;
  font-size: var(--text-md);
  line-height: 1;
  transition: background-color var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out);
}
.carousel__arrow:hover,
.carousel__arrow:focus-visible { background-color: var(--color-paper-3); border-color: var(--color-ink); }
.carousel__arrow:active { background-color: var(--color-paper-2); }

@media (min-width: 48rem) {
  .carousel { grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2xl); }
}

/* Photographs are the one thing here that cannot restate itself for a dark
   surface, so take the glare off rather than leaving them shining. */
@media screen and (prefers-color-scheme: dark) {
  .carousel__img { filter: brightness(0.92) saturate(0.96); }
}

@media (prefers-reduced-motion: reduce) {
  .carousel__track,
  .carousel__card,
  .carousel__panel { transition-duration: 150ms; }
}

/* ── below 60rem the stack becomes a swipeable strip ───────────────────────
   The vertical stack with two small arrows is a desktop idiom. On a phone it
   asks for precise taps on 2.75rem targets to move one photograph, so readers
   scrolled past the gallery instead of using it.

   Here the track becomes a native horizontal scroll-snap container: one thumb
   swipe per photograph, momentum, and the rubber-banding the platform already
   provides. No JavaScript, and nothing hijacks the page's vertical scroll —
   the reader can still leave whenever they want, which is the part scroll
   capture usually gets wrong.

   Because native scrolling leaves no `:target` behind, CSS cannot tell which
   photograph is in view, so the single caption beside the stack cannot follow
   it. Each slide carries its own caption instead. */

@media (max-width: 60rem) {
  .carousel { gap: var(--space-lg); }

  .carousel__viewport {
    block-size: auto;
    overflow: visible;
    -webkit-mask-image: none;
            mask-image: none;
  }

  .carousel__track {
    display: flex;
    gap: var(--space-md);
    transform: none;
    transition: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    /* bleed to the screen edges so a slide can sit centred */
    padding-inline: var(--page-pad);
    margin-inline: calc(-1 * var(--page-pad));
    scroll-padding-inline: var(--page-pad);
    scrollbar-width: none;
  }
  .carousel__track::-webkit-scrollbar { display: none; }

  .carousel__card {
    flex: 0 0 min(78%, 22rem);
    block-size: auto;
    aspect-ratio: auto;
    scroll-snap-align: center;
    /* every slide is live; dimming the neighbours is a stack idea */
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
  .carousel__frame { aspect-ratio: 4 / 3; block-size: auto; }

  /* Tapping any photograph opens it. There is no centred card to single out. */
  .carousel__open { display: block; }
  .carousel__select { display: none; }

  .carousel__inline { display: block; margin-block-start: var(--space-sm); }
  .carousel__inline .carousel__caption {
    margin-block-start: var(--space-xs);
    font-size: var(--text-base);
    max-width: none;
  }
  .carousel__inline .carousel__credit { margin-block-start: var(--space-xs); }

  /* The panel beside the stack and the arrows are both stack furniture. */
  .carousel__texts { display: none; }
}

/* ───────────────────────────────── an entry's photograph ──────────────── */
/* The image an event or a news post is illustrated with. It links into the
   photographs viewer at the same plate, so the article and the register are one
   collection rather than two copies of the same picture. */

.entry__cover { margin: var(--space-2xl) 0 0; max-width: var(--measure); }
.entry__cover a { display: block; }
.entry__cover-img { inline-size: 100%; block-size: auto; }
.entry__cover a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.entry__cover-credit {
  margin-block-start: var(--space-sm);
  text-transform: none;
  letter-spacing: 0;
}

/* ────────────────────────────────── the viewer (no JavaScript) ────────── */
/* A plate opens full-screen through `:target`, the same mechanism the carousel
   itself runs on. Opening and closing are ordinary link navigations, so the
   browser Back button closes the viewer — which is what a reader expects on a
   phone, and something a scripted lightbox usually has to reimplement.
   What this cannot do: close on Escape, trap focus inside the dialog, or move
   between plates with the arrow keys. Those need JavaScript. */

.carousel__select,
.carousel__open { position: absolute; inset: 0; z-index: var(--z-raised); }
.carousel__open { display: none; }          /* the generated rules swap these */
.carousel__expand { margin-block-start: var(--space-md); }

.lightbox { display: none; }
.lightbox:target {
  display: grid;
  grid-template-rows: 1fr auto;
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  padding: clamp(var(--space-md), 4vw, var(--space-2xl));
  background: color-mix(in oklab, var(--color-paper) 92%, var(--color-ink));
}

/* The backdrop is a link, so a click anywhere outside the photograph closes.
   tabindex="-1" in the markup keeps it out of the tab order: the close button
   is the affordance a keyboard user should land on. */
.lightbox__backdrop { position: absolute; inset: 0; }

.lightbox__figure {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: var(--space-md);
  justify-items: center;
  min-block-size: 0;
  margin: 0;
}
.lightbox__img {
  max-inline-size: 100%;
  max-block-size: 100%;
  inline-size: auto;
  block-size: auto;
  object-fit: contain;
}
.lightbox__caption {
  display: grid;
  gap: var(--space-2xs);
  justify-items: center;
  text-align: center;
  max-width: var(--measure);
}
.lightbox__index { color: var(--color-accent-ink); }
.lightbox__text { font-family: var(--font-display); }
.lightbox__credit { text-transform: none; letter-spacing: 0; }

.lightbox__close,
.lightbox__nav {
  position: absolute;
  z-index: var(--z-raised);
  display: grid;
  place-items: center;
  inline-size: 3rem;
  block-size: 3rem;
  font-size: var(--text-md);
  text-decoration: none;
  color: var(--color-muted);
  border: var(--rule-hair) solid var(--color-rule);
  background: var(--color-paper);
  transition: color var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out);
}
.lightbox__close:hover,
.lightbox__nav:hover { color: var(--color-ink); border-color: var(--color-rule-firm); }
.lightbox__close:active,
.lightbox__nav:active { color: var(--color-accent-ink); }

.lightbox__close { inset-block-start: var(--space-md); inset-inline-end: var(--space-md); }
.lightbox__nav--prev { inset-inline-start: var(--space-md); inset-block-start: 50%; translate: 0 -50%; }
.lightbox__nav--next { inset-inline-end: var(--space-md); inset-block-start: 50%; translate: 0 -50%; }

@media (max-width: 40rem) {
  /* On a phone the arrows sit under the photograph rather than over it: at
     3rem square on a 320px screen they would cover a third of the image. Two
     columns so each arrow owns one, rather than percentage widths that clip
     against the padding. */
  .lightbox:target {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    align-content: center;
    gap: var(--space-lg) var(--space-md);
  }
  .lightbox__figure { grid-column: 1 / -1; grid-row: 1; }
  /* Cap the image so the caption and the arrows stay on screen together. */
  .lightbox__img { max-block-size: 52svh; }
  .lightbox__nav {
    position: static;
    translate: none;
    grid-row: 2;
    inline-size: 100%;
    block-size: 2.75rem;
  }
  .lightbox__nav--prev { grid-column: 1; }
  .lightbox__nav--next { grid-column: 2; }
}

/* ──────────────────────────────────────── entry list (events / news) ──── */

.entries { border-block-start: var(--rule-hair) solid var(--color-rule-firm); }

.entry {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2xs);
  padding-block: var(--space-lg);
  border-block-end: var(--rule-hair) solid var(--color-rule);
}
.entry__title { font-size: var(--text-md); }
.entry__title a { text-decoration: none; }
.entry__title a::after { content: ''; position: absolute; inset: 0; }  /* whole row is the target */
.entry:hover .entry__title { color: var(--color-accent-ink); }
.entry__summary { color: var(--color-muted); max-width: var(--measure); }
/* A date never breaks inside itself; a range (WordPress events) breaks after its dash. */
.entry__meta time { white-space: nowrap; }

@media (min-width: 48rem) {
  .entry { grid-template-columns: 10rem minmax(0, 1fr); column-gap: var(--space-xl); align-items: baseline; }
  .entry__meta { grid-row: span 2; }
}

.empty {
  padding-block: var(--space-2xl);
  border-block: var(--rule-hair) solid var(--color-rule);
}
.empty__title { font-size: var(--text-lg); max-width: var(--measure-tight); }
.empty__body {
  margin-block: var(--space-sm) var(--space-lg);
  color: var(--color-muted);
  max-width: var(--measure);
}

/* ──────────────────────────────────── C3 · typographic link CTA ───────── */

.tlink {
  position: relative;
  display: inline-block;
  font-weight: 600;
  color: var(--color-accent-ink);
  text-decoration: none;
  white-space: nowrap;
  padding-block-end: var(--space-3xs);
  min-height: 24px;
}
.tlink::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 2px;
  background: currentColor;
  transform: scaleY(0.5);
  transform-origin: bottom;
  transition: transform var(--dur-short) var(--ease-out);
}
.tlink:hover::after,
.tlink:focus-visible::after { transform: scaleY(1); }
.tlink:active { transform: translateY(1px); }
.locales__item:active { color: var(--color-accent-ink); }

@media (pointer: coarse) { .tlink { min-height: 44px; display: inline-flex; align-items: center; } }

/* ───────────────────────────────────────────── contact / details ──────── */

.details { display: grid; gap: var(--space-lg); max-width: var(--measure); }
.details__row {
  display: grid;
  gap: var(--space-3xs);
  padding-block-end: var(--space-md);
  border-block-end: var(--rule-hair) solid var(--color-rule);
}
.details__label {
  font-family: var(--font-mark);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.details__value { font-size: var(--text-md); }
.details__value a { text-decoration-thickness: 1px; text-underline-offset: 0.18em; }

/* ───────────────────────────────────────── Ft6 · letter close ─────────── */

.colophon {
  margin-block-start: var(--space-2xl);
  border-block-start: var(--rule-hair) solid var(--color-rule);
  padding-block: var(--space-2xl);
  padding-block-end: max(var(--space-2xl), env(safe-area-inset-bottom));
}
.colophon .page > * { max-width: var(--measure); }

.colophon__signoff {
  font-family: var(--font-display);
  font-size: var(--text-md);
  line-height: 1.45;
}
.colophon__sender { font-weight: 700; }

.colophon__address { margin-block-start: var(--space-xs); }
.colophon__note {
  margin-block-start: var(--space-lg);
  color: var(--color-muted);
}
.colophon__ps { margin-block-start: var(--space-md); }
.colophon__ps-label { font-weight: 700; }

.colophon__meta {
  margin-block-start: var(--space-2xl);
  padding-block-start: var(--space-sm);
  border-block-start: var(--rule-hair) solid var(--color-rule);
  display: grid;
  gap: var(--space-xs);
}
.colophon__links { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); }
.colophon__link {
  font-family: var(--font-mark);
  font-size: var(--text-sm);
  color: var(--color-muted);
  text-decoration: none;
  white-space: nowrap;
  padding-block: var(--space-2xs);
}
.colophon__link:hover { color: var(--color-ink); text-decoration: underline; text-decoration-thickness: 2px; }
.colophon__link:active { color: var(--color-accent-ink); }
@media (pointer: coarse) {
  .colophon__link { min-height: 44px; display: inline-flex; align-items: center; }
}
.colophon .mark { text-transform: none; letter-spacing: 0; font-weight: 400; }

/* Build credit. The signature is a CSS mask rather than an inline <svg>: its
   path data is ~17 KB, which would have roughly tripled every page's HTML,
   whereas a mask is fetched once for the whole site and still takes
   currentColor, so it follows the theme and the hover state. The name stays in
   the DOM as real text, so it is both the accessible name and the rendering
   for anything without mask support. */
.credit__link {
  position: relative;
  color: var(--color-muted);
  text-decoration: none;
  transition: color var(--dur-short) var(--ease-out);
}
.credit__link:hover,
.credit__link:focus-visible { color: var(--color-ink); }
.credit__link:active { color: var(--color-accent-ink); }

/* Default, and the fallback anywhere CSS masks are unavailable: the name set
   in type. The signature only replaces it inside the @supports block. */
.credit__name { text-transform: none; letter-spacing: 0.01em; font-weight: 600; }
.credit__sig { display: none; }

@supports ((mask-image: url('#a')) or (-webkit-mask-image: url('#a'))) {
  /* Visually hidden, still the link's accessible name. */
  .credit__name {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    white-space: nowrap;
    clip-path: inset(50%);
  }
  .credit__sig {
    display: inline-block;
    inline-size: 8.2em;
    block-size: 1.283em;          /* inline-size ÷ 6.392, the signature's aspect */
    vertical-align: -0.3em;
    background-color: currentColor;
    -webkit-mask: url('../img/signature-nikodinovski.svg') no-repeat center / contain;
    mask: url('../img/signature-nikodinovski.svg') no-repeat center / contain;
  }
}

/* ────────────────────────────────────────────────────────── motion ────── */

/* One orchestrated entrance, on the fold only. Not on every section. */
.reveal {
  opacity: 0;
  transform: translateY(10px);
  animation: reveal var(--dur-long) var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes reveal { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 150ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
  }
  .reveal { transform: none; animation-name: reveal-reduced; animation-delay: 0ms; }
  @keyframes reveal-reduced { to { opacity: 1; } }
}

/* ─────────────────────────────────────────────────────────── print ────── */

@media print {
  .masthead__nav, .navsheet, .locales, .skip { display: none; }
  .colophon { background: none; }
  .tlink::after, .navlist__link::after { display: none; }
}