/* ===== POLISH YOUR SOUL — elevated shared styles ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  --ink:#16231f; --deep:#15302b; --deep2:#0e211d; --deep3:#0a1916;
  --teal:#2c6a5b; --teal-lt:#4f9a85;
  --gold:#c4a04a; --gold-lt:#e4cd8f; --gold-deep:#a07e30;
  --cream:#f7f2e8; --cream2:#f0e9da; --sage:#dceae3;
  --muted:#6a7d76; --line:rgba(22,35,31,.10);
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Jost',system-ui,sans-serif;
  --maxw:1180px;
  --shadow-sm:0 2px 14px rgba(14,33,29,.06);
  --shadow:0 16px 50px rgba(14,33,29,.14);
  --shadow-lg:0 30px 80px rgba(14,33,29,.26);
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{font-family:var(--sans);background:var(--cream);color:var(--ink);line-height:1.75;font-weight:300;overflow-x:hidden;letter-spacing:.005em;}
::selection{background:var(--gold-lt);color:var(--deep2);}
img{max-width:100%;display:block;}

/* ---------- NAV ---------- */
nav{position:fixed;inset:0 0 auto 0;z-index:200;height:64px;padding:0 max(5vw,1.5rem);display:flex;align-items:center;justify-content:space-between;background:rgba(14,33,29,.55);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);border-bottom:1px solid rgba(228,205,143,.14);transition:background .4s,backdrop-filter .4s;}
nav.scrolled{background:rgba(14,33,29,.94);}
.nav-logo{font-family:var(--serif);font-size:1.04rem;font-weight:500;letter-spacing:.06em;color:var(--gold-lt);text-decoration:none;display:flex;align-items:center;gap:.6rem;}
/* Optically centred against the wordmark, not box-centred against it.
   "Ibaadur Rahman" has no descenders, so its line box carries empty space
   underneath and flex centring pushes the visible letters about a pixel above
   the mark. Measured: mark ink centre 33.83, text ink centre 31.44. The viewBox
   correction in the markup takes 1.3px of that (the drawing sat low inside its
   own 128 square); this takes the rest. In em so it holds at any size.

   A transform, not a margin: the row is align-items:center, which centres the
   margin box, so a negative margin would move the mark by only half of it. */
.nav-logo svg{flex-shrink:0;transform:translateY(-.063em);}
.nav-links{display:flex;gap:2.1rem;list-style:none;align-items:center;}
.nav-links a{font-size:.72rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:rgba(247,242,232,.72);text-decoration:none;position:relative;padding:.2rem 0;transition:color .25s;}
.nav-links a::after{content:'';position:absolute;left:0;right:100%;bottom:-2px;height:1px;background:var(--gold-lt);transition:right .3s ease;}
.nav-links a:hover{color:var(--gold-lt);} .nav-links a:hover::after{right:0;}
.nav-buy-btn{padding:.55rem 1.3rem;background:var(--gold);color:var(--deep2);font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;border-radius:2px;transition:background .25s,transform .2s,box-shadow .25s;}
.nav-buy-btn:hover{background:var(--gold-lt);transform:translateY(-1px);box-shadow:0 8px 22px rgba(196,160,74,.32);}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:6px;}
.hamburger span{display:block;width:23px;height:1.5px;background:var(--gold-lt);border-radius:2px;transition:.3s;}
.hamburger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}
#mobile-menu{display:none;position:fixed;top:64px;inset-inline:0;z-index:199;background:var(--deep2);border-bottom:1px solid rgba(228,205,143,.2);padding:1.2rem max(5vw,1.5rem) 1.8rem;flex-direction:column;}
#mobile-menu.open{display:flex;animation:slidedown .35s ease;}
@keyframes slidedown{from{opacity:0;transform:translateY(-10px);}to{opacity:1;transform:none;}}
#mobile-menu a{font-size:.82rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:rgba(247,242,232,.8);text-decoration:none;padding:.85rem 0;border-bottom:1px solid rgba(247,242,232,.08);}
#mobile-menu a:last-child{border-bottom:none;color:var(--gold-lt);}

