/* --- COLOR LIBRARY --- */
:root {
    --color-black:   #000000;
    --color-white:   #FFFFFF;
    --color-orange:  #FFBB66; 
    --color-blue:    #A9D8FF; 
    --color-yellow:  #FFE26E;
	--color-cream:   #FDFBD4;
    --gray-75:       #404040; 
    --gray-25:       #BFBFBF; 
}

/* --- LOCAL FONT LOADING --- */
@font-face {
    font-family: 'Jeju Myeongjo';
    src: url('JejuMyeongjo-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* --- GLOBAL RESET --- */
* {
    font-family: 'Jeju Myeongjo', serif;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: rgba(253, 251, 212, 0.4);
    display: flex;
    flex-direction: column;
    align-items: center; 
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
}

/* --- VIEWPORT SCALING --- */
/* Locks layout to 1440px design width and scales uniformly on resize */
.page-wrapper, footer.bottom-footer-bar {
    width: 100vw;
    max-width: 100vw;
}

html {
    font-size: clamp(8px, 1.1vw, 16px);
    scroll-behavior: smooth;
}

/* --- INDEPENDENT HOME ICON --- */
.corner-home-link {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 2000;
}
.home-icon-img {
    width: 30px; 
    height: auto;
    display: block;
}

/* --- NAVIGATION BAR --- */
.top-nav { 
    margin-top: 24px;
    margin-bottom: 20px;
    display: flex; 
    justify-content: center; 
    gap: 10px; 
}

.nav-link {
    text-decoration: none;
    background-color: var(--color-black);
    color: var(--color-white);
    padding: 8px 16px;
    font-size: 14px;
    outline: 2px solid transparent;
    outline-offset: 3px;
    transition: outline-color 0.4s ease;
	position: relative;
	z-index: 201;
}
.nav-link:hover { outline-color: var(--color-black); }

/* --- NAVIGATION DROP-DOWN & UNIFIED OUTLINE --- */
.nav-dropdown { position: relative; display: inline-block; z-index: 200; }
.nav-dropdown::after {
    content: '';
    position: absolute;
    top: -3px; left: -3px; right: -3px; bottom: -3px;
    outline: 2px solid transparent;
    pointer-events: none;
    transition: outline-color 0.4s ease, bottom 0.4s ease;
}
.nav-dropdown:hover::after {
    outline-color: var(--color-black);
    bottom: calc(-100% - 53px); 
}

.portfolio-trigger { 
    background-color: var(--color-black); 
    color: var(--color-white); 
    padding: 8px 16px; 
    font-size: 14px; 
    display: block; 
    cursor: default; 
}

.dropdown-content { 
    display: none;
    position: absolute; 
    top: 100%; 
    left: 0; 
    width: 100%; 
    background-color: rgba(0, 0, 0, 0.8); 
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    flex-direction: column; 
}
.nav-dropdown:hover .dropdown-content { display: flex; }

.dropdown-item { 
    text-decoration: none; 
    color: var(--color-white); 
    font-size: 14px; 
    padding: 12px 0; 
    text-align: center; 
}
.dropdown-item.prof-link:hover { background-color: var(--color-orange); color: var(--color-black); }
.dropdown-item.pers-link:hover { background-color: var(--color-yellow); color: var(--color-black); }
.dropdown-divider { height: 1px; background-color: var(--gray-75); width: 90%; align-self: center; }

/* --- HOME PAGE CONTENT --- */
.page-index .site-subtitle { font-size: 128px; line-height: 0.8; font-weight: 400; text-transform: uppercase; }
.page-index .aka { font-style: italic; font-size: 18px; margin-top: 4px; align-self: flex-end; }
.page-index .main-image-container { display: flex; justify-content: center; }
.page-index .hero-img { width: 500px; height: auto; }
.page-index .overlap-header { margin-top: -8px; display: flex; flex-direction: column; align-items: center; width: fit-content; }

/* --- INTERACTIVE BUTTONS --- */
.page-index .interactive-menu { margin-top: 64px; display: flex; flex-direction: column; align-items: center; gap: 15px; padding-bottom: 50px; }
.page-index .portfolio-container { position: relative; width: 350px; height: 64px; }
.page-index .portfolio-base { background-color: var(--color-orange); color: var(--color-black); font-size: 24px; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.page-index .split-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; }
.page-index .portfolio-container:hover .split-overlay { opacity: 1; pointer-events: auto; }
.page-index .split-box { width: 50%; height: 100%; display: flex; align-items: center; justify-content: center; text-decoration: none; color: var(--color-black); font-size: 14px; font-weight: bold; background-color: rgba(253, 251, 212, 1); transition: background-color 0.2s; }
.page-index .split-box.left:hover { background-color: var(--color-orange); }
.page-index .split-box.right:hover { background-color: var(--color-yellow); }
.page-index .box-link { text-decoration: none; color: var(--color-black); font-size: 24px; padding: 10px 0; width: 280px; text-align: center; background-color: var(--color-blue); outline: 2px solid transparent; outline-offset: 4px; transition: outline-color 0.4s ease; }
.page-index .box-link:hover { outline-color: var(--color-black); }

/* --- INDEPENDENT BOTTOM BAR --- */
.bottom-footer-bar {
    width: 100%;
    height: 48px; 
    background-color: var(--color-black);
    display: flex;
    justify-content: center; 
    align-items: center;     
    margin-top: auto; 
    position: relative;
    top: 8px; /* 8px Nudge */
}
.bottom-footer-content { color: var(--color-white); font-size: 14px; letter-spacing: 2px; display: flex; gap: 20px; }
.footer-link { color: var(--color-white); text-decoration: none; padding: 5px 10px; border: 1px solid transparent; transition: border-color 0.3s; }
.footer-link:hover { border-color: var(--color-white); }

/* --- ABOUT PAGE LAYOUT --- */
.page-about .about-container {
    display: flex;
    max-width: 1000px;
    width: 90%;
    margin-top: 40px;
    gap: 0;
    padding-bottom: 80px;
    align-items: flex-start;
    position: relative;
}

.page-about .about-column {
    flex: 1;
    padding: 20px 30px;
}

.page-about .section-title {
    font-size: 28px;
    display: inline-block;
    margin-bottom: 25px;
    border-bottom: 2px solid var(--color-black);
    padding-bottom: 4px;
}
.page-about .no-underline { border-bottom: none !important; }

.page-about .about-text-content {
    margin-bottom: 16px;
    line-height: 1.7;
    font-size: 15px;
    position: relative;
    z-index: 10;
}

.page-about .bio-image-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 28px;
    position: relative;
    z-index: 1;
}

.page-about .bio-section {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 20px 30px 0 30px;
    min-height: 400px;
}

.page-about .bio-bg-img {
    width: 200%;
    height: auto;
    display: block;
    margin-top: 100px;
    margin-left: -320px;
	outline: 2px solid black;
	outline-offset: 4px;
}

.page-about .bio-text {
    z-index: 2;
    padding: 12px 0 16px 0;
}

.page-about .bio-text h2 {
    color: var(--color-black);
}

.page-about .bio-text p {
    color: var(--color-white);
    text-shadow: 0 0 12px rgba(0,0,0,0.8), 0 0 24px rgba(0,0,0,0.6);
}

.page-about .bio-intro {
    color: var(--color-white);
    font-size: 36px;
    line-height: 1.7;
    font-weight: bold;
    text-shadow: 0 0 12px rgba(0,0,0,0.8), 0 0 24px rgba(0,0,0,0.6);
}

.page-about .bio-desc {
    color: var(--color-white);
    font-size: 20px;
    line-height: 1.7;
    padding: 0 30px;
    max-width: 600px;
    text-shadow: 0 0 24px rgba(0,0,0,1), 0 0 24px rgba(0,0,0,1);
    text-align: center;
    font-style: italic;
}

.page-about .bio-photo {
    max-width: 100%;
    height: auto;
    display: block;
}

/* --- VERTICAL DIVIDER --- */
.page-about .vertical-divider {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 2px;
    height: 150%;
    pointer-events: none;
}

.page-about .line {
    width: 2px;
    height: 100%;
    background-color: var(--color-black);
}

/* --- DOTTED MAN (fully independent) --- */
.page-about .dotted-man-img {
    position: absolute;
    width: 180px;
    height: auto;
    pointer-events: none;
}

/* --- RESUME SECTION --- */
.page-about .info-section {
    padding-top: 20px;
}

.page-about .info-block {
    margin-bottom: 8px;
}

.page-about .resume-category {
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gray-75);
    margin-bottom: 14px;
    font-weight: normal;
}

