/* ============================================================
   BLOG
   Two surfaces, both native to the desktop metaphor:

   1. The index is an Explorer folder. Posts are files, with a
      name, a date modified and a size. Hover paints the Vista
      selection wash.
   2. A post is a document open in a window. The chrome stays
      glass; the page inside it goes opaque white, the way a
      Vista document app framed a sheet of paper. That is also
      the only way long-form text is readable over a moving
      background: body copy needs paper, not glass.

   Reading sizes, not UI sizes. The rest of the site sets body
   copy at 13px because it is interface. An essay is not, so the
   sheet runs at 15.5px over a capped measure.
   ============================================================ */


/* ------------------------------------------------------------
   1. THE FOLDER (blog index)
   ------------------------------------------------------------ */

.blog-folder-intro {
    margin-bottom: 18px;
    font-family: 'Segoe UI', 'Segoe UI Web', Tahoma, sans-serif;
    font-size: 13px;
    line-height: 1.7;
    color: #333;
}

/* Explorer's column header strip: a thin gradient rail with
   hairline dividers between the columns. */
.blog-columns {
    display: grid;
    grid-template-columns: 1fr 132px 96px;
    gap: 12px;
    padding: 6px 12px;
    background: linear-gradient(to bottom,
        rgba(255, 255, 255, 0.72) 0%,
        rgba(240, 246, 252, 0.62) 100%);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 4px 4px 0 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
    font-family: 'Segoe UI', 'Segoe UI Web', Tahoma, sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: #40474e;
    letter-spacing: 0.01em;
}

.blog-columns span + span {
    border-left: 1px solid rgba(0, 0, 0, 0.08);
    padding-left: 12px;
    margin-left: -6px;
}

.blog-files {
    list-style: none;
    margin: 0 0 4px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-top: 0;
    border-radius: 0 0 4px 4px;
    background: rgba(255, 255, 255, 0.42);
    overflow: hidden;
}

.blog-file {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.blog-file:last-child {
    border-bottom: 0;
}

/* The whole row is the target, so the hit area is the row and
   not just the file name. */
.blog-file > a {
    display: grid;
    grid-template-columns: 1fr 132px 96px;
    gap: 12px;
    align-items: start;
    padding: 12px;
    text-decoration: none;
    color: inherit;
    transition: background 0.14s ease;
}

/* Vista's selection wash: a top-lit blue gradient with a
   brighter hairline along the top edge. */
.blog-file > a:hover,
.blog-file > a:focus-visible {
    background: linear-gradient(to bottom,
        rgba(0, 120, 215, 0.10) 0%,
        rgba(0, 120, 215, 0.20) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
    outline: none;
}

.blog-file > a:focus-visible {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        inset 0 0 0 2px rgba(0, 120, 215, 0.85);
}

.blog-file-name {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}

.blog-file-icon {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    margin-top: 1px;
    image-rendering: -webkit-optimize-contrast;
}

.blog-file-title {
    display: block;
    font-family: 'Segoe UI', 'Segoe UI Web', Tahoma, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #14181c;
    line-height: 1.35;
    margin: 0 0 3px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65);
}

.blog-file > a:hover .blog-file-title {
    color: #005a9e;
}

.blog-file-desc {
    display: block;
    font-family: 'Segoe UI', 'Segoe UI Web', Tahoma, sans-serif;
    font-size: 12.5px;
    line-height: 1.55;
    color: #4a5157;
    margin: 0;
}

.blog-file-meta {
    font-family: 'Segoe UI', 'Segoe UI Web', Tahoma, sans-serif;
    font-size: 12px;
    color: #5b6167;
    padding-top: 2px;
    font-variant-numeric: tabular-nums;
}

/* Stacked, the columns stop being columns: the metadata folds
   under the name as one quiet line. */
@media (max-width: 620px) {
    .blog-columns {
        display: none;
    }

    .blog-files {
        border-top: 1px solid rgba(255, 255, 255, 0.6);
        border-radius: 4px;
    }

    /* Two auto columns so the name spans the row and the date and read
       time sit beside each other underneath, rather than each metadata
       value claiming a row of its own. */
    .blog-file > a {
        grid-template-columns: auto auto;
        justify-content: start;
        column-gap: 14px;
        row-gap: 7px;
    }

    .blog-file-name {
        grid-column: 1 / -1;
    }

    .blog-file-meta {
        padding-top: 0;
        font-size: 11.5px;
    }
}


/* ------------------------------------------------------------
   2. THE DOCUMENT (a post)
   The window frame stays glass; the sheet inside goes to paper.
   ------------------------------------------------------------ */

/* .vista-glass-window is capped at 100vh with overflow: hidden, which is
   right for a pane pinned over the desktop and fatal for a document: it
   clipped the essay at the first screen with no way to reach the rest.
   The document shell scrolls with the page instead, so the cap comes off. */
.post-window.vista-glass-window {
    max-height: none;
    overflow: visible;
}

.post-window .vista-glass-content {
    padding: 0;
    background: rgba(255, 255, 255, 0.35);
}

.post-sheet {
    background: #fcfdfe;
    padding: 44px 52px 40px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 0 30px rgba(120, 160, 200, 0.05);
}

.post-title {
    font-family: 'Segoe UI', 'Segoe UI Web', Tahoma, sans-serif;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.16;
    letter-spacing: -0.015em;
    color: #14181c;
    margin: 0 0 14px;
    max-width: 20ch;
    text-wrap: balance;
}

.post-byline {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 14px;
    font-family: 'Segoe UI', 'Segoe UI Web', Tahoma, sans-serif;
    font-size: 12.5px;
    color: #5b6167;
    padding-bottom: 20px;
    margin-bottom: 28px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.09);
}

