:root{
  --ink:#2d1a05;
  --gold:#d9b356;
  --brown:#5b3714;
  --parch:#f4e6c3;
  --parch-deep:#e8d3a3;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family: ui-serif, Georgia, 'Times New Roman', serif;
  color:var(--ink);
  background:
    radial-gradient(ellipse at top left, rgba(255,255,255,.15), transparent 50%),
    radial-gradient(ellipse at bottom right, rgba(0,0,0,.12), transparent 60%),
    url('/assets/images/bg-parchment.jpg') center/cover fixed no-repeat;
}

/* Topbar */
.topbar{background:rgba(0,0,0,.45); color:#fff;}
.topbar-inner{max-width:1100px; margin:0 auto; padding:8px 16px; display:flex; align-items:center; justify-content:space-between;}
.btn{display:inline-block; padding:8px 12px; border-radius:999px; background:var(--gold); color:#000; text-decoration:none; font-weight:700; box-shadow:0 2px 0 rgba(0,0,0,.25)}
.btn.ghost{background:transparent; border:1px solid var(--gold); color:#fff}
.btn.small{padding:6px 10px; font-size:.9rem}
.user-pill{display:flex; align-items:center; gap:8px}
.user-pill img{width:28px; height:28px; border-radius:999px; border:2px solid var(--gold)}

/* Banner */
.banner{
  background: linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.35)), url('/assets/images/castle-bg.jpg') center/cover no-repeat;
  color:#fff; text-align:center; padding:64px 16px;
  border-bottom:4px solid var(--brown);
}
.banner h1{font-size: clamp(28px, 4vw, 48px); margin:0}
.banner h1 span{color:var(--gold); text-shadow:0 2px 0 rgba(0,0,0,.35)}
.banner p{opacity:.95; margin:.5rem 0 0}

/* Navbar */
.navbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:10px 14px; background:var(--brown); color:var(--gold);
  box-shadow:0 4px 0 rgba(0,0,0,.25);
}
.navbar .nav-left,.navbar .nav-right{display:flex; gap:14px; align-items:center}
.navbar .nav-link{color:var(--gold); text-decoration:none; font-weight:800; letter-spacing:.3px}
.navbar .nav-link:hover{opacity:.8; text-decoration:underline}
.castle-link{display:inline-flex; align-items:center; justify-content:center}
.castle-icon{width:40px; height:40px}

/* Sections */
.section{max-width:1100px; margin:24px auto; padding:0 16px}
.section h2{margin:0 0 12px; font-size:1.6rem}
.scrolls{display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:16px}
.scroll{
  background:var(--parch);
  border:3px solid var(--brown);
  border-radius:12px;
  box-shadow:2px 2px 8px rgba(0,0,0,.25);
  padding:16px;
  position:relative;
}
.scroll .seal{position:absolute; right:-8px; bottom:-10px; width:64px; height:64px; background:url('/assets/images/waxseal.png') center/contain no-repeat}
.scroll .meta{font-size:.9rem; opacity:.8; margin-bottom:6px}
.scroll .title{font-weight:800; font-size:1.1rem; margin:.2rem 0 .5rem}
.scroll .body{font-size:1rem; line-height:1.3}
.scroll .actions{display:flex; gap:10px; margin-top:10px}
.emoji-btn{background:transparent; border:1px solid var(--brown); border-radius:8px; padding:6px 10px; cursor:pointer}
.emoji-count{font-weight:700;}

/* Footer */
.site-footer{margin-top:32px; background:var(--brown); color:var(--gold); padding:24px 16px}
.footer-grid{max-width:1100px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:16px}
.footer-link{color:var(--gold); text-decoration:none}
.footer-link:hover{text-decoration:underline}
.list-plain{list-style:none; padding:0; margin:0}
.copy{text-align:center; margin-top:12px; opacity:.85}

/* Responsive */
@media (max-width:700px){
  .navbar{justify-content:center}
  .nav-left,.nav-right{display:none}
}
/* ======================
   PROFILE + BUTTON FIXES
   ====================== */

