:root {
  --bg: #F5F9FF;
  --fg: #0A0A0A;
  --muted: rgba(0,0,0,.65);
  --btn: #F59E0B;
  --btn-fg: #fff;
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);
  font:16px/1.6 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;}

/* Header */
.site-header{position:sticky;top:0;z-index:20;background:var(--bg)}
.site-header-inner{max-width:1080px;margin:0 auto;padding:12px 16px;display:flex;align-items:center;justify-content:space-between}
.logo-img{height:28px;width:auto;display:block}
.hamburger{background:transparent;border:0;padding:8px;display:inline-flex;flex-direction:column;gap:3px;cursor:pointer}
.hamburger span{width:22px;height:2px;background:#000;display:block}
.menu-wrap{position:relative;display:inline-block}
.menu-dd{position:absolute;right:0;top:40px;background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.08)}
.menu-dd ul{list-style:none;padding:8px;margin:0}
.menu-dd li a{display:block;padding:10px 14px;text-decoration:none;color:#111;border-radius:8px}
.menu-dd li a:hover{background:#f2f4f8}

/* Snap scroll */
.snap-container{height:calc(100vh - 56px);overflow-y:scroll;scroll-snap-type:y mandatory}
.snap-slide{height:calc(100vh - 56px);scroll-snap-align:start;display:flex;align-items:center;justify-content:center;padding:24px}
.slide-link{color:inherit;text-decoration:none;display:block;width:100%;height:100%}
.slide-content{max-width:780px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px;justify-content:center;height:100%}

/* Homepage typography */
.slide-title{font-family:'Overpass Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, "Courier New", monospace;font-weight:400;font-size:40px;letter-spacing:.02em;margin:0}
@media(max-width:768px){.slide-title{font-size:28px}}

.slide-excerpt{max-width:720px;margin:0 auto;color:var(--muted);
  font-family:'IBM Plex Serif', Georgia, serif;font-size:20px;text-align:left}
@media(max-width:768px){.slide-excerpt{font-size:16px}}

/* Homepage CTA button (match Write-to-me styles) */
.cta-btn{margin-top:4px;padding:10px 18px;background:var(--btn);color:var(--btn-fg);border:0;border-radius:12px;
  font-family:'Overpass Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, "Courier New", monospace;font-weight:400;font-size:18px;cursor:pointer}
.cta-btn:hover{background:#d97706}

/* Post page */
.post-container{max-width:640px;margin:24px auto;padding:0 16px 64px}
@media(max-width:768px){.post-container{padding-left:26px;padding-right:26px}}
.post-title{font-family:'Overpass Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, "Courier New", monospace;font-weight:400;font-size:48px;padding:30px 0;margin:0 0 8px;text-align:center}
.post-content{font-family:'IBM Plex Serif', Georgia, serif;font-size:18px;line-height:28px}
.post-content img{max-width:100%;height:auto}

/* Closing note */
.closing-note{font-family:'IBM Plex Serif', Georgia, serif;font-style:italic;font-size:20px;text-align:center;padding:30px 0;position:relative;max-width:780px;margin:0 auto;color:inherit}
.closing-note::before{content:"";width:10px;height:10px;border-radius:50%;background:#F59E0B;display:block;margin:0 auto 14px}

/* Write-to-me (manual HTML block) */
.write-to-me{background:rgba(245,158,11,.15);margin:70px auto;padding:10px 24px 30px;border-radius:8px;max-width:880px;text-align:center}
.wtm-headline{font-family:'IBM Plex Serif', Georgia, serif;font-size:18px;margin:0 0 16px}
.wtm-button{display:inline-block;background:#F59E0B;color:#fff;text-decoration:none;padding:10px 33px;border-radius:12px;font-family:'Overpass Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, "Courier New", monospace;font-weight:400;font-size:16px}
.wtm-button:hover{background:#d97706}
.wtm-footnote{font-family:'IBM Plex Serif', Georgia, serif;font-size:14px;margin:14px 0 0}
@media(max-width:768px){.wtm-button{font-size:13px;padding:8px 31px}}

/* Next Up block */
.next-up{padding:30px 0;position:relative}
.next-up::before,.next-up::after{content:"";position:absolute;left:40px;right:40px;height:2px;background:#F59E0B}
.next-up::before{top:0}.next-up::after{bottom:0}
.next-up-inner{text-align:center;max-width:860px;margin:0 auto;padding:25px 16px}
.next-up-label{font-family:'Overpass Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, "Courier New", monospace;font-weight:700;font-size:18px;color:#3F3F3F;letter-spacing:.08em;margin-bottom:8px}
.next-up-title{display:inline-block;margin:6px 0 12px;font-family:'Overpass Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, "Courier New", monospace;font-weight:400;font-size:24px;color:inherit;text-decoration:none}
.next-up-excerpt{font-family:'IBM Plex Serif', Georgia, serif;font-size:18px;line-height:26px;max-width:720px;margin:0 auto 18px}
.next-up-btn{display:inline-block;background:transparent;border:2px solid #F59E0B;color:inherit;text-decoration:none;padding:10px 18px;border-radius:12px;font-family:'Overpass Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, "Courier New", monospace;font-size:16px;font-weight:400}
.next-up-btn:hover{background:#FFF7E6}
@media(max-width:768px){.next-up::before,.next-up::after{left:16px;right:16px}.next-up-btn{font-size:13px}}

/* Subscribe section */
.subscribe-box{background:rgba(245,158,11,.30);border-radius:16px;padding:28px 20px 24px;max-width:980px;margin:40px auto}
.subscribe-inner{text-align:center}
.subscribe-title{font-family:'Overpass Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, "Courier New", monospace;font-weight:400;font-size:20px;letter-spacing:.02em;margin:6px 0 18px}
.subscribe-form{display:inline-flex;align-items:center;gap:14px}
.subscribe-input{width:min(460px,70vw);height:46px;padding:10px 14px;border-radius:10px;border:0;outline:none;background:#fff;font-family:'IBM Plex Serif', Georgia, serif;font-size:18px;color:#111}
.subscribe-button{height:46px;padding:0 33px;border-radius:12px;background:#F59E0B;border:0;color:#fff;font-family:'Overpass Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, "Courier New", monospace;font-size:16px;font-weight:400;cursor:pointer}
.subscribe-button:hover{background:#d97706}
.subscribe-note{margin:18px 0 4px;font-family:'IBM Plex Serif', Georgia, serif;font-size:16px}
.subscribe-form .success,.subscribe-form .message-success{color:#0a7c2f}.subscribe-form .error,.subscribe-form .message-error{color:#b00020}
@media(max-width:768px){.subscribe-form{display:grid;gap:10px;justify-items:center}.subscribe-input{width:100%}.subscribe-button{width:100%}}

/* Hide Portal fallback when native form renders, show otherwise */
.subscribe-form + .subscribe-portal-fallback{display:none}
.subscribe-portal-fallback{display:inline-block;background:#F59E0B;color:#fff;text-decoration:none;padding:10px 33px;border-radius:12px;font-family:'Overpass Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, "Courier New", monospace;font-size:16px;font-weight:400}
.subscribe-portal-fallback:hover{background:#d97706}

/* Koenig helpers */
.kg-width-wide{max-width:min(1200px,92vw);margin-left:auto;margin-right:auto}
.kg-width-full{width:100vw;margin-left:50%;transform:translateX(-50%)}
.kg-width-wide img,.kg-width-full img{width:100%;height:auto;display:block}

/* Hide scrollbars for feed */
.snap-container::-webkit-scrollbar{width:0;height:0}


/* Show messages only when populated */
.subscribe-form .message-success,
.subscribe-form .message-error { display:none; margin-top:10px; }
.subscribe-form.success .message-success { display:block; }
.subscribe-form.error .message-error { display:block; }


/* === Subscribe form layout: side-by-side desktop, stacked mobile === */
.subscribe-form {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 640px;
  margin: 18px auto;
}

.subscribe-input {
  flex: 1 1 auto;
  height: 46px;
  padding: 12px 16px;
  font-size: 16px;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 12px;
  outline: none;
  background: #fff;
}

.subscribe-button {
  height: 46px !important;
  padding: 0 28px !important;
  border-radius: 12px !important;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Stack on mobile */
@media (max-width: 768px) {
  .subscribe-form {
    flex-direction: column;
    gap: 8px;
    max-width: 100%;
  }
  .subscribe-button {
    width: 100%;
  }
  .subscribe-input {
    width: 100%;
  }
}


/* === Post header mobile adjustment === */
@media (max-width: 768px) {
  .post-title {
    font-size: calc(48px - 2px) !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}


/* === Force post title 24px on mobile === */
@media (max-width: 768px) {
  .post-title {
    font-size: 24px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}


/* === Collections page === */
.collections-page { max-width: 980px; margin: 24px auto 64px; padding: 0 16px; }
.collections-hero { text-align: center; margin: 8px 0 24px; }
.collections-title {
  font-family: 'Overpass Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, "Courier New", monospace;
  font-weight: 400;
  font-size: 40px;
  margin: 0 0 6px;
}
.collections-sub {
  font-family: 'IBM Plex Serif', Georgia, serif;
  font-size: 16px;
  opacity: .8;
  margin: 0;
}
.collection-group { padding: 22px 0; border-top: 1px solid rgba(0,0,0,.08); }
.collection-group:last-of-type { border-bottom: 1px solid rgba(0,0,0,.08); }
.group-title {
  font-family: 'Overpass Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, "Courier New", monospace;
  font-weight: 600;
  font-size: 24px;
  margin: 6px 0 12px;
}
.group-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.group-item { line-height: 1.5; }
.group-link { text-decoration: none; color: inherit; }
.group-link:hover .group-post-title { text-decoration: underline; }
.group-post-title {
  font-family: 'Overpass Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, "Courier New", monospace;
  font-weight: 400;
  font-size: 18px;
}
.group-post-excerpt {
  font-family: 'IBM Plex Serif', Georgia, serif;
  font-size: 16px;
  opacity: .8;
}
@media (max-width: 768px) {
  .collections-title { font-size: 28px; }
  .group-title { font-size: 20px; }
  .group-post-title { font-size: 16px; }
  .group-post-excerpt { font-size: 14px; }
}


/* About/Page uses the same container and typography as posts via .post-container/.post-title/.post-content */
.page-figure-img { display:block; margin: 0 auto; }