/* =========================================================
   ANGEOLOGY — collections.css (loads after style.css)
   ========================================================= */

/* ---------- cover ---------- */
.col-hero {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(30px, 5vw, 80px); align-items: center;
  max-width: 1320px; margin: 0 auto; padding: 130px var(--gutter) 80px;
}
.col-hero > *:not(.wave) { position: relative; z-index: 2; }
.col-title { margin: 0 0 26px; font-family: var(--serif); font-weight: 400; font-size: clamp(72px, 10vw, 176px); line-height: 1.15; letter-spacing: -.025em; }
.col-title .hl-in { display: inline-block; }
.col-title .script { font-size: 1.1em; color: var(--rose); padding: 0 .08em; }
.col-sub { margin: 0 0 30px; max-width: 30em; font-size: 17px; }

.fan { position: relative; height: 560px; }
.fan-card {
  --x: calc((var(--i) - 1.5) * 150px);
  position: absolute; left: 44%; bottom: 20px; width: 180px; margin-left: -90px; aspect-ratio: 5 / 8.4;
  display: flex; flex-direction: column; align-items: center; padding: 14px; border-radius: 16px; text-decoration: none; color: var(--espresso);
  background: #fff; box-shadow: 0 0 0 1px var(--espresso), 0 30px 40px -26px rgba(64, 46, 42, .55);
  transform-origin: 50% 100%; translate: var(--x) calc(abs(var(--i) - 1.5) * 18px); rotate: calc((var(--i) - 1.5) * 7deg); z-index: calc(var(--i) + 1);
  transition: translate .5s var(--ease), rotate .5s var(--ease), box-shadow .4s;
}
.fan-card::before { content: ""; position: absolute; inset: 6px; border: 1px solid var(--rose); border-radius: 12px; pointer-events: none; }
.fan-card:hover, .fan-card:focus-visible { translate: var(--x) -34px; rotate: calc((var(--i) - 1.5) * 5deg); z-index: 10; box-shadow: 0 0 0 1px var(--espresso), 0 0 0 6px var(--petal), 0 40px 50px -26px rgba(64, 46, 42, .6); }
.fan-num { margin: 0 0 8px; font-family: var(--serif); font-style: italic; font-size: 22px; line-height: 1.2; color: var(--rose-ink); }
.fan-art { flex: 1; width: 100%; display: block; overflow: hidden; border-radius: 999px 999px 6px 6px; }
.fan-art .slot { height: 100%; aspect-ratio: auto; }
.fan-name { margin: 12px 0 2px; font-family: var(--serif); font-size: 23px; line-height: 1; white-space: nowrap; }

/* ---------- contents ---------- */
.col-index { max-width: 1320px; margin: 0 auto 0; padding: 0 var(--gutter) 90px; }
.col-index ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--espresso); border-bottom: 1px solid var(--line); }
.col-index li + li { border-left: 1px solid var(--line); }
.col-index a { display: flex; flex-direction: column; gap: 12px; padding: 26px 24px; text-decoration: none; transition: background .4s; }
.col-index a:hover { background: var(--petal); }
.ci-num { font-family: var(--serif); font-style: italic; font-size: 56px; line-height: 1; color: var(--rose-ink); }
.ci-name { font-family: var(--serif); font-size: 32px; line-height: 1.2; }
.ci-name .script { color: var(--rose-ink); font-size: 1.15em; }
.ci-count { font-size: 10px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--graphite); }

