/* A3 brick lane hero, per Hallmark BUILD-SPEC.md. Draft only. */
:root{--wash:246,241,231;--hero-text:#3B332A;--hero-soft:rgba(59,51,42,.86);--hero-nav:#4E4337;--hero-rule:#6B7D5E;--hero-btn-bg:#38302A;--hero-btn-fg:#F2EADA}
html[data-theme=night]{--wash:33,28,22;--hero-text:#F2EADA;--hero-soft:rgba(242,234,218,.86);--hero-nav:#E4D9C4;--hero-rule:#C0AA7F;--hero-btn-bg:#F2EADA;--hero-btn-fg:#38302A}
.hero-media img{object-position:left 60%}
.hero-scrim{background:
  linear-gradient(to bottom,rgba(var(--wash),.92) 0%,rgba(var(--wash),.7) 7%,rgba(var(--wash),0) 17%),
  linear-gradient(to top,rgb(var(--wash)) 0%,rgba(var(--wash),0) 22%),
  linear-gradient(to right,rgba(var(--wash),.94) 0%,rgba(var(--wash),.94) 38%,rgba(var(--wash),.72) 49%,rgba(var(--wash),0) 64%)}
.hero-kicker{color:var(--hero-soft)}.hero-kicker::before{background:var(--hero-rule)}
.hero h1{color:var(--hero-text)}.hero-sub{color:var(--hero-soft)}
.hero .btn-primary{background:var(--hero-btn-bg);color:var(--hero-btn-fg)}
.hero .btn-primary:focus-visible{outline:2px solid var(--hero-text);outline-offset:3px}
.site-header:not(.scrolled) .nav-links a{color:var(--hero-nav)}
@media (max-width:767px){
  .hero{background:var(--bg)}
  .hero-media{bottom:auto;height:70%}
  .hero-media img{object-position:center 58%}
  .hero-scrim{background:
    linear-gradient(to bottom,rgba(var(--wash),.95) 0%,rgba(var(--wash),.8) 9%,rgba(var(--wash),0) 16%),
    linear-gradient(to top,rgb(var(--wash)) 0%,rgb(var(--wash)) 60%,rgba(var(--wash),.8) 64%,rgba(var(--wash),0) 72%)}
}

/* FIT rev1: Hallmark approved the narrower column and lower mobile text start (Oct 26). */
@media (min-width:768px){.hero-inner{max-width:min(560px,48vw)}}
@media (max-width:767px){.hero-content{padding-top:max(108vw,25rem)}}
@media (max-width:380px){.hero-content{padding-top:30rem}}
@media (min-width:1280px){.hero-inner{max-width:600px}.hero-sub{max-width:500px}}
/* Portrait tablets: mobile plate and the spec mobile wash */
@media (min-width:768px) and (max-width:1024px) and (orientation:portrait){
  .hero{background:var(--bg)}
  .hero-media{bottom:auto;height:70%}
  .hero-media img{object-position:center 58%}
  .hero-scrim{background:
    linear-gradient(to bottom,rgba(var(--wash),.95) 0%,rgba(var(--wash),.8) 9%,rgba(var(--wash),0) 16%),
    linear-gradient(to top,rgb(var(--wash)) 0%,rgb(var(--wash)) 60%,rgba(var(--wash),.8) 64%,rgba(var(--wash),0) 72%)}
  .hero-inner{max-width:620px}
  .hero-content{padding-top:56vw}
}
/* Landscape and desktop: fixed height, image anchored right */
@media (min-width:768px) and (orientation:landscape),(min-width:1025px){
  .hero{min-height:0;height:max(640px,min(100svh,860px))}
  .hero-media img{object-position:left bottom} /* QM wide plate rev: was 70% center; extension is on the left, so anchor left + bottom keeps porch right of the headline and the path in frame */
  .hero-content{padding-block:5.5rem 1.5rem}
  .hero h1{font-size:min(3.7rem,7.2svh,4.6vw)}
  .hero-kicker{margin-bottom:1rem}
}
/* Narrow landscape: the right anchored image puts the oak behind the nav, so the top fade is held a little longer */
@media (min-width:768px) and (max-width:1279px) and (orientation:landscape){
  .hero-scrim{background:
    linear-gradient(to bottom,rgba(var(--wash),.94) 0%,rgba(var(--wash),.86) 9%,rgba(var(--wash),0) 19%),
    linear-gradient(to top,rgb(var(--wash)) 0%,rgba(var(--wash),0) 22%),
    linear-gradient(to right,rgba(var(--wash),.94) 0%,rgba(var(--wash),.94) 38%,rgba(var(--wash),.72) 49%,rgba(var(--wash),0) 64%)}
}

/* Logo: the live night variant (logo-v2-dark-192h.png, 288x192) is narrower than the light one (328x192).
   Render it at the same width as light mode, about 85px, by scaling height by 328/288. File untouched, no filter. */
[data-theme="night"] .site-header .brand-lockup{height:calc(50px * 328 / 288)}