/* styles.css — v37 with mobile sticky header (sticky height: 52px) */
:root{
  --bg:#FBF7F4;--text:#121212;--frame-color:#BFA089;--hover-title-color:#0F4955;--accent:#7B4B3B;
  --muted:rgba(18,18,18,0.65);--border:rgba(18,18,18,0.12);--container-max:1300px;--gap:0.9rem;
  --base-font-size:18px;--lead-line-height:1.62;--heading-line-height:1.05;
  --content-column:1120px;--content-max-width:1080px;--excerpt-line-height:1.45;
  --card-fixed-height:22.5rem;--masthead-pad-y:1.2rem;--masthead-pad-x:0.8rem;--hamburger-slot:64px;
  --radius-img:0;--radius-card:0;--frame-line:2px;--frame-length:28px;--frame-offset:8px;
  --frame-opacity:0.98;--frame-transition:220ms;--lead-title-color-default:#121212;
  --rule-color:rgba(18,18,18,0.22);--rule-gap:3px;
  --excerpt-lines-mobile:3;--excerpt-lines-tablet:3;--excerpt-lines-desktop:4;
  --thumb-aspect-w:17;--thumb-aspect-h:10;
  --warm-overlay-color:rgba(123,75,59,0.18);--warm-overlay-lead-color:rgba(123,75,59,0.22);
  --warm-overlay-blend:color;--hover-image-filter:sepia(0.12) saturate(1.05) hue-rotate(-3deg) contrast(0.98);
  --grid-title-start:#333;--grid-title-end:#4d4d4d;
  --lead-title-color:var(--lead-title-color-default);--title-revert-delay:260ms;--lead-edge-offset:0px;
  --lead-below-title-color:#121212;

  /* Sticky header height (mobile) */
  --sticky-header-h: 52px;

  /* Post/article layout */
  --post-max-width: 980px;
  --post-padding: 0.75rem;
  --post-body-font: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  --post-body-size: 21px;
  --post-body-line-height: 1.68;
  --post-paragraph-spacing: 1.5em;
  --post-title-size: clamp(32px, 5.5vw, 52px);
  --post-author-size: 1.05rem;
  --post-date-size: 0.88rem;
  --post-date-color: #666666;
  --dropcap-size: clamp(3.2rem, 8vw, 4.8rem);
  --dropcap-line-height: 0.8;
  --dropcap-margin-right: 0.12em;
  --dropcap-margin-bottom: -0.1em;
}

*{box-sizing:border-box}
html{font-size:var(--base-font-size);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scrollbar-gutter:stable}
body{font-family:'Lora',serif;background:var(--bg);color:var(--text);line-height:var(--lead-line-height);margin:0;padding:0;display:flex;justify-content:center}
.site-wrap{width:100%;max-width:var(--container-max)}
.container{width:100%;max-width:calc(var(--container-max) - 24px);margin:0 auto;padding:0 0.6rem}

.skip-link{position:absolute;left:0.75rem;top:0.5rem;transform:translateY(-160%);padding:0.5rem 0.75rem;background:var(--accent);color:var(--bg);text-decoration:none;z-index:2000;border-radius:6px;opacity:0;pointer-events:none;transition:transform 160ms ease,opacity 160ms ease}
.skip-link:focus,.skip-link:focus-visible{transform:translateY(0);opacity:1;pointer-events:auto;outline:3px solid rgba(123,75,59,0.18);outline-offset:3px}

/* Masthead */
.site-header{margin-bottom:3.0rem;position:relative;border-bottom:none}
.masthead{display:grid;grid-template-columns:1fr var(--hamburger-slot);align-items:center;padding:var(--masthead-pad-y) var(--masthead-pad-x);max-width:var(--content-column);margin:0 auto;position:relative}
.masthead-right{grid-column:2;display:flex;align-items:center;justify-content:flex-end}
.logo{grid-column:1;justify-self:center;text-align:center;display:inline-flex;gap:0.9rem;align-items:center;font-family:'Playfair Display',serif;font-weight:900;font-size:clamp(30px,4.8vw,72px);line-height:1;white-space:normal;text-decoration:none}
.logo .logo-main{color:var(--accent)} .logo .logo-sub{color:var(--text)}
.logo,.logo:hover,.logo:focus{text-decoration:none}
.logo:focus-visible{outline:3px solid rgba(123,75,59,0.18);outline-offset:3px;border-radius:6px}

@media(max-width:820px){.masthead{padding:0.5rem 0.6rem}}
@media(max-width:520px){.masthead{padding:0.5rem 0.6rem}.logo{justify-self:start;text-align:left;display:inline-flex;flex-direction:column;align-items:flex-start;gap:0.3rem;font-size:clamp(30px, 9.5vw, 62px);line-height:1.06}.logo .logo-sub{margin-top:0}}

/* Hamburger */
.hamburger{display:inline-flex;flex-direction:column;align-items:flex-end;gap:6px;padding:8px 12px;background:transparent;border:none;cursor:pointer;z-index:1200;-webkit-tap-highlight-color:transparent}
.hamburger span{width:28px;height:2px;background:var(--text);border-radius:0;transition:transform 280ms cubic-bezier(.2,.9,.2,1),opacity 200ms ease}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){transform:scaleX(0.05);opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:820px){.masthead-right .hamburger{padding:12px;min-width:44px;min-height:44px}}

