@import url("./site-base.css");
@import url('https://fonts.googleapis.com/css2?family=Zen+Old+Mincho:wght@900&display=swap');

/* ============================================================
   home-wall.css — トップページ「BRIGHT WALL」
   街の明るいコンクリート壁に、作品のポスターを貼り重ねた場所。

   原則:
   色は自由に使ってよいが、色面には必ず黒（--ink）の輪郭を付ける。
   これを守れば何色使っても崩れない。守らないと濁る。

   トークン（--wall / --ink / 作品カラー）は site-base.css の :root にある。
   このファイルはトップ専用の指定だけを持つ。site-base.css 側は触らない。
   ============================================================ */

* {
  box-sizing: border-box;
}

body.wall-home {
  margin: 0;
  background: var(--wall);
  color: var(--ink);
  font-family: var(--ff-heavy);
  overflow-x: hidden;
}

/* リソ風のざらつき＋網点。
   z-index:0 でコンテンツより下に敷く。壁だけがざらつき、
   貼られた紙（ポスター・フライヤー）はざらつかない＝紙が上に乗っている状態。 */
body.wall-home::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .5;
  background-image:
    radial-gradient(rgba(0, 0, 0, .2) 30%, transparent 31%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  background-size: 6px 6px, 260px 260px;
  mix-blend-mode: multiply;
}

.wall-main {
  position: relative;
  z-index: 1;
}

.wall-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 1.2rem;
}

/* stickyヘッダーぶんアンカーをずらす */
[id="works"],
[id="about"],
[id="latest"] {
  scroll-margin-top: calc(var(--header-height) + 1.5rem);
}

/* ============================================================
   ① スピードテープ（名乗り）
   黒帯ヘッダーの直下。ここで1行名乗る。
   ============================================================ */
.wall-tape {
  position: relative;
  margin: 2.2rem 0 0;
  padding: 5px;
  transform: rotate(-1.6deg);
  background: repeating-linear-gradient(115deg,
      var(--grani) 0 24px,
      var(--ink) 24px 48px);
  box-shadow: 0 0 0 4px var(--ink), 9px 9px 0 rgba(13, 13, 15, .18);
}

.wall-tape__text {
  display: block;
  margin: 0;
  padding: .62rem 1rem;
  background: var(--wall);
  color: var(--ink);
  font-size: clamp(.82rem, 1.6vw, .96rem);
  font-weight: 900;
  letter-spacing: .04em;
  line-height: 1.5;
  text-align: center;
}

/* ============================================================
   ② タグ（署名）
   壁の落書き。ポスターがこの上に貼り重なるので、塗りは持たせず中抜きにする。
   ============================================================ */
.wall-tag {
  position: relative;
  padding: 3.2rem 0 5.5rem;
  text-align: center;
}

.wall-tag__title {
  margin: 0;
  font-size: clamp(3rem, 14.5vw, 9.5rem);
  font-weight: 900;
  line-height: .84;
  letter-spacing: -.03em;
  transform: skew(-8deg) rotate(-1.6deg);
}

.wall-tag__l1,
.wall-tag__l2 {
  display: block;
  color: transparent;
  -webkit-text-stroke: 4px var(--ink);
}

/* 影は2枚。同じ座標に重ねると後ろが完全に隠れるので、必ず段差をつける */
.wall-tag__l1 {
  text-shadow: 10px 10px 0 var(--cyan), 15px 15px 0 var(--ink);
}

.wall-tag__l2 {
  text-shadow: 10px 10px 0 var(--reiage), 15px 15px 0 var(--ink);
}

