/* ============================================================
   Molly's World Art — Shared Design System
   Direction A · "Lux Rodeo" — clean white, refined Western
   Fonts (Zilla Slab / Spectral) load via <link> in each page.
   ============================================================ */

:root{
  --paper:#ffffff;        /* pure white */
  --paper-2:#f6f6f4;      /* soft off-white band / card */
  --paper-3:#ededea;      /* deeper stone */
  --ink:#111010;          /* near-black */
  --ink-soft:#4a4744;     /* soft charcoal */
  --muted:#8f8b86;        /* faded grey */
  --line:#e8e6e2;         /* hairline */
  --line-strong:#d8d5d0;
  --accent:#111010;       /* elegant black accent */
  --accent-deep:#000000;
  --turq:#111010;         /* availability dot — black */
  --gold:#a08858;         /* restrained gold detail accent */
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:"Spectral",Georgia,serif;
  font-size:18px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.display{font-family:"Zilla Slab",Georgia,serif;font-weight:600;line-height:1.08;letter-spacing:-.005em}
.eyebrow{font-size:12px;letter-spacing:.36em;text-transform:uppercase;color:var(--accent);font-weight:600;font-family:"Spectral",serif}
.accent{color:var(--accent)}
.italic{font-style:italic}

.wrap{max-width:1240px;margin:0 auto;padding:0 48px}
.wrap-narrow{max-width:980px;margin:0 auto;padding:0 48px}

/* ---------- thin animated underline link ---------- */
.ul{
  position:relative;padding-bottom:3px;cursor:pointer;font-weight:500;
  background-image:linear-gradient(var(--ink),var(--ink));
  background-repeat:no-repeat;background-position:0 100%;
  background-size:100% 1px;transition:background-size .35s ease, color .3s ease;
}
.ul:hover{color:var(--accent);background-image:linear-gradient(var(--accent),var(--accent));}

/* ---------- buttons (refined, luxe) ---------- */
.btn{
  display:inline-block;font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;
  padding:16px 34px;border:1.5px solid var(--ink);transition:.24s ease;cursor:pointer;
  font-family:"Spectral",serif;background:transparent;color:var(--ink);
}
.btn.solid{background:var(--ink);color:#ffffff;border-color:var(--ink)}
.btn.solid:hover{background:#000;border-color:#000}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
.btn.block{width:100%;text-align:center}

/* ---------- nav ---------- */
header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.88);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
nav{display:flex;align-items:center;justify-content:space-between;height:84px;max-width:1240px;margin:0 auto;padding:0 48px}
.brand{font-family:"Zilla Slab",serif;font-size:23px;font-weight:600;letter-spacing:.02em;line-height:1;color:var(--ink);text-transform:uppercase}
.brand small{display:block;font-family:"Spectral",serif;font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);margin-top:5px;font-weight:600}
.navlinks{display:flex;gap:42px;align-items:center}
.navlinks a{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);position:relative;padding-bottom:4px;font-weight:600}
.navlinks a:hover{color:var(--accent)}
.navlinks a.active{color:var(--accent)}
.navlinks a.active::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--accent)}
.navright{display:flex;align-items:center;gap:28px}
.cartbtn{font-size:12px;letter-spacing:.2em;text-transform:uppercase;display:flex;align-items:center;gap:9px;white-space:nowrap;font-weight:600}
.cartbtn:hover{color:var(--accent)}
.dot{width:5px;height:5px;border-radius:50%;background:var(--accent);display:inline-block}
.menu-toggle{display:none;background:none;border:0;font-size:12px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;color:var(--ink);font-weight:600;font-family:"Spectral",serif}

/* ---------- placeholders (where real artwork drops in) ---------- */
.ph{
  position:relative;width:100%;background:var(--paper-2);
  border:1px solid var(--line-strong);overflow:hidden;
  display:flex;align-items:flex-end;
  background-image:repeating-linear-gradient(135deg,rgba(17,16,16,.05) 0 1.5px,transparent 1.5px 14px);
}
.ph span{
  font-family:"Spectral",serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  color:var(--ink-soft);padding:14px 16px;position:relative;z-index:1;
}
.ph::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(27,23,20,.04);pointer-events:none}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;user-select:none}
.ph.contain img{object-fit:contain;background:var(--paper-2)}
.ph:not(.nowm)::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.13;mix-blend-mode:multiply;background-repeat:repeat;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='190'%3E%3Ctext x='10' y='110' font-family='Georgia,serif' font-size='23' font-style='italic' fill='%23111010' transform='rotate(-28 130 95)'%3EMolly's World Studio%3C/text%3E%3C/svg%3E")}

