/* Westside Watch — canonical first-screen editorial composition.
   Living Masthead: asymmetrical brand composition, inscription-like scripture, and cinematic navigation.
   Single authority for home hero. Other page typography stays with Design OS.
   Screenshot-driven desktop proportions; no glyph stretching or black/gold palette. */
body.home .sites-home-hero{
 --home-edge:clamp(24px,4vw,86px);
 --home-title-size:clamp(66px,5.5vw,110px);
 --home-ui-size:clamp(16px,1.02vw,21px);
 --home-chinese-size:clamp(21px,1.38vw,28px);
 --home-verse-size:clamp(19px,1.18vw,25px);
 position:relative;isolation:isolate;min-height:100svh;overflow:hidden;
 background:var(--ws-surface,#faf9f5) url("/images/home-opening-engraving.jpg") center/cover no-repeat;color:#fff;
}
body.home .sites-home-hero .sites-home-film{z-index:0;pointer-events:none}
body.home .sites-home-hero .sites-home-film iframe{pointer-events:none;transform:none!important}
body.home .sites-home-hero .sites-home-film:after{
 content:"";position:absolute;inset:0;pointer-events:none;
 background:linear-gradient(90deg,rgba(12,20,19,.58) 0%,rgba(12,20,19,.18) 46%,rgba(12,20,19,.08) 75%,rgba(12,20,19,.30) 100%),
 linear-gradient(0deg,rgba(10,17,17,.76) 0%,rgba(10,17,17,.12) 37%,transparent 66%,rgba(10,17,17,.32) 100%);
}
body.home .sites-home-hero .sites-home-masthead{
 position:absolute;z-index:2;top:clamp(118px,17vh,245px);
 left:clamp(30px,5.5vw,118px);width:clamp(610px,53vw,1160px);max-width:none;padding:0;
}
body.home .sites-home-hero .sites-home-masthead img{
 display:block;width:100%;height:auto;object-fit:contain;opacity:1;
}
body.home .sites-home-hero .sites-home-nav{
 position:absolute;z-index:5;top:clamp(25px,3.5vh,48px);right:var(--home-edge);left:auto;
 max-width:calc(100% - 2 * var(--home-edge));display:flex;flex-wrap:wrap;
 justify-content:flex-end;align-items:center;gap:clamp(12px,1.3vw,25px);
 font-family:var(--ws-type-display-en-sc,"Bodoni Moda SC",serif);
 font-size:var(--home-ui-size);font-weight:400;letter-spacing:.015em;line-height:1.5;
 mix-blend-mode:normal;
}
body.home .sites-home-hero .sites-home-nav a{
 font-family:var(--ws-type-display-en-sc,"Bodoni Moda SC",serif);
 display:inline-flex;align-items:center;min-height:40px;opacity:1;
 border-bottom:1px solid transparent;text-decoration:none;
}
body.home .sites-home-hero .sites-home-nav a:hover,
body.home .sites-home-hero .sites-home-nav a:focus-visible{border-color:currentColor}
body.home .sites-home-hero .sites-home-intro{
 position:absolute;z-index:2;left:auto;right:var(--home-edge);
 bottom:clamp(175px,20vh,265px);width:min(43vw,760px);max-width:none;
 display:grid;grid-template-columns:minmax(0,1fr);align-items:end;
}
body.home .sites-home-hero .sites-home-star{
 grid-column:1;grid-row:1;width:clamp(16px,1.2vw,23px);height:auto;
 margin:0 0 clamp(12px,1.5vh,21px);
}
body.home .sites-home-hero .sites-home-intro h1{
 grid-column:1;grid-row:2;min-width:0;max-width:none;margin:0;
 font-family:var(--ws-type-display-en,"Bodoni Moda",serif);
 font-size:var(--home-title-size);font-weight:400;line-height:.88;
 letter-spacing:-.035em;text-wrap:nowrap;overflow-wrap:normal;font-synthesis:none;
}
body.home .sites-home-hero .sites-home-intro h1 em{
 font-family:inherit;font-style:italic;font-weight:400;font-synthesis:none;
 white-space:nowrap;display:inline-block;padding-left:clamp(26px,3.5vw,76px);
}
body.home .sites-home-hero .sites-home-scripture-pair{
 grid-column:1;grid-row:3;display:flex;flex-direction:column;align-items:flex-start;
 gap:clamp(3px,.5vh,7px);min-width:0;margin-top:clamp(24px,3vh,42px);padding-left:clamp(28px,3.5vw,76px);border-left:1px solid rgba(255,255,255,.45);
}
body.home .sites-home-hero .sites-home-scripture-pair .sites-home-slogan-zh,
body.home .sites-home-hero .sites-home-scripture-pair .sites-home-scripture{
 position:static;display:block;grid-column:auto;grid-row:auto;align-self:auto;
 max-width:60ch;margin:0;opacity:1;line-height:1.55;font-synthesis:none;
}
body.home .sites-home-hero .sites-home-scripture-pair .sites-home-slogan-zh{
 font-family:var(--ws-type-display-zh,"Chiron Hei HK WS",sans-serif);
 font-size:clamp(18px,1.12vw,23px);font-weight:200;letter-spacing:.1em;
}
body.home .sites-home-hero .sites-home-scripture-pair .sites-home-scripture{
 font-family:var(--ws-type-display-en-sc,"Bodoni Moda SC",serif);
 font-size:clamp(16px,1.05vw,21px);font-weight:400;letter-spacing:.01em;line-height:1.45;
}
body.home .sites-home-hero .sites-home-scripture-pair cite{
 font-family:var(--ws-type-display-en,"Bodoni Moda",serif);
 font-style:italic;
 letter-spacing:.01em;
 line-height:1.45;
 display:block;margin-top:clamp(8px,1.3vh,17px);
 font-size:clamp(13px,.78vw,16px);font-weight:400;opacity:.75;
}
body.home .sites-home-hero .sites-home-entry{
 position:absolute;z-index:5;right:var(--home-edge);left:auto;
 bottom:clamp(24px,4vh,50px);display:flex;justify-content:space-between;align-items:flex-end;
 gap:clamp(20px,3vw,55px);
 font-family:var(--ws-type-display-en-sc,"Bodoni Moda SC",serif);
 font-size:var(--home-ui-size);letter-spacing:.02em;
}
body.home .sites-home-hero .sites-home-entry a{
 font-family:var(--ws-type-display-en-sc,"Bodoni Moda SC",serif);
 white-space:nowrap;
 display:flex;align-items:center;justify-content:space-between;gap:15px;
 min-width:0;min-height:54px;padding:10px 0;
 border-bottom:1px solid rgba(255,255,255,.5);opacity:1;
 transition:border-color .35s ease,translate .35s ease;
}
body.home .sites-home-hero .sites-home-entry a:hover{border-color:#fff;translate:0 -4px}
body.home .sites-home-hero .sites-home-entry a:nth-child(2){margin-left:clamp(12px,5vw,100px)}
body.home .sites-home-hero .sites-home-entry a:nth-child(3){margin-left:auto}
body.home .sites-home-hero .sites-home-entry span{
 font-family:var(--ws-type-display-zh,"Chiron Hei HK WS",sans-serif);
 font-size:clamp(15px,.9vw,19px);font-weight:400;white-space:nowrap;
}
body.home .sites-home-hero :is(.sites-home-nav a,.sites-home-entry a):focus-visible{
 outline:2px solid currentColor;outline-offset:5px;
}
@media(min-width:901px) and (max-height:740px){
 body.home .sites-home-hero{min-height:740px}
}
@media(max-width:900px){
 body.home .sites-home-hero{
  --home-edge:clamp(20px,5vw,40px);
  --home-title-size:clamp(64px,12vw,108px);
  --home-ui-size:clamp(14px,1.8vw,17px);
  --home-chinese-size:clamp(17px,2.5vw,22px);
  --home-verse-size:clamp(16px,2vw,20px);
  min-height:100svh;height:auto;display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto auto minmax(0,1fr) auto;
  row-gap:clamp(26px,5vh,60px);align-content:start;
  padding:clamp(18px,3vh,32px) var(--home-edge) clamp(22px,4vh,40px);
 }
 body.home .sites-home-hero .sites-home-film{position:absolute;inset:0;z-index:0}
 body.home .sites-home-hero .sites-home-nav{
  position:relative;grid-row:1;top:auto;left:auto;right:auto;
  max-width:100%;justify-content:flex-start;gap:6px 18px;
 }
 body.home .sites-home-hero .sites-home-masthead{
  position:relative;grid-row:2;top:auto;left:auto;right:auto;
  width:min(78vw,430px);max-width:100%;
 }
 body.home .sites-home-hero .sites-home-intro{
  position:relative;grid-row:3;left:auto;right:auto;bottom:auto;
  width:100%;max-width:100%;align-self:end;
 }
 body.home .sites-home-hero .sites-home-intro h1{
  font-size:var(--home-title-size);max-width:100%;
 }
 body.home .sites-home-hero .sites-home-intro h1 em{padding-left:clamp(14px,4vw,40px)}
 body.home .sites-home-hero .sites-home-scripture-pair{padding-left:clamp(12px,2vw,25px)}
 body.home .sites-home-hero .sites-home-entry a:nth-child(n){margin-left:0}
 body.home .sites-home-hero .sites-home-entry{
  position:relative;grid-row:4;left:auto;right:auto;bottom:auto;
  width:100%;display:flex;flex-wrap:wrap;gap:12px 22px;
 }
 body.home .sites-home-hero .sites-home-entry a{flex:1 1 170px;min-width:0}
}
@media(max-width:520px){
 body.home .sites-home-hero{--home-title-size:clamp(54px,13vw,74px)}
 body.home .sites-home-hero .sites-home-masthead{width:min(82vw,360px)}
 body.home .sites-home-hero .sites-home-scripture-pair{margin-top:18px}
}
@media(prefers-reduced-motion:reduce){
 body.home .sites-home-hero .sites-home-entry a{transition:none!important;translate:none!important}
 body.home .sites-home-hero :is(.sites-home-masthead,.sites-home-intro,.sites-home-entry){
  animation:none!important;opacity:1!important;transform:none!important;
 }
}

/* Living Sequence: film-led exit into existing WATCH/WITNESS and WALK/WORSHIP scenes.
   No scroll trapping, no iframe replacement, and no layout shift. */
@media (min-width:901px) and (prefers-reduced-motion:no-preference){
 body.home .sites-home-hero .sites-home-masthead{
  opacity:calc(1 - var(--home-hero-exit,0) * .82);
  transform:translate3d(0,calc(var(--home-hero-exit,0) * -5vh),0);
 }
 body.home .sites-home-hero .sites-home-intro{
  opacity:calc(1 - var(--home-hero-exit,0));
  transform:translate3d(0,calc(var(--home-hero-exit,0) * -9vh),0);
 }
 body.home .sites-home-hero .sites-home-film{
  filter:brightness(calc(1 - var(--home-hero-exit,0) * .2));
 }
}
@media(prefers-reduced-motion:reduce){
 body.home .sites-home-hero .sites-home-masthead,
 body.home .sites-home-hero .sites-home-intro{opacity:1!important;transform:none!important}
}
/* Continuous scene handoff: fade the outgoing film into the next screen's
   warm editorial surface. Progress is authored by dawn-interaction-layer.js.
   This layer never intercepts links, scrolling or Candidate 01 hover cards. */
@media(min-width:901px) and (prefers-reduced-motion:no-preference){
 body.home .sites-home-hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:#eee8da;
  opacity:calc(var(--home-hero-exit,0) * .68);
 }
 /* Keep interactive iframe content fully visible. An opacity animation on
    the entire iframe hides the live cards and can make a scene look blank. */
 body.home .candidate-focus-screen{
  position:relative;
 }
 body.home .candidate-focus-screen iframe{
  opacity:1;
 }
}
/* Hero structural foundation — migrated from deleted sites-home.css. */
body.home{margin:0;color:var(--ws-text);font-family:var(--ws-type-display-en,"Bodoni Moda",serif);line-height:1.35}
body.home *{box-sizing:border-box}
body.home a{color:inherit;text-decoration:none}
body.home img,body.home iframe{display:block;max-width:100%}
body.home .sites-home-hero .sites-home-film{position:absolute;inset:0}
body.home .sites-home-hero .sites-home-film iframe{width:100%;height:100%;border:0;object-fit:cover}
body.home .sites-home-hero .sites-home-masthead img{filter:brightness(0) invert(1)}
body.home .sites-home-hero .sites-home-star{filter:brightness(0) invert(1)}

/* Asymmetric cinematic entry baseline; mobile retains wrapping. */
@media(min-width:901px){
 body.home .sites-home-hero .sites-home-entry{left:var(--home-edge);right:var(--home-edge);gap:clamp(20px,2vw,38px)}
 body.home .sites-home-hero .sites-home-entry a{min-width:0}
}



/* R23: cinematic reset — the film owns the frame, type occupies one editorial
   field instead of two competing corners. No new copy, assets, or panels. */
@media(min-width:901px){
 body.home .sites-home-hero{--home-edge:clamp(30px,4vw,88px);--home-title-size:clamp(65px,6vw,124px);--home-ui-size:clamp(15px,.95vw,20px)}
 body.home .sites-home-hero .sites-home-masthead{
  top:clamp(88px,13vh,156px);left:var(--home-edge);
  width:clamp(520px,46vw,1000px);
 }
 body.home .sites-home-hero .sites-home-intro{
  left:var(--home-edge);right:auto;bottom:clamp(170px,22vh,235px);
  width:min(53vw,850px);justify-items:start;text-align:left;
 }
 body.home .sites-home-hero .sites-home-star{justify-self:start}
 body.home .sites-home-hero .sites-home-intro h1{
  font-size:var(--home-title-size);line-height:.89;letter-spacing:-.04em;
  text-align:left;
 }
 body.home .sites-home-hero .sites-home-intro h1 em{padding-left:clamp(22px,2.5vw,55px)}
 body.home .sites-home-hero .sites-home-scripture-pair{
  margin-top:clamp(16px,2.2vh,30px);padding:0 0 0 clamp(20px,2.5vw,55px);
  border:0;align-items:flex-start;text-align:left;gap:3px;
 }
 body.home .sites-home-hero .sites-home-scripture-pair .sites-home-slogan-zh{font-size:clamp(19px,1.24vw,26px)}
 body.home .sites-home-hero .sites-home-scripture-pair .sites-home-scripture{font-size:clamp(17px,1.1vw,23px)}
 body.home .sites-home-hero .sites-home-entry{
  display:flex;left:var(--home-edge);right:var(--home-edge);
  bottom:clamp(25px,3.8vh,48px);justify-content:space-between;
  gap:clamp(24px,3vw,64px);
 }
 body.home .sites-home-hero .sites-home-entry a,
 body.home .sites-home-hero .sites-home-entry a:nth-child(n){
  margin-left:0;flex:1 1 0;min-height:56px;padding:12px 0;
  border:0;border-top:1px solid rgba(255,255,255,.55);
 }
 body.home .sites-home-hero .sites-home-film:after{
  background:linear-gradient(90deg,rgba(10,17,17,.68) 0%,rgba(10,17,17,.43) 34%,rgba(10,17,17,.03) 76%),
  linear-gradient(0deg,rgba(10,17,17,.68) 0%,transparent 36%,rgba(10,17,17,.18) 100%);
 }
}
@media(min-width:901px) and (max-height:800px){
 body.home .sites-home-hero .sites-home-masthead{top:clamp(78px,10vh,108px);width:clamp(450px,38vw,790px)}
 body.home .sites-home-hero .sites-home-intro{bottom:clamp(120px,18vh,160px)}
 body.home .sites-home-hero{--home-title-size:clamp(58px,5vw,95px)}
}
@media(max-width:900px){
 body.home .sites-home-hero .sites-home-masthead{width:min(80vw,430px)}
 body.home .sites-home-hero .sites-home-entry a{border-top:1px solid rgba(255,255,255,.5);border-bottom:0}
}

/* First-layer foundation: one floating navigation across all ten scenes.
   Design OS supplies fonts and color tokens; realm iframe styles remain isolated. */
body.home .sites-home-nav--floating{
 position:fixed;z-index:1000;top:0;left:0;right:0;
 width:100%;max-width:none;display:flex;justify-content:space-between;align-items:center;
 padding:clamp(16px,2.2vw,30px) clamp(20px,4vw,88px);
 background:transparent;color:#fff;
 font-family:var(--ws-type-display-en-sc,"Bodoni Moda SC",serif);
 font-size:clamp(12px,.95vw,17px);font-weight:400;
 letter-spacing:.04em;line-height:1.4;
 mix-blend-mode:normal;pointer-events:none;
 transition:transform .32s ease,color .2s ease;
}
body.home .sites-home-nav--floating[data-nav-hidden="true"]{transform:translateY(-110%)}
body.home .sites-home-nav--floating[data-nav-tone="light"]{color:var(--ws-text,#252525)}
body.home .sites-home-nav--floating :is(a,summary){pointer-events:auto;color:inherit;text-decoration:none}
body.home .sites-home-nav--floating .sites-home-nav__brand{font-family:inherit;white-space:nowrap}
body.home .sites-home-nav__details{position:relative;pointer-events:auto}
body.home .sites-home-nav__details summary{display:flex;gap:1.4em;align-items:center;cursor:pointer;list-style:none;min-height:44px}
body.home .sites-home-nav__details summary::-webkit-details-marker{display:none}
body.home .sites-home-nav__details[open] summary span{transform:rotate(45deg)}
body.home .sites-home-nav__panel{
 position:fixed;top:0;left:0;right:0;height:100dvh;overflow-y:auto;
 display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
 gap:clamp(8px,1.4vh,20px);padding:clamp(70px,10vh,120px) clamp(22px,8vw,140px);
 background:var(--ws-surface,#faf9f5);color:var(--ws-text,#252525);
 z-index:-1;pointer-events:auto;
}
body.home .sites-home-nav__details[open]{color:var(--ws-text,#252525)}
body.home .sites-home-nav__details[open] summary{position:relative;z-index:2}
body.home .sites-home-nav__panel a{
 font-family:var(--ws-type-display-en,"Bodoni Moda",serif);
 font-size:clamp(28px,4vw,64px);font-weight:400;line-height:1.08;
}
body.home .sites-home-nav__panel a:last-child{font-size:clamp(16px,1.5vw,22px);margin-top:1em}
body.home .sites-home-nav--floating :is(a,summary):focus-visible{outline:2px solid currentColor;outline-offset:5px}
body.home .sites-home-realms,
body.home .sites-home-realm,
body.home .candidate-focus-screen{min-width:0}
body.home :is(.sites-home-realm,.candidate-focus-screen)>iframe{display:block;width:100%;border:0}
@media(max-width:900px){
 body.home .sites-home-nav--floating{padding:12px 20px;font-size:13px}
 body.home .sites-home-nav__panel{padding:80px 24px 40px}
 body.home .sites-home-nav__panel a{font-size:clamp(26px,7vw,44px)}
}
@media(prefers-reduced-motion:reduce){
 body.home .sites-home-nav--floating{transition:none}
}

/* Preserve the frozen hero navigation markup for contract verification; the
   new floating Contents control is the sole visible first-layer navigation. */
body.home .sites-home-hero > .sites-home-nav{display:none!important}

/* Phase 02: cinematic handoff, applied to the host only.
   The frozen film and Candidate 01 iframe documents remain untouched. */
@media (min-width:901px) and (prefers-reduced-motion:no-preference){
 body.home .candidate-focus-screen{
  isolation:isolate;
  background:var(--ws-surface,#faf9f5);
 }
 body.home .candidate-focus-screen:not(.ws-p2-sevenfold-host)::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(238,232,218,.72),rgba(238,232,218,0) 25%);
  opacity:calc(1 - var(--home-chapter-enter,1));
 }
 body.home .candidate-focus-screen iframe{
  transform:none!important;
  opacity:1!important;
 }
}
@media (prefers-reduced-motion:reduce){
 body.home .candidate-focus-screen:not(.ws-p2-sevenfold-host)::before{display:none!important}
}