/*
Theme Name: Brett McKay's Home on the Net (1998 Edition)
Theme URI: https://brettmckay.com
Author: Brett McKay
Author URI: https://brettmckay.com
Description: A personal homepage in the spirit of 1998 — the kind of site a thirty-something writer with a typewriter on his desk would have hand-coded in Notepad. Navy masthead, classic green hit counter, animated GIFs, MIDI music, and a guestbook. Best viewed in Netscape Navigator at 800x600.
Version: 1.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: brett-mckay-1998
Tags: retro, vintage, personal-page
*/

/* ============================================================
   BASE — warm khaki background, dotted texture
   ============================================================ */

html, body { margin: 0; padding: 0; }

body {
    background-color: #BFA978;
    background-image:
        radial-gradient(circle at 50% 50%, rgba(0,0,0,0.06) 1px, transparent 1.6px);
    background-size: 14px 14px;
    color: #1A1A1A;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 14px;
    line-height: 1.55;
    text-align: center;
}

/* ============================================================
   LINKS — classic browser blue / visited purple
   ============================================================ */

a:link    { color: #0000EE; text-decoration: underline; }
a:visited { color: #551A8B; text-decoration: underline; }
a:hover   { color: #C41E3A; text-decoration: underline; background: transparent; }
a:active  { color: #FF0000; }

/* ============================================================
   PAGE LAYOUT
   ============================================================ */

.page-wrap {
    width: 760px;
    margin: 0 auto;
    text-align: left;
}

.outer-frame {
    background-color: #F5EDD8;
    border: 6px ridge #8B7355;
    padding: 0;
    margin: 18px auto;
    box-shadow: 3px 3px 0 rgba(0,0,0,0.25);
}

/* ============================================================
   MASTHEAD BANNER — navy table with white serif, gold subtitle
   ============================================================ */

.welcome-banner {
    background-color: #1B2845;
    background-image: linear-gradient(180deg, #2A3B5F 0%, #1B2845 50%, #14203A 100%);
    border-bottom: 4px ridge #8B7355;
    padding: 22px 30px 18px;
    text-align: center;
    color: white;
    margin: 0;
}

.welcome-banner h1 {
    color: #FFFFFF;
    font-family: "Times New Roman", Times, serif;
    font-weight: bold;
    font-size: 38px;
    letter-spacing: 1px;
    margin: 0 0 6px;
    text-shadow: 2px 2px 0 #000000, 0 0 12px rgba(255,215,0,0.2);
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: initial;
    animation: none;
    text-transform: none;
}

.subtitle {
    color: #FFD700;
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-size: 15px;
    letter-spacing: 1px;
    text-transform: none;
    animation: none;
    margin-top: 2px;
}

.dateline {
    color: #C8B998;
    font-family: Georgia, serif;
    font-size: 11px;
    font-style: italic;
    letter-spacing: 1px;
    margin-bottom: 8px;
    text-transform: uppercase;
}

/* ============================================================
   CONTENT REGION — cream panel inside frame
   ============================================================ */

.content-region {
    padding: 22px 28px 28px;
    background: transparent;
}

/* ============================================================
   HEADINGS — bold serif, navy, accent underline
   ============================================================ */

h1, h2, h3, h4 {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: bold;
    color: #1B2845;
    margin: 16px 0 10px;
}

h2 {
    font-size: 22px;
    border-bottom: 2px solid #C41E3A;
    padding-bottom: 4px;
    margin: 20px 0 12px;
    letter-spacing: 0;
    text-align: left;
    text-transform: none;
}

h3 {
    font-size: 18px;
    color: #1B2845;
    letter-spacing: 0;
    margin: 0 0 4px;
}

h4 {
    font-size: 14px;
    letter-spacing: 1px;
}

/* ============================================================
   MARQUEE — green-on-black terminal/BBS style
   ============================================================ */

marquee {
    background-color: #000000;
    color: #00DD00;
    border: 3px ridge #555555;
    padding: 5px 0;
    font-family: "Courier New", Courier, monospace;
    font-weight: bold;
    font-size: 13px;
    letter-spacing: 0;
    margin: 8px 0;
}

marquee b { color: #FFFF66; font-weight: bold; }

/* ============================================================
   NAVIGATION — text links with separators on a tan strip
   ============================================================ */

.retro-nav {
    background-color: #E5D8A8;
    border: 2px groove #8B7355;
    padding: 8px 0;
    margin: 0 0 6px;
    text-align: center;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 14px;
}

.retro-nav a {
    display: inline;
    padding: 0 8px;
    margin: 0;
    background: none !important;
    border: none !important;
    color: #1B2845 !important;
    font-weight: bold;
    text-decoration: none !important;
}

.retro-nav a:hover {
    color: #C41E3A !important;
    text-decoration: underline !important;
}

.retro-nav a:not(:last-child)::after {
    content: " | ";
    margin-left: 8px;
    color: #8B7355;
    font-weight: normal;
}

/* ============================================================
   GIF ROW + UNDER CONSTRUCTION (back, smaller)
   ============================================================ */

.gif-row {
    display: block;
    text-align: center;
    margin: 12px 0;
}

.gif-row svg { vertical-align: middle; margin: 0 8px; }

.under-construction {
    display: inline-block;
    padding: 5px 18px;
    background: repeating-linear-gradient(
        45deg,
        #FFD700 0,
        #FFD700 10px,
        #1A1A1A 10px,
        #1A1A1A 20px
    );
    background-size: 28px 28px;
    color: #FFFFFF;
    font-family: Impact, "Arial Black", sans-serif;
    font-size: 13px;
    letter-spacing: 1px;
    text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
    border: 2px solid #1A1A1A;
    animation: stripe-march 1.4s linear infinite;
    text-transform: uppercase;
}

@keyframes stripe-march {
    0%   { background-position: 0 0; }
    100% { background-position: 28px 0; }
}

/* ============================================================
   "NEW!" / "HOT!" BADGES — classic web1 GIF style
   ============================================================ */

.new-badge {
    display: inline-block;
    padding: 2px 7px;
    background: #C41E3A;
    color: #FFFFFF !important;
    font-family: Arial, "Helvetica", sans-serif;
    font-weight: bold;
    font-size: 10px;
    letter-spacing: 1px;
    border: 1px solid #800020;
    text-shadow: none;
    text-transform: uppercase;
    box-shadow: 1px 1px 0 rgba(0,0,0,0.4);
    vertical-align: middle;
    margin-left: 6px;
    animation: badge-pulse 2s ease-in-out infinite;
}

.new-badge::before {
    content: "★ ";
    color: #FFD700;
    text-shadow: 0 0 3px rgba(255,215,0,0.6);
}

@keyframes badge-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.06); }
}

.hot-badge {
    display: inline-block;
    padding: 2px 7px;
    background: linear-gradient(180deg, #FFD700 0%, #FF6600 50%, #C41E3A 100%);
    color: #FFFFFF !important;
    font-family: "Arial Black", Arial, sans-serif;
    font-weight: bold;
    font-size: 10px;
    letter-spacing: 1px;
    border: 1px solid #8B2500;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.6);
    text-transform: uppercase;
    box-shadow: 1px 1px 0 rgba(0,0,0,0.4);
    vertical-align: middle;
    margin-left: 6px;
}

/* ============================================================
   ANIMATED FLAG GIF (CSS)
   ============================================================ */

.us-flag {
    display: inline-block;
    width: 30px;
    height: 18px;
    background:
        linear-gradient(180deg,
            #BF0A30 0 14.3%, #FFFFFF 14.3% 28.6%,
            #BF0A30 28.6% 42.9%, #FFFFFF 42.9% 57.1%,
            #BF0A30 57.1% 71.4%, #FFFFFF 71.4% 85.7%,
            #BF0A30 85.7% 100%);
    position: relative;
    vertical-align: middle;
    margin: 0 6px;
    border: 1px solid #444;
    animation: flag-wave 2.5s ease-in-out infinite;
    transform-origin: left center;
}

.us-flag::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 12px;
    height: 57%;
    background: #002868;
    border-right: 1px solid #444;
    border-bottom: 1px solid #444;
}

@keyframes flag-wave {
    0%, 100% { transform: skewY(-1.5deg) scaleX(1); }
    50%      { transform: skewY(1.5deg)  scaleX(0.96); }
}

/* ============================================================
   DIVIDER — classic beveled horizontal rule (was: flame divider)
   ============================================================ */

.flame-divider {
    height: 0;
    margin: 22px 0;
    border-top: 2px solid #8B7355;
    border-bottom: 1px solid #FFFFFF;
    background: none;
    animation: none;
    text-align: center;
}

.flame-divider::before { content: ""; }

/* ============================================================
   SECTION BOXES
   ============================================================ */

.section-box {
    border: none;
    padding: 4px 0 14px;
    margin: 18px 0;
}

.inner-box {
    background-color: #EEE3C0;
    border: 2px ridge #8B7355;
    padding: 16px;
    margin: 14px 0;
    text-align: center;
}

/* ============================================================
   CONTENT TYPOGRAPHY
   ============================================================ */

p {
    margin: 10px 0;
    text-align: left;
    color: #1A1A1A;
}

p.lead { font-size: 15px; }

p.lead::first-letter {
    float: left;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 48px;
    line-height: 0.9;
    font-weight: bold;
    margin: 4px 8px -2px 0;
    color: #C41E3A;
}

ul {
    text-align: left;
    list-style: square;
    padding-left: 28px;
    color: #1A1A1A;
}

ul li { padding: 3px 0; }
ul li::marker { color: #1B2845; }

/* ============================================================
   PROJECT CARDS — cream boxes with tan ridge border
   ============================================================ */

.project-card {
    border: 2px ridge #8B7355;
    background-color: #EEE3C0;
    padding: 14px 16px;
    margin: 14px 0;
    text-align: left;
}

.project-card h3 {
    margin: 0 0 4px;
    color: #1B2845;
    font-size: 20px;
    letter-spacing: 0;
}

.project-card .project-deck {
    font-style: italic;
    font-size: 13px;
    color: #6B4E1F;
    margin: 0 0 8px;
    letter-spacing: 0;
}

.project-card .project-desc {
    color: #1A1A1A;
    font-size: 14px;
}

/* ============================================================
   HIT COUNTER — back to classic green LCD on black
   ============================================================ */

.hit-counter {
    display: inline-block;
    background-color: #000000;
    border: 2px inset #4A4A4A;
    padding: 4px 8px;
    color: #00FF00;
    font-family: "Courier New", Courier, monospace;
    font-weight: bold;
    font-size: 24px;
    letter-spacing: 4px;
    margin: 0 2px;
    text-shadow: 0 0 5px rgba(0,255,0,0.7);
}

/* ============================================================
   WEBRING
   ============================================================ */

.webring {
    border: 3px ridge #8B7355;
    background-color: #EEE3C0;
    padding: 12px 18px;
    margin: 16px 0;
    text-align: center;
    font-family: Georgia, serif;
    font-size: 13px;
}

.webring h4 {
    font-family: Georgia, serif;
    font-weight: bold;
    font-size: 16px;
    margin: 0 0 6px;
    color: #1B2845;
    text-transform: none;
    letter-spacing: 0;
    font-style: normal;
}

.webring p {
    text-align: center;
    margin: 6px 0;
    color: #1A1A1A;
    font-size: 13px;
}

.webring a { margin: 0 6px; }

/* ============================================================
   BADGES — period-typical, slightly varied colors
   ============================================================ */

.badge-shelf {
    text-align: center;
    margin: 12px 0;
    line-height: 2.4;
}

.netscape-badge,
.ie-badge,
.frames-badge,
.html-badge {
    display: inline-block;
    padding: 5px 12px;
    margin: 4px;
    border: 2px outset #C0C0C0;
    color: #FFFFFF !important;
    font-family: Arial, sans-serif;
    font-size: 11px;
    letter-spacing: 1px;
    text-decoration: none;
    font-weight: bold;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.4);
}

.netscape-badge { background: linear-gradient(180deg, #2A3B5F, #1B2845) !important; }
.ie-badge       { background: linear-gradient(180deg, #1A4480, #0E2E5C) !important; }
.frames-badge   { background: linear-gradient(180deg, #7A4A1F, #5C3514) !important; }
.html-badge     { background: linear-gradient(180deg, #C41E3A, #800020) !important; }

/* Image-based badges (e.g. real "Netscape Now!" / "Get IE" buttons) sit in the
   same shelf without the gradient/text wrapper styling. */
.badge-shelf .img-badge {
    display: inline-block;
    padding: 0;
    margin: 4px 6px;
    border: none;
    background: none !important;
    box-shadow: 1px 1px 0 rgba(0,0,0,0.4);
    vertical-align: middle;
    line-height: 0;
}

.badge-shelf .img-badge img {
    display: block;
    border: 0;
    image-rendering: pixelated; /* keep the chunky pixels crisp */
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

/* Match heights so a small (88x31) GIF and a larger PNG sit on the same line nicely */
.badge-shelf .img-badge.size-classic img { height: 31px; width: auto; }
.badge-shelf .img-badge.size-large img   { height: 60px; width: auto; }

.signature {
    margin-top: 20px;
    color: #6B4E1F;
    font-size: 11px;
    text-align: center;
    line-height: 1.7;
    font-family: Georgia, serif;
}

/* ============================================================
   POSTS / PAGES
   ============================================================ */

.post, .page-content { text-align: left; color: #1A1A1A; }

.post-meta {
    color: #6B4E1F;
    font-size: 12px;
    font-style: italic;
    text-align: center;
    border-top: 1px solid #8B7355;
    border-bottom: 1px solid #8B7355;
    padding: 4px 0;
    margin: 10px 0;
    font-family: Georgia, serif;
}

.post-content img {
    max-width: 100%;
    height: auto;
    border: 4px ridge #8B7355;
    padding: 4px;
    background: #FFFFFF;
}

/* Any image dropped anywhere in the content area: never overflow the page */
.content-region img {
    max-width: 100%;
    height: auto;
}

/* Period-correct framed photo. Use <img class="photo-frame"> or wrap in <span class="photo-frame"> */
.photo-frame {
    display: block;
    max-width: 320px;
    margin: 6px auto 14px;
    padding: 6px;
    background: #FFFFFF;
    border: 4px ridge #8B7355;
    box-shadow: 2px 2px 0 rgba(0,0,0,0.25);
    height: auto;
}

/* Float variants — like a magazine portrait next to the lead */
.photo-frame.align-left  { float: left;  margin: 6px 18px 10px 0; max-width: 240px; }
.photo-frame.align-right { float: right; margin: 6px 0 10px 18px; max-width: 240px; }

/* Caption that goes under a framed photo */
.photo-caption {
    display: block;
    text-align: center;
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 12px;
    color: #6B4E1F;
    margin: -8px auto 14px;
    max-width: 320px;
}

/* Clear floats inside section boxes so the image doesn't bleed into the next section */
.section-box::after {
    content: "";
    display: table;
    clear: both;
}

blockquote {
    border-left: 4px solid #C41E3A;
    background: #EEE3C0;
    padding: 6px 16px;
    margin: 12px 20px;
    color: #1A1A1A;
    font-style: italic;
    font-size: 15px;
}

code, pre {
    font-family: "Courier New", Courier, monospace;
    background-color: #EEE3C0;
    color: #1A1A1A;
    padding: 1px 5px;
    border: 1px solid #8B7355;
    font-size: 13px;
}

pre { padding: 10px; overflow-x: auto; text-align: left; }

/* ============================================================
   EMAIL LINK
   ============================================================ */

.email-link {
    display: inline-block;
    font-size: 16px;
    font-family: Georgia, serif;
    padding: 6px 14px;
    border: 2px ridge #8B7355;
    background-color: #EEE3C0;
    color: #1B2845;
    font-weight: bold;
}

.spin {
    display: inline-block;
    animation: spin 2.4s linear infinite;
    color: #C41E3A;
    font-weight: bold;
}

@keyframes spin {
    0%   { transform: rotateY(0deg); }
    100% { transform: rotateY(360deg); }
}

/* ============================================================
   ANIMATED MAILBOX (CSS)
   ============================================================ */

.mailbox {
    display: inline-block;
    width: 24px;
    height: 24px;
    position: relative;
    vertical-align: middle;
    margin-right: 6px;
}

.mailbox::before { /* mailbox body */
    content: "";
    position: absolute;
    bottom: 0;
    left: 4px;
    width: 14px;
    height: 12px;
    background: #2D5A3E;
    border-radius: 7px 7px 0 0;
    box-shadow: inset -2px 0 0 rgba(0,0,0,0.3);
}

.mailbox::after { /* mailbox post */
    content: "";
    position: absolute;
    bottom: 0;
    left: 9px;
    width: 4px;
    height: 14px;
    background: #6B4E1F;
}

.mailbox-flag {
    position: absolute;
    top: 4px;
    right: 1px;
    width: 1px;
    height: 8px;
    background: #444;
}

.mailbox-flag::after {
    content: "";
    position: absolute;
    top: 0;
    left: 1px;
    width: 5px;
    height: 4px;
    background: #C41E3A;
    animation: flag-toggle 3s ease-in-out infinite;
    transform-origin: left top;
}

@keyframes flag-toggle {
    0%, 40%   { transform: rotate(0deg); }
    50%, 90%  { transform: rotate(-90deg); }
    100%      { transform: rotate(0deg); }
}

/* ============================================================
   BLINK
   ============================================================ */

.blink {
    animation: blink 1.2s steps(2) infinite;
    color: #C41E3A;
}

@keyframes blink {
    0%, 60%     { opacity: 1; }
    60.1%, 100% { opacity: 0; }
}

/* ============================================================
   SCROLLBAR
   ============================================================ */

::-webkit-scrollbar { width: 16px; }
::-webkit-scrollbar-track { background: #BFA978; }
::-webkit-scrollbar-thumb { background: #8B7355; border: 2px outset #C8B998; }
::-webkit-scrollbar-thumb:hover { background: #6B4E1F; }

/* ============================================================
   MIDI MUSIC PLAYER
   ============================================================ */

.midi-player {
    text-align: center;
    margin: 0 0 10px;
    padding: 8px 12px;
    background-color: #E5D8A8;
    border: 2px ridge #8B7355;
    color: #1A1A1A;
    font-family: Georgia, serif;
    font-size: 13px;
}

.midi-label {
    color: #1B2845;
    font-weight: bold;
    margin-right: 6px;
}

.midi-select {
    font-family: Georgia, serif;
    font-size: 13px;
    border: 1px solid #8B7355;
    background-color: #FAF5E6;
    color: #1A1A1A;
    padding: 2px 4px;
    margin: 0 6px;
}

.midi-button {
    background: linear-gradient(180deg, #FAF5E6 0%, #D4C5A0 50%, #BFA978 100%);
    color: #1B2845;
    border: 3px outset #FAF5E6;
    padding: 4px 14px;
    font-family: Georgia, serif;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    margin: 0 4px;
}

.midi-button:hover {
    background: linear-gradient(180deg, #FFEDA0 0%, #FFD700 100%);
    color: #C41E3A;
}

.midi-button:active { border-style: inset; }

.midi-button.playing {
    background: linear-gradient(180deg, #FFD700 0%, #FF8C00 100%);
    color: #1A1A1A;
    border-style: inset;
    animation: midi-pulse 1.4s steps(2) infinite;
}

@keyframes midi-pulse {
    0%, 60%     { box-shadow: 0 0 4px rgba(255,140,0,0.4); }
    60.1%, 100% { box-shadow: 0 0 12px rgba(255,140,0,0.8); }
}

.midi-status {
    display: block;
    margin-top: 6px;
    color: #6B4E1F;
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 12px;
    min-height: 14px;
}

/* ============================================================
   CV / RESUME TABLE
   ============================================================ */

.cv-table { width: 100%; border-collapse: collapse; }

.cv-table td.cv-label {
    color: #6B4E1F;
    font-weight: bold;
    width: 28%;
    vertical-align: top;
    font-size: 13px;
    padding: 4px 8px;
}

.cv-table td.cv-value {
    vertical-align: top;
    color: #1A1A1A;
    padding: 4px 8px;
}

.cv-table td.cv-value .cv-note {
    color: #5C5C5C;
    font-size: 13px;
    display: block;
    margin-top: 2px;
}

/* ============================================================
   QUOTE BLOCK — small TR-style epigraph below masthead
   ============================================================ */

.epigraph {
    border-left: 4px solid #C41E3A;
    background-color: #EEE3C0;
    padding: 8px 16px;
    margin: 0 0 14px;
    color: #1A1A1A;
    font-style: italic;
    font-size: 14px;
    font-family: Georgia, serif;
}

.epigraph .attribution {
    display: block;
    text-align: right;
    font-style: normal;
    font-size: 12px;
    color: #6B4E1F;
    margin-top: 4px;
    font-variant: small-caps;
    letter-spacing: 1px;
}