:root {
  --paper: #ffffff;
  --ink: #690035;
  --ink-soft: rgba(105, 0, 53, 0.58);
  --line: rgba(105, 0, 53, 0.22);
  --quiet: #f2eef0;
  --sidebar-width: 28.5vw;
  --text-column-width: 22.5vw;
  --image-column-width: 49vw;
  --edge-x: clamp(26px, 2.35vw, 46px);
  --edge-y: clamp(24px, 3.1vh, 38px);
  --menu-size: clamp(31px, 2.75vw, 53px);
  --body-size: clamp(17px, 1.42vw, 27px);
  --small-size: clamp(14px, 1.08vw, 21px);
  --transition: 260ms cubic-bezier(.2, .7, .2, 1);
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "EB Garamond", Garamond, "Times New Roman", serif;
  font-synthesis: none;
}

body {
  overflow: hidden;
}

button,
input,
textarea {
  font: inherit;
  color: inherit;
}

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

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

button {
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.site-shell {
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  background: var(--paper);
}

.sidebar {
  position: relative;
  z-index: 10;
  height: 100dvh;
  padding: var(--edge-y) var(--edge-x);
  background: var(--paper);
}

.primary-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(25px, 3.8vh, 46px);
}

.nav-group {
  position: relative;
  min-height: 1em;
  font-size: var(--menu-size);
  line-height: .88;
  white-space: nowrap;
}

.nav-primary {
  display: inline-block;
  font-weight: 400;
  transition: transform var(--transition), opacity var(--transition);
}

.nav-primary:hover,
.nav-primary:focus-visible {
  transform: translateX(10px);
}

.nav-group.is-active > .nav-primary {
  transform: translateX(clamp(18px, 3.5vw, 66px));
}

.submenu {
  position: absolute;
  top: .06em;
  left: calc(100% + clamp(26px, 3vw, 58px));
  display: flex;
  flex-direction: column;
  gap: .15em;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-9px);
  transition: opacity var(--transition), transform var(--transition), visibility 0s linear 260ms;
  font-size: .53em;
  line-height: 1.08;
}

.nav-group.is-active .submenu {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: none;
  transition-delay: 0s;
}

.submenu a {
  width: max-content;
  transition: transform var(--transition), opacity var(--transition);
}

.submenu a:hover,
.submenu a:focus-visible,
.submenu a[aria-current="page"] {
  transform: translateX(13px);
}

.submenu-years {
  top: 1.44em;
  left: calc(100% - clamp(5px, .4vw, 8px));
  font-size: .46em;
  gap: .12em;
}

.language-toggle {
  margin-top: clamp(-6px, -0.8vh, -2px);
  font-size: clamp(18px, 1.55vw, 30px);
  line-height: 1;
  transition: transform var(--transition);
}

.language-toggle:hover,
.language-toggle:focus-visible {
  transform: translateX(10px);
}

.sidebar-brand {
  position: absolute;
  left: var(--edge-x);
  bottom: clamp(24px, 2.9vh, 36px);
  font-size: clamp(58px, 6.15vw, 118px);
  line-height: .78;
  letter-spacing: -.038em;
  white-space: nowrap;
  transform-origin: left bottom;
  transition: opacity var(--transition), transform var(--transition), visibility 0s linear 0s;
}

.site-shell[data-section="projects"] .sidebar-brand,
.site-shell[data-section="guidelines"] .sidebar-brand {
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition-delay: 0s, 0s, 260ms;
}

.page {
  position: relative;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  outline: none;
}

.page-grid {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: var(--text-column-width) var(--image-column-width);
}

.column {
  min-width: 0;
  height: 100dvh;
}

.scroll-region {
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.scroll-region::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.text-column {
  padding: var(--edge-y) clamp(22px, 2.05vw, 39px) 7vh clamp(18px, 1.6vw, 31px);
  font-size: var(--body-size);
  line-height: 1.02;
  text-wrap: pretty;
}

.text-column h1,
.text-column h2,
.text-column p {
  margin-top: 0;
}

.text-column h1,
.text-column h2 {
  font-size: inherit;
  line-height: .98;
  font-weight: 600;
}

.text-column h1 {
  margin-bottom: 1.55em;
}

.text-column p {
  margin-bottom: 1.28em;
}

.image-column {
  background: var(--paper);
}

.full-image,
.gallery-image,
.project-card img,
.biography-image {
  display: block;
  width: 100%;
  height: auto;
}

.home-page {
  position: relative;
  width: 100%;
  height: 100%;
}

.home-name-en {
  display: none;
}

.home-name-jp {
  position: absolute;
  right: var(--edge-x);
  bottom: clamp(22px, 2.7vh, 34px);
  font-family: var(--font-family-japanese, "Shippori Mincho", "Yu Mincho", serif);
  font-size: clamp(45px, 4.4vw, 84px);
  line-height: .9;
  letter-spacing: .12em;
}

.biography-page .content-spacer {
  min-width: 0;
}

.biography-content {
  height: 100dvh;
  padding-bottom: 7vh;
}

.biography-image {
  aspect-ratio: 1.505 / 1;
  object-fit: cover;
  object-position: 50% 45%;
}

.biography-copy {
  padding: clamp(8px, .85vh, 12px) clamp(26px, 2.4vw, 46px) 5vh 0;
  font-size: var(--body-size);
  line-height: 1.01;
  text-wrap: pretty;
}

.biography-copy p {
  margin: 0;
}

.ikebana-gallery,
.project-gallery {
  min-height: 100dvh;
}

.gallery-image {
  width: 100%;
  min-height: 100dvh;
  object-fit: cover;
}

.gallery-image.gallery-contain {
  min-height: auto;
  object-fit: contain;
}

.project-list-page .project-list-spacer {
  min-width: 0;
}

.project-list {
  height: 100dvh;
  padding-bottom: 12vh;
}

.project-card {
  display: block;
  margin: 0 0 clamp(25px, 4vh, 50px);
}

.project-card img {
  aspect-ratio: 1.38 / 1;
  object-fit: cover;
}

.project-card-title {
  display: block;
  padding-top: .18em;
  font-size: clamp(21px, 1.75vw, 34px);
  line-height: 1;
}

.project-card:hover .project-card-title,
.project-card:focus-visible .project-card-title {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .12em;
}

.project-detail .text-column {
  padding-right: clamp(22px, 2vw, 38px);
}

.project-meta {
  margin-bottom: 1.6em;
}

.project-meta strong {
  display: block;
  font-weight: 600;
}

.project-gallery .gallery-image {
  min-height: 100dvh;
}

.project-gallery .gallery-image + .gallery-image {
  margin-top: 7px;
}

.gallery-last-media {
  position: relative;
}

.gallery-back-to-top {
  position: absolute;
  right: clamp(18px, 2.1vw, 40px);
  bottom: clamp(18px, 2.5vh, 32px);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  padding: 0 0 2px;
  border-bottom: 1px solid rgba(255, 255, 255, .94);
  background: transparent;
  color: #fff;
  font-size: clamp(14px, .8vw, 16px);
  font-weight: 400;
  line-height: 1;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .52), 0 0 16px rgba(0, 0, 0, .28);
  transform: translateY(8px);
  transition: opacity 360ms ease, transform 360ms cubic-bezier(.22, 1, .36, 1), visibility 0s linear 360ms;
}

