/* =========================================================
   YUKINON PALMU OPERATION ARCHIVE V1.0.0
   ========================================================= */

:root{
  color-scheme:dark;

  --bg:#08070a;
  --panel:rgba(15,10,17,.88);

  --line:rgba(255,255,255,.095);
  --line-strong:rgba(255,106,183,.34);

  --pink:#f054a2;
  --pink2:#b23d87;

  --white:#f4edf2;
  --muted:#988a95;

  --green:#7be1b5;
  --gold:#e6c16f;

  --shadow:
    0 28px 80px rgba(0,0,0,.42);
}


*{
  box-sizing:border-box;
}


html{
  min-height:100%;
  background:#08070a;
}


body{
  margin:0;
  min-height:100vh;
  overflow-x:hidden;

  color:var(--white);

  background:
    linear-gradient(
      180deg,
      rgba(8,7,10,.84),
      rgba(8,7,10,.96)
    ),
    url("/assets/images/palmu/palmu-bg-v34-desktop.png?v=3.4.0")
    center top / cover fixed no-repeat;

  font-family:
    "Segoe UI",
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    sans-serif;
}


a{
  color:inherit;
  text-decoration:none;
}


button{
  font:inherit;
}


.archive-grid{
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;

  opacity:.26;

  background-image:
    linear-gradient(
      rgba(255,255,255,.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.025) 1px,
      transparent 1px
    );

  background-size:
    42px 42px;
}


.archive-noise{
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;

  opacity:.16;

  background:
    repeating-linear-gradient(
      180deg,
      transparent 0,
      transparent 3px,
      rgba(255,255,255,.012) 4px
    );
}


.archive-header{
  width:min(1480px,calc(100% - 32px));
  min-height:104px;
  margin:0 auto;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;

  border-bottom:
    1px solid var(--line);
}


.archive-brand{
  display:flex;
  align-items:center;
  gap:14px;
}


.archive-brand-mark{
  width:54px;
  height:54px;

  display:grid;
  place-items:center;

  border:
    1px solid rgba(240,84,162,.52);

  background:
    radial-gradient(
      circle at 35% 28%,
      rgba(255,126,194,.28),
      rgba(93,26,73,.20) 48%,
      rgba(9,7,10,.96) 72%
    );

  color:#fff;

  font-family:Georgia,serif;
  font-size:27px;
  font-weight:900;

  box-shadow:
    inset 0 0 30px rgba(240,84,162,.12),
    0 0 28px rgba(240,84,162,.12);
}


.archive-brand-copy{
  display:grid;
  gap:1px;
}


.archive-brand-copy small{
  color:#a995a3;
  font-size:9px;
  letter-spacing:.22em;
}


.archive-brand-copy strong{
  font-family:Georgia,serif;
  font-size:19px;
  letter-spacing:.06em;
}


.archive-brand-copy span{
  color:#756a72;
  font-size:7px;
  letter-spacing:.17em;
}


.archive-header-status{
  display:flex;
  align-items:center;
  gap:8px;

  color:#8f808a;

  font-size:8px;
  font-weight:800;
  letter-spacing:.17em;
}


.archive-status-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 12px var(--green);
}


.archive-tabs{
  width:min(1480px,calc(100% - 32px));
  min-height:46px;

  margin:0 auto;

  display:flex;
  align-items:stretch;

  overflow-x:auto;

  border-bottom:
    1px solid var(--line);
}


.archive-tabs > a,
.archive-tabs > span:not(.archive-tabs-brand){
  min-width:max-content;
  min-height:46px;

  padding:0 18px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-right:
    1px solid rgba(255,255,255,.06);

  color:#80737d;

  font-family:Georgia,serif;
  font-size:8px;
  font-weight:900;
  letter-spacing:.08em;
}


.archive-tabs > a:hover{
  color:#fff;
  background:rgba(255,255,255,.025);
}


.archive-tabs .is-active{
  color:#fff;

  border-bottom:
    2px solid var(--pink);

  background:
    linear-gradient(
      180deg,
      rgba(240,84,162,.11),
      rgba(240,84,162,.025)
    );
}


.archive-tabs-brand{
  margin-left:auto;
  padding:0 8px 0 20px;

  display:flex;
  align-items:center;

  min-width:max-content;

  color:#756973;

  font-size:8px;
  letter-spacing:.12em;
}


.archive-tabs-brand b{
  margin-left:5px;
  color:var(--pink);
}


.archive-main{
  width:min(1480px,calc(100% - 32px));

  margin:0 auto;
  padding:28px 0 52px;
}


.archive-hero{
  min-height:330px;

  position:relative;

  display:grid;
  grid-template-columns:
    minmax(0,1.25fr)
    minmax(300px,.75fr);

  border:1px solid var(--line);

  overflow:hidden;

  background:
    radial-gradient(
      circle at 78% 42%,
      rgba(240,84,162,.15),
      transparent 27%
    ),
    linear-gradient(
      120deg,
      rgba(20,12,22,.94),
      rgba(8,7,10,.90)
    );

  box-shadow:var(--shadow);
}


.archive-hero-copy{
  position:relative;
  z-index:2;

  padding:
    clamp(34px,5vw,74px);
}


.archive-kicker{
  margin-bottom:18px;

  color:var(--pink);

  font-size:9px;
  font-weight:900;
  letter-spacing:.28em;
}


.archive-hero h1{
  margin:0;

  max-width:780px;

  font-family:Georgia,serif;

  font-size:
    clamp(44px,7vw,96px);

  line-height:.82;
  letter-spacing:-.045em;
}


.archive-hero h1 span{
  display:block;

  margin-bottom:10px;

  color:#8e7b88;

  font-size:.23em;
  letter-spacing:.25em;
}


.archive-hero-copy > p{
  margin:25px 0 0;

  color:#9b8c96;

  font-size:9px;
  font-weight:800;
  letter-spacing:.22em;
}


.archive-classification{
  margin-top:32px;

  width:max-content;
  max-width:100%;

  padding:9px 13px;

  border-left:
    3px solid var(--pink);

  background:
    rgba(240,84,162,.065);

  display:grid;
  gap:3px;
}


.archive-classification span{
  color:#725f6c;
  font-size:6px;
  letter-spacing:.2em;
}


.archive-classification strong{
  color:#d9c4d1;
  font-size:8px;
  letter-spacing:.12em;
}


.archive-hero-display{
  min-height:310px;

  position:relative;

  display:grid;
  place-items:center;
}


.archive-radar{
  width:min(260px,70vw);
  aspect-ratio:1;

  position:relative;

  display:grid;
  place-items:center;

  border:
    1px solid rgba(240,84,162,.24);

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(240,84,162,.08),
      transparent 62%
    );
}


.archive-radar::before,
.archive-radar::after{
  content:"";

  position:absolute;

  background:
    rgba(240,84,162,.20);
}


.archive-radar::before{
  width:1px;
  height:100%;
}


.archive-radar::after{
  width:100%;
  height:1px;
}


.archive-radar span{
  position:absolute;

  width:72%;
  aspect-ratio:1;

  border:
    1px solid rgba(240,84,162,.18);

  border-radius:50%;
}


.archive-radar span:nth-child(2){
  width:42%;
}


.archive-radar span:nth-child(3){
  width:11%;

  background:
    rgba(240,84,162,.28);

  box-shadow:
    0 0 22px rgba(240,84,162,.42);
}


.archive-hero-code{
  position:absolute;

  right:24px;
  bottom:22px;

  text-align:right;

  display:grid;
}


.archive-hero-code small{
  color:#6c5d67;
  font-size:6px;
  letter-spacing:.2em;
}


.archive-hero-code strong{
  color:#fff;
  font-family:Georgia,serif;
  font-size:22px;
}


.archive-hero-code span{
  color:var(--pink);
  font-size:6px;
  letter-spacing:.16em;
}


.archive-command-panel,
.archive-timeline-shell{
  margin-top:16px;

  border:
    1px solid var(--line);

  background:
    rgba(11,8,13,.88);

  box-shadow:
    var(--shadow);
}


.archive-command-head,
.archive-timeline-head{
  min-height:72px;

  padding:14px 18px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;

  border-bottom:
    1px solid var(--line);
}


.archive-command-head > div:first-child,
.archive-timeline-head > div:first-child{
  display:grid;
  gap:4px;
}


.archive-command-head small,
.archive-timeline-head small{
  color:#725f6b;
  font-size:6px;
  letter-spacing:.2em;
}


.archive-command-head strong,
.archive-timeline-head h2{
  margin:0;

  font-family:Georgia,serif;
  font-size:18px;
  letter-spacing:.04em;
}


.archive-record-total{
  color:#71636c;
  font-size:7px;
  letter-spacing:.12em;
}


.archive-record-total strong{
  margin-left:8px;

  color:var(--pink);

  font-family:Georgia,serif;
  font-size:20px;
}


.archive-category-filters,
.archive-year-filters{
  padding:10px 12px;

  display:flex;
  gap:6px;

  overflow-x:auto;

  border-bottom:
    1px solid var(--line);
}


.archive-year-filters:empty{
  display:none;
}


.archive-category-filters button,
.archive-year-filters button{
  min-height:34px;
  min-width:max-content;

  padding:0 14px;

  flex:0 0 auto;

  border:
    1px solid rgba(255,255,255,.10);

  color:#8b7d86;

  background:
    rgba(255,255,255,.018);

  font-family:Georgia,serif;

  font-size:7px;
  font-weight:900;
  letter-spacing:.06em;

  cursor:pointer;
}


.archive-category-filters button.is-active,
.archive-year-filters button.is-active{
  color:#fff;

  border-color:
    rgba(240,84,162,.75);

  background:
    linear-gradient(
      90deg,
      rgba(226,62,151,.82),
      rgba(132,48,112,.82)
    );
}


.archive-timeline-shell{
  min-height:360px;
}


.archive-timeline-status{
  display:flex;
  align-items:center;
  gap:6px;

  color:#756770;

  font-size:6px;
  letter-spacing:.12em;
}


.archive-timeline-status span{
  width:6px;
  height:6px;

  border-radius:50%;

  background:var(--green);

  box-shadow:
    0 0 10px var(--green);
}


.archive-timeline-status strong{
  color:#d4c2cd;
}


.archive-loading,
.archive-empty{
  min-height:270px;

  padding:30px;

  display:grid;
  place-items:center;
  align-content:center;
  gap:12px;

  color:#786b74;

  text-align:center;

  font-size:8px;
  letter-spacing:.16em;
}


.archive-loading span{
  width:26px;
  height:26px;

  border:
    2px solid rgba(255,255,255,.07);

  border-top-color:
    var(--pink);

  border-radius:50%;

  animation:
    archiveSpin .8s linear infinite;
}


@keyframes archiveSpin{
  to{
    transform:rotate(360deg);
  }
}


.archive-empty strong{
  color:#bba8b5;

  font-family:Georgia,serif;
  font-size:18px;
}


.archive-empty span{
  color:var(--pink);
}


.archive-empty small{
  color:#6f636b;
  letter-spacing:.05em;
}


.archive-timeline{
  padding:
    0 22px 32px;
}


.archive-year{
  position:relative;
  padding-top:28px;
}


