/* TLD-RP website — brand kit palette + raised/3D-aspect buttons */
:root {
  --midnight: #0B0D12;
  --midnight-alt: #0a0b0f;
  --panel: #14161c;
  --panel-2: #1e2028;
  --crown: #D29D4F;
  --highlight: #F5C76F;
  --bronze: #A57332;
  --platinum: #D6D2CD;
  --navy: #1E3A5F;
  --primary-gold: #d4af37;
  --text: #e9eaee;
  --muted: #a8adb8;
  --danger: #c45c5c;
  --ok: #6aa84f;
  --radius: 12px;
  --shadow: 0 10px 30px rgba(0,0,0,.45);
  --font-display: "Cinzel", Georgia, serif;
  --font-body: "Montserrat", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(30,58,95,.35), transparent 60%),
    radial-gradient(900px 500px at 90% 0%, rgba(210,157,79,.12), transparent 55%),
    var(--midnight);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.55;
}
a { color: var(--highlight); text-decoration: none; }
a:hover { color: #fff; text-decoration: underline; }
.skip {
  position: absolute; left: -999px; top: 0; background: var(--crown); color: #111; padding: .5rem 1rem;
}
.skip:focus { left: 1rem; z-index: 50; }
.wrap { width: min(1100px, calc(100% - 2rem)); margin: 0 auto; }
.muted { color: var(--muted); }
.small { font-size: .9rem; }
.center { text-align: center; }

.site-header {
  position: sticky; top: 0; z-index: 20;
  backdrop-filter: blur(10px);
  background: rgba(11,13,18,.85);
  border-bottom: 1px solid rgba(210,157,79,.25);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .75rem 0;
  flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: .75rem; color: inherit; text-decoration: none; }
.brand img {
  width: 56px; height: 56px; object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.5));
  border-radius: 8px;
}
.brand-text { display: flex; flex-direction: column; }
.brand-name {
  font-family: var(--font-display);
  letter-spacing: .08em;
  font-size: 1.15rem;
  text-transform: uppercase;
  background: linear-gradient(180deg, var(--highlight), var(--crown), var(--bronze));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.brand-tag { font-size: .72rem; color: var(--muted); letter-spacing: .04em; }
.nav { display: flex; flex-wrap: wrap; gap: .55rem .9rem; align-items: center; }
.nav-link {
  color: var(--platinum); font-size: .86rem; font-weight: 600; text-decoration: none;
  padding: .35rem .15rem; border-bottom: 2px solid transparent;
}
.nav-link:hover, .nav-link.active { color: var(--highlight); border-bottom-color: var(--crown); text-decoration: none; }
.nav-form { display: inline; margin: 0; }

.main { padding: 1.75rem 0 3rem; }

h1, h2, h3 {
  font-family: var(--font-display);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 700;
  line-height: 1.25;
}
h1 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  background: linear-gradient(180deg, var(--highlight), var(--crown) 55%, var(--bronze));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin: 0 0 .75rem;
}
h2 { color: var(--crown); font-size: 1.35rem; margin: 1.75rem 0 .75rem; }
h3 { color: var(--highlight); font-size: 1.05rem; margin: 1.1rem 0 .4rem; }

.hero {
  display: grid; gap: 1.25rem;
  grid-template-columns: 1.1fr .9fr;
  align-items: center;
  margin-bottom: 2rem;
}
.hero-card, .panel, .card {
  background: linear-gradient(180deg, rgba(20,22,28,.95), rgba(14,16,22,.98));
  border: 1px solid rgba(165,115,50,.35);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.35rem 1.4rem;
}
.hero-art, .feature-art {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px dashed rgba(210,157,79,.55);
  background: var(--panel);
  position: relative;
}
.hero-art img, .feature-art img { display: block; width: 100%; height: auto; }
.placeholder-label {
  position: absolute; left: .75rem; bottom: .75rem;
  background: rgba(11,13,18,.85); color: var(--highlight);
  border: 1px solid var(--bronze); border-radius: 999px;
  padding: .25rem .7rem; font-size: .72rem; font-weight: 600;
  letter-spacing: .03em;
}

