/* Mobile-first reading layout */
:root{
--measure: 68ch;            /* target line length */
--radius: 8px;
}

body{
font-size: clamp(16px, 0.95rem + 0.25vw, 18px);
line-height: 1.7;
background: var(--page-bg, #fff);
}

.content{
max-width: var(--measure);
margin: 0 auto;
padding: 1rem 1.25rem;
}

/* Typography & spacing */
p{ margin: 0.85em 0 1.1em; }
h1,h2,h3{ line-height: 1.25; margin: 1.6rem 0 0.6rem; }
h1{ font-size: clamp(1.8rem, 1.1rem + 2.5vw, 2.3rem); }
h2{ font-size: clamp(1.35rem, 1rem + 1.3vw, 1.7rem); }
h3{ font-size: clamp(1.15rem, 0.95rem + 0.9vw, 1.25rem); }
ul,ol{ padding-left: 1.2em; margin: 0.6em 0 1.1em; }

/* Better link visibility on mobile */
a{ text-decoration: underline; text-underline-offset: 2px; }

/* Images & media */
img, video{ max-width: 100%; height: auto; border-radius: var(--radius); display:block; }
img{ margin: 0.5rem 0 1rem; }

/* Responsive iframe (Bokeh map) */
.iframe-wrap{
width: 100%;
aspect-ratio: 16/9;         /* keeps proportion on small screens */
border-radius: var(--radius);
overflow: hidden;
background: #f2f2f2;
margin: 0.5rem 0 1rem;
}
.iframe-wrap iframe{
width: 100%;
height: 100%;
border: 0;
}

/* Tables: horizontal scroll instead of squishing */
table{ display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table thead th{ position: sticky; top: 0; background: inherit; }

/* Code blocks: readable size, allow scroll; inline code doesn’t shout */
pre{ font-size: 0.9em; line-height: 1.55; border-radius: var(--radius); }
code{ font-size: 0.95em; word-break: break-word; }
pre code{ word-break: normal; }

blockquote{
margin: 1.1rem 0;
padding: 0.75rem 1rem;
border-left: 4px solid rgba(0,0,0,0.15);
background: rgba(127,127,127,0.08);
border-radius: 0 var(--radius) var(--radius) 0;
}

hr{ margin: 1.8rem 0; }

/* Slight tighten on very small phones */
@media (max-width: 360px){
.content{ padding: 0.75rem 0.9rem; }
}

/* Respect dark mode */
@media (prefers-color-scheme: dark){
:root{ --page-bg: #0b0b0b; }
body{ color: #eee; background: var(--page-bg); }
blockquote{ border-left-color: rgba(255,255,255,0.25); background: rgba(255,255,255,0.06); }
}