/*
 * Visual spec: reference/screenshots/{desktop,mobile}/index.png.
 * Colours, spacing and type sizes are measured from the 1440px desktop capture;
 * the layout collapses to the single column of the iPhone 13 capture.
 * Every interaction here is CSS or native HTML. The one module the site loads
 * is the galéria's, and it only moves a picture the page already links to into
 * a dialog, so nothing below depends on script having run.
 */

/* The faces are served from this origin, so the look never depends on a third
   party staying the same (PRODUCT.md, F5, F6). */
@font-face {
  font-family: "Geist";
  src: url("/fonts/geist-latin.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 100 900;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Geist";
  src: url("/fonts/geist-latin-ext.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 100 900;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

/*
 * The figures in the támogatások table are set in the monospace face the
 * original used for that whole block, so that sums of the same size are the
 * same width and can be compared down a column. Self-hosted; licence in
 * public/fonts/OFL-Inconsolata.txt.
 */
@font-face {
  font-family: "Inconsolata";
  src: url("/fonts/inconsolata-latin.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inconsolata";
  src: url("/fonts/inconsolata-latin-ext.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

:root {
  --ink: #031911;
  --green: #2d9b57;
  --green-dark: #248047;
  --cream: #f4f3ec;
  /* The green washed out: the homepage's own texts, an appeal. The same in
     both stylesheets. */
  --green-wash: #e3f1e7;
  --gray: #6a6d6c;
  --nav-ink: #222222;
  --line: rgba(3, 25, 17, 0.1);
  --radius: 0.75rem;
  --gutter: 1rem;
  --container: 72.5rem;
  /*
   * The measure: the width running text is set to, which is not the width of
   * the page. Body text renders at about 6.4px a character here, so 30rem is a
   * line of roughly 75 — inside the 50-80 a reader scans without losing the
   * return. The container's own 72.5rem would run a paragraph past 180.
   */
  --measure: 30rem;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  position: relative;
  background: #ffffff;
  color: var(--ink);
  font-family: "Geist", system-ui, sans-serif;
  font-size: 0.875rem;
  line-height: 1.4286;
  overflow-wrap: break-word;
}

p {
  margin: 0 0 0.625rem;
}

h1,
h2,
h3 {
  margin: 1.25rem 0 0.625rem;
  font-weight: 700;
}

h1,
.display-1 {
  font-size: 2.375rem;
  line-height: 1.158;
}

h2,
.display-2 {
  font-size: 2rem;
  line-height: 1.125;
}

h3,
.display-3 {
  font-size: 1.5rem;
  line-height: 1.25;
}

img {
  max-width: 100%;
  height: auto;
}

/* The original leaves links unadorned and tells them apart by colour alone.
   Green on ink clears 3:1, and the underline returns on hover so the
   distinction never rests on colour by itself. */
a {
  color: var(--green);
  text-decoration: none;
  text-underline-offset: 0.15em;
}

a:hover {
  color: var(--green-dark);
  text-decoration: underline;
}

.brand:hover,
.button:hover,
.nav-link:hover,
.nav-sublist a:hover {
  text-decoration: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.container {
  width: min(var(--container), 100% - 2 * var(--gutter));
  margin-inline: auto;
}

.section {
  padding-block: 5rem;
}

.credit {
  margin-top: 1.25rem;
  font-style: italic;
}

.section > .container > :first-child {
  margin-top: 2rem;
}

/*
 * A homepage section opens the same distance below its title as a page does:
 * the 4rem the vendégkönyv takes before its letters, which every page takes
 * below its own title. Moving from the homepage into Hírek or Pályázat
 * should not change the pitch of the page under the reader.
 *
 * Only a title that leads its section. The rövidfilm's h2 sits *under* the
 * film it names — it is a caption, and pushing the text 4rem off it would part
 * it from the thing it is about.
 */
.section > .container > h2:first-child + *,
.section > .container > .faq-heading:first-child + * {
  margin-top: 4rem;
}

/*
 * The homepage's own prose, held to the same measure as the pages'. Centred
 * paragraphs are excluded: they carry a button or a caption, and narrowing the
 * box would centre it against the measure rather than against the page.
 */
.section > .container > .rich-body,
.section > .container > p:not(.center) {
  max-width: var(--measure);
}

.center {
  text-align: center;
}

/*
 * The administrator's own homepage text: a card, as the site's other cards,
 * so an appeal reads as one rather than as more of the page (Viktor,
 * 2026-10-12: "It doesn't look like a call to action"). It is the site's
 * green, washed out, where the other cards are cream: a cream card is a news
 * item or a letter, and the green is what the site asks a visitor to act on.
 */
.home-text {
  padding: 2.5rem 3rem;
  border-radius: var(--radius);
  background: var(--green-wash);
}

.home-text > h2 {
  margin-top: 0;
}

.home-text > .rich-body {
  max-width: var(--measure);
  margin-top: 1.5rem;
}

@media (max-width: 47.9375rem) {
  .home-text {
    padding: 1.75rem 1.25rem;
  }
}

/* --- header ---------------------------------------------------------- */

.site-header {
  padding-block: 1rem;
}

/* The homepage is the one page whose header floats over a photograph. */
.site-header-overlay {
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: 40;
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--cream);
  border-radius: var(--radius);
  background: #ffffff;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  text-decoration: none;
}

.brand-mark {
  width: 2rem;
  height: 2rem;
  object-fit: contain;
}

.brand-name {
  color: var(--green);
  font-size: 1rem;
  font-weight: 700;
}

.nav-switch {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.nav-switch-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  cursor: pointer;
}

/*
 * Three bars, the shape everyone already knows means "menu".
 *
 * The middle one is the element itself, centred by the label's flex box; the
 * other two are pseudo-elements sitting the same distance above and below it.
 * Stating the three of them in one rule is what keeps them identical; declared
 * apart, they drift and the icon looks lopsided.
 */
.nav-switch-bars,
.nav-switch-bars::before,
.nav-switch-bars::after {
  display: block;
  width: 1.375rem;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
}

.nav-switch-bars {
  position: relative;
}

.nav-switch-bars::before,
.nav-switch-bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-switch-bars::before {
  top: -0.375rem;
}

.nav-switch-bars::after {
  top: 0.375rem;
}

/* The checkbox itself is hidden, so its focus is drawn on the bars. */
.nav-switch:focus-visible + .nav-switch-label {
  outline: 2px solid var(--green);
  outline-offset: 2px;
  border-radius: 0.375rem;
}

.site-nav {
  display: none;
  flex-basis: 100%;
}

.nav-switch:checked ~ .site-nav {
  display: block;
}

.nav-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0;
  padding: 0.5rem 0 0.25rem;
  list-style: none;
}

.nav-link,
.nav-sublist a {
  display: block;
  padding: 0.5rem 0.375rem;
  color: var(--nav-ink);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
}

.nav-link:hover,
.nav-sublist a:hover {
  color: var(--green);
}

.nav-link-current {
  color: var(--green);
}

.nav-dropdown > summary {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;
  list-style: none;
}

.nav-dropdown > summary::-webkit-details-marker {
  display: none;
}

.nav-caret {
  width: 0.4375rem;
  height: 0.4375rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-0.125rem) rotate(45deg);
}

.nav-dropdown[open] > summary .nav-caret {
  transform: translateY(0.0625rem) rotate(-135deg);
}

.nav-sublist {
  margin: 0;
  padding: 0 0 0.5rem 0.75rem;
  list-style: none;
}

@media (min-width: 62rem) {
  .header-inner {
    flex-wrap: nowrap;
    padding: 0.25rem 0.625rem;
  }

  .nav-switch-label {
    display: none;
  }

  .site-nav {
    display: block;
    flex-basis: auto;
  }

  .nav-list {
    flex-direction: row;
    align-items: center;
    padding: 0;
  }

  .nav-link {
    padding: 0.75rem 0.875rem;
    white-space: nowrap;
  }

  .nav-dropdown {
    position: relative;
  }

  .nav-sublist {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10;
    min-width: 17rem;
    padding: 0.5rem;
    border: 1px solid var(--cream);
    border-radius: var(--radius);
    background: #ffffff;
    box-shadow: 0 0.75rem 1.75rem rgba(3, 25, 17, 0.12);
  }
}

/* --- hero ------------------------------------------------------------ */

/*
 * The photograph is an element behind the words, and the wash that keeps them
 * legible is a pseudo-element over it. `isolation` makes the hero its own
 * stacking context, so the two layers below stay behind its own text and
 * nothing else.
 */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 47.25rem;
  padding-block: 8.75rem;
  background-color: #1c1f22;
  color: #ffffff;
  /* The hero is the one block the original sets a step above body size. */
  font-size: 1rem;
  line-height: 1.25;
}

/* The photograph fills the block and is cropped to it, whatever its size or
   shape. */
.hero-photo {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.8) 0%,
    rgba(0, 0, 0, 0.62) 50%,
    rgba(0, 0, 0, 0.2) 100%
  );
}

.hero h1 {
  max-width: 48rem;
}

/* The lead is running text, so it takes the measure rather than the hero's
   width — at 48rem it would run to 105 characters. */
.hero-lead {
  max-width: var(--measure);
}

/* The mobile capture seats the hero block lower than the desktop one. */
@media (max-width: 47.9375rem) {
  .hero {
    padding-block: 13.875rem 8rem;
  }
}

.hero-quote {
  /*
   * The quotation carries the author's own break and the indent in front of
   * the attribution, so the paragraph keeps its whitespace.
   */
  max-width: 26rem;
  font-style: italic;
  white-space: pre-wrap;
}

.hero-quote-author {
  margin-top: 1.25rem;
}

.hero h1 {
  margin: 3rem 0 1.4375rem;
}

.hero-lead {
  margin-bottom: 1.25rem;
}

.hero .button {
  margin-top: 0.375rem;
}

.button {
  display: inline-block;
  padding: 0.75rem 1.25rem;
  font-size: 0.875rem;
  border-radius: 0.5rem;
  background: var(--green);
  color: #ffffff;
  font-weight: 500;
  text-decoration: none;
}

.button:hover {
  background: var(--green-dark);
  color: #ffffff;
}

/* --- films ----------------------------------------------------------- */

.video {
  position: relative;
  display: block;
  margin-block: 2.75rem 0;
  border-radius: var(--radius);
  overflow: hidden;
}

.video-thumbnail {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6.25rem;
  height: 6.25rem;
  transform: translate(-50%, -50%);
  filter: invert(1);
}

/* The original's YouTube video, in the box the original gives it, and its
   gaps: 141px from the call's last line, 165px to the letters of Hírek, at
   both captured widths. */
.introduction {
  padding-block: 1.5rem 3rem;
}

.youtube {
  display: block;
  width: 100%;
  aspect-ratio: 470 / 264;
  border: 0;
}

/* --- pályázati felhívás ---------------------------------------------- */

.dash-list,
.circle-list {
  margin: 0 0 0.625rem;
  padding: 0;
  list-style: none;
}

.circle-list {
  margin-top: 0.625rem;
}

.dash-list > li,
.circle-list > li {
  margin-bottom: 0.625rem;
}

.dash-list > li::before {
  content: "- ";
}

.circle-list > li::before {
  content: "o ";
}

/* --- hírek ------------------------------------------------------------ */

/*
 * Hírek, where the cards pack by height instead of lining up in rows.
 *
 * A news item is as long as it needs to be — an eredményhirdetés runs to a
 * dozen lines, a sajtómegjelenés to two — and a grid gives every card in a row
 * the height of the tallest, so the short ones sit in a pool of empty cream.
 * Columns balance by height instead, and a card stays whole because it may not
 * break across one. It is the arrangement the vendégkönyv already uses, for
 * the same reason and by the same means.
 */
.news-masonry {
  margin-top: 1.25rem;
}

/*
 * Columns put no space between the cards in one of them, so the cards carry
 * it. It is stated here rather than beside the columns below, because in one
 * column the cards still need to be told apart.
 */
.news-masonry .news-card {
  margin-bottom: 1.5rem;
}

.news-masonry .news-card:last-child {
  margin-bottom: 0;
}

.news-card {
  padding: 1rem;
  border-radius: var(--radius);
  background: var(--cream);
}

.news-title {
  margin: 0;
}

/* Two cards fit the container side by side, which leaves each one wider than a
   line of prose wants to be. The text takes the measure; the card keeps its
   share of the grid. */
.news-card .rich-body {
  max-width: var(--measure);
}

.news-date {
  margin: 0 0 1rem;
  color: var(--gray);
}

.news-masonry + .center {
  margin-top: 2rem;
}

/* --- rich text -------------------------------------------------------- */

/*
 * Text the administrator wrote through the editor. Its vocabulary is the site's
 * own — the paragraph and list shapes already defined above — so this block
 * only has to keep it flowing at the same rhythm as the rest of the site.
 */
.rich-body > :first-child {
  margin-top: 0;
}

.rich-body > :last-child {
  margin-bottom: 0;
}

/*
 * The editor wraps each list item's text in a paragraph of its own, where the
 * migrated markup has the text directly in the item. Both have to render the
 * same, so the item's paragraph gives up its margin — the list already carries
 * the rhythm — and stays on the line its marker is drawn on. The dash and the
 * circle are generated content on the item, and a block would push the text
 * below them.
 */
.rich-body li > p {
  margin: 0;
}

.rich-body .dash-list > li > p:first-child,
.rich-body .circle-list > li > p:first-child {
  display: inline;
}

/* The original centres a news item's picture at three fifths of its card. */
.news-card .rich-body img {
  display: block;
  width: 60%;
  margin: 0.625rem auto 0;
  border-radius: 0.25rem;
}

/* --- gyakran ismételt kérdések --------------------------------------- */

/* After a page's text the questions follow close, on their band. */
.page-body + #kerdesek {
  padding-top: 0;
}

