/* GENERATED by tools/make-brand.js — do not edit by hand.
   The jaali lattice and buta are painted as masks so they inherit the
   theme's brass token instead of carrying a baked-in colour. */

:root{
  --jaali:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2264%22%20height%3D%2256%22%20viewBox%3D%220%200%2064%2056%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.25%22%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%2218%22%2F%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%220%22%20r%3D%2218%22%2F%3E%3Ccircle%20cx%3D%2264%22%20cy%3D%220%22%20r%3D%2218%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2228%22%20r%3D%2218%22%2F%3E%3Ccircle%20cx%3D%2248%22%20cy%3D%2228%22%20r%3D%2218%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%2256%22%20r%3D%2218%22%2F%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2256%22%20r%3D%2218%22%2F%3E%3Ccircle%20cx%3D%2264%22%20cy%3D%2256%22%20r%3D%2218%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --jaali-fine:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2264%22%20height%3D%2256%22%20viewBox%3D%220%200%2064%2056%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%220.9%22%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%2218%22%2F%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%220%22%20r%3D%2218%22%2F%3E%3Ccircle%20cx%3D%2264%22%20cy%3D%220%22%20r%3D%2218%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2228%22%20r%3D%2218%22%2F%3E%3Ccircle%20cx%3D%2248%22%20cy%3D%2228%22%20r%3D%2218%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%2256%22%20r%3D%2218%22%2F%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2256%22%20r%3D%2218%22%2F%3E%3Ccircle%20cx%3D%2264%22%20cy%3D%2256%22%20r%3D%2218%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --petal:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%3Cpath%20d%3D%22M12%202C18%208%2018%2016%2012%2022%206%2016%206%208%2012%202Z%22%20fill%3D%22%23000%22%2F%3E%0A%3C%2Fsvg%3E%0A");
}

/* ---- jaali texture, laid over a band without touching its content ---- */
.jaali-skin{position:relative;isolation:isolate}
.jaali-skin > *{position:relative;z-index:1}
.jaali-skin::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:var(--brass);
  -webkit-mask-image:var(--jaali);
  mask-image:var(--jaali);
  -webkit-mask-size:64px 56px;
  mask-size:64px 56px;
  opacity:.07;
}
.band--invert.jaali-skin::before,
.band--invert .jaali-skin::before{background:var(--invert-brass);opacity:.10}
.site-footer.jaali-skin::before{background:var(--invert-brass);opacity:.09}

/* a jaali band that fades out — used as a section edge rather than a fill */
.jaali-edge{
  height:clamp(56px,7vw,92px);
  background:var(--brass);
  -webkit-mask-image:var(--jaali),linear-gradient(to bottom,#000,transparent);
  mask-image:var(--jaali),linear-gradient(to bottom,#000,transparent);
  -webkit-mask-size:64px 56px,100% 100%;
  mask-size:64px 56px,100% 100%;
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
  opacity:.16;
  pointer-events:none;
}
.jaali-edge--up{
  -webkit-mask-image:var(--jaali),linear-gradient(to top,#000,transparent);
  mask-image:var(--jaali),linear-gradient(to top,#000,transparent);
}

/* ---- the mark, wherever it appears ---- */
.brand-mark{display:block;width:auto;color:var(--brass)}
.mark{flex-direction:row;align-items:center;gap:.7rem}
.mark .brand-mark{height:30px;flex:none}
.mark-text{display:flex;flex-direction:column;line-height:1}
@media (max-width:420px){.mark .brand-mark{height:24px}}
.hero-crest{height:clamp(46px,6vw,64px);color:var(--invert-brass);margin-bottom:1.4rem}

/* oversized watermark bleeding off the hero's right edge */
.hero-watermark{
  position:absolute;
  right:-9%;
  bottom:-14%;
  width:min(640px,58vw);
  height:auto;
  color:var(--invert-brass);
  opacity:.07;
  z-index:1;
  pointer-events:none;
}
@media (max-width:920px){.hero-watermark{right:-22%;bottom:auto;top:4%;width:74vw;opacity:.05}}

/* ---- ornamental divider: hairline — buta — mark — buta — hairline ---- */
.ornament{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(10px,2vw,20px);
  padding-block:clamp(28px,4vw,48px);
  color:var(--brass);
}
.band--invert .ornament{color:var(--invert-brass)}
.ornament::before,.ornament::after{
  content:"";
  height:1px;
  flex:1 1 auto;
  max-width:170px;
  background:linear-gradient(to right,transparent,currentColor);
}
.ornament::after{background:linear-gradient(to left,transparent,currentColor)}
.ornament .o-mark{height:30px;width:auto;flex:none}
.ornament .o-buta{height:17px;width:auto;flex:none;opacity:.7}
.ornament .o-buta--flip{transform:scaleX(-1)}

/* ---- petal bullets replace the generic squares ---- */
.tier li::before,
.menu-item .meta span::before{
  background:var(--brass);
  -webkit-mask-image:var(--petal);
  mask-image:var(--petal);
  -webkit-mask-size:contain;
  mask-size:contain;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
}
.tier li::before{width:8px;height:11px;margin-top:.42em}
.menu-item .meta span::before{width:6px;height:8px}
.tier--feature li::before{background:var(--invert-brass)}
.credentials li::before{border-color:currentColor}

/* ---- photo frames: jaali behind the mark, until a real photo lands ---- */
.frame::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:var(--brass);
  -webkit-mask-image:var(--jaali-fine);
  mask-image:var(--jaali-fine);
  -webkit-mask-size:64px 56px;
  mask-size:64px 56px;
  opacity:.20;
  transition:opacity .6s var(--ease);
}
.frame.has-photo::after{opacity:0}
.frame .frame-glyph svg{
  width:min(52%,132px);
  height:auto;
  color:var(--brass);
  opacity:.85;
}
.frame .frame-glyph{opacity:.42}

/* ---- footer crest ---- */
.footer-mark .brand-mark{height:34px;color:var(--invert-brass);margin-bottom:1.1rem}
