/* Harrison Hide, home page only.
   Nothing global sets padding on these section ids, per the URAL house rule. */

/* ---------- 01 Hero ---------- */

#hero {
  position: relative;
  min-height: 940px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 90px;
  overflow: hidden;
  color: var(--chalk);
}
#hero .hero__media { position: absolute; inset: 0; pointer-events: none; }
#hero .hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
#hero .hero__scrim {
  position: absolute; left: 0; right: 0; top: 340px; height: 600px;
  background: linear-gradient(to bottom, rgba(46,58,36,0), rgba(46,58,36,0.86));
}
#hero .hero__meta {
  position: absolute; top: 64px; left: var(--gutter); right: var(--gutter);
  display: flex; justify-content: space-between;
  font-size: 10px; font-weight: 500; letter-spacing: 1.8px;
}
#hero .hero__lockup { position: relative; }
#hero h1 {
  margin: 0;
  font-family: 'Switzer', sans-serif;
  font-weight: 300;
  font-size: 82px;
  line-height: 96px;
  letter-spacing: -2.46px;
}
#hero .hero__rule { width: 460px; max-width: 100%; height: 1px; background: var(--chalk); margin-top: 4px; }
#hero .hero__sub {
  margin-top: 26px;
  font-family: 'Switzer', sans-serif;
  font-size: 18px; line-height: 28px;
  max-width: 620px;
}

/* ---------- 02 Statement ---------- */

#statement { padding-top: 160px; padding-bottom: 150px; background: var(--chalk); }
#statement .statement__lead {
  font-family: 'Switzer', sans-serif;
  font-weight: 300;
  font-size: 44px; line-height: 64px;
  max-width: 1020px;
}
#statement .statement__pair {
  display: flex; gap: 90px;
  margin-top: 64px; padding-top: 44px;
  border-top: 1px solid var(--hedge);
}
#statement .statement__pair p { flex: 0 1 460px; font-size: 16px; line-height: 28px; font-weight: 300; }

/* ---------- 03 Series ---------- */

#series { padding-top: 102px; padding-bottom: 60px; background: var(--chalk); }
#series h2 {
  margin: 0;
  font-weight: 300; font-size: 48px;
  letter-spacing: 4.32px; text-transform: uppercase;
  line-height: 1.1;
}
#series .series__blurb { margin-top: 36px; font-size: 18px; line-height: 30px; font-weight: 300; max-width: 860px; }

/* ---------- Latest episode ----------
   The film plays behind its own title. Same scrim and bottom left lockup as
   the hero, so the full bleed blocks read as one treatment. Type on footage is
   white per the branding pass, which is why the arrow is the chalk export. */

/* Pure black, not Field, and NOT part of the reveal. The block is black from
   the moment it is on the page, and the only thing that fades is the film
   itself, which opens on black in the footage. Field is a green black and
   would show a seam against the video's true black. */
#featured {
  position: relative;
  aspect-ratio: 1700 / 860;
  overflow: hidden;
  background: #000;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 var(--gutter) 90px;
  color: var(--chalk);
}
#featured .featured__frame { position: absolute; inset: 0; }

/* Sized off the container, not the viewport, then pushed 18 percent wider and
   nudged down. The subtitles on this film are BURNED IN, not caption tracks, so
   no player parameter hides them. The overscan takes the subtitle band and the
   YouTube logo off the bottom and the channel badge off the top left. */
/* The subtitles on this film are BURNED IN, not caption tracks, and they run
   through every shot including the opening, so cropping is the only way to
   lose them. They sit at roughly 88 to 92 percent down the frame, so the clip
   is overscanned 18 percent and pinned to the TOP rather than centred. That
   drops the whole bottom band off the frame at every screen size instead of
   splitting the overflow between top and bottom. */
#featured video {
  position: absolute; top: 0; left: 50%;
  /* base.css caps every img and video at max-width 100%, which silently
     cancelled the overscan and made three separate crop attempts look
     identical. It has to be released here. */
  max-width: none;
  width: 118%; aspect-ratio: 16 / 9;
  transform: translateX(-50%);
  border: 0; pointer-events: none;
  object-fit: cover;
}

/* Deeper than a single ramp. The loop is daylight throughout now, so white
   copy over a sunlit building needs a real floor under it rather than a gentle
   wash. The top of the frame stays clean. */
#featured .featured__scrim {
  position: absolute; left: 0; right: 0; bottom: 0; height: 76%;
  background: linear-gradient(to bottom,
              rgba(20,26,17,0) 0%,
              rgba(20,26,17,0.28) 42%,
              rgba(20,26,17,0.68) 74%,
              rgba(20,26,17,0.93) 100%);
  pointer-events: none;
}