.archive-year + .archive-year{
  margin-top:18px;
}


.archive-year-title{
  margin:0 0 16px;

  display:flex;
  align-items:center;
  gap:14px;

  color:#fff;

  font-family:Georgia,serif;

  font-size:
    clamp(25px,4vw,40px);
}


.archive-year-title::after{
  content:"";

  height:1px;

  flex:1;

  background:
    linear-gradient(
      90deg,
      rgba(240,84,162,.36),
      transparent
    );
}


.archive-year-title small{
  color:#745f6c;

  font-family:"Segoe UI",sans-serif;

  font-size:7px;
  letter-spacing:.17em;
}


.archive-year-records{
  position:relative;

  padding-left:
    clamp(28px,5vw,70px);
}


.archive-year-records::before{
  content:"";

  position:absolute;

  top:7px;
  bottom:7px;
  left:11px;

  width:1px;

  background:
    linear-gradient(
      180deg,
      var(--pink),
      rgba(240,84,162,.15)
    );
}


.archive-record{
  position:relative;

  min-height:126px;

  padding:17px 18px;
  margin-bottom:10px;

  display:grid;

  grid-template-columns:
    minmax(100px,.30fr)
    minmax(0,1.7fr);

  gap:18px;

  border:
    1px solid var(--line);

  background:
    linear-gradient(
      100deg,
      rgba(255,255,255,.025),
      rgba(255,255,255,.008)
    );

  cursor:pointer;

  transition:
    border-color .18s ease,
    background .18s ease,
    transform .18s ease;
}


.archive-record::before{
  content:"";

  position:absolute;

  left:
    calc(
      -1 * clamp(28px,5vw,70px)
      + 6px
    );

  top:29px;

  width:10px;
  height:10px;

  border:
    2px solid #09070a;

  border-radius:50%;

  background:#7e6b77;

  box-shadow:
    0 0 0 1px rgba(240,84,162,.36);
}


.archive-record:hover{
  transform:translateX(3px);

  border-color:
    rgba(240,84,162,.40);

  background:
    linear-gradient(
      100deg,
      rgba(240,84,162,.09),
      rgba(255,255,255,.012)
    );
}


.archive-record.is-major{
  min-height:156px;

  border-color:
    rgba(240,84,162,.38);

  background:
    linear-gradient(
      110deg,
      rgba(240,84,162,.13),
      rgba(12,8,14,.84) 52%,
      rgba(240,84,162,.035)
    );
}


.archive-record.is-major::before{
  background:var(--pink);

  box-shadow:
    0 0 18px rgba(240,84,162,.58);
}


.archive-record.is-important::before{
  background:var(--gold);

  box-shadow:
    0 0 14px rgba(230,193,111,.46);
}


.archive-record-date{
  display:grid;
  align-content:start;
  gap:5px;
}


.archive-record-date strong{
  color:#fff;

  font-family:Georgia,serif;
  font-size:18px;
}


.archive-record-date span{
  color:#766873;

  font-size:6px;
  letter-spacing:.13em;
}


.archive-record-body{
  min-width:0;
}


.archive-record-topline{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;

  margin-bottom:9px;
}


.archive-record-category,
.archive-record-importance{
  min-height:22px;

  padding:0 8px;

  display:inline-flex;
  align-items:center;

  border:
    1px solid rgba(255,255,255,.10);

  color:#978892;

  font-size:6px;
  font-weight:900;
  letter-spacing:.08em;
}


.archive-record-category{
  color:#f1a4ca;

  border-color:
    rgba(240,84,162,.30);

  background:
    rgba(240,84,162,.055);
}


.archive-record-codename{
  color:#766570;

  font-size:7px;
  letter-spacing:.1em;
}


.archive-record h3{
  margin:0;

  color:#fff;

  font-family:Georgia,serif;

  font-size:
    clamp(17px,2.4vw,25px);

  line-height:1.13;
}


.archive-record p{
  margin:9px 0 0;

  max-width:900px;

  color:#a2929c;

  font-size:9px;
  line-height:1.7;
}


.archive-record-action{
  margin-top:13px;

  display:inline-flex;
  align-items:center;
  gap:8px;

  color:var(--pink);

  font-size:7px;
  font-weight:900;
  letter-spacing:.12em;
}


.archive-record-action::after{
  content:"→";
  font-size:11px;
}


.archive-modal{
  position:fixed;
  inset:0;

  z-index:1000;

  display:none;
  place-items:center;

  padding:20px;
}


.archive-modal.is-open{
  display:grid;
}


.archive-modal-backdrop{
  position:absolute;
  inset:0;

  border:0;

  background:
    rgba(3,2,4,.84);

  backdrop-filter:
    blur(8px);

  cursor:pointer;
}


.archive-file{
  width:min(920px,100%);

  max-height:
    min(
      880px,
      calc(100vh - 40px)
    );

  position:relative;
  z-index:2;

  overflow-y:auto;

  border:
    1px solid rgba(240,84,162,.40);

  background:
    linear-gradient(
      145deg,
      rgba(20,12,22,.99),
      rgba(8,7,10,.995)
    );

  box-shadow:
    0 38px 120px rgba(0,0,0,.72);
}


.archive-file-top{
  min-height:68px;

  padding:12px 16px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  border-bottom:
    1px solid var(--line);
}


.archive-file-top > div{
  display:grid;
}


.archive-file-top small{
  color:var(--pink);

  font-size:6px;
  letter-spacing:.16em;
}


.archive-file-top strong{
  margin-top:3px;

  font-family:Georgia,serif;
  font-size:17px;
}


.archive-file-close{
  width:40px;
  height:40px;

  border:
    1px solid rgba(255,255,255,.10);

  color:#ad9ba7;

  background:
    rgba(255,255,255,.02);

  cursor:pointer;

  font-size:22px;
}


.archive-file-image{
  aspect-ratio:16/7;

  overflow:hidden;

  border-bottom:
    1px solid var(--line);

  background:#08070a;
}


.archive-file-image img{
  width:100%;
  height:100%;

  display:block;

  object-fit:cover;
}


.archive-file-meta{
  padding:14px 18px 0;

  display:flex;
  gap:7px;
  flex-wrap:wrap;
}


.archive-file-meta span{
  padding:5px 8px;

  border:
    1px solid rgba(255,255,255,.09);

  color:#9d8e98;

  font-size:6px;
  font-weight:800;
  letter-spacing:.10em;
}


.archive-file-codename{
  margin:20px 18px 0;

  padding-left:12px;

  border-left:
    2px solid var(--pink);

  display:grid;
  gap:3px;
}


.archive-file-codename small{
  color:#78656f;

  font-size:6px;
  letter-spacing:.14em;
}


.archive-file-codename strong{
  color:var(--pink);

  font-family:Georgia,serif;
  font-size:14px;
}


.archive-file h2{
  margin:17px 18px 0;

  font-family:Georgia,serif;

  font-size:
    clamp(26px,5vw,48px);

  line-height:1;
}


.archive-file-summary{
  margin:17px 18px 0;

  color:#b7a5b0;

  font-size:11px;
  font-weight:700;
  line-height:1.75;
}


.archive-file-details{
  margin:18px 18px 0;

  padding:17px;

  border:
    1px solid rgba(255,255,255,.07);

  color:#a2929d;

  background:
    rgba(255,255,255,.015);

  font-size:10px;
  line-height:1.9;

  white-space:pre-wrap;
}


.archive-file-tags{
  padding:15px 18px 0;

  display:flex;
  gap:6px;
  flex-wrap:wrap;
}


.archive-file-tags span{
  padding:5px 8px;

  color:#d49ab9;

  border:
    1px solid rgba(240,84,162,.19);

  background:
    rgba(240,84,162,.04);

  font-size:6px;
  font-weight:800;
  letter-spacing:.08em;
}


.archive-file-footer{
  margin-top:20px;

  min-height:56px;

  padding:12px 18px;

  border-top:
    1px solid var(--line);

  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;

  color:#70636b;

  font-size:6px;
  letter-spacing:.12em;
}


.archive-file-footer strong{
  color:var(--green);
}


.archive-footer{
  margin-top:16px;

  min-height:56px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;

  border-top:
    1px solid var(--line);

  color:#6d6269;

  font-size:6px;
  letter-spacing:.13em;
}


.archive-footer strong{
  color:#94818d;
}


@media (max-width:800px){

  body{
    background:
      linear-gradient(
        180deg,
        rgba(8,7,10,.86),
        rgba(8,7,10,.97)
      ),
      url("/assets/images/palmu/palmu-bg-v34-mobile.png?v=3.4.0")
      center top / cover fixed no-repeat;
  }


  .archive-header,
  .archive-tabs,
  .archive-main{
    width:min(
      100% - 20px,
      1480px
    );
  }


  .archive-header{
    min-height:86px;
  }


  .archive-brand-mark{
    width:42px;
    height:42px;

    font-size:21px;
  }


  .archive-brand-copy strong{
    font-size:14px;
  }


  .archive-header-status{
    display:none;
  }


  .archive-tabs-brand{
    display:none;
  }


  .archive-tabs > a,
  .archive-tabs > span:not(.archive-tabs-brand){
    min-height:43px;
    padding:0 14px;
  }


  .archive-main{
    padding-top:14px;
  }


  .archive-hero{
    grid-template-columns:1fr;
  }


  .archive-hero-copy{
    padding:34px 22px;
  }


  .archive-hero-display{
    min-height:210px;

    border-top:
      1px solid var(--line);
  }


  .archive-radar{
    width:170px;
  }


  .archive-command-head,
  .archive-timeline-head{
    min-height:64px;
    padding:12px;
  }


  .archive-timeline-status{
    display:none;
  }


  .archive-timeline{
    padding:0 12px 22px;
  }


  .archive-year-records{
    padding-left:28px;
  }


  .archive-year-records::before{
    left:7px;
  }


  .archive-record{
    grid-template-columns:1fr;
    gap:10px;

    min-height:0;

    padding:14px;
  }


  .archive-record::before{
    left:-26px;
    top:24px;
  }


  .archive-record-date{
    display:flex;
    align-items:baseline;
    gap:7px;
  }


  .archive-record-date strong{
    font-size:15px;
  }


  .archive-file{
    max-height:
      calc(100vh - 20px);
  }


  .archive-modal{
    padding:10px;
  }


  .archive-footer{
    flex-wrap:wrap;
    justify-content:center;

    padding:15px 0;

    text-align:center;
  }

}


@media (max-width:460px){

  .archive-brand-copy span{
    display:none;
  }


  .archive-category-filters,
  .archive-year-filters{
    padding-left:8px;
    padding-right:8px;
  }


  .archive-category-filters button,
  .archive-year-filters button{
    min-height:32px;
    padding:0 11px;
  }


  .archive-hero h1{
    font-size:44px;
  }


  .archive-year-title{
    font-size:27px;
  }

}


/* =========================================================
   YUKINON PALMU OPERATION ARCHIVE TACTICAL UI CSS V1.1.0
   ========================================================= */


/* =========================================================
   GLOBAL TACTICAL LAYER
   ========================================================= */

body.archive-phase3{
  position:relative;
}


