:root{
  /* darker page background so cards pop */
  --bg:#eceff3;            /* ← darker than before */
  --card:#ffffff;
  --text:#1a1a1a;
  --muted:#6b6b6b;
  --brand:#3b5ccc;
  --radius:14px;
  --shadow:0 10px 28px rgba(0,0,0,.10); /* a touch deeper */
}

html,body{
  margin:0; padding:0;
  background:var(--bg);     /* page background */
  color:var(--text);
  font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
}

.section{ 
	max-width:1100px; 
	margin:0 auto; 
	padding:0 14px; 
	top: 100px;
}

.card{
  background:var(--card);   /* white box */
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px 20px;
  margin:20px auto;
}

.card > h1, .card > h2{ margin:0 0 12px; }

/* two-column hero (post + archives) */
.grid-2{ display:grid; gap:22px; }
@media (min-width:980px){ .grid-2{ grid-template-columns:1.7fr 1fr; } }







*{box-sizing:border-box}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}


.topbar{padding-top:14px}
.chipbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.chip{display:inline-block;padding:10px 14px;border-radius:999px;background:#fff;box-shadow:0 1px 4px var(--ring);color:#222}
.brand{margin-left:auto}

.chip.active {
  background: #444;
  color: #fff;
}

.meta{color:var(--muted);margin-bottom:10px}
.muted{color:var(--muted)}
.center{text-align:center}

.btn{background:var(--brand);color:#fff;border:none;border-radius:10px;padding:8px 12px;cursor:pointer}
.btn:hover{filter:brightness(1.05)}
.btn-outline{background:transparent;border:1px solid var(--brand);color:var(--brand);border-radius:10px;padding:8px 12px;cursor:pointer}
.actions{display:flex;gap:10px;margin-top:12px}

blockquote{margin:0;border-left:4px solid var(--brand);padding-left:12px;color:#222}

.video-wrap{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:12px}
.video-wrap iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;border-radius:12px}

.comment-form{display:flex;flex-direction:column;gap:8px}
.comment-form textarea{width:100%;border:1px solid #ddd;border-radius:10px;padding:10px}
.comment-list{margin-top:10px;display:flex;flex-direction:column;gap:10px}
.comment{background:#fff;border:1px solid #eee;border-radius:10px;padding:10px}

/* --- Letter layout for Introduction page --- */
.letter {
  max-width: 920px;
  margin: 0 auto;
  line-height: 1.75;
  font-size: 1.05rem;
}

.letter-date {
  text-align: right;
  color: var(--muted, #6b7280);
  margin: 0 0 0.75rem 0;
  font-variant-numeric: tabular-nums;
}

.letter-heading {
  margin: 0.25rem 0 1rem;
}

.inline-figure {
  float: left;
  width: 180px;
  margin: 0.25rem 1.25rem 0.75rem 0;
}

.inline-figure img {
  display: inline-block;
  width: 20%;
  height: auto;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.12));
  border-radius: 8px;
}

/* Clear float at the end of the card to keep the box height correct */
.letter::after {
  content: "";
  display: inline-block;
  clear: both;
}

/* A touch more breathing room for paragraphs inside the letter */
.letter p { margin: 0 0 1rem; }

/* Floated figure that text wraps around */
.wrap-figure{
  float: left;
  /* width controls visual size: 15–20% of viewport, with sane min/max */
  width: clamp(80px, 18vw, 220px);
  height: auto;                 /* we’ll size the img to fill; this height is ignored */
  margin: 0 1.25rem 1rem 0;     /* space between image and text */
  /* Make the text follow the silhouette (Chromium/Safari). Must be on the floated element. */
  shape-outside: url("/images/lj.svg");
  shape-margin: 12px;
}

/* Image fills the floated figure box */
.wrap-figure > img{
  display: block;
  width: 100%;
  height: auto;
}

/* Firefox fallback: use a rounded rectangle/circle-ish wrap if SVG shape-outside isn’t used */
@supports not (shape-outside: url("/images/lj.svg")) {
  .wrap-figure{
    shape-outside: circle(43%);
    border-radius: 50%;
  }
}

.wrap-figure {
  float: left;
  width: clamp(60px, 18vw, 220px); /* 15–20% of viewport, min 120px, max 220px */
  margin: 0 1.25rem 1rem 0;
  shape-outside: url("/images/lj.svg");
  shape-margin: 12px;
}

.wrap-figure > img {
  display: block;
  width: 100%;
  height: auto;
}

/* Fallback for browsers that don’t support SVG shape-outside */
@supports not (shape-outside: url("/images/lj.svg")) {
  .wrap-figure {
    shape-outside: circle(43%);
    border-radius: 50%;
  }
}

:root{
  /* Header height is adaptive; JS will sync this var. Use a sensible default. */
  --header-height: 128px;
  --header-bg: #ffffff;
  --header-fg: #111;
  --border-color: rgba(0,0,0,.08);
  --shadow: 0 2px 10px rgba(0,0,0,.06);
  /* Safe-area support (iOS notch) */
  --safe-top: env(safe-area-inset-top, 0px);
}

/* Push page content below the fixed header */
body{
  padding-top: calc(var(--header-height) + var(--safe-top));
  /* Ensure anchor jumps don't hide content under the header */
  scroll-padding-top: calc(var(--header-height) + var(--safe-top) + 12px);
}

/* Fixed header */
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  background: var(--header-bg);
  color: var(--header-fg);
  border-bottom: 1px solid var(--border-color);
  box-shadow: var(--shadow);
  z-index: 1000;
  /* Allow ad/logo area to define actual height; padding includes safe area */
  padding-top: var(--safe-top);
}

.site-header__inner{
  height: var(--header-height);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 12px;
}

/* Icon buttons */
.header-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.header-icon svg{ display:block; }

.header-icon:hover,
.header-icon:focus-visible{
  background: rgba(0,0,0,.04);
  border-color: var(--border-color);
  outline: none;
}

/* Center brand / ad slot */
.header-brand-slot{
  flex: 1 1 auto;
  min-width: 0;               /* let it shrink on small screens */
  display: flex;
  align-items: center;
  justify-content: center;    /* center the ad/logo */
  overflow: hidden;           /* clip oversized ads */
  text-align: center;
  padding: 0 6px;
}

/* Example styles if you place an img inside */
.header-brand-slot img{
  max-height: calc(var(--header-height) - 16px);
  height: auto;
  width: auto;
  object-fit: contain;
}

/* Menu: backdrop and panel */
.menu-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.28);
  z-index: 999;               /* just under the header */
}

