@import "https://fonts.bunny.net/css2?family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400&display=swap";
.arc-demo{--bg:#f4f3ef;--bg-alt:#fff;--ink:#131313;--ink-soft:#555;--ink-faint:#8a8a8a;--rule:#1313131a;--ease:cubic-bezier(.2, .7, .1, 1);background:var(--bg);color:var(--ink);letter-spacing:-.005em;-webkit-font-smoothing:antialiased;min-height:100vh;font-family:Inter,-apple-system,sans-serif}.arc-demo .mono{letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);font-family:JetBrains Mono,monospace;font-size:.74rem}.arc-demo .container{max-width:1440px;margin-inline:auto;padding-inline:1.5rem}@media (min-width:768px){.arc-demo .container{padding-inline:2.5rem}}.arc-demo .display{letter-spacing:-.035em;font-size:clamp(2.4rem,5.5vw,4.6rem);font-weight:300;line-height:1.05}.arc-demo .h2{letter-spacing:-.022em;font-size:clamp(1.6rem,2.6vw,2.2rem);font-weight:300;line-height:1.1}.arc-demo .body{color:var(--ink-soft);font-size:1.02rem;font-weight:400;line-height:1.6}.arc-demo .top{z-index:30;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--rule);background:#f4f3efe6;position:sticky;top:0}.arc-demo .top-inner{justify-content:space-between;align-items:center;max-width:1440px;margin-inline:auto;padding:1.3rem 1.5rem;display:flex}@media (min-width:768px){.arc-demo .top-inner{padding-inline:2.5rem}}.arc-demo .top .logo{letter-spacing:0;color:var(--ink);font-size:1rem;font-weight:500}.arc-demo .top nav{gap:2.5rem;display:none}@media (min-width:900px){.arc-demo .top nav{display:flex}}.arc-demo .top nav a{color:var(--ink);transition:color .25s var(--ease);font-size:.92rem;font-weight:400}.arc-demo .top nav a:hover{color:var(--ink-soft)}.arc-demo .top-meta{color:var(--ink-soft);gap:1rem;font-size:.85rem;display:flex}.arc-demo .gallery{grid-template-columns:1fr;gap:2.5rem 1.5rem;display:grid}@media (min-width:640px){.arc-demo .gallery{grid-template-columns:1fr 1fr}}@media (min-width:1024px){.arc-demo .gallery{grid-template-columns:1fr 1fr 1fr}}.arc-demo .thumb{cursor:pointer;display:block}.arc-demo .thumb .img{aspect-ratio:4/3;width:100%;transition:opacity .4s var(--ease);background:#1a1a1a;overflow:hidden}.arc-demo .thumb:hover .img{opacity:.85}.arc-demo .thumb .caption{grid-template-columns:1fr auto;align-items:baseline;gap:1rem;margin-top:1rem;display:grid}.arc-demo .thumb .name{color:var(--ink);letter-spacing:-.005em;font-size:1.02rem;font-weight:500}.arc-demo .thumb .meta{color:var(--ink-faint);margin-top:.2rem;font-size:.85rem}.arc-demo .thumb .year{color:var(--ink-faint);font-family:JetBrains Mono,monospace;font-size:.78rem}.arc-demo .img.concrete{background:linear-gradient(#0000000f,#00000040),linear-gradient(110deg,#d8d4cc 0%,#b8b3a9 45%,#8d8780 100%)}.arc-demo .img.glass{background:linear-gradient(135deg,#ffffff0f 0%,#0000 30% 70%,#00000038 100%),repeating-linear-gradient(90deg,#2a3540 0 14%,#1c2730 14% 14.4%),linear-gradient(#6a7c8a 0%,#2a3540 100%)}.arc-demo .img.brick{background:repeating-linear-gradient(0deg,#0000 0 38px,#0000002e 38px 40px),repeating-linear-gradient(90deg,#0000 0 80px,#00000024 80px 82px),linear-gradient(110deg,#a96850 0%,#7b3e29 60%,#4f2418 100%)}.arc-demo .img.wood{background:repeating-linear-gradient(90deg,#0000000d 0 1px,#0000 1px 8px),linear-gradient(#c79766 0%,#8a5e36 50%,#5a3a20 100%)}.arc-demo .img.stone{background:radial-gradient(60% 50%,#e0dccf 0%,#b5b0a3 70%,#8a8478 100%)}.arc-demo .img.steel{background:linear-gradient(110deg,#4a4d52 0%,#2c2e32 50%,#1a1c1f 100%)}.arc-demo .img.green{background:radial-gradient(70% 60% at 50% 40%,#c4ccaa 0%,#6e7a55 60%,#3a4530 100%)}.arc-demo .img.dusk{background:linear-gradient(#2a3a52 0%,#4a3a50 50%,#6a4838 100%)}.arc-demo .foot{background:var(--ink);color:#c8c8c8;margin-top:6rem;font-size:.9rem}.arc-demo .foot a{color:#c8c8c8}.arc-demo .foot a:hover{color:#fff}.arc-demo .foot h4{color:#fff;text-transform:uppercase;letter-spacing:.08em;margin-bottom:.9rem;font-family:JetBrains Mono,monospace;font-size:.74rem;font-weight:400}@keyframes arc-fade{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.arc-demo .fade{animation:arc-fade .85s var(--ease) both}.arc-demo .d1{animation-delay:60ms}.arc-demo .d2{animation-delay:.12s}.arc-demo .d3{animation-delay:.18s}