.archive-phase3-scan{
  position:fixed;

  inset:-20% 0 auto;

  height:34%;

  z-index:500;

  pointer-events:none;

  opacity:.14;

  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(240,84,162,.08) 45%,
      rgba(255,255,255,.11) 49%,
      rgba(240,84,162,.16) 50%,
      transparent 54%
    );

  animation:
    archivePhase3Scan
    9s linear infinite;
}


@keyframes archivePhase3Scan{

  0%{
    transform:
      translateY(-120vh);
  }

  100%{
    transform:
      translateY(430vh);
  }

}


.archive-phase3-corners{
  position:fixed;

  inset:0;

  z-index:490;

  pointer-events:none;
}


.archive-phase3-corners i{
  width:30px;
  height:30px;

  position:absolute;

  opacity:.27;
}


.archive-phase3-corners i:nth-child(1){
  top:12px;
  left:12px;

  border-top:
    1px solid var(--pink);

  border-left:
    1px solid var(--pink);
}


.archive-phase3-corners i:nth-child(2){
  top:12px;
  right:12px;

  border-top:
    1px solid var(--pink);

  border-right:
    1px solid var(--pink);
}


.archive-phase3-corners i:nth-child(3){
  bottom:12px;
  left:12px;

  border-bottom:
    1px solid var(--pink);

  border-left:
    1px solid var(--pink);
}


.archive-phase3-corners i:nth-child(4){
  right:12px;
  bottom:12px;

  border-right:
    1px solid var(--pink);

  border-bottom:
    1px solid var(--pink);
}


/* =========================================================
   TOP SECURITY BAR
   ========================================================= */

.archive-phase3-security{
  width:min(
    1480px,
    calc(100% - 32px)
  );

  min-height:28px;

  margin:0 auto;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;

  border-bottom:
    1px solid
    rgba(240,84,162,.17);

  color:#756872;

  font-family:
    monospace;

  font-size:7px;
  font-weight:700;
  letter-spacing:.11em;
}


.archive-phase3-security strong{
  color:#e56aa7;

  font-weight:900;
}


.archive-phase3-security .phase3-live{
  display:inline-flex;
  align-items:center;
  gap:6px;
}


.archive-phase3-security .phase3-live::before{
  content:"";

  width:5px;
  height:5px;

  border-radius:50%;

  background:#7be1b5;

  box-shadow:
    0 0 9px #7be1b5;
}


/* =========================================================
   HERO ENHANCEMENT
   ========================================================= */

.archive-hero{
  isolation:isolate;
}


.archive-hero::after{
  content:"";

  position:absolute;

  inset:0;

  z-index:0;

  pointer-events:none;

  background:
    repeating-linear-gradient(
      135deg,
      transparent 0,
      transparent 22px,
      rgba(255,255,255,.010) 23px,
      rgba(255,255,255,.010) 24px
    );
}


.archive-classified-stamp{
  position:absolute;

  top:28px;
  right:30px;

  z-index:4;

  padding:7px 10px;

  border:
    1px solid
    rgba(240,84,162,.47);

  color:
    rgba(245,105,176,.76);

  background:
    rgba(7,5,8,.40);

  font-family:
    monospace;

  font-size:
    clamp(7px,1vw,10px);

  font-weight:900;
  letter-spacing:.18em;

  transform:
    rotate(2deg);

  box-shadow:
    inset 0 0 16px
    rgba(240,84,162,.05);
}


.archive-radar{
  overflow:hidden;
}


.archive-radar::after{
  content:"";

  position:absolute;

  width:50%;
  height:50%;

  top:0;
  left:50%;

  transform-origin:
    left bottom;

  background:
    linear-gradient(
      120deg,
      rgba(240,84,162,.20),
      transparent 67%
    );

  animation:
    archiveRadarSweep
    5s linear infinite;
}


@keyframes archiveRadarSweep{

  to{
    transform:
      rotate(360deg);
  }

}


/* =========================================================
   INTEL STRIP
   ========================================================= */

.archive-intel-strip{
  margin-top:16px;

  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:8px;
}


.archive-intel-cell{
  min-height:82px;

  position:relative;

  overflow:hidden;

  padding:13px 15px;

  border:
    1px solid
    rgba(255,255,255,.075);

  background:
    linear-gradient(
      120deg,
      rgba(17,11,19,.94),
      rgba(8,7,10,.92)
    );

  box-shadow:
    0 15px 40px
    rgba(0,0,0,.18);
}


.archive-intel-cell::before{
  content:"";

  position:absolute;

  top:0;
  left:0;

  width:42%;
  height:1px;

  background:
    linear-gradient(
      90deg,
      var(--pink),
      transparent
    );
}


.archive-intel-cell small{
  display:block;

  color:#73666f;

  font-size:6px;
  font-weight:900;
  letter-spacing:.18em;
}


.archive-intel-cell strong{
  display:block;

  margin-top:6px;

  color:#eee5ea;

  font-family:
    Georgia,
    serif;

  font-size:
    clamp(18px,2.5vw,28px);
}


.archive-intel-cell span{
  display:block;

  margin-top:3px;

  color:#a14e79;

  font-family:
    monospace;

  font-size:6px;
  letter-spacing:.12em;
}


/* =========================================================
   YEAR HEADERS
   ========================================================= */

.archive-year-title{
  position:relative;
}


.archive-year-count{
  padding:5px 7px;

  border:
    1px solid
    rgba(240,84,162,.16);

  color:#a26182;

  background:
    rgba(240,84,162,.025);

  font-family:
    monospace;

  font-size:6px;
  font-weight:800;
  letter-spacing:.08em;
}


/* =========================================================
   RECORD COMMAND LINE
   ========================================================= */

.archive-record{
  overflow:hidden;
}


.archive-record-commandline{
  margin-bottom:8px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}


.archive-record-commandline span{
  color:#8f7c88;

  font-family:
    monospace;

  font-size:7px;
  font-weight:800;
  letter-spacing:.08em;
}


.archive-record-commandline b{
  color:#7be1b5;

  font-family:
    monospace;

  font-size:6px;
  letter-spacing:.11em;
}


.archive-record-commandline b::before{
  content:"●";

  margin-right:5px;

  font-size:5px;
}


/* =========================================================
   RECORD IMAGE
   ========================================================= */

.archive-record.has-operation-image{
  grid-template-columns:
    minmax(100px,.24fr)
    minmax(150px,.44fr)
    minmax(0,1.32fr);
}


.archive-record-visual{
  min-height:96px;

  position:relative;

  overflow:hidden;

  border:
    1px solid
    rgba(255,255,255,.07);

  background:#070608;
}


.archive-record-visual::after{
  content:"";

  position:absolute;

  inset:0;

  pointer-events:none;

  background:
    linear-gradient(
      180deg,
      transparent 55%,
      rgba(5,3,6,.66)
    );
}


.archive-record-visual img{
  width:100%;
  height:100%;

  min-height:96px;

  display:block;

  object-fit:cover;

  filter:
    saturate(.82)
    contrast(1.05);
}


/* =========================================================
   MAJOR MISSION FILE
   ========================================================= */

.archive-record.is-major{
  min-height:190px;

  border-color:
    rgba(240,84,162,.52);

  box-shadow:
    inset 3px 0 0
    rgba(240,84,162,.52);
}


.archive-record.is-major h3{
  font-size:
    clamp(22px,3vw,32px);
}


.archive-record.is-major
.archive-record-visual{
  min-height:150px;
}


.archive-record.is-major
.archive-record-visual img{
  min-height:150px;
}


.archive-major-stamp{
  position:absolute;

  right:10px;
  bottom:9px;

  z-index:3;

  padding:4px 6px;

  border:
    1px solid
    rgba(240,84,162,.32);

  color:
    rgba(240,84,162,.46);

  font-family:
    monospace;

  font-size:6px;
  font-weight:900;
  letter-spacing:.13em;

  pointer-events:none;

  transform:
    rotate(-2deg);
}


/* =========================================================
   IMPORTANT RECORD
   ========================================================= */

.archive-record.is-important{
  border-left:
    2px solid
    rgba(230,193,111,.55);
}


.archive-record.is-important
.archive-record-commandline b{
  color:#e6c16f;
}


/* =========================================================
   CATEGORY ACCENTS
   ========================================================= */

.archive-record[
  data-operation-category="SPECIAL_FORCES"
]{
  box-shadow:
    inset 3px 0 0
    rgba(240,84,162,.55);
}


.archive-record[
  data-operation-category="SYSTEM"
]
.archive-record-category{
  color:#85c8ff;

  border-color:
    rgba(96,174,238,.25);

  background:
    rgba(96,174,238,.04);
}


.archive-record[
  data-operation-category="MILESTONE"
]
.archive-record-category{
  color:#e9c673;

  border-color:
    rgba(233,198,115,.25);

  background:
    rgba(233,198,115,.04);
}


/* =========================================================
   OPERATION FILE MODAL
   ========================================================= */

.archive-file{
  position:relative;
}


.archive-file::before{
  content:"";

  position:absolute;

  top:0;
  left:0;
  right:0;

  height:2px;

  z-index:4;

  background:
    repeating-linear-gradient(
      90deg,
      var(--pink) 0,
      var(--pink) 14px,
      transparent 14px,
      transparent 22px
    );
}


.archive-file-security{
  min-height:34px;

  padding:7px 16px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  border-bottom:
    1px solid
    rgba(255,255,255,.07);

  color:#786c74;

  background:
    rgba(240,84,162,.025);

  font-family:
    monospace;

  font-size:7px;
  letter-spacing:.09em;
}


.archive-file-security strong{
  color:#df609f;
}


.archive-file-security span:last-child{
  color:#7be1b5;
}


/* =========================================================
   LOADING / ONLINE FEEL
   ========================================================= */

.archive-timeline-shell{
  position:relative;
}


.archive-timeline-shell::before{
  content:"DATABASE // ONLINE";

  position:absolute;

  top:17px;
  right:18px;

  color:
    rgba(123,225,181,.32);

  font-family:
    monospace;

  font-size:6px;
  letter-spacing:.1em;

  pointer-events:none;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width:900px){

  .archive-intel-strip{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }


  .archive-record.has-operation-image{
    grid-template-columns:
      minmax(90px,.30fr)
      minmax(0,.70fr);
  }


  .archive-record.has-operation-image
  .archive-record-visual{
    grid-column:
      1 / -1;

    min-height:170px;

    order:-1;
  }


  .archive-record.has-operation-image
  .archive-record-visual img{
    min-height:170px;
  }

}


@media (max-width:600px){

  .archive-phase3-security{
    width:
      calc(100% - 20px);

    min-height:24px;

    overflow:hidden;
  }


  .archive-phase3-security span:first-child{
    display:none;
  }


  .archive-intel-strip{
    grid-template-columns:
      repeat(2,minmax(0,1fr));

    gap:6px;
  }


  .archive-intel-cell{
    min-height:70px;

    padding:10px;
  }


  .archive-record.has-operation-image{
    grid-template-columns:1fr;
  }


  .archive-record.has-operation-image
  .archive-record-visual{
    grid-column:auto;

    min-height:160px;
  }


  .archive-record.has-operation-image
  .archive-record-visual img{
    min-height:160px;
  }


  .archive-record-commandline{
    align-items:flex-start;
    flex-direction:column;
    gap:4px;
  }


  .archive-classified-stamp{
    top:13px;
    right:13px;

    font-size:6px;
  }


  .archive-timeline-shell::before{
    display:none;
  }

}


