@charset "utf-8";

/* =========================================================
   Sugiyama Yoshihiko — minimal monotone
   References: yoshitomonara.com / theastergates.com
   ========================================================= */

:root {
  --fg: #111;
  --fg-soft: #555;
  --fg-mute: #999;
  --line: #e4e4e4;
  --bg: #fff;
  --serif: "Cormorant Garamond", "Noto Serif JP", "Times New Roman", serif;
  --sans: "Inter", "Noto Sans JP", -apple-system, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--sans);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.85;
  color: var(--fg);
  background: var(--bg);
  letter-spacing: .02em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; transition: opacity .25s ease; }
a:hover { opacity: .5; }
p { margin: 0 0 1em; }

/* ---------- Header ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  max-width: 1480px;
  margin: 0 auto;
  padding: 1.25rem 2.5rem;
  position: relative;
}
.header-title { flex: 0 0 auto; }
.site-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.25rem;
  letter-spacing: .12em;
  color: var(--fg);
  display: inline-block;
}
.site-title img { display: none; } /* hide bitmap logo, use text wordmark */
.header-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: 2.5rem;
}
.header-nav li a {
  font-size: .72rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--fg);
  font-weight: 400;
  padding: .25rem 0;
  position: relative;
}
.header-nav li a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: var(--fg);
}

/* ---------- Layout ---------- */
.wrapper { flex: 1; }
.container {
  width: min(100%, 1480px);
  margin: 0 auto;
}
.contents { padding: 5rem 2.5rem 7rem; }

/* ---------- HOME — hero image + statement ---------- */
.home .wrapper { display: block; }
.home .contents { padding: 0; }
.hero {
  position: relative;
  width: 100%;
  height: calc(100dvh - 80px);
  min-height: 520px;
  max-height: 900px;
  overflow: hidden;
  background: #111;
}
.hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(.15);
}
.home-intro {
  max-width: 720px;
  margin: 0 auto;
  padding: 7rem 2.5rem 7rem;
  text-align: left;
}
.home-intro h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  letter-spacing: .08em;
  margin: 0 0 .35em;
  line-height: 1.3;
}
.home-intro .home-sub {
  font-size: .72rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin-bottom: 2.5rem;
}
.home-intro p {
  font-size: .94rem;
  line-height: 2.1;
  color: var(--fg);
}
.home-intro .home-more {
  display: inline-block;
  margin-top: 2.5rem;
  font-size: .72rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--fg);
  padding-bottom: 2px;
}

/* ---------- Page title ---------- */
.page-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2rem;
  margin: 0 0 3.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
}
.page-head h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  letter-spacing: .12em;
  margin: 0;
}
.page-head .page-sub {
  font-size: .72rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--fg-mute);
}

/* ---------- Work (Nara album style) ---------- */
.work-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5rem 3rem;
}
.work-item a { display: block; }
.work-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #f4f4f4;
}
.work-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s ease, filter .5s ease;
  filter: grayscale(.05);
}
.work-item a:hover .work-thumb img {
  transform: scale(1.03);
  filter: grayscale(.4);
}
.work-meta { padding-top: 1rem; }
.work-meta h2 {
  margin: 0;
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 400;
  letter-spacing: .04em;
  line-height: 1.5;
  color: var(--fg);
}
.work-meta .work-year {
  display: block;
  margin-top: .35em;
  font-size: .68rem;
  letter-spacing: .22em;
  color: var(--fg-mute);
  text-transform: uppercase;
}

/* ---------- Projects (Theaster Gates style) ---------- */
.project-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6rem 4rem;
}
.project-item a { display: block; }
.project-thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #f4f4f4;
}
.project-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(.15);
  transition: transform .8s ease;
}
.project-item a:hover .project-thumb img { transform: scale(1.03); }
.project-meta { padding-top: 1.25rem; }
.project-meta h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.25rem;
  letter-spacing: .06em;
  margin: 0 0 .35em;
}
.project-meta .project-info {
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--fg-mute);
}

/* ---------- Single artwork page ---------- */
.article-content {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr);
  gap: 4rem;
  align-items: start;
}
.article-content h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.6rem;
  letter-spacing: .08em;
  margin: 0 0 1.5rem;
}
.article-img img {
  width: 100%;
  max-height: calc(100dvh - 14rem);
  object-fit: contain;
  background: #f4f4f4;
}
.main-content {
  font-size: .92rem;
  line-height: 2.05;
}

