/* Reusable pieces: buttons, the low-poly motif, edition cards and pages, document links,
 * the language switcher, lists, search page, local navigation. Adapted from accessibility.sk
 * (buttons, whole-card link, switcher, lists, toc, search); blog, patterns, EAA, price lists,
 * badges and the scroll-driven card animation are dropped. */

/* ---- Buttons ------------------------------------------------------------------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--target-comfortable);
  padding: 0.55em 1.35em;
  border: 2px solid var(--ink-900);
  border-radius: var(--radius-pill);
  background: var(--ink-900);
  color: var(--on-ink);
  font-weight: 650;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}

.button:hover {
  background: var(--ink-800);
  border-color: var(--ink-800);
  color: var(--on-ink);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.button--ghost {
  background: var(--paper-raised);
  color: var(--link);
}

.button--ghost:hover {
  background: var(--bg-tint);
  color: var(--link-hover);
}

/* In forced colours the filled background is gone; the border keeps the button shape. */
@media (forced-colors: active) {
  .button {
    border-color: ButtonText;
  }
}

.more-link {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--target-min);
  font-weight: 650;
}

.more-link::after {
  content: "\2192" / "";
  display: inline-block;
  margin-inline-start: 0.35em;
}

/* ---- Low-poly motif (poly-defs.webc, poly-frame.webc) ----------------------------------- */
.poly-defs {
  position: absolute;
  inline-size: 0;
  block-size: 0;
  overflow: hidden;
}

/* The polygons take their colour from the element that holds the frame (currentColor):
 * the lighter ink in the hero, the year's lead colour on edition cards and pages. */
.poly {
  display: block;
  fill: currentColor;
  stroke: none;
  pointer-events: none;
}

/* More contrast: the shapes become a 1 px outline. Forced colours: gone (pure decoration). */
@media (prefers-contrast: more) {
  .poly {
    fill: none;
    stroke: currentColor;
    stroke-width: 1px;
  }
}

@media (forced-colors: active) {
  .poly {
    display: none;
  }
}

/* ---- Edition card ---------------------------------------------------------------------- */
.edition-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper-raised);
  border: 1px solid var(--border-firm);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

@media (hover: hover) {
  .edition-card:hover {
    box-shadow: var(--shadow-lg);
    border-color: var(--year-text);
  }
}

/* The visual: the cover on white inside the year's polygons, or (typographic card) the year
 * on a field of the year's lead colour. Its height comes from the aspect ratio, the content
 * never sets it, so nothing is cut at any zoom. */
.edition-card__visual {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  padding: var(--space-xs);
  color: var(--year-lead);
  border-block-end: 1px solid var(--border);
}

.edition-card__visual > .poly {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
}

.edition-card__cover {
  position: relative;
  block-size: 100%;
  display: flex;
  justify-content: center;
}

.edition-card__cover img {
  block-size: 100%;
  inline-size: auto;
  max-inline-size: 100%;
  object-fit: contain;
  border-radius: var(--radius-s);
  box-shadow: var(--shadow-md);
}

.edition-card[data-card="typographic"] .edition-card__visual {
  background: var(--year-lead);
  color: color-mix(in oklab, var(--year-lead) 60%, var(--year-on-lead));
}

.edition-card__year {
  position: relative;
  font-size: var(--text-5);
  font-weight: 800;
  font-stretch: var(--width-heading);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--year-on-lead);
}

.edition-card__body {
  --flow-space: var(--space-2xs);
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-s) var(--space-m) var(--space-m);
}

.edition-card__title {
  font-size: var(--text-1);
}

.edition-card__title a {
  color: var(--heading);
  text-decoration-color: transparent;
}

.edition-card__title a:hover {
  color: var(--link-hover);
  text-decoration-color: currentColor;
}

.edition-card__meta {
  font-size: var(--text--1);
  font-weight: 600;
  color: var(--year-text);
}

/* Date and format on lines of their own (a separator would start a wrapped line); screen
 * readers hear a comma between them through the CSS alternative text. */
.edition-card__meta > * {
  display: block;
}

.edition-card__meta > * + *::before {
  content: "" / ", ";
}

.edition-card__theme {
  font-size: var(--text--1);
  color: var(--text);
}

/* Document links are long and wrap, so they stay inline (an inline-flex box would push the
 * external-link mark and the ISBN away from the text); every line box is over 24 px high. */
