/* ============================================================
   site.css — shared chrome for hemadani.com
   Loaded on every page, before the page's own <style> block.
   Page-specific layout stays inline in each page.
   ============================================================ */

/* ---------- Reset & tokens ---------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
:root{
  --black:#080604;
  --gold:#c9a96e;
  --gold-light:#e8d5a3;
  --text:#dbcaab;
  --muted:#8a7656;
  --ease:cubic-bezier(.22,1,.36,1);
}
html{scroll-behavior:smooth;overflow-x:clip;}
body{background:var(--black);color:var(--text);font-family:'Jost',sans-serif;font-weight:300;overflow-x:clip;}

/* ---------- Refinement layer ---------- */
::selection{background:rgba(201,169,110,0.30);color:#f5ecd6;}
::-moz-selection{background:rgba(201,169,110,0.30);color:#f5ecd6;}
a:focus-visible,button:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:1.5px solid rgba(201,169,110,0.75);outline-offset:3px;border-radius:1px;}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:1;opacity:0.02;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)'/%3E%3C/svg%3E");}

/* ---------- Navigation ---------- */
nav{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;justify-content:space-between;align-items:center;padding:26px 52px;background:linear-gradient(to bottom,rgba(8,6,4,0.98) 0%,rgba(8,6,4,0.92) 45%,rgba(8,6,4,0.55) 75%,transparent 100%);}
.nav-logo{font-family:'Cinzel',serif;font-size:15px;letter-spacing:0.28em;color:var(--gold-light);text-decoration:none;}
.nav-logo:hover{background-image:linear-gradient(100deg,#c9a96e 0%,#e8d5a3 28%,#fff7e2 50%,#e8d5a3 72%,#c9a96e 100%);background-size:220% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:wordmarkSheen 1.3s ease forwards;}
@keyframes wordmarkSheen{from{background-position:180% center;}to{background-position:0% center;}}
.nav-links{display:flex;gap:36px;list-style:none;}
.nav-links a{font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);text-decoration:none;transition:color 0.3s;}
.nav-links a:hover,.nav-links a.active{color:var(--gold-light);}
.nav-links a,.footer-links a{position:relative;}
.nav-links a::after,.footer-links a::after{content:'';position:absolute;left:0;right:0;bottom:-4px;height:0.5px;background:currentColor;transform:scaleX(0);transform-origin:left center;transition:transform .45s var(--ease);}
.nav-links a:hover::after,.footer-links a:hover::after{transform:scaleX(1);}

/* ---------- Skip link ---------- */
.skip-link{position:fixed;left:10px;top:-60px;z-index:1000;background:var(--gold);color:#080604;padding:9px 16px;font-family:'Jost',sans-serif;font-size:11px;letter-spacing:0.12em;text-transform:uppercase;text-decoration:none;border-radius:2px;transition:top .2s ease;}
.skip-link:focus{top:10px;}

/* ---------- Footer (both layouts: flat flex + .footer-top wrapper) ---------- */
footer{padding:40px 52px;border-top:0.5px solid rgba(201,169,110,0.07);}
footer.footer--flat,footer:not(:has(.footer-top)){display:flex;justify-content:space-between;align-items:center;}
.footer-top{display:flex;justify-content:space-between;align-items:center;}
.footer-logo{font-family:'Cinzel',serif;font-size:12px;letter-spacing:0.26em;color:var(--muted);}
.footer-links{display:flex;gap:28px;list-style:none;}
.footer-links a{font-size:9px;letter-spacing:0.16em;text-transform:uppercase;color:#8a7656;text-decoration:none;transition:color 0.3s;}
.footer-links a:hover{color:var(--gold);}
.footer-copy{font-size:9px;letter-spacing:0.1em;color:#8a7656;}

/* ---------- Mobile menu ---------- */
.m-menu-toggle{display:none;}
.m-menu{display:none;}
@media(max-width:860px){
  nav{padding:18px 24px;background:rgba(8,6,4,0.97);}
  .nav-links{display:none;}
  .m-menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:4px;width:30px;height:30px;background:none;border:none;cursor:pointer;padding:0;}
  .m-menu-toggle span{display:block;height:1.5px;width:22px;background:#e8d5a3;transition:transform .3s ease,opacity .3s ease;}
  .m-menu-toggle.is-open span:nth-child(1){transform:translateY(5px) rotate(45deg);}
  .m-menu-toggle.is-open span:nth-child(2){opacity:0;}
  .m-menu-toggle.is-open span:nth-child(3){transform:translateY(-5px) rotate(-45deg);}
  .m-menu{display:block;position:fixed;top:54px;left:0;right:0;z-index:210;background:rgba(8,6,4,0.98);border-top:0.5px solid rgba(201,169,110,0.15);max-height:0;overflow:hidden;visibility:hidden;transition:max-height .35s ease,visibility 0s linear .35s;}
  .m-menu.open{max-height:360px;visibility:visible;transition:max-height .35s ease;}
  .m-menu a{display:block;padding:15px 24px;font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:var(--text);text-decoration:none;border-bottom:0.5px solid rgba(201,169,110,0.08);opacity:0;transform:translateY(-6px);transition:opacity .3s ease,transform .3s ease;}
  .m-menu.open a{opacity:1;transform:none;}
  .m-menu.open a:nth-child(1){transition-delay:.05s;}
  .m-menu.open a:nth-child(2){transition-delay:.1s;}
  .m-menu.open a:nth-child(3){transition-delay:.15s;}
  .m-menu.open a:nth-child(4){transition-delay:.2s;}
  .m-menu a:active{color:var(--gold);}
  footer,.footer-top{flex-direction:column;gap:18px;text-align:center;}
  footer{padding:36px 24px;}
  .footer-links{flex-wrap:wrap;justify-content:center;gap:14px 20px;}
}

/* ---------- Scroll reveal utility ---------- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity 1s ease,transform 1s ease;}
.reveal.in{opacity:1;transform:translateY(0);}
html:not(.js) .reveal{opacity:1;transform:none;}

/* ============================================================
   Artwork-page kit — additive fixes & polish for the shared
   piece-page components (.frame-border, .loupe, .modal,
   .piece-nav, .info-status). Specificity is deliberately
   bumped where these must win over inline page rules.
   ============================================================ */

/* Frame lifts a breath off the wall on approach */
.frame-border{transition:transform .8s var(--ease),box-shadow .8s ease;}
.frame-border:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px rgba(201,169,110,0.32),0 34px 100px rgba(0,0,0,0.9),0 8px 26px rgba(0,0,0,0.6);}

/* Museum-label lighting: caption brightens while inspecting the frame */
.art-caption span{transition:color .5s ease;}
.piece-art:hover .cap-l{color:var(--gold-light);}
.piece-art:hover .cap-r{color:var(--text);}

/* Loupe: glass depth + breathing ring */
.loupe::after{content:'';position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 36px rgba(8,6,4,0.7),inset 0 0 2px rgba(201,169,110,0.35);}
@keyframes loupePulse{50%{border-color:rgba(201,169,110,0.5);}}
.loupe.on .loupe-ring{animation:loupePulse 3.2s ease-in-out infinite;}

/* Modal: keyboard-safe when closed, artwork settles in when open */
div.modal{visibility:hidden;transition:opacity .35s,visibility 0s linear .35s;}
div.modal.open{visibility:visible;transition:opacity .35s;}
.modal img{transform:scale(.965);transition:transform .6s var(--ease);}
.modal.open img{transform:scale(1);}
.modal .modal-close{opacity:0;transition:opacity .4s ease,color .3s;}
.modal.open .modal-close{opacity:1;transition:opacity .4s ease .3s,color .3s;}

/* The prev/next bar is a <nav> too — undo the fixed-chrome rules for it */
nav.piece-nav{position:static;background:none;z-index:auto;}

/* Piece-nav arrows drift toward their direction */
.piece-nav .pn-arrow{display:inline-block;transition:transform .45s var(--ease);}
.piece-nav .pn-prev:hover .pn-arrow{transform:translateX(-4px);}
.piece-nav .pn-next:hover .pn-arrow{transform:translateX(4px);}

/* Status: ember pulse for available, hollow ring + readable ink for held */
@keyframes emberPulse{0%,100%{opacity:.45;box-shadow:0 0 0 0 rgba(201,169,110,0.35);}50%{opacity:1;box-shadow:0 0 6px 1px rgba(201,169,110,0.25);}}
.piece-info .info-status:not(.held) .status-dot{animation:emberPulse 3.5s ease-in-out infinite;}
.piece-info .info-status.held{color:#7a6a4e;}
.piece-info .info-status.held .status-dot{background:transparent;border:0.5px solid currentColor;}

/* Gallery-return link: lifted above contrast floor */
a.gallery-return{color:rgba(201,169,110,0.62);}

/* Hours hallmark: gold sheen sweeps the number when the count lands */
#hoursNum.done{background-image:linear-gradient(100deg,#c9a96e 0%,#e8d5a3 28%,#fff7e2 50%,#e8d5a3 72%,#c9a96e 100%);background-size:220% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:wordmarkSheen 1.3s ease forwards;}

/* Enquire buttons: shared quiet-luxury hover */
a.enquire-btn,button.enquire-btn{transition:background .3s,border-color .3s,color .3s;}
a.enquire-btn:hover,button.enquire-btn:hover{background:rgba(201,169,110,0.07);border-color:var(--gold);color:var(--gold-light);}

/* ---------- Motion & touch ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;transition-delay:0ms !important;}
  .reveal{opacity:1;transform:none;}
}
@media(hover:none){
  .loupe{display:none !important;}
  .frame-border{cursor:auto !important;}
}