/* High Corn Mill — home page.
   Layered on top of style.css and carrying only what is specific to the home
   page: the hero, the turning wheel, and the white grounds. The header lives in
   style.css, because every page shares it.

   Nothing in here is reachable from another page — .bhero, .wheel, .things,
   .panels and .bee-panel exist on this page alone — so it is loaded here only
   rather than being paid for site-wide. */

:root {
  /* Green and gold are the logo's, untouched. What changes is the ground they
     sit on: --cream is the page's default ground in style.css, so taking it to
     white does most of the work in one line. */
  --cream: #fff;
  --cream-deep: #f4f2ec;
  --green-soft: #e7f0e9;
  /* Hairlines do the section-separating that a change of colour used to, so
     they have to actually read against white. */
  --line: #e6e2d8;
  --shade: rgba(48, 56, 46, .16);
}
body { background: #fff; }

/* ===== Hero =====
   The old hero set white type over the film, which needed an 82% scrim to stay
   legible, and that scrim is what made the top of the page heavy. Here the type
   sits on white at full contrast and the film keeps its own light, framed in a
   card beside the copy rather than running behind everything. */
.bhero { position: relative; overflow: hidden; background: #fff; padding: 76px 0 86px; }
.bhero-inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.04fr .96fr; gap: 62px; align-items: center;
}
.bhero h1 { font-size: clamp(2.05rem, 4vw, 3.1rem); color: var(--ink); }
.bhero .kicker { color: var(--gold-deep); }
.bhero-sub { color: var(--muted); font-size: 1.14rem; margin-top: 20px; max-width: 30em; }
.bhero .btn-row { margin-top: 32px; }

.bhero-art { position: relative; }
/* The still is a CSS background rather than the video's poster attribute, which
   takes a single URL and would send a phone the desktop file. As a background it
   gets a media query, so each width fetches only what it needs — and the frame
   is the sunlit one 2.8s into the film, not the shaded one the old hero used.
   It also covers the two cases where site.js never loads the film at all
   (reduced motion, data saver): those visitors just keep the still. */
.bhero-film {
  position: relative; aspect-ratio: 4 / 3.2; border-radius: 46px; overflow: hidden;
  background: var(--cream-deep) url('../images/hero-bright-1200.webp') center/cover no-repeat;
  box-shadow: 0 40px 70px -34px var(--shade);
}
/* A white disc, because the badge is drawn as line art and disappears into a
   photograph on its own. Sitting outside the film's overflow clip is what lets
   it lap the corner. */
.bhero-seal {
  position: absolute; left: -30px; bottom: -26px;
  width: 142px; height: 142px; border-radius: 50%;
  background: #fff; display: grid; place-items: center;
  box-shadow: 0 14px 30px -10px var(--shade);
}
.bhero-seal img { width: 108px; height: auto; }

/* ===== Turning wheel =====
   The mark off the logo redrawn as vector and set going at the end of the
   headline, so "still turning" is demonstrated rather than claimed. Eight
   spokes, two rims, a double hub and the bucket ladder running the quarter
   from three to six o'clock — every radius and count measured off the logo
   artwork rather than guessed at.

   Sized in em, so it tracks the headline through every breakpoint on its own
   and needs no rule of its own further down this file. The nowrap on .turns is
   what stops it being pushed onto a line by itself when the headline wraps. */
.turns { white-space: nowrap; }
.wheel {
  display: inline-block; width: 1.22em; height: 1.22em;
  vertical-align: -.25em; margin-left: -.02em;
  color: var(--gold);
}
.wheel-spin {
  transform-box: fill-box; transform-origin: 50% 50%;
  animation: wheelturn 14s linear infinite;
}
@keyframes wheelturn { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .wheel-spin { animation: none; }
}

/* Three facts under the copy. Same numbers the welcome section carries further
   down — repeated here because they are the whole pitch in nine characters. */
.bhero-facts {
  list-style: none; display: flex; flex-wrap: wrap; gap: 36px;
  margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line);
}
.bhero-facts b {
  display: block; font-size: 1.95rem; font-weight: 600;
  color: var(--green); line-height: 1.15;
}
.bhero-facts span {
  font-size: .74rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted);
}

/* ===== Body of the page =====
   Nothing changes colour between the hero and the footer, so the joins that a
   change of ground used to mark are held by a hairline instead. Welcome and
   tiles are deliberately left joined — they read as one block and always did. */
/* The panels now carry their own colour, so the hairline that used to mark the
   join is doing nothing there — only Social still needs one. */
.social { border-top: 1px solid var(--line); }
.footer { background: #fff; }
/* A white card on a white page needs an edge to be a card at all */
.map-fig { background: #fff; border: 1px solid var(--line); }

/* Photos carry more of themselves. The scrim still has to hold white type at
   the bottom of a tile, so only the clear top half of the gradient is lifted. */
.tile::after { background: linear-gradient(180deg, rgba(23, 33, 14, 0) 36%, rgba(23, 33, 14, .7)); }

/* ===== Make a day of it =====
   Was a full-bleed green section, and the single heaviest block on the page.
   Inverted: the ground goes white and the green is kept to one card, so the
   block still anchors the middle of the page without darkening it. */
.panel-rows h2 { color: var(--ink); }
.panel-rows h2 + p { color: var(--muted); }
.panel-row { border-bottom: 1px solid var(--line); }
.panel-row img { box-shadow: 0 14px 28px -16px var(--shade); }
.panel-row h3 { color: var(--green); }
.panel-row p { color: var(--muted); }
.panel-row a { color: var(--gold-deep); }

.bee-panel {
  background: var(--green); color: #fff; border-radius: 46px;
  padding: 44px 38px 46px; box-shadow: 0 40px 70px -36px rgba(1, 61, 31, .55);
}
.bee-panel .bee-photo { width: min(290px, 78%); margin-bottom: 26px; }
.bee-panel h3 { color: #fff; }
.bee-panel p { color: rgba(255, 255, 255, .9); }
/* Green on green would vanish, so the button inverts inside the card */
.bee-panel .btn-primary { background: #fff; color: var(--green); }
.bee-panel .btn-primary:hover { background: var(--gold); color: var(--green-deep); }

.social-grid img:hover { box-shadow: 0 20px 42px -18px var(--shade); }

/* ===== Responsive ===== */
@media (max-width: 920px) {
  .bhero { padding: 44px 0 58px; }
  /* Film first on a phone — the page opens on something to look at rather than
     on a block of type. */
  .bhero-inner { grid-template-columns: 1fr; gap: 40px; }
  .bhero-art { order: -1; }
  .bhero h1 { font-size: clamp(1.85rem, 7.2vw, 2.4rem); }
  .bhero-sub { font-size: 1.04rem; }
  .bhero-film {
    aspect-ratio: 4 / 3; border-radius: 34px;
    background-image: url('../images/hero-bright-760.webp');
  }
  .bhero-seal { width: 96px; height: 96px; left: -10px; bottom: -18px; }
  .bhero-seal img { width: 72px; }
  /* Three across rather than wrapped 2 + 1, which left an orphan */
  .bhero-facts {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
    margin-top: 32px; padding-top: 22px;
  }
  .bhero-facts b { font-size: 1.55rem; }
  .bhero-facts span { font-size: .68rem; letter-spacing: .12em; line-height: 1.5; display: block; }
  .bee-panel { padding: 34px 26px 38px; border-radius: 34px; }
}