:root{
  --bg-deep:#12150d;
  --bg-deep-2:#1b2015;
  --khaki:#c9b380;
  --khaki-dim:rgba(201,179,128,0.14);
  --moss:#8ea06a;
  --moss-dim:rgba(142,160,106,0.16);
  --rust:#a1673f;
  --sand:#d8c9a3;
  --dark-green:#5f6b45;
  --glass:rgba(255,255,255,0.05);
  --glass-hover:rgba(255,255,255,0.085);
  --glass-border:rgba(216,201,163,0.16);
  --glass-border-hover:rgba(216,201,163,0.34);
  --text-primary:#ede8da;
  --text-secondary:#a9a690;
  --text-tertiary:#6f6d5c;
  --danger:#d97a5a;
  --font-head:'Oswald', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'JetBrains Mono', monospace;
  --radius:14px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  min-height:100vh;
  font-family:var(--font-body);
  color:var(--text-primary);
  text-shadow:
    0 2px 3px rgba(0,0,0,0.95),
    0 2px 8px rgba(0,0,0,0.75);
background:
    repeating-radial-gradient(circle at 15% 12%, transparent 0 22px, rgba(201,179,128,0.045) 22px 23px, transparent 23px 46px),
    repeating-radial-gradient(circle at 88% 78%, transparent 0 26px, rgba(142,160,106,0.05) 26px 27px, transparent 27px 54px),
    repeating-radial-gradient(circle at 50% 100%, transparent 0 30px, rgba(216,201,163,0.03) 30px 31px, transparent 31px 62px),
    linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-deep-2) 100%);
  background-attachment: fixed;
}

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

.wrap{ position:relative; z-index:1; max-width:1180px; margin:0 auto; padding:44px 24px 90px; }


/* ---------- random top hero background ---------- */
body{
  position:relative;
  isolation:isolate;
}

.hero-background{
  position:absolute;
  z-index:0;
  top:0;
  left:0;
  width:100%;
  height:900px;
  pointer-events:none;
  background-size:cover;
  background-position:center top;
  background-repeat:no-repeat;

  /* Fade the whole image to transparent, revealing the real page background. */
  -webkit-mask-image:linear-gradient(
    to bottom,
    #000 0%,
    #000 48%,
    rgba(0,0,0,.85) 62%,
    rgba(0,0,0,.45) 78%,
    transparent 100%
  );
  mask-image:linear-gradient(
    to bottom,
    #000 0%,
    #000 48%,
    rgba(0,0,0,.85) 62%,
    rgba(0,0,0,.45) 78%,
    transparent 100%
  );
}

@media (max-width:820px){
  .hero-background{
    height:900px;
    background-position:center top;
  }
}

/* ---------- top bar ---------- */
.topbar{
  display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:10px;
  margin-bottom:26px;
}
.brand{ display:flex; flex-direction:column; gap:4px; }
.brand .eyebrow{
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--khaki); display:flex; align-items:center; gap:8px;
}
.brand .eyebrow::before{
  content:""; width:6px; height:6px; border-radius:50%; background:var(--khaki);
  box-shadow:0 0 8px 2px var(--khaki);
}
.brand h1{
  font-family:var(--font-head); text-transform:uppercase; font-weight:600;
  letter-spacing:0.03em; font-size:clamp(26px, 4vw, 38px); margin:0; line-height:1;
}
.brand h1 a{ color:var(--text-primary); }
.brand h1 span{ color:var(--khaki); }

.crumbs{
  font-family:var(--font-mono); font-size:12px; color:var(--text-tertiary);
}
.crumbs a{ color:var(--moss); }
.crumbs a:hover{ text-decoration:underline; }

/* ---------- panel (glass) ---------- */
.paneltop{
  background:var(--glass);
  border:1px solid var(--glass-border);
  border-radius:18px;
  backdrop-filter:blur(3px) saturate(150%);
  -webkit-backdrop-filter:blur(3px) saturate(150%);
  padding:24px 24px 20px;
  box-shadow:0 18px 50px -20px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,255,255,0.11);
  margin-bottom:28px;
}

