/* ==========================================================================
   aswritten.ai — Landing page styles
   Loaded only from index.hbs. Color/font tokens come from default.hbs +
   aswritten-brand.css. This file is layout + landing components only.
   ========================================================================== */

:root {
    --landing-gutter: 56px;
    --landing-max:    960px;
}
/* Keep --landing-gutter in sync with the responsive .lp padding so the
   carousel/track formulas below resolve to the right value per breakpoint. */
@media (max-width: 1080px) { :root { --landing-gutter: 32px; } }
@media (max-width: 767px)  { :root { --landing-gutter: 20px; } }

/* Override Keel's GSAP page-load animations on the landing — they fight the
   editorial pacing. Smooth scroll is also off via @custom.use_smooth_scrolling. */
html { scroll-behavior: auto; }

/* Body baseline + Keel-element hiding live in aswritten-brand.css so they
   apply on every template (landing.css only loads on lp-rendered pages). */

a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rule); }
a:hover { border-bottom-color: var(--sic-ink); }

/* ===========================================================
   Architectural vertical guides
   We piggyback on Keel's existing .vertical-lines partial when
   @custom.display_vertical_lines is on. Override its spacing
   to match the comp's gutter.
   =========================================================== */
.vertical-lines {
    padding: 0 calc(var(--landing-gutter) / 2);
}
@media (max-width: 1080px) { .vertical-lines { padding: 0 24px; } }
@media (max-width: 767px)  {
    .vertical-lines { padding: 0 12px; }
    .vertical-lines .vertical-line:nth-child(1),
    .vertical-lines .vertical-line:nth-child(4) { display: none; }
}

/* ===========================================================
   Page container — used on landing, post, tag, author.
   Single source of truth so all four templates use the same gutter,
   max-width, and mobile padding.
   =========================================================== */
.lp {
    position: relative;
    z-index: 1;
    max-width: var(--landing-max);
    margin: 0 auto;
    /* Zero bottom padding — the footer is the bottom of the page; no
       scrollable empty space past it. The footer has its own margin-top
       and internal padding so the visual breathing room above the
       footer rule is preserved. */
    padding: 32px var(--landing-gutter) 0;
    background: transparent;
}
@media (max-width: 1080px) { .lp { padding: 28px 32px 0; } }
@media (max-width: 767px)  { .lp { padding: 20px 20px 0; } }

/* ===========================================================
   Dashed circle (Keel pattern) — used for hero decor + artifact markers
   The Keel theme has a circle-dashed-border SVG partial; we re-implement
   with the plus inside.
   =========================================================== */
/* .dashed-circle kept as alias for the artifact markers; .dashed-shape is
   the generic class used by all hero anchors regardless of outer path. */
.dashed-circle, .dashed-shape { width: 100%; height: 100%; display: block; overflow: visible; }
.dashed-circle .ring, .dashed-shape .ring {
    fill: none; stroke: var(--mark); stroke-width: 1.3;
    stroke-dasharray: 2.6 3; vector-effect: non-scaling-stroke;
}
.dashed-circle .plus, .dashed-shape .plus {
    stroke: var(--mark); stroke-width: 1.3; vector-effect: non-scaling-stroke;
}

/* ===========================================================
   Landing header (wordmark + nav)
   Replaces Keel's navbar component on the landing surface.
   =========================================================== */
.lp-header {
    display: flex; justify-content: space-between; align-items: baseline;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--sic-ink);
}
/* LP wordmark size matches the brand default; sup positioning lives in aswritten-brand.css */
.lp-header .wordmark { font-size: 19px; }
.lp-header .nav {
    display: flex; gap: 28px;
    font-family: var(--font-code);
    font-size: 11px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--sic-stone);
}
.lp-header .nav a { border: none; }
.lp-header .nav a:hover { color: var(--sic-ink); }
@media (max-width: 767px) { .lp-header .nav { display: none; } }

/* ===========================================================
   Hero
   =========================================================== */