.gallery-image[data-deferred-src] {
  visibility: hidden;
}

.gallery-last-media .gallery-back-to-top:hover,
.gallery-last-media .gallery-back-to-top:focus-visible {
  text-shadow: 0 1px 10px rgba(0, 0, 0, .66), 0 0 18px rgba(0, 0, 0, .36);
}

.is-back-to-top-visible .gallery-back-to-top {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition-delay: 0s;
}

.gallery-back-to-top:hover,
.gallery-back-to-top:focus-visible {
  opacity: .72;
}

.archive-placeholder {
  display: grid;
  place-items: center;
  min-height: 68vh;
  margin: 0 0 28px;
  background: var(--quiet);
  font-size: clamp(20px, 1.5vw, 29px);
}

.contact-page,
.guidelines-page {
  height: 100dvh;
  overflow-y: auto;
  scrollbar-width: none;
  padding: var(--edge-y) clamp(42px, 6vw, 115px) 9vh clamp(22px, 2.1vw, 40px);
}

.contact-page::-webkit-scrollbar,
.guidelines-page::-webkit-scrollbar {
  display: none;
}

.contact-inner {
  width: min(100%, 1040px);
  font-size: var(--body-size);
  line-height: 1.08;
}

.contact-intro {
  margin: 0 0 1.1em;
  max-width: 980px;
}

.services {
  margin: 0 0 1.8em;
  padding: 0;
  list-style: none;
  /* Typography intentionally inherits from .contact-copy-inner so the
     Contact copy controls apply identically to the intro and services. */
}

.services li::before {
  content: "· ";
}

.contact-form {
  width: min(100%, 760px);
  display: grid;
  gap: clamp(22px, 2.2vh, 28px);
}

.form-field {
  display: grid;
  gap: 5px;
}

.form-field label {
  font-size: var(--small-size);
}

.form-field input,
.form-field textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  padding: .24em 0 .28em;
  background: transparent;
  outline: none;
  font-size: var(--body-size);
}

.form-field textarea {
  min-height: 6.5em;
  resize: vertical;
  border: 1px solid var(--ink);
  padding: .55em .65em;
}

.form-field input:focus,
.form-field textarea:focus {
  box-shadow: 0 2px 0 var(--ink);
}

.form-field textarea:focus {
  box-shadow: inset 0 0 0 1px var(--ink);
}

.form-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.submit-button,
.guidelines-link,
.back-link {
  width: max-content;
  border-bottom: 1px solid currentColor;
  font-size: var(--small-size);
  line-height: 1.2;
  transition: transform var(--transition), opacity var(--transition);
}

.submit-button:hover,
.submit-button:focus-visible,
.guidelines-link:hover,
.guidelines-link:focus-visible,
.back-link:hover,
.back-link:focus-visible {
  transform: translateX(8px);
}

.form-status {
  min-height: 1.2em;
  font-size: var(--small-size);
}

.contact-footer-link {
  margin-top: clamp(52px, 8vh, 92px);
}

.guidelines-page {
  padding-right: clamp(30px, 4vw, 76px);
}

.guidelines-inner {
  width: min(100%, 1120px);
}

.guidelines-header {
  margin-bottom: clamp(55px, 8vh, 100px);
}

.guidelines-title {
  margin: 0 0 .15em;
  font-size: clamp(50px, 6vw, 116px);
  line-height: .82;
  font-weight: 400;
  letter-spacing: -.04em;
}

.guidelines-intro {
  max-width: 680px;
  margin: 0;
  font-size: var(--body-size);
  line-height: 1.05;
}

.guideline-section {
  border-top: 1px solid var(--ink);
  padding: 16px 0 clamp(50px, 7vh, 90px);
  display: grid;
  grid-template-columns: minmax(150px, .65fr) minmax(0, 2fr);
  gap: clamp(24px, 4vw, 70px);
}

.guideline-section h2 {
  margin: 0;
  font-size: var(--body-size);
  line-height: 1;
  font-weight: 500;
}

.guideline-content {
  font-size: var(--small-size);
  line-height: 1.25;
}

.guideline-content p:first-child {
  margin-top: 0;
}

.guideline-content p:last-child {
  margin-bottom: 0;
}

.column-diagram {
  display: grid;
  grid-template-columns: 28.5fr 22.5fr 49fr;
  width: 100%;
  min-height: 190px;
  border: 1px solid var(--ink);
}

.column-diagram > div {
  display: grid;
  place-items: center;
  padding: 12px;
  text-align: center;
  border-right: 1px solid var(--ink);
}

.column-diagram > div:last-child {
  border-right: 0;
}

.palette {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: 12px;
}

.swatch {
  min-height: 145px;
  padding: 12px;
  display: flex;
  align-items: flex-end;
  border: 1px solid var(--ink);
}

.swatch-burgundy {
  background: var(--ink);
  color: white;
}

.swatch-paper {
  background: var(--paper);
}

.swatch-quiet {
  background: var(--quiet);
}

.type-sample-large {
  margin: .2em 0;
  font-size: clamp(52px, 7vw, 132px);
  line-height: .8;
  letter-spacing: -.04em;
}

.type-sample-jp {
  font-family: var(--font-family-japanese, "Shippori Mincho", "Yu Mincho", serif);
  font-size: clamp(38px, 4.8vw, 92px);
  letter-spacing: .08em;
}


.mobile-header {
  display: none;
}

:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 4px;
}

