/* One shared ellipse family controls the photo mask, internal ring and outer wave. */
.home-page{--hero-rule:#bd9b60;--hero-gutter:56px}
html[data-palette="mineral"] .home-page{--hero-rule:#a4b8ba}
html[data-palette="heritage"] .home-page{--hero-rule:#bc855b}
.home-page .header-band .site-header{height:var(--header-content-height,106px);border-bottom:0}
.home-page .hero{padding-top:0;width:auto;margin:0}
.hero-banner{border-bottom:5px solid var(--hero-rule);background:var(--paper)}
.hero-stage{position:relative;isolation:isolate;height:clamp(310px,25vw,410px);overflow:hidden}
.home-page .hero-heading{position:relative;z-index:2;height:100%;margin-block:0;margin-inline:auto;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:18px;padding-block:24px}
.home-page .hero h1{font-size:clamp(44px,4.5vw,72px);line-height:1.12;letter-spacing:-.045em;max-width:49%}
.home-page .hero h1 .display-accent{font-size:.95em;white-space:nowrap}
.home-page .hero-intro{display:block;margin:0;padding:0;max-width:32ch}
.home-page .hero-intro p{font-size:14px;line-height:1.55;margin-bottom:14px}
.home-page .hero-intro .text-link{font-size:12px;min-width:108px;gap:28px}
.hero-definitions{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.hero-composition{display:block;pointer-events:none;overflow:hidden}
.hero-composition-desktop{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero-composition-compact{display:none}
.hero-curve{fill:none;stroke:#92988f;stroke-opacity:.8;stroke-width:1.1px;vector-effect:non-scaling-stroke}
.hero-curve[data-tone]{stroke:var(--selection-shade)}
.hero-logo-disc{fill:var(--paper);fill-opacity:.22}
.home-page .hero-image{height:clamp(360px,37vw,560px)}
.home-page .hero-feature{padding-top:var(--hero-gutter)}
/* A smaller desktop composition opens a mirrored edge and brings the featured
   image into the first screen without changing its frame or the content below. */
@media(min-width:1061px){
 .home-page .hero-stage{height:270px}
 /* Center the left-aligned copy in the opening between the mirrored contours. */
 .home-page .hero-heading{width:max-content;max-width:42%;margin-left:32%;margin-right:0;transform:translateX(-50%);text-align:left;gap:14px;padding-block:20px}
 .home-page .hero-stage .hero-heading h1{font-size:clamp(40px,3.83vw,49px);max-width:100%}
 .home-page .hero-intro{max-width:31ch}
 .home-page .hero-intro p{font-size:12px;line-height:1.55;margin:0}
}
@media(max-width:1150px){.home-page{--hero-gutter:32px}}
@media(min-width:1700px){.home-page .hero-heading{margin-block:0}.home-page .hero{padding-top:0}}
@media(max-width:1060px){
  .home-page .header-band .site-header{height:var(--header-content-height,90px)}
  .home-page .hero h1{font-size:clamp(42px,4.5vw,48px)}
}
@media(max-width:1060px){
  /* Tablets share the artwork-first reading order used on phones. */
  .home-page .hero-stage{height:auto;display:flex;flex-direction:column}
  .home-page .hero-banner{border-bottom:0}
  .home-page .hero-stage::after{content:'';order:-1;flex:0 0 5px;background:var(--hero-rule)}
  .home-page .hero-heading{height:auto;display:flex;flex-direction:column;gap:12px;align-items:flex-start;padding-block:24px 22px;min-height:0}
  .home-page .hero h1{font-size:clamp(38px,5.7vw,51px);max-width:none}
  .home-page .hero-intro{width:100%;max-width:none}
  .home-page .hero-intro p{max-width:66ch;margin-bottom:4px}
  .hero-composition-desktop{display:none}
  .home-page .hero-composition-compact{display:block;position:relative;order:-2;flex-shrink:0;width:100%;height:auto;aspect-ratio:20/11}
  .home-page .hero-image{height:410px}
}
@media(max-width:680px){
  /* Keep the approved phone sizing within the shared compact layout. */
  .home-page .hero-stage{display:flex;flex-direction:column}
  .home-page .hero-banner{border-bottom:0}
  .home-page .hero-composition-compact{order:-2;flex-shrink:0}
  .home-page .hero-stage::after{content:'';order:-1;flex:0 0 5px;background:var(--hero-rule)}
  .home-page .hero-heading{display:flex;align-items:flex-start;gap:18px;padding-block:27px;min-height:0}
  .home-page .hero h1{font-size:clamp(36px,7.8vw,50px)}
  .home-page .hero-intro{max-width:42ch}
  .home-page .hero-intro p{font-size:14px;margin:0 0 9px}
  .home-page .hero-composition-compact{height:clamp(210px,60vw,330px)}
}
@media(max-width:560px){
  .home-page{--hero-gutter:20px}
  .home-page .header-band .site-header{height:82px}
  .home-page .hero h1{font-size:clamp(33px,9.1vw,46px)}
  .home-page .hero-heading{gap:17px;padding-block:24px}
  .home-page .hero-intro{max-width:33ch}
  .home-page .hero-image{height:340px}
}
@media(forced-colors:active){.hero-curve,.hero-curve[data-tone]{stroke:CanvasText}.hero-banner{border-color:CanvasText}}
@media(max-width:680px){
 .home-page .hero-heading{gap:10px;padding-block:20px 16px}
 .home-page .hero-intro{width:100%;max-width:none}
 .home-page .hero-intro p{max-width:none;margin-bottom:4px}
}
/* Lift the featured frame slightly and let it fit below the compact hero text. */
@media(max-width:1060px){
 .home-page .hero .hero-feature{padding-top:max(0px,calc(var(--page-gutter) - 8px))}
 .home-page .hero .hero-image{height:clamp(220px,var(--sdw-hero-image-room,410px),410px)}
}
@media(max-width:560px){.home-page .hero .hero-image{height:clamp(220px,var(--sdw-hero-image-room,340px),340px)}}

/* Carry the featured photograph from the banner's lower gold rule to the site
   edges. The raised caption aligns with the content frame on the right. */
.home-page .hero .hero-feature{width:100%;padding-top:0}
.home-page .hero .hero-project{left:auto;right:var(--page-gutter);bottom:55px;width:max-content;max-width:calc(100% - var(--page-gutter) - var(--page-gutter));justify-content:flex-end;text-align:right}
.home-page .hero .hero-project>span:first-child{min-width:0}
.home-page .hero .hero-project>.round-arrow{flex-shrink:0}
@media(min-width:561px) and (max-width:1060px){
 .home-page .hero .hero-image::after{inset:0;background:radial-gradient(ellipse at right bottom,#10261bb3 0%,#10261b73 42%,#10261b00 76%),linear-gradient(0deg,#10261b66,transparent 65%)}
}
@media(max-width:560px){.home-page .hero .hero-project{bottom:47px}}