/* About us: "Tula", a walk through India's history of weighing. Scoped to .tula and .tula-after. */
.tula, .tula-after {
  --ink: #f6ead2;
  --mute: #d9c7a6;
  --brass: #d8a94e;
  --brass2: #f3d58e;
  --sindoor: #c8452e;
  --night: #120e18;
  --ivory: #f7f0e3;
  --deep: #2a1712;
  --tula-top: 64px;
  /* how much of the stage a phone address bar covers right now (0 when it is hidden; see the stage below) */
  --tula-cut: 0px;
  font-family: 'Mukta', system-ui, sans-serif;
}
.tula *, .tula-after * { box-sizing: border-box; }
.tula .dv, .tula-after .dv { font-family: 'Tiro Devanagari Hindi', 'Nirmala UI', 'Mangal', serif; }
.tula .dv[lang='pa'] { font-family: 'Mukta Mahee', 'Nirmala UI', 'Raavi', sans-serif; font-weight: 500; }
.tula h1, .tula h2, .tula-after h2, .tula-after h3 { font-family: 'Tiro Devanagari Hindi', Georgia, serif; font-weight: 400; letter-spacing: -0.01em; }

/* ---------------------------------------------------------------- the walk (live: 3D behind, text timed by scroll) */
.tula { position: relative; background: var(--night); color: var(--ink); }
.tula.tula-live { height: 1500vh; }
.tula-stage { position: relative; }
/* lvh: the screen height with a phone address bar hidden, so the stage covers the whole screen at every moment
   (Chrome updates dvh only after the bar has finished moving, which left a dark band for a split second). While
   the bar shows it covers the stage bottom, so what sits at the bottom rises by --tula-cut. */
.tula-live .tula-stage { position: sticky; top: var(--tula-top); height: calc(100vh - var(--tula-top)); height: calc(100lvh - var(--tula-top)); overflow: hidden; }
@supports (height: 100dvh) { .tula { --tula-cut: calc(100lvh - 100dvh); } }
/* A phone painting a fast scroll a moment late shows the page background meanwhile: make it the night
   colour on this page so that never flashes as a light blank area. */
html:has(.tula) { background-color: #120e18; }
.tula-canvas { display: none; }
.tula-live .tula-canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.tula-shade { display: none; }
.tula-live .tula-shade { display: block; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(8, 5, 10, 0.55) 100%), linear-gradient(90deg, rgba(10, 6, 10, 0.35), transparent 38%, transparent 62%, rgba(10, 6, 10, 0.25)); }
.tula-live .tula-stage::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.07; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode: overlay; }

.tula-brand { display: none; }
.tula-live .tula-brand { display: flex; position: absolute; top: 18px; left: 22px; align-items: baseline; gap: 10px; z-index: 3; pointer-events: none; }
.tula-brand b { font-family: 'Tiro Devanagari Hindi', serif; font-weight: 400; font-size: 26px; color: var(--brass2); text-shadow: 0 0 18px rgba(255, 180, 80, 0.45); }
.tula-brand span { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--mute); }

.tula-nav { display: none; }
.tula-live .tula-nav { display: flex; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); flex-direction: column; gap: 6px; z-index: 4; }
.tula-nav button { all: unset; cursor: pointer; display: flex; align-items: center; justify-content: flex-end; gap: 10px; height: 22px; color: var(--mute); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
.tula-nav button::after { content: ''; width: 7px; height: 7px; border-radius: 50%; border: 1px solid currentColor; transition: all 0.3s; }
.tula-nav button span { opacity: 0; transform: translateX(6px); transition: all 0.3s; white-space: nowrap; }
.tula-nav:hover button span, .tula-nav button.on span, .tula-nav button:focus-visible span { opacity: 1; transform: none; }
.tula-nav button.on { color: var(--brass2); }
.tula-nav button.on::after { background: var(--brass2); box-shadow: 0 0 10px rgba(255, 190, 90, 0.8); transform: scale(1.25); }
.tula-nav button:focus-visible { outline: 1px solid var(--brass); outline-offset: 3px; }

.tula-bar { display: none; }
.tula-live .tula-bar { display: block; position: absolute; left: 0; right: 0; bottom: var(--tula-cut); height: 2px; background: rgba(255, 255, 255, 0.08); z-index: 3; }
.tula-bar i { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--sindoor), var(--brass2)); }

