/* ============================================================
   ringofhonor.css — Vikings Ring of Honor
   Pattern: vintage-analog-retro-film (heritage archive treatment)
   Layout + texture only. Palette inherited from style.css.
   All classes prefixed roh-
   ============================================================ */

.page-roh{
  /* paper grain, built from brand ink + gold only — no sepia */
  --roh-paper:#fffefb;
  --roh-plate-line:#d8d3e2;
  --roh-rule:rgba(42,20,80,.16);
  --roh-grain-light:
    repeating-linear-gradient(0deg, rgba(42,20,80,.030) 0 1px, rgba(42,20,80,0) 1px 3px),
    repeating-linear-gradient(90deg, rgba(42,20,80,.018) 0 1px, rgba(42,20,80,0) 1px 4px),
    radial-gradient(circle at 16% 20%, rgba(79,38,131,.055), rgba(79,38,131,0) 44%),
    radial-gradient(circle at 84% 82%, rgba(29,183,207,.070), rgba(29,183,207,0) 46%);
  --roh-grain-dark:
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, rgba(255,255,255,0) 1px 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.10) 0 1px, rgba(0,0,0,0) 1px 4px),
    radial-gradient(circle at 22% 16%, rgba(68,206,227,.10), rgba(68,206,227,0) 48%),
    radial-gradient(circle at 78% 88%, rgba(255,255,255,.055), rgba(255,255,255,0) 50%);
  background:var(--page);
}

/* ---------- breadcrumbs ---------- */
.roh-crumbs{background:var(--purple-ink);border-bottom:1px solid rgba(68,206,227,.30)}
.roh-crumbs ol{
  list-style:none;margin:0;padding:11px 0;display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-family:var(--display);font-weight:600;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase
}
.roh-crumbs a{color:#ffffff;text-decoration:none;border-bottom:1px solid rgba(68,206,227,.55)}
.roh-crumbs a:hover{color:var(--gold);border-bottom-color:var(--gold)}
.roh-crumbs li[aria-hidden]{color:rgba(255,255,255,.48)}
.roh-crumbs li[aria-current]{color:var(--gold)}

/* ---------- hero plaque ---------- */
.roh-hero{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--purple-ink);
  padding:var(--space-5) 0 var(--space-5)
}
.roh-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background-image:var(--roh-grain-dark);
  background-color:var(--purple-ink)
}
.roh-hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:4px;z-index:-1;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold) 45%,var(--gold-deep))
}
.roh-plaque{
  max-width:820px;
  border:1px solid rgba(68,206,227,.42);
  box-shadow:inset 0 0 0 1px rgba(68,206,227,.14);
  padding:clamp(20px,4vw,38px)
}
.roh-kicker{
  display:block;font-family:var(--display);font-weight:600;font-size:11.5px;
  letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-bottom:14px
}
.roh-hero h1{
  font-family:var(--display);font-weight:700;text-transform:uppercase;color:#fff;
  font-size:clamp(32px,7.2vw,60px);line-height:1.02;letter-spacing:.012em;margin:0
}
.roh-estd{
  margin:16px 0 0;padding-top:16px;border-top:1px solid rgba(68,206,227,.34);
  font-family:var(--display);font-weight:600;font-size:12.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold)
}
.roh-lede{margin:16px 0 0;color:#ffffff;font-size:16.5px;line-height:1.62;max-width:62ch}
.roh-lede a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}

/* ---------- key figures strip ---------- */
.roh-figs{
  list-style:none;margin:26px 0 0;padding:0;display:grid;gap:1px;
  grid-template-columns:1fr;background:rgba(68,206,227,.30);
  border:1px solid rgba(68,206,227,.30)
}
.roh-figs li{background:var(--purple-ink);padding:15px 18px}
.roh-figs b{
  display:block;font-family:var(--display);font-weight:700;color:var(--gold);
  font-size:26px;line-height:1.1;letter-spacing:.02em
}
.roh-figs span{
  display:block;margin-top:5px;font-family:var(--display);font-weight:600;font-size:11px;
  letter-spacing:.13em;text-transform:uppercase;color:#ffffff
}