/* Nav */
.nav{visibility:hidden;opacity:0;transform:translateY(-8px);transition:transform 320ms cubic-bezier(.2,.9,.2,1),opacity 240ms ease,visibility 0s linear 240ms;pointer-events:none;position:absolute;top:100%;left:0;right:0;z-index:1400;background:var(--bg);box-shadow:0 8px 24px rgba(0,0,0,0.08);border-radius:0 0 8px 8px;padding:0.4rem 0;margin-top:8px}
.nav.open{visibility:visible;opacity:1;transform:translateY(0);transition-delay:0s;pointer-events:auto}
.nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.nav a{display:block;padding:0.95rem 1.25rem;text-align:center;text-decoration:none;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--text)}
.masthead .nav.open{z-index:99999}
@media(min-width:821px){.masthead>.nav{left:auto;right:16px;width:320px;max-width:min(360px,calc(100vw - 24px));border-radius:8px;padding:8px 0}.masthead>.nav ul{gap:8px;align-items:center;padding:6px 0}.masthead>.nav a{padding:10px 26px}}
body.nav-open{overflow:hidden}

/* Deco */
.deco-rule{max-width:var(--content-column);margin:1.05rem auto;height:8px;position:relative}
.deco-rule::before,.deco-rule::after{content:"";position:absolute;left:0.6rem;right:0.6rem;height:1px;background:var(--rule-color)}
.deco-rule::before{top:2px} .deco-rule::after{top:calc(2px + var(--rule-gap))}

/* Grid / Band */
.band{max-width:var(--content-column);margin:0 auto}
.post-grid{display:grid;grid-template-columns:1fr;gap:1.35rem;padding-left:calc(var(--frame-offset) - 2px);padding-right:calc(var(--frame-offset) - 2px)}
@media(min-width:760px){.post-grid--two{grid-template-columns:repeat(2,1fr)}.post-grid--three{grid-template-columns:repeat(3,1fr)}}

/* Card layout */
.post-grid>.post-card{align-self:stretch;display:block}
.post-card{padding:0;position:relative;overflow:visible;z-index:0;display:flex;flex-direction:column;min-height:0}
.post-card a.card-link{display:block;color:inherit;text-decoration:none;cursor:pointer}
.post-card .card-wrap{position:relative;z-index:3;display:flex;flex-direction:column;background-color:rgba(251,247,244,0.78);transition:border-color 160ms ease,box-shadow 140ms ease;overflow:visible;border-radius:0;padding:0 1rem;height:100%;box-sizing:border-box}
.post-card .card-inner{padding:0.65rem 0 0.9rem 0;display:flex;flex-direction:column;gap:0.55rem;flex:1 1 auto;min-height:0}

/* L-frame pseudo-elements */
.post-card .card-wrap::before,.post-card .card-wrap::after,.post-card::before,.post-card::after{content:"";position:absolute;pointer-events:none;opacity:0;transition:opacity var(--frame-transition) ease,transform var(--frame-transition) ease,background-size var(--frame-transition) ease;background-repeat:no-repeat}
.post-card .card-wrap::before{left:calc(-1*var(--frame-offset));top:calc(-1*var(--frame-offset));width:calc(var(--frame-length)+var(--frame-offset));height:calc(var(--frame-length)+var(--frame-offset));z-index:6;background-image:linear-gradient(90deg,var(--frame-color) 0 100%),linear-gradient(180deg,var(--frame-color) 0 100%);background-position:left top,left top;background-size:0 var(--frame-line),var(--frame-line) 0;transform-origin:left top}
.post-card .card-wrap::after{right:calc(-1*var(--frame-offset));top:calc(-1*var(--frame-offset));width:calc(var(--frame-length)+var(--frame-offset));height:calc(var(--frame-length)+var(--frame-offset));z-index:6;background-image:linear-gradient(90deg,var(--frame-color) 0 100%),linear-gradient(180deg,var(--frame-color) 0 100%);background-position:right top,right top;background-size:0 var(--frame-line),var(--frame-line) 0;transform-origin:right top}
.post-card::before{left:calc(-1*var(--frame-offset));bottom:calc(-1*var(--frame-offset));width:calc(var(--frame-length)+var(--frame-offset));height:calc(var(--frame-length)+var(--frame-offset));z-index:5;background-image:linear-gradient(90deg,var(--frame-color) 0 100%),linear-gradient(0deg,var(--frame-color) 0 100%);background-position:left bottom,left bottom;background-size:0 var(--frame-line),var(--frame-line) 0;transform-origin:left bottom}
.post-card::after{right:calc(-1*var(--frame-offset));bottom:calc(-1*var(--frame-offset));width:calc(var(--frame-length)+var(--frame-offset));height:calc(var(--frame-length)+var(--frame-offset));z-index:5;background-image:linear-gradient(90deg,var(--frame-color) 0 100%),linear-gradient(0deg,var(--frame-color) 0 100%);background-position:right bottom,right bottom;background-size:0 var(--frame-line),var(--frame-line) 0;transform-origin:right bottom}
.post-card:hover .card-wrap::before,.post-card:focus-within .card-wrap::before,.post-card.active-frame .card-wrap::before,.post-card:hover .card-wrap::after,.post-card:focus-within .card-wrap::after,.post-card.active-frame .card-wrap::after,.post-card:hover::before,.post-card:focus-within::before,.post-card.active-frame::before,.post-card:hover::after,.post-card:focus-within::after,.post-card.active-frame::after{opacity:1;background-size:calc(var(--frame-length)) var(--frame-line),var(--frame-line) calc(var(--frame-length));transform:scale(1.02)}