.edition-card__doc {
  margin-block-start: auto;
  padding-block-start: var(--space-xs);
  font-size: var(--text--1);
  line-height: 1.6;
}

/* Whole-card link (accessibility.sk components.css): the title stays the only card link (one
 * Tab stop, the edition name as its name) and its hit area is stretched over the card; the
 * focus ring moves to the card so a wrapped title gets one rectangle. The document link is
 * raised above the overlay. */
@supports selector(:has(a)) {
  .edition-card__title a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: 0;
  }

  .edition-card:has(.edition-card__title a:focus-visible) {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
    box-shadow: 0 0 0 3px var(--focus-halo);
  }

  .edition-card__title a:focus-visible {
    outline: none;
    box-shadow: none;
  }

  .edition-card__doc a {
    position: relative;
    z-index: 1;
  }
}

/* ---- Edition page ---------------------------------------------------------------------- */
.edition__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-l);
  margin: 0;
}

.edition__fact dt {
  font-size: var(--text--1);
  font-weight: 650;
  color: var(--text-muted);
}

.edition__header .eyebrow {
  color: var(--year-text);
}

.edition__fact dd {
  margin: 0;
  font-weight: 600;
}

/* One column below 50em: minmax(0, 1fr), not the implicit auto column, so a long unbreakable
 * word (an address, a placeholder key) wraps instead of widening the page (1.4.10, found at
 * 320 px on /en/editions/2025/ in B10). */
.edition__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-l) var(--space-xl);
  align-items: start;
}

@media (width >= 50em) {
  .edition__layout:has(.edition__cover) {
    grid-template-columns: minmax(12rem, 18rem) minmax(0, 1fr);
  }
}

.edition__cover {
  position: relative;
  margin: 0;
  padding: var(--space-m);
  max-inline-size: 22rem;
  background: var(--paper-raised);
  border: 1px solid var(--border-firm);
  border-radius: var(--radius-l);
  color: var(--year-lead);
}

.edition__cover > .poly {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  border-radius: inherit;
}

.edition__cover picture {
  position: relative;
  display: block;
}

.edition__cover img {
  inline-size: 100%;
  block-size: auto;
  border-radius: var(--radius-s);
  box-shadow: var(--shadow-md);
}

.invited {
  --flow-space: var(--space-xs);
}

.invited__title {
  font-size: var(--text-1);
}

/* ---- Document links ---------------------------------------------------------------------- */
.doc-list {
  display: grid;
  gap: var(--space-2xs);
  margin: 0;
  padding: 0;
}

/* Inline, like the card's document link: the text wraps with its mark and ISBN. */
.doc-list li {
  max-inline-size: var(--measure);
  line-height: 1.6;
}

.doc-list__isbn {
  color: var(--text-muted);
  font-size: var(--text--1);
}

/* ---- Language switcher: a segmented group ---------------------------------------------- */
.lang-switcher__list {
  display: inline-flex;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border-firm);
  border-radius: var(--radius-pill);
  background: var(--bg-raised);
}

.lang-switcher__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 44 px including the group's 1 px border, like the rest of the header row. */
  min-inline-size: calc(var(--target-comfortable) - 2px);
  min-block-size: calc(var(--target-comfortable) - 2px);
  padding: 0 0.75em;
  border-radius: var(--radius-pill);
  font-size: var(--text--1);
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
}

.lang-switcher__link:hover {
  color: var(--link-hover);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.lang-switcher__link[aria-current] {
  background: var(--accent-soft);
  color: var(--heading);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.lang-switcher__link:focus-visible {
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--focus-halo);
}

/* Full names by default; the short code is hidden from everyone. */
.lang-switcher__short {
  display: none;
}

/* When the tools row is narrower than 30em of its font, the pills show SK / EN and the full
 * name becomes screen-reader-only text after the code, so the accessible name still contains
 * the visible label (2.5.3) and still says the language. */
@container tools (width < 30em) {
  .lang-switcher__short {
    display: inline;
  }

  .lang-switcher__name {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ---- Site map and link lists --------------------------------------------------------------- */
.sitemap-list,
.link-list {
  display: grid;
  gap: var(--space-2xs);
  margin: 0;
  padding: 0;
}

.sitemap-list a,
.link-list a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--target-min);
}

/* ---- Back to top ------------------------------------------------------------------------------ */
.back-to-top {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-block-size: var(--target-comfortable);
  font-weight: 650;
}

.back-to-top::before {
  content: "\2191" / "";
}

/* ---- Search page ------------------------------------------------------------------------------ */
.search-page__form {
  --flow-space: var(--space-2xs);
  display: grid;
  gap: var(--space-2xs);
  max-inline-size: var(--measure);
}

.search-page__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}

