/* ==========================================================================
   Catalina Cyber Response Challenge - ccrc.dev
   Palette taken from the event challenge coin: Sonoran desert at dusk.
   No framework, no build step. Edit directly.
   ========================================================================== */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    /* Coin palette */
    --bg:            #14100c;
    --bg-alt:        #1c1712;
    --surface:       #241d16;
    --border:        #3d3226;
    --gold:          #d9a441;
    --gold-bright:   #f0c063;
    --terracotta:    #c4622d;
    --olive:         #7d8c4a;
    --text:          #f2e9dc;
    --text-dim:      #a99880;
    --font-mono: 'Courier New', ui-monospace, monospace;
    --font-body: system-ui, -apple-system, 'Segoe UI', sans-serif;
    --maxw: 1080px;
}

html { scroll-behavior: smooth; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    line-height: 1.65;
    overflow-x: hidden;
}

/* ===== Layout ===== */
.wrap { width: min(100% - 2.5rem, var(--maxw)); margin-inline: auto; }
section { padding: 5rem 0; border-bottom: 1px solid var(--border); }
section:last-of-type { border-bottom: none; }

/* ===== Typography ===== */
h1, h2, h3 { font-family: var(--font-mono); letter-spacing: 0.5px; line-height: 1.2; }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.1rem); margin-bottom: 0.6rem; color: var(--gold); }
h3 { font-size: 1.15rem; margin-bottom: 0.5rem; color: var(--text); }
.section-lead { color: var(--text-dim); margin-bottom: 2.5rem; max-width: 62ch; }
a { color: var(--gold); text-decoration: none; transition: color .2s; }
a:hover { color: var(--gold-bright); }

/* ===== Nav ===== */
nav {
    position: sticky; top: 0; z-index: 50;
    background: rgba(20,16,12,.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
}
nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 62px; gap: 1rem; }
.brand { font-family: var(--font-mono); font-weight: 700; color: var(--gold); font-size: .95rem; letter-spacing: 1px; }
.brand span { color: var(--text-dim); font-weight: 400; }
.navlinks { display: flex; gap: 1.5rem; font-size: .9rem; }
.navlinks a { color: var(--text-dim); }
.navlinks a:hover { color: var(--gold); }
@media (max-width: 720px) { .navlinks { display: none; } }

/* ===== Hero ===== */
.hero {
    position: relative;
    padding: 5.5rem 0 4.5rem;
    text-align: center;
    background:
        radial-gradient(ellipse at 50% 120%, rgba(196,98,45,.22), transparent 62%),
        linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 100%);
    overflow: hidden;
}
/* Mountain silhouette drawn in CSS so there is no image to load */
.hero::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 130px;
    background: var(--bg);
    clip-path: polygon(0 100%, 0 62%, 9% 44%, 17% 58%, 27% 30%, 36% 52%, 45% 22%, 57% 48%, 66% 33%, 76% 55%, 86% 38%, 94% 57%, 100% 46%, 100% 100%);
    opacity: .95;
}
.hero .wrap { position: relative; z-index: 1; }
.eyebrow {
    font-family: var(--font-mono); font-size: .8rem; letter-spacing: 3px;
    color: var(--terracotta); text-transform: uppercase; margin-bottom: 1.1rem;
}
.hero h1 {
    font-size: clamp(2rem, 6vw, 3.5rem);
    color: var(--text); margin-bottom: .4rem;
}
.hero h1 .accent { color: var(--gold); }
.tagline { color: var(--text-dim); font-size: clamp(1rem, 2.2vw, 1.2rem); max-width: 55ch; margin: 0 auto 2rem; }

.meta { display: flex; gap: 2.2rem; justify-content: center; flex-wrap: wrap; margin-bottom: 2.4rem; }
.meta div { text-align: center; }
.meta .k { font-family: var(--font-mono); font-size: .72rem; letter-spacing: 2px; color: var(--text-dim); text-transform: uppercase; }
.meta .v { font-size: 1rem; color: var(--text); }

