/* Kimini 英検ハロウィン LP · layout on top of components/kimini-hw.css */

:root {
  --orange: #ff6b17;
  --orange-deep: #e85a08;
  --cream: #fff6e8;
  --pumpkin: #ffe7a8;
  --purple: #6e2ba3;
  --purple-band: #55177a;
  --purple-deep: #4a1a73;
  --lav: #c9a9e2;
  --dark: #25172a;
  --ink: #3a1848;
  --white: #fff;
  --max: 960px;
  --pad: 16px;
  --ff-display: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", sans-serif;
  --ff-body: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--ff-body);
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink);
  background: var(--orange);
  overflow-x: hidden;
}
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol { margin: 0; }
h1, h2, h3, .hd__logo { font-family: var(--ff-display); font-weight: 900; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
h2 { font-size: 20px; line-height: 1.35; }
h3 { font-size: 16px; }
.note, small { font-size: 12px; line-height: 1.6; opacity: .85; }
.flag { font-size: 11px; font-weight: 900; letter-spacing: .08em; }

.wrap { width: min(100%, var(--max)); margin: 0 auto; padding: 0 var(--pad); }
/* full-bleed site — no side gutters / block column */
.site {
  width: 100%;
  max-width: none;
  margin: 0;
  overflow-x: clip;
  background: var(--orange);
}

/* ---------- header ---------- */
.hd {
  position: sticky; top: 0; z-index: var(--hw-z-sticky, 40);
  width: 100%;
  background: rgb(255 246 232 / .94);
  backdrop-filter: blur(8px);
  border-bottom: 3px solid var(--purple);
}
.hd__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; min-height: 56px;
  min-width: 0;
}
.hd__logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.hd__logo img {
  display: block;
  width: auto;
  height: 32px;
}
.hd__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 1;
  min-width: 0;
}
.hd__cta { width: 148px; max-width: 42vw; font-size: 13px; }
.hd__cta > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.hd__cta .fa-solid {
  font-size: 0.95em;
  color: currentColor;
}
@media (max-width: 600px) {
  .hd__in { gap: 8px; min-height: 52px; }
  .hd__logo img { height: 26px; }
  .hd__cta { width: min(118px, 34vw); font-size: 10px; }
  .hd__cta > span { gap: 4px; }
}

