/*
Theme Name: Alex Williams Recovered
Theme URI: https://www.alex-williams.com/
Author: Sorce Web Design / recovery build
Description: Responsive reconstruction of the Alex Williams portfolio recovered from the Internet Archive.
Version: 1.0.0
Text Domain: alex-williams-recovered
*/

:root{--blue:#3498c8;--orange:#f78a05;--ink:#444;--paper:#fff;--line:#e7e7e7;--max:1280px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--ink);font:16px/1.55 Arial,Helvetica,sans-serif}
a{color:#d97800;text-decoration:underline;text-underline-offset:2px}
a:hover,a:focus{color:#9e5700}
img{max-width:100%;height:auto}
.site-shell{width:min(calc(100% - 40px),var(--max));margin:auto}
.site-header{background:#fff;border-top:5px solid #111}
.header-top{height:42px;background:var(--blue);border-bottom:4px solid var(--orange)}
.brand {
    min-height: 158px;
    display: grid;
    grid-template-columns: minmax(340px, 1fr) minmax(480px, 661px);
    align-items: center;
    gap: 30px;
    overflow: hidden;
}

.brand-copy {
    display: block;
    color: #444;
    text-decoration: none;
}

.brand-title {
    display: block;
    color: #f78a05;
    font-family: "Arial Narrow", Arial, sans-serif;
    font-size: 48px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.brand-subtitle {
    display: block;
    margin-top: 8px;
    color: #444;
    font-family: "Arial Narrow", Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
}

.brand-art {
    display: block;
    width: 100%;
    height: auto;
}
.top-nav{background:var(--blue);border-bottom:4px solid var(--orange)}
.top-nav ul{display:flex;flex-wrap:wrap;gap:0;list-style:none;margin:0;padding:0}
.top-nav a{display:block;padding:16px 24px;color:#fff;text-decoration:none;text-transform:uppercase;font:700 18px/1.1 "Arial Narrow",Arial,sans-serif}
.top-nav a:hover,.top-nav .current-menu-item>a{color:#ffe0b2;background:rgba(0,0,0,.08)}
.mobile-toggle{display:none;width:100%;padding:14px 18px;border:0;background:var(--blue);color:#fff;text-align:left;font-weight:700;font-size:17px}
.page-grid{display:grid;grid-template-columns:280px minmax(0,1fr) 235px;gap:20px;padding:38px 20px 52px}
.portfolio-nav,.book-panel{background:var(--blue);color:#fff;padding:18px 0}
.portfolio-nav ul{list-style:none;margin:0;padding:0}
.portfolio-nav a{display:block;padding:9px 22px;color:#fff;text-decoration:none;text-transform:uppercase;font:700 18px/1.15 "Arial Narrow",Arial,sans-serif}
.portfolio-nav a:hover,.portfolio-nav .current>a{color:#ffd18f;background:rgba(0,0,0,.08)}
.portfolio-nav .children{display:none;background:rgba(0,0,0,.08)}
.portfolio-nav li:hover>.children,.portfolio-nav li:focus-within>.children,.portfolio-nav li.current>.children{display:block}
.portfolio-nav .children a{font-size:15px;padding-left:34px;text-transform:none}
.content{min-width:0;padding:4px 0 30px}
.content h1,.content h2,.content h3{color:#3f3f3f;font-family:"Arial Narrow",Arial,sans-serif;line-height:1.15}
.content h1{margin-top:0;font-size:2rem;text-transform:uppercase}
.content h2{font-size:1.55rem}
.content iframe{max-width:100%}
.content .wp-block-columns{display:flex;gap:20px;align-items:flex-start}
.content .wp-block-column{min-width:0;flex:1}
.book-panel{padding:18px 14px}
.book-panel h2{margin:0 0 15px;color:#fff;font:700 18px/1.2 "Arial Narrow",Arial,sans-serif;text-transform:uppercase}
.book{display:block;margin-bottom:14px;padding:9px;background:#fff;color:#333;text-decoration:none}
.book img{display:block;width:100%;height:auto}
.book span{display:block;margin-top:6px;color:#d00;font-size:12px;font-weight:700;text-align:right}
.site-footer{background:#222;color:#ccc;padding:22px 0;font-size:14px}
.site-footer a{color:#fff}
.recovery-note{padding:12px 16px;border-left:4px solid var(--orange);background:#fff5e7}
.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.portfolio-nav,
.book-panel {
    align-self: start;
}
.missing-archive-image {
    margin: 24px 0;
    padding: 28px;
    border: 2px dashed #3498c8;
    background: #f3f9fc;
    color: #444;
    text-align: center;
}

.missing-archive-image strong {
    display: block;
    margin-bottom: 6px;
    color: #2d86b1;
    font-size: 18px;
}
.portfolio-index {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 28px;
}

.portfolio-index a {
    position: relative;
    display: flex;
    min-height: 105px;
    padding: 22px;
    flex-direction: column;
    justify-content: center;
    border-left: 5px solid #f78a05;
    background: #3498c8;
    color: #fff;
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.portfolio-index a:hover,
.portfolio-index a:focus {
    background: #287fa9;
    color: #fff;
    transform: translateY(-2px);
}

.portfolio-index strong {
    font-family: "Arial Narrow", Arial, sans-serif;
    font-size: 20px;
    line-height: 1.2;
    text-transform: uppercase;
}

.portfolio-index span {
    margin-top: 8px;
    color: #fff1d9;
    font-size: 14px;
}

@media (max-width: 720px) {
    .portfolio-index {
        grid-template-columns: 1fr;
    }
}
@media(max-width:980px){.page-grid{grid-template-columns:230px minmax(0,1fr)}.book-panel{display:none}.brand{min-height:120px}.top-nav a{padding:14px 16px;font-size:16px}}
@media(max-width:720px){.site-shell{width:min(calc(100% - 24px),var(--max))}.header-top{height:16px}.brand{min-height:88px}.page-grid{display:block;padding-top:18px}.mobile-toggle{display:block}.top-nav ul{display:none}.top-nav.open ul{display:block}.top-nav li{width:100%}.portfolio-nav{margin-bottom:24px}.portfolio-nav>ul{display:grid;grid-template-columns:1fr 1fr}.portfolio-nav a{font-size:15px;padding:10px 14px}.portfolio-nav .children{grid-column:1/-1}.content .wp-block-columns{display:block}.content h1{font-size:1.7rem} .brand {
        display: block;
        padding: 22px 0;
    }

    .brand-title {
        font-size: 36px;
    }

    .brand-subtitle {
        font-size: 12px;
    }

    .brand-art {
        margin-top: 18px;
    }}
@media(max-width:430px){.portfolio-nav>ul{display:block}.brand{min-height:70px}}