/* ---------- page hero (interior pages) ---------- */
.pagehero{padding:92px 0 64px;border-bottom:1px solid var(--line)}
.pagehero .eyebrow{margin-bottom:24px}
.pagehero h1{font-size:clamp(46px,6.4vw,90px);max-width:16ch;line-height:1.02}
.pagehero h1 em{font-style:italic;color:var(--accent)}
.pagehero .lead{max-width:54ch;margin-top:26px;color:var(--ink-soft);font-size:20px}
.pagehero.center{text-align:center}
.pagehero.center h1{margin-left:auto;margin-right:auto}
.pagehero.center .lead{margin-left:auto;margin-right:auto}

/* ---------- section heading ---------- */
.sec{padding:112px 0}
.sechead{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:58px;gap:30px;flex-wrap:wrap}
.sechead h2{font-size:clamp(34px,4.4vw,54px)}
.sechead .eyebrow{margin-bottom:16px}
.sechead a{font-size:12px;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;font-weight:600}

/* ---------- artwork card ---------- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px 42px}
.grid.g4{grid-template-columns:repeat(4,1fr);gap:42px 34px}
.card{cursor:pointer;display:block}
.card .ph{aspect-ratio:4/5;transition:transform .5s ease}
.card:hover .ph{transform:translateY(-6px)}
.card .meta{margin-top:20px}
.card .meta .n{font-family:"Zilla Slab",serif;font-size:23px;font-weight:600;line-height:1.12}
.card .meta .d{color:var(--muted);font-size:14.5px;margin-top:4px}
.card .meta .p{margin-top:10px;font-size:16px;letter-spacing:.02em;font-weight:600}
.card .meta .sold{color:var(--muted);font-style:italic;font-weight:400}
.cat-tag{display:inline-block;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:7px}
.avail-tag{display:inline-flex;align-items:center;gap:7px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.avail-tag::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--turq)}
.avail-tag.sold{color:var(--muted)}
.avail-tag.sold::before{background:var(--muted)}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:88px 0 48px;background:var(--paper-2)}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:48px}
footer h3{font-family:"Zilla Slab",serif;font-size:24px;font-weight:600;margin-bottom:14px;color:var(--ink);text-transform:uppercase;letter-spacing:.02em}
footer .sub{color:var(--ink-soft);font-size:15px;max-width:30ch}
footer .col4 .eyebrow{margin-bottom:20px}
footer ul{list-style:none}
footer li{margin-bottom:11px;font-size:16px}
footer li a:hover{color:var(--accent)}
.signup{display:flex;border-bottom:1.5px solid var(--ink);padding-bottom:8px;margin-top:6px;gap:10px}
.signup input{flex:1;border:0;background:transparent;font-family:inherit;font-size:16px;color:var(--ink);outline:none}
.signup input::placeholder{color:var(--muted)}
.signup button{border:0;background:transparent;cursor:pointer;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);font-weight:600;font-family:"Spectral",serif}
.legal{display:flex;justify-content:space-between;margin-top:64px;padding-top:26px;border-top:1px solid var(--line-strong);color:var(--muted);font-size:13px;letter-spacing:.04em;flex-wrap:wrap;gap:12px}

/* ---------- misc utilities ---------- */
.divider{height:1px;background:var(--line-strong);border:0}
.tagrow{display:flex;gap:12px;flex-wrap:wrap}
.chip{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);border:1px solid var(--line-strong);padding:9px 18px;border-radius:30px;background:transparent;cursor:pointer;transition:.22s;font-family:"Spectral",serif;font-weight:600}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip.active{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .grid.g4{grid-template-columns:repeat(2,1fr)}
  .fgrid{grid-template-columns:1fr 1fr}
  .navlinks{
    position:absolute;top:84px;left:0;right:0;flex-direction:column;gap:0;
    background:var(--paper);border-bottom:1px solid var(--line);
    max-height:0;overflow:hidden;transition:max-height .35s ease;
  }
  .navlinks.open{max-height:360px}
  .navlinks a{padding:18px 48px;border-top:1px solid var(--line);width:100%}
  .menu-toggle{display:block}
}
@media(max-width:560px){
  .wrap,.wrap-narrow,nav{padding-left:24px;padding-right:24px}
  .grid,.grid.g4{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr}
  .navlinks a{padding-left:24px;padding-right:24px}
}

.fsocial{display:flex;gap:22px;flex-wrap:wrap}
.fsocial a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:.2s}
.fsocial a:hover{border-bottom-color:currentColor}

.sz-mini{font-size:13px;letter-spacing:.05em;color:var(--muted);margin-top:3px}