/* style.css — brutalist + flowing gradient background */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
::selection{background:#000;color:#fff}

body{
  font:15px/1.65 "Courier New",Courier,monospace;
  color:#000;
  max-width:1100px;
  margin:0 auto;
  padding:2rem 1rem;
  position: relative;
  /* Flowing gradient background */
  background: #fffff
}

/* Semi‑transparent white overlay to keep text readable */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.88);
  pointer-events: none;
  z-index: -1;
}

/* Ensure content sits above the overlay */
.navbar, main, footer {
  position: relative;
  z-index: 1;
  background: transparent;
}

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

h1{font-size:clamp(2.5rem,10vw,6rem);text-transform:uppercase;font-weight:900;line-height:.95;letter-spacing:-.03em}
h2{text-transform:uppercase;font-weight:700;font-size:1rem;letter-spacing:.05em;margin:.8rem 0 .2rem}
h3{text-transform:uppercase;font-size:.85rem;letter-spacing:.04em;margin:.5rem 0 .1rem}
p{margin:.3rem 0}
b,strong{font-weight:700}
em{font-style:italic}
ul{margin:.3rem 0 .3rem 1.2rem}
li{margin:.1rem 0}

/* ── NAVBAR (brutalist twist) ── */
.navbar{
  border-top:4px solid #000;
  border-bottom:1px solid #000;
  padding:.6rem 0;
  margin-bottom:2.5rem;
}
.navbar-brand{font-weight:900;letter-spacing:-.02em;font-size:1.8rem}
.nav-link{
  font-weight:700;
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.nav-link.active::before{content:"> "}
.navbar-toggler{border:1px solid #000;border-radius:0;padding:.25rem .6rem}

/* ── HOME TILES ── */
.tile{
  display:block;
  background:#fff;
  border:2px solid #000;
  padding:2rem 1rem;
  text-align:center;
  font-weight:800;
  font-size:1.5rem;
  text-transform:uppercase;
  transition:all 0.1s ease;
}
.tile:hover{
  background:#000;
  color:#fff;
  text-decoration:none;
}
.tile span{
  display:block;
  font-size:.7rem;
  font-weight:400;
  letter-spacing:.1em;
  text-transform:none;
  margin-top:.5rem;
  opacity:.7;
}
.hero{padding:1rem 0 2rem;border-bottom:1px solid #000;margin-bottom:2rem}
.hero p{margin-top:1rem;max-width:540px;font-size:1.1rem}

/* ── INNER PAGES ── */
.page-head{border-bottom:1px solid #000;padding-bottom:.75rem;margin-bottom:2rem}
.page-count{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;margin-top:.35rem;opacity:.55}

/* ── CARD OVERRIDES ── */
.card{
  background:#fff;
  border:1px solid #000 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  transition:0.1s linear;
}
.card:hover{background:#fafafa}
.card img{
  border:1px solid #ddd;
  max-width:100%;
  height:auto;
}

/* Preview cards for staff detail */
.preview-card {
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.preview-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* ── LOADING / ERROR ── */
#content:empty::after{content:"loading…";opacity:.4;font-size:.85rem}
.err{opacity:.4;font-size:.85rem}

/* ── FOOTER ── */
footer{
  border-top:4px solid #000;
  padding-top:.6rem;
  margin-top:4rem;
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.1em;
}