@font-face{
    font-family: Corporation_Games;
    src: url('font/Corporation_Games.otf');
}

@font-face{
    font-family: DIMIS;
    src: url('font/DIMIS___.TTF');
}

@font-face{
    font-family: WIDEAWAKE;
    src: url('font/WIDEAWAKE.TTF');
}

@font-face{
    font-family: ACFramedInverted;
    src: url('font/ACFramedInverted.otf');
}

@font-face{
    font-family: ForestRegular;
    src: url('font/ForestRegular.otf');
}

@font-face{
    font-family: PhilosopherRegular;
    src: url('font/Philosopher-Regular.ttf');
}

body {
    background-color: LightSalmon;
    margin: 0;
}

.page-wrap {
    width: 100%;
    text-align: center;
    margin: 0 auto;
    box-sizing: border-box;
}

.logo {
    margin-top: 20px;
}

.logo img {
    max-width: 100%;
    height: auto;
    /* Logo art is optically left-heavy; nudge right for true center */
    transform: translateX(14px);
}

.tagline {
    font-family: ACFramedInverted;
    font-size: 50px;
}

.blob {
    background-color: Salmon;
    width: 900px;
    max-width: 96%;
    padding-top: 8px;
    padding-bottom: 8px;
    margin: 25px auto;
    box-shadow: 10px 10px #888888;
    box-sizing: border-box;
}

.blob iframe {
    max-width: 100%;
}

.blob p {
    font-family: PhilosopherRegular;
    font-size: 15px;
    padding: 0 18px;
}

#title, .piece-title {
    font-family: ForestRegular;
    font-size: 40px;
    margin-top: 5px;
    margin-bottom: 5px;
}

.footer {
    font-family: ACFramedInverted;
    font-size: 50px;
}

.ig-link {
    display: flex;
    width: max-content;
    align-items: center;
    gap: 16px;
    margin: 16px auto 22px;
    padding: 16px 30px 16px 18px;
    text-decoration: none;
    color: #1a1a1a;
    background: rgba(255,255,255,0.42);
    border-radius: 999px;
    box-shadow: 5px 5px #888888;
}

.ig-link:hover {
    background: rgba(255,255,255,0.62);
}

.ig-icon {
    width: 58px;
    height: 58px;
    display: block;
    flex-shrink: 0;
}

.ig-text {
    font-family: ForestRegular, sans-serif;
    font-size: 26px;
    letter-spacing: 0.04em;
    line-height: 1.05;
    text-align: left;
}

.ig-label {
    display: block;
    font-size: 16px;
    letter-spacing: 0.22em;
    opacity: 0.72;
    margin-bottom: 3px;
}

.ig-handle {
    font-family: PhilosopherRegular, sans-serif;
    font-size: 36px;
    letter-spacing: 0.02em;
}

/* Site navigation */
.site-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 32px;
    margin: 18px auto 8px;
    font-family: ForestRegular, sans-serif;
    font-size: 28px;
    letter-spacing: 0.06em;
}

.site-nav a {
    color: #1a1a1a;
    text-decoration: none;
    border-bottom: 3px solid transparent;
    padding-bottom: 2px;
}

.site-nav a:hover,
.site-nav a.is-active {
    border-bottom-color: #1a1a1a;
}

.site-email {
    font-family: PhilosopherRegular, sans-serif;
    font-size: 22px;
    letter-spacing: 0.02em;
    margin: 6px 0;
}

.sub-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 18px;
    margin: 10px auto 28px;
    max-width: 920px;
    font-family: PhilosopherRegular, sans-serif;
    font-size: 20px;
}

.sub-nav a {
    color: #1a1a1a;
    text-decoration: none;
    background: rgba(255,255,255,0.35);
    padding: 8px 16px;
    box-shadow: 4px 4px #888888;
}

.sub-nav a:hover,
.sub-nav a.is-active {
    background: rgba(255,255,255,0.7);
}

/* Home path chooser */
.paths {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 22px;
    margin: 18px auto 28px;
    max-width: 920px;
}

.path-card {
    display: block;
    width: 340px;
    max-width: 92vw;
    text-decoration: none;
    color: #1a1a1a;
    background: Salmon;
    box-shadow: 10px 10px #888888;
    padding: 28px 22px 24px;
    transition: transform 0.15s ease, background 0.15s ease;
}

.path-card:hover {
    background: #fa8072;
    transform: translate(-2px, -2px);
}

.path-card .path-label {
    font-family: ForestRegular, sans-serif;
    font-size: 34px;
    letter-spacing: 0.04em;
    display: block;
    margin-bottom: 8px;
}

.path-card .path-note {
    font-family: PhilosopherRegular, sans-serif;
    font-size: 16px;
    line-height: 1.35;
    opacity: 0.9;
}

.resume-link {
    font-family: ForestRegular, sans-serif;
    font-size: 28px;
    color: #1a1a1a;
}

