/* Shimori Cyber responsive breakpoint hardening.
   Loaded last so viewport-specific rules cannot be undone by base layout CSS. */

/* Keep sticky offsets tied to the real header instead of historical hard-coded values. */
.projects-toolbar,
.writeups-toolbar {
    top: var(--header-height);
}


html {
    scroll-padding-top: calc(var(--header-height) + 14px);
}

.article-content h2[id] {
    scroll-margin-top: calc(var(--header-height) + 22px);
}

/* Wide desktop: use horizontal room to reduce vertical page length. */
@media (min-width: 1180px) {
    .skills-proof-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .skill-proof-card {
        min-height: 250px;
    }
}

/* 1366x768 / short-laptop density.
   Preserve page-style navigation, but spend less height on chrome and decoration. */
@media (min-width: 1001px) and (min-height: 740px) and (max-height: 820px) {
    :root {
        --header-height: 72px;
    }

    .header-inner {
        min-height: 72px;
    }

    .home-intro-screen .hero h1 {
        font-size: clamp(2.8rem, 4.45vw, 4.65rem);
    }

    .home-intro-screen .hero-description {
        margin-top: 12px;
        font-size: .84rem;
        line-height: 1.44;
    }

    .home-intro-screen .hero-actions {
        margin-top: 14px;
    }

    .home-intro-screen .home-proof-strip {
        margin-bottom: 10px;
    }

    .home-intro-screen .home-proof-card {
        min-height: 142px;
        padding: 15px 20px 14px;
    }

    .home-intro-screen .home-proof-card h2 {
        margin-top: 6px;
        font-size: 1.12rem;
    }

    .home-intro-screen .home-proof-card p {
        margin-top: 5px;
        font-size: .72rem;
        line-height: 1.4;
    }

    body.home-landing .home-content-screen {
        padding-block: 24px;
    }

    body.home-landing .home-content-screen .section-heading,
    body.home-landing .home-capabilities-screen .section-heading {
        margin-bottom: 14px;
        padding-bottom: 11px;
    }

    body.home-landing .home-content-screen .card-image {
        max-height: 142px;
    }

    body.home-landing .home-content-screen .card-body {
        padding: 15px 17px 16px;
    }

    body.home-landing .home-content-screen .card-body h3 {
        font-size: 1.12rem;
    }

    body.home-landing .home-content-screen .card-body p:not(.card-category):not(.card-meta) {
        font-size: .75rem;
        line-height: 1.42;
    }

    body.home-landing .home-process-screen .feature-panel {
        padding: 32px;
    }

    body.home-landing .home-process-screen .feature-content {
        padding-top: 15px;
    }

    body.home-landing .home-process-screen .feature-content::before {
        margin-bottom: 15px;
    }

    body.home-landing .home-process-screen .feature-panel h2 {
        font-size: clamp(1.75rem, 2.6vw, 2.45rem);
    }

    body.home-landing .home-capabilities-screen {
        padding-block: 24px;
    }

    body.home-landing .home-capabilities-screen .capability-card {
        height: min(20vh, 150px);
        padding: 15px 14px;
    }

    body.home-landing .home-capabilities-screen .capability-icon {
        width: 38px;
        height: 38px;
        margin-bottom: 7px;
    }

    body.home-landing .home-capabilities-screen .capability-icon span {
        width: 34px;
        height: 34px;
    }

    body.home-landing .home-capabilities-screen .capability-card p {
        margin-top: 5px;
        font-size: .7rem;
        line-height: 1.34;
    }

    body.sectioned-page main > .page-hero[data-page-screen] {
        min-height: clamp(300px, 38svh, 390px) !important;
    }

    body.sectioned-page main > .section[data-page-screen],
    body.sectioned-page main > .cta-section[data-page-screen] {
        padding-block: 34px;
    }

    body.sectioned-page main > .profile-overlap[data-page-screen] {
        margin-top: -42px;
        padding-block: 38px 28px;
    }

    body.sectioned-page .section-heading {
        margin-bottom: 16px;
        padding-bottom: 11px;
    }

    body.sectioned-page .process-card {
        min-height: 180px;
        padding: 58px 17px 19px;
    }

    body.sectioned-page .proof-card {
        min-height: 190px;
        padding: 20px;
    }

    body.sectioned-page .skill-proof-card {
        min-height: 225px;
        padding: 20px;
    }

    body.sectioned-page .skill-proof-card > p {
        margin-top: 9px;
        font-size: .78rem;
        line-height: 1.46;
    }

    body.sectioned-page .skill-proof-tags {
        gap: 5px;
        margin-top: 10px;
    }

    body.sectioned-page .skill-proof-tags span {
        padding: 5px 7px;
        font-size: .62rem;
    }

    body.sectioned-page .evidence-list {
        gap: 5px;
        padding-top: 12px;
    }

    body.sectioned-page .evidence-list a {
        font-size: .75rem;
    }

    .home-section-nav,
    .page-section-nav,
    .article-chapter-nav {
        right: 14px;
        bottom: 14px;
    }
}

