/* Portfolio Index / editorial gallery redesign, Nov 2026.
   Scoped to this page so portfolio work details, admin screens and shop stay unchanged. */
body.portfolio-index {
  background: #0d0f13;
  color: #f2edf6;
}
body.portfolio-index main { overflow: clip; }
body.portfolio-index .portfolio-index-hero {
  position: relative;
  padding: 43px 28px 39px;
  border-top: 0;
  border-bottom: 1px solid rgba(190, 170, 206, .18);
  background:
    radial-gradient(ellipse 56% 120% at 96% -7%, rgba(126, 86, 161, .12), transparent 75%),
    linear-gradient(120deg, #13131a, #17151e 72%, #1b1622);
}
body.portfolio-index .portfolio-index-hero::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(184, 145, 206, .31) 38%, transparent);
}
body.portfolio-index .portfolio-index-hero-inner {
  width: min(1432px, 100%);
  margin-inline: auto;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 26px;
}
body.portfolio-index .portfolio-index-hero-copy { max-width: 700px; }
body.portfolio-index .portfolio-index-overline {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  color: #bca0d3;
  font-size: 10px;
  letter-spacing: .23em;
  font-weight: 650;
}
body.portfolio-index .portfolio-index-overline-mark {
  display: inline-block;
  width: 21px;
  height: 1px;
  background: #bc9bdb;
}
body.portfolio-index .portfolio-index-overline-slash { color: #745c86; }
body.portfolio-index .portfolio-index-hero h1 {
  margin: 0 0 10px;
  font-size: clamp(36px, 4.5vw, 58px);
  line-height: 1.14;
  font-weight: 720 !important;
  color: #f6f1fa;
  letter-spacing: -.04em;
}
body.portfolio-index .portfolio-index-lead {
  margin: 0;
  color: #b9b0c3;
  font-size: clamp(13px, 1.05vw, 15px);
  line-height: 1.8;
  font-weight: 400;
}
body.portfolio-index .portfolio-index-hero-meta {
  display: flex;
  flex-direction: column;
  align-items: end;
  gap: 7px;
  min-width: 195px;
  color: #94879f;
  text-align: right;
  white-space: nowrap;
}
body.portfolio-index .portfolio-index-hero-meta > span {
  font-size: 10px;
  letter-spacing: .18em;
}
body.portfolio-index .portfolio-index-hero-meta strong {
  display: block;
  font-size: 25px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: #c5b1d3;
  letter-spacing: .1em;
}
body.portfolio-index .portfolio-index-hero-meta strong span { color: #695479; }
body.portfolio-index .portfolio-index-collections {
  width: min(1480px, calc(100% - 56px));
  margin: 0 auto;
  padding: 42px 0 85px;
}
body.portfolio-index .portfolio-index-collections-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 21px;
}
body.portfolio-index .portfolio-index-section-overline {
  margin: 0 0 7px;
  font-size: 10px;
  font-weight: 650;
  color: #bd9ace;
  letter-spacing: .18em;
}
body.portfolio-index .portfolio-index-collections-header h2 {
  margin: 0;
  font-size: clamp(21px, 2.15vw, 29px);
  font-weight: 650 !important;
  line-height: 1.28;
  letter-spacing: -.02em;
  color: #eee8f4;
}
body.portfolio-index .portfolio-index-collections-count {
  margin: 0 0 3px;
  font-size: 12px;
  color: #93889f;
  letter-spacing: .025em;
}
body.portfolio-index .portfolio-index-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 17px;
}
body.portfolio-index .portfolio-index-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  border: 1px solid rgba(172, 158, 185, .22);
  border-radius: 13px;
  background: #18191f;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
  text-decoration: none;
  color: #f4eef8;
  isolation: isolate;
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
body.portfolio-index .portfolio-index-tile:hover {
  border-color: rgba(199, 170, 222, .62);
  box-shadow: 0 17px 38px rgba(0,0,0,.23);
  transform: translateY(-4px);
  color: #fff;
}
body.portfolio-index .portfolio-index-tile:focus-visible {
  outline: 2px solid #e8c6ff;
  outline-offset: 4px;
}
body.portfolio-index .portfolio-index-tile--wide { grid-column: span 5; }
body.portfolio-index .portfolio-index-tile--medium { grid-column: span 4; }
body.portfolio-index .portfolio-index-tile--narrow { grid-column: span 3; }
body.portfolio-index .portfolio-index-tile--quarter { grid-column: span 3; }
body.portfolio-index .portfolio-index-tile--full { grid-column: span 12; }
body.portfolio-index .portfolio-index-tile-art {
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  height: 225px;
  isolation: isolate;
  background: #21202a;
}
body.portfolio-index .portfolio-index-tile--wide .portfolio-index-tile-art,
body.portfolio-index .portfolio-index-tile--medium .portfolio-index-tile-art,
body.portfolio-index .portfolio-index-tile--narrow .portfolio-index-tile-art {
  height: clamp(238px, 21.6vw, 315px);
}
body.portfolio-index .portfolio-index-tile-art > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s cubic-bezier(.2,.7,.3,1);
}
body.portfolio-index .portfolio-index-tile:hover .portfolio-index-tile-art > img {
  transform: scale(1.045);
}
body.portfolio-index .portfolio-index-tile-art::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(12,10,19,.19) 0%, transparent 43%, rgba(12,10,19,.22) 100%);
  pointer-events: none;
}
body.portfolio-index .portfolio-index-art-id {
  position: absolute;
  top: 14px;
  left: 15px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid rgba(238, 223, 248, .24);
  border-radius: 6px;
  color: #f4eaf9;
  background: rgba(18, 16, 24, .65);
  backdrop-filter: blur(6px);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .09em;
}
body.portfolio-index .portfolio-index-tile-art--illustration {
  background: #222332;
}
body.portfolio-index .portfolio-index-tile-art--illustration img {
  object-position: center 38%;
  filter: saturate(.83) brightness(.88);
}
body.portfolio-index .portfolio-index-tile-art--manga {
  background: #29222d;
}
body.portfolio-index .portfolio-index-tile-art--manga img {
  object-position: center 29%;
  filter: saturate(.78) brightness(.83);
}
body.portfolio-index .portfolio-index-tile-art--cosplay {
  background: #1b2533;
}
body.portfolio-index .portfolio-index-tile-art--cosplay img {
  object-position: center 29%;
  filter: saturate(.82) brightness(.82);
}
body.portfolio-index .portfolio-index-tile-art--object {
  display: grid;
  place-items: center;
  padding: 22px;
  background:
    linear-gradient(rgba(208,178,225,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(208,178,225,.06) 1px, transparent 1px),
    #292b32;
  background-size: 30px 30px, 30px 30px, auto;
}
body.portfolio-index .portfolio-index-tile-art--object > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  border: 1px solid rgba(215, 209, 224, .23);
  background: #777f8d;
  filter: saturate(.7) brightness(.76);
  box-shadow: 0 10px 25px rgba(0,0,0,.14);
}
body.portfolio-index .portfolio-index-tile--3d:hover .portfolio-index-tile-art > img {
  transform: scale(1.02);
}
body.portfolio-index .portfolio-index-tile-art--live2d {
  display: grid;
  place-items: center;
  padding: 16px 27px 0;
  background: radial-gradient(ellipse at 50% 62%, #59505f 0%, #34303e 46%, #24232c 100%);
}
body.portfolio-index .portfolio-index-tile-art--live2d > img {
  width: min(100%, 240px);
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter: saturate(.76) brightness(.82);
}
body.portfolio-index .portfolio-index-tile--live2d:hover .portfolio-index-tile-art > img {
  transform: scale(1.035);
}
body.portfolio-index .portfolio-index-tile-art--cover {
  display: grid;
  place-items: center;
  background:
    linear-gradient(140deg, #201c2b 5%, #352e40 65%, #171823 100%);
}
body.portfolio-index .portfolio-index-tile-art--cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 45px, rgba(222,203,231,.035) 45px 46px);
}
body.portfolio-index .portfolio-index-cover-paper {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: min(63%, 190px);
  aspect-ratio: .69;
  max-height: calc(100% - 30px);
  padding: 17px 15px;
  border: 1px solid rgba(244,230,239,.95);
  background: #dbd3db;
  box-shadow: 15px 13px 0 rgba(15, 13, 22, .21), 0 16px 35px rgba(0,0,0,.3);
  color: #332c3b;
  transform: rotate(-6deg);
  transition: transform .35s ease;
}
body.portfolio-index .portfolio-index-tile:hover .portfolio-index-cover-paper {
  transform: rotate(-2deg) translateY(-2px);
}
body.portfolio-index .portfolio-index-cover-paper > span {
  font-size: 8px;
  letter-spacing: .11em;
  font-weight: 800;
}
body.portfolio-index .portfolio-index-cover-paper strong {
  font-family: Georgia, serif !important;
  font-size: clamp(27px, 2.9vw, 48px);
  font-weight: 400;
  line-height: .9;
  letter-spacing: -.065em;
}
body.portfolio-index .portfolio-index-cover-period { color: #986bb5; }
body.portfolio-index .portfolio-index-cover-line {
  position: absolute;
  left: 15px;
  bottom: 46px;
  width: calc(100% - 30px);
  height: 1px;
  background: #a8a0ae;
}
body.portfolio-index .portfolio-index-tile-art--concept {
  display: grid;
  place-items: center;
  padding: 18px;
  background: radial-gradient(circle at 80% 20%, #34253e 0%, #1c1b24 68%);
}
body.portfolio-index .portfolio-index-concept-panel {
  position: relative;
  width: 79%;
  height: 83%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px 20px 17px;
  background: linear-gradient(135deg, #313143, #282734);
  border: 1px solid rgba(218,198,227,.34);
  box-shadow: 11px 10px 0 rgba(5,7,12,.22);
  color: #e9dfed;
  transform: rotate(4deg);
  transition: transform .35s ease;
}
body.portfolio-index .portfolio-index-tile:hover .portfolio-index-concept-panel {
  transform: rotate(1deg);
}
body.portfolio-index .portfolio-index-concept-caption,
body.portfolio-index .portfolio-index-concept-footer {
  font-size: 8px;
  letter-spacing: .13em;
  color: #d4c3e3;
}
body.portfolio-index .portfolio-index-concept-panel strong {
  font-size: clamp(22px, 2vw, 31px);
  line-height: 1.02;
  letter-spacing: -.01em;
  font-weight: 600;
}
body.portfolio-index .portfolio-index-concept-lines {
  display: flex;
  gap: 5px;
  height: 25px;
  align-items: center;
}
body.portfolio-index .portfolio-index-concept-lines i {
  display: block;
  height: 1px;
  background: rgba(222,206,238,.5);
  flex: 1;
}
body.portfolio-index .portfolio-index-concept-lines i:nth-child(2) { flex: .35; }
body.portfolio-index .portfolio-index-concept-lines i:nth-child(3) { flex: .2; }
body.portfolio-index .portfolio-index-tile-info {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 12px;
  flex: 1;
  min-height: 123px;
  padding: 17px 19px 19px;
  border-top: 1px solid rgba(203,189,216,.12);
  background: linear-gradient(150deg, #191a20, #17181d);
}
body.portfolio-index .portfolio-index-tile-copy { min-width: 0; }
body.portfolio-index .portfolio-index-tile-number {
  display: block;
  margin: 0 0 7px;
  color: #a78cbb;
  font-size: 9px;
  font-weight: 660;
  letter-spacing: .16em;
}
body.portfolio-index .portfolio-index-tile-number span { color: #5b5365; }
body.portfolio-index .portfolio-index-tile-info h3 {
  margin: 0 0 6px;
  font-size: clamp(19px, 1.75vw, 25px);
  font-weight: 660 !important;
  line-height: 1.25;
  letter-spacing: -.015em;
  color: #f0e9f6;
}
body.portfolio-index .portfolio-index-tile-info p {
  margin: 0;
  font-size: 12px;
  line-height: 1.58;
  color: #a6a0af;
}
body.portfolio-index .portfolio-index-tile-arrow {
  display: grid;
  flex: 0 0 31px;
  place-items: center;
  width: 31px;
  height: 31px;
  border: 0;
  border-radius: 0;
  color: #c2b0cc;
  background: transparent;
  transition: transform .2s ease, color .2s ease;
}
body.portfolio-index .portfolio-index-tile-arrow svg {
  display: block;
  width: 20px;
  height: 20px;
}
body.portfolio-index .portfolio-index-tile:hover .portfolio-index-tile-arrow {
  color: #eed9fb;
  transform: translateX(3px);
}
body.portfolio-index .portfolio-index-tile--novel {
  flex-direction: row;
  align-items: center;
  min-height: 145px;
  padding: 24px 35px;
  overflow: hidden;
  background: linear-gradient(105deg, #24202d, #1b1823 62%, #2b2136);
  border-color: rgba(178,143,208,.25);
}
body.portfolio-index .portfolio-index-novel-motif {
  position: relative;
  display: grid;
  flex: 0 0 104px;
  place-items: center;
  width: 104px;
  height: 88px;
  margin-right: 26px;
  border-right: 1px solid rgba(205,177,224,.17);
}
body.portfolio-index .portfolio-index-novel-book {
  display: block;
  width: 58px;
  height: 58px;
  color: #cdb6dd;
}
body.portfolio-index .portfolio-index-novel-content {
  flex: 1;
  min-width: 0;
}
body.portfolio-index .portfolio-index-novel-content h3 {
  margin: 5px 0 7px;
  font-size: clamp(23px,2.3vw,32px);
  line-height: 1.25;
  color: #f2e9fa;
}
body.portfolio-index .portfolio-index-novel-content p {
  margin: 0;
  font-size: 13px;
  color: #afa2bb;
}
body.portfolio-index .portfolio-index-novel-cta {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  align-self: center;
  padding: 11px 15px;
  border: 1px solid rgba(213,183,232,.29);
  border-radius: 8px;
  color: #e5ccef;
  font-size: 13px;
  font-weight: 650;
  background: rgba(173,123,206,.06);
  transition: background .2s ease, border-color .2s ease;
}
body.portfolio-index .portfolio-index-novel-cta svg {
  display: block;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
}
body.portfolio-index .portfolio-index-tile--novel:hover .portfolio-index-novel-cta {
  border-color: rgba(222,192,242,.62);
  background: rgba(173,123,206,.14);
}
body.portfolio-index .portfolio-index-fiction-bridge{
  display:flex;align-items:center;gap:20px;min-width:0;
  margin-top:24px;padding:22px 27px;
  border:1px solid rgba(186,151,210,.3);border-radius:13px;
  color:#eee5f5;text-decoration:none;
  background:radial-gradient(ellipse at 95% 0%,rgba(137,91,171,.15),transparent 55%),linear-gradient(110deg,#24202d,#1a1a23);
  transition:border-color .2s ease,transform .2s ease;
}
body.portfolio-index .portfolio-index-fiction-bridge:hover{
  border-color:rgba(221,176,242,.62);transform:translateY(-2px);color:#fff;
}
body.portfolio-index .portfolio-index-fiction-symbol{
  display:grid;place-items:center;flex:0 0 60px;width:60px;height:60px;
  border:1px solid rgba(203,167,224,.23);border-radius:12px;
  color:#d6b8e7;background:rgba(193,150,217,.08);font-size:30px;
}
body.portfolio-index .portfolio-index-fiction-copy{
  display:flex;flex-direction:column;gap:3px;min-width:0;flex:1;
}
body.portfolio-index .portfolio-index-fiction-copy small{
  font-size:9px;letter-spacing:.17em;color:#af93c1;font-weight:650;
}
body.portfolio-index .portfolio-index-fiction-copy strong{font-size:20px;font-weight:630}
body.portfolio-index .portfolio-index-fiction-copy>span{
  font-size:12px;line-height:1.6;color:#ab9eb6;
}
body.portfolio-index .portfolio-index-fiction-action{
  display:flex;align-items:center;gap:12px;flex:0 0 auto;
  font-size:12px;color:#d3b5e7;font-weight:600;
}
body.portfolio-index .portfolio-index-fiction-action svg{width:19px;height:19px}
@media(max-width:680px){
  body.portfolio-index .portfolio-index-fiction-bridge{padding:18px;gap:13px;flex-wrap:wrap}
  body.portfolio-index .portfolio-index-fiction-symbol{width:45px;height:45px;flex-basis:45px;font-size:24px}
  body.portfolio-index .portfolio-index-fiction-copy strong{font-size:18px}
  body.portfolio-index .portfolio-index-fiction-action{margin-left:58px}
}
@media(prefers-reduced-motion:reduce){
  body.portfolio-index .portfolio-index-fiction-bridge{transition:none;transform:none!important}
}
body.portfolio-index .portfolio-index-footnote {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-top: 29px;
  padding-top: 17px;
  border-top: 1px solid rgba(176,160,193,.15);
  color: #817988;
  font-size: 11px;
  letter-spacing: .03em;
}
body.portfolio-index .portfolio-index-tile-art.is-missing-image > img { display: none; }
body.portfolio-index .portfolio-index-tile-art.is-missing-image::before {
  content: "USAGIKOHIZERI";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: .2em;
  color: rgba(223,201,240,.56);
  background: linear-gradient(120deg,#25212e,#171921);
}
.portfolio-index-flipbook-link{display:flex;align-items:center;gap:16px;margin-top:23px;padding:20px 23px;border:1px solid rgba(196,158,221,.29);border-radius:12px;background:linear-gradient(105deg,#251c2e,#1b1b23);color:#e8d7f3;text-decoration:none;transition:border-color .2s ease,transform .2s ease}
.portfolio-index-flipbook-link:hover{border-color:#c9a0df;transform:translateY(-2px);color:#fff}
.portfolio-index-flipbook-icon{flex:0 0 49px;width:49px;height:49px;display:grid;place-items:center;border-radius:9px;border:1px solid #675071;font-size:29px;color:#cca9df}
.portfolio-index-flipbook-link>span:nth-child(2){display:grid;gap:5px;flex:1}
.portfolio-index-flipbook-link strong{font-size:18px;font-weight:650}
.portfolio-index-flipbook-link small{font-size:12px;color:#aca0b9;line-height:1.5}
.portfolio-index-flipbook-go{font-size:21px;color:#cfaadd}
@media (max-width: 1130px) {
  body.portfolio-index .portfolio-index-grid { grid-template-columns: repeat(6,minmax(0,1fr)); gap: 14px; }
  body.portfolio-index .portfolio-index-tile--wide { grid-column: span 6; }
  body.portfolio-index .portfolio-index-tile--medium,
  body.portfolio-index .portfolio-index-tile--narrow,
  body.portfolio-index .portfolio-index-tile--quarter { grid-column: span 3; }
  body.portfolio-index .portfolio-index-tile--full { grid-column: span 6; }
  body.portfolio-index .portfolio-index-tile-art,
  body.portfolio-index .portfolio-index-tile--wide .portfolio-index-tile-art,
  body.portfolio-index .portfolio-index-tile--medium .portfolio-index-tile-art,
  body.portfolio-index .portfolio-index-tile--narrow .portfolio-index-tile-art { height: 255px; }
  body.portfolio-index .portfolio-index-tile--wide .portfolio-index-tile-art { height: 290px; }
  body.portfolio-index .portfolio-index-tile-info { min-height: 112px; }
}
@media (max-width: 680px) {
  body.portfolio-index .portfolio-index-hero { padding: 35px 20px 31px; }
  body.portfolio-index .portfolio-index-hero-meta { display: none; }
  body.portfolio-index .portfolio-index-overline { font-size: 9px; margin-bottom: 13px; }
  body.portfolio-index .portfolio-index-hero h1 { font-size: 40px; }
  body.portfolio-index .portfolio-index-lead { font-size: 13px; }
  body.portfolio-index .portfolio-index-collections { width: calc(100% - 28px); padding: 29px 0 65px; }
  body.portfolio-index .portfolio-index-collections-header { align-items: start; flex-direction: column; gap: 6px; margin-bottom: 16px; }
  body.portfolio-index .portfolio-index-collections-count { font-size: 11px; }
  body.portfolio-index .portfolio-index-grid { display: flex; flex-direction: column; gap: 13px; }
  body.portfolio-index .portfolio-index-tile--wide .portfolio-index-tile-art,
  body.portfolio-index .portfolio-index-tile--medium .portfolio-index-tile-art,
  body.portfolio-index .portfolio-index-tile--narrow .portfolio-index-tile-art,
  body.portfolio-index .portfolio-index-tile-art { height: clamp(220px,55vw,300px); }
  body.portfolio-index .portfolio-index-tile-info { min-height: 100px; padding: 15px 17px 17px; }
  body.portfolio-index .portfolio-index-tile-info h3 { font-size: 21px; }
  body.portfolio-index .portfolio-index-tile-art--cover .portfolio-index-cover-paper { width: 40%; max-width: 180px; }
  body.portfolio-index .portfolio-index-cover-paper strong { font-size: clamp(29px,8vw,43px); }
  body.portfolio-index .portfolio-index-tile-art--concept .portfolio-index-concept-panel { width: min(53%,210px); }
  body.portfolio-index .portfolio-index-tile--novel { min-height: 132px; padding: 19px 18px; gap: 14px; }
  body.portfolio-index .portfolio-index-novel-motif { flex-basis: 65px; width: 65px; height: 72px; margin: 0; }
  body.portfolio-index .portfolio-index-novel-book { width: 46px; height: 46px; }
  body.portfolio-index .portfolio-index-novel-cta { align-self: end; padding: 9px 10px; }
  body.portfolio-index .portfolio-index-novel-cta > span { display: none; }
  body.portfolio-index .portfolio-index-footnote { align-items: start; flex-direction: column; gap: 6px; }
}
@media (max-width: 390px) {
  body.portfolio-index .portfolio-index-hero { padding-inline: 16px; }
  body.portfolio-index .portfolio-index-tile-art { height: 220px; }
  body.portfolio-index .portfolio-index-tile-info { padding: 13px 14px 16px; }
  body.portfolio-index .portfolio-index-tile-arrow { flex-basis: 28px; width: 28px; height: 28px; }
  body.portfolio-index .portfolio-index-novel-motif { display: none; }
}
@media (prefers-reduced-motion:reduce) {
  body.portfolio-index .portfolio-index-tile,
  body.portfolio-index .portfolio-index-tile-art img,
  body.portfolio-index .portfolio-index-cover-paper,
  body.portfolio-index .portfolio-index-concept-panel,
  body.portfolio-index .portfolio-index-tile-arrow,
  body.portfolio-index .portfolio-index-novel-cta { transition: none; }
  body.portfolio-index .portfolio-index-tile:hover { transform: none; }
}