.search-page__row input {
  flex: 1 1 14rem;
}

.search-page__search .search-status {
  margin-block-start: var(--space-s);
  font-weight: 650;
  color: var(--text);
}

.search-page__search .search-results {
  margin-block-start: var(--space-s);
  max-inline-size: var(--measure-wide);
}

.notice {
  padding: var(--space-xs) var(--space-s);
  border-inline-start: 4px solid var(--ink-700);
  background: var(--bg-raised);
}

/* ---- Local navigation ("On this page") -------------------------------------------------- */
.toc {
  margin-block-end: var(--space-l);
  padding: var(--space-s) var(--space-m);
  border-inline-start: 4px solid var(--ink-700);
  border-radius: var(--radius-s);
  background: var(--bg-raised);
  max-inline-size: var(--measure);
}

.toc__title {
  margin: 0 0 var(--space-2xs);
  font-size: var(--text--1);
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.toc__list {
  margin: 0;
  padding-inline-start: 1.4em;
  font-size: var(--text--1);
}

.toc__list a {
  display: inline-block;
  padding-block: 0.15em;
}

/* ---- About page facts ---------------------------------------------------------------------- */
.about-facts {
  font-weight: 450;
}

/* The conference name leads the facts block: the heading colour, larger, in the wide cut. */
.about-facts__name {
  display: block;
  margin-block-end: var(--space-3xs);
  font-size: var(--text-3);
  font-weight: 800;
  font-stretch: var(--width-wide);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--heading);
}

/* ---- Header photo ------------------------------------------------------------------------- */
/* About (front matter `photo`, layouts/about.webc) and the pages with `ambientPhoto: true`
 * (layouts/page.webc, cfp.webc). Text left, photo right from 50em; below 50em the photo
 * follows the text. The four rows centre
 * the heading and the facts against the photo: the empty first and last rows take what the
 * photo adds. No border or shadow: the left part of the photo fades into the paper through a
 * mask (user, 2026-10-24), so the fade follows the layout in every browser and the file itself
 * needs no alpha. The caption sits outside the masked image and stays fully legible. The ambient
 * photos of the other pages are shown whole, without the mask. */
.page-header--photo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--space-l);
}

.page-header--photo > .page-header__photo {
  margin: var(--space-m) 0 0;
}

@media (width >= 50em) {
  .page-header--photo {
    grid-template-columns: minmax(0, 1fr) minmax(0, 30rem);
    grid-template-rows: 1fr auto auto 1fr;
  }

  .page-header--photo > .page-title {
    grid-area: 2 / 1;
  }

  .page-header--photo > .lede {
    grid-area: 3 / 1;
  }

  .page-header--photo > .page-header__photo {
    grid-area: 1 / 2 / -1 / 3;
    margin: 0;
  }
}

.page-header__photo picture {
  display: block;
}

.page-header__img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

/* The About photo only: its left part (the projected slide) fades into the paper. */
.page-header__img--fade {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 55%);
  mask-image: linear-gradient(to right, transparent 0%, #000 55%);
}

.page-header__photo .credit {
  margin-block-start: var(--space-3xs);
  font-size: var(--text--1);
  color: var(--text-muted);
  text-align: end;
}

/* The credit on a line of its own under the caption, never broken inside ("Foto: Milan Regec"). */
.credit__by {
  display: block;
  white-space: nowrap;
}

/* ---- Edition pages: up to three photos of the year under the documents ---------------------- */
/* Three equal tiles cropped to 3:2 (object-fit), so mixed 3:2, 4:3 and 5:4 originals line up;
 * the width/height attributes and aspect-ratio keep the layout from shifting while they load. */
.edition-photos__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2xs);
}

.edition-photos__grid picture {
  display: block;
}

.edition-photos__grid img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.edition-photos .credit {
  margin-block-start: var(--space-3xs);
  font-size: var(--text--1);
  color: var(--text-muted);
}

/* ---- Call for papers: key dates (PLAN §4) ----------------------------------------------------- */
.key-dates {
  display: grid;
  gap: var(--space-2xs);
  max-inline-size: var(--measure);
  margin-inline: 0;
}