/* The questions stand on a cream band, as the footer's card does, so they
   read as a part of the page of their own. */
.faq-band {
  padding: 2.5rem 1.25rem;
  border-radius: var(--radius);
  background: var(--cream);
}

@media (min-width: 48rem) {
  .faq-band {
    padding: 3rem 2.5rem;
  }
}

.faq-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8125rem;
}

.faq-heading img {
  width: 1.5rem;
  height: 1.5rem;
}

.faq-heading h2 {
  margin: 0;
}

/* On a phone the heading takes two lines, and the mark stands over it
   rather than beside them. */
@media (max-width: 30rem) {
  .faq-heading {
    flex-direction: column;
    gap: 0.75rem;
    text-align: center;
  }
}

.faq-grid {
  display: block;
  margin-top: 2rem;
}

.faq-grid .faq-card {
  margin-bottom: 1.5rem;
}

.faq-grid .faq-card:last-child {
  margin-bottom: 0;
}

.faq-card {
  padding: 1rem 1.75rem;
  border-radius: var(--radius);
  background: #ffffff;
  box-shadow: 0 0.25rem 1rem rgba(3, 25, 17, 0.08);
}

.faq-question {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3333;
  list-style: none;
}

/* A question answers the pointer as the menu's links do. */
.faq-question:hover {
  color: var(--green);
}

