/* rico.bd sample A: rickshaw-art plates. Painted tin signs on a night street. */
:root{
  --night:#141a3a; --night-2:#1c2450; --ink:#0d1130;
  --cream:#fbefd5; --cream-2:#e9dcc0;
  --magenta:#d6246e; --marigold:#f5a623; --emerald:#12946a;
  --sky:#3fa7e0; --vermilion:#e8452c; --leaf:#8cc63f;
  --sign:"Bungee",system-ui,sans-serif; --body:"Hind Siliguri",system-ui,sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scrollbar-color:var(--marigold) var(--night)}
body{background:var(--night);color:var(--cream);font:400 1.0625rem/1.65 var(--body);
  background-image:radial-gradient(circle at 1px 1px,rgba(251,239,213,.06) 1px,transparent 1.5px);background-size:22px 22px}
::selection{background:var(--marigold);color:var(--ink)}
a{color:inherit}
:focus-visible{outline:3px solid var(--marigold);outline-offset:3px;border-radius:4px}
img{display:block;max-width:100%}
.ic{width:1.05em;height:1.05em;flex:none}
.skip{position:absolute;left:-999px;top:8px;background:var(--marigold);color:var(--ink);padding:.5rem 1rem;z-index:9}
.skip:focus{left:8px}

.bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.75rem clamp(1rem,4vw,3rem);background:rgba(20,26,58,.92);backdrop-filter:blur(8px);border-bottom:2px solid var(--marigold)}
.mark{font:1.4rem var(--sign);text-decoration:none;color:var(--marigold);letter-spacing:.04em}
.bar nav{display:flex;gap:clamp(.75rem,2.5vw,2rem)}
.bar nav a{text-decoration:none;font-weight:600;font-size:.95rem}
.bar nav a:hover{color:var(--marigold)}

main{max-width:1240px;margin:0 auto;padding:0 clamp(1rem,4vw,3rem)}
section{padding:clamp(3.5rem,8vw,6.5rem) 0}
.sec-h{font:clamp(1.9rem,4.5vw,3.2rem)/1.05 var(--sign);color:var(--marigold)}
.sec-p{margin-top:.6rem;color:var(--cream-2);max-width:60ch}

/* hero: a painted sign board and a portrait in a painted oval */
.hero{display:grid;grid-template-columns:1.25fr .9fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;padding-top:clamp(2.5rem,6vw,5rem)}
.hello{font-weight:600;color:var(--sky);font-size:1.15rem}
.hero h1{font:clamp(2.6rem,7.5vw,5.6rem)/.95 var(--sign);margin:.4rem 0 1rem;display:flex;flex-direction:column}
.hero h1 span:nth-child(1){color:var(--cream)}
.hero h1 span:nth-child(2){color:var(--magenta)}
.hero h1 .big{font-family:"Bungee Shade",var(--sign);color:var(--marigold);font-size:1.35em;line-height:1}
.role{font-weight:700;font-size:1.15rem;color:var(--emerald);filter:brightness(1.35)}
.intro{margin-top:.75rem;max-width:58ch;color:var(--cream-2)}
.acts{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.8rem 1.3rem;border-radius:999px;font-weight:700;text-decoration:none;
  background:var(--marigold);color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink),0 0 0 2px var(--marigold);transition:transform .2s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn.ghost{background:transparent;color:var(--cream);box-shadow:inset 0 0 0 2px var(--cream)}
.hero-oval{justify-self:center;text-align:center}
.oval{display:block;width:min(380px,72vw);aspect-ratio:4/5;border-radius:50%;overflow:hidden;background:var(--magenta);
  box-shadow:0 0 0 8px var(--marigold),0 0 0 14px var(--night),0 0 0 18px var(--emerald),0 0 0 24px var(--night),0 0 0 27px var(--magenta)}
.photo{width:100%;height:100%;object-fit:cover;object-position:78% 30%}
.hero-oval figcaption{margin-top:2.6rem;font:1rem var(--sign);color:var(--sky);letter-spacing:.06em}

/* work: plates in a bento that grows in place */
.plates{margin-top:2.25rem;display:grid;gap:14px;
  --c1:1fr;--c2:1fr;--c3:1fr;--c4:1fr;--r1:1fr;--r2:1fr;--r3:1fr;
  grid-template-columns:var(--c1) var(--c2) var(--c3) var(--c4);
  grid-template-rows:var(--r1) var(--r2) var(--r3);height:min(1080px,150vh);
  transition:grid-template-columns .5s var(--ease),grid-template-rows .5s var(--ease)}
.plates:has(>[data-c="1"]:is(:hover,:focus-visible)){--c1:2.3fr}
.plates:has(>[data-c="2"]:is(:hover,:focus-visible)){--c2:2.3fr}
.plates:has(>[data-c="3"]:is(:hover,:focus-visible)){--c3:2.3fr}
.plates:has(>[data-c="4"]:is(:hover,:focus-visible)){--c4:2.3fr}
.plates:has(>[data-r="1"]:is(:hover,:focus-visible)){--r1:1.9fr}
.plates:has(>[data-r="2"]:is(:hover,:focus-visible)){--r2:1.9fr}
.plates:has(>[data-r="3"]:is(:hover,:focus-visible)){--r3:1.9fr}