/* Images */
.post-card img{width:100%;height:auto;aspect-ratio:17/10;object-fit:cover;object-position:center;border-radius:0;display:block;max-width:100%}
.lead-media{position:relative;border-radius:0;overflow:hidden;aspect-ratio:3/2;max-height:520px}
.lead-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* Meta, title, deck, author */
/* Consolidated/meta-separator related rules:
   - Keep .card-meta as inline-flex
   - Ensure children align centrally
   - Disable the old kicker pseudo
   - Provide .meta-sep styling for the injected separator element
*/
.card-meta{display:inline-flex;align-items:center;gap:0.5rem;margin:.1rem 0 .2rem}
.card-meta>*{display:inline-flex;align-items:center;align-self:center}
.card-meta .card-kicker,.card-meta .card-date{display:inline-flex;align-items:center}
.card-kicker{font-weight:700;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(18,18,18,0.72)}
.card-date{font-size:.82rem;color:rgba(18,18,18,0.55)}

/* Disable original pseudo bullet (we use a real element .meta-sep between kicker and date) */
.card-kicker::after{content:none}

/* Styles for the real separator element inserted between kicker and date */
.meta-sep{display:inline-flex;align-items:center;justify-content:center;margin:0 0.6rem;color:var(--muted);font-size:0.95em;line-height:1}

/* card-meta without date fallback remains unchanged */
.card-meta:not(:has(.card-date)) .card-kicker::after{content:none}

/* Title and card visuals */
.card-title{font-family:'Playfair Display',serif;font-weight:900;font-size:clamp(22px,3.2vw,28px);line-height:1.04;margin:0 0 0.25rem;letter-spacing:0.02em;background-image:linear-gradient(90deg,var(--grid-title-start),var(--grid-title-end));background-clip:text;-webkit-background-clip:text;color:rgba(18,18,18,1);-webkit-text-fill-color:initial;background-size:200% 100%;background-position:0% 0%;transition:background-position 260ms ease,color 180ms ease var(--title-revert-delay)}
.post-card:not(.post-card--lead):hover .card-title,.post-card:not(.post-card--lead):focus-within .card-title,.post-card:not(.post-card--lead).is-touch-hover .card-title{color:transparent;-webkit-text-fill-color:transparent;background-position:100% 0%;transition-delay:0s}

/* Lead below-image title — desktop: uses custom property */
.post-card--lead .card-title--lead.lead-below-title{background-image:none;-webkit-background-clip:unset;background-clip:unset;-webkit-text-fill-color:initial;color:var(--lead-below-title-color);transition:none}
.post-card--lead:hover .card-title--lead.lead-below-title,.post-card--lead:focus-within .card-title--lead.lead-below-title,.post-card--lead.is-touch-hover .card-title--lead.lead-below-title{color:var(--lead-below-title-color);-webkit-text-fill-color:initial;transition:none}

/* Excerpt */
.card-deck,.excerpt{font-size:0.98rem;line-height:var(--excerpt-line-height);color:rgba(18,18,18,0.88)}
.excerpt{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:var(--excerpt-lines-mobile)}
@media(min-width:520px){.excerpt{-webkit-line-clamp:var(--excerpt-lines-tablet)}}
@media(min-width:821px){.excerpt{-webkit-line-clamp:var(--excerpt-lines-desktop)}}
.excerpt.fallback-max{display:block;-webkit-box-orient:initial;-webkit-line-clamp:unset;max-height:calc(var(--excerpt-lines-mobile)*1em*var(--excerpt-line-height));overflow:hidden}
@media(min-width:520px){.excerpt.fallback-max{max-height:calc(var(--excerpt-lines-tablet)*1em*var(--excerpt-line-height))}}
@media(min-width:821px){.excerpt.fallback-max{max-height:calc(var(--excerpt-lines-desktop)*1em*var(--excerpt-line-height))}}
.excerpt-wrap{position:relative}
.excerpt-fade{position:absolute;left:0;right:0;bottom:0;height:2.4rem;background:linear-gradient(180deg,rgba(255,255,255,0) 0%,var(--bg) 70%);pointer-events:none}
.excerpt-more{display:inline-block;margin-top:0.5rem;font-weight:700;color:var(--accent);text-decoration:none}

