/* === Modern shared styles for lapayev.com === */

:root {
    color-scheme: light dark;

    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --content: 990px;

    /* surfaces */
    --bg: #f0eded;
    --surface: #fff;
    --header-bg: #232b34;
    --nav-bg: #22262c;
    --nav-border: rgba(255,255,255,0.07);
    --nav-text: #c8ccd2;
    --nav-hover-bg: #3d4250;

    /* text */
    --text: #3a3f47;
    --text-body: #444a54;
    --text-strong: #2a2e35;
    --text-muted: #646a75;
    --text-quote: #616874;

    /* accents */
    --accent: #c03030;
    --accent-fill: #c03030;                                 /* accent used behind white text */
    --link: #0f69be;
    --focus-on-dark: #8ec5ff;
    --quote-author: #2e7d32;

    /* lines and depth */
    --border: #e5e5e5;
    --border-strong: #ddd;
    --shadow-1: 0 1px 3px rgba(0,0,0,0.08);
    --shadow-2: 0 4px 12px rgba(0,0,0,0.12);
}

/* Dark values live in two places on purpose: the media query serves visitors
   who never touch the theme button, the attribute selector serves those who
   did. Keep the two lists identical. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #14181d;
        --surface: #1c222a;
        --header-bg: #1b222a;
        --nav-bg: #191d23;
        --nav-text: #b9c0c9;

        --text: #d6dae0;
        --text-body: #c3c9d2;
        --text-strong: #e8ecf1;
        --text-muted: #98a0ad;
        --text-quote: #a6aeba;

        --accent: #ff7a6b;                                  /* lightened for text on dark */
        --accent-fill: #b3382c;                             /* kept dark enough for white text */
        --link: #6cb6ff;
        --quote-author: #6cc47a;

        --border: #2a323c;
        --border-strong: #333c47;
        --shadow-1: 0 1px 3px rgba(0,0,0,0.5);
        --shadow-2: 0 6px 18px rgba(0,0,0,0.6);
    }
}
:root[data-theme="dark"] {
        --bg: #14181d;
        --surface: #1c222a;
        --header-bg: #1b222a;
        --nav-bg: #191d23;
        --nav-text: #b9c0c9;

        --text: #d6dae0;
        --text-body: #c3c9d2;
        --text-strong: #e8ecf1;
        --text-muted: #98a0ad;
        --text-quote: #a6aeba;

        --accent: #ff7a6b;                                  /* lightened for text on dark */
        --accent-fill: #b3382c;                             /* kept dark enough for white text */
        --link: #6cb6ff;
        --quote-author: #6cc47a;

        --border: #2a323c;
        --border-strong: #333c47;
        --shadow-1: 0 1px 3px rgba(0,0,0,0.5);
        --shadow-2: 0 6px 18px rgba(0,0,0,0.6);
}

/* the button flips the used colour scheme so form controls and scrollbars follow */
:root[data-theme="dark"] {
    color-scheme: dark;
}
:root[data-theme="light"] {
    color-scheme: light;
}

*, *::before, *::after {
    box-sizing: border-box;
}
body, h1, h2, h3, p {
    margin: 0;
    padding: 0;
}

body {
    font-family: "Source Serif 4", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--text);
    background: var(--bg);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--link);
    text-decoration: none;
    transition: color 0.2s;
}
a:hover {
    color: var(--accent);
}

/* --- Keyboard focus --- */
:focus-visible {
    outline: 3px solid var(--link);
    outline-offset: 2px;
    border-radius: 2px;
}
.site-header :focus-visible,
.site-nav :focus-visible {
    outline-color: var(--focus-on-dark);
}

/* --- Skip link --- */
.skip-link {
    position: absolute;
    top: 0;
    left: -9999px;
    z-index: 10;
    padding: 10px 18px;
    background: var(--surface);
    color: var(--link);
    font-family: var(--sans);
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}
.skip-link:focus {
    top: 8px;
    left: 8px;
}