.faq-question::-webkit-details-marker {
  display: none;
}

.faq-chevron {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  margin: 0.4375rem 0.25rem 0 0;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}

.faq-card[open] .faq-chevron {
  margin-top: 0.6875rem;
  transform: rotate(-135deg);
}

.faq-answer {
  margin-top: 0.75rem;
}

/* An answer is prose, and the card is as wide as its column. */
.faq-answer p {
  max-width: var(--measure);
}

.faq-answer p:last-child {
  margin-bottom: 0;
}

/* --- footer ----------------------------------------------------------- */

.site-footer {
  padding-block: 4rem;
}

.footer-card {
  padding: 2rem;
  border-radius: var(--radius);
  background: var(--cream);
}

.footer-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

.footer-brand {
  color: var(--green);
  font-size: 1rem;
  font-weight: 700;
}

.footer-quote {
  margin-block: 1rem;
}

.footer-heading {
  margin: 1.75rem 0 0.625rem;
  font-size: 1.25rem;
}

.footer-heading:first-child {
  margin-top: 0;
}

/* The supporters in two columns, each marked with a small green dot. */
.footer-supporters {
  columns: 2 13rem;
  column-gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-supporters li {
  position: relative;
  padding: 0.1875rem 0 0.1875rem 0.875rem;
  break-inside: avoid;
}

.footer-supporters li::before {
  content: "";
  position: absolute;
  top: 0.75em;
  left: 0;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--green);
}

