/* css/style.css — Élan Films. Base, chrome, bands, and the two signatures:
   the long-exposure headline and the shutter reveal. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--font-body); font-size: var(--t-md); line-height: var(--lh-body);
  font-synthesis-weight: none; -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--blue-hour-deep); outline-offset: 3px; border-radius: 2px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--s-4); top: var(--s-4); z-index: 99; background: var(--ink); color: var(--print); padding: var(--s-3) var(--s-4); }

h1, h2, h3 { font-family: var(--font-display); font-weight: 400; letter-spacing: var(--track-head); line-height: var(--lh-head); margin: 0 0 var(--s-4); }
h1 { font-size: var(--t-3xl); line-height: var(--lh-tight); }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-lg); }
p { margin: 0 0 var(--s-4); max-width: var(--measure); }
.lede { font-size: var(--t-lg); line-height: 1.45; color: var(--ink-2); font-family: var(--font-display); font-weight: 400; }
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }

/* ---- the slate ----
   A clapperboard line: mono, letterspaced, sitting on a hairline bar. Every
   section identifies itself the way a take does. */
.slate {
  font-family: var(--font-data); font-size: var(--t-xs); text-transform: uppercase;
  letter-spacing: var(--track-caps); color: var(--graphite);
  border-top: var(--bar) solid var(--rule-strong);
  padding-top: var(--s-3); margin-bottom: var(--s-5);
  display: flex; gap: var(--s-4); flex-wrap: wrap; align-items: baseline;
}
.slate b { font-weight: 500; color: var(--ink); }
.on-dark .slate,
.hero .slate{ color: var(--grey-card); border-color: var(--zone-3); }
.on-dark .slate b,
.hero .slate b{ color: var(--zone-9); }

/* ---- bands ---- */
.band { padding: var(--s-9) 0; }
.band-tight { padding: var(--s-8) 0; }
.band-wash { background: var(--print-2); }
.on-dark,
.hero{ background: var(--zone-0); color: var(--zone-9); }
.on-dark h1, .on-dark h2, .on-dark h3,
.hero h1, .hero h2, .hero h3{ color: var(--zone-9); }
.on-dark p,
.hero p{ color: var(--zone-7); }
.on-dark .lede,
.hero .lede{ color: var(--zone-9); }
.on-dark a,
.hero a{ color: var(--blue-hour); }

/* ---- header ---- */
.site-header { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--print) 88%, transparent); backdrop-filter: blur(10px); border-bottom: var(--bar) solid var(--rule); }
.site-header .wrap { display: flex; align-items: center; gap: var(--s-5); min-height: 68px; }
.brand { font-family: var(--font-display); font-size: 1.32rem; letter-spacing: 0.01em; color: var(--ink); text-decoration: none; margin-right: auto; white-space: nowrap; }
.brand small { font-family: var(--font-data); font-size: 0.56rem; letter-spacing: var(--track-caps); color: var(--graphite); display: block; margin-top: 1px; }
.nav { display: flex; gap: var(--s-5); align-items: center; }
.nav a { font-size: var(--t-sm); color: var(--ink-2); text-decoration: none; position: relative; }
/* the pan: an underline that wipes in from the left */
.nav a::after { content: ''; position: absolute; left: 0; bottom: -5px; height: 1px; width: 100%; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .32s var(--ease-shutter); }
.nav a:hover::after, .nav a[aria-current]::after { transform: scaleX(1); }
.nav a.btn::after { display: none; }
.nav-toggle { display: none; font: inherit; font-size: var(--t-sm); background: none; border: var(--bar) solid var(--rule-strong); color: var(--ink); padding: var(--s-2) var(--s-4); cursor: pointer; }

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav { position: absolute; top: 100%; left: 0; right: 0; background: var(--print); border-bottom: var(--bar) solid var(--rule); flex-direction: column; align-items: stretch; gap: 0; padding: var(--s-3) 0; }
  .nav[data-open="false"] { display: none; }
  .nav a { padding: var(--s-3) 1.25rem; }
  .nav a::after { display: none; }
  .nav .btn { margin: var(--s-3) 1.25rem 0; text-align: center; }
}