.key-dates__item {
  display: grid;
  gap: 0 var(--space-s);
  grid-template-columns: minmax(0, 1fr);
  padding-block: var(--space-2xs);
  border-block-end: 1px solid var(--border);
}

@media (min-width: 40em) {
  .key-dates__item {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  }
}

.key-dates dt {
  font-weight: 650;
}

.key-dates dd {
  margin: 0;
}

/* The word "(uplynul)" carries the state; the weight only repeats it. */
.key-dates__passed {
  font-weight: 650;
}

.cfp-register {
  margin-block-start: var(--space-l);
}

/* ---- Registration: the direct link before the Google Form embed (PLAN §4) ------------------ */
.registration-link a {
  font-weight: 650;
}

/* Tall enough that the form does not become a second scroll region at common widths; the
 * 2200 px height attribute is the fallback without CSS. */
.registration-embed {
  display: block;
  inline-size: 100%;
  min-block-size: 70vh;
  margin-block-start: var(--space-m);
  border: 1px solid var(--border-firm);
  border-radius: var(--radius-s);
  background: var(--paper-raised);
}

/* Under 26em (phones, 400 % zoom) the form's questions wrap into more lines: measured in B10,
 * the form needs about 2390 px at 320 px wide (2200 px above 390 px). In rem, so the frame
 * grows with the reader's text size too. */
@media (width < 26em) {
  .registration-embed {
    block-size: 165rem;
  }
}

/* ---- About: the main theme band ------------------------------------------------ */
/* One tinted field across the content width; the theme's first half heavy and wide, the
 * second half light, so the line reads as a title rather than a paragraph. */
.theme-band {
  margin-block: var(--space-l);
  padding: var(--space-m) var(--space-l);
  background: var(--bg-tint);
  border: 1px solid transparent; /* the edge that survives forced colours */
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-md);
}

.theme-band__label {
  margin: 0 0 var(--space-2xs);
  max-inline-size: none;
  font-size: var(--text--1);
  font-weight: 700;
  font-stretch: var(--width-wide);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--heading);
}

.theme-band__text {
  margin: 0;
  max-inline-size: none;
}

.theme-band__head {
  display: block;
  font-size: var(--text-4);
  font-weight: 800;
  font-stretch: 112%;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--heading);
  text-wrap: balance;
}

.theme-band__tail {
  display: block;
  margin-block-start: var(--space-2xs);
  font-size: var(--text-2);
  font-weight: 400;
  font-stretch: 94%;
  line-height: 1.2;
  color: var(--text);
  text-wrap: balance;
}

.theme-band__tail:empty {
  display: none;
}

/* ---- About: committees as cards side by side ------------------------------------ */
.committees {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  align-items: start;
  margin-block-start: var(--space-l);
}

.committee {
  padding: var(--space-m);
  /* White at the top fading into the ink tint at the bottom right. */
  background:
    radial-gradient(120% 90% at 100% 100%, var(--ink-200) 0%, transparent 60%),
    linear-gradient(170deg, var(--paper-raised) 35%, var(--ink-100) 100%);
  border: 1px solid var(--border-firm);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-sm);
}

.committee > h2 {
  margin-block: 0 var(--space-s);
  font-size: var(--text-2);
}

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

.committee li + li {
  margin-block-start: var(--space-2xs);
}

/* Names in the wide cut of Archivo's width axis; affiliations stay in the body width. */
.person {
  font-weight: 600;
  font-stretch: 118%;
}

/* ---- About: topics with low-poly markers ------------------------------------------------- */
/* Each item hangs off a small faceted triangle, the brand mark's shape, in two tones of ink;
 * every second and third item turns the facet split and lightens it (the 1 / 0.55 / 0.3 of the
 * polygon motif), so the column reads as a field of facets, not a row of bullets. The topics
 * are not a sequence, so there are no numbers. role="list" on the <ul> keeps list semantics
 * in WebKit, which drops them with list-style: none. */
.topics {
  display: grid;
  gap: var(--space-2xs) var(--space-l);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr));
  max-inline-size: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

.topics > li {
  position: relative;
  padding-block: var(--space-2xs);
  padding-inline-start: 1.75em;
  border-block-end: 1px solid var(--border);
  max-inline-size: var(--measure);
}

.topics > li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: calc(var(--space-2xs) + 0.2em);
  inline-size: 1.05em;
  block-size: 1.05em;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: linear-gradient(115deg, var(--ink-700) 0 50%, var(--ink-900) 50% 100%);
}

