@font-face {
  font-family: "Shippori Mincho";
  src: url("../fonts/ShipporiMincho-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Shippori Mincho";
  src: url("../fonts/ShipporiMincho-Medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Shippori Mincho";
  src: url("../fonts/ShipporiMincho-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --violet: #5c4a82;
  --violet-deep: #282342;
  --paper: #e6e7df;
  --red: #a13d35;
  --gold: #c6b255;
  --line: rgba(229, 231, 222, 0.82);
  --spine-width: 54.4px;
  --spine-rule-half-height: 28.8px;
  --display-font: "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --body-font: var(--display-font);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--violet-deep);
  color: var(--paper);
  font-family: var(--display-font);
}

a { color: inherit; }

a:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 5px;
}

.site-shell { height: 100vh; height: 100dvh; overflow: hidden; }

.site-shell::after {
  position: fixed;
  z-index: 10;
  inset: 0;
  content: "";
  background: url("../images/texture.webp") repeat;
  background-size: 900px auto;
  filter: brightness(1.1) contrast(1.45);
  mix-blend-mode: overlay;
  opacity: 0.7;
  pointer-events: none;
}

.spine {
  --cover-width: min(var(--cover-natural-width), calc(100vw - var(--spine-width) - var(--spine-width)));
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 3;
  display: flex;
  align-items: center;
  flex-direction: column;
  width: var(--spine-width);
  padding: 16px 0 20.8px;
  border-right: 1px solid rgba(236, 226, 178, 0.45);
  background: var(--spine-background);
  box-shadow: 6px 0 18px rgba(24, 20, 40, 0.18);
}

.spine--left {
  --cover-natural-width: 112.994dvh;
  background: transparent;
  color: var(--paper);
  transition: color 200ms ease;
}

.spine-face {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: var(--spine-background);
  transition: background-color 200ms ease;
}

.spine--left:has(.spine-trigger:hover, .spine-cover:hover, .spine-trigger:focus-visible) {
  color: #49363c;
}

.spine:has(.spine-trigger:hover, .spine-cover:hover, .spine-trigger:focus-visible) .spine-face {
  background: var(--spine-cover-background);
}

.spine-links {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 3.2px;
  transition: opacity 150ms ease;
}

.spine-links a { display: grid; place-items: center; width: 27.2px; height: 27.2px; color: var(--paper); }
.spine-links a:hover { color: var(--gold); }
.spine-links svg { display: block; width: 17.6px; height: 17.6px; }

.spine .spine-index {
  position: relative;
  transition: opacity 150ms ease;
}

.spine--left .spine-index { z-index: 2; }

.spine--left:has(.spine-trigger:hover, .spine-cover:hover, .spine-trigger:focus-visible) .spine-links,
.spine:has(.spine-trigger:hover, .spine-cover:hover, .spine-trigger:focus-visible) .spine-index {
  opacity: 0;
  pointer-events: none;
}

.spine--left .spine-title,
.spine--left .spine-rule { z-index: 2; }

.spine-trigger {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.spine-trigger:focus-visible { outline: 3px solid var(--gold); outline-offset: -5px; }

.spine-cover {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 100%;
  width: var(--cover-width);
  height: 100%;
  background: var(--spine-cover-background);
  background-position: center, center;
  background-size: auto 100%, cover;
  background-repeat: no-repeat;
  transform: translateX(calc(-100% - var(--spine-width)));
  visibility: hidden;
  transition: transform 350ms ease, visibility 0s 350ms;
}

.spine--left .spine-cover {
  box-shadow: 12px 0 24px -8px rgba(24, 20, 40, 0.45);
  background-image: url("../images/narcolepsy.jpg"), linear-gradient(90deg, var(--spine-cover-background), var(--spine-cover-background-middle) 50%, var(--spine-cover-background-right));
}

.spine:has(.spine-trigger:hover, .spine-cover:hover, .spine-trigger:focus-visible) .spine-cover {
  transform: translateX(0);
  visibility: visible;
  transition: transform 350ms ease, visibility 0s;
}

.spine--right {
  --cover-natural-width: 99.668dvh;
  inset: 0 0 0 auto;
  z-index: 2;
  border-right: 0;
  border-left: 1px solid rgba(236, 226, 178, 0.45);
  box-shadow: -6px 0 18px rgba(24, 20, 40, 0.18);
  transition: right 350ms ease, box-shadow 350ms ease;
}

.spine--right:has(.spine-trigger:hover, .spine-cover:hover, .spine-trigger:focus-visible) {
  right: var(--cover-width);
  box-shadow: -12px 0 24px -8px rgba(24, 20, 40, 0.45);
}

.spine--right .spine-cover {
  left: 100%;
  right: auto;
  background-image: url("../images/mahou-shoujo-to-katsuji-1.jpg");
  transform: none;
}

.spine--right .spine-trigger { z-index: 4; }
.spine--right .spine-title,
.spine--right .spine-rule,
.spine--right .spine-index { z-index: 3; }
.spine--right::before {
  position: absolute;
  z-index: 2;
  inset: 0 0 0 auto;
  width: calc(100vw - var(--spine-width));
  clip-path: inset(0 0 0 calc(100% - var(--spine-width)));
  transition: opacity 200ms ease;
}

.spine--right:has(.spine-trigger:hover, .spine-cover:hover, .spine-trigger:focus-visible)::before { opacity: 0; }

.spine--right::after {
  position: absolute;
  z-index: 3;
  top: calc(50% + var(--spine-rule-half-height));
  right: 100%;
  bottom: 0;
  width: 16px;
  content: "";
  background: var(--gold);
}

.spine-title {
  position: absolute;
  left: calc(50% + 3.2px);
  font-family: var(--display-font);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 0.05em;
  white-space: nowrap;
  writing-mode: vertical-rl;
  transform: translateX(-50%);
}

.spine-title--upper { bottom: calc(50% + var(--spine-rule-half-height) + 16px); }
.spine-title--lower { top: calc(50% + var(--spine-rule-half-height) + 16px); }
.spine--right .spine-title--upper { left: 50%; }
.spine-rule { position: absolute; top: 50%; left: 50%; width: 4px; height: calc(var(--spine-rule-half-height) + var(--spine-rule-half-height)); background: var(--gold); transform: translate(-50%, -50%); }

.spine-index {
  margin-top: auto;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  white-space: nowrap;
  writing-mode: vertical-rl;
}

.home {
  position: relative;
  z-index: 1;
  container-type: inline-size;
  min-height: 100vh;
  margin-inline: var(--spine-width);
  overflow: visible;
  isolation: isolate;
  background-color: var(--violet);
}

.eyes-art {
  position: absolute;
  z-index: 0;
  inset: 0 calc(0px - var(--spine-width)) 0 0;
  width: calc(100% + var(--spine-width));
  height: 100%;
}

.eyes-art,
.spine--right::before {
  opacity: 0.1;
  filter: grayscale(1);
  mix-blend-mode: multiply;
  pointer-events: none;
}

.eyes-pupils {
  transform: translate(var(--eyes-x, 0px), var(--eyes-y, 0px));
  transition: transform 300ms ease-out;
}

.spine--right::before {
  content: "";
  background: url("../images/eyes-art.webp") center / cover no-repeat;
}

.home-inner {
  position: relative;
  z-index: 1;
  --side-gutter: clamp(45px, 9vw, 172.5px);
  --box-shift: clamp(15px, 3vw, 57.5px);
  --title-box-gap: 28px;
  --masthead-size: clamp(108px, min(13.5vw, 16.667vh), 240px);
  --box-start: calc(var(--masthead-size) * 1.82 - 20px);
  display: grid;
  grid-template-rows: var(--box-start) minmax(0, 1fr) auto;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  max-width: 2550px;
  margin: 0 auto;
  padding: 37.5px var(--side-gutter) 36px;
}

.accent-bar { position: absolute; z-index: 1; left: 0%; width: clamp(80px, 10vw, 170px); background: var(--red); }
.accent-bar-top { --motif-width: 10cqw; top: 0; left: 5%; width: var(--motif-width); height: calc(var(--motif-width) * 2); }
.accent-bar-bottom { bottom: 0; height: 18vh; width: clamp(20px, 10vw, 20px);}
.accent-bar-bottom::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 750%;
  height: 2px;
  content: "";
  background: var(--paper);
}

.masthead { position: relative; z-index: 1; grid-row: 1; margin-left: 32%; transform: translateY(-110px)}
.home--panel .masthead,
.home--article .masthead { transform: translateX(var(--box-shift)); }
.home--panel:not(.home--expanded) .masthead { align-self: end; margin-left: max(0px, calc(30.5cqw - var(--side-gutter))); margin-bottom: var(--title-box-gap); }
.home--panel .masthead h1,
.home--article .masthead h1 { line-height: 1; white-space: normal; overflow-wrap: anywhere; }
.masthead h1 {
  display: flex;
  flex-direction: column;
  margin: 0;
  font-family: var(--display-font);
  font-size: calc(var(--masthead-size) * 0.9);
  font-weight: 500;
  line-height: 0.91;
  letter-spacing: 0.005em;
  white-space: nowrap;
}

.composition {
  grid-row: 2;
  display: grid;
  transform: translateX(var(--box-shift));
  grid-template-columns: minmax(135px, 27%) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: clamp(27px, 3vw, 60px);
  height: 100%;
  min-height: 0;
  padding-bottom: 24px;
}

.home:not(.home--expanded) .composition {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin-left: max(0px, calc(26.9cqw - var(--side-gutter)));
}

.home:not(.home--expanded) { --box-text-inset: 3.6cqw; }

.vertical-note {
  position: absolute;
  display: grid;
  place-items: center;
  top: 100%;
  left: 50%;
  width: 50%;
  min-height: 135%;
  padding-block: calc(var(--motif-width) * 0.2);
  background: var(--paper);
  transform: translateY(-50%);
}

.vertical-note::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 300%;
  height: max(10px, 0.14cqw);
  content: "";
  background: var(--paper);
}

.vertical-note::before {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 500%;
  height: max(1px, 0.14cqw);
  content: "";
  background: var(--paper);
}

.vertical-note span {
  position: relative;
  z-index: 1;
  color: var(--red);
  font-family: var(--display-font);
  font-size: calc(var(--motif-width) * 0.156);
  font-weight: 500;
  letter-spacing: 0.35em;
  text-align: center;
  text-orientation: upright;
  white-space: nowrap;
  writing-mode: vertical-rl;
}

.content-column { grid-column: 2; display: flex; flex-direction: column; align-self: start; height: max-content; min-height: 0; max-height: 100%; max-width: 1275px; overflow: hidden; font-family: var(--body-font); }
.link-list a, .entry-list a { font-family: var(--display-font); font-weight: 500; }
.home:not(.home--expanded) .content-column { grid-column: 1; }
.rule { position: relative; flex: none; height: 2px; background: var(--paper); }
.rule-top::before, .rule-bottom::after { position: absolute; width: 17%; height: 16px; content: ""; background: var(--paper); }
.rule-top::before { left: 0; top: 0; }
.rule-bottom::after { right: 0; bottom: 0; }
.rule-top--nav { height: 40px; background: none; }
.rule-top--nav::before { display: none; }
.rule-top-back {
  --back-line-color: var(--paper);
  position: absolute;
  inset: 0;
  display: block;
  background: linear-gradient(var(--back-line-color), var(--back-line-color)) 8px center / calc(100% - 8px) 2px no-repeat;
}
.rule-top-back::before {
  position: absolute;
  top: calc(50% - 5px);
  left: 2px;
  width: 10px;
  height: 10px;
  border: solid var(--back-line-color);
  border-width: 0 0 2px 2px;
  content: "";
  transform: rotate(45deg);
}
.rule-top-back:hover { --back-line-color: var(--gold); }

.link-list { display: grid; flex: none; gap: 8px; margin: 80px 0; }

.link-list a {
  display: block;
  min-width: 0;
  width: 100%;
  padding: 4.5px 0;
  text-decoration: none;
  transition: color 150ms ease;
}

.link-list a:hover { color: #fff; }
.link-label { display: block; font-size: clamp(50px, min(5.4vw, 5.438vh), 78px); line-height: 1.08; overflow-wrap: anywhere; }

.site-footer {
  grid-row: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: auto;
  margin-inline: clamp(-86.25px, -4.5vw, -22.5px);
  padding: 27px 0 0;
  border-top: 1px solid var(--line);
  font-family: var(--body-font);
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.footer-left { flex: 1; min-width: 0; }
.footer-right { display: flex; flex: none; align-items: center; gap: 6px; min-width: 0; transition: gap 300ms ease; }
.footer-center { display: grid; flex: none; place-items: center; width: 210px; transition: width 300ms ease; }
.footer-center > * { grid-area: 1 / 1; }
.footer-center-link { z-index: 1; white-space: nowrap; text-decoration: none; transition: opacity 180ms ease; }
.footer-center-link:hover { color: var(--gold); }
.footer-banners { display: flex; gap: 2px; width: 100%; overflow: hidden; opacity: 0; transition: opacity 240ms ease; }
.footer-right:hover,
.footer-right:focus-within { gap: 12px; }
.footer-right:hover .footer-center,
.footer-right:focus-within .footer-center { width: max(210px, calc(clamp(150px, 22.875vw, 330px) + 8px)); }
.footer-right:hover .footer-banners,
.footer-banners:focus-within { opacity: 1; }
.footer-right:hover .footer-center-link,
.footer-banners:focus-within + .footer-center-link { opacity: 0; pointer-events: none; }
.footer-banners img { display: block; width: clamp(30px, 4.575vw, 66px); height: auto; }
.footer-arrow { display: grid; flex: none; place-items: center; width: 16px; color: var(--paper); font-size: 18px; text-decoration: none; }
.footer-arrow:hover { color: var(--gold); }

.home--expanded { --box-vertical-gap: 50px; --box-left-gap: 100px; --content-left-inset: 20px; }
.home--projects { --content-left-inset: 40px; }

.home--expanded .home-inner {
  --expanded-box-left: max(0px, calc(17cqw + var(--box-left-gap) - var(--side-gutter)));
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding-top: var(--box-vertical-gap);
}

.home--expanded .masthead { margin: 0 20px var(--title-box-gap) calc(var(--expanded-box-left) + var(--content-left-inset)); }
.home--expanded .masthead h1 { font-size: clamp(54px, min(8.1vw, 9.9vh), 135px); }
.home--article .masthead h1 { font-size: clamp(38px, min(5.4vw, 7.2vh), 90px); }

.home--expanded .composition {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin-left: var(--expanded-box-left);
  padding-bottom: var(--box-vertical-gap);
}

.home--expanded .content-column {
  grid-column: 1;
  height: 100%;
  max-width: none;
}

.home--expanded .panel-content,
.home--expanded .article-content { flex: 1; padding-left: var(--content-left-inset); padding-right: 20px; }

.home--expanded .prose,
.home--expanded .entry-list { max-width: none; }

.panel-content,
.article-content {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.home--panel:not(.home--expanded) .panel-content { padding-top: 16px; }
.home:not(.home--expanded) .link-list,
.home:not(.home--expanded) .panel-content { padding-left: var(--box-text-inset); }
.prose { --heading-base: clamp(18px, 1.35vw, 22px); max-width: 72ch; font-size: 17.5px; font-weight: 400; line-height: 1.8; }
.prose p, .prose ul, .prose ol { margin: 0 0 1.2em; }
.prose > p + p { margin-top: 1.8em; }
.prose :is(h1, h2, h3, h4, h5, h6) { font-family: var(--body-font); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.prose h1 { margin: 1.5em 0 0.5em; font-size: calc(var(--heading-base) * 1.9 - 0.5px); line-height: 1.1; }
.prose h2 { margin: 1.5em 0 0.5em; font-size: calc(var(--heading-base) * 1.55 - 0.5px); }
.prose h3 { margin: 1.4em 0 0.45em; font-size: calc(var(--heading-base) * 1.15 - 0.5px); }
.prose h4 { margin: 1.3em 0 0.4em; font-size: calc(var(--heading-base) * 1.05 - 0.5px); }
.prose h5 { margin: 1.2em 0 0.35em; font-size: calc(var(--heading-base) * 0.95 - 0.5px); }
.prose h6 { margin: 1.2em 0 0.35em; color: var(--gold); font-size: calc(var(--heading-base) * 0.85 - 0.5px); letter-spacing: 0.04em; text-transform: uppercase; }
.prose > :is(h1, h2, h3, h4, h5, h6):first-child { margin-top: 0; }
.prose a { text-decoration-color: var(--gold); text-underline-offset: 0.15em; }
.prose h3 a { color: var(--gold); text-decoration: none; }
.prose img { display: block; max-width: 100%; height: auto; }
.prose pre { max-width: 100%; overflow-x: auto; padding: 1em; background: rgba(28, 22, 50, 0.75); font-size: 17.5px; line-height: 1.5; }
.prose code, .prose pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }
.prose code { overflow-wrap: anywhere; }
.prose blockquote { margin: 1.5em 0; padding-left: 1em; border-left: 3px solid var(--gold); }

.creative-project { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 20px; margin: 1.5em 0; }
.creative-project img { width: 120px; height: 150px; object-fit: cover; }
.creative-project h3 { margin: 0 0 0.45em; }
.creative-project p { margin-bottom: 0; }

.entry-list { display: grid; gap: 0; max-width: 900px; }
.entry-list a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 0;
  font-size: clamp(25px, 2.34vw, 38px);
  text-decoration: none;
}
.entry-list a:first-child { padding-top: 0; }
.entry-list a + a { border-top: 1px solid var(--line); }
.entry-list a:last-child { border-bottom: 1px solid var(--line); }
.entry-list a:hover { color: var(--gold); }
.entry-list time { font-size: 16px; }
.empty-note { font-size: 16px; }

@media (max-width: 760px) {
  .spine { position: relative; inset: auto; flex-direction: row; width: auto; height: 52px; padding: 0 20px; border-right: 0; border-bottom: 1px solid rgba(236, 226, 178, 0.45); }
  .spine-cover { top: 100%; left: 0; width: 100vw; height: 88.5vw; background-size: 100% 100%, cover; transform: translateY(calc(-100% - 52px)); }
  .spine--left:has(.spine-trigger:hover, .spine-cover:hover, .spine-trigger:focus) .spine-cover { transform: translateY(0); visibility: visible; transition: transform 350ms ease, visibility 0s; }
  .spine--right { display: none; }
  .spine-links { flex-direction: row; gap: 0; }
  .spine-links a { width: 28px; height: 34px; }
  .spine-links svg { width: 22px; height: 22px; }
  .spine-title { position: static; font-size: clamp(15px, 3vw, 24.5px); writing-mode: initial; transform: none; }
  .spine-rule { position: static; flex: none; width: clamp(20px, 5vw, 40px); height: 3px; margin: 0 8px; transform: none; }
  .spine-index { display: none; }
  .home { min-height: calc(100dvh - 52px); margin-inline: 0; }
  .eyes-art { right: 0; width: 100%; }
  .home-inner { --side-gutter: 36px; --box-shift: 12px; --masthead-size: clamp(81px, 16.5vw, 124.5px); --box-start: calc(var(--masthead-size) * 1.82 + 128px); height: calc(100dvh - 52px); padding: 45px var(--side-gutter) 36px; }
  .site-footer { margin-inline: -18px; }
  .accent-bar { left: 0; width: 50px; }
  .accent-bar-top { --motif-width: clamp(40px, 12cqw, 50px); width: var(--motif-width); height: calc(var(--motif-width) * 4.4); }
  .accent-bar-bottom { height: 130px; }
  .masthead { margin-left: 4%; }
  .home--expanded .masthead h1 { font-size: clamp(43px, 10.8vw, 65px); }
  .home--article .masthead h1 { font-size: clamp(32px, 7.2vw, 50px); }
  .composition { grid-template-columns: 56px minmax(0, 1fr); gap: 27px; }
  .home:not(.home--expanded) .composition { margin-left: calc(clamp(70px, 21cqw, 87.5px) - var(--side-gutter)); }
  .home:not(.home--expanded) { --box-text-inset: clamp(12px, 3.6cqw, 15px); }
  .home--panel:not(.home--expanded) .masthead { margin-left: calc(clamp(82px, 24.6cqw, 102.5px) - var(--side-gutter)); }
  .home--expanded .home-inner { --expanded-box-left: calc(clamp(40px, 12cqw, 50px) + var(--box-left-gap) - var(--side-gutter)); }
  .vertical-note { min-height: 150%; }
  .vertical-note span { font-size: 20px; }
  .link-list { margin-block: 48px; }
  .entry-list a { flex-direction: column; gap: 4px; }
}

@media (max-width: 480px) {
  .creative-project { grid-template-columns: 88px minmax(0, 1fr); gap: 14px; }
  .creative-project img { width: 88px; height: 110px; }
  .home-inner { --masthead-size: clamp(63px, 16.5vw, 79.5px); }
  .composition { grid-template-columns: 36px minmax(0, 1fr); gap: 18px; }
  .vertical-note span { font-size: 16px; }
  .link-label { font-size: 53px; }
  .site-footer { align-items: stretch; flex-direction: column; }
  .footer-right { flex: none; align-self: flex-end; width: 100%; }
}

@media (max-height: 800px) and (min-width: 761px) {
  .link-list { margin-block: 22px; }
  .link-label { font-size: clamp(36px, 5.4vh, 43px); }
}

@media (hover: none) {
  .footer-right { gap: 12px; }
  .footer-center { width: max(210px, calc(clamp(150px, 22.875vw, 330px) + 8px)); }
  .footer-banners { opacity: 1; }
  .footer-center-link { visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .eyes-pupils { transform: none; transition: none; }
  .link-list a { transition: none; }
  .footer-right, .footer-center, .footer-banners, .footer-center-link { transition: none; }
}