/* akhilaryan.com/a-plus — the studio page. Archivo (condensed display) + Geist. Off-white sections, one orange field. */
:root{--acc:#FF3D00;--ink:#1B1C1E;--grey:#6F6F6F;--line:rgba(27,28,30,.12);--w0:#FFFFFF;--w1:#F5F3F0;--w2:#FBFAF8;--bone:#EEE9DF}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--w2);color:var(--ink);font-family:'Geist',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible{outline:3px solid var(--acc);outline-offset:3px;border-radius:2px}
ul{list-style:none;margin:0;padding:0}
.pg{position:relative;min-height:100vh}
.dsp{font-family:'Archivo',system-ui,sans-serif;font-weight:500;font-variation-settings:'wdth' 74;text-transform:uppercase;letter-spacing:-.01em;line-height:.92}
.lbl{display:block;font:500 12px/1 'Geist',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}
.lbl em{font-style:normal;color:var(--acc)}
.lnk{display:inline-block;margin-top:28px;font:500 15px/1 'Geist',sans-serif;border-bottom:1px solid var(--ink);padding-bottom:6px;transition:color .3s,border-color .3s}
.lnk:hover{color:var(--acc);border-color:var(--acc)}
/* Reveal-on-scroll is an enhancement, not a requirement: without JavaScript the `js`
   class is never set, so everything is simply visible. A blank page is worse than no animation. */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .9s cubic-bezier(.16,1,.3,1) var(--d,0s),transform 1s cubic-bezier(.16,1,.3,1) var(--d,0s)}
.js .rv.on{opacity:1;transform:none}