/* --- Header banner (full-bleed band, content aligned to the page column) --- */
.site-header {
    position: relative;
    overflow: hidden;
    background: var(--header-bg) url(../images/logo_bg.jpg) center center / cover no-repeat;
}
.site-header::after {                                       /* depth, and evens out the scaled texture */
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(180deg, rgba(14,19,25,0.18), rgba(14,19,25,0.38));
    pointer-events: none;
}
.header-inner {
    position: relative;
    z-index: 3;
    max-width: var(--content);
    min-height: clamp(68px, 6vw, 88px);
    margin: 0 auto;
    padding: 12px 16px;
    display: flex;
    align-items: center;
}
.brand {
    display: flex;
    align-items: center;
    gap: clamp(12px, 2vw, 20px);
    color: #fff;
    text-decoration: none;
}
.brand:hover {
    color: #fff;
}
.brand-mark {
    flex: none;
    width: clamp(46px, 5.5vw, 64px);
    height: auto;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.45));
    transition: transform 0.25s;
}
.brand:hover .brand-mark {
    transform: rotate(-6deg);
}
.brand-text {
    display: flex;
    flex-direction: column;
    font-family: var(--sans);
}
.brand-eyebrow {
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.72);
}
.brand-name {
    font-size: clamp(1.5rem, 3.8vw, 2.2rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    word-spacing: -0.22em;                                  /* keeps the "AlexLapayev" lockup, real text underneath */
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.brand-role {
    font-size: clamp(0.72rem, 1.5vw, 0.85rem);
    font-weight: 500;
    color: #cbd8e6;
}
/* --- Navigation --- */
.site-nav {
    background: var(--nav-bg);
    border-top: 1px solid var(--nav-border);
}
.nav-inner {
    display: flex;
    flex-wrap: wrap;
    max-width: var(--content);
    margin: 0 auto;
    padding: 0 8px;
}
.nav-inner a,
.nav-inner span {
    display: block;
    padding: 12px 18px;
    font-family: var(--sans);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--nav-text);
    transition: background 0.2s, color 0.2s;
}
.nav-inner a:hover {
    background: var(--nav-hover-bg);
    color: #fff;
}
.nav-inner span.active {
    background: var(--accent-fill);
    color: #fff;
}

picture {
    display: contents;                                      /* the <img> keeps taking part in layout directly */
}

/* --- Theme button --- */
.theme-toggle {
    margin-left: auto;
    display: flex;
    align-items: center;
    padding: 12px 18px;
    border: 0;
    background: none;
    color: var(--nav-text);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.theme-toggle:hover {
    background: var(--nav-hover-bg);
    color: #fff;
}
.theme-toggle svg {
    display: none;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}
:root:not([data-theme]) .theme-toggle .icon-system,
:root[data-theme="light"] .theme-toggle .icon-light,
:root[data-theme="dark"] .theme-toggle .icon-dark {
    display: block;
}

/* --- Page layout --- */
.page-wrap {
    max-width: var(--content);
    margin: 0 auto;
    padding: 36px 16px 52px;
    display: grid;
    grid-template-columns: 1fr 210px;
    gap: 40px;
}
.page-wrap.no-sidebar {
    grid-template-columns: 1fr;
}

/* --- Main content --- */
.main-content {
    min-width: 0;
}
.main-content h1 {
    font-size: 1.65rem;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 20px;
    letter-spacing: -0.01em;
}
.main-content h2 {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-strong);
    margin: 24px 0 8px;
}
.main-content h3 {
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--text-strong);
    margin: 18px 0 6px;
}
/* The box carries the prose font size on purpose, and nothing else does: the
   68ch measure below resolves against each element's own size and face, so
   the epigraph only lines up with the paragraphs if it is measured like one.
   The quote's own type lives on the children. */
.epigraph {
    text-align: right;
    font-size: 1.05rem;
    margin-bottom: 28px;
}
.main-content .epigraph p {
    font-size: 0.95rem;
    font-style: italic;
    color: var(--text-quote);
    line-height: 1.6;
    margin: 0;
}
.main-content .epigraph .author {
    color: var(--quote-author);
    font-size: 0.88rem;
    margin-top: 4px;
}
.main-content p {
    margin-bottom: 1.05em;
    font-size: 1.05rem;
    line-height: 1.72;
    color: var(--text-body);
}
.main-content > p,
.main-content > ul,
.main-content > .epigraph {
    max-width: 68ch;                                        /* comfortable measure; info items keep the full column */
}
.main-content ul {
    margin: 0 0 16px 2em;
    padding: 0;
    list-style: disc;
}
.main-content ul li {
    font-size: 1.05rem;
    color: var(--text-body);
    margin-bottom: 6px;
    line-height: 1.7;
}
.main-content ul ul {                                       /* sub-points sit tighter and change marker, as nested lists do */
    margin: 6px 0 4px 1.4em;
    list-style: circle;
}
.main-content a {
    color: var(--link);
}
.main-content a:hover {
    color: var(--accent);
}
.main-content strong {
    font-weight: 600;
}