/* -webkit-text-stroke が無い環境では中抜きが効かず文字が消えるので塗りに戻す */
@supports not ((-webkit-text-stroke: 4px #000) or (text-stroke: 4px #000)) {

  .wall-tag__l1,
  .wall-tag__l2 {
    color: var(--ink);
  }
}

.wall-tag__sub {
  display: inline-block;
  margin: 1.5rem 0 0;
  padding: .45rem 1.1rem;
  background: var(--ink);
  color: var(--wall);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .2em;
  transform: rotate(1.4deg);
  box-shadow: 5px 5px 0 var(--lime);
}

/* スプレーのドリップ */
.drip {
  position: absolute;
  top: 0;
  width: 7px;
  border-radius: 0 0 7px 7px;
  box-shadow: 0 0 0 2px var(--ink);
}

.drip::after {
  content: "";
  position: absolute;
  left: -4px;
  bottom: -10px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: inherit;
  box-shadow: 0 0 0 2px var(--ink);
}

.drip--1 { left: 9%;  height: 190px; background: var(--reiage); }
.drip--2 { left: 22%; height: 112px; background: var(--cyan); }
.drip--3 { right: 15%; height: 232px; background: var(--lime); }
.drip--4 { right: 28%; height: 90px;  background: var(--orange); }

/* ============================================================
   ③ 貼りポスター
   タグに食い込ませる（負のマージン）。壁の層構造そのもの。
   ============================================================ */
.wall-works {
  position: relative;
  z-index: 2;
  margin-top: clamp(-7rem, -5vw, -2rem);
  padding-bottom: 4.5rem;
}

.paste {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.poster {
  position: relative;
  display: block;
  color: var(--ink);
  text-decoration: none;
  background: var(--wall);
  box-shadow: 0 0 0 4px var(--ink), 14px 16px 0 rgba(13, 13, 15, .26);
  clip-path: polygon(0 2%, 3% 0, 97% 1.5%, 100% 0, 100% 97%, 96% 100%, 4% 98.5%, 0 100%);
  transition: transform .18s ease;
}

.poster:nth-child(1) { transform: rotate(-2.4deg); }
.poster:nth-child(2) { transform: rotate(1.6deg) translateY(14px); }
.poster:nth-child(3) { transform: rotate(-1.1deg) translateY(-6px); }

.poster:hover,
.poster:focus-visible {
  transform: rotate(0) scale(1.035);
  z-index: 5;
}

.poster--grani  { --c: var(--grani);  --duo-contrast: 2;    --duo-bright: .95;  --duo-pos: center 22%; }
.poster--kourin { --c: var(--kourin); --duo-contrast: 1.2;  --duo-bright: 1.15; --duo-pos: center 20%; }
/* Reiage は紅鱗録の隣に並ぶ。同じ「暗い赤」に見えないよう、
   明度を上げて蛍光ピンク側に振り、色で作品を区別できるようにする */
.poster--reiage { --c: var(--reiage); --duo-contrast: .95;  --duo-bright: 1.95; --duo-pos: center 40%; }

/* マスキングテープ */
.poster__tape {
  position: absolute;
  z-index: 6;
  width: 106px;
  height: 26px;
  background: rgba(255, 250, 220, .78);
  border-left: 1px dashed rgba(0, 0, 0, .28);
  border-right: 1px dashed rgba(0, 0, 0, .28);
  box-shadow: 0 2px 5px rgba(13, 13, 15, .22);
}

.poster__tape--tl { top: -13px; left: -22px;  transform: rotate(-34deg); }
.poster__tape--br { bottom: -11px; right: -24px; transform: rotate(-30deg); }

.poster__art {
  aspect-ratio: 4 / 5;
  border-bottom: 5px solid var(--ink);
}

/* ------------------------------------------------------------
   デュオトーン（CSSのみ・画像の事前加工なし）
   .duo の background:#000 と isolation:isolate は必須。
   どちらか欠けると screen が効かず、絵が黒く潰れる。
   ------------------------------------------------------------ */
.duo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #000;
}

.duo img {
  position: relative;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--duo-pos, top center);
  filter: grayscale(1) contrast(var(--duo-contrast, 1.4)) brightness(var(--duo-bright, 1.1));
  mix-blend-mode: screen;
}

/* 作品カラーで染める */
.duo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--c);
  mix-blend-mode: multiply;
}

/* 網点 */
.duo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: .4;
  background-image: radial-gradient(#000 32%, transparent 33%);
  background-size: 5px 5px;
  mix-blend-mode: overlay;
}