@media (max-width: 980px) {
  :root {
    --edge-x: 20px;
    --edge-y: 20px;
    --body-size: 22px;
    --small-size: 17px;
  }

  body {
    overflow: auto;
  }

  .site-shell {
    display: block;
    height: auto;
    min-height: 100dvh;
    overflow: visible;
    padding-top: 58px;
  }

  .mobile-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 50;
    height: 58px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 14px;
    padding: 0 16px;
    border-bottom: 1px solid var(--line);
    background: rgba(255,255,255,.97);
    backdrop-filter: blur(8px);
  }

  .mobile-menu-toggle,
  .mobile-language,
  .mobile-brand {
    font-size: 17px;
    line-height: 1;
  }

  .mobile-brand {
    font-size: 22px;
  }

  .mobile-language {
    justify-self: end;
  }

  .sidebar {
    position: fixed;
    inset: 58px 0 0 0;
    z-index: 40;
    width: 100%;
    height: calc(100dvh - 58px);
    padding: 28px 20px;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-12px);
    transition: opacity var(--transition), transform var(--transition), visibility 0s linear 260ms;
  }

  .site-shell.menu-open .sidebar {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0s;
  }

  .primary-nav {
    gap: 30px;
  }

  .nav-group {
    font-size: 42px;
  }

  .nav-group.is-active > .nav-primary {
    transform: translateX(20px);
  }

  .submenu {
    left: calc(100% + 24px);
    font-size: .5em;
  }

  .submenu-years {
    top: 1.38em;
    left: calc(100% - 1px);
  }

  .language-toggle,
  .sidebar-brand {
    display: none;
  }

  .page {
    height: auto;
    min-height: calc(100dvh - 58px);
    overflow: visible;
  }

  .page-grid {
    height: auto;
    display: block;
  }

  .column,
  .scroll-region,
  .biography-content,
  .project-list,
  .contact-page,
  .guidelines-page {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .home-page {
    min-height: calc(100dvh - 58px);
  }

  .home-name-en {
    position: absolute;
    display: block;
    left: 20px;
    bottom: 24px;
    font-size: clamp(24px, 7.3vw, 36px);
    line-height: .9;
    letter-spacing: -.025em;
  }

  .home-name-jp {
    right: 20px;
    bottom: 24px;
    font-size: clamp(24px, 7.1vw, 35px);
    letter-spacing: .06em;
  }

  .biography-page .content-spacer,
  .project-list-spacer {
    display: none;
  }

  .biography-copy,
  .text-column,
  .contact-page,
  .guidelines-page {
    padding: 24px 20px 70px;
  }

  .biography-image {
    aspect-ratio: 1 / 1;
  }

  .biography-copy {
    line-height: 1.05;
  }

  .text-column {
    border-bottom: 1px solid var(--line);
  }

  .gallery-image,
  .project-gallery .gallery-image {
    min-height: auto;
  }

  .project-list {
    padding-bottom: 50px;
  }

  .project-card {
    margin-bottom: 32px;
  }

  .project-card-title {
    padding: 7px 20px 0;
    font-size: 25px;
  }

  .contact-inner,
  .guidelines-inner {
    width: 100%;
  }

  .guideline-section {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .column-diagram {
    min-height: 150px;
  }

  .palette {
    grid-template-columns: 1fr;
  }
}

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


/* Revision 03: PDF-matched menu spacing, reliable collapsing, full translation and project templates */

.sidebar {
  overflow: visible;
}

.submenu {
  top: 1.12em;
  left: calc(100% + clamp(72px, 5vw, 96px));
  gap: .24em;
}

.submenu-years {
  top: 1.16em;
  left: calc(100% + clamp(68px, 4.4vw, 86px));
  gap: .24em;
  line-height: 1.12;
}

.language-control {
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
}

.language-toggle {
  transition: none;
}

.language-toggle:hover,
.language-toggle:focus-visible {
  transform: none;
}

.language-option {
  position: relative;
  display: inline-block;
  padding-bottom: .16em;
}

.language-option::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 220ms cubic-bezier(.2, .7, .2, 1);
}

.language-option.is-current::after {
  transform: scaleX(1);
}

.mobile-home-nav,
.mobile-project-first-image {
  display: none;
}

.project-heading-row {
  position: relative;
  min-height: 1px;
}

.project-heading-row .project-meta {
  padding-right: 0;
}

.contact-page {
  padding: 0;
  overflow: hidden;
}

.contact-spacer {
  min-width: 0;
}

.contact-content {
  height: 100dvh;
}

.contact-copy-inner {
  width: 100%;
  padding: var(--edge-y) var(--desktop-reference-edge) 0;
  font-size: var(--body-size);
  line-height: 1.08;
}

.contact-form-inner {
  width: 100%;
  padding: clamp(54px, 6vh, 72px) var(--desktop-reference-edge) 8vh;
}

.contact-form {
  width: 100%;
}

@media (max-width: 980px) {
  .mobile-header {
    padding-left: 20px;
    padding-right: 20px;
  }

  .site-shell[data-section="home"] .mobile-menu-toggle {
    visibility: hidden;
    pointer-events: none;
  }

  .sidebar {
    overflow: auto;
    pointer-events: none;
  }

  .site-shell.menu-open .sidebar {
    pointer-events: auto;
  }

  .primary-nav {
    gap: 34px;
  }

  .nav-group {
    width: 100%;
    min-height: 0;
  }


  .submenu,
  .submenu-years {
    position: static;
    width: max-content;
    margin-top: 26px;
    margin-left: 20px;
    gap: 11px;
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-7px);
    transition: max-height var(--transition), opacity var(--transition), transform var(--transition), visibility 0s linear 260ms;
    font-size: .5em;
    line-height: 1.12;
  }

  .nav-group.is-active .submenu {
    max-height: 220px;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    transition-delay: 0s;
  }

  .submenu a:hover,
  .submenu a:focus-visible,
  .submenu a[aria-current="page"] {
    transform: translateX(10px);
  }

  .home-page {
    position: relative;
  }

  .mobile-home-nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 26px;
    padding: 30px 20px 120px;
    font-size: clamp(42px, 13vw, 62px);
    line-height: .92;
  }

  .mobile-home-nav a {
    transition: transform var(--transition);
  }

  .mobile-home-nav a:hover,
  .mobile-home-nav a:focus-visible {
    transform: translateX(10px);
  }

  .contact-page {
    display: block;
    overflow: visible;
  }

  .contact-spacer {
    display: none;
  }

  .contact-content {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .contact-copy-inner,
  .contact-form-inner {
    width: 100%;
    padding: 24px 20px 0;
  }

  .contact-form-inner {
    padding-top: 54px;
    padding-bottom: 70px;
  }

  /* V1.2.5: give the Contact form a clearer pause after social links and
     make Send a comfortable touch target without turning it into a large CTA. */
  .submit-button {
    min-height: 44px;
    padding: 8px 8px 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .contact-footer-link {
    margin-top: 48px;
  }

  .project-detail .text-column {
    padding: 24px 0 0;
    border-bottom: 0;
  }

  .project-heading-row,
  .project-copy {
    padding-left: 20px;
    padding-right: 20px;
  }

  .project-heading-row {
    margin-bottom: var(--project-title-copy-gap, 10px);
  }

  .project-heading-row .project-meta {
    margin-bottom: 0;
    padding-right: 0;
  }

  .mobile-project-first-image {
    display: block;
    width: 100%;
    margin: 0 0 26px;
  }

  .mobile-project-first-image img {
    display: block;
    width: 100%;
    height: auto;
  }

  .project-copy {
    padding-bottom: 15px;
  }

  .project-gallery .gallery-image:first-child {
    display: none;
  }
}

@media (max-width: 980px) {
  .mobile-menu-toggle {
    justify-self: start;
  }

  .language-toggle {
    display: none;
  }

  .submenu a:hover,
  .submenu a:focus-visible,
  .submenu a[aria-current="page"] {
    transform: none;
  }
}

.language-separator {
  display: inline-block;
  padding: 0 .16em;
}


.project-copy-placeholder {
  opacity: .52;
  font-style: italic;
}

/* Revision 04: persistent home signature, mobile parent menus, project scroll cues, biography rhythm */

/* The home signature is a persistent navigation anchor on all desktop sections. */
.site-shell[data-section="projects"] .sidebar-brand,
.site-shell[data-section="guidelines"] .sidebar-brand {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

/* Contact has no submenu, but remains shifted while its section is active. */
.nav-group[data-nav-group="contact"].is-active > .nav-primary {
  transform: translateX(clamp(18px, 3.5vw, 66px));
}

/* Biography follows the calmer paragraph rhythm used by the Ikebana page. */
.biography-copy {
  padding-top: clamp(18px, 2vh, 26px);
  line-height: 1.08;
}

.biography-copy p {
  margin: 0 0 1.18em;
}

.biography-copy p:last-child {
  margin-bottom: 0;
}

/* Minimal scroll affordance. The cue disappears automatically at the end. */
@media (min-width: 981px) {
  .project-detail .scroll-region {
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 100%);
    mask-image: linear-gradient(to bottom, #000 0, #000 100%);
    transition: -webkit-mask-image 180ms ease, mask-image 180ms ease;
  }

  .project-detail .scroll-region.has-more-scroll {
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 54px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 54px), transparent 100%);
  }
}