.lp-hero { position: relative; padding: 96px 0 88px; }
.lp-hero .eyebrow {
    font-family: var(--font-code);
    font-size: 11px; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--sic-stone);
    margin-bottom: 32px; display: flex; gap: 16px; align-items: center;
}
.lp-hero .eyebrow .sep { color: var(--mark); }
.lp-hero h1 {
    margin: 0 0 40px;
    font-family: var(--font1), Georgia, serif;
    font-weight: 400;
    font-size: clamp(32px, 4.6vw, 56px);
    line-height: 1.18;
    letter-spacing: 0;
    max-width: 32ch;
}
.lp-hero .lead {
    font-family: var(--font2), Georgia, serif;
    font-size: clamp(17px, 1.6vw, 22px);
    line-height: 1.5; color: var(--sic-ink);
    max-width: 38em; margin: 0; font-weight: 400;
}
/* Hero scenes — vertically stacked scene rotation (static phase 1).
   Each scene is a single line of serif type, weighted like an H1 stanza.
   The em-dash closing line (--cited by AI) sits below, smaller, in stone. */
.lp-hero .hero-scenes {
    margin: 0 0 24px;
}
.lp-hero .hero-scene {
    font-family: var(--font1), Georgia, serif;
    font-weight: 400;
    font-size: clamp(28px, 4vw, 48px);
    line-height: 1.22;
    letter-spacing: 0;
    margin: 0 0 18px;
    color: var(--sic-ink);
}
.lp-hero .hero-scene:last-child { margin-bottom: 0; }
.lp-hero .hero-sub {
    font-family: var(--font2), Georgia, serif;
    font-size: clamp(17px, 1.6vw, 22px);
    line-height: 1.5;
    color: var(--sic-stone);
    margin: 0;
}
@media (max-width: 767px) {
    .lp-hero .hero-scenes { margin-bottom: 18px; max-width: 100%; }
    .lp-hero .hero-scene { margin-bottom: 14px; }
}

/* Hero rotation — default-hide the static stack the moment CSS loads, so
   the scenes never paint before JS replaces them with the animated slot.
   First scene stays in the layout (visibility: hidden = reserved space,
   invisible); scenes 2+ collapse out of flow so the hero is single-scene
   tall on first paint. The animated slot will sit in scene 1's reserved
   space, then JS lifts container min-height to fit the tallest scene.

   The <noscript> block in hero.hbs reverts these rules for JS-disabled
   users so they see all three scenes stacked statically.

   prefers-reduced-motion is intentionally NOT honored — see hero-rotate.js. */
.lp-hero .hero-scenes[data-rotate] {
    /* Reserve vertical space for ~3 lines of the largest scene font from
       page load, so typing doesn't reflow as scenes change. Matches the
       .hero-scene font-size clamp + 1.22 line-height. JS may overwrite
       with a measured per-scene value; this is the floor. */
    min-height: calc(clamp(28px, 4vw, 48px) * 1.22 * 3);
}
/* Pre-JS state ONLY (scoped via :not(.is-rotating)): hide scenes so the
   stack doesn't flash before JS replaces them with the animated slot.
   First scene reserves layout (visibility:hidden); 2+ collapse out of
   flow. The .is-rotating class JS adds releases these rules so the
   existing rotation rules below take over (and the JS-created animated
   slot is visible). */
.lp-hero .hero-scenes[data-rotate]:not(.is-rotating) .hero-scene {
    visibility: hidden;
}
.lp-hero .hero-scenes[data-rotate]:not(.is-rotating) .hero-scene:not(:first-child) {
    display: none;
}
/* When JS activates rotation, the static stack becomes off-flow + sr-only
   and the animated slot takes over rendering. */
.lp-hero .hero-scenes.is-rotating .hero-scene:not(.hero-scene--active) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.lp-hero .hero-scene--active {
    position: relative;
    margin-bottom: 0;
    /* min-height keeps the line from collapsing during the empty pause
       between scenes; tied to the line-height of .hero-scene. */
    min-height: 1.22em;
}
/* Per-character reveal: each char of the current scene is pre-rendered as
   its own <span> with visibility: hidden so it occupies layout space (so
   the line-wrap is calculated from the full scene from frame one — no
   mid-word jumps when typing reaches the end of a line). Typing toggles
   .is-revealed to show characters in place. */
