.note-page {
  min-height:100vh;
  min-height:100svh;
  color:var(--site-fg);
  background:var(--site-bg);
}

.note-page .note-site-header {
  justify-content:flex-start;
  color:var(--site-fg);
  border-color:var(--site-line);
  background:var(--site-bg-96);
}

.note-main { min-height:100vh; min-height:100svh; }

.note-article { width:100%; }

.note-hero {
  width:min(100%,76rem);
  margin-inline:auto;
  padding:clamp(9rem,14vw,13rem) var(--pad) clamp(4.5rem,8vw,7rem);
}

.note-meta {
  display:flex;
  gap:.8rem;
  margin:0 0 clamp(2.5rem,5vw,4rem);
  color:var(--site-muted);
  font-size:.58rem;
  letter-spacing:.2em;
  text-transform:uppercase;
}

.note-language {
  display:grid;
  grid-template-columns:max-content minmax(0,1fr);
  gap:.45rem 1.2rem;
  max-width:46rem;
  margin:0 0 clamp(2.5rem,5vw,4rem);
  padding:1rem 0;
  border-block:1px solid var(--site-line);
  color:var(--site-muted);
  font-size:.64rem;
  line-height:1.5;
}

.note-language strong {
  color:var(--site-fg);
  font-size:.58rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.note-hero h1 {
  max-width:none;
  margin:0;
  font-size:clamp(4.5rem,7vw,6.5rem);
  font-weight:300;
  line-height:.9;
  letter-spacing:-.065em;
  white-space:nowrap;
}

.note-hero h1 span { display:inline; }

.note-lead {
  max-width:52rem;
  margin:clamp(3rem,6vw,5rem) 0 0;
  color:var(--site-fg);
  font-family:Georgia,serif;
  font-size:clamp(1.08rem,1.8vw,1.32rem);
  font-style:italic;
  line-height:1.7;
}

.note-photo {
  width:min(calc(100% - (var(--pad) * 2)),24rem);
  margin:0 auto;
}

.note-photo picture,
.note-photo img {
  display:block;
  width:100%;
}

.note-photo img {
  height:auto;
}

.note-photo figcaption {
  display:block;
  margin:0;
  padding:1rem 0 0;
  border:0;
  color:var(--site-muted);
  font-size:.56rem;
  letter-spacing:.18em;
  text-align:left;
  text-transform:uppercase;
}

.note-body {
  width:min(calc(100% - (var(--pad) * 2)),52rem);
  margin-inline:auto;
  padding:clamp(4.5rem,8vw,7rem) 0 clamp(5rem,10vw,9rem);
  color:var(--site-muted);
  font-family:Georgia,serif;
  font-size:clamp(1rem,1.5vw,1.18rem);
  line-height:1.85;
}

.note-body > p { margin:0 0 1.5rem; }

.note-end {
  margin-top:clamp(4rem,8vw,7rem);
  padding-top:2rem;
  border-top:1px solid var(--site-line);
}

.note-end a {
  display:inline-block;
  color:var(--site-fg);
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:.62rem;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
}

@media (max-width:900px) {
  .note-hero h1 {
    font-size:clamp(3.25rem,11vw,6rem);
    white-space:normal;
  }

  .note-hero h1 span { display:block; }
}

@media (max-width:520px) {
  .note-page .note-site-header { padding-inline:1rem; }
  .note-hero { padding-top:7.5rem; }
  .note-language { grid-template-columns:1fr; }
  .note-body { width:calc(100% - 2.5rem); }
}

@media (prefers-reduced-motion:reduce) {
  .note-page * { scroll-behavior:auto !important; }
}