:root {
  color-scheme:light;
  --ink:#202020;
  --muted:#686868;
  --paper:#fff;
  --edge:clamp(24px,4.5vw,84px);
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:auto;
  scroll-padding-top:24px;
}

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Arial,'Helvetica Neue','Hiragino Kaku Gothic ProN',Meiryo,sans-serif;
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

a {
  color:inherit;
  text-decoration:none;
}

a:hover {
  text-decoration:underline;
  text-underline-offset:5px;
}

a:focus-visible,summary:focus-visible {
  outline:2px solid var(--ink);
  outline-offset:6px;
}

button,a,summary {
  -webkit-tap-highlight-color:transparent;
}

h1,h2,p,figure {
  margin:0;
}

h1,h2 {
  font-weight:400;
}

img {
  display:block;
  max-width:100%;
  height:auto;
}

.skip {
  position:fixed;
  z-index:10;
  top:-100px;
  left:20px;
  background:#fff;
  padding:12px;
}

.skip:focus {
  top:16px;
}

.site-header {
  padding:32px var(--edge);
  display:flex;
  align-items:baseline;
  gap:48px;
}

.brand {
  font-size:27px;
  letter-spacing:-1.3px;
  font-weight:500;
  line-height:1.3;
}

.site-nav {
  display:flex;
  align-items:baseline;
  gap:28px;
  margin-left:auto;
  font-size:14px;
}

.work-nav,.info-nav {
  display:flex;
  gap:24px;
  align-items:baseline;
}

.info-nav {
  margin-left:30px;
}

.site-nav a {
  padding:7px 0;
  white-space:nowrap;
}

.site-nav [aria-current=page] {
  text-decoration:underline;
  text-underline-offset:5px;
}

.site-footer {
  padding:32px var(--edge);
  display:flex;
  justify-content:space-between;
  gap:24px;
  color:var(--muted);
  font-size:12px;
}

.index-main {
  padding:44px var(--edge) 50px;
  min-height:calc(100svh - 180px);
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.index-label {
  font-size:14px;
  color:var(--muted);
  font-weight:400;
  margin-bottom:32px;
}

.series-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(28px,5.5vw,105px);
  align-items:start;
  max-width:1400px;
  margin:0 auto;
  width:100%;
}

.series-card {
  display:block;
}

.cover {
  height:clamp(300px,53vh,700px);
  display:flex;
  align-items:center;
  justify-content:center;
}

.cover img {
  width:auto;
  max-height:100%;
  max-width:100%;
  object-fit:contain;
}

.card-label {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:10px;
  font-size:16px;
  margin-top:24px;
}

.card-count {
  font-size:12px;
  color:var(--muted);
}

.series-card:hover {
  text-decoration:none;
}

.series-card:hover .card-title {
  text-decoration:underline;
  text-underline-offset:5px;
}

.series-heading {
  padding:36px var(--edge) 48px;
  display:flex;
  align-items:baseline;
  gap:20px;
  justify-content:space-between;
}

.series-heading h1 {
  font-size:22px;
  letter-spacing:-.35px;
}

.subtitle {
  font-size:13px;
  color:var(--muted);
  margin-top:4px;
}

.series-description {
  max-width:460px;
  font-size:14px;
}

.series-description summary {
  cursor:pointer;
  text-align:right;
  list-style:none;
  color:var(--muted);
  padding:8px 0;
}

.series-description summary::-webkit-details-marker {
  display:none;
}

.series-description summary:after {
  content:' +';
  margin-left:8px;
}

.series-description[open] summary:after {
  content:' −';
}

.series-description p {
  padding-top:12px;
  line-height:2;
}

.sequence {
  padding:0 var(--edge);
}

.photo {
  margin:0 auto 100px;
  scroll-margin-top:32px;
}

.photo-frame {
  display:flex;
  justify-content:center;
  align-items:center;
}

.photo img {
  width:auto;
  height:auto;
  max-width:100%;
  max-height:82svh;
  object-fit:contain;
}

.photo-caption {
  display:flex;
  justify-content:center;
  padding-top:16px;
  font-size:12px;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}

.series-end {
  margin:10px var(--edge) 56px;
  padding-top:28px;
  border-top:1px solid #e5e5e5;
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:24px;
  font-size:14px;
}

.next-series {
  display:flex;
  flex-direction:column;
  align-items:flex-end;
}

.next-series span {
  color:var(--muted);
  font-size:12px;
  margin-bottom:4px;
}

.next-series strong {
  font-weight:400;
  font-size:20px;
}

.text-main {
  min-height:calc(100svh - 180px);
  padding:90px var(--edge) 100px;
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:40px;
  align-content:start;
}

.text-main h1 {
  font-size:22px;
}

.text-body {
  max-width:560px;
  line-height:2.1;
}