.lp-hero .hero-scene--active .char {
    visibility: hidden;
}
.lp-hero .hero-scene--active .char.is-revealed {
    visibility: visible;
}
/* Cursor is its own inline span that JS hops to sit right after the most
   recently revealed char. Same vertical metrics as the previous ::after
   cursor; just on a real element so its position is DOM-driven. */
.lp-hero .hero-cursor {
    display: inline-block;
    width: 2px;
    height: 0.82em;
    margin: 0 1px;
    background: var(--sic-ink);
    vertical-align: text-bottom;
    animation: hero-cursor-blink 0.85s step-end infinite;
}
@keyframes hero-cursor-blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

/* ===========================================================
   Loop closure transition — sits between Deploy and Architecture.
   Quiet beat. Italic serif, stone color, no section number, no
   anchor shape. Generous vertical air above and below.
   =========================================================== */
.lp-transition {
    margin: 32px 0 96px;
    padding: 0;
    max-width: 38em;
    border: none;
    background: none;
}
.lp-transition p {
    font-family: var(--font2), Georgia, serif;
    font-style: italic;
    font-size: clamp(18px, 1.7vw, 22px);
    line-height: 1.5;
    color: var(--sic-stone);
    margin: 0 0 16px;
}
.lp-transition p:last-child { margin-bottom: 0; }
@media (max-width: 767px) {
    .lp-transition { margin: 64px 0 64px; }
}
/* Decor anchor — the dashed shape that sits in the top-right of a hero
   bleeding into the right gutter. Each template type gets a different
   shape via partials/landing/shape-{circle,diamond,triangle,hexagon}.hbs.
   The shape stroke comes from .dashed-shape so the weight + dash pattern
   stays identical everywhere. Positioning differs per hero type because
   each shape registers to a different anchor point in the text. */
.lp-hero .decor-anchor,
.post-hero .decor-anchor {
    position: absolute;
    right: -72px;
    width: 210px; height: 210px;
    pointer-events: none;
}

/* LP-hero (landing): float below the eyebrow, alongside the H1. */
.lp-hero .decor-anchor { top: 72px; }

/* Post-hero: register the bracket's top edge with the top of the tag link
   text — the first text on a post page. The bracket's horizontal stroke
   sits at SVG y=0, so top: 0 puts it at the post-hero top edge, same
   level as the tag link. */
.post-hero .decor-anchor { top: 0; }

@media (max-width: 1080px) {
    .lp-hero { padding: 68px 0 64px; }
    .lp-hero .decor-anchor,
    .post-hero .decor-anchor { width: 160px; height: 160px; right: -12px; }
    .lp-hero .decor-anchor { top: 48px; }
    /* .post-hero stays at top: 0 — text top doesn't shift between breakpoints. */
}
@media (max-width: 767px) {
    .lp-hero { padding: 48px 0 48px; }
    .lp-hero .eyebrow { margin-bottom: 22px; flex-wrap: wrap; gap: 10px; }
    .lp-hero h1 { margin-bottom: 28px; max-width: 100%; }
    .lp-hero .decor-anchor,
    .post-hero .decor-anchor { width: 96px; height: 96px; right: -4px; }
    .lp-hero .decor-anchor { top: 38px; }
    /* No opacity override — keep stroke at the same intensity as the
       vertical guides everywhere so the shape and guides feel like one
       drawing system. */
}

/* ===========================================================
   Section
   =========================================================== */
.lp-section { position: relative; padding: 56px 0; }
@media (max-width: 767px) { .lp-section { padding: 40px 0; } }
.lp-section .sec-eye {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 32px; padding-bottom: 12px;
    border-bottom: 1px dashed var(--rule);
}
.lp-section .sec-eye h2 {
    margin: 0;
    font-family: var(--font1), Georgia, serif;
    font-weight: 400;
    font-size: clamp(22px, 2.4vw, 30px);
    line-height: 1.15; color: var(--sic-ink); letter-spacing: 0;
}
.lp-section .sec-eye .sec-num {
    font-family: var(--font-code);
    font-size: 11px; color: var(--sic-stone);
    letter-spacing: 0.16em; text-transform: uppercase;
    white-space: nowrap; padding-left: 16px;
}

/* ===========================================================
   Prose + inline cite sups (anchor links)
   =========================================================== */
