/* ==========================================================================
   E100R — Bootstrap 5 override stylesheet
   Load AFTER bootstrap.min.css. Reproduces the private-sale / chart-table
   look on top of Bootstrap's grid, navbar, and form components.
   ========================================================================== */

:root{
  --cream:#eee7d6;
  --paper:#f8f4ea;
  --ink:#1b1e22;
  --chartblue:#1f4864;
  --magenta:#a8245e;
  --graphite:#35342f;
  --mist:#6b7680;
  --hero-dark:#12151a;
  --hairline: rgba(27,30,34,0.18);
  --hairline-light: rgba(238,231,214,0.22);
  --pegblue: #000066;
}

/* ---------- base ---------- */
body{
  background-color:var(--cream);
  color:var(--ink);
  font-family:'Inter', sans-serif;
  font-weight:300;
}
h1, h2, h3, .font-serif{ font-family:'Source Serif 4', serif; }
.font-mono{ font-family:'IBM Plex Mono', monospace; letter-spacing:0.02em; }
a{ color:inherit; }
.navbar a, footer a{ text-decoration:none; }

.chapter-num{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.72rem; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--magenta); display:block; margin-bottom:1rem;
}

/* ---------- navbar (overrides .navbar / .navbar-dark) ---------- */
.navbar-e100r{
  position:fixed; top:0; left:0; right:0; z-index:1030;
  /* mix-blend-mode:difference;  */
  padding:1.4rem 0; 
  /* background-color:transparent !important; */
  background: #fff;
}
.navbar-e100r .navbar-brand{
  font-family:'Source Serif 4', serif; font-size:1rem; letter-spacing:0.06em; color:var(--ink);
}
.navbar-e100r .nav-link{
  font-size:0.72rem; letter-spacing:0.09em; text-transform:uppercase;
  color:var(--pegblue) !important; padding:0.4rem 1rem !important;
}
.navbar-e100r .nav-link:hover{ color:var(--pegblue) !important; }
.navbar-e100r .navbar-toggler{ border-color:rgba(27,30,34,0.4); }
.navbar-e100r .navbar-toggler-icon{ filter:none; }
.navbar-e100r .navbar-collapse{
  /* background:var(--hero-dark);  */
  padding:1rem 1.5rem; border-radius:2px;
}
@media (min-width:992px){ .navbar-e100r .navbar-collapse{ background:transparent; padding:0; } }

