/* wedding.css — the Wedding Films satellite.
   Audience: engaged couples, not investors. Warmer and simpler than the
   campaign pages, same house: tokens.css is the BINDING contract (no palette,
   no font names, no type sizes, no easing declared here) and site.css supplies
   the shared chrome — header, curtains, footer, skip link.

   This page sits two directories deep and bin/build-site's path rewrites assume
   root depth, so every shared reference in the markup is ROOT-ABSOLUTE. Nothing
   here may depend on relative depth.

   What this file owns: the atmosphere layers (recipe lifted from acts.css so
   the page carries the same graded, grained ground without importing that
   page's section machinery), the film frames, and this page's section
   geometry. */

/* ---------- atmosphere: the same graded ground both campaign pages sit on --- */
.atmosphere{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.grade-base{position:absolute;inset:0;background-color:var(--black)}
.grade-drift{
  position:absolute;inset:0;
  background:
    radial-gradient(120vw 90vh at 85% -10%, color-mix(in srgb,var(--cool) 50%,transparent), transparent 60%),
    radial-gradient(100vw 80vh at -10% 30%, color-mix(in srgb,var(--warm) 48%,transparent), transparent 55%),
    radial-gradient(110vw 90vh at 70% 70%, color-mix(in srgb,var(--cool-deep) 48%,transparent), transparent 60%),
    radial-gradient(120vw 100vh at 10% 105%, color-mix(in srgb,var(--warm) 50%,transparent), transparent 60%);
  animation:grade-drift 36s var(--ease) infinite alternate;
}
@keyframes grade-drift{
  from{background-position:0% 0%,0% 0%,0% 0%,0% 0%}
  to{background-position:6% 8%,-5% -6%,-7% 5%,5% -7%}
}
.grain{
  position:absolute;inset:-100px;opacity:var(--grain-opacity);pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  animation:grain 7s steps(8) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}12%{transform:translate(-30px,20px)}
  25%{transform:translate(20px,-35px)}37%{transform:translate(-25px,-15px)}
  50%{transform:translate(30px,25px)}62%{transform:translate(-15px,30px)}
  75%{transform:translate(25px,-20px)}87%{transform:translate(-30px,-25px)}
}

/* ---------- header — the mark sits beside the bright page name -------------
   site.css owns #site-head. Here the left side gains the Reel Film mark: this
   page is served under reelfilm.com.au, so the client's own identity leads and
   the film is the quiet way out. Brightness system unchanged — bright is the
   page you are on, dim is where you can go. */
.head-left{display:flex;align-items:center;gap:clamp(.9rem,2.4vw,1.5rem)}
.head-mark{display:block}
.head-mark img{width:auto;height:clamp(34px,5vw,44px)}  /* the mark is a dense square block — below ~34px the FILM row stops resolving */
.head-mark:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

/* screen-reader-only: the play buttons' names — the visible control is the ring */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}

/* ---------- shared section rhythm ------------------------------------------
   One measure for every block of prose on the page: ~65ch, centred in the
   shell, so a couple reading on a phone and a couple reading on a laptop get
   the same line length. */
.band{position:relative;padding-block:calc(var(--space-section) * .62)}
.band--open{padding-block-start:var(--space-section)}
.measure{max-width:65ch;margin-inline:auto}
.measure h2{font-size:var(--text-h2);text-wrap:balance;margin-bottom:1.5rem}
.measure .label{display:flex;align-items:center;gap:1rem}
.measure .label::before{content:"";width:2.4rem;height:1px;background:var(--accent)}

/* ---------- hero — a title card, not a stage -------------------------------
   The campaign pages open on a full-viewport plate. This one opens on type and
   hands straight to the films: a couple came here to watch, not to be staged
   at. Top padding clears the fixed header. */
.wf-hero{
  padding-block:clamp(9rem,20vh,14rem) calc(var(--space-section) * .5);
  text-align:center;
}
.wf-hero .kicker{margin-bottom:1.6rem}
.wf-hero h1{
  font-size:clamp(2.9rem,9vw,6.4rem);
  letter-spacing:-.015em;
}
.wf-hero__lead{
  max-width:52ch;margin:1.9rem auto 0;
  color:var(--ink-dim);font-size:var(--text-body);
}

