/* ===============================
Flame Library — Ember Theme
minimal, responsive, no libs
(cleaned + de-duped for flame-ui.css)
=============================== */

/* --- Variables --- */
:root{
  --bg: #f4efe7; /* parchment */
  --ink: #1f1f1f; /* text */
  --muted: #5e5a57; /* secondary text */
  --card: #fffdf9; /* cards */
  --ring: rgba(20,20,20,.08); /* borders */
  --shadow: 0 6px 18px rgba(0,0,0,.08);
  --accent: #c75025; /* ember */
  --accent-ink: #381d15;
  --radius: 14px;
}

/* Auto dark mode */
@media (prefers-color-scheme: dark){
  :root{
    --bg: #0e0e10;
    --ink: #e9e9ea;
    --muted: #b2b2b6;
    --card: #141416;
    --ring: rgba(255,255,255,.08);
    --shadow: 0 10px 24px rgba(0,0,0,.35);
    --accent: #ff8048;
    --accent-ink: #2b120e;
  }
}

/* --- Base --- */
html{ scroll-behavior:smooth }
body{
  margin:0;
  background:
    radial-gradient(1100px 600px at 10% -10%, rgba(255,140,90,.08), transparent 60%),
    radial-gradient(900px 500px at 90% -20%, rgba(255,120,60,.06), transparent 55%),
    var(--bg);
  color:var(--ink);
  font: 16px/1.55 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

/* Type scale */
h1,h2,h3{ line-height:1.15; margin:0 0 .35em }
h1{ font-size: clamp(1.9rem, 3.2vw, 2.6rem); letter-spacing:.2px }
h2{ font-size: clamp(1.4rem, 2.2vw, 1.9rem) }
h3{ font-size: clamp(1.1rem, 1.6vw, 1.25rem); margin-top:.2rem }
p{ margin:.5rem 0 1rem }
small{ opacity:.85 }

/* Links */
a{ color:var(--accent); text-decoration:none }
a:hover{ text-decoration:underline }
.top-nav a{ color:inherit; opacity:.9 }
.top-nav a[aria-current="page"]{ font-weight:700; opacity:1 }

/* Layout */
.wrap{ max-width:1080px; margin:0 auto; padding:1.25rem }
.wrap.narrow{ max-width:760px }

.site-header{
  padding:0 0 1.2rem;
  border-bottom:1px solid var(--ring);
  background: linear-gradient(180deg, rgba(255,120,60,.08), transparent 55%);
}

/* Hero block */
.hero{
  margin:1.2rem 0 1.4rem;
  padding:1.2rem 1.2rem 1.1rem;
  border:1px solid var(--ring);
  border-radius:var(--radius);
  background:var(--card);
  box-shadow:var(--shadow);
}
.hero .eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-weight:600; letter-spacing:.2px; color:var(--accent-ink);
  background:linear-gradient(90deg, rgba(199,80,37,.14), rgba(199,80,37,.08));
  padding:.3rem .6rem; border-radius:999px;
}
.hero h1{ margin-top:.6rem }
.site-tagline{ margin:.3rem 0 0; color:var(--muted) }

/* Flame icon (inline SVG will pick this) */
.flame{ width:18px; height:18px; display:inline-block }

/* Grid of cards */
.grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap:1.1rem;
  margin:1.2rem 0 2rem;
}
.card{
  border:1px solid var(--ring);
  background:var(--card);
  border-radius:var(--radius);
  padding:1rem 1rem .9rem;
  box-shadow:var(--shadow);
  transition: transform .12s ease, box-shadow .12s ease;
}
.card:hover{ transform: translateY(-2px); box-shadow:0 12px 26px rgba(0,0,0,.12) }
.card p{ color:var(--muted); margin:.35rem 0 .6rem }
.card ul{ margin:.4rem 0 0 1.1rem }
.card li{ margin:.3rem 0 }

/* Buttons (site style; CTA buttons live in flame-ui.css) */
.btn{
  display:inline-block; border:1px solid var(--ring);
  padding:.58rem .86rem; border-radius:10px; text-decoration:none;
  background:linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.3));
  position:relative; overflow:hidden;
  transition: transform .08s ease, box-shadow .12s ease;
}
@media (prefers-color-scheme: dark){
  .btn{ background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)) }
}

/* Luxe add-on: gold, glow, texture */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none;
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(255,165,115,.10), transparent 55%),
    radial-gradient(900px 600px at 0% 0%, rgba(255,170,120,.08), transparent 60%),
    radial-gradient(1000px 600px at 100% 0%, rgba(255,170,120,.06), transparent 60%);
  mix-blend-mode:soft-light; z-index:-1;
}
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:1;
  background:
    radial-gradient(1200px 700px at 50% -20%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(1200px 800px at 50% 120%, rgba(0,0,0,.35), transparent 55%);
}

/* Gold tone scale */
:root{
  --gold-1:#f9e5b9; /* light */
  --gold-2:#e6c878; /* mid */
  --gold-3:#caa24a; /* deep */
  --gold-4:#8d6b2a; /* shadow */
}

/* Luxe hero */
.hero{ position:relative; overflow:hidden }
.hero.hero--luxe{
  background:linear-gradient(180deg, rgba(255,216,164,.18), rgba(255,216,164,.06)), var(--card);
  border:1px solid rgba(204,160,90,.35);
  box-shadow:
    0 18px 36px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.25);
}
.hero.hero--luxe .site-title{
  font-weight:800; letter-spacing:.3px;
  text-shadow:0 1px 0 rgba(255,255,255,.35);
}
.hero .site-tagline{ font-size:1.05rem }

