/* ==========================================================================
   avinashanandsingh.com/about.html
   Rebuilt 20 Sep 2026.

   Same language as results.css — cream ground, Cinzel display, Montserrat
   body, gold as the only accent. The two pages sit next to each other in the
   nav, so they should read as the same site.

   NOTE: the palette below is duplicated from results.css. Worth lifting both
   into a shared theme.css when a third page adopts it; not worth the risk of
   editing a live stylesheet for two.
   ========================================================================== */

.ab {
   --ground: #faf7f2;
   --ground-2: #f2ece2;
   --ink: #2a2118;
   --muted: #6f6355;
   --gold: #c2a74e;
   --gold-soft: rgba(194, 167, 78, 0.14);
   --line: rgba(42, 33, 24, 0.12);
   --card: #efe9e1;
   --serif: "Cinzel", Georgia, serif;

   background: var(--ground);
   color: var(--ink);
   font-family: "Montserrat", system-ui, sans-serif;
}

.ab .wrap {
   width: min(100% - 32px, 1160px);
   margin-inline: auto;
}

.ab section {
   padding: clamp(46px, 7vw, 100px) 0;
}

.ab .alt {
   background: var(--ground-2);
}

/* ------------------------------------------------------------- headings -- */

.ab-eyebrow {
   display: inline-block;
   margin: 0 0 14px;
   padding: 6px 16px;
   border: 1px solid var(--gold);
   border-radius: 999px;
   background: #fff;
   color: var(--gold);
   font-size: clamp(0.62rem, 0.58rem + 0.2vw, 0.73rem);
   font-weight: 700;
   letter-spacing: 0.18em;
   text-transform: uppercase;
}

.ab h2 {
   margin: 0 0 16px;
   font-family: var(--serif);
   font-weight: 700;
   font-size: clamp(1.55rem, 1.15rem + 2vw, 2.6rem);
   line-height: 1.18;
   text-wrap: balance;
}

.ab .lede {
   max-width: 66ch;
   margin: 0;
   font-size: clamp(0.95rem, 0.9rem + 0.4vw, 1.1rem);
   line-height: 1.7;
   color: var(--muted);
}

.ab .lede + .lede { margin-top: 1em; }

/* ----------------------------------------------------------------- hero -- */

.ab-hero {
   padding: clamp(44px, 7vw, 96px) 0 clamp(36px, 5vw, 72px);
   background:
      radial-gradient(760px 340px at 78% -8%, var(--gold-soft), transparent 70%),
      var(--ground);
}

.ab-hero-grid {
   display: grid;
   gap: clamp(28px, 4.5vw, 54px);
   align-items: center;
}

@media (min-width: 900px) {
   .ab-hero-grid { grid-template-columns: 1.15fr 0.85fr; }
}

.ab-hero h1 {
   margin: 0 0 16px;
   font-family: var(--serif);
   font-weight: 700;
   font-size: clamp(2rem, 1.35rem + 3vw, 3.5rem);
   line-height: 1.1;
   text-wrap: balance;
}

.ab-hero .tagline {
   margin: 0 0 clamp(18px, 2.6vw, 26px);
   font-size: clamp(1rem, 0.94rem + 0.5vw, 1.24rem);
   line-height: 1.5;
   color: var(--gold);
   font-weight: 600;
}

.ab-portrait {
   margin: 0;
   border: 1px solid var(--line);
   border-radius: 20px;
   overflow: hidden;
   background: var(--card);
   box-shadow: 0 18px 40px rgba(42, 33, 24, 0.12);
}

.ab-portrait img {
   display: block;
   width: 100%;
   height: auto;
   aspect-ratio: 3 / 2;
   object-fit: cover;
}

/* -------------------------------------------------------------- buttons -- */

.ab-actions {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   margin-top: clamp(22px, 3vw, 32px);
}

