/* pardasani.net v4 system: tokens and components. */
body{margin:0}
:root{--ground:#f1f0ec;--ink:#161616;--body:#3b3a37;--muted:#5f5e5a;--tone2:#85837d;--hairline:#c9c7c0;--tile:#e4e2dc;--surface:#f8f7f3;--placeholder:#d3d1ca;--outline:rgba(22,22,22,0.14);--gradient:radial-gradient(90% 85% at 0% 100%,#b49d91 0%,rgba(180,157,145,0) 62%),radial-gradient(70% 80% at 100% 10%,#74b0df 0%,rgba(116,176,223,0) 65%),radial-gradient(60% 70% at 100% 100%,#8fb9d2 0%,rgba(143,185,210,0) 70%),linear-gradient(135deg,#2456ac 0%,#3f7fc8 45%,#8fb9d2 100%);--gradient-solid:#2c5ea8;--glass-gradient-fill:rgba(241,240,236,0.18);--glass-gradient-line:rgba(241,240,236,0.65);--glass-image-fill:rgba(241,240,236,0.72);--glass-image-line:rgba(255,255,255,0.8);--r-media:20px;--r-chip:14px;--r-pill:999px;--margin:clamp(12px,1.875vw,24px);--gap-t:12px;--gap-s:clamp(24px,3.1vw,40px);--gap-w:clamp(120px,15.6vw,200px);--ease:cubic-bezier(0.2,0.8,0.2,1);--sans:'Funnel Sans',ui-sans-serif,system-ui,sans-serif;--mono:'Antarctican Mono','IBM Plex Mono',ui-monospace,monospace}

/* Page */
.root{min-height:100%;background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.55;text-wrap:pretty;-webkit-font-smoothing:antialiased}
.root h1,.root h2,.root h3,.root h4{text-wrap:balance}
.page{padding:0 var(--margin)}
/* The header's Contact link is #contact, the footer. It scrolls there smoothly, or jumps with reduced motion. */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.gap-w{margin-top:var(--gap-w)}
.gap-s{margin-top:var(--gap-s)}
/* M: between the story beats of a case study, Problem and the three decisions */
:root{--gap-m:clamp(64px,8vw,112px)}
.gap-m{margin-top:var(--gap-m)}

/* Materials */
.gradient{background:var(--gradient)}
.glass-g{background:var(--glass-gradient-fill);border:1px solid var(--glass-gradient-line);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);color:var(--ground)}
.glass-i{background:var(--glass-image-fill);border:1px solid var(--glass-image-line);-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);color:var(--ink)}
.frost{background:rgba(241,240,236,0.72);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.solid .glass-g,.glass-g.solid{background:var(--gradient-solid);-webkit-backdrop-filter:none;backdrop-filter:none}
.solid .glass-i,.glass-i.solid,.solid .frost,.frost.solid{background:var(--ground);-webkit-backdrop-filter:none;backdrop-filter:none}
@media (prefers-reduced-transparency:reduce){.glass-g{background:var(--gradient-solid);-webkit-backdrop-filter:none;backdrop-filter:none}.glass-i,.frost{background:var(--ground);-webkit-backdrop-filter:none;backdrop-filter:none}}
.grain{position:absolute;inset:0;width:100%;height:100%;opacity:0.04;pointer-events:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Type */
.t-label{margin:0;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:0.06em;text-transform:uppercase;line-height:1.35}
.t-kind{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:0.06em;text-transform:uppercase;line-height:1.35}
.t-tag{display:inline-flex;align-items:center;min-height:26px;padding:0 10px;box-sizing:border-box;border:1px solid currentColor;border-radius:999px;font-family:var(--mono);font-size:11px;letter-spacing:0.05em;text-transform:uppercase;white-space:nowrap;line-height:1}
.t-code{font-family:var(--mono);font-size:12px;letter-spacing:0;text-transform:none}
.t-page{margin:0;font-size:clamp(88px,21vw,270px);font-weight:800;letter-spacing:-0.07em;line-height:0.78}
.t-case{margin:0;padding-bottom:0.2em;font-size:clamp(64px,17vw,218px);font-weight:800;letter-spacing:-0.065em;line-height:0.8}
.t-statement{margin:0;font-size:clamp(24px,2.5vw,32px);font-weight:500;letter-spacing:-0.022em;line-height:1.2;text-wrap:balance}
.t-quote{margin:0;font-size:clamp(26px,2.7vw,34px);font-weight:500;letter-spacing:-0.022em;line-height:1.2}
.t-heading{margin:0;font-size:clamp(21px,1.9vw,24px);font-weight:700;letter-spacing:-0.025em;line-height:1.15}
.t-body{margin:0;font-size:clamp(16px,1.42vw,18px);line-height:1.55;color:var(--body)}
.t-summary{margin:0;font-size:clamp(20px,2vw,26px);font-weight:500;letter-spacing:-0.02em;line-height:1.25;text-wrap:balance}
.tone2{color:var(--tone2)}
.nudge{display:inline-block;transform:translateY(-0.06em)}
.mono-link{display:inline-flex;align-items:center;min-height:44px;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink);text-underline-offset:4px}

/* Grid: span n of 10, full width below 720px of content */
.split,.row{display:flex;flex-wrap:wrap;column-gap:12px}
.split{row-gap:var(--gap-s)}
.row{row-gap:12px}
/* Bento grids (project cards, About tiles): 14px gaps, a touch wider than the 12px page grid */
.bento{column-gap:14px;row-gap:14px}
.bento>.c4{width:clamp(calc((100% - 126px) * 0.4 + 42px),calc((720px - 100%) * 999),100%)}
.bento>.c6{width:clamp(calc((100% - 126px) * 0.6 + 70px),calc((720px - 100%) * 999),100%)}
.c2,.c3,.c4,.c5,.c6,.c7{flex:none;min-width:0}
.c2{width:clamp(calc((100% - 108px) * 0.2 + 12px),calc((720px - 100%) * 999),calc(50% - 6px))}
.c3{width:clamp(calc((100% - 108px) * 0.3 + 24px),calc((720px - 100%) * 999),100%)}
.c4{width:clamp(calc((100% - 108px) * 0.4 + 36px),calc((720px - 100%) * 999),100%)}
.c5{width:clamp(calc((100% - 108px) * 0.5 + 48px),calc((720px - 100%) * 999),100%)}
.c6{width:clamp(calc((100% - 108px) * 0.6 + 60px),calc((720px - 100%) * 999),100%)}
.c7{width:clamp(calc((100% - 108px) * 0.7 + 72px),calc((720px - 100%) * 999),100%)}
.c10{flex:none;width:100%;min-width:0}
.o5{margin-left:clamp(0px,calc((100% - 720px) * 999),calc((100% - 108px) * 0.5 + 60px))}

/* Focus and motion */
a:focus-visible,button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.on-dark a:focus-visible,.on-dark button:focus-visible{outline-color:var(--ground)}
.is-focus{outline:2px solid var(--ink);outline-offset:3px}
.on-dark .is-focus{outline-color:var(--ground)}
.still,.still *{transition-duration:0.01ms!important;transition-delay:0s!important}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:0.01ms!important;transition-delay:0s!important;animation-duration:0.01ms!important}}

