/* nityamcapital.com: one screen. Spec: docs/superpowers/specs/2026-10-01-nityam-lotus-landing-design.md */

@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2013-2014, U+2018-201D, U+2026;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-ext.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0100-024F, U+1E00-1EFF;
}
@font-face {
  font-family: "Tiro Sanskrit";
  src: url("../fonts/tiro-deva.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+0020, U+0900-097F, U+200C-200D;   /* its own space between the verse's words */
}
/* Tiro's Latin italic, for the transliteration alone (Manrope has no ḥ, ṇ or ṁ). Its own
   family name, so it can never stand in for Manrope. */
@font-face {
  font-family: "Tiro Latin";
  src: url("../fonts/tiro-latin.woff2") format("woff2");
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2018-2019;
}
@font-face {
  font-family: "Tiro Latin";
  src: url("../fonts/tiro-latin-ext.woff2") format("woff2");
  font-style: italic;
  font-display: swap;
  unicode-range: U+0100-024F, U+1E00-1EFF;
}

:root {
  --navy: #1e2b45;
  --bone: #ece7de;
  --ash: #a3abb8;
  --gutter: clamp(20px, 3.9vw, 56px);
  /* the side gutters, pushed in past a notch or the Dynamic Island on a landscape phone */
  --gl: max(var(--gutter), env(safe-area-inset-left, 0px));
  --gr: max(var(--gutter), env(safe-area-inset-right, 0px));
  --top: clamp(24px, 4.6vh, 44px);
  --foot: clamp(22px, 4.6vh, 44px);
  /* the painting: its box height, and where the flower's right petal tip lands.
     95% of the height with the tip at 90% of the width, unless the window is too short
     or narrow for that. The bottom rows hold only the wrist and the stem's curl (paint
     x 988 to 1353 of 1662), with the line to their left and the contact to their right.
     So the box shrinks until that band fits between them with --clear on each side,
     and the tip moves so neither of them comes nearer than --clear. (In vw, not %, so
     the verse's size below can use it too: the stage is the whole viewport.) */
  --clear: 24px;
  --line-w: 376px;                 /* the line's width on one line */
  --contact-w: 163px;              /* hello@nityamcapital.com at 14px */
  --ih: min(95vh, calc((100vw - var(--gl) - var(--gr) - var(--line-w) - var(--contact-w) - 2 * var(--clear)) * 2.591781)); /* 946 / 365 */
  --cr: max(calc(var(--gl) + var(--line-w) + var(--clear) + var(--ih) * 0.651163),   /* 616 / 946: band's left edge to tip */
            min(90vw, calc(100vw - var(--gr) - var(--contact-w) - var(--clear) + var(--ih) * 0.265328))); /* 251 / 946: band's right edge to tip */
  /* the verse's Devanagari: 56% of the नित्यम् it replaced, min(9vw, 17vh) up to 176px,
     unless that would bring its first, longer pāda nearer than --clear to the leftmost
     paint (the wrist's edge, paint x 988: no paint lies further left). That line ends
     7.53em from the gutter: 7.56em of Tiro, less the 0.035em it hangs left. */
  --paint-left: calc(var(--cr) - var(--ih) * 0.651163);
  --verse: clamp(28px, min(5.04vw, 9.52vh, (var(--paint-left) - var(--clear) - var(--gl)) / 7.53), 98px);
  color-scheme: dark;
}
@supports (height: 1svh) {
  :root { --ih: min(95svh, calc((100vw - var(--gl) - var(--gr) - var(--line-w) - var(--contact-w) - 2 * var(--clear)) * 2.591781)); }
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--navy);
}

body {
  color: var(--ash);
  font-family: "Manrope", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Brand navy across the screen, a shade lighter round the flower, deepening only in the far corners. */
.stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(farthest-corner at 72% 34%,
    #223150 0%, #1e2b45 34%, #1d2943 62%, #19233a 86%, #161e31 100%);
}

/* The painting's own box, 1662 x 946, with its paint in the right 40%.
   Flush with the bottom: the wrist runs off the edge. */
.art {
  position: absolute;
  bottom: 0;
  height: var(--ih);
  width: calc(var(--ih) * 1.756871);           /* 1662 / 946 */
  left: calc(var(--cr) - var(--ih) * 1.695560); /* 1604 / 946: the right petal tip */
  pointer-events: none;
}

/* Lamplight behind the flower, so the coral lifts off the navy. */
.halo { z-index: 0; }
.halo::before {
  content: "";
  position: absolute;
  left: 80.6%;
  top: 24%;
  width: 62%;
  aspect-ratio: 1.15;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side,
    rgba(255, 178, 128, .14) 0%,
    rgba(250, 160, 116, .085) 30%,
    rgba(236, 140, 104, .036) 58%,
    rgba(236, 140, 104, 0) 100%);
}

