@property --sweep{ syntax:"<angle>"; inherits:false; initial-value:0deg; }

/* ==========================================================================
   The Satin Bow by Simran — thesatinbow.in
   Palette sampled directly from the logo artwork.
   ========================================================================== */

:root{
  --cream:        #f9f1e5;   /* logo background, exact */
  --cream-deep:   #f2e6d3;
  --champagne:    #ebd5ba;   /* satin highlight on the bow */
  --gold:         #b08b4f;   /* wordmark gold */
  --gold-deep:    #8a6a33;
  --gold-line:    #d0a058;   /* the two hairline rings */
  --ink:          #3b2e21;
  --ink-soft:     #6b5842;
  --cocoa:        #241a16;   /* dark band behind the gallery */
  --cocoa-soft:   #33261f;

  --measure: 62ch;
  --pad: clamp(1.25rem, 5vw, 4.5rem);
  --shell: 1180px;

  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans:  "Jost", -apple-system, "Segoe UI", system-ui, sans-serif;

  --ease: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(1rem,.96rem + .18vw,1.075rem);
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3{ font-family:var(--serif); font-weight:300; line-height:1.14; margin:0; }
h1{ font-size:clamp(2.1rem,1.5rem + 2.4vw,3.35rem); }
h2{ font-size:clamp(1.9rem,1.35rem + 2.2vw,3rem); }
h3{ font-size:clamp(1.25rem,1.1rem + .7vw,1.6rem); }
p{ margin:0 0 1.1em; max-width:var(--measure); }
a{ color:inherit; }

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

::selection{ background:var(--champagne); color:var(--ink); }

:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:2px; }

section[id]{ scroll-margin-top:76px; }

.shell{ width:min(100% - 2*var(--pad), var(--shell)); margin-inline:auto; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--ink); color:var(--cream); padding:.7rem 1.1rem;
}
.skip:focus{ left:1rem; top:1rem; }