.lp .prose { max-width: 38em; }
.lp .prose p {
    font-family: var(--font2), Georgia, serif;
    font-size: clamp(16px, 1.4vw, 19px);
    line-height: 1.6; margin: 0 0 22px; color: var(--sic-ink);
}
.lp .prose p:last-child { margin-bottom: 0; }
.lp .prose code {
    font-family: var(--font-code);
    font-size: 0.88em;
    background: rgba(27,27,27,0.05);
    padding: 1px 6px; border-radius: 2px;
}
.lp sup.cite {
    font-family: var(--font-code);
    font-size: 0.62em;
    vertical-align: super; line-height: 0;
    margin-left: 1px; font-weight: 500;
}
.lp sup.cite a {
    color: var(--sic-ink);
    text-decoration: none;
    border: none;
    border-bottom: 1px dotted var(--sic-gold);
    padding: 0 1px;
}
.lp sup.cite a:hover,
.lp sup.cite a:focus {
    color: var(--sic-gold);
    border-bottom-color: var(--sic-ink);
}

/* ===========================================================
   Grounding block / citations carousel — outer container only.
   The inner .carousel / .carousel-track / .fn / .fn-* styles live in
   aswritten-brand.css so the landing and post pages stay identical.
   The .lp .grounding rule below sets only the section-level rhythm
   (top margin + dashed rule) specific to the landing.
   =========================================================== */
.lp .grounding {
    margin-top: 56px; padding-top: 22px;
    border-top: 1px dashed var(--rule);
}

/* Aside paragraph inside a .prose block — quieter than the main prose,
   for setting up what's about to follow (e.g., "the demos below…"). */
.lp .prose .prose-aside {
    font-family: var(--font-code);
    font-size: 12px;
    line-height: 1.55;
    color: var(--sic-stone);
    letter-spacing: 0.02em;
    margin-top: 28px;
    padding-top: 14px;
    border-top: 1px dashed var(--rule);
}

/* ===========================================================
   ICP shapes
   =========================================================== */
.lp .shapes {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin-bottom: 32px;
}
@media (max-width: 767px) { .lp .shapes { grid-template-columns: 1fr; gap: 24px; } }
.lp .shape {
    /* Border matches the post-list-item rule above for visual rhyme —
       the shape cards function as post-link cards (click-through to a
       case-study tag-feed below). */
    border-top: 1px solid var(--rule);
    padding: 18px 0 4px;
    position: relative;
    transition: border-top-color 120ms ease;
}
.lp .shape[data-href] {
    cursor: pointer;
}
.lp .shape[data-href]:hover {
    border-top-color: var(--sic-ink);
}
.lp .shape[data-href]:hover h3 {
    color: var(--sic-terr);
}
.lp .shape h3 {
    transition: color 120ms ease;
}
.lp .shape .tag {
    font-family: var(--font-code);
    font-size: 10px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--sic-stone);
    margin-bottom: 10px;
}
.lp .shape h3 {
    font-family: var(--font1), Georgia, serif;
    font-size: clamp(20px, 1.9vw, 24px);
    font-weight: 400;
    margin: 0 0 14px;
    line-height: 1.15; letter-spacing: 0;
}
.lp .shape p {
    font-family: var(--font2), Georgia, serif;
    font-size: 16px; line-height: 1.5;
    margin: 0 0 10px;
    color: var(--sic-ink);
}
.lp .shape .note {
    font-family: var(--font-code);
    font-size: 10px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--sic-gold);
    margin-top: 16px;
    border-top: 1px dotted var(--sic-gold);
    padding-top: 10px;
}

/* ===========================================================
   Artifact gallery — populated from Ghost posts tagged #artifact
   =========================================================== */
.lp .artifacts {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 16px 32px;
    margin-top: 36px;
}
/* Single-card gracefully: render as one half-width column so the card sits
   where a left-column card would in a 2-up, rather than stretching across
   both columns and looking like it's missing a partner. */