@media (
  prefers-reduced-motion:
  reduce
){

  .archive-phase3-scan,
  .archive-radar::after{
    animation:none !important;
  }

}


/* =========================================================
   YUKINON PALMU OPERATION ARCHIVE
   MAJOR MISSION FILE CSS V1.2.0
   ========================================================= */

.archive-record.is-major.phase31-major{
  padding:0;
  display:block;
  position:relative;
  overflow:hidden;
  border:1px solid rgba(240,84,162,.52);
  background:
    linear-gradient(
      145deg,
      rgba(23,11,22,.98),
      rgba(7,6,9,.99)
    );
  box-shadow:
    0 26px 80px rgba(0,0,0,.30),
    inset 3px 0 0 rgba(240,84,162,.56);
}

.archive-record.is-major.phase31-major::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0,
      transparent 32px,
      rgba(255,255,255,.011) 33px,
      rgba(255,255,255,.011) 34px
    );
}

.archive-major-keyvisual{
  min-height:310px;
  position:relative;
  z-index:1;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  border-bottom:1px solid rgba(240,84,162,.25);
  background:
    radial-gradient(
      circle at 78% 22%,
      rgba(240,84,162,.16),
      transparent 38%
    ),
    linear-gradient(
      120deg,
      #120b12,
      #060508
    );
  isolation:isolate;
}

.archive-major-keyvisual.has-image{
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}

.archive-major-keyvisual::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(
      90deg,
      rgba(5,4,7,.96) 0%,
      rgba(5,4,7,.83) 35%,
      rgba(5,4,7,.28) 67%,
      rgba(5,4,7,.54) 100%
    ),
    linear-gradient(
      0deg,
      rgba(5,4,7,.98),
      transparent 70%
    );
}

.archive-major-keyvisual::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
  background:
    repeating-linear-gradient(
      180deg,
      transparent 0,
      transparent 3px,
      rgba(255,255,255,.012) 4px
    );
}

.archive-major-keyvisual-content{
  width:min(760px,78%);
  position:relative;
  z-index:3;
  padding:32px 34px 34px;
}

.archive-major-security{
  margin-bottom:15px;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.archive-major-security span{
  min-height:24px;
  padding:0 8px;
  display:inline-flex;
  align-items:center;
  border:1px solid rgba(255,255,255,.10);
  color:#95838e;
  background:rgba(8,6,9,.45);
  font-family:monospace;
  font-size:7px;
  font-weight:800;
  letter-spacing:.09em;
}

.archive-major-security .archive-major-priority{
  color:#f079b5;
  border-color:rgba(240,84,162,.44);
  background:rgba(240,84,162,.07);
}

.archive-major-keyvisual h2{
  max-width:720px;
  margin:0;
  color:#f5edf2;
  font-family:Georgia,serif;
  font-size:clamp(30px,5vw,58px);
  font-weight:600;
  line-height:.99;
  letter-spacing:-.025em;
  text-wrap:balance;
  text-shadow:0 4px 24px rgba(0,0,0,.72);
}

.archive-major-codename{
  margin-top:12px;
  color:#eb63a7;
  font-family:monospace;
  font-size:clamp(9px,1.2vw,12px);
  font-weight:800;
  letter-spacing:.14em;
}

.archive-major-summary{
  max-width:620px;
  margin-top:16px;
  color:#b5a5ae;
  font-size:12px;
  line-height:1.8;
}

.archive-major-side-panel{
  width:190px;
  position:absolute;
  top:18px;
  right:18px;
  z-index:4;
  padding:13px;
  border:1px solid rgba(240,84,162,.26);
  background:rgba(5,4,7,.68);
  backdrop-filter:blur(8px);
}

.archive-major-side-panel small{
  display:block;
  color:#776873;
  font-family:monospace;
  font-size:6px;
  letter-spacing:.13em;
}

.archive-major-side-panel strong{
  display:block;
  margin-top:4px;
  color:#e668a8;
  font-family:monospace;
  font-size:11px;
  letter-spacing:.08em;
}

.archive-major-side-line{
  margin-top:10px;
  padding-top:8px;
  display:flex;
  justify-content:space-between;
  gap:8px;
  border-top:1px solid rgba(255,255,255,.07);
  color:#91818b;
  font-family:monospace;
  font-size:6px;
}

.archive-major-side-line b{
  color:#d8cbd2;
  font-weight:700;
}

.archive-major-priority-stamp{
  position:absolute;
  right:28px;
  bottom:24px;
  z-index:5;
  padding:9px 13px;
  border:2px solid rgba(240,84,162,.36);
  color:rgba(240,84,162,.46);
  font-family:monospace;
  font-size:clamp(8px,1.2vw,12px);
  font-weight:900;
  letter-spacing:.15em;
  transform:rotate(-3deg);
  pointer-events:none;
}

.archive-record.is-major.phase31-major
> .archive-record-date,
.archive-record.is-major.phase31-major
> .archive-record-body,
.archive-record.is-major.phase31-major
> .archive-record-visual{
  position:relative;
  z-index:3;
}

.archive-record.is-major.phase31-major
> .archive-record-date{
  margin:18px 28px 0;
}

.archive-record.is-major.phase31-major
> .archive-record-body{
  padding:18px 28px 28px;
}

.archive-record.is-major.phase31-major
> .archive-record-visual{
  display:none;
}

.archive-year.phase31-sector{
  position:relative;
}

.archive-year.phase31-sector::before{
  content:attr(data-phase31-year);
  position:absolute;
  top:-6px;
  right:0;
  z-index:0;
  color:rgba(240,84,162,.028);
  font-family:Georgia,serif;
  font-size:clamp(72px,14vw,180px);
  font-weight:700;
  line-height:.8;
  pointer-events:none;
}

.archive-sector-bar{
  min-height:34px;
  margin:0 0 12px;
  padding:0 12px;
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-left:2px solid rgba(240,84,162,.48);
  border-bottom:1px solid rgba(255,255,255,.06);
  color:#80727a;
  background:
    linear-gradient(
      90deg,
      rgba(240,84,162,.05),
      transparent 65%
    );
  font-family:monospace;
  font-size:7px;
  letter-spacing:.09em;
}

.archive-sector-bar strong{
  color:#d65d99;
  font-size:7px;
}

.archive-status-matrix{
  margin-top:12px;
  display:flex;
  gap:5px;
  flex-wrap:wrap;
}

.archive-status-chip{
  min-height:22px;
  padding:0 7px;
  display:inline-flex;
  align-items:center;
  border:1px solid rgba(255,255,255,.08);
  color:#776c73;
  background:rgba(255,255,255,.018);
  font-family:monospace;
  font-size:6px;
  font-weight:800;
  letter-spacing:.08em;
}

.archive-status-chip.is-active{
  color:#7ee2b7;
  border-color:rgba(92,212,157,.28);
  background:rgba(92,212,157,.035);
}

.archive-status-chip.is-priority{
  color:#ef75b2;
  border-color:rgba(240,84,162,.34);
  background:rgba(240,84,162,.05);
}

.archive-status-chip.is-classified{
  color:#e6c06f;
  border-color:rgba(230,192,111,.27);
  background:rgba(230,192,111,.035);
}

.archive-phase31-matrix{
  margin:0 0 18px;
  display:grid;
  grid-template-columns:
    repeat(4,minmax(0,1fr));
  border-top:1px solid rgba(255,255,255,.07);
  border-bottom:1px solid rgba(255,255,255,.07);
}

.archive-phase31-matrix-cell{
  min-width:0;
  padding:12px 14px;
  border-right:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.012);
}

.archive-phase31-matrix-cell:last-child{
  border-right:0;
}

.archive-phase31-matrix-cell small{
  display:block;
  color:#6d6268;
  font-family:monospace;
  font-size:6px;
  letter-spacing:.11em;
}

.archive-phase31-matrix-cell strong{
  display:block;
  margin-top:5px;
  overflow:hidden;
  color:#d7cbd1;
  font-family:monospace;
  font-size:9px;
  white-space:nowrap;
  text-overflow:ellipsis;
}

