/* THE AVILA COLLECTION — Remote Design Study, editorial recomposition, 16 September 2026
   Scope: remote-design-study.html ONLY. Loads LAST. Additive: every selector is a new
   .ed-* class, or scoped inside #main on this page. No global palette, navigation,
   footer or photography rule is touched. Reversible by removing this <link>.

   Ground: ivory #f4efe6. Ink: near-black #0a0808. Deep plum only in the closing
   invitation (existing .close). Gold only as hairline and link detail.
   No section is coloured to distinguish itself; the rooms carry the colour. */

/* ---------- page ground: no coloured banners anywhere on this page ----------
   The inherited hairline tokens are violet-tinted; on this page they are re-pointed to
   near-black at low alpha so no rule carries decorative colour. Links read as ink with a
   gold underline — the only gold on the page besides the material hairline. */
#main{background:var(--surface-1);--rule-soft:rgba(10,8,8,.16);--rule:rgba(10,8,8,.28)}
#main a:not(.btn){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 .stage + .stage{border-top:0}
.ed{padding-block:clamp(2rem,3.6vw,3.35rem)}
.ed--tight{padding-block:clamp(1.5rem,2.5vw,2.25rem)}
.ed--flush{padding-block:0}

/* ---------- full-bleed media ----------
   100vw includes the classic scrollbar gutter, so the bleed elements sit a scrollbar's
   width wider than the content box. `overflow-x:clip` on the root absorbs that without
   making html a scroll container, which would break the sticky chapter rail. */
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(100vh,1080px)}
.ed-shot--wide{height:min(96vh,1000px)}
.ed-shot--tall{height:min(100vh,1100px)}
/* a board may bleed to the viewport edge while its caption stays in the text column */
.ed-board--bleed picture{width:100vw;margin-left:calc(50% - 50vw)}

/* ---------- title block ---------- */
.ed-title{padding-block:clamp(2.5rem,5vw,4.5rem) clamp(1.5rem,2.5vw,2.5rem)}
.ed-title h1{font-size:clamp(2.35rem,6.4vw,5rem);line-height:1.03;letter-spacing:-.015em;
  margin:0;max-width:22ch;text-wrap:balance}
.ed-title h1 .l2{display:block;color:var(--ink-soft)}
.ed-title .eyebrow{margin-bottom:1.1rem}
.ed-meta{display:flex;flex-wrap:wrap;gap:.5rem 2.4rem;margin:clamp(1.5rem,3vw,2.4rem) 0 0;
  font-family:var(--font-label);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft)}

/* ---------- classification chrome: ink, not decorative colour ----------
   The labels and their wording are unchanged; only the hairline colour is brought to
   near-black so no violet or mauve is used to distinguish anything on this page. */
#main .tclass{border-color:#0a0808;color:#0a0808}
#main .tclass--concept{border-color:rgba(10,8,8,.42)}

/* ---------- quiet classification line beneath a visualization ---------- */
.ed-class{display:flex;flex-wrap:wrap;gap:.6rem 1.1rem;align-items:baseline;
  margin:.9rem 0 0;max-width:68ch}
.ed-class p{margin:0;font-size:.82rem;color:var(--ink-soft)}

/* ---------- introduction ---------- */
.ed-intro{display:grid;gap:clamp(1.8rem,4vw,4rem);grid-template-columns:minmax(0,1fr)}
.ed-intro p{font-size:clamp(1.02rem,1.25vw,1.16rem);line-height:1.62}
.ed-origin{margin:0;padding-top:1rem;border-top:1px solid var(--rule-soft);
  font-size:.92rem;line-height:1.6;color:var(--ink-soft)}
.ed-asks{list-style:none;margin:1.3rem 0 0;padding:0;display:flex;flex-wrap:wrap;
  gap:.45rem 1.4rem;font-family:var(--font-label);font-size:.72rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-soft)}