.page-about .resume-entry {
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;
}

.page-about .resume-role {
    font-size: 15px;
    font-weight: bold;
    color: var(--color-black);
}

.page-about .resume-company {
    font-size: 14px;
    color: var(--gray-75);
    margin-top: 2px;
}

.page-about .resume-years {
    font-size: 13px;
    color: var(--gray-25);
    margin-top: 2px;
    font-style: italic;
}

.page-about .resume-divider {
    height: 1px;
    background-color: var(--gray-25);
    width: 100%;
    margin: 20px 0;
}

.page-about .resume-skills-list {
    font-size: 14px;
    line-height: 2;
    color: var(--gray-75);
}

.page-about .resume-contact-line {
    font-size: 14px;
    margin-bottom: 10px;
    display: flex;
    gap: 8px;
    align-items: baseline;
    flex-wrap: wrap;
}

.page-about .resume-label {
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--gray-25);
    flex-shrink: 0;
}

.page-about .resume-email {
    color: var(--color-black);
    text-decoration: none;
    border-bottom: 1px solid var(--gray-25);
    transition: border-color 0.2s, color 0.2s;
}
.page-about .resume-email:hover {
    color: var(--gray-75);
    border-bottom-color: var(--color-black);
}

.page-about .resume-contact-btn {
    display: inline-block;
    background-color: var(--color-blue);
    color: var(--color-black);
    text-decoration: none;
    padding: 12px 32px;
    font-size: 15px;
    outline: 2px solid transparent;
    outline-offset: 4px;
    transition: outline-color 0.4s ease;
    margin-top: 8px;
}
.page-about .resume-contact-btn:hover {
    outline-color: var(--color-black);
}

/* --- ABOUT PAGE BIO POSITIONING --- */
/* Use top/left to position. They are pinned and won't affect each other. */
.page-about #bio-photo   { position: absolute; top: 20px;   left: 100px;   width: 136%; }
.page-about #bio-title   { position: absolute; top: 40px;  left: -222px;  z-index: 2; width: max-content }
.page-about #bio-name    { position: absolute; top: 80px;  left: 20px;  z-index: 2; color: var(--color-white); font-size: 36px; font-weight: bold; text-shadow: 0 0 12px rgba(0,0,0,0.8); width: max-content; }
.page-about #bio-subtext { position: absolute; top: 180px; left: -230px;  z-index: 2; width: max-content; max-width: 400px; text-align: left; }

/* --- ABOUT PAGE CONTACT POSITIONING --- */
.page-about #about-contact-info { transform: translateY(400px) translateX(110px); }
.page-about #about-contact-btn  { transform: translateY(90px) translateX(125px); }
.page-about #about-resume-dl  { transform: translateY(90px) translateX(142px); }
#about-resume-dl .resume-contact-btn { background-color: var(--color-yellow); }

/* --- ABOUT PAGE DOTTED MAN POSITIONING --- */
.page-about #dotted-man {transform: translateY(150px) translateX(630px); width: 20%; }

/* --- ABOUT PAGE DIVIDER POSITIONING --- */
.page-about #about-divider { transform: translateY(-110px) translateX(-915px); width: 240%; }
.page-about #about-divider-2 { transform: translateY(440px) translateX(-152px); width: 240%; }

/* --- ABOUT PAGE BRACKET --- */
.page-about #bracket-img { position: absolute; top: 495px; left: 580px; width: 4%;}
.page-about #bracket-img-2 { position: absolute; top: 495px; left: 840px; width: 4%; transform: scaleX(-1); }

/* --- ABOUT PAGE SOCIALS LABEL --- */
.page-about #about-socials-label { position: absolute; top: 590px; left: 670px; font-style: italic; font-weight: bold; letter-spacing: 10px; }

/* --- CONTACT PAGE --- */
.page-contact .page-header { font-size: 32px; font-weight: 400; }
.page-contact .content-body { width: 90%; max-width: 800px; padding: 20px; display: flex; flex-direction: column; align-items: center; margin: 0 auto; }
.page-contact .contact-form { display: flex; flex-direction: column; width: 100%; max-width: 500px; gap: 15px; margin: 40px auto; }
.page-contact .form-input, .page-contact .form-textarea { width: 100%; padding: 12px; border: 2px solid var(--color-black); font-size: 16px; outline: none; }
.page-contact .submit-btn { background-color: var(--color-black); color: var(--color-white); padding: 15px; font-size: 18px; border: none; cursor: pointer; transition: opacity 0.3s; }
.page-contact .submit-btn:hover { opacity: 0.8; }

/* --- GALLERY CAPTION --- */
.page-personal .gallery-caption, .page-professional .gallery-caption { font-weight: 700; font-style: italic; }

/* --- PORTFOLIO GRID --- */
.page-personal .portfolio-section, .page-professional .portfolio-section { width: 90%; max-width: 1000px; padding: 20px; }
.page-personal .page-title, .page-professional .page-title { font-size: 32px; font-weight: 400; margin-bottom: 40px; }
.page-personal .portfolio-grid, .page-professional .portfolio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.page-personal .portfolio-item, .page-professional .portfolio-item { aspect-ratio: 1; background-color: var(--gray-25); display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid transparent; transition: border-color 0.3s; }
.page-personal .portfolio-item:hover, .page-professional .portfolio-item:hover { border-color: var(--color-black); }
.page-personal .portfolio-item img, .page-professional .portfolio-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.page-personal .portfolio-item span, .page-professional .portfolio-item span { font-size: 13px; color: var(--gray-75); }

.page-personal .view-count, .page-professional .view-count {
    font-size: 16px;
    color: var(--gray-75);
    font-style: italic;
    margin-top: 4px;
}

/* ============================================================
   PERSONAL PAGE — INDIVIDUAL ITEM POSITIONING
   Use transform: translateY() / translateX() to nudge each
   item independently without affecting anything around it.
   Positive Y = down, Negative Y = up
   Positive X = right, Negative X = left
   ============================================================ */

/* --- LABELS --- */
.page-personal #personal-tag     { transform: translateY(-64px) translateX(-180px); }
.page-personal #label-animation  { transform: translateY(-10px) translateX(-100px); }
.page-personal #label-design     { transform: translateY(330px) translateX(-30px); }

/* --- ANIMATION THUMBNAILS --- */
.page-personal #thumb-1          { transform: translateY(-100px) translateX(450px); width: 140%; }
.page-personal #thumb-2          { transform: translateY(300px) translateX(-795px); width: 140%; }
.page-personal #thumb-3          { transform: translateY(315px) translateX(281px); width: 68%; }

/* --- ANIMATION CAPTIONS --- */
.page-personal #caption-shortchanged  { transform: translateY(-175px) translateX(-375px); }
.page-personal #caption-summer-nite   { transform: translateY(-220px) translateX(880px); }
.page-personal #caption-honey-sucker  { transform: translateY(-200px) translateX(-400px); }

/* --- ANIMATION VIEW COUNTS --- */
.page-personal #views-caption-shortchanged  { transform: translateY(-170px) translateX(-375px); }
.page-personal #views-caption-summer-nite   { transform: translateY(-215px) translateX(944px); text-align: right; }
.page-personal #views-caption-honey-sucker  { transform: translateY(-195px) translateX(-210px); }

