/**
 * halloween.css — หน้าคอลเลกชัน THE HAUNTED FIVE (/halloween/)
 *
 * อารมณ์ตามโปสเตอร์ของร้าน: ท้องฟ้าส้มยามค่ำ พระจันทร์เต็มดวง เงาดำ กระดาษฉีก
 * สีชุดนี้เป็นของหน้านี้หน้าเดียว จึงตั้งเป็นโทเคน --hw-* บน .hw-body
 * ไม่ไปปนกับโทเคนธีมชมพูของทั้งเว็บใน tokens.css
 *
 * ท้องฟ้าเป็นกลางคืนอยู่แล้วทั้งสองธีม ที่เปลี่ยนตามธีมคือ "กระดาษ"
 * กลางวันเป็นกระดาษคราฟต์ กลางคืนเป็นกระดาษเก่าโทนมืด
 */

.hw-body {
  --hw-sky-top:   #6d2a08;
  --hw-sky:       #e2701b;
  --hw-sky-hi:    #ffb54d;
  --hw-sky-lo:    #8f3a0c;
  --hw-moon-glow: rgb(255 186 84 / .55);
  --hw-silhouette: #160b05;
  --hw-lit:       #ffbf4f;
  --hw-title:     #fff0d6;
  --hw-sub:       #2a1207;

  --hw-paper:      #e8d3ad;
  --hw-paper-rim:  #f5e8cf;
  --hw-paper-ink:  #2b1a0f;
  --hw-paper-muted:#6a4a32;
  --hw-paper-noise: .10;
  --hw-web:        rgb(70 44 24 / .32);
  --hw-card:       rgb(255 250 240 / .38);
  --hw-card-edge:  rgb(90 55 25 / .14);
  --hw-glow:       rgb(255 160 60 / .38);
  --hw-shadow:     rgb(50 25 8 / .34);
  --hw-price:      #933707;
  --hw-btn:        #22140b;
  --hw-btn-hi:     #3a2213;
  --hw-btn-ink:    #ffc069;
  --hw-focus:      #c4500c;

  --hw-ground:     #1d100a;
  --hw-ground-deep:#120a06;
  --hw-ground-ink: #f2dfc0;
  --hw-ground-art: #060302;

  --hw-tear-h: clamp(26px, 3.6vw, 46px);
  --hw-mast: 52px;   /* ความสูงแถบหัวเว็บโดยประมาณ — ฉากท้องฟ้าลอดใต้แถบที่โปร่งแสง */

  background: var(--hw-ground-deep);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hw-body {
    --hw-sky:       #c45812;
    --hw-sky-hi:    #f39a3a;
    --hw-sky-lo:    #5e2306;
    --hw-sky-top:   #3d1704;
    --hw-paper:      #2a1c13;
    --hw-paper-rim:  #3b291b;
    --hw-paper-ink:  #f4e4c8;
    --hw-paper-muted:#c9ad8c;
    --hw-paper-noise: .06;
    --hw-web:        rgb(244 220 190 / .14);
    --hw-card:       rgb(255 225 190 / .045);
    --hw-card-edge:  rgb(255 210 160 / .10);
    --hw-glow:       rgb(255 140 40 / .30);
    --hw-shadow:     rgb(0 0 0 / .55);
    --hw-price:      #ffa458;
    --hw-btn:        #ff9a3c;
    --hw-btn-hi:     #ffb466;
    --hw-btn-ink:    #1d0e05;
    --hw-focus:      #ffb466;
  }
}
:root[data-theme="dark"] .hw-body {
  --hw-sky:       #c45812;
  --hw-sky-hi:    #f39a3a;
  --hw-sky-lo:    #5e2306;
  --hw-sky-top:   #3d1704;
  --hw-paper:      #2a1c13;
  --hw-paper-rim:  #3b291b;
  --hw-paper-ink:  #f4e4c8;
  --hw-paper-muted:#c9ad8c;
  --hw-paper-noise: .06;
  --hw-web:        rgb(244 220 190 / .14);
  --hw-card:       rgb(255 225 190 / .045);
  --hw-card-edge:  rgb(255 210 160 / .10);
  --hw-glow:       rgb(255 140 40 / .30);
  --hw-shadow:     rgb(0 0 0 / .55);
  --hw-price:      #ffa458;
  --hw-btn:        #ff9a3c;
  --hw-btn-hi:     #ffb466;
  --hw-btn-ink:    #1d0e05;
  --hw-focus:      #ffb466;
}