.footer-facebook {
  display: inline-block;
  margin-top: 0.5rem;
}

.footer-facebook img {
  display: block;
  width: 2rem;
  height: 2rem;
}

.footer-membership {
  margin: 1.5rem 0 0;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}

/* The three badges sit in equal 128px columns in the capture; their own
   aspect ratios decide the heights. */
.footer-badge {
  width: 8rem;
}

.footer-badge-link {
  display: inline-flex;
}

/* --- inner pages ------------------------------------------------------- */

/* Measured off the captures: 94px from the header block to the title's line
   box, then the title sits 10px above the body — the paragraph rhythm. */
.page-head {
  padding-top: 5.875rem;
}

.page-head h1 {
  margin: 0;
}

.page-body {
  padding-top: 0.625rem;
  padding-bottom: 4rem;
}

/*
 * Every page opens the same distance below its title, whatever comes first —
 * a document's prose, a grid of news or of pictures, the ledger of donations.
 * One value rather than one per kind of content: a reader moving between pages
 * should not find the content starting at a different height on each of them.
 *
 * The 4rem is the break the vendégkönyv already takes before its letters, and
 * it is the same thing here — the end of the page's title and the beginning of
 * what the page is for. The body opens with 0.625rem of its own padding, which
 * comes off, so that the measured gap is the 4rem and not 4rem plus a little.
 *
 * The vendégkönyv's lead overrides this further down: that paragraph belongs
 * to the title rather than to the content, and the 4rem falls below it.
 */