.duo--cyan   { --c: var(--cyan);   --duo-contrast: 1.35; --duo-bright: 1.08; --duo-pos: center; }
.duo--lime   { --c: var(--lime);   --duo-contrast: 1.35; --duo-bright: 1.08; --duo-pos: center; }
.duo--orange { --c: var(--orange); --duo-contrast: 1.35; --duo-bright: 1.08; --duo-pos: center; }

/* ------------------------------------------------------------
   ポスターの情報帯は「紙の色」。
   色はデュオトーン面・上端の色ライン・の2箇所に限定する。
   ベタ地に淡色を載せるとコントラストが取れないため。
   ------------------------------------------------------------ */
.poster__body {
  padding: 1rem 1.1rem 1.4rem;
  background: var(--wall);
  border-top: 10px solid var(--c);
}

.poster__genre {
  margin: 0;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--ink);
  opacity: .72;
}

.poster__title {
  margin: .2rem 0 .3rem;
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  font-weight: 900;
  line-height: 1.08;
  color: var(--ink);
}

.poster--kourin .poster__title {
  font-family: 'Zen Old Mincho', serif;
  font-weight: 900;
}

.poster__sub {
  margin: 0;
  font-size: .88rem;
  font-weight: 700;
  color: var(--ink);
}

.poster__cta {
  display: inline-block;
  margin-top: .9rem;
  padding: .42rem .9rem;
  background: var(--ink);
  color: var(--wall);
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .12em;
}

.poster__cta::after {
  content: " →";
  display: inline-block;
  transition: transform .18s ease;
}

.poster:hover .poster__cta::after,
.poster:focus-visible .poster__cta::after {
  transform: translateX(4px);
}

/* 4作目のスロット。壁の余白に貼った紙片 */
.paste__coming {
  width: max-content;
  max-width: 100%;
  margin: 1.8rem 0 0 auto;
  padding: .7rem 1.1rem;
  background: var(--wall-2);
  box-shadow: 0 0 0 3px var(--ink), 7px 7px 0 rgba(13, 13, 15, .2);
  transform: rotate(5deg);
  clip-path: polygon(0 6%, 4% 0, 96% 4%, 100% 0, 100% 94%, 95% 100%, 5% 96%, 0 100%);
}

.paste__coming-label {
  display: block;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .22em;
  color: var(--ink);
}

.paste__coming-note {
  display: block;
  margin-top: .15rem;
  font-size: .74rem;
  font-weight: 700;
  color: var(--ink);
  opacity: .68;
}

/* ============================================================
   共通セクション見出し（壁用）
   ============================================================ */
.wall-h2 {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: 0 0 1.3rem;
  font-size: .82rem;
  font-weight: 900;
  letter-spacing: .26em;
}

.wall-h2::after {
  content: "";
  flex: 1;
  height: 4px;
  background: var(--ink);
}

.wall-h2__label {
  padding: .32rem .8rem;
  background: var(--cyan);
  color: var(--ink);
  box-shadow: 0 0 0 3px var(--ink);
}

/* ============================================================
   ④ ABOUT — この場所が何なのか
   ============================================================ */
.wall-about {
  padding-bottom: 4.5rem;
}

.wall-about__paper {
  padding: 2rem 2.2rem 2.2rem;
  background: var(--wall-2);
  box-shadow: 0 0 0 4px var(--ink), 12px 12px 0 rgba(13, 13, 15, .2);
  transform: rotate(-.5deg);
}

.wall-about__lead {
  margin: 0 0 1.1rem;
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  font-weight: 900;
  line-height: 1.35;
  color: var(--ink);
}

.wall-about__text {
  margin: 0 0 1rem;
  max-width: 62ch;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.95;
  color: var(--ink);
}

.wall-about__links {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: 1.6rem;
}

.wall-about__link {
  padding: .5rem 1rem;
  background: var(--ink);
  color: var(--wall);
  font-size: .8rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-decoration: none;
  transition: background .15s, color .15s;
}