.topics > li:nth-child(3n + 2)::before {
  background: linear-gradient(65deg, color-mix(in oklab, var(--ink-700) 55%, var(--paper)) 0 50%, var(--ink-700) 50% 100%);
}

.topics > li:nth-child(3n)::before {
  background: linear-gradient(90deg, color-mix(in oklab, var(--ink-700) 30%, var(--paper)) 0 50%, color-mix(in oklab, var(--ink-700) 60%, var(--paper)) 50% 100%);
}

@media (forced-colors: active) {
  .topics > li::before {
    forced-color-adjust: none;
    background: CanvasText;
  }
}

/* ---- Footer: the photo notice, one full-width line under the footer columns ------------ */
.site-footer__notice {
  padding-block: 0 var(--space-m);
}

.site-footer__photos {
  margin: 0;
  padding-block-start: var(--space-s);
  border-block-start: 1px solid var(--border);
  font-size: var(--text--1);
  color: var(--text-muted);
}

/* ---- About: the group photo under the organiser ------------------------------------------ */
.about-group {
  margin: var(--space-m) 0 0;
  max-inline-size: 60rem;
}

.about-group img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-md);
}

/* ---- Venue: where to go, arrivals by origin, accommodation rows (Fable plan, 2026-10-24) ---- */
.place-band {
  margin-block: var(--space-l);
  padding: var(--space-m) var(--space-l);
  background: var(--bg-tint);
  border: 1px solid transparent; /* the edge that survives forced colours */
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-md);
}

.place-band__label {
  margin: 0 0 var(--space-2xs);
  max-inline-size: none;
  font-size: var(--text--1);
  font-weight: 700;
  font-stretch: var(--width-wide);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--heading);
}

.place-band__dept {
  margin: 0;
  font-size: var(--text-1);
  font-weight: 700;
  font-stretch: var(--width-wide);
  color: var(--heading);
}

.place-band__room {
  margin: var(--space-2xs) 0 0;
  max-inline-size: none;
}

.place-band__room-no {
  display: block;
  font-size: var(--text-4);
  font-weight: 800;
  font-stretch: 112%;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--heading);
}

/* The facet triangle of the topic list, as the "pin" before the room number. */
.place-band__room-no::before {
  content: "";
  display: inline-block;
  inline-size: 0.7em;
  block-size: 0.7em;
  margin-inline-end: 0.3em;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: linear-gradient(115deg, var(--ink-700) 0 50%, var(--ink-900) 50% 100%);
}

.place-band__room-where {
  display: block;
  margin-block-start: var(--space-3xs);
  font-size: var(--text-2);
  font-weight: 400;
  font-stretch: 94%;
  color: var(--text);
}

.place-band__address,
.place-band__actions {
  margin: var(--space-s) 0 0;
  font-style: normal;
}

@media (forced-colors: active) {
  .place-band__room-no::before {
    forced-color-adjust: none;
    background: CanvasText;
  }
}

.arrivals {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  align-items: start;
  max-inline-size: none;
  margin: var(--space-m) 0 0;
  padding: 0;
  list-style: none;
}

.arrival {
  padding: var(--space-m);
  background:
    radial-gradient(120% 90% at 100% 100%, var(--ink-200) 0%, transparent 60%),
    linear-gradient(170deg, var(--paper-raised) 35%, var(--ink-100) 100%);
  border: 1px solid var(--border-firm);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-sm);
}

.arrival__from {
  margin: 0 0 var(--space-xs);
  font-size: var(--text-1);
}

.arrival__how {
  margin: 0 0 var(--space-xs);
}

.lines {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.line {
  gap: 0.35em;
  padding-inline: 0.9em;
}

.line__no {
  font-size: var(--text-1);
  font-weight: 800;
  font-stretch: var(--width-wide);
}

.stays {
  display: grid;
  gap: 0;
  max-inline-size: none;
  margin: var(--space-s) 0 0;
  padding: 0;
  list-style: none;
}

.stay {
  display: grid;
  gap: var(--space-3xs) var(--space-m);
  grid-template-columns: minmax(0, 1fr);
  padding-block: var(--space-s);
  border-block-end: 1px solid var(--border);
}

@media (min-width: 40em) {
  .stay {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    align-items: center;
  }
}

.stay__name {
  margin: 0;
  font-size: var(--text-1);
}

.stay__address {
  margin: 0;
}