/* At stacked-layout widths and genuinely short windows, normal flow is safer than
   pretending a tall section fits one screen. */
@media (max-width: 1000px), (max-height: 739px) {
    html.home-snap-enabled,
    html.page-snap-enabled {
        scroll-snap-type: none !important;
    }

    body.home-landing .home-screen,
    body.sectioned-page [data-page-screen] {
        min-height: auto !important;
        scroll-snap-align: none !important;
    }

    body.home-landing .home-screen:not(.home-intro-screen) {
        overflow: visible !important;
    }

    body.home-landing .home-process-screen,
    body.home-landing .home-process-screen .feature-panel {
        min-height: auto !important;
    }

    .home-section-nav,
    .page-section-nav {
        display: none;
    }
}

/* Tablet navigation uses a 72px header and lets large browser/filter controls scroll away. */
@media (max-width: 1100px) {
    :root {
        --header-height: 72px;
    }

    .header-inner {
        min-height: 72px;
    }
}

@media (max-width: 1000px) {
    .projects-toolbar,
    .writeups-toolbar {
        position: static;
        top: auto;
    }

    .home-intro-screen {
        min-height: auto;
    }

    body.home-landing .home-process-screen {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }

    body.home-landing .home-process-screen .feature-panel {
        padding: 48px 32px;
    }

    body.home-landing .home-process-screen .feature-content {
        max-width: 680px;
    }

    body.sectioned-page main > .page-hero[data-page-screen] {
        min-height: 420px !important;
    }
}

/* Tablet article controls should not sit over reading content. */
@media (max-width: 900px) {
    .article-chapter-nav {
        display: none;
    }

    .article-chapter-nav ~ .article-backtop {
        bottom: 14px;
    }
}

/* Phone / narrow tablet: switch completely to normal document rhythm. */
@media (max-width: 760px) {
    .container {
        width: calc(100% - 32px);
    }

    .home-intro-screen {
        display: block;
    }

    .home-intro-screen .home-hero {
        height: auto;
        min-height: 520px !important;
    }

    .home-intro-screen .hero-inner {
        grid-template-columns: 1fr;
    }

    .home-intro-screen .hero-content {
        max-width: 100%;
        margin-left: 0;
    }

    .home-intro-screen .hero h1 {
        max-width: 620px;
        font-size: clamp(2.45rem, 11vw, 3.75rem);
        line-height: .98;
    }

    .home-intro-screen .home-hero::before {
        right: -30vw;
        width: min(112vw, 780px);
        opacity: .72;
    }

    .home-intro-screen .home-proof-strip {
        margin: 0 0 24px;
    }

    .page-hero,
    body.sectioned-page main > .page-hero[data-page-screen] {
        min-height: 360px !important;
    }

    .page-hero-description {
        margin-top: 18px;
    }

    .section {
        padding-block: 60px;
    }

    .cta-section {
        padding-block: 68px;
    }

    .shimori-filter-frame {
        padding: 10px;
    }

    .index-browser-row {
        gap: 8px;
    }

    .index-select-wrap,
    .index-view-controls {
        width: 100%;
    }

    .index-select {
        flex: 1 1 auto;
        min-width: 0;
    }

    .project-filter,
    .writeup-filter,
    .index-view-button,
    .index-status-filter,
    .index-clear {
        min-height: 44px;
    }

    /* On phones, metadata/TOC follows the actual article rather than delaying it. */
    .article-content {
        order: 0;
    }

    .article-side {
        order: 1;
    }

    .article-side-card {
        margin-top: 10px;
    }

    body[data-content-type="writeup"] .article-content {
        padding: 22px 18px 28px;
    }
}

@media (max-width: 520px) {
    .contact-link-item {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .contact-link-item a,
    .contact-link-item strong {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .hero-actions,
    .compact-actions {
        width: 100%;
    }

    .hero-actions .button,
    .compact-actions .button {
        flex: 1 1 150px;
        justify-content: center;
    }

    .article-threadbar-item {
        padding: 10px;
    }

    .article-threadbar-value {
        font-size: .62rem;
    }

    .index-summary-item {
        padding-inline: 10px;
    }
}

/* Very narrow devices: preserve readable gutters without wasting horizontal space. */
@media (max-width: 390px) {
    .container {
        width: calc(100% - 24px);
    }

    .home-intro-screen .home-hero {
        min-height: 500px !important;
    }

    .home-intro-screen .hero h1 {
        font-size: clamp(2.25rem, 11.5vw, 3.1rem);
    }

    .button {
        padding-inline: 14px;
    }
}