@import url('/assets/index---jvMoWH.css');

:root { --red:#e3062c; --ink:#080808; --paper:#edeae4; --muted:#918b84; --line:rgba(255,255,255,.13); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:#f5f3ef; background:#050505; font-family:Arial,Helvetica,sans-serif; }
a { color:inherit; text-decoration:none; }
button,input,textarea { font:inherit; }
.topbar { position:sticky; z-index:10; top:0; min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:30px; padding:0 clamp(20px,6vw,100px); background:rgba(5,5,5,.96); border-bottom:1px solid var(--line); backdrop-filter:blur(14px); }
.brand { display:inline-flex; align-items:baseline; color:white; font-weight:900; letter-spacing:.06em; }
.brand span { font-size:1rem; }
.brand strong { color:var(--red); font-size:1.18rem; }
.topbar nav { display:flex; align-items:center; gap:clamp(15px,2.5vw,34px); font-size:.7rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.topbar nav a { color:#aaa6a0; }
.topbar nav a:hover,.topbar nav .active { color:white; }
.topbar nav .active { padding-bottom:5px; border-bottom:1px solid var(--red); }
.hero { min-height:620px; display:grid; grid-template-columns:minmax(0,1.3fr) minmax(280px,.7fr); align-items:center; gap:clamp(40px,8vw,120px); padding:clamp(70px,10vw,145px) clamp(24px,8vw,130px); overflow:hidden; background:linear-gradient(90deg,rgba(0,0,0,.98) 0%,rgba(0,0,0,.78) 55%,rgba(0,0,0,.38) 100%),url('/dermarcel19-wolf-banner.webp') center/cover; border-bottom:1px solid var(--line); }
.hero-copy { max-width:760px; }
.overline { margin:0 0 22px; color:var(--red); font-size:.68rem; font-weight:900; letter-spacing:.22em; text-transform:uppercase; }
.overline.light { color:#aaa6a0; }
h1,h2 { margin:0; font-family:Impact,'Arial Narrow',sans-serif; font-weight:900; line-height:.88; letter-spacing:.01em; text-transform:uppercase; }
h1 { font-size:clamp(4rem,9vw,9rem); }
h2 { font-size:clamp(3rem,6vw,6.4rem); }
h1 em,h2 em { color:transparent; -webkit-text-stroke:1.5px var(--red); font-style:normal; }
.hero-copy>p:not(.overline) { max-width:650px; margin:30px 0; color:#c3bfb9; font-size:clamp(1rem,1.4vw,1.2rem); line-height:1.8; }
.button,.guestbook-form button,.admin-login button,.moderation-actions button { display:inline-flex; align-items:center; justify-content:center; gap:20px; padding:16px 22px; color:white; background:var(--red); border:1px solid var(--red); font-size:.72rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; }
.button:hover,.guestbook-form button:hover,.admin-login button:hover,.moderation-actions button:hover { background:#ff173c; }
.hero-mark { justify-self:center; width:min(300px,60vw); aspect-ratio:1; display:grid; place-content:center; place-items:center; transform:rotate(-4deg); background:rgba(0,0,0,.48); border:1px solid rgba(255,255,255,.24); box-shadow:0 0 90px rgba(227,6,44,.2); }
.hero-mark span { color:#aaa6a0; font-size:1.4rem; font-weight:900; letter-spacing:.3em; }
.hero-mark strong { color:var(--red); font-family:Impact,sans-serif; font-size:7rem; line-height:.9; }
.hero-mark small { margin-top:10px; font-size:.65rem; font-weight:900; letter-spacing:.5em; }
.section { padding:clamp(80px,10vw,150px) clamp(24px,8vw,130px); }
.entries { color:#181818; background:var(--paper); }
.section-title { display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-bottom:60px; }
.section-title h2 em { -webkit-text-stroke-color:var(--red); }
.entry-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.entry-card,.empty-state { min-height:260px; padding:clamp(26px,4vw,48px); background:#fff; border-top:3px solid var(--red); box-shadow:0 12px 30px rgba(0,0,0,.06); }
.entry-meta { display:flex; align-items:center; justify-content:space-between; gap:20px; color:#9b958e; font-size:.65rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.entry-meta span { color:var(--red); font-family:Impact,sans-serif; font-size:1.5rem; }
.entry-card blockquote { margin:34px 0; color:#37332f; font-family:Georgia,serif; font-size:clamp(1.1rem,1.8vw,1.45rem); line-height:1.65; }
.entry-card>strong { color:#161412; font-size:.78rem; letter-spacing:.15em; text-transform:uppercase; }
.empty-state span { color:var(--red); font-family:Impact,sans-serif; font-size:2rem; }
.empty-state h3 { margin:32px 0 12px; font-size:1.5rem; text-transform:uppercase; }
.empty-state p { color:#706b65; line-height:1.7; }
.form-section { display:grid; grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr); gap:clamp(45px,9vw,130px); background:radial-gradient(circle at 0 100%,rgba(227,6,44,.18),transparent 38%),#090909; }
.form-intro>p:not(.overline) { margin:30px 0; color:#aaa6a0; line-height:1.8; }
.form-intro ul { display:grid; gap:15px; padding:0; color:#c8c3bd; list-style:none; }
.form-intro li { padding-left:26px; position:relative; line-height:1.55; }
.form-intro li::before { content:'×'; position:absolute; left:0; color:var(--red); font-weight:900; }
.guestbook-form,.admin-login { display:grid; gap:20px; padding:clamp(26px,4.5vw,55px); background:#f1eee8; color:#181818; border-top:4px solid var(--red); }
.guestbook-form label,.admin-login label { display:grid; gap:9px; }
.guestbook-form label>span,.admin-login label>span { font-size:.68rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.guestbook-form b { color:var(--red); }
.guestbook-form input,.guestbook-form textarea,.admin-login input { width:100%; padding:15px 16px; color:#171717; background:#fff; border:1px solid #cec9c1; border-radius:0; outline:none; }
.guestbook-form input:focus,.guestbook-form textarea:focus,.admin-login input:focus { border-color:var(--red); box-shadow:0 0 0 2px rgba(227,6,44,.12); }
.guestbook-form textarea { resize:vertical; line-height:1.55; }
.guestbook-form small,.admin-login small { color:#756f68; font-size:.72rem; line-height:1.5; }
.privacy-check { grid-template-columns:22px 1fr; align-items:start; }
.privacy-check input { width:18px; height:18px; margin:2px 0 0; accent-color:var(--red); }
.privacy-check span { font-size:.74rem!important; font-weight:500!important; letter-spacing:0!important; line-height:1.6; text-transform:none!important; }
.privacy-check a { color:var(--red); text-decoration:underline; }
.required { margin:0; color:#756f68; font-size:.7rem; }
.honeypot { position:absolute!important; left:-10000px!important; width:1px!important; height:1px!important; overflow:hidden!important; }
.notice { padding:15px 17px; font-size:.82rem; font-weight:700; line-height:1.5; border-left:4px solid; }
.notice.success { color:#194d2c; background:#dff3e5; border-color:#2b9b53; }
.notice.error { color:#771325; background:#f8dde2; border-color:var(--red); }
footer { min-height:120px; display:grid; grid-template-columns:.7fr .7fr 1.6fr; align-items:center; gap:25px; padding:30px clamp(24px,8vw,130px); color:#8f8a84; background:#030303; border-top:1px solid var(--line); font-size:.72rem; }
footer>p { text-align:center; text-transform:uppercase; letter-spacing:.08em; }
footer>div { display:flex; justify-content:flex-end; gap:22px; flex-wrap:wrap; }
footer a:hover { color:white; }
.admin-body { min-height:100vh; background:radial-gradient(circle at 90% 0,rgba(227,6,44,.14),transparent 34%),#080808; }
.admin-main { width:min(1200px,calc(100% - 40px)); margin:0 auto; padding:90px 0 130px; }
.admin-heading { margin-bottom:50px; }
.admin-heading h1,.setup-main h1 { font-size:clamp(3.5rem,8vw,7.5rem); }
.admin-login { width:min(560px,100%); }
.admin-login h2 { margin:0 0 10px; font-size:1.5rem; text-transform:uppercase; }
.admin-login p { color:#6f6962; line-height:1.65; }
.admin-toolbar { display:flex; align-items:stretch; gap:12px; margin-bottom:50px; }
.admin-toolbar>div { min-width:150px; display:grid; padding:20px 25px; background:#171717; border:1px solid var(--line); }
.admin-toolbar strong { color:var(--red); font-family:Impact,sans-serif; font-size:2.2rem; }
.admin-toolbar span { color:#aaa6a0; font-size:.65rem; letter-spacing:.12em; text-transform:uppercase; }
.admin-toolbar form { margin-left:auto; align-self:center; }
.button-secondary { padding:13px 18px; color:#d3cec8; background:transparent; border:1px solid #4a4541; font-size:.68rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; }
.moderation-section { margin-top:60px; }
.moderation-heading { display:flex; align-items:center; gap:18px; padding-bottom:18px; border-bottom:1px solid var(--line); }
.moderation-heading span { color:var(--red); font-family:Impact,sans-serif; font-size:1.7rem; }
.moderation-heading h2 { font-family:Arial,sans-serif; font-size:1rem; letter-spacing:.12em; }
.moderation-list { display:grid; gap:15px; margin-top:20px; }
.moderation-card { display:grid; grid-template-columns:220px 1fr auto; gap:30px; align-items:start; padding:28px; background:#121212; border-left:3px solid #444; }
.moderation-card.pending { border-left-color:var(--red); }
.moderation-meta { display:grid; gap:8px; min-width:0; }
.moderation-meta strong { color:white; }
.moderation-meta a { color:#db3b55; overflow-wrap:anywhere; font-size:.78rem; }
.moderation-meta time { color:#77716b; font-size:.68rem; }
.moderation-card>p { margin:0; color:#d2cdc7; line-height:1.7; white-space:normal; }
.moderation-actions { display:flex; gap:8px; }
.moderation-actions .danger { color:#ff7b90; background:transparent; border-color:#8a2335; }
.admin-empty { padding:28px; color:#8d8780; background:#111; border-left:3px solid #3a3734; }
.setup-main { min-height:100vh; width:min(620px,calc(100% - 40px)); display:grid; align-content:center; gap:35px; margin:0 auto; padding:70px 0; }
.setup-main .admin-login { width:100%; }
.setup-main .overline { margin-bottom:0; }
.setup-main h1 { color:#111; }
.setup-main h1 em { -webkit-text-stroke-color:var(--red); }

@media (max-width:900px) {
  .hero { min-height:auto; grid-template-columns:1fr; }
  .hero-mark { display:none; }
  .section-title,.form-section { grid-template-columns:1fr; }
  .entry-grid { grid-template-columns:1fr; }
  .moderation-card { grid-template-columns:1fr; }
  .moderation-actions { justify-content:flex-start; }
  footer { grid-template-columns:1fr; text-align:center; }
  footer>p { margin:0; }
  footer>div { justify-content:center; }
}

@media (max-width:620px) {
  .topbar { min-height:62px; padding:0 15px; }
  .topbar nav { gap:13px; font-size:.56rem; }
  .topbar nav a:nth-child(2) { display:none; }
  .hero { padding:75px 22px; }
  h1 { font-size:clamp(3.7rem,19vw,5.5rem); }
  h2 { font-size:clamp(3rem,15vw,4.7rem); }
  .section { padding:75px 20px; }
  .form-section { gap:45px; }
  .guestbook-form { padding:25px 18px; }
  .admin-main { width:min(100% - 24px,1200px); padding-top:55px; }
  .admin-toolbar { flex-wrap:wrap; }
  .admin-toolbar>div { flex:1; min-width:120px; }
  .admin-toolbar form { width:100%; margin-left:0; }
  .moderation-actions { flex-direction:column; align-items:stretch; }
  .moderation-actions button { width:100%; }
}

