/* arnab.work brand set: ported from the 2-leaf-field prototype. Also serves /lounge/. */
@font-face{font-family:"Literata";src:url("fonts/literata-latin-variable.woff2") format("woff2");font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:"Nunito Sans";src:url("fonts/nunito-sans-latin-variable.woff2") format("woff2");font-weight:200 1000;font-style:normal;font-display:swap}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}
img{max-width:100%;display:block}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:16px;top:16px;z-index:100;padding:10px 14px;background:#fff;color:#000}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

:root{--sand:#efe5d3;--sand-2:#e5d7bf;--sand-3:#d9c7a8;--sage:#dfe6d9;--sage-2:#c9d6c4;--sage-ink:#425b47;--gum:#7f9a83;
  --ink:#2b2b28;--ink-2:#4a4943;--terra:#a9532f;--terra-text:#8a3f20;--ochre:#c08a4a;--char:#2f3330;
  --serif:"Literata",Georgia,serif;--sans:"Nunito Sans","Segoe UI",Arial,sans-serif;
  --ease:cubic-bezier(0.16,1,0.3,1);--ease-out:cubic-bezier(0.23,1,0.32,1)}
html{background:var(--sand);scroll-behavior:smooth}
body{background:var(--sand);color:var(--ink);font-family:var(--sans);font-size:18px;line-height:1.65;-webkit-font-smoothing:antialiased}
::selection{background:var(--sage-ink);color:#fff}
a{color:inherit}
:focus-visible{outline:3px solid var(--terra);outline-offset:3px;border-radius:4px}
.wrap{width:min(1180px,100% - 10vw);margin-inline:auto}
.top{position:relative;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px max(24px,5vw)}
.nm{font-family:var(--serif);font-size:21px;font-weight:600;text-decoration:none}
.top nav{display:flex;align-items:center;gap:24px;font-size:15px;font-weight:700}
.top nav a{text-decoration:none;transition:color 200ms ease}
@media (hover:hover){.top nav a:hover{color:var(--terra-text)}}
.nav-cta{padding:9px 16px;border-radius:999px;background:var(--char);color:var(--sand)!important;transition:transform 160ms var(--ease-out)}
.nav-cta:active{transform:scale(.97)}
.btn{display:inline-flex;align-items:center;min-height:50px;padding:0 26px;border-radius:999px;background:var(--terra);color:#fff;font-weight:700;text-decoration:none;transition:transform 180ms var(--ease-out),background-color 200ms ease}
.btn:active{transform:scale(.97)}
@media (hover:hover){.btn:hover{background:#8f4426}}
.btn-light{background:var(--sand);color:var(--char)}
@media (hover:hover){.btn-light:hover{background:#fff}}
.lnk{font-weight:700;text-underline-offset:4px;text-decoration-thickness:1.5px;text-decoration-color:var(--terra)}
.ctas{display:flex;flex-wrap:wrap;align-items:center;gap:22px}

.band{position:relative;padding:110px 0}
.band h2{margin:0 0 40px;font-family:var(--serif);font-weight:500;font-size:clamp(32px,3.6vw,50px);line-height:1.08;letter-spacing:-0.01em}
.sage{background:var(--sage)}
.sand2{background:var(--sand-2)}
.char{background:var(--char);color:var(--sand)}
.what{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.what article{background:#f7f8f3;border-radius:18px;padding:30px 28px;transition:transform 260ms var(--ease-out)}
@media (hover:hover){.what article:hover{transform:translateY(-4px)}}
.what h3{margin:0 0 10px;font-family:var(--serif);font-weight:600;font-size:22px;line-height:1.2;color:var(--sage-ink)}
.what p{margin:0;color:var(--ink-2);font-size:17px}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:72px;align-items:start}
.how{list-style:none;margin:0;padding:0;display:grid;gap:22px;font-family:var(--serif);font-size:22px;line-height:1.4}
.how li{padding-left:30px;position:relative}
.how li::before{content:"";position:absolute;left:0;top:.5em;width:13px;height:13px;border-radius:50% 0;background:var(--gum);transform:rotate(-12deg)}
.exp-box{background:var(--sand-2);border-radius:20px;padding:34px}
.exp-box h2{font-size:30px;margin-bottom:18px}
.exp-box p{margin:0 0 14px;color:var(--ink-2)}
.facts{margin:22px 0 0;display:grid;gap:14px}
.facts div{display:grid;grid-template-columns:120px 1fr;gap:14px;padding-top:14px;border-top:1px solid var(--sand-3)}
.facts dt{font-weight:800;font-size:15px;color:var(--sage-ink)}
.facts dd{margin:0;font-size:16px;color:var(--ink-2)}
.lede{margin:-18px 0 34px;font-size:20px;color:var(--ink-2);max-width:62ch}
.built{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.built li{display:flex;flex-direction:column;gap:8px;background:var(--sand);border-radius:18px;padding:26px;transition:transform 260ms var(--ease-out)}
@media (hover:hover){.built li:hover{transform:translateY(-4px)}}
.built .k{font-size:14px;font-weight:800;color:var(--sage-ink)}
.built h3{margin:0;font-family:var(--serif);font-weight:600;font-size:23px}
.built p{margin:0 0 6px;color:var(--ink-2);font-size:16.5px}
.p-link{margin-top:auto;font-weight:800;text-decoration:none;color:var(--terra-text)}
.p-link span{display:inline-block;transition:transform 200ms var(--ease-out)}
@media (hover:hover){.p-link:hover span{transform:translateX(4px)}}
.p-link.is-off{color:var(--ink-2);font-weight:600}
.char .c-big{margin:0 0 12px;font-family:var(--serif);font-size:clamp(28px,3vw,42px);line-height:1.18;max-width:24ch}
.char .loc{margin:0 0 32px;color:#e3dccf}
.char :focus-visible{outline-color:var(--sand)}
.foot{background:var(--char);color:#cfd3cb;padding:0 0 44px;font-size:15px}
html.js [data-reveal].pre{opacity:0;transform:translateY(22px)}
html.js [data-reveal].is-in{opacity:1;transform:none;transition:opacity 800ms ease,transform 900ms var(--ease);transition-delay:calc(var(--i,0) * 70ms)}
@media (max-width:980px){.built{grid-template-columns:1fr 1fr}.what{grid-template-columns:1fr 1fr}.split{grid-template-columns:1fr;gap:44px}}
@media (max-width:640px){
  .top{flex-direction:column;align-items:flex-start;padding:18px 20px}
  .top nav{gap:16px;flex-wrap:wrap}
  .wrap{width:calc(100% - 40px)}
  .band{padding:76px 0}
  .built,.what{grid-template-columns:1fr}
  .how{font-size:20px}
  .facts div{grid-template-columns:1fr;gap:2px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}html.js [data-reveal].pre{transform:none}.btn,.p-link span,.what article,.built li{transition-property:background-color,color}}

.top{position:absolute;left:0;right:0;top:0}
.hero{position:relative;min-height:max(100svh,720px);display:flex;align-items:center;overflow:hidden;background:var(--sand)}
.field{position:absolute;inset:0;width:100%;height:100%;touch-action:pan-y}
.hero-text{position:relative;z-index:2;max-width:880px;margin-left:max(24px,5vw);padding:120px 0 80px}
.who{margin:0 0 18px;font-weight:800;color:var(--sage-ink)}
.hero h1{margin:0;font-family:var(--serif);font-weight:500;font-size:clamp(40px,5.4vw,80px);line-height:1.04;letter-spacing:-0.02em}
.sub{margin:26px 0 36px;font-size:20px;color:var(--ink-2);max-width:54ch}
html.js .hero-text>*{animation:rise 900ms var(--ease) both}
html.js .hero-text>:nth-child(2){animation-delay:90ms}
html.js .hero-text>:nth-child(3){animation-delay:180ms}
html.js .hero-text>:nth-child(4){animation-delay:270ms}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@media (max-width:640px){.top{position:relative}.hero{min-height:680px;align-items:flex-start}.hero-text{padding:24px 20px 60px;margin:0}.sub{font-size:18px}}
@media (prefers-reduced-motion:reduce){html.js .hero-text>*{animation:none}}

/* additions for the live site (not in the prototype) */
/* the header carries the name and role once, in the hero line's style (no repeat in the hero) */
.top .nm{font-family:var(--sans);font-size:17px;font-weight:800;color:var(--sage-ink);line-height:1.3}
.lounge-hero{padding:150px 0 40px}
.lounge-hero h1{margin:0 0 14px;font-family:var(--serif);font-weight:500;font-size:clamp(36px,4.6vw,64px);line-height:1.05;letter-spacing:-0.02em}
.lounge-hero p{margin:0 0 22px;font-size:20px;color:var(--ink-2);max-width:54ch}
.game-wrap{padding:0 0 90px}
.game{display:block;width:100%;height:min(88vh,860px);border:0;border-radius:18px;background:var(--sand-2)}
.nf-hero{padding:170px 0 110px}
.nf-hero h1{margin:0 0 16px;font-family:var(--serif);font-weight:500;font-size:clamp(40px,5vw,72px);line-height:1.04}
.nf-hero p{margin:0 0 30px;font-size:20px;color:var(--ink-2);max-width:50ch}
.foot a{color:inherit}
.foot .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}
@media (max-width:640px){.lounge-hero{padding:40px 0 30px}.nf-hero{padding:60px 0 80px}.game{height:min(80vh,640px)}}
[data-i="0"]{--i:0}[data-i="1"]{--i:1}[data-i="2"]{--i:2}[data-i="3"]{--i:3}[data-i="4"]{--i:4}[data-i="5"]{--i:5}[data-i="6"]{--i:6}[data-i="7"]{--i:7}[data-i="8"]{--i:8}[data-i="9"]{--i:9}[data-i="10"]{--i:10}[data-i="11"]{--i:11}[data-i="12"]{--i:12}[data-i="13"]{--i:13}[data-i="14"]{--i:14}[data-i="15"]{--i:15}[data-i="16"]{--i:16}[data-i="17"]{--i:17}[data-i="18"]{--i:18}[data-i="19"]{--i:19}[data-i="20"]{--i:20}[data-i="21"]{--i:21}[data-i="22"]{--i:22}[data-i="23"]{--i:23}