.lead { font-size: 1.05rem; color: var(--platinum); max-width: 42rem; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
.chip {
  background: rgba(30,58,95,.45);
  border: 1px solid rgba(210,157,79,.35);
  color: var(--platinum);
  border-radius: 999px;
  padding: .35rem .75rem;
  font-size: .78rem; font-weight: 600;
}

.grid-2 { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Raised / 3D-aspect buttons (Dot preference) */
.btn {
  appearance: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  gap: .4rem; font-family: var(--font-body); font-weight: 700; font-size: .92rem;
  border-radius: 10px; padding: .7rem 1.15rem; text-decoration: none;
  border: 1px solid var(--bronze);
  background: linear-gradient(180deg, var(--highlight) 0%, var(--crown) 48%, var(--bronze) 100%);
  color: #1a1208;
  box-shadow:
    0 1px 0 rgba(255,255,255,.35) inset,
    0 -2px 0 rgba(0,0,0,.25) inset,
    0 6px 14px rgba(0,0,0,.35);
  transition: transform .12s ease, filter .12s ease;
}
.btn:hover { filter: brightness(1.06); transform: translateY(-1px); text-decoration: none; color: #120c05; }
.btn:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 2px 6px rgba(0,0,0,.4); }
.btn-secondary {
  background: linear-gradient(180deg, #2a3348, var(--navy));
  color: var(--platinum);
  border-color: rgba(210,157,79,.4);
}
.btn-secondary:hover { color: #fff; }
.btn-ghost {
  background: transparent; color: var(--platinum); border-color: rgba(214,210,205,.25);
  box-shadow: none;
}
.btn-danger {
  background: linear-gradient(180deg, #d97a7a, #8f3434);
  color: #fff; border-color: #6e2828;
}
.btn-small { padding: .4rem .75rem; font-size: .8rem; }
.actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1rem; }

.banner-draft {
  background: rgba(165,115,50,.15);
  border: 1px solid var(--bronze);
  color: var(--highlight);
  border-radius: var(--radius);
  padding: .85rem 1rem;
  margin-bottom: 1rem;
  font-weight: 600;
}

.rules-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .65rem; }
.rules-list li {
  background: var(--panel); border: 1px solid rgba(165,115,50,.28);
  border-radius: 10px; padding: .85rem 1rem;
}
.rules-list strong { color: var(--crown); font-family: var(--font-display); letter-spacing: .04em; }

.form {
  display: grid; gap: .85rem; max-width: 28rem;
}
label { display: grid; gap: .35rem; font-size: .86rem; font-weight: 600; color: var(--platinum); }
input, select, textarea {
  font: inherit; color: var(--text);
  background: var(--panel-2);
  border: 1px solid rgba(210,157,79,.3);
  border-radius: 8px;
  padding: .65rem .75rem;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid rgba(245,199,111,.55); outline-offset: 1px;
}
.help { font-size: .78rem; color: var(--muted); font-weight: 500; }

.flash { border-radius: 10px; padding: .75rem 1rem; margin-bottom: 1rem; font-weight: 600; }
.flash-ok { background: rgba(106,168,79,.15); border: 1px solid rgba(106,168,79,.45); color: #b6e29e; }
.flash-err { background: rgba(196,92,92,.15); border: 1px solid rgba(196,92,92,.5); color: #f0b0b0; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .86rem; }
th, td { text-align: left; padding: .55rem .45rem; border-bottom: 1px solid rgba(214,210,205,.12); vertical-align: top; }
th { color: var(--crown); font-family: var(--font-display); letter-spacing: .04em; font-weight: 700; }
.badge {
  display: inline-block; border-radius: 999px; padding: .15rem .55rem;
  font-size: .72rem; font-weight: 700; border: 1px solid rgba(210,157,79,.35);
  background: rgba(30,58,95,.35); color: var(--platinum);
}
.badge-owner { background: rgba(210,157,79,.2); color: var(--highlight); }
.badge-admin { background: rgba(30,58,95,.55); color: #fff; }
.badge-pending { color: #f0d090; }
.badge-approved { color: #b6e29e; }

.site-footer {
  border-top: 1px solid rgba(210,157,79,.2);
  background: rgba(10,11,15,.9);
  padding: 1.5rem 0 2rem;
  margin-top: 2rem;
}
.footer-inner p { margin: .35rem 0; }

@media (max-width: 860px) {
  .hero, .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .brand img { width: 44px; height: 44px; }
  .nav { width: 100%; }
}
/* Midnight Metropolitan — approved direction 02 */
:root{--midnight:#090909;--panel:#15120f;--panel-2:#211c16;--text:#f3eee5;--muted:#b7ada0;--navy:#181510;--radius:5px;--font-display:Georgia,'Times New Roman',serif;--font-body:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
body{background:linear-gradient(#080808d9,#080808b8),url('/assets/walnut.webp') repeat;color:var(--text)}
.wrap{width:min(1360px,calc(100% - 64px))}a:focus-visible,button:focus-visible{outline:2px solid #f5c76f;outline-offset:5px}
h1,h2,h3{text-transform:none;letter-spacing:-.025em;font-weight:400}h1{font-size:clamp(2.4rem,5vw,4.7rem);color:#f8f0e2;background:none;margin:0 0 20px}h2{font-size:clamp(1.9rem,3vw,2.8rem);color:#f3e7d3;margin:0 0 16px}h3{font-size:1.5rem;color:#f4e7cf}p{line-height:1.7}em{font-weight:400;color:#e7b960}
.site-header{background:#0a0908f5;border-top:2px solid #b58639;border-bottom:1px solid #65502e;backdrop-filter:blur(16px)}.header-inner{padding:15px 0;flex-wrap:nowrap}.brand{gap:16px;flex-shrink:0}.brand:hover{text-decoration:none}.brand img{height:74px;width:74px;border-radius:0}.brand-name{font-size:1.2rem;letter-spacing:.07em;background:none;color:#e5ca96}.brand-tag{letter-spacing:.45em;color:#c8b086;font-size:.65rem;margin-top:5px}.nav{justify-content:flex-end;gap:16px}.nav-link{font-size:.78rem;font-weight:500}.nav-link.active{border-color:#d4af37}.nav-form .btn{font-size:.75rem}.menu-toggle{display:none}
.main{padding:50px 0 70px;min-height:58vh}.home-page .main{padding-top:0}.midnight-hero{position:relative;min-height:620px;display:flex;align-items:center;background:linear-gradient(90deg,#08080885 0%,#08080812 60%),url('/assets/midnight-hero.webp') center/cover;border-left:1px solid #564322;border-right:1px solid #564322;margin-bottom:24px}.hero-copy{padding:68px 5%;width:61%;position:relative}.eyebrow{font-size:.65rem;letter-spacing:.23em;text-transform:uppercase;color:#d5bd8d;margin:0 0 24px;font-weight:600}.eyebrow span{display:inline-block;width:32px;height:1px;background:#c39849;vertical-align:middle;margin-right:12px}.midnight-hero h1{font-size:clamp(3rem,5.2vw,5.15rem);line-height:1.08;letter-spacing:-.045em}.hero-description{max-width:470px;color:#ded4c5;font-size:1rem;margin:25px 0 30px}.opening{font-size:.7rem;color:#c9bda8;margin-top:29px;letter-spacing:.06em}.opening span{color:#d6a24a;margin-right:9px}.btn{border-radius:3px;padding:13px 23px;border:1px solid #f0c775;background:linear-gradient(135deg,#fff0be 0%,#f2c96b 20%,#c48e32 65%,#ebc069 100%);box-shadow:inset 0 1px 0 #fff5, inset 0 -3px 0 #6c491d80,0 4px 0 #4e361b,0 8px 18px #0006;font-size:.85rem;gap:22px}.btn-secondary,.btn-ghost{background:#0c0b09b3;color:#e9d7b6;border:1px solid #aa8240;box-shadow:inset 0 0 0 3px #0007,0 4px 0 #0005}.btn-secondary:hover,.btn-ghost:hover{color:#fff0c5}.btn-small{padding:7px 12px}.btn-danger{background:linear-gradient(#b94c44,#712d28);color:#fff;border-color:#cf7567}
.brand-banner{padding:4px;border:1px solid #b7914c;background:#0b0906;box-shadow:inset 0 0 0 2px #332615}.brand-banner img{display:block;width:100%;height:auto}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin:48px 0 25px}.section-heading .eyebrow{margin-bottom:9px}.section-heading h2{margin:0}.text-link{white-space:nowrap;font-size:.8rem;color:#dab66a}.grid-3{gap:20px}.story-card{display:block;overflow:hidden;border:1px solid #775c2f;background:linear-gradient(#15110dbf,#14100dee),url('/assets/walnut.webp');border-radius:4px;color:var(--text);transition:transform .2s,border-color .2s}.story-card:hover{transform:translateY(-4px);border-color:#e4bb6d;text-decoration:none;color:var(--text)}.story-card img{width:100%;height:230px;object-fit:cover;display:block}.story-content{padding:25px}.card-number{font-size:.6rem;letter-spacing:.16em;color:#bda57e}.story-content h3{margin:10px 0}.story-content h3 span{float:right;color:#dfb767;font-size:1.2rem}.story-content p{color:#bcb2a3;font-size:.85rem;margin:0}.values-strip{display:grid;grid-template-columns:repeat(3,1fr);margin:45px 0;padding:27px 0;border-top:1px solid #6b522e;border-bottom:1px solid #6b522e}.values-strip>div{padding:0 28px;border-right:1px solid #54432b}.values-strip>div:last-child{border:0}.values-strip span{float:left;margin:5px 18px 20px 0;font-family:Georgia,serif;font-size:1.9rem;color:#b68c47}.values-strip h3{font-size:1.2rem;margin:0 0 5px}.values-strip p{font-size:.72rem;color:#b6ab9a;margin:0}.community-callout{text-align:center;padding:55px 24px;background:linear-gradient(#0a0908d9,#0a0908f7),url('/assets/midnight-banner.webp') center/cover;border:1px solid #514028}.community-callout h2{font-size:3rem;line-height:1.1}.community-callout p:not(.eyebrow){color:#bcb09e;font-size:.9rem}.community-callout .btn{margin-top:15px}
.panel,.card{background:linear-gradient(130deg,#1c1710e8,#0d0c0bf5);border-color:#5d4729;border-radius:4px;padding:28px}.panel{margin-top:20px}.card h2{font-size:1.65rem}.feature-art{border:1px solid #826333;margin:28px 0}.feature-art img{width:100%;height:370px;object-fit:cover}.section-space{margin:28px 0}.inner-page .lead{max-width:750px}.inner-page .main>h1{max-width:1000px}.form{max-width:440px}.form .btn{margin:12px 0}.chip,.badge{background:#4e391d40}.banner-draft{font-size:.88rem;line-height:1.7;border-radius:4px}.rules-list li{background:#16120c;border-color:#513e24}.rules-list strong{letter-spacing:0}.site-footer{margin-top:0;background:#080807e8;border-top:1px solid #69502c;padding:38px 0}.footer-inner{display:grid;grid-template-columns:1fr auto;gap:18px 30px}.footer-brand strong{font:1.05rem Georgia,serif;letter-spacing:.08em;color:#d4b77e}.footer-brand strong span{display:block;font: .6rem system-ui;letter-spacing:.4em;margin-top:8px}.footer-brand p{color:#aaa08f;font-size:.78rem;margin-top:12px}.footer-links{display:flex;gap:22px;flex-wrap:wrap;align-items:start}.footer-links a{font-size:.76rem;color:#cfbd9b}.footer-inner>.small{grid-column:1/-1;font-size:.65rem;color:#80796d}code{overflow-wrap:anywhere}.table-wrap{max-width:100%}
@media(min-width:1600px){.midnight-hero{min-height:680px}}
@media(max-width:1150px){.brand-name{font-size:.9rem}.brand img{width:58px;height:58px}.nav{gap:12px}.nav-link{font-size:.72rem}.hero-copy{width:65%}.midnight-hero{min-height:570px}.story-card img{height:200px}.values-strip>div{padding:0 15px}}
@media(max-width:960px){.wrap{width:calc(100% - 36px)}.header-inner{flex-wrap:wrap}.brand-name{font-size:1rem}.js .menu-toggle{display:block;background:transparent;border:1px solid #8f6a32;color:#e7d6b2;border-radius:3px;padding:9px 12px}.js .menu-toggle[hidden]{display:none}.nav{width:100%;justify-content:flex-start;gap:15px;padding:12px 0}.js .nav{display:none}.js .nav.is-open{display:flex}.nav-link{font-size:.9rem}.hero-copy{width:70%;padding:48px 5%}.midnight-hero{background-position:60% center;min-height:560px}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.story-content{padding:18px}.story-card img{height:180px}.values-strip h3{font-size:1rem}.section-heading h2{font-size:2rem}.footer-inner{grid-template-columns:1fr}.footer-links{margin-top:10px}}
@media(max-width:680px){.wrap{width:calc(100% - 24px)}.brand img{width:48px;height:48px}.brand-name{font-size:.83rem}.brand-tag{font-size:.55rem}.brand{gap:10px}.midnight-hero{min-height:660px;align-items:flex-start;background-image:linear-gradient(180deg,#080808a6 0%,#08080885 42%,#08080800 75%),url('/assets/midnight-hero.webp');background-position:63% center}.hero-copy{width:100%;padding:38px 22px}.midnight-hero h1{font-size:3.1rem}.hero-description{font-size:.9rem;max-width:360px}.eyebrow{font-size:.57rem;letter-spacing:.16em}.hero-copy .eyebrow span{display:none}.btn{font-size:.78rem;padding:12px 15px;gap:10px}.opening{font-size:.64rem}.grid-2,.grid-3{grid-template-columns:1fr}.story-card img{height:230px}.section-heading{display:block;margin-top:35px}.section-heading .text-link{display:inline-block;margin-top:12px}.values-strip{grid-template-columns:1fr;margin:30px 0;padding:0}.values-strip>div{padding:20px 12px;border-right:0;border-bottom:1px solid #51402a}.values-strip h3{font-size:1.3rem}.values-strip p{font-size:.8rem}.community-callout{padding:38px 15px}.community-callout h2{font-size:2.5rem}.main{padding-top:32px}.panel,.card{padding:20px}.feature-art img{height:240px}.brand-banner{margin-top:0}.footer-links{gap:16px}.form{max-width:100%}input,select,textarea{min-width:0;max-width:100%;font-size:16px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}