/* ---------- hero · layered FV (no single wide bitmap) ---------- */
.hero {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  background: var(--orange);
}
.hero .hw-fv.fvx,
.hero figure.hw-fv.fvx {
  --edge: max(2vw, calc(50% - 820px));
  margin: 0 !important;
  padding: 0;
  border: 0;
  border-radius: 0;
  width: 100%;
  max-width: none;
  display: block;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  aspect-ratio: auto;
  height: min(68vh, 680px);
  min-height: 520px;
  max-height: 680px;
  background: linear-gradient(180deg, #411988 0%, #4c1c99 15%, #5621aa 30%, #6027b3 45%, #6c2ebe 60%, #702fbf 72%);
}
.hero .fvx > * { position: absolute !important; pointer-events: none; }
.hero .fvx img { max-width: none; }
.hero .fvx__stars {
  inset: 0 0 auto 0;
  height: 78%;
  background: url("components/img/v2/fv/layers/fv-stars-tile.webp") repeat-x left top / auto 100%;
  opacity: .95;
}
.hero .fvx__cloud { width: clamp(140px, 14vw, 260px); height: auto; opacity: .9; }
.hero .fvx__cloud--1 { left: 3%; top: 6%; }
.hero .fvx__cloud--2 { left: calc(50% - min(23vw, 320px) - 13vw); top: 46%; width: clamp(90px, 8vw, 150px); opacity: .7; }
.hero .fvx__cloud--3 { right: calc(var(--edge) + 260px); top: 10%; }
.hero .fvx__moon { right: max(1vw, calc(var(--edge) - 40px)); top: 3%; width: clamp(70px, 6vw, 120px); height: auto; }
.hero .fvx__town {
  left: 0; right: 0; bottom: 0; height: 30%;
  background: url("components/img/v2/fv/layers/fv-skyline-tile.webp") repeat-x left bottom / auto 100%;
}
.hero .fvx__deco { bottom: 0; height: 58%; }
.hero .fvx__deco--l { left: 0; }
.hero .fvx__deco--r { right: 0; }
.hero .fvx__deco img,
.hero .fvx__girl img { height: 100%; width: auto; max-width: none; display: block; }
.hero .fvx__girl { bottom: 0; }
.hero .fvx__girl--witch { height: 70%; left: var(--edge); }
.hero .fvx__girl--cat { height: 92%; right: var(--edge); }
.hero .fvx__content,
.hero .hw-fv__lockup {
  left: 50%;
  top: 12%;
  transform: translateX(-50%);
  width: min(48vw, 680px);
  display: grid;
  justify-items: center;
  gap: 10px;
  pointer-events: auto;
  z-index: 3;
}
.hero .fvx__content > picture,
.hero .hw-fv__lockup > picture { width: 100%; }
.hero .fvx__content img,
.hero .hw-fv__lockup img { width: 100%; height: auto; display: block; max-width: 100%; }
.hero .fvx__deco img,
.hero .fvx__girl img { width: auto; max-width: none; }
.hero .hw-ended { pointer-events: auto; z-index: 4; }
.hero__meta {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 36em;
  padding: 0;
  margin: 0;
  background: none;
  filter: drop-shadow(0 2px 8px rgb(42 24 72 / .35));
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  width: 100%;
  margin: 2px 0 0;
}
.hero__cta .hw-cta { width: min(100%, 260px); }
@media (min-width: 960px) {
  .hero__cta .hw-cta { width: 260px; }
  .hero .fvx__content,
  .hero .hw-fv__lockup {
    top: 20%;
  }
}
@media (max-width: 959px) {
  .hero { min-height: calc(100svh - 59px); }
  .hero .hw-fv.fvx,
  .hero figure.hw-fv.fvx {
    height: calc(100svh - 59px);
    min-height: 600px;
    max-height: none;
    container-type: size;
  }
  .hero .fvx__stars { height: 70%; }
  .hero .fvx__cloud--2 { display: none; }
  .hero .fvx__moon { right: 3%; top: 40%; width: 60px; }
  .hero .fvx__cloud--3 { right: 30%; top: 44%; width: 120px; }
  .hero .fvx__town { height: 18%; }
  .hero .fvx__deco { height: 26%; }
  .hero .fvx__girl--witch { height: 41%; left: 1%; }
  .hero .fvx__girl--cat { height: 53%; right: 2%; }
  .hero .fvx__content,
  .hero .hw-fv__lockup {
    top: 6%;
    width: min(88vw, 90cqw);
    max-height: 48cqh;
    gap: 1.2cqh;
  }
  .hero .hw-fv__lockup > picture {
    width: min(82cqw, 42cqh);
    max-height: 32cqh;
  }
  .hero .hw-fv__lockup > picture img {
    width: 100%;
    height: auto;
    max-height: 32cqh;
    object-fit: contain;
  }
  .hero__meta { max-width: 100%; gap: 0.8cqh 1cqw; }
  .hero .hw-chip {
    font-size: clamp(8px, 2.2cqh, 11px);
    padding: 0.35cqh 1cqw;
  }
  .hero__cta {
    flex-wrap: nowrap;
    gap: 1.2cqw;
    margin: 0;
  }
  .hero__cta .hw-cta {
    width: min(42cqw, 240px);
    font-size: clamp(10px, 3cqh, 16px);
  }
  .hero .hw-div--garland {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    z-index: 3;
  }
  .hero + .band { padding-top: 36px; }
}
.hw-chip--solid {
  background: var(--cream);
  color: var(--purple-deep);
  border-color: var(--cream);
}
.hero .hw-div--garland {
  margin-top: 0;
}
html.is-ended .hero__meta { display: none; }

/* ---------- bands ---------- */
.band {
  position: relative;
  width: 100%;
  padding: 40px 0 0;
  scroll-margin-top: 72px;
}
/* garland hangs into next band (negative margin) — keep icons in the band bg, not on copy */
.hero + .band,
.hw-div--garland + .band,
.band:has(> .hw-div--garland) + .band {
  padding-top: 128px;
}
@media (max-width: 600px) {
  .hero + .band,
  .hw-div--garland + .band,
  .band:has(> .hw-div--garland) + .band {
    padding-top: 72px;
  }
}
.band--orange { background: var(--orange); color: var(--purple-deep); }
/* CSS argyle / check — no image (same idea as .hw-argyle, kept on the band so it cannot be wiped) */
.band--purple {
  background-color: #55177a;
  background-image:
    repeating-linear-gradient(
      45deg,
      transparent 0 22px,
      rgb(255 255 255 / .08) 22px 44px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent 0 22px,
      rgb(0 0 0 / .12) 22px 44px
    );
  background-repeat: repeat;
  color: var(--cream);
  padding-top: 48px;
  padding-bottom: 48px;
}
.band--cream { background: var(--cream); color: var(--ink); }
.band--lav { background: var(--lav); color: var(--ink); }
.band--dark { background: var(--dark); color: var(--cream); padding-bottom: 48px; }

/* prize details on dark bridge (no jump-to-details teaser) */
.prize-teaser {
  display: grid;
  gap: 16px;
  justify-items: stretch;
  text-align: center;
  padding: 8px 0 24px;
}
.prize-teaser .band-head { margin-bottom: 20px; }
.prize-teaser .prizes { width: 100%; }
.band--dark .note { color: rgb(255 246 232 / .85); opacity: 1; }
.band--dark .card-prize p:not(.flag) {
  color: var(--ink);
  opacity: .9;
}

.band .lead {
  text-align: center;
  max-width: 36em;
  margin: 0 auto 24px;
  font-weight: 700;
  line-height: 1.7;
}
/* orange band: cream plate for contrast (ink on orange alone is harsh) */
.band--orange .lead {
  color: var(--purple-deep);
  background: rgb(255 246 232 / .92);
  border: 1px solid rgb(74 26 115 / .12);
  border-radius: 12px;
  padding: 12px 16px;
}
.band--lav .lead { color: var(--purple-deep); }
.band--cream .lead { color: var(--purple-deep); }
.band--purple .lead { color: var(--cream); }
/* contrast: notes on purple / dark */
.band--purple .note {
  color: rgb(255 246 232 / .9);
  opacity: 1;
}
.band--purple .card-prize p:not(.flag) {
  color: var(--ink);
  opacity: .9;
}
.card-prize h3 {
  text-wrap: balance;
  line-height: 1.35;
  color: var(--purple-deep);
}
.card-prize .flag {
  color: var(--purple-deep);
  background: var(--pumpkin);
  padding: 2px 10px;
  border-radius: 999px;
}

.band-head {
  display: grid;
  justify-items: center;
  gap: 0;
  margin: 0 0 20px;
  padding: 0;
  text-align: center;
  width: 100%;
  min-width: 0;
}
.band-head .hw-ribbon {
  max-width: 100%;
  /* PNG tails/shadow add empty rows — pull the visual bar into even padding */
  margin-block: -12px;
}
.band-head .hw-ribbon > span {
  overflow-wrap: anywhere;
  line-height: 1.2;
}

.band > .hw-div { margin-top: 32px; }
.band--purple > .hw-div { margin-top: 40px; }

/* section host for corner deco */
.band.hw-deco-host { overflow: visible; }

/* ---------- cards / lists ---------- */
.rounds { display: grid; gap: 32px; justify-items: center; }
.round {
  width: min(100%, 280px);
  display: grid; justify-items: center; text-align: center; gap: 10px;
}
.round__photo {
  width: 168px; height: 168px; border-radius: 50%;
  border: 6px solid #fff;
  background: var(--cream);
  box-shadow: 0 8px 0 rgb(0 0 0 / .12);
  overflow: hidden;
}
.round__photo img { width: 100%; height: 100%; object-fit: cover; }
.round .hw-ribbon { margin-top: -14px; z-index: 1; }
.round .hw-cta { width: min(100%, 240px); font-size: 14px; }

.sisters { display: grid; gap: 16px; }
.sister {
  display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: start;
  background: #fff; border-radius: 16px; padding: 16px; color: var(--ink);
}
.sister .ava {
  width: 96px; height: 96px; border-radius: 50%;
  background: #f3e9ff; overflow: hidden;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 900; color: var(--purple);
}
.sister .ava img { width: 100%; height: 100%; object-fit: cover; }
.sister .ava picture { display: block; width: 100%; height: 100%; }
.sister-sns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin: 20px 0 0;
}
.sister-sns .hw-cta { width: min(100%, 280px); }
.sister-sns .hw-cta > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.sister-sns .fa-brands {
  font-size: 1.15em;
  line-height: 1;
}

