/* Legible type at normal browser zoom. Decoration can move independently. */
:root { --muted:#d2cddd; }
.brand-name small { max-width:205px; font-size:12px; line-height:1.35; letter-spacing:.035em; }
.desktop-nav a { font-size:15px; }
.hero-copy>p,.about-copy>p,.service-card p,.process-steps p,.contact p,
.section-heading>p,.heading-aside>p,.project-dialog .dialog-description { font-size:16px; line-height:1.75; }
.about-copy>p.lead { font-size:19px; }
.button,.hero-actions .button,.text-link,.header-cta,.video-filters button,
.dialog-watch-nav button,.dialog-youtube { font-size:14px; }
.eyebrow,.hero-chips,.section-label,.project-category,.visual-caption,
.project-meta>div>span,.project-state,.service-foot,.footer-bottom { font-size:12px; font-weight:700; letter-spacing:.065em; }
.projects-footnote,.footer-top p { font-size:14px; line-height:1.6; }
.hero-bottom { font-size:12px; line-height:1.5; gap:24px; }
.hero-topline { font-size:12px; letter-spacing:.09em; }
.chibi-credit { left:145px; right:12px; width:auto; max-width:none; translate:none;
  text-align:right; font-size:12px; opacity:1; letter-spacing:.015em; line-height:1.3; }
.art-caption { font-size:12px; opacity:1; letter-spacing:.08em; }
.scene-bottom small { font-size:12px; letter-spacing:.025em; }
.scene-bottom { padding-left:145px; gap:12px; }
.scene-bottom>span:first-child { display:flex; align-items:center; gap:6px; min-width:0; }
.scene-bottom small { margin:0; line-height:1.35; }
.scene-bottom>span:last-child { flex-shrink:0; }
.motion-toggle { font-size:12px; padding:10px 14px; }
.experience-sticker { width:154px; height:154px; }
.experience-sticker span { font-size:12px; line-height:1.3; letter-spacing:.035em; }
.about-signature small { font-size:12px; line-height:1.5; }
.social-link strong { font-size:16px; }
html.motion-ready .reveal.visible { translate:none; }
.art-seal,.experience-sticker,.contact-sticker { transform:none;
  animation:label-shadow-pulse 6s ease-in-out infinite; }
@keyframes label-shadow-pulse { 0%,100% { box-shadow:5px 5px 0 var(--ink); }
  50% { box-shadow:7px 8px 0 var(--ink); } }

/* Each keyboard/touch button is one moving unit: paper, type and icon. */
.interactive-tag { --tag-angle:-6deg; --tag-color:var(--pink); background:none;
  border:0; box-shadow:none; isolation:isolate; transform:rotate(var(--tag-angle));
  animation:tag-card-idle 5.5s ease-in-out infinite;
  text-align:center; color:var(--ink); touch-action:manipulation; }
.interactive-tag::before { content:""; position:absolute; z-index:-1; inset:0;
  border:2px solid var(--ink); border-radius:inherit; background:var(--tag-color);
  box-shadow:5px 5px 0 var(--ink); transform:none; animation:none;
  transition:background .2s,box-shadow .2s; }
.interactive-tag:hover::before,.interactive-tag:focus-visible::before {
  background:var(--yellow); box-shadow:7px 8px 0 var(--ink); }
.interactive-tag .tag-copy { display:block; position:relative; z-index:1; }
.tag-a.interactive-tag { padding:15px 19px; font:italic 24px/1.12 Georgia,serif; }
.tag-a.interactive-tag strong { font:900 30px/1.08 var(--display); letter-spacing:-.025em; }
.tag-a>.tag-spark { position:absolute; top:-18px; right:0; color:var(--paper); font-size:26px; }
.tag-b.interactive-tag { --tag-angle:3deg; --tag-color:var(--mint);
  display:flex; align-items:center; justify-content:center; gap:10px; width:250px; max-width:85%;
  padding:14px 15px; font-size:13px; font-weight:800; line-height:1.4;
  letter-spacing:.04em; animation-delay:-2.75s; }
.tag-b>.tag-icon { display:grid; place-items:center; width:25px; height:25px;
  flex:0 0 25px; margin:0; font-size:24px; }
.tag-b>.tag-copy { margin:0; font:inherit; }
.interactive-tag.is-activated { animation:tag-card-pop .7s cubic-bezier(.2,.8,.2,1); }
.tag-click-spark { position:absolute; z-index:3; left:50%; top:50%;
  color:var(--spark-color,var(--paper)); font:24px/1 var(--body); pointer-events:none;
  animation:tag-click-spark .7s ease-out forwards; }
@keyframes tag-card-idle {
  0%,100% { transform:rotate(var(--tag-angle)) translateY(0); }
  50% { transform:rotate(calc(var(--tag-angle) + 2deg)) translateY(-5px); }
}
@keyframes tag-card-pop {
  0% { transform:rotate(var(--tag-angle)) scale(.94,1.06); }
  30% { transform:rotate(calc(var(--tag-angle) - 5deg)) scale(1.12,.9); }
  58% { transform:rotate(calc(var(--tag-angle) + 3deg)) scale(.98,1.05); }
  100% { transform:rotate(var(--tag-angle)) scale(1); }
}
@keyframes tag-click-spark {
  0% { opacity:1; transform:translate(-50%,-50%) scale(.4); }
  100% { opacity:0; transform:translate(var(--spark-x),var(--spark-y)) rotate(60deg) scale(1); }
}
@media(max-width:900px) {
  .brand-name small { max-width:170px; }
  .hero-chips { gap:10px; }
  .hero-copy>p { font-size:16px; }
  .tag-b.interactive-tag { width:235px; bottom:6%; }
  .service-card { min-height:390px; }
  .process-steps li { min-height:245px; }
}
@media(max-width:680px) {
  .brand-name small { max-width:145px; font-size:12px; }
  .site-header { min-height:88px; height:auto; padding-block:15px; }
  .hero-actions { gap:18px; }
  .hero-art { height:510px; margin-bottom:80px; }
  .tag-b.interactive-tag { bottom:-66px; right:0; width:250px; max-width:92%; }
  .hero-note { margin-left:25px; }
  .hero-topline { padding-bottom:25px; }
  .scene-bottom { padding:10px 10px 10px 145px; gap:7px; }
  .scene-symbol { display:none; }
  .scene-bottom small { margin-left:4px; }
  .scene-bottom>span:last-child { font-size:12px; }
  .chibi-credit { bottom:80px; }
  .hero-bottom { padding-top:30px; }
  .service-card { min-height:340px; }
  .process-steps li { min-height:250px; }
  .experience-sticker { width:146px; height:146px; }
  .footer-top { flex-direction:column; }
}
@media(max-width:360px) {
  .hero-art { height:440px; margin-bottom:88px; }
  .chibi-credit { bottom:110px; }
  .scene-bottom { padding-bottom:32px; }
  .scene-bottom>span:last-child { position:absolute; right:10px; top:auto; bottom:7px; }
  .tag-b.interactive-tag { font-size:13px; padding:12px; }
  .hero-chips { gap:10px; }
}

/* Larger monochrome vectors: no gradients, resampled images or moving logos. */
.social-links .social-link,.social-links .social-link+.social-link {
  display:grid; grid-template-columns:56px minmax(0,1fr);
  grid-template-rows:auto auto auto; column-gap:14px; row-gap:4px;
  align-content:center; min-height:140px; padding:22px 33px 22px 14px;
}
.social-link>.contact-platform-mark { grid-column:1; grid-row:1/span 3;
  align-self:center; display:grid; place-items:center; width:56px; height:56px;
  border:2px solid var(--ink); border-radius:14px; background:var(--paper);
  color:var(--ink); box-shadow:3px 3px 0 var(--ink);
  rotate:none; translate:none; transform:none; filter:none; animation:none;
}
.social-link>.contact-platform-mark svg { width:40px; height:40px; max-width:none;
  shape-rendering:geometricPrecision; filter:none; transform:none; }
.social-link>.contact-platform-instagram { background:var(--pink); }
.social-link>.contact-platform-whatsapp { background:var(--mint); }
.social-link>.contact-platform-discord { background:var(--lavender); }
.social-link>.contact-platform-youtube { background:#ed3547; color:#fff6e7; }
.social-link>span:not(.contact-platform-mark) { grid-column:2; grid-row:1;
  font-size:12px; line-height:1.4; letter-spacing:.055em; }
.social-link>strong { grid-column:2; grid-row:2; margin:0;
  font-size:16px; line-height:1.4; }
.social-link>small { grid-column:2; grid-row:3; margin:0; line-height:1.4; }
.social-link>i { top:23px; right:10px; font-size:22px; }
.contact .button>.contact-cta-mark { width:36px; height:36px; padding:0;
  border:0; border-radius:0; background:transparent; box-shadow:none; color:var(--mint);
  translate:none; transform:none; filter:none; animation:none; }
.contact .button>.contact-cta-mark svg { width:32px; height:32px; }
@media(min-width:681px) and (max-width:1100px) {
  .social-links { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .social-links .social-link:nth-child(odd) { border-left:0; }
  .social-links .social-link:nth-child(n+3) { border-top:1px solid var(--line); }
}
@media(max-width:680px) {
  .social-links .social-link,.social-links .social-link+.social-link {
    min-height:112px; padding:20px 33px 20px 4px; column-gap:16px;
  }
}

/* Original 32 px vector family: drawn shapes, not text or emoji glyphs. */
.drawn-icon { display:block; flex-shrink:0; overflow:visible;
  shape-rendering:geometricPrecision; pointer-events:none; }
.drawn-icon-holder { display:inline-grid; place-items:center;
  width:1em; height:1em; line-height:1; vertical-align:middle; flex-shrink:0; }
.drawn-icon.star-glyph { width:1em; height:1em; max-width:none; }
.drawn-platform { --icon-face:var(--paper); color:var(--ink); }
.platform-instagram { --icon-accent:var(--pink); }
.platform-whatsapp { --icon-accent:var(--mint); }
.platform-discord { --icon-accent:var(--lavender); }
.platform-youtube { --icon-accent:var(--yellow); }
.platform-vector { width:32px; height:32px; }
.contact .button>.contact-cta-mark { --icon-face:var(--ink); }
.motion-toggle>span { display:inline-grid; width:14px; height:14px;
  place-items:center; vertical-align:middle; }
.motion-toggle .drawn-icon { width:14px; height:14px; }
.motion-flower { -webkit-text-stroke:0; --icon-outline:var(--ink); }
.motion-flower>[data-icon] { width:100%; height:100%; }
.motion-flower .drawn-icon { width:100%; height:100%; }
.scene-bottom [data-icon="dot"] { display:inline-grid; width:9px; height:9px; }
.scene-bottom [data-icon="dot"] svg { width:9px; height:9px; }
.tag-click-spark>.drawn-icon { width:24px; height:24px; }