/* Thucydides only — Mytilene's two decrees. Uses the approved atlas-figure shell.
   Native radio controls work without JS; print reveals the full comparison. */
.mytilene-figure .mytilene-intro {
  font:400 .92rem/1.75 system-ui,sans-serif;
  max-width:58ch;
  margin:-.4rem 0 1.7rem;
  color:#e6dfd1;
}
.mytilene-switch {
  margin:0;
  padding:0;
  border:0;
  min-width:0;
}
.mytilene-switch legend {
  font:400 .78rem/1.5 system-ui,sans-serif;
  margin-bottom:.75rem;
  color:#e6dfd1;
}
.mytilene-switch>input {
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
}
.mytilene-switch>label {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:.72rem 1rem;
  margin:0 .4rem .5rem 0;
  border:1px solid #8d9a9f;
  color:#f8f2e7;
  cursor:pointer;
  font:500 .8rem/1.35 system-ui,sans-serif;
}
.mytilene-switch>input:focus-visible+label {
  outline:3px solid #e4c68d;
  outline-offset:3px;
}
.mytilene-switch>input:checked+label {
  background:#f8f2e7;
  color:#182e3e;
  border-color:#f8f2e7;
}
.mytilene-figure #mytilene-decree-first:checked~.mytilene-panel--second,
.mytilene-figure #mytilene-decree-second:checked~.mytilene-panel--first {
  display:none;
}
.mytilene-panel {
  padding:2rem 0 .35rem;
}
.mytilene-route {
  display:grid;
  grid-template-columns:auto minmax(2rem,1fr) auto;
  align-items:center;
  gap:.85rem;
  margin:.4rem 0 2rem;
  max-width:42rem;
}
.mytilene-place {
  font:600 .68rem/1.4 system-ui,sans-serif;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:#e9d4a7;
}
.mytilene-sea {
  position:relative;
  height:1px;
  background:#c8a975;
}
.mytilene-sea::after {
  content:"";
  position:absolute;
  right:0;
  top:-3px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#cfb57f;
}
.mytilene-sea>span {
  position:absolute;
  left:50%;
  bottom:.55rem;
  transform:translateX(-50%);
  white-space:nowrap;
  color:#d6d4d0;
  font:500 .64rem/1.3 system-ui,sans-serif;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.mytilene-phase {
  color:#e1c58e;
  font:600 .67rem/1.5 system-ui,sans-serif;
  letter-spacing:.16em;
  text-transform:uppercase;
  margin:0 0 .55rem;
}
.mytilene-panel h3 {
  color:#f8f2e7;
  font:400 clamp(1.65rem,2.5vw,2.15rem)/1.24 var(--atlas-serif);
  margin:0 0 .8rem;
}
.mytilene-panel>p:last-child {
  color:#f1ece2;
  font:400 .94rem/1.8 system-ui,sans-serif;
  max-width:56ch;
  margin:0;
}
.mytilene-caveat {
  padding:1.15rem 0 .35rem;
  margin:1.1rem 0 0;
  border-top:1px solid #687b85;
  font:400 .84rem/1.7 system-ui,sans-serif;
  color:#ede4d2;
}
.mytilene-caveat strong { color:#f8f2e7; }
@media(max-width:760px) {
  .mytilene-panel { padding-top:1.5rem; }
  .mytilene-route { gap:.5rem; margin-bottom:1.6rem; }
  .mytilene-place { font-size:.6rem;letter-spacing:.06em; }
  .mytilene-sea>span { font-size:.55rem; }
  .mytilene-panel h3 { font-size:1.68rem; }
}
@media print {
  .mytilene-figure .mytilene-intro,
  .mytilene-switch legend,
  .mytilene-phase,
  .mytilene-panel>p:last-child,
  .mytilene-caveat,
  .mytilene-place,
  .mytilene-sea>span { color:#182e3e; }
  .mytilene-switch>input,
  .mytilene-switch>label { display:none; }
  .mytilene-figure .mytilene-panel { display:block !important;break-inside:avoid; }
  .mytilene-panel h3 { color:#182e3e; }
}