/* PR動画（YouTube ショート・9:16）。押すまでは表紙画像だけ。枠の大きさは先に固定する */
.pr-video {
  display: flex; flex-direction: column; align-items: center;
  margin: 28px 0 0;
}
.pr-video__frame {
  position: relative;
  width: min(100%, 320px);
  aspect-ratio: 9 / 16;
  margin-top: 12px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--purple-deep);
  box-shadow: 0 8px 0 rgb(0 0 0 / .12);
}
.pr-video__thumb,
.pr-video__frame iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
/* hqdefault.jpg は 4:3（上下に黒帯）→ 中央を切り出して見せる */
.pr-video__thumb { object-fit: cover; object-position: center; }
.pr-video__play {
  position: absolute; top: 50%; left: 50%;
  width: 72px; height: 72px;
  margin: -36px 0 0 -36px;
  border: 0; border-radius: 50%;
  background: rgb(110 43 163 / .92);
  display: grid; place-items: center;
  padding: 0;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--purple-deep);
  animation: pr-video-pulse 2.4s ease-in-out infinite;
}
/* 再生の三角は CSS で描く（アイコンフォントが読めなくても出る） */
.pr-video__tri {
  width: 0; height: 0;
  margin-left: 6px; /* 三角の見た目の中心合わせ */
  border-style: solid;
  border-width: 14px 0 14px 24px;
  border-color: transparent transparent transparent #fff;
}
/* 表紙が読めない（非公開・通信失敗）ときは画像を隠して紫の枠だけにする */
.pr-video__thumb.is-error { visibility: hidden; }
.pr-video__play:hover { background: var(--purple); }
.pr-video__play:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@keyframes pr-video-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
.pr-video__link { margin: 12px 0 0; font-weight: 900; }
.pr-video__link a { color: #33104f; } /* オレンジ帯の上でコントラスト 4.5:1 以上 */
/* チャンネル名は「YouTube で見る」より一段控えめに */
.pr-video__channel { margin: 4px 0 0; font-size: .875em; font-weight: 700; color: #33104f; text-align: center; }
.pr-video__channel a { color: #33104f; }

.embeds {
  display: grid; grid-auto-flow: column; grid-auto-columns: 70%;
  gap: 16px; overflow-x: auto; padding-bottom: 8px;
}
.embed {
  aspect-ratio: 9/16; border-radius: 16px; background: #f3e9ff;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 900; color: var(--purple);
}

.steps { display: grid; gap: 16px; }
.step {
  display: grid; grid-template-columns: 72px 1fr; gap: 16px;
  background: #fff; color: var(--ink); border-radius: 16px; padding: 16px;
}
.step__n {
  width: 72px; height: 72px; border-radius: 50%; background: var(--pumpkin);
  display: grid; place-items: center;
  font-family: var(--ff-display); font-weight: 900; font-size: 32px; line-height: 1;
  color: var(--purple-deep);
}
.step .hw-cta { width: min(100%, 260px); font-size: 15px; margin-top: 8px; }

.warn {
  background: rgb(58 24 72 / .08);
  border: 2px dashed var(--purple-deep);
  border-radius: 16px; padding: 16px; color: var(--ink);
  margin-top: 24px;
}

.ideas {
  display: grid;
  gap: 24px;
  justify-items: center;
}
.idea {
  width: min(100%, 360px);
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 12px;
}
.prize-teaser__lead {
  text-align: center;
  margin: 0 0 20px;
}
.idea__photo {
  width: 100%;
  margin: 0;
  aspect-ratio: 1;
  border-radius: 0;
  border: 8px solid #fff;
  outline: 3px solid var(--purple-deep);
  outline-offset: 0;
  background: var(--cream);
  box-shadow: 0 8px 0 rgb(0 0 0 / .12);
  overflow: hidden;
}
.idea__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.idea .hw-ribbon { margin-top: -6px; z-index: 1; }

.prizes { display: grid; gap: 16px; }
.card-prize {
  background: #fff; color: var(--ink); border-radius: 16px; padding: 16px;
  display: grid; gap: 8px; justify-items: center; text-align: center;
}
.card-prize .ph {
  width: 100%; aspect-ratio: 2/1; border-radius: 12px;
  background: #f3e9ff; overflow: hidden;
}
.card-prize .ph img { width: 100%; height: 100%; object-fit: cover; }
.card-prize .ph picture { display: block; width: 100%; height: 100%; }
.card-prize .ph--empty {
  display: grid; place-items: center;
  font-size: 12px; font-weight: 900; color: var(--purple);
}

.lesson-extra__flag {
  display: table;
  margin: 0 auto 12px;
  color: var(--purple-deep);
  background: var(--pumpkin);
  padding: 4px 14px;
  border-radius: 999px;
}
.lesson-list {
  display: grid;
  gap: 20px;
}
.lesson-card {
  background: #fff;
  color: var(--ink);
  border-radius: 16px;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* 中身の幅で列が広がらないようにする */
  padding: 0;
}
.lesson-card__body { overflow-wrap: anywhere; }
.lesson-card__photo {
  width: 100%;
  margin: 0;
  aspect-ratio: 16 / 9;
  background: #f3e9ff;
  overflow: hidden;
}
.lesson-card__photo img,
.lesson-card__photo picture {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lesson-card__photo--empty {
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 900;
  color: var(--purple);
  letter-spacing: .04em;
}
.lesson-card__body { padding: 16px 18px 18px; }
.lesson-card__body h3 { margin: 0 0 6px; }
.lesson-card__body p { margin: 0; }
.lesson-card__body a:not(.hw-cta) {
  color: var(--purple);
  font-weight: 700;
  text-underline-offset: 3px;
}
.lesson-card__cta {
  display: grid;
  gap: 10px;
  justify-items: center;
  margin-top: 14px;
}
.lesson-card__cta .hw-cta { width: min(100%, 280px); }

.tl { list-style: none; padding: 0; display: grid; gap: 12px; margin: 0 0 8px; }
.hw-frame .tl li {
  background: rgb(255 255 255 / .55);
  border-radius: 12px; padding: 12px 16px; color: var(--ink);
}
.prize-schedule {
  background: var(--cream);
  color: var(--ink);
  border-radius: 16px;
  padding: 20px 22px 16px;
  text-align: left;
  width: 100%;
}
.prize-schedule h2 {
  margin: 0 0 14px;
  text-align: center;
  color: var(--purple-deep);
  font-size: 20px;
}
.prize-schedule .tl li {
  background: #fff;
  border-radius: 12px;
  padding: 12px 16px;
  color: var(--ink);
}
.band--dark .prize-schedule .note {
  color: rgb(74 26 115 / .75);
  opacity: 1;
}

.form { display: grid; gap: 16px; margin-top: 8px; }
label { display: grid; gap: 4px; font-weight: 700; font-size: 12px; }
input[type="text"], input[type="email"], input[type="url"] {
  min-height: 48px; border: 2px solid var(--purple);
  border-radius: 12px; padding: 8px 12px; font: inherit;
  background: #fff;
}
.check { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; }
.check input { margin-top: 4px; }

/* LINE で応募 */
.line-apply {
  list-style: none; padding: 0; margin: 8px 0 16px;
  display: grid; gap: 12px; counter-reset: line-step;
}
.line-apply li {
  counter-increment: line-step;
  display: grid; grid-template-columns: 32px 1fr; gap: 8px; align-items: start;
  background: #fff; border-radius: 12px; padding: 12px; line-height: 1.6;
}
.line-apply li::before {
  content: counter(line-step);
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--purple); color: #fff; font-weight: 900;
}
.line-apply strong { display: block; color: var(--purple); }
.line-howto { margin-top: 16px; }
.line-howto dl { margin: 8px 0 0; display: grid; gap: 4px; }
.line-howto dt { font-weight: 900; margin-top: 8px; }
.line-howto dd { margin: 0; line-height: 1.6; }
.note-list { padding-left: 1.2em; margin: 16px 0 8px; font-size: 12px; line-height: 1.6; }

.hw-frame .cond,
.hw-frame .notes { padding-left: 1.2em; margin: 0; }

details {
  background: #fff; color: var(--ink);
  border-radius: 12px; padding: 16px;
}
details + details { margin-top: 8px; }
summary { cursor: pointer; font-weight: 900; color: var(--purple); font-family: var(--ff-display); }

.box-white {
  background: #fff; color: var(--ink);
  border-radius: 16px; padding: 24px 16px;
  display: grid; gap: 16px;
}
.box-white h2 { color: var(--purple); }

.closing-band.band--purple {
  padding-bottom: 0;
  background-color: var(--lav);
  background-image: none;
  color: var(--ink);
}
.closing-plate {
  background: var(--cream);
  color: var(--ink);
  border-radius: 20px;
  overflow: hidden;
  display: grid;
}
.closing-plate__block {
  padding: 22px 20px;
  display: grid;
  gap: 10px;
}
.closing-plate__block + .closing-plate__block {
  border-top: 1px solid rgb(74 26 115 / .12);
}
.closing-plate .flag {
  color: var(--purple);
  font-weight: 900;
}
.closing-plate details {
  background: #fff;
}
.closing-plate__legal { gap: 8px; }
.band--purple .closing-plate .note {
  color: rgb(74 26 115 / .78);
  opacity: 1;
}
.kimini { display: grid; gap: 10px; }
.closing-band .hw-skyline {
  display: block;
  width: 100%;
  margin: 12px 0 0;
}
.legal { padding: 8px 0 24px; display: grid; gap: 8px; color: var(--cream); }
.ft {
  width: 100%;
  padding: 16px 0 104px;
  font-size: 12px; color: var(--cream);
  text-align: center; background: var(--purple-deep);
}
.ft a { color: var(--pumpkin); }
.ft__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 16px;
  margin: 0 0 12px;
}
.ft__nav a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site > .hw-skyline { display: block; width: 100%; margin: 0; }

/* legal on purple: keep readable */
.legal .note { color: rgb(255 246 232 / .88); opacity: 1; }

.follow {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--hw-z-follow, 30);
  display: flex;
  justify-content: center;
  background: var(--pumpkin); padding: 8px 16px;
  box-shadow: 0 -4px 16px rgb(0 0 0 / .15);
}
.follow .hw-cta {
  width: 100%;
  max-width: 360px;
}
@media (max-width: 600px) {
  .follow .hw-cta {
    width: min(100%, 320px);
    max-width: 320px;
  }
}
html.is-ended .follow,
html.is-form-in-view .follow { display: none; }

/* ---------- motion ---------- */
@keyframes hw-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes hw-bob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-4px) rotate(2deg); }
}
.band .hw-deco--tl img { animation: hw-float 4.5s ease-in-out infinite; }
.band .hw-deco--tr img { animation: hw-bob 5s ease-in-out infinite; }
.band .hw-deco--br img { animation: hw-float 5.5s ease-in-out infinite .4s; }
@media (prefers-reduced-motion: reduce) {
  .band .hw-deco img { animation: none; }
  .pr-video__play { animation: none; }
  html { scroll-behavior: auto; }
}

@media (min-width: 960px) {
  :root { --pad: 24px; }
  .rounds { grid-template-columns: repeat(2, 1fr); align-items: start; }
  .ideas { grid-template-columns: 1fr 1fr; align-items: start; }
  .prizes, .sisters { grid-template-columns: 1fr 1fr; }
  .prizes--awards { grid-template-columns: repeat(2, 1fr); }
  .follow { display: none; }
  .ft { padding-bottom: 32px; }
  .embeds { grid-auto-columns: 200px; }
  .pr-video__frame { width: min(100%, 360px); }
}