#featured .featured__copy { position: relative; transition: opacity 600ms ease; }
#featured .featured__eyebrow { font-size: 10px; font-weight: 500; letter-spacing: 1.8px; }
#featured h3 {
  margin: 22px 0 0;
  font-weight: 300; font-size: 44px; line-height: 56px;
  max-width: 900px;
}
#featured .link-arrow { margin-top: 26px; }

/* ---------- 05 Long Lane ---------- */

#long-lane {
  padding-top: 160px; padding-bottom: 150px;
  background: var(--hedge);
  color: var(--chalk);
}
#long-lane .split__label { color: var(--chalk); }
#long-lane .ll__logo { width: 389px; max-width: 100%; height: auto; }
#long-lane .ll__blurb { margin-top: 50px; font-size: 18px; line-height: 32px; font-weight: 300; max-width: 860px; }
#long-lane .ll__location { margin-top: 50px; font-size: 10px; font-weight: 500; letter-spacing: 1.8px; opacity: 0.6; }
#long-lane .ll__facts {
  display: flex; gap: 24px;
  margin-top: 28px; padding-top: 48px;
  border-top: 1px solid var(--chalk);
}
#long-lane .ll__fact { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
#long-lane .ll__figure { font-weight: 300; font-size: 40px; letter-spacing: -0.8px; line-height: 1; }
#long-lane .ll__caption { font-size: 10px; font-weight: 500; letter-spacing: 1.8px; }
/* ---------- The renders ----------
   Full bleed, same frame as the film so the three big blocks are one system.
   One render at a time, cross fading, looping forever. */

#renders {
  position: relative;
  aspect-ratio: 1700 / 860;
  overflow: hidden;
  background: var(--field);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 var(--gutter) 56px;
}
#renders .renders__stack { position: absolute; inset: 0; }
#renders .renders__stack img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 55%;
  opacity: 0;
  transition: opacity 1400ms ease;
  will-change: opacity, transform;
}
#renders .renders__stack img.is-current { opacity: 1; }

/* One continuous push across the whole block rather than a fresh zoom per
   slide. Per slide it reset every seven seconds, which read as a jolt each
   time the picture changed. This runs on the stack instead, so the images
   cross fade inside a move that never restarts: 100 seconds out, 100 seconds
   back, linear, forever. */
#renders .renders__stack {
  transform-origin: 50% 48%;
  animation: render-drift 100s linear infinite alternate;
}
@keyframes render-drift {
  from { transform: scale(1); }
  to   { transform: scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
  #renders .renders__stack { animation: none; transform: none; }
}

#renders .renders__scrim {
  position: absolute; left: 0; right: 0; bottom: 0; height: 36%;
  background: linear-gradient(to bottom, rgba(20,26,17,0), rgba(20,26,17,0.72));
  pointer-events: none;
}
#renders .renders__label {
  position: relative;
  color: var(--chalk);
  font-size: 10px; font-weight: 500; letter-spacing: 1.8px;
}
#renders .renders__label.is-fading span { animation: render-label 900ms ease; }
@keyframes render-label { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 620px) { #renders { aspect-ratio: 4 / 3; padding-bottom: 32px; } }

/* ---------- 07 Contact ---------- */

#contact {
  display: flex; align-items: center; justify-content: space-between; gap: 40px;
  padding-top: 140px; padding-bottom: 140px;
  background: var(--chalk);
  border-top: 1px solid var(--hedge);
}
#contact h2 {
  margin: 20px 0 0;
  font-weight: 300; font-size: 46px; line-height: 60px;
  max-width: 880px;
}
/* The Figma pill is 258 wide with 76 left and 30 right padding, which reads as
   a mistake once the button shrinks to its content: the text and arrow sit
   visibly off centre. Held at the designed 258 and centred instead. */
#contact .cta {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 16px;
  width: 258px; height: 64px; padding: 0 24px;
  background: var(--funky);
  color: var(--chalk);
  border-radius: 32px;
  font-size: 11px; font-weight: 500; letter-spacing: 1.54px;
  /* An id scoped transition REPLACES the reveal rule's whole transition rather
     than adding to it, which is why this button was snapping in over 140ms
     while everything else faded over 760. All three are declared here so the
     hover and the reveal can coexist. */
  transition: background-color 160ms ease,
              opacity 760ms cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 760ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
#contact .cta:hover { background-color: #7A2E02; }

/* ---------- 08 Footer ---------- */

#footer { background: var(--chalk); border-top: 1px solid var(--hedge); }
#footer .footer__cols {
  display: flex; gap: 24px;
  padding: 90px var(--gutter);
}
#footer .footer__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
#footer .footer__col--pages { gap: 13px; }
/* The Figma sets these to leading-normal. Inheriting the body's 1.6 made the
   columns 43px taller than the design, which pushed the legal rule down and
   put it out of step with the rule under the contact section. */
