/* JodhpurHandicraft.com — design system. Warm-minimal, editorial, product-focused.
   Performance-first: tokens, no @import, GPU-only transitions, self-hosted woff2. */

/* ---------- Fonts (self-hosted woff2, font-display: swap) ---------- */
@font-face{font-family:"Fraunces";src:url("/assets/fonts/fraunces-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url("/assets/fonts/fraunces-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/assets/fonts/inter-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/assets/fonts/inter-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/assets/fonts/inter-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --bg:#FAF7F2; --surface:#FFFFFF; --surface-warm:#F3ECE2; --surface-deep:#2B2621;
  --ink:#2B2621; --ink-soft:#5E554B; --ink-faint:#766C60; --on-dark:#F3ECE2;
  --line:#E6DCCE; --line-soft:#F0E8DC;
  --accent:#9A5B34; --accent-deep:#6E3D22; --accent-soft:#F0E2D5; --gold:#B08D57;
  --ok:#4F6F52; --warn:#9A6A2F;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r:12px; --r-sm:8px; --r-lg:20px;
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;--sp-8:64px;--sp-9:96px;
  --wrap:1200px; --wrap-wide:1440px; --measure:68ch;
  --shadow:0 1px 2px rgba(43,38,33,.04),0 8px 28px -12px rgba(43,38,33,.12);
  --shadow-sm:0 1px 2px rgba(43,38,33,.05);
  --ring:0 0 0 3px rgba(154,91,52,.28);
  --dur:220ms; --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:1rem;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent-deep);text-decoration:none}
a:hover{color:var(--accent)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.12;letter-spacing:-.01em;color:var(--ink);margin:0 0 .5em}
h1{font-size:clamp(2.1rem,5vw,3.4rem)} h2{font-size:clamp(1.6rem,3.2vw,2.3rem)}
h3{font-size:clamp(1.25rem,2vw,1.55rem)} h4{font-size:1.15rem}
p{margin:0 0 1rem;max-width:var(--measure)}
.lead{font-size:1.2rem;line-height:1.6;color:var(--ink-soft)}
small,.eyebrow{font-size:.8rem}
.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-weight:600;color:var(--accent);font-size:.75rem}
ul,ol{padding-left:1.2em} li{margin:.3em 0}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:4px}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(16px,4vw,32px)}
.wrap-wide{max-width:var(--wrap-wide)}
section{padding-block:clamp(48px,8vw,96px)}
.section-sm{padding-block:clamp(32px,5vw,56px)}
.grid{display:grid;gap:var(--sp-6)}
@media(min-width:768px){.cols-2{grid-template-columns:repeat(2,1fr)}.cols-3{grid-template-columns:repeat(3,1fr)}.cols-4{grid-template-columns:repeat(4,1fr)}}
@media(min-width:640px) and (max-width:767px){.cols-3,.cols-4{grid-template-columns:repeat(2,1fr)}}
.stack>*+*{margin-top:var(--sp-5)}
.center{text-align:center} .muted{color:var(--ink-soft)}
.bg-warm{background:var(--surface-warm)} .bg-surface{background:var(--surface)}
.bg-dark{background:var(--surface-deep);color:var(--on-dark)}
.bg-dark h1,.bg-dark h2,.bg-dark h3{color:#fff}.bg-dark .eyebrow{color:var(--gold)}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(250,247,242,.88);backdrop-filter:saturate(1.3) blur(10px);border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;min-height:68px;gap:var(--sp-5)}
.brand{font-family:var(--serif);font-weight:600;font-size:1.3rem;letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
.brand b{color:var(--accent)}
/* ---------- Mega menu ---------- */
.mega{display:none}
@media(min-width:1024px){.mega{display:block}}
.mega-top{list-style:none;display:flex;gap:var(--sp-5);margin:0;padding:0;align-items:center}
.mega-item{position:relative}
.mega-trigger{display:inline-block;color:var(--ink-soft);font-weight:500;font-size:.95rem;padding:22px 0;white-space:nowrap}
.mega-item:hover .mega-trigger,.mega-item:focus-within .mega-trigger{color:var(--accent)}
.mega-panel{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);min-width:260px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);
  padding:var(--sp-3);opacity:0;visibility:hidden;transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);z-index:60}
.mega-item:hover .mega-panel,.mega-item:focus-within .mega-panel{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.mega-panel ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.mega-panel a{display:block;padding:9px 12px;border-radius:var(--r-sm);color:var(--ink);font-size:.92rem;font-weight:500}
.mega-panel a:hover{background:var(--surface-warm);color:var(--accent-deep)}
/* mobile accordion menu */
.m-group{padding:10px 0;border-bottom:1px solid var(--line-soft)}
.m-group .m-h{font-family:var(--serif);font-weight:600;font-size:1.05rem;margin:0 0 6px;color:var(--ink)}
#m a{display:inline-block;padding:7px 14px 7px 0;color:var(--ink-soft);font-size:.95rem}
#m a:hover{color:var(--ink)}
#m{padding:8px clamp(16px,4vw,32px) 20px;max-height:76vh;overflow-y:auto}
@media(prefers-reduced-motion:reduce){.mega-panel{transition:none}}
.nav-cta{display:inline-flex}
.menu-btn{display:inline-flex;align-items:center;gap:8px;background:none;border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 14px;font:inherit;font-size:.9rem;color:var(--ink);cursor:pointer}
@media(min-width:1024px){.menu-btn{display:none}}
/* the hidden attribute must always win (header .wrap flex was overriding it → double menu) */
[hidden]{display:none!important}
/* mobile dropdown menu: stacked, only usable < desktop */
#m{flex-direction:column!important;align-items:stretch;gap:0}
#m a{padding:12px 2px;border-bottom:1px solid var(--line-soft);color:var(--ink-soft)}
#m a:hover{color:var(--ink)}
@media(min-width:1024px){#m{display:none!important}}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:12px 22px;border-radius:var(--r-sm);
  font-family:var(--sans);font-weight:600;font-size:.95rem;cursor:pointer;border:1px solid transparent;transition:transform var(--dur) var(--ease),background var(--dur) var(--ease),box-shadow var(--dur) var(--ease);white-space:nowrap}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-deep);color:#fff;transform:translateY(-1px);box-shadow:var(--shadow)}
