html[data-brand-preview]{--orange:#b8542e;--paper:#f1ede3;--ink:#171614;--panel:#e7dfd2;--muted:#615c53;--line:#18171026}
html[data-brand-preview][data-theme=dark]{--paper:#000;--ink:#f1e9db;--panel:#24211d;--muted:#b8ad9b;--line:#eadab326}
html[data-brand-preview] .fabric-surface{background:#1a1713 url('black-terracotta-gold-v1.webp') center/cover;color:#fff5e2}
html[data-brand-preview] .direction-hero-main h1,html[data-brand-preview] .mini-direction-hero h1{color:#fff5e2;text-shadow:0 2px 16px #0004}
html[data-brand-preview] .direction-hero-main>p,html[data-brand-preview] .mini-direction-hero>p{color:#fff3de;text-shadow:0 1px 8px #0008}
html[data-brand-preview] .direction-hero-top>.eyebrow,html[data-brand-preview] .mini-fabric-controls .eyebrow{color:#e1c18a}
html[data-brand-preview] .living-fabric{transform:none!important}
html[data-brand-preview] .fabric-surface:after{display:none}
html[data-brand-preview] .site-header,html[data-brand-preview] .mini-header{border-bottom-color:#b28b4b66}
html[data-brand-preview] .button.orange{background:#b8542e;color:#fff5e2}
html[data-brand-preview] .brand-divider{background:#b28b4b}
/* Approved two-part slogan: each block stays entirely on its own material. */
html[data-brand-preview] .direction-hero{display:grid;grid-template-rows:1fr 1fr;min-height:780px;padding:0 5.5%;gap:0}
html[data-brand-preview] .direction-hero-top{position:absolute;top:34px;left:5.5%;right:5.5%;z-index:1}
html[data-brand-preview] .direction-hero-main{display:contents}
html[data-brand-preview] .direction-hero-main h1{display:contents;font-size:clamp(55px,6.6vw,108px);line-height:1.05;letter-spacing:-.06em;text-shadow:none}
html[data-brand-preview] .slogan-opening{grid-row:1;align-self:center;padding-top:50px;color:#da6c3b}
html[data-brand-preview] .slogan-result{grid-row:2;align-self:start;margin-top:32px;color:#100e0b}
html[data-brand-preview] .direction-hero-main>p{grid-row:2;align-self:end;color:#100e0b;text-shadow:none;margin:0 0 34px;padding-top:215px;max-width:730px}
html[data-brand-preview] .mini-direction-hero{display:grid;grid-template-rows:1fr 1fr;min-height:660px;padding:0 24px;gap:0}
html[data-brand-preview] .mini-fabric-controls{position:absolute;top:24px;left:24px;right:24px}
html[data-brand-preview] .mini-direction-hero h1{display:contents;font-size:clamp(35px,8.7vw,52px);line-height:1.08;text-shadow:none}
html[data-brand-preview] .mini-direction-hero .slogan-opening{padding-top:38px}
html[data-brand-preview] .mini-direction-hero .slogan-result{margin-top:26px}
html[data-brand-preview] .mini-direction-hero>p{grid-row:2;align-self:end;margin:0 0 26px;color:#100e0b;text-shadow:none;padding-top:150px}
@media(max-width:800px){html[data-brand-preview] .direction-hero{min-height:720px}html[data-brand-preview] .direction-hero-main h1{font-size:clamp(45px,8vw,65px)}html[data-brand-preview] .direction-hero-main>p{padding-top:180px}}
@media(max-width:620px){html[data-brand-preview] .direction-hero{min-height:690px;padding:0 22px}html[data-brand-preview] .direction-hero-top{top:25px;left:22px;right:22px}html[data-brand-preview] .direction-hero-main h1{font-size:clamp(34px,8.7vw,54px)}html[data-brand-preview] .slogan-opening{padding-top:35px}html[data-brand-preview] .slogan-result{margin-top:26px}html[data-brand-preview] .direction-hero-main>p{font-size:18px;margin-bottom:26px;padding-top:160px}}

html[data-brand-preview] .slogan-opening,html[data-brand-preview] .slogan-result,html[data-brand-preview] .direction-hero-main>p,html[data-brand-preview] .mini-direction-hero>p{grid-column:1}
/* Texture belongs to the live lettering; typography and layout stay responsive. */
html[data-brand-preview] .direction-hero-main>p,html[data-brand-preview] .mini-direction-hero>p{color:#e1c18a;text-shadow:0 1px 3px #1a0808,0 0 10px #0007}
@supports (background-clip:text){
 html[data-brand-preview] .slogan-opening,html[data-brand-preview] .slogan-result{background-image:url('black-terracotta-gold-v1.webp');background-size:100% 400%;background-clip:text;-webkit-background-clip:text;color:transparent;filter:url('#faces-carved-lettering')}
 html[data-brand-preview] .slogan-opening{background-position:center bottom}
 html[data-brand-preview] .slogan-result{background-position:center top}
}

/* Small screens need solid letter fills; preserve the approved font pairing. */
html[data-brand-preview] .mini-direction-hero .slogan-opening,html[data-brand-preview] .mini-direction-hero .slogan-result{background:none;-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:currentColor;filter:none;letter-spacing:-.04em}
html[data-brand-preview] .mini-direction-hero .slogan-opening{color:#c76032;font-weight:600;text-shadow:none;filter:none;display:block;min-width:0;max-width:100%}
@supports (-webkit-background-clip:text){html[data-brand-preview] .mini-direction-hero .slogan-opening{background-color:#c76032;background-image:linear-gradient(#c7603222,#c7603222),url('black-terracotta-gold-v1.webp');background-position:center bottom;background-size:100% 400%;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;-webkit-text-stroke:.25px #30140766}}
html[data-brand-preview] .mini-direction-hero .slogan-result{color:#080604;text-shadow:0 1px 0 #f3ac6b66}
html[data-brand-preview] .mini-direction-hero h1{font-size:clamp(38px,9.4vw,48px);line-height:1.12}
html[data-brand-preview] .mini-fabric-controls .eyebrow{font-size:13px;line-height:1.5;letter-spacing:.08em}

/* Compact Telegram hero: keep the description in view before any folding. */
html[data-brand-preview] .mini-direction-hero{min-height:clamp(500px,78svh,580px)}
html[data-brand-preview] .mini-direction-hero>p{padding-top:112px;margin-bottom:22px;font-size:17px;line-height:1.55}
html[data-brand-preview] .mini-direction-hero .slogan-result{margin-top:22px}
html[data-brand-preview] .mini-direction-hero .slogan-opening{filter:url('#faces-mini-inset')}

/* The site opens onto the vortex, then a transparent editorial frame. */
html[data-brand-preview] .direction-hero.hero-transparent{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;min-height:clamp(480px,76svh,700px);margin:0 4.4%;padding:58px 36px;border:0;border-radius:0;background:transparent;color:var(--ink);text-align:center;box-shadow:none}
html[data-brand-preview] .hero-transparent .direction-hero-top{position:static;inset:auto;width:100%;margin-bottom:28px;justify-content:center}
html[data-brand-preview] .hero-transparent .direction-hero-top .eyebrow{max-width:none;text-align:center}
html[data-brand-preview] .hero-transparent .direction-hero-main{display:flex;flex:0 0 auto;flex-direction:column;align-items:center;gap:28px;width:100%;padding:0}
html[data-brand-preview] .hero-transparent .direction-hero-main h1{display:block;font-size:clamp(38px,5.7vw,86px);line-height:1.08;max-width:1100px;letter-spacing:-.05em;text-shadow:0 2px 14px #0008}
html[data-brand-preview] .hero-transparent .slogan-opening,html[data-brand-preview] .hero-transparent .slogan-result{display:block;background:none;-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:currentColor;filter:none;-webkit-text-stroke:0;margin:0;padding:0;grid-row:auto;color:var(--ink)}
html[data-brand-preview] .hero-transparent .slogan-result{margin-top:20px;color:#dfbf82}
html[data-brand-preview] .hero-transparent .direction-hero-main>p{grid-row:auto;align-self:auto;max-width:740px;margin:0;padding:0;color:#dfd1ba;font-size:19px;line-height:1.6;text-shadow:0 1px 7px #000b}
.hero-transparent .living-fabric,.hero-transparent .hero-variant-light,.hero-transparent .hero-fold-shading{display:none}
.hero-word{display:inline-block;white-space:nowrap}
.hero-letter{display:inline-block}
.hero-lettering-ready:not(.hero-copy-revealed) .hero-letter{opacity:0}
.hero-copy-revealed .hero-letter{animation:hero-letter-assemble .8s cubic-bezier(.16,.75,.25,1) both;animation-delay:var(--letter-delay,0s)}
@keyframes hero-letter-assemble{0%{opacity:0;transform:translate3d(var(--letter-x),25px,0) rotate(var(--letter-turn))}100%{opacity:1;transform:none}}
@media(max-width:620px){html[data-brand-preview] .direction-hero.hero-transparent{margin-inline:18px;padding:38px 22px;border-radius:0}html[data-brand-preview] .hero-transparent .direction-hero-main h1{font-size:clamp(29px,8.2vw,46px)}html[data-brand-preview] .hero-transparent .direction-hero-main>p{font-size:17px}.hero-transparent .direction-hero-top .eyebrow{font-size:11px}}
html[data-theme=light][data-brand-preview] .hero-transparent .direction-hero-main>p{color:#302719;text-shadow:0 1px 3px #fff8}
@media(prefers-reduced-motion:reduce){.hero-lettering-ready:not(.hero-copy-revealed) .hero-letter{opacity:1}.hero-copy-revealed .hero-letter{animation:none}}

.hero-copy-settled .hero-letter{animation:none;opacity:1;filter:none;transform:none}

/* Clear glass lettering: the live vortex remains visible through the glyphs. */
html[data-brand-preview] .hero-transparent .direction-hero-main h1{text-shadow:none}
html[data-brand-preview] .hero-transparent .hero-letter{
 color:transparent;-webkit-text-fill-color:transparent;
 background:linear-gradient(158deg,rgba(255,250,232,.9) 0%,rgba(255,250,232,.38) 15%,rgba(230,238,241,.08) 35%,rgba(230,238,241,.03) 48%,rgba(255,250,232,.5) 51%,rgba(230,238,241,.08) 57%,rgba(218,190,133,.19) 80%,rgba(255,250,232,.75) 100%);
 -webkit-background-clip:text;background-clip:text;
 -webkit-text-stroke:.65px rgba(255,244,216,.65);
 text-shadow:.4px .6px 0 rgba(255,255,255,.22),-.5px -.5px 0 rgba(0,0,0,.35);
}
html[data-brand-preview] .hero-transparent.hero-copy-settled .hero-letter{
 text-shadow:.4px .6px 0 rgba(255,255,255,.22),-.5px -.5px 0 rgba(0,0,0,.35);
}
@media(max-width:620px){html[data-brand-preview] .hero-transparent .hero-letter{-webkit-text-stroke:.6px rgba(255,244,216,.8)}}
html[data-theme=light][data-brand-preview] .hero-transparent .hero-letter{
 background-image:linear-gradient(158deg,rgba(255,255,255,.8),rgba(64,53,33,.14) 30%,rgba(64,53,33,.03) 48%,rgba(255,255,255,.85) 51%,rgba(64,53,33,.12) 70%,rgba(255,255,255,.7));
 -webkit-text-stroke:.65px rgba(76,61,36,.7);
}
/* Gold thread around clear glass letters, in both color themes. */
html[data-brand-preview] .hero-transparent .hero-letter{ -webkit-text-stroke:.8px #c6a366;text-shadow:.35px .5px 0 #ffe4a855}
html[data-brand-preview] .hero-transparent.hero-copy-settled .hero-letter{text-shadow:.35px .5px 0 #ffe4a855}

/* Approved glass letters, returned to the two sides at the larger trial size. */
html[data-brand-preview] .hero-side-glass{background:transparent!important;border:0;box-shadow:none;margin:0;padding:34px 5.5% 24px;min-height:clamp(620px,88svh,940px);text-align:center}
html[data-brand-preview] .hero-side-glass .direction-hero-main{width:100%;gap:0}
html[data-brand-preview] .hero-side-glass h1{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(80px,24vw) minmax(0,1fr);align-items:center;width:100%;max-width:none!important;min-height:clamp(280px,46svh,500px);font-size:clamp(34px,4.7vw,76px)!important;line-height:1.16!important;letter-spacing:-.045em!important;margin:0!important}
html[data-brand-preview] .hero-side-glass :is(.slogan-opening,.slogan-result){grid-row:1!important;align-self:center!important;margin:0!important;padding:0!important}
html[data-brand-preview] .hero-side-glass .slogan-opening{grid-column:1!important;text-align:left}
html[data-brand-preview] .hero-side-glass .slogan-result{grid-column:3!important;text-align:right}
html[data-brand-preview] .hero-side-glass :is(.direction-hero-main>p,.mini-direction-hero>p){position:relative;z-index:1;max-width:680px;margin:100px auto 0!important;padding:0!important;font-size:19px;line-height:1.6;color:#dfd1ba;text-shadow:0 2px 8px #000}
html[data-theme=light][data-brand-preview] .hero-side-glass :is(.direction-hero-main>p,.mini-direction-hero>p){color:#332411;text-shadow:0 1px 6px #fff}
html[data-brand-preview] .hero-side-glass .mini-fabric-controls{justify-content:center}
@media(max-width:620px){
 html[data-brand-preview] .hero-side-glass{padding:28px 12px 24px!important;margin:0!important;min-height:620px!important}
 html[data-brand-preview] .hero-side-glass h1{font-size:clamp(23px,6vw,34px)!important;grid-template-columns:minmax(0,1fr) 6vw minmax(0,1fr);min-height:280px}
 html[data-brand-preview] .hero-side-glass :is(.direction-hero-main>p,.mini-direction-hero>p){margin-top:90px!important;font-size:16px;line-height:1.55}
}
html[data-brand-preview] .hero-side-glass :is(.slogan-opening,.slogan-result){filter:none!important;background:none!important}
html[data-brand-preview] .hero-side-glass.mini-direction-hero>p{position:relative;z-index:1;max-width:680px;margin:100px auto 0!important;padding:0!important;font-size:19px;line-height:1.6;color:#dfd1ba;text-shadow:0 2px 8px #000}
@media(max-width:620px){html[data-brand-preview] .hero-side-glass.mini-direction-hero>p{margin-top:90px!important;font-size:16px;line-height:1.55}}

/* A restrained warm reflection travels across the glass after the letters have settled. */
.hero-transparent .hero-letter{position:relative}
.hero-transparent .hero-letter::after{content:attr(data-letter);position:absolute;inset:0;pointer-events:none;color:transparent;-webkit-text-fill-color:transparent;-webkit-text-stroke:0;background:linear-gradient(110deg,transparent 38%,#dfb65b55 44%,#fff7dfee 50%,#f4d58e88 55%,transparent 62%);background-size:400% 100%;background-position:150% 0;-webkit-background-clip:text;background-clip:text;text-shadow:none;opacity:0}
.hero-transparent.hero-copy-settled .hero-letter::after{opacity:1;animation:hero-gold-glint 6s ease-in-out infinite;animation-delay:calc(var(--letter-delay,0s) * 1.8)}
@keyframes hero-gold-glint{0%,18%{background-position:150% 0}54%,100%{background-position:-150% 0}}
@media(prefers-reduced-motion:reduce){.hero-transparent .hero-letter::after{display:none}}

/* Keep both Mini App copy blocks inside the reading viewport above navigation. */
html[data-brand-preview] .hero-side-glass.mini-direction-hero{
 min-height:var(--mini-hero-height,calc(100svh - 172px))!important;
 padding-bottom:clamp(48px,10svh,88px)!important;
 grid-template-rows:minmax(min-content,1fr) auto;
 row-gap:24px;
}
html[data-brand-preview] .hero-side-glass.mini-direction-hero h1{
 grid-row:1;
 min-height:0;
 width:100%;
}
html[data-brand-preview] .hero-side-glass.mini-direction-hero>p{
 grid-row:2;
 align-self:end;
 margin:0 auto!important;
 font-size:16px;
 line-height:1.55;
}