.haunted { margin-top: calc(-1 * var(--hw-mast)); }

/* ── ฉากท้องฟ้า ─────────────────────────────────────────────── */

.hw-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(400px, 50vw, 600px);
  padding: calc(var(--hw-mast) + clamp(72px, 9vw, 120px)) var(--gutter) calc(var(--hw-tear-h) + clamp(96px, 11vw, 150px));
  display: grid;
  place-items: center;
  text-align: center;
  background:
    radial-gradient(ellipse 60% 55% at 50% 42%, var(--hw-sky-hi) 0%, transparent 72%),
    linear-gradient(180deg, var(--hw-sky-top) 0%, var(--hw-sky) 42%, var(--hw-sky) 62%, var(--hw-sky-lo) 100%);
}

/* หมอกจาง ๆ ชิดขอบล่าง ให้เงาบ้านกับอีกาจมลงในฉาก ไม่ลอยเป็นสติกเกอร์ */
.hw-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 48%;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 60% at 22% 100%, rgb(255 228 196 / .22), transparent 70%),
    radial-gradient(ellipse 45% 50% at 78% 100%, rgb(255 228 196 / .16), transparent 70%);
}

.hw-moon {
  position: absolute;
  z-index: 0;
  left: clamp(-24px, 14vw - 30px, 22%);
  top: calc(var(--hw-mast) + clamp(8px, 3vw, 40px));
  width: clamp(120px, 18vw, 230px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 64% 30%, rgb(214 128 36 / .35) 0 7%, transparent 8%),
    radial-gradient(circle at 34% 62%, rgb(214 128 36 / .30) 0 10%, transparent 11%),
    radial-gradient(circle at 70% 70%, rgb(214 128 36 / .22) 0 5%, transparent 6%),
    radial-gradient(circle at 36% 34%, #fff4c9 0%, #ffd56c 40%, #f4a636 76%, #e2861f 100%);
  box-shadow: 0 0 60px 16px var(--hw-moon-glow), 0 0 160px 60px rgb(255 150 50 / .22);
}

.hw-tree, .hw-house, .hw-bats, .hw-crow {
  position: absolute;
  z-index: 2;
  color: var(--hw-silhouette);
  pointer-events: none;
}
.hw-tree  { left: 0; top: calc(var(--hw-mast) - 8px); width: clamp(230px, 38vw, 520px); }
.hw-house { right: -4px; bottom: calc(var(--hw-tear-h) - 6px); width: clamp(150px, 27vw, 360px); }
.hw-bats  { right: clamp(8px, 20vw, 360px); top: calc(var(--hw-mast) + 12px); width: clamp(110px, 16vw, 230px); }
.hw-crow  { z-index: 4; right: clamp(150px, 33vw, 520px); bottom: calc(var(--hw-tear-h) - 10px); width: clamp(56px, 7vw, 100px); }
.hw-house__lit { fill: var(--hw-lit); }
.hw-house__door { fill: #000; }
.hw-crow__eye { fill: var(--hw-lit); }

.hw-bat {
  transform-box: fill-box;
  transform-origin: center;
  animation: hw-flap .9s ease-in-out infinite alternate;
}
.hw-bat--b { animation-duration: 1.15s; animation-delay: -.4s; }
.hw-bat--c { animation-duration: .75s; animation-delay: -.2s; }
@keyframes hw-flap { to { transform: scaleY(.55); } }

.hw-hero__text { position: relative; z-index: 3; width: min(100%, 900px); }

.hw-kicker, .hw-title, .hw-by {
  font-family: "Rubik Dirt", var(--font-display);
  font-weight: 400;
}
.hw-kicker {
  margin: 0 0 .1em;
  font-size: clamp(1.15rem, 2.6vw, 2rem);
  letter-spacing: .04em;
  color: var(--hw-title);
}
.hw-title {
  margin: 0;
  font-size: clamp(2.7rem, 8.4vw, 6.2rem);
  line-height: .95;
  letter-spacing: .01em;
  color: var(--hw-title);
  text-shadow: 0 3px 0 rgb(80 26 0 / .35), 0 0 34px rgb(110 36 0 / .45);
  text-wrap: balance;
}
.hw-sub span { display: inline-block; }
.hw-sub {
  margin: .7em auto 0;
  font: 700 clamp(1rem, 2.1vw, 1.5rem)/1.3 var(--font-body);
  color: var(--hw-sub);
  text-wrap: balance;
}

.hw-tear {
  position: absolute;
  z-index: 5;
  left: 0; bottom: -1px;
  width: 100%;
  height: var(--hw-tear-h);
}
.hw-tear__rim   { fill: var(--hw-paper-rim); }
.hw-tear__paper { fill: var(--hw-paper); }

/* ── กระดาษ ─────────────────────────────────────────────────── */

.hw-paper {
  position: relative;
  color: var(--hw-paper-ink);
  background-color: var(--hw-paper);
  /* เนื้อกระดาษ: noise ละเอียด + คราบเหลืองจาง ๆ สองดวง */
  background-image:
    radial-gradient(ellipse 40% 30% at 12% 20%, rgb(160 110 50 / .10), transparent 70%),
    radial-gradient(ellipse 35% 28% at 88% 70%, rgb(160 110 50 / .10), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .2 0 0 0 0 .1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-blend-mode: normal, normal, multiply;
  padding: clamp(28px, 4vw, 52px) 0 calc(var(--hw-tear-h) + clamp(56px, 7vw, 96px));
}
.hw-paper::before {   /* คุมความเข้มของ noise ตามธีม โดยไม่ต้องมีภาพสองชุด */
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hw-paper);
  opacity: calc(1 - var(--hw-paper-noise) * 4);
  pointer-events: none;
}
.hw-web {
  position: absolute;
  top: 0; left: 0;
  width: clamp(80px, 13vw, 170px);
  color: var(--hw-web);
  pointer-events: none;
}
.hw-web--right { left: auto; right: 0; transform: scaleX(-1); }

.hw-paper__inner {
  position: relative;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.hw-state {
  margin: var(--space-xl) auto;
  text-align: center;
  color: var(--hw-paper-muted);
}

.hw-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 3vw, 28px) clamp(10px, 2.2vw, 24px);
}
.hw-grid:empty { display: none; }

/* ตัวกลางของจำนวนคี่คือตัวเด่น แบบโปสเตอร์ — จอแคบยกขึ้นไปเต็มแถวบนสุด */
.hw-card--feature { grid-column: 1 / -1; order: -1; }

@media (min-width: 1100px) {
  .hw-grid { grid-template-columns: 1fr 1fr 1.5fr 1fr 1fr; align-items: stretch; }
  .hw-card--feature { grid-column: auto; order: 0; }
}

.hw-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(10px, 1.6vw, 18px) clamp(10px, 1.4vw, 16px) clamp(14px, 1.8vw, 20px);
  border-radius: 22px;
  background: var(--hw-card);
  box-shadow: inset 0 0 0 1px var(--hw-card-edge);
}