@media (max-width:760px){

  .archive-major-keyvisual{
    min-height:360px;
  }

  .archive-major-keyvisual-content{
    width:100%;
    padding:
      112px
      18px
      22px;
  }

  .archive-major-side-panel{
    width:calc(100% - 28px);
    top:14px;
    right:14px;
    left:14px;
  }

  .archive-major-priority-stamp{
    display:none;
  }

  .archive-phase31-matrix{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .archive-phase31-matrix-cell:nth-child(2){
    border-right:0;
  }

  .archive-phase31-matrix-cell:nth-child(-n+2){
    border-bottom:
      1px solid
      rgba(255,255,255,.06);
  }

}

@media (max-width:520px){

  .archive-major-keyvisual h2{
    font-size:
      clamp(27px,10vw,42px);
  }

  .archive-major-summary{
    font-size:11px;
  }

  .archive-record.is-major.phase31-major
  > .archive-record-date{
    margin:14px 16px 0;
  }

  .archive-record.is-major.phase31-major
  > .archive-record-body{
    padding:14px 16px 20px;
  }

  .archive-sector-bar{
    align-items:flex-start;
    flex-direction:column;
    padding:8px 10px;
  }

}


/* =========================================================
   YUKINON PALMU OPERATION ARCHIVE
   OPERATION STATUS SYSTEM CSS V1.3.0
   ========================================================= */


/* ACTIVE */

.archive-record[
  data-operation-status="ACTIVE"
]{
  border-color:
    rgba(94,220,164,.30);
}


.archive-record[
  data-operation-status="ACTIVE"
]
.archive-record-commandline b,
.archive-record[
  data-operation-status="ACTIVE"
]
.archive-status-chip.is-operation-status{
  color:#76e5b2;
}


.archive-record[
  data-operation-status="ACTIVE"
]
.archive-status-chip.is-operation-status{
  border-color:
    rgba(94,220,164,.34);

  background:
    rgba(94,220,164,.05);
}


/* COMPLETE */

.archive-record[
  data-operation-status="COMPLETE"
]{
  border-color:
    rgba(102,190,240,.26);
}


.archive-record[
  data-operation-status="COMPLETE"
]
.archive-record-commandline b,
.archive-record[
  data-operation-status="COMPLETE"
]
.archive-status-chip.is-operation-status{
  color:#7ecdf4;
}


.archive-record[
  data-operation-status="COMPLETE"
]
.archive-status-chip.is-operation-status{
  border-color:
    rgba(102,190,240,.30);

  background:
    rgba(102,190,240,.045);
}


/* CLASSIFIED */

.archive-record[
  data-operation-status="CLASSIFIED"
]{
  border-color:
    rgba(230,192,111,.34);
}


.archive-record[
  data-operation-status="CLASSIFIED"
]
.archive-record-commandline b,
.archive-record[
  data-operation-status="CLASSIFIED"
]
.archive-status-chip.is-operation-status{
  color:#e8c473;
}


.archive-record[
  data-operation-status="CLASSIFIED"
]
.archive-status-chip.is-operation-status{
  border-color:
    rgba(230,192,111,.32);

  background:
    rgba(230,192,111,.045);
}


/* ARCHIVED */

.archive-record[
  data-operation-status="ARCHIVED"
]
.archive-record-commandline b,
.archive-record[
  data-operation-status="ARCHIVED"
]
.archive-status-chip.is-operation-status{
  color:#91838c;
}


/* MAJOR mission status accent */

.archive-record[
  data-operation-status="ACTIVE"
]
.archive-major-side-panel strong{
  color:#76e5b2;
}


.archive-record[
  data-operation-status="COMPLETE"
]
.archive-major-side-panel strong{
  color:#7ecdf4;
}


.archive-record[
  data-operation-status="CLASSIFIED"
]
.archive-major-side-panel strong{
  color:#e8c473;
}


/* Modal */

.archive-file[
  data-operation-status="ACTIVE"
]
[data-phase3-file-status]{
  color:#76e5b2;
}


.archive-file[
  data-operation-status="COMPLETE"
]
[data-phase3-file-status]{
  color:#7ecdf4;
}


.archive-file[
  data-operation-status="CLASSIFIED"
]
[data-phase3-file-status]{
  color:#e8c473;
}


.archive-file[
  data-operation-status="ARCHIVED"
]
[data-phase3-file-status]{
  color:#91838c;
}


.archive-file[
  data-operation-status="ACTIVE"
]
.archive-phase31-status-value{
  color:#76e5b2;
}


.archive-file[
  data-operation-status="COMPLETE"
]
.archive-phase31-status-value{
  color:#7ecdf4;
}


.archive-file[
  data-operation-status="CLASSIFIED"
]
.archive-phase31-status-value{
  color:#e8c473;
}


.archive-file[
  data-operation-status="ARCHIVED"
]
.archive-phase31-status-value{
  color:#91838c;
}


/* YUKINON PALMU OPERATION DATABASE FILTER CSS V1.4.0 */


/* =========================================================
   DATABASE FILTER
   ========================================================= */

.archive-database-filter{

  width:min(
    1480px,
    calc(100% - 32px)
  );

  margin:
    18px
    auto
    16px;

  position:relative;

  z-index:20;

  overflow:hidden;

  border:
    1px solid
    rgba(255,255,255,.075);

  background:
    linear-gradient(
      135deg,
      rgba(18,11,18,.97),
      rgba(7,6,9,.98)
    );

  box-shadow:
    0 20px 60px
    rgba(0,0,0,.22);
}


.archive-database-filter::before{

  content:"";

  position:absolute;

  top:0;
  left:0;

  width:42%;
  height:1px;

  background:
    linear-gradient(
      90deg,
      var(--pink),
      transparent
    );
}


.archive-filter-header{

  min-height:54px;

  padding:
    12px
    15px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:14px;

  border-bottom:
    1px solid
    rgba(255,255,255,.06);

  background:
    rgba(240,84,162,.018);
}


.archive-filter-heading{

  min-width:0;
}


.archive-filter-heading small{

  display:block;

  color:#756972;

  font-family:
    monospace;

  font-size:6px;

  font-weight:900;

  letter-spacing:.16em;
}


.archive-filter-heading strong{

  display:block;

  margin-top:4px;

  color:#e7dce2;

  font-family:
    Georgia,
    serif;

  font-size:
    clamp(14px,2vw,20px);

  font-weight:600;

  letter-spacing:.01em;
}


.archive-filter-result{

  flex:0 0 auto;

  color:#c85f94;

  font-family:
    monospace;

  font-size:7px;

  font-weight:900;

  letter-spacing:.10em;
}


/* =========================================================
   CONTROLS
   ========================================================= */

.archive-filter-controls{

  padding:14px;

  display:grid;

  grid-template-columns:
    minmax(220px,1.8fr)
    repeat(3,minmax(130px,.75fr))
    auto;

  gap:8px;

  align-items:end;
}


.archive-filter-field{

  min-width:0;

  display:block;
}


.archive-filter-field > span{

  display:block;

  margin-bottom:5px;

  color:#776a73;

  font-family:
    monospace;

  font-size:6px;

  font-weight:900;

  letter-spacing:.13em;
}


.archive-filter-input,
.archive-filter-select{

  width:100%;
  height:38px;

  padding:
    0
    11px;

  border:
    1px solid
    rgba(255,255,255,.085);

  border-radius:0;

  outline:none;

  color:#ded3d9;

  background:
    rgba(5,4,7,.72);

  font:inherit;

  font-size:11px;

  transition:
    border-color .16s ease,
    background .16s ease,
    box-shadow .16s ease;
}


.archive-filter-input{

  padding-left:34px;
}


.archive-filter-search-wrap{

  position:relative;
}


.archive-filter-search-wrap::before{

  content:"⌕";

  position:absolute;

  left:11px;
  bottom:8px;

  z-index:2;

  color:#bb5689;

  font-family:
    monospace;

  font-size:16px;

  line-height:1;

  pointer-events:none;
}


.archive-filter-input::placeholder{

  color:#5f555b;
}


.archive-filter-input:focus,
.archive-filter-select:focus{

  border-color:
    rgba(240,84,162,.48);

  background:
    rgba(16,8,14,.90);

  box-shadow:
    0 0 0 2px
    rgba(240,84,162,.045);
}


.archive-filter-select{

  appearance:none;

  padding-right:30px;

  cursor:pointer;

  background-image:
    linear-gradient(
      45deg,
      transparent 50%,
      #9b4772 50%
    ),
    linear-gradient(
      135deg,
      #9b4772 50%,
      transparent 50%
    );

  background-position:
    calc(100% - 15px) 16px,
    calc(100% - 10px) 16px;

  background-size:
    5px 5px,
    5px 5px;

  background-repeat:no-repeat;
}


.archive-filter-reset{

  height:38px;

  padding:
    0
    15px;

  border:
    1px solid
    rgba(240,84,162,.24);

  color:#d7629d;

  background:
    rgba(240,84,162,.035);

  font-family:
    monospace;

  font-size:7px;

  font-weight:900;

  letter-spacing:.11em;

  white-space:nowrap;

  cursor:pointer;

  transition:
    border-color .16s ease,
    background .16s ease,
    color .16s ease;
}


.archive-filter-reset:hover{

  color:#f18cbc;

  border-color:
    rgba(240,84,162,.52);

  background:
    rgba(240,84,162,.075);
}


/* =========================================================
   DATABASE STATUS
   ========================================================= */

.archive-filter-footer{

  min-height:30px;

  padding:
    6px
    14px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:12px;

  border-top:
    1px solid
    rgba(255,255,255,.05);

  color:#665b62;

  font-family:
    monospace;

  font-size:6px;

  letter-spacing:.08em;
}


.archive-filter-footer strong{

  color:#77ddb1;

  font-weight:800;
}


.archive-filter-footer strong::before{

  content:"●";

  margin-right:5px;

  font-size:5px;
}


/* =========================================================
   FILTER STATE
   ========================================================= */

.archive-record.is-filter-hidden{

  display:none !important;
}


.archive-year.is-filter-empty{

  display:none !important;
}


.archive-filter-empty-message{

  display:none;

  width:min(
    1480px,
    calc(100% - 32px)
  );

  margin:
    12px
    auto
    20px;

  padding:
    28px
    18px;

  border:
    1px dashed
    rgba(240,84,162,.20);

  color:#776970;

  background:
    rgba(240,84,162,.018);

  text-align:center;

  font-family:
    monospace;

  font-size:8px;

  letter-spacing:.10em;
}


.archive-filter-empty-message.is-visible{

  display:block;
}


.archive-filter-empty-message strong{

  display:block;

  margin-bottom:7px;

  color:#d06098;

  font-size:10px;
}


/* =========================================================
   ACTIVE FILTER INDICATOR
   ========================================================= */

.archive-database-filter.has-active-filter{

  border-color:
    rgba(240,84,162,.20);
}


.archive-database-filter.has-active-filter
.archive-filter-header{

  background:
    linear-gradient(
      90deg,
      rgba(240,84,162,.06),
      rgba(240,84,162,.012)
    );
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width:1050px){

  .archive-filter-controls{

    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }


  .archive-filter-search-wrap{

    grid-column:
      1 / -1;
  }


  .archive-filter-reset{

    width:100%;
  }

}


@media (max-width:620px){

  .archive-database-filter{

    width:
      calc(100% - 20px);

    margin-top:12px;
  }


  .archive-filter-header{

    align-items:flex-start;

    flex-direction:column;
  }


  .archive-filter-controls{

    grid-template-columns:1fr;
  }


  .archive-filter-search-wrap{

    grid-column:auto;
  }


  .archive-filter-footer{

    align-items:flex-start;

    flex-direction:column;
  }


  .archive-filter-empty-message{

    width:
      calc(100% - 20px);
  }

}


/* YUKINON PALMU OPERATION NAVIGATION SHARE CSS V1.5.0 */


/* =========================================================
   DATABASE INDEX
   ========================================================= */

.archive-navigation-index{

  width:min(
    1480px,
    calc(100% - 32px)
  );

  margin:
    0
    auto
    18px;

  position:relative;

  z-index:19;

  overflow:hidden;

  border:
    1px solid
    rgba(255,255,255,.065);

  background:
    linear-gradient(
      135deg,
      rgba(14,9,15,.96),
      rgba(6,5,8,.98)
    );
}


.archive-navigation-index::before{

  content:"";

  position:absolute;

  top:0;
  left:0;

  width:32%;
  height:1px;

  background:
    linear-gradient(
      90deg,
      rgba(240,84,162,.72),
      transparent
    );
}


.archive-navigation-header{

  min-height:42px;

  padding:
    9px
    13px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:12px;

  border-bottom:
    1px solid
    rgba(255,255,255,.055);
}


.archive-navigation-header small{

  display:block;

  color:#71656d;

  font-family:
    monospace;

  font-size:6px;

  font-weight:900;

  letter-spacing:.15em;
}


.archive-navigation-header strong{

  color:#c65a91;

  font-family:
    monospace;

  font-size:7px;

  letter-spacing:.11em;
}


.archive-navigation-section{

  padding:
    11px
    13px;

  border-bottom:
    1px solid
    rgba(255,255,255,.045);
}


.archive-navigation-section:last-child{

  border-bottom:0;
}


.archive-navigation-label{

  margin-bottom:7px;

  color:#655a61;

  font-family:
    monospace;

  font-size:6px;

  font-weight:900;

  letter-spacing:.14em;
}


.archive-navigation-items{

  display:flex;

  flex-wrap:wrap;

  gap:5px;
}


/* =========================================================
   NAV BUTTONS
   ========================================================= */

.archive-nav-button{

  min-height:27px;

  padding:
    0
    9px;

  display:inline-flex;

  align-items:center;

  gap:7px;

  border:
    1px solid
    rgba(255,255,255,.075);

  color:#94848e;

  background:
    rgba(255,255,255,.016);

  font-family:
    monospace;

  font-size:7px;

  font-weight:800;

  letter-spacing:.07em;

  cursor:pointer;

  transition:
    color .15s ease,
    border-color .15s ease,
    background .15s ease;
}


.archive-nav-button:hover{

  color:#e276ac;

  border-color:
    rgba(240,84,162,.32);

  background:
    rgba(240,84,162,.045);
}


.archive-nav-button b{

  min-width:18px;

  padding:
    2px
    4px;

  color:#ba5487;

  background:
    rgba(240,84,162,.055);

  font-size:6px;

  text-align:center;
}


.archive-nav-button.is-current{

  color:#e27aad;

  border-color:
    rgba(240,84,162,.38);

  background:
    rgba(240,84,162,.06);
}


/* =========================================================
   MISSION SHARE
   ========================================================= */

.archive-mission-share{

  height:27px;

  margin-left:auto;

  padding:
    0
    9px;

  display:inline-flex;

  align-items:center;

  justify-content:center;

  border:
    1px solid
    rgba(240,84,162,.27);

  color:#d7619a;

  background:
    rgba(240,84,162,.035);

  font-family:
    monospace;

  font-size:6px;

  font-weight:900;

  letter-spacing:.09em;

  cursor:pointer;

  white-space:nowrap;

  transition:
    border-color .15s ease,
    color .15s ease,
    background .15s ease;
}


.archive-mission-share:hover{

  color:#f08cbd;

  border-color:
    rgba(240,84,162,.52);

  background:
    rgba(240,84,162,.075);
}


.archive-mission-share.is-copied{

  color:#79e0b3;

  border-color:
    rgba(89,211,157,.34);

  background:
    rgba(89,211,157,.045);
}


/* =========================================================
   DIRECT LINK TARGET
   ========================================================= */

.archive-record.is-direct-link-target{

  animation:
    archiveMissionTargetPulse
    1.15s ease
    2;
}


@keyframes archiveMissionTargetPulse{

  0%,
  100%{

    box-shadow:
      inherit;
  }

  50%{

    box-shadow:
      0 0 0 1px
      rgba(240,84,162,.72),
      0 0 34px
      rgba(240,84,162,.16);
  }

}


/* =========================================================
   URL STATUS
   ========================================================= */

.archive-navigation-url-status{

  padding:
    7px
    13px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:10px;

  color:#625860;

  background:
    rgba(255,255,255,.008);

  font-family:
    monospace;

  font-size:6px;

  letter-spacing:.08em;
}


.archive-navigation-url-status strong{

  color:#77dcb0;

  font-weight:800;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width:620px){

  .archive-navigation-index{

    width:
      calc(100% - 20px);
  }


  .archive-navigation-header{

    align-items:flex-start;

    flex-direction:column;
  }


  .archive-navigation-url-status{

    align-items:flex-start;

    flex-direction:column;
  }


  .archive-mission-share{

    margin-left:0;
  }

}


@media (
  prefers-reduced-motion:
  reduce
){

  .archive-record.is-direct-link-target{

    animation:none !important;
  }

}


/* YUKINON PALMU ANALYTICS COMMAND OVERVIEW CSS V1.6.0 */


/* =========================================================
   COMMAND OVERVIEW
   ========================================================= */

.archive-command-overview{

  width:min(
    1480px,
    calc(100% - 32px)
  );

  margin:
    18px
    auto;

  position:relative;

  z-index:21;

  overflow:hidden;

  border:
    1px solid
    rgba(255,255,255,.075);

  background:
    linear-gradient(
      135deg,
      rgba(17,10,18,.985),
      rgba(6,5,8,.99)
    );

  box-shadow:
    0 24px 70px
    rgba(0,0,0,.26);
}


.archive-command-overview::before{

  content:"";

  position:absolute;

  top:0;
  left:0;

  width:52%;
  height:1px;

  background:
    linear-gradient(
      90deg,
      rgba(240,84,162,.9),
      rgba(240,84,162,.18),
      transparent
    );
}


.archive-command-overview::after{

  content:"";

  position:absolute;

  top:0;
  right:0;

  width:1px;
  height:80px;

  background:
    linear-gradient(
      180deg,
      rgba(240,84,162,.52),
      transparent
    );
}


/* =========================================================
   HEADER
   ========================================================= */

.archive-command-header{

  min-height:62px;

  padding:
    13px
    16px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:16px;

  border-bottom:
    1px solid
    rgba(255,255,255,.06);

  background:
    linear-gradient(
      90deg,
      rgba(240,84,162,.045),
      transparent 48%
    );
}


.archive-command-title small{

  display:block;

  color:#756871;

  font-family:
    monospace;

  font-size:6px;

  font-weight:900;

  letter-spacing:.17em;
}


.archive-command-title strong{

  display:block;

  margin-top:5px;

  color:#eadde4;

  font-family:
    Georgia,
    serif;

  font-size:
    clamp(16px,2.1vw,22px);

  font-weight:600;

  letter-spacing:.015em;
}


.archive-command-state{

  flex:0 0 auto;

  display:flex;

  align-items:center;

  gap:7px;

  color:#75dbae;

  font-family:
    monospace;

  font-size:7px;

  font-weight:900;

  letter-spacing:.10em;
}


.archive-command-state::before{

  content:"";

  width:6px;
  height:6px;

  border-radius:50%;

  background:#75dbae;

  box-shadow:
    0 0 12px
    rgba(117,219,174,.55);
}


/* =========================================================
   METRIC CARDS
   ========================================================= */

.archive-command-metrics{

  padding:
    13px;

  display:grid;

  grid-template-columns:
    repeat(5,minmax(0,1fr));

  gap:7px;

  border-bottom:
    1px solid
    rgba(255,255,255,.05);
}


.archive-command-metric{

  min-width:0;

  min-height:84px;

  padding:
    11px;

  position:relative;

  overflow:hidden;

  border:
    1px solid
    rgba(255,255,255,.065);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.018),
      rgba(255,255,255,.006)
    );
}


