/* THE AVILA COLLECTION — editorial recomposition, site-wide, 16 September 2026
   Carries the direction approved on remote-design-study.html across the rest of the site:
   index, portfolio, wellington-residence, approach, about, contact.

   Loads LAST on those six pages. Additive and reversible: removing the <link> restores
   the previous composition exactly. The study page keeps its own avila-editorial.css and
   is not touched by this file.

   The system, stated once:
     Ground      ivory #f4efe6, everywhere. No coloured section grounds.
     Ink         near-black #0a0808. Secondary text at the existing --ink-soft.
     Plum        #4a163d, closing invitation only — one per page, the single ending.
     Gold        #c8a364, hairline and link underline only.
     Colour      comes from the photographs. Nothing else is tinted.
     Images      lead. Every chapter opens with one, and the principal image of a page
                 bleeds to the viewport edge.
     Motion      content-driven, once, never looping — the study's .rv / .mask layer. */

/* ---------- 1 · one ground ---------- */
#main,
#main .stage,
#main .panel,
#main .wash,
#main .lattice,
#main .stage--accent,
#main .studies,
#main .pagehead,
#main .chapter{background:var(--surface-1);background-image:none;color:var(--ink)}
#main{--rule-soft:rgba(10,8,8,.16);--rule:rgba(10,8,8,.28)}
#main .stage--accent{border-top:0!important}
/* the closing invitation is the one exception: deep plum, one per page */
#main .stage.close{background:var(--deep-plum);color:var(--surface-1)}
#main .close h1,#main .close h2{color:var(--surface-1)}
#main .close .quiet,#main .close .lede{color:var(--surface-3)}
#main .close a:not(.btn){color:var(--gold);text-decoration-color:var(--gold)}
#main .close .btn--primary{background:var(--gold);color:#0a0808;border-color:var(--gold)}
#main .close .btn--quiet{color:var(--surface-3)}
#main .stage + .stage{border-top:0}
#main .panel .eyebrow,#main .panel p,#main .panel h2,#main .panel h3{color:inherit}
#main .panel .eyebrow,#main .wash .eyebrow{color:var(--ink-soft)}
#main .panel p,#main .wash p{color:inherit}
#main .quiet,#main .caption{color:var(--ink-soft)}

/* links: ink, with the one gold detail */
#main a:not(.btn):not(.tile a):not(.leadproject):not(.studycard):not(.crosslink){
  color:#0a0808;text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:.22em;text-decoration-color:rgba(200,163,100,.95)}
#main a:not(.btn):hover{text-decoration-color:#0a0808}
#main .tclass{border-color:#0a0808;color:#0a0808}
#main .tclass--concept{border-color:rgba(10,8,8,.42)}

/* ---------- 2 · rhythm ---------- */
#main .stage{padding-block:clamp(2.25rem,4vw,3.6rem)}
#main .stage--flush{padding-block:0}
#main .pagehead{padding-block:clamp(3rem,6vw,5.5rem) clamp(1.5rem,2.6vw,2.4rem)}
#main .pagehead h1{font-size:clamp(2.3rem,6vw,4.6rem);line-height:1.04;letter-spacing:-.015em;
  margin:0 0 1.1rem;max-width:20ch;text-wrap:balance}
#main .pagehead .eyebrow{margin-bottom:1.1rem}
#main .pagehead .lede{font-size:clamp(1.02rem,1.25vw,1.16rem);line-height:1.62;max-width:56ch}

/* ---------- 3 · full-bleed media ----------
   100vw includes the scrollbar gutter; overflow-x:clip on the root absorbs it without
   making html a scroll container. */
html{overflow-x:clip}
.bleed{width:100vw;margin-left:calc(50% - 50vw)}
.ed-shot{display:block;overflow:hidden;background:#0a0808}
.ed-shot img{display:block;width:100%;height:100%;object-fit:cover}
.ed-shot--hero{height:min(94vh,1000px)}
.ed-shot--wide{height:min(82vh,860px)}
.ed-shot picture{display:block;height:100%}

/* a quiet classification / caption line directly under a bleed */
.ed-underline{padding-block:clamp(.9rem,1.6vw,1.3rem) 0}
.ed-underline p{margin:0;font-size:.86rem;color:var(--ink-soft);max-width:68ch}

/* ---------- 4 · the frame, quietened ----------
   The inset rule frame belonged to the coloured composition; on an ivory ground the
   photograph carries itself and the frame only shrinks it. */
#main .framed{padding:0}
#main .framed::before{display:none}
#main .photo img{display:block;width:100%;height:auto}

/* ---------- 5 · chapter bands: image-led, alternating ---------- */
#main .band{display:grid;gap:clamp(1.4rem,3vw,3rem);grid-template-columns:minmax(0,1fr);
  align-items:center}