/* --- DESIGN IMAGES --- */
.page-personal #img-spanish-house   { transform: translateY(300px) translateX(-320px); }
.page-personal #img-blue-outside    { transform: translateY(300px) translateX(-320px); }
.page-personal #img-smoker          { transform: translateY(300px) translateX(-322px); width: 150%;}
.page-personal #img-winkelman       { transform: translateY(600px) translateX(180px); }
.page-personal #img-design8         { transform: translateY(-244px) translateX(0px); width: 100%;}
.page-personal #img-sketch          { transform: translateY(-950px) translateX(1030px); width: 70%; }
.page-personal #img-docdazzle       { transform: translateY(-2500px) translateX(200px); width: 160%; }
.page-personal #img-paddler         { transform: translateY(-2469px) translateX(764px); width: 60%;}
.page-personal #img-design1         { transform: translateY(-1500px) translateX(0px); }
.page-personal #img-coast-crawlers  { transform: translateY(-1500px) translateX(0px); }
.page-personal #img-bleghfd         { transform: translateY(-1500px) translateX(0px); }
.page-personal #img-snake-tribe     { transform: translateY(-1680px) translateX(0px); width: 182%; }
.page-personal #img-gtn             { transform: translateY(50px) translateX(-480px); width: 200%; }
.page-personal #img-usrfinal        { transform: translateY(-200px) translateX(100px); width: 150%; }
.page-personal #img-holdstill       { transform: translateY(-2000px) translateX(-550px); width: 200%; }
/* --- DIAMOND ROWS --- */
.page-personal #diamonds-1      { transform: translateY(50px) translateX(0px); }
.page-personal #diamonds-2      { transform: translateY(-775px) translateX(0px); }
.page-personal #diamonds-3      { transform: translateY(500px) translateX(0px); }

/* --- PAINT DECORATIONS --- */
.page-personal #paint-left          { transform: translateY(-280px) translateX(-240px); width: 50%;}
.page-personal #paint-right-anim    { transform: rotate(-90deg) translateY(490px) translateX(-187px); width: 70%; }
.page-personal #paint-right-design  { transform: rotate(90deg) translateY(1350px) translateX(-400px); width: 75%; }
/* ============================================================
   PROFESSIONAL PAGE — INDIVIDUAL ITEM POSITIONING
   Same system as personal page: transform to nudge,
   width to resize. IDs are on wrapper divs so moving
   one element never affects its neighbours.
   Positive Y = down,  Negative Y = up
   Positive X = right, Negative X = left
   ============================================================ */

/* --- PAGE TITLE TAG --- */
.page-professional #prof-tag             { transform: translateY(-67px) translateX(220px); }
.page-professional #prof-title-bar       { transform: translateY(0px) translateX(0px); }

/* --- WIZARD + SMILING FRIENDS --- */
.page-professional #logo-1               { transform: translateY(-150px) translateX(250px); }
.page-professional #img-wizard           { transform: translateY(-40px) translateX(-531px); width: 120%; }
.page-professional #sf-band              { transform: translateY(-122px) translateX(-523px); width: 90%; }
.page-professional #sf-band-2            { transform: translateY(-150px) translateX(-500px); width: 90%; }
.page-professional #sf-band-3            { transform: translateY(-270px) translateX(650px); width: 90%; }
.page-professional #img-charlie         { transform: translateY(0px) translateX(0px); width: 25%; }
.page-professional #logo-3               { transform: translateY(-800px) translateX(700px); }
.page-professional #img-benfranklin      { transform: translateY(0px) translateX(0px); width: 35%; }
.page-professional #logo-4               { transform: translateY(-1262px) translateX(1250px); }
.page-professional #img-glep             { transform: translateY(0px) translateX(0px); width: 60%; }
.page-professional #logo-2               { transform: translateY(-1140px) translateX(1250px); }
/* --- CHARACTER UNITS --- */
.page-professional #charlie-unit        { transform: translateY(235px) translateX(817px); width: 46.25%; }
.page-professional #logo-3              { transform: translateY(0px) translateX(50px); }
.page-professional #benfranklin-unit    { transform: translateY(-1215px) translateX(620px); width: 65%; }
.page-professional #logo-4              { transform: translateY(-10px) translateX(20px); }
.page-professional #glep-unit           { transform: translateY(-1130px) translateX(0px); }
 /* --- COLOR LIBRARY --- */
:root {
    --color-black:   #000000;
    --color-white:   #FFFFFF;
    --color-orange:  #FFBB66; 
    --color-blue:    #A9D8FF; 
    --color-yellow:  #FFE26E;
	--color-cream:   #FDFBD4;
    --gray-75:       #404040; 
    --gray-25:       #BFBFBF; 
}