/* Petals still tucked in the flower are drawn BEHIND the cutout, which hides
   them wherever it has paint; once clear of all paint they move in front. */
.petals-back, .petals-front {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.petals-back { z-index: 1; }
.painting {
  z-index: 2;
  display: block;
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
}
.petals-front { z-index: 3; }

/* Film grain, still: it keeps the navy gradient from banding. */
.grain {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: url("../img/grain.png") repeat;
  background-size: 128px;
  opacity: 0.06;
}

/* The words: one grid over the whole screen. */
.frame {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "logo ." "mark ." "line contact";
  padding: calc(env(safe-area-inset-top, 0px) + var(--top)) var(--gr) calc(env(safe-area-inset-bottom, 0px) + var(--foot)) var(--gl);
  pointer-events: none;
}
.frame > * { pointer-events: auto; }

/* The home page's h1 is the logo (its name, "Nityam Capital"); the 404 has the logo bare. */
.brand, .nf .logo { grid-area: logo; justify-self: start; margin: 0; }
.logo { display: block; color: var(--bone); line-height: 0; }
.logo svg { display: block; width: clamp(200px, 16.2vw, 236px); height: auto; }

/* The verse the name comes from, Bhagavad Gītā 2.24: the Devanagari a pāda to a line, then
   close beneath it the transliteration, the meaning and the source, small. The small lines
   wrap within the Devanagari's width rather than widen the block toward the painting. */
.mark { grid-area: mark; justify-self: start; align-self: center; margin: 0; transform: translateY(-4%); }
.verse blockquote {
  margin: 0 0 0 -0.035em;
  font-family: "Tiro Sanskrit", "Noto Serif Devanagari", "Kohinoor Devanagari", "Devanagari Sangam MN", serif;
  font-weight: 400;
  font-size: var(--verse);
  line-height: 1.3;
  color: var(--bone);
}
.translit, .gloss, .verse figcaption { contain: inline-size; }
.translit {
  margin: 18px 0 0;
  font-family: "Tiro Latin", Georgia, serif;
  font-style: italic;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ash);
}
.gloss { margin: 6px 0 0; font-size: 15px; line-height: 1.5; color: var(--bone); text-wrap: balance; }
.verse figcaption { margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--ash); opacity: .85; }   /* .85: 4.9:1 on navy, AA at 13px */
.verse cite { font-style: normal; }

.line { grid-area: line; justify-self: start; align-self: end; margin: 0; font-size: 15px; font-weight: 400; line-height: 1.5; color: var(--ash); }

.contact { grid-area: contact; align-self: end; font-style: normal; text-align: right; font-size: 14px; line-height: 1.6; color: var(--ash); }
.contact span, .contact a { display: block; }
.contact a {
  color: var(--ash);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color .4s ease, text-decoration-color .4s ease;
}
.contact a:hover, .contact a:focus-visible { color: var(--bone); text-decoration-color: rgba(236, 231, 222, .45); }
.contact a:focus-visible, .logo:focus-visible { outline: 1px solid rgba(236, 231, 222, .6); outline-offset: 6px; border-radius: 2px; }

@media (max-width: 1100px) { .line { max-width: 17em; } :root { --line-w: 236px; } }   /* 17em sets it on two lines */
/* Short windows, phones held sideways among them: no transliteration, as on upright phones,
   so the verse keeps well clear of the logo and the line. */
@media (max-height: 440px) { .translit { display: none; } .gloss { margin-top: 14px; } }

/* Arrival: the painting surfaces out of the navy, then the words. lotus.js lets
   no petal go until the painting is fully opaque, however long this fade takes. */
.js .painting, .js .halo { opacity: 0; transition: opacity 1.6s cubic-bezier(.3, .1, .2, 1); }
.js.lit .painting, .js.lit .halo { opacity: 1; }
.js .frame { opacity: 0; transition: opacity 1.4s ease .5s; }
.js.in .frame { opacity: 1; }
/* If lotus.js never runs, the words and the painting still appear at 3 s. On a
   normal load the fades above are over by then (the words' by 2.9 s at the
   latest); on a very slow one the painting may appear without its fade. boot.js
   still sets .noart (below) if the painting fails to load, so it stays hidden. */