/* ---------- generic section ---------- */
.roh-sec{padding:var(--space-5) 0}
.roh-sec-head{margin-bottom:var(--space-3);max-width:70ch}
.roh-sec-head h2{
  font-family:var(--display);font-weight:700;text-transform:uppercase;color:var(--purple-ink);
  font-size:clamp(22px,3.6vw,32px);line-height:1.08;margin:0;letter-spacing:.015em
}
.roh-sec-head h2::after{
  content:"";display:block;width:64px;height:3px;margin-top:12px;background:var(--gold-deep)
}
.roh-sec-head p{margin:14px 0 0;color:var(--text);font-size:15.5px;line-height:1.62}
.roh-sec-head p a,.roh-body a{color:var(--purple);text-decoration:underline;text-underline-offset:3px}
.roh-sec-head p a:hover,.roh-body a:hover{color:var(--purple-ink)}

/* ---------- the register (record cards) ---------- */
.roh-register{
  list-style:none;margin:0;padding:0;
  display:grid;gap:18px;grid-template-columns:1fr
}
.roh-plate{
  position:relative;isolation:isolate;overflow:hidden;
  background-color:var(--roh-paper);
  background-image:var(--roh-grain-light);
  border:1px solid var(--roh-plate-line);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.9), 0 1px 2px rgba(20,15,40,.07);
  padding:0;
  transition:border-color var(--t), box-shadow var(--t)
}
.roh-plate:hover,.roh-plate:focus-within{
  border-color:var(--purple);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.9), 0 2px 10px rgba(42,20,80,.13)
}
/* letterpress top rule + fine inner keyline */
.roh-plate::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--purple),var(--gold-deep) 62%,var(--gold))
}
.roh-plate-in{
  padding:20px 20px 18px;
  border:1px solid rgba(42,20,80,.10);
  margin:9px;
  margin-top:12px
}

.roh-plate-top{
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  padding-bottom:12px;margin-bottom:13px;
  border-bottom:1px solid var(--roh-rule)
}
.roh-yr{
  display:block;font-family:var(--display);font-weight:700;color:var(--purple);
  font-size:clamp(34px,8vw,44px);line-height:.9;letter-spacing:.004em;
  font-variant-numeric:tabular-nums
}
.roh-yr-lab{
  display:block;margin-top:6px;font-family:var(--display);font-weight:600;font-size:10px;
  letter-spacing:.19em;text-transform:uppercase;color:var(--text-muted)
}
.roh-no{
  flex:none;text-align:right;font-family:var(--display);font-weight:600;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted);
  padding-top:5px;font-variant-numeric:tabular-nums
}

.roh-plate h3{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(20px,3.6vw,25px);line-height:1.1;margin:0;letter-spacing:.015em;
  color:var(--purple-ink)
}
.roh-plate h3 a{color:var(--purple-ink);text-decoration:none;border-bottom:2px solid var(--gold)}
.roh-plate h3 a:hover{color:var(--purple);border-bottom-color:var(--purple)}

.roh-role{
  margin:9px 0 0;font-family:var(--display);font-weight:600;font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)
}
.roh-role b{color:var(--purple);font-weight:600}
.roh-date{
  margin:10px 0 0;font-size:13.5px;color:var(--text-muted);line-height:1.5
}
.roh-date b{color:var(--text);font-weight:600}

.roh-hof{
  display:inline-block;margin-top:13px;
  background:var(--gold);color:#041c1f;
  font-family:var(--display);font-weight:600;font-size:10.5px;
  letter-spacing:.13em;text-transform:uppercase;padding:5px 11px
}