/* --- LOCAL FONT LOADING --- */
@font-face {
    font-family: 'Jeju Myeongjo';
    src: url('JejuMyeongjo-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* --- GLOBAL RESET --- */
* {
    font-family: 'Jeju Myeongjo', serif;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: rgba(253, 251, 212, 0.4);
    display: flex;
    flex-direction: column;
    align-items: center; 
    min-height: 100vh;
    overflow-x: visible;
    position: relative;
}

/* --- VIEWPORT SCALING --- */
/* Locks layout to 1440px design width and scales uniformly on resize */
.page-wrapper, footer.bottom-footer-bar {
    width: 100vw;
    max-width: 100vw;
}

html {
    font-size: clamp(8px, 1.1vw, 16px);
}

/* --- INDEPENDENT HOME ICON --- */
.corner-home-link {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 2000;
}
.home-icon-img {
    width: 30px; 
    height: auto;
    display: block;
}

/* --- NAVIGATION BAR --- */
.top-nav { 
    margin-top: 24px;
    margin-bottom: 20px;
    display: flex; 
    justify-content: center; 
    gap: 10px; 
}

.nav-link {
    text-decoration: none;
    background-color: var(--color-black);
    color: var(--color-white);
    padding: 8px 16px;
    font-size: 14px;
    outline: 2px solid transparent;
    outline-offset: 3px;
    transition: outline-color 0.4s ease;
	position: relative;
	z-index: 201;
}
.nav-link:hover { outline-color: var(--color-black); }

/* --- NAVIGATION DROP-DOWN & UNIFIED OUTLINE --- */
.nav-dropdown { position: relative; display: inline-block; z-index: 200; }
.nav-dropdown::after {
    content: '';
    position: absolute;
    top: -3px; left: -3px; right: -3px; bottom: -3px;
    outline: 2px solid transparent;
    pointer-events: none;
    transition: outline-color 0.4s ease, bottom 0.4s ease;
}
.nav-dropdown:hover::after {
    outline-color: var(--color-black);
    bottom: calc(-100% - 53px); 
}

.portfolio-trigger { 
    background-color: var(--color-black); 
    color: var(--color-white); 
    padding: 8px 16px; 
    font-size: 14px; 
    display: block; 
    cursor: default; 
}

.dropdown-content { 
    display: none;
    position: absolute; 
    top: 100%; 
    left: 0; 
    width: 100%; 
    background-color: rgba(0, 0, 0, 0.8); 
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    flex-direction: column; 
}
.nav-dropdown:hover .dropdown-content { display: flex; }

.dropdown-item { 
    text-decoration: none; 
    color: var(--color-white); 
    font-size: 14px; 
    padding: 12px 0; 
    text-align: center; 
}
.dropdown-item.prof-link:hover { background-color: var(--color-orange); color: var(--color-black); }
.dropdown-item.pers-link:hover { background-color: var(--color-yellow); color: var(--color-black); }
.dropdown-divider { height: 1px; background-color: var(--gray-75); width: 90%; align-self: center; }

/* --- HOME PAGE CONTENT --- */
.page-index .site-subtitle { font-size: 128px; line-height: 0.8; font-weight: 400; text-transform: uppercase; }
.page-index .aka { font-style: italic; font-size: 18px; margin-top: 4px; align-self: flex-end; }
.page-index .main-image-container { display: flex; justify-content: center; }
.page-index .hero-img { width: 500px; height: auto; }
.page-index .overlap-header { margin-top: -8px; display: flex; flex-direction: column; align-items: center; width: fit-content; }

/* --- INTERACTIVE BUTTONS --- */
.page-index .interactive-menu { margin-top: 64px; display: flex; flex-direction: column; align-items: center; gap: 15px; padding-bottom: 50px; }
.page-index .portfolio-container { position: relative; width: 350px; height: 64px; }
.page-index .portfolio-base { background-color: var(--color-orange); color: var(--color-black); font-size: 24px; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.page-index .split-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; }
.page-index .portfolio-container:hover .split-overlay { opacity: 1; pointer-events: auto; }
.page-index .split-box { width: 50%; height: 100%; display: flex; align-items: center; justify-content: center; text-decoration: none; color: var(--color-black); font-size: 14px; font-weight: bold; background-color: rgba(253, 251, 212, 1); transition: background-color 0.2s; }
.page-index .split-box.left:hover { background-color: var(--color-orange); }
.page-index .split-box.right:hover { background-color: var(--color-yellow); }
.page-index .box-link { text-decoration: none; color: var(--color-black); font-size: 24px; padding: 10px 0; width: 280px; text-align: center; background-color: var(--color-blue); outline: 2px solid transparent; outline-offset: 4px; transition: outline-color 0.4s ease; }
.page-index .box-link:hover { outline-color: var(--color-black); }

/* --- INDEPENDENT BOTTOM BAR --- */
.bottom-footer-bar {
    width: 100%;
    height: 48px; 
    background-color: var(--color-black);
    display: flex;
    justify-content: center; 
    align-items: center;     
    margin-top: auto; 
    position: relative;
    top: 8px; /* 8px Nudge */
}
.bottom-footer-content { color: var(--color-white); font-size: 14px; letter-spacing: 2px; display: flex; gap: 20px; }
.footer-link { color: var(--color-white); text-decoration: none; padding: 5px 10px; border: 1px solid transparent; transition: border-color 0.3s; }
.footer-link:hover { border-color: var(--color-white); }

/* --- ABOUT PAGE LAYOUT --- */
.page-about .about-container {
    display: flex;
    max-width: 1000px;
    width: 90%;
    margin-top: 40px;
    gap: 0;
    padding-bottom: 80px;
    align-items: flex-start;
    position: relative;
}

.page-about .about-column {
    flex: 1;
    padding: 20px 30px;
}

.page-about .section-title {
    font-size: 28px;
    display: inline-block;
    margin-bottom: 25px;
    border-bottom: 2px solid var(--color-black);
    padding-bottom: 4px;
}
.page-about .no-underline { border-bottom: none !important; }

.page-about .about-text-content {
    margin-bottom: 16px;
    line-height: 1.7;
    font-size: 15px;
    position: relative;
    z-index: 10;
}

.page-about .bio-image-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 28px;
    position: relative;
    z-index: 1;
}

.page-about .bio-section {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 20px 30px 0 30px;
    min-height: 400px;
}

.page-about .bio-bg-img {
    width: 200%;
    height: auto;
    display: block;
    margin-top: 100px;
    margin-left: -320px;
	outline: 2px solid black;
	outline-offset: 4px;
}

.page-about .bio-text {
    z-index: 2;
    padding: 12px 0 16px 0;
}

.page-about .bio-text h2 {
    color: var(--color-black);
}

.page-about .bio-text p {
    color: var(--color-white);
    text-shadow: 0 0 12px rgba(0,0,0,0.8), 0 0 24px rgba(0,0,0,0.6);
}

.page-about .bio-intro {
    color: var(--color-white);
    font-size: 36px;
    line-height: 1.7;
    font-weight: bold;
    text-shadow: 0 0 12px rgba(0,0,0,0.8), 0 0 24px rgba(0,0,0,0.6);
}

.page-about .bio-desc {
    color: var(--color-white);
    font-size: 20px;
    line-height: 1.7;
    padding: 0 30px;
    max-width: 600px;
    text-shadow: 0 0 24px rgba(0,0,0,1), 0 0 24px rgba(0,0,0,1);
    text-align: center;
    font-style: italic;
}

.page-about .bio-photo {
    max-width: 100%;
    height: auto;
    display: block;
}

/* --- VERTICAL DIVIDER --- */
.page-about .vertical-divider {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 2px;
    height: 150%;
    pointer-events: none;
}

.page-about .line {
    width: 2px;
    height: 100%;
    background-color: var(--color-black);
}

/* --- DOTTED MAN (fully independent) --- */
.page-about .dotted-man-img {
    position: absolute;
    width: 180px;
    height: auto;
    pointer-events: none;
}

/* --- RESUME SECTION --- */
.page-about .info-section {
    padding-top: 20px;
}

.page-about .info-block {
    margin-bottom: 8px;
}

.page-about .resume-category {
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gray-75);
    margin-bottom: 14px;
    font-weight: normal;
}

.page-about .resume-entry {
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;
}

.page-about .resume-role {
    font-size: 15px;
    font-weight: bold;
    color: var(--color-black);
}

.page-about .resume-company {
    font-size: 14px;
    color: var(--gray-75);
    margin-top: 2px;
}

.page-about .resume-years {
    font-size: 13px;
    color: var(--gray-25);
    margin-top: 2px;
    font-style: italic;
}

.page-about .resume-divider {
    height: 1px;
    background-color: var(--gray-25);
    width: 100%;
    margin: 20px 0;
}

.page-about .resume-skills-list {
    font-size: 14px;
    line-height: 2;
    color: var(--gray-75);
}

.page-about .resume-contact-line {
    font-size: 14px;
    margin-bottom: 10px;
    display: flex;
    gap: 8px;
    align-items: baseline;
    flex-wrap: wrap;
}

.page-about .resume-label {
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--gray-25);
    flex-shrink: 0;
}

.page-about .resume-email {
    color: var(--color-black);
    text-decoration: none;
    border-bottom: 1px solid var(--gray-25);
    transition: border-color 0.2s, color 0.2s;
}
.page-about .resume-email:hover {
    color: var(--gray-75);
    border-bottom-color: var(--color-black);
}

.page-about .resume-contact-btn {
    display: inline-block;
    background-color: var(--color-blue);
    color: var(--color-black);
    text-decoration: none;
    padding: 12px 32px;
    font-size: 15px;
    outline: 2px solid transparent;
    outline-offset: 4px;
    transition: outline-color 0.4s ease;
    margin-top: 8px;
}
.page-about .resume-contact-btn:hover {
    outline-color: var(--color-black);
}

/* --- ABOUT PAGE BIO POSITIONING --- */
/* Use top/left to position. They are pinned and won't affect each other. */
.page-about #bio-photo   { position: absolute; top: 20px;   left: 100px;   width: 136%; }
.page-about #bio-title   { position: absolute; top: 40px;  left: -222px;  z-index: 2; width: max-content }
.page-about #bio-name    { position: absolute; top: 80px;  left: 20px;  z-index: 2; color: var(--color-white); font-size: 36px; font-weight: bold; text-shadow: 0 0 12px rgba(0,0,0,0.8); width: max-content; }
.page-about #bio-subtext { position: absolute; top: 180px; left: -230px;  z-index: 2; width: max-content; max-width: 400px; text-align: left; }

/* --- ABOUT PAGE CONTACT POSITIONING --- */
.page-about #about-contact-info { transform: translateY(400px) translateX(110px); }
.page-about #about-contact-btn  { transform: translateY(90px) translateX(125px); }
.page-about #about-resume-dl  { transform: translateY(90px) translateX(142px); }
#about-resume-dl .resume-contact-btn { background-color: var(--color-yellow); }

/* --- ABOUT PAGE DOTTED MAN POSITIONING --- */
.page-about #dotted-man {transform: translateY(150px) translateX(630px); width: 20%; }

/* --- ABOUT PAGE DIVIDER POSITIONING --- */
.page-about #about-divider { transform: translateY(-110px) translateX(-915px); width: 240%; }
.page-about #about-divider-2 { transform: translateY(440px) translateX(-152px); width: 240%; }

/* --- ABOUT PAGE BRACKET --- */
.page-about #bracket-img { position: absolute; top: 495px; left: 580px; width: 4%;}
.page-about #bracket-img-2 { position: absolute; top: 495px; left: 840px; width: 4%; transform: scaleX(-1); }

/* --- ABOUT PAGE SOCIALS LABEL --- */
.page-about #about-socials-label { position: absolute; top: 590px; left: 670px; font-style: italic; font-weight: bold; letter-spacing: 10px; }