.wall-about__link:hover,
.wall-about__link:focus-visible {
  background: var(--grani);
  color: var(--ink);
}

/* ============================================================
   ⑤ LATEST FLYERS — 最新ブログ
   サムネはシアン1色。作品ポスター（作品カラー・フルサイズ）との階層差をつける。
   ============================================================ */
.wall-flyers {
  padding-bottom: 5rem;
}

.flyers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}

.flyer {
  display: block;
  background: var(--wall);
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 0 0 3px var(--ink), 7px 7px 0 var(--cyan);
  transform: rotate(-.7deg);
  transition: transform .15s ease;
}

.flyer:nth-child(2) {
  transform: rotate(.9deg);
  box-shadow: 0 0 0 3px var(--ink), 7px 7px 0 var(--lime);
}

.flyer:nth-child(3) {
  transform: rotate(-.3deg);
  box-shadow: 0 0 0 3px var(--ink), 7px 7px 0 var(--orange);
}

.flyer:hover,
.flyer:focus-visible {
  transform: rotate(0) translateY(-4px);
}

.flyer__art {
  aspect-ratio: 16 / 9;
  border-bottom: 3px solid var(--ink);
}

.flyer__body {
  padding: .85rem 1rem 1.1rem;
}

.flyer__date {
  display: inline-block;
  padding: .16rem .5rem;
  background: var(--ink);
  color: var(--grani);
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .06em;
}

.flyer__title {
  margin: .6rem 0 0;
  font-size: .95rem;
  font-weight: 900;
  line-height: 1.5;
  color: var(--ink);
}

.flyer__tags {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: .6rem;
}

.flyer__tag {
  padding: .1rem .45rem;
  font-size: .72rem;
  font-weight: 700;
  color: var(--ink);
  box-shadow: 0 0 0 2px var(--ink);
}

.wall-flyers__more {
  display: inline-block;
  margin-top: 1.6rem;
  padding: .55rem 1.1rem;
  background: var(--ink);
  color: var(--wall);
  font-size: .8rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-decoration: none;
  transition: background .15s, color .15s;
}

.wall-flyers__more:hover,
.wall-flyers__more:focus-visible {
  background: var(--cyan);
  color: var(--ink);
}

/* ============================================================
   レスポンシブ
   モバイルでも傾きは殺さない（殺すとただの黒枠カードになり、壁でなくなる）
   ============================================================ */
@media (max-width: 860px) {
  .paste {
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }

  .flyers {
    grid-template-columns: 1fr;
  }

  .poster:nth-child(1) { transform: rotate(-1.2deg); }
  .poster:nth-child(2) { transform: rotate(1deg); }
  .poster:nth-child(3) { transform: rotate(-.7deg); }

  .poster__art {
    aspect-ratio: 3 / 2;
  }

  /* 1カラムになるとポスターがビューポート幅いっぱいに広がる。
     テープがはみ出すと端が切れるので内側に寄せる */
  .poster__tape {
    width: 84px;
  }

  .poster__tape--tl { top: -11px; left: -6px; }
  .poster__tape--br { bottom: -9px; right: -8px; }

  .drip--2,
  .drip--4 {
    display: none;
  }
}

@media (max-width: 560px) {
  .wall-wrap {
    padding: 0 1rem;
  }

  .wall-tag {
    padding: 2.4rem 0 4rem;
  }

  .wall-tag__l1,
  .wall-tag__l2 {
    -webkit-text-stroke-width: 3px;
  }

  .wall-tag__l1 { text-shadow: 6px 6px 0 var(--cyan), 9px 9px 0 var(--ink); }
  .wall-tag__l2 { text-shadow: 6px 6px 0 var(--reiage), 9px 9px 0 var(--ink); }

  .wall-about__paper {
    padding: 1.4rem 1.3rem 1.6rem;
  }

  .paste__coming {
    margin-right: auto;
    transform: rotate(3deg);
  }
}

@media (prefers-reduced-motion: reduce) {

  .poster,
  .flyer,
  .poster__cta::after {
    transition: none;
  }
}