.page-body > .container > :first-child {
  margin-top: calc(4rem - 0.625rem);
}

/*
 * Running text on a page whose whole body is prose. The container stays wide
 * — the heading, the támogatások ledger and the pictures use its full width —
 * and only the text that has to be read across is held to the measure.
 */
.page-body > .container > .rich-body,
.page-body > .container > p,
.page-body > .container > .disc-list {
  max-width: var(--measure);
}

/*
 * Line breaks the original writes inside a single paragraph — with <br> or with
 * runs of spaces that align a small block of text — are content, so they are
 * preserved rather than collapsed. The runs still wrap at the container edge.
 */
.pre-line {
  white-space: pre-wrap;
}

.disc-list,
.numbered-list {
  margin: 0 0 0.625rem;
  padding-left: 2.5rem;
}

.page-logo {
  width: 9.375rem;
}

.page-logo-center {
  display: block;
  margin: 1.5rem auto;
}

/* --- LEDGER-BODY: a támogatások ledger ----------------------------------- */

/*
 * The record of what the alapítvány has given, year by year.
 *
 * It is not a table. It is text that lines up: a year stands as a heading, and
 * under it one line for each kind of support that year — what it was for, how
 * many students had it, how much it came to. The three columns are made of the
 * spaces typed between them.
 *
 * The face, size and wrapping match .editor-surface.ledger-body in
 * public/admin.css (docs/the-site.md, Whitespace fidelity).
 */
.ledger-body h3,
.ledger-body h3 ~ p {
  font-family: "Inconsolata", ui-monospace, "SFMono-Regular", monospace;
  /* The lines are already as long as they are meant to be. Rewrapping one
     would move its columns, so they are left to run and the block scrolls. */
  white-space: pre;
}

