/* Layout follows the Webflow archive: 4 / 3 / 2 columns, 1px gutters. */
@font-face { font-family: "Arial Narrow"; src: url("../fonts/Arial-Narrow.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
/* Arial Narrow Latin with matched cap/x heights; Japanese retains the sharp, matched-weight outlines. */
@font-face { font-family: "Kaku Arial Hybrid"; src: url("../fonts/kaku-arial.6fd09360ae5165c2.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; size-adjust: 90%; unicode-range: U+20-7E, U+A0, U+AE, U+FC, U+2014, U+3001-3002, U+3005, U+300C-300D, U+3012, U+3042, U+3044, U+3046, U+3048, U+304A-304D, U+304F, U+3051-3059, U+305B, U+305D-3061, U+3063-306B, U+306D-306F, U+3072-3073, U+3078-3079, U+307E-307F, U+3081-3082, U+3084, U+3088-308C, U+308F, U+3092-3093, U+30A1-30A4, U+30A6-30BD, U+30BF-30C1, U+30C3-30C4, U+30C6-30CB, U+30CD-30D1, U+30D3-30D7, U+30D9-30DB, U+30DD-30E7, U+30E9-30ED, U+30F3, U+30FB-30FC, U+4E00-4E01, U+4E09-4E0A, U+4E0D-4E0E, U+4E16, U+4E21, U+4E2D, U+4E3B, U+4E89, U+4E8B, U+4EA4, U+4EAC, U+4EBA, U+4ECB, U+4ED6, U+4ED8, U+4EE3-4EE5, U+4EF6, U+4EFB, U+4F01, U+4F1D, U+4F4D, U+4F53, U+4F5C, U+4F8B, U+4F9B, U+4F9D, U+4FA1, U+4FB5, U+4FC2, U+4FDD, U+4FE1, U+500B, U+5024, U+505C, U+50AC, U+50CD, U+50CF, U+5148-5149, U+5165, U+5168, U+516C, U+5171, U+5185, U+518D, U+5199, U+51E6, U+51FA, U+521D, U+5225, U+5229, U+5236, U+523A, U+524A, U+524D, U+5272, U+5275, U+5287, U+529B, U+52A0, U+52D5, U+52D9, U+5316, U+533A, U+5354, U+5370, U+53BB, U+53CE, U+53D6-53D7, U+53E3, U+53EF-53F0, U+53F2, U+53F7, U+5404, U+5408, U+540C-540D, U+5411, U+542B, U+544A, U+5473, U+548C, U+54C1, U+54E1, U+5546, U+554F, U+55B6, U+56DE, U+56F2, U+56FD, U+5728, U+5730, U+578B, U+57DF, U+57F9-57FA, U+5831, U+5834, U+58F2, U+5909, U+5916, U+591A, U+5927, U+5951, U+5973, U+597D, U+59D4, U+5B58, U+5B66, U+5B89, U+5B9A, U+5B9F, U+5BA4, U+5BB3, U+5BB6, U+5BB9, U+5BFE, U+5C02, U+5C4A-5C4B, U+5C55, U+5C5E, U+5C65, U+5E02, U+5E0C, U+5E30, U+5E74, U+5E83, U+5E97, U+5EA6, U+5F0F, U+5F37, U+5F53, U+5F62, U+5F79, U+5F8B-5F8C, U+5F93, U+5F97, U+5FB4, U+5FC3, U+5FC5, U+5FDC, U+601D, U+6027, U+60C5, U+60D1, U+60F3, U+610F, U+611B, U+611F, U+616E, U+6210, U+6226, U+6240, U+624B, U+6253, U+6271, U+6280, U+62C5, U+62E0-62E1, U+62EC, U+6301, U+6307, U+63A2, U+63AA, U+63B2, U+63D0, U+643A, U+652F, U+6539, U+6570, U+6587, U+6599, U+65AD, U+65B0, U+65B9, U+65BD, U+65E5, U+660E, U+6620, U+6642, U+66F4, U+66FF-6700, U+6708-6709, U+671B, U+671F, U+672C, U+6761, U+6771, U+6790, U+67FB, U+6838-6839, U+6848, U+696D, U+697D, U+6982, U+69CB, U+69D8, U+6A21, U+6A29-6A2A, U+6A5F, U+6B62-6B63, U+6B74, U+6B8B, U+6BCE, U+6C17, U+6C42, U+6CA1, U+6CD5, U+6CE8, U+6D3B, U+6D41, U+6D88, U+6DF1, U+6E21, U+6EDE, U+6F20, U+6FC0, U+70B9, U+7269, U+7279, U+72EC, U+73FE, U+7406, U+751F, U+7528, U+7531, U+753A-753B, U+754C, U+7559, U+7565, U+756A, U+7570, U+767A-767B, U+7684, U+76E4, U+76EE, U+76F8, U+771F, U+7740, U+77E5, U+7802, U+78BA, U+793A, U+79FB, U+7A2E, U+7A4D, U+7A7A, U+7A93, U+7ACB, U+7B2C, U+7B49, U+7B54, U+7BA1, U+7BC4, U+7BC9, U+7C4D, U+7C73, U+7D04, U+7D1B, U+7D30, U+7D39, U+7D42, U+7D44, U+7D4C, U+7D61, U+7D71, U+7D99-7D9A, U+7DD1, U+7E3E, U+7E70, U+7F6E, U+7FA4, U+7FA9, U+8005, U+80C6, U+80FD, U+81EA, U+821E, U+8272, U+82E5-82E6, U+8457, U+884C, U+8853, U+8868, U+88C5, U+88FD, U+8907, U+8981, U+898F, U+8996, U+899A, U+89A7, U+89E3, U+8A00, U+8A02, U+8A08, U+8A17-8A18, U+8A2D, U+8A31, U+8A66, U+8A71-8A72, U+8A8D, U+8A9E, U+8AA4, U+8AAC, U+8ABF, U+8AC7, U+8ACB, U+8B72, U+8B77, U+8C4A, U+8C61, U+8CA9, U+8CDE, U+8D64, U+8D70, U+8E8D, U+8ECA, U+8EF8, U+8F09, U+8F9B, U+8FBC, U+8FF7, U+8FFD, U+9001, U+901A, U+9020, U+9023, U+9032, U+9042, U+9045, U+904A-904B, U+9069, U+90E8, U+90FD, U+914D, U+916C, U+91C8, U+91CD-91CE, U+91DD, U+9332, U+9577, U+9580, U+9589, U+958B, U+9593, U+95A2, U+9632, U+9650, U+9664, U+969B-969C, U+96C6, U+96EA, U+96FB, U+975E, U+9762, U+9769, U+97D3, U+9805, U+9818, U+983C, U+984C, U+9858, U+98A8, U+98DF, U+9999, U+99C6, U+9A13, U+9BAE, U+9EBA, U+9EC4, U+FF08-FF09, U+FF1A, U+FFFF; }
:root { --color-bg: #fdfdfd; --color-text: #000; --color-muted: #8c8c8c; --font: "Arial Narrow", Arial, sans-serif; --font-size: .875rem; --line-height: 1.2rem; --gap: 1px; --border: 1px dotted #000; --overlay-bg: #f2f2f2b3; }
* { box-sizing: border-box; }
body, h1, h2, p, figure { margin: 0; }
html { background: var(--color-bg); }
body { color: var(--color-text); background: var(--color-bg); font-family: var(--font); font-size: 1.1111111111111112vw; line-height: var(--line-height); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overscroll-behavior: none; }
button, input, textarea { font: inherit; color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { border: 0; border-radius: 0; padding: 0; background: none; cursor: pointer; }
:focus { outline: none; box-shadow: none; }
.text-link:focus-visible, a:focus-visible, .index-item-title:focus-visible, .privacy-inline:focus-visible { background-color: rgba(0, 0, 0, .08); }
.media-trigger:focus-visible { filter: brightness(.94); }
::selection { background: #000; color: #fff; }
img, video { display: block; max-width: 100%; }
img::selection { background: transparent; }
[hidden] { display: none !important; }

.site-header { min-height: 33vh; }
.menu-bar, .site-footer { width: 100%; max-width: 1800px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.menu-bar { position: sticky; top: 0; }
.menu-group { display: flex; align-items: flex-start; gap: 2px; }
.contact-group { display: flex; flex-direction: column; align-items: flex-start; width: 100%; }
.text-link { display: inline-block; white-space: nowrap; text-align: left; font-size: var(--font-size); line-height: var(--line-height); }
.time-wrap { display: flex; align-items: center; white-space: nowrap; font-size: var(--font-size); }
.time-wrap > span:first-child { white-space: pre; }
.clock-signal { animation: clock-signal 1s infinite; }
@keyframes clock-signal { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
.bio-text { grid-column: 1 / -1; overflow: hidden; font-size: var(--font-size); }
.contact-form-wrap, .contact-form { width: 100%; }
.contact-form { display: flex; flex-direction: column; align-items: flex-start; }
.input-field, .message-field { display: block; width: 100%; border: 0; background: transparent; padding: 0; margin: 0; border-radius: 0; font-size: var(--font-size); line-height: var(--line-height); }
.input-field::placeholder, .message-field::placeholder { color: var(--color-muted); opacity: 1; }
.message-field { min-height: var(--line-height); resize: none; overflow: hidden; }
.form-status { font-size: var(--font-size); }
.form-privacy-note { width: 100%; margin: .5em 0; font-size: var(--font-size); line-height: 1.4; overflow-wrap: anywhere; }
.privacy-inline { display: inline; text-align: left; }

.archive-section { width: 100%; position: relative; }
.archive-grid { width: 100%; max-width: 1800px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto; gap: var(--gap); align-items: stretch; position: sticky; top: 0; }
.archive-item { min-width: 0; position: relative; display: flex; flex-direction: column; align-self: stretch; }
.archive-media { display: flex; flex-direction: column; width: 100%; position: sticky; top: 0; }
.archive-media picture { display: block; }
.archive-item img, .archive-video { width: 100%; height: auto; cursor: zoom-in; }
.archive-video { object-fit: cover; background: transparent; }
.caption-wrap { display: flex; align-items: baseline; min-width: 0; font-size: var(--font-size); line-height: var(--line-height); }
.caption-wrap > span { flex: none; }
.caption-wrap .caption-text { flex: 0 1 auto; white-space: nowrap; overflow: hidden; }
.caption-bracket { margin: 0 1px; }

/* Clip translated bottom content without creating a scroll container or fixing its height. */
.index-footer-reveal { overflow: clip; }
.index-trigger-section { min-height: 50vh; display: flex; align-items: center; gap: 1px; }
.index-heading { padding: 1px; overflow: visible; font-size: 4.8em; line-height: .8; font-weight: 400; letter-spacing: -.02em; text-transform: uppercase; }
.project-index { width: 100%; }
.index-item { padding: .75em 0; border-bottom: var(--border); }
.index-item-title { display: block; width: 100%; text-align: left; font-size: var(--font-size); line-height: var(--line-height); font-weight: 400; }
.index-item-details { padding-right: 1.5%; overflow: hidden; font-size: var(--font-size); line-height: var(--line-height); cursor: pointer; }
.site-footer > * { font-size: var(--font-size); line-height: var(--line-height); text-align: left; }

.site-overlay, .lightbox { background: var(--overlay-bg); backdrop-filter: blur(4em); -webkit-backdrop-filter: blur(4em); }
.site-overlay { position: fixed; inset: 0; z-index: 100; overflow: hidden; }
.overlay-content { width: 100%; max-width: 1800px; height: 100%; padding: .75em .75em 1.5%; overflow: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 1.5%; scrollbar-width: none; }
.overlay-content::-webkit-scrollbar { display: none; }
.overlay-content h2 { font-size: var(--font-size); line-height: var(--line-height); font-weight: 400; }
.overlay-text { width: 100%; font-size: var(--font-size); }
.overlay-close { flex-shrink: 0; }
body.modal-open { overflow: hidden; }

/* Click anywhere or press Escape to close; full-resolution media stays on demand. */
.lightbox { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 0; cursor: zoom-out; }
.lightbox-media { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-out; }

/* Observe each card so long projects still reveal progressively on small screens. */
@media (prefers-reduced-motion: no-preference) {
  .menu-pending { opacity: 0; transform: translateY(100px); }
  .menu-enter { animation: menu-rise .8s cubic-bezier(.165, .84, .44, 1) both, menu-fade .8s ease-in-out both; animation-delay: var(--menu-delay, 0ms); }

  .motion-ready .index-reveal-pending,
  .motion-ready .archive-item.is-pending { opacity: 0; transform: translateY(100px); }
  .motion-ready .index-reveal-visible,
  .motion-ready .archive-item.is-visible { animation: item-in .8s cubic-bezier(.165, .84, .44, 1) both; animation-delay: var(--reveal-delay, 0ms); }
}
@keyframes menu-rise { from { transform: translateY(100px); } to { transform: translateY(0); } }
@keyframes menu-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes item-in { from { opacity: 0; transform: translateY(100px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 1024px) { body { font-size: .7111111111111111rem; } }
@media (min-width: 1560px) { body { font-size: .975em; } }
@media (max-width: 991px) { .archive-grid, .menu-bar { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .archive-grid, .menu-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; } }
.media-trigger { display: block; width: 100%; text-align: left; cursor: zoom-in; }

.language-switch { display: flex; align-items: baseline; gap: .35em; font-size: var(--font-size); line-height: var(--line-height); }
.language-switch a, .language-switch span { white-space: nowrap; }
/* Combined font: Arial Narrow Latin and sharp Kaku Japanese outlines. */
html[lang="ja"] { --font: "Kaku Arial Hybrid", sans-serif; }
html[lang="ja"] body { font-weight: 400; }
html[lang="ja"] :is(.index-heading, .index-item-title, .overlay-content h2) { font-weight: inherit; }
/* Japanese glyphs need a taller line box than the narrow Latin display face. */
html[lang="ja"] .index-heading {
  font-size: min(4.8em, 8vw);
  line-height: 1.25;
  padding: .1em .025em;
  letter-spacing: 0;
  overflow: visible;
}
html[lang="ja"] :is(.bio-text, .index-item-details, .overlay-text, .form-privacy-note) {
  line-height: 1.6;
  line-break: strict;
  overflow-wrap: anywhere;
  overflow: visible;
}
html[lang="ja"] :is(.index-item-title, .text-link, .input-field, .message-field, .form-status, .time-wrap, .site-footer > *, .overlay-content h2) { line-height: 1.6; }
html[lang="ja"] :is(.input-field, .message-field) { padding-block: .08em; }
html[lang="ja"] .message-field { min-height: 1.76em; }
html[lang="ja"] .caption-wrap { display: block; line-height: 1.6; }
html[lang="ja"] .caption-wrap .caption-text { display: inline; white-space: normal; overflow-wrap: anywhere; overflow: visible; }