/* A single, continuous drawing surface. Geometry is positioned independently
   of its canvas, so particles and the spatial shadow never meet a column edge. */
body.theme-porcelain .hero{--halo-x:70%;--halo-y:37%;--halo-width:65vw;display:block;min-height:790px;height:100svh;max-height:1180px;overflow:hidden}
body.theme-porcelain .hero .hero-art{position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0;pointer-events:none;z-index:1}
#halo-particles{cursor:default;pointer-events:none}.halo-touch{position:absolute;left:var(--halo-x);top:var(--halo-y);width:var(--halo-width);height:calc(var(--halo-width)*.63);transform:translate(-50%,-50%);border:0;border-radius:50%;padding:0;background:transparent;z-index:2;cursor:pointer;touch-action:pan-y;-webkit-tap-highlight-color:transparent}.halo-touch:focus-visible{outline:1px dashed #7b603f70;outline-offset:5px}
body.theme-porcelain .hero .masthead{padding:32px 6%;height:104px;align-items:center}.masthead .invitation{font-size:11px;letter-spacing:.025em}.masthead .brand-name{font-size:40px}.masthead .ads{font-size:9px}
body.theme-porcelain .hero .hero-copy{left:8%;top:37%;width:40%;max-width:none;transform:none;margin:0;pointer-events:auto;z-index:3}
body.theme-porcelain .hero .hero-name{font-size:clamp(170px,16vw,250px);line-height:.77;margin:0 0 33px -8px;letter-spacing:-.065em}
body.theme-porcelain .hero .eyebrow{margin:0 0 25px;font-size:10px;letter-spacing:.13em}
body.theme-porcelain .hero .tagline{font-size:clamp(28px,2.4vw,39px);line-height:1.27;margin:0 0 24px;letter-spacing:-.055em;max-width:none}
body.theme-porcelain .hero .intro-copy{font-size:13px;line-height:1.9;margin:0;max-width:380px}
body.theme-porcelain .hero .hero-footer{bottom:26px;left:6%;right:6%;font-size:10px}.hero-motion{gap:21px}.hero-motion button{font-size:10px;min-height:44px}.hero .edge-caption{display:none}.hero .scroll-note{gap:23px}.hero .wordmark-light{color:#ba9970}
body.theme-porcelain .hero .atmosphere:before{background:radial-gradient(ellipse at 61% 36%,#fffefa38,transparent 63%);opacity:.8}
body[data-layout="02"] .hero{--halo-x:63%;--halo-y:28%;--halo-width:70vw}
body[data-layout="02"].theme-porcelain .hero .hero-copy{top:43%;left:13%;width:50%}
body[data-layout="02"].theme-porcelain .hero .hero-name{font-size:clamp(172px,16.5vw,260px)}
body[data-layout="02"].theme-porcelain .hero .tagline{font-size:clamp(27px,2.35vw,36px)}
body[data-layout="03"] .hero{--halo-x:84%;--halo-y:34%;--halo-width:83vw}
body[data-layout="03"].theme-porcelain .hero .hero-copy{top:41%;left:8%;width:39%}
body[data-layout="03"].theme-porcelain .hero .hero-name{font-size:clamp(180px,17.2vw,270px)}
body[data-layout="04"] .hero{--halo-x:66%;--halo-y:30%;--halo-width:62vw}
body[data-layout="04"].theme-porcelain .hero .hero-copy{top:44%;left:10%;width:77%}
body[data-layout="04"].theme-porcelain .hero .hero-name{font-size:clamp(170px,15vw,236px);margin-bottom:35px}
body[data-layout="04"].theme-porcelain .hero .tagline{font-size:clamp(31px,3.25vw,49px);margin-bottom:19px}
body[data-layout="04"] .hero .tagline br{display:none}
body[data-layout="04"].theme-porcelain .hero .intro-copy{max-width:none}
body[data-layout="04"] .hero .intro-copy br{display:none}
body[data-layout="05"] .hero{--halo-x:65%;--halo-y:27%;--halo-width:72vw}
body[data-layout="05"].theme-porcelain .hero .hero-copy{top:auto;bottom:17%;left:9%;width:82%;display:grid;grid-template-columns:1fr 1.15fr;column-gap:7%;align-items:start}
body[data-layout="05"] .hero .hero-copy .eyebrow{grid-column:1/-1;margin-bottom:28px}
body[data-layout="05"] .hero .hero-copy .hero-name{grid-column:1;grid-row:2/4;font-size:clamp(190px,20vw,300px);margin-bottom:0}
body[data-layout="05"] .hero .hero-copy .tagline{grid-column:2;grid-row:2;font-size:clamp(30px,3vw,47px);margin:0 0 19px}
body[data-layout="05"] .hero .hero-copy .intro-copy{grid-column:2;grid-row:3}
@media(min-width:1700px){body.theme-porcelain .hero{--halo-width:64vw}.hero-copy .intro-copy{font-size:15px}}
@media(min-width:701px) and (max-width:1000px){body.theme-porcelain .hero{height:900px;min-height:900px;--halo-width:83vw;--halo-x:74%;--halo-y:30%}body.theme-porcelain .hero .hero-copy{left:8%;top:44%;width:72%}body.theme-porcelain .hero .hero-name{font-size:190px}body.theme-porcelain .hero .tagline{font-size:31px}body[data-layout="02"] .hero{--halo-x:60%;--halo-y:25%;--halo-width:93vw}body[data-layout="02"].theme-porcelain .hero .hero-copy{left:13%;top:46%}body[data-layout="03"] .hero{--halo-x:85%;--halo-width:104vw}body[data-layout="04"] .hero{--halo-x:61%;--halo-width:88vw}body[data-layout="04"].theme-porcelain .hero .hero-copy{top:49%}body[data-layout="05"] .hero{--halo-x:64%;--halo-y:27%;--halo-width:99vw}body[data-layout="05"].theme-porcelain .hero .hero-copy{top:auto;bottom:17%;width:83%;column-gap:5%}body[data-layout="05"] .hero .hero-copy .hero-name{font-size:200px}body[data-layout="05"] .hero .hero-copy .tagline{font-size:30px}.hero .interaction-note{display:none}.hero-motion{gap:0}}
@media(max-width:700px){
 body.theme-porcelain .hero{--halo-x:57%;--halo-y:235px;--halo-width:115vw;--copy-start:407px;min-height:0!important;height:auto;max-height:none;display:block;padding-bottom:112px}
 body.theme-porcelain .hero .masthead{height:85px;padding:25px 7%;gap:14px}
 .masthead .brand-name{font-size:33px}.masthead .invitation{font-size:9px;gap:7px}.masthead .ads{font-size:8px;letter-spacing:.2em}
 body.theme-porcelain .hero .hero-art{position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0}
 body.theme-porcelain .hero .hero-copy{position:relative;left:auto;top:auto;bottom:auto;width:auto;max-width:none;display:block;transform:none;margin:calc(var(--copy-start) - 85px) 8% 0;pointer-events:auto}
 body.theme-porcelain .hero .hero-name{font-size:clamp(150px,43vw,230px);margin:0 0 27px -6px;line-height:.77}
 body.theme-porcelain .hero .eyebrow{font-size:9px;line-height:1.7;margin-bottom:23px}
 body.theme-porcelain .hero .tagline{font-size:29px;line-height:1.28;margin-bottom:23px;max-width:390px}
 body.theme-porcelain .hero .intro-copy{font-size:12px;line-height:1.85;max-width:340px}
 body.theme-porcelain .hero .hero-footer{left:8%;right:8%;bottom:23px;flex-wrap:wrap;gap:6px 15px}
 body.theme-porcelain .hero .hero-footer .media-line{font-size:9px;gap:11px}.hero-motion{order:3;width:100%;justify-content:center}.hero-motion button{font-size:9px;padding:6px 12px;min-height:36px}
 .halo-touch{height:calc(var(--halo-width)*.68)}
 body[data-layout="02"] .hero{--halo-x:51%;--halo-y:216px;--halo-width:117vw;--copy-start:365px}
 body[data-layout="02"].theme-porcelain .hero .hero-copy{margin-left:12%;margin-right:10%}
 body[data-layout="03"] .hero{--halo-x:68%;--halo-y:230px;--halo-width:144vw;--copy-start:414px}
 body[data-layout="04"] .hero{--halo-x:50%;--halo-y:236px;--halo-width:111vw;--copy-start:405px}
 body[data-layout="04"].theme-porcelain .hero .tagline{font-size:29px;max-width:340px}
 body[data-layout="04"] .hero .tagline br{display:initial}
 body[data-layout="04"] .hero .intro-copy br{display:initial}
 body[data-layout="05"] .hero{--halo-x:52%;--halo-y:225px;--halo-width:125vw;--copy-start:393px}
 body[data-layout="05"] .hero .hero-copy .hero-name{font-size:clamp(164px,47vw,245px);margin-bottom:30px}
 body[data-layout="05"] .hero .hero-copy .tagline{font-size:29px;margin-bottom:23px}
 body[data-layout="05"].theme-porcelain .hero .hero-copy{margin-left:9%}
}
@media(max-width:370px){body.theme-porcelain .hero{--halo-y:211px;--copy-start:371px}.masthead .brand-name{font-size:30px}.masthead .invitation{font-size:8px}.masthead .brand{gap:8px}body.theme-porcelain .hero .hero-name{font-size:147px}body[data-layout="02"] .hero{--copy-start:339px;--halo-y:196px}body[data-layout="03"] .hero{--copy-start:381px;--halo-y:208px}body[data-layout="05"] .hero .hero-copy .hero-name{font-size:157px}}
body.is-preview.theme-porcelain .hero{height:790px;min-height:790px;max-height:790px}
/* Keep the larger desktop lettering and ring inside short laptop windows. */
@media(min-width:1001px){
 body.theme-porcelain .hero .hero-name{font-size:clamp(164px,min(16vw,25svh),250px)}
 body[data-layout="02"] .hero{--halo-width:64vw;--halo-y:30%}
 body[data-layout="02"].theme-porcelain .hero .hero-name{font-size:clamp(164px,min(16.5vw,25svh),260px)}
 body[data-layout="03"].theme-porcelain .hero .hero-name{font-size:clamp(170px,min(17.2vw,25svh),270px)}
 body[data-layout="04"] .hero{--halo-width:59vw;--halo-y:33%}
 body[data-layout="04"].theme-porcelain .hero .hero-name{font-size:clamp(164px,min(15vw,25svh),236px)}
 body[data-layout="05"] .hero{--halo-width:67vw;--halo-y:29%}
 body[data-layout="05"] .hero .hero-copy .hero-name{font-size:clamp(190px,min(20vw,31svh),300px)}
}
.is-preview .motion-ready .reveal{transition:none;filter:none}
@media(min-width:1001px){body[data-layout="04"] .hero{--halo-y:37%}}
@media(min-width:1001px) and (max-height:840px){body[data-layout="02"].theme-porcelain .hero .hero-copy{top:40%}body[data-layout="03"].theme-porcelain .hero .hero-copy{top:39%}}
@media(max-width:700px){
 body.theme-porcelain[data-layout] .hero .hero-copy{left:auto;top:auto;bottom:auto;width:auto;max-width:none;display:block;transform:none;margin:calc(var(--copy-start) - 85px) 8% 0}
 body.theme-porcelain[data-layout] .hero .hero-name{font-size:clamp(150px,43vw,230px);line-height:.77;margin:0 0 27px -6px}
 body.theme-porcelain[data-layout] .hero .tagline{font-size:29px;line-height:1.28;margin:0 0 23px;max-width:390px}
 body.theme-porcelain[data-layout] .hero .intro-copy{font-size:12px;line-height:1.85;max-width:340px}
 body.theme-porcelain[data-layout="02"] .hero .hero-copy{margin-left:12%;margin-right:10%}
 body.theme-porcelain[data-layout="05"] .hero .hero-copy{margin-left:9%}
 body.theme-porcelain[data-layout="05"] .hero .hero-name{font-size:clamp(164px,47vw,245px);margin-bottom:30px}
}
@media(max-width:370px){body.theme-porcelain[data-layout] .hero .hero-name{font-size:147px}body.theme-porcelain[data-layout="05"] .hero .hero-name{font-size:157px}}
/* The original tilt exposes more vertical volume. Give the two high layouts
   enough clearance while preserving their relationship to the message. */
@media(min-width:1001px){body[data-layout="02"] .hero{--halo-y:35%}body[data-layout="05"] .hero{--halo-y:32%;--halo-width:61vw}}