.hw-card__media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
}
.hw-card--feature .hw-card__media { max-width: min(420px, 82%); }
.hw-card__media::before {   /* แสงส้มด้านหลัง — ให้ของสีดำ (แมว หม้อ) ไม่จมหายบนกระดาษมืด */
  content: "";
  position: absolute;
  inset: 4% 2% 10%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 55%, var(--hw-glow) 0%, transparent 66%);
}
.hw-card__media::after {    /* เงาตกบนพื้น */
  content: "";
  position: absolute;
  left: 20%; right: 20%; bottom: 4%;
  height: 8%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--hw-shadow), transparent);
  transition: transform .35s ease, opacity .35s ease;
}
.hw-card__media img {
  position: absolute;
  z-index: 1;
  inset: 4% 7% 7%;
  width: 86%;
  height: 89%;
  object-fit: contain;
  object-position: center bottom;
  transition: transform .35s cubic-bezier(.2, .7, .3, 1);
}
.hw-card:hover .hw-card__media img { transform: translateY(-6px) rotate(-2deg); }
.hw-card:hover .hw-card__media::after { transform: scaleX(.86); opacity: .75; }

.hw-card__name {
  margin: clamp(6px, 1vw, 12px) 0 2px;
  font: 700 clamp(1rem, 1.7vw, 1.4rem)/1.15 var(--font-body);
  letter-spacing: .03em;
}
.hw-card__name a { color: inherit; text-decoration: none; }
.hw-card__name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.hw-card__price {
  margin: 0;
  font: 600 clamp(1rem, 1.5vw, 1.25rem)/1.2 var(--font-body);
  color: var(--hw-price);
  font-variant-numeric: tabular-nums;
}
.hw-card__summary {
  margin: 6px 0 14px;
  max-width: 30ch;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--hw-paper-muted);
  flex-grow: 1;
}