/* ---------- Text page ---------- */
.text-page {
  max-width: 720px;
  margin: 0 auto;
}

/* ---------- CV (base.ec inspired) ---------- */
.cv-page { max-width: 880px; margin: 0 auto; }
.cv-intro {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 3rem;
  margin-bottom: 5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--line);
}
.cv-name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.8rem;
  letter-spacing: .08em;
  margin: 0 0 .25em;
}
.cv-name-en {
  font-size: .72rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin: 0;
}
.cv-summary p {
  font-size: .94rem;
  line-height: 2;
  margin: 0 0 1em;
}
.cv-summary p:last-child { margin-bottom: 0; }
.cv-section { margin-top: 4rem; }
.cv-section:first-of-type { margin-top: 0; }
.cv-section h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin: 0 0 1.5rem;
  padding-bottom: .65rem;
  border-bottom: 1px solid var(--fg);
  color: var(--fg);
}
.cv-list { margin: 0; padding: 0; }
.cv-row {
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: 1.5rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--line);
  font-size: .9rem;
  line-height: 1.7;
}
.cv-row:last-child { border-bottom: 0; }
.cv-row dt, .cv-row dd { margin: 0; }
.cv-row dt {
  font-size: .82rem;
  letter-spacing: .12em;
  color: var(--fg-mute);
}

/* ---------- Contact ---------- */
.contact-page {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.contact-page h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.6rem, 2.5vw, 2.1rem);
  letter-spacing: .14em;
  margin: 0 0 2rem;
}
.contact-page p {
  font-size: .92rem;
  line-height: 2;
}
.contact-mail {
  display: inline-block;
  margin-top: 1.5rem;
  font-family: var(--serif);
  font-size: clamp(.95rem, 3vw, 1.2rem);
  letter-spacing: .04em;
  border-bottom: 1px solid var(--fg);
  padding-bottom: 3px;
  word-break: break-all;
}
.contact-links {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-top: 3.5rem;
  font-size: .72rem;
  letter-spacing: .26em;
  text-transform: uppercase;
}

/* ---------- Statement ---------- */
.statement-page { max-width: 760px; margin: 0 auto; }
.statement-page .statement-text {
  font-size: .94rem;
  line-height: 2.1;
  margin: 0 0 3.5rem;
}
.statement-page .statement-image {
  width: 100%;
  margin: 3rem 0;
}

/* ---------- Misc ---------- */
.coming-soon {
  text-align: center;
  font-size: .72rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--fg-mute);
  padding: 8rem 0;
}

/* ---------- Footer ---------- */
.footer {
  border-top: 1px solid var(--line);
  padding: 2.5rem 2.5rem 2.5rem;
  margin-top: auto;
}
.footer-inner {
  max-width: 1480px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.footer-inner .sns ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  gap: 1.75rem;
}
.footer-inner .sns li {
  font-size: .68rem;
  letter-spacing: .26em;
  text-transform: uppercase;
}
.footer-inner .copyright p {
  margin: 0;
  font-size: .66rem;
  letter-spacing: .2em;
  color: var(--fg-mute);
}

/* ---------- Mobile nav ---------- */
.navbutton { display: none; }