#main .band__text h2{font-size:clamp(1.6rem,2.6vw,2.3rem);line-height:1.1;margin:0 0 1rem}
#main .band__text p{font-size:.99rem;line-height:1.62;max-width:44ch}
#main .band__text .eyebrow{margin-bottom:.9rem}
@media (min-width:860px){
  #main .band{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  #main .band--reverse{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  #main .band--reverse .band__media{order:2}
  #main .band--reverse .band__text{order:1}
}

/* ---------- 6 · the arrival (index) ---------- */
#main .stage--arrival{padding-block:clamp(2.5rem,5vw,4.5rem) clamp(1.4rem,2.4vw,2.2rem)}
#main .herotitle{padding:0;margin:0;background:none;border:0}
#main .herotitle__inner{max-width:none}
/* the lockup box is the wordmark's own width, so the ornament's audited percentages in
   avila-icons.css (68% desktop / 72% mobile) still measure against the wordmark. */
#main .ed-lockup{width:min(300px,62vw);margin:0 0 1.9rem}
#main .herotitle img{width:100%;height:auto;display:block;margin:0}
/* the supplied Logo Design ornament keeps its place beneath the wordmark — it read as
   part of the lockup inside the old framed block, and needs its own margin now that the
   frame and its padding are gone. Sizing stays with avila-icons.css, which owns the
   audited 68% desktop / 72% mobile; only the margin is set here. */
#main .orn-underwordmark{display:block}
#main .hero__line{font-size:clamp(2.3rem,6vw,4.6rem);line-height:1.04;letter-spacing:-.015em;
  margin:0 0 1rem;max-width:20ch;text-wrap:balance}
#main .stage--arrival .wrap::before,
#main .stage--arrival .wrap::after{display:none}
.ed-lead{display:grid;gap:clamp(1.2rem,3vw,3rem);grid-template-columns:minmax(0,1fr);
  padding-block:clamp(1.4rem,2.6vw,2.2rem) 0}
.ed-lead p{margin:0;font-size:1rem;line-height:1.62;max-width:46ch}
@media (min-width:860px){.ed-lead{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}}

/* ---------- 7 · galleries: rooms shown large ---------- */
#main .gallery--rooms{display:grid;gap:clamp(1.2rem,2.5vw,2rem);list-style:none;padding:0;
  margin:clamp(1.6rem,3vw,2.4rem) 0 0;grid-template-columns:minmax(0,1fr)}
@media (min-width:700px){#main .gallery--rooms{grid-template-columns:repeat(3,minmax(0,1fr))}}
#main .tile a{display:block;text-decoration:none;color:inherit}
#main .tile__meta{padding-top:.75rem;border-top:1px solid var(--rule-soft);margin-top:.85rem}
#main .tile__meta h3{margin:0;font-family:var(--font-label);font-size:.73rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-soft)}
#main .tile a:hover .tile__meta h3{color:#0a0808}

/* ---------- 8 · lead project and cross-links ---------- */
#main .leadproject{display:block;text-decoration:none;color:inherit}
#main .leadproject__meta{display:flex;flex-wrap:wrap;justify-content:space-between;
  align-items:baseline;gap:.4rem 2rem;margin-top:1rem;padding-top:.9rem;
  border-top:1px solid rgba(200,163,100,.55)}
#main .leadproject__meta h2{margin:0;font-size:clamp(1.4rem,2.2vw,2rem)}
#main .leadproject__meta p{margin:0;font-size:.82rem;letter-spacing:.06em}
#main .studycard,#main .crosslink{display:grid;gap:clamp(1.2rem,2.5vw,2.2rem);
  grid-template-columns:minmax(0,1fr);text-decoration:none;color:inherit;
  background:none;border:0;padding:0;margin-top:clamp(1.4rem,3vw,2.2rem);
  border-top:1px solid var(--rule-soft);padding-top:clamp(1.4rem,2.6vw,2rem)}
