.skip-link {
  position: fixed;
  z-index: 100;
  top: .5rem;
  left: .5rem;
  padding: .55rem .8rem;
  border-radius: .5rem;
  background: var(--surface);
  transform: translateY(-150%);
}

.skip-link:focus { transform: translateY(0); }

.about-app { width: min(1120px, 100%); }
.about-header { margin-bottom: 1.15rem; }
.back-link { font-weight: 650; text-decoration-thickness: .08em; text-underline-offset: .18em; }

.about-content { display: grid; gap: 1.25rem; }
.about-hero {
  position: relative;
  overflow: hidden;
  min-height: 14rem;
  display: grid;
  align-content: end;
  gap: .75rem;
  padding: clamp(1.25rem, 3.5vw, 2.5rem);
  border: 1px solid var(--border);
  border-radius: 1.2rem;
  background:
    radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--right) 22%, transparent) 0 9rem, transparent 9.1rem),
    radial-gradient(circle at 76% 34%, color-mix(in srgb, var(--left) 22%, transparent) 0 14rem, transparent 14.1rem),
    linear-gradient(145deg, var(--surface), color-mix(in srgb, var(--accent) 68%, var(--surface)));
}

.about-hero::after {
  content: "";
  position: absolute;
  inset: auto -3rem -7rem auto;
  width: 18rem;
  height: 18rem;
  border: 1px solid color-mix(in srgb, var(--foreground) 14%, transparent);
  border-radius: 50%;
}

.about-eyebrow,
.section-kicker {
  margin: 0;
  color: var(--muted-foreground);
  font-size: .74rem;
  font-weight: 750;
  letter-spacing: .13em;
}

.about-hero h1 { position: relative; z-index: 1; margin: 0; font-size: clamp(1.9rem, 6vw, 3.8rem); line-height: 1.05; letter-spacing: -.035em; }
html[lang="ja"] .about-hero h1 { font-size: clamp(1.05rem, 5vw, 3.15rem); letter-spacing: -.055em; white-space: nowrap; }
.about-lead { position: relative; z-index: 1; width: min(44rem, 90%); margin: 0; font-size: clamp(1.05rem, 2.3vw, 1.35rem); line-height: 1.65; }
.about-layout { display: grid; grid-template-columns: minmax(15rem, 18rem) minmax(0, 1fr); align-items: start; gap: 1.25rem; }
.author-card,
.about-section,
.about-quote {
  border: 1px solid var(--border);
  border-radius: .9rem;
  background: var(--surface);
}

.author-card { position: sticky; top: 1rem; padding: 1.25rem; }
.author-card h2 { margin: .2rem 0 .75rem; font-size: 1.4rem; }
.author-card p { margin: .55rem 0; }
.author-avatar { display: block; width: 4rem; height: 4rem; margin-bottom: 1rem; border: 1px solid var(--border); border-radius: 50%; object-fit: cover; box-shadow: 0 .3rem 1rem rgb(15 23 42 / .14); }
.author-name { font-weight: 750; }
.about-sections { display: grid; gap: 1rem; }
.about-section { padding: clamp(1.1rem, 3vw, 1.75rem); }
.about-section h2 { margin: .25rem 0 1rem; font-size: clamp(1.35rem, 3vw, 1.85rem); }
.about-section p { margin: .8rem 0 0; line-height: 1.82; }
.about-section p:first-of-type { margin-top: 0; }

.about-quote { margin: 0; padding: clamp(1.35rem, 4vw, 2.2rem); border-left: .42rem solid var(--focus); background: var(--accent); }
.about-quote p { margin: 0; font-size: clamp(1.05rem, 2.4vw, 1.35rem); font-weight: 650; line-height: 1.7; }
.ballot-section { border-top: .3rem solid var(--left); }
.boundaries-section { border-top: .3rem solid var(--right); }
.ongoing-section { border-top: .3rem solid var(--center-border); }
.thanks-section { border-top: .3rem solid var(--env-positive); }
.contact-action a { display: inline-flex; padding: .55rem .8rem; border: 1px solid var(--border); border-radius: .55rem; background: var(--accent); font-weight: 700; }

.about-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .7rem 1.5rem; margin-top: 1.25rem; padding: 1rem 0 .4rem; border-top: 1px solid var(--border); }

@media (max-width: 760px) {
  .about-layout { grid-template-columns: 1fr; }
  .author-card { position: static; }
  .about-hero { min-height: 13rem; }
}

@media (max-width: 520px) {
  .about-header .page-title-row { align-items: flex-start; }
  .about-header .language-bar label { display: grid; justify-items: end; }
  .about-hero { padding: 1.25rem; border-radius: .85rem; }
  .about-lead { width: 100%; }
}