.archive-command-metric::before{

  content:"";

  position:absolute;

  top:0;
  left:0;

  width:27px;
  height:1px;

  background:
    rgba(240,84,162,.55);
}


.archive-command-metric-label{

  display:block;

  color:#6c6068;

  font-family:
    monospace;

  font-size:6px;

  font-weight:900;

  letter-spacing:.13em;
}


.archive-command-metric-value{

  display:block;

  margin-top:8px;

  color:#e5d7df;

  font-family:
    monospace;

  font-size:
    clamp(20px,3vw,31px);

  font-weight:500;

  line-height:1;
}


.archive-command-metric-value.is-live{

  color:#d9669f;
}


.archive-command-metric-foot{

  display:block;

  margin-top:8px;

  color:#594f55;

  font-family:
    monospace;

  font-size:5px;

  letter-spacing:.08em;
}


/* =========================================================
   INTELLIGENCE GRID
   ========================================================= */

.archive-command-intelligence{

  padding:13px;

  display:grid;

  grid-template-columns:
    1fr
    1fr
    .9fr;

  gap:8px;
}


.archive-intel-panel{

  min-width:0;

  border:
    1px solid
    rgba(255,255,255,.06);

  background:
    rgba(255,255,255,.009);
}


.archive-intel-panel-header{

  min-height:34px;

  padding:
    8px
    10px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:10px;

  border-bottom:
    1px solid
    rgba(255,255,255,.05);
}


.archive-intel-panel-header strong{

  color:#b94f84;

  font-family:
    monospace;

  font-size:7px;

  letter-spacing:.11em;
}


.archive-intel-panel-header span{

  color:#5f555b;

  font-family:
    monospace;

  font-size:5px;

  letter-spacing:.08em;
}


.archive-intel-body{

  padding:10px;
}


/* =========================================================
   ANALYTICS BAR
   ========================================================= */

.archive-analytics-row{

  display:grid;

  grid-template-columns:
    minmax(84px,.75fr)
    minmax(80px,1.6fr)
    32px;

  gap:8px;

  align-items:center;

  min-height:25px;
}


.archive-analytics-row + .archive-analytics-row{

  border-top:
    1px solid
    rgba(255,255,255,.028);
}


.archive-analytics-name{

  min-width:0;

  overflow:hidden;

  color:#91828b;

  font-family:
    monospace;

  font-size:6px;

  font-weight:800;

  letter-spacing:.06em;

  white-space:nowrap;

  text-overflow:ellipsis;
}


.archive-analytics-track{

  height:4px;

  overflow:hidden;

  background:
    rgba(255,255,255,.045);
}


.archive-analytics-bar{

  width:0;
  height:100%;

  background:
    linear-gradient(
      90deg,
      rgba(240,84,162,.9),
      rgba(240,84,162,.35)
    );

  transition:
    width .28s ease;
}


.archive-analytics-count{

  color:#b95487;

  font-family:
    monospace;

  font-size:6px;

  text-align:right;
}


/* =========================================================
   LATEST MISSION
   ========================================================= */

.archive-latest-mission{

  min-height:100%;

  display:flex;

  flex-direction:column;
}


.archive-latest-date{

  color:#75676f;

  font-family:
    monospace;

  font-size:6px;

  letter-spacing:.10em;
}


.archive-latest-title{

  margin-top:9px;

  color:#e1d4db;

  font-family:
    Georgia,
    serif;

  font-size:
    clamp(14px,1.8vw,19px);

  line-height:1.25;
}


.archive-latest-codename{

  margin-top:6px;

  color:#bc5487;

  font-family:
    monospace;

  font-size:6px;

  font-weight:900;

  letter-spacing:.10em;
}


.archive-latest-meta{

  margin-top:auto;

  padding-top:14px;

  display:flex;

  flex-wrap:wrap;

  gap:5px;
}


.archive-latest-chip{

  padding:
    4px
    6px;

  border:
    1px solid
    rgba(255,255,255,.07);

  color:#81747c;

  background:
    rgba(255,255,255,.015);

  font-family:
    monospace;

  font-size:5px;

  font-weight:900;

  letter-spacing:.08em;
}


/* =========================================================
   EMPTY
   ========================================================= */

.archive-analytics-empty{

  padding:
    18px
    10px;

  color:#63585f;

  font-family:
    monospace;

  font-size:7px;

  text-align:center;

  letter-spacing:.08em;
}


/* =========================================================
   FOOTER
   ========================================================= */

.archive-command-footer{

  min-height:30px;

  padding:
    6px
    13px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:12px;

  border-top:
    1px solid
    rgba(255,255,255,.045);

  color:#5d5359;

  background:
    rgba(255,255,255,.006);

  font-family:
    monospace;

  font-size:5px;

  letter-spacing:.09em;
}


.archive-command-footer strong{

  color:#a84b7b;

  font-weight:900;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width:1080px){

  .archive-command-metrics{

    grid-template-columns:
      repeat(3,minmax(0,1fr));
  }


  .archive-command-intelligence{

    grid-template-columns:
      1fr
      1fr;
  }


  .archive-intel-panel.is-latest{

    grid-column:
      1 / -1;
  }

}


@media (max-width:680px){

  .archive-command-overview{

    width:
      calc(100% - 20px);

    margin-top:12px;
  }


  .archive-command-header{

    align-items:flex-start;

    flex-direction:column;
  }


  .archive-command-metrics{

    grid-template-columns:
      repeat(2,minmax(0,1fr));

    padding:
      9px;
  }


  .archive-command-metric:last-child{

    grid-column:
      1 / -1;
  }


  .archive-command-intelligence{

    grid-template-columns:1fr;

    padding:
      9px;
  }


  .archive-intel-panel.is-latest{

    grid-column:auto;
  }


  .archive-command-footer{

    align-items:flex-start;

    flex-direction:column;
  }

}