/* Byline */
.card-author,.lead-author{font-weight:700;letter-spacing:0.01em;color:rgba(123,75,59,0.92);margin-top:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block}
.card-author::before,.lead-author::before{content:"by ";color:rgba(18,18,18,0.55);font-weight:700}
.card-author--multiline,.lead-author--multiline{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-overflow:ellipsis}
@media(max-width:520px){.card-author,.lead-author{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}}

/* Lead card base */
.post-card--lead .card-wrap{padding:0;min-height:0}
.post-card--lead .card-inner{padding:0.9rem 1rem 1.1rem 1rem;display:flex;flex-direction:column;gap:0.55rem}
.post-card--lead .lead-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(251,247,244,0.00) 0%,rgba(251,247,244,0.10) 40%,rgba(251,247,244,0.22) 62%,rgba(251,247,244,0.32) 100%);z-index:10}

/* Lead title visibility */
.lead-overlay-title{display:none}
.lead-below-title{display:block}
@media(min-width:769px){.lead-overlay-title{display:block}.lead-below-title{display:none}}

/* ===== MOBILE ≤768px: lead = grid-card parity ===== */
@media(max-width:768px){
  article.post-card.post-card--lead{padding-left:calc(var(--frame-offset) - 2px);padding-right:calc(var(--frame-offset) - 2px)}
  .post-card--lead .card-wrap{padding:0}
  .post-card--lead .card-inner{padding-left:0;padding-right:0}
  .post-card--lead .lead-media{aspect-ratio:17/10;max-height:none;overflow:hidden;position:relative}
  .post-card--lead .lead-media img{position:static;width:100%;height:auto;display:block;aspect-ratio:17/10;object-fit:cover;object-position:center}
  .post-card--lead .card-title--lead.lead-below-title{--lead-below-title-color:rgba(18,18,18,1);color:rgba(18,18,18,1);-webkit-text-fill-color:initial;background-image:none;-webkit-background-clip:unset;background-clip:unset;font-family:'Playfair Display',serif;font-weight:900;font-size:clamp(22px,3.2vw,28px);line-height:1.04;letter-spacing:0.02em;margin:0 0 0.25rem;text-align:left;padding:0;margin-left:0;margin-right:0}
  .post-card--lead .card-meta,.post-card--lead .card-deck,.post-card--lead .excerpt,.post-card--lead .lead-author{padding-left:0;margin-left:0}
}

/* Small / extra-mobile layout adjustments */
@media(max-width:520px){
  .post-card .card-wrap{padding-left:0;padding-right:0}
  .post-card--lead .card-wrap{padding-left:0;padding-right:0}
  .post-grid{padding-left:0;padding-right:0}
  article.post-card.post-card--lead{padding-left:0;padding-right:0}
  .post-card img{width:100%;height:auto;aspect-ratio:17/10;object-fit:cover;object-position:center;display:block}
}