/* ---------- the films ------------------------------------------------------
   Lead film at full measure, the other two as a two-up beneath. Each frame is
   a poster + one button; nothing loads from Vimeo until a couple asks for it. */
.films{display:grid;gap:clamp(1.6rem,3.4vw,2.8rem)}
.films__pair{
  display:grid;gap:clamp(1.6rem,3.4vw,2.8rem);
  grid-template-columns:1fr;
}
@media (min-width:760px){
  .films__pair{grid-template-columns:repeat(2,minmax(0,1fr))}
}

.film{margin:0}
.film__frame{
  position:relative;display:block;width:100%;
  aspect-ratio:16 / 9;overflow:hidden;
  border:1px solid var(--line);background:var(--black);
  box-shadow:0 2rem 6rem color-mix(in srgb,var(--black) 35%,transparent);
}
.film__frame img{width:100%;height:100%;object-fit:cover;
  filter:brightness(.74) saturate(.94);
  transition:filter var(--reveal-duration) var(--ease),
             transform var(--reveal-duration) var(--ease);
}
.film__frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,color-mix(in srgb,var(--black) 55%,transparent));
}

/* the play control IS the frame's button — full-bleed hit area, visible ring */
.film__play{
  position:absolute;inset:0;z-index:1;
  display:grid;place-items:center;
  border:0;background:none;padding:0;cursor:pointer;color:var(--ink);
}
.film__play span{
  display:grid;place-items:center;
  width:clamp(54px,7vw,74px);aspect-ratio:1;
  border:1px solid color-mix(in srgb,var(--ink) 62%,transparent);
  border-radius:50%;
  background:color-mix(in srgb,var(--black) 34%,transparent);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  transition:color var(--duration-ui) var(--ease),
             border-color var(--duration-ui) var(--ease),
             background var(--duration-ui) var(--ease),
             transform var(--duration-ui) var(--ease);
}
.film__play svg{width:clamp(15px,1.9vw,19px);height:auto;margin-left:.18em}
.film__frame:hover .film__play span,
.film__play:focus-visible span{
  color:var(--accent);border-color:var(--accent);
  background:color-mix(in srgb,var(--black) 58%,transparent);
  transform:scale(1.07);
}
.film__frame:hover img{filter:brightness(.9) saturate(1);transform:scale(1.014)}
.film__play:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* the iframe replaces the poster in place, filling the frame it came from */
/* the player is the shared window (video-dialog.css) — the frame itself only ever holds the poster */

.film figcaption{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem 1.1rem;
  margin-top:1.1rem;
}
.film__title{
  font-family:var(--font-display);font-weight:600;
  font-size:var(--text-h3);text-transform:uppercase;letter-spacing:-.01em;
  color:#f2ede0;
}
.film--lead .film__title{font-size:calc(var(--text-h3) * 1.12)}
.film__runtime{
  font-family:var(--font-display);font-size:var(--text-label);font-weight:500;
  letter-spacing:var(--track-caption);text-transform:uppercase;color:var(--ink-faint);
}

/* ---------- the Super 8 band ----------------------------------------------
   Scott's own analogue-graded still, feathered into the page rather than cut
   into it — the section is about grain and warmth, so the image should look
   like it is emerging from the ground, not pasted onto it. */
.super8__plate{
  position:relative;margin:clamp(2.6rem,5vw,4rem) 0 0;
  aspect-ratio:16 / 7;overflow:hidden;
}
@media (max-width:759px){
  .super8__plate{aspect-ratio:3 / 2}
}
.super8__plate img{
  width:100%;height:100%;object-fit:cover;object-position:34% 30%;
  filter:brightness(.72) saturate(.72) sepia(.14);
}
.super8__plate::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--bg) 82%,transparent), transparent 28%,
    transparent 66%, color-mix(in srgb,var(--bg) 88%,transparent));
}

/* ---------- testimonial ---------------------------------------------------- */
.quote{margin:0 auto;padding-left:clamp(1.2rem,3vw,2.2rem);border-left:1px solid var(--accent)}
.quote p{
  margin:0;color:var(--ink);
  font-size:clamp(1.12rem,1.85vw,1.42rem);line-height:1.62;
}
.quote figcaption{
  margin-top:1.4rem;
  font-family:var(--font-display);font-size:var(--text-label);font-weight:500;
  letter-spacing:var(--track-caption);text-transform:uppercase;color:var(--ink-faint);
}