/* Buttons – keep the medieval look */
.btn {
  display:inline-block;
  padding: .45rem .9rem;
  border-radius: 999px;
  border:1px solid #8b6b2e;
  background: #caa24b;
  color: #2a1a05;
  text-decoration:none;
  font-weight: 600;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
}
.btn:hover { background:#b9933f; color:#2a1a05; }
.btn.small { padding: .28rem .6rem; font-size: 12px; }
.btn.ghost { background: transparent; color:#caa24b; }
.btn.ghost:hover { background: rgba(202,162,75,.12); }

/* Pill buttons used for tabs */
.btn.pill { border-radius: 999px; margin-right: .35rem; }
.btn.pill.active { background:#e0c47a; }

/* Notices */
.notice { margin: .75rem 0; padding:.65rem .8rem; border:1px solid #e0d4b2; background:#fbf5e5; border-radius:12px; }
.notice.success { border-color:#8ac37a; background:#ecf7e9; }
.notice.error { border-color:#c87a7a; background:#faeeee; }

/* Topbar user pill */
.user-pill { display:flex; align-items:center; gap:8px; }
.user-pill .user-link { display:flex; align-items:center; gap:6px; color:inherit; text-decoration:none; }
.user-pill .avatar { width:28px; height:28px; border-radius:50%; object-fit:cover; border:1px solid #8b6b2e; }

/* Profile layout */
.profile .profile-header { display:flex; gap:14px; align-items:center; margin-bottom: .75rem; }
.profile .avatar-lg { width:84px; height:84px; border-radius:12px; object-fit:cover; border:1px solid #8b6b2e; }
.profile .profile-name { margin:0; }
.profile .muted { color:#7a6a56; }
.profile .profile-tabs { margin: .4rem 0 1.1rem; }

/* Card wrapper for forms */
.card { background:#fbf5e5; border:1px solid #e0d4b2; border-radius:12px; padding:12px; }
.card .label { display:block; margin-bottom:.25rem; font-weight:600; }
.card .actions { margin-top:.6rem; }

input[type="file"] { display:block; margin-top:.25rem; }
/* ======================
   FOOTER (SC THEME)
   ====================== */
.sc-footer{
  margin-top:32px;
  background: var(--brown);
  color: var(--gold);
  border-top: 4px solid #3e250e;
  position: relative;
}
.sc-footer .inner{
  max-width:1100px;
  margin:0 auto;
  padding:22px 16px;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  gap:18px;
}
.sc-foot-col{}
.sc-foot-title{
  margin:0 0 .35rem 0;
  font-size:1.05rem;
  letter-spacing:.3px;
  text-transform:uppercase;
}
.sc-foot-text{ margin:.4rem 0 0; line-height:1.35; color:#f1e2b8; }
.sc-foot-links{ list-style:none; margin:.4rem 0 0; padding:0; }
.sc-foot-links li{ margin:.25rem 0; }
.sc-foot-links a{
  color:var(--gold);
  text-decoration:none;
  border-bottom:1px dashed transparent;
}
.sc-foot-links a:hover{
  border-bottom-color:var(--gold);
}
/* Copy line */
.sc-footer .copy{
  text-align:center;
  padding:10px 16px 16px;
  opacity:.9;
  border-top:1px solid rgba(0,0,0,.25);
}

/* CTA button inside footer */
.sc-footer .foot-cta{ margin-top:.7rem; }
.sc-footer .btn.cta{
  /* base .btn already defined; we “embellish” here */
  background: linear-gradient(#d9b356, #c29b45);
  border:1px solid #8b6b2e;
  color:#2d1a05;
  font-weight:800;
  letter-spacing:.2px;
  padding:.55rem 1.05rem;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    0 2px 0 rgba(0,0,0,.25),
    0 0 0 2px rgba(0,0,0,.08);
  transition: transform .05s ease, box-shadow .1s ease, background .2s ease;
}
.sc-footer .btn.cta:hover{
  background: linear-gradient(#e2be61, #caa24b);
}
.sc-footer .btn.cta:active{
  transform: translateY(1px);
  box-shadow:
    inset 0 1px 0 rgba(0,0,0,.12),
    0 1px 0 rgba(0,0,0,.2);
}

/* Responsive: tighten spacing on small screens */
@media (max-width:700px){
  .sc-footer .inner{ gap:12px; }
  .sc-footer .btn.cta{ width:100%; text-align:center; }
}
/* ======================
   Features page • Scroll style
   ====================== */

.features-page .feature-card{
  position: relative;
  background: var(--parch);
  /* subtle parchment texture using layered gradients */
  background-image:
    radial-gradient(ellipse at 20% 0%, rgba(0,0,0,.06), transparent 55%),
    radial-gradient(ellipse at 80% 120%, rgba(0,0,0,.07), transparent 55%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.025) 0 2px, transparent 2px 6px);
  border: 3px solid var(--brown);
  border-radius: 12px;
  padding: 1.1rem 1.2rem 1.25rem;
  color: var(--ink);
  box-shadow:
    0 10px 22px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.features-page .feature-card:hover{
  transform: translateY(-3px);
  box-shadow:
    0 16px 28px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.35);
  filter: saturate(1.05);
}

/* Rolled parchment “caps” (top & bottom) */
.features-page .feature-card::before,
.features-page .feature-card::after{
  content:"";
  position:absolute; left:10px; right:10px; height:14px;
  background:
    radial-gradient(circle at 12px 50%, rgba(0,0,0,.25), transparent 55%),
    radial-gradient(circle at calc(100% - 12px) 50%, rgba(0,0,0,.25), transparent 55%),
    linear-gradient(180deg, var(--parch-deep), var(--parch));
  border: 2px solid var(--brown);
  border-radius: 10px;
  box-shadow: 0 3px 6px rgba(0,0,0,.25);
  z-index: 1;
}
.features-page .feature-card::before{ top:-12px; }
.features-page .feature-card::after{
  bottom:-12px;
  /* slight flip to differ from top roll */
  transform: rotate(180deg);
}

/* Inner “aged” edge shading so content feels inset */
.features-page .feature-card::marker{display:none}
.features-page .feature-card > *{ position: relative; z-index: 2; }
.features-page .feature-card:has(h3)::after,
.features-page .feature-card:has(h3)::before { pointer-events:none; }

/* Headings + copy tuned for contrast */
.features-page .feature-card h3{
  margin: 0 0 .55rem;
  font-size: 1.2rem;
  color: var(--brown);
  text-shadow: 0 1px 0 rgba(255,255,255,.3);
  position: relative;
}

/* Decorative underline */
.features-page .feature-card h3::after{
  content:"";
  display:block;
  height:3px;
  margin:.35rem 0 .1rem;
  background:
    linear-gradient(90deg,
      rgba(91,55,20,.0) 0%,
      rgba(91,55,20,.5) 18%,
      rgba(91,55,20,1) 50%,
      rgba(91,55,20,.5) 82%,
      rgba(91,55,20,0) 100%);
  border-radius:999px;
}

.features-page .feature-card p{
  margin:0;
  line-height:1.55;
  color: var(--ink);
}

/* Grid + titles (kept from earlier, included for completeness) */
.features-page .container{ max-width:1100px; margin:2rem auto; padding:0 1rem; }
.features-page .page-title{
  font-size:2rem; letter-spacing:.5px; text-align:center; margin:0 0 .25rem; color:var(--gold);
}
.features-page .page-subtitle{
  text-align:center; opacity:.95; margin:0 0 2rem; color:var(--parch-deep);
}
.features-page .feature-grid{ display:grid; grid-template-columns:repeat(1,minmax(0,1fr)); gap:1.5rem; }
@media (min-width:700px){ .features-page .feature-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1024px){ .features-page .feature-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
/* ======================
   PARCHMENT CARDS
   ====================== */
.features-page .feature-card {
  position: relative;
  background: var(--parch);
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,.02) 0 2px, transparent 2px 6px),
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.25));
  border: 3px solid var(--brown);
  border-radius: 12px;
  padding: 1.1rem 1.2rem 1.25rem;
  color: var(--ink);
  box-shadow:
    0 10px 22px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.45);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.features-page .feature-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 16px 28px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.45);
  filter: saturate(1.08);
}

/* Headings */
.features-page .feature-card h3 {
  margin: 0 0 .55rem;
  font-size: 1.2rem;
  color: var(--brown);
  text-shadow: 0 1px 0 rgba(255,255,255,.6);
}

/* Body text – higher contrast */
.features-page .feature-card p {
  margin: 0;
  line-height: 1.55;
  color: #1a1005; /* darker ink than var(--ink) */
}
/* ==== Profile layout polish ==== */
.profile.profile-grid {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 20px;
}

.profile-header {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 96px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: var(--panel, #f6ebd6);
  border-radius: 14px;
  box-shadow: var(--card-shadow, 0 2px 0 rgba(0,0,0,.25));
  border: 1px solid #d1b88b;
}

.avatar-bordered {
  border: 3px solid #b69343;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px #6c4b15;
}

.profile-meta .divider-dot {
  margin: 0 8px;
  opacity: .5;
}

.profile-actions .btn.small.ghost { margin-left: 8px; }

/* Left column / friends */
.profile-aside {
  align-self: start;
  padding: 16px;
  background: var(--panel, #f6ebd6);
  border: 1px solid #d1b88b;
  border-radius: 14px;
  box-shadow: var(--card-shadow, 0 2px 0 rgba(0,0,0,.25));
}
.aside-title { margin: 0 0 10px; font-size: 1.05rem; }
.friend-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 8px; }
.friend-item { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; border: 1px solid #d8c29b; background: #fff8ec; }
.friend-item:hover { background: #fff3df; }
.avatar-sm { width: 28px; height: 28px; border-radius: 6px; }

/* Main column */
.profile-main .parchment {
  border: 1px solid #d1b88b;
  background: #fef7e9;
  border-radius: 14px;
  box-shadow: var(--card-shadow, 0 2px 0 rgba(0,0,0,.25));
}
.card-header { display:flex; align-items:center; justify-content:space-between; border-bottom: 1px solid #d8c29b; padding-bottom: 8px; margin-bottom: 12px; }
.icon-link { text-decoration:none; font-size: 1.1rem; }

/* Tabs */
.profile-tabs { display:flex; gap:8px; margin: 14px 0; }
.profile-tabs .btn.pill.active { box-shadow: inset 0 -2px 0 #b69343; }

/* Edit grid */
.edit-grid { display:grid; grid-template-columns: 1fr 12px 1fr; gap: 14px; }
.divider-v { width: 1px; background: #c9ab77; border-left: 1px solid #6c4b15; }
.divider-h { height: 1px; background: #c9ab77; border-top: 1px solid #6c4b15; margin: 12px 0; }
.tiny { font-size: .85rem; }

/* Wall */
.wall-form textarea, .wall-reply-form textarea, .card textarea {
  width: 100%; resize: vertical; border: 1px solid #d8c29b; border-radius: 10px; padding: 8px;
  background: #fffdf7;
}
.wall-list { list-style:none; margin:0; padding:0; display: grid; gap: 14px; }
.wall-item { border-top: 1px dashed #c9ab77; padding-top: 12px; }
.wall-author { display:inline-flex; align-items:center; gap:8px; text-decoration:none; }
.wall-replies { list-style:none; margin:10px 0 0 40px; padding:0; display:grid; gap:10px; }
/* friend button on avatar corner */
.avatar-wrap { position: relative; display: inline-block; }
.friend-btn { position:absolute; top:-8px; right:-8px; }
.friend-btn .btn.tiny { padding: 4px 8px; font-size: 12px; border-radius: 10px; }
.friend-badge { position:absolute; top:-8px; right:-8px; background:#c9ab77; color:#2b1a07; border:1px solid #6c4b15; border-radius:10px; padding:3px 8px; font-size:12px; }
.friend-badge.ok { background:#b0dba8; border-color:#2e6f2a; }

.inline-form { display:inline; margin-left: 8px; }
.link.danger.tiny { background:none; border:none; color:#7a2a2a; font-size:.85rem; cursor:pointer; }
.link.danger.tiny:hover { text-decoration: underline; }
/* fadeable notices */
.notice.fadeable { opacity: 1; }

/* keep from shifting layout on fade */
.notice { will-change: opacity; }

/* tiny btn tweaks already present; just ensuring consistency */
.btn.tiny { padding: 4px 8px; font-size: 12px; border-radius: 10px; }