/* --- CONTACT PAGE --- */
.page-contact .page-header { font-size: 32px; font-weight: 400; }
.page-contact .content-body { width: 90%; max-width: 800px; padding: 20px; display: flex; flex-direction: column; align-items: center; margin: 0 auto; }
.page-contact .contact-form { display: flex; flex-direction: column; width: 100%; max-width: 500px; gap: 15px; margin: 40px auto; }
.page-contact .form-input, .page-contact .form-textarea { width: 100%; padding: 12px; border: 2px solid var(--color-black); font-size: 16px; outline: none; }
.page-contact .submit-btn { background-color: var(--color-black); color: var(--color-white); padding: 15px; font-size: 18px; border: none; cursor: pointer; transition: opacity 0.3s; }
.page-contact .submit-btn:hover { opacity: 0.8; }

/* --- GALLERY CAPTION --- */
.page-personal .gallery-caption, .page-professional .gallery-caption { font-weight: 700; font-style: italic; }

/* --- PORTFOLIO GRID --- */
.page-personal .portfolio-section, .page-professional .portfolio-section { width: 90%; max-width: 1000px; padding: 20px; }
.page-personal .page-title, .page-professional .page-title { font-size: 32px; font-weight: 400; margin-bottom: 40px; }
.page-personal .portfolio-grid, .page-professional .portfolio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.page-personal .portfolio-item, .page-professional .portfolio-item { aspect-ratio: 1; background-color: var(--gray-25); display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid transparent; transition: border-color 0.3s; }
.page-personal .portfolio-item:hover, .page-professional .portfolio-item:hover { border-color: var(--color-black); }
.page-personal .portfolio-item img, .page-professional .portfolio-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.page-personal .portfolio-item span, .page-professional .portfolio-item span { font-size: 13px; color: var(--gray-75); }

.page-personal .view-count, .page-professional .view-count {
    font-size: 16px;
    color: var(--gray-75);
    font-style: italic;
    margin-top: 4px;
}

/* ============================================================
   PERSONAL PAGE — INDIVIDUAL ITEM POSITIONING
   Use transform: translateY() / translateX() to nudge each
   item independently without affecting anything around it.
   Positive Y = down, Negative Y = up
   Positive X = right, Negative X = left
   ============================================================ */

/* --- LABELS --- */
.page-personal #personal-tag     { transform: translateY(-64px) translateX(-180px); }
.page-personal #label-animation  { transform: translateY(-10px) translateX(-100px); }
.page-personal #label-design     { transform: translateY(330px) translateX(-30px); }

/* --- ANIMATION THUMBNAILS --- */
.page-personal #thumb-1          { transform: translateY(-100px) translateX(450px); width: 140%; }
.page-personal #thumb-2          { transform: translateY(300px) translateX(-795px); width: 140%; }
.page-personal #thumb-3          { transform: translateY(315px) translateX(281px); width: 68%; }

/* --- ANIMATION CAPTIONS --- */
.page-personal #caption-shortchanged  { transform: translateY(-175px) translateX(-375px); }
.page-personal #caption-summer-nite   { transform: translateY(-220px) translateX(880px); }
.page-personal #caption-honey-sucker  { transform: translateY(-200px) translateX(-516px); }

/* --- ANIMATION VIEW COUNTS --- */
.page-personal #views-caption-shortchanged  { transform: translateY(-170px) translateX(-375px); }
.page-personal #views-caption-summer-nite   { transform: translateY(-215px) translateX(498px); text-align: right; }
.page-personal #views-caption-honey-sucker  { transform: translateY(-195px) translateX(-250px); }

/* --- DESIGN IMAGES --- */
.page-personal #img-spanish-house   { transform: translateY(300px) translateX(-320px); }
.page-personal #img-blue-outside    { transform: translateY(300px) translateX(-320px); }
.page-personal #img-smoker          { transform: translateY(300px) translateX(-322px); width: 150%;}
.page-personal #img-winkelman       { transform: translateY(600px) translateX(180px); }
.page-personal #img-design8         { transform: translateY(-244px) translateX(0px); width: 100%;}
.page-personal #img-sketch          { transform: translateY(-950px) translateX(1030px); width: 70%; }
.page-personal #img-docdazzle       { transform: translateY(-2500px) translateX(200px); width: 160%; }
.page-personal #img-paddler         { transform: translateY(-2469px) translateX(764px); width: 60%;}
.page-personal #img-design1         { transform: translateY(-1500px) translateX(0px); }
.page-personal #img-coast-crawlers  { transform: translateY(-1500px) translateX(0px); }
.page-personal #img-bleghfd         { transform: translateY(-1500px) translateX(0px); }
.page-personal #img-snake-tribe     { transform: translateY(-1680px) translateX(0px); width: 182%; }
.page-personal #img-gtn             { transform: translateY(50px) translateX(-480px); width: 200%; }
.page-personal #img-usrfinal        { transform: translateY(-200px) translateX(100px); width: 150%; }
.page-personal #img-holdstill       { transform: translateY(-2000px) translateX(-550px); width: 200%; }
/* --- DIAMOND ROWS --- */
.page-personal #diamonds-1      { transform: translateY(50px) translateX(0px); }
.page-personal #diamonds-2      { transform: translateY(-775px) translateX(0px); }
.page-personal #diamonds-3      { transform: translateY(500px) translateX(0px); }

/* --- PAINT DECORATIONS --- */
.page-personal #paint-left          { transform: translateY(-280px) translateX(-240px); width: 50%;}
.page-personal #paint-right-anim    { transform: rotate(-90deg) translateY(490px) translateX(-187px); width: 70%; }
.page-personal #paint-right-design  { transform: rotate(90deg) translateY(1350px) translateX(-400px); width: 75%; }
/* ============================================================
   PROFESSIONAL PAGE — INDIVIDUAL ITEM POSITIONING
   Same system as personal page: transform to nudge,
   width to resize. IDs are on wrapper divs so moving
   one element never affects its neighbours.
   Positive Y = down,  Negative Y = up
   Positive X = right, Negative X = left
   ============================================================ */

/* --- PAGE TITLE TAG --- */
.page-professional #prof-tag             { transform: translateY(-67px) translateX(220px); }
.page-professional #prof-title-bar       { transform: translateY(0px) translateX(0px); }

/* --- WIZARD + SMILING FRIENDS --- */
.page-professional #logo-1               { transform: translateY(-150px) translateX(250px); }
.page-professional #img-wizard           { transform: translateY(-40px) translateX(-531px); width: 120%; }
.page-professional #sf-band              { transform: translateY(-122px) translateX(-523px); width: 90%; }
.page-professional #sf-band-2            { transform: translateY(-150px) translateX(-500px); width: 90%; }
.page-professional #sf-band-3            { transform: translateY(-270px) translateX(650px); width: 90%; }
.page-professional #img-charlie         { transform: translateY(0px) translateX(0px); width: 25%; }
.page-professional #logo-3               { transform: translateY(-800px) translateX(700px); }
.page-professional #img-benfranklin      { transform: translateY(0px) translateX(0px); width: 35%; }
.page-professional #logo-4               { transform: translateY(-1262px) translateX(1250px); }
.page-professional #img-glep             { transform: translateY(0px) translateX(0px); width: 60%; }
.page-professional #logo-2               { transform: translateY(-1140px) translateX(1250px); }
/* --- CHARACTER UNITS --- */
.page-professional #charlie-unit        { transform: translateY(235px) translateX(817px); width: 46.25%; }
.page-professional #logo-3              { transform: translateY(0px) translateX(50px); }
.page-professional #benfranklin-unit    { transform: translateY(-1215px) translateX(620px); width: 65%; }
.page-professional #logo-4              { transform: translateY(-10px) translateX(20px); }
.page-professional #glep-unit           { transform: translateY(-1130px) translateX(620px);  width: 65%; }
.page-professional #logo-2              { transform: translateY(0px) translateX(110px); }
.page-professional #role-sf              { transform: translateY(-95px) translateX(-32px); }
.page-professional #role-meatcanyon      { transform: translateY(-100px) translateX(-500px); }
.page-professional #role-flashgitz       { transform: translateY(-215px) translateX(650px); }
.page-professional #car-unit       	{ transform: translateY(-1080px) translateX(-270px); }
.page-professional #logo-5         	{ transform: translateY(0px) translateX(0px); }
.page-professional #alandress-unit 	{ transform: translateY(-950px) translateX(0px); }
.page-professional #logo-6         	{ transform: translateY(50px) translateX(0px); }
.page-professional #mouthpacks-unit     { transform: translateY(-800px) translateX(-370px); width: 170%; }
.page-professional #logo-7              { transform: translateY(100px) translateX(0px); }
.page-professional #silly-unit          { transform: translateY(-675px) translateX(0px); }
.page-professional #logo-8              { transform: translateY(0px) translateX(0px); }
.page-professional #portraits-unit      { transform: translateY(-550px) translateX(0px); }
.page-professional #logo-9              { transform: translateY(50px) translateX(0px); }
.page-professional #alandead-unit       { transform: translateY(-450px) translateX(0px); }
.page-professional #logo-10             { transform: translateY(0px) translateX(0px); }
.page-professional #alanpizza-unit      { transform: translateY(-380px) translateX(-150px); width: 130%;}
.page-professional #dronecontroller-unit  { transform: translateY(0px) translateX(0px); }
.page-professional #johnadams-unit        { transform: translateY(0px) translateX(0px); }
.page-professional #wallcharliepim-unit   { transform: translateY(0px) translateX(0px); }
.page-professional #charlievacation-unit  { transform: translateY(0px) translateX(0px); }
.page-professional #mrfrog-unit           { transform: translateY(0px) translateX(0px); }
.page-professional #critter-unit          { transform: translateY(0px) translateX(0px); }
.page-professional #critterkid-unit       { transform: translateY(0px) translateX(0px); }
.page-professional #pimvacation-unit      { transform: translateY(0px) translateX(0px); }
.page-professional #logo-11             { transform: translateY(0px) translateX(0px); }