.post-byline strong {
    font-weight: 600;
    color: #14181c;
}

.post-byline .dot {
    color: #b3bac0;
}

/* The reading column. 66ch, because the sheet is wider than the
   line length an essay wants. */
.post-body {
    max-width: 66ch;
    font-family: 'Segoe UI', 'Segoe UI Web', Tahoma, sans-serif;
    font-size: 15.5px;
    line-height: 1.78;
    color: #23282d;
}

.post-body p {
    margin: 0 0 20px;
    text-wrap: pretty;
}

.post-body h2 {
    font-size: 19px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: #14181c;
    margin: 40px 0 14px;
    text-shadow: none;
    text-wrap: balance;
}

.post-body h2:first-child {
    margin-top: 0;
}

.post-body a {
    color: #005a9e;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(0, 90, 158, 0.4);
}

.post-body a:hover {
    text-decoration-color: #005a9e;
}

.post-body strong {
    font-weight: 600;
    color: #14181c;
}

.post-body ul {
    margin: 0 0 20px;
    padding-left: 22px;
}

.post-body li {
    margin-bottom: 10px;
}

.post-body li::marker {
    color: #8d959c;
}

/* The lead paragraph carries a touch more size, the way a
   printed article opens. */
.post-body .lead {
    font-size: 17px;
    line-height: 1.7;
    color: #14181c;
}

/* A pulled line: the essay's one raised voice. Glass, because
   this is the one place the world's material belongs inside the
   text column. */
.post-pull {
    margin: 30px 0;
    padding: 18px 22px;
    background: linear-gradient(to bottom,
        rgba(0, 120, 215, 0.07) 0%,
        rgba(0, 120, 215, 0.11) 100%);
    border: 1px solid rgba(0, 120, 215, 0.18);
    border-radius: 6px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
    font-size: 16.5px;
    line-height: 1.6;
    font-weight: 600;
    color: #0a3d63;
}

.post-pull p {
    margin: 0;
}

.post-end {
    margin-top: 36px;
    padding-top: 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.09);
    font-family: 'Segoe UI', 'Segoe UI Web', Tahoma, sans-serif;
    font-size: 13px;
    line-height: 1.7;
    color: #4a5157;
    max-width: 66ch;
}

.post-end a {
    color: #005a9e;
}

/* Vista's window status bar: the quiet strip along the bottom
   that reported what you were looking at. */
.vista-status-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    padding: 7px 14px;
    background: linear-gradient(to bottom,
        rgba(246, 250, 253, 0.82) 0%,
        rgba(228, 238, 247, 0.78) 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.75);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
    font-family: 'Segoe UI', 'Segoe UI Web', Tahoma, sans-serif;
    font-size: 11.5px;
    color: #4a5157;
}

.vista-status-bar .sep {
    width: 1px;
    height: 12px;
    background: rgba(0, 0, 0, 0.10);
}

.vista-status-bar a {
    color: #005a9e;
    text-decoration: none;
}

.vista-status-bar a:hover {
    text-decoration: underline;
}

@media (max-width: 700px) {
    .post-sheet {
        padding: 28px 22px 30px;
    }

    .post-title {
        font-size: 25px;
        max-width: none;
    }

    .post-body {
        font-size: 15px;
    }

    .post-body .lead {
        font-size: 16px;
    }

    .post-pull {
        font-size: 15.5px;
        padding: 15px 17px;
    }
}


/* ------------------------------------------------------------
   3. BROWSER SURFACES
   The parts nobody draws still belong to the design. Vista blue
   selection, and a scrollbar that matches the chrome.
   ------------------------------------------------------------ */

.post-sheet ::selection,
.blog-folder ::selection {
    background: #0078D7;
    color: #ffffff;
}

.post-window ::-webkit-scrollbar,
.blog-folder ::-webkit-scrollbar {
    width: 14px;
    height: 14px;
}

.post-window ::-webkit-scrollbar-track,
.blog-folder ::-webkit-scrollbar-track {
    background: rgba(232, 240, 248, 0.55);
}

.post-window ::-webkit-scrollbar-thumb,
.blog-folder ::-webkit-scrollbar-thumb {
    background: linear-gradient(to right,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(186, 205, 223, 0.95) 55%,
        rgba(150, 175, 200, 0.95) 100%);
    border: 1px solid rgba(120, 148, 175, 0.55);
    border-radius: 7px;
}

.post-window ::-webkit-scrollbar-thumb:hover,
.blog-folder ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to right,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(160, 200, 235, 0.95) 55%,
        rgba(96, 156, 205, 0.95) 100%);
}


/* ------------------------------------------------------------
   4. ENTRANCE
   One authored moment. The background already carries ambient
   motion, so the sheet only rises once, and never for a visitor
   who asked for stillness.
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
    .post-window,
    .blog-folder {
        animation: blog-settle 620ms cubic-bezier(0.22, 1, 0.36, 1) both;
    }
}

@keyframes blog-settle {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* The float shell is centred with translateX(-50%); an animation
   that sets transform would fight it, so the index keeps its
   position and only fades. */
@media (prefers-reduced-motion: no-preference) {
    .blog-folder.aero-window-float {
        animation: blog-fade 620ms cubic-bezier(0.22, 1, 0.36, 1) both;
    }
}

@keyframes blog-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}