@media (
  prefers-reduced-motion:
  reduce
){

  .archive-analytics-bar{

    transition:none !important;
  }

}


/* YUKINON PALMU TIMELINE MISSION RELATIONS CSS V1.7.0 */


/* =========================================================
   HIGHLIGHT MODE
   ========================================================= */

.archive-highlight-control{

  min-height:27px;

  padding:
    0
    10px;

  display:inline-flex;

  align-items:center;

  gap:7px;

  border:
    1px solid
    rgba(240,84,162,.22);

  color:#bb5688;

  background:
    rgba(240,84,162,.025);

  font-family:
    monospace;

  font-size:6px;

  font-weight:900;

  letter-spacing:.09em;

  white-space:nowrap;

  cursor:pointer;

  transition:
    color .15s ease,
    border-color .15s ease,
    background .15s ease,
    box-shadow .15s ease;
}


.archive-highlight-control::before{

  content:"◇";

  font-size:8px;
}


.archive-highlight-control:hover{

  color:#e778ad;

  border-color:
    rgba(240,84,162,.48);

  background:
    rgba(240,84,162,.065);
}


.archive-highlight-control.is-active{

  color:#f08abd;

  border-color:
    rgba(240,84,162,.65);

  background:
    rgba(240,84,162,.085);

  box-shadow:
    inset 0 0 18px
    rgba(240,84,162,.035),
    0 0 16px
    rgba(240,84,162,.055);
}


.archive-highlight-control.is-active::before{

  content:"◆";
}


.archive-record.is-highlight-hidden{

  display:none !important;
}


.archive-year.is-highlight-empty{

  display:none !important;
}


/* =========================================================
   HIGHLIGHT BADGE
   ========================================================= */

.archive-record.is-highlight-major{

  position:relative;
}


.archive-record.is-highlight-major::after{

  content:"PRIORITY";

  position:absolute;

  top:8px;
  right:8px;

  z-index:8;

  padding:
    3px
    5px;

  border:
    1px solid
    rgba(240,84,162,.26);

  color:#d26099;

  background:
    rgba(8,5,8,.78);

  font-family:
    monospace;

  font-size:5px;

  font-weight:900;

  letter-spacing:.10em;

  pointer-events:none;
}


/* =========================================================
   RELATION PANEL
   ========================================================= */

.archive-mission-relations{

  margin:
    10px
    0;

  overflow:hidden;

  border:
    1px solid
    rgba(255,255,255,.07);

  background:
    linear-gradient(
      135deg,
      rgba(240,84,162,.025),
      rgba(255,255,255,.008)
    );
}


.archive-relations-header{

  min-height:37px;

  padding:
    8px
    10px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:10px;

  border-bottom:
    1px solid
    rgba(255,255,255,.05);
}


.archive-relations-header strong{

  color:#c85d92;

  font-family:
    monospace;

  font-size:7px;

  font-weight:900;

  letter-spacing:.11em;
}


.archive-relations-header span{

  color:#63585f;

  font-family:
    monospace;

  font-size:5px;

  letter-spacing:.08em;
}


/* =========================================================
   PREVIOUS / NEXT
   ========================================================= */

.archive-mission-sequence{

  padding:
    9px;

  display:grid;

  grid-template-columns:
    1fr
    1fr;

  gap:7px;

  border-bottom:
    1px solid
    rgba(255,255,255,.045);
}


.archive-sequence-button{

  min-width:0;
  min-height:50px;

  padding:
    8px
    9px;

  display:flex;

  flex-direction:column;

  align-items:flex-start;

  justify-content:center;

  border:
    1px solid
    rgba(255,255,255,.07);

  color:#96858f;

  background:
    rgba(255,255,255,.012);

  text-align:left;

  cursor:pointer;

  transition:
    color .15s ease,
    border-color .15s ease,
    background .15s ease;
}


.archive-sequence-button:hover:not(:disabled){

  color:#df74a8;

  border-color:
    rgba(240,84,162,.34);

  background:
    rgba(240,84,162,.045);
}


.archive-sequence-button:disabled{

  opacity:.30;

  cursor:default;
}


.archive-sequence-direction{

  display:block;

  color:#a54b79;

  font-family:
    monospace;

  font-size:5px;

  font-weight:900;

  letter-spacing:.12em;
}


.archive-sequence-title{

  display:block;

  width:100%;

  margin-top:5px;

  overflow:hidden;

  color:inherit;

  font-family:
    monospace;

  font-size:7px;

  font-weight:800;

  letter-spacing:.03em;

  white-space:nowrap;

  text-overflow:ellipsis;
}


/* =========================================================
   RELATED FILES
   ========================================================= */

.archive-related-files{

  padding:
    9px;
}


.archive-related-label{

  margin-bottom:7px;

  color:#675b62;

  font-family:
    monospace;

  font-size:5px;

  font-weight:900;

  letter-spacing:.12em;
}


.archive-related-list{

  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:6px;
}


.archive-related-file{

  min-width:0;

  padding:
    8px;

  display:block;

  border:
    1px solid
    rgba(255,255,255,.06);

  color:#91818a;

  background:
    rgba(255,255,255,.009);

  text-align:left;

  cursor:pointer;

  transition:
    border-color .15s ease,
    color .15s ease,
    background .15s ease;
}


.archive-related-file:hover{

  color:#df75a8;

  border-color:
    rgba(240,84,162,.30);

  background:
    rgba(240,84,162,.035);
}


.archive-related-file-title{

  display:block;

  overflow:hidden;

  font-family:
    monospace;

  font-size:7px;

  font-weight:900;

  white-space:nowrap;

  text-overflow:ellipsis;
}


.archive-related-file-meta{

  display:flex;

  flex-wrap:wrap;

  gap:4px;

  margin-top:6px;
}


.archive-related-chip{

  padding:
    2px
    4px;

  border:
    1px solid
    rgba(255,255,255,.055);

  color:#695d64;

  font-family:
    monospace;

  font-size:5px;

  font-weight:800;

  letter-spacing:.06em;
}


.archive-related-empty{

  padding:
    12px
    6px;

  color:#61565d;

  font-family:
    monospace;

  font-size:6px;

  text-align:center;

  letter-spacing:.08em;
}


/* =========================================================
   RELATION SCORE
   ========================================================= */

.archive-related-score{

  margin-left:auto;

  color:#ae4f7e;

  font-family:
    monospace;

  font-size:5px;

  font-weight:900;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width:620px){

  .archive-mission-sequence{

    grid-template-columns:1fr;
  }


  .archive-related-list{

    grid-template-columns:1fr;
  }


  .archive-relations-header{

    align-items:flex-start;

    flex-direction:column;
  }

}


/* YUKINON PALMU OPERATION ARCHIVE MOBILE PORTRAIT MAJOR FIX V1.7.1 */

/*
 * MAJOR MISSION FILE
 *
 * Smartphone portrait:
 *
 * MISSION DATA
 * ↓
 * TITLE
 * ↓
 * CODENAME / SUMMARY / MATRIX
 *
 * The desktop absolute side-panel layout is intentionally
 * disabled only for narrow portrait screens.
 */

@media
  (max-width:620px)
  and
  (orientation:portrait)
{


  /* =======================================================
     MAJOR CONTAINER
     ======================================================= */

  .archive-record.is-major.phase31-major{

    width:100%;

    min-width:0;

    max-width:100%;

    overflow:hidden;

    box-sizing:border-box;

  }


  /* =======================================================
     KEY VISUAL
     ======================================================= */

  .archive-major-keyvisual{

    min-height:0 !important;

    width:100%;

    min-width:0;

    max-width:100%;

    display:flex !important;

    flex-direction:column !important;

    align-items:stretch !important;

    justify-content:flex-start !important;

    box-sizing:border-box;

    overflow:hidden;

  }


  /*
   * MISSION DATA is no longer absolute on mobile.
   * It becomes the first normal-flow block.
   */
  .archive-major-side-panel{

    order:1;

    position:relative !important;

    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;

    width:auto !important;

    max-width:none !important;

    min-width:0 !important;

    margin:
      14px
      14px
      0 !important;

    padding:
      12px !important;

    box-sizing:border-box;

    transform:none !important;

  }


  /* =======================================================
     MISSION DATA ROWS
     ======================================================= */

  .archive-major-side-line{

    min-width:0;

    align-items:flex-start;

    gap:12px;

  }


  .archive-major-side-line > span{

    flex:
      0
      0
      auto;

  }


  .archive-major-side-line b{

    min-width:0;

    margin-left:auto;

    text-align:right;

    white-space:normal;

    overflow-wrap:anywhere;

    word-break:normal;

  }


  /* =======================================================
     MAIN MAJOR CONTENT
     ======================================================= */

  .archive-major-keyvisual-content{

    order:2;

    width:100% !important;

    max-width:100% !important;

    min-width:0 !important;

    padding:
      18px
      16px
      22px !important;

    box-sizing:border-box;

  }


  .archive-major-security{

    margin-bottom:12px;

    gap:6px;

  }


  .archive-major-security span{

    min-height:22px;

    padding:
      0
      6px;

    font-size:6px;

  }


  /* =======================================================
     TITLE
     ======================================================= */

  .archive-major-keyvisual h2{

    width:100%;

    max-width:100% !important;

    min-width:0;

    margin:0;

    font-size:
      clamp(
        27px,
        8.4vw,
        36px
      ) !important;

    line-height:1.02;

    letter-spacing:-.02em;

    text-wrap:pretty;

    overflow-wrap:break-word;

    word-break:normal;

  }


  .archive-major-codename{

    max-width:100%;

    margin-top:10px;

    font-size:8px;

    line-height:1.5;

    letter-spacing:.10em;

    overflow-wrap:anywhere;

  }


  .archive-major-summary{

    max-width:100% !important;

    margin-top:12px;

    font-size:11px;

    line-height:1.65;

    overflow-wrap:anywhere;

  }


  /* =======================================================
     STATUS MATRIX
     ======================================================= */

  .archive-phase31-matrix{

    width:100%;

    min-width:0;

    margin:
      12px
      0
      0;

    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );

  }


  .archive-phase31-matrix-cell{

    min-width:0;

    padding:
      9px
      10px;

  }


  .archive-phase31-matrix-cell strong{

    min-width:0;

    font-size:8px;

    white-space:normal;

    overflow-wrap:anywhere;

  }


  /* =======================================================
     PRIORITY STAMP
     Desktop decorative stamp is unnecessary on mobile.
     ======================================================= */

  .archive-major-priority-stamp{

    display:none !important;

  }


  /* =======================================================
     ORIGINAL RECORD CONTENT
     ======================================================= */

  .archive-record.is-major.phase31-major
  > .archive-record-date{

    margin:
      12px
      14px
      0 !important;

  }


  .archive-record.is-major.phase31-major
  > .archive-record-body{

    padding:
      12px
      14px
      18px !important;

  }


  .archive-record.is-major.phase31-major
  > .archive-record-body h3{

    max-width:100%;

    overflow-wrap:break-word;

    word-break:normal;

  }

}


