/* खुशियों वाली दिवाली — नगर निगम जयपुर
 * Jaipur Municipal Corporation · Diwali Competition 2026
 *
 * Design system v2 — "Diya-lit civic clarity".
 * A government portal first: calm paper, sindoor for action, marigold for
 * celebration, one Devanagari serif for display and one Devanagari sans for
 * everything a person has to read or tap. Every control on the site is drawn
 * here (no browser-default select, checkbox, radio, dialog, accordion or
 * validation bubble is ever shown); behaviour lives in js/ui.js.
 *
 * Layers, in order: tokens → reset → type → layout → chrome (header, nav,
 * footer) → components → page sections → motion → print.
 * Class names are the contract with the Blade views.
 */

/* =========================================================================
   1. Tokens
   ========================================================================= */
:root {
    /* Brand — sindoor */
    --brand-900: #4a0a26;
    --brand-800: #6e0d38;
    --brand-700: #9b0f47;
    --brand-600: #bf175c;
    --brand-500: #d63a7a;
    --brand-100: #f9d8e5;
    --brand-50:  #fdf0f5;
    --brand-rgb: 191, 23, 92;

    /* Festival — marigold */
    --gold-700: #8a5100;   /* text-safe on paper (AA) */
    --gold-500: #d68a00;
    --gold-400: #eba832;
    --gold-100: #fbecc8;
    --gold-50:  #fdf7e8;

    /* Night — the dark bands */
    --night-900: #1c0612;
    --night-800: #2a0a1b;
    --night-700: #3d1129;

    /* Neutrals — warm paper */
    --ink-900: #1c1714;
    --ink-700: #463e38;
    --ink-500: #6b625b;
    --ink-400: #8d847c;
    --line:      #ecdfe5;
    --line-soft: #f5ebef;
    --paper:     #fdf8fa;
    --surface:   #ffffff;
    --surface-2: #f9f0f4;

    /* Status */
    --ok-700: #24602f;  --ok-50: #edf6ee;  --ok-200: #c4e0c8;
    --warn-700: #7c4a00; --warn-50: #fdf5e3; --warn-200: #f1d9a3;
    --bad-700: #9d241c; --bad-50: #fcefed; --bad-200: #f0c8c3;
    --info-700: #5c1a24; --info-50: #fbf2f0; --info-200: #ecd0cb;

    /* Semantic aliases (kept for older markup) */
    --primary: var(--brand-600);
    --primary-dark: var(--brand-700);
    --maroon: var(--brand-800);
    --marigold: var(--gold-500);
    --gold: var(--gold-700);
    --ink: var(--ink-900);
    --ink-soft: var(--ink-700);
    --ink-faint: var(--ink-500);
    --rule: var(--line);
    --bg: var(--paper);

    /* Type */
    --font-body: 'Mukta', 'Noto Sans Devanagari', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Tiro Devanagari Hindi', 'Noto Serif Devanagari', Georgia, serif;
    --fs-xs: .8125rem;   /* 13 */
    --fs-sm: .875rem;    /* 14 */
    --fs-md: 1rem;       /* 16 */
    --fs-lg: 1.125rem;   /* 18 */
    --fs-xl: 1.375rem;   /* 22 */
    --fs-2xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
    --fs-3xl: clamp(1.9rem, 1.4rem + 2vw, 2.75rem);
    --fs-4xl: clamp(2.4rem, 1.6rem + 3.6vw, 4.25rem);

    /* Space (4px grid) */
    --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
    --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px;

    /* Shape */
    --r-xs: 6px;
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-xl: 22px;
    --r-pill: 999px;

    /* Elevation — warm, layered, never grey */
    --e-1: 0 1px 2px rgba(74, 10, 38, .05), 0 1px 1px rgba(74, 10, 38, .03);
    --e-2: 0 2px 4px rgba(74, 10, 38, .05), 0 6px 16px rgba(74, 10, 38, .06);
    --e-3: 0 6px 12px rgba(74, 10, 38, .06), 0 18px 40px rgba(74, 10, 38, .12);
    --e-focus: 0 0 0 3px rgba(var(--brand-rgb), .18);

    /* Motion */
    --ease-out: cubic-bezier(.22, .8, .24, 1);
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);
    --t-fast: 120ms;
    --t-base: 200ms;
    --t-slow: 360ms;

    /* Layout */
    --maxw: 1180px;
    --gutter: clamp(16px, 4vw, 28px);
    --header-h: 64px;
    --tap: 44px;

    /* The toran: sindoor, marigold and leaf bunting, used as a thin rule. */
    --toran: repeating-linear-gradient(90deg, var(--brand-600) 0 22px, var(--gold-500) 22px 30px, var(--brand-600) 30px 52px, #1f6f5c 52px 60px);
}

/* =========================================================================
   2. Reset
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
    margin: 0;
    min-height: 100vh;
    display: flex; flex-direction: column;
    background: var(--paper);
    color: var(--ink-900);
    font-family: var(--font-body);
    font-size: var(--fs-md);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
    overflow-x: clip;
    text-rendering: optimizeLegibility;
}
main { flex: 1 0 auto; }
img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
::selection { background: var(--gold-100); color: var(--brand-900); }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--gold-500); outline-offset: 2px; border-radius: var(--r-xs); }
body.is-locked { overflow: hidden; }

/* Scrollbars drawn to match the paper, everywhere they appear. */
* { scrollbar-width: thin; scrollbar-color: #e0cdd6 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #e0cdd6; border-radius: 99px; border: 3px solid var(--paper); }
::-webkit-scrollbar-thumb:hover { background: #bfb2a2; }

/* =========================================================================
   3. Type
   ========================================================================= */
h1, h2, h3, .display {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.18;
    letter-spacing: -.005em;
    color: var(--ink-900);
    margin: 0 0 .5em;
    text-wrap: balance;
}
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-md); font-weight: 700; margin: 0 0 .4em; line-height: 1.35; }
p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
small, .small { font-size: var(--fs-sm); }
.tiny { font-size: var(--fs-xs); }
strong, b { font-weight: 700; }
code, kbd {
    font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
    font-size: .92em;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-xs);
    padding: .08em .4em;
}

a { color: var(--brand-600); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--t-fast) ease; }
a:hover { color: var(--brand-700); text-decoration-thickness: 2px; }

.eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--font-body);
    font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--gold-700);
    margin: 0 0 var(--s-3);
}
.eyebrow::before { content: ""; width: 20px; height: 2px; border-radius: 2px; background: var(--gold-500); }
.eyebrow.center { justify-content: center; }
.lede { font-size: var(--fs-lg); color: var(--ink-700); line-height: 1.6; max-width: 62ch; }
.muted { color: var(--ink-500); }
.req { color: var(--brand-600); font-weight: 700; }
.num-tab { font-variant-numeric: tabular-nums; }

/* =========================================================================
   4. Layout
   ========================================================================= */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { max-width: 820px; }
.wrap-mid { max-width: 960px; }

