/* ===========================================================
   PANNON POINT - shared stylesheet for section pages
   Mirrors index.html identity. Phthalo + gold, EB Garamond.
   Every rule is one property per line for easy editing.
   =========================================================== */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,400&family=IBM+Plex+Sans:wght@300;400;500;600&display=swap");

/* ===== DESIGN TOKENS - change a value here and it updates everywhere ===== */
:root {
  --ink: #050d0a;            /* deepest background */
  --bg: #081410;             /* page background */
  --panel: #0b1d15;          /* raised surface / hover */
  --panel-2: #0e2419;        /* second surface */
  --line: rgba(201,168,87,.16);        /* hairline border */
  --line-strong: rgba(201,168,87,.30); /* stronger border */
  --gold: #c9a857;           /* primary accent */
  --gold-2: #e7cf8a;         /* lighter gold */
  --brass: #9a7c41;          /* darker gold */
  --parchment: #e9e3d3;      /* primary text */
  --parch-dim: rgba(233,227,211,.60);  /* secondary text */
  --parch-faint: rgba(233,227,211,.38); /* faint text */
  --steel: #7f8b85;          /* muted / archived */
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "IBM Plex Sans", -apple-system, system-ui, sans-serif;
  --gut: clamp(20px, 5vw, 72px);  /* page side padding */
  --pattern: url("pp_pattern.svg");  /* gold seed-pattern tile */
}

/* ===== RESET ===== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
  background: var(--ink);
}
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--parchment);
  font-weight: 300;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  background-image:
    radial-gradient(120% 90% at 50% -10%, rgba(201,168,87,.06), transparent 55%),
    radial-gradient(80% 60% at 100% 120%, rgba(13,40,28,.55), transparent 60%);
}
::selection {
  background: rgba(201,168,87,.28);
  color: var(--parchment);
}
a {
  color: inherit;
}

/* ===== AMBIENT PATTERN + HELPERS ===== */
.texture {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .08;
  background-image: var(--pattern);
  background-size: 600px 600px;
  background-repeat: repeat;
}
main,
header,
footer {
  position: relative;
  z-index: 1;
}
.wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding-left: var(--gut);
  padding-right: var(--gut);
}
.serif {
  font-family: var(--serif);
}
.eyebrow {
  font-family: var(--sans);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ===== NAV (static, always visible on subpages) ===== */
header.nav {
  position: sticky;
  top: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px var(--gut);
  background: linear-gradient(180deg, rgba(5,13,10,.96), rgba(5,13,10,.82));
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav-mark {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}
.nav-mark img {
  width: 24px;
  height: 24px;
  display: block;
}
.nav-mark b {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.15rem;
  letter-spacing: .02em;
}
.nav-links {
  display: flex;
  gap: 30px;
  list-style: none;
}
.nav-links a {
  color: var(--parch-dim);
  text-decoration: none;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  position: relative;
  padding: 4px 0;
  transition: color .3s;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 1px;
  width: 0;
  background: var(--gold);
  transition: width .35s cubic-bezier(.16,1,.3,1);
}
.nav-links a:hover,
.nav-links a.here {
  color: var(--parchment);
}
.nav-links a:hover::after,
.nav-links a.here::after {
  width: 100%;
}

/* ===== LANGUAGE SWITCH (EN | HU) ===== */
.lang-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 28px;
}
.lang-switch button {
  background: none;
  border: 0;
  cursor: pointer;
  padding: 4px 2px;
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--parch-faint);
  transition: color .3s;
}
.lang-switch button:hover {
  color: var(--parchment);
}
.lang-switch button.active {
  color: var(--gold);
}
.lang-switch .sep {
  color: var(--line-strong);
  font-size: .68rem;
}
.nav-right {
  display: flex;
  align-items: center;
}

/* ===== PAGE HEADER ===== */
.subhero {
  padding: clamp(60px,11vh,120px) 0 clamp(36px,6vh,60px);
  position: relative;
  overflow: hidden;
}
/* (the subhero's own pattern layer was removed - the animated .texture
   already provides the background, so a second layer would double up) */