/* ---------- scheduled / pending card ---------- */
.roh-pending{
  background-color:var(--purple-ink);
  background-image:var(--roh-grain-dark);
  border:1px solid rgba(68,206,227,.42);
  padding:clamp(20px,3.6vw,32px);
  color:#ffffff
}
.roh-pending h3{
  font-family:var(--display);font-weight:700;text-transform:uppercase;color:#fff;
  font-size:clamp(21px,3.6vw,28px);line-height:1.1;margin:12px 0 0;letter-spacing:.015em
}
.roh-pending h3 a{color:#fff;text-decoration:none;border-bottom:2px solid var(--gold)}
.roh-pending h3 a:hover{color:var(--gold)}
.roh-pending .roh-role{color:var(--gold)}
.roh-pending .roh-role b{color:var(--gold)}
.roh-pending p{margin:13px 0 0;color:#ffffff;font-size:15px;line-height:1.6;max-width:64ch}
.roh-flag{
  display:inline-block;background:var(--gold);color:#041c1f;
  font-family:var(--display);font-weight:600;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;padding:5px 11px
}

/* ---------- body prose ---------- */
.roh-body{max-width:72ch}
.roh-body p{margin:0 0 15px;color:var(--text);font-size:15.5px;line-height:1.66}
.roh-body p:last-child{margin-bottom:0}
.roh-body h3{
  font-family:var(--display);font-weight:700;text-transform:uppercase;color:var(--purple-ink);
  font-size:18px;letter-spacing:.05em;margin:26px 0 10px
}

/* ---------- sourcing note ---------- */
.roh-sources{
  background-color:var(--card);
  background-image:var(--roh-grain-light);
  border:1px solid var(--line);
  border-left:4px solid var(--purple);
  padding:20px 22px;max-width:80ch
}
.roh-sources h2{
  font-family:var(--display);font-weight:700;text-transform:uppercase;color:var(--purple-ink);
  font-size:16px;letter-spacing:.09em;margin:0 0 10px
}
.roh-sources p{margin:0 0 11px;font-size:14px;line-height:1.6;color:var(--text)}
.roh-sources ul{margin:0;padding-left:19px;font-size:14px;line-height:1.65;color:var(--text)}
.roh-sources li{margin-bottom:5px}
.roh-sources a{color:var(--purple);text-decoration:underline;text-underline-offset:3px;word-break:break-word}
.roh-sources a:hover{color:var(--purple-ink)}
.roh-sources p:last-child{margin-bottom:0}

/* ---------- related links ---------- */
.roh-more{
  background:var(--purple);padding:var(--space-4) 0
}
.roh-more h2{
  font-family:var(--display);font-weight:700;text-transform:uppercase;color:#fff;
  font-size:clamp(20px,3.2vw,26px);margin:0 0 18px;letter-spacing:.02em
}
.roh-more-grid{display:grid;gap:10px;grid-template-columns:1fr}
.roh-more-grid a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:rgba(0,0,0,.20);border:1px solid rgba(68,206,227,.34);
  padding:14px 16px;color:#fff;text-decoration:none;
  font-family:var(--display);font-weight:600;font-size:13px;
  letter-spacing:.09em;text-transform:uppercase;
  transition:background var(--t),border-color var(--t)
}
.roh-more-grid a:hover{background:rgba(0,0,0,.34);border-color:var(--gold);color:var(--gold)}
.roh-more-grid svg{width:18px;height:18px;flex:none}

/* ---------- responsive ---------- */
@media (min-width:600px){
  .roh-figs{grid-template-columns:repeat(2,1fr)}
  .roh-more-grid{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:760px){
  .roh-register{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1040px){
  .roh-figs{grid-template-columns:repeat(4,1fr)}
  .roh-register{grid-template-columns:repeat(3,1fr)}
  .roh-more-grid{grid-template-columns:repeat(4,1fr)}
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion:reduce){
  .page-roh *,
  .page-roh *::before,
  .page-roh *::after{
    transition-duration:.01ms!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important
  }
}