/* Nav */
.nav-bar{position:sticky;top:0;z-index:20;transition:box-shadow 200ms var(--ease)}
/* Once the page has scrolled more than 8px (the footer sets is-scrolled on the page), a soft shadow separates the header from the page. The one exception to the no-shadow rule. */
.is-scrolled .nav-bar{box-shadow:0 1px 0 rgba(22,22,22,0.06),0 8px 24px -12px rgba(22,22,22,0.18)}
.nav{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:4px var(--margin)}
.nav-home{display:flex;align-items:center;gap:8px;min-height:44px;color:var(--ink);text-decoration:none;font-size:15px;font-weight:800;letter-spacing:-0.02em;white-space:nowrap}
.nav-home img{display:block;width:27px;height:28px}
.nav-links{display:flex;align-items:center;margin-right:-10px}
.nav-link{display:flex;align-items:center;min-height:44px;padding:0 10px;color:var(--muted);text-decoration:none;font-size:14px;font-weight:500;transition:color 160ms var(--ease)}
.nav-link:hover,.nav-link.is-hover{color:var(--ink)}
.nav-link[aria-current="page"]{color:var(--ink);font-weight:600}
@media (max-width:540px){.nav-name{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.nav-link{padding:0 8px}.nav-links{margin-right:-8px}}

/* Hero window and pills */
.window{position:relative;height:clamp(440px,44vw,560px);box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(16px,1.9vw,24px);border-radius:20px;overflow:hidden;color:var(--ground)}
.pill{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 18px;box-sizing:border-box;border-radius:999px;text-decoration:none;font-size:15px;font-weight:600;white-space:nowrap;transition:background-color 160ms var(--ease)}
.glass-g.pill:hover,.glass-g.pill.is-hover{background:rgba(241,240,236,0.32)}

/* Chips */
.chip-row{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;padding-bottom:6px}
@media (max-width:759px){.chip-row{justify-content:flex-start}}
.chip{position:relative;display:inline-flex;align-items:center;min-height:36px;padding:0 14px;box-sizing:border-box;border-radius:999px;border:1px solid var(--ink);background:transparent;color:var(--ink);font-family:var(--sans);font-size:13px;font-weight:500;cursor:pointer;transition:background-color 160ms var(--ease),color 160ms var(--ease)}
.chip::before{content:"";position:absolute;inset:-4px -3px}
.chip:hover,.chip.is-hover{background:rgba(22,22,22,0.06)}
.chip[aria-pressed="true"],.chip.is-active{background:var(--ink);color:var(--ground)}

/* Images and cards */
.ph{position:relative;overflow:hidden;border-radius:var(--r-media);background:var(--placeholder)}
.ph-label{position:absolute;top:14px;left:16px;right:16px;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:0.06em;text-transform:uppercase;line-height:1.4;color:#4a4946}
.card{position:relative;display:block;overflow:hidden;border-radius:var(--r-media);background:var(--placeholder);color:var(--ink);text-decoration:none;isolation:isolate}
/* Raised glass edge: the softest shadow underneath and a hairline of light inside the edge, so cards lift off the page without darkening it */
:root{--raise:0 1px 2px rgba(22,22,22,0.05),0 6px 16px -10px rgba(22,22,22,0.12);--raise-in:inset 0 1px 0 rgba(255,255,255,0.55),inset 0 0 0 1px rgba(255,255,255,0.22)}
.card,.tile{box-shadow:var(--raise)}
.card::after,.tile::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:var(--raise-in);pointer-events:none;z-index:5}
.card-img{position:absolute;inset:0;background:var(--placeholder);transition:transform 520ms var(--ease)}
.card:hover .card-img,.card.is-hover .card-img{transform:scale(1.03)}
/* Every project card's glass caption sits top-left, 12px in. The arrow stays bottom-right. */
.cap{position:absolute;left:12px;top:12px;max-width:calc(100% - 92px);box-sizing:border-box;display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-radius:var(--r-chip)}
.cap-name{font-size:clamp(17px,1.56vw,20px);font-weight:700;letter-spacing:-0.02em;line-height:1.15}
.cap-big{font-size:clamp(24px,2.6vw,34px);font-weight:700;letter-spacing:-0.02em;line-height:1.1}
.cap-sum{font-size:13px;line-height:1.4;color:var(--body)}
.cap-kind{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:0.06em;text-transform:uppercase;color:var(--muted)}
.arrow{position:absolute;right:12px;bottom:12px;width:44px;height:44px;box-sizing:border-box;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background-color 200ms var(--ease),color 200ms var(--ease),border-color 200ms var(--ease)}
.card:hover .arrow,.card.is-hover .arrow{background:var(--ink);color:var(--ground);border-color:var(--ink)}

/* Index list */
.ix{position:relative;list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.ix-row{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:12px;row-gap:2px;min-height:64px;box-sizing:border-box;padding:18px 0 14px;border-bottom:1px solid var(--hairline);color:var(--ink);text-decoration:none}
.ix-name{display:inline-block;font-size:clamp(18px,1.7vw,22px);font-weight:600;letter-spacing:-0.015em;line-height:1.2;transition:transform 260ms var(--ease)}
.ix-row:hover .ix-name,.ix-row:focus-visible .ix-name,.ix-row.is-hover .ix-name{transform:translateX(8px)}
.ix-kind{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:0.06em;text-transform:uppercase;color:var(--muted)}
.ix-prev{position:absolute;z-index:3;width:240px;border-radius:var(--r-media);overflow:hidden;background:var(--placeholder);pointer-events:none;transition:top 260ms var(--ease),left 260ms var(--ease),height 260ms var(--ease),transform 260ms var(--ease),opacity 180ms ease}
@media (hover:none),(max-width:719px){.ix-prev{display:none}}

/* Case study */
.stat{flex:1 1 0;min-width:0;display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:4px;padding-left:12px;border-left:1px solid var(--ink)}
.stat dd{margin:0;font-size:18px;font-weight:600;line-height:1.2}
@media (max-width:719px){.stat{padding-left:10px}.stat dd{font-size:14px;font-weight:500;line-height:1.3}}
/* The stat labels stay for screen readers only. The value and its 1px ink line show. */
.stat dt{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.play{display:flex;align-items:center;justify-content:center;width:96px;height:96px;box-sizing:border-box;border-radius:50%;padding:0;cursor:pointer;color:var(--ink);text-decoration:none;transition:transform 260ms var(--ease)}
.play:hover,.play.is-hover{transform:scale(1.06)}
.credits{margin:0;padding-top:12px;border-top:1px solid var(--hairline);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:20px 12px}
.credits dt{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:0.06em;text-transform:uppercase;color:var(--muted)}
.credits dd{margin:6px 0 0;font-size:14px;line-height:1.45}
.credits a{color:var(--ink);text-underline-offset:3px}
/* Project bar: Back to the previous project, the house to All work, Next to the next project, in the Work page's order. */
.bar-wrap{position:sticky;bottom:20px;z-index:10;display:flex;justify-content:center;pointer-events:none}
@media (max-width:719px){.bar-wrap{position:static}}
.bar{display:inline-flex;align-items:center;gap:4px;padding:5px;border-radius:999px;outline:1px solid var(--outline);pointer-events:auto}
.bar-link{display:flex;flex-direction:column;justify-content:center;min-height:48px;padding:0 18px;box-sizing:border-box;border-radius:999px;color:var(--ink);text-decoration:none;line-height:1.25;white-space:nowrap;transition:background-color 160ms var(--ease)}
.bar-kind{color:var(--muted)}
.bar-name{font-size:14px;font-weight:600}
.bar-home{position:relative;display:flex;align-items:center;justify-content:center;width:48px;height:48px;flex:none;border-radius:50%;color:var(--ink);transition:background-color 160ms var(--ease)}
.bar-link:hover,.bar-link.is-hover,.bar-home:hover,.bar-home.is-hover{background:rgba(22,22,22,0.06)}
/* The house's tooltip, on hover and on keyboard focus */
.bar-tip{position:absolute;left:50%;bottom:calc(100% + 13px);transform:translateX(-50%);padding:6px 12px;border-radius:999px;font-size:13px;font-weight:600;line-height:1.2;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity 160ms var(--ease)}
.bar-home:focus-visible .bar-tip,.bar-home.is-hover .bar-tip{opacity:1}
@media (hover:hover){.bar-home:hover .bar-tip{opacity:1}}
/* Next is glass like Back while someone reads. It fills ink once the Next project card scrolls into view (the footer sets at-end on the page), and goes back to glass if they scroll up. */
.bar-link.bar-next{transition:background-color 240ms var(--ease),color 240ms var(--ease)}
.bar-next .bar-kind{transition:color 240ms var(--ease)}
.at-end .bar-link.bar-next,.bar-link.bar-next.is-end{background:var(--ink);color:var(--ground)}
.at-end .bar-next .bar-kind,.bar-next.is-end .bar-kind{color:rgba(241,240,236,0.75)}
.at-end .bar-link.bar-next:hover,.bar-link.bar-next.is-end:hover,.bar-link.bar-next.is-end.is-hover{background:#333230}
.bar-link.bar-next:hover{transition-duration:160ms}

/* Footer */
.foot{position:relative;overflow:hidden;border-radius:20px 20px 0 0;color:var(--ground);font-family:var(--sans);line-height:1.55;text-wrap:pretty;padding:clamp(64px,10vw,128px) var(--margin) 12px}
.foot-link{display:inline-flex;align-items:center;min-height:44px;color:var(--ground);text-decoration:none;font-size:14px}
.foot-link:hover{text-decoration:underline;text-underline-offset:4px}
.email{margin:0;padding:0;background:none;border:0;color:var(--ground);font-family:var(--sans);font-size:clamp(34px,8.8vw,112px);font-weight:800;letter-spacing:-0.055em;line-height:0.95;text-align:left;overflow-wrap:anywhere;text-decoration:underline;text-decoration-thickness:0.035em;text-underline-offset:0.12em;cursor:copy}
.email-sm{margin:0;padding:0;background:none;border:0;color:var(--ground);font-family:var(--sans);font-size:clamp(22px,2.2vw,28px);font-weight:700;letter-spacing:-0.02em;line-height:1.2;text-align:left;overflow-wrap:anywhere;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:0.18em;cursor:copy}
.icon-btn{display:flex;align-items:center;justify-content:center;width:44px;height:44px;box-sizing:border-box;border-radius:50%;color:inherit;transition:background-color 160ms var(--ease)}
.glass-g.icon-btn:hover{background:rgba(241,240,236,0.32)}

/* About: capsule headline and orbit */
.capsule{position:relative;z-index:2;margin:0;max-width:1100px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;column-gap:0.28em;row-gap:10px;font-size:clamp(28px,4.9vw,66px);font-weight:800;letter-spacing:-0.045em;line-height:1}
.cw{display:inline-flex;align-items:center;height:clamp(52px,8vw,104px);box-sizing:border-box;white-space:nowrap}
.cp{padding:0 0.38em;border-radius:999px}
.loop{position:absolute;left:-12%;top:-36%;width:124%;height:172%;overflow:visible;pointer-events:none}
.loop path{transition:stroke-dashoffset 1.4s var(--ease)}
.orbit{position:relative;height:clamp(560px,54vw,700px);display:flex;align-items:center;justify-content:center}
.photo-wrap{position:absolute;z-index:1;transform:translate(-50%,-50%);transition:left 120ms linear,top 120ms linear}
.photo{display:block;width:76px;height:76px;padding:0;border:0;border-radius:50%;background:var(--placeholder);cursor:pointer;transition:transform 280ms var(--ease)}
.photo-cap{position:absolute;left:50%;top:calc(100% + 4px);z-index:3;transform:translateX(-50%);white-space:nowrap;padding:5px 10px;border-radius:999px;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:0.06em;text-transform:uppercase;pointer-events:none}
.photo-row{display:flex;gap:12px;overflow-x:auto;padding:12px 2px 8px;margin-top:20px;scroll-snap-type:x mandatory}
.photo-row .photo{flex:none;scroll-snap-align:start}

/* About: bento */
.tile{position:relative;box-sizing:border-box;min-height:clamp(320px,30vw,380px);border-radius:var(--r-media);padding:22px}
.dock{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:14px;padding:12px 14px 10px;border-radius:22px}
.dock-group{display:flex;flex-direction:column;align-items:center;gap:8px}
.dock-icons{display:flex;align-items:flex-end;gap:8px;margin:0;padding:0;list-style:none}
.dock-item{position:relative}
.dock-btn{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:12px;background:rgba(248,247,243,0.94);color:var(--ink);font-family:var(--mono);font-size:13px;font-weight:500;cursor:pointer;transform-origin:50% 100%;transition:transform 170ms var(--ease)}
.dock-btn.sm{width:40px;height:40px;border-radius:11px}
.dock-div{align-self:stretch;width:1px;margin:2px 0 24px;background:rgba(241,240,236,0.6)}
.dock-tip{position:absolute;left:50%;bottom:calc(100% + 30px);z-index:5;transform:translateX(-50%);display:flex;flex-direction:column;gap:2px;padding:8px 12px;border-radius:var(--r-chip);white-space:nowrap;pointer-events:none;text-align:left}
.lab-card{position:absolute;width:46%;padding:8px;box-sizing:border-box;border-radius:16px;background:var(--surface);border:1px solid var(--outline)}

/* About: fanned skill cards */
.fan{position:relative;height:440px}
/* The fan has its own curve: a slight pull-back at the start and a slight overshoot that settles. The one exception to the site easing. */
:root{--ease-fan:cubic-bezier(0.65,-0.12,0.35,1.12)}
.fan-card{position:absolute;left:50%;top:40px;width:250px;height:330px;transition:transform 850ms var(--ease-fan)}
.fan.stack{height:auto;display:flex;flex-direction:column;gap:12px}
.fan.stack .fan-card{position:relative;left:auto;top:auto;width:100%;height:auto;min-height:300px;transform:none!important}
.skill{position:relative;width:100%;height:100%;min-height:inherit;box-sizing:border-box;padding:22px;border-radius:var(--r-media);display:flex;flex-direction:column;gap:14px;overflow:hidden}
.skill h3{position:relative;margin:0;font-size:28px;font-weight:800;letter-spacing:-0.03em;line-height:1}
.skill ul{position:relative;list-style:none;margin:0;padding:12px 0 0;border-top:1px solid currentColor;display:flex;flex-direction:column;gap:4px;font-size:15px;line-height:1.4}

/* About: experience accordion */
.acc{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.acc-item{border-bottom:1px solid var(--hairline)}
.acc-btn{width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto 20px;grid-template-areas:"role org dates sign";align-items:baseline;column-gap:12px;row-gap:4px;min-height:52px;padding:14px 0;box-sizing:border-box;background:none;border:0;text-align:left;font:inherit;color:var(--ink);cursor:pointer}
.acc-btn:hover .acc-role{text-decoration:underline;text-underline-offset:4px}
.acc-role{grid-area:role;font-size:15px;font-weight:600;color:var(--ink)}
.acc-org{grid-area:org;font-size:14px;color:var(--muted)}
.acc-dates{grid-area:dates;white-space:nowrap}
.acc-sign{grid-area:sign;font-size:18px;line-height:1;text-align:right}
@media (max-width:719px){.acc-btn{grid-template-columns:minmax(0,1fr) auto 20px;grid-template-areas:"role role sign" "org dates sign"}.acc-dates{justify-self:end}}
.acc-panel{padding:0 32px 16px 0;font-size:14px;color:var(--body)}


/* Card images. Each mockup shows whole on its own backdrop colour, pinned to the bottom of the card, so tall cards leave room above for the caption and wide ones centre it. Photos crop around a focal point. */
.card-img{container-type:size}
.fit{display:block;width:100%;height:100%;object-fit:contain;object-position:50% 100%}
.fit-cover{object-fit:cover}
.fit-do{object-position:50% 35%}
.bg-oj{background:linear-gradient(90deg,#e9f0cf,#e5ebd0,#ebf0d9)}
.bg-th{background:linear-gradient(90deg,#eae6e3,#dedbd6,#b8bcbc)}
.bg-de{background:linear-gradient(90deg,#0e0c16,#0e0c16 55%,#3c203e)}
.bg-ch{background:linear-gradient(90deg,#6c6e60,#67695b,#606255)}
@container (min-aspect-ratio:16/9){.bg-oj{background:linear-gradient(180deg,#ebf2d3,#e9f0cf,#e8efcd) left/50% 100% no-repeat,linear-gradient(180deg,#f6f8eb,#f3f7e7,#f0f5df) right/50% 100% no-repeat}.bg-de{background:linear-gradient(180deg,#251d47,#100d1a,#0f0d18) left/50% 100% no-repeat,linear-gradient(180deg,#0f0e19,#100e18,#422344) right/50% 100% no-repeat}}
@container (min-aspect-ratio:3/2){.bg-ch{background:linear-gradient(180deg,#828477,#7b7d6f,#6e7062) left/50% 100% no-repeat,linear-gradient(180deg,#616356,#606255,#5f6154) right/50% 100% no-repeat}}
@container (min-aspect-ratio:4/3){.bg-th{background:linear-gradient(180deg,#dbd1c8,#e0d5cc,#eae6e3) left/50% 100% no-repeat,linear-gradient(180deg,#ede9e6,#e8e7e5,#c3c3c2) right/50% 100% no-repeat}}

/* Home hero: the name, one line of text with the logo, and a drifting row of the work */
.hero-window{--wp:clamp(16px,1.9vw,24px);height:auto;padding:var(--wp);justify-content:flex-start;gap:clamp(16px,1.6vw,24px);container-type:inline-size}
.hero-intro{position:relative;display:flex;justify-content:space-between;align-items:center;gap:24px}
.hero-line{max-width:50%;color:var(--ground)}
.hero-copy{display:flex;flex-direction:column;align-items:flex-start;gap:16px;flex:1;min-width:0}
.btn-pill{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;box-sizing:border-box;border:1px solid var(--ink);border-radius:999px;background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:15px;font-weight:600;line-height:1;text-decoration:none;white-space:nowrap;transition:background-color 160ms var(--ease),color 160ms var(--ease)}
.btn-pill:hover,.btn-pill.is-hover{background:var(--ink);color:var(--ground)}
.more-row{display:flex;justify-content:flex-end;margin-top:var(--gap-s)}
.hero-mark{position:relative;flex:none;width:58px;height:60px}
.hero-loop{position:absolute;display:block;transform:translate(-50%,-50%);transition:left 700ms var(--ease),top 700ms var(--ease),opacity 500ms var(--ease)}
.hero-bleed{margin:0 calc(-1 * var(--wp))}
.hero-row{overflow:hidden;padding:8px 0 4px var(--wp)}
.hero-track{display:flex;width:max-content;margin:0;padding:0;list-style:none;animation:hero-drift 60s linear infinite}
.hero-row:hover .hero-track,.hero-row:focus-within .hero-track{animation-play-state:paused}
@keyframes hero-drift{to{transform:translateX(-50%)}}
.hero-tile{flex:none;width:30vw;width:30cqw;margin-right:12px}
.hero-link{position:relative;display:block;aspect-ratio:16/10;border-radius:20px;overflow:hidden;outline:1px solid rgba(255,255,255,0.6);outline-offset:-1px;transition:transform 300ms var(--ease)}
.hero-link img{display:block;width:100%;height:100%;object-fit:cover}
.hero-link:hover,.hero-link:focus-visible{transform:translateY(-6px)}
.hero-link:focus-visible{outline:2px solid var(--ground);outline-offset:3px}
.hero-cap{position:absolute;left:10px;bottom:10px;padding:6px 12px;border-radius:999px;font-size:13px;font-weight:600;line-height:1.2;opacity:0;transition:opacity 200ms var(--ease);pointer-events:none}
.hero-link:hover .hero-cap,.hero-link:focus-visible .hero-cap{opacity:1}
.still .hero-track{animation:none}
.still .hero-row{overflow-x:auto;overflow-y:hidden}
.still .hero-dup{display:none}
@media (prefers-reduced-motion:reduce){.hero-track{animation:none!important}.hero-row{overflow-x:auto;overflow-y:hidden}.hero-dup{display:none}}
@media (max-width:719px){.hero-line{max-width:none}.hero-track{animation:none}.hero-row{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-left:var(--wp);padding-right:var(--wp);scrollbar-width:none}.hero-row::-webkit-scrollbar{display:none}.hero-tile{width:80vw;scroll-snap-align:start}.hero-dup{display:none}}

/* Link pill: every outbound link on a project page. Optional icon before, an arrow after anything that opens a new tab. */
.link-pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;box-sizing:border-box;border:1px solid var(--ink);border-radius:999px;background:transparent;color:var(--ink);font-family:var(--sans);font-size:15px;font-weight:600;line-height:1;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color 160ms var(--ease),color 160ms var(--ease)}
.link-pill:hover,.link-pill:focus-visible,.link-pill.is-hover{background:var(--ink);color:var(--ground)}
.link-pill svg{display:block;flex:none;width:16px;height:16px}
.pill-row{display:flex;flex-wrap:wrap;gap:12px}
.hero-pill{display:flex;justify-content:center;margin-top:24px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}