/* ============================================================
   LORRAEN MADRE — shared brand stylesheet
   Used by / (homepage) and /library/. Edit brand tokens HERE only.
   Display: Belleza · Subheads/labels: Figtree · Body: Mulish
   ============================================================ */
:root{
  --paper:#FCFBF8;
  --panel:#F4F1EA;
  --panel-2:#ECE7DC;
  --ink:#1B1A17;
  --ink-2:#5C584E;
  --ink-3:#8A8478;
  --line:rgba(27,26,23,.14);
  --line-2:rgba(27,26,23,.08);
  --night:#181713;
  --night-ink:#F5F1E8;
  --night-ink-2:#A8A192;
  --night-line:rgba(245,241,232,.15);

  --gold:#D6A441;
  --gold-deep:#6E4E15;
  --gold-soft:#F0E2C4;
  --spirit:#0C7A46;
  --red:#C4382E;
  --blue:#2A56A6;

  --display:"Belleza","Optima","Gill Sans",sans-serif;
  --sub:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --sans:"Mulish",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --glyph:"Noto Sans Symbols 2","Segoe UI Symbol",var(--sans);

  --measure:62ch;
  --pad:clamp(1.25rem,5vw,5rem);
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#151410;--panel:#1D1B16;--panel-2:#242118;
    --ink:#F1EDE3;--ink-2:#ABA491;--ink-3:#847D6C;
    --line:rgba(241,237,227,.16);--line-2:rgba(241,237,227,.08);
    --night:#0E0D0A;--night-ink:#F1EDE3;--night-ink-2:#ABA491;--night-line:rgba(241,237,227,.14);
    --gold:#E1B45C;--gold-deep:#F0DBA9;--gold-soft:#3A2E14;
    --spirit:#43C98A;--red:#E1655B;--blue:#6E93D8;
  }
}
:root[data-theme="dark"]{
  --paper:#151410;--panel:#1D1B16;--panel-2:#242118;
  --ink:#F1EDE3;--ink-2:#ABA491;--ink-3:#847D6C;
  --line:rgba(241,237,227,.16);--line-2:rgba(241,237,227,.08);
  --night:#0E0D0A;--night-ink:#F1EDE3;--night-ink-2:#ABA491;--night-line:rgba(241,237,227,.14);
  --gold:#E1B45C;--gold-deep:#F0DBA9;--gold-soft:#3A2E14;
  --spirit:#43C98A;--red:#E1655B;--blue:#6E93D8;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:1rem;line-height:1.68;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.12;margin:0;letter-spacing:.01em;text-wrap:balance}
p{margin:0}
a{color:inherit;text-decoration:none}
svg{display:block}
img{display:block;max-width:100%}
::selection{background:rgba(214,164,65,.28)}
:focus-visible{outline:2.5px solid var(--gold);outline-offset:3px;border-radius:2px}

.skip{position:fixed;left:1rem;top:-100px;z-index:200;background:var(--ink);color:var(--paper);
  padding:.7rem 1.1rem;border-radius:999px;font-family:var(--sub);font-size:.8rem;transition:top .2s}
.skip:focus{top:1rem}

.wrap{width:min(1180px,100% - (2 * var(--pad)));margin-inline:auto}
.eyebrow{font-family:var(--sub);font-weight:700;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--spirit)}

/* ---------- pill ---------- */
.pill{
  --pc:var(--ink);
  display:inline-flex;align-items:center;gap:.7rem;
  padding:.6rem 1.3rem;border:1.5px solid var(--pc);border-radius:999px;
  font-family:var(--sub);font-weight:700;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--pc);background:transparent;cursor:pointer;text-decoration:none;
  transition:background .22s ease,color .22s ease,border-color .22s ease,transform .22s ease,box-shadow .22s ease;
}
.pill .star{width:.95rem;height:.95rem;flex:none}
.pill .arw{width:1rem;height:1rem;flex:none;transition:transform .22s ease}
.pill:hover{transform:translateY(-2px)}
.pill:hover .arw{transform:translateX(4px)}
.pill.solid{background:var(--gold);border-color:var(--gold);color:var(--gold-deep)}
.pill.solid:hover{background:var(--gold-deep);border-color:var(--gold-deep);color:var(--gold)}
.pill.ghost{--pc:var(--ink-2)}
.pill.ghost:hover{--pc:var(--ink);border-color:var(--ink)}
.sec.night .pill.ghost{--pc:var(--night-ink-2)}
.sec.night .pill.ghost:hover{--pc:var(--night-ink);border-color:var(--night-ink)}
.pill.design{background:#fff;border-color:var(--ink);color:#1B1A17;box-shadow:0 1px 0 rgba(27,26,23,.06)}
.pill.design:hover{background:#1B1A17;border-color:#1B1A17;color:#fff}
.pill.wish{background:var(--red);border-color:var(--red);color:#fff}
.pill.wish:hover{filter:brightness(1.08)}
.pill.watch{background:var(--blue);border-color:var(--blue);color:#fff}
.pill.watch:hover{filter:brightness(1.1)}