.btn-outline{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn-outline:hover{background:var(--ink);color:var(--bg);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--accent-deep);padding-inline:6px}
.btn-ghost:hover{color:var(--accent)}
.btn-lg{min-height:54px;padding:16px 30px;font-size:1.02rem}
.bg-dark .btn-outline{border-color:var(--on-dark);color:var(--on-dark)}
.bg-dark .btn-outline:hover{background:var(--on-dark);color:var(--surface-deep)}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden}
.hero-grid{display:grid;gap:var(--sp-7);align-items:center}
@media(min-width:900px){.hero-grid{grid-template-columns:1.05fr 1fr}}
.hero h1{margin-bottom:.4em}
.hero .lead{margin-bottom:var(--sp-6)}
.hero-media{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:4/3;background:var(--surface-warm)}
.hero-media img{width:100%;height:100%;object-fit:cover}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--sp-3)}

/* ---------- Cards / product grid ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);display:flex;flex-direction:column}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.card-media{aspect-ratio:4/3;background:var(--surface-warm);overflow:hidden}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform 500ms var(--ease)}
.card:hover .card-media img{transform:scale(1.04)}
.card-body{padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-2);flex:1}
.card-body h3{font-size:1.2rem;margin:0}
.card-body p{font-size:.95rem;color:var(--ink-soft);margin:0}
.card-link{margin-top:auto;font-weight:600;color:var(--accent-deep);font-size:.9rem}
.card-link::after{content:" →";transition:margin var(--dur) var(--ease)}
.card:hover .card-link::after{margin-left:4px}

/* ---------- Trust strip / badges ---------- */
.trust{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center}
.badge{display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:100px;padding:8px 16px;font-size:.85rem;font-weight:500;color:var(--ink-soft)}
.badge b{color:var(--ink)}

/* ---------- Tables (AEO-native) ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:.92rem}
th,td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line-soft);color:var(--ink)}
thead th{background:var(--surface-warm);font-weight:600;color:var(--ink);white-space:nowrap}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--surface-warm)}

/* ---------- FAQ ---------- */
.faq details{border-bottom:1px solid var(--line);padding:var(--sp-4) 0}
.faq summary{font-family:var(--serif);font-weight:600;font-size:1.12rem;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent);font-family:var(--sans);font-weight:400;font-size:1.4rem;transition:transform var(--dur) var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:var(--sp-3) 0 0;color:var(--ink-soft)}

/* ---------- Breadcrumb / prose ---------- */
.crumb{font-size:.82rem;color:var(--ink-faint);margin-bottom:var(--sp-4)}
.crumb a{color:var(--ink-soft)} .crumb a:hover{color:var(--accent)}
.prose h2{margin-top:2em} .prose h3{margin-top:1.6em}
.prose>*{max-width:var(--measure)}
.prose .table-wrap,.prose figure{max-width:100%}
/* inline text links distinguished by more than colour (a11y) */
main p a,main li a,.prose a,.crumb a,.footer-legal a{text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
main p a:hover,.prose a:hover{text-decoration-thickness:2px}
.nav a,.card a,.card-link,.btn,.footer-grid a,.brand,.badge a,.btn-row a{text-decoration:none}

/* ---------- Forms ---------- */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--sp-4)}
.field label{font-weight:600;font-size:.9rem;color:var(--ink)}
.field input,.field select,.field textarea{font:inherit;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);min-height:46px}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);box-shadow:var(--ring);outline:none}
.hp{position:absolute;left:-9999px}

/* ---------- Footer ---------- */
.site-footer{background:var(--surface-deep);color:var(--on-dark);padding-block:var(--sp-8) var(--sp-6);margin-top:var(--sp-9)}
.site-footer a{color:var(--on-dark);opacity:.82} .site-footer a:hover{opacity:1;color:#fff}
.footer-grid{display:grid;gap:var(--sp-6)}
@media(min-width:768px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.footer-grid .foot-h{color:#fff;font-size:.95rem;font-family:var(--sans);font-weight:600;text-transform:uppercase;letter-spacing:.1em;opacity:.7;margin:0 0 var(--sp-3)}
.footer-grid ul{list-style:none;padding:0;margin:0} .footer-grid li{margin:.4em 0;font-size:.92rem}
.footer-legal{border-top:1px solid rgba(243,236,226,.16);margin-top:var(--sp-6);padding-top:var(--sp-5);font-size:.82rem;opacity:.7;display:flex;flex-wrap:wrap;gap:var(--sp-4);justify-content:space-between}

/* ---------- Utilities / motion ---------- */
.pill{display:inline-block;background:var(--accent-soft);color:var(--accent-deep);border-radius:100px;padding:4px 12px;font-size:.78rem;font-weight:600}
.divider{height:1px;background:var(--line);border:0;margin-block:var(--sp-6)}
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}}