/* =========================================================
   MOBILE.CSS — JKunframed
   Responsive overrides for style.css.
   Load AFTER style.css in every HTML file:
   <link rel="stylesheet" href="style.css">
   <link rel="stylesheet" href="mobile.css">
========================================================= */


/* =========================================================
   TABLET / SMALL DESKTOP — 1024px and below
   (grids go from 3/2-col to simpler layouts, sidebars stop
   being sticky, generous padding starts to shrink)
========================================================= */

@media (max-width: 1024px) {

    body {
        padding-top: 70px;
    }

    header {
        height: 70px;
        padding: 0 6%;
    }

    /* ---- ABOUT ---- */

    .about-main {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .about-text {
        max-width: 100%;
    }

    /* ---- JOURNAL GRID ---- */

    .journal-grid {
        grid-template-columns: 1fr;
        row-gap: 90px;
        margin-bottom: 0;
    }

    .journal-card,
    .journal-card-right,
    .journal-card-left,
    .journal-card.journal-tilt,
    .journal-card.journal-last {
        grid-column: 1 / -1;
        transform: none;
        margin-left: 0;
    }

    .journal-card.journal-tilt .journal-image {
        height: 560px;
    }

    .journal-field-note {
        grid-column: 1 / -1;
        margin-left: 0;
        margin-top: 0;
        width: 100%;
    }

    .journal-writing {
        width: 100%;
        margin-left: 0;
    }

    /* ---- TRAVEL LAYOUT ---- */

    .travel-layout {
        grid-template-columns: 1fr;
        grid-template-areas: "stories" "sidebar";
        gap: 60px;
    }

    .travel-sidebar {
        position: static;
        top: auto;
    }

    .trip-log {
        max-width: 400px;
        margin: 0 auto;
    }
    .travel-stories {
        grid-template-columns: 1fr;
        row-gap: 70px;
    }

    .travel-story,
    .travel-story.featured,
    .travel-story:not(.featured):nth-child(3n+2),
    .travel-story:not(.featured):nth-child(3n+3),
    .travel-story:not(.featured):nth-child(3n+4) {
        grid-column: 1 / -1;
        margin-top: 0;
        transform: none;
    }

    /* ---- PHOTO LAYOUT ---- */

    .photo-layout {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .photo-sidebar {
        position: static;
        top: auto;
    }

    .photo-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* ---- LIFESTYLE LAYOUT ---- */

    .lifestyle-layout {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .lifestyle-sidebar {
        position: static;
        top: auto;
    }

    .field-notebook {
        max-width: 400px;
        margin: 0 auto;
    }

    /* ---- BIO PAGES ---- */

    .bio-content-photo-wrap,
    .bio-content-manuscript-wrap {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    /* ---- HIRE ---- */

    .hire-services-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .process-route {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 50px;
    }

    /* ---- CONTACT ---- */

    .contact-main {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .contact-stamp {
        position: static;
        margin-top: 20px;
        display: flex;
        justify-content: flex-start;
    }

    /* ---- ARTICLE ---- */

    .article-hero-row {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .article-meta {
        max-width: 420px;
    }

    .article-content {
        grid-template-columns: 1fr;
    }

    .article-pullquote-shift {
        margin-left: 0;
    }

    .article-photos-item-wide {
        width: 100%;
    }

}


/* =========================================================
   MOBILE — 768px and below
   (nav becomes a toggled menu, hero stacks, custom cursor
   is already disabled via pointer:coarse in style.css)
========================================================= */

@media (max-width: 768px) {

    html {
        scroll-padding-top: 84px;
    }

    body {
        padding-top: 64px;
        cursor: auto;
    }

    /* ---- SIMPLIFY: drop decorative extras on mobile ---- */

    .mascot-sticker,
.mascot-peek,
.mascot-peek-ear,
.mascot-peek-tail,
.washi-tape,
.hint-tag,
.camera-flash,
.ink-flash,
.crumpled-paper,
.polaroid-tape,
.polaroid-wrap,
.light-table,
.photo-sidebar,
.bio-exif,
.bio-draftlog,
.journal-compass,
.tl-compass,
.journal-lower-collage,
.travel-postmark,
.photo-postmark,
.life-postmark,
.article-postmark,
.article-photos-postmark,
.board-ephemera,
.scrapbook-pin,
.board-doodle-circle {
    display: none !important;
}
    /* ---- DESKTOP NOTICE ---- */

.desktop-notice {
    position: fixed;
    left: 5%;
    right: 5%;
    bottom: 20px;
    z-index: 200;

    padding: 16px 18px 14px;

    background: var(--paper);
    color: var(--stamp-ink);

    border: 1.5px solid var(--stamp-ink);
    border-radius: 3px 10px 4px 12px / 8px 3px 12px 3px;

    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);

    transform: translateY(140%);
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.desktop-notice.is-visible {
    transform: translateY(0);
}

.desktop-notice-top {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 12px;
}

.desktop-notice-label {
    color: var(--text-tertiary);

    font-family: "Courier New", monospace;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.desktop-notice-close {
    flex-shrink: 0;

    width: 22px;
    height: 22px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: none;
    border: 1px solid var(--border-soft);
    border-radius: 50%;

    color: var(--text-tertiary);

    font-size: 12px;
    line-height: 1;

    cursor: pointer;
}

.desktop-notice-close:active {
    background: var(--stamp-ink);
    color: var(--paper);
}

.desktop-notice p {
    margin-top: 10px;

    font-family: Georgia, serif;
    font-style: italic;
    font-size: 13px;
    line-height: 1.5;

    color: var(--text-secondary);
}

    /* ---- HEADER / NAV ---- */

    header {
        height: 64px;
        padding: 0 5%;
    }

    .logo {
        font-size: 24px;
        letter-spacing: -2px;
    }

    .brand-label {
        font-size: 10px;
    }

    .brand::after {
        height: 14px;
    }

    .menu-button {
        display: block;
    }

    header nav,
    header .desktop-nav {
        position: fixed;
        top: 64px;
        left: 0;
        right: 0;
        bottom: 0;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        gap: 0;

        padding: 40px 8%;

        background: var(--bg);

        opacity: 0;
        visibility: hidden;

        transition:
            opacity 0.4s ease,
            visibility 0s linear 0.4s;

        overflow-y: auto;
    }

    header nav.menu-open,
    header .desktop-nav.menu-open {
        opacity: 1;
        visibility: visible;

        transition: opacity 0.4s ease;

        counter-reset: nav-index;
    }

    /* eyebrow label, top-left */
    header nav.menu-open::before,
    header .desktop-nav.menu-open::before {
        content: "MENU";
        position: absolute;
        top: 30px;
        left: 8%;

        color: var(--text-tertiary);

        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.3em;
        text-transform: uppercase;

        opacity: 0;
        animation: nav-decor-in 0.5s ease forwards;
    }

    /* rotated stamp, bottom-center */
    header nav.menu-open::after,
    header .desktop-nav.menu-open::after {
        content: "JKUNFRAMED · MYS";
        position: absolute;
        bottom: 30px;
        left: 50%;

        padding: 9px 13px;

        border: 1px solid var(--border-soft);

        color: var(--text-tertiary);

        font-size: 8px;
        letter-spacing: 0.2em;

        transform: translateX(-50%) rotate(-3deg);

        opacity: 0;
        animation: nav-decor-in 0.5s ease forwards;
        animation-delay: 0.4s;
    }

    @keyframes nav-decor-in {
        to { opacity: 1; }
    }

    header nav.menu-open a,
    header .desktop-nav.menu-open a {
        display: flex;
        align-items: baseline;
        justify-content: center;
        gap: 14px;

        counter-increment: nav-index;

        animation: nav-link-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

    header nav.menu-open a:nth-child(1) { animation-delay: 0.08s; }
    header nav.menu-open a:nth-child(2) { animation-delay: 0.16s; }
    header nav.menu-open a:nth-child(3) { animation-delay: 0.24s; }
    header nav.menu-open a:nth-child(4) { animation-delay: 0.32s; }

    @keyframes nav-link-in {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* numbered prefix, e.g. 01 / 02 / 03 / 04 */
    header nav.menu-open a::before,
    header .desktop-nav.menu-open a::before {
        content: counter(nav-index, decimal-leading-zero);

        color: var(--border-soft);

        font-family: "Courier New", monospace;
        font-size: 11px;
        letter-spacing: 0.1em;
    }

    header nav.menu-open a.active,
    header .desktop-nav.menu-open a.active {
        color: var(--accent);
    }

    header nav.menu-open a.active::before,
    header .desktop-nav.menu-open a.active::before {
        color: var(--accent);
    }

    /* the header hides on scroll-down (see header-hidden in
       script.js) — if that happened before the menu was opened,
       the header (and its close button) would otherwise stay
       hidden behind the full-screen nav with no way to close it */
    body.menu-active header.header-hidden {
        transform: translateY(0);
    }

    /* momentum-scrolling the nav list shouldn't also rubber-band
       the page behind it once the list itself hits its end */
    header nav,
    header .desktop-nav {
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    header nav a,
    header .desktop-nav a {
        width: 100%;

        padding: 18px 0;

        font-size: 22px;
        letter-spacing: 0;
        text-align: center;

        opacity: 0;
        transform: translateY(15px);
    }

    header nav a::after,
    header .desktop-nav a::after {
        display: none;
    }

    header nav a.is-exiting,
    header .desktop-nav a.is-exiting {
        animation: none;
        transition: opacity 0.3s ease, transform 0.3s ease;

        opacity: 0;
        transform: translateY(-10px);
    }

    header nav a.is-selected,
    header .desktop-nav a.is-selected {
        animation: none;
        transition: opacity 0.25s ease, transform 0.25s ease;

        opacity: 1;
        transform: translateY(0);
    }

    header nav a.is-selected.is-leaving,
    header .desktop-nav a.is-selected.is-leaving {
        opacity: 0;
        transform: translateY(-10px);
    }

    /* ---- HERO ---- */

    .hero {
        min-height: calc(100vh - 64px);
        padding: 40px 6% 60px;
    }

    .hero-title h1 {
        font-size: clamp(70px, 22vw, 130px);
    }

    .hero-label {
        position: static;
        transform: none;

        margin-bottom: 20px;
        text-align: left;
    }

    .hero-heading {
        display: flex;
        flex-direction: column;
    }

    .hero-annotation {
        position: static;

        margin-top: 40px;

        transform: none;
        text-align: left;
    }

    .hero-bottom {
        flex-direction: column;
        align-items: flex-start;

        gap: 20px;

        margin-top: 40px;
    }

    .description {
        max-width: 100%;
        margin-top: 0;

        font-size: 15px;
    }

    .hero-cta {
        margin-top: 25px;
    }

    .journal-cta {
        width: 100%;
    }

    /* ---- ABOUT ---- */

    .about {
        min-height: auto;
        padding: 80px 6%;
    }

    .about-main {
        margin-top: 70px;
    }

    .about-stamp {
        display: none;
    }

    .about-text > p {
        font-size: 15px;
    }

    /* ---- JOURNAL ---- */

    .work {
        padding: 90px 6% 100px;
    }

    .work-header {
        flex-direction: column;
        align-items: flex-start;

        gap: 16px;

        margin-bottom: 60px;
    }

    .journal-featured .journal-image {
        height: 420px;
    }

    .journal-card .journal-image,
    .journal-card-right .journal-image,
    .journal-card-left .journal-image,
    .journal-card.journal-tilt .journal-image {
        height: 400px;
    }

    .journal-info {
        flex-direction: column;
        gap: 8px;
    }

    .journal-featured .journal-info h3 {
        font-size: clamp(28px, 8vw, 40px);
    }

    .journal-interactive {
        padding: 28px 24px 30px;
    }

    .journal-destinations {
        flex-direction: column;
        align-items: flex-start;

        gap: 16px;
    }

    .journal-route {
        display: none;
    }

    /* ---- TRAVEL ---- */

    .travel-page,
    .photo-page,
    .lifestyle-page,
    .hire-page {
        padding: 80px 6% 100px;
    }

    .travel-intro,
    .photo-intro,
    .lifestyle-intro,
    .hire-intro {
        min-height: auto;
        padding-top: 20px;
    }

    .travel-intro h1,
    .photo-intro h1,
    .lifestyle-intro h1 {
        font-size: clamp(50px, 16vw, 90px);

        margin: 20px 0 30px;
    }

    .travel-stamp,
    .photo-stamp,
    .life-stamp,
    .hire-stamp {
        display: none;
    }

    .travel-annotation,
    .photo-annotation,
    .life-annotation {
        position: static;

        margin-top: 24px;

        transform: none;
        text-align: left;
    }

    .travel-top,
    .photo-top,
    .life-top,
    .hire-top {
        font-size: 9px;
    }

    .travel-filters,
    .photo-filters,
    .life-filters {
        margin-bottom: 40px;
    }

    .filter-chip {
        font-size: 10px;
    }

    .travel-story.featured .travel-image {
        height: 340px;
    }

    .travel-image {
        height: 320px !important;
    }

    .travel-info h2 {
        font-size: clamp(24px, 7vw, 34px);
    }

    .trip-log-keychain {
        display: none;
    }

    /* ---- PHOTOGRAPHY ---- */

    /* ---- PHOTOGRAPHY SCRAPBOOK ---- */

.scrapbook-board {
    columns: 1;
    column-gap: 0;

    padding: 20px 6% 60px;
}

.scrapbook-photo,
.scrapbook-large,
.scrapbook-small,
.scrapbook-landscape,
.scrapbook-landscape.scrapbook-small {
    width: 100%;
    max-width: 420px;

    margin: 0 auto 30px;

    transform: none;
}

.scrapbook-photo:hover,
.scrapbook-photo:active {
    transform: none;
    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.14),
        0 3px 8px rgba(0, 0, 0, 0.08);
}

    .photo-grid {
        grid-template-columns: 1fr;
        row-gap: 40px;
    }

    .photo-grid .photo:not(.photo-large):not(.photo-wide):nth-child(3n),
    .photo-grid .photo:not(.photo-large):not(.photo-wide):nth-child(3n+1),
    .photo-grid .photo:not(.photo-large):not(.photo-wide):nth-child(3n+2) {
        height: 380px;
        margin-top: 0;
        transform: none;
    }

    .photo-large {
        grid-column: 1;
        height: 420px;
    }

    .photo-wide {
        grid-column: 1;
        height: 360px;
    }

    /* ---- LIFESTYLE ---- */

    .lifestyle-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .life-card-large {
        grid-column: 1;
    }

    .life-card a {
        height: 400px;
    }

    .life-card-large a {
        height: 440px;
    }

    /* ---- BIO PAGES ---- */

    .bio-page {
        padding: 80px 6% 100px;
    }

    .bio-intro {
        min-height: auto;
        padding-top: 10px;
    }

    .bio-intro h1 {
        font-size: clamp(64px, 20vw, 130px);
    }

    .bio-content-manuscript,
    .bio-content-photo {
        padding: 45px 22px 40px;
    }

    .bio-content-manuscript {
        padding-left: 55px;
    }

    .paper-holes {
        left: 22px;
        gap: 34px;
    }

    .manuscript-stamp {
        left: 55px;
    }

    .bio-quote,
    .bio-quote-photo {
        font-size: 22px;
    }

    .bio-page-writer .bio-text > p:not(.bio-label) {
        font-size: 20px;
    }

    .doodle-arrow {
        display: none;
    }

    /* ---- HIRE / CONTACT ---- */

    .hire-services,
    .hire-process {
        padding: 70px 0;
    }

    .service-card {
        padding: 30px 24px 28px;
    }

    .process-route {
        grid-template-columns: 1fr;
        row-gap: 40px;
    }

    .contact {
        min-height: auto;
        padding: 80px 6%;
    }

    .contact-main {
        margin-top: 70px;
    }

    .contact-main h2 {
        font-size: clamp(46px, 15vw, 90px);
    }

    .stamp-ring {
        width: 150px;
        height: 150px;
    }

    /* ---- STAMP RUSH ---- */

    .stamp-rush {
        padding: 80px 6%;
    }

    .stamp-rush-heading h2 {
        font-size: clamp(40px, 13vw, 70px);
    }

    .stamp-rush-game,
    .stamp-rush-leaderboard {
        max-width: 100%;
    }

    .stamp-rush-board {
        gap: 8px;
        padding: 12px;
    }

    .stamp-rush-name-input {
        font-size: 16px;
    }

    /* ---- ARTICLE ---- */

    .article {
        padding: 80px 6% 100px;
    }

    .article-header h1 {
        font-size: clamp(50px, 15vw, 90px);
    }

    .article-intro {
        max-width: 100%;

        margin-top: 40px;

        font-size: 16px;
    }

    .article-stamp {
        display: none;
    }

    .article-meta {
        max-width: 100%;
    }

    .article-text p {
        font-size: 16px;
        text-align: left;
    }

    .article-photos-item-right,
    .article-photos-item-left {
        float: none;

        width: 100%;
        max-width: 320px;

        margin: 20px auto;
    }

    .article-photos-item-left:has(img[src="images/sashimi1.jpg"]) {
        margin-top: 20px;
    }

    .article-text h2.beside-photo {
        margin-left: 0;
    }

    .article-pullquote {
        font-size: 21px;
        padding-left: 30px;
    }

    .article-footer {
        flex-direction: column;
        align-items: flex-start;

        gap: 20px;

        margin-top: 70px;
    }

    /* ---- FOOTER ---- */

    footer {
        flex-direction: column;
        align-items: flex-start;

        gap: 16px;

        padding: 30px 6%;
    }

}


/* =========================================================
   SMALL MOBILE — 480px and below
========================================================= */

@media (max-width: 480px) {

    .hero-title h1 {
        font-size: clamp(56px, 20vw, 90px);
    }

    .about-main h2,
    .work-header h2 {
        font-size: clamp(38px, 12vw, 64px);
    }

    .journal-interactive-title strong {
        font-size: clamp(34px, 12vw, 50px);
    }

    .trip-log {
        max-width: 100%;

        padding: 24px 18px 18px;
    }

    .trip-log-place strong {
        font-size: 24px;
    }

    .service-name {
        font-size: 28px;
    }

    .stamp-rush-board {
        gap: 6px;
    }

    .stamp-rush-name-input {
        width: 160px;
    }

    .article-header h1,
    .travel-intro h1,
    .photo-intro h1,
    .lifestyle-intro h1,
    .bio-intro h1 {
        letter-spacing: -0.07em;
    }

}


/* =========================================================
   TOUCH INTERACTION — most interactive states in style.css
   are :hover-only, which never fires on touch. These give
   tap feedback instead, and drop the tap-delay some mobile
   browsers still add to non-fast-click elements.
========================================================= */

@media (max-width: 768px) {

    a,
    button,
    .filter-chip,
    .destination,
    .menu-button {
        touch-action: manipulation;
    }

    .menu-button {
        padding: 10px 4px;
    }

    header nav a:active,
    header .desktop-nav a:active {
        opacity: 0.5;
    }

    .filter-chip {
        padding: 10px 16px;
    }

    .filter-chip:active {
        background: var(--accent);
        border-color: var(--accent);
        color: var(--bg);
    }

    .destination {
        padding: 6px 0;
    }

    .destination:active {
        color: var(--text-primary);
    }

    .button:active {
        background: #954f30;
        transform: translateY(-2px);
    }

    .journal-cta:active {
        background: var(--accent);
        border-color: var(--accent);
        transform: translateY(-3px);
    }

    .about-person:active {
        padding-left: 15px;
        padding-right: 15px;
        background: #e9e6df;
    }

}


/* =========================================================
   ACCESSIBILITY — keep reduced-motion behavior consistent
   on mobile too (mobile already skips the custom cursor via
   pointer:coarse in style.css, so nothing extra needed there)
========================================================= */

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {

    header nav,
    header .desktop-nav {
        transition: none;
    }

    header nav a,
    header .desktop-nav a {
        animation: none;
        opacity: 1;
        transform: none;
    }

    header nav.menu-open::before,
    header .desktop-nav.menu-open::before,
    header nav.menu-open::after,
    header .desktop-nav.menu-open::after {
        animation: none;
        opacity: 1;
    }

}


/* =========================================================
   LANDSCAPE PHONES — the intro sections use tall min-heights
   (70–90vh) tuned for portrait. In landscape, viewport height
   is short, so those min-heights force a lot of near-empty
   scrolling before real content appears.
========================================================= */

@media (max-width: 900px) and (orientation: landscape) {

    .hero,
    .about,
    .contact,
    .travel-intro,
    .photo-intro,
    .lifestyle-intro,
    .hire-intro,
    .bio-intro,
    .stamp-rush {
        min-height: auto;
    }

    .hero {
        padding-top: 50px;
        padding-bottom: 50px;
    }

}