/* ═══════════════════════════════════════════
   BAKED — 夜の祭壇
   base #0a0a0a / ink #e8e2d6 / fire #e2481e
   ═══════════════════════════════════════════ */
:root{
  --base:#0a0a0a;
  --base2:#111014;
  --ink:#e8e2d6;
  --ink-dim:rgba(232,226,214,.42);
  --fire:#e2481e;
  --smoke:rgba(232,226,214,.07);
  --blackletter:"Pirata One", serif;
  --serif:Georgia, "Times New Roman", serif;
  --mono:"IBM Plex Mono", monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  background:var(--base);
  color:var(--ink);
  font-family:var(--serif);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
.mono{font-family:var(--mono)}
img,svg{max-width:100%}

/* ── grain ── */
.grain{
  position:fixed;inset:0;pointer-events:none;z-index:90;opacity:.5;
  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.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.9 0 0 0 0 0.88 0 0 0 0 0.84 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── 円形紋章SVG（トップ用・オーナー指名の初代デザイン） ── */
.seal-svg{width:100%;height:auto;display:block}
.seal-ring{fill:none;stroke:var(--ink);stroke-width:3}
.seal-arc{font-family:var(--blackletter);font-size:64px;fill:var(--ink);letter-spacing:.06em}
.seal-arc--sub{font-size:20px;letter-spacing:.35em;fill:var(--ink-dim)}
.seal-13{font-family:var(--blackletter);font-size:96px;fill:var(--ink)}

/* ══════════ 00 OP ══════════ */
.op{
  position:fixed;inset:0;z-index:100;background:var(--base);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .9s ease, visibility .9s;
}
.op.is-done{opacity:0;visibility:hidden;pointer-events:none}
.op__smoke{
  position:absolute;inset:-20%;
  background:
    radial-gradient(40% 30% at 30% 70%, var(--smoke), transparent 70%),
    radial-gradient(35% 28% at 70% 40%, var(--smoke), transparent 70%),
    radial-gradient(50% 40% at 50% 90%, rgba(226,72,30,.05), transparent 70%);
  filter:blur(30px);
  animation:smokeDrift 14s ease-in-out infinite alternate;
}
@keyframes smokeDrift{
  from{transform:translate3d(-3%,2%,0) scale(1)}
  to{transform:translate3d(3%,-4%,0) scale(1.12)}
}
.op__seal{width:min(46vw,300px);position:relative;z-index:2}
.op__seal .seal-ring{
  stroke-dasharray:830;stroke-dashoffset:830;
  animation:ringDraw 1.6s ease-out forwards .2s;
}
@keyframes ringDraw{to{stroke-dashoffset:0}}
.op__seal .seal-arc,.op__seal .seal-13{
  opacity:0;animation:sealFade 1s ease forwards 1.4s;
}
.op__seal .seal-arc--sub{animation-delay:1.9s}
@keyframes sealFade{to{opacity:1}}
.op__word{
  position:absolute;z-index:3;
  font-family:var(--blackletter);
  font-size:clamp(4.5rem,22vw,15rem);
  color:var(--ink);letter-spacing:.02em;
  opacity:0;transform:scale(.96);
  animation:wordIn .8s ease forwards 2.6s;
  text-shadow:0 0 60px rgba(226,72,30,.35);
}
@keyframes wordIn{to{opacity:1;transform:scale(1)}}
.op__word{animation:wordIn .8s ease forwards 2.6s, opGlitch .3s steps(2,end) 3.5s 2}
@keyframes opGlitch{
  0%{transform:translate(0,0)}
  25%{transform:translate(-6px,2px);text-shadow:6px 0 var(--fire),-6px 0 rgba(120,180,255,.6)}
  50%{transform:translate(4px,-2px);text-shadow:-8px 0 var(--fire)}
  75%{transform:translate(-2px,1px);text-shadow:4px 0 var(--fire)}
  100%{transform:translate(0,0)}
}

/* ══════════ ティッカー（街のLED看板） ══════════ */
.ticker{
  overflow:hidden;border-top:1px solid rgba(226,72,30,.5);border-bottom:1px solid rgba(226,72,30,.5);
  padding:12px 0;background:var(--base);
}
.ticker__track{
  display:flex;width:max-content;
  animation:tickerRun 22s linear infinite;
}
.ticker__track span{
  font-family:var(--blackletter);
  font-size:clamp(1.3rem,3.6vw,2rem);
  color:var(--fire);white-space:nowrap;
}
@keyframes tickerRun{to{transform:translateX(-50%)}}
.ticker--light{background:transparent;border-color:rgba(10,10,10,.55);margin-bottom:6svh}
.ticker--light .ticker__track span{color:var(--base)}
@media (prefers-reduced-motion: reduce){.ticker__track{animation:none}}
.op__skip{
  position:absolute;right:20px;bottom:calc(20px + env(safe-area-inset-bottom));z-index:4;
  background:none;border:1px solid var(--ink-dim);color:var(--ink-dim);
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  padding:8px 18px;cursor:pointer;
}
.op__skip:hover{border-color:var(--fire);color:var(--fire)}

/* ══════════ 常駐シジル ══════════ */
.sigil{
  position:fixed;top:14px;left:50%;translate:-50% 0;z-index:80;
  width:52px;opacity:0;transition:opacity .6s ease;
  mix-blend-mode:difference; /* 明場(ARCHIVE)でも生存させる */
}
.sigil.is-on{opacity:1}
.sigil .seal-ring{stroke-width:6}

/* ══════════ 01 ALTAR ══════════ */
.altar{
  min-height:100svh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2.2rem;
  padding:14svh 24px 10svh;position:relative;overflow:hidden;
  background:
    radial-gradient(60% 45% at 50% 108%, rgba(226,72,30,.13), transparent 70%),
    var(--base);
}
.altar::before{ /* 背景の巨大13 */
  content:"13";position:absolute;right:-.08em;top:50%;translate:0 -50%;
  font-family:var(--blackletter);font-size:min(64svh,58vw);line-height:1;
  color:rgba(232,226,214,.045);pointer-events:none;
}
.altar__seal{width:min(58vw,340px);position:relative}
.altar__creed{
  font-family:var(--blackletter);
  font-size:clamp(1.5rem,5.4vw,3rem);
  letter-spacing:.04em;text-align:center;margin-top:1.4rem;
}
.altar__scroll{
  position:absolute;bottom:calc(26px + env(safe-area-inset-bottom));left:50%;translate:-50% 0;
  font-size:10px;letter-spacing:.4em;color:var(--ink-dim);
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.altar__scroll-line{
  width:1px;height:44px;background:linear-gradient(var(--fire),transparent);
  animation:scrollPulse 1.8s ease-in-out infinite;
}
@keyframes scrollPulse{50%{transform:scaleY(.55);opacity:.5}}

/* ══════════ 02 CONCEPT 聖典 ══════════ */
.creed{
  position:relative;max-width:680px;margin:0 auto;
  padding:22svh 28px 18svh;
}
.v-label{
  position:absolute;top:22svh;left:12px;
  font-size:11px;letter-spacing:.1em;line-height:2.1;color:var(--ink-dim);
}
.v-label--light{color:rgba(10,10,10,.45)}
.creed__list{list-style:none;display:flex;flex-direction:column;gap:9svh}
.creed__num{display:block;font-size:11px;color:var(--fire);letter-spacing:.3em;margin-bottom:1.1rem}
.creed__en{
  font-family:var(--blackletter);
  font-size:clamp(2rem,7vw,3.6rem);line-height:1.1;margin-bottom:1rem;
}
.creed__accent{color:var(--fire)}
.creed__ja{font-size:clamp(.95rem,3.4vw,1.15rem);line-height:2.3;color:var(--ink);opacity:.88}
.creed__note{font-size:10px;color:var(--ink-dim);margin-top:7svh;letter-spacing:.1em}

/* ══════════ CAMPAIGN（全幅ルック・粗モノクロ×赤の突き破り） ══════════ */
.campaign{position:relative;height:96svh;overflow:hidden;background:var(--base)}
.campaign img{
  width:100%;height:100%;object-fit:cover;object-position:center 30%;
  filter:grayscale(.92) contrast(1.28) brightness(.92);
}
.campaign::after{ /* 赤のハレーション */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 55% at 50% 100%, rgba(226,72,30,.22), transparent 70%);
  mix-blend-mode:overlay;
}
.campaign__word{
  position:absolute;left:-.06em;bottom:4%;z-index:2;
  font-family:var(--blackletter);
  font-size:clamp(5rem,17vw,13rem);line-height:1;
  color:var(--fire);rotate:-4deg;
  text-shadow:0 0 40px rgba(10,10,10,.45);
  pointer-events:none;
}
.campaign--flip .campaign__word{left:auto;right:-.06em;rotate:3deg}
.campaign__caption{
  position:absolute;left:50%;translate:-50% 0;
  bottom:calc(22px + env(safe-area-inset-bottom));
  font-size:10px;letter-spacing:.4em;color:var(--ink);
  text-shadow:0 1px 14px rgba(10,10,10,.8);white-space:nowrap;
}

/* ══════════ 03 COLLECTION（メゾン型ショーケース） ══════════ */
.collection{
  background:var(--ink);color:var(--base);
  padding:12svh 0 14svh;
}
.collection__title{
  font-family:var(--blackletter);
  font-size:clamp(3rem,10vw,6.5rem);line-height:1;
  text-align:center;margin-bottom:9svh;
}
.collection__grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:4px;padding:0 4px;max-width:1240px;margin:0 auto;
}
.item{margin:0}
.item--hero{grid-column:1/-1}
.item__stage{
  background:#f2efe9;
  aspect-ratio:1;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  padding:9%;
}
.item--hero .item__stage{aspect-ratio:16/10;padding:6%}
.item__stage img{
  max-width:100%;max-height:100%;object-fit:contain;
  mix-blend-mode:multiply; /* 白抜き物撮りを台紙に溶かす */
  transition:transform .6s cubic-bezier(.2,.6,.2,1);
}
.item:hover .item__stage img{transform:scale(1.04)}
.item figcaption{
  display:flex;justify-content:space-between;gap:12px;
  padding:16px 8px 42px;
  font-size:10px;letter-spacing:.18em;color:rgba(10,10,10,.78);
}
.item__price{color:rgba(10,10,10,.45);flex-shrink:0}
@media (max-width:720px){
  .item figcaption{flex-direction:column;gap:6px;padding-bottom:34px}
}

/* ══════════ 章共通 ══════════ */
.chapter{position:relative;padding:16svh 0 14svh}
.chapter__title{
  font-family:var(--blackletter);
  font-size:clamp(3.2rem,13vw,8rem);
  line-height:.95;padding:0 24px;margin-bottom:1.2rem;
}
.chapter__lead{
  font-size:clamp(.95rem,3.2vw,1.1rem);letter-spacing:.06em;
  color:var(--ink);opacity:.8;padding:0 26px;margin-bottom:3rem;
}
.chapter--smoke .chapter__smokebg{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(50% 36% at 20% 30%, var(--smoke), transparent 70%),
    radial-gradient(44% 30% at 85% 60%, var(--smoke), transparent 70%);
  filter:blur(26px);
  animation:smokeDrift 18s ease-in-out infinite alternate;
}

/* 横流れ帯 */
.band{
  display:flex;gap:14px;overflow-x:auto;padding:0 26px 18px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
}
.band::-webkit-scrollbar{height:3px}
.band::-webkit-scrollbar-thumb{background:var(--fire)}
.band .ph{scroll-snap-align:start;flex:0 0 auto}

/* ダミーフォト枠（素材待ち） */
.ph{
  position:relative;background:
    linear-gradient(160deg, #17161a 0%, #0d0c10 60%, #131017 100%);
  border:1px solid rgba(232,226,214,.14);
  display:flex;align-items:flex-end;
  min-height:200px;
}
.ph::before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(-45deg, transparent 0 14px, rgba(232,226,214,.03) 14px 15px);
}
.ph::after{
  content:"✕";position:absolute;top:10px;right:12px;
  color:var(--ink-dim);font-size:12px;font-family:var(--mono);
}
.ph figcaption{
  padding:12px 14px;font-size:10px;line-height:1.8;
  color:var(--ink-dim);letter-spacing:.14em;
}
/* 実写あり枠 */
.ph--img::before,.ph--img::after{content:none}
.ph--img img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;filter:contrast(1.04);
}
.ph--img figcaption{
  position:relative;z-index:2;width:100%;color:var(--ink);
  background:linear-gradient(transparent, rgba(10,10,10,.82));
}
.ph--tall{width:min(62vw,300px);height:min(82vw,420px)}
.ph--wide{width:min(84vw,460px);height:min(58vw,300px)}
.ph--product{width:100%;aspect-ratio:3/4}

