/* Light Unlimited Publishing — shared stylesheet
   Edit here once and every page changes.
   Colors are the variables at the top; change those to reskin the site. */

/* ============================================================
   IF YOU CAN READ THIS BANNER ON THE WEBSITE, style.css LOADED.
   If the site ever appears as plain unstyled text, this file is
   missing from the server. Upload style.css to:
       public_html/lightunlimitedpublishing.com/style.css
   The three landing pages (Sleep, stress, depression) reach it
   with ../style.css — they do NOT need their own copy.
   ============================================================ */

/* Loaded-check: draws a thin green line at the very top of every
   page. Delete these 3 lines once you are happy it is working. */
body::before{content:"";display:block;height:3px;background:#2f6b6f;}

:root{
    --ink:#1b2b33;
    --ink-soft:#5a6e78;
    --deep:#12333f;
    --accent:#2f6b6f;
    --accent-warm:#b5764a;
    --sand:#f6f2ea;
    --line:#e4ded4;
    --paper:#fffefb;
    --white:#fff;
    --shadow:0 2px 14px rgba(18,51,63,.07);
    --shadow-lift:0 10px 30px rgba(18,51,63,.13);
  }

*{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
    margin:0; background:var(--paper); color:var(--ink);
    font:17px/1.72 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%;
  }

img{max-width:100%; display:block;}

a{color:var(--accent);}

.wrap{max-width:1120px; margin:0 auto; padding:0 24px;}

.serif{font-family:Georgia,"Times New Roman",serif;}

/* ---------- header ---------- */
  .pagehead{background:#cfe3f0; color:var(--ink); padding:60px 0 56px; text-align:center;
    position:relative; overflow:hidden;}
  .pagehead img.bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:1;}
  /* Option B: the photograph is shown at full brightness. There is no veil
     over it. The text sits on a faded white panel instead, which keeps the
     words readable without draining the colour out of the picture.
     To make the panel more solid, raise .74 towards 1. To make it more
     transparent, lower it towards 0. Nothing else needs changing. */
  .pagehead .wrap{position:relative; z-index:2;
    max-width:780px; background:rgba(255,255,255,.74);
    border-radius:5px; padding:34px 38px;}
  @media(max-width:600px){
    .pagehead{padding:38px 0 34px;}
    .pagehead .wrap{padding:24px 20px; margin:0 16px; border-radius:4px;}
  }
  .pagehead h1{font-family:Georgia,serif; font-weight:400; font-size:clamp(1.9rem,4.4vw,2.9rem);
    margin:0 0 14px; line-height:1.16; color:#0e2a35; text-shadow:none;}
  .pagehead p{max-width:660px; margin:0 auto; color:#3d5866; font-size:1.06rem; text-shadow:none;}

  .topbar{background:var(--white); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50;}

.topbar .wrap{display:flex; align-items:center; gap:20px; min-height:66px; flex-wrap:wrap;}

.brand{font-family:Georgia,serif; font-size:1.16rem; color:var(--deep); text-decoration:none; letter-spacing:.3px; white-space:nowrap;}

.brand span{display:block; font-size:.62rem; letter-spacing:2.2px; text-transform:uppercase; color:var(--ink-soft); font-family:inherit; margin-top:2px;}

nav{margin-left:auto;}

nav ul{list-style:none; display:flex; flex-wrap:wrap; gap:4px 22px; margin:0; padding:0;}

nav a{
    text-decoration:none; color:var(--ink-soft); font-size:.83rem; letter-spacing:.4px;
    padding:6px 0; display:inline-block; border-bottom:2px solid transparent; white-space:nowrap;
  }

nav a:hover,nav a:focus{color:var(--accent); border-bottom-color:var(--accent);}

nav a.on{color:var(--deep); border-bottom-color:var(--accent-warm);}

/* ---------- hero ---------- */
  .hero{position:relative; background:var(--deep); overflow:hidden;}

/* Option B on the homepage hero, to match the other pages.
   The photograph is shown at FULL brightness — opacity:1, no dimming.
   The text sits on a faded white panel instead, so it stays readable
   without draining the colour out of the picture.
   To make the panel more solid, raise .78 towards 1. */
.hero img.bg{
    width:100%; height:100%; object-fit:cover; position:absolute; inset:0;
    opacity:1;
  }

.hero .inner{position:relative; padding:98px 0 92px; text-align:center;}

.hero .inner > *{position:relative; z-index:2;}

.hero .inner::before{
    content:""; position:absolute; z-index:1;
    left:50%; transform:translateX(-50%);
    top:60px; bottom:60px; width:min(820px, calc(100% - 48px));
    background:rgba(255,255,255,.78); border-radius:6px;
  }

@media(max-width:600px){
    .hero .inner{padding:56px 0 52px;}
    .hero .inner::before{top:28px; bottom:28px; width:calc(100% - 24px); border-radius:4px;}
  }

.hero h1{
    font-family:Georgia,serif; color:#0e2a35; font-weight:400;
    font-size:clamp(2.1rem,5.2vw,3.5rem); line-height:1.14; margin:0 0 18px;
    letter-spacing:.5px; text-shadow:none;
  }

.hero p{
    color:#3d5866; font-size:clamp(1.02rem,2.1vw,1.24rem);
    max-width:620px; margin:0 auto 32px; text-shadow:none;
  }

.btn{
    display:inline-block; background:var(--accent-warm); color:#fff; text-decoration:none;
    padding:14px 34px; border-radius:2px; font-size:.94rem; letter-spacing:1.2px;
    text-transform:uppercase; transition:background .18s, transform .18s;
    box-shadow:0 3px 16px rgba(0,0,0,.2);
  }

.btn:hover,.btn:focus{background:#9d6440; transform:translateY(-1px);}

.btn.ghost{
    background:transparent; color:var(--accent); border:1px solid var(--accent);
    box-shadow:none; padding:11px 26px;
  }

.btn.ghost:hover{background:var(--accent); color:#fff;}

/* ---------- trust strip ---------- */
  .trust{background:var(--sand); border-bottom:1px solid var(--line);}

.trust .wrap{display:grid; grid-template-columns:1fr; gap:14px; padding-top:26px; padding-bottom:26px; text-align:center;}

@media(min-width:720px){ .trust .wrap{grid-template-columns:repeat(3,1fr); gap:30px;} }

.trust b{display:block; font-family:Georgia,serif; font-size:1.5rem; color:var(--deep); font-weight:400;}

.trust small{color:var(--ink-soft); font-size:.83rem; letter-spacing:.5px;}

/* ---------- sections ---------- */
  section{padding:76px 0;}

section.alt{background:var(--sand);}

.eyebrow{
    text-transform:uppercase; letter-spacing:2.4px; font-size:.71rem;
    color:var(--accent-warm); margin:0 0 12px; font-weight:600;
  }

h2.sec{
    font-family:Georgia,serif; font-weight:400; color:var(--deep);
    font-size:clamp(1.6rem,3.4vw,2.25rem); margin:0 0 16px; line-height:1.22;
  }

.intro{max-width:660px; color:var(--ink-soft); margin:0 0 40px; font-size:1.04rem;}

.center{text-align:center;}

.center .intro{margin-left:auto; margin-right:auto;}

/* ---------- product cards ---------- */
  .cards{display:grid; grid-template-columns:1fr; gap:26px;}

@media(min-width:600px){ .cards{grid-template-columns:1fr 1fr;} }

@media(min-width:900px){ .cards{grid-template-columns:repeat(3,1fr);} }

.card{
    background:var(--white); border:1px solid var(--line); border-radius:4px;
    overflow:hidden; text-decoration:none; color:inherit; display:flex; flex-direction:column;
    box-shadow:var(--shadow); transition:transform .2s, box-shadow .2s;
  }

.card:hover,.card:focus{transform:translateY(-4px); box-shadow:var(--shadow-lift);}

.card .art{aspect-ratio:1/1; overflow:hidden; background:var(--sand);}

.card .art img{width:100%; height:100%; object-fit:cover;}

.card .body{padding:20px 22px 24px;}

.card h3{font-family:Georgia,serif; font-weight:400; font-size:1.18rem; color:var(--deep); margin:0 0 8px; line-height:1.3;}

.card p{margin:0; color:var(--ink-soft); font-size:.92rem; line-height:1.6;}

.card .more{display:inline-block; margin-top:14px; color:var(--accent); font-size:.83rem; letter-spacing:1.1px; text-transform:uppercase;}

/* ---------- category tiles ---------- */
  .cats{display:grid; grid-template-columns:1fr; gap:16px;}

@media(min-width:640px){ .cats{grid-template-columns:1fr 1fr;} }

@media(min-width:960px){ .cats{grid-template-columns:repeat(4,1fr);} }

.cat{
    background:var(--white); border:1px solid var(--line); border-radius:4px;
    padding:26px 24px; text-decoration:none; color:inherit; display:block;
    transition:border-color .18s, transform .18s, box-shadow .18s;
  }

.cat:hover,.cat:focus{border-color:var(--accent); transform:translateY(-3px); box-shadow:var(--shadow);}

.cat b{display:block; font-family:Georgia,serif; font-size:1.14rem; color:var(--deep); font-weight:400; margin-bottom:6px;}

.cat span{color:var(--ink-soft); font-size:.88rem; line-height:1.55; display:block;}

.cat.feature{background:var(--deep); border-color:var(--deep);}

.cat.feature b{color:#fff;}

.cat.feature span{color:rgba(255,255,255,.78);}

@media(min-width:960px){ .cat.feature{grid-column:span 2;} }

/* ---------- benefits ---------- */
  .bens{display:grid; grid-template-columns:1fr; gap:10px 40px; margin:0; padding:0; list-style:none;}

@media(min-width:640px){ .bens{grid-template-columns:1fr 1fr;} }

@media(min-width:980px){ .bens{grid-template-columns:repeat(3,1fr);} }

.bens li{padding-left:24px; position:relative; color:var(--ink-soft); font-size:.97rem;}

.bens li::before{
    content:""; position:absolute; left:0; top:.62em; width:8px; height:8px;
    border-radius:50%; background:var(--accent-warm); opacity:.65;
  }

/* ---------- quote ---------- */
  .quote{max-width:760px; margin:0 auto; text-align:center;}

.quote blockquote{
    font-family:Georgia,serif; font-size:clamp(1.15rem,2.6vw,1.5rem); line-height:1.5;
    color:var(--deep); margin:0 0 18px; font-style:italic;
  }

.quote cite{color:var(--ink-soft); font-size:.9rem; font-style:normal; letter-spacing:.6px;}

/* ---------- about ---------- */
  .about{display:grid; grid-template-columns:1fr; gap:38px; align-items:center;}

@media(min-width:820px){ .about{grid-template-columns:280px 1fr; gap:56px;} }

.about img{border-radius:3px; box-shadow:var(--shadow-lift); width:100%;}

/* ---------- footer ---------- */
  footer{background:var(--deep); color:rgba(255,255,255,.72); padding:60px 0 34px; font-size:.9rem;}

footer h4{color:#fff; font-family:Georgia,serif; font-weight:400; font-size:1rem; margin:0 0 14px;}

.fcols{display:grid; grid-template-columns:1fr; gap:34px;}

@media(min-width:680px){ .fcols{grid-template-columns:repeat(3,1fr);} }

footer ul{list-style:none; margin:0; padding:0;}

footer li{margin-bottom:8px;}

footer a{color:rgba(255,255,255,.78); text-decoration:none;}

footer a:hover{color:#fff; text-decoration:underline;}

.fbot{border-top:1px solid rgba(255,255,255,.14); margin-top:42px; padding-top:22px; font-size:.82rem; color:rgba(255,255,255,.55);}

body{margin:0; background:var(--paper); color:var(--ink);
    font:17px/1.72 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%;}

.topbar{background:var(--white); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50;}

.brand{font-family:Georgia,serif; font-size:1.16rem; color:var(--deep); text-decoration:none; white-space:nowrap;}

.brand span{display:block; font-size:.62rem; letter-spacing:2.2px; text-transform:uppercase; color:var(--ink-soft); margin-top:2px;}

nav a{text-decoration:none; color:var(--ink-soft); font-size:.83rem; padding:6px 0;
    display:inline-block; border-bottom:2px solid transparent; white-space:nowrap;}

.promise{background:var(--sand); border-bottom:1px solid var(--line); padding:22px 0;}

.promise .wrap{display:flex; flex-wrap:wrap; gap:12px 34px; justify-content:center; align-items:center; text-align:center;}

.promise b{font-family:Georgia,serif; font-size:1.34rem; color:var(--deep); font-weight:400;}

.promise span{color:var(--ink-soft); font-size:.93rem;}

.dot{width:5px; height:5px; border-radius:50%; background:var(--accent-warm); opacity:.6;}

section{padding:64px 0;}

.lead{max-width:720px; margin:0 auto 8px; text-align:center; color:var(--ink-soft);}

.prod{display:grid; grid-template-columns:1fr; gap:26px; padding:34px 0; border-bottom:1px solid var(--line);}

@media(min-width:760px){ .prod{grid-template-columns:250px 1fr; gap:40px;} }

.prod:last-of-type{border-bottom:0;}

.prod .cover img{border-radius:4px; box-shadow:var(--shadow); width:100%;}

.lu{font-size:.7rem; letter-spacing:2.2px; text-transform:uppercase; color:var(--accent-warm); font-weight:600; margin:0 0 7px;}

.prod h2{font-family:Georgia,serif; font-weight:400; color:var(--deep);
    font-size:clamp(1.35rem,2.8vw,1.72rem); margin:0 0 12px; line-height:1.25;}

.prod p{margin:0 0 16px; color:var(--ink-soft); font-size:.99rem;}

.prod audio{width:100%; max-width:380px; margin:4px 0 20px; height:38px;}

.sample-label{font-size:.76rem; letter-spacing:1.4px; text-transform:uppercase; color:var(--ink-soft); margin:0 0 6px;}

.tracks{display:grid; grid-template-columns:1fr; gap:12px; margin-top:6px;}

@media(min-width:560px){ .tracks{grid-template-columns:1fr 1fr;} }

.track{border:1px solid var(--line); border-radius:4px; padding:15px 17px; background:var(--white);}

.track b{display:block; font-size:.99rem; color:var(--deep); font-weight:600; margin-bottom:10px;}

.track .buys{display:flex; gap:9px; flex-wrap:wrap;}

.buy,.cart{
    display:inline-block; text-decoration:none; font-size:.79rem; letter-spacing:.7px;
    text-transform:uppercase; padding:9px 16px; border-radius:3px; transition:.16s;
  }

.buy{background:var(--accent-warm); color:#fff;}

.buy:hover,.buy:focus{background:#9d6440;}

.cart{border:1px solid var(--line); color:var(--ink-soft);}

.cart:hover,.cart:focus{border-color:var(--accent); color:var(--accent);}

.cartbar{background:var(--sand); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:26px 0; text-align:center;}

.cartbar a{font-size:.86rem; letter-spacing:1.2px; text-transform:uppercase; text-decoration:none;
    border:1px solid var(--accent); color:var(--accent); padding:11px 26px; border-radius:3px; display:inline-block;}

.cartbar a:hover{background:var(--accent); color:#fff;}

.notes{background:var(--sand); padding:56px 0;}

.notes .wrap{max-width:760px;}

.notes h3{font-family:Georgia,serif; font-weight:400; color:var(--deep); font-size:1.3rem; margin:0 0 14px;}

.notes p{color:var(--ink-soft); font-size:.97rem;}

footer{background:var(--deep); color:rgba(255,255,255,.72); padding:56px 0 32px; font-size:.9rem;}

.fbot{border-top:1px solid rgba(255,255,255,.14); margin-top:40px; padding-top:22px; font-size:.82rem; color:rgba(255,255,255,.55);}

.credential{background:var(--deep); color:#fff; padding:0 0 46px; text-align:center;}

.credential .wrap{max-width:760px;}

.credential .box{border:1px solid rgba(255,255,255,.22); border-radius:4px; padding:24px 28px;}

.credential b{font-family:Georgia,serif; font-weight:400; font-size:1.16rem; display:block; margin-bottom:8px;}

.credential span{color:rgba(255,255,255,.8); font-size:.96rem;}

.lead{max-width:740px; margin:0 auto 8px; text-align:center; color:var(--ink-soft);}

.hopkins{display:inline-block; font-size:.74rem; letter-spacing:.8px; text-transform:uppercase;
    color:var(--accent); border:1px solid var(--line); border-radius:2px; padding:4px 10px; margin:0 0 14px;}

.buy,.cart{display:inline-block; text-decoration:none; font-size:.79rem; letter-spacing:.7px;
    text-transform:uppercase; padding:9px 16px; border-radius:3px; transition:.16s;}

.craft{background:var(--deep); color:#fff; padding:0 0 46px;}

.craft .wrap{max-width:820px;}

.craft .box{border:1px solid rgba(255,255,255,.22); border-radius:4px; padding:26px 30px;}

.craft b{font-family:Georgia,serif; font-weight:400; font-size:1.16rem; display:block; margin-bottom:12px;}

.craft ul{margin:0; padding:0; list-style:none; display:grid; grid-template-columns:1fr; gap:8px;}

@media(min-width:640px){ .craft ul{grid-template-columns:1fr 1fr;} }

.craft li{color:rgba(255,255,255,.82); font-size:.94rem; padding-left:18px; position:relative;}

.craft li::before{content:""; position:absolute; left:0; top:.62em; width:6px; height:6px;
    border-radius:50%; background:var(--accent-warm);}

h2.grp{font-family:Georgia,serif; font-weight:400; color:var(--deep); font-size:1.5rem;
    margin:44px 0 4px; padding-bottom:10px; border-bottom:2px solid var(--accent-warm); display:inline-block;}

.prod h3{font-family:Georgia,serif; font-weight:400; color:var(--deep);
    font-size:clamp(1.3rem,2.6vw,1.62rem); margin:0 0 12px; line-height:1.25;}

.meta{font-size:.85rem; color:var(--ink-soft); margin:0 0 14px; font-style:italic;}

.prod h2{font-family:Georgia,serif; font-weight:400; color:var(--deep);
    font-size:clamp(1.3rem,2.6vw,1.62rem); margin:0 0 6px; line-height:1.25;}

.place{font-size:.85rem; color:var(--ink-soft); font-style:italic; margin:0 0 14px;}

.buys{display:flex; gap:10px; flex-wrap:wrap; margin-top:4px;}

.buy,.cart{display:inline-block; text-decoration:none; font-size:.79rem; letter-spacing:.7px;
    text-transform:uppercase; padding:10px 18px; border-radius:3px; transition:.16s;}

.track .buys{display:flex; gap:9px; flex-wrap:wrap; margin-top:0;}

.extlink{display:inline-block; margin:2px 8px 2px 0; font-size:.84rem; text-decoration:none;
    border:1px solid var(--line); border-radius:3px; padding:7px 13px; color:var(--ink-soft);}

.extlink:hover{border-color:var(--accent); color:var(--accent);}

.paybox{background:var(--white); border:1px solid var(--line); border-radius:5px;
    padding:26px 28px; margin:24px 0; box-shadow:var(--shadow);}

.paybox h3{font-family:Georgia,serif; font-weight:400; color:var(--deep); font-size:1.22rem; margin:0 0 10px;}

.paybox p{color:var(--ink-soft); font-size:.95rem; margin:0 0 14px;}

.paybox input[type=text],.paybox input:not([type]),.paybox select{
    font:inherit; font-size:.95rem; padding:9px 11px; border:1px solid var(--line);
    border-radius:3px; width:100%; max-width:340px; margin-bottom:12px; background:var(--paper); color:var(--ink);}

.paybox label{display:block; font-size:.86rem; color:var(--ink-soft); margin-bottom:5px;}

.price{font-family:Georgia,serif; font-size:1.5rem; color:var(--deep); margin:0 0 4px;}

.svc{display:grid; grid-template-columns:1fr; gap:16px; margin:26px 0 0;}

@media(min-width:700px){ .svc{grid-template-columns:1fr 1fr;} }

.svc div{border:1px solid var(--line); border-radius:4px; padding:20px 22px; background:var(--white);}

.svc b{display:block; font-family:Georgia,serif; font-weight:400; color:var(--deep); font-size:1.08rem; margin-bottom:6px;}

.svc span{color:var(--ink-soft); font-size:.92rem;}

@media(min-width:640px){ .bens{grid-template-columns:1fr 1fr !important;} }

@media(min-width:980px){ .bens{grid-template-columns:repeat(3,1fr) !important;} }

.bens li{padding-left:22px; position:relative; color:var(--ink-soft); font-size:.97rem;}

.bens li::before{content:""; position:absolute; left:0; top:.62em; width:7px; height:7px;
    border-radius:50%; background:var(--accent-warm); opacity:.65;}

.backbar{background:var(--white); border-bottom:1px solid var(--line);}

.backbar .wrap{display:flex; align-items:center; gap:18px; min-height:60px; flex-wrap:wrap;}

.backbar a{font-size:.84rem; color:var(--ink-soft); text-decoration:none;}

.backbar a:hover{color:var(--accent);}

.backbar .home{font-family:Georgia,serif; font-size:1.08rem; color:var(--deep); margin-right:auto;}

.warn{background:#fff8f0; border:1px solid #e8d5bd; border-radius:4px; padding:16px 20px;
    color:#7a5a37; font-size:.93rem; margin:26px 0;}

.story{background:var(--sand); padding:56px 0;}

.story .wrap{max-width:760px;}

.story p{color:var(--ink-soft); font-size:1.03rem;}

.story blockquote{font-family:Georgia,serif; font-size:1.3rem; line-height:1.5; color:var(--deep);
    font-style:italic; margin:0 0 22px; border-left:3px solid var(--accent-warm); padding-left:22px;}

.pricetag{display:inline-block; font-family:Georgia,serif; font-size:1.16rem; color:var(--deep);
    background:var(--sand); border:1px solid var(--line); border-radius:3px;
    padding:6px 14px; margin:0 0 16px;}