@media (max-width: 880px) {
  .header-inner { padding: 1rem 1.25rem; }
  .site-title { font-size: .92rem; letter-spacing: .14em; }
  .navbutton {
    display: block;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: .25rem;
    z-index: 60;
    position: relative;
  }
  .navbutton::after {
    font-family: "Material Symbols Outlined";
    font-size: 1.8rem;
    content: "\e5d2";
  }
  .menu-active .navbutton::after { content: "\e5cd"; }
  /* Disable header backdrop-filter on mobile so the menu overlay can size
     to the viewport (backdrop-filter creates a containing block for
     position:fixed descendants in WebKit) */
  .header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* Mobile menu = semi-transparent fullscreen overlay */
  .header-nav-wrap {
    position: fixed;
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: rgba(255, 255, 255, .82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    display: none;
    z-index: 55;
  }
  .header-nav-wrap.is-open { display: flex; align-items: center; justify-content: center; }
  .header-nav ul {
    flex-direction: column;
    gap: 1.75rem;
    text-align: center;
    padding: 0;
    margin: 0;
  }
  .header-nav li a {
    font-size: .95rem;
    letter-spacing: .3em;
    padding: .25rem 0;
  }
  .header-nav li a[aria-current="page"]::after {
    bottom: -4px;
  }
  .hero { height: 70vh; min-height: 420px; }
  .home-intro { padding: 4rem 1.5rem; }
  .contents { padding: 3rem 1.25rem 5rem; }
  .page-head { flex-direction: column; align-items: flex-start; gap: .5rem; margin-bottom: 2.5rem; }
  .work-grid { grid-template-columns: repeat(2, 1fr); gap: 3rem 1rem; }
  .project-list { grid-template-columns: 1fr; gap: 3.5rem; }
  .cv-intro { grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 3rem; }
  .cv-row { grid-template-columns: 4rem 1fr; gap: .9rem; }
  .article-content { grid-template-columns: 1fr; gap: 2rem; }
  .footer { padding: 2rem 1.25rem; }
  .footer-inner { flex-direction: column; gap: 1rem; text-align: center; }
}

@media (max-width: 520px) {
  .work-grid { grid-template-columns: 1fr; gap: 3rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ---------- Album (year tabs + session cover grid) ---------- */
.album-years {
  display: flex;
  gap: 2rem;
  margin: 0 0 3rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}
.album-years a {
  font-family: var(--serif);
  font-size: 1.05rem;
  letter-spacing: .14em;
  color: var(--fg-mute);
}
.album-years a:hover { color: var(--fg); opacity: 1; }
.album-year { margin-bottom: 5rem; scroll-margin-top: 6rem; }
.album-year-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 2.2rem;
  letter-spacing: .12em;
  margin: 0 0 2rem;
  color: var(--fg);
}
.album-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4rem 2.5rem;
}
.album-item a { display: block; }
.album-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #f4f4f4;
  overflow: hidden;
}
.album-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(.05);
  transition: transform .8s ease, filter .5s ease;
}
.album-item a:hover .album-thumb img {
  transform: scale(1.03);
  filter: grayscale(.35);
}
.album-meta { padding-top: 1rem; }
.album-meta h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.1rem;
  letter-spacing: .04em;
}
.album-count {
  display: block;
  margin-top: .25em;
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--fg-mute);
}

/* ---------- Session page ---------- */
.session-head { align-items: center; }
.session-head h1 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  letter-spacing: .08em;
}
.session-year {
  margin: 0 0 .35em;
  font-size: .72rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.session-back {
  font-size: .72rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.session-concept { max-width: 720px; margin: 0 0 4rem; font-size: .94rem; line-height: 2.05; color: var(--fg-soft); }
.session-concept:empty { display: none; }

.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.photo-item { margin: 0; }
.photo-item a { display: block; aspect-ratio: 1; overflow: hidden; background: #f4f4f4; }
.photo-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: opacity .3s ease, transform .6s ease;
}
.photo-item a:hover img { opacity: .85; transform: scale(1.02); }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(15,15,15,.96);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.lightbox[aria-hidden="false"] { opacity: 1; pointer-events: auto; }
.lb-stage {
  max-width: 92vw;
  max-height: 86vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lb-img {
  max-width: 100%;
  max-height: 86vh;
  object-fit: contain;
  background: #111;
}
.lb-caption {
  position: absolute;
  bottom: 1.25rem;
  left: 0; right: 0;
  text-align: center;
  color: #ccc;
  font-size: .72rem;
  letter-spacing: .26em;
  text-transform: uppercase;
}
.lb-close, .lb-prev, .lb-next {
  position: absolute;
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 2.5rem;
  line-height: 1;
  cursor: pointer;
  opacity: .7;
  padding: .25em .5em;
  transition: opacity .2s ease;
}
.lb-close:hover, .lb-prev:hover, .lb-next:hover { opacity: 1; }
.lb-close { top: 1rem; right: 1.25rem; font-size: 2rem; }
.lb-prev { left: 1.25rem; top: 50%; transform: translateY(-50%); }
.lb-next { right: 1.25rem; top: 50%; transform: translateY(-50%); }

@media (max-width: 880px) {
  .album-grid { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 1rem; }
  .album-year-title { font-size: 1.6rem; }
  .photo-grid { grid-template-columns: repeat(2, 1fr); gap: .5rem; }
  .session-head { flex-direction: row; align-items: flex-start; }
}
@media (max-width: 520px) {
  .album-grid { grid-template-columns: 1fr; gap: 3rem; }
}

/* ---------- Projects detail (editorial) ---------- */
.project-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 4rem;
  align-items: start;
  padding: 0 0 6rem;
  margin-bottom: 6rem;
  border-bottom: 1px solid var(--line);
}
.project-detail:last-of-type {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}
.project-detail-cover {
  position: sticky;
  top: 6rem;
}
.project-detail-cover img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: #f4f4f4;
  filter: grayscale(.15);
}
.project-detail-body--full {
  grid-column: 1 / -1;
  max-width: 760px;
  margin: 0 auto;
}
.project-role {
  font-size: .72rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin: 0 0 1rem;
}
.project-detail-body h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  letter-spacing: .08em;
  margin: 0 0 1.5rem;
  line-height: 1.4;
}
.project-lead {
  font-size: .96rem;
  line-height: 2.1;
  color: var(--fg);
  margin: 0 0 2.5rem;
}
.project-points {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.75rem;
}
.project-point {
  border-top: 1px solid var(--line);
  padding-top: 1.25rem;
}
.project-point dt {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: .04em;
  margin-bottom: .5rem;
  color: var(--fg);
}
.project-point dd {
  margin: 0;
  font-size: .9rem;
  line-height: 1.95;
  color: var(--fg-soft);
}
.project-link {
  display: inline-block;
  margin-top: 2.5rem;
  font-size: .72rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--fg);
  padding-bottom: 3px;
  color: var(--fg);
}