/* ---------- the interlude — Blake over the native-flowers plate -------------
   The plate arrived from the old site as a bright cream illustration; at full
   value it would blow a hole in a near-black page and fight the films for
   attention. Knocked back and feathered on all four edges it becomes weather
   behind the verse — which is itself about a heaven in a wild flower, so the
   two earn each other. */
.interlude{
  position:relative;overflow:hidden;
  padding-block:clamp(6rem,15vh,10rem);
  display:grid;place-items:center;text-align:center;
}
.interlude__plate{position:absolute;inset:0;z-index:0}
.interlude__plate img{width:100%;height:100%;object-fit:cover;filter:brightness(.52) saturate(.72)}
.interlude__plate::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(62% 70% at 50% 50%, color-mix(in srgb,var(--black) 56%,transparent), transparent 82%),
    linear-gradient(180deg, var(--bg), transparent 36%, transparent 64%, var(--bg)),
    linear-gradient(90deg, var(--bg), transparent 12%, transparent 88%, var(--bg));
}
.verse{position:relative;z-index:1;margin:0}
.verse p{
  margin:0;color:var(--ink);
  font-family:var(--font-intertitle);font-weight:300;letter-spacing:.02em;
  font-size:clamp(1.02rem,1.9vw,1.36rem);line-height:2.05;
}
.verse figcaption{
  margin-top:1.5rem;
  font-family:var(--font-display);font-size:var(--text-label);font-weight:500;
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--accent);
}

/* ---------- credit + contact ----------------------------------------------- */
.credit p{color:var(--ink-dim);font-size:var(--text-body)}
.credit strong{color:var(--ink);font-weight:600}

.contact{text-align:center}
.contact .label{justify-content:center}
.contact .label::before{display:none}
.contact h2{font-size:var(--text-h2);margin-bottom:2.4rem}
.contact__name{
  font-family:var(--font-display);font-size:var(--text-h3);font-weight:600;
  text-transform:uppercase;letter-spacing:var(--track-caption);color:var(--ink);
  margin:0 0 1.8rem;
}
.contact__lines{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:1rem clamp(1.6rem,4vw,3rem);
}
.contact__lines a{
  display:inline-block;
  font-family:var(--font-display);font-size:var(--text-label);font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;
  border-bottom:1px solid color-mix(in srgb,var(--ink) 34%,transparent);
  padding-bottom:.55rem;
  transition:color var(--duration-ui) var(--ease),
             border-color var(--duration-ui) var(--ease),
             transform var(--duration-ui) var(--ease);
}
.contact__lines a:hover,
.contact__lines a:focus-visible{color:var(--accent);border-color:var(--accent);transform:translateY(-2px)}
/* the email is copyable text, not a mailto: — the form below is the send path */
.contact__lines .contact__email{
  display:inline-block;
  font-family:var(--font-display);font-size:var(--text-label);font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim);
  padding-bottom:.55rem;border-bottom:1px solid transparent;
  user-select:all;
}

/* ---------- enquiry form -----------------------------------------------------
   Field / chip / submit vocabulary comes from /access.css (the Industry Access
   contract) — this page only positions it and re-scopes the two rules
   access.css keeps under .access. Left-aligned inside a centred section: a
   form reads as a form, not a poem. */
.contact__form{
  grid-column:auto;
  max-width:44rem;margin:3.2rem auto 0;
  text-align:left;
}
.contact fieldset{
  border:1px solid var(--line);border-radius:var(--radius);
  padding:1.3rem 1.5rem;min-inline-size:0;margin:0;
}
.contact legend{padding:0 .6rem;margin-bottom:0}
.contact .form-status{text-align:left}

/* ---------- footer note ----------------------------------------------------
   site.css styles .site-foot; this page's footer carries the Reel Film line
   rather than the campaign's, so only the one override lives here. */
.site-foot .f-note{max-width:none}

@media (prefers-reduced-motion:reduce){
  .grade-drift,.grain{animation:none}
  .film__frame:hover img{transform:none}
  .film__frame:hover .film__play span,
  .film__play:focus-visible span{transform:none}
  .contact__lines a:hover,
  .contact__lines a:focus-visible{transform:none}
}