.tula-hint { display: none; }
.tula-live .tula-hint { display: block; position: absolute; left: 50%; bottom: calc(26px + var(--tula-cut)); transform: translateX(-50%); margin: 0; z-index: 3; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mute); text-align: center; pointer-events: none; }
.tula-hint span { display: block; margin-top: 6px; font-size: 16px; animation: tula-bob 1.8s ease-in-out infinite; }
@keyframes tula-bob { 50% { transform: translateY(6px); } }

.tula-skip { position: absolute; left: -9999px; }
.tula-skip:focus { left: 22px; top: calc(var(--tula-top) + 56px); z-index: 10; background: var(--ivory); color: var(--deep); padding: 8px 14px; border-radius: 8px; }

/* chapters */
.tula-chs { position: relative; z-index: 2; }
.tula-live .tula-chs { position: absolute; inset: 0; pointer-events: none; }
.tula-ch { max-width: 470px; }
.tula-live .tula-ch { position: absolute; top: 50%; left: clamp(20px, 6vw, 96px); margin-top: -10px; translate: 0 -50%; opacity: 0; visibility: hidden; will-change: opacity, transform; pointer-events: auto; }
.tula-live .tula-ch.r { left: auto; right: clamp(56px, 8vw, 130px); }
.tula-live .tula-ch.c.top { top: 30%; }
.tula-live .tula-ch.c { left: 50%; right: auto; translate: -50% -50%; text-align: center; max-width: 720px; }
.tula-card { position: relative; padding: 26px 28px 24px; border-radius: 18px; background: linear-gradient(160deg, rgba(28, 18, 22, 0.72), rgba(16, 11, 16, 0.6)); border: 1px solid rgba(232, 190, 110, 0.22); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.7); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
.tula-ch.c .tula-card { background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.6); }
.tula-card::before { content: ''; position: absolute; left: 28px; right: 28px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--brass), transparent); opacity: 0.7; }
.tula-ch.c .tula-card::before { display: none; }
.tula-eye { margin: 0 0 10px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brass); }
.tula-word { display: block; margin: 0 0 2px; padding: 0.22em 0 0.06em; font-size: 44px; line-height: 1.15; background: linear-gradient(180deg, var(--brass2), var(--brass) 70%, #a8752b); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 16px rgba(255, 170, 70, 0.3)); }
.tula-ch.c .tula-word { font-size: clamp(64px, 11vw, 132px); }
.tula h1 { margin: 0 0 12px; font-size: clamp(34px, 5.2vw, 60px); line-height: 1.05; color: #fff8ea; }
.tula h2 { margin: 0 0 12px; font-size: clamp(28px, 3vw, 38px); line-height: 1.1; color: #fff8ea; }
.tula-ch p { margin: 0 0 10px; font-size: 16.5px; line-height: 1.6; color: var(--ink); }
.tula-ch p.tula-value { margin-top: 14px; font-family: 'Tiro Devanagari Hindi', Georgia, serif; font-style: italic; font-size: 19px; color: var(--brass2); }
.tula-src { display: inline-block; margin-top: 10px; font-size: 12px; color: var(--mute); text-decoration: none; border-bottom: 1px dotted rgba(217, 199, 166, 0.5); }
.tula-src:hover { color: var(--brass2); }
.tula-fig { display: flex; gap: 12px; align-items: center; margin-top: 14px; }
.tula-fig { margin: 14px 0 0; }
.tula-fig img { flex: none; width: 112px; height: 84px; object-fit: cover; border-radius: 8px; border: 1px solid rgba(232, 190, 110, 0.3); background: #f4ede2; }
.tula-fig a { color: inherit; text-decoration: underline dotted; }
.tula-fig figcaption { font-size: 11.5px; line-height: 1.4; color: var(--mute); }
.tula-btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 22px; }
.tula-btns a, .tula-after .btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 999px; font-size: 15px; font-weight: 600; text-decoration: none; transition: transform 0.2s, background 0.2s; }
.tula-btns a { background: rgba(255, 244, 222, 0.12); color: #fff4de; border: 1px solid rgba(243, 213, 142, 0.45); backdrop-filter: blur(6px); }
.tula-btns a:first-child { background: linear-gradient(180deg, #e6b75c, #c18c35); color: #2a160b; border-color: transparent; }
.tula-btns a:hover, .tula-after .btn:hover { transform: translateY(-2px); }

/* static (reduced motion, no WebGL, or before the script runs): a calm dark page with the same chapters */
.tula:not(.tula-live) { padding: 56px 20px 40px; background: radial-gradient(90% 60% at 50% 0%, #3b2230, var(--night) 70%); }
.tula:not(.tula-live) .tula-chs { display: grid; gap: 22px; max-width: 760px; margin: 0 auto; }
.tula:not(.tula-live) .tula-ch { max-width: none; }
.tula:not(.tula-live) .tula-ch.c { text-align: center; }
.tula:not(.tula-live) .tula-fig img { width: 180px; height: 135px; }

/* phones: text panels sit low, over a darker band, and the side labels hide */
@media (max-width: 760px) {
  .tula-live .tula-ch, .tula-live .tula-ch.r { left: 14px; right: 14px; top: auto; bottom: calc(46px + var(--tula-cut)); translate: none; max-width: none; }
  .tula-live .tula-ch.c { left: 14px; right: 14px; top: 50%; bottom: auto; translate: 0 -50%; }
  .tula-card { padding: 18px 18px 16px; }
  .tula-word { font-size: 34px; }
  .tula h2 { font-size: 25px; }
  .tula-ch p { font-size: 15px; line-height: 1.55; }
  .tula-live .tula-nav { right: 8px; }
  .tula-nav button span { display: none; }
  .tula-live .tula-brand { top: 12px; left: 14px; }
  .tula-fig { display: none; }
}

/* ---------------------------------------------------------------- after the walk: Omace today */
.tula-after { background: linear-gradient(180deg, #170f14 0, #26171a 345px, var(--ivory) 435px); color: var(--deep); padding: 0 20px 72px; }
.tula-after .w { max-width: 1160px; margin: 0 auto; }
.tula-after .lead { padding: 110px 0 70px; text-align: center; color: var(--ink); }
.tula-after .lead .dv { font-size: 30px; color: var(--brass2); }
.tula-after .lead h2 { margin: 6px 0 14px; font-size: clamp(30px, 4vw, 46px); color: #fff8ea; }
.tula-after .lead p { max-width: 760px; margin: 0 auto; font-size: 17px; line-height: 1.65; color: var(--mute); }
.tula-after section { margin-top: 64px; }
.tula-after .hd { display: flex; align-items: baseline; gap: 14px; margin-bottom: 18px; }
.tula-after .hd h2 { margin: 0; font-size: clamp(26px, 3vw, 34px); color: var(--deep); }
.tula-after .hd .dv { font-size: 22px; color: #a8752b; }
.tula-after .hd::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(168, 117, 43, 0.5), transparent); }
.tula-after .brands { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.tula-after .brand { display: flex; flex-direction: column; background: #fff; border-radius: 18px; overflow: hidden; text-decoration: none; color: inherit; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 18px 40px -26px rgba(60, 30, 10, 0.35); transition: transform 0.25s, box-shadow 0.25s; }
.tula-after .brand:hover { transform: translateY(-3px); box-shadow: 0 24px 50px -24px rgba(60, 30, 10, 0.45); }
.tula-after .brand img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #fbf7f0; padding: 12px; }
.tula-after .brand div { padding: 14px 16px 18px; }
.tula-after .brand h3 { margin: 0 0 4px; font-size: 24px; color: var(--deep); }
.tula-after .brand p { margin: 0 0 8px; font-size: 14.5px; line-height: 1.5; color: #5d4a3c; }
.tula-after .brand small { font-size: 13px; font-weight: 600; color: #a03a24; }
.tula-after .family { margin: 14px 0 0; font-size: 14.5px; color: #6b5646; }
.tula-after .chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tula-after .chips li { padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid #ead9bd; font-size: 14.5px; color: #4a3528; }
.tula-after .cols { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 28px; }
.tula-after .ways { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.tula-after .ways li { position: relative; padding: 14px 16px 14px 46px; background: #fff; border-radius: 14px; font-size: 15px; line-height: 1.55; color: #4a3528; }
.tula-after .ways li::before { content: ''; position: absolute; left: 16px; top: 18px; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f3d58e, #b9822f); box-shadow: 0 0 0 4px #f6ead2; }
.tula-after .ways b { color: var(--deep); }
.tula-after .proof { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tula-after .proof div { padding: 16px; border-radius: 14px; background: #2a1712; color: var(--ink); }
.tula-after .proof div.wide { grid-column: 1 / -1; background: linear-gradient(135deg, #3a1d14, #2a1712); border: 1px solid rgba(232, 190, 110, 0.35); }
.tula-after .proof b { display: block; margin-bottom: 4px; font-size: 15.5px; color: var(--brass2); }
.tula-after .proof span { font-size: 13.5px; line-height: 1.5; color: var(--mute); }
.tula-after .proof a { color: var(--brass2); }
.tula-after .years { display: grid; grid-template-columns: repeat(10, 1fr); gap: 0; margin: 0; padding: 0; list-style: none; border-top: 2px solid #d9b67a; }
.tula-after .years li { position: relative; padding: 18px 10px 0 0; font-size: 13.5px; line-height: 1.45; color: #5d4a3c; }
.tula-after .years li::before { content: ''; position: absolute; left: 0; top: -7px; width: 12px; height: 12px; border-radius: 50%; background: #c8452e; box-shadow: 0 0 0 3px var(--ivory); }
.tula-after .years b { display: block; font-family: 'Tiro Devanagari Hindi', Georgia, serif; font-weight: 400; font-size: 22px; color: var(--deep); }
.tula-after .close { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; margin-top: 64px; padding: 34px 36px; border-radius: 24px; background: radial-gradient(120% 140% at 0% 0%, #4a2418, #1d1012 70%); color: var(--ink); }
.tula-after .close h2 { margin: 0 0 8px; font-size: clamp(26px, 3vw, 36px); color: #fff8ea; }
.tula-after .close p { margin: 0; color: var(--mute); line-height: 1.6; }
.tula-after .close .btns { display: flex; flex-wrap: wrap; gap: 10px; }
.tula-after .btn { background: linear-gradient(180deg, #e6b75c, #c18c35); color: #2a160b; }
.tula-after .btn.ghost { background: transparent; color: #fff4de; border: 1px solid rgba(243, 213, 142, 0.5); }
.tula-after a.more { color: #a03a24; font-weight: 600; text-decoration: none; }
.tula-after a.more:hover { text-decoration: underline; }
@media (max-width: 900px) {
  .tula-after { background: linear-gradient(180deg, #170f14 0, #26171a 480px, var(--ivory) 560px); }
  .tula-after .lead { padding: 84px 0 56px; }
  .tula-after .brands { grid-template-columns: 1fr 1fr; }
  .tula-after .cols { grid-template-columns: 1fr; }
  .tula-after .years { grid-template-columns: 1fr; border-top: 0; border-left: 2px solid #d9b67a; padding-left: 18px; }
  .tula-after .years li { padding: 0 0 16px; }
  .tula-after .years li::before { left: -26px; top: 6px; }
  .tula-after .close { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .tula-after .hd .dv { display: none; }
  .tula-after .brands { grid-template-columns: 1fr; }
  .tula-after .proof { grid-template-columns: 1fr; }
}