/* --- CHARACTER IMAGES --- */
.page-professional #img-charlie          { transform: translateY(-800px) translateX(550px); }
.page-professional #img-benfranklin      { transform: translateY(-1230px) translateX(950px); }
.page-professional #img-glep             { transform: translateY(-1150px) translateX(650px); }
.page-professional #yt-thumb-wrap         { position: relative; display: inline-block; width: 60%; transform: translateY(30px) translateX(100px); }
.page-professional #anim-reel-text {
    position: relative;
    font-size: 32px;        /* change this number to go bigger/smaller */
    font-weight: 700;       /* bold */
    text-align: center;
    line-height: 1.2;
    transform: translateY(-271px) translateX(-70px);
    width: max-content;     /* shrinks to fit text so outline is even on all sides */
    outline: 2px solid #000; border-radius: 10px;
    outline-offset: 6px;
}
.page-professional #label-professional-wrap { top: 0px; left: 0px; }
.page-professional #label-professional-wrap-2 { top: 0px; left: 0px; transform: translateX(350px) translateY(10050px); }

/* ── Divider lines — tweak transform to move, width/height to resize ── */
.page-professional #prof-line-h { transform: translateX(0px) translateY(9550px); width: 1100px; }
.page-professional #prof-line-v { transform: translateX(800px) translateY(9560px); height: 350px; }

/* ── Right-side label box (duplicate of anim-reel-text) ── */
.page-professional #yt-right-label-text {
    position: relative;
    font-size: 32px;        /* change this number to go bigger/smaller */
    font-weight: 700;
    text-align: center;
    line-height: 1.2;
    transform: translateY(-383px) translateX(820px); /* ← nudge to position */
    width: max-content;
    outline: 2px solid #000; border-radius: 10px;
    outline-offset: 6px;
}

/* ── Playlist thumbnail wrap ── */
.page-professional #yt-playlist-wrap {
    position: relative;
    display: inline-block;
    width: 30%;             /* ← match or adjust relative to reel thumb */
    transform: translateY(-348px) translateX(810px); /* ← nudge to position */
}translateX(620px);  width: 65%; }
.page-professional #logo-2              { transform: translateY(0px) translateX(110px); }
.page-professional #role-sf              { transform: translateY(-95px) translateX(-32px); }
.page-professional #role-meatcanyon      { transform: translateY(-292px) translateX(320px); }
.page-professional #role-flashgitz       { transform: translateY(-340px) translateX(660px); }
.page-professional #car-unit       	{ transform: translateY(-1080px) translateX(-270px); }
.page-professional #logo-5         	{ transform: translateY(0px) translateX(0px); }
.page-professional #alandress-unit 	{ transform: translateY(-950px) translateX(0px); }
.page-professional #logo-6         	{ transform: translateY(50px) translateX(0px); }
.page-professional #mouthpacks-unit     { transform: translateY(-800px) translateX(-370px); width: 170%; }
.page-professional #logo-7              { transform: translateY(100px) translateX(0px); }
.page-professional #silly-unit          { transform: translateY(-675px) translateX(0px); }
.page-professional #logo-8              { transform: translateY(0px) translateX(0px); }
.page-professional #portraits-unit      { transform: translateY(-550px) translateX(0px); }
.page-professional #logo-9              { transform: translateY(50px) translateX(0px); }
.page-professional #alandead-unit       { transform: translateY(-450px) translateX(0px); }
.page-professional #logo-10             { transform: translateY(0px) translateX(0px); }
.page-professional #alanpizza-unit      { transform: translateY(-380px) translateX(-150px); width: 130%;}
.page-professional #dronecontroller-unit  { transform: translateY(0px) translateX(0px); }
.page-professional #johnadams-unit        { transform: translateY(0px) translateX(0px); }
.page-professional #wallcharliepim-unit   { transform: translateY(0px) translateX(0px); }
.page-professional #charlievacation-unit  { transform: translateY(0px) translateX(0px); }
.page-professional #mrfrog-unit           { transform: translateY(0px) translateX(0px); }
.page-professional #critter-unit          { transform: translateY(0px) translateX(0px); }
.page-professional #critterkid-unit       { transform: translateY(0px) translateX(0px); }
.page-professional #pimvacation-unit      { transform: translateY(0px) translateX(0px); }
.page-professional #logo-11             { transform: translateY(0px) translateX(0px); }


/* --- CHARACTER IMAGES --- */
.page-professional #img-charlie          { transform: translateY(-800px) translateX(550px); }
.page-professional #img-benfranklin      { transform: translateY(-1230px) translateX(950px); }
.page-professional #img-glep             { transform: translateY(-1150px) translateX(650px); }
.page-professional #yt-thumb-wrap         { position: relative; display: inline-block; width: 60%; transform: translateY(30px) translateX(100px); }
.page-professional #anim-reel-text {
    position: relative;
    font-size: 32px;        /* change this number to go bigger/smaller */
    font-weight: 700;       /* bold */
    text-align: center;
    line-height: 1.2;
    transform: translateY(-62px) translateX(-88px);
    width: max-content;     /* shrinks to fit text so outline is even on all sides */
    outline: 2px solid #000;
    outline-offset: 6px;
}
.page-professional #label-professional-wrap { top: 0px; left: 0px; }
.page-professional #label-professional-wrap-2 { top: 0px; left: 0px; transform: translateX(350px) translateY(10050px); }

/* ── Divider lines — tweak transform to move, width/height to resize ── */
.page-professional #prof-line-h { transform: translateX(0px) translateY(9550px); width: 1100px; }
.page-professional #prof-line-v { transform: translateX(800px) translateY(9560px); height: 350px; }

/* ── Right-side label box (duplicate of anim-reel-text) ── */
.page-professional #yt-right-label-text {
    position: relative;
    font-size: 32px;        /* change this number to go bigger/smaller */
    font-weight: 700;
    text-align: center;
    line-height: 1.2;
    transform: translateY(-383px) translateX(820px); /* ← nudge to position */
    width: max-content;
    outline: 2px solid #000;
    outline-offset: 6px;
}

/* ── Playlist thumbnail wrap ── */
.page-professional #yt-playlist-wrap {
    position: relative;
    display: inline-block;
    width: 30%;             /* ← match or adjust relative to reel thumb */
    transform: translateY(-348px) translateX(810px); /* ← nudge to position */
}

/* MOBILE */
/* ============================================================
   MOBILE OVERRIDES — append to the bottom of style.css
   Breakpoint: 768px and below
   Strategy: reset all pixel transforms → normal document flow
   Desktop layout is completely untouched above this block.
   ============================================================ */

