/* acearte.com | Document pages.
   Loaded AFTER /assets/site.css: this file owns the presentation of the eight
   document surfaces and should win a tie there. It defines NO palette of its
   own. Every colour resolves from a site token first and falls back to the
   value written in the pinned direction contract only if that token is not
   defined yet. Same fallback contract as /blog/blog.css. */

:root {
  --aa-ground:   var(--ground, var(--bg, #0A0A0A));
  --aa-raise:    #131110;
  --aa-cell:     #201D1B;
  --aa-paper:    var(--paper, var(--text, #F4F1EA));
  --aa-gold-a:   var(--gold-1, var(--gold, #E2C68B));
  --aa-gold-b:   var(--gold-2, #8B6F3D);
  --aa-band:     var(--band, #3A3632);
  --aa-rule:     rgba(226, 198, 139, .24);
  --aa-rule-2:   rgba(226, 198, 139, .5);
  --aa-dim:      rgba(244, 241, 234, .72);
  --aa-display:  var(--font-display, "Italiana", "Didot", "Bodoni 72", Georgia, serif);
  --aa-lockup:   var(--font-lockup, var(--font-display, "Prata Lockup", "Bodoni 72", "Didot", Georgia, serif));
  --aa-body:     var(--font-body, "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
  --aa-measure:  70ch;
  --aa-gilt:     var(--gold-ink, linear-gradient(154deg, var(--aa-gold-a) 4%, var(--aa-gold-b) 98%));
  /* wrapped headings sit in the dark half of the full gilt, so they get a
     shallower ramp that holds ~7:1 on every line */
  --aa-gilt-soft: linear-gradient(160deg, var(--aa-gold-a) 8%, var(--gold-mid, #B69A64) 92%);
}

/* The display face, the lockup face and the utility grotesk are all declared
   and self hosted by /assets/site.css. Nothing is redeclared here. */

/* ------------------------------------------------------------------ ground */

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body.doc {
  margin: 0;
  background: var(--aa-ground);
  color: var(--aa-paper);
  font-family: var(--aa-body);
  font-size: clamp(1rem, .955rem + .21vw, 1.08rem);
  line-height: 1.66;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Browser surfaces the palette does not paint by default. */
body.doc { caret-color: var(--aa-gold-a); }
body.doc ::selection { background: rgba(226, 198, 139, .30); color: #FFF; }
body.doc ::-webkit-scrollbar { width: 11px; height: 11px; }
body.doc ::-webkit-scrollbar-track { background: var(--aa-ground); }
body.doc ::-webkit-scrollbar-thumb { background: #4A4335; border: 3px solid var(--aa-ground); border-radius: 8px; }
body.doc ::-webkit-scrollbar-thumb:hover { background: #5C5443; }
body.doc :focus-visible { outline: 2px solid var(--aa-gold-a); outline-offset: 3px; border-radius: 2px; }

/* ONE warm bloom from top centre, ACE's own end frame lighting. Peak
   brightness in the source sits at 58% of the width, so it is anchored there
   rather than centred. Screen blend over the near black ground. */
.doc .bloom {
  position: absolute; inset: 0 0 auto 0; height: 460px; z-index: 0;
  pointer-events: none;
  /* same shape language as the homepage hero: the gradient is the light,
     the raster only supplies grain through a mask, so the near-black ground
     survives and the masthead keeps its contrast */
  background:
    radial-gradient(52% 62% at 58% -14%,
      rgba(255, 234, 190, .30) 0%,
      rgba(228, 189, 124, .14) 34%,
      rgba(132, 102, 56, .05) 62%,
      rgba(10, 10, 10, 0) 84%);
}
.doc .bloom::after {
  content: ""; position: absolute; inset: 0;
  background: url(/assets/img/bloom.webp) 58% 0 / max(1300px, 120%) auto no-repeat;
  opacity: .10; mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 88%);
          mask-image: linear-gradient(to bottom, #000 0%, transparent 88%);
}
.doc > *:not(.bloom) { position: relative; z-index: 1; }

.doc .wrap { width: 100%; max-width: 1140px; margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2rem); }
.doc img, .doc svg { max-width: 100%; }
.doc .skip { position: absolute; left: -9999px; }
.doc .skip:focus { left: 1rem; top: 1rem; z-index: 40; background: var(--aa-gold-a); color: #17130A; padding: .6rem 1rem; border-radius: 2px; }

/* ---------------------------------------------------------------- ornament */

.doc .jali { color: var(--aa-gold-a); display: block; }
.doc .divider { display: block; margin: clamp(2.8rem, 7vw, 4.2rem) auto clamp(2rem, 5vw, 3rem); width: min(240px, 60%); height: auto; color: var(--aa-gold-a); opacity: .85; }

/* ---------------------------------------------------------------- masthead */

.doc .topline { border-bottom: 1px solid var(--aa-rule); font-size: .76rem; letter-spacing: .04em; }
.doc .topline__in { display: flex; flex-wrap: wrap; gap: .35rem 1.5rem; justify-content: space-between; padding-block: .58rem; }
.doc .topline__tag { color: var(--aa-dim); text-transform: uppercase; }
.doc .topline__call { color: var(--aa-gold-a); text-decoration: none; white-space: nowrap; }
.doc .topline__call:hover { text-decoration: underline; }
.doc .pip { display: inline-block; width: .36rem; height: .36rem; background: var(--aa-gold-a); transform: rotate(45deg); margin-right: .45rem; }

.doc .masthead { border-bottom: 1px solid var(--aa-rule); }
.doc .masthead__in { display: flex; flex-wrap: wrap; gap: 1rem 2.2rem; align-items: center; justify-content: space-between; padding-block: clamp(.9rem, 2.4vw, 1.3rem); }

.doc .lockup { display: inline-flex; align-items: center; gap: .95rem; text-decoration: none; }
.doc .lockup .jali { width: 19px; height: 45px; flex: none; }
.doc .lockup__txt { display: flex; flex-direction: column; gap: .28rem; }
.doc .lockup__name {
  font-family: var(--aa-lockup); font-size: 1.24rem; line-height: 1.14; letter-spacing: .26em;
  padding-right: .26em; color: var(--aa-gold-a); white-space: nowrap;
}
.doc .lockup__tag {
  font-family: var(--aa-lockup); font-size: .69rem; line-height: 1.24; letter-spacing: .3em;
  padding-right: .3em; color: var(--aa-gold-a); white-space: nowrap;
  border-top: 1px solid var(--aa-rule-2); padding-top: .34rem;
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .doc .lockup__name, .doc .lockup__tag {
    background-image: var(--aa-gilt); -webkit-background-clip: text; background-clip: text; color: transparent;
  }
}

.doc .nav { display: flex; flex-wrap: wrap; gap: .3rem 1.05rem; font-size: .81rem; letter-spacing: .02em; }
.doc .nav a { color: var(--aa-paper); text-decoration: none; padding-block: .2rem; border-bottom: 1px solid transparent; }
.doc .nav a:hover { color: var(--aa-gold-a); border-bottom-color: var(--aa-rule-2); }
.doc .nav a[aria-current] { color: var(--aa-gold-a); border-bottom-color: var(--aa-gold-a); }

@media (max-width: 860px) {
  .doc .masthead__in { gap: .7rem 1rem; }
  .doc .nav {
    flex-wrap: nowrap; overflow-x: auto; width: 100%;
    gap: 1.1rem; padding-bottom: .3rem;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    /* the strip fades at its right edge so it reads as scrollable */
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
            mask-image: linear-gradient(90deg, #000 88%, transparent);
  }
  .doc .nav::-webkit-scrollbar { display: none; }
  .doc .nav a { white-space: nowrap; flex: none; }
}

/* ----------------------------------------------------------------- article */

.doc .sheet { max-width: 56rem; margin-inline: auto; padding: clamp(1.6rem, 5vw, 3rem) clamp(1.1rem, 5vw, 2rem) 1rem; }
.doc .crumb { font-size: .77rem; color: var(--aa-dim); letter-spacing: .03em; margin-bottom: clamp(1.6rem, 5vw, 2.6rem); }
.doc .crumb a { color: var(--aa-dim); text-decoration: none; }
.doc .crumb a:hover { color: var(--aa-gold-a); }

.doc h1 {
  font-family: var(--aa-display); font-weight: 400;
  font-size: clamp(1.72rem, 1.15rem + 2.6vw, 3.35rem);
  line-height: 1.12; letter-spacing: .012em;
  margin: 0 0 1.05rem; max-width: 20ch; color: var(--aa-gold-a);
  text-wrap: balance;
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .doc h1 { background-image: var(--aa-gilt-soft); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .doc .body h2 { background-image: var(--aa-gilt-soft); -webkit-background-clip: text; background-clip: text; color: transparent; }
}
.doc .standfirst { font-size: 1.02em; color: var(--aa-dim); max-width: var(--aa-measure); margin: 0; }
.doc .standfirst strong { color: var(--aa-paper); font-weight: 500; }

.doc .body h2 {
  font-family: var(--aa-display); font-weight: 400;
  font-size: clamp(1.34rem, 1.1rem + .84vw, 1.78rem);
  line-height: 1.24; letter-spacing: .008em; color: var(--aa-gold-a);
  /* more space above a heading than below it */
  margin: clamp(2.9rem, 6vw, 4rem) 0 .9rem; max-width: 32ch; text-wrap: balance;
}
.doc .body h2::before {
  content: ""; display: block; width: 2.4rem; height: 1px;
  background: var(--aa-gold-a); opacity: .6; margin-bottom: .95rem;
}
.doc .body h3 {
  font-family: var(--aa-body); font-weight: 600; font-size: 1.01rem; letter-spacing: .005em;
  color: var(--aa-paper); margin: 2.2rem 0 .5rem; max-width: 40ch;
}
.doc .body p, .doc .body li { max-width: var(--aa-measure); }
.doc .body p { margin: 0 0 1.1rem; }
.doc .body ul, .doc .body ol { margin: 0 0 1.25rem; padding-left: 1.2rem; }
.doc .body li { margin-bottom: .55rem; }
.doc .body li::marker { color: var(--aa-gold-a); }
.doc .body strong { color: #FFF; font-weight: 600; }
.doc .body em { font-style: italic; color: var(--aa-paper); }

.doc a { color: var(--aa-gold-a); text-decoration-color: var(--aa-rule-2); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.doc a:hover { text-decoration-color: var(--aa-gold-a); }

/* the dated first screen answer, targeted by Speakable */
.doc .answer {
  border: 1px solid var(--aa-rule); border-left:1px solid var(--rule-2);
  background: rgba(226, 198, 139, .035);
  padding: clamp(1.05rem, 3vw, 1.45rem) clamp(1.1rem, 3.5vw, 1.6rem);
  margin: 0 0 clamp(1.5rem, 4vw, 2.1rem); max-width: var(--aa-measure);
}
.doc .answer h2 {
  font-family: var(--aa-body); font-weight: 600; font-size: .71rem; letter-spacing: .19em;
  text-transform: uppercase; color: var(--aa-gold-a); margin: 0 0 .6rem; max-width: none;
}
.doc .answer h2::before { display: none; }
.doc .answer p { margin: 0; max-width: none; }
.doc .answer__src {
  margin-top: .9rem !important; padding-top: .75rem; border-top: 1px solid var(--aa-rule);
  font-size: .79rem; color: var(--aa-dim); letter-spacing: .01em;
}

.doc .fineprint {
  font-size: .845rem; color: var(--aa-dim); border-left: 1px solid var(--aa-rule);
  padding-left: .95rem; margin: -.2rem 0 1.6rem; max-width: 68ch;
}

/* ------------------------------------------------------------------ ledger */
/* Echoes ACE's own price list creative: warm grey bands, white data, black
   gaps between rows, a gold hairline between columns, tabular figures. */

.doc .ledger-wrap { overflow-x: auto; margin: 1.5rem 0 1.7rem; padding-bottom: .3rem; }
/* A six column register does not fit the reading measure. Let it out to the
   page wrap, the way ACE gives the price list the full sheet. */
/* Only above the sheet width does breaking out buy anything; below it the
   ledger just scrolls inside its own container, and 100vw maths against a
   scrollbar would push the page sideways. */
@media (min-width: 1180px) {
  .doc .ledger-wrap--wide {
    width: 1076px; position: relative; left: 50%; transform: translateX(-50%);
  }
}
.doc .ledger {
  width: 100%; min-width: 34rem; border-collapse: separate; border-spacing: 0 2px;
  font-size: .93rem; font-variant-numeric: tabular-nums lining-nums;
}
.doc .ledger thead th {
  background: var(--aa-band); color: var(--aa-paper); text-align: left; vertical-align: bottom;
  font-weight: 600; font-size: .705rem; letter-spacing: .13em; text-transform: uppercase;
  padding: .8rem .85rem; line-height: 1.35;
}
.doc .ledger tbody td { background: var(--aa-cell); color: var(--aa-paper); padding: .78rem .85rem; vertical-align: top; }
.doc .ledger thead th + th, .doc .ledger tbody td + td { box-shadow: inset 1px 0 0 rgba(226, 198, 139, .17); }
.doc .ledger tbody tr:hover td { background: #262220; }
.doc .ledger td strong { color: var(--aa-gold-a); font-weight: 600; }
.doc .ledger .num { text-align: right; white-space: nowrap; }
/* the unit sits under its label, as ACE sets it on the creative, so a six
   column register still fits without dropping a qualifier */
.doc .ledger .th-unit { display: block; font-size: .92em; letter-spacing: .06em;
  text-transform: none; color: var(--aa-dim); font-weight: 400; margin-top: .18rem; }
.doc .ledger thead th.num { text-align: right; }
.doc .ledger .lead-cell { color: var(--aa-paper); font-weight: 500; }
.doc .ledger a { text-decoration-color: var(--aa-rule-2); }
.doc .ledger-note { font-size: .78rem; color: var(--aa-dim); margin: -1.1rem 0 1.6rem; }

/* ------------------------------------------------- gold ruled figure box */
/* ACE's own device, the rule they draw around "Starting From Rs 3.27 CRORE*" */

.doc .figurebox {
  border: 1px solid var(--aa-gold-a); max-width: 32rem; margin: clamp(1.8rem, 5vw, 2.6rem) auto;
  padding: clamp(1.2rem, 3.6vw, 1.8rem) clamp(1.2rem, 4vw, 2rem); text-align: center;
  background: rgba(226, 198, 139, .04); box-shadow: 0 3px 26px -10px rgba(0, 0, 0, .95);
}
.doc .figurebox__lead {
  display: block; font-family: var(--aa-display); font-size: .95rem; letter-spacing: .1em;
  color: var(--aa-gold-a); margin-bottom: .55rem;
}
.doc .figurebox__fig {
  display: block; font-family: var(--aa-display);
  font-size: clamp(1.85rem, 1.1rem + 3.1vw, 3rem); line-height: 1.06; letter-spacing: .015em;
  color: var(--aa-gold-a); font-variant-numeric: tabular-nums lining-nums;
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .doc .figurebox__fig { background-image: var(--aa-gilt); -webkit-background-clip: text; background-clip: text; color: transparent; }
}
.doc .figurebox__fig--reg {
  font-size: clamp(1.05rem, .82rem + .95vw, 1.6rem); letter-spacing: .05em; word-break: break-word;
}
.doc .figurebox__note {
  display: block; margin-top: .8rem; padding-top: .7rem; border-top: 1px solid var(--aa-rule);
  font-size: .715rem; letter-spacing: .14em; text-transform: uppercase; color: var(--aa-dim);
}

/* The standing notice band, as ACE prints it across the price list. */
.doc .band {
  background: var(--aa-band); color: var(--aa-paper); text-align: center;
  padding: clamp(.9rem, 2.6vw, 1.15rem) 1.1rem; margin: 1.7rem 0 1.9rem; max-width: none !important;
  font-size: clamp(.76rem, .7rem + .28vw, .88rem); font-weight: 600;
  letter-spacing: .11em; text-transform: uppercase; line-height: 1.5;
}

/* The sheet's own tagline, set the way ACE sets BEST OF NOIDA. */
.doc .tagline {
  text-align: center; margin: 2.2rem auto 1.9rem; max-width: none !important;
  font-family: var(--aa-display); font-size: clamp(.98rem, .85rem + .5vw, 1.25rem);
  letter-spacing: .3em; padding-right: .3em; color: var(--aa-gold-a);
  border-top: 1px solid var(--aa-rule-2); border-bottom: 1px solid var(--aa-rule-2);
  padding: .8rem 1rem;
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .doc .tagline { background-image: var(--aa-gilt); -webkit-background-clip: text; background-clip: text; color: transparent; }
}

/* ------------------------------------------------------- numbered sequence */
/* Earned exception: the 20X5 sequence carries the information. */

.doc .steps { list-style: none; margin: 1.6rem 0 1.8rem; padding: 0; counter-reset: step; max-width: var(--aa-measure); }
.doc .steps li {
  counter-increment: step; position: relative; padding: 1rem 0 1rem 3.4rem;
  border-top: 1px solid var(--aa-rule); margin: 0; max-width: none;
}
.doc .steps li:last-child { border-bottom: 1px solid var(--aa-rule); }
.doc .steps li::before {
  content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: 1rem;
  font-family: var(--aa-display); font-size: 1.02rem; letter-spacing: .06em; color: var(--aa-gold-a);
  font-variant-numeric: tabular-nums lining-nums;
}
.doc .steps .steps__share { display: block; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--aa-gold-a); margin-bottom: .18rem; }

/* -------------------------------------------------------------- key points */

.doc .keypoints { border-top: 1px solid var(--aa-rule); border-bottom: 1px solid var(--aa-rule); padding: 1.5rem 0 1.6rem; margin: clamp(2.6rem, 6vw, 3.6rem) 0 1rem; }
.doc .keypoints h2 { margin-top: 0 !important; }

/* --------------------------------------------------------------------- faq */

.doc .faq { margin-top: clamp(2.6rem, 6vw, 3.6rem); }
.doc .faq-list { border-top: 1px solid var(--aa-rule); max-width: var(--aa-measure); }
.doc .faq-item { border-bottom: 1px solid var(--aa-rule); }
.doc .faq-item > summary {
  cursor: pointer; list-style: none; padding: 1.05rem 2.2rem 1.05rem 0; position: relative;
  font-weight: 500; color: var(--aa-paper);
}
.doc .faq-item > summary::-webkit-details-marker { display: none; }
.doc .faq-item > summary::after {
  content: ""; position: absolute; right: .45rem; top: 1.5rem; width: .5rem; height: .5rem;
  border-right: 1px solid var(--aa-gold-a); border-bottom: 1px solid var(--aa-gold-a);
  transform: rotate(45deg); transform-origin: center;
}
.doc .faq-item[open] > summary::after { transform: rotate(225deg); top: 1.65rem; }
.doc .faq-item[open] > summary { color: var(--aa-gold-a); }
.doc .faq-item > p { margin: -.15rem 0 1.2rem; color: var(--aa-dim); max-width: none; }

/* ------------------------------------------------------------------ action */

.doc .btn {
  /* site.css sets .btn to nowrap, which pushes a long label past a phone
     viewport; these labels are sentences, so let them wrap */
  white-space: normal; max-width: 100%; text-align: center;
  display: inline-block; border-radius: 2px; padding: .78rem 1.4rem; text-decoration: none;
  font-size: .89rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  border: 1px solid transparent; transition: transform 160ms cubic-bezier(.16, 1, .3, 1), filter 160ms;
}
.doc .btn--gold { background-image: var(--aa-gilt); color: #17130A; box-shadow: 0 2px 18px -8px rgba(0, 0, 0, .95); }
.doc .btn--gold:hover { filter: brightness(1.08); transform: translateY(-1px); }
.doc .btn--ghost { border-color: var(--aa-rule-2); color: var(--aa-gold-a); }
.doc .btn--ghost:hover { border-color: var(--aa-gold-a); transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .doc .btn { transition: none; } .doc .btn:hover { transform: none; } }

.doc .ask {
  border: 1px solid var(--aa-rule); border-left:1px solid var(--rule-2);
  padding: clamp(1.1rem, 3.4vw, 1.5rem); margin: 1.8rem 0; max-width: var(--aa-measure);
  background: rgba(226, 198, 139, .03);
}
.doc .ask p { margin: 0 0 .85rem; max-width: none; }
.doc .ask p:last-child { margin: 0; }

.doc .close { text-align: center; margin: clamp(2.4rem, 6vw, 3.4rem) 0 1rem; }
.doc .close p { max-width: 52ch; margin-inline: auto; color: var(--aa-dim); }
.doc .close .btn { margin: .4rem .3rem 0; }

.doc .siblings { margin: clamp(2.4rem, 6vw, 3.2rem) 0 1rem; padding-top: 1.4rem; border-top: 1px solid var(--aa-rule); font-size: .87rem; }
.doc .siblings h2 { font-family: var(--aa-body); font-size: .71rem; letter-spacing: .19em; text-transform: uppercase; color: var(--aa-gold-a); margin: 0 0 .9rem; max-width: none; }
.doc .siblings h2::before { display: none; }
.doc .siblings ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; }
.doc .siblings li { margin: 0; max-width: none; }

/* ------------------------------------------------------------------ footer */

.doc .foot { border-top: 1px solid var(--aa-rule); margin-top: clamp(3rem, 8vw, 4.5rem); padding-block: clamp(2rem, 5vw, 3rem) 1.5rem; font-size: .86rem; }
.doc .foot__in { display: grid; gap: clamp(1.8rem, 5vw, 3rem); grid-template-columns: 1fr; }
@media (min-width: 780px) { .doc .foot__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } }
.doc .foot h2 { font-family: var(--aa-body); font-size: .71rem; letter-spacing: .19em; text-transform: uppercase; color: var(--aa-gold-a); margin: 0 0 .9rem; }
.doc .foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem 1.2rem; }
.doc .foot a { color: var(--aa-paper); text-decoration: none; }
.doc .foot a:hover { color: var(--aa-gold-a); text-decoration: underline; }
.doc .foot p { margin: 0 0 .55rem; color: var(--aa-dim); max-width: 62ch; }
.doc .foot strong { color: var(--aa-paper); }

.doc .disclaimer { border-top: 1px solid var(--aa-rule); padding-block: 1.5rem 2.5rem; font-size: .79rem; color: var(--aa-dim); }
.doc .disclaimer p { max-width: 92ch; margin: 0 0 .7rem; }
.doc .disclaimer a { color: var(--aa-dim); }

/* ------------------------------------------------------------------ motion */
/* One authored moment: the opening group settles once, exponential ease out.
   The default state in this stylesheet is already visible, so if the
   animation never runs nothing is hidden. */

/* Position only. A fade from opacity 0 would leave the headline invisible
   until the animation finished, which is not an already-visible default. */
@keyframes aa-settle { from { transform: translateY(14px); } to { transform: none; } }
.doc .settle > * { animation: aa-settle 900ms cubic-bezier(.16, 1, .3, 1) both; }
.doc .settle > :nth-child(2) { animation-delay: 80ms; }
.doc .settle > :nth-child(3) { animation-delay: 160ms; }
@media (prefers-reduced-motion: reduce) {
  .doc .settle > * { animation: none; }
}