/* Festive Studio - shared tokens and fonts.
   Fonts are self-hosted subsets (OFL, see /festive/fonts/LICENSE-*.txt).
   The Hindi face downloads only when a page actually shows Devanagari
   (unicode-range), so English-only visitors never pay for it. The UI face is
   the platform's own system font: zero bytes, and already tuned for the
   mid-range Android phones most of this traffic arrives on. */

@font-face {
    font-family: "Fraunces";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("/festive/fonts/fraunces-latin-wght-normal.woff2") format("woff2-variations"),
         url("/festive/fonts/fraunces-latin-wght-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
    font-family: "Fraunces";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("/festive/fonts/fraunces-latin-ext-wght-normal.woff2") format("woff2-variations"),
         url("/festive/fonts/fraunces-latin-ext-wght-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
    font-family: "Tiro Devanagari Hindi";
    font-style: normal;
    font-display: swap;
    font-weight: 400;
    src: url("/festive/fonts/tiro-devanagari-hindi-devanagari-400-normal.woff2") format("woff2");
    unicode-range: U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF;
}

.fx {
    --fx-night-1: #0c0a24;
    --fx-night-2: #2a0e2c;
    --fx-cream: #fff4dc;
    --fx-cream-dim: rgba(255, 244, 220, .78);
    --fx-marigold: #ffb53d;
    --fx-saffron: #ff8a1f;
    --fx-brass: #c8913a;
    --fx-line: rgba(255, 213, 154, .22);
    --fx-display: "Fraunces", "Tiro Devanagari Hindi", Georgia, "Times New Roman", serif;
    --fx-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Devanagari", "Nirmala UI", sans-serif;
    --fx-ease-out: cubic-bezier(.16, 1, .3, 1);
    --fx-spring: cubic-bezier(.34, 1.56, .64, 1);
    color: var(--fx-cream);
    font-family: var(--fx-ui);
    -webkit-font-smoothing: antialiased;
}
.fx *, .fx *::before, .fx *::after { box-sizing: border-box; }

.fx-display { font-family: var(--fx-display); font-optical-sizing: auto; letter-spacing: -.01em; }

.fx-eyebrow {
    font: 600 .74rem/1 var(--fx-ui);
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--fx-marigold);
}

.fx-input {
    width: 100%;
    background: rgba(255, 244, 220, .06);
    border: 1px solid var(--fx-line);
    border-radius: 14px;
    color: var(--fx-cream);
    font: 400 1.02rem/1.35 var(--fx-ui);
    padding: .82rem 1rem;
    transition: border-color .2s, background .2s;
}
.fx-input::placeholder { color: rgba(255, 244, 220, .45); }
.fx-input:focus { outline: none; border-color: var(--fx-marigold); background: rgba(255, 244, 220, .1); }
.fx-input[aria-invalid="true"] { border-color: #ff7a6b; }
textarea.fx-input { resize: none; min-height: 4.4rem; }

.fx-field { display: block; text-align: left; }
.fx-field + .fx-field { margin-top: .7rem; }
.fx-label { display: flex; justify-content: space-between; font-size: .8rem; color: var(--fx-cream-dim); margin: 0 0 .35rem .2rem; }
.fx-count { font-variant-numeric: tabular-nums; opacity: .7; }

.fx-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 48px; padding: .7rem 1.25rem;
    border-radius: 999px; border: 1px solid var(--fx-line);
    background: rgba(255, 244, 220, .08); color: var(--fx-cream);
    font: 600 .95rem/1 var(--fx-ui); text-decoration: none; cursor: pointer;
    transition: transform .18s var(--fx-spring), background .2s, border-color .2s;
}
.fx-btn:hover { background: rgba(255, 244, 220, .14); color: var(--fx-cream); }
.fx-btn:active { transform: scale(.97); }
.fx-btn:focus-visible { outline: 2px solid var(--fx-marigold); outline-offset: 3px; }
.fx-btn--primary { background: linear-gradient(180deg, #ffc35a, #ff9a2e); color: #2a0e06; border-color: transparent; }
.fx-btn--primary:hover { background: linear-gradient(180deg, #ffcd70, #ffa640); color: #2a0e06; }
.fx-btn svg { width: 1.15em; height: 1.15em; flex: none; }

.fx-msg { min-height: 1.3em; font-size: .88rem; color: #ffb4a8; margin: .5rem 0 0; }

.fx-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
    .fx *, .fx *::before, .fx *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

.fx-body { margin: 0; background: #07061a; min-height: 100vh; }

/* The site stylesheet colours every <a>; festive buttons keep their own. */
.fx a.fx-btn, .fx a.fx-btn:visited { color: var(--fx-cream); }
.fx a.fx-btn--primary, .fx a.fx-btn--primary:visited, .fx a.fx-btn--primary:hover { color: #2a0e06; }
.fx .fx-btn { white-space: nowrap; }
.fx h1, .fx h2 { color: var(--fx-cream); }

/* Save viewer (iOS fallback): the PNG full screen with "press and hold to save".
   Appended to <body>, so it carries its own colours. */
.fx-viewer {
    position: fixed; inset: 0; z-index: 2147483000; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 14px; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
    background: rgba(8, 10, 16, .94); color: #f6efe2; text-align: center;
}
.fx-viewer-hint { margin: 0; max-width: 34ch; font-size: 1.05rem; line-height: 1.4; }
.fx-viewer-img {
    max-width: 100%; max-height: calc(100vh - 190px); max-height: calc(100dvh - 190px); border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
    -webkit-touch-callout: default; user-select: auto; -webkit-user-select: auto;
}
.fx-viewer-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.fx-viewer-actions .fx-btn { min-height: 44px; }
body .fx-viewer .fx-viewer-actions a.fx-btn, body .fx-viewer .fx-viewer-actions a.fx-btn:visited, body .fx-viewer .fx-viewer-actions a.fx-btn:hover { color: #f6efe2 !important; }
.fx-diag { margin: .6rem 0 0; padding: .5rem .7rem; border: 1px dashed currentColor; border-radius: 8px; font-size: .85rem; flex-basis: 100%; }
.fx-viewer .fx-btn { color: #f6efe2; border-color: rgba(246, 239, 226, .35); background: rgba(255, 244, 220, .1); font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }

/* The hidden attribute always wins over a component display rule (.ss-actions, .sf-actions are flex). */
.fx [hidden] { display: none !important; }