@media (max-width: 768px) {

    /* --------------------------------------------------------
       SHARED — HTML / BODY
       Prevent horizontal scroll caused by overflow-wide elements
    -------------------------------------------------------- */
    html {
        font-size: 16px; /* disable the vw-based clamp on mobile */
        overflow-x: hidden;
    }

    body {
        overflow-x: hidden;
    }

    /* --------------------------------------------------------
       SHARED — NAVIGATION
       Replace horizontal pill row with a wrapped, touch-friendly bar.
       The hover-based dropdown still works on tap (first tap opens,
       second tap follows the link) — no JS required.
    -------------------------------------------------------- */
    /* ============================================================
   HAMBURGER NAV — MOBILE
   Three separate pieces to drop into your project.
   ============================================================ */


/* ============================================================
   PIECE 1 — HTML
   Replace the existing <nav class="top-nav"> block on ALL 5
   pages with this. The only difference from before is the
   hamburger button added at the top.
   ============================================================

<nav class="top-nav" id="top-nav">

    <!-- Hamburger button — mobile only, hidden on desktop via CSS -->
    <button class="nav-hamburger" id="nav-hamburger" aria-label="Open menu">
        <span></span>
        <span></span>
        <span></span>
    </button>

    <!-- All nav links — same as before, wrapped in a togglable container -->
    <div class="nav-links-wrap" id="nav-links-wrap">
        <a href="index.html" class="nav-link">Home</a>
        <div class="nav-dropdown">
            <span class="portfolio-trigger">Portfolio</span>
            <div class="dropdown-content">
                <a href="professional.html" class="dropdown-item prof-link">Professional</a>
                <div class="dropdown-divider"></div>
                <a href="personal.html" class="dropdown-item pers-link">Personal</a>
            </div>
        </div>
        <a href="about.html" class="nav-link">About Me</a>
        <a href="contact.html" class="nav-link">Contact Me</a>
    </div>

</nav>

   ============================================================ */


/* ============================================================
   PIECE 2 — JAVASCRIPT
   Paste this <script> block just before the closing </body>
   tag on ALL 5 pages. It handles the hamburger toggle.
   ============================================================

<script>
    (function () {
        var btn  = document.getElementById('nav-hamburger');
        var menu = document.getElementById('nav-links-wrap');
        if (!btn || !menu) return;

        btn.addEventListener('click', function () {
            var open = menu.classList.toggle('nav-open');
            btn.classList.toggle('nav-open', open);
            btn.setAttribute('aria-label', open ? 'Close menu' : 'Open menu');
        });

        // Close menu if user taps a nav link
        menu.querySelectorAll('a').forEach(function (link) {
            link.addEventListener('click', function () {
                menu.classList.remove('nav-open');
                btn.classList.remove('nav-open');
            });
        });
    })();
</script>

   ============================================================ */


/* ============================================================
   PIECE 3 — CSS
   This replaces the entire "SHARED — NAVIGATION" section
   inside your existing @media (max-width: 768px) block.
   Swap out everything between the SHARED — NAVIGATION
   comment and the SHARED — FOOTER comment with this.
   ============================================================ */

@media (max-width: 768px) {

    /* --------------------------------------------------------
       SHARED — NAVIGATION — HAMBURGER VERSION
    -------------------------------------------------------- */

    .top-nav {
        /* Anchor for the hamburger button position */
        position: relative;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        padding: 12px 16px;
        margin: 0;
        width: 100%;
        box-sizing: border-box;
        /* Needs z-index so the open menu sits above page content */
        z-index: 500;
    }

    /* --- Hamburger button --- */
    .nav-hamburger {
        display: flex;          /* visible on mobile */
        flex-direction: column;
        justify-content: space-between;
        width: 32px;
        height: 24px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
        z-index: 600;
        position: relative;
        flex-shrink: 0;
    }

    /* The three lines */
    .nav-hamburger span {
        display: block;
        width: 100%;
        height: 3px;
        background-color: var(--color-black);
        transition: transform 0.3s ease, opacity 0.3s ease;
        transform-origin: center;
    }

    /* Animate into an X when open */
    .nav-hamburger.nav-open span:nth-child(1) { transform: translateY(10.5px) rotate(45deg); }
    .nav-hamburger.nav-open span:nth-child(2) { opacity: 0; }
    .nav-hamburger.nav-open span:nth-child(3) { transform: translateY(-10.5px) rotate(-45deg); }

    /* --- Nav links wrap — hidden by default, shown when toggled --- */
    .nav-links-wrap {
        display: none;              /* hidden until hamburger tapped */
        flex-direction: column;
        position: absolute;
        top: 100%;                  /* drops below the nav bar */
        left: 0;
        width: 100%;
        background-color: var(--color-black);
        z-index: 500;
        padding: 8px 0 16px 0;
    }

    .nav-links-wrap.nav-open {
        display: flex;              /* shown when JS adds .nav-open */
    }

    /* Each nav link — full width, stacked, mimics desktop box style */
    .nav-links-wrap .nav-link {
        color: var(--color-white);
        background-color: var(--color-black);
        font-size: 15px;
        padding: 14px 24px;
        min-height: 48px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid var(--gray-75);
        outline: none;
    }

    .nav-links-wrap .nav-link:hover {
        outline: none;
        background-color: var(--gray-75);
    }

    /* Portfolio dropdown — inline in the menu, always expanded */
    .nav-dropdown {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .nav-dropdown::after { display: none; }

    .portfolio-trigger {
        color: var(--color-white);
        background-color: var(--color-black);
        font-size: 15px;
        padding: 14px 24px;
        min-height: 48px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid var(--gray-75);
        cursor: default;
    }

    /* Professional and Personal sit below Portfolio, indented */
    .dropdown-content {
        display: flex;
        flex-direction: column;     /* stacked, matching desktop L→R order */
        position: static;
        width: 100%;
        background-color: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        gap: 0;
    }

    .dropdown-item {
        color: var(--color-white);
        background-color: #1a1a1a;  /* slightly lighter than black to show indent */
        font-size: 14px;
        padding: 12px 24px 12px 40px; /* extra left pad = visual indent */
        min-height: 44px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid var(--gray-75);
    }

    .dropdown-item.prof-link:hover { background-color: var(--color-orange); color: var(--color-black); }
    .dropdown-item.pers-link:hover { background-color: var(--color-yellow); color: var(--color-black); }

    .dropdown-divider { display: none; }

}
/* ============================================================
   END OF HAMBURGER NAV CSS
   ============================================================ */

    /* --------------------------------------------------------
       SHARED — FOOTER
       Allow links to wrap on very small screens
    -------------------------------------------------------- */
    .bottom-footer-bar {
        height: auto;
        padding: 10px 16px;
        top: 0; /* remove the 8px nudge */
    }

    .bottom-footer-content {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        font-size: 12px;
        letter-spacing: 1px;
    }

    .footer-link {
        padding: 4px 6px;
    }

    /* --------------------------------------------------------
       PAGE: HOME (index.html)
    -------------------------------------------------------- */

    /* Hero image: scale down from fixed 500px */
    .page-index .hero-img {
        width: 80vw;
        max-width: 340px;
    }

    /* Giant heading: scale down from 128px */
    .page-index .site-subtitle {
        font-size: clamp(44px, 17vw, 96px);
        line-height: 0.85;
        text-align: center;
    }

    .page-index .aka {
        font-size: 14px;
        align-self: center;
    }

    /* Stack content centrally */
    .page-index .overlap-header {
        margin-top: 8px;
        width: 90%;
        align-items: center;
    }

    /* Buttons: scale to fit screen */
    .page-index .interactive-menu {
        margin-top: 32px;
        padding-bottom: 32px;
        width: 100%;
        align-items: center;
    }

    .page-index .portfolio-container {
        width: 90vw;
        max-width: 340px;
        height: 56px;
    }

    .page-index .portfolio-base {
        font-size: 18px;
    }

    /* On mobile, always show the split overlay (no hover) */
    .page-index .split-overlay {
        opacity: 1;
        pointer-events: auto;
    }

    .page-index .split-box {
        font-size: 13px;
    }

    .page-index .box-link {
        width: 90vw;
        max-width: 340px;
        font-size: 18px;
    }

    /* --------------------------------------------------------
       PAGE: CONTACT (contact.html)
       Already mostly flex — just needs width and padding fixes
    -------------------------------------------------------- */
    .page-contact .content-body {
        width: 100%;
        padding: 16px;
    }

    .page-contact .page-header {
        font-size: 24px;
        text-align: center;
    }

    .page-contact .contact-form {
        width: 100%;
        max-width: 100%;
        margin: 24px 0;
        gap: 12px;
    }

    .page-contact .form-input,
    .page-contact .form-textarea {
        font-size: 16px; /* prevents iOS auto-zoom on focus */
        padding: 12px;
    }

    .page-contact .submit-btn {
        font-size: 16px;
        padding: 14px;
    }

    /* --------------------------------------------------------
       PAGE: ABOUT (about.html)
       Two-column layout → single column stack
       All absolute/transform positioning → reset to flow
    -------------------------------------------------------- */
    .page-about .about-container {
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        margin-top: 20px;
        padding-bottom: 40px;
        gap: 0;
    }

    .page-about .about-column {
        width: 100%;
        padding: 16px;
    }

    /* Hide the vertical center divider — irrelevant in single column */
    .page-about .vertical-divider {
        display: none;
    }

    /* Bio section: reset the overflow-wide image */
    .page-about .bio-section {
        min-height: auto;
        padding: 16px;
        overflow: hidden;
    }

    .page-about .bio-bg-img {
        width: 100%;
        margin-top: 120px; /* leave room for overlaid text */
        margin-left: 0;
    }

    /* Reset all absolute-positioned bio overlays to flow */
    .page-about #bio-photo {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        margin-bottom: 12px;
    }

    .page-about #bio-title,
    .page-about #bio-name,
    .page-about #bio-subtext {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        max-width: 100%;
        text-align: center;
        margin-bottom: 8px;
    }

    .page-about #bio-name {
        font-size: 24px;
    }

    /* Reset transform-based contact positioning */
    .page-about #about-contact-info,
    .page-about #about-contact-btn,
    .page-about #about-resume-dl {
        transform: none;
        margin-top: 16px;
    }

    /* Reset dotted man — decorative, hide on small screens */
    .page-about #dotted-man {
        display: none;
    }

    /* Reset wide dividers that cause horizontal overflow */
    .page-about #about-divider,
    .page-about #about-divider-2 {
        transform: none;
        width: 100%;
    }

    /* Hide bracket decorations — too positionally dependent */
    .page-about #bracket-img,
    .page-about #bracket-img-2 {
        display: none;
    }

    /* Reset socials label */
    .page-about #about-socials-label {
        position: relative;
        top: auto;
        left: auto;
        letter-spacing: 4px;
        text-align: center;
        display: block;
        margin-top: 16px;
    }

    .page-about .bio-intro {
        font-size: 22px;
    }

    .page-about .bio-desc {
        font-size: 16px;
        padding: 0 8px;
        max-width: 100%;
    }

    .page-about .resume-contact-btn {
        display: block;
        text-align: center;
        padding: 14px 20px;
    }

    .page-about .section-title {
        font-size: 22px;
    }

    /* --------------------------------------------------------
       PAGE: PERSONAL (personal.html)
       All transform-nudged items → reset to normal flow
       Portfolio grid → 2 columns
    -------------------------------------------------------- */

    /* Reset every transformed/sized element to flow naturally */
    .page-personal #personal-tag,
    .page-personal #label-animation,
    .page-personal #label-design,
    .page-personal #thumb-1,
    .page-personal #thumb-2,
    .page-personal #thumb-3,
    .page-personal #caption-shortchanged,
    .page-personal #caption-summer-nite,
    .page-personal #caption-honey-sucker,
    .page-personal #views-caption-shortchanged,
    .page-personal #views-caption-summer-nite,
    .page-personal #views-caption-honey-sucker,
    .page-personal #img-spanish-house,
    .page-personal #img-blue-outside,
    .page-personal #img-smoker,
    .page-personal #img-winkelman,
    .page-personal #img-design8,
    .page-personal #img-sketch,
    .page-personal #img-docdazzle,
    .page-personal #img-paddler,
    .page-personal #img-design1,
    .page-personal #img-coast-crawlers,
    .page-personal #img-bleghfd,
    .page-personal #img-snake-tribe,
    .page-personal #img-gtn,
    .page-personal #img-usrfinal,
    .page-personal #img-holdstill,
    .page-personal #diamonds-1,
    .page-personal #diamonds-2,
    .page-personal #diamonds-3 {
        transform: none !important;
        width: 100% !important;
        position: relative !important;
        margin: 0 auto 12px auto !important;
    }

    /* Hide rotated paint decorations — layout-breaking on mobile */
    .page-personal #paint-left,
    .page-personal #paint-right-anim,
    .page-personal #paint-right-design {
        display: none;
    }

    /* Portfolio section full width */
    .page-personal .portfolio-section {
        width: 100%;
        padding: 12px;
    }

    .page-personal .page-title {
        font-size: 24px;
        margin-bottom: 20px;
    }

    /* 2-column grid */
    .page-personal .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .page-personal .view-count {
        font-size: 13px;
    }

    /* --------------------------------------------------------
       PAGE: PROFESSIONAL (professional.html)
       Same transform-reset strategy as personal page
    -------------------------------------------------------- */

    /* Reset all transform-positioned professional elements */
    .page-professional #prof-tag,
    .page-professional #prof-title-bar,
    .page-professional #logo-1,
    .page-professional #logo-2,
    .page-professional #logo-3,
    .page-professional #logo-4,
    .page-professional #logo-5,
    .page-professional #logo-6,
    .page-professional #logo-7,
    .page-professional #logo-8,
    .page-professional #logo-9,
    .page-professional #logo-10,
    .page-professional #logo-11,
    .page-professional #img-wizard,
    .page-professional #sf-band,
    .page-professional #sf-band-2,
    .page-professional #sf-band-3,
    .page-professional #img-charlie,
    .page-professional #img-benfranklin,
    .page-professional #img-glep,
    .page-professional #charlie-unit,
    .page-professional #benfranklin-unit,
    .page-professional #glep-unit,
    .page-professional #role-sf,
    .page-professional #role-meatcanyon,
    .page-professional #role-flashgitz,
    .page-professional #car-unit,
    .page-professional #alandress-unit,
    .page-professional #mouthpacks-unit,
    .page-professional #silly-unit,
    .page-professional #portraits-unit,
    .page-professional #alandead-unit,
    .page-professional #alanpizza-unit,
    .page-professional #dronecontroller-unit,
    .page-professional #johnadams-unit,
    .page-professional #wallcharliepim-unit,
    .page-professional #charlievacation-unit,
    .page-professional #mrfrog-unit,
    .page-professional #critter-unit,
    .page-professional #critterkid-unit,
    .page-professional #pimvacation-unit,
    .page-professional #yt-thumb-wrap,
    .page-professional #yt-playlist-wrap,
    .page-professional #anim-reel-text,
    .page-professional #yt-right-label-text,
    .page-professional #label-professional-wrap,
    .page-professional #label-professional-wrap-2 {
        transform: none !important;
        width: 100% !important;
        position: relative !important;
        margin: 0 auto 12px auto !important;
    }

    /* Hide divider lines that are pixel-sized — they'll look broken */
    .page-professional #prof-line-h,
    .page-professional #prof-line-v {
        display: none;
    }

    /* Portfolio section full width */
    .page-professional .portfolio-section {
        width: 100%;
        padding: 12px;
    }

    .page-professional .page-title {
        font-size: 24px;
        margin-bottom: 20px;
    }

    /* 2-column grid */
    .page-professional .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .page-professional .view-count {
        font-size: 13px;
    }

    /* Reel label text: remove outline-radius weirdness at full width */
    .page-professional #anim-reel-text,
    .page-professional #yt-right-label-text {
        width: auto !important;
        font-size: 22px;
        text-align: center;
        margin: 8px auto !important;
    }

} /* end @media (max-width: 768px) */