/*
 * Portfolio Website Styling
 *
 * AI-assisted development:
 * I have limited prior experience with HTML and CSS, so AI tools were used
 * to assist with learning, design, and implementation. I reviewed, tested,
 * and modified the code while building this portfolio.
 */

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #f3f7f5;
    color: #1e2a27;
}

header {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 24px 8%;
    background-color: #1e2a27;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.brand:hover {
    opacity: 0.85;
}

.logo-badge {
    width: 52px;
    height: auto;
    flex-shrink: 0;
}

nav {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

nav::-webkit-scrollbar {
    display: none;
}

nav a {
    box-sizing: border-box;
    flex-shrink: 0;
    color: white;
    background-color: #4EA68D;
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 6px;
}

nav a:hover {
    opacity: 0.85;
}

nav a.is-active {
    background-color: #3d8873;
}

#hero {
    display: flex;
    align-items: center;
    padding: 60px 8%;
}

.hero-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 48px;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

.hero-text {
    flex: 1 1 380px;
    text-align: left;
}

.hero-media {
    flex: 0 1 332px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}

.profile-photo {
    width: 280px;
    height: 350px;
    object-fit: cover;
    border-radius: 20px;
    margin-bottom: 24px
}

.device {
    box-sizing: border-box;
    width: 332px;
    height: 428px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 16px 16px 18px;
    margin-bottom: 24px;
    background-color: #4EA68D;
    border-radius: 22px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: 0 8px 16px rgba(42, 35, 28, 0.18),
                inset 0 1px 0 rgba(255, 255, 255, 0.5);
    transform: rotate(-1deg);
}

.device-screen {
    box-sizing: border-box;
    width: 300px;
    height: 370px;
    position: relative;
    padding: 10px;
    background-color: #1e2a27;
    border-radius: 12px;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5),
                inset 0 0 0 2px #33413d;
}

.device-screen .profile-photo {
    display: block;
    border-radius: 6px;
    margin-bottom: 0;
}

.media-viewport {
    width: 280px;
    height: 350px;
    overflow: hidden;
    border-radius: 6px;
}

.media-track {
    display: flex;
    height: 100%;
    transition: transform 0.5s ease;
}

.media-slide {
    flex: 0 0 280px;
    width: 280px;
    height: 350px;
}

video.profile-photo {
    background-color: #000;
    object-fit: cover;
}

.video-slide {
    position: relative;
}

.video-slide .profile-photo {
    width: 100%;
    height: 100%;
}

.expand-btn {
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: 30px;
    height: 30px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 6px;
    background-color: rgba(30, 42, 27, 0.75);
    color: #fff;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.expand-btn:hover,
.expand-btn:focus-visible {
    background-color: #4EA68D;
    transform: scale(1.1);
}

.hero-hint {
    box-sizing: border-box;
    max-width: 280px;
    height: 75px;
    overflow: hidden;
    margin: 12px 0 0;
    font-size: 13px;
    line-height: 1.4;
    font-style: italic;
    color: #5c6e69;
}

.video-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-modal[hidden] {
    display: none;
}

.video-modal-backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(10, 14, 13, 0.75);
}

.video-modal-box {
    position: relative;
    z-index: 1;
    width: min(480px, 88vw);
    background-color: #1e2a27;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.video-modal-slot video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    border-radius: 8px;
    background-color: #000;
}

.video-modal-close {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #f7f5ee;
    border-radius: 50%;
    background-color: #4EA68D;
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.video-modal-close:hover,
.video-modal-close:focus-visible {
    background-color: #3d8873;
}

.media-arrow {
    position: absolute;
    top: 50%;
    right: 18px;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #f7f5ee;
    border-radius: 50%;
    background-color: #4EA68D;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45);
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.media-arrow:hover,
.media-arrow:focus-visible {
    transform: translateY(-50%) scale(1.25);
    background-color: #3d8873;
}

.media-dots {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.media-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: #cfe0da;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.media-dot.is-active {
    background-color: #4EA68D;
    transform: scale(1.2);
}

.media-dot:hover {
    background-color: #3d8873;
}

.device-buttons {
    display: flex;
    gap: 10px;
}

.device-button {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6),
                0 1px 2px rgba(0, 0, 0, 0.2);
}

.device-button--teal {
    background-color: #4EA68D;
}

.device-button--rust {
    background-color: #BF5B04;
}

.device-button--cream {
    background-color: #f7f5ee;
}

#hero h1 {
    font-size: 56px;
    margin: 0;
    color: #4EA68D;
}