.mobile-page-scroll-cue {
  display: none;
}

@media (max-width: 980px) {
  .mobile-home-nav {
    gap: 26px;
  }

  .mobile-home-group {
    width: 100%;
  }

  .mobile-home-primary,
  .mobile-home-contact {
    display: block;
    padding: 0;
    font: inherit;
    line-height: inherit;
    color: inherit;
    text-align: left;
  }

  .mobile-home-primary {
    transition: transform var(--transition);
  }

  .mobile-home-group.is-active > .mobile-home-primary {
    transform: translateX(20px);
  }

  .mobile-home-submenu {
    display: flex;
    flex-direction: column;
    width: max-content;
    max-height: 0;
    margin: 0 0 0 20px;
    gap: 10px;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-6px);
    font-size: .5em;
    line-height: 1.08;
    transition: max-height var(--transition), margin-top var(--transition), opacity var(--transition), transform var(--transition), visibility 0s linear 260ms;
  }

  .mobile-home-group.is-active .mobile-home-submenu {
    max-height: 220px;
    margin-top: 22px;
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0s;
  }

  .mobile-home-submenu a {
    display: block;
  }

  .biography-copy {
    padding-top: 22px;
    line-height: 1.1;
  }

  .biography-copy p {
    margin-bottom: 1.14em;
  }

  .mobile-page-scroll-cue {
    position: fixed;
    z-index: 35;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    height: 38px;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.96));
    transition: opacity 180ms ease;
  }

  .mobile-page-scroll-cue.is-visible {
    opacity: 1;
  }
}

/* Revision 05: fixed-column containment, submenu alignment, directional scroll cues, clean mobile menu reset */

/* Everything in the fixed navigation must remain inside column one. */
.sidebar {
  overflow: hidden;
}

.sidebar-brand {
  right: var(--edge-x);
  max-width: calc(100% - (2 * var(--edge-x)));
  font-size: clamp(38px, 4vw, 76px);
  letter-spacing: -.038em;
  overflow: hidden;
  text-overflow: clip;
}

/* Menu and submenu use one consistent horizontal gap. The first submenu line
   aligns with the lower edge of the parent label, as defined by the approved examples. */
.submenu {
  top: .31em;
  left: calc(100% + clamp(34px, 3vw, 58px));
}

.submenu-years {
  top: .36em;
  left: calc(100% + clamp(34px, 3vw, 58px));
}

/* Scroll cues are overlays, not masks, so photographic content remains intact. */
@media (min-width: 981px) {
  .project-detail .scroll-region {
    -webkit-mask-image: none;
    mask-image: none;
    transition: none;
  }

  .project-detail .scroll-region.has-more-scroll {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .scroll-cue-shell {
    position: relative;
    min-width: 0;
    height: 100dvh;
    overflow: hidden;
  }

  .scroll-cue-shell .scroll-region {
    width: 100%;
    height: 100%;
  }

  .scroll-edge-cue {
    position: absolute;
    z-index: 8;
    left: 0;
    right: 0;
    height: 78px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 220ms ease;
  }

  .scroll-edge-cue-top {
    top: 0;
  }

  .scroll-edge-cue-bottom {
    bottom: 0;
  }

  .text-scroll-shell .scroll-edge-cue-top {
    background: linear-gradient(to bottom, rgba(255,255,255,.98), rgba(255,255,255,0));
  }

  .text-scroll-shell .scroll-edge-cue-bottom {
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.98));
  }

  .visual-scroll-shell .scroll-edge-cue-top {
    background: linear-gradient(to bottom, rgba(0,0,0,.46), rgba(0,0,0,0));
  }

  .visual-scroll-shell .scroll-edge-cue-bottom {
    background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.46));
  }

  .scroll-cue-shell.show-scroll-down .scroll-edge-cue-bottom,
  .scroll-cue-shell.show-scroll-up .scroll-edge-cue-top {
    opacity: 1;
  }
}

@media (max-width: 980px) {
  .sidebar {
    overflow-y: auto;
    overflow-x: hidden;
  }

  .sidebar-brand {
    right: auto;
    max-width: none;
  }

  .submenu,
  .submenu-years {
    top: auto;
  }

  .scroll-cue-shell {
    display: contents;
  }

  .scroll-edge-cue {
    display: none;
  }

  .mobile-page-scroll-cue {
    height: 38px;
  }

  .mobile-page-scroll-cue-top {
    top: 0;
    bottom: auto;
    background: linear-gradient(to bottom, rgba(255,255,255,.96), rgba(255,255,255,0));
  }

  .mobile-page-scroll-cue-bottom {
    top: auto;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.96));
  }
}

/* Revision 06: robust parent/submenu gap and balanced home-name scale */
@media (min-width: 981px) {
  :root {
    --desktop-nav-active-shift: clamp(18px, 3.5vw, 66px);
    --desktop-submenu-gap: clamp(38px, 2.35vw, 48px);
  }

  .nav-group.is-active > .nav-primary {
    transform: translateX(var(--desktop-nav-active-shift));
  }

  /* Position submenus from the visually shifted parent edge, not from the
     parent's original unshifted box. This guarantees the same clean gap for
     About, Projects and their Japanese equivalents. */
  .submenu,
  .submenu-years {
    top: auto;
    bottom: 0;
    left: calc(100% + var(--desktop-nav-active-shift) + var(--desktop-submenu-gap));
  }

  .submenu {
    gap: .22em;
  }

  .submenu-years {
    gap: .22em;
    line-height: 1.12;
  }

  /* Keep the fixed Home link comfortably inside column one while restoring
     more of the intended visual presence. */
  .sidebar-brand {
    right: var(--edge-x);
    max-width: calc(100% - (2 * var(--edge-x)));
    font-size: clamp(44px, 4.35vw, 84px);
  }

  /* Balance the Japanese home signature optically with the English one. */
  .home-name-jp {
    font-size: clamp(38px, 3.45vw, 66px);
    line-height: .92;
  }
}

/* Revision 07: exact first-line submenu alignment */
@media (min-width: 981px) {
  /* Align the lower edge of the first submenu line with the lower edge of the
     parent label. These offsets compensate for the different line-height and
     font-size of parent and submenu while preserving the approved horizontal gap. */
  .submenu {
    top: .31em;
    bottom: auto;
  }

  .submenu-years {
    top: .365em;
    bottom: auto;
  }
}