/* Sticky header (mobile) */
@media (max-width: 520px) {
  .site-header {
    position: sticky;
    top: 0;
    z-index: 9000;
    background: var(--bg);
    border-bottom: none;
    margin-bottom: 0.6rem;
    padding: 0;
    transition: box-shadow 220ms ease;
  }

  .site-header.scrolled {
    box-shadow: 0 1px 6px rgba(0,0,0,0.09);
  }

  .site-header .masthead {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0;
    padding: 0.5rem 0.6rem;
    min-height: var(--sticky-header-h);
    max-width: none;
    align-items: center;
  }

  .site-header .masthead .logo {
    grid-column: 1;
    justify-self: start;
    text-align: left;
    white-space: normal;
    overflow: hidden;
    min-width: 0;
    max-width: 100%;
    font-size: clamp(22px, 7vw, 38px);
    line-height: 1.08;
    padding: 2px 0 0 0;
    margin: 0;
    flex: unset;
  }

  .site-header .masthead .masthead-right {
    grid-column: 2;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .site-header .masthead .masthead-right .hamburger {
    padding: 10px;
    min-width: 44px;
    min-height: 44px;
    flex-shrink: 0;
    margin-right: -4px;
  }

  .site-header .masthead > .nav,
  .site-header .masthead > .nav.open {
    position: fixed;
    top: var(--sticky-header-h);
    left: 0;
    right: 0;
    width: 100%;
    z-index: 99999;
    border-radius: 0 0 8px 8px;
    max-height: calc(100vh - var(--sticky-header-h));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  main#main, #main {
    scroll-margin-top: var(--sticky-header-h);
  }
}

/* Show-more */
.post-card.is-hidden{display:none}
.show-more{text-align:center;margin:1.0rem 0 0.5rem}
#showMore{padding:.55rem 1rem;border:1px solid var(--accent);color:var(--accent);background:transparent;border-radius:6px;font-weight:700;cursor:pointer}
.site-footer{text-align:center;padding:var(--gap) 0;border-top:1px solid var(--border);color:var(--muted);font-size:0.9rem}

/* B&W */
body.bw img,body.bw .lead-image,body.bw figure.lead-figure img,body.bw .lead-media img,body.bw .post-card img,body.bw .card-media img,body.bw .post-content img,body.bw .post img{-webkit-filter:grayscale(100%) contrast(0.98);filter:grayscale(100%) contrast(0.98)}

a,.card-link,button,.hamburger,.btn{-webkit-tap-highlight-color:transparent;tap-highlight-color:transparent}
@media(prefers-reduced-motion:reduce){*{transition:none}}

a{color:var(--frame-color);text-decoration:none} a:hover,a:focus{text-decoration:underline}

/* Lead alignment fixes */
article.post-card.post-card--lead a.card-link>.card-wrap,.post-card--lead a.card-link>.card-wrap{max-width:none;width:100%;margin-left:0;margin-right:0;padding-left:0;padding-right:0;background-color:transparent;box-sizing:border-box}
article.post-card.post-card--lead a.card-link>.card-wrap .lead-media,.post-card--lead a.card-link>.card-wrap .lead-media{width:100%;max-width:none;max-height:360px;overflow:hidden}
article.post-card.post-card--lead a.card-link>.card-wrap .lead-media img,.post-card--lead a.card-link>.card-wrap .lead-media img{position:static;width:100%;height:auto;display:block}

@media(max-width:768px){
  .post-card--lead a.card-link>.card-wrap{max-width:100%;margin-left:0;margin-right:0;padding-left:0;padding-right:0;background-color:rgba(251,247,244,0.78)}
  .post-card--lead a.card-link>.card-wrap .lead-media{max-height:none}
}

/* Square off */
.post-card img,.post-card .card-media,.post-card .card-media img,.post-card .card-wrap,.post-card--lead .lead-media,.post-card--lead .lead-media img,.post-card--lead .card-wrap{border-radius:0}

/* Masthead tuning */
@media(min-width:821px){.masthead{padding-top:calc(var(--masthead-pad-y) + 16px);padding-bottom:var(--masthead-pad-y)}.site-header{margin-bottom:3.0rem}.masthead>.nav,.masthead>.nav.open{left:auto;right:16px;width:320px;max-width:min(360px,calc(100vw - 24px));z-index:99999}}
@media(min-width:521px) and (max-width:820px){.masthead{padding-top:calc(var(--masthead-pad-y) + 12px);padding-bottom:var(--masthead-pad-y)}.site-header{margin-bottom:2.6rem}.masthead>.nav,.masthead>.nav.open{left:auto;right:12px;width:300px;z-index:99999}}
@media(max-width:520px){.masthead{padding-top:calc(var(--masthead-pad-y) + 4px);padding-bottom:calc(var(--masthead-pad-y) - 4px)}.site-header{margin-bottom:1.6rem}.masthead>.nav,.masthead>.nav.open{left:0;right:0;width:100%;z-index:99999}}

/* Desktop lead constrain */
@media(min-width:821px){
  article.post-card.post-card--lead a.card-link>.card-wrap,.post-card--lead a.card-link>.card-wrap{max-width:var(--content-column);width:auto;margin-left:auto;margin-right:auto;padding-left:0;padding-right:0;box-sizing:border-box}
  article.post-card.post-card--lead a.card-link>.card-wrap .lead-media,.post-card--lead a.card-link>.card-wrap .lead-media{max-width:var(--content-column);margin-left:auto;margin-right:auto;width:100%;overflow:hidden}
  article.post-card.post-card--lead a.card-link>.card-wrap .lead-media img,.post-card--lead a.card-link>.card-wrap .lead-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
}

/* Warm-tint hover */
body.no-frames .post-card .card-wrap::before,body.no-frames .post-card .card-wrap::after,body.no-frames .post-card::before,body.no-frames .post-card::after{opacity:0;background-size:0 0;transform:none;pointer-events:none;transition:none}
body.no-frames .post-card .card-media{position:relative;overflow:visible}
body.no-frames .post-card .card-media img{position:relative;z-index:1;display:block}
body.no-frames .post-card .card-media::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:var(--warm-overlay-color);mix-blend-mode:var(--warm-overlay-blend);opacity:0;transition:opacity 260ms ease,background 260ms ease;will-change:opacity,background;z-index:2}
body.no-frames .post-card--lead .card-media::after{background:var(--warm-overlay-lead-color)}
body.no-frames .post-card:hover .card-media::after,body.no-frames .post-card:focus-within .card-media::after,.post-card.is-touch-hover .card-media::after{opacity:1}
body.no-frames .post-card:hover img,body.no-frames .post-card:focus-within img{box-shadow:0 8px 22px rgba(0,0,0,0.05);transition:box-shadow 220ms ease,filter 220ms ease}
body.no-frames .post-card--lead:hover img,body.no-frames .post-card--lead:focus-within img{box-shadow:0 14px 36px rgba(0,0,0,0.06)}
body.no-frames:not(.bw) .post-card:hover img,body.no-frames:not(.bw) .post-card:focus-within img{filter:var(--hover-image-filter)}
body.no-frames:not(.bw) .post-card.is-touch-hover img{filter:var(--hover-image-filter)}
body.no-frames:not(.bw) .post-card--lead.is-touch-hover img,body.no-frames:not(.bw) .post-card--lead:hover img,body.no-frames:not(.bw) .post-card--lead:focus-within img{filter:sepia(0.18) saturate(1.12) hue-rotate(-5deg) contrast(0.99)}
body.no-frames .post-card:hover img,body.no-frames .post-card:focus-within img,body.no-frames .post-card--lead:hover img,body.no-frames .post-card--lead:focus-within img,.post-card.is-touch-hover img,.post-card--lead.is-touch-hover img{transform:none;-webkit-transform:none}
.post-card:not(.post-card--lead).is-touch-hover .card-title,.post-card:not(.post-card--lead).is-touch-hover .card-title--lead{color:transparent;-webkit-text-fill-color:transparent;background-position:100% 0%;transition-delay:0s}
@media(prefers-reduced-motion:reduce){body.no-frames .post-card .card-media::after{transition:none}body.no-frames .post-card:hover img,body.no-frames .post-card:focus-within img,.post-card.is-touch-hover img{transition:none;box-shadow:none;filter:none}}