@media (min-width:860px){
  #main .studycard,#main .crosslink{grid-template-columns:minmax(0,6fr) minmax(0,5fr);
    align-items:center}
}
#main .crosslink--flat{display:block;border-top:0;padding-top:0;margin-top:0}
#main .studycard h3,#main .crosslink h3{margin:0 0 .5rem;font-size:clamp(1.15rem,1.8vw,1.5rem)}
#main .studycard p,#main .crosslink p{font-size:.95rem;line-height:1.6;max-width:44ch}
#main .studycard__rooms{display:block;font-family:var(--font-label);font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.8rem}
#main .studycard__cta{display:inline-block;margin-top:1rem;font-family:var(--font-label);
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  border-bottom:1px solid rgba(200,163,100,.9);padding-bottom:.2rem}
#main .studycard:hover .studycard__cta,#main .crosslink:hover .studycard__cta{
  border-bottom-color:#0a0808}

/* ---------- 9 · approach: four stages, one line each ---------- */
#main .stages{list-style:none;counter-reset:s;margin:clamp(1.6rem,3vw,2.4rem) 0 0;padding:0;
  display:grid;gap:1.6rem 2.4rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:860px){#main .stages{grid-template-columns:repeat(4,minmax(0,1fr))}}
#main .stages li{border-top:1px solid var(--rule-soft);padding:.85rem 0 0;background:none}
#main .stages__n{display:block;font-family:var(--font-label);font-size:.7rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:.55rem}
#main .stages h2{font-size:1.02rem;line-height:1.3;margin:0 0 .4rem}
#main .stages p{font-size:.92rem;line-height:1.55;margin:0;max-width:none}

/* ---------- 10 · contact, set as an index ---------- */
#main .contactbig{list-style:none;padding:0;margin:0;display:grid;gap:0;
  grid-template-columns:minmax(0,1fr)}
#main .contactbig li{display:grid;gap:.35rem;padding:clamp(1.1rem,2.2vw,1.6rem) 0;
  border-top:1px solid var(--rule-soft);align-items:baseline}
#main .contactbig li:last-child{border-bottom:1px solid var(--rule-soft)}
@media (min-width:860px){
  #main .contactbig li{grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:0 2rem}
}
#main .contactbig .eyebrow{margin:0}
#main .contactbig a,#main .contactbig__plain{font-family:var(--font-heading);
  font-size:clamp(1.1rem,2vw,1.6rem);line-height:1.25;word-break:break-word}
#main .contactbig__plain{color:var(--ink-soft);font-size:clamp(1rem,1.5vw,1.2rem)}

/* ---------- 11 · brand icons keep their single placements ---------- */
#main .bicon{margin-bottom:1.1rem}

/* ---------- 12 · motion: from the content, once, never looping ---------- */
.js .rv{opacity:0;transform:translateY(14px);
  transition:opacity 900ms var(--ease-out,ease),transform 900ms var(--ease-out,ease)}
.js .rv.in{opacity:1;transform:none}
.js .rv-1{transition-delay:90ms}
.js .rv-2{transition-delay:180ms}
.js .mask{clip-path:inset(0 0 100% 0);transition:clip-path 1100ms cubic-bezier(.22,.7,.25,1)}
.js .mask.in{clip-path:inset(0 0 0 0)}
picture.mask{overflow:hidden;display:block}
.js .ed-shot.mask img{transform:scale(1);transition:transform 26s linear}
.js .ed-shot.mask.in img{transform:scale(1.025)}
@media (prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none;transition:none}
  .js .mask{clip-path:none;transition:none}
  .js .ed-shot.mask img,.js .ed-shot.mask.in img{transform:none;transition:none}
}

/* ---------- 13 · mobile ---------- */
@media (max-width:859px){
  .ed-shot--hero{height:68vh}
  .ed-shot--wide{height:58vh}
  #main .band__text p{max-width:none}
}

/* ---------- 14 · footer: the same calm endnote as the study page ----------
   Near-black ground, ivory type, one gold hairline. Two rows of information, nothing
   else. Contact details are the existing ones, unchanged. */