.text-body p+p {
  margin-top:24px;
}

.contact-links {
  list-style:none;
  padding:0;
  margin:28px 0 0;
}

.contact-links a {
  text-decoration:underline;
  text-underline-offset:5px;
}

.visually-hidden {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.cover picture,.photo-frame picture {
  display:contents;
}

.photo img {
  width:min(100%,var(--photo-width));
  height:auto;
  max-height:none;
}

@media(max-width:700px) {
  .photo img {
    width:100%;
    max-width:100%;
  }
}

.about-main {
  padding:56px var(--edge) 80px;
}

.about-heading {
  display:flex;
  align-items:baseline;
  gap:48px;
  margin-bottom:76px;
}

.about-heading h1 {
  font-size:22px;
}

.about-heading nav {
  display:flex;
  gap:28px;
  font-size:14px;
}

.about-section {
  display:grid;
  grid-template-columns:minmax(160px,1fr) 3fr;
  gap:48px;
  margin-bottom:100px;
  scroll-margin-top:40px;
}

.about-section h2 {
  font-size:16px;
}

.bilingual {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(32px,4vw,72px);
}

.language-copy {
  line-height:2;
  font-size:16px;
}

.language-copy p+p {
  margin-top:24px;
}

.language-label {
  display:block;
  color:var(--muted);
  font-size:12px;
  margin-bottom:20px;
}

.cv-copy {
  font-size:16px;
  line-height:1.9;
}

.cv-group {
  margin-top:40px;
}

.cv-group h3 {
  font-size:14px;
  font-weight:400;
  color:var(--muted);
  margin:0 0 16px;
}

.cv-group p+p {
  margin-top:12px;
}

.contact-links {
  margin-bottom:32px;
}

.series-description p+p {
  margin-top:12px;
}

@media(max-width:1000px) {
  .about-section {
    grid-template-columns:1fr;
    gap:24px;
  }
}

@media(max-width:700px) {
  .about-main {
    padding-top:36px;
    padding-bottom:20px;
  }
  .about-heading {
    display:block;
    margin-bottom:52px;
  }
  .about-heading nav {
    margin-top:20px;
    gap:24px;
  }
  .about-section {
    margin-bottom:64px;
  }
  .bilingual {
    grid-template-columns:1fr;
    gap:36px;
  }
  .language-label {
    margin-bottom:12px;
  }
}

@media(min-width:1600px) {
  .photo img {
    max-width:min(100%,1440px);
  }
}

@media(max-width:1000px) {
  .site-header {
    flex-wrap:wrap;
    gap:18px;
  }
  .site-nav {
    gap:20px;
  }
  .work-nav {
    gap:18px;
  }
  .info-nav {
    margin-left:0;
    gap:18px;
  }
  .series-grid {
    gap:32px;
  }
  .cover {
    height:42vw;
    max-height:560px;
  }
  .index-main {
    padding-top:44px;
  }
  .series-description {
    max-width:360px;
  }
  .photo {
    margin-bottom:80px;
  }
}

@media(max-width:700px) {
  .site-header {
    padding-top:24px;
    padding-bottom:24px;
    gap:18px;
  }
  .brand {
    font-size:26px;
  }
  .site-nav {
    width:100%;
    flex-wrap:wrap;
    justify-content:space-between;
    margin-left:0;
    gap:4px 20px;
  }
  .work-nav {
    gap:16px;
    flex-wrap:wrap;
  }
  .info-nav {
    gap:20px;
  }
  .site-nav a {
    font-size:14px;
  }
  .index-main {
    padding-top:30px;
    padding-bottom:40px;
  }
  .index-label {
    margin-bottom:28px;
  }
  .series-grid {
    grid-template-columns:1fr;
    gap:64px;
    max-width:440px;
  }
  .cover {
    height:auto;
    max-height:none;
  }
  .cover img {
    width:100%;
    height:auto;
    max-height:none;
  }
  .card-label {
    margin-top:14px;
  }
  .series-heading {
    padding-top:28px;
    padding-bottom:32px;
    display:block;
  }
  .series-heading h1 {
    font-size:22px;
  }
  .series-description {
    max-width:none;
    margin-top:12px;
  }
  .series-description summary {
    text-align:left;
  }
  .photo {
    margin-bottom:64px;
  }
  .photo img {
    max-height:none;
    width:100%;
    height:auto;
  }
  .photo-caption {
    padding-top:12px;
  }
  .text-main {
    padding-top:50px;
    grid-template-columns:1fr;
    gap:36px;
  }
  .series-end {
    align-items:flex-start;
    gap:24px;
    margin-bottom:28px;
  }
  .next-series strong {
    font-size:17px;
  }
  .site-footer {
    padding-top:24px;
    padding-bottom:28px;
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
}