@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:wght@700;800&display=swap');
/* Auto Ledger hero: normal document flow, fixed image ratio, reserved copy slots.
   Edit this file; do not append inline override blocks to index.html. */ #autoledger-hero {
  /* EDIT THESE layout and type settings, rather than adding override rules. */ --al-top-space:104px;
  --al-bottom-space:48px;
  --al-column-gap:40px;
  --al-row-gap:20px;
  --al-copy-gap:20px;
  --al-copy-share:.855fr;
  --al-picture-share:2.035fr;
  --al-title-size:clamp(50px,calc(4.3vw + 7.5pt),78px);
  --al-copy-size:clamp(18px,1.6vw,24px);
  --al-slogan-size:clamp(43.3333px,calc(4.3vw + 2.5pt),71.3333px);  /* 5pt below the headline size — reduced 2pt (Ron 2026-10-24) */
  --al-dust-opacity:.5;
}
#autoledger-hero {
  display:block;
  height:auto;
  min-height:0;
  max-height:none;
  margin:0;
  padding:var(--al-top-space) 0 var(--al-bottom-space);
  overflow:clip;
  background:#050507;
  isolation:isolate
}
#autoledger-hero .al-layout {
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(0,var(--al-copy-share)) minmax(0,var(--al-picture-share));
  grid-template-areas:"copy picture" "slogan slogan";  /* slogan spans full width so it centers on the page under the hero (Ron 2026-10-24) */
  gap:var(--al-row-gap) var(--al-column-gap);
  width:calc(100% - 2 * var(--gut));
  max-width:1440px;
  margin-inline:auto;
  align-items:start
}
#autoledger-hero .hero-in {
  grid-area:copy;
  position:relative;
  z-index:4;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);  /* per-stop title height so every stop's header sits tight to its paragraph (Ron 2026-10-23) */
  height:var(--al-picture-height,auto);
  gap:var(--al-copy-gap);
  width:auto;
  max-width:none;
  margin:0;
  padding:0;
  transform:none;
  will-change:auto
}
#autoledger-hero h1 {
  font-family:"Bodoni Moda","Cormorant Garamond",Georgia,serif;
  font-style:normal;
  font-size:var(--al-title-size);
  font-weight:700;
  line-height:.96;
  max-width:none;
  margin:0;
  overflow:visible
}
#autoledger-hero h1 .gold {
  white-space:nowrap
}
#autoledger-hero h1 .l2 {
  display:block;
  text-align:left;
  padding-left:0;
  font-style:normal;
  margin-top:10px
}
#autoledger-hero .kick {
  font-family:var(--serif);
  font-size:var(--al-copy-size);
  line-height:1.42;
  max-width:400px;  /* firm right margin — paragraph wraps clear of the hero image (Ron 2026-10-23) */
  margin:8px 0 0 2px;  /* header→paragraph padding: nudged down +20px (Ron 2026-10-24) */
  padding:0
}
#autoledger-hero .hero-eve {
  grid-area:picture;
  position:relative;
  inset:auto;
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  transform:none;
  border:0;
  border-radius:0;
  box-shadow:none;
  opacity:1;
  mask-image:none;
  -webkit-mask-image:none;
  overflow:hidden;
  background:#050507;
  isolation:isolate
}
#autoledger-hero .hero-eve::after {
  display:none
}
#autoledger-hero .al-slide {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  transform:none;
  animation:none;
  transition:none;
  opacity:0
}
#autoledger-hero .al-slide.active {
  opacity:1
}
#autoledger-hero #al-hl {
  grid-area:slogan;
  position:relative;
  inset:auto;
  width:auto;
  height:auto;
  min-height:var(--al-slogan-height,2.3em);
  max-height:none;
  margin:30px 0 0;  /* slogan drop — nudged down +20px (Ron 2026-10-24) */
  transform:none;
  overflow:visible;
  display:block;
  align-self:start;
  font-family:var(--serif);
  font-size:var(--al-slogan-size);
  font-weight:600;
  line-height:1.15;
  text-align:center;
  color:var(--gold-1)
}
#autoledger-hero .hero-scrim {
  display:none
}
#autoledger-hero .hero-canvas {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:3;
  pointer-events:none;
  opacity:var(--al-dust-opacity)
}
#autoledger-hero .hero-in .reveal,#autoledger-hero #al-hl.reveal {
  opacity:1;
  transform:none;
  animation:none;
  transition:none
}
/* Edge controls share the image midpoint, maintained by the controller. */
#autoledger-hero .al-arrow {
  position:absolute; z-index:6; top:var(--al-nav-top,260px);
  transform:translateY(-50%); width:38px; height:54px;  /* Custom chevron, ~111deg opening; no glyph or button distortion. */
  display:grid; place-items:center; padding:0; border:0; border-radius:6px;
  background:rgba(5,5,7,.65); color:var(--gold-1); opacity:.5; transition:opacity .25s ease;
  font:600 16px/1 Georgia,serif; cursor:pointer; touch-action:manipulation;
}
#autoledger-hero .al-arrow svg {width:32px;height:40px;display:block;overflow:visible;pointer-events:none}
#autoledger-hero .al-arrow path {fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
#autoledger-hero .al-arrow-prev {left:4px}
#autoledger-hero .al-arrow-next {right:4px}
#autoledger-hero .al-arrow:hover {background:rgba(201,169,110,.18);opacity:1}
#autoledger-hero .al-arrow:focus-visible {outline:2px solid var(--gold-1);outline-offset:2px}
#autoledger-hero .al-arrow:disabled {cursor:wait;opacity:.65}
@media(max-width:1200px) {
  #autoledger-hero {
    --al-top-space:116px;
    --al-bottom-space:40px;
    --al-title-size:clamp(63.3333px,calc(8vw + 16pt),85.3333px);
    --al-copy-size:20px;
    --al-slogan-size:clamp(28px,3.8vw,48px);
    --al-copy-gap:18px
  }
  #autoledger-hero .al-layout {
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"picture" "slogan" "copy";
    gap:20px
  }
  #autoledger-hero .hero-in {
    height:auto;
    grid-template-rows:var(--al-title-height,auto) var(--al-copy-height,auto)
  }
  #autoledger-hero .kick {
    line-height:1.45
  }
}
/* Phone stack (Ron 2026-10-31): headline -> carousel image -> paragraph -> slogan.
   .hero-in dissolves so its h1 and paragraph can sit either side of the image.
   Desktop and the 901-1200px layout above are unchanged. */
@media(max-width:900px) {
  #autoledger-hero .al-layout {
    grid-template-areas:"title" "picture" "copy" "slogan"
  }
  #autoledger-hero .hero-in {
    display:contents
  }
  #autoledger-hero h1 {
    grid-area:title;
    min-height:var(--al-title-height,auto)
  }
  #autoledger-hero .kick {
    grid-area:copy;
    max-width:none;
    min-height:var(--al-copy-height,auto);
    margin:0
  }
  #autoledger-hero #al-hl {
    margin:0
  }
}
@media(prefers-reduced-motion:reduce) {
  #autoledger-hero .shimmer {
    animation:none
  }
}