/* Portfolio pieces */
.piece-media {
    width: 800px;
    max-width: 96%;
    margin: 0 auto 8px;
}

.piece-media img,
.piece-media iframe {
    width: 100%;
    height: auto;
    display: block;
    border: 0;
}

.piece-media iframe,
.media-facade {
    aspect-ratio: 16 / 9;
    height: auto;
    background: #111;
}

.media-facade {
    position: relative;
    display: block;
    width: 100%;
    cursor: pointer;
    overflow: hidden;
}

.media-facade img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.media-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
      linear-gradient(145deg, rgba(255,255,255,0.18), transparent 45%),
      linear-gradient(25deg, #c45c4a, #fa8072 55%, #ffb199);
    font-family: ForestRegular, sans-serif;
    font-size: clamp(22px, 3vw, 34px);
    color: #1a1a1a;
    text-align: center;
    padding: 24px;
    box-sizing: border-box;
}

.media-fallback span {
    max-width: 80%;
    line-height: 1.15;
    text-shadow: 2px 2px 0 rgba(255,255,255,0.25);
}

.media-play {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 68px;
    height: 48px;
    background: rgba(0, 0, 0, 0.72);
    border-radius: 10px;
}

.media-play::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 52%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 11px 0 11px 18px;
    border-color: transparent transparent transparent #fff;
}

.media-facade:hover .media-play {
    background: #c00;
}

.media-facade-adobe {
    cursor: pointer;
}

.piece-link {
    font-family: PhilosopherRegular, sans-serif;
    font-size: 15px;
    color: #1a1a1a;
}

/* Course grid */
.course-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 22px;
    width: 920px;
    max-width: 96%;
    margin: 10px auto 40px;
    text-align: left;
}

.course-card {
    display: block;
    text-decoration: none;
    color: #1a1a1a;
    background: Salmon;
    box-shadow: 8px 8px #888888;
    overflow: hidden;
    transition: transform 0.15s ease;
}

.course-card:hover {
    transform: translate(-2px, -2px);
}

.course-card img {
    width: 100%;
    aspect-ratio: 5 / 4;
    object-fit: cover;
    display: block;
    background: #d97a6c;
}

.course-card span {
    display: block;
    font-family: PhilosopherRegular, sans-serif;
    font-size: 16px;
    line-height: 1.25;
    padding: 12px 12px 14px;
}

.course-count {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    opacity: 0.7;
}

.item-caption {
    font-family: PhilosopherRegular, sans-serif;
    font-size: 14px;
    line-height: 1.4;
    text-align: center;
    padding: 4px 18px 12px;
    white-space: pre-wrap;
}

.image-mosaic {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    width: 900px;
    max-width: 96%;
    margin: 18px auto 28px;
}

.mosaic-item {
    display: block;
    background: Salmon;
    box-shadow: 6px 6px #888888;
    overflow: hidden;
}

.mosaic-item img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

.piece-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    margin-left: auto;
    margin-right: auto;
}

.piece-card-link:hover {
    background: #fa8072;
}

.crumb {
    font-family: PhilosopherRegular, sans-serif;
    font-size: 16px;
    margin: 0 auto 18px;
}

.crumb a {
    color: #1a1a1a;
}

.collection-head {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: 22px;
    width: 900px;
    max-width: 96%;
    margin: 0 auto 18px;
    padding: 18px;
    background: rgba(255,255,255,0.38);
    box-shadow: 8px 8px #888888;
    text-align: left;
    box-sizing: border-box;
}

.collection-cover {
    width: 220px;
    max-width: 42%;
    flex: 0 0 auto;
    box-shadow: 5px 5px #888888;
    overflow: hidden;
    background: #d97a6c;
}

.collection-cover img {
    width: 100%;
    height: 100%;
    min-height: 160px;
    object-fit: cover;
    display: block;
}

.collection-meta {
    flex: 1 1 280px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    min-width: 0;
}

.collection-kicker {
    margin: 0;
    font-family: PhilosopherRegular, sans-serif;
    font-size: 14px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.72;
}

.collection-name {
    margin: 0;
    font-family: ForestRegular, sans-serif;
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.05;
    font-weight: normal;
}

.collection-count {
    margin: 0;
    font-family: PhilosopherRegular, sans-serif;
    font-size: 17px;
}

.works-label {
    width: 900px;
    max-width: 96%;
    margin: 28px auto 8px;
    padding-top: 14px;
    border-top: 3px solid rgba(0,0,0,0.18);
    font-family: ForestRegular, sans-serif;
    font-size: 22px;
    letter-spacing: 0.04em;
    text-align: left;
}

.footer-nav-wrap {
    margin: 28px auto 10px;
    padding-top: 10px;
}

.resume-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin: 8px auto 22px;
}

