/* =========================================================================
   ADITYA SHARMA — Portfolio  ·  base.css  v3
   "Carved Stone & Quiet Ink" — warm stone canvas, Ajanta-cave niche windows,
   bracket/star/circle ornament vocabulary.
   =========================================================================

   PALETTE RATIONALE
   The base is #EFE8E7 — the colour of Deccan limestone in late afternoon.
   Surfaces lighten to cream. Structure deepens to dusty stone. Gold is the
   chisel-edge catching light. Ink is dark espresso — not black, never cold.

   ORNAMENT VOCABULARY
   ·  Bracket lattice  — facing semicircle arcs that read as `}{ }{ }` rows
   ·  Star rosette     — 8-pointed conic star with circle halo (temple ceiling)
   ·  Circle garland   — spaced filled dots (nail-head / bead string)
   ·  Lotus band       — semicircle petal row (Ajanta cave cornice motif)
   These are used at different scales/opacities. They never overpower the copy.
   ========================================================================= */

:root {
  /* ---- Stone palette ---- */
  --base:       #EFE8E7;   /* Deccan limestone — the canvas everywhere         */
  --surface:    #FBF5EE;   /* warm cream — content mats, card backgrounds      */
  --surface-2:  #F5ECE3;   /* slightly warmer cream for layering               */
  --stone:      #DDD4CC;   /* mid stone — structural rings, divider lines      */
  --stone-deep: #C5B5AA;   /* deep stone — shadow side of carved elements      */
  --gold:       #C9A86A;   /* antique gold — chisel-light, hairline accents    */
  --gold-soft:  #D9BE8C;   /* lifted gold — inner ring of double hairlines     */
  --ink:        #2C1A0C;   /* dark espresso — primary text, commanding         */
  --ink-soft:   #6A4E38;   /* warm brown — secondary text, captions            */
  --ink-faint:  #9A7A62;   /* dusty umber — rules, meta, whisper-level text   */

  /* ---- Typography ---- */
  --serif: "Cormorant Garamond", "Cormorant", Georgia, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

  /* ---- Rhythm ---- */
  --measure:     1220px;
  --measure-wide: 1360px;
  --gutter:      clamp(20px, 5vw, 72px);
  --section-pad: clamp(88px, 13vh, 180px);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ===== Reset ============================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--base);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
::selection { background: var(--stone); color: var(--ink); }

/* ===== Type scale ======================================================= */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--ink);
  margin: 0;
  line-height: 1.03;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }

.display {
  font-family: var(--serif);
  font-size: clamp(2.8rem, 7vw, 6.4rem);
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: -0.01em;
}
.display em { font-style: italic; }

.section-title {
  font-size: clamp(2.1rem, 4.4vw, 3.8rem);
  line-height: 1.03;
}