/* --- the double hairline, lifted from the logo's twin rings ---------------- */
.rule{
  border:0; height:5px; width:clamp(90px,14vw,190px); margin:0 0 2rem;
  background:
    linear-gradient(var(--gold-line),var(--gold-line)) top/100% 1px no-repeat,
    linear-gradient(var(--gold-line),var(--gold-line)) bottom/100% 1px no-repeat;
  opacity:.7;
}
.rule--center{ margin-inline:auto; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-head{
  position:fixed; inset:0 0 auto; z-index:40;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.85rem var(--pad);
  transition:background .5s var(--ease), box-shadow .5s var(--ease), transform .45s var(--ease);
  transform:translateY(-100%);
}
.site-head.is-visible{ transform:none; }
.site-head.is-stuck{
  background:rgba(249,241,229,.93);
  backdrop-filter:blur(10px);
  box-shadow:0 1px 0 rgba(176,139,79,.28);
}
.site-head__brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; }
.site-head__brand img{ width:34px; height:34px; }
.site-head__brand span{
  font-family:var(--serif); font-size:1.15rem; letter-spacing:.14em; color:var(--gold-deep);
  white-space:nowrap;
}
@media (max-width:540px){
  .site-head__brand span{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .site-head{ padding-inline:1rem; }
  .nav{ gap:.85rem; }
  .nav a{ font-size:.75rem; letter-spacing:.06em; }
}
.nav{ display:flex; align-items:center; gap:clamp(.9rem,2vw,1.9rem); }
.nav a{
  text-decoration:none; font-size:.82rem; letter-spacing:.1em; color:var(--ink-soft);
  padding:.3rem 0; border-bottom:1px solid transparent; transition:color .3s, border-color .3s;
}
.nav a:hover{ color:var(--gold-deep); border-bottom-color:var(--gold-line); }
@media (max-width:760px){ .nav .nav__hide{ display:none; } }
@media (max-width:560px){ .hero__scroll{ display:none; } }

/* ==========================================================================
   Hero + logo animation
   ========================================================================== */
.hero{
  min-height:100svh;
  display:grid; place-items:center;
  text-align:center;
  padding:4.5rem var(--pad) 4rem;
  position:relative;
  background:
    radial-gradient(120% 90% at 50% 8%, #fffaf1 0%, var(--cream) 46%, #f3e8d7 100%);
}
.hero__inner{ display:grid; justify-items:center; }

.mark{
  position:relative;
  width:min(64vw, 34svh, 360px);
  aspect-ratio:1;
  margin-bottom:clamp(.6rem,1.6vh,1.4rem);
}
.mark__layer{ position:absolute; inset:0; width:100%; height:100%; }

/* 1 — the ribbon traces the circle */
.mark__ring{ opacity:0; }
.has-sweep .mark__ring{
  opacity:1;
  -webkit-mask-image:conic-gradient(from -96deg, #000 var(--sweep), rgba(0,0,0,0) 0deg);
          mask-image:conic-gradient(from -96deg, #000 var(--sweep), rgba(0,0,0,0) 0deg);
  animation:trace 1500ms cubic-bezier(.32,.7,.3,1) both;
}
.no-sweep .mark__ring{ animation:soft-in 900ms var(--ease) both; }
@keyframes trace{ from{ --sweep:0deg } to{ --sweep:360deg } }

/* 2 — the bow settles onto the ribbon */
.mark__bow{ opacity:0; animation:bow-in 1100ms var(--ease) 900ms both; }
@keyframes bow-in{
  0%  { opacity:0; transform:translateY(-8%) scale(.88) rotate(-3.5deg); }
  55% { opacity:1; }
  100%{ opacity:1; transform:none; }
}

/* 3 — the wordmark is revealed from the baseline up */
.mark__word{
  opacity:0;
  animation:word-in 1000ms var(--ease) 1450ms both;
}
@keyframes word-in{
  from{ opacity:0; clip-path:inset(0 0 42% 0); transform:translateY(10px); }
  to  { opacity:1; clip-path:inset(0 0 0 0);   transform:none; }
}

/* 4 — a single sweep of satin light across the finished mark */
.mark__sheen{
  position:absolute; inset:0; pointer-events:none;
  -webkit-mask-image:var(--mark-mask); mask-image:var(--mark-mask);
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  background:linear-gradient(104deg,
      rgba(255,255,255,0) 38%,
      rgba(255,253,246,.92) 50%,
      rgba(255,255,255,0) 62%);
  background-size:260% 100%; background-position:180% 0;
  mix-blend-mode:soft-light; opacity:0;
}
.mark.is-lit .mark__sheen{ animation:sheen 1400ms ease-in-out both; }
@keyframes sheen{
  0%{ opacity:0; background-position:170% 0 }
  18%{ opacity:1 }
  100%{ opacity:0; background-position:-70% 0 }
}

@keyframes soft-in{ from{opacity:0} to{opacity:1} }
@keyframes rise{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none} }

.hero__tagline{
  font-family:var(--serif);
  font-size:clamp(1.15rem,.95rem + .9vw,1.7rem);
  letter-spacing:.2em; color:var(--gold-deep); margin:0;
  animation:rise 900ms var(--ease) 2050ms both;
}
.hero h1{
  margin:.7rem 0 .35rem; max-width:20ch; color:var(--ink);
  animation:rise 900ms var(--ease) 2200ms both;
}
.hero__sub{
  color:var(--ink-soft); max-width:46ch; margin-inline:auto;
  animation:rise 900ms var(--ease) 2350ms both;
  margin-bottom:0;
}
.hero__actions{
  display:flex; flex-wrap:wrap; gap:.85rem; justify-content:center; margin-top:1.4rem;
  animation:rise 900ms var(--ease) 2500ms both;
}
.hero__scroll{
  position:absolute; bottom:1.4rem; left:50%; translate:-50% 0;
  font-size:.7rem; letter-spacing:.24em; color:var(--gold-deep); text-decoration:none;
  animation:rise 900ms var(--ease) 2700ms both;
}
.hero__scroll::after{
  content:""; display:block; width:1px; height:34px; margin:.55rem auto 0;
  background:linear-gradient(var(--gold-line),transparent);
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.82rem 1.7rem; border-radius:999px;
  font-size:.85rem; letter-spacing:.11em; text-decoration:none;
  border:1px solid var(--gold-line); color:var(--gold-deep); background:transparent;
  cursor:pointer; transition:background .35s var(--ease), color .35s var(--ease), border-color .35s;
  font-family:var(--sans); font-weight:400;
}
.btn:hover{ background:var(--gold-deep); border-color:var(--gold-deep); color:var(--cream); }
.btn--solid{ background:var(--gold-deep); border-color:var(--gold-deep); color:var(--cream); }
.btn--solid:hover{ background:var(--ink); border-color:var(--ink); }
.btn--ghost-dark{ border-color:rgba(235,213,186,.45); color:var(--champagne); }
.btn--ghost-dark:hover{ background:var(--champagne); border-color:var(--champagne); color:var(--cocoa); }
.btn svg{ width:16px; height:16px; fill:currentColor; }

/* ==========================================================================
   Generic section rhythm
   ========================================================================== */
.band{ padding:clamp(3.5rem,9vh,7rem) 0; }
.band--dark{ background:var(--cocoa); color:var(--cream); }
.band--dark h2{ color:var(--champagne); }
.band--dark .rule{ opacity:.55; }
.band--tint{ background:linear-gradient(var(--cream), var(--cream-deep)); }

.lede{ font-size:clamp(1.05rem,1rem + .35vw,1.25rem); color:var(--ink-soft); }
.band--dark .lede{ color:rgba(249,241,229,.72); }

.head-split{
  display:grid; gap:clamp(1rem,4vw,3.5rem); align-items:end;
  grid-template-columns:minmax(0,1fr);
  margin-bottom:clamp(2rem,5vh,3.2rem);
}
@media (min-width:880px){ .head-split{ grid-template-columns:1.05fr .95fr; } }

/* ==========================================================================
   Collections — set like the index of a printed catalogue
   ========================================================================== */
.index{ border-top:1px solid rgba(176,139,79,.3); }
.index__row{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.4rem 1.5rem;
  align-items:baseline; padding:1.15rem 0;
  border-bottom:1px solid rgba(176,139,79,.3);
}
.index__row h3{ color:var(--ink); }
.index__row p{ grid-column:1/-1; margin:.3rem 0 0; color:var(--ink-soft); font-size:.95rem; max-width:58ch; }
.index__meta{ font-size:.8rem; letter-spacing:.12em; color:var(--gold-deep); white-space:nowrap; }

/* ==========================================================================
   Gallery
   ========================================================================== */
.filters{ display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 2rem; padding:0; list-style:none; }
.filters button{
  font-family:var(--sans); font-size:.78rem; letter-spacing:.1em; font-weight:300;
  padding:.5rem 1.05rem; border-radius:999px; cursor:pointer;
  background:transparent; color:rgba(249,241,229,.66);
  border:1px solid rgba(235,213,186,.28);
  transition:color .3s, border-color .3s, background .3s;
}
.filters button:hover{ color:var(--champagne); border-color:rgba(235,213,186,.6); }
.filters button[aria-pressed="true"]{ background:var(--champagne); border-color:var(--champagne); color:var(--cocoa); }

.grid{ columns:1; column-gap:14px; }
@media (min-width:560px){ .grid{ columns:2; } }
@media (min-width:900px){ .grid{ columns:3; column-gap:18px; } }
@media (min-width:1240px){ .grid{ columns:4; } }

.tile{
  break-inside:avoid; margin:0 0 14px; padding:0; position:relative;
  border:0; background:none; cursor:zoom-in; width:100%; display:block;
  border-radius:3px; overflow:hidden;
  opacity:0; transform:translateY(10px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.tile.is-in{ opacity:1; transform:none; }
.tile img{ width:100%; height:auto; border-radius:3px; }
.tile figcaption{
  position:absolute; inset:auto 0 0 0; padding:2.6rem .9rem .8rem; text-align:left;
  font-size:.78rem; letter-spacing:.06em; color:#fff;
  background:linear-gradient(transparent, rgba(20,13,10,.78));
  opacity:0; transition:opacity .35s var(--ease);
}
.tile:hover figcaption, .tile:focus-visible figcaption{ opacity:1; }
@media (hover:none){ .tile figcaption{ display:none; } }
.gallery-note{ margin-top:1.6rem; font-size:.82rem; color:rgba(249,241,229,.5); }

/* Lightbox */
.lightbox{
  border:0; padding:0; width:100vw; height:100dvh; max-width:100vw; max-height:100dvh;
  background:rgba(23,16,12,.96); color:var(--cream);
}
.lightbox::backdrop{ background:rgba(23,16,12,.94); }
.lightbox__stage{ position:fixed; inset:0; display:grid; grid-template-rows:1fr auto; }
.lightbox__img{
  place-self:center; max-width:min(94vw,1200px); max-height:78dvh;
  width:auto; height:auto; object-fit:contain; border-radius:2px;
}
.lightbox__bar{ padding:1rem clamp(1rem,4vw,2.5rem) 1.6rem; text-align:center; }
.lightbox__cap{ font-size:.9rem; color:rgba(249,241,229,.86); margin:0 auto; max-width:60ch; }
.lightbox__cat{ margin-inline:auto; font-size:.72rem; letter-spacing:.18em; color:var(--gold-line); margin:0 0 .35rem; }
.lb-btn{
  position:fixed; top:50%; translate:0 -50%; z-index:2;
  width:52px; height:52px; border-radius:50%; cursor:pointer;
  background:rgba(249,241,229,.08); border:1px solid rgba(235,213,186,.35); color:var(--cream);
  display:grid; place-items:center; transition:background .3s, border-color .3s;
}
.lb-btn:hover{ background:rgba(235,213,186,.22); border-color:var(--champagne); }
.lb-prev{ left:clamp(.5rem,2vw,1.6rem); }
.lb-next{ right:clamp(.5rem,2vw,1.6rem); }
.lb-close{ top:clamp(.8rem,2vh,1.4rem); right:clamp(.5rem,2vw,1.6rem); translate:0 0; }
.lb-btn svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.4; }

/* ==========================================================================
   Catalogue
   ========================================================================== */
.cat{ margin-top:clamp(1.8rem,4vh,2.8rem); display:grid; gap:clamp(1.6rem,5vw,3.5rem); align-items:center; grid-template-columns:minmax(0,1fr); }
@media (min-width:880px){ .cat{ grid-template-columns:minmax(260px,.85fr) 1.15fr; } }
.cat__covers{ display:flex; gap:1rem; flex-wrap:wrap; }
.cat__cover{
  position:relative; width:min(100%,300px); border-radius:3px; overflow:hidden;
  box-shadow:0 22px 48px -26px rgba(59,46,33,.6), 0 2px 0 rgba(176,139,79,.25);
  background:var(--cream-deep);
}
.cat__cover img{ width:100%; height:auto; }
.cat__cover--blank{ aspect-ratio:1/1.414; display:grid; place-items:center; text-align:center; padding:2rem; }
.cat__cover--blank span{ font-family:var(--serif); font-size:1.3rem; color:var(--gold-deep); letter-spacing:.1em; }
.cat__list{ list-style:none; margin:1.4rem 0 0; padding:0; }
.cat__item{ padding:1rem 0; border-top:1px solid rgba(176,139,79,.3); }
.cat__item h3{ margin:0 0 .15rem; }
.cat__item .cat__meta{ font-size:.8rem; letter-spacing:.09em; color:var(--gold-deep); }
.cat__actions{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:.8rem; }
.cat__status{ font-size:.85rem; color:var(--ink-soft); }

.viewer{
  border:0; padding:0; width:min(100vw,1100px); height:92dvh; max-width:100vw; max-height:100dvh;
  background:var(--cocoa); border-radius:4px; color:var(--cream);
}
.viewer::backdrop{ background:rgba(23,16,12,.9); }
.viewer__frame{ width:100%; height:100%; border:0; background:#2c211b; }
.viewer__bar{
  position:absolute; inset:auto 0 0 0; display:flex; gap:.6rem; justify-content:center;
  padding:.8rem; background:linear-gradient(transparent,rgba(23,16,12,.92));
}

/* ==========================================================================
   Process — a genuine three-step sequence
   ========================================================================== */
.steps{ margin-top:clamp(1.8rem,4vh,2.8rem); display:grid; gap:clamp(1.6rem,4vw,3rem); grid-template-columns:minmax(0,1fr); counter-reset:s; }
@media (min-width:820px){ .steps{ grid-template-columns:repeat(3,1fr); } }
.step{ counter-increment:s; }
.step::before{
  content:counter(s,decimal-leading-zero);
  font-family:var(--serif); font-size:1.05rem; color:var(--gold-deep); letter-spacing:.1em;
  display:block; padding-bottom:.6rem; margin-bottom:.9rem;
  border-bottom:1px solid rgba(176,139,79,.35);
}
.step h3{ margin-bottom:.4rem; }
.step p{ color:var(--ink-soft); font-size:.97rem; }

/* ==========================================================================
   Enquiry + FAQ + footer
   ========================================================================== */
.contact{ display:grid; gap:clamp(1.6rem,5vw,4rem); grid-template-columns:minmax(0,1fr); }
@media (min-width:880px){ .contact{ grid-template-columns:1.1fr .9fr; } }
.contact__list{ list-style:none; margin:0; padding:0; }
.contact__list li{ padding:.95rem 0; border-bottom:1px solid rgba(235,213,186,.22); }
.contact__list a{ text-decoration:none; border-bottom:1px solid rgba(235,213,186,.4); }
.contact__list a:hover{ border-bottom-color:var(--champagne); }
.contact__k{ display:block; font-size:.72rem; letter-spacing:.2em; color:var(--gold-line); margin-bottom:.15rem; }

.faq{ border-top:1px solid rgba(176,139,79,.3); }
.faq details{ border-bottom:1px solid rgba(176,139,79,.3); }
.faq summary{
  cursor:pointer; padding:1.15rem 2rem 1.15rem 0; position:relative; list-style:none;
  font-family:var(--serif); font-size:clamp(1.1rem,1rem + .4vw,1.35rem); color:var(--ink);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute; right:.35rem; top:1.55rem;
  width:11px; height:11px; border-right:1px solid var(--gold); border-bottom:1px solid var(--gold);
  rotate:45deg; transition:rotate .3s var(--ease);
}
.faq details[open] summary::after{ rotate:-135deg; }
.faq details p{ margin:0 0 1.2rem; color:var(--ink-soft); }

.site-foot{ background:var(--cocoa); color:rgba(249,241,229,.66); padding:clamp(2.5rem,6vh,4rem) 0 2rem; font-size:.88rem; }
.site-foot a{ color:rgba(249,241,229,.86); }
.foot-grid{ display:grid; gap:2rem; grid-template-columns:minmax(0,1fr); }
@media (min-width:760px){ .foot-grid{ grid-template-columns:1.2fr .9fr .9fr; } }
.site-foot h4{ font-family:var(--serif); font-weight:300; font-size:1.15rem; color:var(--champagne); margin:0 0 .6rem; }
.site-foot ul{ list-style:none; margin:0; padding:0; }
.site-foot li{ margin-bottom:.35rem; }
.foot-bottom{
  margin-top:2.5rem; padding-top:1.3rem; border-top:1px solid rgba(235,213,186,.16);
  display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; justify-content:space-between; font-size:.78rem;
}
.foot-logo{ width:56px; height:auto; margin-bottom:1rem; opacity:.9; }

/* floating WhatsApp */
.wa{
  position:fixed; right:clamp(1rem,3vw,2rem); bottom:clamp(1rem,3vh,2rem); z-index:35;
  width:54px; height:54px; border-radius:50%; display:grid; place-items:center;
  background:var(--gold-deep); color:var(--cream); text-decoration:none;
  box-shadow:0 12px 28px -12px rgba(59,46,33,.75);
  transition:transform .3s var(--ease), background .3s;
  opacity:0; pointer-events:none;
}
.wa.is-on{ opacity:1; pointer-events:auto; }
.wa:hover{ transform:translateY(-3px); background:var(--ink); }
.wa svg{ width:26px; height:26px; fill:currentColor; }

.visually-hidden{
  position:absolute!important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms!important; animation-delay:0s!important; transition-duration:.001ms!important; }
  .mark__ring,.mark__bow,.mark__word{ opacity:1!important; }
  .has-sweep .mark__ring{ -webkit-mask-image:none; mask-image:none; }
  .tile{ opacity:1; transform:none; }
}