.plate{--bg:var(--magenta);--fg:var(--cream);position:relative;min-width:0;min-height:0;overflow:hidden;display:flex;flex-direction:column;
  text-decoration:none;color:var(--fg);background:var(--bg);border-radius:14px;padding:12px;
  box-shadow:inset 0 0 0 4px var(--bg),inset 0 0 0 6px var(--fg),inset 0 0 0 9px var(--bg),inset 0 0 0 10px var(--fg);
  transition:opacity .35s var(--ease),filter .35s var(--ease)}
.plate::before,.plate::after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:var(--fg);top:18px;left:18px}
.plate::after{left:auto;right:18px}
.is-magenta{--bg:var(--magenta)} .is-emerald{--bg:var(--emerald)} .is-vermilion{--bg:var(--vermilion)}
.is-marigold{--bg:var(--marigold);--fg:var(--ink)} .is-sky{--bg:var(--sky);--fg:var(--ink)} .is-leaf{--bg:var(--leaf);--fg:var(--ink)}
.plates:has(>.plate:hover)>.plate:not(:hover){opacity:.62;filter:saturate(.7)}

.pl-art{flex:1 1 auto;min-height:0;margin:16px 16px 0;border-radius:8px;background:var(--ink);overflow:hidden;display:grid;place-items:center}
.pl-art img{width:100%;height:100%;object-fit:contain}
.pl-letters{background:transparent;border:2px dashed currentColor;opacity:.95}
.pl-letters span{font:clamp(1.05rem,1.9vw,1.7rem)/1.05 var(--sign);text-align:center;padding:.5rem}
.pl-body{flex:none;display:flex;flex-direction:column;gap:.15rem;padding:.7rem 16px 14px}
.pl-meta{display:flex;justify-content:space-between;font-size:.78rem;font-weight:700;opacity:.9}
.pl-name{font:1.15rem/1.15 var(--sign)}
.pl-line{font-size:.92rem;font-weight:500;line-height:1.35}
.pl-desc,.pl-stack{display:block;max-height:0;opacity:0;overflow:hidden;font-size:.9rem;line-height:1.45;
  transition:max-height .45s var(--ease),opacity .3s var(--ease)}
.pl-stack{font-weight:700;font-size:.8rem}
.plate:is(:hover,:focus-visible) .pl-desc{max-height:8em;opacity:1;margin-top:.35rem}
.plate:is(:hover,:focus-visible) .pl-stack{max-height:3em;opacity:1;margin-top:.35rem}

/* story */
.road{list-style:none;padding:0;margin-top:2.25rem;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.road li{border-top:4px solid var(--marigold);padding:1rem .25rem 0}
.road li:nth-child(4n+2){border-color:var(--magenta)} .road li:nth-child(4n+3){border-color:var(--emerald)} .road li:nth-child(4n+4){border-color:var(--sky)}
.yr{font:1.6rem var(--sign);color:var(--cream)}
.road h3{font-size:1.05rem;margin:.2rem 0 .3rem}
.road p{color:var(--cream-2);font-size:.95rem}

/* stack */
.kits{margin-top:2.25rem;display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.kit{background:var(--night-2);border-radius:12px;padding:1.1rem;box-shadow:inset 0 0 0 2px rgba(251,239,213,.18)}
.kit h3{font:1rem var(--sign);color:var(--marigold);margin-bottom:.5rem}
.kit p{color:var(--cream-2);font-size:.95rem}

/* contact */
.contact{text-align:center}
.contact h2{font:clamp(2.2rem,6vw,4.4rem)/1 var(--sign);color:var(--marigold)}
.contact>p{margin-top:.75rem;color:var(--cream-2)}
.ct{list-style:none;padding:0;margin:2rem auto 0;max-width:820px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;text-align:left}
.ct a{display:flex;align-items:center;gap:.6rem;padding:.9rem 1rem;border-radius:12px;text-decoration:none;background:var(--night-2);
  box-shadow:inset 0 0 0 2px rgba(251,239,213,.18);transition:box-shadow .2s}
.ct a:hover{box-shadow:inset 0 0 0 2px var(--marigold)}
.ct-k{font-weight:700;color:var(--marigold);min-width:4.6rem}
.ct-v{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--cream-2);font-size:.92rem}
.foot{text-align:center;padding:2rem 1rem 2.5rem;color:var(--cream-2);font-size:.9rem;border-top:2px solid var(--night-2)}

@media (max-width:900px){
  .hero{grid-template-columns:1fr}
  .hero-oval{order:-1}
  .plates{grid-template-columns:1fr 1fr;grid-template-rows:none;grid-auto-rows:auto;height:auto}
  .pl-art{aspect-ratio:16/10;flex:none}
  .pl-desc{max-height:none;opacity:1;margin-top:.35rem}
  .plates:has(>.plate:hover)>.plate:not(:hover){opacity:1;filter:none}
  .road{grid-template-columns:1fr 1fr}
  .kits{grid-template-columns:1fr 1fr}
  .ct{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .bar nav a:not([href="#contact"]):not([href="#work"]){display:none}
  .plates{grid-template-columns:1fr}
  .road,.kits,.ct{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}