/* ---------- chapters ---------- */
.chapter { position: relative; overflow: hidden; padding: 140px var(--gutter) 130px; }
.ch-doll { background: radial-gradient(circle, rgba(255, 255, 255, .85) 3px, transparent 3.5px) 0 0 / 28px 28px, var(--petal); }
.ch-fallen { background: repeating-linear-gradient(90deg, var(--noir) 0 30px, #1b1617 30px 60px); color: var(--paper); }
.ch-bride { background: var(--cream); }
.ch-bride::before, .ch-bride::after { /* lace scallops */
  content: ""; position: absolute; left: 0; right: 0; height: 16px;
  background: radial-gradient(circle at 50% 0, var(--almond) 8px, transparent 8.5px) 0 0 / 22px 16px repeat-x;
}
.ch-bride::before { top: 0; }
.ch-bride::after { bottom: 0; rotate: 180deg; }
.ch-bunny { background: radial-gradient(circle, rgba(255, 255, 255, .85) 3px, transparent 3.5px) 0 0 / 28px 28px, var(--lilac); }

.ch-numeral {
  position: absolute; top: -4vw; right: -2vw; z-index: 0; pointer-events: none;
  font-family: var(--serif); font-style: italic; font-size: clamp(260px, 42vw, 640px); line-height: .9; color: rgba(255, 255, 255, .45);
}
.flip .ch-numeral { right: auto; left: -2vw; }
.ch-fallen .ch-numeral { color: rgba(245, 203, 215, .07); }
.ch-bride .ch-numeral { color: rgba(225, 132, 152, .12); }

.ch-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(40px, 7vw, 110px); align-items: center; max-width: 1240px; margin: 0 auto; }
.flip .ch-visual { order: 2; }
.ch-visual { position: relative; padding: 30px 0 60px; }
.ch-arch { width: 76%; margin: 0; border-radius: 999px 999px 0 0; overflow: hidden; box-shadow: 0 0 0 1px var(--espresso), 0 0 0 10px var(--paper), 0 0 0 11px var(--rose), 0 40px 70px -30px rgba(64, 46, 42, .5); }
.flip .ch-arch { margin-left: auto; }
.ch-polaroid { position: absolute; right: 0; bottom: 0; width: 44%; margin: 0; rotate: 6deg; }
.flip .ch-polaroid { right: auto; left: 0; rotate: -6deg; }
.ch-deco { position: absolute; top: 0; left: 28%; width: 120px; z-index: 3; animation: bowSway 4.5s ease-in-out infinite; }
.flip .ch-deco { left: auto; right: 28%; }
.ch-fallen .ch-deco { width: 150px; top: 10px; rotate: -30deg; animation: none; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .5)); }
.ch-bride .ch-deco { width: 70px; top: 20px; animation: bob 4s ease-in-out infinite; }
.ch-bunny .ch-deco { width: 110px; animation: twinkle 4s ease-in-out infinite; }

