/* THE AVILA COLLECTION — homepage proof overlay (revision 3 candidate)
   Loads AFTER avila.css. Applies to index-proof.html only; the rest of the site is untouched.
   Palette values are the confirmed Canva set. */

:root{
  --panel-lavender:var(--lavender);      /* #b58fb8 — ink on this = 7.2:1 */
  --panel-mauve:var(--mauve);            /* #9b7e9e — ink on this = 5.6:1 */
  --frame:var(--violet);                 /* #8a6fa9 — framing and rules */
  --frame-quiet:#c9b6cd;                 /* violet mixed into ivory, for hairlines on ivory */
}

/* ---------- restrained lattice: mauve, quiet, only where it earns a place ---------- */
.lattice{background-image:
  linear-gradient(135deg,color-mix(in srgb,var(--mauve) 52%,transparent) 1px,transparent 1px),
  linear-gradient(225deg,color-mix(in srgb,var(--mauve) 52%,transparent) 1px,transparent 1px);
  background-size:30px 60px}

/* ---------- framing: violet holds the reserved image areas ---------- */
.framed{position:relative;display:block;padding:14px;background:transparent}
.framed > .imgslot{margin:0;width:100%}
.framed::before{content:"";position:absolute;inset:0;border:1px solid var(--frame);pointer-events:none}
.framed .imgslot{border-color:var(--frame-quiet)}

/* accent rule used instead of the generic hairline between stages */
.stage--accent{border-top:1px solid var(--frame-quiet)!important}
.rule-accent{border:0;border-top:1px solid var(--frame);width:64px;margin:0 0 1.4rem}

/* ---------- full colour panels: these carry the composition ---------- */
.panel{background:var(--panel-lavender);color:var(--anchor-ink)}
.panel .eyebrow{color:var(--anchor-espresso)}
.panel h2{color:var(--anchor-ink)}
.panel p{color:var(--anchor-espresso)}
.panel .imgslot{background:color-mix(in srgb,var(--panel-lavender) 72%,var(--surface-1));border-color:var(--anchor-espresso)}
.panel .imgslot span{color:var(--anchor-espresso)}
.panel .framed::before{border-color:var(--anchor-espresso)}
.panel a{text-decoration-color:var(--anchor-espresso)}
.panel :where(a,button):focus-visible{outline-color:var(--anchor-black)}
body.review .panel .slot{border-color:var(--anchor-espresso)}
body.review .panel .slot__label{color:var(--anchor-espresso)}

.panel--mauve{background:var(--panel-mauve)}
.panel--mauve .imgslot{background:color-mix(in srgb,var(--panel-mauve) 70%,var(--surface-1))}

/* work section sits on a soft violet wash so it reads as a distinct chapter */
.wash{background:color-mix(in srgb,var(--violet) 16%,var(--surface-1))}
.wash .imgslot{background:var(--surface-1);border-color:var(--frame-quiet)}

/* ---------- closing section: reduced while the totem is missing ---------- */
.close--compact{padding-block:clamp(2.25rem,4vw,3.25rem)}
.close--compact .slot--totem{width:min(72px,20vw)}
.close--compact h2{font-size:clamp(1.4rem,2.2vw,1.9rem);margin-top:1.2rem}
.close--compact .lede{margin-bottom:.9rem}

/* ---------- mobile: tighten related image and text ---------- */
@media (max-width:900px){
  .band{gap:1rem}
  .band__text{padding-top:.25rem}
  .band__text .eyebrow{margin-bottom:.7rem}
  .hero{gap:1.25rem}
  .hero__line{margin-top:1.1rem}
  .framed{padding:8px}
  .stage{padding-block:clamp(2.75rem,7vw,4rem)}
  .tile__meta{padding-top:.55rem}
  .gallery{gap:1.5rem}
}


/* ---------- hero title within a restrained architectural frame ----------
   Built from fixed-size ornaments so nothing distorts at any viewport. */
.herotitle{position:relative;display:grid;place-items:center;
  padding:clamp(3.25rem,7vw,5.5rem) clamp(2.5rem,7vw,6rem);
  margin-bottom:clamp(1.5rem,3.5vw,2.5rem);
  border:1.4px solid var(--frame)}
.herotitle::before{content:"";position:absolute;inset:8px;border:.8px solid var(--frame-quiet);pointer-events:none}
.herotitle::after{content:"";position:absolute;inset:0;pointer-events:none;
  /* dead reference removed 14 Sep 2026: asset retired from the package; this
     declaration is overridden downstream and never wins the cascade. */
  background:none}
.herotitle__inner{position:relative;text-align:center;max-width:min(560px,78%);z-index:1}
.herotitle__inner img{width:100%;margin-inline:auto}
.herotitle__inner .hero__line{margin:clamp(1.5rem,3vw,2.2rem) auto .5rem;max-width:24ch}
.herotitle__inner .quiet{margin:0}

/* navigation: simpler, legible text lockup (PROVISIONAL face) */
.masthead .brand--text{font-family:var(--font-heading);font-size:1.05rem;letter-spacing:.1em;
  text-decoration:none;color:var(--ink);white-space:nowrap;line-height:1;display:inline-flex;
  align-items:baseline;gap:.5em}
.masthead .brand--text .sm{font-size:.66em;letter-spacing:.22em}

@media (max-width:900px){
  .herotitle{padding:clamp(2.5rem,9vw,3.25rem) clamp(1.25rem,6vw,2rem)}
  .herotitle::after{/* dead reference removed 14 Sep 2026: asset retired from the package; this
     declaration is overridden downstream and never wins the cascade. */
  background-image:none}
  .herotitle__inner{max-width:90%}
  .masthead .brand--text{font-size:.92rem}
}

/* ---------- photography ---------- */
.photo{display:block;margin:0}
.photo img{width:100%;height:100%;object-fit:cover;display:block}
.ph--hero{aspect-ratio:5/4}
.ph--tall{aspect-ratio:4/5}
.ph--square{aspect-ratio:1/1}
.framed > .photo{width:100%}
.tile .photo{border:1px solid var(--frame-quiet)}
.tile a:hover .photo{border-color:var(--frame)}
.tile__meta .contrib{display:block;font-size:.86rem;color:var(--ink-soft);margin-top:.25rem}

/* Source / classification notes — visible in review mode only */
.srcnote{display:none}
body.review .srcnote{display:block;font-family:var(--font-label);font-size:.68rem;letter-spacing:.02em;
  color:var(--ink-soft);margin:.35rem 0 0}
body.review .srcnote--above{margin:0 0 .5rem;padding:.35rem .5rem;border:1px dashed var(--accent-quiet)}