/* Gold eyebrow label */
.eyebrow {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 0.9em;
}
.eyebrow::before {
  content: "";
  width: 28px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.eyebrow.center::before { background: linear-gradient(90deg, var(--gold), transparent); }
.eyebrow.center::after  {
  content: "";
  width: 28px; height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
}

.lede {
  font-size: clamp(1.1rem, 1.5vw, 1.28rem);
  line-height: 1.82;
  color: var(--ink);
  max-width: 62ch;
}
.muted { color: var(--ink-soft); }
.italic { font-family: var(--serif); font-style: italic; }

/* ===== Layout =========================================================== */
.shell {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell.wide { max-width: var(--measure-wide); }
.section { padding-block: var(--section-pad); position: relative; }

/* Thin gold rule */
.rule {
  height: 1px; border: 0;
  background: linear-gradient(90deg, transparent, var(--gold-soft) 20%, var(--gold-soft) 80%, transparent);
  opacity: 0.5;
}

/* =========================================================================
   ORNAMENTAL PATTERNS
   ========================================================================= */

/* BRACKET LATTICE — facing semicircle arcs that tile into `}{ }{ }` rows.
   Used as section-background texture. */
.jali-bracket {
  --jb: rgba(201,168,106,0.22);
  background-image:
    radial-gradient(circle at 0% 50%,   transparent 27%, var(--jb) 28% 31%, transparent 32%),
    radial-gradient(circle at 100% 50%, transparent 27%, var(--jb) 28% 31%, transparent 32%);
  background-size: 48px 64px;
}

/* STAR ROSETTE — 8-pointed conic star with circle halo.
   Hindu/Islamic temple-ceiling motif. Used as hero/footer medallion. */
.jali-star {
  --js: rgba(201,168,106,0.19);
  background-image:
    conic-gradient(from 22.5deg,
      var(--js) 0deg 4deg, transparent 4deg 41deg,
      var(--js) 41deg 49deg, transparent 49deg 86deg,
      var(--js) 86deg 94deg, transparent 94deg 131deg,
      var(--js) 131deg 139deg, transparent 139deg 176deg,
      var(--js) 176deg 184deg, transparent 184deg 221deg,
      var(--js) 221deg 229deg, transparent 229deg 266deg,
      var(--js) 266deg 274deg, transparent 274deg 311deg,
      var(--js) 311deg 319deg, transparent 319deg 360deg),
    radial-gradient(circle, transparent 26%, var(--js) 27% 30%, transparent 31%),
    radial-gradient(circle, var(--js) 4%, transparent 5%);
  background-size: 56px 56px;
}

/* Medallion — star field fading to transparent at edges, for hero overlay */
.jali-star-medallion {
  --js: rgba(201,168,106,0.24);
  background-image:
    conic-gradient(from 22.5deg,
      var(--js) 0deg 4deg, transparent 4deg 41deg,
      var(--js) 41deg 49deg, transparent 49deg 86deg,
      var(--js) 86deg 94deg, transparent 94deg 131deg,
      var(--js) 131deg 139deg, transparent 139deg 176deg,
      var(--js) 176deg 184deg, transparent 184deg 221deg,
      var(--js) 221deg 229deg, transparent 229deg 266deg,
      var(--js) 266deg 274deg, transparent 274deg 311deg,
      var(--js) 311deg 319deg, transparent 319deg 360deg),
    radial-gradient(circle, transparent 26%, var(--js) 27% 30%, transparent 31%),
    radial-gradient(circle, var(--js) 4%, transparent 5%);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(closest-side, #000 32%, transparent 72%);
          mask-image: radial-gradient(closest-side, #000 32%, transparent 72%);
}

/* CIRCLE GARLAND — spaced filled dots. Nail-head/bead-string.
   Used as micro-ornament in borders. */
.jali-circle {
  --jc: rgba(201,168,106,0.28);
  background-image: radial-gradient(circle, var(--jc) 3px, transparent 4px);
  background-size: 22px 22px;
}

/* LOTUS BAND — row of upward semicircle petals.
   Ajanta cornice motif. Used as section cap/foot strip. */
.lotus-band {
  height: 20px;
  background-image:
    radial-gradient(ellipse 50% 100% at 50% 100%,
      var(--stone-deep) 48%, transparent 49%);
  background-size: 28px 20px;
  opacity: 0.55;
}

/* =========================================================================
   CAVE NICHE WINDOWS — the "complex architecture" frames.
   Inspired by rock-cut cave temple niches at Ajanta and Ellora:
   a cusped arch top, thick corbeled multi-step stone frame, hard asymmetric
   offset shadows that read as chiseled stone lit from above-left.
   ========================================================================= */

/* The niche container: arch top + multi-ring frame + stone depth */
.niche {
  position: relative;
  background: var(--surface);
  padding: 22px;
  border-radius: 240px 240px 16px 16px;
  /* Corbeled stone rings: gold hairline → stone mat → stone ring → gold → stone */
  box-shadow:
    inset 0 0 0 1px var(--gold),
    inset 0 0 0 8px var(--surface),
    inset 0 0 0 10px var(--stone),
    inset 0 0 0 15px var(--surface),
    inset 0 0 0 17px rgba(201,168,106,0.5),
    inset 0 0 0 22px var(--surface),
    inset 0 0 0 23px var(--stone-deep),
    /* Hard-edge offset: dark on bottom-right = stone carved depth */
    7px 11px 0 0 var(--stone-deep),
    12px 18px 0 0 rgba(44,26,12,0.18),
    /* Highlight: bright sliver on top-left (light source) */
    -2px -2px 0 0 rgba(255,252,246,0.9);
}

/* Keystone — the crowned diamond at the apex of the arch */
.niche-keystone {
  position: absolute;
  top: -11px;
  left: 50%;
  width: 22px; height: 22px;
  background: var(--surface);
  border: 1px solid var(--gold);
  box-shadow:
    inset 0 0 0 3px var(--surface),
    inset 0 0 0 4px rgba(201,168,106,0.7),
    2px 3px 0 0 var(--stone-deep);
  transform: translateX(-50%) rotate(45deg);
  z-index: 4;
}

/* Star crown above the keystone */
.niche-star {
  position: absolute;
  top: -34px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--serif);
  font-size: 1.3rem;
  color: var(--gold);
  z-index: 5;
  line-height: 1;
}

/* Side pilasters — thin stone columns flanking the arch */
.niche::before,
.niche::after {
  content: "";
  position: absolute;
  top: 20%; bottom: 0;
  width: 11px;
  background: linear-gradient(var(--stone), var(--stone-deep));
  box-shadow: 2px 3px 0 0 rgba(44,26,12,0.15);
}
.niche::before { left: -11px; }
.niche::after  { right: -11px; }

/* The image well inside the arch */
.niche .niche-img {
  border-radius: 220px 220px 8px 8px;
  overflow: hidden;
}

/* ===== Image placeholders ============================================== */
.ph {
  position: relative;
  background-color: var(--surface-2);
  background-image:
    repeating-linear-gradient(135deg,
      rgba(197,181,170,0.45) 0, rgba(197,181,170,0.45) 1px,
      transparent 1px, transparent 12px);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.ph .ph-note {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: rgba(251,245,238,0.82);
  padding: 7px 13px;
  border: 1px solid rgba(201,168,106,0.5);
  border-radius: 2px;
  text-align: center;
  max-width: 76%;
  line-height: 1.6;
}

/* ===== Shared controls ================================================= */
.link {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink);
  transition: color 0.4s var(--ease);
}
.link::after { content: "→"; font-weight: 400; transition: transform 0.4s var(--ease); }
.link:hover  { color: var(--gold); }
.link:hover::after { transform: translateX(5px); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 15px 30px;
  border-radius: 999px;
  border: 1px solid var(--gold);
  background: var(--ink);
  color: var(--surface);
  box-shadow: 4px 6px 0 0 var(--stone-deep);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.btn:hover { transform: translate(-2px,-3px); box-shadow: 6px 9px 0 0 var(--stone-deep); }
.btn.ghost {
  background: transparent; color: var(--ink);
  box-shadow: 4px 6px 0 0 var(--stone);
}
.btn.ghost:hover { background: var(--surface); }

.tag {
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 5px 12px;
  border: 1px solid var(--stone);
  border-radius: 999px;
  background: var(--surface-2);
}

/* ===== Decorative section ornament ===================================== */
.orn {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--gold-soft);
  user-select: none;
}
.orn::before,
.orn::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--stone-deep));
}
.orn::after {
  background: linear-gradient(90deg, var(--stone-deep), transparent);
}
.orn .glyph {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-style: italic;
  color: var(--gold);
  letter-spacing: 0.3em;
}

/* ===== Reveal on scroll ================================================ */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}