/* DevCommu — bespoke. Camp festival, rose brand, tickets & tape. */
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600;700&display=swap');

.dc-hero{min-height:min(92vh,880px);display:flex;align-items:center;padding:88px 0 64px;position:relative;overflow:hidden}
.dc-hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(color-mix(in srgb,var(--brand) 24%,transparent) 1.3px,transparent 1.3px);background-size:22px 22px;opacity:.4;mask-image:linear-gradient(200deg,transparent 25%,black 80%);-webkit-mask-image:linear-gradient(200deg,transparent 25%,black 80%)}
.dc-hero-inner{position:relative;width:100%}
.dc-hero-copy{position:relative;z-index:3;max-width:760px}
.dc-hl{font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:clamp(2.5rem,7vw,5.4rem);line-height:1.16;letter-spacing:-.01em;color:#17131f;margin:20px 0 18px}
.dc-line{display:block;overflow:hidden;padding:.28em 0 .32em;margin:-.28em 0 -.32em}
.dc-line-in{display:inline-block;color:inherit;transition:color .35s ease}
.dc-line:nth-child(2) .dc-line-in{color:#b03456}
.dc-hl:hover .dc-line:nth-child(1) .dc-line-in{color:#b03456}
.dc-hl:hover .dc-line:nth-child(2) .dc-line-in{color:#17131f}
.dc-hero-copy>p{max-width:46ch;font-size:1.08rem;color:#4a4358}
.dc-hero .dc-hero-poster{position:absolute;right:0;top:50%;width:clamp(230px,28%,350px);z-index:2;transform:rotate(-4deg) translateY(-50%) perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
body.motion .dc-hero-poster{opacity:0}
body.motion .dc-hero-poster.in{opacity:1;animation:dc-poster-in .8s cubic-bezier(.25,1.2,.4,1) both}
@keyframes dc-poster-in{from{translate:40px -20px;rotate:3deg;opacity:0}to{translate:0 0;rotate:0deg;opacity:1}}
.dc-hero .dc-hero-poster .dc-tape{scale:0 1;transition:scale .3s cubic-bezier(.2,1.4,.3,1) .5s}
.dc-hero .dc-hero-poster.in .dc-tape{scale:1 1}
body.motion .dc-line-in{translate:0 118%}
body.motion .dc-line-in.in{translate:0 0}
.dc-poster{position:relative;transform:rotate(-2.5deg) translateY(var(--py,0px)) perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.dc-poster img{aspect-ratio:1/1;object-fit:cover;border-radius:18px;border:2.5px solid #17131f;box-shadow:8px 8px 0 color-mix(in srgb,var(--brand) 30%,white);width:100%}
.dc-tape{position:absolute;width:86px;height:26px;top:-12px;background:color-mix(in srgb,var(--brand) 28%,white);border:1px solid color-mix(in srgb,var(--brand) 40%,white);z-index:2}
.dc-tape-l{left:6%;transform:rotate(-7deg)}
.dc-tape-r{right:6%;transform:rotate(6deg)}
.dc-badge{display:inline-block;border:2px solid var(--brand);color:#b03456;background:#fff;border-radius:9px;padding:6px 15px;font-weight:600;font-size:.86rem;font-family:'Chakra Petch',sans-serif;letter-spacing:.04em}
.dc-copy h1{font-size:clamp(2rem,4.8vw,3rem);font-weight:800;letter-spacing:-.02em;max-width:15ch;margin:16px 0 12px}
.dc-copy p{max-width:46ch;font-size:1.08rem;color:#4a4358}
.dc-hero-ctas{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}
.dc-stubs{padding:40px 0 22px}
.dc-stubs-row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.dc-stub{background:#fff;border:2px solid #17131f;border-radius:14px;padding:16px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;position:relative;box-shadow:4px 4px 0 color-mix(in srgb,var(--brand) 30%,white)}
.dc-stub::before,.dc-stub::after{content:"";position:absolute;top:calc(100% - 40px);width:16px;height:16px;border-radius:50%;background:var(--bg,#f4f0fb);border:2px solid #17131f}
.dc-stub::before{left:-10px;clip-path:inset(0 0 0 50%)}
.dc-stub::after{right:-10px;clip-path:inset(0 50% 0 0)}
.dc-stub-icon{font-size:1.3rem}
.dc-stub strong{font-family:'Chakra Petch',sans-serif;font-size:1.5rem;font-weight:700;color:var(--brand)}
.dc-stub span:last-child{font-size:.85rem;color:#756d8a;font-weight:600}
.dc-mani{padding:56px 0}
.dc-mani h2{font-family:'Chakra Petch',sans-serif;font-size:1.7rem;font-weight:700;letter-spacing:-.01em;margin-bottom:26px}
.dc-mani-list{list-style:none;margin:0;padding:0;max-width:760px}
.dc-mani-list li{display:grid;grid-template-columns:48px 1fr;gap:18px;padding:20px 0;border-bottom:2px dashed color-mix(in srgb,var(--brand) 30%,#e5dff2)}
.dc-mani-num{width:44px;height:44px;border-radius:50%;border:2.5px solid var(--brand);color:#b03456;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.15rem}
.dc-mani-list strong{font-size:1.08rem;font-weight:700}
.dc-mani-list p{margin:4px 0 0;color:#665e79}
.dc-tickets{padding:52px 0}
.dc-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:24px}
.dc-head h2{font-family:'Chakra Petch',sans-serif;font-size:1.7rem;font-weight:700;letter-spacing:-.01em}
.dc-head a{color:var(--brand-deep,var(--brand));font-weight:700;font-size:.92rem}
.dc-tickets-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.dc-ticket{display:flex;flex-direction:column;background:#fff;border:2px solid #17131f;border-radius:16px;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease;box-shadow:4px 4px 0 color-mix(in srgb,var(--brand) 30%,white)}
.dc-ticket:hover{transform:translate(-2px,-2px) rotate(0deg)!important;box-shadow:7px 7px 0 color-mix(in srgb,var(--brand) 34%,white)}
.dc-ticket-photo{aspect-ratio:16/10;background:#f6f2fd;display:flex;align-items:center;justify-content:center;overflow:hidden}
.dc-ticket-photo img{width:100%;height:100%;object-fit:cover}
.dc-ticket-photo b{font-size:2.2rem;color:color-mix(in srgb,var(--brand) 55%,white)}
.dc-ticket-body{padding:14px 16px 16px;border-top:2px dashed color-mix(in srgb,var(--brand) 45%,#e5dff2);display:flex;flex-direction:column;gap:8px}
.dc-ticket-name{font-family:'Chakra Petch',sans-serif;font-weight:600}
.dc-ticket-buy{display:flex;justify-content:space-between;align-items:center;font-weight:700;color:var(--brand-deep,var(--brand))}
.dc-ticket-price{font-weight:800}
.dc-stories{padding:48px 0}
.dc-stories-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.dc-story{display:flex;flex-direction:column;gap:8px;background:#fff;border:2px solid #e5dff2;border-radius:14px;padding:12px}
.dc-story img{aspect-ratio:16/10;object-fit:cover;border-radius:9px;width:100%}
.dc-story-date{font-size:.82rem;font-weight:600;color:var(--brand-deep,var(--brand))}
.dc-story strong{font-size:1rem}
.dc-chips{overflow:hidden;background:var(--btn-bg,var(--brand));border-top:2px solid #17131f;border-bottom:2px solid #17131f;transform:rotate(-1.1deg) scale(1.02) skewX(calc(var(--vel,0)*-6deg)) translateY(calc(var(--vel,0)*-3px));margin:8px -10px 0}
.dc-chips-track{display:flex;width:max-content;animation:dc-scroll 24s linear infinite}
.dc-chips-track span{white-space:nowrap;padding:11px 0;color:#fff;font-weight:700}
@keyframes dc-scroll{to{transform:translateX(-50%)}}
.dc-cta{background-color:#17131f;background-size:cover;background-position:center;padding:70px 0;text-align:center;position:relative}
.dc-cta::before{content:"";position:absolute;inset:0;background:rgba(23,19,31,.68)}
.dc-cta .container{position:relative;max-width:640px}
.dc-cta h2{color:#fff;font-family:'Chakra Petch',sans-serif;font-size:clamp(1.7rem,3.4vw,2.4rem);font-weight:700}
.dc-cta p{color:rgba(255,255,255,.82);margin:10px 0 24px}
@media(max-width:860px){.dc-hero{min-height:0;padding:64px 0 48px}.dc-hero .dc-hero-poster{position:static;width:min(64vw,270px);margin:30px auto 0;transform:rotate(-3deg) perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}.dc-stubs-row{grid-template-columns:repeat(2,1fr)}.dc-tickets-grid,.dc-stories-grid{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.dc-tickets-grid,.dc-stories-grid{grid-template-columns:1fr}}

/* ── Motion — poster wall. Runtime: /assets/sites/sites.js ──────────────── */
::view-transition-old(root){animation:dc-vt-out .32s cubic-bezier(.5,0,.4,1) both}
::view-transition-new(root){animation:dc-vt-in .36s cubic-bezier(.22,1,.36,1) both}
@keyframes dc-vt-out{to{opacity:0;transform:translateY(-3%) rotate(-1.2deg)}}
@keyframes dc-vt-in{from{opacity:0;transform:translateY(4%) rotate(.8deg)}}

/* the taped poster swings in off its tape, then hangs (tilt = you touching it) */
body.motion .dc-poster{opacity:0}
body.motion .dc-poster.in{opacity:1;animation:dc-swing 1.05s cubic-bezier(.3,1.2,.4,1) both}
body.motion .dc-hero-poster.in{animation:dc-poster-in .8s cubic-bezier(.25,1.2,.4,1) both}
@keyframes dc-swing{
  0%{translate:0 -30px;rotate:8deg;opacity:0}
  55%{translate:0 4px;rotate:-4deg;opacity:1}
  100%{translate:0 0;rotate:0deg;opacity:1}
}
body.motion .dc-tape{scale:0 1;transition:scale .3s cubic-bezier(.2,1.4,.3,1) .55s}
body.motion .dc-poster.in .dc-tape{scale:1 1}

/* badge stamps down */
body.motion .dc-badge[data-rv]{scale:1.5;rotate:7deg;transition:opacity .35s ease var(--d,0ms),scale .4s cubic-bezier(.2,1.4,.3,1) var(--d,0ms),rotate .4s cubic-bezier(.2,1.4,.3,1) var(--d,0ms),translate .4s ease var(--d,0ms)}
body.motion .dc-badge[data-rv].in{scale:1;rotate:0deg;translate:0 0}

/* stubs tear in from alternating sides */
body.motion .dc-stubs-row>div:nth-child(odd)[data-rv]{translate:-46px 0;rotate:-6deg}
body.motion .dc-stubs-row>div:nth-child(even)[data-rv]{translate:46px 0;rotate:6deg}
body.motion .dc-stubs-row>div[data-rv].in{translate:0 0;rotate:0deg}

/* manifesto numbers stamp like ink */
body.motion .dc-mani-list li .dc-mani-num{scale:1.7;opacity:0;transition:scale .4s cubic-bezier(.2,1.2,.3,1) .12s,opacity .3s ease .12s}
body.motion .dc-mani-list li.in .dc-mani-num{scale:1;opacity:1}

/* tickets tear off upward */
body.motion .dc-ticket[data-rv]{translate:0 34px;rotate:2.5deg}
body.motion .dc-ticket[data-rv].in{translate:0 0;rotate:0deg}

/* stories land with a light rotation settle */
body.motion .dc-story[data-rv]{scale:.97;rotate:-1.5deg}
body.motion .dc-story[data-rv].in{scale:1;rotate:0deg}
@media(max-width:720px){
  body.motion .dc-stubs-row>div:nth-child(odd)[data-rv]{translate:-28px 0;rotate:-4deg}
  body.motion .dc-stubs-row>div:nth-child(even)[data-rv]{translate:28px 0;rotate:4deg}
  @keyframes dc-swing{
    0%{translate:0 -18px;rotate:5deg;opacity:0}
    55%{translate:0 3px;rotate:-3deg;opacity:1}
    100%{translate:0 0;rotate:0deg;opacity:1}
  }
}
/* rotated stubs/tickets/chips may poke past the viewport edge — contain them */
main{overflow-x:clip}
.muted{color:#5b6478}