/* Revision 08: user-validated desktop submenu vertical offsets */
@media (min-width: 981px) {
  .submenu {
    top: 0.22em;
    bottom: auto;
  }

  .submenu-years {
    top: 0.9em;
    bottom: auto;
  }
}

/* Revision 09: universal content template, new portrait, shared scroll cues */

/* Biography now follows the same desktop structure as project detail pages:
   copy in column two, imagery in column three, each independently scrollable. */
@media (min-width: 981px) {
  .universal-content-page .text-column,
  .universal-content-page .image-column {
    height: 100dvh;
  }

  .biography-copy {
    padding: var(--edge-y) clamp(22px, 2.05vw, 39px) 7vh clamp(18px, 1.6vw, 31px);
    font-size: var(--body-size);
    line-height: 1.08;
  }

  .biography-copy p {
    margin: 0 0 1.18em;
  }

  .biography-copy p:last-child {
    margin-bottom: 0;
  }

  .biography-gallery {
    height: 100dvh;
    background: var(--paper);
  }

  .biography-image {
    width: 100%;
    height: 100%;
    min-height: 100dvh;
    object-fit: cover;
    object-position: 50% 50%;
  }

  .mobile-biography-first-image {
    display: none;
  }

  /* Slightly clearer white separation between consecutive gallery images. */
  .project-gallery .gallery-image + .gallery-image,
  .ikebana-gallery .gallery-image + .gallery-image {
    margin-top: 10px;
  }
}

@media (max-width: 980px) {
  /* Preserve the approved mobile reading order: first portrait, then biography copy. */
  .biography-page .visual-scroll-shell {
    display: none;
  }

  .mobile-biography-first-image {
    display: block;
    width: calc(100% + 40px);
    margin: -24px -20px 26px;
  }

  .mobile-biography-first-image img {
    display: block;
    width: 100%;
    height: auto;
  }

  .biography-copy {
    padding-top: 24px;
  }

  .ikebana-gallery .gallery-image + .gallery-image,
  .project-gallery .gallery-image + .gallery-image {
    margin-top: 8px;
  }
}

/* Revision 11: full-screen sliding mobile navigation overlay */
@media (max-width: 980px) {
  /* The interior Menu now reuses the same visual rhythm as the mobile home
     navigation instead of behaving like a stretched desktop sidebar. */
  .sidebar {
    inset: 58px 0 0 0;
    width: 100%;
    height: calc(100dvh - 58px);
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    visibility: hidden;
    opacity: 1;
    pointer-events: none;
    transform: translateX(-100%);
    transition: transform 280ms cubic-bezier(.2, .7, .2, 1), visibility 0s linear 280ms;
    will-change: transform;
    background: var(--paper);
  }

  .site-shell.menu-open .sidebar {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
    transition: transform 280ms cubic-bezier(.2, .7, .2, 1), visibility 0s;
  }

  .primary-nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 26px;
    padding: 30px 20px 120px;
  }

  .nav-group {
    width: 100%;
    min-height: 0;
    font-size: clamp(42px, 13vw, 62px);
    line-height: .92;
  }

  .nav-primary {
    display: block;
    width: max-content;
    line-height: inherit;
  }

  .nav-group.is-active > .nav-primary {
    transform: translateX(20px);
  }

  .submenu,
  .submenu-years {
    position: static;
    display: flex;
    flex-direction: column;
    width: max-content;
    max-height: 0;
    margin: 0 0 0 20px;
    gap: 10px;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    font-size: .5em;
    line-height: 1.08;
    transition: max-height var(--transition), margin-top var(--transition), opacity var(--transition), transform var(--transition), visibility 0s linear 260ms;
  }

  .nav-group.is-active .submenu {
    max-height: 240px;
    margin-top: 22px;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    transition-delay: 0s;
  }

  .submenu a:hover,
  .submenu a:focus-visible,
  .submenu a[aria-current="page"] {
    transform: translateX(10px);
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 980px) {
  .sidebar,
  .site-shell.menu-open .sidebar {
    transition: none;
  }
}

/* V1.1: data-driven typography, universal media, project archive, contact validation */
:root {
  --text-fade-color: rgba(255,255,255,.8);
  --image-fade-color: rgba(255,255,255,.8);
  --font-family-english: "EB Garamond", Garamond, "Times New Roman", serif;
  --font-family-japanese: "Shippori Mincho", "Yu Mincho", serif;
  --font-family-main: var(--font-family-english);
  --font-family-utility: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --type-body-desktop: clamp(17px,1.42vw,27px);
  --type-small-desktop: clamp(14px,1.08vw,21px);
  --type-navigation-desktop: var(--menu-size);
  --type-submenu-desktop: clamp(15px,1.46vw,28px);
  --type-contentHeading-desktop: var(--body-size);
  --type-projectTitle-desktop: clamp(22px,1.93vw,38px);
  --type-projectCategory-desktop: clamp(16px,1.18vw,23px);
  --type-projectInfo-desktop: clamp(16px,1.18vw,23px);
  --type-projectArchiveTitle-desktop: clamp(21px,1.75vw,34px);
  --type-homeNameEnglish-desktop: clamp(44px,4.35vw,84px);
  --type-homeNameJapanese-desktop: clamp(38px,3.45vw,66px);
  --type-contactButton-desktop: clamp(14px,1.08vw,21px);
  --type-utilityMessage-desktop: 12px;
  --type-body-mobile: 22px;
  --type-small-mobile: 17px;
  --type-navigation-mobile: clamp(42px,13vw,62px);
  --type-submenu-mobile: clamp(20px,6.5vw,31px);
  --type-contentHeading-mobile: 22px;
  --type-projectTitle-mobile: 28px;
  --type-projectCategory-mobile: 19px;
  --type-projectInfo-mobile: 19px;
  --type-projectArchiveTitle-mobile: 24px;
  --type-mobileHeader-mobile: 17px;
  --type-mobileBrand-mobile: 22px;
  --type-contactButton-mobile: 18px;
  --type-utilityMessage-mobile: 12px;
}

html,
body {
  font-family: var(--font-family-english);
}

.font-english {
  font-family: var(--font-family-english) !important;
}

.font-japanese {
  font-family: var(--font-family-japanese) !important;
}

.field-error,
.character-count {
  font-family: var(--font-family-utility);
}

@media (min-width: 981px) {
  :root {
    --body-size: var(--type-body-desktop);
    --small-size: var(--type-small-desktop);
  }
  .nav-group { font-size: var(--type-navigation-desktop); }
  .submenu, .submenu-years { font-size: var(--type-submenu-desktop); }
  .text-column h1, .text-column h2 { font-size: var(--type-contentHeading-desktop); }
  .project-title { font-size: var(--type-projectTitle-desktop); }
  .project-category { font-size: var(--type-projectCategory-desktop); }
  .project-info { font-size: var(--type-projectInfo-desktop); }
  .project-card-title { font-size: var(--type-projectArchiveTitle-desktop); }
  .sidebar-brand { font-size: var(--type-homeNameEnglish-desktop); letter-spacing: .005em; }
  .home-name-jp { font-size: var(--type-homeNameJapanese-desktop); }
  .submit-button { font-size: var(--type-contactButton-desktop); }
  .field-error, .character-count { font-size: var(--type-utilityMessage-desktop); }
}