.hw-add {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: 0;
  border-radius: 999px;
  min-height: 44px;
  padding: 10px 20px;
  width: min(100%, 220px);
  font: 600 .95rem/1 var(--font-body);
  color: var(--hw-btn-ink);
  background: var(--hw-btn);
  cursor: pointer;
  transition: background-color .2s ease, transform .15s ease;
}
.hw-add:hover { background: var(--hw-btn-hi); }
.hw-add:active { transform: translateY(1px) scale(.98); }
.hw-add:disabled { cursor: default; }
.hw-add:focus-visible,
.hw-card__name a:focus-visible,
.hw-howto a:focus-visible {
  outline: 3px solid var(--hw-focus);
  outline-offset: 3px;
}

.hw-howto {
  margin: clamp(28px, 4vw, 44px) auto 0;
  max-width: 60ch;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--hw-paper-muted);
}
.hw-howto a { color: var(--hw-price); text-underline-offset: 3px; margin-inline: .2em; }

/* ── พื้นดิน ────────────────────────────────────────────────── */

.hw-ground {
  position: relative;
  min-height: clamp(190px, 20vw, 250px);
  padding: clamp(18px, 3vw, 32px) var(--gutter) clamp(24px, 3vw, 36px);
  color: var(--hw-ground-ink);
  /* แสงถ่านส้มต่ำ ๆ หลังรั้วกับหลุมศพ — เงาดำจะได้มีอะไรให้ตัดขอบ ไม่จมไปกับพื้น */
  background:
    radial-gradient(ellipse 45% 60% at 46% 100%, rgb(255 120 30 / .26), transparent 72%),
    radial-gradient(ellipse 22% 50% at 88% 100%, rgb(255 120 30 / .22), transparent 72%),
    linear-gradient(180deg, var(--hw-ground) 0%, var(--hw-ground-deep) 100%);
}
.hw-ground__edge {
  position: absolute;
  left: 0;
  top: calc(1px - var(--hw-tear-h));
  width: 100%;
  height: var(--hw-tear-h);
  fill: var(--hw-ground);
}
.hw-ground__art {
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: clamp(96px, 12vw, 150px);
  color: var(--hw-ground-art);
  pointer-events: none;
}
.hw-ground__text {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-xs) var(--space-lg);
}
.hw-limited { margin: 0; font-size: var(--text-sm); line-height: 1.45; }
.hw-limited strong { display: block; font-weight: 700; letter-spacing: .1em; }
.hw-limited span { opacity: .78; }
.hw-by { margin: 0; font-size: clamp(1.1rem, 2vw, 1.5rem); color: var(--hw-lit); }

.hw-body .colophon {
  margin-top: 0;
  border-top: 0;
  color: var(--hw-ground-ink);
  background: var(--hw-ground-deep);
}
.hw-body .colophon > div,
.hw-body .colophon a { color: var(--hw-ground-ink); }
.hw-body .colophon span { opacity: .75; }

@media (min-width: 768px) { .hw-body { --hw-mast: 64px; } }

@media (max-width: 599px) {
  .hw-crow { right: auto; left: 6%; }
  .hw-sub {
    display: inline-block;
    max-width: 19em;
    padding: .3em .9em;
    border-radius: 18px;
    font-size: .95rem;
    background: rgb(255 196 120 / .5);
  }
  .hw-add { width: 100%; padding-inline: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .hw-bat { animation: none; }
  .hw-card__media img, .hw-card__media::after { transition: none; }
  .hw-card:hover .hw-card__media img { transform: none; }
}