/* Gold pill buttons (halo + press) */
.btn--gold{
  color:#221b12; font-weight:700;
  background:linear-gradient(180deg, var(--gold-1), var(--gold-2));
  border:1px solid rgba(142,106,48,.55);
  box-shadow:
    0 12px 24px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.6),
    0 0 0 2px rgba(250,220,140,.25);
}
.btn--gold:hover{ text-decoration:none }
.btn--gold:active{ transform:translateY(1px) }
.btn--pill{ border-radius:999px; padding:.78rem 1.15rem }
.btn--xl{ font-size:1.05rem; padding:.95rem 1.35rem }
.btn--ghost{
  background:linear-gradient(180deg, rgba(255,255,255,.25), rgba(255,255,255,.05));
}

/* Cards with gold rim + glow on hover */
.card.card--luxe{
  border:1px solid rgba(204,160,90,.35);
  box-shadow:
    0 10px 22px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.35);
}
.card.card--luxe:hover{
  box-shadow:
    0 18px 40px rgba(0,0,0,.20),
    0 0 0 2px rgba(250,220,140,.18),
    inset 0 1px 0 rgba(255,255,255,.45);
}

/* Section headers with underline shimmer */
.section-title{
  position:relative; display:inline-block; padding-bottom:.3rem;
}
.section-title::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--gold-3), transparent);
  opacity:.9;
}

/* Search input styling (if present) */
.input{
  width:100%; padding:.85rem 1rem; border-radius:12px;
  border:1px solid rgba(204,160,90,.35);
  background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.7));
}
@media (prefers-color-scheme: dark){
  .input{ background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03)) }
}

/* ======= PDF Embed (de-duplicated) ======= */
.pdf-embed{
  position:relative; width:100%;
  height:80vh; /* desktop/tablet default */
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px; overflow:hidden;
  box-shadow:0 8px 20px rgba(0,0,0,.12);
  margin:1rem 0;
}
.pdf-embed iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
}
/* On small devices, hide inline embed and show an "open" link */
.pdf-open-mobile{ display:none; text-align:center; margin:.5rem 0 1rem }
@media (max-width:600px){
  .pdf-embed{ display:none }
  .pdf-open-mobile{ display:block }
}

/* ======= About avatar (merged rules) ======= */
.about .avatar{
  width:140px; height:140px;
  object-fit:cover; object-position:50% 0%;
  border-radius:999px; border:2px solid var(--ring);
  box-shadow:var(--shadow); margin:.2rem 0 1rem;
}
@media (min-width:700px){
  .about .avatar{ width:160px; height:160px; object-position:50% 0% }
}

/* Share block */
.share-block{
  margin:1.2rem 0; display:flex; flex-wrap:wrap; gap:.6rem;
}

/* Tiny toast */
.toast{
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%) translateY(20px);
  padding:.55rem .8rem; border-radius:10px;
  background:rgba(20,20,20,.85); color:#fff; font-size:.95rem;
  border:1px solid rgba(255,255,255,.18);
  opacity:0; pointer-events:none;
  transition: transform .15s ease, opacity .15s ease;
  z-index:9999;
}
@media (prefers-color-scheme: light){
  .toast{ background:rgba(0,0,0,.82); color:#fff }
}
.toast.is-visible{ opacity:1; transform:translateX(-50%) translateY(0) }

/* Twitter/X button style */
.btn--twitter{
  color:#fff; font-weight:700;
  background:linear-gradient(180deg, #1DA1F2, #0d8ddb);
  border:1px solid #0d8ddb;
  box-shadow:0 6px 14px rgba(29,161,242,.35);
  transition: transform .1s ease, box-shadow .1s ease;
}
.btn--twitter:hover{
  text-decoration:none; box-shadow:0 8px 18px rgba(29,161,242,.5);
}
.btn--twitter:active{ transform:translateY(1px) }

/* Explicit dark theme override hook (optional) */
html[data-theme="dark"]{
  --bg:#0e0e10;
  --ink:#e9e9ea;
  --card:#141416;
  --accent:#ff8048;
  /* keep other vars inherited */
}

/* Daily Nail thumbnails */
.daily-nail-archive img{
  width:180px; height:240px; object-fit:cover;
  border-radius:4px; box-shadow:0 4px 12px rgba(0,0,0,.3); display:block;
}

/* ===== Small helpers for new layout ===== */
.library-section{ margin:1.25rem 0 1.5rem }

<style>
  body {
    background-color: #0d0d0d !important;
    color: #f2f2f2 !important;
  }
</style>
.scroll-layout {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 60px
  max-width:1400px
  margin:2rem auto;
  padding: 0 2rem;
}

.sidebar-toc {
  width: 260px;
  padding: 2em 1em;
  background: #fcf8f3;
  border-right: 1px solid #e3ded7;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  font-size: 0.95em;
  line-height: 1.6;
}

.sidebar-toc nav a {
  display: block;
  margin: 0.5em 0;
  margin-bottom: 0.5em;
  color: #6c3e1d;
  text-decoration: none;
}

.sidebar-toc nav a:hover {
  text-decoration: underline;
}

.content {
  flex: 1;
  padding: 2em;
}