.text-scroll-shell .scroll-edge-cue-top {
  background: linear-gradient(to bottom, var(--text-fade-color), rgba(255,255,255,0));
}
.text-scroll-shell .scroll-edge-cue-bottom {
  background: linear-gradient(to bottom, rgba(255,255,255,0), var(--text-fade-color));
}
.visual-scroll-shell .scroll-edge-cue-top {
  background: linear-gradient(to bottom, var(--image-fade-color), rgba(255,255,255,0));
}
.visual-scroll-shell .scroll-edge-cue-bottom {
  background: linear-gradient(to bottom, rgba(255,255,255,0), var(--image-fade-color));
}

/* Media items can be either images or privacy-enhanced YouTube embeds. */
.gallery-media {
  width: 100%;
  display: block;
  background: var(--paper);
}
.gallery-media + .gallery-media {
  margin-top: 10px;
}
.gallery-media .gallery-image {
  display: block;
  width: 100%;
  height: auto;
  min-height: auto;
  aspect-ratio: auto;
  object-fit: contain;
}
.youtube-media {
  min-height: 0;
  display: block;
  background: #000;
}
.youtube-media iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  max-height: none;
  border: 0;
  background: #000;
}
.youtube-local-preview {
  place-content: center;
  gap: 12px;
  padding: 32px;
  color: #fff;
  text-align: center;
}
.youtube-local-preview a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: .16em;
}
.youtube-local-preview p {
  max-width: 28em;
  margin: 0;
  font-size: var(--small-size);
  line-height: 1.15;
}

/* One continuous archive contains every year, newest to oldest. */
.archive-scroll-shell { min-width: 0; height: 100dvh; }
.project-list { height: 100dvh; padding-bottom: 8vh; }
.project-year-section { width: 100%; scroll-margin-top: 0; }
.project-year-section + .project-year-section { padding-top: clamp(18px, 2.8vh, 34px); }
.project-card-media {
  display: block;
  width: 100%;
  aspect-ratio: 1.38 / 1;
  overflow: hidden;
  background: var(--quiet);
}
.project-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--crop-x, 50%) var(--crop-y, 50%);
  transform: scale(var(--crop-zoom, 1));
  transform-origin: var(--crop-x, 50%) var(--crop-y, 50%);
}
.project-card-static { cursor: default; }
.project-card-static:hover .project-card-title { text-decoration: none; }
.submenu-years a.is-year-active,
.submenu-years a[aria-current="true"] { transform: translateX(13px); }

/* Clear title hierarchy with a protected Back area.
   V1.2.4 spacing is optically matched to the approved desktop reference:
   compact title → metadata, a light category → info line-space, then a
   deliberately larger breathing space before the body copy. */
.project-heading-row {
  --project-title-meta-gap: clamp(8px, .62vw, 12px);
  --project-meta-copy-gap: clamp(42px, 3.7vw, 58px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(16px, 1.5vw, 28px);
  align-items: start;
  margin-bottom: var(--project-meta-copy-gap);
}
.project-heading-row .project-meta { padding-right: 0; margin-bottom: 0; min-width: 0; }
/* Project metadata must override the generic .text-column h1/p margins. */
.project-meta .project-title,
.project-meta .project-category,
.project-meta .project-info { margin: 0; }
.project-title {
  line-height: .98;
  font-weight: 600;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.project-meta .project-category {
  margin-top: var(--project-title-meta-gap);
  margin-bottom: 0;
  padding-bottom: 0;
  line-height: 1;
  font-weight: 500;
}
.project-meta .project-info {
  margin-top: .30em;
  margin-bottom: 0;
  padding-top: 0;
  line-height: 1;
  font-weight: 500;
}
.project-copy {
  line-height: 1.12;
}
.project-photo-credit {
  margin: clamp(20px, 2.7vh, 32px) 0 0;
  font-size: clamp(13px, .82vw, 16px);
  line-height: 1.12;
}
.project-photo-credit a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .14em;
}
.project-copy a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .14em;
}

