/* Content pages share the established edges; the intro artwork keeps its height. */
.home:not(.detail-site) .intro-main h1 { margin-bottom: 16px; }
.intro-motto { margin: 0 0 12px; color: #d5e8e8; font-size: 1.25rem; line-height: 1.6; font-weight: 550; letter-spacing: .04em; }
.home .story-viewport { touch-action: pan-x pan-y pinch-zoom; }
.home .content-panel { overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: thin; scrollbar-color: #738e9d transparent; }
.content-panel .panel-glow { inset: 0; animation: none; transform: none; }
.home:not(.detail-site) .personal-about,
.home:not(.detail-site) .personal-case,
.home:not(.detail-site) .personal-practice { display: block; padding-bottom: 36px; }
.home:not(.detail-site) .content-panel .profile-heading { margin: 20px 0 22px; font-size: clamp(2.15rem, 4.1vw, 3.75rem); line-height: 1.18; letter-spacing: -.035em; font-weight: 750; }
.profile-intro { font-size: 1.0625rem; line-height: 1.8; color: #c9d8df; margin: 0; max-width: 38em; text-wrap: pretty; }
.about-heading { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 64px; }
.perspectives { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 52px; margin-top: 40px; }
.perspective { border-top: 1px solid #7893a573; padding-top: 26px; }
.perspective .field-label { color: #b7dde0; font-size: .875rem; letter-spacing: .09em; margin: 0 0 15px; }
.perspective h3 { margin: 0 0 16px; font-size: 1.25rem; line-height: 1.4; color: #f0f5f8; }
.perspective p:not(.field-label) { font-size: 1rem; line-height: 1.75; color: #c3d1d9; margin: 0; max-width: 23em; }
.about-note { margin: 56px 0 0; max-width: none; color: #a9bdc8; font-size: 1rem; line-height: 1.8; text-wrap: pretty; }
.case-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 56px; align-items: start; }
.case-copy { min-width: 0; }
.text-link { display: inline-flex; align-items: center; gap: 25px; margin-top: 22px; padding-bottom: 8px; border-bottom: 1px solid #a3c3d3; font-weight: 650; font-size: 1rem; text-decoration: none; }
.text-link:hover { color: #c1f4f3; }
.text-link:focus-visible { outline: 2px solid #c1f4f3; outline-offset: 6px; }
.portfolio-preview { margin: 0; min-width: 0; padding-top: 5px; }
.portfolio-preview img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: top; border: 1px solid #829cab80; box-shadow: 0 18px 48px #040a1540; }
.portfolio-preview figcaption { margin-top: 12px; color: #bfd1db; font-size: .875rem; line-height: 1.5; }
.case-facts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 32px; border-top: 1px solid #bdd8e454; padding-top: 20px; margin: 30px 0 0; }
.case-facts dt { color: #d7eced; font-size: .875rem; font-weight: 650; margin-bottom: 9px; }
.case-facts dd { color: #c4d5de; margin: 0; font-size: 1rem; line-height: 1.7; }
.personal-practice .practice-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 80px; }
@media (min-width:651px) {
 .home:not(.detail-site) .personal-practice { display:flex; justify-content:center; padding-block:clamp(32px,5dvh,64px); }
 .personal-practice .practice-grid { flex-shrink:0; }
}
.practice-eyebrow { margin: 0 0 18px; font-size: .875rem; color: #d2cce5; letter-spacing: .05em; }
.practice-list { list-style: none; padding: 0; margin: 0; }
.practice-list li { display: grid; grid-template-columns: 30px 1fr; gap: 17px; padding: 22px 0; border-top: 1px solid #c3bdd85c; }
.practice-index { color: #bab3d0; font-size: .875rem; padding-top: 4px; }
.practice-list h3 { margin: 0 0 10px; font-size: 1.25rem; line-height: 1.35; }
.practice-list p { margin: 0; font-size: 1rem; line-height: 1.75; color: #d0ccdf; }
.home:not(.detail-site) .personal-contact { display: flex; flex-direction: column; justify-content: center; align-items: stretch; padding-block: clamp(28px,5dvh,48px); }
.contact-heading { display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: 28px; }
#contact .personal-contact .profile-heading { font-size: clamp(2.75rem,4.7vw,4rem); line-height: 1.15; margin: 0; }
.contact-introduction { display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.home:not(.detail-site) .personal-contact .contact-placeholder { display: inline-block; flex-shrink:0; margin-top: 0; font-size: 1rem; line-height: 1.5; color: #d6eaee; text-decoration-thickness: 1px; text-underline-offset: 5px; max-width: 100%; overflow-wrap: anywhere; }
.home:not(.detail-site) .personal-contact .contact-placeholder[hidden] { display: none; }
.home:not(.detail-site) .personal-contact .contact-introduction p { margin: 0; max-width: none; font-size: 1rem; line-height: 1.8; }
.personal-contact [data-contact-link]:hover { color: #fff; }
.personal-contact [data-contact-link]:focus-visible { outline: 2px solid #bfe7e9; outline-offset: 8px; }
.contact-form { display: grid; grid-template-columns: 1fr 1.2fr; gap: 24px 52px; }
.contact-honey { display: none; }
.contact-compose:disabled { cursor: wait; opacity: .65; }
.contact-status { grid-column: 1 / -1; font-size: .875rem; line-height: 1.5; color: #c8e7e8; }
.contact-status:empty { display: none; }
.contact-status[data-state="error"],.contact-status[data-state="activation"] { color: #f0cda7; }
.contact-fields { display: grid; gap: 17px; min-width: 0; }
.contact-field { display: flex; flex-direction: column; gap: 9px; min-width: 0; color: #d8e5eb; font-size: .9375rem; line-height: 1.4; }
.contact-field input,.contact-field select,.contact-field textarea { width: 100%; min-width: 0; padding: 11px 14px; border: 1px solid #829bae40; border-radius: 3px; background: #d4e4f00b; color: #eef5f9; font: inherit; font-size: 1rem; line-height: 1.5; box-shadow: none; }
.contact-field select { color-scheme: dark; cursor: pointer; }
.contact-field select option { color: #172637; background-color: #f5f7fa; }
.contact-field textarea { flex: 1; min-height: 190px; resize: vertical; }
.contact-field :is(input,select,textarea):focus-visible { outline: 2px solid #b1dde5; outline-offset: 3px; background: #d4e4f013; }
.contact-actions { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
#contact .contact-actions p { margin: 0; font-size: .8125rem; line-height: 1.6; color: #afc0ce; max-width: 38em; }
.contact-compose { display: inline-flex; flex: none; align-items: center; justify-content: space-between; gap: 40px; border: 1px solid #a7cad0; border-radius: 3px; padding: 14px 20px; background: #b8d9df; color: #12232f; font: inherit; font-weight: 600; cursor: pointer; }
.contact-compose:hover { background: #d2edf0; }
.contact-compose:focus-visible { outline: 2px solid #eefbff; outline-offset: 4px; }
@media (min-width:651px) and (max-height:760px) {
  .contact-heading { gap:14px; margin-bottom: 22px; }
  .contact-form { row-gap: 20px; }
  .contact-fields { gap: 13px; }
  .contact-field { gap: 7px; }
  .contact-field input,.contact-field select { padding-block: 9px; }
}
@media (min-width:651px) and (max-width:1000px) { .contact-heading,.contact-form { column-gap: 28px; } }
@media (min-width:651px) and (max-height:680px) {
 #contact .panel-kicker { display: none; }
 #contact .personal-contact .profile-heading { font-size: 2.5rem; margin: 0; }
 .home:not(.detail-site) .personal-contact { padding-block: 20px; }
 .contact-heading { margin-bottom: 20px; }
 .contact-fields { gap: 12px; }
}
.home.detail-draft .detail-cover .project-art { display: none; }
.home.detail-draft .panel-inner { padding-block: clamp(28px,6dvh,64px); }
.home.detail-draft .detail-cover .project-layout { display: block; }
.home.detail-draft .project-topline { align-items: center; padding-bottom: 16px; }
.home.detail-draft .project-topline > span { font-size: .875rem; }
.home.detail-draft .back-link { font-size: 1rem; letter-spacing: 0; padding-bottom: 5px; }
.detail-case-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center; margin-top: 36px; }
.home.detail-draft .detail-cover h1 { font-size: clamp(2.3rem,4.4vw,4.1rem); margin: 20px 0 24px; line-height: 1.2; }
.home.detail-draft .about-layout h2,
.home.detail-draft .contact-layout h2 { font-size: clamp(2.25rem,4.4vw,4rem); margin: 20px 0 30px; line-height: 1.2; }
.home.detail-draft .about-columns { max-width: 1060px; gap: 60px; }
.home.detail-draft .about-columns p,
.home.detail-draft .contact-layout p:not(.panel-kicker) { font-size: 1.0625rem; line-height: 1.9; }
.home.detail-draft .contact-layout p:not(.panel-kicker) { max-width: 47em; }
.home.detail-draft .detail-label { font-size: 1rem; margin-bottom: 14px; }
@media (min-width: 651px) and (max-height: 760px) {
  .home:not(.detail-site) .content-panel { --content-rail: 40px; }
  .home:not(.detail-site) .content-panel .profile-heading { font-size: clamp(2.1rem,3.8vw,3.1rem); margin-block: 18px; }
  .perspectives { margin-top: 30px; }
  .perspective { padding-top: 22px; }
  .about-note { margin-top: 48px; }
  .case-facts { margin-top: 22px; }
  .practice-list li { padding-block: 18px; }
}
@media (min-width: 651px) and (max-width: 1000px) {
  .about-heading,.case-grid,.personal-practice .practice-grid,.detail-case-grid { gap: 28px; }
  .perspectives { gap: 24px; }
  .perspective h3 { font-size: 1.2rem; }
}
@media (max-width: 650px) {
  .home.detail-draft .nav { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
  .home.detail-draft .nav a { text-align: center; font-size: .875rem; }
  .intro-motto { font-size: 1rem; line-height: 1.6; margin: 0; letter-spacing: .015em; }
  .home:not(.detail-site) .intro-lead { display: block; margin-top: 12px; }
  .home:not(.detail-site) .personal-about,
  .home:not(.detail-site) .personal-case,
  .home:not(.detail-site) .personal-practice { padding-block: 30px 38px; }
  .home:not(.detail-site) .content-panel .profile-heading { font-size: 2.25rem; margin: 18px 0; }
  .about-heading,.case-grid,.personal-practice .practice-grid,.detail-case-grid { grid-template-columns: 1fr; gap: 26px; }
  .about-heading { gap: 0; }
  .profile-intro { font-size: 1rem; line-height: 1.7; }
  .perspectives { grid-template-columns: 1fr; gap: 30px; margin-top: 32px; }
  .perspective { padding-top: 22px; }
  .perspective .field-label { margin-bottom: 8px; }
  .perspective h3 { font-size: 1.25rem; margin-bottom: 8px; }
  .about-note { margin-top: 40px; }
  .case-facts { grid-template-columns: 1fr; gap: 20px; margin-top: 24px; }
  .case-facts dt { margin-bottom: 5px; }
  .portfolio-preview { padding: 0; }
  .portfolio-preview figcaption { margin-top: 8px; }
  .practice-eyebrow { margin-bottom: 12px; }
  .practice-list li { padding-block: 18px; gap: 12px; grid-template-columns: 24px 1fr; }
  .practice-list h3 { font-size: 1.125rem; }
  .home:not(.detail-site) .personal-contact { display: block; padding-block: 30px 38px; }
  #contact .personal-contact .profile-heading { font-size: 2.75rem; }
  .contact-heading,.contact-form { grid-template-columns: 1fr; gap: 26px; }
  .contact-introduction { flex-direction:column; gap:12px; }
  .contact-heading { margin-bottom: 32px; }
  .contact-fields { gap: 20px; }
  .contact-field textarea { min-height: 180px; }
  .contact-actions { align-items: stretch; flex-direction: column; gap: 18px; }
  .contact-compose { min-height: 50px; }
  .home.detail-draft .panel-inner { padding-block: 24px 36px; }
  .home.detail-draft .detail-cover h1,
  .home.detail-draft .about-layout h2,
  .home.detail-draft .contact-layout h2 { font-size: 2.25rem; margin-block: 18px 22px; }
  .home.detail-draft .about-columns { display: block; padding-top: 18px; }
  .home.detail-draft .about-columns > div + div { margin-top: 26px; }
  .home.detail-draft .detail-label { margin-bottom: 10px; }
  .home.detail-draft .about-columns p,
  .home.detail-draft .contact-layout p:not(.panel-kicker) { font-size: 1rem; line-height: 1.8; }
  .detail-case-grid { margin-top: 24px; }
}

/* Fit the confirmed name and biographical copy within the existing layout. */
html[lang="en"] .home:not(.detail-site) .intro-main h1 { font-size: clamp(2.8rem, 4.9vw, 4.75rem); }
.personal-about .profile-intro { font-size: 1rem; }
.about-question { margin: 0 0 14px; color: #d7e9eb; font-size: 1.125rem; line-height: 1.6; font-weight: 600; text-wrap: pretty; }
.approach-cycle { position: relative; }
.approach-cycle .perspective { position: relative; }
.approach-cycle .perspective::before { content: ''; position: absolute; left: 0; top: -4px; width: 7px; height: 7px; border-radius: 50%; background: #98c6d0; opacity: .35; }
.approach-cycle .perspective:not(:last-child)::after { content: '→'; position: absolute; right: -34px; top: -14px; color: #819fab; font-size: 1rem; line-height: 24px; }
.approach-cycle.is-playing .perspective::before { animation: approach-light 6.6s linear infinite; }
.approach-cycle.is-playing .perspective:nth-child(2)::before { animation-delay: 2.2s; }
.approach-cycle.is-playing .perspective:nth-child(3)::before { animation-delay: 4.4s; }
.approach-cycle.is-playing .field-symbol { animation: approach-symbol 6.6s linear infinite; }
.approach-cycle.is-playing .perspective:nth-child(2) .field-symbol { animation-delay: 2.2s; }
.approach-cycle.is-playing .perspective:nth-child(3) .field-symbol { animation-delay: 4.4s; }
@keyframes approach-light { 0%,32%,100% { opacity: .35; box-shadow: none; } 8%,24% { opacity: 1; box-shadow: 0 0 16px 3px #b9e9ef66; } }
@keyframes approach-symbol { 0%,32%,100% { opacity: .55; } 8%,24% { opacity: 1; stroke: #dcf9f9; } }
@media (min-width:651px) and (max-width:1000px) { .approach-cycle .perspective:not(:last-child)::after { right: -19px; } }
@media (max-width:650px) {
 .about-question { margin-top: 8px; font-size: 1.0625rem; }
 .approach-cycle .perspective:not(:last-child)::after { display: none; }
}
@media (prefers-reduced-motion:reduce) {
 .approach-cycle.is-playing .perspective::before,.approach-cycle.is-playing .field-symbol { animation: none; }
}
.home:not(.detail-site) .personal-about .profile-heading { font-size: clamp(2.15rem,3.5vw,2.9rem); line-height: 1.25; }
@media (min-width: 951px) {
  /* Move the two visual groups inward without changing the artwork's vertical anchor. */
  .home:not(.detail-site) .intro-main { transform: translate(clamp(24px,3vw,48px),clamp(20px,3dvh,32px)); }
  .home:not(.detail-site) .intro-art .discipline-visual { left: calc(50% - clamp(24px,3vw,48px)); }
}
@media (max-height: 620px) and (min-width: 951px) {
  .home:not(.detail-site) .intro-main { transform: translateX(clamp(24px,3vw,48px)); }
}
@media (max-width: 650px) {
  html[lang="en"] .home:not(.detail-site) .intro-main h1 { font-size: clamp(2rem, 8.5vw, 3rem); }
  .intro-main .panel-kicker { font-size: .75rem; letter-spacing: .04em; }
}

/* Small accents have their own layout space and never move across the copy. */
.field-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 32px; margin-bottom: 12px; }
.perspective .field-heading .field-label { margin: 0; }
.field-symbol { width: 30px; height: 30px; flex: 0 0 30px; stroke: #a9dadd; stroke-width: 1.2; fill: none; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.field-symbol path { stroke-dasharray: 85; stroke-dashoffset: 0; }
.story-panel.is-current .field-symbol path { animation: trace-field 1.9s ease both; }
.perspective:nth-child(2) .field-symbol path { animation-delay: .16s; }
.perspective:nth-child(3) .field-symbol path { animation-delay: .32s; }
.portfolio-preview figcaption { display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.process-accent { width: 80px; height: 20px; flex: 0 0 80px; overflow: visible; }
.process-accent path { stroke: #8aaab080; fill: none; }
.process-accent circle { fill: #b9dcdf; opacity: .45; }
.story-panel.is-current .process-accent circle { animation: process-light 6s ease-in-out infinite; }
.process-accent circle:nth-of-type(2) { animation-delay: 1s !important; }
.process-accent circle:nth-of-type(3) { animation-delay: 2s !important; }
.practice-index { position: relative; }
.practice-index::after { content: ''; display: block; width: 5px; height: 5px; margin-top: 13px; border-radius: 50%; background: #b6dadd; opacity: .5; }
.story-panel.is-current .practice-index::after { animation: process-light 7s ease-in-out infinite; }
.practice-list li:nth-child(2) .practice-index::after { animation-delay: 1.2s; }
.practice-list li:nth-child(3) .practice-index::after { animation-delay: 2.4s; }
@keyframes trace-field { from { stroke-dashoffset: 85; opacity: .3; } to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes process-light { 0%, 40%, 100% { opacity: .35; } 18% { opacity: 1; } }
.about-story { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 48px; }
.about-media { margin: 0; min-width: 0; }
.about-media img { display: block; width: 100%; height: clamp(200px,34dvh,310px); object-fit: cover; object-position: 50% 54%; border-radius: 3px; }
.about-media figcaption { margin-top: 10px; font-size: .8125rem; color: #afc5d0; line-height: 1.5; }
.home:not(.detail-site) .personal-about .about-biography .profile-heading { font-size: clamp(1.9rem,3vw,2.75rem); margin: 12px 0 18px; line-height: 1.2; }
.about-biography .about-question { font-size: 1rem; margin-bottom: 10px; }
.about-biography .profile-intro { line-height: 1.7; }
.personal-about .perspectives { margin-top: 28px; gap: 40px; }
.personal-about .perspective { padding-top: 14px; }
.personal-about .field-heading { min-height: 26px; margin-bottom: 8px; }
.personal-about .perspective h3 { margin-bottom: 8px; font-size: 1.125rem; }
.personal-about .perspective p:not(.field-label) { line-height: 1.65; }
.personal-about .about-note { margin-top: 48px; }
.personal-about .approach-cycle .perspective:not(:last-child)::after { right: -28px; }
@media (min-width:651px) {
 .home:not(.detail-site) .personal-about { display:flex; flex-direction:column; justify-content:center; padding-block:clamp(28px,4dvh,44px); }
 .personal-about > * { flex-shrink:0; }
}
@media (min-width:651px) and (max-height:760px) {
 .about-story { gap: 36px; }
 .about-media img { height:clamp(180px,29dvh,210px); }
 .home:not(.detail-site) .personal-about .about-biography .profile-heading { font-size: 2rem; margin-block: 10px 12px; }
 .personal-about .perspectives { margin-top:20px; }
 .personal-about .about-note { margin-top:36px; }
}
@media (max-width:900px) {
 .about-story { gap: 28px; }
 .personal-about .perspectives { gap: 24px; }
 .personal-about .approach-cycle .perspective:not(:last-child)::after { right: -19px; }
}
@media (max-width:650px) {
 .about-story { display: flex; flex-direction: column-reverse; align-items: stretch; gap: 24px; }
 .about-media img { height: auto; aspect-ratio: 3 / 2; }
 .personal-about .perspectives { margin-top: 32px; gap: 26px; }
 .personal-about .about-note { margin-top: 36px; }
 /* Keep the entire form usable in the app's narrow preview pane. */
 .home:not(.detail-site) .personal-contact { display: flex; padding-block: 16px; }
 .contact-heading { gap: 8px; margin-bottom: 16px; }
 #contact .panel-kicker,.contact-introduction p { display: none; }
 #contact .personal-contact .profile-heading { font-size: 2rem; margin: 0; }
 .home:not(.detail-site) .personal-contact .contact-placeholder { margin-top: 0; font-size: 1rem; }
 .contact-form { gap: 12px; }
 .contact-fields { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
 .contact-fields .contact-field:last-child { grid-column: 1 / -1; }
 .contact-field { font-size: .875rem; gap: 5px; line-height: 1.2; }
 .contact-field input,.contact-field select { padding: 7px 10px; }
 .contact-field textarea { min-height: 82px; height: 82px; padding: 9px 10px; flex: none; }
 .contact-actions { flex-direction: row; align-items: center; gap: 12px; }
 #contact .contact-actions p { font-size: .75rem; }
 .contact-compose { min-height: 44px; font-size: .875rem; padding: 11px 14px; gap: 16px; }
}
@media (max-width:400px) {
 .contact-actions { flex-direction: column; align-items: stretch; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .story-panel.is-current .field-symbol path,
  .story-panel.is-current .process-accent circle,
  .story-panel.is-current .practice-index::after { animation: none; }
}