@media (max-width: 880px) {
  .project-detail {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding-bottom: 4rem;
    margin-bottom: 4rem;
  }
  .project-detail-cover {
    position: static;
  }
  .project-detail-cover img {
    aspect-ratio: 4 / 3;
  }
  .project-detail-body--full {
    max-width: none;
  }
}

/* ---------- Bilingual support (Projects) ---------- */
.project-title-en {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: .62em;
  letter-spacing: .14em;
  color: var(--fg-mute);
  margin-top: .4em;
  font-weight: 400;
  text-transform: none;
}
.project-lead.en,
.project-point dd.en {
  margin-top: .5em;
  font-family: var(--serif);
  font-style: italic;
  font-size: .88em;
  color: var(--fg-soft);
  line-height: 1.85;
  letter-spacing: 0;
}
.project-point dt .dt-en {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: .82em;
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--fg-mute);
  margin-top: .25em;
}

/* ---------- Projects CTA ---------- */
.project-cta {
  margin-top: 6rem;
  padding: 3.5rem 0 1rem;
  border-top: 1px solid var(--line);
  text-align: center;
}
.project-cta p {
  margin: 0 0 .5rem;
  font-size: .92rem;
  color: var(--fg-soft);
}
.project-cta .project-cta-en {
  font-family: var(--serif);
  font-style: italic;
  font-size: .98rem;
  color: var(--fg);
  letter-spacing: .04em;
  margin-bottom: .5rem;
}
.project-cta-link {
  display: inline-block;
  margin-top: 1.5rem;
  font-size: .72rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--fg);
  padding-bottom: 3px;
}

/* ---------- CV sublist (for nested items like satellite/tour shows) ---------- */
.cv-sublist {
  list-style: none;
  margin: .5rem 0 0;
  padding: 0;
}
.cv-sublist li {
  position: relative;
  padding-left: 1rem;
  font-size: .82rem;
  line-height: 1.7;
  color: var(--fg-mute);
  margin-bottom: .25rem;
}
.cv-sublist li::before {
  content: "·";
  position: absolute;
  left: .25rem;
  top: 0;
}

