/* Dark Heart City homepage: a comic page on a golden-ratio grid.
   Columns: main area 61.8% (split again 61.8 / 38.2) + side column 38.2%
   => 38.2fr 23.6fr 38.2fr. One thin gutter everywhere. Mobile: panels stack in reading order. */
@font-face { font-family: "Anton"; src: url("../fonts/anton-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }

body.home { background: #e4ddd3; }

.comic { display: grid; gap: 8px; padding: 8px; max-width: 1480px; margin: 0 auto; }
.panel { position: relative; background: #f6f2ec; border: 1px solid #d6ccc0; overflow: hidden; padding: var(--space-5); }
.panel--ink { background: var(--ink); color: var(--on-ink); border-color: #000; }
.panel--ink h2, .panel--ink h3 { color: #fff; }
.label { font-size: var(--text-sm); letter-spacing: .12em; text-transform: uppercase; font-weight: 500; }
.label-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.arrow-link { display: inline-flex; gap: var(--space-2); align-items: center; font-size: var(--text-sm); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 4px; min-height: 32px; }
.panel--ink .arrow-link { color: var(--lavender, #c9a7f5); }
.impact { font-family: "Anton", Impact, sans-serif; font-weight: 400; text-transform: uppercase; line-height: .98; letter-spacing: .01em; }

/* 1. Hero */
.p-hero { padding: 0; display: grid; background: #f3eee7; }
.p-hero__art { position: relative; min-height: 420px; }
.p-hero__art img, .p-hero__art video { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; display: block; background: #2a1f28; }
@media (max-width: 1099px) { .p-hero__art { aspect-ratio: 3 / 4; } }
.p-hero__copy { padding: var(--space-6) var(--space-5) var(--space-7); }
.p-hero h1 { font-size: clamp(3rem, 13vw, 5.4rem); }
.p-hero h1 em { font-family: var(--font-display); font-style: italic; text-transform: uppercase; font-weight: 400; letter-spacing: 0; color: var(--electric, #7b2cbf); }
.p-hero__lines { margin-top: var(--space-4); font-family: var(--font-display); font-style: italic; font-size: var(--text-xl); line-height: 1.35; }
.p-hero__ctas { display: grid; gap: var(--space-3); margin-top: var(--space-6); max-width: 26rem; }
.btn--glow { background: var(--violet); color: var(--ink); }
.p-hero__sign { margin-top: var(--space-5); font-size: var(--text-sm); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

/* 2. Manifesto */
.p-manifesto { display: flex; flex-direction: column; justify-content: center; }
.p-manifesto p { font-family: "Anton", Impact, sans-serif; text-transform: uppercase; font-size: clamp(1.9rem, 7vw, 2.6rem); line-height: 1.02; }
.p-manifesto p + p { margin-top: var(--space-3); color: var(--electric, #7b2cbf); }

/* 3. Worlds */
.p-worlds h2 { font-size: var(--text-3xl); line-height: 1.05; margin-top: var(--space-2); }
.worlds { list-style: none; margin: var(--space-5) 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
.worlds a { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; text-decoration: none; color: #fff; padding: var(--space-4) var(--space-2); border: 1px solid rgba(255,255,255,.14); border-radius: 6px; font-size: var(--text-sm); letter-spacing: .06em; text-transform: uppercase; line-height: 1.3; min-height: 112px; justify-content: center; }
.worlds a:hover { border-color: var(--violet); color: var(--violet); }
.worlds svg { width: 34px; height: 34px; stroke: var(--violet); }

/* 4. Featured work */
.work { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 6px) / 2); gap: 6px; margin-top: var(--space-4);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain; }
.work::-webkit-scrollbar { display: none; }
.work:focus-visible { outline: 2px solid var(--violet); outline-offset: 4px; }
.work-slide { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; scroll-snap-align: start; }
.work-slide img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.work-slide:hover img { transform: scale(1.05); }
.work-slide span { position: absolute; left: 6px; bottom: 6px; background: #f6f2ec; color: var(--ink); font-size: 14px; letter-spacing: .08em; text-transform: uppercase; padding: 4px 8px; border: 1px solid var(--ink); }
.work-ctrl { display: flex; align-items: center; justify-content: center; gap: var(--space-4); margin-top: var(--space-3); }
.work-btn { width: var(--tap); height: var(--tap); border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: none; color: #fff; font-size: 1.2rem; cursor: pointer; }
.work-btn:hover { border-color: var(--violet); color: var(--violet); }
.work-count { font-size: var(--text-sm); letter-spacing: .14em; color: var(--on-ink-muted); min-width: 5.5em; text-align: center; }

/* 5. Philosophy */
.p-philo h2 { font-family: "Anton", Impact, sans-serif; font-weight: 400; text-transform: uppercase; font-size: clamp(2rem, 8vw, 2.6rem); line-height: 1; margin-top: var(--space-3); }
.p-philo h2 span { display: block; }
.p-philo h2 .serif { font-family: var(--font-display); font-style: italic; text-transform: none; color: var(--electric, #7b2cbf); }
.p-philo p { margin: var(--space-4) 0 var(--space-5); font-size: var(--text-lg); max-width: 26em; position: relative; z-index: 1; }
.spiral { position: absolute; right: -60px; bottom: -40px; width: 200px; opacity: .35; pointer-events: none; }
.p-philo .arrow-link { position: relative; z-index: 1; background: #f6f2ec; }

/* 6. Dark Heart City */
.p-dhc { padding: 0; display: grid; }
.p-dhc img { width: 100%; height: 320px; object-fit: cover; object-position: center 30%; display: block; }
.p-dhc__copy { padding: var(--space-5); }
.p-dhc h2 { font-size: var(--text-3xl); }
.p-dhc p { margin: var(--space-2) 0 var(--space-4); }
.p-dhc .tags { font-size: var(--text-sm); letter-spacing: .14em; text-transform: uppercase; color: var(--electric, #7b2cbf); }

/* 7. Shop. Learn. Grow. */
.p-shop h2 { font-family: "Anton", Impact, sans-serif; font-weight: 400; text-transform: uppercase; font-size: clamp(1.8rem, 6vw, 2.4rem); }
.tiles { list-style: none; margin: var(--space-4) 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
.tiles a { display: block; text-decoration: none; }
.tiles__img { aspect-ratio: 4 / 5; overflow: hidden; background: var(--ink); display: grid; place-items: center; }
.tiles__img img { width: 100%; height: 100%; object-fit: cover; }
.tiles__img--type { color: var(--violet); font-family: "Anton", Impact, sans-serif; text-transform: uppercase; font-size: 1.6rem; text-align: center; line-height: 1; padding: var(--space-3); }
.tiles b { display: block; margin-top: var(--space-2); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; font-size: var(--text-sm); }
.tiles span { display: block; color: var(--muted); font-size: var(--text-sm); }

/* 8. Tools I trust + stay connected */
.p-tools { display: flex; flex-direction: column; padding: 0; }
.p-tools__inner { padding: var(--space-5); }
.p-tools h2 { font-family: "Anton", Impact, sans-serif; font-weight: 400; text-transform: uppercase; font-size: var(--text-2xl); line-height: 1.1; }
.brands { list-style: none; margin: var(--space-4) 0 var(--space-3); padding: 0; display: grid; gap: var(--space-3); }
.brands li { display: flex; justify-content: space-between; gap: var(--space-3); border-bottom: 1px solid #ddd3c8; padding-bottom: var(--space-2); }
.brands b { font-weight: 500; letter-spacing: .08em; text-transform: uppercase; font-size: var(--text-sm); }
.brands a { color: var(--ink); }
.brands span { color: var(--muted); font-size: var(--text-sm); text-align: right; }
.disclosure { font-size: var(--text-sm); color: var(--muted); }
.p-tools__signup { margin-top: auto; background: var(--violet-wash); padding: var(--space-5); border-top: 1px solid #d6ccc0; }
.p-tools__signup h3 { font-family: "Anton", Impact, sans-serif; font-weight: 400; text-transform: uppercase; font-size: var(--text-xl); }
.p-tools__signup p { font-size: var(--text-sm); color: var(--ink-soft); margin: var(--space-1) 0 var(--space-3); }
.p-tools__signup form { display: grid; gap: var(--space-2); }
.p-tools__signup input { min-height: 48px; padding: 0 var(--space-3); border: 1px solid #cfc3d8; border-radius: var(--radius); font: var(--text-base) var(--font-body); background: #fff; }
.newsletter-status { font-size: var(--text-sm); min-height: 1.3em; }

/* 9. Transformation */
.p-transform { padding: 0; min-height: 420px; display: flex; align-items: flex-end; }
.p-transform img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.p-transform .caption { position: relative; margin: var(--space-5); background: #f6f2ec; border: 2px solid var(--ink); padding: var(--space-4) var(--space-5); max-width: 22rem; box-shadow: 6px 6px 0 var(--ink); }
.p-transform .caption p { font-family: "Anton", Impact, sans-serif; text-transform: uppercase; font-size: clamp(1.6rem, 6vw, 2.1rem); line-height: 1.02; color: var(--ink); }
.p-transform .caption p + p { margin-top: var(--space-2); color: var(--electric, #7b2cbf); }

/* ---------- Desktop: the golden grid ---------- */
@media (min-width: 1100px) {
  .comic {
    grid-template-columns: 38.2fr 23.6fr 38.2fr;
    grid-template-rows: minmax(250px, auto) minmax(400px, auto) auto auto;
    grid-template-areas:
      "hero  hero  manifesto"
      "hero  hero  worlds"
      "work  philo dhc"
      "shop  tools transform";
  }
  .p-hero { grid-area: hero; grid-template-columns: 1fr 1fr; }
  .p-hero__art { order: 2; min-height: 0; }
  .p-hero__copy { display: flex; flex-direction: column; justify-content: center; padding: var(--space-8) var(--space-7); }
  .p-manifesto { grid-area: manifesto; }
  .p-worlds { grid-area: worlds; }
  .worlds { grid-template-columns: repeat(3, 1fr); }
  .p-work { grid-area: work; }
  .work { grid-auto-columns: calc((100% - 18px) / 4); }
  .p-philo { grid-area: philo; }
  .p-dhc { grid-area: dhc; grid-template-columns: 1fr 1fr; }
  .p-dhc img { height: 100%; }
  .p-dhc__copy { display: flex; flex-direction: column; justify-content: center; }
  .p-shop { grid-area: shop; }
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .p-tools { grid-area: tools; }
  .p-transform { grid-area: transform; }
}

/* Panels fill their row height (no empty gaps) */
@media (min-width: 1100px) {
  .p-work { display: flex; flex-direction: column; }
  .work { flex: 1; }
  .work-slide { aspect-ratio: auto; min-height: 220px; height: 100%; }
  .p-shop { display: flex; flex-direction: column; }
  .tiles { flex: 1; }
  .tiles li, .tiles a { display: flex; flex-direction: column; height: 100%; }
  .tiles__img { aspect-ratio: auto; flex: 1; min-height: 160px; }
  .tiles__img img { object-position: center 25%; }
}

/* Latest videos (auto from YouTube) */
.yt-band { max-width: 1480px; margin: 0 auto; padding: 8px 8px 16px; }
.yt-band__inner { background: linear-gradient(180deg, rgba(31,20,29,.78), rgba(31,20,29,.94) 55%), url("../images/brand/banner-bay.webp") center 30% / cover no-repeat, var(--ink); color: #fff; border-radius: 4px; padding: var(--space-8) var(--space-5) var(--space-6); }
@media (min-width: 900px) { .yt-band__inner { padding: var(--space-9, 6rem) var(--space-7) var(--space-7); } }
.yt-band__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.yt-band h2 { font-family: "Anton", Impact, sans-serif; font-weight: 400; text-transform: uppercase; font-size: clamp(1.8rem, 6vw, 2.4rem); color: #fff; }
.yt-band h2 span { color: var(--violet); }
.yt-grid { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; gap: var(--space-4); }
@media (min-width: 700px) { .yt-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .yt-grid { grid-template-columns: repeat(4, 1fr); } }
.yt-card a { display: block; text-decoration: none; color: #fff; }
.yt-card__thumb { position: relative; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #2a1f28; }
.yt-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.yt-card a:hover img { transform: scale(1.04); }
.yt-card__play { position: absolute; inset: 0; display: grid; place-items: center; }
.yt-card__play span { width: 56px; height: 56px; border-radius: 50%; background: rgba(31,20,29,.75); border: 2px solid var(--violet); display: grid; place-items: center; }
.yt-card__play svg { width: 22px; height: 22px; margin-left: 3px; }
.yt-card b { display: block; font-weight: 500; margin-top: var(--space-3); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.yt-card small { color: var(--on-ink-muted); }
.yt-band__kicker { font-family: var(--font-display); font-style: italic; color: var(--violet); font-size: var(--text-xl); margin-bottom: var(--space-1); }
.yt-band__lead { color: var(--on-ink-muted); max-width: 40em; margin-top: var(--space-3); font-size: var(--text-lg); }
.yt-card__tag { display: block; margin-top: var(--space-3); color: var(--violet); font-size: var(--text-sm); letter-spacing: .08em; text-transform: uppercase; }
.yt-card__tag + b { margin-top: 4px; }
.worlds__welcome { color: var(--on-ink-muted); margin-top: var(--space-3); max-width: 34em; }
.p-worlds h2 { font-size: var(--text-3xl); }
.worlds__quote { margin: var(--space-4) 0 0; padding-left: var(--space-4); border-left: 2px solid var(--violet); }
.worlds__quote p { font-family: var(--font-display); font-style: italic; font-size: var(--text-xl); line-height: 1.35; color: #fff; }
.worlds__quote cite { display: block; margin-top: var(--space-2); font-style: normal; font-size: var(--text-sm); letter-spacing: .08em; text-transform: uppercase; color: var(--violet); }
.manifesto__peek { align-self: flex-start; margin-top: var(--space-5); color: #7b2cbf; }
.p-hero__ctas .btn { height: auto; min-height: 52px; padding: 12px 18px; line-height: 1.3; text-align: center; }