/* STREET grid */
.street-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:0 26px;
}
@media (max-width:720px){
  .street-grid{grid-template-columns:1fr;gap:18px}
  .street-grid .ph--product:nth-child(2){margin-left:14vw;width:calc(100% - 14vw)}
  .street-grid .ph--product:nth-child(3){margin-right:14vw;width:calc(100% - 14vw)}
}

/* MUSIC */
.chapter--music .chapter__title{
  color:transparent;-webkit-text-stroke:2px var(--ink);
  text-shadow:5px 5px 0 rgba(226,72,30,.4);
}
.music__list{list-style:none;padding:0 26px;max-width:720px}
.music__list li{
  display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;
  padding:20px 0;border-bottom:1px solid rgba(232,226,214,.12);
  font-size:clamp(.95rem,3.2vw,1.1rem);letter-spacing:.04em;
  transition:color .2s ease, border-color .2s ease, padding-left .2s ease;
}
.music__list li:hover{color:var(--fire);border-color:var(--fire);padding-left:10px}
.music__year{font-size:10px;color:var(--fire);letter-spacing:.25em;min-width:64px}
.music__clearance{
  margin-left:auto;font-size:9px;color:var(--ink-dim);
  border:1px solid rgba(232,226,214,.2);padding:2px 8px;letter-spacing:.2em;
}
.chapter--music{padding-bottom:18svh}
.chapter--music .creed__note{padding:0 26px}

