:root{
  --tcn-bg:#171717;
  --tcn-bg2:#101010;
  --tcn-fg:#ffffff;
  --tcn-muted:rgba(255,255,255,.78);
  --tcn-border:rgba(255,255,255,.10);
  --tcn-accent:#9b0202;
  --tcn-max:1200px;
  --tcn-radius:10px;

  /* Fixed header height: adjust if needed */
  --tcn-header-h:140px;
}

/* Screen-reader only */
.tcn-sr{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* Fixed "freeze pane" header */
.tcn-masthead{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:9999;
}

/* Make room for the fixed header */
body{ padding-top: var(--tcn-header-h); }
html{ scroll-padding-top: var(--tcn-header-h); }

/* Shared centred content container INSIDE full-width bands */
.tcn-inner{
  max-width:var(--tcn-max);
  margin:0 auto;
  padding:0 12px;
}

/* ===== Red brand strip (full width) ===== */
.tcn-brand-row{
  background:var(--tcn-accent);
}

.tcn-brand-inner{
  padding:16px 0 18px 0; /* horizontal padding comes from .tcn-inner */
}

.tcn-brand-title{
  margin:0;
  font-size:28px;
  font-weight:800;
  letter-spacing:1px;
}

.tcn-brand-title a{
  color:var(--tcn-fg);
  text-decoration:none;
}

.tcn-brand-subtitle{
  margin:6px 0 0 0;
  font-size:14px;
  color:rgba(255,255,255,.85);
}

/* ===== Black nav strip (full width) ===== */
.tcn-nav-row{
  background:var(--tcn-bg);
  border-bottom:1px solid rgba(255,255,255,.08);
}

/* This is now the FLEX row, NOT the max-width container */
.tcn-nav__inner{
  display:flex;
  align-items:center;
  gap:14px;
  padding:10px 0; /* horizontal padding comes from .tcn-inner */
}

/* Logo */
.tcn-logo{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--tcn-fg);
  text-decoration:none;
}
.tcn-logo__mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:10px;
  background:var(--tcn-accent);
  font-weight:800;
  letter-spacing:.5px;
}
.tcn-logo__text{
  font-weight:700;
  letter-spacing:.2px;
}

/* Buttons */
.tcn-btn{
  border:1px solid var(--tcn-border);
  background:var(--tcn-bg2);
  color:var(--tcn-fg);
  border-radius:10px;
  padding:8px 10px;
  cursor:pointer;
}
.tcn-btn:focus{
  outline:2px solid rgba(255,255,255,.35);
  outline-offset:2px;
}
.tcn-btn--icon{
  width:42px;
  height:42px;
  display:none;
  align-items:center;
  justify-content:center;
}

/* Hamburger icon */
.tcn-icon{
  width:18px;
  height:2px;
  background:var(--tcn-fg);
  display:block;
  position:relative;
}
.tcn-icon:before,
.tcn-icon:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:2px;
  background:var(--tcn-fg);
}
.tcn-icon:before{ top:-6px; }
.tcn-icon:after{ top:6px; }

/* Links */
.tcn-links{
  display:flex;
  align-items:center;
  gap:2px;
  margin:0;
  padding:0;
  list-style:none;
}
.tcn-links a{
  display:block;
  padding:10px 10px;
  border-radius:10px;
  color:var(--tcn-muted);
  text-decoration:none;
  white-space:nowrap;
}
.tcn-links a:hover{
  background:rgba(255,255,255,.06);
  color:var(--tcn-fg);
}

/* Search */
.tcn-search{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:8px;
}
.tcn-search input{
  width:200px;
  max-width:28vw;
  border:1px solid var(--tcn-border);
  background:#0c0c0c;
  color:var(--tcn-fg);
  border-radius:10px;
  padding:9px 10px;
}

/* More menu */
.tcn-more{ position:relative; }
.tcn-more__panel{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  min-width:220px;
  background:var(--tcn-bg2);
  border:1px solid var(--tcn-border);
  border-radius:12px;
  padding:8px;
  box-shadow:0 12px 30px rgba(0,0,0,.35);
  display:none;
}
.tcn-more__panel a{
  padding:10px 10px;
  border-radius:10px;
  color:var(--tcn-muted);
}
.tcn-more__panel a:hover{
  background:rgba(255,255,255,.06);
  color:var(--tcn-fg);
}
.tcn-more.is-open .tcn-more__panel{ display:block; }

/* Mobile panel */
.tcn-mobile{
  padding:0 0 12px 0;
}
.tcn-links--mobile{
  flex-direction:column;
  align-items:stretch;
  gap:6px;
  padding-top:10px;
}
.tcn-links--mobile a{ background:rgba(255,255,255,.04); }

/* Responsive */
@media (max-width: 980px){
  .tcn-links--desktop{ display:none; }
  .tcn-btn--icon{ display:inline-flex; }
  .tcn-search input{ width:140px; max-width:40vw; }
}