/* ==========================================================
   Colours — every colour on the site is set here.
   ========================================================== */
:root {
  /* General */
  --text:               #4a3b30;
  --page-bg:            #2b1d14;  /* dark chocolate brown */
  --outline:            #4a3b30;  /* borders and solid drop shadows */
  --button-bg:          #EF9A59;
  --button-text:        #4a3b30;

  /* Section colours */
  --hero-bg:            #EF9A59;
  --hero-glow:          #ffffff26;  /* soft light behind the headline (last 2 digits = opacity) */
  --hero-button-bg:     #f7f3ea;

  --radius: 2rem;
  --container: 58rem;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-heading: "Lilita One", sans-serif;  /* loaded from Google Fonts in index.html */
}

/* ==========================================================
   Base
   ========================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--page-bg);
}

h1 {
  font-family: var(--font-heading);
  font-weight: 400;  /* Lilita One only comes in one weight; this stops browsers faking a bold */
  line-height: 1.15;
  margin: 0 0 1rem;
  font-size: clamp(2.5rem, 7vw, 5rem);
}

p { margin: 0 0 1rem; }

a { color: inherit; }

/* Holding page: the single section sits in the middle of the screen */
main {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1rem;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 1rem;
}

/* ==========================================================
   Buttons
   ========================================================== */
.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--button-text);
  background: var(--button-bg);
  border: 3px solid var(--outline);
  border-radius: 999px;
  --depth: 4px;
  box-shadow: var(--depth) var(--depth) 0 var(--outline);
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

/* Hover sinks the button almost flat; click presses it fully down */
.btn:hover {
  transform: translate(calc(var(--depth) - 1px), calc(var(--depth) - 1px));
  box-shadow: 1px 1px 0 var(--outline);
}

.btn:active {
  transform: translate(var(--depth), var(--depth));
  box-shadow: 0 0 0 var(--outline);
  transition-duration: 0.05s;
}

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}

/* ==========================================================
   Blocks — full-width coloured sections
   ========================================================== */
.block {
  padding: 6rem 0;
}

.block-hero {
  width: 100%;
  max-width: var(--container);
  border-radius: var(--radius);
  overflow: hidden;  /* clips the image to the rounded corners */
  --card-gutter: clamp(1.5rem, 5vw, 4rem);  /* space between the card's edge and its content */
  min-height: 60vh;
  display: flex;
  align-items: center;
  background: radial-gradient(circle at 25% 25%, var(--hero-glow), transparent 60%),
              var(--hero-bg);
  /* The container fills the hero's height so the image can sit on its bottom edge */
  padding-bottom: 0;
}

.block-hero .container {
  position: relative;
  width: 100%;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 0 var(--card-gutter) 6rem;
}

.block-hero .container > :not(.hero-image) {
  max-width: 55%;
}

.hero-image {
  position: absolute;
  right: var(--card-gutter);
  bottom: 0;
  height: 100%;
  width: auto;
  max-width: 42%;  /* never wider than the space beside the text */
  object-fit: contain;
  object-position: bottom;
}

.block-hero .btn {
  background: var(--hero-button-bg);
}

.block-hero .lead {
  font-size: 1.375rem;
  max-width: 36rem;
  margin-bottom: 2rem;
}

/* Bullets: little cream eggs to match the chunky outlined style */
.block-hero ul {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  display: grid;
  gap: 0.75rem;
}

.block-hero li {
  position: relative;
  padding-left: 1.75rem;
}

.block-hero li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4em;  /* centres the bullet on the first line */
  width: 0.62em;
  height: 0.8em;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;  /* egg: narrower at the top */
  background: var(--hero-button-bg);
  border: 2px solid var(--outline);
  box-shadow: 1px 1px 0 var(--outline);
}

/* Narrow screens: image drops below the text, rising up beside the button
   (the top of the photo is just Caitlin's head, so there's room to its left) */
@media (max-width: 800px) {
  main {
    padding: 0.75rem;
  }

  .block-hero {
    padding-top: 2.5rem;
  }

  .block-hero .container {
    padding-bottom: 0;
  }

  .block-hero .container > :not(.hero-image) {
    max-width: none;
  }

  .block-hero .lead,
  .block-hero ul {
    margin-bottom: 1.5rem;
  }

  .block-hero .btn {
    position: relative;
    z-index: 1;  /* stays clickable above the photo's transparent corner */
  }

  .hero-image {
    position: static;
    align-self: flex-end;
    height: 18rem;
    max-width: none;
    margin-top: -3.5rem;  /* roughly the button's height */
  }
}

/* Very narrow phones: no room beside the button, so the image stays below it */
@media (max-width: 360px) {
  .hero-image {
    margin-top: 1rem;
  }
}