.js .frame, .js .painting, .js .halo { animation: nityam-show 0s 3s forwards; }
@keyframes nityam-show { to { opacity: 1; } }

/* Portrait screens, phones held upright among them: every word in the top part, the hand
   and lotus below it, centred and flush with the bottom, with nothing written over them.
   Landscape phones and short windows keep the side-by-side layout above. */
@media (max-aspect-ratio: 5/4) {
  :root {
    --top: max(22px, 3.2vh);
    --foot: max(26px, 4vh);
    --mark-gap: max(28px, 5vh);
    /* 60% of the नित्यम् it replaced, clamp(56px, 16vw, 96px); and never wider than the first pāda's
       7.53em measure allows, so it cannot wrap to a third line on the narrowest phones */
    --verse: min(clamp(34px, 9.6vw, 58px), (100vw - var(--gl) - var(--gr)) / 7.53);
    /* room the words take at the top: the word block's own height, then 16px of clear navy.
       logo 20 (196 x 24/236) + gap + verse 2 x 1.3 + 14 + meaning 2 x 22.5 + 4 + source 19.5
       + 14 + line 2 x 21 + 12 + contact 2 x 22.4 (the transliteration is not shown here) */
    --copy: calc(env(safe-area-inset-top, 0px) + var(--top) + 20px + var(--mark-gap) + 2.6 * var(--verse)
                 + 14px + 2 * 22.5px + 4px + 19.5px + 14px + 2 * 21px + 12px + 2 * 22.4px + 16px);
    --ih: min(calc(96vw * 1.533225), calc(100vh - var(--copy)));   /* 946 / 617: the paint fits the width */
  }
  /* vh above for browsers without svh; svh here, where the browser has it */
  @supports (height: 1svh) {
    :root {
      --top: max(22px, 3.2svh);
      --foot: max(26px, 4svh);
      --mark-gap: max(28px, 5svh);
      --ih: min(calc(96vw * 1.533225), calc(100svh - var(--copy)));
    }
  }
  .stage {
    background: radial-gradient(farthest-corner at 56% 66%,
      #223150 0%, #1e2b45 34%, #1d2943 62%, #19233a 86%, #161e31 100%);
  }
  .art { left: calc(50% - var(--ih) * 1.369450); }    /* 1295.5 / 946: the paint's centre */
  .frame {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto 1fr;
    grid-template-areas: "logo" "mark" "line" "contact" ".";
  }
  .logo svg { width: 196px; }
  .mark { align-self: start; margin-top: var(--mark-gap); transform: none; }
  .translit { display: none; }   /* two lines fewer above the painting, so it stays larger */
  .gloss { margin-top: 14px; max-width: 16em; }   /* always the two lines --copy counts */
  .line { align-self: start; margin-top: 14px; font-size: 14px; max-width: 19em; }
  .contact { align-self: start; text-align: left; margin-top: 12px; }
}

/* The painting failed to load: show the navy and the words, nothing broken. */
.noart .painting, .noart .halo { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  .js .painting, .js .halo, .js .frame { transition: none; }
  .petals-back, .petals-front { display: none; }
}

/* 404: the same ground and type, the same verse, a way home. */
.nf .frame { grid-template-areas: "logo ." "mark ." "line ."; }
.line a { color: var(--bone); text-underline-offset: 4px; }
.line a:focus-visible { outline: 1px solid rgba(236, 231, 222, .6); outline-offset: 4px; }
.nf .line { max-width: none; }          /* the home page's two-line cap would split "Return home" */
.nf .line a { white-space: nowrap; }
/* Upright screens: no painting fills the lower part here, so keep the wide layout's
   order: the verse in the middle, the way home at the foot, and the transliteration. */
@media (max-aspect-ratio: 5/4) {
  .nf .frame { grid-template-rows: auto 1fr auto; grid-template-areas: "logo" "mark" "line"; }
  .nf .translit { display: block; }
  .nf .gloss { margin-top: 6px; }
  .nf .mark { align-self: center; margin-top: 0; }
  .nf .line { align-self: end; margin-top: 0; }
}