/* 1024 bytes of CSS should be enough for anybody. */

:root{
  --text:#222; --ink:#3B2B1F; --bg:#FAF7EC; --muted:#555; --hair:#bbb;
}

*{box-sizing:border-box}

body{
  color:var(--text);
  line-height:1.6;
  margin:0 auto;
  padding:20px 16px;
  max-width:42rem;
  background:var(--bg);
  font-size:clamp(16px, 2.2vw, 18px);
}

h1,h2,h3,h4{line-height:1.2;color:var(--ink);margin:0 0 .25rem}
h1{text-align:center}

a{
  color:#111;
  text-decoration:none;
  border-bottom:1px solid var(--hair);
  padding-bottom:2px; /* bigger tap target */
}
a:focus-visible,a:hover{outline:0;border-bottom-color:#888}

ul{list-style:circle}
ul,ol{margin:0;padding-left:1.1rem}
li{margin:0 0 .4em}

blockquote{border-left:1px solid #ccc;margin:.7rem 0;padding-left:1rem}

img{height:auto;max-width:100%;display:block;}
figure>a,a img{border-bottom:none}

figcaption{font-style:italic}

hr{border:none;height:1rem;margin:0 .7em}
header,footer,.center{text-align:center}
footer{color:#b64a4a}

/* Accessibility helpers */
.visually-hidden{position:absolute;clip:rect(0 0 0 0);clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}

/* --- Bio --- */
/* Mobile-first: stack */
.bio{
  display:flex;
  flex-direction:column;
  gap:14px;
  align-items:flex-start;
  margin-bottom:1rem;
}
.bio p{flex:1;margin:0}
.bio-photo {
  width: 340px;
  height: 340px;
  object-fit: cover;
  border: 1px solid black;
}

/* At >= 700px, switch to side-by-side */
@media (min-width:700px){
  .bio{flex-direction:row;align-items:flex-start;gap:20px}
  .bio-photo{width:290px;aspect-ratio:1/1}
}

.bio-name{
  font-weight:700;
  font-size:clamp(1.2rem, 4.5vw, 1.4rem);
  display:block;
  margin:0 0 .1rem;
}

.note{font-size:.9em;color:var(--muted)}

/* Link list breathing room on mobile */
.link-list li{margin-bottom:.5rem}

/* --- Recent News --- */
.news-container{
  max-height:12rem;      /* a bit taller for thumbs */
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid #000;
  padding:10px;
  margin:16px 0 24px;
  background:var(--bg);
  /*border-radius:12px;*/
}
.news-list{list-style:none;margin:0;padding:0}
.news-list li{margin-bottom:10px;line-height:1.45}

/* Gentle type scale on wider screens */
@media (min-width:40.063em){
  body{font-size:112.5%}
}