.section-sm { padding-block: clamp(24px, 4vw, 40px) clamp(40px, 6vw, 64px); }
.band { padding-block: clamp(48px, 8vw, 96px); }
.band-sm { padding-block: clamp(28px, 5vw, 48px); }
.band-ivory { background: var(--paper); }
.band-white { background: var(--surface); border-block: 1px solid var(--line-soft); }
.band-tint { background: var(--surface-2); }
.band-dark { background: var(--night-800); color: #efe2dc; }
.band-dark h1, .band-dark h2, .band-dark h3 { color: #fff; }
.band-dark .lede, .band-dark .muted { color: #cdb9b1; }
.band-dark a:not(.btn) { color: var(--gold-400); }
.band-dark .eyebrow { color: var(--gold-400); }
.band-maroon { background: linear-gradient(160deg, var(--brand-700), var(--brand-900)); color: #fff; position: relative; overflow: hidden; }
.band-maroon::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: var(--toran); }
.band-maroon h2, .band-maroon h3 { color: #fff; }
.band-maroon .lede { color: #f1d9d4; }
.band-maroon .eyebrow { color: var(--gold-400); }

.section-head { margin-bottom: clamp(24px, 4vw, 40px); max-width: 66ch; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .lede { margin-inline: auto; }
.head-rule { padding-bottom: var(--s-3); margin-bottom: var(--s-6); border-bottom: 1px solid var(--line); color: var(--brand-800); }

.page-title { margin-bottom: var(--s-8); }
.page-title h1 { margin: 2px 0 var(--s-3); }
.page-title.center, .page-title.text-center { text-align: center; margin-inline: auto; }
.page-title.center .lede, .page-title.text-center .lede { margin-inline: auto; }

.stack > * + * { margin-top: var(--s-4); }
.stack-sm > * + * { margin-top: var(--s-2); }
.stack-lg > * + * { margin-top: var(--s-8); }
.row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.row-tight { gap: var(--s-2); }
.spacer { flex: 1 1 auto; }
.grid { display: grid; gap: var(--s-5); }
.grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .grid-2, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) {
    .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.center, .text-center { text-align: center; }
.text-start, .text-left { text-align: start; }
.text-end, .text-right { text-align: end; }
.mx-auto { margin-inline: auto; }
.justify-center { justify-content: center; }
.justify-between, .between { justify-content: space-between; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.baseline { align-items: baseline; }
.w-full { width: 100%; }
.mt-0 { margin-top: 0 !important; } .mt-2 { margin-top: var(--s-2); } .mt-4 { margin-top: var(--s-4); } .mt-6 { margin-top: var(--s-6); } .mt-8 { margin-top: var(--s-8); }
.mb-0 { margin-bottom: 0 !important; } .mb-2 { margin-bottom: var(--s-2); } .mb-4 { margin-bottom: var(--s-4); } .mb-6 { margin-bottom: var(--s-6); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* =========================================================================
   5. Chrome — header, navigation, footer
   ========================================================================= */
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { position: fixed; left: 16px; top: 12px; z-index: 300; background: var(--ink-900); color: #fff; padding: 10px 18px; border-radius: var(--r-sm); text-decoration: none; }

.masthead {
    position: sticky; top: 0; z-index: 100;
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid var(--line);
    transition: box-shadow var(--t-base) ease;
}
.masthead::before { content: ""; display: block; height: 4px; background: var(--toran); }
.masthead.is-scrolled { box-shadow: var(--e-2); }
.masthead-main .wrap { display: flex; align-items: center; gap: var(--s-4); min-height: var(--header-h); }

.brand { display: flex; align-items: center; gap: var(--s-3); color: inherit; text-decoration: none !important; min-width: 0; }
.brand:hover { color: inherit; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand-text strong { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.1rem, 1rem + .6vw, 1.4rem); color: var(--brand-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-text span { font-size: var(--fs-xs); color: var(--ink-500); font-weight: 500; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.nav-desktop { display: none; align-items: center; gap: 2px; margin-inline: auto; }
.nav-desktop a {
    position: relative;
    display: inline-flex; align-items: center; min-height: 40px;
    padding: 0 10px; border-radius: var(--r-sm); white-space: nowrap;
    color: var(--ink-700); text-decoration: none; font-size: .94rem; font-weight: 500;
    transition: color var(--t-fast) ease, background-color var(--t-fast) ease;
}
.nav-desktop a:hover { color: var(--ink-900); background: var(--surface-2); }
.nav-desktop a.is-active { color: var(--brand-700); font-weight: 600; }
.nav-desktop a.is-active::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--brand-600); }

.head-actions { display: flex; align-items: center; gap: var(--s-2); margin-inline-start: auto; }
.nav-desktop + .head-actions { margin-inline-start: 0; }
.head-link { display: none; color: var(--ink-700); font-weight: 600; font-size: var(--fs-sm); text-decoration: none; padding: 8px 10px; border-radius: var(--r-sm); }
.head-link:hover { color: var(--brand-700); background: var(--surface-2); }

.lang-switch { display: inline-flex; padding: 3px; gap: 2px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-pill); }
.lang-switch button {
    border: 0; background: transparent; color: var(--ink-500);
    font-size: var(--fs-xs); font-weight: 600; line-height: 1;
    padding: 0 10px; min-height: 30px; border-radius: var(--r-pill);
    transition: background-color var(--t-fast) ease, color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
.lang-switch button:hover { color: var(--ink-900); }
.lang-switch button.is-active { background: var(--surface); color: var(--brand-700); box-shadow: var(--e-1); }

.menu-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--tap); height: var(--tap); margin-inline-end: -8px;
    border: 0; background: transparent; color: var(--ink-900); border-radius: var(--r-sm);
}
.menu-btn:hover { background: var(--surface-2); }
.menu-btn svg { width: 22px; height: 22px; }

.head-btn-main, .head-btn-logout { display: none; }

@media (min-width: 640px) {
    .head-link { display: inline-flex; }
    .head-btn-main, .head-btn-logout { display: inline-flex; }
}
@media (min-width: 1200px) {
    .nav-desktop { display: flex; }
    .menu-btn { display: none; }
    .nav-desktop a:first-child { display: none; } /* the brand is the way home; the space goes to Sign in */
}
@media (min-width: 1200px) and (max-width: 1399px) { .brand-text span { display: none; } }
@media (max-width: 1199px) { .head-actions .lang-switch { display: none; } }
@media (max-width: 419px) { .head-btn-main { display: none !important; } }

/* Drawer — the mobile navigation, an in-house sheet with focus trap (ui.js) */
.drawer { position: fixed; inset: 0; z-index: 200; visibility: hidden; pointer-events: none; }
.drawer.is-open { visibility: visible; pointer-events: auto; }
.drawer-scrim { position: absolute; inset: 0; background: rgba(28, 6, 18, .48); opacity: 0; transition: opacity var(--t-slow) var(--ease-out); }
.drawer.is-open .drawer-scrim { opacity: 1; }
.drawer-panel {
    position: absolute; inset-block: 0; inset-inline-end: 0;
    width: min(88vw, 380px);
    display: flex; flex-direction: column;
    background: var(--surface);
    box-shadow: var(--e-3);
    transform: translateX(100%);
    transition: transform var(--t-slow) var(--ease-out);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    touch-action: pan-y;
}
.drawer.is-open .drawer-panel { transform: none; }
.drawer-head { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line-soft); }
.drawer-head strong { font-family: var(--font-display); font-weight: 400; font-size: 1.2rem; color: var(--brand-800); }
.drawer-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--s-2) var(--s-4) var(--s-6); }
.drawer-links a {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 52px; padding: 0 var(--s-2);
    color: var(--ink-900); text-decoration: none; font-size: 1.05rem; font-weight: 500;
    border-bottom: 1px solid var(--line-soft); border-radius: var(--r-sm);
}
.drawer-links a::after { content: "›"; color: var(--ink-400); font-size: 1.3rem; line-height: 1; }
.drawer-links a:active { background: var(--surface-2); }
.drawer-links a.is-active { color: var(--brand-700); font-weight: 600; }
.drawer-links a.is-active::after { color: var(--brand-600); }
.drawer-user { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-4); margin: var(--s-3) 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); }
.drawer-user strong { display: block; }
.drawer-foot { display: grid; gap: var(--s-2); padding: var(--s-4); border-top: 1px solid var(--line-soft); }
.drawer-foot .lang-switch { justify-self: start; }

.crumbs { font-size: var(--fs-sm); color: var(--ink-500); background: var(--surface); border-bottom: 1px solid var(--line-soft); }
.crumbs .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-block: 10px; }
.crumbs a { color: var(--ink-700); text-decoration: none; }
.crumbs a:hover { color: var(--brand-700); text-decoration: underline; }
.crumbs .sep { color: var(--ink-400); }

.site-foot { background: var(--night-800); color: #cdb9b1; font-size: .95rem; padding: var(--s-12) 0 0; position: relative; margin-top: auto; }
.site-foot::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--toran); }
.site-foot h4 { color: #fff; font-size: var(--fs-sm); letter-spacing: .06em; text-transform: uppercase; margin-bottom: var(--s-3); }
.site-foot a { color: #ecdcd6; text-decoration: none; }
.site-foot a:hover { color: #fff; text-decoration: underline; }
.foot-grid { display: grid; gap: var(--s-8); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .foot-grid { grid-template-columns: 2fr 1fr 1fr 1.3fr; } }
.foot-grid ul { list-style: none; margin: 0; padding: 0; }
.foot-grid li + li { margin-top: var(--s-2); }
.foot-brand strong { font-family: var(--font-display); font-weight: 400; font-size: 1.45rem; color: #fff; display: block; margin-bottom: var(--s-2); }
.foot-bottom { margin-top: var(--s-10); border-top: 1px solid rgba(255, 255, 255, .1); padding: var(--s-4) 0 calc(var(--s-6) + env(safe-area-inset-bottom, 0px)); font-size: var(--fs-sm); display: flex; flex-wrap: wrap; gap: var(--s-3); color: #a99189; }

/* Sticky action bar on phones (participate CTA, entry submit) */
.dock {
    position: fixed; inset: auto 0 0; z-index: 90;
    display: flex; gap: var(--s-2); align-items: center;
    padding: var(--s-3) var(--gutter) calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, .96);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 24px rgba(74, 10, 38, .08);
    transform: translateY(110%);
    transition: transform var(--t-slow) var(--ease-out);
}
.dock.is-visible { transform: none; }
.dock .btn { flex: 1; }
@media (min-width: 900px) { .dock { display: none; } }
body.has-dock { padding-bottom: 84px; }
@media (min-width: 900px) { body.has-dock { padding-bottom: 0; } }

/* =========================================================================
   6. Components
   ========================================================================= */

/* ---- Button ---- */
.btn {
    --btn-bg: var(--surface); --btn-fg: var(--ink-900); --btn-bd: var(--line); --btn-bg-h: var(--surface-2);
    position: relative;
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
    min-height: var(--tap); padding: 0 var(--s-5);
    font-size: .975rem; font-weight: 600; line-height: 1.15; letter-spacing: .005em;
    color: var(--btn-fg) !important; background: var(--btn-bg);
    border: 1px solid var(--btn-bd); border-radius: var(--r-sm);
    text-decoration: none !important; text-align: center; white-space: nowrap;
    cursor: pointer; user-select: none; -webkit-user-select: none;
    transition: background-color var(--t-fast) ease, border-color var(--t-fast) ease, color var(--t-fast) ease, box-shadow var(--t-fast) ease, transform var(--t-fast) var(--ease-out);
}
.btn:hover { background: var(--btn-bg-h); }
.btn:active { transform: scale(.98); }
.btn:focus-visible { outline: 3px solid var(--gold-500); outline-offset: 2px; }
.btn-primary { --btn-bg: var(--brand-600); --btn-fg: #fff; --btn-bd: var(--brand-600); --btn-bg-h: var(--brand-700); box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 1px 2px rgba(74, 10, 38, .2); }
.btn-gold { --btn-bg: var(--gold-500); --btn-fg: var(--night-900); --btn-bd: var(--gold-500); --btn-bg-h: var(--gold-400); }
.btn-outline { --btn-bg: var(--surface); --btn-fg: var(--ink-900); --btn-bd: #dccbd3; --btn-bg-h: var(--paper); }
.btn-outline:hover { border-color: var(--ink-500); }
.btn-ghost { --btn-bg: transparent; --btn-fg: var(--ink-900); --btn-bd: transparent; --btn-bg-h: var(--surface-2); }
.btn-ghost-light, .btn-outline-light { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, .45); --btn-bg-h: rgba(255, 255, 255, .1); }
.btn-ghost-light:hover, .btn-outline-light:hover { border-color: #fff; }
.btn-danger { --btn-bg: var(--bad-700); --btn-fg: #fff; --btn-bd: var(--bad-700); --btn-bg-h: #811d16; }
.btn-ok { --btn-bg: var(--ok-700); --btn-fg: #fff; --btn-bd: var(--ok-700); --btn-bg-h: #1b4a24; }
.btn-sm { min-height: 36px; padding: 0 var(--s-3); font-size: var(--fs-sm); border-radius: var(--r-xs); }
.btn-lg { min-height: 54px; padding: 0 var(--s-8); font-size: 1.05rem; border-radius: var(--r-md); }
.btn-block { display: flex; width: 100%; }
.btn-icon { width: var(--tap); padding: 0; }
.btn-arrow::after { content: "→"; transition: transform var(--t-base) var(--ease-out); }
.btn-arrow:hover::after { transform: translateX(3px); }
.btn[disabled], .btn[aria-disabled=true] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn.is-loading { color: transparent !important; pointer-events: none; }
.btn.is-loading::before {
    content: ""; position: absolute; width: 18px; height: 18px; inset: 0; margin: auto;
    border: 2px solid currentColor; border-color: var(--btn-fg) var(--btn-fg) transparent transparent;
    border-radius: 50%; animation: spin .7s linear infinite;
}
.btn.is-loading::after { opacity: 0; }

/* ---- Card, block, panel, notice ---- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(18px, 3vw, 28px); box-shadow: var(--e-1); }
.card-pad-sm { padding: var(--s-4) var(--s-5); }
.card h3 { color: var(--brand-800); }
.card-link { display: block; color: inherit; text-decoration: none !important; transition: box-shadow var(--t-base) ease, transform var(--t-base) var(--ease-out), border-color var(--t-base) ease; }
.card-link:hover { color: inherit; box-shadow: var(--e-2); border-color: #d9cdbe; transform: translateY(-2px); }

.block { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.block > * { padding: var(--s-4) var(--s-5); }
.block > * + * { border-top: 1px solid var(--line-soft); }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(18px, 3vw, 24px); }
.panel > h2:first-child, .panel > h3:first-child { margin-top: 0; }

.notice { display: block; background: var(--gold-50); border: 1px solid var(--gold-100); border-radius: var(--r-md); padding: var(--s-4) var(--s-5); }

/* ---- Stat ---- */
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-1); box-shadow: var(--e-1); }
.stat .n { font-family: var(--font-display); font-size: clamp(1.8rem, 1.4rem + 1.2vw, 2.4rem); color: var(--brand-800); line-height: 1.05; font-variant-numeric: tabular-nums; }
.stat .l { color: var(--ink-500); font-size: var(--fs-sm); font-weight: 500; }
.band-dark .stat { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .12); box-shadow: none; }
.band-dark .stat .n { color: var(--gold-400); }
.band-dark .stat .l { color: #cdb9b1; }

/* ---- Alert ---- */
.alert {
    --al-bg: var(--surface); --al-bd: var(--line); --al-fg: var(--ink-900); --al-ic: var(--ink-500);
    position: relative;
    display: block;
    padding: var(--s-3) var(--s-4) var(--s-3) calc(var(--s-4) + 26px);
    margin-bottom: var(--s-4);
    background: var(--al-bg); color: var(--al-fg);
    border: 1px solid var(--al-bd); border-radius: var(--r-md);
    font-size: .95rem; line-height: 1.55;
}
.alert::before {
    content: ""; position: absolute; left: var(--s-4); top: calc(var(--s-3) + 3px);
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--al-ic);
    -webkit-mask: var(--al-icon) center / 18px no-repeat; mask: var(--al-icon) center / 18px no-repeat;
    --al-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 15H9V9h2v6zm0-8H9V5h2v2z'/%3E%3C/svg%3E");
}
.alert strong { display: block; margin-bottom: 2px; }
.alert ul { margin: 0; padding-inline-start: 18px; }
.alert a { color: inherit; font-weight: 600; }
.alert-ok { --al-bg: var(--ok-50); --al-bd: var(--ok-200); --al-fg: #1c4a24; --al-ic: var(--ok-700);
    --al-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0a10 10 0 1 0 0 20 10 10 0 0 0 0-20zM8.5 14.4 4.3 10.2l1.4-1.4 2.8 2.8 5.8-5.8 1.4 1.4-7.2 7.2z'/%3E%3C/svg%3E"); }
.alert-warn { --al-bg: var(--warn-50); --al-bd: var(--warn-200); --al-fg: #5b3600; --al-ic: var(--gold-700);
    --al-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1 0 19h20L10 1zm1 15H9v-2h2v2zm0-4H9V7h2v5z'/%3E%3C/svg%3E"); }
.alert-bad { --al-bg: var(--bad-50); --al-bd: var(--bad-200); --al-fg: #6a1912; --al-ic: var(--bad-700);
    --al-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 15H9v-2h2v2zm0-4H9V5h2v6z'/%3E%3C/svg%3E"); }
.alert-info { --al-bg: var(--info-50); --al-bd: var(--info-200); --al-fg: var(--brand-800); --al-ic: var(--brand-600); }
.alert-plain { padding-left: var(--s-4); }
.alert-plain::before { display: none; }

/* ---- Toast (flash messages are lifted into these by ui.js) ---- */
.toasts { position: fixed; z-index: 400; inset: auto 0 0; display: grid; justify-items: center; gap: var(--s-2); padding: var(--s-4) var(--s-4) calc(var(--s-4) + env(safe-area-inset-bottom, 0px)); pointer-events: none; }
@media (min-width: 640px) { .toasts { inset: auto var(--s-6) var(--s-6) auto; justify-items: end; padding: 0; } }
.toast {
    pointer-events: auto;
    display: flex; align-items: flex-start; gap: var(--s-3);
    width: min(100%, 420px);
    padding: var(--s-3) var(--s-3) var(--s-3) var(--s-4);
    background: var(--ink-900); color: #fff;
    border-radius: var(--r-md); box-shadow: var(--e-3);
    font-size: .95rem; line-height: 1.5;
    animation: toast-in var(--t-slow) var(--ease-out) both;
}
.toast.is-leaving { animation: toast-out var(--t-base) ease-in both; }
.toast-dot { flex: 0 0 8px; height: 8px; margin-top: 8px; border-radius: 50%; background: var(--gold-400); }
.toast-ok .toast-dot { background: #6fcf86; }
.toast-bad .toast-dot { background: #ff8a7a; }
.toast-msg { flex: 1; }
.toast-x { flex: 0 0 32px; height: 32px; margin: -4px -4px -4px 0; border: 0; border-radius: var(--r-xs); background: transparent; color: #cfc3bd; font-size: 1.2rem; line-height: 1; }
.toast-x:hover { background: rgba(255, 255, 255, .1); color: #fff; }

/* ---- Badge ---- */
.badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px; min-height: 24px;
    border-radius: var(--r-pill); border: 1px solid transparent;
    font-size: var(--fs-xs); font-weight: 600; line-height: 1.2; white-space: nowrap;
    background: var(--surface-2); color: var(--ink-700); border-color: var(--line);
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .75; }
.badge-plain::before { display: none; }
.badge-draft { background: var(--surface-2); color: var(--ink-700); border-color: var(--line); }
.badge-submitted, .badge-review { background: var(--warn-50); color: var(--warn-700); border-color: var(--warn-200); }
.badge-verified { background: var(--ok-50); color: var(--ok-700); border-color: var(--ok-200); }
.badge-rejected, .badge-flag { background: var(--bad-50); color: var(--bad-700); border-color: var(--bad-200); }
.badge-gold { background: var(--gold-50); color: var(--gold-700); border-color: var(--gold-100); }
.badge-silver { background: #f2f0ec; color: #57514b; border-color: #ddd6cd; }
.badge-accent { background: var(--brand-50); color: var(--brand-700); border-color: var(--brand-100); }

/* ---- Table ---- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--e-1); }
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .94rem; }
.table-wide { min-width: 680px; }
caption { text-align: start; padding: var(--s-3) var(--s-4); color: var(--ink-500); font-size: var(--fs-sm); }
th, td { padding: 12px var(--s-4); text-align: start; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
th { position: sticky; top: 0; background: var(--paper); color: var(--ink-500); font-weight: 600; font-size: var(--fs-xs); letter-spacing: .05em; text-transform: uppercase; border-bottom: 1px solid var(--line); white-space: nowrap; }
tbody tr { transition: background-color var(--t-fast) ease; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fdfaf6; }
td.num, th.num { text-align: end; font-variant-numeric: tabular-nums; }
/* On phones a table can turn into labelled rows: add .table-stack + data-label on each td. */
@media (max-width: 639px) {
    .table-stack thead { display: none; }
    .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100%; }
    .table-stack tr { padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line-soft); }
    .table-stack tr:last-child { border-bottom: 0; }
    .table-stack td { border: 0; padding: 4px 0; display: flex; gap: var(--s-3); justify-content: space-between; text-align: end; }
    .table-stack td::before { content: attr(data-label); color: var(--ink-500); font-size: var(--fs-sm); text-align: start; }
    .table-stack td.num { text-align: end; }
}

/* ---- Pagination (resources/views/vendor/pagination/portal.blade.php) ---- */
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-5); font-size: var(--fs-sm); color: var(--ink-500); }
.pager-links { display: flex; gap: 4px; flex-wrap: wrap; }
.pager-links a, .pager-links span { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 10px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface); color: var(--ink-900); text-decoration: none; font-weight: 600; }
.pager-links a:hover { border-color: var(--ink-500); }
.pager-links .is-current { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.pager-links .is-disabled { color: var(--ink-400); background: var(--paper); }

/* ---- Forms ---- */
label { display: block; font-size: .94rem; font-weight: 600; color: var(--ink-900); margin-bottom: 6px; }
.field { position: relative; }
.field + .field { margin-top: var(--s-5); }
.field-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); }

.input,
input[type=text], input[type=tel], input[type=number], input[type=email], input[type=search],
input[type=password], input[type=datetime-local], input[type=date], input[type=url], textarea, select {
    width: 100%; min-height: 48px; padding: 11px 14px;
    font-size: 16px; /* never zoom on iOS */
    color: var(--ink-900); background: var(--surface);
    border: 1px solid #dccbd3; border-radius: var(--r-sm);
    box-shadow: inset 0 1px 2px rgba(74, 10, 38, .04);
    transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease, background-color var(--t-fast) ease;
    -webkit-appearance: none; appearance: none;
}
textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: var(--ink-400); }
input:hover, textarea:hover, select:hover { border-color: #c9b2bd; }
input:focus-visible, textarea:focus-visible, select:focus-visible, .input:focus-visible { outline: none; border-color: var(--brand-600); box-shadow: var(--e-focus); }
input[aria-invalid=true], textarea[aria-invalid=true], select[aria-invalid=true], .is-invalid { border-color: var(--bad-700) !important; box-shadow: 0 0 0 3px rgba(157, 36, 28, .12) !important; }
input:disabled, textarea:disabled, select:disabled { background: var(--paper); color: var(--ink-400); cursor: not-allowed; }
input[type=number] { -moz-appearance: textfield; }
input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; }
input[type=date]::-webkit-calendar-picker-indicator, input[type=datetime-local]::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }

/* Native select, only ever visible before ui.js upgrades it. */
select { padding-inline-end: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236b625b' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
select.is-enhanced { position: absolute !important; inset: 0; opacity: 0; pointer-events: none; width: 1px; height: 1px; }

.hint { color: var(--ink-500); font-size: var(--fs-sm); margin-top: 6px; line-height: 1.45; }
.hint.is-ok { color: var(--ok-700); }
.hint.is-bad { color: var(--bad-700); }
.error { display: flex; gap: 6px; align-items: flex-start; color: var(--bad-700); font-size: var(--fs-sm); font-weight: 500; margin-top: 6px; line-height: 1.45; animation: shake .32s var(--ease-out); }
.error::before { content: "!"; flex: 0 0 16px; height: 16px; margin-top: 2px; border-radius: 50%; background: var(--bad-700); color: #fff; font-size: 11px; font-weight: 800; line-height: 16px; text-align: center; }

.input-prefix { display: flex; align-items: stretch; }
.input-prefix > span {
    display: flex; align-items: center; padding: 0 14px;
    border: 1px solid #dccbd3; border-inline-end: 0; border-radius: var(--r-sm) 0 0 var(--r-sm);
    background: var(--surface-2); color: var(--ink-700); font-weight: 600; font-variant-numeric: tabular-nums;
}
.input-prefix input { border-radius: 0 var(--r-sm) var(--r-sm) 0; letter-spacing: .04em; font-variant-numeric: tabular-nums; }

/* Checkbox and radio — drawn here; the real input keeps focus, form and a11y. */
input[type=checkbox], input[type=radio] {
    -webkit-appearance: none; appearance: none;
    flex: 0 0 22px; width: 22px; height: 22px; min-height: 0; margin: 1px 0 0; padding: 0;
    display: inline-grid; place-content: center;
    background: var(--surface); border: 1.5px solid #c7b1bc; box-shadow: none;
    cursor: pointer;
    transition: background-color var(--t-fast) ease, border-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
input[type=checkbox] { border-radius: 6px; }
input[type=radio] { border-radius: 50%; }
input[type=checkbox]::before {
    content: ""; width: 12px; height: 12px;
    background: #fff;
    clip-path: polygon(14% 52%, 0 66%, 38% 100%, 100% 26%, 86% 12%, 38% 72%);
    transform: scale(0); transition: transform var(--t-fast) var(--ease-out);
}
input[type=radio]::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #fff; transform: scale(0); transition: transform var(--t-fast) var(--ease-out); }
input[type=checkbox]:checked, input[type=radio]:checked { background: var(--brand-600); border-color: var(--brand-600); }
input[type=checkbox]:checked::before, input[type=radio]:checked::before { transform: scale(1); }
input[type=checkbox]:hover, input[type=radio]:hover { border-color: var(--brand-600); }
input[type=checkbox]:focus-visible, input[type=radio]:focus-visible { outline: none; box-shadow: var(--e-focus); border-color: var(--brand-600); }
input[type=checkbox]:disabled, input[type=radio]:disabled { opacity: .45; cursor: not-allowed; }

.check, .choice {
    display: flex; gap: var(--s-3); align-items: flex-start;
    padding: var(--s-3) var(--s-4);
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
    cursor: pointer; font-weight: 400; margin: 0;
    transition: border-color var(--t-fast) ease, background-color var(--t-fast) ease;
}
.check:hover, .choice:hover { border-color: #d8c2cc; }
.check:has(input:checked), .choice:has(input:checked) { border-color: rgba(var(--brand-rgb), .45); background: var(--brand-50); }
.check label, .choice span { font-weight: 400; margin: 0; font-size: .96rem; line-height: 1.55; color: var(--ink-700); }
.choice + .choice { margin-top: var(--s-2); }
.check-plain { padding: 0; border: 0; background: transparent !important; }

/* Switch (role="switch" checkbox) */
.switch { display: inline-flex; align-items: center; gap: var(--s-3); cursor: pointer; font-weight: 500; margin: 0; }
.switch input { width: 42px; flex-basis: 42px; height: 24px; border-radius: 99px; background: #d8cdbf; border: 0; }
.switch input::before { width: 18px; height: 18px; border-radius: 50%; background: #fff; clip-path: none; transform: translateX(-9px); box-shadow: var(--e-1); transition: transform var(--t-base) var(--ease-out); }
.switch input:checked::before { transform: translateX(9px); }

/* Option cards (radio groups that pick a category / class) */
.opt-grid { display: grid; gap: var(--s-3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .opt-grid-2, .opt-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 720px) { .opt-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.opt {
    position: relative;
    display: grid; grid-template-columns: auto 1fr; column-gap: var(--s-3); row-gap: 2px; align-content: start;
    padding: var(--s-4); margin: 0;
    background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r-md);
    cursor: pointer; font-weight: 400;
    transition: border-color var(--t-fast) ease, box-shadow var(--t-base) ease, background-color var(--t-fast) ease, transform var(--t-fast) var(--ease-out);
}
.opt:hover { border-color: #d8c2cc; box-shadow: var(--e-1); }
.opt:active { transform: scale(.99); }
.opt input { grid-row: 1 / span 3; margin-top: 2px; }
.opt > :not(input) { grid-column: 2; }
.opt:has(input:checked) { border-color: var(--brand-600); background: var(--brand-50); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .1); }
.opt:has(input:focus-visible) { box-shadow: var(--e-focus); }
.opt:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.opt-num { font-family: var(--font-display); color: var(--gold-700); font-size: var(--fs-sm); line-height: 1.2; }
.opt-title { font-weight: 700; color: var(--ink-900); line-height: 1.35; }
.opt-desc { font-size: var(--fs-sm); color: var(--ink-500); line-height: 1.45; }
.opt-meta { margin-top: var(--s-2); justify-self: start; font-size: var(--fs-xs); font-weight: 600; color: var(--gold-700); background: var(--gold-50); border: 1px solid var(--gold-100); padding: 2px 8px; border-radius: var(--r-pill); }
.opt.is-fixed { grid-template-columns: 1fr; cursor: default; border-color: var(--brand-600); background: var(--brand-50); }
.opt.is-fixed > * { grid-column: 1; }

/* ---- Select (in-house listbox/combobox built by ui.js from a <select>) ---- */
.uiselect { position: relative; }
.uiselect-trigger {
    width: 100%; min-height: 48px; padding: 0 44px 0 14px;
    display: flex; align-items: center; gap: var(--s-2); text-align: start;
    background: var(--surface); color: var(--ink-900);
    border: 1px solid #dccbd3; border-radius: var(--r-sm);
    box-shadow: inset 0 1px 2px rgba(74, 10, 38, .04);
    font-size: 16px; line-height: 1.3;
    transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
.uiselect-trigger:hover { border-color: #c9b2bd; }
.uiselect-trigger:focus-visible, .uiselect.is-open > .uiselect-trigger { outline: none; border-color: var(--brand-600); box-shadow: var(--e-focus); }
.uiselect-trigger[aria-invalid=true] { border-color: var(--bad-700); box-shadow: 0 0 0 3px rgba(157, 36, 28, .12); }
.uiselect-trigger:disabled { background: var(--paper); color: var(--ink-400); cursor: not-allowed; }
.uiselect-trigger::after {
    content: ""; position: absolute; right: 16px; top: 50%; width: 9px; height: 9px; margin-top: -7px;
    border-right: 1.8px solid var(--ink-500); border-bottom: 1.8px solid var(--ink-500);
    transform: rotate(45deg); transition: transform var(--t-base) var(--ease-out);
}
.uiselect.is-open > .uiselect-trigger::after { transform: translateY(4px) rotate(-135deg); }
.uiselect-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uiselect-value.is-placeholder { color: var(--ink-400); }
.uiselect-pop {
    position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 6px);
    display: flex; flex-direction: column;
    max-height: min(360px, 60vh);
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
    box-shadow: var(--e-3);
    transform-origin: top center;
    animation: pop-in var(--t-base) var(--ease-out);
}
.uiselect.is-up .uiselect-pop { top: auto; bottom: calc(100% + 6px); transform-origin: bottom center; }
.uiselect-search { padding: var(--s-2); border-bottom: 1px solid var(--line-soft); }
.uiselect-search input { min-height: 40px; padding: 8px 12px 8px 36px; font-size: 16px; background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238d847c' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 12px center; }
.uiselect-list { list-style: none; margin: 0; padding: var(--s-1); overflow-y: auto; overscroll-behavior: contain; }
.uiselect-opt {
    /* Block, not flex: a search highlight (<mark>) must stay inside the text run. */
    position: relative; display: block; line-height: 28px;
    min-height: 44px; padding: 8px 36px 8px 12px; border-radius: var(--r-xs);
    cursor: pointer; color: var(--ink-900); font-size: .97rem;
}
.uiselect-opt[aria-selected=true] { color: var(--brand-700); font-weight: 600; }
.uiselect-opt[aria-selected=true]::after { content: ""; position: absolute; right: 14px; top: 50%; width: 12px; height: 7px; margin-top: -6px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.uiselect-opt.is-active { background: var(--surface-2); }
.uiselect-opt[aria-disabled=true] { color: var(--ink-400); cursor: not-allowed; }
.uiselect-opt mark { background: var(--gold-100); color: inherit; border-radius: 3px; padding: 0 1px; }
.uiselect-empty { padding: var(--s-4); text-align: center; color: var(--ink-500); font-size: var(--fs-sm); }
@media (max-width: 559px) {
    /* On phones the list becomes a bottom sheet, thumb-reachable. */
    .uiselect.is-open .uiselect-pop {
        position: fixed; z-index: 260; left: 0; right: 0; top: auto; bottom: 0;
        max-height: 72vh; border-radius: var(--r-xl) var(--r-xl) 0 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        animation: sheet-in var(--t-slow) var(--ease-out);
    }
    .uiselect.is-open .uiselect-pop::before { content: ""; align-self: center; width: 40px; height: 4px; border-radius: 4px; background: #e0cdd6; margin: 10px 0 2px; flex: 0 0 auto; }
    .uiselect-scrim { position: fixed; inset: 0; z-index: 250; background: rgba(28, 6, 18, .45); animation: fade-in var(--t-base) ease; }
}

/* ---- Accordion (FAQ) — <details> drawn and animated by ui.js ---- */
.qa { border-bottom: 1px solid var(--line); }
.qa:first-child { border-top: 1px solid var(--line); }
.qa summary {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
    min-height: 60px; padding: var(--s-3) 0;
    font-weight: 600; font-size: 1.02rem; color: var(--ink-900);
    transition: color var(--t-fast) ease;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::marker { content: ""; }
.qa summary::after {
    content: ""; flex: 0 0 28px; height: 28px; border-radius: 50%;
    background: var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 1v10M1 6h10' stroke='%239b2335' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center no-repeat;
    transition: transform var(--t-base) var(--ease-out), background-color var(--t-fast) ease;
}
.qa[open] summary::after { transform: rotate(45deg); background-color: var(--brand-50); }
.qa summary:hover { color: var(--brand-700); }
.qa summary:focus-visible { outline-offset: 4px; }
.qa-body { padding: 0 0 var(--s-5); color: var(--ink-700); max-width: 68ch; overflow: hidden; }
.qa-small summary { min-height: 44px; font-size: var(--fs-sm); color: var(--ink-500); font-weight: 600; }

/* ---- Dialog (confirmations; replaces window.confirm) ---- */
.dialog { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; padding: var(--s-4); }
.dialog-scrim { position: absolute; inset: 0; background: rgba(28, 6, 18, .5); animation: fade-in var(--t-base) ease both; }
.dialog-card {
    position: relative; width: min(100%, 440px);
    background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--e-3);
    padding: var(--s-6);
    animation: dialog-in var(--t-slow) var(--ease-out) both;
}
.dialog-card h2 { font-size: var(--fs-xl); margin-bottom: var(--s-2); }
.dialog-card p { color: var(--ink-700); }
.dialog-actions { display: flex; flex-wrap: wrap-reverse; gap: var(--s-2); justify-content: flex-end; margin-top: var(--s-6); }
.dialog.is-leaving .dialog-scrim { animation: fade-out var(--t-base) ease both; }
.dialog.is-leaving .dialog-card { animation: dialog-out var(--t-base) ease-in both; }
@media (max-width: 559px) {
    .dialog { align-items: end; padding: 0; }
    .dialog-card { width: 100%; border-radius: var(--r-xl) var(--r-xl) 0 0; padding-bottom: calc(var(--s-6) + env(safe-area-inset-bottom, 0px)); animation-name: sheet-in; }
    .dialog-actions .btn { flex: 1 1 100%; }
}

/* ---- Stepper (participate, entry progress) ---- */
.pt-steps, .stepper { list-style: none; margin: 0 0 var(--s-8); padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); counter-reset: step; }
.pt-steps li, .stepper li { position: relative; display: flex; flex-direction: column; gap: var(--s-2); font-size: var(--fs-sm); font-weight: 600; color: var(--ink-500); }
.pt-steps li::before, .stepper li::before { content: ""; height: 4px; border-radius: 4px; background: var(--line); transition: background-color var(--t-slow) var(--ease-out); }
.pt-steps li span, .stepper li span { display: none; }
.pt-steps li.is-current, .stepper li.is-current { color: var(--brand-700); }
.pt-steps li.is-current::before, .stepper li.is-current::before { background: linear-gradient(90deg, var(--brand-600) 50%, var(--line) 50%); }
.pt-steps li.is-done, .stepper li.is-done { color: var(--ok-700); }
.pt-steps li.is-done::before, .stepper li.is-done::before { background: var(--brand-600); }

/* ---- Empty state ---- */
.empty { display: grid; justify-items: center; gap: var(--s-2); text-align: center; padding: var(--s-12) var(--s-5); color: var(--ink-500); background: var(--surface); border: 1px dashed #e0cdd6; border-radius: var(--r-lg); }
.empty-mark { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: var(--gold-50); color: var(--gold-700); margin-bottom: var(--s-2); }
.empty-mark svg { width: 26px; height: 26px; }
.empty h3 { color: var(--ink-900); margin: 0; font-size: var(--fs-lg); font-family: var(--font-body); font-weight: 700; }
.empty p { max-width: 46ch; margin: 0; }

/* ---- Tabs / segmented ---- */
.tabs { display: flex; gap: 4px; padding: 4px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); overflow-x: auto; }
.tabs a, .tabs button { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 38px; padding: 0 var(--s-4); border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink-700); font-weight: 600; font-size: var(--fs-sm); text-decoration: none; white-space: nowrap; }
.tabs a:hover, .tabs button:hover { color: var(--ink-900); }
.tabs .is-active { background: var(--surface); color: var(--brand-700); box-shadow: var(--e-1); }

/* ---- Description list (key/value) ---- */
.kv { margin: 0; display: grid; }
.kv > div { display: grid; grid-template-columns: minmax(110px, 38%) 1fr; gap: var(--s-3); padding: 10px 0; border-top: 1px solid var(--line-soft); }
.kv > div:first-child { border-top: 0; }
.kv dt { color: var(--ink-500); margin: 0; font-size: var(--fs-sm); }
.kv dd { margin: 0; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }

/* ---- Reference chip (copyable) ---- */
.ref { display: inline-flex; align-items: center; gap: var(--s-2); padding: 6px 6px 6px 12px; background: var(--surface); border: 1px dashed #d8c2cc; border-radius: var(--r-sm); font-family: ui-monospace, Consolas, monospace; font-size: 1rem; font-weight: 700; letter-spacing: .06em; color: var(--brand-800); }
.ref .btn { font-family: var(--font-body); letter-spacing: 0; }

/* ---- Progress meter ---- */
.meter { --v: 0; height: 8px; border-radius: 8px; background: var(--line-soft); overflow: hidden; }
.meter > span { display: block; height: 100%; width: calc(var(--v) * 1%); border-radius: inherit; background: linear-gradient(90deg, var(--gold-500), var(--brand-600)); transition: width var(--t-slow) var(--ease-out); }

/* =========================================================================
   7. Admin / jury shell
   ========================================================================= */
.side {
    display: flex; gap: 4px; overflow-x: auto; padding: 4px; margin-bottom: var(--s-6);
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
    scroll-snap-type: x proximity;
}
.side a { flex: 0 0 auto; scroll-snap-align: start; display: flex; align-items: center; min-height: 40px; padding: 0 var(--s-4); border-radius: var(--r-sm); color: var(--ink-700); text-decoration: none; font-weight: 600; font-size: var(--fs-sm); white-space: nowrap; }
.side a:hover { background: var(--surface-2); color: var(--ink-900); }
.side a.is-active { background: var(--brand-600); color: #fff; }
@media (min-width: 1024px) {
    .admin-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--s-8); align-items: start; }
    .admin-grid .side { position: sticky; top: calc(var(--header-h) + 20px); flex-direction: column; overflow: visible; margin: 0; padding: var(--s-2); }
    .admin-grid .side a { min-height: 42px; }
}
.toolbar { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: end; padding: var(--s-4); margin-bottom: var(--s-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.toolbar .field { flex: 1 1 180px; margin: 0; }
.toolbar .field + .field { margin: 0; }
.toolbar label { font-size: var(--fs-xs); color: var(--ink-500); text-transform: uppercase; letter-spacing: .05em; }

/* Scoring */
.score-row { display: grid; grid-template-columns: 1fr 120px; gap: var(--s-4); align-items: center; padding: var(--s-3) 0; border-top: 1px solid var(--line-soft); }
.score-row:first-child { border-top: 0; }
.score-row label { margin: 0; }
.score-row .hint { margin-top: 2px; }
.score-row input { text-align: center; font-weight: 700; font-size: 1.1rem; }

/* =========================================================================
   8. Photographs and the live camera
   ========================================================================= */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s-3); }
@media (min-width: 640px) { .photo-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--s-4); } }
.photo-tile { position: relative; margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--e-1); animation: rise var(--t-slow) var(--ease-out) both; }
.photo-tile > a, .photo-tile > button.photo-open { display: block; padding: 0; border: 0; width: 100%; background: var(--surface-2); cursor: zoom-in; }
.photo-tile img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--surface-2); transition: transform var(--t-slow) var(--ease-out); }
.photo-tile:hover img { transform: scale(1.03); }
.photo-meta { padding: var(--s-2) var(--s-3) var(--s-3); font-size: var(--fs-xs); line-height: 1.5; color: var(--ink-500); border-top: 1px solid var(--line-soft); }
.photo-meta strong { color: var(--ink-900); }
.photo-num { position: absolute; top: 8px; left: 8px; z-index: 1; min-width: 26px; height: 26px; padding: 0 8px; display: grid; place-items: center; border-radius: var(--r-pill); background: rgba(28, 6, 18, .72); color: #fff; font-size: var(--fs-xs); font-weight: 700; }

/* Lightbox — swipeable viewer for photo grids (ui.js) */
.lightbox { position: fixed; inset: 0; z-index: 450; display: flex; flex-direction: column; background: rgba(12, 6, 7, .96); color: #fff; animation: fade-in var(--t-base) ease both; touch-action: none; }
.lightbox-bar { display: flex; align-items: center; gap: var(--s-2); padding: calc(var(--s-2) + env(safe-area-inset-top, 0px)) var(--s-3) var(--s-2); font-size: var(--fs-sm); color: #d8ccc6; }
.lightbox-bar .spacer { flex: 1; }
.lightbox-stage { position: relative; flex: 1; display: grid; place-items: center; overflow: hidden; }
.lightbox-stage img { max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; transition: transform var(--t-slow) var(--ease-out), opacity var(--t-base) ease; }
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .12); color: #fff; font-size: 1.4rem; display: grid; place-items: center; }
.lightbox-nav:hover { background: rgba(255, 255, 255, .22); }
.lightbox-prev { left: var(--s-3); }
.lightbox-next { right: var(--s-3); }
@media (hover: none) { .lightbox-nav { display: none; } }
.lightbox-cap { padding: var(--s-3) var(--s-4) calc(var(--s-4) + env(safe-area-inset-bottom, 0px)); font-size: var(--fs-sm); color: #d8ccc6; text-align: center; min-height: 48px; }
.lightbox .btn-icon { color: #fff !important; --btn-bg: transparent; --btn-bd: transparent; --btn-bg-h: rgba(255, 255, 255, .12); font-size: 1.3rem; }

.camera-shell { border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; background: var(--night-900); box-shadow: var(--e-2); }
.camera-stage { position: relative; aspect-ratio: 3 / 4; background: #0d0607; }
@media (min-width: 720px) { .camera-stage { aspect-ratio: 4 / 3; } }
.camera-stage video, .camera-stage canvas { width: 100%; height: 100%; object-fit: cover; }
.camera-stage canvas { display: none; }
.camera-stage::after {
    /* Rule-of-thirds guide, faint, only while live */
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
    background:
        linear-gradient(90deg, transparent calc(33.33% - .5px), rgba(255, 255, 255, .22) calc(33.33% - .5px) calc(33.33% + .5px), transparent calc(33.33% + .5px) calc(66.66% - .5px), rgba(255, 255, 255, .22) calc(66.66% - .5px) calc(66.66% + .5px), transparent calc(66.66% + .5px)),
        linear-gradient(180deg, transparent calc(33.33% - .5px), rgba(255, 255, 255, .22) calc(33.33% - .5px) calc(33.33% + .5px), transparent calc(33.33% + .5px) calc(66.66% - .5px), rgba(255, 255, 255, .22) calc(66.66% - .5px) calc(66.66% + .5px), transparent calc(66.66% + .5px));
}
.camera-shell[data-state="review"] .camera-stage::after, .camera-shell[data-state="sending"] .camera-stage::after { display: none; }
.camera-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.camera-flash.is-on { animation: flash .35s ease-out; }
.camera-hud { position: absolute; z-index: 2; inset: var(--s-3) var(--s-3) auto; display: flex; justify-content: space-between; gap: var(--s-2); pointer-events: none; }
.camera-count { padding: 4px 10px; border-radius: var(--r-pill); background: rgba(12, 6, 7, .6); color: #fff; font-size: var(--fs-xs); font-weight: 700; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

.camera-shell[data-state="review"] .camera-stage video,
.camera-shell[data-state="sending"] .camera-stage video { display: none; }
.camera-shell[data-state="review"] .camera-stage canvas,
.camera-shell[data-state="sending"] .camera-stage canvas { display: block; object-fit: contain; }
.camera-shell[data-state="review"] .shutter,
.camera-shell[data-state="sending"] .shutter { display: none; }
.camera-shell:not([data-state="review"]):not([data-state="sending"]) .camera-review { display: none; }
.camera-shell[data-state="review"] .camera-review,
.camera-shell[data-state="sending"] .camera-review { display: flex; gap: var(--s-2); }
.camera-shell[data-state="sending"] .camera-review .btn { opacity: .55; pointer-events: none; }
.camera-bar { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s-3); align-items: center; padding: var(--s-4); background: var(--night-800); color: #e8dcd6; }
.camera-bar > .camera-review { grid-column: 1 / -1; justify-content: center; }
.camera-bar .gps-chip { justify-self: start; }
.camera-bar [data-cam-status] { grid-column: 1 / -1; text-align: center; color: #cdb9b1; min-height: 1.2em; }
.camera-bar .shutter { grid-column: 2; }
.camera-review .btn-outline { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, .4); --btn-bg-h: rgba(255, 255, 255, .1); }
.shutter {
    position: relative; width: 74px; height: 74px; border-radius: 50%;
    border: 4px solid #fff; background: transparent; padding: 0;
    transition: transform var(--t-fast) var(--ease-out);
}
.shutter::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: #fff; transition: transform var(--t-fast) var(--ease-out), background-color var(--t-fast) ease; }
.shutter:hover::after { background: #f5ede9; }
.shutter:active { transform: scale(.94); }
.shutter:active::after { transform: scale(.88); }
.shutter:disabled { opacity: .4; cursor: not-allowed; }
.shutter:focus-visible { outline: 3px solid var(--gold-400); outline-offset: 4px; }
.gps-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); color: #e8dcd6; font-size: var(--fs-xs); font-weight: 600; font-variant-numeric: tabular-nums; }
.gps-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #a99189; }
.gps-chip.ok::before { background: #6fcf86; box-shadow: 0 0 0 3px rgba(111, 207, 134, .25); }
.gps-chip.bad::before { background: #ff8a7a; }

/* =========================================================================
   9. Page sections
   ========================================================================= */

/* ---- Hero ---- */
.hero, .hero-banner { position: relative; overflow: hidden; isolation: isolate; background: var(--night-900); color: #fff; min-height: min(84vh, 720px); display: flex; align-items: center; padding-block: clamp(56px, 10vw, 120px); }
.hero .hero-bg, .hero-banner .hero-bg, .hero .hero-photo, .hero .hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; margin: 0; z-index: -2; }
.hero .hero-bg, .hero .hero-photo img { animation: settle 14s var(--ease-out) both; }
.hero .hero-photo figcaption { display: none; }
.hero::after, .hero-banner::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(28, 6, 18, .94) 0%, rgba(28, 6, 18, .74) 46%, rgba(28, 6, 18, .2) 100%), linear-gradient(0deg, rgba(28, 6, 18, .6), transparent 40%); }
@media (max-width: 720px) { .hero::after, .hero-banner::after { background: linear-gradient(180deg, rgba(28, 6, 18, .5) 0%, rgba(28, 6, 18, .92) 62%); } .hero, .hero-banner { min-height: 0; align-items: flex-end; padding-top: 38vh; } }
.hero-inner { position: relative; width: 100%; }
.hero-inner .wrap { display: block; }
.hero-copy { max-width: 38rem; }
.hero h1 { font-size: var(--fs-4xl); line-height: 1.04; color: #fff; margin-bottom: var(--s-3); text-shadow: 0 2px 30px rgba(0, 0, 0, .35); }
.hero .eyebrow { color: var(--gold-400); }
.hero .eyebrow::before { background: var(--gold-400); }
.hero-tagline { font-family: var(--font-display); font-size: clamp(1.15rem, 1rem + .8vw, 1.5rem); color: var(--gold-400); margin: 0 0 var(--s-4); }
.hero-text { font-size: var(--fs-lg); color: #eadcd6; max-width: 34rem; margin-bottom: var(--s-6); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.hero .btn-outline { --btn-bg: rgba(255, 255, 255, .06); --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, .45); --btn-bg-h: rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hero-facts { margin: var(--s-8) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--r-md); background: rgba(28, 6, 18, .35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); overflow: hidden; }
.hero-fact { margin: 0; padding: var(--s-3) var(--s-4); }
.hero-fact + .hero-fact { border-inline-start: 1px solid rgba(255, 255, 255, .16); }
.hero-fact dt { font-size: var(--fs-xs); color: #cdb9b1; margin-bottom: 2px; text-transform: uppercase; letter-spacing: .06em; }
.hero-fact dd { margin: 0; font-weight: 700; font-size: clamp(.9rem, .85rem + .3vw, 1.02rem); color: #fff; }

/* ---- About ---- */
.about-grid { display: grid; gap: var(--s-8); }
@media (min-width: 900px) { .about-grid { grid-template-columns: 1.1fr .9fr; gap: var(--s-12); align-items: center; } }
.about-points { list-style: none; margin: var(--s-6) 0 0; padding: 0; display: grid; gap: var(--s-2); }
.about-points li { position: relative; padding: var(--s-3) var(--s-4) var(--s-3) 46px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.about-points li::before { content: ""; position: absolute; left: 14px; top: 50%; width: 20px; height: 20px; margin-top: -10px; border-radius: 50%; background: var(--brand-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1' fill='none' stroke='%239b2335' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat; }
.about-photo { margin: 0; }
.about-photo img, .img-zoom img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--e-2); }
.about-photo figcaption { margin-top: var(--s-3); font-size: var(--fs-sm); color: var(--ink-500); }
.img-zoom { overflow: hidden; border-radius: var(--r-lg); }
.img-zoom img { transition: transform 1.2s var(--ease-out); }
.img-zoom:hover img { transform: scale(1.04); }

/* ---- Home: competition showcase ---- */
.showcase { display: grid; gap: var(--s-5); }
.showcase-item { display: grid; gap: var(--s-5); padding: clamp(18px, 3vw, 28px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--e-1); align-items: center; transition: box-shadow var(--t-base) ease, transform var(--t-base) var(--ease-out); }
.showcase-item:hover { box-shadow: var(--e-2); }
@media (min-width: 900px) { .showcase-item { grid-template-columns: 64px minmax(0, 1fr) 380px; gap: var(--s-8); } }
.showcase-num { font-family: var(--font-display); font-size: 2.6rem; line-height: 1; color: var(--gold-500); }
.showcase-body h3 { font-size: clamp(1.35rem, 1.2rem + .6vw, 1.65rem); color: var(--brand-800); margin-bottom: var(--s-2); }
.showcase-meta { margin: var(--s-4) 0 0; display: grid; font-size: .95rem; }
.showcase-meta div { display: grid; grid-template-columns: 140px 1fr; gap: var(--s-3); padding: 9px 0; border-top: 1px solid var(--line-soft); }
.showcase-meta dt { color: var(--ink-500); margin: 0; }
.showcase-meta dd { margin: 0; font-weight: 600; }
.showcase-actions { margin-top: var(--s-5); display: flex; flex-wrap: wrap; gap: var(--s-2); }
.showcase-art { margin: 0; order: -1; }
@media (min-width: 900px) { .showcase-art { order: 0; } }
.showcase-art img, .showcase-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-lg); }
@media (max-width: 540px) { .showcase-meta div { grid-template-columns: 1fr; gap: 0; } .showcase-num { font-size: 2rem; } }

/* ---- Steps ---- */
.flow { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); counter-reset: flow; }
@media (min-width: 720px) { .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .flow { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.flow li { position: relative; padding: var(--s-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.flow .n { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: var(--s-4); border-radius: 50%; background: var(--brand-50); color: var(--brand-700); font-family: var(--font-display); font-size: 1.15rem; line-height: 1; }
.flow h4 { font-size: 1.05rem; margin-bottom: 6px; }
.flow p { color: var(--ink-500); font-size: .95rem; margin: 0; }

/* ---- Prizes ---- */
.prize-columns { display: grid; gap: var(--s-5); }
@media (min-width: 900px) { .prize-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.prize-col { padding: var(--s-6); border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--r-xl); background: rgba(255, 255, 255, .03); }
.prize-col h3 { font-size: 1.3rem; margin-bottom: 4px; }
.prize-col .prize-count { font-size: var(--fs-sm); color: #cdb9b1; margin-bottom: var(--s-4); }
.prize-list { list-style: none; margin: 0; padding: 0; }
.prize-list li { display: grid; grid-template-columns: 48px 1fr; gap: var(--s-2); padding: var(--s-3) 0; border-top: 1px solid rgba(255, 255, 255, .12); }
.prize-list .rank { white-space: nowrap; font-family: var(--font-display); color: var(--gold-400); font-size: 1.15rem; line-height: 1.35; }
.prize-list .what { color: #fff; font-weight: 500; }

.prize-showcase-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--s-5); margin: var(--s-5) 0 var(--s-8); }
.prize-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--e-1); transition: box-shadow var(--t-base) ease, transform var(--t-base) var(--ease-out); }
.prize-card:hover { box-shadow: var(--e-2); transform: translateY(-2px); }
.prize-card-media { position: relative; aspect-ratio: 16 / 10; background: var(--surface-2); overflow: hidden; }
.prize-card-media img { width: 100%; height: 100%; object-fit: cover; }
.prize-card-badge { position: absolute; top: 12px; left: 12px; font-size: var(--fs-xs); font-weight: 700; padding: 4px 10px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .94); color: var(--ink-900); box-shadow: var(--e-1); }
.prize-badge-gold { box-shadow: inset 3px 0 0 var(--gold-500), var(--e-1); }
.prize-badge-silver { box-shadow: inset 3px 0 0 #8c8c8c, var(--e-1); }
.prize-badge-bronze { box-shadow: inset 3px 0 0 #a0643a, var(--e-1); }
.prize-badge-honor { box-shadow: inset 3px 0 0 var(--brand-600), var(--e-1); }
.prize-card-body { padding: var(--s-5); display: flex; flex-direction: column; flex-grow: 1; }
.prize-card-rank { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-700); margin-bottom: 4px; }
.prize-card-title { font-family: var(--font-display); font-weight: 400; font-size: 1.22rem; color: var(--brand-800); line-height: 1.3; margin: 0 0 var(--s-2); }
.prize-card-detail { font-size: var(--fs-sm); color: var(--ink-500); margin-top: auto; }

/* ---- Gallery ---- */
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
@media (min-width: 960px) { .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); } }
.gallery-card { margin: 0; }
.gallery-thumb { aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r-lg); background: var(--surface-2); }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.gallery-card:hover .gallery-thumb img { transform: scale(1.05); }
.gallery-tag { display: none; }
.gallery-card figcaption { padding: var(--s-3) 0 0; display: flex; flex-direction: column; gap: 2px; }
.gallery-card figcaption strong { font-size: .98rem; color: var(--ink-900); }
.gallery-card figcaption span { font-size: var(--fs-sm); color: var(--ink-500); }
.band-dark .gallery-card figcaption strong { color: rgba(255, 255, 255, .92); }
@media (max-width: 959px) {
    /* Phones: a swipeable strip instead of a cramped grid. */
    .gallery { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 72%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--s-3); margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
    .gallery-card { scroll-snap-align: start; }
}

/* ---- Category page ---- */
.category-hero-banner { display: grid; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; margin-bottom: var(--s-6); box-shadow: var(--e-1); }
@media (min-width: 820px) { .category-hero-banner { grid-template-columns: 1fr 1fr; } }
.category-hero-media { min-height: 240px; background: var(--surface-2); }
.category-hero-media img { width: 100%; height: 100%; min-height: 240px; object-fit: cover; }
.category-hero-info { padding: clamp(20px, 3vw, 36px); display: flex; flex-direction: column; justify-content: center; }
.category-block { margin-top: var(--s-6); }
.cat-tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; display: flex; flex-direction: column; padding-bottom: var(--s-5); box-shadow: var(--e-1); }
.cat-tile-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface-2); }
.cat-tile-media img { width: 100%; height: 100%; object-fit: cover; }
.cat-num, .cat-index { font-family: var(--font-display); color: var(--gold-500); font-size: 1.4rem; line-height: 1; }
.cat-tile-media .cat-num { position: absolute; top: 12px; left: 12px; background: rgba(255, 255, 255, .94); padding: 6px 10px 4px; border-radius: var(--r-sm); font-size: 1.05rem; color: var(--gold-700); }
.cat-photo-tag { display: none; }
.cat-tile h3 { padding: var(--s-4) var(--s-5) 0; margin: 0; color: var(--brand-800); }
.cat-tile dl { padding: 0 var(--s-5); margin: var(--s-3) 0 var(--s-4); font-size: .93rem; flex: 1 1 auto; }
.cat-tile dl div { padding: 8px 0; border-top: 1px solid var(--line-soft); }
.cat-tile dt { color: var(--ink-500); font-size: var(--fs-sm); }
.cat-tile dd { margin: 2px 0 0; font-weight: 600; }
.cat-tile .btn { margin: 0 var(--s-5); }
.subclass-box { padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); }

/* ---- Participate ---- */
.pt-wrap { max-width: 860px; }
.pt-head { margin-bottom: var(--s-6); }
.pt-head h1 { margin-bottom: var(--s-2); }
.pt-form { display: grid; gap: var(--s-5); }
.pt-section { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: clamp(18px, 3.5vw, 32px); box-shadow: var(--e-1); scroll-margin-top: calc(var(--header-h) + 24px); }
.pt-q { display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-xl); margin-bottom: var(--s-5); }
.pt-q-n { flex: 0 0 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--brand-600); color: #fff; font-family: var(--font-body); font-weight: 700; font-size: var(--fs-sm); }
.pt-sub { display: block; font-weight: 700; font-size: .98rem; margin: var(--s-6) 0 var(--s-3); padding: 0; }
.pt-classes { border: 0; margin: 0; padding: 0; min-width: 0; }
.pt-fields { display: grid; gap: var(--s-5); }
@media (min-width: 680px) { .pt-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pt-fields .field-wide { grid-column: 1 / -1; } }
.pt-fields .field + .field { margin-top: 0; }
.pt-note { display: flex; gap: var(--s-3); align-items: flex-start; margin: 0; padding: var(--s-4) var(--s-5); background: var(--gold-50); border: 1px solid var(--gold-100); border-radius: var(--r-md); color: #5b3600; font-size: .95rem; }
.pt-note::before { content: ""; flex: 0 0 22px; height: 22px; margin-top: 1px; background: var(--gold-700); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3 7.2 5H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-3.2L15 3H9zm3 15a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-2a3 3 0 1 0 0-6 3 3 0 0 0 0 6z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3 7.2 5H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-3.2L15 3H9zm3 15a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-2a3 3 0 1 0 0-6 3 3 0 0 0 0 6z'/%3E%3C/svg%3E") center / contain no-repeat; }
.pt-submit { position: sticky; bottom: 0; z-index: 20; display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; justify-content: space-between; padding: var(--s-4) var(--s-5) calc(var(--s-4) + env(safe-area-inset-bottom, 0px)); margin-inline: calc(var(--gutter) * -1); background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(74, 10, 38, .07); }
@media (min-width: 720px) { .pt-submit { margin-inline: 0; bottom: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-xl); } }
.pt-summary { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.pt-summary-label { font-size: var(--fs-xs); color: var(--ink-500); text-transform: uppercase; letter-spacing: .06em; }
.pt-summary strong { font-size: .98rem; }
@media (max-width: 519px) {
    /* One compact row on phones: what you picked, and the button. */
    .pt-submit { flex-wrap: nowrap; padding-block: var(--s-3) calc(var(--s-3) + env(safe-area-inset-bottom, 0px)); }
    .pt-summary { flex: 1 1 auto; }
    .pt-summary-label { display: none; }
    .pt-summary strong { font-size: var(--fs-sm); line-height: 1.3; }
    .pt-submit .btn { flex: 0 0 auto; min-height: 48px; padding-inline: var(--s-4); font-size: .95rem; }
}
.pt-aside { margin-top: var(--s-6); padding: var(--s-4) var(--s-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); font-size: .95rem; color: var(--ink-700); }

/* ---- Entry page ---- */
.entry-head { display: grid; gap: var(--s-4); margin-bottom: var(--s-6); }
.entry-head h1 { margin: 0; }
.entry-progress { display: grid; gap: var(--s-2); padding: var(--s-4) var(--s-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.entry-progress-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); font-size: var(--fs-sm); color: var(--ink-500); }
.entry-progress-top strong { font-size: 1.2rem; color: var(--ink-900); font-variant-numeric: tabular-nums; }
.entry-section { margin-top: var(--s-8); }
.entry-section > h2 { font-size: var(--fs-xl); display: flex; align-items: center; gap: var(--s-3); }

/* ---- Login ---- */
.auth-shell { display: grid; gap: var(--s-6); max-width: 460px; margin-inline: auto; }
.auth-card { padding: clamp(22px, 4vw, 36px); }
.otp-input { text-align: center; letter-spacing: .5em; font-size: 1.5rem !important; font-weight: 700; font-variant-numeric: tabular-nums; padding-inline: 0 !important; }

/* ---- Results ---- */
.podium { display: grid; gap: var(--s-3); }
.podium-row { display: grid; grid-template-columns: 52px 1fr auto; gap: var(--s-4); align-items: center; padding: var(--s-4) var(--s-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.podium-rank { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; font-family: var(--font-display); font-size: 1.2rem; background: var(--surface-2); color: var(--ink-700); }
.podium-row:nth-child(1) .podium-rank { background: var(--gold-100); color: var(--gold-700); }
.podium-row:nth-child(2) .podium-rank { background: #ece9e4; color: #57514b; }
.podium-row:nth-child(3) .podium-rank { background: #f2e1d3; color: #7c4a26; }

/* =========================================================================
   10. Motion
   ========================================================================= */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes pop-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
@keyframes sheet-in { from { transform: translateY(100%); } }
@keyframes dialog-in { from { opacity: 0; transform: translateY(12px) scale(.97); } }
@keyframes dialog-out { to { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes toast-in { from { opacity: 0; transform: translateY(16px) scale(.96); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px); } }
@keyframes settle { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes flash { from { opacity: .85; } to { opacity: 0; } }
@keyframes shake { 0%, 100% { transform: none; } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(111, 207, 134, .55); } 70% { box-shadow: 0 0 0 8px rgba(111, 207, 134, 0); } 100% { box-shadow: 0 0 0 0 rgba(111, 207, 134, 0); } }

/* Scroll reveal — armed only by js/reveal.js, so content is never hidden without JS. */
.reveal.is-armed { opacity: 0; transform: translateY(18px); }
.reveal.is-in { opacity: 1; transform: none; transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal-stagger.is-armed > * { opacity: 0; transform: translateY(14px); }
.reveal-stagger.is-in > * { opacity: 1; transform: none; transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.reveal-stagger.is-in > :nth-child(2) { transition-delay: 70ms; }
.reveal-stagger.is-in > :nth-child(3) { transition-delay: 140ms; }
.reveal-stagger.is-in > :nth-child(4) { transition-delay: 210ms; }
.reveal-stagger.is-in > :nth-child(5) { transition-delay: 280ms; }
/* Short and never on the h1: the largest text is the page's LCP element. */
.anim-rise { animation: rise .5s var(--ease-out) both; }
.anim-rise:nth-child(n+4) { animation-delay: 90ms; }
.anim-fade { animation: fade-in 1s ease both; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
    .reveal.is-armed, .reveal-stagger.is-armed > * { opacity: 1; transform: none; }
}

/* =========================================================================
   11. Print — the entry receipt and results print cleanly
   ========================================================================= */
@media print {
    .masthead, .site-foot, .dock, .toasts, .crumbs, .btn, .camera-shell, .side { display: none !important; }
    body { background: #fff; }
    .card, .panel, .pt-section { box-shadow: none; border-color: #ccc; }
}

/* =========================================================================
   12. Additions
   ========================================================================= */
.flash { padding-top: var(--s-5); }
.flash .alert:last-child { margin-bottom: 0; }

.stepper-ctl { display: flex; align-items: stretch; gap: 6px; }
.stepper-ctl input { text-align: center; font-weight: 700; min-width: 0; }
.stepper-ctl .btn { flex: 0 0 var(--tap); font-size: 1.2rem; }

/* Lifts and zooms only where a real pointer hovers: on touch screens a tap
   would leave them stuck "on". */
@media (hover: none) {
    .card-link:hover, .prize-card:hover { transform: none; box-shadow: var(--e-1); }
    .photo-tile:hover img, .img-zoom:hover img, .gallery-card:hover .gallery-thumb img { transform: none; }
}

.entry-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.entry-cta .spacer { min-width: 1px; }
.dev-quick { margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px dashed var(--line); }
.dev-quick .grid { gap: var(--s-2); }
.photo-remove { padding: 0 var(--s-3) var(--s-3); }
.entry-head .ref { font-size: .95rem; }
.camera-bar > span:empty { display: block; }

/* Public views (merged from the page conversion) */
.flow :is(h2, h3) { font-family: var(--font-body); font-size: 1.05rem; font-weight: 700; line-height: 1.35; margin: 0 0 6px; color: var(--ink-900); }
.empty h2 { color: var(--ink-900); margin: 0; font-size: var(--fs-lg); font-family: var(--font-body); font-weight: 700; line-height: 1.35; }

/* Touch screens: every control reaches the 44px minimum, compact ones included. */
@media (pointer: coarse) {
    .btn-sm, .tabs a, .tabs button, .side a { min-height: var(--tap); }
    .pager-links a, .pager-links span { min-width: var(--tap); height: var(--tap); }
    .lang-switch button { min-height: var(--tap); padding-inline: 14px; }
}
.podium-row { grid-template-columns: 52px minmax(0, 1fr) auto; }
.podium-row > :last-child:nth-child(2) { grid-column: 2 / -1; }

/* Admin / jury console (merged from the console conversion). .console is on every admin and jury page section. */

/* Section headings: one size below the page h1, dense console rhythm. */
.console-h { font-size: var(--fs-xl); margin: var(--s-8) 0 var(--s-3); display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.console-h .cat-num { font-size: var(--fs-xl); }
.console-grow { flex: 1 1 240px; min-width: 0; }
.console-back { display: flex; width: fit-content; margin-inline-start: calc(var(--s-3) * -1); }
.console-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.console-quote { display: block; margin-top: var(--s-1); font-style: italic; color: var(--ink-700); overflow-wrap: anywhere; }
.console-fieldset { border: 0; margin-inline: 0; padding: 0; min-width: 0; }
.console .grid > .field + .field { margin-top: 0; }
.console-fieldset > legend { padding: 0; }
.console-top { align-items: start; }

/* Stat tiles: dense, two-up on phones, as many as fit on desktop. */
.console .grid:has(> .stat) { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s-3); }
.console .stat { padding: var(--s-4); }

/* Row header cell (dashboard matrix) reads like a body cell, not a column head. */
.console-rowhead { position: static; background: none; color: var(--ink-900); font-size: inherit; font-weight: 600; letter-spacing: 0; text-transform: none; white-space: normal; border-bottom: 1px solid var(--line-soft); }
tbody tr:last-child .console-rowhead { border-bottom: 0; }

/* Toolbar: the submit/clear pair sits on the field baseline. */
.toolbar-actions { display: flex; gap: var(--s-2); flex: 0 0 auto; }

/* Steppers: fixed width so −/input/+ never collapse inside a table or score row. */
.console [data-stepper] { width: 172px; max-width: 100%; }
.console td [data-stepper] { margin-inline-start: auto; }
.console .score-row { grid-template-columns: minmax(0, 1fr) 172px; }

/* Jury assignment checkboxes: compact chips in one row. */
.console-assign .choice { margin: 0; padding: var(--s-2) var(--s-3); align-items: center; min-height: var(--tap); }
.console-assign .hint { margin-top: var(--s-2); }

@media (max-width: 639px) {
    /* Phones: every control is a 44px target. */
    .console .btn-sm, .console .pager-links a, .console .pager-links span { min-height: var(--tap); }
    .console .pager-links a, .console .pager-links span { min-width: var(--tap); }
    .console .table-stack td a:not(.btn) { display: inline-flex; align-items: center; min-height: var(--tap); }
    .toolbar-actions { flex: 1 1 100%; }
    .toolbar-actions .btn { flex: 1; }

    /* Stacked tables: the row header becomes the card title; actions span the card. */
    .table-stack .console-rowhead { display: block; width: 100%; padding: 0 0 var(--s-1); border: 0; }
    .table-stack td.console-act { display: block; padding-top: var(--s-2); text-align: start; }
    .table-stack td.console-act::before { display: none; }
    .table-stack td.console-act > .btn { width: 100%; }
    .table-stack .console-cell { align-items: flex-end; }
    .console .score-row { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
    .console .score-row [data-stepper] { width: 100%; }
}
@media (max-width: 1023px) {
    .console .side a { min-height: var(--tap); }
}

/* Administrator's site-wide notice (/admin/settings) */
.site-notice { background: var(--gold-50); border-bottom: 1px solid var(--gold-100); color: #5b3600; font-size: var(--fs-sm); font-weight: 600; }
.site-notice .wrap { padding-block: 10px; text-align: center; }

/* Reference numbers never break mid-code. */
.console td a[href*="/entries/"], .console td a[href*="/jury/entry/"] { white-space: nowrap; }

/* ---- Date-time picker (ui.js, replaces the native datetime-local) ---- */
.uidate-pop { padding: var(--s-3); min-width: 300px; max-height: none; overflow: visible; }
@media (min-width: 560px) {
    /* Desktop: the picker never clips its own hour/minute lists; they open upward over the calendar. */
    .uidate-time .uiselect-pop { top: auto; bottom: calc(100% + 6px); max-height: 240px; transform-origin: bottom center; }
}
@media (max-width: 559px) {
    /* Phones: the picker is a bottom sheet that scrolls on short screens; the time lists are their own fixed sheets. */
    .uiselect.is-open > .uidate-pop { max-height: 92vh; overflow-y: auto; overscroll-behavior: contain; }
}
.uidate-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin-bottom: var(--s-2); }
.uidate-head strong { font-size: .98rem; }
.uidate-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.uidate-dow { font-size: var(--fs-xs); color: var(--ink-500); font-weight: 600; padding: 4px 0; }
.uidate-day { min-height: 40px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink-900); font-weight: 500; font-variant-numeric: tabular-nums; }
.uidate-day:hover { background: var(--surface-2); }
.uidate-day.is-today { box-shadow: inset 0 0 0 1.5px var(--gold-500); }
.uidate-day.is-picked { background: var(--brand-600); color: #fff; }
.uidate-time { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--line-soft); }
.uidate-time > span:first-child { flex: 1; }
.uidate-time .uiselect { width: 84px; }
.uidate-pop .dialog-actions { margin-top: var(--s-3); }
@media (pointer: coarse) { .uidate-day { min-height: var(--tap); } }

/* ---- The diya in the logo breathes (restored from v1) ---- */
@keyframes flicker {
    0%, 100% { transform: scale(1, 1) rotate(-1deg); opacity: 1; }
    25% { transform: scale(.96, 1.05) rotate(1.5deg); opacity: .9; }
    50% { transform: scale(1.03, .97) rotate(-.5deg); opacity: 1; }
    75% { transform: scale(.98, 1.03) rotate(1deg); opacity: .94; }
}

/* Admin tab strip on phones: swipe, no raw scrollbar; the faded edge says there is more. */
@media (max-width: 1023px) {
    .side { scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
    .side::-webkit-scrollbar { display: none; }
}

/* Touch screens (phones and tablets): the last controls under 44px.
   Found by an automated sweep of every page at 360/390/768/1024 px. */
@media (pointer: coarse) {
    .brand { min-height: var(--tap); }
    .crumbs a { display: inline-flex; align-items: center; min-height: var(--tap); padding-inline: 2px; }
    .crumbs .wrap { padding-block: 0; }
    .head-link { min-height: var(--tap); align-items: center; }
    td > a:not(.btn), td .console-cell > a:not(.btn) { display: inline-flex; align-items: center; min-height: var(--tap); }
    .admin-grid .side a { min-height: var(--tap); }
}

/* Tablets (portrait and landscape): beside the console sidebar a 7-column
   table no longer fits, so admin and jury tables become a two-column grid
   of cards, the same labelled rows phones get. */
@media (min-width: 640px) and (max-width: 1199px) {
    .console .table-stack thead { display: none; }
    .console .table-stack, .console .table-stack tbody, .console .table-stack td { display: block; width: 100%; }
    .console .table-stack tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .console .table-stack tr { display: block; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line-soft); }
    .console .table-stack tr:nth-child(odd) { border-inline-end: 1px solid var(--line-soft); }
    .console .table-stack td { border: 0; padding: 4px 0; display: flex; gap: var(--s-3); justify-content: space-between; text-align: end; }
    .console .table-stack td::before { content: attr(data-label); color: var(--ink-500); font-size: var(--fs-sm); text-align: start; }
    .console .table-stack .console-rowhead { display: block; width: 100%; padding: 0 0 var(--s-1); border: 0; }
    .console .table-stack td.console-act { display: block; padding-top: var(--s-2); text-align: start; }
    .console .table-stack td.console-act::before { display: none; }
    .console .table-stack td.console-act > .btn { width: 100%; }
    .console .table-stack .console-cell { align-items: flex-end; }
    .console .table-wrap:has(.table-stack) { overflow: visible; }
}

/* =========================================================================
   13. Jaipur — art, pattern and motion layer
   The Pink City at Diwali: jharokha arches, jaali lattice, marigold torans,
   sky lanterns, a skyline whose windows glow, rangoli and diyas. Every loop
   here is decorative and stops under prefers-reduced-motion.
   ========================================================================= */
:root {
    --pink-600: #c93a76;     /* ornament pink, from the ULB portal family */
    --pink-400: #e889ae;
    --pink-100: #fadbe7;
    --pink-50:  #fdf0f5;
    --jaali: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23bf175c' stroke-width='1.3' stroke-opacity='.75' stroke-linejoin='round'%3E%3Cpath d='M30 9L36.5 23.5L51 30L36.5 36.5L30 51L23.5 36.5L9 30L23.5 23.5Z'/%3E%3Crect x='18' y='18' width='24' height='24' transform='rotate%2845 30 30%29'/%3E%3Crect x='18.5' y='18.5' width='23' height='23'/%3E%3Ccircle cx='30' cy='30' r='4.5'/%3E%3Cpath d='M30 0V9M30 51V60M0 30H9M51 30H60'/%3E%3Cpath d='M0 0L12 12M60 0L48 12M0 60L12 48M60 60L48 48'/%3E%3Cpath d='M0 8a8 8 0 0 0 8 -8M52 0a8 8 0 0 0 8 8M60 52a8 8 0 0 0 -8 8M8 60a8 8 0 0 0 -8 -8'/%3E%3C/g%3E%3C/svg%3E");
    --jaali-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23eba832' stroke-width='1.3' stroke-opacity='.7' stroke-linejoin='round'%3E%3Cpath d='M30 9L36.5 23.5L51 30L36.5 36.5L30 51L23.5 36.5L9 30L23.5 23.5Z'/%3E%3Crect x='18' y='18' width='24' height='24' transform='rotate%2845 30 30%29'/%3E%3Crect x='18.5' y='18.5' width='23' height='23'/%3E%3Ccircle cx='30' cy='30' r='4.5'/%3E%3Cpath d='M30 0V9M30 51V60M0 30H9M51 30H60'/%3E%3Cpath d='M0 0L12 12M60 0L48 12M0 60L12 48M60 60L48 48'/%3E%3Cpath d='M0 8a8 8 0 0 0 8 -8M52 0a8 8 0 0 0 8 8M60 52a8 8 0 0 0 -8 8M8 60a8 8 0 0 0 -8 -8'/%3E%3C/g%3E%3C/svg%3E");
    --arch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120' preserveAspectRatio='none'%3E%3Cpath d='M0 120V46C0 30 9 21 21 17c3-8 11-12 18-11 3-5 8-6 11-6s8 1 11 6c7-1 15 3 18 11 12 4 21 13 21 29v74z'/%3E%3C/svg%3E");
}

/* ---- Icons ---- */
.icon { display: inline-block; flex: 0 0 auto; vertical-align: middle; }
.icon-badge { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: linear-gradient(145deg, var(--gold-50), var(--pink-50)); color: var(--brand-700); box-shadow: inset 0 0 0 1px rgba(191, 23, 92, .18); }
.icon-badge .icon { width: 26px; height: 26px; }
.band-dark .icon-badge, .band-maroon .icon-badge { background: rgba(255, 255, 255, .08); color: var(--gold-400); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.icon-flame { transform-box: fill-box; transform-origin: 50% 100%; }
.icon-badge:hover .icon-flame, .card-link:hover .icon-flame { animation: flicker 1.6s ease-in-out infinite; }

/* ---- Jaali lattice bands ---- */
.band-jaali { position: relative; isolation: isolate; }
.band-jaali::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--jaali) center / 60px 60px; opacity: .13; /* light, and faded further where text sits: the lattice lives at the edges */ -webkit-mask-image: radial-gradient(120% 90% at 50% 50%, rgba(0,0,0,.35) 0%, #000 75%), linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); mask-image: radial-gradient(120% 90% at 50% 50%, rgba(0,0,0,.35) 0%, #000 75%), linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); -webkit-mask-composite: source-in; mask-composite: intersect; }
.band-dark.band-jaali::before, .band-maroon.band-jaali::before { background-image: var(--jaali-gold); opacity: .12; }
.band-pink { background: linear-gradient(180deg, var(--pink-50), var(--paper)); }

/* ---- Jharokha arch frame for photographs ---- */
.jp-arch-frame { position: relative; padding: 10px; }
.jp-arch-frame::before { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, var(--gold-400), var(--pink-600) 60%, var(--brand-700)); -webkit-mask: var(--arch) center / 100% 100% no-repeat; mask: var(--arch) center / 100% 100% no-repeat; }
.jp-arch-frame img { position: relative; display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 5 / 6; box-shadow: none; -webkit-mask: var(--arch) center / 100% 100% no-repeat; mask: var(--arch) center / 100% 100% no-repeat; border-radius: 0; }

/* ---- Toran: marigold and mango-leaf garland ---- */
.jp-toran { position: relative; height: 46px; overflow: hidden; pointer-events: none; }
.jp-toran > span {
    position: absolute; inset: 0 -40px; transform-origin: 50% 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='46' viewBox='0 0 80 46'%3E%3Cpath d='M0 4 Q40 16 80 4' fill='none' stroke='%237a4a1e' stroke-width='1.6'/%3E%3Cpath d='M20 9 q-5 10 0 22 q5-12 0-22z' fill='%231f6f3c'/%3E%3Cpath d='M20 12 v16' stroke='%2393c47d' stroke-width='.8'/%3E%3Ccircle cx='40' cy='16' r='6.5' fill='%23f39c12'/%3E%3Ccircle cx='40' cy='16' r='4' fill='%23f7c948'/%3E%3Ccircle cx='40' cy='27' r='6' fill='%23e8590c'/%3E%3Ccircle cx='40' cy='27' r='3.6' fill='%23f39c12'/%3E%3Ccircle cx='40' cy='37' r='5' fill='%23f39c12'/%3E%3Ccircle cx='40' cy='37' r='2.8' fill='%23f7c948'/%3E%3Cpath d='M60 9 q-5 10 0 22 q5-12 0-22z' fill='%23277a45'/%3E%3Cpath d='M60 12 v16' stroke='%2393c47d' stroke-width='.8'/%3E%3C/svg%3E") repeat-x 0 0 / 80px 46px;
    animation: toran-sway 7s ease-in-out infinite;
}
@keyframes toran-sway { 0%, 100% { transform: rotate(-.35deg) translateX(0); } 50% { transform: rotate(.35deg) translateX(6px); } }

/* ---- Rangoli mandala ---- */
.jp-rangoli { display: block; width: 100%; height: auto; }
.jp-rangoli.is-turning .jp-rangoli-spin { transform-origin: center; transform-box: fill-box; animation: rangoli-turn 90s linear infinite; }
@keyframes rangoli-turn { to { transform: rotate(360deg); } }
.jp-rangoli-deco { position: absolute; z-index: -1; width: clamp(180px, 26vw, 340px); opacity: .9; filter: drop-shadow(0 12px 30px rgba(216, 58, 82, .18)); }

/* ---- Diya row ---- */
.jp-diya-row { display: flex; justify-content: center; align-items: flex-end; gap: clamp(10px, 3vw, 28px); margin: 0 auto var(--s-6); }
.jp-diya { width: clamp(34px, 6vw, 52px); height: auto; overflow: visible; }
.jp-diya .jp-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: flicker 2.4s ease-in-out infinite; animation-delay: calc(var(--i) * -.37s); }
.jp-diya:nth-child(even) { transform: translateY(-6px); }

/* ---- Skyline ---- */
.jp-skyline { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: clamp(90px, 16vw, 200px); z-index: 0; pointer-events: none; }
.jp-sky-far { fill: #3a1027; opacity: .85; stroke: #3a1027; }
.jp-sky-near, .jp-sky-near path { fill: #1c0612; stroke: #1c0612; }
.jp-sky-lights rect { fill: #ffcf6b; opacity: .9; filter: drop-shadow(0 0 3px #ffb347); animation: window-glow 4.5s ease-in-out infinite; animation-delay: calc(var(--i) * -.55s); }
@keyframes window-glow { 0%, 100% { opacity: .95; } 40% { opacity: .55; } 55% { opacity: 1; } 70% { opacity: .7; } }
.site-foot { margin-top: clamp(70px, 10vw, 130px); }
.site-foot .jp-skyline { position: absolute; top: auto; bottom: 100%; height: clamp(70px, 10vw, 130px); }
.site-foot .jp-sky-near, .site-foot .jp-sky-near path { fill: var(--night-800); stroke: var(--night-800); }
.site-foot .jp-sky-far { fill: var(--night-700); stroke: var(--night-700); }
.site-foot::before { display: none; }   /* the skyline now crowns the footer */

/* ---- Sky lanterns ---- */
.jp-lanterns { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.jp-lantern { position: absolute; bottom: -80px; left: var(--x); width: calc(34px * var(--s)); opacity: 0; filter: drop-shadow(0 0 12px rgba(255, 170, 70, .75)); animation: lantern-rise var(--dur) linear infinite; animation-delay: var(--delay); }
.jp-lantern svg { width: 100%; height: auto; display: block; animation: lantern-sway 4s ease-in-out infinite alternate; }
@keyframes lantern-rise {
    0% { transform: translateY(0); opacity: 0; }
    8% { opacity: .95; }
    80% { opacity: .85; }
    100% { transform: translateY(-115vh); opacity: 0; }
}
@keyframes lantern-sway { from { transform: translateX(-10px) rotate(-4deg); } to { transform: translateX(10px) rotate(4deg); } }
.jp-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---- Hero composition ---- */
.hero-jaipur { min-height: min(92vh, 820px); padding-bottom: clamp(120px, 18vw, 220px); }
.hero-jaipur .hero-inner { z-index: 1; }
.hero-jaipur::after { background:
    radial-gradient(120% 80% at 20% 40%, rgba(28, 6, 18, .88) 0%, rgba(28, 6, 18, .55) 55%, rgba(28, 6, 18, .1) 100%),
    linear-gradient(0deg, rgba(28, 6, 18, .85), transparent 45%); }
@media (max-width: 720px) { .hero-jaipur { padding-top: 34vh; } .hero-jaipur::after { background: linear-gradient(180deg, rgba(28, 6, 18, .35) 0%, rgba(28, 6, 18, .9) 55%); } }
.hero-sparkles { position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image:
        radial-gradient(2px 2px at 12% 22%, #fff6d8, transparent), radial-gradient(1.5px 1.5px at 28% 12%, #ffe3a1, transparent),
        radial-gradient(2px 2px at 46% 30%, #fff6d8, transparent), radial-gradient(1.5px 1.5px at 63% 16%, #ffd27a, transparent),
        radial-gradient(2px 2px at 78% 26%, #fff6d8, transparent), radial-gradient(1.5px 1.5px at 90% 10%, #ffe3a1, transparent),
        radial-gradient(1.5px 1.5px at 35% 44%, #ffd27a, transparent), radial-gradient(2px 2px at 85% 46%, #fff6d8, transparent);
    animation: sparkle 5s ease-in-out infinite alternate; }
@keyframes sparkle { from { opacity: .35; } to { opacity: 1; } }
.hero-jaipur > .jp-toran { position: absolute; top: 0; left: 0; right: 0; z-index: 1; }
.jp-swash { display: block; width: min(420px, 90%); height: 22px; margin: -2px 0 var(--s-4); overflow: visible; }
.jp-swash path { fill: none; stroke: url(#jp-gold); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 520; stroke-dashoffset: 520; animation: swash-draw 1.6s .4s var(--ease-out) forwards; }
@keyframes swash-draw { to { stroke-dashoffset: 0; } }
.hero-badges { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); }
.hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); color: #f3e7e2; font-size: var(--fs-sm); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hero-badge .icon { width: 18px; height: 18px; color: var(--gold-400); }

/* ---- Section heading ornament: a small rangoli between rules ---- */
.jp-ornament { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: var(--s-3); color: var(--pink-600); }
.jp-ornament::before, .jp-ornament::after { content: ""; height: 1px; width: 48px; background: linear-gradient(90deg, transparent, currentColor); }
.jp-ornament::after { transform: scaleX(-1); }
.jp-ornament .icon { width: 22px; height: 22px; }
.section-head:not(.center) .jp-ornament { justify-content: flex-start; }
.section-head:not(.center) .jp-ornament::before { display: none; }
.band-dark .jp-ornament, .band-maroon .jp-ornament { color: var(--gold-400); }

/* ---- Showcase cards get their category icon and a sweeping top rule ---- */
.showcase-item { position: relative; overflow: hidden; }
.showcase-item::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--pink-600), var(--gold-500), var(--brand-600)); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease-out); }
.showcase-item:hover::before, .showcase-item.is-in::before, .showcase.is-in .showcase-item::before { transform: scaleX(1); }
.showcase-head { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-2); }
.showcase-head h3 { margin: 0; }
.showcase-art.jp-arch-frame { max-width: 360px; justify-self: center; width: 100%; }

/* ---- Process steps: joined by a dotted path ---- */
.flow-jaipur { position: relative; }
@media (min-width: 1040px) { .flow-jaipur::before { content: ""; position: absolute; left: 8%; right: 8%; top: 50px; border-top: 2px dashed rgba(191, 23, 92, .35); } }
.flow-jaipur li { text-align: center; background: var(--surface); }
.flow-jaipur .icon-badge { margin: 0 auto var(--s-3); position: relative; z-index: 1; width: 60px; height: 60px; border-radius: 50%; }
.flow-step { display: block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pink-600); margin-bottom: 4px; }

/* ---- Prize columns ---- */
.prize-col { position: relative; overflow: hidden; }
.prize-col .icon-badge { margin-bottom: var(--s-3); }
.prize-col::after { content: ""; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, rgba(235, 168, 50, .25), transparent 70%); pointer-events: none; }

[data-count] { font-variant-numeric: tabular-nums; }

/* ---- Buttons: a light sweep on hover, like brass catching a lamp ---- */
.btn-primary, .btn-primary:hover, .btn-gold, .btn-gold:hover {
    background-image: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .28) 48%, transparent 62%);
    background-size: 260% 100%; background-repeat: no-repeat; background-position: 130% 0;
    transition: background-position .9s var(--ease-out), background-color var(--t-fast) ease, transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) ease;
}
@media (hover: hover) { .btn-primary:hover, .btn-gold:hover { background-position: -30% 0; } }

/* (The rangoli watermark behind page titles was removed at the client's request.) */
main > section:first-of-type { position: relative; overflow: clip; }

/* ---- Final call to action ---- */
.cta-jaipur { position: relative; text-align: center; padding-top: clamp(64px, 9vw, 104px); }
.cta-jaipur > .jp-toran { position: absolute; top: 5px; left: 0; right: 0; }

@media (prefers-reduced-motion: reduce) {
    .jp-toran > span, .jp-lantern, .jp-lantern svg, .jp-sky-lights rect, .jp-diya .jp-flame, .hero-sparkles,
    .jp-rangoli.is-turning .jp-rangoli-spin { animation: none !important; }
    .jp-lantern { opacity: .8; bottom: calc(30% + var(--x) * 0.4); }
    .jp-swash path { stroke-dashoffset: 0; animation: none; }
}

/* About photo: arch frame with a turning rangoli rising behind it */
.about-photo-jaipur { position: relative; isolation: isolate; max-width: 440px; margin-inline: auto; }
.about-photo-jaipur .jp-rangoli-deco { right: -70px; top: -60px; }
.about-photo-jaipur figcaption { text-align: center; }
@media (max-width: 640px) { .about-photo-jaipur .jp-rangoli-deco { right: -40px; top: -40px; width: 160px; } }
/* Gallery: arched tops, like a row of jharokhas */
.gallery-thumb { border-radius: 999px 999px var(--r-lg) var(--r-lg); box-shadow: inset 0 0 0 1px rgba(191, 23, 92, .2); }
@media (max-width: 720px) { .jp-lantern:nth-child(-n+4) { display: none; } .jp-lantern { opacity: .75; } }
.opt-title .icon { width: 20px; height: 20px; margin: -3px 6px 0 0; color: var(--pink-600); }
.opt:has(input:checked) .opt-title .icon { color: var(--brand-600); }
@media (min-width: 960px) { .gallery-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .gallery-6 .gallery-thumb { aspect-ratio: 4 / 3.4; } }

/* Remove a photograph before final submission: a round ✕ on the tile corner */
.photo-remove { position: absolute; top: 8px; right: 8px; z-index: 2; padding: 0; margin: 0; }
.photo-x { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: rgba(28, 6, 18, .72); color: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .3), inset 0 0 0 1.5px rgba(255, 255, 255, .7); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: background-color var(--t-fast) ease, transform var(--t-fast) var(--ease-out); }
.photo-x:hover { background: var(--brand-600); transform: scale(1.06); }
.photo-x:active { transform: scale(.94); }
.photo-x:focus-visible { outline: 3px solid var(--gold-400); outline-offset: 2px; }
@media (pointer: coarse) { .photo-x { width: 44px; height: 44px; } .photo-remove { top: 6px; right: 6px; } }

/* Flame and glow keyframes, shared by every diya */
@keyframes dh-breathe { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes dh-floor { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
@keyframes dh-flick-a {
    0%, 100% { transform: scale(1, 1) skewX(0deg); }
    20% { transform: scale(.97, 1.04) skewX(-2deg); }
    45% { transform: scale(1.03, .96) skewX(2.5deg); }
    70% { transform: scale(.98, 1.06) skewX(-1deg); }
}
@keyframes dh-flick-b {
    0%, 100% { transform: scale(1, 1) skewX(0deg); }
    30% { transform: scale(1.04, .95) skewX(2deg); }
    60% { transform: scale(.96, 1.07) skewX(-2.5deg); }
}
@keyframes dh-flick-c { 0%, 100% { transform: scaleY(1); opacity: 1; } 50% { transform: scaleY(1.1); opacity: .9; } }
@keyframes dh-sheen { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(96px); } }
@keyframes dh-smoke { from { stroke-dashoffset: 200; opacity: .9; } to { stroke-dashoffset: 0; opacity: 0; } }
@keyframes dh-ember {
    0% { opacity: 0; transform: translate(0, 0); }
    15% { opacity: 1; }
    100% { opacity: 0; transform: translate(calc((var(--e) - 1.5) * 10px), -70px); }
}

/* The small diyas in the toran row and divider pick up the same three-layer glow */
.jp-diya .jp-flame { filter: drop-shadow(0 0 6px rgba(255, 170, 60, .8)); }

/* ---- Lifelike diya (components/jaipur/diya-real), placed inside content ---- */
.diya-real { display: inline-block; line-height: 0; pointer-events: none; }
.diya-real svg { display: block; width: 100%; height: auto; overflow: visible; }
.diya-xs { width: 54px; } .diya-sm { width: 86px; } .diya-md { width: 150px; } .diya-lg { width: clamp(170px, 20vw, 230px); }
.dr-halo { transform-box: fill-box; transform-origin: center; mix-blend-mode: screen; animation: dh-breathe 3.4s ease-in-out infinite; }
.dr-pool, .dr-catch { animation: dh-floor 3.4s ease-in-out infinite; }
.dr-flame > path { transform-box: fill-box; transform-origin: 50% 100%; }
.dr-bloom { animation: dh-flick-a 2.1s ease-in-out infinite; }
.dr-body { animation: dh-flick-a 1.9s ease-in-out infinite; animation-delay: -.4s; }
.dr-inner { animation: dh-flick-b 1.35s ease-in-out infinite; }
.dr-core { animation: dh-flick-c .95s ease-in-out infinite; }
.dr-sheen { animation: dh-sheen 6s ease-in-out infinite; }
.dr-embers circle { transform-box: fill-box; opacity: 0; animation: dh-ember 3.8s ease-out infinite; animation-delay: calc(var(--e) * 1.2s); }
.diya-xs .dr-embers, .diya-sm .dr-embers { display: none; }
@media (prefers-reduced-motion: reduce) { .diya-real * { animation: none !important; } }

/* Placements */
.diya-trio { display: flex; justify-content: center; align-items: flex-end; gap: clamp(8px, 3vw, 28px); margin: 0 auto var(--s-6); }
.diya-trio .diya-real:not(.diya-lg) { margin-bottom: 4px; }
.about-photo-jaipur .diya-real { position: absolute; z-index: 2; left: -26px; bottom: 38px; }
.entry-cta-diya { flex: 0 0 auto; margin: -6px 0 -10px -4px; }
.empty .diya-real { margin: -8px auto 4px; }
.section-diya { display: flex; justify-content: center; margin: var(--s-8) 0 0; }
.foot-brand .diya-real { float: left; margin: -6px 10px 0 -6px; }
.card-diya { position: relative; overflow: visible; }
.card-diya > .diya-real { position: absolute; right: 18px; top: -40px; }
@media (max-width: 640px) {
    .about-photo-jaipur .diya-real { left: -6px; bottom: 30px; width: 110px; }
    .card-diya > .diya-real { width: 64px; top: -30px; right: 10px; }
}

/* A lit diya closes every public page, sitting just above the skyline */
.page-end-diya { display: flex; justify-content: center; margin: var(--s-8) 0 calc(clamp(70px, 10vw, 130px) * -1 + 6px); position: relative; z-index: 2; pointer-events: none; }
.page-end-diya + .site-foot { margin-top: 0; padding-top: calc(var(--s-12) + clamp(70px, 10vw, 130px)); }
.page-end-diya + .site-foot .jp-skyline { bottom: auto; top: 0; }
.pt-aside-diya { display: flex; align-items: center; gap: var(--s-3); }
.pt-aside-diya .diya-real { flex: 0 0 auto; margin: -8px 0; }

/* =========================================================================
   14. Header v3: a slim top strip plus one clean main bar
   ========================================================================= */
.topbar { position: relative; z-index: 101; background: var(--night-800); color: #f1dfe8; font-size: var(--fs-xs); }
.topbar::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--toran); }
.topbar .wrap { display: flex; align-items: center; gap: var(--s-3); min-height: 38px; padding-top: 3px; }
.topbar-org { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; letter-spacing: .02em; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-org .icon { color: var(--gold-400); flex: 0 0 auto; }
.topbar-sep { color: #b98ea3; }
.topbar-year { color: #d9bccb; font-weight: 500; }
.topbar-lang { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .08); }
.topbar-lang button { border: 0; background: transparent; color: #e8d3de; font-size: var(--fs-xs); font-weight: 600; padding: 0 12px; min-height: 26px; border-radius: var(--r-pill); }
.topbar-lang button:hover { color: #fff; }
.topbar-lang button.is-active { background: #fff; color: var(--brand-700); }
.topbar-auth { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-weight: 600; text-decoration: none; padding: 0 4px; min-height: 30px; }
.topbar-auth:hover { color: var(--gold-400); }
form.topbar-auth { padding: 0; }
form.topbar-auth button { border: 0; background: transparent; color: #fff; font-weight: 600; font-size: var(--fs-xs); padding: 0 4px; min-height: 30px; }
@media (max-width: 559px) { .topbar-sep, .topbar-year { display: none; } .topbar-auth { display: none; } }
@media (pointer: coarse) { .topbar-lang button, .topbar-auth, form.topbar-auth button { min-height: 36px; } }

/* Main bar: the toran strip now lives on the top strip */
.masthead::before { display: none; }
.masthead-main .wrap { min-height: 72px; gap: var(--s-5); }
.brand-text strong { font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem); }
.brand-text span { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--pink-600); }
.nav-desktop { gap: 0; }
.nav-desktop a { font-size: .97rem; padding: 0 12px; min-height: 44px; color: var(--ink-900); }
.nav-desktop a:first-child { display: inline-flex; }   /* Home is no longer in the bar, so nothing to hide */
.nav-desktop a.is-active::after { bottom: 4px; height: 3px; }
.head-btn-main { display: inline-flex; min-height: 44px; padding: 0 var(--s-5); border-radius: var(--r-pill); }
.head-link, .head-actions .lang-switch { display: none !important; }
.menu-btn { width: auto; gap: 8px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-pill); margin: 0; }
.menu-btn-label { font-size: var(--fs-sm); font-weight: 600; }
@media (min-width: 1100px) { .nav-desktop { display: flex; } .menu-btn { display: none; } }
@media (max-width: 1099px) { .nav-desktop { display: none; } .menu-btn { display: inline-flex; } }
@media (max-width: 419px) { .head-btn-main { display: inline-flex !important; padding: 0 14px; font-size: .9rem; } .menu-btn-label { display: none; } .brand-text span { display: none; } }
@media (min-width: 1100px) and (max-width: 1239px) { .nav-desktop a { padding: 0 9px; font-size: .93rem; } }

/* =========================================================================
   15. Skyline v2 (components/jaipur/skyline): three depths, lit windows,
   string lights. Sits above the footer.
   ========================================================================= */
.jp-skyline .jp-sky-far { fill: #5a1d3f; opacity: .55; stroke: none; }
.jp-skyline .jp-sky-wall { stroke: #5a1d3f; stroke-width: 3; opacity: .55; stroke-linejoin: miter; }
.jp-skyline .jp-sky-mid { fill: #3d1129; stroke: none; }
.jp-skyline .jp-sky-near, .jp-skyline .jp-sky-near path { fill: var(--night-800); stroke: none; }
.jp-skyline .jp-sky-near path[d*="v-16l14"] { stroke: var(--night-800); stroke-width: 2; }
.jp-skyline .jp-sky-lights path { fill: #ffcf6b; stroke: none; opacity: .92; animation: window-glow 5s ease-in-out infinite; animation-delay: calc(var(--i) * -.45s); }
.jp-sky-strings path { stroke: #7a3a5a; stroke-width: 1; opacity: .8; }
.jp-sky-strings circle { fill: #ffd27a; animation: bulb-twinkle 2.6s ease-in-out infinite; animation-delay: calc(var(--i) * -.29s); }
.jp-sky-strings circle.bulb-1 { fill: #ff8fb7; }
.jp-sky-strings circle.bulb-2 { fill: #9fe6c8; }
@keyframes bulb-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.site-foot .jp-skyline { height: clamp(120px, 13vw, 190px); }
.page-end-diya { margin-bottom: calc(clamp(120px, 13vw, 190px) * -1 + 10px); }
.page-end-diya + .site-foot { padding-top: calc(var(--s-12) + clamp(120px, 13vw, 190px)); }
.site-foot { margin-top: clamp(120px, 13vw, 190px); }
@media (prefers-reduced-motion: reduce) { .jp-sky-strings circle { animation: none !important; } }

/* The hero keeps its real photograph clean: no drawn skyline there */
.hero-jaipur { padding-bottom: clamp(56px, 8vw, 96px); }
.hero-jaipur::after { background:
    radial-gradient(120% 80% at 20% 40%, rgba(28, 6, 18, .86) 0%, rgba(28, 6, 18, .5) 55%, rgba(28, 6, 18, .12) 100%),
    linear-gradient(0deg, rgba(28, 6, 18, .7), transparent 35%); }

/* Competition cards: no empty number column; the number rides with the title */
.showcase-num { display: none; }
.showcase-no { display: block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pink-600); margin-bottom: 2px; }
@media (min-width: 900px) { .showcase-item { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: var(--s-10); padding: clamp(24px, 3vw, 40px); } }
.showcase-body p.muted { max-width: 60ch; }
@media (max-width: 899px) { .showcase-item { padding: var(--s-4); gap: var(--s-4); } .showcase-art.jp-arch-frame { max-width: 300px; } .showcase-actions .btn { flex: 1 1 auto; } }

/* Phones: header fits without truncation; steps as compact rows */
@media (max-width: 599px) {
    .masthead-main .wrap { min-height: 62px; gap: var(--s-2); }
    .brand { gap: 8px; }
    .brand-text strong { font-size: 1.08rem; overflow: visible; }
    .brand-text span { display: none; }
    .menu-btn { width: var(--tap); padding: 0; justify-content: center; }
    .menu-btn-label { display: none; }
    .head-btn-main { padding: 0 14px !important; font-size: .9rem; min-height: 40px; }
    .flow-jaipur li { display: grid; grid-template-columns: 52px 1fr; column-gap: var(--s-3); text-align: start; padding: var(--s-4); align-items: start; }
    .flow-jaipur .icon-badge { grid-row: 1 / span 3; width: 48px; height: 48px; margin: 0; }
    .flow-jaipur h3 { margin-bottom: 2px; }
    .showcase-art.jp-arch-frame { max-width: 250px; }
    .about-photo-jaipur { max-width: 320px; }
}
@media (max-width: 359px) { .head-btn-main { display: none !important; } }
@media (max-width: 599px) { .brand-text strong { white-space: normal; line-height: 1.05; max-width: 9.5em; } }


/* =========================================================================
   16. Rangoli bloom: the slowly turning flower, used throughout
   ========================================================================= */
:root { --flower: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-100 -100 200 200'%3E%3Cg fill='%23bf175c'%3E%3Cpath d='M0-96C14-78 14-58 0-44-14-58-14-78 0-96Z'/%3E%3Cpath transform='rotate(45)' d='M0-96C14-78 14-58 0-44-14-58-14-78 0-96Z'/%3E%3Cpath transform='rotate(90)' d='M0-96C14-78 14-58 0-44-14-58-14-78 0-96Z'/%3E%3Cpath transform='rotate(135)' d='M0-96C14-78 14-58 0-44-14-58-14-78 0-96Z'/%3E%3Cpath transform='rotate(180)' d='M0-96C14-78 14-58 0-44-14-58-14-78 0-96Z'/%3E%3Cpath transform='rotate(225)' d='M0-96C14-78 14-58 0-44-14-58-14-78 0-96Z'/%3E%3Cpath transform='rotate(270)' d='M0-96C14-78 14-58 0-44-14-58-14-78 0-96Z'/%3E%3Cpath transform='rotate(315)' d='M0-96C14-78 14-58 0-44-14-58-14-78 0-96Z'/%3E%3C/g%3E%3Ccircle r='30' fill='none' stroke='%23d68a00' stroke-width='4' stroke-dasharray='3 7'/%3E%3Ccircle r='14' fill='%23d68a00'/%3E%3C/svg%3E"); --flower-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-100 -100 200 200'%3E%3Cg fill='%23eba832'%3E%3Cpath d='M0-96C14-78 14-58 0-44-14-58-14-78 0-96Z'/%3E%3Cpath transform='rotate(45)' d='M0-96C14-78 14-58 0-44-14-58-14-78 0-96Z'/%3E%3Cpath transform='rotate(90)' d='M0-96C14-78 14-58 0-44-14-58-14-78 0-96Z'/%3E%3Cpath transform='rotate(135)' d='M0-96C14-78 14-58 0-44-14-58-14-78 0-96Z'/%3E%3Cpath transform='rotate(180)' d='M0-96C14-78 14-58 0-44-14-58-14-78 0-96Z'/%3E%3Cpath transform='rotate(225)' d='M0-96C14-78 14-58 0-44-14-58-14-78 0-96Z'/%3E%3Cpath transform='rotate(270)' d='M0-96C14-78 14-58 0-44-14-58-14-78 0-96Z'/%3E%3Cpath transform='rotate(315)' d='M0-96C14-78 14-58 0-44-14-58-14-78 0-96Z'/%3E%3C/g%3E%3Ccircle r='30' fill='none' stroke='%23ffd27a' stroke-width='4' stroke-dasharray='3 7'/%3E%3Ccircle r='14' fill='%23ffd27a'/%3E%3C/svg%3E"); }
@keyframes bloom-turn { to { transform: rotate(360deg); } }

/* Inner-page headers (back by request) */
.page-title, .pt-head { position: relative; isolation: isolate; }
.page-title::after, .pt-head::after {
    content: ""; position: absolute; z-index: -1; top: -34px; right: -20px; width: 190px; height: 190px;
    background: var(--flower) center / contain no-repeat; opacity: .16; pointer-events: none;
    animation: bloom-turn 120s linear infinite;
}
.page-title.center::after { right: 50%; margin-right: -95px; }
.console .page-title::after { display: none; }

/* Bands: one bloom drifting in a corner, alternating sides */
.band, .section-sm { position: relative; isolation: isolate; overflow: clip; }   /* clip, not hidden: keeps sticky bars working */
.band::after, .section-sm::before {
    content: ""; position: absolute; z-index: -1; width: clamp(160px, 22vw, 300px); aspect-ratio: 1; pointer-events: none;
    background: var(--flower) center / contain no-repeat; opacity: .12; animation: bloom-turn 150s linear infinite;
}
.band::after { right: -70px; bottom: -70px; }
.band:nth-of-type(even)::after { right: auto; left: -70px; top: -60px; bottom: auto; animation-direction: reverse; }
.section-sm::before { left: -80px; bottom: 40px; opacity: .09; }
.band-dark::after, .band-maroon::after { background-image: var(--flower-gold); opacity: .14; }

/* Section headings get a small bloom beside the ornament */
.section-head { position: relative; isolation: isolate; }
.section-head::before {
    content: ""; position: absolute; z-index: -1; top: -46px; left: -54px; width: 130px; height: 130px; pointer-events: none;
    background: var(--flower) center / contain no-repeat; opacity: .13; animation: bloom-turn 100s linear infinite;
}
.section-head.center::before { left: 50%; margin-left: -65px; top: -58px; }
.band-dark .section-head::before, .band-maroon .section-head::before { background-image: var(--flower-gold); opacity: .18; }

/* Cards and forms: a bloom peeking from the top corner */
.auth-card, .pt-section, .prize-col, .empty { position: relative; isolation: isolate; overflow: hidden; }
.auth-card::after, .pt-section::after, .prize-col::before, .empty::after {
    content: ""; position: absolute; z-index: -1; top: -60px; right: -60px; width: 150px; height: 150px; pointer-events: none;
    background: var(--flower) center / contain no-repeat; opacity: .12; animation: bloom-turn 90s linear infinite;
}
.prize-col::before { background-image: var(--flower-gold); opacity: .16; }
.empty::after { top: auto; bottom: -50px; right: auto; left: -50px; }

/* Footer: two gold blooms in the dark */
.site-foot { isolation: isolate; }
.site-foot > .wrap { position: relative; }
.site-foot > .wrap::before, .site-foot > .wrap::after {
    content: ""; position: absolute; z-index: -1; width: 220px; height: 220px; pointer-events: none;
    background: var(--flower-gold) center / contain no-repeat; opacity: .09; animation: bloom-turn 160s linear infinite;
}
.site-foot > .wrap::before { left: -90px; bottom: -40px; }
.site-foot > .wrap::after { right: -80px; top: 10px; animation-direction: reverse; }

@media (max-width: 640px) {
    .page-title::after, .pt-head::after { width: 130px; height: 130px; top: -20px; right: -30px; }
    .section-head::before { width: 96px; height: 96px; }
}
@media (prefers-reduced-motion: reduce) {
    .page-title::after, .pt-head::after, .band::after, .section-sm::before, .section-head::before,
    .auth-card::after, .pt-section::after, .prize-col::before, .empty::after, .site-foot > .wrap::before, .site-foot > .wrap::after { animation: none !important; }
}

/* =========================================================================
   17. Title lockup: DIWALI over KHUSHIYON WALI, both lines the same width
   ========================================================================= */
.title-lockup { display: inline-block; line-height: 0; }
.title-lockup svg { display: block; width: 100%; height: auto; overflow: visible; }
.title-lockup text { font-family: var(--font-display); fill: currentColor; }
.title-lockup .tl-1 { font-size: 36px; }
.title-lockup .tl-2 { font-size: 92px; }
.title-lockup.is-hi .tl-1 { font-size: 40px; }
.title-lockup.is-hi .tl-2 { font-size: 80px; }
.brand-lockup { width: 128px; color: var(--brand-700); }
.drawer-lockup { width: 120px; color: var(--brand-700); }
.foot-lockup { width: 200px; color: #fff; margin-bottom: var(--s-3); }
.hero-lockup-h1 { margin-bottom: var(--s-2); }
.hero-lockup { width: min(520px, 86vw); color: #fff; filter: drop-shadow(0 2px 24px rgba(0, 0, 0, .35)); }
.hero-lockup .tl-2 { fill: url(#jp-gold); }
@media (max-width: 599px) { .brand-lockup { width: 104px; } .hero-lockup { width: min(340px, 84vw); } }

/* Client notes, 21 Oct: lockup font, step fill, jury location, submitted popup */
.title-lockup text { font-family: 'Amita', var(--font-display); }
.title-lockup .tl-1 { font-size: 88px; }
.title-lockup .tl-2 { font-size: 36px; letter-spacing: .02em; }
.title-lockup.is-hi .tl-1 { font-size: 82px; }
.title-lockup.is-hi .tl-2 { font-size: 40px; }
.hero-lockup .tl-1 { fill: url(#jp-gold); }
.hero-lockup .tl-2 { fill: #fff; }
.pt-steps li.is-current::before { background: linear-gradient(90deg, var(--brand-600) var(--fill, 33%), var(--line) var(--fill, 33%)); transition: background .4s var(--ease-out); }
.photo-loc { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 6px; color: var(--ink-700); }
.photo-loc .icon { color: var(--brand-600); }
.photo-loc a { font-weight: 600; }
.submitted-card { text-align: center; }
.submitted-card .diya-real { margin: -10px auto 4px; }
.submitted-card .ref { margin: 6px auto 0; }
.submitted-card .dialog-actions { justify-content: center; }

/* Sheets and dialogs never depend on an animation finishing to be usable:
   they rise a short way and fade in, so a stalled animation (battery saver,
   background tab) still leaves every button on screen and tappable. */
@keyframes sheet-in { from { transform: translateY(24px); opacity: .35; } }
.dialog-scrim { z-index: 0; }
.dialog-card { z-index: 1; }

/* 18. Title lockup: the lit flame on the last "i" */
.tl-flame .tl-glow { fill: #ffb43a; opacity: .28; }
.tl-flame .tl-fire { fill: #f6a325; }
.tl-flame .tl-core { fill: #fff0bd; }
.tl-flame { filter: drop-shadow(0 0 2.5px rgba(255, 170, 60, .75)); }
.tl-flame .tl-fire, .tl-flame .tl-core { transform-box: fill-box; transform-origin: 50% 100%; animation: tl-flicker 2.6s ease-in-out infinite; }
.tl-flame .tl-core { animation-duration: 1.9s; animation-delay: -.7s; }
@keyframes tl-flicker { 0%, 100% { transform: scale(1, 1); } 35% { transform: scale(.94, 1.06) rotate(-1.5deg); } 70% { transform: scale(1.03, .96) rotate(1.2deg); } }
@media (prefers-reduced-motion: reduce) { .tl-flame .tl-fire, .tl-flame .tl-core { animation: none; } }

/* 19. Entry types on a category page: sample photographs with a short description */
.type-grid { display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); margin-top: var(--s-4); }
@media (min-width: 720px) { .type-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.type-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--e-1); display: flex; flex-direction: column; }
.type-media { display: grid; gap: 2px; aspect-ratio: 16 / 9; background: var(--line); }
.type-media-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.type-media-3 { grid-template-columns: 1.4fr 1fr; grid-template-rows: 1fr 1fr; }
.type-media-3 img:first-child { grid-row: 1 / span 2; }
.type-media img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 0; }
.type-body { padding: var(--s-4) var(--s-5) var(--s-5); }
.type-body h3 { color: var(--brand-800); margin-bottom: var(--s-2); }

/* ── Hero fit-to-viewport (homepage .hero-jaipur) ─────────────────────
   Keeps the hero within one screen on desktop/laptop/tablet landscape.
   Scoped to >=721px so the mobile layout is untouched. */
@media (min-width: 721px) {
  .hero.hero-jaipur { min-height: 100vh; padding-block: 40px 32px; align-items: center; }
  .hero.hero-jaipur .hero-inner { padding-block: 0; }
  .hero.hero-jaipur .title-lockup.hero-lockup { width: min(300px, 64vw); }
  .hero.hero-jaipur .hero-copy h1 { margin: 0 0 10px; }
  .hero.hero-jaipur .eyebrow { margin-bottom: 6px; }
  .hero.hero-jaipur .hero-tagline { margin-bottom: 8px; }
  .hero.hero-jaipur .hero-text { margin-bottom: 0; }
  .hero.hero-jaipur .hero-actions { margin-top: 14px; }
  .hero.hero-jaipur .hero-badges { margin-top: 12px; }
  .hero.hero-jaipur .hero-facts { margin-top: 14px; }
}

/* 20. Participate: the competition chooser popup (a modal once participate.js adds .is-enhanced; inline list without it) */
.pt-form.is-enhanced [data-details] { display: none; }
.pt-form.is-enhanced.has-choice [data-details] { display: block; }
.pt-chosen { display: none; }
.pt-form.is-enhanced.has-choice .pt-chosen { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 14px 18px; margin-bottom: 22px; border: 1px solid #e9e0e4; border-radius: 14px; background: #fbf6f8; }
.pt-chosen-label { display: block; font-size: .8rem; color: #8a7680; }
.pt-chosen-main strong { font-size: 1.05rem; }

.pt-form.is-enhanced .pt-modal { display: none; }
.pt-form.is-enhanced .pt-modal.is-open { display: flex; position: fixed; inset: 0; z-index: 200; align-items: center; justify-content: center; padding: 3vh 14px; overflow: auto; -webkit-overflow-scrolling: touch; background: rgba(26, 10, 28, .62); }
.pt-form.is-enhanced .pt-modal.is-open .pt-modal-card { background: #fff; color: #2a1d22; width: 100%; max-width: 940px; margin: auto; max-height: 94vh; border-radius: 18px; padding: 16px 18px; box-shadow: 0 24px 70px rgba(0, 0, 0, .4); display: flex; flex-direction: column; }
.pt-modal-head { flex: 0 0 auto; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pt-modal .pt-q { margin: 0 0 10px; }
.pt-modal-close { background: none; border: 0; font-size: 28px; line-height: 1; cursor: pointer; color: #8a7680; padding: 2px 8px; border-radius: 8px; }
.pt-modal-close:hover { background: rgba(0, 0, 0, .06); }

/* Only the cards scroll; the heading and the Ward card stay in view. */
.pt-modal .opt-grid { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: stretch; padding: 2px 4px; margin: 0 -4px; }
.pt-modal .opt { display: flex; flex-direction: column; height: 100%; padding: 12px; }
.pt-modal .opt-media { position: relative; overflow: hidden; height: 150px; border-radius: 10px; margin: 0 0 10px; background: #f2eaee; }
.pt-modal .opt-media-track { display: flex; height: 100%; transition: transform .6s ease; }
.pt-modal .opt-media-track img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; display: block; }
.pt-modal .opt-head { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; }
.pt-modal .opt-head .opt-title { margin: 0; }
.pt-modal .opt-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0 0 10px; }
.pt-modal .opt-meta { margin-top: auto; align-self: flex-start; }
.pt-modal .opt-ward { flex: 0 0 auto; display: block; margin-top: 12px; }

/* Phone: full-screen sheet with compact horizontal cards (thumb + text). */
@media (max-width: 720px) {
    .pt-form.is-enhanced .pt-modal.is-open { padding: 0; align-items: stretch; }
    .pt-form.is-enhanced .pt-modal.is-open .pt-modal-card { max-height: 100dvh; height: 100dvh; max-width: 100%; border-radius: 0; margin: 0; padding: 14px 14px calc(14px + env(safe-area-inset-bottom)); }
    .pt-modal .pt-q { font-size: 1.15rem; }
    .pt-modal .opt-grid { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 10px; }
    .pt-modal .opt { display: grid; grid-template-columns: 124px 1fr; column-gap: 12px; align-items: center; height: auto; padding: 10px; }
    .pt-modal .opt-media { grid-column: 1; grid-row: 1 / span 3; height: 96px; margin: 0; align-self: center; }
    .pt-modal .opt-head { grid-column: 2; margin: 0; }
    .pt-modal .opt-desc { grid-column: 2; margin: 2px 0 0; -webkit-line-clamp: 2; }
    .pt-modal .opt-meta { grid-column: 2; margin: 5px 0 0; align-self: start; }
    .pt-modal .opt-ward { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) { .pt-modal .opt-media-track { transition: none; } }

/* 21. Prize cards sharing one photograph show a different crop of it */
.prize-crop-1 .prize-card-media img { object-position: 12% 30%; transform: scale(1.22); }
.prize-crop-2 .prize-card-media img { object-position: 88% 72%; transform: scale(1.14); }

/* 22. Notice pop-up (photo added / removed) */
.notice-card { text-align: center; max-width: 420px; }
.notice-card .notice-mark { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto var(--s-3); border-radius: 50%; background: radial-gradient(circle at 50% 40%, #fff6dc, #f6d58b); box-shadow: 0 0 0 6px rgba(246, 163, 37, .14), 0 10px 26px rgba(191, 23, 92, .18); }
.notice-card.is-removed .notice-mark { background: radial-gradient(circle at 50% 40%, #fdebf2, #f3bfd3); }
.notice-card .notice-mark svg { width: 30px; height: 30px; fill: none; stroke: var(--brand-700, #9c1149); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.notice-card .dialog-actions { justify-content: center; }
.notice-card .dialog-actions .btn { min-width: 140px; }

/* 23. Jury: the seven competitions as tabs; photos shown whole (never cropped) */
.jury-tabs { display: flex; gap: var(--s-2); overflow-x: auto; padding-bottom: var(--s-2); scrollbar-width: thin; }
.jury-tab { flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; padding: 0 var(--s-4); border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); color: var(--ink-800, #3a2a30); font-weight: 600; font-size: var(--fs-sm); text-decoration: none !important; white-space: nowrap; transition: background var(--t-base) ease, border-color var(--t-base) ease; }
.jury-tab:hover { border-color: #d9b6c5; background: #fdf5f8; }
.jury-tab.is-active { background: var(--brand-600, #bf175c); border-color: var(--brand-600, #bf175c); color: #fff; }
.jury-tab-n { min-width: 24px; padding: 1px 7px; border-radius: var(--r-pill); background: rgba(0, 0, 0, .07); font-size: var(--fs-xs); text-align: center; }
.jury-tab.is-active .jury-tab-n { background: rgba(255, 255, 255, .22); }
.photo-grid-judge .photo-tile img { object-fit: contain; background: #1d1216; }
.photo-grid-judge .photo-tile:hover img { transform: none; }

/* 24. Nagar Nigam Jaipur branding: emblem in the header, footer and hero; faint watermark behind inner pages */
.topbar-emblem { width: 16px; height: auto; opacity: .95; }
.nn-mark { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; color: #123c78; }
.nn-mark img { width: 40px; height: auto; display: block; }
.nn-mark-text { display: flex; flex-direction: column; line-height: 1.05; font-size: .78rem; }
.nn-mark-text strong { font-size: .86rem; color: #123c78; }
.nn-mark-text span { color: #5b6b86; letter-spacing: .04em; }
.nn-divider { margin-inline: 4px; width: 1px; height: 38px; background: linear-gradient(transparent, #d9c4cd 20%, #d9c4cd 80%, transparent); flex: 0 0 auto; }
@media (max-width: 1100px) { .nn-mark-text { display: none; } }
.drawer-emblem { width: 34px; height: auto; margin-right: 6px; }

.foot-nn { display: flex; align-items: center; gap: 12px; margin-bottom: var(--s-4); }
.foot-nn img { width: 54px; height: auto; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .3)); }
.foot-nn span { display: flex; flex-direction: column; line-height: 1.2; }
.foot-nn strong { font-size: 1.05rem; color: #fff; }
.foot-nn .tiny { opacity: .7; text-transform: uppercase; letter-spacing: .08em; }

.hero-nigam { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 var(--s-3); padding: 5px 12px 5px 6px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); color: #fff; font-size: var(--fs-sm); font-weight: 600; backdrop-filter: blur(4px); }
.hero-nigam img { width: 22px; height: auto; }

.has-nn-watermark::after { content: ""; position: fixed; right: 0; bottom: 4vh; width: min(46vw, 460px); aspect-ratio: 490 / 512; background: url("../images/brand/nn-logo-mono.png") no-repeat center / contain; opacity: .045; pointer-events: none; z-index: 0; }
@media (max-width: 720px) { .has-nn-watermark::after { width: 62vw; opacity: .04; } }
@media print { .has-nn-watermark::after { display: none; } }

.nn-band { position: relative; overflow: clip; }
.nn-showcase { display: grid; gap: var(--s-6); align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 860px) { .nn-showcase { grid-template-columns: 300px minmax(0, 1fr); gap: var(--s-8); } }
.nn-showcase-emblem { position: relative; display: grid; place-items: center; aspect-ratio: 1; max-width: 300px; margin: 0 auto; width: 100%; }
.nn-showcase-emblem img { position: relative; width: 58%; height: auto; filter: drop-shadow(0 10px 24px rgba(18, 60, 120, .18)); }
.nn-showcase-emblem .nn-rangoli { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .55; }
.nn-showcase-copy h2 { margin-bottom: var(--s-3); }
.nn-stats { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6); margin: var(--s-5) 0; }
.nn-stats div { min-width: 90px; }
.nn-stats dt { font-family: 'Amita', var(--font-display); font-size: 2.2rem; line-height: 1; color: var(--brand-600, #bf175c); }
.nn-stats dd { margin: 4px 0 0; font-size: var(--fs-sm); color: var(--ink-700); text-transform: uppercase; letter-spacing: .06em; }

/* 25. Rangoli imprints: soft, full-colour rangoli pressed into page corners */
.band-white, .band-ivory { background-image: url("../images/brand/rangoli-soft.svg"), url("../images/brand/rangoli-soft.svg"); background-repeat: no-repeat; background-position: -120px 70px, calc(100% + 130px) calc(100% - 40px); background-size: 270px, 310px; }
.band-pink { background-image: url("../images/brand/rangoli-soft.svg"), url("../images/brand/rangoli-soft.svg"), linear-gradient(180deg, var(--pink-50), var(--paper)); background-repeat: no-repeat; background-position: calc(100% + 110px) 40px, -130px calc(100% - 30px), 0 0; background-size: 250px, 290px, auto; }
.section-sm { background-image: url("../images/brand/rangoli-soft.svg"), url("../images/brand/rangoli-soft.svg"); background-repeat: no-repeat; background-position: calc(100% + 150px) 110px, -160px calc(100% - 50px); background-size: 330px, 290px; }
.section-sm.console { background-image: none; }
@media (max-width: 720px) {
    .band-white, .band-ivory, .section-sm { background-size: 170px, 190px; background-position: -80px 40px, calc(100% + 80px) calc(100% - 20px); }
    .band-pink { background-size: 170px, 190px, auto; }
}

/* The chooser lives inside .section-sm, whose isolation (for the rangoli bloom) would trap the
   popup beneath the sticky header and the footer. Lift it while the popup is open. */
.section-sm:has(.pt-modal.is-open) { isolation: auto; }
.pt-form.is-enhanced .pt-modal.is-open { z-index: 400; }

/* Footer decorations (skyline edges, rangoli blooms) must never widen the page on phones. */
.site-foot { overflow-x: clip; }

/* 27. Location gate: covers the camera until a precise location is on */
.camera-stage { position: relative; }
.loc-gate { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-2); padding: var(--s-5); text-align: center; color: #fff; background: radial-gradient(120% 90% at 50% 20%, rgba(110, 15, 60, .92), rgba(26, 10, 28, .96)); }
.loc-gate[hidden] { display: none; }
.loc-gate h3 { color: #fff; margin: var(--s-2) 0 0; font-size: 1.2rem; }
.loc-gate p { margin: 0; max-width: 34ch; color: #f3e6ea; font-size: var(--fs-sm); }
.loc-gate .loc-gate-help { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); border-radius: 10px; padding: 8px 12px; color: #fff; }
.loc-gate .btn { margin-top: var(--s-3); min-width: 180px; }
.loc-gate-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: rgba(246, 193, 91, .18); box-shadow: 0 0 0 8px rgba(246, 193, 91, .08); color: #f6c15b; }
.loc-gate[data-state="finding"] .loc-gate-icon, .loc-gate[data-state="weak"] .loc-gate-icon { animation: loc-pulse 1.6s ease-in-out infinite; }
@keyframes loc-pulse { 0%, 100% { box-shadow: 0 0 0 8px rgba(246, 193, 91, .08); } 50% { box-shadow: 0 0 0 16px rgba(246, 193, 91, .02); } }
@media (prefers-reduced-motion: reduce) { .loc-gate-icon { animation: none !important; } }

/* 28. Ward councillor hint on the sign-in page */
.ward-hint { display: flex; gap: 10px; align-items: flex-start; margin-bottom: var(--s-5); padding: 12px 14px; border-radius: 12px; background: #fff7e6; border: 1px solid #f0d39c; color: #5a3a0a; font-size: var(--fs-sm); line-height: 1.5; }
.ward-hint svg { flex: 0 0 auto; color: #b07a16; margin-top: 2px; }
.ward-hint.is-highlighted { background: #fdeef4; border-color: var(--brand-600, #bf175c); color: #4a0b28; box-shadow: 0 0 0 3px rgba(191, 23, 92, .12); }

/* 29. Nagar Nigam emblem recoloured to the site's palette (maroon on light, gold on dark), and its medallion */
.nn-mark-text strong { color: #7a0d3a; }
.nn-mark-text span { color: #9a6a1c; }
.hero-nigam { background: rgba(26, 8, 20, .45); border-color: rgba(242, 190, 85, .55); color: #fbe7b5; }
.foot-nn img { filter: none; }
.nn-showcase-emblem .nn-rangoli { opacity: .9; }
.nn-medallion { position: relative; z-index: 1; display: grid; place-items: center; width: 62%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 38%, #fffdf8, #fbf1df); box-shadow: 0 0 0 3px #f2be55, 0 0 0 9px #fffaf2, 0 0 0 10px rgba(156, 17, 73, .25), 0 18px 40px rgba(110, 15, 60, .18); }
.nn-medallion::after { content: ""; position: absolute; inset: 8px; border-radius: 50%; border: 1px dashed rgba(156, 17, 73, .3); }
.nn-medallion img { width: 66%; height: auto; filter: none; }

/* 30. Title lockup and display accents in Amita: a calligraphic Devanagari/Latin face with a hand-lettered, Rajasthani feel */
.title-lockup .tl-1, .title-lockup .tl-2 { font-weight: 700; }

/* 32. Competition chooser v4: three plain groups of photo tiles. One photo per tile, a warm shade
   so different photos read as one set, the name on the photo, the whole tile is the button. */
.pt-form.is-enhanced .pt-modal.is-open .pt-modal-card.cx-card { padding: clamp(18px, 2.4vw, 30px); background: #fffaf3; border: 1px solid #ecd8b4; border-radius: 20px; box-shadow: 0 30px 80px rgba(20, 4, 14, .5); max-width: 1000px; }
.pt-modal-card.cx-card::before { display: none; }
.cx-head { margin-bottom: clamp(14px, 2vw, 22px); }
.cx-kicker { margin: 0 0 2px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #a5762a; }
.cx-title-main { margin: 0; font-family: 'Amita', var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.15; color: #6e0f3c; }
.cx-sub { margin: 4px 0 0; color: var(--ink-700, #5a4a50); font-size: var(--fs-sm); }

.cx-groups { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); padding: 2px; }
.cx-group { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cx-group-label { margin: 0; padding-bottom: 6px; border-bottom: 1px solid #ecd8b4; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #6e0f3c; }

.cx-tile { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; cursor: pointer; background: #2a1020; box-shadow: 0 6px 18px rgba(60, 10, 35, .14); transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) ease; isolation: isolate; }
.cx-tile:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(60, 10, 35, .22); }
.cx-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; filter: saturate(1.05) contrast(1.03); transition: transform .6s var(--ease-out); }
.cx-tile:hover .cx-img { transform: scale(1.05); }
.cx-tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(40, 8, 26, .05) 30%, rgba(40, 8, 26, .55) 62%, rgba(32, 6, 20, .92) 100%); }
.cx-radio { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.cx-text { position: absolute; left: 14px; right: 14px; bottom: 12px; display: flex; flex-direction: column; gap: 2px; color: #fff; }
.cx-name { font-size: 1.05rem; line-height: 1.2; text-shadow: 0 1px 8px rgba(0, 0, 0, .4); }
.cx-desc { font-size: .78rem; line-height: 1.35; color: rgba(255, 255, 255, .86); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cx-limit { position: absolute; top: 10px; left: 10px; padding: 3px 9px; border-radius: 999px; background: rgba(255, 250, 240, .92); color: #6e0f3c; font-size: .72rem; font-weight: 700; }
.cx-check { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .85); background: rgba(0, 0, 0, .18); transition: background var(--t-base) ease, transform var(--t-base) var(--ease-out); }
.cx-check svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.cx-tile:has(.cx-radio:checked) { box-shadow: 0 0 0 3px #bf175c, 0 14px 30px rgba(60, 10, 35, .25); }
.cx-tile:has(.cx-radio:checked) .cx-check { background: #bf175c; border-color: #bf175c; transform: scale(1.08); }
.cx-tile:has(.cx-radio:checked) .cx-check svg { opacity: 1; }
.cx-tile:has(.cx-radio:focus-visible) { outline: 3px solid #f2be55; outline-offset: 3px; }

.cx-ward { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; margin-top: clamp(12px, 1.6vw, 18px); padding: 12px 16px; border-radius: 14px; border: 1px solid #ecd8b4; background: #fff; color: var(--ink-800, #3a2a30); text-decoration: none !important; font-size: var(--fs-sm); line-height: 1.4; transition: border-color var(--t-base) ease, background var(--t-base) ease; }
.cx-ward:hover { border-color: #bf175c; background: #fdf3f7; }
.cx-ward svg { flex: 0 0 auto; color: #9c1149; }
.cx-ward strong { color: #6e0f3c; margin-right: 4px; }
.cx-ward-arrow { margin-left: auto; color: #9c1149; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .cx-tile, .cx-img { transition: none; } .cx-tile:hover .cx-img { transform: none; } }

@media (max-width: 860px) {
    .cx-groups { grid-template-columns: minmax(0, 1fr); }
    .cx-tile { aspect-ratio: auto; height: 116px; }
    .cx-tile::after { background: linear-gradient(90deg, rgba(32, 6, 20, .9) 0%, rgba(32, 6, 20, .6) 55%, rgba(32, 6, 20, .08) 100%); }
    .cx-text { left: 14px; right: 46px; }
}
@media (max-width: 720px) {
    .pt-form.is-enhanced .pt-modal.is-open .pt-modal-card.cx-card { border-radius: 0; border: 0; box-shadow: none; }
}

/* 33. Header pairing: the Corporation's mark and the title read as one line-up, centred on one
   axis. The emblem and the divider span the lettering, and the title's own flame replaces the
   extra diya. */
.masthead-main .brand-lockup { width: 116px; }
.masthead-main .brand-lockup.is-hi { width: 96px; }   /* the Devanagari lockup is taller for its width */
.nn-mark { gap: 10px; }
.nn-mark img { width: auto; height: 52px; }
.nn-mark-text { line-height: 22px; }
.nn-mark-text strong { font-size: 18px; line-height: 22px; }
.nn-mark-text span { font-size: 15px; line-height: 22px; }
.nn-divider { height: 52px; margin-inline: 0; }
@media (max-width: 599px) { .masthead-main .brand-lockup { width: 104px; } .masthead-main .brand-lockup.is-hi { width: 88px; } .nn-mark img, .nn-divider { height: 44px; } }
@media (max-width: 420px) { .masthead-main .brand-lockup { width: 96px; } .masthead-main .brand-lockup.is-hi { width: 80px; } .nn-mark img, .nn-divider { height: 36px; } }

/* 34. Home hero: the six competitions as tags under the title */
.hero-cats { list-style: none; margin: 0 0 var(--s-4); padding: 0; display: flex; flex-wrap: wrap; gap: 8px; max-width: 640px; }
.hero-cats a { display: inline-flex; align-items: center; min-height: 34px; padding: 5px 14px; border-radius: var(--r-pill); border: 1px solid rgba(242, 190, 85, .55); background: rgba(40, 8, 26, .45); color: #fbe9c6; font-size: var(--fs-sm); font-weight: 600; line-height: 1.25; text-decoration: none !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background var(--t-base) ease, border-color var(--t-base) ease, color var(--t-base) ease; }
.hero-cats a:hover { background: rgba(242, 190, 85, .2); border-color: #f2be55; color: #fff; }
.hero-cats a:focus-visible { outline: 3px solid #f2be55; outline-offset: 2px; }
@media (max-width: 599px) { .hero-cats { gap: 6px; } .hero-cats a { min-height: 32px; padding: 4px 11px; font-size: .8rem; } }

/* 35. Chooser tiles slide through 3-4 photos of their competition */
.cx-media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.cx-media .opt-media-track { display: flex; height: 100%; transition: transform .9s var(--ease-out); }
.cx-media .cx-img { position: static; flex: 0 0 100%; width: 100%; height: 100%; z-index: auto; }
@media (prefers-reduced-motion: reduce) { .cx-media .opt-media-track { transition: none; } }

/* 36. Coordinates as a Google Maps link */
.map-link { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; white-space: nowrap; }
.map-link .icon { flex: 0 0 auto; }

/* 37. Home: all seven competitions as cards (ward first, wide; then the six public ones) */
.comp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.comp-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--e-1); transition: box-shadow var(--t-base) ease, transform var(--t-base) var(--ease-out); }
.comp-card:hover { box-shadow: var(--e-2); transform: translateY(-2px); }
.comp-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #2a1020; }
.comp-img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .9s ease; }
.comp-img.is-on { opacity: 1; }
.comp-dots { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 0 4px; display: flex; justify-content: center; background: linear-gradient(to top, rgba(0, 0, 0, .4), transparent); }
.comp-dots button { width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.comp-dots button::before { content: ""; width: 8px; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .6); box-shadow: 0 0 3px rgba(0, 0, 0, .5); transition: width .3s ease, background .3s ease; }
.comp-dots button[aria-current="true"]::before { width: 18px; background: #fff; }
.comp-dots button:focus-visible { outline: 2px solid #fff; outline-offset: -4px; border-radius: 6px; }
.comp-body { display: flex; flex-direction: column; gap: 8px; padding: clamp(16px, 2vw, 22px); flex: 1 1 auto; }
.comp-kicker { margin: 0; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pink-600); }
.comp-body h3 { margin: 0; font-size: 1.2rem; line-height: 1.25; }
.comp-desc { margin: 0; color: var(--ink-600, #5a4a50); font-size: var(--fs-sm); }
.comp-facts { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-800, #3a2a30); }
.comp-facts li { display: inline-flex; align-items: center; gap: 6px; }
.comp-facts .icon { color: var(--pink-600); }
.comp-prize { margin: 0; font-size: var(--fs-sm); color: var(--ink-700, #4a3a40); }
.comp-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 8px; }
.comp-card-wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
.comp-card-wide .comp-media { height: 100%; aspect-ratio: auto; min-height: 240px; }
.comp-card-wide .comp-body { justify-content: center; }
@media (max-width: 960px) { .comp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
    .comp-grid { grid-template-columns: minmax(0, 1fr); }
    .comp-card-wide { display: flex; }
    .comp-card-wide .comp-media { height: auto; aspect-ratio: 16 / 10; min-height: 0; }
}
@media (prefers-reduced-motion: reduce) { .comp-card, .comp-img { transition: none; } .comp-card:hover { transform: none; } }
/* The scroll reveal's slow transition would otherwise override the card's quick hover */
.comp-card.reveal.is-in { transition: opacity .7s var(--ease-out), box-shadow var(--t-base) ease, transform var(--t-base) var(--ease-out); }

/* 38. Entry types on the category pages: one photo per card, sliding (ui.js); the hero line larger now the title is hidden */
.type-media { display: block; position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: #2a1020; }
.type-media .opt-media-track { display: flex; height: 100%; transition: transform .9s var(--ease-out); }
.type-media .opt-media-track img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; display: block; }
@media (prefers-reduced-motion: reduce) { .type-media .opt-media-track { transition: none; } }
.hero-tagline { font-size: clamp(1.6rem, 1.1rem + 1.9vw, 2.6rem); line-height: 1.2; max-width: 22ch; }

/* 39. Chooser: the close cross, always shown */
.cx-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.cx-card .pt-modal-close { flex: 0 0 auto; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border-radius: 50%; border: 1px solid #ecd8b4; background: #fff; color: #6e0f3c; font-size: 28px; line-height: 1; }
.cx-card .pt-modal-close:hover { background: #fdf3f7; border-color: #bf175c; }
.cx-card .pt-modal-close:focus-visible { outline: 3px solid #f2be55; outline-offset: 2px; }

/* 40. Hero line always on two lines (each line kept whole; the size scales with the screen) */
.hero-tagline { max-width: none; font-size: clamp(1.15rem, 5.1vw, 2.6rem); }
.hero-tagline span { display: block; white-space: nowrap; }
/* Rules page: who may enter and how photos are taken, on each competition card */
.comp-rules { margin: 2px 0 0; display: grid; gap: 6px; font-size: var(--fs-sm); }
.comp-rules div { display: grid; gap: 1px; }
.comp-rules dt { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-500, #7a6a70); }
.comp-rules dd { margin: 0; color: var(--ink-800, #3a2a30); }

/* 41. Gallery picker for wards and markets (beside the portal camera) */
.gallery-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 var(--s-4); }
.gallery-pick .btn { position: relative; cursor: pointer; }
.gallery-pick .btn:focus-within { outline: 3px solid #f2be55; outline-offset: 2px; }
.gallery-pick .btn.is-busy { opacity: .6; pointer-events: none; }

/* 42. Competitions page: a jump list, then each competition with its sliding photos, facts and prizes */
.comp-jump { display: flex; flex-wrap: wrap; gap: 8px; }
.comp-jump a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 14px 6px 8px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); color: var(--ink-800, #3a2a30); font-size: var(--fs-sm); font-weight: 600; text-decoration: none !important; }
.comp-jump a:hover { border-color: var(--pink-600); color: var(--brand-800); }
.comp-jump span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--brand-800, #6e0f3c); color: #fff; font-size: .8rem; }
.comp-detail { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(18px, 3vw, 36px); align-items: start; padding: clamp(16px, 2.5vw, 28px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--e-1); scroll-margin-top: 96px; }
.comp-detail-media { border-radius: var(--r-lg); }
.comp-detail-body h2 { margin: 2px 0 8px; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); }
.comp-detail-body > p { margin: 0 0 12px; color: var(--ink-700, #4a3a40); }
.comp-rules-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; margin-bottom: 14px; }
.comp-prize-head { margin: 4px 0 6px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-500, #7a6a70); }
.comp-prize-list { margin: 0 0 14px; padding-left: 1.2em; display: grid; gap: 4px; font-weight: 600; color: var(--ink-800, #3a2a30); }
.prize-tiles { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.prize-tile { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-sm); color: var(--ink-800, #3a2a30); }
.prize-tile img, .prize-tile-ph { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; margin-bottom: 6px; background: #f3e9e2; }
.prize-tile-ph { display: grid; place-items: center; color: var(--ink-500, #7a6a70); }
.prize-tile-rank { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-500, #7a6a70); }
@media (max-width: 420px) { .prize-tiles { gap: 8px; } .prize-tile { font-size: var(--fs-xs); } }
@media (max-width: 800px) { .comp-detail { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .comp-rules-grid { grid-template-columns: minmax(0, 1fr); } }

/* 43. Home part 1: Diwali celebration by Jaipur Nagar Nigam (drone show, fireworks, diyas, rangoli) */
.celebration-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.8vw, 22px); }
.celebration-card { position: relative; margin: 0; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 3 / 4; background: #1a0a12; box-shadow: 0 14px 34px rgba(0, 0, 0, .35); isolation: isolate; }
.celebration-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .8s var(--ease-out); }
.celebration-card:hover img { transform: scale(1.05); }
.celebration-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20, 4, 14, 0) 38%, rgba(20, 4, 14, .75) 72%, rgba(20, 4, 14, .95) 100%); }
.celebration-card figcaption { position: absolute; left: 16px; right: 16px; bottom: 16px; display: grid; gap: 4px; color: #fff; }
.celebration-card strong { font-family: var(--font-display); font-size: clamp(1.2rem, 1rem + .6vw, 1.5rem); color: #fbe9c6; }
.celebration-card figcaption > span:last-child { font-size: var(--fs-sm); color: rgba(255, 255, 255, .85); line-height: 1.4; }
.celebration-no { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(242, 190, 85, .7); color: #f2be55; font-weight: 700; font-size: .85rem; }
@media (max-width: 960px) { .celebration-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .celebration-card { aspect-ratio: 4 / 5; } }
@media (prefers-reduced-motion: reduce) { .celebration-card img { transition: none; } .celebration-card:hover img { transform: none; } }

/* 44. Dropdowns in the entry form open over the next section instead of being cut off by it.
   The section no longer clips (its corner flower is trimmed on its own), and a section
   with an open list sits above its neighbours. */
.pt-section { overflow: visible; }
.pt-section::after { clip-path: inset(60px 60px 0 0 round 0 var(--r-xl) 0 0); }
.pt-section:has(.uiselect.is-open, .uidate.is-open) { z-index: 20; }
/* While a list is open the sticky "save" bar steps aside, so it never covers the options. */
.pt-form:has(.uiselect.is-open, .uidate.is-open) .pt-submit { visibility: hidden; }

/* 46. How to take part: five steps in one even row on wide screens, a numbered list below that */
.flow.flow-steps { grid-template-columns: minmax(0, 1fr); gap: 0; position: relative; }
.flow-steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: var(--s-4); align-items: start; padding: var(--s-4) 0; background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.flow-steps li:last-child { border-bottom: 0; }
.flow-steps .n { grid-row: 1 / span 2; margin: 0; width: 44px; height: 44px; background: var(--brand-800, #6e0f3c); color: #fff; }
.flow-steps :is(h2, h3) { margin: 2px 0 4px; }
@media (min-width: 1100px) {
    .flow.flow-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-4); }
    .flow.flow-steps::before { content: ""; position: absolute; top: 22px; left: 10%; right: 10%; height: 2px; background: linear-gradient(90deg, transparent, var(--line) 8%, var(--line) 92%, transparent); }
    .flow-steps li { display: block; padding: 0; border: 0; text-align: center; position: relative; }
    .flow-steps .n { margin: 0 auto var(--s-3); box-shadow: 0 0 0 6px var(--surface, #fff); position: relative; }
}

/* Footer on phones: everything centred, the two bottom lines stacked. */
@media (max-width: 720px) {
    .foot-grid { text-align: center; }
    .foot-nn { justify-content: center; text-align: left; }
    .foot-lockup { display: block; margin-left: auto; margin-right: auto; }
    .foot-grid ul { padding: 0; list-style: none; }
    .foot-bottom { flex-direction: column; align-items: center; text-align: center; gap: 6px; }
    .foot-bottom .spacer { display: none; }
}

/* 47. Diwali in Jaipur page: a hero with a jump list, then the four parts, each with its video and photos */
.cel-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: var(--s-6); }
.cel-jump a { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 6px 16px 6px 8px; border: 1px solid rgba(242, 190, 85, .5); border-radius: var(--r-pill); color: #fbe9c6; font-weight: 600; text-decoration: none !important; background: rgba(255, 255, 255, .04); }
.cel-jump a:hover { background: rgba(242, 190, 85, .14); color: #fff; }
.cel-jump span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #f2be55; color: #3a0a20; font-size: .85rem; font-weight: 700; }
.cel-topic { scroll-margin-top: 80px; }
.cel-topic-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(20px, 4vw, 56px); align-items: center; }
.cel-topic-grid.is-flipped { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.cel-topic-grid.is-flipped .cel-topic-media { order: 2; }
.cel-topic-media .cel-video, .cel-topic-lead { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--r-xl); object-fit: cover; box-shadow: 0 18px 44px rgba(60, 10, 35, .22); background: #1a0a12; }
.cel-topic-no { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--brand-800, #6e0f3c); color: #fff; font-family: var(--font-display); font-size: 1.2rem; margin-bottom: var(--s-3); }
.cel-topic-body h2 { margin: 0 0 var(--s-3); font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem); }
.cel-topic-body p { color: var(--ink-700, #4a3a40); font-size: 1.05rem; line-height: 1.65; margin: 0 0 var(--s-5); }
.cel-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cel-strip a { display: block; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 4 / 3; }
.cel-strip img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease-out); }
.cel-strip a:hover img { transform: scale(1.06); }
@media (max-width: 860px) {
    .cel-topic-grid, .cel-topic-grid.is-flipped { grid-template-columns: minmax(0, 1fr); }
    .cel-topic-grid.is-flipped .cel-topic-media { order: 0; }
}
@media (prefers-reduced-motion: reduce) { .cel-strip img { transition: none; } .cel-strip a:hover img { transform: none; } }