/* ---------- What's in my bag: magazine spread ---------- */
/* a magazine "in the bag" page lying on the vanilla desk, in the site's own palette + type */

body.bag-page{
  --mag-pink: var(--flamingo-deep);
  --mag-ink: var(--ink);
  --mag-rule: rgba(74,36,32,0.55);
  --mag-paper: var(--white);
  --mag-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --mag-display: 'Playfair Display', Georgia, serif;
  --mag-script: 'Parisienne', cursive;
  --paper-grain: url("../images/textures/paper.png");
  --pink-cloth: url("../images/textures/pink-chambray.jpg");

  /* the desk behind the page gets a paper grain too */
  background: var(--paper-grain) repeat, var(--vanilla);
}

.mag{
  max-width: var(--max-width);
  margin: 26px auto 0;
  padding: 26px 46px 30px;
  background: var(--paper-grain) repeat, var(--mag-paper);
  color: var(--mag-ink);
  font-family: var(--mag-serif);
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(70,32,29,0.08), 0 18px 40px -18px rgba(70,32,29,0.35);
  overflow: hidden;
  position: relative;
}

/* ---------- the apple above the page ---------- */

.page-hero--bag{ padding-bottom: 0; }
.page-hero--bag .fruit-emoji{ margin-bottom: 0; }

/* ---------- hero ---------- */

.mag-hero{
  display: grid;
  grid-template-columns: 40% 1fr;
  gap: 0 40px;
  align-items: start;
  padding-top: 26px;
}

.hero-bag{
  margin: 0;
  position: relative;
  z-index: 2;
}

.hero-bag img{
  width: 100%;
  height: auto;
  filter: drop-shadow(0 14px 16px rgba(70,32,29,0.25));
  transition: transform .35s cubic-bezier(.2,.8,.3,1.2), filter .35s ease;
}

/* the bag links out to Songmont: lifts and shows a little tag on hover */
.bag-link{
  display: block;
  position: relative;
}

.bag-link:hover img,
.bag-link:focus-visible img{
  transform: translateY(-6px) rotate(-1deg);
  filter: drop-shadow(0 24px 22px rgba(70,32,29,0.3));
}

.bag-tag{
  position: absolute;
  left: 50%;
  top: 12%;
  transform: translate(-50%, 6px);
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid var(--flamingo);
  color: var(--brandy);
  font-size: 0.95rem;
  font-style: italic;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}

.bag-link:hover .bag-tag,
.bag-link:focus-visible .bag-tag{
  opacity: 1;
  transform: translate(-50%, 0);
}

.bag-cap-link{
  border-bottom: 1px solid var(--flamingo);
  transition: color .2s ease, border-color .2s ease;
}
.bag-cap-link:hover{
  color: var(--mag-pink);
  border-color: var(--mag-pink);
}

.hero-copy{
  padding-top: 28px;
  position: relative;
  z-index: 1;
}

.hero-copy h1{
  margin: 0;
  line-height: 0.95;
  font-family: var(--mag-display);
  color: var(--brandy);
}

.h-light{
  font-weight: 500;
  font-style: italic;
  font-size: clamp(2.6rem, 6vw, 4.6rem);
}

.h-heavy{
  display: block;
  font-weight: 700;
  font-size: clamp(4.6rem, 12.5vw, 9.4rem);
  letter-spacing: 0.02em;
  color: var(--mag-pink);
}

/* the flamingo band runs under the headline and bleeds left behind the bag */
.hero-band{
  margin: 14px 0 22px -100vw;
  padding: 12px 0 12px 100vw;
  background: var(--pink-cloth) repeat, var(--flamingo-soft);
  border-top: 1px solid var(--flamingo);
  border-bottom: 1px solid var(--flamingo);
  color: var(--brandy-deep);
  display: flex;
  gap: 26px;
  font-size: 1.05rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-variant-numeric: lining-nums;
  margin-right: -60px;
}

.dek{
  margin: 0 0 18px;
  font-size: 1.45rem;
  font-style: italic;
  line-height: 1.4;
  max-width: 30ch;
}

.hero-cap{
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.45;
  max-width: 34ch;
  padding-top: 14px;
  border-top: 1px solid var(--mag-rule);
}

.hero-cap b{
  font-weight: 600;
  color: var(--mag-pink);
}

.hero-note{
  margin: 18px 0 0;
  padding: 10px 16px;
  max-width: 34ch;
  background: var(--pink-cloth) repeat, var(--flamingo-soft);
  border-radius: 4px;
  font-size: 1.1rem;
  font-style: italic;
  line-height: 1.4;
  color: var(--brandy-deep);
  transform: rotate(-1deg);
}

