/* CalBot Builds — static homepage. Design system follows the Paper file (bybang-inspired). */
:root{
  --bg:#F5F5F2; --white:#FFFFFF; --ink:#141414;
  --muted:rgba(20,20,20,.3); --faint:rgba(20,20,20,.2); --soft:rgba(20,20,20,.6); --border:rgba(20,20,20,.08);
  --sans:"Geist","Helvetica Neue",Arial,sans-serif; --mono:"Geist Mono",ui-monospace,monospace;
  --edge:32px; --gap:32px; --cols:16;
  --col:calc((100vw - var(--edge)*2 - var(--gap)*(var(--cols) - 1)) / var(--cols));
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:500;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
picture{display:block;width:100%;height:100%}
picture img{width:100%;height:100%;object-fit:cover}
h1,h2,h3,p,ul,dl,dd{margin:0;padding:0}
ul{list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.mono{font-family:var(--mono)}
.muted{color:var(--muted)}
.faint{color:var(--faint)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* ---------- nav ---------- */
.site-nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:30px var(--edge);pointer-events:none}
.site-nav>*{pointer-events:auto}
.logo{width:22px;height:22px;background:var(--ink);display:flex;justify-content:flex-end}
.logo span{width:8px;height:8px;background:var(--bg)}
.nav-links{display:flex;gap:16px}
.nav-link,.overlay-link{font-size:16px;font-weight:600;letter-spacing:-.02em;color:var(--muted);transition:color .25s}
.nav-link:hover,.nav-link.is-active,.overlay-link.is-active{color:var(--ink)}
.menu-btn{display:none;font-size:22px;font-weight:600;letter-spacing:-.03em}
.menu-overlay{position:fixed;inset:0;z-index:60;background:var(--bg);display:flex;flex-direction:column;justify-content:center;padding:0 16px}
.menu-overlay[hidden]{display:none}
.menu-overlay nav{display:flex;flex-direction:column;gap:6px}
.menu-overlay .overlay-link{font-size:48px;letter-spacing:-.05em;line-height:1.05}
.menu-close{position:absolute;top:16px;right:16px;font-size:22px;font-weight:600;letter-spacing:-.03em}

/* ---------- labels / shared ---------- */
.label{display:flex;gap:12px;align-items:center;font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase}
.label .muted{letter-spacing:0}
.section-head{display:flex;justify-content:space-between;align-items:flex-end}
.text-link{font-size:14px;font-weight:600}
.text-link:hover{color:var(--soft)}
.ph{background:linear-gradient(160deg,var(--a,#E3DED6) 0%,var(--b,#CCC4B6) 100%);position:relative;overflow:hidden}
.ph-label{position:absolute;left:10px;bottom:10px;right:10px;font-family:var(--mono);font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:rgba(20,20,20,.45)}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:15px 24px;background:var(--ink);color:#fff;font-size:14px;font-weight:600;transition:opacity .2s}
.btn:hover{opacity:.85}
.buttons{display:flex;gap:16px;align-items:center}
.section{padding-left:var(--edge);padding-right:var(--edge)}

/* ---------- hero ---------- */
.hero{position:relative;width:100%;aspect-ratio:1440/900;overflow:hidden;background:var(--bg)}
.tile{position:absolute;overflow:hidden;background:#E3DED6}
.tile-2300{left:41.6667%;top:0.0000%;width:16.3889%;height:16.6667%}
.tile-2281{left:19.5833%;top:21.7778%;width:22.3611%;height:42.6667%}
.tile-2296{left:63.1944%;top:18.0000%;width:10.1389%;height:21.3333%}
.tile-2255{left:75.5556%;top:11.1111%;width:22.2222%;height:32.4444%}
.tile-2356{left:2.2222%;top:66.6667%;width:16.2500%;height:33.3333%}
.tile-2253{left:26.6667%;top:88.0000%;width:10.1389%;height:12.0000%}
.tile-2317{left:69.4444%;top:54.0000%;width:22.2222%;height:46.0000%}
.wordmark{position:absolute;left:0;right:0;top:44.9%;display:flex;justify-content:center;font-size:clamp(48px,5.833vw,120px);font-weight:600;letter-spacing:-.05em;line-height:1;z-index:2;
  filter:blur(calc(var(--wm,0) * 10px));opacity:calc(1 - var(--wm,0) * .85);transform:translateY(calc(var(--wm,0) * -24px));will-change:filter,opacity,transform}
.muted-w{color:var(--muted)}
.wordmark.intro{animation:wm-in 1.4s cubic-bezier(.2,.7,.2,1) both}
@keyframes wm-in{from{filter:blur(14px);opacity:0;letter-spacing:.02em}to{filter:blur(0);opacity:1;letter-spacing:-.05em}}
.tagline{position:absolute;left:var(--edge);top:52.2%;width:220px;font-size:13px;line-height:1.45;z-index:2}
.locale{position:absolute;right:var(--edge);bottom:52px;display:flex;flex-direction:column;align-items:flex-end;gap:8px;font-size:12px;z-index:2}
.hero-foot{position:absolute;left:0;right:0;bottom:38px;display:flex;justify-content:center;gap:10px;font-size:10px;color:var(--muted);z-index:2}

/* ---------- about ---------- */
.about{display:flex;gap:var(--gap);align-items:flex-start;padding-top:120px;padding-bottom:120px}
.about-text{width:360px;flex-shrink:0;display:flex;flex-direction:column;gap:28px}
.about-copy{display:flex;flex-direction:column;gap:18px}
.about-copy p{font-size:15px;line-height:1.5}
hr{border:0;height:1px;background:var(--border);margin:0}
.focus{display:flex;flex-direction:column;gap:12px}
.focus li{display:flex;justify-content:space-between;align-items:baseline;font-size:14px}
.focus li span:last-child{font-size:11px;letter-spacing:.04em;opacity:.6}
.about-media{flex:1;display:flex;justify-content:center;gap:var(--gap);padding-top:40px}
.about-a{width:min(420px,30vw);aspect-ratio:420/520}
.about-b{width:min(232px,16.1vw);aspect-ratio:232/300}

/* ---------- work cards ---------- */
.work{display:flex;flex-direction:column;gap:40px;padding-top:40px;padding-bottom:120px}
.cards{display:flex;gap:var(--gap);align-items:flex-start}
.card{flex:1;display:flex;flex-direction:column;gap:12px;min-width:0}
.card--lead{flex:2}
.card-media{width:100%;aspect-ratio:208/340}
.card--lead .card-media{aspect-ratio:416/460}
.card-media picture img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.card:hover .card-media picture img{transform:scale(1.03)}
.card-meta{display:flex;flex-direction:column;gap:4px}
.card-title{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.card-title h3{font-size:14px;font-weight:600}
.card--lead .card-title h3{font-size:16px}
.card-title .mono{font-size:11px}
.card-meta p{font-size:12px;color:rgba(20,20,20,.55)}

/* ---------- selected work ---------- */
.selected{display:flex;flex-direction:column;gap:56px;padding-top:120px;padding-bottom:140px}
.selected-body{display:flex;gap:40px;align-items:center;padding-left:calc(var(--col)*4 + var(--gap)*4 - 82px)}
.preview{width:232px;height:312px;flex-shrink:0}
.preview .preview-img{position:absolute;inset:0;transition:opacity .35s}
.preview.is-empty .preview-img{opacity:0}
.preview .ph-label{opacity:0;transition:opacity .35s}
.preview.is-empty .ph-label{opacity:1}
.work-list{display:flex;flex-direction:column;gap:2px}
.work-item button{display:flex;align-items:center;gap:14px;text-align:left}
.work-item .num{font-size:10px;color:var(--faint);width:12px}
.work-title{font-size:30px;font-weight:600;letter-spacing:-.03em;line-height:1.3;color:var(--muted);transition:color .25s}
.work-item.is-active .work-title{color:var(--ink)}
.work-item .tags{display:flex;gap:14px;font-size:9px;letter-spacing:.04em;opacity:0;transition:opacity .25s}
.work-item.is-active .tags{opacity:1}
.work-item:first-child .tags span{color:var(--ink)}
.work-desc{padding:6px 0 10px 26px;max-width:620px;font-size:13px;line-height:1.5;color:var(--soft)}
.mobile-meta{display:none}

/* ---------- film ---------- */
.film{display:flex;flex-direction:column;gap:32px;padding-top:40px;padding-bottom:140px}
.video{position:relative;width:100%;aspect-ratio:16/9;background:linear-gradient(150deg,#4A443C 0%,#2B2824 100%);display:flex;flex-direction:column;justify-content:space-between;padding:24px;color:#fff}
.video-top,.video-bottom{display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:.04em;color:rgba(255,255,255,.55)}
.video-bottom .mono{font-size:11px;color:rgba(255,255,255,.7)}
.play-text{font-size:16px;font-weight:600;color:#fff;letter-spacing:0}
.play{position:absolute;left:50%;top:50%;width:96px;height:96px;margin:-48px 0 0 -48px;border-radius:50%;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;padding-left:6px;transition:transform .3s}
.play:hover{transform:scale(1.06)}
.play svg{width:31px;height:31px;fill:var(--ink)}
.caption{display:flex;justify-content:space-between;align-items:flex-start;gap:24px}
.caption>div:first-child{display:flex;flex-direction:column;gap:6px;max-width:640px}
.caption h3{font-size:22px;font-weight:600;letter-spacing:-.03em}
.caption p{font-size:14px;line-height:1.5;color:var(--soft)}
.caption .tags{display:flex;gap:24px;font-size:10px;letter-spacing:.04em}

/* ---------- shop ---------- */
.shop{display:flex;gap:var(--gap);align-items:center;padding-top:120px;padding-bottom:120px;background:var(--white)}
.product-media{width:52.78%;aspect-ratio:760/640;flex-shrink:0}
.product-info{flex:1;display:flex;flex-direction:column;gap:28px;padding:0 48px 0 64px}
.product-name{font-size:44px;font-weight:600;letter-spacing:-.04em;line-height:1.05}
.price{font-size:18px;margin-top:10px}
.product-desc{font-size:15px;line-height:1.5;color:rgba(20,20,20,.7)}
.specs{display:flex;flex-direction:column}
.spec{display:flex;justify-content:space-between;padding:10px 0;border-top:1px solid var(--border)}
.spec dt{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.spec dd{font-size:13px}

/* ---------- contact ---------- */
.contact{display:flex;flex-direction:column;gap:64px;padding-top:120px;padding-bottom:32px;overflow:hidden}
.contact-top{display:flex;justify-content:space-between;align-items:flex-end;gap:32px}
.contact-main{display:flex;flex-direction:column;gap:24px;width:560px}
.contact-main h2{font-size:44px;font-weight:600;letter-spacing:-.04em;line-height:1.05}
.contact-cols{display:flex;gap:64px}
.contact-cols div{display:flex;flex-direction:column;gap:8px;font-size:14px}
.contact-cols .mono{font-size:11px}
.giant{display:flex;justify-content:center;font-size:clamp(64px,16.4vw,300px);font-weight:600;letter-spacing:-.06em;line-height:.9;white-space:nowrap}
.foot{display:flex;justify-content:space-between;font-size:10px;color:var(--muted)}
.reveal{opacity:0;filter:blur(12px);transform:translateY(24px);transition:opacity 1.2s ease,filter 1.2s ease,transform 1.2s cubic-bezier(.2,.7,.2,1)}
.reveal.is-in{opacity:1;filter:none;transform:none}

/* ---------- mobile (8-col) ---------- */
@media (max-width:760px){
  :root{--edge:16px;--gap:15px;--cols:8}
  .site-nav{padding:16px var(--edge)}
  .nav-links{display:none}
  .menu-btn{display:block}
  .hero{aspect-ratio:390/780}
  .tile-2300{left:35.8974%;top:2.5641%;width:31.7949%;height:18.9744%}
  .tile-2255{left:4.1026%;top:19.2308%;width:31.7949%;height:21.5385%}
  .tile-2296{left:75.8974%;top:25.6410%;width:24.1026%;height:19.2308%}
  .tile-2281{left:0.0000%;top:64.1026%;width:24.1026%;height:35.8974%}
  .tile-2253{left:28.2051%;top:64.1026%;width:20.0000%;height:11.7949%}
  .tile-2356{left:28.2051%;top:80.7692%;width:43.5897%;height:27.4359%}
  .tile-2317{left:75.8974%;top:60.2564%;width:24.1026%;height:32.0513%}
  .wordmark{top:45.6%;font-size:13.33vw}
  .tagline{left:var(--edge);top:53.8%;width:66.7%;font-size:13px}
  .locale{right:var(--edge);bottom:24px}
  .locale .clock-line{display:none}
  .hero-foot{display:none}
  .about{flex-direction:column;gap:22px;padding-top:64px;padding-bottom:64px}
  .about-text{width:100%;gap:22px}
  .about-text hr,.about-text .focus{display:none}
  .about-media{width:100%;padding-top:0}
  .about-a{width:100%;aspect-ratio:358/420}
  .about-b{display:none}
  .work{gap:24px;padding-top:24px;padding-bottom:64px}
  .work .text-link{display:none}
  .cards{flex-wrap:wrap;gap:24px 16px}
  .card{flex:0 0 calc(50% - 8px);gap:8px}
  .card--lead{flex:0 0 100%}
  .card-media{aspect-ratio:171/200}
  .card--lead .card-media{aspect-ratio:358/300}
  .card-title .mono{display:none}
  .card-title h3{font-size:13px}.card--lead .card-title h3{font-size:14px}
  .card-meta p{font-size:11px}
  .card-media .ph-label{font-size:9px}
  .selected{gap:20px;padding-top:48px;padding-bottom:64px}
  .selected-body{padding-left:0}
  .preview{display:none}
  .work-item button{gap:10px}
  .work-title{font-size:22px;line-height:1.35}
  .work-item .tags{display:none}
  .work-desc{padding:4px 0 8px 22px;font-size:12px}
  .mobile-meta{display:block;font-size:10px;letter-spacing:.04em}
  .film{gap:16px;padding-top:24px;padding-bottom:64px}
  .film .text-link{display:none}
  .video{padding:12px}
  .play{width:56px;height:56px;margin:-28px 0 0 -28px;padding-left:3px}
  .play svg{width:18px;height:18px}
  .play-text{font-size:13px}
  .video-top .mono,.video-top span{font-size:9px}
  .caption{flex-direction:column;gap:4px}
  .caption h3{font-size:18px}.caption p{font-size:13px}
  .caption .tags{display:none}
  .shop{flex-direction:column;align-items:stretch;gap:20px;padding-top:64px;padding-bottom:64px}
  .product-media{width:100%;aspect-ratio:358/380;order:2}
  .product-info{display:contents}
  .product-info .label{order:1}
  .product-info>div:nth-child(2){order:3}
  .product-desc{order:4;font-size:14px}
  .specs{order:5}
  .product-info .buttons{order:6}
  .product-name{font-size:30px}
  .price{font-size:16px;margin-top:8px}
  .spec{padding:9px 0}.spec dt{font-size:10px}.spec dd{font-size:12px}
  .shop .btn{flex:1;padding:16px 22px}
  .contact{gap:24px;padding-top:64px;padding-bottom:24px}
  .contact-top{flex-direction:column;align-items:stretch}
  .contact-main{width:100%;gap:24px}
  .contact-main h2{font-size:34px}
  .contact-main .buttons{flex-direction:column;align-items:stretch;gap:24px}
  .contact-main .btn{padding:16px 22px}
  .contact-cols{display:none}
  .giant{justify-content:flex-start;font-size:16.4vw}
  .foot .mono{display:none}
}
@media (min-width:761px) and (max-width:1100px){
  .about-text{width:300px}
  .selected-body{padding-left:0}
  .cards{flex-wrap:wrap}
  .card{flex:0 0 calc(25% - 24px)}
  .card--lead{flex:0 0 100%}
  .card--lead .card-media{aspect-ratio:16/9}
  .contact-top{flex-direction:column;align-items:flex-start}
  .product-info{padding:0 0 0 24px}
  .tagline{width:180px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .wordmark{filter:none!important;opacity:1!important;transform:none!important}
  .reveal{opacity:1;filter:none;transform:none}
}