/* ---------- Services ---------- */
.services {
  margin-top: 6rem;
  padding-top: 5rem;
  border-top: 1px solid var(--line);
}
.services-head {
  max-width: 720px;
  margin: 0 auto 4rem;
  text-align: left;
}
.services-eyebrow {
  margin: 0 0 1rem;
  font-size: .72rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.services-head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  letter-spacing: .08em;
  line-height: 1.4;
  margin: 0 0 1.5rem;
}
.services-title-en {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: .58em;
  letter-spacing: .14em;
  color: var(--fg-mute);
  margin-top: .35em;
  font-weight: 400;
}
.services-note {
  font-size: .9rem;
  line-height: 2;
  margin: 0 0 .5em;
  color: var(--fg-soft);
}
.services-note.en {
  font-family: var(--serif);
  font-style: italic;
  font-size: .82rem;
  color: var(--fg-mute);
  margin: 0;
}

.service-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 860px;
  margin: 0 auto;
}
.service-item {
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: 2rem;
  padding: 2.5rem 0;
  border-top: 1px solid var(--line);
}
.service-item:last-child { border-bottom: 1px solid var(--line); }
.service-num {
  font-family: var(--serif);
  font-size: 1.2rem;
  letter-spacing: .12em;
  color: var(--fg-mute);
  padding-top: .15em;
}
.service-body h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.25rem;
  letter-spacing: .06em;
  margin: 0 0 .85rem;
  line-height: 1.4;
}
.service-en {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: .72em;
  letter-spacing: .12em;
  color: var(--fg-mute);
  margin-top: .25em;
  font-weight: 400;
}
.service-desc {
  font-size: .92rem;
  line-height: 1.95;
  color: var(--fg);
  margin: 0 0 .35em;
}
.service-desc.en {
  font-family: var(--serif);
  font-style: italic;
  font-size: .85rem;
  color: var(--fg-soft);
  margin-bottom: 1.5rem;
  line-height: 1.85;
}
.service-price {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: .92rem;
  margin: 0 0 .25em;
  color: var(--fg);
}
.service-price > span:first-child {
  font-weight: 500;
  letter-spacing: .04em;
}
.service-price-sub {
  font-size: .8rem;
  color: var(--fg-mute);
}
.service-price.en {
  font-family: var(--serif);
  font-style: italic;
  font-size: .85rem;
  color: var(--fg-soft);
  margin-bottom: 0;
}
.service-price.en > span:first-child { font-weight: 400; }

@media (max-width: 880px) {
  .service-item {
    grid-template-columns: 2.5rem 1fr;
    gap: 1.25rem;
    padding: 2rem 0;
  }
  .service-num { font-size: 1rem; }
}

/* ---------- Service includes (sub-listing of merged services) ---------- */
.service-includes {
  margin: 0 0 .35em;
  padding: 0;
  background: transparent;
  border: 0;
  font-size: .88rem;
  line-height: 1.95;
  color: var(--fg-soft);
}
.service-includes.en {
  font-family: var(--serif);
  font-style: italic;
  font-size: .82rem;
  color: var(--fg-mute);
  margin-bottom: 1.5rem;
  line-height: 1.85;
}
.service-includes-label {
  display: inline-block;
  margin-right: .65rem;
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--fg-mute);
  font-style: normal;
}

