:root{
  --bg:#f5ecd2;
  --bg-warm:#efe2c0;
  --bg-card:#fffbf2;
  --ink:#1d2823;
  --ink-soft:#5a6660;
  --line:#d8c7a0;
  --line-soft:#e7d9b6;
  --green:#28604a;
  --green-deep:#1a4231;
  --amber:#dc9a32;
  --amber-deep:#a36c0e;
  --rust:#9b4523;
  --max:1200px;
  --radius:12px;
  --shadow:0 1px 0 rgba(29,40,35,.04), 0 10px 32px -20px rgba(29,40,35,.22);
  --shadow-lg:0 2px 0 rgba(29,40,35,.05), 0 24px 60px -32px rgba(29,40,35,.32);
  --serif:'Lora','Iowan Old Style','Charter','Source Serif Pro',Georgia,serif;
  --sans:'Inter','Helvetica Neue',-apple-system,BlinkMacSystemFont,Arial,sans-serif;
}
@font-face{font-family:'Lora';font-style:normal;font-weight:400 700;font-display:swap;src:local('Lora')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:local('Inter')}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{
  background:
    radial-gradient(circle at 80% -10%, rgba(220,154,50,.12), transparent 50%),
    radial-gradient(circle at -10% 110%, rgba(40,96,74,.08), transparent 45%),
    var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--green-deep);text-decoration:none;border-bottom:1px solid rgba(40,96,74,.25);transition:color .15s,border-color .15s}
a:hover{color:var(--rust);border-bottom-color:var(--rust)}
.container{max-width:var(--max);margin:0 auto;padding:0 24px}
h1,h2,h3,h4,h5{font-family:var(--serif);color:var(--green-deep);line-height:1.2;margin:.4em 0;font-weight:700;letter-spacing:-.01em}
h1{font-size:clamp(1.9rem,4.4vw,2.6rem);letter-spacing:-.02em}
h2{font-size:clamp(1.3rem,2.6vw,1.6rem);border-bottom:1px solid var(--line);padding-bottom:8px;margin-top:1.8em}
h3{font-size:1.18rem}
h4{font-size:1rem}
small,.muted-text{color:var(--ink-soft)}
p{margin:0 0 14px}

/* Header */
.site-header{
  background:linear-gradient(180deg,var(--green) 0%, var(--green-deep) 100%);
  color:var(--bg);
  box-shadow:var(--shadow);
  position:sticky;top:0;z-index:10;
  border-bottom:1px solid rgba(0,0,0,.15);
}
.site-header a{color:var(--bg);border-bottom:none;opacity:.92}
.site-header a:hover{color:var(--amber);opacity:1}
.header-row{display:flex;align-items:center;gap:22px;padding:14px 24px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--serif);font-weight:700;font-size:1.32rem;letter-spacing:.005em}
.brand-mark{display:inline-flex;filter:drop-shadow(0 1px 0 rgba(0,0,0,.15))}
.primary-nav{display:flex;gap:20px;flex:1;flex-wrap:wrap;font-family:var(--sans);font-size:.97rem}
.primary-nav a{font-weight:500}
.search{display:flex;gap:6px}
.search input{padding:8px 12px;border-radius:6px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.1);color:var(--bg);min-width:240px;font-family:var(--sans);font-size:.92rem}
.search input::placeholder{color:rgba(245,236,210,.65)}
.search input:focus{outline:none;border-color:var(--amber);background:rgba(255,255,255,.16)}
.search button{padding:8px 14px;border-radius:6px;border:0;background:var(--amber);color:var(--green-deep);font-weight:700;cursor:pointer;font-size:1rem}
.search button:hover{background:#f0b040}

/* Layout */
.main{padding:36px 24px 80px}

/* Hero */
.hero{
  display:grid;grid-template-columns:1.25fr 1fr;gap:42px;align-items:center;
  background:
    linear-gradient(135deg, rgba(255,251,242,.95) 0%, rgba(248,236,206,.95) 100%);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:44px;box-shadow:var(--shadow-lg);margin-bottom:40px;
  position:relative;overflow:hidden;
}
.hero::before{
  content:"";position:absolute;top:-30%;right:-10%;width:240px;height:240px;
  background:radial-gradient(circle,rgba(220,154,50,.18),transparent 70%);
  pointer-events:none;
}
.hero h1{font-size:clamp(2rem,4.6vw,3rem);margin-top:0;line-height:1.08}
.hero .lede{font-size:1.18rem;color:var(--ink-soft);font-family:var(--serif);font-style:italic;margin-bottom:22px}
.hero img{max-width:100%;height:auto;border-radius:10px;border:1px solid var(--line);box-shadow:var(--shadow)}

.cta{display:inline-block;background:var(--green);color:var(--bg);padding:12px 22px;border-radius:8px;font-weight:600;border:1px solid var(--green-deep);margin:6px 8px 0 0;font-size:1rem;letter-spacing:.005em;cursor:pointer;font-family:var(--sans)}
.cta:hover{background:var(--green-deep);color:var(--amber);border-bottom:1px solid var(--green-deep)}
.cta.secondary{background:transparent;color:var(--green-deep);border:1px solid var(--green)}
.cta.secondary:hover{background:rgba(40,96,74,.08);color:var(--green-deep)}

/* Sections */
.section{margin-bottom:46px}
.grid{display:grid;gap:20px}
.grid.cards{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.grid.songs{grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}

/* Cards */
.card{
  background:var(--bg-card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px;
  box-shadow:var(--shadow);
  transition:transform .12s, box-shadow .12s, border-color .12s;
}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--amber)}
.card h3{margin:0 0 6px;font-size:1.1rem}
.card .meta{font-size:.84rem;color:var(--ink-soft);margin-bottom:10px;font-family:var(--sans)}
.card a.title-link{border-bottom:none;color:var(--green-deep)}
.card a.title-link:hover{color:var(--rust)}

/* Tags */
.tag{display:inline-block;font-size:.76rem;padding:2px 9px;border-radius:999px;background:rgba(40,96,74,.1);color:var(--green-deep);margin-right:4px;font-family:var(--sans);font-weight:500;letter-spacing:.01em}
.tag.amber{background:rgba(220,154,50,.2);color:var(--amber-deep)}
.tag.rust{background:rgba(155,69,35,.13);color:var(--rust)}

/* Chord-of-the-day */
.chord-spotlight{
  display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center;
  background:linear-gradient(135deg,var(--bg-card) 0%, var(--bg-warm) 100%);
  border:1px solid var(--amber);
  border-left:4px solid var(--amber);
  border-radius:var(--radius);padding:22px 26px;box-shadow:var(--shadow);margin-bottom:32px;
}
.chord-spotlight .label{font-family:var(--sans);font-size:.78rem;text-transform:uppercase;letter-spacing:.13em;color:var(--amber-deep);font-weight:600;margin-bottom:4px}
.chord-spotlight h2{margin:0 0 8px;border:0;padding:0;font-size:1.7rem}
.chord-spotlight p{margin:0;font-size:.97rem;color:var(--ink-soft)}

/* Song page */
.song-header{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:start;margin-bottom:18px}
.song-meta-grid,.meta-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:20px}
.song-meta-grid div,.meta-grid div{font-size:.94rem;font-family:var(--sans)}
.song-meta-grid strong,.meta-grid strong{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);margin-bottom:3px;font-weight:600}