.crumbs {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .64rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--parch-faint);
  margin-bottom: 26px;
}
.crumbs a {
  color: var(--parch-dim);
  text-decoration: none;
  transition: color .3s;
}
.crumbs a:hover {
  color: var(--gold);
}
.crumbs .sep {
  color: var(--line-strong);
}
.sub-idx {
  font-family: var(--sans);
  font-size: .66rem;
  letter-spacing: .3em;
  color: var(--gold);
  text-transform: uppercase;
  display: block;
  margin-bottom: 14px;
}
.subhero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.4rem,6.5vw,4.6rem);
  line-height: 1.02;
  letter-spacing: .01em;
}
.lede {
  margin-top: 18px;
  max-width: 60ch;
  font-size: 1rem;
  color: var(--parch-dim);
  font-weight: 300;
}

/* ===== SECTION HEAD (in-page) ===== */
.sec {
  padding: clamp(40px,7vh,72px) 0;
}
.sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.sec-head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem,3.4vw,2.3rem);
  line-height: 1.05;
}
.sec-head .idx {
  font-family: var(--sans);
  font-size: .62rem;
  letter-spacing: .3em;
  color: var(--gold);
  text-transform: uppercase;
}

/* ===== STATUS DOTS - variants: active · build · archive ===== */
.status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .6rem;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.status.active::before {
  background: #7fae7f;
  box-shadow: 0 0 10px #7fae7f;
}
.status.active {
  color: #a7c9a7;
}
.status.build::before {
  background: var(--gold);
  box-shadow: 0 0 10px var(--gold);
}
.status.build {
  color: var(--gold-2);
}
.status.archive::before {
  background: var(--steel);
}
.status.archive {
  color: var(--steel);
}

/* ===== TABLE (board) ===== */
.board {
  border: 1px solid var(--line);
  background: var(--panel);
}
.board-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 22px;
  border-bottom: 1px solid var(--line);
  background: var(--ink);
}
.board-head .t {
  font-size: .64rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
}
.board-head .live {
  font-size: .6rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--parch-dim);
  display: flex;
  align-items: center;
  gap: 8px;
}
.board-head .live::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7fae7f;
  box-shadow: 0 0 10px #7fae7f;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%,100% { opacity: 1; }
  50% { opacity: .35; }
}
table.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: .82rem;
}
table.tbl th {
  text-align: left;
  font-weight: 500;
  font-size: .6rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--parch-faint);
  padding: 13px 22px;
  border-bottom: 1px solid var(--line);
}
table.tbl td {
  padding: 15px 22px;
  border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  color: var(--parch-dim);
}
table.tbl tr:last-child td {
  border-bottom: 0;
}
table.tbl tr:hover td {
  background: var(--panel-2);
}
table.tbl .nm {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--parchment);
}
.bar {
  height: 5px;
  background: rgba(201,168,87,.14);
  overflow: hidden;
  min-width: 110px;
  display: block;
}
.bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg,var(--brass),var(--gold));
}

/* ===== ROW LIST (releases / events / steps) ===== */
.rows {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
}
.row {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  gap: 26px;
  align-items: center;
  padding: 24px 8px;
  border-bottom: 1px solid var(--line);
  transition: padding-left .4s, background .4s;
}
.row:hover {
  padding-left: 20px;
  background: var(--panel);
}
.row .rno {
  font-family: var(--serif);
  font-size: 1.25rem;
  color: var(--gold);
}
.row .rmain h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.2rem,2.4vw,1.6rem);
  line-height: 1.12;
}
.row .rmain p {
  font-size: .8rem;
  color: var(--parch-faint);
  margin-top: 4px;
}
.row .rmeta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.tag {
  font-size: .56rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--parch-dim);
  border: 1px solid var(--line);
  padding: 5px 10px;
}
.row .when {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--parchment);
  font-variant-numeric: tabular-nums;
}

/* ===== CARD GRID ===== */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.card {
  position: relative;
  overflow: hidden;
  background: var(--bg);
  padding: 28px 26px;
  transition: background .35s;
  min-height: 170px;
  display: flex;
  flex-direction: column;
}
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--pattern);
  background-size: 300px 300px;
  opacity: .05;
  transition: opacity .5s;
  -webkit-mask-image: linear-gradient(180deg,#000,transparent 82%);
  mask-image: linear-gradient(180deg,#000,transparent 82%);
}
.card:hover {
  background: var(--panel);
}
.card:hover::before {
  opacity: .14;
}
.card > * {
  position: relative;
  z-index: 1;
}
.card .ic {
  font-size: .6rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold);
}
.card h4 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.3rem;
  margin: 10px 0 6px;
}
.card p {
  font-size: .8rem;
  color: var(--parch-faint);
  margin-bottom: auto;
  line-height: 1.5;
}

