:root {
  --notes-wide: 1180px;
  --notes-measure: 65ch;
}

.notes-page { min-height: 100%; background: var(--bg); color: var(--ink); }
.notes-page main { min-height: 70vh; }
.notes-page .nav-links a[aria-current="page"] { color: var(--ink); }
.notes-page .nav-links a[aria-current="page"]::after { content: ""; display: block; height: 1px; margin-top: 4px; background: var(--accent); }

.notes-section-label,
.note-meta,
.notes-back,
.notes-index-row time,
.notes-read,
.notes-language-note {
  font-family: var(--brand-font);
  font-size: .6875rem;
  font-weight: 760;
  letter-spacing: .095em;
  line-height: 1.4;
  text-transform: uppercase;
}

.notes-masthead,
.note-masthead {
  color: #f7f7f4;
  background: linear-gradient(138deg, #0f1113 0%, #171a1d 66%, #21191b 120%, #542329 190%);
}

.notes-masthead-inner,
.note-masthead-inner,
.notes-index,
.note-article-surface {
  width: min(calc(100% - 2 * var(--page-pad)), var(--notes-wide));
  margin-inline: auto;
}

.notes-masthead-inner {
  display: grid;
  grid-template-columns: minmax(150px, 240px) minmax(0, 1fr);
  gap: var(--section-gap);
  align-items: start;
  padding-block: clamp(82px, 9vw, 126px);
}
.notes-section-label { padding-top: .72rem; color: #ff6b70; }
.notes-index-intro { max-width: 880px; }
.notes-index-intro h1 {
  max-width: 14ch;
  margin: 0;
  color: #f7f7f4;
  font-family: var(--brand-font);
  font-size: clamp(3rem, 6.2vw, 5.75rem);
  font-weight: 720;
  letter-spacing: -.058em;
  line-height: .96;
}
[lang="cs"] .notes-index-intro h1 { max-width: 15ch; font-size: clamp(2.85rem, 5.5vw, 5.2rem); }

@media (min-width: 900px) {
  .notes-masthead-inner {
    grid-template-columns: minmax(130px, 190px) minmax(0, 1fr);
    gap: clamp(44px, 5vw, 70px);
    padding-block: clamp(78px, 8vw, 112px);
  }
  .notes-index-intro { max-width: 980px; }
  .notes-index-intro h1 {
    max-width: 17ch;
    font-size: clamp(3rem, 5.7vw, 5.35rem);
  }
  [lang="cs"] .notes-index-intro h1 {
    max-width: 17ch;
    font-size: clamp(2.85rem, 5.2vw, 4.95rem);
  }
  .note-header {
    grid-template-columns: minmax(150px, 210px) minmax(0, 1fr);
    gap: clamp(44px, 5vw, 70px);
  }
}

.notes-index { padding-block: clamp(42px, 5vw, 66px) clamp(70px, 8vw, 112px); }
.notes-index-list { padding: 0; border-top: 1px solid var(--line); }
.notes-index-row {
  display: grid;
  grid-template-columns: 142px minmax(0, 1fr) auto;
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
  padding: clamp(30px, 4vw, 50px) 0;
  border-bottom: 1px solid var(--line);
}
.notes-index-row time { padding-top: 7px; color: var(--muted); }
.notes-index-row h2 { margin: 0; font-size: clamp(2.2rem, 4.25vw, 3.6rem); letter-spacing: -.05em; line-height: .98; }
.notes-index-subtitle { margin: 12px 0 0; color: var(--ink); font-family: var(--brand-font); font-size: clamp(1rem, 1.5vw, 1.18rem); font-weight: 650; }
.notes-index-description { max-width: 650px; margin: 18px 0 0; color: var(--ink2); font-size: .96875rem; line-height: 1.65; }
.notes-read { display: inline-flex; gap: 8px; align-items: center; padding-top: 7px; color: var(--accent); white-space: nowrap; }
.notes-index-row:hover .notes-read,
.notes-index-row:focus-visible .notes-read { color: #a8141c; }

.note-masthead-inner { padding-block: 30px clamp(58px, 6.4vw, 84px); }
.notes-back { display: inline-flex; gap: 7px; color: rgba(247, 247, 244, .56); }
.notes-back:hover,
.notes-back:focus-visible { color: #fff; }
.note-header {
  display: grid;
  grid-template-columns: minmax(150px, 240px) minmax(0, 1fr);
  gap: var(--section-gap);
  align-items: start;
  margin-top: clamp(42px, 5vw, 64px);
}
.note-meta { display: grid; gap: 9px; padding-top: .5rem; color: rgba(247, 247, 244, .52); }
.note-number { color: #ff6b70; }
.note-title {
  max-width: min(100%, 18ch);
  margin: 0;
  color: #f7f7f4;
  font-family: var(--brand-font);
  font-size: clamp(2.9rem, 4.5vw, 4.4rem);
  font-weight: 740;
  letter-spacing: -.052em;
  line-height: .96;
  text-transform: none;
  text-wrap: balance;
}
.note-deck {
  max-width: 680px;
  margin: 20px 0 0;
  color: rgba(247, 247, 244, .68);
  font-size: clamp(1.125rem, 1.7vw, 1.45rem);
  line-height: 1.42;
  text-wrap: balance;
}

.note-article-surface { padding-bottom: clamp(100px, 11vw, 150px); }
.notes-language-note {
  width: min(100%, var(--notes-measure));
  margin: 30px auto -16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  text-transform: none;
}
.note-body {
  width: min(100%, var(--notes-measure));
  margin: clamp(46px, 5vw, 66px) auto 0;
  color: #25282b;
  font-size: clamp(1.0625rem, 1.2vw, 1.125rem);
  line-height: 1.72;
  counter-reset: note-section;
}
.note-body p {
  margin: 0 0 1.08em;
  text-align: left;
  text-wrap: pretty;
}
.note-body .note-standfirst {
  max-width: 61ch;
  margin-bottom: 1.55em;
  color: var(--ink);
  font-size: clamp(1.22rem, 1.7vw, 1.4rem);
  font-style: normal;
  font-weight: 520;
  line-height: 1.58;
}
.note-body h2 {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 15px;
  align-items: baseline;
  margin: clamp(68px, 7vw, 86px) 0 22px;
  font-family: var(--brand-font);
  font-size: clamp(1.625rem, 2.4vw, 2rem);
  font-weight: 690;
  letter-spacing: -.03em;
  line-height: 1.14;
  text-wrap: balance;
  break-after: avoid;
}
.note-body h2 > span {
  color: var(--accent);
  font-size: .6875rem;
  font-weight: 760;
  letter-spacing: .095em;
  line-height: 1;
}
.note-pull {
  margin: clamp(48px, 5.5vw, 68px) 0;
  padding: 6px 0 6px clamp(22px, 3vw, 34px);
  border-left: 2px solid var(--accent);
  color: var(--ink);
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-style: normal;
  font-weight: 590;
  letter-spacing: -.018em;
  line-height: 1.34;
  text-wrap: balance;
}
.note-pull p { margin: 0; }
.note-pull em { font-style: inherit; }

.note-emphasis-line,
.note-lead-in,
.note-connector {
  color: var(--ink);
  text-wrap: balance;
}
.note-emphasis-line {
  margin-block: .2em 1.25em !important;
  font-size: 1.05em;
}
.note-lead-in { margin-bottom: .45em !important; }
.note-connector {
  margin: -.4em 0 .45em !important;
  color: var(--muted);
  font-size: .88em;
}
.note-emphasis-line em,
.note-lead-in em,
.note-connector em { font-style: normal; }

.note-end-nav {
  width: min(100%, var(--notes-measure));
  margin: clamp(64px, 8vw, 96px) auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.note-end-nav a {
  color: var(--ink2);
  font-family: var(--brand-font);
  font-size: .6875rem;
  font-weight: 760;
  letter-spacing: .095em;
  text-transform: uppercase;
}
.note-draft .note-number { color: #ff6b70; }

.notes-footer { padding: 34px 0 52px; border-top: 1px solid var(--line); color: var(--muted); font-size: .75rem; }
.notes-footer-inner { width: min(calc(100% - 2 * var(--page-pad)), var(--notes-wide)); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.notes-footer-links { display: flex; flex-wrap: wrap; gap: 18px; color: var(--ink2); font-weight: 700; }

@media (max-width: 899px) {
  .notes-index-row { grid-template-columns: 112px minmax(0, 1fr); }
  .notes-read { grid-column: 2; padding-top: 2px; }
}

@media (max-width: 700px) {
  .notes-masthead-inner,
  .note-header { grid-template-columns: 1fr; gap: 16px; }
  .notes-masthead-inner { padding-block: 64px 72px; }
  .notes-section-label,
  .note-meta { padding-top: 0; }
  .note-header { margin-top: 46px; }
  .note-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; }
}

@media (max-width: 600px) {
  .notes-masthead-inner,
  .note-masthead-inner,
  .notes-index,
  .note-article-surface { width: calc(100% - 36px); }
  .notes-index-row { grid-template-columns: 1fr; gap: 13px; }
  .notes-index-row time,
  .notes-read { grid-column: 1; padding-top: 0; }
  .note-masthead-inner { padding-top: 26px; }
  .note-title { max-width: 100%; font-size: clamp(2.75rem, 13vw, 3.55rem); }
  .note-body { font-size: 1.0625rem; line-height: 1.72; }
  .note-body h2 { grid-template-columns: 28px minmax(0, 1fr); gap: 10px; margin-top: 58px; }
  .note-pull { font-size: clamp(1.32rem, 6.2vw, 1.58rem); }
  .notes-footer-inner { width: calc(100% - 36px); align-items: flex-start; flex-direction: column; }
}

@media (min-width: 701px) and (max-width: 1100px) {
  .note-title { max-width: 16ch; }
  .note-body h2 { max-width: 25ch; }
}