/* --- About Me specific --- */
/* Scoped past `.main-content p` so the tagline keeps its own size and weight. */
.main-content .motto {
    font-size: 1.12rem;
    font-weight: 600;
    color: var(--text-strong);
    margin-bottom: 20px;
}
.job {
    margin-bottom: 24px;
}
.job-title {
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--text-strong);
    margin-bottom: 2px;
}
.job-date {
    font-size: 0.9rem;
    color: var(--accent);
    font-style: italic;
    margin-bottom: 4px;
}
.job-company {
    font-size: 0.95rem;
    color: var(--text-body);
    margin-bottom: 4px;
}
.job-company u {
    text-decoration: none;
    font-weight: 500;
}
/* --- Info/Calculators specific --- */
.info-item {
    overflow: auto;
    margin-bottom: 28px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--border);
}
.info-item:last-of-type {
    border-bottom: none;
}
.info-item h2 {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-strong);
    margin: 0 0 12px;
    text-decoration: underline;
}
.info-item img.info-banner {
    float: left;
    margin: 0 14px 10px 0;
    width: 210px;
    height: auto;
}
.info-item p {
    font-size: 0.95rem;
    margin-bottom: 8px;
}
.info-item ul {
    margin: 8px 0 8px 2em;
}
.info-item li {
    font-size: 0.95rem;
    margin-bottom: 4px;
}
.info-downloads {
    clear: both;
    margin-top: 8px;
}
.info-downloads ul {
    margin: 0 0 0 2em;
}
.info-downloads li {
    font-size: 0.95rem;
    margin-bottom: 4px;
}
/* --- Pagination (info pages and the multi-page article) --- */
.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 32px 0;
    font-family: var(--sans);
}
.page-numbers {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.pagination .page-number,
.pagination .page-step {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 38px;
    font-size: 0.85rem;
    font-weight: 500;
    transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s;
}
.pagination .page-number {
    min-width: 38px;
    padding: 0 10px;
    border-radius: 6px;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text);
}
.pagination a.page-number:hover {
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-1px);
}
.pagination .page-number.is-current {                       /* matches the current-page chip in the site nav */
    border-color: transparent;
    background: var(--accent-fill);
    color: #fff;
    font-weight: 600;
    cursor: default;
}
.pagination .page-step {
    padding: 0 12px;
    color: var(--text-muted);
}
.pagination a.page-step:hover {
    color: var(--accent);
}
.pagination .page-step.is-disabled {                        /* keeps the control the same shape on the end pages */
    opacity: 0.35;
    cursor: default;
}
.page-chevron {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.15s;
}
.pagination a.page-step[rel="prev"]:hover .page-chevron {
    transform: translateX(-2px);
}
.pagination a.page-step[rel="next"]:hover .page-chevron {
    transform: translateX(2px);
}
@media (max-width: 420px) {
    .pagination {
        gap: 8px;
    }
    .pagination .page-step {
        padding: 0 8px;
    }
    .page-step-label {                                      /* aria-label on the link carries the name */
        display: none;
    }
}
/* Scoped to .main-content so it outweighs `.main-content p`, which otherwise
   wins on specificity and drags the notice back to full body size. */
.main-content .copyright-notice {
    max-width: none;                                        /* spans the column, not the 68ch prose measure */
    margin-top: 40px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-muted);
    text-align: center;
}

/* --- Applications specific --- */
.app-item {
    margin-bottom: 32px;
}
.app-item img {
    display: block;
    margin-bottom: 16px;
}

/* --- Contact methods --- */
/* Puts a face to the address. Capped at the width of the cards below so the
   column reads as one block. */
