/* Hallmark · pre-emit critique: P5 H4 E4 S5 R5 V4
 * Editorial / restrained · reference: user screenshot · three aligned text columns.
 * Existing Helvetica and page routes retained; source-image colors estimated. */
:root {
  --col-gutter: 3px;
  --col-gutter-2: calc(var(--col-gutter) * 2);
  --main-col-width: 33.33vw;
  --main-col-ratio: 1.25;
  --main-col-height: calc(var(--main-col-width) * var(--main-col-ratio));
  --bck-color: #fff;
  --txt-color: #0b0b0b;
  --muted-color: #9b9b9b;
  --font-weight-base: 600;
  --ease: cubic-bezier(0, .95, .44, 1);
}
@media (max-width: 666.98px) {
  :root { --col-gutter: 4px; --main-col-width: 100vw; --main-col-ratio: 1.3; }
}

@font-face {
  font-family: 'Helvetica Now Text';
  src: url('font/HelveticaNowText-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Helvetica Now Text';
  src: url('font/HelveticaNowText-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Helvetica Now Text';
  src: url('font/HelveticaNowText-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Helvetica Now Text', Helvetica, Arial, sans-serif;
  font-weight: var(--font-weight-base);
  color: var(--txt-color);
  background: var(--bck-color);
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}

body {
  font-size: 12px;
}

h1, h2, h3, h4, h5, h6, p {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

button, input, select, textarea, summary { font: inherit; }
b, strong { font-weight: inherit; }

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

img { max-width: 100%; }

/* 固定ヘッダー: 画面全高に固定した1つのコンテナに2行を配置。上段 = Info / Based in Tokyo、中段(50lvh) = ロゴ / Mail */
.site-header {
  position: fixed;
  inset: 0;
  height: 100lvh;
  z-index: 100;
  pointer-events: none;
}
.header-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: var(--col-gutter-2) var(--col-gutter);
}
.header-row > * {
  margin: 0;
  padding: 0 var(--col-gutter);
  justify-self: start;
}
.header-row a {
  pointer-events: auto;
}
/* Keep the anchor as the pointer target while SplitText replaces its inner lines. */
.header-row a[data-reveal] * { pointer-events: none; }
.header-col-2 { grid-column: 2; }
.header-col-3 { grid-column: 3; }
.header-row--mid {
  position: absolute;
  top: calc(50vh - 14px);
  left: 0;
  width: 100%;
  padding-top: 0;
  padding-bottom: 0;
}
@media (max-width: 666.98px), (max-width: 950px) and (pointer: coarse) {
  .header-row { grid-template-columns: repeat(2, 1fr); }
  .only-desktop { display: none; }
}
.menu-link { transition: opacity 0.2s ease; }
.menu-link:hover {
  opacity: 0.5;
}

/* Top's 12-track grid is the layout source for both pages. */
.thumbs, .info-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  padding: 0 var(--col-gutter);
}
.info-page body { min-height: 100svh; }
.info-main {
  padding: calc(50vh + 160px) 0 80px;
  line-height: 1.4;
  font-weight: inherit;
}
.info-column { grid-row: 1; grid-column: span 2; min-width: 0; padding-inline: var(--col-gutter); display: flex; flex-direction: column; gap: 200px; overflow-wrap: anywhere; }
.info-column--details { grid-column: 9 / span 2; }
.info-column--further { grid-column: 5 / span 2; }
.info-section { min-width: 0; }
.info-awards { list-style: none; margin: 0; padding: 0; }
.info-awards li { display: grid; grid-template-columns: 2ch minmax(0, 1fr); column-gap: 0.3em; }
.info-heading { margin: 0 0 112px; color: var(--muted-color); font: inherit; }
.info-section p + p { margin-top: 20px; }
.info-section .info-contact { margin-top: 72px; }
.info-contact a { text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.header-period { grid-column: 3; grid-row: 1; justify-self: start; white-space: nowrap; }
.header-row:not(.header-row--mid) .menu-link { grid-column: 3; grid-row: 1; justify-self: end; }
.header-clock { grid-column: 2; grid-row: 1; justify-self: start; white-space: nowrap; font-variant-numeric: proportional-nums; }
[data-page-host] { min-height: 100svh; }
[data-page-host] main:focus { outline: none; }
html.is-navigating { cursor: progress; }
@media (max-width: 666.98px), (max-width: 950px) and (pointer: coarse) {
  .header-row:not(.header-row--mid) { grid-template-columns: minmax(0, 1fr) auto; }
  .header-row:not(.header-row--mid) .menu-link { grid-column: 2; }
  .header-clock { grid-column: 1; }
  .site-header { height: auto; bottom: auto; }
  .header-row--mid { position: static; padding-bottom: var(--col-gutter-2); }
  .header-row--mid .logo { grid-column: 1 / -1; }
  .info-grid { --info-section-gap: 64px; row-gap: var(--info-section-gap); }
  .info-column { grid-row: auto; grid-column: span 12; gap: var(--info-section-gap); }
  .info-heading { margin-bottom: 24px; }
  .info-section .info-contact { margin-top: 40px; }
}
.logo {
  line-height: 1.15;
  white-space: nowrap;
}

#smooth-content { display: flow-root; }

html, body { overflow-x: clip; }

/* カタログセクション */
.catalogue {
  position: relative;
  margin-top: 50vh;
  padding-bottom: var(--col-gutter-2);
}

/* サムネグリッド: 実績を12カラム上に隣接配置。大小(.span-1/.span-2)はHTMLで固定指定し、リロードでも維持。
   12カラム表示(1440px以上)が基準サイズ。667〜1439pxは2倍、666px以下は4倍の幅で表示。 */
.thumbs {
  --thumb-span-unit: 2;
  row-gap: 120px;
}
.thumb { align-self: start; }
.thumb.span-1 { grid-column: span 2; }
.thumb.span-2 { grid-column: span 4; }
@media (min-width: 1440px) {
  .thumbs { --thumb-span-unit: 1; }
  .thumb.span-1 { grid-column: span 1; }
  .thumb.span-2 { grid-column: span 2; }
}
@media (max-width: 666.98px) {
  .thumbs { --thumb-span-unit: 4; }
  .thumb.span-1 { grid-column: span 4; }
  .thumb.span-2 { grid-column: span 8; }
}

.thumb .cell {
  padding: var(--col-gutter-2) var(--col-gutter) 0;
}
.img-holder {
  overflow: hidden;
}

.img-holder img, .img-holder video {
  width: 100%;
  height: auto;
  display: block;
  opacity: 1;
  transition: opacity 0.3s var(--ease);
}

.thumb-info {
  padding: var(--col-gutter) 0 0;
}

.thumb.active {
  cursor: zoom-in;
}

/* Motion-path image gallery */
.modal { position: fixed; inset: 0; z-index: 1300; overflow: hidden; cursor: zoom-out; overscroll-behavior: none; }
.modal-bg { z-index: 0; position: absolute; inset: 0; background: var(--bck-color); }
.modal-stage { z-index: 1; isolation: isolate; position: absolute; top: calc(max(26px, (100% - 110px) / 4 - 200px) + var(--modal-image-y, 0px)); left: var(--modal-image-x, 0px); right: calc(-1 * var(--modal-image-x, 0px)); height: calc((100% - 110px) / 2 * var(--modal-image-scale, 1)); overflow-x: auto; overflow-y: hidden; overscroll-behavior: contain; touch-action: pan-x; scrollbar-width: none; }
.modal-stage::-webkit-scrollbar { display: none; }
.modal-track { display: flex; flex-direction: row; overflow: clip; }
.modal-slide { flex: 0 0 auto; display: grid; place-items: center; min-width: 0; overflow: clip; }
.modal-image { grid-area: 1 / 1; display: block; max-width: 100%; max-height: 100%; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; }
.modal-transition-image { position: absolute; top: 0; left: 0; display: block; max-width: none; object-fit: fill; pointer-events: none; transform-origin: 0 0; will-change: transform, width, height; }
.modal-thumbnails { z-index: 2; isolation: isolate; position: absolute; inset: 0; pointer-events: none; }
.modal-thumbnail { position: absolute; top: 0; left: 0; padding: 0; border: 0; background: transparent; cursor: pointer; pointer-events: auto; transform-origin: 0 0; }
.modal-thumbnail img, .modal-thumbnail video { display: block; width: 100%; height: 100%; }
.modal-no { position: absolute; bottom: 8px; left: 6px; pointer-events: none; overflow: clip; }
.modal-no > span { display: inline-block; }
.modal-close { position: absolute; top: 6px; left: 6px; padding: 0; color: inherit; font: inherit; line-height: 1.15; border: 0; background: transparent; cursor: pointer; }
.modal-nav { position: absolute; top: 40px; bottom: 110px; width: 8%; padding: 0; border: 0; background: transparent; }
.modal-nav--prev { left: 0; cursor: w-resize; }
.modal-nav--next { right: 6px; cursor: e-resize; }
.modal-nav:disabled { pointer-events: none; }
.modal button:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
body.modal-open:not(.modal-closing) { overflow: hidden; }
.modal[data-state="closing"], .modal[data-state="closing"] * { pointer-events: none; }
body.modal-open .thumb .img-holder { visibility: hidden; }
@media (max-width: 666.98px) {
  .modal-stage { top: calc(max(36px, env(safe-area-inset-top)) + var(--modal-image-y, 0px)); height: calc(min(52%, 100vw, 100% - 210px) * var(--modal-image-scale, 1)); }
  .modal-image { max-height: 100%; }
  .modal-nav { bottom: 72px; }
}

.visitor-context { display: inline; margin-top: 0; line-height: inherit; white-space: nowrap; text-align: left; text-transform: uppercase; }

.header-clock { overflow: hidden; }
.header-clock-line { display: inline-block; vertical-align: top; }

/* Persistent navigation labels slide within their own mask. */
.menu-link { display: inline-grid; overflow: hidden; vertical-align: top; }
.menu-label { grid-area: 1 / 1; justify-self: end; pointer-events: none; }



.modal-ring { position: absolute; inset: 0; pointer-events: none; }

.modal-nav, .modal-close, .modal-no { z-index: 3; }

.lite-site .menu-link[aria-label="Works"] [data-menu-label="Info"],
.lite-site .menu-link[aria-label="Info"] [data-menu-label="Works"] { display: none; }
.lite-site .thumb .img-holder img { transition: none; }

.lite-site .catalogue { margin-top: 72px; }
.lite-site .thumbs {
  grid-template-columns: minmax(0, 1fr);
  row-gap: 48px;
}
.lite-site .thumbs .thumb { grid-column: 1; }