/* ========== Base ========== */
:root { color-scheme: light; }

body{
  font-family: "Bookman Old Style";
  margin:0; padding:0;
  line-height:1.6; color:#333; background:#fff;
}

.justified{ text-align: justify; }

a{ color:#0077cc; text-decoration:none; }
a:hover{ text-decoration:underline; }

/* Header / Nav */
header{
  background:#011269; color:#fff; padding:1rem 2rem;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap;
}
header h1{ margin:0; font-size:1.8rem; }
nav ul{ list-style:none; margin:0; padding:0; display:flex; gap:1.5rem; }
nav ul li a{ color:#fff; font-weight:500; }
nav ul li a:hover{ text-decoration:underline; }

/* Footer */
footer{ text-align:center; padding:1rem; background:#f0f0f0; color:#666; }

/* Page containers */
.contact-page{ max-width:800px; margin:2rem auto; padding:0 2rem; }
.writings-page{ max-width:800px; margin:2rem auto; padding:0 2rem; }
.research-page{ max-width:900px; margin:2rem auto; padding:0 2rem; }

/* Intro */
.intro{ text-align:center; padding:3rem 2rem; max-width:700px; margin:0 auto; }
.intro-body{ text-align: justify; padding:3rem 2rem; max-width:1000px; margin:0 auto; }
.profile-pic{
  width:200px; height:200px; border-radius:50%; object-fit:cover; margin-bottom:1rem;
  box-shadow:0 0 10px rgba(0,0,0,.1);
}
.intro-text p{ font-size:1.1rem; margin-bottom:1.5rem; }

/* Social */
.social-icons{ display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:16px; padding:0; margin:0; }
.social-icons a{ display:inline-block; line-height:0; text-decoration:none; }
.social-icons img{ width:32px; height:32px; margin:0; vertical-align:middle; }
.social-icons img:hover{ transform:scale(1.15); }

/* Links in header title */
.site-title{ color:#fff; text-decoration:none; }
.site-title:hover{ text-decoration:underline; }

/* Papers */
.paper{ margin-top:2rem; margin-bottom:3rem; }
.paper h3{ margin-bottom:.3rem; }
.paper iframe{ border:1px solid #ccc; border-radius:4px; }

/* Notes, downloads */
.note{ background:#f9f9f9; border-left:4px solid #0077cc; padding:1rem; margin-top:1rem; font-size:.95rem; }
.download-link{ margin-top:.5rem; }
.download-link img{ width:28px; height:28px; cursor:pointer; transition:transform .2s ease; }
.download-link img:hover{ transform:scale(1.2); }
.inline-icon{ height:20px; width:auto; vertical-align:middle; margin-left:10px; }
.inline-icon:first-child{ margin-left:0; }
.icon-links{ display:inline-block; margin-left:8px; }

/* Responsive blocks used on research page */
.responsive{
  display:flex; flex-direction:column; align-items:center; margin:2rem 0; gap:1rem;
  text-align: justify;
}
.responsive-figure{
  text-align: justify; margin:2rem auto; max-width:100%; padding:0 1rem;
}
.responsive-figure img{
  max-width:100%; height:auto; border-radius:6px; box-shadow:0 2px 8px rgba(0,0,0,.1); display:block; margin:0 auto;
}
.responsive-figure figcaption{
  display:block; width:100%; margin-top:.6rem; font-size:.95rem; color:#555;
  text-align: justify; max-width:700px; margin-left:auto; margin-right:auto;
}

/* ========== Writings page UI ========== */
.writings-page h2{ margin-top:.5rem; }
.writings-lede{ color:#555; margin:.25rem 0 1.25rem; }

.filters{ display:flex; gap:.5rem; flex-wrap:wrap; margin:.5rem 0 1.25rem; }
.filter-pill{
  border:1px solid #ddd; padding:.4rem .7rem; border-radius:999px; background:#fff; color:#333; font-size:.95rem; text-decoration:none;
}
.filter-pill:focus, .filter-pill:hover{ background:#f6f6f6; }

.writing-grid{ display:grid; grid-template-columns:1fr; gap:16px; }
.card{ border:1px solid #eee; border-radius:12px; padding:14px; background:#fff; }
.card:hover{ box-shadow:0 1px 0 rgba(0,0,0,.06); }
.card .kicker{ color:#666; font-size:.9rem; margin-bottom:.25rem; }
.card h3{ margin:.1rem 0 .35rem; font-size:1.15rem; }
.card .excerpt{ color:#333; margin:0; }

.section{ margin:1.25rem 0 1.75rem; }
.section h3{ color:#666; font-size:1rem; margin:.25rem 0 .6rem; }
.writing{ border-left:4px solid #eee; padding-left:12px; margin:16px 0; }

/* ========== Detail helpers (poem/prose/deck/cta) on ALL screens ========== */
.deck{
  font-size:1.05rem; color:#444; margin:.5rem 0 1rem;
  background:#f6f6f6; border:1px solid #eee; border-radius:10px; padding:10px 12px; display:block;
}
.cta{
  background:#f7f7f7; border:1px solid #eee; padding:12px 14px; border-radius:10px; margin:1.25rem 0; display:block; color:#333;
}
.cta a{ color:#0077cc; text-decoration:underline; }

.poem,
.poem p,
.poem div{
  white-space:pre-wrap;             /* preserve line breaks on all devices */
  text-align:center;                /* your chosen alignment */
}
.prose p{
  margin:.75rem 0;
  text-align:justify; text-justify:inter-word;
}

/* ========== Desktop refinements ========== */
@media (min-width: 768px){
  .responsive{ flex-direction:row; align-items:flex-start; }
  .responsive .text-box{ flex:1; }
  .responsive-figure{ max-width:700px; }
  .responsive-figure img{ width:700px; }
  .responsive-figure figcaption{ max-width:800px; }
}
@media (min-width: 880px){
  .writing-grid{ grid-template-columns:1fr 1fr; }
}

/* ========== Mobile wrapper ========== */
@media (max-width: 640px){
  /* tighter gutters on phones */
  .contact-page, .writings-page, .research-page{ padding:0 16px; }

  /* headings scale */
  h1, h2{ line-height:1.25; }
  h1{ font-size:1.45rem; }
  h2{ font-size:1.3rem; }

  /* poem column stays centered but with readable width */
  .poem{ max-width:min(92vw, 48ch); margin-left:auto; margin-right:auto; }

  /* prose: better spacing with hyphenation */
  .prose p{ hyphens:auto; }

  /* grid collapses */
  .writing-grid{ grid-template-columns:1fr; }

  /* boxes padding */
  .deck, .cta{ padding:12px; }
}

/* Extra-small phones */
@media (max-width: 360px){
  h1{ font-size:1.3rem; } h2{ font-size:1.15rem; }
  .deck, .cta{ padding:10px; }
}