/* ==========================================================================
   modals.css — drop-down sheets (native <dialog>) + chapter content
   ========================================================================== */
dialog.sheet {
  width: min(100% - 2rem, 920px); max-width: none; max-height: calc(100svh - 2rem);
  margin: 1rem auto auto; padding: 0;
  background: var(--bg-raised); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow: var(--shadow);
  opacity: 0; transform: translateY(-40px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
dialog.sheet--wide { width: min(100% - 2rem, 1160px); }
dialog.sheet.is-open { opacity: 1; transform: none; }
dialog.sheet.is-closing { opacity: 0; transform: translateY(-40px); }
dialog.sheet::backdrop { background: rgba(5, 4, 3, 0.78); backdrop-filter: blur(6px); }

.sheet__inner { display: flex; flex-direction: column; max-height: calc(100svh - 2rem); }
.sheet__head {
  position: sticky; top: 0; z-index: 2;
  padding: var(--s-6) clamp(var(--s-5), 5vw, var(--s-7)) var(--s-5);
  background: linear-gradient(to bottom, var(--bg-raised) 75%, rgba(21, 18, 14, 0));
  border-top: 2px solid transparent; border-image: var(--gold-grad) 1;
}
.sheet__title { font-family: var(--font-display); font-weight: 400; font-size: var(--text-2xl); margin-top: var(--s-2); }
.sheet__close {
  position: absolute; top: var(--s-5); right: var(--s-5);
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line-strong);
  background: transparent; font-size: 22px; line-height: 1; color: var(--gold);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.sheet__close:hover { background: rgba(217, 180, 106, 0.1); transform: rotate(90deg); }
.sheet__body { overflow-y: auto; padding: 0 clamp(var(--s-5), 5vw, var(--s-7)) var(--s-7); overscroll-behavior: contain; }

/* Journey timeline */
.timeline { position: relative; display: grid; gap: var(--s-6); padding-left: var(--s-6); }
.timeline::before { content: ''; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 1px; background: var(--line-strong); }
.timeline__item { position: relative; display: grid; grid-template-columns: 170px 1fr; gap: var(--s-5); }
.timeline__item::before {
  content: ''; position: absolute; left: calc(-1 * var(--s-6) + 2px); top: 10px;
  width: 9px; height: 9px; transform: rotate(45deg); background: var(--bg-raised); border: 1px solid var(--gold);
}
.timeline__year  { font-family: var(--font-display); font-style: italic; font-size: var(--text-xl); color: var(--gold); line-height: 1.1; }
.timeline__title { font-family: var(--font-display); font-size: var(--text-lg); margin-bottom: var(--s-2); }
.timeline__text  { color: var(--ink-soft); max-width: 58ch; }

/* ROBUSTA chapter */
.robusta { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--s-7); align-items: start; }
.robusta__media { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 3 / 4; }
.robusta__media img { width: 100%; height: 100%; object-fit: cover; }
.robusta__logos { display: flex; align-items: center; gap: var(--s-4); color: var(--gold); }
.robusta__logos img { height: 24px; width: auto; }
.robusta__logos img + span + img { height: 34px; }
.robusta__headline { font-family: var(--font-display); font-size: var(--text-2xl); margin-top: var(--s-5); line-height: 1.05; }
.robusta__lead { margin-top: var(--s-4); color: var(--ink-soft); font-size: var(--text-lg); font-family: var(--font-display); font-style: italic; }
.pillars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); margin-top: var(--s-6); }
.pillar { padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.pillar__title { font-family: var(--font-display); font-size: var(--text-lg); color: var(--gold); margin-bottom: var(--s-2); }
.pillar__text  { font-size: var(--text-sm); color: var(--ink-soft); }