/* Main page (/) styles. Only var() references from tokens.css. */

/* ---------- Hero ---------- */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-8) var(--gutter);
}
.hero .site-header { padding: 0; background: none; }
.hero__tagline {
  font-family: var(--font-hand);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  color: var(--color-brown);
  margin-top: calc(-1 * var(--space-2));
  letter-spacing: 0.01em;
  -webkit-text-stroke: 0.4px currentColor;
}
.hero__email {
  margin-top: var(--space-8);
  font-size: var(--fs-xl);
  letter-spacing: -0.02em;
  color: var(--color-black);
}

/* ---------- Bistro Bay band ---------- */
.bistro {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: 93px;
}
.doodles { position: absolute; inset: 0; pointer-events: none; }
.doodle {
  position: absolute;
  width: clamp(44px, 5.6vw, 82px);
  opacity: var(--opacity-doodle);
  transform: translate(-50%, -50%);
}
.doodle--1  { left: 7.3%;  top: 7.5%; }
.doodle--2  { left: 24%;   top: 7.5%; }
.doodle--3  { left: 40.6%; top: 7.5%; }
.doodle--4  { left: 57%;   top: 7.5%; }
.doodle--5  { left: 73.6%; top: 7.5%; }
.doodle--6  { left: 90%;   top: 7%; }
.doodle--7  { left: 16.7%; top: 23%; }
.doodle--8  { left: 33%;   top: 23.5%; }
.doodle--9  { left: 7%;    top: 40%; }
.doodle--10 { left: 33%;   top: 55%; }
.doodle--11 { left: 16.7%; top: 55%; }
.doodle--12 { left: 8.3%;  top: 72%; }
.doodle--13 { left: 24.6%; top: 72%; }
.doodle--14 { left: 74%;   top: 71.5%; }
.doodle--15 { left: 73.6%; top: 39%; }
.doodle--16 { left: 34%;   top: 89%; }
.doodle--17 { left: 52%;   top: 87%; }
.doodle--18 { left: 66.7%; top: 88.5%; }
.doodle--19 { left: 85%;   top: 87%; }
.doodle--20 { left: 98.5%; top: 23.5%; }
.doodle--21 { left: 98.5%; top: 53%; }

.bistro__inner {
  position: relative;
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: clamp(var(--gutter), 8.7vw, 125px) clamp(var(--gutter), 6.8vw, 98px);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6);
}
.bistro__brand {
  flex: 0 1 310px;
  margin-top: 107px;
  text-align: center;
}
.bistro__brand h2 { margin: 0; }
.bistro__logo { width: 100%; }
.bistro__soon {
  margin-top: var(--space-4);
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-3xl);
  line-height: 1;
  color: var(--color-cream);
}

.phones {
  display: flex;
  gap: clamp(var(--space-3), 3.1vw, 45px);
  flex: 0 1 auto;
}
.phone {
  position: relative;
  width: clamp(150px, 17.4vw, 250px);
  aspect-ratio: 250 / 505;
  padding: 11px;
  border-radius: var(--radius-phone);
  background: var(--color-black);
  box-shadow: var(--shadow-phone);
}
.phone::before {
  content: "";
  position: absolute;
  top: 11px;
  left: 50%;
  width: 38%;
  height: 20px;
  transform: translateX(-50%);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  background: var(--color-black);
  z-index: 1;
}
.phone::after {
  content: "";
  position: absolute;
  top: 17px;
  left: 50%;
  width: 13%;
  height: 4px;
  transform: translateX(-50%);
  border-radius: var(--radius-pill);
  background: var(--color-grey-dark);
  z-index: 2;
}
.phone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-screen);
}

.characters {
  position: relative;
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  margin-top: var(--space-3);
  display: flex;
  justify-content: center;
  gap: 0;
  padding-inline: var(--space-6);
}
.characters li { flex: 0 1 155px; display: flex; justify-content: center; align-items: flex-end; }
.characters img {
  width: 100%;
  max-width: 155px;
  aspect-ratio: 155 / 150;
  object-fit: cover;
  object-position: top;
}