.menu-panel{
  position: fixed;
  top: calc(var(--header-height) + var(--safe-top));
  right: 8px;
  width: 280px;
  max-width: calc(100vw - 16px);
  background: var(--header-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: var(--shadow);
  z-index: 1001;
  padding: 8px 0;
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: transform .16s ease, opacity .16s ease;
}

.menu-panel.open{
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.menu-panel ul{
  margin: 0; padding: 4px 0; list-style: none;
}

.menu-panel li + li{ border-top: 1px dashed var(--border-color); }

.menu-panel a{
  display: block;
  padding: 12px 16px;
  color: inherit;
  text-decoration: none;
}

.menu-panel a:hover,
.menu-panel a:focus-visible{
  background: rgba(0,0,0,.04);
  outline: none;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .menu-panel{ transition: none; }
}

/* Small screen tweaks */
@media (max-width: 480px){
  :root{ --header-height: 56px; }
  .header-icon{ width: 36px; height: 36px; }
  .header-brand-slot{ font-size: 0.95rem; }
}



/* === Introduction audio UI === */

/* Position the trigger in the top-left of the .letter card */
.letter {
  position: relative; /* creates a containing block for absolutely positioned trigger */
}

.audio-trigger{
  position: absolute;
  top: 10px; left: 10px;
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  cursor: pointer;
}
.audio-trigger:hover,
.audio-trigger:focus-visible{
  background: #f6f7f9;
  outline: none;
}

/* The pop-up panel floats inside the card, under the header */
.audio-panel{
  position: absolute;
  top: 56px; left: 10px;
  width: min(520px, calc(100% - 20px));
  background: #fff;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
  padding: 12px 12px 16px;
  z-index: 2; /* above letter content */
}

.audio-panel .audio-close{
  position: absolute;
  top: 1px; right: 3px;
  width: 28px; height: 28px;
  border: none; background: transparent; cursor: pointer;
  font-size: 20px; line-height: 1;
  color: #666; border-radius: 8px;
}
.audio-panel .audio-close:hover,
.audio-panel .audio-close:focus-visible{ background: #f2f2f2; outline: none; }

.audio-panel .audio-slot{
  margin-top: 1px;
}

/* Make sure long text wraps around the panel nicely on small screens */
@media (max-width: 520px){
  .audio-panel{ left: 10px; right: 10px; width: auto; }
}
/* === Custom Audio Player === */

.player{
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 8px 6px;
}

.player__play,
.player__mute{
  width: 36px; height: 36px;
  display: inline-flex; align-items:center; justify-content:center;
  border: 1px solid rgba(0,0,0,.14);
  background:#fff; border-radius:10px; cursor:pointer;
}
.player__play:hover, .player__mute:hover,
.player__play:focus-visible, .player__mute:focus-visible{
  background:#f6f7f9; outline:none;
}

.player__time{
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  align-items: center;
  gap: 8px;
}

.player__seek{
  width: 100%;
  appearance: none; height: 6px; border-radius: 4px;
  background: #e6e7ea; cursor: pointer;
}
.player__seek::-webkit-slider-thumb{
  appearance: none; width: 14px; height: 14px; border-radius: 50%;
  background: #444; cursor: pointer;
}
.player__seek::-moz-range-thumb{
  width: 14px; height: 14px; border-radius: 50%;
  background: #444; cursor: pointer; border: none;
}

.player__volume{ width: 90px; }
.player__elapsed, .player__duration{
  font-variant-numeric: tabular-nums;
  font-size: 0.9rem; color:#444; text-align:center;
}
.player__speed {
  padding: 4px;
  font-size: 0.9rem;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,.14);
  background: #fff;
  cursor: pointer;
}


/* Let grid items actually shrink on small widths */
.player > * { min-width: 0; }

/* Make the time row flexible */
.player__time { min-width: 0; }
.player__seek { width: 100%; }

/* Volume slider shouldn’t force overflow */
.player__volume {
  width: 140px;              /* desktop comfort */
  max-width: 40vw;           /* but never exceed viewport fraction */
}

/* Keep the speed dropdown compact */
.player__speed {
  padding: 4px;
  font-size: 0.9rem;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,.14);
  background: #fff;
  cursor: pointer;
  max-width: 22vw;           /* avoid pushing layout */
}

/* Make sure the panel itself can’t overflow the card */
.audio-panel {
  box-sizing: border-box;
  width: min(520px, calc(100% - 20px));
  overflow: visible;         /* we’ll reflow, not clip */
}

/* ---------- Responsive layout ---------- */

/* Default (wide): single row (what you already have) */
.player{
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 10px;
}

/* Narrow screens: switch to 2 rows, give the seek bar the full row */
@media (max-width: 520px){
  .player{
    grid-template-areas:
      "play time mute"
      "speed vol  vol";
    grid-template-columns: auto 1fr auto;
    grid-auto-rows: auto;
    row-gap: 8px;
  }
  .player__play   { grid-area: play; }
  .player__time   { grid-area: time; }
  .player__mute   { grid-area: mute; }
  .player__speed  { grid-area: speed; }
  .player__volume { grid-area: vol; }
}

/* Extra small: tighten spacing and controls further */
@media (max-width: 380px){
  .player{ gap: 8px; row-gap: 6px; }
  .player__volume{ width: 120px; max-width: 55vw; }
  .player__speed { font-size: 0.85rem; }
}
#postContainer{
	margin-top: 20px;
	background-color: white;
}
#postAudioBtn{
	left: 1px;
	top:1px;
	margin-top: 1px;
	padding-top: 1px;
	visibility: visible;
}
#postMusicBtn{
	left: 35px;
	top:1px;
	margin-left: 40px;
	margin-top: 1px;
	padding-top: 1px;
	visibility: visible;
}
#ytBtn{
	display: none;
}