#hero h2 {
    font-size: 30px;
    margin: 12px 0;
    font-weight: normal;
}

#hero p {
    font-size: 18px;
    color: #5c6e69;
    max-width: 800px;
}

.hero-subtitle {
    margin: 10px 0 0;
}

.story-link {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    margin-top: 10px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: bold;
    color: #BF5B04;
    border: 2px solid #BF5B04;
    border-radius: 6px;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.story-link:hover {
    background-color: #BF5B04;
    color: #fff;
}

.hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-top: 14px;
}

.hero-stat {
    font-size: 14px;
    color: #33413d;
}

.hero-stat strong {
    color: #1e2a27;
    font-size: 16px;
}

/* ---- Mini ticket rail (hero experiment) ---- */

.mini-rail {
    margin: 20px 0 0;
    max-width: 420px;
}

.mini-rail-bar-wrap {
    position: relative;
}

.mini-rail-bar {
    position: relative;
    z-index: 0;
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.3));
}

.mini-rail-bar-top {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    display: block;
    width: 100%;
    height: auto;
}

.mini-rail-tickets {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: -58px 7% 0;
}

.mini-ticket {
    position: relative;
    flex: 1;
    background-color: #f7f5ee;
    color: #1e2a27;
    font-family: 'Courier New', Courier, monospace;
    text-align: center;
    border-radius: 2px 2px 4px 4px;
    box-shadow: 0 6px 10px rgba(42, 35, 28, 0.18);
    padding: 16px 8px 10px;
}

.mini-ticket:nth-child(odd) {
    transform: rotate(-1.5deg);
}

.mini-ticket:nth-child(even) {
    transform: rotate(1.5deg);
}

.mini-ticket strong {
    display: block;
    font-size: 18px;
    color: #4EA68D;
}

.mini-ticket span {
    display: block;
    font-size: 11px;
    color: #5c6e69;
    margin-top: 3px;
    line-height: 1.3;
}

.hero-goal {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px 0 0;
    font-size: 16px;
    font-weight: bold;
    color: #1e2a27;
}

.hero-goal svg {
    color: #4EA68D;
    flex-shrink: 0;
}

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 12px;
    margin-top: 24px;
}

.hero-buttons a {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    background-color: #4EA68D;
    color: white;
    text-decoration: none;
    font-weight: bold;
    border: 2px solid transparent;
    border-radius: 999px;
    text-align: center;
}

.hero-buttons a:hover {
    opacity: 0.85;
}

.hero-buttons a.btn-outline {
    background-color: #fff;
    color: #2f6b58;
    border-color: #4EA68D;
}

.hero-buttons a.btn-outline:hover {
    background-color: #eaf5f1;
    opacity: 1;
}

.hero-buttons a.linkedin-btn {
    background-color: #0A66C2;
}

.hero-buttons a.linkedin-btn span {
    position: relative;
    top: 1px;
}

.hero-buttons a.github-btn {
    background-color: #181717;
}

.hero-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 20px;
    margin-top: 20px;
    font-size: 14px;
    color: #5c6e69;
}

.hero-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.hero-meta-item svg {
    color: #4EA68D;
    flex-shrink: 0;
}

section {
    padding: 80px 8%;
}

.pill {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 999px;
    background-color: #eef6f3;
    color: #1e2a27;
    font-size: 13px;
    border: 1px solid #cfe3db;
}

/* ---- Skills ---- */

.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 32px;
    max-width: 900px;
    margin: 0 auto;
    text-align: left;
}

.skills-col h3 {
    margin: 0 0 12px;
    font-size: 16px;
}

.skills-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ---- Projects ---- */

.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    max-width: 900px;
    margin: 0 auto;
}

.project-card {
    background-color: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 16px rgba(42, 35, 28, 0.12);
    text-align: left;
}

.project-photo {
    display: block;
    width: 100%;
    height: 207px;
    object-fit: cover;
    object-position: top;
}

.project-body {
    padding: 20px;
}

.project-body h3 {
    margin: 0 0 8px;
}

.project-body p {
    font-size: 14px;
    line-height: 1.6;
    color: #33413d;
    margin: 0 0 14px;
}

.project-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin: 4px 0 14px;
}

.project-stat {
    font-size: 14px;
    color: #5c6e69;
}

