:root{
  --bg1:#ff9a8b; --bg2:#ff6a88; --bg3:#ff99ac;
  --text:#2b2b2b; --muted:#5b5b5b; --card:#ffffffee;
  --card-border: rgba(0,0,0,.06); --accent:#ec6f66;
  --accent-2:#f3a183; --accent-3:#fbc2eb; --link:#a12a2a; --link-hover:#6c1a1a;
  --shadow: 0 6px 24px rgba(0,0,0,.15); --radius:16px; --radius-sm:10px; --maxw:1100px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text); line-height:1.5;
  background: radial-gradient(1200px 800px at 10% -10%, var(--bg3), transparent 60%),
              radial-gradient(900px 600px at 110% 20%, var(--bg2), transparent 60%),
              linear-gradient(135deg, var(--bg1), var(--bg2) 40%, var(--bg3));
  background-attachment: fixed; position:relative; overflow-x:hidden;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='rgba(255,255,255,0.18)' stroke-width='0.6'%3E%3Cpath d='M0 20h40M20 0v40'/%3E%3Ccircle cx='20' cy='20' r='6' stroke='rgba(255,255,255,0.22)'/%3E%3C/g%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
/* Header / Nav */
header{ position:sticky; top:0; z-index:50; backdrop-filter: blur(8px);
  background:linear-gradient(to right,#ffffffd9,#fff8f6d9); border-bottom:1px solid rgba(255,255,255,.6);}
.nav{ max-width:var(--maxw); margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:12px 18px;}
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit;}
.logo{ width:38px; height:38px; border-radius:12px;
  background:conic-gradient(from 210deg,var(--accent),var(--accent-2),var(--accent-3),var(--accent));
  box-shadow:var(--shadow); display:grid; place-items:center; color:white; font-weight:700;}
.brand span{ font-weight:800; letter-spacing:.3px }
nav a{ text-decoration:none; color:var(--link); padding:8px 12px; border-radius:10px; font-weight:600;}
nav a:hover, nav a:focus{ background:#ffffffaa; color:var(--link-hover); outline:none }
nav a[aria-current="page"]{ background:#fff2ee; border:1px solid #ffd8ce; color:#6e2a2a }

/* Layout */
.wrapper{ max-width:var(--maxw); margin:0 auto; padding:32px 18px;}
h1{ margin:0 0 6px; font-size:clamp(28px,5vw,42px); color:#2a1818; text-shadow:0 2px 0 rgba(255,255,255,.6);}
.lead{ margin:0 0 14px; color:var(--muted) }

/* Controls */
.controls{ display:flex; gap:10px; flex-wrap:wrap; margin:14px 0 18px }
input[type="search"], select{
  padding:10px 12px; border-radius:10px; border:1px solid #ffd8ce; background:#fff7f3; color:#6e2a2a;
}
.btn{ border:none; cursor:pointer; font-weight:700; padding:10px 14px; border-radius:12px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:white; box-shadow:var(--shadow);}
.pill{ padding:6px 10px; border-radius:999px; background:#fff1ec; color:#7b2d2d; border:1px solid #ffd8ce; font-weight:600; font-size:.9rem;}
.muted{ color:#6e2a2a }

/* Cards / lists */
.card{ background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px;}
.grid{ display:grid; gap:16px; grid-template-columns: repeat(auto-fill,minmax(260px,1fr)); }
.list{ display:grid; gap:12px; }
.item{ background:#fff; border:1px solid var(--card-border); border-radius:12px; padding:14px; display:grid; gap:8px; }
.item a.title{ font-weight:800; color:#5a2a2a; text-decoration:none }
.item a.title:hover{ text-decoration:underline }
.item .meta{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; font-size:.9rem; color:#6e2a2a }
.badge{ background:#ffe3db; color:#6e2a2a; border:1px solid #ffd1c5; border-radius:8px; padding:2px 6px; font-weight:700; font-size:.75rem;}
footer{ margin:40px 0 50px; text-align:center; color:#5a2a2a; font-weight:600;}
.sr-only{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
.empty{ color:#6e2a2a; background:#fff6f3; border:1px dashed #ffd8ce; padding:14px; border-radius:10px; text-align:center;}
/* === Autumn / Fall theme override === */
:root{
  /* Harvest gradient */
  --bg1:#f4d06f;   /* harvest gold */
  --bg2:#e0873c;   /* pumpkin */
  --bg3:#c75b2a;   /* burnt orange */

  /* Text & surfaces */
  --text:#2b231e;       /* deep walnut */
  --muted:#6b5a4d;      /* toasted brown */
  --card:#fffaf6ee;     /* warm paper */
  --card-border: rgba(82, 52, 33, .08);

  /* Accents */
  --accent:#d86b3a;     /* pumpkin spice */
  --accent-2:#b24c63;   /* cranberry */
  --accent-3:#7a3b4a;   /* plum */

  /* Links */
  --link:#6b2d1a;       /* roasted chestnut */
  --link-hover:#3e160c; /* dark roast */

  --shadow: 0 6px 24px rgba(65, 34, 18, .18);
  --radius:16px; --radius-sm:10px; --maxw:1100px;
}

/* Background: gentle fall gradient */
body{
  background:
    radial-gradient(1200px 800px at 10% -10%, var(--bg3), transparent 60%),
    radial-gradient(900px 600px at 110% 20%, var(--bg2), transparent 60%),
    linear-gradient(135deg, var(--bg1), var(--bg2) 40%, var(--bg3));
}

/* Subtle leaf pattern overlay */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='rgba(255,245,235,0.22)' stroke-width='0.7'%3E%3Cpath d='M0 20h40M20 0v40'/%3E%3C/g%3E%3Cg fill='none' stroke='rgba(124,62,35,0.22)' stroke-width='0.6'%3E%3Cpath d='M20 12c3 2 3 6 0 8c-3 2-3 6 0 8'/%3E%3Cpath d='M20 12c-3 2-3 6 0 8c3 2 3 6 0 8'/%3E%3C/g%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* Header glass: slightly toast-tinted */
header{
  background: linear-gradient(to right, #fff4ece6, #ffefe7e6);
  border-bottom:1px solid rgba(255, 234, 220, .8);
}

/* Buttons keep warm gradient */
.btn{
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
.btn.secondary{
  background:#fff1e7; color:#5b2a1a; border:1px solid #ffd7bf;
}

/* Badges */
.badge{
  background:#ffe7d6; color:#5b2a1a; border:1px solid #f8cba9;
}

/* Pills */
.pill{
  background:#fff0e6; color:#6b2d1a; border:1px solid #f9c9a8;
}

/* Brand mark gradient */
.logo{
  background: conic-gradient(from 210deg, var(--accent), var(--accent-2), var(--accent-3), var(--accent));
}
@media (prefers-color-scheme: dark){
  :root{
    --bg1:#d8a94f; --bg2:#c46d32; --bg3:#9a4321;
    --text:#f7eee7; --muted:#e3d1c4;
    --card:#210f0bee; --card-border: rgba(255, 196, 160, .12);
    --link:#ffd6b3; --link-hover:#fff1e6;
    --shadow: 0 10px 30px rgba(0,0,0,.45);
  }
  header{ background: linear-gradient(to right, #2b130fe6, #2b130fe6); border-bottom-color: rgba(255,196,160,.18); }
}