/* ===== Buttons ===== */
.cta-row { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.btn {
    display: inline-block; padding: .8rem 1.7rem; border-radius: 4px;
    font-family: var(--font-mono); font-size: .92rem; letter-spacing: .5px;
    border: 1px solid var(--gold); transition: all .2s; cursor: pointer;
}
.btn-primary { background: var(--gold); color: #14100c; font-weight: 700; }
.btn-primary:hover { background: var(--gold-bright); color: #14100c; }
.btn-ghost { background: transparent; color: var(--gold); }
.btn-ghost:hover { background: rgba(217,164,65,.12); color: var(--gold-bright); }
.btn[data-pending] { opacity: .5; pointer-events: none; }

/* ===== Countdown ===== */
.countdown { display: flex; gap: 1.4rem; justify-content: center; margin-top: 2.6rem; flex-wrap: wrap; }
.cd-unit {
    min-width: 78px; padding: .7rem .4rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: 5px;
}
.cd-num { font-family: var(--font-mono); font-size: 1.7rem; color: var(--gold); line-height: 1; }
.cd-lbl { font-size: .68rem; letter-spacing: 2px; color: var(--text-dim); text-transform: uppercase; margin-top: .35rem; }

/* ===== Cards ===== */
.grid { display: grid; gap: 1.2rem; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 6px; padding: 1.5rem;
    transition: border-color .2s, transform .2s;
}
.card:hover { border-color: var(--gold); transform: translateY(-2px); }
.card p { color: var(--text-dim); font-size: .95rem; }
.card .icon { font-size: 1.5rem; margin-bottom: .7rem; display: block; }

/* ===== Timeline ===== */
.timeline { list-style: none; border-left: 2px solid var(--border); padding-left: 1.6rem; }
.timeline li { position: relative; padding-bottom: 1.6rem; }
.timeline li::before {
    content: ''; position: absolute; left: -1.95rem; top: .45rem;
    width: 11px; height: 11px; border-radius: 50%;
    background: var(--bg); border: 2px solid var(--gold);
}
.timeline .t { font-family: var(--font-mono); color: var(--gold); font-size: .85rem; letter-spacing: 1px; }
.timeline .d { color: var(--text-dim); font-size: .95rem; }

/* ===== Sponsors ===== */
.sponsors { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 2rem; }
.sponsor {
    padding: 1.1rem 1.8rem; background: var(--surface);
    border: 1px solid var(--border); border-radius: 6px;
    font-family: var(--font-mono); font-size: .95rem; color: var(--text);
    text-align: center; min-width: 190px;
}
.sponsor .role { display: block; font-size: .68rem; letter-spacing: 2px; color: var(--terracotta); text-transform: uppercase; margin-bottom: .35rem; }

/* ===== FAQ ===== */
details {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 6px; padding: 1rem 1.2rem; margin-bottom: .8rem;
}
details[open] { border-color: var(--gold); }
summary { cursor: pointer; font-weight: 600; list-style: none; color: var(--text); }
summary::-webkit-details-marker { display: none; }
summary::before { content: '+ '; color: var(--gold); font-family: var(--font-mono); }
details[open] summary::before { content: '- '; }
details p { color: var(--text-dim); margin-top: .8rem; font-size: .95rem; }

/* ===== Footer ===== */
footer { padding: 3rem 0 2.5rem; text-align: center; color: var(--text-dim); font-size: .88rem; }
footer .flag { font-family: var(--font-mono); color: var(--border); font-size: .78rem; margin-top: 1.2rem; }

/* ===== Accessibility ===== */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; }
}

/* ===== Join / QR block ===== */
.join-row { display: flex; gap: 2.5rem; align-items: flex-start; flex-wrap: wrap; }
.qr-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 8px; padding: 1.1rem; text-align: center; flex: 0 0 auto;
}
.qr-card img { display: block; width: 180px; height: 180px; }
.qr-cap {
    font-family: var(--font-mono); font-size: .78rem; color: var(--text-dim);
    margin-top: .7rem; letter-spacing: .5px;
}
.join-copy { flex: 1 1 320px; }
.join-copy p { color: var(--text-dim); font-size: .95rem; }

/* ===== Partner logos ===== */
/* Text is the fallback. When a logo file lands in assets/logos/ the img is
   added inside .sponsor and the text becomes its alt/caption. */
.sponsor img {
    display: block; max-width: 150px; max-height: 42px;
    width: auto; height: auto; margin: 0 auto;
}
.sponsor.has-logo { padding: 1.2rem 1.6rem; }

/* A logo that only exists in a dark colourway sits on a light chip so it
   stays legible against the near-black background. */
.sponsor.light-chip {
    background: #f2e9dc; border-color: #f2e9dc;
}