/* ---------- hero ---------- */
.section-hero{
  min-height:100vh; background:var(--hero-dark); position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end; padding-bottom:4rem;
}
.hero-art{ position:absolute; inset:0; opacity:0.85; z-index:0; }
.hero-art svg{ width:100%; height:100%; }
.hero-content{ 
    position:relative; 
    z-index:2; 
    /* max-width:840px;  */
}
.hero-tag{
  font-family:'IBM Plex Mono', monospace; font-size:0.7rem; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--magenta); margin-bottom:1.2rem; display:block;
}
.hero-heading{
  color:var(--paper); font-weight:400; font-size:clamp(2.4rem,6.4vw,5rem); line-height:1.02;
}
.hero-heading em{ font-style:italic; color:#c9d3d9; font-weight:300; }
.hero-sub{
  max-width:520px; margin-top:1.5rem; color:#a9b3ba; font-size:1rem; line-height:1.7; font-weight:300;
}
.hero-corner{
  position:absolute; top:6rem; right:2rem; z-index:2; text-align:right; color:#8a949b;
  font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase;
}
.scroll-cue{
  position:absolute; bottom:2.2rem; left:2rem; z-index:2; color:#8a949b;
  font-size:0.66rem; letter-spacing:0.15em; text-transform:uppercase; display:flex; align-items:center; gap:0.6rem;
}
.scroll-cue .line{
  width:26px; height:1px; background:var(--magenta); display:inline-block;
  animation:pulseLine 2.6s ease-in-out infinite;
}
@keyframes pulseLine{ 0%,100%{opacity:0.25;} 50%{opacity:1;} }

/* ---------- section backgrounds (overrides bg-* utilities) ---------- */
.section-cream{ background-color:var(--cream); padding:7rem 0; }
.section-paper{ background-color:var(--paper); padding:7rem 0; }
.section-dark{ background-color:var(--hero-dark); color:var(--paper); padding:7rem 0; }
.section-dark .chapter-heading{ color:var(--paper); }
.section-dark .plabel{ color:#9aa4ab; }

.chapter-heading{ font-size:clamp(1.7rem,3.2vw,2.5rem); font-weight:400; line-height:1.15; max-width:640px; }
.chapter-body p{ font-size:1.02rem; line-height:1.8; color:#33342f; }
.chapter-body p + p{ margin-top:1.1rem; }

/* ---------- chart / signature section ---------- */
.chart-wrap{ border:1px solid rgba(238,231,214,0.18); padding:2.4rem 2rem 2rem; }
.chart-caption{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:0.8rem;
  margin-top:1.3rem; color:#8a949b; font-size:0.7rem; letter-spacing:0.08em;
}
.cline{
  stroke:var(--magenta); stroke-width:1.3; fill:none;
  stroke-dasharray:1800; stroke-dashoffset:1800; transition:stroke-dashoffset 2.2s ease;
}
.cline.drawn{ stroke-dashoffset:0; }

/* ---------- racing history rows (built on Bootstrap .row) ---------- */
.race-row{ border-top:1px solid var(--hairline); padding:1.4rem 0; margin:0; }
.race-row:last-of-type{ border-bottom:1px solid var(--hairline); }
.race-year{ font-family:'IBM Plex Mono', monospace; font-size:0.95rem; color:var(--magenta); }
.race-name{ font-family:'Source Serif 4', serif; font-size:1.1rem; }
.race-result{ color:var(--mist); font-size:0.92rem; font-style:italic; }

/* ---------- particulars ---------- */
.prow{
  display:flex; justify-content:space-between; padding:1.05rem 0;
  border-top:1px solid var(--hairline-light);
}
.prow .plabel{ color:#9aa4ab; font-size:0.88rem; }
.prow .pvalue{ font-family:'IBM Plex Mono', monospace; font-size:0.95rem; }
.prow.prow-last{ border-bottom:1px solid var(--hairline-light); }

/* ---------- equipment ---------- */
.equip-col h3{ font-size:1.05rem; font-weight:500; margin-bottom:0.9rem; font-family:'Source Serif 4', serif; }
.equip-col ul{ list-style:none; padding-left:0; margin-bottom:0; }
.equip-col li{ font-size:0.92rem; color:#33342f; padding:0.55rem 0; border-top:1px solid var(--hairline); }
.equip-col li:last-child{ border-bottom:1px solid var(--hairline); }

/* ---------- provenance ---------- */
.prov-table .prow2{ display:flex; justify-content:space-between; padding:1rem 0; border-top:1px solid var(--hairline); }
.prov-table .prow2:last-child{ border-bottom:1px solid var(--hairline); }
.prov-table .plabel{ color:var(--mist); font-size:0.9rem; }
.prov-table .pvalue{ font-family:'IBM Plex Mono', monospace; font-size:0.92rem; text-align:right; }

/* ---------- form (overrides .form-control / .form-select / .btn) ---------- */
.form-e100r .form-label{
  font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase; color:#8a949b;
}
.form-e100r .form-control,
.form-e100r .form-select{
  background-color:transparent; border:none; border-bottom:1px solid rgba(169,179,186,0.35);
  border-radius:0; color:var(--paper); font-family:'Inter', sans-serif; font-size:0.98rem;
  padding:0.5rem 0.1rem; box-shadow:none;
}
.form-e100r .form-control:focus,
.form-e100r .form-select:focus{
  border-color:var(--magenta); box-shadow:none; background-color:transparent; color:var(--paper);
}
.form-e100r .form-select option{ color:#000; }
.form-e100r textarea.form-control{ min-height:70px; }

.btn-e100r{
  background-color:transparent; border:1px solid var(--magenta); color:#e2b9c9;
  font-family:'IBM Plex Mono', monospace; font-size:0.76rem; letter-spacing:0.1em;
  text-transform:uppercase; padding:0.9rem 2rem; border-radius:0; transition:all 0.3s;
}
.btn-e100r:hover, .btn-e100r:active{ background-color:var(--magenta) !important; color:#fff !important; border-color:var(--magenta) !important; }
.btn-e100r:focus{ box-shadow:none; }

/* ---------- footer ---------- */
.footer-e100r{ background-color:#0d1014; color:#6b7680; font-size:0.7rem; letter-spacing:0.05em; padding:2.2rem 0; }

/* ---------- focus & motion ---------- */
:focus-visible{ outline:2px solid var(--magenta); outline-offset:3px; }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  .cline{ stroke-dashoffset:0 !important; }
}

/* ---------- gallery ---------- */
.gallery-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:0.6rem;
}
@media (max-width:992px){ .gallery-grid{ grid-template-columns:repeat(3, 1fr); } }
@media (max-width:576px){ .gallery-grid{ grid-template-columns:repeat(2, 1fr); gap:0.4rem; } }

.gallery-item{
  position:relative; display:block; padding:0; border:0; background:none;
  aspect-ratio:4/3; overflow:hidden; cursor:pointer;
}
.gallery-item img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 0.4s ease, opacity 0.3s ease;
}
.gallery-item:hover img{ transform:scale(1.04); }
.gallery-item::after{
  content:''; position:absolute; inset:0; border:1px solid rgba(27,30,34,0.12);
  pointer-events:none;
}
.gallery-item:focus-visible{ outline:2px solid var(--magenta); outline-offset:2px; }
.gallery-caption{
  position:absolute; left:0; right:0; bottom:0; padding:1.6rem 0.7rem 0.6rem;
  background:linear-gradient(to top, rgba(13,16,20,0.85), rgba(13,16,20,0));
  color:var(--paper); font-size:0.72rem; line-height:1.3; letter-spacing:0.01em;
  opacity:0; transform:translateY(4px); transition:opacity 0.25s ease, transform 0.25s ease;
  pointer-events:none;
}
.gallery-item:hover .gallery-caption,
.gallery-item:focus-visible .gallery-caption{ opacity:1; transform:translateY(0); }

/* ---------- lightbox ---------- */
.lightbox{
  position:fixed; inset:0; z-index:1050; background:rgba(13,16,20,0.96);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity 0.25s ease;
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox-stage{
  max-width:90vw; max-height:88vh; display:flex; flex-direction:column; align-items:center;
}
.lightbox-stage img{
  max-width:90vw; max-height:78vh; display:block; margin:0 auto;
  box-shadow:0 20px 60px rgba(0,0,0,0.5);
}
.lightbox-caption{
  margin-top:0.9rem; color:#a9b3ba; font-size:0.82rem; line-height:1.5;
  text-align:center; max-width:min(90vw, 640px);
}
.lightbox-close, .lightbox-nav{
  position:absolute; background:none; border:1px solid rgba(169,179,186,0.35);
  color:var(--paper); font-family:'IBM Plex Mono', monospace; line-height:1;
  cursor:pointer; transition:all 0.2s;
}
.lightbox-close:hover, .lightbox-nav:hover{ border-color:var(--magenta); color:var(--magenta); }
.lightbox-close{ top:1.5rem; right:1.5rem; width:2.4rem; height:2.4rem; font-size:1.6rem; }
.lightbox-nav{
  top:50%; transform:translateY(-50%); width:3rem; height:3rem; font-size:1.1rem;
}
.lightbox-prev{ left:1.5rem; }
.lightbox-next{ right:1.5rem; }
.lightbox-counter{
  position:absolute; bottom:1.8rem; left:50%; transform:translateX(-50%);
  color:#8a949b; font-size:0.75rem; letter-spacing:0.1em;
}
@media (max-width:576px){
  .lightbox-nav{ width:2.4rem; height:2.4rem; font-size:0.95rem; }
  .lightbox-prev{ left:0.6rem; } .lightbox-next{ right:0.6rem; }
  .lightbox-close{ top:0.8rem; right:0.8rem; }
}

.background-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1; /* Pushes the video to the back */
}