/*
 * Pinned, not inherited. The page sets its prose at 0.875rem and the staff
 * surface sets its own at 1rem, so a line left to inherit would be counted at
 * one width and published at another. Both are stated here and in admin.css,
 * and they have to stay the same number.
 */
.ledger-body h3 ~ p {
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* The lines of one year sit together as a block, not as separate paragraphs. */
.ledger-body h3 ~ p {
  margin: 0;
}

/* The year, opening its own group. It carries the space above; the lines under
   it carry none, which is what makes each year read as one thing. */
.ledger-body h3 {
  margin: 1.875rem 0 0.375rem;
  font-size: 1.125rem;
}

.ledger-body h3:first-of-type {
  margin-top: 2.5rem;
}

/*
 * A body set this way takes the whole container: the columns need more room
 * than a line of prose wants. The prose above the first year keeps the measure
 * it would have had, and on a narrow screen the block scrolls inside itself
 * rather than pushing the page sideways.
 */
.page-body > .container > .ledger-body {
  max-width: none;
  overflow-x: auto;
}

.ledger-body > :not(h3):not(h3 ~ p) {
  max-width: var(--measure);
}

/*
 * The same two-column treatment on a page that is otherwise prose.
 *
 * Rólunk ends with the one-percent offerings, a year and a sum on each line,
 * and they line up the same way and for the same reason. They have no year
 * heading to hang off — the whole block is one run of years — so each line
 * says what it is on itself. The class is part of the site's vocabulary, so
 * the sanitizer admits it and the editor hands it back after a round trip.
 *
 * The face and the two numbers are the ledger's, and for the same reason: a
 * administrator counts the spaces at the size the line will be published at.
 * See .ledger-line in public/admin.css, which has to state the same numbers.
 */
.ledger-line {
  font-family: "Inconsolata", ui-monospace, "SFMono-Regular", monospace;
  white-space: pre;
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* The run of years is one block. Only the line that opens it takes the space
   above, and only the paragraph that follows the run takes the space below. */
:not(.ledger-line) + .ledger-line {
  margin-top: 1.5rem;
}

.ledger-line + :not(.ledger-line) {
  margin-top: 1.5rem;
}

/* --- galéria ----------------------------------------------------------- */

/*
 * One page of albums, as a phone's photo library shows its days: each album a
 * section, its title over a tight grid of square thumbnails, each cut from
 * the middle of its photograph (docs/the-site.md, Deliberate departures). The
 * title is set a step under h3: it heads a group of pictures, not a page, and
 * an album of one is one thumbnail wide, about 190px, where at the h3 size
 * "Dr. Mátyás Antal megemlékezése" breaks inside a word.
 *
 * On a phone each album has the width to itself, three thumbnails to a row,
 * so a title is never squeezed. From a tablet up every thumbnail is one
 * size, a row's width shared by `--cols` of them (4, then 6 at the full
 * container), and small albums share a row, as a photo library packs short
 * days side by side, so an album of two does not leave a row empty: an album
 * is as many thumbnails wide as it has photographs, up to a row (`--n`), and
 * the next album follows on the same row if it fits. A row of albums ends
 * where its photographs end, as a library's does. Titles stand on the line
 * above their photographs, so the photographs of a row start level whatever
 * their titles' lengths.
 */
.gallery {
  --gap: 0.25rem;
  --album-gap: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem var(--album-gap);
}

.gallery-album {
  --n: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
}

.gallery-album-title {
  margin: 0 0 0.625rem;
  font-size: 1.25rem;
  line-height: 1.25;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  gap: var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.gallery-grid a {
  display: block;
  overflow: hidden;
  border-radius: 0.375rem;
  background: var(--cream);
}

.gallery-grid img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.gallery-grid a:hover img {
  transform: scale(1.04);
  filter: brightness(1.05);
}

.gallery-grid a:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 2px;
}

/*
 * A photograph opened over the gallery, as a photo application shows one:
 * the dark to the window's edges, the photograph as large as it can be and
 * never past its own pixels, the album and its place in it above
 * (src/client/galeria.ts). The three slides are the photograph and the ones
 * either side, which the script lays side by side.
 */
.viewer {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: rgb(8 12 10);
  color: #fff;
}

.viewer[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  animation: viewer-in 0.18s ease-out;
}

@keyframes viewer-in {
  from {
    opacity: 0;
  }
}

.viewer::backdrop {
  background: transparent;
}

.viewer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.5rem;
  padding: 0.5rem 0.75rem 0.5rem 1.25rem;
}

.viewer-where {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  min-width: 0;
  margin: 0;
}

.viewer-title {
  font-size: 1rem;
}

.viewer-count {
  color: rgb(255 255 255 / 0.65);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

.viewer-stage {
  position: relative;
  overflow: hidden;
  touch-action: none;
  user-select: none;
}

.viewer-slide {
  position: absolute;
  inset: 0 0 1rem;
  display: grid;
  place-items: center;
}

.viewer-slide[hidden] {
  display: none;
}

.viewer-photo {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  -webkit-user-drag: none;
}

/* The way out, and the arrows: round, light on the dark, 44px at least. */
.viewer-close,
.viewer-turn {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.12);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.viewer-close:hover,
.viewer-turn:hover {
  background: rgb(255 255 255 / 0.24);
}

.viewer-close:focus-visible,
.viewer-turn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.viewer-close::before,
.viewer-turn::before {
  content: "";
  width: 1.25rem;
  height: 1.25rem;
  background: currentColor;
  mask: var(--icon) center / contain no-repeat;
}

.viewer-close {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
}

/*
 * The arrows stand at the sides of the photograph. Where the pointer is a
 * finger, it swipes, as every photo application there does, so there are
 * none, and the photograph has the whole width.
 */
.viewer-turn {
  position: fixed;
  top: 50%;
  width: 3rem;
  height: 3rem;
  transform: translateY(-50%);
}

.viewer-turn[hidden] {
  display: none;
}

.viewer-back {
  left: 1rem;
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E");
}

.viewer-forward {
  right: 1rem;
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
}

@media not (pointer: coarse) {
  .viewer-slide {
    inset: 0 5rem 1.5rem;
  }
}

@media (pointer: coarse) {
  .viewer-turn {
    display: none;
  }
}

/* The page behind must not scroll while a photograph is over it. */
html:has(.viewer[open]) {
  overflow: hidden;
}

/* --- vendégkönyv -------------------------------------------------------- */

/*
 * The lead belongs to the title and the letters do not, so the two gaps are
 * deliberately lopsided: the lead sits close under the title, at the opening
 * gap every page shares, and the list takes better than four times that —
 * which is the break that actually separates the page's furniture from the
 * thing the page is for.
 */
.page-body > .container > .guestbook-intro {
  /* Later than the opening-gap rule above and of equal weight, so this wins. */
  margin-top: 0.25rem;
  font-weight: 700;
}

/*
 * Each entry is a letter somebody wrote, so it gets the card the news items
 * already are — the same cream, the same radius, the same padding — rather
 * than a new shape. What it adds is a measure: twenty-two letters set to the
 * full 72.5rem container run past 200 characters a line and the eye loses its
 * place returning. The card is the measure plus the padding on either side of
 * it, so the letter inside it is set as wide as prose anywhere else.
 */
.guestbook-list {
  display: grid;
  gap: 1rem;
  max-width: calc(var(--measure) + 2 * 1.25rem);
  margin-top: 4rem;
}

.guestbook-entry {
  padding: 1.25rem;
  border-radius: var(--radius);
  background: var(--cream);
}

/* Name and date share a baseline, as they would at the head of a letter, and
   fall onto two lines only when the name needs the width. */
.guestbook-entry-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.125rem 1rem;
  margin-bottom: 0.875rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--line);
}