.ab-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-height: 52px;
   padding: 0 clamp(22px, 3vw, 34px);
   border: 1px solid var(--gold);
   border-radius: 999px;
   background: var(--gold);
   color: #fff;
   font-family: inherit;
   font-weight: 700;
   font-size: clamp(0.92rem, 0.88rem + 0.25vw, 1rem);
   text-decoration: none;
   white-space: nowrap;
   touch-action: manipulation;
   transition: transform 0.18s ease, background 0.18s ease;
}

.ab-btn:hover {
   transform: translateY(-2px);
   background: #ad9340;
   color: #fff;
}

.ab-btn:active { transform: translateY(0); }

.ab-btn--ghost {
   background: #fff;
   color: var(--ink);
}

.ab-btn--ghost:hover {
   background: var(--ground-2);
   color: var(--ink);
}

.ab-btn:focus-visible {
   outline: 3px solid var(--gold);
   outline-offset: 3px;
}

/* ----------------------------------------------------------- help list -- */

.ab-help {
   display: grid;
   gap: 12px;
   margin: clamp(22px, 3vw, 32px) 0 0;
   padding: 0;
   list-style: none;
}

@media (min-width: 720px) {
   .ab-help { grid-template-columns: 1fr 1fr; gap: 12px 24px; }
}

.ab-help li {
   display: flex;
   gap: 12px;
   padding: 15px 18px;
   border: 1px solid var(--line);
   border-radius: 14px;
   background: #fff;
   font-size: 0.94rem;
   line-height: 1.5;
}

.ab-help li::before {
   content: "";
   flex: none;
   width: 7px;
   height: 7px;
   margin-top: 7px;
   rotate: 45deg;
   background: var(--gold);
}

/* -------------------------------------------------------------- gallery -- */

.ab-tiles {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: clamp(10px, 1.6vw, 16px);
   margin-top: clamp(26px, 4vw, 40px);
}

@media (min-width: 820px) {
   .ab-tiles { grid-template-columns: repeat(3, 1fr); }
   /* The clip earns the wide cell: it is the only moving thing on the page. */
   .ab-tiles .wide { grid-column: span 2; }
}

.ab-tile {
   margin: 0;
   border: 1px solid var(--line);
   border-radius: 14px;
   overflow: hidden;
   background: var(--card);
}

.ab-tile img,
.ab-tile video {
   display: block;
   width: 100%;
   height: 100%;
   aspect-ratio: 3 / 2;
   object-fit: cover;
}

.ab-tile video {
   background: #000;
   object-fit: contain;
}

/* ---------------------------------------------------------------- stats -- */

.ab-stats {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 1px;
   margin-top: clamp(8px, 2vw, 18px);
   background: var(--line);
   border: 1px solid var(--line);
   border-radius: 18px;
   overflow: hidden;
}

@media (min-width: 720px) {
   .ab-stats { grid-template-columns: repeat(4, 1fr); }
}

.ab-stat {
   padding: clamp(22px, 3.2vw, 36px) 14px;
   text-align: center;
   background: #fff;
}

.ab-stat .num {
   display: block;
   font-family: var(--serif);
   font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.2rem);
   font-weight: 700;
   line-height: 1;
   color: var(--gold);
   font-variant-numeric: tabular-nums;
}

.ab-stat .lbl {
   display: block;
   margin-top: 8px;
   font-size: 0.8rem;
   font-weight: 600;
   letter-spacing: 0.07em;
   text-transform: uppercase;
   color: var(--muted);
}

/* ------------------------------------------------------------------ CTA -- */

.ab-cta {
   text-align: center;
   background:
      radial-gradient(700px 320px at 50% 0%, var(--gold-soft), transparent 68%),
      var(--ground-2);
   border-top: 1px solid var(--line);
}

.ab-cta .lede { margin-inline: auto; }
.ab-cta .ab-actions { justify-content: center; }

@media (prefers-reduced-motion: reduce) {
   .ab-btn { transition: none; }
   .ab-btn:hover { transform: none; }
}