.ch-title { margin: 0 0 20px; font-family: var(--serif); font-weight: 400; font-size: clamp(76px, 9.5vw, 170px); line-height: 1.2; letter-spacing: -.025em; }
.ch-the { display: block; margin-bottom: .12em; font-style: italic; font-size: .4em; line-height: 1.2; color: var(--graphite); }
.ch-title .script { font-size: 1.12em; color: var(--rose-ink); padding: 0 .08em; }
.ch-lede { margin: 0 0 28px; max-width: 34em; font-size: 17px; }
.ch-kicker { margin: 0 0 12px; font-size: 10px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--rose-ink); }
.ch-fortune { margin: 0 0 26px; padding: 26px 28px; background: var(--paper); color: var(--espresso); border-radius: 16px; box-shadow: inset 0 0 0 1px var(--espresso), inset 0 0 0 5px var(--paper), inset 0 0 0 6px var(--rose); }
.ch-quote { margin: 0 0 18px; font-family: var(--serif); font-style: italic; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.25; }
.ch-fortune dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; margin: 0; }
.ch-fortune dt { font-size: 10px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--rose-ink); padding-top: 3px; }
.ch-fortune dd { margin: 0; font-size: 15px; }
.ch-mood { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ch-mood li { padding: 6px 14px; border-radius: 999px; border: 1px solid currentColor; font-size: 10px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; }

.ch-fallen .sec-num, .ch-fallen .ch-kicker:not(.ch-fortune .ch-kicker) { color: var(--blush); }
.ch-fallen .ch-the { color: #cfc6c2; }
.ch-fallen .ch-title .script { color: var(--blush); }
.ch-fallen .ch-mood li { border-color: var(--blush); color: var(--blush); }

.ch-ritual { position: relative; z-index: 1; max-width: 1240px; margin: 90px auto 0; }
.rt-list { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin: 0 0 36px; padding: 0; }
.rt-item { position: relative; padding: 12px 12px 18px; border-radius: 22px; background: var(--paper); color: var(--espresso); box-shadow: 0 0 0 1px var(--line), 0 30px 40px -30px rgba(64, 46, 42, .5); }
.rt-thumb { display: block; overflow: hidden; border-radius: 16px; margin-bottom: 14px; --pbg: var(--petal); }
.rt-thumb.p-eyes { --pbg: var(--lilac); }
.rt-thumb.p-lips { --pbg: var(--blush); }
.rt-thumb.p-tools { --pbg: var(--almond); }
.rt-thumb .slot, .rt-palette { background: radial-gradient(circle, rgba(255, 255, 255, .85) 2.4px, transparent 2.9px) 0 0 / 20px 20px, var(--pbg); }
.rt-thumb img { transition: transform .6s var(--ease), filter .6s; }
.rt-item:hover .rt-thumb img { transform: scale(1.07) rotate(-3deg); }
.rt-palette { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; aspect-ratio: 1; padding: 16%; }
.rt-palette span { border-radius: 5px; background-size: cover; box-shadow: 0 10px 14px -10px rgba(64, 46, 42, .5); }
.rt-step { display: block; padding: 0 6px; font-size: 10px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--rose-ink); }
.rt-name { display: block; padding: 2px 6px 0; font-family: var(--serif); font-size: 26px; line-height: 1.15; text-decoration: none; }
.rt-name:hover { font-style: italic; color: var(--rose-ink); }
.rt-meta { display: block; padding: 4px 6px 0; font-size: 12px; color: var(--graphite); }
.rt-add { position: absolute; top: 22px; right: 22px; width: 40px; height: 40px; border: 0; border-radius: 50%; cursor: pointer; background: var(--espresso); color: var(--paper); font-size: 20px; line-height: 1; transition: background .3s, scale .3s var(--ease); }
.rt-add:hover { background: var(--rose-ink); scale: 1.08; }
.rt-add.done { background: var(--rose-ink); }
.ch-fallen .ch-ritual > .ch-kicker { color: var(--blush); }
.ch-fallen .ch-ritual .btn-fill { background: var(--paper); color: var(--espresso); }
.ch-fallen .ch-ritual .btn-fill:hover { background: var(--blush); }

/* ---------- quiz ---------- */
.quiz { padding: 140px var(--gutter); }
.quiz-form { max-width: 1000px; margin: 0 auto; }
.q { margin: 0; padding: 26px 0 30px; border: 0; border-top: 1px solid var(--espresso); }
.q legend { float: left; width: 100%; margin-bottom: 18px; font-family: var(--serif); font-size: clamp(28px, 3vw, 40px); line-height: 1.2; }
.q legend span { display: inline-grid; place-items: center; width: 42px; height: 42px; margin-right: 14px; border: 1px solid var(--espresso); border-radius: 50%; font-size: 20px; vertical-align: middle; }
.q.answered legend span { background: var(--rose-ink); border-color: var(--rose-ink); color: #fff; }
.q label { position: relative; display: inline-flex; align-items: center; gap: 10px; margin: 0 8px 10px 0; padding: 12px 20px; border: 1px solid var(--espresso); border-radius: 999px; cursor: pointer; font-size: 15px; transition: background .3s, color .3s, translate .3s var(--ease); }
.q label:hover { background: var(--petal); translate: 0 -2px; }
.q input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.q label:has(input:checked) { background: var(--rose-ink); border-color: var(--rose-ink); color: #fff; }
.q label:has(input:focus-visible) { outline: 2px solid var(--rose); outline-offset: 3px; }
.q-swatch::before { content: ""; width: 18px; height: 18px; border-radius: 50%; background: var(--sw); box-shadow: 0 0 0 1px var(--espresso); }
.quiz-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; padding-top: 26px; border-top: 1px solid var(--espresso); }
.quiz-msg { margin: 0; font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--rose-ink); }

.quiz-result { display: none; max-width: 920px; margin: 70px auto 0; grid-template-columns: 280px 1fr; gap: 56px; align-items: center; }
.quiz-result.show { display: grid; }
.qr-card { width: 100%; aspect-ratio: 5 / 8.4; perspective: 1400px; }
.qr-inner { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 1.1s var(--ease); }
.qr-card.turned .qr-inner { transform: rotateY(180deg); }
.qr-back, .qr-front { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 16px; display: flex; flex-direction: column; align-items: center; padding: 14px; box-shadow: 0 0 0 1px var(--espresso), 0 30px 40px -26px rgba(64, 46, 42, .55); }
.qr-back { justify-content: center; gap: 12px; background: repeating-linear-gradient(45deg, rgba(232, 204, 216, .9) 0 1px, transparent 1px 12px), repeating-linear-gradient(-45deg, rgba(232, 204, 216, .9) 0 1px, transparent 1px 12px), var(--petal); }
.qr-back img { width: 70%; }
.qr-back .script { font-size: 34px; color: var(--rose-ink); }
.qr-front { transform: rotateY(180deg); background: #fff; }
.qr-front::before { content: ""; position: absolute; inset: 6px; border: 1px solid var(--rose); border-radius: 12px; pointer-events: none; }
.qr-title { margin: 0 0 14px; font-family: var(--serif); font-size: clamp(56px, 6vw, 92px); line-height: 1.1; }
.qr-title .script { color: var(--rose-ink); font-size: 1.12em; }
.qr-text .ch-quote { margin-bottom: 26px; }

/* ---------- toast (same as the shop) ---------- */
.toast { position: fixed; left: 50%; bottom: 26px; z-index: 95; max-width: calc(100vw - 32px); padding: 14px 24px; border-radius: 999px; background: var(--espresso); color: var(--paper); font-size: 13px; translate: -50% 180%; transition: translate .5s var(--ease); box-shadow: 0 20px 40px -20px rgba(64, 46, 42, .6); }
.toast.show { translate: -50% 0; }
.toast b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 18px; }
.toast a { margin-left: 8px; color: var(--blush); }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .col-hero { grid-template-columns: 1fr; padding-top: 110px; }
  .fan { height: 440px; }
  .fan-card { left: 50%; }
  .fan-card { --x: calc((var(--i) - 1.5) * 150px); width: 170px; margin-left: -85px; }
  .col-index ol { grid-template-columns: 1fr 1fr; }
  .col-index li:nth-child(3) { border-left: 0; }
  .col-index li:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .ch-grid { grid-template-columns: 1fr; }
  .flip .ch-visual { order: 0; }
  .ch-visual { max-width: 520px; width: 100%; margin: 0 auto; }
  .rt-list { grid-template-columns: 1fr 1fr; }
  .quiz-result { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .qr-card { max-width: 260px; }
  .qr-text .btn-row { justify-content: center; }
}
@media (max-width: 560px) {
  .col-title { font-size: 17vw; line-height: 1.3; }
  .fan { height: 330px; }
  .fan-card { --x: calc((var(--i) - 1.5) * 74px); left: 50%; width: 90px; margin-left: -45px; padding: 7px; }
  .fan-card::before { inset: 4px; }
  .fan-num { font-size: 16px; margin-bottom: 4px; }
  .fan-name { font-size: 12px; margin-top: 6px; }
  .ci-num { font-size: 40px; }
  .ci-name { font-size: 24px; }
  .col-index a { padding: 18px 14px; }
  .chapter { padding: 100px 18px 90px; }
  .ch-title { font-size: 20vw; }
  .rt-list { gap: 12px; }
  .rt-name { font-size: 20px; }
  .rt-add { width: 34px; height: 34px; top: 18px; right: 18px; font-size: 18px; }
  .q label { font-size: 14px; padding: 10px 16px; }
}