/* ---------- Team ---------- */
.team {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-9) var(--gutter);
}
.team__grid {
  --hex-half: 132.5px;
  --hex-img: 282px;
  display: grid;
  grid-template-columns: 167px repeat(7, var(--hex-half));
  align-items: start;
}
.team__title {
  grid-column: 1 / 3;
  grid-row: 1;
  margin-top: 52px;
  font-weight: var(--fw-extrabold);
  font-size: calc(var(--fs-display) * 0.86);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-white);
}
.hexes { display: contents; }
.hex {
  position: relative;
  grid-column: span 2;
  display: flex;
  justify-content: center;
}
.hex--1 { grid-column: 3 / 5; grid-row: 1; }
.hex--2 { grid-column: 5 / 7; grid-row: 1; }
.hex--3 { grid-column: 7 / 9; grid-row: 1; }
.hex--4, .hex--5, .hex--6 { grid-row: 2; margin-top: -32px; }
.hex--4 { grid-column: 2 / 4; }
.hex--5 { grid-column: 4 / 6; }
.hex--6 { grid-column: 6 / 8; }
.hex > img:first-child { width: var(--hex-img); max-width: none; flex: none; }
.hex__name {
  position: absolute;
  top: 78%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-lg);
  line-height: 1;
  color: var(--color-white);
  white-space: nowrap;
  padding-bottom: 12px;
}
.hex__name::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 128px;
  height: 5px;
  transform: translateX(-50%);
  background: var(--color-accent);
}
.hex__jobs {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  text-decoration: none;
  padding-bottom: 0;
}
.hex__jobs::after { display: none; }
.hex__jobs:hover { text-decoration: underline; }
.hex__bee {
  position: absolute;
  top: 0;
  right: -2px;
  width: 72px;
  transform: scaleX(-1);
}

/* ---------- About ---------- */
.about {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-9) var(--gutter);
  text-align: center;
}
.about__inner { max-width: 700px; }
.about__bee { position: relative; width: 96px; margin: 0 auto var(--space-4); }
.about__bee-img { position: relative; z-index: 1; width: 100%; }
.about__bee-shadow { position: absolute; left: 0; top: 30%; width: 100%; }
.about__title {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  margin-bottom: var(--space-6);
}
.about p {
  font-weight: var(--fw-light);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--color-grey-dark);
}
.about p + p { margin-top: var(--space-4); }
.about .about__motto {
  margin-top: var(--space-7);
  font-weight: var(--fw-bold);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  color: var(--color-black);
}

/* ---------- Mid widths: scale the team grid down ---------- */
@media (max-width: 1180px) and (min-width: 769px) {
  .team__grid { --hex-half: 10.5vw; --hex-img: 22.4vw; grid-template-columns: 13vw repeat(7, var(--hex-half)); }
  .team__title { font-size: 7.5vw; }
  .hex__name { font-size: var(--fs-base); }
  .hex__name::after { width: 10vw; }
}

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
  .section--full { min-height: 0; }

  .hero { padding: var(--space-9) var(--gutter); }
  .hero__tagline { font-size: var(--fs-xl); margin-top: calc(-1 * var(--space-4)); }
  .hero__email { margin-top: var(--space-7); font-size: var(--fs-md); }

  .bistro { padding-top: var(--space-8); }
  .bistro__inner { flex-direction: column; align-items: center; gap: var(--space-7); padding-inline: var(--gutter); }
  .bistro__brand { flex: none; width: min(260px, 70vw); margin-top: 0; }
  .bistro__soon { font-size: var(--fs-2xl); }
  .phones { width: 100%; justify-content: center; gap: var(--space-3); }
  .phone { flex: 1 1 0; width: auto; max-width: 160px; padding: 6px; border-radius: var(--radius-md); }
  .phone::before { top: 6px; height: 10px; border-radius: 0 0 6px 6px; }
  .phone::after { display: none; }
  .phone img { border-radius: 8px; }

  .doodle { width: 44px; }
  .doodle--7, .doodle--8, .doodle--10, .doodle--11, .doodle--15, .doodle--20, .doodle--21 { display: none; }

  .characters {
    margin-top: var(--space-7);
    padding-inline: var(--gutter);
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .characters::-webkit-scrollbar { display: none; }
  .characters li { flex: 0 0 104px; scroll-snap-align: start; }

  .team { padding: var(--space-8) var(--gutter); }
  .team__grid {
    --hex-img: 100%;
    width: 100%;
    max-width: 380px;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-3);
    row-gap: var(--space-2);
  }
  .team__title { grid-column: 1 / -1; grid-row: auto; margin: 0 0 var(--space-6); text-align: center; font-size: 3.5rem; }
  .hex, .hex--1, .hex--2, .hex--3, .hex--4, .hex--5, .hex--6 { grid-column: auto; grid-row: auto; margin-top: 0; }
  .hex > img:first-child { width: 100%; }
  .hex__name { font-size: var(--fs-sm); padding-bottom: 7px; }
  .hex__name::after { width: 88px; height: 4px; }
  .hex__jobs { font-size: var(--fs-2xs); }
  .hex__bee { width: 44px; }

  .about { padding: var(--space-8) var(--gutter); }
  .about__title { font-size: var(--fs-xl); }
  .about p { font-size: var(--fs-base); }
  .about .about__motto { font-size: var(--fs-lg); margin-top: var(--space-6); }
}