.project-stat strong {
    color: #1e2a27;
}

.project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.project-body a {
    color: #BF5B04;
    font-weight: bold;
    text-decoration: underline;
}

.project-body a:hover {
    color: #8f4403;
}

/* ---- Under construction ---- */

#under-construction {
    text-align: center;
}

.construction-panel {
    max-width: 480px;
    margin: 0 auto;
}

.construction-panel h2 {
    margin: 16px 0 10px;
}

.construction-panel p {
    color: #5c6e69;
    font-size: 16px;
    margin: 0;
}

/* ---- About ---- */

.section-kicker {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 13px;
    font-weight: bold;
    color: #4EA68D;
    margin: 0 0 8px;
}

.about-copy {
    max-width: 720px;
    margin: 0 auto;
}

.about-copy p {
    font-size: 17px;
    line-height: 1.7;
    color: #33413d;
    margin: 0 0 20px;
}

.about-copy p:last-child {
    margin-bottom: 0;
}

/* ---- Experience: ticket rail ---- */

.rail-intro {
    color: #5c6e69;
    max-width: 700px;
    margin: 0 auto 32px;
}

.ticket-rail {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 700px;
    margin: 0 auto;
}

.ticket-pair {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.ticket-pair .ticket {
    flex: 1 1 260px;
}

.ticket {
    background-color: #f7f5ee;
    color: #1e2a27;
    font-family: 'Courier New', Courier, monospace;
    border-radius: 4px;
    box-shadow: 0 8px 16px rgba(42, 35, 28, 0.18);
    overflow: hidden;

    /* Scroll-reveal: start faded/offset, keep the paper-tilt via --tilt so
       the entrance transform doesn't clobber it. JS adds .is-visible with a
       staggered transition-delay per ticket. */
    opacity: 0;
    transform: rotate(var(--tilt, 0deg)) translateY(24px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.ticket.is-visible {
    opacity: 1;
    transform: rotate(var(--tilt, 0deg)) translateY(0);
}

.ticket:nth-child(odd) {
    --tilt: -0.6deg;
}

.ticket:nth-child(even) {
    --tilt: 0.6deg;
}

@media (prefers-reduced-motion: reduce) {
    .ticket {
        transition: none;
        opacity: 1;
        transform: rotate(var(--tilt, 0deg));
    }
}

.ticket-title {
    font-weight: bold;
    font-size: 15px;
}

.ticket-stamp {
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 1px;
    border: 2px solid #BF5B04;
    border-radius: 3px;
    padding: 4px 8px;
    transform: rotate(-8deg);
    white-space: nowrap;
    flex-shrink: 0;
}

.stamp-fired { color: #4EA68D; }
.stamp-sent { color: #4EA68D; }
.stamp-void { color: #4EA68D; text-decoration: line-through; }
.stamp-line { color: #4EA68D; border-style: double; }
.stamp-cleared { color: #4EA68D; }
.stamp-progress { color: #4EA68D; }

.receipt-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 18px 20px 0;
    font-weight: bold;
    letter-spacing: 1px;
}

.receipt-title {
    font-size: 15px;
}

.receipt-no {
    font-size: 11px;
    color: #756b58;
}

.receipt-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
    padding: 10px 20px;
    border-top: 1px dashed #d6ded9;
    border-bottom: 1px dashed #d6ded9;
}

.receipt-date {
    margin: 8px 20px 0;
    font-size: 12px;
    color: #756b58;
}

.receipt-thumb-link {
    display: block;
    float: right;
    width: fit-content;
    margin: 14px 20px 4px 14px;
    transition: opacity 0.2s ease;
}

.receipt-thumb-link:hover {
    opacity: 0.85;
}

.receipt-thumb {
    display: block;
    width: 100px;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 3px 8px rgba(42, 35, 28, 0.3);
}

.receipt-list {
    list-style: none;
    margin: 0;
    padding: 14px 20px 6px;
    font-size: 14px;
    line-height: 1.6;
    color: #33413d;
}

.receipt-list li {
    margin-bottom: 6px;
    padding-left: 22px;
    text-indent: -22px;
}

.receipt-list li::before {
    content: "✓";
    display: inline-block;
    width: 22px;
    text-indent: 0;
    color: #4EA68D;
    font-weight: bold;
}

.receipt-list a {
    color: #BF5B04;
    font-weight: bold;
    text-decoration: underline;
}

.receipt-list a:hover {
    color: #8f4403;
}

.receipt-signoff {
    margin: 0;
    padding: 0 20px 18px;
    text-align: right;
    font-family: 'Dancing Script', cursive;
    font-weight: 700;
    font-size: 22px;
    color: #756b58;
}

/* ---- Relevant coursework & currently reading ---- */

.experience-panels {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 24px;
    margin-top: 40px;
}

.coursework-card,
.reading-card {
    flex: 1 1 320px;
    max-width: 480px;
    background-color: #1e2a27;
    border-radius: 12px;
    padding: 24px 28px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
    text-align: left;
}

.coursework-heading {
    color: #8ea39c;
    font-size: 13px;
    letter-spacing: 0.5px;
    margin: 0 0 12px;
}

.coursework-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.coursework-list li {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 4px 14px;
    padding: 9px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.coursework-list li:first-child {
    border-top: none;
}

.course-code {
    font-family: 'Courier New', Courier, monospace;
    color: #4EA68D;
    white-space: nowrap;
}

.course-name {
    color: #f3f7f5;
}

.course-status {
    color: #7d8f89;
    font-style: italic;
}

.reading-next-heading {
    margin-top: 20px;
}

.reading-book {
    display: flex;
    gap: 14px;
}

.reading-cover {
    width: 64px;
    height: auto;
    border-radius: 4px;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

.reading-title {
    margin: 0 0 4px;
    font-weight: bold;
    font-size: 14px;
    color: #f3f7f5;
}

.reading-sub {
    margin: 0 0 6px;
    font-size: 12px;
    color: #a9b8b3;
}

.reading-authors {
    margin: 0;
    font-size: 12px;
    color: #7d8f89;
}

.reading-next-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.reading-next-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 13px;
    color: #f3f7f5;
}

.reading-next-list li:first-child {
    border-top: none;
}

.reading-next-cover {
    width: 32px;
    height: auto;
    border-radius: 3px;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* ---- Contact ---- */

#contact {
    text-align: center;
    background-color: #1e2a27;
    color: #f3f7f5;
}

#contact .section-kicker {
    color: #4EA68D;
}

#contact h2 {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 40px;
    margin: 0 0 16px;
    color: #f7f5ee;
}

.contact-lede {
    max-width: 560px;
    margin: 0 auto 32px;
    font-size: 17px;
    line-height: 1.6;
    color: #a9b8b3;
}

.contact-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

.contact-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 22px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    border: 1px solid #3a4a45;
    color: #f3f7f5;
    background-color: transparent;
    transition: opacity 0.2s ease, border-color 0.2s ease;
}

.contact-btn:hover {
    opacity: 0.85;
    border-color: #4EA68D;
}

.contact-btn--primary {
    background-color: #4EA68D;
    color: #0f1613;
    border-color: transparent;
}

/* ---- Narrow/phone screens ----
   Kept at the very end of the file on purpose: a media-scoped rule has no
   extra specificity over a plain one, so if it sat earlier than the base
   rules it's overriding (as it briefly did), the later base rule would win
   the cascade even while this media query matched. Being last guarantees
   these win regardless of what's added above. */
@media (max-width: 600px) {
    header {
        padding: 14px 3%;
        gap: 8px;
    }

    /* At the full 56px desktop size, "Usoff Samantar" doesn't fit on one
       line here — it wraps, and the wrapped first line ends up tucked
       behind the sticky header instead of pushing content down. Shrinking
       it keeps it on one line and avoids that entirely. */
    #hero h1 {
        font-size: 36px;
    }

    .logo-badge {
        width: 34px;
    }

    nav {
        gap: 5px;
    }

    nav a {
        padding: 7px 11px;
        font-size: 13px;
    }

    .hero-buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .hero-buttons a {
        width: 100%;
        padding: 12px 8px;
        gap: 6px;
        font-size: 14px;
        white-space: nowrap;
    }

    /* Keep all 3 tickets in a row under the rail, same as desktop, just
       shrunk down to fit — the bar's own render width is narrower here, so
       the overlap needed to reach the groove line is smaller too. */
    .mini-rail-tickets {
        gap: 6px;
        margin: -52px 7% 0;
    }

    .mini-ticket {
        padding: 16px 4px 8px;
    }

    .mini-ticket strong {
        font-size: 14px;
    }

    .mini-ticket span {
        font-size: 9px;
    }
}