* {
  box-sizing:border-box
}
html {
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.7
}
body {
  margin:0
}
a {
  color:var(--link);
  text-underline-offset:4px
}
a:focus-visible {
  outline:3px solid var(--accent);
  outline-offset:5px
}
header,main,footer {
  max-width:920px;
  margin:auto;
  padding:28px
}
header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  gap:24px;
  flex-wrap:wrap
}
header>a {
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:700;
  font-size:1.2rem;
  color:var(--ink);
  text-decoration:none
}
header img {
  width:44px;
  height:44px;
  border-radius:11px
}
nav {
  display:flex;
  gap:20px;
  flex-wrap:wrap
}
main {
  min-height:65vh;
  padding-top:50px;
  padding-bottom:60px
}
h1 {
  font-size:clamp(2rem,5vw,3rem);
  line-height:1.15;
  letter-spacing:-.035em;
  margin:0 0 22px;
  max-width:720px
}
h2 {
  font-size:1.35rem;
  margin:32px 0 8px;
  line-height:1.35
}
p,li {
  font-size:1.05rem;
  max-width:760px
}
p {
  margin:12px 0
}
ul {
  padding-left:24px
}
.intro {
  font-size:1.25rem;
  color:var(--muted);
  max-width:690px
}
.meta {
  font-size:.9rem;
  color:var(--muted)
}
.cards {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin:34px 0
}
.cards a {
  display:block;
  padding:24px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--glass);
  text-decoration:none
}
.cards strong {
  font-size:1.3rem;
  display:block;
  margin-bottom:10px
}
.cards span {
  color:var(--muted)
}
.note {
  border-left:3px solid var(--accent);
  padding:4px 0 4px 20px;
  margin:24px 0
}
footer {
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:.9rem
}
footer a {
  margin-right:18px
}
@media(max-width:600px) {
  header,main,footer {
  padding-left:22px;
  padding-right:22px
}
.cards {
  grid-template-columns:1fr
}
nav {
  gap:14px
}
main {
  padding-top:34px
}

}

nav {
  align-items:center
}
.cards a {
  background-image:var(--glass-sheen);
  box-shadow:var(--glass-shadow)
}
body {
  background:radial-gradient(ellipse at 90% 0,var(--glow-rose),transparent 50%)
}