/* ---------- BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--sans);font-size:.76rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;text-decoration:none;border:none;cursor:pointer;border-radius:2px;padding:.95rem 2rem;transition:transform .2s,box-shadow .28s,background .25s,color .25s,border-color .25s;}
.btn-gold{background:var(--gold);color:var(--deep2);box-shadow:0 6px 20px rgba(196,160,74,.22);}
.btn-gold:hover{background:var(--gold-lt);transform:translateY(-2px);box-shadow:0 14px 32px rgba(196,160,74,.34);}
.btn-teal{background:var(--teal);color:#fff;box-shadow:0 6px 20px rgba(44,106,91,.22);}
.btn-teal:hover{background:var(--teal-lt);transform:translateY(-2px);box-shadow:0 14px 32px rgba(44,106,91,.32);}
.btn-ghost{background:transparent;color:#fff;border:1px solid rgba(247,242,232,.42);}
.btn-ghost:hover{border-color:var(--gold-lt);color:var(--gold-lt);transform:translateY(-2px);}
.btn-outline{background:transparent;color:var(--teal);border:1px solid var(--teal);}
.btn-outline:hover{background:var(--teal);color:#fff;}

/* ---------- TYPOGRAPHY HELPERS ---------- */
.eyebrow{font-size:.68rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--teal);display:inline-flex;align-items:center;gap:.7rem;margin-bottom:1.1rem;}
.eyebrow.center{justify-content:center;}
.eyebrow::before,.eyebrow.center::after{content:'';display:block;width:26px;height:1px;background:linear-gradient(90deg,transparent,var(--gold));}
.eyebrow::before{background:linear-gradient(90deg,var(--gold),transparent);}
.eyebrow:not(.center)::after{display:none;}
.section-title{font-family:var(--serif);font-size:clamp(2rem,4.4vw,3.2rem);font-weight:500;line-height:1.12;letter-spacing:.005em;color:var(--ink);}
.section-title em{font-style:italic;color:var(--teal);}
.lead{font-size:1.02rem;color:#3c4d48;font-weight:300;line-height:1.85;}

/* Ornamental star divider (Rub el Hizb motif) */
.ornament{display:flex;align-items:center;justify-content:center;gap:1rem;margin:0 auto;}
.ornament .line{height:1px;width:min(70px,12vw);background:linear-gradient(90deg,transparent,var(--gold));}
.ornament .line.r{background:linear-gradient(90deg,var(--gold),transparent);}
.ornament svg{width:26px;height:26px;opacity:.9;}

/* PRICE bits */
.price-strike{font-size:1rem;font-weight:400;color:var(--muted);text-decoration:line-through;margin-left:.45rem;}
.price-badge{display:inline-block;background:#c0573f;color:#fff;font-size:.6rem;font-weight:700;letter-spacing:.08em;padding:.2rem .55rem;border-radius:2px;vertical-align:middle;margin-left:.2rem;}

/* SHARE */
.share-wrap{position:relative;display:inline-block;}
.share-menu{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);padding:.5rem;display:none;flex-direction:column;gap:1px;min-width:180px;z-index:50;border-radius:4px;}
.share-menu.open{display:flex;animation:fadeup .25s ease;}
@keyframes fadeup{from{opacity:0;transform:translateX(-50%) translateY(6px);}to{opacity:1;transform:translateX(-50%) translateY(0);}}
.share-menu button{background:none;border:none;text-align:left;padding:.6rem .85rem;font-family:var(--sans);font-size:.82rem;color:var(--ink);cursor:pointer;display:flex;align-items:center;gap:.7rem;border-radius:3px;transition:background .15s;}
.share-menu button:hover{background:var(--sage);}
.share-menu svg{width:15px;height:15px;flex-shrink:0;}

/* ---------- FOOTER ---------- */
footer{background:var(--deep3);padding:4rem max(5vw,1.5rem) 2.5rem;border-top:1px solid rgba(228,205,143,.12);position:relative;}
footer::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:120px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);}
.footer-inner{max-width:var(--maxw);margin:0 auto;display:flex;flex-wrap:wrap;gap:2.5rem;justify-content:space-between;}
.footer-brand-col{max-width:320px;}
.footer-brand{font-family:var(--serif);font-size:1.3rem;font-weight:500;color:var(--gold-lt);letter-spacing:.05em;margin-bottom:.7rem;}
.footer-tagline{font-size:.82rem;color:rgba(247,242,232,.42);line-height:1.7;}
.footer-links{display:flex;gap:3.5rem;flex-wrap:wrap;}
.footer-col h4{font-size:.66rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem;}
/* Padding, not margin, carries the extra room. Margin is dead space between
   links; padding is part of the link, so the same growth that makes the list
   easier to read also makes each one easier to hit. */
