:root{
  /* --bg:#fff; --fg:#222; --muted:#666; --line:#e8e8e8; --link:#0b57d0; --card:#fafafa; */
  --bg-oud: #f7f6f3;        /* warm paper */
  --bg: #f2f1ee;
  --fg: #1f2933;        /* deep ink */
  --muted: #6b7280;     /* soft gray text */
  --line: #e5e3de;      /* subtle dividers */
  --card: #ffffff;     /* floating surfaces */
  --accent: #3b5bcc;    /* calm blue */
  --accent-soft: #eef2ff;

  /* Links */
  --link: #3b5bcc;          /* same as accent */
  --link-hover: #2f49a8;    /* darker, confident */
  --link-visited: #4b3fa6;  /* subtle purple-blue */
  --link-muted: #5b6fd6;    /* for footnotes, captions */
  --link-underline: rgba(59, 91, 204, 0.35);

  --container:860px; --radius:10px;
  --ui: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --ui: "IBM Plex Sans", system-ui, sans-serif;
  --text: "IBM Plex Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --text: "Source Serif 4", Georgia, serif;
}


*{ box-sizing:border-box; }
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--text);
  font-size:18px;
  line-height:1.7;
}

a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: var(--link-underline);
  text-underline-offset: 0.15em;
}

a:hover {
  color: var(--link-hover);
  text-decoration-color: currentColor;
}

a:visited {
  color: var(--link-visited);
}

.muted a,
figcaption a {
  color: var(--link-muted);
}


.container{ max-width:var(--container); margin:0 auto; padding:0 18px; }

/* a{ color:var(--link); }
a:hover{ text-decoration:underline; }
*/

/* .tline-wrap{ margin: 0 0 18px 0; } */

.tline-bar{
  position: relative;
  height: 34px;
  border: 1px solid var(--muted);
  border-radius: 6px;
  background: var(--bg);
  overflow: hidden;
}

/* alternating 10-year shading aligned to whole decades */
.tline-bar::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(
      to right,
      rgba(0,0,0,.03) 0,
      rgba(0,0,0,.03) var(--decW),
      transparent var(--decW),
      transparent calc(var(--decW) * 2)
    );
  background-position: var(--decOffset) 0;
  pointer-events:none;
}

.tline-tick{
  position:absolute;
  top:0;
  bottom:0;
  transform: translateX(-0.5px);
  pointer-events:none;
}

.tline-tick.is-decade{ width:1px; background: var(--line); }
.tline-tick.is-century{ width:2px; background: rgba(17,17,17,.35); }

.tline-labels{ position:relative; height:18px; margin-top:6px; }
.tline-label{
  position:absolute;
  bottom:0;
  font-size:12px;
  color: var(--muted);
  white-space:nowrap;
}

/* Birth marker */
.tline-marker{
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  left: 0;
  transform: translateX(-0.5px);
  pointer-events: none;
  z-index: 5; /* above ticks/bands */
}

.tline-marker::before{
  content:"";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: -1px;
  width: 2px;
  background: var(--fg);
  border-radius: 2px;
}

/* lifespan bar (birth → death) */
.tline-life{
  position: absolute;
  top: 4px;                 /* inset so it doesn't touch borders */
  bottom: 4px;
  border-radius: 999px;
  background: rgba(11,87,208,.14);   /* subtle blue */
  border: 1px solid rgba(11,87,208,.25);
  z-index: 2;               /* above ticks, below marker */
  pointer-events: none;
}

/* Unknown death: blur + fade from +50y → +80y */
.tline-life.is-unknown{
  -webkit-mask-image: linear-gradient(
    to right,
    #000 0%,
    #000 var(--fade-start),
    rgba(0,0,0,.6) calc(var(--fade-start) + 8%),
    rgba(0,0,0,.2) calc(var(--fade-end) - 4%),
    transparent var(--fade-end)
  );
  mask-image: linear-gradient(
    to right,
    #000 0%,
    #000 var(--fade-start),
    rgba(0,0,0,.6) calc(var(--fade-start) + 8%),
    rgba(0,0,0,.2) calc(var(--fade-end) - 4%),
    transparent var(--fade-end)
  );
  filter: blur(0.6px);
}

/* historical periods */
.tline-events{
  position: absolute;
  inset: 0;
  z-index: 1;            /* above ticks, below lifespan/marker */
  pointer-events: none;
}

.tline-event{
  position: absolute;
  top: 2px;              /* sits near top of bar */
  height: 6px;
  border-radius: 5px;
  background: rgba(0,0,0,.14);
  border: 1px solid rgba(0,0,0,.18);
}
.tline-life{ z-index: 2; }
.tline-marker{ z-index: 5; }

/* ========================================================================= */
/* Make sure grids don't overflow because of padding/borders */
.refimage-grid,
.refimage-item,
.refimage-item *{
  box-sizing: border-box;
}

/* The grid container */
.refimage-grid{
  display: grid;
  gap: 0.75rem;
  margin: 0;
  width: 100%;
  max-width: 100%;
}

/* If markdown wrapped your shortcode output in <p> tags,
   make the <p> not be a grid item wrapper. */
.refimage-grid > p{
  margin: 0;
  display: contents;
}

/* Force stable columns */
.refimage-grid.cols-1{ grid-template-columns: minmax(0, 1fr); }
.refimage-grid.cols-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.refimage-grid.cols-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Kill default figure behavior */
.refimage-item{
  margin: 0;
  min-width: 0;     /* IMPORTANT: allows grid children to shrink */
}

/* Make the image obey the cell width */
.refimage-item a,
.refimage-item img{
  display:block;
  margin: 0;
  max-width:100%;
  height:auto;
  border-radius:20px;
}

.refimage-item img{
  height: auto;
  border-radius: 10px;
}

/* Only on small screens we stack */
@media (max-width: 720px){
  .refimage-grid.cols-2,
  .refimage-grid.cols-3{
    grid-template-columns: minmax(0, 1fr);
  }
}

@media print {
  body {
    font-size: 12pt;
    line-height: 1.5;
    background: white;
  }

  header, nav, footer {
    display: none;
  }

  .page {
    max-width: none;
    margin: 0;
  }

  h1 {
    page-break-after: avoid;
  }
}


.refimage-figure{
  margin:1.2rem 0 1.4rem;
  padding:14px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--card);
  box-shadow: 0 6px 18px rgba(0,0,0,0.05);
}

.refimage-caption{
  margin-top:10px;
  color:var(--muted);
}


.refimage-figure{
  margin: 1rem 0;
}

.refimage-figure > figcaption.refimage-caption{
  display: block !important;
  color: var(--muted, #666);
  margin-top: 0.5rem;
}