/* header */
.top{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;justify-content:space-between;padding:22px 40px;color:var(--ink);transition:color .4s,background .4s,transform .6s cubic-bezier(.16,1,.3,1)}
.pg.ondk .top{color:#fff}
.pg.hid .top{transform:translateY(-120%)}
.lg{display:inline-flex;align-items:baseline;gap:12px}
.lg .dsp{font-size:34px;line-height:1;font-variation-settings:'wdth' 80;text-transform:none;letter-spacing:-.03em}
.lg .dsp b{font-weight:500;color:var(--acc)}
.lg .by{font:400 13px/1 'Geist',sans-serif;opacity:.75}
.nv{display:flex;gap:32px;font:500 14px/1 'Geist',sans-serif}
.nv a{position:relative;padding:6px 0;opacity:.85;transition:opacity .3s}
.nv a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s cubic-bezier(.16,1,.3,1)}
.nv a:hover{opacity:1}.nv a:hover::after{transform:scaleX(1);transform-origin:left}
.pill{display:inline-flex;align-items:center;justify-content:center;height:42px;padding:0 20px;border-radius:999px;background:var(--ink);color:#fff;font:500 15px/1 'Geist',sans-serif;transition:transform .5s cubic-bezier(.34,1.56,.64,1),background .3s,color .3s}
.pg.ondk .pill{background:#fff;color:var(--ink)}
.pill:hover{transform:scale(1.05);background:var(--acc);color:#fff}
.pill.big{height:72px;padding:0 40px;font-size:22px;background:#fff;color:var(--ink)}
.pill.big:hover{background:var(--ink);color:#fff}

/* hero — one full-bleed colour field */
.hero{position:relative;min-height:100vh;background:var(--w2);color:var(--ink);display:flex;flex-direction:column;justify-content:flex-end;padding:160px 40px 48px;overflow:hidden}
.hero::before{content:"";position:absolute;right:-6%;top:-14%;width:52vw;height:52vw;border-radius:50%;background:radial-gradient(circle at 42% 38%,rgba(255,61,0,.11),rgba(255,61,0,0) 62%);transform:translate3d(var(--mx,0),var(--my,0),0);pointer-events:none}
.hero h1{position:relative;margin:0 0 auto;font-family:'Archivo',system-ui,sans-serif;font-weight:400;font-variation-settings:'wdth' 98;font-size:clamp(34px,4.4vw,64px);line-height:1.14;letter-spacing:-.022em;max-width:19ch}
.hero h1 i{font-style:normal;color:var(--acc)}
.hero .ln{display:block;overflow:hidden}
.hero .ln{display:block;transform:translateY(24px);opacity:0;transition:transform 1.1s cubic-bezier(.16,1,.3,1),opacity .9s}
.pg.in .hero .ln{transform:none;opacity:1}
.hb{position:relative;display:flex;align-items:center;gap:20px;margin-top:80px;opacity:0;transition:opacity .8s .5s}
.pg.in .hb{opacity:1}
.hb .rule{width:88px;height:1px;background:var(--acc)}
.hb .lbl{color:var(--grey);font-size:14px;letter-spacing:.04em;text-transform:uppercase}
.hb .dn{margin-left:auto;font:300 26px/1 'Geist',sans-serif;color:var(--grey);animation:nudge 1.8s cubic-bezier(.45,0,.55,1) infinite}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}

/* statement */
.intro{background:var(--w1);padding:180px 40px 140px}
.intro .big{margin:0;max-width:1100px;font:400 clamp(26px,2.6vw,38px)/1.28 'Geist',sans-serif;letter-spacing:-.015em;text-wrap:pretty}
.intro .big span{color:var(--grey)}
.intro .big b{font-weight:500;color:var(--acc)}

/* three stages */
.tracks{background:var(--w1);padding:0 40px 180px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
.tracks article{border-top:1px solid var(--ink);padding-top:28px}
.tracks h3{margin:18px 0 20px;font-size:clamp(44px,5vw,76px)}
.tracks p{margin:0;font:400 17px/1.6 'Geist',sans-serif;color:var(--grey);max-width:380px}

/* backstory + numbers */
.story{background:var(--w2);padding:160px 40px;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.story .sl p{margin:22px 0 0;font:400 clamp(22px,2vw,28px)/1.4 'Geist',sans-serif;letter-spacing:-.012em;max-width:560px;text-wrap:pretty}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:0}
.stats li{border-top:1px solid var(--line);padding:28px 24px 34px 0}
.stats li:nth-child(odd){padding-right:40px}
.stats b{display:block;margin-top:18px;font-size:clamp(72px,7vw,120px);font-variation-settings:'wdth' 70;letter-spacing:-.02em;color:var(--ink)}

/* ideas grid */
.ideas{background:var(--w0);padding:160px 40px}
.sh{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:64px}
.ideas .sh{margin-bottom:56px}
.sh h2{grid-column:1;margin:22px 0 0;font-size:clamp(52px,6.4vw,96px)}
.sh p{grid-column:2;margin:0;font:400 18px/1.6 'Geist',sans-serif;color:var(--grey);max-width:520px}
.sh .lnk{grid-column:2;justify-self:start;margin-top:0}
.filters{list-style:none;margin:0 0 72px;padding:34px 0 0;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.filters li{display:flex;flex-direction:column;gap:6px}
.filters b{font:500 16px/1.3 'Geist',sans-serif;letter-spacing:-.005em}
.filters span{font:400 14px/1.5 'Geist',sans-serif;color:var(--grey)}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
/* One object repeated: kicker on the top line, title on the next, description takes the
   slack, status and apply pinned to the bottom — so the four read as a row, not four
   independent boxes. (They used margin-top:auto on the title, which made its position
   depend on how long each description happened to be.) */
.grid li{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:28px 28px 32px;min-height:300px;display:grid;grid-template-rows:auto auto 1fr auto auto;align-content:start;transition:background .35s}
.grid li:hover{background:var(--w1)}
.grid li.linkcard{position:relative}
.grid li.linkcard .st::after{content:"";position:absolute;inset:0}
.grid li{position:relative}
.grid li.linkcard .st{transition:color .3s}
.grid li.linkcard:hover .st{color:var(--ink)}
.grid .yr{font:500 12px/1 'Geist',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--grey)}
.grid h4{margin:0 0 14px;padding-top:26px;font:500 24px/1.15 'Geist',sans-serif;letter-spacing:-.02em;text-wrap:balance;align-self:start}
.grid p{margin:0 0 22px;font:400 15px/1.5 'Geist',sans-serif;color:var(--grey);align-self:start}
.grid .st{font:500 12px/1 'Geist',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--acc)}
.grid li.plus{background:var(--acc);color:#fff;border-color:var(--acc)}
.grid li.plus .yr,.grid li.plus p,.grid li.plus .st{color:#fff}
.grid li.plus:hover{background:var(--ink);border-color:var(--ink)}
.grid li.stealth{cursor:default}
.grid li.stealth:hover{background:transparent}
.grid li.stealth .yr{color:#b8b5ae}
.grid li.stealth h4{color:#b8b5ae;font-weight:400}
.grid li.stealth p{color:#c7c4bd}

/* team */
.team{background:var(--ink);color:#fff;padding:180px 40px;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.team h2{margin:0;font-size:clamp(60px,8vw,128px)}
.team p{margin:32px 0 0;font:400 19px/1.6 'Geist',sans-serif;color:#B9B7B2;max-width:520px}
.team .lnk{color:#fff;border-color:#fff}
.team .lnk:hover{color:var(--acc);border-color:var(--acc)}
.team .lbl{color:#8F8D88}
.pills{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.pills li{padding:14px 22px;border:1px solid rgba(255,255,255,.28);border-radius:999px;font:500 15px/1 'Geist',sans-serif;transition:background .3s,border-color .3s,color .3s}
.pills li:hover{background:#fff;color:var(--ink);border-color:#fff}

/* backed, not built — a ledger, deliberately a size down from the homepage wall, because
   these are not his companies. Name left, what it does right, on hairlines. */
.port{background:var(--w1);padding:150px 40px}
.pf{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.pf li{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);align-items:baseline;gap:0 48px;padding:22px 0 24px;border-bottom:1px solid var(--line);transition:padding-left .45s cubic-bezier(.16,1,.3,1)}
.pf li:hover{padding-left:14px}
.pf .n{font-family:'Archivo',system-ui,sans-serif;font-weight:500;font-variation-settings:'wdth' 84;letter-spacing:-.015em;font-size:clamp(22px,2.1vw,30px);line-height:1.05;justify-self:start}
.pf .d{font:400 16px/1.55 'Geist',sans-serif;color:var(--grey);max-width:64ch;transition:color .3s}
.pf li:hover .d{color:#3f4247}

/* media */
.media{background:var(--w2);padding:160px 40px}
.media .sh{align-items:end}
/* Nothing is published yet, so the section says so rather than showing example posts. */
.media .sh{margin-bottom:0}
.empty{border-top:1px solid var(--line);margin-top:56px;padding-top:34px}
.empty .lnk{margin-top:0}

.posts{list-style:none;margin:56px 0 0;padding:0;border-top:1px solid var(--line)}
.posts li{border-bottom:1px solid var(--line)}
.posts a{display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding:26px 0;text-decoration:none;color:inherit;transition:opacity .3s}
.posts a:hover{opacity:.6}
.pt{font:500 20px/1.3 'Geist',sans-serif;letter-spacing:-.01em;max-width:60ch}
.pd{flex:0 0 auto;font:400 14px/1.5 'Geist',sans-serif;color:var(--grey);max-width:30ch;text-align:right}
.more{margin:28px 0 0}
.more .lnk{margin-top:0}
@media (max-width:700px){
  .posts a{flex-direction:column;align-items:flex-start;gap:6px;padding:20px 0}
  .pd{text-align:left;max-width:none}
}

/* cta + footer */
.cta{background:var(--acc);color:#fff;padding:180px 40px;text-align:center}
.cta h2{margin:0;font-size:clamp(64px,10vw,160px)}
.cta p{margin:28px auto 40px;font:400 19px/1.5 'Geist',sans-serif;color:rgba(255,255,255,.82);max-width:460px}
footer{background:var(--w1);padding:0 40px 40px}
.fc{display:grid;grid-template-columns:1fr 1fr 1fr;gap:40px;border-top:1px solid var(--line);padding-top:40px;align-items:start}
footer .lg .dsp{font-size:44px;color:var(--ink)}
footer .lg .dsp b{color:var(--acc)}
.fl{display:flex;flex-direction:column;gap:12px;font:400 15px/1.3 'Geist',sans-serif}
.fl a{transition:color .3s}.fl a:hover{color:var(--acc)}
footer > .lbl{margin-top:64px}

/* mobile */
@media (max-width:767px){
  .top{padding:16px 20px}
  .nv{display:none}
  .lg .by{display:none}
  .lg .dsp{font-size:30px}
  .pill{height:38px;padding:0 16px;font-size:14px}
  .hero{padding:120px 20px 32px;min-height:100svh}
  .hero h1{font-size:clamp(30px,8.6vw,40px);line-height:1.16;max-width:none}
  .hb{margin-top:56px;gap:14px}.hb .rule{width:44px}.hb .lbl{font-size:12px}
  .intro{padding:110px 20px 80px}
  .tracks{grid-template-columns:1fr;gap:36px;padding:0 20px 110px}
  .tracks h3{font-size:56px;margin:14px 0 14px}
  .story{grid-template-columns:1fr;gap:56px;padding:110px 20px}
  .stats li{padding:22px 16px 26px 0}
  .stats b{font-size:64px}
  .ideas,.media{padding:110px 20px}
  .port{padding:100px 20px}
  .pf li{grid-template-columns:minmax(0,1fr);gap:8px;padding:18px 0 20px}
  .pf li:hover{padding-left:0}
  .pf .d{font-size:15px}
  .sh{grid-template-columns:1fr;gap:18px;margin-bottom:40px}
  .sh h2,.sh p,.sh .lnk{grid-column:1}
  .ideas .sh{margin-bottom:36px}
  .filters{grid-template-columns:1fr;gap:20px;margin-bottom:44px}
  .grid{grid-template-columns:1fr}
  .grid li{padding:22px 20px 26px;min-height:0}
  .grid h4{font-size:22px;padding-top:18px}
  .grid p{margin-bottom:16px}
  .team{grid-template-columns:1fr;gap:48px;padding:110px 20px}
  .team p{font-size:17px}
  .empty{margin-top:34px;padding-top:26px}
  .cta{padding:110px 20px}
  .cta h2{font-size:22vw}
  footer{padding:0 20px 32px}
  .fc{grid-template-columns:1fr;gap:28px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv,.hero .ln i,.hb{transition:none;opacity:1;transform:none}
  .hb .dn{animation:none}
  .pill,.lnk,.nv a::after,.grid li{transition:none}
}