.site-header {
  position: fixed;       /* already in your code */
  top: 0; left: 0; right: 0;
  height: 120px;          /* adjust to your actual header height */
  background-color: transparent;
  background-image: url('/images/hdr1.png');
  background-repeat: no-repeat;
  background-size: 100% auto;   /* scale to fit header height */
  background-position: right top; /* align to the right side */
  overflow: hidden;
  z-index: 1000;
}

.site-header__inner {
  background-color: rgba(255,255,255,0.85); /* optional overlay to keep text readable */
  background-color: transparent;
  padding: 0 16px;
}

html body{
	background-color: #485931;
}
.header-icon--menu svg path {
  fill: #fff; /* white */
}

.header-icon--home svg {
  fill: #fff;
}

#site-header__inner{
	overflow: hidden;
}


.header-brand-slot strong {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6); /* soft shadow for contrast */
}

body {
  margin: 0; /* reset default body margin if needed */
	color: #000000;
}
html{
	background-color: #485931;
}

main.section {
  display: block;
  padding-top: 0px;
  margin-top: 0px;
}
:root{ --content-gap: 3px; }
body{
  padding-top: calc(var(--header-height) + var(--safe-top) + var(--content-gap));
  scroll-padding-top: calc(var(--header-height) + var(--safe-top) + var(--content-gap));
}


#RSMiniBtn_Home{
  position: absolute;
  top: 20px;
  left: 7px;
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.5rem .75rem;
  border: none;              
  border-radius: 0;            
  text-decoration:none; color:inherit;
  background: transparent;     
  cursor:pointer;
  border-radius: 6px;  
  color: white;
}

#RSMiniBtn_Archive{
  position: absolute;
  top: 55px;
  left: 7px;
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.5rem .75rem;
  border: none;              
  border-radius: 0;            
  text-decoration:none; color:inherit;
  background: transparent;     
  cursor:pointer;
  border-radius: 6px;
  
}
RSMiniBtn img{ display:block;}
RSMiniBtn:hover{
  background: rgba(0,255,0,.50);
  border-color: rgba(0,255,0,.80);
  outline: none;
  border-style: solid;
  border-width: 1px;
}

.RSMiniBtn:active{ transform:translateY(1px); }


ul, ol { /* just in case parent has flex/grid */
  min-width: 0;
}

li {
  white-space: normal;          /* allow wrapping */
  overflow-wrap: anywhere;      /* preferred: break long words if needed */
  word-break: break-word;       /* legacy fallback */
 }