/* THE AVILA COLLECTION — review draft stylesheet, revision 2
   Palette values below are CONFIRMED FROM SOURCE (Canva Brand Kit → Colors, 9 Sep 2026).
   Typography remains PROVISIONAL. Wordmark artwork is original but raster; see handoff. */

/* PROVISIONAL text faces — proof substitutes, not approved brand fonts.
   The unapproved display substitute (Rye) has been removed from this package entirely. */
@font-face{font-family:"AvilaSerifProvisional";src:url("fonts/cormorant-garamond-latin-400-normal.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"AvilaSerifProvisional";src:url("fonts/cormorant-garamond-latin-700-normal.ttf") format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:"AvilaTextProvisional";src:url("fonts/LibreBaskerville-Regular.ttf") format("truetype");font-weight:400;font-display:swap}

:root{
  /* ANCHORS — CONFIRMED */
  --anchor-burgundy:#3e0202; --anchor-black:#050404; --anchor-ink:#0a0808; --anchor-espresso:#2b1a12;
  /* SURFACES — CONFIRMED */
  --surface-1:#f4efe6; --surface-2:#ede4d3; --surface-3:#e8dcc4; --surface-4:#ddd0be;
  /* ACCENTS — CONFIRMED */
  --mauve:#9b7e9e; --lavender:#b58fb8; --violet:#8a6fa9;
  --gold-deep:#b08a4a; --gold:#c8a364;
  --burgundy:#6f1214; --near-black:#1a1414;

  /* Roles */
  --ground:var(--surface-1);
  --ground-alt:var(--surface-2);
  --ground-deep:var(--anchor-espresso);   /* closing section — espresso */
  --ink:var(--anchor-ink);
  --ink-soft:#5a4a42;                     /* espresso tint; passes AA on all four surfaces */
  --ink-on-deep:var(--surface-1);
  --rule:#c4b39d;
  --rule-soft:#ddd0be;
  --accent:var(--violet);                 /* principal expressive accent */
  --accent-quiet:var(--mauve);
  --detail:var(--gold-deep);              /* fine details only, never body text */
  --focus:var(--burgundy);

  --font-heading:"AvilaSerifProvisional",Georgia,serif;
  --font-body:"AvilaTextProvisional",Georgia,serif;
  --font-label:"AvilaTextProvisional",Georgia,serif;

  --measure:58ch;
  --step:clamp(4rem,8vw,8rem);
  --gutter:clamp(1.25rem,5vw,4.5rem);
  --transition:760ms;
  --ease-out:cubic-bezier(.2,.7,.3,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--font-body);font-size:1rem;line-height:1.8;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit;text-underline-offset:.3em;text-decoration-thickness:.5px;text-decoration-color:var(--accent)}
a:hover{text-decoration-color:var(--detail)}

:where(a,button,summary,[tabindex]):focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:2px}
.close :where(a,button):focus-visible{outline-color:var(--gold)}
.foot :where(a,button):focus-visible{outline-color:var(--gold)}
.skip{position:absolute;left:-9999px;top:0;background:var(--surface-1);color:var(--ink);padding:.75rem 1rem;z-index:99}
.skip:focus{left:.5rem;top:.5rem}

/* Tier 1 ground: diamond lattice, Avila's Checkerboard interpretation. Quiet. */
.lattice{background-image:
  linear-gradient(135deg,var(--rule-soft) 1px,transparent 1px),
  linear-gradient(225deg,var(--rule-soft) 1px,transparent 1px);
  background-size:26px 52px}

.wrap{width:min(1240px,100% - var(--gutter)*2);margin-inline:auto}
.stage{padding-block:var(--step)}
.stage + .stage{border-top:1px solid var(--rule-soft)}
.lede{max-width:var(--measure)}
.quiet{color:var(--ink-soft)}

h1,h2,h3{font-family:var(--font-heading);font-weight:400;line-height:1.2;margin:0 0 .5em}
h1{font-size:clamp(2rem,3.6vw,3rem)}
h2{font-size:clamp(1.6rem,2.6vw,2.2rem)}
h3{font-size:1.0625rem;line-height:1.4;margin:0 0 .2em}
p{margin:0 0 1.1em;max-width:var(--measure)}
.eyebrow{font-family:var(--font-label);font-size:.72rem;letter-spacing:.16em;color:var(--ink-soft);margin:0 0 1.3rem}

/* ---------- masthead ---------- */
.masthead{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--surface-1) 94%,transparent);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--rule-soft)}
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.7rem}
.masthead .brand{display:inline-flex}
.masthead .brand img{width:148px}
nav ul{display:flex;gap:1.8rem;list-style:none;margin:0;padding:0;font-family:var(--font-label);font-size:.82rem;letter-spacing:.07em}
nav a{text-decoration:none}
nav a:hover,nav a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--accent)}
.navtoggle{display:none;font:inherit;font-size:.85rem;background:none;border:1px solid var(--rule);border-radius:2px;padding:.45rem .8rem;cursor:pointer}