.contact-portrait {
    max-width: 640px;
    margin-top: 24px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-1);
}
.contact-portrait img {
    display: block;
    width: 100%;
    height: auto;
}
.contact-methods {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin-top: 24px;
    max-width: 640px;
}
.contact-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 18px 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow-1);
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}
.contact-card:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow-2);
    transform: translateY(-2px);
}
.contact-icon {
    flex: none;
    width: 26px;
    height: 26px;
    color: var(--accent);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.contact-icon.is-brand {                                    /* the LinkedIn mark is a solid glyph, not a line icon */
    fill: currentColor;
    stroke: none;
}
.contact-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.contact-label {
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.contact-value {
    font-family: var(--sans);
    font-size: 0.95rem;
    color: var(--text-strong);
    overflow-wrap: anywhere;                                /* the address must not spill out of the card */
}
.contact-card:hover .contact-value {
    color: var(--accent);
}

/* --- Sidebar --- */
.sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.sidebar-section h2 {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 12px;
}
.card {
    display: block;
    background: var(--surface);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: var(--shadow-1);
    transition: box-shadow 0.2s, transform 0.15s;
}
.card:hover {
    box-shadow: var(--shadow-2);
    transform: translateY(-2px);
}
.card img {
    display: block;
    width: 210px;
    height: auto;
}
.card-label {
    padding: 6px 10px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text);
}

/* --- Footer --- */
.site-footer {
    text-align: center;
    padding: 24px;
    font-size: 0.85rem;
    color: var(--text-muted);
    border-top: 1px solid var(--border-strong);
    max-width: var(--content);
    margin: 0 auto;
}
.site-footer a {
    color: var(--text-strong);
    font-weight: 600;
}
.site-footer a:hover {
    color: var(--accent);
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .header-inner {
        min-height: 0;
        padding: 14px 16px;
    }
    .page-wrap {
        grid-template-columns: 1fr;
        padding: 24px 16px 36px;
    }
    .sidebar {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 12px;
    }
    .sidebar .card {
        width: calc(50% - 6px);
    }
    .card img {
        width: 100%;
        max-width: 210px;
        height: auto;
    }
    .nav-inner {
        justify-content: center;
    }
    .nav-inner a,
    .nav-inner span {
        padding: 13px 14px;                                 /* >= 44px touch target */
        font-size: 0.84rem;
    }
    .theme-toggle {
        margin-left: 0;
        padding: 13px 14px;
    }
    .info-item img.info-banner {
        width: 40%;
        max-width: 210px;
        height: auto;
    }
}
@media (max-width: 480px) {
    .sidebar .card {
        width: 100%;
    }
    .info-item img.info-banner {
        float: none;
        display: block;
        width: 100%;
        max-width: 210px;
        margin: 0 auto 12px;
    }
}

/* --- Article pages (migrated from the 2007 templates) --- */
.main-content.article img {
    max-width: 100%;
    height: auto;                                           /* the old markup hard-codes pixel sizes */
}
.article-figure {
    margin: 24px 0;
    text-align: left;                                       /* the 2007 pages left-aligned the charts */
}
.main-content.article > p,
.main-content.article > ul {
    max-width: none;                                        /* technical text tracks the chart width */
}
.figure-zoom {
    position: relative;
    display: block;
    padding-right: 105px;                                   /* the gutter the zoom icon sits in */
    line-height: 0;                                         /* no descender gap under the chart */
}
.article-figure picture {
    display: block;
}
.article-figure picture img {
    display: block;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--surface);
}
.article-figure figcaption {
    margin-top: 8px;
    font-size: 0.9rem;
    color: var(--text-muted);
}
.zoom-icon {
    position: absolute;
    right: 12px;                                            /* beside the chart, in the gutter */
    bottom: 0;
    width: 81px;
    height: 81px;
    transition: transform 0.15s ease;
}
.figure-zoom:hover .zoom-icon,
.figure-zoom:focus .zoom-icon {
    transform: scale(1.08);
}
@media (max-width: 640px) {
    .figure-zoom {
        padding-right: 62px;
    }
    .zoom-icon {
        right: 6px;
        width: 52px;
        height: 52px;
    }
}
/* Sections of a client-side paged document. Visible until js/paging.js hides
   them, so the page still reads end to end with no JS. */
.paged {
    overflow-anchor: none;                                  /* swapping sections changes the content above the viewport, which is exactly what scroll anchoring compensates for; paging.js owns the scroll position instead */
}
.paged-page[hidden] {
    display: none;
}
.paged-page:focus {
    outline: none;                                          /* focus lands here so a screen reader announces the new page; the reader who clicked does not need a ring around it */
}

/* --- Print (About Me is the page people actually print) --- */
@media print {
    .paged-page[hidden] {
        display: block !important;                          /* paper has no pager, so print the whole document */
    }
    :root {
        --bg: #fff;
        --surface: #fff;
        --text: #000;
        --text-body: #1a1a1a;
        --text-strong: #000;
        --text-muted: #444;
        --text-quote: #333;
        --accent: #000;
        --link: #000;
        --border: #bbb;
        --border-strong: #bbb;
    }
    .site-header::after,
    .brand-mark,                                            /* light-blue strokes vanish on paper */
    .site-nav,
    .sidebar,
    .pagination,                                            /* navigation is useless on paper */
    .skip-link {
        display: none;
    }
    .site-header {
        background: none;
        border-bottom: 1px solid var(--border);
    }
    .header-inner {
        min-height: 0;
        padding: 0 0 8px;
    }
    .brand,
    .brand-eyebrow,
    .brand-name,
    .brand-role {
        color: #000;
        text-shadow: none;
    }
    .page-wrap {
        display: block;
        max-width: none;
        padding: 16px 0;
    }
    .main-content > p,
    .main-content > ul,
    .main-content > .epigraph {
        max-width: none;
    }
    .main-content a[href^="http"]:not(.plain-url)::after {   /* URLs are useless as links on paper */
        content: " (" attr(href) ")";
        font-size: 0.82em;
        color: #444;
        word-break: break-all;
    }
    .main-content a[href^="mailto"]::after {
        content: " (" attr(href) ")";
        font-size: 0.82em;
        color: #444;
    }
    .job,
    .info-item,
    .app-item {
        break-inside: avoid;
    }
    .main-content h1,
    .main-content h2 {
        break-after: avoid;
    }
    p, li {
        orphans: 3;
        widows: 3;
    }
    .card {
        box-shadow: none;
    }
}