.guestbook-entry h2 {
  margin: 0;
}

.guestbook-date {
  margin: 0;
  color: var(--gray);
  white-space: nowrap;
}

/* --- átláthatóság documents --------------------------------------------- */

.doc-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * Each document is a card of its own: its icon, which says what kind of file
 * it is (documentIcon() in src/parts.ts), its name, and the kind in words
 * under it. As many to a row as the page's width holds, so a page of yearly
 * reports is a few rows rather than a column.
 */
.doc-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: 0.75rem;
}

.doc-link {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  height: 100%;
  padding: 0.875rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #ffffff;
  color: var(--ink);
  transition:
    border-color 150ms ease,
    background-color 150ms ease;
}

.doc-link:hover {
  border-color: var(--green);
  background: var(--green-wash);
  text-decoration: none;
}

.doc-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.doc-name {
  font-weight: 600;
  line-height: 1.35;
}

.doc-link:hover .doc-name {
  color: var(--green);
}

.doc-kind {
  color: var(--gray);
  font-size: 0.8125rem;
}

.doc-icon {
  flex: none;
  width: 1.5rem;
  height: 1.75rem;
}

/*
 * The files stand apart from the text that introduces them: more than the gap
 * between two paragraphs, because they are a different kind of thing, and less
 * than the page's opening gap, because they still belong to what was just
 * said. Where a page has no text at all the list is the first thing in the
 * body and already sits at that opening gap, so the rule leaves it alone.
 */
