/* ANIMA MYSTICA / Archive category
   Update-history timeline styles. */

/* ==========================================================================
   INFORMATION / UPDATE HISTORY
   追記しやすい年別タイムライン。新しい更新は各年セクションの先頭へ追加する。
   ========================================================================== */
.information-update-page{
  --update-accent:#6eb8cf;
  --update-accent-soft:#9dd6e6;
  --update-line:rgba(116,190,211,.22);
  --update-card:rgba(8,28,38,.76);
  --update-card-deep:rgba(4,17,24,.92);
}

.information-update-hero{
  position:relative;
  margin:0 0 26px;
  padding:30px 30px 28px;
  overflow:hidden;
  border:1px solid rgba(103,177,199,.25);
  background:
    radial-gradient(circle at 88% 18%,rgba(89,177,202,.12),transparent 34%),
    linear-gradient(145deg,rgba(11,36,48,.94),rgba(4,16,23,.97));
}

.information-update-hero::after{
  content:"";
  position:absolute;
  right:24px;
  bottom:-38px;
  width:120px;
  height:120px;
  border:1px solid rgba(120,202,222,.12);
  border-radius:50%;
  box-shadow:0 0 0 20px rgba(120,202,222,.025),0 0 0 42px rgba(120,202,222,.018);
  pointer-events:none;
}

.information-update-kicker{
  margin:0 0 8px!important;
  color:var(--update-accent);
  font-size:10px;
  font-weight:700!important;
  letter-spacing:.24em;
}

.category-archive.page-type-article #pagebody.information-update-page .information-update-hero h1{
  margin:0 0 13px;
}

.information-update-lead{
  position:relative;
  z-index:1;
  max-width:56em;
  margin:0!important;
  color:#b9cbd1;
  font-size:13px;
  line-height:1.9!important;
}

.information-update-guide{
  margin:0 0 34px;
  padding:15px 18px;
  border-left:3px solid rgba(110,184,207,.72);
  background:rgba(255,255,255,.025);
}

.information-update-guide strong{
  display:block;
  margin:0 0 3px;
  color:var(--update-accent-soft);
  font-size:11px;
  letter-spacing:.08em;
}

.information-update-guide p{
  margin:0!important;
  color:var(--info-text-soft);
  font-size:12px;
}

.information-update-log{margin:0 0 34px}
.information-update-year{margin:0 0 42px}

.category-archive.page-type-article #pagebody.information-update-page .information-update-year > h2{
  margin:0 0 14px!important;
  padding:0 0 9px!important;
  border:0!important;
  border-bottom:1px solid var(--update-line)!important;
  border-radius:0!important;
  background:none!important;
  box-shadow:none!important;
  color:#d8eef5!important;
  font-size:20px!important;
  font-weight:400!important;
  letter-spacing:.08em;
}

.information-update-entry{
  display:grid;
  grid-template-columns:112px minmax(0,1fr);
  gap:0 20px;
  position:relative;
  padding:0 0 26px;
}

.information-update-entry::before{
  content:"";
  position:absolute;
  left:106px;
  top:8px;
  bottom:-2px;
  width:1px;
  background:linear-gradient(var(--update-line),rgba(116,190,211,.04));
}
.information-update-entry:last-child::before{bottom:26px}

.information-update-date{
  position:relative;
  padding:2px 17px 0 0;
  text-align:right;
}
.information-update-date::after{
  content:"";
  position:absolute;
  right:-4px;
  top:6px;
  width:7px;
  height:7px;
  border:1px solid rgba(145,218,236,.75);
  border-radius:50%;
  background:#071820;
  box-shadow:0 0 0 4px rgba(95,183,207,.06);
}
.information-update-date time{
  color:#718f99;
  font-size:11px;
  font-variant-numeric:tabular-nums;
  letter-spacing:.04em;
}

.information-update-content{
  min-width:0;
  padding:16px 19px 17px;
  border:1px solid rgba(101,174,195,.17);
  background:linear-gradient(145deg,var(--update-card),var(--update-card-deep));
}
.information-update-type{
  margin:0 0 5px!important;
  color:#679aaa;
  font-size:9px;
  font-weight:700!important;
  letter-spacing:.18em;
}
.category-archive.page-type-article #pagebody.information-update-page .information-update-content h3{
  margin:0 0 8px;
  color:#e2f3f8;
  font-size:16px;
  line-height:1.55;
}
.information-update-content > p:not(.information-update-type):not(.information-update-links){
  margin:0!important;
  color:#aebfc5;
  font-size:13px;
  line-height:1.85!important;
}
.information-update-links{margin:11px 0 0!important}
.information-update-links a,
.information-update-back a{
  color:#83c4d6;
  text-decoration:underline;
  text-decoration-color:rgba(131,196,214,.35);
  text-underline-offset:4px;
}
.information-update-links a:hover,
.information-update-links a:focus-visible,
.information-update-back a:hover,
.information-update-back a:focus-visible{
  color:#c9eff8;
  text-decoration-color:currentColor;
}
.information-update-back{
  margin:34px 0 0!important;
  padding-top:18px;
  border-top:1px solid var(--info-line);
  font-size:12px;
}

@media (max-width:650px){
  .information-update-hero{padding:23px 19px 22px}
  .information-update-entry{
    grid-template-columns:1fr;
    gap:7px;
    padding-left:18px;
  }
  .information-update-entry::before{
    left:3px;
    top:8px;
  }
  .information-update-date{
    padding:0;
    text-align:left;
  }
  .information-update-date::after{
    left:-18px;
    right:auto;
    top:4px;
  }
  .information-update-content{padding:14px 15px 15px}
}
\n\n/* Important notices share the same timeline but use a clear pale-gold card. */
.information-update-entry.is-important .information-update-date::after{
  border-color:rgba(177,139,69,.72);
  background:#2a2317;
  box-shadow:0 0 0 4px rgba(177,139,69,.055);
}

.information-update-entry.is-important .information-update-date time{
  color:#a88f5d;
  font-weight:700;
}

.information-update-entry.is-important .information-update-content{
  border:1px solid rgba(168,132,66,.30);
  border-left:3px solid rgba(174,137,68,.58);
  background:
    radial-gradient(circle at 92% 14%,rgba(181,143,70,.055),transparent 36%),
    linear-gradient(145deg,rgba(16,24,27,.96),rgba(10,16,19,.97));
  box-shadow:inset 0 1px 0 rgba(210,175,105,.035);
}

.information-update-entry.is-important .information-update-type{
  color:#ad925d;
  font-weight:800!important;
}

.category-archive.page-type-article #pagebody.information-update-page
.information-update-entry.is-important .information-update-content h3{
  color:#e7dfcf;
}

.information-update-entry.is-important .information-update-content > p:not(.information-update-type):not(.information-update-links){
  color:#b9b4aa;
}

.information-update-entry.is-important .information-update-links a{
  color:#b9a06e;
  text-decoration-color:rgba(185,160,110,.30);
}