/* THE AVILA COLLECTION — ornament scale and placement, revision 8
   Loads after avila.css, avila-proof.css, avila-r6.css, avila-r7.css. Homepage only.

   Artwork handling. Both ornaments are re-derived from the supplied source PNGs, trimmed
   to the true alpha bounding box so every size below refers to VISIBLE artwork, not canvas:
     logo-design.png    851 x 94   (9.0532)  — 1px margin
     ornament-ink.png   612 x 603  (1.0149)  — 2px margin
   Recolour only: every pixel keeps its own alpha and position, RGB is set to palette
   espresso #2b1a12, and alpha is scaled by 0.35 + 0.65 x darkness so the drawings' tonal
   modelling survives while the fine hatching gains contrast on ivory and lavender. No
   dilation, no erosion, no blur, no stroke widening — geometry is pixel-identical to source.
   decorative-divider.png and corner-flourish.png are no longer placed on this page. */

/* ---------- 1. Frame removed; hero returns to a compact centred lockup ---------- */
.herotitle{
  max-width:none;margin:0 auto clamp(1rem,2.2vw,1.6rem);
  aspect-ratio:auto;padding:0;border:0;background:none;
  display:block;text-align:center}
.herotitle__inner{max-width:440px;margin-inline:auto}
.herotitle__inner img{width:100%;display:block}
.herotitle__inner .hero__line{
  margin:clamp(.7rem,1.5vw,1.15rem) auto .35rem;
  font-size:clamp(1.1rem,1.45vw,1.4rem);line-height:1.34;max-width:30ch}
.herotitle__inner .quiet{margin:0;font-size:clamp(.84rem,.95vw,.95rem);line-height:1.5}

/* ---------- 2. Logo Design, centred beneath the name, above the tagline ----------
   68% of the wordmark width — mid-range of the 60-75% brief. Used as an ornament only. */
.orn-underwordmark{
  display:block;width:68%;aspect-ratio:851/94;
  margin:clamp(.85rem,1.8vw,1.35rem) auto 0;
  background:url("img/brand/logo-design.png") center/contain no-repeat}

/* ---------- 3. Section ornament at a size worth looking at ---------- */
#h-tension::before{
  content:"";display:block;width:84px;aspect-ratio:612/603;
  margin:0 0 1rem;
  background:url("img/brand/ornament-ink.png") center/contain no-repeat}

/* ---------- 3. Horizontal divider: the Logo Design rule at the method band ---------- */
.rule-accent{
  border:0;width:280px;max-width:100%;height:auto;aspect-ratio:851/94;
  margin:0 0 1.5rem;
  background:url("img/brand/logo-design.png") left center/contain no-repeat}

/* ---------- detached corner flourishes withdrawn ---------- */
.stage--arrival .wrap::before,
.stage--arrival .wrap::after{content:none;background:none}

@media (max-width:900px){
  .herotitle{margin-bottom:.95rem}
  .herotitle__inner{max-width:min(330px,82%)}
  .herotitle__inner .hero__line{margin:.75rem auto .3rem;font-size:1.02rem;line-height:1.3}
  .herotitle__inner .quiet{font-size:.82rem;line-height:1.45}
  .orn-underwordmark{width:72%;margin-top:.8rem}
  #h-tension::before{width:56px;margin-bottom:.8rem}
  .rule-accent{width:200px;margin-bottom:1.2rem}
}
@media (max-width:600px){
  .herotitle__inner{max-width:min(300px,86%)}
  .herotitle__inner .hero__line{font-size:.96rem}
  #h-tension::before{width:52px}
  .rule-accent{width:min(190px,62%)}
}