/* ══════════ 06 ARCHIVE 完売の壁（明転） ══════════ */
.archive{
  position:relative;background:var(--ink);color:var(--base);
  padding:16svh 0 14svh;
}
.archive .v-label--light{top:16svh}
.archive__intro{
  font-size:11px;letter-spacing:.5em;
  padding:0 28px;margin-bottom:6svh;color:rgba(10,10,10,.55);
}
.archive__grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));
  gap:2px;padding:0 12px;
}
.arch-item{
  position:relative;aspect-ratio:1;background:#ddd6c8;
  border:1px solid rgba(10,10,10,.12);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:10px;overflow:hidden;
}
.arch-item__ph{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:.92;
}
.arch-item__name{font-family:var(--mono);font-size:9px;line-height:1.5;letter-spacing:.05em;color:rgba(10,10,10,.72);position:relative;z-index:2}
.arch-item__price{font-family:var(--mono);font-size:9px;color:rgba(10,10,10,.45)}
.arch-item__stamp{
  position:absolute;top:50%;left:50%;translate:-50% -50%;rotate:-12deg;
  font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.18em;
  color:var(--fire);border:2px solid var(--fire);padding:3px 8px;
  opacity:.85;white-space:nowrap;
}
/* スタンプの乱れ押し（人が押した跡） */
.arch-item:nth-child(3n) .arch-item__stamp{rotate:7deg;translate:-46% -54%}
.arch-item:nth-child(4n) .arch-item__stamp{rotate:-19deg;opacity:.72}
.arch-item:nth-child(5n) .arch-item__stamp{rotate:2deg;translate:-54% -46%}
.arch-item:nth-child(7n) .arch-item__stamp{opacity:.95;border-width:3px}
.archive__giant{
  font-family:var(--blackletter);
  font-size:clamp(4.6rem,20vw,15rem);
  line-height:.88;padding:12svh 28px 8svh;
  color:var(--base);
  text-shadow:6px 6px 0 rgba(226,72,30,.55); /* 版ズレ印刷 */
}
.archive__giant br{display:block}
.archive__cta{padding:0 28px 4svh;max-width:680px}
.archive__cta-ja{font-size:clamp(1rem,3.6vw,1.25rem);line-height:2.2;margin-bottom:2.2rem}
.btn-fire{
  display:inline-block;background:var(--fire);color:var(--ink);
  font-family:var(--mono);font-size:13px;letter-spacing:.18em;
  padding:16px 30px;text-decoration:none;
  box-shadow:0 0 34px rgba(226,72,30,.4);
  transition:transform .2s ease, box-shadow .2s ease;
}
.btn-fire:hover{transform:translateY(-2px);box-shadow:0 0 50px rgba(226,72,30,.6)}

