/* ==========================================================================
   HOMEPAGE SPLASH
   ========================================================================= */
#splash .tidbits { 
    background-color: #0c0c0c; 
}

#splash .tidbits .splash-content > span { 
    font-family: 'Franchise', 'Arial Black', sans-serif; 
    font-weight: 900; 
    text-transform: uppercase; 
    color: var(--accent-blue); 
}

#splash .tidbits .splash-tag { 
    font-family: 'Lora', Georgia, serif; 
    font-style: italic; 
    color: #f5f5f5; 
}

/* ==========================================================================
   SIDEBAR / NAVBAR & FONTS
   ========================================================================== */
body.tidbits { 
    background-color: #0c0c0c; 
    color: #f5f5f5;
    font-family: 'Lora', Georgia, serif; /* Global default Lora */
}

/* Revert specific meta elements back to Inter */
.tidbits .nav-links a,
.tidbits .site-swap,
.tidbits .dictionary-term .pos,
.tidbits .dictionary-term .pronunciation {
    font-family: 'Inter', system-ui, sans-serif;
}

body.tidbits .sidebar { 
    background-color: #141414; 
    border-right: 1px solid #222; 
}

body.tidbits .brand-title-franchise { 
    color: var(--accent-blue); 
    text-decoration: none;
    font-size:5.5rem;
}

body.tidbits .site-swap { 
    color: #888; 
}

body.tidbits .site-swap:hover { 
    color: #fff; 
}

body.tidbits .nav-links a { 
    color: #777; 
    font-weight: 700; 
    text-transform: uppercase; 
    font-size: 1.25rem;
    letter-spacing: 0.05em; 
    transition: color 0.3s ease; 
}

body.tidbits .nav-links a:hover { 
    color: #ffffff; 
}

body.tidbits .menu-toggle { 
    color: #f5f5f5; 
}