/* Desktop lead alignment (>768px) */
@media(min-width:769px){
  article.post-card.post-card--lead a.card-link>.card-wrap,.post-card--lead a.card-link>.card-wrap{padding-left:calc(var(--frame-offset) - 2px + 1rem + var(--lead-edge-offset));padding-right:calc(var(--frame-offset) - 2px + 1rem + var(--lead-edge-offset));box-sizing:border-box}
  article.post-card.post-card--lead a.card-link>.card-wrap .lead-media,.post-card--lead a.card-link>.card-wrap .lead-media{margin:0;width:100%;overflow:hidden}
  article.post-card.post-card--lead a.card-link>.card-wrap .lead-media img,.post-card--lead a.card-link>.card-wrap .lead-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .post-card--lead .card-inner{padding-left:calc(var(--frame-offset) - 2px + 1rem + var(--lead-edge-offset));padding-right:0;box-sizing:border-box}
  .post-card--lead .card-kicker,.post-card--lead .card-deck,.post-card--lead .excerpt,.post-card--lead .card-author,.post-card--lead .lead-author{padding-left:0;margin-left:calc(-1*(var(--frame-offset) - 2px + 1rem + var(--lead-edge-offset)));box-sizing:border-box;text-align:left;width:auto;max-width:none}
  .post-card--lead .card-deck>.excerpt-full,.post-card--lead .card-deck>.excerpt-short{padding-left:0;padding-right:0}
  .post-card--lead .card-meta{display:inline-flex;justify-content:flex-start;align-items:center;gap:0.6rem;width:auto;box-sizing:border-box;padding-left:0}
  article.post-card.post-card--lead a.card-link>.card-wrap .card-inner .card-kicker,article.post-card.post-card--lead a.card-link>.card-wrap .card-inner .card-deck,article.post-card.post-card--lead a.card-link>.card-wrap .card-inner .excerpt,article.post-card.post-card--lead a.card-link>.card-wrap .card-inner .card-author,article.post-card.post-card--lead a.card-link>.card-wrap .card-inner .lead-author{padding-left:0;margin-left:calc(-1*(var(--frame-offset) - 2px + 1rem + var(--lead-edge-offset)));box-sizing:border-box}
  article.post-card.post-card--lead a.card-link>.card-wrap .card-inner .card-meta,.post-card--lead .card-meta{display:inline-flex;justify-content:flex-start;align-items:center;gap:0.6rem;width:auto;box-sizing:border-box;padding-left:0}
  .post-card--lead .card-kicker{margin:0;padding:0;order:0;white-space:nowrap}
  .post-card--lead .card-date{margin:0;padding:0;order:1;white-space:normal}
}

/* Excerpt split */
.card-deck>.excerpt-full{display:block;white-space:normal;overflow-wrap:break-word}
.card-deck>.excerpt-short{display:none;white-space:normal;overflow-wrap:break-word}
@media(max-width:520px){.card-deck>.excerpt-full{display:none}.card-deck>.excerpt-short{display:block}}

/* Mobile parity */
@media(max-width:520px){
  body.lead-equal .post-card--lead a.card-link>.card-wrap,body.lead-equal .post-card--lead .card-wrap{width:100%;max-width:none;margin-left:0;margin-right:0;padding-left:0;padding-right:0;box-sizing:border-box}
  body.lead-equal .post-card--lead .lead-media{aspect-ratio:17/10;max-height:none;overflow:hidden}
  body.lead-equal .post-card--lead .lead-media img,body.lead-equal .post-card img{position:static;width:100%;height:auto;display:block;object-fit:cover}
  body.lead-equal .card-deck>.excerpt-full{display:none}body.lead-equal .card-deck>.excerpt-short{display:block}
  body.lead-equal .card-deck>.excerpt-full,body.lead-equal .card-deck>.excerpt-short{white-space:normal;overflow-wrap:break-word}
}

/* ===== Per-post / article layout ===== */
.post {
  max-width: var(--post-max-width);
  margin: 2.25rem auto 4rem;
  padding: 0 var(--post-padding);
  font-family: var(--post-body-font);
  font-size: var(--post-body-size);
  line-height: var(--post-body-line-height);
  color: #111;
}

.post-header {
  margin-bottom: 0.6rem;
  border-bottom: none;
  padding-bottom: 0;
}