.lp .artifacts:has(> .artifact:only-child) {
    grid-template-columns: 1fr;
    max-width: calc(50% - 16px);
}
@media (max-width: 767px) {
    .lp .artifacts { grid-template-columns: 1fr; gap: 12px; }
    .lp .artifacts:has(> .artifact:only-child) { max-width: none; }
}
.lp .artifact {
    border-top: 1px solid var(--rule);
    padding: 16px 0 6px;
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 14px;
    align-items: start;
    text-decoration: none;
    color: inherit;
    border-bottom: none;
}
.lp a.artifact { border: none; border-top: 1px solid var(--rule); }
.lp a.artifact:hover { border-top-color: var(--sic-ink); }
.lp .artifact .marker {
    position: relative;
    width: 30px; height: 30px;
    margin-top: 2px;
}
.lp .artifact .marker svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.lp .artifact .marker .num {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-code);
    font-size: 10px; color: var(--sic-ink);
    font-weight: 500;
}
.lp .artifact .body {
    font-family: var(--font2), Georgia, serif;
    padding-top: 2px;
}
.lp .artifact .ttl {
    font-size: 16px; font-weight: 500;
    line-height: 1.35; margin-bottom: 4px;
    color: var(--sic-ink);
}
.lp a.artifact:hover .ttl { color: var(--sic-terr); }
.lp .artifact .desc {
    font-size: 13px; color: var(--sic-stone);
    line-height: 1.45; font-style: italic;
}
.lp .gallery-note {
    margin-top: 32px; padding-top: 16px;
    border-top: 1px dashed var(--rule);
    font-family: var(--font-code);
    font-size: 11px; color: var(--sic-stone);
    letter-spacing: 0.12em; text-transform: uppercase;
}
.lp .gallery-note a { color: var(--sic-stone); border-bottom-color: var(--mark); }
.lp .gallery-note a:hover { color: var(--sic-ink); border-bottom-color: var(--sic-ink); }

/* ===========================================================
   Start (CTAs)
   =========================================================== */
.lp .start {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 28px;
    margin-top: 8px;
}
@media (max-width: 767px) { .lp .start { grid-template-columns: 1fr; gap: 20px; } }
.lp .cta {
    border: 1px solid var(--sic-ink);
    padding: 28px 28px 24px;
    background: var(--sic-paper);
    position: relative;
}
.lp .cta .lbl {
    font-family: var(--font-code);
    font-size: 10px; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--sic-stone);
    margin-bottom: 12px;
}
.lp .cta h3 {
    font-family: var(--font1), Georgia, serif;
    font-size: clamp(22px, 2.1vw, 28px);
    font-weight: 400; margin: 0 0 12px;
    line-height: 1.15; letter-spacing: 0;
}
.lp .cta p {
    font-family: var(--font2), Georgia, serif;
    font-size: 15px; line-height: 1.5;
    margin: 0; color: var(--sic-ink);
}
.lp .cta .link {
    display: block; margin-top: 16px;
    font-family: var(--font-code);
    font-size: 12px; color: var(--sic-ink);
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--sic-ink);
    padding-bottom: 2px; width: fit-content;
}
.lp .email-line {
    margin-top: 40px; text-align: center;
    font-family: var(--font-code);
    font-size: 14px; color: var(--sic-ink);
    letter-spacing: 0.06em;
}

/* ===========================================================
   Post page (post.hbs) — article body wrapped in .lp
   .post-page fills the full .lp content area (same width as homepage).
   Prose inside .post-content is constrained for readability, but the
   grounding carousel breaks out to viewport edges via its own CSS.
   =========================================================== */
.lp .post-page {
    /* No max-width — match the homepage container width. */
    padding: 56px 0 64px;
}
@media (max-width: 767px) { .lp .post-page { padding: 32px 0 40px; } }

/* Post content fills the .post-page container at full width — no
   per-element max-width. The grounding carousel still goes full-bleed
   via its own CSS. */

.lp .post-hero {
    position: relative;
    margin-bottom: 40px;
    padding-bottom: 28px;
    border-bottom: 1px dashed var(--rule);
}
.lp .post-tag {
    font-family: var(--font-code);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--sic-stone);
    margin-bottom: 18px;
}
.lp .post-tag a { color: inherit; border-bottom: 1px dotted var(--sic-stone); }
.lp .post-tag a:hover { color: var(--sic-ink); border-bottom-color: var(--sic-ink); }