@media (max-width: var(--breakpoint-min)) { 
    body.tidbits .nav-links { background-color: #141414; border-bottom: 1px solid #222; } 
}

/* Sidebar Border Container */
.sidebar-border {
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 12px; /* Thickness */
    flex-direction: column;
}

.accent-bar {
    flex: 1; /* Automatically gives each bar 20% height */
}

/* Mobile Override: Flip to Bottom */
@media (max-width: var(--breakpoint-min)) {
    .sidebar-border {
        width: 100%;
        height: 10px;
        top: auto;
        bottom: 0;
        right: 0;
        left: 0;
        flex-direction: row;
    }
}

/* ==========================================================================
   LINK UNDERLINE ENGINE (Strict Targets)
   ========================================================================== */
.tidbits .sidebar nav a,
.tidbits .item-title,
.tidbits .main-content p a {
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 1px;
    transition: background-size var(--transition-underline) cubic-bezier(0.16, 1, 0.3, 1);
    display: inline;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.tidbits .sidebar nav a:hover,
.tidbits .work-link:hover .item-title,
.tidbits .main-content p a:hover {
    background-size: 100% 1px;
}

/* ==========================================================================
   CONTENT LAYOUT STYLES
   ========================================================================== */
.showreel-outer {
    margin-left: -4rem;
    margin-right: -4rem;
    margin-top: -5rem;
    margin-bottom: 4.5rem;
}

@media (max-width: var(--breakpoint-min)) {
    .showreel-outer { margin: 1.5rem -1.5rem 3rem -1.5rem; }
}

.showreel-block { 
    width: 100%; 
    aspect-ratio: 16/9;
    background: #000; 
    overflow: hidden; 
}

.showreel-block video, 
.showreel-block iframe { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    border: none; 
}

.methodology-block { 
    margin-bottom: 6rem;
}

@media (min-width: 769px) {
    .methodology-block {
        max-width: 80%;
        margin-left: auto;
        margin-right: auto;
    }
}

.dictionary-term { 
    font-size: 2.2rem; 
    font-style: italic;
    color: var(--accent-blue); 
    margin-bottom: 1.2rem; 
    letter-spacing: 0.02em;
}

.dictionary-term span.pronunciation { 
    font-style: italic; 
    font-size: 1.2rem;
    color: #aaaaaa;
    margin-left: 0.75rem;
}

.dictionary-term span.pos {
    font-style: normal;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--accent-orange);
    border: 1px solid rgba(250, 133, 53, 0.3);
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    margin-left: 0.75rem;
    text-transform: uppercase;
}

.methodology-block p { 
    font-size: 1.5rem; 
    line-height: 1.75; 
    color: #e2e8f0; 
}

.portfolio-featured { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 4rem; 
    margin-bottom: 6rem; 
}

@media (max-width: 900px) { 
    .portfolio-featured { grid-template-columns: 1fr; } 
}

.work-link { 
    text-decoration: none; 
    color: inherit; 
    display: block; 
}

.work-card { 
    display: flex; 
    flex-direction: column; 
    gap: 1.2rem; 
}

.work-card .item-title, 
.list-item .item-title { transition: color 0.3s ease; }

.media-container { 
    width: 100%; 
    aspect-ratio: 16/9; 
    background-color: #121212; 
    border: 2px solid #222; 
    transition: border-color 0.3s ease, transform 0.2s cubic-bezier(0.25, 1, 0.5, 1); 
}

.item-meta-block { 
    display: flex; 
    flex-direction: column; 
    gap: 0.35rem; 
}

.item-title { 
    font-family: 'Franchise', sans-serif; 
    font-size: 2.1rem; 
    line-height: 1.0; 
    color: #fff; 
    transition: color 0.2s ease; 
    letter-spacing: 0.03em; 
    margin: 0;
}

.item-blurb { 
    color: #888888; 
    font-size: 0.95rem; 
}

.work-link:hover .item-title { 
    color: #ffffff; 
}

.work-link:hover .media-container { 
    transform: scale(1.01); 
}

/* --- FEATURED SECTION (Indices 1 & 2) --- */
.portfolio-featured .work-link:nth-child(1):hover .item-title, 
.portfolio-featured .work-link:nth-child(1):hover .media-container { border-color: var(--accent-blue); color: var(--accent-blue); }

.portfolio-featured .work-link:nth-child(2):hover .item-title, 
.portfolio-featured .work-link:nth-child(2):hover .media-container { border-color: var(--accent-yellow); color: var(--accent-yellow); }

/* --- LIST SECTION (Indices 3, 4, 5, 6, 7, 8) --- */
.portfolio-list .work-link:nth-child(5n+1):hover .item-title, 
.portfolio-list .work-link:nth-child(5n+1):hover .media-container { border-color: var(--accent-green); color: var(--accent-green); }

.portfolio-list .work-link:nth-child(5n+2):hover .item-title, 
.portfolio-list .work-link:nth-child(5n+2):hover .media-container { border-color: var(--accent-red); color: var(--accent-red); }

.portfolio-list .work-link:nth-child(5n+3):hover .item-title, 
.portfolio-list .work-link:nth-child(5n+3):hover .media-container { border-color: var(--accent-orange); color: var(--accent-orange); }

.portfolio-list .work-link:nth-child(5n+4):hover .item-title, 
.portfolio-list .work-link:nth-child(5n+4):hover .media-container { border-color: var(--accent-blue); color: var(--accent-blue); }

.portfolio-list .work-link:nth-child(5n+5):hover .item-title, 
.portfolio-list .work-link:nth-child(5n+5):hover .media-container { border-color: var(--accent-yellow); color: var(--accent-yellow); }

.portfolio-list { 
    display: flex; 
    flex-direction: column; 
    gap: 1.5rem; 
    padding-top: 1rem; 
}

.list-item { 
    display: grid; 
    grid-template-columns: 1fr 4fr;
    gap: 2.5rem; 
    align-items: center; 
    padding: 1rem; 
    transition: background 0.2s ease; 
    border-radius: 4px; 
}

.work-link:hover .list-item { 
    background: #131313; 
}

.thumb { 
    width: 100%; 
    aspect-ratio: 16/9; 
    background: #161616; 
    border: 2px solid #222; 
    transition: border-color 0.3s ease; 
}