/* ============================================================
   ITOPAN — the index
   ------------------------------------------------------------
   The works are dark water. So is the page. Sumi black ground,
   one vermilion seal, mincho for anything that matters, and the
   artwork allowed to fill the screen instead of floating on it.
   ============================================================ */

:root {
  --ink:    #06070a;
  --ink-2:  #0c0e13;
  --white:  #f2f0ea;
  --grey:   #8b9099;
  --grey-2: #5f646d;
  --shu:    #e2513c;
  --rule:   rgba(242, 240, 234, 0.13);
  --mincho: "Hiragino Mincho ProN", "HiraMinProN-W3", "Yu Mincho", "YuMincho",
            "Noto Serif JP", "Songti SC", Georgia, "Times New Roman", serif;
  --gothic: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic",
            "Noto Sans JP", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--white);
  font-family: var(--mincho);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* the water behind everything */
#bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }

/* a little tooth, so the black is not flat */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0.05;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.page { position: relative; z-index: 2; }
a { color: inherit; text-decoration: none; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 40px; }

/* ---------- language ---------- */

.lang-bar {
  position: fixed; top: 30px; right: 40px; z-index: 20;
  display: flex; align-items: center;
  font-family: var(--gothic); font-size: 11px; letter-spacing: 0.08em;
}
.lang-bar .lang {
  appearance: none; border: 0; background: none; font: inherit;
  color: var(--grey-2); padding: 4px 11px; cursor: pointer;
  border-right: 1px solid var(--rule); transition: color 0.3s;
}
.lang-bar .lang:last-child { border-right: 0; padding-right: 0; }
.lang-bar .lang:hover { color: var(--white); }
.lang-bar .lang.on { color: var(--shu); }

/* ---------- the opening ---------- */

.hero {
  position: relative;
  min-height: 96vh; min-height: 96svh;
  display: flex; flex-direction: column; justify-content: center;
  padding-top: 40px;
}

.seal-row { display: flex; align-items: center; gap: 26px; }
.seal { width: 62px; height: 62px; flex: 0 0 auto; display: block; }

.name {
  margin: 0;
  font-size: clamp(46px, 9.5vw, 108px);
  font-weight: 400; line-height: 0.94;
  letter-spacing: 0.2em; text-indent: 0.2em;
}

.kana {
  margin: 20px 0 0 88px;
  font-size: 12px; letter-spacing: 0.62em; text-indent: 0.62em;
  color: var(--grey-2);
}

.tagline {
  margin: 58px 0 0;
  font-size: clamp(22px, 3.4vw, 38px);
  line-height: 1.75; letter-spacing: 0.05em;
  max-width: 16em;
}

.tagline-sub {
  margin: 26px 0 0;
  font-family: var(--gothic);
  font-size: 13px; line-height: 2.2; color: var(--grey);
  max-width: 30em;
}

/* the line standing on its side, out at the edge */
.vertical {
  position: absolute; top: 50%; right: -4px; transform: translateY(-50%);
  writing-mode: vertical-rl; white-space: nowrap;
  font-size: 14px; letter-spacing: 0.5em;
  color: var(--grey-2);
}

/* on a very tall screen the opening should not stretch forever */
@media (min-height: 1100px) { .hero { min-height: 860px; } }

.scroll-cue {
  position: absolute; left: 0; bottom: 46px;
  font-family: var(--gothic); font-size: 10px;
  letter-spacing: 0.4em; color: var(--grey-2);
  display: flex; align-items: center; gap: 14px;
}
.scroll-cue::after {
  content: ''; width: 56px; height: 1px; background: var(--rule);
  animation: cue 2.6s ease-in-out infinite;
}
@keyframes cue { 0%,100% { width: 34px; opacity: .5 } 50% { width: 70px; opacity: 1 } }

/* ---------- the works ---------- */

.works { padding: 20px 0 0; }

.work {
  display: block;
  margin-bottom: 130px;
  position: relative;
}

.frame {
  position: relative;
  aspect-ratio: 20 / 9;
  overflow: hidden;
  background: #04060a;
  border: 1px solid var(--rule);
}
.frame svg {
  display: block; width: 100%; height: 100%;
  transform: scale(1.02);
  transition: transform 1.1s cubic-bezier(0.16, 0.8, 0.2, 1), filter 0.8s;
  filter: saturate(0.92) brightness(0.9);
}
.work.live:hover .frame svg { transform: scale(1.07); filter: saturate(1.05) brightness(1.05); }

.frame::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(4, 6, 10, 0.95) 0%, rgba(4, 6, 10, 0.25) 34%, transparent 62%);
}

.frame-text {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0 42px 34px;
  z-index: 2;
}

.badge {
  display: inline-block;
  font-family: var(--gothic);
  font-size: 9.5px; letter-spacing: 0.3em;
  color: var(--shu);
  margin-bottom: 16px;
}
.work.wip .badge { color: var(--grey-2); }

.work-title {
  margin: 0;
  font-size: clamp(30px, 4.6vw, 54px);
  font-weight: 400; line-height: 1.14; letter-spacing: 0.06em;
}

.work-en {
  margin: 12px 0 0;
  font-family: var(--gothic);
  font-size: 10px; letter-spacing: 0.42em; color: var(--grey);
}

.work-body {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 48px;
  padding: 28px 42px 0;
}

.work-note {
  margin: 0;
  font-family: var(--gothic);
  font-size: 13.5px; line-height: 2.25; color: var(--grey);
}

.work-side { padding-top: 4px; }

.tags {
  font-family: var(--gothic);
  font-size: 10.5px; line-height: 2.3; letter-spacing: 0.1em; color: var(--grey-2);
}
.tags span { display: block; }

.enter {
  margin: 26px 0 0;
  font-family: var(--gothic);
  font-size: 12px; letter-spacing: 0.2em; color: var(--shu);
  display: inline-flex; align-items: center; gap: 12px;
}
.enter i { display: block; width: 30px; height: 1px; background: var(--shu); transition: width 0.5s cubic-bezier(0.16,0.8,0.2,1); }
.work.live:hover .enter i { width: 62px; }

.work.wip { opacity: 0.4; }
.work.wip .frame { aspect-ratio: 20 / 6; }

/* ---------- foot ---------- */

.foot {
  border-top: 1px solid var(--rule);
  padding: 30px 0 90px;
  font-family: var(--gothic);
  font-size: 11px; letter-spacing: 0.1em; color: var(--grey-2);
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.foot a { transition: color 0.3s; }
.foot a:hover { color: var(--shu); }

@media (max-width: 900px) {
  .wrap { padding: 0 22px; }
  .lang-bar { top: 18px; right: 20px; }
  .hero { min-height: 88vh; min-height: 88svh; }
  .seal-row { gap: 18px; }
  .seal { width: 46px; height: 46px; }
  .kana { margin-left: 64px; }
  .vertical { display: none; }
  .tagline { margin-top: 42px; }
  .work { margin-bottom: 84px; }
  .frame { aspect-ratio: 4 / 3; }
  .work.wip .frame { aspect-ratio: 16 / 7; }
  .frame-text { padding: 0 22px 24px; }
  .work-body { grid-template-columns: 1fr; gap: 22px; padding: 22px 22px 0; }
  .tags span { display: inline; }
  .tags span::after { content: " ・ "; }
  .tags span:last-child::after { content: ""; }
}