:root {
    color-scheme: dark;
    --ivory: #f8eddb;
    --gold: #d4ae75;
    --muted: #d6c2a9;
    --ease: cubic-bezier(.2,.75,.3,1);
}
*, *::before, *::after { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; }
body { margin: 0; background: #1d140e; color: var(--ivory); font-family: "Segoe UI", Tahoma, Arial, sans-serif; -webkit-font-smoothing: antialiased; isolation: isolate; }
::selection { background: #ad8046; color: white; }
a, button { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible { outline: 3px solid #ffe4ad; outline-offset: 6px; }
.scene { position: fixed; inset: 0; z-index: -2; overflow: hidden; background: #26180f; }
.scene-move { width: 100%; height: 100%; transform: translate(var(--scene-x, 0px), var(--scene-y, 0px)); transition: transform 1.6s ease-out; }
.background-image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.scene-shade { position: absolute; inset: 0; background: linear-gradient(90deg,#140c0814 5%,#160e084d 43%,#170f097a 70%,#140c08a6),linear-gradient(180deg,#130b0833,transparent 35%,#130b087a); }
.scene-light { position: absolute; inset: 0; background: radial-gradient(ellipse at 72% 42%,#c38a3214,transparent 50%); pointer-events: none; }
.page-shell { width: min(1200px,calc(100% - 120px)); min-height: 100vh; min-height: 100svh; margin: auto; display: flex; flex-direction: column; }
.topbar { min-height: 100px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #e1c49826; }
.top-wordmark { font: 26px/.95 Georgia,"Times New Roman",serif; letter-spacing: -.5px; }
.top-wordmark > span { display: block; font: 8px/1.5 "Segoe UI",sans-serif; letter-spacing: 3.6px; margin: 7px 0 0 3px; }
.top-detail { display: flex; align-items: center; gap: 10px; color: #e2cbaa; font: italic 15px Georgia,"Times New Roman",serif; }
.top-detail > span { display: block; width: 24px; height: 1px; background: #d4ae7570; }
.hero { width: 100%; flex: 1; display: flex; align-items: center; justify-content: flex-start; padding: 45px 4% 45px 0; }
.hero-content { width: min(100%,435px); text-align: center; }
.brand-avatar { position: relative; width: 98px; height: 98px; margin: 0 auto 25px; }
.brand-photo { position: absolute; inset: 7px; border-radius: 50%; overflow: hidden; background: #9c784b; box-shadow: 0 5px 28px #0c070633; }
.brand-photo img { position: absolute; width: 312px; height: auto; max-width: none; left: -18px; top: -19px; }
.avatar-ring { position: absolute; inset: 0; border: 1px solid #d8b27799; border-radius: 50%; }
.avatar-ring::after { content: ""; position: absolute; inset: -6px; border: 1px solid #d8b27720; border-radius: inherit; }
.avatar-star { position: absolute; right: -3px; top: 5px; width: 17px; height: 17px; fill: #f6d9a0; filter: drop-shadow(0 0 6px #e1b97855); }
.eyebrow { margin: 0 0 20px; font-size: 9px; font-weight: 500; letter-spacing: 2.6px; color: #d9bb91; }
h1 { margin: 0; color: #fbefd8; font: 400 102px/.85 Georgia,"Times New Roman",serif; letter-spacing: -5px; text-shadow: 0 3px 25px #0e09064d; }
h1 > span { display: block; font-size: .49em; letter-spacing: -1.5px; margin-top: 13px; }
.brand-divider { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 25px 0 18px; color: #d3ac72; }
.brand-divider > span { width: 37px; height: 1px; background: linear-gradient(90deg,transparent,#d3ac7299); }
.brand-divider > span:last-child { transform: rotate(180deg); }
.brand-divider svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.intro { margin: 0; font-size: 24px; font-weight: 500; line-height: 1.7; }
.categories { margin: 9px 0 30px; font-size: 12px; line-height: 1.8; color: var(--muted); }
.categories > span { margin: 0 9px; color: #c6a26b; }
.instagram-cta { position: relative; display: flex; align-items: center; gap: 16px; padding: 15px 18px; min-height: 81px; overflow: hidden; direction: ltr; border: 1px solid #f7dba5; border-radius: 18px; color: #3b281b; text-decoration: none; background: linear-gradient(115deg,#fff2db,#e6c490); box-shadow: 0 10px 35px #0d080533, inset 0 1px 0 #fff8edb3; transition: transform .3s var(--ease),box-shadow .3s var(--ease); }
.instagram-cta::after { content: ""; position: absolute; inset: -90% auto -90% -75%; width: 50%; transform: translate3d(0,0,0) rotate(25deg); opacity: 0; background: linear-gradient(90deg,transparent,#fffaf0b3,transparent); pointer-events: none; transition: transform .85s var(--ease),opacity .2s ease; }



.instagram-icon { width: 48px; height: 48px; display: grid; place-items: center; flex-shrink: 0; border-radius: 14px; background: linear-gradient(145deg,#87538f,#b94562 60%,#ce7b41); color: white; box-shadow: 0 3px 8px #6b311926; }
.instagram-icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.instagram-dot { fill: currentColor; stroke: none; }
.cta-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.cta-copy strong { font-size: 23px; line-height: 1.2; letter-spacing: -.5px; font-weight: 650; }
.cta-copy > span { font-size: 11px; color: #725336; letter-spacing: .4px; }
.cta-arrow { width: 34px; height: 34px; display: grid; place-items: center; margin-left: auto; border: 1px solid #9b713840; border-radius: 50%; flex-shrink: 0; }
.cta-arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.order-note { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 18px 0 0; font-size: 11px; line-height: 1.7; color: #dbc9b1; }
.order-note > span { width: 4px; height: 4px; border-radius: 50%; background: #d2b37b; }
.site-footer { display: flex; justify-content: space-between; align-items: center; min-height: 69px; gap: 15px; border-top: 1px solid #e1c49826; color: #d0baa0; font-size: 10px; }
.site-footer p { margin: 0; }
.sound-toggle { position: fixed; bottom: max(18px,env(safe-area-inset-bottom)); left: max(18px,env(safe-area-inset-left)); width: 40px; height: 40px; padding: 11px; border: 1px solid #d8b27755; border-radius: 50%; background: #23170fc4; color: #e0bd87; cursor: pointer; }
.sound-toggle[hidden] { display: none; }
.sound-toggle svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sound-toggle[aria-pressed="false"] .sound-waves,.sound-toggle[aria-pressed="true"] .sound-muted { display: none; }
.sound-toggle[aria-pressed="true"] { background: #6c4b28; color: #fff2d5; }
/* Small warm dust grains rise from below the viewport at different speeds. */
.motes { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.motes > span { position: absolute; top: auto; bottom: -24px; left: var(--left); width: var(--size,2px); height: var(--size,2px); border-radius: 50%; background: #ead1aa; box-shadow: 0 0 8px #e0b36b55; opacity: 0; }
.motes > span:nth-child(3n) { filter: blur(.5px); }
.motes > span:nth-child(1) { --left: 4%; --size: 2.6px; --duration: 18s; --delay: -2s; --sway: 18px; --drift: -8px; --opacity: .58; }
.motes > span:nth-child(2) { --left: 12%; --size: 3.8px; --duration: 23s; --delay: -17s; --sway: -14px; --drift: 21px; --opacity: .52; }
.motes > span:nth-child(3) { --left: 20%; --size: 2.2px; --duration: 16s; --delay: -10s; --sway: 24px; --drift: 10px; --opacity: .56; }
.motes > span:nth-child(4) { --left: 28%; --size: 3.2px; --duration: 21s; --delay: -22s; --sway: -20px; --drift: -5px; --opacity: .48; }
.motes > span:nth-child(5) { --left: 36%; --size: 2.2px; --duration: 15s; --delay: -5s; --sway: 12px; --drift: -17px; --opacity: .62; }
.motes > span:nth-child(6) { --left: 44%; --size: 3.8px; --duration: 25s; --delay: -15s; --sway: -24px; --drift: 8px; --opacity: .46; }
.motes > span:nth-child(7) { --left: 52%; --size: 2.6px; --duration: 19s; --delay: -20s; --sway: 20px; --drift: 30px; --opacity: .60; }
.motes > span:nth-child(8) { --left: 60%; --size: 2.2px; --duration: 22s; --delay: -8s; --sway: -12px; --drift: -25px; --opacity: .54; }
.motes > span:nth-child(9) { --left: 68%; --size: 3.2px; --duration: 20s; --delay: -13s; --sway: 16px; --drift: -11px; --opacity: .50; }
.motes > span:nth-child(10) { --left: 76%; --size: 2.6px; --duration: 17s; --delay: -4s; --sway: -18px; --drift: 12px; --opacity: .56; }
.motes > span:nth-child(11) { --left: 84%; --size: 2.2px; --duration: 24s; --delay: -23s; --sway: 13px; --drift: 25px; --opacity: .54; }
.motes > span:nth-child(12) { --left: 92%; --size: 3.2px; --duration: 21s; --delay: -11s; --sway: -22px; --drift: -9px; --opacity: .48; }
.motes > span:nth-child(13) { --left: 8%; --size: 2.6px; --duration: 19s; --delay: -18s; --sway: 17px; --drift: -20px; --opacity: .58; }
.motes > span:nth-child(14) { --left: 26%; --size: 3.8px; --duration: 26s; --delay: -7s; --sway: -15px; --drift: 14px; --opacity: .44; }
.motes > span:nth-child(15) { --left: 46%; --size: 2.2px; --duration: 16s; --delay: -16s; --sway: 12px; --drift: -13px; --opacity: .60; }
.motes > span:nth-child(16) { --left: 64%; --size: 2.6px; --duration: 22s; --delay: -1s; --sway: -18px; --drift: 16px; --opacity: .50; }
.motes > span:nth-child(17) { --left: 80%; --size: 2.2px; --duration: 18s; --delay: -19s; --sway: 22px; --drift: 6px; --opacity: .56; }
.motes > span:nth-child(18) { --left: 96%; --size: 2.6px; --duration: 24s; --delay: -14s; --sway: -17px; --drift: -28px; --opacity: .46; }
@keyframes dust-rise {
    0% { opacity: 0; transform: translate3d(0,0,0) scale(.65); }
    12% { opacity: var(--opacity,.4); }
    48% { opacity: var(--opacity,.4); transform: translate3d(var(--sway,15px),-53vh,0) scale(1); }
    82% { opacity: .18; }
    100% { opacity: 0; transform: translate3d(var(--drift,-10px),-114vh,0) scale(.5); }
}
@media (prefers-reduced-motion: no-preference) {
    .background-image { animation: scene-breathe 26s ease-in-out infinite alternate; }
    .scene-light { animation: light-breathe 13s ease-in-out infinite alternate; }
    .avatar-star { animation: star-breathe 4.8s ease-in-out infinite; }

    .hero-content { animation: enter 1.1s var(--ease) both; }
    @keyframes scene-breathe { from { transform: scale(1.025); } to { transform: scale(1.075); } }
    @keyframes light-breathe { from { opacity: .35; } to { opacity: 1; } }
    @keyframes star-breathe { 50% { opacity: .45; transform: scale(.8); } }
    @keyframes enter { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
}
@media (max-width: 1000px) {
    .page-shell { width: calc(100% - 80px); }
    .hero { padding-right: 0; }
    .hero-content { width: 400px; }
    .scene-shade { background: linear-gradient(90deg,#140c0833,#160e087a 50%,#170f09a6),linear-gradient(180deg,#130b0833,transparent,#130b087a); }
}
@media (max-width: 720px) {
    .page-shell { width: calc(100% - 44px); }
    .topbar { min-height: 78px; }
    .top-wordmark { font-size: 23px; }
    .top-wordmark > span { font-size: 7px; letter-spacing: 2.9px; }
    .top-detail { font-size: 12px; }
    .top-detail > span { width: 15px; }
    .hero { justify-content: center; padding: 37px 0 45px; }
    .hero-content { width: min(100%,390px); }
    .brand-avatar { margin-bottom: 23px; }
    .eyebrow { font-size: 8px; letter-spacing: 2.2px; margin-bottom: 23px; }
    h1 { font-size: 91px; }
    .brand-divider { margin-top: 23px; }
    .intro { font-size: 22px; }
    .categories { font-size: 11px; margin-bottom: 27px; }
    .instagram-cta { padding: 14px 16px; min-height: 78px; }
    .instagram-icon { width: 45px; height: 45px; border-radius: 13px; }
    .cta-copy strong { font-size: 22px; }
    .background-image { object-position: 24% center; }
    .scene-shade { background: linear-gradient(180deg,#160e09c4,#160e09c9 45%,#160e0999 75%,#160e0973); }
    .scene-light { background: radial-gradient(ellipse at 50% 40%,#ce98451a,transparent 65%); }
    .site-footer { min-height: 65px; margin-bottom: 32px; font-size: 9px; }
    .sound-toggle { bottom: 11px; left: 12px; width: 34px; height: 34px; padding: 9px; }
}
@media (max-height: 820px) {
    .topbar { min-height: 64px; }
    .hero { padding-top: 25px; padding-bottom: 25px; }
    .brand-avatar { width: 82px; height: 82px; margin-bottom: 18px; }
    .brand-photo img { width: 260px; left: -15px; top: -16px; }
    .eyebrow { margin-bottom: 18px; }
    h1 { font-size: 76px; }
    .brand-divider { margin: 20px 0 13px; }
    .intro { font-size: 20px; }
    .categories { margin: 7px 0 23px; }
    .site-footer { min-height: 55px; }
}
@media (max-width: 350px) {
    .page-shell { width: calc(100% - 34px); }
    .instagram-cta { gap: 12px; padding-inline: 13px; }
    .instagram-icon { width: 40px; height: 40px; border-radius: 11px; }
    .cta-copy strong { font-size: 21px; }
    .cta-copy > span { font-size: 10px; }
    .cta-arrow { width: 29px; height: 29px; }
    .categories > span { margin-inline: 6px; }
    .top-detail { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
    .background-image,.scene-light,.avatar-star,.hero-content { animation: none; }
    .scene-move { transition: none; }
}
/* The brand portrait also reveals the original, unchanged supplied image. */
.brand-avatar { display: block; border: 0; padding: 0; background: none; color: inherit; cursor: pointer; }
.brand-avatar:hover .avatar-ring { border-color: #f8d7a1; box-shadow: 0 0 25px #e3b7751a; }
.poster-dialog { width: min(92vw,540px); max-height: 92vh; max-height: 92svh; padding: 10px; border: 1px solid #d2aa6c80; border-radius: 14px; background: #25190f; box-shadow: 0 30px 90px #0009; }
.poster-dialog::backdrop { background: #100a06d9; backdrop-filter: blur(8px); }
.poster-dialog > img { display: block; width: 100%; height: auto; border-radius: 6px; }
.poster-close { display: block; position: sticky; top: 0; margin: 0 0 9px auto; width: 36px; height: 36px; border: 1px solid #dfbb8059; border-radius: 50%; background: #4f3521; color: #fff2d9; font: 25px/1 Arial,sans-serif; cursor: pointer; }

@media (max-width: 720px) {
    .categories { font-size: 12px; color: #ead8bf; }
    .order-note { font-size: 12px; color: #ead8bf; }
}

/* Darken the accepted image treatment without changing its crop. */
.scene-shade::after { content: ""; position: absolute; inset: 0; background: #0c0805; opacity: .29; }

/* A light sweep, warm rim, and coordinated icon/arrow response. */
.instagram-cta { touch-action: manipulation; transition: transform .35s var(--ease),box-shadow .35s var(--ease),border-color .3s ease; }
.cta-copy { min-width: 0; }
.instagram-icon { transition: transform .4s var(--ease),box-shadow .4s var(--ease); }
.cta-arrow { transition: transform .35s var(--ease),background .3s ease,border-color .3s ease; }
.instagram-cta:focus-visible { border-color: #fff5df; box-shadow: 0 12px 38px #08050355,0 0 30px #eac78b33; }



@media (max-width: 720px) {
    .page-shell { width: auto; margin-left: max(22px,calc(env(safe-area-inset-left) + 12px)); margin-right: max(22px,calc(env(safe-area-inset-right) + 12px)); padding-top: env(safe-area-inset-top); }
    .motes > span:nth-child(n+13) { display: none; }
    .motes > span { box-shadow: 0 0 6px #e0b36b40; }
    .cta-copy > span { font-size: 12px; letter-spacing: .15px; }
    .site-footer { margin-bottom: 0; padding: 18px 0 max(20px,env(safe-area-inset-bottom)); min-height: 70px; flex-wrap: wrap; gap: 10px 16px; font-size: 10px; }
    .poster-dialog { overscroll-behavior: contain; }
    .poster-close { width: 44px; height: 44px; }
}
@media (max-width: 380px) {
    .site-footer { flex-direction: column; justify-content: center; text-align: center; }
}
@media (max-width: 350px) {
    .page-shell { margin-left: max(17px,calc(env(safe-area-inset-left) + 12px)); margin-right: max(17px,calc(env(safe-area-inset-right) + 12px)); }
}
@media (orientation: landscape) and (max-width: 1000px) {
    .page-shell { width: auto; margin-left: max(28px,calc(env(safe-area-inset-left) + 12px)); margin-right: max(28px,calc(env(safe-area-inset-right) + 12px)); padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
}
@media (prefers-reduced-motion: reduce) {


    .instagram-cta::after { display: none; }
}

.brand-avatar { border-radius: 50%; }

/* The requested dust is explicitly enabled, with a local pause control. */
html[data-motion="on"] .motes { display: block; }
html[data-motion="on"] .motes > span { animation: dust-rise var(--duration,20s) linear var(--delay,0s) infinite; background: #f1d8ae; box-shadow: 0 0 10px #edc17a80; }
html[data-motion="off"] .motes { display: none; }
html.page-hidden .motes > span { animation-play-state: paused; }
.motion-toggle { position: fixed; z-index: 3; left: max(14px,env(safe-area-inset-left)); bottom: max(12px,env(safe-area-inset-bottom)); width: 38px; height: 38px; display: grid; place-items: center; padding: 10px; border: 1px solid #d5ad7159; border-radius: 50%; background: #20150ee6; color: #e7c58f; cursor: pointer; touch-action: manipulation; }
.motion-toggle svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.motion-toggle[aria-pressed="true"] .motion-play,.motion-toggle[aria-pressed="false"] .motion-pause { display: none; }
.motion-toggle[aria-pressed="false"] { color: #c1a784; }

/* Pointer events work for a real mouse even on a hybrid or emulated device. */
.instagram-cta { cursor: pointer; transition: transform .18s var(--ease),background .2s ease,box-shadow .2s ease,border-color .2s ease; }
.instagram-cta.is-hovered,.instagram-cta:focus-visible { background: linear-gradient(115deg,#fff9eb,#f3d7a7); border-color: #fff8e8; box-shadow: 0 16px 42px #08050380,0 0 0 2px #f4d49b40,0 0 38px #e7bb7659,inset 0 1px 0 #fff; }
.instagram-cta.is-hovered { transform: translateY(-5px) scale(1.018); }
.instagram-cta.is-hovered::after { opacity: .9; transform: translate3d(440%,0,0) rotate(25deg); }
.instagram-cta.is-hovered .instagram-icon { transform: rotate(-8deg) scale(1.08); box-shadow: 0 6px 18px #9f3e5b66; }
.instagram-cta.is-hovered .cta-arrow { transform: translate(3px,-3px); background: #8e612c; border-color: #8e612c; color: #fff8e9; }
@media (any-hover: hover) and (any-pointer: fine) {
    :where(html:not([data-input="touch"])) .instagram-cta:hover { background: linear-gradient(115deg,#fff9eb,#f3d7a7); border-color: #fff8e8; box-shadow: 0 16px 42px #08050380,0 0 0 2px #f4d49b40,0 0 38px #e7bb7659,inset 0 1px 0 #fff; }
}
.instagram-cta:active,.instagram-cta.is-pressed { transform: translateY(3px) scale(.965); transition: none; background: linear-gradient(115deg,#e4bc82,#cda16a); border-color: #b47d3f; box-shadow: inset 0 4px 10px #75431666,0 3px 10px #08050380; }
.instagram-cta.is-pressed::after { opacity: 0; }
.instagram-cta.is-pressed .instagram-icon { transform: scale(.92); box-shadow: none; transition: none; }
.instagram-cta.is-pressed .cta-arrow { transform: translate(1px,1px) scale(.92); background: #9e733a33; border-color: #9b713880; color: #3b281b; transition: none; }
@media (max-width: 720px) {
    .motion-toggle { width: 44px; height: 44px; padding: 13px; }
    .site-footer { padding-bottom: max(64px,calc(env(safe-area-inset-bottom) + 48px)); }
}
@media (prefers-reduced-motion: reduce) {
    .instagram-cta,.instagram-icon,.cta-arrow { transition: none; }
    .instagram-cta.is-hovered { transform: translateY(-2px) scale(1.008); }
    .instagram-cta:active,.instagram-cta.is-pressed { transform: translateY(2px) scale(.97); }
    .instagram-cta.is-hovered .instagram-icon,.instagram-cta.is-pressed .instagram-icon,.instagram-cta.is-hovered .cta-arrow,.instagram-cta.is-pressed .cta-arrow { transform: none; }
    .instagram-cta::after { display: none; }
}