.panel{
  background:var(--glass);
  border:1px solid var(--glass-border);
  border-radius:18px;
  backdrop-filter:blur(16px) saturate(130%);
  -webkit-backdrop-filter:blur(16px) saturate(130%);
  padding:24px 24px 20px;
  box-shadow:0 18px 50px -20px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06);
  margin-bottom:28px;
}

h2.section-title{
  font-family:var(--font-head); text-transform:uppercase; letter-spacing:0.05em;
  font-size:15px; color:var(--text-secondary); margin:0 0 16px;
  display:flex; align-items:center; gap:10px;
}
h2.section-title::before{ content:""; width:16px; height:2px; background:var(--khaki); }

.subtitle{ color:var(--text-secondary); font-size:14.5px; margin:6px 0 0; max-width:60ch; }
.abouttext{
  color:#fff;
  font-size:14.5px;
  margin:6px 0 0;
  max-width:60ch;
}

/* ---------- comms columns: news (1/3) + links (2/3) ---------- */
/* News = 1/3 width, Quick Links = 2/3 width */
.comms-columns{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 2fr);
  gap:24px;
  align-items:start;
}
.news-col,
.links-col{ min-width:0; }
.subsection-title{
  font-family:var(--font-head); text-transform:uppercase; letter-spacing:0.04em; font-size:12.5px;
  color:var(--text-secondary); margin:0 0 14px; padding-bottom:8px;
  display:flex; align-items:center; gap:8px;
}
 .news-col > .subsection-title::before{
  content:"📰";
  font-size:15px;
  line-height:1;
  filter:grayscale(1);
}

.news-list{ display:flex; flex-direction:column; gap:14px; }
.news-item{
  position:relative;
  padding:0 0 14px;
  background:transparent;
  transition:color .15s ease;
}
.news-item:hover{ background:transparent; }
.news-date{
  display:block; font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.05em;
  color:var(--text-tertiary); text-transform:uppercase; margin-bottom:4px;
}
.news-title{
  display:block; font-family:var(--font-head); text-transform:uppercase; letter-spacing:0.01em;
  font-size:14.5px; line-height:1.3; margin-bottom:5px;
}
.news-title:hover{ color:var(--khaki); }
.news-teaser{ margin:0; font-size:12.5px; color:var(--text-secondary); line-height:1.4; }
.news-admin{ position:absolute; top:10px; right:10px; display:flex; gap:6px; }

@media (max-width:820px){
  .comms-columns{ grid-template-columns:1fr; }
}

/* ---------- quick links grid ---------- */
.link-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:14px;
}
.link-card{
  position:relative; border:1px solid var(--glass-border); border-radius:12px;
  padding:14px 16px; background:rgba(0,0,0,0.15); transition:all .15s ease;
}
.link-card:hover{ border-color:var(--glass-border-hover); background:rgba(0,0,0,0.25); transform:translateY(-2px); }
.link-card a.title{ font-family:var(--font-head); text-transform:uppercase; letter-spacing:0.02em; font-size:15px; display:block; margin-bottom:4px; }
.link-card a.title:hover{ color:var(--khaki); }
.link-card p{ margin:0; font-size:13px; color:var(--text-secondary); line-height:1.4; }
.link-card .badge{ position:absolute; top:12px; right:12px; }

/* ---------- badge / stamp ---------- */
.badge{
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--badge-color, var(--moss)); border:1px solid var(--badge-color, var(--moss));
  border-radius:4px; padding:2px 7px; transform:rotate(-2deg); display:inline-block;
  background:rgba(0,0,0,0.2);
}

/* ---------- controls: search + chips ---------- */
.controls{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-bottom:14px; }
.search-slot{ flex:1 1 240px; position:relative; display:flex; align-items:center; }
.search-slot svg{ position:absolute; left:14px; width:15px; height:15px; stroke:var(--text-tertiary); pointer-events:none; }
.search-slot input{
  width:100%; font-family:var(--font-body); font-size:14px; color:var(--text-primary);
  background:rgba(0,0,0,0.2); border:1px solid var(--glass-border); border-radius:10px;
  padding:10px 14px 10px 36px; outline:none; transition:border-color .15s ease;
}
.search-slot input:focus{ border-color:var(--khaki); }
.count{ font-family:var(--font-mono); font-size:11.5px; color:var(--text-tertiary); white-space:nowrap; }
.count b{ color:var(--text-secondary); }