/* ---------- hero: image-led, wordmark restrained ---------- */
.hero{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:center;
  gap:clamp(2rem,5vw,5rem);padding-block:clamp(2.5rem,6vw,5rem)}
.hero__mark img{width:min(320px,74%)}
.hero__line{font-family:var(--font-heading);font-size:clamp(1.3rem,2.1vw,1.8rem);line-height:1.4;margin:1.5rem 0 .6rem;max-width:23ch}

/* ---------- reserved image areas ---------- */
.imgslot{background:var(--surface-3);border:1px solid var(--rule);display:grid;place-items:center;padding:1rem;text-align:center}
.imgslot span{font-family:var(--font-label);font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-soft);max-width:24ch;line-height:1.8}
.imgslot--tall{aspect-ratio:3/4}
.imgslot--wide{aspect-ratio:16/9}
.imgslot--square{aspect-ratio:1/1}
.imgslot--hero{aspect-ratio:5/4}

/* editorial band */
.band{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.5rem,4vw,4.5rem);align-items:center}
.band__text h2{margin-top:0}
.band--reverse .band__media{order:2}

/* ---------- symbol slots (replaceable, no layout rebuild) ---------- */
.slot{display:grid;place-items:center;margin-inline:auto;color:var(--accent-quiet)}
.slot--totem{aspect-ratio:1/3.6;width:min(150px,38vw)}
.slot--stage{aspect-ratio:1/1;width:44px}
.slot__label{display:none}
body.review .slot{border:1px dashed var(--accent-quiet);border-radius:2px}
body.review .slot__label{display:block;font-family:var(--font-label);font-size:.62rem;line-height:1.45;
  text-align:center;padding:.35rem;color:var(--ink-soft)}
.close .slot{color:var(--gold)}
body.review .close .slot{border-color:var(--gold)}
body.review .close .slot__label{color:var(--surface-3)}

/* ---------- galleries ---------- */
.gallery{display:grid;gap:clamp(1.25rem,2.5vw,2.25rem);
  grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));list-style:none;margin:0;padding:0}
.tile{margin:0}
.tile a{display:block;text-decoration:none}
.tile a:hover .imgslot{border-color:var(--accent)}
.tile__meta{padding-top:.8rem}
.truth{font-family:var(--font-label);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft);display:block}

.disclosure{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:1.1rem 0;max-width:var(--measure)}
.disclosure p{margin:0;font-size:.92rem;color:var(--ink-soft)}

/* ---------- closing section (Signal) — espresso ---------- */
.close{background:var(--ground-deep);color:var(--ink-on-deep)}
.close h1,.close h2{color:var(--surface-1)}
.close .quiet{color:var(--surface-4)}
.close a{color:var(--gold);text-decoration-color:var(--gold)}
.close a:hover{text-decoration-color:var(--surface-1)}
.contactlist{list-style:none;padding:0;margin:1.4rem 0 0;font-family:var(--font-heading);font-size:1.15rem;line-height:2.1}

footer.foot{background:var(--anchor-ink);color:var(--surface-4);font-size:.82rem;padding-block:2.2rem}
footer.foot a{color:var(--surface-3);text-decoration-color:var(--surface-4)}
footer.foot .wrap{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between}

/* ---------- neutral review chrome (never ships) ---------- */
#reviewbar{background:#efefef;color:#333;border-bottom:1px solid #d6d6d6;font-family:system-ui,-apple-system,sans-serif;
  font-size:.78rem;padding:.45rem var(--gutter);display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap}
#reviewbar button{font:inherit;background:#fff;color:#333;border:1px solid #bbb;border-radius:3px;padding:.3rem .65rem;cursor:pointer}
#reviewbar button:focus-visible{outline:2px solid #555;outline-offset:2px}
body:not(.review) #reviewbar{display:none}
.notconnected{font-family:var(--font-label);font-size:.78rem;color:var(--ink-soft);border:1px dashed var(--rule);padding:.5rem .75rem;display:inline-block}
.close .notconnected{color:var(--surface-3);border-color:var(--surface-4)}

/* ---------- motion ---------- */
.js .reveal{opacity:0;transform:translateY(12px)}
.js .reveal.is-in{opacity:1;transform:none;transition:opacity var(--transition) var(--ease-out),transform var(--transition) var(--ease-out)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal,.js .reveal.is-in{opacity:1;transform:none;transition:none}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .hero{grid-template-columns:1fr;align-items:start}
  .hero__mark img{width:min(280px,66%)}
  .band{grid-template-columns:1fr}
  .band--reverse .band__media{order:0}
}
@media (max-width:820px){
  .navtoggle{display:inline-block}
  nav{display:none;width:100%}
  nav.open{display:block}
  .masthead .wrap{flex-wrap:wrap}
  nav ul{flex-direction:column;gap:1rem;padding-block:1rem;width:100%}
  .masthead .brand img{width:126px}
}
@media print{.masthead,#reviewbar{display:none}}

/* Band media: keep reserved image areas proportionate to their text column */
.band__media .imgslot--tall{aspect-ratio:4/5}