footer.foot.foot--ed{background:#0a0808;color:#f4efe6;
  padding-block:clamp(3.5rem,7vw,6.5rem) clamp(2.25rem,4vw,3.25rem)}
footer.foot.foot--ed .wrap{display:block;border-top:1px solid rgba(200,163,100,.42);
  padding-top:clamp(1.6rem,3vw,2.4rem)}
footer.foot.foot--ed .foot__row{display:flex;flex-wrap:wrap;justify-content:space-between;
  align-items:baseline;gap:1.6rem 3rem}
footer.foot.foot--ed .foot__brand{display:flex;flex-direction:column;gap:.55rem}
footer.foot.foot--ed .foot__name{font-family:var(--font-display,var(--font-body));
  font-size:clamp(1.05rem,1.5vw,1.3rem);letter-spacing:.02em;color:#f4efe6}
footer.foot.foot--ed .foot__area{font-family:var(--font-label);font-size:.72rem;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(244,239,230,.66)}
footer.foot.foot--ed .foot__contact{display:flex;flex-direction:column;gap:.5rem;text-align:right}
footer.foot.foot--ed .foot__contact a{font-size:.97rem;letter-spacing:.01em}
footer.foot.foot--ed .foot__nav{display:flex;flex-wrap:wrap;gap:.7rem 2.2rem;
  margin-top:clamp(2.2rem,4.5vw,3.4rem)}
footer.foot.foot--ed .foot__nav a{font-family:var(--font-label);font-size:.71rem;
  letter-spacing:.18em;text-transform:uppercase}
footer.foot.foot--ed a{color:#f4efe6;text-decoration:none}
footer.foot.foot--ed .foot__nav a,footer.foot.foot--ed .foot__contact a{
  border-bottom:1px solid transparent;padding-bottom:.18rem;
  transition:border-color 260ms var(--ease-out,ease),color 260ms var(--ease-out,ease)}
footer.foot.foot--ed .foot__nav a:hover,footer.foot.foot--ed .foot__contact a:hover{
  border-bottom-color:rgba(244,239,230,.55)}
footer.foot.foot--ed :where(a):focus-visible{outline:1px solid var(--gold);outline-offset:3px}
@media (max-width:859px){
  footer.foot.foot--ed{padding-block:clamp(2.75rem,9vw,4rem) 2.5rem}
  footer.foot.foot--ed .foot__row{display:block}
  footer.foot.foot--ed .foot__contact{text-align:left;margin-top:1.5rem;gap:.65rem}
  footer.foot.foot--ed .foot__contact a{font-size:1rem}
  footer.foot.foot--ed .foot__area{font-size:.79rem;letter-spacing:.14em;line-height:1.5}
  footer.foot.foot--ed .foot__nav{margin-top:2.2rem;gap:.85rem 1.25rem}
  footer.foot.foot--ed .foot__nav a{font-size:.75rem;letter-spacing:.13em}
}
@media (prefers-reduced-motion:reduce){
  footer.foot.foot--ed .foot__nav a,footer.foot.foot--ed .foot__contact a{transition:none}
}

/* ---------- closing invitation: translucent brown over the ivory ground ----------
   Replaces the deep plum banner. #4a2e1e at 86% settles to rgb(98,73,58) over ivory —
   7.2:1 against the ivory type, so the invitation still reads as one solid ending
   rather than a tint. */
#main .stage.close,
.close{background:rgba(74,46,30,.86);color:var(--surface-1)}
#main .close h1,#main .close h2,.close h1,.close h2{color:var(--surface-1)}
#main .close .quiet,#main .close .lede,.close .quiet,.close .lede{color:rgba(244,239,230,.82)}
#main .close a:not(.btn),.close a:not(.btn){color:var(--gold);text-decoration-color:var(--gold)}
#main .close .btn--primary,.close .btn--primary{background:var(--gold);color:#0a0808;border-color:var(--gold)}
#main .close .btn--quiet,.close .btn--quiet{color:rgba(244,239,230,.82);
  border-bottom-color:rgba(244,239,230,.45)}

/* focus ring: near-black, so no plum survives anywhere in the public presentation.
   The deep grounds keep their gold ring via the existing .close / .foot rules. */
:root{--focus:#0a0808}