/* SVG hero — the plate and frame are inside one SVG; the logo,
   headline, tagline and search sit on top. */

.hero-svg-wrap {
    position: relative;
    max-width: 1200px;
    margin: 0 auto 46px;
}

.hero-svg {
    display: block;
    width: 100%;
    height: auto;
}

/* Text layer overlays the SVG, centred */
.hero-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    padding: 0 6%;
    /* start the text block below the logo that sits in the SVG top */
    padding-top: 17%;
}

.hero-content h1 {
    font-family: "Cinzel", Georgia, "Times New Roman", serif;
    font-weight: 700;
    font-variant: small-caps;
    font-size: clamp(1.7rem, 3.6vw, 3.1rem);
    line-height: 1.02;
    margin: 0 0 12px;
    letter-spacing: 0.02em;

    /* engraved gold: gradient fill with a highlight at top,
       deepening to bronze at the base */
    background: linear-gradient(180deg,
        #fdeeb6 0%,
        #f4d789 18%,
        #d9a94e 52%,
        #b5843f 78%,
        #8a5f28 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;

    /* depth: a dark drop below for the carved edge, plus a faint
       warm glow so it reads on the dark plate */
    filter:
        drop-shadow(0 1px 0 rgba(0,0,0,0.6))
        drop-shadow(0 2px 6px rgba(0,0,0,0.55));
}

.hero-content h1 .apos {
    /* keep the curly apostrophe in the gold too — nothing to do,
       inherits the gradient; hook left for future tweaks */
}

.hero-tagline {
    max-width: none;
    white-space: nowrap;
    margin: 0 0 20px;
    color: #dcc39c;
    font-size: clamp(0.85rem, 1.3vw, 1.05rem);
    line-height: 1.4;
    text-shadow: 0 1px 6px rgba(0,0,0,0.7);
}

.hero-search {
    width: min(560px, 80%);
    border: 1px solid #6d4a27;
    background: #150f0b;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.4), 0 3px 16px rgba(0,0,0,0.55);
}

.hero-search button {
    background: linear-gradient(180deg, #d6a961, #b5843f);
}

/* Tighten spacing on small screens. */
@media (max-width: 700px) {
    .hero-content { padding-top: 14%; }
    .hero-content h1 { font-size: 2rem; }
}