/* SECTION 1 — all hero styles live here.
   Two compositions:
   769px and wider: copy left, definition top-middle, sketch bottom-left.
   768px and narrower: copy right, sketch over the desk edge, definition below.
   The final blocks contain the explicit size-by-size artwork positions.
   Images keep their original proportions; no layout custom properties. */

/* Wide composition */
.vibe-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  aspect-ratio: 1677 / 938;
  background: #eee5d9;
  color: #191512;
  font-family: Georgia, 'Times New Roman', serif;
}
.vibe-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url('../assets/images/mastery_lab_parchment_texture_tile.webp') repeat;
  background-size: 512px;
  opacity: .18;
  pointer-events: none;
}
.vibe-visual { display: contents; }
.vibe-diagonal { display: none; }
.vibe-scene {
  position: absolute;
  top: -10%;
  left: 25%;
  width: auto;
  max-width: none;
  height: 110%;
  object-fit: contain;
  pointer-events: none;
}
.vibe-sketch {
  position: absolute;
  left: -23%;
  bottom: -10%;
  width: 78%;
  max-width: none;
  height: auto;
  pointer-events: none;
}
.vibe-copy {
  position: relative;
  z-index: 2;
  width: 39%;
  margin-left: 3.8%;
  padding-top: 3.7%;
}
.vibe-brand {
  display: flex;
  align-items: center;
  gap: 22px;
  font: 400 clamp(12px, 1.3vw, 23px)/1.4 Georgia, serif;
  letter-spacing: .35em;
  text-decoration: none;
  margin-bottom: 2.1vw;
  white-space: nowrap;
}
.vibe-brand::after {
  content: '';
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, #bc8c5d, transparent);
}
.vibe-copy h1 {
  font: 400 6vw/.98 Georgia, 'Times New Roman', serif;
  letter-spacing: -.055em;
  margin: 0 0 1.4vw;
  max-width: none;
}
.vibe-copy h1 span {
  display: block;
  font-size: 4.3vw;
  line-height: 1.02;
  letter-spacing: -.055em;
  color: #783d17;
  margin-top: .45vw;
}
.vibe-copy > p {
  font: 400 1.65vw/1.25 Georgia, 'Times New Roman', serif;
  letter-spacing: -.025em;
  margin: 0 0 1.2vw;
  max-width: 94%;
}
.vibe-cta {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  padding: .7vw 2.4vw;
  border: 1px solid #29423b;
  border-radius: 7px;
  background: #102c29;
  color: #f7ebda;
  font: 400 1.55vw/1.4 Georgia, serif;
  text-decoration: none;
  transition: background .2s;
}
.vibe-cta:hover { background: #23483e; }
.vibe-definition {
  position: absolute;
  z-index: 3;
  left: 41%;
  top: 12%;
  width: 17%;
  padding: 1.25vw 1.9vw 1.5vw;
  background: #eee5d9f0;
  border: 1px solid #b58961;
  border-radius: 11px;
  color: #30291f;
  transition: background-color 900ms ease, border-color 900ms ease;
}
.vibe-star {
  display: block;
  color: #a7805c;
  font: 2.5vw/1 Georgia, serif;
  margin-bottom: .45vw;
}
.vibe-definition p {
  font: 400 1.2vw/1.26 Georgia, serif;
  letter-spacing: -.025em;
  margin: 0;
}
.vibe-mobile-nav, .vibe-mobile-message,
.vibe-copy h1 .vibe-mobile-message { display: none; }
@media (hover: hover) and (pointer: fine) {
  #top .vibe-definition:hover { background-color: #e9e4eff5; border-color: #aaa0b5; }
}
@media (prefers-reduced-motion: reduce) {
  .vibe-definition { transition: none; }
}
@media (min-width: 1801px) {
  .vibe-hero { width: 100vw; margin-left: calc((1800px - 100vw) / 2); }
}

/* Medium-wide: retain the desktop composition, with room for the full girl. */
@media (1024px <= width < 1200px) {
  .vibe-hero { aspect-ratio: auto; height: 640px; }
  .vibe-scene { height: 680px; top: -40px; left: 24%; }
  /* Enlarge the figures into the open space; crop the early stages off the left.
     Keep the right edge at 55% so the coloured scene stays unobscured. */
  .vibe-sketch { width: 95%; left: -40%; bottom: -45px; }
  .vibe-definition { left: 41%; top: 60px; width: 19%; }
}
@media (768px < width < 1024px) {
  .vibe-hero { aspect-ratio: auto; height: 560px; }
  .vibe-scene { height: 560px; top: 0; left: 22%; }
  .vibe-copy { padding-top: 28px; width: 38%; }
  .vibe-brand { font-size: 12px; margin-bottom: 20px; }
  .vibe-copy h1 { font-size: 48px; margin-bottom: 16px; }
  .vibe-copy h1 span { font-size: 33px; }
  .vibe-copy > p { font-size: 14px; line-height: 1.4; margin-bottom: 16px; }
  .vibe-cta { font-size: 14px; padding: 10px 20px; }
  .vibe-sketch { width: 90%; left: -35%; bottom: -40px; }
  .vibe-definition { left: 41%; top: 45px; width: 21%; padding: 15px; }
  .vibe-definition p { font-size: 12px; line-height: 1.35; }
  .vibe-star { font-size: 26px; margin-bottom: 8px; }
}

/* Narrow composition: all layers stay absolute on one illustrated canvas. */
@media (max-width: 768px) {
  .vibe-hero { aspect-ratio: auto; height: 844px; min-height: 0; padding: 0; }
  .vibe-copy { position: absolute; left: 46%; top: 24px; width: 50%; margin: 0; padding: 0; }
  .vibe-copy::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: -48px -44px -36px -36px;
    background: linear-gradient(90deg, transparent 0%, rgb(251 239 223 / 45%) 12%, rgb(251 239 223 / 94%) 30%, #fbefdf 55%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 78%, transparent 100%);
    filter: blur(12px);
    pointer-events: none;
  }
  .vibe-brand { gap: 6px; font-size: 9px; letter-spacing: .2em; margin-bottom: 20px; justify-content: center; }
  .vibe-brand::before, .vibe-brand::after { content: ''; height: 1px; flex: 1; background: #b58961; }
  .vibe-copy h1 { font-size: 34px; line-height: 1.08; letter-spacing: -.045em; margin-bottom: 16px; white-space: nowrap; }
  .vibe-copy h1 .vibe-desktop-message { font-size: 20px; line-height: 1.16; letter-spacing: -.025em; margin-top: 10px; white-space: normal; }
  .vibe-copy > p { font-size: 14px; line-height: 1.42; letter-spacing: 0; margin-bottom: 16px; max-width: none; text-wrap: pretty; }
  .vibe-cta { display: flex; justify-content: center; gap: 9px; padding: 10px 8px; min-height: 44px; border: 0; border-radius: 40px; background: #342218; font-size: 13px; white-space: nowrap; }
  .vibe-scene {
    z-index: 0;
    width: 860px;
    height: auto;
    left: -355px;
    top: -42px;
    /* Only the desk's front edge fades; the cloud overlaps this fade. */
    mask-image: linear-gradient(to bottom, #000 0%, #000 91%, transparent 100%);
  }
  .vibe-sketch { z-index: 3; left: 50%; top: 459px; bottom: auto; width: 490px; height: auto; transform: translateX(-50%); }
  .vibe-definition { left: 4%; right: 4%; top: auto; bottom: 16px; width: auto; padding: 15px 16px 15px 58px; margin: 0; background: #f7f1e8; border: 0; border-radius: 15px; box-shadow: 0 7px 20px #70472525; }
  .vibe-definition::before { content: 'WHAT IS VIBE CODING?'; display: block; font-size: 9px; line-height: 1.5; letter-spacing: .16em; color: #975330; margin-bottom: 8px; }
  .vibe-definition p { font-size: 13px; line-height: 1.45; letter-spacing: 0; }
  .vibe-star { position: absolute; left: 17px; top: 50%; transform: translateY(-50%); font-size: 29px; margin: 0; color: #985734; }
  .vibe-mobile-nav { position: absolute; z-index: 5; top: 12px; left: 16px; right: 16px; display: flex; justify-content: space-between; align-items: center; color: #fff6e7; }
  .vibe-mobile-nav > a, .vibe-planet { display: none; }
  .vibe-mobile-nav summary { cursor: pointer; list-style: none; font-size: 25px; min-width: 44px; min-height: 44px; color: #fff6e7; }
  .vibe-mobile-nav summary::-webkit-details-marker { display: none; }
  .vibe-mobile-nav nav { position: absolute; top: 45px; left: 0; display: flex; flex-direction: column; gap: 0; padding: 12px 20px; border-radius: 12px; background: #f7f1e8; color: #302218; box-shadow: 0 4px 20px #30221830; }
  .vibe-mobile-nav nav a { display: block; padding: 9px 0; }
}

/* Small phones */
@media (width < 375px) {
  .vibe-hero { height: 800px; }
  .vibe-scene { width: 800px; left: -330px; top: -45px; }
  .vibe-sketch { width: 440px; top: 430px; }
  .vibe-copy h1 { font-size: 28px; }
  .vibe-copy h1 .vibe-desktop-message { font-size: 18px; }
  .vibe-copy > p { font-size: 13.5px; }
  .vibe-cta { font-size: 12px; }
  .vibe-definition p { font-size: 12.5px; }
}
/* Large phones and narrow windows */
@media (430px <= width < 540px) {
  .vibe-hero { height: 900px; }
  .vibe-scene { width: 980px; left: -405px; top: -55px; }
  .vibe-sketch { width: 580px; top: 505px; }
  .vibe-copy h1 { font-size: 40px; }
  .vibe-copy h1 .vibe-desktop-message { font-size: 23px; }
  .vibe-copy > p { font-size: 15px; }
  .vibe-brand { font-size: 10px; }
  .vibe-definition p { font-size: 14px; }
}
/* Small portrait tablets */
@media (540px <= width < 640px) {
  .vibe-hero { height: 980px; }
  .vibe-scene { width: 1100px; left: -420px; top: -70px; }
  .vibe-sketch { width: 660px; top: 545px; }
  .vibe-copy h1 { font-size: 46px; }
  .vibe-copy h1 .vibe-desktop-message { font-size: 28px; }
  .vibe-copy > p { font-size: 16px; }
  .vibe-brand { font-size: 11px; }
  .vibe-definition p { font-size: 14px; }
}
/* Larger portrait tablets; above this range the wide composition takes over. */
@media (640px <= width <= 768px) {
  .vibe-hero { height: 1080px; }
  .vibe-scene { width: 1240px; left: -480px; top: -105px; }
  .vibe-sketch { width: 730px; top: 600px; }
  .vibe-definition { bottom: 36px; }
  .vibe-copy h1 { font-size: 54px; }
  .vibe-copy h1 .vibe-desktop-message { font-size: 32px; }
  .vibe-copy > p { font-size: 17px; }
  .vibe-brand { font-size: 12px; }
  .vibe-definition p { font-size: 14px; }
}