#footer .footer__col a, #footer .footer__col p {
  font-size: 15px; font-weight: 300; line-height: normal;
}
#footer .footer__col--pages a { font-size: 14px; line-height: normal; }
#footer .footer__col--site p { line-height: 26px; max-width: 320px; }
#footer .footer__socials { display: flex; gap: 20px; }
#footer .footer__socials a { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; }
#footer .footer__socials img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
#footer .footer__legal {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 28px var(--gutter) 36px;
  border-top: 1px solid var(--hedge);
  font-size: 10px; font-weight: 500; letter-spacing: 1.6px;
}

/* ---------- Responsive, authored here because the Figma is desktop only ---------- */

/* Four footer columns only survive while each one is wide enough to hold the
   address on two lines. Below that they wrap two by two rather than letting
   "Dunford House, Midhurst, West Sussex." break across three. */
@media (max-width: 1520px) {
  #footer .footer__cols { flex-wrap: wrap; row-gap: 48px; }
  #footer .footer__col { flex: 1 1 42%; }
}

@media (max-width: 1400px) {
  #hero h1 { font-size: 64px; line-height: 76px; }
  #featured h3 { font-size: 34px; line-height: 44px; }
  #statement .statement__lead { font-size: 36px; line-height: 52px; }
  #series h2 { font-size: 38px; letter-spacing: 3.4px; }
  #contact h2 { font-size: 38px; line-height: 50px; }
}

@media (max-width: 1100px) {
  #hero { min-height: 640px; padding-bottom: 56px; }
  #hero .hero__scrim { top: auto; bottom: 0; height: 70%; }
  #hero .hero__meta { top: 28px; }
  #statement { padding-top: 88px; padding-bottom: 80px; }
  #statement .statement__pair { flex-direction: column; gap: 28px; }
  #statement .statement__pair p { flex: none; }
  #long-lane { padding-top: 88px; padding-bottom: 80px; }
  #long-lane .ll__facts { flex-wrap: wrap; row-gap: 36px; }
  #long-lane .ll__fact { flex: 1 1 40%; }
  #contact { flex-direction: column; align-items: flex-start; gap: 40px; padding-top: 80px; padding-bottom: 80px; }
  #footer .footer__cols { flex-wrap: wrap; row-gap: 44px; padding-top: 56px; padding-bottom: 56px; }
  #footer .footer__col { flex: 1 1 45%; }
  #footer .footer__legal { flex-direction: column; align-items: flex-start; gap: 10px; }
}

@media (max-width: 620px) {
  #hero h1 { font-size: 42px; line-height: 50px; letter-spacing: -1.2px; }
  #hero .hero__meta { flex-direction: column; gap: 6px; }
  #statement .statement__lead { font-size: 27px; line-height: 38px; }
  #series h2 { font-size: 27px; letter-spacing: 2.4px; }
  #contact h2 { font-size: 28px; line-height: 38px; }
  #contact .cta { width: 100%; }
  #long-lane .ll__fact { flex: 1 1 100%; }
  #footer .footer__col { flex: 1 1 100%; }
}


/* ---------- The film on small screens ----------
   The copy sits ON the film here exactly as it does on desktop. It used to
   stack below it on a solid black block, which was there to keep the old still
   image's own title card from colliding with ours. There is no still any more,
   so the reason is gone and the slab just read as a black box under a video.

   The frame goes to 4:3 so there is vertical room for the copy over the
   picture, and the clip is overscanned enough to cover that taller box while
   still being pinned to the top, which is what keeps the burned in subtitles
   off the bottom of the frame. */

@media (max-width: 899px) {
  #featured {
    aspect-ratio: 4 / 3;
    display: flex;
    padding: 0 var(--gutter) 34px;
    background: #000;
  }
  #featured .featured__frame { position: absolute; inset: 0; aspect-ratio: auto; }
  #featured .featured__frame::after { content: none; }
  #featured video { width: 142%; }
  /* Stronger than desktop. The block is short here so the copy occupies most
     of it, and the footage behind is bright sky. */
  #featured .featured__scrim {
    display: block; height: 100%;
    background: linear-gradient(to bottom,
                rgba(0,0,0,0) 0%,
                rgba(0,0,0,0.30) 34%,
                rgba(0,0,0,0.66) 58%,
                rgba(0,0,0,0.88) 100%);
  }
  #featured .featured__copy { padding: 0; }
  #featured .featured__eyebrow { opacity: 0.85; }
  #featured h3 { font-size: 27px; line-height: 35px; margin-top: 14px; }
  #featured .link-arrow { margin-top: 20px; }
}

/* 4:3 holds all the way down. A taller frame than this cannot be covered by
   landscape footage without cropping it to a narrow vertical strip. */
@media (max-width: 620px) {
  #featured { padding-bottom: 30px; }
  #featured video { width: 150%; }
  #featured h3 { font-size: 25px; line-height: 33px; }
}