.footer-col a{display:block;font-size:.9rem;line-height:1.4;color:rgba(247,242,232,.6);text-decoration:none;padding:.3rem 0;margin-bottom:.2rem;transition:color .2s,padding-left .2s;}
.footer-col a:hover{color:var(--gold-lt);padding-left:3px;}
.footer-copy{max-width:var(--maxw);margin:2.5rem auto 0;padding-top:1.6rem;border-top:1px solid rgba(247,242,232,.08);font-size:.73rem;color:rgba(247,242,232,.32);letter-spacing:.03em;text-align:center;line-height:1.8;}

/* REVEAL */
.fade{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);}
.fade.visible{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.fade{opacity:1;transform:none;transition:none;}*{animation:none!important;}}

/* ---------- GENERIC PAGE (contact / legal) ---------- */
.page-hero{background:var(--deep);padding:8rem max(5vw,1.5rem) 4.5rem;text-align:center;position:relative;overflow:hidden;}
.page-hero::after{content:'';position:absolute;inset:0;background:radial-gradient(120% 80% at 50% -10%,rgba(196,160,74,.10),transparent 60%);}
.page-hero h1{font-family:var(--serif);font-size:clamp(2.4rem,5.5vw,3.6rem);font-weight:500;color:#fff;margin-bottom:.7rem;position:relative;}
.page-hero p{color:rgba(247,242,232,.72);font-size:.98rem;max-width:580px;margin:0 auto;font-weight:300;position:relative;}
.page-body{max-width:780px;margin:0 auto;padding:4.5rem max(5vw,1.5rem) 5.5rem;}
.page-body h2{font-family:var(--serif);font-size:1.7rem;font-weight:600;color:var(--deep);margin:2.4rem 0 .8rem;}
.page-body h2:first-child{margin-top:0;}
.page-body h3{font-family:var(--serif);font-size:1.25rem;font-weight:600;color:var(--teal);margin:1.6rem 0 .5rem;}
.page-body p{font-size:.96rem;color:#3c4d48;line-height:1.85;margin-bottom:1rem;font-weight:300;}
.page-body ul{margin:0 0 1rem 1.3rem;}
.page-body li{font-size:.96rem;color:#3c4d48;line-height:1.85;margin-bottom:.45rem;font-weight:300;}
.page-body a.inline-link{color:var(--teal);font-weight:400;text-decoration:underline;text-underline-offset:2px;}
.page-body strong{font-weight:600;color:var(--ink);}
.legal-meta{font-size:.8rem;color:var(--muted);font-style:italic;margin-bottom:2rem;}

@media (max-width:860px){
  .nav-links,.nav-buy-btn{display:none;}
  .hamburger{display:flex;}
  .footer-inner{flex-direction:column;gap:2.5rem;}
}

/* Privacy notice bar */
.privacy-bar{position:fixed;left:1rem;right:1rem;bottom:1rem;max-width:680px;margin:0 auto;z-index:300;background:var(--deep2,#0e211d);color:rgba(247,242,232,.9);border:1px solid rgba(228,205,143,.25);border-radius:8px;padding:1rem 1.2rem;display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap;box-shadow:0 20px 50px rgba(0,0,0,.35);opacity:0;transform:translateY(16px);transition:opacity .4s,transform .4s;}
.privacy-bar.show{opacity:1;transform:none;}
.privacy-bar p{font-size:.8rem;line-height:1.6;font-weight:300;margin:0;flex:1;min-width:220px;}
.privacy-bar a{color:var(--gold-lt,#e4cd8f);text-decoration:underline;text-underline-offset:2px;}
.privacy-ok{background:var(--gold,#c4a04a);color:var(--deep2,#0e211d);border:none;padding:.55rem 1.3rem;font-family:var(--sans,sans-serif);font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;border-radius:4px;cursor:pointer;transition:background .2s;white-space:nowrap;}
.privacy-ok:hover{background:var(--gold-lt,#e4cd8f);}

/* ---------- FOOTER (refined) ---------- */
footer{background:var(--deep3);padding:4.5rem max(5vw,1.5rem) 2rem;}
/* The footer carries the full signature lockup — the one place besides the back
   cover where the ink strokes are used. It is an <img> rather than inline SVG so
   the 26 KB of outlined type is fetched once and cached across every page. */
.footer-mark{display:block;text-decoration:none;margin-bottom:1.15rem;}
.footer-mark img{width:232px;max-width:100%;height:auto;display:block;}
@media (max-width:640px){ .footer-mark img{width:200px;} }
.footer-place{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(247,242,232,.34);margin-top:1rem;}
.footer-links{gap:4rem;}
.footer-bottom{max-width:var(--maxw);margin:3rem auto 0;padding-top:1.5rem;border-top:1px solid rgba(247,242,232,.08);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.6rem;font-size:.73rem;color:rgba(247,242,232,.34);letter-spacing:.03em;}
.footer-isbn{color:rgba(247,242,232,.28);}
@media (max-width:640px){ .footer-bottom{flex-direction:column;text-align:center;} }

/* ---------- NAV (refined) ---------- */
nav{height:66px;}
nav::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgba(196,160,74,.5),transparent);opacity:0;transition:opacity .4s;}
nav.scrolled::before{opacity:1;}
.nav-logo{gap:.66rem;}
.nav-buy-btn{border-radius:3px;box-shadow:0 1px 0 rgba(255,255,255,.15) inset;}

/* Header/footer colour enrichment */
footer{background:linear-gradient(180deg,#0e211d 0%,#0a1916 100%);}
nav.scrolled{background:rgba(11,25,21,.96);}

/* Refund policy: the action, not just the prose. A policy page with no way
   to act on it is where a refund request quietly dies. */
.refund-cta{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.1rem;margin:1.2rem 0 1.6rem;}
.refund-cta span{font-size:.82rem;color:var(--muted);font-weight:300;}

/* The imprint's signature on the About page — stated once, under the heading,
   at the size it was drawn for. Not a header ornament: this is the page where
   someone is deciding who they are buying from. */
.about-mark{display:block;width:min(330px,72vw);height:auto;margin:.25rem 0 1.6rem;}
@media(max-width:640px){.about-mark{margin:0 0 1.2rem;}}

/* ---------- footer columns on a phone ----------
   Three columns in a flex row with a 4rem gap: The Book and Publisher fitted,
   Connect did not, so it wrapped onto its own row and the footer grew a ragged
   third line that read as a mistake.

   A three-column grid keeps them level and equal — the columns share the width
   rather than each taking what its longest link needs, so nothing wraps and the
   headings line up. The gap shrinks with the viewport instead of pushing the
   last column out. */
@media (max-width:640px){
  .footer-links{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;align-items:start;}
  .footer-col h4{margin-bottom:.7rem;letter-spacing:.12em;font-size:.6rem;}
  /* A phone footer link was a 16px-tall target with 8px of dead margin under
     it — small enough that missing one and landing on its neighbour was normal.
     The margin moves inside the link as padding, so the row pitch barely
     changes but the thing you are actually aiming at roughly doubles. */
  .footer-col a{font-size:.84rem;line-height:1.35;padding:.45rem 0;margin-bottom:.1rem;}
}
@media (max-width:380px){
  .footer-links{gap:.7rem;}
  .footer-col a{font-size:.8rem;padding:.4rem 0;}
}