/* ===== DOC PROSE ===== */
.doc {
  max-width: 74ch;
}
.doc h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.5rem;
  margin: 38px 0 12px;
  color: var(--parchment);
}
.doc h3:first-child {
  margin-top: 0;
}
.doc p {
  margin: 0 0 16px;
  color: var(--parch-dim);
  font-size: .96rem;
}
.doc ul {
  margin: 0 0 18px;
  padding-left: 0;
  list-style: none;
}
.doc li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 9px;
  color: var(--parch-dim);
  font-size: .94rem;
}
.doc li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 7px;
  height: 7px;
  background: var(--gold);
  transform: rotate(45deg);
}
.doc code {
  font-family: var(--sans);
  background: var(--panel-2);
  border: 1px solid var(--line);
  padding: 1px 7px;
  font-size: .82rem;
  color: var(--gold-2);
  letter-spacing: .02em;
}
.doc strong {
  color: var(--parchment);
  font-weight: 600;
}

/* ===== SPEC TABLE ===== */
.spec {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
  border: 1px solid var(--line);
  margin: 8px 0 26px;
}
.spec th {
  text-align: left;
  font-weight: 500;
  font-size: .58rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold);
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--ink);
}
.spec td {
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
  color: var(--parch-dim);
  vertical-align: top;
}
.spec tr:last-child td {
  border-bottom: 0;
}
.spec td:first-child {
  font-family: var(--serif);
  font-size: 1.02rem;
  color: var(--parchment);
  white-space: nowrap;
}
.spec code {
  font-family: var(--sans);
  color: var(--gold-2);
  font-size: .82rem;
}

/* ===== TIMELINE (journals) ===== */
.tl {
  position: relative;
  border-left: 1px solid var(--line);
  margin-left: 8px;
  padding-left: 30px;
}
.tl-item {
  position: relative;
  padding-bottom: 34px;
}
.tl-item:last-child {
  padding-bottom: 0;
}
.tl-item::before {
  content: "";
  position: absolute;
  left: -35px;
  top: 4px;
  width: 9px;
  height: 9px;
  background: var(--gold);
  transform: rotate(45deg);
  box-shadow: 0 0 12px rgba(201,168,87,.5);
}
.tl-item .date {
  font-family: var(--sans);
  font-size: .6rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold);
}
.tl-item h4 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.35rem;
  margin: 6px 0 8px;
}
.tl-item p {
  font-size: .92rem;
  color: var(--parch-dim);
}

/* ===== CTA / BUTTONS - .solid = filled gold, plain = outline ===== */
.cta-wrap {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 30px;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 26px;
  border: 1px solid var(--line-strong);
  color: var(--parchment);
  transition: .35s;
  background: transparent;
}
.btn .ar {
  transition: transform .35s cubic-bezier(.16,1,.3,1);
}
.btn:hover {
  border-color: var(--gold);
  color: var(--gold);
}
.btn:hover .ar {
  transform: translateX(5px);
}
.btn.solid {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold);
}
.btn.solid:hover {
  background: var(--gold-2);
  border-color: var(--gold-2);
  color: var(--ink);
}

/* ===== STAT TILES ===== */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px,1fr));
  gap: 16px;
  margin-top: 8px;
}
.stat {
  border: 1px solid var(--line);
  padding: 22px;
  background: var(--panel);
}
.stat .n {
  font-family: var(--serif);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--parchment);
}
.stat .l {
  font-size: .6rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--parch-faint);
  margin-top: 12px;
}

/* ===== BAND + FOOTER ===== */
.band {
  /* transparent spacer: the animated .texture shows through as the single
     background layer (no own pattern, so nothing doubles up) */
  height: clamp(110px,16vh,170px);
}
footer {
  padding: 52px var(--gut);
  border-top: 1px solid var(--line);
  text-align: center;
  background: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
footer img {
  width: 34px;
  height: 34px;
}
footer .fname {
  font-family: var(--serif);
  font-size: 1.4rem;
  letter-spacing: .04em;
  color: var(--parchment);
}
footer .fmeta {
  font-size: .6rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--parch-faint);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 760px) {
  .nav-links {
    display: none;
  }
  .row {
    grid-template-columns: 44px 1fr;
    gap: 16px;
  }
  .row .rmeta {
    grid-column: 2;
    justify-content: flex-start;
  }
  .hide-sm {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    animation: none !important;
    transition: none !important;
  }
}