.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.chip{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:0.02em; color:var(--text-secondary);
  background:rgba(255,255,255,0.03); border:1px solid var(--glass-border); border-radius:999px;
  padding:6px 13px; cursor:pointer; transition:all .15s ease; user-select:none;
}
.chip:hover{ border-color:var(--glass-border-hover); color:var(--text-primary); }
.chip.active{ background:var(--khaki); border-color:var(--khaki); color:#161a0f; font-weight:600; }

/* ---------- terrain/mod grid (dossier cards w/ corner brackets) ---------- */
.grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(272px, 1fr)); gap:18px; }

.tile{
  position:relative; border:1px solid var(--glass-border); border-radius:var(--radius);
  background:var(--glass); overflow:hidden; display:flex; flex-direction:column;
  transition:transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.tile:hover{ transform:translateY(-3px); border-color:var(--glass-border-hover); background:var(--glass-hover); box-shadow:0 16px 40px -18px rgba(0,0,0,0.55); }

.tile .thumb{ position:relative; aspect-ratio:16/9; overflow:hidden; background:
    repeating-linear-gradient(135deg, rgba(201,179,128,0.06) 0 2px, transparent 2px 14px),
    linear-gradient(160deg, #232a17, #171a10); }
.tile .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.tile .thumb .no-image{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.1em; color:var(--text-tertiary); text-transform:uppercase; }

/* corner brackets, drawn over the thumbnail */
.tile .thumb::before, .tile .thumb::after{
  content:""; position:absolute; width:18px; height:18px; border-color:var(--khaki); opacity:.7; pointer-events:none;
}
.tile .thumb::before{ top:8px; left:8px; border-top:2px solid; border-left:2px solid; }
.tile .thumb::after{ bottom:8px; right:8px; border-bottom:2px solid; border-right:2px solid; }

.tile .body{ padding:14px 16px 16px; display:flex; flex-direction:column; gap:8px; flex:1; }
.tile .top-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.tile h3{ font-family:var(--font-head); text-transform:uppercase; letter-spacing:0.01em; font-size:16px; margin:0; line-height:1.25; }
.tile h3 a:hover{ color:var(--khaki); }
.tile p.summary{ font-size:13px; color:var(--text-secondary); line-height:1.5; margin:0; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.tile .foot{ margin-top:auto; padding-top:6px; display:flex; align-items:center; justify-content:space-between; }
.tile .go{ font-size:13px; color:var(--text-tertiary); transition:transform .2s ease, color .2s ease; font-family:var(--font-mono); }
.tile:hover .go{ transform:translateX(3px); color:var(--khaki); }
.tile .admin-row{ position:absolute; top:8px; left:8px; display:flex; gap:6px; z-index:2; }

/* ---------- icon buttons ---------- */
.icon-btn{
  background:rgba(0,0,0,0.4); border:1px solid var(--glass-border); color:var(--text-secondary);
  width:24px; height:24px; border-radius:6px; font-size:12px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:all .15s ease;
}
.icon-btn:hover{ color:var(--text-primary); border-color:var(--glass-border-hover); }
.icon-btn.del:hover{ color:var(--danger); border-color:rgba(217,122,90,0.5); }

/* ---------- buttons ---------- */
.btn{
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.03em; color:#161a0f;
  background:var(--khaki); border:1px solid var(--khaki); border-radius:9px; padding:9px 15px;
  cursor:pointer; transition:opacity .15s ease, transform .15s ease;
}
.btn:hover{ opacity:.88; }
.btn:active{ transform:translateY(1px); }
.btn.ghost{ background:transparent; color:var(--text-secondary); border-color:var(--glass-border); }
.btn.ghost:hover{ color:var(--text-primary); border-color:var(--glass-border-hover); }

/* ---------- manage panel ---------- */
details.manage{ margin-top:6px; border-top:1px solid var(--glass-border); padding-top:16px; }
details.manage summary{
  cursor:pointer; font-family:var(--font-mono); font-size:11.5px; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--text-secondary); list-style:none; display:flex; align-items:center; gap:8px;
}
details.manage summary::-webkit-details-marker{ display:none; }
details.manage summary::before{ content:"▸"; display:inline-block; transition:transform .15s ease; color:var(--khaki); }
details.manage[open] summary::before{ transform:rotate(90deg); }
details.manage summary:hover{ color:var(--text-primary); }

.manage-body{ margin-top:16px; }
.flash{ font-size:13px; color:var(--khaki); background:rgba(201,179,128,0.1); border:1px solid rgba(201,179,128,0.3); border-radius:10px; padding:9px 13px; margin-bottom:14px; }

.login-form{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; max-width:360px; }
.login-form input[type=password]{
  flex:1 1 auto; font-family:var(--font-body); font-size:13.5px; color:var(--text-primary);
  background:rgba(0,0,0,0.2); border:1px solid var(--glass-border); border-radius:10px; padding:9px 12px; outline:none;
}
.login-form input[type=password]:focus{ border-color:var(--khaki); }

.admin-toolbar{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:16px; }
.admin-toolbar .who{ font-family:var(--font-mono); font-size:11.5px; color:var(--text-tertiary); }

.edit-form{ display:grid; grid-template-columns:1fr 1fr; gap:10px; max-width:720px; }
.edit-form .full{ grid-column:1 / -1; }
.edit-form label{ display:block; font-family:var(--font-mono); font-size:10px; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-tertiary); margin-bottom:5px; }
.edit-form input, .edit-form textarea{
  width:100%; font-family:var(--font-body); font-size:13.5px; color:var(--text-primary);
  background:rgba(0,0,0,0.2); border:1px solid var(--glass-border); border-radius:10px; padding:9px 12px; outline:none; resize:vertical;
}
.edit-form input:focus, .edit-form textarea:focus{ border-color:var(--khaki); }
.edit-form .actions{ grid-column:1 / -1; display:flex; gap:10px; margin-top:4px; }
.edit-form h4{ grid-column:1/-1; font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-tertiary); margin:10px 0 -2px; }

/* ---------- workshop subpage ---------- */
.hero-image{
  position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--glass-border);
  aspect-ratio:16/7; background:linear-gradient(160deg,#232a17,#171a10); margin-bottom:22px;
}
.hero-image img{ width:100%; height:100%; object-fit:cover; display:block; }
.hero-image .no-image{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:12px; letter-spacing:0.12em; color:var(--text-tertiary); text-transform:uppercase; }
.hero-image::before, .hero-image::after{ content:""; position:absolute; width:26px; height:26px; border-color:var(--khaki); opacity:.8; z-index:2; }
.hero-image::before{ top:12px; left:12px; border-top:2px solid; border-left:2px solid; }
.hero-image::after{ bottom:12px; right:12px; border-bottom:2px solid; border-right:2px solid; }

.item-header{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:6px; }
.item-title{ font-family:var(--font-head); text-transform:uppercase; font-size:clamp(24px,3.6vw,34px); margin:0; letter-spacing:0.01em; }
.item-summary{ color:var(--text-secondary); font-size:15px; margin:10px 0 20px; max-width:70ch; }
.item-body{ font-size:15px; line-height:1.75; color:var(--text-primary); max-width:72ch; }
.item-body p{ margin:0 0 14px; }
.item-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:22px; }
.item-actions a.btn{ display:inline-block; }

/* ---------- footer ---------- */
footer{ text-align:center; color:var(--text-tertiary); font-family:var(--font-mono); font-size:11px; margin-top:50px; letter-spacing:0.04em; }

@media (max-width:520px){
  .wrap{ padding:32px 16px 70px; }
  .panel{ padding:20px 18px 16px; border-radius:14px; }
  .edit-form{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .tile, .link-card, .go{ transition:none; }
}