.rich-body:not(:empty) + .doc-list {
  margin-top: 2.5rem;
}

/* --- 404 -------------------------------------------------------------- */

.error-code {
  color: var(--gray);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.error-page .button {
  margin-top: 1.25rem;
}

/* --- wider viewports --------------------------------------------------- */

@media (min-width: 48rem) {
  .news-masonry {
    columns: 2;
    column-gap: 1.5rem;
  }

  .news-masonry .news-card {
    break-inside: avoid;
  }

  .gallery {
    --cols: 4;
    --thumb: calc((100% - (var(--cols) - 2) * var(--gap) - var(--album-gap)) / var(--cols));
  }

  .gallery-album {
    --n: 4;
    flex: none;
    width: calc(var(--n) * var(--thumb) + (var(--n) - 1) * var(--gap));
  }

  .gallery-album:has(li:only-child) {
    --n: 1;
  }

  .gallery-album:has(li:nth-child(2):last-child) {
    --n: 2;
  }

  .gallery-album:has(li:nth-child(3):last-child) {
    --n: 3;
  }

  .footer-top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/*
 * The FAQ pairs up later than the other grids. Its cards carry 1.75rem of
 * padding on either side, so at the 48rem breakpoint a column leaves only
 * about 48 characters of answer — below the width at which a line is worth
 * breaking. It waits until each column can hold a proper one.
 */
@media (min-width: 52rem) {
  .faq-grid {
    columns: 2;
    column-gap: 1.5rem;
  }

  .faq-grid .faq-card {
    break-inside: avoid;
  }
}

/*
 * The guest book pairs up latest of all, and it pairs as columns rather than
 * as a grid.
 *
 * Two conditions. The measure is the point of the single column, so a pair may
 * only happen once the page can give each of the two the whole 30rem and the
 * padding either side of it: 66rem of container, which is a 68rem viewport
 * after the gutters. And the letters are wildly uneven — the longest here is
 * four times the shortest — so a grid would align them in rows and leave
 * roughly fourteen hundred pixels of nothing down the short side. Columns
 * balance by height instead, and each letter stays whole because it may not
 * break across one.
 */
@media (min-width: 68rem) {
  .guestbook-list {
    display: block;
    max-width: calc(2 * (var(--measure) + 2 * 1.25rem) + 1rem);
    columns: 2;
    column-gap: 1rem;
  }

  .guestbook-entry {
    margin-bottom: 1rem;
    break-inside: avoid;
  }

  .guestbook-entry:last-child {
    margin-bottom: 0;
  }
}

/* At the full container, six thumbnails a row of about 190px. */
@media (min-width: 68rem) {
  .gallery {
    --cols: 6;
  }

  .gallery-album {
    --n: 6;
  }

  .gallery-album:has(li:nth-child(4):last-child) {
    --n: 4;
  }

  .gallery-album:has(li:nth-child(5):last-child) {
    --n: 5;
  }
}