.hero-note .ps{
  font-family: var(--mag-script);
  font-style: normal;
  font-size: 1.35rem;
  color: var(--brandy-deep);
  margin-right: 4px;
}

.footnote{
  margin: 14px 0 0;
  font-size: 0.95rem;
  font-style: italic;
  color: var(--ink-soft);
}

/* handwritten scrapbook notes */
.note{
  position: absolute;
  font-family: var(--mag-script);
  color: var(--mag-pink);
  line-height: 1.05;
  pointer-events: none;
  white-space: nowrap;
}

.note-keychain{
  left: 64%;
  top: 77%;
  font-size: 1.5rem;
  transform: rotate(-8deg);
}

/* ---------- spreads ---------- */

.spread-section{
  margin-top: 56px;
}

.spread-title{
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 6px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--mag-rule);
  font-family: var(--mag-display);
  font-weight: 600;
  font-style: italic;
  font-size: 2rem;
  color: var(--brandy);
}

.spread-title .num{
  font-family: var(--mag-serif);
  font-style: normal;
  font-weight: 500;
  font-size: 1.3rem;
  letter-spacing: 0.12em;
  font-variant-numeric: lining-nums;
  color: var(--mag-pink);
}

.spread{
  position: relative;
  container-type: inline-size;
  width: 100%;
}

.spread--tech{ aspect-ratio: 1000 / 640; }
.spread--face{ aspect-ratio: 1000 / 900; }
.spread--rest{ aspect-ratio: 1000 / 560; }

.leaders{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 1;
}

.leaders line{
  stroke: var(--ink-soft);
  stroke-width: 0.8;
  transition: stroke .2s ease, stroke-width .2s ease;
}
.leaders circle{ fill: var(--ink-soft); transition: fill .2s ease; }
.leaders .is-hot line{ stroke: var(--mag-pink); stroke-width: 1.4; }
.leaders .is-hot circle{ fill: var(--mag-pink); }

.entry{ display: contents; }

.item{
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  width: calc(var(--w) * 1%);
  height: auto;
  transform: rotate(calc(var(--r, 0) * 1deg));
  filter: drop-shadow(0 6px 7px rgba(70,32,29,0.2));
  transition: transform .3s cubic-bezier(.2,.8,.3,1.2), filter .3s ease;
  z-index: 2;
  cursor: default;
}

.item.is-hot{
  transform: rotate(calc(var(--r, 0) * 1deg)) scale(1.06) translateY(-4px);
  filter: drop-shadow(0 14px 14px rgba(70,32,29,0.26));
  z-index: 4;
}

.cap{
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  width: calc(var(--w) * 1%);
  margin: 0;
  font-family: var(--mag-serif);
  font-size: clamp(0.9rem, 1.7cqw, 1.12rem);
  line-height: 1.28;
  color: var(--mag-ink);
  z-index: 3;
  transition: color .2s ease;
}

.cap b{
  font-weight: 600;
  color: var(--brandy);
  transition: color .2s ease;
}
.cap.is-hot b{ color: var(--mag-pink); }

.note-lips{
  left: 33%;
  top: 63%;
  font-size: clamp(1.1rem, 2.3cqw, 1.6rem);
  transform: rotate(-6deg);
}

/* ---------- folio ---------- */

.mag-folio{
  display: flex;
  gap: 16px;
  align-items: baseline;
  margin-top: 40px;
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  color: var(--ink-soft);
}
.folio-num{
  font-weight: 600;
  color: var(--mag-pink);
}

/* ---------- smaller screens: unfold the spread into a grid ---------- */

@media (max-width: 760px){
  .mag{
    margin: 16px 12px 0;
    padding: 18px 18px 24px;
  }


  .mag-hero{
    grid-template-columns: 1fr;
  }
  .hero-copy{ order: -1; padding-top: 0; }
  .hero-bag{ width: 78%; margin: 0 auto; }
  .hero-band{ margin-right: -40px; gap: 16px; font-size: 0.9rem; }
  .note-keychain{ font-size: 1.2rem; left: 66%; }

  .spread{
    aspect-ratio: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px 18px;
    padding-top: 22px;
  }
  .leaders,
  .note-lips{ display: none; }

  .entry{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .item,
  .cap{
    position: static;
    width: auto;
  }

  /* keep the relative sizes from the spread, within reason */
  .item{
    width: clamp(30%, calc(var(--w) * 2.4%), 90%);
    max-height: 170px;
    object-fit: contain;
  }

  .cap{
    font-size: 1rem;
    text-align: center;
  }
}