/* ---- buttons ---- */
.btn { display: inline-block; font-family: var(--font-body); font-size: var(--t-sm); font-weight: 500; letter-spacing: 0.01em; padding: 0.82rem 1.4rem; border: var(--bar) solid transparent; text-decoration: none; cursor: pointer; transition: transform .25s var(--ease-shutter), background-color .25s, color .25s; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--blue-hour-deep); color: var(--print); }
.btn-primary:hover { background: var(--ink); }
.btn-light { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.btn-light:hover { border-color: var(--ink); }
.btn-ghost { background: transparent; color: var(--graphite); border-color: transparent; text-decoration: underline; }
.on-dark .btn-primary,
.hero .btn-primary{ background: var(--blue-hour); color: var(--zone-0); }
.on-dark .btn-primary:hover,
.hero .btn-primary:hover{ background: var(--zone-9); }
.on-dark .btn-light,
.hero .btn-light{ color: var(--zone-9); border-color: var(--zone-3); }
.on-dark .btn-light:hover,
.hero .btn-light:hover{ border-color: var(--zone-9); }

/* ---- the hero ----
   No photograph, and the absence is owned: the page opens as a darkroom. */
.hero { background: var(--zone-0); color: var(--zone-9); padding: clamp(4.5rem, 12vh, 8rem) 0 var(--s-9); position: relative; overflow: hidden; }
.hero::after { content: ''; position: absolute; inset: auto 0 0; height: 1px; background: linear-gradient(90deg, transparent, var(--zone-3) 18%, var(--zone-3) 82%, transparent); }
.hero h1 { font-size: var(--t-3xl); max-width: 16ch; margin-bottom: var(--s-5); }
.hero .lede { color: var(--zone-7); max-width: 56ch; }
.hero-actions { display: flex; gap: var(--s-4); flex-wrap: wrap; margin-top: var(--s-6); align-items: center; }

/* ---- SIGNATURE: the long exposure ----
   A word photographed while it was still moving. Stacked copies trail behind
   the sharp one and collapse into it, the way a long exposure resolves. This
   is the brand thesis rendered in type: the movement stays in the frame. */
.expose { position: relative; display: inline-block; font-style: italic; white-space: nowrap; }
.expose > .expose-sharp { position: relative; z-index: 2; }
.expose > .expose-trail { position: absolute; inset: 0; z-index: 1; color: var(--blue-hour); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .expose > .expose-trail { animation: settle 1.5s var(--ease-shutter) both; }
  .expose > .expose-trail:nth-child(1) { opacity: .40; --x: 0.62em; animation-delay: .06s; }
  .expose > .expose-trail:nth-child(2) { opacity: .26; --x: 1.18em; animation-delay: .12s; }
  .expose > .expose-trail:nth-child(3) { opacity: .15; --x: 1.78em; animation-delay: .18s; }
  .expose > .expose-trail:nth-child(4) { opacity: .08; --x: 2.42em; animation-delay: .24s; }
  .expose > .expose-sharp { animation: sharpen 1.1s var(--ease-shutter) both; }
}
@keyframes settle {
  from { transform: translate3d(calc(var(--x) * -1), 0, 0); filter: blur(2px); }
  to   { transform: translate3d(0, 0, 0); filter: blur(0); opacity: 0; }
}
@keyframes sharpen {
  from { opacity: .55; filter: blur(3px); transform: translate3d(-0.16em, 0, 0); }
  to   { opacity: 1; filter: blur(0); transform: none; }
}
@media (prefers-reduced-motion: reduce) { .expose > .expose-trail { display: none; } }

/* ---- SIGNATURE: the shutter reveal ----
   Sections do not fade up. They open from the centre line outward, the way a
   leaf shutter opens. One gesture, used once per section, then never again. */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] { clip-path: inset(18% 0 18% 0); opacity: 0; transition: clip-path .55s var(--ease-shutter), opacity .35s ease; }
  [data-reveal].is-in { clip-path: inset(0 0 0 0); opacity: 1; }
}

/* ---- footer ---- */
.site-footer { background: var(--zone-0); color: var(--zone-7); padding: var(--s-9) 0 var(--s-6); margin-top: var(--s-9); }
.site-footer .brand { color: var(--zone-9); }
.site-footer a { color: var(--zone-7); text-decoration: none; }
.site-footer a:hover { color: var(--zone-9); text-decoration: underline; }
.site-footer h3 { font-family: var(--font-data); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--grey-card); margin-bottom: var(--s-4); }
.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s-7); }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); font-size: var(--t-sm); }
.footer-base { border-top: var(--bar) solid var(--zone-3); margin-top: var(--s-8); padding-top: var(--s-5); font-size: var(--t-sm); color: var(--grey-card); }
.footer-owner { max-width: 62ch; }

/* ---- call bar (mobile) ---- */
.callbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: none; gap: var(--s-3); padding: var(--s-3); background: color-mix(in srgb, var(--print) 94%, transparent); backdrop-filter: blur(10px); border-top: var(--bar) solid var(--rule); }
.callbar .btn { flex: 1; text-align: center; }
@media (max-width: 720px) { .callbar { display: flex; } body { padding-bottom: 4.6rem; } }

.crumbs { font-family: var(--font-data); font-size: var(--t-xs); letter-spacing: 0.06em; color: var(--graphite); margin-bottom: var(--s-5); }
.crumbs a { color: var(--graphite); }

/* ---- hero corrections ----
   The hero is a dark ground; these are the pieces the .on-dark mirror does not
   cover because they have no dark variant of their own. */
.hero .crumbs, .hero .crumbs a { color: var(--grey-card); }
.hero .crumbs a:hover { color: var(--zone-9); }
/* zone-3 is a rule colour, too dark to read as a button edge on zone-0 */
.hero .btn-light { border-color: #4a5058; }
.hero .btn-light:hover { border-color: var(--zone-9); }
.hero .lede { color: var(--zone-7); }