/* Post title — inherits body font */
.post-header h1 {
  font-family: var(--post-body-font);
  font-weight: 700;
  font-size: var(--post-title-size);
  line-height: 1.08;
  margin: 0 0 0.4rem;
  color: #111;
  letter-spacing: -0.01em;
}

/* Post metadata container */
.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0;
  margin: 0 0 1.2rem;
  font-family: var(--post-body-font);
  line-height: 1.4;
}

/* Post author — larger, more prominent */
.post-author {
  font-family: var(--post-body-font);
  font-size: var(--post-author-size);
  font-weight: 600;
  color: #111;
  margin: 0;
  padding: 0;
}

/* Remove the automatic "by" prefix for post author */
.post-author::before {
  content: none;
}

/* Separator between author and date */
.post-meta-separator {
  display: inline-block;
  margin: 0 0.5em;
  color: var(--post-date-color);
  font-size: var(--post-date-size);
}

/* Post date — smaller, dark gray */
.post-date {
  font-family: var(--post-body-font);
  font-size: var(--post-date-size);
  font-weight: 400;
  color: var(--post-date-color);
  margin: 0;
  padding: 0;
}

/* Post kicker if present */
.post-kicker {
  font-family: var(--post-body-font);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.3rem;
  display: block;
}

/* Post body paragraphs */
.post-content p,
.post p {
  margin: 0 0 var(--post-paragraph-spacing);
  font-family: var(--post-body-font);
  font-size: var(--post-body-size);
  line-height: var(--post-body-line-height);
}

/* Drop cap for first paragraph */
.post-content > p:first-of-type::first-letter,
.post > p:first-of-type::first-letter,
.post-content > .dropcap::first-letter,
.post > .dropcap::first-letter,
p.dropcap::first-letter {
  float: left;
  font-family: var(--post-body-font);
  font-size: var(--dropcap-size);
  font-weight: 700;
  line-height: var(--dropcap-line-height);
  margin-right: var(--dropcap-margin-right);
  margin-bottom: var(--dropcap-margin-bottom);
  margin-top: 0.05em;
  padding: 0;
  color: var(--accent);
  text-transform: uppercase;
}

/* Fallback: if first paragraph starts with inline element, use .dropcap class */
/* The .dropcap class can be applied to any paragraph to force drop cap */
/* Note: ::first-letter only works on block elements with text content starting directly */

/* Prevent drop cap on paragraphs that shouldn't have it */
.post-content > p:not(:first-of-type)::first-letter,
.post > p:not(:first-of-type):not(.dropcap)::first-letter {
  float: none;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  margin: 0;
  padding: 0;
  color: inherit;
  text-transform: none;
}

/* Drop cap adjustments for mobile */
@media (max-width: 520px) {
  .post-content > p:first-of-type::first-letter,
  .post > p:first-of-type::first-letter,
  .post-content > .dropcap::first-letter,
  .post > .dropcap::first-letter,
  p.dropcap::first-letter {
    font-size: clamp(2.8rem, 12vw, 3.6rem);
    margin-right: 0.1em;
    margin-bottom: -0.05em;
  }
}

/* Individual post images: 17:10 */
.lead-figure {
  margin: 0 0 1.5rem;
}