/* Contact links and restrained inline form validation. */
.contact-social-links {
  display: flex;
  flex-wrap: wrap;
  gap: .55em 1.15em;
  margin-top: clamp(26px, 3.2vh, 42px);
  font-size: var(--small-size);
}
.contact-social-links a {
  border-bottom: 1px solid currentColor;
  transition: opacity var(--transition);
}
.contact-social-links a:hover,
.contact-social-links a:focus-visible { opacity: .62; }
.field-error {
  min-height: 1.1em;
  margin: 3px 0 0;
  color: #a51d2d;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12px;
  line-height: 1.2;
}
.form-field input.is-invalid,
.form-field textarea.is-invalid { border-color: #a51d2d; }
.message-meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.character-count {
  min-height: 1.1em;
  margin-top: 3px;
  color: var(--ink-soft);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12px;
  white-space: nowrap;
}
.form-status.is-error { color: #a51d2d; }
.form-status.is-success { color: var(--ink); }
.submit-button:disabled { opacity: .45; cursor: wait; }
.honeypot-field {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

@media (max-width: 980px) {
  :root {
    --body-size: var(--type-body-mobile);
    --small-size: var(--type-small-mobile);
  }
  .nav-group { font-size: var(--type-navigation-mobile); }
  .submenu, .submenu-years { font-size: var(--type-submenu-mobile); }
  .text-column h1, .text-column h2 { font-size: var(--type-contentHeading-mobile); }
  .project-title { font-size: var(--type-projectTitle-mobile); }
  .project-category { font-size: var(--type-projectCategory-mobile); }
  .project-info { font-size: var(--type-projectInfo-mobile); }
  .project-card-title { font-size: var(--type-projectArchiveTitle-mobile); }
  .mobile-menu-toggle,
  .mobile-language { font-size: var(--type-mobileHeader-mobile); }
  .mobile-brand { font-size: var(--type-mobileBrand-mobile); }
  .submit-button { font-size: var(--type-contactButton-mobile); }
  .field-error, .character-count { font-size: var(--type-utilityMessage-mobile); }

  /* The mobile header already carries the brand, so the two large Home signatures stay hidden. */
  .home-name-en,
  .home-name-jp { display: none !important; }

  /* Match the approved mobile reference: submenu is clearly indented to the right. */
  .submenu,
  .submenu-years,
  .mobile-home-submenu {
    margin-left: clamp(70px, 18vw, 88px);
  }

  /* Ikebana uses a tighter transition from copy to first visual on mobile. */
  .ikebana-page .text-column { padding-bottom: 28px; }

  .archive-scroll-shell { height: auto; }
  .project-list { height: auto; padding-bottom: 20px; }
  .project-year-section + .project-year-section { padding-top: 18px; }

  .gallery-media + .gallery-media { margin-top: 8px; }
  .gallery-media .gallery-image { min-height: auto; }
  .youtube-media { min-height: 0; }
  .youtube-media iframe { width: 100%; aspect-ratio: 16 / 9; max-height: none; }

  .project-heading-row {
    --project-title-meta-gap: 10px;
    --project-meta-copy-gap: 30px;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding-left: 20px;
    padding-right: 20px;
  }
  .project-heading-row .project-meta { padding-right: 0; }
  .project-meta .project-category { margin-top: var(--project-title-meta-gap); margin-bottom: 0; }
  .project-meta .project-info { margin-top: .30em; margin-bottom: 0; }

  .mobile-project-first-image .gallery-media { margin: 0; }
  .mobile-project-first-image .gallery-media img { display: block; width: 100%; height: auto; }
  .mobile-project-first-image .youtube-media { background: #000; }
  .project-gallery > .gallery-media:first-child { display: none; }

  .mobile-page-scroll-cue-top {
    background: linear-gradient(to bottom, var(--text-fade-color), rgba(255,255,255,0));
  }
  .mobile-page-scroll-cue-bottom {
    background: linear-gradient(to bottom, rgba(255,255,255,0), var(--text-fade-color));
  }
}
@media (max-width: 980px) {
  /* Older prototype rule targeted the first raw img. Galleries now use media wrappers,
     so keep every wrapped image visible and hide only the first media wrapper. */
  .project-gallery .gallery-media .gallery-image { display: block; }
  .project-gallery > .gallery-media:first-child { display: none; }
}

/* V1.3: language-specific font sizes and line spacing from the editor */
:root {
  --line-body-desktop: 1.02;
  --line-biographyCopy-desktop: 1.08;
  --line-projectCopy-desktop: 1.12;
  --line-contactCopy-desktop: 1.08;
  --line-navigation-desktop: .88;
  --line-submenu-desktop: 1.08;
  --line-submenuYears-desktop: 1.12;
  --line-contentHeading-desktop: .98;
  --line-projectTitle-desktop: .98;
  --line-projectCategory-desktop: 1;
  --line-projectInfo-desktop: 1;
  --line-projectArchiveTitle-desktop: 1;
  --line-homeNameEnglish-desktop: .78;
  --line-homeNameJapanese-desktop: .92;
  --line-contactButton-desktop: 1.2;
  --line-utilityMessage-desktop: 1.2;
  --line-body-mobile: 1.02;
  --line-biographyCopy-mobile: 1.1;
  --line-projectCopy-mobile: 1.12;
  --line-contactCopy-mobile: 1.08;
  --line-navigation-mobile: .88;
  --line-mobileHomeNavigation-mobile: .92;
  --line-submenu-mobile: 1.12;
  --line-mobileHomeSubmenu-mobile: 1.08;
  --line-submenuYears-mobile: 1.12;
  --line-contentHeading-mobile: .98;
  --line-projectTitle-mobile: .98;
  --line-projectCategory-mobile: 1;
  --line-projectInfo-mobile: 1;
  --line-projectArchiveTitle-mobile: 1;
  --line-homeNameEnglish-mobile: .9;
  --line-homeNameJapanese-mobile: .9;
  --line-contactButton-mobile: 1.2;
  --line-utilityMessage-mobile: 1.2;
  --line-mobileHeader-mobile: 1;
  --line-mobileBrand-mobile: 1;
}

@media (min-width: 981px) {
  .text-column { line-height: var(--line-body-desktop); }
  .biography-copy { line-height: var(--line-biographyCopy-desktop); }
  .project-copy { line-height: var(--line-projectCopy-desktop); }
  .contact-copy-inner { line-height: var(--line-contactCopy-desktop); }
  .nav-group { line-height: var(--line-navigation-desktop); }
  .submenu { line-height: var(--line-submenu-desktop); }
  .submenu-years { line-height: var(--line-submenuYears-desktop); }
  .text-column h1,
  .text-column h2 { line-height: var(--line-contentHeading-desktop); }
  .project-title { line-height: var(--line-projectTitle-desktop); }
  .project-meta .project-category { line-height: var(--line-projectCategory-desktop); }
  .project-meta .project-info { line-height: var(--line-projectInfo-desktop); }
  .project-card-title { line-height: var(--line-projectArchiveTitle-desktop); }
  .sidebar-brand { line-height: var(--line-homeNameEnglish-desktop); }
  .home-name-jp { line-height: var(--line-homeNameJapanese-desktop); }
  .submit-button { line-height: var(--line-contactButton-desktop); }
  .field-error,
  .character-count { line-height: var(--line-utilityMessage-desktop); }
}

@media (max-width: 980px) {
  .text-column { line-height: var(--line-body-mobile); }
  .biography-copy { line-height: var(--line-biographyCopy-mobile); }
  .project-copy { line-height: var(--line-projectCopy-mobile); }
  .contact-copy-inner { line-height: var(--line-contactCopy-mobile); }
  .nav-group { line-height: var(--line-navigation-mobile); }
  .mobile-home-nav { font-size: var(--type-navigation-mobile); line-height: var(--line-mobileHomeNavigation-mobile); }
  .submenu { line-height: var(--line-submenu-mobile); }
  .mobile-home-submenu { font-size: var(--type-submenu-mobile); line-height: var(--line-mobileHomeSubmenu-mobile); }
  .submenu-years { line-height: var(--line-submenuYears-mobile); }
  .text-column h1,
  .text-column h2 { line-height: var(--line-contentHeading-mobile); }
  .project-title { line-height: var(--line-projectTitle-mobile); }
  .project-meta .project-category { line-height: var(--line-projectCategory-mobile); }
  .project-meta .project-info { line-height: var(--line-projectInfo-mobile); }
  .project-card-title { line-height: var(--line-projectArchiveTitle-mobile); }
  .home-name-en { line-height: var(--line-homeNameEnglish-mobile); }
  .home-name-jp { line-height: var(--line-homeNameJapanese-mobile); }
  .submit-button { line-height: var(--line-contactButton-mobile); }
  .field-error,
  .character-count { line-height: var(--line-utilityMessage-mobile); }
  .mobile-menu-toggle,
  .mobile-language { line-height: var(--line-mobileHeader-mobile); }
  .mobile-brand { line-height: var(--line-mobileBrand-mobile); }
}

/* Revision 14: keep the active mobile project year fully visible.
   The year link shifts right to show the current archive section, while the
   submenu keeps overflow hidden for its opening animation. Extra inline room
   prevents the transformed final digit from being clipped. */
@media (max-width: 980px) {
  .submenu-years {
    box-sizing: content-box;
    padding-right: 16px;
  }
}

/* Revision 15: balanced mobile copy edges.
   Keep the actual content inset identical on both sides and let mobile body
   copy use the full available measure instead of Safari's prettier early
   line breaks, which can make the right edge look artificially wider. */
@media (max-width: 980px) {
  :root {
    --mobile-copy-edge: 20px;
  }

  .biography-copy,
  .ikebana-page .text-column,
  .contact-copy-inner,
  .contact-form-inner,
  .guidelines-page {
    width: 100%;
    max-width: none;
    padding-left: var(--mobile-copy-edge);
    padding-right: var(--mobile-copy-edge);
  }

  .project-heading-row,
  .project-copy {
    width: 100%;
    max-width: none;
    padding-left: var(--mobile-copy-edge);
    padding-right: var(--mobile-copy-edge);
  }

  .biography-copy,
  .ikebana-page .text-column,
  .project-copy,
  .contact-copy-inner {
    text-wrap: wrap;
  }
}

/* Revision 16: mobile Projects navigation and touch-safe archive titles.
   Projects uses a two-tap parent interaction on mobile: first tap reveals the
   year submenu, second tap opens the full archive at its newest/top section.
   Touch browsers also keep archive project titles free of sticky hover underlines. */
@media (max-width: 980px) {
  .project-card:hover .project-card-title,
  .project-card:focus-visible .project-card-title,
  .project-card-title {
    text-decoration: none;
  }
}

/* Revision 18: mobile submenu links navigate without horizontal movement.
   Touch interaction should not inherit the desktop hover/current-item shift,
   which can briefly clip longer submenu labels before navigation. */
@media (max-width: 980px) {
  .submenu a,
  .mobile-home-submenu a {
    transform: none !important;
  }
}

/* Revision 19: desktop navigation and signature spacing matched to the approved
   1920 × 1080 reference. One shared edge keeps every desktop page aligned. */
@media (min-width: 981px) {
  :root {
    --desktop-reference-edge: clamp(32px, 2.35vw, 45px);
  }

  .sidebar {
    padding: var(--desktop-reference-edge);
    overflow: visible;
  }

  .primary-nav {
    gap: clamp(32px, 2.71vw, 48px);
  }

  .nav-group {
    font-size: var(--type-navigation-desktop);
  }

  .language-toggle {
    margin-top: 4px;
    font-size: clamp(20px, 1.56vw, 30px);
  }

  .sidebar-brand {
    left: var(--desktop-reference-edge);
    bottom: var(--desktop-reference-edge);
    max-width: none;
    overflow: visible;
    font-size: clamp(65px, 6.3vw, 121px);
  }

  .site-shell[data-section="home"] .home-name-jp {
    right: var(--desktop-reference-edge);
    bottom: var(--desktop-reference-edge);
    font-size: clamp(54px, 4.8vw, 92px);
  }

  .site-shell[data-page="ikebana"] .sidebar-brand,
  .site-shell[data-page="project-detail"] .sidebar-brand {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(14px);
    transition-delay: 0s, 0s, 260ms;
  }
}

/* Revision 20: Biography uses the full right-hand column as one reading surface.
   The portrait leads the page, then the copy continues below with the existing
   white scroll cue. Mobile keeps the same portrait-then-copy reading order. */
@media (min-width: 981px) {
  .biography-page .biography-spacer {
    min-width: 0;
  }

  .biography-page .biography-content {
    height: 100%;
    padding-bottom: 0;
    background: var(--paper);
  }

  .biography-page .biography-image {
    display: block;
    width: 100%;
    min-height: 0;
    height: 50dvh;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: 50% 45%;
  }

  .biography-page .biography-copy {
    width: 100%;
    max-width: none;
    padding: clamp(20px, 2.2vh, 28px) var(--desktop-reference-edge) clamp(78px, 8vh, 100px) 0;
    font-size: var(--body-size);
    line-height: var(--line-biographyCopy-desktop);
    text-wrap: wrap;
  }

  .biography-page .biography-copy p {
    margin: 0 0 .5em;
  }

  .biography-page .biography-copy p:last-child {
    margin-bottom: 0;
  }
}

@media (min-width: 1800px) and (min-height: 1000px) {
  .biography-page .biography-copy {
    padding-bottom: 0;
  }
}

@media (max-width: 980px) {
  .biography-page .biography-spacer {
    display: none;
  }

  .biography-page .biography-content {
    display: flex;
    flex-direction: column;
  }

  .biography-page .biography-image {
    order: 1;
    aspect-ratio: 1 / 1;
  }

  .biography-page .biography-copy {
    order: 2;
  }
}

/* Revision 21: give the selected desktop submenu item a clearer offset from
   its unselected neighbours while keeping the existing menu alignment. */
@media (min-width: 981px) {
  .submenu a[aria-current="page"] {
    transform: translateX(52px);
  }

  /* Keep the selected year visibly offset while moving it with the same
     controlled transition as the rest of the submenu. */
  .submenu-years a {
    transition: transform 360ms cubic-bezier(.22, 1, .36, 1);
    will-change: transform;
  }

  .submenu-years a.is-year-active,
  .submenu-years a[aria-current="true"] {
    transform: translate3d(52px, 0, 0);
  }
}

/* Revision 24: reference-aligned desktop project metadata and submenu grid. */
@media (min-width: 981px) {
  /* Four stable guide lines keep the desktop navigation consistent:
     default menu, selected main menu, default submenu, selected submenu.
     Submenu placement is deliberately independent of the parent label width,
     so About and Projects always use the same column. */
  :root {
    --desktop-nav-active-shift: clamp(102px, 7.6vw, 146px);
    --desktop-submenu-line: clamp(180px, 16.15vw, 310px);
    --desktop-submenu-selected-shift: clamp(24px, 1.98vw, 38px);
  }

  .submenu,
  .submenu-years {
    left: calc(var(--desktop-submenu-line) - var(--desktop-reference-edge));
  }

  .nav-group[data-nav-group="contact"].is-active > .nav-primary {
    transform: translateX(var(--desktop-nav-active-shift));
  }

  .submenu a[aria-current="page"],
  .submenu-years a.is-year-active,
  .submenu-years a[aria-current="true"] {
    transform: translate3d(var(--desktop-submenu-selected-shift), 0, 0);
  }

  .submenu {
    top: 2em;
    gap: .10em;
  }

  .submenu-years {
    top: 1.94em;
  }

  /* Match the reference hierarchy: a clear title-to-subtitle pause, a close
     category/date pair, then generous space before the project body copy. */
  .project-heading-row {
    --project-title-meta-gap: clamp(26px, 2.35vw, 42px);
    --project-meta-copy-gap: clamp(45px, 3.55vw, 68px);
  }

  .project-meta .project-info {
    margin-top: .45em;
  }
}

/* Revision 22: archive anchoring and vector signatures. */
@media (min-width: 981px) {
  .project-list {
    padding-top: 0;
    padding-bottom: 0;
    scroll-padding-top: 0;
  }

  .project-list::after {
    content: "";
    display: block;
    height: var(--archive-tail-space, 0px);
  }

  /* A selected year must begin with its preview at the viewport edge. The
     following project's spacing is provided by the preceding card instead. */
  .project-year-section + .project-year-section {
    padding-top: 0;
  }

  .project-year-section:last-child .project-card:last-child {
    margin-bottom: 0;
  }

  .project-year-section:first-child,
  .project-year-section:first-child .project-card:first-child {
    margin-top: 0;
    padding-top: 0;
  }

  .sidebar-brand img {
    display: block;
    width: auto;
    height: clamp(45px, 4.479vw, 86px);
    max-width: none;
  }

  .home-name-jp img {
    display: block;
    width: clamp(300px, 29.95vw, 575px);
    height: auto;
  }
}