:root {
  --ink: #11100e;
  --black: #0b0b0a;
  --paper: #eee7d8;
  --paper-deep: #e5dccb;
  --muted: #686158;
  --rule: rgba(17, 16, 14, 0.32);
  --red: #c7221f;
  --white: #f4f0e7;
  --sans: "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --serif: "Songti SC", "STSong", "Noto Serif CJK SC", Georgia, serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--black);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; }

.skip-link {
  position: fixed;
  z-index: 100;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.65rem 0.9rem;
  color: var(--ink);
  background: var(--paper);
  transform: translateY(-180%);
}
.skip-link:focus { transform: translateY(0); }

.site-header {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 5.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 3vw;
  color: var(--white);
  border-bottom: 1px solid rgba(255,255,255,0.22);
}
.brand {
  font-family: var(--mono);
  font-size: clamp(0.78rem, 1.2vw, 1.05rem);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-decoration: none;
}
.site-nav { display: flex; gap: clamp(1.4rem, 3vw, 3.8rem); }
.site-nav a {
  position: relative;
  padding: 1.85rem 0;
  color: inherit;
  font-family: var(--serif);
  text-decoration: none;
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 1.25rem;
  height: 2px;
  background: var(--red);
  transition: right 180ms ease;
}
.site-nav a:hover::after,
.site-nav a:focus-visible::after { right: 0; }
.menu-toggle { display: none; }

.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(28rem, 0.9fr) minmax(30rem, 1.1fr);
  align-items: center;
  gap: 4vw;
  padding: 8.5rem 6vw 5rem;
  color: var(--white);
  background: var(--black);
}
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgba(255,255,255,0.22);
}
.hero-copy { position: relative; z-index: 2; }
.hero h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(4rem, 6.6vw, 8rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.055em;
}
.hero h1 span { display: block; }
.hero-copy > p {
  max-width: 39rem;
  margin: 2rem 0 0;
  padding-top: 1.25rem;
  border-top: 3px solid var(--red);
  color: rgba(244,240,231,0.76);
  font-family: var(--serif);
  font-size: clamp(1rem, 1.3vw, 1.25rem);
  line-height: 1.8;
}

