/* Julkiset patch notet. Perii asiakirjasivun pohjan (doc.css) ja levittää sen
   hieman leveämmäksi: rivit ovat pitkiä ja aikajanan kisko vie vasemman reunan. */

.pn-main {
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(44px, 6vw, 88px) clamp(18px, 4vw, 48px) clamp(64px, 8vw, 112px);
}

.pn-head h1 {
  margin: 14px 0 0;
  color: #eee3cf;
  font: 500 clamp(32px, 4.2vw, 58px)/1.06 var(--font-display);
  letter-spacing: -.03em;
  text-transform: uppercase;
}

.pn-head > p {
  max-width: 620px;
  margin: 24px 0 0;
  color: #9f9382;
  font-size: 16px;
  line-height: 1.8;
}

.pn-count {
  color: #7f7566;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

/* Aikajana: yksi pystykisko vasemmassa reunassa, julkaisut sen varrella.
   Kisko on ::beforellä eikä reunuksella, jotta se voi päättyä ennen viimeisen
   julkaisun pohjaa — muuten viiva roikkuisi tyhjässä sivun alalaidassa. */
.pn-timeline {
  position: relative;
  margin: clamp(36px, 4.5vw, 62px) 0 0;
  padding-left: clamp(20px, 3vw, 34px);
}

.pn-timeline::before {
  content: '';
  position: absolute;
  top: 8px;
  bottom: 20px;
  left: 0;
  width: 1px;
  background: linear-gradient(rgba(213,170,84,.4), rgba(213,170,84,.06));
}

.pn-entry {
  position: relative;
  padding: 0 0 clamp(34px, 4vw, 52px);
}

.pn-entry:last-child { padding-bottom: 0; }

.pn-entry:focus-visible { outline: 1px solid var(--imp-gold); outline-offset: 8px; }

/* Solmu kiskolla. Ensimmäinen on kirkas: uusin julkaisu on se jota tullaan
   lukemaan, ja silmän on löydettävä se ilman että päivämäärää tavaa. */
.pn-entry::before {
  content: '';
  position: absolute;
  top: 7px;
  left: calc(clamp(20px, 3vw, 34px) * -1 - 4px);
  width: 9px;
  height: 9px;
  background: #4a4034;
  border: 1px solid rgba(213,170,84,.42);
  border-radius: 50%;
}

.pn-entry:first-child::before { background: var(--imp-gold); border-color: var(--imp-gold); }

.pn-entry-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.pn-date {
  color: #7f7566;
  font-size: 12.5px;
  letter-spacing: .04em;
}

.pn-version {
  padding: 3px 8px;
  color: var(--imp-gold-pale);
  background: rgba(213,170,84,.1);
  border: 1px solid rgba(213,170,84,.34);
  font: 700 9px/1.3 Arial, sans-serif;
  letter-spacing: .1em;
}

.pn-pill {
  padding: 3px 8px;
  color: #b7ab98;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.1);
  font: 700 8px/1.3 Arial, sans-serif;
  letter-spacing: .13em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Luokat kertovat rivin luonteen yhdellä vilkaisulla: lisäys lämmin,
   korjaus viileä, tasapaino neutraali. Tuntematon laji saa harmaan
   oletuksen eikä väärää väriä. */
.pn-pill[data-cat='new'],
.pn-pill[data-cat='feature'],
.pn-pill[data-cat='content'] { color: #cbb98c; border-color: rgba(213,170,84,.36); }
.pn-pill[data-cat='fix'] { color: #a7bcc4; border-color: rgba(96,140,158,.38); }
.pn-pill[data-cat='balance'],
.pn-pill[data-cat='combat'] { color: #d8a99a; border-color: rgba(160,74,58,.42); }
.pn-pill[data-cat='qol'],
.pn-pill[data-cat='change'] { color: #b6b0c8; border-color: rgba(126,110,160,.4); }
.pn-pill[data-cat='economy'],
.pn-pill[data-cat='items'] { color: #b3b79a; border-color: rgba(140,150,100,.36); }

.pn-title {
  margin: 12px 0 0;
  color: #e7dcc7;
  font: 500 clamp(20px, 2vw, 26px)/1.25 var(--font-display);
  letter-spacing: -.015em;
}

.pn-summary {
  max-width: 720px;
  margin: 12px 0 0;
  color: #a29684;
  font-size: 15px;
  line-height: 1.8;
}

.pn-items {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

/* Pilli ja teksti omissa sarakkeissaan: pitkä rivi kietoutuu tekstisarakkeen
   sisällä eikä ala pillin alta, jolloin listaa voi silmäillä lajin mukaan. */
.pn-item {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 10px;
  padding: 11px 0;
  border-top: 1px solid rgba(255,255,255,.07);
}

.pn-item:first-child { border-top: 0; padding-top: 0; }

.pn-item-text {
  color: #b3a795;
  font-size: 14.5px;
  line-height: 1.75;
}

.pn-item-text a,
.pn-summary a { color: var(--imp-gold); text-decoration: none; border-bottom: 1px solid rgba(213,170,84,.3); }
.pn-item-text a:hover,
.pn-summary a:hover { border-bottom-color: var(--imp-gold); }

.pn-status {
  margin: 0;
  padding: 20px 0;
  color: #6f6656;
  font-size: 14px;
}

.pn-more-wrap {
  display: flex;
  justify-content: center;
  margin: clamp(30px, 3.5vw, 46px) 0 0;
}

.pn-more[hidden] { display: none; }

.pn-foot {
  max-width: 640px;
  margin: clamp(40px, 4.5vw, 64px) auto 0;
  color: #7f7566;
  font-size: 13.5px;
  line-height: 1.8;
  text-align: center;
}

.pn-foot a { color: var(--imp-gold); text-decoration: none; border-bottom: 1px solid rgba(213,170,84,.3); }
.pn-foot a:hover { border-bottom-color: var(--imp-gold); }

@media (max-width: 620px) {
  /* Kapealla ruudulla pilli siirtyy tekstin ylle: kahden sarakkeen ruudukko
     jättäisi tekstille noin 30 merkkiä riviä kohti. */
  .pn-item { grid-template-columns: 1fr; gap: 7px; }
  .pn-pill { justify-self: start; }
}