.resume-btn {
    display: inline-block;
    font-family: ForestRegular, sans-serif;
    font-size: 20px;
    letter-spacing: 0.04em;
    text-decoration: none;
    color: #1a1a1a;
    background: Salmon;
    padding: 12px 22px;
    box-shadow: 5px 5px #888888;
}

.resume-btn:hover {
    background: #fa8072;
}

.resume-btn-secondary {
    background: rgba(255,255,255,0.45);
}

.resume-preview {
    position: relative;
    display: block;
    width: 520px;
    max-width: 92%;
    margin: 0 auto 36px;
    text-decoration: none;
    color: #1a1a1a;
    background: #fff;
    box-shadow: 10px 10px #888888;
    overflow: hidden;
}

.resume-preview img {
    width: 100%;
    height: auto;
    display: block;
}

.resume-preview-hint {
    display: block;
    font-family: PhilosopherRegular, sans-serif;
    font-size: 15px;
    padding: 12px 14px 14px;
    background: rgba(255,160,122,0.55);
    text-align: center;
}

.resume-preview:hover .resume-preview-hint {
    background: rgba(255,160,122,0.8);
}

.section-intro {
    font-family: PhilosopherRegular, sans-serif;
    font-size: 17px;
    max-width: 720px;
    margin: 0 auto 22px;
    line-height: 1.4;
}

.about-layout {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 28px;
    width: 920px;
    max-width: 96%;
    margin: 10px auto 40px;
    text-align: left;
}

.about-photo {
    width: 280px;
    max-width: 100%;
    box-shadow: 8px 8px #888888;
}

.about-copy {
    flex: 1 1 420px;
    font-family: PhilosopherRegular, sans-serif;
    font-size: 16px;
    line-height: 1.45;
}

.vertical-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 28px;
    width: 980px;
    max-width: 96%;
    margin: 10px auto 40px;
}

.vertical-card {
    width: min(320px, 92vw);
    background: Salmon;
    box-shadow: 8px 8px #888888;
    overflow: hidden;
    padding-bottom: 4px;
}

.vertical-player,
.still-player {
    display: block;
    width: 100%;
    background: #111;
    max-height: 72vh;
}

.vertical-player {
    aspect-ratio: 9 / 16;
    object-fit: contain;
}

.stills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 22px;
    width: 920px;
    max-width: 96%;
    margin: 10px auto 40px;
    text-align: left;
}

.still-card {
    display: block;
    background: Salmon;
    box-shadow: 8px 8px #888888;
    overflow: hidden;
    text-decoration: none;
    color: #1a1a1a;
}

.still-card img {
    width: 100%;
    display: block;
    aspect-ratio: 1;
    object-fit: cover;
    background: #d97a6c;
}

.ig-missing {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    min-height: 360px;
    padding: 24px 16px;
    text-decoration: none;
    color: #1a1a1a;
    text-align: center;
    background: rgba(255,255,255,0.28);
    box-sizing: border-box;
}

.ig-missing-still {
    min-height: 280px;
    aspect-ratio: 1;
}

.ig-missing-title {
    font-family: ForestRegular, sans-serif;
    font-size: 28px;
}

.ig-missing-note {
    font-family: PhilosopherRegular, sans-serif;
    font-size: 14px;
    line-height: 1.35;
    max-width: 90%;
}

.ig-missing-note code {
    font-size: 12px;
    background: rgba(255,255,255,0.55);
    padding: 1px 5px;
}

.ig-missing-cta {
    font-family: PhilosopherRegular, sans-serif;
    font-size: 15px;
    text-decoration: underline;
    margin-top: 6px;
}

.ig-open-link {
    display: block;
    text-align: center;
    font-family: PhilosopherRegular, sans-serif;
    font-size: 14px;
    color: #1a1a1a;
    padding: 8px 10px 10px;
    text-decoration: underline;
}

.still-card-img img {
    width: 100%;
    display: block;
    aspect-ratio: 1;
    object-fit: cover;
    background: #d97a6c;
}

.still-card-img span {
    display: block;
    font-family: PhilosopherRegular, sans-serif;
    font-size: 15px;
    padding: 12px 14px 14px;
}

.about-copy p {
    margin: 0 0 1.1em;
}

.yt-facade {
    position: relative;
    display: inline-block;
    width: 800px;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    background: #111;
    cursor: pointer;
    overflow: hidden;
}

.yt-facade img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.yt-play {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 68px;
    height: 48px;
    background: rgba(0, 0, 0, 0.72);
    border-radius: 10px;
}

.yt-play::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 52%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 11px 0 11px 18px;
    border-color: transparent transparent transparent #fff;
}

.yt-facade:hover .yt-play {
    background: #c00;
}

@media (max-width: 700px) {
    .tagline { font-size: 28px; }
    .footer { font-size: 32px; }
    #title, .piece-title { font-size: 28px; }
    .path-card .path-label { font-size: 26px; }
    .site-nav { font-size: 22px; gap: 8px 18px; }
    .site-email { font-size: 18px; }
}