.lp .post-title {
    margin: 0 0 18px;
    font-family: var(--font1), Georgia, serif;
    font-weight: 400;
    font-size: clamp(32px, 4.6vw, 56px);
    line-height: 1.18;
    letter-spacing: 0;
    color: var(--sic-ink);
}
.lp .post-excerpt {
    font-family: var(--font2), Georgia, serif;
    font-size: clamp(17px, 1.6vw, 21px);
    line-height: 1.5;
    color: var(--sic-ink);
    margin: 0 0 16px;
}
.lp .post-meta {
    font-family: var(--font-code);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sic-stone);
}
.lp .post-meta .dot { margin: 0 8px; }

/* ===========================================================
   Tag + Author hero variant (uses .lp-hero with .collection-hero)
   =========================================================== */
.lp .collection-hero { padding: 64px 0 56px; }
.lp .author-meta-line {
    font-family: var(--font-code);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sic-stone);
    margin-top: 12px;
}

/* Collection-hero decor anchors are wide-and-short (ruler, etc.) and align
   vertically with the first text line — the eyebrow — rather than floating
   below the H1 like the home/post anchors. */
.collection-hero .decor-anchor {
    /* Height auto-sizes from SVG aspect ratio (100x30 viewBox -> ~63px tall
       at 210 wide). top positions the rule line at the eyebrow's baseline. */
    height: auto;
    top: 50px;
}
@media (max-width: 1080px) {
    .collection-hero .decor-anchor { top: 36px; }
}
@media (max-width: 767px) {
    .collection-hero .decor-anchor { top: 48px; }
}

/* ===========================================================
   Post list (used in tag, author, archive)
   No border-top on the list — the .sec-eye's dashed border-bottom
   above acts as the visual top edge of the first post.
   No border-bottom on the last item — list ends at the page rhythm.
   =========================================================== */
.lp .post-list {
    margin-top: 8px;
}
.lp .post-list-item {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 24px;
    padding: 22px 0;
    border-bottom: 1px solid var(--rule);
    color: inherit;
    border-top: none;
    text-decoration: none;
    transition: background 100ms;
}
.lp .post-list-item:last-child {
    border-bottom: none;
}
.lp .post-list-item { transition: border-bottom-color 120ms ease; }
.lp .post-list-item:hover { border-bottom-color: var(--sic-ink); }
.lp .post-list-item:hover .post-list-title { color: var(--sic-terr); }
.lp .post-list-meta {
    font-family: var(--font-code);
    font-size: 11px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--sic-stone);
    padding-top: 4px;
}
.lp .post-list-body { min-width: 0; }
.lp .post-list-title {
    margin: 0 0 6px;
    font-family: var(--font1), Georgia, serif;
    font-weight: 400;
    font-size: clamp(20px, 2vw, 26px);
    line-height: 1.25;
    color: var(--sic-ink);
    letter-spacing: 0;
    transition: color 100ms;
}
.lp .post-list-excerpt {
    font-family: var(--font2), Georgia, serif;
    font-size: 15px;
    line-height: 1.5;
    color: var(--sic-stone);
    margin: 0;
}
@media (max-width: 767px) {
    .lp .post-list-item {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 18px 0;
    }
}

/* ===========================================================
   Footer
   =========================================================== */
.lp .lp-footer {
    margin-top: 56px;
    /* Matching padding above and below — copyright sits centered in the
       vertical white space between the border and the page bottom. */
    padding: 18px 0;
    border-top: 2px solid var(--sic-ink);
    display: flex; justify-content: space-between; align-items: baseline;
    flex-wrap: wrap; gap: 12px 24px;
    font-family: var(--font-code);
    font-size: 10px; color: var(--sic-stone);
    letter-spacing: 0.10em; text-transform: uppercase;
}
.lp .lp-footer p { margin: 0; }
.lp .lp-footer .meta { text-align: right; }
.lp .lp-footer .legal { display: flex; gap: 18px; }
.lp .lp-footer .legal a {
    color: var(--sic-stone);
    border-bottom: 1px dotted var(--rule);
}
.lp .lp-footer .legal a:hover {
    color: var(--sic-ink);
    border-bottom-color: var(--sic-ink);
}
@media (max-width: 767px) {
    .lp .lp-footer { flex-direction: column; align-items: flex-start; gap: 10px; }
    .lp .lp-footer .meta { text-align: left; }
}