.hero-visual {
  position: relative;
  width: min(45vw, 48rem);
  aspect-ratio: 1.05;
  justify-self: center;
}
.paper-sheet {
  position: absolute;
  margin: 0;
  background: var(--paper);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 2.5rem 6rem rgba(0,0,0,0.45);
}
.paper-sheet--back {
  inset: 8% 8% 4% 3%;
  transform: rotate(-4deg);
  opacity: 0.72;
}
.paper-sheet--front {
  inset: 4% 2% 8% 7%;
  padding: clamp(0.7rem, 1.2vw, 1.25rem);
  color: var(--ink);
  transform: rotate(1.5deg);
}
.paper-sheet--front img { width: 100%; height: calc(100% - 2rem); object-fit: cover; }
.paper-sheet--front figcaption {
  padding-top: 0.75rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
}
.hero-axis {
  position: absolute;
  z-index: 4;
  top: -6%;
  bottom: -8%;
  left: 54%;
  width: 1px;
  background: var(--red);
}
.hero-axis::after {
  content: "";
  position: absolute;
  top: 52%;
  left: 50%;
  width: 0.8rem;
  height: 0.8rem;
  border: 1px solid var(--red);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.hero-meta {
  position: absolute;
  right: 2vw;
  bottom: 4rem;
  width: 8rem;
  margin: 0;
  font-family: var(--mono);
  font-size: 0.61rem;
  letter-spacing: 0.08em;
}
.hero-meta div { margin-top: 1.15rem; }
.hero-meta dt { color: rgba(244,240,231,0.46); }
.hero-meta dd { margin: 0.3rem 0 0; line-height: 1.6; }

.paper-section {
  position: relative;
  background-color: var(--paper);
  background-image: radial-gradient(circle at 18% 20%, rgba(255,255,255,0.38), transparent 25%), radial-gradient(circle at 84% 70%, rgba(112,95,68,0.07), transparent 30%);
}
.about {
  min-height: 46rem;
  display: grid;
  grid-template-columns: minmax(8rem, 0.25fr) minmax(24rem, 1fr) minmax(16rem, 0.45fr);
  gap: 5vw;
  align-items: start;
  padding: 8rem 6vw;
}
.section-index {
  min-height: 10rem;
  padding-left: 1rem;
  border-left: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  color: var(--red);
  font-family: var(--mono);
}
.section-index strong { color: var(--ink); font-size: 3rem; font-weight: 400; }
.about h2,
.adhd h2 { margin: 0; font-family: var(--serif); font-size: clamp(2.4rem, 4vw, 4.6rem); font-weight: 500; }
.about-body p { max-width: 54rem; font-family: var(--serif); font-size: clamp(1.1rem, 1.35vw, 1.35rem); line-height: 1.85; }
.about-body .lead { font-size: clamp(1.35rem, 2vw, 2rem); line-height: 1.65; }
.about-note { padding-top: 0.5rem; border-top: 1px solid var(--rule); }
.about-note span { font-family: var(--mono); color: var(--red); font-size: 0.72rem; letter-spacing: 0.1em; }
.about-note p { font-family: var(--serif); line-height: 1.75; }

.work { padding: 6rem 3vw 7rem; }
.section-heading {
  display: grid;
  grid-template-columns: minmax(22rem, 0.8fr) minmax(20rem, 1fr) auto;
  gap: 3vw;
  align-items: end;
  padding: 0 0 3rem;
  border-bottom: 2px solid var(--ink);
}
.section-heading h2 { margin: 0; font-family: var(--serif); font-size: clamp(3rem, 5vw, 6.5rem); font-weight: 500; letter-spacing: -0.04em; }
.section-heading p { max-width: 32rem; margin: 0 0 0.7rem; font-family: var(--serif); line-height: 1.7; }
.section-heading > span { align-self: start; text-align: right; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; }
.section-heading > span strong { display: block; color: var(--red); font-family: var(--serif); font-size: 4rem; font-weight: 400; }
.timeline-item { border-bottom: 1px solid var(--rule); }
.timeline-item summary {
  display: grid;
  grid-template-columns: minmax(10rem, 0.32fr) minmax(20rem, 1fr) auto;
  align-items: baseline;
  gap: 3vw;
  padding: 2rem 0.35rem;
  cursor: pointer;
  list-style: none;
}
.timeline-item summary::-webkit-details-marker { display: none; }
.timeline-item summary::after { content: "+"; grid-column: 4; font-size: 1.6rem; }
.timeline-item[open] summary::after { content: "−"; }
.timeline-year { font-family: var(--serif); font-size: clamp(3.5rem, 6.5vw, 8rem); line-height: 0.8; }
.timeline-title { font-family: var(--serif); font-size: clamp(1.25rem, 2.2vw, 2.4rem); }
.timeline-state { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em; }
.timeline-detail {
  display: grid;
  grid-template-columns: 1fr minmax(20rem, 0.75fr);
  gap: 5vw;
  padding: 0 4vw 3.5rem calc(10rem + 3vw);
}
.timeline-detail p { max-width: 48rem; font-family: var(--serif); font-size: 1.15rem; line-height: 1.8; }
.timeline-detail dl { display: flex; gap: 4rem; margin-top: 2rem; }
.timeline-detail dl div { min-width: 9rem; border-top: 1px solid var(--rule); padding-top: 0.7rem; }
.timeline-detail dt { font-family: var(--mono); color: var(--red); font-size: 0.68rem; }
.timeline-detail dd { margin: 0.35rem 0 0; font-family: var(--serif); }
.timeline-detail img { width: 100%; height: 22rem; object-fit: cover; filter: saturate(0.78) contrast(1.04); }

.outside { padding: 5rem 3vw 8rem; }
.outside-intro { display: grid; grid-template-columns: 0.65fr 1fr 0.8fr; align-items: start; gap: 2vw; padding-bottom: 3rem; border-top: 2px solid var(--ink); }
.outside-intro > span { padding-top: 1rem; font-family: var(--mono); color: var(--red); }
.outside-intro h2 { margin: 2rem 0 0; font-family: var(--serif); font-size: clamp(4rem, 7vw, 8rem); font-weight: 500; letter-spacing: -0.05em; }
.outside-intro p { margin: 2rem 0 0; max-width: 26rem; font-family: var(--serif); line-height: 1.75; }
.interest-layout { display: grid; grid-template-columns: minmax(30rem, 0.9fr) minmax(28rem, 1.1fr); gap: 5vw; align-items: start; }
.interest-list { border-top: 1px solid var(--ink); }
.interest-row {
  width: 100%;
  min-height: 5rem;
  display: grid;
  grid-template-columns: 3rem minmax(10rem, 0.65fr) 1fr;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0.25rem;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  cursor: pointer;
}
.interest-row span { color: var(--red); font-family: var(--mono); }
.interest-row strong { font-family: var(--serif); font-size: 1.35rem; font-weight: 500; }
.interest-row small { color: var(--muted); font-family: var(--serif); font-size: 0.92rem; }
.interest-row:hover,
.interest-row:focus-visible,
.interest-row.is-active { padding-left: 1rem; background: rgba(255,255,255,0.28); outline: none; }
.interest-row.is-active strong { text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 0.35rem; }
.interest-stage { position: sticky; top: 2rem; margin: 0; }
.interest-stage img { width: 100%; aspect-ratio: 4/3; object-fit: cover; background: var(--paper-deep); }
.interest-stage figcaption { max-width: 42rem; padding: 1.25rem 0; border-bottom: 1px solid var(--rule); font-family: var(--serif); font-size: 1.1rem; line-height: 1.7; }

.adhd {
  display: grid;
  grid-template-columns: minmax(18rem, 0.55fr) minmax(26rem, 1fr);
  gap: 6vw;
  padding: 8rem 6vw;
  border-top: 1px solid var(--rule);
}
.adhd-mark { font-family: var(--mono); font-size: clamp(5rem, 11vw, 13rem); color: transparent; -webkit-text-stroke: 1px var(--red); line-height: 0.8; }
.adhd p { max-width: 58rem; font-family: var(--serif); font-size: clamp(1.25rem, 1.8vw, 1.8rem); line-height: 1.75; }

.contact {
  padding: 8rem 6vw 7rem;
  color: var(--white);
  background: var(--black);
  border-top: 1px solid rgba(255,255,255,0.2);
}
.contact p { margin: 0; color: rgba(244,240,231,0.58); font-family: var(--serif); font-size: clamp(1.4rem, 2vw, 2rem); }
.contact h2 { max-width: 70rem; margin: 0.35rem 0 4rem; font-family: var(--serif); font-size: clamp(4rem, 8vw, 10rem); font-weight: 500; line-height: 1; letter-spacing: -0.055em; }
.contact-links { display: flex; gap: 1rem; }
.contact-links a { min-width: 11rem; display: flex; justify-content: space-between; padding: 1rem 0; border-top: 1px solid rgba(255,255,255,0.4); text-decoration: none; }
.contact-links a:hover,
.contact-links a:focus-visible { color: var(--red); }

.site-footer {
  min-height: 6rem;
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: center;
  gap: 2rem;
  padding: 0 3vw;
  color: var(--white);
  background: var(--black);
  border-top: 1px solid rgba(255,255,255,0.25);
  font-family: var(--mono);
  font-size: 0.75rem;
}
.site-footer a:last-child { text-decoration: none; }

@media (max-width: 980px) {
  .site-header { min-height: 4.6rem; padding: 0 1.25rem; }
  .menu-toggle {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.8rem 0;
    color: inherit;
    background: transparent;
    border: 0;
    font-family: var(--mono);
    font-size: 0.74rem;
  }
  .menu-lines,
  .menu-lines::before { display: block; width: 1.6rem; height: 1px; background: currentColor; transition: transform 160ms ease; }
  .menu-lines { position: relative; }
  .menu-lines::before { content: ""; position: absolute; top: 0.45rem; }
  .menu-toggle[aria-expanded="true"] .menu-lines { transform: translateY(0.2rem) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .menu-lines::before { top: 0; transform: rotate(-90deg); }
  .site-nav {
    position: absolute;
    top: 4.6rem;
    left: 0;
    right: 0;
    display: none;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    background: var(--black);
    border-bottom: 1px solid rgba(255,255,255,0.25);
  }
  .site-nav.is-open { display: grid; }
  .site-nav a { padding: 1.25rem; border-top: 1px solid rgba(255,255,255,0.16); }
  .site-nav a::after { display: none; }

  .hero { grid-template-columns: 1fr; gap: 3rem; padding: 8rem 1.5rem 5rem; }
  .hero h1 { font-size: clamp(3.8rem, 14vw, 7rem); }
  .hero-visual { width: min(92vw, 42rem); }
  .hero-meta { display: none; }
  .about { min-height: auto; grid-template-columns: 7rem 1fr; padding: 6rem 1.5rem; }
  .about-note { grid-column: 2; }
  .section-heading { grid-template-columns: 1fr; }
  .section-heading > span { position: absolute; right: 1.5rem; top: 5.5rem; }
  .timeline-item summary { grid-template-columns: 8rem 1fr auto; gap: 1.5rem; }
  .timeline-state { display: none; }
  .timeline-item summary::after { grid-column: 3; }
  .timeline-detail { grid-template-columns: 1fr; padding-left: calc(8rem + 1.5rem); }
  .interest-layout { grid-template-columns: 1fr; }
  .interest-stage { position: static; }
  .adhd { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  html { scroll-padding-top: 4rem; }
  .hero { min-height: auto; padding-top: 7rem; }
  .hero h1 { font-size: clamp(3.45rem, 17.5vw, 5.5rem); line-height: 1.04; }
  .hero h1 span:nth-child(3) { font-size: 0.88em; }
  .hero-copy > p { font-size: 1rem; }
  .hero-visual { aspect-ratio: 0.95; }
  .paper-sheet--front { inset: 5% 0 8% 5%; }
  .paper-sheet--back { inset: 10% 6% 2% 0; }
  .paper-sheet--front img { height: calc(100% - 1.6rem); }
  .paper-sheet--front figcaption { padding-top: 0.5rem; font-size: 0.57rem; }

  .about { grid-template-columns: 1fr; gap: 2rem; padding: 5rem 1.25rem; }
  .section-index { min-height: auto; flex-direction: row; align-items: center; border-left: 0; border-top: 1px solid var(--rule); padding: 0.8rem 0 0; }
  .section-index strong { font-size: 1.8rem; }
  .about-note { grid-column: 1; }
  .about h2, .adhd h2 { font-size: 2.8rem; }

  .work, .outside { padding: 4rem 1.25rem 5rem; }
  .section-heading { gap: 1.2rem; padding-bottom: 2rem; }
  .section-heading h2 { font-size: 3.6rem; }
  .section-heading > span { display: none; }
  .timeline-item summary { grid-template-columns: 6.5rem 1fr auto; gap: 0.8rem; padding: 1.5rem 0; }
  .timeline-year { font-size: 3rem; }
  .timeline-title { font-size: 1.08rem; line-height: 1.45; }
  .timeline-detail { padding: 0 0 2.5rem; }
  .timeline-detail dl { gap: 1rem; flex-wrap: wrap; }
  .timeline-detail img { height: 15rem; }

  .outside-intro { grid-template-columns: 1fr; }
  .outside-intro h2 { margin-top: 0; font-size: 4.5rem; }
  .outside-intro p { margin-top: 0; }
  .interest-row { grid-template-columns: 2.3rem 1fr; padding: 1rem 0; }
  .interest-row small { grid-column: 2; }
  .interest-row:hover,
  .interest-row:focus-visible,
  .interest-row.is-active { padding-left: 0.5rem; }
  .interest-stage img { aspect-ratio: 1.2; }

  .adhd { padding: 5rem 1.25rem; gap: 2rem; }
  .adhd-mark { font-size: 5.5rem; }
  .contact { padding: 5rem 1.25rem 4rem; }
  .contact h2 { font-size: 4.2rem; }
  .contact-links { flex-direction: column; }
  .site-footer { grid-template-columns: 1fr auto; padding: 1.5rem 1.25rem; }
  .site-footer p { grid-column: 1 / -1; grid-row: 2; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}