:root {
  --cream: #EDE6D8;
  --cream-alt: #EDE6D8;
  --green: #37483A;
  --green-2: #3C4E3D;
  --ink: #2E3A2C;
  --cream-text: #F2E9DB;

  --font-serif: "Newsreader", Georgia, serif;
  --font-mono: "Space Mono", "Courier New", monospace;

  --max-width: 1180px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--cream); }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1.6;
}

h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 20px;
  line-height: 1.15;
}

em {
  font-style: italic;
}

p { margin: 0 0 16px; }

a { color: inherit; }

/* Buttons */
.btn {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.03em;
  text-decoration: none;
  padding: 12px 28px;
  border-radius: 999px;
  border: 1px solid var(--ink);
  white-space: nowrap;
  background-color: transparent;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn--outline { color: var(--ink); }

.btn--outline:hover,
.btn--outline:focus-visible,
.btn--outline:active {
  background-color: var(--green);
  border-color: var(--green);
  color: var(--cream-text);
}

.btn--light {
  border-color: var(--cream-text);
  color: var(--cream-text);
}

.btn--light:hover,
.btn--light:focus-visible,
.btn--light:active {
  background-color: var(--cream);
  border-color: var(--cream);
  color: var(--green);
}

/* Header */
.topbar {
  background: var(--cream);
  padding: 24px 0;
}

.topbar__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "contact logo button";
  align-items: center;
  gap: 20px;
}

.contact { grid-area: contact; }
.logo { grid-area: logo; justify-self: center; }
.topbar__cta { grid-area: button; justify-self: end; }

.contact {
  font-style: normal;
  font-size: 13px;
  line-height: 1.5;
}

.contact a {
  color: inherit;
  text-decoration: none;
}

.contact a:hover,
.contact a:focus-visible {
  text-decoration: underline;
}

.whatsapp-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.whatsapp-icon {
  width: 13px;
  height: 13px;
  fill: currentColor;
  flex-shrink: 0;
}

.contact--light { color: var(--cream-text); }

.logo__img { height: 46px; width: auto; display: block; }

/* Hero */
.hero {
  background: var(--cream-alt);
  position: relative;
  /* safety net: the mascot must never be able to bleed up into the header
     above, no matter the viewport size */
  overflow: hidden;
}

.hero__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 28px 40px 0;
  /* guarantees there's always enough room above the wood strip for the
     mascot to fit without touching the header AND leaves visible breathing
     room between the text and the wood (mascot height is always ~2.4x the
     wood height, so this reserves that same extra space, scaling with the
     viewport just like the wood strip and mascot do) */
  min-height: clamp(60px, calc(28px + 26vw), 300px);
}

.hero__title {
  font-size: clamp(28px, 4vw, 44px);
  max-width: 560px;
  margin-bottom: 0;
}

/* Mascot: absolutely positioned against .hero so its feet/apron line up
   exactly with the bottom of the wood strip and it bleeds up over the
   text area, matching the real design (measured directly from the
   source files: mascot height ≈ 2.4x the wood strip height, and its
   bottom edge is flush with the wood strip's bottom edge). */
.hero__mascot {
  position: absolute;
  right: 13%;
  bottom: 0;
  height: clamp(168px, 45vw, 456px);
  z-index: 3;
  pointer-events: none;
}

.mascot-img {
  height: 100%;
  width: auto;
  display: block;
}

.hero__wood {
  /* measured ~18.7% of viewport width consistently across desktop and mobile */
  height: clamp(70px, 18.7vw, 190px);
  background-image: url("assets/madera.png");
  background-repeat: repeat-x;
  background-size: auto 100%;
  position: relative;
  z-index: 1;
}

/* Mission */
.mission {
  padding: 90px 0;
}

.mission__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}

.mission__text h2 { font-size: clamp(26px, 3vw, 36px); }

.mission__gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.photo-slot {
  background: var(--green);
  color: var(--cream-text);
  aspect-ratio: 808 / 1070; /* measured from the real design */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  background-size: cover;
  background-position: center;
}

.photo-slot span {
  font-family: var(--font-serif);
  font-size: 96px;
  opacity: 0.9;
}

.photo-slot--wide {
  aspect-ratio: 1394 / 1071; /* measured from the real design, ~1.3 */
  flex: 0 0 41%;
}

/* About */
.about {
  padding-bottom: 100px;
}

.about__row {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
  gap: 50px;
}

.about__row + .about__row { margin-top: 60px; }

.about__row--1 .photo-slot--wide { order: 1; }
.about__row--1 .about__text { order: 2; }

.about__row--2 .about__text { order: 1; }
.about__row--2 .photo-slot--wide { order: 2; }

.about__text { flex: 1 1 0%; }

.about__text h2 {
  font-size: clamp(26px, 3vw, 34px);
  text-align: right;
}

.about__text--first p,
.about__text--first { text-align: right; }

/* Footer */
.footer {
  background: var(--green);
  padding: 50px 0;
}

.footer__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* Responsive */
@media (max-width: 900px) {
  /* side margin measured directly from the mobile design (~12.8% of viewport) */
  .topbar__inner,
  .hero__inner,
  .mission__inner,
  .about__row,
  .footer__inner {
    padding-left: 12%;
    padding-right: 12%;
  }

  .topbar__inner {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "logo logo"
      "contact button";
    row-gap: 14px;
  }

  .logo { justify-self: center; }
  .contact { justify-self: start; }
  .topbar__cta { justify-self: end; align-self: center; }

  /* keep the text column clear of the mascot, which now overlaps from the right */
  .hero__title { max-width: 58%; font-size: clamp(20px, 5.6vw, 30px); }

  /* mascot bleeds almost to the screen edge on mobile (measured ~3.6% gap,
     vs. ~13% on desktop) */
  .hero__mascot { right: 3.5%; }

  .mission { padding: 60px 0; }

  .mission__inner {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .mission__gallery { gap: 10px; }

  /* measured mobile aspect ratio: boxes 1/2 are near-square, not portrait */
  .mission__gallery .photo-slot { aspect-ratio: 826 / 911; }

  .about__row {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }

  .about__row + .about__row { margin-top: 40px; }

  /* on mobile the reading order is always text then photo (unlike desktop,
     which alternates photo-left/text-right and text-left/photo-right) */
  .about__row--1 .photo-slot--wide,
  .about__row--2 .photo-slot--wide {
    order: 2;
    flex: none;
    /* boxes 3/4 are NOT full-bleed on mobile: ~83% width, centered */
    width: 83%;
    margin: 0 auto;
  }

  .about__row--1 .about__text,
  .about__row--2 .about__text { order: 1; }

  .about__text h2 { text-align: left; }

  /* only the heading goes left on mobile — the first paragraph stays
     right-aligned, matching the real design */
  .about__text--first { text-align: right; }
}

@media (max-width: 480px) {
  .topbar { padding: 20px 0; }
  .photo-slot span { font-size: 72px; }
}