/* Steampunk Radio Art Competition — matched to the main steampunk.au theme */
:root {
    --ink:      #0c0907;   /* page background (site --bg) */
    --timber:   #110c07;   /* site --bg2 */
    --panel:    #17100a;   /* site --panel */
    --panel-hi: #1f1610;
    --brass:    #c9a84c;   /* borders / lines (site line gold) */
    --brass-hi: #e7c75a;   /* headings (site --gold) */
    --copper:   #c9933f;   /* accents / links (site --rust) */
    --parchment:#ece0c6;   /* body text (site --ink) */
    --gold-hi:  #f6e187;
    --btn-grad: linear-gradient(180deg,#efd075,#d4a73f);
    --fh: 'Cinzel', serif;
    --fdisplay: 'Cinzel Decorative', serif;
    --fb: 'Montserrat', system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: radial-gradient(ellipse at top, #171009 0%, var(--timber) 55%, var(--ink) 100%) fixed;
    color: var(--parchment);
    font-family: var(--fb);
    font-size: 1rem;
    line-height: 1.6;
}

.rivets {
    height: 14px;
    background-image: radial-gradient(circle at 7px 7px, var(--brass) 2.5px, transparent 3px);
    background-size: 44px 14px;
    opacity: .5;
}

.masthead { text-align: center; padding: 2.2rem 1rem 1rem; }
.eyebrow {
    font-family: var(--fh);
    font-size: .75rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--copper);
    margin: 0 0 .4rem;
}
h1, h2, h3 {
    font-family: var(--fh);
    font-weight: 700;
    color: var(--brass-hi);
    letter-spacing: 1px;
    line-height: 1.2;
}
.masthead h1 {
    font-family: var(--fdisplay);
    font-weight: 900;
    font-size: clamp(1.6rem, 5vw, 2.6rem);
    margin: 0 0 1rem;
    background: linear-gradient(180deg,#f6e187,#e7c052 50%,#a87c2c);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

nav a {
    font-family: var(--fh);
    color: var(--parchment);
    text-decoration: none;
    padding: .4rem 1rem;
    border: 1px solid var(--brass);
    border-radius: 4px;
    margin: 0 .3rem;
    display: inline-block;
    margin-bottom: .4rem;
}
nav a.active, nav a:hover {
    background: var(--btn-grad);
    color: #1a1206;
}

main { max-width: 960px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }

.plaque {
    background: linear-gradient(160deg, var(--panel-hi) 0%, var(--panel) 100%);
    border: 1px solid var(--brass);
    border-radius: 6px;
    box-shadow: 0 0 25px rgba(201,168,76,.14), inset 0 0 40px rgba(0,0,0,.4);
    padding: 1.4rem 1.6rem;
    margin-bottom: 1.6rem;
}
.plaque h2 { margin-top: 0; }

a { color: var(--copper); }
a:hover { color: var(--gold-hi); }

.button, button {
    font-family: var(--fh);
    font-size: 1rem;
    background: var(--btn-grad);
    border: 1px solid transparent;
    border-radius: 4px;
    color: #1a1206;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: .85rem;
    padding: .6rem 1.2rem;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}
.button:hover, button:hover {
    filter: brightness(1.06);
    box-shadow: 0 0 12px rgba(231,199,90,.5);
    color: #1a1206;
}
.button.danger { background: linear-gradient(180deg, #b3502e, #7a3018); color: var(--parchment); }

input[type=text], input[type=email], input[type=password] {
    width: 100%;
    background: var(--ink);
    border: 1px solid var(--brass);
    border-radius: 4px;
    color: var(--parchment);
    font-family: inherit;
    font-size: 1rem;
    padding: .5rem .7rem;
}
label { display: block; margin: .8rem 0 .25rem; }
.checkline { display: flex; gap: .6rem; align-items: flex-start; margin: .8rem 0; }
.checkline input { margin-top: .35rem; }

.notice {
    border-left: 4px solid var(--brass-hi);
    background: rgba(176,141,87,.12);
    padding: .8rem 1rem;
    margin: 1rem 0;
}
.notice.error { border-color: #b3502e; background: rgba(179,80,46,.15); }

/* Gallery */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.4rem;
}
.entry-card {
    background: linear-gradient(160deg, var(--panel-hi), var(--panel));
    border: 1px solid var(--brass);
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.entry-card img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    border-bottom: 1px solid var(--brass);
    background: var(--ink);
}
.entry-card .meta { padding: .8rem 1rem 1rem; }
.entry-card .title {
    font-family: var(--fh);
    color: var(--brass-hi);
    margin: 0 0 .1rem;
    font-size: 1.05rem;
}
.entry-card .artist { margin: 0 0 .7rem; font-style: italic; font-size: .95rem; }
.entry-number {
    font-family: var(--fh);
    font-size: .8rem;
    color: var(--copper);
    letter-spacing: 2px;
}

.ornament { text-align: center; color: var(--brass); margin: .8rem 0; }

footer {
    text-align: center;
    font-size: .85rem;
    color: #9c8a68;
    padding: 1rem 1.5rem 2rem;
    max-width: 760px;
    margin: 0 auto;
}

table { width: 100%; border-collapse: collapse; }
th, td { border: 1px solid var(--brass); padding: .5rem .7rem; text-align: left; }
th { font-family: var(--fh); color: var(--brass-hi); }

.judges { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.4rem; align-items: start; }
.judge { text-align: left; }
.judge h3 { text-align: center; margin: 0 0 .5rem; }

.judge .frame {
    width: 100%;
    aspect-ratio: 4 / 5; /* makes it portrait */
    margin: 0 0 .7rem;
    border-radius: 8px;
    border: 1px solid var(--brass);
    box-shadow: 0 0 15px rgba(201,168,76,.25);

    background-color: var(--ink);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left top; /* moves crop to top left */

    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--fh);
    color: var(--brass);
    font-size: 2.4rem;
}

.judge p { text-align: left; margin: 0; font-size: .95rem; }

@media (prefers-reduced-motion: no-preference) {
    .entry-card { transition: transform .18s ease, box-shadow .18s ease; }
    .entry-card:hover { transform: translateY(-4px); box-shadow: 0 6px 22px rgba(201,168,76,.28); }
}

/* Entry form sections + textarea + gallery thumbs */
textarea {
    width: 100%;
    min-height: 220px;
    background: var(--ink);
    border: 1px solid var(--brass);
    border-radius: 4px;
    color: var(--parchment);
    font-family: inherit;
    font-size: 1rem;
    padding: .5rem .7rem;
    resize: vertical;
}
.form-section h3 { margin-top: 0; }
.step-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7em; height: 1.7em;
    border: 2px solid var(--brass);
    border-radius: 50%;
    margin-right: .45em;
    font-size: .85em;
    color: var(--brass-hi);
}
.entry-card .desc {
    font-size: .92rem;
    margin: 0 0 .8rem;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.thumbs { display: flex; gap: .5rem; margin: 0 0 .8rem; }
.thumbs img {
    width: 64px; height: 64px;
    object-fit: cover;
    border: 1px solid var(--brass);
    border-radius: 4px;
    aspect-ratio: auto;
}

/* ============================================================
   THE GRAND EXHIBITION FRONT PAGE — index.php only.
   Everything below uses new class names so the admin, entry,
   gallery and judging pages are unaffected.
   ============================================================ */
:root {
    --verdigris: #5d9b85;      /* oxidised copper — the "live steam" accent */
    --verdi-dim: #3c6b5b;
    --face:      #e8dcc0;      /* gauge face parchment */
    --ink-line:  #3a2f1d;
}

/* ---- ambient background machinery (fixed, behind everything) ---- */
.bg-gear { position: fixed; z-index: -1; opacity: .10; pointer-events: none; }
.bg-gear svg { display: block; width: 100%; height: 100%; }
#bgTL { top: -140px; left: -150px; width: 400px; height: 400px; }
#bgBR { bottom: -190px; right: -160px; width: 480px; height: 480px; }
.spin      { transform-origin: 50% 50%; }
.steam-col {
    position: fixed; z-index: -1; pointer-events: none;
    width: 130px; height: 55vh; bottom: 0; left: 8%;
    background: radial-gradient(ellipse 50% 32% at 50% 88%, rgba(93,155,133,.16), transparent 70%),
                radial-gradient(ellipse 42% 26% at 46% 55%, rgba(236,224,198,.05), transparent 70%),
                radial-gradient(ellipse 45% 22% at 55% 22%, rgba(236,224,198,.04), transparent 70%);
    filter: blur(6px); opacity: .8;
}
.steam-col.s2 { left: auto; right: 12%; height: 42vh; }

/* ---- masthead: engraved title with flanking cogs ---- */
.masthead h1 {
    position: relative;
    display: inline-block;
    padding: 0 .35em;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,.8));
}
.masthead h1::before, .masthead h1::after {
    content: ""; position: absolute; top: 50%; width: .85em; height: .85em;
    margin-top: -.42em; background: var(--brass); opacity: .8;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M50 8l4 9a34 34 0 019 3.7l9.4-3 5.9 5.9-3 9.4a34 34 0 013.7 9l9 4v8l-9 4a34 34 0 01-3.7 9l3 9.4-5.9 5.9-9.4-3a34 34 0 01-9 3.7l-4 9h-8l-4-9a34 34 0 01-9-3.7l-9.4 3-5.9-5.9 3-9.4a34 34 0 01-3.7-9l-9-4v-8l9-4a34 34 0 013.7-9l-3-9.4 5.9-5.9 9.4 3a34 34 0 019-3.7l4-9z"/><circle cx="50" cy="50" r="15" fill="black"/></svg>') no-repeat center / contain;
            mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M50 8l4 9a34 34 0 019 3.7l9.4-3 5.9 5.9-3 9.4a34 34 0 013.7 9l9 4v8l-9 4a34 34 0 01-3.7 9l3 9.4-5.9 5.9-9.4-3a34 34 0 01-9 3.7l-4 9h-8l-4-9a34 34 0 01-9-3.7l-9.4 3-5.9-5.9 3-9.4a34 34 0 01-3.7-9l-9-4v-8l9-4a34 34 0 013.7-9l-3-9.4 5.9-5.9 9.4 3a34 34 0 019-3.7l4-9z"/><circle cx="50" cy="50" r="15" fill="black"/></svg>') no-repeat center / contain;
}
.masthead h1::before { left: -0.75em; }
.masthead h1::after  { right: -0.75em; }

/* ---- riveted plaques: brass corner screws ---- */
.plaque.riveted { position: relative; }
.plaque.riveted::before, .plaque.riveted::after,
.plaque.riveted > .rivet-b::before, .plaque.riveted > .rivet-b::after {
    content: ""; position: absolute; width: 11px; height: 11px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #f0d98a, #b8933c 55%, #6d5420);
    box-shadow: inset 0 -1px 2px rgba(0,0,0,.7), 0 0 4px rgba(0,0,0,.6);
}
.plaque.riveted::before { top: 8px; left: 8px; }
.plaque.riveted::after  { top: 8px; right: 8px; }
.plaque.riveted > .rivet-b { position: absolute; inset: 0; pointer-events: none; }
.plaque.riveted > .rivet-b::before { bottom: 8px; left: 8px; top: auto; }
.plaque.riveted > .rivet-b::after  { bottom: 8px; right: 8px; top: auto; }

/* ---- hero ---- */
.hero-grid {
    display: grid; grid-template-columns: 1.15fr .85fr;
    gap: 2rem; align-items: center;
}
.hero-copy .lede { font-size: 1.1rem; }
.hero-copy .lede strong { color: var(--brass-hi); }
.kicker {
    font-family: var(--fh); text-transform: uppercase; letter-spacing: 3.5px;
    font-size: .72rem; color: var(--verdigris); margin: 0 0 .5rem;
}
.hero-copy h2 {
    font-size: clamp(1.5rem, 3.4vw, 2.1rem); margin: 0 0 .8rem;
}
.cta-row { margin-top: 1.3rem; display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }
.button.grand {
    font-size: 1.02rem; padding: .85rem 1.7rem;
    box-shadow: 0 0 0 1px #7c5f22, 0 0 22px rgba(231,199,90,.35), inset 0 1px 0 rgba(255,255,255,.5);
}
.button.ghost {
    background: transparent; border: 1px solid var(--brass); color: var(--parchment);
}
.button.ghost:hover { background: rgba(201,168,76,.12); color: var(--gold-hi); box-shadow: none; }
.no-ai {
    margin-top: 1rem; font-size: .8rem; letter-spacing: 1.5px; text-transform: uppercase;
    font-family: var(--fh); color: var(--copper);
    border: 1px dashed rgba(201,147,63,.55); border-radius: 4px;
    display: inline-block; padding: .35rem .7rem;
}

/* ---- the Boiler Gauge ---- */
.gauge-wrap { text-align: center; }
.gauge-wrap svg { width: min(100%, 400px); height: auto; display: block; margin: 0 auto;
                  filter: drop-shadow(0 10px 30px rgba(0,0,0,.6)); }
.gauge-caption {
    display: inline-block; margin-top: .9rem; padding: .45rem 1.1rem;
    font-family: var(--fh); letter-spacing: 2px; font-size: .8rem; text-transform: uppercase;
    color: #1a1206; background: var(--btn-grad); border-radius: 4px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 2px 6px rgba(0,0,0,.5);
}
.gauge-caption b { font-size: 1.05rem; letter-spacing: 1px; }
#needle { transition: transform 2.4s cubic-bezier(.22,1.4,.36,1); }

/* ---- counter strip ---- */
.counters {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 0 0 1.6rem;
}
.counter-plate {
    text-align: center; padding: 1rem .6rem 1.1rem; position: relative;
    background: linear-gradient(170deg, #241a10, #17100a);
    border: 1px solid var(--brass); border-radius: 6px;
    box-shadow: inset 0 0 22px rgba(0,0,0,.5), 0 0 14px rgba(201,168,76,.10);
}
.counter-plate .big {
    font-family: var(--fh); font-weight: 700; font-size: clamp(1.5rem, 3.6vw, 2.2rem);
    color: var(--gold-hi); line-height: 1.1; display: block;
    text-shadow: 0 1px 0 rgba(0,0,0,.8), 0 0 18px rgba(246,225,135,.3);
}
.counter-plate .small {
    font-family: var(--fh); font-size: .72rem; letter-spacing: 2.5px; text-transform: uppercase;
    color: var(--copper); display: block; margin-top: .3rem;
}

/* ---- twin prize plates ---- */
.prize-plates { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
.prize-plate {
    position: relative; padding: 1.4rem 1.5rem 1.5rem;
    background:
        radial-gradient(circle at 50% 0%, rgba(231,199,90,.08), transparent 60%),
        linear-gradient(160deg, var(--panel-hi), var(--panel));
    border: 1px solid var(--brass); border-radius: 6px;
    box-shadow: 0 0 25px rgba(201,168,76,.12), inset 0 0 40px rgba(0,0,0,.4);
}
.prize-plate.peoples { border-color: var(--verdi-dim);
    box-shadow: 0 0 25px rgba(93,155,133,.14), inset 0 0 40px rgba(0,0,0,.4); }
.prize-plate .medal { float: right; width: 74px; height: 74px; margin: -6px -4px .4rem .8rem; }
.prize-plate h3 {
    margin: 0 0 .2rem; font-size: 1.25rem;
}
.prize-plate .amount {
    font-family: var(--fh); font-weight: 700; font-size: 1.9rem; color: var(--gold-hi);
    display: block; margin: .1rem 0 .6rem;
    text-shadow: 0 0 16px rgba(246,225,135,.35);
}
.prize-plate.peoples .amount { color: #a7d8c6; text-shadow: 0 0 16px rgba(93,155,133,.45); }
.prize-plate .sub {
    font-family: var(--fh); font-size: .72rem; letter-spacing: 2.5px; text-transform: uppercase;
    color: var(--copper); margin: 0 0 .1rem;
}
.prize-plate.peoples .sub { color: var(--verdigris); }
.prize-plate ul { margin: .5rem 0 0; padding-left: 1.1rem; }
.prize-plate li { margin: .25rem 0; font-size: .95rem; }

/* ---- the pipeline timeline ---- */
.pipeline { position: relative; margin: 1.6rem 0 .4rem; padding: 0; list-style: none;
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; }
.pipeline::before {  /* the pipe */
    content: ""; position: absolute; left: 3%; right: 3%; top: 17px; height: 12px;
    border-radius: 6px;
    background: linear-gradient(180deg, #77653c, #46381d 45%, #241c0e);
    box-shadow: inset 0 1px 0 rgba(236,224,198,.35), 0 2px 5px rgba(0,0,0,.6);
}
.pipeline li { position: relative; text-align: center; padding-top: 52px; }
.pipeline .valve {
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 46px; height: 46px; border-radius: 50%;
    background: radial-gradient(circle at 34% 30%, #f0d98a, #c9a84c 45%, #6d5420 90%);
    box-shadow: 0 0 0 3px #241c0e, 0 0 0 4px var(--brass), 0 3px 8px rgba(0,0,0,.7);
    display: flex; align-items: center; justify-content: center;
}
.pipeline .valve svg { width: 30px; height: 30px; }
.pipeline .valve.done { background: radial-gradient(circle at 34% 30%, #9fd3bf, #5d9b85 50%, #2c4d41 92%); }
.pipeline .stage {
    font-family: var(--fh); font-size: .72rem; letter-spacing: 2px; text-transform: uppercase;
    color: var(--brass-hi); display: block;
}
.pipeline .when { font-size: .85rem; color: var(--parchment); opacity: .85; }

/* ---- judges: ovals in ornate mounts ---- */
.judge .frame {
    aspect-ratio: 4 / 5;
    border-radius: 50% / 44%;
    border: 3px solid var(--brass);
    box-shadow: 0 0 0 6px #241c0e, 0 0 0 7px rgba(201,168,76,.55), 0 0 26px rgba(201,168,76,.25),
                inset 0 0 30px rgba(0,0,0,.55);
}
.judge .nameplate {
    display: block; width: fit-content; margin: -1.4rem auto .6rem; position: relative;
    padding: .3rem .9rem; font-family: var(--fh); font-size: .95rem; letter-spacing: 1px;
    color: #1a1206; background: var(--btn-grad); border-radius: 3px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 2px 6px rgba(0,0,0,.6);
    text-align: center;
}

/* ---- section headers with flourish ---- */
.section-head { text-align: center; margin: 0 0 1rem; }
.section-head h2 { margin: 0; font-size: clamp(1.4rem, 3vw, 1.9rem); }
.flourish { display: block; width: min(320px, 80%); margin: .4rem auto 0; stroke: var(--brass);
    fill: var(--brass); stroke-width: 1.5; opacity: .85; }
.flourish path { fill: none; }

/* ---- motion (respects reduced-motion) ---- */
@media (prefers-reduced-motion: no-preference) {
    .spin       { animation: spin 90s linear infinite; }
    .masthead h1::before { animation: spin 26s linear infinite; }
    .masthead h1::after  { animation: spin 26s linear infinite reverse; }
    .spin.rev   { animation-direction: reverse; }
    .spin.slow  { animation-duration: 150s; }
    .gA { animation: spin var(--gAdur,48s)   linear infinite; }
    .gB { animation: spin var(--gBdur,25.8s) linear infinite reverse; }
    .gC { animation: spin var(--gCdur,36.9s) linear infinite; }
    .steam-col { animation: steamdrift 11s ease-in-out infinite alternate; }
    .steam-col.s2 { animation-duration: 14s; }
    @keyframes steamdrift { from { transform: translateY(0) skewX(0deg); opacity:.65 }
                            to   { transform: translateY(-26px) skewX(-3deg); opacity:.9 } }
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- responsive ---- */
@media (max-width: 820px) {
    .hero-grid { grid-template-columns: 1fr; }
    .gauge-wrap { order: -1; }
    .prize-plates { grid-template-columns: 1fr; }
    .counters { grid-template-columns: 1fr 1fr 1fr; gap: .6rem; }
    .pipeline { grid-template-columns: 1fr; gap: .9rem; }
    .pipeline::before { left: 21px; right: auto; top: 4%; bottom: 4%; width: 12px; height: auto;
        background: linear-gradient(90deg, #77653c, #46381d 45%, #241c0e); }
    .pipeline li { text-align: left; padding: 0 0 0 62px; min-height: 48px; }
    .pipeline .valve { left: 0; transform: none; }
    .masthead h1::before, .masthead h1::after { display: none; }
}