/* ---------- chapters: a different composition each time ---------- */
.ed-num{font-family:var(--font-label);font-size:.72rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-soft);margin:0 0 1rem;display:block}
.ed-room{margin:0 0 1.1rem;font-size:clamp(1.6rem,2.6vw,2.3rem);line-height:1.1}
.ed-copy p{margin:0 0 .85em;font-size:.97rem;line-height:1.6}
.ed-copy p:last-of-type{margin-bottom:0}
.ed-copy strong{font-weight:600}
.ed-mat{margin:1.35rem 0 0;padding-top:.8rem;border-top:1px solid rgba(200,163,100,.55);
  font-family:var(--font-label);font-size:.73rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft)}

/* one — offset: sticky numeral rail, large board, narrow text */
.ed-offset{display:grid;gap:clamp(1.6rem,3.5vw,3rem);grid-template-columns:minmax(0,1fr)}
.ed-rail .ed-num{margin:0}

/* two — bleed image, text held to a narrow column set right */
.ed-right{max-width:38rem;margin-left:auto}

/* three — bleed image, then text and detail side by side */
.ed-split{display:grid;gap:clamp(1.8rem,4vw,3.5rem);grid-template-columns:minmax(0,1fr);align-items:start}

/* ---------- material direction ---------- */
.ed-icon{display:block;height:160px;width:auto;margin:0 0 1.6rem;
  image-rendering:auto;opacity:.92}
.ed-mats{display:grid;gap:1.6rem 2.4rem;margin:2.2rem 0 0;grid-template-columns:minmax(0,1fr)}
.ed-mats div{border-top:1px solid var(--rule-soft);padding-top:.75rem}
.ed-mats h3{font-family:var(--font-label);font-size:.71rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);margin:0 0 .35rem}
.ed-mats p{margin:0;font-size:.95rem;line-height:1.55}

/* ---------- workflow: four steps, one line each ---------- */
.ed-flow{list-style:none;counter-reset:s;margin:2.2rem 0 0;padding:0;display:grid;
  gap:1.5rem 2.4rem;grid-template-columns:minmax(0,1fr)}
.ed-flow li{counter-increment:s;border-top:1px solid var(--rule-soft);padding-top:.85rem}
.ed-flow li::before{content:counter(s,decimal-leading-zero);display:block;
  font-family:var(--font-label);font-size:.7rem;letter-spacing:.18em;color:var(--ink-soft);
  margin-bottom:.5rem}
.ed-flow h3{margin:0 0 .3rem}
.ed-flow p{margin:0;font-size:.92rem;line-height:1.55;max-width:none}

/* ---------- boards shown whole, framed quietly ---------- */
.ed-board{margin:0}
.ed-board img{display:block;width:100%;height:auto}
.ed-board figcaption{margin-top:.9rem}
.ed-board figcaption h3{margin:0 0 .3rem}
.ed-board figcaption p{margin:0;font-size:.88rem;color:var(--ink-soft)}
.ed-pair{display:grid;gap:clamp(1.6rem,3.5vw,2.8rem);grid-template-columns:minmax(0,1fr)}

/* ---------- desktop composition ---------- */
@media (min-width:860px){
  .ed-intro{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:start}
  .ed-offset{grid-template-columns:5.5rem minmax(0,8fr) minmax(0,4.5fr);align-items:start}
  .ed-rail{position:sticky;top:7rem}
  .ed-split{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
  .ed-mats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ed-flow{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ed-pair{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:859px){
  .ed-shot--hero{height:72vh}
  .ed-shot--wide{height:64vh}
  .ed-shot--tall{height:76vh}
  .ed-icon{height:96px;margin-bottom:1.2rem}
  .ed-right{margin-left:0}
}

/* ---------- 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 .rv-3{transition-delay:270ms}

/* photographs reveal through a clean vertical mask, then hold a very long, very small scale */
.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}
/* the long, very small hold applies to room photographs only — never to boards,
   whose keyed text must not move or crop */
.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}
}


/* ---------- footer: a calm architectural endnote, this page only ----------
   Near-black ground, ivory type, one gold hairline as the quiet edge treatment. Two rows
   of information and nothing else: no wordmark, no artwork, no form, no extra copy. The
   footer.foot.foot--ed class exists only on this page, so the global footer is untouched. */
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}