/* ===========================
   GLOBAL TYPOGRAPHY & BODY
   =========================== */

@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:wght@400;600;700&display=swap');

body {
    font-family: "Crimson Text", Georgia, serif;
    font-size: 20px;
    line-height: 1.6;
    background-color: #fffdf8;
    color: #2b1f0f;
    margin: 0;
    padding: 0;
}

/* ===========================
   PAGE WRAPPER
   =========================== */

.wrapper {
    width: 90%;
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
}

/* ===========================
   HEADERS
   =========================== */

h1, h2, h3 {
    font-family: "Crimson Text", Georgia, serif;
    font-weight: 700;
    color: #3b2a1a;
    margin-top: 40px;
    margin-bottom: 10px;
}

h1 {
    font-size: 42px;
    text-align: center;
}

h2 {
    font-size: 32px;
}

h3 {
    font-size: 26px;
}

/* ===========================
   COIN BOX BORDER (coin-rim)
   =========================== */

.coin-box {
    border: 40px solid transparent;
    padding: 20px;
    border-image: url("coin-rim.png") 40 round;
    background-color: #fffdf8;
    margin: 30px 0;
    position: relative;
}

/* ===========================
   VISITOR COUNTER
   =========================== */

#visitor-counter {
    font-size: 18px;
    color: #5a4632;
}

/* ===========================
   AUDIO TOGGLE
   =========================== */

#audio-toggle {
    font-size: 18px;
    cursor: pointer;
    color: #3b2a1a;
}

/* ===========================
   NAVIGATION LINKS
   =========================== */

nav a {
    color: #3b2a1a;
    text-decoration: none;
    font-weight: 600;
}

nav a:hover {
    text-decoration: underline;
}

/* ===========================
   IMAGES
   =========================== */

img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 15px auto;
}

/* ===========================
   FOOTER
   =========================== */

footer {
    text-align: center;
    font-size: 18px;
    color: #6a5844;
    margin-top: 50px;
    padding-bottom: 40px;
}

/* ===========================
   VICTORIAN CONTACT BOX
   =========================== */

p .contact-victorian {
    display: inline-block;
    padding: 10px 22px;
    margin-left: 12px;

    font-size: 1.1rem;
    font-weight: 700;
    color: #3b2a1a !important;
    text-decoration: none !important;

    /* Coin-rim matched brown */
    border: 3px double #7a5a3a !important;
    background-color: #f7f3e9 !important;

    /* Inner printed-line effect */
    box-shadow:
        inset 0 0 0 2px #d6c9b3,
        0 2px 4px rgba(0,0,0,0.15);

    border-radius: 4px;

    /* Envelope icon */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="%233b2a1a" viewBox="0 0 16 16"><path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v.217l-8 4.8-8-4.8V4zm0 1.383v6.617a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V5.383l-7.555 4.533a1 1 0 0 1-1.11 0L0 5.383z"/></svg>');
    background-repeat: no-repeat;
    background-position: 10px center;
    padding-left: 40px;

    transition: background-color 0.2s, box-shadow 0.2s;
}

/* ===========================
   VICTORIAN CONTACT BOX
   =========================== */

.contact-victorian {
    display: inline-block !important;
    padding: 12px 26px !important;
    margin-left: 14px !important;

    font-family: "Crimson Text", Georgia, serif !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: #3b2a1a !important;
    text-decoration: none !important;

    /* Coin-rim matched brown */
    border: 3px double #7a5a3a !important;
    background-color: #f7f3e9 !important;

    /* Inner printed-line effect */
    box-shadow:
        inset 0 0 0 2px #d6c9b3,
        0 2px 4px rgba(0,0,0,0.15) !important;

    border-radius: 4px !important;

    /* Envelope icon */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="%233b2a1a" viewBox="0 0 16 16"><path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v.217l-8 4.8-8-4.8V4zm0 1.383v6.617a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V5.383l-7.555 4.533a1 1 0 0 1-1.11 0L0 5.383z"/></svg>');
    background-repeat: no-repeat !important;
    background-position: 10px center !important;
    padding-left: 46px !important;

    transition: background-color 0.2s, box-shadow 0.2s !important;
}

.contact-victorian:hover {
    background-color: #efe7d8 !important;
    box-shadow:
        inset 0 0 0 2px #b8a78c,
        0 2px 5px rgba(0,0,0,0.25) !important;
}