/* Shared approved blog design. Extracted without rule changes from Pre-Production at 5d9291369. */

      [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 620ms ease, transform 740ms cubic-bezier(0.22, 0.61, 0.21, 1); }
      [data-reveal].is-revealed { opacity: 1; transform: none; }
      @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } }
      /* the blog post reading page: one quiet column, his 2015-2026 archive
         verbatim. Squarespace markup rides inside .blg-body - we style tags,
         never its classes. */
      .blg-wrap { padding: clamp(7rem, 13vh, 9.5rem) clamp(1.2rem, 5vw, 4rem) clamp(4rem, 9vh, 7rem); }
      .blg-head { max-width: 46rem; margin: 0 auto; text-align: center; }
      .blg-back { display: inline-block; margin-bottom: clamp(1.6rem, 4vh, 2.6rem); font-family: "IBM Plex Mono", monospace; font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(244 241 235 / 0.5); text-decoration: none; }
      .blg-back:hover { color: rgb(244 241 235 / 0.9); }
      .blg-eyebrow { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 0.3rem 0.55rem; margin: 0 0 1rem; font-family: "IBM Plex Mono", monospace; font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(244 241 235 / 0.55); }
      .blg-eyebrow > * { white-space: nowrap; }
      .blg-eyebrow time { color: var(--kls-accent, #fb5607); }
      .blg-eyebrow i { font-style: normal; opacity: 0.45; }
      .blg-eyebrow b { font-weight: 400; color: rgb(244 241 235 / 0.75); }
      .blg-cover { max-width: 56rem; margin: 0 auto clamp(1.6rem, 3vh, 2.2rem); border-radius: 0.4rem; overflow: hidden; box-shadow: 0 0 0 1px rgb(244 241 235 / 0.07); }
      .blg-cover img { display: block; width: 100%; height: auto; }
      .blg-head h1.is-long { margin: 0 auto; max-width: 40rem; font-family: "Playfair Display", Georgia, serif; font-weight: 400; font-size: clamp(1.55rem, 1.05rem + 2.4vw, 2.7rem); line-height: 1.18; color: #f4f1eb; text-wrap: balance; }
      /* a 110+ character title is an essay, not a name - it steps down
         again and widens so it resolves in three lines, never five */
      .blg-head h1.is-xlong { max-width: 46rem; font-size: clamp(1.35rem, 1rem + 1.5vw, 2.05rem); line-height: 1.3; }
      .blg-rule { max-width: 5.5rem; margin: clamp(1.4rem, 2.6vh, 2rem) auto; border: 0; border-top: 1px solid var(--kls-accent, #fb5607); opacity: 0.7; }
      .blg-body { max-width: 44rem; margin: 0 auto; color: rgb(244 241 235 / 0.8); font-size: 0.98rem; line-height: 1.8; }
      .blg-body > :first-child, .blg-body > div > :first-child { margin-top: 0; }
      .blg-body p { margin: 0 0 1.15rem; }
      .blg-body h2, .blg-body h3 { margin: 2.2rem 0 0.8rem; font-family: "Playfair Display", Georgia, serif; font-weight: 500; color: rgb(244 241 235 / 0.95); line-height: 1.25; }
      .blg-body h2 { font-size: 1.5rem; } .blg-body h3 { font-size: 1.2rem; }
      .blg-body a { color: var(--kls-accent, #fb5607); text-decoration: none; }
      .blg-body a:hover { text-decoration: underline; }
      .blg-body img { display: block; width: 100%; height: auto; margin: 1.6rem 0; border-radius: 0.3rem; }
      .blg-body figure { margin: 1.6rem 0; }
      .blg-body figure img { margin: 0; }
      .blg-body figcaption { margin-top: 0.5rem; font-size: 0.78rem; color: rgb(244 241 235 / 0.5); }
      .blg-body blockquote { margin: 1.8rem 0; padding-left: 1.2rem; border-left: 2px solid var(--kls-accent, #fb5607); font-family: "Playfair Display", Georgia, serif; font-style: italic; font-size: 1.15rem; color: rgb(244 241 235 / 0.88); }
      .blg-body iframe { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; margin: 1.6rem 0; border-radius: 0.3rem; background: #0a0c11; }
      .blg-body ul, .blg-body ol { margin: 0 0 1.15rem; padding-left: 1.3rem; }
      .blg-body li { margin-bottom: 0.4rem; }
      .blg-body hr { margin: 2rem 0; border: 0; border-top: 1px solid rgb(244 241 235 / 0.12); }
      .blg-body .sqs-audio-embed, .blg-body .sqs-block-form, .blg-body form { display: none; }
      .blg-foot { max-width: 44rem; margin: clamp(2.5rem, 5vh, 3.5rem) auto 0; padding-top: 1.6rem; border-top: 1px solid rgb(244 241 235 / 0.14); }
      .blg-foot a { font-family: "IBM Plex Mono", monospace; font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(244 241 235 / 0.6); text-decoration: none; }
      .blg-foot a:hover { color: rgb(244 241 235 / 0.95); }
      @media (max-width: 640px) {
        .blg-wrap { padding-top: clamp(5.6rem, 10vh, 7rem); }
        .blg-head h1.is-long { font-size: 1.45rem; line-height: 1.25; }
        .blg-head h1.is-xlong { font-size: 1.3rem; line-height: 1.35; }
        .blg-body { font-size: 0.95rem; }
      }
      /* ---- the index rail: a post is not a dead end. On the wide read the
         article pulls left and the archive stands beside it - the newest
         posts in the index's own voice (serif headline, mono meta, hairline
         between), scrolling on their own so a reader can step post to post
         without going back out. It is a layer, not a column: below 1100px
         it stands down entirely rather than crowd the read. ---- */
      .blg-shell { display: block; }
      .blg-rail { display: none; }
      .blg-rail-in { display: flex; flex-direction: column; position: sticky; top: 0; height: 100dvh; padding: clamp(6.4rem, 12vh, 8.4rem) clamp(1.1rem, 1.7vw, 1.7rem) 1.3rem; }
      .blg-rail-head { margin: 0 0 0.3rem; font-family: "Playfair Display", Georgia, serif; font-weight: 400; font-size: 1.45rem; line-height: 1.05; color: #f4f1eb; }
      .blg-rail-head em { font-style: italic; color: var(--kls-accent, #fb5607); }
      .blg-rail-note { margin: 0 0 1rem; font-family: "IBM Plex Mono", monospace; font-size: 0.55rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgb(244 241 235 / 0.4); }
      .blg-rail-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgb(244 241 235 / 0.2) transparent; -webkit-mask-image: linear-gradient(#000 0, #000 calc(100% - 2.2rem), transparent 100%); mask-image: linear-gradient(#000 0, #000 calc(100% - 2.2rem), transparent 100%); }
      .blg-rail-list::-webkit-scrollbar { width: 3px; }
      .blg-rail-list::-webkit-scrollbar-thumb { background: rgb(244 241 235 / 0.2); border-radius: 3px; }
      .blg-rail-item { display: block; padding: 0.68rem 0; border-top: 1px solid rgb(244 241 235 / 0.08); text-decoration: none; color: inherit; }
      .blg-rail-item:first-child { border-top: 0; padding-top: 0; }
      .blg-rail-meta { display: flex; align-items: center; gap: 0.42rem; font-family: "IBM Plex Mono", monospace; font-size: 0.53rem; letter-spacing: 0.13em; text-transform: uppercase; color: rgb(244 241 235 / 0.4); }
      .blg-rail-meta time { color: var(--kls-accent, #fb5607); }
      .blg-rail-meta i { font-style: normal; opacity: 0.4; }
      .blg-rail-item strong { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-top: 0.26rem; font-family: "Playfair Display", Georgia, serif; font-weight: 400; font-size: 0.9rem; line-height: 1.36; color: rgb(244 241 235 / 0.78); transition: color 220ms ease; }
      .blg-rail-item:hover strong, .blg-rail-item:focus-visible strong { color: #f4f1eb; }
      .blg-rail-item.is-current { padding-left: 0.7rem; box-shadow: inset 2px 0 0 var(--kls-accent, #fb5607); }
      .blg-rail-item.is-current strong { color: #f4f1eb; }
      .blg-rail-all { display: block; margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px solid rgb(244 241 235 / 0.12); font-family: "IBM Plex Mono", monospace; font-size: 0.55rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgb(244 241 235 / 0.5); text-decoration: none; }
      .blg-rail-all:hover { color: var(--kls-accent, #fb5607); }
      @media (min-width: 1100px) {
        .blg-shell { display: grid; grid-template-columns: minmax(0, 1fr) clamp(17rem, 21vw, 21rem); }
        .blg-rail { display: block; border-left: 1px solid rgb(244 241 235 / 0.1); }
      }
          /* blg-gallery */
      /* Squarespace reserves a media frame's height with a percentage padding
         on the wrapper and then lets the image or embed sit in flow inside
         it - every classic image block and every video ran with an equal
         height black void under it. Zero the reservation, keep the media. */
      .blg-body .sqs-image-shape-container-element,
      .blg-body .embed-block-wrapper { padding-bottom: 0 !important; height: auto !important; }
      .blg-body .sqs-block-image img { position: static !important; height: auto !important; }
      /* Headings inside a harvested body are section labels, not page titles.
         Squarespace shipped some of them as <h1>, and uniform.css sizes any
         main h1 at the page-title scale (.definitive-interior main h1), so
         one landed mid-read at 60px. The cap carries the page class to out-
         specify that rule, and covers the whole family at reading scale. */
      .blog-page .blg-wrap .blg-body h1, .blog-page .blg-wrap .blg-body h2,
      .blog-page .blg-wrap .blg-body h3, .blog-page .blg-wrap .blg-body h4 { margin: 2rem 0 0.75rem; font-family: "Playfair Display", Georgia, serif; font-weight: 400; line-height: 1.3; color: rgb(244 241 235 / 0.95); text-transform: none; letter-spacing: normal; max-width: none; }
      .blog-page .blg-wrap .blg-body h1, .blog-page .blg-wrap .blg-body h2 { font-size: clamp(1.15rem, 1rem + 0.8vw, 1.45rem); }
      .blog-page .blg-wrap .blg-body h3 { font-size: clamp(1.05rem, 0.95rem + 0.55vw, 1.3rem); }
      .blog-page .blg-wrap .blg-body h4 { font-size: clamp(1rem, 0.95rem + 0.3vw, 1.12rem); }
      /* A photo run is not a paragraph - it breaks out past the reading
         measure to ONE width token and packs like the photography archive.
         CSS columns balanced the run into three ragged stacks: a column ran
         long and dangled a photograph below the others, a wide frame overran
         the square its neighbours implied, and a hole opened where the last
         short column stopped. The rows are JUSTIFIED instead - solved at
         build time in galleryize.py, shipped as explicit flex rows.
         A cell's --a is its native aspect. flex-grow:var(--a) over a zero
         basis hands each photo in a row the width a_i x h out of the row's
         free space, so every photo in the row stands at the same height h
         and the last one lands exactly on the right edge - flush left AND
         right, nothing cropped, no measurement on the page. */
      .blg-body { --blg-wide: min(68rem, 92vw); --blg-gap: 0.62rem; }
      .blg-gallery { width: var(--blg-wide); margin: 2rem 0 2.2rem; margin-inline: calc(50% - var(--blg-wide) / 2); display: flex; flex-direction: column; gap: var(--blg-gap); }
      .blg-row { display: flex; column-gap: var(--blg-gap); width: var(--rw, 100%); margin-inline: auto; }
      .blg-nb { display: none; }
      .blg-gallery .blg-cell { flex-grow: var(--a, 1); flex-shrink: 1; flex-basis: 0; min-width: 0; aspect-ratio: var(--a, 1.5); margin: 0; padding: 0; overflow: hidden; border-radius: 0.3rem; background: #0b0d12; cursor: pointer; opacity: 0; transform: translateY(18px); transition: opacity 620ms cubic-bezier(0.22, 0.61, 0.21, 1), transform 740ms cubic-bezier(0.22, 0.61, 0.21, 1); }
      .blg-gallery .blg-cell.is-in { opacity: 1; transform: none; }
      .blg-gallery .blg-cell img { display: block; width: 100%; height: 100%; object-fit: cover; margin: 0; border-radius: 0; opacity: 0.86; transition: transform 760ms cubic-bezier(0.22, 0.61, 0.21, 1), opacity 420ms ease; }
      .blg-gallery .blg-cell:hover img, .blg-gallery .blg-cell:focus-visible img { opacity: 1; transform: scale(1.02); }
      .blg-gallery .blg-cell:focus-visible { outline: 1px solid var(--kls-accent, #fb5607); outline-offset: 2px; }
      /* the run measures itself against the article COLUMN, so the index
         rail simply narrows it - no second width rule for the railed page */
      @supports (container-type: inline-size) {
        .blg-wrap { container-type: inline-size; }
        .blg-body { --blg-wide: min(68rem, 100cqw); }
      }
      /* The phone keeps the grid - 2-up rows out of the same packer at a
         smaller row height, never one full-screen photograph per screen.
         The desktop rows dissolve (display:contents) and the build-time
         narrow breaks drive the lines instead, so one set of photographs
         serves both plans. */
      @media (max-width: 760px) {
        .blg-body { --blg-gap: 0.5rem; }
        .blg-gallery { flex-direction: row; flex-wrap: wrap; column-gap: var(--blg-gap); row-gap: 0; margin-bottom: 1.8rem; }
        .blg-row { display: contents; }
        .blg-nb { display: block; flex: 0 0 100%; height: var(--blg-gap); }
      }
      @media (prefers-reduced-motion: reduce) { .blg-gallery .blg-cell { opacity: 1; transform: none; transition: none; } }
      /* A short line stranded between two photo runs read as a fragment
         someone forgot to delete. It is the author's own beat - so it is set
         as one: centred, given air on both sides, a step up in scale. The
         builder finds it; not a word of it is moved or rewritten. */
      .blg-body .blg-beat { margin: clamp(2.4rem, 5.5vh, 3.6rem) auto; max-width: 34rem; text-align: center; }
      .blg-body .blg-beat p, .blg-body .blg-beat div { margin-left: auto; margin-right: auto; }
      /* Squarespace put white-space:pre-wrap INLINE on these paragraphs, so
         the source indent after each <br> printed as a real leading space
         and every line after the first sat 3px right of centre. pre-line
         keeps the author's line breaks and drops the indentation; it has to
         out-rank an inline style, hence the !important, and it is scoped to
         the beat alone. No character of the copy changes. */
      .blg-body .blg-beat p { margin-top: 0; margin-bottom: 0.4rem; white-space: pre-line !important; font-family: "Playfair Display", Georgia, serif; font-size: clamp(1.2rem, 1rem + 1vw, 1.65rem); line-height: 1.4; color: rgb(244 241 235 / 0.94); }
      .blg-body .blg-beat p:last-child { margin-bottom: 0; }
      /* end blg-gallery */


      /* 10/27: the first post written for the new site rather than harvested from Squarespace. Its films sit in the
         reading column at their own shape (Kyle shoots BTS vertical), never stretched to the column's width, and
         the photo spots Kyle's Oct 25 BTS edits will fill are marked until they land. */
      .blg-body .blg-film { margin: 2rem auto; max-width: min(28rem, 100%); }
      .blg-body .blg-film.is-hero { max-width: min(32rem, 100%); }
      .blg-body .blg-film.is-vertical { max-width: min(20rem, 100%); }
      .blg-body .blg-film video { display: block; width: 100%; height: auto; border-radius: 0.3rem; background: #0b0d12; }
      .blg-slot { display: grid; place-content: center; gap: 0.35rem; min-height: 11rem; margin: 2rem 0; padding: 1.4rem; border: 1px dashed rgb(244 241 235 / 0.28); border-radius: 0.3rem; background: rgb(244 241 235 / 0.03); text-align: center; }
      .blg-slot span { font-family: "IBM Plex Mono", monospace; font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--kls-accent, #fb5607); }
      .blg-body .blg-slot p { margin: 0; font-size: 0.85rem; line-height: 1.5; color: rgb(244 241 235 / 0.6); }
      .blg-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.62rem; margin: 2rem 0; }
      .blg-slots .blg-slot { margin: 0; min-height: 9rem; padding: 1rem; }
      .blg-cover.blg-slot { max-width: 56rem; min-height: clamp(12rem, 30vw, 20rem); margin: 0 auto clamp(1.6rem, 3vh, 2.2rem); }
      @media (max-width: 640px) { .blg-slots { grid-template-columns: 1fr; } }
      /* 10/27 (Kyle's call: treat each post like a landing page): the close is one big orange button to the
         application, then his signature as it ends his emails, with the studio's socials. */
      .blg-body .blg-cta { margin: 2.2rem 0 0; }
      .blg-body .blg-cta-btn { display: flex; align-items: center; justify-content: center; gap: 0.8rem; width: 100%; min-height: 4rem; padding: 0 2rem; background: var(--kls-accent, #fb5607); color: #06070a; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; transition: background 220ms ease, color 220ms ease; }
      .blg-body .blg-cta-btn svg { width: 1.1rem; height: 1.1rem; transition: transform 320ms cubic-bezier(0.22, 0.61, 0.21, 1); }
      .blg-body .blg-cta-btn:hover, .blg-body .blg-cta-btn:focus-visible { background: #f4f1eb; color: #06070a; text-decoration: none; }
      .blg-body .blg-cta-btn:hover svg { transform: translateX(5px); }
      .blg-sign { margin: 3rem 0 0; padding-top: 1.8rem; border-top: 1px solid rgb(244 241 235 / 0.12); }
      .blg-body .blg-sign p { margin: 0; }
      .blg-body .blg-sign-name { font-family: "Playfair Display", Georgia, serif; font-style: italic; font-size: 1.7rem; line-height: 1.2; color: #f4f1eb; }
      .blg-body .blg-sign-role { margin-top: 0.35rem; font-family: "IBM Plex Mono", monospace; font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgb(244 241 235 / 0.55); }
      .blg-body .blg-sign-role i, .blg-body .blg-sign-studio i { font-style: normal; opacity: 0.45; }
      .blg-body .blg-sign-studio { margin-top: 0.6rem; font-size: 0.85rem; color: rgb(244 241 235 / 0.7); }
      .blg-body .blg-sign-studio a { color: rgb(244 241 235 / 0.85); }
      .blg-body .blg-sign-studio a:hover { color: var(--kls-accent, #fb5607); }
      .blg-sign-social { display: flex; gap: 0.2rem; margin: 0.9rem 0 0 -0.45rem; }
      .blg-sign-social a { display: grid; place-items: center; width: 2.05rem; height: 2.05rem; color: rgb(244 241 235 / 0.72); transition: color 220ms ease, transform 220ms ease; }
      .blg-sign-social a:hover { color: var(--kls-accent, #fb5607); transform: translateY(-2px); }
      .blg-sign-social svg { display: block; width: 1.15rem; height: 1.15rem; margin: 0; }
      @media (max-width: 640px) { .blg-body .blg-cta-btn { min-height: 3.6rem; font-size: 0.72rem; } }
      /* 10/28 (Kyle's call: "visual aids that make it more interesting", iconography, charts): each post's own
         facts drawn as the site draws data, serif figures over mono labels on hairlines, no boxes. */
      .blg-body .blg-timeline { margin: 2.4rem 0 2.6rem; }
      .blg-timeline ol { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
      .blg-timeline ol::before { content: ""; position: absolute; left: 0; right: 0; top: 0.35rem; height: 1px; background: rgb(244 241 235 / 0.2); }
      .blg-body .blg-timeline li { position: relative; margin: 0; padding: 1.35rem 1.2rem 0 0; }
      .blg-timeline li::before { content: ""; position: absolute; top: 0; left: 0; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: #06070a; box-shadow: inset 0 0 0 1px rgb(244 241 235 / 0.6); }
      .blg-timeline li.is-next::before { background: var(--kls-accent, #fb5607); box-shadow: none; }
      .blg-timeline time { display: block; font-family: "IBM Plex Mono", monospace; font-size: 0.56rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--kls-accent, #fb5607); }
      .blg-timeline span { display: block; margin-top: 0.35rem; font-family: "Playfair Display", Georgia, serif; font-size: 0.92rem; line-height: 1.35; text-wrap: balance; color: rgb(244 241 235 / 0.88); }
      .blg-body .blg-figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 2.2rem 0; border-top: 1px solid rgb(244 241 235 / 0.14); border-bottom: 1px solid rgb(244 241 235 / 0.14); }
      .blg-figures div { padding: 1.2rem 0.9rem 1.15rem 0; }
      .blg-figures div + div { padding-left: 0.9rem; border-left: 1px solid rgb(244 241 235 / 0.1); }
      .blg-figures strong, .blg-stat strong { display: block; font-family: "Playfair Display", Georgia, serif; font-weight: 400; line-height: 1; color: #f4f1eb; }
      .blg-figures strong { font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem); }
      .blg-figures span, .blg-stat span { display: block; margin-top: 0.55rem; font-family: "IBM Plex Mono", monospace; font-size: 0.56rem; letter-spacing: 0.13em; text-transform: uppercase; color: rgb(244 241 235 / 0.55); }
      .blg-body .blg-stat { margin: 2.2rem 0; padding: 1.6rem 0; text-align: center; border-top: 1px solid rgb(244 241 235 / 0.14); border-bottom: 1px solid rgb(244 241 235 / 0.14); }
      .blg-stat strong { font-size: clamp(3.2rem, 2.2rem + 4vw, 5.2rem); color: var(--kls-accent, #fb5607); }
      .blg-body .blg-plan { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 1.8rem 0; padding: 0; list-style: none; border-top: 1px solid rgb(244 241 235 / 0.14); }
      .blg-body .blg-plan li { margin: 0; padding: 1.1rem 1.1rem 1.2rem 0; border-bottom: 1px solid rgb(244 241 235 / 0.1); }
      .blg-body .blg-plan li:nth-child(even) { padding-left: 1.1rem; border-left: 1px solid rgb(244 241 235 / 0.1); }
      .blg-plan li > span { display: block; font-family: "IBM Plex Mono", monospace; font-size: 0.56rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--kls-accent, #fb5607); }
      .blg-body .blg-plan li p { margin: 0.45rem 0 0; font-size: 0.92rem; line-height: 1.7; }
      .blg-body .blg-photo { margin: 2rem auto; max-width: min(28rem, 100%); }
      .blg-body .blg-photo img { margin: 0; border-radius: 0.3rem; }
      .blg-slots.is-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      @media (max-width: 640px) {
        .blg-timeline ol { grid-template-columns: 1fr; }
        .blg-timeline ol::before { top: 0.2rem; bottom: 0.5rem; left: 0.34rem; right: auto; width: 1px; height: auto; }
        .blg-body .blg-timeline li { padding: 0 0 1.05rem 1.6rem; }
        .blg-timeline li::before { top: 0.15rem; }
        .blg-timeline span { margin-top: 0.2rem; }
        .blg-body .blg-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .blg-figures div:nth-child(3) { padding-left: 0; border-left: 0; }
        .blg-figures div:nth-child(n+3) { border-top: 1px solid rgb(244 241 235 / 0.1); }
        .blg-body .blg-plan { grid-template-columns: 1fr; }
        .blg-body .blg-plan li:nth-child(even) { padding-left: 0; border-left: 0; }
        .blg-slots.is-four { grid-template-columns: 1fr 1fr; }
      }


/* round 2 lab (2026-10-28): a real post page; only the arrangement below is new. Values are the site's:
   blog column 44rem, title 2.7rem, labels IBM Plex Mono .6rem/.14em, lead-btn .72rem/600/.16em/2px,
   homepage close h2 2.7rem, lede 1.25rem/.72, cards 16:10/5.6px, mono meta .58rem. */
.lx-h { margin: 0; font-family: "Playfair Display", Georgia, serif; font-weight: 400; color: #f4f1eb; }
.lx-h em { font-style: italic; color: var(--kls-accent, #fb5607); }
/* the homepage's lead-btn */
.lx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 0.85rem 1.5rem; border: 1px solid rgb(244 241 235 / 0.34); border-radius: 2px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; line-height: 1.55; text-transform: uppercase; text-decoration: none; color: #f4f1eb; transition: background-color 220ms ease, color 220ms ease, transform 220ms ease, border-color 220ms ease; }
.lx-btn.is-solid { background: #f4f1eb; border-color: #f4f1eb; color: #0a0b0e; }
@media (hover: hover) { .lx-btn:hover { transform: translateY(-2px); border-color: #f4f1eb; } .lx-btn.is-solid:hover { background: rgb(255 253 248); border-color: rgb(255 253 248); } }
/* split opening (A) */
.lx-split { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(2.5rem, 5vw, 5rem); max-width: 72rem; margin: 0 auto clamp(4rem, 9vh, 6rem); }
.lx-split .blg-head { margin: 0; text-align: left; max-width: 34rem; }
.lx-split .blg-eyebrow { justify-content: flex-start; }
.lx-split .blg-head h1.is-long { margin: 0; max-width: none; }
.lx-film { margin: 0; height: min(64vh, 40rem); aspect-ratio: 4 / 5; border-radius: 0.4rem; overflow: hidden; background: #0d0f14; box-shadow: 0 0 0 1px rgb(244 241 235 / 0.07); }
.lx-film video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* broad opening (C): the film across the measure's wide token { width: min(68rem, 92vw); margin: 0 auto clamp(2.6rem, 6vh, 3.6rem); aspect-ratio: 16 / 9; border-radius: 0.4rem; overflow: hidden; background: #0d0f14; box-shadow: 0 0 0 1px rgb(244 241 235 / 0.07); }
/* About-style pairs (B): the About page's director and studio rows,image beside prose { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; width: min(68rem, 92vw); margin: clamp(3rem, 7vh, 4.5rem) 0; margin-inline: calc(50% - min(68rem, 92vw) / 2); }
/* related reading and the sign-up: the blog rail's heading,the homepage's cards and sign-up { max-width: 44rem; margin: clamp(4rem, 9vh, 6rem) auto 0; padding: 0 clamp(1.2rem, 5vw, 4rem); box-sizing: content-box; }
.lx-logo { position: absolute; left: 50%; top: 50%; width: 59%; height: 43%; transform: translate(-50%, -50%); object-fit: contain; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.55)); }
@media (max-width: 860px) {
  .lx-split { grid-template-columns: 1fr; gap: 1.8rem; }
  .lx-split .lx-film { order: -1; height: auto; width: 100%; }
}
@media (max-width: 760px) {
  .lx-btn { padding: 0.85rem 0.7rem; }
}

/* round 3, C: reading scale (declared change from the blog's .98rem / 1.45rem / 2.7rem) */
.lx-c3 .blg-head { max-width: 46rem; }
.lx-c3 .blg-head h1.is-long { max-width: 44rem; font-size: clamp(2rem, 1.2rem + 2.6vw, 3.2rem); line-height: 1.12; letter-spacing: -0.01em; }
.lx-c3 .blg-head h1 em { font-style: italic; color: var(--kls-accent, #fb5607); }
.lx-c3 .blg-rule { margin: clamp(2rem, 4.5vh, 2.8rem) auto clamp(2.2rem, 5vh, 3.2rem); }
.lx-c3 .blg-body { max-width: 40rem; font-size: 1.0625rem; line-height: 1.75; }
.lx-c3 .blg-body p { margin-bottom: 1.25rem; }
.lx-c3 .blg-body strong { font-weight: 600; color: #f4f1eb; }
.blog-page .blg-wrap.lx-c3 .blg-body h2 { margin: 3.4rem 0 1rem; font-size: clamp(1.35rem, 1.05rem + 1vw, 1.75rem); font-weight: 500; line-height: 1.22; color: #f4f1eb; }
.lx-c3 .blg-body li { margin-bottom: 0.5rem; }
.lx-c3 .blg-sign { margin-top: clamp(3rem, 7vh, 4rem); }
@media (max-width: 640px) {
  .lx-c3 .blg-head h1.is-long { font-size: 1.9rem; line-height: 1.16; }
  .lx-c3 .blg-body p, .lx-c3 .blg-body li { line-height: 1.7; }
  .blog-page .blg-wrap.lx-c3 .blg-body h2 { margin-top: 2.8rem; font-size: 1.4rem; }
}

/* round 4: the letter opening (round 1's Lab C),the visual signature,the newsletter on its own { display: flex; flex-direction: column; align-items: center; margin: 0 0 clamp(2rem, 4.5vh, 2.6rem); }
.lx-r4 .blg-head h1.is-long { font-size: clamp(2.1rem, 1.1rem + 2.6vw, 3.4rem); line-height: 1.08; letter-spacing: -0.02em; }
.lx-r4 .blg-head h1 .tsub { display: block; margin-top: 0.45em; font-size: 0.6em; color: rgb(244 241 235 / 0.62); }
.lx-r4 .blg-body { margin-top: clamp(3rem, 7vh, 4.4rem); }
@media (max-width: 640px) {
  .lx-r4 .blg-head h1.is-long { font-size: 2rem; line-height: 1.1; }
}

/* round 5, blog A polished: the split opening (title and byline beside the film) inside the article column */
.lx-a5 .lx-split { max-width: none; margin: 0 0 clamp(3.4rem, 8vh, 5rem); gap: clamp(2rem, 4vw, 4rem); }
.lx-a5 .lx-split .blg-head { max-width: 34rem; }
.lx-a5 .blg-head .blg-back { margin-bottom: clamp(1.4rem, 3.5vh, 2.2rem); }
.lx-a5 .blg-head h1.is-long { margin: 0; font-size: clamp(2rem, 0.9rem + 2.2vw, 3.1rem); line-height: 1.06; letter-spacing: -0.02em; text-align: left; }
.lx-a5 .blg-head h1 .tsub { margin-top: 0.4em; }
.lx-a5 .lx-film { height: min(60vh, 36rem); }
.lx-by { display: flex; align-items: center; flex-wrap: wrap; gap: 0.3rem 0.55rem; margin: clamp(1.8rem, 4vh, 2.4rem) 0 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 0.9rem; color: rgb(244 241 235 / 0.5); }
.lx-by img { width: 36px; height: 36px; margin-right: 0.35rem; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgb(244 241 235 / 0.12); }
.lx-by .nm { color: #f4f1eb; font-weight: 500; }
.lx-by i { font-style: normal; opacity: 0.5; }
.lx-a5 .blg-body { margin-top: 0; }
.lx-a5 .blg-body figure.lx-inline { margin: clamp(2.6rem, 6vh, 3.4rem) auto; border-radius: 0.4rem; overflow: hidden; background: #0d0f14; box-shadow: 0 0 0 1px rgb(244 241 235 / 0.07); }
.lx-a5 .blg-body figure.lx-inline.is-45 { width: min(100%, 27rem); aspect-ratio: 4 / 5; }
.lx-a5 .blg-body figure.lx-inline.is-916 { width: min(70%, 19rem); aspect-ratio: 9 / 16; }
.lx-a5 .blg-body figure.lx-inline video { display: block; width: 100%; height: 100%; object-fit: cover; margin: 0; border-radius: 0; }
@media (max-width: 860px) {
  .blog-page .blg-wrap.lx-a5 { padding-top: 0; }
  .lx-a5 .lx-split { gap: 1.6rem; }
  .lx-a5 .lx-split .lx-film { order: -1; height: auto; width: 100%; aspect-ratio: 4 / 5; }
  .lx-a5 .lx-split .blg-head { max-width: none; }
}
@media (max-width: 640px) {
  .lx-a5 .blg-head h1.is-long { font-size: 2.05rem; line-height: 1.08; }
  .lx-a5 .lx-split .lx-film { width: calc(100% + 2 * clamp(1.2rem, 5vw, 4rem)); margin-inline: calc(-1 * clamp(1.2rem, 5vw, 4rem)); border-radius: 0; box-shadow: none; }
  .lx-by { font-size: 0.86rem; }
}

/* round 6: Lab A's phone opening at every width. The still runs edge to edge under the header and fades into the
   page; the title and byline sit inside its lower part, on the reading column's axis. Photo and title share one grid
   cell, so the photo always runs behind the whole title block whatever the headline's length (10/29: a fixed
   negative margin let the photo end across the headline on phones). */
.blog-page .blg-wrap.lx-a6 { padding-top: 0; }
.lx-a6 .lx-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; max-width: none; margin: 0 0 clamp(3rem, 7vh, 4.5rem); }
.lx-a6 .lx-split .lx-film { grid-area: 1 / 1; align-self: stretch; position: relative; width: calc(100% + 2 * clamp(1.2rem, 5vw, 4rem)); max-width: none; margin: 0 calc(-1 * clamp(1.2rem, 5vw, 4rem)); height: auto; min-height: min(80vh, 48rem); aspect-ratio: auto; border-radius: 0; box-shadow: none; }
.lx-a6 .lx-film img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.lx-a6 .lx-split .lx-film { overflow: hidden; overflow: clip; background: #06070a; }
.lx-a6 .lx-film::after { content: ""; position: absolute; inset: 30% 0 -2px; background: linear-gradient(rgb(6 7 10 / 0), rgb(6 7 10 / 0.72) 45%, #06070a 86%); pointer-events: none; }
.lx-a6 .lx-split .blg-head { grid-area: 1 / 1; align-self: end; position: relative; z-index: 1; width: 100%; max-width: 40rem; margin: 0 auto; padding: 9rem 0 clamp(2.4rem, 6vh, 3.6rem); }
.lx-a6 .blg-head .blg-back { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; margin: 0 0 0.5rem; font-size: 0.7rem; letter-spacing: 0.16em; color: #f4f1eb; text-shadow: 0 1px 12px rgb(6 7 10 / 0.6); transition: color 220ms ease; }
@media (hover: hover) { .lx-a6 .blg-head .blg-back:hover { color: var(--kls-accent, #fb5607); } }
.lx-a6 .blg-head .blg-back:focus-visible { outline: 1px solid var(--kls-accent, #fb5607); outline-offset: 4px; }
.lx-a6 .blg-head h1.is-long { font-size: clamp(2.3rem, 0.9rem + 2.4vw, 3.5rem); line-height: 1.04; letter-spacing: -0.022em; text-wrap: balance; }
.lx-a6 .blg-head h1 .tsub { margin-top: 0.5em; font-size: 0.56em; letter-spacing: -0.012em; }
.lx-a6 .lx-by { margin-top: 2.2rem; }
@media (max-width: 860px) {
  .lx-a6 .lx-split .lx-film { min-height: 125vw; }
  .lx-a6 .lx-film::after { inset: 25% 0 -2px; }
  .lx-a6 .lx-split .blg-head { padding: 12rem 0 1.75rem; }
  .lx-a6 .blg-head h1.is-long { font-size: 2.1rem; line-height: 1.07; }
  .lx-a6 .lx-by { margin-top: 1.5rem; }
}

/* round 7: the end card answers the opening. Kyle on set,edge to edge { position: relative; width: calc(100% + 2 * clamp(1.2rem, 5vw, 4rem)); margin: clamp(4rem, 10vh, 6rem) calc(-1 * clamp(1.2rem, 5vw, 4rem)) 0; height: min(78vh, 46rem); background: #0d0f14; }

/* round 8: Whole Street's Featured list and tags (gallery b04), on Kyle's rail. 64px thumb (80/300 of the column),
   14px to the title, his rail type; tags are his categories with his 2px corners */
.blg-rail-item { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: 0.875rem; align-items: start; }
.blg-rail-thumb { display: block; width: 4rem; aspect-ratio: 1; border-radius: 0.4rem; overflow: hidden; background: #0d0f14; box-shadow: 0 0 0 1px rgb(244 241 235 / 0.07); }
.blg-rail-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0.86; transition: opacity 220ms ease; }
.blg-rail-item.is-current .blg-rail-thumb { box-shadow: 0 0 0 1px var(--kls-accent, #fb5607); }
.blg-rail-txt { display: block; min-width: 0; }
@media (hover: hover) { .blg-rail-item:hover .blg-rail-thumb img { opacity: 1; } }
.blg-rail-tags { padding-top: 1rem; border-top: 1px solid rgb(244 241 235 / 0.08); }
.blg-rail-tags .blg-rail-note { margin-bottom: 0.6rem; }
.blg-rail-tags div { display: flex; flex-wrap: wrap; gap: 0.375rem 0.5rem; }
.blg-rail-tags a { padding: 0.3rem 0.55rem; border: 1px solid rgb(244 241 235 / 0.16); border-radius: 2px; font-family: "IBM Plex Mono", monospace; font-size: 0.55rem; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.2; color: rgb(244 241 235 / 0.7); text-decoration: none; transition: color 220ms ease, border-color 220ms ease; }
@media (hover: hover) { .blg-rail-tags a:hover { color: var(--kls-accent, #fb5607); border-color: var(--kls-accent, #fb5607); } }
.blg-rail-tags + .blg-rail-all { margin-top: 0.9rem; }

/* round 9: Criterion's body (gallery b06) under Lab A's opening */
.lx-a9 .blg-body { position: relative; }
.lx-share { display: none; }
@media (min-width: 1000px) {
  .lx-share { display: flex; flex-direction: column; align-items: center; gap: 1.625rem; position: absolute; top: 0.3rem; right: calc(100% + clamp(3rem, 8vw, 8.5rem)); width: 2.625rem; }
  .lx-share .lx-share-k { margin: 0 0 -0.8rem; font-family: "IBM Plex Mono", monospace; font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.2; color: rgb(244 241 235 / 0.5); }
  .lx-share a, .lx-share button { display: grid; place-items: center; width: 2.625rem; height: 2.625rem; padding: 0; border: 1px solid rgb(244 241 235 / 0.2); border-radius: 50%; background: none; color: rgb(244 241 235 / 0.78); cursor: pointer; transition: color 220ms ease, border-color 220ms ease; }
  .lx-share a:focus-visible, .lx-share button:focus-visible { outline: 1px solid var(--kls-accent, #fb5607); outline-offset: 3px; }
  .lx-share-done { min-height: 1em; font-family: "IBM Plex Mono", monospace; font-size: 0.55rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--kls-accent, #fb5607); }
}
@media (hover: hover) and (min-width: 1000px) { .lx-share a:hover, .lx-share button:hover { color: var(--kls-accent, #fb5607); border-color: var(--kls-accent, #fb5607); } }
.lx-a9 .blg-body p.lx-dc::first-letter { float: left; font-family: "Playfair Display", Georgia, serif; font-size: 3.4em; line-height: 0.82; margin: 0.08em 0.1em 0 0; color: #f4f1eb; }
.lx-a9 .lx-plate { margin: clamp(2.4rem, 5vh, 3rem) 0; }
.lx-a9 .lx-plate .blg-gallery { width: 100%; margin: 0; }
.lx-a9 .lx-plate figcaption, .lx-a9 .lx-cap { margin: 0.8rem 0 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 0.75rem; line-height: 1.4; text-align: center; color: rgb(244 241 235 / 0.5); }
.lx-a9 .lx-filmcap { margin: clamp(2.6rem, 6vh, 3.4rem) 0; }
.lx-a9 .lx-filmcap figure.lx-inline { margin-block: 0; }
.lx-a9 .lx-signoff { max-width: 40rem; margin: 2rem auto 0; }

/* round 10: Substack's end (Experimental History,measured): one centred line and one joined field { margin: clamp(3.4rem, 8vh, 4.4rem) 0 0; padding-bottom: clamp(2.6rem, 6vh, 3.4rem); border-bottom: 1px solid rgb(244 241 235 / 0.1); text-align: center; }

/* round 12: Pilcrow's close (measurements in r12.py) */
.lx-a12 .lx-signoff { max-width: 40rem; margin: 0 auto; }
.lx-a12 .lx-shareline { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid rgb(244 241 235 / 0.1); }
.lx-a12 .lx-shareline p { margin: 0; font-size: 1.0625rem; font-weight: 500; color: #f4f1eb; }
.lx-a12 .lx-shareline button { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; min-width: 16.25rem; height: 3rem; padding: 0 1.1rem; border: 1px solid rgb(244 241 235 / 0.34); border-radius: 2px; background: none; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 0.94rem; font-weight: 500; color: #f4f1eb; cursor: pointer; transition: border-color 220ms ease, color 220ms ease; }
@media (hover: hover) { .lx-a12 .lx-shareline button:hover { border-color: #f4f1eb; } }
.lx-a12 .lx-keep { margin-top: clamp(4.5rem, 10vh, 6.5rem); }
.lx-a12 .lx-keep .lx-h { margin: 0; font-size: clamp(2rem, 1.2rem + 2vw, 3rem); line-height: 1.05; letter-spacing: -0.02em; text-align: left; max-width: none; }
.lx-a12 .lx-keep .lx-h em { font-style: italic; color: var(--kls-accent, #fb5607); }
.lx-a12 .lx-kr-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin-top: 2rem; }
.lx-a12 .lx-kr-card { display: block; text-decoration: none; color: inherit; }
.lx-a12 .lx-kr-pic { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 0.4rem; background: #0d0f14; }
.lx-a12 .lx-kr-pic img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0.9; transition: opacity 220ms ease, transform 760ms cubic-bezier(0.22, 0.61, 0.21, 1); }
.lx-a12 .lx-kr-meta { display: flex; justify-content: space-between; gap: 0.6rem; margin-top: 1rem; font-family: "IBM Plex Mono", monospace; font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(244 241 235 / 0.5); }
.lx-a12 .lx-kr-meta b { font-weight: 400; color: var(--kls-accent, #fb5607); }
.lx-a12 .lx-kr-card strong { display: block; margin-top: 0.6rem; font-family: "Playfair Display", Georgia, serif; font-size: 1.375rem; line-height: 1.2; color: #f4f1eb; }
.lx-a12 .lx-kr-line { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 0.5rem; font-size: 1rem; line-height: 1.55; color: rgb(244 241 235 / 0.6); }
@media (hover: hover) { .lx-a12 .lx-kr-card:hover .lx-kr-pic img { opacity: 1; transform: scale(1.02); } .lx-a12 .lx-kr-card:hover strong { color: var(--kls-accent, #fb5607); } }
@media (max-width: 860px) {
  .lx-a12 .lx-shareline { flex-direction: column; align-items: stretch; }
  .lx-a12 .lx-shareline button { width: 100%; min-width: 0; }
  .lx-a12 .lx-kr-row { grid-template-columns: minmax(0, 1fr); gap: 2.4rem; }
    }

/* round 13: the author sign-off (Pilcrow's name + Craig Mod's block), Kyle's own sign-up as /blog/ shows it, the second card strip */
.lx-a13 .lx-news2 { margin-top: clamp(3.4rem, 8vh, 4.6rem); text-align: center; }
.lx-a13 .lx-news2 .lx-h { margin: 0; max-width: none; font-size: clamp(1.9rem, 1.2rem + 2vw, 2.7rem); line-height: 1.08; letter-spacing: -0.015em; }
.lx-a13 .lx-news2 .lx-h em { font-style: italic; color: var(--kls-accent, #fb5607); }
.lx-a13 .lx-news2 > p { max-width: 30rem; margin: 0 auto; font-family: "Playfair Display", Georgia, serif; font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.6rem); line-height: 1.35; text-wrap: balance; color: #f4f1eb; }
.lx-a13 .lx-news2 > p b { color: #f4f1eb; font-weight: 600; }
.lx-a13 .lx-news2 .kls-sub { margin: 1.5rem auto 0; text-align: left; }
.lx-a13 .lx-author { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem 1.1rem; margin-top: 2.4rem; }
.lx-a13 .lx-author img { width: 3.5rem; height: 3.5rem; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgb(244 241 235 / 0.14); }
.lx-a13 .lx-author p { margin: 0; }
.lx-a13 .lx-author-name { font-family: "Playfair Display", Georgia, serif; font-size: 1.375rem; line-height: 1.15; color: #f4f1eb; }
.lx-a13 .lx-author-role { margin-top: 0.3rem !important; font-size: 0.9rem; line-height: 1.45; color: rgb(244 241 235 / 0.62); }
.lx-a13 .lx-author-role a { color: #f4f1eb; text-decoration: none; box-shadow: inset 0 -1px 0 rgb(244 241 235 / 0.3); transition: color 220ms ease, box-shadow 220ms ease; }
.lx-a13 .lx-author-social { display: flex; gap: 0.5rem; }
.lx-a13 .lx-author-social a { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 1px solid rgb(244 241 235 / 0.2); border-radius: 2px; color: rgb(244 241 235 / 0.82); transition: color 220ms ease, border-color 220ms ease; }
.lx-a13 .lx-author-social svg { width: 1.05rem; height: 1.05rem; }
@media (hover: hover) { .lx-a13 .lx-author-social a:hover, .lx-a13 .lx-author-role a:hover { color: var(--kls-accent, #fb5607); border-color: var(--kls-accent, #fb5607); box-shadow: inset 0 -1px 0 var(--kls-accent, #fb5607); } }
@media (max-width: 640px) {
  .lx-a13 .lx-author { grid-template-columns: auto minmax(0, 1fr); }
  .lx-a13 .lx-author-social { grid-column: 1 / -1; }
}

/* round 14: the share line, Substack's single Share button */
.lx-a14 .lx-shareline { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; }
.lx-a14 .lx-shareline p { margin: 0 auto 0 0; font-size: 0.95rem; font-weight: 400; line-height: 1.45; color: rgb(244 241 235 / 0.66); }
.lx-a14 .lx-shareline .lx-sharebtn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; width: auto; min-width: 0; height: 2.5rem; padding: 0 0.95rem; border: 1px solid rgb(244 241 235 / 0.24); border-radius: 2px; background: none; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 0.85rem; font-weight: 500; color: #f4f1eb; cursor: pointer; transition: color 220ms ease, border-color 220ms ease; }
@media (hover: hover) { .lx-a14 .lx-shareline .lx-sharebtn:hover { color: var(--kls-accent, #fb5607); border-color: var(--kls-accent, #fb5607); } }
.lx-a14 .lx-shareline .lx-sharebtn:focus-visible { outline: 1px solid var(--kls-accent, #fb5607); outline-offset: 3px; }
@media (max-width: 860px) { .lx-a14 .lx-shareline { flex-direction: row; align-items: center; } .lx-a14 .lx-shareline .lx-sharebtn { width: auto; } }
/* round 14: the studio name never breaks inside the author's role line; the author's two actions */
.lx-a14 .lx-author-role .nw { white-space: nowrap; color: #f4f1eb; }
.lx-a14 .lx-author-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.4rem; }
.lx-a14 .lx-author-actions .lx-btn.is-orange { background: var(--kls-accent, #fb5607); border-color: var(--kls-accent, #fb5607); color: #06070a; }
@media (hover: hover) { .lx-a14 .lx-author-actions .lx-btn.is-orange:hover { background: #f4f1eb; border-color: #f4f1eb; } }
/* round 14: the sign-up inside the article, set off by hairlines */
.lx-a14 .blg-body .lx-news2 { margin: clamp(2.6rem, 6vh, 3.4rem) 0; padding: clamp(2rem, 5vh, 2.6rem) 0; border-top: 1px solid rgb(244 241 235 / 0.1); border-bottom: 1px solid rgb(244 241 235 / 0.1); }
.lx-a14 .blg-body .lx-news2 form.kls-sub { display: block; }
.lx-a14 .blg-body .lx-news2 > p { margin: 0 auto; font-family: "Playfair Display", Georgia, serif; font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.6rem); line-height: 1.35; color: #f4f1eb; }
/* round 14: less space between the byline and the first paragraph (Giovani: "wtf is this space") */
.blog-page .blg-wrap.lx-a14 .lx-split { margin-bottom: 0.75rem; }
.lx-a14 .lx-split .blg-head { padding-bottom: 1.25rem; }
@media (max-width: 860px) { .lx-a14 .lx-split .blg-head { padding-bottom: 1rem; } }
/* round 14: the subtitle (Substack / Medium: a short title, then one sentence in lighter type) */
.lx-a6 .blg-head .lx-dek { max-width: 34rem; margin: 1rem 0 0; font-size: 1.125rem; line-height: 1.5; color: rgb(244 241 235 / 0.74); text-wrap: pretty; }
@media (max-width: 860px) { .lx-a6 .blg-head .lx-dek { font-size: 1rem; } }

/* round 15: the signature as Lenny's author card */
.lx-a15 .lx-author { grid-template-columns: 3.5rem minmax(0, 1fr); grid-template-areas: "pic who" ". act"; align-items: center; gap: 1.1rem 1.1rem; }
.lx-a15 .lx-author > img { grid-area: pic; }
.lx-a15 .lx-author-who { grid-area: who; }
.lx-a15 .lx-author-actions { grid-area: act; margin: 0; justify-self: start; align-self: center; flex-wrap: nowrap; }
.lx-a15 .lx-author-social { grid-area: act; justify-self: end; align-self: center; }
@media (max-width: 640px) {
  .lx-a15 .lx-author { grid-template-areas: "pic who" "act act" "soc soc"; gap: 1rem; }
  .lx-a15 .lx-author-actions { grid-area: act; justify-self: stretch; flex-direction: row; }
  .lx-a15 .lx-author-actions .lx-btn { flex: 1 1 0; width: auto; padding-inline: 0.75rem; }
  .lx-a15 .lx-author-social { grid-area: soc; justify-self: start; }
}
/* round 15: one type system on the page (Giovani: "ensure font uniformity across the page"). Every role takes the
   site's own tokens from uniform.css: --font-body for all sans text, --u-lede for the subtitle, --u-meta for small
   text, --u-label with --u-track for mono labels, --u-h3 for the small serif titles, --u-ink-2 / --u-ink-3 for
   secondary text. The site's own components (header, rail, footer, the sign-up field) are left as they are. */
.lx-a15 .blg-body, .lx-a15 .blg-body p, .lx-a15 .blg-body li, .lx-a15 .blg-head .lx-dek, .lx-a15 .lx-by, .lx-a15 .lx-author-role, .lx-a15 .lx-shareline p, .lx-a15 .lx-sharebtn, .lx-a15 .lx-kr-line, .lx-a15 .lx-plate figcaption, .lx-a15 .lx-cap { font-family: var(--font-body, "Helvetica Neue", Helvetica, Arial, sans-serif); }
.lx-a15 .blg-body li { font-size: inherit; line-height: inherit; }
.lx-a15 .blg-body ul, .lx-a15 .blg-body ol { font-size: 1em; }
@media (max-width: 640px) { .lx-a15 .blg-body li { font-size: var(--m-body, 1.02rem); line-height: 1.7; } }
.lx-a6.lx-a15 .blg-head .lx-dek { font-size: var(--u-lede); line-height: 1.5; color: var(--u-ink-2); }
.lx-a15 .lx-by, .lx-a15 .lx-by .nm, .lx-a15 .lx-author .lx-author-role, .lx-a15 .lx-shareline p, .lx-a15 .lx-shareline .lx-sharebtn, .lx-a15 .lx-plate figcaption, .lx-a15 .lx-cap { font-size: var(--u-meta); line-height: 1.5; }
.lx-a15 .lx-by, .lx-a15 .lx-author .lx-author-role, .lx-a15 .lx-shareline p, .lx-a15 .lx-plate figcaption, .lx-a15 .lx-cap { color: var(--u-ink-2); }
.lx-a15 .lx-kr-line { font-size: var(--u-meta); line-height: 1.55; color: var(--u-ink-2); }
.lx-a15 .blg-head .blg-back, .lx-a15 .lx-share .lx-share-k, .lx-a15 .lx-kr-meta { font-family: "IBM Plex Mono", monospace; font-size: var(--u-label); letter-spacing: var(--u-track); }
.lx-a15 .lx-share .lx-share-k, .lx-a15 .lx-kr-meta time { color: var(--u-ink-3); }
.lx-a15 .lx-author .lx-author-name, .lx-a15 .lx-kr-card strong, .lx-a15 .blg-body .lx-news2 > p { font-family: "Playfair Display", Georgia, serif; font-size: var(--u-h3); font-weight: 600; line-height: 1.2; }
/* round 15: the sign-up button's states (transitions-dev: text swap, success check, error shake) */
.lx-a15 .lx-news2 .kls-sub-btn { position: relative; transition: background-color 280ms cubic-bezier(0.22, 1, 0.36, 1), border-color 280ms cubic-bezier(0.22, 1, 0.36, 1), color 280ms cubic-bezier(0.22, 1, 0.36, 1); }
.lx-a15 .lx-news2 .kls-sub-btn[disabled] { opacity: 1; }
.lx-a15 .lx-news2 .lx-sb { display: inline-flex; align-items: center; gap: 0.55rem; transform: translateY(0); filter: blur(0); opacity: 1; transition: transform 150ms ease-in-out, filter 150ms ease-in-out, opacity 150ms ease-in-out; }
.lx-a15 .lx-news2 .lx-sb.is-exit { transform: translateY(-4px); filter: blur(2px); opacity: 0; }
.lx-a15 .lx-news2 .lx-sb.is-enter-start { transform: translateY(4px); filter: blur(2px); opacity: 0; transition: none; }
.lx-a15 .lx-news2 .lx-sb-dots { display: inline-flex; gap: 3px; }
.lx-a15 .lx-news2 .lx-sb-dots i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; animation: lx-sb-dot 900ms ease-in-out infinite; }
.lx-a15 .lx-news2 .lx-sb-dots i:nth-child(2) { animation-delay: 150ms; }
.lx-a15 .lx-news2 .lx-sb-dots i:nth-child(3) { animation-delay: 300ms; }
@keyframes lx-sb-dot { 0%, 100% { opacity: 0.25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }
.lx-a15 .lx-news2 .kls-sub-btn.is-done { background: #f4f1eb; border-color: #f4f1eb; color: #06070a; }
.lx-a15 .lx-news2 .lx-sb-check { display: inline-block; opacity: 0; animation: lx-sb-fade 550ms cubic-bezier(0.22, 1, 0.36, 1) forwards, lx-sb-blur 500ms cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.lx-a15 .lx-news2 .lx-sb-check svg { display: block; overflow: visible; }
.lx-a15 .lx-news2 .lx-sb-check path { stroke-dasharray: 16; stroke-dashoffset: 16; animation: lx-sb-draw 550ms cubic-bezier(0.22, 1, 0.36, 1) 80ms forwards; }
@keyframes lx-sb-fade { to { opacity: 1; } }
@keyframes lx-sb-blur { from { filter: blur(6px); } to { filter: blur(0); } }
@keyframes lx-sb-draw { to { stroke-dashoffset: 0; } }
.lx-a15 .lx-news2 .kls-sub-row.lx-shake { animation: lx-sb-shake 380ms cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes lx-sb-shake { 0% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } 100% { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
  .lx-a15 .lx-news2 .lx-sb, .lx-a15 .lx-news2 .kls-sub-btn { transition: none !important; }
  .lx-a15 .lx-news2 .lx-sb-dots i, .lx-a15 .lx-news2 .lx-sb-check, .lx-a15 .lx-news2 .lx-sb-check path, .lx-a15 .lx-news2 .kls-sub-row.lx-shake { animation: none !important; opacity: 1; filter: none; stroke-dashoffset: 0; }
}

/* round 16: section icons in Kyle's orange, the site's own line icons (Learn .ln-icon.is-line) set above each title */
.lx-a16 .blg-body h2 .lx-ico { display: block; width: 1.6rem; height: 1.6rem; margin: 0 0 0.7rem; color: var(--kls-accent, #fb5607); }
.lx-a16 .blg-body h2 .lx-ico svg { display: block; width: 100%; height: 100%; }
@media (max-width: 640px) { .lx-a16 .blg-body h2 .lx-ico { width: 1.45rem; height: 1.45rem; margin-bottom: 0.6rem; } }
/* round 16: the hero still keeps Kyle and the desk in frame at every width */
.lx-a16:not(.blog-post-system) .lx-film img { object-position: 54% 42%; }


/* Older Squarespace bodies use the approved reading-column media treatment.
   Scoped to migrated posts so the approved reference has identical computed styles. */
.blog-post-system .blg-body { overflow-wrap: anywhere; }
.blog-post-system .blg-body .blg-gallery { width: 100%; margin-inline: 0; }
.blog-post-system .blg-body .sqs-block-image { margin-block: clamp(2.4rem, 5vh, 3rem); }
.blog-post-system .blg-body iframe { max-width: 100%; }
.blog-post-system .blg-body .sqs-html-content > img { margin-block: clamp(2.4rem, 5vh, 3rem); }
.blog-post-system .blg-logo-cover { max-width: 6.5rem; margin-block: 0 2rem; }
.blog-post-system .lx-split.is-plain .blg-head { padding-top: clamp(7rem, 13vh, 9.5rem); }
.blog-post-system .blg-body h2, .blog-post-system .blg-body h3 { scroll-margin-top: 6.5rem; }
.blog-post-system .lx-kr-card:focus-visible, .blog-post-system .blg-rail-item:focus-visible,
.blog-post-system .lx-author a:focus-visible { outline: 1px solid var(--kls-accent); outline-offset: 4px; }
.blog-post-system > .lx-news2 { max-width: 40rem; margin-inline: auto; padding-block: clamp(2rem, 5vh, 2.6rem); border-block: 1px solid rgb(244 241 235 / 0.1); }
.blog-post-system > .blg-foot { max-width: 40rem; }
/* the cap's float stays inside a paragraph of any length */
.blog-post-system .blg-body p.lx-dc { display: flow-root; }
/* an old video embed that never loads: its hidden poster holds no empty space in the article */
.blog-post-system .blg-body .sqs-video-overlay { display: none; }
/* a photo that went up to the hero, with no old cover to take its place */
.blog-post-system .blg-body [data-blog-hero-source] { display: none; }
/* blog-post.js never arrived: the photos show without their reveal */
html.kls-blog-noscript .blg-gallery .blg-cell { opacity: 1; transform: none; }