/* =========================================================
   YUKINON PALMU OPERATION DETAILS AUTO LINK CSS V1.8.0 SAFE V3
   ========================================================= */

.archive-operation-details-link{

  color:
    #ef78af;

  text-decoration:
    underline;

  text-decoration-color:
    rgba(240,84,162,.58);

  text-decoration-thickness:
    1px;

  text-underline-offset:
    3px;

  overflow-wrap:
    anywhere;

  word-break:
    break-word;

  cursor:
    pointer;

  transition:
    color .15s ease,
    text-decoration-color .15s ease;

}


.archive-operation-details-link:hover,
.archive-operation-details-link:focus-visible{

  color:
    #ffabd1;

  text-decoration-color:
    rgba(255,171,209,.92);

}


.archive-operation-details-link:focus-visible{

  outline:
    1px solid
    rgba(240,84,162,.58);

  outline-offset:
    3px;

}


/* =========================================================
   YUKINON PALMU HISTORY OLDEST FIRST EMPTY STATE FIX CSS V1.8.1
   ========================================================= */


/*
 * history.js already toggles:
 *
 *   empty.hidden = true;
 *
 * when one or more records exist.
 *
 * Force the HTML hidden state to win over archive-empty
 * presentation rules.
 */

[data-history-empty][hidden]{

  display:
    none !important;

  visibility:
    hidden !important;

}


/*
 * Keep normal empty-state presentation available when
 * JavaScript removes the hidden attribute.
 */

[data-history-empty]:not([hidden]){

  visibility:
    visible;

}


/* =========================================================
   YUKINON PALMU MISSION RELATIONS INTERACTION UI FIX V1.8.2
   ========================================================= */

/*
 * Existing tactical design is preserved.
 *
 * Purpose:
 * - make PREVIOUS / NEXT FILE obviously interactive
 * - make RELATED MISSION FILE obviously interactive
 * - improve contrast without redesigning the modal
 * - enlarge mobile tap targets
 */


/* =========================================================
   MISSION RELATIONS CONTAINER
   ========================================================= */

.archive-mission-relations{

  border-color:
    rgba(240,84,162,.18)
    !important;

  background:
    linear-gradient(
      135deg,
      rgba(240,84,162,.030),
      rgba(255,255,255,.008) 45%,
      rgba(240,84,162,.018)
    )
    !important;

  box-shadow:
    inset 3px 0 0
    rgba(240,84,162,.28),

    inset 0 0 24px
    rgba(240,84,162,.018);

}


/* =========================================================
   RELATIONS HEADER
   ========================================================= */

.archive-relations-header{

  padding-bottom:
    9px;

  margin-bottom:
    9px;

  border-bottom:
    1px solid
    rgba(240,84,162,.12);

}


.archive-relations-header strong{

  color:
    #eb6cab
    !important;

  text-shadow:
    0 0 10px
    rgba(240,84,162,.16);

}


.archive-relations-header small{

  color:
    #9c818f
    !important;

}


/* =========================================================
   PREVIOUS / NEXT FILE
   ========================================================= */

.archive-sequence-button:not(:disabled){

  position:
    relative;

  min-height:
    56px;

  padding:
    11px
    52px
    11px
    12px
    !important;

  overflow:
    hidden;

  border:
    1px solid
    rgba(240,84,162,.23)
    !important;

  color:
    #d8c8d1
    !important;

  background:
    linear-gradient(
      115deg,
      rgba(240,84,162,.065),
      rgba(255,255,255,.018) 52%,
      rgba(240,84,162,.025)
    )
    !important;

  box-shadow:
    inset 3px 0 0
    rgba(240,84,162,.30),

    0 0 0 1px
    rgba(255,255,255,.012);

  cursor:
    pointer
    !important;

  touch-action:
    manipulation;

  transition:
    color .15s ease,
    border-color .15s ease,
    background .15s ease,
    box-shadow .15s ease,
    transform .15s ease;

}


/*
 * Explicit OPEN indicator.
 */

.archive-sequence-button:not(:disabled)::after{

  content:
    "OPEN  ›";

  position:
    absolute;

  top:
    50%;

  right:
    12px;

  transform:
    translateY(-50%);

  color:
    #ed6faf;

  font-family:
    monospace;

  font-size:
    6px;

  font-weight:
    900;

  letter-spacing:
    .09em;

  text-shadow:
    0 0 10px
    rgba(240,84,162,.25);

  pointer-events:
    none;

}


.archive-sequence-button:not(:disabled):hover,
.archive-sequence-button:not(:disabled):focus-visible{

  color:
    #fff4f9
    !important;

  border-color:
    rgba(240,84,162,.58)
    !important;

  background:
    linear-gradient(
      115deg,
      rgba(240,84,162,.15),
      rgba(255,255,255,.035) 52%,
      rgba(240,84,162,.07)
    )
    !important;

  box-shadow:
    inset 3px 0 0
    rgba(255,112,185,.78),

    0 0 18px
    rgba(240,84,162,.09);

  transform:
    translateY(-1px);

}


.archive-sequence-button:not(:disabled):focus-visible{

  outline:
    1px solid
    rgba(255,126,192,.72);

  outline-offset:
    2px;

}


.archive-sequence-button:not(:disabled):active{

  transform:
    translateY(0);

}


/*
 * Keep unavailable PREVIOUS / NEXT visibly unavailable.
 */

.archive-sequence-button:disabled{

  opacity:
    .24;

  cursor:
    default;

}


/* =========================================================
   PREVIOUS / NEXT TEXT
   ========================================================= */

.archive-sequence-direction{

  color:
    #e86aaa
    !important;

  font-size:
    6.5px
    !important;

  letter-spacing:
    .13em;

}


.archive-sequence-title{

  margin-top:
    6px
    !important;

  color:
    #e5d7df
    !important;

  font-size:
    8px
    !important;

  line-height:
    1.45;

}


/* =========================================================
   RELATED MISSION FILES
   ========================================================= */

.archive-related-files{

  padding:
    10px
    !important;

}


.archive-related-label{

  margin-bottom:
    9px
    !important;

  color:
    #b08a9e
    !important;

  font-size:
    6px
    !important;

  letter-spacing:
    .13em;

}


/*
 * Small instruction while retaining tactical styling.
 */

.archive-related-label::after{

  content:
    "  // SELECT FILE TO OPEN";

  color:
    #ce5e96;

  opacity:
    .82;

}


/* =========================================================
   RELATED FILE BUTTON
   ========================================================= */

.archive-related-file{

  position:
    relative;

  min-height:
    54px;

  padding:
    10px
    52px
    10px
    11px
    !important;

  overflow:
    hidden;

  border:
    1px solid
    rgba(240,84,162,.21)
    !important;

  color:
    #d4c3cc
    !important;

  background:
    linear-gradient(
      115deg,
      rgba(240,84,162,.055),
      rgba(255,255,255,.015) 52%,
      rgba(240,84,162,.020)
    )
    !important;

  box-shadow:
    inset 3px 0 0
    rgba(240,84,162,.24);

  cursor:
    pointer
    !important;

  touch-action:
    manipulation;

  transition:
    color .15s ease,
    border-color .15s ease,
    background .15s ease,
    box-shadow .15s ease,
    transform .15s ease;

}


.archive-related-file::after{

  content:
    "OPEN  ›";

  position:
    absolute;

  top:
    50%;

  right:
    11px;

  transform:
    translateY(-50%);

  color:
    #e96cab;

  font-family:
    monospace;

  font-size:
    6px;

  font-weight:
    900;

  letter-spacing:
    .09em;

  text-shadow:
    0 0 10px
    rgba(240,84,162,.22);

  pointer-events:
    none;

}


.archive-related-file:hover,
.archive-related-file:focus-visible{

  color:
    #fff3f9
    !important;

  border-color:
    rgba(240,84,162,.56)
    !important;

  background:
    linear-gradient(
      115deg,
      rgba(240,84,162,.145),
      rgba(255,255,255,.035) 52%,
      rgba(240,84,162,.065)
    )
    !important;

  box-shadow:
    inset 3px 0 0
    rgba(255,111,184,.76),

    0 0 18px
    rgba(240,84,162,.08);

  transform:
    translateY(-1px);

}


.archive-related-file:focus-visible{

  outline:
    1px solid
    rgba(255,126,192,.70);

  outline-offset:
    2px;

}


.archive-related-file:active{

  transform:
    translateY(0);

}


/* =========================================================
   RELATED FILE TYPOGRAPHY
   ========================================================= */

.archive-related-file-title{

  color:
    #e7d9e1
    !important;

  font-size:
    8px
    !important;

  line-height:
    1.45;

}


.archive-related-file-meta{

  margin-top:
    7px
    !important;

}


.archive-related-chip{

  color:
    #a78d9a
    !important;

  border-color:
    rgba(255,255,255,.10)
    !important;

  background:
    rgba(255,255,255,.015);

}


.archive-related-score{

  color:
    #e56ca8
    !important;

}


/* =========================================================
   MOBILE / TOUCH
   ========================================================= */

@media (max-width:620px){

  /*
   * Existing one-column layout is retained.
   * Only tap targets and text readability are increased.
   */

  .archive-sequence-button:not(:disabled),
  .archive-related-file{

    min-height:
      64px;

    padding:
      13px
      54px
      13px
      13px
      !important;

  }


  .archive-sequence-direction{

    font-size:
      7px
      !important;

  }


  .archive-sequence-title,
  .archive-related-file-title{

    font-size:
      9px
      !important;

    line-height:
      1.5;

    white-space:
      normal
      !important;

    overflow:
      visible
      !important;

    text-overflow:
      clip
      !important;

  }


  .archive-related-label{

    font-size:
      6.5px
      !important;

    line-height:
      1.5;

  }


  .archive-related-label::after{

    content:
      "  // TAP TO OPEN";

  }


  .archive-sequence-button:not(:disabled)::after,
  .archive-related-file::after{

    content:
      "TAP  ›";

    right:
      13px;

    font-size:
      6.5px;

  }

}


/* =========================================================
   TOUCH DEVICES
   ========================================================= */

@media (hover:none){

  .archive-sequence-button:not(:disabled):active,
  .archive-related-file:active{

    border-color:
      rgba(240,84,162,.68)
      !important;

    background:
      rgba(240,84,162,.14)
      !important;

  }

}



/* Honour the loading state set by history.js. */
.archive-loading[hidden] { display: none !important; }
@media (max-width: 760px) {
  .archive-category-filters button,
  .archive-year-filters button,
  .archive-filter-reset,
  .archive-highlight-control,
  .archive-nav-button {
    min-height: 44px !important;
    font-size: 12px !important;
    white-space: normal;
  }
  .archive-filter-input,
  .archive-filter-select {
    min-height: 44px !important;
    min-width: 0;
    max-width: 100%;
    font-size: 16px !important;
  }
  .archive-record h3 { font-size: 17px !important; line-height: 1.6; overflow-wrap: anywhere; }
  .archive-record p { font-size: 14px !important; line-height: 1.8; }
  .archive-modal h2 { overflow-wrap: anywhere; }
}