/* Awake / Dream. Awake is the existing site, untouched: every rule below is scoped to
   html[data-mode="dream"], except the toggle itself and the hidden night-image layer. */

:root{
  --dr-bg:#1d1420;          /* deep ink-plum ground, never pure black */
  --dr-bg-alt:#251829;      /* panels, washes */
  --dr-bg-deep:#150e18;     /* footer */
  --dr-oxblood:#4f1620;     /* closing sections */
  --dr-ink:#efe4d2;         /* parchment text */
  --dr-ink-soft:#cdbda8;    /* secondary text */
  --dr-brass:#d2ab67;       /* brass gold: links, rules, ornament */
  --dr-brass-deep:#a9823f;
  --dr-rule:rgba(210,171,103,.34);
  --dr-glow:rgba(222,168,86,.22);
  --dr-fade:700ms;
  --dr-fibre:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .03' numOctaves='4' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .62 0 0 0 0 .42 0 0 0 0 .58 0 0 0 .05 -.01'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --dr-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .93 0 0 0 0 .85 0 0 0 0 .72 0 0 0 .075 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Toggle (both modes) ---------- */
.modetoggle-item{display:flex;align-items:center}
.modetoggle{display:inline-flex;align-items:center;gap:.45rem;font:inherit;font-size:.8rem;
  letter-spacing:.04em;color:inherit;background:none;border:1px solid var(--rule,rgba(10,8,8,.28));border-radius:2px;
  padding:.4rem .7rem;margin-block:-.45rem;cursor:pointer;line-height:1.2}
.modetoggle:hover{border-color:currentColor}
.modetoggle:focus-visible{outline:2px solid var(--focus,#0a0808);outline-offset:3px}
.modetoggle__lamp{width:14px;height:18px;flex:none}
.modetoggle__lamp .flame{fill:currentColor;opacity:0;transition:opacity var(--dr-fade)}
.modetoggle__lamp .body{fill:none;stroke:currentColor;stroke-width:1.2}
.modetoggle__a,.modetoggle__d{opacity:.55}
.modetoggle[aria-pressed="false"] .modetoggle__a,.modetoggle[aria-pressed="true"] .modetoggle__d{opacity:1;text-decoration:underline;text-underline-offset:.25em;text-decoration-thickness:1px}
.modetoggle__sep{opacity:.45}
.dr-live{position:absolute;top:0;left:0;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:820px){ .modetoggle{margin-block:0} }

/* ---------- Corrected photo pairs on the residence page (both modes) ---------- */
.dn-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.4rem,2.6vw,2.4rem);align-items:start}
.dn-pair__fig{margin:0}
.dn-pair .ph--wide{aspect-ratio:4/3}
@media (max-width:720px){ .dn-pair{grid-template-columns:minmax(0,1fr)} }

/* The corrected family-room photograph replaces a 4:5 image in existing tiles and bands;
   keep that 4:5 frame so the surrounding layout is unchanged. */
.tile .dn > img,.band__media .dn > img{aspect-ratio:4/5;object-fit:cover}

/* ---------- Night image layer (hidden in Awake) ---------- */
.dn{position:relative}
.dn__layer{position:absolute;inset:0;display:block;overflow:hidden;pointer-events:none}
.dn__night{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;max-height:none;object-fit:cover;opacity:0;pointer-events:none;
  transition:opacity var(--dr-fade) ease}
html[data-mode="dream"] .dn.dn--lit .dn__night{opacity:1}

/* Ornament elements are injected by JS; invisible in Awake */
/* Engraved dividers appear in both modes (ink in Awake, brass in Dream). */

/* ---------- Crossfade while switching ---------- */
html.mode-anim body,html.mode-anim body *,html.mode-anim body *::before,html.mode-anim body *::after{
  transition:background-color var(--dr-fade) ease,color var(--dr-fade) ease,border-color var(--dr-fade) ease,
    text-decoration-color var(--dr-fade) ease,box-shadow var(--dr-fade) ease,filter var(--dr-fade) ease,
    opacity var(--dr-fade) ease !important}

/* ================= DREAM ================= */
html[data-mode="dream"]{color-scheme:dark;--focus:var(--dr-brass)}
/* One continuous canvas: colour and paper grain live on the root, so nothing restarts at a section
   edge. Two grain scales: fine tooth, plus a slow fibre mottle. Every section, the closing band and
   the footer are transparent in Dream; they are separated by ornament and space, not by fills. */
html[data-mode="dream"]{background-color:var(--dr-bg);background-image:var(--dr-grain),var(--dr-fibre);
  background-size:220px 220px,640px 640px}
html[data-mode="dream"] body{background:transparent;color:var(--dr-ink)}
html[data-mode="dream"] #main,
html[data-mode="dream"] #main .stage,
html[data-mode="dream"] #main .chapter,
html[data-mode="dream"] #main .pagehead,
html[data-mode="dream"] #main .panel,
html[data-mode="dream"] #main .wash,
html[data-mode="dream"] #main .studies,
html[data-mode="dream"] #main .stage--accent,
html[data-mode="dream"] #main #remote.panel,
html[data-mode="dream"] #main .stage.close,
html[data-mode="dream"] .close,
html[data-mode="dream"] .ed-shot{background:transparent;color:var(--dr-ink)}
html[data-mode="dream"] footer.foot{background:transparent;color:var(--dr-ink-soft);border-top:1px solid var(--dr-rule)}
html[data-mode="dream"] .cx-fig picture{background:transparent}
html[data-mode="dream"] #main{--rule-soft:rgba(210,171,103,.22);--rule:var(--dr-rule);--ink:var(--dr-ink);--ink-soft:var(--dr-ink-soft)}

/* text */
html[data-mode="dream"] .masthead{background:color-mix(in srgb,var(--dr-bg) 94%,transparent);border-bottom-color:var(--dr-rule)}
html[data-mode="dream"] .masthead,html[data-mode="dream"] .masthead a,html[data-mode="dream"] .navtoggle{color:var(--dr-ink)}
html[data-mode="dream"] .navtoggle,html[data-mode="dream"] .modetoggle{border-color:var(--dr-rule)}
html[data-mode="dream"] #main h1,html[data-mode="dream"] #main h2,html[data-mode="dream"] #main h3,
html[data-mode="dream"] #main p,html[data-mode="dream"] #main li,html[data-mode="dream"] #main dt,
html[data-mode="dream"] #main dd,html[data-mode="dream"] #main th,html[data-mode="dream"] #main td,
html[data-mode="dream"] #main figcaption,html[data-mode="dream"] #main .panel p,
html[data-mode="dream"] #main .panel .eyebrow{color:var(--dr-ink)}
html[data-mode="dream"] #main .eyebrow,html[data-mode="dream"] #main .quiet,html[data-mode="dream"] #main .caption,
html[data-mode="dream"] #main .ed-class p,html[data-mode="dream"] #main .disclosure p,html[data-mode="dream"] #main .truth,
html[data-mode="dream"] #main .contactbig__plain,html[data-mode="dream"] #main .studycard__rooms,
html[data-mode="dream"] #main .ed-underline p,html[data-mode="dream"] #main .awaiting,
html[data-mode="dream"] #main .offer dt{color:var(--dr-ink-soft)}
html[data-mode="dream"] #main .close .quiet,html[data-mode="dream"] #main .close .lede{color:#e6d7c2}
html[data-mode="dream"] .foot__name,html[data-mode="dream"] .foot__area{color:var(--dr-ink-soft)}
html[data-mode="dream"] footer.foot a,html[data-mode="dream"] footer.foot.foot--ed a{color:var(--dr-ink)}

/* links, rules, labels */
html[data-mode="dream"] #main a:not(.btn),html[data-mode="dream"] #main a:not(.btn):not(.tile a):not(.leadproject):not(.studycard):not(.crosslink){color:var(--dr-ink);text-decoration-color:var(--dr-brass)}
html[data-mode="dream"] #main a:not(.btn):hover,html[data-mode="dream"] #main a:not(.btn):not(.tile a):not(.leadproject):not(.studycard):not(.crosslink):hover{text-decoration-color:var(--dr-ink)}
html[data-mode="dream"] #main .close a:not(.btn),html[data-mode="dream"] #main .close a:not(.btn):not(.tile a):not(.leadproject):not(.studycard):not(.crosslink){color:var(--dr-brass)}
html[data-mode="dream"] #main .tclass{border-color:var(--dr-brass);color:var(--dr-ink)}
html[data-mode="dream"] #main .tile a:hover .tile__meta h3{color:var(--dr-brass)}
html[data-mode="dream"] .pricing th,html[data-mode="dream"] .pricing td{border-bottom-color:var(--dr-rule)}
html[data-mode="dream"] #main .disclosure{border-color:var(--dr-rule)}
html[data-mode="dream"] #main .btn--primary,html[data-mode="dream"] #main .close .btn--primary{background:var(--dr-brass);border-color:var(--dr-brass);color:#1d1420}
html[data-mode="dream"] #main .btn--primary:hover{background:var(--dr-ink);border-color:var(--dr-ink)}
html[data-mode="dream"] #main .btn--quiet{color:var(--dr-ink);border-bottom-color:var(--dr-brass)}
html[data-mode="dream"] :focus-visible{outline-color:var(--dr-brass)}
html[data-mode="dream"] .skip:focus{background:var(--dr-bg);color:var(--dr-ink)}

/* frames + candlelight glow */
html[data-mode="dream"] .framed::before{border-color:var(--dr-brass-deep)}

/* ink ornaments and icons read as brass */
html[data-mode="dream"] .bicon,html[data-mode="dream"] .orn-method,html[data-mode="dream"] .orn-underwordmark,
html[data-mode="dream"] .ed-banner__orn,html[data-mode="dream"] #h-tension::before{filter:invert(72%) sepia(42%) saturate(520%) hue-rotate(351deg) brightness(95%)}
html[data-mode="dream"] #main .ed-banner__name{color:var(--dr-ink)}
/* The Enquire key is already antique brass in both modes; no ink-to-brass filter. */
html[data-mode="dream"] .bicon.bicon--enquire{filter:none}

/* drop caps: first paragraph after a chapter heading */
#main .band__text > h2 + p::first-letter,#main .iron-panel > h2 + p::first-letter,
#main #h-doctrine + p::first-letter{float:left;font-family:var(--font-heading);font-size:3.35em;
  line-height:.82;padding:.06em .1em 0 0;margin-right:.04em;color:var(--deep-plum,#4a163d)}
html[data-mode="dream"] #main .band__text > h2 + p::first-letter,html[data-mode="dream"] #main .iron-panel > h2 + p::first-letter,
html[data-mode="dream"] #main #h-doctrine + p::first-letter{color:var(--dr-brass);
  text-shadow:none}

/* engraved dividers */
html[data-mode="dream"] #main .stage.dr-host{position:relative}

#main .stage.dr-host{position:relative}
.dr-rule{display:block;position:absolute;left:50%;top:0;width:min(340px,62%);height:22px;
  transform:translate(-50%,-50%) scaleX(.2);opacity:0;color:#6a5148;pointer-events:none;z-index:1;
  transition:transform 1.4s cubic-bezier(.3,.1,.2,1),opacity 1.4s ease}
.dr-in > .dr-rule{transform:translate(-50%,-50%) scaleX(1);opacity:.7}
html[data-mode="dream"] .dr-rule{color:var(--dr-brass)}
html[data-mode="dream"] .dr-in > .dr-rule{opacity:.8}
.dr-rule path,.dr-rule circle{fill:none;stroke:currentColor;stroke-width:1}

/* water ripple: concept imagery only, applied by JS while on screen */
html[data-mode="dream"] .dr-ripple{filter:url(#dr-ripple)}


/* ================= Antique paper, engraved frames and header-scroll dividers (both modes) ========
   Everything here is static. No glints, glow or animation. */
:root{
  --av-ink:#3b2f2c;                         /* antique iron-gall ink */
  --av-rule:rgba(59,47,44,.55);
  /* embossed rag paper: fractal fibre lit from the upper left, printed as a warm tooth */
  --av-paper:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='p' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.11' numOctaves='4' seed='3' stitchTiles='stitch'/%3E%3CfeDiffuseLighting lighting-color='%23fff' surfaceScale='1.1' diffuseConstant='1.02'%3E%3CfeDistantLight azimuth='225' elevation='52'/%3E%3C/feDiffuseLighting%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .29 0 0 0 0 .22 -.6 0 0 0 .56'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
}
html[data-mode="dream"]{--av-ink:#caa66c;--av-rule:rgba(202,166,108,.5)}
html[data-mode="dream"]{--av-paper:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='p' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.11' numOctaves='4' seed='3' stitchTiles='stitch'/%3E%3CfeDiffuseLighting lighting-color='%23fff' surfaceScale='1.1' diffuseConstant='1.02'%3E%3CfeDistantLight azimuth='225' elevation='52'/%3E%3C/feDiffuseLighting%3E%3CfeColorMatrix values='0 0 0 0 .05 0 0 0 0 .02 0 0 0 0 .06 -.7 0 0 0 .66'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E")}

/* one continuous paper tooth, aligned to the viewport so it never restarts at a section edge */
html:not([data-mode="dream"]) body,
html:not([data-mode="dream"]) #main .stage,html:not([data-mode="dream"]) #main .chapter,
html:not([data-mode="dream"]) #main .pagehead,html:not([data-mode="dream"]) footer.foot{background-image:var(--av-paper);background-attachment:fixed}
html[data-mode="dream"]{background-image:var(--av-paper),var(--dr-grain),var(--dr-fibre);background-size:300px 300px,220px 220px,640px 640px;background-attachment:fixed}

/* engraved double-rule frame on photographs, with the header's diamond points at each corner */
#main .framed::before{border:1px solid var(--av-rule);inset:0}
#main .framed{--av-d:7px}
#main .framed::after{content:"";position:absolute;inset:-4px;pointer-events:none;
  outline:.5px solid var(--av-rule);outline-offset:-9px;          /* the inner of the two engraved rules */
  --dm:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0L10 5L5 10L0 5Z' fill='%233b2f2c'/%3E%3C/svg%3E");
  background:var(--dm) 0 0/9px 9px no-repeat,var(--dm) 100% 0/9px 9px no-repeat,var(--dm) 0 100%/9px 9px no-repeat,var(--dm) 100% 100%/9px 9px no-repeat}
html[data-mode="dream"] .framed{box-shadow:none}
html[data-mode="dream"] #main .framed::after{--dm:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0L10 5L5 10L0 5Z' fill='%23caa66c'/%3E%3C/svg%3E")}
html[data-mode="dream"] .cx-fig picture,html[data-mode="dream"] .md-concept__img{box-shadow:none}

/* section divider: the header's own acanthus scroll bar, inked per mode */
.dr-rule{background:var(--av-ink);-webkit-mask:url("img/banner-orn-top-720.png") center/contain no-repeat;mask:url("img/banner-orn-top-720.png") center/contain no-repeat;
  width:min(420px,72%) !important;height:46px !important}
.dr-rule *{display:none}
.dr-in > .dr-rule{opacity:.78}
html[data-mode="dream"] .dr-in > .dr-rule{opacity:.82}

/* ---------- Reduced motion: static Dream ---------- */
@media (prefers-reduced-motion:reduce){
  html.mode-anim body *,html.mode-anim body *::before,html.mode-anim body *::after{transition:none !important}
  .dn__night,.dr-rule,.modetoggle__lamp .flame{transition:none !important;animation:none !important}
  .dr-rule{transform:translate(-50%,-50%) !important;opacity:.75 !important}
  html[data-mode="dream"] .dr-ripple{filter:none}
}
html[data-mode="dream"] .modetoggle__lamp .flame{opacity:1}

/* ================= Home · The tension — fine Art Nouveau ironwork frame (proof section) =========
   Original AI-generated artwork (see img/antique/SOURCES.md). Shown at its natural 2:3 proportion;
   the copy is laid out to fit the frame, never the frame stretched to the copy. Static; no glow. */
#main section[aria-labelledby="h-tension"] #h-tension::before{display:none}
#main section[aria-labelledby="h-tension"] .iron-panel{
  position:relative;aspect-ratio:2/3;width:100%;max-width:470px;
  display:flex;flex-direction:column;justify-content:center;
  padding:15% 17% 15%;box-sizing:border-box;margin:0 0 1.6rem;
  --iron:#232321}                                   /* dark iron on the cream paper */
html[data-mode="dream"] #main section[aria-labelledby="h-tension"] .iron-panel{--iron:#a3845a}   /* muted aged bronze */
#main section[aria-labelledby="h-tension"] .iron-panel::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--iron);
  -webkit-mask:url("img/antique/avila-fine-ironwork-frame.png") center/100% 100% no-repeat;
  mask:url("img/antique/avila-fine-ironwork-frame.png") center/100% 100% no-repeat}
#main section[aria-labelledby="h-tension"] .iron-panel > *{position:relative}
#main section[aria-labelledby="h-tension"] .iron-panel > :last-child{margin-bottom:0}
#main section[aria-labelledby="h-tension"] .iron-panel h2{font-size:clamp(1.45rem,4.2vw,1.95rem)}
@media (max-width:420px){
  /* phones: the frame may use the full screen width so the copy inside keeps a readable measure */
  #main section[aria-labelledby="h-tension"] .iron-panel{width:calc(100% + 2 * var(--gutter,20px));max-width:none;
    margin-left:calc(-1 * var(--gutter,20px));padding:12% 19% 12%}
  #main section[aria-labelledby="h-tension"] .iron-panel p{font-size:.95rem}
}

/* ================= Fine ironwork composition (local preview; all pages with body.orn) =================
   Every ornament is a natural-proportion piece cut from the approved fine ironwork artwork
   (img/antique/fine/*, see SOURCES.md). Pieces are mirrored, never stretched; cut edges taper out.
   Ornate opening → quiet passages → fuller ending. Static; no glow or animation. */
.orn{--fo-ink:#2a2a28}
html[data-mode="dream"] .orn{--fo-ink:#a3845a}
.orn #main section.stage,.orn #main .band__media,.orn #main .cx-fig{position:relative}
.orn .fo{position:absolute;display:block;pointer-events:none;z-index:0;background:var(--fo-ink);
  --img:none;--fade:linear-gradient(#000 0 0);
  -webkit-mask:var(--img) 0 0/100% auto no-repeat,var(--fade);-webkit-mask-composite:source-in;
  mask:var(--img) 0 0/100% auto no-repeat,var(--fade);mask-composite:intersect}
.orn .fo--corner{--img:url("img/antique/fine/fine-corner-tl.png");aspect-ratio:280/340;
  --fade:linear-gradient(90deg,#000 80%,transparent),linear-gradient(#000 80%,transparent)}
.orn .fo--corner{-webkit-mask:var(--img) 0 0/100% auto no-repeat,linear-gradient(90deg,#000 78%,transparent),linear-gradient(#000 78%,transparent);
  -webkit-mask-composite:source-in,source-in;
  mask:var(--img) 0 0/100% auto no-repeat,linear-gradient(90deg,#000 78%,transparent),linear-gradient(#000 78%,transparent);mask-composite:intersect,intersect}
.orn .fo--vine{--img:url("img/antique/fine/fine-vine-left.png");--fade:linear-gradient(transparent,#000 18%,#000 70%,transparent)}
.orn .fo--crest{--img:url("img/antique/fine/fine-crest-top.png");aspect-ratio:470/205;--fade:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.orn .fo--crestb{--img:url("img/antique/fine/fine-crest-bottom.png");aspect-ratio:470/212;--fade:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.orn .fo--fx{transform:scaleX(-1)}
.orn .fo--fy{transform:scaleY(-1)}
.orn .fo--fx.fo--fy{transform:scale(-1,-1)}
.orn #main .stage > .wrap,.orn #main .band__media > picture,.orn #main .cx-fig > picture{position:relative;z-index:1}

/* opening: corner clusters flank the header lockup, vines trail down the margins and taper away */
.orn .fo--open-l{top:18px;left:max(10px,calc(var(--gutter) - 56px));width:clamp(78px,11vw,150px)}
.orn .fo--open-r{top:18px;right:max(10px,calc(var(--gutter) - 56px));width:clamp(78px,11vw,150px)}
.orn .fo--open-vl,.orn .fo--open-vr{top:calc(18px + clamp(78px,11vw,150px) * 1.1);width:clamp(30px,4.2vw,54px);bottom:0}
.orn .fo--open-vl{left:max(8px,calc(var(--gutter) - 50px))}
.orn .fo--open-vr{right:max(8px,calc(var(--gutter) - 50px))}
/* the method: the vine returns in the left margin; one photo corner, lower right */
.orn .fo--m-vl{left:max(6px,calc(var(--gutter) - 52px));top:12%;width:clamp(30px,4vw,52px);height:70%}
.orn .fo--m-corner{--cw:clamp(70px,9vw,118px);width:var(--cw);right:calc(var(--cw) * -.58);top:calc(var(--cw) * -.7);z-index:2}
/* concepts: the vine returns on the right; one corner on the first figure */
.orn .fo--c-vr{right:max(6px,calc(var(--gutter) - 52px));top:6%;width:clamp(30px,4vw,52px);height:52%}
.orn .fo--c-corner{--cw:clamp(70px,9vw,118px);width:var(--cw);left:calc(var(--cw) * -.8);top:calc(var(--cw) * -.2);z-index:2}
.orn{overflow-x:clip}
/* ending: crest above and below the invitation, corner clusters at the lower margins */
.orn .fo--e-top,.orn .fo--e-bottom{position:relative;margin:0 auto;width:min(340px,72%)}
.orn .fo--e-top{margin-bottom:1.1rem}
.orn .fo--e-bottom{margin-top:1.6rem}
.orn .fo--e-bl{left:max(10px,calc(var(--gutter) - 56px));bottom:10px;width:clamp(78px,10vw,140px)}
.orn .fo--e-br{right:max(10px,calc(var(--gutter) - 56px));bottom:10px;width:clamp(78px,10vw,140px)}

/* Awake: the closing invitation sits on the same continuous paper (no dark block) */
html:not([data-mode="dream"]) .orn #main .stage.close{background:var(--surface-1,#f4efe6) var(--av-paper) fixed;color:var(--ink,#0a0808)}
html:not([data-mode="dream"]) .orn #main .close h2{color:#0a0808}
html:not([data-mode="dream"]) .orn #main .close .quiet,html:not([data-mode="dream"]) .orn #main .close .lede{color:#3d3743}
html:not([data-mode="dream"]) .orn #main .close .btn--quiet{color:#0a0808;border-bottom-color:#0a0808}
html:not([data-mode="dream"]) .orn #main .close .btn--primary{background:#0a0808;border-color:#0a0808;color:#f4efe6}

/* phones: margins are too narrow for trailing vines; the opening and ending keep small corners */
@media (max-width:700px){
  .orn .fo--open-vl,.orn .fo--open-vr,.orn .fo--m-vl,.orn .fo--c-vr,
  .orn .fo--open-l,.orn .fo--open-r{display:none}           /* the header's own ornament opens the page */
  .orn .fo--m-corner,.orn .fo--c-corner{--cw:58px}
  .orn .fo--e-bl,.orn .fo--e-br{width:60px;bottom:6px}
}

/* Header artwork around the logo: inked with exactly the same colour as the Home ironwork in each
   mode. The image's own alpha is the mask (design, line weight and proportions unchanged); the
   image pixels themselves are moved out of view so only the shared ink shows. */
.orn #main .ed-lockup--logo .ed-banner__orn{background:var(--fo-ink);filter:none;object-position:-99999px 0;opacity:.87;   /* equalises apparent ink density with the ironwork (measured) */
  -webkit-mask:var(--orn) center/100% 100% no-repeat;mask:var(--orn) center/100% 100% no-repeat}
.orn #main .ed-lockup--logo .ed-banner__orn:first-of-type{--orn:url("img/banner-orn-top.png")}
.orn #main .ed-lockup--logo .ed-banner__orn:last-of-type{--orn:url("img/banner-orn-bottom.png")}
html[data-mode="dream"] .orn #main .ed-banner__orn{filter:none}

/* Home hero: front view of the sofa. On phones the frame is kept close to square so the whole sofa stays in view. */
@media (max-width:859px){ .ed-shot--hero.ed-shot--sofa{height:min(68vh,100vw)} }

/* page-specific placements */
.orn .fo--mid-vl{left:max(6px,calc(var(--gutter) - 52px));top:10%;width:clamp(30px,4vw,52px);height:62%}
.orn .fo--mid-vr{right:max(6px,calc(var(--gutter) - 52px));top:10%;width:clamp(30px,4vw,52px);height:62%}
@media (max-width:700px){.orn .fo--mid-vl,.orn .fo--mid-vr{display:none}}
/* inner pages: headings start at the left margin, so the opening corners live inside the margin */
.orn:not(.page-home) .fo--open-l,.orn:not(.page-home) .fo--open-r{--cw:calc(var(--gutter) - 14px);width:var(--cw);top:14px}
.orn:not(.page-home) .fo--open-l{left:6px}
.orn:not(.page-home) .fo--open-r{right:6px}
.orn:not(.page-home) .fo--open-vl,.orn:not(.page-home) .fo--open-vr{top:calc(14px + var(--cw,58px) * 1.15);width:calc(var(--gutter) - 22px);--cw:calc(var(--gutter) - 14px)}
.orn:not(.page-home) .fo--open-vl{left:8px}
.orn:not(.page-home) .fo--open-vr{right:8px}
/* the closing crest replaces the section divider there (no doubled ornament) */
.orn #main .stage.close > .dr-rule{display:none}
/* Services: the closing invitation is centred like every other page's, under and over its crests */
.orn #main .stage.close:not(.close--compact) > .wrap{text-align:center}
.orn #main .stage.close:not(.close--compact) > .wrap > :is(h2,p){margin-inline:auto}