/* Nandini Capital. Colours and type follow the introduction deck:
   ivory paper, dark ink, sage, gold, Garamond. */
:root{
  --paper:#f4efe7; --paper-2:#eae3d7; --ink:#17282d; --ink-2:#3d4b4f; --muted:#5f6967; --faint:#8a918f;
  --sage:#496f68; --gold:#b4924f; --rule:#d8cfbf;
  --t1:#dfe9e4; --t2:#cdddd6; --t3:#afc7b9; --t4:#8db09c; --t5:#79a28d; --t6:#649478; --t7:#496f68;
  --serif:"EB Garamond", Garamond, "Times New Roman", serif;
  color-scheme: light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; min-height:100vh; display:flex; flex-direction:column; background:var(--paper); color:var(--ink);
  font-family:var(--serif); font-size:19px; line-height:1.6; -webkit-font-smoothing:antialiased;
  border-top:5px solid var(--gold)}
a{color:inherit}
::selection{background:var(--t2)}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px}

/* navigation */
.nav{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:26px clamp(20px,5vw,56px)}
.brand{font-weight:600; font-size:19px; letter-spacing:.01em; text-decoration:none}
.home .brand{visibility:hidden}
.links{display:flex; gap:clamp(18px,3vw,34px); margin-left:auto}
.links a{font-size:13px; letter-spacing:.2em; text-transform:uppercase; text-decoration:none; color:var(--ink-2); padding:4px 0; border-bottom:1px solid transparent; transition:color .2s, border-color .2s}
.links a:hover{color:var(--gold)}
.links a[aria-current="page"]{color:var(--gold); border-bottom-color:var(--gold)}
@media (max-width:640px){
  .nav{flex-wrap:wrap; gap:12px; padding:18px 20px 10px}
  .brand{white-space:nowrap}
  .home .brand{display:none}
  .links{margin-left:0; width:100%; justify-content:space-between; gap:0}
  .links a{font-size:12px; letter-spacing:.16em}
}

/* corner lines, a quiet ornament */
.corner{position:fixed; pointer-events:none; width:150px; height:150px; z-index:0}
.corner i{position:absolute; background:var(--gold); opacity:.55}
.corner.br{right:0; bottom:0}
.corner.br i:nth-child(1){right:0; bottom:118px; width:140px; height:1px}
.corner.br i:nth-child(2){right:0; bottom:104px; width:116px; height:1px}
.corner.br i:nth-child(3){right:118px; bottom:0; width:1px; height:140px}
.corner.br i:nth-child(4){right:104px; bottom:0; width:1px; height:116px}
.corner.tl{left:0; top:5px}
.corner.tl i:nth-child(1){left:0; top:18px; width:140px; height:1px}
.corner.tl i:nth-child(2){left:0; top:32px; width:116px; height:1px}
.corner.tl i:nth-child(3){left:18px; top:0; width:1px; height:140px}
.corner.tl i:nth-child(4){left:32px; top:0; width:1px; height:116px}
@media (max-width:640px){ .corner{display:none} }

/* home */
.hero{flex:1; position:relative; display:grid; place-items:center; text-align:center; padding:40px 20px 80px; overflow:hidden}
.mono{position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; user-select:none;
  font-size:clamp(220px,38vw,560px); font-weight:400; line-height:1; letter-spacing:-.06em; color:var(--paper-2)}
.hero-in{position:relative}
.word{margin:0; font-weight:600; font-size:clamp(46px,8vw,96px); line-height:1.02; letter-spacing:-.005em}
.bar{width:96px; height:2px; background:var(--gold); margin:30px auto 26px}
.tag{margin:0; font-size:clamp(12px,1.4vw,14px); letter-spacing:.24em; text-transform:uppercase; color:var(--sage); font-weight:500}

/* inner pages */
.page{flex:1; width:100%; max-width:760px; margin:0 auto; padding:clamp(28px,6vw,72px) clamp(20px,5vw,32px) 80px; position:relative; z-index:1}
.kicker{font-size:13px; letter-spacing:.22em; text-transform:uppercase; color:var(--sage); font-weight:500; margin:0}
h1{font-weight:500; font-size:clamp(36px,5.4vw,56px); line-height:1.08; letter-spacing:-.01em; margin:14px 0 0}
.lede{font-size:clamp(21px,2.4vw,24px); line-height:1.5; color:var(--ink-2); margin:30px 0 0}
p{margin:20px 0 0}
.page .bar{margin:34px 0 0}

/* about: a few large lines, as on haraglobalcap.com */
.about{max-width:820px; padding-top:clamp(40px,9vw,112px)}
.about .big{font-size:clamp(23px,2.7vw,30px); line-height:1.42; color:var(--ink); margin:26px 0 0; text-wrap:pretty}
.about .kicker + .big{margin-top:22px}

/* footer */
.foot{position:relative; z-index:1; border-top:1px solid var(--rule); padding:26px clamp(20px,5vw,56px) 30px; display:flex; flex-wrap:wrap; gap:10px 32px; align-items:baseline; justify-content:space-between;
  font-size:14px; color:var(--muted); border-bottom:5px solid var(--gold)}
.foot a{color:var(--ink); text-decoration:none; border-bottom:1px solid var(--gold)}
.foot p{margin:0; max-width:820px; font-size:13px; line-height:1.55; color:var(--faint)}
.home .foot{border-top:0}

/* gentle entrance */
@keyframes up{from{opacity:0; transform:translateY(10px)}}
.hero-in, .page > *{animation:up .9s cubic-bezier(.2,.8,.2,1) both}
.page > *:nth-child(2){animation-delay:.06s} .page > *:nth-child(3){animation-delay:.12s} .page > *:nth-child(n+4){animation-delay:.18s}
@media (prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important} }
@media print{ .nav .links, .corner{display:none} body{border:0} }