/* Chord row */
.chord-row{display:flex;flex-wrap:wrap;gap:16px;margin:14px 0 24px;background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.chord-cell{text-align:center}
.chord-cell a{border-bottom:none}
.chord-svg{display:block;background:var(--bg-card);border-radius:8px}
.chord-svg .chord-name{font-family:var(--serif);font-size:14px;font-weight:700;fill:var(--green-deep)}
.chord-svg .nut{fill:var(--ink)}
.chord-svg .string{stroke:#8a7a55;stroke-width:1}
.chord-svg .fret{stroke:#bba779;stroke-width:1}
.chord-svg .dot{fill:var(--green-deep)}
.chord-svg .open{fill:none;stroke:var(--green-deep);stroke-width:1.5}
.chord-svg .muted{font-size:14px;fill:var(--ink-soft);font-family:var(--sans);font-weight:700}
.chord-svg .finger{fill:var(--bg-card);font-size:9px;font-family:var(--sans);font-weight:700}
.chord-svg .barre{fill:var(--green-deep);opacity:.85}
.chord-svg .fret-num{fill:var(--ink-soft);font-size:11px;font-family:var(--sans)}

/* Transition pair */
.transition-pair{display:flex;align-items:center;justify-content:center;gap:24px;background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius);padding:24px;margin:18px 0;flex-wrap:wrap}
.transition-chord{margin:0;text-align:center}
.transition-chord figcaption{margin-top:8px;font-size:.88rem;font-family:var(--sans);color:var(--ink-soft)}
.transition-arrow{font-size:2.4rem;color:var(--amber-deep);font-weight:300;line-height:1;font-family:var(--serif)}

/* Progression */
.progression{display:grid;gap:14px;margin:18px 0}
.prog-section{background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.prog-section h4{margin:0 0 10px;color:var(--green-deep);font-size:.92rem;text-transform:uppercase;letter-spacing:.1em;font-family:var(--sans)}
.bars{display:flex;flex-wrap:wrap;gap:7px}
.bar{background:rgba(40,96,74,.08);border:1px solid var(--line);padding:7px 13px;border-radius:6px;font-family:'JetBrains Mono','SF Mono',Menlo,monospace;font-size:.95rem;color:var(--green-deep);font-weight:600}

/* Lyrics */
.lyrics{background:var(--bg-card);border:1px solid var(--line);border-left:4px solid var(--amber);border-radius:var(--radius);padding:20px 24px;font-size:1rem;line-height:1.78;white-space:pre-wrap;font-family:var(--serif)}

/* Tutorial body */
.tutorial-body p{margin:0 0 16px}
.tutorial-body ol li,.tutorial-body ul li{margin-bottom:8px}

/* Ad slot */
.adslot{background:repeating-linear-gradient(45deg,rgba(220,154,50,.05),rgba(220,154,50,.05) 8px,rgba(220,154,50,.12) 8px,rgba(220,154,50,.12) 16px);border:1px dashed var(--line);border-radius:8px;padding:18px;text-align:center;color:var(--ink-soft);font-size:.85rem;margin:20px 0;font-family:var(--sans)}

/* Layout with sidebar */
.layout{display:grid;grid-template-columns:1fr 290px;gap:36px}
.sidebar > div{margin-bottom:24px}
.sidebar h4{margin:0 0 10px;font-size:.85rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-soft);font-family:var(--sans);font-weight:600;border-bottom:1px solid var(--line);padding-bottom:6px}
.sidebar ul{list-style:none;padding:0;margin:0;font-size:.94rem;font-family:var(--sans)}
.sidebar li{padding:6px 0;border-bottom:1px solid var(--line-soft)}
.sidebar li:last-child{border-bottom:none}
.sidebar a{color:var(--green-deep);border-bottom:none}
.sidebar a:hover{color:var(--rust)}

/* Pagination */
.pagination{display:flex;gap:6px;justify-content:center;margin:34px 0;flex-wrap:wrap}
.pagination a, .pagination .current{padding:7px 13px;border:1px solid var(--line);border-radius:6px;background:var(--bg-card);border-bottom:1px solid var(--line);font-family:var(--sans);font-size:.92rem}
.pagination .current{background:var(--green);color:var(--bg);border-color:var(--green)}

/* Crumbs */
.crumbs{font-size:.84rem;color:var(--ink-soft);margin-bottom:14px;font-family:var(--sans)}
.crumbs a{color:var(--ink-soft);border-bottom-color:rgba(90,102,96,.2)}

/* Facet list */
.facet-list{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.facet-list a{display:inline-block;padding:6px 14px;border:1px solid var(--line);border-radius:999px;background:var(--bg-card);border-bottom:1px solid var(--line);font-size:.88rem;font-family:var(--sans);color:var(--green-deep);transition:background .12s,color .12s,border-color .12s}
.facet-list a:hover{background:var(--green);color:var(--bg);border-color:var(--green)}

/* Lede */
.lede{font-size:1.1rem;color:var(--ink-soft);font-family:var(--serif);font-style:italic;margin-bottom:18px}

/* Footer */
.site-footer{background:linear-gradient(180deg,var(--green-deep) 0%, #122c21 100%);color:var(--bg);padding:44px 0 18px;margin-top:60px}
.site-footer a{color:var(--amber);border-bottom-color:rgba(220,154,50,.3)}
.site-footer a:hover{color:#fff;border-bottom-color:#fff}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:32px;padding:0 24px}
.footer-grid h5{color:var(--amber);text-transform:uppercase;letter-spacing:.1em;font-size:.82rem;margin:0 0 12px;font-family:var(--sans);font-weight:600}
.footer-grid ul{list-style:none;padding:0;margin:0;font-size:.92rem;font-family:var(--sans)}
.footer-grid li{padding:4px 0}
.brand-text-footer{font-family:var(--serif);font-size:1.45rem;font-weight:700;color:var(--amber);margin-bottom:8px}
.footer-bottom{border-top:1px solid rgba(245,236,210,.15);margin-top:28px;padding:18px 24px 0;font-size:.82rem;opacity:.75;font-family:var(--sans)}

/* Mobile */
@media (max-width:880px){
  .hero{grid-template-columns:1fr;padding:28px;gap:24px}
  .hero h1{font-size:1.85rem}
  .hero img{max-height:280px;object-fit:cover}
  .layout{grid-template-columns:1fr}
  .header-row{flex-wrap:wrap;gap:14px}
  .primary-nav{order:3;width:100%;font-size:.92rem;gap:14px}
  .search{order:2;flex:1}
  .search input{min-width:0;width:100%}
  .chord-spotlight{grid-template-columns:1fr;text-align:center;justify-items:center}
  .transition-pair{gap:12px}
  .transition-arrow{transform:rotate(90deg)}
  .main{padding:24px 18px 60px}
  .container{padding:0 18px}
  body{font-size:16px}
}
@media (max-width:480px){
  h1{font-size:1.6rem}
  .hero{padding:22px}
  .grid.songs{grid-template-columns:1fr}
}