.lead-figure img,
.lead-image,
.post-content img.lead-image {
  width: 100%;
  height: auto;
  aspect-ratio: 17/10;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

/* Post content styling */
.post-content {
  font-family: var(--post-body-font);
  font-size: var(--post-body-size);
  line-height: var(--post-body-line-height);
}

.post-content h2,
.post-content h3,
.post-content h4 {
  font-family: var(--post-body-font);
  font-weight: 700;
  margin: 2rem 0 0.8rem;
  line-height: 1.2;
}

.post-content h2 {
  font-size: 1.5em;
}

.post-content h3 {
  font-size: 1.25em;
}

.post-content h4 {
  font-size: 1.1em;
}

.post-content blockquote {
  margin: 1.5rem 0;
  padding: 0.5rem 0 0.5rem 1.5rem;
  border-left: 3px solid var(--accent);
  font-style: italic;
  color: rgba(17, 17, 17, 0.85);
}

.post-content ul,
.post-content ol {
  margin: 0 0 var(--post-paragraph-spacing);
  padding-left: 1.5em;
}

.post-content li {
  margin-bottom: 0.4em;
}

/* Responsive post layout */
@media (max-width: 768px) {
  .post {
    padding: 0 1rem;
  }

  .post-header h1 {
    font-size: clamp(28px, 6vw, 42px);
  }
}

@media (max-width: 520px) {
  .post {
    padding: 0 0.75rem;
    margin: 1.5rem auto 3rem;
  }

  .post-header h1 {
    font-size: clamp(26px, 7vw, 36px);
    margin-bottom: 0.35rem;
  }

  .post-meta {
    margin-bottom: 1rem;
  }

  .post-author {
    font-size: 1rem;
  }

  .post-date {
    font-size: 0.82rem;
  }

  .post-content p,
  .post p {
    font-size: 19px;
  }
}

/* v37 hotfix: mobile lead title color + width parity */
@media(max-width:768px){
  .post-card--lead .card-title.card-title--lead.lead-below-title {
    color: rgba(18,18,18,1);
    -webkit-text-fill-color: initial;
    background-image: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    font-size: clamp(22px, 3.2vw, 28px);
    line-height: 1.04;
    letter-spacing: 0.02em;
    text-align: left;
    padding: 0;
    margin-left: 0;
  }

  article.post-card.post-card--lead {
    max-width: calc(100% - 2 * (var(--frame-offset) - 2px));
    margin-left: auto;
    margin-right: auto;
  }

  article.post-card.post-card--lead a.card-link > .card-wrap .lead-media {
    aspect-ratio: 17 / 10;
    max-height: none;
  }

  article.post-card.post-card--lead a.card-link > .card-wrap .lead-media img {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 17 / 10;
    object-fit: cover;
  }
}

@media(max-width:520px){
  article.post-card.post-card--lead {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

/* Post header — lighter, slightly smaller date (append to end of styles.css) */
.post .post-header .pubdate,
.post .post-header .pubdate time,
.post .post-header .post-date,
.post .post-header .card-date {
  color: var(--post-date-color);
  font-size: calc(var(--post-date-size) - 0.06rem); /* slight reduction vs author */
  font-weight: 400;
  line-height: 1.18;
}

/* Post header — lighter, slightly smaller date (replace any previous date rule) */
.post .post-header .pubdate,
.post .post-header .pubdate time,
.post .post-header .post-date,
.post .post-header .card-date {
  color: var(--post-date-color);
  font-size: calc(var(--post-date-size) - 0.06rem);
  font-weight: 400;
  line-height: 1.18;
}

/* Scoped: bring the page intro lead closer to the H1 (visual only), smaller and light gray,
   keep the intro block spaced from the grid/content, and align intro edges with the grid images. */

/* Wrapper spacing between intro and grid / constrain & center to content column */
.page-essays .page-intro,
.page-notes  .page-intro,
.page-about  .page-intro,
.page-submit .page-intro {
  padding-bottom: 1.2rem; /* space between intro and grid/content */
  max-width: var(--content-column); /* constrain to same content column */
  margin-left: auto;
  margin-right: auto;
}

/* Align page intro edges with grid image edge on desktop (include card inner padding + lead-edge) */
@media (min-width: 760px) {
  .page-essays .page-intro,
  .page-notes  .page-intro,
  .page-about  .page-intro,
  .page-submit .page-intro {
    padding-left: calc(var(--frame-offset) - 2px + 1rem + var(--lead-edge-offset));
    padding-right: calc(var(--frame-offset) - 2px);
  }
}

/* Nudge Submit intro left by 5px to match About/Essays/Notes alignment (desktop) */
@media (min-width: 760px) {
  .page-submit .page-intro {
    padding-left: calc(var(--frame-offset) - 2px + 1rem + var(--lead-edge-offset) - 5px);
  }
}

/* Tighten H1 -> description gap */
.page-essays .page-intro h1,
.page-notes  .page-intro h1,
.page-about  .page-intro h1,
.page-submit .page-intro h1 {
  margin-bottom: 0.35rem;
}

/* Description styling (visual rise) */
.page-essays .page-intro .intro-lead,
.page-notes  .page-intro .intro-lead,
.page-about  .page-intro .intro-lead,
.page-submit .page-intro .intro-lead {
  margin: 0;
  display: block;
  transform: translateY(-0.35rem); /* moderate visual lift */
  color: rgba(17,17,17,0.55);
  font-size: 0.95rem;
  line-height: 1.45;
  will-change: transform;
}

/* Mobile adjustments */
@media (max-width: 520px) {
  .page-essays .page-intro,
  .page-notes  .page-intro,
  .page-about  .page-intro,
  .page-submit .page-intro {
    padding-bottom: 1.0rem;
  }

  .page-essays .page-intro h1,
  .page-notes  .page-intro h1,
  .page-about  .page-intro h1,
  .page-submit .page-intro h1 {
    margin-bottom: 0.40rem;
  }

  .page-essays .page-intro .intro-lead,
  .page-notes  .page-intro .intro-lead,
  .page-about  .page-intro .intro-lead,
  .page-submit .page-intro .intro-lead {
    transform: translateY(-0.20rem);
    font-size: 0.98rem;
  }
}

@media (min-width:520px){
  /* About & Submit: narrower measure, centered body, ragged-right with hyphenation */
  .page-about .page-intro,
  .page-about main,
  .page-submit .page-intro,
  .page-submit main {
    max-width: 65ch;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Body paragraphs: left-aligned (ragged-right) but keep hyphenation and balanced wrapping where supported */
  .page-about .page-intro p,
  .page-about main p,
  .page-submit .page-intro p,
  .page-submit main p {
    text-align: left;
    -webkit-hyphens: auto;
    -epub-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
    text-align-last: left;
    text-wrap: balance;
    hyphenate-limit-chars: 6 3 2;
    -webkit-hyphenate-limit-chars: 6 3 2;
  }

  /* Ensure the page title aligns with the body block */
  .page-about .page-intro h1,
  .page-submit .page-intro h1 {
    text-align: left;
  }
}