/* 2026 edition — a quiet archive of material, people and places. */
:root{--bg:#f4f3ef;--fg:#282b26;--fg-soft:#565a52;--fg-mute:#686d63;--line:#d5d7ce;--serif:'Noto Serif JP',YuMincho,'Yu Mincho',serif;--sans:'Inter','Noto Sans JP',sans-serif}
html{scroll-behavior:auto;scroll-padding-top:105px}body{font-weight:400;font-size:14px}a:hover{opacity:.72}a:focus-visible,button:focus-visible{outline:2px solid #526045;outline-offset:6px}button{font:inherit}.header{background:rgba(244,243,239,.96);border-bottom:0}.header-inner{max-width:none;padding:24px 4vw}.site-title{display:flex;align-items:baseline;gap:18px;font-size:19px;letter-spacing:.14em}.brand-en{font:10px var(--sans);letter-spacing:.035em}.header-nav ul{gap:26px}.header-nav li a{font-size:11px;letter-spacing:.04em;text-transform:none}.skip-link{position:fixed;left:20px;top:-100px;z-index:1000;background:var(--fg);color:white;padding:10px 20px}.skip-link:focus{top:12px}.landing{padding:66px 8vw 0}.landing-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:40px}.landing h1{font:400 clamp(32px,4vw,56px)/1.45 var(--serif);letter-spacing:.16em;margin:0}.landing h1 span{display:block;font:12px/1.5 var(--sans);letter-spacing:.08em;margin-top:12px}.landing-heading>p{font:14px/2.1 var(--serif);letter-spacing:.08em;margin:0 0 2px}.landing-image{margin:0}.landing-image>img{width:100%;height:min(58vw,590px);object-fit:cover;object-position:center 58%;filter:none}.landing-image figcaption{display:flex;justify-content:space-between;gap:20px;font-size:10px;letter-spacing:.04em;margin-top:15px;color:var(--fg-soft)}.eyebrow{font:10px/1.5 var(--sans);letter-spacing:.09em;color:var(--fg-soft);margin:0 0 20px}.home-statement,.home-projects,.home-reading{display:grid;grid-template-columns:1fr 2fr;gap:8vw;padding:130px 8vw;border-bottom:1px solid var(--line);margin:0 4vw}.home-statement{padding-left:4vw;padding-right:4vw}.home-statement h2,.home-projects h2,.section-heading h2{font:400 clamp(21px,2.2vw,30px)/1.9 var(--serif);letter-spacing:.06em;margin:0 0 35px}.home-statement>div{max-width:670px}.home-statement p:not(.eyebrow){line-height:2.3;letter-spacing:.035em;margin-bottom:30px}.text-link{display:flex;justify-content:space-between;align-items:baseline;gap:20px;border-bottom:1px solid var(--line);padding:15px 0;font-size:12px}.text-link span{font-size:11px}.home-statement .text-link{max-width:270px}.home-selected{padding:110px 8vw 120px;scroll-margin-top:75px}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:50px}.section-heading h2{margin:0}.section-heading .text-link{min-width:150px}.selected-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:90px 7vw;align-items:start}.selected-item:nth-child(even){margin-top:120px}.selected-image{overflow:hidden}.selected-image img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .7s}.selected-item:nth-child(2) img,.selected-item:nth-child(3) img{aspect-ratio:5/6}.selected-item a:hover img{transform:scale(1.015)}.selected-meta{display:flex;justify-content:space-between;gap:16px;padding-top:16px;align-items:baseline}.selected-meta h3{font:400 14px/1.8 var(--serif);margin:0}.selected-meta span{font-size:10px;white-space:nowrap;color:var(--fg-soft)}.home-projects{background:#e9ebe3;margin:0;padding:100px 8vw;gap:8vw;border:0}.project-row{display:grid;grid-template-columns:30px 1fr 20px;align-items:baseline;gap:18px;border-top:1px solid #c4cabc;padding:23px 0}.project-row>span{font-size:10px}.project-row h3{font:400 20px/1.7 var(--serif);margin:0}.project-row small{display:block;font:11px/1.8 var(--sans);color:var(--fg-soft);margin-top:5px}.home-reading{padding:90px 4vw;border:0}.home-reading .text-link{padding:21px 0}.footer{padding:40px 4vw}.footer-inner{max-width:none;flex-wrap:wrap;gap:30px}.footer-name{font:16px var(--serif)}.footer-name span{display:block;font:10px var(--sans);margin-top:8px}.footer nav{display:flex;gap:25px;font-size:11px}.footer p{font-size:9px;color:var(--fg-soft);margin:0}.container{max-width:1360px}.contents{padding:80px 6vw 100px}.page-head h1{font-family:var(--sans);font-size:clamp(26px,4vw,42px);letter-spacing:-.035em;font-weight:300}.page-head .page-sub{letter-spacing:.04em;text-transform:none}.album-years{gap:30px;flex-wrap:wrap}.album-years a{font:12px var(--sans)}.album-year-title{font:400 14px var(--sans);letter-spacing:.03em}.album-grid{gap:55px 35px}.album-thumb{aspect-ratio:4/3;background:#e9ebe3}.album-thumb img{object-fit:contain;filter:none}.album-item a:hover .album-thumb img{filter:none;transform:scale(1.015)}.album-meta h3{font-size:14px}.album-count{color:var(--fg-soft)}.photo-item{margin:0}.photo-item img{filter:none}.photo-grid{gap:18px}.session-concept{max-width:730px;font-size:14px;line-height:2.2;margin:0 0 60px}.session-head h1{font-family:var(--serif);font-size:clamp(21px,3vw,34px);letter-spacing:.05em}.session-back{white-space:nowrap}.next-work{display:flex;justify-content:space-between;gap:30px;margin:0 6vw 80px;padding-top:25px;border-top:1px solid var(--line);font-size:12px}.project-detail{scroll-margin-top:110px}.project-detail-cover img{filter:none;object-fit:contain;aspect-ratio:auto}.statement-page .statement-text{line-height:2.25}.text-page h2{font-size:20px;margin-top:55px}.text-page h3{font-size:16px;margin-top:30px}.lb-caption{max-width:80vw;text-align:center;color:#fff;font-size:12px}.lb-close,.lb-prev,.lb-next{min-width:48px;min-height:48px}.lb-img{object-fit:contain}.contact-page{padding:50px 0 90px}.contact-mail{font-family:var(--sans);font-size:clamp(15px,2.2vw,22px)}
@media(max-width:1000px){.brand-en{display:none}.header-nav ul{gap:20px}}
@media(max-width:880px){.header-inner{padding:21px 6vw}.site-title{font-size:17px}.brand-en{display:inline;font-size:9px}.navbutton{display:block;min-width:50px;min-height:40px;font-size:11px;letter-spacing:.06em;color:var(--fg)}.navbutton::after{display:none}.header-nav-wrap{background:var(--bg)}.header-nav li a{font-size:22px;letter-spacing:.02em}.header-nav ul{gap:25px}.landing{padding:36px 6vw 0}.landing-heading{margin-bottom:28px}.landing h1{font-size:34px}.landing-heading>p{font-size:12px}.landing-image>img{height:58vw;min-height:280px}.home-statement,.home-projects,.home-reading{grid-template-columns:1fr;gap:25px;padding:75px 6vw;margin:0}.home-statement{margin:0 6vw;padding-left:0;padding-right:0}.home-statement>div{max-width:none}.home-selected{padding:75px 6vw}.selected-grid{gap:50px 6vw}.selected-item:nth-child(even){margin-top:70px}.selected-meta{display:block}.selected-meta span{display:block;margin-top:5px}.section-heading{margin-bottom:30px}.footer-inner{align-items:flex-start;text-align:left}.footer nav{flex-wrap:wrap;gap:18px}.contents{padding:45px 6vw 70px}.album-grid{gap:35px 20px}.page-head{gap:12px}.photo-grid{gap:10px}.next-work{margin-bottom:50px}.project-detail{gap:25px}.contact-page{padding:30px 0 60px}}
@media(max-width:520px){.brand-en{font-size:8px}.landing-heading{align-items:start;gap:12px}.landing h1{font-size:29px}.landing h1 span{font-size:10px}.landing-heading>p{font-size:10px;margin-top:8px}.landing-image>img{height:86vw;object-position:56% center}.landing-image figcaption{font-size:9px}.home-statement h2,.home-projects h2,.section-heading h2{font-size:22px}.home-statement p:not(.eyebrow){font-size:13px}.section-heading{display:block}.section-heading .text-link{width:150px;margin-top:12px}.selected-grid{grid-template-columns:1fr;gap:38px}.selected-item:nth-child(even){margin-top:0}.selected-item:nth-child(2) img,.selected-item:nth-child(3) img{aspect-ratio:4/3}.selected-meta{display:flex}.album-grid{grid-template-columns:1fr}.photo-grid{grid-template-columns:1fr 1fr}.session-head{display:block}.session-back{display:inline-block;margin-top:20px}.session-concept{margin-bottom:35px}.next-work{flex-direction:column;gap:15px}.footer{padding:35px 6vw}.footer-inner{gap:24px}.home-reading .text-link{font-size:12px}.home-reading .text-link span{font-size:10px}.lb-prev{left:0}.lb-next{right:0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media print{.header,.footer,.navbutton,.next-work{display:none}body{background:white}.contents{padding:0}.cv-section{break-inside:avoid}}
.lightbox{background:#171815}.lightbox[aria-hidden="true"]{visibility:hidden}.lightbox[aria-hidden="false"]{visibility:visible}
@media(max-width:520px){.home-statement h2{font-size:20px;letter-spacing:.02em}.photo-item a{display:block}}

/* Simplified preview: photographs and a small index. */
:root{--bg:#fff;--fg:#262626;--fg-soft:#626262;--fg-mute:#6c6c6c;--line:#e6e6e6}
.header{position:relative;background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}.header-inner{max-width:1280px;padding:36px 5vw}.site-title{font:400 16px/1.5 var(--sans);letter-spacing:.04em;gap:16px}.brand-en{font-size:10px;letter-spacing:0}.header-nav ul{gap:26px}.header-nav li a{font-size:12px;letter-spacing:0}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.simple-home{width:100%;max-width:1280px;padding:34px 5vw 80px;margin:0 auto}.simple-home .selected-grid{grid-template-columns:1fr 1fr;gap:55px 42px}.simple-home .selected-item:nth-child(even){margin-top:0}.simple-home .selected-image img{width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;transform:none;background:transparent}.simple-home .selected-item a:hover img{transform:none}.selected-meta h3{font:400 12px/1.7 var(--sans);letter-spacing:0}.selected-meta{padding-top:12px}.selected-meta span{font-size:10px}.all-works{text-align:center;margin:65px 0 0;font-size:12px}.all-works a{padding-bottom:5px;border-bottom:1px solid #999}.footer{border-top:0;padding:25px 5vw 35px}.footer-inner{max-width:1152px}.footer nav{font-size:10px;gap:24px}.footer p{font-size:9px}.page-head{border:0;margin-bottom:35px;padding:0}.page-head h1{font-size:28px;letter-spacing:0}.page-head .page-sub{font-size:10px}.contents{padding-top:40px}.album-years{border:0;margin-bottom:35px}.album-thumb{background:transparent}.album-meta h3{font-family:var(--sans);font-size:12px}.album-meta{padding-top:10px}.album-year-title{font-size:12px}.project-detail-body h2{font-size:24px}.project-role{font-size:10px;letter-spacing:.05em}.project-title-en{letter-spacing:0}.project-detail{border-bottom:0}.cv-name{font-size:26px}.next-work{font-size:11px}.home a:hover{opacity:.8}
@media(max-width:880px){.header-inner{padding:26px 6vw}.simple-home{padding:15px 6vw 55px}.simple-home .selected-grid{gap:35px 24px}.footer{padding:20px 6vw 30px}.footer-inner{flex-direction:row;align-items:baseline}.contents{padding-top:25px}.header-nav li a{font-size:21px}.brand-en{font-size:9px}.site-title{font-size:15px}}
@media(max-width:520px){.simple-home .selected-grid{grid-template-columns:1fr;gap:36px}.simple-home .selected-image img{aspect-ratio:auto}.selected-meta{display:flex}.selected-meta span{margin-top:0}.all-works{margin-top:45px}.footer-inner{flex-direction:column;gap:20px}.footer nav{gap:21px}.brand-en{font-size:8px}.site-title{gap:12px}}

/* Reference remake: quiet, serif archive. */
:root{--sans:"Times New Roman", serif, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "ＭＳ 明朝", sans-serif;--serif:"Times New Roman", serif, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "ＭＳ 明朝", sans-serif}body{font-family:var(--serif)}.site-title{font-size:13px;letter-spacing:2px}.brand-en{font-size:12px;color:#666;letter-spacing:0}.header-nav li a{font-size:12px}.page-head h1,.cv-name,.session-head h1{font-size:20px;font-weight:400}.album-meta h3{font-size:13px}.header-inner{padding-top:40px;padding-bottom:30px}a:hover{text-decoration:underline}.album-item a:hover .album-thumb img{transform:none}

/* A single quiet return link replaces the global menu. */
.back-header{width:100%;max-width:1360px;margin:0 auto;padding:38px 6vw 0}.back-header nav{font-size:12px;line-height:1.5}.back-header a{display:inline-flex;align-items:center;min-height:36px;color:#666;text-decoration:none;letter-spacing:0}.back-header a:hover{color:#000;text-decoration:underline;text-underline-offset:4px}.back-header a:focus-visible{outline:1px solid currentColor;outline-offset:4px}@media(max-width:520px){.back-header{padding-top:22px}.back-header a{min-height:44px}}@media print{.back-header{display:none}}