/* ===== The lizard =====
   Lives along the bottom edge. Click-through so he can never block a link.
   Sits below the sticky nav in z-order and above page content. */
#lizard-canvas {
    position: fixed;
    left: 0;
    /* Sit above the phone's home-indicator / gesture bar, which otherwise
       covers him completely on iOS and some Android browsers. */
    bottom: env(safe-area-inset-bottom, 0px);
    z-index: 40;
    pointer-events: none;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

/* Give the page a little breathing room so he is not standing on the footer text */
footer { padding-bottom: 5.5rem; }

/* The flag he coughs up when poked */
.lizard-flag {
    position: fixed;
    left: 50%;
    bottom: 5.5rem;
    transform: translate(-50%, 12px);
    z-index: 60;
    max-width: min(92vw, 420px);
    background: var(--surface);
    border: 1px solid var(--gold);
    border-radius: 8px;
    padding: 1.1rem 1.3rem;
    text-align: center;
    opacity: 0;
    transition: opacity .35s, transform .35s;
    box-shadow: 0 12px 40px rgba(0,0,0,.55);
}
.lizard-flag.show { opacity: 1; transform: translate(-50%, 0); }
.lizard-flag strong { font-family: var(--font-mono); color: var(--gold); display: block; margin-bottom: .5rem; }
.lizard-flag p { color: var(--text-dim); font-size: .88rem; margin-bottom: .8rem; }
.lizard-flag code {
    display: block;
    font-family: var(--font-mono);
    color: var(--text);
    background: var(--bg);
    border: 1px dashed var(--border);
    border-radius: 4px;
    padding: .6rem;
    font-size: .9rem;
    word-break: break-all;
}
.lizard-flag .lf-note { margin: .7rem 0 0; font-size: .78rem; color: var(--terracotta); }

@media (prefers-reduced-motion: reduce) {
    .lizard-flag { transition: none; }
}

/* ===== Sub-page hero (about, contact) ===== */
.hero-sub { padding: 4rem 0 3.2rem; }
.hero-sub::after { height: 80px; opacity: .8; }
.hero-sub h1 { font-size: clamp(1.8rem, 4.5vw, 2.7rem); }

/* ===== Long-form prose ===== */
.prose { max-width: 68ch; }
.prose h2 { margin-top: 2.6rem; }
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--text-dim); margin-bottom: 1rem; }
.prose p strong { color: var(--text); }

/* ===== Build crew page ===== */
.note {
    background: var(--surface);
    border-left: 3px solid var(--terracotta);
    border-radius: 0 5px 5px 0;
    padding: 1.15rem 1.35rem;
    margin-top: 1.8rem;
}
.note p { color: var(--text-dim); font-size: .95rem; max-width: 66ch; }

/* Flag difficulty tiers. The left edge encodes the gradient, so the colour
   is doing information work rather than decoration. */
.tier { border-left-width: 3px; border-left-style: solid; }
.tier-core { border-left-color: var(--olive); }
.tier-mid  { border-left-color: var(--gold); }
.tier-hard { border-left-color: var(--terracotta); }

.tier-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: .8rem; flex-wrap: wrap; margin-bottom: .6rem;
}
.tier-head h3 { margin-bottom: 0; }
.tier-meta {
    font-family: var(--font-mono); font-size: .72rem;
    color: var(--text-dim); letter-spacing: .5px;
}

.example {
    font-family: var(--font-mono);
    font-size: .78rem;
    line-height: 1.6;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: .7rem .8rem;
    margin-top: .9rem;
    color: var(--text);
    overflow-x: auto;
    white-space: pre;
}

/* The QR encodes the original invite (already on printed material and
   unchanged). The caption offers the readable vanity URL for anyone who would
   rather type than scan. Both resolve to the same server. */
.qr-cap strong {
    color: var(--gold);
    font-weight: 400;
    letter-spacing: 0;
}

/* Inline code, for the flag format on the prepare card */
code.inline {
    font-family: var(--font-mono);
    font-size: .88em;
    color: var(--gold);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: .1rem .35rem;
}

/* Full-bleed figure on the about page. This is the same artwork used as the
   social preview card, shown here so it is an actual part of the site rather
   than a file only referenced in metadata. */
.hero-figure { padding: 2.5rem 0 0; border-bottom: none; }
.hero-figure figure { margin: 0; }
.hero-figure img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
}