/* ══════════ 07 DROP ══════════ */
.drop{
  min-height:62svh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1.6rem;
  text-align:center;padding:12svh 24px;
  background:
    radial-gradient(55% 42% at 50% 0%, rgba(226,72,30,.1), transparent 70%),
    var(--base);
}
.drop__label{font-size:11px;letter-spacing:.5em;color:var(--fire)}
.drop__tba{
  font-family:var(--blackletter);
  font-size:clamp(4rem,16vw,10rem);line-height:1;
  text-shadow:0 0 34px rgba(226,72,30,.45), 5px 5px 0 rgba(226,72,30,.4);
  animation:neonFlicker 5s infinite;
}
@keyframes neonFlicker{
  0%,88%,100%{opacity:1}
  89%{opacity:.5}
  90%{opacity:1}
  95%{opacity:.72}
  96%{opacity:1}
}
@media (prefers-reduced-motion: reduce){.drop__tba{animation:none}}
.drop__ja{font-size:.95rem;letter-spacing:.1em;color:var(--ink-dim)}

/* ══════════ 08 FOOTER ══════════ */
.footer{
  position:relative;overflow:hidden;
  padding:12svh 24px calc(30px + env(safe-area-inset-bottom));
  border-top:1px solid rgba(232,226,214,.12);
  text-align:center;
}
.footer__index{
  display:flex;flex-direction:column;gap:1.4rem;margin-bottom:9svh;
}
.footer__index a{
  color:var(--ink);text-decoration:none;
  font-family:var(--blackletter);
  font-size:clamp(1.7rem,6.4vw,2.8rem);letter-spacing:.05em;
  transition:color .2s ease;
}
.footer__index a:hover{color:var(--fire)}
.footer__seal{
  width:min(120vw,720px);margin:0 auto -34vw;opacity:.14;
  translate:0 12%;
}
.footer__seal .seal-arc--sub{display:none}
.footer__copy{font-size:10px;letter-spacing:.2em;color:var(--ink-dim);position:relative;z-index:2}

/* ══════════ reveal ══════════ */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s ease, transform .9s ease}
.reveal.is-in{opacity:1;transform:none}

/* ══════════ reduced motion ══════════ */
@media (prefers-reduced-motion: reduce){
  .op{display:none}
  .reveal{opacity:1;transform:none;transition:none}
  .op__smoke,.chapter__smokebg,.altar__scroll-line{animation:none}
}